/**
 * Prisme — feuille de style unique.
 * Aucune dependance, aucune police externe (la CSP n'autorise que 'self').
 * Les styles en ligne sont interdits dans le HTML : tout passe par des classes.
 *
 * Sommaire
 *   1. Jetons (couleurs, espacements, rayons)
 *   2. Base et typographie
 *   3. Coquille : barre laterale, contenu, barre de titre
 *   4. Controles : boutons, champs, interrupteurs
 *   5. Surfaces : cartes, tuiles, lignes, etats vides
 *   6. Ecran Sources : zone de depot, file d'attente, progression
 *   7. Ecran Dossiers : grille de tuiles
 *   8. Ecran Bibliotheque : barre d'outils, filtres, selection
 *   9. Ecran Reglages : sections
 *  10. Fiche : lecteur, sections, affirmations verifiees
 *  11. Fenetre modale
 *  12. Petits ecrans
 */

/* ---------- 1. Polices auto-hebergees ----------
   Trois familles, un role chacune (direction « Nuit electrique », 2026-09-21) :
   Syne pour les titres, Atkinson Hyperlegible pour la lecture ET l'interface,
   Martian Mono pour les preuves et la machine. Auto-hebergees : l'app doit
   fonctionner sans reseau, et la CSP n'autorise que 'self'. Syne et Martian
   Mono sont des fichiers variables ; Atkinson n'existe qu'en statique. */
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/syne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/syne-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-400-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/atkinson-400-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-700-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("fonts/atkinson-700-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/martianmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/martianmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- 2. Jetons — direction « Nuit electrique » (2026-09-21) ----------
   Fond bleu-noir profond, encre froide, UN accent : un bleu neon reserve a ce
   qui se prouve et a ce qu'on peut cliquer. Le halo (--glow) n'est pas un
   decor : il signale un etat (primaire, focus, puce active) et ne pulse jamais.
   Les noms de variables sont ceux de la direction precedente : le mouvement
   (section 13) est ecrit contre eux et n'a pas eu a changer.
   Reference : toile Design « Prisme — Design system », planches 01 a 08. */
:root {
  /* Paliers releves le 2026-10-05 (audit : les panneaux contrastaient a 1,05:1 avec le
     fond, « trop monochrome » disait Clement). Chaque palier fait au moins 1,10:1 avec
     le precedent ; le fond d'app ne change pas. */
  --bg-0: #0a0d12;       /* fond d'app */
  --bg-1: #121923;       /* panneaux, en-tetes */
  --bg-2: #1b2431;       /* controles, item actif */
  --bg-3: #243040;       /* survol */
  --panel-deep: #0c1117; /* cartes internes, colonne de gauche : toujours plus sombre que ce qui les porte */

  --line: #28333f;
  --line-soft: #202a36;
  --line-strong: #36434f;
  --line-faint: #1b232d;

  /* Couleurs d'OBJET (2026-10-05) : la teinte dit le type, et une seule chose.
     Elle ne va que sur l'icone, la bande d'une carte ou une puce, jamais sur un fond.
     Le bleu d'accent reste le geste (un primaire par ecran, lien, focus). */
  --c-video: #ff8a65;  --c-video-soft: rgba(255, 138, 101, .14);  --c-video-line: rgba(255, 138, 101, .32);
  --c-doc: #f5c04a;    --c-doc-soft: rgba(245, 192, 74, .14);     --c-doc-line: rgba(245, 192, 74, .32);
  --c-synth: #c89bff;  --c-synth-soft: rgba(200, 155, 255, .14);  --c-synth-line: rgba(200, 155, 255, .32);
  --c-suivi: #5ad8b0;  --c-suivi-soft: rgba(90, 216, 176, .14);   --c-suivi-line: rgba(90, 216, 176, .32);
  /* Mes surlignages (2026-10-05) : l'ambre du document, assez dense pour se voir sur le texte. */
  --hl: rgba(245, 192, 74, .30);
  --hl-hi: rgba(245, 192, 74, .5);
  /* Pastilles de dossier (a choisir a la creation, marche 3). */
  --d-sable: #e4b787; --d-rose: #f29ab8; --d-lavande: #a99df5; --d-menthe: #6fd3b5;
  --d-ciel: #6cc1f0; --d-olive: #b6c95a; --d-corail: #f08a7a; --d-ardoise: #93a4b8;

  --text: #e8eef5;
  --text-strong: #f4f8fc;
  --text-2: #b9c4d1;
  --text-3: #8593a3;
  --text-4: #66727f;      /* mentions, jamais du texte lu */
  --text-5: #586470;      /* mono discret */
  --ink-warm: #9fd8f0;    /* texte dans un encadre bleu (l'ancien nom est garde) */

  --accent: #3fb8ff;
  --accent-rgb: 63, 184, 255;
  --accent-ink: #041017;
  --accent-hi: #7dd3ff;
  --accent-soft: rgba(63, 184, 255, .10);
  --accent-line: rgba(63, 184, 255, .28);
  --accent-text: #7dd3ff;
  /* Le halo : bouton primaire, focus clavier, element actif. Jamais sur du texte, jamais anime. */
  --glow: 0 0 0 1px rgba(63, 184, 255, .35), 0 0 18px rgba(63, 184, 255, .35);
  --glow-sm: 0 0 14px rgba(63, 184, 255, .45);

  --ok: #3ddc97;
  --ok-soft: rgba(61, 220, 151, .12);
  --warn: #ffc857;
  --warn-soft: rgba(255, 200, 87, .12);
  --err: #ff6b7a;
  --err-rgb: 255, 107, 122;
  --err-soft: rgba(255, 107, 122, .10);
  /* Barre de titre et barre d'onglets : opaques. Le flou d'arriere-plan (backdrop-filter)
     sur un element colle laissait des traces a l'ecran au defilement sous Windows. */
  --bg-blur: #0a0d12;
  --veil: rgba(3, 5, 8, .64);         /* voile derriere une modale ou un tiroir */

  /* Couleurs par type d'affirmation : le libelle seulement, jamais un fond. */
  --t-fait: #8ab4ff;
  --t-chiffre: #3ddc97;
  --t-reco: #ffc857;
  --t-opinion: #c084fc;
  --t-exp: #8593a3;

  /* La pastille du logo : un degrade bleu, pas un arc-en-ciel. */
  --spectrum: linear-gradient(140deg, #7dd3ff, #1f7fc4);

  --r-sm: 8px;      /* controles */
  --r-md: 10px;     /* cartes */
  --r-plate: 12px;  /* plaques « Comprendre » */
  --r-lg: 14px;
  --r-pill: 20px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 8px 20px rgba(0, 0, 0, .4);
  --shadow-3: 0 26px 70px rgba(0, 0, 0, .7);
  --sh-plate: 0 1px 0 rgba(63, 184, 255, .08) inset, 0 8px 20px rgba(0, 0, 0, .4);

  /* Trois familles, trois roles. Le monospace est SEMANTIQUE : il dit
     « ceci est verifiable, ceci vient de la machine ». Jamais decoratif.
     --font-read et --font-ui pointent sur la meme famille : la taille et la
     graisse font la difference entre lire et agir. */
  --font-display: "Syne", "Segoe UI", system-ui, sans-serif;
  --font-read: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-ui: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, Consolas, monospace;
  --read-width: 62ch;

  --rail: 214px;
  --rail-min: 46px;
  --topbar: 60px;

  /* ---- Mouvement (remise § 7-8) ----
     Cinq durees, trois courbes. Le mouvement n'a que trois droits :
     dire d'ou vient une chose, montrer qu'un travail avance, confirmer
     qu'un etat a change. Rien ne bouge pendant la lecture. */
  --m-instant: 90ms;
  --m-quick: 160ms;
  --m-panel: 260ms;
  --m-travel: 300ms;
  --m-calm: 420ms;
  --m-stagger: 70ms;
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-inout: cubic-bezier(.4, 0, .2, 1);
  --e-exit: cubic-bezier(.4, 0, 1, 1);
}

/* Mode clair : la meme encre sur papier froid. Le bleu perd son halo et
   s'assombrit pour tenir le contraste. C'est aussi le theme du PDF.
   Declencheur : Reglages > Apparence > « Theme sombre » (decision du 2026-09-21),
   choix memorise sur l'appareil, pas de suivi du systeme. */
[data-theme="light"] {
  --bg-0: #eef2f7;
  --bg-1: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #e3e9f1;
  --panel-deep: #eef2f7;

  --line: #cfd8e3;
  --line-soft: #dbe3ec;
  --line-strong: #c3cdd9;
  --line-faint: #e6ecf3;

  --text: #0f1720;
  --text-strong: #0f1720;
  --text-2: #2f3b48;
  --text-3: #5b6875;
  --text-4: #7c8894;
  --text-5: #7c8894;
  --ink-warm: #0b4f75;

  --accent: #0077cc;
  --accent-rgb: 0, 119, 204;
  --accent-ink: #ffffff;
  --accent-hi: #005fa3;
  --accent-soft: rgba(0, 119, 204, .08);
  --accent-line: rgba(0, 119, 204, .26);
  --accent-text: #0369a1;
  --glow: 0 0 0 2px rgba(0, 119, 204, .25);
  --glow-sm: none;

  /* Assombris le 2026-10-05 : « ✓ verifie » et « transcrit » faisaient 3,2:1 sur fond clair,
     sous le lisible pour du texte de 11,5 px. Tous a 4,5:1 au moins sur #eef2f7. */
  --ok: #11764a;
  --ok-soft: rgba(17, 118, 74, .10);
  --warn: #8a5a12;
  --warn-soft: rgba(138, 90, 18, .10);
  --err: #b83242;
  --err-rgb: 184, 50, 66;
  --err-soft: rgba(184, 50, 66, .08);
  --bg-blur: #eef2f7;
  --veil: rgba(15, 23, 32, .34);

  --t-fait: #2f5fb8;
  --t-chiffre: #11764a;
  --t-reco: #8a5a12;
  --t-opinion: #6d28d9;
  --t-exp: #5b6875;

  --c-video: #b13a0a;  --c-video-soft: rgba(177, 58, 10, .10);  --c-video-line: rgba(177, 58, 10, .30);
  --c-doc: #92600e;    --c-doc-soft: rgba(146, 96, 14, .10);    --c-doc-line: rgba(146, 96, 14, .30);
  --hl: rgba(255, 214, 10, .42);
  --hl-hi: rgba(255, 214, 10, .7);
  --c-synth: #6d28d9;  --c-synth-soft: rgba(109, 40, 217, .08); --c-synth-line: rgba(109, 40, 217, .28);
  --c-suivi: #0f766e;  --c-suivi-soft: rgba(15, 118, 110, .10); --c-suivi-line: rgba(15, 118, 110, .30);
  --d-sable: #a06a2e; --d-rose: #b8396e; --d-lavande: #5b4fc4; --d-menthe: #1f7f62;
  --d-ciel: #1f6fa8; --d-olive: #5f7314; --d-corail: #b8402f; --d-ardoise: #4e6076;

  --spectrum: linear-gradient(140deg, #4fb3f0, #0077cc);
  --shadow-1: 0 1px 2px rgba(15, 23, 32, .08);
  --shadow-2: 0 4px 12px rgba(15, 23, 32, .08);
  --shadow-3: 0 20px 50px rgba(15, 23, 32, .16);
  --sh-plate: 0 2px 4px rgba(15, 23, 32, .05);
}

/* Bascule de theme : un fondu de 260 ms sur les couleurs seules, rien ne se
   deplace. La classe est posee par app.js le temps du fondu, puis retiree :
   hors bascule, ces transitions n'existent pas. */
html.theming, html.theming * , html.theming *::before, html.theming *::after {
  transition: background-color var(--m-panel) var(--e-inout), color var(--m-panel) var(--e-inout),
              border-color var(--m-panel) var(--e-inout), box-shadow var(--m-panel) var(--e-inout) !important;
}

/* Mouvement reduit : les durees tombent a 1 ms. Les trois boucles restent
   (redefinies plus bas en opacite seule) : sinon on ne sait plus si la
   machine tourne. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --m-instant: 1ms; --m-quick: 1ms; --m-panel: 1ms;
    --m-travel: 1ms; --m-calm: 1ms; --m-stagger: 0ms;
  }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; }
/* Les boutons ont un display explicite : l'attribut hidden doit quand meme gagner. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  margin: 0;
  font: 13px/1.55 var(--font-ui);
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent-soft); }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: 15px; letter-spacing: .2px; }
h2 { font-size: 20px; letter-spacing: -.2px; }
h3 { font-size: 15px; margin: 24px 0 10px; }
h4 { font-size: 13.5px; }
p { margin: 0 0 10px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.hint { color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.dim { color: var(--text-2); }
.mono { font: 12.5px/1.6 var(--font-mono); }
.spacer { flex: 1; }
.grow { flex: 1; min-width: 200px; }
.tight { margin: 0; }
.mt4 { margin: 4px 0 0; }
.mt6 { margin: 6px 0 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.row.tight { margin: 0; }
.stack { display: flex; flex-direction: column; gap: 10px; }

code {
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 5px 9px; border-radius: var(--r-sm);
  font: 12.5px var(--font-mono); color: var(--text-2);
}
p code, li code { padding: 1px 6px; }

/* Icones : un sprite SVG en haut du HTML, referencé par <use>. */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 15px; height: 15px; }
.ic.lg { width: 26px; height: 26px; }
#sprite { display: none; }

/* ---------- 3. Coquille ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--rail); flex: none;
  background: var(--panel-deep);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: 18px 12px 12px;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
/* La pastille porte le logo : la mascotte (cerveau « profil », 2026-09-27),
   dans la couleur du texte (blanc en sombre, bleu-noir en clair, comme l'icone).
   Ses yeux n'ont pas de fill : ils heritent de celui du svg, la couleur de la
   colonne, et semblent decoupes. Ni degrade ni halo a cette taille. */
.brand .mark {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  color: var(--text);
}
.brand .mark .logo { width: 28px; height: 28px; display: block; fill: var(--panel-deep); }
.brand .name { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.brand .tag { display: block; font-size: 10.5px; color: var(--text-3); letter-spacing: .3px; font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.navlink {
  display: flex; align-items: center; justify-content: flex-start; gap: 11px;
  padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--text-2); background: none; border: 0; width: 100%;
  font: inherit; text-align: left; cursor: pointer;
  position: relative;
}
.navlink:hover { background: var(--bg-2); color: var(--text); }
.navlink.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }
.navlink.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--accent);
}
.navlink .count {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  background: var(--bg-3); border-radius: var(--r-full); padding: 1px 7px; min-width: 22px; text-align: center;
}
.navlink.active .count { color: var(--text-2); }

