/* ============================================================================
   site/commun.css — LA MÊME PEAU SUR TOUTES LES PAGES DU SITE.

   Marc, 30 août 2026 : « la page doit toujours être dans le même type de
   couleurs ». Un seul fichier, donc, plutôt qu'une palette recopiée trois fois
   qui finit par diverger.

   ⚠ AUCUN TIRET CADRATIN DANS LES TEXTES VISIBLES. Marc, 31 août : « enlève
   tous ces —, ça fait IA, et ce n'est pas professionnel. » On écrit avec des
   virgules, des deux-points et des points. La règle vaut pour toute page
   destinée à un client.
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --fond:#0a0b0d; --carte:#0f1216; --bord:#1e2126; --bord2:#262b32;
  --texte:#e8eaed; --doux:#8b93a1; --faible:#5a626e;
  --vert:#5eead4; --vert2:#14532d; --vertf:#0c2b26;
  --or:#f0b429; --bleu:#60a5fa; --mauve:#a78bfa;
}
body{background:var(--fond);color:var(--texte);
 font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
 -webkit-font-smoothing:antialiased}
a{color:var(--vert);text-decoration:none}a:hover{text-decoration:underline}

.nav{border-bottom:1px solid var(--bord);padding:13px 22px;display:flex;align-items:center;
 gap:8px;flex-wrap:wrap;background:var(--fond)}
.nav .mk{font-weight:800;font-size:16px;letter-spacing:-.4px;color:var(--texte);margin-right:8px}
.nav .mk span{color:var(--vert)}
.nav a.l{background:var(--carte);border:1px solid var(--bord);color:var(--doux);
 font:600 12.5px inherit;padding:6px 13px;border-radius:18px}
.nav a.l:hover{color:var(--texte);border-color:#3a4450;text-decoration:none}
.nav a.l.ici{background:var(--vertf);border-color:var(--vert2);color:var(--vert)}
.nav .sep{flex:1}
.nav .qui{color:var(--faible);font-size:12.5px}
.nav button{background:transparent;border:1px solid var(--bord2);color:var(--doux);
 font:600 12.5px inherit;padding:6px 13px;border-radius:8px;cursor:pointer}
.nav button:hover{color:var(--texte);border-color:#3a4450}

/* ── LES ONGLETS, TAILLE DU POUCE ────────────────────────────────────────────
   Marc, 1er septembre 2026 : « les catégories en haut sont trop petites. Il
   faut penser que ce n'est pas seulement pour les ordinateurs, c'est aussi pour
   les cellulaires, ça doit être plus accessible. »

   Ils étaient à 12,5 px dans 6 px de marge, soit une cible de 27 px de haut.
   Les recommandations d'accessibilité tactile demandent 44 px : un doigt n'est
   pas un curseur. Ils font maintenant 46 px, sur leur propre rangée, qui glisse
   horizontalement au pouce quand l'écran est trop étroit plutôt que de se
   replier sur trois lignes. C'est cette rangée qui reste collée en haut quand
   on descend, pas la marque : sur un téléphone, ce qui sert à naviguer doit
   rester sous le pouce. */
.ongl{border-bottom:1px solid var(--bord);background:var(--fond);
 position:sticky;top:0;z-index:50}
/* ⚠ UNE NAVIGATION NE SE FAIT PAS DÉFILER — corrigé le 1er septembre 2026.
   Première version : une rangée qui glissait horizontalement au pouce, pour
   garder les onglets gros sans les replier. Mesuré ensuite : à 390 px, « Les
   sons » commençait à 538 px et « L'éditeur » à 636 px. Deux des cinq
   destinations étaient donc INVISIBLES tant qu'on ne pensait pas à balayer.
   Marc : « je dois me déplacer de gauche à droite pour voir le tout. »

   Un onglet qu'il faut chercher n'est pas un onglet. Ils se replient donc sur
   deux rangées quand la largeur manque, et prennent un nom court sous 560 px.
   Tout est visible d'un coup d'oeil, sans un seul geste. */
.ongl .in{max-width:1080px;margin:0 auto;display:flex;gap:7px;padding:9px 14px;flex-wrap:wrap}
.ongl a{flex:0 1 auto;background:var(--carte);border:1px solid var(--bord);color:var(--doux);
 font:700 14.5px inherit;padding:0 16px;border-radius:12px;min-height:46px;
 display:flex;align-items:center;white-space:nowrap}
