/* =============================================================================
   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("../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("../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("../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("../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("../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("../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("../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("../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("../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("../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("../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("../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("../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("../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;
  }
}