.sidefoot { margin-top: auto; padding: 10px 10px 0; border-top: 1px solid var(--line-soft); }
.sidefoot .line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); padding: 4px 0; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.dot.err { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: var(--topbar); flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 28px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; background: var(--bg-blur);
  z-index: 15;
}
/* Une seule ligne, coupee par des points de suspension : un long titre de fiche
   sortait de la barre (hauteur fixe) et se superposait au contenu sur telephone. */
.topbar h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -.01em;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .sub { color: var(--text-3); font-size: 12.5px; }
.content { padding: 26px 28px 80px; max-width: 1240px; width: 100%; }

.panel { display: none; }
.panel.active { display: block; }

.offline {
  display: flex; align-items: center; gap: 8px;
  color: var(--warn); background: var(--warn-soft); border: 1px solid rgba(240, 180, 41, .3);
  font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-full);
}

/* ---------- 4. Controles ---------- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 14px; font: inherit; font-weight: 500; line-height: 1.3;
  cursor: pointer; text-decoration: none;
  transition: background .13s ease, border-color .13s ease, transform .06s ease;
}
button:hover:not(:disabled), .btn:hover { background: var(--bg-3); border-color: var(--line-strong); text-decoration: none; }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button:disabled, .btn.disabled { opacity: .4; cursor: default; }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .navlink:focus-visible {
  outline: 1px solid var(--accent); outline-offset: 1px; box-shadow: var(--glow);
}

.btn-primary, button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650;
  box-shadow: var(--glow);
}
.btn-primary:hover:not(:disabled), button.primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-2); color: var(--text); }
.btn-danger { color: var(--err); border-color: rgba(255, 107, 122, .3); background: var(--err-soft); }
.btn-danger:hover:not(:disabled) { background: rgba(255, 107, 122, .2); border-color: var(--err); }
.btn-lg { padding: 11px 20px; font-size: 14.5px; }
button.small, .btn.small { padding: 5px 11px; font-size: 12.5px; gap: 5px; }
button.icon, .btn.icon { padding: 7px; }
button.icon.small { padding: 5px; }

/* Groupe de boutons colles (vue liste / grille, tri) */
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { background: none; border: 0; padding: 5px 11px; font-size: 12.5px; border-radius: 6px; color: var(--text-3); }
.seg button:hover:not(:disabled) { background: var(--bg-3); color: var(--text-2); }
.seg button.on { background: var(--bg-3); color: var(--text); font-weight: 600; }

input, select, textarea {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 8px 11px; font: inherit;
  transition: border-color .13s ease, background .13s ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-line); background: var(--bg-1); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
select { cursor: pointer; padding-right: 30px; }
textarea { resize: vertical; width: 100%; min-height: 84px; line-height: 1.6; }
input[type=password] { min-width: 250px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, label.lbl { font-size: 12.5px; color: var(--text-2); font-weight: 500; }

/* Champ avec icone a gauche (recherche) */
.search { position: relative; flex: 1; min-width: 200px; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search input { width: 100%; padding-left: 36px; }

input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; cursor: pointer; }
label.check { display: flex; align-items: center; gap: 9px; color: var(--text); cursor: pointer; }

/* Interrupteur : plus lisible qu'une case pour un reglage qui agit tout de suite */
.switch { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track {
  width: 38px; height: 22px; border-radius: var(--r-full); background: var(--bg-3);
  border: 1px solid var(--line); position: relative; flex: none; transition: background .16s ease, border-color .16s ease;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--text-3); transition: transform .16s ease, background .16s ease;
}
.switch input:checked + .track { background: var(--accent); border-color: var(--accent); box-shadow: var(--glow-sm); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--accent-ink); }
.switch input:focus-visible + .track { outline: 1px solid var(--accent); outline-offset: 1px; box-shadow: var(--glow); }

/* Etiquette filtrante cliquable */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-full); font-size: 12.5px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2); cursor: pointer;
}
.chip:hover { border-color: var(--line-strong); color: var(--text); }
.chip.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); font-weight: 600; }
.chip .n { color: var(--text-3); font-size: 11.5px; }

/* ---------- 5. Surfaces ---------- */
.card {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 16px; margin: 12px 0;
}
.card.flat { background: none; }
.card > h3:first-child { margin-top: 0; }

.section-head { display: flex; align-items: center; gap: 12px; margin: 26px 0 12px; }
.section-head:first-child { margin-top: 0; }
.section-head h3 { margin: 0; }
.section-head .hint { margin: 0; }

.item {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 10px;
}
.item.clickable { cursor: pointer; transition: border-color .13s ease, background .13s ease; }
.item.clickable:hover { border-color: var(--line-strong); background: var(--bg-2); }
.item .title { font-weight: 600; margin-bottom: 3px; }
.item .meta { color: var(--text-3); font-size: 12.5px; }
.item .theme { margin-top: 6px; white-space: pre-wrap; }

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid.wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 54px 24px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--text-3);
}
.empty .ic { width: 30px; height: 30px; stroke-width: 1.4; color: var(--text-3); }
.empty strong { color: var(--text-2); font-weight: 600; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; padding: 2px 9px; border-radius: var(--r-full);
  border: 1px solid var(--line); color: var(--text-3); background: var(--bg-2);
  white-space: nowrap;
}
.badge.ok { color: var(--ok); border-color: rgba(62, 213, 152, .3); background: var(--ok-soft); }
.badge.err { color: var(--err); border-color: rgba(255, 107, 122, .3); background: var(--err-soft); }
.badge.warn { color: var(--warn); border-color: rgba(240, 180, 41, .3); background: var(--warn-soft); }

.bar { height: 5px; background: var(--bg-3); border-radius: var(--r-full); overflow: hidden; margin: 10px 0 5px; }
.bar > div { height: 100%; width: 0; background: var(--accent); border-radius: var(--r-full); transition: width .25s ease; box-shadow: 0 0 8px rgba(var(--accent-rgb), .6); }
.item.done .bar > div, .item.failed .bar > div, .item.degraded .bar > div, .item.warned .bar > div { box-shadow: none; }
.item.done .bar > div { background: var(--ok); }
.item.failed .bar > div { background: var(--err); }
.item.degraded .bar > div, .item.warned .bar > div { background: var(--warn); }
/* Boucle n°2 : barre indeterminee. UNIQUEMENT quand le total est inconnu.
   Une bande de 30 % qui traverse la piste. Une boucle ne doit jamais mentir :
   tant qu'elle tourne, le journal dit en clair ce qu'on attend. */
.bar.pulse { position: relative; }
.bar.pulse > div {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 30% !important; border-radius: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: indet 1.7s linear infinite;
  transition: none;
}
@keyframes indet { from { transform: translateX(-110%); } to { transform: translateX(330%); } }

.log { color: var(--text-3); font: 12px/1.55 var(--font-mono); margin-top: 8px; white-space: pre-wrap; }
.alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-radius: var(--r-sm); margin: 12px 0;
  font-size: 13px; border: 1px solid var(--line); background: var(--bg-1);
}
.alert .ic { margin-top: 1px; }
.alert.warn { background: var(--warn-soft); border-color: rgba(240, 180, 41, .32); color: var(--warn); }
.alert.err { background: var(--err-soft); border-color: rgba(255, 107, 122, .32); color: var(--err); }
.alert.info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text-2); }
.summary { white-space: pre-wrap; }

/* ---------- 6. Ecran Sources ---------- */
.dropzone {
  position: relative;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-1);
  padding: 34px 24px; text-align: center;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover { border-color: var(--accent-line); }
.dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone .halo {
  width: 54px; height: 54px; border-radius: var(--r-md); margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
}
.dropzone.over .halo { background: var(--spectrum); border-color: transparent; }
.dropzone .halo .ic { width: 24px; height: 24px; color: var(--text-2); }
.dropzone.over .halo .ic { color: var(--accent-ink); }
.dropzone h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.dropzone .formats { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.dropzone .row { justify-content: center; }
.dropzone .or { display: flex; align-items: center; gap: 12px; margin: 18px auto 0; max-width: 380px; color: var(--text-3); font-size: 12px; }
.dropzone .or::before, .dropzone .or::after { content: ''; height: 1px; background: var(--line); flex: 1; }

/* Zone de collage des liens, repliable */
.linkbox textarea { font: 12px/1.8 var(--font-mono); min-height: 130px; }

/* File d'attente : une ligne par source en partance, avec son dossier */
.queue { display: flex; flex-direction: column; gap: 8px; }
.qitem {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 10px 12px;
}
.qitem.invalid { border-color: rgba(var(--err-rgb), .4); }
.qitem .thumb {
  width: 76px; height: 43px; border-radius: 6px; flex: none;
  background: var(--bg-3); object-fit: cover; display: grid; place-items: center;
  border: 1px solid var(--line);
}
.qitem .thumb .ic { color: var(--text-3); }
.qitem .who { flex: 1; min-width: 0; }
.qitem .who .t { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qitem .who .s { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qitem select { max-width: 190px; font-size: 12.5px; padding: 6px 9px; }
.qbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px;
}

/* En-tete d'une playlist depliee dans la file : ses videos suivent, en retrait,
   chacune avec son dossier. Le selecteur de l'en-tete range tout d'un coup. */
.qgroup {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 8px; margin-top: 4px;
  color: var(--text-2); border-bottom: 1px solid var(--line-soft);
}
.qgroup > .ic { color: var(--accent); }
.qgroup .who { flex: 1; min-width: 0; }
.qgroup .who .t { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qgroup .who .s { font-size: 12px; color: var(--text-3); }
.qgroup select { max-width: 190px; font-size: 12.5px; padding: 6px 9px; }
.qitem.grouped { margin-left: 18px; }
.qitem.warned { border-color: rgba(255, 200, 87, .4); }
.qitem .who .bar { margin: 6px 0 0; max-width: 260px; }
/* Tri d'une grosse file : case par ligne (Maj+clic coche une plage), filtre par titre,
   et « Reste à ranger » pour ne voir que les sources encore sans dossier. */
.qitem.picked { border-color: var(--accent-line); background: var(--bg-2); }
.qitem .qpick, .qgroup .qpick { flex: none; }
.qitem .qactions { display: flex; gap: 6px; flex: none; }
.qfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.qfilter .search { flex: 1 1 260px; max-width: 420px; }
.qitem .who .s.why { white-space: normal; color: var(--warn); }


/* Cartes de progression du lot */
.runcard { position: relative; }
.runcard .phase { color: var(--text-3); font-size: 12.5px; }
.runcard .actions { gap: 8px; margin-top: 10px; }

/* ---------- 7. Ecran Dossiers ---------- */
.tile {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); overflow: hidden; cursor: pointer; text-align: left;
  padding: 0; transition: border-color .13s ease, transform .1s ease, box-shadow .13s ease;
}
.tile:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-2); background: var(--bg-1); }
.tile .strip { height: 4px; background: var(--spectrum); opacity: .85; }
.tile .body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tile .name { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.tile .theme {
  color: var(--text-3); font-size: 12.5px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile .foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.tile .stat { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-2); }
.tile .stat .ic { width: 14px; height: 14px; color: var(--text-3); }
.tile.new {
  border-style: dashed; background: none; align-items: center; justify-content: center;
  min-height: 150px; color: var(--text-3); gap: 9px; padding: 20px;
}
.tile.new:hover { border-color: var(--accent-line); color: var(--text-2); transform: none; box-shadow: none; }
.tile.new .ic { width: 22px; height: 22px; }

/* Anneau de progression des fiches d'un dossier */
.ring { --p: 0; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--bg-3) 0); }
.ring span { width: 26px; height: 26px; border-radius: 50%; background: var(--bg-1); display: grid; place-items: center; font-size: 10px; color: var(--text-2); }

/* ---------- 8. Ecran Bibliotheque ---------- */
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md);
  position: sticky; top: var(--topbar); z-index: 10;
}
.filters { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar > select { flex: 1 1 150px; min-width: 0; }

.srccard {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 14px; margin-bottom: 10px;
  transition: border-color .13s ease;
}
.srccard:hover { border-color: var(--line-strong); }
.srccard.selected { border-color: var(--accent-line); background: var(--bg-2); }
.srccard .pick { margin-top: 3px; }
.srccard .kindicon {
  width: 38px; height: 38px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line);
}
/* La teinte dit le type (2026-10-05) : video corail, document ambre. Un PDF n'est
   plus rouge, le rouge est la couleur de l'echec partout ailleurs. */
