/* Tokens du design system DUNE.
   Deux niveaux : primitifs (valeur brute) puis sémantiques (intention).
   Toute couleur, espacement, taille, graisse, rayon, ombre ou conteneur
   utilisé dans assets/css doit venir d'ici. Voir DESIGN_SYSTEM.md. */

:root {
  /* ---------- Primitifs : couleurs ---------- */
  --cyan-500: #05acd4;
  --cyan-600: #0391b6;
  --cyan-700: #047894;
  --teal-900: #083541;
  --teal-800: #123c46;
  --gray-600: #5c6f77;
  --white: #fff;
  --white-a20: rgb(255, 255, 255, 0.2);
  --surface-100: #f3f7f7;
  --surface-50: #f7fbfd;
  --cyan-a06: rgb(5, 172, 212, 0.06);
  --cyan-a10: rgb(5, 172, 212, 0.1);
  --cyan-a20: rgb(5, 172, 212, 0.2);
  --cyan-a26: rgb(5, 172, 212, 0.26);
  --cyan-a45: rgb(5, 172, 212, 0.45);
  --cyan-a70: rgb(5, 172, 212, 0.7);
  --teal-a10: rgb(6, 43, 52, 0.1);
  --teal-a12: rgb(6, 43, 52, 0.12);
  --teal-a70: rgb(8, 53, 65, 0.7);
  --teal-a92: rgb(8, 53, 65, 0.92);
  --black-a06: rgb(0, 0, 0, 0.06);
  --red-500: #d94b4b;
  --red-a08: rgb(217, 75, 75, 0.08);
  --red-a20: rgb(217, 75, 75, 0.2);
  --green-500: #2bb673;
  --green-a10: rgb(43, 182, 115, 0.1);

  /* ---------- Primitifs : espacements (base 4) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Primitifs : texte ---------- */
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-28: 28px;
  --text-32: 32px;
  --text-36: 36px;
  --text-display: clamp(30px, 3.6vw, 46px);
  --text-display-sm: clamp(24px, 3vw, 32px);

  --font-roboto:
    Roboto, -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;
  --font-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --tracking-caps: 0.075em;
  --tracking-caps-wide: 0.16em;
  --tracking-wide: 1.82px;
  --tracking-tight: -0.2px;

  --weight-400: 400;
  --weight-600: 600;
  --weight-700: 700;
  --weight-800: 800;
  --weight-900: 900;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  /* ---------- Primitifs : formes ---------- */
  --radius-0: 0;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px var(--black-a06);
  --shadow-md: 0 8px 24px var(--teal-a10);
  --shadow-lg: 0 18px 44px var(--teal-a12);
  --shadow-brand-sm: 0 8px 20px var(--cyan-a06);
  --shadow-brand: 0 10px 24px var(--cyan-a26);
  --shadow-brand-lg: 0 16px 40px var(--cyan-a20);
  --shadow-brand-strong: 0 12px 28px var(--cyan-a45);

  --container-narrow: 640px;
  --container-text: 900px;
  --container: 1170px;

  --size-header: 83px;

  /* Breakpoints (constantes, non utilisables dans @media) : 640, 900, 1024. */

  /* ---------- Sémantiques : couleurs ---------- */
  --color-brand: var(--cyan-500);
  --color-brand-hover: var(--cyan-600);
  --color-brand-text: var(--cyan-700);
  --color-negative: var(--red-500);
  --color-negative-soft: var(--red-a08);
  --color-negative-line: var(--red-a20);
  --color-positive: var(--green-500);
  --color-positive-soft: var(--green-a10);
  --color-ink: var(--teal-900);
  --color-ink-soft: var(--teal-800);
  --color-ink-muted: var(--teal-a70);
  --color-muted: var(--gray-600);
  --color-line: var(--teal-a12);
  --color-surface: var(--surface-100);
  --color-bg: var(--white);
  --color-focus-ring: var(--cyan-a26);
  --color-nav-link: var(--teal-a92);

  /* ---------- Sémantiques : typographie ---------- */
  --font-heading: var(--font-roboto);
  --font-ui: var(--font-inter);
  --weight-heading: var(--weight-900);
  --weight-body: var(--weight-400);
  --weight-label: var(--weight-900);
  --weight-subheading: var(--weight-600);
  --letter-spacing-caps: var(--tracking-caps);
  --letter-spacing-caps-wide: var(--tracking-caps-wide);
  --letter-spacing-nav: var(--tracking-wide);
  --letter-spacing-tight: var(--tracking-tight);

  /* ---------- Sémantiques : layout ---------- */
  --header-height: var(--size-header);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
}

h3 {
  font-weight: var(--weight-subheading);
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
main {
  padding-top: var(--header-height);
}

/* Below 1024px, .site-header switches from fixed to sticky (see
   header.css) — a sticky element occupies its own space in normal
   flow, so the manual offset that compensates for a fixed header's
   out-of-flow position is no longer needed here (and would otherwise
   double the gap). */
@media (max-width: 1024px) {
  main {
    padding-top: 0;
  }
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  z-index: 100;
}

.site-header__inner {
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: flex;
  align-items: center;
}

.site-header__logo {
  /* Never let the logo compress: the nav's own width maths assume a fixed logo box. */
  flex-shrink: 0;
}

.site-header__nav {
  margin-left: var(--space-10);
}

.site-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.site-header__nav-item a,
.site-header__nav-item-trigger {
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-nav);
  color: var(--color-nav-link);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease;
}

/* Dropdown caret on "Nos produits" and "À propos de DUNE". */
.chev {
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg) translateY(-1px);
  transition:
    transform 0.18s,
    border-color 0.18s;
}

/* Chevron flips to point up and turns brand-blue while its dropdown is open. */
.site-header__nav-item--has-dropdown:hover .chev,
.site-header__nav-item--has-dropdown:focus-within .chev,
.site-header__nav-item--has-dropdown.is-dd-open .chev {
  transform: rotate(225deg) translateY(1px);
  border-color: var(--color-brand);
}

.site-header__nav-item--has-dropdown {
  position: relative;
}

.site-header__nav-item > a:hover,
.site-header__nav-item-trigger:hover {
  background: var(--cyan-a10);
  color: var(--color-ink);
  border-radius: var(--radius-12);
}

/* Live header links carry no native focus indicator; this ring reuses the
   same brand-cyan style the hero .btn class uses elsewhere. */
.site-header__nav-item > a:focus-visible,
.site-header__nav-item-trigger:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-header__dropdown {
  position: absolute;
  left: 0;
  top: calc(100% - 8px);
  min-width: 290px;
  padding: var(--space-3);
  border-radius: var(--radius-16);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity 0.18s,
    transform 0.18s,
    visibility 0.18s;
  z-index: 5;
}

.site-header__nav-item--has-dropdown:hover .site-header__dropdown,
.site-header__nav-item--has-dropdown:focus-within .site-header__dropdown,
.site-header__nav-item--has-dropdown.is-dd-open .site-header__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.site-header__dropdown-title {
  margin: var(--space-2) var(--space-3) var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-heading);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Scoped under .site-header__dropdown: the dropdown-link <a> is also a
   descendant of .site-header__nav-item, whose own rule above has
   equal-or-higher specificity and would otherwise win. */
.site-header__dropdown .site-header__dropdown-link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-12);
  text-decoration: none;
  color: var(--teal-a92);
  font-family: var(--font-ui);
  font-weight: var(--weight-heading);
  font-size: var(--text-13);
  line-height: var(--leading-snug);
  text-transform: none;
  border: 1px solid transparent;
  transition:
    background 0.18s,
    border-color 0.18s,
    transform 0.18s;
}

.site-header__dropdown-link::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  box-shadow: var(--shadow-md);
}

.site-header__dropdown .site-header__dropdown-link:hover {
  background: var(--cyan-a06);
  border-color: var(--cyan-a20);
  transform: translateX(2px);
}

.site-header__dropdown .site-header__dropdown-link:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

/* Header CTA buttons deliberately do not share buttons.css's .btn/.btn--outline:
   that file serves the hero/plateforme CTAs, matched to their own values. */
.site-header__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  border-radius: var(--radius-12);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  line-height: 12px;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease;
}

.site-header__cta:hover {
  transform: translateY(-1px);
}

.site-header__cta:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-header__cta--access {
  color: var(--teal-a92);
  background:
    radial-gradient(900px 220px at 20% -80px, var(--cyan-a20), transparent 60%),
    linear-gradient(var(--white), var(--cyan-a06));
  border-color: var(--cyan-a45);
  box-shadow: var(--shadow-lg);
}

.site-header__cta--access::before {
  content: "";
  display: block;
  width: 7px;
  height: 7px;
  margin-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.site-header__cta--partner {
  color: var(--teal-a92);
  background: transparent;
  border-color: var(--color-line);
  /* Rest-state opacity is intentionally below 1 so the hover rule's rise to
     full opacity below is a real, visible change. */
  opacity: 0.92;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

.site-header__cta--partner:hover {
  background: var(--white);
  border-color: var(--cyan-a26);
  opacity: 1;
}

/* Mobile: hamburger + in-flow accordion panel. */

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: var(--radius-12);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  padding: 0;
  cursor: pointer;
}

/* 3 stacked bars built from one span + its ::before/::after — a static glyph
   that never morphs into an X. */
.site-header__burger-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--teal-a92);
}

.site-header__burger-icon::before,
.site-header__burger-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--teal-a92);
}

.site-header__burger-icon::before {
  top: -7px;
}

.site-header__burger-icon::after {
  top: 7px;
}

/* In-flow accordion panel (not an overlay): hidden by default, shown only
   under the mobile breakpoint while .site-header carries .is-menu-open. */
.site-header__mobile-panel {
  display: none;
  padding: var(--space-4) 0 var(--space-6);
}

.site-header__mobile-group {
  border-radius: var(--radius-16);
  border: 1px solid var(--cyan-a20);
  background: linear-gradient(180deg, var(--cyan-a10), var(--cyan-a06));
  padding: var(--space-4);
}

.site-header__mobile-group-title {
  margin: var(--space-1) var(--space-2) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-heading);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Flattened list: both dropdowns' sub-links rendered as plain pill rows
   alongside the top-level items (mobile does not reuse the desktop dropdown
   markup). */
.site-header__mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-header__mobile-link {
  display: block;
  border-radius: var(--radius-12);
  border: 1px solid var(--cyan-a20);
  background: var(--cyan-a06);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-heading);
  color: var(--teal-a92);
  text-decoration: none;
}

.site-header__mobile-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.site-header__mobile-ctas .site-header__cta {
  width: min(360px, 100%);
}

@media (max-width: 640px) {
  .site-header__inner {
    padding: var(--space-4);
  }

  .site-header__logo {
    margin-right: var(--space-4);
  }

  .site-header__logo img {
    height: 35px;
    max-height: 35px;
    /* Garde-fou de dimension du logo, pas un conteneur de layout. */
    max-width: 220px;
  }
}

@media (max-width: 1024px) {
  /* A sticky header occupies its own flow space, so the panel below pushes
     following content down natively, with no JS-synced spacer needed. */
  .site-header {
    position: sticky;
    height: auto;
  }

  .site-header__inner {
    height: var(--header-height);
    justify-content: space-between;
  }

  .site-header__nav,
  .site-header__actions {
    display: none;
  }

  .site-header__burger {
    display: inline-flex;
  }

  .site-header.is-menu-open .site-header__mobile-panel {
    display: block;
  }
}
.site-footer {
  background:
    radial-gradient(1100px 260px at 18% -90px, var(--cyan-a20), transparent 60%),
    radial-gradient(900px 220px at 85% -110px, var(--cyan-a10), transparent 55%),
    linear-gradient(var(--white), var(--surface-50) 55%, var(--white));
  color: var(--color-ink);
}

.site-footer__inner {
  /* .site-footer__inner plays both the live "wrap" and "grid" roles at once:
     a two-row grid (logo row, content row) centered in the container. */
  box-sizing: border-box;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-3);
  display: grid;
  grid-template-columns: minmax(280px, 30%) 1fr;
  /* Fixed row heights matching the logo/content two-row layout. */
  grid-template-rows: 37.1172px 279.516px;
  gap: var(--space-3) var(--space-12);
}

.site-footer__logo {
  grid-row: 1;
  grid-column: 1;
}

.site-footer__brand {
  /* Explicit placement: without it, grid auto-placement would slot this
     next to the logo (row 1 / col 2) instead of below it. */
  grid-row: 2;
  grid-column: 1;
}

.site-footer__tagline {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-800);
  line-height: 26px;
  color: var(--color-ink);
  margin-top: var(--space-4);
}

.site-footer__lead {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-700);
  line-height: 26px;
  color: var(--color-muted);
  margin-top: var(--space-4);
}

.site-footer__cols-wrap {
  /* The nav columns and contact-card row stack vertically inside the
     right-hand column only, never spanning back under the logo column.
     The fixed translateY nudge keeps this block vertically centered
     against the row's fixed track height. */
  display: block;
  grid-row: 2;
  grid-column: 2;
  place-self: center;
  transform: translateY(-25px);
}

.site-footer__nav-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.site-footer__contact-row {
  margin-top: var(--space-4);
}

.site-footer__eyebrow {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-12);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-nav);
  color: var(--color-brand-text);
}

.site-footer__eyebrow::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  border-bottom: 2px dotted var(--cyan-a26);
}

.site-footer__links li + li {
  margin-top: var(--space-2);
}

.site-footer__links a {
  /* Block display makes line-height establish the box height directly
     (an inline anchor's box height comes from the font metrics instead). */
  display: block;
  /* The leading dash is an absolutely-positioned ::before bar, so the link
     reserves its gutter with padding rather than a text glyph. */
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  color: var(--color-ink);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: 20.3px;
  /* Border reserves its box-model space at rest so hover doesn't shift layout. */
  border-bottom: 1px solid transparent;
  transition:
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.site-footer__links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.48px;
  transform: translateY(-1px);
  display: block;
  width: 12px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--cyan-a45);
}

/* Live marks the first "Accès" link ("Connexion plateforme") with a
   .primary class: heavier weight, a visible brand-cyan border-bottom at
   rest, and a brighter dash. Rendered from data/footer.yaml's primary flag. */
.site-footer__links a.is-primary {
  font-weight: var(--weight-900);
  border-bottom-color: var(--cyan-a45);
}

.site-footer__links a.is-primary::before {
  background: var(--color-brand);
}

.site-footer__links a:hover {
  color: var(--color-ink);
  border-bottom-color: var(--cyan-a45);
  text-decoration: none;
  transform: translateX(2px);
}

.site-footer__links a:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-footer__brand-link {
  color: var(--color-brand-text);
}

.site-footer__brand-link:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-footer__legal {
  /* Nested inside .cols-wrap as a third row after the nav columns and
     contact cards, so it only spans the right-hand column's width. */
  font-family: var(--font-ui);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-13);
  line-height: normal;
  color: var(--color-muted);
}

