/* =========================================================================
   theme-affinity.css — le theme du cours Affinity, pour tous les cours
   -------------------------------------------------------------------------
   GENERE a chaque passage de scripts/09-moderniser-cours.py depuis
   Isbi/Affinity/.../assets/style.css. Ne pas editer ici : corriger la
   feuille Affinity, ou la transformation dans le script.

   Trois transformations, et aucune autre :

     1. l @import Google Fonts est RETIRE -- chaque ouverture de cours
        envoyait l adresse IP de l etudiant a Google, hors d Europe ;
     2. Inter et Space Grotesk cedent la place a Aptos, comme le reste du
        site ;
     3. les violets et bleus d Affinity ECRITS EN DUR -- 43 occurrences --
        deviennent var(--violet) et var(--blue). Sans cela, chaque cours
        gardait des bordures et des lueurs violettes : Excel n etait pas
        vert, il etait Affinity. Les DEFINITIONS de variables ne sont
        jamais touchees : --violet: #7E4DD2 deviendrait circulaire ;
     4. (27/09/2026) l orange, le corail et le vert menthe ECRITS EN DUR
        deviennent var(--orange), var(--coral), var(--mint) : les roles
        que les chakras redefinissent ;
     5. (27/09/2026) les arrondis de 7 a 28 px deviennent
        var(--r-bloc, <valeur d origine>) : 6 px avec les chakras, la
        valeur d origine sans eux. Pilules et ronds ne bougent pas.
   ========================================================================= */

/* ============================================================
   Affinity — Cours interactif (eSBi)
   Theme « studio » : sombre par defaut, bascule clair.
   Palette reprise des trois espaces d'Affinity (Vecteur, Pixel, Mise en page).

   ATTENTION 1 : les noms de classes sont un CONTRAT avec assets/script.js,
   qui est identique dans les 14 modules. Ne pas renommer:.module .module-head .module-body .btn-done .ic .lbl .done-flag .caret
   .check input[data-chk] .progress-bar>span .progress-pct .progress-count
   .btn-reset .toc a .course-card[data-course] .cc-progress>span .cc-pct
   .btn-copy figure.shot img .lightbox .topbar .topbar-inner .brand .logo

   ATTENTION 2 : --violet, --blue, --mint, --coral et --orange sont des
   ROLES herites de la feuille Figma (accent, info, succes, alerte, avertis-
   sement), pas des noms de couleurs. Leurs VALEURS sont celles d'Affinity.
   Ne pas se fier au nom : --violet vaut le violet du studio Pixel, --blue
   le bleu du studio Vecteur. Les renommer voudrait dire relire 66 Ko de
   feuille ; le commentaire coute moins cher et dit la meme chose.
   ============================================================ */

/* ---------------------------------------------------------- 1. Les jetons */
:root {
  /* les trois espaces d'Affinity — ils ne changent pas avec le theme */
  --st-vecteur: #1B72BE;   /* studio Vecteur   (ex-Designer)  */
  --st-pixel:   #7E4DD2;   /* studio Pixel     (ex-Photo)     */
  --st-page:    #C9223F;   /* studio Mise en page (ex-Publisher) */

  /* roles (cf. ATTENTION 2 en tete de fichier) */
  --orange: #E8890C;
  --coral:  #E8553F;
  --violet: #7E4DD2;
  --blue:   #1B72BE;
  --mint:   #12B886;

  --grad:   linear-gradient(135deg, #7E4DD2 0%, #1B72BE 100%);
  --grad-3: linear-gradient(120deg, #C9223F, #E8553F, #7E4DD2, #1B72BE, #12B886);
  --grad-soft: linear-gradient(135deg, rgba(126,77,210,.18), rgba(27,114,190,.14));

  /* encre constante:sert aux textes poses sur du blanc (fenetre
     d'identification injectee par script.js, boutons clairs) */
  --ink: #15111C;

  --radius: 18px;
  --radius-s: 12px;
  --maxw: 1200px;
  --aide-w: 390px;
  --font: "Aptos", "Aptos Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --display: "Aptos Display", "Aptos", "Aptos Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --t: .22s cubic-bezier(.4, 0, .2, 1);
}

/* --- theme sombre (par defaut) --- */
:root, :root[data-theme="dark"] {
  --bg:        #08070D;
  --bg-2:      #0E0C16;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.075);
  --surface-3: rgba(255,255,255,.11);
  --line:      rgba(255,255,255,.10);
  --line-2:    rgba(255,255,255,.18);
  --txt:       #ECE8F6;
  --txt-2:     #A9A2C0;
  --txt-3:     #6E6786;
  --accent-txt:#B9A0F0;
  --glow:      0 0 0 1px rgba(126,77,210,.22), 0 18px 50px -18px rgba(126,77,210,.55);
  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.8);
  --aurora-1:  rgba(126,77,210,.30);
  --aurora-2:  rgba(27,114,190,.20);
  --aurora-3:  rgba(18,184,134,.14);
  --code-bg:   #0B0A13;
  --shot-bg:   #16131F;
  color-scheme:dark;
}

/* --- theme clair (projection en salle, lecture longue) --- */
:root[data-theme="light"] {
  --bg:        #FAF9FE;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5F2FD;
  --surface-3: #ECE6FA;
  --line:      #E8E3F4;
  --line-2:    #D4CCEB;
  --txt:       #15111C;
  --txt-2:     #5B5470;
  --txt-3:     #8B84A3;
  --accent-txt:#5B21B6;
  --glow:      0 0 0 1px rgba(126,77,210,.20), 0 18px 44px -20px rgba(126,77,210,.45);
  --shadow:    0 1px 2px rgba(21,17,28,.05), 0 14px 36px -18px rgba(21,17,28,.22);
  --aurora-1:  rgba(126,77,210,.16);
  --aurora-2:  rgba(27,114,190,.12);
  --aurora-3:  rgba(18,184,134,.10);
  --code-bg:   #15111C;
  --shot-bg:   #F2EFFA;
  color-scheme:light;
}

/* ------------------------------------------------------------- 2. La base */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:96px; }
body {
  margin:0; font-family:var(--font); color:var(--txt); background:var(--bg);
  line-height:1.65; font-size:15.5px; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1, h2, h3, h4 { font-family:var(--display); letter-spacing:-.02em; line-height:1.15; }
a { color:var(--accent-txt); text-decoration:none; transition:color var(--t); }
a:hover { color:var(--violet); text-decoration:underline; text-underline-offset:3px; }
img { max-width:100%; }
strong, b { font-weight:700; color:var(--txt); }
code { font-family:var(--mono); font-size:.9em; background:var(--surface-2);
       border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--accent-txt); }
::selection { background:color-mix(in srgb, var(--violet) 32%, transparent); color:#fff; }

/* --- l'aurore de fond:trois taches lumineuses, tres lentes --- */
body::before {
  content:""; position:fixed; inset:-25vh -10vw auto -10vw; height:130vh;
  z-index:-2; pointer-events:none;
  background:radial-gradient(48vw 42vh at 14% 6%,  var(--aurora-1), transparent 62%),
    radial-gradient(44vw 40vh at 88% 18%, var(--aurora-2), transparent 60%),
    radial-gradient(52vw 46vh at 52% 78%, var(--aurora-3), transparent 64%);
  filter:blur(18px);
  animation:derive 28s ease-in-out infinite alternate;
}
@keyframes derive {
  0%   { transform:translate3d(0,0,0)      scale(1); }
  50%  { transform:translate3d(-3%,2%,0)   scale(1.06); }
  100% { transform:translate3d(2.5%,-2%,0) scale(1.02); }
}
/* grain discret:casse les bandes des degrades */
body::after {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
:root[data-theme="light"] body::after { opacity:.1; }

/* ------------------------------------------------ 3. Barre de progression de lecture */
.readbar { position:fixed; top:0; left:0; height:3px; width:0; z-index:80;
           background:var(--grad-3); background-size:300% 100%;
           box-shadow:0 0 14px color-mix(in srgb, var(--violet) 80%, transparent); transition:width .1s linear; }

/* ------------------------------------------------------- 4. Barre du haut */
.topbar { position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line); }
.topbar::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--grad-3); opacity:.55; }
.topbar-inner { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  gap:16px; padding:11px 22px; }
.brand { display:flex; align-items:center; gap:11px; font-family:var(--display);
  font-weight:700; font-size:15px; color:var(--txt); letter-spacing:-.01em; white-space:nowrap; }
