/* assets/css/da-2026.css */
/* =============================================================================
   carte-blister — DA « Rayon sous coque » — da-2026.css (Agent DA, 31/10/2026)
   Tokens, typo, composants corps. N’altère PAS header / footer / couleurs boutons charte.
   Polices OFL auto-hébergées : Syne (titres) + Source Sans 3 (corps). Aucun CDN.
   ============================================================================= */

/* ---------- @font-face Syne ---------- */
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/syne-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/syne-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/syne-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/syne-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Syne";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/syne-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- @font-face Source Sans 3 ---------- */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-400-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-500-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-600-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-700-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/source-sans-3-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --cb-navy: #003366;
  --cb-foot: #092142;
  --cb-green: #1C8048;
  --cb-green-hover: #166A3B;
  --cb-rule: #5BC889;
  --cb-ink: #0F1F33;
  --cb-muted: #5A6B7D;
  --cb-line: #E2E8F0;
  --cb-white: #FFFFFF;
  --cb-paper: #F7F8F9;
  --cb-paper-soft: #F2F4F6;
  --cb-intro: #6B7280;
  --cb-stripe: #F4F6F8;

  --cb-font-display: "Syne", system-ui, sans-serif;
  --cb-font-body: "Source Sans 3", system-ui, sans-serif;

  /* Échelle éditoriale — hero 2–3 lignes à 1440 (pas 6–8) */
  /* Hero 2–3 lignes à 1440 : plafond 3.2 rem, mesure 20 ch */
  --cb-fs-hero: clamp(2.05rem, 1.3rem + 1.9vw, 3.2rem);
  --cb-fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --cb-fs-h2: clamp(1.75rem, 1.333rem + 1.852vw, 3rem);
  --cb-fs-h3: clamp(1.375rem, 1.208rem + 0.7407vw, 1.875rem);
  --cb-fs-lead: clamp(1.125rem, 1.042rem + 0.3704vw, 1.375rem);
  --cb-fs-body: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --cb-fs-small: 0.875rem;
  --cb-fs-stat: clamp(1.45rem, 1.05rem + 1.25vw, 2rem);

  --cb-lh-tight: 1.02;
  --cb-lh-title: 1.12;
  --cb-lh-body: 1.6;
  --cb-tracking-display: -0.03em;

  --cb-r-bubble: 36px;
  --cb-r-window: 28px;
  --cb-r-soft: 16px;
  --cb-r-pill: 999px;
  --cb-radius: 0; /* corps anguleux sauf fenêtres coque */

  --cb-space-section: clamp(5rem, 11vw, 9.5rem);
  --cb-space-block: clamp(2rem, 4vw, 3.5rem);
  --cb-wrap: 1240px;
  --cb-prose: 66ch;
  --cb-gutter: clamp(1.25rem, 3vw, 2rem);

  --cb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --cb-dur: 320ms;
  --cb-rise: 14px;
}

/* ---------- Surfaces navigateur (craft-floor) ---------- */
::selection {
  background: rgba(0, 51, 102, 0.18);
  color: var(--cb-ink);
}
:focus-visible {
  outline: 2px solid var(--cb-green);
  outline-offset: 3px;
}

/* ---------- Corps ---------- */
body {
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-body);
  line-height: var(--cb-lh-body);
  color: var(--cb-ink);
  background: var(--cb-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Remplace Inter du site live sur le contenu (pas le footer structure) */
main,
main p,
main li,
main td,
main th,
main label,
main input,
main textarea,
main select,
main button,
.sec,
.cbh,
.cb-page,
.da-section {
  font-family: var(--cb-font-body);
}

.da-display,
.da-hero h1,
.da-section h2,
.da-section .h2,
main h1,
main h2,
.sec h2,
.sec .h2,
.hero h1,
.cb-phero h1,
.cbh h1,
.cbh h2,
.cbh-hero-copy h1,
.sm-title,
.cbh-sm-title {
  font-family: var(--cb-font-display);
  font-weight: 700;
  color: var(--cb-navy);
  letter-spacing: var(--cb-tracking-display);
  line-height: var(--cb-lh-tight);
  text-wrap: balance;
}

main h3,
.sec h3,
.sec .h3,
.da-section h3,
.cbh h3 {
  font-family: var(--cb-font-display);
  font-weight: 600;
  color: var(--cb-navy);
  letter-spacing: -0.015em;
  line-height: var(--cb-lh-title);
  text-wrap: balance;
}

.da-hero h1 { font-size: var(--cb-fs-hero); margin: 0; max-width: 20ch; line-height: 1.06; letter-spacing: -0.03em; }
main h1,
.hero h1,
.cb-phero h1,
.cbh-hero-copy h1 { font-size: var(--cb-fs-h1); }
.da-section h2,
.sec h2,
.sec .h2,
main h2,
.cbh h2 { font-size: var(--cb-fs-h2); }
.da-section h3,
.sec h3,
.sec .h3,
main h3 { font-size: var(--cb-fs-h3); }

.da-lead,
.hero .lead,
.cb-intro,
.cbh-lead {
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-lead);
  font-weight: 400;
  line-height: 1.55;
  color: var(--cb-muted);
  max-width: 42rem;
  text-wrap: pretty;
}

/* Un seul filet vert — pas d’eyebrow capitales trackées */
.da-rule {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 0.9rem 0 0;
  background: var(--cb-rule);
  border: 0;
}

/* Alias déprécié : si présent, rendu neutre (pas de look label IA) */
.da-eyebrow {
  display: block;
  margin: 0 0 0.35rem;
  font-family: var(--cb-font-body);
  font-size: var(--cb-fs-small);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cb-muted);
}
.da-eyebrow::before { content: none; }

/* ---------- Layout ---------- */
.da-wrap {
  width: min(var(--cb-wrap), calc(100% - 2 * var(--cb-gutter)));
  margin-inline: auto;
}

.da-section {
  padding-block: var(--cb-space-section);
}
/* Marge sous le menu sticky pour ne pas recouvrir titres / cartes */
html {
  scroll-padding-top: 5.5rem;
}
.da-section--paper { background: var(--cb-paper); }
.da-section--soft { background: var(--cb-paper-soft); }
.da-section--white { background: var(--cb-white); }
.da-section--ink {
  background: var(--cb-foot);
  color: rgba(255, 255, 255, 0.92);
  padding-top: calc(var(--cb-space-section) + 0.5rem);
}
.da-section--ink h2,
.da-section--ink h3,
.da-section--ink .da-display { color: var(--cb-white); }
.da-section--ink .da-lead,
.da-section--ink p { color: rgba(255, 255, 255, 0.72); }
.da-section--ink .da-rule { background: var(--cb-rule); }
.da-section--ink .da-stat__num { color: var(--cb-white); }
.da-section--ink .da-stat__label { color: rgba(255, 255, 255, 0.65); }

/* ---------- Diptyque carton | coque (5/7) ---------- */
.da-diptych {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.da-diptych--rev {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.da-diptych--rev .da-carton { order: 2; }
.da-diptych--rev .da-coque { order: 1; }

.da-carton { min-width: 0; }
.da-carton .da-display,
.da-carton h1,
.da-carton h2 { margin: 0.65rem 0 0; }
.da-carton .da-lead { margin: 1.2rem 0 0; }
.da-carton .da-ctas { margin-top: 1.85rem; }

.da-coque {
  position: relative;
  min-width: 0;
  isolation: isolate;
}
.da-coque__window {
  position: relative;
  overflow: hidden;
  border-radius: var(--cb-r-bubble);
  background: var(--cb-paper-soft);
  border: 1px solid var(--cb-line);
  aspect-ratio: 4 / 3;
}
.da-coque__window img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.025);
  transition: transform var(--cb-dur) var(--cb-ease-out), opacity var(--cb-dur) var(--cb-ease-out);
}
.da-coque:hover .da-coque__window img,
.da-coque.is-in .da-coque__window img {
  transform: scale(1);
}
/* Reflet PET — neutre uniquement (pas de couleur hors charte) */
.da-coque__window::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(15, 31, 51, 0.03) 100%
  );
  mix-blend-mode: soft-light;
}
.da-coque__hook {
  position: absolute;
  top: -0.4rem;
  left: 50%;
  z-index: 2;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: -0.7rem;
  border: 2px solid var(--cb-line);
  border-radius: 50%;
  background: var(--cb-white);
}
.da-coque__hook::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.55rem;
  width: 2px;
  height: 0.55rem;
  margin-left: -1px;
  background: var(--cb-line);
}

@media (max-width: 860px) {
  .da-diptych,
  .da-diptych--rev {
    grid-template-columns: 1fr;
  }
  .da-diptych--rev .da-carton,
  .da-diptych--rev .da-coque { order: unset; }
  .da-coque__window { aspect-ratio: 5 / 4; border-radius: var(--cb-r-window); }
}

/* ---------- Hero plein cadre sous coque ---------- */
.da-hero {
  position: relative;
  padding: clamp(1rem, 2.5vw, 1.75rem) 0 var(--cb-space-block);
}
.da-hero__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--cb-r-bubble);
  min-height: min(82vh, 680px);
  background: var(--cb-paper-soft);
  border: 1px solid var(--cb-line);
}
.da-hero__stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.da-hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.82) 36%,
    rgba(255, 255, 255, 0.18) 68%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}
.da-hero__copy {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  padding: clamp(2rem, 6vw, 4.75rem);
}
.da-hero__copy .da-lead { color: var(--cb-muted); }
.da-hero__copy .da-ctas { margin-top: 1.85rem; }

@media (max-width: 720px) {
  .da-hero__stage { min-height: 0; border-radius: var(--cb-r-window); }
  .da-hero__stage > img {
    position: relative;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .da-hero__veil {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.04) 0%,
      rgba(255, 255, 255, 0.9) 52%,
      #fff 100%
    );
  }
  .da-hero__copy {
    margin-top: -3.5rem;
    padding: 1.35rem var(--cb-gutter) 0;
    max-width: none;
  }
  .da-hero h1 { max-width: none; }
}


/* Skinpack hero: text LEFT + full card RIGHT (no overlay, no veil wash, contain) */
.da-hero--skinpack .da-hero__stage {
  display: grid;
  grid-template-columns: minmax(16rem, 0.95fr) minmax(14rem, 1.05fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  min-height: 0;
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
  background: #fff;
  overflow: visible;
}
.da-hero--skinpack .da-hero__stage > img {
  position: relative !important;
  inset: auto !important;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto !important;
  max-height: min(78vh, 740px);
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center;
  background: #fff;
}
.da-hero--skinpack .da-hero__veil {
  display: none !important;
}
.da-hero--skinpack .da-hero__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 0;
  margin-top: 0;
}
@media (max-width: 720px) {
  .da-hero--skinpack .da-hero__stage {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem var(--cb-gutter) 1.25rem;
    overflow: visible;
  }
  .da-hero--skinpack .da-hero__copy {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0 !important;
    padding: 0;
  }
  .da-hero--skinpack .da-hero__stage > img {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/* ---------- CTA ---------- */
.da-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
@media (max-width: 760px) {
  .da-ctas,
  .da-actions,
  .da-hero__copy .da-ctas,
  .da-carton .da-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .da-ctas .btn,
  .da-ctas a.btn,
  .da-actions .btn,
  .da-actions a.btn,
  .da-ctas .cbh-btn,
  .da-actions .cbh-btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    white-space: nowrap;
    box-sizing: border-box;
  }
}

/* ---------- Bento gamme ---------- */
.da-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(160px, auto);
  gap: 1rem;
}
.da-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 1.25rem 1.35rem;
  background: var(--cb-paper);
  color: var(--cb-ink);
  text-decoration: none;
  border-radius: var(--cb-r-window);
  transition: background var(--cb-dur) var(--cb-ease-out), transform var(--cb-dur) var(--cb-ease-out);
}
.da-tile:hover {
  background: var(--cb-paper-soft);
  transform: translateY(-2px);
}
.da-tile--xl { grid-column: span 4; grid-row: span 2; min-height: 340px; }
.da-tile--l { grid-column: span 2; grid-row: span 2; }
.da-tile--m { grid-column: span 2; }
.da-tile--w { grid-column: span 3; }
.da-tile--ink {
  background: var(--cb-navy);
  color: #fff;
}
.da-tile--ink:hover { background: var(--cb-foot); }
.da-tile--ink h3,
.da-tile--ink .da-display { color: #fff; }
.da-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.da-tile__body {
  position: relative;
  z-index: 2;
}
.da-tile--photo {
  background: #E8ECF0;
}
.da-tile--photo .da-tile__body,
.da-tile--photo .da-tile__body h3,
.da-tile--photo .da-tile__body p {
  color: #fff !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
/* Voile : photo lisible en haut, texte blanc contrasté en bas */
.da-tile--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 33, 66, 0.12) 0%, rgba(9, 33, 66, 0.34) 42%, rgba(9, 33, 66, 0.82) 100%);
  z-index: 1;
  pointer-events: none;
}
.da-section--ink .da-tile--photo::after {
  background: linear-gradient(180deg, rgba(9, 33, 66, 0.16) 0%, rgba(9, 33, 66, 0.4) 40%, rgba(9, 33, 66, 0.88) 100%);
}
.da-tile h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.5vw, 1.5rem);
}
.da-tile p {
  margin: 0.4rem 0 0;
  font-size: var(--cb-fs-small);
  max-width: 28ch;
  opacity: 0.92;
}
@media (max-width: 768px) {
  .da-bento {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: minmax(140px, auto);
  }
  .da-tile--xl,
  .da-tile--l,
  .da-tile--w { grid-column: span 2; }
  .da-tile--xl { grid-row: span 1; min-height: 220px; }
  .da-tile--l { grid-row: span 1; }
}