.site-footer__legal ul {
  display: flex;
  gap: var(--space-2);
}

.site-footer__legal ul a,
.site-footer__legal ul button {
  color: var(--teal-a92);
  /* Rest-state opacity is intentionally below 1 so the hover rule is a
     real, visible change rather than a no-op. */
  opacity: 0.9;
  border-bottom: 1px solid transparent;
  transition:
    opacity 0.18s ease,
    border-color 0.18s ease;
}

.site-footer__legal ul button {
  padding: 0;
  border-width: 0 0 1px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-footer__legal ul a:hover,
.site-footer__legal ul button:hover {
  opacity: 1;
  border-bottom-color: var(--cyan-a45);
}

.site-footer__legal ul a:focus-visible,
.site-footer__legal ul button:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.site-footer__legal ul li + li::before {
  content: "\00b7";
  margin-right: var(--space-2);
  color: var(--color-muted);
}

/* Mobile: three independent breakpoints —
   outer grid to 1 column at 1024px, nav columns to 2 at 900px (see
   cards.css for the contact row's own 900px rule), columns to 1 and the
   legal row restacks/reorders at 640px. */

@media (max-width: 1024px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: var(--space-4);
  }

  /* Natural DOM order (logo, brand copy, cols-wrap) already matches the
     stacked mobile order once explicit row/column placement and the
     desktop-only vertical nudge are cleared. */
  .site-footer__logo,
  .site-footer__brand,
  .site-footer__cols-wrap {
    grid-column: 1;
    grid-row: auto;
  }

  .site-footer__cols-wrap {
    place-self: stretch;
    transform: none;
  }
}

@media (max-width: 900px) {
  .site-footer__nav-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .site-footer__inner {
    padding: var(--space-10) var(--space-4) var(--space-3);
  }

  .site-footer__nav-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .site-footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* Order flips: links row first, copyright second. */
  .site-footer__legal > ul {
    order: 1;
    overflow-x: auto;
  }

  .site-footer__legal > span {
    order: 2;
    font-size: var(--text-12);
  }

  .site-footer__legal ul li + li::before {
    content: "-";
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--text-13);
  font-weight: var(--weight-700);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  border: 1px solid transparent;
  cursor: pointer;
}

.btn--primary {
  background: var(--color-brand);
  color: var(--color-ink);
}

.btn--outline {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

/* Shared by every .btn/.btn--primary/.btn--outline consumer (currently the
   hero CTAs), which layer their own hover/box-shadow overrides on top
   without touching outline. */
.btn:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}
.site-footer__contact-row {
  /* A 3-column grid, scoped to the right-hand column's width only (see
     .site-footer__cols-wrap in footer.css), same width as the 3 nav-link
     columns above it. */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2) var(--space-3);
}

/* Single-column below 900px (no 2-column intermediate state). Kept in this
   file, next to the base rule above, rather than footer.css: cards.css is
   concatenated after footer.css in baseof.html, so an unconditional
   .site-footer__contact-row rule there would otherwise win over an earlier
   media-query override at equal specificity. */
@media (max-width: 900px) {
  .site-footer__contact-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-0);
  box-shadow: var(--shadow-md);
  padding: var(--space-2) var(--space-3);
}

.contact-card__icon {
  /* 28px rounded square, not a circle. */
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-12);
  background: var(--cyan-a10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card__icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-brand);
}

.contact-card__text {
  display: block;
}

.contact-card__label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-11);
  font-weight: var(--weight-label);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-nav);
  color: var(--color-muted);
  margin-bottom: var(--space-1);
}

.contact-card__value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  color: var(--teal-a92);
}

.contact-card--addr .contact-card__value {
  margin-bottom: var(--space-2);
}

.contact-card--addr .contact-card__value:last-child {
  margin-bottom: 0;
}
.hero-plateforme {
  /* Cyan-to-white diagonal gradient background. */
  background: linear-gradient(287deg, var(--color-brand) 0%, var(--white) 44%);
  padding: var(--space-16) var(--space-6);
}

.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

.hero-content {
  padding: var(--space-6) 0 var(--space-3);
}

.hero-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-3);
}

.hero-kicker::before {
  /* Small gradient dash accent preceding the kicker text. */
  content: "";
  width: 30px;
  height: 2px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-brand), var(--cyan-a10));
}

.hero-heading {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-900);
  line-height: 61.2px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

.hero-heading .word-accent {
  color: var(--color-brand);
}

.hero-heading .word-ink {
  color: var(--color-ink);
}

.hero-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}

.hero-lead {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.hero-lead strong {
  font-weight: var(--weight-900);
  color: var(--color-brand);
}

.hero-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: 0 0 var(--space-5);
}

.hero-list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 19.2px;
  color: var(--color-ink);
}

.hero-list li::before {
  /* Small bullet dot. */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.hero-cta .btn {
  /* Deliberate deviation: the UA button-default font stack (no Roboto) is
     kept as var(--font-ui) rather than reintroduced literally. */
  font-family: var(--font-ui);
  font-weight: var(--weight-600);
  letter-spacing: var(--letter-spacing-caps);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-16);
  gap: var(--space-3);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.hero-cta .btn--primary {
  /* No darker-brand token exists; the gradient fill collapses to a flat
     brand fill instead of the two-tone live gradient. */
  background-color: transparent;
  background-image: linear-gradient(var(--color-brand), var(--color-brand));
  border: 1px solid transparent;
  box-shadow: var(--shadow-brand);
}

.hero-cta .btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

.hero-cta .btn--outline {
  color: var(--color-ink);
  background: var(--white);
  border-color: var(--cyan-a45);
  box-shadow: var(--shadow-md);
}

.hero-cta .btn--outline:hover {
  background-color: var(--white);
  border-color: var(--cyan-a45);
  transform: translateY(-2px);
  box-shadow: var(--shadow-brand);
}

.hero-cta .btn::after {
  content: "\203A";
  font-size: var(--text-16);
  line-height: 1;
}

.hero-fine-print {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: normal;
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--teal-a10);
}

.hero-fine-print em {
  /* font-style: normal is deliberate — the text stays upright despite the <em>. */
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-700);
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  color: var(--color-ink-muted);
}

.hero-media img {
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-heading {
    font-size: var(--text-36);
    line-height: 1.15;
  }
}
.produits {
  /* White-to-cyan diagonal gradient background. */
  background: linear-gradient(50deg, var(--white) 65%, var(--color-brand) 100%);
  padding: 0 var(--space-3);
}

.produits-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-5) 0;
  display: grid;
  grid-template-columns: 0.63fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* ---------- Head ---------- */

.produits-head {
  padding: var(--space-10) 0 var(--space-6);
}

.produits-badges {
  display: flex;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.produits-badge {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a26);
  border-radius: var(--radius-0);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  color: var(--color-ink-soft);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
}

.produits-title {
  font-family: var(--font-heading);
  font-size: var(--text-32);
  font-weight: var(--weight-900);
  line-height: 39.1px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.produits-title em {
  font-style: normal;
  color: var(--color-brand);
}

.produits-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0 0 var(--space-6);
}

.produits-cta {
  display: block;
}

.produits-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-12);
  border: 1px solid var(--cyan-a45);
  background: linear-gradient(var(--white), var(--cyan-a06));
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--teal-a92);
}

/* ---------- Spotlight ---------- */

.produits-spotlight {
  width: 100%;
}

/* Tab-switch state: two radio inputs (no JS) drive which panel and which
   tab label is styled active. */
.produits-tab-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.produits-wrap {
  width: 100%;
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  overflow: hidden;
  position: relative;
  background: transparent;
}

.produits-tabs {
  padding: var(--space-3) var(--space-4) var(--space-3);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--teal-a10);
}

.produits-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--teal-a12);
  background: var(--white);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  line-height: 12px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.produits-tab-pill {
  /* Small dot indicator inside each tab. */
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--teal-a12);
}

/* Active tab (default: tab 0, whichever product sorts first by title, since
   its radio is checked). Index-based, not product-identity-based, so it
   survives the featured-products list reordering. */
#produits-tab-0:checked ~ .produits-wrap .produits-tab--0,
#produits-tab-1:checked ~ .produits-wrap .produits-tab--1 {
  background: linear-gradient(180deg, var(--cyan-a20) 0%, var(--cyan-a10) 100%);
  border-color: var(--cyan-a45);
}

#produits-tab-0:checked ~ .produits-wrap .produits-tab--0 .produits-tab-pill,
#produits-tab-1:checked ~ .produits-wrap .produits-tab--1 .produits-tab-pill {
  background: var(--color-brand);
  /* Decorative halo behind the active tab's dot; nearest shadow token by weight. */
  box-shadow: var(--shadow-sm);
}

.produits-progress {
  /* 2px track between the tab row and the card. */
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--teal-a10);
}

.produits-progress-bar {
  /* No auto-rotation timer in the CSS-only implementation, so the fill stays at zero. */
  width: 0;
  height: 100%;
  background: var(--color-brand);
  transition: width 0.2s linear;
}

.produits-card {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.produits-card--1 {
  display: none;
}

#produits-tab-1:checked ~ .produits-wrap .produits-card--0 {
  display: none;
}

#produits-tab-1:checked ~ .produits-wrap .produits-card--1 {
  display: block;
}

.produits-media {
  border-radius: var(--radius-16);
  overflow: hidden;
  border: 1px solid var(--teal-a10);
  box-shadow: var(--shadow-md);
  background: var(--white);
}

.produits-media-visual {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--surface-100);
}

.produits-media-visual picture {
  position: absolute;
  inset: 0;
  display: block;
}

.produits-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
}

.produits-overlay {
  /* Hover-state legibility layer over the photo; opacity 0 at rest, so its
     gradient is never visible in the current implementation. */
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--teal-a92) 100%);
  opacity: 0;
  pointer-events: none;
}

.produits-photo-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: 11px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  z-index: 3;
}

.produits-headline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-4) var(--space-4) var(--space-3);
  z-index: 3;
  display: flex;
  align-items: flex-end;
}

.produits-h-title {
  /* White text on photo, legible via .produits-overlay when active. Not a
     section heading (a decorative overlay div), so it uses a static text
     token instead of the responsive display tokens. */
  font-family: var(--font-ui);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 1.05;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 10px 22px var(--black-a06);
}

.produits-body {
  padding: var(--space-3);
  background: var(--white);
  border-top: 1px solid var(--teal-a10);
  display: grid;
  gap: var(--space-3);
}

.produits-desc {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.produits-bullets {
  display: grid;
  gap: var(--space-2);
}

.produits-bullets li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 20.925px;
  color: var(--color-ink);
}

.produits-check {
  /* Small checkmark chip. */
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: var(--radius-8);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a20);
  margin-top: var(--space-1);
  display: grid;
  place-items: center;
  color: var(--color-ink);
}

.produits-check svg {
  width: 14px;
  height: 14px;
}

.produits-panel-cta {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--teal-a10);
}

.produits-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-12);
  border: 1px solid var(--cyan-a45);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-900);
  line-height: normal;
  color: var(--color-brand-text);
}

@media (max-width: 900px) {
  .produits-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .produits-h-title {
    font-size: var(--text-18);
    line-height: 1.08;
  }
}
.plateforme {
  background: transparent;
  padding: 0 var(--space-3);
}

.plateforme-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) 0 0;
  display: grid;
  grid-template-columns: 433fr 737fr;
  gap: 0;
  align-items: start;
}

/* ---------- Head ---------- */

.plateforme-head {
  max-width: var(--container-text);
  margin: 0;
  padding: var(--space-2);
  box-sizing: border-box;
}

.plateforme-head-top {
  margin: 0 0 var(--space-3);
}

.plateforme-title {
  font-family: var(--font-heading);
  font-size: var(--text-32);
  font-weight: var(--weight-900);
  line-height: 36.8px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: none;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}

.plateforme-title em {
  font-style: normal;
  color: var(--color-brand-text);
}

.plateforme-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  letter-spacing: normal;
  color: var(--color-muted);
  margin: 0;
}

.plateforme-illu {
  margin: var(--space-4) 0 var(--space-2);
  text-align: center;
}

.plateforme-illu img {
  display: inline-block;
  width: 100%;
  height: auto;
}

.plateforme-cta {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.plateforme-btn {
  /* Deliberate deviation: the UA button-default font stack (no Roboto) is
     kept as var(--font-ui) rather than reintroduced literally. */
  display: block;
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-0);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  text-align: center;
}

.plateforme-btn--primary {
  background: var(--color-brand);
  color: var(--color-ink);
  border: 1px solid var(--color-brand);
  box-shadow: var(--shadow-md);
}

.plateforme-btn--ghost {
  background: var(--white);
  color: var(--color-ink);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-md);
}

/* ---------- Pillars table ----------
   This component ships as its own real HTML <table> — one <tr> per pillar,
   a blue <th> (key + title) and a <td> (subtitle + a flex-wrap feature list). */

.pillars-table {
  font-family: var(--font-ui);
  background: var(--white);
  margin-left: var(--space-6);
}

.pillars-table-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-12) var(--space-6) var(--space-5);
}

.pillars-table-head {
  margin: 0 0 var(--space-4);
}

.pillars-table-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-18);
  font-weight: var(--weight-900);
  line-height: 21.6px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}

.pillars-table-sub {
  margin: 0;
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.pillars-grid {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--text-14);
  color: var(--color-ink);
  border: none;
}

.pillars-grid th,
.pillars-grid td {
  border: none;
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.pillars-grid tbody tr {
  border-bottom: 1px solid var(--teal-a10);
}

.pillars-grid tbody tr:last-child {
  border-bottom: none;
}

.pillars-grid th {
  /* Fixed key column width. */
  width: 260px;
  background: var(--color-brand);
  color: var(--color-ink);
  text-align: left;
  font-weight: var(--weight-900);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps);
  border-right: 1px solid transparent;
}

.pillar-key {
  /* No opacity here: `.pillars-grid th` sets ink text on the --color-brand
     background (brand cyan primitives are untouchable, so contrast is fixed
     on the text side) — an opacity on this text would only reduce that
     contrast margin again, so it must not come back. */
  display: block;
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  line-height: normal;
}

.pillar-title {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-16);
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-900);
}

.pillar-sub {
  margin: 0 0 var(--space-1);
  font-size: var(--text-16);
  font-weight: var(--weight-600);
  line-height: 26px;
  color: var(--color-muted);
}

.pillar-list {
  /* flex-wrap, not a vertical stack: some short features sit side by side. */
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}

.pillar-list li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-14);
  font-weight: var(--weight-600);
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.pillar-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
  line-height: 1;
}

/* ---------- Hype panel ---------- */

.plateforme-side {
  /* Plain block wrapper so the pillars table and the hype panel stack inside
     the single grid column instead of becoming two separate grid items. */
  min-width: 0;
}