.brand:hover { text-decoration:none; color:var(--txt); }
.brand .logo { width:30px; height:30px; border-radius:var(--r-bloc, 9px); background:var(--grad);
  color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 6px 18px -6px color-mix(in srgb, var(--violet) 90%, transparent);
  transition:transform var(--t); }
.brand:hover .logo { transform:rotate(-8deg) scale(1.08); }
.topnav { display:flex; gap:2px; margin-left:auto;
  /* min-width:0 autorise la nav a retrecir dans le flex ; sans lui elle
     pousse les boutons d'action hors de la barre. */
  min-width:0; flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.topnav::-webkit-scrollbar { display:none; }
.topnav a { white-space:nowrap; }
.topnav a { color:var(--txt-2); padding:7px 11px; border-radius:var(--r-bloc, 9px); font-size:13.5px;
  font-weight:500; white-space:nowrap; transition:background var(--t), color var(--t); }
.topnav a:hover { background:var(--surface-2); color:var(--txt); text-decoration:none; }
.topnav a.active { color:#fff; background:var(--grad);
  box-shadow:0 6px 18px -8px color-mix(in srgb, var(--violet) 95%, transparent); }

/* --- bascule clair / sombre --- */
.theme-toggle { flex:0 0 auto; width:34px; height:34px; border-radius:var(--r-bloc, 10px); cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface-2); color:var(--txt);
  display:grid; place-items:center; font-size:15px; line-height:1; padding:0;
  transition:background var(--t), transform var(--t), border-color var(--t); }
.theme-toggle:hover { background:var(--surface-3); transform:translateY(-1px);
  border-color:var(--violet); }
.theme-toggle .sun { display:none; }
:root[data-theme="light"] .theme-toggle .sun { display:block; }
:root[data-theme="light"] .theme-toggle .moon { display:none; }

/* ------------------------------------------------------------ 5. Boutons */
.btn { display:inline-flex; align-items:center; gap:9px; padding:12px 20px;
  border-radius:999px; font-weight:600; font-size:14.5px; border:1px solid transparent;
  cursor:pointer; transition:transform var(--t), box-shadow var(--t), background var(--t),
  border-color var(--t); font-family:var(--font); }
.btn:hover { text-decoration:none; transform:translateY(-2px); }
.btn-primary { background:var(--grad); color:#fff;
  box-shadow:0 10px 30px -12px color-mix(in srgb, var(--violet) 95%, transparent); }
.btn-primary:hover { color:#fff; box-shadow:0 16px 40px -12px color-mix(in srgb, var(--violet) 100%, transparent); }
.btn-ghost { background:var(--surface-2); color:var(--txt); border-color:var(--line-2); }
.btn-ghost:hover { background:var(--surface-3); color:var(--txt); border-color:var(--violet); }
.btn-white { background:#fff; color:var(--ink); box-shadow:0 10px 30px -14px rgba(0,0,0,.7); }
.btn-white:hover { color:var(--ink); }
.btn-line { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.28);
  backdrop-filter:blur(6px); }
.btn-line:hover { background:rgba(255,255,255,.14); color:#fff; }

/* --------------------------------------------------- 6. Pastilles, touches */
.chip { display:inline-flex; align-items:center; gap:7px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px;
  font-weight:500; color:var(--txt-2); }
kbd { display:inline-block; font-family:var(--mono); font-size:12px; font-weight:600;
  line-height:1; color:var(--txt); background:var(--surface-2); border:1px solid var(--line-2);
  border-bottom-width:2px; border-radius:var(--r-bloc, 7px); padding:4px 7px; margin:0 1px; white-space:nowrap; }
.ui { font-weight:600; color:var(--accent-txt); }
.path { font-family:var(--mono); font-size:.9em; color:var(--txt-2); }
.path .sep { opacity:.5; margin:0 2px; }

/* ------------------------------------------------------------- 7. Le hero */
.hero-figma { position:relative; overflow:hidden; border-radius:var(--r-bloc, 28px); padding:56px 48px 48px;
  margin-bottom:34px; color:#fff;
  background:linear-gradient(150deg, #150F24 0%, #26124A 45%, #3A1470 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 90px -50px color-mix(in srgb, var(--violet) 90%, transparent); }
.hero-figma::before { content:""; position:absolute; inset:-40% -10% auto -10%; height:160%;
  background:radial-gradient(40% 44% at 78% 22%, color-mix(in srgb, var(--blue) 55%, transparent), transparent 62%),
    radial-gradient(38% 40% at 18% 84%, color-mix(in srgb, var(--mint) 40%, transparent), transparent 60%),
    radial-gradient(44% 46% at 44% 10%, color-mix(in srgb, var(--coral) 28%, transparent), transparent 60%);
  filter:blur(8px); animation:derive 22s ease-in-out infinite alternate; }
.hero-figma::after { content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.2; pointer-events:none; }
.hero-figma > * { position:relative; z-index:1; }
.hero-figma .kick { display:inline-flex; align-items:center; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 16px;
  font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:22px; backdrop-filter:blur(8px); color:#EDE4FF; }
.hero-figma h1 { margin:0 0 16px; font-size:clamp(30px, 4.2vw, 52px); font-weight:700;
  letter-spacing:-.035em; }
.hero-figma h1 .neon { background:linear-gradient(100deg, var(--coral), var(--violet) 38%, var(--blue) 68%, var(--mint));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:220% 100%; animation:flux 9s ease infinite; }
@keyframes flux { 0%,100% { background-position:0% 50%; } 50% { background-position:100% 50%; } }
.hero-figma p { margin:0; color:#CDC2E8; max-width:60ch; font-size:16.5px; }
.hero-figma .cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.total { display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; }
.total div { flex:1 1 130px; background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-bloc, 16px); padding:16px 18px; font-size:12.5px; color:#B9AEDA;
  backdrop-filter:blur(10px); transition:transform var(--t), background var(--t); }
.total div:hover { transform:translateY(-4px); background:rgba(255,255,255,.1); }
.total b { display:block; font-family:var(--display); font-size:27px; color:#fff;
  font-weight:700; letter-spacing:-.02em; margin-bottom:2px; }

/* ------------------------------------------------------- 8. Titres de section */
.section-title { font-size:clamp(21px, 2.4vw, 28px); margin:52px 0 6px; font-weight:700;
  display:flex; align-items:center; gap:14px; }
.section-title::after { content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-2), transparent); }
.section-sub { margin:0 0 22px; color:var(--txt-2); max-width:74ch; }

/* --------------------------------------------------------- 9. Cartes (bento) */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(268px, 1fr)); gap:18px; }
.course-card { position:relative; display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px 24px;
  color:var(--txt); overflow:hidden; backdrop-filter:blur(12px);
  transition:transform var(--t), border-color var(--t), box-shadow var(--t); }
.course-card::before { content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; background:var(--grad-3); opacity:0; transition:opacity var(--t);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.course-card:hover { transform:translateY(-6px); text-decoration:none; color:var(--txt);
  box-shadow:var(--glow); }
.course-card:hover::before { opacity:1; }
.course-card .cc-num { width:52px; height:52px; border-radius:var(--r-bloc, 15px); background:var(--grad-soft);
  border:1px solid var(--line-2); display:grid; place-items:center; font-size:24px;
  margin-bottom:16px; transition:transform var(--t); }
.course-card:hover .cc-num { transform:scale(1.08) rotate(-6deg); }
.course-card h3 { margin:0 0 8px; font-size:18px; font-weight:700; }
.course-card p { margin:0; color:var(--txt-2); font-size:14px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.tag { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-bloc, 7px);
  padding:3px 9px; font-size:11.5px; font-weight:500; color:var(--txt-3); }
.cc-progress { height:5px; border-radius:99px; background:var(--surface-3); margin-top:16px;
  overflow:hidden; }
.cc-progress > span { display:block; height:100%; width:0; background:var(--grad);
  border-radius:99px; transition:width .6s cubic-bezier(.4,0,.2,1); }
.t-sub { font-size:12.5px; color:var(--txt-3); }
.course-card .cc-pct { color:var(--accent-txt); }

/* ------------------------------------------------------ 10. Les 4 livrables */
.livrables { display:grid; grid-template-columns:repeat(auto-fit, minmax(215px, 1fr));
  gap:16px; margin:22px 0 30px; }
.livrable-card { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 20px 20px; overflow:hidden;
  transition:transform var(--t), box-shadow var(--t); }
.livrable-card::after { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-3); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.4,0,.2,1); }
.livrable-card:hover { transform:translateY(-5px); box-shadow:var(--glow); }
.livrable-card:hover::after { transform:scaleX(1); }
.livrable-card .num { display:inline-grid; place-items:center; width:34px; height:34px;
  border-radius:var(--r-bloc, 11px); background:var(--grad); color:#fff; font-family:var(--display);
  font-weight:700; font-size:15px; margin-bottom:12px;
  box-shadow:0 8px 20px -10px color-mix(in srgb, var(--violet) 95%, transparent); }
