/* ============================================================================
   CLTP Conseil - feuille de style principale
   Maquette Figma : "CLTP Conseil" / page MAQUETTE ! / frame pageAccueil (1440px)
   Typo : Gelasio (titres) + DM Sans (UI, corps)
   ========================================================================== */

/* ------------------------------------------------------------ 0. POLICES
   Polices auto-hébergées : sous-ensemble latin complet pour le français,
   axe de graisse réduit à 400-600. 62 Ko au total contre 92,9 Ko via Google
   Fonts, et surtout AUCUNE requête vers fonts.googleapis.com / gstatic.com :
   plus de transfert d'adresse IP hors UE avant consentement (RGPD).

   Les deux polices de repli sont ajustées métriquement. Les valeurs ont été
   calculées sur la largeur d'avance réelle d'un texte français représentatif
   (185 caractères) : Gelasio est métriquement identique à Georgia (100,00 %),
   DM Sans est 4,75 % plus large qu'Arial. Résultat : la bascule repli →
   police finale ne décale plus rien, ce qui supprime le CLS typographique.
   ========================================================================= */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url('../fonts/gelasio-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gelasio';
  src: url('../fonts/gelasio-italic-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Replis à métriques ajustées - ne sont jamais téléchargés (src: local) */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 104.75%;
  ascent-override: 94.70%;
  descent-override: 29.59%;
  line-gap-override: 0%;
}
/* Pas de @font-face de repli pour le serif : Gelasio est dessiné sur les
   métriques de Georgia (mesure : 82,160 em pour le même texte dans les deux,
   et un <h1> de 163 px à l'identique). Georgia dans la pile suffit donc, et
   évite le piège d'un local() qui retomberait sur Times New Roman. */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
  /* Palette - relevée par fréquence dans la maquette */
  --c-navy:      #01203F;   /* encre de marque, fonds sombres */
  --c-navy-soft: #2F3C67;
  --c-blue:      #0285FE;   /* accent / action */
  --c-ivory:     #F6F3EE;   /* texte sur navy, remplissage des boutons */
  --c-ivory-2:   #FBFAF6;   /* pastille d'onglet actif */
  --c-cream:     #F4F2EC;
  --c-white:     #FFFFFF;
  --c-muted:     #4A6580;   /* texte secondaire sur fond clair */
  --c-surface:   #F9FBFD;   /* fond des cartes */
  --c-border:    #D9D9D9;   /* bordure des boutons clairs */
  --c-hairline:  #E8E3DC;   /* séparateurs fins */
  --c-slider:    #EDF4FF;
  --c-label:     rgba(112, 137, 173, .6);
  --c-kameo:     #CC5874;
  --c-border-soft: #E0E8F4;              /* contour des pastilles inactives */
  --c-tint:      rgba(2, 133, 254, .1);  /* pastille des puces « check » */
  --c-tint-2:    #E1EFFC;                /* bleu clair : colonne de libellés, cartes */
  --c-pill:      rgba(245, 248, 252, .5);/* fond des cartouches défilants */

  /* Typographies */
  --font-serif: 'Gelasio', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', 'DM Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Rayons */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Ombres */
  --sh-btn:  0 4px 10.4px rgba(0, 0, 0, .1);
  --sh-card: 0 12px 15px -9px rgba(0, 0, 0, .1), 0 30px 37px -7px rgba(0, 0, 0, .1);

  /* Gabarit */
  --container:        1220px;
  --container-wide:   1300px;
  --container-narrow:  993px;
  --gutter:         clamp(20px, 4.9vw, 70px);
  --header-h:       101px;

  /* Rythme vertical entre sections (≈170-190px dans la maquette) */
  --section-gap: clamp(72px, 12vw, 180px);

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------- 2. RESET/BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ceinture anti-défilement horizontal. « clip » et non « hidden » : hidden
     crée un conteneur de défilement qui casse tous les position:sticky
     descendants (les sommaires des pages légales ne se fixaient pas).
     La ligne « hidden » sert de repli aux navigateurs sans « clip ». */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--c-white);
  color: var(--c-navy);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
/* le fieldset porte une bordure et un padding par défaut du navigateur */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
p  { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Réservé aux lecteurs d'écran : donne un équivalent texte aux coches et
   tirets du tableau comparatif, qui ne sont que des glyphes décoratifs. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--c-ivory);
  color: var(--c-navy);
  font-weight: 600;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* ------------------------------------------------------------ 3. PRIMITIVES */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.section { padding-block: 0; margin-block-start: var(--section-gap); }
.section--tight { margin-block-start: clamp(64px, 10vw, 150px); }
main > .section:last-child { margin-block-end: clamp(64px, 9vw, 127px); }

/* Sur-titres - toujours en capitales (convention client) */
.eyebrow {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(1, 32, 63, .8);
}
.eyebrow--light { color: rgba(246, 243, 238, .85); }

/* Titres display en serif ; l'accent est un italique semi-gras, parfois souligné */
.h-display, .h-section, .h-banner {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}
/* Pas de text-wrap:balance : la maquette a des césures précises, obtenues
   par la largeur de la boîte (hero) ou par un <br> explicite (sections). */
/* 664px et non 656 comme dans Figma : le Gelasio servi par Google Fonts rend
   la ligne « aux professionnels de santé. » à 659px. 8px de marge garantissent
   la césure en 2 lignes de la maquette, sans <br> forcé (donc responsive). */
.h-display { font-size: clamp(32px, 3.34vw, 48px); line-height: 1.27; max-width: 664px; }
.h-section { font-size: clamp(30px, 3.34vw, 48px); line-height: 1.18; max-width: 946px; }
.h-banner  { font-size: clamp(28px, 3.06vw, 44px); line-height: 1.2; }

.accent {
  font-style: italic;
  font-weight: 600;
}
.accent--underline {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .1em;
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-end: clamp(36px, 5vw, 66px);
}
/* Hors .section__head (blocs à 2 colonnes), l'écart eyebrow → titre reste le même */
.eyebrow + .h-section { margin-top: 16px; }
.section__head--center { align-items: center; text-align: center; }
.section__head--flush  { margin-block-end: 0; }
.section__head__lead {
  max-width: 920px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 27.2px;
  color: rgba(1, 32, 63, .8);
}

/* Boutons */
.btn {
  /* padding sur .btn et non sur chaque variante : toute nouvelle variante
     (--gradient, --dark) hérite ainsi de la bonne boîte. */
  padding: 15px 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--r-sm);
  font-size: 15px;
  line-height: 19px;
  white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s, border-color .25s, box-shadow .25s;
}
.btn--primary {
  padding: 15px 20px;
  border: 2px solid var(--c-border);
  background: var(--c-ivory);
  color: var(--c-navy);
  font-weight: 600;
  box-shadow: var(--sh-btn);
}
.btn--ghost {
  padding: 15px 27px;
  border: 2px solid var(--c-ivory);
  color: var(--c-ivory);
  font-weight: 400;
}
.btn--full { width: 100%; }
.btn--primary:hover { transform: translateY(-2px); background: var(--c-white); box-shadow: 0 8px 18px rgba(0, 0, 0, .16); }
.btn--ghost:hover   { transform: translateY(-2px); background: rgba(246, 243, 238, .12); }

.btn-row { display: flex; flex-wrap: wrap; gap: 20px; }
.btn-row--center { justify-content: center; }