.srccard .kindicon { background: var(--c-video-soft); border-color: var(--c-video-line); }
.srccard .kindicon .ic { color: var(--c-video); }
.srccard .kindicon.pdf { background: var(--c-doc-soft); border-color: var(--c-doc-line); }
.srccard .kindicon.pdf .ic { color: var(--c-doc); }
.srccard.video { border-left: 3px solid var(--c-video-line); }
.srccard.pdf { border-left: 3px solid var(--c-doc-line); }
.qitem .thumb .ic { color: var(--c-video); }
.tile.synth .strip { background: var(--c-synth); opacity: 1; }
.card.suivi { border-left: 3px solid var(--c-suivi-line); }
.suivi .top > .ic, .suivi .top .t .ic { color: var(--c-suivi); }
.navlink[data-tab="syntheses"] .ic { color: inherit; }
.srccard .body { flex: 1; min-width: 0; }
.srccard .title { font-weight: 600; margin-bottom: 3px; }
.srccard .meta { color: var(--text-3); font-size: 12.5px; }
.srccard .actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

/* Vue grille de la bibliotheque */
.lib-grid .srccard { flex-direction: column; gap: 10px; }
.lib-grid .srccard .actions { margin-top: auto; }

/* Barre d'actions sur selection multiple */
.selbar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; z-index: 30;
  background: var(--bg-3); border: 1px solid var(--line-strong);
  border-radius: var(--r-full); padding: 9px 10px 9px 18px;
  box-shadow: var(--shadow-3);
}
.selbar .n { font-size: 13px; font-weight: 600; }
.selbar .n, .selbar button { white-space: nowrap; }
.selbar select { width: auto; }

/* ---------- 9. Ecran Reglages ---------- */
.settings { display: flex; gap: 26px; align-items: flex-start; }
.settings-nav {
  width: 190px; flex: none; position: sticky; top: calc(var(--topbar) + 26px);
  display: flex; flex-direction: column; gap: 2px;
}
.settings-nav button {
  justify-content: flex-start; background: none; border: 0; color: var(--text-3);
  padding: 8px 11px; border-radius: var(--r-sm); font-size: 13px; width: 100%; text-align: left;
}
.settings-nav button:hover:not(:disabled) { background: var(--bg-2); color: var(--text-2); }
.settings-nav button.on { background: var(--bg-2); color: var(--text); font-weight: 600; }
.settings-body { flex: 1; min-width: 0; }
.setgroup { display: none; }
.setgroup.on { display: block; }
.setgroup > h3:first-child { margin-top: 0; }

/* Ligne de reglage : intitule a gauche, controle a droite */
.setrow {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
.setrow:last-child { border-bottom: 0; }
.setrow .what { flex: 1; min-width: 230px; }
.setrow .what strong { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 2px; }
.setrow .what .hint { margin: 0; }
.setrow .ctl { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }

.procbox { background: var(--bg-0); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin: 10px 0; }
.procbox .log { max-height: 180px; overflow: auto; margin: 0; }

/* ---------- 10. Fiche ---------- */
.crumb { display: flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; margin-bottom: 14px; }
.crumb a { color: var(--text-3); }
.crumb a:hover { color: var(--accent); text-decoration: none; }

h2.big { font-size: 24px; letter-spacing: -.3px; margin: 8px 0 6px; line-height: 1.25; }
h4.topic { font-size: 13px; color: var(--accent); margin: 22px 0 8px; font-weight: 650; letter-spacing: .2px; }
h4.topic.dim { color: var(--text-3); }

/* Lecteur. Deux mouvements, et deux seulement :
   - il se DEPLIE quand on clique un horodatage (§ 7.1) ;
   - il VOYAGE vers son coin quand on le reduit (§ 7.2) : le meme element
     se deplace, il ne disparait pas pour reapparaitre, et la video ne
     s'interrompt jamais. Le voyage est fait en JS (mesure puis position
     fixe), la transition est ici. */
.player {
  position: sticky; top: calc(var(--topbar) + 8px); z-index: 12;
  background: #000; border-radius: var(--r-md); overflow: hidden;
  max-width: 720px; margin: 10px 0 16px;
  box-shadow: var(--shadow-3); border: 1px solid var(--line);
  transition: max-height var(--m-panel) var(--e-out), opacity 180ms var(--e-out);
}
/* Deplie : la hauteur est liberee une fois l'ouverture finie (voir JS). */
.player.folded { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
.playerbar { display: flex; align-items: center; gap: 7px; padding: 5px 7px 5px 12px; background: var(--bg-2); }
.player .frame { aspect-ratio: 16 / 9; }
.player iframe { width: 100%; height: 100%; border: 0; display: block; }
/* PDF : la page remplace la video. Hauteur libre (une page de notes est haute),
   plafonnee a l'ecran. */
.player .frame.doc { aspect-ratio: auto; max-height: 78vh; overflow: auto; background: var(--bg-3); }
.player .frame.doc img { width: 100%; display: block; min-height: 120px; }
.player.mini .frame.doc { max-height: 42vh; }
/* Une affirmation qui cite une note manuscrite : filet a gauche, couleur des opinions (la voix de l'auteur). */
.claim.handwritten { border-left: 2px solid var(--t-opinion); padding-left: 10px; }
.doubt .kept .badge { margin-right: 6px; }

/* Chat de la fiche : demander a Claude une explication ou une modification */
.chatbox { display: flex; flex-direction: column; gap: 10px; }
.chathead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.chathead > .ic { color: var(--accent); align-self: center; }
.chatlog { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 4px; }
.chatmsg { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 8px 11px; background: var(--bg-1); max-width: 92%; }
.chatmsg.user { align-self: flex-end; background: var(--bg-2); border-color: var(--line); }
.chatmsg.claude { align-self: flex-start; }
.chatmsg.app { align-self: center; background: none; border-style: dashed; }
.chatmsg.error { border-color: rgba(var(--err-rgb), .4); }
.chatmsg .who { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.chatmsg.claude .who { color: var(--accent); }
.chatmsg .text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
.chatmsg .change { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.chatinput { display: flex; gap: 8px; align-items: flex-end; }
.chatinput textarea { flex: 1; min-height: 44px; resize: vertical; }
.chatrun .bar { margin: 2px 0 6px; }
@media (max-width: 760px) {
  .chatinput { flex-direction: column; align-items: stretch; }
  .chatmsg { max-width: 100%; }
}
/* Pendant le trajet, l'element est en position fixe et ses coordonnees sont animees. */
.player.travel { position: fixed; margin: 0; max-width: none; z-index: 25; }
.player.travel.moving { transition: top var(--m-travel) var(--e-inout), left var(--m-travel) var(--e-inout), width var(--m-travel) var(--e-inout); }
/* Reduit : un coin de l'ecran, laisse lire la fiche. */
.player.mini { z-index: 25; }
/* Place reservee dans le flux pendant que le lecteur voyage : le texte ne saute pas. */
.playerslot { height: 0; transition: height var(--m-travel) var(--e-inout); }
.playerslot.on { margin: 10px 0 16px; max-width: 720px; }

.section { margin: 0 0 22px; }
.steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.step {
  flex: 1 1 210px; min-width: 210px; background: var(--bg-1); border: 1px solid var(--line-soft);
  border-top: 3px solid var(--accent); border-radius: var(--r-sm); padding: 12px 14px; font-size: 13px;
}
.step .head { display: flex; align-items: center; gap: 9px; }
.step .n {
  width: 21px; height: 21px; line-height: 21px; text-align: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; flex: none;
}
.step .name { font-weight: 600; }
.step .dur { color: var(--text-3); font-size: 12px; margin: 5px 0 0; }
.step .goal { font-style: italic; margin: 7px 0 0; }
.step .desc { color: var(--text-2); margin: 5px 0 0; }

.tablewrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line-soft); border-radius: var(--r-sm); }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tablewrap th, .tablewrap td { border-bottom: 1px solid var(--line-soft); padding: 9px 12px; text-align: left; vertical-align: top; }
.tablewrap tr:last-child td { border-bottom: 0; }
.tablewrap th { background: var(--bg-2); color: var(--text-2); font-weight: 600; }
.section ul { margin: 8px 0; padding-left: 22px; }
.section li { margin-bottom: 4px; }

.sources { color: var(--text-3); font-size: 12px; margin-top: 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sources.unsourced { color: var(--err); }

.claim {
  background: var(--bg-1); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 12px 14px; margin-bottom: 9px;
}
.claim .num { color: var(--text-3); font: 500 10.5px var(--font-mono); margin-right: 7px; }
.type {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--t-fait); border-radius: 4px; padding: 2px 7px; margin-right: 8px; vertical-align: 2px; font-weight: 600;
}
.type.chiffre { color: var(--t-chiffre); }
.type.recommandation { color: var(--t-reco); }
.type.opinion { color: var(--t-opinion); }
.type.experience { color: var(--t-exp); }
.note { color: var(--text-3); font-size: 12.5px; margin-top: 6px; }
.quote { color: var(--text-2); font-size: 12.5px; font-style: italic; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 9px; align-items: baseline; }
.tc {
  font: 500 11.5px var(--font-mono); font-style: normal; padding: 3px 8px; border-radius: 5px;
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line); cursor: pointer;
}
.tc:hover { background: rgba(var(--accent-rgb), .2); }
.verif { font-style: normal; font-size: 12px; white-space: nowrap; }
.verif.exact { color: var(--ok); }
.verif.approx { color: var(--warn); }
.verif.none { color: var(--err); }

.gen .steps-log { color: var(--text-3); font: 12px/1.6 var(--font-mono); margin-top: 8px; white-space: pre-wrap; max-height: 160px; overflow: auto; }
.gen .result { white-space: pre-wrap; margin-top: 10px; }

/* ---- Syntheses : plusieurs sources croisees ----
   La lettre de source (A, B, C...) est la cle de lecture : legende, ancres
   « B·12:04 », annexe. Deux registres distincts : le rapporte (ancres, comme
   sur la fiche) et la mise en relation (encadre a filet, jamais confondu avec
   une preuve). Une mise en relation refusee reste visible, en pointille. */
.letter {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; flex: none;
  border-radius: 5px; background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-text); font: 600 11px var(--font-mono); margin-right: 8px;
}
.tile .letters { display: flex; gap: 4px; flex-wrap: wrap; }
.tile .letters .letter { margin-right: 0; }
.synsrc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.synsrc li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.synsrc li:last-child { border-bottom: 0; }
.synsrc li .t { font-weight: 600; }
.synsrc.legend li .m { display: block; font-size: 12px; margin: 1px 0 0; }
.synsrc li .acts { display: flex; gap: 6px; }
.plan { margin: 4px 0 8px; padding-left: 20px; }
.plan li { margin-bottom: 4px; }
h3.synpart { font-family: var(--font-display); font-size: 18px; margin: 28px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.marker {
  display: inline-block; margin-left: 10px; padding: 1px 7px; border-radius: var(--r-full); vertical-align: 1px;
  font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-3); border: 1px solid var(--line);
}
.marker.convergent { color: var(--ok); border-color: rgba(61, 220, 151, .3); }
.marker.divergent { color: var(--warn); border-color: rgba(255, 200, 87, .3); }
.marker.none { color: var(--err); border-color: rgba(var(--err-rgb), .3); }
.synlink {
  border: 1px solid var(--line); border-left: 3px solid var(--t-fait); border-radius: var(--r-sm);
  padding: 9px 12px; margin: 10px 0; background: var(--bg-1); font-size: 13.5px;
}
.synlink.convergence { border-left-color: var(--ok); }
.synlink.divergence { border-left-color: var(--warn); }
.synlink.refusee { border-style: dashed; border-left-width: 1px; color: var(--text-3); background: none; }
.synlink .k { font: 600 10px var(--font-mono); text-transform: uppercase; letter-spacing: .6px; color: var(--text-3); margin-right: 8px; }
.synlink.convergence .k { color: var(--ok); }
.synlink.divergence .k { color: var(--warn); }
.synlink .refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 12px; }
.synlink .why { color: var(--err); font-size: 12px; margin-top: 5px; }
a.ref { font: 500 11px var(--font-mono); color: var(--text-3); }
a.ref:hover { color: var(--accent); }
.tc.missing { border-color: rgba(var(--err-rgb), .4); color: var(--err); background: var(--err-soft); }
.claim.flash { border-color: var(--accent-line); background: var(--bg-2); }

/* ---------- 11. Fenetre modale ---------- */
.backdrop {
  position: fixed; inset: 0; background: var(--veil); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 40; padding: 20px;
}
.modal {
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  width: 100%; max-width: 520px; max-height: 88vh; overflow: auto;
}
.modal .head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.modal .head h3 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.modal .body { padding: 16px 20px; }
.modal .foot { display: flex; justify-content: flex-end; gap: 9px; padding: 0 20px 18px; }

/* ---------- 11 bis. Messages de l'app (2026-10-05) ----------
   Plus de alert()/confirm() natifs : un mot en bas de l'ecran qui s'efface seul,
   et une vraie fenetre de confirmation (openModal). */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 50; width: min(520px, calc(100% - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-3); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: var(--r-md); padding: 10px 10px 10px 14px; font-size: 13px; line-height: 1.45;
  box-shadow: var(--shadow-3); animation: toast-in var(--m-quick) var(--e-out);
}
.toast > .ic { flex: none; margin-top: 2px; color: var(--ok); }
.toast.err > .ic { color: var(--err); }
.toast.err { border-color: rgba(var(--err-rgb), .45); }
.toast > span { flex: 1; white-space: pre-wrap; }
.toast > button { flex: none; margin: -4px -4px -4px 0; }
.toast.out { opacity: 0; transition: opacity 180ms var(--e-exit); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .toasts { bottom: 78px; } }
.modal .body p { margin: 0 0 10px; } .modal .body p:last-child { margin-bottom: 0; }