.livrable-card h4 { margin:0 0 3px; font-size:16px; font-weight:600; }
.livrable-card .dim { font-family:var(--mono); font-size:13px; font-weight:600;
  color:var(--accent-txt); }
.livrable-card p { margin:8px 0 0; font-size:13.5px; color:var(--txt-2); }

/* ------------------------------------------------------ 11. Mise en page cours */
.layout { max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:272px 1fr; gap:40px; padding:32px 22px 90px; }
.sidebar { position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px);
  overflow-y:auto; scrollbar-width:thin; }
.sidebar h2 { font-size:11px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--txt-3); margin:0 0 12px 6px; font-family:var(--font); font-weight:700; }
.toc { list-style:none; margin:0; padding:0; }
.toc li { margin:2px 0; }
.toc a { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-bloc, 11px);
  color:var(--txt-2); font-size:14px; font-weight:500; transition:all var(--t); }
.toc a:hover { background:var(--surface-2); color:var(--txt); text-decoration:none; }
.toc a.active { background:var(--grad-soft); color:var(--txt);
  box-shadow:inset 2px 0 0 var(--violet); }
.toc .num { flex:0 0 24px; height:24px; border-radius:50%; background:var(--surface-3);
  color:var(--txt-2); display:grid; place-items:center; font-size:11.5px; font-weight:700;
  transition:all var(--t); }
.toc a.done .num { background:var(--mint); color:#04241D; }
.toc a.done .num::after { content:"✓"; }
.toc a.done .num span { display:none; }
.content { min-width:0; }

/* ------------------------------------------------------- 12. En-tete de page */
.page-head { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-bloc, 24px); padding:34px 34px 30px; margin-bottom:24px; overflow:hidden;
  backdrop-filter:blur(12px); }
.page-head::before { content:""; position:absolute; right:-60px; top:-90px; width:320px;
  height:320px; border-radius:50%; background:var(--grad-soft); filter:blur(30px); }
.page-head > * { position:relative; }
.kicker { display:inline-block; background:var(--surface-2); border:1px solid var(--line-2);
  color:var(--accent-txt); font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 13px; border-radius:999px; margin-bottom:14px; }
.page-head h1 { margin:0 0 10px; font-size:clamp(24px, 3.2vw, 36px); font-weight:700; }
.page-head p { margin:0; color:var(--txt-2); max-width:68ch; }
.meta-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }

/* --------------------------------------------------- 13. Barre de progression */
.progress-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-bloc, 16px);
  padding:16px 22px; margin-bottom:26px; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; backdrop-filter:blur(12px); }
.progress-wrap .label { font-weight:600; font-size:13.5px; color:var(--txt-2); }
.progress-bar { flex:1; min-width:170px; height:8px; background:var(--surface-3);
  border-radius:99px; overflow:hidden; }
.progress-bar > span { display:block; height:100%; width:0; border-radius:99px;
  background:var(--grad-3); background-size:250% 100%; animation:flux 6s ease infinite;
  transition:width .6s cubic-bezier(.4,0,.2,1); box-shadow:0 0 14px color-mix(in srgb, var(--violet) 70%, transparent); }
.progress-pct { font-family:var(--display); font-weight:700; font-size:17px;
  color:var(--accent-txt); min-width:46px; }
.btn-reset { background:transparent; border:1px solid var(--line-2); color:var(--txt-3);
  border-radius:999px; padding:6px 14px; font-size:12.5px; cursor:pointer;
  font-family:var(--font); transition:all var(--t); }
.btn-reset:hover { color:var(--txt); border-color:var(--coral); }

/* -------------------------------------------------------- 14. Les modules */
.module { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  margin-bottom:16px; overflow:hidden; backdrop-filter:blur(12px);
  transition:border-color var(--t), box-shadow var(--t); }
.module:hover { border-color:var(--line-2); }
.module.open { border-color:color-mix(in srgb, var(--violet) 38%, transparent); box-shadow:var(--glow); }
.module.completed { border-color:color-mix(in srgb, var(--mint) 38%, transparent); }
.module-head { display:flex; align-items:center; gap:16px; padding:20px 24px;
  cursor:pointer; user-select:none; }
.module-head h2 { margin:0; font-size:18px; font-weight:600; }
.module-head .obj { font-size:13px; color:var(--txt-3); }
.module-badge { flex:0 0 40px; height:40px; border-radius:var(--r-bloc, 13px); background:var(--surface-3);
  border:1px solid var(--line-2); color:var(--txt-2); display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:16px; transition:all var(--t); }
.module.open .module-badge { background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--violet) 95%, transparent); }
.module.completed .module-badge { background:var(--mint); color:#04241D; border-color:transparent; }
.done-flag { display:none; font-size:11.5px; font-weight:700; color:var(--mint);
  background:color-mix(in srgb, var(--mint) 12%, transparent); border:1px solid color-mix(in srgb, var(--mint) 30%, transparent); border-radius:999px;
  padding:4px 11px; }
.module.completed .done-flag { display:inline-block; }
.caret { color:var(--txt-3); font-size:22px; transition:transform var(--t); line-height:1; }
.module.open .caret { transform:rotate(90deg); color:var(--violet); }
.module-body { display:none; padding:0 24px 24px; }
.module.open .module-body { display:block; animation:deplie .3s cubic-bezier(.4,0,.2,1); }
@keyframes deplie { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
.module-body > p { color:var(--txt-2); }
.module-done-row { margin-top:20px; }
.btn-done { display:inline-flex; align-items:center; gap:10px; padding:11px 20px;
  border-radius:999px; border:1px solid var(--line-2); background:var(--surface-2);
  color:var(--txt-2); font-size:14px; font-weight:600; cursor:pointer;
  font-family:var(--font); transition:all var(--t); }
.btn-done:hover { border-color:var(--mint); color:var(--txt); }
.btn-done .ic { font-size:15px; }
.btn-done.is-done { background:color-mix(in srgb, var(--mint) 14%, transparent); border-color:var(--mint); color:var(--mint); }

/* ------------------------------------------------- 15. Taches et cases a cocher */
.task { background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--r-bloc, 14px);
  padding:18px 20px; margin:20px 0; }
.task-title { font-weight:700; font-size:13.5px; margin-bottom:10px; color:var(--accent-txt);
  font-family:var(--display); }
.check { display:flex; align-items:flex-start; gap:12px; padding:7px 0; cursor:pointer;
  font-size:14.5px; color:var(--txt-2); transition:color var(--t); }
.check:hover { color:var(--txt); }
.check input { appearance:none; -webkit-appearance:none; flex:0 0 auto; width:20px; height:20px;
  margin:2px 0 0; border-radius:var(--r-bloc, 7px); border:1.5px solid var(--line-2); background:var(--surface);
  cursor:pointer; position:relative; transition:all var(--t); }
.check input:hover { border-color:var(--violet); }
.check input:checked { background:var(--grad); border-color:transparent;
  box-shadow:0 4px 14px -6px color-mix(in srgb, var(--violet) 95%, transparent); }
.check input:checked::after { content:"✓"; position:absolute; inset:0; display:grid;
  place-items:center; color:#fff; font-size:12px; font-weight:800;
  animation:pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop { 0% { transform:scale(0); } 100% { transform:scale(1); } }
.check input:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.check input:checked + span { color:var(--txt-3); text-decoration:line-through;
  text-decoration-color:var(--line-2); }

/* ---------------------------------------------------------- 16. Les etapes */
.steps { counter-reset:step; list-style:none; padding:0; margin:20px 0; }
.steps > li { counter-increment:step; position:relative; padding:2px 0 20px 46px;
  color:var(--txt-2); }
.steps > li::before { content:counter(step); position:absolute; left:0; top:0; width:30px;
  height:30px; border-radius:var(--r-bloc, 10px); background:var(--surface-3); border:1px solid var(--line-2);
  color:var(--accent-txt); display:grid; place-items:center; font-family:var(--display);
  font-weight:700; font-size:13px; }
.steps > li::after { content:""; position:absolute; left:15px; top:34px; bottom:4px;
  width:1px; background:var(--line); }
.steps > li:last-child { padding-bottom:0; }
.steps > li:last-child::after { display:none; }

/* ------------------------------------------- 16 bis. Le point d'arbitrage
   Marque un CHOIX, pas un geste. Le pas-a-pas dit comment faire ;
   l'arbitrage dit comment decider — et c'est la que l'intervenant sert. */
.arbitrage { position:relative; margin:20px 0; padding:16px 20px 16px 54px;
  border-radius:var(--r-bloc, 14px); border:1px solid color-mix(in srgb, var(--orange) 34%, transparent);
  background:color-mix(in srgb, var(--orange) 8%, var(--surface)); font-size:14.5px;
  color:var(--txt-2); }
.arbitrage::before { content:"\1F914"; position:absolute; left:18px; top:14px; font-size:18px; }
.arbitrage .titre { display:block; font-family:var(--display); font-weight:700;
  font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--orange); margin-bottom:6px; }
.arbitrage b { color:var(--txt); }
.arbitrage .regle { display:block; margin-top:10px; padding-top:10px;
  border-top:1px solid color-mix(in srgb, var(--orange) 24%, transparent); font-size:13.5px; }
.arbitrage .regle b { color:var(--orange); }

/* ------------------------------------------------------------ 17. Encadres */
.callout { position:relative; border-radius:var(--r-bloc, 14px); padding:15px 18px 15px 50px; margin:18px 0;
  font-size:14.5px; border:1px solid var(--line); background:var(--surface-2);
  color:var(--txt-2); }
.callout::before { position:absolute; left:17px; top:14px; font-size:17px; }
.callout::after { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:0 3px 3px 0; }
.callout p:first-child { margin-top:0; } .callout p:last-child { margin-bottom:0; }
.callout strong { color:var(--txt); }
.callout.info::before { content:"ℹ️"; } .callout.info::after { background:var(--blue); }
.callout.warn::before { content:"⚠️"; } .callout.warn::after { background:var(--orange); }
.callout.warn { background:color-mix(in srgb, var(--orange) 8%, var(--surface-2)); }
.callout.tip::before  { content:"💡"; } .callout.tip::after  { background:var(--coral); }
.callout.goal::before { content:"🎯"; } .callout.goal::after { background:var(--mint); }
.callout.goal { background:color-mix(in srgb, var(--mint) 8%, var(--surface-2)); }
.callout.fg::before   { content:"◆"; color:var(--violet); }
.callout.fg::after    { background:var(--violet); }
.callout.fg { background:color-mix(in srgb, var(--violet) 9%, var(--surface-2)); }

/* -------------------------------------------------------------- 18. Tableaux */
table.demo, table.formats { width:100%; border-collapse:separate; border-spacing:0;
  margin:20px 0; font-size:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-bloc, 14px); overflow:hidden; }