.plateforme-hype {
  margin: var(--space-5) 0 0 var(--space-10);
  padding: var(--space-4);
  border: 1px solid var(--teal-a12);
  background: var(--white);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-0);
  box-sizing: border-box;
  font-family: var(--font-ui);
  color: var(--color-ink);
}

.plateforme-hype-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.plateforme-hype-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.plateforme-hype-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 22.4px;
  color: var(--color-muted);
}

.plateforme-hype-icon {
  margin-top: 0;
  color: var(--color-brand-text);
  flex-shrink: 0;
}

.plateforme-hype-stack {
  margin-top: var(--space-1);
  display: grid;
  gap: var(--space-2);
}

.plateforme-hype-card {
  border: 1px solid var(--teal-a12);
  border-radius: var(--radius-0);
  background: var(--white);
  padding: var(--space-2);
}

.plateforme-hype-card h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: 13.2px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.plateforme-hype-card p {
  margin: 0;
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .plateforme-inner {
    grid-template-columns: 1fr;
  }

  .pillars-table {
    margin-left: 0;
  }

  .plateforme-hype {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .pillars-grid th,
  .pillars-grid td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-right: none;
  }

  .pillars-grid th {
    border-bottom: 1px solid transparent;
  }
}
.engagements {
  background: var(--white);
  padding: var(--space-20) 0 var(--space-16);
}

.engagements-inner {
  /* justify-content: center compensates for the fixed-width tracks not
     stretching to fill the wider container (1200px originally, now
     var(--container) at 1170px). */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 420px 696px;
  justify-content: center;
  gap: var(--space-10);
  /* Grid children do not stretch to equal height: the right column is
     vertically centered against the taller left column, not top-aligned. */
  align-items: start;
}

/* ---------- Left column ---------- */

.engagements-eyebrow {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.engagements-title {
  font-family: var(--font-heading);
  font-size: var(--text-32);
  font-weight: var(--weight-900);
  line-height: 36.8px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.engagements-title strong {
  font-weight: var(--weight-600);
  color: var(--color-brand-text);
}

.engagements-lead {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.engagements-lead strong {
  font-weight: var(--weight-600);
  color: var(--color-brand-text);
}

.engagements-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-2) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-md);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
}

.engagements-reassure {
  /* Dashed top divider separating it from the CTA above. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) 0 0;
  border-top: 1px dashed var(--teal-a12);
}

.engagements-adelaide-link {
  display: block;
  width: 100%;
}

.engagements-adelaide-link img {
  width: 100%;
  height: 62px;
  object-fit: contain;
  object-position: 0% 50%;
  display: block;
}

.engagements-reassure-text {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0;
}

.engagements-reassure-text strong {
  font-weight: var(--weight-600);
  color: var(--color-brand-text);
}

/* ---------- Right column ---------- */

.engagements-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-self: center;
}

.engagements-rail {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--teal-a10);
  box-shadow: var(--shadow-lg);
}

.engagements-rail::before {
  /* Gradient accent bar along the card's top edge, anchored at the left
     edge and shrunk to ~60% width. */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand), var(--cyan-a20));
  transform: scaleX(0.6);
  transform-origin: 0 50%;
  opacity: 0.9;
}

.engagements-rail-title {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 18px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.engagements-rail-list {
  /* flex-wrap row with a custom bullet marker, not a stacked vertical list. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.engagements-rail-list li {
  padding-left: var(--space-4);
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.engagements-rail-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
  line-height: 14px;
}

@media (max-width: 900px) {
  .engagements-inner {
    grid-template-columns: 1fr;
  }
}
.blog-preview {
  background: transparent;
  /* Asymmetric left padding so the head/filter/grid block sits further right
     than a purely centered container would. */
  padding: 0 var(--space-3) 0 var(--space-10);
  margin-top: var(--space-6);
}

.blog-preview-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-2) 0 0;
}

/* ---------- Head (badge + H2 + subtitle) ---------- */

.blog-preview-head {
  /* The head row sits in its own sibling container with different
     left/right insets than the grid below it. */
  padding: 0 var(--space-8) 0 var(--space-1);
}

.blog-preview-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.blog-preview-title {
  font-family: var(--font-heading);
  font-size: var(--text-32);
  font-weight: var(--weight-900);
  line-height: 36.8px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.blog-preview-title em {
  font-style: normal;
  color: var(--color-brand-text);
}

.blog-preview-head-row {
  /* The subtitle sits in normal flow; the view-all button is pulled up via
     its own negative margin to center against it (see .blog-preview-viewall). */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.blog-preview-subtitle {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  /* Largeur de lecture du chapô, pas un conteneur de layout. */
  max-width: 720px;
  margin: 0;
}

.blog-preview-viewall {
  display: inline-flex;
  align-items: center;
  margin: calc(var(--space-2) * -1) 0;
  gap: var(--space-3);
  flex: none;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--cyan-a45);
  border-radius: var(--radius-0);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: 14px;
  color: var(--color-ink);
  text-decoration: none;
}

.blog-preview-viewall-icon {
  width: 14px;
  height: 14px;
  color: var(--color-ink);
}

/* ---------- Filter bar ---------- */

.blog-preview-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-1);
  list-style: none;
  margin: var(--space-8) 0 var(--space-6);
  padding: 0;
}

.blog-preview-filters li.is-hidden {
  display: none;
}

.blog-preview-filter {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  border: 1px solid var(--teal-a12);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-800);
  line-height: 22.75px;
  color: var(--color-ink);
  background: var(--white);
  cursor: pointer;
}

.blog-preview-filter.is-active {
  border: 1px solid var(--cyan-a45);
  background: var(--surface-50);
}

/* ---------- Card grid ---------- */

.blog-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 379px);
  justify-content: start;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.blog-preview-card {
  background: var(--white);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}

.blog-preview-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.blog-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-preview-body {
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) 0;
}

.blog-preview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
}

.blog-preview-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--surface-100);
  background: var(--color-brand);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-800);
  line-height: normal;
  text-decoration: none;
}

.blog-preview-date {
  display: block;
  padding-top: var(--space-2);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-400);
  line-height: normal;
  color: var(--color-muted);
}

.blog-preview-card-title {
  margin: 0;
  font-size: var(--text-18);
  line-height: 23px;
}

.blog-preview-card-title a {
  display: inline-block;
  padding: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--text-18);
  font-weight: var(--weight-900);
  line-height: 23px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  text-decoration: none;
}

.blog-preview-excerpt {
  margin: 0 0 var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.blog-preview-readmore {
  display: block;
  width: calc(100% + 14px);
  margin: var(--space-6) calc(var(--space-2) * -1) var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--cyan-a45);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-800);
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}

/* ---------- Pagination ---------- */

.blog-preview-pagination {
  margin: var(--space-6) 0 0;
  text-align: center;
}

.blog-preview-loadmore {
  display: inline-block;
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--cyan-a45);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: normal;
  color: var(--color-ink);
  text-decoration: none;
}

.blog-preview-finish.is-hidden {
  display: none;
}

@media (max-width: 900px) {
  .blog-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .blog-preview {
    /* Desktop-only asymmetric gutter; revert to a plain symmetric one on narrow screens. */
    padding: 0 var(--space-3);
  }

  .blog-preview-head {
    padding: 0;
  }

  .blog-preview-grid {
    grid-template-columns: 1fr;
  }

  .blog-preview-head-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
.temoignages {
  /* The root is not viewport-edge-to-edge: it is centered at the same
     effective container width as the other sections. */
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-20) 0 var(--space-20);
  background: var(--white);
  overflow: hidden;
}

.temoignages::before {
  /* Large soft cyan radial-glow decoration anchored bottom-right, mostly
     clipped by the section's own overflow:hidden. */
  content: "";
  position: absolute;
  inset: auto -120px -160px auto;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at 30% 0, var(--cyan-a20), transparent 60%);
  opacity: 0.9;
  pointer-events: none;
}

.temoignages-inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  z-index: 1;
}

/* ---------- Head ---------- */

.temoignages-head {
  /* Largeur de lecture du titre de section, pas un conteneur de layout. */
  max-width: 720px;
  margin: 0 0 var(--space-8);
}

.temoignages-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
  background: var(--cyan-a10);
  border-radius: var(--radius-pill);
}

.temoignages-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-display-sm);
  line-height: 1.2;
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.temoignages-title em {
  font-style: normal;
  color: var(--color-brand-text);
}

.temoignages-lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  color: var(--color-muted);
  max-width: 52ch;
}

/* ---------- Carousel ---------- */

.temoignages-carousel {
  margin-top: var(--space-8);
  position: relative;
}

/* Hidden radio inputs drive the CSS-only carousel state — no JS. */
.temoignages-slide-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.temoignages-track-wrapper {
  overflow: hidden;
}

.temoignages-track {
  display: flex;
  gap: var(--space-5);
  transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
  will-change: transform;
}

/* Slide position: each step moves the track by one card-width + gap. */
#temoignages-slide-1:checked ~ .temoignages-track-wrapper .temoignages-track {
  transform: translateX(0);
}

#temoignages-slide-2:checked ~ .temoignages-track-wrapper .temoignages-track {
  transform: translateX(-800px);
}

#temoignages-slide-3:checked ~ .temoignages-track-wrapper .temoignages-track {
  transform: translateX(-1600px);
}

#temoignages-slide-4:checked ~ .temoignages-track-wrapper .temoignages-track {
  transform: translateX(-2400px);
}

.temoignages-card {
  position: relative;
  flex: 0 0 100%;
  max-width: var(--container-text);
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--teal-a10);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-12);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.temoignages-card::before {
  /* Thin gradient accent bar across the top of each card. */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand), var(--cyan-a20));
  opacity: 0.85;
  transform: scaleX(0.45);
  transform-origin: left center;
}

.temoignages-name {
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
}

.temoignages-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  color: var(--color-ink-soft);
}

/* ---------- Dots ---------- */

.temoignages-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.temoignages-dot {
  /* Rendered as a <label> (radio picker) instead of a <button>. */
  display: block;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  border: 0;
  padding: 0;
  background: var(--cyan-a20);
  cursor: pointer;
  transition:
    background 0.25s,
    transform 0.25s,
    width 0.25s;
}

/* Active dot. */
#temoignages-slide-1:checked ~ .temoignages-dots label[for="temoignages-slide-1"],
#temoignages-slide-2:checked ~ .temoignages-dots label[for="temoignages-slide-2"],
#temoignages-slide-3:checked ~ .temoignages-dots label[for="temoignages-slide-3"],
#temoignages-slide-4:checked ~ .temoignages-dots label[for="temoignages-slide-4"] {
  width: 22px;
  background: var(--color-brand);
  transform: translateY(-1px);
}

/* ---------- Prev/Next nav ---------- */

.temoignages-nav {
  position: absolute;
  inset: auto 24px -6px auto;
  display: flex;
  gap: var(--space-2);
}

.temoignages-nav-btn {
  /* Rendered as a <label> (radio picker) rather than a <button>. Hidden by
     default; only the pair matching the active slide is shown below. */
  display: none;
  appearance: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  border: 1px solid var(--cyan-a26);
  background: var(--white);
  padding: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-700);
  line-height: normal;
  color: var(--color-ink);
  align-items: center;
  gap: var(--space-1);
  box-shadow: var(--shadow-md);
}

#temoignages-slide-1:checked ~ .temoignages-nav .temoignages-nav-btn[data-slide="1"],
#temoignages-slide-2:checked ~ .temoignages-nav .temoignages-nav-btn[data-slide="2"],
#temoignages-slide-3:checked ~ .temoignages-nav .temoignages-nav-btn[data-slide="3"],
#temoignages-slide-4:checked ~ .temoignages-nav .temoignages-nav-btn[data-slide="4"] {
  display: inline-flex;
}

@media (max-width: 640px) {
  .temoignages-nav {
    inset: auto 16px -4px auto;
  }

  .temoignages-card {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
}
.contact-block {
  background: linear-gradient(var(--white), var(--white));
  padding: var(--space-20) 0 var(--space-20);
}

.contact-inner {
  /* justify-content: center compensates for the fixed-width tracks not
     stretching to fill the wider container (1120px originally sized exactly
     to this content, now var(--container) at 1170px). */
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
  display: grid;
  grid-template-columns: 584px 440px;
  justify-content: center;
  gap: var(--space-12);
  align-items: center;
}

/* ---------- Left column ---------- */

.contact-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.contact-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-36);
  font-weight: var(--weight-900);
  line-height: 40.32px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.contact-title em {
  font-style: normal;
  color: var(--color-brand-text);
}

.contact-lead {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.contact-list {
  /* flex-wrap row with a custom bullet marker, same pattern as
     .engagements-rail-list. */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.contact-list li {
  position: relative;
  padding: 0 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.contact-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
}

.contact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}

.contact-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--color-brand);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
}

.contact-alt {
  /* Rendered as a dashed-underline text link rather than a filled button. */
  display: inline-flex;
  align-items: center;
  padding: 0 0 var(--space-1);
  border-bottom: 1px dashed var(--cyan-a45);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: var(--color-ink-soft);
}

/* ---------- Visual ---------- */

.contact-visual {
  /* CSS background-image box, not an <img> tag. URL comes from the
     --contact-visual-image custom property set inline by
     layouts/partials/home/contact-cta.html (fingerprinted URL). */
  width: 440px;
  height: 340px;
  background: var(--contact-visual-image) center / cover no-repeat;
}

@media (max-width: 900px) {
  .contact-inner {
    grid-template-columns: 1fr;
  }

  .contact-visual {
    width: 100%;
  }
}
.blog-single {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-16);
}

@media (max-width: 1024px) {
  .blog-single {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* ---------- Header (title + cover image, 2-col split) ---------- */

.blog-single-header {
  /* Bottom-aligned 2-column row: text column is flexible, image column is
     fixed so its aspect-ratio crop never changes. */
  display: flex;
  align-items: flex-end;
  gap: 0;
}

.blog-single-header-text {
  box-sizing: border-box;
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
}

.blog-single-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-900);
  line-height: 60.48px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.blog-single-meta {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.blog-single-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-800);
  color: var(--color-muted);
}

.blog-single-meta-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: var(--cyan-a70);
}

/* ---------- Cover image column ---------- */

.blog-single-header-media {
  box-sizing: border-box;
  width: 570px;
  aspect-ratio: 3 / 2;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}

.blog-single-header-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

/* ---------- Content card ---------- */

.blog-single-card {
  margin-top: var(--space-6);
  margin-left: var(--space-3);
  margin-right: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  padding: var(--space-6);
}

.blog-single-card h2,
.blog-single-card h3,
.blog-single-card-lead {
  color: var(--color-muted);
  text-transform: uppercase;
}

.blog-single-card h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 29.28px;
  letter-spacing: var(--letter-spacing-tight);
}

/* .blog-single-card-lead: same rule as h3 on purpose — it is the non-heading
   (<p>) replacement for a leading "###"/"####" statement that some articles
   open with before their first real "##" section (see
   layouts/blog/_markup/render-heading.html); reusing this block keeps the
   visual size identical to the heading it used to be. */
