/* ═══════════════════════════════════════════════════════════════════════
   FUTURBTS — LE SYSTÈME VISUEL
   ═══════════════════════════════════════════════════════════════════════

   L'INTENTION, EN UNE PHRASE : le sérieux d'un éditeur de manuels avec
   l'énergie d'une application que des étudiants de vingt ans ouvrent tous
   les jours. Le fond reste blanc ; la couleur ne décore pas, elle oriente.

   CE QUE LA COULEUR FAIT ICI
     · elle IDENTIFIE  — chaque matière a sa teinte, toujours la même, si
       bien qu'on reconnaît l'UE 9 à sa pastille avant d'avoir lu son nom ;
     · elle HIÉRARCHISE — l'indigo est la couleur de l'action : un seul
       bouton indigo par écran, et c'est celui qu'il faut cliquer ;
     · elle ÉTAT — menthe pour ce qui est acquis, jaune pour ce qui attend,
       corail pour ce qui bloque. Ces trois-là ne servent qu'à ça et ne
       sont jamais employées comme décor ;
     · elle MOTIVE — la progression, les titres, les réussites ont droit à
       de la lumière, parce qu'un manuel de comptabilité en a besoin.

   CE QU'ELLE NE FAIT PAS : plus de trois teintes vives dans un même écran,
   jamais de dégradé en aplat de fond, jamais de couleur sur du texte long.

   LES DEUX THÈMES. Le clair est le thème de référence, pensé le premier.
   Le sombre existe parce qu'on révise le soir : il ne s'obtient pas en
   inversant, il est redéfini jeton par jeton, et il garde les mêmes
   rapports de contraste.
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1. LES JETONS ──────────────────────────────────────────────────── */
:root{
  /* surfaces — un fond blanc-gris doux, des cartes en blanc pur : c'est le
     décalage entre les deux qui fait exister les cartes, sans ombre lourde. */
  --papier:#FFFFFF;
  --fond:#F5F6F9;
  --brume:#EEF0F5;
  --brume-2:#E4E7EF;
  --bord:#E3E6ED;
  --bord-fort:#CDD2DE;
  /* les pastels : crème, rose, bleu, menthe — pour les grandes zones calmes */
  --pastel-1:#ECEFFE;
  --pastel-2:#E3F5EE;
  --pastel-3:#FFF4E2;
  --pastel-4:#FCEBF1;

  /* encres — un bleu nuit, pas un noir : plus doux à lire longtemps */
  --encre:#131A35;
  --encre-2:#434A66;
  --gris:#6C7390;
  --gris-clair:#9AA0B8;

  /* accents — chaque teinte : le trait, son fond clair, son encre lisible */
  --indigo:#4F46E5;      --indigo-f:#ECEBFD;   --indigo-i:#3730A3;
  --rose:#DE4A7E;        --rose-f:#FCE8F0;     --rose-i:#A3245A;
  --turquoise:#0A9DB3;   --turquoise-f:#E0F4F7; --turquoise-i:#076A79;
  --menthe:#13A574;      --menthe-f:#E1F5EC;   --menthe-i:#0A6B4B;
  --violet:#7C5CE6;      --violet-f:#EFEAFD;   --violet-i:#5434B5;
  --jaune:#E3A008;       --jaune-f:#FFF4D6;    --jaune-i:#865A00;
  --orange:#EF6F2A;      --orange-f:#FFEEE3;   --orange-i:#A3460F;
  --corail:#E5484D;      --corail-f:#FDE9EA;   --corail-i:#A42126;
  --lilas:#9B87F5;       --lilas-f:#F2EEFE;    --lilas-i:#5945AD;
  --bleu:#2F6BEA;        --bleu-f:#E7EFFE;     --bleu-i:#1C4DB3;
  --prune:#B23A8F;       --prune-f:#F9E8F4;    --prune-i:#781E5F;
  --sauge:#3E9A7A;       --sauge-f:#E3F2EC;    --sauge-i:#256850;
  --cobalt:#2F4BDE;      --cobalt-f:#E9EDFD;   --cobalt-i:#1F35A8;
  /* la marque : la mandarine du logo FuturBTS, employée avec parcimonie */
  --marque:#F26B2A;      --marque-f:#FFEDE3;   --marque-i:#A8430F;

  /* rôles */
  --action:var(--cobalt);
  --action-f:var(--cobalt-f);
  --action-i:var(--cobalt-i);
  --ok:var(--menthe);      --ok-f:var(--menthe-f);      --ok-i:var(--menthe-i);
  --attention:var(--jaune);--attention-f:var(--jaune-f);--attention-i:var(--jaune-i);
  --danger:var(--corail);  --danger-f:var(--corail-f);  --danger-i:var(--corail-i);
  --info:var(--turquoise); --info-f:var(--turquoise-f); --info-i:var(--turquoise-i);

  /* typographie */
  --disp:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --corps:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;

  /* formes */
  --r-xs:8px; --r-s:10px; --r:14px; --r-l:20px; --r-xl:28px; --r-p:999px;
  --om-1:0 1px 2px rgba(19,26,53,.04), 0 2px 8px -4px rgba(19,26,53,.08);
  --om-2:0 2px 4px rgba(19,26,53,.04), 0 14px 30px -16px rgba(19,26,53,.20);
  --om-3:0 4px 10px rgba(19,26,53,.05), 0 28px 56px -24px rgba(19,26,53,.28);
  --om-net:0 3px 0 var(--encre);

  /* mesures */
  --large:1180px;
  --entete-h:66px;
  --t:.18s cubic-bezier(.2,.7,.2,1);
  --ressort:cubic-bezier(.34,1.56,.64,1);
}

