/* =========================================================================
   AIDES & ÉCONOMIES — Design system (moderne, 2026)
   Police : Plus Jakarta Sans. Palette : indigo confiance + émeraude « argent ».
   ========================================================================= */

/* Polices AUTO-HÉBERGÉES (§6.2, nLPD : aucun appel à Google Fonts).
   Déposer les woff2 OFL dans static/fonts/ (voir static/fonts/README.md).
   Repli system-ui tant que les fichiers ne sont pas présents (font-display: swap). */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/static/fonts/PlusJakartaSans-VariableFont_wght.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2")}

:root{
  /* ---- Design system V2 : tokens --sm-* nommés par rôle (§6.2) ---- */
  /* Marque (validée) */
  --sm-navy:#142D4E; --sm-navy-900:#0E2038; --sm-navy-700:#2B5A9E;
  --sm-bleu:#60A5FA; --sm-bleu-50:#EAF2FE;
  /* Action (un seul accent chaud) */
  --sm-ambre:#F2B33D; --sm-ambre-700:#C98A12; --sm-ambre-50:#FDF4E1;
  /* Surfaces et texte */
  --sm-bg:#F6F7FB; --sm-bg-2:#EDF0F7; --sm-card:#FFFFFF;
  --sm-ink:#142D4E; --sm-ink-2:#334155; --sm-ink-3:#56657A; --sm-line:#E2E8F0;
  /* Statuts du moteur (jamais de rouge pour « ne s'applique pas ») */
  --sm-ok:#15803D; --sm-ok-50:#DCFCE7;
  --sm-info:#854D0E; --sm-info-50:#FEF9C3;
  --sm-non:#475569; --sm-non-50:#F1F5F9;
  --sm-verif:#64748B; --sm-verif-50:#F8FAFC;
  --sm-erreur:#B91C1C;
  /* Typographie */
  --sm-font-titre:"Plus Jakarta Sans", system-ui, sans-serif;
  --sm-font-texte:"Atkinson Hyperlegible", system-ui, sans-serif;
  --sm-t-xs:.875rem; --sm-t-s:1rem; --sm-t-m:1.125rem; --sm-t-l:1.375rem;
  --sm-t-xl:clamp(1.75rem,4vw,2.5rem); --sm-t-xxl:clamp(2.1rem,6vw,3.5rem);
  --sm-interligne:1.6;
  /* Espacements (base 4 px) */
  --sm-s1:4px; --sm-s2:8px; --sm-s3:12px; --sm-s4:16px; --sm-s5:24px;
  --sm-s6:32px; --sm-s7:48px; --sm-s8:64px; --sm-s9:96px;
  /* Formes */
  --sm-r-s:8px; --sm-r-m:14px; --sm-r-l:22px;
  --sm-ombre:0 1px 2px rgba(20,45,78,.05), 0 8px 24px rgba(20,45,78,.07);
  --sm-max:1080px; --sm-lecture:680px;

  /* ---- Alias hérités (ancien code) → tokens --sm-*. À retirer en fin de chantier. ---- */
  /* Palette de marque Suisse Malin : navy #142D4E + bleu #60A5FA + blanc */
  --navy:#142D4E; --navy-900:#0e2038; --navy-2:#2b5a9e;
  --indigo:#142D4E; --indigo-700:#0e2038; --bleu:#60A5FA; --bleu-600:#2563eb; --cyan:#2b5a9e;
  --emeraude:#059669; --emeraude-50:#ecfdf5; --ambre:#f59e0b;
  --ink:#142D4E; --slate:#334155; --muted:#64748b; --line:#e2e8f0;
  --bg:#f6f7fb; --card:#ffffff; --card-2:#fbfbfd;
  --rouge:#b91c1c; --orange:#b45309;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(20,45,78,.05), 0 8px 24px rgba(20,45,78,.07);
  --shadow-lg:0 12px 40px rgba(20,45,78,.20);
  --grad:linear-gradient(135deg,#0e2038 0%,#142D4E 45%,#2b5a9e 100%);
  --grad-cta:linear-gradient(135deg,#142D4E,#2b5a9e);
  --maxw:980px;
}
*{box-sizing:border-box}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #60A5FA;outline-offset:2px;border-radius:8px}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:.2em 0 .5em}
h1{font-size:clamp(1.9rem,4.5vw,3rem);font-weight:800}
h2{font-size:clamp(1.4rem,3vw,2rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:.4rem 0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--indigo);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Top bar / nav ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:.5rem;
  padding:.6rem 1rem;padding-top:max(.6rem,env(safe-area-inset-top))}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand-logo{height:34px;width:auto;display:block}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-size:1rem}
.brand strong{font-weight:800;letter-spacing:-.02em}
.brand small{display:block;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
nav{display:flex;gap:.3rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:0 0 auto;border:1px solid transparent;background:transparent;color:var(--muted);
  padding:.45rem .8rem;border-radius:999px;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:.15s}
nav button:hover{color:var(--ink);background:#eaf2fe}
nav button.actif{background:var(--ink);color:#fff}

main{max-width:var(--maxw);margin:0 auto;padding:1.2rem 1rem 5rem}
.vue{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cache{display:none}
.chapo{font-size:1.1rem;color:var(--slate);max-width:60ch}
.aide{color:var(--muted);font-size:.92rem}

/* ---------- Buttons ---------- */
button.primaire{background:var(--grad-cta);color:#fff;border:none;padding:.95rem 1.4rem;border-radius:14px;
  font:inherit;font-size:1.02rem;font-weight:700;cursor:pointer;width:100%;margin-top:1rem;
  box-shadow:var(--shadow-lg);transition:.18s}
button.primaire:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(20,45,78,.28)}
button.secondaire{background:#fff;color:var(--indigo);border:1.5px solid #bcd6f5;padding:.85rem 1.3rem;border-radius:14px;
  font:inherit;font-weight:700;cursor:pointer;transition:.15s}
button.secondaire:hover{border-color:var(--indigo);background:#eaf2fe}
.seg-nsp{border:1px solid var(--line);background:#fff;color:var(--muted);padding:.45rem .7rem;border-radius:10px;
  font:inherit;font-size:.85rem;cursor:pointer;transition:.15s}
.seg-nsp:hover{border-color:var(--indigo);color:var(--indigo)}

/* ---------- Hero / landing ---------- */
.hero{margin:-1.2rem -1rem 0;padding:3rem 1.2rem 2.4rem;background:var(--grad);color:#fff;border-radius:0 0 28px 28px;text-align:center}
.hero .eyebrow{display:inline-block;background:rgba(255,255,255,.16);color:#fff;padding:.35rem .9rem;border-radius:999px;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;margin-bottom:1rem}
.hero h1{color:#fff;max-width:18ch;margin-inline:auto}
.hero .chapo{color:#cfe0fb;margin:1rem auto 0;max-width:56ch;font-size:1.12rem}
.hero .cta-row{justify-content:center}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0 0}
.cta-row button{width:auto;flex:0 0 auto;margin-top:0}
.hero button.secondaire{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.hero button.secondaire:hover{background:rgba(255,255,255,.22)}
.hero .reassurance{margin-top:1rem;color:#a9c6f0;font-size:.85rem}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:1.6rem 0}
.hero .stats{margin-top:2rem}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.hero .stat{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.stat b{display:block;font-size:1.7rem;font-weight:800;color:var(--indigo);letter-spacing:-.02em}
.hero .stat b{color:#fff}

.recit{max-width:68ch;margin:2.6rem auto 0}
.recit h2{margin-top:2.4rem}
.recit p{color:var(--slate);font-size:1.06rem}
.recit .lead{font-size:1.15rem;color:var(--ink)}
.pain{background:#fff;border:1px solid var(--line);border-left:4px solid var(--ambre);border-radius:14px;padding:1rem 1.2rem;margin:1.2rem 0;color:var(--slate)}
.punch{font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin:1.4rem 0}
.etapes{counter-reset:etape;list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.7rem}
.etapes li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:1rem 1.2rem 1rem 3.2rem;color:var(--slate);font-size:1.02rem}
.etapes li::before{counter-increment:etape;content:counter(etape);position:absolute;left:1rem;top:1rem;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--bleu);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.etapes li b{color:var(--ink)}
.pastille{display:inline-block;background:var(--bleu);color:#fff;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;vertical-align:middle;margin-left:.4rem}
/* Back-office client : menu latéral + panneaux */
.esp-compte{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.esp{display:grid;grid-template-columns:230px 1fr;gap:1.2rem;align-items:start;margin-top:1rem}
.esp-menu{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.25rem;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.5rem}
.esp-menu button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:none;background:none;color:var(--slate);font:inherit;font-weight:600;padding:.6rem .7rem;border-radius:10px;cursor:pointer}
.esp-menu button:hover{background:#eaf2fe;color:var(--ink)}
.esp-menu button.actif{background:var(--indigo);color:#fff}
.esp-ic{font-size:1.05rem;line-height:1}
.esp-contenu{min-width:0}
.esp-panel.cache{display:none}
@media (max-width:720px){
  .esp{grid-template-columns:1fr}
  .esp-menu{position:static;flex-direction:row;overflow-x:auto;gap:.3rem}
  .esp-menu button{flex:0 0 auto;white-space:nowrap}
}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.4rem 0}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);transition:.18s}
.feature:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.feature .ic{font-size:1.5rem}
.feature b{display:block;margin:.5rem 0 .3rem;font-size:1.05rem}
.feature p{margin:0;font-size:.95rem;color:var(--muted)}

.encart{background:#eef4fd;border:1px solid #bcd6f5;border-radius:14px;padding:1rem 1.2rem;margin:1.2rem 0;color:#142D4E}
.band{background:var(--ink);color:#fff;border-radius:22px;padding:2rem 1.4rem;margin:2.4rem 0;text-align:center}
.band h2{color:#fff}
.band p{color:#cbd5e1;max-width:52ch;margin-inline:auto}

/* ---------- Pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin:1.5rem 0}
.plan{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:1.4rem;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.plan.reco{border-color:var(--bleu-600);box-shadow:var(--shadow-lg)}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad-cta);color:#fff;
  padding:.3rem .9rem;border-radius:999px;font-size:.75rem;font-weight:800;white-space:nowrap}
.plan .prix{font-size:2rem;font-weight:800;letter-spacing:-.03em;margin:.3rem 0}
.plan .note{color:var(--muted);font-size:.9rem;flex:1}
.plan button{margin-top:1rem}

/* ---------- Cartes / résultats ---------- */
.carte{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;margin-bottom:.9rem;box-shadow:var(--shadow);transition:.15s}
.carte[onclick]{cursor:pointer}
.carte[onclick]:hover{border-color:#bcd6f5;transform:translateY(-2px)}
.carte h3{margin:.1rem 0 .5rem}
.meta{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;background:#f1f5f9;color:var(--slate)}
.badge.canton{background:#e3edfb;color:#142D4E}
.badge.compatible{background:#dcfce7;color:#166534}
.badge.manquante{background:#fef9c3;color:#854d0e}
.badge.non_remplis{background:#f1f5f9;color:#475569}
.badge.non_validee{background:#f1f5f9;color:#64748b}
.verdict{display:inline-block;font-weight:700;margin:.2rem 0 .5rem}
.carte ul{margin:.3rem 0;padding-left:1.1rem;font-size:.92rem;color:var(--slate)}
.avert{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:.55rem .75rem;font-size:.88rem;margin-top:.5rem;color:#991b1b}
.imperatif{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:.55rem .75rem;font-size:.88rem;margin-top:.5rem;font-weight:700;color:var(--orange)}
.note-situation{background:var(--sm-bleu-50);border:1px solid var(--sm-navy-700);border-left-width:4px;border-radius:10px;padding:.55rem .75rem;font-size:.88rem;margin-top:.5rem;color:var(--sm-navy)}

/* ---------- Questionnaire / formulaires ---------- */
.question{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin-bottom:.8rem;box-shadow:var(--shadow)}
.question label.titre{font-weight:700;display:block;margin-bottom:.25rem}
.question .expl{font-size:.86rem;color:var(--muted);margin-bottom:.6rem}
.question.sensible{border-left:4px solid var(--ambre)}
.controle{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.controle input,.controle select,textarea{padding:.6rem .7rem;border:1.5px solid var(--line);border-radius:10px;font:inherit;background:#fff}
.controle input:focus,.controle select:focus,textarea:focus{border-color:var(--indigo)}
.controle input[type=number]{width:11rem}
label.controle{align-items:flex-start}
label.titre{display:block;font-weight:700;margin:.6rem 0 .3rem}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:none;background:#fff;padding:.55rem .85rem;cursor:pointer;font:inherit;font-size:.9rem;color:var(--muted)}
.seg button.on{background:var(--indigo);color:#fff}
.filtres{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.filtres select,.filtres button{padding:.55rem .7rem;border:1.5px solid var(--line);border-radius:10px;background:#fff;font:inherit}
textarea{width:100%;font-family:inherit;font-size:.95rem}

/* ---------- Tunnel OTO ---------- */
.tunnel-arg{font-size:1.08rem;line-height:1.6;color:var(--slate);margin:1rem 0}
.refuser-note{display:block;width:100%;background:none;border:none;color:var(--muted);font:inherit;font-size:.85rem;
  text-decoration:underline;cursor:pointer;margin-top:.9rem;text-align:center}
.refuser-note:hover{color:var(--slate)}

/* ---------- Panneau latéral ---------- */
.panneau{position:fixed;inset:0;z-index:50}
.panneau-fond{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(2px)}
.panneau-corps{position:absolute;right:0;top:0;bottom:0;width:min(580px,100%);background:var(--card);
  overflow-y:auto;padding:1.4rem;padding-bottom:3rem;box-shadow:-20px 0 60px rgba(15,23,42,.2)}
.panneau-corps h2{margin-top:0}
.panneau dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;font-size:.92rem}
.panneau dt{color:var(--muted)}
.fermer{float:right;border:none;background:#f1f5f9;width:34px;height:34px;border-radius:10px;font-size:1.2rem;cursor:pointer;color:var(--slate)}
.fermer:hover{background:#e2e8f0}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:.4rem 0}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line);font-size:.9rem}
th{background:#f8fafc;font-weight:700;color:var(--slate)}
tr:last-child td{border-bottom:none}
.etat-non{color:var(--orange);font-weight:700}
.etat-oui{color:var(--emeraude);font-weight:700}

/* ---------- Bouton bug flottant ---------- */
.bug-btn{position:fixed;right:16px;bottom:16px;z-index:40;background:var(--ink);color:#fff;border:none;border-radius:999px;
  padding:.7rem 1.1rem;font:inherit;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(15,23,42,.3);transition:.15s}
.bug-btn:hover{transform:translateY(-2px)}

.pied{max-width:var(--maxw);margin:0 auto;padding:1.4rem 1rem;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line)}
hr{border:none;border-top:1px solid var(--line)}

@media(min-width:760px){.topbar{flex-direction:row;align-items:center;justify-content:space-between}
  .hero{padding:4rem 1.2rem 3rem}}

/* Barre de progression du questionnaire (Phase 1b) */
.progression{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.progression-piste{flex:1;height:8px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
.progression-barre{height:100%;background:var(--emeraude);border-radius:var(--radius-sm);transition:width .2s ease}
.seg-nsp.on{background:var(--card-2);font-weight:600}

/* =========================================================================
   DESIGN SYSTEM V2 (§6) — composants préfixés .sm-, mobile d'abord.
   Démonstration sur /styleguide. N'affecte pas les pages existantes.
   ========================================================================= */
.sm{font-family:var(--sm-font-texte);color:var(--sm-ink);background:var(--sm-bg);
  font-size:var(--sm-t-m);line-height:var(--sm-interligne)}
.sm h1,.sm h2,.sm h3,.sm .sm-surtitre{font-family:var(--sm-font-titre);color:var(--sm-navy);letter-spacing:-.02em}
.sm-section{padding:var(--sm-s7) var(--sm-s4);margin:0 auto;max-width:var(--sm-max)}
.sm-section--alt{background:var(--sm-bg-2)}
.sm-lecture{max-width:var(--sm-lecture);margin-inline:auto}
.sm-surtitre{text-transform:uppercase;letter-spacing:.08em;font-size:var(--sm-t-xs);
  font-weight:700;color:var(--sm-navy-700);margin:0 0 var(--sm-s2)}
.sm-icone{width:24px;height:24px;flex:none;color:var(--sm-navy-700)}
.sm-icone--ambre{color:var(--sm-ambre-700)}

/* Boutons : un seul bouton principal (ambre) par écran visible */
.sm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sm-s2);
  min-height:48px;padding:0 var(--sm-s5);border-radius:var(--sm-r-m);font-family:var(--sm-font-titre);
  font-weight:700;font-size:var(--sm-t-s);text-decoration:none;border:2px solid transparent;cursor:pointer}
/* Direction retenue par Jérôme (31.10.2026) : « tout marine » — l'action est en
   marine, pas d'accent ambre. La marque (logo marine + bleu) est inchangée. */
.sm-btn--principal{background:var(--sm-navy);color:#fff;border-color:var(--sm-navy)}
.sm-btn--principal:hover{background:var(--sm-navy-900);border-color:var(--sm-navy-900);color:#fff}
.sm-btn--secondaire{background:transparent;color:var(--sm-navy-700);border-color:var(--sm-line)}
.sm-btn--secondaire:hover{border-color:var(--sm-navy-700)}
/* Sur le bandeau marine (CTA), le bouton marine serait invisible : blanc sur marine. */
.sm-cta .sm-btn--principal{background:#fff;color:var(--sm-navy);border-color:#fff}
.sm-cta .sm-btn--principal:hover{background:var(--sm-bleu-50);border-color:var(--sm-bleu-50);color:var(--sm-navy)}

/* Hero (fond clair) */
.sm-hero{padding:var(--sm-s8) var(--sm-s4) var(--sm-s7);text-align:left;max-width:var(--sm-max);margin:0 auto}
.sm-hero h1{font-size:var(--sm-t-xxl);font-weight:800;margin:0 0 var(--sm-s4)}
.sm-hero .sm-soustitre{font-size:var(--sm-t-l);color:var(--sm-ink-2);margin:0 0 var(--sm-s5);max-width:var(--sm-lecture)}
.sm-hero .sm-reassurance{font-size:var(--sm-t-xs);color:var(--sm-ink-3);margin-top:var(--sm-s3)}

/* Récit */
.sm-recit p{margin:0 0 var(--sm-s4)}
.sm-recit .sm-punch{font-weight:700;color:var(--sm-navy);font-size:var(--sm-t-l)}

/* Douleurs */
.sm-douleurs{list-style:none;padding:0;margin:0;display:grid;gap:var(--sm-s3)}
.sm-douleurs li{display:flex;gap:var(--sm-s3);align-items:flex-start;background:var(--sm-card);
  border:1px solid var(--sm-line);border-radius:var(--sm-r-m);padding:var(--sm-s4)}

/* Avant / après */
.sm-avantapres{display:grid;gap:var(--sm-s4)}
.sm-avantapres .sm-col{border-radius:var(--sm-r-m);padding:var(--sm-s5);border:1px solid var(--sm-line)}
.sm-avantapres .sm-sans{background:var(--sm-non-50);order:1}
.sm-avantapres .sm-avec{background:var(--sm-ok-50);order:2}
.sm-avantapres h3{margin-top:0}
.sm-avantapres ul{margin:0;padding-left:1.1em}

/* Étapes numérotées */
.sm-etapes{display:grid;gap:var(--sm-s4);counter-reset:etape}
.sm-etape{display:flex;gap:var(--sm-s4);align-items:flex-start}
.sm-etape .sm-num{counter-increment:etape;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--sm-bleu-50);color:var(--sm-navy);font-family:var(--sm-font-titre);font-weight:800;
  display:flex;align-items:center;justify-content:center}
.sm-etape .sm-num::before{content:counter(etape)}
.sm-tag{display:inline-block;font-size:var(--sm-t-xs);font-weight:700;padding:2px 10px;border-radius:999px}
.sm-tag--gratuit{background:var(--sm-ok-50);color:var(--sm-ok)}
.sm-tag--abo{background:var(--sm-bleu-50);color:var(--sm-navy-700)}

/* Aperçu de résultat + badges de statut (4 états du moteur) */
.sm-apercu{background:var(--sm-card);border:1px solid var(--sm-line);border-radius:var(--sm-r-l);
  padding:var(--sm-s5);box-shadow:var(--sm-ombre)}
.sm-apercu .sm-exemple{font-size:var(--sm-t-xs);font-weight:700;color:var(--sm-ink-3);
  text-transform:uppercase;letter-spacing:.06em}
.sm-ligne{display:flex;justify-content:space-between;align-items:center;gap:var(--sm-s3);
  padding:var(--sm-s3) 0;border-top:1px solid var(--sm-line)}
.sm-badge{font-size:var(--sm-t-xs);font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.sm-badge--ok{background:var(--sm-ok-50);color:var(--sm-ok)}
.sm-badge--info{background:var(--sm-info-50);color:var(--sm-info)}
.sm-badge--non{background:var(--sm-non-50);color:var(--sm-non)}
.sm-badge--verif{background:var(--sm-verif-50);color:var(--sm-verif)}

/* Preuves (faits vérifiables) */
.sm-preuves{display:grid;gap:var(--sm-s4);grid-template-columns:1fr 1fr}
.sm-preuve{background:var(--sm-card);border:1px solid var(--sm-line);border-radius:var(--sm-r-m);padding:var(--sm-s4);text-align:center}
.sm-preuve .sm-chiffre{font-family:var(--sm-font-titre);font-weight:800;font-size:var(--sm-t-xl);color:var(--sm-navy)}
.sm-preuve .sm-libelle{font-size:var(--sm-t-xs);color:var(--sm-ink-3)}

/* Formules */
.sm-formules{display:grid;gap:var(--sm-s4)}
.sm-formule{background:var(--sm-card);border:1px solid var(--sm-line);border-radius:var(--sm-r-l);padding:var(--sm-s5)}
.sm-formule--reco{border-color:var(--sm-navy);box-shadow:var(--sm-ombre)}
.sm-formule .sm-prix{font-family:var(--sm-font-titre);font-weight:800;font-size:var(--sm-t-xl);color:var(--sm-navy)}
.sm-ruban{display:inline-block;background:var(--sm-navy);color:#fff;font-size:var(--sm-t-xs);
  font-weight:700;padding:2px 10px;border-radius:999px;margin-bottom:var(--sm-s2)}

/* Offre empilée */
.sm-inclus{list-style:none;padding:0;margin:0;display:grid;gap:var(--sm-s2)}
.sm-inclus li{display:flex;gap:var(--sm-s3);align-items:flex-start}
.sm-inclus .sm-icone{color:var(--sm-ok)}

/* FAQ accessible */
.sm-faq details{background:var(--sm-card);border:1px solid var(--sm-line);border-radius:var(--sm-r-m);
  padding:var(--sm-s4);margin-bottom:var(--sm-s3)}
.sm-faq summary{font-family:var(--sm-font-titre);font-weight:700;cursor:pointer;min-height:24px}
.sm-faq summary::-webkit-details-marker{display:none}

/* CTA (seul endroit où le fond marine est utilisé) */
.sm-cta{background:var(--sm-navy);color:#fff;border-radius:var(--sm-r-l);padding:var(--sm-s7) var(--sm-s5);text-align:center}
.sm-cta h2{color:#fff}
.sm-cta .sm-btn--principal{margin-top:var(--sm-s4)}

/* Barre CTA basse (mobile) */
.sm-barre-cta{position:sticky;bottom:0;background:var(--sm-card);border-top:1px solid var(--sm-line);
  padding:var(--sm-s3) var(--sm-s4);display:flex;gap:var(--sm-s3);align-items:center;
  padding-bottom:max(var(--sm-s3),env(safe-area-inset-bottom))}
.sm-barre-cta .sm-btn{flex:1}

/* Mention légale de transparence */
.sm-mention{font-size:var(--sm-t-xs);color:var(--sm-ink-3);line-height:1.5}
.sm-mention a{color:var(--sm-navy-700)}

@media(min-width:760px){
  .sm-avantapres{grid-template-columns:1fr 1fr}
  .sm-avantapres .sm-sans{order:0}
  .sm-formules{grid-template-columns:repeat(3,1fr)}
  .sm-preuves{grid-template-columns:repeat(4,1fr)}
}

/* Formulaire, places restantes, compte à rebours (§10, §11) */
.sm-form{display:grid;gap:var(--sm-s4);max-width:var(--sm-lecture)}
.sm-champ{display:grid;gap:var(--sm-s2)}
.sm-champ .titre{font-family:var(--sm-font-titre);font-weight:700;font-size:var(--sm-t-s)}
.sm-form input,.sm-form select,.sm-form textarea{width:100%;min-height:48px;padding:var(--sm-s3) var(--sm-s4);
  border:1px solid var(--sm-line);border-radius:var(--sm-r-m);font:inherit;background:var(--sm-card);color:var(--sm-ink)}
.sm-form textarea{min-height:96px;resize:vertical}
.sm-form input:focus-visible,.sm-form select:focus-visible,.sm-form textarea:focus-visible{outline:3px solid var(--sm-bleu);outline-offset:2px}
.sm-consent{display:flex;gap:var(--sm-s3);align-items:flex-start;font-size:var(--sm-t-s)}
.sm-consent input{width:22px;height:22px;min-height:22px;flex:none;margin-top:2px}
.sm-form-erreur{color:var(--sm-erreur);font-weight:700;min-height:1.2em;margin:0}
.sm-form-erreur:empty{display:none}
.sm-places{display:inline-block;background:var(--sm-ambre-50);color:var(--sm-ambre-700);
  font-weight:700;padding:var(--sm-s2) var(--sm-s4);border-radius:999px}
.sm-rebours{display:flex;gap:var(--sm-s3);align-items:baseline;flex-wrap:wrap;
  background:var(--sm-bleu-50);border-radius:var(--sm-r-m);padding:var(--sm-s4);margin-top:var(--sm-s4)}
.sm-rebours-date{font-family:var(--sm-font-titre);font-weight:800;color:var(--sm-navy)}
.sm-rebours-jours{color:var(--sm-navy-700);font-weight:700}

/* Tableau des économies documentées (§13 bloc 5) */
.sm-economies{width:100%;border-collapse:collapse;font-size:var(--sm-t-s)}
.sm-economies th,.sm-economies td{text-align:left;padding:var(--sm-s2) var(--sm-s3);border-bottom:1px solid var(--sm-line);vertical-align:top}
.sm-economies th{color:var(--sm-ink-3);font-size:var(--sm-t-xs);text-transform:uppercase;letter-spacing:.04em}
.sm-eco-src{color:var(--sm-ink-3);font-size:var(--sm-t-xs)}