/* ══ LE STYLE DE L'ACCUEIL ET DE SES SECTIONS ═══════════════════════════════
   Sorti de `site/resume.html` le 10 octobre 2026, mot pour mot, quand Marc a
   demandé que chaque section du bas ait sa propre page : « every category at
   the bottom, except "Nos prochaines étapes", "Un commentaire" et "Nos outils",
   should have a specific page for them. »

   ⚠⚠ TROIS PAGES LE LISENT — resume.html, comment-ca-marche.html,
     nos-chiffres.html. C'est pour ça qu'il est sorti du HTML au lieu d'être
     recopié : une section qui déménage ne doit pas emporter une copie de son
     style, sinon les deux divergent en une semaine et personne ne sait
     laquelle est la bonne. La même règle que `src/editeur-public.mjs`.

   ⚠ IL PORTE AUSSI `:root` — les couleurs, les mesures, les courbes
     d'animation. Il ne se charge donc pas EN PLUS de commun.css : il se charge
     À SA PLACE. Les deux définissent les mêmes variables.

   ⚠ RIEN N'A ÉTÉ RETOUCHÉ EN SORTANT. Pas une valeur, pas un ordre de règle.
     L'extraction est mécanique (lignes 14 à 389 de resume.html) et la sonde du
     téléphone l'a vérifiée après : 15 pages × 2 largeurs, tout rentre. */

/* ============================================================
   Page d'accueil du membre connecté.
   Façon de se lire : site « FlipIt » (Marc, 6 octobre 2026 : « pas le même look,
   mais la même façon de tout comprendre facilement »).
   Chaque section suit le même patron : une petite étiquette, une phrase claire,
   puis des preuves concrètes (trois étapes numérotées, des chiffres, des exemples).
   Le look reste le nôtre : sombre, doux, traits fins, le vert en petites touches.
   ============================================================ */
:root{
  --fond:#0a0b0d; --carte:#0d1014; --carte2:#12161b; --ligne:#1e2126; --ligne2:rgba(255,255,255,.05);
  --texte:#e8eaed; --doux:#8b93a1; --faible:#7b8595; --vert:#5eead4; --vertf:rgba(94,234,212,.08); --vertb:rgba(94,234,212,.22);
  --e1:cubic-bezier(.65,0,.35,1); --e2:cubic-bezier(.22,1,.36,1);
  --g:clamp(16px,4vw,56px); --nav:64px;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);overflow-x:clip;
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--vert);outline-offset:3px;border-radius:8px}
.env{width:min(1200px,100%);margin:0 auto;padding:0 var(--g)}
/* le patron de chaque section : une étiquette, puis une phrase claire */
.etiquette{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--vert)}
.etiquette::before{content:"";width:14px;height:1px;background:var(--vert);opacity:.7}
.titre{font-size:clamp(30px,3.8vw,52px);font-weight:600;letter-spacing:-.03em;line-height:1.08;margin-top:14px;max-width:18ch}
.titre em{font-style:normal;color:var(--vert)}
.sous{color:var(--doux)}
.tag{display:inline-block;font-size:11px;color:var(--faible);border:1px solid var(--ligne);border-radius:999px;padding:1px 8px;white-space:nowrap;vertical-align:middle}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:600;white-space:nowrap;
  background:var(--vert);color:#04201b;transition:background .3s}
