/* ═══════════════════════════════════════════════════════════════════════
   FUTUR EXPERT — les styles propres à certaines pages.

   `fx.css` porte le système : les jetons, les boutons, les cartes, la
   mise en page. Ce fichier-ci porte ce qui ne sert qu'à une page ou deux —
   le héros de l'accueil, la liste des chapitres, la grille des tarifs, le
   plateau du jeu. Les séparer évite de faire télécharger à l'étudiant qui
   lit un chapitre les trois cents lignes de la page de vente.
   ═════════════════════════════════════════════════════════════════════ */

/* ── LE HÉROS ───────────────────────────────────────────────────────── */
.heros{position:relative;overflow:hidden;
  padding-block:clamp(36px,6vw,74px) clamp(30px,5vw,60px)}
.heros::before{content:"";position:absolute;inset:-40% -10% auto -10%;
  height:520px;z-index:-1;
  background:
    radial-gradient(38% 60% at 14% 24%,var(--violet-f) 0,transparent 70%),
    radial-gradient(34% 56% at 86% 10%,var(--turquoise-f) 0,transparent 70%),
    radial-gradient(30% 48% at 62% 68%,var(--rose-f) 0,transparent 72%)}
.heros-grille{display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center}
@media (max-width:900px){.heros-grille{grid-template-columns:minmax(0,1fr)}}
.heros h1{margin-bottom:16px}
.heros .sous{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:var(--encre-2);
  max-width:56ch;margin-bottom:26px}
.heros .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.heros .assur{margin-top:16px;color:var(--gris);font-size:.9rem;
  display:flex;gap:16px;flex-wrap:wrap}
.heros .assur span{display:inline-flex;align-items:center;gap:6px}
.heros .assur svg{color:var(--ok)}
.badge-prog{display:inline-flex;align-items:center;gap:8px;
  background:var(--papier);border:1px solid var(--bord);
  box-shadow:var(--om-1);padding:7px 15px 7px 9px;border-radius:var(--r-p);
  font-weight:700;font-size:.88rem;margin-bottom:20px}
.badge-prog b{color:var(--action-i)}
.badge-prog .pt{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 4px var(--ok-f)}

/* la carte « aperçu » du héros : un vrai extrait, pas une illustration */
.apercu{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-xl);box-shadow:var(--om-3);overflow:hidden;
  transform:rotate(-1.1deg);transition:var(--t)}
.apercu:hover{transform:rotate(0)}
.apercu-tete{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--brume);border-bottom:1px solid var(--bord);font-size:.84rem;
  font-weight:700;color:var(--encre-2)}
.apercu-tete .pt{width:10px;height:10px;border-radius:50%}
.apercu-corps{padding:20px 22px;font-size:.95rem}
.apercu-corps h4{font-family:var(--disp);margin-bottom:8px}
.apercu-bloc{border-left:4px solid var(--rose);background:var(--rose-f);
  border-radius:4px 12px 12px 4px;padding:12px 14px;margin:14px 0;
  color:var(--rose-i);font-size:.92rem}
.apercu-bloc b{color:var(--rose-i)}
.apercu-jr{width:100%;border-collapse:collapse;font-size:.84rem;
  font-family:var(--mono);margin-top:10px}
.apercu-jr th{background:var(--encre);color:#fff;padding:6px 8px;
  text-align:left;font-family:var(--corps);font-size:.76rem}
.apercu-jr td{border-bottom:1px solid var(--bord);padding:6px 8px}
.apercu-jr .d{text-align:right}

/* ── LES CHIFFRES ───────────────────────────────────────────────────── */
.chiffres{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));counter-reset:ch}
/* CINQ BOÎTES BLANCHES ALIGNÉES, C'EST UN TABLEUR. Chacune prend un
   pastel différent, toujours dans le même ordre : on distingue les
   chiffres d'un coup d'œil au lieu de les lire l'un après l'autre. Ce
   sont les fonds clairs des teintes du manuel, pas de nouvelles couleurs. */
.chiffres > div{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:16px 14px;text-align:center}
.chiffres > div:nth-child(5n+1){background:var(--indigo-f)}
.chiffres > div:nth-child(5n+2){background:var(--turquoise-f)}
.chiffres > div:nth-child(5n+3){background:var(--orange-f)}
.chiffres > div:nth-child(5n+4){background:var(--violet-f)}
.chiffres > div:nth-child(5n+5){background:var(--menthe-f)}
.chiffres b{display:block;font-family:var(--disp);font-weight:800;
  font-size:1.7rem;line-height:1.1;margin-bottom:4px}
.chiffres > div:nth-child(5n+1) b{color:var(--indigo-i)}
.chiffres > div:nth-child(5n+2) b{color:var(--turquoise-i)}
.chiffres > div:nth-child(5n+3) b{color:var(--orange-i)}
.chiffres > div:nth-child(5n+4) b{color:var(--violet-i)}
.chiffres > div:nth-child(5n+5) b{color:var(--menthe-i)}
.chiffres span{font-size:.86rem;color:var(--encre-2);font-weight:600}

/* ── LES DEUX FILIÈRES ──────────────────────────────────────────────── */
.filiere{display:flex;flex-direction:column;gap:14px;padding:26px;
  border-radius:var(--r-l);border:1px solid var(--bord);background:var(--papier);
  box-shadow:var(--om-1);transition:var(--t);text-decoration:none;color:inherit;
  position:relative;overflow:hidden}
.filiere:hover{box-shadow:var(--om-3);transform:translateY(-3px)}
.filiere::after{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--teinte)}
.filiere .sig{font-family:var(--disp);font-weight:800;font-size:1.9rem;
  letter-spacing:-.03em}
.filiere .lst{display:flex;flex-wrap:wrap;gap:6px}
.filiere .lst span{background:var(--brume);color:var(--encre-2);
  padding:4px 10px;border-radius:var(--r-p);font-size:.8rem;font-weight:700}
.filiere .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--disp);font-weight:700;color:var(--teinte-i)}

/* ── CE QUE CONTIENT L'ABONNEMENT ───────────────────────────────────── */
.atout{display:flex;gap:14px;align-items:flex-start}
.atout .ic{width:46px;height:46px;border-radius:14px;flex:none;
  display:grid;place-items:center;background:var(--teinte-f);color:var(--teinte-i)}
.atout h3{font-size:1.06rem;margin-bottom:4px}
.atout p{color:var(--gris);font-size:.94rem;margin:0}

