/* ==================================================================
   OBI AI — feuille de style du site de vente
   Palette « Vermillon », typographie Rubik + Nunito Sans.
   Toutes les couleurs vivent dans les deux blocs ci-dessous : c'est
   le seul endroit à toucher pour en changer une. Aucune couleur ne
   doit être définie ailleurs, ni dans un @media, ni en dur.
   ================================================================== */
:root{
  /* --- fonds et matières --- */
  --bg:#F0EDEA;            /* le papier : chaud, jamais blanc */
  --surface:#FFFFFF;       /* les cartes */
  --sunk:#E4DFDA;          /* les creux, les champs */
  --line:#D6CFC8;
  --line-fort:#BCB3AA;

  /* --- encres --- */
  --ink:#1A1715;
  --ink2:#4A443F;
  --ink3:#6A625B;

  /* --- l'accent --- */
  --acc:#A82F16;
  --acc2:#8C2711;
  --acc-doux:#F7DED4;
  --sur-acc:#FFFFFF;

  /* --- le bloc profond : programme, pied de page --- */
  --bloc:#2B1913;
  --sur-bloc:#FFFFFF;
  --sur-bloc2:#DDC5BB;
  --bloc-line:rgba(255,255,255,.15);

  /* --- ceintures --- */
  --b1:#8A8179; --b2:#8A6A12; --b3:#1E6A46; --b4:#3A342F;

  /* --- le logo : mêmes formes qu'avant, redites dans la palette --- */
  --logo-1:#A82F16; --logo-2:#D9573A; --logo-oeil:#2B1913;
  --bloc-acc:#E8845F;   /* l'accent, éclairci pour tenir sur le bloc profond */

  /* --- sémantique : volontairement HORS de la famille rouge, pour ne
         pas confondre une erreur avec un bouton d'action --- */
  --ok:#1E6A46; --ok-fond:#DDEBE2; --ok-bord:#B4D3C1;
  --att:#7A5A0A; --att-fond:#F6ECD4; --att-bord:#DFCB98;

  --voile:rgba(26,23,21,.48);
  --ombre:0 1px 2px rgba(26,23,21,.05), 0 14px 34px -22px rgba(26,23,21,.40);
  --ombre-fort:0 2px 6px rgba(26,23,21,.08), 0 30px 60px -28px rgba(26,23,21,.45);

  --dis:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lec:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --large:1180px;
}
html[data-theme="dark"]{
  --bg:#17110F;
  --surface:#1F1815;
  --sunk:#241C18;
  --line:#352A23;
  --line-fort:#4A3B32;
  --ink:#F5EFEA;
  --ink2:#CFC3BB;
  --ink3:#A2938B;
  --acc:#E8613E;
  --acc2:#F2795A;
  --acc-doux:#3A1D14;
  --sur-acc:#1A0B06;
  --bloc:#241610;
  --sur-bloc:#F5EFEA;
  --sur-bloc2:#C9B0A6;
  --bloc-line:rgba(255,255,255,.12);
  --b1:#C6BDB4; --b2:#D8A631; --b3:#57A67B; --b4:#8C8078;
  --logo-1:#C64228; --logo-2:#E8613E; --logo-oeil:#17110F;
  --bloc-acc:#F2795A;
  --ok:#57A67B; --ok-fond:#12211A; --ok-bord:#25392E;
  --att:#D8A631; --att-fond:#221A0B; --att-bord:#3B2F13;
  --voile:rgba(8,5,4,.72);
  --ombre:0 1px 2px rgba(0,0,0,.5), 0 14px 34px -22px rgba(0,0,0,.85);
  --ombre-fort:0 2px 6px rgba(0,0,0,.55), 0 30px 60px -28px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink2);
  font-family:var(--lec);font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--acc)}
h1,h2,h3,h4{font-family:var(--dis);color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.025em}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.col{max-width:var(--large);margin:0 auto;padding:0 clamp(18px,4vw,32px)}
/* La barre du haut est collante : sans ça, un lien d'ancre amène le
   titre de section juste dessous, à moitié caché. */