table.demo th, table.formats th { background:var(--surface-3); color:var(--txt);
  text-align:left; padding:12px 14px; font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; border-bottom:1px solid var(--line); }
table.demo td, table.formats td { padding:12px 14px; border-bottom:1px solid var(--line);
  color:var(--txt-2); vertical-align:top; }
table.demo tr:last-child td, table.formats tr:last-child td { border-bottom:0; }
table.demo tr:hover td, table.formats tr:hover td { background:var(--surface-2); }
table.demo td strong { color:var(--txt); }
table.formats td.px { font-family:var(--mono); font-weight:600; color:var(--accent-txt);
  white-space:nowrap; }
table.formats .reseau { display:inline-flex; align-items:center; gap:9px; font-weight:600;
  color:var(--txt); }
table.formats .puce { width:10px; height:10px; border-radius:3px; flex:0 0 auto;
  box-shadow:0 0 10px currentColor; }
.ratio-chip { display:inline-block; background:var(--surface-3); border:1px solid var(--line-2);
  color:var(--accent-txt); border-radius:999px; padding:2px 10px; font-size:12px;
  font-weight:700; white-space:nowrap; font-family:var(--mono); }

/* ------------------------------------------------------------ 19. Blocs de code */
.code { position:relative; background:var(--code-bg); border:1px solid var(--line-2);
  border-radius:var(--r-bloc, 14px); margin:18px 0; overflow:hidden; }
.code .code-head { display:flex; align-items:center; justify-content:space-between;
  padding:9px 14px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);
  font-size:11.5px; font-weight:600; color:#9C93B8; letter-spacing:.06em; }
.code pre { margin:0; padding:16px 18px; overflow-x:auto; }
.code code { font-family:var(--mono); font-size:13px; line-height:1.7; white-space:pre;
  color:#DCD5F0; background:none; border:0; padding:0; }
.code .kw { color:var(--violet); font-weight:600; }
.btn-copy { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#CFC7E6; border-radius:var(--r-bloc, 7px); padding:3px 10px; font-size:11.5px; cursor:pointer;
  font-family:var(--font); transition:all var(--t); }
.btn-copy:hover { background:color-mix(in srgb, var(--violet) 30%, transparent); color:#fff; }
.btn-copy.ok { background:var(--mint); color:#04241D; border-color:transparent; }

/* ---------------------------------------- 20. Captures:cadre de navigateur */
figure.shot { margin:22px 0; background:var(--shot-bg); border:1px solid var(--line-2);
  border-radius:var(--r-bloc, 16px); overflow:hidden; box-shadow:var(--shadow);
  transition:transform var(--t), box-shadow var(--t); }
figure.shot:hover { transform:translateY(-3px); box-shadow:var(--glow); }
figure.shot .chrome { display:flex; align-items:center; gap:7px; padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2); }
figure.shot .chrome i { width:10px; height:10px; border-radius:50%; display:block; }
figure.shot .chrome i:nth-child(1) { background:#FF5F57; }
figure.shot .chrome i:nth-child(2) { background:var(--orange); }
figure.shot .chrome i:nth-child(3) { background:#28C840; }
figure.shot .chrome span { margin-left:10px; font-size:11.5px; color:var(--txt-3);
  font-family:var(--mono); }
figure.shot img { display:block; width:100%; height:auto; background:#fff; cursor:zoom-in; }
figure.shot figcaption { padding:13px 18px; font-size:13.5px; color:var(--txt-2);
  border-top:1px solid var(--line); background:var(--surface); }
figure.shot figcaption b { color:var(--txt); }

ol.legende { list-style:none; counter-reset:leg; margin:16px 0 22px; padding:0; display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:10px 20px; }
ol.legende li { counter-increment:leg; position:relative; padding-left:34px; font-size:14px;
  color:var(--txt-2); }
ol.legende li::before { content:counter(leg); position:absolute; left:0; top:1px; width:23px;
  height:23px; border-radius:50%; background:var(--grad); color:#fff; display:grid;
  place-items:center; font-size:11.5px; font-weight:700; }
ol.legende li b { color:var(--txt); }

.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,4,12,.94);
  backdrop-filter:blur(10px); display:none; align-items:center; justify-content:center;
  padding:34px; cursor:zoom-out; }
.lightbox.open { display:flex; animation:fondu .2s ease; }
@keyframes fondu { from { opacity:0; } to { opacity:1; } }
.lightbox img { max-width:96vw; max-height:92vh; border-radius:var(--r-bloc, 12px);
  box-shadow:0 30px 90px rgba(0,0,0,.8); background:#fff; }
.lightbox .close { position:absolute; top:20px; right:28px; color:#fff; font-size:36px;
  font-weight:300; cursor:pointer; line-height:1; }

/* --------------------------------------------------- 21. Blocs pedagogiques */
.ratios { display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; margin:22px 0;
  padding:26px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-bloc, 18px); }
.ratios figure { margin:0; text-align:center; }
.ratios .boite { border-radius:var(--r-bloc, 10px); background:var(--grad);
  box-shadow:0 10px 30px -14px color-mix(in srgb, var(--violet) 95%, transparent); transition:transform var(--t); }
.ratios figure:hover .boite { transform:translateY(-6px) scale(1.03); }
.ratios figcaption { margin-top:10px; font-size:12.5px; font-weight:700; color:var(--txt);
  font-family:var(--mono); }
.ratios figcaption span { display:block; font-weight:400; color:var(--txt-3); font-size:11px;
  font-family:var(--font); }

.planning { display:grid; gap:14px; margin:22px 0 30px; }
.jour { position:relative; display:grid; grid-template-columns:96px 1fr; gap:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; overflow:hidden; transition:transform var(--t), box-shadow var(--t); }
.jour::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-3); }
.jour:hover { transform:translateX(4px); box-shadow:var(--glow); }
.jour .j { font-family:var(--display); font-weight:700; font-size:26px; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jour .j span { display:block; font-size:11px; font-weight:600; color:var(--txt-3);
  text-transform:uppercase; letter-spacing:.1em; margin-top:6px;
  -webkit-text-fill-color:var(--txt-3); }
.jour h3 { margin:0 0 6px; font-size:17px; font-weight:600; }
.jour p { margin:0 0 12px; font-size:14px; color:var(--txt-2); }
.jour .livrable { display:inline-flex; align-items:center; gap:8px;
  background:color-mix(in srgb, var(--mint) 12%, transparent); border:1px solid color-mix(in srgb, var(--mint) 32%, transparent); color:var(--mint);
  border-radius:999px; padding:5px 14px; font-size:12.5px; font-weight:600; }

.avant-apres { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:20px 0; }
.avant-apres > div { border-radius:var(--r-bloc, 14px); padding:18px 20px; font-size:14px; border:1px solid; }
.avant-apres .non { background:color-mix(in srgb, var(--orange) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--orange) 34%, transparent); color:var(--txt-2); }
.avant-apres .oui { background:color-mix(in srgb, var(--mint) 10%, var(--surface));
  border-color:color-mix(in srgb, var(--mint) 34%, transparent); color:var(--txt-2); }
.avant-apres h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; font-family:var(--font); }
.avant-apres .non h4 { color:var(--coral); }
.avant-apres .oui h4 { color:var(--mint); }

