/* ============================================================================
   PrépDEC — styles v4 « Studio noir »
   Direction inspirée de wantedfornothing.com (#040507, méta techniques,
   crochets, monospace, grands index) et itsnotviolent.com (noir + accent
   vif, display géant, mots barrés/en contour, marquee).
   Noir profond, ivoire, accent acide unique, signal pour l'erreur.
   Couche 3D pressable conservée et adaptée au sombre.
   ============================================================================ */

:root, [data-theme="dark"] {
  --bg: #09090B;
  --surface: #121214;
  --surface-alt: #1A1A1D;
  --ink: #F1EDE4;             /* ivoire — texte principal (17:1) */
  --ink-soft: #B8B3A6;        /* ivoire éteint (9,5:1) */
  --ink-deep: #000000;
  --hairline: rgba(241, 237, 228, .16);
  --hairline-strong: rgba(241, 237, 228, .45);
  --acid: #DCF343;            /* accent de remplissage — boutons, jauges, fonds */
  --accent-ink: #DCF343;      /* accent d'encre — textes (16:1 sur sombre) */
  --acid-dim: rgba(220, 243, 67, .12);
  --acid-under: #8FA31C;      /* assise 3D sous les remplissages acides */
  --signal: #FF6A5C;
  --signal-ink: #FF6A5C;      /* erreur en texte (7:1 sur sombre) */
  --signal-dim: rgba(255, 90, 70, .12);
  /* Boîtes de progression (flashcards + fiches) — indépendantes du thème */
  --box-learn: #8FA3AE;   --box-learn-dim: rgba(143, 163, 174, .18);  /* à apprendre : gris-bleu ardoise (neutre) */
  --box-fragile: #C0876A; --box-fragile-dim: rgba(192, 135, 106, .14); /* fragile : terracotta douce */
  --box-acquis: #4E90CF;  --box-acquis-dim: rgba(78, 144, 207, .15);  /* acquis : bleu */
  --sheet: rgba(0, 0, 0, .5);
  --panel-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8);
  --glow: rgba(220, 243, 67, .5);
  --grain-dot: 1;             /* grain blanc sur sombre */
  --press-h: 5px;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --smallcaps: .68rem;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #FFFFFF;             /* blanc — comme LUMEN */
  --surface: #FFFFFF;
  --surface-alt: #FCEFC7;    /* crème doux (#FFEFBD) pour fonds subtils */
  --ink: #032D3F;            /* bleu-canard profond — texte principal (LUMEN, ~12:1) */
  --ink-soft: #3E5C67;       /* canard éteint (~6:1) */
  --ink-deep: #021D29;
  --hairline: rgba(3, 45, 63, .14);
  --hairline-strong: rgba(3, 45, 63, .42);
  --acid: #8FC3FF;           /* accent de remplissage : bleu ciel (LUMEN) */
  --accent-ink: #0F5E7D;     /* accent en texte : bleu-canard (~5:1) */
  --acid-dim: rgba(143, 195, 255, .20);
  --acid-under: #5E9BE0;     /* assise 3D sous les remplissages bleus */
  --signal: #E0552E;
  --signal-ink: #B23A1E;     /* erreur en texte (~5:1) */
  --signal-dim: rgba(224, 85, 46, .12);
  --sheet: rgba(3, 45, 63, .16);
  --panel-shadow: 0 18px 40px -18px rgba(3, 45, 63, .28);
  --glow: rgba(143, 195, 255, .55);
  --grain-dot: 0;            /* grain sombre sur clair */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
::selection { background: var(--acid); color: #000; }

body {
  margin: 0;
  background: var(--bg);
  transition: background-color .25s ease, color .25s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
body {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.04; color: var(--ink); letter-spacing: -.02em; }
h2 { font-size: 1.5rem; margin: 2.2rem 0 .8rem; }
s { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
code { background: var(--surface-alt); border: 1px solid var(--hairline); padding: .1em .35em; font-size: .88em; font-family: var(--font-mono); }
cite { display: block; margin-top: .55rem; font-family: var(--font-mono); font-style: normal; font-size: .78rem; color: var(--ink-soft); }
cite::before { content: "→ "; color: var(--accent-ink); }
a { color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }

/* Voix technique : monospace, capitales, crochets */
.kicker, .nav-list a, .nav-toggle, .mode-tag, .q-theme, .btn, .side-title, .section-title span, .hatline, .footer-meta {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: var(--smallcaps);
  font-weight: 500;
}

/* ---------- Méta-barre ---------- */

.hatline {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 0; padding: .5rem clamp(1rem, 4vw, 3rem);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  font-size: .6rem;
}
.hatline-mid { color: var(--accent-ink); }
@media (max-width: 640px) { .hatline-mid { display: none; } }

/* ---------- Masthead ---------- */

.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  max-width: 84rem; margin: 0 auto;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: baseline; gap: .6rem; text-decoration: none; color: var(--ink); }
.brand-mark { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent-ink); }
.brand-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
.brand-text strong { font-weight: 900; }
.brand-sub { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }

.nav-list { display: flex; gap: .3rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav-list a {
  display: block; padding: .55rem .9rem;
  text-decoration: none; color: var(--ink-soft);
  border: 1px solid transparent; border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nav-list a:hover { color: var(--ink); border-color: var(--hairline-strong); }
.nav-list a.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-list li[hidden] { display: none; }

/* ---------- Menu déroulant de navigation ---------- */
.nav-drop { position: relative; }
.nav-toggle {
  display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem;
  color: var(--ink-soft); background: transparent; cursor: pointer;
  border: 1px solid transparent; border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.nav-toggle:hover, .nav-drop:focus-within .nav-toggle { color: var(--ink); border-color: var(--hairline-strong); }
.nav-toggle.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.nav-caret { font-size: .7em; line-height: 1; transition: transform .18s ease; }
.nav-drop.open .nav-caret { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .nav-drop:hover .nav-caret { transform: rotate(180deg); } }
.nav-sub {
  position: absolute; top: calc(100% + .35rem); left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: .2rem; min-width: 12rem;
  margin: 0; padding: .4rem; list-style: none;
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: .8rem;
  box-shadow: var(--panel-shadow);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-drop.open .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
/* Ouverture au survol et au clavier seulement avec une souris : sur écran tactile,
   le survol « collant » laissait le menu ouvert après le choix d'une rubrique. */
@media (hover: hover) and (pointer: fine) {
  .nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
  }
}
.nav-sub a { display: block; white-space: nowrap; }

/* ---------- Marquee ---------- */

.marquee {
  overflow: hidden; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: var(--bg);
}
.marquee-track {
  display: flex; width: max-content;
  animation: slide 90s linear infinite;
  will-change: transform;
}
.marquee-track span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .18em;
  font-size: .68rem; color: var(--ink-soft); padding: .55rem 0; white-space: nowrap;
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Structure ---------- */

main { max-width: 84rem; margin: 0 auto; padding: clamp(1.6rem, 3vw, 3rem) clamp(1rem, 4vw, 3rem) 5rem; perspective: 1400px; }
main:focus { outline: none; }

.view > * { animation: rise3d .55s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 0; }
.view > *:nth-child(2) { animation-delay: .07s; }
.view > *:nth-child(3) { animation-delay: .14s; }
@keyframes rise3d {
  from { opacity: 0; transform: translate3d(0, 22px, -60px) rotateX(7deg); }
  to   { opacity: 1; transform: none; }
}

.footer { border-top: 1px solid var(--hairline); padding: 1.6rem clamp(1rem, 4vw, 3rem) 2.2rem; color: var(--ink-soft); font-size: .85rem; }
.footer-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .8rem; color: var(--ink-soft); }
.footer-meta span:nth-child(2) { color: var(--accent-ink); }
.footer > p:last-child { max-width: 46rem; margin: 0; }

.kicker { color: var(--accent-ink); margin: 0 0 .6rem; }

.section-title {
  display: flex; align-items: baseline; gap: 1.2rem;
  margin-top: 4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--hairline-strong);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
}
.section-title span { color: var(--accent-ink); flex: none; font-weight: 500; }

.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46rem; }
.lede s { color: var(--ink); }
.gold { color: var(--accent-ink); font-weight: 700; }
.ko-text { color: var(--signal-ink); }

.notice {
  background: var(--acid-dim); border-left: 3px solid var(--acid);
  padding: .7rem 1rem; font-size: .92rem; max-width: 46rem; color: var(--ink);
}

.leaders { flex: 1; min-width: 2rem; margin: 0 .8rem; border-bottom: 1px dotted var(--hairline); transform: translateY(-.35em); }

/* ---------- Héro ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(15.5rem, 1fr);
  gap: clamp(1.6rem, 4vw, 4rem); align-items: start; margin-top: 1rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.6rem);
  margin: .3rem 0 1.3rem; font-weight: 900; text-transform: uppercase;
  overflow-wrap: break-word; hyphens: auto;
}
.hl-line { display: block; }
.hl-outline {
  display: block; color: transparent;
  -webkit-text-stroke: 2px var(--acid);
  text-stroke: 2px var(--acid);
}
.hero-actions, .session-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.7rem; }

.hero-side { border-top: 1px solid var(--hairline-strong); padding-top: 1.1rem; position: sticky; top: 1rem; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.side-title { color: var(--accent-ink); margin: 0 0 .7rem; }
.side-stats { margin: 0; }
.side-stats div { display: flex; align-items: baseline; gap: .5rem; padding: .6rem 0; border-bottom: 1px dotted var(--hairline); }
.side-stats dt { color: var(--ink-soft); font-size: .9rem; flex: none; }
.side-stats dd { margin: 0 0 0 auto; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.hero-side .btn { margin-top: 1rem; width: 100%; justify-content: center; }

/* ---------- Sommaire index ---------- */

.mode-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.mode-row {
  display: flex; align-items: baseline; gap: 1.3rem;
  padding: 1.35rem .5rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}
.mode-row:hover { background: var(--ink); color: var(--bg); padding-left: 1.1rem; }
.mode-num { flex: none; width: 2.6rem; font-family: var(--font-mono); font-size: .85rem; font-weight: 500; color: var(--accent-ink); }
.mode-row:hover .mode-num { color: var(--bg); }
.mode-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1; }
.mode-title { display: flex; align-items: baseline; font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; }
.mode-text { color: var(--ink-soft); font-size: .95rem; max-width: 42rem; }
.mode-row:hover .mode-text { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.mode-tag { flex: none; align-self: center; color: var(--accent-ink); border: 1px solid var(--accent-ink); padding: .34rem .7rem; border-radius: 999px; }
.mode-row:hover .mode-tag { color: var(--bg); border-color: var(--bg); }
.mode-arrow { flex: none; align-self: center; display: inline-flex; align-items: center; margin-left: -.5rem; margin-right: .4rem; color: var(--accent-ink); transition: transform .2s ease, color .2s ease; }
.mode-arrow svg { width: 1.4rem; height: 1.4rem; filter: drop-shadow(0 1.2px .4px rgba(0, 0, 0, .32)); }
.mode-row:hover .mode-arrow { transform: translateX(4px); color: var(--bg); }

/* ---------- Programme ---------- */

.theme-list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 4rem; column-rule: 1px solid var(--hairline); }
.theme-list li { break-inside: avoid; padding: .9rem 0; border-bottom: 1px dotted var(--hairline); }
.theme-head { display: flex; align-items: baseline; }
.theme-head strong { font-size: 1.05rem; font-weight: 700; }
.theme-head em { font-style: normal; font-family: var(--font-mono); font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.theme-desc { display: block; color: var(--ink-soft); font-size: .9rem; margin-top: .15rem; }
.theme-link { display: block; text-decoration: none; color: inherit; }
.theme-link:hover .theme-head strong, .theme-link:focus-visible .theme-head strong { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.theme-go { display: inline-flex; align-items: center; gap: .3rem; margin-top: .4rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--accent-ink); opacity: .5; transition: opacity .15s ease, transform .15s ease; }
.theme-link:hover .theme-go, .theme-link:focus-visible .theme-go { opacity: 1; transform: translateX(3px); }
.theme-go svg { width: 1rem; height: 1rem; filter: drop-shadow(0 1px .3px rgba(0, 0, 0, .28)); }

/* ---------- Boutons : extrusion pressable ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  text-decoration: none; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  box-shadow: 0 var(--press-h) 0 var(--hairline-strong), 0 calc(var(--press-h) + 10px) 18px -8px var(--sheet);
  transform: translateY(0);
  transition: transform .16s ease, box-shadow .16s ease, background-color .18s ease, color .18s ease;
}
.btn svg { width: 1rem; height: 1rem; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 calc(var(--press-h) + 2px) 0 var(--hairline-strong), 0 calc(var(--press-h) + 16px) 22px -8px var(--sheet); }
.btn:active { transform: translateY(calc(var(--press-h) - 2px)); box-shadow: 0 2px 0 var(--hairline-strong); }
.btn-primary {
  background: var(--acid); color: #000; border-color: var(--acid); font-weight: 700;
  box-shadow: 0 var(--press-h) 0 var(--acid-under), 0 calc(var(--press-h) + 10px) 20px -6px var(--glow);
}
.btn-primary:hover { box-shadow: 0 calc(var(--press-h) + 2px) 0 var(--acid-under), 0 calc(var(--press-h) + 16px) 26px -6px var(--glow); }
.btn-primary:active { box-shadow: 0 2px 0 var(--acid-under); }
.btn-danger { color: var(--signal-ink); border-color: var(--signal); box-shadow: 0 var(--press-h) 0 rgba(255, 106, 92, .5); }
.btn-danger:hover { background: var(--signal-dim); box-shadow: 0 calc(var(--press-h) + 2px) 0 rgba(255, 106, 92, .5); }
.btn-danger:active { box-shadow: 0 2px 0 rgba(255, 106, 92, .5); }
.btn-small { padding: .6rem 1.1rem; }

/* ---------- Panneaux : plaque sombre en profondeur ---------- */

.panel {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  position: relative; z-index: 0;
  box-shadow: var(--panel-shadow);
}
.panel::before, .panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-alt); border: 1px solid var(--hairline);
}
.panel::before { transform: rotate(.5deg) translate3d(6px, 8px, -12px); opacity: .8; }
.panel::after  { transform: rotate(-.4deg) translate3d(12px, 16px, -24px); opacity: .5; }
.panel h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: .3rem 0 1rem; text-transform: uppercase; }