.blog-single-card h3,
.blog-single-card-lead {
  margin: var(--space-6) 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 19.2px;
  letter-spacing: var(--letter-spacing-caps);
}

.blog-single-card p {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink);
}

.blog-single-card strong {
  color: var(--color-brand-text);
  font-weight: var(--weight-600);
}

.blog-single-card ul {
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.blog-single-card li {
  position: relative;
  padding-left: var(--space-5);
  margin: var(--space-2) 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  color: var(--color-ink);
}

.blog-single-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: var(--cyan-a70);
}

/* ---------- Prev/next pager ---------- */

.blog-single-pager {
  margin-top: var(--space-8);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
}

.blog-single-pager-link {
  /* Uses the brand token rather than the browser's default unvisited-link
     blue, as a deliberate choice for this pill's border/text. */
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0;
  border: 1px solid var(--color-brand);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-brand-text);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  text-decoration: none;
}

/* Dedicated :focus-visible style, consistent with every other interactive
   control on the site (same ring as .btn/.site-header__cta). */
.blog-single-pager-link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.blog-single-pager-next {
  justify-content: flex-end;
  text-align: right;
}

.blog-single-pager-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: var(--color-brand);
}

.blog-single-pager-link span {
  display: flex;
  flex-direction: column;
}

.blog-single-pager-next span {
  align-items: flex-end;
}

.blog-single-pager-label {
  font-size: var(--text-11);
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.blog-single-pager-title {
  font-size: var(--text-11);
  font-weight: var(--weight-400);
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-muted);
}

@media (max-width: 900px) {
  .blog-single-header {
    flex-direction: column;
    align-items: stretch;
  }

  .blog-single-header-text,
  .blog-single-header-media {
    width: 100%;
  }

  .blog-single-title {
    font-size: var(--text-36);
    line-height: var(--leading-tight);
  }

  .blog-single-card {
    margin-left: 0;
    margin-right: 0;
    padding: var(--space-5);
  }
}

@media (max-width: 640px) {
  .blog-single-pager {
    flex-direction: column;
  }

  .blog-single-pager-next {
    justify-content: flex-start;
    text-align: left;
  }

  .blog-single-pager-next span {
    align-items: flex-start;
  }
}
/* Two widgets: the archive banner and the quicklinks sidebar. The post
   list/pagination reuse this project's shared list/card conventions. */

/* ---------- Banner ---------- */

.blog-listing-banner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-6);
}

.blog-listing-banner-inner {
  /* Narrower text block inside the banner, not independently centered. */
  max-width: var(--container-text);
  margin: 0;
}

.blog-listing-eyebrow {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}

.blog-listing-heading {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.blog-listing-subtitle {
  /* Largeur de lecture du chapô, pas un conteneur de layout. */
  max-width: 760px;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  color: var(--color-muted);
  margin: 0;
}

.blog-listing-dotline {
  height: 1px;
  margin: var(--space-4) 0 0;
  border: 0 none;
  background-image: radial-gradient(circle, var(--cyan-a45) 1px, transparent 1.6px);
  background-size: 10px 1px;
  opacity: 0.9;
}

/* ---------- Body layout (list column + sidebar column) ---------- */

.blog-listing-body {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-16);
  display: flex;
  align-items: flex-start;
  gap: 0;
}

@media (max-width: 1024px) {
  .blog-listing-body {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

.blog-listing-main {
  /* Flexible column: fills whatever the container leaves once the fixed-width
     sidebar is placed, so the row always stays flush with no leftover gap. */
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--space-5);
  box-sizing: border-box;
}

/* ---------- Post list rows ---------- */

.blog-listing-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.blog-listing-row {
  display: flex;
}

.blog-listing-row-media {
  display: block;
  flex-shrink: 0;
  position: relative;
  width: 184.992px;
  height: 184.992px;
  margin: 0 var(--space-6) 0 0;
  overflow: hidden;
  background: var(--color-surface);
}

.blog-listing-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-0);
}

.blog-listing-row-text {
  min-width: 0;
  flex: 1 1 auto;
}

.blog-listing-row-title {
  margin: 0 0 var(--space-3);
}

.blog-listing-row-title a {
  font-family: var(--font-ui);
  font-size: var(--text-18);
  font-weight: var(--weight-600);
  letter-spacing: normal;
  color: var(--color-brand-text);
  text-decoration: none;
}

.blog-listing-row-date {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-400);
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.blog-listing-row-excerpt {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.blog-listing-row-readmore {
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  color: var(--color-brand-text);
  text-decoration: none;
}

/* ---------- Pagination ---------- */

.blog-listing-pagination {
  display: block;
  width: 100%;
  margin-top: var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  text-align: center;
}

.blog-listing-pagination a {
  display: inline-block;
  margin: 0 var(--space-1);
  color: var(--color-muted);
  text-decoration: none;
}

.blog-listing-pagination a.is-current {
  color: var(--color-brand-text);
}

/* ---------- Sidebar ---------- */

.blog-sidebar {
  width: 379.992px;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .blog-sidebar {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 110px - 18px);
    overflow: auto;
  }
}

.blog-sidebar-card {
  margin: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-5);
  border-radius: var(--radius-16);
  border: 1px solid var(--teal-a12);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  color: var(--color-ink);
  font-family: var(--font-ui);
}

.blog-sidebar-label {
  display: block;
  font-size: var(--text-12);
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}

.blog-sidebar-heading {
  font-size: var(--text-18);
  line-height: var(--leading-snug);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.blog-sidebar-products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-sidebar-products a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-12);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-900);
  color: var(--color-ink);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    color 0.18s ease;
}

.blog-sidebar-products a:hover {
  transform: translateX(6px);
  background: var(--cyan-a06);
  color: var(--color-ink);
}

.blog-sidebar-bullet {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--cyan-a70);
  box-shadow: var(--shadow-brand);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.blog-sidebar-products a:hover .blog-sidebar-bullet {
  transform: scale(1.15);
  box-shadow: var(--shadow-brand);
}

.blog-sidebar-separator {
  height: 1px;
  margin: var(--space-5) 0;
  background: linear-gradient(90deg, var(--cyan-a45), var(--cyan-a06));
}

.blog-sidebar-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.blog-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-16);
  border: 1px solid var(--cyan-a20);
  background: var(--cyan-a06);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.blog-sidebar-link:hover {
  transform: translateY(-1px);
  background: var(--cyan-a10);
  border-color: var(--cyan-a45);
}

.blog-sidebar-link-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-12);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a26);
  font-size: var(--text-16);
  line-height: 1;
}

.blog-sidebar-cta-group {
  display: flex;
  flex-direction: column;
}

.blog-sidebar-cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-8);
  border-radius: var(--radius-16);
  font-family: var(--font-ui);
  font-weight: var(--weight-600);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.blog-sidebar-cta:last-child {
  margin-bottom: 0;
}

.blog-sidebar-cta:hover {
  transform: translateY(-1px);
}

.blog-sidebar-cta.btn--primary {
  background: var(--color-brand);
  border: 1px solid var(--white-a20);
  box-shadow: var(--shadow-brand-lg);
  color: var(--color-ink);
}

.blog-sidebar-cta.btn--outline {
  background: var(--white);
  border: 1px solid var(--teal-a12);
  box-shadow: none;
  color: var(--color-ink);
}

@media (max-width: 900px) {
  .blog-listing-body {
    flex-direction: column;
  }

  .blog-listing-main {
    width: 100%;
    padding-right: 0;
  }

  .blog-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .blog-listing-row {
    flex-wrap: wrap;
  }

  .blog-listing-row-media {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    margin: 0 0 var(--space-4);
  }
}
/* All selectors are prefixed "about-hero-" to avoid colliding with
   home-hero.css's own same-named classes (baseof.html concatenates every
   component's CSS into one global stylesheet with no scoping). */

.about-hero-bg {
  /* Background image lives on this wrapper, not .about-section; tiled
     (not cover-fit) to match the source design. URL comes from the
     --about-hero-bg-image custom property set inline by
     layouts/partials/a-propos/hero.html (fingerprinted URL). */
  max-width: var(--container);
  margin: 0 auto;
  background: var(--about-hero-bg-image) repeat scroll 0% 0%;
}

.about-section {
  display: block;
  padding: var(--space-20) var(--space-6) var(--space-10);
}

.about-hero-inner {
  /* Conteneur tokenisé, unifié avec le reste de la page (décision propriétaire). */
  max-width: var(--container);
  margin: 0;
  display: grid;
  grid-template-columns: 623fr 445fr;
  gap: var(--space-8);
}

.about-hero-main {
  /* flex column so adjacent margins between children don't collapse */
  display: flex;
  flex-direction: column;
}

.about-hero-eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.about-hero-heading {
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-900);
  line-height: 48.4px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.about-hero-heading .hl {
  color: var(--color-brand-text);
}

.about-hero-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-800);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.about-hero-lead {
  /* Own text-wrap cap, narrower than the column; not a layout container. */
  max-width: 585px;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.about-hero-lead .hl {
  font-weight: var(--weight-800);
  color: var(--color-brand-text);
}

.about-hero-products {
  /* Own text-wrap cap, narrower again than the lead; not a layout container. */
  max-width: 548px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-4);
}

.about-hero-products li {
  position: relative;
  padding-left: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink);
}

.about-hero-products li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; /* bullet dot */
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.about-hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.about-hero-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-brand-sm);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
}

.about-hero-cta.is-ghost {
  background: transparent;
  border: 1px dashed var(--teal-a12);
  box-shadow: none;
}

.about-hero-aside {
  /* Empty, aria-hidden decorative spacer column; no background of its own. */
}

@media (max-width: 900px) {
  .about-hero-inner {
    grid-template-columns: 1fr;
  }

  .about-hero-aside {
    display: none;
  }
}
.metier-section {
  /* Sits inside the same centered 1170px row as the other sections on this
     page. */
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-16);
}

.metier-inner {
  /* Fills the section's padded content box; no cap of its own. */
  max-width: none;
}

.metier-kicker {
  /* H2, despite the "kicker" name carried over from the source selector. */
  font-family: var(--font-heading);
  font-size: var(--text-28);
  font-weight: var(--weight-900);
  line-height: 30.8px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin: 0 0 var(--space-3);
}

.metier-title {
  font-family: var(--font-heading);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 32.5px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-5);
}

.metier-p {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-4);
}

.metier-intro,
.metier-last {
  color: var(--color-ink);
}

.metier-link {
  font-weight: var(--weight-800);
  color: var(--color-brand-text);
}

.metier-note .hl,
.metier-ul .hl {
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.metier-cols {
  /* Conteneur de lecture tokenisé (décision propriétaire). */
  max-width: var(--container-text);
  margin: 0 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5) var(--space-12);
}

.metier-ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metier-ul li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24.5px;
  color: var(--color-ink);
}

.metier-ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; /* bullet dot */
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

@media (max-width: 640px) {
  .metier-cols {
    grid-template-columns: 1fr;
  }
}
.fase-partnership {
  /* Native Elementor block, full-bleed — not inset into the shared 1170px
     row the rest of this page's sections sit in. */
  padding: 0 var(--space-3);
}

.fase-inner {
  /* Conteneur tokenisé, unifié avec le reste de la page (décision propriétaire). */
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.fase-logo-link {
  flex: 0 0 auto;
  display: block;
}

.fase-logo-link img {
  width: 360px; /* fixed logo width */
  height: auto;
}

.fase-text {
  margin: 0;
  padding: 0 var(--space-3);
  font-family: var(--font-roboto);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.fase-link {
  color: var(--color-brand-text);
  text-decoration: underline;
}

@media (max-width: 640px) {
  .fase-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }
}
/* Every selector below is scoped under .dune-valeurs (not left as bare class
   names) since baseof.html concatenates every component's CSS globally. */

.dune-valeurs {
  /* Sits inside the same centered 1170px row as every other section on this
     page. */
  max-width: var(--container);
  margin: 0 auto;
  background: var(--white);
  padding: var(--space-16) 0 var(--space-16);
}

.dune-valeurs .inner {
  /* Conteneur tokenisé, unifié avec le reste de la page (décision propriétaire). */
  max-width: var(--container);
  margin: 0;
  padding: 0 var(--space-8);
}

.dune-valeurs .valeurs-head {
  /* Conteneur de lecture tokenisé (décision propriétaire). */
  max-width: var(--container-text);
  margin: 0 0 var(--space-8);
}

.dune-valeurs .eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.dune-valeurs .title {
  font-family: var(--font-heading);
  font-size: var(--text-28);
  font-weight: var(--weight-900);
  line-height: 33.6px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.dune-valeurs .title em {
  font-style: normal;
  color: var(--color-brand-text);
}

.dune-valeurs .lead {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0;
}

.dune-valeurs .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin: 0 0 var(--space-6);
}

.dune-valeurs .card {
  /* flex column so adjacent margins between children don't collapse */
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  padding: var(--space-4) var(--space-5) var(--space-4);
}

.dune-valeurs .card.ethique {
  /* Full-width, sitting below .grid-2, not inside it. */
  margin: 0;
}

.dune-valeurs .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; /* fixed badge size */
  height: 56px;
  border-radius: var(--radius-pill);
  background: var(--cyan-a10);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.dune-valeurs .icon svg {
  width: 24px;
  height: 24px;
}

.dune-valeurs .card-title {
  font-family: var(--font-heading);
  font-size: var(--text-18);
  font-weight: var(--weight-900);
  line-height: 21.6px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.dune-valeurs .p {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-3);
}

.dune-valeurs .p:last-of-type {
  margin-bottom: 0;
}

.dune-valeurs .hl {
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.dune-valeurs .mini-title {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.dune-valeurs .card.ethique .p {
  margin-bottom: var(--space-3);
}

.dune-valeurs .whistle-link {
  color: var(--color-brand-text);
  text-decoration: underline;
  overflow-wrap: break-word;
}

.dune-valeurs .sig {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 64px 1fr; /* fixed badge column */
  gap: var(--space-3);
  background: transparent;
  border: 1px solid var(--cyan-a20);
  border-radius: var(--radius-16);
  padding: var(--space-3) var(--space-4) var(--space-3);
}

.dune-valeurs .sig-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; /* fixed badge size */
  height: 64px;
  border-radius: var(--radius-16);
  background: var(--white);
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-caps);
}

.dune-valeurs .sig-kicker {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin: 0 0 var(--space-1);
}

.dune-valeurs .sig-title {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.dune-valeurs .sig-quote {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.dune-valeurs .sig-actions .cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-900);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

@media (max-width: 900px) {
  .dune-valeurs .grid-2 {
    grid-template-columns: 1fr;
  }

  .dune-valeurs .sig {
    grid-template-columns: 1fr;
  }
}
.about-equipe-row {
  /* Sits inside the same centered 1170px row as every other section on this
     page. */
  max-width: var(--container);
  margin: 0 auto;
}

.team-mix {
  /* Conteneur tokenisé, unifié avec le reste de la page (décision propriétaire). */
  max-width: var(--container);
  margin: 0;
  padding: var(--space-12) var(--space-6) var(--space-16);
}

.team-mix-inner {
  /* Fills the section's padded content box; no cap of its own. */
  max-width: none;
}

.team-mix .eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.team-mix .title {
  font-family: var(--font-heading);
  font-size: var(--text-28);
  font-weight: var(--weight-900);
  line-height: 33.6px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-3);
}

.team-mix .title strong {
  /* Inverted emphasis: lighter and accent-colored, not bolder. */
  font-weight: var(--weight-400);
  color: var(--color-brand-text);
}

.team-mix .lead {
  /* Bold + brand-colored, unlike the muted lead style used elsewhere on
     this page. */
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  color: var(--color-brand-text);
  margin: 0 0 var(--space-4);
}

.story {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-8);
}