/* Lien « En savoir plus → » */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--c-navy);
}
.link-more svg { transition: transform .25s var(--ease); }
.link-more:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- 4. HEADER */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  transition: background-color .3s, backdrop-filter .3s, box-shadow .3s;
}
.header.is-scrolled {
  background: rgba(1, 32, 63, .92);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(246, 243, 238, .1);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 21px var(--gutter);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 6.5px;
  color: var(--c-white);
  flex: 0 0 auto;
}
.header__logo-mark { display: block; width: 28px; color: currentColor; }
.header__logo-mark svg { width: 100%; height: auto; overflow: visible; }
.logo-mark__a, .logo-mark__b { fill: currentColor; stroke: none; }
.header__logo-text {
  font-family: var(--font-serif);
  font-size: 23.8px;
  line-height: 20.3px;
  letter-spacing: -.4px;
  padding-block: 2px;
}
.header__logo--footer { gap: 9px; }
.header__logo--footer .header__logo-mark { width: 38px; }
.header__logo--footer .header__logo-text { font-size: 32.4px; line-height: 27.6px; letter-spacing: -.55px; }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; }
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 27px;
  border-radius: 3px;
  color: var(--c-ivory);
  font-size: 15px;
  line-height: 19px;
  white-space: nowrap;
  transition: opacity .2s;
}
.nav__link:hover { opacity: .72; }
.nav__trigger { cursor: pointer; }
.nav__chev { transition: transform .25s var(--ease); flex: 0 0 auto; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__link--active {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header__cta { flex: 0 0 auto; }

/* --- Variante claire : pages posées sur fond blanc (Missions, Offres…) ------
   Déclenchée par <body data-header="light">. La maquette y passe le logo en
   navy avec le second « ⌐ » en contour, et le CTA en dégradé plein. */
/* Scopé à .header : le footer et le drawer gardent leur logo ivoire
   (ils partagent la classe .header__logo). */
body[data-header="light"] .header .header__logo { color: var(--c-navy); }
body[data-header="light"] .header .logo-mark__b {
  fill: var(--c-white);
  stroke: currentColor;
  stroke-width: 1;
}
body[data-header="light"] .header .nav__link { color: var(--c-navy); }
body[data-header="light"] .burger span { background: var(--c-navy); }

body[data-header="light"] .header__cta {
  border-color: rgba(1, 32, 63, .12);
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
body[data-header="light"] .header__cta:hover {
  background: linear-gradient(90deg, #032F5C 0%, #1A93FF 100%);
}

body[data-header="light"] .header.is-scrolled {
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 1px 0 rgba(1, 32, 63, .08), 0 6px 24px rgba(1, 32, 63, .06);
}

/* Mega-menus */
.megamenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  translate: -50% 0;
  z-index: 90;
  padding-top: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.megamenu[hidden] { display: none; }
.nav__item.is-open .megamenu { opacity: 1; pointer-events: auto; transform: none; }

.megamenu__panel {
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 24px 60px rgba(1, 32, 63, .22);
  padding: 16px;
}

.megamenu--missions .megamenu__panel { width: 935px; }
.megamenu__cols {
  display: grid;
  grid-template-columns: 455px 1fr;
  gap: 12px;
  align-items: start;
}

.mm-list li + li { border-top: 1px solid var(--c-hairline); }
.mm-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px 12px 0;
  font-size: 15px;
  transition: color .2s, padding-left .2s var(--ease);
}
.mm-list a:hover { color: var(--c-blue); padding-left: 6px; }
.mm-list a svg { flex: 0 0 auto; }

.megamenu__media {
  width: 100%;
  height: 209px;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.mm-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 12px;
  padding: 16px 24px;
  border-radius: var(--r-lg);
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
.mm-cta__title { font-size: 15px; font-weight: 600; }
.mm-cta__sub { font-size: 12px; opacity: .85; margin-top: 2px; }

.megamenu--simulateurs .megamenu__panel { width: 617px; }
/* Trois simulateurs : le panneau s'élargit plutôt que de comprimer les cartes,
   qui deviendraient illisibles à 190 px de large. */
.megamenu--simulateurs:has(.mm-sims--trois) .megamenu__panel { width: min(880px, calc(100vw - 48px)); }
.mm-sims { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.mm-sims--trois { grid-template-columns: repeat(3, 1fr); }
.mm-sim {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 23px;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
.mm-sim--alt { background: linear-gradient(150deg, #0B4F9E 0%, #0285FE 100%); }
.mm-sim__eyebrow { font-size: 11px; text-transform: uppercase; opacity: .85; }
.mm-sim__title { font-size: 20px; font-weight: 600; margin-top: auto; }
.mm-sim__desc { font-size: 12px; line-height: 1.6; opacity: .9; }
.mm-sim .btn { margin-top: 8px; }

.mm-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--c-navy);
}
.mm-note svg { flex: 0 0 auto; opacity: .5; }

/* Burger + drawer mobile */
.burger {
  display: none;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
}
.burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--c-ivory);
  transition: transform .3s var(--ease), opacity .2s;
}

.mobile-nav {
  position: fixed;
  inset: 0;
  /* > header (90) ET > bandeau cookies (200). Avec z-index 95, le bandeau
     passait par-dessus le tiroir ouvert et rendait 6 des 10 liens du menu
     physiquement injoignables en 320 px. */
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 21px var(--gutter) 32px;
  background: var(--c-navy);
  color: var(--c-ivory);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.mobile-nav.is-open { transform: none; }
.mobile-nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.mobile-nav__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(246, 243, 238, .25);
  color: var(--c-ivory);
}
.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a,
.mobile-nav__links .mobile-nav__group {
  padding: 14px 0;
  font-size: 22px;
  border-bottom: 1px solid rgba(246, 243, 238, .12);
}
.mobile-nav__links .mobile-nav__group { font-weight: 600; }
.mobile-nav__links a.is-sub { font-size: 16px; padding-left: 18px; opacity: .8; }
.mobile-nav__cta { margin-top: 28px; }

/* ------------------------------------------------------------------ 5. HERO */
.hero {
  position: relative;
  min-height: 824px;
  padding-top: var(--header-h);
  overflow: hidden;                            /* contient le fond décoratif */
  background: var(--c-navy) url("../images/bg-hero.webp") center / cover no-repeat;
  color: var(--c-ivory);
}

.hero__inner {
  display: grid;
  /* Colonne texte figée à 664px (garantit la césure du H1 en 2 lignes) ;
     seule la colonne image se réduit entre 1120px et 1440px. */
  grid-template-columns: 664px minmax(0, 531px);
  justify-content: space-between;
  gap: 29px;
  align-items: start;
  width: 100%;
  max-width: calc(1224px + var(--gutter) * 2);
  margin-inline: auto;
  padding: 46px var(--gutter) 62px;
}

/* min-width:0 indispensable : sans lui, la largeur max-content de la piste du
   marquee remonte comme taille minimale automatique de la colonne grid et fait
   déborder tout le hero sous 1120px (débordement masqué par overflow:hidden). */
.hero__content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.hero__content .h-display { margin-top: 70px; }
.hero__lead {
  margin-top: 16px;
  max-width: 652px;
  font-size: 15px;
  line-height: 19.53px;
  color: rgba(246, 243, 238, .8);
}
.hero__content .btn-row { margin-top: 70px; }

.trust {
  margin-top: 70px;
  padding-top: 26px;
  width: 100%;
  max-width: min(554px, 100%);
  min-width: 0;
  border-top: 1px solid rgba(246, 243, 238, .22);
}
.trust .eyebrow { opacity: .8; }

.trust__marquee {
  margin-top: 22px;
  overflow: hidden;
  /* fondu sur les bords, comme le masque dégradé de la maquette */
  mask-image: linear-gradient(90deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}
.trust__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.trust__track img {
  height: 16px;
  width: auto;
  margin-right: 56px;
  object-fit: contain;
  /* logos multicolores aplatis en blanc monochrome sur fond sombre */
  filter: brightness(0) invert(1);
  opacity: .9;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* Commande de pause du défilement : masquée visuellement, révélée au focus.
   Aucun impact sur le rendu au repos, mais l'animation devient contrôlable
   au clavier (WCAG 2.2.2). */
.marquee-pause {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  font: inherit;
}
.marquee-pause:focus-visible {
  position: static;
  width: auto;
  height: auto;
  margin-bottom: 10px;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  background: var(--c-ivory);
  color: var(--c-navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.trust__marquee:hover .trust__track { animation-play-state: paused; }

.hero__media img {
  width: 100%;
  max-width: 531px;
  height: auto;
  aspect-ratio: 531 / 615;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* -------------------------------------------- 6. SPÉCIALISATION (3 cartes) */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.spec { display: flex; flex-direction: column; }
.spec__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 390.67 / 336;
}
.spec__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.spec:hover .spec__media img { transform: scale(1.04); }
.spec__title {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 33px;
}
.spec__text { font-size: 15px; line-height: 22.5px; color: var(--c-muted); }

/* ------------------------------------------------------ 7. PARCOURS/ONGLETS */
.tabs { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); }

.tabs__bar {
  display: flex;
  gap: 24px;
  padding: 16px 40px;
  background: var(--c-navy) url("../images/bg-tabbar.webp") center / cover no-repeat;
}
.tabs__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  border-radius: var(--r-sm);
  color: var(--c-ivory);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.tabs__btn svg { flex: 0 0 auto; }
.tabs__btn:hover { background: rgba(246, 243, 238, .12); }
.tabs__btn.is-active { background: var(--c-ivory-2); color: var(--c-navy); }

.tabs__panel {
  display: grid;
  grid-template-columns: 429.61fr 764.39fr;
  gap: 0;
  padding: 12px;
}
.tabs__panel[hidden] { display: none; }
.tabs__panel.is-active { animation: fade-in .4s var(--ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } }

.tabs__col { padding: 28px; }
.tabs__title {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 37.5px;
  margin-bottom: 32px;
}

.feature-list { display: flex; flex-direction: column; gap: 24px; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 18px;
  line-height: 25.2px;
}
.feature-list svg { flex: 0 0 auto; margin-top: 4px; color: var(--c-navy); }

.tabs__media { border-radius: var(--r-sm); overflow: hidden; }
.tabs__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }

/* ------------------------------------------------- 8. BANNIÈRE SIMULATEUR */
.simu {
  display: grid;
  grid-template-columns: 1fr 485.69px;
  gap: 48px;
  align-items: center;
  padding: 64px;
  border-radius: var(--r-2xl);
  background: var(--c-navy) url("../images/bg-simulateur.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.simu__lead {
  margin: 20px 0 32px;
  max-width: 495px;
  font-size: 16px;
  line-height: 24px;
  color: rgba(246, 243, 238, .8);
}

.simu__card {
  padding: 47.6px;
  border-radius: 20.8px;
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: var(--sh-card);
}
.simu__label {
  font-size: 17.85px;
  line-height: 26.8px;
  text-transform: uppercase;
  color: var(--c-label);
}
.simu__slider {
  position: relative;
  height: 19.2px;
  margin-top: 12px;
  border-radius: var(--r-pill);
  background: var(--c-slider);
}
.simu__slider::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 68%;
  border-radius: var(--r-pill);
  background: var(--c-blue);
}
.simu__thumb {
  position: absolute;
  top: 50%;
  left: 68%;
  translate: -50% -50%;
  width: 24.6px;
  height: 24.6px;
  border: 3px solid var(--c-blue);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1.5px 3px rgba(0, 0, 0, .05);
}
.simu__result {
  margin-top: 23.8px;
  padding-top: 23.8px;
  border-top: 1.5px solid var(--c-hairline);
  text-align: center;
}
.simu__figure {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 44.6px;
  line-height: 53.5px;
}
.simu__figure span { font-size: 26.8px; }

/* ------------------------------------------- 9. DOMAINES D'INTERVENTION */
.domains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}
.domain {
  display: flex;
  flex-direction: column;
  min-height: 289px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.domain:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(1, 32, 63, .08); }
.domain__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  color: var(--c-navy);
}
.domain__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 28.5px;
  margin-bottom: 9px;
}
.domain__text { font-size: 14px; line-height: 22px; color: var(--c-muted); }
.domain .link-more { margin-top: auto; padding-top: 17.5px; }

.domain--cta {
  justify-content: flex-end;
  gap: 16px;
  background: linear-gradient(160deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
.domain--cta:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(2, 133, 254, .28); }
.domain__cta-title {
  font-family: var(--font-serif);
  font-size: clamp(30px, 2.8vw, 40px);
  line-height: 1.13;
  margin-top: auto;
}
.domain--cta .domain__text { color: rgba(246, 243, 238, .8); }

/* --------------------------------------------------------- 10. LE FONDATEUR */
.founder {
  display: grid;
  grid-template-columns: 441.59fr 734.41fr;
  gap: 0;
  padding: 12px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.founder__media { border-radius: var(--r-sm); overflow: hidden; background: var(--c-cream); }
/* Hauteur fixée : sinon le ratio intrinsèque de l'image étire la carte
   (la maquette fait 500px de haut, média 476px). */
.founder__media img { width: 100%; height: 476px; object-fit: cover; }

.founder__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 32px 28px 40px;
}
.founder__text { display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 24px; }

.founder__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 563px;   /* largeur du groupe de logos dans la maquette */
}
.founder__logos img { height: 30px; width: auto; object-fit: contain; }

.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li {
  padding: 10px 15px;
  border-radius: var(--r-sm);
  background: var(--c-navy);
  color: var(--c-ivory);
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

/* --------------------------------------------------- 11. BLOG (carrousel) */
.blog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block-end: 40px;
}
.blog__nav { display: flex; gap: 12px; }
.blog__arrow {
  display: grid;
  place-items: center;
  width: 56.6px;
  height: 56.6px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-ivory);
  transition: opacity .25s, transform .25s var(--ease);
}
.blog__arrow:hover:not(:disabled) { transform: scale(1.06); }
.blog__arrow:disabled { opacity: .3; cursor: not-allowed; }

.blog__viewport {
  overflow: hidden;
  padding-inline: var(--gutter);
  /* aligne la 1re carte sur le container tout en laissant déborder à droite */
  max-width: calc(var(--container) + var(--gutter) * 2 + (100vw - var(--container)) / 2);
  margin-inline-start: max(0px, calc(50vw - var(--container) / 2 - var(--gutter)));
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 90px), transparent 100%);
}
.blog__track {
  display: flex;
  gap: 26px;
  transition: transform .5s var(--ease);
}
.post { flex: 0 0 464px; }
.post__media { border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 464 / 362; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post__media img { transform: scale(1.04); }
.post__title {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 24px;
  line-height: 30.5px;
}
.post__excerpt { font-size: 16px; line-height: 24px; }

/* ------------------------------------- 11.bis  PAGES INTÉRIEURES (Missions) */

/* Hero de page : titre centré sous le header fixe */
.page-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
  padding-top: calc(var(--header-h) + clamp(40px, 8.4vw, 121px));
  text-align: center;
}
.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(32px, 3.34vw, 48px);
  line-height: 1.24;
  letter-spacing: -.042em;
}
.page-hero__lead {
  max-width: 875px;
  font-size: 15px;
  line-height: 19.53px;
  color: rgba(1, 32, 63, .8);
}