[id]{scroll-margin-top:84px}
.saut{position:absolute;left:-9999px}
.saut:focus{left:16px;top:12px;z-index:200;background:var(--acc);color:var(--sur-acc);
  padding:10px 16px;border-radius:9px;font-weight:700}

/* ---------- le logo ---------- */
.lg-1{fill:var(--logo-1)}
.lg-2{fill:var(--logo-2)}
.lg-oeil{fill:var(--logo-oeil)}
.lg-eclat{fill:#FFFFFF}

/* ---------- intitulés en capitales, sans monospace ---------- */
.k{font-family:var(--lec);font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.k.doux{color:var(--ink3)}

/* ---------- boutons ---------- */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--lec);font-weight:700;font-size:16px;padding:15px 26px;
  border-radius:11px;border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s,transform .1s;
}
.bt:active{transform:translateY(1px)}
.bt-plein{background:var(--acc);color:var(--sur-acc);border-color:var(--acc)}
.bt-plein:hover{background:var(--acc2);border-color:var(--acc2)}
.bt-vide{background:var(--surface);color:var(--ink);border-color:var(--line-fort)}
.bt-vide:hover{border-color:var(--acc);color:var(--acc)}
.bt-mini{font-size:14.5px;padding:10px 17px;border-radius:9px}
/* Le bouton posé sur le bloc profond : le vermillon y perdrait tout
   son contraste, c'est donc le clair qui fait l'appel. */
.bt-clair{background:var(--sur-bloc);color:var(--bloc);border-color:var(--sur-bloc)}
.bt-clair:hover{background:var(--sur-bloc2);border-color:var(--sur-bloc2)}
/* Sur les très petits écrans, un libellé long dépasse : on l'autorise
   à passer sur deux lignes plutôt que de sortir de la page. */
@media (max-width:430px){ .bt{white-space:normal;padding-left:18px;padding-right:18px} }

/* ---------- barre de navigation ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--large);margin:0 auto;padding:12px clamp(18px,4vw,32px);
  display:flex;align-items:center;gap:14px}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex-shrink:0}
.marque-nom{font-family:var(--dis);font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.nav-liens{display:flex;gap:22px;margin-left:20px;flex-wrap:wrap}
.nav-liens a{font-size:15px;color:var(--ink2);text-decoration:none;white-space:nowrap}
.nav-liens a:hover{color:var(--acc)}
.nav-droite{margin-left:auto;display:flex;gap:9px;align-items:center;flex-shrink:0}
/* Tant que le bouton du titre est visible, celui de la barre est
   masqué — y compris au clavier : « visibility » le sort de l'ordre
   de tabulation, ce que « opacity » seul ne fait pas. */
.nav-cta{opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .2s,transform .2s,visibility .2s}
.nav.colle .nav-cta{opacity:1;visibility:visible;transform:none}
.icone-bt{width:42px;height:42px;padding:0;border-radius:10px;background:var(--surface);
  border:1.5px solid var(--line-fort);color:var(--ink2);display:grid;place-items:center;cursor:pointer}
.icone-bt:hover{color:var(--acc);border-color:var(--acc)}
@media (max-width:860px){ .nav-liens{display:none} }
/* Sur mobile la barre du haut ne tient pas quatre éléments : le bouton
   « Commencer » y est retiré, celui du titre est à un pouce de là. */
@media (max-width:620px){ .nav-cta{display:none} }
/* Sous 380 px, « Obi AI » écrit en toutes lettres à côté du logo
   poussait « Se connecter » hors de l'écran : le logo suffit à dire
   où l'on est. */
@media (max-width:380px){
  .marque-nom{display:none}
  .bt-mini{font-size:13.5px;padding:9px 13px}
  .icone-bt{width:38px;height:38px}
}

/* ---------- 1 · le titre ---------- */
.hero{padding:clamp(48px,7vw,86px) 0 clamp(34px,4vw,52px)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(28px,4.5vw,58px);align-items:center}
@media (max-width:900px){ .hero-grille{grid-template-columns:1fr} }
.hero h1{font-size:clamp(36px,5.6vw,62px);font-weight:700;line-height:1.04;
  letter-spacing:-.042em;margin:16px 0 20px}