.pill:hover{background:#7ff2df}
.pill.creux{background:transparent;color:var(--texte);box-shadow:inset 0 0 0 1px #2a3038}
.pill.creux:hover{box-shadow:inset 0 0 0 1px #3a4450}
.pt{width:7px;height:7px;border-radius:50%;background:var(--vert);display:inline-block;flex:none}
.section{padding:clamp(70px,12svh,130px) 0}
.js .rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--e1),transform 1.2s var(--e2)}
.js .rv.vu{opacity:1;transform:none}
.js .rv.d1{transition-delay:.1s}.js .rv.d2{transition-delay:.2s}.js .rv.d3{transition-delay:.3s}

/* ---------- barre du haut ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);background:rgba(10,11,13,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--ligne)}
.nav .env{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.04em;display:inline-flex;align-items:center;min-height:44px}
.logo span{color:var(--vert)}
/* ⚠ L'ESPACEMENT A ÉTÉ RESSERRÉ LE 10 OCTOBRE 2026, quand la barre est passée
   de quatre à huit liens. À 30 px, les sept intervalles mangeaient 210 px et
   la barre débordait de 98 px à TOUTES les largeurs — mesuré :
   logo 85 + liens 857 + bloc du compte 267 = 1209 pour 1200 disponibles, et
   « Mon compte » se faisait couper à droite dès 1366 px. */
.liens{display:flex;gap:clamp(10px,1.6vw,22px)}
.liens a{font-size:14px;color:var(--doux);min-height:44px;display:inline-flex;align-items:center;transition:color .3s}
.liens a:hover{color:var(--texte)}
/* ⚠ resume.html NE CHARGE PAS commun.css — il porte tout son style ici. La
   règle `.liens a.ici` vivait donc dans l'autre fichier et ne l'atteignait
   pas : « Accueil » était le seul lien de tout le site à ne pas se savoir
   courant, sur la page d'accueil. Vérifié en cherchant commun.css ici : 0. */
.liens a.ici{color:var(--texte)}
.menu-mob a.ici{color:var(--texte);background:rgba(255,255,255,.06)}
.nav .pill{min-height:40px;padding:0 18px;font-size:14px}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:1.5px;background:var(--texte);position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
.droite{display:flex;align-items:center;gap:8px}
.menu-mob{position:fixed;top:calc(var(--nav) + 6px);left:var(--g);right:var(--g);z-index:49;background:var(--carte);border:1px solid var(--ligne);border-radius:16px;padding:6px;display:none;flex-direction:column}
.menu-mob.ouvert{display:flex}
.menu-mob a{min-height:46px;display:flex;align-items:center;padding:0 14px;border-radius:10px;color:var(--doux)}
/* ⚠⚠ LA BARRE PASSE AU MENU À 1060 px, PAS À 860 — 10 octobre 2026, quand Marc
   a demandé les quatre sections « sur la même ligne que Accueil, Les tendances,
   L'aide, Paramètres ». La barre porte huit liens depuis, et ses libellés ne se
   coupent plus en deux (`white-space:nowrap` juste en dessous) : sans césure,
   ils réclament environ 850 px.
   Mesuré, largeur par largeur, sur aide.html :
     1280 px → barre de 830 px pour 1200 disponibles   ✔
     1000 px → 860 px pour 985                         ✔
      940 px → 855 px pour 925                         ✔ de justesse
      900 px → il manque 35 px                         ✖
   960 px laisse donc un peu d'air. En dessous, le menu du téléphone prend le
   relais — et il porte les mêmes liens.
   ⚠ CE SEUIL A BOUGÉ DEUX FOIS DANS LA MÊME JOURNÉE : 860 au départ, 1180
     quand la barre portait huit liens, 960 maintenant qu'elle en porte six
     (Marc a sorti « Ce qui s'en vient » et « On t'écoute »). Il se recalcule,
     il ne se devine pas : la mesure est `env.scrollWidth - env.clientWidth`.
   ⚠ CETTE RÈGLE EST ÉCRITE TROIS FOIS : commun.css, accueil.css et
     tendances.html, qui porte tout son style en propre. Les trois ont été
     changées ensemble. Si un jour une quatrième apparaît, elle divergera. */
@media (max-width:960px){.liens{display:none}.menu-btn{display:inline-flex}}
/* ⚠ UN LIBELLÉ DE BARRE NE SE COUPE PAS EN DEUX. Avec huit liens, « Comment ça
   marche », « Ce qui s'en vient » et « Les tendances » passaient chacun sur
   deux lignes dans la barre : lisible, mais ça a l'air inachevé. */
.liens a{white-space:nowrap}
@media (max-width:360px){.nav .pill{padding:0 13px;font-size:13px}.logo{font-size:18px}}

/* ---------- 1. le haut : ce qu'est cette page, et le fil en direct ---------- */
.hero{padding-top:calc(var(--nav) + clamp(40px,9svh,100px));padding-bottom:clamp(40px,8svh,90px);
  background:radial-gradient(60% 70% at 85% 40%,rgba(94,234,212,.06),transparent 70%),var(--fond)}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,6vw,80px);align-items:center}
.puce-haut{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--doux);border:1px solid var(--ligne);border-radius:999px;padding:6px 14px}
.hero h1{font-size:clamp(40px,5.4vw,76px);font-weight:600;letter-spacing:-.04em;line-height:1.02;margin-top:22px}
.hero h1 em{font-style:normal;color:var(--vert)}
.hero .sous{font-size:clamp(15.5px,1.3vw,18px);margin-top:22px;max-width:520px}
.hero .boutons{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero .note{font-size:13px;color:var(--faible);margin-top:16px}
.js .hero .entre{opacity:0;transform:translateY(16px);transition:opacity 1s var(--e1),transform 1.2s var(--e2)}
.js .hero.parti .entre{opacity:1;transform:none}
/* le fil en direct : les tendances arrivent une à une, comme des notifications */
.fil{background:var(--carte);border:1px solid var(--ligne);border-radius:24px;padding:18px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.fil-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:2px 4px 14px;border-bottom:1px solid var(--ligne2)}
.fil-tete b{font-size:15px;font-weight:600}
.fil-tete small{display:block;font-size:12px;color:var(--faible)}
.direct{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--vert)}
.direct i{width:7px;height:7px;border-radius:50%;background:var(--vert);animation:pouls 2s ease-in-out infinite}
@keyframes pouls{50%{opacity:.35}}
.liste-fil{display:flex;flex-direction:column;gap:10px;margin-top:14px;min-height:320px}
.alerte{background:var(--carte2);border:1px solid var(--ligne2);border-radius:16px;padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;
  transition:opacity .8s var(--e1),transform 1s var(--e2),background .8s var(--e1),border-color .8s var(--e1)}
