/* app/static/css/accueil_publique.css — mise en page de la landing publique,
   portee depuis docs/reference/maquette-landing-cookingstat.html (Task 5).

   Jetons : la landing est volontairement mono-theme clair (pas de bascule
   sombre, meme commentaire que dans la maquette source) -- ce fichier
   redefinit donc a la racine les jetons generiques (--bg, --panel, --line,
   --ink...) avec les valeurs EXACTES de la maquette plutot que celles de
   tokens.css, pour une fidelite pixel a la source de ce lot. Seule
   exception : --blue/--blue-hover/--blue-ink valent deja exactement
   --acc/--accHover/--accTxt de tokens.css (#34628e / #2a4e72 / #ffffff) --
   coincidence voulue par CLAUDE.md ("un seul accent bleu"), gardee ici sous
   les noms de variables de la maquette pour permettre un portage quasi
   verbatim du reste de sa feuille de style. Ce fichier n'est charge que sur
   "/", donc cette redefinition ne fuit jamais vers les autres pages.

   Polices : Archivo + JetBrains Mono, deja auto-hebergees et chargees par
   base.html via fonts.css -- aucun @font-face ici. La maquette utilise deux
   familles fictives "Fooz Display"/"Fooz Body" en 800/700 : remplacees ici
   par 'Archivo' plafonne a 700 (le plus gras livre par fonts.css). Les
   "eyebrow"/chiffres restent en JetBrains Mono (regle generique plus bas),
   pas en Archivo Display comme dans la maquette -- choix deja pris au
   Task 4 pour ce fichier, conserve tel quel. */

:root{
  --bg:#fbfaf8; --panel:#f3f2ee; --surface:#ffffff;
  --ink:#141d29; --ink-2:#4b5563; --muted:#8a93a0;
  --line:rgba(20,29,41,.10); --line-2:rgba(20,29,41,.17);
  --blue:#34628e; --blue-hover:#2a4e72; --blue-ink:#ffffff;
  --blue-soft:rgba(52,98,142,.09); --blue-line:rgba(52,98,142,.30);
  --orange:#ff5a1f; --orange-ink:#1c1200;
  --rose:#e11d48; --rose-soft:rgba(225,29,72,.10);
  --teal:#0d9488; --violet:#7c3aed; --amber:#d97706;
  --shadow-card:0 14px 36px rgba(20,20,15,.08);
  --shadow-lift:0 24px 56px rgba(20,20,15,.14);
  --shadow-pop:0 34px 80px rgba(20,20,15,.20);
  color-scheme:light;
}

.accueil-publique{
  font-family:'Archivo', var(--font-body, sans-serif);
  background:var(--bg);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
}
.accueil-publique h1,
.accueil-publique h2,
.accueil-publique h3,
.accueil-publique h4{
  font-family:'Archivo', var(--font-body, sans-serif);
  font-weight:700;
  line-height:1.04;
  margin:0;
  letter-spacing:-.015em;
}
.accueil-publique p{margin:0}
.accueil-publique img{max-width:100%;height:auto;display:block}
.accueil-publique a{color:inherit;text-decoration:none}
.accueil-publique button{font:inherit;color:inherit;background:none;border:none}
.accueil-publique .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
}
.accueil-publique .container{max-width:1180px;margin:0 auto;padding-inline:24px}
.accueil-publique section{position:relative}
.accueil-publique :focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:4px}
.accueil-publique .accent{color:var(--blue)}

.accueil-publique .reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.accueil-publique .reveal.is-visible{opacity:1;transform:none}
.accueil-publique .reveal-stagger > *{transition-delay:calc(var(--i,0) * 80ms)}
@media (prefers-reduced-motion: reduce){ .accueil-publique .reveal{opacity:1;transform:none;transition:none} }

#barre-progression{position:fixed;top:0;left:0;height:3px;width:0%;background:linear-gradient(90deg,var(--blue),var(--orange));z-index:1000;transition:width .12s linear}
.accueil-publique .skip-link{position:absolute;left:16px;top:-60px;z-index:1001;background:var(--blue);color:var(--blue-ink);padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s ease}
.accueil-publique .skip-link:focus{top:16px}