.ongl a .court{display:none}
@media(max-width:560px){
  .ongl .in{gap:6px;padding:8px 12px}
  .ongl a{font:700 13.5px inherit;padding:0 13px;min-height:44px}
  .ongl a .long{display:none}
  .ongl a .court{display:inline}
}
.ongl a:hover{color:var(--texte);border-color:#3a4450;text-decoration:none}
.ongl a.ici{background:var(--vertf);border-color:var(--vert2);color:var(--vert)}

/* ── LE BANDEAU QUI DÉFILE ───────────────────────────────────────────────────
   Marc, 1er septembre 2026 : « tu as oublié la ligne qui bouge de droite à
   gauche avec les tendances. Ça apporte vraiment quelque chose. »

   La même idée que le tableau des sons : une bourse. Le rail contient la liste
   DEUX FOIS et se déplace de la moitié de sa largeur ; à l'instant où la copie
   arrive à la place de l'original, l'animation reprend à zéro et l'oeil ne voit
   aucune couture. La durée est posée par la page, proportionnelle au nombre de
   lignes, sinon vingt tendances défileraient six fois plus vite que trois.
   Il s'arrête quand on le survole, et il ne bouge pas du tout pour qui a
   demandé à son système de réduire les animations. */
.tick{border-bottom:1px solid var(--bord);background:#0c0e11;overflow:hidden}
.tick .rail{display:flex;width:max-content;animation:defile linear infinite}
.tick:hover .rail{animation-play-state:paused}
.tick .it{display:flex;align-items:center;gap:9px;padding:10px 18px;
 border-right:1px solid var(--bord);white-space:nowrap;font-size:13px;color:var(--doux)}
.tick .it .r{color:var(--faible);font-weight:800;font-size:11px;font-variant-numeric:tabular-nums}
.tick .it b{font-weight:700;color:var(--texte);max-width:340px;overflow:hidden;
 text-overflow:ellipsis}
.tick .it i{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums}
.tick .it i.haut{color:#4ade80}.tick .it i.moyen{color:var(--or)}.tick .it i.bas{color:var(--doux)}
@keyframes defile{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tick .rail{animation:none}}

.wrap{max-width:1080px;margin:0 auto;padding:26px 22px 90px}

/* ── LE BANDEAU D'EXPLICATION ────────────────────────────────────────────────
   Marc : « en haut de chaque page, mets un texte qui explique comment faire ».
   Il se referme, et la page se souvient qu'on l'a fermé. */
.expli{background:var(--carte);border:1px solid var(--bord);border-left:3px solid var(--vert2);
 border-radius:11px;padding:16px 18px;margin-bottom:24px;position:relative}
.expli h2{font-size:15px;font-weight:700;margin-bottom:7px;padding-right:30px}
.expli p{color:var(--doux);font-size:13.5px;line-height:1.7;max-width:820px}
.expli p + p{margin-top:8px}
.expli .fermer{position:absolute;top:11px;right:12px;background:none;border:none;
 color:var(--faible);font:700 17px/1 inherit;cursor:pointer;padding:4px 7px;border-radius:6px}
.expli .fermer:hover{color:var(--texte);background:#171b21}

h1{font-size:clamp(26px,4vw,38px);line-height:1.12;letter-spacing:-1.1px;font-weight:800}
h1 span{color:var(--vert)}
.st{color:var(--doux);font-size:15.5px;margin-top:10px;max-width:720px;line-height:1.6}
h3{font-size:12.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--faible);
 margin:34px 0 14px;border-bottom:1px solid var(--bord);padding-bottom:9px}

.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.k{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:20px}
.k .g{font-size:34px;font-weight:800;letter-spacing:-1.5px;line-height:1;font-variant-numeric:tabular-nums}
.k .l{color:var(--faible);font-size:12.5px;margin-top:9px;line-height:1.5}
.k.v .g{color:var(--vert)}.k.o .g{color:var(--or)}.k.b .g{color:var(--bleu)}

.p{font-size:8.5px;font-weight:700;letter-spacing:.8px;padding:3px 7px;border-radius:3px;
 text-transform:uppercase;display:inline-block}
.course{background:#33291b;color:var(--or)}
.business{background:#0c2436;color:var(--bleu)}
.motivation{background:#241f33;color:var(--mauve)}
.inconnu{background:#1a1d22;color:var(--faible)}

.gros{background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 14px inherit;padding:12px 22px;border-radius:10px;cursor:pointer;display:inline-block}
.gros:hover{background:#0f3a33;text-decoration:none}

.pied{border-top:1px solid var(--bord);margin-top:70px;padding:26px 22px;
 color:var(--faible);font-size:12.5px;text-align:center;line-height:1.9}
.charge{max-width:640px;margin:60px auto;background:var(--carte);border:1px solid var(--bord);
 border-radius:12px;padding:26px;color:var(--doux)}

/* ============================================================================
   RÉÉCRITURE DU 1er SEPTEMBRE 2026 — LA CLARTÉ.

   Marc : « refais le site pour qu'il soit plus clair. » Quatre reproches, tous
   fondés, et tous le même défaut de fond : la page dit TOUT, tout de suite, au
   même volume. Cinq paragraphes d'explication, quinze nombres par tendance,
   quatre onglets sans ordre. Qui sait déjà s'y retrouve ; qui arrive, non.

   Le remède n'est pas d'écrire moins. C'est de HIÉRARCHISER : une seule chose
   à lire en premier, une seule action évidente, et le reste replié derrière un
   triangle que celui qui veut vérifier peut ouvrir. Rien n'est retiré du site,
   tout est rangé.
   ========================================================================== */

/* ── LA BARRE QUI DIT OÙ ON EST ──────────────────────────────────────────────
   Une phrase sous la navigation, toujours visible, jamais refermable : elle
   répond à « c'est quoi cette page » avant qu'on ait le temps de se le
   demander. C'est le manque le plus cher : les quatre onglets se ressemblaient
   et rien ne disait à quoi chacun servait. */
.sous{border-bottom:1px solid var(--bord);background:#0c0e11;padding:11px 22px}
.sous .in{max-width:1080px;margin:0 auto;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sous b{font-size:14px;font-weight:700;color:var(--texte)}
.sous span{color:var(--doux);font-size:13.5px;line-height:1.55}
.sous .etape{color:var(--vert);font-size:11.5px;font-weight:800;letter-spacing:1px;
 text-transform:uppercase;border:1px solid var(--vert2);background:var(--vertf);
 border-radius:20px;padding:2px 9px;white-space:nowrap}

/* ── LES TROIS TEMPS ─────────────────────────────────────────────────────────
   Remplace le pavé de cinq paragraphes. Trois cases numérotées, une ligne
   chacune. Ce qui ne tient pas en une ligne va dans le repli en dessous. */
.pas{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:0 0 14px}
.pa1{background:var(--carte);border:1px solid var(--bord);border-radius:11px;padding:14px 16px;
 position:relative;padding-left:46px}
.pa1 i{position:absolute;left:14px;top:13px;width:22px;height:22px;border-radius:50%;
 background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 11.5px/21px inherit;text-align:center;font-style:normal}
.pa1 b{display:block;font-size:13.5px;font-weight:700;margin-bottom:3px}
.pa1 span{color:var(--doux);font-size:12.5px;line-height:1.55}

/* ── LE REPLI ────────────────────────────────────────────────────────────────
   Tout le texte long du site vit désormais là-dedans. Fermé par défaut : la
   page se lit sans, et se vérifie avec. */
details.plus{background:var(--carte);border:1px solid var(--bord);border-radius:11px;
 padding:0;margin:0 0 22px}
details.plus > summary{cursor:pointer;list-style:none;padding:12px 16px;
 color:var(--doux);font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:8px}
details.plus > summary::-webkit-details-marker{display:none}
details.plus > summary::before{content:"▸";color:var(--vert);font-size:11px;transition:transform .15s}
details[open].plus > summary::before{transform:rotate(90deg)}
details.plus > summary:hover{color:var(--texte)}
details.plus .dedans{padding:0 16px 16px;border-top:1px solid var(--bord);margin-top:2px;padding-top:14px}
details.plus p{color:var(--doux);font-size:13.5px;line-height:1.7;max-width:820px}
details.plus p + p{margin-top:9px}
details.plus b{color:var(--texte)}

/* ── LA CARTE D'UNE TENDANCE, REBÂTIE ────────────────────────────────────────
   Ordre imposé, du plus utile au plus vérifiable :
     1. son rang et son nom, avec la note en pastille ;
     2. la phrase qui dit ce que c'est ;
     3. LE TEXTE À COPIER, encadré, c'est ce que le client vient chercher ;
     4. une seule ligne de preuve chiffrée ;
     5. un bouton, et deux replis pour les vidéos et le détail de la note.
   Avant, ces cinq choses avaient le même poids visuel et la note arrivait en
   dernier, après six statistiques. */
/* ── LA CARTE SE REPLIE ──────────────────────────────────────────────────────
   Marc, 1er septembre 2026 : « réduis-les pour qu'on ne voie que le titre et la
   note. Elles peuvent être l'une en dessous de l'autre, et quand on clique
   dessus, ça pousse les autres en bas et on voit toutes les informations. »

   Une carte dépliée fait deux écrans de téléphone. Six d'affilée, et il faut
   défiler longtemps avant de savoir ce qui existe. Repliées, les six tiennent
   d'un coup d'oeil et se comparent par leur note, ce qui est exactement ce que
   la note sert à faire.

   C'est un <details> natif, pas du JavaScript : le clavier l'ouvre, le lecteur
   d'écran l'annonce, et la recherche du navigateur y trouve ce qui est caché.
   La rangée fermée fait 64 px de haut, cible tactile confortable. */
details.c{background:var(--carte);border:1px solid var(--bord);border-radius:14px;
 margin-bottom:9px;overflow:hidden}
details.c[open]{border-color:var(--bord2)}
details.c > summary{list-style:none;cursor:pointer;display:flex;gap:13px;align-items:center;
 padding:12px 15px;min-height:64px}
details.c > summary::-webkit-details-marker{display:none}
details.c > summary:hover{background:#141920}
details.c .rg{color:var(--faible);font:800 13px/1 inherit;font-variant-numeric:tabular-nums;
 min-width:20px;text-align:center;flex:0 0 auto}
details.c .ti{flex:1;min-width:0}
details.c .ti .nm{font-size:16.5px;font-weight:800;letter-spacing:-.4px;line-height:1.35}
details.c .ti .bd{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
details.c .chev{flex:0 0 auto;color:var(--faible);font-size:13px;transition:transform .15s;
 padding:0 2px}
details[open].c .chev{transform:rotate(90deg);color:var(--vert)}
details.c .corps{padding:16px 15px 18px;border-top:1px solid var(--bord)}
details.c .corps .rs{color:var(--doux);font-size:13.5px;line-height:1.6;max-width:660px}
@media (max-width:560px){
  details.c > summary{padding:12px 13px;gap:10px}
  details.c .ti .nm{font-size:15.5px}
}

.pastille{text-align:center;border:1px solid var(--bord);border-radius:11px;
 padding:8px 11px;background:var(--fond);white-space:nowrap;flex:0 0 auto;min-width:62px}
.pastille .v{font-size:23px;font-weight:800;letter-spacing:-1.2px;line-height:1;
 font-variant-numeric:tabular-nums}
.pastille .u{color:var(--faible);font-size:9px;letter-spacing:.5px;margin-top:3px;
 text-transform:uppercase}
.pastille.haut{border-color:var(--vert2)}.pastille.haut .v{color:#4ade80}
.pastille.moyen .v{color:var(--or)}
.pastille.bas .v{color:var(--doux)}

/* le bloc que le client vient chercher */
.copie{border:1px solid var(--vert2);background:var(--vertf);border-radius:11px;
 padding:13px 15px;margin-top:15px}
.copie .tt{color:var(--vert);font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;
 font-weight:800;margin-bottom:9px}
.copie .li{background:#0a1512;border:1px solid #14403a;border-radius:8px;padding:9px 12px;
 font-size:14px;line-height:1.55;color:var(--texte)}
.copie .li + .li{margin-top:6px}
.copie .no{color:var(--doux);font-size:12px;margin-top:9px;line-height:1.5}

/* une seule ligne de preuve, au lieu de six tuiles */
.ligne{display:flex;gap:0;flex-wrap:wrap;margin-top:13px;border:1px solid var(--bord);
 border-radius:10px;background:var(--fond);overflow:hidden}
.ligne div{flex:1;min-width:96px;padding:10px 12px;text-align:center;
 border-right:1px solid var(--bord)}
.ligne div:last-child{border-right:0}
.ligne .g{font-size:16.5px;font-weight:800;letter-spacing:-.5px;line-height:1;
 font-variant-numeric:tabular-nums}
.ligne .l{color:var(--faible);font-size:10.5px;margin-top:5px;line-height:1.3}

.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:15px}
.actions .gros{padding:10px 18px;font-size:13.5px}
details.vol{flex:0 0 auto}
details.vol > summary{cursor:pointer;list-style:none;color:var(--doux);font-size:12.5px;
 font-weight:600;padding:10px 14px;border:1px solid var(--bord);border-radius:9px;
 display:flex;align-items:center;gap:7px;background:var(--fond)}
details.vol > summary::-webkit-details-marker{display:none}
details.vol > summary::before{content:"▸";color:var(--vert);font-size:11px;transition:transform .15s}
details[open].vol > summary::before{transform:rotate(90deg)}
details.vol > summary:hover{color:var(--texte);border-color:var(--bord2)}
details.vol .dedans{margin-top:11px}
/* le repli s'ouvre sur toute la largeur de la carte, pas dans la file des boutons */
.c details.vol[open]{flex:1 1 100%}

/* ── LES PORTES DE LA VUE D'ENSEMBLE ─────────────────────────────────────────
   La navigation ne disait pas où mènent les onglets. Ici chaque destination a
   une carte, une phrase, et un compte. */
.portes{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:11px;margin-top:14px}
.po{display:block;background:var(--carte);border:1px solid var(--bord);border-radius:12px;
 padding:18px 19px;color:var(--texte)}
.po:hover{border-color:var(--vert2);background:#0d1114;text-decoration:none}
.po .n{font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--vert);
 font-variant-numeric:tabular-nums}
.po .t{font-size:14.5px;font-weight:700;margin-top:9px}
.po .d{color:var(--faible);font-size:12.5px;margin-top:5px;line-height:1.55}
.po .f{color:var(--vert);font-size:12.5px;font-weight:700;margin-top:11px}

/* ════════════════════════════════════════════════════════════════════════════
   2 SEPTEMBRE 2026 — LE SITE PART CHEZ DE VRAIS PILOTES.

   Marc : « je l'envoie à mon partenaire pour qu'il le montre à des pilotes.
   Je veux que l'interface soit la plus facile possible à comprendre, sur chaque
   page. Je veux que personne ne puisse dire que ce n'est pas clair. »

   Tout ce qui suit sert ça, et rien d'autre : dire à voix haute ce qu'un bouton
   fait, avant qu'on ait à le deviner.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── L'ENCADRÉ QUI EXPLIQUE ─────────────────────────────────────────────────
   Un fait qu'il faut lire avant d'agir. Bordure à gauche, jamais un fond criard :
   il doit se remarquer sans crier. */
.note{background:var(--carte);border:1px solid var(--bord);border-left:3px solid var(--or);
 border-radius:10px;padding:15px 17px;margin:16px 0;color:var(--doux);
 font-size:13.5px;line-height:1.75}
.note b{color:var(--texte)}
.note .tt{color:var(--or);font-weight:800;font-size:12px;letter-spacing:.9px;
 text-transform:uppercase;margin-bottom:7px;display:block}
.note.vert{border-left-color:var(--vert)}
.note.vert .tt{color:var(--vert)}
.note.bleu{border-left-color:var(--bleu)}
.note.bleu .tt{color:var(--bleu)}

/* ── LA BULLE « ON EST EN CONSTRUCTION » ────────────────────────────────────
   Marc : « mets une fenêtre qui dit que c'est encore en construction, que la
   version qu'ils utilisent est prête, mais qu'il y a bien plus qui s'en vient. »

   Elle ne s'ouvre qu'UNE FOIS par navigateur : une annonce qui revient à chaque
   visite devient un obstacle, et on finit par la fermer sans la lire. Le lien
   « Ce qui s'en vient » dans le pied la rouvre quand on veut. */
.voile{position:fixed;inset:0;background:rgba(6,7,9,.82);backdrop-filter:blur(3px);
 z-index:200;display:flex;align-items:center;justify-content:center;padding:18px}
.voile[hidden]{display:none}
.bulle{background:linear-gradient(170deg,#121820 0%,var(--carte) 55%);
 border:1px solid #2b3a44;border-radius:16px;max-width:560px;width:100%;
 max-height:88vh;overflow:auto;padding:26px 26px 22px;
 box-shadow:0 24px 70px rgba(0,0,0,.6)}
.bulle .et{display:inline-block;background:var(--vertf);border:1px solid var(--vert2);
 color:var(--vert);font:800 10.5px inherit;letter-spacing:1.2px;text-transform:uppercase;
 padding:5px 11px;border-radius:20px}
.bulle h2{font-size:22px;letter-spacing:-.5px;margin:13px 0 0;line-height:1.3}
.bulle h2 span{color:var(--vert)}
.bulle p{color:var(--doux);font-size:14px;line-height:1.75;margin-top:12px}
.bulle p b{color:var(--texte)}
.bulle ul{margin:12px 0 0 19px;color:var(--doux);font-size:13.5px;line-height:1.8}
.bulle ul b{color:var(--texte)}
.bulle .bas{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
.bulle button{background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 14px inherit;padding:12px 22px;border-radius:10px;cursor:pointer}
.bulle button:hover{background:#0f3730}
.bulle button.sec{background:transparent;border-color:var(--bord2);color:var(--doux);font-weight:600}
.bulle .ptt{color:var(--faible);font-size:12px;margin-top:14px;line-height:1.6}

/* ── LE RUBAN DE VERSION ────────────────────────────────────────────────────
   Visible sur toutes les pages : personne ne doit croire que c'est la version
   finale, même s'il n'a jamais vu la bulle. */
.ruban{background:#151109;border-bottom:1px solid #3a2d12;color:#e7c77a;
 font-size:12.5px;padding:8px 20px;text-align:center;line-height:1.5}
.ruban b{color:#f0b429}
.ruban a{color:#f0b429;text-decoration:underline}

/* ── LE PREMIER ÉCRAN DE LA VUE D'ENSEMBLE ──────────────────────────────────
   Marc : « je veux que la page d'accueil soit plus propre, un meilleur look. »
   Un titre, une phrase, le chiffre qui frappe, et rien d'autre au-dessus de la
   ligne de flottaison. Le reste se mérite en descendant. */
.hero{position:relative;overflow:hidden;border:1px solid var(--bord);border-radius:18px;
 background:radial-gradient(120% 130% at 12% 0%,#132029 0%,#0d1116 46%,var(--carte) 100%);
 padding:32px 30px 30px;margin-top:18px}
.hero .et{display:inline-flex;align-items:center;gap:7px;background:rgba(94,234,212,.07);
 border:1px solid var(--vert2);color:var(--vert);font:800 10.5px inherit;
 letter-spacing:1.2px;text-transform:uppercase;padding:5px 12px;border-radius:20px}
.hero h1{font-size:clamp(27px,4.6vw,40px);letter-spacing:-1.3px;line-height:1.14;margin-top:15px}
.hero h1 span{color:var(--vert)}
.hero .sst{color:var(--doux);font-size:15px;line-height:1.75;margin-top:14px;max-width:640px}
.hero .sst b{color:var(--texte)}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.hero .cta a{background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 14.5px inherit;padding:13px 24px;border-radius:11px;display:inline-flex;
 align-items:center;gap:8px}
.hero .cta a:hover{background:#0f3730;text-decoration:none}
.hero .cta a.sec{background:var(--carte);border-color:var(--bord2);color:var(--texte);font-weight:700}
.hero .chif{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px;
 border-top:1px solid var(--bord);padding-top:20px}
.hero .chif div .g{font-size:27px;font-weight:800;letter-spacing:-1.1px;line-height:1;
 color:var(--texte);font-variant-numeric:tabular-nums}
.hero .chif div .g em{font-style:normal;color:var(--vert)}
.hero .chif div .l{color:var(--faible);font-size:11.5px;margin-top:6px;line-height:1.4;max-width:170px}
@media(max-width:560px){ .hero{padding:24px 20px 22px;border-radius:14px}
  .hero .chif{gap:18px} .hero .cta a{width:100%;justify-content:center} }

/* ── OÙ CLIQUER, DIT À VOIX HAUTE ───────────────────────────────────────────
   Marc : « tu peux même mettre quelque chose qui dit aux gens de cliquer sur le
   TrendEx. » Une flèche discrète sous la marque, la première fois seulement. */
.astuce{display:inline-flex;align-items:center;gap:6px;color:var(--faible);
 font-size:11.5px;margin-left:2px}
.astuce b{color:var(--doux);font-weight:600}

/* ── L'AIDE ET LES QUESTIONS ────────────────────────────────────────────────*/
.qa{background:var(--carte);border:1px solid var(--bord);border-radius:11px;margin-bottom:9px}
.qa > summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;font-size:14px;
 display:flex;gap:10px;align-items:flex-start}
.qa > summary::-webkit-details-marker{display:none}
.qa > summary::before{content:"?";flex:0 0 auto;width:19px;height:19px;border-radius:50%;
 background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 11px inherit;display:flex;align-items:center;justify-content:center;margin-top:2px}
.qa[open] > summary{border-bottom:1px solid var(--bord)}
.qa .rep{padding:14px 16px;color:var(--doux);font-size:13.5px;line-height:1.8}
.qa .rep b{color:var(--texte)}
.qa .rep code{background:var(--fond);border:1px solid var(--bord);border-radius:5px;
 padding:2px 7px;color:var(--vert);font-size:12.5px}

.form{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:19px 20px}
.form label{display:block;color:var(--doux);font-size:12.5px;font-weight:700;
 margin:13px 0 6px;letter-spacing:.3px}
.form label:first-of-type{margin-top:0}
.form input,.form textarea,.form select{width:100%;background:var(--fond);
 border:1px solid var(--bord2);color:var(--texte);font:14px inherit;padding:11px 13px;
 border-radius:9px}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--vert2)}
.form textarea{min-height:130px;resize:vertical;line-height:1.6}
.form button{background:var(--vertf);border:1px solid var(--vert2);color:var(--vert);
 font:800 14px inherit;padding:12px 22px;border-radius:10px;cursor:pointer;margin-top:16px}
.form button:disabled{opacity:.5;cursor:default}
.form .aide{color:var(--faible);font-size:11.5px;margin-top:7px;line-height:1.6}

/* la conversation avec l'assistant */
.fil{background:var(--fond);border:1px solid var(--bord);border-radius:11px;
 padding:14px;max-height:420px;overflow:auto;margin-bottom:12px}
.msg{max-width:88%;padding:11px 14px;border-radius:12px;font-size:13.5px;line-height:1.7;
 margin-bottom:9px;white-space:pre-wrap}
.msg.moi{margin-left:auto;background:var(--vertf);border:1px solid var(--vert2);color:var(--texte)}
.msg.lui{background:var(--carte);border:1px solid var(--bord);color:var(--doux)}
.msg.lui b{color:var(--texte)}

/* ── L'ÉCHELLE DE LA MESURE ─────────────────────────────────────────────────
   Marc, 2 septembre 2026 : « sur la première page, mets le nombre de comptes
   qu'on a regardés, le nombre de vidéos qu'on a regardées, des gros chiffres,
   que ce soit impressionnant. »

   Ce sont de VRAIS nombres, relevés sur la base du jour. Un chiffre gonflé se
   retourne contre nous à la première vérification, et ceux-là n'ont pas besoin
   d'être gonflés. Chacun porte sa phrase : un grand nombre sans son sens n'est
   qu'une décoration. */
.echelle{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
 background:var(--bord);border:1px solid var(--bord);border-radius:16px;overflow:hidden;margin-top:16px}
.ec{background:linear-gradient(170deg,#101720 0%,var(--carte) 60%);padding:24px 22px}
.ec .g{font-size:clamp(30px,5.4vw,46px);font-weight:800;letter-spacing:-2px;line-height:1;
 color:var(--vert);font-variant-numeric:tabular-nums}
.ec .g small{font-size:.46em;letter-spacing:-.5px;color:var(--texte);font-weight:700;margin-left:5px}
.ec .t{font-size:13.5px;font-weight:700;margin-top:11px;color:var(--texte)}
.ec .d{color:var(--faible);font-size:12px;margin-top:5px;line-height:1.55}
@media(max-width:560px){ .ec{padding:19px 18px} }