.nuancier { display:flex; flex-wrap:wrap; gap:14px; margin:20px 0; }
.nuance { border:1px solid var(--line); border-radius:var(--r-bloc, 14px); overflow:hidden; width:146px;
  background:var(--surface); transition:transform var(--t), box-shadow var(--t); }
.nuance:hover { transform:translateY(-5px); box-shadow:var(--glow); }
.nuance .aplat { height:64px; }
.nuance .txt { padding:10px 12px; font-size:12px; line-height:1.5; color:var(--txt-3); }
.nuance .txt b { display:block; font-size:13px; color:var(--txt); }
.nuance .txt code { font-family:var(--mono); color:var(--accent-txt); background:none;
  border:0; padding:0; font-size:11.5px; }

.data-badge { display:flex; align-items:center; gap:12px; background:var(--surface-2);
  border:1px solid var(--line); border-left:3px solid var(--violet); border-radius:var(--r-bloc, 10px);
  padding:11px 16px; margin:0 0 16px; font-size:14px; color:var(--txt-2); }

.tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(246px, 1fr)); gap:12px; }
.tile { display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-bloc, 14px); padding:15px 18px; color:var(--txt);
  transition:all var(--t); }
.tile:hover { border-color:var(--violet); transform:translateY(-3px); text-decoration:none;
  box-shadow:var(--glow); }
.tile .ico { font-size:21px; flex:0 0 auto; }
.tile .t-name { font-weight:600; font-size:14px; }

/* ------------------------------------------------------------ 22. Exercices */
.exo { position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px; margin-bottom:20px;
  backdrop-filter:blur(12px); transition:border-color var(--t), box-shadow var(--t); }
.exo:hover { border-color:var(--line-2); }
.exo h3 { margin:0 0 8px; font-size:19px; font-weight:600; }
.exo p { color:var(--txt-2); }
.exo .lvl { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em;
  color:var(--txt-3); }
.sec-h { margin:44px 0 8px; font-size:21px; display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-weight:700; }
.sec-h .pill { background:var(--grad); color:#fff; font-size:16px; border-radius:var(--r-bloc, 11px);
  padding:5px 12px; box-shadow:0 8px 22px -10px color-mix(in srgb, var(--violet) 95%, transparent); }
/* Renvoi discret de chaque serie d'exercices vers le cours qui la prepare. */
/* La carte du QCM se distingue des cinq cours, sans couleur en dur. */
.course-card-qcm { border-color:color-mix(in srgb, var(--violet) 38%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface)); }

.sec-h .rappel-cours { margin-left:auto; font-family:var(--font); font-size:12.5px;
  font-weight:500; letter-spacing:0; color:var(--txt-3); text-decoration:none;
  border:1px solid var(--line); border-radius:999px; padding:5px 13px;
  background:var(--surface); transition:color var(--t), border-color var(--t); white-space:nowrap; }
.sec-h .rappel-cours:hover { color:var(--accent-txt); border-color:var(--line-2); }
@media (max-width:620px) {
  .sec-h { flex-wrap:wrap; }
  .sec-h .rappel-cours { margin-left:0; }
}

details.solution { margin-top:16px; border:1px solid var(--line-2); background:var(--surface-2);
  border-radius:var(--r-bloc, 12px); padding:12px 16px; }
details.solution > summary { font-weight:600; cursor:pointer; color:var(--accent-txt);
  font-size:14px; list-style:none; display:flex; align-items:center; gap:8px; }
details.solution > summary::-webkit-details-marker { display:none; }
details.solution > summary::before { content:"▸"; transition:transform var(--t); }
details.solution[open] > summary::before { transform:rotate(90deg); }
details.solution[open] { padding-bottom:16px; }
details.solution .sol-body { margin-top:12px; font-size:14.5px; color:var(--txt-2); }
.sol-body ol { margin:10px 0 0; padding-left:20px; display:grid; gap:7px; }
.sol-body ol li::marker { color:var(--accent-txt); font-weight:700; }
.sol-body .verif { display:block; margin-top:11px; padding-top:10px;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--txt-3); }
.sol-body .verif b { color:var(--mint); }
.analyse { margin-top:12px; border-left:3px solid var(--blue);
  background:color-mix(in srgb, var(--blue) 9%, var(--surface)); border-radius:var(--r-bloc, 10px);
  padding:12px 16px; font-size:14px; color:var(--txt-2); }
.analyse b { color:var(--blue); }
.exo.mission { border-color:color-mix(in srgb, var(--violet) 34%, transparent); background:linear-gradient(160deg, color-mix(in srgb, var(--violet) 10%, var(--surface)), var(--surface)); }
.exo.mission .lvl { color:var(--accent-txt); }

/* ---------------------------------------------------------------- 23. QCM */
.quiz-wrap { max-width:880px; margin:0 auto; }
.q-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 26px; margin-bottom:16px; backdrop-filter:blur(12px);
  transition:border-color var(--t); }
.q-card .q-num { font-size:11px; font-weight:700; color:var(--txt-3); letter-spacing:.12em;
  text-transform:uppercase; }
.q-card .q-text { font-weight:600; font-size:16.5px; margin:8px 0 16px; font-family:var(--display); }
.opt { display:flex; align-items:flex-start; gap:12px; border:1px solid var(--line);
  border-radius:var(--r-bloc, 12px); padding:12px 16px; margin:9px 0; cursor:pointer;
  background:var(--surface-2); transition:all var(--t); }
.opt:hover { background:var(--surface-3); border-color:var(--line-2); transform:translateX(3px); }
.opt input { appearance:none; -webkit-appearance:none; margin-top:2px; width:18px; height:18px;
  border-radius:50%; border:1.5px solid var(--line-2); background:var(--surface); flex:0 0 auto;
  position:relative; cursor:pointer; transition:all var(--t); }
.opt input:checked { border-color:var(--violet); }
.opt input:checked::after { content:""; position:absolute; inset:3px; border-radius:50%;
  background:var(--grad); animation:pop .25s cubic-bezier(.34,1.56,.64,1); }
.opt .opt-txt { font-size:14.5px; color:var(--txt-2); }
.opt.correct { background:color-mix(in srgb, var(--mint) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--mint) 45%, transparent); }
.opt.wrong { background:color-mix(in srgb, var(--orange) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--orange) 45%, transparent); }
.opt .mark { margin-left:auto; font-weight:800; display:none; }
.opt.correct .mark { display:inline; color:var(--mint); }
.opt.wrong .mark { display:inline; color:var(--coral); }
.explain { display:none; margin-top:12px; font-size:13.5px; padding:12px 16px;
  border-radius:var(--r-bloc, 10px); background:color-mix(in srgb, var(--blue) 9%, var(--surface));
  border-left:3px solid var(--blue); color:var(--txt-2); }