/* Grille des 5 professions : 2 colonnes, la dernière carte occupe la ligne */
.missions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 15px;
  margin-top: clamp(48px, 6vw, 73px);
}
.missions > :last-child { grid-column: 1 / -1; }

.mcard {
  display: flex;
  flex-direction: column;
  min-height: 253px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.mcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(1, 32, 63, .08); }

.mcard__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  color: var(--c-navy);
}
/* Deux pictogrammes de la maquette n'existent qu'en bitmap : on les emploie en
   masque CSS pour qu'ils restent colorables par currentColor comme le sprite. */
.mcard__icon--mask {
  background: currentColor;
  -webkit-mask: var(--icon) center / 30px 30px no-repeat;
  mask: var(--icon) center / 30px 30px no-repeat;
}

.mcard__title {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 28.5px;
  margin-bottom: 9px;
}
.mcard__text { font-size: 14px; line-height: 22px; color: var(--c-muted); }
.mcard .link-more { margin-top: auto; padding-top: 17.5px; color: var(--c-blue); }

/* ------------------------------------ 11.ter  PAGES PROFESSION (Médecins…) */

/* --- Hero en carte dégradée -------------------------------------------- */
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  margin-top: calc(var(--header-h) + clamp(20px, 3vw, 42px));
  padding: clamp(40px, 5.5vw, 67px) clamp(24px, 4vw, 60px) clamp(48px, 6.5vw, 87px);
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-med-hero.webp") center / cover no-repeat;
  color: var(--c-ivory);
  text-align: center;
}
.hero-card .eyebrow { margin-bottom: 45px; }
.hero-card__title {
  /* 700px et non 678 comme Figma : la 2e ligne mesure 693px avec le Gelasio
     de Google Fonts, elle basculerait sur 3 lignes (même écart qu'au hero
     d'accueil - cf. .h-display). */
  max-width: 700px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.34vw, 48px);
  line-height: 1.1;
}
.hero-card__lead {
  max-width: 652px;
  font-size: 15px;
  line-height: 19.53px;
  color: rgba(246, 243, 238, .8);
}
.hero-card .btn-row { margin-top: 45px; }

/* --- Bandeau défilant « nous accompagnons » ---------------------------- */
.profiles { margin-top: clamp(56px, 9vw, 129px); text-align: center; }
.profiles__marquee {
  margin-top: 22px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.profiles__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.profiles__marquee:hover .profiles__track { animation-play-state: paused; }
.profiles__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 398px;
  height: 102px;
  margin-right: 22px;
  padding: 0 24px;
  border-radius: var(--r-lg);
  background: var(--c-pill);
  font-size: 18.7px;
  line-height: 28px;
  text-align: left;
}

/* Pastille ronde à coche, réutilisée par les listes de la section carrière */
.check {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-tint);
  color: var(--c-blue);
}
.profiles__item .check { width: 25px; height: 25px; }

/* --- Conventionnement : panneau dégradé + 3 cartes --------------------- */
.panel-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 43px 45px;
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-med-conventionnement.webp") center / cover no-repeat;
}
.panel-cards--2 { grid-template-columns: 1fr 1fr; }
.pcard {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 1px solid var(--c-navy);
  border-radius: var(--r-lg);
  background: var(--c-white);
}
.pcard__title {
  margin-top: 24px;
  font-size: 17.6px;
  font-weight: 600;
  line-height: 26.4px;
}
.pcard__text { margin-top: 12px; font-size: 15px; line-height: 25.5px; }

/* Carte mise en avant (OPTAM) : liseré et halo bleus, titre en dégradé */
.pcard--highlight {
  border: 2px solid var(--c-blue);
  box-shadow: 0 0 55px rgba(2, 133, 254, .5);
}
.pcard--highlight .pcard__title {
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Structure juridique : 1 grande carte + 1 carte + 1 CTA ------------ */
.split {
  display: grid;
  grid-template-columns: 655fr 602fr;
  gap: 38px;
  align-items: start;
}
.split__aside { display: flex; flex-direction: column; gap: 42px; }

.icard {
  padding: 27px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.icard__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 601 / 388; }
.icard__media img { width: 100%; height: 100%; object-fit: cover; }
.icard__title {
  margin-top: 21px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.5;
  letter-spacing: -.02em;
}
.icard__text { margin-top: 9px; font-size: 15px; line-height: 25.5px; }
.icard--plain { padding: 44px 46px; }
.icard--plain .icard__title { margin-top: 0; }

.cta-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
.cta-card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.13;
}
.cta-card__text { font-size: 14px; line-height: 22px; color: rgba(246, 243, 238, .8); }
.cta-card .btn { margin-top: 8px; }

/* --- Votre carrière : pastilles + panneau --------------------------- */
.career__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 5vw, 64px);
}
.career__pill {
  padding: 10px 24px;
  border: 1.5px solid var(--c-border-soft);
  border-radius: var(--r-pill);
  background: var(--c-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.career__pill:hover { border-color: var(--c-blue); }
.career__pill.is-active {
  border-color: transparent;
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-white);
}

.career__panel {
  display: grid;
  grid-template-columns: 576fr 656fr;
  gap: 48px;
  align-items: start;
  margin-top: clamp(32px, 4vw, 48px);
}
.career__panel[hidden] { display: none; }
.career__panel.is-active { animation: fade-in .4s var(--ease) both; }
.career__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.5;
  letter-spacing: -.02em;
}
.career__text { margin-top: 16px; font-size: 16px; line-height: 27.2px; color: var(--c-muted); }
.career__list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.career__list li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 22.5px; }
.career__list .check { width: 20px; height: 20px; }
.career__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 656 / 380; }
.career__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Nos missions : grille 4×2 de petites cartes ----------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: 13px;
  line-height: 17.9px;
}
.tile__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  color: var(--c-navy);
}

/* ------------------- 11.quater  BLOCS SPÉCIFIQUES AUX PROFESSIONS ---------
   Composants n'apparaissant que sur une ou deux pages profession.
   Tous réutilisent les tokens et le panneau dégradé .panel-cards. */

/* --- Panneau dégradé générique (réutilisé par plusieurs blocs) ---------- */
.gpanel {
  padding: clamp(28px, 3.5vw, 45px);
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-med-conventionnement.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.gpanel--tall { background-image: url("../images/bg-med-hero.webp"); }

/* Le texte courant posé directement sur le panneau doit passer en clair.
   Les cartes claires imbriquées (blanches, crème) reprennent la couleur sombre. */
.gpanel .career__text { color: rgba(246, 243, 238, .8); }
.gpanel .deep__card .career__text,
.gpanel .warn__card .career__text,
.gpanel .dcard .career__text,
.gpanel .steps__card .career__text,
.gpanel .pcard .career__text { color: var(--c-muted); }

/* --- A. Tableau comparatif (Dentistes) --------------------------------- */
.ctable {
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 15px;
  line-height: 22px;
}
.ctable__row { display: grid; grid-template-columns: 1.05fr repeat(var(--cols, 3), 1fr); }
.ctable__row--head {
  align-items: center;
  padding: 16px;
  background: var(--c-navy) url("../images/bg-med-conventionnement.webp") center / cover no-repeat;
  color: var(--c-ivory);
  text-align: center;
}
.ctable__row--head > * { padding: 8px 12px; }
.ctable__pill {
  border-radius: var(--r-sm);
  background: var(--c-ivory-2);
  color: var(--c-navy);
  font-size: 14px;
  text-align: center;
}
.ctable__label,
.ctable__cell { padding: 26px 24px; text-align: center; }
.ctable__label { background: var(--c-tint-2); }
.ctable__cell  { background: var(--c-surface); border-left: 1px solid rgba(1, 32, 63, .06); }
.ctable__row:not(:last-child) .ctable__label,
.ctable__row:not(:last-child) .ctable__cell { border-bottom: 1px solid rgba(1, 32, 63, .06); }
.ctable__note {
  margin-top: 24px;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--c-muted);
}