/* ---------- Fiche produit showcase ---------- */
.da-showcase {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
.da-showcase__gallery {
  position: sticky;
  top: 6.5rem;
  display: grid;
  gap: 0.75rem;
}
.da-showcase__main {
  overflow: hidden;
  border-radius: var(--cb-r-bubble);
  background: var(--cb-paper-soft);
  border: 1px solid var(--cb-line);
  aspect-ratio: 4 / 3;
}
.da-showcase__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.da-showcase__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (max-width: 560px) {
  .da-showcase__thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.da-showcase__thumbs button,
.da-showcase__thumbs a {
  display: block;
  overflow: hidden;
  border-radius: var(--cb-r-soft);
  border: 1px solid var(--cb-line);
  background: var(--cb-paper);
  padding: 0;
  cursor: pointer;
  aspect-ratio: 1;
}
.da-showcase__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.da-showcase__buy h1 { margin: 0 0 0.75rem; }
.da-showcase__buy .da-lead { margin: 0 0 1.5rem; }
.da-showcase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}
.da-showcase__chips button,
.da-chip {
  min-height: 40px;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--cb-line);
  background: var(--cb-white);
  color: var(--cb-navy);
  font-family: var(--cb-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--cb-r-soft);
  cursor: pointer;
}
.da-chip.is-on,
.da-showcase__chips button[aria-pressed="true"] {
  border-color: var(--cb-navy);
  background: var(--cb-navy);
  color: #fff;
}
.da-showcase__meta {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1.5rem;
  font-size: var(--cb-fs-small);
  color: var(--cb-ink);
}
.da-showcase__meta strong {
  color: var(--cb-navy);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.da-showcase__buy .da-ctas + p,
.da-showcase__buy .da-ctas + .da-note,
.da-showcase__buy .legend,
.da-showcase__buy .da-meta-note {
  color: var(--cb-ink);
  opacity: 0.85;
}
@media (max-width: 900px) {
  .da-showcase { grid-template-columns: 1fr; }
  .da-showcase__gallery { position: relative; top: auto; }
}

/* ---------- Bandes & specs ---------- */
.da-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: var(--cb-space-block);
  border-top: 1px solid var(--cb-line);
}
.da-band:last-child { border-bottom: 1px solid var(--cb-line); }
.da-band h3 { margin: 0 0 0.5rem; }
.da-band p { margin: 0; max-width: 40rem; color: var(--cb-muted); }

.da-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  margin: 0.5rem 0 1.25rem;
}
.da-spec th,
.da-spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 0.75rem;
  border-top: 0;
}
.da-spec tbody tr:nth-child(odd) { background: var(--cb-stripe); }
.da-spec th {
  width: 38%;
  color: var(--cb-navy);
  font-weight: 600;
  padding-right: 1.25rem;
  font-family: var(--cb-font-body);
}
.da-spec td {
  font-variant-numeric: tabular-nums;
  color: var(--cb-ink);
}
.da-spec thead th {
  background: transparent;
  border-bottom: 2px solid var(--cb-navy);
  padding-bottom: 0.75rem;
}

.da-stat {
  display: grid;
  gap: 0.35rem;
}
.da-stat__num {
  font-family: var(--cb-font-display);
  font-weight: 700;
  font-size: var(--cb-fs-stat);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--cb-navy);
  font-variant-numeric: tabular-nums;
}
.da-stat__label {
  font-size: var(--cb-fs-small);
  color: var(--cb-muted);
  max-width: 18ch;
}

.da-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: clamp(1.1rem, 2.5vw, 2rem);
  padding-block: var(--cb-space-block);
}
@media (max-width: 720px) {
  .da-band { grid-template-columns: 1fr; }
  .da-stats { grid-template-columns: 1fr; }
}

.da-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.da-list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.15rem;
  border-top: 1px solid var(--cb-line);
  color: var(--cb-ink);
}
.da-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  width: 0.55rem;
  height: 2px;
  background: var(--cb-rule);
}
.da-list li:last-child { border-bottom: 1px solid var(--cb-line); }

/* Bloc lecture centré (titre + lead + liste sur le même axe) */
.da-read {
  max-width: 42rem;
  margin-inline: auto;
  width: 100%;
}
.da-read > h2 {
  text-align: center;
}
.da-read > .da-rule {
  margin-inline: auto;
}
.da-read .da-lead {
  max-width: none;
  text-align: center;
  margin-inline: auto;
}
.da-read .da-list {
  width: 100%;
  margin-inline: auto;
  text-align: left;
}
.da-read > p:not(.da-lead) {
  text-align: left;
}

/* Trio cartes équilibré (3 × span 2 sur grille 6) */
.da-bento--trio {
  scroll-margin-top: 5.75rem;
}
.da-bento--trio .da-tile--m {
  grid-column: span 2;
  min-height: 220px;
}
.da-section--ink .da-bento,
.da-section--ink .da-tile {
  scroll-margin-top: 5.75rem;
}
.da-section--ink > .da-wrap {
  padding-top: 0.25rem;
}

/* ---------- Sticky peg (scroll storytelling) ---------- */
.da-peg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.da-peg__product {
  position: sticky;
  top: 6.5rem;
}
.da-peg__steps {
  display: grid;
  gap: 0;
}
.da-peg__step {
  min-height: min(48vh, 420px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 1.5rem;
}
.da-peg__step h3 { margin: 0 0 0.55rem; }
.da-peg__step p { margin: 0; color: var(--cb-muted); max-width: 36rem; }
.da-peg__visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--cb-r-bubble);
  border: 1px solid var(--cb-line);
  background: var(--cb-paper-soft);
  aspect-ratio: 4 / 3;
}
.da-peg__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--cb-ease-out);
}
.da-peg__visual img.on { opacity: 1; }
@media (max-width: 860px) {
  .da-peg { grid-template-columns: 1fr; }
  /* Visuel collé : la photo change avec le scrollspy sans allonger la page */
  .da-peg__product {
    position: sticky;
    top: 4.25rem;
    z-index: 2;
    background: var(--cb-paper, #fff);
    padding-bottom: 0.35rem;
  }
  .da-peg__step { min-height: 0; padding-block: 1.1rem 1.6rem; }
}

/* ---------- Apparitions (scroll) — retouches-0411 active via .js-cb-motion ---------- */
.da-rise,
.da-coque.da-rise {
  opacity: 1;
  transform: none;
}
.da-rise.is-in,
.da-coque.da-rise.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .da-rise,
  .da-coque__window img,
  .da-coque.da-rise,
  .da-tile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .da-peg__product,
  .da-showcase__gallery { position: relative; top: auto; }
  .da-peg__step { min-height: 0; }
  .da-peg__visual img { opacity: 1; position: relative; height: auto; }
}

/* ---------- Contact / devis — 4 bis (fond blanc classique) ---------- */
.da-joindre,
.da-4bis {
  font-family: var(--cb-font-body);
  opacity: 1;
  color: var(--cb-ink);
}
.da-4bis.da-rise,
.da-4bis .da-rise {
  opacity: 1;
  transform: none;
}
.da-joindre__title,
.cbs-joindre-title.da-4bis,
.da-4bis .cbs-joindre-title,
.da-4bis h2.cbs-joindre-title {
  color: var(--cb-navy) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.85rem;
  line-height: 1.3;
}
.da-4bis .da-devis-title,
.da-devis-title {
  color: var(--cb-navy) !important;
  font-family: var(--cb-font-display);
  font-weight: 700;
  opacity: 1;
}
.da-4bis .da-devis-intro,
.da-devis-intro {
  color: var(--cb-intro) !important;
  font-size: 1rem;
  line-height: 1.55;
  opacity: 1;
}
.da-joindre__label,
.da-4bis .cbs-joindre-label,
.da-4bis p.cbs-joindre-label {
  color: var(--cb-green) !important;
  font-weight: 600 !important;
  margin: 0 0 0.15rem;
}
.da-joindre__value,
.da-4bis .cbs-joindre a,
.da-4bis .cbs-joindre-val,
.da-4bis .cbs-joindre-val a {
  color: var(--cb-navy) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  opacity: 1;
}
.da-4bis .cbs-joindre-note {
  color: var(--cb-muted) !important;
}
.da-4bis .cbs-joindre {
  color: var(--cb-ink) !important;
}
.da-4bis .cbs-joindre a:hover,
.da-joindre__value:hover,
.da-4bis .cbs-joindre-val a:hover {
  color: var(--cb-green) !important;
}
.da-4bis a.btn-rdv-page,
.da-4bis a.btn-rdv-joindre,
.da-4bis .cbs-joindre-rdv .btn-rdv-joindre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: var(--cb-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
  height: auto !important;
  text-decoration: none !important;
  opacity: 1;
}
.da-4bis a.btn-rdv-page:hover,
.da-4bis a.btn-rdv-joindre:hover,
.da-4bis .cbs-joindre-rdv .btn-rdv-joindre:hover {
  background: var(--cb-green-hover) !important;
  color: #fff !important;
}

/* Variante fond bleu (règle Achille 31/10 19h15) */
.da-4bis.da-4bis--navy,
.da-4bis--navy {
  color: #fff;
}
.da-4bis--navy .da-devis-title,
.da-4bis--navy .da-joindre__title,
.da-4bis--navy .cbs-joindre-title,
.da-4bis--navy .da-joindre__value,
.da-4bis--navy .cbs-joindre a {
  color: #fff;
}
.da-4bis--navy .da-devis-intro { color: rgba(255, 255, 255, 0.78); }
.da-4bis--navy .da-joindre__label,
.da-4bis--navy .cbs-joindre-label { color: var(--cb-rule); }
.da-4bis--navy a.btn-rdv-page,
.da-4bis--navy a.btn-rdv-joindre {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 11px 22px;
}

/* ---------- Photos ---------- */
.da-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cb-r-window);
}
.da-media--bubble { border-radius: var(--cb-r-bubble); }
.da-media--cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.da-media--bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 0;
}
/* ---------- Cadre photo plein cadre (film Surlyn, cb-photos) ---------- */
.da-media-frame {
  position: relative;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
  border-radius: var(--cb-r-window, 28px);
  background: var(--cb-paper-soft, #F1F3F5);
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
}
.da-media-frame .da-media,
.da-media-frame img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
/* stretch + aspect-ratio élargissait la figure hors grille (overflow film) */
.da-diptych .da-media-frame,
.da-diptych--rev .da-media-frame {
  align-self: start;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
}
.da-diptych,
.da-diptych--rev {
  overflow-x: clip;
  min-width: 0;
}
@media (max-width: 860px) {
  .da-media-frame { aspect-ratio: 5 / 4; }
}


/* ---------- Override léger hero legacy quand la DA est branchée ---------- */
.cbh-hero-card {
  border-radius: var(--cb-r-bubble);
}
.cbh-hero-media {
  border-radius: var(--cb-r-window);
}
.cbh-btn {
  font-family: var(--cb-font-body);
}

/* Footer / header : structure intacte — ne pas restyler ici */
footer.cbs-foot {
  /* inchangé */
}

/* Fin da-2026.css */

/* cb-v8 */
.da-h2--eco {
  color: var(--cb-green) !important;
}
.da-center-head {
  text-align: center;
}
.da-center-head > .da-rule,
.da-center-head > hr.da-rule {
  margin-inline: auto;
}
.da-center-head > .da-lead {
  margin-inline: auto;
}
.da-center-head > .da-list,
.da-center-head > .da-list li,
.da-center-head > p:not(.da-lead) {
  text-align: left;
}
/* Grille gamme : 3 tuiles égales sous la rangée XL+L (évite devis seul) */
.da-bento--gamme .da-tile--m {
  grid-column: span 2;
}
/* Titres centrés : Comment nous chiffrons / Ce qui compte / La gamme */
#t-quote,
#t-mat,
#t-gamme,
section[aria-labelledby="t-quote"] > h2,
section[aria-labelledby="t-mat"] > h2,
section[aria-labelledby="t-gamme"] > h2 {
  text-align: center;
}
#t-quote + .da-rule,
#t-mat + .da-rule,
#t-gamme + .da-rule,
#t-quote + hr.da-rule,
#t-mat + hr.da-rule,
#t-gamme + hr.da-rule {
  margin-inline: auto;
}
#t-quote + .da-rule + .da-lead,
#t-gamme + .da-rule + .da-lead,
#t-gamme + .da-rule ~ .da-lead {
  margin-inline: auto;
  text-align: center;
}