.hero-prom{font-size:clamp(17px,2vw,20px);color:var(--ink2);margin:0 0 28px;max-width:44ch}
.hero-actes{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-fine{font-family:var(--lec);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);margin:16px 0 0}

/* ---------- la fenêtre de produit ---------- */
/* ---------- la vignette de l'application ----------
   Elle montre l'écran de leçon TEL QU'IL EST : la colonne blanche des
   destinations, la barre du haut avec la ceinture et l'avancement dans
   la leçon, le texte, et la barre d'action en bas. Elle a montré
   pendant un temps une liste de leçons à gauche qui n'existe plus —
   une promesse d'interface qu'on ne tenait pas.
   Tout est dessiné en CSS : aucune image à charger, et elle suit le
   thème comme le reste de la page. */
.app{border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--surface);box-shadow:var(--ombre-fort)}
.app-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;background:var(--bloc)}
.app-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);display:block}
.app-bar b{margin-left:10px;font-weight:600;font-size:12px;color:var(--sur-bloc2)}
.app-in{display:grid;grid-template-columns:148px minmax(0,1fr);min-height:328px}

/* la colonne de gauche */
.app-rail{border-right:1px solid var(--line);padding:12px 8px 10px;
  display:flex;flex-direction:column;gap:1px;background:var(--surface)}
.app-logo{display:block;width:26px;margin:0 0 10px 5px}
.app-logo svg{display:block;width:100%;height:auto}
.app-d{display:flex;align-items:center;gap:6px;margin:0;padding:4px 5px;
  border-radius:7px;font-size:8.5px;font-weight:700;color:var(--ink2);
  line-height:1.2;white-space:nowrap}
.app-d i{width:16px;height:16px;border-radius:5px;flex-shrink:0;
  display:grid;place-items:center;color:var(--ink3)}
.app-d i svg{width:11px;height:11px;display:block}
.app-d b{margin-left:auto;font-size:5.5px;font-weight:800;letter-spacing:0;
  text-transform:uppercase;color:var(--ink3);border:1px solid var(--line);
  border-radius:3px;padding:1px 2px;flex-shrink:0}
.app-d.on{background:var(--acc-doux);color:var(--acc)}
.app-d.on i{color:var(--acc)}
.app-aide{margin-top:auto;border:1px solid var(--line);border-radius:9px;
  padding:7px 8px;background:var(--surface)}
.app-aide i{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;
  background:var(--sunk);color:var(--ink3);margin-bottom:4px}
.app-aide i svg{width:10px;height:10px;display:block}
.app-aide b{display:block;font-size:8.5px;font-weight:800;color:var(--ink)}

/* la colonne de lecture */
.app-cp{display:flex;flex-direction:column;min-width:0}
.app-tb{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px 10px;border-bottom:1px solid var(--line)}
.app-cein{display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  border:1px solid var(--acc);border-radius:999px;padding:4px 8px;
  font-size:8.5px;font-weight:800;color:var(--ink);white-space:nowrap}
.app-cein i{width:6px;height:6px;border-radius:50%;background:var(--b1);
  border:1px solid rgba(0,0,0,.2);display:block}
.app-tg{flex-basis:100%;order:3;min-width:0}
.app-tg-l{display:flex;align-items:baseline;gap:8px;margin:2px 0 4px}
.app-tg-l b{font-family:var(--dis);font-weight:700;font-size:10.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.app-tg-l em{font-style:normal;font-size:9px;font-weight:700;color:var(--ink3);
  white-space:nowrap;flex-shrink:0}
.app-ronds{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto}
.app-rond{width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink2);flex-shrink:0}
.app-rond svg{width:10px;height:10px;display:block}
.app-rond.plein{background:var(--acc);border-color:var(--acc);color:var(--sur-acc);
  font-size:9px;font-weight:800}
.app-jauge{display:flex;gap:2px;width:92px;max-width:100%}
.app-jauge i{flex:1;height:2px;border-radius:1px;background:var(--sunk);display:block}
.app-jauge i.on{background:var(--b1)}