/* ================= NAV FLOTTANTE ================= */
.entete-fixe{position:sticky;top:0;z-index:900;padding-top:16px;padding-bottom:8px}
header.entete{max-width:1180px;margin:0 auto;padding-inline:24px}
.entete-pilule{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 12px 10px 20px;box-shadow:0 2px 10px rgba(20,20,15,.05);transition:box-shadow .25s ease,transform .25s ease}
.entete-fixe.scrolled .entete-pilule{box-shadow:var(--shadow-card);transform:translateY(2px)}
.marque{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.marque-emoji{font-size:1.7rem;line-height:1;display:inline-block}
.marque span{font-family:'Archivo';font-weight:700;font-size:1.24rem;letter-spacing:-.02em;color:var(--ink)}
.marque span i{color:var(--orange);font-style:normal}
nav.nav-desktop{display:flex;align-items:center;gap:4px}
nav.nav-desktop a{padding:9px 14px;border-radius:999px;font-size:.9rem;font-weight:700;text-decoration:none;color:var(--ink-2);transition:color .2s ease,background-color .2s ease}
nav.nav-desktop a:hover{color:var(--ink);background:var(--blue-soft)}
.entete-cta{display:flex;align-items:center;gap:6px;flex-shrink:0}
.lien-connexion{padding:9px 12px;font-size:.9rem;font-weight:700;text-decoration:none;color:var(--ink-2)}
.lien-connexion:hover{color:var(--ink)}

.accueil-publique .bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;border:1.5px solid transparent;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.3,1.3),box-shadow .25s ease,background-color .2s ease,border-color .2s ease;white-space:nowrap}
.accueil-publique .bouton-bleu{background:var(--blue);color:var(--blue-ink);box-shadow:0 10px 24px var(--blue-line)}
.accueil-publique .bouton-bleu:hover{background:var(--blue-hover);transform:translateY(-2px)}
.accueil-publique .bouton-fantome{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.accueil-publique .bouton-fantome:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}
.accueil-publique .bouton-petit{padding:9px 17px;font-size:.86rem}
.magnetique{will-change:transform}

.bouton-menu{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);align-items:center;justify-content:center;cursor:pointer}
.bouton-menu span,.bouton-menu span::before,.bouton-menu span::after{content:"";display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .25s ease,opacity .25s ease}
.bouton-menu span::before{position:absolute;top:-5px}
.bouton-menu span::after{position:absolute;top:5px}
.bouton-menu[aria-expanded="true"] span{background:transparent}
.bouton-menu[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
.bouton-menu[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}
.panneau-mobile{display:none;position:absolute;left:24px;right:24px;top:70px;z-index:850;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 20px 20px;box-shadow:var(--shadow-lift);transform:translateY(-10px);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease}
.panneau-mobile.ouvert{transform:none;opacity:1;pointer-events:auto}
.panneau-mobile a{display:block;padding:13px 4px;font-weight:700;font-size:1.02rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
.panneau-mobile .entete-cta{flex-direction:column;align-items:stretch;margin-top:14px}
@media (max-width:860px){ nav.nav-desktop{display:none} .entete-cta{display:none} .bouton-menu{display:inline-flex} .panneau-mobile{display:block} }

/* ================= HERO (fond en vallee) ================= */
.hero{padding-block:64px 20px;overflow:clip;text-align:center}
.hero-fond{position:absolute;inset:-40px 0 auto 0;height:820px;pointer-events:none;z-index:-1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 8px;font-size:.86rem;font-weight:700;color:var(--ink-2);box-shadow:0 2px 8px rgba(20,20,15,.04);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.hero-badge:hover{transform:translateY(-2px);border-color:var(--blue-line)}
.hero-badge .puce{background:var(--blue-soft);color:var(--blue);border-radius:999px;padding:3px 10px;font-weight:700;font-size:.78rem}
.hero h1{font-size:clamp(2.3rem,5.4vw,4rem);max-width:19ch;margin:26px auto 20px}
.hero-lede{font-size:1.15rem;color:var(--ink-2);max-width:52ch;margin:0 auto 32px}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;margin-bottom:16px}
.hero-microcopie{font-size:.85rem;color:var(--muted)}

.hero-carte-flottante{max-width:340px;margin:52px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px;box-shadow:var(--shadow-pop);display:flex;align-items:center;gap:14px;text-align:left;transition:transform .3s ease}
.hero-carte-flottante:hover{transform:translateY(-4px)}
.hcf-avatar{width:44px;height:44px;border-radius:12px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;flex-shrink:0}
.hcf-nom{font-weight:700;font-size:.98rem}
.hcf-sub{font-size:.82rem;color:var(--muted);margin-top:1px}
.hcf-chips{display:flex;gap:6px;margin-top:8px}
.hcf-chips span{background:var(--panel);border-radius:999px;padding:3px 9px;font-size:.72rem;font-weight:700;color:var(--ink-2)}

/* ================= MUR D'ECRANS REELS ================= */
.mur-section{padding-block:64px 40px}
.mur{position:relative;max-width:980px;margin:0 auto;padding-block:20px 60px}
.mur-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;filter:saturate(1.02)}
.mur-tuile{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-card);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease,z-index 0s;background:var(--surface)}
.mur-tuile:hover{transform:translateY(-6px) rotate(0deg) scale(1.02);box-shadow:var(--shadow-lift);z-index:5}
.mur-tuile img{display:block;width:100%}
.mur-tuile:nth-child(1){transform:rotate(-2.4deg)}
.mur-tuile:nth-child(2){transform:rotate(1.6deg);margin-top:22px}
.mur-tuile:nth-child(3){transform:rotate(-1.2deg)}
.mur-tuile:nth-child(4){transform:rotate(1.8deg)}
.mur-tuile:nth-child(5){transform:rotate(-1.8deg);margin-top:22px}
.mur-tuile:nth-child(6){transform:rotate(2.2deg)}

