/* Vitrine vilge.fr (MKTG-1) — feuille unique des pages publiques.
   Spec : docs/spec-mktg-1-landing-page.md §6 · maquette d'origine : docs/maquettes/mktg-1-landing.html

   DIRECTION ARTISTIQUE : CELLE DE L'APPLICATION (HLG, 2026-10-11, « aligne la vitrine avec
   la charte de Vilgé »). La palette de maquette (plâtre, ardoise, ocre, zinc) et ses polices
   (Archivo, IBM Plex) sont remplacées par les jetons de la nouvelle UI v2 :
   frontend/src/styles/v2/socle-v2.css est la SOURCE, ce bloc en est une COPIE de valeurs.
   La vitrine ne charge aucune feuille de l'application (hébergement séparé, terraform/vitrine) :
   les noms sont ceux du socle pour qu'un écart se lise d'un `diff` de noms à valeurs.
   Formes reprises des primitives v2 : bouton plein `--accent-ink` / secondaire blanc cerclé
   (primitives-v2.css §3.4), rayon `--r-2` et 44 px de haut comme l'écran de connexion
   (pages/connexion.css), carte `--panel` + `--border` + `--r-3`, pastille `--r-full`,
   libellé de rubrique en capitales `--fs-2`/600/.04em (`.section-titre-v2`, fiche-v2.css),
   bandeau de fiche `--nav` 8 % (fiche-v2.css), focus `--focus-ring` (focus.css).
   Graisses D52 : 400 texte, 600 appuis (boutons, pastilles, sous-titres, sommes de ligne),
   800 pour le titre principal et les chiffres clés. Aucune autre.

   Écarts volontaires à l'application, chacun motivé :
   · Le titre du héros va jusqu'à 60 px (l'app plafonne `--fs-titre` à 37 px) : c'est la
     première phrase d'une page publique lue de loin, pas un nom d'écran.
   · Corps de texte en `--fs-5` (17 px) et non `--fs-4` : texte long de lecture continue.
   · Trois jetons propres à la vitrine, DÉRIVÉS et non choisis : `--sur-nav` (blanc 78 % sur
     `--nav`, planning-v2.css), `--sur-nav-2` (blanc 62 %, `.coquille-pied`) et
     `--fond-bandeau` (`--nav` 8 % sur `--panel`, fiche-v2.css), écrits en hexadécimal parce
     que le contraste se mesure sur une couleur opaque (frontend/test/vitrine.test.mjs).
   · Le focus sur les sections pétrole est BLANC : l'anneau `--nav` y mesure 1,00:1 — le
     même cas que le lien d'évitement de la coquille (coquille-v2.css, D52).
   Restent de la version précédente : aucune fonte chargée (la pile système EST la police de
   l'app), aucun attribut `style=` (CSP `style-src 'self'`), séquence d'arrivée en CSS seul. */