:root[data-theme="sombre"]{
  --papier:#151A2E;
  --fond:#0E1222;
  --brume:#1B2138;
  --brume-2:#232A45;
  --bord:#283050;
  --bord-fort:#37406A;

  --encre:#EEF1FA;
  --encre-2:#C3C9DE;
  --gris:#8F97B5;
  --gris-clair:#6C7393;

  --indigo:#8E87FF;      --indigo-f:#24234F;   --indigo-i:#C5C1FF;
  --rose:#FF7FAA;        --rose-f:#47172E;     --rose-i:#FFB4CD;
  --turquoise:#3CCFE3;   --turquoise-f:#0D3640; --turquoise-i:#8EE8F3;
  --menthe:#3FD1A0;      --menthe-f:#0E382B;   --menthe-i:#94EACB;
  --violet:#A993FF;      --violet-f:#2A2156;   --violet-i:#D3C7FF;
  --jaune:#F7C64F;       --jaune-f:#3F3113;    --jaune-i:#FBE1A2;
  --orange:#FF9B66;      --orange-f:#45281A;   --orange-i:#FFC9A8;
  --corail:#FF7A7E;      --corail-f:#471A1C;   --corail-i:#FFB4B6;
  --lilas:#B9A8FF;       --lilas-f:#29225A;    --lilas-i:#DAD0FF;
  --bleu:#6E9BFF;        --bleu-f:#162B5E;     --bleu-i:#AAC3FF;
  --prune:#E27AC6;       --prune-f:#43153C;    --prune-i:#F4B5E3;
  --sauge:#74C6A3;       --sauge-f:#183A2D;    --sauge-i:#A8DFC6;
  --cobalt:#7C93FF;      --cobalt-f:#1D2655;   --cobalt-i:#B9C6FF;
  --marque:#FF8A4F;      --marque-f:#45261A;   --marque-i:#FFC3A3;

  --pastel-1:#1D2655;
  --pastel-2:#0E382B;
  --pastel-3:#3F3113;
  --pastel-4:#47172E;

  --om-1:0 1px 2px rgba(0,0,0,.30), 0 2px 8px -4px rgba(0,0,0,.45);
  --om-2:0 2px 4px rgba(0,0,0,.30), 0 12px 28px -14px rgba(0,0,0,.60);
  --om-3:0 4px 8px rgba(0,0,0,.35), 0 24px 48px -20px rgba(0,0,0,.70);
  --om-net:0 3px 0 #050814;
  color-scheme:dark;
}