/* ── LES ÉTAPES ─────────────────────────────────────────────────────── */
.etapes{counter-reset:e;display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.etapes > li{counter-increment:e;list-style:none;position:relative;
  padding-left:56px}
.etapes > li::before{content:counter(e);position:absolute;left:0;top:-4px;
  width:42px;height:42px;border-radius:50%;background:var(--action);color:#fff;
  display:grid;place-items:center;font-family:var(--disp);font-weight:800;
  font-size:1.2rem}
.etapes h3{font-size:1.06rem;margin-bottom:5px}
.etapes p{color:var(--gris);font-size:.95rem;margin:0}

/* ── LA LISTE DES CHAPITRES ─────────────────────────────────────────── */
/* UN CHAPITRE SE DÉPLIE, IL NE SE SAUTE PLUS. La ligne est le « summary »
   d'un « details » : on clique, et les trois espaces du chapitre — le
   cours, les exercices avec leurs corrigés, le quiz — apparaissent comme
   trois choix francs, chacun avec sa couleur. */
.ch-bloc{border-bottom:1px solid var(--bord);border-left:4px solid transparent;
  transition:var(--t)}
.ch-bloc:last-child{border-bottom:0}
.ch-bloc[open]{background:var(--teinte-f,var(--brume));
  border-left-color:var(--teinte,var(--action))}
.ch-bloc:hover{border-left-color:var(--teinte,var(--action))}
.ch-lig{display:flex;gap:14px;align-items:center;padding:13px 16px;
  text-decoration:none;color:inherit;transition:var(--t);cursor:pointer;
  list-style:none}
.ch-lig::-webkit-details-marker{display:none}
.ch-lig::marker{content:""}
.ch-lig:hover{background:var(--brume)}
/* LE NUMÉRO PORTE LA COULEUR DE SA MATIÈRE. Vingt-quatre lignes de gris
   les unes sous les autres, c'est un tableau de chiffres ; la même liste
   avec un numéro coloré, c'est un sommaire. */
.ch-lig .num{font-family:var(--mono);font-weight:700;
  color:var(--teinte-i,var(--gris));font-size:.92rem;flex:none;width:30px;
  text-align:center;padding:2px 0;border-radius:var(--r-xs);
  background:var(--teinte-f,transparent)}
.ch-lig .txt{flex:1;min-width:0}
.ch-lig .t{display:block;font-weight:700;line-height:1.35}
.ch-lig .m{display:block;font-size:.84rem;color:var(--gris);margin-top:2px}
.ch-lig .etat{display:flex;gap:6px;align-items:center;flex:none}
.ch-lig .chev{flex:none;color:var(--gris-clair);display:flex;
  transition:transform var(--t)}
.ch-bloc[open] > .ch-lig .chev{transform:rotate(180deg);color:var(--action)}
.ch-bloc.fait > .ch-lig .num{color:var(--ok-i);background:var(--ok-f)}
/* Une fois la ligne dépliée, son fond prend la teinte : le numéro
   passerait en teinte sur teinte, donc il repasse sur blanc. */
.ch-bloc[open] > .ch-lig .num{background:var(--papier)}
/* SUR TÉLÉPHONE, LE CHEVRON REMONTE. Les pastilles passent à la ligne
   faute de place, et le chevron se retrouvait seul sur une troisième
   ligne, loin du titre qu'il commande. On l'ancre en haut à droite. */
@media (max-width:560px){
  .ch-lig{flex-wrap:wrap;position:relative;padding-right:40px}
  .ch-lig .etat{width:100%;padding-left:40px}
  .ch-lig .chev{position:absolute;right:12px;top:14px}
}
/* Les trois espaces, dépliés. */
.ch-menu{display:grid;gap:10px;padding:4px 16px 14px 46px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
@media (max-width:560px){ .ch-menu{padding-left:16px} }
.ch-choix{display:flex;flex-direction:column;gap:2px;padding:13px 15px;
  border-radius:var(--r);background:var(--papier);text-decoration:none;
  color:inherit;border:1px solid var(--bord);transition:var(--t)}
.ch-choix .i{color:var(--teinte-c);display:flex;margin-bottom:4px}
.ch-choix .l{font-family:var(--disp);font-weight:700;font-size:.98rem;
  line-height:1.25}
.ch-choix .d{font-size:.83rem;color:var(--gris)}
.ch-choix:hover{border-color:var(--teinte-c);background:var(--teinte-cf);
  transform:translateY(-2px)}
.ch-choix:hover .l{color:var(--teinte-ci)}
.c-cours{--teinte-c:var(--bleu);--teinte-cf:var(--bleu-f);--teinte-ci:var(--bleu-i)}
.c-exo{--teinte-c:var(--orange);--teinte-cf:var(--orange-f);--teinte-ci:var(--orange-i)}
.c-quiz{--teinte-c:var(--violet);--teinte-cf:var(--violet-f);--teinte-ci:var(--violet-i)}
.ch-sous{margin:0;padding:0 16px 14px 46px;font-size:.85rem}
@media (max-width:560px){ .ch-sous{padding-left:16px} }
.ch-sous a{display:inline-flex;align-items:center;gap:6px;font-weight:600;
  color:var(--menthe-i);text-decoration:none}
.ch-sous a:hover{text-decoration:underline}
.liste-cartes{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);overflow:hidden}

/* ── LES TARIFS ─────────────────────────────────────────────────────── */
.tarif{max-width:460px;margin-inline:auto;background:var(--papier);
  border:2px solid var(--action);border-radius:var(--r-xl);
  box-shadow:var(--om-3);overflow:hidden;position:relative}
.tarif .ruban{background:var(--action);color:#fff;text-align:center;
  padding:9px;font-family:var(--disp);font-weight:700;font-size:.92rem}
.tarif .corps{padding:28px}
.tarif .prix{display:flex;align-items:baseline;gap:8px;
  justify-content:center;margin-bottom:6px}
.tarif .prix b{font-family:var(--disp);font-weight:800;font-size:3.2rem;
  line-height:1;letter-spacing:-.04em}
.tarif .prix span{color:var(--gris);font-weight:700}
.tarif .ensuite{text-align:center;color:var(--gris);margin-bottom:22px;
  font-size:.95rem}
.tarif ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px}
.tarif li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
.tarif li svg{color:var(--ok);flex:none;margin-top:3px}
.tarif .fin{text-align:center;color:var(--gris);font-size:.87rem;margin-top:14px}

/* ── LA FOIRE AUX QUESTIONS ─────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:820px;margin-inline:auto}

/* ── LE JEU ─────────────────────────────────────────────────────────── */
.jeu-plateau{max-width:620px;margin-inline:auto;text-align:center}
.jeu-carte{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-xl);box-shadow:var(--om-2);padding:clamp(22px,4vw,40px);
  margin-bottom:20px}
.jeu-q{font-family:var(--disp);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.3rem);line-height:1.2;margin:10px 0 6px}
.jeu-num{font-family:var(--mono);font-weight:600;letter-spacing:.06em}
.jeu-choix{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:22px}
@media (max-width:520px){.jeu-choix{grid-template-columns:minmax(0,1fr)}}
.jeu-choix button{padding:16px;border-radius:var(--r);border:2px solid var(--bord-fort);
  background:var(--papier);font:inherit;font-weight:700;cursor:pointer;
  transition:var(--t);text-align:left;display:flex;gap:10px;align-items:center}
.jeu-choix button:hover:not(:disabled){border-color:var(--action);
  background:var(--action-f)}
.jeu-choix button.juste{border-color:var(--ok);background:var(--ok-f);
  color:var(--ok-i)}
.jeu-choix button.faux{border-color:var(--danger);background:var(--danger-f);
  color:var(--danger-i)}
.jeu-choix button:disabled{cursor:default}
.jeu-libre{display:flex;gap:10px;margin-top:20px}
.jeu-libre input{font-family:var(--mono);font-size:1.3rem;text-align:center;
  letter-spacing:.1em}
.jeu-retour{margin-top:18px;padding:16px;border-radius:var(--r);
  font-size:.96rem;text-align:left}
.jeu-stats{display:flex;gap:18px;justify-content:center;color:var(--gris);
  font-size:.9rem;font-weight:700}

