/* ============================================================
   Polaris — Plateforme de révision MP★ · Sainte-Geneviève
   Identité visuelle « Polaris » : bleu nuit (#0b1d3a) + crème (#f7f6f2)
   + or (#c8a451). Titres Playfair Display, interface Source Sans 3.
   « Le repère des taupins dans la nuit des révisions. »
   ============================================================ */

/* ---------- Tokens ---------- */
:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.85rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.06rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  --text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  --text-2xl: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem; --radius-xl:1rem; --radius-full:9999px;
  --transition: 180ms cubic-bezier(.16,1,.3,1);

  /* Surfaces — crème Polaris (mode clair) */
  --color-bg:#f7f6f2;
  --color-surface:#fdfdfb;
  --color-surface-2:#ffffff;
  --color-surface-offset:#eeece4;
  --color-divider:#e3e0d6;
  --color-border:#d6d2c5;

  /* Texte — bleu nuit Polaris */
  --color-text:#0b1d3a;
  --color-text-muted:#5a6377;
  --color-text-faint:#6b7280;
  --color-text-inverse:#f7f6f2;

  /* Accent primaire — bleu nuit Polaris (clair) */
  --color-primary:#0b1d3a;
  --color-primary-hover:#15305c;
  --color-primary-soft:#e7ebf3;
  --color-primary-line:#b9c2d6;

  /* Or Polaris — accent secondaire chaud (médailles, étoiles, surlignages) */
  --color-gold:#c8a451;
  --color-gold-hover:#b08e3e;
  --color-gold-soft:#f4ecd8;
  --color-gold-line:#e0cf9f;

  /* Secondary — bleu profond pour théorèmes */
  --color-ink-blue:#1f4257;
  --color-ink-blue-soft:#e4ecef;
  --color-ink-blue-line:#b7cdd6;

  /* Semantic */
  --color-green:#2f6b3a; --color-green-soft:#e3eee0;
  --color-amber:#9a6312; --color-amber-soft:#f3e8d3;
  --color-violet:#5a3a82; --color-violet-soft:#ece3f3;

  --shadow-sm:0 1px 2px rgba(40,30,20,.06);
  --shadow-md:0 4px 14px rgba(40,30,20,.09);
  --shadow-lg:0 14px 40px rgba(40,30,20,.14);

  --font-body:"Source Sans 3", system-ui, sans-serif;
  --font-ui:"Source Sans 3", system-ui, sans-serif;
  --font-display:"Playfair Display", Georgia, serif;

  --sidebar-w: 300px;
  --header-h: 60px;
}

[data-theme="dark"] {
  /* Surfaces — nuit profonde Polaris */
  --color-bg:#0a1426;
  --color-surface:#0e1a30;
  --color-surface-2:#13223d;
  --color-surface-offset:#172a48;
  --color-divider:#22344f;
  --color-border:#2b3e5c;

  --color-text:#e8ecf4;
  --color-text-muted:#9aa6bd;
  --color-text-faint:#67738c;
  --color-text-inverse:#0a1426;

  /* En mode sombre, l'accent primaire devient l'OR Polaris */
  --color-primary:#c8a451;
  --color-primary-hover:#dcbb6b;
  --color-primary-soft:#241d10;
  --color-primary-line:#4d4226;

  --color-gold:#c8a451;
  --color-gold-hover:#dcbb6b;
  --color-gold-soft:#241d10;
  --color-gold-line:#4d4226;

  --color-ink-blue:#8fb8cc;
  --color-ink-blue-soft:#1b2a33;
  --color-ink-blue-line:#35505e;

  --color-green:#86c08c; --color-green-soft:#1c2a1d;
  --color-amber:#d6a44e; --color-amber-soft:#2e2515;
  --color-violet:#b395d8; --color-violet-soft:#251c33;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 14px 40px rgba(0,0,0,.5);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;scroll-behavior:auto;
  scroll-padding-top:calc(var(--header-h) + 1rem);
  /* Réserve en permanence la gouttière de la scrollbar : évite les sauts
     d'alignement horizontaux quand une barre de défilement apparaît /
     disparaît (changement d'onglet, contenu plus long, etc.). */
  scrollbar-gutter:stable;
}
body{
  min-height:100dvh;line-height:1.65;font-family:var(--font-body);
  font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);
  /* Évite tout scroll horizontal parasite sur mobile (éléments débordant, transforms). */
  overflow-x:hidden;
}
/* Safe-area iOS : le contenu ne passe pas sous les encoches / barres système. */
@supports (padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left,0);
    padding-right:env(safe-area-inset-right,0);
  }
  .app-header{padding-top:env(safe-area-inset-top,0)}
}
img,svg,canvas{display:block;max-width:100%}
button{cursor:pointer;background:none;border:none;color:inherit;font:inherit}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
ul[role=list]{list-style:none}
::selection{background:var(--color-primary-soft);color:var(--color-text)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
a,button,input,select{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}

/* ---------- Header ---------- */
/* perf v6.7 : le header est FIXE et visible en permanence => tout backdrop-filter
   ici a un coût GPU permanent (recomposition à chaque scroll). On rend le fond
   plus opaque (96 % au lieu de 88 %) et on réduit le blur à 6 px : visuellement
   quasi identique en mode clair et sombre, mais le GPU est moins sollicité. */
.app-header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:50;
  display:flex;align-items:center;gap:var(--space-3);
  padding:0 var(--space-4);
  background:color-mix(in srgb, var(--color-surface) 96%, transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border-bottom:1px solid var(--color-border);
}
.app-header .brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text)}
.app-header .brand:hover{text-decoration:none}
.app-header .brand .logo{display:inline-flex;align-items:center;justify-content:center}
/* Logo Polaris : étoile or transparente, AUCUN médaillon/disque/carré/fond derrière */
.app-header .brand .logo img{display:block;width:32px;height:32px;border:none;border-radius:0;background:none;box-shadow:none}
.app-header .brand small{font-family:var(--font-ui);font-weight:500;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);display:block;line-height:1}
.app-header .spacer{flex:1}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:var(--radius-md);color:var(--color-text-muted);
  border:1px solid transparent;
}
.icon-btn:hover{background:var(--color-surface-offset);color:var(--color-text)}
.menu-toggle{display:none}

/* ---- Search box in header (pilule élargie, centrée) ---- */
.search-trigger{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);
  background:var(--color-surface-offset);
  border:1px solid var(--color-border);
  border-radius:999px;                    /* pilule pleine */
  padding:.5rem 1rem .5rem .9rem;
  min-width:280px;max-width:520px;flex:0 1 480px;
  cursor:text;                            /* signal input */
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
  box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.search-trigger:hover{
  border-color:var(--color-primary-line);
  background:var(--color-surface);
}
.search-trigger:focus-visible,
.search-trigger:focus{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.search-trigger:active{transform:translateY(1px)}
.search-trigger .search-trigger__icon{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;color:var(--color-text-faint);
  width:26px;height:26px;border-radius:50%;
  transition:color .18s ease, background .22s ease, transform .18s ease;
}
.search-trigger:hover .search-trigger__icon,
.search-trigger:focus .search-trigger__icon{color:var(--color-primary);background:color-mix(in srgb, var(--color-primary) 12%, transparent)}
.search-trigger .label{
  flex:1 1 auto;text-align:left;
  color:var(--color-text-muted);
  font-weight:500;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Reflet lumineux qui balaie le trigger de gauche à droite au hover */
.search-trigger .search-trigger__shine{
  position:absolute; top:0; bottom:0; left:-40%;
  width:35%; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--color-primary) 18%, transparent) 45%, color-mix(in srgb, var(--color-primary) 6%, transparent) 55%, transparent 100%);
  opacity:0; transition:opacity .25s ease;
}
.search-trigger{position:relative; overflow:hidden}
/* [FIX 2026-07-03 soir] Anim shine sur bouton recherche : jouer UNE SEULE
   fois par survol, pas en boucle infinie (retour user : « l'animation est
   magnifique mais juste une fois »). On enlève `infinite`, on ajoute `both`
   pour figer l'état final (shine sorti à droite = invisible). */
.search-trigger:hover .search-trigger__shine{opacity:1; animation:search-shine 1.4s cubic-bezier(.16,1,.3,1) both}
@keyframes search-shine{
  0%   { transform:translateX(0); }
  100% { transform:translateX(320%); }
}
@media (prefers-reduced-motion:reduce){
  .search-trigger:hover .search-trigger__shine{animation:none; opacity:0}
}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100dvh;padding-top:var(--header-h)}
.sidebar{
  position:fixed;top:var(--header-h);bottom:0;left:0;width:var(--sidebar-w);
  overflow-y:auto;border-right:1px solid var(--color-border);
  background:var(--color-surface);padding:var(--space-4) var(--space-3) var(--space-16);
  z-index:40;font-family:var(--font-ui);
  /* [v84] Masque le chrome de scrollbar de la sidebar dans TOUS ses états
     (rail, hover-expand, étendu) — c'est le même élément scrollable (.sidebar,
     overflow-y:auto conservé) → défilement molette/trackpad/tactile/clavier
     intact, seul l'indicateur visuel disparaît. N'affecte PAS le scroll de la
     page principale (html/body, cf. scrollbar-gutter:stable plus haut). */
  scrollbar-width:none;          /* Firefox */
  -ms-overflow-style:none;       /* IE / anciens Edge */
}
/* WebKit / Blink (Chrome, Safari, Edge Chromium) : scrollbar de largeur nulle. */
.sidebar::-webkit-scrollbar{width:0;height:0;display:none}
.main{flex:1;margin-left:var(--sidebar-w);min-width:0}
/* [FIX largeur cours 2026-07-05] La colonne de cours était plafonnée à 880px :
   sur un grand écran, les cartes (Définition/Théorème) et surtout les formules
   MathJax display n'utilisaient qu'une fraction de la largeur disponible → gros
   vide à droite et formules qui « wrappaient » / s'étiraient verticalement.
   On élargit nettement la colonne (1200px). La lisibilité de la PROSE reste
   bornée séparément par `.content p/li{max-width:…ch}` ; les blocs math display
   (max-width:100%) profitent, eux, de toute la largeur de carte. */
.content{max-width:1200px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-24)}

/* Sidebar nav */
/* Sélecteur de matière (portail multi-matières) */
.subject-select{margin-bottom:var(--space-3)}
/* Libellé discret au-dessus des sélecteurs (Matière / Niveau) — clarifie le rôle du contrôle. */
.nav-field-label{font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-faint);font-weight:700;padding:0 var(--space-1) .3rem}
/* Conteneur du select + pastille colorée de la matière active. */
.subject-combo{position:relative;display:block}
.subject-combo-dot{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:.72rem;height:.72rem;border-radius:4px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;transition:background .2s}
.subject-dropdown{width:100%;font-family:var(--font-ui);font-size:.85rem;font-weight:600;color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem 2rem .6rem 1.9rem;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .7rem center;transition:border-color .15s,box-shadow .15s}
.subject-dropdown:hover{border-color:var(--color-primary-line);box-shadow:0 1px 4px rgba(0,0,0,.05)}
.subject-dropdown:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
/* Cartes de matière du HUB : la description reste lisible, l'accent vient de la teinte inline */
.subject-card h3{margin-top:.2rem}
.year-select{margin-bottom:var(--space-2)}
.year-toggle{display:flex;gap:.2rem;padding:.28rem;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-full)}
.year-btn{flex:1;padding:.42rem .6rem;border-radius:var(--radius-full);font-family:var(--font-ui);font-size:.78rem;font-weight:600;color:var(--color-text-muted);background:transparent;border:none;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.year-btn:hover:not(.active){color:var(--color-text);background:var(--color-surface-2)}
.year-btn.active{background:var(--color-primary);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18)}
.year-toggle-3{gap:.15rem;padding:.26rem}
.year-toggle-3 .year-btn{padding:.4rem .3rem;font-size:.72rem;line-height:1.05;letter-spacing:-.01em;text-align:center}
.nav-section-title{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;padding:var(--space-3) var(--space-2) var(--space-1)}
.nav-link{
  display:flex;align-items:center;gap:var(--space-2);
  padding:.45rem .6rem;border-radius:var(--radius-md);
  font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.3;
}
.nav-link:hover{background:var(--color-surface-offset);color:var(--color-text);text-decoration:none}
.nav-link.active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:600}
.nav-link .num{font-family:var(--font-ui);font-size:.7rem;font-weight:600;min-width:1.5em;color:var(--color-text-faint)}
.nav-link.active .num{color:var(--color-primary)}
.nav-link .star{margin-left:auto;color:var(--color-amber)}
/* Badge « BJ » : marque les contenus propres à Ginette (Sainte-Geneviève). */
.nav-badge{
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:.03em;
  line-height:1;padding:.2em .45em;border-radius:var(--radius-sm,6px);
  background:var(--color-primary-soft);color:var(--color-primary);
  border:1px solid var(--color-primary-line);
  text-transform:uppercase;
}
.nav-link:hover .nav-badge,.nav-link.active .nav-badge{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.nav-divider{height:1px;background:var(--color-divider);margin:var(--space-3) var(--space-2)}
/* [REFONTE 2026-07-04 v6 sidebar] Footer d'icônes discret en bas de la sidebar.
   4 boutons icônes (Outils, Paramètres, Nouveautés, Aide), tooltips au survol.
   Séparé du reste par un liseré fin ; ne pousse pas en position absolue pour
   ne pas se superposer aux longs chapitres dans une sidebar scrollable. */
.nav-footer{display:flex;gap:.25rem;justify-content:space-around;align-items:center;padding:.75rem var(--space-2) .5rem;margin-top:var(--space-4);border-top:1px solid var(--color-divider)}
.nav-footer-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--color-text-faint);transition:background .15s,color .15s,transform .15s;text-decoration:none}
.nav-footer-btn:hover{background:var(--color-surface-offset);color:var(--color-text);transform:none}
.nav-footer-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.nav-footer-btn.active{background:var(--color-primary-soft);color:var(--color-primary)}
/* [v6.1] Pastille rouge "non lu" sur l'icône Nouveautés (cloche). Style Slack :
   petit disque rouge en top-right, halo qui pulse doucement pour attirer l’œil
   sans clignoter agressivement. */
.nav-footer-btn.has-news{position:relative}
.nav-footer-btn.has-news::after{content:"";position:absolute;top:5px;right:5px;width:8px;height:8px;border-radius:50%;background:#e74c3c;box-shadow:0 0 0 2px var(--color-surface),0 0 0 3px rgba(231,76,60,.15);animation:polaris-news-pulse 2.2s ease-in-out infinite}
@keyframes polaris-news-pulse{0%,100%{box-shadow:0 0 0 2px var(--color-surface),0 0 0 3px rgba(231,76,60,.15)}50%{box-shadow:0 0 0 2px var(--color-surface),0 0 0 6px rgba(231,76,60,.28)}}
@media (prefers-reduced-motion:reduce){.nav-footer-btn.has-news::after{animation:none}}

/* [v6.2] Sidebar rétractable : 3 états en cycle (expanded / rail / hidden).
   Le mode s'applique via une classe sur <html> (sidebar-expanded/rail/hidden).
   Bouton flèche flottant collé au bord droit de la sidebar (ou bord gauche de
   l'écran quand cachée). Raccourci clavier : Cmd/Ctrl+B. */
.sidebar,.main,.sidebar-collapse-btn{transition:width .28s cubic-bezier(.16,1,.3,1),margin-left .28s cubic-bezier(.16,1,.3,1),transform .28s cubic-bezier(.16,1,.3,1),left .28s cubic-bezier(.16,1,.3,1)}

/* Bouton flèche toggle : caché par défaut sur mobile (< 1024px) car le menu
   hamburger s'en occupe déjà. Visible en desktop uniquement. */
.sidebar-collapse-btn{display:none;position:fixed;top:calc(var(--header-h) + 12px);width:22px;height:44px;border-radius:0 8px 8px 0;border:1px solid var(--color-border);border-left:none;background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;z-index:41;padding:0;align-items:center;justify-content:center;box-shadow:2px 2px 6px rgba(0,0,0,.06)}
.sidebar-collapse-btn:hover{background:var(--color-surface-offset);color:var(--color-text)}
.sidebar-collapse-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}
.sidebar-collapse-btn svg{transition:transform .28s cubic-bezier(.16,1,.3,1)}
@media (min-width:1025px){.sidebar-collapse-btn{display:inline-flex}}

/* État rail : sidebar compacte, on cache tout ce qui contient du texte long.
   Les icônes du footer restent visibles. La largeur --sidebar-w est définie
   plus bas (bloc [v81], 56px) : l'ancienne règle `--sidebar-w:64px` était morte
   (surchargée dans le même @media) et a été retirée. */
@media (min-width:1025px){
  /* [v84] Rail compact non survolé : aucun défilement ni impression de scroll.
     Les icônes qui dépassent la hauteur sont clipées (overflow-y:hidden).
     L'état hover (bloc suivant) rétablit overflow-y:auto par spécificité +
     ordre source : `html.sidebar-rail .sidebar:hover` (0,3,1) prime ici. */
  html.sidebar-rail .sidebar{padding:var(--space-3) var(--space-1) var(--space-8);overflow-x:hidden;overflow-y:hidden}
  html.sidebar-rail .subject-select,html.sidebar-rail .year-select,html.sidebar-rail .nav-section-title,html.sidebar-rail .nav-divider,html.sidebar-rail .nav-group,html.sidebar-rail .nav-link{display:none}
  html.sidebar-rail .nav-footer{flex-direction:column;gap:.4rem;padding:.6rem .2rem;border-top:1px solid var(--color-divider);margin-top:var(--space-3)}
  html.sidebar-rail .nav-footer-btn{width:36px;height:36px}
  html.sidebar-rail .sidebar-collapse-btn{left:calc(var(--sidebar-w))}
  html.sidebar-rail .sidebar-collapse-btn svg{transform:rotate(180deg)}
}

/* [V46 2026-07-07 sidebar hover-expand] En mode rail, quand la souris survole
   la sidebar, on l'agrandit visuellement à 300px pour révéler le menu complet
   sans changer d'état persistant. Overlay pur (position:fixed) : le contenu
   principal ne bouge pas, ça évite tout reflow. Fonctionne aussi en focus
   clavier pour l'accessibilité. Se désactive si l'utilisateur a demandé
   prefers-reduced-motion, et n'active PAS l'hover-expand quand un drag est
   en cours pour ne pas piéger le pointeur. */
@media (min-width:1025px){
  html.sidebar-rail .sidebar:hover,
  html.sidebar-rail .sidebar:focus-within{
    width:300px;
    box-shadow:var(--shadow-lg);
    z-index:41;
    padding:var(--space-4) var(--space-3) var(--space-16);
    overflow-x:visible;
    overflow-y:auto;
  }
  /* Réafficher tout ce que le mode rail masquait, uniquement au hover.
     ⚠️ Les blocs (div) prennent display:revert (= block, l'UA default).
     Les liens .nav-link sont des <a> → revert donnerait display:inline
     et casserait la mise en page (items côte à côte au lieu d'être empilés).
     On force donc display:flex pour restaurer leur layout normal. */
  html.sidebar-rail .sidebar:hover .subject-select,
  html.sidebar-rail .sidebar:hover .year-select,
  html.sidebar-rail .sidebar:hover .nav-section-title,
  html.sidebar-rail .sidebar:hover .nav-divider,
  html.sidebar-rail .sidebar:hover .nav-group,
  html.sidebar-rail .sidebar:focus-within .subject-select,
  html.sidebar-rail .sidebar:focus-within .year-select,
  html.sidebar-rail .sidebar:focus-within .nav-section-title,
  html.sidebar-rail .sidebar:focus-within .nav-divider,
  html.sidebar-rail .sidebar:focus-within .nav-group{display:revert}
  html.sidebar-rail .sidebar:hover .nav-link,
  html.sidebar-rail .sidebar:focus-within .nav-link{display:flex}
  /* Déplacer le bouton toggle ET le slider de resize avec la sidebar
     étendue au hover (sinon ils restent collés à 64px et se retrouvent au
     milieu du contenu quand la sidebar passe à 300px). Le slider vertical
     traversait notamment la section "Choisis une matière".
     ⚠️ .sidebar-collapse-btn et .sidebar-slider sont injectés en enfants
     directs de <body> par le JS, PAS dans .layout à côté de .sidebar.
     Le combinateur ~ ne matche donc pas. On cible via body:has() qui
     détecte le hover global. */
  html.sidebar-rail body:has(.sidebar:hover) .sidebar-collapse-btn,
  html.sidebar-rail body:has(.sidebar:focus-within) .sidebar-collapse-btn{left:300px}
  html.sidebar-rail body:has(.sidebar:hover) .sidebar-slider,
  html.sidebar-rail body:has(.sidebar:focus-within) .sidebar-slider{left:297px}
  /* Cacher les carrés rail pendant l'hover pour éviter le double affichage. */
  html.sidebar-rail .sidebar:hover .rail-items,
  html.sidebar-rail .sidebar:focus-within .rail-items{display:none}
  /* Restaurer la nav-footer classique. */
  html.sidebar-rail .sidebar:hover .nav-footer,
  html.sidebar-rail .sidebar:focus-within .nav-footer{
    display:flex;
    flex-direction:row;
  }
  /* Transition douce sur la largeur uniquement (pas sur le contenu). */
  html.sidebar-rail .sidebar{transition:width .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease}
  /* Pas d'hover-expand pendant un drag actif du slider (évite l'effet de piège). */
  html.sidebar-resizing .sidebar:hover,
  html.sidebar-resizing .sidebar:focus-within{width:var(--sidebar-w)}
}
@media (prefers-reduced-motion:reduce){
  html.sidebar-rail .sidebar{transition:none}
}

/* État hidden : sidebar complètement rentrée à gauche, contenu prend toute la
   largeur. Le bouton flèche vient se coller au bord gauche de l'écran. */
@media (min-width:1025px){
  html.sidebar-hidden .sidebar{transform:translateX(-100%);pointer-events:none}
  html.sidebar-hidden .main{margin-left:0}
  html.sidebar-hidden .sidebar-collapse-btn{left:0}
  html.sidebar-hidden .sidebar-collapse-btn svg{transform:rotate(180deg)}
}

/* Position par défaut (expanded) du bouton. */
@media (min-width:1025px){
  html.sidebar-expanded .sidebar-collapse-btn{left:calc(var(--sidebar-w))}
}

/* [V34 2026-07-06 sidebar slider draggable + carrés rail] Poignée verticale
   collée au bord droit de la sidebar. Drag pour redimensionner (snap sur
   large/compact/fermé au relâchement). Double-clic pour cycler les modes.
   Coexiste avec le bouton flèche legacy (raccourci clavier Cmd/Ctrl+B). */
.sidebar-slider{display:none;position:fixed;top:var(--header-h);bottom:0;width:6px;cursor:col-resize;z-index:42;background:transparent;transition:background .18s,left .28s cubic-bezier(.16,1,.3,1);touch-action:none}
.sidebar-slider::before{content:"";position:absolute;left:2px;top:50%;transform:translateY(-50%);width:2px;height:44px;border-radius:2px;background:var(--color-border);transition:background .18s,height .18s,width .18s}
.sidebar-slider:hover::before,.sidebar-slider.dragging::before{background:var(--color-primary);width:3px;height:64px}
.sidebar-slider:hover{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-primary) 12%,transparent))}
.sidebar-slider.dragging{background:linear-gradient(to right,transparent,color-mix(in srgb,var(--color-primary) 20%,transparent))}
@media (min-width:1025px){.sidebar-slider{display:block;left:calc(var(--sidebar-w) - 3px)}}
html.sidebar-hidden .sidebar-slider{left:0}
html.sidebar-resizing .sidebar,html.sidebar-resizing .main,html.sidebar-resizing .sidebar-slider,html.sidebar-resizing .sidebar-collapse-btn{transition:none !important}
html.sidebar-resizing{cursor:col-resize;user-select:none}
/* Pendant le drag on débrille la sidebar quand la largeur passe sous le seuil hidden,
   sans casser le layout : on masque son contenu mais on garde la place. */
html.sidebar-drag-hidden .sidebar{opacity:.25;pointer-events:none}

/* [v78 2026-07-10 sidebar polish] Refonte visuelle du rail collapsé.
   Objectifs : plus premium, plus dynamique, plus lisible.
   - Fond rail : dégradé subtil surface → surface-offset avec accent latéral
   - Pastilles : relief (highlight interne + ombre douce colorée), animation smooth
   - Séparateurs : trait dégradé fondu au centre
   - Hover : scale + halo coloré + micro translate
   - Active : anneau lumineux avec pulse discret
   - Expanded (hover-expand) : ombre portée plus généreuse, glow latéral primary */

.rail-items{
  display:none;
  flex-direction:column;
  gap:.5rem;
  padding:.65rem .2rem;
  align-items:center;
  position:relative;
}
/* Accent lumineux vertical (gauche) qui suit le rail en mode réduit — signature Polaris. */
.rail-items::before{
  content:"";
  position:absolute;
  left:2px;
  top:.5rem;
  bottom:.5rem;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-primary) 35%, transparent) 20%,
    color-mix(in srgb, var(--color-primary) 55%, transparent) 50%,
    color-mix(in srgb, var(--color-primary) 35%, transparent) 80%,
    transparent 100%);
  opacity:.6;
  pointer-events:none;
}

.rail-item{
  display:none;
  position:relative;
  width:38px;
  height:38px;
  border-radius:11px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rail-bg, var(--color-primary)) 88%, white 12%) 0%,
      var(--rail-bg, var(--color-primary)) 60%,
      color-mix(in srgb, var(--rail-bg, var(--color-primary)) 82%, black 18%) 100%);
  border:1px solid color-mix(in srgb, var(--rail-bg, var(--color-primary)) 60%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 15%, transparent),
    0 1px 2px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 25%, transparent),
    0 2px 6px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 12%, transparent);
  cursor:pointer;
  transition:
    transform .22s cubic-bezier(.16,1,.3,1),
    box-shadow .22s cubic-bezier(.16,1,.3,1),
    filter .18s ease,
    border-radius .22s cubic-bezier(.16,1,.3,1);
  text-decoration:none;
  color:#fff;
  align-items:center;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  overflow:visible;
}
/* Halo au survol : la pastille prend de l'air, s'agrandit légèrement, glow coloré. */
.rail-item:hover{
  transform:translateX(1px) scale(1.08);
  border-radius:13px;
  filter:brightness(1.1) saturate(1.1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 12%, transparent),
    0 2px 4px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 35%, transparent),
    0 6px 16px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 40%, transparent),
    0 0 0 3px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 12%, transparent);
  color:#fff;
  text-decoration:none;
  z-index:2;
}
.rail-item:active{
  transform:translateX(1px) scale(1.03);
  transition-duration:.08s;
}
.rail-item:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--color-primary),
    0 4px 12px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
/* État actif : anneau blanc net + halo coloré + petit dot indicateur à gauche. */
.rail-item.active{
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 15%, transparent),
    0 3px 10px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 50%, transparent),
    0 0 0 3px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 20%, transparent);
}
.rail-item.active::after{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  width:3px;
  height:18px;
  border-radius:2px;
  background:var(--rail-bg, var(--color-primary));
  transform:translateY(-50%);
  box-shadow:0 0 6px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 60%, transparent);
}
.rail-item svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  filter:drop-shadow(0 1px 1px color-mix(in srgb, black 25%, transparent));
}
.rail-item .rail-glyph{
  font-size:.82rem;
  font-weight:800;
  text-shadow:0 1px 1px color-mix(in srgb, black 30%, transparent);
}

/* Séparateur : trait dégradé fondu — plus élégant qu'un trait plein. */
.rail-sep{
  width:26px;
  height:1px;
  background:linear-gradient(90deg,
    transparent 0%,
    var(--color-divider) 30%,
    color-mix(in srgb, var(--color-text-muted) 45%, transparent) 50%,
    var(--color-divider) 70%,
    transparent 100%);
  margin:.35rem 0;
  border:none;
}

@media (min-width:1025px){
  html.sidebar-rail .rail-items{display:flex}
  html.sidebar-rail .rail-item{display:flex}
  html.sidebar-rail .nav-footer{display:none}

  /* Le rail lui-même : fond travaillé (dégradé subtil + accent lumineux droit). */
  html.sidebar-rail .sidebar{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)) 0%,
        var(--color-surface) 30%,
        var(--color-surface) 70%,
        color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)) 100%);
    border-right:1px solid color-mix(in srgb, var(--color-primary) 10%, var(--color-border));
  }
}

/* Hover-expand : ombre plus généreuse, léger glow primary sur le bord droit. */
@media (min-width:1025px){
  html.sidebar-rail .sidebar:hover,
  html.sidebar-rail .sidebar:focus-within{
    box-shadow:
      0 20px 40px -12px color-mix(in srgb, var(--color-primary) 25%, transparent),
      0 8px 20px -8px rgba(0,0,0,.15),
      2px 0 0 color-mix(in srgb, var(--color-primary) 15%, transparent);
  }
}

/* Animation d'apparition séquentielle des pastilles quand on entre en mode rail. */
@media (min-width:1025px) and (prefers-reduced-motion:no-preference){
  html.sidebar-rail .rail-item{
    animation:railPop .32s cubic-bezier(.16,1,.3,1) both;
  }
  html.sidebar-rail .rail-item:nth-child(1){animation-delay:.02s}
  html.sidebar-rail .rail-item:nth-child(2){animation-delay:.04s}
  html.sidebar-rail .rail-item:nth-child(3){animation-delay:.06s}
  html.sidebar-rail .rail-item:nth-child(4){animation-delay:.08s}
  html.sidebar-rail .rail-item:nth-child(5){animation-delay:.10s}
  html.sidebar-rail .rail-item:nth-child(6){animation-delay:.12s}
  html.sidebar-rail .rail-item:nth-child(7){animation-delay:.14s}
  html.sidebar-rail .rail-item:nth-child(n+8){animation-delay:.16s}
  @keyframes railPop{
    from{opacity:0;transform:translateX(-6px) scale(.8)}
    to{opacity:1;transform:translateX(0) scale(1)}
  }
}

/* Dark mode : ajuster le fond du rail (accent plus discret sur fond sombre). */
html.dark.sidebar-rail .sidebar{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) 0%,
      var(--color-surface) 30%,
      var(--color-surface) 70%,
      color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)) 100%);
}
html.dark .rail-items::before{opacity:.4}



/* [v79 2026-07-10 qa-bar] Bandeau « Accès rapide » minimaliste.
   Miroir 1:1 des carrés du rail : mêmes tailles, mêmes couleurs, mêmes
   séparateurs (traits verticaux). Aucun label affiché en permanence — le
   libellé apparaît en overlay au hover, comme un tooltip design.
   Objectif : cohérence visuelle avec le rail sans dupliquer la nav du dessous.

   Layout :
   - Ligne horizontale, wrap si nécessaire (grid auto-fit).
   - Chaque item = pastille 38×38 EXACTEMENT identique aux .rail-item.
   - Séparateurs = traits verticaux fins entre les groupes.
   - Pas de fond de carte, pas de bloc lourd. Juste l'essentiel. */

.qa-bar{
  margin:var(--space-2) 0 var(--space-3);
  padding:var(--space-2) var(--space-1) var(--space-3);
  border-bottom:1px solid color-mix(in srgb, var(--color-text-muted) 12%, transparent);
}
.qa-bar-title{
  font-family:var(--font-ui);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin:0 0 .55rem var(--space-1);
  opacity:.72;
}

/* Grille auto-fit : les pastilles s'alignent comme dans le rail, wrap si dépasse.
   38px + gap 8px, min-content pour respecter les séparateurs verticaux. */
.qa-bar-row{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  align-items:center;
  padding:0 var(--space-1);
}

/* Séparateur : trait vertical fin (aligné avec les pastilles), pas horizontal. */
.qa-bar-sep{
  width:1px;
  height:24px;
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-text-muted) 40%, transparent) 50%,
    transparent 100%);
  margin:0 .2rem;
  flex-shrink:0;
}

/* Pastille : COPIE EXACTE du style .rail-item pour cohérence 1:1. */
.qa-bar-item{
  position:relative;
  width:38px;
  height:38px;
  border-radius:11px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--qa-bg, var(--color-primary)) 88%, white 12%) 0%,
      var(--qa-bg, var(--color-primary)) 60%,
      color-mix(in srgb, var(--qa-bg, var(--color-primary)) 82%, black 18%) 100%);
  border:1px solid color-mix(in srgb, var(--qa-bg, var(--color-primary)) 60%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 15%, transparent),
    0 1px 2px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 25%, transparent),
    0 2px 6px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 12%, transparent);
  cursor:pointer;
  transition:
    transform .22s cubic-bezier(.16,1,.3,1),
    box-shadow .22s cubic-bezier(.16,1,.3,1),
    filter .18s ease,
    border-radius .22s cubic-bezier(.16,1,.3,1);
  text-decoration:none;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-ui);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  flex-shrink:0;
}
.qa-bar-item:hover{
  transform:translateY(-2px) scale(1.06);
  border-radius:13px;
  filter:brightness(1.1) saturate(1.1);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 12%, transparent),
    0 4px 8px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 35%, transparent),
    0 8px 16px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 30%, transparent),
    0 0 0 3px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 12%, transparent);
  color:#fff;
  text-decoration:none;
  z-index:5;
}
.qa-bar-item:active{
  transform:translateY(-1px) scale(1.02);
  transition-duration:.08s;
}
.qa-bar-item:focus-visible{
  outline:none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
    0 0 0 2px var(--color-surface),
    0 0 0 4px var(--qa-bg, var(--color-primary)),
    0 4px 12px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 30%, transparent);
}
.qa-bar-item.active{
  box-shadow:
    inset 0 0 0 2px #fff,
    inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
    inset 0 -1px 0 color-mix(in srgb, black 15%, transparent),
    0 3px 10px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 50%, transparent),
    0 0 0 3px color-mix(in srgb, var(--qa-bg, var(--color-primary)) 20%, transparent);
}
.qa-bar-item svg{
  width:17px;
  height:17px;
  stroke:currentColor;
  filter:drop-shadow(0 1px 1px color-mix(in srgb, black 25%, transparent));
}
.qa-bar-glyph{
  font-size:.82rem;
  font-weight:800;
  text-shadow:0 1px 1px color-mix(in srgb, black 30%, transparent);
}

/* Badge Nouveautés non lues : point rouge en haut à droite. */
.qa-bar-item.has-news::before{
  content:"";
  position:absolute;
  top:-2px;
  right:-2px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e74c3c;
  border:2px solid var(--color-surface);
  box-shadow:0 0 6px rgba(231,76,60,.55);
  z-index:2;
}

/* Label overlay au hover : petit tag flottant sous la pastille avec le libellé.
   Design "chip flottant" — n'occupe pas d'espace, ne pousse rien. */
.qa-bar-item::after{
  content:attr(aria-label);
  position:absolute;
  top:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%) translateY(-4px);
  padding:.28rem .55rem;
  border-radius:6px;
  background:color-mix(in srgb, var(--color-text) 92%, transparent);
  color:var(--color-surface);
  font-family:var(--font-ui);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:10;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.qa-bar-item::before:not(.has-news .qa-bar-item::before){display:none}
.qa-bar-item:hover::after,
.qa-bar-item:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
  transition-delay:.15s;
}

/* MASQUAGE en mode rail collapsé (le rail lui-même joue ce rôle).
   Réapparition automatique au hover-expand. */
@media (min-width:1025px){
  html.sidebar-rail .sidebar .qa-bar{display:none}
  html.sidebar-rail .sidebar:hover .qa-bar,
  html.sidebar-rail .sidebar:focus-within .qa-bar{display:block}
}

/* Dark mode : ajuster le tooltip pour rester lisible. */
html.dark .qa-bar-item::after{
  background:color-mix(in srgb, var(--color-text) 88%, transparent);
  color:var(--color-surface);
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
html.dark .qa-bar-sep{
  background:linear-gradient(180deg,
    transparent 0%,
    color-mix(in srgb, var(--color-text-muted) 30%, transparent) 50%,
    transparent 100%);
}

/* Reduced motion. */
@media (prefers-reduced-motion:reduce){
  .qa-bar-item{transition:none}
  .qa-bar-item:hover{transform:none}
  .qa-bar-item::after{transition:none}
}

/* Sur écrans étroits (mobile drawer), la bande reste identique mais on augmente
   légèrement le padding pour aération. */
@media (max-width:640px){
  .qa-bar{padding-bottom:var(--space-2)}
  .qa-bar-row{gap:.5rem}
}

/* ============================================================
   [v80 2026-07-10] Rail « aperçu miniature »
   Remplace la pile plate de pastilles matières par un mini-résumé
   structuré : badge matière active + sections skeleton (Étudier / Suivi /
   Chapitres) avec micro-titres gris et petits tirets/barres colorés.
   Le tout se fond en fade-out quand la sidebar se déploie au hover, la
   vraie nav prend le relais → continuité visuelle, zéro surprise.
   ============================================================ */
.rail-preview{
  display:none;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:.4rem 0 3.5rem;
  width:100%;
  animation:railPreviewIn .28s cubic-bezier(.16,1,.3,1) both;
  opacity:1;
  transition:opacity .18s ease;
}
html.sidebar-rail .rail-preview{display:flex}
html.sidebar-rail .sidebar:hover .rail-preview,
html.sidebar-rail .sidebar:focus-within .rail-preview{opacity:0;pointer-events:none;transition:opacity .12s ease}

@keyframes railPreviewIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:none}
}

/* ---- Badge matière active ---- */
.rail-preview-badge{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.28rem;
  margin-bottom:.35rem;
  animation:railPreviewFadeUp .35s ease both;
}
.rail-preview-badge-pill{
  --rp-color: var(--color-primary);
  width:44px;height:44px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,
              color-mix(in srgb, var(--rp-color) 92%, white 8%) 0%,
              var(--rp-color) 55%,
              color-mix(in srgb, var(--rp-color) 82%, black 18%) 100%);
  color:#fff;font-weight:800;font-size:1rem;letter-spacing:.03em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 3px 8px color-mix(in srgb, var(--rp-color) 32%, transparent),
    0 1px 2px rgba(0,0,0,.08);
  text-decoration:none;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .22s ease;
  position:relative;
  overflow:hidden;
}
.rail-preview-badge-pill::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 60%);
  opacity:.9;pointer-events:none;
}
.rail-preview-badge-pill:hover{
  transform:translateY(-2px) scale(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 8px 22px color-mix(in srgb, var(--rp-color) 45%, transparent),
    0 2px 4px rgba(0,0,0,.1);
  filter:brightness(1.05);
}
.rail-preview-badge-pill.hub{
  background:linear-gradient(180deg, #3a4a7a 0%, #1e2a52 100%);
}
.rail-preview-badge-glyph{
  position:relative;z-index:1;
  font-family:"Inter",system-ui,sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.rail-preview-badge-label{
  font-size:.5rem;
  letter-spacing:.14em;
  font-weight:700;
  color:color-mix(in srgb, var(--color-text) 55%, transparent);
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  font-family:"Inter",system-ui,sans-serif;
}

/* ---- Sections (Étudier / Suivi / Chapitres) ---- */
.rail-preview-sec{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.36rem;
  padding:0 .3rem;
  width:100%;
  animation:railPreviewFadeUp .4s ease both;
  animation-delay:.05s;
}
.rail-preview-sec-title{
  font-size:.48rem;
  letter-spacing:.16em;
  font-weight:700;
  color:color-mix(in srgb, var(--color-text) 42%, transparent);
  text-transform:uppercase;
  text-align:center;
  line-height:1;
  font-family:"Inter",system-ui,sans-serif;
  opacity:.85;
}
.rail-preview-dots{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.32rem;
  width:100%;
}
.rail-preview-dot{
  --rp-color: var(--color-muted, #6b7280);
  display:block;
  width:26px;height:6px;
  border-radius:3px;
  background:color-mix(in srgb, var(--rp-color) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 2px color-mix(in srgb, var(--rp-color) 30%, transparent);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, width .16s ease;
}
.rail-preview-dot:hover{
  background:var(--rp-color);
  transform:scale(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 3px 8px color-mix(in srgb, var(--rp-color) 45%, transparent);
}
.rail-preview-dot.long{width:32px}
.rail-preview-dot.short{width:20px}

/* ---- Séparateurs fins ---- */
.rail-preview-sep{
  width:32px;
  height:1px;
  background:linear-gradient(90deg,
              transparent,
              color-mix(in srgb, var(--color-primary) 22%, transparent),
              transparent);
  margin:.1rem 0;
  border-radius:999px;
}

/* ---- Section chapitres (skeleton reflet) ---- */
.rail-preview-sec.chapters .rail-preview-lines{
  display:flex;
  flex-direction:column;
  gap:.28rem;
  align-items:center;
  padding:0 .35rem;
}
.rail-preview-line{
  --rp-color: var(--color-primary);
  --rp-w: 32px;
  display:block;
  width:var(--rp-w);
  height:5px;
  border-radius:3px;
  background:color-mix(in srgb, var(--rp-color) 22%, var(--color-divider, #e5e7eb));
  transition:background .16s ease, transform .16s ease, width .18s ease, box-shadow .18s ease;
  cursor:pointer;
}
.rail-preview-line.ghost{cursor:default;opacity:.65}
.rail-preview-line:not(.ghost):hover{
  background:color-mix(in srgb, var(--rp-color) 58%, transparent);
  transform:translateX(1px) scale(1.02);
  box-shadow:0 2px 6px color-mix(in srgb, var(--rp-color) 30%, transparent);
}
.rail-preview-line.active{
  background:var(--rp-color);
  width:calc(var(--rp-w) + 4px);
  box-shadow:0 0 10px color-mix(in srgb, var(--rp-color) 40%, transparent);
}

/* ---- Footer outils (petits ronds en bas absolus) ---- */
.rail-preview-footer{
  position:absolute;
  bottom:.6rem;left:0;right:0;
  display:flex;
  justify-content:center;
  gap:.35rem;
  padding:0 .2rem;
  transition:opacity .12s ease;
}
html.sidebar-rail .sidebar:hover .rail-preview-footer,
html.sidebar-rail .sidebar:focus-within .rail-preview-footer{opacity:0;pointer-events:none}
.rail-preview-tool{
  --rp-color: #64748b;
  width:14px;height:14px;
  border-radius:50%;
  background:color-mix(in srgb, var(--rp-color) 78%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.08);
  transition:transform .16s ease, background .16s ease;
  position:relative;
  text-decoration:none;
}
.rail-preview-tool:hover{
  transform:scale(1.2);
  background:var(--rp-color);
}
.rail-preview-tool.has-news::after{
  content:"";
  position:absolute;top:-2px;right:-2px;
  width:6px;height:6px;
  border-radius:50%;
  background:#e74c3c;
  box-shadow:0 0 6px rgba(231,76,60,.6);
  animation:railPreviewPulse 2s ease-in-out infinite;
}
@keyframes railPreviewPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.3);opacity:.7}
}
@keyframes railPreviewFadeUp{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* Dark mode */
html.dark .rail-preview-badge-label,
html.dark .rail-preview-sec-title{color:color-mix(in srgb, var(--color-text) 60%, transparent)}
html.dark .rail-preview-line{background:color-mix(in srgb, var(--rp-color) 30%, rgba(255,255,255,.08))}

/* ============================================================
   /v80 rail preview
   ============================================================ */

/* ============================================================
   [v81 2026-07-10 sidebar polish] Rail compact — refonte sobre.
   Suite à l'audit prod (#/m/physique) : micro-labels ~8px illisibles,
   marqueurs de tirets incompréhensibles, cibles < 44px, hiérarchie
   faible, focus peu visible. Le rail compact affiche désormais par
   défaut les pastilles .rail-item (icônes/abréviations claires) — on
   les repense ici dans un registre académique blanc/ivoire, SANS
   claymorphism. Overrides placés en fin de section rail : spécificité
   >= aux règles d'origine ET postérieurs → priment sans les éditer.
   N'affecte PAS le bandeau quick-access (.qa-bar-*), ni les états
   étendu / caché de la sidebar.
   ============================================================ */
@media (min-width:1025px){
  /* Rail légèrement plus respirant, plafonné à 56px. */
  html.sidebar-rail{--sidebar-w:56px}

  /* Surface ivoire nette : plus de dégradé teinté, fine bordure + ombre discrète. */
  html.sidebar-rail .sidebar{
    background:var(--color-surface);
    border-right:1px solid var(--color-border);
    box-shadow:1px 0 0 rgba(40,30,20,.03);
    padding:var(--space-3) 6px var(--space-8);
  }

  html.sidebar-rail .rail-items{gap:.4rem;padding:.5rem 0}
  /* Retire l'accent vertical lumineux (bruit visuel non académique). */
  html.sidebar-rail .rail-items::before{display:none}

  /* Pastille sobre : cible 44px, fond ivoire, la couleur matière devient
     l'accent (icône/glyphe + état actif) au lieu d'un pavé glossy plein. */
  html.sidebar-rail .rail-item{
    width:44px;height:44px;border-radius:12px;
    background:var(--color-surface-2);
    border:1px solid var(--color-border);
    box-shadow:none;
    filter:none;
    color:var(--rail-bg, var(--color-primary));
    transition:background .16s ease,border-color .16s ease,color .16s ease;
  }
  html.sidebar-rail .rail-item svg{
    width:20px;height:20px;stroke:currentColor;filter:none;
  }
  html.sidebar-rail .rail-item .rail-glyph{
    font-size:.95rem;font-weight:700;text-shadow:none;color:inherit;
  }
  html.sidebar-rail .rail-item:hover{
    transform:none;filter:none;border-radius:12px;
    background:var(--color-surface-offset);
    border-color:color-mix(in srgb, var(--rail-bg, var(--color-primary)) 40%, var(--color-border));
    box-shadow:none;
  }
  html.sidebar-rail .rail-item:active{transform:none}
  /* Focus clavier nettement visible. */
  html.sidebar-rail .rail-item:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:2px;
    box-shadow:none;
  }
  /* Actif : fond teinté matière + anneau + repère latéral — évident mais élégant. */
  html.sidebar-rail .rail-item.active{
    background:color-mix(in srgb, var(--rail-bg, var(--color-primary)) 12%, var(--color-surface-2));
    border-color:color-mix(in srgb, var(--rail-bg, var(--color-primary)) 55%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--rail-bg, var(--color-primary)) 30%, transparent);
    color:var(--rail-bg, var(--color-primary));
  }
  html.sidebar-rail .rail-item.active::after{
    left:-6px;width:3px;height:20px;border-radius:2px;
    background:var(--rail-bg, var(--color-primary));
    box-shadow:none;
  }

  /* Séparateur sobre, plus d'air → sépare nettement matières / actions / outils. */
  html.sidebar-rail .rail-sep{
    width:24px;height:1px;margin:.5rem 0;
    background:var(--color-divider);
  }

  /* [v82] Poignée de resize redondante en rail : l'expansion se fait déjà au survol.
     On retire l'affordance ET l'interaction dans l'état rail — donc aussi pendant
     l'expansion hover, qui est un sous-état de .sidebar-rail. display:none supprime
     le visuel comme la capture de pointeur (aucune zone invisible cliquable). Le
     resize reste disponible dans l'état ÉTENDU explicite (html sans .sidebar-rail),
     où la poignée conserve son sens. Prime sur `.sidebar-slider{display:block}`
     (l.426) par spécificité + ordre. */
  html.sidebar-rail .sidebar-slider{display:none}

  /* Suit la largeur du rail (56px). */
  html.sidebar-rail .sidebar-collapse-btn{left:var(--sidebar-w)}

  /* Bouton toggle : rendu visuel discret conservé, hitbox élargie >= 44px. */
  .sidebar-collapse-btn::before{
    content:"";position:absolute;top:50%;left:0;
    width:44px;height:44px;transform:translateY(-50%);
    background:transparent;
  }
}

/* Dark mode : garder la surface propre et les pastilles lisibles. */
html.dark.sidebar-rail .sidebar{background:var(--color-surface)}
html.dark.sidebar-rail .rail-item{background:var(--color-surface-2);border-color:var(--color-border)}

/* Respect strict de prefers-reduced-motion sur le rail repensé. */
@media (prefers-reduced-motion:reduce){
  html.sidebar-rail .rail-item{animation:none;transition:none}
}

/* ---- Chapitres : groupes en accordéon avec accent coloré ---- */
.nav-group{
  margin:var(--space-1) var(--space-1) var(--space-2);
  border-radius:var(--radius-md,10px);
  overflow:hidden;
  --acc:var(--color-primary);
}
.nav-group-head{
  display:flex;align-items:center;gap:var(--space-2);
  width:100%;padding:.5rem .6rem .5rem .85rem;
  background:var(--color-surface-2);
  border:1px solid var(--color-divider);
  border-left:3px solid var(--acc);
  border-radius:var(--radius-md,10px);
  font-family:var(--font-ui);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--color-text);
  cursor:pointer;text-align:left;
  transition:background .18s;
}
.nav-group-head:hover{background:var(--color-surface-offset)}
.nav-group-head .chev{
  margin-left:auto;color:var(--color-text-faint);
  transition:transform .22s ease;
  display:inline-flex;align-items:center;
}
.nav-group[open] .chev{transform:rotate(90deg);color:var(--acc)}
.nav-group-body{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .28s ease;
}
.nav-group[open] .nav-group-body{grid-template-rows:1fr}
.nav-group-inner{overflow:hidden;min-height:0;padding:0 var(--space-1)}
.nav-group[open] .nav-group-inner{padding:var(--space-1) var(--space-1) var(--space-2)}
.nav-group .nav-link{padding-left:.6rem}
.nav-group .nav-link.active{background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.nav-group .nav-link.active .num{color:var(--acc)}

/* Liseré accent sur les titres de sections (hors groupes chapitres) */
.nav-section-title:not(.nav-chapters-title){position:relative}
.nav-section-title:not(.nav-chapters-title)::before{
  content:"";position:absolute;left:.15rem;top:50%;
  width:3px;height:.75rem;transform:translateY(-50%);
  background:var(--color-primary);border-radius:2px;opacity:.55;
}
.nav-chapters-title{margin-top:var(--space-2)}

/* ---- Page Formules (formulaire premium) ---- */
/* La page Formules exploite une largeur plus généreuse que le cours : les cartes
   de formules se répartissent en colonnes (masonry) et remplissent l'espace. */
.content:has(.formules-wrap){max-width:1500px}
.formules-search{margin:1.25rem 0 1.75rem}
.formules-search .input{
  width:100%;max-width:640px;
  padding:.7rem 1rem;border-radius:999px;
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  transition:border-color .18s, box-shadow .18s;
}
.formules-search .input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent)}
.formules-wrap{display:flex;flex-direction:column;gap:1.75rem}

.formules-card{
  position:relative;
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg,16px);
  background:var(--color-surface);
  padding:1.35rem 1.5rem 1.5rem;
  box-shadow:0 1px 2px rgba(0,0,0,.02), 0 4px 16px rgba(0,0,0,.03);
}
.formules-card--with-aside{
  display:grid;
  grid-template-columns: minmax(0,1fr) 320px;
  grid-template-areas: "head head" "list aside";
  gap:1.5rem 2rem;
  align-items:start;
}
.formules-card--with-aside .formules-card-head{grid-area:head}
.formules-card--with-aside .formules-list{grid-area:list}
.formules-card--with-aside .trigo-aside{grid-area:aside}

.formules-card-head{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin-bottom:1.1rem;
  padding-bottom:.75rem;
  border-bottom:1px solid var(--color-divider);
}
.formules-card-head h2{
  font-family:var(--font-display);font-size:var(--text-2xl,1.5rem);
  margin:0;color:var(--color-text);letter-spacing:-.005em;font-weight:600;
}
.formules-ic{
  color:var(--color-primary);
  font-family:'Cambria Math','Latin Modern Math','STIX Two Math',serif;
  font-size:1.6em;font-weight:400;line-height:1;
  transform:translateY(2px);
}
.formules-chap-link{
  margin-left:auto;font-family:var(--font-ui);font-size:var(--text-sm);
  color:var(--color-primary);white-space:nowrap;font-weight:500;
  padding:.35rem .7rem;border-radius:999px;
  border:1px solid transparent;transition:background .18s, border-color .18s;
}
.formules-chap-link:hover{background:color-mix(in srgb, var(--color-primary) 8%, transparent);border-color:color-mix(in srgb, var(--color-primary) 22%, transparent);text-decoration:none}

/* Colonnes (masonry) : chaque formule = une note-carte autonome qui ne se coupe
   jamais entre deux colonnes. Le nombre de colonnes s'adapte à la largeur dispo,
   ce qui remplit tout l'espace horizontal au lieu d'une longue colonne étroite. */
.formules-list{
  list-style:none;margin:0;padding:0;
  columns:340px;column-gap:1.1rem;
}
.formules-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  display:flow-root;width:100%;
  margin:0 0 1.1rem;
  padding:.85rem 1rem .95rem;
  border:1px solid var(--color-divider);
  border-radius:var(--radius-md,.5rem);
  background:color-mix(in srgb, var(--color-text) 2%, transparent);
  line-height:1.5;
}
/* En-tête de note : label (gauche) + lien cours (droite). */
.formule-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:.55rem;
}
.formule-label{
  font-family:var(--font-ui);font-size:.86rem;
  color:var(--color-text);letter-spacing:.005em;font-weight:600;
  line-height:1.3;
  padding-left:.55rem;
  border-left:3px solid var(--color-primary);
}
/* Corps : flux EN LIGNE mêlant formules et connecteurs (prose mathématique).
   align-items:center — et NON baseline : un fragment math en overflow-x:auto est
   une boîte de défilement dont la baseline CSS tombe sur son bord bas ; l'aligner
   par baseline remonterait les fractions/sommes hautes au-dessus du texte. Le
   centrage vertical est stable quelle que soit la hauteur du fragment. */
.formule-body{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.3rem .55rem;
  min-width:0;
  line-height:1.5;
}
.formules-item--nolabel .formule-body{padding-top:.1rem}
/* Chaque formule = une puce inline-flex centrée. La puce est bornée à 100 % de la
   largeur dispo et défile horizontalement si la formule est trop longue ; le SVG
   MathJax garde sa taille native à l'intérieur (aucune distorsion de baseline). */
.formule-eq{
  display:inline-flex;align-items:center;
  max-width:100%;
  overflow-x:auto;overflow-y:hidden;
  vertical-align:middle;
  scrollbar-width:thin;
}
.formule-eq::-webkit-scrollbar{height:6px}
.formule-eq::-webkit-scrollbar-thumb{background:var(--color-divider);border-radius:999px}
.formule-note{
  font-family:var(--font-body);font-size:.9rem;
  color:var(--color-text-muted);font-style:normal;
}
/* Lien vers l'énoncé exact du cours : petite pastille discrète (si résolu). */
.formule-thm-link{
  display:inline-flex;align-items:center;gap:.3rem;flex:none;white-space:nowrap;
  font-family:var(--font-ui);font-size:.74rem;font-weight:600;
  color:var(--color-primary);text-decoration:none;
  padding:.2rem .55rem;border-radius:999px;
  background:color-mix(in srgb, var(--color-primary) 9%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  transition:background .18s, border-color .18s;
}
.formule-thm-link::after{content:"\2197";font-size:.95em;line-height:1}
.formule-thm-link:hover{background:color-mix(in srgb, var(--color-primary) 16%, transparent);border-color:color-mix(in srgb, var(--color-primary) 32%, transparent);text-decoration:none}

/* Laisser MathJax dimensionner son SVG : pas de max-width:100% (qui rétrécirait
   les formules larges) ni de height:auto forcé (qui fausse la baseline du SVG).
   Le débordement des formules longues est géré par le scroll de .formule-eq. */
.formule-eq mjx-container{margin:0 !important;padding:0;line-height:0}
.formule-eq mjx-container[jax="SVG"]{display:inline-block;vertical-align:middle}
.formule-eq mjx-container[jax="SVG"] svg{max-width:none}

.trigo-aside{
  background:var(--color-surface-offset);
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg,14px);
  padding:1rem 1rem 1.1rem;
}
.trigo-svg{display:block;margin:0 auto;max-width:260px}
.trigo-svg .trigo-circle{fill:none;stroke:var(--color-primary);stroke-width:1.5}
.trigo-svg .trigo-axis{stroke:var(--color-text-faint);stroke-width:1}
.trigo-svg .trigo-axis-arrow{fill:var(--color-text-faint)}
.trigo-svg .trigo-axis-label{fill:var(--color-text-muted);font-family:var(--font-body);font-size:12px;font-style:italic}
.trigo-svg .trigo-ray{stroke:var(--color-divider);stroke-width:1;stroke-dasharray:2 3}
.trigo-svg .trigo-dot{fill:var(--color-primary);stroke:var(--color-surface);stroke-width:1.5}
.trigo-svg .trigo-angle-label{fill:var(--color-text);font-family:var(--font-body);font-size:11px}
.trigo-legend{margin-top:.9rem;font-family:var(--font-ui);font-size:.78rem;color:var(--color-text-muted)}
.trigo-legend-title{font-weight:600;color:var(--color-text);margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}
.trigo-table{width:100%;border-collapse:collapse;font-family:var(--font-body)}
.trigo-table th,.trigo-table td{padding:.28rem .35rem;text-align:left;border-bottom:1px solid var(--color-divider)}
.trigo-table th{font-family:var(--font-ui);font-size:.68rem;color:var(--color-text-faint);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.trigo-table tbody tr:last-child td{border-bottom:none}

@media (max-width:900px){
  .formules-card--with-aside{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "list" "aside";
    gap:1rem;
  }
  /* À côté d'un aside étroit, une seule colonne de notes reste lisible. */
  .formules-card--with-aside .formules-list{columns:1}
  .trigo-aside{max-width:360px;margin:0 auto;width:100%}
}
@media (max-width:640px){
  .formules-card{padding:1rem 1rem 1.1rem}
  .formules-list{columns:1}
  .formule-label{font-size:.82rem}
  .formules-chap-link{margin-left:0;flex-basis:100%;text-align:center}
  .formules-card-head h2{font-size:1.25rem}
}

/* ---- Typo LaTeX (MathJax SVG) globale ---- */
mjx-container[jax="SVG"]{line-height:0;vertical-align:-.06em}
mjx-container[jax="SVG"] svg{color:var(--color-text)}
mjx-container[jax="SVG"][display="true"]{margin:.6em 0;overflow-x:auto;overflow-y:hidden;max-width:100%}
p mjx-container[jax="SVG"], li mjx-container[jax="SVG"]{margin:0 .12em}
.box-body, .fiche-list, .content p, .content li{line-height:1.72}

/* ============================================================
   [P1-5] In-chapter TOC (right rail) — style vidéo premium.
   Fond pierre translucide, border-radius 22px, scrollbar fine 4px.
   Dark mode privilegié (user bosse la nuit).
   ============================================================ */
/* [REFONTE 2026-07-03] TOC « Dans ce chapitre » en 2 couches :
   • .chapter-toc-notches : tirets verticaux minces, visibles au repos
   • .chapter-toc-panel   : panel complet caché, apparaît au hover
   Le conteneur .chapter-toc n'est plus scrollable lui-même : c'est le panel
   qui l'est. Fin du scrollbar toujours visible / du bloc pierre encombrant. */
.chapter-toc{
  position:fixed;
  top:calc(var(--header-h) + var(--space-6));
  right:0;
  /* [FIX 2026-07-04 — hover v4 : height explicite (pas max-height)]
     Cause racine trouvée après audit Playwright + lecture statique :
     .chapter-toc-notches et .chapter-toc-panel sont en position:absolute →
     ils sortent du flow. Sans height explicite, le rail a une hauteur
     intrinsèque de 0. getBoundingClientRect().height === 0 → le garde-fou
     JS `if (rect.height <= 0) return` bloquait TOUT hover programmatique.
     Fix : height:calc(...) au lieu de max-height. Le rail occupe désormais
     réellement la bande verticale attendue. */
  width:100px;
  height:calc(100dvh - var(--header-h) - var(--space-8) - var(--space-6));
  max-height:calc(100dvh - var(--header-h) - var(--space-8) - var(--space-6));
  font-family:var(--font-ui);
  font-size:.8rem;
  display:none;
  z-index:32;
  background:transparent;
  border:none;
  padding:0;
  pointer-events:auto;
  transition: width 0s;
}
/* Hitbox invisible à gauche du rail pour capter le hover dès que la souris
   arrive dans les 24 derniers px avant les notches. Sans effet visuel. */
.chapter-toc::before{
  content:"";
  position:absolute;
  top:0; right:100%;
  width:24px; height:100%;
  background:transparent;
  pointer-events:auto;
}
.chapter-toc:hover,
.chapter-toc:focus-within,
.chapter-toc.is-open{
  width:236px;
}

/* --- Couche 1 : notches (tirets) au repos --- */
.chapter-toc-notches{
  position:absolute;
  top:0; right:14px;
  display:flex; flex-direction:column;
  align-items:flex-end;
  gap:6px;
  opacity:1;
  transition: opacity .28s cubic-bezier(.22,1,.36,1);
  pointer-events:none;
}
.chapter-toc-notch{
  display:block;
  width:16px; height:2px;
  border-radius:2px;
  background: color-mix(in srgb, var(--color-text, #0b0d12) 32%, transparent);
  transition: background .2s, width .2s, transform .2s;
}
.chapter-toc-notch.active{
  width:22px;
  background: var(--color-primary, #c8a451);
  box-shadow: 0 0 6px color-mix(in srgb, var(--color-primary, #c8a451) 55%, transparent);
}
[data-theme="dark"] .chapter-toc-notch{
  background: rgba(247,246,242,0.32);
}
[data-theme="dark"] .chapter-toc-notch.active{
  background: #c8a451;
}

/* --- Couche 2 : panel plein au hover --- */
.chapter-toc-panel{
  position:absolute;
  top:0; right:0;
  width:236px;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding: 1rem 1rem 1.25rem;
  border-radius: 18px 0 0 18px;
  background: rgba(201,192,176,0.10);
  border: 1px solid rgba(255,255,255,0.10);
  border-right:none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.07);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transform: translateX(12px);
  opacity:0;
  visibility:hidden;
  transition: transform .32s cubic-bezier(.22,1,.36,1),
              opacity .24s ease,
              visibility 0s linear .32s;
}
[data-theme="dark"] .chapter-toc-panel{
  background: rgba(11,29,58,0.86);
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme="light"] .chapter-toc-panel{
  background: rgba(255,254,250,0.92);
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
}

/* Ouverture au hover / focus / classe .is-open (fallback JS) */
.chapter-toc:hover .chapter-toc-panel,
.chapter-toc:focus-within .chapter-toc-panel,
.chapter-toc.is-open .chapter-toc-panel{
  transform: translateX(0);
  opacity:1;
  visibility:visible;
  transition: transform .32s cubic-bezier(.22,1,.36,1),
              opacity .22s ease,
              visibility 0s linear 0s;
}
.chapter-toc:hover .chapter-toc-notches,
.chapter-toc:focus-within .chapter-toc-notches,
.chapter-toc.is-open .chapter-toc-notches{
  opacity:0;
}

/* Scrollbar fine 4px sur le panel */
.chapter-toc-panel::-webkit-scrollbar{ width:4px; }
.chapter-toc-panel::-webkit-scrollbar-track{ background:transparent; }
.chapter-toc-panel::-webkit-scrollbar-thumb{
  background: rgba(200,164,81,0.35);
  border-radius: 4px;
}
.chapter-toc .toc-title{
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color: #7ab4e8;
  font-weight:700;
  margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chapter-toc a{
  display:block;
  padding:.3rem .6rem .3rem .5rem;
  color: rgba(247,246,242,0.75);
  border-radius: 8px;
  margin: .1rem 0;
  transition: background .15s, color .15s;
  text-decoration:none;
  line-height:1.45;
}
.chapter-toc a:hover{
  background: rgba(255,255,255,0.09);
  color: rgba(247,246,242,0.98);
  text-decoration:none;
}
.chapter-toc a.active{
  color: var(--color-primary, #c8a451);
  background: color-mix(in srgb, var(--color-primary, #c8a451) 12%, transparent);
  font-weight:600;
  text-decoration:none;
}
[data-theme="light"] .chapter-toc a{ color: #1a2a45; }
[data-theme="light"] .chapter-toc a:hover{ background: rgba(0,0,0,0.05); color:#0b0d12; }
[data-theme="light"] .chapter-toc a.active{ color: #a08432; background: rgba(200,164,81,0.14); }
[data-theme="light"] .chapter-toc .toc-title{ color:#3a5c8a; border-bottom-color: rgba(0,0,0,0.06); }

/* Visible seulement sur écran large et haut */
@media (min-width:1280px) and (min-height:560px){.chapter-toc{display:block}}
/* Masqué sur mobile/tablette (écran trop étroit) */
@media (max-width:1279px){.chapter-toc{display:none}}

/* Écran large mais court (ex. laptop en split-screen) : notches réduites,
   panel qui s'ouvre en survol avec hauteur adaptée à la fenêtre. */
@media (min-width:1280px) and (max-height:559px){
  .chapter-toc{ display:block; height:100dvh; }
  .chapter-toc-notches{ max-height:80dvh; padding:.5rem .35rem; gap:.6rem; }
  .chapter-toc-panel{ max-height:80dvh; padding:.9rem .95rem; }
}

/* ---------- Typography ---------- */
.content h1{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;line-height:1.1;letter-spacing:-.01em;margin-bottom:var(--space-3)}
.content h2{font-family:var(--font-display);font-size:var(--text-xl);font-weight:700;margin:var(--space-12) 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-divider);scroll-margin-top:calc(var(--header-h) + 1rem)}
.content h3{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;margin:var(--space-8) 0 var(--space-3);scroll-margin-top:calc(var(--header-h) + 1rem)}
.content h4{font-family:var(--font-ui);font-size:var(--text-base);font-weight:700;margin:var(--space-5) 0 var(--space-2)}
/* [FIX largeur cours 2026-07-10] L'ancien plafond de lecture 80/78ch (~680px)
   laissait, sur grand écran, la prose des chapitres occuper moins de la moitié du
   panneau central et créait un vaste vide à droite (chapitre inutilement allongé).
   On retire ce plafond : la prose suit désormais la largeur du conteneur `.content`
   (borné à 1200px, centré → marges latérales raisonnables sur très grand écran).
   Sans effet sur mobile/tablette (le conteneur y est déjà plus étroit que l'ancien
   plafond) ; les blocs display MathJax, tableaux et médias restent bornés à 100%
   avec overflow-x, donc pas de débordement horizontal. */
.content p{margin:var(--space-3) 0}
.content ul,.content ol{margin:var(--space-3) 0 var(--space-3) var(--space-6)}
.content li{margin:var(--space-1) 0}
.lead{font-size:var(--text-lg);color:var(--color-text-muted);max-width:60ch}

/* ---------- Cards (definitions, theorems...) ---------- */
.box{
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  margin:var(--space-8) 0;background:var(--color-surface-2);overflow:hidden;
  box-shadow:var(--shadow-sm);
}
/* Les blocs référençables (théorèmes, définitions…) doivent se positionner
   sous le header fixe quand on y arrive via la recherche ou un lien d'ancre. */
.box[id],section[id]{scroll-margin-top:calc(var(--header-h) + 1rem)}
/* Mise en évidence brève de la cible après un saut d'ancre. */
@keyframes anchorFlash{0%{box-shadow:0 0 0 3px var(--color-primary),var(--shadow-sm)}100%{box-shadow:0 0 0 0 transparent,var(--shadow-sm)}}
.anchor-target{animation:anchorFlash 1.6s ease-out 1}
.box-head{
  display:flex;align-items:center;gap:var(--space-2);
  padding:.7rem var(--space-5);font-family:var(--font-ui);font-weight:700;
  font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;
}
.box-head .tag{font-size:.7rem}
.box-head .title-inline{font-weight:600;text-transform:none;letter-spacing:0;color:var(--color-text-muted);font-style:italic;font-size:.85rem}
.box-head .fav-btn{margin-left:auto;color:var(--color-text-faint);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.box-head .fav-btn:hover{color:var(--color-amber);background:color-mix(in srgb,var(--color-amber-soft) 60%,transparent)}
.box-head .fav-btn.on{color:var(--color-amber)}
.box-body{padding:var(--space-5)}
.box-body > :first-child{margin-top:0}
.box-body > :last-child{margin-bottom:0}
/* [FIX texte-carte 2026-07-05] PR #10 a élargi les CARTES (.content max-width 1200px),
   mais le texte à l'intérieur restait plafonné par les règles de PROSE génériques
   (`.content p{max-width:80ch}` / `.content li{max-width:78ch}`) : les paragraphes et
   listes des encadrés pédagogiques (définition / théorème / proposition / exemple / …)
   se coupaient donc bien avant le bord de la carte → « cases larges, texte étroit » et
   vide à droite DANS la carte. Dans une carte, le texte doit suivre la largeur de la
   carte (et non le plafond de lecture d'un article) : on relâche le max-width. La
   spécificité (0,2,1) de `.content .box-body p` bat celle (0,1,1) de `.content p`, donc
   l'override gagne quel que soit l'ordre. Les blocs display MathJax (max-width:100%) et
   le math inline ne sont pas affectés ; la prose d'article HORS carte garde son plafond
   confortable (80/78ch) ; le padding de .box-body évite tout texte bord-à-bord (mobile). */
.content .box-body p, .content .box-body li,
.content .result p, .content .result li{max-width:none}

.box.def{border-left:4px solid var(--color-primary)}
.box.def .box-head{background:var(--color-primary-soft);color:var(--color-primary)}
.box.thm{border-left:4px solid var(--color-ink-blue)}
.box.thm .box-head{background:var(--color-ink-blue-soft);color:var(--color-ink-blue)}
.box.prop{border-left:4px solid var(--color-ink-blue)}
.box.prop .box-head{background:var(--color-ink-blue-soft);color:var(--color-ink-blue)}
.box.method{border-left:4px solid var(--color-green)}
.box.method .box-head{background:var(--color-green-soft);color:var(--color-green)}
.box.example{border-left:4px solid var(--color-violet)}
.box.example .box-head{background:var(--color-violet-soft);color:var(--color-violet)}
.box.pitfall{border-left:4px solid var(--color-amber)}
.box.pitfall .box-head{background:var(--color-amber-soft);color:var(--color-amber)}
.box.remark{border-left:4px solid var(--color-text-faint)}
.box.remark .box-head{background:var(--color-surface-offset);color:var(--color-text-muted)}

/* Proof toggle */
.proof{margin-top:var(--space-3);border-top:1px dashed var(--color-border);padding-top:var(--space-3)}
.proof-toggle{
  display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);
  font-size:var(--text-sm);font-weight:600;color:var(--color-ink-blue);
  padding:.3rem .7rem;border:1px solid var(--color-ink-blue-line);border-radius:var(--radius-md);
}
.proof-toggle:hover{background:var(--color-ink-blue-soft)}
.proof-toggle svg{transition:transform var(--transition)}
.proof-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.proof-body{display:none;margin-top:var(--space-3);font-size:.97em;color:var(--color-text);padding-left:var(--space-3);border-left:2px solid var(--color-ink-blue-line)}
.proof-body.open{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
.proof-body .qed{display:inline-block;float:right;font-weight:700;color:var(--color-ink-blue)}

/* correction toggle (exercises) */
.correction{margin-top:var(--space-3)}
.corr-toggle{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-green);padding:.3rem .7rem;border:1px solid var(--color-green);border-radius:var(--radius-md)}
.corr-toggle:hover{background:var(--color-green-soft)}
.corr-toggle svg{transition:transform var(--transition)}
.corr-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.corr-body{display:none;margin-top:var(--space-3);padding:var(--space-4);background:var(--color-green-soft);border-radius:var(--radius-md);font-size:.97em}
.corr-body.open{display:block;animation:fade .25s ease}

/* --- Champs pédagogiques optionnels des exercices -------------------
   Indications, correction progressive, schéma, remarques/pièges.
   Chaque bloc est visuellement distinct de la correction complète. */
.ex-schema{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.ex-schema-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.ex-schema-fig{overflow:auto;text-align:center}
.ex-schema-fig svg{max-width:100%;height:auto}
.ex-schema-pre{margin:0;white-space:pre-wrap;font-family:var(--font-mono,monospace);font-size:.92em;line-height:1.5}

.ex-indics{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--color-amber,#b7791f);border-radius:var(--radius-md);background:var(--color-amber-soft)}
.ex-indics-head{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);color:var(--color-amber,#b7791f);margin-bottom:var(--space-2)}
.ex-indics-list{display:flex;flex-direction:column;gap:var(--space-2)}
.ex-indic{display:flex;gap:var(--space-2);align-items:flex-start;animation:fade .25s ease}
/* Le sélecteur de classe ci-dessus l'emporterait sur la règle UA [hidden]{display:none}
   (spécificité égale, déclaré après) → les indications masquées s'affichaient d'emblée.
   On rétablit explicitement le masquage tant que le bouton ne les a pas révélées. */
.ex-indic[hidden]{display:none}
.ex-indic-num{flex:0 0 auto;width:1.4rem;height:1.4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-amber,#b7791f);color:#fff;font-family:var(--font-ui);font-size:.72rem;font-weight:700}
.ex-indic-c{flex:1 1 auto}
.ex-indic-titre{font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);margin-bottom:.15rem}
.ex-indic-more{margin-top:var(--space-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-amber,#b7791f);padding:.3rem .7rem;border:1px solid var(--color-amber,#b7791f);border-radius:var(--radius-md);background:transparent;cursor:pointer}
.ex-indic-more:hover{background:color-mix(in srgb,var(--color-amber,#b7791f) 12%,transparent)}
.ex-count{opacity:.8;font-weight:500}

.ex-corrprog{margin-top:var(--space-3)}
.ex-corrprog-toggle{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);padding:.3rem .7rem;border:1px solid var(--color-primary-line,var(--color-primary));border-radius:var(--radius-md);background:transparent;cursor:pointer}
.ex-corrprog-toggle:hover{background:var(--color-primary-soft)}
.ex-corrprog-toggle svg{transition:transform var(--transition)}
.ex-corrprog-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.ex-corrprog-body{display:none;margin-top:var(--space-3);padding:var(--space-4);background:var(--color-primary-soft);border-radius:var(--radius-md)}
.ex-corrprog-body.open{display:block;animation:fade .25s ease}
.ex-corrprog-list{display:flex;flex-direction:column;gap:var(--space-3)}
.ex-corrstep{animation:fade .25s ease;padding-left:var(--space-3);border-left:3px solid var(--color-primary-line,var(--color-primary))}
.ex-corrstep[hidden]{display:none}
.ex-corrstep-head{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);margin-bottom:.2rem}
.ex-corrstep-num{flex:0 0 auto;width:1.4rem;height:1.4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;font-size:.72rem}
.ex-corrstep-obj{font-style:italic;color:var(--color-text-muted);font-size:.95em;margin-bottom:.2rem}
.ex-corrstep-more{margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);padding:.3rem .7rem;border:1px solid var(--color-primary-line,var(--color-primary));border-radius:var(--radius-md);background:transparent;cursor:pointer}
.ex-corrstep-more:hover{background:color-mix(in srgb,var(--color-primary) 12%,transparent)}
.ex-indic-hide,.ex-corrstep-hide{margin-top:var(--space-2);margin-left:var(--space-2);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);padding:.3rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;cursor:pointer}
.ex-indic-hide:hover,.ex-corrstep-hide:hover{background:color-mix(in srgb,var(--color-text-muted,#666) 10%,transparent)}
.ex-indic-hide[hidden],.ex-corrstep-hide[hidden]{display:none}

.ex-notes{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}
.ex-notes-head{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-2)}
.ex-notes-list{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
.ex-pieges{border-color:var(--color-primary-line,var(--color-primary))}
.ex-pieges .ex-notes-head{color:var(--color-primary)}

/* highlight result */
.result{background:color-mix(in srgb,var(--color-primary-soft) 80%,transparent);border:1px solid var(--color-primary-line);border-radius:var(--radius-md);padding:.6rem var(--space-4);margin:var(--space-4) 0;font-weight:600}
.note{color:var(--color-text-muted);font-size:.95em}

/* exercise blocks */
.exercise{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-5) 0;background:var(--color-surface)}
.exercise .ex-head{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);margin-bottom:var(--space-2)}
.diff{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.12rem .5rem;border-radius:var(--radius-full)}
.diff.facile{background:var(--color-green-soft);color:var(--color-green)}
.diff.moyen{background:var(--color-amber-soft);color:var(--color-amber)}
.diff.difficile{background:var(--color-primary-soft);color:var(--color-primary)}

/* ---------- Home ---------- */
.hero{padding:var(--space-12) 0 var(--space-8);border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-8)}
.hero .kicker{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--color-gold);font-weight:700;margin-bottom:var(--space-3)}
.hero h1{font-size:var(--text-2xl)}
.hero .lead{margin-top:var(--space-4)}

/* ---------- Héro Polaris (accueil) : 2 colonnes texte + illustration ---------- */
.hero-brand{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--space-10);align-items:center;
  padding:var(--space-16) 0 var(--space-12);border-bottom:1px solid var(--color-divider);margin-bottom:var(--space-10)}
.hero-brand .hero-text .kicker{font-family:var(--font-ui);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold);font-weight:700;margin-bottom:var(--space-4)}
.hero-brand .hero-slogan{font-family:var(--font-display);font-weight:700;font-size:var(--text-2xl);line-height:1.12;color:var(--color-text);margin:0}
.hero-brand .hero-features{font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-text-muted);margin-top:var(--space-5);line-height:1.6}
.hero-brand .hero-features .dot{color:var(--color-gold);margin:0 .45rem;font-weight:700}
.hero-brand .hero-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
/* Bouton or signature « Commencer les révisions » */
.btn-gold{background:var(--color-gold);color:#0b1d3a;border-color:var(--color-gold)}
.btn-gold:hover{background:var(--color-gold-hover);color:#0b1d3a}
/* Illustration héro : PNG transparent affiché à même le fond — AUCUN cadre/bordure/ombre/carte */
.hero-illus{display:flex;align-items:center;justify-content:center}
.hero-illus img{display:block;width:100%;max-width:460px;height:auto;border:none;border-radius:0;background:none;box-shadow:none}
@media (max-width:760px){
  .hero-brand{grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-10) 0 var(--space-8);text-align:left}
  .hero-illus{order:-1}
  .hero-illus img{max-width:300px}
}
.btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);padding:.6rem 1.1rem;border-radius:var(--radius-md);border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-hover)}
[data-theme=dark] .btn-primary{color:var(--color-bg)}
.btn-ghost{border-color:var(--color-border);color:var(--color-text);background:var(--color-surface-2)}
.btn-ghost:hover{border-color:var(--color-primary-line);color:var(--color-primary)}
.hero-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}

.stat-row{display:flex;gap:var(--space-6);margin-top:var(--space-8);flex-wrap:wrap}
.stat{font-family:var(--font-ui)}
.stat .n{font-size:var(--text-xl);font-weight:800;color:var(--color-primary);font-family:var(--font-display)}
.stat .l{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}

.progress-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-8) 0}
.progress-bar{height:10px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin:var(--space-3) 0}
.progress-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover));border-radius:var(--radius-full);transition:width .5s ease}

.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.chapter-card{
  display:block;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--space-5);background:var(--color-surface-2);position:relative;overflow:hidden;
}
.chapter-card:hover{text-decoration:none;border-color:var(--color-primary-line);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.chapter-card .cnum{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.1em;color:var(--color-primary);text-transform:uppercase}
.chapter-card h3{font-family:var(--font-display);font-size:var(--text-lg);margin:var(--space-2) 0;color:var(--color-text);line-height:1.2}
.chapter-card .meta{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);display:flex;gap:var(--space-3);flex-wrap:wrap}
.chapter-card .domain{position:absolute;top:0;right:0;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-ui);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .6rem;border-bottom-left-radius:var(--radius-md);color:#fff}
.chapter-card .chk{margin-top:var(--space-3);height:5px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden}
.chapter-card .chk > span{display:block;height:100%;background:var(--color-green);border-radius:var(--radius-full)}

.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:var(--space-12) 0 var(--space-4);gap:var(--space-4)}
.section-head h2{margin:0;border:none;padding:0}
.section-head .link{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600}

/* ---------- Quiz ---------- */
.quiz-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);margin:var(--space-5) 0;box-shadow:var(--shadow-sm)}
.quiz-meta{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.quiz-progress{height:6px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-5)}
.quiz-progress > span{display:block;height:100%;background:var(--color-primary);transition:width .4s ease}
.quiz-q{font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-2)}
.quiz-cat{font-family:var(--font-ui);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-primary);margin-bottom:var(--space-3)}
.quiz-options{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-5) 0}
.quiz-opt{
  display:flex;align-items:flex-start;gap:var(--space-3);text-align:left;width:100%;
  padding:var(--space-3) var(--space-4);border:1.5px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-surface);font-size:var(--text-base);
}
.quiz-opt:hover:not(:disabled){border-color:var(--color-primary-line);background:var(--color-surface-2)}
.quiz-opt .mk{font-family:var(--font-ui);font-weight:700;color:var(--color-text-muted);min-width:1.4em}
.quiz-opt.correct{border-color:var(--color-green);background:var(--color-green-soft)}
.quiz-opt.wrong{border-color:var(--color-primary);background:var(--color-primary-soft)}
.quiz-opt:disabled{cursor:default}
.quiz-explain{margin-top:var(--space-4);padding:var(--space-4);border-radius:var(--radius-md);background:var(--color-ink-blue-soft);border:1px solid var(--color-ink-blue-line);font-size:.97em;display:none}
.quiz-explain.show{display:block;animation:fade .3s ease}
.quiz-explain .verdict{font-family:var(--font-ui);font-weight:700;display:block;margin-bottom:var(--space-2)}
.quiz-explain .verdict.ok{color:var(--color-green)}
.quiz-explain .verdict.no{color:var(--color-primary)}
.quiz-nav{display:flex;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-5)}
.quiz-result{text-align:center;padding:var(--space-8) 0}
.quiz-score{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;color:var(--color-primary)}
.score-ring{margin:var(--space-4) auto}

.diff-filter{display:flex;gap:var(--space-2);margin-bottom:var(--space-5);flex-wrap:wrap}
.train-section{border:1px solid var(--color-border);border-radius:var(--radius-lg);margin:var(--space-4) 0;background:var(--color-surface);overflow:hidden}
.train-head{width:100%;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);font-family:var(--font-ui);font-weight:700;font-size:var(--text-base);color:var(--color-text);background:var(--color-surface-offset);border:none;cursor:pointer;text-align:left}
.train-head:hover{background:var(--color-primary-soft)}
.train-head .train-chevron{transition:transform var(--transition);flex-shrink:0;color:var(--color-text-muted)}
.train-head[aria-expanded=true] .train-chevron{transform:rotate(90deg)}
.train-head .train-count{margin-left:auto;font-weight:600;font-size:var(--text-sm);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.train-head .diff{flex-shrink:0}
.train-body{padding:0 var(--space-4) var(--space-2)}
.train-body[hidden]{display:none}
.train-body .exercise{margin:var(--space-4) 0}
.chip{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;padding:.35rem .9rem;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted);background:var(--color-surface)}
.chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
[data-theme=dark] .chip.active{color:var(--color-bg)}
.chip:hover:not(.active){border-color:var(--color-primary-line);color:var(--color-primary)}

/* ---------- Flashcards ---------- */
.fc-chapter-picker{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.25rem auto 1.5rem;flex-wrap:wrap}
.fc-picker-label{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);font-weight:600;white-space:nowrap}
.fc-picker-select{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.5rem 2.4rem .5rem 1rem;cursor:pointer;max-width:min(92vw,420px);appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808694' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;transition:border-color var(--transition),box-shadow var(--transition)}
.fc-picker-select:hover{border-color:var(--color-primary-line)}
.fc-picker-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.flashcard{
  perspective:1600px;max-width:560px;margin:var(--space-6) auto;min-height:340px;cursor:pointer;
}
.flashcard-inner{position:relative;width:100%;min-height:340px;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}
.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-8) var(--space-6);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:var(--color-surface-2);box-shadow:var(--shadow-md);overflow-y:auto}
.flashcard-face .fc-tag{font-family:var(--font-ui);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-primary);position:absolute;top:var(--space-4);left:var(--space-5)}
.flashcard-face.front{font-size:var(--text-lg);font-weight:600}
.flashcard-face.back{transform:rotateY(180deg);font-size:var(--text-base)}
/* Texte des cartes : interligne généreux pour que texte + formules inline respirent.
   Les grandes formules (intégrales, racines, fractions) sont promues en bloc par JS :
   elles passent alors sur leur propre ligne, centrées, au lieu de désaxer le texte. */
.fc-front-text,.fc-back-text{line-height:1.85;max-width:100%}
.fc-front-text mjx-container.mjx-promoted,.fc-back-text mjx-container.mjx-promoted{
  display:block !important;text-align:center;margin:.55rem auto;padding:.1rem 0;
  max-width:100%;overflow-x:auto;overflow-y:hidden}
.fc-front-text mjx-container[display="true"],.fc-back-text mjx-container[display="true"]{
  margin:.55rem auto;max-width:100%;overflow-x:auto;overflow-y:hidden}
.flashcard .hint{position:absolute;bottom:var(--space-3);right:var(--space-5);font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-faint)}
.fc-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-4);margin-top:var(--space-5);font-family:var(--font-ui)}
.fc-count{font-size:var(--text-sm);color:var(--color-text-muted);min-width:80px;text-align:center}
.fc-controls-sec{margin-top:var(--space-3)}
.fc-progress{height:6px;border-radius:var(--radius-full);background:var(--color-surface-offset);overflow:hidden;margin-bottom:var(--space-4);max-width:640px;margin-left:auto;margin-right:auto}
.fc-progress-fill{height:100%;width:0;background:var(--color-primary);border-radius:var(--radius-full);transition:width .3s ease}
.fc-grade{display:flex;justify-content:center;gap:var(--space-3);margin-top:var(--space-4);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .25s ease,transform .25s ease,visibility .25s}
.fc-grade.show{opacity:1;visibility:visible;transform:none}
.fc-grade .btn{font-family:var(--font-ui);font-weight:700}
.fc-grade-su{background:var(--color-green-soft);color:var(--color-green);border:1px solid var(--color-green)}
.fc-grade-su:hover{background:var(--color-green);color:#fff}
.fc-grade-revoir{background:var(--color-primary-soft);color:var(--color-primary);border:1px solid var(--color-primary)}
.fc-grade-revoir:hover{background:var(--color-primary);color:#fff}
.fc-grade kbd,.fc-controls kbd{display:inline-block;margin-left:.4em;font-family:var(--font-ui);font-size:.66rem;font-weight:700;padding:.05rem .35rem;border-radius:var(--radius-sm);background:rgba(0,0,0,.08);border:1px solid rgba(0,0,0,.12);color:inherit;opacity:.8}
.fc-summary{max-width:640px;margin:var(--space-6) auto 0;padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface);text-align:center}
.fc-summary[hidden]{display:none}
.fc-summary h3{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 var(--space-2)}
.fc-summary-stat{font-family:var(--font-ui);color:var(--color-text-muted);margin:0 0 var(--space-4)}
.fc-summary-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center}

/* ---------- Flashcards : barre de mode, filtres, stats persistantes ---------- */
.fc-modebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-2) auto var(--space-3);max-width:640px;font-family:var(--font-ui)}
.fc-modebar-label{font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted);margin-right:var(--space-1)}
.fc-mode-btn{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;padding:.35rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text-muted);cursor:pointer;transition:all .18s ease}
.fc-mode-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.fc-mode-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.fc-filterrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin:0 auto var(--space-2);max-width:640px}
.fc-filter-btn{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;padding:.25rem .65rem;border-radius:var(--radius-full)}
.fc-filter-btn.active{background:var(--color-primary-soft);color:var(--color-primary);border-color:var(--color-primary)}
.fc-stats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);margin:0 auto var(--space-4);max-width:640px;font-family:var(--font-ui);font-size:var(--text-sm)}
.fc-stat{color:var(--color-text-muted)}
.fc-stat-su{color:var(--color-green);font-weight:700}
.fc-stat-revoir{color:var(--color-primary);font-weight:700}
.fc-stat-due{color:var(--color-primary);font-weight:700}
.fc-stat-nv{color:var(--color-text-muted);font-weight:700}
.fc-card-state{font-weight:700}
.fc-card-state.nv{color:var(--color-text-muted)}
.fc-card-state.revoir{color:var(--color-primary)}
.fc-card-state.su{color:var(--color-green)}

/* ---------- Search modal ---------- */
.search-modal{position:fixed;inset:0;z-index:100;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(20,15,10,.45);backdrop-filter:blur(3px)}
.search-modal.open{display:flex}
.search-panel{width:min(640px,92vw);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}
.search-panel input{width:100%;padding:var(--space-4) var(--space-5);border:none;font-family:var(--font-ui);font-size:var(--text-lg);background:transparent;border-bottom:1px solid var(--color-divider)}
.search-panel input:focus{outline:none}
.search-filters{display:flex;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;padding:.6rem var(--space-4);border-bottom:1px solid var(--color-divider);scrollbar-width:thin}
.search-filters::-webkit-scrollbar{height:5px}
.search-filters .chip{flex:0 0 auto;font-size:var(--text-xs);padding:.28rem .7rem}
.search-results{max-height:48vh;overflow-y:auto;padding:var(--space-2)}
.search-result{display:block;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-family:var(--font-ui)}
.search-result:hover,.search-result.sel{background:var(--color-surface-offset);text-decoration:none}
.search-result .sr-type{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.1rem .45rem;border-radius:var(--radius-full);margin-right:var(--space-2)}
.search-result .sr-title{color:var(--color-text);font-weight:600;font-size:var(--text-sm)}
.search-result .sr-ctx{color:var(--color-text-muted);font-size:var(--text-xs);margin-top:2px}
.search-empty{padding:var(--space-6);text-align:center;color:var(--color-text-muted);font-family:var(--font-ui);font-size:var(--text-sm)}

/* ---------- misc ---------- */
.breadcrumb{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.breadcrumb a{color:var(--color-text-muted)}
.chapter-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-5) 0 var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--color-divider)}
/* Barre d'onglets du chapitre : pills unifiées (cours + groupe éval) sur une
   même rangée, repli en flex-wrap sur petit écran (pas de scroll horizontal). */
.tab-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-6);font-family:var(--font-ui);padding-bottom:var(--space-1)}
.tab{padding:.5rem 1rem;font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);white-space:nowrap;transition:all var(--transition);display:inline-flex;align-items:center;gap:.4rem;line-height:1}
.tab svg{flex:0 0 auto}
.tab:hover{color:var(--color-text);border-color:var(--color-primary-line);background:var(--color-surface-2)}
.tab.active{color:var(--color-text-inverse);background:var(--color-primary);border-color:var(--color-primary);box-shadow:var(--shadow-sm)}
/* Séparateur vertical entre onglets de cours et groupe éval (masqué en wrap) */
.tab-sep{flex:0 0 auto;width:1px;height:1.5rem;background:var(--color-border);margin:0 .35rem}
.empty{text-align:center;padding:var(--space-16) var(--space-4);color:var(--color-text-muted);font-family:var(--font-ui)}
.empty svg{margin:0 auto var(--space-4);color:var(--color-text-faint)}

.plan-list{list-style:none;margin-left:0!important;counter-reset:plan}
.plan-list li{counter-increment:plan;padding-left:2.2rem;position:relative;margin:var(--space-2) 0}
.plan-list li::before{content:counter(plan,upper-roman);position:absolute;left:0;font-family:var(--font-ui);font-weight:700;color:var(--color-primary);font-size:.8rem;top:.25rem}

/* ---------- MathJax v3 (tex-svg) ---------- */
mjx-container{color:var(--color-text)}
/* Formule inline : alignement sur la ligne de base du texte. MathJax fixe déjà le
   vertical-align exact via un style inline sur le conteneur (il connaît la profondeur
   réelle de chaque formule) : on ne l'écrase donc PAS avec une valeur fixe.
   On ne met SURTOUT PAS line-height:0 — c'était la cause n°1 des chevauchements :
   une fraction \dfrac ou une matrice inline doit pouvoir agrandir sa ligne. */
mjx-container[jax="SVG"]:not([display="true"]){display:inline-block;line-height:normal}
/* [FIX inline v6.13-latex 2026-07-04] Garde-fou UNIVERSEL : toute formule inline
   NON display et NON promue reste dans le fil, sans marge de bloc, quel que soit
   son parent (couvre les hosts non listés plus bas : div.box-body, figcaption,
   dl, blockquote…). Sans ce filet, un host non prévu laissait la formule prendre
   une marge verticale et « tomber » sur sa propre ligne, cassant la phrase.
   On ne force PAS vertical-align : MathJax fixe la ligne de base exacte inline. */
mjx-container[jax="SVG"]:not([display="true"]):not(.mjx-promoted){
  display:inline-block;
  margin-top:0;
  margin-bottom:0;
}
/* Le texte qui CONTIENT des formules inline hautes doit pouvoir respirer :
   on laisse un interligne confortable pour que les \dfrac / matrices / sommes
   ne chevauchent jamais la ligne voisine. Ciblé sur les vrais conteneurs de contenu :
   corps de chapitre (#chapBody), encadrés (.box-body), résultats et fiches. */
#chapBody p,#chapBody li,#chapBody>section>div,
.box-body,.box-body p,.box-body li,
.result,.fiche-list li,.fiche-resume,.fiche-resume li{line-height:1.85}
mjx-container[display="true"]{display:block;text-align:center;margin:var(--space-4) 0;overflow-x:auto;overflow-y:hidden;padding:var(--space-1) 0;max-width:100%}
mjx-container[display="true"]::-webkit-scrollbar{height:6px}
mjx-container[display="true"]::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:6px}
/* Ne PAS forcer vertical-align:middle sur le SVG : cela cassait l'alignement de la ligne de base
   et faisait « sauter » le texte autour des fractions inline. MathJax gère déjà la ligne de base
   via le vertical-align du conteneur (ligne ci-dessus). */
mjx-container svg{vertical-align:baseline}
/* Formule inline trop haute (grande fraction \dfrac) promue en bloc par JS :
   sur sa propre ligne, alignée à gauche, jamais centrée au milieu du texte.
   Règle l'alignement des puces et du texte PARTOUT (cours, fiches, boîtes). */
mjx-container.mjx-promoted{display:block !important;text-align:left;margin:.45rem 0;padding:.15rem 0;
  overflow-x:auto;overflow-y:hidden;max-width:100%;vertical-align:baseline}
mjx-container.mjx-promoted svg{vertical-align:baseline}
/* [v6.5 2026-07-04] Rendu Dunod : formules inline serrées au texte.
   - marge horizontale réduite à .05em (équivalent espace fin typographique)
   - padding complètement supprimé pour éviter les blancs autour du SVG
   - display:inline-block avec !important pour bloquer toute promotion en block
   Applique dans tous les hosts inline (p, li, td, dd, dt, span, em, strong). */
p mjx-container[jax="SVG"]:not([display="true"]),
li mjx-container[jax="SVG"]:not([display="true"]),
td mjx-container[jax="SVG"]:not([display="true"]),
dd mjx-container[jax="SVG"]:not([display="true"]),
dt mjx-container[jax="SVG"]:not([display="true"]),
span mjx-container[jax="SVG"]:not([display="true"]),
em mjx-container[jax="SVG"]:not([display="true"]),
strong mjx-container[jax="SVG"]:not([display="true"]){
  display:inline-block !important;
  margin:0 .05em !important;
  padding:0 !important;
  text-align:left !important;
  /* [FIX v6.43 2026-07-06] On NE force PLUS de décalage fixe (-.08em). Un offset en
     em constant ne peut PAS centrer des formules de PROFONDEUR VARIABLE : il
     descend uniformément toutes les formules, si bien que les formules peu
     profondes (indices/exposants simples) tombent trop BAS et les fractions
     restent trop hautes — d'où le « pas vraiment centré » signalé. MathJax pose
     déjà, en style inline sur chaque conteneur, un vertical-align égal à la
     profondeur RÉELLE de la formule : c'est l'alignement typographiquement correct
     (ligne de base math = ligne de base du texte). On laisse donc MathJax décider
     (inline style prioritaire) et on retombe sur baseline pour les rares formules
     sans profondeur. Les grandes fractions/matrices inline restent promues en
     bloc par promoteTallInlineFormulas. */
  vertical-align:baseline;
  max-width:none;
}
/* [v6.20 2026-07-05] Interligne des paragraphes contenant des formules inline.
   1.7 (héritage v6.5) était trop SERRÉ : dans les cartes de cours riches en LaTeX
   inline, les lignes se touchaient presque et le bloc paraissait compact / peu
   aéré (retour utilisateur + capture). Les formules inline (indices, exposants,
   petits crochets comme 2ℤ[X]) ont une hauteur de boîte > au texte courant : il
   leur faut plus d'air que la prose ordinaire (1.72–1.85). On remonte donc à 1.9,
   au-dessus de la prose simple, pour une lecture aérée sans jamais promouvoir en
   block (les \dfrac / matrices restent promues et gérées à part). */
#chapBody p:has(mjx-container[jax="SVG"]:not([display="true"])),
.box-body p:has(mjx-container[jax="SVG"]:not([display="true"])){
  line-height:1.9;
}
/* Les glyphes MathJax utilisent currentColor : le texte mathématique suit donc la couleur du conteneur, clair comme sombre. */
.toast{position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%) translateY(8px);max-width:min(90vw,420px);text-align:center;background:var(--color-text);color:var(--color-bg);font-family:var(--font-ui);font-size:var(--text-base);font-weight:600;padding:.8rem 1.5rem;border-radius:var(--radius-full);box-shadow:var(--shadow-lg);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Lemme & Corollaire (mêmes familles visuelles que théorème) ---------- */
.box.lemma{border-left:4px solid var(--color-ink-blue)}
.box.lemma .box-head{background:var(--color-ink-blue-soft);color:var(--color-ink-blue)}
.box.cor{border-left:4px solid var(--color-ink-blue)}
.box.cor .box-head{background:var(--color-ink-blue-soft);color:var(--color-ink-blue)}

/* ---------- Hors-programme (signalé nettement, ne se confond pas avec le cours) ---------- */
.box.hp{border:1px dashed var(--color-violet);border-left:4px solid var(--color-violet);background:color-mix(in srgb,var(--color-violet-soft) 45%,var(--color-surface-2))}
.box.hp .box-head{background:var(--color-violet-soft);color:var(--color-violet)}
.box.hp .hp-tag{display:inline-flex;align-items:center;gap:.35em}
.box.hp .hp-tag::before{content:"⚡";font-size:.9em}
.box.hp .box-body{font-size:.97em}

/* ---------- Figures SVG ---------- */
.math-figure{margin:var(--space-6) 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2);overflow:hidden;box-shadow:var(--shadow-sm)}
.math-figure .figure-svg{padding:var(--space-5) var(--space-4);display:flex;justify-content:center;color:var(--color-text)}
/* [FIX figures 2026-07-06] Plafond de hauteur : certaines figures (SVG/PNG au
   viewBox très haut, ex. dipôle dans un champ uniforme) s'étiraient sur toute la
   largeur et occupaient une immense bande verticale quasi vide. On borne la
   hauteur (en gardant le ratio) pour supprimer l'espace gâché sans déformer. */
.math-figure .figure-svg svg{max-width:100%;height:auto;max-height:min(66vh,480px)}
.math-figure .figure-svg .figure-img{max-width:100%;max-height:min(66vh,480px);height:auto;width:auto;object-fit:contain;display:block;border-radius:var(--radius-md);background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.10)}
/* Cartouche clair garanti autour des images (fond blanc) y compris en thème sombre */
.math-figure:has(.figure-img) .figure-svg{background:#fff;padding:var(--space-4)}
/* Schémas SI/SysML inline (remplacent les anciens <pre>) */
.schema-img{display:block;max-width:100%;height:auto;margin:var(--space-4) auto;border-radius:var(--radius-md);background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.10);border:1px solid var(--color-border)}
/* [FIX figures 2026-07-06] Légende plus lisible : interligne aéré, texte un cran
   moins délavé (le muted pur passait mal sous les schémas denses). */
.math-figure figcaption{font-family:var(--font-ui);font-size:var(--text-sm);line-height:1.55;color:var(--color-text);padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-divider);background:var(--color-surface)}
.math-figure figcaption strong{color:var(--color-text)}
/* Conventions de couleur des figures, exposées comme variables réutilisables dans les SVG.
   [FIX figures 2026-07-06] --fig-label passé de « muted » à la couleur de texte
   pleine : les étiquettes (E₀, Γ, vecteurs…) étaient trop pâles / peu lisibles. */
.figure-svg,.interactive-host .fig-canvas{--fig-axis:var(--color-text-faint);--fig-curve:var(--color-ink-blue);--fig-curve2:var(--color-violet);--fig-tangent:var(--color-primary);--fig-area:color-mix(in srgb,var(--color-green) 22%,transparent);--fig-point:var(--color-primary);--fig-grid:var(--color-divider);--fig-label:var(--color-text)}

/* ---------- Tableaux (.tbl) ---------- */
.tbl-wrap{margin:var(--space-6) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2);box-shadow:var(--shadow-sm)}
.tbl{border-collapse:collapse;width:100%;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);line-height:1.45}
/* Tableau autonome (sans .tbl-wrap) : on lui donne quand même un cadre */
.tbl:not(.tbl-wrap .tbl){margin:var(--space-6) 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--color-surface-2)}
.tbl caption{caption-side:top;text-align:left;font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);color:var(--color-text);padding:var(--space-3) var(--space-4) var(--space-2)}
.tbl thead th{background:var(--color-ink-blue-soft);color:var(--color-text);font-weight:700;text-align:left;padding:.6rem .85rem;border-bottom:2px solid var(--color-ink-blue-line);white-space:nowrap}
.tbl tbody th{background:var(--color-surface-offset);font-weight:600;text-align:left}
.tbl th,.tbl td{padding:.55rem .85rem;border-bottom:1px solid var(--color-divider);border-right:1px solid var(--color-divider);text-align:center;vertical-align:middle}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th:last-child,.tbl td:last-child{border-right:none}
.tbl tbody tr:last-child td,.tbl tbody tr:last-child th{border-bottom:none}
.tbl tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-surface-offset) 45%,transparent)}
.tbl tbody tr:hover td{background:var(--color-primary-soft)}
/* Cellules de valeur logique vrai/faux */
.tbl .val-V{color:var(--color-green);font-weight:700}
.tbl .val-F{color:var(--color-primary);font-weight:700}
.tbl.tbl-compact th,.tbl.tbl-compact td{padding:.4rem .6rem}
@media (max-width:600px){.tbl{font-size:.8rem}.tbl th,.tbl td{padding:.45rem .55rem}}

/* Fallback : tout <table> brut dans le contenu (sans classe .tbl) reçoit le style des tableaux */
#view table:not(.tbl){border-collapse:collapse;width:auto;max-width:100%;margin:var(--space-6) 0;font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);line-height:1.45;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--color-surface-2);display:block;overflow-x:auto}
#view table:not(.tbl) thead th{background:var(--color-ink-blue-soft);color:var(--color-text);font-weight:700;text-align:left;padding:.6rem .85rem;border-bottom:2px solid var(--color-ink-blue-line)}
#view table:not(.tbl) th,#view table:not(.tbl) td{padding:.55rem .85rem;border-bottom:1px solid var(--color-divider);border-right:1px solid var(--color-divider);text-align:center;vertical-align:middle}
#view table:not(.tbl) th:first-child,#view table:not(.tbl) td:first-child{text-align:left}
#view table:not(.tbl) th:last-child,#view table:not(.tbl) td:last-child{border-right:none}
#view table:not(.tbl) tbody tr:last-child td{border-bottom:none}
#view table:not(.tbl) tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--color-surface-offset) 45%,transparent)}
#view table:not(.tbl) tbody tr:hover td{background:var(--color-primary-soft)}

/* ---------- Widgets interactifs ---------- */
.interactive-fig .box-head{padding:.5rem var(--space-4);font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;background:var(--color-amber-soft);color:var(--color-amber);display:flex;align-items:center;gap:var(--space-2)}
.interactive-fig .interactive-tag{display:inline-flex;align-items:center;gap:.35em}
.interactive-fig .interactive-tag::before{content:"▸"}
.interactive-host{padding:var(--space-5) var(--space-4)}
/* [FIX figures 2026-07-06] Le dessin d'un widget interactif (ex. onde plane O.P.P.)
   apparaissait minuscule et perdu dans la carte. On lui donne toute la largeur
   utile (avec plafond de hauteur pour ne pas dominer l'écran) et un espace propre
   au-dessus des commandes. */
.interactive-host .fig-canvas{display:flex;justify-content:center;color:var(--color-text)}
.interactive-host .fig-canvas svg,.interactive-host .fig-canvas canvas{width:100%;max-width:100%;height:auto;max-height:min(52vh,380px)}
.interactive-controls{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-4);font-family:var(--font-ui)}
.interactive-controls .ctl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--space-3);font-size:var(--text-sm)}
.interactive-controls .ctl-label{color:var(--color-text-muted);min-width:5.5em}
.interactive-controls .ctl-val{font-weight:700;color:var(--color-primary);min-width:3.5em;text-align:right;font-variant-numeric:tabular-nums}
/* [FIX figures 2026-07-06] Style de slider/bouton élargi à TOUT le host interactif
   (et plus seulement à .interactive-controls) : les widgets qui posent leurs propres
   commandes brutes (curseur « Fréquence », bouton « Pause » de l'O.P.P.) héritent
   ainsi d'un rendu net et intégré au lieu des contrôles natifs bruts. */
.interactive-host input[type=range],.interactive-controls input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:var(--radius-full);background:var(--color-surface-offset);outline:none;cursor:pointer}
.interactive-host input[type=range]::-webkit-slider-thumb,.interactive-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-surface-2);box-shadow:var(--shadow-sm)}
.interactive-host input[type=range]::-moz-range-thumb,.interactive-controls input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid var(--color-surface-2)}
.interactive-host button{font-family:var(--font-ui);font-weight:600;font-size:var(--text-sm);padding:.4rem .9rem;border-radius:var(--radius-full);border:1px solid var(--color-primary-line);background:var(--color-primary-soft);color:var(--color-primary);transition:background var(--transition),border-color var(--transition)}
.interactive-host button:hover{background:var(--color-primary);color:var(--color-surface-2);border-color:var(--color-primary)}
.interactive-readout{margin-top:var(--space-3);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted)}
.interactive-readout b{color:var(--color-text)}

/* ---------- Groupe éval (Quiz + Flashcards) : pills dorées, même rangée ---------- */
.tab.tab-quiz{border-color:var(--color-gold-line);color:var(--color-gold-hover);background:var(--color-gold-soft)}
.tab.tab-quiz:hover{border-color:var(--color-gold);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.tab.tab-quiz.active{background:var(--color-gold);color:#1a1407;border-color:var(--color-gold)}
.tab.tab-fc{border-color:var(--color-gold-line);color:var(--color-gold-hover);background:var(--color-gold-soft)}
.tab.tab-fc:hover{border-color:var(--color-gold);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.tab.tab-fc::after{display:none}

/* ---------- Bandeau d'en-tête de la section quiz ---------- */
.quiz-banner{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-primary-soft);border:1px solid var(--color-primary-line);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin:var(--space-5) 0}
.quiz-banner .qb-icon{color:var(--color-primary);flex-shrink:0;margin-top:.15rem}
.quiz-banner strong{font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-primary);display:block}
.quiz-banner p{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin:.25rem 0 0;max-width:60ch}

/* ---------- Responsive ---------- */
/* [V16 + FIX largeur cours 2026-07-05] Gouttière droite du contenu.
   Deux éléments fixes vivent au bord droit : le rail TOC « Dans ce chapitre »
   (.chapter-toc, ~100px au repos) et le bouton flottant « Tuteur »
   (.ai-tutor-root, bottom-right). Depuis l'élargissement de .content (1200px),
   la colonne remplit toute la zone .main sur les écrans « desktop moyens » et
   viendrait passer SOUS ces éléments. On réserve donc une gouttière droite tant
   que la colonne touche le bord (jusqu'à ~1560px) ; au-delà, la marge centrée
   naturelle suffit et on n'ajoute rien (pas d'espace gâché sur très grand écran).
   Gouttière resserrée par rapport à l'ancienne (174px → 134px) pour rendre au
   contenu la largeur que l'utilisateur trouvait gâchée. */
@media (min-width:1025px) and (max-width:1560px){
  .content{padding-right:calc(var(--space-6) + 110px)}
}
.backdrop{display:none;position:fixed;inset:0;top:var(--header-h);background:rgba(20,15,10,.4);z-index:35}
@media (max-width:1024px){
  .menu-toggle{display:inline-flex}
  .sidebar{transform:translateX(-100%);transition:transform .3s cubic-bezier(.16,1,.3,1);box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .backdrop.open{display:block}
  .search-trigger{min-width:0;flex:1 1 auto;padding:.5rem .8rem;max-width:none}
  .search-trigger .label{display:none}
}
@media (max-width:600px){
  .content{padding:var(--space-5) var(--space-4) var(--space-20)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .btn{justify-content:center}
  .flashcard{height:340px}
  .app-header .brand small{display:none}
  /* Tap targets WCAG (min 44px) pour les boutons icônes de la barre sup.
     [V18 fix] On exclut .theme-switch : c'est une pilule 54×28 volontairement
     plus large que haute (design switch), pas un bouton icône carré. */
  .icon-btn:not(.theme-switch){min-width:44px;min-height:44px;width:44px;height:44px}
  /* .theme-switch garde ses dimensions pilule définies plus bas + zone tap suffisante via padding. */
  .theme-switch{min-width:84px;min-height:30px}
  /* Bulle Focus : éloignée du bord droit + safe-area iOS pour éviter la collision
     avec les badges (étoile favoris) et l'assistant IA en bas à droite. */
  .focus-bubble{
    right:calc(env(safe-area-inset-right,0) + 1rem);
    bottom:calc(env(safe-area-inset-bottom,0) + 5.5rem);
  }
  /* Titres de groupes chapitres légèrement plus aérés. */
  .nav-group-head{padding:.6rem .7rem .6rem .95rem}
  /* Liens de chapitres avec tap target confortable. */
  .nav-group .nav-link{padding-top:.55rem;padding-bottom:.55rem}
}

/* Mémo Python (fiche ITC) + code inline dans les fiches */
.py-memo{margin:0;padding-left:1.1rem}
.py-memo li{margin:.45rem 0;line-height:1.5}
.py-memo code, .box-body code{background:rgba(127,127,127,.14);padding:.08em .35em;border-radius:4px;font-size:.92em;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.box-body ul li{margin:.6rem 0;line-height:1.6}

/* ============================================================================
   BLOCS DE CODE PYTHON — rendu moderne et sobre + coloration syntaxique
   Remplace l'encadré gris brut du navigateur par une carte propre, avec un
   fin liseré doré Polaris à gauche. Couleurs des tokens définies par thème.
   ============================================================================ */
:root{
  --code-bg:#fbfaf6;
  --code-border:#e3e0d6;
  --code-text:#1f2a3d;
  --tok-kw:#9a3b6e;      /* mots-clés : def, if, for, return… */
  --tok-fn:#1a6f7e;      /* fonctions natives : print, len, range… */
  --tok-call:#3a4a7a;    /* appels de fonctions définies */
  --tok-str:#2f6b3a;     /* chaînes de caractères */
  --tok-com:#6f6a5d;     /* commentaires (contraste renforcé) */
  --tok-num:#9a6312;     /* nombres */
  --tok-dec:#9a6312;     /* décorateurs @ */
}
[data-theme="dark"]{
  --code-bg:#0c1830;
  --code-border:#26324b;
  --code-text:#e2e8f4;
  --tok-kw:#e58fb6;
  --tok-fn:#5fc5d4;
  --tok-call:#9db4e8;
  --tok-str:#86d59a;
  --tok-com:#7c8499;
  --tok-num:#e0b070;
  --tok-dec:#e0b070;
}
pre{
  margin:1.1rem 0;
  background:var(--code-bg);
  border:1px solid var(--code-border);
  border-left:3px solid var(--color-gold);
  border-radius:var(--radius-md);
  padding:.95rem 1.1rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-sm);
  position:relative;
}
/* Petit badge « Python » discret en haut à droite des blocs coloriés. */
pre.code-block{padding-top:1.6rem}
pre.code-block::before{
  content:"Python";
  position:absolute;top:.45rem;left:.9rem;
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-text-faint);
  opacity:.75;pointer-events:none;
}
/* Bouton « Copier » du bloc de code (en haut à droite). */
.code-copy{
  position:absolute;top:.35rem;right:.45rem;z-index:2;
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .5rem;cursor:pointer;
  font-family:var(--font-ui);font-size:.66rem;font-weight:600;
  color:var(--color-text-faint);
  background:var(--code-bg);
  border:1px solid var(--code-border);border-radius:var(--radius-sm,6px);
  opacity:.65;transition:opacity .12s ease,color .12s ease,border-color .12s ease}
pre:hover .code-copy{opacity:1}
.code-copy:hover{color:var(--color-gold);border-color:var(--color-gold)}
.code-copy svg{width:.95em;height:.95em}
.code-copy.ok{color:#2e9d5b;border-color:#2e9d5b;opacity:1}
@media(max-width:640px){.code-copy span{display:none}.code-copy{padding:.25rem}}
pre code{
  display:block;
  background:none;
  padding:0;
  border:0;
  border-radius:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:.86rem;
  line-height:1.65;
  color:var(--code-text);
  white-space:pre;
  tab-size:4;
}
pre code .tok-kw{color:var(--tok-kw);font-weight:600}
pre code .tok-fn{color:var(--tok-fn)}
pre code .tok-call{color:var(--tok-call)}
pre code .tok-str{color:var(--tok-str)}
pre code .tok-com{color:var(--tok-com);font-style:italic}
pre code .tok-num{color:var(--tok-num)}
pre code .tok-dec{color:var(--tok-dec);font-weight:600}
/* Barre de défilement discrète pour les lignes longues */
pre::-webkit-scrollbar{height:8px}
pre::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}
pre::-webkit-scrollbar-track{background:transparent}

/* ============================================================================
   FICHE DE RÉVISION — refonte lisible (pleine largeur, formules protégées)
   ============================================================================ */
.fiche-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;margin:1.5rem 0 1.75rem;padding-bottom:1.25rem;border-bottom:2px solid var(--color-divider)}
.fiche-head .fiche-star{font-size:1.6rem;color:var(--color-primary);line-height:1}
.fiche-head h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);font-weight:800;color:var(--color-text);margin:0}
.fiche-head p{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin:0;max-width:36rem}
.fiche-resume{font-size:1.02rem;line-height:1.9;margin-bottom:1rem}
/* --- Alignement robuste des listes du résumé (formules inline hautes : dfrac, fractions) --- */
.fiche-resume h4{margin:1.4rem 0 .55rem;font-family:var(--font-ui);font-size:1.05rem;font-weight:700;color:var(--color-text);letter-spacing:.01em}
.fiche-resume h4:first-child{margin-top:.2rem}
.fiche-resume ul{list-style:none;margin:0 0 .4rem;padding:0;display:flex;flex-direction:column;gap:.7rem}
.fiche-resume li{padding-left:1.5rem;line-height:1.9;color:var(--color-text);text-indent:-1.5rem}
/* Puce INLINE (dans le flux, pas absolue) : suit toujours la première ligne de texte,
   quelle que soit la hauteur induite par une fraction inline. La puce ne grandit jamais la ligne. */
.fiche-resume li::before{content:"\2022";color:var(--color-primary);font-weight:700;
  display:inline-block;width:1.5rem;text-indent:0;text-align:left;
  vertical-align:baseline;line-height:inherit;font-size:1.05em}
/* Formules inline dans les listes : ne PAS laisser une grande fraction écarter la ligne.
   On limite leur impact vertical pour que puce + texte + formule restent sur une base commune. */
.fiche-resume li mjx-container{max-width:100%}
.fiche-resume li mjx-container[jax="SVG"]:not([display="true"]){vertical-align:-0.32ex}
.fiche-resume li mjx-container[display="true"]{text-align:left;margin:.4rem 0;overflow-x:auto;overflow-y:hidden}

/* Une seule colonne large : chaque section empilée. Plus jamais de colonnes étroites. */
.fiche-grid{display:flex;flex-direction:column;gap:1.1rem}
.fiche-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);
  box-shadow:var(--shadow-sm);overflow:hidden}
.fiche-card-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;
  border-bottom:1px solid var(--color-divider);background:var(--color-surface-offset)}
.fiche-card-head .fiche-ic{font-size:1.15rem;line-height:1;flex:none}
.fiche-card-head h3{font-family:var(--font-ui);font-size:1.02rem;font-weight:700;color:var(--color-text);margin:0;letter-spacing:.01em}
.fiche-list{margin:0;padding:1rem 1.15rem 1.1rem 2.1rem;display:flex;flex-direction:column;gap:.7rem}
.fiche-list li{line-height:1.7;font-size:1rem;color:var(--color-text)}
.fiche-list li::marker{color:var(--color-primary)}
/* Formules : on autorise un défilement horizontal interne plutôt qu'un débordement/chevauchement */
.fiche-list li mjx-container{max-width:100%}
.fiche-list li mjx-container[display="true"]{overflow-x:auto;overflow-y:hidden;padding:.3rem 0;margin:.35rem 0}

/* Bandeau coloré à gauche par catégorie (accent visuel fort) */
.fiche-card{border-left:4px solid var(--color-border)}
.fiche-def{border-left-color:#2f6bb3}
.fiche-thm{border-left-color:var(--color-primary)}
.fiche-formula{border-left-color:#1d7a5f}
.fiche-method{border-left-color:#7a4fb0}
.fiche-pitfall{border-left-color:#b3681e}
.fiche-def .fiche-card-head .fiche-ic{filter:none}

/* ============================================================================
   ÉCRAN DE CONNEXION REQUISE (gate) sur le contenu d'un chapitre
   ============================================================================ */
.gate-screen{display:grid;place-items:center;min-height:60vh;padding:2rem 1rem}
.gate-card{max-width:34rem;text-align:center;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:clamp(1.75rem,5vw,2.75rem)}
.gate-icon{font-size:2.4rem;line-height:1;margin-bottom:.85rem}
.gate-card h1{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;color:var(--color-text);margin:0 0 .75rem}
.gate-card p{font-family:var(--font-ui);font-size:1rem;line-height:1.65;color:var(--color-text-muted);margin:0 0 1.5rem}
.gate-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}

/* ============================================================================
   BOUTONS D'EN-TÊTE : Connexion / Admin / Déconnexion
   ============================================================================ */
.auth-slot{display:flex;align-items:center;gap:.5rem}
.hdr-btn{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:var(--text-sm);
  font-weight:600;padding:.45rem .9rem;border-radius:var(--radius-full);border:1px solid var(--color-border);
  background:transparent;color:var(--color-text);cursor:pointer;line-height:1;transition:background var(--transition),border-color var(--transition)}
.hdr-btn:hover{background:var(--color-surface-offset);text-decoration:none}
.hdr-login{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.hdr-login:hover{background:var(--color-primary-hover);color:#fff}
.hdr-admin{border-color:var(--color-primary-line);color:var(--color-primary)}
.hdr-admin:hover{background:var(--color-primary-soft);color:var(--color-primary)}
@media (max-width:640px){
  .auth-slot .hdr-btn{padding:.4rem .7rem;font-size:.8rem}
}

/* ---------- Menu profil (avatar + popover) + modale ---------- */
.btn{cursor:pointer}
.profile-menu{position:relative;display:inline-flex}
.profile-avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:var(--radius-full);
  border:1px solid var(--color-primary-line);
  background:var(--color-primary);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:.8rem;letter-spacing:.02em;
  cursor:pointer;transition:transform .12s,box-shadow .12s;
}
[data-theme=dark] .profile-avatar{color:var(--color-bg)}
.profile-avatar:hover{box-shadow:0 0 0 3px var(--color-primary-soft)}
.profile-avatar:active{transform:scale(.96)}
.profile-avatar.has-img{background:var(--color-surface-2);padding:0;overflow:hidden}
.profile-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.profile-avatar-emoji{font-size:1.15rem;line-height:1}
.profile-avatar:has(.profile-avatar-emoji){background:var(--color-surface-2);border-color:var(--color-border)}
.pm-photo-preview .profile-avatar-emoji{font-size:1.7rem}
/* Grille d'avatars emoji */
.pm-emoji{margin:.4rem 0 .2rem}
.pm-emoji-mini{font-size:.72rem;font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin:.45rem 0 .25rem}
.pm-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.3rem}
.pm-emoji-recent{grid-template-columns:repeat(8,1fr)}
.pm-emoji-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:1;font-size:1.15rem;line-height:1;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:transform .1s,box-shadow .12s,border-color .12s;padding:0}
.pm-emoji-cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--color-gold-line)}
.pm-emoji-cell.is-sel{border-color:var(--color-gold);box-shadow:0 0 0 2px var(--color-gold-soft)}
.pm-emoji-clear{margin-top:.5rem;font-size:.8rem}
.pm-emoji-bonus{margin-top:.25rem}
.pm-bonus.is-sel{border-color:var(--color-gold);box-shadow:0 0 0 2px var(--color-gold-soft)}
.pm-locked{position:relative;cursor:not-allowed;opacity:.55;background:var(--color-surface-offset)}
.pm-locked .pm-lock-emoji{filter:grayscale(1);opacity:.5;font-size:1.1rem}
.pm-lock-badge{position:absolute;bottom:-2px;right:-2px;font-size:.56rem;font-weight:700;font-family:var(--font-ui);color:var(--color-text-inverse);background:var(--color-text-muted);border-radius:var(--radius-full);padding:.02rem .28rem;line-height:1.25;border:1px solid var(--color-surface)}
@media (max-width:460px){.pm-emoji-grid{grid-template-columns:repeat(6,1fr)}}

/* ---- Bloc photo dans la modale profil ---- */
.pm-photo{display:flex;align-items:center;gap:1rem;margin:.25rem 0 .5rem}
.pm-photo-preview{
  position:relative;flex:0 0 auto;
  width:64px;height:64px;border-radius:var(--radius-full);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--color-primary);color:#fff;
  font-family:var(--font-ui);font-weight:700;font-size:1.25rem;letter-spacing:.02em;
  border:1px solid var(--color-primary-line);overflow:hidden;
}
[data-theme=dark] .pm-photo-preview{color:var(--color-bg)}
.pm-photo-preview.has-img{background:var(--color-surface-2);padding:0}
.pm-photo-preview .profile-avatar-img{width:100%;height:100%;object-fit:cover}
.pm-photo-preview.is-busy::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(0,0,0,.35);
}
.pm-photo-ctrls{flex:1 1 auto;min-width:0}
.pm-photo-btns{display:flex;gap:.5rem;margin-top:.35rem;flex-wrap:wrap}
.btn-sm{padding:.32rem .7rem;font-size:.82rem}
.pm-photo-del{color:var(--color-danger,#c0392b)}
.pm-photo-hint{font-size:.72rem;color:var(--color-text-soft);margin-top:.4rem}

.profile-pop{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:60;
  min-width:210px;background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:.4rem;overflow:hidden;
}
.profile-pop[hidden]{display:none}
.profile-pop-head{padding:.55rem .6rem .6rem;border-bottom:1px solid var(--color-border);margin-bottom:.35rem}
.profile-pop-name{font-family:var(--font-ui);font-weight:700;font-size:.9rem;color:var(--color-text)}
.profile-pop-mail{font-size:.78rem;color:var(--color-text-muted);margin-top:.1rem;word-break:break-all}
.profile-pop-meta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.3rem}
.profile-pop-cio,.profile-pop-pronoms{font-family:var(--font-ui);font-size:.7rem;font-weight:600;padding:.1rem .45rem;border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-soft);background:var(--color-surface-2)}
.profile-pop-cio{color:var(--color-gold-hover);border-color:var(--color-gold-line);background:var(--color-gold-soft)}
.profile-pop-role{
  display:inline-block;margin-top:.4rem;font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-primary);background:var(--color-primary-soft);
  border:1px solid var(--color-primary-line);
  padding:.1rem .45rem;border-radius:var(--radius-full);
}
.profile-pop-item{
  display:block;width:100%;text-align:left;
  font-family:var(--font-ui);font-size:.85rem;font-weight:500;color:var(--color-text);
  background:none;border:none;border-radius:var(--radius-md);
  padding:.55rem .6rem;cursor:pointer;transition:background .12s,color .12s;
}
.profile-pop-item:hover{background:var(--color-surface-offset)}
.profile-pop-danger{color:#b3261e}
[data-theme=dark] .profile-pop-danger{color:#f0a8a2}
.profile-pop-danger:hover{background:color-mix(in srgb,#b3261e 12%,transparent)}

/* Fond d'isolement du menu profil : invisible sur desktop (le popover suffit),
   assombri sur mobile pour que le menu ne se superpose plus au texte. */
.profile-pop-backdrop{display:none}
@media (max-width:760px){
  .profile-pop-backdrop{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(20,15,10,.45);backdrop-filter:blur(2px);
  }
  /* Le menu profil devient une feuille ancrée proprement sous l'en-tête,
     pleine largeur, bien détachée du contenu (ombre forte + fond opaque). */
  .profile-pop{
    position:fixed;top:calc(var(--header-h) + .4rem);
    right:var(--space-3);left:var(--space-3);
    min-width:0;width:auto;z-index:60;
    box-shadow:var(--shadow-lg),0 0 0 100vmax rgba(0,0,0,0);
    padding:.5rem;
  }
  .profile-pop-item{padding:.7rem .6rem;font-size:.92rem}
}

.profile-modal-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(20,15,10,.55);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:1rem;
}
.profile-modal{
  width:100%;max-width:420px;background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);padding:1.5rem 1.5rem 1.25rem;position:relative;
  /* La modale ne doit jamais dépasser l'écran : on la rend scrollable. */
  max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;
}
.profile-modal::-webkit-scrollbar{width:10px}
.profile-modal::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:8px;border:3px solid var(--color-surface-2)}
/* En-tête sticky pour garder titre + bouton fermer visibles au scroll. */
.profile-modal{padding-top:0}
.profile-modal-sticky{position:sticky;top:0;z-index:3;background:var(--color-surface-2);padding:1.4rem 0 .6rem;margin-bottom:.2rem;border-bottom:1px solid var(--color-border)}
.profile-modal h2{font-family:var(--font-ui);font-size:1.15rem;font-weight:700;color:var(--color-text);margin:0}
.profile-modal-close{
  position:absolute;top:.7rem;right:.7rem;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.3rem;line-height:1;color:var(--color-text-muted);
  background:none;border:none;border-radius:var(--radius-md);cursor:pointer;
}
.profile-modal-close:hover{background:var(--color-surface-offset);color:var(--color-text)}
.pm-sub{font-size:.82rem;color:var(--color-text-muted);margin:.25rem 0 1rem;word-break:break-all}
.pm-label{display:block;font-family:var(--font-ui);font-weight:600;font-size:.82rem;color:var(--color-text);margin:.7rem 0 .3rem}
.pm-opt{font-weight:400;color:var(--color-text-faint);font-size:.76rem}
.pm-input{
  width:100%;font-family:var(--font-ui);font-size:.9rem;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.55rem .7rem;transition:border-color .15s;
}
.pm-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.pm-divider{height:1px;background:var(--color-border);margin:1.1rem 0 .2rem}
.pm-msg{margin-top:.9rem;font-size:.82rem;font-weight:500;padding:.5rem .65rem;border-radius:var(--radius-md)}
.pm-msg[hidden]{display:none}
.pm-msg.ok{color:#1a7f4b;background:color-mix(in srgb,#1a7f4b 12%,transparent)}
.pm-msg.err{color:#b3261e;background:color-mix(in srgb,#b3261e 12%,transparent)}
[data-theme=dark] .pm-msg.ok{color:#7fd6a3}
[data-theme=dark] .pm-msg.err{color:#f0a8a2}
.pm-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}

/* ---- Page Ma progression : liste des chapitres ---- */
.prog-list{display:flex;flex-direction:column;gap:.4rem;margin:0 0 1.6rem}
.prog-row{display:flex;align-items:center;gap:.75rem;padding:.6rem .85rem;border:1px solid var(--color-border);border-radius:10px;background:var(--color-surface);text-decoration:none;color:var(--color-text);transition:background .15s ease,border-color .15s ease}
.prog-row:hover{background:var(--color-surface-offset);border-color:var(--color-primary-line,var(--color-border))}
.prog-dot{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}
.prog-dot.todo{border:2px solid var(--color-border);border-radius:50%;width:16px;height:16px}
.prog-num{flex:0 0 auto;min-width:1.6rem;text-align:center;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;color:var(--color-text-muted)}
.prog-title{flex:1 1 auto;font-family:var(--font-ui);font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-meta{flex:0 0 auto;display:inline-flex;align-items:center;gap:.6rem;color:var(--color-text-muted)}
.prog-state{font-family:var(--font-ui);font-size:var(--text-sm)}
.prog-badge{font-family:var(--font-ui);font-size:.72rem;font-weight:700;padding:.1rem .4rem;border:1px solid currentColor;border-radius:6px;white-space:nowrap}
@media(max-width:560px){.prog-state{display:none}}

/* ============================================================================
   Micro-interactions & animations (ajout — esthétique "vivant")
   Tout est désactivé automatiquement si prefers-reduced-motion: reduce (voir
   la règle globale ligne ~114). On garde des effets discrets et rapides.
   ========================================================================== */

/* --- Apparition douce du contenu à chaque changement de vue --------------- */
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#view.view-enter{animation:viewIn .34s cubic-bezier(.16,1,.3,1) both}

/* --- Cartes de chapitre : survol plus organique + appui ------------------- */
.chapter-card{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease}
.chapter-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px -10px color-mix(in srgb,var(--color-primary) 38%,transparent),var(--shadow-md)}
.chapter-card:active{transform:translateY(-1px) scale(.992);transition-duration:.08s}
/* léger glissement de l'éclairage du badge au survol */
.chapter-card .domain{transition:transform .22s cubic-bezier(.16,1,.3,1)}
.chapter-card:hover .domain{transform:translateY(-1px)}
/* la barre de progression "respire" au survol */
.chapter-card:hover .chk > span{filter:brightness(1.08)}

/* --- Boutons : ressenti tactile (survol soulève, clic enfonce) ------------ */
.btn{transition:transform .16s cubic-bezier(.16,1,.3,1),background var(--transition),border-color var(--transition),box-shadow .16s ease}
.btn-primary:hover{box-shadow:0 6px 18px -8px color-mix(in srgb,var(--color-primary) 60%,transparent);transform:translateY(-1px)}
.btn-ghost:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.06s}
.hdr-btn{transition:transform .16s cubic-bezier(.16,1,.3,1),background var(--transition)}
.hdr-btn:hover{transform:translateY(-1px)}
.hdr-btn:active{transform:scale(.95);transition-duration:.06s}
.chip{transition:transform .16s cubic-bezier(.16,1,.3,1),background var(--transition),border-color var(--transition),color var(--transition)}
.chip:hover:not(.active){transform:translateY(-1px)}
.chip:active{transform:scale(.95);transition-duration:.06s}
.year-btn:active{transform:scale(.95)}

/* --- Onglets : soulignement qui glisse ------------------------------------ */
.tab{transition:color var(--transition)}
.tab::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--color-primary);transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.16,1,.3,1)}
.tab{position:relative}
.tab:hover::after{transform:scaleX(.5)}
.tab.active::after{transform:scaleX(1)}

/* --- Spinner de chargement (boutons en cours d'action) -------------------- */
@keyframes btnSpin{to{transform:rotate(360deg)}}
.btn.is-loading,.auth-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.btn.is-loading::after,.auth-btn.is-loading::after{
  content:"";position:absolute;top:50%;left:50%;width:1.05em;height:1.05em;margin:-.525em 0 0 -.525em;
  border:2px solid currentColor;border-top-color:transparent;border-radius:50%;
  color:#fff;opacity:.9;animation:btnSpin .6s linear infinite}
[data-theme=dark] .btn-primary.is-loading::after,[data-theme=dark] .auth-btn.is-loading::after{color:var(--color-bg)}

/* --- Avatar profil : pulse léger au survol -------------------------------- */
.profile-avatar{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease}
.profile-avatar:hover{transform:scale(1.06)}

/* --- Items de navigation latérale : glissement au survol ------------------ */
.nav-item,.sidebar a{transition:background var(--transition),color var(--transition),transform .16s cubic-bezier(.16,1,.3,1)}
.nav-item:hover,.sidebar a:hover{transform:translateX(2px)}

/* --- Résultats de recherche : survol qui glisse --------------------------- */
.search-result{transition:background var(--transition),transform .14s cubic-bezier(.16,1,.3,1)}
.search-result:hover{transform:translateX(3px)}

/* ====================================================================== */
/* RAPPELS GRAPHIQUES POLARIS — petites touches étoile / orbite / étincelle */
/* Sobre, discret : un site de révisions reste lisible avant tout.         */
/* ====================================================================== */

/* Étincelle dorée devant les titres de section */
.section-head h2{position:relative}
.section-head h2::before{
  content:"\2726"; /* ✦ */
  color:var(--color-gold);
  font-size:.62em;
  margin-right:.5em;
  vertical-align:.18em;
  opacity:.85;
}

/* Filigrane étoile très discret derrière le hero d'accueil */
.hero-brand{position:relative;overflow:visible}
.hero-brand::before{
  content:"";
  position:absolute;
  top:-18px;left:-26px;
  width:54px;height:54px;
  background:url("assets/polaris-star.png") center/contain no-repeat;
  opacity:.10;
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
}
.hero-brand .hero-text,.hero-brand .hero-illus{position:relative;z-index:1}

/* Ciel étoilé animé (canvas) derrière le héro d'accueil */
.hero-brand{overflow:hidden}
.hero-sky{position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;display:block;
  -webkit-mask-image:radial-gradient(120% 100% at 70% 30%,#000 55%,transparent 100%);
  mask-image:radial-gradient(120% 100% at 70% 30%,#000 55%,transparent 100%)}

/* Petites étincelles dorées de part et d'autre des séparateurs centrés */
.divider-star{display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:var(--space-10) 0;color:var(--color-gold)}
.divider-star::before,.divider-star::after{content:"";height:1px;width:70px;
  background:linear-gradient(90deg,transparent,var(--color-gold-line,#e3d6b0));}
.divider-star span{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;
  font-family:var(--font-ui);color:var(--color-text-muted)}
.divider-star .glyph{color:var(--color-gold);font-size:.85rem}

/* Carte matière : fine orbite dorée qui apparaît au survol */
.subject-card{position:relative;overflow:hidden}
.subject-card::after{
  content:"";
  position:absolute;
  right:-40px;bottom:-40px;
  width:120px;height:120px;
  border:1.5px solid var(--color-gold);
  border-radius:50%;
  transform:rotate(-24deg) scaleY(.42);
  opacity:0;
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.subject-card:hover::after{opacity:.22;transform:rotate(-24deg) scaleY(.42) scale(1.08)}

/* Puce dorée en forme d'étincelle pour les listes de résumé / points clés */
.resume-list li::marker,.key-points li::marker{color:var(--color-gold)}

/* Étincelle discrète dans le pied de page / mentions */
.app-footer .spark,.page-foot .spark{color:var(--color-gold);margin:0 .4rem}

/* Mode sombre : on garde l'or visible mais on adoucit le filigrane */
[data-theme=dark] .hero-brand::before{opacity:.14}
[data-theme=dark] .section-head h2::before{opacity:.95}

/* ---------- Easter egg : mini-jeu caché « Polaris Run » ---------- */
.pl-game-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,11,22,.72);backdrop-filter:blur(6px);animation:plFade .25s ease}
@keyframes plFade{from{opacity:0}to{opacity:1}}
/* [FIX 2026-07-03 soir] Modal Polaris élargi de 760 → 1080 pour laisser
   place au canvas agrandi (1024×360). 95vw sur écran plus étroit. */
.pl-game{position:relative;width:min(1080px,95vw);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-xl,18px);
  box-shadow:0 24px 70px rgba(0,0,0,.5);overflow:hidden;font-family:var(--font-ui)}
.pl-game-head{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;
  border-bottom:1px solid var(--color-border);background:var(--color-surface-2)}
.pl-game-head .pl-star{color:var(--color-gold);font-size:1.1rem}
.pl-game-head h3{font-family:var(--font-display);font-size:1.05rem;font-weight:800;margin:0;color:var(--color-text)}
.pl-game-head .pl-sub{font-size:.74rem;color:var(--color-text-muted);margin-left:.2rem}
.pl-game-close{margin-left:auto;background:transparent;border:0;color:var(--color-text-muted);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:.1rem .4rem;border-radius:8px}
.pl-game-close:hover{color:var(--color-text);background:var(--color-surface-offset)}
.pl-game canvas{display:block;width:100%;height:auto;background:
  linear-gradient(180deg,#0a1426 0%,#0e1d38 60%,#13223d 100%);cursor:pointer}
/* [T31] Page Outils : calculatrice NumWorks + tableau périodique Ptable (iframes officiels) */
/* [V33] Refonte premium : onglets avec icônes, header d'outil badge+plein écran, skeleton loader, ombres renforcées */
.outils-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 1rem}
.outils-tab{display:inline-flex;align-items:center;gap:.5rem;font:inherit;
  font-size:.92rem;font-weight:600;cursor:pointer;line-height:1;
  background:var(--color-surface-2);color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:10px;padding:.55rem 1rem;
  transition:background .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s}
.outils-tab svg{flex-shrink:0}
.outils-tab:hover{color:var(--color-text);border-color:var(--color-primary);
  transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.outils-tab.is-on{background:var(--color-primary);color:#fff;border-color:var(--color-primary);
  box-shadow:0 6px 18px color-mix(in srgb, var(--color-primary) 30%, transparent)}
.outils-tab:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* Header contextuel de l'outil actif : badge éditeur à gauche, bouton plein écran à droite */
.outils-tool-header{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1rem;
  padding:.75rem 1rem;margin-bottom:.8rem;
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:12px}
.outils-tool-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem;flex:1 1 auto;min-width:0}
.outils-tool-badge{display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .65rem;border-radius:999px;font-size:.78rem;font-weight:700;
  letter-spacing:.02em;color:var(--color-primary);
  background:color-mix(in srgb, var(--color-primary) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--color-primary) 20%, transparent)}
.outils-tool-badge svg{flex-shrink:0}
.outils-tool-desc{font-size:.85rem;color:var(--color-text-muted);line-height:1.35}
.outils-tool-expand{display:inline-flex;align-items:center;gap:.4rem;
  padding:.45rem .8rem;border-radius:8px;font-size:.82rem;font-weight:600;
  color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border);text-decoration:none;
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.outils-tool-expand:hover{color:var(--color-primary);border-color:var(--color-primary);
  background:color-mix(in srgb, var(--color-primary) 6%, var(--color-surface))}
.outils-tool-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.outils-tool-expand svg{flex-shrink:0}
/* Iframe : encadrement premium avec ombre marquée (→ plus détaché de la page) */
.outils-frame-wrap{position:relative;width:100%;border:1px solid var(--color-border);
  border-radius:14px;overflow:hidden;background:var(--color-surface-2);
  box-shadow:0 8px 28px rgba(10,20,45,.10),0 2px 6px rgba(10,20,45,.06);
  min-height:320px}
.outils-frame{display:block;width:100%;height:min(78vh,720px);border:0;background:#fff;
  opacity:0;transition:opacity .3s ease}
.outils-frame.is-loaded{opacity:1}
/* Skeleton loader affiché pendant que l'iframe charge */
.outils-skeleton{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:.7rem;background:linear-gradient(180deg,var(--color-surface-2) 0%,var(--color-surface) 100%);
  color:var(--color-text-muted);font-size:.9rem;font-weight:500;pointer-events:none}
.outils-skeleton-spinner{width:18px;height:18px;border-radius:50%;
  border:2px solid var(--color-border);border-top-color:var(--color-primary);
  animation:outils-spin .8s linear infinite}
@keyframes outils-spin{to{transform:rotate(360deg)}}
@media (max-width:640px){
  .outils-frame{height:min(70vh,560px)}
  .outils-tool-header{flex-direction:column;align-items:flex-start}
  .outils-tool-expand{width:100%;justify-content:center}
}
/* [V34 2026-07-06] Bandeau des outils MAISON en haut de la page Outils : deux gros
   boutons qui invoquent les widgets intégrés (calculatrice flottante + tableau
   périodique side-screen), présentés avant les iframes officiels de secours. */
.outils-homemade{margin:0 0 1.6rem;padding:1.1rem 1.2rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--color-surface-2)) 0%,var(--color-surface-2) 60%);
  border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));
  border-radius:14px;
  box-shadow:0 6px 22px rgba(10,20,45,.06)}
.outils-homemade-title{display:flex;align-items:baseline;flex-wrap:wrap;gap:.5rem .9rem;margin-bottom:.9rem}
.outils-homemade-badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#fff;background:var(--color-primary)}
.outils-homemade-desc{font-size:.86rem;color:var(--color-text-muted);line-height:1.35}
.outils-homemade-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem}
.outils-homemade-btn{display:flex;align-items:center;gap:.85rem;text-align:left;
  padding:.9rem 1rem;border-radius:12px;cursor:pointer;
  background:var(--color-surface);color:var(--color-text);
  border:1px solid var(--color-border);font:inherit;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.outils-homemade-btn:hover{transform:translateY(-1px);border-color:var(--color-primary);
  background:color-mix(in srgb,var(--color-primary) 4%,var(--color-surface));
  box-shadow:0 8px 22px color-mix(in srgb,var(--color-primary) 18%,transparent)}
.outils-homemade-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.outils-homemade-btn svg{flex-shrink:0;color:var(--color-primary);width:24px;height:24px}
.outils-homemade-btn-text{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.outils-homemade-btn-title{font-weight:700;font-size:.98rem;line-height:1.2}
.outils-homemade-btn-sub{font-size:.78rem;color:var(--color-text-muted);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis}
.outils-legacy-title{font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--color-text-faint);
  margin:1.6rem 0 .5rem;padding-left:.15rem}
/* [T19] Réglages du mini-jeu : choix des symboles d'obstacles + mode de difficulté */
.pl-game-opts{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  padding:.55rem 1.1rem;border-top:1px solid var(--color-border);background:var(--color-surface-2)}
.pl-opts-label{font-size:.72rem;font-weight:700;color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-right:.1rem}
.pl-opts-label:not(:first-child){margin-left:.6rem}
.pl-seg{display:inline-flex;gap:.25rem}
.pl-seg-btn{font:inherit;font-size:.74rem;font-weight:600;cursor:pointer;
  background:var(--color-surface-offset);color:var(--color-text-muted);
  border:1px solid var(--color-border);border-radius:7px;padding:.18rem .5rem;
  transition:background .15s,color .15s,border-color .15s}
.pl-seg-btn:hover{color:var(--color-text)}
.pl-seg-btn.is-on{background:var(--color-gold);color:#0a1426;border-color:var(--color-gold);font-weight:700}
.pl-game-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1.1rem;border-top:1px solid var(--color-border);background:var(--color-surface-2);
  font-size:.78rem;color:var(--color-text-muted)}
.pl-game-foot kbd{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);
  border:1px solid var(--color-border);border-radius:6px;padding:.05rem .4rem;font-size:.72rem;color:var(--color-text)}
.pl-game-foot .pl-best{color:var(--color-gold);font-weight:700}
/* Mini-classement (records des joueurs, noms issus du profil Supabase) */
.pl-board{padding:.6rem 1.1rem .9rem;border-top:1px solid var(--color-border);
  background:var(--color-surface-2)}
.pl-board-title{font-family:var(--font-display,inherit);font-size:.82rem;font-weight:800;
  color:var(--color-text);margin:0 0 .45rem}
.pl-board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.18rem}
.pl-board-row{display:flex;align-items:center;gap:.6rem;padding:.22rem .5rem;border-radius:7px;
  font-size:.8rem;color:var(--color-text)}
.pl-board-row:nth-child(1){background:linear-gradient(90deg,rgba(227,199,102,.16),transparent)}
.pl-board-rank{width:1.3rem;text-align:center;font-weight:800;color:var(--color-gold);
  font-variant-numeric:tabular-nums}
.pl-board-avatar{flex:none;width:24px;height:24px;border-radius:50%;object-fit:cover;
  border:1px solid var(--color-border);background:var(--color-surface-offset)}
.pl-board-avatar-fallback{display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:800;color:#1a1304;
  background:linear-gradient(135deg,var(--color-gold),var(--color-gold-hover,#c8a451));
  border-color:transparent;text-transform:uppercase;line-height:1}
.pl-board-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-board-score{font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums}
.pl-board-me{outline:1px solid var(--color-gold);outline-offset:-1px}
.pl-board-me .pl-board-name{color:var(--color-gold);font-weight:700}

/* ============================================================================
   Tuteur IA Polaris — bouton flottant + panneau de discussion
   ============================================================================ */
.ai-tutor-root{position:fixed;right:clamp(.8rem,2.5vw,1.4rem);bottom:clamp(.8rem,2.5vw,1.4rem);z-index:70;font-family:var(--font-ui)}

/* Bouton flottant */
.ai-fab{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;
  background:var(--color-gold);color:#1a1304;padding:.62rem .9rem;border-radius:var(--radius-full);
  box-shadow:var(--shadow-lg);font-weight:700;font-size:var(--text-sm);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.ai-fab:hover{transform:translateY(-2px);background:var(--color-gold-hover)}
.ai-fab svg{flex:none}
.ai-fab-label{white-space:nowrap}
.ai-tutor-root[data-open="true"] .ai-fab{display:none}

/* Panneau */
.ai-panel{display:none;flex-direction:column;width:min(380px,calc(100vw - 2rem));
  height:min(560px,calc(100dvh - 6rem));background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;
  box-shadow:var(--shadow-lg);animation:ai-pop .18s ease}
.ai-tutor-root[data-open="true"] .ai-panel{display:flex}
@keyframes ai-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

.ai-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.7rem .85rem;border-bottom:1px solid var(--color-border);
  background:color-mix(in srgb, var(--color-gold) 12%, var(--color-surface))}
.ai-head-title{display:flex;align-items:center;gap:.55rem;min-width:0}
.ai-head-title svg{color:var(--color-gold);flex:none}
.ai-head-title strong{display:block;font-size:var(--text-sm);color:var(--color-text);line-height:1.1}
.ai-ctx{display:block;font-size:var(--text-xs);color:var(--color-text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}
.ai-close{border:none;background:transparent;cursor:pointer;color:var(--color-text-muted);
  font-size:1rem;line-height:1;padding:.3rem .4rem;border-radius:var(--radius-sm)}
.ai-close:hover{background:var(--color-surface-offset);color:var(--color-text)}

.ai-log{flex:1;overflow-y:auto;padding:.85rem;display:flex;flex-direction:column;gap:.6rem;
  background:var(--color-bg)}
.ai-msg{display:flex}
.ai-user{justify-content:flex-end}
.ai-bubble{max-width:85%;padding:.55rem .75rem;border-radius:var(--radius-lg);
  font-size:var(--text-sm);line-height:1.55;word-wrap:break-word;overflow-wrap:anywhere}
.ai-assistant .ai-bubble{background:var(--color-surface);border:1px solid var(--color-border);
  color:var(--color-text);border-bottom-left-radius:var(--radius-sm)}
.ai-user .ai-bubble{background:var(--color-primary);color:var(--color-text-inverse);
  border-bottom-right-radius:var(--radius-sm)}
[data-theme="dark"] .ai-user .ai-bubble{color:#0a1426}
.ai-bubble p{margin:.25rem 0}
.ai-bubble p:first-child{margin-top:0}
.ai-bubble p:last-child{margin-bottom:0}
.ai-bubble h4,.ai-bubble h5,.ai-bubble h6{margin:.5rem 0 .25rem;font-size:var(--text-sm);font-weight:700}
.ai-bubble ul,.ai-bubble ol{margin:.35rem 0;padding-left:1.2rem}
.ai-bubble li{margin:.15rem 0}
.ai-bubble code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);
  padding:.05rem .3rem;border-radius:4px;font-size:.86em}

/* Indicateur « réflexion » */
.ai-thinking .ai-bubble{display:inline-flex;gap:.25rem;align-items:center;padding:.6rem .8rem}
.ai-dot{width:6px;height:6px;border-radius:50%;background:var(--color-text-faint);
  animation:ai-blink 1.2s infinite ease-in-out}
.ai-dot:nth-child(2){animation-delay:.2s}
.ai-dot:nth-child(3){animation-delay:.4s}
@keyframes ai-blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* Actions rapides */
.ai-quick{display:flex;flex-wrap:wrap;gap:.35rem;padding:.55rem .7rem;
  border-top:1px solid var(--color-border);background:var(--color-surface)}
.ai-chip{border:1px solid var(--color-border);background:var(--color-surface-2);
  color:var(--color-text);border-radius:var(--radius-full);padding:.3rem .65rem;
  font-size:var(--text-xs);cursor:pointer;transition:background .12s ease,border-color .12s ease}
.ai-chip:hover:not(:disabled){background:var(--color-gold-soft);border-color:var(--color-gold-line)}
[data-theme="dark"] .ai-chip:hover:not(:disabled){background:color-mix(in srgb,var(--color-gold) 18%,var(--color-surface-2))}
.ai-chip:disabled{opacity:.5;cursor:default}

/* Saisie */
.ai-form{display:flex;align-items:flex-end;gap:.4rem;padding:.55rem .7rem;
  border-top:1px solid var(--color-border);background:var(--color-surface)}
.ai-input{flex:1;resize:none;border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2);color:var(--color-text);padding:.5rem .6rem;
  font-family:var(--font-body);font-size:var(--text-sm);line-height:1.4;max-height:120px}
.ai-input:focus{outline:none;border-color:var(--color-gold)}
.ai-send{flex:none;border:none;cursor:pointer;background:var(--color-gold);color:#1a1304;
  width:38px;height:38px;border-radius:var(--radius-md);display:inline-flex;align-items:center;justify-content:center;
  transition:background .12s ease}
.ai-send:hover:not(:disabled){background:var(--color-gold-hover)}
.ai-send:disabled{opacity:.5;cursor:default}
/* [V11] Bouton micro du tuteur IA (dictee vocale fr-FR, meme look que le mode colle) */
.ai-mic{flex:none;cursor:pointer;width:38px;height:38px;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--color-border);color:var(--color-text-soft,var(--color-text));
  transition:color .12s ease,border-color .12s ease,background .12s ease}
.ai-mic:hover:not(:disabled){color:var(--color-gold);border-color:var(--color-gold)}
.ai-mic:disabled{opacity:.5;cursor:default}
.ai-mic svg{width:1.1em;height:1.1em}
.ai-mic.rec{color:#fff;background:var(--color-danger,#c0392b);border-color:var(--color-danger,#c0392b);
  animation:colle-mic-pulse 1.2s ease-in-out infinite}
[data-theme=dark] .ai-mic.rec{color:#fff}

/* Pied + signalement */
.ai-foot{padding:.45rem .7rem;border-top:1px solid var(--color-border);background:var(--color-surface);
  font-size:.68rem;color:var(--color-text-faint);line-height:1.4}
.ai-report-link{border:none;background:transparent;color:var(--color-text-muted);cursor:pointer;
  text-decoration:underline;font-size:.68rem;padding:0}
.ai-report-link:hover{color:var(--color-gold)}
.ai-report{margin-top:.5rem;padding:.55rem;border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--color-bg)}
.ai-report-head{font-size:var(--text-xs);font-weight:700;color:var(--color-text);margin-bottom:.35rem}
.ai-report-text{width:100%;resize:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);
  background:var(--color-surface-2);color:var(--color-text);padding:.4rem .5rem;font-family:var(--font-body);font-size:var(--text-xs)}
.ai-report-btns{display:flex;justify-content:flex-end;gap:.4rem;margin-top:.4rem}
.ai-report-btns button{border:1px solid var(--color-border);background:var(--color-surface-2);
  color:var(--color-text);border-radius:var(--radius-sm);padding:.25rem .6rem;font-size:var(--text-xs);cursor:pointer}
.ai-report-send{background:var(--color-gold)!important;color:#1a1304!important;border-color:var(--color-gold)!important;font-weight:700}
.ai-report-msg{font-size:.68rem;margin-top:.3rem}
.ai-report-msg.err{color:#c0392b}
[data-theme="dark"] .ai-report-msg.err{color:#ff8a7a}
.ai-report-ok{font-size:var(--text-xs);color:var(--color-gold);font-weight:600}

/* Mobile : panneau plein écran, FAB un peu plus compact */
@media (max-width:560px){
  .ai-panel{width:calc(100vw - 1.4rem);height:calc(100dvh - 5rem)}
  .ai-fab-label{display:none}
  .ai-fab{padding:.7rem;border-radius:var(--radius-full)}
}

/* ============================================================
   FAVORIS UNIVERSELS — étoiles flottantes + page favoris
   organisée (matière → chapitre) avec filtres.
   ============================================================ */
/* Étoile flottante discrète (résultats, figures, blocs interactifs) */
.fav-float{position:absolute;top:.55rem;right:.55rem;z-index:2;color:var(--color-text-faint);width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-surface) 70%,transparent);backdrop-filter:blur(2px)}
.fav-float:hover{color:var(--color-gold);background:var(--color-gold-soft)}
.fav-float.on{color:var(--color-gold)}
.box,.result,.figure-block,.interactive-block{position:relative}
/* Étoile favori de la fiche de révision (en haut à droite du bandeau) */
.fiche-head{position:relative}
.fiche-head .fiche-fav{position:absolute;top:0;right:0;color:var(--color-text-faint);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm)}
.fiche-head .fiche-fav:hover{color:var(--color-gold);background:var(--color-gold-soft)}
.fiche-head .fiche-fav.on{color:var(--color-gold)}
/* Étoile favori du quiz (alignée à droite du bandeau) */
.quiz-banner .fav-btn{align-self:center;color:var(--color-text-faint);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0}
.quiz-banner .fav-btn:hover{color:var(--color-gold);background:var(--color-gold-soft)}
.quiz-banner .fav-btn.on{color:var(--color-gold)}

/* --- Barre de filtres de la page favoris --- */
.fav-filters{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-4);align-items:flex-end;margin:1.25rem 0 .5rem;padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.fav-fgroup{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.fav-flabel{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}
.fav-select{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.5rem .7rem;min-width:11rem;max-width:100%;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6377' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center;padding-right:1.8rem}
.fav-select:focus{outline:2px solid var(--color-primary-line);outline-offset:1px;border-color:var(--color-primary)}
.fav-reset{margin-left:auto;align-self:flex-end;white-space:nowrap}
.fav-count{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin:.25rem 0 1rem}

/* --- Résultats groupés matière → chapitre --- */
.fav-subject{margin-bottom:2rem}
.fav-subj-title{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;color:var(--color-text);margin:0 0 .9rem;padding-bottom:.4rem;border-bottom:2px solid var(--color-gold-line)}
.fav-chapter{margin:0 0 1.3rem}
.fav-chapter-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0 0 .6rem;padding:.4rem .2rem;border-bottom:1px solid var(--color-divider)}
.fav-chapter-name{font-family:var(--font-ui);font-size:var(--text-base);font-weight:700;color:var(--color-text)}
.fav-chapter-count{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-faint);white-space:nowrap}
.fav-results .box{margin-bottom:.7rem}

@media (max-width:640px){
  .fav-filters{gap:var(--space-3);padding:var(--space-3)}
  .fav-fgroup{flex:1 1 100%}
  .fav-select{min-width:0;width:100%}
  .fav-reset{margin-left:0;width:100%}
}

/* ====================================================================
   RITUEL DU JOUR : mot du jour (langues) + théorème du jour (sciences)
   ==================================================================== */
.jour-wrap{margin:var(--space-8) 0 var(--space-4)}
.jour-head{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-4);flex-wrap:wrap}
.jour-head-ic{display:inline-flex;color:var(--color-gold)}
.jour-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-text);margin:0;line-height:1.1}
.jour-settings-link{margin-left:auto;display:inline-flex;align-items:center;gap:var(--space-1);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-decoration:none;padding:.35rem .7rem;border:1px solid var(--color-border);border-radius:var(--radius-full);transition:.18s}
.jour-settings-link:hover{color:var(--color-text);border-color:var(--color-gold-line);background:var(--color-gold-soft);text-decoration:none}
.jour-settings-link svg{width:15px;height:15px}

.jour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-4)}
.jour-card{position:relative;display:flex;flex-direction:column;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);overflow:hidden}
.jour-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.jour-mot::before{background:linear-gradient(180deg,#4f86c6,#2e7d6b)}
.jour-thm::before{background:linear-gradient(180deg,var(--color-gold),var(--color-gold-hover))}

.jour-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3);flex-wrap:wrap;flex-shrink:0}
.jour-kind{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}
.jour-kind svg{width:15px;height:15px}
.jour-mot .jour-kind{color:#3e74b0}
.jour-thm .jour-kind{color:var(--color-gold-hover)}
.jour-meta{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);display:inline-flex;align-items:center;gap:.45rem}
.jour-diff{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .45rem;border-radius:var(--radius-full);border:1px solid transparent}
.jour-diff-facile{color:var(--color-green);background:var(--color-green-soft);border-color:var(--color-green-soft)}
.jour-diff-moyen{color:var(--color-gold-hover);background:var(--color-gold-soft);border-color:var(--color-gold-line)}
.jour-diff-difficile{color:#b3402e;background:rgba(179,64,46,.1);border-color:rgba(179,64,46,.25)}

/* Sélecteur de langue du « mot du jour » (switch entre langues choisies) */
.jour-lang-switch{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--space-3);flex-shrink:0}
.jour-lang-pill{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.72rem;font-weight:600;line-height:1;cursor:pointer;padding:.32rem .6rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-muted);transition:background .15s,border-color .15s,color .15s}
.jour-lang-pill:hover{border-color:var(--color-gold-line);color:var(--color-text)}
.jour-lang-pill .jour-lang-flag{font-size:1rem;line-height:1}
.jour-lang-pill.is-active{background:var(--color-gold-soft);border-color:var(--color-gold-line);color:var(--color-gold-hover)}
@media (max-width:640px){.jour-lang-pill .jour-lang-name{display:none}.jour-lang-pill{padding:.32rem .5rem}}

.jour-card-body{flex:1}
.jour-mot-word{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-text);line-height:1.15}
.jour-mot-phon{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:400;font-style:italic;color:var(--color-text-muted)}
.jour-mot-fr{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:600;color:var(--color-gold-hover);margin:.3rem 0 .6rem}
.jour-mot-ex{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;border-left:2px solid var(--color-border);padding-left:var(--space-3)}
.jour-ex-orig{display:block;color:var(--color-text);font-style:italic}
.jour-ex-fr{display:block;color:var(--color-text-muted)}

.jour-thm-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);margin-bottom:.45rem;line-height:1.2}
.jour-thm-statement{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);line-height:1.6;max-height:11.5rem;overflow:auto}
.jour-thm-statement p{margin:.3rem 0}
.jour-thm-chap{margin-top:.7rem;font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}

.jour-card-foot{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-3);border-top:1px solid var(--color-border);flex-shrink:0}
.jour-foot-hint{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}
.jour-link{margin-left:auto;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-gold-hover);text-decoration:none}
.jour-link:hover{text-decoration:underline}
.jour-empty{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic}

@media (max-width:640px){
  .jour-grid{grid-template-columns:1fr}
  .jour-settings-link{margin-left:0}
}

/* ---- Page Paramètres (réglages du rituel du jour) ---- */
.set-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-5) 0;box-shadow:var(--shadow-sm)}
.set-card-title{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);margin:0 0 .4rem}
.set-ic{display:inline-flex;color:var(--color-gold)}
.set-ic svg{width:18px;height:18px}
.set-hint{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin:0 0 var(--space-4);line-height:1.5}
.set-langs{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.set-lang{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-full);padding:.5rem .9rem;cursor:pointer;transition:.16s;user-select:none}
.set-lang:hover{border-color:var(--color-gold-line)}
.set-lang.on{border-color:var(--color-gold);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.set-lang input{accent-color:var(--color-gold);width:16px;height:16px;cursor:pointer}
.set-lang-flag{font-size:1.05rem;line-height:1}
.set-diffs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.set-diff{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-full);padding:.45rem .9rem;cursor:pointer;transition:.16s;user-select:none}
.set-diff:hover{border-color:var(--color-gold-line)}
.set-diff.on{border-color:var(--color-gold);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.set-diff input{accent-color:var(--color-gold);width:15px;height:15px;cursor:pointer}

/* ---- Radio-groups (Apparence : mode + style bouton thème) ---- */
.set-subtitle{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin:var(--space-4) 0 var(--space-2)}
.set-radio-group{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.set-radio{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);background:var(--color-surface);border:1.5px solid var(--color-border);border-radius:var(--radius-md);padding:.55rem .9rem;cursor:pointer;transition:.16s;user-select:none;min-width:8rem}
.set-radio:hover{border-color:var(--color-gold-line)}
.set-radio.on{border-color:var(--color-gold);background:var(--color-gold-soft)}
.set-radio input{position:absolute;opacity:0;pointer-events:none}
.set-radio-label{color:var(--color-text)}
.set-radio.on .set-radio-label{color:var(--color-gold-hover)}
.set-radio-hint{font-size:var(--text-xs);font-weight:400;color:var(--color-text-muted)}

/* ---- [V50] Style "simplifié" du bouton de thème ----
   Feedback user (V50) : "le mode simplifié ce serait bien que ce soit le mode
   joli, mais sans les dessins". Refonte : même pilule 3-états animée que le
   mode joli (thumb qui glisse jour → auto → nuit), mais on masque nuages,
   étoiles, cratères, et on épure les dégradés du soleil/lune. Le HTML est
   identique (voir setupTheme dans app.js). Le CSS ci-dessous ne fait que
   décorer moins.

   Ancien mode simple (bouton compact SVG statique .theme-simple-*) supprimé
   avec V50 : ces classes ne sont plus jamais rendues. */
.theme-switch.theme-switch-simple .theme-switch-cloud,
.theme-switch.theme-switch-simple .theme-switch-star,
.theme-switch.theme-switch-simple .theme-switch-crater{
  display:none !important;
}
/* Retire le scintillement (ceinture + bretelles : les étoiles sont déjà cachées). */
.theme-switch.theme-switch-simple .theme-switch-star{ animation:none !important; }
/* Soleil épuré : disque jaune uni sans halo lumineux extérieur. */
.theme-switch.theme-switch-simple .theme-switch-sun{
  background: radial-gradient(circle at 40% 40%, #ffd94d 0%, #f2b73a 100%);
  box-shadow: inset -1px -1px 2px rgba(180,120,20,.22);
}
/* Lune épurée : disque gris uni sans halo. */
.theme-switch.theme-switch-simple .theme-switch-moon{
  background: radial-gradient(circle at 40% 40%, #e6e9f0 0%, #b8bec9 100%);
  box-shadow: inset -1px -1px 2px rgba(60,70,90,.22);
}
/* Indicateur "A" (auto) épuré aussi : plus discret sans halo doré. */
.theme-switch.theme-switch-simple .theme-switch-auto{
  background: radial-gradient(circle at 40% 40%, #ede0bc 0%, #c9b787 100%);
  box-shadow: inset -1px -1px 2px rgba(120,90,40,.18);
}

/* ---- Cartes de favoris du rituel du jour ---- */
.box.jour_mot .tag,.box.jour_thm .tag{background:var(--color-gold-soft);color:var(--color-gold-hover);border:1px solid var(--color-gold-line)}
.jour-fav-word{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);line-height:1.5}
.jour-fav-word em{font-style:italic;color:var(--color-text-muted)}
.jour-fav-ex{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);font-style:italic;margin-top:.3rem}

@media (max-width:640px){
  .set-langs,.set-diffs{gap:var(--space-2)}
}

/* ============================================================
   MODE COLLE — page #/colle
   ============================================================ */
.colle-setup{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-6) 0}
.colle-field{display:flex;flex-direction:column;gap:.4rem;min-width:0;flex:1 1 200px}
.colle-field-go{flex:0 0 auto}
.set-footer{display:flex;justify-content:flex-end;margin:var(--space-6) 0 var(--space-4)}
.set-done{display:inline-flex;align-items:center;gap:.5rem}
.colle-label{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted)}
.colle-select{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:.55rem .7rem;width:100%;cursor:pointer}
.colle-select:disabled{opacity:.55;cursor:not-allowed}
.colle-select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.colle-go{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap}
.colle-go:disabled{opacity:.5;cursor:not-allowed}
.colle-hint{margin:var(--space-4) 0}

.colle-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);overflow:hidden;margin-top:var(--space-4)}
.colle-card-head{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);background:var(--color-surface-2,var(--color-surface));
  border-bottom:1px solid var(--color-border);border-left:3px solid var(--color-primary)}
.colle-meta{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;min-width:0}
.colle-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-ui);
  font-size:var(--text-sm);font-weight:700;color:var(--color-primary)}
.colle-badge svg{width:1em;height:1em}
.colle-sub{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colle-relaunch{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);
  background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);
  padding:.4rem .7rem;cursor:pointer}
.colle-relaunch:hover{color:var(--color-primary);border-color:var(--color-primary)}
.colle-relaunch svg{width:.95em;height:.95em}

.colle-enonce{padding:var(--space-5)}
.colle-enonce-title{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-text-faint);margin-bottom:.5rem}
.colle-enonce-body{font-size:var(--text-base);line-height:1.6;color:var(--color-text)}
.colle-enonce-body p{margin:.4rem 0}

.colle-thread{display:flex;flex-direction:column;gap:var(--space-3);
  padding:0 var(--space-5) var(--space-4);max-height:none}
.colle-msg{display:flex;animation:ai-pop .25s ease-out}
.colle-user{justify-content:flex-end}
.colle-bubble{max-width:85%;padding:.65rem .9rem;border-radius:var(--radius-lg);
  font-size:var(--text-sm);line-height:1.55;word-wrap:break-word}
.colle-assistant .colle-bubble{background:var(--color-bg);border:1px solid var(--color-border);
  color:var(--color-text);border-top-left-radius:4px}
.colle-user .colle-bubble{background:var(--color-primary);color:#fff;border-top-right-radius:4px}
[data-theme=dark] .colle-user .colle-bubble{color:var(--color-bg)}
.colle-bubble p{margin:.35rem 0}
.colle-bubble p:first-child{margin-top:0}
.colle-bubble p:last-child{margin-bottom:0}
.colle-bubble ul,.colle-bubble ol{margin:.4rem 0;padding-left:1.2rem}
.colle-bubble strong{font-weight:700}
.colle-bilan .colle-bubble{max-width:100%;background:var(--color-surface);
  border:1px solid var(--color-primary-line,var(--color-border));box-shadow:var(--shadow-sm)}
.colle-bilan .colle-bubble h4,.colle-bilan .colle-bubble h5{margin:.8rem 0 .3rem;font-size:var(--text-base);color:var(--color-primary)}
.colle-fav-wrap{display:flex;align-items:center;gap:.5rem;margin-top:.6rem;padding-top:.6rem;
  border-top:1px dashed var(--color-border)}
.colle-fav-label{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}

.colle-foot{display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-4) var(--space-5) var(--space-5);border-top:1px solid var(--color-border);
  background:var(--color-bg)}
.colle-form{display:flex;gap:var(--space-2);align-items:flex-end}
.colle-input{flex:1;font-family:var(--font-ui);font-size:var(--text-sm);line-height:1.5;
  color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.6rem .8rem;resize:vertical;min-height:2.6rem;max-height:160px}
.colle-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.colle-input:disabled{opacity:.6}
.colle-send{flex-shrink:0;white-space:nowrap}
/* Bouton « joindre une photo » (icone appareil photo). */
.colle-photo{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;
  transition:color .15s ease,border-color .15s ease}
.colle-photo:hover:not(:disabled){color:var(--color-primary);border-color:var(--color-primary)}
.colle-photo:disabled{opacity:.55;cursor:default}
.colle-photo svg{width:1.15em;height:1.15em}
/* Apercu de la photo jointe (au-dessus du formulaire). */
.colle-attach{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.colle-attach-thumb{width:48px;height:48px;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);flex-shrink:0}
.colle-attach-name{flex:1;min-width:0;font-family:var(--font-ui);font-size:var(--text-xs);
  color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colle-attach-del{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;font-size:.9rem;line-height:1;color:var(--color-text-muted);
  background:transparent;border:1px solid var(--color-border);border-radius:50%;cursor:pointer}
.colle-attach-del:hover{color:#fff;background:var(--color-danger,#c0392b);border-color:var(--color-danger,#c0392b)}
/* Vignette photo dans une bulle eleve. */
.colle-msg-photo{display:block;max-width:220px;width:100%;height:auto;border-radius:var(--radius-sm);
  border:1px solid var(--color-border);margin-bottom:.4rem}
.colle-msg-text{white-space:pre-wrap}
.colle-end{align-self:flex-start;display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:.45rem .8rem;cursor:pointer}
.colle-end:hover:not(:disabled){color:var(--color-primary);border-color:var(--color-primary)}
.colle-end:disabled{opacity:.55;cursor:default}
.colle-end svg{width:1em;height:1em}

@media(max-width:640px){
  .colle-setup{padding:var(--space-4)}
  .colle-field{flex:1 1 100%}
  .colle-field-go{flex:1 1 100%}
  .colle-go{width:100%;justify-content:center}
  .colle-bubble{max-width:92%}
  /* La barre de saisie passe sur plusieurs lignes : les boutons d'action
     (photo, micro, indice) restent en haut, la zone de texte occupe toute la
     largeur en dessous, et « Répondre » se place en pied. Évite le débordement
     quand le bouton « Indice » (WebGPU) est présent sur petit écran. */
  .colle-form{flex-wrap:wrap}
  .colle-input{flex:1 1 100%;order:3}
  .colle-send{order:4;margin-left:auto}
  .colle-photo,.colle-mic,.colle-hintbtn{order:1}
}

/* ============================================================================
   [V11] Mode colle enrichi : carnet « Mes colles », reprise, micro, bilan.
   Réutilise les tokens existants ; thèmes clair + sombre ; responsive.
   ============================================================================ */

/* ---- Barre d'outils + lien vers le carnet ---- */
.colle-toolbar{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-3) 0 var(--space-4)}
.colle-histlink{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);
  background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-full);
  padding:.45rem .9rem;text-decoration:none;transition:color .15s ease,border-color .15s ease,background .15s ease}
.colle-histlink:hover{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-surface-2)}
.colle-histlink svg{width:1.05em;height:1.05em}
.colle-histcount{display:inline-flex;align-items:center;justify-content:center;min-width:1.4rem;height:1.4rem;
  padding:0 .4rem;font-size:var(--text-xs);font-weight:700;line-height:1;
  color:#fff;background:var(--color-primary);border-radius:var(--radius-full)}
[data-theme=dark] .colle-histcount{color:var(--color-bg)}

/* ---- Bandeau de reprise d'une colle interrompue ---- */
.colle-resume-wrap{margin:0 0 var(--space-4)}
.colle-resume-wrap:empty{display:none}
.colle-resume{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5);border:1px solid var(--color-primary-line,var(--color-border));
  border-left:4px solid var(--color-primary);border-radius:var(--radius-lg);
  background:var(--color-primary-soft);box-shadow:var(--shadow-sm)}
.colle-resume-info{min-width:0;flex:1 1 14rem}
.colle-resume-title{display:flex;align-items:center;gap:.45rem;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;color:var(--color-primary)}
.colle-resume-title svg{width:1em;height:1em;flex-shrink:0}
.colle-resume-sub{margin-top:.3rem;font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);
  overflow:hidden;text-overflow:ellipsis}
.colle-resume-acts{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}

/* ---- Bouton micro (dictée vocale) ---- */
.colle-mic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.colle-mic:hover:not(:disabled){color:var(--color-primary);border-color:var(--color-primary)}
.colle-mic:disabled{opacity:.55;cursor:default}
.colle-mic svg{width:1.15em;height:1.15em}
.colle-mic.rec{color:#fff;background:var(--color-danger,#c0392b);border-color:var(--color-danger,#c0392b);
  animation:colle-mic-pulse 1.2s ease-in-out infinite}
[data-theme=dark] .colle-mic.rec{color:#fff}
@keyframes colle-mic-pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}50%{box-shadow:0 0 0 6px rgba(192,57,43,0)}}
@media(prefers-reduced-motion:reduce){.colle-mic.rec{animation:none}}
/* Etat "transcription en cours" (Whisper local) : le bouton tourne, non cliquable */
.colle-mic.loading{color:var(--color-primary);border-color:var(--color-primary);cursor:progress;pointer-events:none}
.colle-mic.loading svg{animation:btnSpin .8s linear infinite}
@media(prefers-reduced-motion:reduce){.colle-mic.loading svg{animation:none}}

/* ---- [V12] Clavier maths / physique (insertion LaTeX + apercu MathJax) ---- */
.colle-mathkb-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;
  font-size:1.3rem;line-height:1;font-weight:700;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.colle-mathkb-btn:hover:not(:disabled){color:var(--color-primary);border-color:var(--color-primary)}
.colle-mathkb-btn:disabled{opacity:.55;cursor:default}
.colle-mathkb-btn.active{color:#fff;background:var(--color-primary);border-color:var(--color-primary)}
[data-theme=dark] .colle-mathkb-btn.active{color:#fff}

.math-kb{margin-top:var(--space-2);padding:var(--space-3);
  border:1px solid var(--color-border);border-radius:var(--radius-md);
  background:var(--color-surface-2,var(--color-surface));box-shadow:var(--shadow-sm)}
.math-kb-tabs{display:flex;flex-wrap:wrap;gap:.25rem;margin-bottom:.6rem;
  border-bottom:1px solid var(--color-border);padding-bottom:.5rem}
.math-kb-tab{appearance:none;border:1px solid transparent;background:transparent;
  color:var(--color-text-muted);font:inherit;font-size:.85rem;font-weight:600;
  padding:.3rem .7rem;border-radius:999px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.math-kb-tab:hover{color:var(--color-text)}
.math-kb-tab.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
[data-theme=dark] .math-kb-tab.active{color:#fff}
/* [FIX clavier] grid-auto-rows + hauteur FIXE des touches : sans ça, une touche
   dont le rendu MathJax mesurait mal sa hauteur (svg "NaNex") étirait toute la
   rangée (touches de 160px, clavier cassé sur desktop). On fige la hauteur de
   rangée et de touche, et on contraint le contenu math à l'intérieur. */
.math-kb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.1rem,1fr));
  grid-auto-rows:2.6rem;gap:.35rem;align-items:stretch}
.math-kb-key{display:flex;align-items:center;justify-content:center;
  height:2.6rem;min-height:0;max-height:2.6rem;overflow:hidden;
  padding:.2rem .3rem;color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-sm,7px);cursor:pointer;
  font-size:.95rem;line-height:1;transition:background .12s,border-color .12s,transform .06s}
.math-kb-key:hover{border-color:var(--color-primary);background:var(--color-primary-soft,rgba(56,120,255,.08))}
.math-kb-key:active{transform:scale(.94)}
/* Contenu math : centré, jamais plus haut/large que la touche (évite l'étirement). */
.math-kb-key mjx-container{margin:0!important;max-height:1.7rem;line-height:1!important}
.math-kb-key mjx-container svg{max-height:1.7rem;height:auto;width:auto}
.math-kb-key svg{max-height:1.7rem}
.math-kb-key>*{max-width:100%}
.math-kb-quick{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.math-kb-quick-label{font-size:.8rem;font-weight:600;color:var(--color-text-muted)}
.math-kb-quickbtn{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text);font:inherit;font-size:.85rem;padding:.3rem .6rem;border-radius:var(--radius-sm,7px);cursor:pointer;
  transition:background .12s,border-color .12s}
.math-kb-quickbtn:hover{border-color:var(--color-primary);background:var(--color-primary-soft,rgba(56,120,255,.08))}
.math-kb-preview-wrap{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--color-border)}
.math-kb-preview-label{font-size:.8rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.3rem}
.math-kb-preview{min-height:2rem;padding:.5rem .7rem;border:1px solid var(--color-border);
  border-radius:var(--radius-sm,7px);background:var(--color-surface);line-height:1.6;
  overflow-x:auto;word-break:break-word}
.math-kb-preview-empty{color:var(--color-text-muted);font-style:italic;font-size:.9em}
@media(max-width:560px){
  .math-kb-grid{grid-template-columns:repeat(auto-fill,minmax(2.7rem,1fr));grid-auto-rows:2.5rem}
  .math-kb-key{height:2.5rem;max-height:2.5rem}
  .colle-form{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){.math-kb-key:active{transform:none}}

/* ---- [V12] Sélecteur de TYPE de colle (Exercice / Texte de colle) ---- */
.colle-mode-toggle{display:inline-flex;gap:.25rem;padding:.2rem;border:1px solid var(--color-border);border-radius:var(--radius-md,10px);background:var(--color-surface-2,var(--color-surface))}
.colle-mode-btn{appearance:none;border:0;background:transparent;color:var(--color-text-muted,var(--color-text));font:inherit;font-weight:600;padding:.4rem .8rem;border-radius:var(--radius-sm,7px);cursor:pointer;transition:background .15s,color .15s}
.colle-mode-btn:hover{color:var(--color-text)}
.colle-mode-btn.selected{background:var(--color-primary);color:#fff}
[data-theme=dark] .colle-mode-btn.selected{color:#fff}

/* ---- [V12] Texte de colle affiché dans l'énoncé ---- */
.colle-text-doc .colle-text-instr{margin:0 0 .7rem;padding:.5rem .7rem;border-left:3px solid var(--color-primary);background:var(--color-surface-2,rgba(0,0,0,.03));border-radius:var(--radius-sm,7px);font-size:.95em}
.colle-text-head{font-weight:700;font-size:1.05em;margin:.2rem 0 .5rem;line-height:1.3}
.colle-text-head .colle-text-src{display:block;font-weight:500;font-size:.82em;color:var(--color-text-muted);margin-top:.15rem}
.colle-text-body{line-height:1.6;text-align:justify}
.colle-text-body p{margin:0 0 .7rem}
.colle-text-guid{margin-top:.9rem;padding:.6rem .8rem;border:1px dashed var(--color-border);border-radius:var(--radius-sm,7px);background:var(--color-surface-2,rgba(0,0,0,.02))}
.colle-text-guid-t{font-weight:700;font-size:.9em;margin-bottom:.3rem}
.colle-text-guid ol{margin:0;padding-left:1.2rem}
.colle-text-guid li{margin:.2rem 0;font-size:.93em}

/* ---- Interrupteur global de la voix du colleur ---- */
.colle-voice-toggle{display:inline-flex;align-items:center;gap:.35rem;margin-left:.5rem;padding:.35rem .7rem;
  border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text-muted);
  font:inherit;font-size:.82rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.colle-voice-toggle:hover{color:var(--color-text);border-color:var(--color-primary)}
.colle-voice-toggle.on{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.colle-voice-toggle .colle-voice-ic{font-size:1em;line-height:1}
[data-theme=dark] .colle-voice-toggle.on{color:#fff}

/* ---- Questions de jury (rendues comme une section de cours) ---- */
.jury-q{margin:0 0 1.1rem;padding:.7rem .9rem;border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm,7px);background:var(--color-surface-2,rgba(0,0,0,.02))}
.jury-q-text{margin:0 0 .5rem;font-weight:600;line-height:1.4}
.jury-q-text strong{color:var(--color-primary)}
.jury-points{margin:0;padding-left:1.25rem}
.jury-points li{margin:.3rem 0;line-height:1.55;font-size:.96em}

/* ---- Bouton « Indice » (modèle de maths LOCAL, WebGPU). N'apparaît que si
   le navigateur supporte WebGPU. Aide à débloquer, ne note jamais. ---- */
.colle-hintbtn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;
  height:2.6rem;padding:0 .7rem;color:var(--color-text-muted);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;
  font-size:.85rem;font-weight:600;white-space:nowrap;
  transition:color .15s ease,border-color .15s ease,background .15s ease}
.colle-hintbtn:hover:not(:disabled){color:var(--color-primary);border-color:var(--color-primary)}
.colle-hintbtn:disabled{opacity:.55;cursor:default}
.colle-hintbtn svg{width:1.05em;height:1.05em}
/* Bulle d'avancement du chargement du modèle local. */
.colle-bubble.colle-localload{font-size:.85rem;color:var(--color-text-muted);font-style:italic}
/* Bulle d'indice local : légère mise en valeur (aide, pas la solution). */
.colle-hint-msg .colle-bubble{border-left:3px solid var(--color-primary);background:var(--color-primary-soft,rgba(56,120,255,.07))}

/* ---- Carte de bilan structuré (note, niveau, erreurs, points) ---- */
.bilan-card{margin:var(--space-4) 0;padding:var(--space-5);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.bilan-top{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-3)}
.bilan-note{display:flex;align-items:baseline;gap:.1rem;font-family:var(--font-display)}
.bilan-note-val{font-size:var(--text-2xl);font-weight:800;color:var(--color-primary);line-height:1}
.bilan-note-max{font-size:var(--text-base);font-weight:600;color:var(--color-text-faint)}
.bilan-niveau{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:var(--text-xs);
  font-weight:700;letter-spacing:.02em;padding:.28rem .7rem;border-radius:var(--radius-full);
  border:1px solid transparent;white-space:nowrap}
/* Échelle de niveaux : rouge -> vert */
.niveau-insuffisant{color:#a02718;background:rgba(192,57,43,.12);border-color:rgba(192,57,43,.35)}
.niveau-fragile{color:#a85a13;background:rgba(214,137,16,.14);border-color:rgba(214,137,16,.35)}
.niveau-moyen{color:#8a6d12;background:rgba(200,164,40,.16);border-color:rgba(200,164,40,.4)}
.niveau-satisfaisant{color:#3f7a2e;background:rgba(76,143,52,.14);border-color:rgba(76,143,52,.35)}
.niveau-solide{color:#2e7d32;background:rgba(46,125,50,.14);border-color:rgba(46,125,50,.4)}
.niveau-excellent{color:#1f7a55;background:rgba(31,140,90,.15);border-color:rgba(31,140,90,.45)}
[data-theme=dark] .niveau-insuffisant{color:#f0a79c;background:rgba(192,57,43,.22)}
[data-theme=dark] .niveau-fragile{color:#f0c285;background:rgba(214,137,16,.22)}
[data-theme=dark] .niveau-moyen{color:#e6d28a;background:rgba(200,164,40,.2)}
[data-theme=dark] .niveau-satisfaisant{color:#a9d99a;background:rgba(76,143,52,.22)}
[data-theme=dark] .niveau-solide{color:#8fdc95;background:rgba(46,125,50,.22)}
[data-theme=dark] .niveau-excellent{color:#86e0b8;background:rgba(31,140,90,.22)}
.bilan-synthese{margin:0 0 var(--space-3);font-size:var(--text-base);line-height:1.6;color:var(--color-text)}
.bilan-sec{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed var(--color-border)}
.bilan-sec-title{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--color-text-faint);margin-bottom:.4rem}
.bilan-erreurs .bilan-sec-title{color:var(--color-danger,#c0392b)}
.bilan-list{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:.3rem}
.bilan-list li{font-size:var(--text-sm);line-height:1.5;color:var(--color-text)}
.bilan-erreurs .bilan-list li::marker{color:var(--color-danger,#c0392b)}
.bilan-points .bilan-list li::marker{color:var(--color-primary)}
.colle-bilan-histlink{display:inline-flex;align-items:center;gap:.4rem;margin-top:var(--space-3);
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-primary);text-decoration:none}
.colle-bilan-histlink:hover{text-decoration:underline}

/* ---- Page « Mes colles » : statistiques ---- */
.colle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin:var(--space-4) 0 var(--space-5)}
.colle-stat{padding:var(--space-4);text-align:center;background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.colle-stat-val{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:800;
  color:var(--color-primary);line-height:1.1}
.colle-stat-lbl{margin-top:.25rem;font-family:var(--font-ui);font-size:var(--text-xs);
  color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em}

/* ---- Page « Mes colles » : liste ---- */
.colle-list{display:flex;flex-direction:column;gap:var(--space-3);margin:var(--space-4) 0}
.colle-list-item{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.colle-list-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.colle-list-main{min-width:0;flex:1 1 auto}
.colle-list-title{font-family:var(--font-ui);font-size:var(--text-base);font-weight:700;color:var(--color-text);
  margin-bottom:.35rem}
.colle-list-sub{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted)}
.colle-list-date{color:var(--color-text-muted)}
.colle-list-dur{display:inline-flex;align-items:center;gap:.25rem;color:var(--color-text-muted)}
.colle-list-dur svg{width:.9em;height:.9em}
.colle-list-synth{margin-top:.5rem;font-size:var(--text-sm);line-height:1.5;color:var(--color-text-muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.colle-list-score{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.colle-list-note{display:flex;align-items:baseline;gap:.05rem;font-family:var(--font-display)}
.colle-list-note-val{font-size:var(--text-xl);font-weight:800;color:var(--color-primary);line-height:1}
.colle-list-note-max{font-size:var(--text-sm);font-weight:600;color:var(--color-text-faint)}
.colle-list-actions{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}

/* ---- Page « Mes colles » : détail ---- */
.colle-detail-meta{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:var(--space-2) 0 var(--space-4);
  font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted)}
.colle-detail-bilan{margin:var(--space-4) 0}
.colle-detail-bilan .colle-enonce-title{margin-bottom:.5rem}
.colle-bilan-body{max-width:100%;background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-md);padding:var(--space-4)}
.colle-detail-convo{margin:var(--space-4) 0;border:1px solid var(--color-border);border-radius:var(--radius-lg);
  background:var(--color-surface);overflow:hidden}
.colle-detail-convo>summary{cursor:pointer;list-style:none;padding:var(--space-4) var(--space-5);
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text);
  display:flex;align-items:center;gap:.5rem}
.colle-detail-convo>summary::-webkit-details-marker{display:none}
.colle-detail-convo>summary::before{content:"\25B8";color:var(--color-text-faint);transition:transform .15s ease}
.colle-detail-convo[open]>summary::before{transform:rotate(90deg)}
.colle-detail-convo[open]>summary{border-bottom:1px solid var(--color-border)}
.colle-detail-convo .colle-thread{padding:var(--space-4) var(--space-5)}

/* ---- Responsive mobile (V11) ---- */
@media(max-width:640px){
  .colle-stats{grid-template-columns:1fr;gap:var(--space-2)}
  .colle-stat{display:flex;align-items:baseline;justify-content:center;gap:.5rem;text-align:left;padding:var(--space-3) var(--space-4)}
  .colle-stat-lbl{margin-top:0}
  .colle-resume{flex-direction:column;align-items:stretch}
  .colle-resume-acts{justify-content:flex-end}
  .colle-list-item{flex-direction:column;gap:var(--space-3)}
  .colle-list-score{flex-direction:row;align-items:center;align-self:flex-start;gap:.6rem}
}

/* ============================================================================
   [V11] Chronomètre de colle + bandeau de reprise (question/abandon) +
   écran récapitulatif de fin de colle (note, appréciation, statistiques).
   Tous les tokens repris du design system existant (var(--color-*), espaces,
   rayons, polices). Compatible clair / sombre / mobile.
   ========================================================================== */

/* ---- Chronomètre (tête de carte de colle) ---- */
.colle-timer{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;
  color:var(--color-text-muted);background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  padding:.28rem .7rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.colle-timer svg{width:.95em;height:.95em;flex-shrink:0;color:var(--color-primary)}
.colle-timer-val{font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* Si le bouton « relancer » prend déjà le margin-left:auto, le timer reste groupé. */
.colle-relaunch+.colle-timer{margin-left:var(--space-2)}

/* ---- Bandeau de reprise : question + bouton abandon ---- */
.colle-resume-q{margin-top:.3rem;font-family:var(--font-ui);font-size:var(--text-xs);
  font-weight:600;color:var(--color-text-muted)}
.colle-resume-drop{color:var(--color-danger,#c0392b)}
.colle-resume-drop:hover{border-color:var(--color-danger,#c0392b);
  color:var(--color-danger,#c0392b);background:rgba(192,57,43,.06)}
[data-theme=dark] .colle-resume-drop:hover{background:rgba(192,57,43,.16)}

/* ---- Écran récapitulatif de fin de colle ---- */
.colle-recap{margin:var(--space-4) 0;background:var(--color-surface);
  border:1px solid var(--color-primary-line,var(--color-border));
  border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;
  animation:ai-pop .25s ease-out}
.colle-recap.colle-recap-abandon{border-color:var(--color-border)}
@media(prefers-reduced-motion:reduce){.colle-recap{animation:none}}

.recap-head{display:flex;align-items:center;gap:.5rem;
  padding:var(--space-3) var(--space-5);
  background:var(--color-primary-soft);
  border-bottom:1px solid var(--color-primary-line,var(--color-border));
  border-left:4px solid var(--color-primary)}
.colle-recap-abandon .recap-head{background:var(--color-surface-2,var(--color-bg));
  border-left-color:var(--color-text-faint)}
.recap-head-ic{display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;color:var(--color-primary)}
.recap-head-ic svg{width:1.1em;height:1.1em}
.colle-recap-abandon .recap-head-ic{color:var(--color-text-muted)}
.recap-head-txt{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;
  letter-spacing:.02em;color:var(--color-primary)}
.colle-recap-abandon .recap-head-txt{color:var(--color-text-muted)}

.recap-hero{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;
  padding:var(--space-5) var(--space-5) var(--space-4)}
.recap-note{display:flex;align-items:baseline;gap:.1rem;font-family:var(--font-display);
  flex-shrink:0}
.recap-note-val{font-size:clamp(2.2rem,8vw,3rem);font-weight:800;line-height:1;
  color:var(--color-primary)}
.recap-note-max{font-size:var(--text-xl);font-weight:600;color:var(--color-text-faint)}
.recap-note-low .recap-note-val{color:var(--color-danger,#c0392b)}
.recap-appr{min-width:0;flex:1 1 12rem;display:flex;flex-direction:column;
  align-items:flex-start;gap:.5rem}
.recap-appr-txt{margin:0;font-family:var(--font-ui);font-size:var(--text-sm);
  line-height:1.5;color:var(--color-text)}

.recap-synthese{margin:0 var(--space-5) var(--space-4);font-size:var(--text-base);
  line-height:1.6;color:var(--color-text)}

.recap-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);
  padding:0 var(--space-5) var(--space-4)}
.recap-stat{display:flex;align-items:center;gap:.6rem;padding:var(--space-3) var(--space-4);
  background:var(--color-bg);border:1px solid var(--color-border);
  border-radius:var(--radius-md);min-width:0}
.recap-stat-ic{display:inline-flex;align-items:center;justify-content:center;
  width:2rem;height:2rem;flex-shrink:0;color:var(--color-primary);
  background:var(--color-primary-soft);border-radius:var(--radius-md)}
.recap-stat-ic svg{width:1.05em;height:1.05em}
.recap-stat-val{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;
  color:var(--color-text);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.recap-stat-label{font-family:var(--font-ui);font-size:var(--text-xs);
  color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.03em}
/* La paire val+label s'empile dans la cellule */
.recap-stat-val,.recap-stat-label{display:block}
.recap-stat>span:not(.recap-stat-ic){display:flex;flex-direction:column;min-width:0}

.recap-detail{padding:0 var(--space-5) var(--space-4)}
.recap-detail .bilan-sec:first-child{margin-top:0;padding-top:0;border-top:none}

.recap-acts{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  padding:var(--space-4) var(--space-5) var(--space-5);
  border-top:1px solid var(--color-border)}
.recap-acts .btn{white-space:nowrap}
.recap-acts .btn svg{width:1.05em;height:1.05em;flex-shrink:0}

@media(max-width:640px){
  .colle-timer{margin-left:0}
  .recap-hero{gap:var(--space-3)}
  .recap-stats{grid-template-columns:1fr}
  .recap-acts{flex-direction:column;align-items:stretch}
  .recap-acts .btn{justify-content:center;width:100%}
}


/* ============================================================================
   [V11] Sélecteur de personnalité du colleur (mode colle)
   Cartes de profils, réglages avancés repliables, modal « Niveau Morlot »,
   badge de personnalité dans la session. Réutilise les tokens de thème :
   clair + sombre automatiques, responsive < 640px.
   ============================================================================ */

/* ---- Bloc « Personnalité du colleur » dans le setup ---- */
.colle-field-persona{flex:1 1 100%}
.colle-persona-hint{margin:.15rem 0 .6rem;font-family:var(--font-ui);
  font-size:var(--text-xs);line-height:1.45;color:var(--color-text-muted)}

/* ---- Grille de cartes de profils ---- */
.persona-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:var(--space-3)}
.persona-card{display:flex;align-items:flex-start;gap:.7rem;text-align:left;
  padding:.75rem .85rem;font-family:var(--font-ui);
  color:var(--color-text);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-lg);
  cursor:pointer;transition:color .15s ease,border-color .15s ease,
  background .15s ease,box-shadow .15s ease}
.persona-card:hover{border-color:var(--color-primary);background:var(--color-surface-2);
  box-shadow:var(--shadow-sm)}
.persona-card:focus-visible{outline:none;border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft)}
.persona-card.selected{border-color:var(--color-primary);
  background:var(--color-primary-soft);box-shadow:0 0 0 1px var(--color-primary) inset}
.persona-card.persona-extreme{border-style:dashed}
.persona-card.persona-extreme:hover,
.persona-card.persona-extreme.selected{border-color:var(--color-amber);
  box-shadow:0 0 0 1px var(--color-amber) inset}
.persona-ic{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;color:var(--color-primary);
  background:var(--color-primary-soft);border-radius:var(--radius-md)}
.persona-card.persona-extreme .persona-ic{color:var(--color-amber);background:var(--color-amber-soft)}
.persona-ic svg{width:1.25em;height:1.25em}
.persona-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.persona-nom{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.persona-desc{font-size:var(--text-xs);line-height:1.4;color:var(--color-text-muted)}
.persona-extreme-tag{display:inline-flex;align-items:center;
  padding:.05rem .4rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--color-amber);background:var(--color-amber-soft);
  border:1px solid var(--color-amber);border-radius:var(--radius-full)}

/* ---- Réglages avancés (repliable) ---- */
.persona-adv{margin-top:var(--space-3)}
.persona-adv-toggle{display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;
  color:var(--color-text-muted);background:transparent;border:none;
  padding:.3rem 0;cursor:pointer;transition:color .15s ease}
.persona-adv-toggle:hover{color:var(--color-primary)}
.persona-adv-toggle svg{width:1.05em;height:1.05em}
.persona-adv-body{display:flex;flex-direction:column;gap:var(--space-3);
  margin-top:var(--space-3);padding:var(--space-4);
  background:var(--color-surface-2);border:1px solid var(--color-border);
  border-radius:var(--radius-lg)}
.persona-adv-body[hidden]{display:none}
.persona-adv-row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap}
.persona-adv-lab{font-family:var(--font-ui);font-size:var(--text-sm);
  font-weight:600;color:var(--color-text)}
.persona-adv-ctrl{display:flex;align-items:center;gap:.7rem;flex:1 1 12rem;
  justify-content:flex-end}
.persona-range{flex:1 1 auto;max-width:14rem;accent-color:var(--color-primary);cursor:pointer}
.persona-adv-val{flex-shrink:0;min-width:2.6rem;text-align:right;
  font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;
  color:var(--color-primary)}
.persona-adv-select{flex:0 1 auto;min-width:8rem}
.persona-adv-reset{align-self:flex-start;font-size:var(--text-xs)}

/* ---- Interrupteur (switch) interruptions ---- */
.persona-switch{position:relative;display:inline-flex;flex-shrink:0;
  width:2.6rem;height:1.5rem;cursor:pointer}
.persona-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.persona-switch-knob{position:absolute;inset:0;border-radius:var(--radius-full);
  background:var(--color-surface-offset);border:1px solid var(--color-border);
  transition:background .18s ease,border-color .18s ease}
.persona-switch-knob::after{content:"";position:absolute;top:50%;left:.18rem;
  width:1.05rem;height:1.05rem;transform:translateY(-50%);border-radius:50%;
  background:var(--color-surface);box-shadow:var(--shadow-sm);
  transition:left .18s ease,background .18s ease}
.persona-switch input:checked + .persona-switch-knob{background:var(--color-primary);
  border-color:var(--color-primary)}
.persona-switch input:checked + .persona-switch-knob::after{left:calc(100% - 1.23rem);
  background:#fff}
.persona-switch input:focus-visible + .persona-switch-knob{box-shadow:0 0 0 3px var(--color-primary-soft)}

/* ---- Modal « Niveau Morlot » (avertissement opt-in) ---- */
.morlot-backdrop{position:fixed;inset:0;z-index:1000;display:flex;
  align-items:center;justify-content:center;padding:var(--space-4);
  background:rgba(10,20,38,.55);backdrop-filter:blur(3px);
  animation:morlotFade .18s ease}
@keyframes morlotFade{from{opacity:0}to{opacity:1}}
.morlot-modal{width:100%;max-width:30rem;max-height:90vh;overflow-y:auto;
  padding:var(--space-6);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);animation:morlotRise .22s cubic-bezier(.16,1,.3,1)}
@keyframes morlotRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.morlot-illus{display:flex;justify-content:center;margin-bottom:var(--space-3)}
.morlot-illus svg{width:120px;height:120px}
.morlot-title{margin:0 0 var(--space-3);text-align:center;
  font-family:var(--font-display);font-size:var(--text-lg);
  color:var(--color-text)}
.morlot-warn{margin:0 0 var(--space-3);font-family:var(--font-ui);
  font-size:var(--text-sm);line-height:1.55;color:var(--color-text-muted)}
.morlot-warn strong{color:var(--color-text)}
.morlot-rules{margin:0 0 var(--space-5);padding-left:1.15rem;
  font-family:var(--font-ui);font-size:var(--text-xs);line-height:1.6;
  color:var(--color-text-muted)}
.morlot-rules li{margin-bottom:.25rem}
.morlot-acts{display:flex;gap:var(--space-3);justify-content:flex-end;flex-wrap:wrap}
.morlot-go{background:var(--color-amber);border-color:var(--color-amber)}
.morlot-go:hover{filter:brightness(1.07)}

/* ---- Badge de personnalité dans la session de colle ---- */
.colle-persona-bar{display:flex;align-items:center;gap:var(--space-3);
  flex-wrap:wrap;margin:0 0 var(--space-3)}
.colle-persona-badge{display:inline-flex;align-items:center;gap:.55rem;
  padding:.4rem .75rem;font-family:var(--font-ui);text-align:left;
  color:var(--color-text);background:var(--color-surface-2);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  cursor:pointer;transition:border-color .15s ease,background .15s ease}
.colle-persona-badge:hover{border-color:var(--color-primary);background:var(--color-surface)}
.colle-persona-badge.persona-extreme{border-color:var(--color-amber);
  background:var(--color-amber-soft)}
.persona-ic-sm{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;color:var(--color-primary);
  background:var(--color-primary-soft);border-radius:var(--radius-full)}
.colle-persona-badge.persona-extreme .persona-ic-sm{color:var(--color-amber);
  background:color-mix(in srgb,var(--color-amber) 18%,var(--color-surface))}
.persona-ic-sm svg{width:1em;height:1em}
.colle-persona-badge-txt{font-size:var(--text-sm);font-weight:700;color:var(--color-text)}
.colle-persona-badge-meta{font-size:var(--text-xs);color:var(--color-text-muted)}
.colle-persona-calm{display:inline-flex;align-items:center;
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;
  color:var(--color-amber);background:transparent;
  border:1px dashed var(--color-amber);border-radius:var(--radius-full);
  padding:.35rem .75rem;cursor:pointer;transition:background .15s ease}
.colle-persona-calm:hover{background:var(--color-amber-soft)}

/* ---- Mention de la personnalité dans le carnet de colles ---- */
.colle-list-persona{display:inline-flex;align-items:center;gap:.3rem;
  font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;
  color:var(--color-text-muted)}

/* ---- Responsive < 640px ---- */
@media(max-width:640px){
  .persona-grid{grid-template-columns:1fr}
  .persona-adv-row{align-items:flex-start;flex-direction:column;gap:.4rem}
  .persona-adv-ctrl{width:100%;justify-content:flex-start}
  .persona-range{max-width:none}
  .persona-adv-select{width:100%}
  .morlot-modal{padding:var(--space-5)}
  .morlot-acts{flex-direction:column-reverse}
  .morlot-acts .btn{width:100%;justify-content:center}
  .colle-persona-bar{flex-direction:column;align-items:flex-start}
}

/* ============================================================================
   RITUEL DU JOUR « gamifié » — cartes flip, streaks, historique, test, visite
   (ajout V13 — voir assets/rituel-jour.js)
   ============================================================================ */
/* ---- Cartes flip ---- */
.jour-flip{perspective:1400px;background:transparent;border:none;box-shadow:none;padding:0;overflow:visible;min-height:330px}
.jour-flip::before{display:none}
.jour-flip-inner{position:relative;width:100%;min-height:330px;height:100%;transition:transform .6s cubic-bezier(.2,.85,.3,1);transform-style:preserve-3d}
.jour-flip.flipped .jour-flip-inner{transform:rotateY(180deg)}
.jour-face{position:absolute;inset:0;display:flex;flex-direction:column;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm);overflow:hidden}
.jour-face::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.jour-mot .jour-front::before,.jour-mot .jour-back::before{background:linear-gradient(180deg,#3e74b0,#2b5688)}
.jour-thm .jour-front::before,.jour-thm .jour-back::before{background:linear-gradient(180deg,var(--color-gold),var(--color-gold-hover))}
.jour-back{transform:rotateY(180deg)}
.jour-front-body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:var(--space-3) 0}
.jour-card-body{flex:1 1 auto;min-height:0;overflow-y:auto}
.jour-front-word{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,calc(1rem + 1.6vw),var(--text-2xl));color:var(--color-text);line-height:1.12;overflow-wrap:anywhere}
.jour-front-thm{font-size:var(--text-xl)}
.jour-front-hint{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5}
.jour-flip-btn{margin-left:auto}
.jour-back .jour-card-body{overflow:auto}
/* ---- Streak badge ---- */
.jour-streak{display:inline-flex;align-items:center;gap:.32rem;font-family:var(--font-ui);font-size:var(--text-xs);font-weight:700;color:var(--color-text-muted);background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.28rem .6rem;line-height:1}
.jour-streak.is-done{color:var(--color-amber);background:var(--color-amber-soft);border-color:var(--color-gold-line)}
.jour-streak-fire{filter:grayscale(.6);font-size:.95em}
.jour-streak.is-done .jour-streak-fire{filter:none}
.jour-streak-n{font-size:1.05em;font-weight:800;color:var(--color-text)}
.jour-streak.is-done .jour-streak-n{color:var(--color-amber)}
.jour-streak-best{margin-left:.2rem;font-size:.72em;font-weight:600;color:var(--color-text-faint);padding-left:.4rem;border-left:1px solid var(--color-border)}
/* ---- Bouton valider ---- */
.jour-validate{margin-left:auto;background:var(--color-surface);border:1.5px solid var(--color-green);color:var(--color-green);font-size:var(--text-sm);padding:.45rem .8rem}
.jour-validate:hover{background:var(--color-green-soft)}
.jour-validate.is-done{border-color:var(--color-border);color:var(--color-text-muted);background:var(--color-surface-offset);cursor:default}
.jour-validate:disabled{opacity:.85}
/* ---- Explosion streak ---- */
.jour-burst{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3rem;pointer-events:none;z-index:5;animation:jourBurst 1.05s cubic-bezier(.2,.85,.3,1) forwards}
@keyframes jourBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
/* ---- Barre d'actions ---- */
.jour-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.jour-action-btn{background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);font-size:var(--text-sm)}
.jour-action-btn:hover{border-color:var(--color-gold-line);background:var(--color-gold-soft);color:var(--color-gold-hover)}

/* ============================================================================
   MODALE générique (historique / test)
   ============================================================================ */
body.rituel-modal-open{overflow:hidden}
.rituel-modal-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:color-mix(in srgb,#04070d 62%,transparent);opacity:0;transition:opacity .2s}
.rituel-modal-ov.show{opacity:1}
.rituel-modal{width:min(620px,100%);max-height:88vh;display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);transform:translateY(12px) scale(.98);transition:transform .22s cubic-bezier(.2,.85,.3,1)}
.rituel-modal-ov.show .rituel-modal{transform:none}
.rituel-modal-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-divider)}
.rituel-modal-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);margin:0}
.rituel-modal-title svg{width:18px;height:18px;color:var(--color-gold)}
.rituel-modal-x{margin-left:auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface-2);color:var(--color-text-muted);cursor:pointer;font-size:1rem;transition:.15s}
.rituel-modal-x:hover{color:var(--color-text);border-color:var(--color-primary-line)}
.rituel-modal-body{padding:var(--space-5);overflow:auto}
/* ---- Historique ---- */
.hist-list{display:flex;flex-direction:column;gap:.5rem;margin-top:var(--space-3)}
.hist-row{display:grid;grid-template-columns:1fr;gap:.15rem;padding:.7rem .9rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.hist-row.is-today{border-color:var(--color-gold-line);background:var(--color-gold-soft)}
.hist-date{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}
.hist-word{font-family:var(--font-display);font-weight:700;font-size:var(--text-base);color:var(--color-text)}
.hist-fr{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-gold-hover);font-weight:600}
/* ---- Test de vocabulaire ---- */
.test-choices{display:flex;flex-direction:column;gap:.6rem;margin-top:var(--space-3)}
.test-choice{justify-content:flex-start;background:var(--color-surface-2);border:1.5px solid var(--color-border);color:var(--color-text)}
.test-choice:hover{border-color:var(--color-gold);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.test-progress{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-3)}
.test-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);margin-bottom:var(--space-4)}
.test-prompt{font-family:var(--font-display);font-weight:700;font-size:var(--text-xl);color:var(--color-text)}
.test-ask{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);margin-top:.4rem}
.test-options{display:flex;flex-direction:column;gap:.55rem}
.test-opt{justify-content:flex-start;background:var(--color-surface-2);border:1.5px solid var(--color-border);color:var(--color-text);text-align:left}
.test-opt:hover{border-color:var(--color-primary-line)}
.test-options.locked .test-opt{cursor:default}
.test-opt.ok{border-color:var(--color-green);background:var(--color-green-soft);color:var(--color-green)}
.test-opt.ko{border-color:#b3402e;background:rgba(179,64,46,.1);color:#b3402e}
.test-next-wrap{margin-top:var(--space-3);display:flex;flex-direction:column;gap:.6rem}
.test-ex{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);font-style:italic;line-height:1.5;border-left:2px solid var(--color-border);padding-left:var(--space-3)}
.test-next{align-self:flex-end}
.test-result{text-align:center;margin-bottom:var(--space-4)}
.test-score-big{font-family:var(--font-display);font-weight:800;font-size:var(--text-2xl);color:var(--color-gold-hover)}
.test-score-pct{font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-text-muted)}
.test-recap{display:flex;flex-direction:column;gap:.4rem;margin-bottom:var(--space-4)}
.test-recap-row{display:flex;justify-content:space-between;gap:var(--space-3);padding:.5rem .8rem;border-radius:var(--radius-md);font-family:var(--font-ui);font-size:var(--text-sm)}
.test-recap-row.ok{background:var(--color-green-soft);color:var(--color-green)}
.test-recap-row.ko{background:rgba(179,64,46,.1);color:#b3402e}
.test-recap-word{font-weight:700}
.test-again-wrap{display:flex;justify-content:center}

/* ============================================================================
   VISITE GUIDÉE (onboarding)
   ============================================================================ */
body.tour-open{overflow:hidden}
.tour-ov{position:fixed;inset:0;z-index:1100;pointer-events:auto}
.tour-ov::before{content:"";position:fixed;inset:0;background:color-mix(in srgb,#04070d 55%,transparent)}
.tour-spot{position:fixed;border-radius:var(--radius-lg);box-shadow:0 0 0 9999px color-mix(in srgb,#04070d 55%,transparent),0 0 0 3px var(--color-gold);transition:all .35s cubic-bezier(.2,.85,.3,1);pointer-events:none;z-index:1101}
.tour-pop{position:fixed;z-index:1102;width:min(340px,calc(100vw - 24px));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--space-4);transition:top .35s,left .35s}
.tour-step{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-gold-hover)}
.tour-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);color:var(--color-text);margin:.25rem 0 .4rem}
.tour-text{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55;margin:0 0 var(--space-3)}
.tour-nav{display:flex;gap:var(--space-2);justify-content:flex-end}
.tour-skip{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted)}
.tour-skip:hover{color:var(--color-text)}

/* ---- Réglages : interrupteurs (toggles) & boutons d'action ---- */
.set-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:.55rem 0}
.set-toggle-row+.set-toggle-row{border-top:1px solid var(--color-divider)}
.set-toggle-txt{display:flex;flex-direction:column;gap:.15rem}
.set-toggle-name{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600;color:var(--color-text)}
.set-toggle-desc{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4}
.set-switch{position:relative;flex-shrink:0;width:46px;height:26px;border-radius:var(--radius-full);background:var(--color-surface-offset);border:1px solid var(--color-border);cursor:pointer;transition:.18s;padding:0}
.set-switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.18s}
.set-switch.on{background:var(--color-gold);border-color:var(--color-gold)}
.set-switch.on::after{transform:translateX(20px)}
.set-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.set-action{background:var(--color-surface);border:1.5px solid var(--color-border);color:var(--color-text);font-size:var(--text-sm)}
.set-action:hover{border-color:var(--color-gold-line);background:var(--color-gold-soft);color:var(--color-gold-hover)}
.set-action.danger{border-color:rgba(179,64,46,.4);color:#b3402e}
.set-action.danger:hover{background:rgba(179,64,46,.08);border-color:#b3402e}

@media (max-width:640px){
  .rituel-modal{max-height:92vh}
  .jour-flip,.jour-flip-inner{min-height:360px}
  .jour-actions{flex-direction:column}
  .jour-action-btn{justify-content:center}
  .test-next{align-self:stretch}
}

/* ============================================================
   Argument Booklet interactif (chapitre Civilisation)
   ============================================================ */
.booklet{font-family:var(--font-ui);margin-top:.5rem}
.bk-home-head{margin-bottom:1.25rem}
.bk-title{margin:0 0 .25rem;font-size:1.5rem;color:var(--color-text)}
.bk-sub{margin:0;color:var(--color-text-muted);font-size:var(--text-xs)}

/* Barre de progression */
.bk-progress{margin:1rem 0 1.5rem}
.bk-pbar{height:10px;border-radius:var(--radius-full);background:var(--color-surface-offset);overflow:hidden}
.bk-pbar-fill{height:100%;background:linear-gradient(90deg,#2e8b57,#3ab57a);border-radius:var(--radius-full);transition:width .3s ease}
.bk-pstats{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.5rem;font-size:var(--text-xs);color:var(--color-text-muted)}
.bk-pstat.learned{color:#2e8b57;font-weight:600}
.bk-pstat.review{color:#c0833a;font-weight:600}
.bk-pstat.total{margin-left:auto;font-weight:700;color:var(--color-text)}

/* Modes d'étude */
.bk-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1.5rem}
.bk-mode-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:1rem;border:1px solid var(--color-divider);border-radius:var(--radius-lg);background:var(--color-surface);cursor:pointer;text-align:left;transition:border-color .15s,transform .1s,box-shadow .15s}
.bk-mode-btn:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.bk-mode-ic{font-size:1.5rem;line-height:1}
.bk-mode-lbl{font-weight:600;color:var(--color-text)}
.bk-mode-hint{font-size:var(--text-xs);color:var(--color-text-muted)}

/* Sous-onglets thèmes / leçons */
.bk-subtabs{display:flex;gap:.5rem;margin-bottom:1rem;border-bottom:1px solid var(--color-divider)}
.bk-subtab{padding:.5rem .9rem;border:none;background:none;cursor:pointer;font-family:var(--font-ui);font-size:.9rem;color:var(--color-text-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.bk-subtab.active{color:var(--color-text);font-weight:600;border-bottom-color:var(--color-primary)}

/* Grilles */
.bk-grid-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem}
.bk-theme-card{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;padding:.9rem;border:1px solid var(--color-divider);border-left:4px solid var(--bk-accent,#888);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;text-align:left;transition:transform .1s,box-shadow .15s}
.bk-theme-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.bk-tc-icon{font-size:1.35rem;line-height:1}
.bk-tc-name{font-weight:600;color:var(--color-text);font-size:.92rem;line-height:1.25}
.bk-tc-count{font-size:var(--text-xs);color:var(--color-text-muted)}

.bk-grid-lessons{display:flex;flex-direction:column;gap:.4rem}
.bk-lesson-card{display:flex;align-items:center;gap:.75rem;padding:.65rem .9rem;border:1px solid var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;text-align:left;transition:border-color .15s}
.bk-lesson-card:hover{border-color:var(--color-primary)}
.bk-lesson-empty{opacity:.45;cursor:default}
.bk-lc-num{font-family:var(--font-mono,monospace);font-size:.75rem;color:var(--color-primary);font-weight:700;min-width:1.6rem}
.bk-lc-name{flex:1;color:var(--color-text);font-size:.9rem}
.bk-lc-count{font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}

/* Barre supérieure de session */
.bk-topbar{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.bk-back{display:inline-flex;align-items:center;gap:.3rem}
.bk-ctx{font-weight:600;color:var(--color-text)}
.bk-counter{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums}

/* Carte */
.bk-card{border:1px solid var(--color-divider);border-top:4px solid var(--bk-accent,var(--color-primary));border-radius:var(--radius-lg);background:var(--color-surface);padding:1.25rem;box-shadow:var(--shadow-sm)}
.bk-card-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.bk-badge{display:inline-flex;align-items:center;font-size:.72rem;font-weight:600;padding:.2rem .5rem;border-radius:var(--radius-full);background:var(--color-surface-offset);color:var(--color-text-muted)}
.bk-badge-theme{background:var(--bk-accent,#888);color:#fff}
.bk-type-argument{background:#b5443a;color:#fff}
.bk-type-flashcard{background:#3a5bb5;color:#fff}
.bk-type-concept{background:#c8a451;color:#fff}
.bk-q{font-size:1.1rem;font-weight:600;color:var(--color-text);line-height:1.4;margin-bottom:1rem}
.bk-reveal-btn{width:100%;padding:.7rem;border:1px dashed var(--color-divider);border-radius:var(--radius-md);background:var(--color-surface-offset);color:var(--color-text-muted);cursor:pointer;font-family:var(--font-ui);font-size:.9rem;font-weight:600;transition:background .15s}
.bk-reveal-btn:hover{background:var(--color-primary-soft);color:var(--color-text)}
.bk-answer{animation:bkFade .25s ease}
@keyframes bkFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.bk-answer-text{color:var(--color-text);line-height:1.6;margin:0}
.bk-fc-body{color:var(--color-text);line-height:1.6}
.bk-fc-body .fc-def{margin-bottom:.6rem}
.bk-fc-body .fc-list{margin:.4rem 0;padding-left:1.2rem}
.bk-fc-body .fc-fr{color:var(--color-text-muted);font-style:italic}
.bk-actions{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.bk-act{flex:1;min-width:120px}
.bk-act-on-learned{background:#2e8b57;border-color:#2e8b57;color:#fff}
.bk-act-on-review{background:#c0833a;border-color:#c0833a;color:#fff}

/* Navigation bas */
.bk-nav{display:flex;gap:.6rem;margin-top:1.25rem;align-items:center}
.bk-nav .btn{display:inline-flex;align-items:center;gap:.3rem}
.bk-nav .btn-primary{margin-left:auto}

/* Empty state */
.bk-empty{text-align:center;padding:2.5rem 1rem;color:var(--color-text-muted)}
.bk-empty-ic{font-size:2.5rem;margin-bottom:.5rem}
.bk-empty h3{color:var(--color-text);margin:.25rem 0}

@media(max-width:600px){
  .bk-modes{grid-template-columns:1fr 1fr}
  .bk-nav{flex-wrap:wrap}
  .bk-nav .btn-primary{margin-left:0;width:100%;justify-content:center}
}

/* ---- [V13] Editeur de formule visuel (MathLive) — bloc additif ---- */
.math-kb-visual-wrap{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--color-border)}
.math-kb-visual-label{font-size:.8rem;font-weight:600;color:var(--color-text-muted);margin-bottom:.35rem}
.math-kb-visual-field{display:block;width:100%;box-sizing:border-box;font-size:1.4rem;
  padding:.5rem .7rem;min-height:2.6rem;border:1px solid var(--color-border);
  border-radius:var(--radius-sm,7px);background:var(--color-surface);color:var(--color-text);
  --caret-color:var(--color-primary);--primary:var(--color-primary);
  --selection-background-color:var(--color-primary-soft,rgba(56,120,255,.18))}
.math-kb-visual-field:focus-within{border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft,rgba(56,120,255,.18))}
.math-kb-visual-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.math-kb-visual-insert{appearance:none;border:0;background:var(--color-primary);color:#fff;
  font:inherit;font-weight:600;font-size:.85rem;padding:.4rem .8rem;
  border-radius:var(--radius-sm,7px);cursor:pointer;transition:filter .12s}
.math-kb-visual-insert:hover{filter:brightness(1.08)}
.math-kb-visual-clear{appearance:none;border:1px solid var(--color-border);background:var(--color-surface);
  color:var(--color-text);font:inherit;font-size:.85rem;padding:.4rem .8rem;
  border-radius:var(--radius-sm,7px);cursor:pointer;transition:border-color .12s}
.math-kb-visual-clear:hover{border-color:var(--color-primary)}

/* =============================================================================
 * Actualité de la semaine (anglais) — encart en-news-card
 * Contenu gratuit lu depuis la table publique Supabase english_news.
 * ========================================================================== */
.en-news-host{margin:1.25rem 0}
.en-news-card{
  background:var(--color-surface-2);
  border:1px solid var(--color-gold-line);
  border-left:4px solid var(--color-gold);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.4rem;
  box-shadow:var(--shadow-sm);
  font-family:var(--font-ui);
}
.en-news-head{margin-bottom:.75rem}
.en-news-kicker{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--color-gold-hover);margin-bottom:.35rem;
}
.en-news-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1rem + .5vw,1.35rem);
  color:var(--color-text);line-height:1.25;margin:0 0 .4rem;
}
.en-news-meta{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;font-size:var(--text-sm)}
.en-news-theme{
  display:inline-block;background:var(--color-gold-soft);color:var(--color-gold-hover);
  border:1px solid var(--color-gold-line);border-radius:var(--radius-full);
  padding:.1rem .6rem;font-weight:600;font-size:.78rem;
}
.en-news-src{color:var(--color-text-muted)}
.en-news-summary{color:var(--color-text);line-height:1.6;font-size:.97rem}
.en-news-summary p{margin:0 0 .7rem}
.en-news-summary strong{color:var(--color-text)}
.en-news-summary ul,.en-news-summary ol{margin:.2rem 0 .7rem 1.2rem;padding:0}
.en-news-summary li{margin:.18rem 0}
.en-news-block{margin-top:.5rem}
.en-news-h{
  font-family:var(--font-ui);font-weight:700;font-size:.95rem;
  color:var(--color-gold-hover);margin:.6rem 0 .3rem;
}
.en-news-vocab,.en-news-disc{margin:.1rem 0 .4rem 1.2rem;padding:0}
.en-news-vocab li,.en-news-disc li{margin:.2rem 0;line-height:1.5;color:var(--color-text)}
.en-news-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:1rem}
.en-news-src-link{
  font-size:var(--text-sm);font-weight:600;color:var(--color-gold-hover);text-decoration:none;
}
.en-news-src-link:hover{text-decoration:underline}
.en-news-oral{font-size:var(--text-sm)}

/* ---- Chantier 8 : liste de cartes (vedette + compactes) + miniatures ---- */
/* Barre de section : titre + compteur d'articles */
.en-news-bar{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:.9rem;
}
.en-news-section-title{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;
  color:var(--color-text);margin:0;line-height:1.2;
}
.en-news-count{
  flex:0 0 auto;background:var(--color-gold-soft);color:var(--color-gold-hover);
  border:1px solid var(--color-gold-line);border-radius:var(--radius-full);
  padding:.08rem .6rem;font-size:.74rem;font-weight:700;white-space:nowrap;
}
/* Miniature thématique : aplat de couleur HSL (var --en-hue) + icône SVG */
.en-news-thumb{
  flex:0 0 auto;width:3rem;height:3rem;border-radius:var(--radius-md);
  display:inline-flex;align-items:center;justify-content:center;
  background:hsl(var(--en-hue,210) 70% 94%);
  color:hsl(var(--en-hue,210) 62% 38%);
  border:1px solid hsl(var(--en-hue,210) 55% 85%);
}
.en-news-thumb svg{width:1.6rem;height:1.6rem;display:block}
/* Sombre : aplat plus sourd, icône plus claire, pour rester lisible */
[data-theme="dark"] .en-news-thumb{
  background:hsl(var(--en-hue,210) 35% 22%);
  color:hsl(var(--en-hue,210) 65% 72%);
  border-color:hsl(var(--en-hue,210) 30% 32%);
}
/* La carte vedette met une miniature un peu plus grande */
.en-news-featured .en-news-thumb{width:3.4rem;height:3.4rem}
.en-news-featured .en-news-thumb svg{width:1.8rem;height:1.8rem}
/* Libellé « À lire aussi » avant la grille de cartes compactes */
.en-news-more-label{
  font-family:var(--font-ui);font-weight:700;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);
  margin:1.1rem 0 .55rem;
}
/* Grille responsive de cartes compactes */
.en-news-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.7rem;
}
/* Carte compacte : miniature + corps (titre, méta, lien) */
.en-news-compact{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--color-surface);border:1px solid var(--color-gold-line);
  border-radius:var(--radius-md);padding:.7rem .8rem;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.en-news-compact:hover{border-color:var(--color-gold);box-shadow:var(--shadow-sm)}
.en-news-compact .en-news-thumb{width:2.6rem;height:2.6rem}
.en-news-compact .en-news-thumb svg{width:1.4rem;height:1.4rem}
.en-news-compact-body{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:.3rem}
.en-news-ctitle{
  font-family:var(--font-ui);font-weight:600;font-size:.92rem;line-height:1.3;
  color:var(--color-text);margin:0;
}
.en-news-compact .en-news-meta{font-size:.76rem;gap:.35rem .6rem}
.en-news-compact .en-news-theme{font-size:.7rem;padding:.05rem .5rem}
.en-news-cactions{margin-top:.1rem}
.en-news-cactions .en-news-src-link{font-size:.8rem}

/* ---- Historique par jour (archive des actualités) ---- */
.en-news-history{margin-top:1.2rem;border-top:1px solid var(--color-gold-line);padding-top:.6rem}
.en-news-history-summary{
  font-family:var(--font-ui);font-weight:700;font-size:.82rem;
  color:var(--color-text-muted);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.4rem;user-select:none;
}
.en-news-history-summary::-webkit-details-marker{display:none}
.en-news-history-summary::before{
  content:"";width:.5rem;height:.5rem;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(-45deg);
  transition:transform .15s ease;display:inline-block;
}
.en-news-history[open] .en-news-history-summary::before{transform:rotate(45deg)}
.en-news-history-summary:hover{color:var(--color-text)}
.en-news-history-host{margin-top:.8rem;display:flex;flex-direction:column;gap:1rem}
.en-news-hist-loading,.en-news-hist-empty{color:var(--color-text-muted);font-size:.86rem;margin:.4rem 0}
.en-news-hist-day{display:flex;flex-direction:column;gap:.35rem}
.en-news-hist-daylabel{
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;color:var(--color-gold);margin:0;
  text-transform:capitalize;
}
.en-news-hist-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.en-news-hist-row{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .7rem;
  padding:.3rem .1rem;border-bottom:1px dotted var(--color-gold-line);
}
.en-news-hist-row:last-child{border-bottom:none}
.en-news-hist-title{
  font-family:var(--font-ui);font-weight:600;font-size:.88rem;line-height:1.35;
  color:var(--color-text);text-decoration:none;flex:1 1 16rem;min-width:0;
}
a.en-news-hist-title:hover{color:var(--color-gold);text-decoration:underline}
.en-news-hist-meta{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem}

/* ---- Encart repliable (<details>) : en-tête compact toujours visible ---- */
.en-news-fold{margin:0}
.en-news-fold>summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:.75rem;
  border-radius:var(--radius-md);margin:-.25rem;padding:.25rem;
  transition:background .15s ease;
}
.en-news-fold>summary::-webkit-details-marker{display:none}
.en-news-fold>summary:hover{background:var(--color-gold-soft)}
.en-news-fold>summary:focus-visible{outline:2px solid var(--color-gold);outline-offset:2px}
.en-news-fold>summary .en-news-head{margin-bottom:0;flex:1 1 auto;min-width:0}
.en-news-fold>summary .en-news-title{margin-bottom:.25rem}
/* Chevron : fermé ▸ / ouvert ▾ */
.en-news-fold-hint{
  flex:0 0 auto;align-self:center;width:1.5rem;height:1.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--color-gold-hover);font-size:.85rem;
  border:1px solid var(--color-gold-line);border-radius:var(--radius-full);
  transition:transform .18s ease,background .15s ease;
}
.en-news-fold-hint::before{content:"\25B8"}
.en-news-fold[open]>summary .en-news-fold-hint{transform:rotate(90deg);background:var(--color-gold-soft)}
.en-news-foldbody{margin-top:1rem;animation:enNewsReveal .2s ease}
@keyframes enNewsReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .en-news-fold-hint,.en-news-foldbody{transition:none;animation:none}
}

/* ---- Archives des actualités (historique repliable par semaine) ---- */
.en-news-archive{margin-top:1.1rem;border-top:1px solid var(--color-gold-line);padding-top:.85rem}
.en-news-archive-sum{
  cursor:pointer;list-style:none;font-weight:700;font-size:.92rem;
  color:var(--color-gold-hover);display:flex;align-items:center;gap:.5rem;
  padding:.25rem 0;user-select:none;
}
.en-news-archive-sum::-webkit-details-marker{display:none}
.en-news-archive-sum::before{content:"\25B8";font-size:.8em;transition:transform .15s ease;color:var(--color-text-muted)}
.en-news-archive[open]>.en-news-archive-sum::before{transform:rotate(90deg)}
.en-news-archive-count{
  background:var(--color-gold-soft);color:var(--color-gold-hover);
  border:1px solid var(--color-gold-line);border-radius:var(--radius-full);
  padding:.02rem .5rem;font-size:.74rem;font-weight:700;
}
.en-news-archive-body{margin-top:.6rem;display:flex;flex-direction:column;gap:1rem}
.en-news-arch-week{}
.en-news-arch-weekh{
  font-family:var(--font-ui);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);
  margin:.1rem 0 .45rem;
}
.en-news-arch-item{
  border:1px solid var(--color-gold-line);border-radius:var(--radius-md);
  background:var(--color-surface);margin-bottom:.45rem;overflow:hidden;
}
.en-news-arch-item[open]{border-color:var(--color-gold-line);box-shadow:var(--shadow-sm)}
.en-news-arch-sum{
  cursor:pointer;list-style:none;padding:.6rem .85rem;display:flex;
  flex-direction:column;gap:.15rem;user-select:none;
}
.en-news-arch-sum::-webkit-details-marker{display:none}
.en-news-arch-sum:hover{background:var(--color-surface-2)}
.en-news-arch-title{
  font-family:var(--font-ui);font-weight:600;font-size:.95rem;
  color:var(--color-text);line-height:1.3;
}
.en-news-arch-item[open] .en-news-arch-title{color:var(--color-gold-hover)}
.en-news-arch-meta{font-size:.78rem;color:var(--color-text-muted)}
.en-news-arch-body{padding:0 .85rem .85rem;border-top:1px solid var(--color-gold-line)}
.en-news-arch-body .en-news-meta{margin:.6rem 0 .2rem}
.en-news-theme-sm{font-size:.72rem;padding:.05rem .5rem}

@media (max-width:640px){
  .en-news-card{padding:1rem 1.05rem}
  .en-news-arch-sum{padding:.55rem .7rem}
  .en-news-arch-body{padding:0 .7rem .7rem}
  .en-news-grid{grid-template-columns:1fr}
  .en-news-bar{flex-wrap:wrap;gap:.4rem}
}

/* =============================================================================
 * Page « Nouveautés » (changelog) — .nv-*
 * ========================================================================== */
.nv-timeline{
  display:flex;flex-direction:column;gap:1rem;margin-top:1.25rem;
  max-width:50rem;
}
.nv-entry{
  background:var(--color-surface-2);
  border:1px solid var(--color-border,var(--color-gold-line));
  border-left:4px solid var(--color-primary,var(--color-gold));
  border-radius:var(--radius-lg);
  padding:1.1rem 1.25rem;
  box-shadow:var(--shadow-sm);
}
.nv-entry-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.75rem;flex-wrap:wrap;margin-bottom:.6rem;
}
.nv-entry-titlewrap{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;min-width:0}
.nv-entry-title{
  font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  color:var(--color-text);margin:0;line-height:1.25;
}
.nv-entry-date{
  flex:0 0 auto;font-size:.8rem;color:var(--color-text-muted);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.nv-tag{
  flex:0 0 auto;display:inline-block;font-size:.7rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  padding:.12rem .55rem;border-radius:var(--radius-full);
  border:1px solid transparent;
}
.nv-tag-new{background:var(--color-gold-soft);color:var(--color-gold-hover);border-color:var(--color-gold-line)}
.nv-tag-imp{
  background:color-mix(in srgb,var(--color-primary,#7b5cff) 14%,transparent);
  color:var(--color-primary,#5a43c9);
  border-color:color-mix(in srgb,var(--color-primary,#7b5cff) 30%,transparent);
}
.nv-tag-fix{
  background:color-mix(in srgb,var(--color-green,#1f9d57) 14%,transparent);
  color:var(--color-green,#1f7a45);
  border-color:color-mix(in srgb,var(--color-green,#1f9d57) 30%,transparent);
}
.nv-entry-list{margin:.2rem 0 0 1.1rem;padding:0;display:flex;flex-direction:column;gap:.35rem}
.nv-entry-list li{line-height:1.55;color:var(--color-text);font-size:.95rem}
[data-theme="dark"] .nv-tag-imp{color:#b9a9ff}
[data-theme="dark"] .nv-tag-fix{color:#7fd6a3}
/* En-tête de version : sépare visuellement chaque groupe de nouveautés. */
.nv-version-head{
  display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;
  margin:1.4rem 0 .2rem;padding-bottom:.4rem;
  border-bottom:1px solid var(--color-border,var(--color-gold-line));
}
.nv-version-head:first-child{margin-top:0}
.nv-version-badge{
  font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  letter-spacing:.01em;color:var(--color-primary,var(--color-gold-hover));
}
.nv-version-date{
  font-size:.78rem;color:var(--color-text-muted);
  font-variant-numeric:tabular-nums;
}
.nv-version-group{display:flex;flex-direction:column;gap:1rem}
@media (max-width:640px){
  .nv-entry{padding:.9rem 1rem}
  .nv-entry-date{font-size:.74rem}
  .nv-version-badge{font-size:.98rem}
}

/* ============================================================
   ATELIERS ITC — Python & SQL (éditeur in-browser + correction IA)
   ============================================================ */
.itc-shell{display:flex;flex-direction:column;gap:var(--space-5);margin-top:var(--space-4)}

/* Sélecteur d'exercices (chips) */
.itc-exo-picker{display:flex;flex-wrap:wrap;gap:.5rem}
.itc-exo-chip{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.82rem;font-weight:600;color:var(--color-text-muted);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:.4rem .85rem;cursor:pointer;transition:all .15s}
.itc-exo-chip:hover{color:var(--color-text);border-color:var(--color-primary-line)}
.itc-exo-chip.active{color:var(--color-text-inverse);background:var(--color-primary);border-color:var(--color-primary)}
.itc-exo-chip-lvl{font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;opacity:.75;padding:.05rem .35rem;border-radius:var(--radius-sm);background:color-mix(in srgb,currentColor 16%,transparent)}

/* Énoncé */
.itc-enonce{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-4)}
.itc-enonce-head{display:flex;gap:.5rem;margin-bottom:.5rem}
.itc-badge{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:.15rem .5rem}
.itc-badge-lvl{color:var(--color-text-muted);background:var(--color-surface-offset)}
.itc-enonce-title{font-size:1.15rem;margin:.1rem 0 .5rem}
.itc-enonce-body{color:var(--color-text);line-height:1.6}
.itc-enonce-body code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);padding:.08em .35em;border-radius:4px;font-size:.9em}
.itc-enonce-body ul,.itc-enonce-body ol{margin:.4rem 0 .4rem 1.2rem}

/* Résultat attendu (SQL) */
.itc-expected{background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}
.itc-expected-label,.itc-result-label{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.45rem}
.itc-result-label{margin-top:.75rem}
.itc-result-table{width:100%;border-collapse:collapse;font-family:var(--font-mono,monospace);font-size:.82rem}
.itc-result-table th,.itc-result-table td{border:1px solid var(--color-border);padding:.3rem .6rem;text-align:left}
.itc-result-table th{background:var(--color-surface-offset);font-weight:700;color:var(--color-text)}
.itc-result-table td{color:var(--color-text)}

/* Éditeur de code */
.itc-editor-wrap{display:flex;flex-direction:column;gap:.4rem}
.itc-editor-label{display:flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.8rem;font-weight:700;color:var(--color-text-muted)}
.itc-editor{width:100%;font-family:var(--font-mono,monospace);font-size:.9rem;line-height:1.5;color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);resize:vertical;tab-size:4;-moz-tab-size:4}
.itc-editor:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}

/* Boutons d'action */
.itc-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.itc-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.86rem;font-weight:600;border-radius:var(--radius-md);padding:.55rem 1rem;cursor:pointer;border:1px solid transparent;transition:all .15s}
.itc-btn:disabled{opacity:.55;cursor:not-allowed}
.itc-btn-run{color:var(--color-text-inverse);background:var(--color-primary);border-color:var(--color-primary)}
.itc-btn-run:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover)}
.itc-btn-ghost{color:var(--color-text-muted);background:var(--color-surface-2);border-color:var(--color-border)}
.itc-btn-ghost:hover:not(:disabled){color:var(--color-text);border-color:var(--color-primary-line)}
.itc-btn-ai{color:var(--color-primary);background:var(--color-primary-soft);border-color:var(--color-primary-line)}
.itc-btn-ai:hover:not(:disabled){background:color-mix(in srgb,var(--color-primary-soft) 70%,var(--color-primary) 12%)}

/* Sortie / verdict */
.itc-output{display:flex;flex-direction:column;gap:.5rem}
.itc-output-empty{color:var(--color-text-faint);font-style:italic;font-size:.9rem;padding:.4rem 0}
.itc-running{display:flex;align-items:center;gap:.6rem;color:var(--color-text-muted);font-size:.88rem}
.itc-spinner{width:1rem;height:1rem;border:2px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:itc-spin .7s linear infinite;flex:none}
@keyframes itc-spin{to{transform:rotate(360deg)}}
.itc-verdict{display:flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.9rem;font-weight:600;border-radius:var(--radius-md);padding:.6rem .85rem;border:1px solid transparent}
.itc-verdict-ok{color:var(--color-green);background:var(--color-green-soft);border-color:color-mix(in srgb,var(--color-green) 30%,transparent)}
.itc-verdict-warn{color:var(--color-amber);background:var(--color-amber-soft);border-color:color-mix(in srgb,var(--color-amber) 30%,transparent)}
.itc-verdict-err{color:var(--color-danger,#c0392b);background:color-mix(in srgb,var(--color-danger,#c0392b) 12%,transparent);border-color:color-mix(in srgb,var(--color-danger,#c0392b) 30%,transparent)}
.itc-stdout,.itc-errbox{font-family:var(--font-mono,monospace);font-size:.82rem;line-height:1.5;white-space:pre-wrap;word-break:break-word;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);margin:0;color:var(--color-text)}
.itc-errbox{color:var(--color-danger,#c0392b);background:color-mix(in srgb,var(--color-danger,#c0392b) 8%,var(--color-surface-offset))}

/* Correction IA */
.itc-ai-zone{background:var(--color-surface-2);border:1px solid var(--color-primary-line);border-radius:var(--radius-lg);padding:var(--space-4);margin-top:.25rem}
.itc-ai-head{display:flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:.9rem;font-weight:700;color:var(--color-primary);margin-bottom:.6rem}
.itc-ai-body{color:var(--color-text);line-height:1.65}
.itc-ai-body p{margin:.5rem 0}
.itc-ai-body pre{font-family:var(--font-mono,monospace);font-size:.82rem;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);overflow:auto}
.itc-ai-body code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);padding:.08em .35em;border-radius:4px;font-size:.9em}
.itc-ai-body pre code{background:none;padding:0}
.itc-ai-soft{color:var(--color-text-muted);font-style:italic;font-size:.9rem}

/* --- ITC : points clés, indice, solution commentée, diagnostics (A1-A6) --- */
.itc-points{background:var(--color-gold-soft);border:1px solid var(--color-gold-line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.itc-points-head{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-gold-hover);margin-bottom:.4rem}
.itc-points-head svg{width:1rem;height:1rem;flex:none}
.itc-points-list{margin:0;padding-left:1.2rem;color:var(--color-text);line-height:1.6}
.itc-points-list li{margin:.2rem 0}
.itc-points-list code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);padding:.08em .35em;border-radius:4px;font-size:.9em}

.itc-btn-hint{color:var(--color-gold-hover);background:var(--color-gold-soft);border-color:var(--color-gold-line)}
.itc-btn-hint:hover:not(:disabled){background:color-mix(in srgb,var(--color-gold-soft) 70%,var(--color-gold) 14%)}
.itc-btn-sol{color:var(--color-text);background:var(--color-surface-offset);border-color:var(--color-border)}
.itc-btn-sol:hover:not(:disabled){border-color:var(--color-gold-line);color:var(--color-gold-hover)}
.itc-btn-sm{font-size:.78rem;padding:.4rem .7rem}

.itc-hint-zone,.itc-sol-zone{margin-top:.1rem}
.itc-hint-card{background:var(--color-gold-soft);border:1px solid var(--color-gold-line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.itc-hint-head{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-gold-hover);margin-bottom:.35rem}
.itc-hint-head svg{width:1rem;height:1rem;flex:none}
.itc-hint-body{color:var(--color-text);line-height:1.6}
.itc-hint-body code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);padding:.08em .35em;border-radius:4px;font-size:.9em}

.itc-sol-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
.itc-sol-head{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.85rem;font-weight:700;color:var(--color-text);margin-bottom:.3rem}
.itc-sol-head svg{width:1.05rem;height:1.05rem;flex:none;color:var(--color-gold-hover)}
.itc-sol-note{color:var(--color-text-muted);font-size:.82rem;margin-bottom:.6rem}
.itc-sol-code{position:relative;font-family:var(--font-mono,monospace);font-size:.84rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.6rem var(--space-3) var(--space-3);margin:0;min-height:2.6rem;color:var(--color-text)}
.itc-sol-code::before{position:absolute;top:.45rem;left:.9rem;font-family:var(--font-ui);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-faint);opacity:.75;pointer-events:none}
.itc-sol-code-python::before,pre.itc-sol-code-python.code-block::before{content:"Python"}
.itc-sol-code-sql::before,pre.itc-sol-code-sql.code-block::before{content:"SQL"}
/* Le bloc solution ITC ne reçoit jamais le bouton Copier générique. */
.itc-sol-code .code-copy{display:none}
.itc-sol-code-inner{font-family:inherit}
.itc-sol-ctr{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.6rem}
.itc-sol-count{font-family:var(--font-ui);font-size:.78rem;color:var(--color-text-muted);margin-left:auto}
.itc-sol-exp{margin-top:.7rem;background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-3)}
.itc-sol-exp-head{font-family:var(--font-ui);font-size:.75rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.3rem}
.itc-sol-exp-body{color:var(--color-text);line-height:1.6}
.itc-sol-exp-body code{font-family:var(--font-mono,monospace);background:var(--color-surface-offset);padding:.08em .35em;border-radius:4px;font-size:.9em}

.itc-fail-assert{font-family:var(--font-ui);font-size:.85rem;color:var(--color-amber);background:var(--color-amber-soft);border:1px solid color-mix(in srgb,var(--color-amber) 30%,transparent);border-radius:var(--radius-md);padding:.5rem .75rem}
.itc-fail-assert code{font-family:var(--font-mono,monospace);font-size:.85em}
.itc-fail-label{font-weight:700}
.itc-help-hint{color:var(--color-text-muted);font-size:.85rem;font-style:italic;padding:.2rem 0}
.itc-sql-diag{font-family:var(--font-ui);font-size:.86rem;line-height:1.5;color:var(--color-text);background:var(--color-surface-offset);border-left:3px solid var(--color-amber);border-radius:4px;padding:.45rem .7rem}

/* Atelier Caml — auto-évaluation (code non exécuté). */
.itc-selfcheck-note{display:flex;align-items:flex-start;gap:.5rem;font-size:.86rem;line-height:1.5;color:var(--color-text);background:var(--color-surface-offset);border:1px solid var(--color-border);border-left:3px solid var(--color-gold-hover);border-radius:6px;padding:.55rem .75rem;margin:.6rem 0}
.itc-selfcheck-note svg{width:1.05rem;height:1.05rem;flex:none;margin-top:.1rem;color:var(--color-gold-hover)}
.itc-selfcheck{background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:8px;padding:.75rem .9rem;display:flex;flex-direction:column;gap:.55rem}
.itc-selfcheck-head{display:flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted)}
.itc-selfcheck-head svg{width:1rem;height:1rem;flex:none}
.itc-selfcheck-body{font-size:.9rem;line-height:1.55;color:var(--color-text)}
.itc-selfcheck-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;padding-top:.35rem;border-top:1px dashed var(--color-border)}
.itc-selfcheck-q{font-size:.86rem;font-weight:600;color:var(--color-text);margin-right:auto}

/* Adaptations sombre : les variables font le gros du travail ; affinage de contraste. */
[data-theme=dark] .itc-exo-chip.active{color:var(--color-bg)}
[data-theme=dark] .itc-btn-run{color:var(--color-bg)}


/* ============================================================
   ITC — Refonte UX bêta : onglets, filtres, sidebar, examen, algos
   Réutilise strictement les tokens du design system Spectre.
   ============================================================ */

/* Onglets (Exercices / Examen / Fiches algos) */
.itc-tabs{display:flex;gap:.35rem;border-bottom:1px solid var(--color-border);margin-bottom:var(--space-4);flex-wrap:wrap}
.itc-tab{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-ui);font-size:.88rem;font-weight:600;color:var(--color-text-muted);background:none;border:none;border-bottom:2px solid transparent;padding:.6rem .9rem;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s}
.itc-tab svg{width:1.05rem;height:1.05rem;flex:none}
.itc-tab:hover{color:var(--color-text)}
.itc-tab.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}

/* Barre de filtres */
.itc-filters{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.itc-filter-grp{display:flex;align-items:center;gap:.5rem}
.itc-filter-lbl{font-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text-faint)}
.itc-seg{display:inline-flex;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-full);padding:2px}
.itc-seg-btn{font-family:var(--font-ui);font-size:.78rem;font-weight:600;color:var(--color-text-muted);background:none;border:none;border-radius:var(--radius-full);padding:.28rem .7rem;cursor:pointer;transition:all .15s}
.itc-seg-btn:hover{color:var(--color-text)}
.itc-seg-btn.active{color:var(--color-text-inverse);background:var(--color-primary)}
[data-theme=dark] .itc-seg-btn.active{color:var(--color-bg)}

/* Layout 2 colonnes : sidebar + contenu */
.itc-layout{display:grid;grid-template-columns:minmax(230px,290px) 1fr;gap:var(--space-5);align-items:start}
.itc-main{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}

/* Sidebar de navigation */
.itc-nav{position:sticky;top:1rem;display:flex;flex-direction:column;gap:var(--space-3);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3);max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem)}
.itc-nav-prog{padding:.3rem .3rem .1rem}
.itc-nav-prog-top{display:flex;align-items:center;gap:.4rem;font-family:var(--font-ui);font-size:.82rem;font-weight:700;color:var(--color-text)}
.itc-nav-prog-top svg{width:1rem;height:1rem;flex:none;color:var(--color-gold-hover)}
.itc-nav-prog-top b{margin-left:auto;color:var(--color-primary);font-variant-numeric:tabular-nums}
.itc-nav-prog-track{height:6px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin:.4rem 0 .3rem}
.itc-nav-prog-fill{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width .4s ease}
.itc-nav-prog-pct{font-family:var(--font-ui);font-size:.72rem;color:var(--color-text-muted)}
.itc-nav-scroll{display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;padding-right:2px}
.itc-nav-grp{display:flex;flex-direction:column}
.itc-nav-grp-head{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--color-text-muted);background:none;border:none;padding:.5rem .4rem .3rem;cursor:pointer}
.itc-nav-grp-head:hover{color:var(--color-text)}
.itc-nav-grp-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itc-nav-grp-count{font-variant-numeric:tabular-nums;color:var(--color-text-faint);font-weight:600}
.itc-nav-grp-head[aria-expanded=false] + .itc-nav-grp-list{display:none}
.itc-nav-item{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;font-family:var(--font-ui);font-size:.84rem;font-weight:500;color:var(--color-text-muted);background:none;border:none;border-radius:var(--radius-sm);padding:.42rem .55rem;cursor:pointer;transition:background .12s,color .12s}
.itc-nav-item:hover{background:var(--color-surface-offset);color:var(--color-text)}
.itc-nav-item.active{background:var(--color-primary-soft);color:var(--color-primary);font-weight:600}
.itc-nav-item.done{color:var(--color-text)}
.itc-nav-item-state{width:1rem;height:1rem;flex:none;display:inline-flex;align-items:center;justify-content:center;color:var(--color-green)}
.itc-nav-item-state svg{width:.95rem;height:.95rem}
.itc-nav-item.seen .itc-nav-item-state::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--color-amber)}
.itc-nav-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.itc-nav-empty{font-family:var(--font-ui);font-size:.82rem;color:var(--color-text-faint);font-style:italic;padding:.6rem .4rem}

/* Pastilles de difficulté */
.itc-diff{display:inline-flex;gap:2px;flex:none;align-items:center}
.itc-diff-dot{width:5px;height:5px;border-radius:50%;background:var(--color-border);display:inline-block}
.itc-diff-dot.on{background:var(--color-primary)}

/* Mode examen — accueil */
.itc-exam-head{display:flex;flex-direction:column;gap:.4rem}
.itc-exam-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:1.1rem;font-weight:700;color:var(--color-text)}
.itc-exam-title svg{width:1.2rem;height:1.2rem;flex:none;color:var(--color-primary)}
.itc-exam-intro{color:var(--color-text-muted);line-height:1.6;font-size:.92rem;margin:0}
.itc-exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--space-4);margin-top:var(--space-2)}
.itc-exam-card{display:flex;flex-direction:column;gap:.6rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
.itc-exam-card-title{font-family:var(--font-ui);font-size:1rem;font-weight:700;color:var(--color-text)}
.itc-exam-card-meta{display:flex;flex-wrap:wrap;gap:.9rem}
.itc-exam-card-meta span{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.8rem;color:var(--color-text-muted)}
.itc-exam-card-meta svg{width:.95rem;height:.95rem;flex:none}
.itc-exam-card-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem}
.itc-exam-card-list li{display:flex;align-items:center;gap:.5rem;justify-content:space-between;font-size:.85rem;color:var(--color-text);padding:.15rem 0;border-bottom:1px dashed var(--color-border)}
.itc-exam-card-list li:last-child{border-bottom:none}

/* Mode examen — session */
.itc-exam-bar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem .9rem}
.itc-exam-bar-title{font-family:var(--font-ui);font-weight:700;color:var(--color-text)}
.itc-exam-timer{margin-left:auto;font-family:var(--font-mono,monospace);font-size:1.15rem;font-weight:700;color:var(--color-primary);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.itc-exam-timer.over{color:var(--color-danger,#c0392b)}
.itc-exam-exos{display:flex;flex-direction:column;gap:.4rem;margin-top:var(--space-3)}
.itc-exam-exo{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.6rem .85rem;cursor:pointer;transition:border-color .15s}
.itc-exam-exo:hover{border-color:var(--color-primary-line)}
.itc-exam-exo.done{border-color:color-mix(in srgb,var(--color-green) 40%,transparent)}
.itc-exam-exo-num{width:1.5rem;height:1.5rem;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-surface-offset);font-family:var(--font-ui);font-size:.78rem;font-weight:700;color:var(--color-text-muted)}
.itc-exam-exo-t{flex:1;min-width:0;font-family:var(--font-ui);font-size:.9rem;color:var(--color-text)}
.itc-exam-exo-state{width:1rem;flex:none;color:var(--color-green);display:inline-flex}
.itc-exam-exo-state svg{width:1rem;height:1rem}
.itc-exam-tip,.itc-exam-bar + *{}
.itc-exam-tip{color:var(--color-text-muted);font-size:.85rem;font-style:italic;margin-top:.4rem}

/* Session d'examen (vrai test concours) */
.itc-exam-bar-sticky{position:sticky;top:.4rem;z-index:5;box-shadow:0 4px 14px -8px rgba(0,0,0,.18)}
.itc-exam-timer.warn{color:var(--color-orange,#e07a11)}
.itc-exam-progress{height:4px;background:var(--color-surface-offset);border-radius:2px;margin:.6rem 0;overflow:hidden}
.itc-exam-progress-fill{height:100%;background:var(--color-primary);transition:width .25s ease}
.itc-exam-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.4rem 0 .8rem}
.itc-exam-chips .itc-exam-chip{width:2.1rem;height:2.1rem;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;font-family:var(--font-ui);font-weight:700;font-size:.85rem;color:var(--color-text-muted);transition:all .15s}
.itc-exam-chips .itc-exam-chip:hover{border-color:var(--color-primary-line);color:var(--color-text)}
.itc-exam-chips .itc-exam-chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.itc-exam-chips .itc-exam-chip.touched:not(.active){border-color:color-mix(in srgb,var(--color-primary) 50%,transparent);color:var(--color-text)}
.itc-exam-chips .itc-exam-chip.ok{background:color-mix(in srgb,var(--color-green) 25%,transparent);border-color:var(--color-green);color:var(--color-text)}
.itc-exam-chips .itc-exam-chip.ok.active{background:var(--color-green);color:#fff}
.itc-exam-chips .itc-exam-chip.ko{background:color-mix(in srgb,var(--color-danger,#c0392b) 20%,transparent);border-color:var(--color-danger,#c0392b);color:var(--color-text)}
.itc-exam-session{display:flex;flex-direction:column;gap:.85rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
.itc-exam-exo-head{display:flex;flex-direction:column;gap:.35rem;padding-bottom:.6rem;border-bottom:1px solid var(--color-border)}
.itc-exam-exo-num-big{font-family:var(--font-ui);font-size:.8rem;font-weight:700;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}
.itc-exam-exo-title{font-family:var(--font-ui);font-size:1.15rem;font-weight:700;color:var(--color-text);line-height:1.3}
.itc-exam-exo-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.15rem}
.itc-exam-nav{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.itc-exam-nav-spacer{flex:1}
.itc-exam-nav .itc-btn[disabled]{opacity:.4;cursor:not-allowed}
.itc-exam-recap{margin-top:1.2rem;display:flex;flex-direction:column;gap:.9rem}
.itc-exam-recap-head{display:flex;flex-direction:column;gap:.3rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);padding:.9rem 1rem}
.itc-exam-recap-title{display:flex;align-items:center;gap:.5rem;font-family:var(--font-ui);font-size:1.05rem;font-weight:700;color:var(--color-text)}
.itc-exam-recap-title svg{width:1.15rem;height:1.15rem;color:var(--color-primary)}
.itc-exam-recap-score{font-family:var(--font-mono,monospace);font-size:.92rem;color:var(--color-text-muted)}
.itc-exam-recap-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.itc-exam-recap-card.verdict-ok{border-left:4px solid var(--color-green)}
.itc-exam-recap-card.verdict-ko{border-left:4px solid var(--color-danger,#c0392b)}
.itc-exam-recap-card.verdict-none{border-left:4px solid var(--color-text-muted)}
.itc-exam-recap-card-head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.itc-exam-recap-num{width:1.7rem;height:1.7rem;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--color-surface-offset);font-family:var(--font-ui);font-weight:700;font-size:.85rem;color:var(--color-text)}
.itc-exam-recap-t{flex:1;font-family:var(--font-ui);font-weight:700;color:var(--color-text)}
.itc-exam-recap-v{font-family:var(--font-ui);font-size:.8rem;font-weight:700;padding:.15rem .55rem;border-radius:999px}
.itc-recap-lbl{font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-muted);margin-top:.3rem}
.itc-editor[disabled]{opacity:.7;cursor:not-allowed;background:var(--color-surface-offset)}

/* Fiches algorithmes */
.itc-algo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4);margin-top:var(--space-2)}
.itc-algo-card{display:flex;flex-direction:column;gap:.55rem;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4)}
.itc-algo-top{display:flex;align-items:baseline;gap:.6rem;justify-content:space-between}
.itc-algo-title{font-family:var(--font-ui);font-size:1rem;font-weight:700;color:var(--color-text);margin:0}
.itc-algo-cplx{font-family:var(--font-mono,monospace);font-size:.78rem;font-weight:700;color:var(--color-primary);background:var(--color-primary-soft);border-radius:var(--radius-sm);padding:.1rem .45rem;white-space:nowrap;flex:none}
.itc-algo-idee{color:var(--color-text);line-height:1.55;font-size:.88rem;margin:0}
.itc-algo-note{color:var(--color-text-muted);font-size:.82rem;line-height:1.5;border-left:3px solid var(--color-gold-line);padding-left:.7rem}

/* Responsive : la sidebar passe au-dessus sur mobile/tablette */
@media (max-width:860px){
  .itc-layout{grid-template-columns:1fr}
  .itc-nav{position:static;max-height:none;flex-direction:column}
  .itc-nav-scroll{max-height:38vh}
  .itc-filters{gap:.8rem;flex-direction:column;align-items:flex-start}
}

@media (max-width:640px){
  .itc-actions{flex-direction:column;align-items:stretch}
  .itc-btn{justify-content:center}
}

/* ============================================================
   Coloration syntaxique légère (ateliers Python / SQL)
   Overlay : <pre> coloré sous un <textarea> transparent, alignés
   au pixel (mêmes police/taille/line-height/padding/tab-size).
   ============================================================ */
.cm-lite{position:relative;width:100%}
/* Le <pre> et le <textarea> partagent EXACTEMENT les mêmes métriques. */
.cm-lite-pre,
.cm-lite .cm-lite-ta{
  margin:0;
  width:100%;
  box-sizing:border-box;
  font-family:var(--font-mono,monospace);
  font-size:.9rem;
  line-height:1.5;
  padding:var(--space-3);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  tab-size:4;-moz-tab-size:4;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  letter-spacing:normal;
}
/* Couche colorée en arrière-plan. */
.cm-lite-pre{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:0;
  background:var(--color-surface-2);
  color:var(--color-text);
  pointer-events:none;
  overflow:hidden; /* le scroll est piloté par le textarea */
}
.cm-lite-pre code{font:inherit;display:block;min-height:100%}
/* Textarea au-dessus, texte transparent mais caret visible. */
.cm-lite .cm-lite-ta{
  position:relative;
  z-index:1;
  background:transparent;
  color:transparent;
  caret-color:var(--color-text);
  resize:vertical;
  -webkit-text-fill-color:transparent;
}
.cm-lite .cm-lite-ta::selection{background:var(--color-primary-soft)}
.cm-lite .cm-lite-ta:focus{outline:none}
.cm-lite:focus-within .cm-lite-pre{
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-soft);
}

/* --- Palette de tokens (thème clair) --- */
.cm-lite .tok-kw{color:#9b2393;font-weight:600}      /* mots-clés */
.cm-lite .tok-builtin{color:#0b7285}                 /* builtins Python */
.cm-lite .tok-fn{color:#1864ab}                      /* appels de fonction */
.cm-lite .tok-str{color:#2b8a3e}                     /* chaînes */
.cm-lite .tok-num{color:#e8590c}                     /* nombres */
.cm-lite .tok-com{color:#868e96;font-style:italic}   /* commentaires */
.cm-lite .tok-op{color:#5f3dc4}                       /* opérateurs */
.cm-lite .tok-deco{color:#c2255c}                     /* décorateurs */
.cm-lite .tok-id{color:#0b7285}                       /* identifiants SQL quotés */

/* --- Palette de tokens (thème sombre) --- */
[data-theme=dark] .cm-lite .tok-kw{color:#f78fec}
[data-theme=dark] .cm-lite .tok-builtin{color:#66d9e8}
[data-theme=dark] .cm-lite .tok-fn{color:#74c0fc}
[data-theme=dark] .cm-lite .tok-str{color:#8ce99a}
[data-theme=dark] .cm-lite .tok-num{color:#ffa94d}
[data-theme=dark] .cm-lite .tok-com{color:#909296}
[data-theme=dark] .cm-lite .tok-op{color:#b197fc}
[data-theme=dark] .cm-lite .tok-deco{color:#faa2c1}
[data-theme=dark] .cm-lite .tok-id{color:#66d9e8}

/* ---- Module Oraux (ch. 20 : tri par concours + recherche par numéro) ---- */
.oraux-controls{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-4)}
.oraux-filter{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}
.oraux-filter .chip{display:inline-flex;align-items:center;gap:.4rem}
.oraux-filter .chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.2rem;padding:0 .4rem;font-size:var(--text-xs);font-weight:700;border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}
.oraux-filter .chip.active .chip-count{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
[data-theme=dark] .oraux-filter .chip.active .chip-count{background:rgba(0,0,0,.22);color:var(--color-bg)}
.oraux-subrow{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center;justify-content:space-between}
.oraux-subrow .diff-filter{margin-bottom:0}
.oraux-search{display:flex;gap:var(--space-2);flex:1 1 280px;min-width:220px;justify-content:flex-end}
.oraux-search input{font-family:var(--font-ui);font-size:var(--text-sm);padding:.4rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text)}
.oraux-search input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-line)}
.oraux-search .oraux-num{flex:0 0 130px;max-width:140px}
.oraux-search .oraux-q{flex:1 1 200px;min-width:160px}
.oraux-count{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.oraux-card .ex-head{flex-wrap:wrap;gap:var(--space-2)}
.oraux-numbadge{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:700;font-size:var(--text-xs);padding:.2rem .55rem;border-radius:var(--radius-full);background:var(--color-primary);color:#fff;letter-spacing:.01em}
[data-theme=dark] .oraux-numbadge{color:var(--color-bg)}
.oraux-ecole{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:600;font-size:var(--text-xs);padding:.2rem .55rem;border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}
.oraux-niv{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:600;font-size:var(--text-xs);padding:.2rem .5rem;border-radius:var(--radius-full);background:transparent;color:var(--color-text-muted);border:1px dashed var(--color-border)}
.oraux-theme{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:600;font-size:var(--text-xs);padding:.2rem .55rem;border-radius:var(--radius-full);background:var(--color-primary-soft);color:var(--color-primary);border:1px solid var(--color-primary-line,var(--color-primary))}
.oraux-titre{font-weight:700}
@media (max-width:640px){.oraux-subrow{flex-direction:column;align-items:stretch}.oraux-search{justify-content:stretch}.oraux-search .oraux-num{flex:0 0 auto}}

/* Bouton « Afficher plus » du module oraux (pagination anti-crash mobile) */
.oraux-more{display:block;width:100%;margin:var(--space-4) 0 var(--space-2);padding:.7rem 1rem;font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);color:var(--color-primary);background:var(--color-surface);border:1px dashed var(--color-primary);border-radius:var(--radius-md);cursor:pointer;transition:background .15s,color .15s}
.oraux-more:hover{background:var(--color-primary);color:#fff}
[data-theme=dark] .oraux-more:hover{color:var(--color-bg)}

/* ============================================================
   Notes personnelles (post-it) par chapitre — persistance locale.
   ============================================================ */
.chap-notes{
  margin:1.6rem 0 .4rem;border:1px solid var(--color-gold-line);
  border-radius:var(--radius-md);background:var(--color-surface);
  overflow:hidden;
}
.chap-notes-summary{
  display:flex;align-items:center;gap:.5rem;cursor:pointer;
  padding:.7rem .9rem;font-family:var(--font-ui);font-weight:700;
  font-size:.92rem;color:var(--color-text);list-style:none;user-select:none;
}
.chap-notes-summary::-webkit-details-marker{display:none}
.chap-notes-summary svg{color:var(--color-gold);flex:none}
.chap-notes-summary::after{
  content:"";margin-left:auto;width:.5rem;height:.5rem;
  border-right:2px solid var(--color-text-muted);
  border-bottom:2px solid var(--color-text-muted);
  transform:rotate(-45deg);transition:transform .15s ease;
}
.chap-notes[open] .chap-notes-summary::after{transform:rotate(45deg)}
.chap-notes-body{padding:0 .9rem .9rem;display:flex;flex-direction:column;gap:.5rem}
.chap-notes-ta{
  width:100%;box-sizing:border-box;resize:vertical;min-height:6.5rem;
  font-family:var(--font-ui);font-size:.92rem;line-height:1.5;
  color:var(--color-text);background:var(--color-bg);
  border:1px solid var(--color-gold-line);border-radius:var(--radius-sm);
  padding:.6rem .7rem;
}
.chap-notes-ta:focus{outline:none;border-color:var(--color-gold)}
.chap-notes-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.chap-notes-status{font-size:.78rem;color:var(--color-text-muted);min-height:1em}
.chap-notes-clear{font-size:.8rem;padding:.3rem .7rem}

/* === Calendrier des concours (T30) === */
.cal-countdown{display:flex;flex-direction:column;gap:.35rem;background:var(--color-surface);border:1px solid var(--color-gold-line);border-left:4px solid var(--color-gold);border-radius:var(--radius-lg);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm);margin:1.2rem 0 1.6rem}
.cal-countdown-label{font-family:var(--font-ui);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.cal-countdown-main{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.cal-countdown-days{font-size:1.55rem;font-weight:800;color:var(--color-gold-hover);line-height:1.1}
.cal-countdown-ev{font-size:1.05rem;font-weight:600;color:var(--color-text)}
.cal-countdown-date{font-size:.86rem;color:var(--color-text-soft)}
.cal-section{margin:1.4rem 0}
.cal-section-title{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;font-size:1.02rem}
.cal-badge{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.22rem .6rem;border-radius:var(--radius-full);color:hsl(var(--cal-hue,40),55%,32%);background:hsla(var(--cal-hue,40),60%,50%,.13);border:1px solid hsla(var(--cal-hue,40),55%,45%,.3)}
[data-theme="dark"] .cal-badge{color:hsl(var(--cal-hue,40),70%,72%);background:hsla(var(--cal-hue,40),60%,55%,.16);border-color:hsla(var(--cal-hue,40),55%,55%,.32)}
.cal-events{display:grid;gap:.7rem}
.cal-event{display:flex;gap:1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:.85rem 1rem;box-shadow:var(--shadow-sm);transition:box-shadow .18s,border-color .18s}
.cal-event:hover{box-shadow:var(--shadow-md);border-color:var(--color-gold-line)}
.cal-event-date{flex:0 0 auto;min-width:88px;font-family:var(--font-ui);font-size:.82rem;font-weight:700;color:var(--color-gold-hover);line-height:1.3;padding-top:.1rem}
.cal-event-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.cal-event-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.cal-banque{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text-muted);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.12rem .45rem}
.cal-event-title{margin:0;font-size:.98rem;font-weight:600;color:var(--color-text)}
.cal-event-note{margin:0;font-size:.86rem;color:var(--color-text-soft);line-height:1.45}
.cal-event-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.15rem}
.cal-ics{font-size:.8rem;padding:.32rem .75rem}
.cal-event-link{font-family:var(--font-ui);font-size:.82rem;font-weight:600;color:var(--color-primary);text-decoration:none}
.cal-event-link:hover{text-decoration:underline}
.cal-source{margin:1.6rem 0 .5rem;font-size:.82rem;color:var(--color-text-muted);line-height:1.5}
.cal-source a{color:var(--color-primary);text-decoration:none}
.cal-source a:hover{text-decoration:underline}
@media (max-width:560px){.cal-event{flex-direction:column;gap:.45rem}.cal-event-date{min-width:0}}

/* --- Grille calendrier mensuelle (vraie grille visuelle) --- */
/* [FIX 2026-07-03 soir] Calendrier qui déborde signalé par le user.
   Ajout de contraintes de largeur strictes : le wrapper ne peut jamais
   dépasser 100% de son conteneur, et min-width:0 permet aux enfants
   grid/flex de rapetisser (sans ça, les cellules d'événements avec
   nowrap forcent une largeur intrinsèque plus grande que le parent). */
.cal-grid-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem 1rem .85rem;margin:1rem 0 1.6rem;box-shadow:var(--shadow-sm);max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.cal-grid-wrap *{min-width:0}
.cal-grid-nav{display:flex;align-items:center;gap:.5rem;margin:0 0 .8rem}
.cal-grid-title{flex:1 1 auto;text-align:center;font-family:var(--font-ui);font-size:1.05rem;font-weight:700;color:var(--color-text);text-transform:capitalize;letter-spacing:.01em}
.cal-nav-btn{appearance:none;background:var(--color-surface-2);border:1px solid var(--color-border);color:var(--color-text);width:36px;height:36px;border-radius:var(--radius-md);font-size:1.15rem;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s,border-color .18s,color .18s}
.cal-nav-btn:hover:not([disabled]){background:var(--color-gold-soft);border-color:var(--color-gold-line);color:var(--color-gold-hover)}
.cal-nav-btn[disabled]{opacity:.4;cursor:not-allowed}
.cal-nav-today{width:auto;padding:0 .8rem;font-family:var(--font-ui);font-size:.82rem;font-weight:600;letter-spacing:.02em}
.cal-grid-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin:0 0 4px}
.cal-grid-wd-cell{text-align:center;font-family:var(--font-ui);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);padding:.35rem 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(78px,auto);gap:4px;width:100%}
.cal-cell{position:relative;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.35rem .4rem .3rem;display:flex;flex-direction:column;gap:.25rem;min-height:78px;transition:background .18s,border-color .18s,box-shadow .18s;cursor:default}
.cal-cell.is-outside{opacity:.35}
.cal-cell.is-weekend:not(.is-outside){background:color-mix(in srgb,var(--color-surface-2) 92%,var(--color-text) 8%)}
.cal-cell.is-today{border-color:var(--color-gold);box-shadow:0 0 0 2px var(--color-gold-soft) inset}
.cal-cell.has-events{cursor:pointer}
.cal-cell.has-events:hover{background:var(--color-gold-soft);border-color:var(--color-gold-line)}
.cal-cell-num{font-family:var(--font-ui);font-size:.82rem;font-weight:700;color:var(--color-text);line-height:1;padding:.05rem 0}
.cal-cell.is-today .cal-cell-num{color:var(--color-gold-hover);position:relative;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:var(--color-gold);color:var(--color-bg);border-radius:50%;font-size:.75rem}
.cal-cell-dots{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.cal-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:hsl(var(--cal-hue,210),55%,50%)}
.cal-dot-more{font-family:var(--font-ui);font-size:.66rem;font-weight:700;color:var(--color-text-muted);margin-left:2px}
.cal-cell-ev{margin-top:auto;font-family:var(--font-ui);font-size:.68rem;font-weight:700;letter-spacing:.02em;color:hsl(var(--cal-hue,210),50%,28%);background:hsla(var(--cal-hue,210),60%,55%,.15);border:1px solid hsla(var(--cal-hue,210),50%,45%,.28);border-radius:var(--radius-sm);padding:.12rem .3rem;line-height:1.15;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:flex;align-items:center;gap:.28rem}
.cal-cell-ev-banque{font-weight:600;font-size:.58rem;letter-spacing:.03em;opacity:.7;text-transform:none;padding-left:.28rem;border-left:1px solid hsla(var(--cal-hue,210),50%,45%,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cal-grid-legend{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin:.9rem 0 0;padding:.55rem 0 0;border-top:1px dashed var(--color-border)}
.cal-legend-item{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-ui);font-size:.72rem;color:var(--color-text-soft)}

/* --- Popover d'une case (liste events du jour) --- */
.cal-pop{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);z-index:40;min-width:260px;max-width:320px;background:var(--color-surface);border:1px solid var(--color-gold-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg,0 12px 32px rgba(0,0,0,.18));text-align:left;cursor:default;animation:calPopIn .14s ease-out}
@keyframes calPopIn{from{opacity:0;transform:translate(-50%,0)}to{opacity:1;transform:translate(-50%,6px)}}
.cal-pop-inner{display:flex;flex-direction:column;max-height:min(70vh,420px);overflow:hidden}
.cal-pop-head{display:flex;align-items:center;gap:.5rem;padding:.65rem .85rem;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.cal-pop-title{flex:1 1 auto;font-family:var(--font-ui);font-size:.88rem;font-weight:700;color:var(--color-text);text-transform:capitalize}
.cal-pop-close{appearance:none;background:transparent;border:0;font-size:1.4rem;line-height:1;color:var(--color-text-muted);cursor:pointer;padding:0 .2rem;border-radius:var(--radius-sm)}
.cal-pop-close:hover{color:var(--color-text);background:var(--color-border)}
.cal-pop-body{padding:.55rem .85rem .85rem;overflow-y:auto;display:flex;flex-direction:column;gap:.7rem}
.cal-pop-ev{border-left:3px solid hsl(var(--cal-hue,210),55%,50%);padding:.35rem 0 .35rem .6rem}
.cal-pop-ev-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:0 0 .25rem}
.cal-pop-ev-title{font-size:.94rem;font-weight:600;color:var(--color-text);line-height:1.3}
.cal-pop-ev-date{margin-top:.1rem;font-family:var(--font-ui);font-size:.78rem;color:var(--color-gold-hover);font-weight:600}
.cal-pop-ev-note{margin-top:.25rem;font-size:.82rem;color:var(--color-text-soft);line-height:1.4}
.cal-pop-ev-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}

/* --- Liste adaptative (À venir / passées repliées) --- */
.cal-list-section{margin:1.4rem 0}
.cal-list-title{display:flex;align-items:center;gap:.55rem;margin:0 0 .7rem;font-size:1.02rem}
.cal-list-count{font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:.16rem .5rem;background:var(--color-gold-soft);color:var(--color-gold-hover);border-radius:var(--radius-full);border:1px solid var(--color-gold-line)}
.cal-list-empty{margin:0;color:var(--color-text-muted);font-style:italic}
.cal-event.is-past{opacity:.62;filter:saturate(.75)}
.cal-event.is-past .cal-event-date{color:var(--color-text-muted)}
.cal-status{display:inline-flex;align-items:center;font-family:var(--font-ui);font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:.16rem .5rem;border-radius:var(--radius-full);background:var(--color-surface-2);color:var(--color-text-soft);border:1px solid var(--color-border)}
.cal-status.is-today{background:var(--color-gold);color:var(--color-bg);border-color:transparent}
.cal-status.is-soon{background:var(--color-gold-soft);color:var(--color-gold-hover);border-color:var(--color-gold-line)}
.cal-status.is-current{background:var(--color-primary-soft,#dbeafe);color:var(--color-primary);border-color:var(--color-primary-line,transparent)}
.cal-past-section{margin-top:1.2rem}
.cal-past-toggle{appearance:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.55rem .8rem;font-family:var(--font-ui);font-size:.85rem;font-weight:600;color:var(--color-text-soft);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:background .18s,border-color .18s,color .18s}
.cal-past-toggle:hover{background:var(--color-surface-2);border-color:var(--color-gold-line);color:var(--color-text)}
.cal-past-toggle[aria-expanded="true"] .cal-past-toggle-icon{transform:rotate(180deg)}
.cal-past-toggle-icon{transition:transform .18s}
.cal-past-body{margin-top:.7rem}

@media (max-width:640px){
  .cal-grid-wrap{padding:.75rem .55rem .7rem}
  .cal-grid{grid-auto-rows:minmax(62px,auto);gap:3px}
  .cal-cell{min-height:62px;padding:.25rem .28rem .22rem;border-radius:8px}
  .cal-cell-num{font-size:.72rem}
  .cal-cell.is-today .cal-cell-num{width:20px;height:20px;font-size:.7rem}
  .cal-cell-ev{font-size:.6rem;padding:.08rem .22rem}
  .cal-grid-wd-cell{font-size:.66rem;padding:.25rem 0}
  .cal-nav-btn{width:32px;height:32px;font-size:1rem}
  .cal-nav-today{padding:0 .6rem;font-size:.75rem}
  .cal-pop{position:fixed;top:auto;bottom:12px;left:12px;right:12px;transform:none;max-width:none;min-width:0}
  @keyframes calPopIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}

/* === Espace concentration : Pomodoro + forêt SVG + Deep Focus (T29 / T35) === */
.focus-svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.focus-wrap{max-width:760px;margin:0 auto}
.focus-head{margin:0 0 1.4rem}
.focus-title{margin:0 0 .4rem;font-size:1.5rem}
.focus-sub{margin:0;font-size:.92rem;color:var(--color-text-soft);line-height:1.5}
.focus-timer-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.6rem 1.4rem;box-shadow:var(--shadow-sm);text-align:center;transition:border-color .25s,box-shadow .25s,background .25s;margin:0 0 1.6rem}
.focus-timer-card.is-focus{border-color:var(--color-primary-line);box-shadow:0 0 0 3px var(--color-primary-soft),var(--shadow-md)}
.focus-timer-card.is-break{border-color:var(--color-green);box-shadow:0 0 0 3px var(--color-green-soft),var(--shadow-md)}
.focus-timer-card.is-paused{border-color:var(--color-gold-line);box-shadow:0 0 0 3px var(--color-gold-soft),var(--shadow-md)}
/* --- Scène Forest : arbre central qui pousse en temps réel --- */
.focus-scene{width:100%;max-width:380px;margin:0 auto 1.2rem;border-radius:18px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 6px 20px rgba(11,29,58,.18)}
.focus-scene-svg{display:block;width:100%;height:auto}
.focus-scene-stars{animation:focusTwinkle 4s ease-in-out infinite}
/* Le scale + l'ancrage de l'arbre central sont posés via l'attribut transform
   SVG (updateScene). On anime ici une transition douce du scale et l'état. */
.focus-scene-tree{transition:transform 1s linear}
.focus-scene-tree-svg{overflow:visible;transform-box:fill-box;transform-origin:50% 100%}
.focus-scene-tree.is-growing .focus-scene-tree-svg{animation:focusSway 5.5s ease-in-out infinite}
.focus-scene-tree.is-paused{opacity:.72;filter:grayscale(.25) saturate(.7)}
@keyframes focusTwinkle{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes focusSway{0%,100%{transform:rotate(0deg)}50%{transform:rotate(1.4deg)}}
.focus-presets{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:0 0 1.3rem}
.focus-preset{font:inherit;font-size:.84rem;font-weight:600;cursor:pointer;min-height:44px;padding:.4rem .9rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface-offset);color:var(--color-text-soft);transition:color .18s,background .18s,border-color .18s}
.focus-preset:hover:not(:disabled){color:var(--color-text);border-color:var(--color-primary)}
.focus-preset.is-active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.focus-preset:disabled{opacity:.45;cursor:not-allowed}
.focus-custom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;align-items:flex-end;margin:0 0 1.3rem;padding:.9rem 1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-offset)}
.focus-custom[hidden]{display:none}
.focus-custom-field{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;font-weight:600;color:var(--color-text-soft);text-align:left}
.focus-custom-field>span:first-child{text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}
.focus-custom-field input{font:inherit;font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums;width:5.5rem;min-height:44px;padding:.3rem .6rem;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-align:center}
.focus-custom-field input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 22%,transparent)}
.focus-custom-field input:disabled{opacity:.5;cursor:not-allowed}
.focus-custom-unit{font-size:.72rem;color:var(--color-text-soft);font-weight:600}
.focus-clock{font-family:var(--font-ui);font-variant-numeric:tabular-nums;font-size:4.2rem;font-weight:800;line-height:1;letter-spacing:.02em;color:var(--color-text);margin:.2rem 0 .5rem}
.focus-timer-card.is-focus .focus-clock{color:var(--color-primary-hover)}
.focus-timer-card.is-break .focus-clock{color:var(--color-green)}
.focus-timer-card.is-paused .focus-clock{color:var(--color-gold-hover)}
.focus-phase{font-size:.92rem;font-weight:600;color:var(--color-text-muted);margin:0 0 1.3rem;min-height:1.3em}
.focus-timer-card.is-paused .focus-phase{color:var(--color-gold-hover)}
.focus-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.focus-actions .btn{min-height:44px}
.focus-actions .btn[hidden]{display:none}
.focus-forest-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.3rem 1.4rem;box-shadow:var(--shadow-sm)}
.focus-forest-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin:0 0 1rem}
.focus-forest-title{margin:0;font-size:1.1rem}
.focus-stats{display:flex;gap:1.1rem;flex-wrap:wrap}
.focus-stat{font-size:.82rem;color:var(--color-text-muted)}
.focus-stat strong{font-size:1.05rem;font-weight:800;color:var(--color-text);margin-right:.15rem}
/* Forêt : grille / frise d'arbres SVG */
.focus-forest-grid{display:flex;flex-wrap:wrap;gap:.15rem .2rem;align-items:flex-end;min-height:3.4rem}
.focus-tree{display:inline-flex;align-items:flex-end;line-height:0;cursor:default;transition:transform .18s ease}
.focus-tree:hover{transform:translateY(-3px) scale(1.06)}
.focus-tree.is-wither{opacity:.55}
.focus-tree.just-planted .focus-tree-svg{animation:focusPlant .42s cubic-bezier(.2,.8,.3,1.2)}
.focus-tree-svg{display:block;transform-origin:50% 100%}
.focus-tree-shadow{fill:rgba(20,40,20,.14)}
.focus-tree.is-wither .focus-tree-shadow{fill:rgba(60,55,40,.1)}
@keyframes focusPlant{from{transform:translateY(6px) scale(.35);opacity:0}to{transform:none;opacity:1}}
.focus-forest-empty{font-size:.9rem;color:var(--color-text-muted);font-style:italic;line-height:1.5;padding:.3rem 0}
/* Bulle flottante « Deep Focus » (cross-page) — interactive */
.focus-bubble{position:fixed;right:1.1rem;bottom:1.1rem;z-index:9000;display:inline-flex;align-items:stretch;min-height:48px;border-radius:var(--radius-full);border:1px solid var(--color-primary-line);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-md);font-family:var(--font-ui);transition:box-shadow .18s ease,border-color .18s ease,transform .18s ease;animation:focusBubbleIn .25s ease;overflow:hidden}
.focus-bubble:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.16)}
.focus-bubble{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.focus-bubble.is-dragging{cursor:grabbing;transform:none;box-shadow:0 10px 30px rgba(0,0,0,.22);transition:none}
.focus-bubble-main{cursor:inherit}
.focus-bubble.is-break{border-color:var(--color-green)}
.focus-bubble.is-paused{border-color:var(--color-gold-line);box-shadow:0 0 0 3px var(--color-gold-soft),var(--shadow-md)}
.focus-bubble-main{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .7rem .4rem .5rem;background:none;border:0;cursor:pointer;color:inherit;font:inherit}
.focus-bubble-main:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
.focus-bubble-tree{display:inline-flex;width:34px;height:38px;flex:none;align-items:flex-end;justify-content:center}
.focus-bubble-tree-svg{width:34px;height:38px;transform-origin:50% 100%;transform:scale(var(--grow,1));transition:transform 1s linear}
.focus-bubble-info{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left}
.focus-bubble-time{font-variant-numeric:tabular-nums;font-size:1.05rem;font-weight:800;letter-spacing:.02em}
.focus-bubble-phase{font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}
.focus-bubble.is-paused .focus-bubble-phase{color:var(--color-gold-hover)}
.focus-bubble-give{display:inline-flex;align-items:center;justify-content:center;width:40px;flex:none;border:0;border-left:1px solid var(--color-border);background:none;color:var(--color-text-muted);cursor:pointer;transition:color .15s,background .15s}
.focus-bubble-give:hover{color:#fff;background:#c0392b}
.focus-bubble-give:focus-visible{outline:2px solid #c0392b;outline-offset:-2px}
@keyframes focusBubbleIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (max-width:560px){.focus-clock{font-size:3.2rem}.focus-timer-card{padding:1.3rem 1rem}.focus-bubble{right:.8rem;bottom:.8rem}.focus-scene{max-width:300px}}
@media (prefers-reduced-motion:reduce){.focus-tree,.focus-tree.just-planted .focus-tree-svg,.focus-bubble,.focus-scene-tree,.focus-scene-stars,.focus-scene-tree.is-growing .focus-scene-tree-svg,.focus-scene-tree-svg,.focus-bubble-tree-svg{animation:none!important;transition:none!important}.focus-tree:hover,.focus-bubble:hover{transform:none}}

/* === Notes libres ancrées sur un bloc (T28+) === */
.box-head .note-btn{color:var(--color-text-faint);width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);cursor:pointer;background:none;border:0;flex:none;transition:color .15s,background .15s}
.box-head .note-btn:hover{color:var(--color-gold);background:var(--color-gold-soft)}
.box-head .note-btn.has-note{color:var(--color-gold)}
.block-note{display:none;margin:0 var(--space-4) var(--space-4);flex-direction:column;gap:.4rem}
.block-note.is-shown{display:flex}
.block-note-ta{width:100%;box-sizing:border-box;resize:vertical;min-height:2.6rem;font:inherit;font-size:.9rem;line-height:1.5;color:var(--color-text);background:color-mix(in srgb,var(--color-gold-soft) 45%,var(--color-surface));border:1px solid var(--color-gold-line);border-radius:var(--radius-md);padding:.55rem .7rem}
.block-note-ta:focus{outline:none;border-color:var(--color-gold)}
.block-note-foot{display:flex;align-items:center;justify-content:flex-end;gap:.7rem}
.block-note-status{font-size:.74rem;color:var(--color-text-muted);margin-right:auto;min-height:1em}
.block-note-del{font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;background:none;border:0;color:var(--color-text-muted);padding:.15rem .3rem;border-radius:var(--radius-sm)}
.block-note-del:hover{color:var(--color-danger)}

/* ============================================================
   AIDE & SUPPORT (T27)
   ============================================================ */
.aide-card{margin:0 0 1.4rem}
.aide-faq-cat{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted);margin:1.1rem 0 .4rem;padding-top:.3rem}
.aide-faq-cat:first-of-type{margin-top:.4rem}
.aide-faq{border:1px solid var(--color-border);border-radius:var(--radius-lg,12px);background:var(--color-surface-offset);margin:0 0 .5rem;overflow:hidden;transition:border-color .18s,box-shadow .18s}
.aide-faq[open]{border-color:var(--color-primary-line);box-shadow:0 0 0 2px var(--color-primary-soft)}
.aide-faq-q{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 1rem;font-size:.92rem;font-weight:600;color:var(--color-text);min-height:44px;box-sizing:border-box}
.aide-faq-q::-webkit-details-marker{display:none}
.aide-faq-q:hover{color:var(--color-primary-hover)}
.aide-faq-chev{display:inline-flex;flex-shrink:0;color:var(--color-text-muted);transition:transform .2s ease}
.aide-faq[open] .aide-faq-chev{transform:rotate(90deg);color:var(--color-primary)}
.aide-faq-a{padding:0 1rem 1rem;font-size:.9rem;line-height:1.6;color:var(--color-text-soft)}
.aide-faq-a strong{color:var(--color-text)}

/* Assistant local */
.aide-bot-log{display:flex;flex-direction:column;gap:.6rem;max-height:340px;overflow-y:auto;padding:.4rem .2rem;margin:0 0 .9rem}
.aide-bot-msg{max-width:88%;padding:.65rem .85rem;border-radius:14px;font-size:.9rem;line-height:1.55}
.aide-bot-bot{align-self:flex-start;background:var(--color-surface-offset);border:1px solid var(--color-border);color:var(--color-text-soft);border-bottom-left-radius:4px}
.aide-bot-bot strong{color:var(--color-text)}
.aide-bot-me{align-self:flex-end;background:var(--color-primary);color:#fff;border-bottom-right-radius:4px}
.aide-bot-form{display:flex;gap:.55rem;flex-wrap:wrap}
.aide-bot-input{flex:1 1 220px;min-width:0;font:inherit;font-size:.92rem;padding:.6rem .8rem;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface);color:var(--color-text);min-height:44px;box-sizing:border-box}
.aide-bot-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.aide-bot-send{flex:0 0 auto;min-height:44px}

/* Formulaire de contact */
.aide-ticket-form{display:flex;flex-direction:column;gap:.9rem}
.aide-field{display:flex;flex-direction:column;gap:.35rem}
.aide-label{font-size:.82rem;font-weight:600;color:var(--color-text)}
.aide-input{font:inherit;font-size:.92rem;padding:.6rem .75rem;border:1px solid var(--color-border);border-radius:var(--radius-md,10px);background:var(--color-surface);color:var(--color-text);min-height:44px;box-sizing:border-box;width:100%}
.aide-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-soft)}
.aide-textarea{min-height:120px;resize:vertical;line-height:1.5}
.aide-form-err{font-size:.86rem;color:var(--color-red,#dc2626);font-weight:600;padding:.2rem 0}
.aide-ticket-actions{display:flex;justify-content:flex-end}
.aide-ticket-ok{display:flex;align-items:flex-start;gap:.7rem;padding:1rem;border:1px solid var(--color-green);background:var(--color-green-soft);border-radius:var(--radius-lg,12px);font-size:.92rem;line-height:1.5;color:var(--color-text)}
.aide-ticket-ok-ic{display:inline-flex;flex-shrink:0;color:var(--color-green);margin-top:.1rem}
@media (max-width:560px){.aide-bot-send{flex:1 1 100%}}

/* ============================================================
   Fix alignement LaTeX (bug signalé par Ilian - 2026-07-02)
   Les formules inline extraites par _extractPromoted() sont
   placées dans un .math-block-extracted qui prend TOUTE la
   largeur, alignée à gauche, avec les mêmes marges qu'un <p>.
   ============================================================ */
.math-block-extracted{
  display:block;
  margin:.55rem 0 .75rem;
  padding:.15rem 0;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  text-align:left;
}
.math-block-extracted mjx-container{
  display:inline-block !important;
  margin:0 !important;
  padding:0;
  vertical-align:baseline;
  text-align:left;
  max-width:100%;
}
.math-block-extracted mjx-container[jax="SVG"] svg{
  max-width:100%;
  height:auto;
  vertical-align:baseline;
}
/* Quand deux blocs math extraits se suivent, on resserre légèrement. */
.math-block-extracted + .math-block-extracted{margin-top:.25rem}
/* Cas particulier : à l'intérieur d'un <li>, on garde le retrait de la puce. */
li > .math-block-extracted{margin-left:0;padding-left:0}
/* Le paragraphe restant AVANT la formule ne doit pas garder une marge basse trop grande. */
p + .math-block-extracted{margin-top:.25rem}
.math-block-extracted + p{margin-top:.35rem}

/* Version in-list du bloc extrait : dans un <li>, on garde la puce et on met
   la formule sur sa propre ligne, indentée mais SANS créer une nouvelle puce. */
.math-block-in-list{
  display:block;
  margin:.35rem 0 .5rem;
  padding:.1rem 0;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  text-align:left;
}
.math-block-in-list mjx-container{
  display:inline-block !important;
  margin:0 !important;
  vertical-align:baseline;
}
/* Cas particulier : quand plusieurs formules s'enchaînent dans un même <li>,
   on ne veut pas trop d'espace entre. */
li .math-block-in-list + .math-block-in-list{margin-top:.1rem}

/* ============================================================
   [FIX inline v6.13-latex 2026-07-04] Rythme typographique Dunod
   dans les cartes théorème / définition / propriété.
   Objectif : formules display et blocs extraits COMPACTS et centrés,
   sans les grands blancs verticaux visibles sur le théorème 6.10.
   ============================================================ */
/* Display math dans une carte : centré, compact (marges réduites vs .space-4),
   scrollable si trop large. On resserre uniquement DANS les encadrés de cours. */
.box-body mjx-container[display="true"],
.result mjx-container[display="true"]{
  margin:.5rem 0;
  padding:.1rem 0;
  text-align:center;
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
}
/* Bloc extrait (formule isolée promue) dans une carte : marges resserrées pour
   supprimer les grands vides autour des théorèmes/définitions. */
.box-body .math-block-extracted,
.result .math-block-extracted{margin:.4rem 0;padding:.1rem 0}
/* Première/dernière formule d'une carte : pas de marge qui déborde du cadre. */
.box-body .math-block-extracted:first-child,
.box-body mjx-container[display="true"]:first-child{margin-top:0}
.box-body .math-block-extracted:last-child,
.box-body mjx-container[display="true"]:last-child{margin-bottom:0}
/* Anti-orphelin : un paragraphe VIDE laissé par une extraction/coupe ne doit pas
   créer une ligne blanche fantôme (les fragments de ponctuation seule sont déjà
   annexés au bloc math côté JS ; ceci couvre le cas d'un <p> devenu vide). */
#chapBody p:empty,.box-body p:empty,.result p:empty{display:none}
/* Deux display consécutifs (système d'équations rendu en 2 blocs) : resserrer
   pour qu'ils lisent comme un groupe, pas comme deux blocs espacés. */
.box-body mjx-container[display="true"] + mjx-container[display="true"],
.result mjx-container[display="true"] + mjx-container[display="true"]{margin-top:.15rem}

/* ============================================================
   DESIGNER MODERN — Refonte visuelle full site
   Inspiré du short @bitwisedev « The Designer Vs The Programmer »
   Signature : pilules, gradients ciel, glows soft, transitions cubic-bezier.
   Superpose l'ADN Polaris (bleu nuit + or) — ne le remplace pas.
   ============================================================ */

:root, [data-theme="light"] {
  /* Ciel jour — dégradé du toggle, réutilisé pour glows et surfaces */
  --sky-day-1:#7dc7f5;
  --sky-day-2:#a8dcfa;
  --sky-day-3:#dff1fd;
  --sun-core:#ffd94d;
  --sun-glow:#f5a623;

  /* Gradients Polaris — accents doux pour cartes/boutons */
  --grad-primary: linear-gradient(135deg, #15305c 0%, #0b1d3a 100%);
  --grad-gold: linear-gradient(135deg, #dcbb6b 0%, #c8a451 60%, #a88535 100%);
  --grad-sky: linear-gradient(135deg, var(--sky-day-1) 0%, var(--sky-day-2) 100%);
  --grad-surface: linear-gradient(180deg, #fdfdfb 0%, #f7f6f2 100%);

  /* Glows semantic */
  --glow-primary: 0 0 0 3px color-mix(in srgb, #0b1d3a 12%, transparent), 0 8px 24px -6px color-mix(in srgb, #0b1d3a 30%, transparent);
  --glow-gold: 0 0 0 3px color-mix(in srgb, #c8a451 22%, transparent), 0 8px 24px -6px color-mix(in srgb, #c8a451 40%, transparent);
  --glow-soft: 0 8px 30px -12px rgba(11,29,58,.25), 0 2px 6px -2px rgba(11,29,58,.08);

  /* Transitions signature */
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --trans-slow: 420ms var(--ease-smooth);
  --trans-mid: 260ms var(--ease-smooth);
  --trans-fast: 160ms var(--ease-smooth);
}

[data-theme="dark"] {
  --sky-day-1:#0f1729;
  --sky-day-2:#1a2340;
  --sky-day-3:#243155;

  --grad-primary: linear-gradient(135deg, #dcbb6b 0%, #c8a451 100%);
  --grad-gold: linear-gradient(135deg, #dcbb6b 0%, #c8a451 60%, #8f6f28 100%);
  --grad-sky: linear-gradient(135deg, #0f1729 0%, #1a2340 60%, #243155 100%);
  --grad-surface: linear-gradient(180deg, #13223d 0%, #0e1a30 100%);

  --glow-primary: 0 0 0 3px color-mix(in srgb, #c8a451 22%, transparent), 0 8px 30px -6px color-mix(in srgb, #c8a451 35%, transparent);
  --glow-gold: 0 0 0 3px color-mix(in srgb, #c8a451 28%, transparent), 0 10px 32px -6px color-mix(in srgb, #c8a451 50%, transparent);
  --glow-soft: 0 8px 30px -12px rgba(0,0,0,.55), 0 2px 6px -2px rgba(0,0,0,.35);
}

/* ============================================================
   1. TOGGLE JOUR/NUIT — pilule animée (3 positions : jour / auto / nuit)
   ============================================================ */
.theme-switch{
  --sw-w: 84px;
  --sw-h: 30px;
  --sw-pad: 3px;
  width:var(--sw-w); height:var(--sw-h);
  padding:0; margin:0;
  border:none; background:none;
  cursor:pointer; position:relative;
  display:inline-flex; align-items:center;
  border-radius:999px;
  transition: transform var(--trans-fast);
}
.theme-switch:hover{ transform: translateY(-1px); }
.theme-switch:active{ transform: translateY(0); }
.theme-switch:focus-visible{ outline:none; }
.theme-switch:focus-visible .theme-switch-track{ box-shadow: var(--glow-primary); }

.theme-switch-track{
  position:relative;
  width:100%; height:100%;
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.12);
  transition: box-shadow var(--trans-mid);
}
.theme-switch-sky{
  position:absolute; inset:0;
  transition: opacity var(--trans-slow);
}
.theme-switch-sky-day{
  background: linear-gradient(135deg, #7dc7f5 0%, #a8dcfa 100%);
  opacity:1;
}
.theme-switch-sky-night{
  background: linear-gradient(135deg, #0f1729 0%, #1a2340 60%, #243155 100%);
  opacity:0;
}
[data-theme="dark"] .theme-switch-sky-day{ opacity:0; }
[data-theme="dark"] .theme-switch-sky-night{ opacity:1; }
/* Mode auto : cross-fade symétrique pour signaler que l'affichage suit le système. */
.theme-switch[data-theme-pref="auto"] .theme-switch-sky-day{ opacity:.55; }
.theme-switch[data-theme-pref="auto"] .theme-switch-sky-night{ opacity:.55; }

/* Nuages (jour) */
.theme-switch-cloud{
  position:absolute;
  background:#fff;
  border-radius:999px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform var(--trans-slow), opacity var(--trans-slow);
}
.theme-switch-cloud-1{ width:14px; height:5px; top:6px; left:8px; }
.theme-switch-cloud-1::before, .theme-switch-cloud-1::after{
  content:""; position:absolute; background:#fff; border-radius:50%;
}
.theme-switch-cloud-1::before{ width:6px; height:6px; top:-3px; left:3px; }
.theme-switch-cloud-1::after{ width:5px; height:5px; top:-2px; left:8px; }
.theme-switch-cloud-2{ width:10px; height:4px; top:16px; left:22px; }
.theme-switch-cloud-2::before{ content:""; position:absolute; background:#fff; border-radius:50%; width:5px; height:5px; top:-2px; left:2px; }
.theme-switch-cloud-3{ width:12px; height:4px; top:9px; right:6px; }
.theme-switch-cloud-3::before{ content:""; position:absolute; background:#fff; border-radius:50%; width:5px; height:5px; top:-2px; left:4px; }
[data-theme="dark"] .theme-switch-cloud{ transform: translateY(4px); opacity:0; }

/* Étoiles (nuit) */
.theme-switch-star{
  position:absolute;
  background:#fff;
  border-radius:50%;
  opacity:0;
  transition: opacity var(--trans-slow), transform var(--trans-slow);
}
.theme-switch-star-1{ width:2px; height:2px; top:6px; left:10px; box-shadow: 0 0 4px rgba(255,255,255,.8); }
.theme-switch-star-2{ width:1.5px; height:1.5px; top:12px; left:18px; }
.theme-switch-star-3{ width:2px; height:2px; top:8px; left:26px; box-shadow: 0 0 3px rgba(255,255,255,.6); }
.theme-switch-star-4{ width:1.5px; height:1.5px; top:18px; left:14px; }
.theme-switch-star-5{ width:2px; height:2px; top:14px; right:8px; box-shadow: 0 0 4px rgba(255,255,255,.7); }
[data-theme="dark"] .theme-switch-star{ opacity:1; }
[data-theme="dark"] .theme-switch-star-1{ animation: switch-twinkle 2.4s ease-in-out infinite; }
[data-theme="dark"] .theme-switch-star-3{ animation: switch-twinkle 3.2s ease-in-out infinite .6s; }
[data-theme="dark"] .theme-switch-star-5{ animation: switch-twinkle 2.8s ease-in-out infinite 1.2s; }
@keyframes switch-twinkle{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* Thumb (rond qui glisse) — 3 positions : left / center / right */
.theme-switch-thumb{
  position:absolute;
  top:var(--sw-pad); left:var(--sw-pad);
  width:calc(var(--sw-h) - var(--sw-pad)*2);
  height:calc(var(--sw-h) - var(--sw-pad)*2);
  border-radius:50%;
  transition: transform var(--trans-slow), box-shadow var(--trans-mid);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 -2px 3px rgba(0,0,0,.08);
}
/* Position "nuit" : glissé tout à droite. */
[data-theme="dark"] .theme-switch-thumb{
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}
/* Position "auto" : centré. Le sélecteur .theme-switch parent porte data-theme-pref
   (mis à jour dans setupTheme > apply). Il prime sur [data-theme="dark"] grâce à sa
   spécificité (classe + attribut) couplée au sélecteur descendant.  */
.theme-switch[data-theme-pref="auto"] .theme-switch-thumb{
  transform: translateX(calc((var(--sw-w) - var(--sw-h)) / 2));
}

/* Soleil */
.theme-switch-sun, .theme-switch-moon{
  position:absolute; inset:0;
  border-radius:50%;
  transition: opacity var(--trans-slow);
}
.theme-switch-sun{
  background: radial-gradient(circle at 35% 35%, #ffd94d 0%, #f5a623 65%, #d97a0a 100%);
  box-shadow: 0 0 12px rgba(245,166,35,.55), inset -2px -2px 4px rgba(180,90,0,.3);
  opacity:1;
}
.theme-switch-moon{
  background: radial-gradient(circle at 35% 35%, #eef1f7 0%, #c8ccd6 60%, #8a92a3 100%);
  box-shadow: 0 0 10px rgba(200,204,214,.35), inset -2px -2px 4px rgba(60,70,90,.35);
  opacity:0;
}
[data-theme="dark"] .theme-switch-sun{ opacity:0; }
[data-theme="dark"] .theme-switch-moon{ opacity:1; }

/* Cratères lune */
.theme-switch-crater{
  position:absolute;
  background: radial-gradient(circle at 35% 35%, #7a828f 0%, #5c6470 100%);
  border-radius:50%;
  opacity:0;
  transition: opacity var(--trans-slow);
}
[data-theme="dark"] .theme-switch-crater{ opacity:1; }

/* Indicateur "A" (automatique) sur le thumb, visible uniquement en mode auto.
   Sur le thumb : disque neutre à mi-chemin entre soleil et lune, avec la lettre A. */
.theme-switch-auto{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font: 700 12px/1 "Source Sans 3", system-ui, sans-serif;
  color:#3a4258;
  background: radial-gradient(circle at 35% 35%, #f4e8c2 0%, #d9c99b 55%, #a89066 100%);
  border-radius:50%;
  box-shadow: 0 0 8px rgba(220,190,120,.45), inset -2px -2px 3px rgba(120,90,40,.25);
  opacity:0;
  pointer-events:none;
  transition: opacity var(--trans-slow);
}
.theme-switch[data-theme-pref="auto"] .theme-switch-auto{ opacity:1; }
/* En mode auto, on masque soleil et lune pour laisser place à l'indicateur A. */
.theme-switch[data-theme-pref="auto"] .theme-switch-sun,
.theme-switch[data-theme-pref="auto"] .theme-switch-moon{ opacity:0; }
.theme-switch-crater-1{ width:5px; height:5px; top:4px; left:5px; }
.theme-switch-crater-2{ width:3.5px; height:3.5px; top:12px; left:14px; }
.theme-switch-crater-3{ width:3px; height:3px; top:6px; left:14px; }

/* Reduced motion : on garde le crossfade, on supprime les scintillements */
@media (prefers-reduced-motion:reduce){
  .theme-switch-star{ animation:none !important; }
}

/* [FIX ANIMATION matin] Renfort defensif : la vraie cause du bug était le innerHTML
   recreé a chaque clic en JS (voir app.js setupTheme). On blinde quand meme le CSS
   contre un ecrasement futur par .icon-btn ou une regle plus specifique, pour que
   la transition ne puisse plus jamais etre invisible pour une raison de layout. */
.theme-switch{ display:inline-flex !important; overflow:visible !important; }
.theme-switch-track{ overflow:hidden !important; }
.theme-switch-thumb{ transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .26s cubic-bezier(.22,1,.36,1) !important; }
[data-theme="dark"] .theme-switch-thumb{ transform: translateX(calc(var(--sw-w) - var(--sw-h))) !important; }

/* ============================================================
   2. HEADER + BARRE DE RECHERCHE
   ============================================================ */
.app-header{
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-primary) 4%, transparent), 0 8px 24px -20px rgba(0,0,0,.3);
}
.search-trigger{
  border-radius: var(--radius-full) !important;
  background: color-mix(in srgb, var(--color-surface-2) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  transition: box-shadow var(--trans-mid), border-color var(--trans-mid), transform var(--trans-fast);
}
.search-trigger:hover{
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow: var(--glow-soft);
  transform: translateY(-1px);
}
.search-trigger:focus-visible,
.search-trigger:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}
/* kbd retiré du search-trigger */

/* ============================================================
   3. NAV / SIDEBAR — pilules avec glow doux
   ============================================================ */
.nav-link{
  border-radius: var(--radius-full);
  padding: .5rem .85rem;
  transition: background var(--trans-mid), color var(--trans-mid), transform var(--trans-fast), box-shadow var(--trans-mid);
  position: relative;
}
.nav-link:hover{
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-offset));
  transform: translateX(2px);
}
.nav-link.active{
  background: var(--grad-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
[data-theme="dark"] .nav-link.active{
  color: #0a1426;
}
.nav-link.active .num{ color: inherit; opacity:.75; }
.nav-group-head{
  border-radius: var(--radius-full);
  transition: background var(--trans-mid);
}
.nav-badge{
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .68rem;
  font-weight: 700;
  background: color-mix(in srgb, var(--color-gold) 18%, var(--color-surface-2));
  border: 1px solid color-mix(in srgb, var(--color-gold) 30%, var(--color-border));
  color: var(--color-gold);
}

/* ============================================================
   4. CARDS .box* — coins arrondis, glow au hover, border dégradé
   ============================================================ */
.box{
  border-radius: var(--radius-xl);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: var(--grad-surface);
  box-shadow: var(--glow-soft);
  transition: box-shadow var(--trans-mid), transform var(--trans-fast), border-color var(--trans-mid);
  overflow: hidden;
  position: relative;
}
.box:hover{
  box-shadow: 0 12px 40px -14px rgba(11,29,58,.25), 0 4px 12px -4px rgba(11,29,58,.1);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
}
[data-theme="dark"] .box:hover{
  box-shadow: 0 12px 40px -14px rgba(200,164,81,.3), 0 4px 12px -4px rgba(0,0,0,.45);
  border-color: color-mix(in srgb, var(--color-gold) 40%, var(--color-border));
}
/* Barre gauche des variantes -> plus épaisse, dégradé */
.box.def, .box.thm, .box.prop, .box.method, .box.example, .box.pitfall, .box.remark{
  border-left-width: 0;
}
.box.def::before, .box.thm::before, .box.prop::before, .box.method::before,
.box.example::before, .box.pitfall::before, .box.remark::before{
  content:"";
  position:absolute; top:0; bottom:0; left:0;
  width: 5px;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
}
.box.def::before{ background: linear-gradient(180deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, transparent)); }
.box.thm::before, .box.prop::before{ background: linear-gradient(180deg, var(--color-ink-blue), color-mix(in srgb, var(--color-ink-blue) 60%, transparent)); }
.box.method::before{ background: linear-gradient(180deg, var(--color-green), color-mix(in srgb, var(--color-green) 60%, transparent)); }
.box.example::before{ background: linear-gradient(180deg, var(--color-violet), color-mix(in srgb, var(--color-violet) 60%, transparent)); }
.box.pitfall::before{ background: linear-gradient(180deg, var(--color-amber), color-mix(in srgb, var(--color-amber) 60%, transparent)); }
.box.remark::before{ background: linear-gradient(180deg, var(--color-text-faint), color-mix(in srgb, var(--color-text-faint) 50%, transparent)); }
.box-head{
  padding: .8rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  background: color-mix(in srgb, var(--color-surface-2) 60%, transparent);
}

/* ============================================================
   5. BOUTONS / CHIPS / INPUTS — pilules glow
   ============================================================ */
.btn{
  border-radius: var(--radius-full);
  padding: .55rem 1.15rem;
  transition: transform var(--trans-fast), box-shadow var(--trans-mid), background var(--trans-mid), border-color var(--trans-mid);
  position: relative;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }

.btn-primary{
  background: var(--grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
[data-theme="dark"] .btn-primary{ color: #0a1426; }
.btn-primary:hover{
  background: var(--grad-primary);
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--color-primary) 55%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.btn-gold{
  background: var(--grad-gold);
  color: #0b1d3a;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-gold) 55%, transparent);
}
.btn-gold:hover{
  box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--color-gold) 65%, transparent), 0 0 0 3px color-mix(in srgb, var(--color-gold) 22%, transparent);
}

.btn-ghost{
  background: color-mix(in srgb, var(--color-surface-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow: var(--glow-soft);
}

.chip{
  transition: transform var(--trans-fast), box-shadow var(--trans-mid), border-color var(--trans-mid), background var(--trans-mid);
}
.chip:hover:not(.active){
  transform: translateY(-1px);
  box-shadow: var(--glow-soft);
}
.chip.active{
  background: var(--grad-primary);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary) 50%, transparent);
}
[data-theme="dark"] .chip.active{ color: #0a1426; }

/* Inputs — pilule avec focus glow */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea{
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  background: color-mix(in srgb, var(--color-surface-2) 95%, transparent);
  padding: .5rem .95rem;
  transition: border-color var(--trans-mid), box-shadow var(--trans-mid), background var(--trans-mid);
}
textarea{ border-radius: var(--radius-lg); }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}
/* Certains inputs internes doivent rester carrés (search modal en particulier) */
.search-panel input{
  border-radius: 0 !important;
  padding: 1rem 1.25rem !important;
  background: transparent !important;
}
.search-panel input:focus{ box-shadow: none !important; border-color: var(--color-divider) !important; }

/* ============================================================
   6. CALENDRIER — glows sur pastilles, pilule event premium
   ============================================================ */
.cal-cell{
  border-radius: var(--radius-lg) !important;
  transition: box-shadow var(--trans-mid), border-color var(--trans-mid), transform var(--trans-fast);
}
.cal-cell:hover{
  transform: translateY(-1px);
  box-shadow: var(--glow-soft);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  z-index: 2;
}
.cal-cell-today{
  background: color-mix(in srgb, var(--color-gold) 12%, var(--color-surface-2)) !important;
  border-color: color-mix(in srgb, var(--color-gold) 55%, var(--color-border)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-gold) 25%, transparent), var(--glow-soft);
}
.cal-cell-ev, .cal-cell-ev-cat{
  border-radius: 999px !important;
  padding: 2px 8px !important;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,.15);
}
.cal-cell-dot, .cal-dot{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-surface-2) 60%, transparent), 0 0 8px currentColor;
}
.cal-pop{
  border-radius: var(--radius-xl) !important;
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent) !important;
  background: var(--grad-surface) !important;
  box-shadow: 0 20px 60px -20px rgba(11,29,58,.35), 0 8px 24px -8px rgba(0,0,0,.1) !important;
  backdrop-filter: blur(10px);
}

/* ============================================================
   7. FOCUS-BUBBLE (bulle draggable) — style pilule glow
   ============================================================ */
.focus-bubble, [class*="focus-bubble"]{
  border-radius: var(--radius-full);
  box-shadow: var(--glow-soft);
  backdrop-filter: blur(8px);
  transition: box-shadow var(--trans-mid), transform var(--trans-fast);
}
.focus-bubble:hover, [class*="focus-bubble"]:hover{
  box-shadow: var(--glow-primary);
  transform: scale(1.03);
}

/* ============================================================
   8. GLOBAL POLISH — sélection, scrollbar, transitions
   ============================================================ */
::selection{
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-text);
}
/* Scrollbar plus fine et pilule */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: transparent; }
*::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--color-border) 60%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  background-clip: padding-box;
}

/* Transitions globales sur les surfaces pour un feel premium au switch de thème */
body, .app-header, .sidebar, .box, .btn, .chip, .nav-link, .cal-cell, .search-trigger{
  transition-property: background, background-color, border-color, color, box-shadow, transform;
  transition-duration: 260ms;
  transition-timing-function: var(--ease-smooth);
}

/* ============================================================
   [FIX P0-4] Réduction marges verticales entre blocs math consécutifs
   Screenshot d'Alembert (17:18) marqué « bof » : trop de blanc entre
   les dérivées partielles. Resserre les espaces.
   ============================================================ */
/* Blocs display MathJax consécutifs : moins de blanc */
mjx-container[display="true"] + mjx-container[display="true"] {
  margin-top: .3rem !important;
}
/* Blocs math-block-extracted consécutifs (formules extraites du flux) */
.math-block-extracted + .math-block-extracted {
  margin-top: .2rem !important;
}
/* Dans les encadrés .box-body : formules plus serrées */
.box-body mjx-container[display="true"] {
  margin: .45rem 0 !important;
}
.box-body .math-block-extracted {
  margin: .4rem 0 !important;
}
/* Formule display standard plus serrée globalement */
mjx-container[display="true"] {
  margin: .55em 0 !important;
}
/* Promoted inline : légèrement réduit */
mjx-container.mjx-promoted {
  margin: .35rem 0 !important;
}

/* ============================================================
   [Refonte matin] Landing page "Entrez" — premium
   Full 100dvh (pas 100vh, bug iOS), gradient animé bleu nuit -> or,
   ~45 étoiles scintillantes + étoiles filantes, logo étoile polaire
   SVG avec glow, carte tagline centrale, gros bouton pilule doré.
   Affichée une seule fois (persistance localStorage, voir app.js).
   ============================================================ */
@keyframes landing-gradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes landing-star-twinkle {
  0%,100% { opacity:.85; transform:scale(1); }
  50%      { opacity:.15; transform:scale(.5); }
}
@keyframes landing-fadein {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes landing-logo-in {
  from { opacity:0; transform:scale(.7); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes landing-fade-up {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse-gold {
  0%,100% { box-shadow: 0 0 20px rgba(200,164,81,.5), 0 4px 24px rgba(200,164,81,.25); }
  50%     { box-shadow: 0 0 42px rgba(200,164,81,.85), 0 4px 32px rgba(200,164,81,.45); }
}
@keyframes landing-shooting-star {
  0%   { transform: translate(0,0) rotate(-35deg); opacity:0; }
  4%   { opacity:1; }
  18%  { transform: translate(280px,180px) rotate(-35deg); opacity:0; }
  100% { opacity:0; }
}

.polaris-landing {
  position: fixed;
  inset: 0;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bleu nuit -> or subtil à 20% -> bleu nuit plus clair : lecture de gauche à droite */
  background: linear-gradient(120deg, #0b1d3a 0%, #0f2650 18%, #c8a451 20%, #1a2340 32%, #1a3a6e 55%, #0b1d3a 80%, #16213f 100%);
  background-size: 320% 320%;
  opacity: 0;
  transition: opacity .45s ease;
}
.polaris-landing.landing-visible {
  opacity: 1;
  animation: landing-gradient 10s ease-in-out infinite;
}
.polaris-landing.landing-fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.landing-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.landing-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation-name: landing-star-twinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
/* Étoiles filantes : streak diagonal avec traînée dégradée */
.landing-shooting-star {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.25) 60%, transparent 100%);
  border-radius: 999px;
  animation-name: landing-shooting-star;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

.landing-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: landing-logo-in .8s cubic-bezier(.16,1,.3,1) .1s both;
}
.landing-logo-svg {
  width: 88px;
  height: 88px;
  filter: drop-shadow(0 0 16px rgba(200,164,81,.65));
}
.landing-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 800;
  color: #f7f6f2;
  letter-spacing: -.02em;
  line-height: 1;
  margin: .35rem 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}

/* Carte tagline centrale — fond translucide crème, bordure gradient gold */
.landing-tagline-card {
  position: relative;
  max-width: 560px;
  margin: 0 0 2.25rem;
  padding: 1.6rem 2.2rem;
  border-radius: 20px;
  background: rgba(247,244,233,.08);
  backdrop-filter: blur(10px);
  border: 1px solid transparent;
  background-image: linear-gradient(rgba(247,244,233,.08), rgba(247,244,233,.08)), linear-gradient(120deg, #dcbb6b, #c8a451 40%, #f5deb0 70%, #c8a451);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  opacity: 0;
  animation: landing-fade-up .7s cubic-bezier(.16,1,.3,1) .2s both;
}
.landing-tagline {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic;
  font-size: 2rem;
  line-height: 1.25;
  color: #f7f4e9;
  margin: 0;
  letter-spacing: .01em;
}

.landing-enter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 80px;
  padding: 0 2rem;
  background: linear-gradient(135deg, #dcbb6b 0%, #c8a451 100%);
  background-size: 200% 200%;
  color: #1a1204;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: .05em;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  animation: pulse-gold 2s ease-in-out infinite;
  transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s;
  opacity: 0;
  animation: landing-fade-up .7s cubic-bezier(.16,1,.3,1) .4s both, pulse-gold 2s ease-in-out 1.1s infinite;
}
.landing-enter-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 0 48px rgba(200,164,81,.95), 0 6px 34px rgba(200,164,81,.5);
}
.landing-enter-btn:active {
  transform: scale(.98);
}

.landing-sub {
  margin-top: 2.25rem;
  font-size: .8rem;
  color: rgba(247,244,233,.55);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  animation: landing-fade-up .7s cubic-bezier(.16,1,.3,1) .55s both;
}

@media (max-width: 600px) {
  .landing-tagline-card { padding: 1.2rem 1.4rem; margin-bottom: 1.75rem; }
  .landing-tagline { font-size: 1.35rem; }
  .landing-enter-btn { width: 200px; height: 68px; font-size: 1.2rem; }
  .landing-logo-svg { width: 72px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .polaris-landing.landing-visible { animation: none; }
  .landing-star, .landing-shooting-star, .landing-enter-btn { animation: none !important; }
  .landing-logo-wrap, .landing-tagline-card, .landing-enter-btn, .landing-sub { animation: landing-fadein .3s ease both !important; opacity: 1; }
}

/* ============================================================
   [P2-9] Barre de recherche plus sexy
   search-trigger : gradient bleu nuit → transparent, glow au focus
   search-panel : bordure gradient, résultats cards pilule hover slide-in
   ============================================================ */
@keyframes search-icon-pulse {
  0%,100% { transform:scale(1); opacity:.7; }
  50%      { transform:scale(1.18); opacity:1; }
}

/* Search trigger amélioré */
.search-trigger {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-bg) 60%, transparent) 0%,
    var(--color-surface-offset) 100%
  ) !important;
  border-color: color-mix(in srgb, var(--color-primary) 25%, var(--color-border)) !important;
}
.search-trigger:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)) 0%,
    var(--color-surface) 100%
  ) !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 12%, transparent),
              0 2px 8px rgba(0,0,0,.1) !important;
}
.search-trigger .search-trigger__icon > svg {
  animation: search-icon-pulse 3.2s ease-in-out infinite;
}
.search-trigger:focus .search-trigger__icon > svg,
.search-trigger:hover .search-trigger__icon > svg {
  animation: none;
}

/* Search panel : bordure gradient */
.search-panel {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--color-surface-2), var(--color-surface-2)) padding-box,
    linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 40%, var(--color-border))) border-box !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12) !important;
}

/* Input panel */
.search-panel input {
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-divider)) !important;
  color: var(--color-text) !important;
  caret-color: var(--color-primary);
}
.search-panel input:focus {
  outline: none !important;
}

/* Résultats : cards pilule avec hover slide-in */
.search-result {
  border-radius: 10px !important;
  margin: .2rem 0 !important;
  border: 1px solid transparent;
  transition: background .14s ease, transform .14s cubic-bezier(.16,1,.3,1), border-color .14s, box-shadow .14s !important;
}
.search-result:hover,
.search-result.sel {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-offset)) !important;
  border-color: color-mix(in srgb, var(--color-primary) 20%, transparent) !important;
  transform: translateX(5px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}

/* ============================================================
   [P2-10] Alléger nav sidebar chapitres maths
   Compacter les liens nav dans les groupes accordion,
   fermer par défaut les groupes non actifs.
   ============================================================ */
/* Liens nav plus compacts dans les groupes chapitres */
.nav-group .nav-link {
  padding-top: .22rem !important;
  padding-bottom: .22rem !important;
  font-size: .78rem !important;
  line-height: 1.3 !important;
}
.nav-group .nav-link .num {
  font-size: .72rem !important;
  min-width: 1.4em !important;
}
/* Tête de groupe plus compacte */
.nav-group-head {
  padding: .35rem var(--space-3) !important;
  font-size: .78rem !important;
}
/* Inner body plus serré */
.nav-group-inner {
  padding: .15rem 0 !important;
}
/* Gap plus petit entre les items */
.nav-group-body {
  /* Réduit le padding vertical quand ouvert */
}
/* Groupes non actifs fermés visuellement plus discrets */
.nav-group:not([open]) .nav-group-head {
  opacity: .8;
}

/* ============================================================
   [P3-11] Schema placeholder — visuel "Schéma à insérer"
   Utilisé pour les cases où un schéma manuel doit être ajouté.
   ============================================================ */
.schema-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .6rem;
  min-height: 120px;
  border: 2px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  border-radius: var(--radius-lg, 12px);
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    color-mix(in srgb, var(--color-primary) 4%, transparent) 8px,
    color-mix(in srgb, var(--color-primary) 4%, transparent) 16px
  );
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: .85rem;
  font-style: italic;
  padding: 1.5rem;
  margin: .75rem 0;
  text-align: center;
}
.schema-placeholder::before {
  content: "📐";
  font-size: 1.8rem;
  font-style: normal;
  filter: grayscale(.4);
}

/* ==========================================================================
   FORÊT IMMERSIVE — paysage SVG plein format (focusForestSceneHtml)
   Étend les classes .focus-scene / .focus-scene-svg / .focus-scene-tree*
   déjà définies plus haut (scène "arbre central" historique) sans les
   casser : ici la scène affiche TOUTE la forêt (plusieurs arbres, ciel,
   sol, nuages, étoiles). Les classes .focus-forest-* (grille list historique,
   toujours utilisée comme wrapper de section) restent inchangées.
   ========================================================================== */
#focus-forest-grid .focus-scene{max-width:none;margin:0 0 .9rem;position:relative;background:#0b1d3a}
.focus-scene-sky{transition:fill 1.2s ease}
.focus-scene-ground{transition:fill 1.2s ease}
.focus-scene-star{fill:#fff;animation-name:focusSceneTwinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
@keyframes focusSceneTwinkle{0%,100%{opacity:.3}50%{opacity:1}}
.focus-scene-cloud{animation-name:focusSceneDrift;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes focusSceneDrift{from{transform:translateX(0)}to{transform:translateX(920px)}}
.focus-scene-trees .focus-scene-tree{transition:opacity .5s ease}
.focus-scene-trees .focus-scene-tree.is-withered{filter:saturate(.55) brightness(.85)}
.focus-scene-trees .focus-scene-tree.just-planted{animation:focusScenePlant .5s cubic-bezier(.2,.8,.3,1.2)}
@keyframes focusScenePlant{from{opacity:0;transform:translate(var(--fx,0),calc(var(--fy,0) + 8px)) scale(.2)}to{opacity:1}}
.focus-scene-tree-svg{overflow:visible}
.focus-scene-empty-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem 1.4rem;color:#f7f6f2;font-size:.9rem;font-style:italic;line-height:1.5;text-shadow:0 1px 3px rgba(0,0,0,.45);background:linear-gradient(180deg,rgba(11,29,58,0) 0%,rgba(11,29,58,.28) 100%)}
.focus-scene-zoom-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;min-height:38px;padding:.35rem .8rem;border-radius:var(--radius-full);border:1px solid var(--color-border);background:var(--color-surface-offset);color:var(--color-text-soft);transition:color .18s,background .18s,border-color .18s}
.focus-scene-zoom-btn:hover{color:var(--color-text);border-color:var(--color-primary)}
/* Modale plein écran de la forêt */
.focus-scene-modal{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:2rem;background:rgba(6,14,28,.82);backdrop-filter:blur(3px);animation:focusSceneModalIn .18s ease}
@keyframes focusSceneModalIn{from{opacity:0}to{opacity:1}}
.focus-scene-modal-inner{position:relative;width:100%;max-width:960px;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.focus-scene-modal-inner .focus-scene{max-width:none;margin:0;border-radius:20px}
.focus-scene-modal-inner .focus-scene-zoom-btn{display:none}
.focus-scene-modal-close{position:absolute;top:.7rem;right:.7rem;z-index:2;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(11,29,58,.55);color:#f7f6f2;font-size:1.1rem;line-height:1;cursor:pointer;transition:background .18s}
.focus-scene-modal-close:hover{background:rgba(11,29,58,.85)}
@media (max-width:560px){#focus-forest-grid .focus-scene{border-radius:14px}.focus-scene-modal{padding:.8rem}}
@media (prefers-reduced-motion:reduce){.focus-scene-star,.focus-scene-cloud,.focus-scene-trees .focus-scene-tree.just-planted{animation:none!important}}

/* ================================================================
   [FEAT 2026-07-03] Aperçu de la base de données (Atelier SQL)
   Panneau qui liste les tables du schéma, dépliables au clic, avec
   colonnes + extrait des lignes. Rendu inline, tolère le thème sombre.
   ================================================================ */
.itc-schema-preview{margin:1.1rem 0 1.2rem;border:1px solid var(--color-line,#e5e7eb);border-radius:14px;background:var(--color-surface,#fff);padding:.9rem 1rem 1rem;box-shadow:0 1px 3px rgba(15,23,42,.04)}
.itc-schema-label{display:flex;align-items:center;gap:.55rem;font-family:var(--font-ui);font-size:.78rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.15rem}
.itc-schema-label svg{width:16px;height:16px;flex:0 0 auto}
.itc-schema-hint{font-size:.83rem;color:var(--color-text-muted);margin:.1rem 0 .75rem;font-style:italic}
.itc-schema-empty{padding:.6rem .8rem;border:1px dashed var(--color-line,#e5e7eb);border-radius:10px;color:var(--color-text-muted);font-size:.85rem}
.itc-schema-grid{display:flex;flex-direction:column;gap:.55rem}
.itc-schema-table{border:1px solid var(--color-line,#e5e7eb);border-radius:10px;background:var(--color-surface-offset,#fafbfc);overflow:hidden;transition:border-color .2s}
.itc-schema-table[open]{border-color:var(--color-primary,#7a1622)}
.itc-schema-summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.55rem .85rem;font-family:var(--font-ui);user-select:none}
.itc-schema-summary::-webkit-details-marker{display:none}
.itc-schema-summary::before{content:"▸";display:inline-block;margin-right:.4rem;transition:transform .18s;color:var(--color-text-muted);flex:0 0 auto;font-size:.85em}
.itc-schema-table[open] .itc-schema-summary::before{transform:rotate(90deg)}
.itc-schema-tname{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--color-text,#111)}
.itc-schema-tname svg{width:14px;height:14px;color:var(--color-primary,#7a1622);flex:0 0 auto}
.itc-schema-tname code{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.88rem;background:var(--color-primary-soft,rgba(122,22,34,.08));color:var(--color-primary,#7a1622);padding:.08rem .4rem;border-radius:6px}
.itc-schema-tmeta{font-size:.78rem;color:var(--color-text-muted);font-family:var(--font-ui);flex:1 1 auto;text-align:right;font-weight:500}
.itc-schema-tbody{padding:.35rem .85rem .85rem;border-top:1px solid var(--color-line,#e5e7eb);background:var(--color-surface,#fff)}
.itc-schema-cols{font-size:.83rem;color:var(--color-text,#111);margin:.5rem 0 .6rem;font-family:var(--font-ui)}
.itc-schema-cols strong{color:var(--color-text-muted);font-weight:600;letter-spacing:.02em;font-size:.72rem;text-transform:uppercase;margin-right:.2rem}
.itc-schema-cols span{font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.85rem;color:var(--color-text,#111)}
.itc-schema-loading{padding:.5rem .1rem;color:var(--color-text-muted);font-size:.83rem;font-style:italic}
.itc-schema-err{padding:.55rem .75rem;border-left:3px solid #c0392b;background:rgba(192,57,43,.06);color:#8b1f13;font-size:.85rem;border-radius:6px;font-family:var(--font-ui)}
/* La table de résultats existante (.itc-result-table) est réutilisée : pas de doublon nécessaire. */
.itc-schema-tbody .itc-result-table{margin-top:.15rem;font-size:.85rem}
.itc-schema-tbody .itc-result-table th{background:var(--color-primary-soft,rgba(122,22,34,.06));font-size:.72rem}

/* ================================================================
   [FEAT 2026-07-03] Polaris Run — palette de personnages + écran
   de sélection (10 personnages, grille responsive).
   ================================================================ */
.pl-char-palette{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;max-width:280px;justify-content:flex-end}
.pl-char-btn{width:32px;height:32px;padding:0;border-radius:50%;border:2px solid transparent;background:rgba(255,255,255,.06);color:#e8ecf4;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,border-color .15s,background .15s}
.pl-char-btn:hover{transform:scale(1.08);background:rgba(227,199,102,.15)}
.pl-char-btn.active{border-color:#e3c766;background:rgba(227,199,102,.2);box-shadow:0 0 0 2px rgba(227,199,102,.25)}
.pl-char-btn svg,.pl-char-btn img{display:block;border-radius:50%}
.pl-char-btn img{object-fit:cover}

.pl-game-body{position:relative;display:flex;justify-content:center}
.pl-game-body canvas{display:block;border-radius:14px;background:linear-gradient(180deg,#060b16 0%,#0b1428 100%);box-shadow:inset 0 0 40px rgba(80,120,220,.15)}

.pl-charselect{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,11,22,.94) 0%,rgba(11,20,40,.98) 100%);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.1rem;gap:.9rem;z-index:5;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pl-charselect[hidden]{display:none}
.pl-charselect h4{margin:0;font-family:'Playfair Display',Georgia,serif;font-size:1.35rem;color:#e3c766;font-weight:800;letter-spacing:.01em}
.pl-charselect-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.55rem;max-width:640px;width:100%}
@media (max-width:700px){.pl-charselect-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:500px){.pl-charselect-grid{grid-template-columns:repeat(3,1fr)}}
.pl-charcard{background:rgba(255,255,255,.04);border:2px solid rgba(255,255,255,.08);border-radius:10px;padding:.5rem .35rem .45rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;transition:transform .15s,border-color .15s,background .15s;color:#e8ecf4;font-family:'Source Sans 3',system-ui,sans-serif}
.pl-charcard:hover{transform:translateY(-2px);background:rgba(227,199,102,.1);border-color:rgba(227,199,102,.4)}
.pl-charcard.active{border-color:#e3c766;background:rgba(227,199,102,.16);box-shadow:0 0 0 2px rgba(227,199,102,.3),0 4px 14px rgba(227,199,102,.15)}
.pl-charcard-thumb{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.25)}
.pl-charcard-thumb svg,.pl-charcard-thumb img{display:block;border-radius:50%}
.pl-charcard-name{font-size:.78rem;font-weight:600;color:#e8ecf4;text-align:center;line-height:1.15;letter-spacing:.01em}
.pl-charselect-go{margin-top:.4rem;padding:.6rem 1.5rem;font-family:'Source Sans 3',system-ui,sans-serif;font-size:.95rem;font-weight:700;background:linear-gradient(180deg,#e3c766 0%,#c8a451 100%);color:#1a1204;border:none;border-radius:8px;cursor:pointer;box-shadow:0 3px 12px rgba(227,199,102,.35);transition:transform .12s,box-shadow .15s}
.pl-charselect-go:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(227,199,102,.5)}
.pl-charselect-go:active{transform:translateY(0)}

/* ============================================================
   Modal « êtes-vous toujours là ? » (mode vigilance de session)
   ============================================================ */
.polaris-inactivity-modal{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:1rem;animation:pim-fade .2s ease-out}
.polaris-inactivity-modal .pim-backdrop{position:absolute;inset:0;background:rgba(6,10,20,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.polaris-inactivity-modal .pim-dialog{position:relative;max-width:440px;width:100%;background:var(--color-bg-elev,#161b26);color:var(--color-text,#e8ecf4);border:1px solid var(--color-border,rgba(255,255,255,.08));border-radius:14px;padding:1.5rem 1.4rem 1.25rem;box-shadow:0 20px 60px rgba(0,0,0,.55),0 4px 20px rgba(0,0,0,.3);animation:pim-pop .22s cubic-bezier(.2,.7,.3,1.2)}
.polaris-inactivity-modal .pim-title{margin:0 0 .5rem;font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
.polaris-inactivity-modal .pim-body{margin:0 0 1.1rem;font-size:.98rem;line-height:1.45;color:var(--color-text-muted,#b6bccb)}
.polaris-inactivity-modal .pim-count{display:inline-block;min-width:2ch;font-weight:700;color:var(--color-accent,#e3c766);font-variant-numeric:tabular-nums}
.polaris-inactivity-modal .pim-actions{display:flex;gap:.6rem;justify-content:flex-end;flex-wrap:wrap}
.polaris-inactivity-modal .pim-actions .btn{padding:.55rem 1.05rem;font-size:.95rem;font-weight:600;border-radius:8px;cursor:pointer;border:1px solid var(--color-border,rgba(255,255,255,.14));background:transparent;color:inherit;transition:transform .1s,background .15s,border-color .15s}
.polaris-inactivity-modal .pim-actions .btn:hover{background:rgba(255,255,255,.06)}
.polaris-inactivity-modal .pim-actions .btn-primary{background:linear-gradient(180deg,#e3c766 0%,#c8a451 100%);color:#1a1204;border-color:transparent;box-shadow:0 3px 12px rgba(227,199,102,.32)}
.polaris-inactivity-modal .pim-actions .btn-primary:hover{transform:translateY(-1px);box-shadow:0 5px 18px rgba(227,199,102,.45);background:linear-gradient(180deg,#ecd274 0%,#d1ad55 100%)}

/* Light mode */
html[data-theme="light"] .polaris-inactivity-modal .pim-backdrop{background:rgba(30,40,58,.55)}
html[data-theme="light"] .polaris-inactivity-modal .pim-dialog{background:#fff;color:#1a2130;border-color:rgba(20,30,50,.1)}
html[data-theme="light"] .polaris-inactivity-modal .pim-body{color:#4a5468}
html[data-theme="light"] .polaris-inactivity-modal .pim-actions .btn{border-color:rgba(20,30,50,.14);color:#1a2130}
html[data-theme="light"] .polaris-inactivity-modal .pim-actions .btn:hover{background:rgba(20,30,50,.05)}

@keyframes pim-fade{from{opacity:0}to{opacity:1}}
@keyframes pim-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

@media (prefers-reduced-motion:reduce){
  .polaris-inactivity-modal,.polaris-inactivity-modal .pim-dialog{animation:none}
}

/* ============================================================
   [FIX latex-display-rhythm v6.22 2026-07-05] Deuxieme passe de
   lisibilite LaTeX — rythme vertical autour des formules DISPLAY
   dans le contenu de cours. Retour utilisateur (capture Dunford) :
   apres la passe v35 (interligne inline), le rendu est meilleur mais
   les blocs DISPLAY restaient trop COLLES a la prose (marges ramenees
   a .45rem par le fix P0-4 « d'Alembert trop de blanc »), donnant un
   gris typographique irregulier et des equations courtes « ecrasees »
   apres un deux-points. On redonne ici une respiration INTENTIONNELLE
   aux blocs display, SANS revenir aux grands vides : marges verticales
   equilibrees, centrage conserve, transitions prose<->display aerees.
   Scope aux conteneurs de cours (#chapBody, .box-body, .result) :
   aucun effet global (flashcards, formules-eq, etc. inchangees).
   Ces regles viennent APRES le fix P0-4 et utilisent !important pour
   gagner la cascade sans supprimer l'historique. Aucune promotion
   inline->display n'est ajoutee ; l'interligne inline v35 (1.9) reste.
   ============================================================ */
/* Respiration verticale des blocs display dans le contenu de cours :
   ni ecrase (.45rem, trop serre) ni beant. ~1.05rem = equation posee. */
#chapBody mjx-container[display="true"],
.box-body mjx-container[display="true"],
.result mjx-container[display="true"]{
  margin-top:1.05rem !important;
  margin-bottom:1.05rem !important;
  padding:.15rem 0 !important;
  text-align:center !important;
}
/* Transition prose -> equation : la formule (souvent introduite par un
   « : ») doit se detacher du paragraphe pour lire comme une equation
   affichee, pas comme du bruit de ligne. Et equation -> prose derriere. */
#chapBody p + mjx-container[display="true"],
.box-body p + mjx-container[display="true"],
.result p + mjx-container[display="true"]{
  margin-top:1.15rem !important;
}
#chapBody mjx-container[display="true"] + p,
.box-body mjx-container[display="true"] + p,
.result mjx-container[display="true"] + p{
  margin-top:1.05rem !important;
}
/* Blocs extraits (formule isolee promue) : meme respiration equilibree. */
#chapBody .math-block-extracted,
.box-body .math-block-extracted,
.result .math-block-extracted{
  margin-top:1rem !important;
  margin-bottom:1rem !important;
}
/* Premiere / derniere formule d'une carte : pas de marge qui deborde du cadre. */
.box-body mjx-container[display="true"]:first-child,
.result mjx-container[display="true"]:first-child,
.box-body .math-block-extracted:first-child,
.result .math-block-extracted:first-child{margin-top:0 !important}
.box-body mjx-container[display="true"]:last-child,
.result mjx-container[display="true"]:last-child,
.box-body .math-block-extracted:last-child,
.result .math-block-extracted:last-child{margin-bottom:0 !important}
/* Systeme d'equations rendu en blocs display CONSECUTIFS : ils forment un
   GROUPE — on les resserre pour eviter un gros vide entre eux, tout en
   gardant une petite separation lisible (l'emporte sur le .3rem P0-4). */
#chapBody mjx-container[display="true"] + mjx-container[display="true"],
.box-body mjx-container[display="true"] + mjx-container[display="true"],
.result mjx-container[display="true"] + mjx-container[display="true"]{
  margin-top:.4rem !important;
}

/* ============================================================
   [FIX latex-display-centering v6.23 2026-07-05] Centrage effectif
   des formules DISPLAY dans le contenu de cours. Suite de v37 : la
   respiration verticale est bonne, mais dans la repro (capture Dunford
   rendue en CSS v37) les equations affichees restaient COLLEES A GAUCHE
   alors que l'utilisateur demande un LaTeX bien centre.
   Cause : le conteneur a bien text-align:center, mais MathJax rend le
   <svg> comme un enfant de type bloc — text-align ne centre que les
   enfants EN LIGNE, donc le svg tombe a gauche. Correctif robuste :
   on centre le <svg> enfant direct par marges auto (se centre quand il
   tient dans la carte ; les marges auto retombent a 0 quand l'equation
   deborde, ce qui PRESERVE le scroll horizontal du conteneur).
   Scope STRICT au contenu de cours (#chapBody/.box-body/.result) et aux
   vrais blocs display : ni inline, ni promus (.mjx-promoted, alignes a
   gauche a dessein), ni blocs extraits — inchanges. On ne touche NI aux
   marges v37, NI a l'interligne inline v35, NI a l'overflow. ============ */
#chapBody mjx-container[display="true"],
.box-body mjx-container[display="true"],
.result mjx-container[display="true"]{
  display:block !important;      /* pleine largeur : le centrage a une reference */
  text-align:center !important;  /* centre aussi le svg s'il reste en ligne */
}
/* Le <svg> MathJax (enfant direct) : bloc centre par marges auto. Quand
   l'equation est plus large que la carte, margin auto = 0 -> alignee a
   gauche et scrollable (overflow-x:auto du conteneur intact). */
#chapBody mjx-container[display="true"] > svg,
.box-body mjx-container[display="true"] > svg,
.result mjx-container[display="true"] > svg{
  display:block !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* ============================================================================
   Ressources (Bourrigan HX3) + visionneuse PDF intégrée — bloc additif.
   Classes nouvelles (page Ressources restaurée : route #/ressources).
   ============================================================================ */
.res-filter .chip{display:inline-flex;align-items:center;gap:.4rem}
.res-filter .chip-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.2rem;padding:0 .4rem;font-size:var(--text-xs);font-weight:700;border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}
.res-filter .chip.active .chip-count{background:rgba(255,255,255,.22);color:#fff;border-color:transparent}
[data-theme=dark] .res-filter .chip.active .chip-count{background:rgba(0,0,0,.22);color:var(--color-bg)}
.res-section{margin-bottom:var(--space-8)}
.res-section-head{font-family:var(--font-ui);font-size:var(--text-lg);font-weight:700;color:var(--color-text);margin:0 0 var(--space-4)}
.res-list{display:flex;flex-direction:column;gap:var(--space-2)}
.res-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);transition:border-color var(--transition),background var(--transition)}
.res-row:hover{border-color:var(--color-primary-line);background:var(--color-surface-2)}
.res-row-main{display:flex;align-items:center;gap:var(--space-3);min-width:0;flex:1 1 16rem}
.res-kind{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:2.4rem;padding:.2rem .5rem;font-family:var(--font-ui);font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;border-radius:var(--radius-full);background:var(--color-bg);color:var(--color-text-muted);border:1px solid var(--color-border)}
.res-kind-ds{color:var(--color-primary);border-color:var(--color-primary-line);background:var(--color-primary-soft,var(--color-surface-2))}
.res-kind-dm{color:var(--color-gold-hover,var(--color-text));border-color:var(--color-gold-line,var(--color-border));background:var(--color-gold-soft,var(--color-surface-2))}
.res-kind-td{color:var(--color-text-muted);border-color:var(--color-border);background:var(--color-surface-2)}
.res-title{font-family:var(--font-ui);font-weight:600;color:var(--color-text);line-height:1.3}
.res-actions{display:flex;gap:var(--space-2);flex:0 0 auto;flex-wrap:wrap}
.res-btn-absent{color:var(--color-text-faint,var(--color-text-muted));border:1px dashed var(--color-border);background:transparent;cursor:not-allowed;opacity:.7}
.res-btn-absent:hover{transform:none;background:transparent}
.res-note{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5);line-height:1.45}
.res-note em{font-style:normal;font-weight:700;color:var(--color-primary)}
.td-doc-list{margin-top:var(--space-4)}

/* --- Visionneuse PDF intégrée (modale plein cadre) --- */
.rituel-modal-ov.pdf-modal .rituel-modal{max-width:min(1100px,96vw);width:96vw}
.pdf-frame-wrap{display:flex;flex-direction:column;gap:var(--space-2)}
.pdf-frame{width:100%;height:min(78vh,900px);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg)}
.pdf-fallback{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--color-text-muted);margin:0;text-align:center}
.pdf-modal-foot{display:flex;gap:var(--space-2);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--space-3)}
/* ============================================================
   SÉCURITÉ DU COMPTE — 2FA (TOTP) + clés d'accès (passkeys)
   ============================================================ */
.sec-card .set-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.sec-card .sec-actions { display:flex; gap:8px; flex-wrap:wrap; }
.sec-card .sec-muted, .sec-muted { color:var(--color-text-muted); font-size:.92rem; line-height:1.5; margin:.35rem 0 0; }
.sec-err-txt { color:var(--color-danger,#c0392b); }
.sec-badge { display:inline-flex; align-items:center; gap:4px; font-size:.78rem; padding:2px 8px; border-radius:999px; vertical-align:middle; }
.sec-badge-on { background:rgba(46,160,67,.16); color:#2ea043; }
.sec-badge svg { width:14px; height:14px; }
.rituel-modal-ov.sec-modal .rituel-modal { max-width:420px; }
.sec-step { margin:.6rem 0 .3rem; line-height:1.5; }
.sec-step:first-child { margin-top:0; }
.sec-qr { display:flex; justify-content:center; margin:.6rem 0; }
.sec-qr img { width:180px; height:180px; background:#fff; border-radius:10px; padding:8px; }
.sec-secret { display:block; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.95rem; letter-spacing:2px; background:var(--color-surface-2,#f2f2f5); padding:8px 10px; border-radius:8px; word-break:break-all; }
.sec-code-input { width:100%; box-sizing:border-box; font-size:1.4rem; letter-spacing:8px; text-align:center; padding:10px; margin-top:.4rem; border:1px solid var(--color-border,#d0d0d8); border-radius:10px; background:var(--color-surface,#fff); color:var(--color-text); }
.sec-code-input:focus { outline:2px solid var(--color-accent,#4b7bec); outline-offset:1px; }
.sec-err { color:var(--color-danger,#c0392b); font-size:.9rem; margin:.4rem 0 0; }
.sec-modal-foot { display:flex; justify-content:flex-end; gap:8px; }
/* Clés d'accès (passkeys) */
.sec-passkey-wrap { margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--color-border,#e2e2e8); }
.sec-passkey-wrap .set-toggle-name { display:inline-flex; align-items:center; gap:6px; }
.sec-pk-list { margin-top:.6rem; display:flex; flex-direction:column; }
.sec-pk-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--color-border,#ececf1); }
.sec-pk-row:first-child { border-top:none; }
.sec-pk-name { display:inline-flex; align-items:center; gap:6px; }
.sec-passkey-wrap .btn svg, .sec-pk-name svg { width:15px; height:15px; }

/* ============================================================
   V35 — Bulle "Outils" universelle (menu radial)
   Une seule bulle mère → 3 pétales (Tuteur / Calc / Périodique).
   Fenêtres cumulables. Draggable, snap aux 4 coins.
   ============================================================ */
.polaris-tools-launcher{
  position:fixed;
  z-index:75; /* juste au-dessus du tuteur (70) pour rester accessible */
  --plt-size:56px;
  --plt-inset:clamp(.9rem,2.6vw,1.5rem);
  font-family:var(--font-ui);
  pointer-events:none; /* les enfants réactivent */
  transition:right .28s cubic-bezier(.22,1.2,.36,1),
             left .28s cubic-bezier(.22,1.2,.36,1),
             top .28s cubic-bezier(.22,1.2,.36,1),
             bottom .28s cubic-bezier(.22,1.2,.36,1);
}
.polaris-tools-launcher[data-corner="br"]{ right:var(--plt-inset); bottom:var(--plt-inset); }
.polaris-tools-launcher[data-corner="bl"]{ left:var(--plt-inset);  bottom:var(--plt-inset); }
.polaris-tools-launcher[data-corner="tr"]{ right:var(--plt-inset); top:calc(var(--plt-inset) + 60px); }
.polaris-tools-launcher[data-corner="tl"]{ left:var(--plt-inset);  top:calc(var(--plt-inset) + 60px); }

/* Pendant le drag : position live suivant le curseur, aucune transition */
.polaris-tools-launcher[data-dragging="true"]{
  transition:none;
  right:auto !important; bottom:auto !important;
  left:calc(var(--plt-drag-x) - var(--plt-size) / 2) !important;
  top:calc(var(--plt-drag-y) - var(--plt-size) / 2) !important;
}

/* Bouton principal */
.plt-main{
  pointer-events:auto;
  position:relative;
  width:var(--plt-size); height:var(--plt-size);
  border-radius:50%;
  border:none;
  cursor:grab;
  background:linear-gradient(135deg,
    var(--color-primary,#3a4a7a) 0%,
    color-mix(in srgb, var(--color-primary,#3a4a7a) 78%, #ffffff) 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 4px 14px rgba(20,20,40,.25),
    0 1px 3px rgba(20,20,40,.15),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .18s cubic-bezier(.22,1.2,.36,1),
             box-shadow .18s ease, background .2s ease;
  touch-action:none;
}
.plt-main:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    0 8px 22px rgba(20,20,40,.32),
    0 2px 5px rgba(20,20,40,.18),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.plt-main:active{ cursor:grabbing; transform:scale(.96); }
.polaris-tools-launcher[data-menu="open"] .plt-main{
  transform:rotate(45deg);
  background:linear-gradient(135deg,
    var(--color-gold,#c8a24b) 0%,
    color-mix(in srgb, var(--color-gold,#c8a24b) 78%, #ffffff) 100%);
  color:#1a1304;
}
.polaris-tools-launcher.plt-dragging .plt-main{
  cursor:grabbing;
  transform:scale(1.08);
  box-shadow:0 14px 34px rgba(20,20,40,.42), 0 3px 8px rgba(20,20,40,.24);
}

/* Anneau lumineux quand au moins un outil est ouvert */
.plt-main.plt-any-active::before{
  content:"";
  position:absolute; inset:-4px;
  border-radius:50%;
  border:2px solid var(--color-gold,#c8a24b);
  opacity:.7;
  animation:plt-pulse 2.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes plt-pulse{
  0%,100%{ opacity:.35; transform:scale(1); }
  50%    { opacity:.75; transform:scale(1.08); }
}

/* Conteneur des pétales — même origine que le bouton mère */
.plt-petals{
  position:absolute;
  right:0; bottom:0;
  width:var(--plt-size); height:var(--plt-size);
  pointer-events:none;
}
.polaris-tools-launcher[data-corner="bl"] .plt-petals{ right:auto; left:0; }
.polaris-tools-launcher[data-corner="tr"] .plt-petals{ right:0;    bottom:auto; top:0; }
.polaris-tools-launcher[data-corner="tl"] .plt-petals{ right:auto; left:0; bottom:auto; top:0; }

/* Pétale — état fermé (invisible, sous la bulle mère) */
.plt-petal{
  pointer-events:none;
  position:absolute;
  right:0; bottom:0;
  width:48px; height:48px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:var(--color-surface,#fff);
  color:var(--color-text,#1a1a1a);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 12px rgba(20,20,40,.22), inset 0 1px 0 rgba(255,255,255,.15);
  opacity:0;
  transform:translate(0,0) scale(.3);
  transition:transform .28s cubic-bezier(.22,1.2,.36,1),
             opacity .18s ease,
             background .15s ease,
             box-shadow .15s ease;
  transition-delay:0ms;
}
.polaris-tools-launcher[data-corner="bl"] .plt-petal{ right:auto; left:0; }
.polaris-tools-launcher[data-corner="tr"] .plt-petal{ right:0;    bottom:auto; top:0; }
.polaris-tools-launcher[data-corner="tl"] .plt-petal{ right:auto; left:0; bottom:auto; top:0; }

.plt-petal .plt-petal-icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  color:var(--color-primary,#3a4a7a);
}
.plt-petal .plt-petal-label{
  position:absolute;
  bottom:-26px;
  font-size:12.5px;
  font-weight:600;
  color:var(--color-text,#222);
  white-space:nowrap;
  opacity:0;
  transition:opacity .15s ease;
  pointer-events:none;
  background:var(--color-surface,#fff);
  padding:3px 9px;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,.22);
  z-index:20; /* [V41b] au-dessus des pétales voisins */
  letter-spacing:.01em;
}
/* Étiquette au-dessus quand ancré en haut (sinon elle sort de l'écran) */
.polaris-tools-launcher[data-corner="tr"] .plt-petal .plt-petal-label,
.polaris-tools-launcher[data-corner="tl"] .plt-petal .plt-petal-label{
  bottom:auto; top:-26px;
}

/* Menu ouvert → pétales déployés avec stagger */
.polaris-tools-launcher[data-menu="open"] .plt-petal{
  pointer-events:auto;
  opacity:1;
  transform:translate(var(--plt-x,0), var(--plt-y,0)) scale(1);
  transition-delay:var(--plt-delay,0ms);
}
.polaris-tools-launcher[data-menu="open"] .plt-petal:hover .plt-petal-label{ opacity:1; }
.plt-petal:hover{
  transform:translate(var(--plt-x,0), var(--plt-y,0)) scale(1.12);
  box-shadow:0 6px 18px rgba(20,20,40,.28);
  background:var(--color-gold-soft,#f7ecc8);
  z-index:15; /* [V41b] pétale survolé au-dessus pour que son label passe */
}
.plt-petal:hover .plt-petal-icon{ color:var(--color-gold-hover,#a67f24); }

/* Pétale actif (outil ouvert) : anneau doré */
.plt-petal.plt-active{
  background:color-mix(in srgb, var(--color-gold,#c8a24b) 14%, var(--color-surface,#fff));
  box-shadow:
    0 0 0 2px var(--color-gold,#c8a24b),
    0 3px 12px rgba(20,20,40,.22);
}
.plt-petal.plt-active .plt-petal-icon{ color:var(--color-gold-hover,#a67f24); }

/* Signal indisponibilité (shake) */
.plt-petal.plt-unavailable{
  animation:plt-shake .4s ease;
  background:color-mix(in srgb, #c0392b 12%, var(--color-surface,#fff));
}
@keyframes plt-shake{
  0%,100%{ transform:translate(var(--plt-x,0),var(--plt-y,0)) scale(1); }
  25%    { transform:translate(calc(var(--plt-x,0) - 4px), var(--plt-y,0)) scale(1); }
  75%    { transform:translate(calc(var(--plt-x,0) + 4px), var(--plt-y,0)) scale(1); }
}

/* [V35] Masquage des boutons flottants natifs des trois outils — la bulle
   radiale est désormais l'unique point d'entrée. Les PANNEAUX (tuteur,
   calculatrice, tableau périodique) restent visibles quand ouverts. */
.ai-tutor-root .ai-fab{ display:none !important; }
#polaris-calc-toggle-btn{ display:none !important; }

/* Positionne le panneau tuteur à côté de la bulle plutôt que sur le FAB caché */
.ai-tutor-root{
  /* le panneau garde ses coordonnées propres via .ai-tutor-root déjà en bottom-right */
}

/* Mobile : pétales plus compacts */
@media (max-width:560px){
  .polaris-tools-launcher{ --plt-size:52px; }
  .plt-petal{ width:44px; height:44px; }
}

/* Mode sombre : ajuste les surfaces */
[data-theme="dark"] .plt-petal{
  background:var(--color-surface-2, #232833);
  color:var(--color-text,#eaeaea);
}
[data-theme="dark"] .plt-petal:hover{
  background:color-mix(in srgb, var(--color-gold,#c8a24b) 18%, var(--color-surface-2,#232833));
}
[data-theme="dark"] .plt-petal .plt-petal-label{
  background:var(--color-surface-2,#232833);
  color:var(--color-text,#eaeaea);
}

/* ============================================================
   [V37-preview 2026-07-06] Rendu KaTeX — ajustements Polaris
   ------------------------------------------------------------
   KaTeX par défaut rend en 1em et met les bornes d'intégrale
   en scriptsize très serré. On applique :
   1) Taille globale +10% pour lisibilité (proche de MathJax v3).
   2) Limites d'intégrale, somme, lim, prod : displaystyle même
      en inline → bornes au-dessus/dessous, plus lisibles.
   3) Un peu d'espace autour des grands opérateurs.
   4) Alignement baseline propre pour les formules inline (le
      centrage vertical KaTeX flotte parfois d'1-2px sur Chrome).
   ============================================================ */

/* 1) Taille globale — .katex hérite du font-size du conteneur ; on
   monte à 1.15em (inline) et 1.22em (display) après retour user :
   1.08em jugé encore un peu petit. Reste discret dans le flow. */
.katex { font-size: 1.15em; }
.katex-display > .katex { font-size: 1.22em; }

/* 2) Bornes d'intégrale/somme/lim EN INLINE : par défaut KaTeX les
   met en scriptsize (0.7em) très tassé. On les agrandit à 0.85em et
   on augmente l'espacement autour du grand opérateur pour que ce
   soit lisible sans casser le flow de la ligne (pas de displaystyle
   qui ferait une bosse verticale). */
.katex:not(.katex-display > .katex) .mop.op-symbol.small-op,
.katex:not(.katex-display > .katex) .mop.op-symbol.large-op {
  font-size: 1.15em;
}
/* Les bornes (indices/exposants) attachées aux grands opérateurs
   inline : on remonte leur taille pour qu'elles restent lisibles. */
.katex .mop + .msupsub .vlist-t { font-size: 0.85em; }

/* 3) Espace autour des grands opérateurs (rendu inline).
   KaTeX serre \int à ras du contenu ; on donne 0.12em d'air. */
.katex .mop.op-symbol { margin-right: 0.12em; margin-left: 0.02em; }

/* 4) Alignement vertical baseline pour formules inline dans du texte.
   Corrige le léger décalage bas de 1-2px visible sur Chrome/Comet
   quand une formule inline avec fraction (\frac) est dans un <p>. */
.katex-html { vertical-align: baseline; }

/* 5) Bornes d'intégrale/somme en display : légèrement plus grandes
   et bien espacées du symbole. Historiquement KaTeX les colle. */
.katex-display .mop.op-limits > .vlist-t {
  padding-left: 0.05em;
  padding-right: 0.05em;
}

/* 6) Fractions inline : leger padding pour ne pas coller au texte
   avant/après (améliore la respiration typographique). */
.katex .mfrac { padding: 0 0.05em; }

/* 7) Couleur des erreurs KaTeX cohérente avec le thème (erreurColor
   côté JS est cc0000, mais si un .katex-error apparaît, on veut
   qu'il soit visible sans être criard). */
.katex-error { color: var(--color-danger, #cc3333); background: rgba(204,51,51,0.06); padding: 0 0.15em; border-radius: 2px; }

/* 8) Pas de retour à la ligne AU MILIEU d'une formule inline.
   KaTeX ne pose pas white-space:nowrap par défaut → le navigateur
   casse la formule sur n'importe quel espace interne (ex.
   `\lim_{t\to+\infty} \arctan(t) = \frac{\pi}{2}` coupé entre
   `=` et `\frac`). On force nowrap sur .katex, MAIS on restaure
   le comportement normal pour les formules display (bloc \[ \])
   qui doivent pouvoir se répartir sur plusieurs lignes si trop
   longues, sinon elles déborderaient horizontalement. */
.katex { white-space: nowrap; }
.katex-display > .katex { white-space: normal; }

/* =====================================================================
   perf v6.7 — Respect strict de prefers-reduced-motion
   ---------------------------------------------------------------------
   Beaucoup d'animations `infinite` sont déclarées ailleurs sans garde
   media query. Cette règle finale est un filet de sécurité global : en
   mode reduced-motion, on neutralise toutes les animations infinies et
   toutes les transitions longues, ce qui réduit fortement la charge CPU
   sur les ordinateurs anciens et les tablettes qui expriment cette
   préférence système. La spécificité `*` + `!important` est volontaire :
   c'est un mode d'accessibilité et de perf, il DOIT gagner.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   [V49 2026-07-07] POINT CULTURE — bouton d'accroche + popup flouté
   ---------------------------------------------------------------------
   Chaque chapitre peut déclarer un tableau `pointsCulture: [{id, titre,
   contenu, source}]` dans son data/chXX.js. Le portail affiche alors,
   en fin de la section Cours, une grille de « boutons dorés » ; le clic
   ouvre une modale (via openModal, .point-culture-modal) avec fond flouté
   backdrop-filter: blur(12px), animation fade-in + scale, contenu KaTeX
   rendu à l'ouverture (typeset via renderMath).
   ===================================================================== */

/* Section titre + grille de boutons ------------------------------------ */
.point-culture-section{
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px dashed var(--color-divider);
}
.point-culture-section h2{
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-gold, #c9a15a);
  margin-bottom: 1rem;
}
.point-culture-section h2::before{
  content: "🏛️";
  font-size: 1.1em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.point-culture-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}

/* Bouton doré ---------------------------------------------------------- */
.point-culture-btn{
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-gold, #c9a15a) 18%, var(--color-surface)) 0%,
    color-mix(in srgb, var(--color-gold, #c9a15a) 8%, var(--color-surface)) 100%);
  border: 1px solid color-mix(in srgb, var(--color-gold, #c9a15a) 45%, transparent);
  border-radius: var(--radius-lg, 12px);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.85,.3,1),
              box-shadow .18s ease,
              border-color .18s ease;
}
.point-culture-btn::before{
  content: "📜";
  font-size: 1.35em;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
.point-culture-btn .pc-btn-label{
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.point-culture-btn::after{
  /* Reflet doré subtil qui traverse au survol */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    transparent 0%,
    color-mix(in srgb, var(--color-gold, #c9a15a) 25%, transparent) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform .55s cubic-bezier(.2,.85,.3,1);
  pointer-events: none;
}
.point-culture-btn:hover{
  transform: translateY(-2px);
  border-color: var(--color-gold, #c9a15a);
  box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--color-gold, #c9a15a) 45%, transparent),
              0 2px 6px rgba(0,0,0,.15);
}
.point-culture-btn:hover::after{ transform: translateX(100%); }
.point-culture-btn:focus-visible{
  outline: 2px solid var(--color-gold, #c9a15a);
  outline-offset: 2px;
}
.point-culture-btn:active{ transform: translateY(0); }

/* Modale avec fond flouté (override du fond de .rituel-modal-ov) ------- */
.rituel-modal-ov.point-culture-modal{
  /* [V50] Renforce le flou du fond : l'audit V49 remontait que le blur était
     peu perceptible car le fond assombri (62% opaque hérité de .rituel-modal-ov)
     recouvrait presque entièrement l'image floue. On force ici un fond plus
     transparent + un blur plus intense pour rendre l'effet lisible. */
  background: rgba(10, 14, 25, .18) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
/* Fallback pour les navigateurs sans support backdrop-filter (rare en 2026) :
   on retombe sur un fond plus opaque pour garder le contraste. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .rituel-modal-ov.point-culture-modal{ background: rgba(10, 14, 25, .55) !important; }
}
.rituel-modal-ov.point-culture-modal .rituel-modal{
  max-width: min(720px, 100%);
  border: 1px solid color-mix(in srgb, var(--color-gold, #c9a15a) 40%, var(--color-border));
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.55),
              0 0 0 1px color-mix(in srgb, var(--color-gold, #c9a15a) 25%, transparent) inset;
}
.rituel-modal-ov.point-culture-modal .rituel-modal-head{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-gold, #c9a15a) 12%, var(--color-surface)) 0%,
    var(--color-surface) 100%);
}
.rituel-modal-ov.point-culture-modal .rituel-modal-title{
  color: var(--color-gold, #c9a15a);
}
.rituel-modal-ov.point-culture-modal .rituel-modal-title::before{
  content: "🏛️";
  font-size: 1.1em;
}
.point-culture-body{
  font-family: var(--font-body, var(--font-ui));
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
}
.point-culture-body p{ margin: 0 0 .85rem; }
.point-culture-body p:last-child{ margin-bottom: 0; }
.point-culture-body h3, .point-culture-body h4{
  font-family: var(--font-display);
  color: var(--color-text);
  margin: 1.2rem 0 .5rem;
}
.point-culture-body em{ color: var(--color-text-muted); }
.point-culture-body .katex{ font-size: 1.02em; }
.point-culture-source{
  margin-top: 1.25rem;
  padding-top: .75rem;
  border-top: 1px dashed var(--color-divider);
  font-size: .85rem;
  color: var(--color-text-muted);
  font-style: italic;
}
.point-culture-source::before{ content: "— "; }

/* Mobile : la modale prend quasi tout l'écran */
@media (max-width: 640px){
  .rituel-modal-ov.point-culture-modal .rituel-modal{
    max-height: 92vh;
  }
  .point-culture-grid{
    grid-template-columns: 1fr;
  }
}

/* Reduced motion : on désactive le reflet doré et les translations */
@media (prefers-reduced-motion: reduce){
  .point-culture-btn:hover{ transform: none; }
  .point-culture-btn::after{ display: none; }
}

/* ==========================================================================
   Page Fiches par matière (#/fiches/<matiere>)
   ========================================================================== */

.fiches-page{
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px 96px;
}

.fiches-breadcrumb{
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 20px;
  letter-spacing: 0.02em;
}
.fiches-breadcrumb a{
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color .2s ease;
}
.fiches-breadcrumb a:hover{ color: var(--color-primary); }
.fiches-breadcrumb span{ color: var(--color-text); font-weight: 500; }

/* ---------- Hero ---------- */
.fiches-hero{
  position: relative;
  border-radius: 24px;
  padding: 44px 48px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 32px;
  overflow: hidden;
  box-shadow: 0 20px 60px -20px rgba(11, 29, 58, 0.35);
  margin-bottom: 36px;
}
.fiches-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18), transparent 55%);
  pointer-events: none;
}
.fiches-hero-icon{
  font-size: 88px;
  line-height: 1;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  opacity: 0.85;
  text-shadow: 0 4px 24px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.fiches-hero-body{ position: relative; z-index: 1; flex: 1; }
.fiches-hero-title{
  font-family: 'Playfair Display', 'Georgia', serif;
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.fiches-hero-subtitle{
  font-size: 17px;
  opacity: 0.92;
  margin: 0 0 20px;
  font-weight: 400;
  max-width: 560px;
}
.fiches-hero-stats{ display: flex; gap: 20px; flex-wrap: wrap; }
.fiches-hero-stat{
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.18);
}
.fiches-hero-stat strong{ font-weight: 700; margin-right: 4px; }

@media (max-width: 720px){
  .fiches-hero{ padding: 28px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .fiches-hero-icon{ font-size: 64px; }
  .fiches-hero-title{ font-size: 32px; }
}

/* ---------- Switcher matière ---------- */
.fiches-switcher{
  display: flex;
  gap: 12px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.fiches-switch{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s ease;
}
.fiches-switch:hover{
  border-color: var(--color-primary-line);
  color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -6px rgba(11,29,58,0.15);
}
.fiches-switch.is-active{
  background: var(--color-surface);
  font-weight: 600;
  box-shadow: 0 2px 8px -2px rgba(11,29,58,0.1);
}
.fiches-switch-icon{
  font-size: 18px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Sections ---------- */
.fiches-section{ margin-bottom: 48px; }
.fiches-section-head{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.fiches-section-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 18px;
  flex-shrink: 0;
}
.fiches-section-badge--gold{
  background: linear-gradient(135deg, #d4af37 0%, #f4e5b0 100%);
  color: #6b4d0f;
  box-shadow: 0 4px 16px -4px rgba(212,175,55,0.5);
}
.fiches-section-title{
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.fiches-section-desc{
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--color-text-muted);
  font-size: 14px;
  padding-left: 48px;
}

/* ---------- Grille de cartes ---------- */
.fiches-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

/* ---------- Carte fiche ---------- */
.fiches-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 0;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease, border-color .25s ease;
  box-shadow: 0 2px 6px -2px rgba(11,29,58,0.06);
}
.fiches-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(11,29,58,0.25);
  border-color: var(--color-primary-line);
}
.fiches-card-accent{
  height: 6px;
  width: 100%;
  flex-shrink: 0;
}
.fiches-card-body{
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.fiches-card-title{
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  color: var(--color-text);
  letter-spacing: -0.005em;
}
.fiches-card-desc{
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
}
.fiches-card-counts{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.fiches-card-count{
  font-size: 11.5px;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.fiches-card-count strong{ font-weight: 700; margin-right: 2px; }
.fiches-card-footer{
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--color-divider);
}
.fiches-card-cta{
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  transition: transform .2s ease;
  display: inline-block;
}
.fiches-card:hover .fiches-card-cta{ transform: translateX(3px); }

/* ---------- Carte transversale (variante premium dorée) ---------- */
.fiches-card--transversal{
  background: linear-gradient(180deg, #fffdf6 0%, var(--color-surface-2) 100%);
  border-color: #e0cf9f;
  box-shadow: 0 4px 20px -6px rgba(200,164,81,0.25);
}
.fiches-card--transversal:hover{
  border-color: #c8a451;
  box-shadow: 0 24px 50px -20px rgba(200,164,81,0.4);
}
.fiches-card--transversal .fiches-card-title{
  color: #6b4d0f;
}
.fiches-card--transversal .fiches-card-count{
  background: linear-gradient(135deg, #faf3dc, #f4e5b0);
  color: #6b4d0f;
}
.fiches-card--transversal .fiches-card-cta{ color: #a67c1a; }
.fiches-card-ribbon{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #d4af37 0%, #f4e5b0 100%);
  color: #4a3607;
  box-shadow: 0 2px 8px -2px rgba(200,164,81,0.5);
}

/* ---------- Page détail ---------- */
.fiches-detail-hero{
  border-radius: 20px;
  padding: 32px 36px;
  color: #fff;
  margin-bottom: 32px;
  box-shadow: 0 12px 40px -16px rgba(11,29,58,0.35);
  position: relative;
  overflow: hidden;
}
.fiches-detail-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 20%, rgba(255,255,255,0.15), transparent 60%);
  pointer-events: none;
}
.fiches-detail-hero-body{ position: relative; z-index: 1; }
.fiches-detail-hero-tag{
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.fiches-detail-hero-title{
  font-family: 'Playfair Display', serif;
  font-size: 34px;
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.fiches-detail-body{
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 32px 36px;
  box-shadow: 0 4px 16px -8px rgba(11,29,58,0.08);
}
.fiches-detail-body h2{
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: var(--color-text);
  margin: 24px 0 12px;
  letter-spacing: -0.005em;
}
.fiches-detail-body h2:first-child{ margin-top: 0; }
.fiches-detail-body .fiche-resume{
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.65;
  padding: 16px 20px;
  border-left: 3px solid var(--color-gold);
  background: var(--color-gold-soft);
  border-radius: 0 10px 10px 0;
  margin-bottom: 8px;
}
.fiches-detail-back{
  margin-top: 24px;
  text-align: center;
}
.fiches-detail-back .btn{
  padding: 10px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s ease;
  display: inline-block;
}
.fiches-detail-back .btn:hover{
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

/* ---------- Empty state ---------- */
.fiches-empty{
  padding: 40px 32px;
  border: 1.5px dashed var(--color-border);
  border-radius: 16px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
}
.fiches-empty p{ margin: 0; font-size: 15px; }

/* ---------- Dark mode adjustments ---------- */
[data-theme="dark"] .fiches-card--transversal{
  background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, var(--color-surface-2) 100%);
  border-color: rgba(212,175,55,0.35);
}
[data-theme="dark"] .fiches-card--transversal .fiches-card-title{ color: #e6c86a; }
[data-theme="dark"] .fiches-card--transversal .fiches-card-count{
  background: rgba(212,175,55,0.15);
  color: #e6c86a;
}
[data-theme="dark"] .fiches-detail-body .fiche-resume{
  background: rgba(200,164,81,0.08);
  color: var(--color-text);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fiches-card, .fiches-card:hover, .fiches-card-cta{ transition: none; transform: none; }
}

/* ============================================================================
   [MOBILE FIX 2026-07-08] Patch d'accessibilité mobile (audit iPhone 14 / 390×844)
   - Fix overflow horizontal du header (theme-switch)
   - Tap targets WCAG 2.5.5 : 44×44 min via zone de tap invisible
   - Lisibilité : textes < 12px passés à 12px min
   Cible : viewports <= 640px. Aucun impact sur desktop (>= 1025px).
   ============================================================================ */
@media (max-width: 640px) {
  /* --- Header : éviter l'overflow, prioriser la search bar --- */
  .app-header {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }
  /* Theme switch : réduire la pilule sur mobile (60×30 au lieu de 84×30)
     et forcer flex-shrink:0 pour ne pas être écrasée par la search bar. */
  .theme-switch {
    --sw-w: 60px;
    --sw-h: 30px;
    width: var(--sw-w);
    height: var(--sw-h);
    min-width: 60px;
    flex-shrink: 0;
    /* Zone de tap élargie via padding invisible (pointer-events restent OK) */
    position: relative;
  }
  .theme-switch::after {
    /* Hitbox invisible étendue à 44×44 min pour respecter WCAG 2.5.5.
       Ne modifie pas la taille visuelle. */
    content: "";
    position: absolute;
    inset: -7px -0px;  /* +7px vertical → 44px de haut effectif */
    z-index: 0;
  }
  /* Search trigger : min-height 44px pour tap target WCAG */
  .search-trigger { min-height: 44px; padding: .55rem .8rem; }

  /* --- Tap targets : élargir la zone de tap sans casser le visuel via ::after --- */
  .hdr-admin,
  .profile-avatar,
  .brand {
    position: relative;
  }
  .hdr-admin::after,
  .profile-avatar::after,
  .brand::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  /* Assurer que les enfants du bouton restent cliquables au-dessus du hitbox */
  .hdr-admin > *, .profile-avatar > *, .brand > *, .theme-switch > * {
    position: relative;
    z-index: 1;
  }

  /* nav-link : hauteur mini 44 pour tap target */
  .nav-link {
    min-height: 44px;
  }
  .nav-group .nav-link {
    min-height: 44px;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }

  /* --- Lisibilité : textes < 12px passés à 12px min sur mobile --- */
  .nav-section-title,
  .nav-field-label,
  .app-header .brand small {
    font-size: .75rem;  /* 12px min à la base 16px */
    letter-spacing: .08em;
  }
  .nav-link .num {
    font-size: .75rem;
  }
  /* Badges Ginette (BJ), difficulté, records */
  .nav-badge,
  .diff,
  .chapter-card .cnum,
  .chapter-card .domain,
  .search-result .sr-type,
  .quiz-cat,
  .flashcard-face .fc-tag {
    font-size: .75rem;
  }
  /* Boutons "Reprendre", "Étudier", labels de progression */
  .prog-state,
  .btn.small,
  .btn.btn-sm {
    font-size: .8rem;
  }
}

/* iPhone SE (viewport 375px) et plus étroit : gap encore plus resserré */
@media (max-width: 400px) {
  .app-header { gap: var(--space-1); padding: 0 var(--space-2); }
  .theme-switch { --sw-w: 54px; min-width: 54px; }
  .search-trigger { padding: .5rem .6rem; }
}
/* === PATCH v2 MOBILE 2026-07-08 21:26 CEST ===
   1) Force min-height:44px explicite sur theme-switch::after (redondance safe vs inset -7px)
   2) Force taille min 12px sur badges/streaks (WCAG 1.4.4 relatif) */

@media (max-width: 640px) {
  /* Renforce hitbox theme-switch (au cas où inset:-7px 0 est masqué) */
  .theme-switch::after {
    min-height: 44px;
    min-width: 44px;
  }

  /* Textes secondaires : 12px minimum lisible */
  .jour-streak-best,
  .jour-diff,
  .jour-diff-difficile,
  .jour-streak-fire,
  .kicker,
  .profile-pop-role {
    font-size: .75rem !important;   /* 12px @ 16 root */
  }

  /* "Reprendre" span nu dans les cartes */
  .card-actions span,
  .btn.small span,
  .prog-state span {
    font-size: .75rem;
  }
}