.app-lec{padding:16px 18px 10px;flex:1}
.app-k{display:flex;align-items:center;gap:6px;margin:0 0 8px;
  font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
.app-k i{width:14px;height:6px;border-radius:2px;background:var(--b1);
  border:1px solid rgba(0,0,0,.18);display:block;flex-shrink:0}
.app-cp .t{font-family:var(--dis);font-weight:700;font-size:19px;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 9px;line-height:1.15}
.app-chap{margin:0 0 14px;padding-left:9px;border-left:2px solid var(--b1);
  font-size:11px;color:var(--ink3);line-height:1.45}
.app-cp .l{height:8px;border-radius:4px;background:var(--sunk);margin-bottom:8px}
.app-cp .l.c{width:74%} .app-cp .l.d{width:90%} .app-cp .l.e{width:52%}

.app-pied{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-top:1px solid var(--line);background:var(--surface)}
.app-pied .b{font-size:9.5px;font-weight:700;border-radius:7px;padding:6px 12px;
  border:1px solid var(--line);color:var(--ink2)}
.app-pied .b.plein{background:var(--acc);border-color:var(--acc);color:var(--sur-acc)}

@media (max-width:520px){
  .app-in{grid-template-columns:1fr}
  .app-rail{display:none}
}

/* ---------- bande des outils ---------- */
.outils{background:var(--acc-doux);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.outils-in{display:flex;align-items:center;gap:14px 26px;flex-wrap:wrap;justify-content:center;
  padding:18px clamp(18px,4vw,32px)}
.outils-in b{font-weight:700;font-size:16px;color:var(--ink)}

/* ---------- sections ---------- */
.sect{padding:clamp(52px,7vw,92px) 0}
.sect-tete{max-width:56ch;margin-bottom:clamp(26px,3.5vw,42px)}
.sect h2{font-size:clamp(27px,4vw,42px);font-weight:700;line-height:1.08;margin:14px 0 14px}
.sect-sous{font-size:18px;color:var(--ink3);margin:0}

/* ---------- l'appel à l'action de fin de section ---------- */
.sect-cta{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;
  align-items:flex-start;gap:12px}
.cta-fine{margin:0;font-size:14.5px;color:var(--ink3)}
.sect-cta.sur-bloc .cta-fine{color:var(--sur-bloc2)}

/* ---------- 3 · piliers ---------- */
.piliers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media (max-width:820px){ .piliers{grid-template-columns:1fr} }
.pil{background:var(--surface);padding:28px clamp(20px,2.4vw,30px)}
/* « .pil .pil-no » et non « .pil-no » : la règle « .pil p » qui suit a
   une spécificité plus forte et repeignait l'intitulé en gris. */
.pil .pil-no{font-weight:700;font-size:12.5px;letter-spacing:.13em;color:var(--acc)}
.pil h3{font-size:21px;font-weight:700;margin:12px 0 10px}
.pil p{margin:0;font-size:15.5px;color:var(--ink3)}

/* ---------- 4 · comment ça marche ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.5vw,28px);counter-reset:e}
@media (max-width:820px){ .etapes{grid-template-columns:1fr} }
.et{position:relative;padding-top:16px;border-top:3px solid var(--acc)}
.et .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--acc);color:var(--sur-acc);font-family:var(--dis);font-weight:700;font-size:16px;
  margin-bottom:14px}
.et h3{font-size:19px;font-weight:700;margin:0 0 8px}
.et p{margin:0;font-size:15.5px;color:var(--ink3)}

/* ---------- le programme, sur un bloc plein ----------
   Quatre colonnes, une par ceinture : les soixante titres sont tous
   visibles d'un coup. C'est l'argument — rien n'est replié. */
.prog{background:var(--bloc);color:var(--sur-bloc2);padding:clamp(52px,7vw,92px) 0}
.prog h2{color:var(--sur-bloc)}
.prog .k{color:var(--sur-bloc2)}
.prog .sect-sous{color:var(--sur-bloc2)}
.prog-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--bloc-line);border:1px solid var(--bloc-line);border-radius:16px;overflow:hidden}
@media (max-width:1040px){ .prog-cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .prog-cols{grid-template-columns:1fr} }
.cein{background:var(--bloc);padding:24px clamp(16px,1.6vw,22px) 22px;display:flex;flex-direction:column}
.cein-tete{padding-bottom:16px;margin-bottom:14px;border-bottom:1px solid var(--bloc-line)}
.cein-bar{display:block;width:46px;height:13px;border-radius:4px;
  border:1px solid rgba(255,255,255,.45);margin-bottom:13px}