.story p {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
  margin: 0;
}

/* ---------- Cards, shared box (leader + team2) ---------- */

.team-mix .card {
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.team-mix .card .photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-16) var(--radius-16) 0 0;
}

.team-mix .card .body {
  padding: var(--space-4) var(--space-5) var(--space-4);
}

.team-mix .name {
  font-family: var(--font-heading);
  font-size: var(--text-14);
  font-weight: var(--weight-900);
  line-height: 18px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
  margin: 0 0 var(--space-1);
}

.team-mix .role {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-3);
}

.team-mix .bio {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.bio-full {
  /* Team2 cards' own bio paragraph, distinct from the leaders' larger
     .bio. max-height + overflow:auto is load-bearing: without it the
     longest bio (Awa Dia's) would blow the fixed-height card open —
     scrolled internally instead, keeping every team2 card the height of
     its own photo. */
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-400);
  line-height: 21.25px;
  color: var(--color-ink-soft);
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-2) 0 0;
  /* net-zero with the tighter .body gap below to keep team2 card height
     closest to the source */
  max-height: 120px;
  overflow: auto;
}

.bio-full::-webkit-scrollbar {
  width: 8px;
}

.bio-full::-webkit-scrollbar-thumb {
  background: var(--teal-a12);
  border-radius: var(--radius-12);
}

.bio-full::-webkit-scrollbar-track {
  background: transparent;
}

.member-contact-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* ---------- Leaders row (3 large cards) ---------- */

.leaders {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
}

.leaders .photo {
  aspect-ratio: 342 / 428; /* leader photo ratio */
}

/* ---------- Team2 rows (4 smaller cards, 2 separate 2-card rows) ---------- */

.team2-rows {
  /* Two separate 2-card row containers, not one 4-item grid. */
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.team2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

.team2-card {
  /* Row layout (photo + body), height set by the photo, not a stretched
     grid column. */
  display: flex;
  align-items: stretch;
}

.team2-card.is-reverse {
  /* Second card of each row mirrors photo-right/text-left. */
  flex-direction: row-reverse;
}

.team2-card .photo {
  flex: 0 0 172px; /* fixed photo column width */
}

.team2-card .photo img {
  /* Rounding comes from the ancestor .card's own radius + overflow:hidden. */
  border-radius: var(--radius-0);
}

.team-mix .card.team2-card .body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}

.team2-card .name,
.team2-card .role {
  margin: 0;
}

.team2-card .member-contact-cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1024px) {
  .leaders {
    grid-template-columns: 1fr;
  }

  .team2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .team2-card {
    grid-template-columns: 1fr;
  }

  .team2-card .photo img {
    border-radius: var(--radius-16) var(--radius-16) 0 0;
  }
}
/* Distinct content/structure from the homepage's own "plateforme" section
   (home-plateforme.css) — different heading, no gradient background, a
   3-pave bottom row instead of a pillars table, so built as its own
   component. Selectors prefixed "about-plateforme-" to avoid colliding with
   home-plateforme.css's own same-named classes (baseof.html concatenates
   every component's CSS globally, with no per-page scoping). */

.about-plateforme-row {
  /* Sits inside the same centered 1170px row as every other section on this
     page. */
  max-width: var(--container);
  margin: 0 auto;
}

.about-plateforme-section {
  background: transparent;
  /* Conteneur tokenisé, unifié avec le reste de la page (décision propriétaire). */
  max-width: var(--container);
  margin: 0;
  padding: var(--space-16) var(--space-6) var(--space-20) 0;
}

.about-plateforme-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin: 0 0 var(--space-10);
}

.about-plateforme-text-col {
  /* flex column so adjacent margins between children don't collapse */
  display: flex;
  flex-direction: column;
}

.about-plateforme-eyebrow {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-2);
  background: var(--cyan-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.about-plateforme-title {
  font-family: var(--font-heading);
  font-size: var(--text-32);
  font-weight: var(--weight-900);
  line-height: 36.72px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.about-plateforme-title span {
  display: block;
}

.about-plateforme-title .accent {
  color: var(--color-brand-text);
}

.about-plateforme-sub {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
  margin: 0 0 var(--space-4);
}

.about-plateforme-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.about-plateforme-text p {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
  margin: 0;
}

.about-plateforme-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-900);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}

.about-plateforme-media-card {
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-brand-lg);
  padding: var(--space-3);
}

.about-plateforme-media-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-8);
}

.about-plateforme-paves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.about-plateforme-pave {
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.about-plateforme-pave-head {
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-900);
  line-height: 14.95px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

.about-plateforme-pave-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.about-plateforme-pave-list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-600);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.about-plateforme-pave-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px; /* bullet dot */
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

@media (max-width: 900px) {
  .about-plateforme-top {
    grid-template-columns: 1fr;
  }

  .about-plateforme-paves {
    grid-template-columns: 1fr;
  }
}
/* ---------- Shared "eyebrow" label — reused by the tarifs, FAQ and benefits blocks.
   Loaded first in baseof.html's CSS concat order, so the shared class lives here. ---------- */
.produit-eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-800);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* ---------- Offre header (badge + H1 + garanties list) ---------- */

.produit-head {
  position: relative;
  min-height: var(--produit-head-min-height, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.produit-head-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(251deg, transparent 33%, var(--white) 84%), var(--produit-head-bg-image, none);
  background-size: cover;
  background-position: 0% 0%;
  background-repeat: no-repeat;
}

.produit-head-container {
  /* width:100% is required alongside max-width+margin:auto: .produit-head is a column
     flex container, and a flex child with auto cross-axis margins but an `auto`
     cross-size opts out of stretch, shrinking to content width instead of the full
     container — width:100% restores the full-width base before max-width/margin:auto
     cap and center it. */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-10) 0 var(--space-4);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .produit-head-container,
  .produit-offre-inner {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

.produit-head-inner {
  /* Narrower left-aligned block inside the shared container, not independently centered. */
  max-width: 714px;
}

.produit-badges {
  margin: 0 0 var(--space-4);
}

.produit-badge {
  display: inline-block;
  background: var(--cyan-a10);
  color: var(--color-ink-soft);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-800);
  line-height: normal;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--cyan-a26);
}

.produit-title {
  /* Both spans (accent + main) share this size/weight/line-height, only color differs. */
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-display);
  font-weight: var(--weight-900);
  line-height: 51.75px;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.produit-title-accent {
  display: block;
  color: var(--color-brand-text);
}

.produit-title-main {
  display: block;
}

.produit-garanties {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.produit-garanties li {
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink);
}

.produit-garanties li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

/* ---------- Intro text + cards column, and the resources sidebar next to it ---------- */

.produit-offre-inner {
  /* display:grid so the sidebar (column 2) can span every row the main-column
     items (cards, optional tarifs, FAQ — all .produit-ress-col-item) occupy via
     `grid-row: 1 / -1` below, without changing their own width/stacking order.
     position:sticky's containing block is this grid row, so it needs the
     column's full real content height, not just the cards alone. */
  max-width: var(--container);
  margin: var(--space-5) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 0 var(--space-12);
  align-items: start;
}

.produit-offre-main {
  grid-column: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* .produit-ress-col-item: shared marker for every column-1 item that sits in the
   sticky sidebar's grid row span (.produit-offre-main, .produit-tarifs, .produit-faq).
   grid-column:1 places each in the left track; grid-row stays `auto` so presence is
   naturally conditional (Police Chantiers has no tarifs block). */
.produit-ress-col-item {
  grid-column: 1;
}

.produit-cibles {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-800);
  line-height: 17.55px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-cibles-sep {
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
  line-height: 1;
}

.produit-intro {
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.produit-intro p {
  margin: 0;
}

.produit-intro strong {
  /* Recolored, not bolded — the front matter's intro Markdown uses **term** for these
     highlighted terms. */
  color: var(--color-brand-text);
  font-weight: inherit;
}

@media (max-width: 900px) {
  .produit-offre-inner {
    /* Every child is already grid-column:1 at this width, so this alone collapses
       them to a plain DOM-order vertical stack. */
    grid-template-columns: 1fr;
  }
}
/* 3 avantages cards. Police Chantiers: 2-column grid, card 3 spans both rows in
   column 2. travaux-de-copropriete-multirisques' card 3 carries a real
   `produit-card--full` modifier instead, spanning the full row below the other two —
   different layout, opposite grid placement, so the two rules coexist rather than
   fighting over the same selector. */

.produit-cards {
  /* Card 1/2 stack in column 1 (rows sized to their own content); card 3 explicitly
     spans both rows in column 2, top-aligned. Reproduced positionally via nth-child
     since front matter's `cards` array is already ordered to match. */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row;
  gap: var(--space-6);
  margin-top: var(--space-12);
}

.produit-card:nth-child(3):not(.produit-card--full) {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
}

.produit-card--full {
  /* Spans both grid columns; natural row-flow already places it below the first two
     cards without needing an explicit grid-row. */
  grid-column: 1 / -1;
}

.produit-card {
  /* A flex row of 2 children: a decorative gradient accent strip, then the text body
     (title + list) stacked in a column. */
  display: flex;
  gap: var(--space-4);
  background: var(--white);
  color: var(--color-ink);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--radius-12);
  border: 1px solid var(--cyan-a26);
  box-shadow: var(--shadow-brand-sm);
  transition:
    transform 0.22s,
    box-shadow 0.22s,
    border-color 0.22s;
}

.produit-card:hover,
.produit-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-brand-lg);
  border-color: var(--cyan-a45);
}

.produit-card-strip {
  flex-shrink: 0;
  width: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(var(--color-brand), var(--cyan-a20));
  transition:
    filter 0.22s,
    opacity 0.22s;
}

.produit-card:hover .produit-card-strip,
.produit-card:focus-within .produit-card-strip {
  filter: saturate(1.15);
  opacity: 1;
}

.produit-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.produit-card h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-24);
  font-weight: var(--weight-800);
  line-height: 28.8px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-card ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.produit-card li {
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24.5px;
  color: var(--color-muted);
}

.produit-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

@media (max-width: 640px) {
  .produit-cards {
    grid-template-columns: 1fr;
  }

  /* Without this reset, the 3rd card's unconditional grid-column:2 (above) forces an
     implicit 2nd column under the 1-column mobile layout instead of stacking all 3. */
  .produit-card:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
    align-self: auto;
  }
}
.produit-ress {
  /* Fixed width, never shrinks. grid-column:2 places it in .produit-offre-inner's
     right track. */
  grid-column: 2;
  width: 296px;
}

@media (min-width: 901px) {
  .produit-ress {
    /* grid-row: 1 / -1: spans every row column 1 occupies (.produit-offre-main, the
       optional tarifs block, and the FAQ section — all .produit-ress-col-item, all
       grid-column:1, auto-placed into successive rows — see produits-header.css), so
       this element's sticky containing block is their combined real height, not just
       .produit-offre-main alone. align-self:start keeps it pinned to the top of that
       span instead of the grid's default stretch.
       top:110px matches this project's other sticky sidebar (.blog-sidebar,
       blog-list.css) — clears the fixed header plus breathing room. */
    position: sticky;
    top: 110px;
    grid-row: 1 / -1;
    align-self: start;
  }
}

.produit-ress-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--white);
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  padding: var(--space-4);
  border-radius: var(--radius-16);
  border: 1px solid var(--cyan-a20);
  box-shadow: var(--shadow-brand-sm);
}

.produit-ress-title {
  margin: 0;
}

.produit-ress-title-main {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-18);
  font-weight: var(--weight-900);
  line-height: 23.4px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.produit-ress-title-line {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: 18.2px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}

.produit-ress-sub {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.produit-ress-sub strong {
  font-weight: var(--weight-700);
  color: var(--color-ink);
}

.produit-ress-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.produit-ress-btn {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-8);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.produit-ress-btn-label {
  font-size: var(--text-13);
  font-weight: var(--weight-700);
  /* Live computes `normal` here (Inter's tight natural metric), not the ambient body
     line-height scale — omitting it renders every button noticeably taller. */
  line-height: normal;
}

.produit-ress-btn-hint {
  margin: var(--space-1) 0 0;
  font-size: var(--text-11);
  font-weight: var(--weight-400);
  line-height: normal;
}

.produit-ress-btn--primary {
  background: var(--color-brand);
  color: var(--color-ink);
  font-weight: var(--weight-600);
  border: 1px solid var(--color-brand);
  box-shadow: var(--shadow-brand);
}

.produit-ress-btn--primary:hover {
  background: var(--color-brand-hover);
  border-color: var(--color-brand-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-strong);
}

.produit-ress-btn--primary .produit-ress-btn-label,
.produit-ress-btn--primary .produit-ress-btn-hint {
  color: var(--color-ink);
}

.produit-ress-btn--primary:hover .produit-ress-btn-label,
.produit-ress-btn--primary:hover .produit-ress-btn-hint {
  /* Texte blanc au survol : le libellé/l'indice héritent d'une règle propre en
     temps normal (color: var(--color-ink) ci-dessus), qui ne céderait pas devant
     un simple color sur le parent :hover — il faut les cibler explicitement. */
  color: var(--white);
}

.produit-ress-btn--ghost {
  background: var(--surface-50);
  color: var(--color-ink);
  font-weight: var(--weight-600);
  border: 1px solid var(--cyan-a26);
  box-shadow: none;
}

.produit-ress-btn--ghost:hover {
  background: var(--cyan-a06);
  border-color: var(--cyan-a45);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-strong);
}

.produit-ress-btn--ghost .produit-ress-btn-label {
  color: var(--color-ink);
}

.produit-ress-btn--ghost .produit-ress-btn-hint {
  color: var(--color-muted);
}

.produit-ress-btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .produit-ress {
    /* .produit-offre-inner collapses to a single grid column below 900px — grid-row:
       auto (was the desktop `1 / -1` span, meaningless in a single column) lets this
       item fall into normal DOM-order stacking. */
    grid-column: 1;
    grid-row: auto;
    width: 100%;
  }
}
/* Live's own accordion is a class-toggle (max-height 0 → 400px); this template uses
   native <details>/<summary> instead — a sufficient CSS-only equivalent. */