.explain.show { display:block; animation:deplie .25s ease; }
.q-card.graded .opt { cursor:default; transform:none; }
.q-card.graded .opt:hover { transform:none; }
.scorebar { position:sticky; bottom:0; z-index:30; margin-top:14px;
  background:color-mix(in srgb, var(--bg-2) 96%, transparent);
  backdrop-filter:saturate(180%) blur(20px); border:1px solid var(--line-2);
  border-bottom:0; border-radius:var(--r-bloc, 20px) var(--r-bloc, 20px) 0 0; padding:18px 24px; display:flex;
  align-items:center; gap:16px; flex-wrap:wrap;
  box-shadow:0 -10px 40px -18px rgba(0,0,0,.7); }
.scorebar .big { font-family:var(--display); font-size:23px; font-weight:700; color:var(--txt); }
.result-banner { display:none; border-radius:var(--radius); padding:24px 28px; margin-bottom:18px;
  font-size:16px; border:1px solid; }
.result-banner.show { display:block; animation:deplie .35s cubic-bezier(.34,1.3,.64,1); }
.result-banner.pass { background:color-mix(in srgb, var(--mint) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--mint) 42%, transparent); color:var(--txt); }
.result-banner.fail { background:color-mix(in srgb, var(--orange) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--orange) 42%, transparent); color:var(--txt); }

/* ------------------------------------------------------ 24. Pagination, pied */
.pager { display:flex; justify-content:space-between; gap:16px; margin-top:36px;
  flex-wrap:wrap; }
.pager a { flex:1; min-width:210px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-bloc, 16px); padding:18px 22px; transition:all var(--t); }
.pager a:hover { border-color:var(--violet); text-decoration:none; transform:translateY(-3px);
  box-shadow:var(--glow); }
.pager .dir { font-size:11.5px; font-weight:700; color:var(--txt-3); text-transform:uppercase;
  letter-spacing:.1em; }
.pager .ttl { font-weight:600; color:var(--txt); font-family:var(--display); }
.pager a.next { text-align:right; }
footer.site { border-top:1px solid var(--line); padding:30px 22px; text-align:center;
  color:var(--txt-3); font-size:13px; margin-top:40px; }

/* ----------------------------------- 25. La fenetre d'identification (script.js) */
/* script.js injecte sa propre feuille avec un fond blanc:on force une encre
   sombre, sinon le texte devient invisible en theme sombre. */
.skolae-modal .skolae-box { color:var(--ink) !important; }
.skolae-modal .skolae-box input { color:var(--ink) !important; background:#fff !important; }
/* script.js ecrit la pastille en blanc sur blanc:illisible en theme clair.
   Sa feuille est injectee APRES la notre, on passe donc par .topbar pour
   gagner en specificite. */
.topbar .skolae-idchip { background:var(--surface-2); color:var(--txt);
  border-color:var(--line-2); font-family:var(--font); }
.topbar .skolae-idchip:hover { background:var(--surface-3); }

/* Meme cas pour le lien de retour que scripts/05 injecte dans la copie
   commerciale:il est ecrit en blanc, donc invisible sur barre claire.
   La regle du script est ajoutee en fin de fichier, on passe donc par
   .topbar pour rester plus specifique. */
.topbar .retour-esbi { color:var(--txt); border-color:var(--line-2);
  background:var(--surface-2); opacity:1; }
.topbar .retour-esbi:hover { background:var(--surface-3); }

/* ------------------------------------------- 26. Apparition au defilement */
[data-reveal] { opacity:0; transform:translateY(22px); }
[data-reveal].vu { opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); }

/* A l'impression, rien ne doit dependre du defilement. */
@media print {
  [data-reveal] { opacity:1 !important; transform:none !important; }
  body::before, body::after, .readbar, .theme-toggle { display:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1; transform:none; }
}

/* --------------------------------------------------------- 27. Responsive */
@media (max-width:1080px) {
  .topnav a { padding:6px 9px; font-size:13px; }
  .brand { font-size:14px; }
}
@media (max-width:900px) {
  .layout { grid-template-columns:1fr; gap:20px; padding:20px 16px 70px; }
  .sidebar { position:static; max-height:none; order:-1; background:var(--surface);
    border:1px solid var(--line); border-radius:var(--r-bloc, 16px); padding:16px 18px; }
  .hero-figma { padding:36px 24px 32px; border-radius:var(--r-bloc, 22px); }
  .avant-apres { grid-template-columns:1fr; }
}
/* Entre 641 et 1000 px, la barre du haut deborde:neuf liens, la marque, la
   bascule de theme et la pastille « S'identifier » ne tiennent pas, et elle
   poussait tout le document a 986 px — un defilement horizontal sur chaque
   page du cours. Mesure faite PANNEAU FERME : ce n'est pas le panneau qui le
   cause, il ne faisait que le rendre visible. La regle de defilement de la
   nav existait deja, mais seulement sous 640 px. On la remonte.
   Elle s'applique aussi des que le panneau est ouvert : il prend de la
   largeur quelle que soit la taille de l'ecran. */
@media (max-width: 1000px) {
  .topbar-inner { flex-wrap:nowrap; gap:10px; }
  .topnav { min-width:0; flex-wrap:nowrap; overflow-x:auto;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .topnav::-webkit-scrollbar { display:none; }
  .topnav a { white-space:nowrap; }
}
body.aide-ouverte .topbar-inner { flex-wrap:nowrap; gap:10px; }
body.aide-ouverte .topnav { min-width:0; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; }
body.aide-ouverte .topnav::-webkit-scrollbar { display:none; }
body.aide-ouverte .topnav a { white-space:nowrap; }

@media (max-width:640px) {
  html { scroll-padding-top:76px; }
  body { font-size:15px; }
  .topbar-inner { padding:9px 12px; gap:10px; flex-wrap:nowrap; }
  .brand span:not(.logo) { display:none; }
  .topnav { gap:2px; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-width:calc(100vw - 130px); scrollbar-width:none; }
  .topnav::-webkit-scrollbar { display:none; }
  main[style] { padding-left:14px !important; padding-right:14px !important; }
  .page-head { padding:22px 18px; border-radius:var(--r-bloc, 18px); }
  .module-head { padding:16px 16px; gap:12px; }
  .module-head .done-flag { display:none !important; }
  .module-body { padding:0 16px 20px; }
  .exo { padding:20px 18px; }
  .q-card { padding:18px 18px; }
  .cards, .livrables, .tiles { grid-template-columns:1fr; }
  .jour { grid-template-columns:1fr; gap:8px; padding:18px 18px; }
  .hero-figma .cta { flex-direction:column; }
  .hero-figma .btn { width:100%; justify-content:center; }
  .total div { flex-basis:calc(50% - 7px); }
  table.demo, table.formats { display:block; overflow-x:auto; white-space:nowrap; }
  ol.legende { grid-template-columns:1fr; }
  .pager { flex-direction:column; }
  .pager a, .pager a.next { text-align:left; min-width:0; }
  .scorebar { padding:14px 16px; border-radius:var(--r-bloc, 16px) var(--r-bloc, 16px) 0 0; }
  .scorebar .big { font-size:19px; }
}

/* ============================================================
   28. Les ateliers interactifs (pilotes par assets/effets.js)
   ============================================================ */
.labo { position:relative; margin:24px 0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-bloc, 20px); overflow:hidden; backdrop-filter:blur(12px); }
.labo::before { content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-3); }
.labo-head { display:flex; align-items:center; gap:12px; padding:18px 22px 14px;
  border-bottom:1px solid var(--line); flex-wrap:wrap; }
.labo-head h4 { margin:0; font-size:15.5px; font-weight:600; }
.labo-head .tagline { font-size:12.5px; color:var(--txt-3); }
.labo-head .live { margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--mint); }
.labo-head .live::before { content:""; width:7px; height:7px; border-radius:50%;
  background:var(--mint); box-shadow:0 0 10px var(--mint); animation:pulse 1.8s ease infinite; }
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.8); } }