.cein-nom{font-size:19px;font-weight:700;color:var(--sur-bloc);letter-spacing:-.025em;margin:0}
.cein-theme{font-family:var(--dis);font-weight:600;font-size:15px;color:var(--bloc-acc);
  margin:2px 0 9px;letter-spacing:-.01em}
.cein-det{margin:0;font-size:14px;line-height:1.5;color:var(--sur-bloc2)}
.etl{list-style:none;margin:0;padding:0;flex:1}
.etl li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:0 8px;
  padding:6px 0;font-size:14.5px;line-height:1.42;color:var(--sur-bloc2);align-items:baseline}
.etl li span.n{font-weight:700;font-size:12.5px;color:rgba(255,255,255,.62)}
.etl li.libre{color:var(--sur-bloc)}
.pastille{display:inline-block;font-weight:700;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:5px;background:rgba(255,255,255,.16);
  color:var(--sur-bloc);white-space:nowrap;vertical-align:1px}
.cein-bout{font-size:14px;line-height:1.5;color:var(--sur-bloc2);margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--bloc-line)}
.cein-bout b{color:var(--sur-bloc);font-weight:700}

/* ---------- 6 · pourquoi ce site existe ---------- */
.histoire{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:clamp(26px,4vw,48px);max-width:74ch}
.histoire p{font-size:17.5px;color:var(--ink2);margin:0 0 16px}
.histoire p:last-child{margin-bottom:0}
.histoire strong{color:var(--ink)}

/* ---------- 7 · tarifs ---------- */
.ancre{max-width:60ch;font-size:16.5px;color:var(--ink3);margin:0 0 30px}
.ancre b{color:var(--ink)}
.offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
@media (max-width:860px){ .offres{grid-template-columns:1fr} }
.of{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:28px 26px 30px;display:flex;flex-direction:column;box-shadow:var(--ombre)}
.of.fort{border:2px solid var(--acc);background:var(--acc-doux);position:relative}
.of-badge{position:absolute;top:-13px;left:26px;background:var(--acc);color:var(--sur-acc);
  font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 12px;border-radius:7px}
.of .k{margin-bottom:14px}
.of.fort .k{color:var(--acc)}
.of-prix{font-family:var(--dis);font-weight:700;font-size:44px;letter-spacing:-.045em;
  color:var(--ink);line-height:1}
.of-prix span{font-size:16px;font-weight:600;color:var(--ink3);letter-spacing:-.01em}
.of-note{font-size:14.5px;color:var(--ink3);margin:9px 0 20px}
.of ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.of li{font-size:15.5px;color:var(--ink2);margin-bottom:10px;padding-left:26px;position:relative}
.of li::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  border-radius:3px;background:var(--ok)}
.of.fort li::before{background:var(--acc)}
.of .bt{width:100%}
.rassure{display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.rassure span{font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--ink3);
  display:flex;align-items:center;gap:8px}
.rassure svg{color:var(--ok);flex-shrink:0}

/* ---------- 8 · questions ----------
   Classes préfixées « qa- » et non « q- » : la maquette du produit
   dans le hero utilise déjà .q, et les deux se marchaient dessus. */
.faq{max-width:80ch}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa-tete{width:100%;display:flex;align-items:center;gap:18px;padding:22px 4px;
  background:none;border:0;cursor:pointer;text-align:left;font-family:var(--dis);
  font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.02em}