.produit-faq {
  max-width: var(--container);
  margin: var(--space-12) auto 0;
}

.produit-faq-inner {
  /* Largeur de lecture des blocs FAQ et tarifs (dimension de composant, pas un
     conteneur de layout — inset depuis le bord gauche du conteneur partagé,
     appliqué inconditionnellement, pas seulement sous un breakpoint de gouttière). */
  max-width: 820px;
  padding: var(--space-8) var(--space-5) var(--space-10);
}

@media (max-width: 1024px) {
  .produit-faq-inner {
    /* .produit-faq is nested inside .produit-offre-inner, which already gains its
       own horizontal padding below this width (produits-header.css) — zeroing this
       rule's own padding here lets the parent's take over instead of doubling it. */
    padding-left: 0;
    padding-right: 0;
  }
}

.produit-faq-header {
  margin: 0 0 var(--space-5);
}

.produit-faq-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 31.2px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-faq-list {
  display: flex;
  flex-direction: column;
}

.produit-faq-item {
  border-bottom: 1px solid var(--color-line);
}

.produit-faq-item:first-child {
  border-top: 1px solid var(--color-line);
}

.produit-faq-question {
  /* A <button>, reproduced here as <summary> (the disclosure triangle default marker
     is hidden below in favor of the "+"/"×" icon live also uses). */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: 0;
  cursor: pointer;
  list-style: none;
}

.produit-faq-question::-webkit-details-marker {
  display: none;
}

.produit-faq-question:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.produit-faq-question-text {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-600);
  line-height: 26.25px;
  color: var(--color-ink);
}

.produit-faq-icon {
  /* A literal "+" glyph inside a circular outline, rotated 45° on open (details[open])
     to read as "×" — a low-risk disclosure affordance, not a literal live mechanism. */
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  color: var(--color-ink);
  transition:
    transform 0.2s,
    border-color 0.2s;
}

.produit-faq-icon::before {
  content: "+";
}

details[open] .produit-faq-icon {
  transform: rotate(45deg);
}

.produit-faq-answer {
  padding: 0 0 var(--space-4);
}

.produit-faq-answer-inner {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  line-height: 24.5px;
  color: var(--color-ink);
}

.produit-faq-answer-inner p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.produit-faq-answer-inner ul {
  margin: 0 0 var(--space-2);
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.produit-faq-answer-inner li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-16);
  line-height: 26px;
  color: var(--color-muted);
}

.produit-faq-answer-inner li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.produit-faq-answer-inner strong {
  color: var(--color-ink);
  font-weight: var(--weight-700);
}
/* Shared eyebrow class reused here (see produits-header.css's .produit-eyebrow) —
   everything else below (table borders, cell colors/padding, the mobile card layout)
   is this section's own. */

.produit-tarifs {
  max-width: var(--container);
  margin: var(--space-16) auto 0;
}

.produit-tarifs-inner {
  /* Largeur de lecture des blocs FAQ et tarifs (dimension de composant, pas un
     conteneur de layout — flush au bord gauche du conteneur partagé, pas centré ;
     ~redondant avec la largeur de la colonne de grille une fois ce bloc imbriqué
     dans .produit-offre-inner, gardé comme plafond dur si la grille change). */
  max-width: 820px;
  margin: 0;
}

.produit-tarifs-header {
  margin: 0 0 var(--space-2);
}

.produit-tarifs-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-20);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-tarifs-table-wrap {
  /* Defensive no-op at every width this template actually uses it at (the table
     switches to a stacked-card layout below 900px instead — see the media query
     below), kept only as a safety net against unexpected overflow. */
  overflow-x: auto;
}

.produit-tarifs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  color: var(--color-ink);
}

.produit-tarifs-table th,
.produit-tarifs-table td {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  vertical-align: middle;
  line-height: var(--leading-snug);
}

.produit-tarifs-table thead th {
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-ink);
}

.produit-tarifs-table thead th:first-child {
  /* Needs its own rule at higher specificity than the generic first-child rule below:
     this column's header cell is still a 12px uppercase label like its siblings —
     only the BODY cells in this column get the bigger white-on-brand treatment. */
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  text-align: left;
}

.produit-tarifs-table tbody td:nth-child(2),
.produit-tarifs-table tbody td:nth-child(3) {
  background: var(--white);
  color: var(--color-ink);
  font-size: var(--text-14);
  font-weight: var(--weight-600);
  text-align: center;
}

.produit-tarifs-table th:first-child,
.produit-tarifs-table td:first-child {
  /* The "Coût des travaux" bracket column, always solid brand-cyan; ink text
     (a11y fix round: brand cyan is untouchable, so contrast is fixed on the
     text side rather than white-on-cyan). */
  background: var(--color-brand);
  color: var(--color-ink);
  font-weight: var(--weight-600);
  font-size: var(--text-14);
  width: 22%;
}

.produit-tarifs-table tr + tr td {
  /* 1px row separator, absent above the first row. */
  border-top: 1px solid var(--cyan-a70);
}

.produit-tarifs-table td strong {
  /* Bolds the numeric lead of each "Parties communes"/"Parties privatives" cell (the
     whole cell for flat-fee brackets, just the percentage-rate sentence for the
     percentage-based brackets). */
  font-weight: var(--weight-800);
  color: var(--color-ink);
}

@media (hover: hover) and (pointer: fine) {
  .produit-tarifs-table tbody tr:hover td {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .produit-tarifs-table tbody tr:hover td:first-child {
    background: var(--color-brand-hover);
    color: var(--white);
  }

  .produit-tarifs-table tbody tr:hover td:nth-child(2),
  .produit-tarifs-table tbody tr:hover td:nth-child(3) {
    background: var(--cyan-a06);
    box-shadow: var(--shadow-brand);
    transform: translateY(-2px);
    z-index: 1;
  }
}

@media (max-width: 900px) {
  /* The table collapses to one stacked "card" per row, column headers replaced by a
     `content: attr(data-label)` pseudo-label ahead of the 2nd/3rd column's value (the
     1st column needs none — it's always visible as the row's own heading).
     single.html threads each cell's own column header through as a real `data-label`
     attribute for this. */
  .produit-tarifs-title {
    font-size: var(--text-18);
  }

  .produit-tarifs-table,
  .produit-tarifs-table thead,
  .produit-tarifs-table tbody,
  .produit-tarifs-table th,
  .produit-tarifs-table td,
  .produit-tarifs-table tr {
    display: block;
    width: 100%;
  }

  .produit-tarifs-table thead {
    display: none;
  }

  .produit-tarifs-table tbody tr {
    margin: 0 0 var(--space-4);
    border: 1px solid var(--cyan-a26);
    border-radius: var(--radius-12);
    overflow: hidden;
    box-shadow: var(--shadow-brand-sm);
  }

  .produit-tarifs-table td {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--cyan-a20);
    background: var(--white);
    text-align: left;
  }

  .produit-tarifs-table td:first-child {
    width: 100%;
    border-top: none;
    font-size: var(--text-14);
    padding: var(--space-3) var(--space-4);
    background: var(--color-brand);
    color: var(--color-ink);
  }

  .produit-tarifs-table td:nth-child(2)::before,
  .produit-tarifs-table td:nth-child(3)::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-nav);
    font-weight: var(--weight-800);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-1);
  }
}
.produit-benefits {
  max-width: var(--container);
  margin: var(--space-12) auto 0;
  padding: var(--space-6) 0 var(--space-8);
}

@media (max-width: 1024px) {
  .produit-benefits {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

.produit-benefits-layout {
  /* Single-row 4-column grid: intro column (≈0.82fr) + 3 equal benefit cards, ratio
     rather than literal px so it holds at any container width. */
  display: grid;
  grid-template-columns: 0.82fr 1fr 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}

.produit-benefits-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.produit-benefits-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 31.2px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-benefits-title em {
  /* Not italic, recolored brand cyan — bolder than the rest of the (already-900) title. */
  font-style: normal;
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.produit-benefits-lead {
  margin: var(--space-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.produit-benefits-cta-wrap {
  margin-top: var(--space-1);
}

.produit-benefits-cta {
  /* Base .btn.btn--primary (buttons.css) covers background/color/radius/uppercase;
     these override the few properties that measure differently here. */
  padding: var(--space-2) var(--space-5);
  letter-spacing: var(--letter-spacing-caps);
  box-shadow: var(--shadow-brand-strong);
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.produit-benefits-cta:hover {
  background: var(--color-brand-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-strong);
}

.produit-benefit {
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  transition:
    transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1),
    box-shadow 0.25s,
    border-color 0.25s,
    background 0.25s;
}

.produit-benefit:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-brand-lg);
  border-color: var(--cyan-a26);
  background: var(--white);
}

.produit-benefit-eyebrow {
  /* Overrides the shared .produit-eyebrow's letter-spacing/margin — this sub-block
     eyebrow measures wider than the tarifs/FAQ/benefits-head eyebrows. */
  letter-spacing: var(--letter-spacing-nav);
  margin-bottom: var(--space-3);
}

.produit-benefit-title {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 20.4px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.produit-benefit-list {
  margin: var(--space-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.produit-benefit-list li {
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.produit-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11.2px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

@media (max-width: 1024px) {
  .produit-benefits-layout {
    grid-template-columns: 1fr;
  }
}
.produit-nav {
  /* Combined margin-top (component margin + the wrapper gap live doesn't expose
     independently here), not a literal shared constant with the other sections' gaps. */
  max-width: var(--container);
  margin: var(--space-20) auto 0;
  padding: var(--space-6) 0 var(--space-4);
  border-top: 1px solid var(--color-line);
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .produit-nav {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

@media (max-width: 640px) {
  .produit-nav {
    margin-top: var(--space-6);
  }
}

.produit-nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.produit-nav-label {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-nav);
  line-height: 26px;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.produit-nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.produit-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--cyan-a45);
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-600);
  line-height: 22.75px;
  text-decoration: none;
  color: var(--color-ink);
  background: var(--white);
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.produit-nav-link:hover {
  background: var(--color-brand);
  color: var(--color-ink);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-brand-strong);
  transform: translateY(-1px);
}

.produit-nav-link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.produit-nav-link.is-current {
  background: var(--color-brand);
  color: var(--color-ink);
  border-color: var(--color-brand);
  box-shadow: var(--shadow-brand-strong);
  cursor: default;
  pointer-events: none;
}
/* Shared wrap/section/CTA rules reused by every La Plateforme section below the
   hero (paves, comparison-avant, comparison-apres, comment-ca-marche, produits,
   cta-band) — the hero is its own separate root, see la-plateforme-hero.css. */

.lp-page-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-20);
}

@media (max-width: 900px) {
  .lp-page-wrap {
    padding: var(--space-12) var(--space-6) var(--space-16);
  }
}

.lp-hl {
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
}

.lp-p {
  margin: 0;
  font-size: var(--text-14);
  line-height: 1.9;
  color: var(--color-ink-soft);
  font-family: var(--font-ui);
}

.lp-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.lp-h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-20);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  line-height: 24px;
  color: var(--color-ink);
}

/* Shared CTA pill — used by both the hero (2 CTAs) and the closing cta-band
   (4 CTAs, including the is-solid variant which the hero never uses). */
.lp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lp-cta {
  /* padding is set per host (hero / cta-band): each widget measures its own
     value, see la-plateforme-hero.css / la-plateforme-cta-band.css. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  font-size: var(--text-13);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps-wide);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-brand-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    border-color 0.25s;
}

.lp-cta:hover {
  transform: translateY(-2px);
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}

.lp-cta:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lp-cta--ghost {
  /* border-color alpha is set per host — see la-plateforme-hero.css /
     la-plateforme-cta-band.css. */
  border-style: dashed;
  box-shadow: none;
  background: transparent;
}

.lp-cta--ghost:hover {
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}

/* cta-band's most prominent CTA only — the hero never uses this variant. */
.lp-cta--solid {
  background: linear-gradient(135deg, var(--cyan-a20), var(--cyan-a06));
  border-color: var(--cyan-a70);
}
/* Hero is its own root (not .lp-page-wrap), with its own wrap padding and CTA
   sizing — see la-plateforme-shared.css for the CTA pill base rules it extends. */

.lp-hero .lp-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-12);
}

@media (max-width: 900px) {
  .lp-hero .lp-wrap {
    padding: var(--space-16) var(--space-6) var(--space-8);
  }
}

.lp-hero-grid {
  /* Left column slightly wider than the media column. */
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 900px) {
  .lp-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.lp-hero .lp-cta {
  padding: var(--space-2) var(--space-3);
}

.lp-hero .lp-cta--ghost {
  border-color: var(--teal-a12);
}

.lp-kicker {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--cyan-a10);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.lp-h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-display);
  line-height: 1.08;
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.lp-sub {
  margin: 0 0 var(--space-3);
  max-width: 72ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.lp-hero-p {
  max-width: 86ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.lp-hero-cta-row {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.lp-media {
  position: relative;
}

.lp-media-card {
  /* Fixed media-box size, not a layout container. */
  position: relative;
  max-width: 520px;
  padding: var(--space-2);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-brand-lg);
  overflow: hidden;
}

.lp-media-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, var(--cyan-a20), transparent 60%);
  pointer-events: none;
}

.lp-media-inner {
  position: relative;
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--surface-100);
}

.lp-media-inner img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-media-cap {
  position: absolute;
  right: 12px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--teal-a92);
  border: 1px solid var(--cyan-a45);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--white);
}

.lp-media-cap::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
  flex: 0 0 8px;
}

.lp-badge-carousel {
  /* Fixed media-box size, not a layout container. */
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 46px;
  margin-top: var(--space-3);
}

/* Static equivalent of an auto-rotating badge carousel: all badges are in
   the DOM, only the first is marked is-active. */
.lp-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--white);
  border: 1px solid var(--teal-a12);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-ink-soft);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

.lp-badge.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.lp-badge-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.lp-badge-dots {
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.lp-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-a12);
  background: var(--cyan-a10);
  opacity: 0.7;
}

.lp-dot.is-active {
  background: var(--color-brand);
  border-color: var(--cyan-a26);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-badge {
    transition: none !important;
    transform: none !important;
  }
}
/* Three pillar cards, equal-width row collapsing to a single column on mobile. */

.lp-paves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

@media (max-width: 900px) {
  .lp-paves {
    grid-template-columns: 1fr;
  }
}

.lp-pave {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.lp-pave:hover {
  border-color: var(--cyan-a26);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.lp-pave::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cyan-a70), var(--cyan-a20));
  opacity: 0.95;
  transform-origin: top;
  transform: scaleY(0.55);
  transition:
    transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.35s ease;
}

.lp-pave:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.lp-pave-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}