/* ── 2. LA BASE ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
     scroll-padding-top:calc(var(--entete-h) + 16px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;
    animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--fond);color:var(--encre);
  font-family:var(--corps);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:700;line-height:1.14;
  letter-spacing:-.018em;margin:0;text-wrap:balance;color:var(--encre)}
h1{font-size:clamp(1.9rem,1.35rem + 2.2vw,3rem);font-weight:800}
h2{font-size:clamp(1.45rem,1.15rem + 1.2vw,2.1rem)}
h3{font-size:clamp(1.15rem,1.02rem + .5vw,1.4rem)}
h4{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--action-i);text-decoration-color:color-mix(in srgb,var(--action) 35%,transparent);
  text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}
img,svg,video{max-width:100%;height:auto}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--bord);margin:2rem 0}
code,kbd,samp{font-family:var(--mono);font-size:.92em}
ul,ol{padding-left:1.25em}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--action);outline-offset:2px;
  border-radius:4px}
::selection{background:var(--cobalt-f);color:var(--cobalt-i)}
.mono,.nb{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.evite{position:absolute;left:-999px;top:8px;z-index:200;background:var(--action);
  color:#fff;padding:10px 18px;border-radius:var(--r-s);font-weight:700}
.evite:focus{left:12px}

/* ── 3. LA GRILLE ───────────────────────────────────────────────────── */
.contenu{width:min(var(--large),100% - 40px);margin-inline:auto}
.contenu-etroit{width:min(760px,100% - 40px);margin-inline:auto}
.contenu-large{width:min(1420px,100% - 40px);margin-inline:auto}
@media (max-width:640px){
  .contenu,.contenu-etroit,.contenu-large{width:calc(100% - 28px)}
}
.section{padding-block:clamp(38px,6vw,76px)}
.section-serree{padding-block:clamp(24px,3.5vw,44px)}
.pile{display:flex;flex-direction:column;gap:var(--g,16px)}
.rang{display:flex;align-items:center;gap:var(--g,12px);flex-wrap:wrap}
.rang-entre{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
/* TOUTES LES COLONNES SONT « minmax(0,1fr) », JAMAIS « 1fr ».
   La différence n'a l'air de rien et se voit tout de suite : une colonne
   « 1fr » refuse de descendre sous la largeur de ce qu'elle contient. Un
   tableau un peu large, un titre sans espace, et c'est la grille entière
   qui s'élargit — donc la page, donc l'en-tête, et le téléphone se met à
   défiler de gauche à droite. « minmax(0,1fr) » autorise la colonne à
   être plus étroite que son contenu ; celui-ci revient à la ligne, ou
   défile dans son propre `.tableau`. */
.grille{display:grid;gap:var(--g,20px);
  grid-template-columns:repeat(auto-fill,minmax(min(var(--min,270px),100%),1fr))}
.grille-2{display:grid;gap:var(--g,20px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grille-3{display:grid;gap:var(--g,20px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.grille-2,.grille-3{
  grid-template-columns:minmax(0,1fr)}}
.centre{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.sep{height:1px;background:var(--bord);margin-block:24px}

/* ── 4. L'EN-TÊTE ───────────────────────────────────────────────────── */
.entete{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--papier) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(14px);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--bord)}
.entete-in{height:var(--entete-h);display:flex;align-items:center;gap:18px}
.marque{display:flex;align-items:center;gap:10px;font-family:var(--disp);
  font-weight:800;font-size:1.22rem;letter-spacing:-.03em;color:var(--encre);
  text-decoration:none;flex:none}
.marque svg{width:34px;height:34px;flex:none}
.marque em{font-style:normal;color:var(--action)}
.nav{display:flex;align-items:center;gap:2px;margin-left:8px}
.nav a{padding:9px 13px;border-radius:var(--r-s);font-weight:700;font-size:.95rem;
  color:var(--encre-2);text-decoration:none;transition:var(--t);white-space:nowrap}
.nav a:hover{background:var(--brume);color:var(--encre)}
.nav a[aria-current]{background:var(--indigo-f);color:var(--indigo-i)}
.entete-fin{margin-left:auto;display:flex;align-items:center;gap:10px;
  min-width:0}
.burger{display:none;width:42px;height:42px;border:1px solid var(--bord);
  background:var(--papier);border-radius:var(--r-s);align-items:center;
  justify-content:center;cursor:pointer;color:var(--encre)}
/* LE SEUIL DU MENU. Sept entrées de menu, une marque, un champ de
   recherche et deux boutons ne tiennent pas côte à côte en dessous de
   1100 px : les boutons de droite passaient derrière le bord de l'écran.
   En dessous de ce seuil, c'est le menu déroulant qui prend le relais —
   il porte les mêmes entrées, et sa propre recherche. */
@media (max-width:1159px){
  .nav{display:none}
  .burger{display:flex}
  .entete-fin .btn-txt{display:none}
}
/* L'ORDRE DANS LEQUEL LES CHOSES CÈDENT QUAND LA PLACE MANQUE.
   Le menu et les boutons ne doivent JAMAIS être rognés : un mot de menu
   coupé en deux — « Communa » — se voit tout de suite et fait négligé.
   C'est donc le champ de recherche qui rétrécit en premier, puis qui
   disparaît ; le reste garde sa taille. */
.nav{flex:none}
.entete-fin{flex:none}
.marque{flex:none}
/* SUR UN PETIT TÉLÉPHONE, L'EN-TÊTE DÉBORDAIT DE QUATRE PIXELS. C'est
   peu, et c'est très visible : toute la page se met à glisser
   latéralement, l'ombre du bandeau se décale, et l'on croit le site mal
   fini. La cause : les éléments de droite ne pouvaient pas rétrécir. On
   resserre donc les espaces, on autorise la marque à se réduire, et le
   bouton reste à quarante-deux pixels — la cible du pouce ne se négocie
   pas. */
/* Sur les plus petits téléphones encore en service — 360 px de large —
   la bascule de thème quitte l'en-tête : elle vit aussi dans les
   réglages, et un bouton de moins vaut mieux qu'une page qui déborde. */
@media (max-width:380px){
  .entete-in{gap:8px}
  #bascule-theme{display:none}
  .marque{font-size:1rem}
}
@media (max-width:430px){
  .entete-in{gap:10px}
  .marque{min-width:0;font-size:1.1rem}
  .marque span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .marque svg{width:30px;height:30px}
  .entete-fin{gap:6px;min-width:0}
}
.menu-mobile{display:none;border-bottom:1px solid var(--bord);
  background:var(--papier);padding:10px 0 16px}
.menu-mobile.ouvert{display:block}
.menu-mobile a{display:block;padding:12px 14px;border-radius:var(--r-s);
  font-weight:700;color:var(--encre);text-decoration:none}
.menu-mobile a:hover{background:var(--brume)}

/* ── 5. LES BOUTONS ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:700;font-size:1rem;line-height:1;
  padding:13px 22px;border-radius:var(--r-p);border:1px solid transparent;
  cursor:pointer;text-decoration:none;transition:var(--t);white-space:nowrap;
  min-height:46px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-1{background:var(--action);color:#fff;box-shadow:var(--om-2)}
.btn-1:hover{background:var(--action-i);color:#fff}
.btn-2{background:var(--papier);color:var(--encre);border-color:var(--bord-fort)}
.btn-2:hover{background:var(--brume);border-color:var(--gris-clair)}
.btn-3{background:transparent;color:var(--encre-2);padding-inline:14px}
.btn-3:hover{background:var(--brume);color:var(--encre)}
.btn-rose{background:var(--rose);color:#fff;box-shadow:var(--om-2)}
.btn-rose:hover{background:var(--rose-i);color:#fff}
.btn-ok{background:var(--ok);color:#fff}
.btn-danger{background:var(--danger-f);color:var(--danger-i);
  border-color:color-mix(in srgb,var(--danger) 35%,transparent)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-s{padding:9px 15px;font-size:.9rem;min-height:38px}
.btn-l{padding:16px 30px;font-size:1.1rem;min-height:56px}
.btn-bloc{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}
.btn svg{width:18px;height:18px;flex:none}

/* ── 6. LES CARTES ──────────────────────────────────────────────────── */
.carte{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:20px;box-shadow:var(--om-1);
  transition:var(--t);position:relative}
a.carte,.carte-clic{text-decoration:none;color:inherit;display:block}
a.carte:hover,.carte-clic:hover{box-shadow:var(--om-2);
  border-color:var(--bord-fort);transform:translateY(-2px)}
.carte-t{font-family:var(--disp);font-weight:700;font-size:1.08rem;
  line-height:1.25;margin:0 0 6px;color:var(--encre)}
.carte-d{color:var(--gris);font-size:.93rem;margin:0}
.carte-liseré{border-top:4px solid var(--teinte,var(--action));
  border-radius:var(--r)}
/* La carte de matière : la teinte se lit sur la pastille et sur le liseré,
   jamais sur le texte — un titre coloré se lit moins bien. */
.carte-mat{display:flex;flex-direction:column;gap:12px;min-height:150px;
  border-left:5px solid var(--teinte,var(--action))}
.carte-mat .code{font-family:var(--disp);font-weight:800;font-size:.8rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--teinte-i,var(--action-i));
  background:var(--teinte-f,var(--action-f));padding:5px 10px;
  border-radius:var(--r-p);align-self:flex-start}
.carte-mat .pied{margin-top:auto;display:flex;gap:14px;color:var(--gris);
  font-size:.86rem;font-weight:600}

/* ── 7. LES PILULES, BADGES ET ÉTIQUETTES ───────────────────────────── */
.pilule{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;
  border-radius:var(--r-p);font-size:.82rem;font-weight:700;
  font-family:var(--disp);letter-spacing:.01em;white-space:nowrap}
.pilule svg{width:14px;height:14px}
.p-ok{background:var(--ok-f);color:var(--ok-i)}
.p-attention{background:var(--attention-f);color:var(--attention-i)}
.p-danger{background:var(--danger-f);color:var(--danger-i)}
.p-info{background:var(--info-f);color:var(--info-i)}
.p-action{background:var(--action-f);color:var(--action-i)}
.p-rose{background:var(--rose-f);color:var(--rose-i)}
.p-violet{background:var(--violet-f);color:var(--violet-i)}
/* UNE PASTILLE GRISE NE DIT RIEN. Chacune porte désormais la couleur de
   ce qu'elle annonce : lilas pour ce qui demande un abonnement, et une
   teinte par genre de fiche, toujours la même, pour qu'on reconnaisse un
   sujet d'une méthode avant d'avoir lu l'étiquette. */
.p-neutre{background:var(--lilas-f);color:var(--lilas-i)}
.p-revision{background:var(--bleu-f);color:var(--bleu-i)}
.p-methode{background:var(--orange-f);color:var(--orange-i)}
.p-essentiel{background:var(--turquoise-f);color:var(--turquoise-i)}
.p-vocabulaire{background:var(--sauge-f);color:var(--sauge-i)}
.p-sujet{background:var(--prune-f);color:var(--prune-i)}
.p-rapport{background:var(--menthe-f);color:var(--menthe-i)}
.p-teinte{background:var(--teinte-f);color:var(--teinte-i)}
.badge-nb{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-p);
  background:var(--danger);color:#fff;font-size:.72rem;font-weight:800;
  font-family:var(--disp)}
.eyebrow{font-family:var(--disp);font-weight:800;font-size:.78rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gris);
  margin:0 0 10px}