.field-block { border: 0; padding: 0; margin: 1.6rem 0; }
.field-block legend { font-weight: 800; padding: 0; margin-bottom: .7rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }

.checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.checks-inline .check { min-width: 4.5rem; justify-content: center; }
.checks-column { flex-direction: column; align-items: flex-start; }
.check {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--surface-alt); border: 1px solid var(--hairline); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer; font-size: .95rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .55);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}
.check:hover { transform: translateY(-1px); border-color: var(--hairline-strong); box-shadow: 0 4px 0 rgba(0, 0, 0, .55); }
.check.is-disabled { opacity: .4; cursor: not-allowed; box-shadow: none; transform: none; }
.check input { accent-color: var(--acid); width: 1.05rem; height: 1.05rem; cursor: pointer; }
.check small { color: var(--ink-soft); }
.check:has(input:checked) { background: var(--acid); border-color: var(--acid); color: #000; transform: translateY(2px); box-shadow: 0 1px 0 var(--acid-under); }
.check:has(input:checked) small { color: rgba(9, 9, 11, .65); }

textarea {
  width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 2px;
  font-family: var(--font-mono); font-size: .95rem; line-height: 1.8; color: var(--ink);
  background: var(--bg); resize: vertical; caret-color: var(--acid);
}
textarea::placeholder { color: rgba(184, 179, 166, .55); }
textarea:focus { outline: 2px solid var(--acid); outline-offset: 2px; }

/* ---------- Sessions ---------- */

.session-head { margin-bottom: 1.3rem; position: relative; }
.q-numeral {
  position: absolute; right: -.4rem; top: -.8rem;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.5rem, 8vw, 6rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(241, 237, 228, .14);
  user-select: none; pointer-events: none;
}
.progress { height: 4px; background: var(--surface-alt); overflow: hidden; margin-top: .6rem; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.progress span { display: block; height: 100%; background: var(--acid); border-radius: 999px; transition: width .3s ease; box-shadow: 0 0 10px var(--glow); }

.q-theme { color: var(--ink-soft); margin: 0; }
.q-text { font-size: clamp(1.4rem, 2.8vw, 1.9rem); max-width: 44ch; font-weight: 800; line-height: 1.2; }
.q-hint { color: var(--ink-soft); font-size: .82rem; font-family: var(--font-mono); margin-top: -.3rem; }

.options { display: flex; flex-direction: column; margin: 1.3rem 0; max-width: 52rem; border-top: 1px solid var(--hairline); }
.option {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: .95rem .6rem; cursor: pointer;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease, transform .16s ease, box-shadow .16s ease;
}
.option:hover { background: var(--ink); color: var(--bg); padding-left: 1.1rem; transform: translate3d(0, -1px, 8px); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .9); }
.option:hover .option-letter { color: var(--bg); }
.option input { margin-top: .35rem; accent-color: var(--acid); width: 1.05rem; height: 1.05rem; flex: none; cursor: pointer; }
.option-letter { flex: none; width: 1.7rem; font-family: var(--font-mono); font-weight: 700; font-size: .85rem; color: var(--accent-ink); padding-top: .2rem; }
.option.is-correct { background: var(--acid-dim); box-shadow: inset 3px 0 0 var(--acid); }
.option.is-correct .option-letter { color: var(--accent-ink); }
.option.is-wrong { background: var(--signal-dim); box-shadow: inset 3px 0 0 var(--signal); }
.option.is-wrong .option-letter { color: var(--signal-ink); }
.option:has(input:disabled) { cursor: default; }
.option:has(input:disabled):hover { background: inherit; color: inherit; padding-left: .6rem; transform: none; }
.option.is-correct:has(input:disabled):hover { background: var(--acid-dim); }
.option.is-wrong:has(input:disabled):hover { background: var(--signal-dim); }
.option:has(input:disabled):hover .option-letter { color: var(--accent-ink); }
.option.is-wrong:has(input:disabled):hover .option-letter { color: var(--signal-ink); }

.verdict, .model-answer, .grading { animation: fold-open .45s cubic-bezier(.2, .7, .2, 1) both; transform-origin: 50% 0; }
@keyframes fold-open {
  from { opacity: 0; transform: perspective(900px) rotateX(-58deg); }
  to   { opacity: 1; transform: none; }
}

.verdict { max-width: 52rem; padding: 1.1rem 1.3rem; margin: 1.3rem 0; border-left: 3px solid; background: var(--surface-alt); }
.verdict.ok { border-color: var(--acid); }
.verdict.ko { border-color: var(--signal); }
.verdict strong { font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.verdict.ok strong { color: var(--accent-ink); }
.verdict.ko strong { color: var(--signal-ink); }

.model-answer { max-width: 52rem; background: var(--surface-alt); border-top: 2px solid var(--acid); padding: 1.1rem 1.3rem; margin: 1.3rem 0; }
.model-answer h2 { margin: 0 0 .5rem; font-size: 1.05rem; text-transform: uppercase; }
.model-answer p { margin: 0; white-space: pre-line; color: var(--ink); }

.grading { margin-top: 1.5rem; max-width: 52rem; }
.grading h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 1.1rem; text-transform: uppercase; }
.grading .btn { margin-top: 1.2rem; }

.panel-result { text-align: center; }
.panel-result .lede { margin-left: auto; margin-right: auto; }
.result-score { font-size: clamp(2.6rem, 7vw, 4.5rem); font-weight: 900; font-family: var(--font-mono); }
.panel-result .session-actions { justify-content: center; }
.panel-result h2 { text-align: left; border-top: 1px solid var(--hairline-strong); padding-top: .9rem; text-transform: uppercase; }

/* ---------- Examen ---------- */

.exam-rules { color: var(--ink-soft); padding-left: 1.2rem; max-width: 46rem; }
.exam-rules li { margin: .4rem 0; }
.exam-rules li::marker { color: var(--accent-ink); }

.exam-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.timer {
  margin: 0; font-variant-numeric: tabular-nums;
  font-family: var(--font-mono); font-weight: 700; font-size: 1.4rem;
  color: var(--accent-ink);
  border: 1px solid var(--hairline); border-radius: 999px; padding: .2rem .9rem;
  background: var(--bg); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6);
}
.timer span.is-low { color: var(--signal-ink); }

.exam-nav { display: flex; flex-wrap: wrap; gap: 0; margin: 1.1rem 0 1.5rem; border: 1px solid var(--hairline); width: fit-content; max-width: 100%; background: var(--bg); box-shadow: 0 4px 0 rgba(0, 0, 0, .6), 0 12px 18px -10px var(--sheet); }
.exam-dot {
  width: 2.5rem; height: 2.5rem;
  border: 0; border-right: 1px solid var(--hairline);
  background: transparent;
  font-family: var(--font-mono); font-weight: 500; font-size: .8rem;
  color: var(--ink-soft); cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, .05);
  transition: background-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.exam-dot:last-child { border-right: 0; }
.exam-dot:hover { color: var(--ink); transform: translateY(-1px); }
.exam-dot.is-answered { color: var(--accent-ink); box-shadow: inset 0 -3px 0 var(--acid); }
.exam-dot.is-current { background: var(--ink); color: var(--bg); transform: translateY(1px); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5); }

.exam-detail { list-style: none; padding: 0; margin: 0 0 1rem; text-align: left; max-width: 52rem; }
.panel-result .exam-detail { margin-left: auto; margin-right: auto; }
.exam-detail li { display: flex; gap: 1.1rem; align-items: flex-start; padding: .9rem .2rem; border-bottom: 1px dotted var(--hairline); }
.exam-detail li strong { flex: none; min-width: 2.8rem; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: .95rem; }
.exam-detail li.ok strong { color: var(--accent-ink); }
.exam-detail li.ko strong { color: var(--signal-ink); }
.exam-detail p { margin: 0; }
.detail-fix { color: var(--ink-soft); font-size: .9rem; margin-top: .3rem !important; }