/* --- B. Encart « point de vigilance » (Dentistes) ----------------------- */
.warn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.warn__card {
  padding: 28px 32px;
  border: 2px solid var(--c-white);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: 0 0 40px rgba(2, 133, 254, .35);
}
.warn__card p + p { margin-top: 18px; }

/* --- C. Étapes numérotées (Kinés) --------------------------------------- */
.steps__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px;
}
.steps__rail::before {                 /* trait de liaison entre les jetons */
  content: "";
  position: absolute;
  top: 50%;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: rgba(246, 243, 238, .35);
}
.steps__num {
  position: relative;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-ivory);
  color: var(--c-navy);
  font-size: 18px;
  font-weight: 500;
}
.steps__num--active { color: var(--c-blue); }
.steps__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.steps__card {
  padding: 26px;
  border-radius: var(--r-md);
  background: var(--c-white);
  color: var(--c-navy);
}
.steps__card--active { border: 2px solid var(--c-blue); box-shadow: 0 0 40px rgba(2, 133, 254, .45); }
.steps__title { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.steps__card--active .steps__title { font-family: var(--font-serif); font-style: italic; color: var(--c-blue); }
.steps__text { font-size: 14px; line-height: 22px; }

/* --- D. Cartes « croissance » décalées (Kinés) --------------------------
   Ce n'est pas une grille régulière : dans la maquette le titre fait 774px
   (il déborde de sa colonne sur la zone encore vide de la 2e), et chaque
   carte a son propre décalage vertical. Les valeurs ci-dessous sont les
   écarts relevés dans Figma, mesurés depuis le haut de la section. */
/* Les 3 cartes sont en escalier par le haut mais **alignées par le bas**
   (relevé Figma : elles se terminent toutes à la même ligne). On l'obtient
   avec une grille 2 rangées où les cartes 2 et 3 enjambent les deux rangées
   en `align-self:end` - aucun décalage codé en dur, la mise en page tient
   quelle que soit la hauteur réelle des textes.
   minmax(0,1fr) et non 1fr : sinon la largeur du titre (774px) remonte comme
   minimum de la 1re colonne et écrase les deux autres. */
.growth {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: 34px;
  row-gap: 56px;
}
.growth__head { grid-column: 1; grid-row: 1; align-self: start; min-width: 0; }
.growth__head .h-section {
  width: 774px;
  max-width: calc(200% + 34px);   /* au plus 2 colonnes + la gouttière */
}
.growth__intro { max-width: 400px; margin-top: 35px; font-size: 16px; line-height: 27.2px; color: var(--c-muted); }

.growth__card {
  padding: 34px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.growth__card--tint { background: var(--c-tint-2); }
/* « Recruter » sous le bloc titre ; les deux autres enjambent les 2 rangées
   et se calent sur le même bas que lui. */
.growth__card--low { grid-column: 1; grid-row: 2; align-self: end; }
/* 331px : hauteur relevée dans Figma. Son contenu n'en occupe que ~240 -
   c'est ce surplus qui crée l'escalier entre les trois cartes. min-height
   et non height : le texte reste libre de la faire grandir. */
.growth__card--mid { grid-column: 2; grid-row: 1 / 3; align-self: end; min-height: 331px; }
.growth__card--top { grid-column: 3; grid-row: 1 / 3; align-self: end; }

.growth__title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.5;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.growth__text { font-size: 15px; line-height: 25.5px; }
.growth__media { margin-top: 29px; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 344 / 273; }
.growth__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- E. Levier fiscal : carte claire + carte à onglets (Infirmiers) ----- */
.lever { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.lever__side {
  padding: 32px 34px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.lever__side p + p { margin-top: 20px; }
.lever__body { margin-top: 26px; font-size: 15px; line-height: 25.5px; }

.switch {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 28px;
  border-radius: var(--r-pill);
  background: var(--c-ivory-2);
}
.switch__btn {
  padding: 9px 22px;
  border-radius: var(--r-pill);
  color: var(--c-navy);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .25s, box-shadow .25s;
}
.switch__btn.is-active { background: var(--c-white); box-shadow: 0 0 0 2px var(--c-blue); }

.rows { margin-top: 26px; }
.rows li { padding: 16px 0; font-size: 15px; line-height: 22px; }
.rows li + li { border-top: 1px solid rgba(246, 243, 238, .28); }
.rows--dark li + li { border-top-color: rgba(1, 32, 63, .1); }

/* --- F. Deux cartes profondes sur panneau (Infirmiers) ------------------ */
.deep { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.deep__card {
  padding: 30px 32px;
  border: 2px solid var(--c-white);
  border-radius: var(--r-lg);
  background: var(--c-white);
  color: var(--c-navy);
  box-shadow: 0 0 40px rgba(2, 133, 254, .3);
}
.deep__media { margin-top: 24px; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; }
.deep__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- G. Décisions clés (Infirmiers, Ostéopathes) ------------------------ */
.decisions__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; margin-bottom: 44px; }
.decisions__lead { font-size: 15px; line-height: 25.5px; color: rgba(246, 243, 238, .8); }
.decisions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.dcard {
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--c-ivory);
  color: var(--c-navy);
}
.dcard__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-white);
}
.dcard__title { margin-bottom: 12px; font-size: 16px; font-weight: 600; }
.dcard__text { font-size: 14px; line-height: 22px; }

/* --- H. Notre approche : liste numérotée + image (Dentistes) ------------ */
.approach { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: center; }
.approach__lead { margin-top: 16px; font-size: 15px; line-height: 25.5px; color: var(--c-muted); }
.approach__list { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.approach__list li { display: flex; align-items: flex-start; gap: 16px; font-size: 15px; line-height: 22px; }
.approach__n {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 26px;
  border-radius: var(--r-xs);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 600;
}
.approach__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 620 / 538; }
.approach__media img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------- 11.quinquies  PAGE NOS OFFRES */

/* --- Les deux cartes tarifaires ---------------------------------------- */
.offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 389px));
  justify-content: center;
  gap: 32px;
  margin-top: clamp(40px, 5vw, 65px);
}
.oprice {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-offre-1.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.oprice--featured { background-image: url("../images/bg-offre-2.webp"); }

.oprice__name { font-family: var(--font-serif); font-size: 20px; line-height: 27px; letter-spacing: -.02em; }
.oprice__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 46px;
  letter-spacing: -2px;
}
.oprice__period { font-family: var(--font-sans); font-size: 14px; line-height: 21px; letter-spacing: 0; }
.oprice__lead { margin-top: 12px; font-size: 16px; line-height: 23.2px; }

.oprice__list { display: flex; flex-direction: column; gap: 8px; }
.oprice__list li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 23.2px; }
.oprice__list svg { flex: 0 0 auto; }
.oprice__list li.is-plain { padding-left: 24px; }   /* « Et beaucoup d'autres avantages » */
.oprice .btn { margin-top: auto; }

/* --- Section comparative : fond dégradé pleine largeur + carte blanche -- */
.osection {
  margin-top: clamp(64px, 9vw, 150px);
  padding: clamp(48px, 7vw, 98px) 0;
  background: var(--c-navy) url("../images/bg-offres-section.webp") center / cover no-repeat;
}
.osection__card {
  padding: clamp(32px, 5vw, 76px) clamp(20px, 3.4vw, 48px);
  border-radius: var(--r-xl);
  background: var(--c-white);
}

/* --- Tableau comparatif ------------------------------------------------ */
.otable {
  position: relative;
  max-width: 994px;                       /* encart repris de la maquette */
  margin: clamp(32px, 4vw, 58px) auto 0;
  padding-left: 30px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  font-size: 16px;
  line-height: 24px;
}
/* Colonne mise en avant : panneau dégradé sur toute la hauteur de la carte */
.otable__highlight {
  position: absolute;
  inset: 0 0 0 auto;
  width: 304px;
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-offre-colonne.webp") center / cover no-repeat;
}
.otable__row {
  position: relative;      /* passe au-dessus du panneau */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 263px 304px;
  align-items: center;
}
.otable__row > * { padding: 18px 0; }
.otable__row:not(:last-child) > * { border-bottom: 1px solid rgba(1, 32, 63, .1); }
.otable__row > :last-child { padding-inline: 17px; }
.otable__row:not(:last-child) > :last-child { border-bottom-color: rgba(246, 243, 238, .2); }

.otable__val { text-align: center; }
.otable__row > :last-child { color: var(--c-ivory); }

.otable__head > * { padding: 34px 0 18px; border-bottom: 0 !important; }
.otable__head .otable__val { font-family: var(--font-serif); font-size: 20px; line-height: 27px; letter-spacing: -.02em; }

/* tiret « non inclus » */
.otable__no {
  display: inline-block;
  width: 21px;
  height: 1.5px;
  background: currentColor;
  opacity: .8;
  vertical-align: middle;
}
.otable__cta > * { padding-top: 30px; }
.otable__cta .btn { width: 100%; }

/* ------------------------- 11.sexies  CONTACT / SIMULATEUR / LE CABINET --- */