/* ── 8. LA PROGRESSION ──────────────────────────────────────────────── */
/* Une barre, c'est le minimum. On y ajoute le compte réel — « 14 chapitres
   sur 20 » — parce qu'un pourcentage seul ne dit pas ce qu'il reste à
   faire, et c'est justement ce que l'étudiant veut savoir. */
.jauge{height:10px;border-radius:var(--r-p);background:var(--brume-2);
  overflow:hidden;position:relative}
.jauge i{display:block;height:100%;border-radius:var(--r-p);
  background:linear-gradient(90deg,var(--teinte,var(--action)),
             color-mix(in srgb,var(--teinte,var(--action)) 55%,var(--rose)));
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.jauge-s{height:6px}
.jauge-l{height:14px}
.prog-lig{display:flex;align-items:center;gap:12px}
.prog-lig .jauge{flex:1}
.prog-pct{font-family:var(--disp);font-weight:800;font-size:.95rem;
  min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.anneau{--p:0;--taille:104px;width:var(--taille);height:var(--taille);
  border-radius:50%;display:grid;place-items:center;flex:none;
  background:conic-gradient(var(--teinte,var(--action)) calc(var(--p)*1%),
             var(--brume-2) 0)}
.anneau::before{content:"";position:absolute;width:calc(var(--taille) - 18px);
  height:calc(var(--taille) - 18px);border-radius:50%;background:var(--papier)}
.anneau b{position:relative;font-family:var(--disp);font-weight:800;
  font-size:1.35rem;font-variant-numeric:tabular-nums}
.anneau{position:relative}

/* ── 9. LES FORMULAIRES ─────────────────────────────────────────────── */
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.champ > label{font-weight:700;font-size:.93rem;color:var(--encre-2)}
.champ .aide{font-size:.85rem;color:var(--gris)}
input[type=text],input[type=email],input[type=password],input[type=search],
input[type=url],input[type=number],input[type=date],select,textarea{
  font:inherit;font-size:1rem;color:var(--encre);background:var(--papier);
  border:1.5px solid var(--bord-fort);border-radius:var(--r-s);
  padding:12px 14px;width:100%;transition:var(--t);min-height:48px}
textarea{min-height:130px;resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--action);
  box-shadow:0 0 0 4px var(--action-f);outline:none}
input::placeholder,textarea::placeholder{color:var(--gris-clair)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--danger)}
.erreur-champ{color:var(--danger-i);font-size:.87rem;font-weight:700}
fieldset{border:1px solid var(--bord);border-radius:var(--r);padding:16px;
  margin:0 0 18px}