:root{
  --nav:#0d3b43;
  --nav-2:#174b54;
  --bg:#f6f5f2;
  --panel:#ffffff;
  --card2:#faf9f7;
  --line:#e6e1d9;
  --border:#e6e1d9;
  --border-3:#dcd7cf;
  --text:#102a34;
  --strong:#102a34;
  --soft:#59728c;
  --accent:#ed6a16;
  --accent-ink:#b34d08;
  --lien:#005df6;
  --blue:#236184;
  --blue-soft:#e8f2f7;
  --white:#ffffff;
  --st-encours-fill:#d4c9a8;
  /* propres à la vitrine, dérivés (voir l'en-tête) */
  --sur-nav:#cad4d6;
  --sur-nav-2:#a3b4b8;
  --fond-bandeau:#eceff0;

  --focus-ring:var(--nav);
  --focus-w:2.5px;
  --focus-off:3px;

  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --title:var(--body);
  --data:var(--body);
  --fs-1:12px;--fs-2:13px;--fs-3:14px;--fs-4:15px;--fs-5:17px;--fs-6:18px;--fs-7:22px;
  --fs-display:34px;
  --fs-titre:clamp(28px,2.2vw,37px);
  --fw-texte:400;--fw-appui:600;--fw-titre:800;--fw-chiffre:800;

  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --r-0:4px;--r-1:8px;--r-2:12px;--r-3:16px;--r-full:999px;
  --sh-surface:0 10px 28px rgba(16,42,52,.055);
  --sh-float:0 18px 40px rgba(16,42,52,.16);
  --dur-1:120ms;
  --ease:cubic-bezier(0.2,0.6,0.2,1);

  --gouttiere:clamp(16px,5vw,64px);
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:var(--fs-5);font-weight:var(--fw-texte);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{font-family:var(--title);font-weight:var(--fw-appui);line-height:1.15;margin:0;color:inherit}
p{margin:0}
a{color:inherit}
b,strong{font-weight:var(--fw-appui)}
:focus-visible{outline:var(--focus-w) solid var(--focus-ring);outline-offset:var(--focus-off)}
.derivation :focus-visible,.attente :focus-visible{outline-color:var(--white)}
.attente .formulaire :focus-visible{outline-color:var(--focus-ring)}
[id]{scroll-margin-top:84px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.evitement{position:absolute;left:var(--sp-2);top:-60px;z-index:30;background:var(--panel);
  color:var(--strong);font-size:var(--fs-4);font-weight:var(--fw-appui);
  padding:var(--sp-2) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-2)}
.evitement:focus{top:var(--sp-2);box-shadow:var(--sh-float)}

.enveloppe{max-width:var(--max);margin:0 auto;padding-inline:var(--gouttiere)}
.section{padding-block:clamp(56px,9vw,110px)}
/* le libellé de rubrique de l'app (`.section-titre-v2`) */
.oeil{font-size:var(--fs-2);font-weight:var(--fw-appui);letter-spacing:.04em;
  text-transform:uppercase;color:var(--soft)}
.titre-section{margin-top:var(--sp-3);font-size:var(--fs-titre);color:var(--strong)}
.texte-sobre{margin-top:var(--sp-4);color:var(--soft);max-width:56ch}

/* en-tête — la barre haute blanche de l'app */
.entete{position:sticky;top:0;z-index:20;background:var(--panel);border-bottom:1px solid var(--line)}
.entete .enveloppe{display:flex;align-items:center;gap:var(--sp-4);min-height:64px;justify-content:space-between}
/* la marque comme sur l'écran de connexion : « Vilgé » d'un seul tenant, pétrole, 600 */
.marque{font-family:var(--title);font-weight:var(--fw-appui);font-size:var(--fs-7);
  color:var(--nav);text-decoration:none}
.marque i{font-style:normal;color:inherit}
.nav{display:flex;gap:var(--sp-5);align-items:center;font-size:var(--fs-3)}
.nav a{color:var(--soft);text-decoration:none}
.nav a:hover{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.nav a.bouton{color:var(--white)}
.nav a.bouton:hover{text-decoration:none}
@media(max-width:640px){.nav a:not(.bouton){display:none}}

/* boutons — `.btn` v2 : plein `--accent-ink`, libellé blanc 5,27:1 */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--body);font-size:var(--fs-4);font-weight:var(--fw-appui);line-height:1.3;text-align:center;
  min-height:44px;padding:var(--sp-2) var(--sp-5);border:1px solid var(--accent-ink);border-radius:var(--r-2);
  background:var(--accent-ink);color:var(--white);text-decoration:none;cursor:pointer;
  transition:background-image var(--dur-1) var(--ease)}
@media(hover:hover){.bouton:hover{background-image:linear-gradient(color-mix(in srgb,currentColor 10%,transparent) 0 0)}}
.bouton:active{background-image:linear-gradient(color-mix(in srgb,currentColor 18%,transparent) 0 0)}
.bouton-mini{min-height:34px;padding:var(--sp-1) var(--sp-4);font-size:var(--fs-2)}
/* `.btn.ghost` v2 : surface blanche cerclée, pas un fantôme gris */
.bouton-sobre{background:var(--panel);border-color:var(--border-3);color:var(--text)}
@media(prefers-reduced-motion:reduce){.bouton{transition:none}}

/* héros */
.heros{padding-top:clamp(40px,7vw,80px);padding-bottom:clamp(48px,8vw,96px)}
.heros .enveloppe{display:grid;gap:clamp(36px,5vw,60px)}
@media(min-width:980px){.heros .enveloppe{grid-template-columns:1.02fr .98fr;align-items:start}}
.heros h1{font-size:clamp(var(--fs-display),5.4vw,60px);font-weight:var(--fw-titre);line-height:1.08;
  color:var(--strong);margin:var(--sp-4) 0 0}
.heros h1 em{font-style:normal;display:block;color:var(--accent-ink)}
.chapeau{margin-top:var(--sp-5);font-size:clamp(var(--fs-6),2vw,var(--fs-7));color:var(--soft);max-width:36ch;line-height:1.5}
.chapeau b{color:var(--text)}
.avis-lancement{margin-top:var(--sp-5);font-size:var(--fs-3);color:var(--soft);
  border-left:3px solid var(--accent);padding:2px 0 2px var(--sp-3)}