/* ── LA VEILLE ──────────────────────────────────────────────────────── */
.actu{display:flex;flex-direction:column;gap:9px}
.actu .haut{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.actu .src{font-size:.82rem;color:var(--gris)}
.actu .src a{color:var(--gris)}
.actu .impact{border-left:3px solid var(--attention);background:var(--attention-f);
  color:var(--attention-i);padding:9px 12px;border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:.9rem}

/* ── LE PROFIL ──────────────────────────────────────────────────────── */
.grille-avatars{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.grille-avatars label{display:block;cursor:pointer;text-align:center;
  border:2px solid transparent;border-radius:var(--r);padding:8px;
  transition:var(--t)}
.grille-avatars label:hover{background:var(--brume)}
.grille-avatars input{position:absolute;opacity:0;pointer-events:none}
.grille-avatars input:checked + img{outline:3px solid var(--action);
  outline-offset:2px;border-radius:50%}
.grille-avatars img{width:100%;max-width:72px;height:auto}
.grille-avatars .nom{display:block;font-size:.74rem;color:var(--gris);
  margin-top:5px;font-weight:700}
.grille-titres{display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.grille-titres label{border:1.5px solid var(--bord);border-radius:var(--r-s);
  padding:10px 13px;cursor:pointer;font-weight:700;font-size:.92rem;
  transition:var(--t)}
.grille-titres label:hover{border-color:var(--gris-clair)}
.grille-titres input{position:absolute;opacity:0}
.grille-titres label:has(input:checked){border-color:var(--action);
  background:var(--action-f);color:var(--action-i)}

/* ── LE TABLEAU DE BORD ─────────────────────────────────────────────── */
.bord-tete{display:grid;gap:22px;grid-template-columns:auto 1fr;
  align-items:center}
@media (max-width:640px){.bord-tete{grid-template-columns:minmax(0,1fr);text-align:center;
  justify-items:center}}
.serie-feu{display:inline-flex;align-items:center;gap:7px;
  background:var(--orange-f);color:var(--orange-i);padding:7px 14px;
  border-radius:var(--r-p);font-weight:800;font-family:var(--disp)}
.mat-lig{display:flex;gap:14px;align-items:center;padding:13px 0;
  border-bottom:1px solid var(--bord);text-decoration:none;color:inherit}
.mat-lig:last-child{border-bottom:0}
.mat-lig .pt{width:10px;height:38px;border-radius:5px;background:var(--teinte);
  flex:none}
.mat-lig .nom{flex:1;min-width:0}
.mat-lig .nom b{display:block;font-size:.98rem}
.mat-lig .nom span{font-size:.83rem;color:var(--gris)}
.mat-lig .jg{width:150px;flex:none}
@media (max-width:640px){.mat-lig .jg{width:90px}}

/* ── L'ADMINISTRATION ───────────────────────────────────────────────── */
.admin-grille{display:grid;grid-template-columns:220px minmax(0,1fr);gap:26px;
  align-items:start}
/* Même remarque que pour `.mise-page` : sans `minmax(0,…)`, la colonne
   ne descend pas sous la largeur de son menu, et l'administration
   débordait de près de six cents pixels sur un téléphone. En dessous de
   900 px le menu devient d'ailleurs une barre qui défile horizontalement
   plutôt qu'une colonne : c'est le seul endroit du site où une barre de
   navigation compte plus de quinze entrées. */
@media (max-width:900px){
  .admin-grille{grid-template-columns:minmax(0,1fr)}
  .admin-nav{position:static;display:flex;gap:6px;overflow-x:auto;
    padding:8px;-webkit-overflow-scrolling:touch}
  .admin-nav a{white-space:nowrap;min-height:44px}
  .admin-nav .titre{display:none}
}
.admin-nav{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:10px;position:sticky;
  top:calc(var(--entete-h) + 16px)}
.admin-nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;
  border-radius:var(--r-xs);color:var(--encre-2);text-decoration:none;
  font-weight:700;font-size:.93rem}
.admin-nav a:hover{background:var(--brume)}
.admin-nav a[aria-current]{background:var(--action-f);color:var(--action-i)}
.admin-nav .titre{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);padding:12px 11px 5px;font-weight:800}
.admin-nav a span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.admin-nav{min-width:0}
.admin-tete{display:flex;justify-content:space-between;align-items:flex-end;
  gap:14px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;
  border-bottom:1px solid var(--bord)}
.admin-tete h1{font-size:1.5rem;margin:0}
.admin-tete p{color:var(--encre-2);font-size:.93rem;margin:6px 0 0;
  max-width:62ch}
.admin-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-bottom:24px}
.admin-kpi{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:14px 16px;border-left:4px solid
  var(--teinte,var(--bord-fort))}
.admin-kpi b{display:block;font-family:var(--disp);font-size:1.55rem;
  line-height:1.15;color:var(--encre)}
.admin-kpi span{font-size:.84rem;color:var(--gris);display:block;margin-top:2px}
.admin-kpi a{font-size:.84rem;font-weight:700}
.admin-bloc{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:18px 20px;margin-bottom:20px}
.admin-bloc>h2{font-size:1.05rem;margin:0 0 4px}
.admin-bloc>p.d{color:var(--gris);font-size:.88rem;margin:0 0 14px}
.admin-form{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin:0}
.admin-form .champ{margin:0;flex:1;min-width:170px}
.admin-form input[type=text],.admin-form input[type=search],
.admin-form input[type=email],.admin-form input[type=number],
.admin-form select{min-height:42px}
.admin-mini{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
.admin-mini input[type=text],.admin-mini input[type=number]{min-height:38px;
  min-width:90px;max-width:220px}
.admin-note{font-size:.86rem;color:var(--gris);margin-top:10px}
.admin-lecture{border-left:4px solid var(--info);background:var(--info-f);
  color:var(--info-i);border-radius:var(--r-s);padding:14px 16px;
  margin-bottom:20px;font-size:.93rem}
.admin-lecture b{color:var(--info-i)}
@media (max-width:640px){
  .admin-tete{align-items:flex-start}
  .admin-form .champ{min-width:100%}
  .admin-mini{width:100%}
  .admin-mini input[type=text],.admin-mini input[type=number]{max-width:none;
    flex:1}
  .admin-tete .btn,.admin-form>.btn{width:100%}
}

/* ── DIVERS ─────────────────────────────────────────────────────────── */
.bande-alerte{background:var(--attention-f);border-bottom:1px solid
  color-mix(in srgb,var(--attention) 40%,transparent);
  color:var(--attention-i);padding:10px 0;font-size:.92rem;font-weight:600}
.ancre-haut{position:fixed;right:18px;bottom:88px;z-index:50;width:44px;
  height:44px;border-radius:50%;background:var(--papier);border:1px solid var(--bord);
  box-shadow:var(--om-2);display:none;place-items:center;cursor:pointer;
  color:var(--encre)}
.ancre-haut.vu{display:grid}
@media (max-width:860px){.ancre-haut{bottom:96px}}

/* ── LES PAGES DE COMPTE (inscription, connexion, mot de passe) ─────── */
/* Une colonne de formulaire qui ne dépasse jamais 460 px : au-delà, l'œil
   perd la ligne entre un label et son champ. La colonne de droite explique
   ce que le compte ouvre ; sous 900 px elle passe DESSOUS le formulaire —
   sur un téléphone, on vient créer un compte, pas lire un argumentaire. */
.auth-grille{display:grid;gap:clamp(24px,4vw,44px);
  grid-template-columns:minmax(0,460px) minmax(0,1fr);align-items:start}
@media (max-width:900px){.auth-grille{grid-template-columns:minmax(0,1fr)}}
.auth-seul{width:min(460px,100% - 28px);margin-inline:auto}
.auth-carte{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-l);box-shadow:var(--om-2);padding:clamp(22px,4vw,34px)}
.auth-t{font-size:clamp(1.5rem,1.3rem + 1vw,1.9rem);margin-bottom:6px}
.auth-s{color:var(--gris);font-size:.95rem;margin-bottom:22px}
.auth-fin{color:var(--gris);font-size:.86rem;text-align:center;
  margin:14px 0 0;display:flex;gap:6px;justify-content:center;
  align-items:flex-start;flex-wrap:wrap}