.lp-pave-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}
/* Shared between comparison-avant and comparison-apres — the two sections are
   near-identical, differentiated only by the is-bad/is-good modifier classes.
   "Good" reuses the brand cyan (no separate green token in the system); "bad"
   uses the negative red tokens added to tokens.css for this page. Bullet icons
   are inline SVG data-URIs on ::before (their embedded stroke colour is asset
   content, not a CSS color declaration, so it stays as authored). */

.lp-compare-cap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

.lp-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--teal-a10);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
}

.lp-flag::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.lp-flag.is-bad {
  color: var(--color-negative);
  background: var(--color-negative-soft);
  border-color: var(--color-negative-line);
}

.lp-flag.is-bad::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23D94B4B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lp-flag.is-good {
  color: var(--color-positive);
  background: var(--color-positive-soft);
  border-color: var(--cyan-a26);
}

.lp-flag.is-good::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' stroke='%232BB673' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-compare-intro {
  max-width: 85ch;
}

.lp-compare-panel {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-16);
  border: 1px solid var(--teal-a10);
  background: linear-gradient(135deg, var(--cyan-a06), transparent);
}

.lp-compare-panel.is-before {
  border-color: var(--color-negative-line);
  background: linear-gradient(135deg, var(--color-negative-soft), transparent);
}

.lp-compare-panel.is-after {
  margin-top: var(--space-4);
  border-color: var(--cyan-a20);
  background: linear-gradient(135deg, var(--color-positive-soft), transparent);
}

.lp-grid-3 {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .lp-grid-3 {
    grid-template-columns: 1fr;
  }
}

.lp-compare-panel .lp-grid-3 {
  margin-top: 0;
}

.lp-box {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.lp-box > * {
  position: relative;
}

.lp-box::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.8;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, var(--cyan-a10), transparent 60%);
}

.lp-box::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  opacity: 0.95;
  pointer-events: none;
  background: linear-gradient(90deg, var(--cyan-a70), var(--cyan-a10));
}

.lp-box.is-bad {
  border-color: var(--color-negative-line);
}

.lp-box.is-bad::before {
  background: radial-gradient(circle at 0% 0%, var(--color-negative-soft), transparent 60%);
}

.lp-box.is-bad::after {
  background: linear-gradient(90deg, var(--color-negative), var(--color-negative-soft));
}

.lp-box.is-good {
  border-color: var(--cyan-a20);
}

.lp-box.is-good::before {
  background: radial-gradient(circle at 0% 0%, var(--cyan-a10), transparent 60%);
}

.lp-box.is-good::after {
  background: linear-gradient(90deg, var(--cyan-a70), var(--cyan-a20));
}

.lp-box-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-14);
  font-weight: var(--weight-900);
  line-height: 16.8px;
  letter-spacing: normal;
  color: var(--color-ink);
}

.lp-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-list li {
  position: relative;
  padding-left: var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.lp-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  opacity: 0.95;
}

.lp-box.is-bad .lp-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23D94B4B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lp-box.is-good .lp-list li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' stroke='%232BB673' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Plain 3-column step card grid — no connector/arrow between steps. */

.lp-steps {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .lp-steps {
    grid-template-columns: 1fr;
  }
}

.lp-step {
  position: relative;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.lp-step-n {
  width: 34px;
  height: 34px;
  margin: 0 0 var(--space-2);
  display: grid;
  place-items: center;
  border-radius: var(--radius-12);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a20);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.lp-step-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}
/* Product cards are text-only (no images), driven by the produits collection —
   see layouts/partials/la-plateforme/produits.html. auto-fit/minmax lets the
   row hold however many cards exist (2 today) without a fixed column count. */

.lp-produits-intro {
  max-width: 78ch;
}

.lp-products {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .lp-products {
    grid-template-columns: 1fr;
  }
}

.lp-prod {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  color: inherit;
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    border-color 0.25s;
}

.lp-prod:hover {
  transform: translateY(-2px);
  border-color: var(--cyan-a26);
  box-shadow: var(--shadow-lg);
}

.lp-prod:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.lp-prod small {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: 19.25px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.lp-prod strong {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-900);
  line-height: 17.5px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.lp-prod span {
  font-family: var(--font-ui);
  font-size: var(--text-13);
  line-height: 20.8px;
  color: var(--color-muted);
}
/* Only section using .lp-band (not .lp-section) — a self-contained card with
   its own full border and gradient fill instead of the shared hairline rhythm. */

.lp-band {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-10);
  padding: var(--space-4);
  border-radius: var(--radius-16);
  border: 1px solid var(--cyan-a20);
  background: linear-gradient(135deg, var(--cyan-a10), var(--cyan-a06));
  box-shadow: var(--shadow-brand-sm);
}

.lp-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.9;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, var(--cyan-a20), transparent 60%);
}

.lp-band > * {
  position: relative;
}

.lp-band-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 19.2px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.lp-band-body {
  margin: 0;
  max-width: 90ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.lp-band .lp-cta-row {
  margin-top: var(--space-3);
}

.lp-band .lp-cta {
  padding: var(--space-3);
}

.lp-band .lp-cta--ghost {
  border-color: var(--teal-a12);
}
/* Legal pages: mentions légales, politique de confidentialité, politique de
   cookies. One shared component; breadcrumb and page-level treatment are
   unified across all 3 (see breadcrumb rule below). */

/* ---------- Breadcrumb ---------- */

.legal-breadcrumb {
  margin: var(--space-4) 0 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-600);
  letter-spacing: normal;
  color: var(--color-muted);
}

.legal-breadcrumb a {
  color: var(--color-brand-text);
  text-decoration: none;
}

.legal-breadcrumb a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- Page wrap ---------- */

.legal-wrap {
  max-width: var(--container-text);
  margin: 0 auto;
  padding: var(--space-12) 0 var(--space-16);
  font-family: var(--font-ui);
  color: var(--color-ink);
}

@media (max-width: 640px) {
  .legal-wrap {
    padding: var(--space-10) 0;
  }
}

/* ---------- Header block: eyebrow / h1 / intro / tagline ---------- */

.legal-head {
  margin: 0 0 var(--space-8);
  text-align: left;
}

.legal-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.legal-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--text-display-sm);
  line-height: var(--leading-tight);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-brand-text);
}

/* mentions-légales' longer intro sentence gets more room below h1 than the
   confidentialité/cookies short tagline. */
.legal-head:has(.legal-intro) .legal-title {
  margin-bottom: var(--space-2);
}

/* mentions-légales only: long intro sentence, muted-gray color */
.legal-intro {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-400);
  color: var(--color-muted);
}

/* confidentialité/cookies only: short "Site internet vitrine" tagline */
.legal-tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-400);
  color: var(--color-ink);
}

/* ---------- Body content: h2 / p / ul / a (from Markdown) ---------- */

.legal-groups {
  margin-top: var(--space-8);
}

.legal-groups h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-14);
  line-height: 18px;
  font-weight: var(--weight-800);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

/* Hairline separator above every H2 except the first. */
.legal-groups h2:not(:first-child) {
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.legal-groups p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  line-height: 26px;
  font-weight: var(--weight-400);
  color: var(--color-ink-soft);
}

.legal-groups ul {
  list-style: none;
  margin: var(--space-2) 0;
  padding-left: 0;
}

.legal-groups li {
  position: relative;
  padding: 0 0 0 var(--space-4);
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  line-height: 23.8px;
  font-weight: var(--weight-400);
  color: var(--color-ink-soft);
}

.legal-groups li::before {
  content: "";
  position: absolute;
  left: 0; /* bullet dot */
  top: 0.65em; /* centers the dot against the first line of text */
  width: 6px; /* bullet dot size */
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-brand);
}

.legal-groups a {
  color: var(--color-brand-text);
  text-decoration: none;
}

.legal-groups a:hover {
  text-decoration: underline;
}

.legal-groups a:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.legal-groups em {
  font-style: italic;
}
/* Shared page wrap plus cross-section rules (.dp-hl, .dp-section rhythm, .dp-h2,
   .dp-cta family) reused by more than one of this page's 5 partials — same shape as
   La Plateforme's own shared file (la-plateforme-shared.css). All selectors prefixed
   "dp-" to avoid colliding with other pages' same-named classes. */

.dp-page-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-20);
}

@media (max-width: 900px) {
  .dp-page-wrap {
    padding: var(--space-16) var(--space-6) var(--space-16);
  }
}

.dp-hl {
  color: var(--color-brand-text);
  font-weight: var(--weight-900);
}

.dp-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.dp-h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-20);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  line-height: 24px;
  color: var(--color-ink);
}

.dp-intro {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.dp-intro--pourquoi {
  max-width: 90ch;
}

.dp-intro--parcours {
  max-width: 88ch;
}

/* Shared CTA pill — used by the hero (3 CTAs), the signer card (1 solid CTA) and the
   closing band (3 CTAs); same shape as La Plateforme's own .lp-cta family. */
.dp-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.dp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  font-size: var(--text-13);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps-wide);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-brand-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    border-color 0.25s;
}

.dp-cta:hover {
  transform: translateY(-2px);
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}

.dp-cta:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.dp-cta--solid {
  background: linear-gradient(135deg, var(--cyan-a20), var(--cyan-a06));
  border-color: var(--cyan-a70);
}

.dp-cta--ghost {
  border-style: dashed;
  border-color: var(--teal-a12);
  box-shadow: none;
  background: transparent;
}

.dp-cta--ghost:hover {
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}
/* .dp-hero is itself the CSS grid (matches live: display:grid directly, no
   intermediate wrapper div). Right column is a bordered/shadowed card
   (.dp-hero-right): video, then title + caption below it, inside the card's own
   padding. The video itself carries no border/shadow/radius of its own — the card
   wraps around it via .dp-hero-right. */

.dp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (max-width: 900px) {
  .dp-hero {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

.dp-eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--cyan-a10);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.dp-h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-display);
  line-height: 1.08;
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

/* <p class="kicker"> — hit by the sitewide !important p-rule, built at its
   computed size (16px/26px) rather than a smaller declared one. */
.dp-kicker {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.dp-lead {
  margin: 0;
  max-width: 86ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.dp-cta-row {
  margin-top: var(--space-6);
}

.dp-hero-right {
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  background-image: linear-gradient(135deg, var(--cyan-a10), var(--cyan-a06));
}

.dp-hero-shot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--surface-100);
}

.dp-hero-shot-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-hero-card-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.dp-hero-card-p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}
/* 3 un-numbered pave/card elements in a CSS grid — same shape as La Plateforme's
   own paves section (la-plateforme-paves.css). */

.dp-paves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .dp-paves {
    grid-template-columns: 1fr;
  }
}

.dp-pave {
  position: relative;
  overflow: hidden;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.dp-pave:hover {
  border-color: var(--cyan-a26);
  box-shadow: var(--shadow-brand-lg);
  transform: translateY(-2px);
}

.dp-pave::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--cyan-a70), var(--cyan-a20));
  opacity: 0.95;
  transform-origin: top;
  transform: scaleY(0.55);
  transition:
    transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1),
    opacity 0.35s ease;
}

.dp-pave:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.dp-pave-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
}

.dp-pave-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}
/* One "partner-block" card: a nested 5fr:3fr grid — left = title + intro + a
   4-item checklist; right = a single solid CTA. Checklist checkmark icon reused
   from La Plateforme's own established checkmark shape, recolored brand cyan. */

.dp-partner-block {
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--cyan-a10), var(--cyan-a06));
  border: 1px solid var(--cyan-a20);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-brand-sm);
}

.dp-partner-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  gap: var(--space-5);
}

@media (max-width: 640px) {
  .dp-partner-grid {
    grid-template-columns: 1fr;
  }
}

.dp-partner-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 19.2px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.dp-partner-intro {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.dp-checklist {
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dp-checklist li {
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.dp-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.92px; /* icon vertical alignment against the line */
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' stroke='%2305ACD4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.dp-partner-right {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* Pousse le CTA au niveau de la checklist. */
  padding-top: var(--space-32);
}

@media (max-width: 640px) {
  .dp-partner-right {
    padding-top: 0;
  }
}
/* 3 numbered .step cards in a CSS grid — same shape as La Plateforme's own
   comment-ca-marche steps (la-plateforme-comment-ca-marche.css). */

.dp-steps {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .dp-steps {
    grid-template-columns: 1fr;
  }
}

.dp-step {
  position: relative;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.dp-step-n {
  width: 34px;
  height: 34px;
  margin: 0 0 var(--space-2);
  display: grid;
  place-items: center;
  border-radius: var(--radius-12);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a20);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.dp-step-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

.dp-step-p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}
/* Closing CTA band — same shape as La Plateforme's own cta-band
   (la-plateforme-cta-band.css): own margin-top (not the shared .dp-section
   rhythm) and its own full border + gradient fill instead of a hairline top
   border, since it's a self-contained card, not a bare section. */

.dp-band {
  position: relative;
  overflow: hidden;
  margin-top: var(--space-10);
  padding: var(--space-4);
  border-radius: var(--radius-16);
  border: 1px solid var(--cyan-a20);
  background: linear-gradient(135deg, var(--cyan-a10), var(--cyan-a06));
  box-shadow: var(--shadow-brand-sm);
}

.dp-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0.9;
  pointer-events: none;
  background: radial-gradient(circle at 0% 0%, var(--cyan-a20), transparent 60%);
}

.dp-band > * {
  position: relative;
}

.dp-band-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 19.2px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.dp-band-body {
  margin: 0;
  max-width: 92ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.dp-band .dp-cta-row {
  margin-top: var(--space-3);
}
/* Shared box model for the Demande de démo and Contact forms: height falls
   out of border + padding + line-height rather than an explicit height, so
   it stays correct under font-size/line-height changes. Font-family/label
   styling differs between the two forms and is set per-page instead
   (demande-de-demo-hero.css / contact-form.css). */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-weight: var(--weight-900);
}

.form-input,
.form-textarea {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-16);
  padding: var(--space-3);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 19.6px;
  color: var(--color-ink);
  background: transparent;
}

.form-textarea {
  line-height: 23.1px;
  background: var(--color-bg);
  resize: vertical;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-muted);
}

.form-input:focus-visible,
.form-textarea:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

/* Radio/checkbox option rows — native controls, just spaced/aligned
   consistently, deliberately plain rather than a custom-styled skin. */
.form-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* .form-options is a plain flex div everywhere except the "vous êtes" radio
   group, which is a <fieldset> (for a real, non-visible accessible name —
   see contact/form.html); reset the browser's default fieldset chrome so it
   stays visually identical to the div-based instances. */
fieldset.form-options {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.form-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.form-option input[type="radio"],
.form-option input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: var(--space-1);
  accent-color: var(--color-brand);
}

.form-option input:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