.avis-lancement b{color:var(--text)}
.actions{margin-top:var(--sp-5);display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* fiche chantier — une carte v2, bandeau de fiche en tête */
.fiche{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3);
  box-shadow:var(--sh-surface);overflow:hidden;min-width:0}
.fiche-tete{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5);background:var(--fond-bandeau);color:var(--strong);
  border-bottom:1px solid var(--line)}
/* « En cours » : la pastille de statut de l'app, aplat généré `--st-encours-fill` */
.fiche-tete .oeil{color:var(--text);background:var(--st-encours-fill);border-radius:var(--r-full);
  padding:2px 10px;font-size:var(--fs-1);letter-spacing:normal;text-transform:none;white-space:nowrap}
.fiche-tete strong{font-size:var(--fs-4);font-weight:var(--fw-appui)}
.ligne{display:grid;grid-template-columns:1fr auto;gap:var(--sp-1) var(--sp-4);align-items:baseline;
  padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line)}
.ligne .lib{font-size:var(--fs-4)}
.ligne .det{grid-column:1/-1;font-size:var(--fs-2);color:var(--soft)}
.ligne .mt{grid-row:1;grid-column:2;font-family:var(--data);font-size:var(--fs-5);font-weight:var(--fw-appui);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ligne.total{background:var(--card2);border-bottom:0;border-top:2px solid var(--nav);padding-block:var(--sp-5)}
.ligne.total .lib{font-weight:var(--fw-appui);font-size:var(--fs-6)}
.ligne.total .mt{font-size:clamp(var(--fs-7),6vw,28px);font-weight:var(--fw-chiffre);color:var(--strong)}
.ligne.total .det{color:var(--soft)}
.fiche-pied{padding:var(--sp-4) var(--sp-5);font-size:var(--fs-3);color:var(--soft);background:var(--card2);
  border-top:1px solid var(--line)}
.fiche-pied b{color:var(--text)}
/* le tampon « déjà saisi » — trois emplois exactement (spec §6.3) : une pastille
   d'information v2 (`--blue` sur `--blue-soft`, 5,93:1), ni tampon penché ni capitales */
.tampon{display:inline-block;font-size:var(--fs-1);font-weight:var(--fw-appui);line-height:1.4;
  color:var(--blue);background:var(--blue-soft);border-radius:var(--r-full);
  padding:1px var(--sp-2);margin-left:var(--sp-2);white-space:nowrap;vertical-align:1px}

/* le calcul — section pétrole, le châssis de l'app */
.derivation{background:var(--nav);color:var(--white)}
.derivation h2{max-width:20ch;color:var(--white)}
.derivation .oeil{color:var(--sur-nav)}
.derivation p.intro{color:var(--sur-nav);margin-top:var(--sp-4);max-width:56ch}
.sources{display:grid;gap:var(--sp-4);margin-top:44px}
@media(min-width:820px){.sources{grid-template-columns:repeat(3,1fr);gap:18px}}
.source{border:1px solid rgb(255 255 255 / 14%);border-radius:var(--r-3);padding:var(--sp-5);background:var(--nav-2)}
.source h3{font-size:var(--fs-6);color:var(--white)}
.source p{margin-top:var(--sp-2);font-size:var(--fs-4);color:var(--sur-nav)}
.marque-src{font-size:var(--fs-2);font-weight:var(--fw-appui);letter-spacing:.04em;text-transform:uppercase;
  color:var(--sur-nav);display:block;margin-bottom:var(--sp-3)}
.convergence{display:flex;align-items:center;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-5);
  border-top:1px solid rgb(255 255 255 / 14%);padding-top:var(--sp-5);flex-wrap:wrap}
.convergence .fleche{color:var(--accent);font-size:var(--fs-7)}
.convergence strong{font-weight:var(--fw-appui);font-size:clamp(var(--fs-6),2.2vw,var(--fs-7));color:var(--white)}
.convergence span{color:var(--sur-nav);font-size:var(--fs-4)}

/* pastilles — coché : ce que Vilgé prend ; barré : la corvée épargnée (spec §6.5).
   Une pastille barrée nomme une CORVÉE, jamais un concurrent. Forme : `.badge` v2. */