.recu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-2deg);width:230px;background:var(--surface);border:1px solid var(--line);border-radius:12px 12px 0 0;padding:20px 20px 16px;box-shadow:var(--shadow-pop);z-index:10;text-align:center;font-family:'Archivo'}
.recu::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:18px;background:
  linear-gradient(135deg,var(--surface) 50%,transparent 50%) 0 0/16px 18px repeat-x,
  linear-gradient(-135deg,var(--surface) 50%,transparent 50%) 0 0/16px 18px repeat-x;
  filter:drop-shadow(0 6px 4px rgba(20,20,15,.10))}
.recu-titre{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.recu-ligne{display:flex;justify-content:space-between;font-size:.86rem;font-weight:700;padding-block:5px;border-top:1px dashed var(--line)}
.recu-ligne span:last-child{color:var(--blue)}
.recu-ligne:first-of-type{border-top:none}

.carte-flottante-mur{position:absolute;right:2%;bottom:6%;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 18px;box-shadow:var(--shadow-lift);display:flex;align-items:center;gap:10px;z-index:9;font-size:.86rem;font-weight:700}
.carte-flottante-mur .ok{width:22px;height:22px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0}
@media (max-width:820px){
  .mur-grille{grid-template-columns:repeat(2,1fr)}
  .mur-tuile:nth-child(5){display:none}
  .recu{width:190px;padding:16px 16px 12px}
  .carte-flottante-mur{position:static;margin:20px auto 0;width:max-content}
}
@media (max-width:560px){ .mur-grille{grid-template-columns:1fr} .mur-tuile:nth-child(3),.mur-tuile:nth-child(6){display:none} }

/* ================= COCHES DE CONFIANCE ================= */
.coches{display:flex;flex-wrap:wrap;justify-content:center;gap:28px;padding-block:8px 64px;color:var(--ink-2);font-weight:700;font-size:.92rem}
.coches span{display:inline-flex;align-items:center;gap:8px}
.coches svg{color:var(--blue)}

/* ================= SECTIONS GENERIQUES ================= */
.accueil-publique .section{padding-block:96px}
.section-tete{max-width:620px;margin-bottom:50px}
.section-tete h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-block:14px 16px}
.section-tete p{color:var(--ink-2);font-size:1.05rem}
.section-tete.centre{margin-inline:auto;text-align:center}

@media (max-width:560px){ .accueil-publique .section{padding-block:64px} .accueil-publique .container{padding-inline:18px} }