.alerte.neuve{background:rgba(94,234,212,.05);border-color:var(--vertb)}
.alerte.arrive{opacity:0;transform:translateY(-14px)}
.alerte small{font-size:11.5px;color:var(--faible)}
.alerte b{font-size:14.5px;font-weight:600;grid-column:1}
.alerte .quand{font-size:11.5px;color:var(--faible);text-align:right}
.alerte .gain{grid-row:2 / span 2;grid-column:2;font-size:13px;font-weight:600;color:var(--vert);background:var(--vertf);border-radius:999px;padding:3px 10px;white-space:nowrap}
.alerte .det{font-size:12.5px;color:var(--doux);grid-column:1}
.fil-pied{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:var(--faible)}
@media (max-width:900px){.hero-grille{grid-template-columns:1fr}.liste-fil{min-height:0}}

/* ---------- 2. trois étapes ---------- */
.etapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(30px,5svh,50px)}
.etape{background:var(--carte);border:1px solid var(--ligne);border-radius:22px;padding:24px;display:flex;flex-direction:column;gap:12px}
.etape .haut{display:flex;justify-content:space-between;align-items:center}
.etape .num{font-family:var(--mono);font-size:13px;color:var(--vert)}
.etape .badge{font-size:12px;color:var(--vert);border:1px solid var(--vertb);border-radius:8px;padding:2px 9px}
.etape h3{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:6px}
.etape p{color:var(--doux);font-size:14.5px}
.preuve{margin-top:auto;padding-top:8px}
/* étape 1 : le journal de la mesure, qui s'écrit ligne par ligne */
.journal{font-family:var(--mono);font-size:12px;line-height:1.9;background:#080a0c;border:1px solid var(--ligne2);border-radius:14px;padding:12px 14px;color:var(--faible);min-height:118px}
.journal div{opacity:0;transition:opacity .5s var(--e1)}
.journal div.on{opacity:1}
.journal .ok{color:var(--vert)}
/* étape 2 : deux comptes, aucun lien */
.duo{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.duo div{background:var(--carte2);border:1px solid var(--ligne2);border-radius:12px;padding:10px 12px}
.duo small{display:block;font-size:11.5px;color:var(--faible)}
.duo b{font-size:15px;font-weight:600}
.duo span{font-size:11.5px;color:var(--vert);text-align:center;line-height:1.25}
.verdict{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--vert)}
/* étape 3 : l'éditeur, déjà rempli */
.champs{display:grid;gap:6px}
.champs div{display:flex;justify-content:space-between;gap:10px;background:var(--carte2);border:1px solid var(--ligne2);border-radius:10px;padding:8px 12px;font-size:13px}
.champs div span:first-child{color:var(--faible)}
.champs .pret{background:var(--vertf);border-color:var(--vertb);color:var(--vert);justify-content:center;font-weight:600}
@media (max-width:900px){.etapes{grid-template-columns:1fr}}

/* ---------- 3. les chiffres du jour ---------- */
.chiffres{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne);margin-top:24px}
.chiffres div{padding:clamp(22px,3vw,34px) clamp(14px,2vw,28px);border-left:1px solid var(--ligne)}
.chiffres div:first-child{border-left:0}
.chiffres b{display:block;font-size:clamp(32px,3.8vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--vert);font-variant-numeric:tabular-nums;white-space:nowrap}
.chiffres span{display:block;font-size:13.5px;color:var(--doux);margin-top:10px}
.chiffres-note{font-size:12.5px;color:var(--faible);margin-top:14px}
@media (max-width:860px){.chiffres{grid-template-columns:1fr 1fr}.chiffres div:nth-child(3){border-left:0}.chiffres div:nth-child(n+3){border-top:1px solid var(--ligne)}}
@media (max-width:400px){.chiffres{grid-template-columns:1fr}.chiffres div{border-left:0}.chiffres div + div{border-top:1px solid var(--ligne)}}