.pastilles{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.pastille{display:inline-flex;align-items:center;gap:var(--sp-2);padding:6px var(--sp-4) 6px 6px;border-radius:var(--r-full);
  font-size:var(--fs-3);font-weight:var(--fw-appui);line-height:1.3}
.pastille.oui{background:var(--panel);color:var(--text);border:1px solid var(--border-3)}
.pastille.non{padding-left:var(--sp-4);background:var(--card2);color:var(--soft);
  border:1px dashed var(--border-3);text-decoration:line-through;text-decoration-thickness:1.5px}
.coche{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;
  border-radius:50%;background:var(--accent-ink);color:var(--white);font-size:var(--fs-1);font-weight:var(--fw-appui)}
.derivation .pastille.oui{background:var(--nav-2);color:var(--white);border-color:rgb(255 255 255 / 28%)}
.derivation .pastille.non{background:transparent;color:var(--sur-nav-2);border-color:rgb(255 255 255 / 28%)}
.pastilles-calcul{margin-top:var(--sp-6)}
.pastilles-titre{font-weight:var(--fw-appui);font-size:var(--fs-titre);line-height:1.15;color:var(--strong)}
.soir{padding-block:clamp(44px,7vw,80px);border-bottom:1px solid var(--line)}
.soir .pastilles{margin-top:var(--sp-5)}
.soir .suite{margin-top:18px;color:var(--soft);max-width:52ch}

/* ce que ça propose */
.offre h2{max-width:18ch}
.grille-offre{display:grid;gap:1px;background:var(--line);border:1px solid var(--border);
  margin-top:44px;border-radius:var(--r-3);overflow:hidden}
@media(min-width:720px){.grille-offre{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.grille-offre{grid-template-columns:repeat(3,1fr)}}
.bloc{background:var(--panel);padding:var(--sp-5)}
.bloc h3{font-size:var(--fs-6);color:var(--strong);margin-bottom:var(--sp-2)}
.bloc p{font-size:var(--fs-4);color:var(--soft)}
.bloc ul{margin:var(--sp-3) 0 0;padding-left:0;list-style:none;font-size:var(--fs-3);color:var(--soft)}
.bloc li{padding-left:var(--sp-4);position:relative;margin-top:var(--sp-1)}
.bloc li::before{content:"—";position:absolute;left:0;color:var(--accent)}

/* prix, présentés comme un devis */
.prix{background:var(--panel);border-block:1px solid var(--line)}
.prix .sous{margin-top:14px;color:var(--soft);max-width:52ch}
.devis{margin-top:40px;border:1px solid var(--border);border-radius:var(--r-3);background:var(--panel);
  box-shadow:var(--sh-surface);overflow:hidden}
/* l'en-tête de colonnes des listes de l'app : libellé de rubrique sur `--card2` */
.devis-tete{display:none;background:var(--card2);color:var(--soft);border-bottom:1px solid var(--line);
  font-size:var(--fs-2);font-weight:var(--fw-appui);letter-spacing:.04em;text-transform:uppercase;padding:var(--sp-3) var(--sp-5)}
.palier{padding:var(--sp-5);border-bottom:1px solid var(--line)}
@media(min-width:760px){
  .devis-tete,.palier{display:grid;grid-template-columns:1.6fr .9fr .8fr .8fr;gap:var(--sp-4);align-items:center}
}
/* le palier phare : liseré `--accent` (emploi décoratif du §3.2), aplat `--card2` */
.palier.phare{background:var(--card2);box-shadow:inset 4px 0 0 var(--accent)}
.palier h3{font-size:var(--fs-7);color:var(--strong)}
.palier .cible{font-size:var(--fs-3);color:var(--soft);margin-top:var(--sp-1)}
.palier .cel{font-variant-numeric:tabular-nums;font-size:var(--fs-4);color:var(--soft);margin-top:10px}
@media(min-width:760px){.palier .cel{margin-top:0}}
.palier .mensuel{font-variant-numeric:tabular-nums;font-size:28px;font-weight:var(--fw-chiffre);color:var(--strong)}
.palier .mensuel.sur-devis{font-size:var(--fs-6);font-weight:var(--fw-appui)}
.palier small{font-size:var(--fs-2);font-weight:var(--fw-texte);color:var(--soft)}
.etiquette-coeur{font-size:var(--fs-1);font-weight:var(--fw-appui);color:var(--accent-ink);
  border:1px solid currentColor;border-radius:var(--r-full);padding:1px var(--sp-2);
  display:inline-block;margin-bottom:var(--sp-2);background:var(--panel)}
.inclus{padding:var(--sp-5);background:var(--card2);border-top:1px solid var(--line)}
.inclus .oeil{display:block;margin-bottom:var(--sp-3)}
.inclus .precision{margin-top:14px;font-size:var(--fs-3);color:var(--soft)}
.note-prix{margin-top:18px;font-size:var(--fs-3);color:var(--soft);max-width:72ch}

/* limites */
.limites h2{max-width:22ch}
.limites .intro{margin-top:var(--sp-4);color:var(--soft);max-width:56ch}
.liste-limites{margin:36px 0 0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--border);border-radius:var(--r-3);overflow:hidden}
@media(min-width:820px){.liste-limites{grid-template-columns:1fr 1fr}}
.liste-limites li{background:var(--panel);padding:var(--sp-5)}
.liste-limites b{display:block;font-size:var(--fs-5);color:var(--strong);margin-bottom:6px}
.liste-limites span{font-size:var(--fs-4);color:var(--soft)}

/* liste d'attente — section pétrole, carte blanche comme l'écran de connexion */
.attente{background:var(--nav);color:var(--white)}
.attente .enveloppe{display:grid;gap:clamp(32px,5vw,64px)}
@media(min-width:940px){.attente .enveloppe{grid-template-columns:1fr 1fr;align-items:start}}
.attente h2{max-width:16ch;color:var(--white)}
.attente .oeil{color:var(--sur-nav)}
.attente p.intro{margin-top:var(--sp-4);color:var(--sur-nav);max-width:46ch}
.attente a{color:var(--white)}
.formulaire{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-2);
  padding:clamp(20px,3vw,var(--sp-6));box-shadow:var(--sh-float)}