/* ---------- 12. Petits ecrans ---------- */
@media (max-width: 900px) {
  .settings { flex-direction: column; gap: 14px; }
  .settings-nav { width: 100%; position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .settings-nav button { width: auto; white-space: nowrap; }
  /* En colonne, le corps prenait sa largeur intrinseque (le chemin du dossier de
     donnees ne se coupe pas) et la page debordait a droite sur telephone. */
  .settings-body { width: 100%; max-width: 100%; }
  .settings-body code.grow { min-width: 0; overflow-wrap: anywhere; }
}

@media (max-width: 760px) {
  .app { flex-direction: column; }
  /* La barre laterale devient une barre d'onglets en bas, au pouce */
  .sidebar {
    order: 2; width: 100%; height: auto; position: fixed; bottom: 0; left: 0; top: auto;
    flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    border-right: 0; border-top: 1px solid var(--line);
    background: var(--bg-blur);
  }
  .brand, .sidefoot { display: none; }
  .nav { flex-direction: row; width: 100%; gap: 2px; }
  .navlink { flex-direction: column; gap: 3px; padding: 7px 4px; font-size: 10.5px; justify-content: center; text-align: center; }
  .navlink.active::before { left: 50%; top: -6px; transform: translateX(-50%); width: 20px; height: 3px; border-radius: 0 0 3px 3px; }
  .navlink .count { display: none; }

  .topbar { padding: 0 16px; height: 54px; }
  .topbar h2 { font-size: 16px; }
  .topbar .sub { display: none; }
  .content { padding: 18px 16px 96px; }
  .toolbar { position: static; }

  .dropzone { padding: 26px 16px; }
  .qitem { flex-wrap: wrap; }
  .qitem .who { flex: 1 1 calc(100% - 70px); }
  .qitem select { max-width: none; flex: 1 1 auto; width: auto; }
  .qitem .thumb { width: 58px; height: 33px; }
  .qgroup { flex-wrap: wrap; }
  .qgroup .who { flex: 1 1 calc(100% - 70px); }
  .qgroup select { max-width: none; flex: 1 1 auto; width: auto; }
  .qitem.grouped { margin-left: 10px; }

  input[type=password] { min-width: 0; width: 100%; }
  .setrow { align-items: flex-start; flex-direction: column; gap: 9px; }
  .setrow .ctl { width: 100%; }

  .player:not(.mini) { position: static; }
  .player.mini { width: 232px; right: 10px; bottom: 74px; }
  .selbar { bottom: 74px; padding: 8px 8px 8px 14px; gap: 9px; flex-wrap: wrap; justify-content: center;
    width: calc(100% - 20px); border-radius: var(--r-md); }
  h2.big { font-size: 20px; }
}

/* =======================================================================
   13. Mouvement — d'apres la remise de design, « Triathlon KB - mouvement »
   Principe directeur : rien ne bouge pendant la lecture. Le mouvement n'a
   que trois droits : dire d'ou vient une chose (origine), montrer qu'un
   travail avance, confirmer qu'un etat a change.
   ======================================================================= */

/* ---- § 7.10 Survol : instantane, jamais spectaculaire ---- */
.navlink, .chip, .tile, .item, .srccard, .qitem, .card, .tc, .badge {
  transition: background-color var(--m-instant) var(--e-out),
              border-color var(--m-instant) var(--e-out),
              color var(--m-instant) var(--e-out);
}
.tile { transition: background-color var(--m-instant) var(--e-out), border-color var(--m-instant) var(--e-out), transform var(--m-quick) var(--e-out), box-shadow var(--m-quick) var(--e-out); }

/* ---- § 7.1 Horodatage actif : la puce reste allumee tant que le lecteur est ouvert ---- */
.tc.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: var(--glow-sm); }
.tc.approx { border-style: dashed; background: transparent; }

/* ---- § 7.3 Colonne repliee : 260 ms, libelles en opacite sur 90 ms ----
   Le texte part AVANT que la place ne manque, sinon il se compresse et scintille. */
.sidebar { transition: width var(--m-panel) var(--e-out); }
.navlink span, .brand .name, .brand .tag, .sidefoot .line span:last-child, .shoplabel {
  transition: opacity var(--m-instant) linear;
  white-space: nowrap;
}
/* min-width:auto sur un element flex bloque la largeur au contenu : sans
   min-width:0 la colonne refuse de se replier sous la taille de ses libelles. */
.app.railed .sidebar { width: var(--rail-min); min-width: 0; overflow: hidden; padding-left: 8px; padding-right: 8px; }
/* Un libelle a opacite nulle occupe TOUJOURS sa largeur : avec un contenu
   centre, il poussait les icones hors de la colonne (x negatif) et plus rien
   n'etait cliquable. On lui retire aussi sa place, et on aligne a gauche. */
.app.railed .navlink span, .app.railed .brandtext, .app.railed .sidefoot .line span:last-child,
.app.railed .shoplabel, .app.railed .navlink .count {
  opacity: 0; pointer-events: none;
  max-width: 0; overflow: hidden; white-space: nowrap; display: inline-block; margin-left: 0;
}
.app.railed .navlink { justify-content: flex-start; padding-left: 6px; padding-right: 0; }
.app.railed .navlink .ic { color: var(--text-2); }
.app.railed .navlink.active .ic { color: var(--accent); }
.app.railed .brand { justify-content: flex-start; padding-left: 6px; padding-right: 0; gap: 0; }
.app.railed .shop .bar, .app.railed .shop .shopfoot { display: none; }
.app.railed .shop { padding: 7px 6px; justify-content: center; }
.railtoggle { margin-left: auto; }
/* Repliee, la colonne DOIT garder un moyen visible de la rouvrir : sans ca on
   s'y enferme. Le chevron reste, il pivote pour montrer le sens. */
.app.railed .railtoggle { margin: 0; }
.app.railed .railtoggle .ic { transform: rotate(180deg); }
.app.railed .brand .mark { display: none; }
.app.railed .brand { padding-bottom: 14px; }

/* ---- § 5.2 / § 7.4 Tuile Atelier : l'usine reste visible pendant qu'on lit ailleurs ---- */
.shop {
  margin-top: 10px; background: var(--bg-2);
  border: 1px solid var(--accent-line); border-radius: var(--r-card, 10px);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 8px;
}
.shop .head { display: flex; align-items: center; gap: 9px; }
.shop .name { font-weight: 600; font-size: 11.5px; flex: 1; }
.shop .count { font: 500 10.5px var(--font-mono); color: var(--text-3); }
.shop .phase { font: 400 10.5px/1.45 var(--font-mono); color: var(--text-3); word-break: break-all; }
/* Le titre de l'episode en cours peut etre long : deux lignes au plus, coupe proprement, jamais hors de la colonne. */
.app:not(.railed) .shop .phase { white-space: normal; overflow-wrap: anywhere; word-break: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop .shopfoot { display: flex; gap: 6px; }
.shop .shopfoot button { flex: 1; padding: 5px 8px; font-size: 12px; }

/* Boucle n°1 : le point de l'atelier. Tourne TANT QUE l'atelier travaille. */
.dot.live { background: var(--accent); animation: pulseDot 1.6s ease-in-out infinite; }
/* Le halo ne pulse jamais : la boucle est en opacite seule. */
@keyframes pulseDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- Boucle n°3 : le journal ---- */
/* Chaque ligne entre AU MOMENT ou l'evenement arrive, jamais en boucle decorative. */
.logline { animation: logIn var(--m-panel) var(--e-out) both; }
@keyframes logIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.caret { color: var(--accent); animation: caret 1.1s step-end infinite; }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
/* L'attente dite en clair : une boucle qui tourne sans rien dire mentirait. */
.logwait { color: var(--warn); }

/* ---- § 7.5 Changement d'etat : glisse de 4 px, jamais de « pop » ---- */
.badge { transition: color var(--m-quick) linear, background-color var(--m-quick) linear,
                     border-color var(--m-quick) linear, transform var(--m-quick) var(--e-out); }
.badge.changed { animation: badgeSlide var(--m-quick) var(--e-out); }
@keyframes badgeSlide { from { transform: translateY(4px); } to { transform: translateY(0); } }

/* ---- § 7.7 Arrivee d'une fiche : 420 ms, decalage 70 ms, AU PREMIER AFFICHAGE seulement ----
   Aucune apparition au defilement, aucun parallaxe. */
.fiche-in > * { animation: riseIn var(--m-calm) var(--e-out) both; }
.fiche-in > *:nth-child(1) { animation-delay: 0ms; }
.fiche-in > *:nth-child(2) { animation-delay: var(--m-stagger); }
.fiche-in > *:nth-child(3) { animation-delay: calc(var(--m-stagger) * 2); }
.fiche-in > *:nth-child(n+4) { animation-delay: calc(var(--m-stagger) * 3); }
@keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---- § 7.6 Filtre d'annexe : 160 ms + decalage 70 ms, plafonne a 6 items ---- */
.claim.filtered-in { animation: riseSmall var(--m-quick) var(--e-out) both; }
.claim.filtered-in:nth-of-type(1) { animation-delay: 0ms; }
.claim.filtered-in:nth-of-type(2) { animation-delay: var(--m-stagger); }
.claim.filtered-in:nth-of-type(3) { animation-delay: calc(var(--m-stagger) * 2); }
.claim.filtered-in:nth-of-type(4) { animation-delay: calc(var(--m-stagger) * 3); }
.claim.filtered-in:nth-of-type(5) { animation-delay: calc(var(--m-stagger) * 4); }
.claim.filtered-in:nth-of-type(6) { animation-delay: calc(var(--m-stagger) * 5); }
.claim.filtered-in:nth-of-type(n+7) { animation-delay: calc(var(--m-stagger) * 5); }
@keyframes riseSmall { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
/* Le compteur de chaque puce de filtre est affiche en permanence. */
.annexebar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 10px 0 14px; }

/* ---- § 7.8 Ce qui n'a PAS le droit de bouger ----
   Une preuve qui attire l'oeil devient une alerte ; un echec qui tremble
   devient une panique. Ces regles gagnent sur tout le reste. */
.verif, .verif.exact, .verif.approx, .verif.none,
.item.failed, .item.failed *, .badge.err,
.claim .quote, .claim .text, .section .body, .summary {
  animation: none !important;
}
.verif, .item.failed, .badge.err { transition: none !important; }

/* ---- § 7.9 Mouvement reduit : les boucles restent, en opacite seule ---- */
@media (prefers-reduced-motion: reduce) {
  @keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
  @keyframes logIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes riseIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes riseSmall { from { opacity: 0; } to { opacity: 1; } }
  @keyframes badgeSlide { from { opacity: .6; } to { opacity: 1; } }
  .bar.pulse > div { animation: indetFade 1.7s ease-in-out infinite; transform: none; width: 100% !important; }
  @keyframes indetFade { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}

/* ---- § 7.10 Bandeau hors ligne : discret, jamais de modale ---- */
.offline .dot { background: var(--warn); }

@media (max-width: 760px) {
  /* La colonne repliable n'a pas de sens en barre d'onglets. */
  .railtoggle, .shop { display: none; }
  .app.railed .sidebar { width: 100%; padding: 6px; }
  .app.railed .navlink span { opacity: 1; }
}

/* =======================================================================
   14. Typographie de lecture — direction « Nuit electrique » (2026-09-21)
   Syne porte les titres (fiche, dossier, bloc, etape). Atkinson Hyperlegible
   porte la lecture et l'interface. Martian Mono ne sert qu'aux preuves.
   ======================================================================= */

/* Titre de fiche : la reformulation, pas le titre YouTube. */
/* 28 px et 30 caracteres de large (2026-10-05) : a 36 px, un titre prenait cinq lignes. */
h2.big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 28px; line-height: 1.12; letter-spacing: -.02em;
  max-width: 30ch; text-wrap: pretty; color: var(--text-strong);
  margin: 10px 0 8px;
}

/* Libelles de section en mono lettre : « ceci est une rubrique de la machine ». */
/* Gris, pas accent (2026-10-05) : une rubrique n'est pas un geste. Le bleu redevient « cliquable ». */
#vue h3 {
  font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 30px 0 12px;
  display: flex; align-items: center; gap: 12px;
}
#vue h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Titre d'un bloc « Comprendre ». */
h4.topic { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--text-strong); letter-spacing: 0; }
h4.topic.dim { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }

/* Corps de lecture : largeur limitee, serif, interligne genereux. */
.summary, .section .body, #ficheSummary {
  font-family: var(--font-read); font-size: 16px; line-height: 1.7;
  color: var(--text-2); max-width: var(--read-width);
}
#ficheSummary { font-size: 18px; line-height: 1.62; color: var(--text); }
.section ul li { font-family: var(--font-read); font-size: 15px; line-height: 1.68; max-width: var(--read-width); }
.section ul { list-style: none; padding-left: 4px; }
.section ul li::before { content: '◆'; color: var(--accent); font-size: 11px; margin-right: 9px; vertical-align: 1px; }

/* Plaque « Comprendre » : un leger relief, un liseré clair en haut. */
.section {
  background: linear-gradient(180deg, var(--bg-1), var(--panel-deep));
  border: 1px solid var(--line); border-radius: var(--r-plate);
  padding: 20px 22px; margin: 0 0 14px; box-shadow: var(--sh-plate);
}
.section > h4.topic:first-child { margin-top: 0; }
/* Les cartes internes sont TOUJOURS plus sombres que la plaque qui les porte. */
.step, .tablewrap, .claim { background: var(--panel-deep); border-color: var(--line-soft); }