/* ---------- 4. ce qu'on a trouvé cette semaine : une liste claire ---------- */
.trouvailles{margin-top:clamp(28px,5svh,46px);background:var(--carte);border:1px solid var(--ligne);border-radius:22px;overflow:hidden}
.trouvailles-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--ligne);font-size:12.5px;color:var(--faible)}
.ligne-t{display:grid;grid-template-columns:44px minmax(0,1fr) 120px auto;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ligne2)}
.ligne-t:last-child{border-bottom:0}
.ligne-t .ic{width:44px;height:44px;border-radius:12px;background:var(--carte2);display:grid;place-items:center;color:var(--vert)}
.ligne-t .ic svg{width:18px;height:18px}
.ligne-t small{display:block;font-size:12px;color:var(--faible)}
.ligne-t b{font-size:15px;font-weight:600}
.ligne-t svg.mini{width:120px;height:34px}
.ligne-t .mini path{fill:none;stroke:var(--vert);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;opacity:.8}
.ligne-t .gain{font-size:13.5px;font-weight:600;color:var(--vert);background:var(--vertf);border:1px solid var(--vertb);border-radius:10px;padding:5px 11px;white-space:nowrap}
@media (max-width:640px){.ligne-t{grid-template-columns:40px minmax(0,1fr) auto}.ligne-t svg.mini{display:none}.ligne-t .ic{width:40px;height:40px}}

/* ---------- 5. ce que tu as : six cases ---------- */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(28px,5svh,46px);border:1px solid var(--ligne);border-radius:22px;overflow:hidden}
.case{padding:clamp(22px,2.6vw,32px);border-right:1px solid var(--ligne);border-bottom:1px solid var(--ligne);display:flex;flex-direction:column;gap:10px}
.case:nth-child(3n){border-right:0}
.case:nth-last-child(-n+3){border-bottom:0}
.case .ic{width:40px;height:40px;border-radius:12px;background:var(--vertf);border:1px solid var(--vertb);display:grid;place-items:center;color:var(--vert)}
.case .ic svg{width:18px;height:18px}
.case h3{font-size:16.5px;font-weight:600;margin-top:6px}
.case p{font-size:14.5px;color:var(--doux);line-height:1.55}
.case h3{font-size:18px}
.case .ex{font-size:13px;color:var(--texte);background:var(--carte2);border:1px solid var(--ligne2);border-radius:10px;padding:8px 12px;margin-top:4px}
.case .aller{margin-top:auto;padding-top:6px;font-size:13.5px;font-weight:600;color:var(--vert);min-height:36px;display:inline-flex;align-items:center;gap:6px}
.case .aller span{transition:transform .3s var(--e1)}
/* ⚠⚠ LA CARTE ENTIÈRE EST UN LIEN depuis le 10 octobre : « like pages that
   we can go to ». Le `.aller` intérieur est devenu un `<span>` — un `<a>`
   dans un `<a>` est invalide et le navigateur refermait le premier.
   Conséquence sur le survol : ce n'est plus le `.aller` qui est survolé, mais
   la carte. La règle `.case .aller:hover` ne se déclencherait donc plus que
   sur les 36 px du bas. */
.case{color:inherit}
.case:hover{border-color:var(--vertb)}
.case:hover .aller span{transform:translateX(3px)}
/* ⚠ L'ANNEAU DE FOCUS SERAIT COUPÉ : `.cases{overflow:hidden}` et la carte
   est à 1 px de ce bord, donc un anneau tracé 3 px en DEHORS tombe hors de la
   boîte qui coupe. On le trace à l'intérieur. Avant, l'élément focusable
   était le petit `.aller`, loin des bords ; maintenant c'est la carte. */
.case:focus-visible{outline-offset:-3px}
@media (max-width:860px){.cases{grid-template-columns:1fr 1fr}.case:nth-child(3n){border-right:1px solid var(--ligne)}.case:nth-child(2n){border-right:0}.case:nth-last-child(-n+3){border-bottom:1px solid var(--ligne)}.case:nth-last-child(-n+2){border-bottom:0}}
/* ⚠⚠ SUR UN TÉLÉPHONE, DEUX COLONNES COMPACTES — et c'est tout le nerf du
   déménagement. En une seule colonne avec leur texte, les six cartes font
   1 933 px de haut : posées « en haut de l'écran » comme Marc l'a demandé,
   elles enterraient les chiffres du jour sous deux écrans et demi de cartes.
   À deux colonnes, icône et titre sur la même ligne, le sommaire tient en
   trois rangées et le titre de la page reste visible.
   ⚠ LA PHRASE ET L'EXEMPLE SE CACHENT, ILS NE SE SUPPRIMENT PAS : sur un
     écran large la carte reste entière, avec son icône, son paragraphe et son
     exemple. C'est la même carte, lue autrement — pas une carte amputée.
   ⚠ `.aller` se cache aussi : la carte EST le lien, la flèche ne servait qu'à
     dire où cliquer quand seul le bas l'était. */