.attente .formulaire a{color:var(--lien)}
.attente .formulaire a.bouton{color:var(--white)}
.formulaire h3{font-size:var(--fs-7);font-weight:var(--fw-appui);color:var(--strong);margin-bottom:10px}
.formulaire p{font-size:var(--fs-4);color:var(--soft)}
.formulaire .bouton{width:100%;margin-top:18px}
.formulaire .aide{font-size:var(--fs-2);margin-top:var(--sp-3)}
.qr{margin-top:40px;display:grid;gap:var(--sp-5)}
.qr div{border-top:1px solid rgb(255 255 255 / 14%);padding-top:var(--sp-4)}
.qr h3{font-size:var(--fs-5);margin-bottom:6px;line-height:1.3;color:var(--white)}
.qr p{font-size:var(--fs-4);color:var(--sur-nav)}

/* pied */
.pied{padding-block:38px;font-size:var(--fs-3);color:var(--soft)}
.pied .enveloppe{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center}
.pied b{color:var(--nav)}
.pied nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.pied nav a{color:var(--text)}

/* pages de texte (« données personnelles », page introuvable) : la carte des pages
   juridiques de l'application (frontend/src/legal.css) */
.page-texte{max-width:760px;margin:var(--sp-6) auto calc(2 * var(--sp-6));padding:var(--sp-6);
  background:var(--panel);border:1px solid var(--border);border-radius:var(--r-3)}
.page-texte h1{font-size:var(--fs-titre);font-weight:var(--fw-titre);color:var(--strong);margin-top:var(--sp-2)}
.page-texte h2{font-size:var(--fs-6);color:var(--strong);margin-top:var(--sp-6)}
.page-texte p,.page-texte ul,.page-texte ol{margin-top:14px}
.page-texte p,.page-texte li{font-size:var(--fs-4)}
.page-texte ul,.page-texte ol{padding-left:var(--sp-5)}
.page-texte li{margin-top:6px}
.page-texte a:not(.bouton){color:var(--lien);text-decoration:underline}
.page-texte a:not(.bouton):hover{text-decoration:none}
.page-texte .maj{margin-top:var(--sp-3);font-size:var(--fs-3);color:var(--soft)}
@media(max-width:767px){.page-texte{margin:var(--sp-4) var(--sp-3) var(--sp-6);padding:var(--sp-5) var(--sp-4)}}

/* séquence d'arrivée : une seule, sur la fiche (spec §6.4), sans JavaScript */
@media(prefers-reduced-motion:no-preference){
  .anim{animation:monte .5s cubic-bezier(.2,.7,.3,1) both}
  .anim:nth-child(2){animation-delay:.10s}
  .anim:nth-child(3){animation-delay:.28s}
  .anim:nth-child(4){animation-delay:.46s}
  .anim:nth-child(5){animation-delay:.64s}
  .anim:nth-child(6){animation-delay:.86s}
  @keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}