.auth-fin svg{flex:none;margin-top:2px}
.auth-sous{color:var(--gris);font-size:.9rem;text-align:center;
  margin:20px auto 0;max-width:46ch}
.champ .fac{font-weight:600;font-size:.78rem;color:var(--gris);
  background:var(--brume);border-radius:var(--r-p);padding:2px 8px;
  margin-left:6px;text-transform:lowercase}

/* Le champ piège : hors de l'écran, hors du parcours au clavier. On ne le
   masque pas avec display:none — certains robots savent le détecter. */
.piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden}

/* La jauge de robustesse, posée par le script de la page d'inscription. */
.mdp-force{display:flex;align-items:center;gap:10px;margin-top:2px}
.mdp-force .jauge{flex:1}
.mdp-mot{font-size:.82rem;font-weight:700;min-width:13ch;text-align:right;
  color:var(--gris)}
.mdp-danger{color:var(--danger-i)}
.mdp-attention{color:var(--attention-i)}
.mdp-ok{color:var(--ok-i)}

/* La colonne « ce que ça ouvre ». */
.auth-cote{display:grid;gap:16px}
.cote-t{font-size:1.06rem;margin-bottom:12px}
.cote-lst{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.cote-lst li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.cote-lst svg{color:var(--ok);flex:none;margin-top:3px}
.cote-offre{border-left:4px solid var(--action)}
.cote-prix{font-family:var(--disp);font-weight:800;font-size:1.12rem;
  margin-bottom:6px}
.cote-prix b{color:var(--action-i);font-size:1.5rem}
.cote-p{color:var(--gris);font-size:.93rem;margin:0}
.cote-conf{color:var(--gris);font-size:.85rem;display:flex;gap:8px;
  align-items:flex-start;margin:0}
.cote-conf svg{flex:none;margin-top:2px}

/* ── LE PROFIL PUBLIC D'UN MEMBRE ──────────────────────────────────── */
.membre-tete{display:flex;gap:22px;align-items:center;margin-bottom:16px}
.membre-av{flex:none}
.membre-av img{width:84px;height:84px;border-radius:50%;
  background:var(--brume);border:2px solid var(--bord)}
.membre-id h1{font-size:clamp(1.4rem,1.2rem + 1vw,1.8rem);margin-bottom:8px}
.membre-meta{color:var(--gris);font-size:.88rem;margin:10px 0 0;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.membre-note{color:var(--gris);font-size:.86rem;display:flex;gap:8px;
  align-items:flex-start;margin:0 0 26px}
.membre-note svg{flex:none;margin-top:2px}
.membre-h{font-size:1.1rem;margin:0 0 12px}
.membre-h + .liste-cartes,.membre-h + .vide{margin-bottom:26px}
@media (max-width:560px){
  .membre-tete{flex-direction:column;text-align:center}
  .membre-meta,.membre-id .rang{justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ESPACE PERSONNEL — tableau de bord, profil, réglages, données.

   MOBILE D'ABORD, ET POUR DE BON. Le tableau de bord est la page la plus
   consultée sur téléphone : tout y est écrit à 390 px puis élargi, jamais
   l'inverse. Les deux règles qui en découlent :

     · l'en-tête (avatar, pseudonyme, série, bouton « Reprendre ») tient
       dans le premier écran, sans faire défiler ;
     · le bouton « Reprendre » fait toute la largeur sur téléphone et
       reste à droite dès qu'il y a la place — c'est le seul .btn-1 de la
       page, il ne se cherche jamais.
   ═════════════════════════════════════════════════════════════════════ */

/* un texte réservé aux lecteurs d'écran */
.hors-ecran{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}

/* ── L'EN-TÊTE DU TABLEAU DE BORD ───────────────────────────────────── */
.bord-tete{align-items:center}
@media (max-width:640px){.bord-tete{text-align:left;justify-items:stretch}}
.bord-moi{display:flex;gap:16px;align-items:center;min-width:0}
.bord-av{width:76px;height:76px}
.bord-nom{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.8rem);margin:0;
  overflow-wrap:anywhere}
.bord-serie-note{color:var(--gris);font-size:.86rem;margin:8px 0 0}
.bord-reprendre{display:flex;flex-direction:column;gap:10px;
  align-items:flex-end;min-width:0}
.bord-reprendre-quoi{font-size:.9rem;color:var(--gris);text-align:right;
  max-width:42ch}
.bord-reprendre-quoi b{color:var(--encre-2)}
.bord-reprendre .btn{white-space:nowrap}
@media (max-width:640px){
  .bord-moi{gap:14px}
  .bord-av{width:60px;height:60px}
  .bord-reprendre{align-items:stretch;width:100%}
  .bord-reprendre-quoi{text-align:left;max-width:none}
}

/* ── L'ANNEAU ET CE QU'IL RESTE ─────────────────────────────────────── */
.bord-grille{display:grid;gap:18px;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
@media (max-width:860px){.bord-grille{grid-template-columns:minmax(0,1fr)}}
.bord-anneau{display:flex;gap:20px;align-items:center}
.bord-anneau .anneau{--taille:104px}
.bord-reste{font-family:var(--disp);font-size:1.05rem;display:block;
  line-height:1.3}
.bord-reste-d{color:var(--gris);font-size:.9rem;margin:6px 0 12px}
@media (max-width:420px){
  .bord-anneau{gap:14px}
  .bord-anneau .anneau{--taille:84px}
  .bord-anneau .anneau b{font-size:1.1rem}
}

/* ── LES TITRES DE SECTION ET LE PIED ───────────────────────────────── */
.bord-h2{font-size:1.15rem;margin:0 0 12px}
.bord-sous{color:var(--gris);font-size:.95rem;margin:6px 0 0;max-width:70ch}
.bord-pied{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.92rem;
  font-weight:700;margin:0}
.bord-pied a{display:inline-flex;align-items:center;gap:6px;
  color:var(--encre-2);text-decoration:none}
.bord-pied a:hover{color:var(--action-i);text-decoration:underline}

/* ── L'ENCADRÉ D'ABONNEMENT — discret, jamais bloquant ──────────────── */
.bord-abo{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  border-left:4px solid var(--action)}
.bord-abo > div{flex:1;min-width:240px}
.bord-abo p{color:var(--gris);font-size:.92rem;margin:6px 0 0;max-width:62ch}
.bord-abo .btn{white-space:nowrap}

/* ── L'ONGLET DE FILIÈRE ────────────────────────────────────────────── */
.onglet-pct{font-size:.78rem;font-weight:800;color:var(--gris);
  margin-left:6px;font-variant-numeric:tabular-nums}
.onglets [aria-current] .onglet-pct{color:var(--action-i)}

/* ── LA COLONNE OBJECTIFS + ACTIVITÉ ────────────────────────────────── */
.bord-bas{display:grid;gap:26px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:860px){.bord-bas{grid-template-columns:minmax(0,1fr)}}

/* ── LES OBJECTIFS ──────────────────────────────────────────────────── */
.obj-lig{display:flex;gap:12px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--bord)}
.obj-lig:last-child{border-bottom:0}
.obj-cocher{display:flex;flex:none}
.obj-case{width:26px;height:26px;min-height:0;flex:none;border-radius:8px;
  border:2px solid var(--bord-fort);background:var(--papier);cursor:pointer;
  display:grid;place-items:center;color:var(--papier);padding:0;
  transition:var(--t)}
.obj-case:hover{border-color:var(--action)}
.obj-lig.fait .obj-case{background:var(--ok);border-color:var(--ok)}
.obj-txt{flex:1;min-width:0}
.obj-txt b{display:block;font-size:.97rem;line-height:1.35}
.obj-txt span{display:block;font-size:.82rem;color:var(--gris)}
.obj-lig.fait .obj-txt b{text-decoration:line-through;color:var(--gris)}
.obj-suppr{width:32px;height:32px;min-height:0;flex:none;border:0;padding:0;
  background:none;color:var(--gris-clair);cursor:pointer;border-radius:8px;
  display:grid;place-items:center;transition:var(--t)}
.obj-suppr:hover{background:var(--danger-f);color:var(--danger-i)}
.obj-props{display:grid;gap:10px}
.obj-prop{display:flex;gap:11px;align-items:flex-start;width:100%;
  text-align:left;padding:13px 15px;border-radius:var(--r-s);
  border:1.5px dashed var(--bord-fort);background:var(--papier);font:inherit;
  color:inherit;cursor:pointer;transition:var(--t)}
.obj-prop:hover{border-color:var(--action);background:var(--action-f);
  border-style:solid}
.obj-prop svg{flex:none;margin-top:2px;color:var(--action)}
.obj-prop b{display:block;font-weight:700;line-height:1.35}
.obj-prop span span{display:block;font-size:.84rem;color:var(--gris);
  margin-top:2px}

/* ── L'ACTIVITÉ RÉCENTE ET LES FAVORIS ──────────────────────────────── */
.act-lig{display:flex;gap:12px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--bord);text-decoration:none;color:inherit}
.act-lig:last-child{border-bottom:0}
.act-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;
  place-items:center;background:var(--brume);color:var(--encre-2)}
.act-txt{flex:1;min-width:0}
.act-txt b{display:block;font-weight:600;font-size:.94rem;line-height:1.35;
  overflow-wrap:anywhere}
.act-txt span{display:block;font-size:.82rem;color:var(--gris)}
a.act-lig:hover .act-txt b{color:var(--action-i)}

/* ── LE DÉTAIL DE LA PROGRESSION ────────────────────────────────────── */
.prog-mat > summary{gap:14px}
.prog-mat-t{display:flex;gap:9px;align-items:center;min-width:0;flex:1;
  flex-wrap:wrap}
.prog-mat-t b{font-family:var(--disp);overflow-wrap:anywhere}
.prog-mat-e{display:flex;gap:10px;align-items:center;flex:none}
.prog-mat-e .jg{width:110px}
.prog-mat-d{color:var(--gris);font-size:.86rem;margin:0 0 10px}
@media (max-width:560px){
  .prog-mat > summary{flex-wrap:wrap}
  .prog-mat-e{width:100%}
  .prog-mat-e .jg{flex:1;width:auto}
}

/* ── LE PROFIL ──────────────────────────────────────────────────────── */
.profil-apercu{display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  margin-bottom:22px;border-left:4px solid var(--violet)}
.profil-apercu > div{flex:1;min-width:190px}
.profil-apercu b{font-family:var(--disp);font-size:1.15rem;margin-right:8px;
  overflow-wrap:anywhere}
.profil-apercu .carte-d{margin-top:6px;font-size:.86rem}
.profil-apercu .av-img{width:64px;height:64px}

/* ── LES RÉGLAGES ───────────────────────────────────────────────────── */
.reg-abo{display:flex;gap:14px;align-items:center;flex-wrap:wrap;
  border-left:4px solid var(--action);margin-bottom:22px}
.reg-abo > div{flex:1;min-width:200px}
.reg-bloc{margin-bottom:22px}
.reg-bloc .carte-t{font-size:1.1rem}

/* ── LES DONNÉES PERSONNELLES ───────────────────────────────────────── */
.don-compte{border-left:4px solid var(--info);margin-bottom:8px}
.don-compte ul{list-style:none;padding:0;margin:12px 0 0;display:grid;
  gap:7px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  font-size:.93rem;color:var(--encre-2)}
.don-compte b{font-variant-numeric:tabular-nums}
.don-cat{margin-bottom:14px}
.don-cat h3{display:flex;gap:10px;align-items:center;font-size:1.05rem;
  margin-bottom:12px}
.don-ic{width:36px;height:36px;flex:none;border-radius:10px;display:grid;
  place-items:center;background:var(--brume);color:var(--action-i)}
.don-cat dl{display:grid;gap:4px 14px;grid-template-columns:auto 1fr;margin:0}
.don-cat dt{font-weight:800;font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);padding-top:3px}
.don-cat dd{margin:0 0 8px;font-size:.94rem;color:var(--encre-2)}
@media (max-width:560px){
  .don-cat dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .don-cat dd{margin-bottom:12px}
}
.don-action{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.don-action > div{flex:1;min-width:250px}
.don-action .btn{white-space:nowrap}
.don-perd{border-left:4px solid var(--danger)}
.don-garde{border-left:4px solid var(--ok)}
.don-perd > b,.don-garde > b{display:flex;gap:8px;align-items:center;
  font-family:var(--disp);font-size:1rem;margin-bottom:12px}
.don-perd > b svg{color:var(--danger)}
.don-garde > b svg{color:var(--ok)}
.don-perd ul,.don-garde ul{margin:0;padding-left:20px;display:grid;gap:7px;
  font-size:.93rem;color:var(--encre-2)}
.don-note{color:var(--gris);font-size:.86rem;margin:14px 0 0}
.don-pli > summary{color:var(--danger-i)}

/* ── LE FORUM ───────────────────────────────────────────────────────── */
/* `fx.css` porte déjà `.disc`, `.msg-forum` et `.mention` : le squelette
   d'une ligne de discussion et d'un message. Ce qui suit est le détail
   propre aux pages de la communauté — les cartes de catégorie, la barre
   d'outils d'un message, la grille des images jointes et la file de
   modération.

   CONTRAINTE PREMIÈRE : 390 px. Le formulaire de réponse et le dépôt
   d'image sont les deux gestes que l'on fait le plus souvent depuis un
   téléphone, souvent d'une seule main. Ils passent donc en pleine largeur,
   avec des cibles de 44 px, dès que l'écran se resserre. */

.cats .cat{display:flex;flex-direction:column;gap:6px;text-decoration:none;
  color:inherit;border-top:4px solid var(--teinte);min-height:132px}
.cats .cat:hover{box-shadow:var(--om-2);transform:translateY(-2px)}
.cats .cat .carte-t{font-size:1.02rem}
.cats .cat .cat-nb{margin-top:auto;font-size:.84rem;font-weight:700;
  color:var(--teinte-i)}

.disc{align-items:flex-start}
.disc:first-child{border-top-left-radius:var(--r);
  border-top-right-radius:var(--r)}
.disc:last-child{border-bottom:0}
.disc-epingle{background:var(--attention-f)}
.disc-epingle:hover{background:var(--attention-f)}
.disc-txt{flex:1;min-width:0}
.disc-t{display:block;font-weight:700;line-height:1.4;
  font-family:var(--disp);font-size:1.02rem}
.disc-t .pilule{vertical-align:2px;margin-right:4px}
.disc-x{display:block;color:var(--gris);font-size:.9rem;margin-top:4px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}
.disc-nb{flex:none;width:86px;text-align:center;color:var(--gris);
  font-size:.78rem;display:flex;flex-direction:column;gap:1px}
.disc-nb b{font-family:var(--disp);font-size:1.3rem;color:var(--encre);
  font-variant-numeric:tabular-nums}
.disc-nb .vues{color:var(--gris-clair)}

.msg-forum{align-items:flex-start;scroll-margin-top:90px}
.msg-forum .msg-av{flex:none}
.msg-forum .msg-av img{width:44px;height:44px}
.msg-tete{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;flex-wrap:wrap;margin-bottom:8px}
.msg-tete .qui{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msg-tete .qui a{color:inherit;text-decoration:none}
.msg-tete .qui a:hover{text-decoration:underline}
.msg-tete .quand{color:var(--gris);font-size:.84rem;white-space:nowrap}
.msg-tete .modif{color:var(--gris-clair)}
.msg-solution{background:var(--ok-f);border-radius:var(--r);
  padding:18px;border-bottom:0;
  border:1px solid color-mix(in srgb,var(--ok) 34%,transparent)}
.msg-retire .retire{color:var(--gris);font-style:italic;display:flex;
  gap:8px;align-items:center;margin:0}
.msg-forum .texte{overflow-wrap:anywhere}
.msg-forum .repond-a{background:var(--brume);border-radius:var(--r-s);
  padding:8px 12px;font-size:.88rem;color:var(--encre-2);margin-bottom:10px;
  display:flex;gap:6px;align-items:baseline}
.msg-forum .repond-a a{color:var(--gris);text-decoration:none}
.msg-forum .repond-a a:hover{text-decoration:underline}

.pieces{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pieces img{max-height:280px;width:auto;max-width:100%;display:block}

.msg-outils{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-top:14px}
.msg-outils form{display:inline-flex;margin:0}
.msg-outils .btn .nb{font-variant-numeric:tabular-nums;
  background:var(--brume-2);border-radius:var(--r-p);padding:0 7px;
  font-size:.82rem}
.msg-outils .btn.actif{border-color:var(--ok);color:var(--ok-i);
  background:var(--ok-f)}
.msg-outils details.pli{border:0;background:none}
.msg-outils details.pli > summary{padding:9px 15px;min-height:38px;
  border:1.5px solid transparent;border-radius:var(--r-p);font-size:.9rem;
  color:var(--encre-2);display:inline-flex;align-items:center;gap:8px}
.msg-outils details.pli > summary:hover{background:var(--brume)}
.msg-outils details.pli > summary::after{display:none}
.msg-outils details.pli > div{padding:16px 0 0;flex-basis:100%}
.msg-outils details.pli[open]{flex-basis:100%}

.repondre{margin-top:34px;background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-l);padding:22px}
.repondre textarea{min-height:150px}
.depot input[type=file]{font-size:.92rem;padding:12px;border:1.5px dashed
  var(--bord-fort);border-radius:var(--r-s);background:var(--brume);
  width:100%;min-height:52px}
.depot input[type=file]::file-selector-button{margin-right:12px;
  border:1px solid var(--bord-fort);background:var(--papier);
  border-radius:var(--r-p);padding:8px 14px;font:inherit;font-weight:700;
  color:var(--encre);cursor:pointer;min-height:36px}

details.pli-aide{border:0;background:none;margin-bottom:0}
details.pli-aide > summary{padding:10px 0;font-size:.9rem;color:var(--gris)}
details.pli-aide > div{padding:0 0 10px}
details.pli-aide code{background:var(--brume);padding:2px 6px;
  border-radius:var(--r-xs);font-size:.86rem}

/* ── la file de modération ──────────────────────────────────────────── */
.sig{margin-bottom:16px}
.sig-detail{background:var(--brume);border-radius:var(--r-s);padding:10px 14px;
  font-size:.92rem;color:var(--encre-2);margin-bottom:12px}
.sig-contenu{border-left:4px solid var(--bord-fort);padding-left:14px;
  margin-bottom:14px}
.sig-ou{font-size:.9rem;margin-bottom:8px}
.sig-extrait{margin:0;color:var(--encre-2);font-size:.94rem;
  white-space:pre-wrap;overflow-wrap:anywhere}
.sig-img{max-height:220px;width:auto;border-radius:var(--r-s);
  border:1px solid var(--bord)}
.sig-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;
  border-top:1px solid var(--bord);padding-top:14px}
.sig-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0}
.sig-form input[type=text]{min-width:190px;flex:1;min-height:38px;
  padding:8px 12px;font-size:.9rem}