/* Affirmation : texte reformule en serif, citation exacte en italique a filet. */
.claim .text { font-family: var(--font-read); font-size: 14.5px; line-height: 1.65; color: var(--text); }
.claim .note { font-family: var(--font-ui); font-size: 12.5px; color: var(--text-2); }
.quote { font-family: var(--font-read); font-style: italic; font-size: 12.5px; color: var(--text-2); }
.quote .q { border-left: 2px solid var(--line-strong); padding-left: 11px; }
.type { font: 600 10px var(--font-mono); letter-spacing: .1em; background: none; padding: 0; color: var(--t-fait); }
.type.chiffre { background: none; color: var(--t-chiffre); }
.type.recommandation { background: none; color: var(--t-reco); }
.type.opinion { background: none; color: var(--t-opinion); }
.type.experience { background: none; color: var(--t-exp); }
.step .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.step .goal { font-family: var(--font-read); font-style: italic; }
.step .dur { font: 400 9.5px var(--font-mono); }
.step .n { font: 700 11px var(--font-mono); }

/* Ligne « Sources » en pied de plaque. */
.sources { border-top: 1px solid var(--line-faint); padding-top: 10px; }
.sources::before { content: 'SOURCES'; font: 500 10.5px var(--font-mono); letter-spacing: .14em; color: var(--text-3); margin-right: 4px; }
.sources.rapporte::before { content: 'RAPPORTÉ'; }
.sources.unsourced::before { content: ''; margin: 0; }

/* En-tetes de tableau en mono lettre. */
.tablewrap th { font: 500 10px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.tablewrap table { min-width: 500px; }

/* Le bouton « payant / rare » ne doit jamais se confondre avec le geste gratuit. */
.btn-rare, button.rare { border-style: dashed; color: var(--text-3); background: transparent; }

@media (max-width: 760px) {
  h2.big { font-size: 23px; }
  #ficheSummary { font-size: 16px; }
  .section { padding: 16px 15px; }
}

/* ---- Verrou d'abonnement ----
   Le geste payant n'est jamais au meme niveau visuel que le geste gratuit :
   bordure pointillee, encre discrete. Verrou mis, il disparait entierement. */
.lockrow { border: 1px solid var(--accent-line); border-radius: var(--r-md); padding: 13px 15px; background: var(--accent-soft); }
.lockrow .what strong { color: var(--accent-text); }
.switch input:disabled + .track { opacity: .4; cursor: default; }
.switch:has(input:disabled) { cursor: default; }

/* ---- Modifier : selecteur de dossiers, bouton crayon, zone dangereuse ---- */
.picker { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.picker .chip { padding-right: 5px; }
.picker .chip .x {
  background: none; border: 0; padding: 0 2px; margin-left: 2px;
  color: var(--text-3); display: inline-flex; align-items: center;
}
.picker .chip .x:hover { background: none; color: var(--err); }
.picker select { padding: 4px 9px; font-size: 12.5px; }

/* Le crayon d'une tuile : discret, il ne doit pas concurrencer l'ouverture. */
.tile { position: relative; }
.tilepen { position: absolute; top: 10px; right: 8px; opacity: 0; transition: opacity var(--m-instant) var(--e-out); }
.tile:hover .tilepen, .tilepen:focus-visible { opacity: 1; }
/* Sans survol (tactile), le crayon reste visible : sinon il est introuvable. */
@media (hover: none) { .tilepen { opacity: .6; } }

.btn-danger .ic { color: currentColor; }

/* ---- Verrou multi-PC ---- */
.offline.lock { gap: 10px; }
.offline.lock button { padding: 3px 9px; font-size: 12px; }
/* Bandeau « nouvelle version » (2026-09-27) : couleur d'accent, ce n'est pas une alerte */
.offline.maj { color: var(--text-2); background: var(--accent-soft); border-color: var(--accent-line); }
.offline.maj .ic { color: var(--accent); }
/* En lecture seule, les gestes qui ecrivent sont inertes et visiblement tels ;
   le serveur les refuse de toute facon (423). */
body.readonly #start, body.readonly #generate, body.readonly #analyzeMissing,
body.readonly #selAssign, body.readonly #selGenerate, body.readonly .tilepen,
body.readonly .srccard .actions button:not(.btn-ghost),
body.readonly #topActions .primary, body.readonly .tile.new, body.readonly #addLinks,
body.readonly .dropzone, body.readonly .retrans { opacity: .4; pointer-events: none; }

/* ---- Qualite de la transcription (2026-09-26) ----
   Choix du niveau au lancement (Ajouter), listes de vocabulaire (dossiers),
   passages douteux (fiche). Tout ecrit contre les jetons : la bascule
   clair/sombre et la palette s'appliquent sans retouche. */
.levelpick { margin: 16px 0 4px; }
.levelpick .section-head { margin-bottom: 8px; }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.levelcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-2);
  border: 1px solid var(--line); color: var(--text-2); cursor: pointer; min-width: 0;
}
.levelcard:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); }
.levelcard.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.levelcard:disabled { opacity: .5; cursor: not-allowed; }
.levelcard .lname { font-weight: 650; font-size: 13.5px; }
.levelcard .ltime { font-size: 12.5px; color: var(--accent-text); }
.levelcard:disabled .ltime { color: var(--text-3); }
.levelcard .lhint { font-size: 12px; color: var(--text-3); line-height: 1.45; }
#levelNote { margin-top: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }

.quality { margin-top: 12px; }
.quality > summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.quality > summary::marker { color: var(--text-3); }
.quality[open] > summary { margin-bottom: 8px; }
.quality .alert { margin: 8px 0; }
.doubts { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doubt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 10px; align-items: start; }
.doubt .badge { white-space: nowrap; }
.doubt .kept { font-size: 13.5px; }
.doubt .other, .doubt .ctx { font-size: 12px; }
.doubt .ctx { font-style: italic; }
.doubt.fixed .kept { color: var(--text-2); }
.quality .minor { margin-top: 10px; }
.quality .minor > summary { cursor: pointer; }

@media (max-width: 760px) {
  .levels { grid-template-columns: 1fr; }
  .doubt { grid-template-columns: auto minmax(0, 1fr); }
  .doubt .dtext { grid-column: 1 / -1; }
}

.retrans select { max-width: 160px; }

/* ---------- 14. Lecture a distance (2026-10-05) ----------
   Le site publie (src/publication.js, lecture/server.js) sert cette meme
   interface avec body.remote : on lit, rien d'autre. Les gestes d'ecriture
   sont MASQUES (pas grises) : ils n'ont aucun sens la-bas. */
body.remote .navlink[data-tab="sources"], body.remote .navlink[data-tab="reglages"], body.remote .navlink[data-tab="suivis"], body.remote .navlink[data-tab="atelier"],
body.remote .sidefoot, body.remote .shop,
body.remote .tilepen, body.remote .tile.new,
body.remote #editDossier, body.remote #addVideos, body.remote #generate, body.remote #analyzeMissing, body.remote #synthDossier,
body.remote #genPanel, body.remote #selbar, body.remote #libFinish { display: none !important; }

.remotebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 18px; padding: 8px 12px; border-radius: var(--r-md);
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--text-2); font-size: 13px;
}
.remotebar[hidden] { display: none; }
.remotebar > .ic { color: var(--accent); }
.remotebar.offline-copy { background: var(--warn-soft); border-color: rgba(240, 180, 41, .32); }
.remotebar.offline-copy > .ic { color: var(--warn); }
.remotebar .btn, .remotebar button { padding: 3px 10px; font-size: 12px; }

/* Repere de page d'un cours PDF : lisible, sans lien (pages non publiees). */
.tc.static { cursor: default; }
.tc.static:hover { background: var(--accent-soft); }

/* Page de connexion du site de lecture */
body.connexion { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.loginbox { width: 100%; max-width: 380px; text-align: center; padding: 28px 24px; }
.loginbox h1 { font-family: var(--font-display); font-size: 26px; margin: 10px 0 4px; }
.loginmark img { width: 64px; height: 64px; border-radius: 16px; }
.loginbox .alert { text-align: left; margin: 14px 0 0; }
.loginform { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; text-align: left; }
.loginform input { width: 100%; }
.loginform button { justify-content: center; }

/* ---------- 16. Atelier (2026-10-05) : ce qui tourne, ce qui attend, ce qui a fini ----------
   Une seule chronologie pour le lot de transcription et la redaction par Claude.
   La teinte d'objet sur la pastille, l'accent sur la source en cours, rien d'autre. */
.at-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.at-head .hint { font-size: 13px; }
.at-sec { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 10px; margin: 20px 0 8px; }
.at-sec .spacer { flex: 1; }
.at-now {
  background: var(--bg-1); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-md); padding: 14px 16px; display: grid; grid-template-columns: 96px 1fr; gap: 14px;
}
.at-now .thumb { width: 96px; height: 54px; border-radius: 6px; background: var(--bg-3); object-fit: cover; display: grid; place-items: center; border: 1px solid var(--line); }
.at-now .thumb .ic { color: var(--c-video); }
.at-now .ttl { font-weight: 700; font-size: 14px; }
.at-now .ttl .chip { margin-left: 8px; font-weight: 500; }
.at-phases { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 12px; color: var(--text-3); }
.at-ph::before { content: '○ '; }
.at-ph.done { color: var(--ok); } .at-ph.done::before { content: '✓ '; }
.at-ph.on { color: var(--accent-text); font-weight: 700; } .at-ph.on::before { content: '● '; }
.at-now .bar { margin: 6px 0; }
.at-now .log { margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-now .meta { color: var(--text-3); font-size: 12px; }
.at-list { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.at-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.at-row:last-child { border-bottom: 0; }
.at-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row .t .chip { margin-left: 8px; }
.at-row .st { font: 12px var(--font-mono); color: var(--text-3); text-align: center; }
.at-row .st.ok { color: var(--ok); } .at-row .st.err { color: var(--err); } .at-row .st.warn { color: var(--warn); } .at-row .st.on { color: var(--accent-text); }
.at-row .st.suivi { color: var(--c-suivi); }
.at-row .du { font: 11.5px var(--font-mono); color: var(--text-3); white-space: nowrap; }
.at-row .acts { display: flex; gap: 6px; }
.at-row .why { grid-column: 2 / -1; font-size: 12px; color: var(--warn); }
.at-row.skipped .t { color: var(--text-3); text-decoration: line-through; }
.at-foot { padding: 10px 12px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--text-2); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.at-foot b { color: var(--c-synth); font-weight: 600; }
.at-hist summary { cursor: pointer; font-size: 13px; color: var(--text-2); padding: 8px 0; }
.at-hist summary .hint { margin-left: 8px; }
.chip.d { border-color: transparent; background: var(--bg-3); color: var(--text-2); font-size: 11px; padding: 1px 8px; border-radius: var(--r-full); display: inline-block; }
.navlink .count.live { background: var(--accent-soft); color: var(--accent-text); }
.dot.video { background: var(--c-video); } .dot.pdf { background: var(--c-doc); }
body.remote .navlink[data-tab="atelier"] { display: none !important; }
@media (max-width: 760px) {
  .at-now { grid-template-columns: 1fr; }
  .at-row { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .at-row .du:nth-child(3) { display: none; }
  .at-row .acts { grid-column: 2 / -1; }
}

/* ---------- 17. Trois gestes (2026-10-05) : Accueil, bouton Ajouter, bibliotheque unifiee ---------- */
/* Le bouton « Ajouter » : le seul geste primaire de la colonne. */
.navlink.add { background: var(--accent); color: var(--accent-ink); font-weight: 700; margin-bottom: 10px; box-shadow: var(--glow); }
.navlink.add:hover { background: var(--accent-hi); color: var(--accent-ink); }
.navlink.add.active { background: var(--accent-hi); color: var(--accent-ink); }
.navlink.add.active::before { display: none; }
.app.railed .navlink.add { margin-bottom: 10px; }

/* Accueil : des blocs, un geste par bloc. */
.home { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.home .card { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.home .card.wide { grid-column: 1 / -1; }
.home .card > h3 { margin: 0 0 2px; font: 700 12px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.home .line { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-faint); font-size: 13.5px; min-width: 0; }
.home .line:last-of-type { border-bottom: 0; }
.home .line .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home .line .t.wrap { white-space: normal; }
.home .line .k { font: 11.5px var(--font-mono); color: var(--text-3); white-space: nowrap; }
.home .line.link { cursor: pointer; border-radius: 6px; margin: 0 -6px; padding: 7px 6px; }
.home .line.link:hover { background: var(--bg-2); }
.home .big { font: 700 26px/1.1 var(--font-display); color: var(--text-strong); font-variant-numeric: tabular-nums; }
.home .fab { border-left: 3px solid var(--accent); }
.home .chips .chip { gap: 7px; }
.home .empty { grid-column: 1 / -1; }
.mascotte { width: 96px; height: 96px; display: block; margin: 0 auto 4px; }
.empty .mascotte { width: 110px; height: 110px; }
.at-suivis .card { margin: 0; }

/* Couleur du dossier : la pastille, la bande de la tuile, la puce. Huit teintes, jamais un fond. */
.dotc { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--dc, var(--text-3)); }
.d-sable { --dc: var(--d-sable); } .d-rose { --dc: var(--d-rose); } .d-lavande { --dc: var(--d-lavande); } .d-menthe { --dc: var(--d-menthe); }
.d-ciel { --dc: var(--d-ciel); } .d-olive { --dc: var(--d-olive); } .d-corail { --dc: var(--d-corail); } .d-ardoise { --dc: var(--d-ardoise); }
.tile .strip { background: var(--dc, var(--spectrum)); opacity: 1; }
.tile.synth .strip { background: var(--c-synth); }
.badge .dotc { margin-right: 1px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: var(--dc); cursor: pointer; padding: 0; }
.swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg-1); }
.swatch:focus-visible { outline: 2px solid var(--accent); }

/* Bibliotheque unifiee : dossiers en colonne a gauche (en ligne de puces sur petit ecran). */
.lib-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start; }
.libnav { position: sticky; top: calc(var(--topbar) + 26px); display: flex; flex-direction: column; gap: 2px; }
.libnav .h { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px 4px; }
.libnav .h:first-child { padding-top: 0; }
.libnav button {
  justify-content: flex-start; background: none; border: 0; color: var(--text-2); gap: 9px;
  padding: 7px 10px; border-radius: var(--r-sm); font-size: 13px; width: 100%; text-align: left;
}
.libnav button .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libnav button .n { font: 11.5px var(--font-mono); color: var(--text-3); }
.libnav button:hover:not(:disabled) { background: var(--bg-2); color: var(--text); }
.libnav button.on { background: var(--bg-2); color: var(--text); font-weight: 600; }
.libnav button.on .n { color: var(--text-2); }
.libnav button.ghost { color: var(--text-3); font-size: 12.5px; }
.libmain { min-width: 0; }
#libDossier { display: none; }
@media (max-width: 900px) {
  .lib-layout { grid-template-columns: 1fr; gap: 10px; }
  .libnav { position: static; flex-direction: row; overflow-x: auto; gap: 4px; padding-bottom: 4px; scrollbar-width: thin; }
  .libnav .h { display: none; }
  .libnav button { width: auto; white-space: nowrap; flex: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-full); }
  .libnav button.on { border-color: var(--accent-line); background: var(--accent-soft); }
}