@media (max-width:560px){
  .cases{grid-template-columns:1fr 1fr}
  .case{flex-direction:row;align-items:center;gap:10px;padding:11px 12px;min-height:58px}
  .case .ic{width:28px;height:28px;border-radius:9px;flex:0 0 28px}
  .case .ic svg{width:15px;height:15px}
  .case h3{font-size:13.5px;margin-top:0;line-height:1.25}
  .case p,.case .ex,.case .aller{display:none}
  .case:nth-child(3n){border-right:1px solid var(--ligne)}
  .case:nth-child(2n){border-right:0}
  .case:nth-last-child(-n+3){border-bottom:1px solid var(--ligne)}
  .case:nth-last-child(-n+2){border-bottom:0}
}

/* ---------- 6. ce qui s'en vient ---------- */
.suite-grille{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:clamp(28px,6vw,90px);align-items:start}
.suite-grille .sous{margin-top:16px;max-width:400px}
.suite-grille .tag{margin-top:16px}
.prochaines{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.prochaines li{display:grid;grid-template-columns:100px minmax(0,1fr) 84px;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ligne)}
.prochaines .quand{font-size:13px;color:var(--faible)}
.prochaines b{font-weight:600;font-size:15px}
.prochaines p{margin:3px 0 0;color:var(--doux);font-size:13.5px}
.prochaines .barre{height:3px;border-radius:3px;background:#161a20;overflow:hidden}
.prochaines .barre i{display:block;height:100%;background:rgba(94,234,212,.6);transform-origin:left;transform:scaleX(0);transition:transform 1.6s var(--e1) .4s}
.prochaines li.vu .barre i{transform:scaleX(var(--v))}
@media (max-width:900px){.suite-grille{grid-template-columns:1fr}}
@media (max-width:520px){.prochaines li{grid-template-columns:1fr;gap:6px}.prochaines .barre{width:120px}}

/* ---------- 7. on t'écoute, puis le pied ---------- */
.ecoute{background:var(--carte);border:1px solid var(--ligne);border-radius:26px;padding:clamp(34px,6vw,64px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,70px);align-items:center}
.ecoute .titre{max-width:none}
.ecoute .sous{margin-top:16px;max-width:440px}
.ecoute .boutons{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.reseaux{display:flex;flex-direction:column}
.reseaux h4{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--faible)}
.reseaux a{display:flex;justify-content:space-between;align-items:center;min-height:50px;border-bottom:1px solid var(--ligne);font-size:15px}
.reseaux a span{color:var(--faible)}
.reseaux a:hover span{color:var(--vert)}
@media (max-width:860px){.ecoute{grid-template-columns:1fr}}
.pied{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding:28px 0 calc(env(safe-area-inset-bottom,0px) + 30px);margin-top:clamp(50px,8svh,80px);border-top:1px solid var(--ligne);font-size:12.5px;color:var(--faible)}
.pied nav{display:flex;gap:18px;flex-wrap:wrap}
.pied a{min-height:32px;display:inline-flex;align-items:center}
.pied a:hover{color:var(--texte)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 22px);transform:translate(-50%,14px);z-index:80;opacity:0;pointer-events:none;
  background:var(--carte);color:var(--texte);border:1px solid var(--ligne);border-radius:14px;padding:12px 18px;font-size:14px;max-width:calc(100vw - 32px);width:max-content;text-align:center;
  transition:opacity .5s var(--e1),transform .6s var(--e2)}
