/*
  Page d'atterrissage SCA — la feuille de style (ROAD-11 F1, redessinee par ROAD-13 PR-02).

  Cette feuille est la composition approuvee (PR #138), APLATIE. Le prototype de reference,
  garde comme artefact de documentation dans le jeu de documents de ROAD-13, empile une feuille
  de base et trois blocs de revision qui se reecrivent les uns les autres : `.hero` y est
  declare quatre fois, `.logos` trois. Ici chaque regle est ecrite UNE fois, avec la valeur qui
  gagnait a la fin. Un correctif de mise en page se lit donc a un seul endroit, ce qui est tout
  l'objet de SPEC-NFR-ASSETS.

  ⚠️ Et ce fichier ne NOMME pas ce prototype, deliberement : un chemin ecrit ici serait un
  chemin qu'un editeur suivrait, donc une dependance d'execution sur un document jamais
  deploye. tests/landing-page-assets.js le refuse (case PROTOTYPE).

  ⚠️ Les regles du parcours en plusieurs ecrans sont arrivees avec le parcours lui-meme, en
  PR-03, et portent depuis la PR-10 les NOMS DU PROTOTYPE (`.journey-*`, `.step-*`,
  `.simple-progress`, `.form-actions`, `.pill`) : le prototype est la reference au pixel
  (ADR-007), et un bloc de regles repris tel quel se compare ligne a ligne a sa source. Ce qui
  n'a pas encore son balisage ici (`.choice`, `.summary-*`, `.side-panel`, `.success`,
  `.compact-recap`) arrive avec les PR-11 a PR-13, jamais avant : une regle sans balisage est une
  regle que rien n'applique. Les regles mortes du prototype (`.agency-*`, `.demo-*`,
  `.hero-assurances`) ne sont reprises nulle part.

  ⚠️ Les tailles du texte courant sont UN PIXEL au-dessus de celles du prototype (ROAD-13 PR-14,
  demande du chef de projet du 08/09/2026) : chaque `font-size` de 9 a 15 px du prototype vaut ici
  un pixel de plus, et le corps passe de 16 a 17 px. Les titres ne bougent pas, ni les champs
  (16 px, la limite sous laquelle iOS zoome au focus). C'est le seul ecart d'echelle avec le
  prototype, et il est porte par la table d'ADR-007. Pose par reecriture litterale des valeurs —
  il n'y a ni script ni jeton de taille dans le depot : le regler est une passe sur les
  `font-size`, que la case MOBILE de tests/landing-publication.js encadre a chaque largeur.

  ⚠️ Et un PLANCHER, a toute largeur (ROAD-13 PR-15 sous 780 px, PR-16 partout, demandes du chef
  de projet du 09/09/2026) : rien de ce qui se lit — paragraphes, descriptions d'etape, libelles
  et aides de champ, tuiles, lignes du recapitulatif, declaration, refus, questions de la FAQ —
  sous 16 px, et rien d'autre sous 14 px (la signature de la marque a 12), la ou le prototype
  descend a 9–15 px. Le second ecart d'echelle avec le prototype, porte par la meme table ;
  `tests/landing-publication.js` (MOBILE) lit la feuille a chacun de ses points de rupture et le
  tient. Les blocs mobiles ne redisent PAS une taille que la base porte deja (revue de #168 du
  09/09/2026) : une regle qui n'y change rien n'y est pas.

  ⚠️ Cette feuille ne demande AUCUNE ressource externe. Les sept fontes sont servies depuis
  landing/public/brand-assets/fonts/ — le jeu de marque partage par toutes les pages
  d'atterrissage (PR #125) — pas d'hebergeur de polices, donc pas de tiers qui apprenne l'adresse
  IP du visiteur et sa visite sur un formulaire d'assurance avant qu'il n'ait accepte quoi que ce
  soit (SPEC-NFR-PRIVACY). La seule origine tierce de la page est le script Turnstile, qui est le
  controle anti-abus lui-meme ; tests/landing-page-assets.js tient les deux moities.

  Verification : node tests/landing-page-assets.js
*/

/* --- les fontes, servies par Static Assets --------------------------------- */
/*
  `font-display:swap` : le texte s'affiche tout de suite dans la fonte systeme et bascule quand
  la fonte arrive. Sans lui, un reseau lent laisse la page muette — et R1.1 demande justement
  que la composition reste lisible quand une requete de fonte est bloquee.
*/
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 500; font-display: swap; src: url(/brand-assets/fonts/quicksand-500.ttf) format('truetype'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 600; font-display: swap; src: url(/brand-assets/fonts/quicksand-600.ttf) format('truetype'); }
@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 700; font-display: swap; src: url(/brand-assets/fonts/quicksand-700.ttf) format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/brand-assets/fonts/inter-400.ttf) format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/brand-assets/fonts/inter-500.ttf) format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/brand-assets/fonts/inter-600.ttf) format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/brand-assets/fonts/inter-700.ttf) format('truetype'); }

/* --- les jetons de la charte ------------------------------------------------ */
:root {
  --cream: #f7f4ed;
  --paper: #fffdfa;
  --sand: #ece7dc;
  --ink: #201f1a;
  --muted: #625e53;
  --line: #d7d1c4;
  --teal: #086d70;
  --teal-dark: #075d60;
  --teal-tint: #e5f0ed;
  --error: #a52623;
  --star: #f4b400;
  --photo-ground: #d1c3ae;
  --heading: 'Quicksand', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* --- socle ------------------------------------------------------------------ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 4px; }

/* ⚠️ Le focus doit se VOIR : SPEC-NFR-A11Y demande chaque ecran utilisable au clavier. */
button:focus-visible, a:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--heading); font-weight: 700; letter-spacing: -0.035em; line-height: 1.12; }
h1 { font-size: 44px; line-height: 1.08; }
h2 { font-size: clamp(30px, 3vw, 42px); }
h3 { font-size: 21px; letter-spacing: -0.02em; }

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

[hidden] { display: none !important; }