.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* ---------- Statistiques ---------- */

.stat-rows { margin: 1.6rem 0; border-top: 1px solid var(--hairline); }
.stat-row { display: grid; grid-template-columns: minmax(10rem, 17rem) 1fr 4rem; align-items: center; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px dotted var(--hairline); }
.stat-label strong { display: block; font-size: 1.02rem; font-weight: 700; }
.stat-label span { color: var(--ink-soft); font-size: .8rem; font-family: var(--font-mono); }
.stat-bar { height: 5px; background: var(--surface-alt); overflow: hidden; border-radius: 999px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); }
.stat-bar span { display: block; height: 100%; background: var(--acid); border-radius: 999px; transition: width .4s ease; box-shadow: 0 0 10px var(--glow); }
.stat-rate { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-weight: 700; font-size: 1.05rem; }

.history { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.history li { display: flex; align-items: baseline; gap: .6rem; padding: .65rem 0; border-bottom: 1px dotted var(--hairline); font-variant-numeric: tabular-nums; }
.history li span { color: var(--ink-soft); }
.history li strong { margin-left: auto; font-family: var(--font-mono); font-size: 1.05rem; }
.history li strong.gold { color: var(--acid); }

.bank-errors { color: var(--signal-ink); }

/* ---------- Héro : pile de codes en lévitation ---------- */

.hero-figure {
  position: relative; height: 12.5rem; margin: 0 0 1.2rem;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  animation: floaty 7s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.book {
  position: absolute; left: 50%; width: 13.5rem; height: 3rem;
  border: 1px solid #000; border-radius: 2px 6px 6px 2px;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    1px 2px 0 #2A2A2E, 2px 3px 0 #232326, 3px 4px 0 #2A2A2E, 4px 5px 0 #232326,
    5px 6px 0 #2A2A2E, 6px 7px 0 #1C1C1F, 7px 9px 0 #000,
    10px 20px 26px -8px rgba(0, 0, 0, .85);
}
.book span {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: .56rem; font-weight: 700;
  padding: 0 .6rem; text-align: center;
}
.book::before, .book::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 2px; border-radius: 1px; background: rgba(0, 0, 0, .3); }
.book::before { left: 7px; }
.book::after { right: 7px; }
.b1 { background: linear-gradient(175deg, #F6F2E8 0%, var(--ink) 55%, #D8D3C6 100%); top: 0; transform: translateX(-50%) rotate(-5deg); z-index: 3; }
.b1 span { color: #09090B; }
.b2 { background: linear-gradient(175deg, #E7FA62 0%, var(--acid) 55%, #B7CC2E 100%); top: 3.4rem; transform: translateX(-52%) rotate(3deg); z-index: 2; }
.b2 span { color: #09090B; text-shadow: none; }
.b3 { background: linear-gradient(175deg, #FF8172 0%, #FF5546 55%, #D63C2E 100%); top: 6.9rem; transform: translateX(-49%) rotate(-2deg); z-index: 1; }
.b3 span { color: #1A0503; }

[data-theme="light"] .b1 { background: linear-gradient(175deg, #2E2E34 0%, #101013 55%, #000 100%); }
[data-theme="light"] .b1 span { color: var(--acid); }
[data-theme="light"] .book {
  box-shadow:
    1px 2px 0 #DDD8CB, 2px 3px 0 #D2CCBC, 3px 4px 0 #DDD8CB, 4px 5px 0 #D2CCBC,
    5px 6px 0 #DDD8CB, 6px 7px 0 #C4BDA9, 7px 9px 0 #55534B,
    10px 20px 26px -10px rgba(12, 12, 14, .4);
}

/* ---------- Commutateur de thème ---------- */

.theme-toggle {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: var(--smallcaps); font-weight: 500;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  padding: .55rem .9rem; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .16s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.theme-toggle .dot {
  width: .7rem; height: .7rem; border-radius: 50%;
  background: linear-gradient(90deg, var(--ink) 50%, var(--bg) 50%);
  border: 1px solid var(--ink);
}

/* ---------- Réactif ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-side { position: static; }
  .two-cols { grid-template-columns: 1fr; }
  .theme-list { columns: 1; }
  .hero-figure { height: 11.5rem; max-width: 18rem; margin-left: auto; margin-right: auto; }
}

@media (max-width: 640px) {
  .masthead { justify-content: center; text-align: center; }
  .nav-list { justify-content: center; }
  .nav-list a { padding: .75rem .8rem; }
  .exam-dot { width: 2.75rem; height: 2.75rem; }
  .check { padding: .7rem 1rem; }
  .mode-row { flex-wrap: wrap; row-gap: .4rem; }
  .mode-tag { margin-left: 3.9rem; }
  .mode-arrow { display: none; }
  .mode-title .leaders { display: none; }
  .stat-row { grid-template-columns: 1fr 3.5rem; }
  .stat-row .stat-bar { grid-column: 1 / -1; order: 3; }
  .q-numeral { display: none; }
  .panel h1 { font-size: 1.6rem; margin-bottom: .8rem; }
  .q-text { font-size: 1.2rem; }
  .lede { font-size: 1rem; }
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .marquee-track { transform: none; }
  .hero-figure { animation: none; }
  .btn:hover, .btn:active, .check:hover, .option:hover, .exam-dot:hover { transform: none; }
}

/* ---------- Impression ---------- */

@media print {
  .hatline, .masthead, .marquee, .footer, .btn, .exam-nav { display: none !important; }
  .panel { box-shadow: none; border: 0; }
  body { background: #fff; color: #000; }
  .panel, .panel::before, .panel::after { background: #fff; }
}

/* ---------- Flashcards : carte à retournement 3D (réversible) ---------- */

.fc-scene { perspective: 1600px; margin: 1.4rem 0 .5rem; max-width: 52rem; }
.fc-card {
  position: relative; height: clamp(20rem, 52vh, 26rem);
  transform-style: preserve-3d; cursor: pointer;
  transition: transform .6s cubic-bezier(.35, .9, .3, 1);
}
.fc-card.is-flipped { transform: rotateY(180deg); }
.fc-card:hover { }
/* Survol : plus de relief 3D (le texte devenait flou), seulement une ombre et un contour
   plus marqués, qui gardent le texte parfaitement net. */
.fc-face { transition: box-shadow .25s ease, border-color .25s ease; }
.fc-scene:hover .fc-face {
  border-color: var(--ink-mute);
  box-shadow: 0 1px 0 var(--hairline), 0 30px 54px -22px var(--sheet), 0 12px 22px -12px var(--sheet);
}

.fc-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--hairline-strong);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 38%),
    var(--surface);
  box-shadow:
    0 1px 0 var(--hairline) ,
    0 24px 44px -20px var(--sheet),
    0 8px 16px -10px var(--sheet);
}
/* Feuilles empilées retirées (rendu plus net, sans fond beige). */
.fc-face::before, .fc-face::after { display: none; }

.fc-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: .66rem; font-weight: 500; color: var(--accent-ink);
}
.fc-head-back { color: var(--accent-ink); }
.fc-theme { color: var(--ink-soft); text-align: right; letter-spacing: .1em; }

.fc-body {
  flex: 1; overflow: auto; padding: clamp(1.1rem, 2.6vw, 1.8rem) clamp(1.2rem, 3vw, 2rem);
  scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent;
}
.fc-body p { margin: 0; white-space: pre-line; font-size: 1rem; line-height: 1.75; }
.fc-body-front { display: flex; align-items: center; }
.fc-body-front p {
  font-family: var(--font-display); font-weight: 800; white-space: normal;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.25; letter-spacing: -.01em;
}

.fc-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .7rem 1.2rem;
  border-top: 1px solid var(--hairline);
}
.fc-num { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.fc-hint { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); }

.fc-front { border-top: 3px solid var(--acid); }
.fc-back { transform: rotateY(180deg); border-top: 3px solid var(--accent-ink); }

@media (max-width: 640px) {
  .fc-card { height: clamp(19rem, 62vh, 24rem); }
}

@media (prefers-reduced-motion: reduce) {
  .fc-card, .fc-scene:hover .fc-card, .fc-scene:hover .fc-card.is-flipped { transition: none; }

}


/* ---------- Comptes : pastille, formulaire, bandeau échantillon ---------- */

.masthead-right { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.account-chip { display: inline-flex; align-items: center; gap: .7rem; }
.account-mail { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-soft); }
.account-link {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: var(--smallcaps); font-weight: 500;
  background: transparent; border: 1px solid var(--hairline-strong); border-radius: 999px;
  color: var(--ink-soft); padding: .55rem .9rem; cursor: pointer; text-decoration: none;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .16s ease;
}
.account-link:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.account-link.is-cta { background: var(--acid); border-color: var(--acid); color: #000; font-weight: 700; }
.account-link.is-cta:hover { color: #000; border-color: var(--acid); }

.notice-demo { border-left-color: var(--accent-ink); }
.notice-demo a { color: var(--accent-ink); font-weight: 700; }

.panel-auth { max-width: 34rem; }
.auth-tabs { display: flex; gap: 0; border: 1px solid var(--hairline-strong); width: fit-content; margin: 1.2rem 0; border-radius: 999px; overflow: hidden; }
.auth-tab {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em; font-size: var(--smallcaps);
  background: transparent; border: 0; color: var(--ink-soft); padding: .6rem 1.1rem; cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.auth-tab.is-active { background: var(--ink); color: var(--bg); }
.auth-label { display: block; font-weight: 700; margin: 1rem 0 .35rem; }
.auth-label small { color: var(--ink-soft); font-weight: 400; }
.auth-input {
  width: 100%; padding: .8rem 1rem; border: 1px solid var(--hairline); border-radius: 2px;
  font-family: var(--font-mono); font-size: .95rem; color: var(--ink); background: var(--bg);
  caret-color: var(--acid);
}
.auth-input:focus { outline: 2px solid var(--acid); outline-offset: 2px; }
.auth-error { color: var(--signal-ink); font-size: .9rem; margin: .8rem 0 0; }

/* ============================================================================
   Dissuasion copie : desactive la selection de texte, sauf dans les champs.
   ============================================================================ */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* ============================================================================
   Correctifs mobile (<= 480px) : le grand titre ne deborde plus + taps reactifs.
   (On ne touche PAS au menu ni au sommaire : mise en page d'origine conservee.)
   ============================================================================ */
a, button, .btn, input[type="submit"], label { touch-action: manipulation; }

@media (max-width: 480px) {
  .hero h1 { font-size: clamp(1.9rem, 8.5vw, 3rem); }
  .hero h1,
  .hero h1 .hl-line,
  .hero h1 .hl-outline { overflow-wrap: anywhere; hyphens: auto; }
}
/* Navigation entre questions (entrainement) */
.session-nav{border-top:1px solid var(--hairline);padding-top:1rem;margin-top:1.4rem}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}

/* ============================================================================
   THEME CLAIR — rendu doux inspire de LUMEN
   Fond blanc, titres Gasoek One, cartes arrondies a ombre douce, boutons plats,
   transitions fluides (le relief 3D dur et les plaques empilees sont retires).
   ============================================================================ */
[data-theme="light"] { --press-h: 0px; }

[data-theme="light"] .hero h1,
[data-theme="light"] .result-score {
  font-family: "Gasoek One", var(--font-display);
  font-weight: 400;
  letter-spacing: -.005em;
  line-height: 1.02;
}
/* Gasoek One est très large : on réduit le titre pour qu'il ne déborde pas
   sur les cartes 3D de droite. */
[data-theme="light"] .hero h1 {
  font-size: clamp(1.8rem, 5.2vw, 3.8rem);
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Cartes : plaques empilees retirees, coins arrondis, ombre douce */
[data-theme="light"] .panel {
  border: 1px solid rgba(3, 45, 63, .08);
  border-radius: 1.6rem;
  box-shadow: 0 24px 60px -28px rgba(3, 45, 63, .22);
}
[data-theme="light"] .panel::before,
[data-theme="light"] .panel::after { display: none; }

/* Boutons : plats, ombre douce, transition fluide */
[data-theme="light"] .btn {
  border-radius: 999px;
  box-shadow: 0 10px 24px -12px rgba(3, 45, 63, .28);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, background-color .28s ease, color .28s ease;
}
[data-theme="light"] .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(3, 45, 63, .34); }
[data-theme="light"] .btn:active { transform: translateY(0); box-shadow: 0 8px 18px -12px rgba(3, 45, 63, .3); }
[data-theme="light"] .btn-primary {
  color: #032D3F;
  box-shadow: 0 12px 28px -12px rgba(143, 195, 255, .85);
}
[data-theme="light"] .btn-primary:hover { box-shadow: 0 18px 36px -14px rgba(143, 195, 255, .95); }
[data-theme="light"] .btn-primary:active { box-shadow: 0 8px 18px -12px rgba(143, 195, 255, .8); }

/* Champs et options : arrondis + transitions douces */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] textarea,
[data-theme="light"] .option,
[data-theme="light"] .check {
  border-radius: .9rem;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
[data-theme="light"] .option:hover,
[data-theme="light"] .check:hover { box-shadow: 0 8px 20px -14px rgba(3, 45, 63, .3); }
/* ============================================================================
   GAMIFICATION — tableau de bord, badges, toasts, confettis
   ============================================================================ */
.gamify-dash { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .9rem; margin: 0 0 1.8rem; }
@media (max-width: 760px) { .gamify-dash { grid-template-columns: 1fr 1fr; } .gd-level { grid-column: 1 / -1; } }
.gd-card {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 1.2rem;
  padding: 1rem 1.1rem; box-shadow: var(--panel-shadow);
  display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink);
}
.gd-lvlnum {
  font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: 1;
  background: var(--acid); color: var(--ink-deep);
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.gd-lvlmeta { flex: 1; min-width: 0; }
.gd-grade { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--accent-ink); font-weight: 700; }
.gd-xpbar { height: .5rem; background: var(--hairline); border-radius: 999px; overflow: hidden; margin: .4rem 0 .25rem; }
.gd-xpbar span { display: block; height: 100%; background: var(--acid); border-radius: 999px; transition: width .5s ease; }
.gd-xptext { font-size: .72rem; color: var(--ink-soft); }
.gd-streak, .gd-goal, .gd-badges { flex-direction: column; text-align: center; gap: .15rem; justify-content: center; }
.gd-flame { font-size: 1.4rem; line-height: 1; }
.gd-big { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.gd-sub { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.gd-ring { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.gd-ring span { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 700; font-size: .78rem; color: var(--ink); }
.gd-badges:hover { border-color: var(--acid); }

.badge-grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .7rem; }
.badge { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .9rem .5rem; border: 1px solid var(--hairline); border-radius: 1rem; text-align: center; opacity: .75; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease, background-color .25s ease, border-color .25s ease; }
.badge.is-on { opacity: 1; filter: none; background: var(--acid-dim); border-color: var(--acid); }
.badge-ic { font-size: 1.7rem; line-height: 1; }
.badge-lb { font-size: .7rem; color: var(--ink); }
.badge.is-on .badge-lb { color: var(--ink); }

#gam-toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; }
.gam-toast { background: var(--ink); color: var(--bg); padding: .6rem 1rem; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: 0 12px 30px -12px rgba(0,0,0,.45); opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); text-align: center; max-width: 90vw; }
.gam-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.gam-toast.level { background: var(--acid); color: var(--ink-deep); font-size: 1rem; padding: .8rem 1.3rem; }
.gam-toast.badge { background: var(--surface); color: var(--ink); border: 1px solid var(--acid); }

.gam-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; }
.gam-confetti i { position: absolute; top: -14px; width: 9px; height: 14px; border-radius: 2px; animation: gam-fall 2.4s linear forwards; }
@keyframes gam-fall { to { transform: translateY(106vh) rotate(720deg); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .gam-confetti { display: none; } .gd-xpbar span, .badge { transition: none; } }
/* ============================================================================
   Pages légales
   ============================================================================ */
.legal { max-width: 52rem; }
.legal h2 { font-size: 1.15rem; margin: 1.8rem 0 .5rem; }
.legal p, .legal li { font-size: .96rem; line-height: 1.65; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .3rem 0; }
.legal a { color: var(--accent-ink); text-decoration: underline; }
.legal-maj { color: var(--ink-soft); font-size: .8rem !important; margin-top: -.4rem; }
.legal-warn { background: var(--acid-dim); border: 1px solid var(--acid); border-radius: .8rem; padding: .7rem .9rem; font-size: .86rem !important; }
.legal-todo { background: #ffe08a; color: #5a3d00; padding: .05em .35em; border-radius: .3rem; font-weight: 600; }
[data-theme="dark"] .legal-todo { background: #6b5200; color: #ffe9a8; }
.legal-nav { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.footer-legal { margin-top: .5rem; font-size: .8rem; }
.footer-legal a { color: var(--ink-soft); text-decoration: none; }
.footer-legal a:hover { color: var(--ink); text-decoration: underline; }
/* ============================================================================
   Cartes 3D du héro — accordées à la palette du thème CLAIR (LUMEN)
   Déontologie = canard · Ordonnance = bleu ciel · Commerce = crème
   ============================================================================ */
[data-theme="light"] .b1 { background: linear-gradient(175deg, #0C455C 0%, #032D3F 55%, #021D29 100%); }
[data-theme="light"] .b1 span { color: #FFEFBD; text-shadow: none; }
[data-theme="light"] .b2 { background: linear-gradient(175deg, #C4DEFF 0%, #8FC3FF 55%, #5E9BE0 100%); }
[data-theme="light"] .b2 span { color: #032D3F; text-shadow: none; }
[data-theme="light"] .b3 { background: linear-gradient(175deg, #FFF6D6 0%, #FFEFBD 55%, #E6D28A 100%); }
[data-theme="light"] .b3 span { color: #032D3F; text-shadow: none; }
[data-theme="light"] .book { border-color: rgba(3, 45, 63, .35); }

/* ============================================================================
   Épreuve 3 — Mon mémoire
   ============================================================================ */
.memoir-quota {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.4rem 0; padding: 1rem 1.2rem;
  border: 1px solid var(--hairline-strong); border-radius: 1rem;
  background: var(--acid-dim); max-width: 30rem;
}
.memoir-quota-num {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem;
  line-height: 1; color: var(--ink);
}
.memoir-quota-lab { display: flex; flex-direction: column; gap: .15rem; }
.memoir-quota-lab strong { color: var(--ink); font-size: 1rem; }
.memoir-quota-lab small { color: var(--ink-soft); font-family: var(--font-mono); font-size: .74rem; }

.memoir-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; text-align: center; cursor: pointer;
  margin: 1.2rem 0 .2rem; padding: 2.2rem 1.2rem;
  border: 2px dashed var(--hairline-strong); border-radius: 1rem;
  background: transparent; transition: border-color .18s ease, background .18s ease;
}
.memoir-drop:hover { border-color: var(--acid); background: var(--acid-dim); }
.memoir-drop-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.memoir-drop-sub { color: var(--ink-soft); font-size: .9rem; font-family: var(--font-mono); }

.memoir-soon { margin-top: 1rem; }
.memoir-blocked { margin-top: 1rem; }
.memoir-blocked .btn { margin-top: .9rem; }

.memoir-steps { margin-top: 1.4rem; }
.memoir-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.memoir-list li {
  padding: .9rem 1.1rem; border: 1px solid var(--hairline); border-radius: .8rem;
  font-size: .96rem; color: var(--ink-soft);
}
.memoir-list li strong { color: var(--ink); }

/* Résultats de l'analyse : feuille de route, flashcards, soutenance */
.roadmap { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.road-step { display: flex; gap: 1rem; align-items: flex-start; }
.road-num {
  flex: none; width: 2.1rem; height: 2.1rem; border-radius: 999px;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800;
  background: var(--ink); color: var(--bg);
}
.road-body { flex: 1; }
.road-body h3 { font-size: 1.05rem; margin: .1rem 0 .3rem; }
.road-body p { color: var(--ink-soft); font-size: .95rem; margin: 0 0 .4rem; }
.road-body ul { margin: .2rem 0 0; padding-left: 1.1rem; }
.road-body li { font-size: .92rem; margin: .2rem 0; }

.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-top: 1rem; }
.mcard { border: 1px solid var(--hairline); border-radius: .8rem; overflow: hidden; }
.mcard-r { padding: .7rem .9rem; font-weight: 700; color: var(--ink); background: var(--acid-dim); font-size: .92rem; }
.mcard-v { padding: .7rem .9rem; color: var(--ink-soft); font-size: .9rem; }

.sout-list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.sout-q { padding: .9rem 1.1rem; border: 1px solid var(--hairline); border-radius: .8rem; }
.sout-question { font-weight: 700; color: var(--ink); margin: 0 0 .35rem; }
.sout-piste { color: var(--ink-soft); font-size: .92rem; margin: 0; }

/* Notation estimée du mémoire (grille officielle DEC) */
.notation-note { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 1rem 0 .4rem; }
.notation-num { font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.notation-lab { color: var(--ink-soft); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.nsub { font-size: .95rem; font-weight: 700; color: var(--ink); margin: 1.3rem 0 .5rem; text-transform: uppercase; letter-spacing: .03em; }
.ncrit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.ncrit { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem .85rem; border: 1px solid var(--hairline); border-radius: .7rem; }
.ncrit-txt { display: block; }
.ncrit-txt strong { display: block; color: var(--ink); font-size: .93rem; }
.ncrit-txt small { display: block; color: var(--ink-soft); font-size: .85rem; margin-top: .2rem; line-height: 1.45; }
.nlvl { flex: none; display: inline-block; padding: .18rem .5rem; border-radius: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .03em; white-space: nowrap; }
.nlvl-nS { background: rgba(56,161,105,.16); color: #2f855a; }
.nlvl-nI { background: rgba(221,160,32,.18); color: #b7791f; }
.nlvl-nTI { background: rgba(197,48,48,.16); color: #c53030; }
.nlvl-nNE { background: var(--acid-dim); color: var(--ink-soft); }
:root[data-theme="dark"] .nlvl-nS { color: #68d391; }
:root[data-theme="dark"] .nlvl-nI { color: #f6c358; }
:root[data-theme="dark"] .nlvl-nTI { color: #fc8181; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .nlvl-nS { color: #68d391; } :root:not([data-theme="light"]) .nlvl-nI { color: #f6c358; } :root:not([data-theme="light"]) .nlvl-nTI { color: #fc8181; } }
.nlist { margin: .3rem 0 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.nlist li { color: var(--ink-soft); font-size: .93rem; line-height: 1.5; }

/* ============================================================================
   Épreuve 3 — Feuille de route interactive (timeline zigzag + fiches modales)
   ============================================================================ */
:root{ --mr-acctx:#DCF343; --mr-card:#141418; --mr-card2:#1b1b21; --mr-line:rgba(255,255,255,.13); --mr-glow:rgba(220,243,67,.28); }
:root[data-theme="light"]{ --mr-acctx:#2F6DB0; --mr-card:#FFFFFF; --mr-card2:#F4F9FF; --mr-line:#DCE7EE; --mr-glow:rgba(143,195,255,.45); }
@media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ --mr-acctx:#2F6DB0; --mr-card:#FFFFFF; --mr-card2:#F4F9FF; --mr-line:#DCE7EE; --mr-glow:rgba(143,195,255,.45); } }

.mr-hint{ color:var(--ink-soft); font-size:.9rem; margin:.2rem 0 1.2rem; }
.mr-tl{ position:relative; list-style:none; margin:1rem 0 0; padding:0; }
.mr-tl::before{ content:""; position:absolute; left:50%; transform:translateX(-50%); top:6px; bottom:6px; width:2px; background:linear-gradient(var(--acid),var(--mr-line)); opacity:.5; }
.mr-step{ position:relative; display:grid; grid-template-columns:1fr 52px 1fr; align-items:start; margin-bottom:1.4rem; }
.mr-dot{ grid-column:2; justify-self:center; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--mr-card); border:2px solid var(--mr-line); color:var(--ink-soft); font-family:var(--font-mono); font-weight:700; font-size:1rem; cursor:pointer; padding:0; z-index:2; transition:transform .3s cubic-bezier(.34,1.4,.5,1),border-color .3s,color .3s,box-shadow .3s; }
.mr-step.mr-open .mr-dot, .mr-step:hover .mr-dot{ border-color:var(--acid); color:var(--mr-acctx); box-shadow:0 0 0 4px var(--acid-dim),0 0 18px var(--mr-glow); transform:scale(1.06); }
.mr-cwrap{ perspective:900px; min-width:0; }
.mr-step.mr-left .mr-cwrap{ grid-column:1; }
.mr-step.mr-right .mr-cwrap{ grid-column:3; }
.mr-card{ position:relative; border-radius:15px; background:linear-gradient(180deg,var(--mr-card2),var(--mr-card)); border:1px solid var(--mr-line); overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.22); transition:transform .2s ease,border-color .3s,box-shadow .3s; }
.mr-step.mr-open .mr-card{ border-color:var(--acid); box-shadow:0 0 0 1px var(--acid-dim),0 14px 34px rgba(0,0,0,.3); }
.mr-card::after{ content:""; position:absolute; inset:0; border-radius:15px; pointer-events:none; opacity:0; transition:opacity .3s; background:radial-gradient(150px 150px at var(--mx,50%) var(--my,0%),var(--acid-dim),transparent 60%); }
.mr-step:hover .mr-card::after{ opacity:1; }
.mr-head{ width:100%; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; padding:.95rem 1.05rem .15rem; display:block; }
.mr-tier{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--mr-acctx); margin:0 0 .35rem; }
.mr-headline{ font-size:1.02rem; font-weight:700; color:var(--ink); margin:0; display:flex; gap:.6rem; align-items:flex-start; line-height:1.25; }
.mr-chev{ margin-left:auto; flex:none; width:1.4rem; height:1.4rem; border-radius:6px; border:1px solid var(--mr-line); display:grid; place-items:center; color:var(--mr-acctx); font-family:var(--font-mono); font-size:1rem; line-height:1; transition:transform .35s,background .3s; }
.mr-step.mr-open .mr-chev{ transform:rotate(45deg); background:var(--acid-dim); }
.mr-resume{ color:var(--ink-soft); font-size:.9rem; margin:0; padding:.5rem 1.05rem .95rem; }
.mr-detail{ max-height:0; overflow:hidden; transition:max-height .42s ease; }
.mr-step.mr-open .mr-detail{ max-height:480px; }
.mr-detail-in{ padding:0 1.05rem 1.05rem; margin-top:.15rem; border-top:1px dashed var(--mr-line); }
.mr-plabel{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:.85rem 0 .55rem; }
.mr-points{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.mr-pt{ font-family:inherit; font-size:.82rem; color:var(--ink); background:var(--acid-dim); cursor:pointer; border:1px solid var(--mr-line); border-radius:8px; padding:.34rem .38rem .34rem .62rem; display:inline-flex; align-items:center; gap:.4rem; transition:transform .18s,border-color .2s,background .2s; }
.mr-pt:hover{ transform:translateY(-1px); border-color:var(--acid); }
.mr-pt-ico{ width:1.1rem; height:1.1rem; border-radius:5px; display:grid; place-items:center; font-family:var(--font-mono); font-size:.8rem; color:var(--mr-acctx); border:1px solid var(--mr-line); }
.mr-pt:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

.mr-modal[hidden]{ display:none; }
.mr-modal{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:1.2rem; }
.mr-backdrop{ position:absolute; inset:0; background:rgba(6,6,8,.55); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
:root[data-theme="light"] .mr-backdrop{ background:rgba(20,40,55,.3); }
.mr-modal-card{ position:relative; z-index:1; width:min(42rem,100%); max-height:82vh; overflow:auto; background:linear-gradient(180deg,var(--mr-card2),var(--mr-card)); border:1px solid var(--acid); border-radius:18px; padding:1.5rem 1.6rem 1.7rem; box-shadow:0 0 0 1px var(--acid-dim),0 30px 70px rgba(0,0,0,.5); }
.mr-modal-ctx{ font-family:var(--font-mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mr-acctx); margin:0 0 .5rem; }
.mr-modal-title{ font-size:1.4rem; font-weight:800; margin:0 2rem .9rem 0; line-height:1.15; color:var(--ink); }
.mr-modal-body{ color:var(--ink); font-size:1rem; }
.mr-modal-body p{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; line-height:1.7; margin:0 0 .9rem; }
.mr-modal-body p:last-child{ margin-bottom:0; }
.mr-list{ margin:.15rem 0 .95rem; padding-left:1.4rem; }
.mr-list:last-child{ margin-bottom:0; }
.mr-list li{ margin:.4rem 0; line-height:1.55; text-align:left; color:var(--ink); }
ol.mr-list li::marker{ color:var(--mr-acctx); font-weight:700; }
ul.mr-list{ list-style:none; padding-left:1.15rem; }
ul.mr-list li{ position:relative; padding-left:1rem; }
ul.mr-list li::before{ content:"\25B8"; position:absolute; left:0; top:0; color:var(--mr-acctx); }
.mr-modal-src{ margin:1.15rem 0 0; padding-top:.85rem; border-top:1px dashed var(--mr-line); font-family:var(--font-mono); font-size:.66rem; color:var(--ink-soft); }
.mr-modal-close{ position:absolute; top:.85rem; right:.85rem; width:2.1rem; height:2.1rem; border-radius:9px; cursor:pointer; background:var(--acid-dim); border:1px solid var(--acid); color:var(--mr-acctx); font-size:1.15rem; line-height:1; display:grid; place-items:center; }
.mr-modal-close:hover{ background:var(--acid); color:var(--bg); }
body.mr-locked{ overflow:hidden; }

@media (max-width:720px){
  .mr-tl::before{ left:18px; }
  .mr-step{ grid-template-columns:38px 1fr; column-gap:.7rem; margin-bottom:1rem; }
  .mr-dot{ grid-column:1; width:36px; height:36px; font-size:.85rem; }
  .mr-step.mr-left .mr-cwrap, .mr-step.mr-right .mr-cwrap{ grid-column:2; }
  .mr-modal-title{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){ .mr-card, .mr-dot, .mr-detail, .mr-chev, .mr-pt{ transition:none !important; } }

/* Historique des mémoires déposés */
.memoir-hist-intro{ color:var(--ink-soft); font-size:.96rem; margin:.2rem 0 1rem; }
.memoir-hist{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.memoir-hist-item{ width:100%; text-align:left; cursor:pointer; font:inherit; color:var(--ink); background:var(--acid-dim); border:1px solid var(--hairline); border-radius:.9rem; padding:.9rem 1.1rem; display:flex; flex-direction:column; gap:.3rem; transition:border-color .2s, transform .15s; }
.memoir-hist-item:hover{ border-color:var(--acid); transform:translateY(-1px); }
.memoir-hist-item.is-loading{ opacity:.6; pointer-events:none; }
.memoir-hist-title{ font-weight:700; font-size:1rem; line-height:1.3; }
.memoir-hist-meta{ display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--ink-soft); font-family:var(--font-mono); font-size:.74rem; }
.memoir-hist-go{ color:var(--mr-acctx); font-weight:700; white-space:nowrap; }

/* ============================================================================
   Espace membre — « Mon compte »
   ============================================================================ */
.account-mail{ text-decoration:none; color:var(--ink); border-bottom:1px solid transparent; }
.account-mail:hover{ border-bottom-color:var(--acid); }
.compte-mail{ font-family:var(--font-mono); font-size:.95rem; color:var(--ink-soft); margin:.2rem 0 0; }
.compte-status{ font-weight:700; font-size:1.05rem; margin:.2rem 0 .3rem; }
.compte-ok{ color:var(--ink); }
.compte-ok::first-letter, .compte-ko::first-letter{ font-size:1.2em; }
.compte-ok{ }
.compte-ok.compte-status{ }
.compte-status.compte-ok{ color:#23753a; }
.compte-status.compte-ko{ color:var(--ink-soft); }
.compte-sub{ color:var(--ink-soft); font-size:.95rem; margin:.2rem 0 0; }
.compte-quota{ display:flex; align-items:center; gap:1rem; margin:.4rem 0 .2rem; }
.compte-quota-num{ font-family:var(--font-display); font-weight:800; font-size:2.4rem; line-height:1; color:var(--ink); }
.compte-quota-lab{ display:flex; flex-direction:column; gap:.15rem; }
.compte-quota-lab strong{ color:var(--ink); }
.compte-quota-lab small{ color:var(--ink-soft); font-family:var(--font-mono); font-size:.72rem; }

/* ---------- Rétroplanning ---------- */
.plan-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem 1.2rem; }
.plan-hint{ display:block; margin-top:.35rem; color:var(--ink-soft); font-family:var(--font-mono); font-size:.72rem; }
.plan-days{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.5rem 0 .2rem; }
.plan-day{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border:1px solid var(--hairline-strong); border-radius:.5rem; cursor:pointer; font-family:var(--font-mono); font-size:.8rem; color:var(--ink); }
.plan-day input{ accent-color:var(--acid); }
.plan-list{ list-style:none; padding:0; margin:1.2rem 0 0; border-top:1px solid var(--hairline); }
.plan-item{ display:flex; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--hairline); }
.plan-when{ flex:0 0 8.5rem; font-family:var(--font-mono); font-size:.74rem; color:var(--accent-ink); text-transform:capitalize; }
.plan-what{ display:flex; flex-direction:column; gap:.2rem; }
.plan-what strong{ color:var(--ink); }
.plan-what small{ color:var(--ink-soft); font-size:.82rem; line-height:1.4; }
.plan-help{ margin:1rem 0 .2rem; border:1px solid var(--hairline); border-radius:.5rem; padding:.6rem .9rem; }
.plan-help summary{ cursor:pointer; font-weight:600; color:var(--ink); }
.plan-help ol{ margin:.6rem 0 .2rem; padding-left:1.2rem; color:var(--ink-soft); line-height:1.5; }
.plan-help code{ font-family:var(--font-mono); font-size:.85em; }
.plan-reco{ color:var(--accent-ink); font-family:var(--font-mono); font-size:.74rem; line-height:1.5; margin:.6rem 0 0; }
.plan-tag{ display:inline-block; font-family:var(--font-mono); font-size:.62rem; font-weight:700; padding:.05rem .35rem; margin-right:.15rem; border:1px solid var(--hairline-strong); border-radius:.3rem; color:var(--accent-ink); vertical-align:middle; }
.plan-link{ align-self:flex-start; margin-top:.2rem; font-family:var(--font-mono); font-size:.72rem; color:var(--accent-ink); text-decoration:none; border-bottom:1px solid var(--hairline-strong); }
.plan-link:hover{ border-bottom-color:var(--accent-ink); }

/* ---------- Leitner (flashcards) ---------- */
.leitner-boxes{ display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1.2rem; }
.box-chip{ display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .75rem; border-radius:999px; border:1px solid var(--hairline-strong); font-family:var(--font-mono); font-size:.72rem; color:var(--ink); }
.box-chip strong{ font-size:.9rem; font-weight:800; }
button.box-chip{ background:transparent; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
button.box-chip:hover{ border-color:var(--acid); background:var(--acid-dim); }
button.box-chip:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.fc-box-hint{ font-size:.8rem; color:var(--ink-soft); margin:-.7rem 0 1.1rem; }
.box-new{ color:var(--ink-soft); }
.box-b1{ border-color:var(--box-learn); color:#46606B; }
.box-b2{ border-color:var(--box-fragile); color:var(--box-fragile); }
.box-b3{ border-color:var(--box-acquis); color:var(--box-acquis); background:var(--box-acquis-dim); }
.fc-side{ position:absolute; top:.7rem; right:.7rem; z-index:2; font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; padding:.25rem .55rem; border-radius:.4rem; border:1px solid var(--hairline-strong); background:var(--surface); }
.fc-side-ec{ color:var(--accent-ink); border-color:var(--acid); }
.fc-side-cac{ color:var(--signal-ink); border-color:var(--signal); }
.fc-side-com{ color:var(--ink-soft); }
.fc-answer{ margin-top:1.1rem; }
.fc-answer textarea{ width:100%; resize:vertical; min-height:2.8rem; margin-top:.3rem; }
.fc-verdict{ margin:.9rem 0 0; padding:.6rem .9rem; border-radius:.5rem; font-size:.9rem; line-height:1.45; border:1px solid var(--hairline-strong); }
.fc-verdict-ok{ border-color:var(--acid); background:var(--acid-dim); }
.fc-verdict-ko{ border-color:var(--signal); background:var(--signal-dim); }
.fc-verdict-neutral{ border-color:var(--hairline-strong); color:var(--ink-soft); }
@media (max-width:560px){ .plan-item{ flex-direction:column; gap:.25rem; } .plan-when{ flex-basis:auto; } }

/* ===== FICHES DE RÉVISION — charte scoping .fiche-doc (auto-généré) ===== */
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-3deg)}}
.fiche-doc{--bg:#F4F8FB; --card:#FFFFFF;
    --ink:#032D3F; --ink-soft:#3E5C67; --ink-dim:#526C78;
    --accent:#0F5E7D; --sky:#8FC3FF; --sky-mid:#5E9BE0; --sky-dim:rgba(143,195,255,.20);
    --line:#DCE6EC; --board:#EAF3FB; --board-b:#D3E6F5; --board2:#F3F8FC; --board2-b:#E1EDF5; --ghost:#E8F0F6;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --disp:"Archivo",var(--sans); --serif:"Instrument Serif",Georgia,serif;}
.fiche-doc *{box-sizing:border-box}
.fiche-doc{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.6;padding:1.6rem;-webkit-font-smoothing:antialiased}
.fiche-doc .fiche{max-width:820px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:28px;
         box-shadow:0 2px 6px rgba(3,45,63,.04), 0 30px 80px -34px rgba(15,94,125,.26);padding:1.8rem 2rem 2.2rem}
.fiche-doc .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.fiche-doc .head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.fiche-doc .badge-col{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
@media (max-width:560px){.fiche-doc .head{flex-wrap:wrap}.fiche-doc .badge-col{order:-1;width:100%;flex-direction:row;align-items:center;justify-content:space-between}}
.fiche-doc .icon-tile{width:46px;height:46px;border-radius:14px;background:var(--board);border:1px solid var(--board-b);display:grid;place-items:center;font-size:24px;flex:none;animation:bob 5s ease-in-out infinite}
.fiche-doc h1.title{font-family:var(--disp);font-weight:800;font-size:clamp(24px,3.2vw,34px);letter-spacing:-.025em;line-height:1.05;margin:.5rem 0 0;color:var(--ink)}
.fiche-doc h1.title em{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--accent)}
.fiche-doc .badge{flex:none;flex-direction:row;white-space:nowrap;opacity:1;filter:none;text-align:left;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:.4rem .8rem;border-radius:999px;background:var(--sky-dim);color:var(--accent);border:1px solid var(--sky)}
.fiche-doc .badge .dot{flex:none;width:8px;height:8px;border-radius:999px;background:var(--accent)}
.fiche-doc .intro{font-size:1rem;color:var(--ink-soft);margin:1.1rem 0 .3rem;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.fiche-doc .intro b{color:var(--ink)}
.fiche-doc .k{color:var(--ink);font-weight:700;border-bottom:2px solid var(--sky)}
.fiche-doc .part{position:relative;margin-top:2.2rem;padding-top:.6rem}
.fiche-doc .part .ghost{position:absolute;right:-.3rem;top:-2.4rem;font-family:var(--disp);font-weight:800;font-size:110px;line-height:1;color:var(--ghost);user-select:none;pointer-events:none}
.fiche-doc .part .ph{position:relative;display:flex;align-items:center;gap:.7rem;border-top:2px solid var(--line);padding-top:1rem}
.fiche-doc .part .ph .rn{font-family:var(--disp);font-weight:800;color:var(--accent);font-size:1rem}
.fiche-doc .part .ph h2{font-family:var(--disp);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;margin:0;color:var(--ink)}
.fiche-doc .sub{display:inline-flex;align-items:center;gap:.5rem;margin:1.2rem 0 .5rem;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
.fiche-doc .sub .l{width:22px;height:22px;border-radius:7px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-size:12px;font-weight:800}
.fiche-doc .sub .note{color:var(--ink-dim);text-transform:none;letter-spacing:0;font-weight:500;font-family:var(--serif);font-style:italic;font-size:14px}
.fiche-doc p.txt{margin:.3rem 0;color:var(--ink-soft);font-size:.95rem;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.fiche-doc ul.pts{list-style:none;padding:0;margin:.2rem 0;display:grid;gap:.4rem}
.fiche-doc ul.pts li{padding-left:1.3rem;position:relative;font-size:.94rem;color:var(--ink-soft);text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.fiche-doc ul.pts li::before{content:"";position:absolute;left:.15rem;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}
.fiche-doc ul.pts li b{color:var(--ink)}
.fiche-doc .board-w{border-radius:20px;padding:1.1rem;margin:.6rem 0;border:1px solid var(--board-b);background:var(--board)}
.fiche-doc .board-w.soft{background:var(--board2);border-color:var(--board2-b)}
.fiche-doc .callout{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:.6rem .9rem;font-size:.9rem;color:var(--ink-soft);margin:.6rem 0}
.fiche-doc .callout b{color:var(--ink)}
.fiche-doc .refs{font-size:.83rem;color:var(--ink-dim);background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:.8rem 1rem;margin-top:1.8rem}
.fiche-doc .refs b{color:var(--ink-soft)}
.fiche-doc .ladder{display:grid;gap:.4rem;margin:.5rem 0}
.fiche-doc .rung{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--board-b);border-radius:14px;padding:.55rem .8rem}
.fiche-doc .rung .n{width:26px;height:26px;flex:none;border-radius:8px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:.85rem}
.fiche-doc .rung .lab{font-size:.9rem}
.fiche-doc .rung .lab b{color:var(--ink)}
.fiche-doc .rung .lab span{color:var(--ink-dim);font-size:.82rem}
.fiche-doc .rung:nth-child(1){background:var(--board)}
.fiche-doc .titres{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.fiche-doc .tcard{background:#fff;border:1px solid var(--board-b);border-radius:12px;padding:.6rem .75rem}
.fiche-doc .tcard .th{font-family:var(--disp);font-weight:800;font-size:.8rem;color:var(--accent);letter-spacing:.02em}
.fiche-doc .tcard .tt{font-weight:700;font-size:.88rem;color:var(--ink);margin:.1rem 0 .2rem}
.fiche-doc .tcard .ta{font-size:.78rem;color:var(--ink-dim);line-height:1.45}
.fiche-doc .tl{display:grid;gap:.35rem;margin:.4rem 0}
.fiche-doc .tl .ev{display:flex;gap:.6rem;align-items:baseline;font-size:.9rem}
.fiche-doc .tl .d{flex:none;font-family:var(--disp);font-weight:800;color:var(--accent);font-size:.82rem;min-width:118px}
.fiche-doc .tl .t{color:var(--ink-soft)}
.fiche-doc .tl .t b{color:var(--ink)}
.fiche-doc .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.4rem 0;border-radius:12px}
.fiche-doc .tbl table.tb{margin:0}
.fiche-doc table.tb{width:100%;border-collapse:separate;border-spacing:0;margin:.4rem 0;font-size:.86rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:420px}
.fiche-doc table.tb th, .fiche-doc table.tb td{padding:.4rem .6rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.fiche-doc table.tb tr:last-child td{border-bottom:0}
.fiche-doc table.tb th{background:var(--board);color:var(--ink);font-weight:700;font-family:var(--disp)}
.fiche-doc table.tb td:first-child{font-family:var(--disp);font-weight:800;color:var(--accent);min-width:8.5em}
.fiche-doc .np td:first-child{color:var(--accent)}
.fiche-doc .two-norms{display:flex;gap:.7rem;flex-wrap:wrap}
.fiche-doc .norm{flex:1 1 140px;min-width:0;background:#fff;border:1.5px solid var(--sky);border-radius:14px;padding:.7rem}
.fiche-doc .norm .nm{font-family:var(--disp);font-weight:800;color:var(--accent);font-size:1rem}
.fiche-doc .norm .nd{font-size:.82rem;color:var(--ink-soft);margin-top:.15rem}

/* ===== Fiches — lecture optimisée sur mobile ===== */
@media (max-width:560px){
  .fiche-doc{padding:0}
  .fiche-doc .fiche{padding:1.05rem 1rem 1.35rem;border-radius:18px}
  .fiche-doc h1.title{font-size:20px;line-height:1.12}
  .fiche-doc .part{margin-top:1.8rem}
  .fiche-doc .part .ph h2{font-size:1.05rem}
  .fiche-doc .part .ghost{font-size:72px;top:-1.7rem}
  /* les notes en italique passent sous le sous-titre au lieu de se serrer à côté */
  .fiche-doc .sub{flex-wrap:wrap}
  /* texte justifié conservé sur mobile (comme demandé) ; hyphens:auto limite les trous */
  /* timeline : la date passe au-dessus du texte pour rester dans l'encadré */
  .fiche-doc .tl .ev{flex-direction:column;gap:.05rem}
  .fiche-doc .tl .d{min-width:0}
}
/* ===== fin charte fiches ===== */

/* ===== Fiches — index (cartes, thème natif de l'app dark/light) ===== */
.fk-group{margin-top:1.6rem}
.fk-group-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .8rem;flex-wrap:wrap}
.fk-group-head .fk-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--hairline-strong);border-radius:999px;padding:.25rem .6rem}
.fk-group-head h2{font-family:var(--font-display);font-size:1.1rem;margin:0;color:var(--ink)}
.fk-group-head .fk-count{color:var(--ink-soft);font-size:.85rem;font-family:var(--font-mono)}
.fk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.fk-card{display:flex;align-items:flex-start;gap:.8rem;text-align:left;background:var(--surface);border:1px solid var(--hairline);border-radius:16px;padding:1rem 1.1rem;cursor:pointer;transition:border-color .15s,transform .15s;font:inherit;color:inherit;width:100%}
.fk-card:hover{border-color:var(--hairline-strong);transform:translateY(-2px)}
.fk-card:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.fk-ico{width:42px;height:42px;flex:none;border-radius:12px;background:var(--acid-dim);display:grid;place-items:center;font-size:22px}
.fk-body{min-width:0;flex:1}
.fk-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fk-num{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent-ink);text-transform:uppercase}
.fk-stars{flex:none;font-size:.78rem;letter-spacing:.5px;line-height:1}
.fk-title{display:block;font-family:var(--font-display);font-weight:700;font-size:.98rem;color:var(--ink);margin:.3rem 0 0;line-height:1.25}

/* ---- Fiches : classement en boîtes (à apprendre / fragile / acquis), même logique que les flashcards ---- */
.fk-boxes{margin:.2rem 0 1.3rem}
.box-chip.is-active{font-weight:800;box-shadow:inset 0 0 0 2px currentColor}
.fk-cardbox-1{border-left:3px solid var(--box-learn)}
.fk-cardbox-2{border-left:3px solid var(--box-fragile)}
.fk-cardbox-3{border-left:3px solid var(--box-acquis)}
.fk-box{align-self:flex-start;margin-top:.5rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.12rem .5rem;border-radius:999px;border:1px solid var(--hairline-strong);color:var(--ink-soft)}
.fk-box-1{color:#46606B;border-color:var(--box-learn)}
.fk-box-2{color:var(--box-fragile);border-color:var(--box-fragile)}
.fk-box-3{color:var(--box-acquis);border-color:var(--box-acquis);background:var(--box-acquis-dim)}
.fic-status{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:1.5rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hairline)}
.fic-status-lab{font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft)}
.fic-status-btns{display:flex;flex-wrap:wrap;gap:.4rem}
.fic-sbtn{font-size:.8rem;padding:.4rem .85rem}

/* ===== Podcast audio de la fiche : barre de lecture ===== */
.fic-audio-group{display:flex;flex-direction:column;gap:.7rem;margin:0 0 1.4rem}
.fic-audio-group .fic-audio{margin:0}
.fic-audio{display:flex;align-items:center;gap:.9rem;margin:0 0 1.4rem;padding:.9rem 1rem;
  background:var(--surface);border:1px solid var(--hairline);border-radius:16px}
.fic-audio.is-ready{border-color:var(--hairline-strong)}
.fic-audio.is-pending{opacity:.7}
.fa-left{flex:none}
.fa-play{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:999px;
  border:2px solid var(--accent-ink);background:transparent;color:var(--accent-ink);cursor:pointer;
  padding:0;transition:background .15s,color .15s,transform .12s}
.fa-play svg{width:20px;height:20px;fill:currentColor;display:block;margin-left:1px}
.fic-audio.is-playing .fa-play svg{margin-left:0}
.fa-play:not(:disabled):hover{background:var(--accent-ink);color:var(--bg);transform:scale(1.04)}
.fa-play:disabled{opacity:.4;cursor:default}
.fic-audio.is-playing .fa-play{background:var(--accent-ink);color:var(--bg)}
.fa-body{flex:1;min-width:0}
.fa-top{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin:0 0 .5rem}
.fa-kick{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;color:var(--accent-ink)}
.fa-hint{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fa-scrub{margin:0 0 .35rem}
.fa-seek{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:999px;
  background:var(--hairline-strong);outline:none;cursor:pointer;margin:0}
.fa-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:999px;
  background:var(--accent-ink);border:0;cursor:pointer;box-shadow:0 0 0 3px var(--acid-dim)}
.fa-seek::-moz-range-thumb{width:15px;height:15px;border-radius:999px;background:var(--accent-ink);border:0;cursor:pointer}
.fa-seek:disabled{opacity:.5;cursor:default}
.fa-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.fa-time{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);flex:none}
.fa-ctrls{display:flex;align-items:center;gap:.35rem}
.fa-mini{font:inherit;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.02em;color:var(--ink-soft);
  background:transparent;border:1px solid var(--hairline);border-radius:999px;padding:.2rem .55rem;cursor:pointer;
  transition:border-color .15s,color .15s}
.fa-mini:not(:disabled):hover{border-color:var(--hairline-strong);color:var(--ink)}
.fa-mini:disabled{opacity:.4;cursor:default}
.fa-rate{min-width:2.6rem;text-align:center}
@media(max-width:560px){
  .fic-audio{flex-wrap:wrap;gap:.7rem}
  .fa-ctrls{gap:.3rem}
  .fa-mini{padding:.2rem .45rem}
}

/* ---- Annales : ce qui tombe ---- */
.an-group{margin-top:1.7rem}
.an-group-head{display:flex;align-items:center;gap:.6rem;margin:0 0 .9rem;flex-wrap:wrap}
.an-group-head h2{font-family:var(--font-display);font-size:1.1rem;margin:0;color:var(--ink)}
.an-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.8rem;color:var(--ink-soft);font-family:var(--font-mono);margin:.6rem 0 0}
.an-legend .an-stars{margin-right:.25rem}
.an-stars{letter-spacing:.5px}
.an-card{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:.9rem 1rem;margin:0 0 .7rem}
.an-card-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.an-card-head h3{font-family:var(--font-display);font-size:1rem;margin:0;color:var(--ink);line-height:1.3}
.an-fiches{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0 .1rem}
.an-fiche{font:inherit;font-size:.74rem;font-family:var(--font-mono);letter-spacing:.03em;color:var(--accent-ink);background:var(--acid-dim);border:1px solid var(--hairline);border-radius:999px;padding:.22rem .6rem;cursor:pointer;transition:border-color .15s}
.an-fiche:hover{border-color:var(--accent-ink)}
.an-q{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.4rem}
.an-q li{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.an-sess{display:inline-block;font-family:var(--font-mono);font-size:.7rem;color:var(--accent-ink);background:var(--acid-dim);border-radius:6px;padding:.08rem .4rem;margin-right:.45rem;white-space:nowrap}
/* ===== Bloc "Déjà tombé" en bas de fiche ===== */
.fic-annales{margin:1.6rem 0 0;padding:1.3rem;background:var(--surface);border:1px solid var(--hairline);border-radius:16px}
.fic-annales-top{margin:0 0 1rem}
.fic-annales-top h2{font-family:var(--font-display);font-size:1.35rem;margin:.5rem 0 .2rem;color:var(--ink);line-height:1.2}
.fic-annales-top p{margin:0;font-size:.9rem;color:var(--ink-soft)}
.fic-an-card{padding:.85rem 0;border-top:1px dashed var(--hairline)}
.fic-an-card:first-of-type{border-top:0}
.fic-an-head{display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap;margin-bottom:.5rem}
.fic-an-head .an-stars{font-size:.95rem}
.fic-an-head h3{font-family:var(--font-display);font-size:1.02rem;margin:0;color:var(--ink);line-height:1.3}
.fic-an-q{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.fic-an-q li{display:flex;align-items:baseline;gap:.15rem;font-size:.92rem;color:var(--ink-soft);line-height:1.45}
.fic-an-t{flex:1;min-width:0}
.fic-an-t strong{color:var(--ink);font-weight:600}
.fic-an-rep{margin-top:.45rem}
.fic-an-rep>summary{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font-size:.78rem;font-weight:600;color:var(--accent-ink);padding:.18rem .7rem;border:1px solid var(--hairline);border-radius:999px;background:var(--surface);user-select:none}
.fic-an-rep>summary::-webkit-details-marker{display:none}
.fic-an-rep>summary::before{content:"";width:.38rem;height:.38rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .18s ease}
.fic-an-rep[open]>summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.fic-an-rep>summary:hover{border-color:var(--accent-ink)}
.fic-an-rep-body{margin-top:.5rem;padding:.7rem .9rem;background:var(--surface-alt);border-left:3px solid var(--accent-ink);border-radius:0 10px 10px 0;color:var(--ink);text-align:justify}
.fic-an-rep-body ul{margin:.35rem 0 0;padding-left:1.1rem}
.fic-an-rep-body li{display:list-item;margin:.15rem 0}
.an-q .fic-an-rep{margin:.35rem 0 .2rem}
.an-rep-q{margin:0 0 .5rem;color:var(--ink-soft)}
.an-rep-q b{color:var(--ink)}
.an-rep-lock{margin:0;color:var(--ink-soft)}
.an-rep-lock a{color:var(--accent-ink);font-weight:600}
@media (max-width:600px){
  .fic-an-q > li{flex-wrap:wrap;row-gap:.3rem}
  .fic-an-q > li > .fic-an-t{flex-basis:100%}
  .fic-an-rep-body{padding:.65rem .75rem;hyphens:auto;-webkit-hyphens:auto}
}
.fk-back{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px solid var(--hairline);border-radius:999px;padding:.4rem .9rem;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer;margin-bottom:1rem}
.fk-back:hover{border-color:var(--hairline-strong)}

/* ===== FICHES — composants schémas & chiffres-clés (fiche 1 et +) — tokens .fiche-doc ===== */
.fiche-doc .num{font-family:var(--disp);font-weight:800;letter-spacing:-.035em;line-height:.9;white-space:nowrap}
.fiche-doc .tbl table{margin:0}
/* Schéma hiérarchique vertical */
.fiche-doc .flow{display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center}
.fiche-doc .pill-node{max-width:100%;background:#fff;border:1.5px solid var(--accent);color:var(--ink);font-weight:700;border-radius:999px;padding:.45rem 1.1rem;font-size:.9rem}
.fiche-doc .pill-node.tut{border-color:var(--line);color:var(--ink-dim);font-weight:600;font-size:.82rem}
.fiche-doc .ar{width:2px;height:16px;background:var(--sky-mid);border-radius:2px;font-size:0;color:transparent}
.fiche-doc .two{display:flex;gap:.7rem;width:100%}
.fiche-doc .two .lf{flex:1;min-width:0;background:#fff;border:1.5px solid var(--sky);border-radius:14px;padding:.6rem .7rem;text-align:center}
.fiche-doc .lf .lab{font-weight:800;font-size:.82rem;color:var(--accent)}
.fiche-doc .lf .sub2{font-size:.74rem;color:var(--ink-dim);margin-top:.15rem}
/* Rangée de chiffres-clés (KPI) */
.fiche-doc .stats{display:flex;gap:1rem;justify-content:space-around;align-items:flex-start;flex-wrap:wrap;text-align:center}
.fiche-doc .stats>div{flex:1 1 80px}
.fiche-doc .stats>.op{flex:0 0 auto}
.fiche-doc .stats .num{display:block;font-size:clamp(1.35rem,6.5vw,2rem);color:var(--ink)}
.fiche-doc .stats .cap{display:block;font-size:.76rem;color:var(--ink-dim);margin-top:.25rem;line-height:1.3}
/* Schéma CNOEC : total = élus + membres de droit */
.fiche-doc .cnoec-top{display:flex;align-items:baseline;justify-content:center;gap:.5rem;margin-bottom:.7rem}
.fiche-doc .cnoec-top .num{font-size:2.4rem;color:var(--accent)}
.fiche-doc .csplit{display:flex;gap:.7rem;align-items:stretch}
.fiche-doc .cbox{flex:1;min-width:0;background:#fff;border-radius:16px;padding:.7rem;text-align:center;border:1.5px solid var(--line)}
.fiche-doc .cbox.a{border-color:var(--accent)}
.fiche-doc .cbox.b{border-color:var(--sky-mid)}
.fiche-doc .cbox .num{display:block;font-size:1.7rem}
.fiche-doc .cbox.a .num{color:var(--accent)}
.fiche-doc .cbox.b .num{color:#3B7BC0}
.fiche-doc .cbox .t{font-weight:700;font-size:.83rem;margin:.2rem 0 .05rem;color:var(--ink)}
.fiche-doc .cbox .d{font-size:.73rem;color:var(--ink-dim)}
.fiche-doc .op{align-self:center;flex:none;font-family:var(--disp);font-size:1.4rem;font-weight:800;color:var(--ink-dim)}
.fiche-doc .foot{margin-top:.6rem;font-size:.8rem;color:var(--ink-soft);text-align:center}
/* Mini-encart année */
.fiche-doc .mini{display:flex;gap:.9rem;align-items:center}
.fiche-doc .mini .yr{font-family:var(--disp);font-weight:800;font-size:2rem;color:var(--accent);line-height:1;flex:none}
.fiche-doc .mini .m{font-size:.9rem;color:var(--ink-soft)}
.fiche-doc .mini .m b{color:var(--ink)}
/* Liste numérotée des missions */
.fiche-doc ol.miss{margin:.2rem 0;padding-left:1.4rem;display:grid;gap:.3rem;font-size:.95rem;color:var(--ink-soft)}
.fiche-doc ol.miss li::marker{color:var(--accent);font-weight:800;font-family:var(--disp)}
.fiche-doc ol.miss li b{color:var(--ink)}
/* Table barème (2 colonnes) */
.fiche-doc table.bar{width:100%;border-collapse:separate;border-spacing:0;margin:0;font-size:.87rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fiche-doc table.bar th,.fiche-doc table.bar td{padding:.4rem .6rem;text-align:center;border-bottom:1px solid var(--line)}
.fiche-doc table.bar tr:last-child td{border-bottom:0}
.fiche-doc table.bar th{background:var(--board);color:var(--ink);font-weight:700;font-family:var(--disp)}
.fiche-doc table.bar td:last-child{font-family:var(--disp);font-weight:800;color:var(--accent)}

/* ===== FICHES — schéma « cadre de référence » (fiche 2) — scopé .fiche-doc ===== */
.fiche-doc .cadre{border:1px solid var(--board-b);background:var(--board2);border-radius:18px;padding:1rem;margin:.6rem 0}
.fiche-doc .cadre-cap{font-family:var(--disp);font-weight:800;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);text-align:center;margin-bottom:.7rem}
/* Socle commun EN HAUT (applicable à toutes les missions) */
.fiche-doc .socle{background:var(--accent);color:#fff;border-radius:14px;padding:.7rem .85rem;text-align:center}
.fiche-doc .socle-h{font-family:var(--disp);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.fiche-doc .socle-row{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;margin-top:.45rem}
.fiche-doc .socle-item{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.28rem .7rem;font-size:.78rem;font-weight:600}
.fiche-doc .cadre-link{width:2px;height:18px;background:var(--sky-mid);margin:.5rem auto;border-radius:2px}
.fiche-doc .cadre-mtitle{text-align:center;font-family:var(--disp);font-weight:800;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.6rem}
.fiche-doc .cadre-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.fiche-doc .mcol{background:#fff;border:1.5px solid var(--sky);border-radius:14px;padding:.6rem;display:flex;flex-direction:column}
.fiche-doc .mcol-h{font-family:var(--disp);font-weight:800;font-size:.8rem;color:var(--accent);text-align:center;line-height:1.2;margin-bottom:.4rem}
.fiche-doc .mcol-def{font-size:.76rem;color:var(--ink-soft);line-height:1.4;margin:0 0 .55rem;text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.fiche-doc .mcol-def b{color:var(--ink)}
.fiche-doc .mcol ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.fiche-doc .mcol li{font-size:.8rem;color:var(--ink-soft);background:var(--board);border-radius:8px;padding:.28rem .45rem}
.fiche-doc .mcol li b{font-family:var(--disp);color:var(--accent);font-weight:800}
.fiche-doc .cadre-base{margin-top:.7rem;text-align:center;font-size:.78rem;color:var(--ink-soft);background:var(--board);border:1px dashed var(--board-b);border-radius:10px;padding:.5rem .6rem}
.fiche-doc .cadre-base b{color:var(--ink)}
@media(max-width:560px){.fiche-doc .cadre-cols{grid-template-columns:1fr}}
/* Schéma général du cadre de référence (Ordre des experts-comptables, 2025) : même disposition
   que le schéma officiel, en cases et traits (texte réel, lisible par les lecteurs d'écran). */
.fiche-doc .sch{margin:0 0 1rem;padding:0}
.fiche-doc .sch-cap{font-family:var(--disp);font-weight:800;font-size:.95rem;color:var(--ink);text-align:center;margin:0 0 .7rem}
.fiche-doc .sch-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.3rem}
.fiche-doc .sch-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.fiche-doc .sch-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr)) 1.9rem;grid-template-rows:auto 12px auto 12px auto 12px auto 12px auto 30px auto 10px auto;min-width:700px;color:#0B3A52}
.fiche-doc .sch-bar,.fiche-doc .sch-cat,.fiche-doc .sch-leaf{margin:0 2px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;-webkit-hyphens:none;hyphens:none}
.fiche-doc .sch-bar{background:#2B76A0;color:#fff;font-size:.64rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:.55rem .8rem;min-height:2.2rem}
.fiche-doc .sch-act{flex-direction:column;font-size:.58rem;letter-spacing:0;padding:.5rem .1rem}
.fiche-doc .sch-cat{background:#A9C6D9;font-size:.76rem;font-weight:600;padding:.6rem .5rem;min-height:3.4rem}
.fiche-doc .sch-leaf{background:#A9C6D9;font-size:.58rem;font-weight:600;padding:.55rem .1rem;min-height:6.4rem;-webkit-hyphens:auto;hyphens:auto}
.fiche-doc .sch-pe{min-height:0;padding:.35rem .25rem}
.fiche-doc .sch-leaf{flex-direction:column;gap:.3rem}
.fiche-doc .sch-np{display:block;font-weight:800;color:#0F4C6E;font-size:.58rem}
.fiche-doc .sch-pe{gap:.1rem}
.fiche-doc .sch-glo{background:#A9C6D9;margin-left:6px;display:flex;align-items:center;justify-content:center}
.fiche-doc .sch-glo span{writing-mode:vertical-rl;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fiche-doc .sch-ln{display:block;width:100%;height:100%;overflow:visible}
.fiche-doc .sch-ln path{fill:none;stroke:#2B76A0;stroke-width:2;vector-effect:non-scaling-stroke}
.fiche-doc .sch-src{margin:.5rem 0 0;font-size:.74rem;color:var(--ink-soft);text-align:center}
.fiche-doc .sch-hint{display:none}
@media(max-width:820px){.fiche-doc .sch-hint{display:inline}}

/* ===== Fiches — barre de navigation du lecteur + bouton remonter ===== */
.fk-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.fk-nav .fk-back{margin-bottom:0}
.fk-arrows{display:flex;gap:.4rem}
.fk-navbtn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:1px solid var(--hairline);border-radius:999px;padding:.4rem .9rem;color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer;transition:border-color .15s}
.fk-navbtn:hover{border-color:var(--hairline-strong)}
.fk-navbtn:disabled{opacity:.4;cursor:default}
.fk-nav-bottom{margin:1.6rem 0 0;border-top:1px solid var(--hairline);padding-top:1rem;align-items:stretch}
.fk-navbtn-wide{flex:1 1 0;min-width:0;max-width:48%;text-align:center;justify-content:center;white-space:normal;line-height:1.3}
#scrolltop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;border:1px solid var(--hairline-strong);background:var(--surface);color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;box-shadow:var(--panel-shadow);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:60}
#scrolltop.is-visible{opacity:1;transform:none;pointer-events:auto}
#scrolltop:hover{border-color:var(--acid);color:var(--accent-ink)}