@media (max-width:560px){
  .disc{padding:14px 12px;gap:10px}
  .disc-nb{width:auto;flex-direction:row;gap:8px;align-items:baseline;
    order:3;flex-basis:100%;text-align:left;padding-left:54px}
  .disc-nb b{font-size:1rem}
  .msg-forum{gap:10px}
  .msg-forum .msg-av img{width:36px;height:36px}
  .msg-solution{padding:14px}
  /* Répondre depuis un téléphone : les boutons prennent la largeur et
     gardent 44 px de haut, pour qu'on les touche sans viser. */
  .repondre{padding:16px 14px;border-radius:var(--r)}
  .repondre textarea{min-height:170px;font-size:16px}
  .repondre .btn-1{width:100%;min-height:50px}
  .msg-outils{gap:6px}
  .msg-outils .btn,.msg-outils details.pli > summary{min-height:44px}
  .depot input[type=file]{min-height:58px}
  .sig-form,.sig-form input[type=text]{width:100%;min-width:0}
  .sig-actions .btn{width:100%}
}

/* ═══════════════════════════════════════════════════════════════════════
   L'ABONNEMENT, LES TARIFS, L'AIDE ET LES PAGES LÉGALES
   ═══════════════════════════════════════════════════════════════════════

   Ce bloc est ajouté à la suite ; il ne modifie rien de ce qui précède.
   Il ne définit que ce que `fx.css` n'a pas : la carte d'état de
   l'abonnement, le tableau de comparaison des tarifs, le sommaire d'une
   page légale et la mention « à compléter ».

   AUCUNE COULEUR N'EST ÉCRITE EN DUR. Tout passe par les variables, donc
   le thème sombre suit sans une ligne de plus. Le texte posé sur un fond
   teinté prend toujours la variante `-i`.

   CONTRAINTE PREMIÈRE : 390 px. Les deux endroits qui cassent à cette
   largeur sont la rangée de boutons de la page abonnement et le tableau
   gratuit/abonné ; le premier passe en colonne, le second garde son
   `.tableau` qui défile horizontalement, et lui seul.
   ───────────────────────────────────────────────────────────────────── */