/* Page entièrement posée sur le dégradé sombre (Contact, Simulateur) */
/* respiration avant le footer, qui est collé (data-footer=flush) */
.page-sombre { padding-bottom: clamp(56px, 8vw, 110px); }
.page-sombre {
  background: var(--c-navy) url("../images/bg-page-sombre.webp") top center / cover no-repeat;
  color: var(--c-ivory);
}
.page-sombre .page-hero__title,
.page-sombre .page-hero__lead { color: var(--c-ivory); }
.page-sombre .page-hero__lead { opacity: .8; }
.page-sombre > .container > .page-hero .eyebrow { color: var(--c-ivory); opacity: .8; }

/* Grande carte blanche posée sur ce dégradé */
.sheet {
  margin-top: clamp(40px, 5vw, 76px);
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: var(--r-xl);
  background: var(--c-white);
  color: var(--c-navy);
}

/* --- Formulaires --------------------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 30px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
}
.field .req { color: var(--c-blue); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(1, 32, 63, .14);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font: inherit;
  /* 16 px et pas 15 : en dessous de ce seuil, iOS zoome automatiquement sur le
     champ à chaque prise de focus et l'utilisateur doit repincer pour ressortir. */
  font-size: 16px;
  color: var(--c-navy);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }

/* Pot de miel anti-robot : hors écran plutôt que display:none, que certains
   robots savent détecter. Jamais atteignable au clavier ni lu par un lecteur. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Retour d'envoi du formulaire - région live, annoncée par les lecteurs d'écran */
.form__status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 22px;
}
.form__status[hidden] { display: none; }
.form__status--ok {
  background: #E8F5EE;
  border: 1px solid #BFE0CD;
  color: #10603A;
}
.form__status--ko {
  background: #FCEDEB;
  border: 1px solid #F0CFCB;
  color: #9A1B14;
}
.form__status--wait { background: var(--c-surface); border: 1px solid var(--c-border-soft); color: var(--c-muted); }
.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 0;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(2, 133, 254, .18);
}
/* chevron du select en data-URI : une requête de moins */
.field select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2301203F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}

.consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 20px; }
.consent input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; accent-color: var(--c-blue); }
.form__note { margin-top: 14px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
/* Bouton plein navy : validation finale du simulateur */
.btn--dark {
  border-color: transparent;
  background: var(--c-navy);
  color: var(--c-ivory);
}
.btn--dark:hover { background: #032F5C; }

.btn--gradient {
  border-color: transparent;
  background: linear-gradient(90deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-ivory);
}
.btn--gradient:hover { background: linear-gradient(90deg, #032F5C 0%, #1A93FF 100%); }

/* --- Contact : panneau latéral ------------------------------------------- */
.contact {
  display: grid;
  grid-template-columns: 459px minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 47px);
  align-items: stretch;
}
.contact__aside {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 38px;
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-contact-aside.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.contact__promo {
  padding: 32px;
  border-radius: var(--r-md);
  background: var(--c-ivory);
  color: var(--c-navy);
}
.contact__promo p { margin: 26px 0 24px; font-size: 16px; line-height: 24px; }
.contact__infos { display: flex; flex-direction: column; gap: 20px; margin-top: auto; }

/* --- Simulateur : assistant en 4 étapes ---------------------------------- */
.wizard__step[hidden] { display: none; }
.wizard__step.is-active { animation: fade-in .35s var(--ease) both; }
.wizard__title {
  margin-top: 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -.02em;
}
/* Précision sous la question : des exemples valent mieux qu'une définition. */
.wizard__help {
  margin-top: 12px;
  max-width: 62ch;
  font-size: 14px;
  line-height: 22px;
  color: var(--c-muted);
}

.opts { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(1, 32, 63, .12);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.opt:hover { border-color: var(--c-blue); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(1, 32, 63, .06);
  color: var(--c-navy);
}
.opt__label { font-size: 15px; line-height: 22px; }
.opt__hint { display: block; font-size: 12px; line-height: 18px; color: var(--c-muted); }
.opt:has(input:checked) { border-color: var(--c-blue); background: rgba(2, 133, 254, .05); }
.opt:has(input:focus-visible) { outline: 2px solid var(--c-blue); outline-offset: 2px; }

/* variante « cartes » de l'étape 2 */
/* Réponse d'échappement (« Je ne sais pas ») posée sous une rangée de cartes :
   elle appartient à la même question, l'écart vertical doit rester serré. */
.opts--suite { margin-top: 14px; }

.opts--cards { flex-direction: row; gap: 18px; }
.opts--cards .opt {
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding: 26px 20px 22px;
  text-align: center;
}
.bars { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 92px; }
.bars i { display: block; width: 22px; border-radius: 3px; background: var(--c-tint-2); }
.bars i.is-on { background: var(--c-blue); }

/* barre de navigation de l'assistant */
.wizard__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(1, 32, 63, .1);
  font-size: 15px;
}
.wizard__nav button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-navy);
  transition: opacity .2s;
}
.wizard__nav button[disabled] { opacity: .35; cursor: not-allowed; }
.wizard__next { justify-self: end; }
.wizard__dots { display: flex; align-items: center; gap: 6px; }
.wizard__dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 4px;
  background: rgba(1, 32, 63, .18);
  transition: width .3s var(--ease), background-color .3s;
}
.wizard__dots i.is-done { background: var(--c-blue); }
.wizard__dots i.is-active { width: 24px; background: var(--c-navy); }
/* Étape écartée par la règle métier : la pastille disparaît, la progression
   annoncée doit correspondre au chemin réellement parcouru. */
.wizard__dots i[hidden] { display: none; }

/* --- Simulateur : synthèse ----------------------------------------------- */
.synthese[hidden] { display: none; }
.synthese { animation: fade-in .4s var(--ease) both; }
.synthese:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 6px; }