/* Fin de page À propos : grille / cartes sobres (cb-layout) */
.da-end {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.da-end__intro {
  text-align: center;
  max-width: 42rem;
  margin-inline: auto;
}
.da-end__intro > .da-rule {
  margin-inline: auto;
}
.da-end__intro .da-lead {
  margin-inline: auto;
  text-align: center;
}
.da-end-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
.da-end-cards li {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--cb-line);
  background: var(--cb-white, #fff);
  color: var(--cb-ink);
}
.da-end-cards li strong {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--cb-navy);
  font-family: var(--cb-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}
.da-end-cards li span,
.da-end-cards li p {
  margin: 0;
  font-size: var(--cb-fs-small);
  line-height: 1.5;
  color: var(--cb-muted);
}
.da-end-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.da-end-note {
  margin: 0.25rem 0 0;
  font-size: var(--cb-fs-body);
  color: var(--cb-muted);
  max-width: none;
}
@media (max-width: 720px) {
  .da-end-cards,
  .da-end-cards--3 {
    grid-template-columns: 1fr;
  }
}

/* Variante pages ap (autres langues) */
.ap-end {
  border-top: 1px solid var(--line, #E2E8F0);
  padding: 40px 0 8px;
}
.ap-end > h2 {
  text-align: center;
  margin-bottom: 1.25rem;
}
.ap-end-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ap-end-cards li {
  border: 1px solid var(--line, #E2E8F0);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 22px;
  min-width: 0;
}
.ap-end-cards li b,
.ap-end-cards li strong {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  color: #003366;
}
.ap-end-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ap-end-lead {
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 1.1rem;
}
.ed-eco-cards {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.ed-eco-cards li {
  border: 1px solid #E2E8F0;
  padding: 16px 18px;
  background: #fff;
  min-width: 0;
}
.ed-eco-cards li strong {
  display: block;
  margin-bottom: 6px;
  color: #1C8048;
  font-size: 15px;
}
.ed-eco-cards li p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #334155;
}
.ed-eco-head {
  text-align: center;
}
.ed-eco-head + p,
.cb-prose > .ed-eco-lead {
  text-align: center;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .ap-end-cards,
  .ap-end-cards--3,
  .ed-eco-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- nuit-cb-p1 : textes longs DE / JA / ZH + anti-débordement ---------- */
html[lang="de"] .da-wrap,
html[lang="de"] .wrap,
html[lang="de"] .cbh-nav a,
html[lang="de"] .cbs-foot,
html[lang="ja"] .da-wrap,
html[lang="ja"] .wrap,
html[lang="zh"] .da-wrap,
html[lang="zh"] .wrap,
html[lang="zh-Hans"] .da-wrap {
  overflow-wrap: anywhere;
  word-break: normal;
}
html[lang="de"] h1,
html[lang="de"] h2,
html[lang="de"] .btn,
html[lang="de"] .cbh-btn,
html[lang="de"] a.btn {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
html[lang="ja"] body,
html[lang="zh"] body,
html[lang="zh-Hans"] body {
  line-break: strict;
  word-break: break-word;
  overflow-wrap: anywhere;
}
html[lang="ja"] .btn,
html[lang="ja"] .cbh-btn,
html[lang="zh"] .btn,
html[lang="zh"] .cbh-btn,
html[lang="zh-Hans"] .btn,
html[lang="zh-Hans"] .cbh-btn {
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.da-wrap,
.da-section,
.da-diptych,
main#contenu {
  max-width: 100%;
  min-width: 0;
}
img, svg, video, canvas {
  max-width: 100%;
}
/* Hero legacy (autres langues) : CTA mobiles empilés */
@media (max-width: 760px) {
  .hero .actions,
  .cb-phero .actions,
  .hero .da-ctas,
  section.hero p:has(> a.btn) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .hero .actions a.btn,
  .cb-phero .actions a.btn,
  section.hero p > a.btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    justify-content: center;
    white-space: nowrap;
  }
}

/* assets/css/retouches-0411.css */
/* retouches-0411 — cb (carte-blister) : rythme, motifs, titres, anim, devis, lang */

:root {
  --cb-night: #071A2E;
  --cb-night-2: #0C2438;
}

/* ——— Titres de section : centrés, sans filet ——— */
.da-section > .da-wrap > h2,
.da-section > .da-wrap > .da-rise > h2,
.da-section .da-center-head > h2,
.da-section .da-read > h2,
#domaines .da-rise > h2,
.da-section--paper > .da-wrap > h2,
.da-section--white > .da-wrap > h2,
.da-section--soft > .da-wrap > h2,
.da-section--ink > .da-wrap > h2,
.da-section .cb-sec-head > h2,
.da-diptych .da-carton > h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.da-section > .da-wrap > .da-lead,
.da-section > .da-wrap > .da-rise > .da-lead,
.da-section .da-center-head > .da-lead,
.da-section .da-read > .da-lead,
#domaines .da-rise > .da-lead,
.da-section--paper > .da-wrap > .da-lead,
.da-section--white > .da-wrap > .da-lead,
.da-section--soft > .da-wrap > .da-lead,
.da-section--ink > .da-wrap > .da-lead,
.da-diptych .da-carton > .da-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.da-rule,
hr.da-rule,
span.da-rule {
  display: none !important;
}

/* ——— Sélecteur langue : vraie pastille ——— */
header.hd.cbh details.lang summary,
header.site details.lang summary,
.hd.cbh .lang summary {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: #fff !important;
  color: #003366 !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 40px;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
}
header.hd.cbh details.lang summary::-webkit-details-marker,
.hd.cbh .lang summary::-webkit-details-marker { display: none; }
header.hd.cbh details.lang summary .cb-globe,
.hd.cbh .lang summary .cb-globe { display: none !important; }
/* 1011 : globe en SVG (remplace l’emoji), 18 × 18, bleu marine, centré avec le code langue */
header.hd.cbh details.lang summary > svg,
header.site details.lang summary > svg,
.hd.cbh .lang summary > svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  color: #003366;
}
@media (max-width: 480px) {
  header.hd.cbh .lang summary,
  .hd.cbh .lang summary {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    min-height: 34px;
  }
}

/* ——— Fonds de section unis (1011 : grille et rayures retirées) ——— */
.da-section--paper,
.da-section--soft {
  background-color: #F7F8F9;
  background-image: none;
}

.da-section--white {
  background-color: #FFFFFF;
  background-image: none;
}

/* Fond bleu nuit uni */
.da-section--ink,
.da-section--night {
  background-color: var(--cb-night) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.92);
  position: relative;
}
.da-section--ink h2,
.da-section--ink h3,
.da-section--night h2,
.da-section--night h3 { color: #fff; }
.da-section--ink .da-lead,
.da-section--ink p,
.da-section--night .da-lead,
.da-section--night p { color: rgba(255, 255, 255, 0.72); }

/* Touches couleur charte sur tuiles / cartes */
.da-tile:not(.da-tile--photo):not(.da-tile--ink) {
  border-top: 3px solid #5BC889;
}
.da-tile--ink {
  background: var(--cb-night) !important;
}
.da-band {
  border-left: 3px solid #5BC889;
  padding-left: 1.1rem;
}
.da-stat__num { color: #5BC889; }
.da-section--ink .da-stat__num { color: #5BC889; }

/* ——— Animations sobres (réactive da-rise) — affichage-B 0411 ——— */
.js-cb-motion .da-rise,
.js-cb-motion .cb-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.38s ease, transform 0.38s ease;
  transition-delay: 0s;
}
.js-cb-motion .da-rise.is-in,
.js-cb-motion .cb-rv.is-in {
  opacity: 1;
  transform: none;
}
.da-tile,
.cb-step-card,
.da-band {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.da-tile:hover,
.cb-step-card:hover {
  transform: translateY(-3px);
}
.da-tile--photo:hover { box-shadow: 0 12px 28px rgba(0, 26, 51, 0.12); }

/* anti débordement 100vw / mobile */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .js-cb-motion .da-rise,
  .js-cb-motion .cb-rv,
  .js-cb-motion .da-rise.is-in,
  .js-cb-motion .cb-rv.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .da-tile,
  .cb-step-card,
  .da-band { transition: none !important; }
  .da-tile:hover,
  .cb-step-card:hover { transform: none !important; }
}

/* ——— Conditionnement : grille 1 photo / étape ——— */
.cb-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}
.cb-steps-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .cb-steps-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .cb-steps-grid,
  .cb-steps-grid--5 { grid-template-columns: 1fr; }
}
.cb-step-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cb-step-card__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F4F6F8;
}
.cb-step-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cb-step-card__body {
  padding: 1rem 1.05rem 1.2rem;
  flex: 1;
}
.cb-step-card__num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #1C8048;
  margin: 0 0 0.35rem;
}
.cb-step-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  color: #003366;
}
.cb-step-card p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: #5A6B7D;
}

/* ——— Film : grille thermoformage symétrique ——— */
.cb-mat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.75rem;
}
@media (max-width: 640px) {
  .cb-mat-grid { grid-template-columns: 1fr; }
}
.cb-mat-grid .da-tile {
  grid-column: auto !important;
  grid-row: auto !important;
  min-height: 0;
}
.cb-mat-grid .da-tile__body {
  padding: 1.25rem 1.35rem;
}
.cb-sec-head {
  text-align: center;
  max-width: 46rem;
  margin-inline: auto;
}
.cb-sec-head .da-lead {
  margin-top: 0.85rem;
}