.labo-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:16px 22px 0; }
.labo-tab { background:var(--surface-2); border:1px solid var(--line); color:var(--txt-2);
  border-radius:999px; padding:7px 15px; font-size:13px; font-weight:500; cursor:pointer;
  font-family:var(--font); display:inline-flex; align-items:center; gap:8px;
  transition:all var(--t); }
.labo-tab:hover { border-color:var(--line-2); color:var(--txt); transform:translateY(-2px); }
.labo-tab[aria-selected="true"] { background:var(--grad); color:#fff; border-color:transparent;
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--violet) 95%, transparent); }
.labo-tab .puce { width:9px; height:9px; border-radius:3px; }
.labo-tab[aria-selected="true"] .puce { background:#fff !important; }

/* --- l'atelier des formats --- */
.labo-scene { display:grid; grid-template-columns:1fr 270px; gap:26px; padding:24px 22px 26px;
  align-items:center; }
.scene-boite { display:grid; place-items:center; min-height:340px;
  background:linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--surface-2);
  border-radius:var(--r-bloc, 16px); padding:22px; }
.apercu { position:relative; border-radius:var(--r-bloc, 10px); background:var(--grad);
  box-shadow:0 22px 50px -22px color-mix(in srgb, var(--violet) 100%, transparent); overflow:hidden;
  transition:width .55s cubic-bezier(.34,1.2,.64,1), height .55s cubic-bezier(.34,1.2,.64,1); }
.apercu .etiquette { position:absolute; inset:auto 0 0 0; padding:8px 10px; font-size:11px;
  font-family:var(--mono); font-weight:600; color:#fff; background:rgba(8,7,13,.45);
  backdrop-filter:blur(6px); text-align:center; }
.apercu .zs { position:absolute; left:0; right:0; background:repeating-linear-gradient(
    45deg, color-mix(in srgb, var(--coral) 55%, transparent) 0 8px, color-mix(in srgb, var(--coral) 25%, transparent) 8px 16px);
  opacity:0; transition:opacity .35s ease; }
.apercu.avec-zs .zs { opacity:1; }
/* la cote de dimension passerait sous la bande basse:on l'efface alors */
.apercu.avec-zs .etiquette { display:none; }
.apercu .zs.haut { top:0; } .apercu .zs.bas { bottom:0; }
.apercu .zs b { position:absolute; inset:0; display:grid; place-items:center; font-size:10px;
  color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7); font-family:var(--font); }

.labo-infos { display:grid; gap:10px; }
.labo-stat { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-bloc, 13px);
  padding:13px 16px; }
.labo-stat .k { font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); }
.labo-stat .v { font-family:var(--mono); font-size:19px; font-weight:600; color:var(--txt);
  margin-top:3px; }
.labo-stat .v.accent { background:var(--grad); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.labo-stat .n { font-size:12.5px; color:var(--txt-2); margin-top:4px; line-height:1.5; }

/* --- l'atelier de contraste --- */
.contraste { padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:22px;
  align-items:start; }
.contraste-champs { display:grid; gap:14px; }
.champ-couleur { display:flex; align-items:center; gap:12px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--r-bloc, 13px); padding:11px 14px; }
.champ-couleur label { font-size:12.5px; font-weight:600; color:var(--txt-2); flex:1; }
.champ-couleur input[type="color"] { width:42px; height:32px; border:1px solid var(--line-2);
  border-radius:var(--r-bloc, 9px); background:none; cursor:pointer; padding:2px; }
.champ-couleur .hex { font-family:var(--mono); font-size:12.5px; color:var(--accent-txt);
  min-width:64px; text-align:right; }
.contraste-apercu { border-radius:var(--r-bloc, 16px); padding:26px 24px; min-height:168px; display:grid;
  align-content:center; gap:8px; border:1px solid var(--line-2); }
.contraste-apercu .gros { font-family:var(--display); font-size:26px; font-weight:700;
  line-height:1.15; }
.contraste-apercu .petit { font-size:14px; }
.contraste-note { grid-column:1 / -1; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-bloc, 14px); padding:16px 20px; }
.contraste-note .ratio { font-family:var(--display); font-size:32px; font-weight:700;
  color:var(--txt); line-height:1; }
.contraste-note .ratio small { font-size:14px; color:var(--txt-3); font-weight:500; }
.verdict { display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:6px 14px; font-size:12.5px; font-weight:700; border:1px solid; }
.verdict.ok  { background:color-mix(in srgb, var(--mint) 14%, transparent); border-color:color-mix(in srgb, var(--mint) 40%, transparent); color:var(--mint); }
.verdict.moy { background:color-mix(in srgb, var(--orange) 14%, transparent); border-color:color-mix(in srgb, var(--orange) 40%, transparent); color:var(--orange); }
.verdict.ko  { background:color-mix(in srgb, var(--coral) 14%, transparent); border-color:color-mix(in srgb, var(--coral) 40%, transparent); color:var(--coral); }
.contraste-note .aide { font-size:12.5px; color:var(--txt-3); flex:1; min-width:190px; }

/* --- la salve de confettis du QCM reussi --- */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:150; overflow:hidden; }
.confetti i { position:absolute; width:9px; height:15px; border-radius:2px;
  animation:tombe linear forwards; }
@keyframes tombe {
  0%   { transform:translateY(-12vh) rotate(0deg); opacity:1; }
  100% { transform:translateY(105vh) rotate(760deg); opacity:0; }
}

@media (max-width:820px) {
  .labo-scene { grid-template-columns:1fr; gap:18px; }
  .scene-boite { min-height:270px; }
  .contraste { grid-template-columns:1fr; }
}


/* ==========================================================================
   20. Le panneau d'aide  (assets/aide.js)
   --------------------------------------------------------------------------
   Contrat avec aide.js:#aide-lanceur, #aide-panneau, [data-aide-onglet],
   [data-aide-vue], #aide-fil, #aide-champ, #aide-envoi, .aide-bulle.
   Renommer une de ces classes casse le panneau.

   Le panneau est en position fixed : il ne touche jamais la mise en page
   des pages de cours. Sur telephone il devient une feuille qui monte du bas
   — il n'est PAS desactive, c'est justement la que l'etudiant panique.
   ========================================================================== */

/* EN HAUT A DROITE, dans la barre de navigation elle-meme. aide.js l'ajoute
   a .topbar-inner : il y occupe sa propre place et ne peut donc rien
   recouvrir. Pose en calque flottant (position:fixed), il mordait le coin
   superieur droit de la carte de contenu des 1024 px de large. */
#aide-lanceur { flex:0 0 auto; order:10;
  display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  border-radius:999px; padding:8px 14px; font-family:var(--font); font-size:13px;
  font-weight:600; color:#fff; background:var(--grad);
  box-shadow:0 8px 24px -8px color-mix(in srgb, var(--violet) 70%, transparent);
  transition:transform var(--t), box-shadow var(--t); }
#aide-lanceur:hover { transform:translateY(-1px); box-shadow:0 12px 30px -8px color-mix(in srgb, var(--violet) 85%, transparent); }
#aide-lanceur:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
#aide-lanceur .pulse { width:8px; height:8px; border-radius:50%; background:#fff;
  animation:aide-pulse 2.4s ease-in-out infinite; }
@keyframes aide-pulse { 0%,100% { opacity:.45; transform:scale(.82); } 50% { opacity:1; transform:scale(1.15); } }
#aide-lanceur.flottant { position:fixed; right:18px; top:70px; z-index:90; }
/* opacite plutot que display:la barre ne doit pas se reorganiser
   quand le panneau s’ouvre. */
body.aide-ouverte #aide-lanceur { opacity:0; pointer-events:none; }

/* ATTENTION:--surface est un verre translucide (rgba en theme sombre), fait
   pour reposer sur le fond de la page. Un panneau flottant doit etre OPAQUE,
   sinon le cours se lit au travers. --bg-2 est opaque dans les deux themes. */
#aide-panneau { position:fixed; top:0; right:0; bottom:0; width:var(--aide-w); max-width:100vw;
  z-index:95; display:flex; flex-direction:column; background:var(--bg-2);
  border-left:1px solid var(--line-2); box-shadow:-24px 0 60px -24px rgba(0,0,0,.6);
  transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  font-size:14.5px; }
body.aide-ouverte #aide-panneau { transform:none; }
#aide-panneau[hidden] { display:none; }