legend{font-family:var(--disp);font-weight:700;padding-inline:8px}
.case{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;
  line-height:1.5;cursor:pointer}
.case input{width:20px;height:20px;min-height:0;margin-top:2px;flex:none;
  accent-color:var(--action)}
.choix{display:flex;gap:10px;flex-wrap:wrap}
.choix label{border:1.5px solid var(--bord-fort);border-radius:var(--r-s);
  padding:11px 16px;cursor:pointer;font-weight:700;transition:var(--t);
  background:var(--papier)}
.choix input{position:absolute;opacity:0;width:0;height:0}
.choix input:checked + span,.choix label:has(input:checked){
  border-color:var(--action);background:var(--action-f);color:var(--action-i)}

/* ── 10. LES MESSAGES ───────────────────────────────────────────────── */
.msg{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);
  border:1px solid;font-size:.95rem;margin-bottom:18px;align-items:flex-start}
.msg svg{width:20px;height:20px;flex:none;margin-top:2px}
.msg p:last-child{margin-bottom:0}
.msg-ok{background:var(--ok-f);border-color:color-mix(in srgb,var(--ok) 32%,transparent);
  color:var(--ok-i)}
.msg-info{background:var(--info-f);border-color:color-mix(in srgb,var(--info) 32%,transparent);
  color:var(--info-i)}
.msg-attention{background:var(--attention-f);
  border-color:color-mix(in srgb,var(--attention) 40%,transparent);
  color:var(--attention-i)}
.msg-danger{background:var(--danger-f);
  border-color:color-mix(in srgb,var(--danger) 32%,transparent);color:var(--danger-i)}
.vide{text-align:center;padding:48px 20px;color:var(--gris)}
.vide svg{width:64px;height:64px;opacity:.7;margin-bottom:12px}

/* ── 11. LES ONGLETS ET FILTRES ─────────────────────────────────────── */
.onglets{display:flex;gap:4px;border-bottom:2px solid var(--bord);
  overflow-x:auto;scrollbar-width:none;margin-bottom:22px}
.onglets::-webkit-scrollbar{display:none}
.onglets a,.onglets button{padding:11px 16px;font-family:var(--disp);
  font-weight:700;color:var(--gris);text-decoration:none;white-space:nowrap;
  border:0;background:none;cursor:pointer;border-bottom:3px solid transparent;
  margin-bottom:-2px;transition:var(--t);font-size:.98rem}
.onglets a:hover,.onglets button:hover{color:var(--encre)}
.onglets [aria-selected="true"],.onglets [aria-current]{color:var(--action-i);
  border-bottom-color:var(--action)}