/* ── LA CARTE D'ÉTAT DE L'ABONNEMENT ────────────────────────────────── */
.abo-etat{border-left:4px solid var(--teinte,var(--action));
  --teinte:var(--action);margin-bottom:20px}
.abo-actif{--teinte:var(--ok)}
.abo-resilie{--teinte:var(--attention)}
.abo-impaye{--teinte:var(--danger)}
.abo-expire{--teinte:var(--gris-clair)}
.abo-aucun{--teinte:var(--action)}
.abo-etat-tete{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-bottom:12px}
.abo-phrase{margin:0;color:var(--encre-2);max-width:64ch}

.abo-faits{display:grid;gap:14px;margin:18px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:1px solid var(--bord);padding-top:16px}
.abo-faits dt{font-weight:800;font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:4px}
.abo-faits dd{margin:0;font-family:var(--disp);font-weight:700;
  font-size:1.05rem;color:var(--encre)}
.abo-faits dd span{font-family:var(--corps);font-weight:600;
  font-size:.85rem;color:var(--gris)}
.abo-vide{color:var(--gris);font-weight:600;font-family:var(--corps);
  font-size:.95rem}

.abo-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:20px;border-top:1px solid var(--bord);padding-top:18px}
.abo-actions form{margin:0}
.abo-resilier{margin-left:auto;color:var(--gris)}
.abo-resilier:hover{color:var(--danger-i)}