/* ——— Devis : compact, sans sur-titre / filet ——— */
.page-devis .cbs-p5-eyebrow,
.page-devis .v8-eyebrow,
body:has(#ma-demande) .cbs-p5-eyebrow,
.devis-page .cbs-p5-eyebrow {
  display: none !important;
}
.cbs-p5-h2::after,
.cbs-p5-panel h2.cbs-p5-h2::after,
.cbs-p5-panel h1.cbs-p5-h2::after,
.da-devis-title::after {
  content: none !important;
  display: none !important;
}
.cbs-p5-h2,
.cbs-p5-panel h1.cbs-p5-h2,
.da-devis-title {
  margin-top: 0 !important;
}
.cb-devis-intro {
  display: block !important;
  margin: 0.65rem 0 1.1rem !important;
  max-width: 42ch;
  font-size: 15px;
  line-height: 1.55;
  color: #5A6B7D;
}
section.da-section:has(#ma-demande),
section.da-section:has(.cbs-p5-form) {
  padding-top: clamp(1.1rem, 2.5vw, 1.75rem) !important;
}
.cbs-p5-form textarea#f-message,
form.devis textarea#f-message,
form.cbs-p5-form textarea,
.cbs-p5-panel textarea#f-message,
.cb-bc-panel textarea#f-message,
.page-devis textarea#f-message {
  min-height: 64px !important;
  height: 64px !important;
  max-height: 96px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  resize: vertical;
}
.cb-devis-intro.cbs-p5-intro,
p.cb-devis-intro {
  display: block !important;
}
.cbs-p5-panel.cb-bc-panel,
.cb-contact-grid.cbs-p5-panel {
  gap: 1.5rem !important;
  padding: 1.25rem 1.35rem !important;
}
.cbs-p5-form .cbs-p5-field,
.cbs-p5-form .v8-field {
  margin-bottom: 0.55rem;
}
.cbs-p5-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.cbs-p5-form select {
  min-height: 42px !important;
  padding: 9px 12px !important;
}
.cbs-p5-joindre {
  margin-top: 1.1rem !important;
}

/* Accent vert léger sur sections colorées type emballage-alimentaire */
.da-section--accent {
  background-color: #003366;
  background-image: none;
  color: rgba(255,255,255,0.92);
}
.da-section--accent h2,
.da-section--accent h3 { color: #fff; }
.da-section--accent .da-lead,
.da-section--accent p { color: rgba(255,255,255,0.72); }

/* affichage-B 0411 */
@media (scripting: none) {
  .da-rise, .cb-rv, .da-coque.da-rise, .rv5, .isdc .isdc-rv {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .da-rise, .cb-rv, .da-coque.da-rise, .rv5, .isdc .isdc-rv,
  .js-cb-motion .da-rise, .js-cb-motion .cb-rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   Mission 1011 (10/11) — en-tête un peu plus haut, logo +13 %
   Les boutons « Prendre un rendez-vous » / « Demande de devis » ne changent pas.
   ============================================================================= */

/* En-tête pilule (pages FR et pages cbh des langues) : 50 px -> 59 px */
header.hd.cbh .cbh-in {
  padding-top: 8px;
  padding-bottom: 8px;
}
header.hd.cbh .cb-logo .wm { font-size: 21.5px; }
header.hd.cbh .cb-logo .cb-dom { font-size: 13.5px; }
@media (max-width: 480px) {
  header.hd.cbh .cb-logo .wm { font-size: 16px; }
  header.hd.cbh .cb-logo .cb-dom { font-size: 12.5px; }
}
/* 721 à 800 px : les deux boutons, la langue et le hamburger sont déjà au plus juste ;
   le logo garde sa taille d’origine pour que le menu reste dans la pilule */
@media (min-width: 721px) and (max-width: 800px) {
  header.hd.cbh .cb-logo .wm { font-size: 19px; }
  header.hd.cbh .cb-logo .cb-dom { font-size: 12px; }
  header.hd.cbh details.lang summary { padding: 8px 12.5px !important; }
}

/* En-tête pilule des pages de langue (ancien gabarit) : 72 px -> 82 px */
header.site > .wrap { min-height: 82px; }
/* La pilule s’élargit si le menu, les deux boutons et la langue ne tiennent pas dans 1112 px
   (DE, ES, IT, PT débordaient déjà) : plus rien ne sort de la pilule. */
@media (min-width: 1061px) {
  header.site > .wrap {
    width: max-content;
    min-width: min(1112px, calc(100% - 2 * var(--gut, 32px)));
    max-width: calc(100% - 2 * var(--gut, 32px));
  }
}
/* Logo +13 % (22 -> 25 px). Entre 1061 et 1279 px le menu complet est déjà au plus juste
   (DE, ES, IT, PT) : le logo y garde sa taille d’origine pour ne rien pousser hors de la pilule. */
@media (min-width: 1061px) and (max-width: 1279px) {
  /* compense les 2 px du nouveau pictogramme (18 px, écart 7 px) */
  header.site details.lang summary { padding: 8px 12.5px !important; }
}
@media (min-width: 1280px), (max-width: 1060px) {
  header.site .brand .wm { font-size: 25px; }
  header.site .brand .dom { font-size: 14.5px !important; }
}
@media (max-width: 560px) {
  header.site .brand .wm { font-size: 18px; }
  header.site .brand .dom { font-size: 13.5px !important; }
}
/* très petits écrans (moins de 360 px) : taille d’origine, sinon la langue sort de la pilule */
@media (max-width: 359px) {
  header.site .brand .wm { font-size: 16px; }
  header.site .brand .dom { font-size: 13px !important; }
  header.site details.lang summary { padding: 8px 12.5px !important; }
}

/* =============================================================================
   Mission 1011 (10/11) — hero des pages intérieures : photo pleine largeur
   Bord à bord sous l’en-tête, sans carte arrondie, bande, marge, bordure ni ombre.
   Le texte reste calé sur la grille du contenu. L’accueil n’est pas concerné
   (.da-hero sans .da-wrap, .hero5).
   ============================================================================= */
:root {
  /* voile existant ; le 2e palier suit la fin de la colonne de texte (grand écran et tablette) */
  --cb-hero-veil: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.96) 0%,
    rgba(255, 255, 255, 0.82) max(36%, calc(50% - 188px), 30rem),
    rgba(255, 255, 255, 0.18) max(68%, 38rem),
    rgba(255, 255, 255, 0) 100%
  );
  --cb-hero-min: min(82vh, 680px);
  --cb-hero-text: 27rem;
}

/* ——— 1. Gabarit .da-hero (FR + conditionnement toutes langues) ——— */
main > section.da-hero.da-wrap {
  width: 100%;
  max-width: none;
  margin: 0;
  /* 20 px blancs : la pilule de l’en-tête dépasse de 8 px, il reste 12 px avant la photo */
  padding: 20px 0 0;
  background: #FFFFFF;
}
main > section.da-hero.da-wrap > .da-hero__stage {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
main > section.da-hero.da-wrap .da-hero__copy {
  width: min(var(--cb-wrap, 1240px), calc(100% - 2 * var(--cb-gutter, 1.25rem)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
main > section.da-hero.da-wrap .da-hero__copy > * {
  max-width: var(--cb-hero-text);
}
@media (min-width: 721px) {
  main > section.da-hero.da-wrap .da-hero__veil {
    background: var(--cb-hero-veil);
  }
}
@media (max-width: 720px) {
  main > section.da-hero.da-wrap .da-hero__copy {
    padding-bottom: 2rem;
  }
  main > section.da-hero.da-wrap .da-hero__copy > * {
    max-width: none;
  }
}

/* ——— 2. Carte skinpack FR : même hero que les autres pages (photo en fond) ——— */
main > section.da-hero.da-hero--skinpack.da-wrap > .da-hero__stage {
  display: block;
  min-height: var(--cb-hero-min);
  padding: 0;
  background: var(--cb-paper-soft, #F2F4F6);
  overflow: hidden;
}
/* Le fichier photo a une marge blanche d’environ 4 % sur ses quatre bords :
   on cadre 10 % plus large (recadrage CSS, fichier inchangé) pour aller bord à bord. */
main > section.da-hero.da-hero--skinpack.da-wrap > .da-hero__stage > img {
  position: absolute !important;
  inset: -5% !important;
  width: 110%;
  max-width: none;
  height: 110% !important;
  max-height: none;
  object-fit: cover !important;
  object-position: center;
  background: none;
}
main > section.da-hero.da-hero--skinpack.da-wrap .da-hero__veil {
  display: block !important;
}
main > section.da-hero.da-hero--skinpack.da-wrap .da-hero__copy {
  padding-block: clamp(2rem, 6vw, 4.75rem);
}
@media (max-width: 720px) {
  main > section.da-hero.da-hero--skinpack.da-wrap > .da-hero__stage {
    min-height: 0;
    padding: 0;
  }
  main > section.da-hero.da-hero--skinpack.da-wrap > .da-hero__stage > img {
    position: relative !important;
    inset: auto !important;
    margin: -4% 0 0 -5%;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
  }
  main > section.da-hero.da-hero--skinpack.da-wrap .da-hero__copy {
    margin-top: -3.5rem !important;
    padding-block: 1.35rem 2rem;
  }
}

/* ——— 3. Pages de langue, hero avec photo (.hero.cb-phero sans .noimg) ———
   La photo de la colonne de droite devient le fond pleine largeur de la section.
   Les heros sans photo (.noimg) et l’accueil (.hero5) ne changent pas. */
main > section.hero.cb-phero:not(.noimg) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: #F2F4F6;
}
main > section.hero.cb-phero:not(.noimg)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cb-hero-veil);
  pointer-events: none;
}
main > section.hero.cb-phero:not(.noimg) > .wrap {
  position: static;
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
  width: auto;
  max-width: var(--max, 1320px);
  min-height: var(--cb-hero-min);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.75rem) var(--gut, 24px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
main > section.hero.cb-phero:not(.noimg) > .wrap > div:first-child {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--cb-hero-text);
}
main > section.hero.cb-phero:not(.noimg) .cb-heroimg,
main > section.hero.cb-phero:not(.noimg) .cb-heroimg figure {
  position: static;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
main > section.hero.cb-phero:not(.noimg) .cb-heroimg img {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0 !important;
}
@media (max-width: 720px) {
  main > section.hero.cb-phero:not(.noimg) {
    background: #FFFFFF;
  }
  main > section.hero.cb-phero:not(.noimg)::before {
    content: none;
  }
  main > section.hero.cb-phero:not(.noimg) > .wrap {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding: 0;
  }
  main > section.hero.cb-phero:not(.noimg) .cb-heroimg {
    order: -1;
  }
  main > section.hero.cb-phero:not(.noimg) .cb-heroimg img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  main > section.hero.cb-phero:not(.noimg) > .wrap > div:first-child {
    box-sizing: border-box;
    max-width: none;
    padding: 1.35rem var(--gut, 18px) 2rem;
  }
}
@media (max-width: 560px) {
  main > section.hero.cb-phero:not(.noimg) > .wrap > div:first-child {
    padding-inline: 18px;
  }
}

/* ——— 4 et 5. Carte skinpack et À propos des pages de langue ———
   Même rendu que les pages françaises : photo en fond, bord à bord, texte sur la grille. */
:root { --cb-fiche-w: min(1200px, calc(100% - 40px)); }
@media (min-width: 768px) { :root { --cb-fiche-w: min(1200px, calc(100% - 64px)); } }
@media (min-width: 1280px) { :root { --cb-fiche-w: min(1200px, calc(100% - 128px)); } }
@media (min-width: 1440px) { :root { --cb-fiche-w: min(1200px, calc(100% - 160px)); } }

/* 4. Carte skinpack (main.sk-fiche) */
main.sk-fiche > section.hero {
  padding: 20px 0 0;
  border: 0;
  background: #FFFFFF;
}
main.sk-fiche > section.hero > .wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
  min-height: var(--cb-hero-min);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #F2F4F6;
}
main.sk-fiche > section.hero > .wrap::before,
main.ap > .ap-wrap > section.ap-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--cb-hero-veil);
  pointer-events: none;
}
main.sk-fiche > section.hero > .wrap > .hero-panel.short {
  display: block;
  position: static;
  width: var(--cb-fiche-w);
  margin-inline: auto;
  padding-block: clamp(2rem, 6vw, 4.75rem);
}
main.sk-fiche > section.hero > .wrap > .hero-panel.short > div {
  position: relative;
  z-index: 2;
  max-width: var(--cb-hero-text);
}
main.sk-fiche > section.hero > .wrap .sk-herofig,
main.sk-fiche > section.hero > .wrap .sk-herofig > .stage {
  position: static;
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: none;
}
/* le fichier a environ 4 % de marge blanche : cadrage à 110 %, image inchangée */
main.sk-fiche > section.hero > .wrap .sk-herofig > .stage > .cb-shot {
  position: absolute;
  inset: -5%;
  z-index: 0;
  width: 110%;
  max-width: none;
  height: 110%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 0 !important;
  background: none;
}
/* la légende reste dans la page pour les lecteurs d’écran, comme sur la page française */
main.sk-fiche > section.hero > .wrap .sk-herofig > figcaption,
main.ap > .ap-wrap > section.ap-hero figure > figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 767px) {
  main.sk-fiche > section.hero > .wrap {
    display: block;
    min-height: 0;
    background: #FFFFFF;
  }
  main.sk-fiche > section.hero > .wrap::before,
  main.ap > .ap-wrap > section.ap-hero::before {
    content: none;
  }
  main.sk-fiche > section.hero > .wrap > .hero-panel.short {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding-block: 0;
  }
  main.sk-fiche > section.hero > .wrap .sk-herofig {
    order: -1;
    overflow: hidden;
  }
  main.sk-fiche > section.hero > .wrap .sk-herofig > .stage > .cb-shot {
    position: relative;
    inset: auto;
    display: block;
    margin: -4% 0 -4% -5%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  main.sk-fiche > section.hero > .wrap > .hero-panel.short > div {
    box-sizing: border-box;
    width: var(--cb-fiche-w);
    max-width: none;
    margin-inline: auto;
    padding-block: 1.35rem 2rem;
  }
}

/* 5. À propos (main.ap) : le conteneur passe en pleine largeur, chaque bloc reprend la grille */
main.ap {
  padding-top: 0;
}
main.ap > .ap-wrap {
  width: 100%;
  max-width: none;
}
main.ap > .ap-wrap > :not(.ap-hero),
main.ap > .ap-wrap > section.ap-hero > .ap-crumb,
main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid {
  width: var(--cb-fiche-w);
  margin-inline: auto;
}
main.ap > .ap-wrap > section.ap-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--cb-hero-min) + 20px);
  padding: clamp(2rem, 6vw, 4.75rem) 0;
  /* 20 px blancs sous l’en-tête, comme sur les pages françaises */
  border-top: 20px solid #FFFFFF;
  background: #F2F4F6;
}
main.ap > .ap-wrap > section.ap-hero > .ap-crumb,
main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid > div {
  position: relative;
  z-index: 2;
}
main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid {
  display: block;
  position: static;
}
main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid > div {
  max-width: var(--cb-hero-text);
}
main.ap > .ap-wrap > section.ap-hero figure {
  position: static;
  margin: 0;
  border: 0;
}
main.ap > .ap-wrap > section.ap-hero figure > img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  border-radius: 0 !important;
  background: none;
}
@media (max-width: 767px) {
  main.ap > .ap-wrap > section.ap-hero {
    min-height: 0;
    padding: 0 0 2rem;
    background: #FFFFFF;
  }
  main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid {
    display: contents;
  }
  main.ap > .ap-wrap > section.ap-hero figure {
    order: -1;
    margin-bottom: 1.35rem;
  }
  main.ap > .ap-wrap > section.ap-hero figure > img {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  main.ap > .ap-wrap > section.ap-hero > .ap-hero-grid > div {
    box-sizing: border-box;
    width: var(--cb-fiche-w);
    max-width: none;
    margin-inline: auto;
  }
}

/* =============================================================================
   Mission 3 (10/11) — fond de page blanc
   canonical-audit-2051.css, chargée après cette feuille, pose
   main{background:#f4f4f4!important} : la spécificité (html body main) l’emporte.
   html et body : #F7F7F7 de l’ancien gabarit des langues (css/style.css, var(--bg)).
   Les sections en alternance et les sections bleues gardent leur propre fond.
   ============================================================================= */
html,
html body,
html body main {
  background-color: #FFFFFF !important;
}

/* =============================================================================
   Missions 5 et 6 (10/11) — section sous le hero, page nos-produits (10 langues)
   La classe .cb-sous-hero n’est posée que sur cette section de ces 10 pages.
   Mission 6 : le titre est centré sur toute la largeur de la section ; dessous,
   le texte est à gauche, aligné à gauche, et la photo à droite (français). Les
   langues n’ont pas de photo dans cette section : titre centré, texte aligné à
   gauche dans une colonne de lecture centrée dans la page.
   Les mots, la photo et les fonds (#F7F8F9 en français, #F7F7F7 dans les langues)
   ne changent pas. Le hero n’est pas concerné.
   ============================================================================= */

/* a. espace au-dessus : +40 px (ordinateur), +32 px (mobile, plus bas) */
.cb-sous-hero.da-section {
  padding-top: calc(var(--cb-space-section, 2.5rem) + 40px);
}
.cb-sous-hero.cb-tight {
  padding-top: 96px; /* 56 + 40 */
}

/* ——— FR (gabarit da) : titre en haut, puis texte à gauche et photo à droite ——— */
/* .da-carton s’efface (display: contents) : le h2, le chapô, les h3 et les
   paragraphes deviennent des cases de la grille .da-diptych. Le HTML ne bouge pas.
   Base (mobile et tablette) : une colonne, le texte d’abord, la photo ensuite. */
.cb-sous-hero .da-carton {
  display: contents;
}
.cb-sous-hero > .da-diptych {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0; /* les écarts sont portés par les marges des blocs */
  align-items: start;
}
.cb-sous-hero .da-carton > *,
.cb-sous-hero .da-coque {
  grid-column: 1;
  justify-self: center; /* empilé : colonne de lecture de 680 px, centrée dans la page */
  width: 100%;
  max-width: 42.5rem;
}
.cb-sous-hero .da-carton > h2 {
  grid-column: 1 / -1; /* toute la largeur de la section */
  max-width: none;
  margin-bottom: 32px;
  text-align: center;
  color: #003366;
}
.cb-sous-hero .da-carton > .da-lead {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  text-align: left;
  color: #0F1F33;
  text-wrap: pretty;
}
.cb-sous-hero .da-carton > h3 {
  margin: 32px 0 8px;
  font-size: 1.25rem;
  line-height: 1.3;
  text-align: left;
  color: #003366;
}
.cb-sous-hero .da-carton > .da-lead + h3 {
  margin-top: 36px;
}
.cb-sous-hero .da-carton > p:not(.da-lead) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  text-align: left;
  color: #3E4C5C; /* gris plus foncé qu’en v2 (#5A6B7D) : 8,4:1 sur #F7F8F9 */
  text-wrap: pretty;
}
.cb-sous-hero .da-coque {
  margin-top: 36px;
}