.filtres{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filtres a,.filtres button{padding:8px 15px;border-radius:var(--r-p);
  border:1.5px solid var(--bord);background:var(--papier);color:var(--encre-2);
  font-weight:700;font-size:.9rem;text-decoration:none;cursor:pointer;
  transition:var(--t)}
.filtres a:hover,.filtres button:hover{border-color:var(--action);
  background:var(--action-f);color:var(--action-i)}
/* Le filtre retenu portait l'encre, c'est-à-dire du presque-noir : sur une
   page crème, cela faisait une tache. Il prend la couleur de l'action. */
.filtres [aria-current],.filtres .actif{background:var(--action);color:#fff;
  border-color:var(--action)}

/* ── 12. LE FIL D'ARIANE ────────────────────────────────────────────── */
.fil{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.88rem;
  color:var(--gris);margin-bottom:14px;list-style:none;padding:0}
.fil a{color:var(--gris);text-decoration:none;font-weight:600}
.fil a:hover{color:var(--action-i);text-decoration:underline}
.fil li::after{content:"›";margin-left:6px;color:var(--gris-clair)}
.fil li:last-child::after{content:""}
.fil li:last-child{color:var(--encre-2);font-weight:700}

/* ── 13. LE PIED DE PAGE ────────────────────────────────────────────── */
.pied{background:var(--encre);color:#CFC9EE;margin-top:60px;
  padding-block:52px 28px}
:root[data-theme="sombre"] .pied{background:#0C0A1E}
.pied h4{color:#fff;font-size:.82rem;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:14px}
.pied a{color:#CFC9EE;text-decoration:none;font-size:.94rem;display:block;
  padding:4px 0}
.pied a:hover{color:#fff;text-decoration:underline}
.pied-bas{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;
  padding-top:20px;display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-size:.87rem;color:#9A93C4}
.pied .marque{color:#fff}
.reseaux{display:flex;gap:10px}
.reseaux a{width:40px;height:40px;border-radius:var(--r-s);
  background:rgba(255,255,255,.08);display:grid;place-items:center;padding:0}
.reseaux a:hover{background:var(--rose)}
.reseaux svg{width:20px;height:20px}

/* ── 14. LA BARRE MOBILE ────────────────────────────────────────────── */
/* Une grande partie des étudiants révise sur téléphone : la navigation
   principale doit y être à portée de pouce, pas cachée dans un menu. */
.barre-mob{display:none;position:fixed;bottom:0;left:0;right:0;z-index:70;
  background:color-mix(in srgb,var(--papier) 94%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--bord);
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.barre-mob nav{display:flex;justify-content:space-around}
.barre-mob a{flex:1;display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:6px 2px;color:var(--gris);text-decoration:none;
  font-size:.68rem;font-weight:700;font-family:var(--disp);
  border-radius:var(--r-xs);position:relative}
.barre-mob a svg{width:23px;height:23px}
.barre-mob a[aria-current]{color:var(--action)}
@media (max-width:860px){
  .barre-mob{display:block}
  body{padding-bottom:70px}
}

/* ── 15. LA RECHERCHE ───────────────────────────────────────────────── */
/* LE CHAMP DE RECHERCHE NE SE LAISSE PAS ÉCRASER. Sans largeur minimale
   il se réduisait, entre le menu et les boutons, au point que sa
   propre invite était coupée en plein mot. Il vaut mieux le faire
   disparaître franchement quand la place manque que le laisser
   rétrécir jusqu'au ridicule. */
.rech{position:relative;flex:0 1 300px;min-width:0;max-width:340px}
.rech input{padding-left:40px;min-height:42px;border-radius:var(--r-p);
  background:var(--brume);border-color:transparent;font-size:.95rem}
.rech input:focus{background:var(--papier)}
.rech svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--gris);pointer-events:none}
.rech-lien{display:none}
@media (max-width:1419px){.rech{display:none}}
/* Le bouton de recherche n'apparaît que dans l'intervalle où le champ a
   disparu et où le menu déroulant — qui porte le sien — n'existe pas
   encore. En dessous, c'est le menu qui prend le relais. */
@media (max-width:1419px) and (min-width:1160px){.rech-lien{display:inline-flex}}
.rech-res{position:absolute;top:calc(100% + 8px);left:0;right:0;
  background:var(--papier);border:1px solid var(--bord);border-radius:var(--r);
  box-shadow:var(--om-3);max-height:60vh;overflow:auto;z-index:80;display:none}
.rech-res.ouvert{display:block}
.rech-res a{display:block;padding:11px 14px;text-decoration:none;
  color:var(--encre);border-bottom:1px solid var(--bord)}
.rech-res a:last-child{border-bottom:0}
.rech-res a:hover,.rech-res a.sel{background:var(--action-f)}
.rech-res .t{font-weight:700;font-size:.95rem}
.rech-res .s{font-size:.82rem;color:var(--gris)}

/* ── 16. LE COURS ───────────────────────────────────────────────────── */
/* Le manuel a son propre rendu, vérifié par ses propres contrôles. On ne
   le recompose pas : on l'accueille dans un conteneur et on se contente
   d'y poser la largeur de lecture et les marges. */
.cours-hote{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-l);padding:clamp(18px,3vw,40px);box-shadow:var(--om-1);
  overflow-x:auto}
.cours-hote > *{max-width:100%}
/* Le manuel pose ses propres replis — « un indice », « voir le corrigé ».
   Ils étaient hauts de vingt-cinq pixels : on vise mal à cette taille sur
   un téléphone. On ne retouche pas le rendu du manuel ; on lui donne
   seulement une cible atteignable au pouce. */
.cours-hote summary{min-height:44px;display:flex;align-items:center;gap:8px}

/* SUR UN TÉLÉPHONE, LA CARTE PREND TOUTE LA LARGEUR.
   Mesuré sur un écran de 390 px : le texte du cours ne faisait que
   272 px de large. Les 118 px manquants partaient en marges — 14 de
   chaque côté pour la page, 18 de chaque côté pour la carte — et une
   ligne de trente caractères ne se lit pas, elle se déchiffre.
   La carte sort donc de la gouttière et colle aux bords ; il ne reste
   qu'un retrait de douze pixels, celui qu'il faut pour que le texte ne
   touche pas le verre.
   Le sélecteur est volontairement plus précis que « .cours-hote » : la
   feuille du manuel pose « body{margin:0} », que le site transforme en
   « .cours-hote{margin:0} », et elle est servie après celle-ci. */
@media (max-width:560px){
  .mise-page .cours-hote{margin-inline:-14px;border-left:0;border-right:0;
    border-radius:0;padding-left:12px;padding-right:12px;
    box-shadow:none}
}
.mise-page{display:grid;gap:28px;grid-template-columns:260px minmax(0,1fr);
  align-items:start}
/* UNE COLONNE « 1fr » N'EST PAS UNE COLONNE ÉTROITE. Par défaut elle ne
   descend pas sous la largeur de son contenu : un titre long dans le
   sommaire élargissait donc la grille entière, et la page débordait de
   soixante pixels à droite sur un téléphone. `minmax(0,1fr)` autorise la
   colonne à être plus étroite que ce qu'elle contient — et le contenu, à
   revenir à la ligne. */
@media (max-width:1023px){.mise-page{grid-template-columns:minmax(0,1fr)}}
.aside{position:sticky;top:calc(var(--entete-h) + 18px);max-height:calc(100vh - var(--entete-h) - 36px);
  overflow:auto}
@media (max-width:1023px){.aside{position:static;max-height:none}}
.sommaire{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:14px}
.sommaire a{display:block;padding:7px 10px;border-radius:var(--r-xs);
  font-size:.9rem;color:var(--encre-2);text-decoration:none;font-weight:600;
  overflow-wrap:anywhere}
.sommaire h2, .aside h2{overflow-wrap:anywhere}
.sommaire a:hover{background:var(--brume)}
.sommaire a[aria-current]{background:var(--action-f);color:var(--action-i)}
.sommaire .fait{color:var(--ok-i)}

/* ── 17. LE FORUM ───────────────────────────────────────────────────── */
.disc{display:flex;gap:14px;padding:16px;border-bottom:1px solid var(--bord);
  text-decoration:none;color:inherit;transition:var(--t)}
.disc:hover{background:var(--brume)}
.disc .av{width:44px;height:44px;border-radius:var(--r-p);flex:none;
  background:var(--brume-2);overflow:hidden}
.disc .meta{color:var(--gris);font-size:.85rem;display:flex;gap:12px;
  flex-wrap:wrap;margin-top:4px}
.msg-forum{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--bord)}
.msg-forum .corps{flex:1;min-width:0}
.msg-forum .corps p:last-child{margin-bottom:0}
.msg-forum blockquote{border-left:3px solid var(--bord-fort);margin:0 0 1em;
  padding:2px 0 2px 14px;color:var(--encre-2);font-style:italic}
.msg-forum pre{background:var(--brume);padding:12px 14px;border-radius:var(--r-s);
  overflow-x:auto;font-size:.9rem}
.msg-forum img{border-radius:var(--r-s);border:1px solid var(--bord);
  max-height:460px;width:auto}
.mention{background:var(--action-f);color:var(--action-i);padding:1px 6px;
  border-radius:var(--r-xs);font-weight:700;text-decoration:none}
.av-img{border-radius:var(--r-p);background:var(--brume-2);flex:none;
  object-fit:cover}

/* ── 18. LES TABLEAUX ───────────────────────────────────────────────── */
.tableau{width:100%;overflow-x:auto;border:1px solid var(--bord);
  border-radius:var(--r);background:var(--papier)}
.tableau table{width:100%;font-size:.94rem}
.tableau th,.tableau td{padding:11px 14px;text-align:left;
  border-bottom:1px solid var(--bord)}
.tableau th{background:var(--brume);font-family:var(--disp);font-weight:700;
  font-size:.86rem;letter-spacing:.02em;position:sticky;top:0}
.tableau tr:last-child td{border-bottom:0}
.tableau tbody tr:hover{background:var(--brume)}
.tableau .nb{text-align:right}

/* ── 19. LA MASCOTTE ────────────────────────────────────────────────── */
/* Pacégé n'est pas un décor : il parle quand il a quelque chose à dire —
   une réussite, un conseil, un encouragement — et il se tait le reste du
   temps. */
.pacege-dit{display:flex;gap:14px;align-items:flex-start;
  background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r-l);padding:16px 18px;box-shadow:var(--om-1);
  position:relative}
.pacege-dit svg{width:52px;height:52px;flex:none}
.pacege-dit .bulle{flex:1}
.pacege-dit .bulle p{margin:0;font-size:.97rem}
.pacege-dit .bulle b{font-family:var(--disp)}
.pacege-fete{border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:var(--ok-f)}

/* ── 20. DIVERS ─────────────────────────────────────────────────────── */
.epingle{position:relative}
.epingle::before{content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--attention);pointer-events:none}
.compteur{font-family:var(--disp);font-weight:800;
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.4rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--encre)}
.compteur + span{color:var(--gris);font-size:.88rem;font-weight:700}
.kpi{background:var(--papier);border:1px solid var(--bord);
  border-radius:var(--r);padding:18px;display:flex;flex-direction:column;
  gap:4px;border-left:4px solid var(--teinte,var(--action))}