/* ---------- 18. Fiche : lire d'abord (2026-10-05) ----------
   Le texte au centre, a largeur de lecture ; a droite, le rail : anneau de
   verification, sommaire, lu / a relire, dossier, Claude, qualite. Sous 1100 px
   le rail passe SOUS la lecture, et « Demander a Claude » devient un bouton flottant. */
.fiche-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: start; }
.fiche-main { min-width: 0; }
.fiche-main .section, .fiche-main .claim, .fiche-main .tablewrap, .fiche-main .alert, .fiche-main .chatbox { max-width: 780px; }
.fiche-main .section, #annexe, #chatBox { scroll-margin-top: calc(var(--topbar) + 14px); }
.fiche-rail { display: flex; flex-direction: column; gap: 14px; font-size: 13px; min-width: 0; }
@media (min-width: 1100px) {
  .fiche-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .fiche-rail { position: sticky; top: calc(var(--topbar) + 16px); max-height: calc(100vh - var(--topbar) - 32px); overflow-y: auto; padding-right: 2px; }
}
.rail-ring { display: flex; align-items: center; gap: 12px; }
.rail-ring strong { display: block; font-size: 13.5px; }
.ring.big { width: 54px; height: 54px; }
.ring.big span { width: 44px; height: 44px; font: 600 12px var(--font-mono); }
.ring.warn { background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--warn) calc(var(--p) * 1%), var(--warn) calc(var(--q) * 1%), var(--bg-3) 0); }
.rail-toc { display: flex; flex-direction: column; gap: 1px; }
.rail-toc .h, .fiche-rail .h { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); padding: 4px 0 4px; }
.rail-toc button { justify-content: flex-start; background: none; border: 0; color: var(--text-2); padding: 5px 8px; font-size: 12.5px; text-align: left; border-radius: 6px; width: 100%; }
.rail-toc button .n { color: var(--text-3); font: 11px var(--font-mono); margin-right: 7px; flex: none; }
.rail-toc button .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-toc button:hover { background: var(--bg-2); color: var(--text); }
.rail-lecture { display: flex; gap: 6px; flex-wrap: wrap; }
.rail-lecture button.on { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); }
.rail-lecture button.on.relire { border-color: var(--warn); color: var(--warn); background: var(--warn-soft); }
.fiche-rail .quality { margin-top: 0; }
.fiche-rail .picker { margin-top: 4px; }
.chatfab { position: fixed; right: 16px; bottom: 84px; z-index: 30; border-radius: var(--r-full); box-shadow: var(--shadow-3); padding: 10px 16px; }
@media (min-width: 1100px) { .chatfab { display: none; } }
@media (min-width: 761px) and (max-width: 1099px) { .chatfab { bottom: 22px; } }
.badge.lu { color: var(--ok); border-color: rgba(61, 220, 151, .3); background: var(--ok-soft); }
.badge.relire { color: var(--warn); border-color: rgba(255, 200, 87, .3); background: var(--warn-soft); }

/* Recherche plein texte : une carte par source, un passage par ligne, cliquable. */
.deep { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 12px; }
.hits { display: flex; flex-direction: column; gap: 10px; }
.hit { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 14px; }
.hit .t { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hit .t .hint { font-weight: 400; }
.hit .x { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line-faint); font-size: 13px; cursor: pointer; margin-top: 4px; }
.hit .x:hover .ex { color: var(--text); }
.hit .x .w { font: 500 10px var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; min-width: 86px; }
.hit .x .ex { color: var(--text-2); font-family: var(--font-read); line-height: 1.5; }
.hit .x .tc { flex: none; }
.hit mark { background: rgba(var(--accent-rgb), .22); color: inherit; border-radius: 3px; padding: 0 2px; }

/* Selection (2026-10-05) : cases plus grandes, toute la ligne cliquable, Maj+clic pour une plage. */
input[type=checkbox] { width: 18px; height: 18px; }
label.check.small { font-size: 12.5px; color: var(--text-2); gap: 7px; white-space: nowrap; }
.srccard.selectable { cursor: pointer; }
.srccard.selectable .actions, .srccard.selectable a, .srccard.selectable .pick { cursor: default; }
.selbar .seg button { padding: 4px 9px; }
/* Dans la file, une source sans dossier porte une bande ambre : on la repere sans lire. */
.qitem.norank { border-left: 3px solid var(--c-doc-line); }
.qfilter .hint.key { color: var(--text-4); }

/* ---------- 15. Sources suivies (2026-10-05) ---------- */
.suivihead .row { flex-wrap: wrap; }
.suivi .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.suivi .top .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.suivi .counts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.suivi .eps { margin-top: 10px; }
.suivi .eps li { flex-wrap: wrap; }
.suivi .eps .t { flex: 1 1 200px; min-width: 0; }
.suivi .eps .why { flex-basis: 100%; font-size: 12px; }
.suivi .alert { margin: 8px 0 0; }
.optlist { display: flex; flex-direction: column; gap: 8px; }
.opt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.opt input[type=radio] { accent-color: var(--accent); margin: 0; }
.opt input[type=number] { width: 70px; }

/* ---------- 19. Lire mieux (2026-10-05) : mes notes, mode lecture, revision ---------- */