/* ---- comparaison probleme/solution ---- */
.comparaison{background:var(--panel);border-radius:26px;padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:40px}
.comp-titre{font-weight:700;font-size:1.02rem;margin-bottom:18px;display:flex;align-items:center;gap:8px}
.comp-liste{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.comp-liste li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--ink-2)}
.comp-puce{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.comp-puce.non{background:var(--rose-soft);color:var(--rose)}
.comp-puce.oui{background:var(--blue-soft);color:var(--blue)}
@media (max-width:760px){ .comparaison{grid-template-columns:1fr;padding:30px 24px} }

/* ---- positionnement ---- */
.positionnement{text-align:center;max-width:680px;margin:76px auto 0}
.positionnement h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:14px}
.positionnement p{color:var(--ink-2);font-size:1.02rem}

/* ---- grille de benefices avec mini-widgets ---- */
.benefices-grille{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.benefice-panneau{background:var(--panel);border-radius:22px;padding:30px 30px 0;overflow:hidden}
.benefice-panneau h3{color:var(--blue);font-size:1.18rem;margin-bottom:10px}
.benefice-panneau p{color:var(--ink-2);font-size:.94rem;margin-bottom:22px;max-width:46ch}
.widget{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 0 0;padding:20px;box-shadow:0 -1px 0 var(--line)}

.widget-seuils .ws-ligne{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.82rem;font-weight:700}
.widget-seuils .ws-nom{width:92px;flex-shrink:0;color:var(--ink-2)}
.widget-seuils .ws-barre{flex:1;height:7px;border-radius:99px;background:var(--panel);overflow:hidden}
.widget-seuils .ws-barre i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.widget-seuils .ws-barre.urgent i{background:var(--rose)}
.widget-seuils .ws-val{width:60px;text-align:right;color:var(--muted);font-family:'Archivo'}

.widget-alerte{display:flex;gap:12px;align-items:flex-start}
.widget-alerte .wa-icone{width:34px;height:34px;border-radius:10px;background:var(--rose-soft);color:var(--rose);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.widget-alerte .wa-titre{font-weight:700;font-size:.9rem}
.widget-alerte .wa-sub{font-size:.82rem;color:var(--muted);margin-top:2px}

.widget-ocr .wo-ligne{display:flex;justify-content:space-between;font-size:.84rem;padding-block:8px;border-top:1px dashed var(--line)}
.widget-ocr .wo-ligne:first-child{border-top:none}
.widget-ocr .wo-label{color:var(--muted);font-weight:700}
.widget-ocr .wo-val{font-weight:700}
.widget-ocr .wo-bouton{margin-top:14px;background:var(--blue);color:var(--blue-ink);text-align:center;padding:9px;border-radius:10px;font-weight:700;font-size:.82rem}

.widget-carte .wc-ligne{display:flex;justify-content:space-between;padding:9px 0;font-size:.84rem;font-weight:700;border-top:1px solid var(--line)}
.widget-carte .wc-ligne:first-child{border-top:none}
.widget-carte .wc-ligne.rupture{opacity:.5;text-decoration:line-through}
.widget-carte .wc-prix{color:var(--blue)}
.widget-carte .wc-ligne.rupture .wc-prix{color:var(--rose);text-decoration:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
@media (max-width:760px){ .benefices-grille{grid-template-columns:1fr} }

/* ---- vitrine a onglets ---- */
.vitrine{display:grid;grid-template-columns:.62fr 1.38fr;gap:36px;align-items:flex-start}
.vitrine-onglets{display:flex;flex-direction:column;gap:6px}
.vitrine-onglet{text-align:left;padding:16px 18px;border-radius:16px;border:1px solid transparent;cursor:pointer;transition:background-color .2s ease,border-color .2s ease}
.vitrine-onglet:hover{background:var(--panel)}
.vitrine-onglet[aria-selected="true"]{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-card)}
.vitrine-onglet-num{font-family:'Archivo';font-weight:700;font-size:.76rem;color:var(--muted)}
.vitrine-onglet[aria-selected="true"] .vitrine-onglet-num{color:var(--blue)}
.vitrine-onglet h4{font-size:1rem;font-weight:700;margin:4px 0 4px}
.vitrine-onglet p{font-size:.84rem;color:var(--ink-2)}
.vitrine-ecran{position:relative}
.pantalla{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-pop);max-width:880px;margin-inline:auto}
.pantalla-barre{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.pantalla-barre .point{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.vitrine-panneau{display:none}
.vitrine-panneau img{width:100%;height:auto;aspect-ratio:1440/900;object-fit:contain;background:var(--surface)}
.vitrine-panneau.actif{display:block;animation:apparaitre .4s ease}
@keyframes apparaitre{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .vitrine-panneau.actif{animation:none} }
@media (max-width:900px){
  .vitrine{grid-template-columns:1fr}
  .vitrine-onglets{flex-direction:row;overflow-x:auto;gap:10px;padding-bottom:6px}
  .vitrine-onglet{flex:0 0 220px}
}

.mobile-duo{display:grid;grid-template-columns:1fr 1fr;gap:26px;max-width:600px;margin:70px auto 0}
.telephone{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:9px;box-shadow:var(--shadow-card);transition:transform .3s ease,box-shadow .3s ease}
.telephone:hover{transform:translateY(-6px) rotate(var(--incl,0deg));box-shadow:var(--shadow-lift)}
.telephone img{border-radius:20px}
.telephone.gauche{--incl:-1.4deg}
.telephone.droite{--incl:1.4deg}
.telephone-legende{text-align:center;font-size:.84rem;font-weight:700;color:var(--ink-2);margin-top:11px}

.modules-liste{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-top:56px}
.module-item{background:var(--surface);padding:22px;display:flex;gap:13px;align-items:flex-start;transition:background-color .2s ease}
.module-item:hover{background:var(--panel)}
.module-icone{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.module-item h5{font-family:'Archivo';font-weight:700;font-size:.94rem;margin-bottom:3px}
.module-item p{font-size:.82rem;color:var(--ink-2)}
@media (max-width:760px){ .modules-liste{grid-template-columns:1fr} }

/* ---- bande bleue confiance ---- */
.bande-bleue{background:linear-gradient(155deg,var(--blue),var(--blue-hover));color:#fff;border-radius:28px;padding:56px 48px}
.bande-bleue-inner{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.bande-bleue h2{color:#fff;font-size:clamp(1.8rem,3.2vw,2.4rem);margin-block:14px 16px}
.bande-bleue p.lede{color:rgba(255,255,255,.82);font-size:1.03rem}
.confiance-liste{display:flex;flex-direction:column;gap:18px}
.confiance-item{display:flex;gap:13px;align-items:flex-start}
.confiance-item .puce{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.confiance-item h4{font-weight:700;font-size:.98rem;margin-bottom:3px}
.confiance-item p{font-size:.86rem;color:rgba(255,255,255,.78)}
@media (max-width:900px){ .bande-bleue-inner{grid-template-columns:1fr;gap:30px} .bande-bleue{padding:38px 28px} }

/* ---- comment ca marche ---- */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;position:relative}
.etapes::before{content:"";position:absolute;top:27px;left:8%;right:8%;height:1px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 16px)}
.etape{padding-inline:20px;position:relative}
.etape-numero{width:54px;height:54px;border-radius:50%;background:var(--blue);color:var(--blue-ink);display:flex;align-items:center;justify-content:center;font-family:'Archivo';font-weight:700;font-size:1.15rem;margin-bottom:20px;position:relative;z-index:1;transition:transform .25s ease}
.etape:hover .etape-numero{transform:scale(1.08) rotate(-4deg)}
.etape h3{font-size:1.14rem;margin-bottom:10px;font-weight:700}
.etape p{color:var(--ink-2);font-size:.94rem}
@media (max-width:860px){ .etapes{grid-template-columns:1fr;gap:34px} .etapes::before{display:none} }

/* ---- tarifs ---- */
.tarifs-note{text-align:center;color:var(--muted);font-size:.86rem;margin-top:36px}
.tarifs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tarif-carte{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:32px 26px;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.tarif-carte:hover{transform:translateY(-6px);box-shadow:var(--shadow-lift)}
.tarif-carte.vedette{border-color:var(--blue);box-shadow:var(--shadow-lift);position:relative}
.tarif-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue);color:var(--blue-ink);font-size:.68rem;font-weight:700;padding:5px 14px;border-radius:999px;letter-spacing:.04em;text-transform:uppercase}
.tarif-nom{font-family:'Archivo';font-weight:700;font-size:1.26rem;margin-bottom:6px}
.tarif-cible{font-size:.86rem;color:var(--ink-2);margin-bottom:18px}
.tarif-prix{font-family:'Archivo';font-size:1.5rem;font-weight:700;margin-bottom:22px}
.tarif-prix span{font-size:.8rem;color:var(--muted);font-weight:400;font-family:'Archivo'}
.tarif-annuel-note{font-size:.82rem;color:var(--muted);margin:-14px 0 22px}
.tarif-carte ul{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:11px;flex:1}
.tarif-carte li{display:flex;gap:9px;font-size:.88rem;align-items:flex-start}
.tarif-carte li svg{color:var(--blue);flex-shrink:0;margin-top:2px}
.tarifs-grid-unique{grid-template-columns:1fr;max-width:420px;margin-inline:auto}

/* Bascule Mensuel/Annuel -- CSS pur (radios masqués + :checked), aucun JS.
   Les radios doivent précéder .tarifs-grid dans le DOM pour que le
   sélecteur général `~` les atteigne. */
.tarif-toggle-wrap{max-width:420px;margin-inline:auto}
.tarif-toggle-input{position:absolute;opacity:0;pointer-events:none}
.tarif-toggle{display:flex;gap:4px;background:var(--surface-2,#eef1f5);border-radius:999px;padding:4px;margin:0 0 20px;width:fit-content;margin-inline:auto}
.tarif-toggle label{padding:8px 16px;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:6px}
.tarif-toggle-badge{background:var(--blue);color:var(--blue-ink);font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px}
#tarif-mensuel:checked ~ .tarif-toggle label[for="tarif-mensuel"],
#tarif-annuel:checked ~ .tarif-toggle label[for="tarif-annuel"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lift)}
.prix-annuel{display:none}
#tarif-annuel:checked ~ .tarifs-grid .prix-mensuel{display:none}
#tarif-annuel:checked ~ .tarifs-grid .prix-annuel{display:inline}
#tarif-annuel:checked ~ .tarifs-grid .tarif-annuel-note{display:block}
@media (max-width:860px){ .tarifs-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto} }

/* ---- FAQ ---- */
.faq-liste{display:flex;flex-direction:column;gap:12px;max-width:800px;margin-inline:auto}
details.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 22px;transition:border-color .2s ease}
details.faq-item[open]{border-color:var(--blue-line)}
details.faq-item summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center;font-weight:700;font-size:1rem}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary .chevron{transition:transform .25s ease;color:var(--blue);flex-shrink:0}
details.faq-item[open] summary .chevron{transform:rotate(180deg)}
.faq-reponse{padding-bottom:18px;color:var(--ink-2);font-size:.94rem;max-width:70ch}

/* ---- CTA finale ---- */
.cta-finale{position:relative;text-align:center;padding-block:30px;overflow:clip}
.cta-finale-fond{position:absolute;inset:-30% 0 auto 0;height:420px;pointer-events:none;z-index:-1}
.cta-finale h2{font-size:clamp(2rem,4vw,2.9rem);max-width:18ch;margin:0 auto 16px}
.cta-finale p{color:var(--ink-2);font-size:1.05rem;max-width:50ch;margin:0 auto 30px}

/* ---- pied de page ---- */
.accueil-publique footer{border-top:1px solid var(--line);padding-block:52px 30px;background:var(--panel)}
.pied-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:40px}
.pied-marque p{color:var(--ink-2);font-size:.88rem;margin-top:12px;max-width:32ch}
.pied-col h5{font-family:'Archivo';font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:700}
.pied-col a{display:block;color:var(--ink-2);text-decoration:none;font-size:.9rem;padding:6px 0;transition:color .2s ease}
.pied-col a:hover{color:var(--blue)}
.pied-bas{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}
.badge-langues{display:flex;gap:8px}
.badge-langues span{border:1px solid var(--line-2);border-radius:999px;padding:4px 11px;font-family:'Archivo';font-size:.7rem;font-weight:700;letter-spacing:.03em}
@media (max-width:860px){ .pied-grid{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:560px){ .pied-grid{grid-template-columns:1fr} }