:root {
  --bg: #1d1714;
  --bg-2: #2a211c;
  --ink: #f3ebe1;
  --ink-dim: #b9aa98;
  --ink-faint: #9b8d7d;             /* texte discret sur fonds sombres : ≥ 4,8:1 (avant #7d6f61, 3,2:1) */
  --paper-faint: #6b5d50;           /* texte discret sur papier / étiquettes claires : ≥ 5,1:1 */
  --ko-text: #e5705c;               /* rouge « raté » en texte sur fond sombre : ≥ 5,1:1 (--ko reste pour les aplats) */
  --ko-paper: #b23a2a;              /* rouge en texte sur papier : 5,6:1 */
  --accent: #e8a05a;
  --ok: #5fb37d;
  --ko: #d9604c;
  --line: rgba(255, 240, 220, .10);

  --paper: #fbf8f0;
  --paper-edge: #e9e2d2;
  --rule-blue: rgba(86, 128, 196, .38);
  --rule-red: rgba(214, 72, 72, .75);
  --pen: #1f3a8a;
  --pencil: #3b3530;

  --wood-1: #c9925b;
  --wood-2: #ad7443;
  --felt: #3d2a20;

  --b1: #e0584a;
  --b2: #ec9a3c;
  --b3: #e6c440;
  --b4: #6dba6b;
  --b5: #4f8fd6;

  --card-w: min(440px, calc(100vw - 32px), max(300px, calc((100vh - 420px) / .6)));
  --card-h: calc(var(--card-w) * .6);
  --cam: 1.6s cubic-bezier(.5, 0, .25, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  overflow: hidden;
  overscroll-behavior: none;       /* pas de « tirer pour rafraîchir » pendant un geste */
  touch-action: manipulation;      /* pas de zoom au double tap */
  background:
    radial-gradient(1100px 600px at 50% 75%, #3a2c23 0%, transparent 70%),
    radial-gradient(900px 500px at 50% 10%, #2c231e 0%, transparent 70%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
}
button { font: inherit; cursor: pointer; }

/* ---------- Scène 3D plein écran ---------- */
.stage {
  position: fixed; inset: 0; z-index: 0;
  perspective: 1700px;
  transition: perspective-origin var(--cam);
  overflow: hidden;
}
.world {
  position: absolute; left: 0; top: 0;
  width: 1400px; height: 1000px;
  transform-origin: 0 0 0;
  transform-style: preserve-3d;
  transition: transform var(--cam);
}
.stage.no-anim, .stage.no-anim .world { transition: none; }
/* 3D préservée seulement sur les conteneurs qui en ont besoin (les faces et leurs étiquettes restent à plat) */
.grp, .deckbox, .lid, .cabinet, .comp, .pile { transform-style: preserve-3d; }
/* Scène et interface : pas de sélection de texte ni de menu contextuel au toucher prolongé */
.stage, .ui { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.grp { position: absolute; left: 0; top: 0; }

/* Halo du bureau : grand plan (1800 × 900) mais texture minuscule. app.js (paintGlow) remplace le dégradé par une
   petite image étirée : un calque fait d'une seule image garde sa texture à la taille de l'image. Le dégradé CSS
   reste le repli. translateZ(0) : calque à part, pour ne pas grossir celui du monde. */
.desk-glow {
  position: absolute; left: -200px; top: 300px; width: 1800px; height: 900px;
  transform: translateZ(0);
  background: radial-gradient(closest-side, rgba(255,210,150,.10), transparent) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}
.box-shadow, .pile-shadow {
  position: absolute; border-radius: 20px;
  background: rgba(0,0,0,.55); filter: blur(22px);
  pointer-events: none;
  transition: opacity .8s;
}
.pile { position: absolute; cursor: pointer; }
.pile-label {
  position: absolute;
  font-family: Caveat, cursive; font-size: 26px; color: var(--ink-dim);
  text-align: center; pointer-events: none;
  transition: opacity .6s;
}
.pile-label b { font-family: Inter, sans-serif; font-size: 22px; color: var(--ink); }
.pile-label.side { text-align: left; font-size: 34px; line-height: 1.05; }
.pile-label.side b { font-size: 34px; }
body.mode-library .box-shadow,
body.mode-library .pile-shadow,
body.mode-library .pile-label { opacity: 0; }

/* Enveloppe kraft « Archivées » : à plat sur le bureau, seulement en leçon et s'il y a des archivées */
.envelope {
  position: absolute; border-radius: 3px; overflow: hidden; cursor: pointer;
  background:
    linear-gradient(160deg, rgba(255,255,255,.14), transparent 45%),
    repeating-linear-gradient(115deg, rgba(90,55,20,.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #c99a62, #ad7d47);
  box-shadow: inset 0 0 0 1px rgba(80,50,20,.35), 0 2px 0 #8e6437, 0 4px 0 #74502c;
  opacity: 0; pointer-events: none;
  transition: opacity .6s;
}
body.mode-lesson .envelope.show { opacity: 1; pointer-events: auto; }
.env-flap {
  position: absolute; left: 0; top: 0; width: 100%; height: 56%;
  background: linear-gradient(180deg, #d8ad76, #bf8b52);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.env-seal {
  position: absolute; left: 50%; top: 32%; width: 22px; height: 22px; margin-left: -11px;
  display: grid; place-items: center; border-radius: 50%;
  background: #b8352a; color: #f6e3d0; font-family: 'Klee One', serif; font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 2px rgba(184,53,42,.35);
}
.env-label {
  position: absolute; left: 0; right: 0; bottom: 6px; text-align: center;
  font-family: Caveat, cursive; font-size: 26px; line-height: 1; color: #4a2f16;
}
.env-label b { font-family: Inter, sans-serif; font-size: 20px; }
body[data-lay="phone"] .env-label { font-size: 32px; bottom: 4px; }
body[data-lay="phone"] .env-label b { font-size: 26px; }
body[data-lay="phone"] .env-seal { top: 22%; }

/* Toasts (erreur d'enregistrement, second onglet…) */
.toasts {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 100;
  transform: translateX(-50%); width: min(460px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 8px;
  padding: 8px 6px 8px 14px; border-radius: 12px;
  background: #2f2520; color: var(--ink); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.5); font-size: 13.5px; line-height: 1.35;
  animation: toast-in .25s ease-out;
}
.toast.error { background: #3a221d; border-color: rgba(217,96,76,.6); }
.toast.warn { border-color: rgba(232,160,90,.5); }
.toast-msg { flex: 1; min-width: 0; }
.toast-act {
  flex: none; min-height: 40px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--accent); color: #1b1410; font-weight: 600;
}
.toast-x { flex: none; min-width: 40px; min-height: 40px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-dim); }
.toast-x:hover { color: var(--ink); background: rgba(255,240,220,.06); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } .envelope { transition-duration: .01s; } }

/* Voile qui estompe l'armoire pendant une leçon */
.veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(29,23,20,.96) 0%, rgba(29,23,20,.86) 36%, rgba(29,23,20,.45) 56%, rgba(29,23,20,0) 70%);
  opacity: 0; visibility: hidden; /* hors leçon : aucun calque plein écran à garder */
  transition: opacity 1.2s ease, visibility 0s 1.2s;
}
body.mode-lesson .veil { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }

/* Matériaux */
.face3d {
  position: absolute;
  backface-visibility: hidden;
  background-image:
    linear-gradient(rgba(0,0,0,var(--shade, 0)), rgba(0,0,0,var(--shade, 0))),
    var(--mat);
}
.wood {
  --mat: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px, rgba(70,35,10,.06) 11px 13px, transparent 13px 23px),
         linear-gradient(180deg, var(--wood-1), var(--wood-2));
}
.wood-v {
  --mat: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 2px, transparent 2px 11px, rgba(70,35,10,.06) 11px 13px, transparent 13px 23px),
         linear-gradient(90deg, var(--wood-1), var(--wood-2));
}
.wood-inner {
  --mat: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 13px),
         linear-gradient(180deg, var(--wood-2), var(--wood-1));
}
.wood-dark {
  --mat: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px, rgba(0,0,0,.08) 14px 16px, transparent 16px 29px),
         linear-gradient(180deg, #5b3b27, #45291a);
}
.felt { --mat: radial-gradient(120% 120% at 50% 100%, #4a3326, var(--felt)); }
/* Face unie (grands plans dans l'ombre ou vus de biais) : un calque d'une seule couleur ne coûte aucune texture au GPU */
.wood, .wood-v, .wood-inner { --flat: var(--wood-2); }
.wood-dark { --flat: #4e3120; }
.felt { --flat: #42302a; --flat: color-mix(in srgb, #4a3326 40%, var(--felt)); }
.face3d.solid {
  background-image: none;
  background-color: var(--flat);
  background-color: color-mix(in srgb, #000 calc(var(--shade, 0) * 100%), var(--flat));
}
.divider-mat { --mat: linear-gradient(180deg, #d9cfb8, #c5b89c); }

/* Armoire */
.cabinet { position: absolute; left: 0; top: 0; }
.cab-plate {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: 1px 14px; border-radius: 3px;
  background: linear-gradient(#e9cf8f, #b8944e);
  color: #3b2a12; font-family: 'Klee One', serif; font-weight: 600; font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  white-space: nowrap;
}

/* Boîtes */
.deckbox { position: absolute; left: 0; top: 0; cursor: pointer; }
.deckbox.slide { transition: transform .7s cubic-bezier(.3,.7,.3,1); }
body.mode-lesson .deckbox { cursor: default; }
.lid {
  position: absolute; left: 0; top: 0;
  transition: transform .75s cubic-bezier(.5,0,.3,1.15);
}
.lid.no-anim { transition: none; }
/* Couvercle au repos : sa grande face tournée à l'opposé de la caméra ne garde pas de calque (classes posées par app.js · setLid) */
.lid.is-shut > .grp > .f-bottom, .lid.is-open > .grp > .f-top { display: none; }
/* Dessus du couvercle d'une boîte rangée (talon) : uni, à mi-chemin des deux tons du bois */
.deckbox.stub .f-top.solid { --flat: color-mix(in srgb, var(--wood-1) 55%, var(--wood-2)); }
.lid-handle {
  position: absolute; left: 50%; top: 45%;
  width: 64px; height: 9px; margin-left: -32px;
  border-radius: 5px;
  background: linear-gradient(#e7cf92, #a8843f);
  box-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.end-label { position: absolute; pointer-events: none; }
.end-plate {
  position: absolute;
  transform: rotate(-90deg);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 2px; padding: 4px 10px;
  border-radius: 4px;
  background: linear-gradient(#fbf6ea, #ece2cb);
  box-shadow: inset 0 0 0 1px rgba(90,60,30,.25), inset 0 3px 0 rgba(255,255,255,.4);
  color: #3a2c20; text-align: center;
  /* pas de overflow: hidden : la pastille « à réviser » déborde un peu du bord droit de l'étiquette (le titre et la
     ligne de méta se tronquent d'eux-mêmes) */
}
.end-title {
  font-family: 'Klee One', serif; font-weight: 600; font-size: 17px; line-height: 1.1;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.end-meta { font-size: 11px; color: #6b5745; }
.end-meta em { font-style: normal; color: #a3341f; font-weight: 600; }
/* Pastille « à réviser aujourd'hui » (dues + nouvelles, comme l'ancienne puce de l'armoire) et tampon hanko 済
   « leçon du jour faite » (jamais ensemble : faite = plus rien à réviser). Enfants ordinaires de l'étiquette :
   aucun calque 3D de plus par boîte (pas de will-change, pas de mélange de calques ; seule l'animation de pose du
   tampon, unique et courte, en crée un le temps de son déroulement). */
.end-due {
  position: absolute; right: -10px; bottom: -2px; z-index: 2;
  min-width: 30px; height: 30px; padding: 0 7px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 999px;
  background: #c8402d; color: #fff;
  font: 700 19px/1 Inter, sans-serif; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px #fbf6ea, 0 2px 0 rgba(0,0,0,.3);
}
html[data-render="3d"] body[data-lay="wide"] .end-due { min-width: 25px; height: 25px; right: -8px; bottom: -1px; padding: 0 6px; font-size: 15px; box-shadow: 0 0 0 2px #fbf6ea, 0 2px 0 rgba(0,0,0,.3); }
.end-stamp {
  position: absolute; right: 12px; bottom: 1px; z-index: 2;
  width: 38px; height: 38px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 50%;
  border: 3px solid rgba(194,58,43,.88); color: rgba(194,58,43,.9);
  background: rgba(194,58,43,.07); box-shadow: inset 0 0 0 1.5px rgba(194,58,43,.3);
  font: 600 22px/1 'Klee One', serif; font-style: normal;
  transform: rotate(-14deg);
}
html[data-render="3d"] body[data-lay="wide"] .end-stamp { width: 32px; height: 32px; border-width: 2.5px; font-size: 18px; right: 10px; }
.end-stamp.new { animation: stamp-in .42s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes stamp-in { from { opacity: 0; transform: rotate(-14deg) scale(1.9); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
html[data-motion="reduced"] .end-stamp.new { animation: none; }
@media (prefers-reduced-motion: reduce) { .end-stamp.new { animation: none; } }

/* Étiquettes sur la face avant de la boîte */
.front-labels {
  position: absolute; inset: 0;
  display: flex; padding: 0 12px;
  pointer-events: none;
}
.front-label { flex: 1; display: flex; align-items: center; justify-content: center; }
body.mode-lesson .front-label { pointer-events: auto; cursor: pointer; }
.front-label .plate {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 6px; border-radius: 4px;
  background: linear-gradient(#f7f1e3, #e8dec7);
  box-shadow: inset 0 0 0 1px rgba(90,60,30,.25), 0 1px 0 rgba(255,255,255,.35);
  font-size: 12px; color: #4a3a2c; white-space: nowrap;
}
.front-label .num {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 4px;
  color: #1b1410; font-weight: 700; font-size: 13px;
  background: var(--c);
}
.front-label .meta { display: flex; flex-direction: column; line-height: 1.15; }
.front-label .meta b { font-size: 12px; }
.front-label .meta small { font-size: 10.5px; color: #6b5745; }
.front-label .meta small em { font-style: normal; color: #a3341f; font-weight: 600; }

/* Compartiments + petites cartes */
.comp { position: absolute; top: 0; cursor: pointer; }
.mini {
  position: absolute;
  transform-origin: 50% 100%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, transparent 19%, var(--rule-red) 19%, var(--rule-red) 21%, transparent 21%),
    repeating-linear-gradient(180deg, transparent 0 9px, var(--rule-blue) 9px 10px) 0 22px / 100% 100% no-repeat,
    linear-gradient(180deg, #fffdf6, #ede6d4);
  box-shadow: inset 0 0 0 1px rgba(120,100,70,.18);
  transition: transform .35s cubic-bezier(.3,.7,.3,1);
}
.mini.flat {
  transform-origin: 50% 50%;
  box-shadow: inset 0 0 0 1px rgba(120,100,70,.22), 0 1px 0 #d8cfbb;
}
.mini.no-anim { transition: none; }
/* Cartes dont on ne voit que la tranche (derrière la première d'un compartiment, sous le dessus de la réserve) :
   unies, en deux tons pour que les tranches se distinguent. Un calque uni ne coûte aucune texture. */
.mini.plain { background: #f4eedd; box-shadow: none; border-radius: 0; }
.mini.plain.sh2 { background: #e6dec9; }
.mini.hidden { visibility: hidden; }
.tab-card {
  position: absolute;
  transform-origin: 50% 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #f5efe0), color-mix(in srgb, var(--c) 18%, #e6dcc6));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.tab-card .tab {
  position: absolute; top: -20px; left: 10px;
  width: 40px; height: 22px; border-radius: 5px 5px 0 0;
  background: var(--c);
  color: #1b1410; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}

/* ---------- Interface (au-dessus de la scène) ---------- */
.ui {
  position: relative; z-index: 5;
  height: 100%; height: 100dvh;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.ui > * > * { pointer-events: auto; }

.topbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  padding: 14px 24px;
  padding: max(14px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(rgba(29,23,20,.85), rgba(29,23,20,.55));
  pointer-events: auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--paper); color: var(--ko-paper);
  font-family: 'Klee One', serif; font-weight: 600; font-size: 24px;
  box-shadow: 0 2px 0 var(--paper-edge), 0 6px 14px rgba(0,0,0,.35);
  transform: rotate(-4deg);
}
.brand h1 { margin: 0; font-family: 'Klee One', serif; font-size: 22px; font-weight: 600; letter-spacing: .5px; }
.brand p { margin: 0; font-size: 12px; color: var(--ink-dim); }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.more-btn { display: none; }
.more-menu { display: contents; }
body.mode-library .lesson-only { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 13px; color: var(--ink-dim);
}
.chip b { color: var(--ink); font-weight: 600; }
.chip-select select { background: transparent; color: var(--ink); border: 0; font: inherit; font-weight: 600; }
.chip-select select option { background: var(--bg-2); }
.btn-ghost {
  padding: 6px 12px; border-radius: 999px;
  background: transparent; color: var(--ink-dim);
  border: 1px solid var(--line); font-size: 13px;
}
.btn-ghost:hover { color: var(--ink); border-color: rgba(255,240,220,.25); }
.btn-ghost:disabled { opacity: .4; cursor: default; }

.hand {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 16px 0;
}
.card-slot {
  position: relative; flex: none;
  width: var(--card-w); height: var(--card-h);
  display: none;
}
.hand.in-session .card-slot { display: block; }
.hand.in-session .panel { display: none; }
.hand:not(.in-session) .progress { display: none; }

.actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  min-height: 52px; margin-top: 18px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 12px; border: 0;
  font-weight: 600; font-size: 15px;
  color: #1b1410; background: var(--paper);
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn .kbd { font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.14); }
.btn-primary { background: var(--accent); }
.btn-soft { background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 rgba(0,0,0,.35); }
.btn-ok { background: var(--ok); color: #0e2416; }
.btn-ko { background: var(--ko); color: #2a0c07; }
.actions .btn { animation: pop .25s ease-out both; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

/* Panneau d'accueil / fin de session */
.panel {
  width: min(620px, 100%);
  text-align: center;
  animation: pop .3s ease-out both;
}
.panel:empty { display: none; }
.panel h2 { margin: 0 0 6px; font-family: 'Klee One', serif; font-weight: 600; font-size: 26px; }
.panel p { margin: 0 0 16px; color: var(--ink-dim); line-height: 1.5; }
.panel p.hint { margin: 12px 0 0; font-size: 13px; }
.panel .stats { display: flex; justify-content: center; gap: 12px; margin: 0 0 18px; flex-wrap: wrap; }
.panel .stat {
  min-width: 118px; padding: 10px 14px; border-radius: 12px;
  background: rgba(42,33,28,.85); border: 1px solid var(--line);
}
.panel .stat b { display: block; font-size: 26px; font-variant-numeric: tabular-nums; }
.panel .stat span { font-size: 12px; color: var(--ink-dim); }
.panel-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.progress { font-size: 13px; color: var(--ink-dim); margin-bottom: 12px; min-height: 18px; font-variant-numeric: tabular-nums; }

.deck-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.deck-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(42,33,28,.9); color: var(--ink);
  border: 1px solid var(--line); font-size: 14px;
}
.deck-chip:hover { border-color: rgba(255,240,220,.3); }
.deck-chip i { width: 14px; height: 14px; border-radius: 3px; }
.deck-chip em {
  font-style: normal; font-size: 12px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; background: #b73f2e; color: #fff;
}
.deck-add { background: var(--accent); color: #1b1410; font-weight: 600; border-color: transparent; }
.deck-add:disabled { opacity: .45; }
/* Leçon du jour faite : tampon à côté du titre du panneau ; « ＋ Piocher N de plus » (quota de nouvelles épuisé) */
.done-seal {
  display: inline-grid; place-items: center; width: 1.3em; height: 1.3em; margin-left: .4em; vertical-align: .05em;
  border: 2px solid rgba(226,88,66,.92); border-radius: 50%; color: #e2664e; background: rgba(226,88,66,.08);
  font: 600 .85em/1 "Klee One", serif; font-style: normal; transform: rotate(-14deg);
}
.btn.more-new { color: var(--accent); box-shadow: inset 0 0 0 1px rgba(232,160,90,.6), 0 3px 0 rgba(0,0,0,.35); }
.btn.more-new:active { box-shadow: inset 0 0 0 1px rgba(232,160,90,.6), 0 1px 0 rgba(0,0,0,.35); }
body:not([data-lay="wide"]) .panel-actions > .btn.more-new { justify-content: center; min-height: 46px; }

.legend {
  margin-top: auto;
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  padding: 0 16px 10px;
  font-size: 12px; color: var(--ink-dim);
  transition: opacity .6s;
}
body.mode-library .legend { opacity: 0; }

/* ---------- Carte bristol (grande) ---------- */
.flycard {
  position: absolute; inset: 0;
  perspective: 1400px;
  transform-origin: 50% 50%;
  will-change: transform;
}
.flip {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3,.7,.2,1.1);
  cursor: pointer;
}
.flycard.flipped .flip { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(var(--card-h) * .118 - 1px), var(--rule-blue) calc(var(--card-h) * .118 - 1px) calc(var(--card-h) * .118)) 0 calc(var(--card-h) * .24) / 100% 100% no-repeat,
    linear-gradient(180deg, transparent calc(var(--card-h) * .215), var(--rule-red) calc(var(--card-h) * .215), var(--rule-red) calc(var(--card-h) * .222), transparent calc(var(--card-h) * .222)),
    radial-gradient(120% 90% at 30% 20%, #fffdf8, var(--paper));
  box-shadow: 0 1px 0 var(--paper-edge), 0 18px 40px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.25);
  color: var(--pencil);
}
.face.back { transform: rotateY(180deg); }
/* La face tournée à l'opposé quitte le rendu une fois le retournement fini (.6 s) : un seul grand calque par carte */
.flycard:not(.flipped) .face.back, .flycard.flipped .face.front { visibility: hidden; transition: visibility 0s .6s; }
.flycard.flipped .face.back, .flycard:not(.flipped) .face.front { visibility: visible; transition: visibility 0s; }
.face-head {
  position: absolute; left: 0; right: 0; top: 0; height: 21.5%;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 4.5%;
  font-size: calc(var(--card-w) * .03);
  color: var(--paper-faint);
  letter-spacing: .3px;
}
.face-head > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; white-space: nowrap; }
.tag i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.front-kanji, .front-text {
  position: absolute; left: 0; right: 0; top: 21.5%; bottom: 0;
  display: grid; place-items: center;
  font-family: 'Klee One', serif; font-weight: 600;
  line-height: 1.1; color: #1d1a17;
  padding: 0 6% 3%;
  text-align: center;
}
.front-kanji { font-size: calc(var(--card-h) * .56); line-height: 1; }
.front-hint {
  position: absolute; right: 4.5%; bottom: 5%;
  font-family: Caveat, cursive; font-size: calc(var(--card-w) * .042);
  color: var(--paper-faint);
}
.back-head-kanji { font-family: 'Klee One', serif; font-weight: 600; color: #1d1a17; font-size: calc(var(--card-h) * .15); }
.back-head-text {
  font-family: 'Klee One', serif; font-weight: 600; color: #1d1a17; font-size: calc(var(--card-h) * .085);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.back-meaning { font-family: Caveat, cursive; font-weight: 700; color: var(--ko); font-size: calc(var(--card-h) * .15); }
.back-body {
  position: absolute; left: 4.5%; right: 4.5%; top: 24%; bottom: 0;
  font-family: Caveat, cursive; color: var(--pen);
  font-size: calc(var(--card-h) * .098);
  line-height: calc(var(--card-h) * .118);
}
.back-body .row { display: flex; gap: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.back-body .lbl { color: var(--paper-faint); min-width: 3.2em; }
.back-body .jp { font-family: 'Klee One', serif; font-size: .82em; }
.back-answer {
  position: absolute; left: 6%; right: 6%; top: 22%; bottom: 4%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
  text-align: center; font-family: Caveat, cursive; color: var(--pen);
}
.back-answer .answer { font-weight: 700; line-height: 1.05; }
.back-answer .note { font-size: calc(var(--card-h) * .08); color: #4a5a8a; line-height: 1.2; }
.flycard.blanking .face > * { opacity: 0; transition: opacity .25s; }

/* ---------- Tiroir ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(400px, 100vw);
  background: #241c18; border-left: 1px solid var(--line);
  box-shadow: -20px 0 40px rgba(0,0,0,.4);
  transform: translateX(105%); transition: transform .3s ease;
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer.wide { width: min(560px, 100vw); }
.drawer .btn-ghost { min-height: 40px; min-width: 40px; }
.drawer .btn { min-height: 44px; }
.modal .btn, .modal .btn-ghost { min-height: 42px; }
.drawer .field input, .modal .field input { min-height: 42px; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.drawer-body { overflow-y: auto; padding: 14px 18px 24px; }
.drawer-empty { color: var(--ink-faint); font-size: 14px; }

/* Éditeur */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; font-size: 13px; color: var(--ink-dim); }
.field input, .field select, .import textarea, .search {
  width: 100%; padding: 9px 11px; border-radius: 8px;
  border: 1px solid rgba(255,240,220,.16); background: #1a1411; color: var(--ink);
  font: inherit; font-size: 14px;
}
.field input:focus, .field select:focus, .import textarea:focus, .search:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.editor-form .btn { width: 100%; justify-content: center; }
.import { margin: 16px 0 8px; font-size: 13px; color: var(--ink-dim); }
.import summary { cursor: pointer; margin-bottom: 8px; }
.import textarea { resize: vertical; margin-bottom: 8px; font-size: 13px; }
.edit-title { font-size: 13px; font-weight: 600; color: var(--ink-dim); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .6px; }
.edit-list { display: flex; flex-direction: column; gap: 6px; }
.edit-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
  padding: 2px 2px 2px 10px; border-radius: 8px; background: var(--paper); color: var(--pencil); font-size: 13px;
}
.edit-row .ef { font-weight: 600; color: #1d1a17; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-row .eb { color: var(--pen); font-family: Caveat, cursive; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bx {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 4px;
  font-style: normal; font-size: 11px; font-weight: 700; color: #1b1410;
}
.bx.res { background: #9a8b7a; }
/* Paliers 6 et 7 (compartiment 5) : une ou deux pointes ; archivée : pastille kraft */
.bx { position: relative; }
.bx .pips { position: absolute; top: -8px; right: -5px; font-size: 14px; line-height: 1; letter-spacing: -2px; color: #2f5fa3; }
.bx.arch { background: #b88a55; font-size: 12px; }
.front-label .meta b .hi { font-style: normal; font-size: 10px; font-weight: 600; color: #2f5fa3; margin-left: 5px; }
body:not([data-lay="wide"]) .front-label .meta b .hi { font-size: 14px; margin-left: 3px; }
.edit-row .del, .edit-row .ed {
  display: grid; place-items: center; min-width: 40px; min-height: 40px;
  border: 0; background: transparent; color: #9a8b7a; font-size: 15px; padding: 0; border-radius: 6px;
}
.edit-row .del:hover { color: var(--ko); background: rgba(217,96,76,.12); }
.edit-row .ed:hover { color: var(--pen); background: rgba(31,58,138,.1); }
.danger-zone { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.btn-ghost.danger { color: #e98a79; border-color: rgba(217,96,76,.35); }

/* Modale nouvelle boîte */
.modal {
  width: min(420px, calc(100vw - 32px));
  padding: 22px; border-radius: 16px;
  border: 1px solid var(--line); background: #241c18; color: var(--ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal::backdrop { background: rgba(10,7,5,.6); }
.modal h2 { margin: 0 0 16px; font-family: 'Klee One', serif; font-weight: 600; font-size: 22px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { position: relative; }
.swatch input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.swatch span {
  display: block; width: 40px; height: 40px; border-radius: 9px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.swatch input:checked + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.swatch input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media (max-width: 640px) {
  .veil {
    background: linear-gradient(180deg,
      rgba(29,23,20,.96) 0%, rgba(29,23,20,.9) 58%, rgba(29,23,20,.5) 70%, rgba(29,23,20,0) 78%);
  }
  .topbar { padding: 10px 14px; gap: 8px; }
  .brand p { display: none; }
  .btn { padding: 11px 14px; font-size: 14px; }
  .btn .kbd { display: none; }
  .legend { display: none; }
  .panel h2 { font-size: 21px; }
  .panel .stat { min-width: 92px; padding: 8px 10px; }
  .panel .stat b { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .flip, .mini, .lid, .world, .stage, .deckbox.slide, .drawer, .veil, .box-shadow, .pile-shadow, .pile-label, .legend { transition-duration: .01s; }
  .actions .btn, .panel { animation: none; }
}

.linkbtn {
  border: 0; background: none; padding: 0;
  color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px; font-size: 13px;
}
.linkbtn:hover { color: var(--ink); }

/* ---------- Classeur : toutes les cartes d'une boîte ---------- */
.browse-tools {
  position: sticky; top: -14px; z-index: 2;
  margin: -14px -18px 0; padding: 14px 18px 10px;
  background: #241c18; border-bottom: 1px solid var(--line);
}
.search { width: 100%; min-height: 42px; -webkit-appearance: none; appearance: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fchip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-dim); border: 1px solid var(--line); font-size: 13px;
}
.fchip i { width: 9px; height: 9px; border-radius: 2px; }
.fchip small { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.fchip:hover { color: var(--ink); border-color: rgba(255,240,220,.25); }
.fchip.on { background: var(--accent); color: #1b1410; border-color: transparent; font-weight: 600; }
.fchip.on small { color: rgba(27,20,16,.7); }
.browse-count { margin: 10px 0 8px; font-size: 12px; color: var(--ink-faint); }
.blist { display: flex; flex-direction: column; gap: 6px; }
.brow {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  width: 100%; min-height: 48px; padding: 6px 12px 6px 10px; border: 0; border-radius: 8px;
  background: var(--paper); color: var(--pencil); text-align: left;
}
.brow:hover { filter: brightness(.96); }
.brow:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.brow .bt { display: flex; flex-direction: column; min-width: 0; }
.brow .bf, .brow .bb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brow .bf { font-family: 'Klee One', serif; font-weight: 600; font-size: 16px; color: #1d1a17; line-height: 1.3; }
.brow .bb { font-size: 12.5px; color: #5d5044; }
.brow .bd { font-size: 11.5px; color: var(--paper-faint); white-space: nowrap; }
.brow .bd.due { color: var(--ko-paper); font-weight: 600; }
.blist .more { justify-content: center; margin-top: 6px; }

/* Une carte en grand dans le classeur */
.card-nav { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.card-nav .nav-pos { margin-left: auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.card-nav [data-act="prev"], .card-nav [data-act="next"] { min-width: 44px; font-size: 18px; line-height: 1; }
.card-preview {
  --card-w: min(440px, calc(100vw - 56px));
  --card-h: calc(var(--card-w) * .6);
  position: relative; width: var(--card-w); height: var(--card-h);
  margin: 0 auto 16px;
}
.card-preview .flycard { will-change: auto; }
.card-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.card-facts > div { padding: 8px 10px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); }
.card-facts dt { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .5px; }
.card-facts dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; }
.card-facts dd.due { color: var(--ko-text); }
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.card-acts .btn { flex: 1 1 auto; justify-content: center; }
.card-edit { margin-top: 6px; }
.form-msg { min-height: 1.2em; margin: 8px 0 0; font-size: 13px; color: var(--ok); }

/* Réglages d'une boîte */
.field select { min-height: 42px; }
.settings-meta { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.settings-danger { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

/* Remettre une boîte prête à l'emploi (modale « Nouvelle boîte ») */
.restore { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.restore h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink-dim); }
.restore-list { display: flex; flex-direction: column; gap: 8px; }
.restore-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.restore-row i { flex: none; width: 16px; height: 16px; border-radius: 4px; }
.restore-row span { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.restore-row small { margin-left: 8px; font-size: 12px; color: var(--ink-faint); }
.restore-row .btn { padding: 9px 14px; font-size: 13px; min-height: 40px; }

/* Sauvegarde (panneau de l'armoire) */
.backup-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.backup-row .linkbtn { min-height: 40px; padding: 0 6px; }

/* ---------- Gestes sur la grande carte ---------- */
.card-slot { touch-action: none; }
.stamp {
  position: absolute; top: 9%; z-index: 2;
  padding: 4px 12px; border-radius: 8px; border: 3px solid currentColor;
  font-family: Inter, sans-serif; font-weight: 700; font-size: clamp(14px, calc(var(--card-w) * .05), 22px);
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  background: rgba(255,253,246,.85);
  pointer-events: none;
  opacity: 0; transition: opacity .15s;
}
.stamp.ok { left: 5%; color: #26774a; transform: rotate(-10deg); opacity: var(--sw-ok, 0); }
.stamp.ko { right: 5%; color: #c2412f; transform: rotate(10deg); opacity: var(--sw-ko, 0); }
.flycard.dragging .stamp { transition: none; }
.flycard.dragging .flip { cursor: grabbing; }
.flycard.blanking .stamp { opacity: 0; }
.swipe-hint { flex-basis: 100%; margin: 0 0 -4px; text-align: center; font-size: 12.5px; color: var(--ink-faint); }

/* Sonde invisible : taille de la carte et marge de sécurité, lues par la caméra (app.js · measureUI) */
.probe {
  position: fixed; left: 0; top: 0; z-index: -1;
  box-sizing: content-box;
  width: var(--card-w); height: var(--card-h);
  padding-bottom: env(safe-area-inset-bottom);
  visibility: hidden; pointer-events: none;
}

/* Écrans tactiles : pas de raccourcis clavier affichés */
@media (pointer: coarse) {
  .btn .kbd { display: none; }
}

/* ---------- Téléphone et paysage bas (profils posés par app.js sur body[data-lay]) ---------- */
body[data-lay="phone"], body[data-lay="short"] {
  --cam: 1.3s cubic-bezier(.5, 0, .25, 1);
}
/* Ombres sans flou (moins coûteuses sur les téléphones modestes) */
body:not([data-lay="wide"]) .box-shadow,
body:not([data-lay="wide"]) .pile-shadow {
  filter: none; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.35) 60%, transparent);
  transform: scale(1.12);
}
/* Voile : couvre l'armoire jusqu'au haut du couvercle (--veil-y calculé par la caméra) */
body:not([data-lay="wide"]) .veil {
  background: linear-gradient(180deg,
    rgba(29,23,20,.98) 0, rgba(29,23,20,.96) calc(var(--veil-y, 60vh) - 60px), rgba(29,23,20,0) var(--veil-y, 60vh));
}
/* Pendant une leçon, l'armoire et les autres boîtes disparaissent une fois la caméra arrivée
   (le voile ne peut pas tout couvrir sur un écran étroit, et c'est autant de calques en moins à composer) */
body:not([data-lay="wide"]).mode-lesson .cabinet,
body:not([data-lay="wide"]).mode-lesson .deckbox:not(.on-desk) { visibility: hidden; transition: visibility 0s 1.4s; }
/* … puis quittent le rendu pour de bon (classe posée par app.js · setMode une fois la caméra arrivée) : leurs calques sont libérés */
body.cab-off:not([data-lay="wide"]).mode-lesson .cabinet,
body.cab-off:not([data-lay="wide"]).mode-lesson .deckbox:not(.on-desk) { display: none; }
/* … et le voile, qui n'a alors plus rien à estomper, s'efface (un calque plein écran de moins) */
body.cab-off:not([data-lay="wide"]).mode-lesson .veil { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
/* Pas de halo sur le bureau (grand plan à texturer pour une teinte à peine visible sur petit écran) */
body:not([data-lay="wide"]) .desk-glow { display: none; }
/* Étiquettes lisibles malgré l'échelle réduite de la scène */
body:not([data-lay="wide"]) .end-plate { gap: 1px; padding: 3px 8px; }
body:not([data-lay="wide"]) .end-title { font-size: 21px; }
body:not([data-lay="wide"]) .end-meta { font-size: 14px; }
body:not([data-lay="wide"]) .front-labels { padding: 0 6px; }
body:not([data-lay="wide"]) .front-label .plate { gap: 7px; padding: 3px 9px 3px 4px; }
body:not([data-lay="wide"]) .front-label .num { width: 32px; height: 32px; font-size: 20px; border-radius: 6px; }
body:not([data-lay="wide"]) .front-label .meta b { font-size: 22px; line-height: 1; }
body:not([data-lay="wide"]) .front-label .meta small { font-size: 15px; }
body:not([data-lay="wide"]) .front-label .w,
body:not([data-lay="wide"]) .front-label .rh { display: none; }
body:not([data-lay="wide"]) .legend { display: none; }

/* En-tête compact + menu « ⋯ » */
body:not([data-lay="wide"]) .topbar {
  flex-wrap: nowrap; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
}
body:not([data-lay="wide"]) .brand { gap: 10px; min-width: 0; }
body:not([data-lay="wide"]) .brand-mark { width: 34px; height: 34px; font-size: 20px; border-radius: 9px; flex: none; }
body:not([data-lay="wide"]) .brand h1 { font-size: 20px; }
body:not([data-lay="wide"]) .brand p { display: none; }
body:not([data-lay="wide"]) .topbar-right { flex-wrap: nowrap; gap: 6px; min-width: 0; }
body:not([data-lay="wide"]) #dayChip {
  min-height: 36px; padding: 6px 11px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body:not([data-lay="wide"]) .more-btn {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  font-size: 22px; line-height: 1; color: var(--ink);
}
body:not([data-lay="wide"]) .more-btn[aria-expanded="true"] { background: var(--bg-2); border-color: rgba(255,240,220,.25); }
body:not([data-lay="wide"]) .more-menu {
  display: none;
  position: absolute; z-index: 20; top: calc(100% - 2px); right: max(12px, env(safe-area-inset-right));
  flex-direction: column; align-items: stretch; gap: 6px;
  min-width: 220px; padding: 8px;
  border-radius: 14px; border: 1px solid var(--line);
  background: #2a211c; box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
body:not([data-lay="wide"]) .more-menu.open { display: flex; }
body:not([data-lay="wide"]).mode-library .more-menu .lesson-only { display: none; }
body:not([data-lay="wide"]) .more-menu > * {
  min-height: 44px; justify-content: space-between;
  border-radius: 10px; font-size: 15px;
}
body:not([data-lay="wide"]) .more-menu .btn-ghost { text-align: left; padding: 0 14px; }
body:not([data-lay="wide"]) .more-menu .chip-select select { min-height: 36px; font-size: 16px; }

/* Panneau d'une leçon : infos en haut, action principale en bas (au pouce), actions secondaires groupées */
.panel-sec { display: contents; }
.panel-sec .bs { display: none; }
body:not([data-lay="wide"]) .panel h2 { font-size: 20px; margin-bottom: 8px; }
body:not([data-lay="wide"]).mode-lesson .panel > p:not(.hint) { display: none; }
body:not([data-lay="wide"]) .panel .stats { flex-wrap: nowrap; gap: 6px; margin-bottom: 10px; }
body:not([data-lay="wide"]) .panel .stat { flex: 1 1 0; min-width: 0; padding: 6px 6px; border-radius: 10px; }
body:not([data-lay="wide"]) .panel .stat b { font-size: 20px; }
body:not([data-lay="wide"]) .panel .stat span { font-size: 11px; display: block; line-height: 1.2; }
body:not([data-lay="wide"]) .panel-actions { display: grid; justify-content: stretch; gap: 8px; }
body:not([data-lay="wide"]) .panel-actions > .btn-primary { justify-content: center; min-height: 52px; font-size: 16px; }
body:not([data-lay="wide"]) .panel-sec { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
body:not([data-lay="wide"]) .panel-sec .btn {
  flex-direction: column; justify-content: center; gap: 2px;
  min-height: 54px; padding: 6px 4px; font-size: 12.5px; font-weight: 600;
}
body:not([data-lay="wide"]) .panel-sec .bi { font-size: 18px; line-height: 1; }
body:not([data-lay="wide"]) .panel-sec .bl { display: none; }
body:not([data-lay="wide"]) .panel-sec .bs { display: block; }
body:not([data-lay="wide"]) .panel .hint { margin: 8px 0 0; font-size: 12.5px; }

/* Session : progression en haut, boutons de réponse en bas */
body:not([data-lay="wide"]) .progress {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 4px;
  min-height: 44px; margin-bottom: 6px; font-size: 14px; white-space: nowrap;
}
body:not([data-lay="wide"]) .progress .stop {
  display: inline-grid; place-items: center; min-height: 40px; padding: 0 12px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink);
}
body:not([data-lay="wide"]) .hand:not(.in-session) .actions { display: none; }
body:not([data-lay="wide"]) .hand.in-session .actions {
  width: 100%; max-width: 520px; margin-top: auto; gap: 10px;
}
body:not([data-lay="wide"]) .hand.in-session .actions .btn {
  flex: 1 1 0; justify-content: center; min-height: 56px; padding: 10px 6px; font-size: 15px;
  white-space: nowrap; gap: 6px;
}
@media (max-width: 380px) {
  body:not([data-lay="wide"]) .hand.in-session .actions .btn { font-size: 14px; letter-spacing: -.1px; }
}

/* ----- Téléphone en portrait ----- */
body[data-lay="phone"] {
  --card-w: min(440px, calc(100vw - 28px), calc((100svh - 450px) / .6));
  --card-h: calc(var(--card-w) * .6); /* à redéclarer : sinon calculée sur :root avec l'ancienne largeur */
}
body[data-lay="phone"] .hand {
  flex: 1 1 auto; min-height: 0;
  padding: 8px max(14px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
body[data-lay="phone"].mode-lesson .hand:not(.in-session) .panel {
  flex: 1 1 auto; display: flex; flex-direction: column; width: 100%;
  pointer-events: none; /* laisse passer les touchers vers la boîte (compartiments, réserve) */
}
body[data-lay="phone"].mode-lesson .panel > * { pointer-events: auto; }
body[data-lay="phone"].mode-lesson .panel .hint { order: 1; margin-top: auto; }
body[data-lay="phone"].mode-lesson .panel-actions { order: 2; margin-top: auto; }
body[data-lay="phone"].mode-lesson .panel:has(.hint) .panel-actions { margin-top: 8px; }
/* Armoire : la scène en haut, les boîtes en bandeau défilant en bas */
body[data-lay="phone"].mode-library .hand { justify-content: flex-end; padding-left: 0; padding-right: 0; }
body[data-lay="phone"].mode-library .panel {
  width: 100%; padding-top: 18px;
  background: linear-gradient(rgba(29,23,20,0), rgba(29,23,20,.88) 22px);
}
body[data-lay="phone"].mode-library .panel h2,
body[data-lay="phone"].mode-library .panel > p { display: none; }
/* Trois actions (les puces par boîte ne sont plus affichées : la boîte se touche dans l'armoire) : « Nouvelle boîte »
   et « Statistiques » côte à côte, « Créer ou importer un cours » pleine largeur, puis une seule ligne de liens. */
body[data-lay="phone"] .deck-list {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 8px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
body[data-lay="phone"] .deck-chip { min-height: 44px; justify-content: center; padding: 8px 10px; white-space: nowrap; }
body[data-lay="phone"] .deck-add { order: 1; }
body[data-lay="phone"] .deck-stats { order: 2; }
body[data-lay="phone"] .deck-ai { order: 3; grid-column: 1 / -1; }
body[data-lay="phone"] .backup-row {
  flex-wrap: nowrap; justify-content: space-between; gap: 0 4px; margin-top: 4px;
  padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
}
body[data-lay="phone"] .backup-row .linkbtn { padding: 0 8px; font-size: 14px; white-space: nowrap; }
body:not([data-lay="wide"]) .backup-row .lk-more { display: none; }

/* ----- Téléphone en paysage : colonne d'interface à gauche, scène à droite ----- */
body[data-lay="short"] {
  --card-w: min(440px, 50vw, calc((100svh - 190px) / .6));
  --card-h: calc(var(--card-w) * .6);
}
body[data-lay="short"] .hand {
  flex: 1 1 auto; min-height: 0;
  width: min(54vw, 520px);
  padding: 6px 12px calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow-y: auto; scrollbar-width: thin;
  pointer-events: auto;
}
body[data-lay="short"].mode-library .hand { width: min(42vw, 380px); }
body[data-lay="short"] .panel h2 { font-size: 18px; margin-bottom: 4px; }
body[data-lay="short"] .panel > p { font-size: 13px; margin-bottom: 8px; }
body[data-lay="short"] .deck-list { flex-direction: column; align-items: stretch; }
body[data-lay="short"] .deck-chip { min-height: 44px; }
body[data-lay="short"] .deck-chip em { margin-left: auto; }
body[data-lay="short"] .progress { margin-bottom: 4px; min-height: 40px; }
body[data-lay="short"] .hand.in-session .actions { margin-top: 10px; min-height: 0; }
body[data-lay="short"] .hand.in-session .actions .btn { min-height: 48px; }
body[data-lay="short"] .swipe-hint { display: none; }
body[data-lay="short"] .progress, body[data-lay="short"] .actions { flex: none; }

/* ---------- Tiroir et modale sur petit écran : feuille plein écran ---------- */
@media (max-width: 640px), (max-height: 519px) {
  .drawer, .drawer.wide {
    width: 100%; border-left: 0;
    transform: translateY(102%);
    transition: transform .32s cubic-bezier(.3,.7,.3,1);
  }
  .drawer.open { transform: none; }
  .drawer-head {
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left));
    background: #2a211c;
  }
  .drawer-head h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #drawerClose { flex: none; width: 44px; height: 44px; font-size: 17px; }
  .drawer .btn-ghost { min-height: 44px; }
  .drawer-body {
    flex: 1 1 auto; overscroll-behavior: contain;
    padding: 14px max(16px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .browse-tools { margin: -14px -16px 0; padding: 14px 16px 10px; }
  .card-preview { --card-w: min(440px, calc(100vw - 32px)); }
  .card-nav .btn-ghost { min-height: 44px; }
  .edit-row .del, .edit-row .ed { min-width: 44px; min-height: 44px; }
  .fchip { min-height: 44px; }
  .modal {
    width: 100%; max-width: 100%; max-height: calc(100dvh - 24px);
    margin: auto 0 0; border-radius: 18px 18px 0 0; border-width: 1px 0 0;
    padding: 20px max(18px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .modal .btn, .modal .btn-ghost { min-height: 46px; }
  .modal-actions .btn { flex: 1; justify-content: center; }
  .swatch span { width: 44px; height: 44px; }
}
/* Champs à 16 px : iOS ne zoome pas au focus */
@media (max-width: 640px), (pointer: coarse) {
  .field input, .field select, .import textarea, .search { font-size: 16px; }
}

/* Ordinateur : la liste des boîtes de l'armoire tient sur deux lignes au plus */
body[data-lay="wide"].mode-library .panel { width: min(980px, 100%); }

/* ===== Lot C · Audio TTS (js/tts.js) =====
   Bouton 🔊 au dos des cartes. Masqué tant qu'aucune voix de sa langue n'existe :
   tts.js pose html.tts-ja / .tts-en / .tts-fr quand une voix est trouvée. */
.tts-btn {
  display: none;
  position: absolute; right: 3.5%; bottom: 5%; z-index: 3;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--paper-edge);
  background: rgba(255, 253, 248, .92);
  color: var(--pencil); font-size: 20px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
html.tts-ja .tts-btn[data-lang="ja"],
html.tts-en .tts-btn[data-lang="en"],
html.tts-fr .tts-btn[data-lang="fr"] { display: inline-flex; }
.tts-btn:hover { background: #fff; }
.tts-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tts-btn.speaking { border-color: var(--accent); animation: tts-pulse 1s ease-in-out infinite; }
@keyframes tts-pulse { 50% { box-shadow: 0 0 0 5px rgba(0, 0, 0, .1); } }
@media (prefers-reduced-motion: reduce) { .tts-btn.speaking { animation: none; } }

/* ===== PWA (js/pwa.js) : bannière de mise à jour, astuce iOS, bouton « Installer l'app » ===== */
.pwa-dock {
  position: fixed; z-index: 60;
  left: max(12px, env(safe-area-inset-left)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: min(420px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  pointer-events: none;
}
.pwa-note {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px;
  background: var(--bg-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font: 500 13px/1.35 Inter, system-ui, sans-serif;
}
#pwaIos { border-radius: 16px; align-items: flex-start; padding: 10px 8px 10px 14px; }
.pwa-note-text { min-width: 0; }
.pwa-note-action {
  flex: none; min-height: 32px; padding: 4px 14px; border: 0; border-radius: 999px;
  background: var(--accent); color: #2a1a08; font-weight: 700; font-size: 13px;
}
.pwa-note-action:disabled { opacity: .6; cursor: default; }
.pwa-note-close {
  flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-dim); font-size: 20px; line-height: 1;
}
.pwa-note-close:hover { color: var(--ink); background: var(--line); }

/* =====================================================================
   Lot D · « Créer un cours avec une IA » (js/ai-course.js) — bloc autonome
   ===================================================================== */
.deck-ai {
  background: rgba(232,160,90,.14); color: var(--accent);
  border-color: rgba(232,160,90,.55); font-weight: 600;
}
.deck-ai:hover { background: rgba(232,160,90,.24); border-color: var(--accent); }

/* Bouton dans la fenêtre « Nouvelle boîte » */
.ai-entry { margin: -6px 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ai-entry-btn {
  width: 100%; justify-content: flex-start; text-align: left; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(232,160,90,.14); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(232,160,90,.55);
}
.ai-entry-btn:hover { background: rgba(232,160,90,.22); }
.ai-entry-ico { font-size: 22px; line-height: 1; }
.ai-entry-btn b { display: block; font-size: 14px; color: var(--accent); }
.ai-entry-btn small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-dim); line-height: 1.35; }

/* Étapes */
.ai-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 0 16px; }
.ai-step {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 6px 8px; border-radius: 10px;
  background: var(--bg-2); color: var(--ink-dim); border: 1px solid var(--line); font-size: 13px;
}
.ai-step b {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,240,220,.1); font-size: 12px;
}
.ai-step.on { background: var(--accent); color: #1b1410; border-color: transparent; font-weight: 600; }
.ai-step.on b { background: rgba(0,0,0,.18); }
.ai-step.done b { background: var(--ok); color: #0e2416; }
.ai-step:disabled { opacity: .45; cursor: default; }
.ai-step:not(:disabled):not(.on):hover { color: var(--ink); border-color: rgba(255,240,220,.25); }
.ai-step:focus-visible, .ai-drop:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.ai-pane[hidden] { display: none; }
.ai code { padding: 1px 5px; border-radius: 4px; background: rgba(255,240,220,.1); font-size: .92em; }
.ai-lead { margin: 0 0 8px; color: var(--ink); line-height: 1.5; font-size: 14px; }
.ai-how { margin: 0 0 16px; padding-left: 20px; color: var(--ink-dim); font-size: 13.5px; line-height: 1.55; }
.ai-how li { margin-bottom: 3px; }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.ai-grid .ai-wide { grid-column: 1 / -1; }
.ai-grid [hidden] { display: none; }
.ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 6px; }
.ai-actions .btn { flex: 1 1 auto; justify-content: center; }
.ai-actions .btn.ok { background: var(--ok); color: #0e2416; }
.ai-status { min-height: 1.3em; margin: 6px 0 8px; font-size: 13px; color: var(--ok); line-height: 1.4; }
.ai-details { margin: 6px 0 12px; font-size: 13px; color: var(--ink-dim); }
.ai-details summary { cursor: pointer; padding: 6px 0; min-height: 32px; }
.ai-ta {
  display: block; width: 100%; padding: 10px 12px; border-radius: 8px; resize: vertical;
  border: 1px solid rgba(255,240,220,.16); background: #1a1411; color: var(--ink);
  font: inherit; font-size: 13px; line-height: 1.45;
}
.ai-ta:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-tip { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }
.ai-next { width: 100%; justify-content: center; }

/* Import */
.ai-drop {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 22px 14px; border-radius: 14px; cursor: pointer;
  border: 2px dashed rgba(255,240,220,.28); background: rgba(42,33,28,.6); color: var(--ink);
}
.ai-drop:hover, .ai-drop.over { border-color: var(--accent); background: rgba(232,160,90,.1); }
.ai-drop-ico { font-size: 26px; line-height: 1; color: var(--accent); }
.ai-drop small { color: var(--ink-dim); font-size: 12.5px; }
.ai-file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ai-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: 12.5px; color: var(--ink-faint); }
.ai-or::before, .ai-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ai-errors:empty { display: none; }
.ai-err {
  margin: 10px 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px; line-height: 1.5;
  background: rgba(217,96,76,.13); border: 1px solid rgba(217,96,76,.5); color: #f3c9c0;
}
.ai-err b { display: block; margin-bottom: 4px; color: #ffb3a4; }
.ai-err p { margin: 0 0 6px; }
.ai-err ul { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; }
.ai-err .ai-more { font-size: 12.5px; margin: 4px 0 0; }
.ai-back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; }

/* Aperçu */
.ai-ok { margin: 0 0 8px; font-size: 14px; color: var(--ink-dim); }
.ai-ok b { color: var(--ok); font-size: 17px; }
.ai-lang { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line); font-size: 12px; text-transform: uppercase; }
.ai-desc { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-dim); line-height: 1.45; font-style: italic; }
.ai-warn {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  background: rgba(232,160,90,.12); border: 1px solid rgba(232,160,90,.45); color: #f0d2b0;
}
.ai-warn b { color: var(--accent); }
.ai-warn ul { margin: 4px 0 0; padding-left: 18px; }
.ai-warn details { margin-top: 6px; font-size: 12.5px; }
.ai-warn summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ai-h { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.ai-cards { display: flex; flex-direction: column; gap: 6px; }
.ai-card {
  display: grid; gap: 1px; padding: 8px 12px; border-radius: 8px;
  background: var(--paper); color: var(--pencil); min-width: 0;
}
.ai-card > * { min-width: 0; }
.ai-card b {
  font-family: 'Klee One', serif; font-weight: 600; font-size: 15px; line-height: 1.3; color: #1d1a17;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ai-card span {
  font-family: Caveat, cursive; font-size: 18px; line-height: 1.2; color: var(--pen);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ai-card i { font-size: 11.5px; color: var(--paper-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-showall { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; }
.ai-final { margin-top: 12px; }
.ai-final .btn-primary { flex: 2 1 160px; }
.ai-final .btn-ghost { flex: 1 1 120px; justify-content: center; }
.ai-create-msg { color: var(--accent); }

@media (max-width: 640px) {
  .ai-grid { grid-template-columns: 1fr; }
  .ai-step { flex-direction: column; gap: 2px; min-height: 52px; font-size: 12px; }
  .ai-ta { font-size: 16px; }
  .ai-actions .btn, .ai-final .btn-ghost { flex-basis: 100%; }
  .ai-entry { margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) { .ai-drop { transition: none; } }

/* =====================================================================================
   Lot E · Motivation & statistiques (js/stats.js)
   Éphéméride sur le bureau et sur l'armoire, ligne de prévision, bilan de session, vue Statistiques.
   ===================================================================================== */

/* ---------- Éphéméride : calendrier de bureau à pages arrachables (ordinateur et tablette seulement) ---------- */
.ephem, .ephem-shadow { position: absolute; opacity: 0; pointer-events: none; transition: opacity .3s; }
body:not([data-lay="wide"]) .ephem, body:not([data-lay="wide"]) .ephem-shadow { display: none; }
.ephem-shadow { border-radius: 50%; background: rgba(0,0,0,.5); filter: blur(9px); transform: translateZ(var(--z, 0px)); }
.ephem {
  cursor: pointer; transform-origin: 50% 100%;
  transform: translateZ(var(--z, 0px)) rotateX(-84deg);
  backface-visibility: hidden;
}
/* Le calendrier apparaît une fois la caméra arrivée : sur le bureau en leçon, sur l'armoire en bibliothèque */
body[data-lay="wide"].mode-lesson .ephem.les, body[data-lay="wide"].mode-lesson .ephem-shadow.les,
body[data-lay="wide"].mode-library .ephem.lib, body[data-lay="wide"].mode-library .ephem-shadow.lib {
  opacity: 1; transition: opacity .6s 1.2s;
}
body[data-lay="wide"].mode-lesson .ephem.les, body[data-lay="wide"].mode-library .ephem.lib { pointer-events: auto; }
.ephem-face {
  position: absolute; inset: 0; border-radius: 4px 4px 2px 2px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(180deg, #fdfaf2, #f0e9d8);
  box-shadow: 0 1px 0 #d9d0bb, 0 3px 0 #cfc5ac, 0 5px 0 #c4b99f, 0 8px 14px rgba(0,0,0,.35);
  color: #3b3530; text-align: center; overflow: hidden;
  transition: filter .2s;
}
.ephem:hover .ephem-face { filter: brightness(1.06); }
.ephem:focus-visible { outline: none; }
.ephem:focus-visible .ephem-face { box-shadow: 0 0 0 4px var(--accent), 0 8px 14px rgba(0,0,0,.35); }
.ephem-rings { position: absolute; left: 0; right: 0; top: 4px; display: flex; justify-content: space-around; padding: 0 20px; z-index: 2; }
.ephem-rings i {
  width: 9px; height: 18px; border-radius: 5px;
  background: linear-gradient(90deg, #7c7e84, #eceef2 45%, #6f7178);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.ephem-month {
  width: 100%; padding: 20px 0 2px; background: linear-gradient(180deg, #c1402f, #a92f22);
  color: #f8e6d4; font-family: 'Klee One', serif; font-weight: 600; font-size: 14px; letter-spacing: .5px;
  text-transform: capitalize;
}
.ephem-day { margin-top: 3px; font-family: 'Klee One', serif; font-weight: 600; font-size: 62px; line-height: 1; color: #2a221c; font-variant-numeric: tabular-nums; }
.ephem-dow { font-family: Caveat, cursive; font-weight: 700; font-size: 24px; line-height: 1; color: var(--pen); text-transform: capitalize; }
.ephem-streak { margin-top: 5px; font-size: 14px; font-weight: 700; color: #7a3a2c; white-space: nowrap; }
.ephem-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12px;
  background: linear-gradient(180deg, #7a5233, #5b3b27);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
/* Tampon hanko : la journée est faite */
.ephem-seal {
  position: absolute; right: 3px; top: 106px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2.5px solid #c23a2b; color: #c23a2b;
  font-family: 'Klee One', serif; font-weight: 600; font-size: 22px; line-height: 1;
  mix-blend-mode: multiply; opacity: 0; transform: rotate(-14deg) scale(1.7);
  transition: opacity .35s, transform .35s cubic-bezier(.3,1.5,.5,1);
}
.ephem.stamped .ephem-seal { opacity: .82; transform: rotate(-14deg) scale(1); }

/* ---------- Ligne de prévision et entrée « Statistiques » (panneau de la leçon) ---------- */
.fcline {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 14px;
  margin-top: 8px; font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.fcline b { color: var(--ink); font-weight: 600; }
.fcline .linkbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
@media (pointer: fine) { body[data-lay="wide"] .fcline { margin-top: 2px; } body[data-lay="wide"] .fcline .linkbtn { min-height: 30px; } }
.panel .fc-warn {
  flex-basis: 100%; max-width: 520px; margin: 0 auto 4px; padding: 8px 12px; border-radius: 10px;
  background: rgba(232,160,90,.12); border: 1px solid rgba(232,160,90,.45); color: #f0d2b0;
  font-size: 12.5px; line-height: 1.45; text-align: left;
}
.fc-warn b { color: var(--accent); font-weight: 600; }
.deck-stats { background: rgba(42,33,28,.9); }
.end-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.end-fc { color: #6b5745; }
body:not([data-lay="wide"]) .end-fc { display: none; }
/* Téléphone (leçon) : la ligne de prévision se colle au-dessus des boutons, comme l'indication */
body[data-lay="phone"].mode-lesson .panel .fcline { order: 1; margin-top: auto; margin-bottom: 0; }
body[data-lay="phone"].mode-lesson .panel .hint + .fcline { margin-top: 0; }
body[data-lay="phone"].mode-lesson .panel:has(.fcline) .panel-actions { margin-top: 4px; }

/* ---------- Bilan de fin de session ---------- */
.bilan {
  display: grid; gap: 7px; width: min(560px, 100%); margin: 0 auto 12px; padding: 8px 10px;
  border-radius: 12px; background: rgba(42,33,28,.85); border: 1px solid var(--line); text-align: left;
}
.bl-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; font-size: 13px; color: var(--ink-dim); }
.bl-line b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.bl-up b { color: var(--ok); }
.bl-down b { color: var(--ko-text); }
.bl-comps { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.bl-comp {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 6px;
  padding: 4px 7px 5px; border-radius: 8px; background: rgba(0,0,0,.2);
}
.bl-pill { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #1b1410; }
.bl-rate { display: grid; line-height: 1.05; }
.bl-rate b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bl-rate small { font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.bl-bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: rgba(255,240,220,.1); overflow: hidden; }
.bl-bar i { display: block; height: 100%; border-radius: 2px; }
.bl-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; }
.bl-mini {
  width: 19px; height: 12px; border-radius: 2px; font-style: normal; font-size: 8px; font-weight: 700; line-height: 10px; text-align: center;
  background: var(--paper); box-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.bl-mini.ok { color: #2e7d4f; border-top: 2px solid var(--ok); }
.bl-mini.ko { color: #b23a2a; border-top: 2px solid var(--ko); }
.bl-more { font-size: 11px; line-height: 12px; color: var(--ink-faint); }
.panel p.bl-note { margin: 0; text-align: center; font-size: 12.5px; color: var(--ok); }
.panel.has-bilan .stats { display: none; } /* le bilan remplace les trois compteurs (même place) */

/* ---------- Vue « Statistiques » (dans le tiroir large) ---------- */
.st { display: grid; gap: 4px; }
.st-sel { margin-bottom: 4px; }
.st-sec { margin: 0 0 14px; padding: 12px 14px 14px; border-radius: 12px; background: rgba(42,33,28,.7); border: 1px solid var(--line); }
.st-sec h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.st-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }
.st-streak { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.st-flame { display: flex; align-items: center; gap: 10px; }
.st-flame > b { font-size: 36px; line-height: 1; font-weight: 400; }
.st-big { font-size: 42px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.st-unit { font-size: 14px; color: var(--ink-dim); }
.st-meta { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 13px; color: var(--ink-dim); }
.st-meta b { color: var(--ink); font-weight: 600; }
.st-ok { color: var(--ok); }
.hm-rest { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 3px; font-size: 11px; color: var(--ink-dim); background: rgba(255,240,220,.06); vertical-align: middle; }

/* Heatmap : 20 semaines, du lundi au dimanche */
.hm-months { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 3px; margin-left: 20px; height: 15px; font-size: 10px; color: var(--ink-faint); }
.hm-months span { white-space: nowrap; overflow: visible; text-transform: capitalize; }
.hm-body { display: flex; gap: 4px; }
.hm-wd { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; flex: none; width: 16px; font-size: 9px; color: var(--ink-faint); text-align: center; align-items: center; }
.hm-grid { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, auto); grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.hm-c {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 3px;
  background: rgba(255,240,220,.06); font-size: 9px; line-height: 1; color: var(--ink-dim);
}
.hm-c.future { visibility: hidden; }
.hm-c.rest { background: rgba(255,240,220,.035); box-shadow: inset 0 0 0 1px rgba(255,240,220,.1); }
.hm-c.l1 { background: rgba(232,160,90,.34); }
.hm-c.l2 { background: rgba(232,160,90,.58); }
.hm-c.l3 { background: rgba(232,160,90,.8); }
.hm-c.l4 { background: #f0b06a; }
.hm-c.partial { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(20,12,8,.32) 3px 5px); }
/* Journée faite : petit tampon hanko */
.hm-c.done::after {
  content: ""; width: 46%; height: 46%; border-radius: 50%;
  border: 1.5px solid #b8352a; background: rgba(184,53,42,.3);
}
.hm-c.today { outline: 1.5px solid var(--ink); outline-offset: 1px; }

/* Indicateurs */
.st-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.st-kpi { padding: 9px 10px; border-radius: 10px; background: rgba(0,0,0,.2); min-width: 0; }
.st-kpi b { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-kpi span { display: block; font-size: 12px; color: var(--ink-dim); }
.st-kpi small { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-faint); }

/* Cartes par boîte */
.st-bars { display: grid; gap: 7px; }
.st-brow { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px 74px; align-items: center; gap: 8px; font-size: 13px; }
.st-brow b { text-align: right; font-variant-numeric: tabular-nums; }
.st-brow small { font-size: 11px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-btrack { display: block; height: 12px; border-radius: 6px; background: rgba(255,240,220,.07); overflow: hidden; }
.st-btrack i { display: block; height: 100%; min-width: 2px; border-radius: 6px; }
.st-pill { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: #1b1410; }
.st-pill.st-res { background: #9a8b7a; }
.st-pill.st-arch { background: #b88a55; font-family: 'Klee One', serif; }

/* Prévision : 14 jours */
.st-fcsum { margin: 0 0 8px; font-size: 13px; color: var(--ink-dim); }
.st-fcsum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fbars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; align-items: end; height: 128px; }
.fb { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.fb em { font-style: normal; font-size: 10px; line-height: 12px; min-height: 12px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.fb i { display: block; width: 100%; border-radius: 3px 3px 0 0; background: rgba(232,160,90,.6); }
.fb.fb-today i { background: #f0b06a; }
.fb span { font-size: 10px; line-height: 14px; color: var(--ink-faint); }
.fb.fb-today span { color: var(--ink); font-weight: 600; }
.fb.fb-mon { position: relative; }
.fb.fb-mon::before { content: ""; position: absolute; left: -3px; top: 14px; bottom: 0; width: 1px; background: rgba(255,240,220,.1); }
.st .fc-warn { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(232,160,90,.12); border: 1px solid rgba(232,160,90,.45); color: #f0d2b0; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 640px) {
  .st-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-sec { padding: 11px 11px 13px; }
  .st-brow { grid-template-columns: 26px minmax(0, 1fr) 38px 64px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .ephem, .ephem-shadow, .ephem-face, .ephem-seal { transition-duration: .01s; transition-delay: 0s !important; } }

/* ===== Lot F · Retard & robustesse d'apprentissage (js/app.js : Retard, Session, Grande carte, Classeur) =====
   Post-its des sangsues et moyens mnémotechniques, « ↶ Annuler », mode vacances, rattrapage. */

/* Post-its sur la grande carte bristol */
.postit {
  position: absolute; z-index: 3;
  font-family: Caveat, cursive; font-weight: 700; line-height: 1.05;
  box-shadow: 0 3px 6px rgba(0,0,0,.22), inset 0 -6px 10px rgba(0,0,0,.04);
  border: 0; border-radius: 1px 1px 6px 1px;
  text-align: left; overflow: hidden;
}
.postit.leech {
  left: 4%; bottom: 6%;
  padding: .25em .6em .3em;
  background: linear-gradient(170deg, #f59a8b, #ec7e6d);
  color: #5a150c; font-size: calc(var(--card-w) * .046);
  transform: rotate(-5deg);
}
.postit.memo {
  left: 3.5%; bottom: 3%;
  max-width: 52%; max-height: 24%;
  padding: .2em .55em .25em;
  background: linear-gradient(175deg, #fff08f, #f8df62);
  color: #3a2f16; font-size: calc(var(--card-h) * .07);
  transform: rotate(-2deg);
}
.postit.memo .memo-txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.postit.memo.invite { background: linear-gradient(175deg, #f7b0a3, #f0917f); color: #5a150c; font-size: calc(var(--card-h) * .065); }
.postit.memo.invite small { display: block; font-size: .8em; font-weight: 600; opacity: .8; }
button.postit { min-height: 44px; cursor: pointer; }
button.postit:hover { filter: brightness(1.04); }
button.postit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.face.back.has-memo .back-answer { bottom: 27%; }

/* Éditeur du moyen mnémotechnique, posé sur le verso */
.memo-edit {
  position: absolute; inset: 3%; z-index: 5;
  display: flex; flex-direction: column; gap: 6px;
  padding: 3% 4%;
  background: linear-gradient(175deg, #fff3a0, #f8e06a);
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  border-radius: 2px 2px 8px 2px;
  transform: rotate(-.6deg);
  cursor: default;
}
.memo-edit label { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; }
.memo-edit label span { font: 600 12px Inter, sans-serif; color: #6b5a2a; text-transform: uppercase; letter-spacing: .5px; }
.memo-edit textarea {
  flex: 1 1 auto; min-height: 44px; width: 100%; resize: none;
  padding: 4px 6px; border: 1px dashed rgba(90,70,20,.45); border-radius: 4px;
  background: rgba(255,255,255,.35); color: #2a2418;
  font-family: Caveat, cursive; font-size: max(16px, calc(var(--card-h) * .095)); line-height: 1.1;
}
.memo-edit textarea:focus { outline: 2px solid #c98a1a; outline-offset: 0; }
.memo-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.memo-acts .btn { min-height: 44px; padding: 8px 12px; font-size: 14px; }
.memo-acts .btn-ghost { margin-left: auto; min-width: 44px; min-height: 44px; color: #6b5a2a; border-color: rgba(90,70,20,.3); }

/* « ↶ Annuler » dans la rangée des réponses et sur l'écran de fin */
.actions .undo-btn { flex: none; min-width: 48px; min-height: 48px; padding: 0 12px; font-size: 16px; animation: pop .25s ease-out both; }
/* Téléphone : le bouton passe dans la ligne de progression, à côté de « Terminer » */
body:not([data-lay="wide"]) .actions .undo-btn { display: none; }
.progress .undo-pg { display: none; }
body:not([data-lay="wide"]) .progress .undo-pg {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; margin-left: 4px; font-size: 20px;
  border: 1px solid rgba(232,160,90,.5); border-radius: 999px; text-decoration: none; color: var(--ink);
}
.btn .jump { font-style: normal; margin-left: -2px; }
.panel .undo-end { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 10px auto 0; padding: 0 14px; }

/* Mode vacances : puce de l'en-tête, écriteau du panneau, étiquettes de l'armoire */
.vac-chip { min-height: 36px; color: var(--ink); cursor: pointer; border-color: rgba(232,160,90,.5); }
.vac-chip[hidden] { display: none; }
body:not([data-lay="wide"]) .vac-chip { flex: none; min-width: 44px; min-height: 44px; justify-content: center; padding: 0 10px; }
body:not([data-lay="wide"]) .vac-chip .vl { display: none; }
.vac-sign {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 16px;
  margin: 10px auto 0; max-width: 560px; padding: 8px 14px 10px;
  border-radius: 12px; border: 1px solid var(--line); background: #2a211c; box-shadow: 0 6px 16px rgba(0,0,0,.3);
}
.vac-sign .vac-card { grid-row: span 2; }
.vac-sign .btn { justify-self: start; }
.vac-sign .vac-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin-top: 16px; padding: 4px 16px 6px;
  background: radial-gradient(120% 90% at 30% 20%, #fffdf8, var(--paper));
  color: #b33b2c; border-radius: 3px;
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
  transform: rotate(-3deg);
  font-family: Caveat, cursive; line-height: 1;
}
.vac-sign .vac-card::before {
  content: ''; position: absolute; left: 50%; top: -16px; width: 44px; height: 18px; transform: translateX(-50%);
  border: 2px solid #8a7a68; border-bottom: 0; border-radius: 22px 22px 0 0;
}
.vac-sign .vac-card b { font-size: 30px; font-weight: 700; }
.vac-sign .vac-card span { font-size: 20px; color: #5d5044; }
.vac-sign p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.4; text-align: left; }
.vac-sign .btn { min-height: 44px; }
body.vacation .end-plate::after {
  content: 'Fermé — vacances';
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-7deg);
  padding: 0 8px; white-space: nowrap;
  background: #fff3a8; color: #b33b2c; border: 2px solid rgba(179,59,44,.7); border-radius: 3px;
  font-family: Caveat, cursive; font-weight: 700; font-size: 20px; line-height: 1.2;
}

/* Rattrapage : proposition discrète dans le panneau de la leçon */
.late-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 10px auto 0; max-width: 640px; padding: 6px 8px 6px 14px;
  border-radius: 12px; border: 1px solid rgba(232,160,90,.45); background: #33271e;
  box-shadow: 0 6px 16px rgba(0,0,0,.3);
  text-align: left;
}
.panel .late-note p { flex: 1 1 240px; margin: 0; font-size: 13px; line-height: 1.35; color: #f0d2b0; }
.late-note p b { color: var(--accent); }
.late-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-dim); }
.late-row label { display: inline-flex; align-items: center; gap: 6px; }
.late-row select {
  min-height: 44px; padding: 0 8px; border-radius: 8px;
  border: 1px solid rgba(255,240,220,.16); background: #1a1411; color: var(--ink); font: inherit; font-size: 16px;
}
.late-row .btn { min-height: 44px; padding: 8px 16px; }
.late-row .btn-ghost { min-height: 44px; }

/* Classeur : cartes difficiles et suspendues, post-it éditable */
.brow.susp { opacity: .62; }
.leech-flag { font-style: normal; font-weight: 700; color: var(--ko-paper); margin-right: 6px; }
.fchip .dot-leech { background: var(--ko); }
.susp-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-dim); }
.memo-form { margin-top: 14px; }
.memo-form textarea {
  width: 100%; min-height: 64px; resize: vertical;
  padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(255,240,220,.16);
  background: #2e2716; color: #fbe27a;
  font-family: Caveat, cursive; font-size: 20px; line-height: 1.15;
}
.memo-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .actions .undo-btn { animation: none; } }

/* ---------- Lot I · Intégration : panneau d'accueil compact sur ordinateur bas, jours de vacances ---------- */
/* La caméra (app.js · fitCamera) cale la boîte sous le bas mesuré du panneau ; sur les écrans peu hauts,
   on serre le panneau pour que la boîte garde une taille confortable (les 4 boutons tiennent sur une ligne). */
@media (max-height: 900px) {
  body[data-lay="wide"].mode-lesson .panel { width: min(780px, 100%); }
  body[data-lay="wide"].mode-lesson .panel h2 { font-size: 22px; margin-bottom: 2px; }
  body[data-lay="wide"].mode-lesson .panel > p:not(.hint) { margin-bottom: 10px; }
  body[data-lay="wide"].mode-lesson .panel .stats { gap: 10px; margin-bottom: 10px; }
  body[data-lay="wide"].mode-lesson .panel .stat { min-width: 104px; padding: 6px 12px; }
  body[data-lay="wide"].mode-lesson .panel .stat b { font-size: 22px; }
  body[data-lay="wide"].mode-lesson .panel p.hint { margin-top: 8px; }
  body[data-lay="wide"].mode-lesson .panel .late-note { margin-top: 6px; }
}
/* Lot I · jours de vacances dans le calendrier des statistiques (🏖 = jour en pause, ni fait ni manqué) */
.hm-c.pause { background: rgba(120,180,210,.16); box-shadow: inset 0 0 0 1px rgba(150,205,230,.28); font-size: 10px; }
.st-fcsum.st-vac { padding: 8px 12px; border-radius: 8px; background: rgba(120,180,210,.12); border: 1px solid rgba(150,205,230,.25); line-height: 1.45; }

/* =====================================================================
   Lot G · Accessibilité (WCAG 2.1 AA) — bloc autonome
   Couche sémantique de la scène, focus visible, fenêtre de confirmation, animations réduites.
   ===================================================================== */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #1b1410;
  font-weight: 600; font-size: 14px; text-decoration: none;
}
.skip-link:focus { top: max(8px, env(safe-area-inset-top)); }

/* Focus visible, dans la même teinte que le reste de l'interface (les règles plus précises, comme
   .brow ou .swatch, gardent la main : :where() ne pèse rien). Sur le papier, l'anneau passe au bleu du stylo. */
:where(button, a[href], summary, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.flycard :focus-visible, .edit-row button:focus-visible, .brow:focus-visible { outline-color: var(--pen); }
.brow:focus-visible { outline-color: var(--accent); }
.edit-row button:focus-visible { outline-offset: -2px; }
/* Cibles de focus programmatique (titre du panneau, tiroir, zone des réponses) : pas d'anneau */
#drawer:focus, #hand:focus, .panel h2:focus, .actions:focus { outline: none; }

/* Bords des champs : ≥ 3:1 sur le fond du tiroir (avant : 1,6:1) */
.field input, .field select, .import textarea, .search, .ai-ta, .late-row select, .memo-form textarea {
  border-color: rgba(255,240,220,.45);
}
.chip-select { border-color: rgba(255,240,220,.38); }

/* ----- Compartiments : équivalent clavier des clics sur la boîte (rempli par app.js · renderSceneNav) ----- */
.scene-nav:not([hidden]) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.scene-nav:not([hidden]):focus-within {
  position: fixed; left: 50%; bottom: calc(60px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: calc(100vw - 24px); height: auto; margin: 0; padding: 8px 10px;
  overflow: visible; clip: auto; clip-path: none; white-space: normal;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  background: #2a211c; border: 1px solid rgba(255,240,220,.28); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
/* Liste des boîtes de l'armoire (panneau de la bibliothèque) : même mécanique, remplace les anciennes puces par boîte.
   Beaucoup de boîtes : la barre défile plutôt que de sortir de l'écran. */
.scene-nav.deck-nav:not([hidden]):focus-within { overflow-y: auto; max-height: min(70vh, 480px); bottom: calc(16px + env(safe-area-inset-bottom)); }
.scene-nav .sn-title { flex-basis: 100%; text-align: center; font-size: 12px; color: var(--ink-dim); }
.scene-nav button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px;
  border-radius: 10px; border: 1px solid rgba(255,240,220,.28); background: var(--bg); color: var(--ink);
  font-size: 13.5px; white-space: nowrap;
}
.scene-nav button:hover { border-color: rgba(255,240,220,.5); }
.scene-nav button i { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.scene-nav button small { font-size: 12px; color: var(--ink-dim); }

/* ----- Toasts : deux régions vives permanentes (status = poli, alert = erreurs) ----- */
.toasts { gap: 0; }
.toasts > .toasts-status, .toasts > .toasts-alert { display: flex; flex-direction: column; gap: 8px; }
.toasts > div:not(:empty) + div:not(:empty) { margin-top: 8px; }

/* ----- Fenêtre de confirmation (remplace confirm() / alert()) ----- */
.confirm-modal p { margin: 0; color: var(--ink-dim); line-height: 1.5; white-space: pre-line; }
.confirm-modal h2 { font-size: 20px; margin-bottom: 10px; }
@media (min-width: 641px) { .confirm-modal { width: min(460px, calc(100vw - 32px)); } }

/* Carte en grand du classeur : bouton pour la retourner (équivalent clavier du clic sur la carte) */
.card-flipbar { display: flex; justify-content: center; margin: -4px 0 14px; }

/* ----- Animations « réduites » (réglage de l'appli, html[data-motion="reduced"]) -----
   Même effet que prefers-reduced-motion, mais forcé par l'utilisateur (voir app.js · préférences). */
html[data-motion="reduced"] :is(.flip, .mini, .lid, .world, .stage, .deckbox.slide, .drawer, .veil, .box-shadow, .pile-shadow, .pile-label,
  .legend, .envelope, .ephem, .ephem-shadow, .ephem-face, .ephem-seal, .btn) { transition-duration: .01s; transition-delay: 0s; }
html[data-motion="reduced"] :is(.actions .btn, .panel, .toast, .tts-btn.speaking, .actions .undo-btn) { animation: none; }
html[data-motion="reduced"] .ai-drop { transition: none; }

/* Contrastes : derniers ajustements relevés par l'audit (texte ≥ 4,5:1) */
.btn-ko .kbd { background: rgba(255,255,255,.28); }
.fchip.on small { color: rgba(27,20,16,.85); }
.ai-tip code, .ai-or code, .ai-details code { color: var(--ink-dim); }

/* =====================================================================
   Intégration finale : téléphone
   ===================================================================== */
/* Les bulles PWA passent sous l'en-tête pour ne jamais masquer les boutons de réponse,
   et s'effacent pendant une révision. */
body:not([data-lay="wide"]) .pwa-dock {
  bottom: auto;
  top: calc(64px + env(safe-area-inset-top));
}
body:has(.hand.in-session) .pwa-dock { display: none; }
body:not([data-lay="wide"]) .pwa-note-action { min-height: 44px; }
body:not([data-lay="wide"]) .pwa-note-close { width: 44px; height: 44px; }
body:not([data-lay="wide"]) .vac-chip { min-height: 44px; }
/* Prévision + avertissement de charge : sous les compteurs, pas contre les boutons du bas
   (sinon ils recouvrent la réserve et les étiquettes de la boîte). */
body[data-lay="phone"].mode-lesson .panel .fcline { order: 0; margin: 6px 0 0; }
body[data-lay="phone"].mode-lesson .panel:has(.fcline) .panel-actions { margin-top: auto; }
body[data-lay="phone"].mode-lesson .panel .fc-warn { font-size: 12px; line-height: 1.35; padding: 6px 10px; }

/* ===== Lot L · Ordre des traits (js/strokes.js) =====
   Tracés : KanjiVG © Ulrich Apel, CC BY-SA 3.0 (data/strokes/LICENSE.md). */
.stroke-btn {
  position: absolute; right: calc(3.5% + 52px); bottom: 5%; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: 22px;
  border: 1.5px solid var(--paper-edge);
  background: rgba(255, 253, 248, .92);
  color: var(--pencil); font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.stroke-btn span { font-family: 'Klee One', serif; font-size: 18px; }
/* Aucune voix de synthèse : le bouton 🔊 est masqué, le nôtre prend sa place */
html:not(.tts-ja):not(.tts-en):not(.tts-fr) .stroke-btn { right: 3.5%; }
.stroke-btn:hover { background: #fff; }
.stroke-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.stroke-dlg [hidden] { display: none !important; }
.stroke-dlg { padding: 0; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sd-body { padding: 18px 20px 20px; }
.sd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sd-head h2 { margin: 0; font-size: 20px; }
.sd-head h2 span { color: var(--accent); }
.sd-close { min-width: 44px; min-height: 44px; }
.sd-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sd-tabs button {
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font: 600 22px 'Klee One', serif; cursor: pointer;
}
.sd-tabs button[aria-selected="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.sd-tabs button:focus-visible, .sd-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-stage {
  width: min(300px, 100%, max(160px, calc(100dvh - 330px))); aspect-ratio: 1; margin: 0 auto;
  display: grid; place-items: center; text-align: center;
  border-radius: 12px; background: var(--paper); color: var(--pencil); overflow: hidden;
}
.sd-stage[data-state="error"], .sd-stage[data-state="loading"] { padding: 14px; gap: 10px; align-content: center; }
.sd-msg { margin: 0; font-size: 14px; }
.sd-svg { width: 100%; height: 100%; display: block; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sd-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sd-grid { stroke: rgba(60, 50, 40, .22); stroke-width: .6; stroke-dasharray: 2.5 2.5; }
.sd-ghost path { stroke: rgba(40, 30, 20, .13); stroke-width: 3.4; }
.sd-ink path { stroke: #1d1a17; stroke-width: 3.4; }
.sd-ink path.cur { stroke: var(--ko-paper); }
.sd-nums text {
  font: 700 6.5px Inter, system-ui, sans-serif; fill: var(--pen); text-anchor: middle; dominant-baseline: central;
  paint-order: stroke; stroke: var(--paper); stroke-width: 1.8px; stroke-linejoin: round; pointer-events: none;
}
.sd-count { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--ink-dim); font-variant-numeric: tabular-nums; min-height: 1.3em; }
.sd-ctl { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.sd-ctl .btn { min-height: 44px; min-width: 44px; justify-content: center; }
.sd-ctl [data-a="play"] { flex: 1; max-width: 160px; }
.sd-speed { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--ink-dim); }
.sd-speed select {
  min-height: 44px; padding: 0 10px; border-radius: 10px; font-size: 16px;
  background: var(--bg-2); color: var(--ink); border: 1px solid var(--line);
}
.sd-empty :is(.sd-ctl, .sd-speed, .sd-hint) { visibility: hidden; }
.sd-hint { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--ink-faint); }
.sd-credit { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: var(--ink-faint); }
.sd-credit a { color: var(--ink-dim); }
@media (max-width: 640px) {
  .sd-body { padding: 16px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
}

/* =====================================================================
   Lot J · Facettes de carte & furigana (js/app.js : Grande carte, Classeur, Réglages) — bloc autonome
   Repères posés par cardHTML : .flip[data-facet="rec|p|r"][data-deck-kind], .face.back[data-char].
   ===================================================================== */
:root { --facet-p: #a3451c; --facet-r: #1d5c87; } /* blanc dessus : ≥ 5,9:1 */

/* Étiquette de facette dans l'en-tête du recto (à la place du nom de la boîte) */
.facet-tag {
  display: inline-flex; align-items: center; gap: .4em; flex: none;
  padding: .22em .7em; border-radius: 999px;
  font-weight: 700; letter-spacing: .4px; white-space: nowrap; color: #fff; background: var(--paper-faint);
}
.face-head > .facet-tag:last-child { overflow: visible; }
.facet-tag[data-facet="p"] { background: var(--facet-p); }
.facet-tag[data-facet="r"] { background: var(--facet-r); }
/* Tranche colorée sur le bord gauche : une carte de production / de lecture se reconnaît d'un coup d'œil */
.flip[data-facet="p"] .face::after, .flip[data-facet="r"] .face::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2%; min-width: 5px;
  background: var(--facet-p); pointer-events: none;
}
.flip[data-facet="r"] .face::after { background: var(--facet-r); }
.flip[data-facet="p"] .front-hint { color: var(--facet-p); }
.flip[data-facet="r"] .front-hint { color: var(--facet-r); }
/* Production d'un kanji : la réponse (le kanji) ressort ; lecture : les lignes On / Kun ressortent */
.flip[data-facet="p"] .back-head-kanji { font-size: calc(var(--card-h) * .18); color: var(--facet-p); }
.flip[data-facet="r"] .back-body .row:nth-child(-n+2) .jp { font-weight: 700; color: var(--facet-r); }
.back-answer .reading-mean { font-weight: 700; font-size: calc(var(--card-h) * .1); line-height: 1.15; color: var(--pen); }
/* Verso d'une facette : la réponse remonte un peu, pour laisser la place aux boutons 🔊 / 筆 du bas */
.flip[data-facet="p"] .back-answer, .flip[data-facet="r"] .back-answer { bottom: 21%; gap: 2%; }

/* Furigana : <ruby> côté réponse seulement ; html[data-furigana="off"] les masque (préférence repeet.prefs) */
ruby { ruby-align: center; }
rt {
  font-family: 'Klee One', serif; font-weight: 400; font-size: .5em; line-height: 1.1;
  color: #4a5a8a; letter-spacing: 0; user-select: none; -webkit-user-select: none;
}
html[data-furigana="off"] rt { display: none; }
.furi-alt { display: none; }
html[data-furigana="off"] .furi-alt { display: inline; }
.back-head-text.has-furi { overflow: visible; font-size: calc(var(--card-h) * .095); line-height: 1.2; align-self: flex-end; padding-bottom: .25em; }
html[data-furigana="off"] .back-head-text.has-furi { align-self: center; padding-bottom: 0; }
/* Ligne d'exemple d'un kanji : le mot reste posé sur sa ligne, la lecture déborde au-dessus (entre les lignes) */
.back-body .row.ex { overflow: visible; height: calc(var(--card-h) * .118); align-items: flex-end; }
.back-body .row.ex rt { font-size: .5em; line-height: 1; }
.back-answer .answer.has-furi { line-height: 1.15; }
.back-answer .answer.has-furi rt { font-size: .38em; }

/* Classeur : pastille de facette, filtre par facette, facette en attente */
.brow.has-fct { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.fct {
  display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%;
  font-style: normal; font-size: 12px; font-weight: 700; line-height: 1; color: #fff; background: var(--paper-faint);
}
.fct[data-facet="p"] { background: var(--facet-p); }
.fct[data-facet="r"] { background: var(--facet-r); }
.brow.locked .bt, .brow.locked .bx { opacity: .6; }
.facet-chips { margin-top: 6px; }
.facet-chips[hidden] { display: none; }
.card-facts dd small { font-weight: 400; color: var(--ink-faint); }

/* Réglages : cases à cocher des facettes (cibles ≥ 44 px) */
.facets-field { min-width: 0; margin: 4px 0 14px; padding: 8px 12px 12px; border: 1px solid rgba(255,240,220,.3); border-radius: 10px; gap: 0; }
.facets-field legend { padding: 0 6px; font-size: 13px; color: var(--ink-dim); }
.check { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; cursor: pointer; color: var(--ink); }
.drawer .field .check input[type="checkbox"] {
  flex: none; width: 24px; height: 24px; min-height: 0; padding: 0; margin: 0; accent-color: var(--accent);
}
.check b { font-weight: 600; font-size: 14px; }
.check small { display: block; font-size: 12.5px; color: var(--ink-faint); line-height: 1.35; }
.check input:disabled + span { opacity: .8; }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.facets-field .settings-meta { margin-top: 6px; }

/* =====================================================================================
   Lot N · Importer un cours : CSV / tableur et paquet Anki (js/ai-course.js, import-csv.js, import-anki.js)
   Onglets de source, choix des colonnes, choix du paquet Anki. Réutilise les blocs .ai-* du Lot D.
   ===================================================================================== */
.ai-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 12px; background: #1a1411; border: 1px solid var(--line); }
.ai-tab {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: 9px; background: transparent; color: var(--ink-dim); font-size: 13.5px; font-weight: 500; line-height: 1.2; text-align: center;
}
.ai-tab:hover { color: var(--ink); background: rgba(255,240,220,.06); }
.ai-tab.on, .ai-tab[aria-selected="true"] { background: var(--accent); color: #1b1410; font-weight: 600; }
.ai-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-tab.on:focus-visible { outline-color: var(--ink); outline-offset: -3px; }
.ai-info { font-size: 13px; color: var(--ink-dim); margin: 0 0 12px; }
.ai-opts { align-items: end; }
.ai-opts .field { margin-bottom: 8px; }
.ai-check-wrap { justify-content: flex-end; }
.ai-check { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 13.5px; cursor: pointer; }
.ai-check input { flex: none; width: 20px; height: 20px; accent-color: var(--accent); }
.ai-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Tableau d'aperçu (défile horizontalement, jamais la page) */
.ai-tablewrap { overflow: auto; max-width: 100%; margin: 0 0 8px; border: 1px solid rgba(255,240,220,.28); border-radius: 10px; background: rgba(26,20,17,.7); }
.ai-tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ai-table { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 12.5px; }
.ai-table th, .ai-table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-table td { color: var(--ink); }
.ai-table tbody tr:last-child td { border-bottom: 0; }
.ai-table thead th { background: #2a211c; }
.ai-headrow th { font-weight: 600; color: var(--ink-dim); border-bottom: 1px solid rgba(255,240,220,.28); }
.ai-role {
  width: 100%; min-width: 108px; min-height: 40px; padding: 4px 8px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 600;
  background: #1a1411; color: var(--ink); border: 1px solid rgba(255,240,220,.45);
}
.ai-role:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ai-table [data-role="front"]:is(td, th) { background-image: linear-gradient(rgba(232,160,90,.16), rgba(232,160,90,.16)); }
.ai-table [data-role="back"]:is(td, th)  { background-image: linear-gradient(rgba(95,179,125,.16), rgba(95,179,125,.16)); }
.ai-table [data-role="note"]:is(td, th)  { background-image: linear-gradient(rgba(255,240,220,.07), rgba(255,240,220,.07)); }
.ai-table td[data-role="ignore"], .ai-headrow th[data-role="ignore"] { opacity: .5; }
.ai-role option { background: var(--bg-2); }
.ai-csv-summary { font-weight: 600; }
.ai-csv-summary.bad { color: #ffb3a4; }

/* Paquet Anki */
.ai-noimport { margin-top: 14px; }
.ai-noimport ul { margin-top: 4px; }
.ai-nt { margin: 0 0 12px; padding: 4px 14px 6px; border: 1px solid rgba(255,240,220,.28); border-radius: 12px; background: rgba(42,33,28,.5); min-width: 0; }
.ai-nt legend { padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ai-nt .ai-tip { margin: 0 0 8px; }
.ai-sample { overflow-wrap: anywhere; }
.ai-limit:not([hidden]) { color: var(--accent); font-size: 13px; }
.ai-limit[hidden] { display: none; }
.ai-info em, .ai-drop em { font-style: normal; color: var(--ink); }

@media (max-width: 640px) {
  .ai-tab { flex-direction: column; gap: 2px; font-size: 12px; padding: 6px 4px; }
  .ai-role { font-size: 16px; }
  .ai-table { font-size: 13px; }
  .ai-nt { padding: 2px 10px 4px; }
  .ai-opts { align-items: stretch; }
}
html[data-motion="reduced"] .ai-tab { transition: none; }

/* =====================================================================================
   Lot P · Mode « bureau à plat » (html[data-render="flat"], voir app.js · « Mode à plat »)
   Scène 2D légère pour les téléphones modestes : pas de perspective, pas de faces 3D, pas de flou.
   Tout est réservé à html[data-render="flat"] (ou à des classes que seul ce mode crée) : la 3D n'est pas touchée.
   ===================================================================================== */
html[data-render="flat"] .stage { perspective: none; }
html[data-render="flat"] .world,
html[data-render="flat"] .veil { display: none; }

/* Deux couches (étagère = bibliothèque, bureau = leçon) qui se fondent l'une dans l'autre ; positionnées par app.js */
.f-shelf, .f-desk {
  position: absolute; box-sizing: border-box;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s .5s, top .45s ease, height .45s ease;
}
body.mode-library .f-shelf, body.mode-lesson .f-desk {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .5s ease, visibility 0s, top .45s ease, height .45s ease;
}
.f-shelf.no-anim, .f-desk.no-anim,
body.mode-library .f-shelf.no-anim, body.mode-lesson .f-desk.no-anim { transition: none; }
/* Téléphone : pas d'animation de mise en page (top / height) : le cadrage change de façon instantanée */
body:not([data-lay="wide"]) .f-shelf, body:not([data-lay="wide"]) .f-desk { transition: opacity .5s ease, visibility 0s .5s; }
body:not([data-lay="wide"]).mode-library .f-shelf, body:not([data-lay="wide"]).mode-lesson .f-desk { transition: opacity .5s ease, visibility 0s; }
/* Boîte en vol entre l'étagère et le bureau : au-dessus des deux couches */
.f-fly { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* --- Étagère : 12 casiers (2 × 6 en portrait, 3 × 4 en paysage bas, 4 × 3 sur ordinateur) --- */
.f-shelf {
  display: grid; gap: 8px; padding: 10px;
  grid-template-columns: repeat(var(--fcols, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--frows, 3), var(--fch, 110px));
  overscroll-behavior: contain; scrollbar-width: none;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px, rgba(0,0,0,.08) 14px 16px, transparent 16px 29px),
    linear-gradient(180deg, #5b3b27, #45291a);
  box-shadow: inset 0 0 0 1px rgba(255,235,210,.08), 0 3px 0 #2b190f;
}
.f-shelf::-webkit-scrollbar { display: none; }
.f-slot {
  position: relative; min-width: 0; min-height: 0; border-radius: 6px;
  background: #2a1a10;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,235,210,.06);
}
.f-slot.vacant::after { /* la boîte est sortie sur le bureau */
  content: ''; position: absolute; inset: 6px; border-radius: 6px; border: 1.5px dashed rgba(255,235,210,.22);
}

/* --- La boîte : un couvercle (fermée, c'est la case de l'étagère) qui se relève sur 5 compartiments vus de dessus --- */
.fdeck {
  position: absolute; box-sizing: border-box; container-type: inline-size;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--wood-1), var(--wood-2));
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}
.f-slot > .fdeck { inset: 6px; cursor: pointer; }
.f-slot > .fdeck:hover { box-shadow: 0 2px 0 rgba(0,0,0,.4), 0 0 0 2px rgba(255,235,210,.5); }
.f-boxhost > .fdeck { inset: 0; box-shadow: 0 4px 0 #4a2f18; }
.fdeck.flying { box-shadow: 0 8px 0 rgba(0,0,0,.28); transform-origin: 0 0; will-change: transform; }
.fdeck.flying .fd-plate { opacity: 0; }
.fd-lid {
  position: absolute; inset: 0; z-index: 2; border-radius: 8px;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 11px, rgba(70,35,10,.07) 11px 13px, transparent 13px 23px),
    linear-gradient(180deg, var(--wood-1), var(--wood-2));
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.14), inset 0 2px 0 rgba(255,255,255,.2);
  transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.5,0,.3,1.1);
}
.fd-lid.no-anim { transition: none; }
.fdeck.open .fd-lid { transform: scaleY(.04); pointer-events: none; } /* charnière au fond : vu de dessus, le couvercle se réduit à un liseré */
.fdeck.on-desk .fd-lid::after { /* poignée (sur le bureau seulement) */
  content: ''; position: absolute; left: 50%; bottom: 12%; width: 22%; height: 9px; margin-left: -11%;
  border-radius: 5px; background: linear-gradient(#e7cf92, #a8843f); box-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.fd-plate { /* étiquette : nom, nombre de cartes (markup de refreshLabels) ; la taille suit la largeur de la boîte */
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  max-width: 88%; padding: 5px 10px; border-radius: 5px;
  background: linear-gradient(#fbf6ea, #ece2cb); box-shadow: inset 0 0 0 1px rgba(90,60,30,.25);
  color: #3a2c20; text-align: center; overflow: hidden;
  font-size: 14px; transition: opacity .2s;
}
@supports (width: 1cqw) { .fd-plate { font-size: clamp(13px, 6cqw, 22px); } }
.fdeck.open .fd-plate { opacity: 0; }
html[data-render="flat"] .fd-plate .end-title {
  font-family: 'Klee One', serif; font-weight: 600; font-size: 1.1em; line-height: 1.15; max-width: 100%;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: anywhere;
}
html[data-render="flat"] .fd-plate .end-meta { font-size: .82em; color: var(--paper-faint); white-space: nowrap; }
html[data-render="flat"] .fd-plate .end-meta em { color: #a3341f; font-style: normal; font-weight: 600; }
html[data-render="flat"] .fd-plate .end-fc { display: none; }
/* Pastille « à réviser » et tampon 済 (markup de refreshLabels, voir .end-due / .end-stamp) : la pastille déborde du coin
   haut droit de l'étiquette, le tampon se pose sur son titre. La taille suit celle de l'étiquette (em). */
.fd-plate { overflow: visible; }
.fd-plate .end-due {
  right: -.55em; top: -.6em; bottom: auto; min-width: 1.75em; height: 1.75em; padding: 0 .4em;
  font-size: max(15px, 1.05em); box-shadow: 0 0 0 2px #fbf6ea, 0 2px 0 rgba(0,0,0,.3);
}
.fd-plate .end-stamp {
  right: .3em; top: 56%; bottom: auto; width: 2.4em; height: 2.4em; margin-top: -1.2em; font-size: 1.15em; border-width: 3px;
}

/* Compartiments (le couvercle relevé) */
.fd-inner {
  position: absolute; inset: 9px; z-index: 1; display: flex; overflow: hidden; border-radius: 4px;
  background: radial-gradient(120% 120% at 50% 100%, #4a3326, var(--felt));
  box-shadow: inset 0 2px 0 rgba(0,0,0,.45);
}
.fcell { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding-bottom: 6px; cursor: pointer; }
.fcell + .fcell { box-shadow: inset 3px 0 0 #d2c7ac; } /* intercalaire en bristol */
.fc-tab {
  align-self: stretch; height: 26px; margin: 0 4px; border-radius: 0 0 6px 6px;
  display: grid; place-items: center; background: var(--c); color: #1b1410;
  font-weight: 700; font-size: 15px; box-shadow: 0 1px 0 rgba(0,0,0,.3);
}
.fstack { /* pile de cartes vue de dessus : un seul élément, l'épaisseur vient des ombres */
  position: relative; flex: none; margin-top: 12px;
  width: var(--fcw, 90px); height: calc(var(--fcw, 90px) * .6);
  transition: transform .2s;
}
.fstack[data-n="0"] { background: none; box-shadow: none; outline: 1.5px dashed rgba(255,235,210,.26); outline-offset: -1px; border-radius: 3px; }
.fstack[data-n="1"] { box-shadow: inset 0 0 0 1px rgba(120,100,70,.2), 0 1px 0 #cfc4ab; }
.fstack[data-n="2"] { box-shadow: inset 0 0 0 1px rgba(120,100,70,.2), 0 2px 0 #e9e0cb, 0 4px 0 #c9bea4; }
.fstack[data-n="3"] { box-shadow: inset 0 0 0 1px rgba(120,100,70,.2), 0 3px 0 #e9e0cb, 0 6px 0 #c9bea4, 0 9px 0 #e9e0cb; }
.fstack[data-n="4"] { box-shadow: inset 0 0 0 1px rgba(120,100,70,.2), 0 3px 0 #e9e0cb, 0 6px 0 #c9bea4, 0 9px 0 #e9e0cb, 0 12px 0 #c9bea4; }
.fc-plate { margin-top: auto; align-self: stretch; padding: 0 4px; }
.fc-plate .plate {
  display: flex; justify-content: center; padding: 3px 4px; border-radius: 4px;
  background: linear-gradient(#f7f1e3, #e8dec7); box-shadow: inset 0 0 0 1px rgba(90,60,30,.25); color: #4a3a2c;
}
.fc-plate .num, .fc-plate .w, .fc-plate .rh { display: none; } /* le numéro est sur l'onglet ; libellés longs réservés aux grands écrans */
.fc-plate .meta { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.fc-plate .meta b { font-size: 17px; }
.fc-plate .meta small { font-size: 11px; min-height: 13px; color: var(--paper-faint); white-space: nowrap; }
.fc-plate .meta small em { font-style: normal; font-weight: 600; color: #a3341f; }
.fc-plate .hi { font-style: normal; font-size: 11px; font-weight: 600; color: #2f5fa3; margin-left: 3px; }
body[data-lay="wide"] .fc-plate .meta b { font-size: 20px; }
body[data-lay="wide"] .fc-plate .meta small { font-size: 12px; }
body[data-lay="wide"] .fc-plate .w { display: inline; font-size: 12px; font-weight: 500; }
body[data-lay="wide"] .fc-plate .rh { display: inline; }

/* --- Bureau : la boîte, puis la rangée réserve · enveloppe · (éphéméride) --- */
.f-desk {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 8px 0;
  --pw: 132px; --ph: 80px; --ew: 132px; --eh: 84px;
}
html[data-render="flat"] body:not([data-lay="wide"]) .f-desk { --pw: 84px; --ph: 50px; --ew: 88px; --eh: 58px; gap: 12px; }
.f-desk::before { /* sous-main */
  content: ''; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: rgba(255,214,160,.045); box-shadow: inset 0 0 0 1px var(--line);
}
.f-boxhost { position: relative; flex: none; width: var(--bw, 360px); height: var(--bh, 180px); }
.f-row { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; flex: none; }
html[data-render="flat"] .pile { position: relative; order: 1; flex: none; width: var(--pw); height: var(--ph); transform-style: flat; }
.fpile { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
html[data-render="flat"] .pile-label,
html[data-render="flat"] .pile-label.side { position: relative; order: 2; max-width: 150px; font-size: 20px; line-height: 1.05; text-align: left; }
html[data-render="flat"] .pile-label b,
html[data-render="flat"] .pile-label.side b { font-size: 18px; }
html[data-render="flat"] .envelope { position: relative; order: 3; flex: none; width: var(--ew); height: var(--eh); }
html[data-render="flat"] .envelope .env-label { font-size: 20px; bottom: 4px; }
html[data-render="flat"] .envelope .env-label b { font-size: 16px; }
html[data-render="flat"] .envelope .env-seal { top: 24%; }
/* Éphéméride : dans la rangée du bureau sur grand écran (réduite) ; l'exemplaire de l'armoire et les ombres sont masqués */
html[data-render="flat"] .ephem-shadow,
html[data-render="flat"] .ephem.lib { display: none !important; }
html[data-render="flat"] .f-row .ephem {
  position: relative !important; left: auto !important; top: auto !important; order: 4;
  width: 150px !important; height: 170px !important; zoom: .66;
  transform: none !important; backface-visibility: visible;
}
html[data-render="flat"] .ephem-face { box-shadow: 0 1px 0 #d9d0bb, 0 3px 0 #cfc5ac, 0 5px 0 #c4b99f; } /* sans ombre floue */

@media (prefers-reduced-motion: reduce) { .f-shelf, .f-desk, .fd-lid, .fd-plate, .fstack { transition-duration: .01s; transition-delay: 0s; } }
html[data-motion="reduced"] :is(.f-shelf, .f-desk, .fd-lid, .fd-plate, .fstack) { transition-duration: .01s; transition-delay: 0s; }

/* Cases basses (petit écran) : nom sur une ligne, étiquette resserrée ; bureau bas : onglet et piles resserrés */
.f-shelf.tight .f-slot > .fdeck { inset: 3px; }
.f-shelf.tight .fd-plate { max-width: 94%; padding: 2px 6px; gap: 0; }
html[data-render="flat"] .f-shelf.tight .fd-plate .end-title { font-size: .92em; line-height: 1.08; }
html[data-render="flat"] .f-shelf.tight .fd-plate .end-meta { font-size: .78em; }
.f-desk.tight { padding: 4px 0; }
.f-desk.tight .fc-tab { height: 22px; font-size: 14px; }
.f-desk.tight .fstack { margin-top: 6px; }
.f-desk.tight .fc-plate .meta b { font-size: 15px; }
.f-desk.tight .fc-plate .meta small { min-height: 12px; font-size: 10.5px; }

/* =====================================================================================
   Lot Q — Synchronisation (js/sync-ui.js) : vue du tiroir, entrée du menu ⋯, fenêtre à choix
   ===================================================================================== */
.sy { display: flex; flex-direction: column; gap: 12px; }
.sy-sec { padding: 12px 14px 14px; border-radius: 12px; background: rgba(42,33,28,.7); border: 1px solid var(--line); }
.sy-sec h3 { margin: 0 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .6px; }
.sy-sec .field { margin-bottom: 8px; }
.sy-text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.sy-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-faint); }
.sy-warn { color: var(--accent); }
.sy-err { color: var(--ko-text); }
.sy-file { margin: 0 0 4px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.sy-status { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-dim); overflow-wrap: anywhere; }
.sy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sy-row .btn { flex: 1 1 200px; justify-content: center; min-height: 44px; }
.sy-row .btn-ghost { flex: 1 1 160px; min-height: 44px; }
.sy-minor { margin-top: 10px; }
.sy-check { margin-top: 12px; }
.sy-devs, .sy-snaps { list-style: none; margin: 0; padding: 0; }
.sy-devs li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.sy-devs li:first-child { border-top: 0; }
.sy-devs span { flex: none; color: var(--ink-faint); font-size: 12.5px; }
.sy-snaps { margin-top: 10px; }
.sy-snaps li { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-top: 1px solid var(--line); }
.sy-snap-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.sy-snap-t small { color: var(--ink-faint); font-size: 12px; }
.sy-snaps .btn-ghost { flex: none; min-height: 44px; min-width: 44px; }
/* Entrée du menu ⋯ : icône seule dans l'en-tête large, libellé complet dans le menu du téléphone */
body[data-lay="wide"] .sync-more .sync-more-l { display: none; }
body[data-lay="wide"] .sync-more { min-width: 40px; }
/* Fenêtre à plusieurs choix (Annuler / Remplacer / Fusionner) */
.choice-modal .modal-actions { flex-wrap: wrap; }
.choice-modal .modal-actions .btn { flex: 1 1 110px; justify-content: center; }
.backup-row .linkbtn { min-height: 44px; }
.sy-sec .field input { min-height: 44px; }
.sy-check input[type="checkbox"] { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); }
/* Les bulles PWA ne doivent pas recouvrir un tiroir ou une fenêtre ouverts. */
body:has(.drawer.open) .pwa-dock,
body:has(dialog[open]) .pwa-dock { display: none; }

/* =====================================================================================
   Bibliothèque de cours (js/library.js)
   Le livre de l'armoire (3D) et sa tuile (à plat), le bouton du panneau, l'entrée de la fenêtre « Nouvelle boîte »,
   le catalogue et la fiche d'un cours (tiroir large ; feuille plein écran sur téléphone, voir plus haut).
   ===================================================================================== */

/* ---------- Le livre sur l'armoire : trois faces (couverture texturée, tranche et dessus des pages, tout petits) ---------- */
.book3d {
  position: absolute; left: var(--bx); top: var(--by); width: var(--bw); height: var(--bd);
  transform-style: preserve-3d; transform: translateZ(var(--bz)) rotateZ(var(--byaw));
  cursor: pointer; pointer-events: none;
}
body.mode-library .book3d { pointer-events: auto; }
/* Fondu sur les faces (pas sur le livre : une opacité < 1 aplatirait sa 3D). Visible en bibliothèque seulement. */
.book3d > * { position: absolute; opacity: 0; transition: opacity .5s .3s; backface-visibility: hidden; }
body.mode-library .book3d > * { opacity: 1; }
.bk-front {
  left: 0; top: calc(var(--bd) - var(--bh)); width: var(--bw); height: var(--bh);
  transform-origin: 50% 100%; transform: rotateX(-90deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-left: 8px;
  border-radius: 2px 6px 6px 2px;
  background: radial-gradient(120% 90% at 30% 12%, #8a3a2d, #5e241c 55%, #431810);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12);
}
.bk-hinge { position: absolute; left: 0; top: 0; bottom: 0; width: 13px; border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(255,255,255,.07) 55%, rgba(0,0,0,.28)); }
.bk-frame { position: absolute; left: 19px; right: 8px; top: 8px; bottom: 8px; border: 1.5px solid rgba(232,200,130,.72); border-radius: 3px; }
.bk-plate {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 9px 7px; border-radius: 3px;
  background: linear-gradient(#ecd497, #b8944e); box-shadow: inset 0 0 0 1px rgba(0,0,0,.28), 0 1px 0 rgba(255,235,190,.25);
  color: #3b2a12; font-family: 'Klee One', serif; text-align: center; line-height: 1.12;
}
.bk-plate b { font-weight: 600; font-size: 17px; white-space: nowrap; }
.bk-orn { position: relative; color: #e2c078; font-size: 15px; line-height: 1; }
/* Tranche (côté droit) et dessus : pages crème entre deux plats de la couverture */
.bk-side {
  left: calc(var(--bw) - var(--bh)); top: 0; width: var(--bh); height: var(--bd); transform-origin: 100% 50%; transform: rotateY(90deg);
  background:
    linear-gradient(rgba(0,0,0,.14), rgba(0,0,0,.14)),
    linear-gradient(180deg, #4b1c16 0 3px, transparent 3px calc(100% - 3px), #4b1c16 calc(100% - 3px)),
    repeating-linear-gradient(180deg, #f3ecd8 0 1.5px, #d6ccb0 1.5px 3px);
}
.bk-top {
  left: 0; top: 0; width: var(--bw); height: var(--bd); transform: translateZ(var(--bh));
  background:
    linear-gradient(180deg, #4b1c16 0 3px, transparent 3px calc(100% - 3px), #4b1c16 calc(100% - 3px)),
    repeating-linear-gradient(180deg, #f6f0de 0 1.5px, #ddd3b8 1.5px 3px);
}
.bk-shadow {
  left: -4px; top: 3px; width: calc(var(--bw) + 40px); height: calc(var(--bd) + 14px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,.28) 60%, transparent); transform: translateZ(.5px);
}
.book3d:hover .bk-front { filter: brightness(1.1); }
/* Tour de page : sous la couverture qui pivote, une première page (pseudo-élément, seulement pendant l'ouverture) */
.book3d.opening::before {
  content: ''; position: absolute; left: 0; top: calc(var(--bd) - var(--bh)); width: var(--bw); height: var(--bh);
  transform-origin: 50% 100%; transform: rotateX(-90deg) translateZ(-2px);
  background: linear-gradient(90deg, transparent 22px, rgba(214,72,72,.55) 22px 23.5px, transparent 23.5px),
    repeating-linear-gradient(180deg, transparent 0 17px, rgba(86,128,196,.32) 17px 18px), linear-gradient(180deg, #fdfaf2, #f0e9d8);
}
html[data-motion="reduced"] .book3d > * { transition-duration: .01s; transition-delay: 0s; }

/* ---------- À plat : le livre couché en haut de l'étagère ---------- */
.f-book {
  position: absolute; left: 10px; right: 10px; top: 10px; height: calc(var(--fbook, 46px) - 8px);
  display: flex; align-items: center; gap: 10px; padding: 0 14px 0 0; overflow: hidden;
  border-radius: 6px; cursor: pointer; color: #f3e2b8;
  background: linear-gradient(180deg, #7d3226, #58221a);
  box-shadow: 0 2px 0 rgba(0,0,0,.45), inset 0 0 0 1px rgba(232,200,130,.38);
}
.f-book:hover { filter: brightness(1.1); }
.fb-spine { flex: none; align-self: stretch; width: 16px; background: linear-gradient(90deg, #ecd497, #b8944e); box-shadow: inset -3px 0 0 rgba(0,0,0,.22); }
.fb-t { font-family: 'Klee One', serif; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-s { margin-left: auto; font-size: 12px; color: #dcc99a; white-space: nowrap; }
.fb-go { flex: none; font-size: 24px; line-height: 1; color: #e2c078; }
body[data-lay="phone"] .fb-s { display: none; }
body[data-lay="phone"] .fb-go { margin-left: auto; }

/* ---------- Panneau de l'armoire : boutons (4 sur téléphone : 2 × 2, libellés courts) ---------- */
.deck-lib { color: #f1d9a0; border-color: rgba(226,190,120,.5); background: rgba(112,52,36,.42); }
.deck-lib:hover { border-color: rgba(226,190,120,.85); }
.deck-chip .cs { display: none; }
body[data-lay="phone"] .deck-chip .cl { display: none; }
body[data-lay="phone"] .deck-chip .cs { display: inline; }
body[data-lay="phone"] .deck-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body[data-lay="phone"] .deck-add { order: 1; }
body[data-lay="phone"] .deck-lib { order: 2; }
body[data-lay="phone"] .deck-ai { order: 3; grid-column: auto; }
body[data-lay="phone"] .deck-stats { order: 4; }
body[data-lay="phone"] .deck-chip { padding: 8px 6px; overflow: hidden; }
body[data-lay="phone"] .deck-stats .ds-streak { display: none; }
.ai-entry .lib-entry-btn { margin-top: 8px; background: rgba(226,190,120,.12); box-shadow: inset 0 0 0 1px rgba(226,190,120,.5); }
.ai-entry .lib-entry-btn:hover { background: rgba(226,190,120,.2); }
.ai-entry .lib-entry-btn b { color: #f1d9a0; }

/* ---------- Catalogue ---------- */
.lib { min-width: 0; }
.lib-intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); }
.lib-tools {
  position: sticky; top: -14px; z-index: 2; margin: 0 -18px; padding: 10px 18px 10px;
  background: #241c18; border-bottom: 1px solid var(--line);
}
.lib-cats { margin-top: 10px; }
.lib-cat span { font-size: 15px; line-height: 1; }
.lib-cat.none { opacity: .5; }
.lib-filters { display: flex; gap: 10px; margin-top: 10px; }
.lib-filters .lib-sel { flex: 1 1 0; min-width: 0; margin: 0; font-size: 12px; }
.lib-filters select { min-height: 44px; }
.lib-count { margin: 10px 0 8px; font-size: 12px; color: var(--ink-faint); min-height: 1.3em; }
.lib-notes:empty { display: none; }
.lib-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: #f0d2b0; background: rgba(232,160,90,.12); border: 1px solid rgba(232,160,90,.45); }
.lib-note b { color: var(--accent); }
.lib-list { display: flex; flex-direction: column; gap: 8px; }
.lib-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  width: 100%; min-height: 72px; padding: 10px 6px 10px 10px; text-align: left; border: 0; border-radius: 12px;
  background: var(--paper); color: var(--pencil); box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.lib-card:hover { filter: brightness(.97); }
.lib-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lib-card.has { box-shadow: inset 4px 0 0 #3f8a5b, 0 2px 0 rgba(0,0,0,.35); }
.lib-swatch {
  display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 10px; font-size: 23px; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.2);
}
.lib-swatch.big { width: 60px; height: 60px; font-size: 30px; border-radius: 13px; }
.lib-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lib-name { font-family: 'Klee One', serif; font-weight: 600; font-size: 16px; line-height: 1.25; color: #1d1a17; overflow-wrap: anywhere; }
.lib-desc {
  font-size: 12.5px; line-height: 1.4; color: #5d5044;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lib-meta { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; }
.lib-meta span { padding: 1px 8px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; white-space: nowrap;
  background: rgba(255,240,220,.08); border: 1px solid var(--line); color: var(--ink-dim); }
.lib-card .lib-meta span { background: #efe7d4; border-color: #ddd2b9; color: var(--paper-faint); }
.lib-badge.prem {
  display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; vertical-align: 2px;
  font: 600 10.5px/1.6 Inter, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  color: #7d5f1c; border: 1px solid #b8944e; background: rgba(226,190,120,.18);
}
.lib-meta .lib-badge.prem { margin-left: 0; color: #e2c078; border-color: rgba(226,190,120,.6); vertical-align: baseline; }
.lib-state { font-size: 12px; font-weight: 600; }
.lib-state.ok { color: #2f6b45; }
.lib-state.net { color: var(--ko-paper); }
.lib-hero ~ .lib-state.ok { color: var(--ok); margin: 0 0 8px; }
.lib-go { font-size: 26px; line-height: 1; color: #8a7a68; padding: 0 6px; }
.lib-empty { padding: 18px 4px; text-align: center; color: var(--ink-dim); font-size: 14px; }
.lib-empty .btn { justify-content: center; }
.lib-load { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-size: 14px; color: var(--ink-dim); }
.lib-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,240,220,.25); border-top-color: var(--accent); animation: lib-spin .8s linear infinite; }
@keyframes lib-spin { to { transform: rotate(360deg); } }
html[data-motion="reduced"] .lib-spin { animation: none; }
@media (prefers-reduced-motion: reduce) { .lib-spin { animation: none; } }
.lib-err + .ai-actions .btn { min-height: 46px; }

/* ---------- Fiche d'un cours ---------- */
.lib-back { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 4px; font-size: 14px; }
.lib-hero { display: flex; align-items: center; gap: 14px; margin: 0 0 10px; }
.lib-hero-t { min-width: 0; }
.lib-title { margin: 0 0 6px; font-family: 'Klee One', serif; font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.lib-title:focus { outline: none; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: -4px 0 10px; font-size: 12px; color: var(--ink-faint); }
.lib-tags span::before { content: '#'; }
.lib-more { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-faint); }
.lib-status:empty { display: none; }
.lib-status { color: var(--accent); }

@media (max-width: 640px) {
  .lib-tools { margin: 0 -16px; padding: 8px 16px 8px; }
  .lib-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-bottom: 2px; }
  .lib-cats::-webkit-scrollbar { display: none; }
  .lib-cat { flex: none; }
  .lib-intro { font-size: 13px; }
  .lib-card { padding-right: 2px; }
}
@media (max-height: 640px) { .lib-tools { position: static; margin: 0; padding: 0 0 8px; border-bottom: 0; } }
/* Ordinateur : la zone vide du panneau de l'armoire laisse passer les clics vers la scène (le livre, l'éphéméride passent
   en partie sous ses lignes) ; seuls les boutons et champs du panneau les reçoivent */
body[data-lay="wide"].mode-library .panel,
body[data-lay="wide"].mode-library .panel > * { pointer-events: none; }
body[data-lay="wide"].mode-library .panel :is(button, a, input, select, summary) { pointer-events: auto; }
/* Filtres du catalogue : listes déroulantes dans le thème sombre */
.lib-filters select {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255,240,220,.3); background: #1a1411; color: var(--ink);
  font: inherit; font-size: 16px;
}
.lib-filters select option { background: #2a211c; color: var(--ink); }

/* =====================================================================================
   Sécurité — écran de secours (js/rescue.js), vue « Crédits & licences » (js/about.js)
   ===================================================================================== */
.rescue {
  position: fixed; inset: 0; z-index: 10000; overflow: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.rescue-box { max-width: 640px; margin: 0 auto; }
.rescue h1 { margin: 8px 0 10px; font-size: 22px; line-height: 1.25; }
.rescue h1:focus { outline: none; }
.rescue-lead { margin: 0 0 14px; color: var(--ink-dim); }
.rescue-err { margin: 0 0 14px; font-size: 13px; color: var(--ink-faint); }
.rescue-err summary { cursor: pointer; min-height: 32px; }
.rescue-err pre { margin: 6px 0 0; padding: 10px; border-radius: 8px; background: #1a1411; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; max-height: 180px; overflow: auto; }
.rescue-sec { margin: 0 0 12px; padding: 12px 14px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.rescue-sec h2 { margin: 0 0 6px; font-size: 15px; }
.rescue-sec p { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-dim); }
.rescue-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rescue .btn { min-height: 44px; justify-content: center; }
.rescue-row .btn { flex: 1 1 200px; }
.rescue .btn:disabled { opacity: .45; cursor: default; }
.rescue[data-busy] .btn { pointer-events: none; opacity: .6; }
.rescue-list { list-style: none; margin: 0; padding: 0; }
.rescue-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.rescue-list li:first-child { border-top: 0; }
.rescue-list .btn { flex: none; padding: 8px 12px; font-size: 13.5px; }
.rescue-item { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.rescue-item small, .rescue-none { color: var(--ink-faint); font-size: 12.5px; }
.rescue-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 13.5px; }
.rescue-confirm input {
  flex: 1 1 140px; min-height: 44px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(255,240,220,.3); background: #1a1411; color: var(--ink); font: inherit; font-size: 16px;
}
.rescue-status { min-height: 22px; margin: 4px 0 0; font-size: 13.5px; color: var(--ok); }
.rescue-status.bad { color: var(--ko-text); }

/* Crédits & licences : listes et liens de la vue (elle reprend la mise en page .sy de la vue Synchronisation) */
.ab a { color: var(--accent); text-underline-offset: 2px; }
.ab-list { margin: 0 0 4px; padding-left: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.ab-list li { margin-bottom: 4px; overflow-wrap: anywhere; }
.ab code { font-size: .92em; }
/* Entrée du menu ⋯ : icône seule dans l'en-tête large, libellé complet dans le menu du téléphone */
body[data-lay="wide"] .about-more .about-more-l { display: none; }
body[data-lay="wide"] .about-more { min-width: 40px; }

/* =====================================================================================
   v11 — étiquettes lisibles, verso entier, carte neuve « découvre-la », panneau de repos sur téléphone
   ===================================================================================== */
/* « Clique » ou « Touche » selon l'appareil (les deux mots sont dans la page) */
.t-touch { display: none; }
@media (pointer: coarse) { .t-mouse { display: none; } .t-touch { display: inline; } }

/* Étiquette du bout des boîtes : nom court ; les noms plus longs rétrécissent par paliers (.s1, .s2) avant toute coupure */
.end-title.s1 { font-size: 14px; }
.end-title.s2 { font-size: 11.5px; }
body:not([data-lay="wide"]) .end-title.s1 { font-size: 17px; }
body:not([data-lay="wide"]) .end-title.s2 { font-size: 13.5px; }
html[data-render="flat"] .fd-plate .end-title.s1 { font-size: .95em; }
html[data-render="flat"] .fd-plate .end-title.s2 { font-size: .8em; line-height: 1.12; }
/* Marqueur neutre (papier, jamais rouge) : « neuve » pour une boîte jamais commencée, « + N » pour les nouvelles du jour
   quand aucune révision n'est due. La pastille rouge .end-due ne compte que les révisions. */
.end-tag {
  position: absolute; right: -10px; bottom: -2px; z-index: 2;
  min-width: 28px; height: 25px; padding: 0 9px; box-sizing: border-box;
  display: grid; place-items: center; border-radius: 999px;
  background: #e6d8b6; color: #5a4632;
  font: 700 13px/1 Inter, sans-serif; letter-spacing: .2px; white-space: nowrap;
  box-shadow: 0 0 0 2.5px #fbf6ea, 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(90,60,30,.3);
}
.end-tag.plus { height: 22px; min-width: 26px; padding: 0 7px; background: #f1e9d3; font-size: 12px; font-weight: 600; }
html[data-render="3d"] body[data-lay="wide"] .end-tag { right: -8px; bottom: -1px; height: 21px; padding: 0 7px; font-size: 11.5px; box-shadow: 0 0 0 2px #fbf6ea, 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(90,60,30,.3); }
html[data-render="3d"] body[data-lay="wide"] .end-tag.plus { height: 19px; font-size: 11px; }
.fd-plate .end-tag { right: -.2em; top: auto; bottom: calc(100% - .3em); height: 1.6em; font-size: max(12px, .85em); box-shadow: 0 0 0 2px #fbf6ea, 0 2px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(90,60,30,.3); }
.fd-plate .end-tag.plus { height: 1.4em; }

/* Verso d'une carte à question : la question rappelée en tête n'est jamais coupée (2 à 4 lignes, police réduite) et
   l'étiquette « Nouvelle » n'est plus rognée (elle ne rétrécit pas ; c'est la question qui cède la place) */
.face-head > .tag:last-child { flex: none; overflow: visible; text-overflow: clip; }
.back-head-text { flex: 1 1 auto; min-width: 0; }
.back-head-text:is(.q2, .q3, .q4) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.12; }
.back-head-text.q2 { font-size: calc(var(--card-h) * .068); }
.back-head-text.q3 { font-size: calc(var(--card-h) * .056); }
.back-head-text.q4 { font-size: calc(var(--card-h) * .044); line-height: 1.08; }

/* Carte neuve présentée (« découvre-la ») : bandeau à cheval sur le bord bas de la carte, un seul bouton */
.discover-tag {
  position: absolute; left: 50%; bottom: -14px; z-index: 3; transform: translateX(-50%); /* à cheval sur le bord bas : le haut de la carte garde son en-tête */
  padding: 4px 14px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  background: var(--accent); color: #1b1410;
  font: 700 clamp(12px, calc(var(--card-w) * .034), 15px)/1.25 Inter, sans-serif; letter-spacing: .2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.flycard.blanking .discover-tag { opacity: 0; transition: opacity .25s; }
.flycard.present .stamp.ok, .flycard.present .stamp.ko { color: #26774a; }
.btn-understood { min-width: 200px; justify-content: center; }

/* Téléphone, leçon hors session : titre et phrase en haut ; juste dessous la boîte (la caméra se cale dans l'espace laissé entre
   les deux groupes : app.js · measureIdleBand) ; compteurs, bilan, prévision, indication et boutons collés en bas.
   `order` 0 = groupe du haut, 1 et plus = groupe du bas ; l'espace libre (::after) les sépare. */
body[data-lay="phone"].mode-lesson .hand:not(.in-session) .panel::after { content: ''; flex: 1 1 0; min-height: 0; }
body[data-lay="phone"].mode-lesson .panel > .bilan { order: 1; margin: 0 auto 6px; }
body[data-lay="phone"].mode-lesson .panel > .stats { order: 1; margin: 0 0 8px; }
body[data-lay="phone"].mode-lesson .panel > .fcline { order: 2; margin: 0 0 4px; }
body[data-lay="phone"].mode-lesson .panel > .hint { order: 3; margin: 0 0 6px; }
body[data-lay="phone"].mode-lesson .panel > .undo-end { order: 4; margin: 0 auto 4px; }
body[data-lay="phone"].mode-lesson .panel > .panel-actions { order: 5; margin-top: 0 !important; }
/* À plat sur téléphone : le bureau glisse en douceur entre le cadrage de repos et celui de la session */
body[data-lay="phone"].mode-lesson .f-desk.glide { transition: opacity .5s ease, visibility 0s, top .55s ease, height .55s ease; }
html[data-motion="reduced"] body .f-desk.glide { transition: none; }
/* Question très longue : en paragraphe au-dessus de la réponse, jamais coupée */
.back-head-text.q-label { font-family: Caveat, cursive; font-size: calc(var(--card-h) * .085); font-weight: 600; color: var(--paper-faint); }
.back-answer .q-long {
  align-self: stretch; text-align: left; margin-bottom: 1%;
  font-family: 'Klee One', serif; font-weight: 600; color: #1d1a17;
  font-size: calc(var(--card-h) * .05); line-height: 1.25; overflow-wrap: anywhere;
}
body[data-lay="short"] .discover-tag { bottom: -8px; padding: 2px 12px; font-size: 12px; }

/* ==========================================================================
   v12 · correctifs fonctionnels (audit fonctionnel F-11)
   Texte très long (jusqu'à 1 000 caractères acceptés par l'import) : la zone de texte de la carte défile au lieu de
   déborder (réponse invisible, question sur l'en-tête). Centré tant que tout tient (marges automatiques : un contenu
   centré qui déborde perdrait son haut), en haut sinon. `pan-y` : le doigt fait défiler verticalement ; le glissement
   horizontal (Je savais / Raté) reste géré par la carte (le défilement vertical annule un glissement commencé).
   ========================================================================== */
.back-answer {
  justify-content: flex-start;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  touch-action: pan-y; scrollbar-width: thin;
}
.back-answer > :first-child { margin-top: auto; }
.back-answer > :last-child { margin-bottom: auto; }
.back-answer .answer, .back-answer .note, .back-answer .reading-mean { max-width: 100%; overflow-wrap: anywhere; }
.front-text.long {
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  touch-action: pan-y; scrollbar-width: thin;
  line-height: 1.25; bottom: 15%; padding-bottom: 0;
}
.front-text.long > .ft-in { margin: auto 0; text-align: left; overflow-wrap: anywhere; }
.back-answer .q-long { font-size: max(13px, calc(var(--card-h) * .05)); }
.back-answer > :last-child { padding-bottom: 10px; } /* (dernière ligne jamais sous l'étiquette « découvre-la ») */

/* =====================================================================================
   v12 · interface — audit UI (docs/audit-ui.md)
   Jetons de taille et de rayon, icônes monochromes, animations rapides, voile du tiroir, bannière d'installation,
   messages, tablette tactile, fin de journée, classeur compact, lisibilité. Bloc ajouté en fin de feuille :
   il complète les règles précédentes sans les réécrire.
   ===================================================================================== */
:root {
  color-scheme: dark;                     /* menus, barres de défilement, cases : thème sombre du système */
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px; --fs-2xl: 26px;   /* échelle de texte : rien de lisible sous 12 px */
  --r-xs: 4px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-pill: 999px;                       /* rayons */
}
select option { background: #1a1411; color: var(--ink); }
::placeholder { color: var(--ink-faint); opacity: 1; }           /* 5,5:1 sur les champs (avant : gris par défaut, 3,96:1) */
.memo-edit ::placeholder { color: #6b5a2a; }
.chip[hidden] { display: none; }

/* ---------- Icônes : un seul jeu, monochrome (masque SVG), qui prend la couleur du texte ---------- */
.ic {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.ic-cards { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='9'%20width='14'%20height='11'%20rx='2'/%3E%3Cpath%20d='M7%205.5h11a3%203%200%200%201%203%203V16'/%3E%3C/svg%3E"); }
.ic-plus { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%205v14M5%2012h14'/%3E%3C/svg%3E"); }
.ic-edit { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020l1-4L16.5%204.5a2.1%202.1%200%200%201%203%203L8%2019z'/%3E%3Cpath%20d='M14%207l3%203'/%3E%3C/svg%3E"); }
.ic-sliders { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%207h9M17%207h3M4%2017h3M11%2017h9'/%3E%3Ccircle%20cx='15'%20cy='7'%20r='2'/%3E%3Ccircle%20cx='9'%20cy='17'%20r='2'/%3E%3C/svg%3E"); }
.ic-archive { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='5'%20rx='1'/%3E%3Cpath%20d='M5%209v9a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V9M10%2013h4'/%3E%3C/svg%3E"); }
.ic-book { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205a2%202%200%200%201%202-2h13v15H6a2%202%200%200%200-2%202z'/%3E%3Cpath%20d='M4%2020a2%202%200%200%200%202%201h13v-3M8.5%207h6'/%3E%3C/svg%3E"); }
.ic-wand { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.7%205.3L19%2010l-5.3%201.7L12%2017l-1.7-5.3L5%2010l5.3-1.7z'/%3E%3Cpath%20d='M19%2016l.7%201.8%201.8.7-1.8.7L19%2021l-.7-1.8-1.8-.7%201.8-.7z'/%3E%3C/svg%3E"); }
.ic-sun { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%202.5v2M12%2019.5v2M2.5%2012h2M19.5%2012h2M5.3%205.3l1.4%201.4M17.3%2017.3l1.4%201.4M18.7%205.3l-1.4%201.4M6.7%2017.3l-1.4%201.4'/%3E%3C/svg%3E"); }
.ic-chart { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2020v-7M12%2020V5M19%2020v-10'/%3E%3C/svg%3E"); }
.ic-sync { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%208h14l-3-3M20%2016H6l3%203'/%3E%3C/svg%3E"); }
.ic-info { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v6M12%207.6v.01'/%3E%3C/svg%3E"); }
.ic-download { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204v11M7%2011l5%205%205-5M5%2020h14'/%3E%3C/svg%3E"); }
.ic-upload { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2016V5M7%209l5-5%205%205M5%2020h14'/%3E%3C/svg%3E"); }
.ic-undo { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2014L4%209l5-5'/%3E%3Cpath%20d='M4%209h10a6%206%200%200%201%200%2012h-3'/%3E%3C/svg%3E"); }
.ic-reset { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2012a9%209%200%201%200%203-6.7L3%208'/%3E%3Cpath%20d='M3%203v5h5'/%3E%3C/svg%3E"); }
.ic-play { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%205l11%207-11%207z'/%3E%3C/svg%3E"); }
.ic-flip { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M20%2011a8%208%200%201%200-2.3%205.7'/%3E%3Cpath%20d='M20%204v7h-7'/%3E%3C/svg%3E"); }
.ic-file { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203h8l5%205v13H6z'/%3E%3Cpath%20d='M14%203v5h5M9%2013h7M9%2017h7'/%3E%3C/svg%3E"); }
.ic-lock { --i: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='5'%20y='11'%20width='14'%20height='9'%20rx='2'/%3E%3Cpath%20d='M8%2011V8a4%204%200%200%201%208%200v3'/%3E%3C/svg%3E"); }
.panel-sec .bi { display: inline-grid; place-items: center; }
.panel-sec .bi .ic { width: 20px; height: 20px; vertical-align: 0; }
.deck-chip .ic, .btn .ic, .linkbtn .ic, .btn-ghost .ic { width: 1.1em; height: 1.1em; }
.linkbtn .ic { vertical-align: -.22em; margin-right: 2px; }
.ai-entry-ico .ic, .ai-drop-ico .ic { width: 26px; height: 26px; vertical-align: 0; }
.ai-tab .ic { width: 18px; height: 18px; vertical-align: 0; }
.undo-btn .ic, .undo-pg .ic { width: 20px; height: 20px; vertical-align: -.25em; }
.vac-chip .ic { width: 18px; height: 18px; }
.fc-stats .ic { vertical-align: -.22em; }

/* ---------- Animations « rapides » (html[data-motion="fast"], voir app.js · dur) : ~45 % des durées complètes ---------- */
html[data-motion="fast"] .flip { transition-duration: .27s; }
html[data-motion="fast"] .flycard:not(.flipped) .face.back, html[data-motion="fast"] .flycard.flipped .face.front { transition: visibility 0s .27s; }
html[data-motion="fast"] .lid { transition-duration: .34s; }
html[data-motion="fast"] .fd-lid { transition-duration: .27s; }
html[data-motion="fast"] .mini { transition-duration: .16s; }
html[data-motion="fast"] .deckbox.slide { transition-duration: .32s; }
html[data-motion="fast"] .drawer { transition-duration: .14s; }
html[data-motion="fast"] body { --cam: .72s cubic-bezier(.5, 0, .25, 1); }
html[data-motion="fast"] .actions .btn, html[data-motion="fast"] .panel { animation-duration: .12s; }
html[data-motion="fast"] .end-stamp.new { animation-duration: .2s; }

/* ---------- Voile derrière le tiroir : un toucher ou un clic dehors le ferme (app.js · drawerBackdrop) ---------- */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 49;
  background: rgba(10, 7, 5, .55);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s;
}
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .drawer-backdrop { transition-duration: .01s; } }
html[data-motion="reduced"] .drawer-backdrop { transition-duration: .01s; transition-delay: 0s; }

/* ---------- Messages : au-dessus de la rangée de boutons du bas (app.js · placeToasts), jamais dessus ---------- */
.toasts { bottom: var(--toast-b, max(16px, env(safe-area-inset-bottom))); }
.toasts.toasts-short {                      /* paysage : dans la colonne de la scène, à droite */
  left: auto; right: max(12px, env(safe-area-inset-right)); transform: none;
  width: min(380px, calc(46vw - 24px)); bottom: max(12px, env(safe-area-inset-bottom));
}
.toast { font-size: var(--fs-s); }

/* ---------- Bannière d'installation / de mise à jour (js/pwa.js) ---------- */
.pwa-dock { z-index: 15; }                  /* sous le menu ⋯ (20) : elle ne le masque plus */
body:has(#moreMenu.open) .pwa-dock { display: none; }
body:not([data-lay="wide"]) .pwa-dock {     /* petit écran : une bande en bas, qui garde sa place (l'interface se raccourcit d'autant) */
  top: auto; bottom: calc(8px + env(safe-area-inset-bottom));
  left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); max-width: none;
}
body:not([data-lay="wide"]) .pwa-note { width: 100%; }
body:not([data-lay="wide"]) .pwa-note-text { flex: 1; }
body:not([data-lay="wide"]) .pwa-dock .pwa-note { padding: 6px 6px 6px 14px; }
body:not([data-lay="wide"]):has(.pwa-dock .pwa-note):not(:has(.hand.in-session)) .ui { padding-bottom: var(--pwa-h, 0px); }

/* ---------- Phrase d'aide de l'armoire sur petit écran (elle était masquée) ---------- */
.lib-hint { display: none; }
body[data-lay="phone"].mode-library .panel > p.lib-hint,
body[data-lay="short"].mode-library .panel > p.lib-hint { display: block; margin: 0 0 10px; padding: 0 14px; font-size: var(--fs-s); line-height: 1.35; color: var(--ink-dim); }
body[data-lay="short"].mode-library .panel > p.lib-hint { padding: 0; }
body.mode-lesson .panel > p.lib-hint { display: none; }

/* ---------- Menu ⋯ : deux groupes titrés ---------- */
.more-title { display: none; }
body:not([data-lay="wide"]) .more-menu > .more-title {
  display: block; min-height: 0; padding: 6px 14px 0; font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint);
}
body:not([data-lay="wide"]) .more-menu > .more-title:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
body:not([data-lay="wide"]).mode-library .more-menu > .more-title { display: none; }
body:not([data-lay="wide"]) .more-menu .ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -.25em; }

/* ---------- Fin de journée : un état lisible, pas un bouton grisé (app.js · renderPanel) ---------- */
.day-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 52px; padding: 8px 16px; border-radius: var(--r-m);
  background: rgba(95, 179, 125, .14); border: 1px solid rgba(95, 179, 125, .5);
  color: var(--ink); text-align: center;
}
.day-done .dd-l { font-size: var(--fs-xs); color: var(--ink-dim); }
.day-done .dd-n { font-size: var(--fs-l); font-weight: 600; }
body:not([data-lay="wide"]) .panel-actions > .btn.other-deck { justify-content: center; min-height: 46px; }
body[data-lay="wide"] .day-done { flex-direction: row; gap: 10px; padding: 8px 18px; }
/* Boîte vide : la phrase reste visible sur téléphone */
body:not([data-lay="wide"]).mode-lesson .panel > p.empty { display: block; margin: 0 0 12px; }

/* ---------- Classeur : en-tête collant plus bas, pastilles sur une rangée qui défile ---------- */
.fchip small::before { content: "·"; margin-right: 4px; }
.fchip small { font-size: var(--fs-xs); }
.browse-count { font-size: var(--fs-xs); }
@media (max-width: 640px), (max-height: 519px) {
  .browse-tools .fchips, .fchips.facet-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; padding-bottom: 2px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  .fchips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; min-height: 40px; }
  .browse-tools { padding-bottom: 6px; }
  .browse-tools .fchips { margin-top: 8px; }
  .fchips.facet-chips { margin-top: 0; margin-bottom: 4px; }
}

/* ---------- Lisibilité : plancher de 12 px pour le texte d'information ---------- */
.face-head { font-size: max(12px, calc(var(--card-w) * .03)); }
.panel .stat span, body:not([data-lay="wide"]) .panel .stat span { font-size: var(--fs-xs); }
.card-facts dt, .st-kpi small, .st-brow small, .brow .bd, .lib-meta span, .bl-rate small, .bl-more { font-size: var(--fs-xs); }
.hm-months { font-size: 11px; }
.hm-wd, .hm-c, .hm-c.pause { font-size: 11px; }
.fb em, .fb span { font-size: 11px; }
.lib-badge.prem { font-size: 11px; }
.lib-desc, .brow .bb { font-size: var(--fs-s); }
.linkbtn { font-size: var(--fs-s); }
/* Furigana : jamais sous 10 px, et la ligne d'exemple se resserre pour que la lecture ne chevauche pas la ligne du dessus */
rt { font-size: max(.5em, 10px); }
.back-body .row.ex .jp { font-size: .7em; }
.back-body .row.ex rt { font-size: max(.62em, 10px); line-height: 1; }
/* Statistiques : la barre « réserve » qui dépasse l'échelle est coupée en pointe (elle ne se lit plus comme les autres) */
.st-btrack.cut i { clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%); opacity: .75; }
/* Catalogue : rangée de catégories qui défile (dégradé à droite), bouton d'ajout toujours visible */
@media (max-width: 640px) {
  .lib-cats { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
}
.lib .ai-final { position: sticky; bottom: 0; margin: 12px -2px 0; padding: 10px 2px calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(36, 28, 24, 0), #241c18 14px); }
.edit-row .del, .edit-row .ed { color: #7a6b5b; }        /* ≥ 4,5:1 sur le papier (avant : 3,1:1) */

/* ---------- Petits écrans : carte et bandeau « Nouvelle carte » ---------- */
@media (max-height: 760px) {
  body[data-lay="phone"] {
    --card-w: min(440px, calc(100vw - 28px), calc((100svh - 480px) / .6));
    --card-h: calc(var(--card-w) * .6);
  }
}
body[data-lay="short"] .hand.in-session .card-slot { margin-bottom: 10px; }   /* le bandeau « Nouvelle carte » ne mord plus sur le bouton */

/* ---------- Écrans tactiles : cibles ≥ 44 px, retour au toucher ---------- */
@media (pointer: coarse) {
  .btn-ghost, .linkbtn, .deck-chip, .fchip, .chip-select, .field select, .field input, .search, .lib-filters select, .drawer .btn, .modal .btn, .modal .btn-ghost { min-height: 44px; }
  .progress .stop { display: inline-flex; align-items: center; min-height: 44px; }
  .deck-chip:active, .linkbtn:active, .fchip:active, .brow:active, .lib-card:active, .btn-ghost:active { transform: scale(.97); }
}

/* ---------- Tablette (écran large, pointeur tactile) : barre du haut compacte + menu ⋯, comme sur téléphone ---------- */
@media (pointer: coarse) {
  body[data-lay="wide"] .topbar {
    flex-wrap: nowrap; gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
  }
  body[data-lay="wide"] .topbar-right { flex-wrap: nowrap; gap: 8px; }
  body[data-lay="wide"] #dayChip { min-height: 44px; padding: 6px 14px; }
  body[data-lay="wide"] .vac-chip { min-height: 44px; }
  body[data-lay="wide"] .more-btn {
    display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
    font-size: 22px; line-height: 1; color: var(--ink);
  }
  body[data-lay="wide"] .more-btn[aria-expanded="true"] { background: var(--bg-2); border-color: rgba(255,240,220,.25); }
  body[data-lay="wide"] .more-menu {
    display: none; position: absolute; z-index: 20; top: calc(100% - 2px); right: max(12px, env(safe-area-inset-right));
    flex-direction: column; align-items: stretch; gap: 6px; min-width: 260px; padding: 8px;
    border-radius: 14px; border: 1px solid var(--line); background: #2a211c; box-shadow: 0 18px 40px rgba(0,0,0,.5);
  }
  body[data-lay="wide"] .more-menu.open { display: flex; }
  body[data-lay="wide"].mode-library .more-menu .lesson-only { display: none; }
  body[data-lay="wide"] .more-menu > * { min-height: 44px; justify-content: space-between; border-radius: 10px; font-size: 15px; }
  body[data-lay="wide"] .more-menu .btn-ghost { text-align: left; padding: 0 14px; }
  body[data-lay="wide"] .more-menu .chip-select select { min-height: 36px; font-size: 16px; }
  body[data-lay="wide"] .more-menu > .more-title {
    display: block; min-height: 0; padding: 6px 14px 0; font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .6px; text-transform: uppercase; color: var(--ink-faint);
  }
  body[data-lay="wide"] .more-menu > .more-title:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 10px; }
  body[data-lay="wide"].mode-library .more-menu > .more-title { display: none; }
  body[data-lay="wide"] .more-menu .ic { width: 18px; height: 18px; margin-right: 6px; vertical-align: -.25em; }
  body[data-lay="wide"] .sync-more .sync-more-l, body[data-lay="wide"] .about-more .about-more-l { display: inline; }
  body[data-lay="wide"] .sync-more, body[data-lay="wide"] .about-more { min-width: 0; }
  body[data-lay="wide"] .fcline .linkbtn { min-height: 44px; }
  body[data-lay="wide"] .panel .btn { min-height: 46px; }
}
/* Légende du bas (ordinateur) : ne recouvre plus le bord de la boîte */
.legend { padding-bottom: 18px; }
.btn-ghost > .ic:not(:only-child), .undo-end .ic { margin-right: 6px; }
/* v12 · paysage : phrase d'aide unique, bannière côté scène, menu défilant */
body[data-lay="short"].mode-library .panel > p:not(.lib-hint) { display: none; }
body[data-lay="short"] .pwa-dock { left: auto; right: max(10px, env(safe-area-inset-right)); width: min(380px, 46vw); }
body[data-lay="short"]:has(.pwa-dock .pwa-note):not(:has(.hand.in-session)) .ui { padding-bottom: 0; }
body:not([data-lay="wide"]) .more-menu, body[data-lay="wide"] .more-menu.open { max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; }
body[data-lay="wide"]:has(.pwa-dock .pwa-note) .legend { visibility: hidden; }
.pile-label .pl-wait { font: 500 14px/1.2 Inter, sans-serif; color: var(--ink-dim); }
.pile-label.side .pl-wait { font-size: 15px; }
.saved-msg { min-height: 1.3em; margin: 6px 0 0; font-size: var(--fs-s); color: var(--ok); }
.settings-danger { padding: 12px 14px 14px; border-radius: var(--r-m); background: rgba(217, 96, 76, .08); border: 1px solid rgba(217, 96, 76, .25); }
.pile-label .pl-wait { font: 500 22px/1.2 Caveat, cursive; }
.pile-label.side .pl-wait { font-size: 28px; }
html[data-render="flat"] .pile-label .pl-wait, html[data-render="flat"] .pile-label.side .pl-wait { font-size: 16px; font-family: Inter, sans-serif; }
/* Vacances : l'écriteau se pose sous l'étiquette au lieu de la recouvrir (on relit le nom et le nombre de cartes) */
body.vacation .end-plate::after {
  top: auto; bottom: -4px; transform: translate(-50%, 78%) rotate(-4deg);
  font-size: 15px; padding: 0 7px; border-width: 1.5px;
}
body:not([data-lay="wide"]).vacation .end-plate::after { font-size: 19px; }
/* Grand écran : la bannière se centre en bas, sur la place de la légende (qu'elle remplace), loin de la réserve */
body[data-lay="wide"] .pwa-dock { left: 50%; transform: translateX(-50%); align-items: center; }