.synthese__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.synthese__badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.synthese--simple      .synthese__badge { background: #E8F5EE; color: #10603A; }
.synthese--vigilance   .synthese__badge { background: #FEF3E2; color: #8A5200; }
.synthese--prioritaire .synthese__badge { background: var(--c-tint-2); color: #044E8F; }

.synthese__titre {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -.02em;
}
.synthese__resume {
  margin-top: 16px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 26px;
  color: var(--c-muted);
}

.synthese__salutation {
  font-size: 15px;
  line-height: 24px;
  color: var(--c-muted);
  margin-bottom: 18px;
}
.synthese__salutation[hidden] { display: none; }

.synthese__bloc { margin-top: 32px; }
.synthese__sous-titre {
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
}
.synthese__liste { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.synthese__liste li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 24px;
}
.synthese__liste li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue);
}

/* Lecture critère par critère : une pastille dit d'un coup d'œil ce qui joue
   pour et ce qui joue contre. La couleur ne porte jamais seule l'information —
   le signe et le texte de la ligne suffisent à la comprendre. */
.criteres {
  margin-top: 14px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  overflow: hidden;
}
.critere {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-border-soft);
}
.critere:last-child { border-bottom: none; }
.critere:nth-child(odd) { background: var(--c-surface); }
.critere__marque {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}
.critere--ok .critere__marque { background: #E8F5EE; color: #10603A; }
.critere--vigilance .critere__marque { background: #FEF3E2; color: #8A5200; }
.critere__label { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.critere__valeur { display: block; font-size: 13px; line-height: 20px; color: var(--c-muted); }

.synthese__fin {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 25px;
  color: var(--c-muted);
}
.synthese__fin[hidden] { display: none; }

/* La recommandation est la phrase à retenir : elle sort du flux courant. */
.synthese__recommandation {
  margin-top: 12px;
  padding: 16px 18px;
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-tint-2);
  font-size: 15px;
  line-height: 24px;
  font-weight: 600;
  color: var(--c-navy);
}

/* Récapitulatif des réponses : deux colonnes, la question puis la réponse. */
.synthese__recap {
  margin-top: 32px;
  padding: 24px 26px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.synthese__recap dl { margin-top: 14px; display: grid; gap: 10px; }
.synthese__recap div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  font-size: 15px;
  line-height: 22px;
}
.synthese__recap dt { color: var(--c-muted); }
.synthese__recap dd { font-weight: 600; text-align: right; }

.synthese__confirmation {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid #BFE0CD;
  border-radius: var(--r-md);
  background: #E8F5EE;
  color: #10603A;
  font-size: 15px;
  line-height: 22px;
}
.synthese__confirmation:empty { display: none; }

.synthese__avertissement {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  font-size: 13px;
  line-height: 20px;
  color: var(--c-muted);
}
.synthese__avertissement svg { flex: none; margin-top: 2px; }
.synthese .btn-row { margin-top: 28px; }

/* --- Simulateur : calculateur BNC / SEL -----------------------------------
   Composants propres au seul simulateur de capitalisation : saisie chiffrée,
   mesures, cheminement du résultat, jauge de répartition et projection. */

/* Champ numérique avec son unité accolée. L'unité est décorative : elle
   double le libellé, qui porte déjà « € / mois ». */
.field__unite { display: flex; align-items: stretch; }
.field__unite input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.field__unite span {
  display: grid;
  place-items: center;
  padding: 0 14px;
  border: 1px solid rgba(1, 32, 63, .14);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-tint-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
  white-space: nowrap;
}
.field__note { font-size: 12px; line-height: 18px; color: var(--c-muted); }
.field legend { font-size: 12px; line-height: 18px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; }

.radios { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; }
.radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.radios input { accent-color: var(--c-blue); }

input[type="range"] { width: 100%; margin-top: 10px; accent-color: var(--c-blue); }

.sep { margin: 36px 0; border: 0; border-top: 1px solid var(--c-border-soft); }

/* Garde-fou économique : le calcul n'a pas de sens, il faut le dire fort. */
.alerte {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid #F0CFCB;
  border-radius: var(--r-md);
  background: #FCEDEB;
  color: #9A1B14;
  font-size: 14px;
  line-height: 22px;
}
.alerte[hidden] { display: none; }

/* Mesures : un libellé, un montant, parfois une précision. */
.mesures { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.mesures--grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mesure {
  padding: 16px 18px;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.mesure--fort { background: var(--c-tint-2); border-color: transparent; }
.mesure__label {
  display: block;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6B7280;
}
.mesure__valeur {
  display: block;
  margin-top: 6px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.25;
  color: var(--c-navy);
}
/* Un écart négatif change de couleur ET de signe : le « − » suffit à le lire. */
.mesure__valeur.is-negatif { color: #9A1B14; }
.mesure__note { display: block; margin-top: 8px; font-size: 12.5px; line-height: 19px; color: var(--c-muted); }

/* Aperçu masqué : l'ordre de grandeur se devine, le détail se mérite. */
.teaser {
  margin-top: 22px;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: var(--c-navy) url("../images/bg-simulateur.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.teaser__texte { font-size: 13.5px; line-height: 21px; opacity: .85; }
.teaser__valeur {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: .02em;
}

/* Cheminement : chaque étape explique d'où vient le montant suivant. */
/* list-style: none — la numérotation native ferait doublon avec la pastille
   chiffrée ci-dessous. L'élément reste un <ol> : l'ordre porte le sens. */
.chemin { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; counter-reset: etape; list-style: none; }
.chemin__etape {
  position: relative;
  padding: 14px 18px 14px 46px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
}
.chemin__etape::before {
  counter-increment: etape;
  content: counter(etape);
  position: absolute;
  left: 14px;
  top: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c-tint-2);
  color: #044E8F;
  font-size: 11px;
  font-weight: 700;
}
.chemin__etape--fin { background: var(--c-tint-2); border-color: transparent; }
.chemin__etape--fin::before { background: var(--c-blue); color: var(--c-white); }
.chemin__label { font-size: 14px; line-height: 21px; font-weight: 600; }
.chemin__valeur {
  display: block;
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--c-navy);
}
.chemin__etape--fin .chemin__valeur { font-size: 25px; }
.chemin__note { display: block; margin-top: 6px; font-size: 12.5px; line-height: 19px; color: var(--c-muted); }

/* Jauge de répartition. La légende chiffrée porte l'information : la barre
   seule ne serait pas lisible sans distinction de couleur. */
.jauge {
  display: flex;
  height: 22px;
  margin-top: 14px;
  border-radius: var(--r-pill);
  overflow: hidden;
  border: 1px solid var(--c-border-soft);
}
.jauge__part { height: 100%; transition: width .5s var(--ease); }
.jauge__part--conso { background: var(--c-navy); }
.jauge__part--capi { background: var(--c-blue); }
.jauge__legende { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 14px; }
.jauge__legende li { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.jauge__legende b { font-family: var(--font-serif); font-size: 17px; font-weight: 500; }
.jauge__pastille { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.jauge__pastille--conso { background: var(--c-navy); }
.jauge__pastille--capi { background: var(--c-blue); }

.indice { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.indice__valeur { font-family: var(--font-serif); font-size: 42px; line-height: 1; color: var(--c-navy); }
.indice__sur { font-size: 18px; color: var(--c-muted); }
.indice__libelle {
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--c-tint-2);
  color: #044E8F;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Blocs repliables : details/summary natifs, donc clavier et lecteurs d'écran
   fonctionnent sans une ligne de JavaScript. */
.depliant { margin-top: 32px; border-top: 1px solid var(--c-border-soft); padding-top: 20px; }
.depliant > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 18px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--c-navy);
}
.depliant > summary::-webkit-details-marker { display: none; }
.depliant > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid var(--c-blue);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .2s var(--ease);
}
.depliant[open] > summary::before { transform: rotate(90deg); }
.depliant > summary:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.depliant__corps { margin-top: 20px; }

.detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.detail__liste { margin-top: 12px; }
.detail__liste li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-border-soft);
  font-size: 13.5px;
  line-height: 20px;
}
.detail__liste li:last-child { border-bottom: none; }
.detail__liste strong { font-family: var(--font-serif); font-size: 15px; font-weight: 500; white-space: nowrap; }
.detail__liste .is-total span { font-weight: 600; }
.detail__liste .is-total strong { color: var(--c-blue); }

.projection__reglages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 20px;
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
}
.projection__graphe { margin-top: 22px; }
.projection__table { width: 100%; margin-top: 18px; border-collapse: collapse; font-size: 14px; }
.projection__table th,
.projection__table td { padding: 9px 12px; border-bottom: 1px solid var(--c-border-soft); text-align: left; }
.projection__table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6B7280; }
.projection__table tbody th { font-weight: 500; color: var(--c-muted); }
.projection__table td { font-family: var(--font-serif); font-size: 15px; }

/* --- Le Cabinet ---------------------------------------------------------- */
.cab-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-top: calc(var(--header-h) + 22px);
  padding: clamp(56px, 8vw, 110px) clamp(24px, 4vw, 60px);
  border-radius: var(--r-lg);
  background: var(--c-navy) url("../images/bg-cabinet-hero.webp") center / cover no-repeat;
  color: var(--c-ivory);
  text-align: center;
}
.cab-hero__lead { max-width: 652px; font-size: 15px; line-height: 19.53px; opacity: .8; }

.duo { display: grid; grid-template-columns: 598fr 590fr; gap: clamp(32px, 4vw, 53px); align-items: center; }
.duo--reverse .duo__media { order: 2; }
.duo__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 598 / 518; }
.duo__media img { width: 100%; height: 100%; object-fit: cover; }
.duo__body { font-size: 16px; line-height: 24px; }
.duo__body p + p { margin-top: 22px; }
.duo__note {
  margin-top: 30px;
  padding: 24px 28px;
  border-left: 3px solid var(--c-ivory);
  border-radius: var(--r-md);
  background: var(--c-navy) url("../images/bg-cabinet-quote.webp") center / cover no-repeat;
  color: var(--c-ivory);
  font-size: 16px;
  line-height: 24px;
}

.quote {
  padding: clamp(40px, 5vw, 72px) clamp(28px, 6vw, 128px);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: center;
}
.quote__mark { font-family: var(--font-serif); font-size: 54px; line-height: .7; color: var(--c-navy); }
.quote blockquote {
  margin-top: 28px;
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.45;
}

/* Section « à chaque étape » : dégradé pleine largeur + frise sur carte crème */
.etapes {
  padding: clamp(56px, 7vw, 98px) 0;
  background: var(--c-navy) url("../images/bg-cabinet-etape.webp") center / cover no-repeat;
  color: var(--c-ivory);
}
.etapes .eyebrow { color: var(--c-ivory); opacity: .8; }

.milestones {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(28px, 3vw, 42px) clamp(20px, 2.6vw, 38px);
  border-radius: var(--r-lg);
  background: var(--c-ivory);
  color: var(--c-navy);
}
.milestones__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(1, 32, 63, .2);
}
.milestones__rail::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(1, 32, 63, .25);
}
.milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--c-navy);
}
.milestone__dot {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-ivory);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: background-color .25s;
}
.milestone.is-active .milestone__dot { background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%); }
.milestone.is-active { font-weight: 600; }

.milestones__panel { display: flex; align-items: flex-start; gap: 26px; padding-top: 30px; }
.milestones__panel[hidden] { display: none; }
.milestones__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-white);
}
.milestones__eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-blue); }
.milestones__title { margin-top: 6px; font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1.3; }
.milestones__text { margin-top: 12px; font-size: 15px; line-height: 24px; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.pillar { padding: 32px; border-radius: var(--r-lg); background: var(--c-surface); }
.pillar__icon { color: var(--c-navy); }
.pillar__title { margin-top: 26px; font-size: 22px; font-weight: 500; }
.pillar__text { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--c-muted); }

/* ------------------------------------------ 11.septies  PAGES LÉGALES ----
   Aucune maquette Figma : mise en page dérivée de la DA du site
   (container, tokens, Gelasio pour les titres, DM Sans pour le corps). */

.legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Sommaire collant, aligné sous le header fixe */
.legal__toc { position: sticky; top: calc(var(--header-h) + 24px); }
.legal__toc-title {
  margin-bottom: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(1, 32, 63, .6);
}
.legal__toc ol { display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: 8px 14px;
  border-left: 2px solid rgba(1, 32, 63, .1);
  font-size: 14px;
  line-height: 20px;
  color: var(--c-muted);
  transition: color .2s, border-color .2s, background-color .2s;
}
.legal__toc a:hover { color: var(--c-navy); border-color: var(--c-blue); background: var(--c-surface); }
.legal__toc a.is-current { color: var(--c-navy); border-color: var(--c-blue); font-weight: 500; }

/* Corps du document */
.legal__body { min-width: 0; max-width: 76ch; font-size: 16px; line-height: 27px; }
.legal__body > section + section { margin-top: clamp(40px, 4vw, 56px); }
.legal__body h2 {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.2vw, 30px);
  line-height: 1.35;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal__body h3 { margin-top: 30px; font-size: 17px; font-weight: 600; line-height: 1.4; }
.legal__body p { margin-top: 16px; }
.legal__body ul { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.legal__body li { position: relative; padding-left: 20px; }
.legal__body li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-blue);
}
.legal__body a:not(.btn) { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { margin-top: 18px; font-size: 14px; color: var(--c-muted); }

/* --- Corps d'article de blog ---------------------------------------------
   Le gabarit d'article reprend .legal__body, conçu pour les pages légales : il
   ne mettait en forme que h2, h3, p, ul et les liens. Une liste numérotée
   recevait à la fois son numéro et la pastille des puces, un tableau sortait
   sans bordure ni marge, une citation restait brute — alors qu'un tableau
   comparatif est précisément le format que les moteurs génératifs reprennent
   le plus. .prose complète, sans rien changer aux pages légales. */
.prose > * + h2 { margin-top: clamp(36px, 4vw, 48px); }
.prose h3 { margin-top: 28px; }
.prose h4 { margin-top: 22px; font-size: 16px; font-weight: 600; line-height: 1.45; }
.prose h2 + p, .prose h3 + p, .prose h4 + p { margin-top: 12px; }
.prose strong, .prose b { font-weight: 600; }

/* Numérotation native, qui respecte l'attribut start ; la pastille héritée
   des listes à puces est neutralisée sur les seuls éléments numérotés. */
.prose ol { margin-top: 16px; padding-left: 26px; list-style: decimal; display: flex; flex-direction: column; gap: 10px; }
.prose ol > li { padding-left: 4px; }
.prose ol > li::before { content: none; }
.prose ol > li::marker { color: var(--c-blue); font-weight: 600; }
.prose li > ul, .prose li > ol { margin-top: 10px; }

.prose blockquote {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 3px solid var(--c-blue);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-surface);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--c-navy);
}
.prose blockquote > :first-child { margin-top: 0; }