.chargement{display:inline-block;width:18px;height:18px;border-radius:50%;
  border:2.5px solid var(--brume-2);border-top-color:var(--action);
  animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.apparait{animation:apparait .4s ease both}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
details.pli{border:1px solid var(--bord);border-radius:var(--r);
  background:var(--papier);margin-bottom:12px;overflow:hidden}
/* QUARANTE-QUATRE PIXELS, C'EST LA TAILLE D'UN POUCE. En dessous, on
   vise et on rate. La règle vaut pour tous les replis, y compris ceux
   qu'une page pose elle-même avec un rembourrage plus discret. */
details.pli > summary{min-height:44px;display:flex;align-items:center;
  padding:15px 18px;cursor:pointer;font-weight:700;
  font-family:var(--disp);list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px}
details.pli > summary::-webkit-details-marker{display:none}
details.pli > summary::after{content:"+";font-size:1.3rem;color:var(--gris);
  font-weight:400;flex:none}
details.pli[open] > summary::after{content:"−"}
details.pli > div{padding:0 18px 18px}
.ombre-net{box-shadow:var(--om-net)}
@media print{
  .entete,.pied,.barre-mob,.no-print{display:none!important}
  body{background:#fff}
  .cours-hote{border:0;box-shadow:none;padding:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   LE MODE LECTURE — le chapitre, et rien d'autre.

   Un chapitre du manuel fait cent cinquante mille signes. On ne le lit pas
   entre une barre de navigation, un sommaire, un pied de page et un
   bandeau de cookies : on le lit comme un livre. Ce mode retire tout ce
   qui n'est pas le texte, élargit la colonne juste ce qu'il faut — on
   reste autour de soixante-dix signes par ligne, au-delà l'œil se perd en
   revenant à la ligne — et agrandit l'interligne.

   IL NE TOUCHE À RIEN D'AUTRE. C'est un attribut posé sur la racine ;
   l'enlever rend la page telle qu'elle était, sans rechargement. Et il
   n'existe que si le script tourne : sans lui, le bouton reste caché.
   ═════════════════════════════════════════════════════════════════════ */
:root[data-lecture] .entete,
:root[data-lecture] .pied,
:root[data-lecture] .aside,
:root[data-lecture] .fil,
:root[data-lecture] .ch-actions,
:root[data-lecture] .ch-carrefour,
:root[data-lecture] .ch-suite,
:root[data-lecture] .ch-meta,
:root[data-lecture] .barre-basse,
:root[data-lecture] .bandeau-cookies,
:root[data-lecture] #signaler{ display:none !important }

/* On garde l'ivoire du site : c'est un mode lecture, pas une feuille de
   papier sous néon. Le blanc pur sur trente mille signes fatigue. */
:root[data-lecture] body{ background:var(--fond) }
:root[data-lecture] .mise-page{ display:block }
:root[data-lecture] .section{ padding-block:0 }
:root[data-lecture] .contenu,
:root[data-lecture] .contenu-etroit{ max-width:82ch; padding-top:86px }
:root[data-lecture] .cours-hote{ font-size:1.09rem; line-height:1.85 }
/* LA COLONNE DE LECTURE ÉTAIT PLUS ÉTROITE QUE LA COLONNE ORDINAIRE.
   Le « 76ch » ci-dessus s'appliquait au conteneur, pas au texte : la
   carte du cours lui reprenait quarante pixels de chaque côté, et le
   mode lecture rendait 618 px là où le mode normal en donnait 714.
   On entrait en lecture et on lisait plus serré qu'avant.
   En lecture, la carte n'a plus lieu d'être — ni bord, ni ombre, ni
   retrait : la page EST la carte. */
:root[data-lecture] .cours-hote{ padding-left:0; padding-right:0;
  border:0; box-shadow:none; background:none }
:root[data-lecture] .cours-hote h2{ margin-top:2.4em }
/* LE TITRE DU CHAPITRE PASSE DANS LA BARRE, IL NE RESTE PAS DANS LA PAGE.
   En entrant en lecture, le script fait défiler jusqu'au début du cours :
   le grand titre se retrouvait à moitié derrière la barre translucide, et
   l'on voyait un fantôme de lettres grises en haut de l'écran. La barre
   porte déjà ce titre — le garder deux fois n'apporte rien et salit le
   haut de la page. */
:root[data-lecture] .ch-tete{ display:none }
/* Et le cours commence SOUS la barre, pas dessous au sens propre :
   `scroll-margin-top` dit au navigateur de s'arrêter 96 px plus haut
   quand il fait défiler jusqu'à lui. Sans cela, la première ligne du
   chapitre se cache derrière la barre à chaque entrée en lecture. */
:root[data-lecture] .cours-hote{ scroll-margin-top:96px }

/* La barre de sortie : discrète, toujours atteignable, jamais dans le
   texte. Elle rappelle la touche d'échappement, parce qu'on entre dans ce
   mode plus facilement qu'on n'en sort. */
.lecture-barre{ position:fixed; top:0; left:0; right:0; z-index:60;
  display:none; align-items:center; justify-content:space-between; gap:14px;
  padding:10px 18px; background:color-mix(in srgb, var(--papier) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--bord) }
:root[data-lecture] .lecture-barre{ display:flex }
.lecture-barre .lb-t{ font-family:var(--disp); font-weight:700;
  font-size:.95rem; color:var(--encre-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap }
.lecture-barre kbd{ font-family:var(--mono); font-size:.76rem;
  background:var(--brume); border:1px solid var(--bord-fort);
  border-bottom-width:2px; border-radius:5px; padding:1px 6px;
  color:var(--gris) }
/* La jauge d'avancement dans le chapitre : une ligne de plus, et elle
   dit exactement ce que la barre de défilement disait mal. */
.lecture-jauge{ position:absolute; left:0; bottom:-1px; height:2px;
  background:var(--action); width:0; transition:width .1s linear }
@media (max-width:560px){
  .lecture-barre .lb-aide{ display:none }
  :root[data-lecture] .contenu,
  :root[data-lecture] .contenu-etroit{ padding-top:74px }
}
@media print{ .lecture-barre{ display:none !important } }

/* ── LE RAPPEL DU MODE PRIVÉ ────────────────────────────────────────── */
/* Visible du seul administrateur, et volontairement voyant : un site
   fermé ressemble à un site ouvert quand on a la clé. */
.porte-rappel{display:flex;align-items:center;gap:12px;
  flex-wrap:wrap;background:var(--attention-f);color:var(--attention-i);
  border-bottom:2px solid var(--attention);padding:10px 18px;
  font-size:.92rem;font-weight:600}
.porte-rappel svg{flex:none}
.porte-rappel a{margin-left:auto;background:var(--attention-i);color:#fff;
  padding:6px 14px;border-radius:var(--r-p);text-decoration:none;
  font-weight:700;white-space:nowrap}
.porte-rappel a:hover{filter:brightness(1.15)}
@media (max-width:560px){ .porte-rappel a{margin-left:0} }