/* L'encadré que seul l'administrateur voit : ce qui manque pour ouvrir
   le paiement. Des NOMS de variables, jamais de valeurs. */
.abo-admin{margin-bottom:20px}
.abo-manque{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px}
.abo-manque li{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  font-size:.92rem}
.abo-manque code{font-family:var(--mono);font-size:.85rem;
  background:var(--brume);padding:3px 7px;border-radius:var(--r-xs)}
.abo-manque-d{flex-basis:100%;color:var(--gris);font-size:.86rem}

.abo-garde{border-left:4px solid var(--ok);margin-bottom:20px}
.abo-garde > b{display:flex;gap:8px;align-items:center;
  font-family:var(--disp);font-size:1rem;margin-bottom:12px}
.abo-garde > b svg{color:var(--ok)}
.abo-garde ul{margin:0;padding-left:20px;display:grid;gap:7px;
  font-size:.93rem;color:var(--encre-2)}

/* ── L'ÉCRAN DE RÉSILIATION ─────────────────────────────────────────── */
.abo-resume{margin:20px 0}
.abo-suite{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.abo-suite li{display:grid;gap:4px;
  grid-template-columns:minmax(140px,190px) 1fr;
  padding-left:16px;border-left:3px solid var(--bord-fort)}
.abo-suite .q{font-family:var(--disp);font-weight:800;font-size:.9rem;
  color:var(--action-i)}
.abo-suite span:last-child{color:var(--encre-2);font-size:.95rem}
.abo-form{margin-bottom:20px;border-left:4px solid var(--danger)}
.abo-avant{background:var(--brume);border-style:dashed}
.abo-avant > b{display:block;font-family:var(--disp);margin-bottom:10px}
.abo-avant ul{margin:0;padding-left:20px;display:grid;gap:8px;
  font-size:.93rem;color:var(--encre-2)}
@media (max-width:560px){
  .abo-suite li{grid-template-columns:minmax(0,1fr)}
  .abo-actions{flex-direction:column;align-items:stretch}
  .abo-actions .btn,.abo-actions form{width:100%}
  .abo-resilier{margin-left:0;min-height:44px}
}

/* ── LES TARIFS ─────────────────────────────────────────────────────── */
/* `.tarif` existe déjà dans ce fichier : on ne complète que ce qui manque
   — la mention honnête quand le paiement n'est pas encore ouvert, la
   ligne d'assurances et le tableau de comparaison. */
.tarif-attente{display:flex;gap:10px;align-items:flex-start;
  background:var(--info-f);color:var(--info-i);padding:13px 15px;
  border-radius:var(--r);font-size:.92rem;margin:0 0 16px}
.tarif-attente svg{flex:none;margin-top:2px}
.tarif-assur{display:flex;gap:10px 22px;flex-wrap:wrap;
  justify-content:center;margin-top:24px;color:var(--gris);
  font-size:.9rem;font-weight:600}
.tarif-assur span{display:inline-flex;align-items:center;gap:6px}
.tarif-assur svg{color:var(--ok)}

table.comp th[scope=row]{font-weight:700;color:var(--encre)}
table.comp td.oui{color:var(--ok-i);font-weight:700;
  background:color-mix(in srgb,var(--ok-f) 60%,transparent)}
.comp-n{display:block;color:var(--gris);font-size:.82rem;font-weight:600}

/* ── LA FOIRE AUX QUESTIONS ─────────────────────────────────────────── */
/* `.faq` (la grille de replis) est déjà défini plus haut. */
.faq-somm{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 8px}
.faq-somm a{padding:8px 15px;border-radius:var(--r-p);
  border:1.5px solid var(--bord-fort);text-decoration:none;
  font-weight:700;font-size:.88rem;color:var(--encre-2);min-height:38px;
  display:inline-flex;align-items:center}
.faq-somm a:hover{border-color:var(--action);color:var(--action-i);
  background:var(--action-f)}
.faq-titre{font-size:1.18rem;margin:34px 0 14px;padding-bottom:8px;
  border-bottom:2px solid var(--bord);scroll-margin-top:90px}
.faq-fin{margin-top:30px;text-align:center;border-top:4px solid var(--action)}
.faq-fin > b{display:block;font-family:var(--disp);font-size:1.08rem;
  margin-bottom:6px}
.faq-fin .btn{margin-top:14px}

/* ── À PROPOS ───────────────────────────────────────────────────────── */
.apropos-chapo{font-size:1.06rem;color:var(--encre-2);max-width:66ch;
  margin-top:10px}
.apropos-ctrl{display:flex;flex-direction:column;gap:8px}
.apropos-ctrl .ic{width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;background:var(--action-f);color:var(--action-i)}
.apropos-ctrl h3{font-size:1rem;margin:0}
.apropos-ctrl p{margin:0;color:var(--gris);font-size:.93rem}
.apropos-non{border-left:4px solid var(--attention);margin-top:16px}
.apropos-non ul{margin:0;padding-left:20px;display:grid;gap:11px;
  color:var(--encre-2);font-size:.95rem}
.apropos-editeur{margin-top:34px;background:var(--brume);border-style:dashed}
.apropos-editeur > b{display:flex;gap:8px;align-items:center;
  font-family:var(--disp);margin-bottom:10px}
.apropos-fin{margin-top:22px;text-align:center;
  border-top:4px solid var(--action)}
.apropos-fin > b{display:block;font-family:var(--disp);font-size:1.08rem;
  margin-bottom:6px}
.apropos-fin .rang{justify-content:center;margin-top:14px}

/* ── LE CONTACT ─────────────────────────────────────────────────────── */
.contact-voie{display:flex;flex-direction:column;gap:8px}
.contact-voie .ic{width:42px;height:42px;border-radius:12px;display:grid;
  place-items:center;background:var(--brume);color:var(--action-i)}
.contact-voie h3{font-size:1rem;margin:0}
.contact-voie p{margin:0;color:var(--gris);font-size:.93rem}
.contact-non{color:var(--danger-i)!important;background:var(--danger-f);
  padding:9px 12px;border-radius:var(--r-s);font-size:.87rem!important}
.contact-form{margin:14px 0 22px}
.contact-form textarea{min-height:170px}
.contact-autre{background:var(--brume)}
.contact-autre > b{display:flex;gap:8px;align-items:center;
  font-family:var(--disp);margin-bottom:10px}
.contact-autre ul{margin:0;padding-left:20px;display:grid;gap:9px;
  font-size:.93rem;color:var(--encre-2)}

/* ── LES PAGES LÉGALES ──────────────────────────────────────────────── */
/* Un document long se lit s'il est étroit, aéré, et si l'on peut y sauter
   d'un titre à l'autre. D'où le sommaire, les ancres décalées sous
   l'en-tête collante, et la numérotation visible des articles. */
.legal h2{font-size:1.16rem;margin:34px 0 12px;padding-bottom:8px;
  border-bottom:2px solid var(--bord);scroll-margin-top:90px}
.legal h3{font-size:1.02rem;margin:22px 0 8px}
.legal p{max-width:72ch}
.legal ul,.legal ol{max-width:72ch;color:var(--encre-2);
  display:grid;gap:8px;padding-left:22px}
.legal li{font-size:.97rem}

.legal-somm{background:var(--brume);border-radius:var(--r);
  padding:16px 18px;margin:22px 0 8px}
.legal-somm b{display:block;font-family:var(--disp);font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--gris);
  margin-bottom:10px}