/* ——— Langues (gabarit ed) : pas de photo ici. Titre centré, texte à gauche ——— */
.cb-sous-hero .cb-prose {
  max-width: none; /* le titre dispose de toute la largeur de la section */
}
.cb-sous-hero .cb-intro {
  max-width: none !important; /* css/style.css impose 40ch !important */
}
.cb-sous-hero .cb-intro > br {
  display: none; /* les deux phrases sont déjà deux blocs */
}
.cb-sous-hero .cb-sh-titre,
.cb-sous-hero .cb-sh-texte {
  display: block;
}
.cb-sous-hero .cb-sh-titre {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem); /* 22 à 28 px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  color: #003366;
  text-wrap: balance;
}
.cb-sous-hero .cb-sh-texte {
  width: fit-content; /* un texte d’une seule ligne reste centré dans la page */
  max-width: min(100%, 42.5rem); /* colonne de lecture : 680 px */
  margin: 20px auto 0;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  color: #0F1F33;
  text-wrap: pretty;
}
.cb-sous-hero .cb-intro strong {
  color: inherit;
}
.cb-sous-hero .cb-sh-titre strong {
  font-weight: inherit;
}
/* japonais : le retour à la ligne se fait entre deux groupes de mots, pas au milieu */
.cb-sous-hero:lang(ja) .cb-sh-titre,
.cb-sous-hero:lang(ja) .cb-sh-texte {
  word-break: auto-phrase;
}

/* ——— Au-dessus de 720 px : tailles de lecture de la v2 ——— */
@media (min-width: 721px) {
  .cb-sous-hero .da-carton > .da-lead {
    font-size: 1.25rem;
  }
  .cb-sous-hero .da-carton > h3 {
    font-size: 1.375rem;
  }
  .cb-sous-hero .da-carton > .da-lead + h3 {
    margin-top: 40px;
  }
  .cb-sous-hero .da-carton > p:not(.da-lead) {
    font-size: 1.0625rem;
  }
  .cb-sous-hero .cb-sh-texte {
    font-size: 1.1875rem; /* 19 px */
  }
}

/* ——— Au-dessus de 860 px : deux colonnes égales sous le titre ——— */
@media (min-width: 861px) {
  .cb-sous-hero > .da-diptych {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* titre, chapô, h3, p, h3, p, puis une rangée souple : si la photo est plus
       haute que le texte, c’est elle qui absorbe l’écart, pas les paragraphes */
    grid-template-rows: repeat(6, auto) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .cb-sous-hero .da-carton > *,
  .cb-sous-hero .da-coque {
    justify-self: stretch;
    max-width: none;
  }
  .cb-sous-hero .da-carton > h2 {
    margin-bottom: 48px;
  }
  .cb-sous-hero .da-coque {
    grid-column: 2;
    grid-row: 2 / -1;
    align-self: center; /* centrée en hauteur sur la colonne de texte */
    margin-top: 0;
  }
}

/* ——— Mobile : +32 px au-dessus de la section ——— */
@media (max-width: 720px) {
  .cb-sous-hero.da-section {
    padding-top: calc(var(--cb-space-section, 2rem) + 32px);
  }
  .cb-sous-hero.cb-tight {
    padding-top: 88px; /* 56 + 32 */
  }
}

/* assets/css/bleu-2126.css */
/* =============================================================================
   Bandes bleu nuit éditoriales — mission retouches 21h26 (point 3)
   Syne en titre (déjà chargé par da-2026.css). Fond #092142.
   N’altère ni photos ni bloc contact.
   ============================================================================= */

.b2126 {
  --b2126-bg: #092142;
  --b2126-navy: #003366;
  --b2126-rule: #5BC889;
  --b2126-ink: rgba(255, 255, 255, 0.92);
  --b2126-muted: rgba(255, 255, 255, 0.68);
  background: var(--b2126-bg);
  color: var(--b2126-ink);
  padding: clamp(3.25rem, 7vw, 5.25rem) 0;
}

.b2126__wrap {
  width: min(1120px, calc(100% - 2 * clamp(1rem, 4vw, 1.75rem)));
  margin-inline: auto;
}

.b2126__rule {
  display: block;
  width: 2.75rem;
  height: 2px;
  margin: 0 0 1.35rem;
  border: 0;
  background: var(--b2126-rule);
}

.b2126__title {
  margin: 0;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 4.6vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 18ch;
}

.b2126__lead {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  line-height: 1.55;
  color: var(--b2126-muted);
}

.b2126__fig {
  margin: 0;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.b2126__fig-unit {
  display: block;
  margin-top: 0.85rem;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  letter-spacing: -0.02em;
  color: #fff;
}

.b2126__fig-note {
  margin: 0.65rem 0 0;
  max-width: 22ch;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--b2126-muted);
}

/* --- Citation éditoriale --- */
.b2126--quote .b2126__wrap {
  max-width: 46rem;
}

.b2126__quote {
  margin: 0;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.65rem, 3.8vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  color: #fff;
}

.b2126__quote-mark {
  display: block;
  margin-bottom: 0.85rem;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1;
  color: var(--b2126-rule);
}

.b2126__cite {
  display: block;
  margin-top: 1.35rem;
  font-size: 0.9375rem;
  color: var(--b2126-muted);
}

/* --- Split titre + chiffre --- */
.b2126--split .b2126__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
}

.b2126--split .b2126__aside {
  text-align: right;
}