.wrap { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.skip { position: fixed; left: 16px; top: -80px; z-index: 20; background: var(--ink); color: #fff; padding: 12px; }
.skip:focus { top: 10px; }

/* --- pieces communes -------------------------------------------------------- */
.eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--teal); display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
}
.eyebrow:before { content: ''; height: 7px; width: 7px; border-radius: 50%; background: currentColor; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.small-icon { width: 17px; height: 17px; }
.round-icon { height: 45px; width: 45px; display: grid; place-items: center; border-radius: 50%; flex: none; background: var(--cream); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; border-radius: 100px; padding: 13px 25px;
  border: 1px solid transparent; background: var(--ink); color: #fff;
  font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none;
  transition: background .18s, transform .18s;
}
.btn:hover { background: #38362f; transform: translateY(-1px); }
.btn.secondary { color: var(--ink); background: transparent; border-color: #9c9689; }
.btn.secondary:hover { background: var(--sand); }
.btn.teal { background: var(--teal); }
.btn.teal:hover { background: var(--teal-dark); }
.btn.arrow { padding-right: 9px; gap: 20px; }
.btn.full { width: 100%; }
.arrow-circle { height: 36px; width: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--ink); }

.text-link {
  border: 0; background: none; color: var(--teal-dark); padding: 5px 0;
  font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}

.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 36px; margin-bottom: 29px; }
.section-head h2 { margin: 0; max-width: 540px; }
.section-head p { font-size: 16px; color: var(--muted); max-width: 310px; margin: 0; }

/* --- l'en-tete --------------------------------------------------------------- */
.site-header { position: sticky; top: 0; background: rgba(247, 244, 237, .97); border-bottom: 1px solid var(--line); z-index: 10; }
.header-inner { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand-mark { width: 76px; height: 38px; fill: var(--ink); }
.brand-note { font-size: 12px; line-height: 1.35; color: var(--muted); max-width: 90px; padding-left: 16px; border-left: 1px solid var(--line); }
nav { display: flex; gap: 26px; align-items: center; margin-left: auto; }
nav a { font-size: 14px; text-decoration: none; color: var(--muted); }
nav a:hover { color: var(--teal); }
.phone-link {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-size: 15px; font-weight: 600; border: 1px solid var(--ink); border-radius: 100px;
  padding: 9px 16px; white-space: nowrap; min-height: 44px;
}

/* --- la banniere ------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr .85fr; gap: 56px; padding: 64px 0; align-items: center; }
.hero h1 { margin: 0 0 22px; max-width: 540px; }
.hero-intro { font-size: 18px; color: var(--muted); max-width: 555px; line-height: 1.7; margin-bottom: 28px; }
.hero-activity {
  display: inline-flex; align-items: center; gap: 9px; background: var(--sand);
  border-radius: 99px; padding: 9px 14px; font-size: 14px; font-weight: 600; margin-bottom: 25px;
}
.hero-activity .icon { color: var(--teal); }
.actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-portrait { height: 460px; overflow: hidden; border-radius: 6px; background: var(--photo-ground); }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }

/* --- les trois etapes --------------------------------------------------------- */
.process {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 25px 0; gap: 28px; margin-bottom: 48px;
}
.process-item { display: flex; gap: 15px; align-items: flex-start; }
.process-number {
  font-family: var(--heading); font-size: 16px; color: var(--teal); border: 1px solid #b7c9bf;
  flex: none; width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
}
.process-item strong { font-size: 16px; display: block; margin-bottom: 3px; }
.process-item p { font-size: 16px; color: var(--muted); line-height: 1.6; margin: 0; }

/* --- le formulaire ------------------------------------------------------------ */
fieldset { padding: 0; margin: 0 0 23px; border: 0; min-width: 0; }
legend { font-weight: 650; font-size: 15px; padding: 0; margin-bottom: 11px; }

/* Les cartes produit, celles du prototype (ADR-007, PR-10). ⚠️ Ce sont des `<label>` autour d'un
   bouton radio masque a l'oeil (`sr-only`) : la carte EST le controle, donc il n'y a qu'un
   vocabulaire de produits sur la page et c'est celui que tests/vocabulary-parity.js lit. Quatre
   colonnes comme la reference ; `:focus-within` cerne la carte au clavier puisque le radio ne se
   voit pas, et `:has(:checked)` colore celle du parcours en cours. */
/* Le fieldset des cartes n'ajoute rien sous la grille : le prototype pose la grille a meme la section. */
.products { margin: 0; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.product {
  position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left;
  border: 1px solid var(--line); background: #f0ece3; border-radius: 16px; padding: 23px;
  min-height: 224px; color: var(--ink); cursor: pointer;
  transition: background .18s, border-color .18s, transform .18s;
}
.product:hover { background: var(--paper); border-color: var(--teal); transform: translateY(-3px); }
.product:focus-within { outline: 3px solid var(--teal); outline-offset: 4px; }
.product:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.product-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; gap: 8px; }
.product .round-icon { height: 40px; width: 40px; background: #fffaf0; }
.product:first-child .round-icon, .product:has(input:checked) .round-icon { background: var(--teal-tint); color: var(--teal); }
.product-name { font-family: var(--heading); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; line-height: 1.12; display: block; margin: 0 0 8px; }
.product-note { font-size: 16px; line-height: 1.6; color: var(--muted); display: block; margin: 0 0 22px; max-width: 270px; }
.product-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; font-size: 14px; font-weight: 650; color: var(--teal-dark); }
.product-bottom .icon { width: 17px; height: 17px; }

.pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 100px; padding: 5px 10px; font-size: 14px; line-height: 1.5; font-weight: 650; background: var(--sand); color: #555044; }
.pill.green { background: var(--teal-tint); color: var(--teal-dark); }

input[type="radio"], input[type="checkbox"] { accent-color: var(--teal); width: 19px; height: 19px; flex: none; margin: 0; cursor: pointer; }

.field { display: block; margin-bottom: 19px; }
.field .label { display: block; font-size: 16px; font-weight: 650; margin-bottom: 7px; }
.field .label em { font-style: normal; font-weight: 400; color: var(--muted); }
.field-help { display: block; font-size: 16px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); background: #fff8f6; }

/* Les tuiles du prototype (PR-11) : une reponse par tuile, le radio natif a gauche, l'aide en
   petit. `:has(input:checked)` colore la tuile choisie ; `.full-span` etale la derniere. */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 13px 14px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px;
  min-height: 54px; cursor: pointer; line-height: 1.4; font-size: 16px;
}
.choice:has(input:checked) { border-color: var(--teal); background: var(--teal-tint); box-shadow: inset 0 0 0 1px var(--teal); }
.choice small { display: block; font-size: 14px; margin-top: 4px; color: var(--muted); }
.choice.full-span { grid-column: 1 / -1; }
.branch-choices { grid-template-columns: 1fr; }

/* La boite d'erreur du prototype : un titre, une ligne par reponse en faute, chacune un lien. */
.error-box {
  background: #fbefed; border: 1px solid #d8aaa4; border-radius: 10px; color: var(--error);
  padding: 16px 18px; margin-bottom: 22px; font-size: 16px; line-height: 1.6; outline: none;
}
.error-box strong { display: block; }
.error-box ul { margin: 7px 0 0; padding-left: 19px; }
.error-box a { color: var(--error); }
.error-box:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }

/* La commune : coche sur une commune trouvee, champ teinte, bouton manuel en lien. */
.location-fields { display: block; }
.city-verified { display: inline-flex; vertical-align: middle; color: var(--teal); margin-left: 7px; }
.city-resolved input { background: var(--teal-tint) !important; border-color: #8faaa0 !important; color: var(--teal-dark); }
.city-field[aria-busy="true"] input { background: var(--sand); }
.manual-city { font-size: 14px; margin-top: 2px; min-height: 36px; }
.city-field select { margin-bottom: 0; }

input:not([type=checkbox]):not([type=radio]), select {
  width: 100%; min-width: 0; min-height: 51px; padding: 11px 13px;
  background: #fff; border: 1px solid #b9b3a6; border-radius: 9px; color: var(--ink);
  /* ⚠️ 16 px minimum : en dessous, iOS zoome au focus et la page part en defilement
     horizontal — le defaut exact que R1.1 cherche a 320 px. */
  font-size: 16px; line-height: 1.5;
}
input::placeholder { color: #756f63; }
input:focus, select:focus { border-color: var(--teal); }

.phone-fields { display: block; }

/* La carte de l'accord du prototype (PR-12, OP-15) : le titre, la phrase d'objet, la grande case,
   la declaration citee, la note repliee. `.is-accepted` colore la case cochee. */
.consent-section { margin-top: 27px; }
.consent-section h2 { font-size: 23px; margin-bottom: 10px; }
.consent-section > p { font-size: 16px; color: var(--muted); line-height: 1.8; }
.consent-choice {
  border: 1px solid #a6bcb4; background: var(--teal-tint); padding: 17px; border-radius: 11px;
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer; line-height: 1.6; font-size: 16px; font-weight: 600;
}
.consent-choice input { margin-top: 2px; }
.declaration { margin: 13px 0 0; padding-left: 2px; color: var(--muted); font-size: 16px; font-style: normal; line-height: 1.8; }
.declaration strong { color: var(--ink); }
.privacy-info { font-size: 16px; color: var(--muted); margin-top: 15px; line-height: 1.8; }
.privacy-info summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; gap: 6px; font-weight: 600; list-style: none; }
.privacy-info summary::-webkit-details-marker { display: none; }
.privacy-info summary:before { content: '+'; color: var(--teal); font-size: 18px; }
.privacy-info[open] summary:before { content: '−'; }
.privacy-info p { margin: 8px 0; }
.consent-prominent { margin-top: 0; background: var(--teal-tint); border: 1px solid #94b6ac; border-radius: 16px; padding: 27px 30px; }
.consent-prominent h2 { font-size: 25px; margin-bottom: 12px; letter-spacing: -0.025em; }
.consent-prominent > p { font-size: 16px; line-height: 1.7; }
.consent-prominent .consent-choice {
  background: var(--paper); border: 2px solid var(--teal); border-radius: 12px; min-height: 82px; padding: 21px; gap: 16px;
  margin-top: 20px; align-items: center; font-size: 17px; line-height: 1.5; box-shadow: 0 0 0 3px #086d7009;
}
.consent-prominent .consent-choice input { width: 29px; height: 29px; margin: 0; }
.consent-prominent .consent-choice.is-accepted { background: #d6ebe2; }
.consent-prominent .declaration { line-height: 1.8; margin-top: 18px; color: #44483e; }
.consent-prominent .privacy-info { margin-top: 10px; }
.consent-prominent .privacy-info summary { font-size: 14px; }
.consent-choice:has(input[aria-invalid="true"]) { border-color: var(--error); background: #fff6f3; }

.cf-turnstile { margin: 20px 0 0; }

/* ⚠️ L'etat tenu doit se VOIR : un bouton desactive qui ressemble a un bouton actif se lit
   comme une page cassee, et le visiteur repart (SPEC-FR-LP3, R1.2). */
#submit[disabled] { background: #ded8ca; color: #7d786c; cursor: not-allowed; transform: none; }

.status { margin: 14px 0 0; min-height: 1.4em; color: var(--error); font-size: 16px; }

/* --- le parcours (ROAD-13 PR-03), comme ECRAN depuis la PR-10 -----------------------
   Une etape a la fois. Le masquage est fait par l'attribut `hidden` que pose journey.js et non
   par une classe : `[hidden]` retire l'element de l'arbre d'accessibilite ET du parcours de
   tabulation, ce qu'une classe `display:none` ferait aussi mais qu'une classe `opacity:0` ou
   `visibility` ne ferait pas — un champ invisible encore atteignable au clavier est exactement
   le defaut que R2.4 cherche.

   ⚠️ `journey-open` sur <body> est l'ecran du prototype (ADR-007) : tout ce qui porte `home-only`
   disparait — c'est `#home` cache — et le parcours occupe la page avec son propre en-tete et son
   propre pied. Les pieces `journey-only`, elles, sont devoilees par `hidden`, element par
   element, par le script. Sur les cartes (body sans la classe), la grille du parcours s'efface :
   les cartes s'etalent comme sur l'accueil du prototype. */
body.journey-open .home-only { display: none !important; }

.journey-header { border-bottom: 1px solid var(--line); background: var(--cream); }
.journey-top { height: 80px; display: flex; justify-content: space-between; align-items: center; }
.back-btn {
  display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 7px 12px 7px 0;
  background: none; border: 0; color: var(--muted); font-size: 14px;
}

.journey-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 76px; max-width: 1060px; margin: auto; padding: 43px 0 65px; align-items: start; }
.journey-main { min-width: 0; max-width: 560px; width: 100%; }
body:not(.journey-open) .journey-layout { display: block; max-width: none; padding: 0; }
body:not(.journey-open) .journey-main { max-width: none; }

.simple-progress { margin: 0 0 27px; text-align: center; }
.simple-progress .step-counter { display: inline-block; padding: 6px 15px; background: var(--sand); border-radius: 99px; font-size: 14px; color: var(--ink); margin: 0; }
.progress-track { height: 3px; background: var(--line); margin-top: 16px; border-radius: 5px; overflow: hidden; }
.progress-track > span { display: block; height: 100%; background: var(--teal); }
.step-title-row { display: flex; align-items: center; justify-content: center; gap: 15px; }
.step-heading { font-size: 34px; line-height: 1.18; margin: 15px 0 13px; outline: none; text-align: center; letter-spacing: -0.035em; }
.step-description { font-size: 16px; color: var(--muted); margin-bottom: 29px; text-align: center; }
.step-description strong { color: var(--ink); }
.journey-main .field { margin-bottom: 22px; }

/* ⚠️ Le refus d'une etape se VOIT et s'ANNONCE : `.error-box` ci-dessus, `role="alert"` pour
   l'annonce, `tabindex="-1"` pour que journey.js y amene le focus (R2.4). */
.etape:focus-visible { outline: 3px solid var(--teal); outline-offset: 8px; border-radius: 6px; }

.form-actions { display: flex; gap: 14px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 22px; margin-top: 27px; }
.form-actions .btn { min-width: 200px; }
.form-actions .back-btn { min-width: 0; }

.journey-footer { padding-top: 25px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); margin-top: 35px; line-height: 1.8; }
.journey-footer .legal-toggle { font-size: 14px; }

/* Le panneau lateral du prototype (PR-13) : colle, dans la seconde colonne de la grille. */
.side-panel { border: 1px solid var(--line); border-radius: 18px; background: var(--sand); padding: 27px; position: sticky; top: 28px; margin-top: 3px; }
.side-panel .side-icon { background: var(--teal-tint); color: var(--teal); }
.side-panel h2 { font-size: 25px; line-height: 1.2; margin: 17px 0 14px; }
.side-panel p { font-size: 16px; color: var(--muted); }
.side-panel img { border-radius: 10px; aspect-ratio: 1.7; width: 100%; height: auto; object-fit: cover; margin: 21px 0; }
.side-check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.6; margin: 15px 0; }
.side-check .icon { width: 17px; height: 17px; color: var(--teal); margin-top: 2px; }
.side-contact { border-top: 1px solid #cec7b8; margin-top: 22px; padding-top: 20px; }
.side-contact a { font-weight: 650; font-size: 16px; text-decoration: none; display: flex; gap: 10px; align-items: center; }
.side-contact small { font-size: 14px; display: block; color: var(--muted); margin-top: 7px; }
.is-confirm .side-panel { display: none; }

/* Le recapitulatif du prototype (PR-12) : le rappel du contact, puis un `<details>` natif REPLIE
   au depart — ouvrable au clavier sans une ligne de script (SPEC-FR-NAV1, R2.1) — qui tient la
   carte des groupes, chacun avec son « Modifier ». Sur la derniere etape la mise en page
   `.is-confirm` du prototype : une colonne, plus large, sans panneau lateral. */
.summary-card { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; margin: 20px 0; overflow: hidden; }
.summary-group { padding: 17px 19px; border-bottom: 1px solid var(--line); }
.summary-group:last-child { border: 0; }
.summary-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.summary-top strong { font-size: 16px; }
.summary-top button { min-height: 32px; font-size: 14px; }
.summary-group p { margin: 0; font-size: 16px; color: var(--muted); overflow-wrap: anywhere; line-height: 1.8; }
.journey-layout.is-confirm { display: block; max-width: 760px; }
.is-confirm .journey-main { max-width: none; }
.is-confirm .step-heading { font-size: 30px; margin-top: 14px; margin-bottom: 10px; }
.is-confirm .step-description { margin-bottom: 19px; }
.is-confirm .form-actions { margin-top: 20px; }
.is-confirm .form-actions .btn { min-width: 250px; }
.is-confirm .simple-progress { margin-bottom: 22px; }
.compact-recap { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 16px 20px; margin-bottom: 23px; }
.recap-contact { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; }
.recap-contact strong { font-size: 16px; }
.recap-contact > span { font-size: 16px; color: var(--muted); overflow-wrap: anywhere; }
.compact-recap > details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; cursor: pointer;
  font-size: 14px; color: var(--teal-dark); font-weight: 600; min-height: 35px; padding-top: 5px;
}
.compact-recap > details > summary::-webkit-details-marker { display: none; }
.compact-recap > details[open] > summary .icon { transform: rotate(90deg); }
.compact-recap .summary-card { margin-bottom: 0; }
.compact-recap .summary-group { padding: 10px 15px; }
.compact-recap .summary-top { margin-bottom: 0; }
.compact-recap .summary-top button { min-height: 34px; }

.product-help { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 24px 0; font-size: 14px; color: var(--muted); }

/* L'ecran de succes du prototype (PR-12). Les coordonnees se relisent sur trois lignes, en
   textContent : `pre-line` rend les sauts de ligne de l'instantane (SPEC-FR-SEND5). */
.success { max-width: 620px; margin: 65px auto 75px; text-align: center; }
.success-mark { height: 74px; width: 74px; margin: 0 auto 24px; background: var(--teal-tint); color: var(--teal); border-radius: 50%; display: grid; place-items: center; }
.success-mark .icon { height: 33px; width: 33px; }
.success h1 { font-size: 42px; outline: none; margin-top: 19px; }
.success > p { color: var(--muted); font-size: 16px; }
.success-details { text-align: left; background: var(--paper); border: 1px solid var(--line); padding: 23px; border-radius: 14px; margin: 28px 0; }
.success-details p { font-size: 16px; margin: 0; overflow-wrap: anywhere; white-space: pre-line; color: var(--ink); }
.success-details strong { display: block; font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.success .actions { justify-content: center; }
.confirmation_message:empty, .success-details p:empty { display: none; }
.hint-links { display: flex; justify-content: center; gap: 24px; margin-top: 20px; }
.hint-links a { font-size: 14px; color: var(--muted); }

/* --- le rappel ----------------------------------------------------------------- */
.callback-section { margin-top: 48px; padding: 65px 0; background: var(--sand); }
.callback-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.callback-copy h2 { margin-bottom: 18px; }
.callback-copy > p { font-size: 16px; color: var(--muted); max-width: 400px; }
.call-fact { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); margin-top: 25px; }
.call-fact .icon { color: var(--teal); }
.callback-box { border: 1px solid #ded8ca; background: var(--paper); padding: 28px; border-radius: 18px; }
.callback-box h3 { margin-bottom: 8px; }
.callback-box > p { font-size: 16px; color: var(--muted); margin-bottom: 22px; }

/* Le raccourci de « Demande de rappel » (ROAD-13 PR-06). Trois controles et un bouton, dans la
   boite qui portait deja l'appel telephonique : ce n'est pas un second formulaire, c'est l'entree
   du parcours (ADR-003). Au-dessus on prepare sa demande en ligne, au-dessous on appelle — le
   bouton du telephone passe donc en secondaire, deux boutons pleins se disputant le meme regard. */
/* Les deux champs du raccourci s'alignent par le BAS : a 320 px, « Votre téléphone » a 16 px
   passe sur deux lignes et le champ descendait sous celui du prenom (recette de #168 du
   09/09/2026, D16). Deux colonnes, comme le prototype ; les libelles y tiennent sur une ligne
   parce que ses tailles mobiles sont plus petites que le plancher. */
.fields-two { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-items: end; }
.callback-copy .text-link { margin-top: 7px; }
.tiny-note { font-size: 14px; text-align: center; line-height: 1.6; margin: 13px 0 0; color: var(--muted); }

/* --- les avis ------------------------------------------------------------------- */
.reviews-section { padding-top: 70px; padding-bottom: 25px; }
.reviews-layout { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
.google-rating { display: block; text-decoration: none; background: var(--ink); color: var(--cream); border-radius: 13px; padding: 30px; }
.google-rating:hover .google-rating-source span { text-decoration: underline; text-underline-offset: 3px; }
.rating-number { font: 700 76px/1 var(--heading); letter-spacing: -0.05em; }
.rating-number > span { font: 500 20px var(--body); letter-spacing: 0; color: #d5cfc2; }
.review-stars { display: flex; letter-spacing: 5px; font-size: 24px; margin: 16px 0 20px; color: var(--star); }
.half-star { background-image: linear-gradient(90deg, var(--star) 50%, #8e897e 50%); background-clip: text; -webkit-background-clip: text; color: transparent; }
.google-rating-source { display: flex; gap: 12px; align-items: center; font-size: 14px; line-height: 1.7; color: #e4ded2; }
.google-rating-source img { flex: none; }
.testimonials blockquote { margin: 0; padding: 0 0 21px; border-bottom: 1px solid var(--line); }
.testimonials blockquote + blockquote { padding-top: 21px; }
.testimonials blockquote:last-child { border: 0; padding-bottom: 0; }
.testimonials blockquote p { font-size: 16px; line-height: 1.85; margin: 0 0 11px; }
.testimonials cite { font-size: 14px; font-style: normal; color: var(--muted); }
.testimonial-stars { color: var(--star); font-size: 18px; letter-spacing: 3px; line-height: 1; margin-bottom: 12px; }

/* --- les partenaires -------------------------------------------------------------- */
.partners { padding-block: 66px; }
.partners-title { text-align: center; font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px; align-items: center; }
.partner-logo { height: 76px; display: flex; align-items: center; justify-content: center; min-width: 0; }
.logos .partner-logo img { width: 100%; height: auto; max-height: 60px; object-fit: contain; mix-blend-mode: multiply; }
/* Deux marques dont le dessin est bien plus haut que large : sans plafond de largeur elles
   ecrasent les quatre autres. Cible par l'attribut `alt`, qui est deja dans le balisage. */
.logos img[alt="Swiss Life"] { max-width: 86px; }
.logos img[alt="SPVIE Assurances"] { max-width: 116px; }

/* --- l'accompagnement --------------------------------------------------------------- */
.about { display: grid; grid-template-columns: .9fr 1fr; gap: 80px; padding: 25px 0 74px; align-items: center; }
.about-visual { position: relative; background: var(--sand); border-radius: 18px; overflow: hidden; }
.about-visual img { width: 100%; aspect-ratio: 1.08; object-fit: cover; object-position: center 22%; }
.about-caption {
  position: absolute; bottom: 18px; left: 18px; right: 18px; border-radius: 12px;
  background: var(--paper); padding: 18px 20px;
  font-family: var(--heading); font-size: 19px; line-height: 1.3; font-weight: 700;
}
.about h2 { margin-bottom: 21px; }
.about p { font-size: 16px; color: var(--muted); }
.about-facts { display: grid; gap: 14px; margin-top: 27px; }
.about-fact { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.about-fact .icon { color: var(--teal); }

/* --- les questions -------------------------------------------------------------------- */
.faq-section { border-top: 1px solid var(--line); padding: 66px 0; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.faq-section h2 { max-width: 350px; }
.faq-section p { font-size: 16px; color: var(--muted); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 21px 0; font-size: 16px; font-weight: 600; line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:after { content: '+'; font-size: 23px; color: var(--teal); font-weight: 400; }
.faq-item[open] summary:after { content: '−'; }
.faq-item p { margin: 0 30px 23px 0; font-size: 16px; line-height: 1.8; }

/* --- l'appel final et le pied de page ----------------------------------------------------- */
.bottom-cta {
  border-radius: 20px; background: var(--ink); color: var(--cream); padding: 37px 42px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px; margin-bottom: 64px;
}
.bottom-cta h2 { font-size: 28px; margin: 0 0 8px; }
.bottom-cta p { font-size: 16px; color: #d6d0c5; margin: 0; }
.bottom-cta .btn { background: var(--cream); color: var(--ink); white-space: nowrap; }

footer { border-top: 1px solid var(--line); padding: 36px 0; }
.footer-top { display: flex; justify-content: space-between; gap: 30px; align-items: center; margin-bottom: 25px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
/* «  Gerer mes cookies  » est un BOUTON et non un lien : l'appel au CMP est pose par un tag du
   conteneur sur son `id`, jamais par un `javascript:` ni un gestionnaire dans le balisage, qui
   remettraient du script sur des pages que ce scope garde sans script (ROAD-15 SPEC-FR-CONS5).
   Il se lit donc comme les liens a cote de lui. ⚠️ `font` et `cursor` ne sont pas repris : la
   remise a zero du haut de cette feuille les pose deja sur tout `button` (revue de la PR #198). */
.footer-links button { color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 4px; }
.legal { font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 1020px; margin-bottom: 0; }
.legal-toggle { font-size: 14px; margin-top: 15px; color: var(--muted); }
.legal-toggle summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.legal-toggle p { margin: 6px 0 0; }

/* --- au-dela et en deca du bureau ---------------------------------------------------------- */
@media (min-width: 1600px) {
  .hero { padding: 80px 0 65px; }
}

@media (max-width: 1050px) {
  .wrap { width: calc(100% - 48px); }
  .header-inner { gap: 17px; }
  .brand { gap: 10px; }
  .brand-note { padding-left: 10px; }
  nav { gap: 16px; }
  .hero { gap: 32px; }
  .hero h1 { font-size: 39px; }
  .hero .actions { gap: 10px; }
  .hero .btn { font-size: 14px; padding-inline: 18px; }
  .hero .btn.arrow { padding-right: 8px; gap: 12px; }
  .hero-portrait { height: 430px; }
  .callback-layout, .about, .faq-section { gap: 45px; }
  .product { padding: 20px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews-layout { grid-template-columns: 270px 1fr; gap: 30px; }
  .journey-layout { gap: 35px; grid-template-columns: minmax(0, 1fr) 290px; }
  .side-panel { padding: 22px; }
}

@media (max-width: 900px) {
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 36px; }
  .partner-logo { height: 74px; }
  .logos .partner-logo img { max-width: 178px; max-height: 62px; }
  .logos img[alt="Swiss Life"] { max-width: 90px; }
  .logos img[alt="SPVIE Assurances"] { max-width: 120px; }
}

@media (max-width: 780px) {
  .wrap { width: calc(100% - 36px); }
  .header-inner { height: 68px; gap: 20px; }
  .header-inner nav { display: none; }
  .brand-mark { width: 63px; height: 33px; }
  .phone-link { font-size: 14px; padding: 8px 12px; }
  .hero { grid-template-columns: 1fr .85fr; gap: 27px; padding: 36px 0 40px; }
  .hero h1 { font-size: 34px; }
  .hero-intro { font-size: 16px; }
  .hero-portrait { height: 400px; }
  .hero-activity { padding: 7px 10px; }
  .hero .btn { font-size: 15px; padding: 12px 17px; min-height: 48px; }
  .hero .btn.arrow { padding-right: 7px; gap: 10px; }
  .section-head { gap: 25px; }
  .section-head p { max-width: 230px; }
  .process { gap: 20px; }
  .process-item { gap: 10px; }
  .process-number { width: 26px; height: 26px; font-size: 14px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product:last-child .product-note { max-width: none; }
  .journey-layout { display: block; max-width: 620px; padding-top: 28px; }
  .journey-main { max-width: none; }
  .journey-top { height: 68px; }
  .journey-top .phone-link { border: 0; padding-right: 0; }
  .journey-top .brand { display: none; }
  .callback-layout { gap: 28px; }
  .callback-box { padding: 21px; }
  .fields-two { gap: 12px; }
  .side-panel { display: none; }
  .about { gap: 35px; }
  .faq-section { grid-template-columns: 1fr; gap: 20px; }
  .faq-section h2 { max-width: none; }
  .bottom-cta { padding: 29px; }
  .bottom-cta h2 { font-size: 24px; }
  .reviews-layout { grid-template-columns: 230px 1fr; gap: 26px; }
  .google-rating { padding: 24px; }
  .rating-number { font-size: 62px; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: 90px; }
  .wrap { width: calc(100% - 32px); }
  .header-inner { height: 64px; gap: 10px; }
  .brand { gap: 9px; }
  .brand-mark { width: 51px; height: 30px; }
  .brand-note { max-width: 84px; padding-left: 9px; }
  .phone-link { padding-inline: 10px; gap: 7px; }
  .phone-link .icon { width: 16px; height: 16px; }

  /* La banniere passe l'image AVANT le texte et la laisse toucher les bords : c'est la
     composition mobile approuvee, et le bloc de texte remonte de 28 px par-dessus. */
  .hero.wrap { width: 100%; padding: 0 0 24px; display: flex; flex-direction: column; gap: 0; }
  .hero-portrait { order: -1; width: 100%; height: 296px; border-radius: 0; }
  .hero-portrait img { object-position: 55% 45%; }
  .hero-copy { position: relative; z-index: 1; background: var(--cream); border-radius: 28px 28px 0 0; margin-top: -28px; padding: 27px 16px 0; width: 100%; }
  .hero-activity { display: none; }
  .hero h1 { font-size: 32px; line-height: 1.08; margin-bottom: 15px; max-width: 360px; }
  .hero-intro { line-height: 1.6; margin-bottom: 22px; }
  .hero .btn { min-height: 50px; padding: 12px 18px; }
  .hero .arrow-circle { width: 32px; height: 32px; }

  .process { gap: 15px; padding: 19px 0; margin-bottom: 35px; }
  .process-item { display: block; }
  .process-number { margin-bottom: 10px; width: 25px; height: 25px; }
  .process-item strong { line-height: 1.45; }
  .process-item p { display: none; }

  .section-head { display: block; margin-bottom: 22px; }
  .section-head .eyebrow { margin-bottom: 12px; font-size: 14px; }
  .section-head h2 { font-size: 29px; line-height: 1.16; max-width: 330px; }
  .section-head p { max-width: none; margin-top: 12px; }

  /* Les cartes en une colonne compacte, la composition mobile du prototype : l'icone a gauche
     sur trois rangees, la pastille sous le nom, la fleche en haut a droite. */
  .product-grid { grid-template-columns: 1fr; gap: 10px; }
  .product { padding: 17px 17px 15px; min-height: 0; display: grid; grid-template-columns: 40px 1fr; column-gap: 13px; border-radius: 13px; }
  .product-top { display: contents; }
  .product-top .round-icon { grid-column: 1; grid-row: 1 / 4; width: 39px; height: 39px; margin-top: 3px; }
  .product-top .pill { grid-column: 2; grid-row: 2; justify-self: start; font-size: 14px; padding: 2px 7px; margin-top: 4px; }
  .product-name { grid-column: 2; grid-row: 1; font-size: 16px; margin: 0; padding-right: 15px; }
  .product-note { grid-column: 2; grid-row: 3; line-height: 1.6; margin: 9px 13px 0 0; max-width: none; }
  .product-bottom { position: absolute; right: 14px; top: 18px; }
  .product-bottom span { display: none; }
  .product-bottom .icon { width: 15px; height: 15px; }
  .product-help { flex-wrap: wrap; gap: 3px; padding: 17px 0; }
  .product-help .text-link { font-size: 14px; }

  .callback-section { margin-top: 18px; padding: 37px 0; }
  .callback-layout { grid-template-columns: 1fr; gap: 20px; }
  .callback-copy .eyebrow { font-size: 14px; }
  .callback-copy h2 { font-size: 29px; max-width: 330px; margin-bottom: 12px; }
  .callback-copy > p { margin-bottom: 10px; }
  .callback-copy .text-link { display: none; }
  .fields-two { gap: 12px; }
  .call-fact { margin-top: 15px; }
  .callback-box { padding: 21px; }
  .callback-box h3 { font-size: 19px; }

  .reviews-section { padding-top: 38px; padding-bottom: 0; }
  .reviews-layout { grid-template-columns: 1fr; gap: 27px; }
  .google-rating { display: grid; grid-template-columns: 1fr 1fr; padding: 25px; column-gap: 20px; align-items: center; }
  .rating-number { font-size: 61px; grid-column: 1; grid-row: 1; }
  .review-stars { font-size: 19px; margin: 10px 0 0; grid-column: 1; grid-row: 2; letter-spacing: 3px; }
  .google-rating-source { grid-column: 2; grid-row: 1 / 3; gap: 9px; }
  .testimonials blockquote p { line-height: 1.8; }

  .partners { padding: 35px 0; }
  .partners-title { margin-bottom: 22px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
  .partner-logo { height: 68px; }
  .logos .partner-logo img { max-height: 56px; }
  .logos img[alt="Swiss Life"] { max-width: 80px; }
  .logos img[alt="SPVIE Assurances"] { max-width: 108px; }

  .about { grid-template-columns: 1fr; gap: 26px; padding: 17px 0 40px; }
  .about-visual { max-height: 260px; }
  .about-visual img { aspect-ratio: 1.3; object-position: center 20%; }
  .about-caption { font-size: 16px; padding: 13px 16px; bottom: 14px; left: 14px; right: 14px; }
  .about h2 { font-size: 29px; }
  .about-facts { gap: 11px; margin-top: 20px; }

  .faq-section { padding: 35px 0; gap: 15px; }
  .faq-section h2 { font-size: 29px; }
  .faq-item summary { padding: 19px 0; }
  .faq-item p { margin-right: 10px; }

  .bottom-cta { display: block; padding: 25px; margin-bottom: 37px; }
  .bottom-cta h2 { font-size: 25px; }
  .bottom-cta p { margin-bottom: 19px; }
  .bottom-cta .btn { width: 100%; font-size: 15px; }

  footer { padding: 25px 0; }
  .footer-top { align-items: flex-start; gap: 20px; }
  .footer-links { gap: 8px; flex-direction: column; }
  .legal { line-height: 1.85; }

  .journey-top { height: 60px; }
  .journey-layout { padding-top: 20px; }
  .simple-progress { margin-bottom: 23px; }
  .progress-track { margin-top: 13px; }
  .step-heading { font-size: 28px; margin-top: 16px; }
  .step-description { margin-bottom: 23px; }
  .step-title-row .pill { font-size: 14px; }
  .choices { grid-template-columns: 1fr; gap: 8px; }
  .choice { min-height: 60px; padding: 14px 16px; gap: 9px; }
  .choice.full-span { grid-column: auto; }
  .branch-choices { gap: 10px; }
  .error-box { padding: 13px; }
  .city-field .manual-city { font-size: 14px; }
  .journey-main .field .label { font-size: 16px; }
  .form-actions { margin-top: 24px; padding-top: 20px; gap: 12px; flex-wrap: wrap; }
  .form-actions .btn { min-width: 0; flex: 1; font-size: 15px; padding-inline: 20px; }
  .form-actions .back-btn { font-size: 14px; }
  .journey-footer { margin-top: 29px; }

  .is-confirm .step-heading { font-size: 27px; }
  .is-confirm .step-description { font-size: 16px; margin-bottom: 16px; }
  .compact-recap { padding: 12px 15px; margin-bottom: 18px; }
  .recap-contact { display: block; }
  .recap-contact strong { display: block; margin-bottom: 2px; }
  .recap-contact > span { display: block; line-height: 1.65; }
  .compact-recap > details > summary { min-height: 38px; }
  .summary-group { padding: 15px; }
  .consent-prominent { padding: 20px 17px; border-radius: 13px; }
  .consent-prominent h2 { font-size: 23px; margin-bottom: 10px; }
  .consent-prominent > p { line-height: 1.7; }
  .consent-prominent .consent-choice { padding: 17px 14px; font-size: 16px; gap: 13px; min-height: 80px; margin-top: 17px; }
  .consent-prominent .consent-choice input { width: 28px; height: 28px; }
  .consent-prominent .declaration { line-height: 1.8; margin-top: 16px; }
  .is-confirm .form-actions .btn { min-width: 0; }
  .is-confirm .form-actions { gap: 10px; }
  .is-confirm .form-actions .back-btn { font-size: 14px; }
  .is-confirm .form-actions .btn { font-size: 15px; }
  .success { margin: 40px auto 45px; }
  .success h1 { font-size: 33px; }
  .success .actions { flex-direction: column; }
  .success .btn { width: 100%; }
  .hint-links { gap: 18px; }
  .success-details { padding: 19px; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { animation: none !important; transition: none !important; }
}

@media print {
  .site-header, .journey-header, .form-actions, .cf-turnstile { display: none; }
  .journey-layout { display: block; }
  body { background: #fff; }
  .wrap { width: 100%; }
  .product { break-inside: avoid; }
}

/* === SANTE-HERO-V1 debut ===================================================================== */
/*
  La banniere de lp.sca.fr/sante/ (ROAD-14 PR-02, version V1). Tout ce bloc — ses variantes par
  largeur comprises — porte le prefixe `.sante-hero`, et c'est ce qui rend le balisage de la
  banniere transposable tel quel dans une autre page (SPEC-FR-HERO4). Il est ecrit d'un seul
  tenant, ici, plutot que reparti entre le socle et les blocs de largeur communs plus haut : la
  banniere est un ASSET, et un asset se lit et se souleve en un endroit. Il ne redefinit aucune
  classe partagee ; il en EMPLOIE — `.wrap`, `.eyebrow`, `.btn`, `.arrow-circle`, `.text-link`,
  `.pill`, `.icon`, `.half-star`, `.actions` — sans les toucher.

  ⚠️ Les tailles sont celles du prototype REMONTEES AU PLANCHER de cette feuille : rien de ce qui
  se lit sous 16 px, rien d'autre sous 14 (l'en-tete du fichier porte la regle et d'ou elle
  vient). Le prototype descend a 10-13 px sur telephone ; la case MOBILE de
  tests/landing-publication.js lit cette feuille a chacun de ses points de rupture et le refuse.

  ⚠️ La photo est un FOND et non un `<img>`, pour deux raisons. Sur bureau la bande est
  `display:none`, et un fond n'est alors pas telecharge du tout — l'image ne coute qu'aux
  telephones, qui sont les seuls a la voir. Et la case ORPHAN de tests/landing-page-assets.js ne
  lit les references que de `index.html` et de cette feuille : une image que seule la page sante
  citerait y serait signalee comme un fichier que rien ne demande. Son texte de remplacement est
  porte par `role="img"` + `aria-label` dans le balisage, comme les etoiles des avis.

  ⚠️ Les points de rupture sont ceux de la feuille — 1050, 780, 560 — et pas d'autres. En ajouter
  un ferait relire toute la feuille a deux largeurs de plus par la meme case MOBILE, pour une
  banniere qui n'en a pas besoin.
*/
.sante-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; padding: 72px 0 64px; align-items: center; }
.sante-hero h1 { font-size: 58px; line-height: 1.04; letter-spacing: -0.04em; margin: 0 0 22px; max-width: 560px; }
.sante-hero h1 em { font-style: normal; color: var(--teal); }
.sante-hero-intro { font-size: 18px; color: var(--muted); line-height: 1.7; max-width: 520px; margin-bottom: 28px; }
.sante-hero .actions { gap: 22px; }
.sante-hero-rating { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; font-size: 16px; color: var(--muted); }
.sante-hero-rating strong { color: var(--ink); }
.sante-hero-stars { color: var(--star); font-size: 18px; letter-spacing: 3px; line-height: 1; }

/* La bande photo : cachee partout sauf sur telephone (ADR-006, decision du 07/09/2026). */
.sante-hero-photo { display: none; background: var(--photo-ground) url(/brand-assets/images/sante-hero.jpg) 40% 18% / cover no-repeat; }

/* La carte de la premiere question, reprise de la carte du parcours sans en partager les regles :
   `.choice` appartient au formulaire, qui n'existe pas sur cette page. */
.sante-hero-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 30px 24px; box-shadow: 0 18px 50px rgba(32, 31, 26, .08); }
.sante-hero-card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; }
.sante-hero-step { font-size: 14px; color: var(--muted); white-space: nowrap; }
.sante-hero-question { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 16px; }
.sante-hero-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sante-hero-choice {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 10px;
  min-height: 56px; line-height: 1.4; font-size: 16px; font-weight: 500;
  text-decoration: none; color: var(--ink); transition: border-color .18s, background .18s;
}
.sante-hero-choice:hover { border-color: var(--teal); background: var(--teal-tint); color: var(--teal-dark); }
.sante-hero-mark { width: 19px; height: 19px; border-radius: 50%; border: 2px solid #9c9689; background: #fff; flex: none; }
.sante-hero-choice:hover .sante-hero-mark { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 4px #fff; }
.sante-hero-note { display: flex; gap: 9px; align-items: flex-start; font-size: 16px; line-height: 1.6; color: var(--muted); margin: 18px 0 0; }
.sante-hero-note .icon { color: var(--teal); margin-top: 2px; }

/* Le bandeau fixe : telephone seulement, et c'est la seule regle du bloc qui touche un element
   hors de la banniere — le pied de page, a qui il faut sa hauteur pour que la derniere ligne
   legale ne passe pas dessous. Ecrite avec `:has` pour que l'accueil, qui ne porte pas ce
   bandeau, n'en voie rien. */
.sante-hero-sticky { display: none; }

@media (max-width: 1050px) {
  .sante-hero { gap: 40px; padding-top: 52px; }
  .sante-hero h1 { font-size: 46px; }
}

@media (max-width: 780px) {
  .sante-hero { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 40px; }
  .sante-hero h1 { font-size: 40px; max-width: none; }
  .sante-hero-intro { font-size: 16px; max-width: none; }
}

@media (max-width: 560px) {
  /* La bande touche les bords et le bloc de texte remonte de 28 px par-dessus, comme la banniere
     de l'accueil : la meme composition mobile, avec la photo en tete et la carte a la fin. */
  .sante-hero.wrap { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 0 0 8px; }
  /* ⚠️ `width: 100%` est PORTEUR, exactement comme sur la bande de l'accueil. La regle de base
     centre les deux colonnes (`align-items: center`), et cela se reporte sur la colonne flex
     d'ici : un element VIDE prend alors la largeur de son contenu, c'est-a-dire zero. La bande
     faisait 250 px de haut, 0 px de large et restait invisible — l'image demandee, la regle
     appliquee, rien sur la page et rien de rouge nulle part (mesure a 390 px avant cette ligne).
     ⚠️ `.sante-hero-copy` reprend `.hero-copy` de l'accueil valeur pour valeur, `width: 100%`
     compris et pour la meme raison : c'est la meme composition mobile, et un ecart d'un pixel
     n'y serait pas une decision mais une faute de recopie (revue de la PR #186). La hauteur de
     la bande, elle, lui est propre — 250 px et non 296. */
  .sante-hero-photo { display: block; width: 100%; height: 250px; }
  .sante-hero-copy { position: relative; z-index: 1; background: var(--cream); border-radius: 28px 28px 0 0; margin-top: -28px; padding: 27px 16px 0; width: 100%; }
  .sante-hero h1 { font-size: 34px; line-height: 1.06; letter-spacing: -0.045em; margin-bottom: 14px; }
  .sante-hero-intro { line-height: 1.6; margin-bottom: 20px; }
  .sante-hero .actions { gap: 8px; }
  .sante-hero .btn { min-height: 50px; padding: 12px 18px; }
  .sante-hero .arrow-circle { width: 32px; height: 32px; }
  .sante-hero-rating { margin-top: 14px; }
  .sante-hero-stars { font-size: 16px; }
  .sante-hero-card { margin: 22px 16px 0; padding: 20px 18px 18px; border-radius: 14px; }
  .sante-hero-card-top { margin-bottom: 14px; }
  .sante-hero-question { font-size: 21px; }
  .sante-hero-choice { min-height: 58px; padding: 13px 14px; }
  .sante-hero-note { margin-top: 14px; }

  .sante-hero-sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    padding: 10px 16px 14px; background: rgba(247, 244, 237, .97); border-top: 1px solid var(--line);
  }
  .sante-hero-sticky .btn { width: 100%; min-height: 50px; }
  body:has(.sante-hero-sticky) footer { padding-bottom: 96px; }
}
/* === SANTE-HERO-V1 fin ======================================================================= */

/* === SANTE-HERO-V2 debut ===================================================================== */
/*
  La banniere de lp.sca.fr/sante/v2/ (ROAD-14 PR-03, version V2). Meme regle que la V1 : tout ce
  bloc porte UN seul prefixe, `.sante-v2-`, et c'est ce qui rend le balisage transposable tel quel
  dans une autre page (SPEC-FR-HERO4). Il n'emploie que des classes partagees existantes —
  `.wrap`, `.eyebrow`, `.actions`, `.btn`, `.arrow-circle`, `.icon`, `.small-icon`, `.round-icon`,
  `.half-star` — sans les toucher : ce qui est ecrit ici sous une de ces classes la porte TOUJOURS avec `.sante-v2-…`
  devant, donc ne sort jamais de la banniere.

  ⚠️ Le prefixe est distinct de celui de la V1, et ce n'est pas une preference de nommage : les
  deux pages chargent CETTE feuille, la seule du site. Une regle `.sante-hero` ecrite ici
  repeindrait la banniere de l'autre version, a distance et sans que rien ne le dise.

  La composition est celle du prototype approuve (prototypes/v2/index.html, ADR-004) : la copie a
  gauche — surtitre, titre, chapeau, UN bouton, la ligne de reassurance, la ligne d'avis Google —
  et a droite la photo encadree, sa pastille, sa carte conseiller et sa legende.

  ⚠️ Les tailles sont celles du prototype REMONTEES AU PLANCHER de cette feuille : rien de ce qui
  se lit sous 16 px, rien d'autre sous 14 (l'en-tete du fichier porte la regle et d'ou elle
  vient). Le prototype descend a 10-13 px sur la pastille, la legende, la reassurance et la ligne
  d'avis ; la case MOBILE de tests/landing-publication.js lit cette feuille a chacun de ses points
  de rupture et le refuse.

  ⚠️ La photo est un `<img>` et non un fond, a l'inverse de la V1 — et pour la raison exacte qui
  faisait choisir un fond la-bas. La bande de la V1 est `display:none` hors telephone, donc un
  fond ne coute rien a ceux qui ne la voient pas ; ici la photo est visible A TOUTE LARGEUR, donc
  toujours telechargee, et un `<img>` porte alors ce qu'un fond ne porte pas : son texte de
  remplacement, ses dimensions — donc la place reservee avant l'arrivee du fichier — et
  `fetchpriority`, comme la photo de la banniere de l'accueil. C'est le MEME fichier que la V1
  affiche en bandeau, /brand-assets/images/sante-hero.jpg : une seule photo livree, deja citee par
  cette feuille, donc rien d'orphelin pour tests/landing-page-assets.js.

  ⚠️ Le point de rupture 760 est PROPRE a ce bloc, et il est voulu : la V1 passe sur une colonne a
  780, la V2 a 760, donc a 768 px les deux versions different legitimement (reference.md §3, et
  c'est ce que la recette R2.10 lit). Il ajoute DEUX largeurs d'echantillon a la case MOBILE de
  tests/landing-publication.js — 760 et 761, car `sheetWidths()` prend chaque point de rupture et
  le pixel d'apres ; les deux autres — 1050 et 560 — sont celles de la feuille.
*/
.sante-v2-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; padding: 68px 0 64px; align-items: center; }
/* ⚠️ `min-width: 0` sur les deux colonnes : une colonne de grille vaut `auto` par defaut, donc
   ne descend pas sous la largeur de son contenu — un titre long ou la photo elargit la banniere
   et la page defile lateralement, ce que SPEC-FR-HERO0 refuse a toutes les largeurs du jeu. */
.sante-v2-copy, .sante-v2-art { min-width: 0; }
.sante-v2-hero h1 { font-size: 57px; line-height: 1.08; letter-spacing: -0.045em; margin: 0 0 24px; max-width: 560px; }
.sante-v2-hero h1 em { font-style: normal; color: var(--teal); }
.sante-v2-intro { font-size: 18px; line-height: 1.7; color: var(--muted); max-width: 480px; margin-bottom: 28px; }
.sante-v2-reassurance, .sante-v2-proof { display: flex; align-items: center; font-size: 16px; color: var(--muted); }
.sante-v2-reassurance { gap: 9px; margin: 20px 0 0; }
.sante-v2-reassurance .icon { color: var(--teal); }
.sante-v2-proof { gap: 11px; margin: 18px 0 0; text-decoration: none; }
.sante-v2-proof strong { color: var(--ink); }
.sante-v2-stars { color: var(--star); font-size: 18px; letter-spacing: 3px; line-height: 1; }

/* La composition photo : le cadre porte la forme, le badge et le conseiller flottent autour de lui.
   Le `padding` de la colonne est la marge dans laquelle ils debordent.
   ⚠️ Il n'y a plus de LEGENDE, et la reserve du bas n'est plus la sienne. Le prototype en porte une
   (« Votre quotidien change… ») ; elle etait absolue en `bottom: 0` dans une reserve d'UNE ligne et
   passait par-dessus la carte du conseiller des que la piste se resserrait — 768, 390 et 320, trois
   des cinq largeurs du jeu de conception (revue navigateur du 13/09/2026). Le chef de projet l'a
   RETIREE le meme jour, ce qui supprime la piece plutot que de la replacer : il n'y a donc plus rien
   ici dont la hauteur puisse pousser le conseiller, et la colonne redevient le simple repere qu'elle
   etait. La remettre ramenerait le defaut — reference.md §6 C8, et tests/sante-landing-page.js le
   refuse. */
.sante-v2-art { position: relative; padding: 16px 0 40px 12px; }
.sante-v2-frame { height: 450px; overflow: hidden; border-radius: 140px 140px 20px 20px; background: var(--photo-ground); }
.sante-v2-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.sante-v2-badge {
  position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 9px;
  background: var(--teal-tint); border: 1px solid #cddcd5; border-radius: 50px; padding: 9px 18px;
  color: var(--teal); font-family: var(--heading); font-weight: 700; font-size: 16px;
  transform: rotate(-5deg);
}
.sante-v2-adviser {
  position: absolute; left: -10px; bottom: 34px; display: flex; align-items: center; gap: 15px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 18px 24px;
  box-shadow: 0 10px 25px rgba(32, 31, 26, .06);
}
.sante-v2-adviser .round-icon { background: var(--teal-tint); color: var(--teal); }
.sante-v2-adviser strong { font-family: var(--heading); font-size: 20px; line-height: 1.25; display: block; }
.sante-v2-adviser-note { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }

@media (max-width: 1050px) {
  .sante-v2-hero { gap: 28px; padding-top: 52px; }
  .sante-v2-hero h1 { font-size: 46px; }
  .sante-v2-frame { height: 410px; }
  .sante-v2-adviser { padding: 15px 19px; }
}

/* Une colonne a 760 et non a 780 : voir la note du bloc. La photo garde sa largeur de lecture et
   se centre, plutot que de s'etirer sur toute la largeur d'une tablette. */
@media (max-width: 760px) {
  .sante-v2-hero { grid-template-columns: 1fr; gap: 26px; padding: 36px 0 40px; }
  .sante-v2-hero h1 { font-size: 40px; max-width: none; }
  .sante-v2-intro { font-size: 16px; max-width: none; }
  .sante-v2-art { max-width: 520px; width: 100%; margin-inline: auto; padding-left: 0; }
  .sante-v2-frame { height: 350px; border-radius: 100px 100px 18px 18px; }
  .sante-v2-adviser { left: 0; }
}

@media (max-width: 560px) {
  .sante-v2-hero { padding: 30px 0 36px; gap: 22px; }
  .sante-v2-hero h1 { font-size: 34px; line-height: 1.06; }
  .sante-v2-hero .btn { min-height: 50px; padding: 12px 18px; }
  .sante-v2-hero .arrow-circle { width: 32px; height: 32px; }
  .sante-v2-frame { height: 290px; border-radius: 85px 85px 15px 15px; }
  .sante-v2-badge { padding: 7px 14px; }
  .sante-v2-adviser { left: 6px; bottom: 28px; padding: 15px 18px; gap: 12px; }
  .sante-v2-adviser strong { font-size: 18px; }
}
/* === SANTE-HERO-V2 fin ======================================================================= */