/* Surlignage : un fond ambre sur le texte, rien d'autre. Une note accrochee = un trait dessous. */
mark.hl { background: var(--hl); color: inherit; border-radius: 2px; padding: 0 1px; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.hl.noted { border-bottom: 2px solid var(--c-doc); }
mark.hl:hover { background: var(--hl-hi); }
mark.hl.flash, .claim.flash, .mynote.flash { animation: hlFlash 1.2s var(--e-out) both; }
@keyframes hlFlash { 0%, 40% { box-shadow: 0 0 0 3px var(--hl-hi); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* La bulle au-dessus d'une selection ou d'un surlignage. */
.hlpop {
  position: fixed; z-index: 35; display: flex; align-items: center; gap: 2px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-full);
  box-shadow: var(--shadow-2); max-width: min(92vw, 420px);
}
.hlpop .txt { font-size: 12.5px; color: var(--text-2); padding: 2px 8px 2px 10px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hlpop button { white-space: nowrap; }

/* Une note de section : une carte ambre sous la section, cliquable pour la modifier. */
.mynote {
  display: flex; flex-direction: column; gap: 3px; margin: 12px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--c-doc); background: var(--c-doc-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; cursor: pointer;
}
.mynote .lab, .rev-a .lab, .rev-list .lab { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--c-doc); }
.mynote-add { margin-top: 10px; color: var(--text-3); }
.mynote-add:hover { color: var(--text); }
.mynote-q { margin: 0 0 10px; padding: 8px 12px; border-left: 3px solid var(--c-doc); background: var(--c-doc-soft); font-family: var(--font-read); font-size: 13.5px; color: var(--text-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.modal textarea#noteText { width: 100%; }

/* Le rail : mes notes, une ligne par note, barre ambre ; et la note sur la fiche. */
.rail-notes { display: flex; flex-direction: column; gap: 2px; }
.rail-notes .it {
  display: grid; grid-template-columns: 3px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px;
  background: none; border: 0; padding: 5px 6px; text-align: left; border-radius: 6px; width: 100%; color: var(--text-2);
}
.rail-notes .it .bar { grid-row: 1 / 3; background: var(--c-doc); border-radius: 2px; }
.rail-notes .it.note .bar { background: var(--text-3); }
.rail-notes .it.lost .bar { background: var(--warn); }
.rail-notes .it .t { font-size: 12.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-notes .it .k { font: 10.5px var(--font-mono); color: var(--text-4); margin-top: 2px; }
.rail-notes .it.lost .k { color: var(--warn); }
.rail-notes .it:hover { background: var(--bg-2); color: var(--text); }
.rail-notes .hint { margin: 0 0 4px; }
.mynote-ta { width: 100%; font-size: 13px; resize: vertical; min-height: 64px; }
.mynote-ro { font-size: 13px; color: var(--text-2); white-space: pre-wrap; margin: 0; }
.badge.note { color: var(--c-doc); border-color: var(--c-doc-line); background: var(--c-doc-soft); }

/* Mode lecture : la colonne, la barre et le rail s'effacent ; le texte prend le centre.
   Le bouton pour en sortir reste toujours visible (regle : un etat replie garde sa sortie). */
.readexit { display: none; }
body.reading .sidebar, body.reading .topbar, body.reading .fiche-rail, body.reading .chatfab, body.reading .crumb,
body.reading #chatBox, body.reading #lockBanner, body.reading .remotebar { display: none !important; }
body.reading .readexit { display: inline-flex; position: fixed; top: 14px; right: 16px; z-index: 40; box-shadow: var(--shadow-2); background: var(--bg-2); }
body.reading .content { max-width: none; padding: 40px 24px 140px; }
body.reading .fiche-layout { grid-template-columns: minmax(0, 1fr); }
/* width: 100 % : un element de grille a marges auto se retrecit a son contenu (les etapes
   de 210 px le poussaient a 560 px sur un telephone de 375). */
body.reading .fiche-main { width: 100%; max-width: 740px; margin: 0 auto; }
body.reading .fiche-main .section, body.reading .fiche-main .claim, body.reading .fiche-main .tablewrap, body.reading .fiche-main .alert,
body.reading .fiche-main .revision, body.reading .player, body.reading .playerslot.on { max-width: none; }
body.reading .fiche-main .summary, body.reading .fiche-main .section .body, body.reading .claim .text, body.reading .section li, body.reading .step { font-size: 17px; line-height: 1.7; }
body.reading .step { font-size: 15px; }
body.reading h2.big { font-size: 34px; max-width: none; }
body.reading h4.topic { font-size: 22px; }
body.reading .fiche-main .section { padding: 24px 28px; }
body.reading .player:not(.mini):not(.travel) { max-width: 740px; margin-left: auto; margin-right: auto; }
@media (max-width: 760px) {
  body.reading .content { padding: 56px 16px 60px; }
  body.reading .readexit { top: 10px; right: 10px; }
  body.reading .fiche-main .summary, body.reading .fiche-main .section .body, body.reading .claim .text, body.reading .section li { font-size: 16.5px; }
  body.reading h2.big { font-size: 26px; }
}

/* Revision : une question a la fois, grande ; la reponse sous un trait ; les pastilles de la serie. */
.revision { max-width: 780px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--topbar) + 14px); }
.rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rev-head strong { font-family: var(--font-display); font-size: 15px; }
.rev-head .ic { color: var(--c-synth); }
.rev-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.rev-dots .dot {
  width: 12px; height: 12px; border-radius: 50%; padding: 0; border: 1px solid var(--line-strong); background: var(--bg-2);
  box-shadow: none; min-width: 0;
}
.rev-dots .dot.su { background: var(--ok); border-color: var(--ok); }
.rev-dots .dot.ko { background: var(--warn); border-color: var(--warn); }
.rev-dots .dot.cur { outline: 2px solid var(--accent); outline-offset: 2px; }
.rev-top { display: flex; align-items: center; gap: 10px; }
.rev-top .k { font: 500 11px var(--font-mono); color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.rev-q { font-family: var(--font-display); font-size: 19px; line-height: 1.35; font-weight: 600; color: var(--text-strong); margin: 0; }
.rev-a { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rev-a p { margin: 0; font-family: var(--font-read); font-size: 15px; line-height: 1.6; }
.rev-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rev-judge .hint { margin-right: 4px; }
button.small.ok { border-color: var(--ok); color: var(--ok); }
button.small.ok:hover { background: var(--ok-soft); }
button.small.warn { border-color: var(--warn); color: var(--warn); }
button.small.warn:hover { background: var(--warn-soft); }
.rev-list { display: flex; flex-direction: column; gap: 4px; }
.rev-item { background: none; border: 0; border-left: 2px solid var(--warn); border-radius: 0; text-align: left; justify-content: flex-start; padding: 5px 10px; color: var(--text-2); font-size: 13.5px; white-space: normal; }
.rev-item:hover { background: var(--bg-2); color: var(--text); }
.rev-claude { margin: 0; }

/* ---------- 20. Fabriquer plus loin (2026-10-05) : glisser, fil de veille ---------- */

/* Glisser pour reordonner : une poignee a gauche, la ligne prise s'estompe, un trait bleu dit ou elle tombe. */
.grip { width: 10px; height: 16px; flex: none; cursor: grab; opacity: .55;
  background: radial-gradient(circle, var(--text-3) 1.2px, transparent 1.4px) 0 0 / 5px 5px; }
.at-row.drag { grid-template-columns: 10px 22px minmax(0, 1fr) auto auto; cursor: grab; }
.at-row.drag:hover .grip, .qitem.drag:hover .grip { opacity: 1; }
.qitem.drag { cursor: grab; }
.dragging { opacity: .4; }
.drop-before { box-shadow: 0 -2px 0 0 var(--accent) inset; }
.drop-after { box-shadow: 0 2px 0 0 var(--accent) inset; }
.at-row.drop-before, .at-row.drop-after { position: relative; z-index: 1; }

/* Le fil de veille : un bloc par jour, une ligne par fiche arrivee. */
.veille { max-width: 820px; display: flex; flex-direction: column; gap: 18px; }
.veille-day h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.veille-day h3 .hint { font-size: 12px; }
.veille-day h3::after { content: none; }
.vline { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; padding: 10px 12px; background: var(--bg-1);
  border: 1px solid var(--line-soft); border-radius: var(--r-md); margin-bottom: 6px; }
.vline.link { cursor: pointer; }
.vline.link:hover { border-color: var(--line-strong); background: var(--bg-2); }
.vline .st { font: 12px var(--font-mono); color: var(--c-suivi); text-align: center; padding-top: 3px; }
.vline .t { font-weight: 600; font-size: 14px; }
.vline .t .chip { margin-left: 8px; }
.vline .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.vline .ap { margin: 6px 0 0; font-family: var(--font-read); font-size: 13.5px; color: var(--text-2); line-height: 1.5; }

/* Comptes rendus de veille (2026-10-06) : une carte repliable par compte rendu, le dernier ouvert. */
.veille-cr { display: flex; flex-direction: column; gap: 8px; }
.veille-cr .at-sec button { margin-left: 10px; }
.cr { background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); }
.cr > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 14px; cursor: pointer; list-style: none; }
.cr > summary::-webkit-details-marker { display: none; }
.cr > summary .t { font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.cr > summary::before { content: '▸'; color: var(--text-3); font-size: 12px; }
.cr[open] > summary::before { content: '▾'; }
.cr-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px; }
.cr-body .h { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; }
.cr-resume { margin: 0; font-family: var(--font-read); font-size: 15px; line-height: 1.65; max-width: 72ch; }
.cr-theme { padding: 10px 12px; border-left: 3px solid var(--c-suivi); background: var(--c-suivi-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.cr-theme .lab { font: 600 12.5px var(--font-ui); color: var(--c-suivi); }
.cr-theme p { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.55; }
.cr-refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-item { padding: 8px 0; border-top: 1px solid var(--line-faint); }
.cr-item .t.link { background: none; border: 0; padding: 0; color: var(--accent-text); font-weight: 600; font-size: 14px; text-align: left; white-space: normal; }
.cr-item .t.link:hover { text-decoration: underline; }
.cr-item .b { margin: 4px 0 6px; font-family: var(--font-read); font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cr-item ul { margin: 0 0 6px; padding-left: 20px; font-size: 13px; }

/* ---------- 21. Nouvelles sources (2026-10-06) : enregistrements locaux, pages web ---------- */
/* Les couleurs d'objet existantes servent : un enregistrement s'ecoute (corail), une page se lit (ambre). */
.srccard .kindicon.audio { background: var(--c-video-soft); border-color: var(--c-video-line); }
.srccard .kindicon.audio .ic { color: var(--c-video); }
.srccard .kindicon.web { background: var(--c-doc-soft); border-color: var(--c-doc-line); }
.srccard .kindicon.web .ic { color: var(--c-doc); }
/* Le lecteur d'un enregistrement : la commande audio du navigateur, rien d'autre. */
.player .frame.audio { aspect-ratio: auto; padding: 14px 16px; display: flex; align-items: center; background: var(--bg-3); }
.player .frame.audio audio { width: 100%; }
/* Le lecteur d'une page web : le paragraphe vise, surligne, avec ses voisins. */
.player .frame.text { aspect-ratio: auto; max-height: 46vh; overflow: auto; padding: 14px 18px; background: var(--bg-3); font-family: var(--font-read); font-size: 14.5px; line-height: 1.6; }
.player .frame.text p, .player .frame.text h4 { margin: 0 0 10px; color: var(--text-3); }
.player .frame.text h4 { font-family: var(--font-display); font-size: 15px; }
.player .frame.text .cur { color: var(--text); background: var(--hl); border-radius: 4px; padding: 3px 6px; margin-left: -6px; margin-right: -6px; }
.player .frame.text .lab { font: 500 10.5px var(--font-mono); color: var(--text-4); margin-right: 8px; }
.player.mini .frame.text { max-height: 30vh; font-size: 13px; }

/* ---------- 22. Solidite (2026-10-06) : premiers pas ---------- */
.home .card.guide { border-color: var(--accent-line); }
.steps-guide { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.gstep { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line-faint); }
.gstep .mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--font-mono); background: var(--bg-2); border: 1px solid var(--line-strong); color: var(--text-2); }
.gstep.ok .mark { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.gstep .t { font-weight: 600; font-size: 14px; }
.gstep.ok .t { color: var(--text-3); }
.gstep.opt .t { font-weight: 500; }
.gstep .why { font-size: 12.5px; margin-top: 2px; }
@media (max-width: 760px) { .gstep { grid-template-columns: 26px minmax(0, 1fr); } .gstep button { grid-column: 2; justify-self: start; } }

/* ---------- 23. Plus vivant (2026-10-06, toile « Prisme, plus vivant ») ----------
   Six leviers, meme palette, meme navigation : lueur de dossier, mascotte vivante, grands
   chiffres, rubans de type, micro-mouvement, matiere. Tout ce qui bouge s'arrete en mouvement
   reduit (fin de section). */

/* 6. Matiere : deux lueurs diffuses sous l'app, un lisere clair d'un pixel en haut des panneaux. */
:root { --mascotte-corps: #f4f7fb; --mascotte-visage: #111821; --lisere: rgba(255, 255, 255, .05); --lueur-a: rgba(63, 184, 255, .10); --lueur-b: rgba(255, 138, 101, .08); }
[data-theme="light"] { --mascotte-corps: #151c25; --mascotte-visage: #ffffff; --lisere: rgba(255, 255, 255, .7); --lueur-a: rgba(0, 119, 204, .07); --lueur-b: rgba(177, 58, 10, .05); }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 28% -12%, var(--lueur-a), transparent 42%), radial-gradient(circle at 104% 112%, var(--lueur-b), transparent 38%);
}
.card, .srccard, .tile, .at-list, .at-now, .hit, .cr, .vline, .card.gen { box-shadow: 0 1px 0 var(--lisere) inset, var(--shadow-1); }
.card.flat { box-shadow: none; }
.fiche-main .section { position: relative; }
.fiche-main .section::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent); pointer-events: none; }

/* 1. Lueur de dossier : un halo doux dans la couleur du dossier, en haut a gauche de la carte. */
.srccard[class*=" d-"], .tile[class*="d-"] { background-image: radial-gradient(circle at -10px -20px, color-mix(in srgb, var(--dc) 22%, transparent), transparent 190px); }
.libnav button[class*="d-"] { background-image: radial-gradient(circle at -20px 50%, color-mix(in srgb, var(--dc) 18%, transparent), transparent 110px); }

/* 4. Rubans de type : la vignette porte la couleur du type sur son bord et une teinte legere. */
.srccard .kindicon { width: 96px; height: 54px; position: relative; overflow: hidden; border-radius: 6px; box-shadow: inset 4px 0 0 var(--c-video); }
.srccard .kindicon .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.srccard .kindicon::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-video-soft), transparent 70%); pointer-events: none; }
.srccard .kindicon .ic { position: relative; width: 20px; height: 20px; }
.srccard .kindicon .pic ~ .ic { position: absolute; right: 6px; bottom: 5px; width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.srccard .kindicon.pdf, .srccard .kindicon.web { box-shadow: inset 4px 0 0 var(--c-doc); }
.srccard .kindicon.pdf::after, .srccard .kindicon.web::after { background: linear-gradient(180deg, var(--c-doc-soft), transparent 70%); }
.srccard .kindicon.audio { box-shadow: inset 4px 0 0 var(--c-video); }
.srccard.video, .srccard.pdf, .srccard.audio, .srccard.web { border-left: 1px solid var(--line-soft); }
@media (max-width: 760px) { .srccard .kindicon { width: 64px; height: 40px; } }

/* 5. Micro-mouvement : la carte se souleve au survol et laisse filer un trait de lumiere. */
.srccard { position: relative; transition: transform var(--m-quick) var(--e-out), box-shadow var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out); }
.srccard:hover { transform: translateY(-3px); box-shadow: 0 1px 0 var(--lisere) inset, var(--shadow-2), 0 0 0 1px var(--accent-line); }
.srccard::after { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; opacity: 0; transition: opacity var(--m-quick) var(--e-out);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .7), transparent); pointer-events: none; }
.srccard:hover::after { opacity: 1; }
.srccard.selectable:active { transform: translateY(-1px); }

/* L'audio en cours danse : quatre barres dans la couleur video, sur la vignette de l'Atelier. */
.at-thumbwrap { position: relative; width: 96px; height: 54px; }
.at-thumbwrap .thumb { position: absolute; inset: 0; }
.at-thumbwrap .eq { position: absolute; inset: 0; display: flex; gap: 4px; align-items: flex-end; justify-content: center; padding-bottom: 10px; background: linear-gradient(180deg, rgba(10, 13, 18, .1), rgba(10, 13, 18, .55)); border-radius: 6px; }
.at-thumbwrap .eq span { display: block; width: 4px; height: 22px; border-radius: 2px; background: var(--c-video); transform-origin: 50% 100%; animation: eqDanse 1.1s ease-in-out infinite; }
.at-thumbwrap .eq span:nth-child(2) { animation-delay: .15s; } .at-thumbwrap .eq span:nth-child(3) { animation-delay: .3s; } .at-thumbwrap .eq span:nth-child(4) { animation-delay: .45s; }
@keyframes eqDanse { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.at-now { grid-template-columns: 96px minmax(0, 1fr) auto; }
.at-pct { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; align-self: center; }
.at-pct strong { font: 800 34px/1 var(--font-display); color: var(--text-strong); letter-spacing: -.02em; }
.at-pct span { font-size: 11px; color: var(--text-3); }
@media (max-width: 760px) { .at-now { grid-template-columns: 96px minmax(0, 1fr); } .at-pct { display: none; } }

/* 3. Des chiffres qui comptent : l'anneau se remplit a l'arrivee de la fiche (transition sur --p / --q). */
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --q { syntax: '<number>'; inherits: false; initial-value: 0; }
.ring.big { transition: --p 1.1s var(--e-out), --q 1.1s var(--e-out); }

/* Bonjour : la mascotte, une phrase, les chiffres en grand. */
.home .card.hello { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px 20px;
  background-image: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), .14), transparent 240px); }
.hello-masc { filter: drop-shadow(0 10px 22px rgba(var(--accent-rgb), .22)); }
.hello-date { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.hello-title { margin: 4px 0 2px; font: 800 24px/1.15 var(--font-display); letter-spacing: -.02em; color: var(--text-strong); }
.hello-sub { margin: 0; }
.hello-nums { display: flex; gap: 22px; }
.hello-n { display: flex; flex-direction: column; align-items: flex-end; }
.hello-n strong { font: 800 34px/1 var(--font-display); letter-spacing: -.02em; color: var(--text-strong); }
.hello-n.ok strong { color: var(--ok); }
.hello-n span { font-size: 11.5px; color: var(--text-3); margin-top: 4px; white-space: nowrap; }
@media (max-width: 760px) { .home .card.hello { grid-template-columns: auto minmax(0, 1fr); } .hello-nums { grid-column: 1 / -1; justify-content: flex-start; } .hello-n { align-items: flex-start; } .hello-title { font-size: 20px; } }

/* 2. La mascotte vit : couleurs du theme, respiration, clignement ; placee ou l'etat le demande. */
.masc .masc-corps { fill: var(--mascotte-corps); }
.masc .masc-corps .masc-tige { fill: none; stroke: var(--mascotte-corps); }
.masc .masc-visage { fill: var(--mascotte-visage); }
.masc .masc-visage .masc-trait { fill: none; stroke: var(--mascotte-visage); }
.masc .masc-zz { fill: none; stroke: var(--mascotte-corps); stroke-linecap: round; stroke-linejoin: round; animation: mascZz 2.6s ease-in-out infinite; }
.masc { animation: mascRespire 4.2s ease-in-out infinite; transform-origin: 50% 60%; flex: none; }
.masc .masc-oeil { animation: mascCligne 5.2s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
@keyframes mascRespire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes mascCligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes mascZz { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.empty .masc.mascotte { width: 110px; height: 110px; display: block; margin: 0 auto 4px; }
.home .card.fresh { position: relative; padding-right: 70px; }
.home .card.fresh .card-masc { position: absolute; top: 8px; right: 10px; }
.gen-masc { vertical-align: middle; margin-right: 8px; }
#atGenTitle { display: inline-flex; align-items: center; }

/* Mouvement reduit (reglage Windows) : tout ceci reste immobile ; les etats se lisent sans bouger. */
@media (prefers-reduced-motion: reduce) {
  .masc, .masc .masc-oeil, .masc .masc-zz, .at-thumbwrap .eq span { animation: none; }
  .srccard, .ring.big { transition: none; }
  .srccard:hover { transform: none; }
}

/* ---------- 24. Epure (2026-10-08) : moins d'informations, un vrai suivi ----------
   Retour de Clement sur la 0.9 : trop d'informations, on ne comprend pas ou aller. Regles :
   un seul element « en cours », grand ; une carte de source = un etat, un geste, un menu ;
   l'Atelier sans journal ni chiffres techniques (ils restent dans un « details » replie). */

/* La colonne : plus de tuile ; l'onglet Atelier porte le pourcentage. */
.navlink .count.live { font-weight: 600; }

/* Accueil : la carte « En cours ». */
.home .card.encours { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px;
  background-image: radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb), .16), transparent 260px); border-color: var(--accent-line); }