@media (max-width: 760px) {
  .b2126--split .b2126__wrap {
    grid-template-columns: 1fr;
  }
  .b2126--split .b2126__aside {
    text-align: left;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* --- Variante marine plus claire (rythme) --- */
.b2126--navy {
  background: var(--b2126-navy);
}

/* Liens / CTA sur bande */
.b2126 a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.b2126 a:hover {
  color: var(--b2126-rule);
}

.b2126 .btn-green {
  text-decoration: none;
}

/* assets/css/contact-2126.css */
/* contact-2126 — bloc « Nous joindre » / devis (cb-fix2 02/11)
   Carte ~1100–1200 px, formulaire confortable sur pages devis,
   compact seulement sur accueil / contact / embeds.
   RDV gauche compact (≈10×18, 14–15 px). */

:root {
  --c2126-navy: #003366;
  --c2126-green: #1C8048;
  --c2126-green-hover: #166A3B;
  --c2126-rule: #5BC889;
  --c2126-ink: #0F1F33;
  --c2126-intro: #6B7280;
  --c2126-muted: #5A6B7D;
  --c2126-line: #E2E8F0;
  --c2126-paper: #F5F7FA;
}

/* ---------- Section fond papier autour de la carte ---------- */
#contact.da-section,
section.da-section:has(.cb-bc-panel),
section.da-section:has(.cb-contact-grid.cb-bc-panel),
.cb-cpanel {
  background: var(--c2126-paper) !important;
  padding-block: clamp(2rem, 4vw, 3.25rem) !important;
}

/* ---------- Carte blanche 2 colonnes (split) — proportions normales ---------- */
.cb-bc-panel,
.da-home-contact.da-4bis,
.cb-contact-grid.da-4bis,
.cb-contact-grid.cb-bc-panel,
.da-wrap > .cb-contact-grid {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.4fr) !important;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  align-items: start !important;
  background: #fff;
  border: 1px solid var(--c2126-line);
  padding: clamp(1.5rem, 2.8vw, 2.35rem) clamp(1.35rem, 2.8vw, 2.35rem) !important;
  border-radius: 0;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  min-width: 0;
}

.cb-bc-panel > *,
.da-home-contact > *,
.cb-contact-grid > * {
  min-width: 0;
  max-width: 100%;
}

.cb-contact-aside,
.da-home-contact > .da-joindre,
.cb-bc-aside {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* ---------- Titre + intro (colonne gauche) — bien séparés de « Nous joindre » ---------- */
.da-devis-title,
.cb-bc-title,
.cb-contact-aside .da-devis-title,
h1.da-devis-title {
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2rem) !important; /* ~26–32 */
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
  color: var(--c2126-navy) !important;
  margin: 0 0 0.75rem !important;
  opacity: 1 !important;
}
.da-devis-title::after,
.cb-bc-title::after { content: none !important; display: none !important; }

.da-devis-intro,
.cb-bc-intro,
.cb-contact-aside .da-devis-intro {
  font-size: 1rem !important; /* 16 px */
  line-height: 1.55 !important;
  color: var(--c2126-intro) !important;
  margin: 0 0 1.85rem !important; /* air avant « Nous joindre » */
  max-width: 38ch;
  opacity: 1 !important;
}

/* ---------- « Nous joindre : » — textes un cran plus grands ---------- */
.da-joindre__title,
.cbs-joindre-title,
.da-joindre p.da-joindre__title,
.cb-bc-joindre,
.cbs-joindre h2.cbs-joindre-title {
  color: var(--c2126-navy) !important;
  font-size: 1.375rem !important; /* 22 px */
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.3 !important;
  margin: 0 0 1rem !important;
}
.da-joindre__title::after,
.cbs-joindre-title::after,
.cb-bc-joindre::after {
  content: none !important;
  display: none !important;
}

.da-joindre__label,
.cbs-joindre-label,
.cbs-bc-coords dt,
.da-joindre p.da-joindre__label {
  color: var(--c2126-green) !important;
  font-size: 0.9375rem !important; /* 15 px */
  font-weight: 700 !important;
  margin: 1rem 0 0.25rem !important;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.da-joindre__label:first-of-type,
.cbs-joindre-item:first-child .cbs-joindre-label,
.cbs-joindre > .cbs-joindre-label:first-of-type {
  margin-top: 0 !important;
}

.cbs-joindre-item { margin: 0 0 0.35rem !important; }

.da-joindre__value,
.cbs-joindre a,
.cbs-joindre-val,
.cbs-joindre-val a,
.da-joindre > p:not(.da-joindre__title):not(.da-joindre__label):not(:has(.btn-rdv-joindre)):not(:has(.btn-rdv-page)) {
  color: var(--c2126-navy) !important;
  font-size: 1rem !important; /* 16 px */
  line-height: 1.55 !important;
  margin: 0 !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  opacity: 1 !important;
}
.da-joindre__value,
.cbs-joindre a,
.cbs-joindre-val a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.da-joindre a.da-joindre__value:hover,
.cbs-joindre a:hover,
.cbs-joindre-val a:hover {
  color: var(--c2126-green) !important;
}

.cbs-joindre-note,
.da-joindre span[style*="muted"],
.da-joindre span[style*="cb-muted"] {
  color: var(--c2126-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 400;
}

/* Espacement RDV — bien décollé de l’adresse (hors panneau p5) */
.cbs-joindre-rdv,
.da-joindre > p:has(.btn-rdv-joindre),
.da-joindre > p:has(a.btn-rdv-joindre),
.cb-contact-aside .rdv-cta,
.cb-bc-aside .rdv-cta,
aside.cbs-joindre .cbs-joindre-rdv,
.cbs-joindre > p.cbs-joindre-rdv {
  margin-top: 2.15rem !important;
  margin-bottom: 0 !important;
  padding-top: 0.15rem;
}
/* p5 : écart 24px (contrôle 20–32) */
.cbs-p5-panel .cbs-joindre-rdv,
.cbs-p5-aside .cbs-joindre-rdv {
  margin-top: 24px !important;
  padding-top: 0 !important;
}

/* ---------- Bouton RDV — compact (pas le CTA 48 px) ---------- */
.da-4bis a.btn-rdv-joindre,
.da-4bis a.btn-rdv-page,
.da-4bis .cbs-joindre-rdv .btn-rdv-joindre,
.da-4bis .cbs-joindre-rdv .btn-rdv-page,
.da-joindre a.btn-rdv-joindre,
.da-joindre a.btn-rdv-page,
.cb-contact-aside a.btn-rdv-joindre,
.cb-contact-aside a.btn-rdv-page,
.cbs-joindre a.btn-rdv-joindre,
.cbs-joindre a.btn-rdv-page,
.cbs-joindre-rdv .btn-rdv-joindre,
.cbs-joindre-rdv .btn-rdv-page,
a.btn-rdv-joindre,
a.btn-rdv-page,
a.btn.btn-rdv-joindre,
a.btn.btn-green.btn-rdv-joindre {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100%;
  background: var(--c2126-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  padding: 10px 18px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
  height: auto !important;
  text-decoration: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
  white-space: nowrap;
  box-sizing: border-box;
}
.da-4bis a.btn-rdv-joindre:hover,
.da-joindre a.btn-rdv-joindre:hover,
.cb-contact-aside a.btn-rdv-joindre:hover,
.cbs-joindre-rdv .btn-rdv-joindre:hover,
a.btn-rdv-joindre:hover,
a.btn-rdv-page:hover {
  background: var(--c2126-green-hover) !important;
  color: #fff !important;
}

/* =========================================================
   Formulaire CONFORTABLE — pages devis (remplit sa colonne)
   ========================================================= */
.cb-bc-panel .fgrid,
.cb-contact-grid .fgrid,
form.devis .fgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px !important;
}
.cb-bc-panel .f,
.cb-contact-grid .f,
form.devis .f {
  display: flex;
  flex-direction: column;
  gap: 5px !important;
  min-width: 0;
}
.cb-bc-panel .f.full,
.cb-contact-grid .f.full,
form.devis .f.full { grid-column: 1 / -1; }

/* Remplit la colonne (plus de plafond 34 rem) */
/* Devis pages : formulaire remplit sa colonne */
.cb-bc-panel form.devis[data-kind="Devis"],
.cb-contact-grid form.devis[data-kind="Devis"],
section.cb-cpanel form.devis[data-kind="Devis"] {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
/* Accueil : même data-kind Devis mais compact (colonne étroite) */
.da-home-contact form.devis[data-kind="Devis"],
.quote5 form.devis[data-kind="Devis"] {
  max-width: 34rem;
}

form.devis label,
.cb-bc-panel form.devis label,
.cb-contact-grid form.devis label,
form.devis .f label {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  color: var(--c2126-navy) !important;
}

form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="button"]),
form.devis select,
.cb-bc-panel form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.cb-bc-panel form.devis select,
.cb-contact-grid form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.cb-contact-grid form.devis select,
section.cb-cpanel form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
section.cb-cpanel form.devis select {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 47px !important;
  height: 47px !important;
  padding: 10px 13px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  border-radius: 8px !important;
}

form.devis textarea,
.cb-bc-panel form.devis textarea,
.cb-contact-grid form.devis textarea,
section.cb-cpanel form.devis textarea {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: calc(1.45em * 8 + 24px) !important;
  height: auto !important;
  max-height: min(52vh, 340px);
  padding: 10px 13px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  border-radius: 8px !important;
  resize: vertical;
}
/* Devis avec modèle prérempli : un peu plus de hauteur visible */
form.devis[data-kind="Devis"] textarea,
.cb-bc-panel form.devis[data-kind="Devis"] textarea,
section.cb-cpanel form.devis[data-kind="Devis"] textarea {
  min-height: calc(1.45em * 10 + 28px) !important;
}

form.devis .err,
.cb-bc-panel .err,
.cb-contact-grid .err {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  min-height: 0 !important;
}

form.devis .legend,
.cb-contact-grid .legend {
  font-size: 13.5px !important;
  margin: 10px 0 0 !important;
}

form.devis .cta-row,
.cb-bc-panel form.devis .cta-row,
.cb-contact-grid form.devis .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 16px 0 8px !important;
}

form.devis > p:has(> button[type="submit"]),
.cb-contact-grid form.devis > p:has(> button) {
  margin: 16px 0 0 !important;
}

/* Bouton Envoyer = même échelle que les champs */
form.devis button.btn,
form.devis button[type="submit"],
form.devis .btn.btn-green,
.cb-bc-panel form.devis .btn,
.cb-contact-grid form.devis .btn,
section.cb-cpanel form.devis .btn {
  min-height: 47px !important;
  height: auto !important;
  padding: 12px 22px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  border-radius: 999px !important;
}

.cb-k {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c2126-muted) !important;
  margin: 0 0 0.75rem !important;
}

/* =========================================================
   Formulaire COMPACT — accueil, contact, embeds seulement
   ========================================================= */
.da-home-contact .fgrid,
.quote5 .fgrid,
.band5-q .fgrid,
body.page-contact .fgrid,
.da-home-contact form.devis .fgrid,
.band5-q form.devis .fgrid,
form.devis[data-kind="Contact"] .fgrid {
  gap: 10px 12px !important;
}
.da-home-contact .f,
.quote5 .f,
.band5-q .f,
body.page-contact .f,
form.devis[data-kind="Contact"] .f {
  gap: 3px !important;
}

.da-home-contact form.devis,
.quote5 form.devis,
.band5-q form.devis,
.band5-q .cb-bc-panel form.devis,
body.page-contact form.devis,
form.devis[data-kind="Contact"],
.cb-bc-panel form.devis[data-kind="Contact"],
.cb-contact-grid form.devis[data-kind="Contact"],
section.cb-cpanel form.devis[data-kind="Contact"] {
  max-width: 34rem;
  width: 100%;
  box-sizing: border-box;
}

.da-home-contact form.devis label,
.quote5 form.devis label,
.band5-q form.devis label,
body.page-contact form.devis label,
form.devis[data-kind="Contact"] label,
.cb-bc-panel form.devis[data-kind="Contact"] label,
section.cb-cpanel form.devis[data-kind="Contact"] label {
  font-size: 12.5px !important;
}