/* L'enveloppe .prose__table est posée au rendu par api/blog.js : c'est elle qui
   défile sur mobile, le tableau garde sa sémantique pour les lecteurs d'écran. */
.prose__table {
  margin-top: 24px;
  overflow-x: auto;
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-md);
}
.prose table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border-soft); }
.prose thead th { background: var(--c-tint-2); color: var(--c-navy); font-size: 14px; font-weight: 600; }
.prose tbody th { font-weight: 600; }
.prose tbody tr:nth-child(even) { background: var(--c-surface); }
.prose tbody tr:last-child > * { border-bottom: 0; }
.prose caption { caption-side: bottom; padding: 10px 14px; font-size: 13px; color: var(--c-muted); text-align: left; }

/* Sans sommaire (moins de trois intertitres), la grille .legal n'a qu'un
   enfant : il tomberait dans la colonne de 260 px réservée au sommaire. */
.legal--seul { grid-template-columns: minmax(0, 1fr); }
.legal--seul .legal__body { margin-inline: auto; width: 100%; }

/* Images du texte. L'image à la une (.post__media) garde son propre cadrage.
   Les marges latérales par défaut des <figure> (40 px) sont neutralisées. */
.prose figure { margin: 24px 0 0; }
.prose figure.post__media { margin: 0 0 8px; }
.prose img { border-radius: var(--r-sm); }
.prose > img, .prose p > img { margin-top: 16px; }
.prose figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--c-muted); }

.prose hr { margin-top: 32px; border: 0; border-top: 1px solid var(--c-border-soft); }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--c-surface); font-size: .92em; }
.prose pre { margin-top: 20px; padding: 16px 18px; overflow-x: auto; border-radius: var(--r-md); background: var(--c-surface); font-size: 14px; line-height: 1.6; }
.prose pre code { padding: 0; background: none; }

/* Encart : rappel important dans le corps du texte */
.legal__callout {
  margin-top: 24px;
  padding: 22px 26px;
  border-left: 3px solid var(--c-blue);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: 15px;
  line-height: 24px;
}

/* Marqueur des informations que le cabinet doit fournir.
   Volontairement voyant : il ne doit pas passer en production. */
.todo {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed #B4541F;
  border-radius: var(--r-xs);
  background: #FFF4EC;
  color: #B4541F;
  font-size: .92em;
  font-weight: 500;
}

/* Tableau des cookies */
.legal__table { margin-top: 20px; overflow-x: auto; }
.legal__table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; }
.legal__table th,
.legal__table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid rgba(1, 32, 63, .1); }
.legal__table thead th {
  background: var(--c-surface);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.legal__table tbody tr:last-child td { border-bottom: 0; }

/* ------------------- 11.octies  BLOG / BANDEAU COOKIES / PAGE 404 --------- */

/* --- Index du blog ------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px) clamp(20px, 2.2vw, 28px);
  margin-top: clamp(40px, 5vw, 72px);
}
.posts .post { flex: none; width: auto; }

/* État vide : aucun article publié pour le moment */
.empty {
  margin-top: clamp(40px, 5vw, 72px);
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 80px);
  border: 1px dashed rgba(1, 32, 63, .18);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: center;
}
.empty__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 26px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--c-navy) 0%, var(--c-blue) 100%);
  color: var(--c-white);
}
.empty__title {
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.35;
}
.empty__text { max-width: 52ch; margin: 16px auto 0; font-size: 16px; line-height: 26px; color: var(--c-muted); }
.empty .btn-row { margin-top: 32px; }

/* --- Bandeau cookies ----------------------------------------------------- */
/* Conforme à la politique du site : refuser est aussi simple qu'accepter,
   et le bandeau reste affiché tant qu'aucun choix n'est fait. */
.cookie {
  position: fixed;
  z-index: 200;
  left: 50%;
  bottom: clamp(16px, 2vw, 28px);
  width: min(760px, calc(100vw - 32px));
  transform: translate(-50%, calc(100% + 40px));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 28px;
  border-radius: var(--r-lg);
  background: var(--c-white);
  box-shadow: 0 18px 50px rgba(1, 32, 63, .22), 0 0 0 1px rgba(1, 32, 63, .06);
  opacity: 0;
  visibility: hidden;
  transition: transform .45s var(--ease), opacity .35s, visibility .35s;
}
/* display:grid écrase le display:none que le navigateur applique à [hidden] */
.cookie[hidden] { display: none; }
.cookie.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.cookie__title { font-size: 16px; font-weight: 600; }
.cookie__text { margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--c-muted); }
.cookie__text a { color: var(--c-blue); text-decoration: underline; text-underline-offset: 3px; }
.cookie__actions { display: flex; gap: 12px; }
/* Les deux boutons ont le même poids visuel : exigence CNIL. */
.cookie__actions .btn { padding: 13px 22px; font-size: 14px; white-space: nowrap; }
.btn--outline {
  border: 2px solid rgba(1, 32, 63, .18);
  background: var(--c-white);
  color: var(--c-navy);
}
.btn--outline:hover { border-color: var(--c-navy); }

@media (prefers-reduced-motion: reduce) {
  .cookie { transition: opacity .01ms, visibility .01ms; transform: translate(-50%, 0); }
}

/* Lien de réouverture, dans la liste légale du footer */
.footer__legal button {
  font: inherit;
  color: inherit;
  opacity: .8;
  transition: opacity .2s;
}
.footer__legal button:hover { opacity: 1; }

/* --- Bouton flottant WhatsApp --------------------------------------------
   Injecté avec le footer, donc présent sur toutes les pages publiques.

   z-index 150 : au-dessus du contenu et du header (80 / 90), mais sous le
   bandeau cookies (200) et sous le tiroir mobile (300). Ces deux-là occupent
   tout l'écran ou tout le bas : ils doivent rester prioritaires quand ils
   sont ouverts, sinon le bouton se superpose à leurs propres actions. */
.wa-float {
  position: fixed;
  z-index: 150;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* Vert de marque WhatsApp : c'est à lui que le bouton est reconnu au premier
     coup d'œil, la palette du site ne s'y substitue pas. */
  background: #25D366;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(1, 32, 63, .22), 0 2px 6px rgba(1, 32, 63, .12);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              opacity .3s, visibility .3s;
}
.wa-float:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 10px 24px rgba(1, 32, 63, .28), 0 3px 8px rgba(1, 32, 63, .16);
}
.wa-float:active { transform: translateY(0) scale(.98); }
/* Bleu d'accent et non blanc : l'anneau doit rester visible aussi bien sur le
   fond clair des pages que sur le pied de page navy. */
.wa-float:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 3px;
}
.wa-float svg { width: 30px; height: 30px; }

/* Le bandeau cookies occupe le bas de l'écran et, sur mobile, toute la
   largeur : les deux se chevaucheraient. Tant qu'aucun choix n'est fait, le
   bandeau prime ; le bouton revient dès la réponse donnée. */
body:has(.cookie.is-open) .wa-float {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 720px) {
  /* 52 px : toujours au-dessus des 44 px de cible tactile recommandés, tout en
     laissant respirer un écran étroit. */
  .wa-float { width: 52px; height: 52px; }
  .wa-float svg { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float,
  .wa-float:hover,
  .wa-float:active { transition: none; transform: none; }
}

/* --- Page 404 ------------------------------------------------------------ */
.err {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding-top: calc(var(--header-h) + clamp(48px, 8vw, 120px));
  padding-bottom: clamp(48px, 7vw, 96px);
  text-align: center;
}
.err__code {
  font-family: var(--font-serif);
  font-size: clamp(72px, 12vw, 160px);
  line-height: .9;
  letter-spacing: -.04em;
  background: linear-gradient(120deg, var(--c-navy) 0%, var(--c-blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.err__lead { max-width: 56ch; font-size: 16px; line-height: 26px; color: var(--c-muted); }
.err__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  margin-top: clamp(40px, 5vw, 64px);
  text-align: left;
}
.err__link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: var(--r-lg);
  background: var(--c-surface);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.err__link:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(1, 32, 63, .08); }
.err__link-title { font-family: var(--font-serif); font-size: 19px; line-height: 1.4; }
.err__link-text { font-size: 14px; line-height: 21px; color: var(--c-muted); }

/* ------------------------------------------------------------ 12. CTA FINAL */
.final-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 67px clamp(24px, 6vw, 80px);
  border-radius: var(--r-xl);
  background: var(--c-navy) url("../images/bg-cta.webp") center / cover no-repeat;
  color: var(--c-ivory);
  text-align: center;
}
.final-cta__lead {
  max-width: 470px;
  font-size: 15px;
  line-height: 19.53px;
  color: rgba(246, 243, 238, .8);
}

/* ---------------------------------------------------------------- 13. FOOTER */
/* Pages dont la dernière section est un bloc sombre pleine largeur : le footer
   doit s'y accoler, sans la respiration blanche habituelle. */
body[data-footer="flush"] .footer { margin-top: 0; }

.footer {
  margin-top: clamp(64px, 9vw, 127px);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--c-navy);
  color: var(--c-ivory);
}
.footer__inner {
  width: 100%;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 60px var(--gutter) 50px;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 64px;
  padding-bottom: 64px;
}
.footer__brand { display: flex; flex-direction: column; gap: 55px; }

.footer__contact { display: flex; flex-direction: column; gap: 20px; }
/* .contact__infos : l'encart de la page contact reprend ce bloc à l'identique.
   La règle est partagée pour que les deux emplacements ne puissent plus diverger. */