.legal-somm ol{margin:0;padding-left:20px;display:grid;gap:6px;
  font-size:.93rem}
.legal-somm a{color:var(--encre-2);text-decoration:none;font-weight:600}
.legal-somm a:hover{color:var(--action-i);text-decoration:underline}

.legal-fiche{display:grid;gap:10px 18px;margin:14px 0 18px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.legal-fiche > div{background:var(--brume);border-radius:var(--r-s);
  padding:11px 14px}
.legal-fiche dt{font-weight:800;font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gris);margin-bottom:3px}
.legal-fiche dd{margin:0;font-size:.97rem;color:var(--encre);
  overflow-wrap:anywhere}

/* LA MENTION QUI REMPLACE UNE VALEUR ABSENTE. Elle est visible, elle a
   l'air de ce qu'elle est — un trou —, et elle ne ressemble en rien à une
   donnée renseignée : c'est exactement ce qu'on veut. */
.a-completer{display:inline-block;font-style:italic;font-weight:700;
  font-size:.88rem;color:var(--attention-i);background:var(--attention-f);
  border:1px dashed color-mix(in srgb,var(--attention) 55%,transparent);
  border-radius:var(--r-p);padding:2px 10px}

.legal-essentiel{border-left:4px solid var(--action);margin:20px 0}
.legal-essentiel > b{display:flex;gap:8px;align-items:center;
  font-family:var(--disp);font-size:1rem;margin-bottom:12px}
.legal-essentiel ul{margin:0;padding-left:20px;display:grid;gap:8px;
  font-size:.95rem;color:var(--encre-2)}
.legal-clef{background:var(--action-f);border-color:
  color-mix(in srgb,var(--action) 30%,transparent);margin:16px 0}
.legal-clef p{color:var(--action-i);max-width:70ch}
.legal-clef p:last-child{margin-bottom:0}
.legal-non{border-left:4px solid var(--ok);margin:16px 0}
.legal-non ul{margin:0;padding-left:20px;display:grid;gap:9px;
  font-size:.95rem;color:var(--encre-2)}
.legal-maj{margin-top:32px;padding-top:16px;border-top:1px solid var(--bord);
  color:var(--gris);font-size:.9rem}
.ck-note{display:block;color:var(--gris);font-size:.84rem;margin-top:4px}

@media (max-width:520px){
  .legal-fiche{grid-template-columns:minmax(0,1fr)}
  .faq-somm a{min-height:44px}
  .legal h2{font-size:1.08rem}
}

/* Le prix rappelé sur la page d'abonnement, pour qui n'en a pas encore. */
.abo-prix-dit{margin:0 0 16px;padding:12px 14px;border-radius:var(--r-s);
  background:var(--action-f);color:var(--action-i);font-size:.95rem}


/* ── LE BANDEAU « CE QUI ARRIVE » ──────────────────────────────────── */
.annonce{display:flex;gap:14px;align-items:flex-start;margin:20px 0;
  padding:18px 20px;border-radius:var(--r);background:var(--violet-f);
  color:var(--violet-i);border:1px solid var(--lilas)}
.annonce-i{line-height:0;flex:none;margin-top:2px}
.annonce b{font-family:var(--disp);font-size:1.06rem;display:block;
  margin-bottom:4px}
.annonce p{margin:0 0 8px;line-height:1.55;color:var(--encre-2)}
.annonce-q{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;
  font-weight:700;background:var(--papier);border-radius:var(--r-p);
  padding:4px 12px}

/* ── LE REPLI : UNE LISTE DÉROULANTE RANGÉE ─────────────────────────── */
/* Cent dix PDF en une seule grille ne se parcourent pas. Un repli par
   matière, avec sa teinte et son compte, et l'on retrouve ce qu'on
   cherche. Le premier est ouvert : on voit ce qu'il y a dedans sans avoir
   à deviner qu'il faut cliquer. C'est un « details » natif — donc il
   fonctionne au clavier et sans script. */
.repli{border:1px solid var(--bord);border-radius:var(--r);
  background:var(--papier);margin-bottom:12px;overflow:hidden}
.repli[open]{border-color:var(--teinte)}
.repli > summary{display:flex;align-items:center;gap:12px;padding:14px 18px;
  cursor:pointer;list-style:none;background:var(--teinte-f);transition:var(--t)}
.repli > summary::-webkit-details-marker{display:none}
.repli > summary::marker{content:""}
.repli > summary:hover{filter:brightness(.97)}
.repli-t{font-family:var(--disp);font-weight:700;font-size:1.04rem;
  color:var(--teinte-i);flex:1;min-width:0}
.repli-n{font-size:.82rem;font-weight:700;color:var(--teinte-i);
  background:var(--papier);border-radius:var(--r-p);padding:3px 11px;
  flex:none}
.repli .chev{color:var(--teinte-i);display:flex;flex:none;
  transition:transform var(--t)}
.repli[open] > summary .chev{transform:rotate(180deg)}
.repli-corps{padding:16px 18px 20px}
.repli-corps > .grille{--min:240px}

/* ── LE BANDEAU PASTEL D'UNE MATIÈRE ────────────────────────────────── */
/* La teinte d'une matière ne vivait que dans une pastille de douze pixels.
   Elle habille maintenant le haut de sa page : on sait de quelle matière
   on parle avant d'avoir lu le titre. */
.mat-tete{background:var(--teinte-f);border-radius:var(--r-l);
  padding:24px 26px;margin-bottom:24px;border:1px solid var(--bord)}
.mat-tete h1{margin:10px 0 10px}
.mat-tete p{max-width:66ch}

/* UNE PASTILLE SEULE DANS UNE CARTE EN COLONNE S'ÉTIRAIT SUR TOUTE LA
   LARGEUR : « Sujet A » devenait une bannière rose de trois cents pixels.
   Elle reprend sa taille, celle de son texte. Le sélecteur est un enfant
   direct, pour ne pas toucher aux pastilles rangées dans une ligne. */
.carte > .pilule,
.sj > .pilule{align-self:flex-start}

/* ── LE SUJET, PUIS SON CORRIGÉ ─────────────────────────────────────── */
/* LES DEUX BOUTONS SE SUIVENT, ILS NE SE PARTAGENT PAS UNE LIGNE. Côte à
   côte, « Le corrigé » passait pour un lien de service à côté d'un vrai
   bouton ; l'un sous l'autre, ils ont le même poids et le même ordre que
   le travail : on compose, puis on corrige. */
.deux-boutons{display:grid;gap:8px;margin-top:auto}
.deux-boutons .btn{width:100%;justify-content:center}

/* ── LE COMPTE À REBOURS DES ÉPREUVES ──────────────────────────────────
   Une ligne sous les pastilles du tableau de bord. Elle ne s'affiche que
   si la date est renseignée : voir `app/examens.py`. */
.bord-examen{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;
  font-size:.9rem;line-height:1.35}
.bord-examen svg{flex:none;color:var(--indigo);margin-top:2px}
.bord-examen b{color:var(--encre)}
.bord-examen-t span{display:block;color:var(--gris);font-size:.82rem;
  margin-top:1px}

/* Les tableaux écrits dans les énoncés et les corrigés du manuel. */
.tab-md{overflow-x:auto;margin:12px 0;-webkit-overflow-scrolling:touch}
.tab-md table{border-collapse:collapse;width:100%;font-size:.93rem;background:#fff}
.tab-md th,.tab-md td{border:1px solid var(--bord);padding:8px 10px;text-align:left;vertical-align:top}
.tab-md th{background:var(--brume);font-weight:700;color:var(--encre)}
.tab-md td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}