.da-home-contact form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.da-home-contact form.devis select,
.quote5 form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.quote5 form.devis select,
.band5-q form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.band5-q form.devis select,
body.page-contact form.devis input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
body.page-contact form.devis select,
form.devis[data-kind="Contact"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
form.devis[data-kind="Contact"] select,
.cb-bc-panel form.devis[data-kind="Contact"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.cb-bc-panel form.devis[data-kind="Contact"] select,
.cb-contact-grid form.devis[data-kind="Contact"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.cb-contact-grid form.devis[data-kind="Contact"] select,
section.cb-cpanel form.devis[data-kind="Contact"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
section.cb-cpanel form.devis[data-kind="Contact"] select {
  min-height: 40px !important;
  height: 40px !important;
  padding: 8px 11px !important;
  font-size: 14.5px !important;
}

.da-home-contact form.devis textarea,
.quote5 form.devis textarea,
.band5-q form.devis textarea,
body.page-contact form.devis textarea,
form.devis[data-kind="Contact"] textarea,
.cb-bc-panel form.devis[data-kind="Contact"] textarea,
.cb-contact-grid form.devis[data-kind="Contact"] textarea,
section.cb-cpanel form.devis[data-kind="Contact"] textarea {
  min-height: calc(1.45em * 4 + 16px) !important;
  height: calc(1.45em * 4 + 16px) !important;
  padding: 8px 11px !important;
  font-size: 14px !important;
}

.da-home-contact form.devis .btn,
.da-home-contact form.devis button[type="submit"],
.quote5 form.devis .btn,
.quote5 form.devis button[type="submit"],
.band5-q form.devis .btn,
.band5-q form.devis button[type="submit"],
body.page-contact form.devis .btn,
body.page-contact form.devis button[type="submit"],
form.devis[data-kind="Contact"] .btn,
form.devis[data-kind="Contact"] button[type="submit"],
.cb-bc-panel form.devis[data-kind="Contact"] .btn,
.cb-bc-panel form.devis[data-kind="Contact"] button[type="submit"],
section.cb-cpanel form.devis[data-kind="Contact"] .btn,
section.cb-cpanel form.devis[data-kind="Contact"] button[type="submit"] {
  min-height: 40px !important;
  padding: 8px 18px !important;
  font-size: 14px !important;
}

/* Pages contact : H1 hors carte */
.page-contact main .da-wrap > h1,
body.page-contact main h1 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  margin-bottom: 0.5rem !important;
}
.page-contact main .da-lead,
body.page-contact .da-lead {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  max-width: 42ch;
}

/* EN / ancien .cb-cpanel — même carte 2 colonnes */
section.cb-cpanel {
  background: var(--c2126-paper) !important;
  padding: clamp(2rem, 4vw, 3.25rem) 0 !important;
}
section.cb-cpanel .wrap.cb-bc-panel {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.4fr) !important;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  align-items: start !important;
  background: #fff;
  border: 1px solid var(--c2126-line);
  padding: clamp(1.5rem, 2.8vw, 2.35rem) !important;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
section.cb-cpanel .wrap.cb-bc-panel > div {
  display: block !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  grid-template-columns: none !important;
  border-radius: 0 !important;
}
section.cb-cpanel .wrap:not(.cb-bc-panel) {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
section.cb-cpanel .wrap:not(.cb-bc-panel) > div {
  display: grid !important;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.4fr) !important;
  gap: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  align-items: start !important;
  background: #fff !important;
  border: 1px solid var(--c2126-line) !important;
  padding: clamp(1.5rem, 2.8vw, 2.35rem) !important;
  border-radius: 0 !important;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}
section.cb-cpanel .wrap:not(.cb-bc-panel) > div > div {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  .cb-bc-panel,
  .da-home-contact.da-4bis,
  .cb-contact-grid.da-4bis,
  .cb-contact-grid.cb-bc-panel,
  .da-wrap > .cb-contact-grid,
  section.cb-cpanel .wrap.cb-bc-panel,
  section.cb-cpanel .wrap:not(.cb-bc-panel) > div {
    grid-template-columns: 1fr !important;
    gap: 1.65rem !important;
    padding: 1.35rem 1.1rem !important;
  }
  .cb-bc-panel .fgrid,
  .da-home-contact .fgrid,
  .cb-contact-grid .fgrid,
  form.devis .fgrid,
  .quote5 .fgrid {
    grid-template-columns: 1fr;
  }
  a.btn-rdv-joindre,
  a.btn-rdv-page {
    width: auto;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 390px) {
  .cb-bc-panel,
  .da-home-contact.da-4bis,
  .cb-contact-grid {
    padding: 1.2rem 0.9rem !important;
  }
}


/* honeypot anti-bot (invisible) */
.cb-hp, .cb-hp input {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .cb-form input, .cb-form textarea, .cb-form button,
  .devis input, .devis textarea, .devis button {
    transition: none !important;
  }
}

/* assets/css/cbs-devis-p5.css */
/* cbs-devis-p5 — bloc devis/contact modèle cbs-emballages (nuit p5)
   Vert charte site : #1C8048 / hover #166A3B — pas #5BC889 pour le RDV. */

:root {
  --cbs-p5-navy: #003366;
  --cbs-p5-ink: #0a1628;
  --cbs-p5-muted: #64748b;
  --cbs-p5-label-muted: #5a6b7d;
  --cbs-p5-line: #e2e8f0;
  --cbs-p5-green: #1C8048;
  --cbs-p5-green-h: #166A3B;
  --cbs-p5-paper: #f5f7fa;
}

/* Section fond autour du panneau */
#contact.da-section,
section.da-section:has(.cbs-p5-panel),
section.da-section:has(.cb-bc-panel.cbs-p5-panel),
section.band5-q,
section.cb-cpanel:has(.cbs-p5-panel),
.cb-cpanel:has(.cbs-p5-panel) {
  background: var(--cbs-p5-paper) !important;
}

.cbs-p5-panel,
.cb-bc-panel.cbs-p5-panel,
.da-home-contact.cbs-p5-panel,
.cb-contact-grid.cbs-p5-panel,
.quote5.cbs-p5-panel {
  display: grid !important;
  grid-template-columns: 5fr 6fr !important;
  gap: clamp(28px, 4vw, 64px) !important;
  align-items: start !important;
  background: #fff !important;
  border: 1px solid var(--cbs-p5-line) !important;
  border-radius: 32px !important;
  padding: clamp(24px, 4vw, 56px) !important;
  max-width: 1160px;
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
  min-width: 0;
}

.cbs-p5-panel > * {
  min-width: 0;
  max-width: 100%;
}

.cbs-p5-aside,
.cbs-p5-panel > .cbs-p5-aside {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  max-width: none !important;
}

.cbs-p5-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--cbs-p5-label-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cbs-p5-pill {
  display: inline-block;
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background: var(--cbs-p5-green);
  flex: 0 0 auto;
}

.cbs-p5-h2,
.cbs-p5-panel h2.cbs-p5-h2,
.cbs-p5-panel h1.cbs-p5-h2 {
  color: var(--cbs-p5-navy) !important;
  font-size: clamp(26px, 2.6vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  margin: 16px 0 0 !important;
  opacity: 1 !important;
}

.cbs-p5-h2::after,
.cbs-p5-panel h2.cbs-p5-h2::after,
.cbs-p5-panel h1.cbs-p5-h2::after {
  content: "" !important;
  display: block !important;
  width: 56px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: var(--cbs-p5-green) !important;
  margin-top: 16px !important;
  transform: none !important;
}

.cbs-p5-intro {
  display: none !important; /* modèle : pas d’intro sous le titre */
}

.cbs-p5-joindre {
  margin-top: 26px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cbs-p5-muted);
}

.cbs-p5-joindre .cbs-joindre-title,
.cbs-p5-joindre h3 {
  color: var(--cbs-p5-navy) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.2 !important;
  margin: 0 0 18px !important;
}

.cbs-p5-joindre .cbs-joindre-title::after,
.cbs-p5-joindre h3::after {
  content: none !important;
  display: none !important;
}

.cbs-p5-joindre .cbs-joindre-item {
  margin: 0 0 16px;
}

.cbs-p5-joindre .cbs-joindre-label {
  color: var(--cbs-p5-navy) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin: 0 0 2px !important;
}

.cbs-p5-joindre .cbs-joindre-val {
  margin: 0;
  color: var(--cbs-p5-muted);
}

.cbs-p5-joindre a {
  color: var(--cbs-p5-navy);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cbs-p5-joindre a:hover {
  color: var(--cbs-p5-green);
}

.cbs-p5-joindre .cbs-joindre-note {
  color: var(--cbs-p5-muted);
}

/* Annule l’ancien layout 2 colonnes autour du panneau p5 */
section.cb-cpanel .wrap:has(> .cbs-p5-panel),
section.cb-cpanel .wrap:has(.cbs-p5-panel),
.da-wrap:has(> .cbs-p5-panel),
section.band5-q .wrap:has(.cbs-p5-panel) {
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  max-width: 1160px !important;
  width: 100% !important;
  margin-inline: auto !important;
  grid-template-columns: none !important;
}
section.cb-cpanel .wrap:has(.cbs-p5-panel) > div:not(.cbs-p5-panel) {
  display: contents !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-template-columns: none !important;
}

/* Libellés joindre = navy charte (pas le vert contact-2126) */
.cbs-p5-panel .cbs-joindre-label,
.cbs-p5-panel .da-joindre__label,
.cbs-p5-panel .cbs-joindre .cbs-joindre-label,
.cbs-p5-panel .cbs-p5-joindre .cbs-joindre-label,
.cbs-p5-panel p.cbs-joindre-label.da-joindre__label {
  color: var(--cbs-p5-navy) !important;
}

/* RDV — vert site, compact, décollé de l’adresse (20–32 px) */
.cbs-p5-panel .cbs-joindre-rdv,
.cbs-p5-aside .cbs-joindre-rdv,
.cbs-p5-panel .cbs-joindre-rdv.cbs-joindre-rdv,
.da-4bis.cbs-p5-panel .cbs-joindre-rdv {
  margin-top: 24px !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}
.cbs-p5-panel .cbs-joindre-item:last-of-type {
  margin-bottom: 0 !important;
}

.cbs-p5-panel a.btn-rdv-joindre,
.cbs-p5-panel a.btn-rdv-page,
.cbs-p5-aside a.btn-rdv-joindre,
.cbs-p5-panel .cbs-joindre-rdv a,
.cbs-p5-panel .cbs-joindre-rdv a.btn-rdv-joindre,
.da-4bis.cbs-p5-panel a.btn-rdv-joindre {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: var(--cbs-p5-green) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  box-sizing: border-box;
}

.cbs-p5-panel a.btn-rdv-joindre:hover,
.cbs-p5-panel a.btn-rdv-page:hover,
.cbs-p5-aside a.btn-rdv-joindre:hover {
  background: var(--cbs-p5-green-h) !important;
  color: #fff !important;
}

.cbs-p5-panel a.btn-rdv-joindre:focus-visible,
.cbs-p5-panel a.btn-rdv-page:focus-visible {
  outline: 3px solid var(--cbs-p5-green);
  outline-offset: 2px;
}

/* Formulaire */
.cbs-p5-form,
form.devis.cbs-p5-form {
  display: grid !important;
  gap: 16px !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.cbs-p5-form .cbs-p5-row,
.cbs-p5-form .v8-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cbs-p5-form .cbs-p5-field,
.cbs-p5-form .v8-field,
.cbs-p5-form .f {
  display: block;
  margin: 0;
  min-width: 0;
}

.cbs-p5-form label {
  display: block;
  color: var(--cbs-p5-navy) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 0 6px !important;
}

.cbs-p5-form .req {
  color: #2563eb;
  font-weight: 700;
}

.cbs-p5-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.cbs-p5-form textarea,
.cbs-p5-form select {
  width: 100% !important;
  box-sizing: border-box;
  background: #fff !important;
  border: 1px solid var(--cbs-p5-line) !important;
  border-radius: 12px !important;
  color: var(--cbs-p5-ink) !important;
  font-family: inherit;
  font-size: 15px !important;
  padding: 11px 14px !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.4;
}

.cbs-p5-form textarea {
  min-height: 7.5rem !important;
  resize: vertical;
}

.cbs-p5-form input:focus,
.cbs-p5-form textarea:focus,
.cbs-p5-form select:focus {
  border-color: var(--cbs-p5-green) !important;
  outline: 2px solid var(--cbs-p5-green);
  outline-offset: 1px;
}

.cbs-p5-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer;
}

/* Case RGPD obligatoire — alignée, 18px, accent vert site */
.cbs-p5-form .cbs-p5-rgpd {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  min-width: 0;
}

.cbs-p5-form .cbs-p5-rgpd input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  accent-color: var(--cbs-p5-green);
  border-radius: 3px;
  cursor: pointer;
}

.cbs-p5-form .cbs-p5-rgpd label {
  display: inline !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cbs-p5-muted) !important;
  line-height: 1.45 !important;
  cursor: pointer;
}

.cbs-p5-form .cbs-p5-rgpd a {
  color: var(--cbs-p5-green) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cbs-p5-form .err {
  display: block;
  min-height: 0;
  font-size: 12px;
  color: #b3261e;
  margin-top: 4px;
}

.cbs-p5-form .cbs-p5-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.cbs-p5-form button[type="submit"],
.cbs-p5-form .btn.btn-green.cbs-p5-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  background: var(--cbs-p5-green) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer;
  white-space: nowrap;
}

.cbs-p5-form button[type="submit"]:hover,
.cbs-p5-form .btn.btn-green.cbs-p5-submit:hover {
  background: var(--cbs-p5-green-h) !important;
}

.cbs-p5-form button[type="submit"] svg {
  flex: 0 0 auto;
}

.cbs-p5-privacy,
.cbs-p5-form .cbs-privacy {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  color: var(--cbs-p5-muted) !important;
  line-height: 1.5 !important;
}

.cbs-p5-privacy a,
.cbs-p5-form .cbs-privacy a {
  color: var(--cbs-p5-green) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cbs-p5-form .legend {
  display: none !important;
}

.cbs-p5-form .cb-k {
  display: none !important;
}

.cbs-p5-form .cb-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 900px) {
  .cbs-p5-panel,
  .cb-bc-panel.cbs-p5-panel,
  .da-home-contact.cbs-p5-panel,
  .cb-contact-grid.cbs-p5-panel,
  .quote5.cbs-p5-panel {
    grid-template-columns: 1fr !important;
  }

  .cbs-p5-form .cbs-p5-row,
  .cbs-p5-form .v8-form-row {
    grid-template-columns: 1fr;
  }

  .cbs-p5-panel a.btn-rdv-joindre,
  .cbs-p5-panel a.btn-rdv-page {
    width: auto !important;
  }
}

/* === bloc-devis-2246 — carte-blister.com — override devis/contact (08/11/2026) : soulignement vert pleine largeur, espace titre/phrase, bouton RDV = bouton envoi === */
html body #contact .da-devis-title:not(#z1):not(#z2){width:fit-content!important;max-width:100%!important}
html body #contact .da-devis-title:not(#z1):not(#z2)::after{content:""!important;display:block!important;position:static!important;width:100%!important;height:3px!important;margin:16px 0 0!important;background:#1C8048!important;border:0!important;transform:none!important}
html body #t-contact .da-devis-title:not(#z1):not(#z2){width:fit-content!important;max-width:100%!important}
html body #t-contact .da-devis-title:not(#z1):not(#z2)::after{content:""!important;display:block!important;position:static!important;width:100%!important;height:3px!important;margin:16px 0 0!important;background:#1C8048!important;border:0!important;transform:none!important}
html body #contact.da-section--white h1:not(#z1):not(#z2){width:fit-content!important;max-width:100%!important}
html body #contact.da-section--white h1:not(#z1):not(#z2)::after{content:""!important;display:block!important;position:static!important;width:100%!important;height:3px!important;margin:16px 0 0!important;background:#1C8048!important;border:0!important;transform:none!important}
html body #t-contact .btn-rdv-joindre{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;max-width:max-content!important;flex:0 0 auto!important;align-self:flex-start!important;height:46px!important;min-height:46px!important;box-sizing:border-box!important;padding:13px 24px!important;font-size:14px!important;line-height:16.8px!important;font-weight:600!important;white-space:nowrap!important}
html body #t-contact .cbs-p5-submit{padding:13px 24px!important;font-size:14px!important;line-height:16.8px!important;height:46px!important;min-height:46px!important;box-sizing:border-box!important}
html body #contact .btn-rdv-joindre{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;max-width:max-content!important;flex:0 0 auto!important;align-self:flex-start!important;height:46px!important;min-height:46px!important;box-sizing:border-box!important;padding:13px 24px!important;font-size:14px!important;line-height:16.8px!important;font-weight:600!important;white-space:nowrap!important}
html body #contact .cbs-p5-submit{padding:13px 24px!important;font-size:14px!important;line-height:16.8px!important;height:46px!important;min-height:46px!important;box-sizing:border-box!important}
/* === fin bloc-devis-2246 === */

/* === bloc-devis-2246b — carte-blister.com — espace trait/phrase 16px (aligné emballage-souple, même structure cbs-devis-p5/2051) === */
html body #contact .da-devis-title:not(#z1):not(#z2)+.cbs-contact-intro-2051,html body #t-contact .da-devis-title:not(#z1):not(#z2)+.cbs-contact-intro-2051{margin-top:16px!important}
/* === fin bloc-devis-2246b === */

/* assets/css/cb-accueil.css */
/* cb-accueil — resserre sections (02/11), sans toucher header / photos / charte */
:root {
  --cb-space-section: clamp(2rem, 3.2vw, 3rem);
}
.da-section {
  padding-block: var(--cb-space-section);
}
.b2126 {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0;
}
.cb-machines .cb-piece {
  margin: 0 0 1.75rem;
}
.da-home-secteurs {
  margin-top: 1.35rem;
}
.da-bento {
  margin-top: 1.35rem !important;
}
.da-stats {
  margin-top: 1.25rem;
}
#contact.da-section {
  padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
}

#comparatif > .da-wrap > div[style*="grid"] {
  display: grid;
}
@media (max-width: 760px) {
  #comparatif > .da-wrap > div[style*="grid"],
  #comparatif .wrap > div[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}

/* assets/css/canonical-audit-2051.css */
/* Correctifs d'affichage du site canonique, preview du 08/11/2026. */
main{padding-bottom:48px!important;background:#f4f4f4!important}main>section:last-child{padding-bottom:0!important;margin-bottom:0!important}
main>section:last-child>.da-wrap:last-child,main>section:last-child>.wrap:last-child{margin-bottom:0!important;padding-bottom:0!important}
.cbs-p5-panel{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)!important;gap:clamp(32px,4vw,51.2px)!important;align-items:start!important}
.cbs-p5-panel>aside,.cbs-p5-panel>form{min-width:0!important}
.cbs-p5-panel a.btn-rdv-joindre,main a.cbs-bc-rdv,main a.btn-rdv{background:#fff!important;color:#003366!important;border:2px solid #003366!important;box-shadow:none!important}
.cbs-p5-panel a.btn-rdv-joindre:hover,main a.cbs-bc-rdv:hover,main a.btn-rdv:hover{background:#003366!important;color:#fff!important}
footer.cbs-foot .main{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr)!important;gap:40px!important}
footer.cbs-foot .main>div{min-width:0!important}footer.cbs-foot .main li,footer.cbs-foot .contact li{white-space:normal!important;overflow-wrap:anywhere}footer.cbs-foot .brand .name{white-space:normal!important}
footer.cbs-foot .contact a.btn-rdv{background:transparent!important;color:#fff!important;border:2px solid #fff!important;white-space:normal!important}footer.cbs-foot .contact a.btn-rdv:hover{background:#fff!important;color:#003366!important}
main .cb-refs li>picture{display:block;min-width:0;width:80px;height:60px}main .cb-refs li>picture img{display:block;width:80px!important;height:60px!important;max-width:100%;object-fit:contain}
html[lang^=ja] main,html[lang^=zh] main{overflow-wrap:anywhere}main img{max-width:100%}main .fgrid>*{min-width:0}

/* CANON-FOOTER-2058 : référence REF-footer-securisee.png, marine #0F2040. */
footer.cbs-foot,footer.cbs-foot .main,footer.cbs-foot .group,footer.cbs-foot .bottom{background:#0f2040!important}
footer.cbs-foot .main{display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.3fr)!important;gap:40px!important}footer.cbs-foot .main>div{min-width:0!important}
footer.cbs-foot .brand .name{color:#fff!important;text-decoration:underline!important;text-decoration-color:#5bc889!important;text-decoration-thickness:2px!important;text-underline-offset:8px!important;white-space:normal!important}
footer.cbs-foot .main li,footer.cbs-foot .contact li{white-space:normal!important;overflow-wrap:anywhere}
footer.cbs-foot .contact a.btn-rdv{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;color:#fff!important;border:2px solid #fff!important;border-radius:5px!important;padding:11px 22px!important;white-space:normal!important;box-shadow:none!important;text-align:center!important}
footer.cbs-foot .contact a.btn-rdv:hover{background:#fff!important;color:#0f2040!important}
footer.cbs-foot #sites-cbs-group .label{color:#fff!important;text-decoration:none!important;display:table!important;margin-left:auto!important;margin-right:auto!important}
footer.cbs-foot #sites-cbs-group .label::after{content:""!important;display:block!important;width:100%!important;height:2px!important;background:#5bc889!important;margin-top:8px!important}
footer.cbs-foot #sites-cbs-group .gsecs{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.5fr)!important;gap:28px 36px!important;text-align:center!important}
footer.cbs-foot #sites-cbs-group .gsec{min-width:0!important}footer.cbs-foot #sites-cbs-group .gsec-wide{grid-column:1/-1!important}
footer.cbs-foot #sites-cbs-group .gt{color:#5bc889!important;font-size:11px!important;text-transform:uppercase!important;letter-spacing:.12em!important}
footer.cbs-foot #sites-cbs-group a.gi{color:#fff!important}footer.cbs-foot #sites-cbs-group a.gi:hover{color:#5bc889!important}

/* La marge basse native du dernier bloc ne doit pas doubler la bande grise. */
main>:last-child{margin-bottom:0!important}
main>section:last-child{display:flow-root!important}
/* Les règles DA à sélecteur #contact écrasaient le RDV blanc de la carte. */
main#contenu section#contact .cbs-p5-panel .cbs-p5-aside .cbs-joindre-rdv a.btn-rdv-joindre,main#contenu .cbs-p5-panel .cbs-p5-aside.cbs-joindre .cbs-joindre-rdv a.btn-rdv-joindre{background:#fff!important;color:#003366!important;border:2px solid #003366!important}
main#contenu section#contact .cbs-p5-panel .cbs-p5-aside .cbs-joindre-rdv a.btn-rdv-joindre:hover,main#contenu .cbs-p5-panel .cbs-p5-aside.cbs-joindre .cbs-joindre-rdv a.btn-rdv-joindre:hover{background:#003366!important;color:#fff!important}

/* assets/css/cbs-canon-2058.css */
/* Règle CANON Achille 20h58 : champs propres au site, pas de copie des champs CBS. */
form.cbs-native-form{min-width:0!important;max-width:100%!important;width:100%!important;box-sizing:border-box!important}
form.cbs-native-form .cbs-bc-form-row,form.cbs-native-form .cbs-p5-row,form.cbs-native-form .v8-form-row,form.cbs-native-form .fgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start!important;gap:16px!important;min-width:0!important;width:100%!important}
form.cbs-native-form .champ,form.cbs-native-form .cbs-p5-field,form.cbs-native-form .v8-field,form.cbs-native-form .f{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}
form.cbs-native-form input:not([type=checkbox]):not([type=radio]),form.cbs-native-form textarea,form.cbs-native-form select{box-sizing:border-box!important;min-width:0!important;max-width:100%!important;width:100%!important}
form.cbs-native-form .full{grid-column:1/-1!important}
.cbs-bc-col-droite{align-items:stretch!important;min-width:0!important}
.cbs-p5-panel{display:grid!important;grid-template-columns:minmax(0,.85fr) minmax(0,1fr)!important;gap:clamp(32px,4vw,51.2px)!important;align-items:start!important}
.cbs-p5-panel>aside,.cbs-p5-panel>form{min-width:0!important}
.cbs-contact-title-2051{display:table!important;position:relative!important;margin:0 0 16px!important;color:#003366!important;font:700 clamp(26px,2.6vw,34px)/1.15 Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif!important;letter-spacing:-.68px!important;padding:0!important;text-transform:none!important}
.cbs-contact-title-2051::after{content:""!important;display:block!important;position:static!important;width:56px!important;height:3px!important;background:#5bc889!important;margin:16px 0 0!important;border:0!important;border-radius:0!important;transform:none!important}
.cbs-contact-intro-2051{display:block!important;margin:0 0 28px!important;padding:0!important;font:15px/22.5px Inter,system-ui,"Segoe UI",Roboto,Arial,sans-serif!important;color:#64748b!important;max-width:60ch!important}

/* Le sélecteur d’origine masquait le pseudo-élément du titre. */
html body #cbs-contact-title-canon-2058.cbs-contact-title-2051.cbs-contact-title-2051::after{content:""!important;display:block!important;width:56px!important;height:3px!important;background:#5bc889!important;margin:16px 0 0!important;position:static!important;border:0!important;transform:none!important}

/* assets/cbs-fluidite.css */
/* CBS Groupe — pack fluidité v2 (08/11/2026 21h25) — v2 : ne double pas une animation existante (html.cbs-motion)
   Aucun changement de contenu, couleur, typo ni structure.
   Uniquement : défilement doux, fondu doux à l'apparition, survols, respect de prefers-reduced-motion.
   Aucun décalage de mise en page : seules opacity/transform sont animées (pas de height/margin). */
html{scroll-behavior:smooth}
:target{scroll-margin-top:96px}
/* Fondu au scroll : n'agit QUE si le JS a ajouté .cbs-fx sur <html> (sans JS = contenu visible) */
.cbs-fx .cbs-reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.cbs-fx .cbs-reveal.cbs-in{opacity:1;transform:none;will-change:auto}
/* Survols doux (ne touchent ni couleurs ni tailles de boîte) */
a,button,.btn,[class*="btn"],html:not(.cbs-motion):not(.cbs-native-motion) [class*="card"]{transition-property:color,background-color,border-color,box-shadow,transform,opacity;transition-duration:.2s;transition-timing-function:ease-out}
@media (hover:hover){html:not(.cbs-motion):not(.cbs-native-motion) [class*="card"]:hover{transform:translate3d(0,-2px,0)}}
img{transition:opacity .3s ease-out}
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .cbs-fx .cbs-reveal{opacity:1!important;transform:none!important}
}

/* assets/css/cb-lang-contour-0447.css */
/* Contour bouton langue — même bordure #003366 / radius 999px que .cbh-btn--rdv */
header.hd.cbh details.lang summary,
header.site details.lang summary,
.hd.cbh .lang summary {
  display: inline-flex !important;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid #003366 !important;
  border-radius: 999px !important;
  min-height: 40px;
  color: #003366 !important;
  background: #fff !important;
}