.qa-tete:hover{color:var(--acc)}
.qa-chev{margin-left:auto;color:var(--ink3);transition:transform .2s;flex-shrink:0}
.qa.ouverte .qa-chev{transform:rotate(90deg)}
.qa-corps{display:none;padding:0 4px 24px;max-width:68ch}
.qa.ouverte .qa-corps{display:block}
.qa-corps p{margin:0 0 12px;font-size:16.5px;color:var(--ink2)}
.qa-corps p:last-child{margin-bottom:0}

/* ---------- 9 · appel final ---------- */
.final{background:var(--acc-doux);border-top:1px solid var(--line);
  padding:clamp(52px,7vw,86px) 0;text-align:center}
.final h2{font-size:clamp(28px,4.4vw,46px);margin:14px auto 16px;max-width:20ch}
.final p{font-size:18px;color:var(--ink2);max-width:52ch;margin:0 auto 30px}

/* ---------- pied de page ---------- */
footer{background:var(--bloc);color:var(--sur-bloc2);padding:clamp(40px,5vw,64px) 0 40px}
.pied{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:32px}
@media (max-width:760px){ .pied{grid-template-columns:1fr} }
.pied p{margin:0 0 12px;font-size:15.5px;max-width:52ch}
.pied strong{color:var(--sur-bloc)}
.pied-liens{display:flex;flex-direction:column;gap:10px}
.pied-liens a{color:var(--sur-bloc2);text-decoration:none;font-size:15.5px}
.pied-liens a:hover{color:var(--sur-bloc);text-decoration:underline}
.pied-bas{border-top:1px solid var(--bloc-line);margin-top:34px;padding-top:22px;font-size:14px}

/* ---------- le pop-up de compte ---------- */
body.fige{overflow:hidden}
.mo-fond{position:fixed;inset:0;z-index:90;background:var(--voile);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.mo-fond.on{display:flex}
/* La croix se posait SUR l'onglet de droite : on lui laisse sa propre
   bande en haut de la carte plutôt que de la faire flotter dessus. */
.mo{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:52px 26px 22px;box-shadow:var(--ombre-fort);position:relative}
.mo-x{position:absolute;top:11px;right:11px;width:32px;height:32px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink3);
  display:grid;place-items:center;cursor:pointer}
.mo-x:hover{color:var(--ink);border-color:var(--line-fort)}
.mo-onglets{display:flex;gap:4px;background:var(--sunk);border-radius:12px;padding:4px;margin-bottom:22px}
.mo-onglet{flex:1;padding:10px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:var(--lec);font-weight:700;font-size:14.5px;color:var(--ink3)}
.mo-onglet.on{background:var(--surface);color:var(--ink);box-shadow:var(--ombre)}
.mo h3{font-size:23px;font-weight:700;margin:0 0 7px}
.mo-sous{margin:0 0 20px;font-size:15px;color:var(--ink3)}
.mo-champ{margin-bottom:15px}
.mo-champ label{display:block;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3);margin-bottom:7px}
.mo-inp{width:100%;padding:13px 14px;border-radius:11px;border:1.5px solid var(--line-fort);
  background:var(--sunk);color:var(--ink);font-family:var(--lec);font-size:16px}
.mo-inp:focus{outline:2px solid var(--acc);outline-offset:-1px;border-color:var(--acc)}
.mo .bt{width:100%;margin-top:6px}
.mo-msg{border-radius:11px;padding:12px 14px;font-size:14.5px;margin-bottom:15px;
  border:1px solid var(--att-bord);background:var(--att-fond);color:var(--att)}
.mo-msg.ok{border-color:var(--ok-bord);background:var(--ok-fond);color:var(--ok)}
.mo-pied{margin:15px 0 0;text-align:center;font-size:13.5px;color:var(--ink3);line-height:1.55}
.mo-lien{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  color:var(--ink3);text-decoration:underline}
.mo-lien:hover{color:var(--acc)}
@media (max-width:430px){ .mo{padding-top:54px} .mo-x{top:12px;right:12px} }

/* ---------- bascule clair / sombre ---------- */
.ico-sombre{display:none}
html[data-theme="dark"] .ico-clair{display:none}
html[data-theme="dark"] .ico-sombre{display:block}