.aide-tete { display:flex; align-items:center; gap:10px; padding:16px 18px;
  border-bottom:1px solid var(--line); flex:0 0 auto; }
.aide-tete h2 { margin:0; font-family:var(--display); font-size:16px; font-weight:600; }
.aide-tete .etat { font-size:11.5px; color:var(--txt-3); display:block; margin-top:2px; }
.aide-tete .etat b { color:var(--mint); font-weight:600; }
.aide-tete .fermer { margin-left:auto; background:var(--surface-2); color:var(--txt-2);
  border:1px solid var(--line); border-radius:var(--r-bloc, 9px); width:32px; height:32px; cursor:pointer;
  font-size:17px; line-height:1; font-family:var(--font); }
.aide-tete .fermer:hover { color:var(--txt); border-color:var(--line-2); }

.aide-onglets { display:flex; gap:6px; padding:12px 18px 0; flex:0 0 auto; }
.aide-onglets button { flex:1; background:none; border:0; border-bottom:2px solid transparent;
  padding:8px 4px 10px; cursor:pointer; font-family:var(--font); font-size:13.5px;
  font-weight:600; color:var(--txt-3); transition:color var(--t), border-color var(--t); }
.aide-onglets button[aria-selected="true"] { color:var(--accent-txt); border-color:var(--violet); }

.aide-corps { flex:1 1 auto; overflow-y:auto; padding:16px 18px; }
[data-aide-vue][hidden] { display:none; }

/* --- Vue « chercher dans le cours » : marche partout, sans reseau --------- */
#aide-recherche { width:100%; box-sizing:border-box; background:var(--surface-2);
  border:1px solid var(--line-2); border-radius:var(--r-bloc, 11px); padding:11px 14px;
  color:var(--txt); font-family:var(--font); font-size:14.5px; }
#aide-recherche:focus { outline:none; border-color:var(--violet); }
.aide-resultat { display:block; margin-top:10px; padding:11px 13px; border-radius:var(--r-bloc, 11px);
  border:1px solid var(--line); background:var(--surface-2); text-decoration:none;
  transition:border-color var(--t), transform var(--t); }
.aide-resultat:hover { border-color:var(--line-2); transform:translateX(3px); }
.aide-resultat .ou { display:block; font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--txt-3); margin-bottom:4px; }
.aide-resultat .quoi { display:block; color:var(--txt-2); font-size:13.5px; line-height:1.5; }
.aide-resultat mark { background:color-mix(in srgb, var(--violet) 30%, transparent);
  color:var(--txt); border-radius:3px; padding:0 2px; }
.aide-vide { color:var(--txt-3); font-size:13.5px; margin-top:14px; line-height:1.6; }

/* --- Vue « demander a Claude » ------------------------------------------- */
#aide-fil { display:flex; flex-direction:column; gap:12px; }
.aide-bulle { max-width:92%; padding:11px 14px; border-radius:var(--r-bloc, 14px); line-height:1.6;
  font-size:14px; white-space:pre-wrap; word-wrap:break-word; }
.aide-bulle.moi { align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; }
.aide-bulle.ia { align-self:flex-start; background:var(--surface-2); color:var(--txt-2);
  border:1px solid var(--line); border-bottom-left-radius:5px; }
.aide-bulle.ia b, .aide-bulle.ia strong { color:var(--txt); }
.aide-bulle.ia code { background:var(--surface-3); border-radius:4px; padding:1px 5px;
  font-family:var(--mono); font-size:12.5px; }
.aide-bulle.erreur { align-self:stretch; background:color-mix(in srgb, var(--orange) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--orange) 30%, transparent); color:var(--txt-2); font-size:13.5px; }
.aide-curseur::after { content:"\2588"; animation:aide-clign 1s steps(2) infinite; color:var(--violet); }
@keyframes aide-clign { 0%,50% { opacity:1; } 51%,100% { opacity:0; } }

.aide-suggestions { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.aide-suggestions button { background:var(--surface-2); border:1px solid var(--line);
  color:var(--txt-2); border-radius:999px; padding:7px 13px; font-size:12.5px;
  font-family:var(--font); cursor:pointer; text-align:left; }
.aide-suggestions button:hover { border-color:var(--violet); color:var(--txt); }

.aide-pied { flex:0 0 auto; border-top:1px solid var(--line); padding:12px 18px 14px; }
.aide-saisie { display:flex; gap:8px; align-items:flex-end; }
#aide-champ { flex:1; background:var(--surface-2); border:1px solid var(--line-2);
  border-radius:var(--r-bloc, 12px); padding:10px 13px; color:var(--txt); font-family:var(--font);
  font-size:14px; resize:none; max-height:120px; line-height:1.5; }
#aide-champ:focus { outline:none; border-color:var(--violet); }
#aide-envoi { flex:0 0 auto; border:0; border-radius:var(--r-bloc, 11px); width:40px; height:40px;
  cursor:pointer; background:var(--grad); color:#fff; font-size:16px; }
#aide-envoi:disabled { opacity:.4; cursor:not-allowed; }
.aide-mention { margin:9px 0 0; font-size:11px; color:var(--txt-3); line-height:1.5; }
.aide-mention a { color:var(--accent-txt); }

/* --- Telephone:le panneau d'aide N'EXISTE PAS. Ni lanceur, ni panneau, ni
   recherche, ni assistant. aide.js ne construit rien sous 701 px et detruit
   ce qui existe si la fenetre retrecit ; ces regles sont la ceinture.
   Un cours qu'on suit sur telephone se lit — Figma, lui, se travaille sur un
   ordinateur, et c'est la que l'aide a un sens. -------------------------- */
/* --- Le reflux:des que le panneau existe (> 700 px), il n'est JAMAIS un
   calque pose par-dessus le cours — c'est une vraie colonne. Le sommaire se
   replie sur ses pastilles, la zone centrale se recalcule entre les deux.
   On doit pouvoir lire le cours pendant qu'on interroge l'assistant : sinon
   autant fermer le panneau, et l'aide ne sert plus a rien.
   Entre 701 et 1099 px le panneau se retrecit pour laisser de la place au
   texte, plutot que de le recouvrir. ---------------------------------------- */
@media (max-width: 1099px) { :root { --aide-w: 320px; } }

@media (min-width:701px) {
  body { transition:padding-right .28s cubic-bezier(.4,0,.2,1); }
  body.aide-ouverte { padding-right:var(--aide-w); }
  /* La barre du haut est sticky:elle suit la boite de contenu du body,
     donc elle se retrecit toute seule. Rien a faire pour elle. */
}

/* Le repli du sommaire ne vaut que la ou le sommaire est une colonne:sous
   901 px il est deja empile au-dessus du cours (regle 27), le forcer a
   58 px le rendrait illisible. */
@media (min-width: 901px) {
  body.aide-ouverte .layout { grid-template-columns:58px 1fr; gap:26px; }
  body.aide-ouverte .sidebar h2 { opacity:0; height:0; margin:0; overflow:hidden; }
  body.aide-ouverte .toc-lbl { display:none; }
  body.aide-ouverte .toc a { justify-content:center; padding:9px 0; }
  .layout { transition:grid-template-columns .28s cubic-bezier(.4,0,.2,1), gap .28s; }
  .toc a { transition:padding var(--t); }
}

@media (max-width:700px) {
  #aide-lanceur, #aide-panneau { display:none !important; }
}

@media print { #aide-lanceur, #aide-panneau { display:none !important; } }
@media (prefers-reduced-motion:reduce) {
  #aide-panneau { transition:none; }
  #aide-lanceur .pulse { animation:none; }
}

/* ============================================================
   Contraste (27/09/2026, audit-contraste.js) : QCM au moteur a tirage.
   --txt-3 remonte a 4,5:1 minimum dans les deux themes (numeros de
   question, formats, indices, pied de page) ; --ok-txt / --ko-txt sont
   les couleurs du juste et du faux que lit exos.css (sans elles, il
   retombait sur des valeurs prevues pour le theme sombre).
   ============================================================ */
:root, :root[data-theme="dark"] { --txt-3: #9A94B0; --ok-txt: #5EE0A0; --ko-txt: #FF8A7A; }
:root[data-theme="light"] { --txt-3: #665F80; --ok-txt: #0A6E4A; --ko-txt: #B42318; }
.opt.correct .mark { color:var(--ok-txt); }
.opt.wrong .mark { color:var(--ko-txt); }
#scoreSub { color:var(--txt-2); }