.toast.vu{opacity:1;transform:translate(-50%,0)}
@media (max-height:620px){.section{padding:clamp(48px,10svh,90px) 0}.hero{padding-top:calc(var(--nav) + 28px)}.liste-fil{min-height:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .rv,.js .hero .entre,.alerte.arrive{opacity:1!important;transform:none!important}
  .journal div{opacity:1}
  .prochaines .barre i{transform:scaleX(var(--v))!important}
}

/* ==========================================================================
   Marc, 6 octobre 2026 : « le premier truc qu'on voit, ce sont nos chiffres du jour ;
   reprends les animations de l'ancienne version ; rends tout plus facile à lire ».
   ========================================================================== */
.hero{background:linear-gradient(180deg,#0a0b0d 0%,#0a0c0d 55%,#08110f 85%,#0a1714 100%)}
/* le titre : mot par mot, en sortant du flou */
.mot{display:inline-block;transition:opacity 1s var(--e1),filter 1s var(--e1),transform 1.2s var(--e2),color 1.1s var(--e1)}
.js .hero h1 .mot{opacity:0;filter:blur(8px);transform:translateY(.15em)}
.js .hero.parti h1 .mot{opacity:1;filter:none;transform:none}
.js .hero h1.entre{opacity:1;transform:none}
/* les titres de section : les mots s'allument un à un */
.js .titre .mot{color:#262b32}
.js .titre.vu .mot{color:var(--texte)}
.js .titre.vu em .mot{color:var(--vert)}
/* le tableau des chiffres du jour */
.stats{background:var(--carte);border:1px solid var(--ligne);border-radius:24px;padding:22px;box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.js .stats{opacity:0;transform:translateY(60px);transition:opacity 1.2s var(--e1) .4s,transform 1.6s var(--e2) .4s}
.js .hero.parti .stats{opacity:1;transform:none}
.stats-tete{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--ligne2)}
.stats-tete b{font-size:15px;font-weight:600}
.stats-tete small{display:block;font-size:12.5px;color:var(--faible)}
.stat-grand{margin-top:18px}
.stat-grand b{display:block;font-size:clamp(44px,5vw,64px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat-grand span{display:block;color:var(--doux);font-size:14.5px;margin-top:8px}
.barres{display:flex;align-items:flex-end;gap:3px;height:clamp(60px,7vw,90px);margin-top:18px}
.barres span{flex:1;min-width:0;border-radius:3px 3px 1px 1px;height:calc(var(--h) * 1%);background:#1c2229;transform-origin:bottom;transition:transform 1.4s var(--e2)}
.barres span.fort{background:linear-gradient(180deg,rgba(94,234,212,.85),rgba(94,234,212,.35))}
.js .barres span{transform:scaleY(.04)}
.js .hero.parti .barres span{transform:none}
.barres-axe{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--faible);margin-top:6px}
.stats-grille{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.stats-grille div{background:var(--carte2);border:1px solid var(--ligne2);border-radius:14px;padding:14px}
.stats-grille b{display:block;font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--vert);font-variant-numeric:tabular-nums;white-space:nowrap}
.stats-grille b span{color:inherit;font-size:inherit;display:inline}
.stats-grille > div > span{display:block;font-size:13px;color:var(--doux);margin-top:6px;line-height:1.35}
.stats-pied{display:flex;gap:8px 22px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--ligne2);font-size:13.5px;color:var(--doux)}
.stats-pied b{color:var(--texte);font-weight:600}
@media (max-width:380px){.stats-grille{grid-template-columns:1fr}}
/* les trois étapes : plus gros, plus simple */
.etape{padding:clamp(22px,2.4vw,30px);gap:14px}
.etape h3{font-size:clamp(20px,1.8vw,23px)}
.etape p{font-size:15.5px;line-height:1.6}
.etape .num{font-family:inherit;font-size:14px;font-weight:600;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--vertf);border:1px solid var(--vertb)}
.etape .badge{font-size:12.5px}
.suite-lignes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.suite-lignes li{display:flex;align-items:center;gap:12px;background:var(--carte2);border:1px solid var(--ligne2);border-radius:12px;padding:11px 14px;font-size:14.5px;
  opacity:0;transform:translateY(8px);transition:opacity .7s var(--e1),transform .9s var(--e2)}
.suite-lignes li.on{opacity:1;transform:none}
.suite-lignes .v{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;background:#1a1f26;color:var(--doux)}
.suite-lignes li.fort{background:var(--vertf);border-color:var(--vertb)}
.suite-lignes li.fort .v{background:var(--vert);color:#04201b;font-weight:700}
.duo{grid-template-columns:1fr auto 1fr;gap:10px}
.duo div{padding:14px;text-align:center}
.duo b{display:block;font-size:26px;letter-spacing:-.03em;color:var(--vert);margin:2px 0}
.duo small{font-size:12.5px}
.duo > span{font-size:18px;color:var(--faible)}
.verdict{font-size:14px;margin-top:12px;align-items:flex-start;line-height:1.45}.verdict .pt{margin-top:6px}
.champs div{font-size:14.5px;padding:11px 14px}
/* la liste de la semaine : les petites courbes se tracent en arrivant */
.ligne-t svg.mini{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--e1) .3s}
.ligne-t.vu svg.mini{clip-path:inset(0)}
.js .ligne-t{opacity:0;transform:translateY(12px);transition:opacity .9s var(--e1),transform 1.1s var(--e2)}
.js .ligne-t.vu{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .hero h1 .mot,.js .stats,.js .ligne-t,.suite-lignes li{opacity:1!important;filter:none!important;transform:none!important}
  .js .titre .mot{color:inherit!important}.js .titre em .mot{color:var(--vert)!important}
  .js .barres span{transform:none!important}.ligne-t svg.mini{clip-path:none!important}
}
/* ---------- nos chiffres : un record, quatre faits, tout mène aux tendances ---------- */
.record{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:end;margin-top:clamp(28px,5svh,46px);
  background:var(--carte);border:1px solid var(--ligne);border-radius:24px;padding:clamp(24px,3.4vw,40px);overflow:hidden;transition:border-color .4s var(--e1)}
.record:hover{border-color:var(--vertb)}
.record small{font-size:13px;color:var(--faible)}
.record-n{display:block;font-size:clamp(64px,9vw,128px);font-weight:600;letter-spacing:-.05em;line-height:.95;color:var(--vert);margin-top:10px;font-variant-numeric:tabular-nums}
.record-n span{color:inherit}
.record p{color:var(--doux);font-size:15.5px;max-width:440px;margin-top:16px}
.record p strong{color:var(--texte);font-weight:600}
.record-btn{display:inline-flex;align-items:center;gap:9px;margin-top:22px;min-height:46px;padding:0 22px;border-radius:999px;background:var(--vert);color:#04201b;font-weight:600;font-size:14.5px}
.record-btn span{transition:transform .3s var(--e1)}
.record:hover .record-btn span{transform:translateX(3px)}
.record-courbe{width:100%;height:clamp(140px,18vw,220px)}
.record-courbe .tr{fill:none;stroke:var(--vert);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.record-courbe .aire{fill:rgba(94,234,212,.1)}
.record-courbe circle{fill:var(--vert)}
.js .record .record-courbe{clip-path:inset(0 100% 0 0);transition:clip-path 2s var(--e1) .4s}
.js .record.vu .record-courbe{clip-path:inset(0)}
.faits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
.fait{background:var(--carte);border:1px solid var(--ligne);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:10px;transition:border-color .4s var(--e1)}
.fait:hover{border-color:var(--vertb)}
.fait b{font-size:clamp(28px,2.8vw,38px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--texte);white-space:nowrap}
.fait b span{color:var(--vert)}
.fait p{font-size:14px;color:var(--doux);line-height:1.55}
.fait .aller{margin-top:auto;padding-top:4px;font-size:13.5px;font-weight:600;color:var(--vert)}
.faits-note{font-size:12.5px;color:var(--faible);margin-top:16px}
.faits-cta{margin-top:24px}
@media (max-width:980px){.faits{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.record{grid-template-columns:1fr}.record-courbe{order:-1;height:120px}}
@media (max-width:480px){.faits{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.js .record .record-courbe{clip-path:none}}

/* plus petit : Marc, « ne le fais pas si gros » */
.record{padding:clamp(18px,2.4vw,26px) clamp(20px,2.6vw,30px);gap:20px;border-radius:20px;align-items:center}
.record-n{font-size:clamp(40px,4.6vw,60px);margin-top:6px}
.record p{font-size:14.5px;margin-top:10px}
.record-btn{margin-top:14px;min-height:40px;padding:0 18px;font-size:14px}
.record-courbe{height:clamp(90px,10vw,130px)}
.fait{padding:18px;gap:8px;border-radius:16px}
.fait b{font-size:clamp(22px,2vw,28px)}
.fait p{font-size:13.5px}
.faits{gap:12px;margin-top:12px}
.faits-cta{margin-top:18px}
@media (max-width:760px){.record-courbe{height:80px}}

/* la grille des outils porte la même carte que les autres blocs */
.cases{background:var(--carte)}

/* ---------- la bande de lancement, tout en haut (idée prise sur FlipIt) ---------- */
:root{--bande:38px}
html.sans-bande{--bande:0px}
.lancement{position:fixed;inset:0 0 auto 0;z-index:51;height:var(--bande);display:flex;align-items:center;justify-content:center;gap:10px;padding:0 48px;
  background:#0c1a17;border-bottom:1px solid rgba(94,234,212,.18);font-size:13px;color:var(--doux);white-space:nowrap;overflow:hidden}
html.sans-bande .lancement{display:none}
.badge-l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#04201b;background:var(--vert);border-radius:5px;padding:2px 7px;flex:none}
.txt-l{overflow:hidden;text-overflow:ellipsis}
.txt-l .court,.txt-l .mini{display:none}
.lien-l{color:var(--vert);text-decoration:underline;text-underline-offset:3px;flex:none}
.fermer-l{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;color:var(--faible);font-size:17px;line-height:1;display:grid;place-items:center}
.fermer-l::before{content:"";position:absolute;inset:-7px}
.fermer-l:hover{color:var(--texte);background:rgba(255,255,255,.05)}
.nav{top:var(--bande)}
.menu-mob{top:calc(var(--bande) + var(--nav) + 6px)}
/* ⚠⚠ `.tete-haut` A DÉMÉNAGÉ DANS `site/sections.css` — 10 octobre 2026.
   Marc a voulu les quatre sections sur CHAQUE page, et trois pages seulement
   lisent ce fichier-ci. C'est la rangée des sections qui dégage la barre fixe
   maintenant, sur les dix pages, et la règle vit donc là où la rangée vit.
   ⚠ `.hero.suite` reste ici : le hero n'existe que sur l'accueil. */
.hero{padding-top:calc(var(--bande) + var(--nav) + clamp(40px,9svh,100px))}
/* ⚠ `.hero.suite` A ÉTÉ RETIRÉE LE 10 OCTOBRE 2026, le jour même où elle est
   née. Elle servait pendant la demi-journée où le hero n'était pas le premier
   bloc de la page : il fallait lui enlever son dégagement de barre, sinon il
   gardait 183 px de vide au MILIEU de la page. Marc a tranché l'autre sens —
   « je veux que ce qui marche aujourd'hui soit notre titre » — donc le hero
   est de nouveau premier et la règle au-dessus suffit.
   ⚠ Elle n'est pas gardée « au cas où » : une règle que rien n'utilise se
     fait modifier un jour par quelqu'un qui croit qu'elle agit. Si le hero
     redescend, elle se réécrit en une ligne, et c'est écrit ici. */
@media (max-width:360px){.lancement{font-size:12px;gap:8px}.badge-l{font-size:10px}.txt-l .court{display:none!important}.txt-l .mini{display:inline!important}}
@media (max-width:720px){.txt-l .long{display:none}.txt-l .court{display:inline}.lien-l{display:none}.lancement{justify-content:flex-start;padding:0 44px 0 14px}}

/* ---------- le fond : repris de nos propres pages ----------
   Comme la page Forfaits : un dégradé qui reste en place pendant qu'on défile,
   noir en haut de l'écran, vert profond en bas. Comme la page de connexion :
   une courbe de tendance douce derrière le haut de la page. Pas de points, pas de halos. */
body{position:relative}
.hero{background:transparent!important;position:relative;overflow:clip}
main{position:relative;z-index:1}
.fond-deco{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,#0a0b0d 0%,#0a0c0d 45%,#081512 80%,#0a2420 100%)}
/* ⚠⚠ LE NÉON EST PARTI — 9 octobre 2026, demande de Marc : « une lumière
   fluorescente, comme un néon, qui monte dans le fond. Enlève-la, garde juste
   le dégradé. » Le trait de `.courbe-fond .ligne` est un `stroke:#5eead4`
   avec un `drop-shadow(0 0 6px rgba(94,234,212,.45))`, et il SE DESSINE en
   trois secondes au chargement : c'est lui, la lumière qui monte. Le dégradé
   qu'il garde, c'est `.fond-deco`, juste au-dessus, et il ne bouge pas.
   On cache au lieu de supprimer : le retour en arrière est une ligne. */
.courbe-fond{display:none !important}
.courbe-fond{position:absolute;left:0;right:0;bottom:-2%;height:42%;z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 70%,transparent 100%)}
.courbe-fond svg{width:100%;height:100%;display:block}
.courbe-fond .ligne{fill:none;stroke:#5eead4;stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(94,234,212,.45));
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3s cubic-bezier(.65,0,.35,1) .4s}
.courbe-fond .aire{fill:url(#remplir-fond);opacity:0;transition:opacity 2.4s ease 1.4s}
.hero.parti .courbe-fond .ligne{stroke-dashoffset:0}
.hero.parti .courbe-fond .aire{opacity:1}
.hero > .env{position:relative;z-index:1}
@media (max-width:900px){.courbe-fond{height:40%;opacity:.4}}
@media (prefers-reduced-motion:reduce){.courbe-fond .ligne{stroke-dashoffset:0}.courbe-fond .aire{opacity:1}}

/* ⚠⚠ LA RANGÉE DES CATÉGORIES A DÉMÉNAGÉ DANS `site/sections.css`, et elle est
   écrite par `node src/sections-haut.mjs`. Dix pages la portent ; la styler
   ici n'en aurait servi que trois. Ce qui reste ci-dessous — les ancres et le
   défilement doux — concerne les sections de l'accueil, qui sont à elle. */
/* ⚠ L'ANCRE S'ARRÊTE SOUS LA BARRE COLLANTE, sinon le titre visé se retrouve
   derrière elle et on croit avoir cliqué à côté. */
#outils,#prochaines,#ecoute{scroll-margin-top:calc(var(--bande) + var(--nav) + 20px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}