.footer__contact li,
.contact__infos li { display: flex; align-items: flex-start; gap: 14px; }
.footer__contact-icon { flex: 0 0 auto; margin-top: 1px; opacity: .8; }
.footer__contact-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .8;
}
.footer__contact-value { font-size: 16px; font-weight: 500; line-height: 24px; padding-top: 2px; }
.footer__contact-value a:hover { text-decoration: underline; }

.footer__cols { display: flex; gap: 86px; }
.footer__col-title {
  margin-bottom: 23px;
  font-size: 20px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: .024em;
  text-transform: uppercase;
  opacity: .7;
}
.footer__col ul { display: flex; flex-direction: column; gap: 15px; }
.footer__col a { font-size: 16px; line-height: 20.8px; opacity: .8; transition: opacity .2s; }
.footer__col a:hover { opacity: 1; text-decoration: underline; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 50px;
  font-size: 16px;
  line-height: 20.8px;
}
.footer__legalese { display: flex; flex-wrap: wrap; gap: 50px; opacity: .8; }
.footer__credit a { color: var(--c-kameo); font-weight: 600; }
.footer__credit a:hover { text-decoration: underline; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; opacity: .8; }
.footer__legal a:hover { text-decoration: underline; }

/* ------------------------------------------------------ 14. SCROLL REVEAL */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .65s var(--ease), transform .65s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------- 15. RESPONSIVE */
@media (max-width: 1280px) {
  .megamenu--missions .megamenu__panel { width: min(90vw, 935px); }
  .megamenu__cols { grid-template-columns: 1fr 34%; }
  .nav__link { padding: 20px 16px; }
}

@media (max-width: 1120px) {
  :root { --header-h: 92px; }

  .nav, .header__cta { display: none; }
  .burger { display: flex; }
  .header__inner { justify-content: space-between; }

  .hero { min-height: 0; }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding-block: 40px 64px;
  }
  .hero__content .h-display { margin-top: 40px; }
  .hero__content .btn-row,
  .trust { margin-top: 48px; }
  .hero__media img { max-width: none; max-height: 620px; }

  .tabs__panel { grid-template-columns: 1fr; }
  .tabs__media { aspect-ratio: 16 / 10; }
  .tabs__col { padding: 20px 12px; }

  .simu { grid-template-columns: 1fr; padding: clamp(28px, 5vw, 64px); }
  .simu__card { max-width: 486px; }

  .founder { grid-template-columns: 1fr; }
  .founder__media img { height: auto; aspect-ratio: 441 / 380; }
  .founder__body { padding: 28px 20px; }

  .domains { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; gap: 28px; }
  .career__panel { grid-template-columns: 1fr; gap: 28px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .panel-cards { grid-template-columns: 1fr; padding: 28px; }
  /* Contact / Simulateur / Cabinet */
  .contact { grid-template-columns: 1fr; }
  .duo, .duo--reverse { grid-template-columns: 1fr; }
  .duo--reverse .duo__media { order: 0; }
  .pillars { grid-template-columns: 1fr; }
  .opts--cards { flex-direction: column; }
  .milestones__rail { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .milestones__rail::before { left: 10%; right: 10%; }
  .milestone { font-size: 10px; text-align: center; }


  .warn, .lever, .deep, .approach { grid-template-columns: 1fr; }
  /* Pages légales : sommaire au-dessus du texte */
  .legal { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Blog / cookies / 404 */
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .err__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie { grid-template-columns: 1fr; gap: 18px; }
  .cookie__actions .btn { flex: 1; }

  .legal__toc { position: static; }
  .legal__toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .legal__toc a { border-left: 0; border: 1px solid rgba(1, 32, 63, .12); border-radius: var(--r-pill); padding: 7px 14px; }

  .decisions__head { grid-template-columns: 1fr; gap: 20px; }
  .growth { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 24px; }
  .growth__head .h-section { width: auto; max-width: none; }
  .growth__head,
  .growth__card--low, .growth__card--mid, .growth__card--top {
    grid-column: auto;
    grid-row: auto;
    align-self: auto;
    min-height: 0;
  }
  .steps__cards { grid-template-columns: 1fr; }
  .steps__rail { display: none; }          /* la frise n'a plus de sens empilée */
}

@media (max-width: 900px) {
  .tabs__bar { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .tabs__btn { flex: 1 1 220px; }
  .spec-grid { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr; gap: 48px; }
  .footer__cols { gap: 48px; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .missions { grid-template-columns: 1fr; }
  .mcard { min-height: 0; }

  .spec-grid { grid-template-columns: 1fr; gap: 32px; }
  .domains { grid-template-columns: 1fr; }
  .domain { min-height: 0; }

  .feature-list li { font-size: 16px; line-height: 23px; }
  .tabs__title { font-size: 24px; line-height: 32px; margin-bottom: 24px; }

  .simu__card { padding: 28px; }
  .simu__label { font-size: 14px; line-height: 22px; }
  .simu__figure { font-size: 34px; line-height: 42px; }
  .simu__figure span { font-size: 20px; }

  .post { flex: 0 0 min(78vw, 400px); }
  .blog__viewport { mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 40px), transparent 100%); }

  /* Titre au-dessus des flèches : côte à côte, le titre serait comprimé */
  .blog__head { flex-direction: column; align-items: flex-start; gap: 24px; }

  .final-cta { padding: 44px 24px; }

  .founder__logos { flex-wrap: wrap; justify-content: flex-start; gap: 24px; mask-image: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legalese { flex-direction: column; gap: 8px; }

  .tiles { grid-template-columns: 1fr; gap: 14px; }
  /* Blog / cookies / 404 - petits écrans */
  .posts { grid-template-columns: 1fr; }
  .err__links { grid-template-columns: 1fr; }
  .cookie { padding: 20px; }
  .cookie__actions { flex-direction: column; }

  /* Contact / Simulateur / Cabinet - petits écrans */
  .form { grid-template-columns: 1fr; }
  .sheet { padding: 22px; }
  .contact__aside { padding: 24px; }
  .contact__promo { padding: 24px; }
  .milestones__panel { flex-direction: column; gap: 18px; }
  .milestones__rail { grid-template-columns: repeat(5, 1fr); }
  .milestones__rail::before { display: none; }
  .milestone span:last-child { display: none; }   /* libellés illisibles à 5 de front */
  .wizard__nav { font-size: 14px; }

  /* Simulateurs : tout ce qui est en colonnes s'empile. Les trois cartes de
     réponse comprimées deviendraient illisibles bien avant 720 px. */
  .opts--cards { flex-direction: column; }
  .mesures--grille { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .projection__reglages { grid-template-columns: 1fr; }
  .critere { flex-direction: row; }
  .synthese__recap div { flex-direction: column; }
  .synthese__recap dd { text-align: left; }

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

  /* Offres : cartes empilées. Le tableau ne peut pas rester en colonnes - il
     devient une liste : libellé sur sa ligne, puis une ligne par offre, chacune
     préfixée de son nom (sinon la valeur ne veut plus rien dire). */
  .offers { grid-template-columns: minmax(0, 389px); }
  .otable { padding-left: 0; }
  .otable__highlight, .otable__head { display: none; }

  .otable__row {
    grid-template-columns: 1fr;
    row-gap: 6px;
    padding: 16px 18px;
  }
  .otable__row:not(:last-child) { border-bottom: 1px solid rgba(1, 32, 63, .1); }
  /* :last-child pour battre la spécificité de la règle desktop d'encart */
  .otable__row > *,
  .otable__row > :last-child { padding: 0; border: 0 !important; }
  .otable__row > p:empty { display: none; }
  .otable__row > :first-child { font-weight: 600; }
  .otable__row > :last-child { color: var(--c-navy); }

  .otable__val {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: right;
  }
  .otable__val::before {
    content: attr(data-offre);
    flex: 0 1 auto;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .6;
    text-align: left;
  }
  .otable__cta { gap: 12px; }

  /* Tableau comparatif : en une colonne, chaque critère devient un bloc */
  .ctable__row { grid-template-columns: 1fr; }
  .ctable__row--head { display: none; }
  .ctable__cell { text-align: left; border-left: 0; }
  .ctable__cell::before {
    content: attr(data-col) " · ";
    font-weight: 600;
    color: var(--c-navy);
  }
  .ctable__label { text-align: left; font-weight: 600; }
  .profiles__item { width: min(82vw, 340px); height: 84px; margin-right: 14px; font-size: 16px; }
  .icard--plain { padding: 28px; }
  .career__pills { gap: 8px; }
  .career__pill { padding: 9px 16px; }
}

/* ------------------------------------- 16. PRÉFÉRENCES & ÉCRANS TACTILES */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .trust__track, .profiles__track { animation: none; }
  .trust__marquee, .profiles__marquee { overflow-x: auto; }
  .tabs__panel.is-active, .career__panel.is-active { animation: none; }
  .blog__track { transition: none; }
}

/* Neutralise le hover collant sur tactile */
@media (hover: none) and (pointer: coarse) {
  .btn--primary:hover, .btn--ghost:hover,
  .domain:hover, .domain--cta:hover,
  .blog__arrow:hover:not(:disabled) { transform: none; }
  .spec:hover .spec__media img, .post:hover .post__media img { transform: none; }
}

/* Écrans bas (paysage mobile, 740x360) : le bandeau occupait 58 % de la
   hauteur et ne laissait que 63 px de contenu lisible. On le compacte et on
   le borne, avec défilement interne si le texte ne tient pas. */
@media (max-height: 520px) {
  .cookie {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 14px 18px;
    bottom: 10px;
    max-height: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cookie__title  { font-size: 14px; }
  .cookie__text   { margin-top: 4px; font-size: 12.5px; line-height: 18px; }
  .cookie__actions { flex-direction: row; gap: 8px; }
  .cookie__actions .btn { padding: 9px 14px; font-size: 13px; }
}