.encours-ring.ring.big { width: 64px; height: 64px; }
.encours-ring.ring.big span { width: 52px; height: 52px; font-size: 13px; }
.encours-ring.pulse { background: conic-gradient(var(--accent) 0 30%, var(--bg-3) 0); animation: ringTourne 1.4s linear infinite; }
@keyframes ringTourne { to { transform: rotate(360deg); } }
.encours-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.encours-text .k { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.encours-text .t { font: 700 16px var(--font-display); color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.encours-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .home .card.encours { grid-template-columns: auto minmax(0, 1fr); } .encours-masc { display: none; } .encours-acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* Accueil : « A faire » en boutons courts. */
.todo { display: flex; gap: 8px; flex-wrap: wrap; }

/* Bibliotheque : les filtres, moins nombreux, un peu plus grands. */
.filters .chip { padding: 5px 12px; font-size: 12.5px; }
.srccard .actions button.icon { padding: 5px 8px; }

/* Le menu « ⋯ » d'une carte. */
.menupop { position: fixed; z-index: 36; min-width: 220px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 4px; display: flex; flex-direction: column; }
.menupop button { display: flex; align-items: center; gap: 9px; width: 100%; background: none; border: 0; padding: 8px 10px; border-radius: 6px; color: var(--text); font-size: 13px; text-align: left; justify-content: flex-start; white-space: normal; }
.menupop button:hover { background: var(--bg-3); }
.menupop button .ic { color: var(--text-3); flex: none; }

/* Atelier : le lot detaille (journal, qualite) ne s'affiche plus ; la section « Termine » le remplace. */
#atelier #runWrap { display: none !important; }
.at-det { font-size: 12px; color: var(--text-3); grid-column: 2 / -1; }
.at-det > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.at-det > summary::before { content: '▸ '; }
.at-det[open] > summary::before { content: '▾ '; }
.at-det .log, .at-det .steps-log { white-space: pre-wrap; font: 11.5px/1.5 var(--font-mono); color: var(--text-3); margin-top: 4px; max-height: 160px; overflow: auto; }
.card.gen .at-det { margin-top: 6px; }
.at-row.done .t { white-space: normal; }
.at-foot.act select { max-width: 200px; }

/* ---------- 25. Voir avant de lire (2026-10-08) ----------
   Retour de Clement : l'Accueil garde les dernieres fiches et la file d'attente, en vignettes ;
   la Bibliotheque gagne un calendrier ; les lots precedents deviennent des cartes. */

/* La vignette : image YouTube ou icone du type, ruban de couleur a gauche. */
.vig { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--bg-3); overflow: hidden; display: grid; place-items: center;
  box-shadow: inset 4px 0 0 var(--c-video); flex: none; }
.vig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vig::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--c-video-soft), transparent 60%); pointer-events: none; }
.vig .ic { position: relative; width: 22px; height: 22px; color: var(--c-video); }
.vig img ~ .ic { position: absolute; right: 6px; bottom: 5px; width: 15px; height: 15px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8)); }
.vig.pdf, .vig.web { box-shadow: inset 4px 0 0 var(--c-doc); }
.vig.pdf::after, .vig.web::after { background: linear-gradient(180deg, var(--c-doc-soft), transparent 60%); }
.vig.pdf .ic, .vig.web .ic { color: var(--c-doc); }
.vig.synth { box-shadow: inset 4px 0 0 var(--c-synth); }
.vig.synth::after { background: linear-gradient(180deg, var(--c-synth-soft), transparent 60%); }
.vig.synth .ic { color: var(--c-synth); }

/* La carte visuelle : vignette, titre sur deux lignes, dossier ou date. */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.vcard { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: stretch; width: 100%; min-width: 0; padding: 8px; text-align: left;
  background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); color: var(--text); cursor: pointer; font: inherit;
  box-shadow: 0 1px 0 var(--lisere) inset, var(--shadow-1);
  transition: transform var(--m-quick) var(--e-out), box-shadow var(--m-quick) var(--e-out), border-color var(--m-quick) var(--e-out); }
.vcard:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: 0 1px 0 var(--lisere) inset, var(--shadow-2); }
.vcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vcard[class*=" d-"] { background-image: radial-gradient(circle at -10px -20px, color-mix(in srgb, var(--dc) 22%, transparent), transparent 160px); }
.vcard .vbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vcard .t { font: 600 13px/1.3 var(--font-ui); color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vcard .k { display: flex; align-items: center; gap: 6px; font: 11.5px var(--font-mono); color: var(--text-3); min-width: 0; }
.vcard .k span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard .vtag { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 2px 7px; border-radius: var(--r-full);
  font: 600 10px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; background: var(--accent); color: #061018; }
.vcard.pale { opacity: .72; }
.vcard.pale:hover { opacity: 1; }

/* Une rangee qui defile (file d'attente, reprendre, lots precedents). */
.vstrip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.vstrip .vcard { width: 168px; flex: none; }
.vmore { flex: none; align-self: center; padding: 6px 10px; border-radius: var(--r-full); border: 1px solid var(--line); background: var(--bg-2);
  font: 600 12px var(--font-mono); color: var(--text-2); cursor: pointer; }
.vstrip.tiny { gap: 4px; padding: 0; overflow: hidden; }
.vstrip.tiny .vig { width: 56px; border-radius: 4px; }
.vstrip.tiny .vig .ic { width: 14px; height: 14px; }
.vstrip.tiny .vig img ~ .ic { display: none; }
.vstrip.tiny .vmore { padding: 3px 7px; font-size: 11px; }
.home .card.fresh .vgrid { margin-right: -58px; }
@media (max-width: 760px) { .vgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .vstrip .vcard { width: 140px; } .home .card.fresh { padding-right: 16px; } .home .card.fresh .vgrid { margin-right: 0; } }

/* Atelier : les lots precedents, une carte par lot. */
.at-runs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.at-run { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'when body chev' 'strip strip strip' 'rows rows rows'; gap: 6px 14px; align-items: center;
  padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--r-md); cursor: pointer;
  box-shadow: 0 1px 0 var(--lisere) inset, var(--shadow-1); transition: border-color var(--m-quick) var(--e-out); }
.at-run:hover { border-color: var(--line-strong); }
.at-run.open { border-color: var(--accent-line); }
.at-run .when { grid-area: when; display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.at-run .when strong { font: 800 18px/1.1 var(--font-display); color: var(--text-strong); white-space: nowrap; }
.at-run .when span { font: 11px var(--font-mono); color: var(--text-3); }
.at-run .body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.at-run .body .t { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-run .body .k { font: 11.5px var(--font-mono); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.at-run .seg { display: flex; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.at-run .seg i { display: block; height: 100%; }
.at-run .seg .ok { background: var(--ok); } .at-run .seg .err { background: var(--err); } .at-run .seg .skip { background: var(--text-3); opacity: .5; }
.at-run.cancelled .when strong { color: var(--text-2); }
.at-run .chev { grid-area: chev; color: var(--text-3); transition: transform var(--m-quick) var(--e-out); }
.at-run .chev .ic { width: 16px; height: 16px; }
.at-run.open .chev { transform: rotate(180deg); }
.at-run .vstrip { grid-area: strip; }
.at-run .rows { grid-area: rows; cursor: default; }
.at-run .rows .at-list { margin-top: 4px; }

/* Bibliotheque : le calendrier de la colonne. */
.libcal { display: flex; flex-direction: column; gap: 4px; padding: 2px 6px 6px; }
.libcal .calhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.libcal .calhead span { font: 600 12px var(--font-ui); color: var(--text-2); text-transform: capitalize; }
.libnav .libcal .calhead button { width: 26px; height: 26px; padding: 0; justify-content: center; font-size: 16px; line-height: 1; color: var(--text-3); border-radius: 50%; }
.libcal .calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.libcal .dow { text-align: center; font: 500 9.5px var(--font-mono); color: var(--text-3); padding-bottom: 2px; }
.libnav .libcal .day { --h: 0; width: auto; aspect-ratio: 1; padding: 0; justify-content: center; border-radius: 5px; font: 11px var(--font-mono); color: var(--text-2);
  background: color-mix(in srgb, var(--accent) calc(var(--h) * 60%), transparent); }
.libnav .libcal .day:disabled { color: var(--text-3); opacity: .45; cursor: default; }
.libnav .libcal .day.has:hover { outline: 1px solid var(--accent-line); }
.libnav .libcal .day.today { font-weight: 800; color: var(--text-strong); text-decoration: underline; text-underline-offset: 2px; }
.libnav .libcal .day.on { background: var(--accent); color: #061018; font-weight: 800; }
.libcal .calhint { font: 10.5px var(--font-mono); color: var(--text-3); padding: 2px 2px 0; }
.libnav .libcal .calclear { color: var(--accent-text); font-size: 12px; padding: 5px 6px; width: 100%; }
@media (max-width: 900px) {
  .libcal { flex: none; flex-direction: row; align-items: center; padding: 0; }
  .libcal .calhead, .libcal .calgrid, .libcal .calhint { display: none; }
}

/* Ajouter : l'encart « suivre une playlist ». */
.alert.suivre { align-items: center; margin-bottom: 14px; }
.alert.suivre b { color: var(--text-strong); }

/* ---------- 26. Sans dossier (2026-10-14) ---------- */
.libnav button.sans { color: var(--text-2); }
.libnav button.sans .t::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 1.5px dashed var(--text-3); margin-right: 9px; vertical-align: -1px; box-sizing: border-box; }
.libnav button.sans.vide { color: var(--text-3); }
.tile.sans .strip { background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 12px); opacity: 1; }
.tile.sans .name { color: var(--text-2); }

/* ---------- 27. Une source suivie en entier (2026-10-28) ----------
   Sa page : « Actualiser », ce qui reste a faire et son geste, puis toutes les videos de la
   playlist dans son ordre, chacune avec son sort. Les lignes de l'Atelier et de l'Accueil y menent. */
.at-row.link { width: 100%; text-align: left; background: none; border-radius: 0; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.at-row.link:hover { background: var(--bg-2); }
.at-row.link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.at-row.link .acts .ic { color: var(--text-3); }
.at-row .du.warn { color: var(--warn); }
#atSuivis { margin-bottom: 18px; }

.suivi-page { display: flex; flex-direction: column; gap: 12px; max-width: 980px; }
.suivi-page > .card { margin: 0; }
.suivi-maj .row { flex-wrap: nowrap; }
.suivi-maj .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suivi-maj .bar { margin-top: 10px; }
.suivi-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-suivi-soft); flex: none; }
.suivi-ico .ic { color: var(--c-suivi); }
.suivi-todo { border-left: 3px solid var(--warn); }
.suivi-todo .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.suivi-page .filters { margin: 4px 0 0; }

.eps-list .ep-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); }
.eps-list .ep-row:last-child { border-bottom: 0; }
.ep-row .thumb { width: 80px; height: 45px; border-radius: 5px; background: var(--bg-3); object-fit: cover; display: grid; place-items: center; border: 1px solid var(--line); }
.ep-row .thumb .ic { color: var(--c-video); }
.ep-row .body { min-width: 0; }
.ep-row .t { font-size: 13.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-row .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.ep-row .acts { display: flex; gap: 6px; justify-content: flex-end; min-width: 0; }
.ep-row .badge.on { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.ep-row.existant .t, .ep-row.ignore .t, .ep-row.doublon .t { color: var(--text-2); font-weight: 500; }
.ep-row.existant .thumb, .ep-row.ignore .thumb, .ep-row.doublon .thumb { opacity: .55; }
.eps-list .eps-vide { margin: 0; padding: 12px; }
/* Sur telephone, une ligne de source suivie garde son etat (c'est ce qu'on vient y lire) et perd le chevron. */
@media (max-width: 760px) {
  .at-row.link { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .at-row.link .du:nth-child(3) { display: block; }
  .at-row.link .acts { display: none; }
}
@media (max-width: 700px) {
  .suivi-maj .row { flex-wrap: wrap; }
  .eps-list .ep-row { grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; }
  .ep-row .thumb { width: 64px; height: 36px; grid-row: 1 / span 2; }
  /* L'etat a gauche, le geste a droite, sur la meme ligne sous le titre. */
  .ep-row .badge { grid-column: 2; grid-row: 2; justify-self: start; }
  .ep-row .acts { grid-column: 2; grid-row: 2; justify-self: end; }
  .ep-row .t { white-space: normal; }
}