.form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--cyan-a10);
  border-radius: var(--radius-16);
  padding: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-600);
  line-height: 12px;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-ink);
  background: var(--color-brand);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.form-submit:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.form-submit:focus-visible {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

/* Formspree's `_gotcha` honeypot field: a real form field bots fill in but
   humans never see. Hidden via aria-hidden + tabindex="-1" on the wrapper/
   input (not just display:none), and fully clipped like base.css's
   .sr-only, since this field must never be discoverable by assistive tech
   either. */
.form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Shared page wrap plus cross-section rules (.ddd-section rhythm, .ddd-h2, .ddd-cta
   family, steps, booking) reused by more than one of this page's partials — same
   widget family as the sibling devenir-partenaire page (devenir-partenaire-shared.css/
   -parcours.css), reused here under this page's own "ddd-" (Demande De Démo) prefix. */

.ddd-page-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-20);
}

@media (max-width: 900px) {
  .ddd-page-wrap {
    padding: var(--space-16) var(--space-6) var(--space-16);
  }
}

.ddd-section {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-line);
}

.ddd-eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.ddd-h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-20);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  line-height: 24px;
  color: var(--color-ink);
}

.ddd-intro {
  margin: 0 0 var(--space-4);
  max-width: 80ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

/* Shared CTA pill — same shape/values as devenir-partenaire-shared.css's own
   .dp-cta family (same widget family, no divergent values captured for this page). */
.ddd-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ddd-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  font-size: var(--text-13);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-caps-wide);
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  background: var(--white);
  border: 1px solid var(--cyan-a45);
  box-shadow: var(--shadow-brand-sm);
  transition:
    transform 0.25s,
    box-shadow 0.25s,
    background 0.25s,
    border-color 0.25s;
}

.ddd-cta:hover {
  transform: translateY(-2px);
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}

.ddd-cta:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.ddd-cta--ghost {
  border-style: dashed;
  border-color: var(--teal-a12);
  box-shadow: none;
  background: transparent;
}

.ddd-cta--ghost:hover {
  background: var(--surface-50);
  border-color: var(--cyan-a70);
  box-shadow: var(--shadow-brand-lg);
}

/* "Comment se déroule la demande" — 3 numbered step cards, same shape as
   devenir-partenaire-parcours.css's .dp-step family. */
.ddd-steps {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .ddd-steps {
    grid-template-columns: 1fr;
  }
}

.ddd-step {
  position: relative;
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.ddd-step-n {
  width: 34px;
  height: 34px;
  margin: 0 0 var(--space-2);
  display: grid;
  place-items: center;
  border-radius: var(--radius-12);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a20);
  font-family: var(--font-ui);
  font-weight: var(--weight-900);
  color: var(--color-brand-text);
}

.ddd-step-title {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

.ddd-step-p {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

/* "Pour préparer votre rappel" — 2-col grid: left info-card (checklist), right a
   secondary card linking to Contact. */
.ddd-booking {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .ddd-booking {
    grid-template-columns: 1fr;
  }
}

.ddd-booking-card {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.ddd-booking-card--contact {
  background: linear-gradient(135deg, var(--cyan-a10), var(--cyan-a06));
  border-color: var(--cyan-a20);
}

.ddd-booking-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 19.2px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.ddd-booking-sub {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

/* Checkmark checklist — byte-identical icon/shape to this project's own established
   checkmark (devenir-partenaire-signer.css's .dp-checklist), reused here under this
   page's own "ddd-" prefix. */
.ddd-checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ddd-checklist li {
  position: relative;
  padding: 0 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink-soft);
}

.ddd-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10.92px; /* icon vertical alignment against the line */
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' stroke='%2305ACD4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Grid ratio/gaps reused from the sibling devenir-partenaire hero's own measured
   values (same widget family). The form card's own input/label/textarea/submit-button
   values are this page's own directly-measured values. */

.ddd-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .ddd-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.ddd-pill {
  display: inline-block;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--cyan-a10);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--text-11);
  font-weight: var(--weight-900);
  line-height: normal;
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.ddd-h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-display);
  line-height: 1.1;
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.ddd-kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.ddd-lead {
  margin: 0 0 var(--space-5);
  max-width: 60ch;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.ddd-benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.ddd-benefits li {
  position: relative;
  padding: 0 0 0 var(--space-6);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24px;
  color: var(--color-ink-soft);
}

.ddd-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px; /* icon vertical alignment against the line */
  width: 14px;
  height: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 10.5l3.5 3.5L16 6' stroke='%2305ACD4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Right column: the form card itself. */
.ddd-form-card {
  padding: var(--space-6);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.ddd-form-title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-18);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.ddd-form-sub {
  margin: 0 0 var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 21px;
  color: var(--color-muted);
}

.ddd-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* 2-column grid for text/tel/email fields; N° ORIAS and Message are full-width. */
.ddd-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .ddd-form-row {
    grid-template-columns: 1fr;
  }
}

/* Font-family for this form's labels/inputs is Roboto, distinct from Contact's own
   Inter-based form (see contact-form.css's identical override) — the shared box/
   sizing rules live in forms.css, only the font-family/label values differ per page. */
.ddd-form .form-input,
.ddd-form .form-textarea {
  font-family: var(--font-ui);
}

.ddd-form .form-label {
  font-family: var(--font-ui);
  font-size: var(--text-12);
  line-height: 21px;
  color: var(--teal-a92);
}

/* Trust row — 3 cards below the hero grid, spanning full width. */
.ddd-trust-row {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}

@media (max-width: 900px) {
  .ddd-trust-row {
    grid-template-columns: 1fr;
  }
}

.ddd-trust {
  padding: var(--space-4);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.ddd-trust-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-16);
  font-weight: var(--weight-900);
  letter-spacing: normal;
  line-height: 18px;
  text-transform: uppercase;
  color: var(--color-ink);
}

.ddd-trust-text {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 22px;
  color: var(--color-ink-soft);
}
/* Class prefix "ctc-" (ConTaCt), distinct from cards.css's pre-existing unrelated
   ".contact-card" (footer contact chips) to avoid any collision, matching this
   project's established per-page-prefix convention. */

.ctc-page-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-20) var(--space-6) var(--space-20);
}

@media (max-width: 900px) {
  .ctc-page-wrap {
    padding: var(--space-16) var(--space-6) var(--space-16);
  }
}

.ctc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-12);
  align-items: start;
}

@media (max-width: 900px) {
  .ctc-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.ctc-eyebrow {
  display: block;
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-800);
  line-height: 26px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.ctc-title {
  margin: 0 0 var(--space-6);
  font-size: var(--text-24);
  font-weight: var(--weight-900);
  line-height: 33.8px;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-ink);
}

.ctc-title-brand {
  color: var(--color-brand-text);
}

.ctc-card {
  padding: var(--space-5);
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
}

.ctc-card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-14);
  font-weight: var(--weight-800);
  line-height: 16.8px;
  letter-spacing: var(--letter-spacing-caps-wide);
  text-transform: uppercase;
  color: var(--color-ink);
}

.ctc-infos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ctc-infos li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 23.8px;
  color: var(--color-muted);
}

.ctc-infos a {
  color: var(--color-muted);
}

.ctc-infos a:hover {
  color: var(--color-brand-text);
}

.ctc-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-700);
  line-height: 24.5px;
  color: var(--color-ink);
}

/* "DUNE ASSURANCES" in the address — bold but explicitly NOT brand-blue. */
.ctc-name-brand {
  font-weight: var(--weight-700);
  color: var(--color-ink);
}

/* Google Maps embed, positioned as a sibling of .ctc-page-wrap since its own
   section (1160px) is wider than .ctc-page-wrap's container. */
.ctc-map-wrap {
  max-width: var(--container);
  margin: var(--space-12) auto 0;
  padding: var(--space-2);
}

.ctc-map-card {
  border: 1px solid var(--cyan-a26);
  border-radius: var(--radius-16);
  overflow: hidden;
  line-height: 0;
}

.ctc-map-card iframe {
  display: block;
  width: 100%;
  height: 260px;
  border: 0;
}

@media (max-width: 900px) {
  .ctc-map-wrap {
    padding: var(--space-2) var(--space-6);
  }
}
/* This form's label/input typography is Inter, distinct from Demande de démo's
   Roboto-based form (demande-de-demo-hero.css) — box-model rules (border/radius/
   padding/background) stay shared in forms.css. */

.ctc-form-col {
  padding-top: var(--space-1);
}

.ctc-form-h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-18);
  font-weight: var(--weight-800);
  line-height: 20.4px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.ctc-form-intro {
  margin: 0 0 var(--space-3);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-ink-soft);
}

.ctc-form-note {
  margin: 0 0 var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.ctc-form {
  /* The form's own direct children are just the hidden step toggle + the two
     step wrappers; field spacing lives on .ctc-step instead. */
  display: block;
}

.ctc-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ---------- 2-step CSS-only reveal ----------
   Two radios sharing one `name` (`etape-formulaire`): #ctc-step-forward
   (unchecked by default) and #ctc-step-back (checked by default). "Suivant" is
   a <label> for the forward radio; "Précédent" is a <label> for the back radio.
   `:has()` reveals step 2 (and collapses step 1's fieldset) when the forward
   radio is checked. */
.ctc-step-input {
  /* Visually gone but still a real, focusable, keyboard-operable control. */
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ctc-step-2 {
  display: none;
}

.ctc-form:has(#ctc-step-forward:checked) .ctc-step-2 {
  display: flex;
}

/* Step 1's fieldset (and its 3 required motif radios) is collapsed, not
   display:none'd, when moving to step 2: a display:none control is barred from
   constraint validation, and the motif radios must still block the real
   submission if none is picked. Padding/border are zeroed here too since a
   <fieldset>'s own border/padding stay part of its layout box regardless of
   max-height, which otherwise leaves a blank band above step 2. */
.ctc-form:has(#ctc-step-forward:checked) .ctc-fieldset {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  padding: 0;
  border-width: 0;
}

/* Once forward is checked, both it and its "Suivant" label are hidden — this
   is what keeps "Précédent" keyboard-reachable: with the checked-but-rendered
   member of the `etape-formulaire` radio group removed, the browser's native
   radio-group tab-stop fallback lands on `#ctc-step-back` instead, sitting
   right where Précédent belongs. */
.ctc-form:has(#ctc-step-forward:checked) #ctc-step-forward,
.ctc-form:has(#ctc-step-forward:checked) .ctc-step-next {
  display: none;
}

/* ---------- Per-motif conditional field display ----------
   Each gated field/group carries `.ctc-motif-field` (hidden by default) plus
   one of the 3 motif-specific classes below; `:has()` re-shows the block
   whose class matches the currently-checked motif radio. */
.ctc-motif-field {
  display: none;
}

.ctc-form:has(input[name="motif"][value="question"]:checked) .ctc-motif-question,
.ctc-form:has(input[name="motif"][value="sinistre"]:checked) .ctc-motif-sinistre,
.ctc-form:has(input[name="motif"][value="reclamation"]:checked) .ctc-motif-reclamation {
  display: flex;
}

/* Both toggle labels reuse .form-submit's visual style. Labels aren't natively
   focusable — keyboard focus lands on the radio itself, which always
   immediately precedes its own label in the markup. */
.ctc-step-input:focus-visible + label {
  outline: 3px solid var(--cyan-a26);
  outline-offset: 2px;
}

/* Step 2's closing row: PRÉCÉDENT + ENVOYER side by side, equal width. */
.ctc-step-actions {
  display: flex;
  gap: var(--space-4);
}

.ctc-step-actions .form-submit {
  width: auto;
  flex: 1;
}

.ctc-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .ctc-form-row {
    grid-template-columns: 1fr;
  }

  .ctc-step-actions {
    flex-direction: column;
  }
}

.ctc-fieldset {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  background: var(--cyan-a06);
}

.ctc-legend {
  padding: 0 var(--space-1);
}

.ctc-form .form-input,
.ctc-form .form-textarea {
  font-family: var(--font-ui);
}

.ctc-form .form-label,
.ctc-form .ctc-legend {
  font-family: var(--font-ui);
  font-size: var(--text-13);
  font-weight: var(--weight-600);
  line-height: 22.75px;
  letter-spacing: var(--letter-spacing-caps);
  text-transform: uppercase;
  color: var(--color-ink);
}

.ctc-form .form-option span {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 24.5px;
  color: var(--color-ink);
}

.ctc-consent span {
  font-family: var(--font-ui);
  font-size: var(--text-14);
  font-weight: var(--weight-400);
  line-height: 22px;
  color: var(--color-ink-soft);
}

.ctc-consent a {
  color: var(--color-brand-text);
  text-decoration: underline;
}
/* A simple, centered confirmation card reusing this project's established card
   language (border/radius/soft shadow) and the sitewide checkmark-icon shape
   already used for checklists elsewhere (devenir-partenaire-signer.css). */

.merci-page {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-32);
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .merci-page {
    padding: var(--space-16) var(--space-5) var(--space-20);
  }
}

.merci-card {
  width: 100%;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  padding: var(--space-12) var(--space-10) var(--space-10);
}

@media (max-width: 640px) {
  .merci-card {
    padding: var(--space-8) var(--space-6) var(--space-8);
  }
}

.merci-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--cyan-a10);
  border: 1px solid var(--cyan-a20);
}

.merci-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.merci-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-28);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.merci-lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.merci-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
/* Centred card of the 404 page, same card language as the other standalone
   pages (border/radius/soft shadow). */

.error-page {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-32);
  display: flex;
  justify-content: center;
}

@media (max-width: 640px) {
  .error-page {
    padding: var(--space-16) var(--space-5) var(--space-20);
  }
}

.error-card {
  width: 100%;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--teal-a10);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-md);
  padding: var(--space-12) var(--space-10) var(--space-10);
}

@media (max-width: 640px) {
  .error-card {
    padding: var(--space-8) var(--space-6) var(--space-8);
  }
}

.error-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-12);
  font-weight: var(--weight-900);
  letter-spacing: var(--letter-spacing-nav);
  text-transform: uppercase;
  color: var(--color-brand-text);
}

.error-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-28);
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
  text-transform: uppercase;
  color: var(--color-ink);
}

.error-lead {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-16);
  font-weight: var(--weight-400);
  line-height: 26px;
  color: var(--color-muted);
}

.error-actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.error-code {
  margin: 0 0 var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-36);
  font-weight: var(--weight-900);
  line-height: 1;
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-brand-text);
}
.cookie-banner {
  position: fixed;
  inset: auto 0 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-top: 1px solid var(--color-line);
  background-color: var(--color-bg);
  color: var(--color-ink);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-ui);
  font-size: var(--text-14);
  line-height: var(--leading-normal);
}

.cookie-banner[open] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

html:has(.cookie-banner[open]) {
  scroll-padding-bottom: var(--space-24);
}

.cookie-banner__text {
  max-width: var(--container-text);
}

.cookie-banner__text a {
  color: var(--color-brand-text);
  text-decoration: underline;
}

.cookie-banner__actions {
  display: flex;
  flex-shrink: 0;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  html:has(.cookie-banner[open]) {
    scroll-padding-bottom: calc(var(--space-32) + var(--space-24));
  }

  .cookie-banner[open] {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
  }

  .cookie-banner__actions .btn {
    flex: 1;
  }
}