/* Generated by scripts/build_css_bundle.py. Do not edit directly. */
@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic:ital,wght@0,400;0,700;1,400&display=swap') layer(dyslexia-font);

/* >>> css/bundles/common.css */
/* Shared app shell and design system */

/* Tokens */
/* >>> css/tokens/variables.css */
/* ── Tokens — Variables de base (palette par défaut : Saphir) ──────────────── */
:root {
  --bg: #000080;
  --bg-top: #1d3768;
  --panel: #0d3b66;
  --panel-soft: #124f74;
  --text: #f4f8ff;
  --muted: #c8d7e6;
  --primary: #005f5d;
  --accent: #dd9933;
  --danger: #800020;
  --gold: #ffd700;
  --line: rgba(64, 224, 208, 0.35);
  --surface-panel: rgba(13, 59, 102, 0.9);
  --surface-subpanel: rgba(0, 0, 128, 0.2);
  --header-start: rgba(13, 59, 102, 0.98);
  --header-end: rgba(0, 95, 93, 0.85);
  --table-head: rgba(0, 95, 93, 0.55);
  --table-row-even: rgba(0, 95, 93, 0.12);
  --table-row-hover: rgba(221, 153, 51, 0.16);
  --focus-ring: rgba(221, 153, 51, 0.7);
  --tone-1: #800020;
  --tone-2: #dd9933;
  --tone-3: #ffc300;
  --tone-4: #ffd700;
  --tone-5: #40e0d0;
  --metric-success: #6ee7b7;
  --metric-warning: #fde68a;
  --metric-risk: #fca5a5;
  --metric-critical: #fb7185;
  --metric-confidence: #93c5fd;
  --metric-coverage: #67e8f9;

  /* E2.10 — Semantic token palette */
  --semantic-progression-low: var(--metric-risk);
  --semantic-progression-mid: var(--metric-warning);
  --semantic-progression-high: var(--metric-success);

  --semantic-risk-low: var(--metric-success);
  --semantic-risk-medium: var(--metric-warning);
  --semantic-risk-high: var(--metric-risk);
  --semantic-risk-critical: var(--metric-critical);

  --semantic-priority-critical: #c0392b;
  --semantic-priority-high: var(--metric-risk);
  --semantic-priority-medium: var(--metric-warning);
  --semantic-priority-low: var(--metric-confidence);

  --semantic-confidence-low: #888;
  --semantic-confidence-medium: var(--metric-warning);
  --semantic-confidence-high: var(--metric-success);
  --semantic-confidence-verified: var(--metric-confidence);
}

/* <<< css/tokens/variables.css */

/* >>> css/tokens/breakpoints.css */
:root {
  --bp-sm: 480px;
  --bp-md: 720px;
  --bp-lg: 920px;
  --bp-xl: 1200px;
  --bp-2xl: 1440px;
}

/* <<< css/tokens/breakpoints.css */

/* >>> css/tokens/semantic.css */
/* ── Tokens — Classes sémantiques utilitaires (E2.10) ─────────────────────── */
.sem-progression-low  { color: var(--semantic-progression-low); }
.sem-progression-mid  { color: var(--semantic-progression-mid); }
.sem-progression-high { color: var(--semantic-progression-high); }
.sem-risk-low      { color: var(--semantic-risk-low); }
.sem-risk-medium   { color: var(--semantic-risk-medium); }
.sem-risk-high     { color: var(--semantic-risk-high); }
.sem-risk-critical { color: var(--semantic-risk-critical); font-weight: 600; }
.sem-priority-critical { color: var(--semantic-priority-critical); font-weight: 700; }
.sem-priority-high   { color: var(--semantic-priority-high); }
.sem-priority-medium { color: var(--semantic-priority-medium); }
.sem-priority-low    { color: var(--semantic-priority-low); }
.sem-confidence-low      { color: var(--semantic-confidence-low); font-style: italic; }
.sem-confidence-medium   { color: var(--semantic-confidence-medium); }
.sem-confidence-high     { color: var(--semantic-confidence-high); }
.sem-confidence-verified { color: var(--semantic-confidence-verified); }

/* <<< css/tokens/semantic.css */


/* Palettes */
/* >>> css/palettes/palette-sapphire.css */

/* Saphir -- teintes bleues profondes + or (identique au theme classic) */
body.ui-palette-sapphire {
  --bg: #000080;
  --bg-top: #1d3768;
  --panel: #0d3b66;
  --panel-soft: #124f74;
  --text: #f4f8ff;
  --muted: #c8d7e6;
  --primary: #005f5d;
  --accent: #dd9933;
  --danger: #800020;
  --gold: #ffd700;
  --line: rgba(64, 224, 208, 0.35);
  --surface-panel: rgba(13, 59, 102, 0.9);
  --surface-subpanel: rgba(0, 0, 128, 0.2);
  --header-start: rgba(13, 59, 102, 0.98);
  --header-end: rgba(0, 95, 93, 0.85);
  --table-head: rgba(0, 95, 93, 0.55);
  --table-row-even: rgba(0, 95, 93, 0.12);
  --table-row-hover: rgba(221, 153, 51, 0.16);
  --focus-ring: rgba(221, 153, 51, 0.7);
}


/* <<< css/palettes/palette-sapphire.css */

/* >>> css/palettes/palette-modern.css */
/* ── Palette : Modern — bleu nuit, accent ambre ───────────────────────────── */
body.admin-theme-modern {
  --bg: #081a3a;
  --bg-top: #183766;
  --panel: #13335f;
  --panel-soft: #1a467c;
  --text: #eef6ff;
  --muted: #c0d3ea;
  --primary: #0f6f75;
  --accent: #f0b24a;
  --danger: #be3f54;
  --gold: #f7c96a;
  --line: rgba(125, 182, 235, 0.34);
  --surface-panel: rgba(19, 51, 95, 0.9);
  --surface-subpanel: rgba(14, 37, 73, 0.6);
  --header-start: rgba(20, 57, 105, 0.98);
  --header-end: rgba(15, 111, 117, 0.86);
  --table-head: rgba(26, 70, 124, 0.82);
  --table-row-even: rgba(34, 86, 149, 0.2);
  --table-row-hover: rgba(56, 129, 200, 0.24);
  --focus-ring: rgba(240, 178, 74, 0.78);
  --tone-1: #be3f54;
  --tone-2: #e6943b;
  --tone-3: #f2bc58;
  --tone-4: #f7c96a;
  --tone-5: #4fc9c8;
}

/* <<< css/palettes/palette-modern.css */

/* >>> css/palettes/palette-emerald.css */

/* Emeraude -- verts sombres + or chaud */
body.ui-palette-emerald {
  --bg: #041a0d;
  --bg-top: #0c3320;
  --panel: #0d3b1e;
  --panel-soft: #164f2c;
  --text: #e8f6ed;
  --muted: #9ecfaf;
  --primary: #1c7a40;
  --accent: #e8c84a;
  --danger: #8b2020;
  --gold: #e8c84a;
  --line: rgba(80, 200, 120, 0.32);
  --surface-panel: rgba(13, 59, 30, 0.9);
  --surface-subpanel: rgba(4, 26, 13, 0.6);
  --header-start: rgba(14, 62, 30, 0.98);
  --header-end: rgba(28, 122, 64, 0.86);
  --table-head: rgba(28, 122, 64, 0.55);
  --table-row-even: rgba(28, 122, 64, 0.12);
  --table-row-hover: rgba(232, 200, 74, 0.16);
  --focus-ring: rgba(232, 200, 74, 0.7);
}

/* <<< css/palettes/palette-emerald.css */

/* >>> css/palettes/palette-forest.css */
/* ── Palette : Forêt — verts sombres, accent doré ─────────────────────────── */
body.app-theme-forest,
body.ui-palette-forest {
  --bg: #041a0d;
  --bg-top: #0c3320;
  --panel: #0d3b1e;
  --panel-soft: #164f2c;
  --text: #e8f6ed;
  --muted: #9ecfaf;
  --primary: #1c7a40;
  --accent: #e8c84a;
  --danger: #8b2020;
  --gold: #e8c84a;
  --line: rgba(80, 200, 120, 0.32);
  --surface-panel: rgba(13, 59, 30, 0.9);
  --surface-subpanel: rgba(4, 26, 13, 0.6);
  --header-start: rgba(14, 62, 30, 0.98);
  --header-end: rgba(28, 122, 64, 0.86);
  --table-head: rgba(28, 122, 64, 0.55);
  --table-row-even: rgba(28, 122, 64, 0.12);
  --table-row-hover: rgba(232, 200, 74, 0.16);
  --focus-ring: rgba(232, 200, 74, 0.7);
  --tone-1: #8b2020;
  --tone-2: #e8933b;
  --tone-3: #e8c84a;
  --tone-4: #50c87a;
  --tone-5: #4fc9c8;
}

/* <<< css/palettes/palette-forest.css */

/* >>> css/palettes/palette-sunset.css */
/* ── Palette : Crépuscule — bruns chauds, accent orange ───────────────────── */
body.app-theme-sunset,
body.ui-palette-sunset {
  --bg: #1c0a00;
  --bg-top: #3d1800;
  --panel: #2e1005;
  --panel-soft: #421f10;
  --text: #fff0e0;
  --muted: #e8b88a;
  --primary: #9a4200;
  --accent: #ff8c00;
  --danger: #cc2200;
  --gold: #ffd700;
  --line: rgba(255, 140, 0, 0.35);
  --surface-panel: rgba(46, 16, 5, 0.9);
  --surface-subpanel: rgba(28, 10, 0, 0.6);
  --header-start: rgba(55, 20, 5, 0.98);
  --header-end: rgba(154, 66, 0, 0.86);
  --table-head: rgba(120, 60, 0, 0.55);
  --table-row-even: rgba(120, 60, 0, 0.18);
  --table-row-hover: rgba(255, 140, 0, 0.2);
  --focus-ring: rgba(255, 140, 0, 0.7);
  --tone-1: #cc2200;
  --tone-2: #ff5500;
  --tone-3: #ff8c00;
  --tone-4: #ffd700;
  --tone-5: #ffe980;
}

/* <<< css/palettes/palette-sunset.css */

/* >>> css/palettes/palette-medieval.css */
/* ── Palette : Médiéval — parchemin sombre, cuir, laiton patiné ───────────── */
body.app-theme-medieval,
body.ui-palette-medieval {
  --bg: #15100a;
  --bg-top: #2a1c11;
  --panel: #2c2116;
  --panel-soft: #3b2b1c;
  --text: #f6ead2;
  --muted: #cbb995;
  --primary: #5c2f1c;
  --accent: #b9822f;
  --danger: #7d261f;
  --gold: #d7b46a;
  --line: rgba(215, 180, 106, 0.34);
  --surface-panel: rgba(44, 33, 22, 0.92);
  --surface-subpanel: rgba(28, 20, 13, 0.66);
  --header-start: rgba(45, 29, 18, 0.98);
  --header-end: rgba(92, 47, 28, 0.86);
  --table-head: rgba(92, 47, 28, 0.58);
  --table-row-even: rgba(185, 130, 47, 0.11);
  --table-row-hover: rgba(215, 180, 106, 0.17);
  --focus-ring: rgba(215, 180, 106, 0.72);
  --tone-1: #7d261f;
  --tone-2: #9d5426;
  --tone-3: #b9822f;
  --tone-4: #7b8a43;
  --tone-5: #d7c18a;
}

/* <<< css/palettes/palette-medieval.css */

/* >>> css/palettes/palette-slate.css */
/* ── Palette : Ardoise — gris-bleu froid, accent cyan ─────────────────────── */
body.app-theme-slate,
body.ui-palette-slate {
  --bg: #0d1620;
  --bg-top: #172030;
  --panel: #1a2a3e;
  --panel-soft: #203450;
  --text: #dde8f6;
  --muted: #90aacc;
  --primary: #2e6496;
  --accent: #58c8d4;
  --danger: #c0392b;
  --gold: #f0c244;
  --line: rgba(88, 200, 212, 0.32);
  --surface-panel: rgba(26, 42, 62, 0.9);
  --surface-subpanel: rgba(13, 22, 32, 0.6);
  --header-start: rgba(24, 40, 60, 0.98);
  --header-end: rgba(46, 100, 150, 0.86);
  --table-head: rgba(46, 100, 150, 0.55);
  --table-row-even: rgba(46, 100, 150, 0.15);
  --table-row-hover: rgba(88, 200, 212, 0.18);
  --focus-ring: rgba(88, 200, 212, 0.7);
  --tone-1: #c0392b;
  --tone-2: #e8943b;
  --tone-3: #f0c244;
  --tone-4: #58c8d4;
  --tone-5: #a0c8f0;
}

/* Ardoise -- gris-bleu froid, accent cyan */
body.ui-palette-slate {
  --bg: #0d1620;
  --bg-top: #172030;
  --panel: #1a2a3e;
  --panel-soft: #203450;
  --text: #dde8f6;
  --muted: #90aacc;
  --primary: #2e6496;
  --accent: #58c8d4;
  --danger: #c0392b;
  --gold: #f0c244;
  --line: rgba(88, 200, 212, 0.32);
  --surface-panel: rgba(26, 42, 62, 0.9);
  --surface-subpanel: rgba(13, 22, 32, 0.6);
  --header-start: rgba(24, 40, 60, 0.98);
  --header-end: rgba(46, 100, 150, 0.86);
  --table-head: rgba(46, 100, 150, 0.55);
  --table-row-even: rgba(46, 100, 150, 0.15);
  --table-row-hover: rgba(88, 200, 212, 0.18);
  --focus-ring: rgba(88, 200, 212, 0.7);
}

/* <<< css/palettes/palette-slate.css */

/* >>> css/palettes/palette-night.css */
/* ── Palette : Nuit — noir profond, accent violet ─────────────────────────── */
body.app-theme-night,
body.ui-palette-night {
  --bg: #080816;
  --bg-top: #10112a;
  --panel: #15163c;
  --panel-soft: #1e1f50;
  --text: #e8e0fc;
  --muted: #a098c8;
  --primary: #4830a0;
  --accent: #c878f8;
  --danger: #a02040;
  --gold: #eedc80;
  --line: rgba(180, 120, 248, 0.3);
  --surface-panel: rgba(21, 22, 60, 0.9);
  --surface-subpanel: rgba(8, 8, 22, 0.6);
  --header-start: rgba(20, 18, 50, 0.98);
  --header-end: rgba(72, 48, 160, 0.86);
  --table-head: rgba(72, 48, 160, 0.5);
  --table-row-even: rgba(72, 48, 160, 0.15);
  --table-row-hover: rgba(200, 120, 248, 0.18);
  --focus-ring: rgba(200, 120, 248, 0.7);
  --tone-1: #a02040;
  --tone-2: #d04090;
  --tone-3: #c878f8;
  --tone-4: #88a8f8;
  --tone-5: #60d0e8;
}

/* <<< css/palettes/palette-night.css */

/* >>> css/palettes/palette-amethyst.css */
/* ── Palette : Améthyste — violet profond, accent rose ────────────────────── */
body.app-theme-amethyst,
body.ui-palette-amethyst {
  --bg: #160820;
  --bg-top: #280d3c;
  --panel: #20104a;
  --panel-soft: #2c1860;
  --text: #f0e8ff;
  --muted: #c0a0e0;
  --primary: #7020c8;
  --accent: #ff78c0;
  --danger: #c02050;
  --gold: #ffdc80;
  --line: rgba(200, 120, 255, 0.35);
  --surface-panel: rgba(32, 16, 74, 0.9);
  --surface-subpanel: rgba(22, 8, 32, 0.6);
  --header-start: rgba(36, 14, 66, 0.98);
  --header-end: rgba(112, 32, 200, 0.86);
  --table-head: rgba(112, 32, 200, 0.5);
  --table-row-even: rgba(112, 32, 200, 0.15);
  --table-row-hover: rgba(255, 120, 192, 0.18);
  --focus-ring: rgba(255, 120, 192, 0.7);
  --tone-1: #c02050;
  --tone-2: #d85090;
  --tone-3: #ff78c0;
  --tone-4: #c878f8;
  --tone-5: #80c8ff;
}

/* Amethyste -- violet profond, accent rose */
body.ui-palette-amethyst {
  --bg: #160820;
  --bg-top: #280d3c;
  --panel: #20104a;
  --panel-soft: #2c1860;
  --text: #f0e8ff;
  --muted: #c0a0e0;
  --primary: #7020c8;
  --accent: #ff78c0;
  --danger: #c02050;
  --gold: #ffdc80;
  --line: rgba(200, 120, 255, 0.35);
  --surface-panel: rgba(32, 16, 74, 0.9);
  --surface-subpanel: rgba(22, 8, 32, 0.6);
  --header-start: rgba(36, 14, 66, 0.98);
  --header-end: rgba(112, 32, 200, 0.86);
  --table-head: rgba(112, 32, 200, 0.5);
  --table-row-even: rgba(112, 32, 200, 0.15);
  --table-row-hover: rgba(255, 120, 192, 0.18);
  --focus-ring: rgba(255, 120, 192, 0.7);
}

/* <<< css/palettes/palette-amethyst.css */

/* >>> css/palettes/palette-aurora.css */
/* ── Palette : Aurore — aurora boréale, teal électrique sur nuit profonde ──── */
body.app-theme-aurora,
body.ui-palette-aurora {
  --bg: #030e18;
  --bg-top: #081e2c;
  --panel: #0c2a3e;
  --panel-soft: #103452;
  --text: #ccf2e6;
  --muted: #78c4a4;
  --primary: #006860;
  --accent: #00e8a8;
  --danger: #c03060;
  --gold: #eede60;
  --line: rgba(0, 232, 168, 0.38);
  --surface-panel: rgba(12, 42, 62, 0.9);
  --surface-subpanel: rgba(3, 14, 24, 0.6);
  --header-start: rgba(10, 28, 44, 0.98);
  --header-end: rgba(0, 104, 96, 0.86);
  --table-head: rgba(0, 104, 96, 0.55);
  --table-row-even: rgba(0, 104, 96, 0.14);
  --table-row-hover: rgba(0, 232, 168, 0.16);
  --focus-ring: rgba(0, 232, 168, 0.7);
  --tone-1: #c03060;
  --tone-2: #20b4a0;
  --tone-3: #00e8a8;
  --tone-4: #80f0d8;
  --tone-5: #60c8f0;
}

/* <<< css/palettes/palette-aurora.css */

/* >>> css/palettes/palette-frost.css */
/* ── Palette : Givre — glace arctique, bleu cristallin ───────────────────── */
body.app-theme-frost,
body.ui-palette-frost {
  --bg: #060e1a;
  --bg-top: #0c1e30;
  --panel: #102840;
  --panel-soft: #163454;
  --text: #ddf2ff;
  --muted: #88c2e8;
  --primary: #0870c8;
  --accent: #40d8ff;
  --danger: #c82040;
  --gold: #f0dc60;
  --line: rgba(64, 216, 255, 0.35);
  --surface-panel: rgba(16, 40, 64, 0.9);
  --surface-subpanel: rgba(6, 14, 26, 0.6);
  --header-start: rgba(12, 28, 50, 0.98);
  --header-end: rgba(8, 112, 200, 0.86);
  --table-head: rgba(8, 112, 200, 0.5);
  --table-row-even: rgba(8, 112, 200, 0.14);
  --table-row-hover: rgba(64, 216, 255, 0.18);
  --focus-ring: rgba(64, 216, 255, 0.7);
  --tone-1: #c82040;
  --tone-2: #2080e0;
  --tone-3: #40d8ff;
  --tone-4: #80f0d8;
  --tone-5: #c0e8ff;
}

/* <<< css/palettes/palette-frost.css */

/* >>> css/palettes/palette-rose.css */
/* ── Palette : Rosée — aube rose, lumière douce ───────────────────────────── */
body.app-theme-rose,
body.ui-palette-rose {
  --bg: #190810;
  --bg-top: #2e0c1c;
  --panel: #3a1022;
  --panel-soft: #4c1830;
  --text: #ffe2ec;
  --muted: #d890a8;
  --primary: #8c2050;
  --accent: #ff6090;
  --danger: #c02020;
  --gold: #ffd060;
  --line: rgba(255, 96, 144, 0.35);
  --surface-panel: rgba(58, 16, 34, 0.9);
  --surface-subpanel: rgba(25, 8, 16, 0.6);
  --header-start: rgba(46, 12, 28, 0.98);
  --header-end: rgba(140, 32, 80, 0.86);
  --table-head: rgba(140, 32, 80, 0.5);
  --table-row-even: rgba(140, 32, 80, 0.15);
  --table-row-hover: rgba(255, 96, 144, 0.18);
  --focus-ring: rgba(255, 96, 144, 0.7);
  --tone-1: #c02020;
  --tone-2: #e04080;
  --tone-3: #ff6090;
  --tone-4: #ff98c0;
  --tone-5: #ffc8dc;
}

/* <<< css/palettes/palette-rose.css */

/* >>> css/palettes/palette-cloud.css */
/* ── Palette : Nuage — clair, bleu azur (thème clair) ─────────────────────── */
body.app-theme-cloud,
body.ui-palette-cloud {
  --bg: #d8e4f4;
  --bg-top: #c4d4ec;
  --panel: #1a5fa8;
  --panel-soft: #e8f0fc;
  --text: #1a2540;
  --muted: #3a5070;
  --primary: #1a5fa8;
  --accent: #0888cc;
  --danger: #b82020;
  --gold: #c08010;
  --line: rgba(30, 80, 160, 0.25);
  --surface-panel: rgba(255, 255, 255, 0.88);
  --surface-subpanel: rgba(210, 228, 252, 0.65);
  --header-start: rgba(26, 95, 168, 0.96);
  --header-end: rgba(8, 136, 204, 0.92);
  --table-head: rgba(26, 95, 168, 0.18);
  --table-row-even: rgba(26, 95, 168, 0.09);
  --table-row-hover: rgba(8, 136, 204, 0.15);
  --focus-ring: rgba(8, 136, 204, 0.6);
  --tone-1: #b82020;
  --tone-2: #c87030;
  --tone-3: #c09020;
  --tone-4: #1a5fa8;
  --tone-5: #0888cc;
  --metric-success: #1a7a40;
  --metric-warning: #c08010;
  --metric-risk: #b82020;
  --metric-critical: #a01010;
  --metric-confidence: #1a5fa8;
  --metric-coverage: #0888cc;
  /* Variables sémantiques pour fond clair */
  --semantic-progression-low: var(--metric-risk);
  --semantic-progression-mid: var(--metric-warning);
  --semantic-progression-high: var(--metric-success);
  --semantic-risk-low: var(--metric-success);
  --semantic-risk-medium: var(--metric-warning);
  --semantic-risk-high: var(--metric-risk);
  --semantic-risk-critical: var(--metric-critical);
  --semantic-priority-critical: var(--metric-critical);
  --semantic-priority-high: var(--metric-risk);
  --semantic-priority-medium: var(--metric-warning);
  --semantic-priority-low: var(--metric-success);
  --semantic-confidence-low: var(--metric-risk);
  --semantic-confidence-medium: var(--metric-warning);
  --semantic-confidence-high: var(--metric-success);
  --semantic-confidence-verified: var(--metric-coverage);
}

/* <<< css/palettes/palette-cloud.css */

/* >>> css/palettes/palette-ivory.css */
/* ── Palette : Ivoire — crème chaud, accent brun-doré (thème clair) ─────────── */
body.app-theme-ivory,
body.ui-palette-ivory {
  --bg: #f0e8d8;
  --bg-top: #e4d8c0;
  --panel: #8b4a0a;
  --panel-soft: #faf4e8;
  --text: #2c2010;
  --muted: #5c4830;
  --primary: #8b4a0a;
  --accent: #c87820;
  --danger: #b02018;
  --gold: #b07810;
  --line: rgba(100, 70, 20, 0.28);
  --surface-panel: rgba(255, 252, 245, 0.90);
  --surface-subpanel: rgba(240, 230, 210, 0.70);
  --header-start: rgba(139, 74, 10, 0.96);
  --header-end: rgba(200, 120, 32, 0.92);
  --table-head: rgba(100, 70, 10, 0.18);
  --table-row-even: rgba(100, 70, 10, 0.09);
  --table-row-hover: rgba(200, 120, 32, 0.15);
  --focus-ring: rgba(200, 120, 32, 0.6);
  --tone-1: #b02018;
  --tone-2: #c07020;
  --tone-3: #c08020;
  --tone-4: #507040;
  --tone-5: #2080a0;
  --metric-success: #1a7040;
  --metric-warning: #b07810;
  --metric-risk: #b02018;
  --metric-critical: #900010;
  --metric-confidence: #3868a8;
  --metric-coverage: #2080a0;
  /* Variables sémantiques pour fond clair */
  --semantic-progression-low: var(--metric-risk);
  --semantic-progression-mid: var(--metric-warning);
  --semantic-progression-high: var(--metric-success);
  --semantic-risk-low: var(--metric-success);
  --semantic-risk-medium: var(--metric-warning);
  --semantic-risk-high: var(--metric-risk);
  --semantic-risk-critical: var(--metric-critical);
  --semantic-priority-critical: var(--metric-critical);
  --semantic-priority-high: var(--metric-risk);
  --semantic-priority-medium: var(--metric-warning);
  --semantic-priority-low: var(--metric-success);
  --semantic-confidence-low: var(--metric-risk);
  --semantic-confidence-medium: var(--metric-warning);
  --semantic-confidence-high: var(--metric-success);
  --semantic-confidence-verified: var(--metric-coverage);
}

/* Ivoire -- fond creme clair, accents chauds */
body.ui-palette-ivory {
  --bg: #f0e8d8;
  --bg-top: #e4d8c0;
  --panel: #8b4a0a;
  --panel-soft: #faf4e8;
  --text: #2c2010;
  --muted: #6c5840;
  --primary: #8b4a0a;
  --accent: #c87820;
  --danger: #b02018;
  --gold: #b07810;
  --line: rgba(100, 70, 20, 0.28);
  --surface-panel: rgba(255, 252, 245, 0.90);
  --surface-subpanel: rgba(240, 230, 210, 0.70);
  --header-start: rgba(139, 74, 10, 0.96);
  --header-end: rgba(200, 120, 32, 0.92);
  --table-head: rgba(100, 70, 10, 0.12);
  --table-row-even: rgba(100, 70, 10, 0.05);
  --table-row-hover: rgba(200, 120, 32, 0.12);
  --focus-ring: rgba(200, 120, 32, 0.6);
  --metric-success: #1a7040;
  --metric-warning: #b07810;
  --metric-risk: #b02018;
  --metric-critical: #900010;
  --metric-confidence: #3868a8;
  --metric-coverage: #2080a0;
}

/* <<< css/palettes/palette-ivory.css */

/* >>> css/palettes/palette-bordeaux.css */

/* Bordeaux -- bourgogne profond, accent dore */
body.ui-palette-bordeaux {
  --bg: #160005;
  --bg-top: #2d0010;
  --panel: #380015;
  --panel-soft: #4a001e;
  --text: #fce8ec;
  --muted: #d4a0b0;
  --primary: #8c2035;
  --accent: #d4a840;
  --danger: #c82020;
  --gold: #d4a840;
  --line: rgba(180, 40, 70, 0.4);
  --surface-panel: rgba(56, 0, 21, 0.9);
  --surface-subpanel: rgba(22, 0, 5, 0.6);
  --header-start: rgba(45, 0, 16, 0.98);
  --header-end: rgba(140, 32, 53, 0.86);
  --table-head: rgba(140, 32, 53, 0.5);
  --table-row-even: rgba(140, 32, 53, 0.15);
  --table-row-hover: rgba(212, 168, 64, 0.18);
  --focus-ring: rgba(212, 168, 64, 0.7);
}

/* <<< css/palettes/palette-bordeaux.css */

/* >>> css/palettes/palette-meadow.css */
/* ── Palette : Prairie — vert tendre, accent herbe (thème clair) ──────────── */
body.app-theme-meadow,
body.ui-palette-meadow {
  --bg: #dceee0;
  --bg-top: #cae4d0;
  --panel: #1a6a30;
  --panel-soft: #e8f5ec;
  --text: #162810;
  --muted: #2e5032;
  --primary: #1a6a30;
  --accent: #28a848;
  --danger: #b02018;
  --gold: #a08020;
  --line: rgba(20, 80, 30, 0.28);
  --surface-panel: rgba(248, 255, 248, 0.90);
  --surface-subpanel: rgba(220, 242, 224, 0.68);
  --header-start: rgba(26, 106, 48, 0.96);
  --header-end: rgba(40, 168, 72, 0.92);
  --table-head: rgba(26, 106, 48, 0.18);
  --table-row-even: rgba(26, 106, 48, 0.09);
  --table-row-hover: rgba(40, 168, 72, 0.15);
  --focus-ring: rgba(40, 168, 72, 0.6);
  --tone-1: #b02018;
  --tone-2: #b87030;
  --tone-3: #a08020;
  --tone-4: #1a6a30;
  --tone-5: #2090b0;
  --metric-success: #1a6a30;
  --metric-warning: #a07010;
  --metric-risk: #b02018;
  --metric-critical: #900010;
  --metric-confidence: #3070b8;
  --metric-coverage: #2090b0;
  /* Variables sémantiques pour fond clair */
  --semantic-progression-low: var(--metric-risk);
  --semantic-progression-mid: var(--metric-warning);
  --semantic-progression-high: var(--metric-success);
  --semantic-risk-low: var(--metric-success);
  --semantic-risk-medium: var(--metric-warning);
  --semantic-risk-high: var(--metric-risk);
  --semantic-risk-critical: var(--metric-critical);
  --semantic-priority-critical: var(--metric-critical);
  --semantic-priority-high: var(--metric-risk);
  --semantic-priority-medium: var(--metric-warning);
  --semantic-priority-low: var(--metric-success);
  --semantic-confidence-low: var(--metric-risk);
  --semantic-confidence-medium: var(--metric-warning);
  --semantic-confidence-high: var(--metric-success);
  --semantic-confidence-verified: var(--metric-coverage);
}

/* <<< css/palettes/palette-meadow.css */


/* Structural themes */
/* >>> css/themes/theme-classic.css */

/* ============================================================
   THEME LANGUAGE PASS -- modern, classic, night, editorial, medieval
   ============================================================ */

body.ui-theme-classic,
body:not([class*="ui-theme-"]) {
  --app-radius: 14px;
  --app-radius-tight: 9px;
  --ui-ornament: max(var(--ui-ornament, 0.45), 0.28);
  --user-font-body: "Raleway", "Segoe UI", sans-serif;
  --user-font-title: "Raleway", "Segoe UI", sans-serif;
  --user-font-eyebrow: "Raleway", "Segoe UI", sans-serif;
}

body.ui-theme-classic .app-header,
body:not([class*="ui-theme-"]) .app-header,
body.ui-theme-classic .session-header,
body:not([class*="ui-theme-"]) .session-header {
  border: 1px solid color-mix(in srgb, var(--line) 82%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 46%),
    linear-gradient(135deg, var(--header-start), var(--header-end));
}

body.ui-theme-classic .panel,
body:not([class*="ui-theme-"]) .panel,
body.ui-theme-classic .subpanel,
body:not([class*="ui-theme-"]) .subpanel {
  border: 1px solid color-mix(in srgb, var(--line) 92%, rgba(255, 255, 255, 0.05));
  box-shadow: 0 14px 30px -28px rgba(0, 0, 0, 0.55);
}

body.ui-theme-classic .global-nav button,
body:not([class*="ui-theme-"]) .global-nav button,
body.ui-theme-classic button.secondary,
body:not([class*="ui-theme-"]) button.secondary {
  border-radius: 10px;
}

/* <<< css/themes/theme-classic.css */

/* >>> css/themes/theme-artdeco.css */

/* === Art Deco === */
body.ui-theme-artdeco {
  --ui-ornament: 0.85;
}

body.ui-theme-artdeco::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.055 * var(--ui-ornament));
  background-image:
    repeating-linear-gradient(135deg, var(--accent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg, var(--accent) 0 1px, transparent 1px 22px);
  mask: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  -webkit-mask: radial-gradient(ellipse at center, #000 15%, transparent 72%);
}

body.ui-theme-artdeco .panel,
body.ui-theme-artdeco .subpanel {
  position: relative;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Coins ornementaux désactivés — remplacés par bordure subtile */

body.ui-theme-artdeco .app-header {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}

body.ui-theme-artdeco .app-header::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--accent) 75%, transparent 100%);
  opacity: calc(0.7 * var(--ui-ornament));
}

body.ui-theme-artdeco .global-nav button {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  border-radius: 0;
}

body.ui-theme-artdeco button:not(.icon-button) {
  border-radius: 0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.ui-theme-artdeco input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]),
body.ui-theme-artdeco textarea {
  border-radius: 0;
}

body.ui-theme-artdeco .subpanel > h3::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: calc(0.5 * var(--ui-ornament));
}

body.ui-theme-artdeco .panel,
body.ui-theme-artdeco .subpanel,
body.ui-theme-artdeco button {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

/* ============================================================
   THEME: ART DECO
   ============================================================ */

/* --- Options QCM --- */
body.ui-theme-artdeco .options {
  gap: 0.5rem;
}

body.ui-theme-artdeco .option-btn {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--accent) 3%, transparent);
  padding-left: 1rem;
  letter-spacing: 0.03em;
  transition: border-color 0.2s ease, background 0.2s ease;
}

/* Diamond letter badge */
body.ui-theme-artdeco .option-letter {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--user-font-eyebrow, "Poiret One", sans-serif);
  font-size: 0.88rem;
  transform: rotate(45deg);
  transition: background 0.2s ease, color 0.2s ease;
}

body.ui-theme-artdeco .option-letter span {
  transform: rotate(-45deg);
  display: block;
}

body.ui-theme-artdeco .option-btn:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

body.ui-theme-artdeco .option-btn:hover .option-letter {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

body.ui-theme-artdeco .option-btn:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

body.ui-theme-artdeco .option-btn.is-picked .option-letter {
  background: var(--accent);
  color: var(--bg, #000080);
}

body.ui-theme-artdeco .option-btn.correct {
  border-color: var(--tone-5);
  background: color-mix(in srgb, var(--tone-5) 10%, transparent);
}

body.ui-theme-artdeco .option-btn.correct .option-letter {
  background: var(--primary);
  border-color: var(--tone-5);
  color: var(--text, #f4f8ff);
}

body.ui-theme-artdeco .option-btn.wrong {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 20%, transparent);
}

body.ui-theme-artdeco .option-btn.wrong .option-letter {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--text, #f4f8ff);
}

/* --- Barre de progression --- */
body.ui-theme-artdeco .progress-wrap {
  border-radius: 0;
  height: 4px;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  overflow: visible;
  position: relative;
}

body.ui-theme-artdeco .progress-bar {
  border-radius: 0;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  position: relative;
  overflow: visible;
}

/* Diamant dore au bout de la barre */
body.ui-theme-artdeco .progress-bar::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  transform: rotate(45deg);
  opacity: var(--ui-ornament);
}

/* --- Onglets --- */
body.ui-theme-artdeco .tab-btn {
  border-radius: 0;
  background: transparent;
  border: 1px solid transparent;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  position: relative;
  color: var(--muted);
  transition: color 0.2s ease;
}

body.ui-theme-artdeco .tab-btn:hover {
  color: var(--accent);
  filter: none;
}

body.ui-theme-artdeco .tab-btn.active {
  color: var(--accent);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* Tirets decoratifs haut/bas sur l'onglet actif */
body.ui-theme-artdeco .tab-btn.active::before,
body.ui-theme-artdeco .tab-btn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 1px;
  background: var(--accent);
  opacity: var(--ui-ornament);
}

body.ui-theme-artdeco .tab-btn.active::before { top: 4px; }
body.ui-theme-artdeco .tab-btn.active::after  { bottom: 4px; }

/* --- Flashcard --- */
body.ui-theme-artdeco .flashcard-review-card {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  position: relative;
}

/* Coins ornementaux haut-gauche et bas-droit */
body.ui-theme-artdeco .flashcard-review-card::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 16px;
  height: 16px;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  pointer-events: none;
  opacity: var(--ui-ornament);
}

body.ui-theme-artdeco .flashcard-review-card::after {
  content: "";
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  pointer-events: none;
  opacity: var(--ui-ornament);
}

body.ui-theme-artdeco .flashcard-front {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

body.ui-theme-artdeco .flashcard-back {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--tone-5) 20%, transparent);
}

body.ui-theme-artdeco {
  --app-radius: 4px;
  --app-radius-tight: 2px;
}

body.ui-theme-artdeco .app-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 88%, #091219), color-mix(in srgb, var(--bg) 94%, #071017));
  box-shadow:
    0 24px 50px -34px rgba(0, 0, 0, 0.66),
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
}

body.ui-theme-artdeco .app-header::before {
  opacity: calc(0.4 + var(--ui-ornament) * 0.25);
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--text) 4%, transparent) 12%, transparent 22%),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
}

body.ui-theme-artdeco .brand-mark-shell {
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
    color-mix(in srgb, var(--text) 4%, transparent);
}

body.ui-theme-artdeco .brand-mark-shell::before,
body.ui-theme-artdeco .brand-mark-shell::after {
  border-radius: 0;
}

body.ui-theme-artdeco .brand-kicker,
body.ui-theme-artdeco .global-nav button,
body.ui-theme-artdeco .screen-options-btn,
body.ui-theme-artdeco .appearance-swatch-badge {
  font-family: var(--user-font-eyebrow);
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

body.ui-theme-artdeco .global-nav {
  padding-top: 0.8rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

body.ui-theme-artdeco .global-nav button {
  border-radius: 0;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

body.ui-theme-artdeco .global-nav button.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
}

body.ui-theme-artdeco .panel,
body.ui-theme-artdeco .subpanel,
body.ui-theme-artdeco .session-header,
body.ui-theme-artdeco .screen-options-panel,
body.ui-theme-artdeco .appearance-grid .field-group,
body.ui-theme-artdeco .appearance-swatch {
  border-radius: 0;
}

/* Arrière-plan shimmer panel — conservé sans contenu visible (::before désactivé plus bas) */

body.ui-theme-artdeco .menu-toggle {
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

body.ui-theme-artdeco .flashcard-review-card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 24%),
    color-mix(in srgb, var(--text) 4%, transparent);
}

body.ui-theme-artdeco .flashcard-front {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--text) 3%, transparent);
}

body.ui-theme-artdeco .flashcard-back {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tone-5) 8%, transparent), transparent 34%),
    color-mix(in srgb, var(--tone-5) 4%, transparent);
}

/* ============================================================
   ART DECO STRUCTURAL PASS -- closer to reference composition
   ============================================================ */

body.ui-theme-artdeco {
  --app-radius: 0px;
  --app-radius-tight: 0px;
  --line: color-mix(in srgb, var(--accent) 18%, transparent);
  --user-font-body: "Cormorant Garamond", Georgia, serif;
  --user-font-title: "Italiana", "Cormorant Garamond", serif;
  --user-font-eyebrow: "Poiret One", "Raleway", sans-serif;
}

body.ui-theme-artdeco .app {
  width: min(1460px, 94vw);
  gap: 1.25rem;
}

body.ui-theme-artdeco .app-header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 1.25rem;
  padding: 0.85rem 1rem 1rem;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 24%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, transparent), color-mix(in srgb, var(--bg) 88%, transparent));
  box-shadow: none;
}

body.ui-theme-artdeco .app-header::before {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 28%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 3%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 3%, transparent) 0 1px, transparent 1px 28px);
  opacity: 0.7;
}

body.ui-theme-artdeco .header-top {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0.55rem;
}

body.ui-theme-artdeco .header-branding {
  gap: 0.15rem;
}

body.ui-theme-artdeco .title-link {
  gap: 0.85rem;
}

body.ui-theme-artdeco .brand-mark-shell {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 64%),
    color-mix(in srgb, var(--bg) 72%, transparent);
  box-shadow: none;
}

body.ui-theme-artdeco .brand-mark-shell::before {
  inset: 5px;
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

body.ui-theme-artdeco .brand-mark-shell::after {
  inset: 11px;
  border-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

body.ui-theme-artdeco .brand-copy {
  gap: 0.1rem;
}

body.ui-theme-artdeco .brand-kicker {
  display: none;
}

body.ui-theme-artdeco .brand-name {
  font-family: var(--user-font-title);
  font-size: clamp(1.55rem, 2.2vw, 2.05rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: none;
}

body.ui-theme-artdeco .header-top p {
  margin-top: 0;
  font-family: var(--user-font-eyebrow);
  font-size: clamp(0.62rem, 0.72vw, 0.74rem);
  line-height: 1.12;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 78%, transparent);
}

body.ui-theme-artdeco .app-theme-header-control {
  display: none !important;
}

body.ui-theme-artdeco .global-nav {
  grid-column: 2;
  grid-row: 1;
  justify-content: flex-end;
  gap: 0.5rem;
  align-self: end;
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

body.ui-theme-artdeco .global-nav button,
body.ui-theme-artdeco .tab-btn,
body.ui-theme-artdeco button.secondary,
body.ui-theme-artdeco button.primary,
body.ui-theme-artdeco .button-link {
  min-height: 42px;
  padding: 0.62rem 1rem;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 62%, transparent);
  background: transparent;
  color: color-mix(in srgb, var(--accent) 88%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  box-shadow: none;
}

/* Nav and tab buttons override — subtle, no gold border */
body.ui-theme-artdeco .global-nav button,
body.ui-theme-artdeco .tab-btn {
  color: var(--muted);
  border-color: transparent;
  background: transparent;
}

body.ui-theme-artdeco button:not(.icon-button):not(.appearance-palette-chip) {
  min-height: 44px;
}

body.ui-theme-artdeco .global-nav button:hover,
body.ui-theme-artdeco .tab-btn:hover {
  filter: none;
  color: color-mix(in srgb, var(--accent) 90%, transparent);
  border-color: transparent;
  background: transparent;
}

body.ui-theme-artdeco .title-link:hover,
body.ui-theme-artdeco .title-link:focus-visible {
  filter: none;
  background: transparent;
  color: inherit;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

body.ui-theme-artdeco .global-nav button.active,
body.ui-theme-artdeco .tab-btn.active {
  color: color-mix(in srgb, var(--accent) 98%, transparent);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

body.ui-theme-artdeco .global-nav button.active::after,
body.ui-theme-artdeco .tab-btn.active::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 92%, transparent);
}

/* Generic action button hover — gold fill (excludes nav, tabs, icon buttons) */
body.ui-theme-artdeco button:not(.icon-button):not(.appearance-palette-chip):not(.menu-toggle):not(.tab-btn):hover {
  filter: none;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 95%, transparent);
}

body.ui-theme-artdeco .panel,
body.ui-theme-artdeco .session-header,
body.ui-theme-artdeco .subpanel,
body.ui-theme-artdeco .screen-options-panel {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 20%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    var(--surface-panel);
  box-shadow: none;
}

body.ui-theme-artdeco .panel {
  padding: 1.15rem 1.2rem 1.25rem;
}

/* Coins ornementaux — haut-gauche via ::before, bas-droite via ::after */
body.ui-theme-artdeco .panel::before,
body.ui-theme-artdeco .subpanel::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  width: 22px;
  height: 22px;
  background: none;
  border-top: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  opacity: calc(0.7 * var(--ui-ornament));
  pointer-events: none;
}

body.ui-theme-artdeco .panel::after,
body.ui-theme-artdeco .subpanel::after {
  content: "";
  position: absolute;
  bottom: 9px;
  right: 9px;
  width: 22px;
  height: 22px;
  background: none;
  border-bottom: 1px solid var(--accent);
  border-right: 1px solid var(--accent);
  opacity: calc(0.7 * var(--ui-ornament));
  pointer-events: none;
}

/* Bottom-left corner via box-shadow outline trick on a pseudo — use session-header::before for bottom-left */
body.ui-theme-artdeco .session-header::before {
  content: "";
  position: absolute;
  bottom: 9px;
  left: 9px;
  width: 22px;
  height: 22px;
  background: none;
  border-bottom: 1px solid var(--accent);
  border-left: 1px solid var(--accent);
  opacity: calc(0.7 * var(--ui-ornament));
  pointer-events: none;
}

body.ui-theme-artdeco .session-header::after {
  content: none;
}

@media (max-width: 600px) {
  body.ui-theme-artdeco .panel::before,
  body.ui-theme-artdeco .panel::after,
  body.ui-theme-artdeco .subpanel::before,
  body.ui-theme-artdeco .subpanel::after {
    width: 14px;
    height: 14px;
    top: 6px;
    right: 6px;
    bottom: 6px;
  }
}

body.ui-theme-artdeco .session-header,
body.ui-theme-artdeco .subpanel {
  padding: 1.05rem 1.15rem;
}

body.ui-theme-artdeco .session-header {
  justify-content: space-between;
  align-items: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 20%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 26px),
    color-mix(in srgb, var(--surface-panel) 90%, transparent);
}

body.ui-theme-artdeco h2,
body.ui-theme-artdeco h3,
body.ui-theme-artdeco h4 {
  font-family: var(--user-font-title);
  font-weight: 400;
  letter-spacing: 0.03em;
}

body.ui-theme-artdeco .session-header h2,
body.ui-theme-artdeco .panel > h2,
body.ui-theme-artdeco .subpanel > h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  margin: 0;
  padding-right: 0.25rem;
}

body.ui-theme-artdeco .session-header h2::after,
body.ui-theme-artdeco .panel > h2::after,
body.ui-theme-artdeco .subpanel > h3::after {
  content: "";
  flex: 1;
  min-width: 80px;
  height: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 72%, transparent), color-mix(in srgb, var(--accent) 20%, transparent)) left center / calc(100% - 22px) 1px no-repeat,
    linear-gradient(45deg, transparent 42%, color-mix(in srgb, var(--accent) 94%, transparent) 42% 58%, transparent 58%) right center / 10px 10px no-repeat;
}

/* Annuler le diviseur sur les h2 à l'intérieur des flashcards */
body.ui-theme-artdeco .flashcard-review-card h2::after,
body.ui-theme-artdeco .flashcard-front h2::after,
body.ui-theme-artdeco .flashcard-back h2::after,
body.ui-theme-artdeco .flash-face h2::after {
  content: none;
  display: none;
}

body.ui-theme-artdeco .auth-tabs,
body.ui-theme-artdeco .admin-tabs {
  gap: 0;
  margin-bottom: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

body.ui-theme-artdeco .auth-tabs .tab-btn,
body.ui-theme-artdeco .admin-tabs .tab-btn {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  background: transparent;
}

body.ui-theme-artdeco .auth-tabs .tab-btn:first-child,
body.ui-theme-artdeco .admin-tabs .tab-btn:first-child {
  border-left: 0;
}

body.ui-theme-artdeco .auth-tabs .tab-btn.active,
body.ui-theme-artdeco .admin-tabs .tab-btn.active {
  background: color-mix(in srgb, var(--accent) 3%, transparent);
}

body.ui-theme-artdeco .single-auth-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  gap: 0.9rem 1rem;
  padding-top: 1.1rem;
}

body.ui-theme-artdeco .single-auth-form h3,
body.ui-theme-artdeco .single-auth-form .hint,
body.ui-theme-artdeco .single-auth-form .inline-actions,
body.ui-theme-artdeco .single-auth-form input:nth-of-type(3),
body.ui-theme-artdeco .single-auth-form input:nth-of-type(4),
body.ui-theme-artdeco .single-auth-form input:nth-of-type(5) {
  grid-column: 1 / -1;
}

body.ui-theme-artdeco .single-auth-form h3 {
  font-size: 2.25rem;
  margin-bottom: 0.1rem;
}

body.ui-theme-artdeco label,
body.ui-theme-artdeco .field-group label {
  color: color-mix(in srgb, var(--accent) 82%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

body.ui-theme-artdeco input,
body.ui-theme-artdeco select,
body.ui-theme-artdeco textarea {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 0;
  background-color: transparent;
  color: var(--text);
  padding: 0.55rem 0.15rem 0.65rem;
  font-family: var(--user-font-body);
  font-size: 1.25rem;
  box-shadow: none;
}

body.ui-theme-artdeco select {
  background-image:
    linear-gradient(45deg, transparent 50%, color-mix(in srgb, var(--accent) 92%, transparent) 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 92%, transparent) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 10px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
}

body.ui-theme-artdeco input::placeholder,
body.ui-theme-artdeco textarea::placeholder {
  color: color-mix(in srgb, var(--text) 54%, transparent);
  font-style: italic;
}

body.ui-theme-artdeco input:focus,
body.ui-theme-artdeco select:focus,
body.ui-theme-artdeco textarea:focus {
  outline: none;
  border-bottom-color: color-mix(in srgb, var(--accent) 86%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 86%, transparent);
}

body.ui-theme-artdeco .hint,
body.ui-theme-artdeco .message {
  color: color-mix(in srgb, var(--text) 66%, transparent);
  font-family: var(--user-font-body);
  font-size: 1rem;
}

body.ui-theme-artdeco .message.success {
  color: color-mix(in srgb, var(--accent) 96%, transparent);
}

body.ui-theme-artdeco .message.error {
  color: color-mix(in srgb, var(--metric-risk) 92%, transparent);
}

body.ui-theme-artdeco .inline-actions {
  gap: 0.65rem;
}

/* Exception buttons — no gold outline, keep subtle/transparent */
body.ui-theme-artdeco button.icon-button,
body.ui-theme-artdeco button.appearance-palette-chip,
body.ui-theme-artdeco button.menu-toggle {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

body.ui-theme-artdeco button.icon-button:hover,
body.ui-theme-artdeco button.appearance-palette-chip:hover,
body.ui-theme-artdeco button.menu-toggle:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  color: var(--text);
  border-color: transparent;
}

body.ui-theme-artdeco #authSubmitBtn,
body.ui-theme-artdeco #flashcardKnownBtn,
body.ui-theme-artdeco .button-link.primary,
body.ui-theme-artdeco button.primary {
  background: linear-gradient(180deg, rgba(235, 174, 72, 0.96), rgba(175, 114, 24, 0.96));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 95%, transparent);
}

body.ui-theme-artdeco #authSubmitBtn:hover,
body.ui-theme-artdeco #flashcardKnownBtn:hover,
body.ui-theme-artdeco .button-link.primary:hover,
body.ui-theme-artdeco button.primary:hover {
  color: var(--bg);
  background: linear-gradient(180deg, rgba(244, 189, 91, 0.98), rgba(189, 126, 28, 0.98));
}

body.ui-theme-artdeco .learner-action-hub,
body.ui-theme-artdeco .learner-action-card,
body.ui-theme-artdeco #learningDecisionPanel,
body.ui-theme-artdeco #flashcardsSummaryPanel,
body.ui-theme-artdeco #contentQualityPanel,
body.ui-theme-artdeco #sessionDetailCard {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 20%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    color-mix(in srgb, var(--surface-panel) 78%, transparent);
}

body.ui-theme-artdeco .kpi-grid {
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

body.ui-theme-artdeco .kpi {
  min-height: 118px;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 26%),
    color-mix(in srgb, var(--text) 5%, transparent);
  padding: 1.05rem 1rem;
}

body.ui-theme-artdeco .kpi:last-child {
  border-right: 0;
}

body.ui-theme-artdeco .kpi span {
  font-family: var(--user-font-eyebrow);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

body.ui-theme-artdeco .kpi b {
  margin-top: 0.35rem;
  font-family: var(--user-font-title);
  font-size: clamp(2rem, 3vw, 3.1rem);
  font-weight: 400;
  color: color-mix(in srgb, var(--accent) 95%, transparent);
}

body.ui-theme-artdeco .admin-pilotage-kpi-grid .kpi b,
body.ui-theme-artdeco #learningDecisionPanel .kpi b,
body.ui-theme-artdeco #resultsLearningDecisionPanel .kpi b,
body.ui-theme-artdeco #resultsForecastPanel .kpi b {
  font-size: clamp(1.25rem, 1.9vw, 2.05rem);
  line-height: 1.05;
}

body.ui-theme-artdeco #learningDecisionPanel .kpi span,
body.ui-theme-artdeco #resultsLearningDecisionPanel .kpi span,
body.ui-theme-artdeco #resultsForecastPanel .kpi span,
body.ui-theme-artdeco .admin-pilotage-kpi-grid .kpi span {
  font-size: 0.66rem;
}

body.ui-theme-artdeco #learningDecisionPanel .kpi,
body.ui-theme-artdeco #resultsLearningDecisionPanel .kpi,
body.ui-theme-artdeco #resultsForecastPanel .kpi,
body.ui-theme-artdeco .admin-pilotage-kpi-grid .kpi {
  align-content: start;
}

body.ui-theme-artdeco .table,
body.ui-theme-artdeco .flashcards-analytics-table {
  border-collapse: collapse;
  background: transparent;
}

body.ui-theme-artdeco .table th,
body.ui-theme-artdeco .table td {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: transparent;
  padding: 0.8rem 0.7rem;
}

body.ui-theme-artdeco .table th {
  color: color-mix(in srgb, var(--accent) 88%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

body.ui-theme-artdeco .table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

body.ui-theme-artdeco #quizConfidenceWrap,
body.ui-theme-artdeco .feedback {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--surface-panel) 72%, transparent);
}

body.ui-theme-artdeco .flashcard-review-card {
  padding: 1.55rem 1.35rem 1.2rem;
}

body.ui-theme-artdeco .flashcard-front,
body.ui-theme-artdeco .flashcard-back {
  min-height: 260px;
  padding: 2rem 2.2rem;
  border-radius: 0;
  text-align: center;
  place-items: center;
  font-family: var(--user-font-body);
  font-size: clamp(1.6rem, 2.6vw, 3.1rem);
  line-height: 1.2;
}

body.ui-theme-artdeco .flashcard-front::before,
body.ui-theme-artdeco .flashcard-back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 10px;
  transform: translate(-50%, -140px);
  background:
    linear-gradient(90deg, transparent 0 18px, color-mix(in srgb, var(--accent) 92%, transparent) 18px 22px, transparent 22px 100%),
    linear-gradient(180deg, transparent 0 4px, color-mix(in srgb, var(--accent) 80%, transparent) 4px 6px, transparent 6px 100%);
  opacity: 0.9;
}

body.ui-theme-artdeco .flashcard-front::after,
body.ui-theme-artdeco .flashcard-back::after {
  content: "Question";
  position: absolute;
  top: calc(50% - 122px);
  left: 50%;
  transform: translateX(-50%);
  color: color-mix(in srgb, var(--accent) 78%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.88rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

body.ui-theme-artdeco .flashcard-review-card.is-revealed .flashcard-back::after {
  content: "Réponse";
}

body.ui-theme-artdeco #flashcardsQueuePanel .hint {
  text-align: center;
  letter-spacing: 0.04em;
}

body.ui-theme-artdeco .screen-options-panel,
body.ui-theme-artdeco .learning-filter-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 20%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    color-mix(in srgb, var(--surface-panel) 96%, transparent);
}

body.ui-theme-artdeco .menu-toggle {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

@media (max-width: 920px) {
  body.ui-theme-artdeco .header-top {
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: stretch;
    gap: 0.35rem;
  }

  body.ui-theme-artdeco .app-header {
    display: block;
    padding: 0.7rem 0.8rem 0.8rem;
    min-height: 0;
    height: auto;
    /* overflow: hidden retiré — clippe le nav fixe via le containing-block créé par backdrop-filter */
    overflow: visible;
  }

  body.ui-theme-artdeco .header-branding {
    min-width: 0;
  }

  body.ui-theme-artdeco .header-top h1 {
    width: 100%;
    margin: 0;
    padding: 0 0 0 3.15rem;
    text-align: left;
  }

  body.ui-theme-artdeco .title-link {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.55rem;
  }

  body.ui-theme-artdeco .brand-mark-shell {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
  }

  body.ui-theme-artdeco .brand-logo {
    width: 24px;
    height: 24px;
  }

  body.ui-theme-artdeco .brand-copy {
    min-width: 0;
    width: auto;
  }

  body.ui-theme-artdeco .brand-name {
    font-size: clamp(1.1rem, 8vw, 2.1rem);
    line-height: 0.98;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.ui-theme-artdeco .brand-kicker {
    font-size: 0.54rem;
    letter-spacing: 0.18em;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.ui-theme-artdeco .header-top p {
    display: none !important;
  }

  body.ui-theme-artdeco .menu-toggle {
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
  }

  body.ui-theme-artdeco .app-theme-header-control {
    display: none !important;
  }

  body.ui-theme-artdeco .global-nav {
    justify-content: flex-start;
    margin-top: 0;
    border-top: 0;
    padding-top: 0.7rem;
  }

  body.ui-theme-artdeco .install-banner,
  body.ui-theme-artdeco .impersonation-banner {
    margin-top: 0.55rem;
    padding: 0.55rem 0.65rem;
    gap: 0.45rem;
  }

  body.ui-theme-artdeco .install-banner-copy,
  body.ui-theme-artdeco .install-banner-actions {
    width: 100%;
  }

  body.ui-theme-artdeco .install-banner-actions {
    justify-content: flex-start;
  }

  body.ui-theme-artdeco .install-banner-actions button,
  body.ui-theme-artdeco .impersonation-banner #stopImpersonationBtn {
    min-height: 38px;
    font-size: 0.88rem;
  }

  body.ui-theme-artdeco .single-auth-form {
    grid-template-columns: 1fr;
  }

  body.ui-theme-artdeco .single-auth-form h3,
  body.ui-theme-artdeco .single-auth-form .hint,
  body.ui-theme-artdeco .single-auth-form .inline-actions,
  body.ui-theme-artdeco .single-auth-form input:nth-of-type(3),
  body.ui-theme-artdeco .single-auth-form input:nth-of-type(4),
  body.ui-theme-artdeco .single-auth-form input:nth-of-type(5) {
    grid-column: auto;
  }

  body.ui-theme-artdeco .flashcard-front,
  body.ui-theme-artdeco .flashcard-back {
    min-height: 220px;
    padding: 1.5rem 1.25rem;
    font-size: clamp(1.35rem, 5vw, 2.2rem);
  }
}

/* Mobile nav drawer — rules moved to css/layout/app.css */


/* ============================================================
   ART DECO QUIZ PASS -- closer to the question panel reference
   ============================================================ */

body.ui-theme-artdeco #quizScreen {
  padding: 1.15rem 1.15rem 1.35rem;
}

body.ui-theme-artdeco #quizScreen::before,
body.ui-theme-artdeco #quizScreen::after,
body.ui-theme-artdeco #quizScreen > .session-header::before,
body.ui-theme-artdeco #quizScreen > .session-header::after {
  content: none;
}

body.ui-theme-artdeco #quizScreen > .session-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.55rem;
  padding: 1rem 1.2rem 0.95rem;
}

body.ui-theme-artdeco #quizScreen #quizTitle {
  color: color-mix(in srgb, var(--accent) 92%, transparent);
  font-family: var(--user-font-title);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  letter-spacing: 0.04em;
}

body.ui-theme-artdeco #quizScreen #questionProgress {
  justify-self: end;
  color: var(--muted);
  font-family: var(--user-font-eyebrow);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

body.ui-theme-artdeco #quizScreen #quizTimer {
  margin: 0.15rem 0 0.35rem;
  text-align: right;
  color: var(--muted);
  font-family: var(--user-font-eyebrow);
  font-size: 0.92rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.ui-theme-artdeco #quizScreen .progress-wrap {
  height: 2px;
  margin: 0.2rem 0 1.15rem;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

body.ui-theme-artdeco #quizScreen .progress-bar {
  background: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--accent) 96%, transparent) 100%);
}

body.ui-theme-artdeco #quizScreen .progress-bar::after {
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: color-mix(in srgb, var(--accent) 96%, transparent);
}

body.ui-theme-artdeco #quizConfidenceWrap {
  margin: 0 0 1.2rem;
  padding: 0.75rem 0.95rem;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-panel) 76%, transparent), color-mix(in srgb, var(--surface-panel) 72%, transparent));
}

body.ui-theme-artdeco #quizConfidenceWrap label {
  margin: 0;
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
}

body.ui-theme-artdeco #quizConfidenceRange {
  accent-color: var(--accent);
}

body.ui-theme-artdeco #quizConfidenceValue {
  min-width: 3ch;
  text-align: right;
  color: color-mix(in srgb, var(--text) 86%, transparent);
}

body.ui-theme-artdeco #questionText {
  max-width: 1180px;
  margin: 1rem auto 1.55rem;
  padding: 1.35rem 1.2rem 0.35rem;
  text-align: center;
  font-family: var(--user-font-body);
  font-size: clamp(2rem, 3.4vw, 4rem);
  font-weight: 500;
  line-height: 1.18;
  color: var(--text);
}

body.ui-theme-artdeco .options {
  gap: 0.88rem;
  margin-top: 0.45rem;
}

body.ui-theme-artdeco .option-btn {
  min-height: 82px;
  padding: 1rem 1.15rem 1rem 5.2rem;
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-family: var(--user-font-body);
  font-size: 1.18rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}

body.ui-theme-artdeco .option-btn::before {
  left: 1rem;
  top: 50%;
  bottom: auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 72%, transparent);
  background: transparent;
  transform: translateY(-50%) rotate(45deg);
  opacity: 1;
}

body.ui-theme-artdeco .option-btn::after {
  content: "";
  position: absolute;
  left: 4.2rem;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

body.ui-theme-artdeco .option-btn:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}

body.ui-theme-artdeco .option-btn.correct {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

body.ui-theme-artdeco .option-btn.wrong {
  border-color: color-mix(in srgb, var(--danger) 56%, transparent);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

body.ui-theme-artdeco .option-btn.is-picked {
  box-shadow:
    0 20px 34px -28px rgba(0, 0, 0, 0.72),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent);
}

body.ui-theme-artdeco .option-btn.is-resolved.correct {
  box-shadow:
    0 20px 40px -28px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

body.ui-theme-artdeco .option-btn.is-resolved.wrong {
  box-shadow:
    0 18px 34px -28px color-mix(in srgb, var(--danger) 50%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--danger) 20%, transparent);
}

body.ui-theme-artdeco .flashcard-review-card.is-review-success {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent),
    0 24px 44px -34px color-mix(in srgb, var(--accent) 48%, transparent);
}

body.ui-theme-artdeco .flashcard-review-card.is-review-fail {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--danger) 26%, transparent),
    0 24px 44px -34px color-mix(in srgb, var(--danger) 42%, transparent);
}

@keyframes quiz-answer-correct {
  0% { transform: scale(1); }
  45% { transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1); }
}

@keyframes quiz-answer-wrong {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

@keyframes flashcard-review-success {
  0% { transform: scale(1); }
  45% { transform: scale(1.018); }
  100% { transform: scale(1); }
}

@keyframes flashcard-review-fail {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  45% { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

body.ui-theme-artdeco #feedback {
  margin-top: 1rem;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 16%, transparent);
  background: color-mix(in srgb, var(--surface-panel) 74%, transparent);
  color: color-mix(in srgb, var(--text) 86%, transparent);
}

body.ui-theme-artdeco #questionFeedbackForm {
  margin-top: 1rem;
}

body.ui-theme-artdeco #quizScreen .controls {
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.35rem;
}

body.ui-theme-artdeco #sendQuestionFeedbackBtn,
body.ui-theme-artdeco #nextBtn {
  min-width: 170px;
}

body.ui-theme-artdeco #nextBtn {
  margin-left: auto;
  padding-inline: 2rem;
  background: linear-gradient(180deg, rgba(235, 174, 72, 0.96), rgba(175, 114, 24, 0.96));
  color: var(--bg);
  border-color: color-mix(in srgb, var(--accent) 96%, transparent);
}

body.ui-theme-artdeco #nextBtn:hover {
  background: linear-gradient(180deg, rgba(244, 189, 91, 0.98), rgba(189, 126, 28, 0.98));
  color: var(--bg);
}

@media (max-width: 920px) {
  body.ui-theme-artdeco #quizScreen > .session-header {
    grid-template-columns: 1fr;
  }

  body.ui-theme-artdeco #quizScreen #questionProgress,
  body.ui-theme-artdeco #quizScreen #quizTimer {
    justify-self: start;
    text-align: left;
  }

  body.ui-theme-artdeco #questionText {
    padding-inline: 0.35rem;
    font-size: clamp(1.6rem, 7vw, 2.55rem);
  }

  body.ui-theme-artdeco .option-btn {
    min-height: 74px;
    padding-left: 4.55rem;
    font-size: 1.04rem;
  }

  body.ui-theme-artdeco .option-btn::after {
    left: 3.8rem;
  }

  body.ui-theme-artdeco #quizScreen .controls {
    flex-direction: column;
    align-items: stretch;
  }

  body.ui-theme-artdeco #nextBtn {
    margin-left: 0;
  }
}

/* ============================================================
   ART DECO RESULTS PASS -- statement / report language
   ============================================================ */

body.ui-theme-artdeco #resultsScreen {
  padding: 1.15rem 1.15rem 1.35rem;
}

body.ui-theme-artdeco #resultsScreen > .session-header {
  margin-bottom: 1rem;
}

body.ui-theme-artdeco #resultsStatsFilters {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.55rem 0.8rem;
  align-items: end;
  margin: 0 0 0.65rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 22%),
    color-mix(in srgb, var(--text) 2%, transparent);
}

body.ui-theme-artdeco #resultsStatsFilters label {
  margin: 0 0 0.22rem;
}

body.ui-theme-artdeco #resultsStatsFilters > button {
  align-self: end;
}

body.ui-theme-artdeco #resultsViewHint {
  margin: 0 0 0.7rem;
}

body.ui-theme-artdeco .results-analytics-tabs {
  gap: 0;
  margin: 0.8rem 0 1rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

body.ui-theme-artdeco .results-analytics-tabs .tab-btn {
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
  min-width: 170px;
}

body.ui-theme-artdeco .results-analytics-tabs .tab-btn:first-child {
  border-left: 0;
}

body.ui-theme-artdeco .results-hero-kpis {
  padding: 0;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 26%),
    color-mix(in srgb, var(--text) 4%, transparent);
}

body.ui-theme-artdeco .metabox {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 1%, transparent), transparent 22%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    color-mix(in srgb, var(--surface-panel) 66%, transparent);
}

body.ui-theme-artdeco .metabox-header {
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: color-mix(in srgb, var(--text) 1%, transparent);
}

body.ui-theme-artdeco .metabox-header h3 {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font-family: var(--user-font-title);
  font-size: clamp(1.45rem, 2vw, 2.15rem);
  font-weight: 400;
  letter-spacing: 0.03em;
}

body.ui-theme-artdeco .metabox-header h3::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
}

body.ui-theme-artdeco .metabox-badge {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 0;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, transparent);
  font-family: var(--user-font-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

body.ui-theme-artdeco .metabox-body {
  padding: 1.05rem 1.1rem 1.2rem;
}

body.ui-theme-artdeco .results-bottom-grid {
  gap: 1rem;
  align-items: start;
}

body.ui-theme-artdeco .results-bottom-main,
body.ui-theme-artdeco .results-bottom-side {
  padding: 0;
  background: transparent;
}

body.ui-theme-artdeco #resultsHierarchyPanel,
body.ui-theme-artdeco #resultsDifficultyPanel,
body.ui-theme-artdeco #resultsForecastPanel,
body.ui-theme-artdeco #activityHeatmapPanel,
body.ui-theme-artdeco #hourlyPerformancePanel,
body.ui-theme-artdeco #recurringErrorsPanel,
body.ui-theme-artdeco #targetedRevisionPanel,
body.ui-theme-artdeco #personalObjectivePanel,
body.ui-theme-artdeco #retentionCurvePanel,
body.ui-theme-artdeco #plateauDetectionPanel,
body.ui-theme-artdeco #examSimulationPanel,
body.ui-theme-artdeco #nextDeckPanel,
body.ui-theme-artdeco #resultsSessionSummaryPanel,
body.ui-theme-artdeco #sessionDetailCard {
  min-height: 180px;
}

body.ui-theme-artdeco #resultsScreen h3:not(.metabox-header h3) {
  margin-top: 0.9rem;
  margin-bottom: 0.45rem;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
}

body.ui-theme-artdeco #resultsScreen h4 {
  color: color-mix(in srgb, var(--accent) 88%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.84rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
}

body.ui-theme-artdeco #resultsScreen #rankingTable,
body.ui-theme-artdeco #resultsScreen #historyChart,
body.ui-theme-artdeco #resultsScreen #subjectsChart,
body.ui-theme-artdeco #resultsScreen #timelineChart,
body.ui-theme-artdeco #resultsScreen #scoreDistribution,
body.ui-theme-artdeco #resultsScreen #resultsProgressThemesChart,
body.ui-theme-artdeco #resultsScreen #resultsProgressDifficultyPanel,
body.ui-theme-artdeco #resultsScreen #themesChart,
body.ui-theme-artdeco #resultsScreen #accuracyChart,
body.ui-theme-artdeco #resultsScreen #resultsLearningDecisionPanel {
  padding: 1rem 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  background: color-mix(in srgb, var(--text) 2%, transparent);
}

body.ui-theme-artdeco #resultsScreen .inline-actions[style*="margin-bottom:0.75rem"],
body.ui-theme-artdeco #resultsScreen .inline-actions[style*="margin-bottom:0.5rem"] {
  gap: 0.6rem;
}

body.ui-theme-artdeco #resultsScreen #sessionNavigatorLabel {
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-family: var(--user-font-body);
  font-size: 1.08rem;
}

body.ui-theme-artdeco #resultsScreen #playAgainBtn {
  margin-top: 1rem;
  min-width: 260px;
}

@media (max-width: 1180px) {
  body.ui-theme-artdeco #resultsStatsFilters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.ui-theme-artdeco #resultsStatsFilters {
    grid-template-columns: 1fr;
  }

  body.ui-theme-artdeco .results-analytics-tabs .tab-btn {
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ============================================================
   ART DECO AUTH PASS -- ceremonial entry screen
   ============================================================ */

body.ui-theme-artdeco #authScreen {
  padding: 1.2rem 1.25rem 1.35rem;
}

body.ui-theme-artdeco #authScreen > .session-header {
  margin-bottom: 1rem;
}

body.ui-theme-artdeco #authScreen .auth-tabs {
  margin: 0 0 1rem;
}

body.ui-theme-artdeco #authForm.single-auth-form {
  position: relative;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 0.95rem 1.2rem;
  align-items: start;
}

body.ui-theme-artdeco #authForm.single-auth-form::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: calc(36% - 0.6rem);
  bottom: 1.2rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 14%, transparent), transparent);
  pointer-events: none;
}

body.ui-theme-artdeco #authFormTitle {
  grid-column: 1;
  margin: 0.1rem 0 0.2rem;
}

body.ui-theme-artdeco #authFormTitle + input {
  margin-top: 0.1rem;
}

body.ui-theme-artdeco #authHint {
  margin-top: -0.15rem;
  color: color-mix(in srgb, var(--text) 60%, transparent);
  font-style: italic;
}

body.ui-theme-artdeco #authForm .inline-actions {
  margin-top: 0.2rem;
}

body.ui-theme-artdeco #authForm::before {
  content: "Le cercle JESF";
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  color: color-mix(in srgb, var(--accent) 72%, transparent);
  font-family: var(--user-font-eyebrow);
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  padding-top: 0.55rem;
}

body.ui-theme-artdeco #authForm::marker {
  content: none;
}

body.ui-theme-artdeco #authForm > input:nth-of-type(1),
body.ui-theme-artdeco #authForm > input:nth-of-type(2),
body.ui-theme-artdeco #authForm > input:nth-of-type(3),
body.ui-theme-artdeco #authForm > input:nth-of-type(4),
body.ui-theme-artdeco #authForm > input:nth-of-type(5),
body.ui-theme-artdeco #authForm > .hint,
body.ui-theme-artdeco #authForm > .inline-actions {
  grid-column: 1;
}

body.ui-theme-artdeco #authForm .auth-login-actions {
  justify-content: flex-start;
}

body.ui-theme-artdeco #authForm .auth-login-actions > button {
  min-width: 190px;
}

body.ui-theme-artdeco #authScreen::after {
  content: "";
  position: absolute;
  top: 0;
  right: 2.15rem;
  width: min(32%, 360px);
  bottom: 2.25rem;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 1%, transparent), transparent 18%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 22px),
    color-mix(in srgb, var(--surface-panel) 48%, transparent);
  pointer-events: none;
}

body.ui-theme-artdeco #authMessage {
  margin-top: 0.65rem;
}

@media (max-width: 1100px) {
  body.ui-theme-artdeco #authScreen::after,
  body.ui-theme-artdeco #authForm.single-auth-form::after,
  body.ui-theme-artdeco #authForm::before {
    display: none;
  }

  body.ui-theme-artdeco #authForm.single-auth-form {
    grid-template-columns: 1fr;
  }

  body.ui-theme-artdeco #authForm > input:nth-of-type(1),
  body.ui-theme-artdeco #authForm > input:nth-of-type(2) {
    grid-column: 1;
  }
}

/* ============================================================
   ART DECO GLOBAL CONTROLS PASS -- unified interaction language
   ============================================================ */

body.ui-theme-artdeco button,
body.ui-theme-artdeco .button-link {
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

body.ui-theme-artdeco button:focus-visible,
body.ui-theme-artdeco .button-link:focus-visible,
body.ui-theme-artdeco input:focus-visible,
body.ui-theme-artdeco select:focus-visible,
body.ui-theme-artdeco textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

body.ui-theme-artdeco button.secondary,
body.ui-theme-artdeco .button-link.secondary,
body.ui-theme-artdeco .screen-options-btn,
body.ui-theme-artdeco #playAgainBtn,
body.ui-theme-artdeco #loadFlashcardsResultsDashboardBtn,
body.ui-theme-artdeco #loadFlashcardsDashboardBtn,
body.ui-theme-artdeco #generateFlashcardsBtn {
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: color-mix(in srgb, var(--text) 84%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
}

body.ui-theme-artdeco button.secondary:hover,
body.ui-theme-artdeco .button-link.secondary:hover,
body.ui-theme-artdeco .screen-options-btn:hover,
body.ui-theme-artdeco #playAgainBtn:hover,
body.ui-theme-artdeco #loadFlashcardsResultsDashboardBtn:hover,
body.ui-theme-artdeco #loadFlashcardsDashboardBtn:hover,
body.ui-theme-artdeco #generateFlashcardsBtn:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}

body.ui-theme-artdeco button:disabled,
body.ui-theme-artdeco .button-link:disabled {
  opacity: 0.48;
  border-color: color-mix(in srgb, var(--text) 8%, transparent);
  color: color-mix(in srgb, var(--text) 38%, transparent);
  background: color-mix(in srgb, var(--text) 2%, transparent);
  transform: none;
}

body.ui-theme-artdeco .icon-button {
  min-width: 2.8rem;
  min-height: 2.8rem;
  border-radius: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--text) 2%, transparent);
  color: color-mix(in srgb, var(--accent) 92%, transparent);
}

body.ui-theme-artdeco .icon-button:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

body.ui-theme-artdeco input[type="date"],
body.ui-theme-artdeco input[type="email"],
body.ui-theme-artdeco input[type="password"],
body.ui-theme-artdeco input[type="number"],
body.ui-theme-artdeco input[type="text"],
body.ui-theme-artdeco select,
body.ui-theme-artdeco textarea {
  min-height: 42px;
}

body.ui-theme-artdeco textarea {
  min-height: 120px;
  resize: vertical;
}

body.ui-theme-artdeco input[type="range"] {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

body.ui-theme-artdeco input[type="checkbox"],
body.ui-theme-artdeco input[type="radio"] {
  accent-color: var(--accent);
}

body.ui-theme-artdeco .field-group,
body.ui-theme-artdeco .inline-actions,
body.ui-theme-artdeco .controls {
  position: relative;
}

body.ui-theme-artdeco .screen-options-panel h4,
body.ui-theme-artdeco .appearance-grid-editorial .field-group label,
body.ui-theme-artdeco .appearance-control-stack .field-group label,
body.ui-theme-artdeco .screen-options-grid label {
  font-family: var(--user-font-eyebrow);
}

body.ui-theme-artdeco .screen-options-grid label {
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: none;
}

body.ui-theme-artdeco .screen-options-hint {
  color: color-mix(in srgb, var(--text) 56%, transparent);
  font-family: var(--user-font-body);
}

body.ui-theme-artdeco .feedback,
body.ui-theme-artdeco .notify-optin,
body.ui-theme-artdeco .install-banner,
body.ui-theme-artdeco .impersonation-banner {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

body.ui-theme-artdeco .notify-optin,
body.ui-theme-artdeco .install-banner,
body.ui-theme-artdeco .impersonation-banner {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 24%),
    color-mix(in srgb, var(--bg) 92%, transparent);
}

body.ui-theme-artdeco .pwa-education-card {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent 24%),
    color-mix(in srgb, var(--bg) 88%, transparent);
  box-shadow: none;
}

body.ui-theme-artdeco .pwa-education-card h4 {
  font-family: var(--user-font-title);
  font-weight: 500;
  letter-spacing: 0.045em;
}

body.ui-theme-artdeco .pwa-education-steps li {
  border-radius: 0;
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
  background: color-mix(in srgb, var(--bg) 34%, transparent);
}

body.ui-theme-artdeco .pwa-education-steps li::before {
  border-radius: 0;
  color: var(--gold);
}

body.ui-theme-artdeco .help-with-tooltip,
body.ui-theme-artdeco .kpi-tooltip,
body.ui-theme-artdeco .kpi-help {
  color: inherit;
}

body.ui-theme-artdeco .appearance-shell,
body.ui-theme-artdeco .screen-options-panel,
body.ui-theme-artdeco .notify-optin,
body.ui-theme-artdeco .install-banner {
  box-shadow: none;
}


/* ---- A9. Footer Art Déco ---- */
body.ui-theme-artdeco .app-footer {
  align-items: center;
  justify-content: center;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--user-font-eyebrow);
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 35%, transparent);
  padding-top: 1rem;
  position: relative;
}
body.ui-theme-artdeco .app-footer::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 0.6rem;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 40%, transparent) 30%, color-mix(in srgb, var(--accent) 40%, transparent) 70%, transparent);
  opacity: var(--ui-ornament);
}


/* ---- B3 Art Déco : le flip 3D est géré par .flashcard-3d.flipped (base session.css) ---- */
/* Ne pas dupliquer le mécanisme sur .flashcard-review-card — double-flip = texte miroir */
body.ui-theme-artdeco .flash-stage {
  perspective: 1600px;
}
body.ui-theme-artdeco .flashcard-review-card {
  min-height: 300px;
  position: relative;
  /* transform-style et transition retirés : le flip est sur .flashcard-3d, pas ici */
}
body.ui-theme-artdeco .flashcard-review-card.is-revealed {
  transform: none; /* pas de flip supplémentaire */
}

/* Final structural reset: use the shared auth/header markup, not legacy Art Deco pseudo-columns. */
@media (min-width: 861px) {
  body.ui-theme-artdeco #authScreen .auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr) !important;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: stretch;
  }

  body.ui-theme-artdeco #authScreen .auth-side {
    display: block;
  }
}

body.ui-theme-artdeco #authForm.single-auth-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.ui-theme-artdeco #authForm.single-auth-form::before,
body.ui-theme-artdeco #authForm.single-auth-form::after,
body.ui-theme-artdeco #authScreen::after {
  content: none !important;
  display: none !important;
}

body.ui-theme-artdeco #authForm.single-auth-form h3,
body.ui-theme-artdeco #authForm.single-auth-form .hint,
body.ui-theme-artdeco #authForm.single-auth-form .inline-actions,
body.ui-theme-artdeco #authForm.single-auth-form input:nth-of-type(3),
body.ui-theme-artdeco #authForm.single-auth-form input:nth-of-type(4),
body.ui-theme-artdeco #authForm.single-auth-form input:nth-of-type(5) {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  body.ui-theme-artdeco #authForm.single-auth-form {
    grid-template-columns: 1fr;
  }
}
/* Masquer le texte brut (hors faces) en Art Déco — la face porte le contenu */
body.ui-theme-artdeco .flashcard-review-card .flashcard-front,
body.ui-theme-artdeco .flashcard-review-card .flashcard-back {
  /* Styles définis via .flash-text et .flash-body, hérités de la face */
}

/* Final Art Deco composition pass: align auth/home structure with the designer mockup. */
body.ui-theme-artdeco .app-header {
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  box-shadow: none;
  padding: 1.75rem 0 0.875rem;
}

body.ui-theme-artdeco .app-header::before {
  content: none;
}

body.ui-theme-artdeco .app-header::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  width: auto;
  margin: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 72%, transparent) 20%, color-mix(in srgb, var(--accent) 72%, transparent) 80%, transparent);
}

body.ui-theme-artdeco .header-top {
  min-width: 0;
}

body.ui-theme-artdeco .header-branding {
  align-items: center;
}

body.ui-theme-artdeco .brand-mark-shell {
  width: 56px;
  height: 56px;
  flex-basis: 56px;
}

body.ui-theme-artdeco .brand-kicker {
  display: none;
}

body.ui-theme-artdeco .brand-name {
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  line-height: 0.95;
}

body.ui-theme-artdeco .header-branding p {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  letter-spacing: 0.32em;
}

body.ui-theme-artdeco .global-nav {
  border-top: 0;
  padding-top: 0;
  gap: 0.15rem;
}

body.ui-theme-artdeco .global-nav button {
  min-height: 2.5rem;
  padding: 0.65rem 0.85rem;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  letter-spacing: 0.28em;
  background: transparent;
}

body.ui-theme-artdeco .global-nav button:hover {
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  background: transparent;
  border-color: transparent;
  transform: none;
}

body.ui-theme-artdeco .global-nav button.active {
  border-top-color: color-mix(in srgb, var(--accent) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 92%, transparent);
}

body.ui-theme-artdeco #authScreen {
  margin-top: 1.875rem;
  padding: clamp(2rem, 4vw, 2.75rem);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), rgba(0, 0, 0, 0.12)),
    color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
}

body.ui-theme-artdeco #authScreen > .auth-screen-header {
  display: grid;
  justify-items: center;
  gap: 0.65rem;
  min-height: 0;
  margin: 0;
  padding: 0.5rem 0 2rem;
  text-align: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.ui-theme-artdeco #authScreen > .auth-screen-header::before {
  content: "";
  position: static;
  justify-self: center;
  width: 72px;
  height: 72px;
  margin-bottom: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--accent) 74%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 5px, color-mix(in srgb, var(--accent) 85%, transparent) 6px 7px, transparent 8px),
    radial-gradient(circle, transparent 0 17px, color-mix(in srgb, var(--accent) 72%, transparent) 18px 19px, transparent 20px),
    linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--accent) 75%, transparent) 47% 53%, transparent 54%),
    linear-gradient(90deg, transparent 46%, color-mix(in srgb, var(--accent) 75%, transparent) 47% 53%, transparent 54%);
  box-shadow: 0 0 0 12px transparent;
  opacity: calc(0.85 * var(--ui-ornament));
}

body.ui-theme-artdeco #authScreen > .auth-screen-header::after {
  content: "";
  width: min(320px, 70%);
  height: 11px;
  margin-top: 0.25rem;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 96%, transparent) 0 3px, transparent 4px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 88%, transparent) 30%, transparent 30% 42%, color-mix(in srgb, var(--accent) 88%, transparent) 42% 58%, transparent 58% 70%, color-mix(in srgb, var(--accent) 88%, transparent) 70%, transparent);
  opacity: calc(0.82 * var(--ui-ornament));
}

body.ui-theme-artdeco #authScreen > .auth-screen-header > div {
  display: grid;
  justify-items: center;
  gap: 0.45rem;
}

body.ui-theme-artdeco #authScreen .auth-screen-header .eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--accent) 96%, transparent);
}

body.ui-theme-artdeco #authScreen .auth-screen-header h2 {
  margin: 0;
  font-family: var(--user-font-title);
  font-size: clamp(3rem, 5.2vw, 4.65rem);
  line-height: 0.95;
  letter-spacing: 0;
}

body.ui-theme-artdeco #authForceUpdateBtn {
  position: absolute;
  top: 2.2rem;
  right: 2.2rem;
}

body.ui-theme-artdeco #authScreen .auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 2rem;
  border-top: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
}

body.ui-theme-artdeco #authScreen .auth-tabs::before,
body.ui-theme-artdeco #authScreen .auth-tabs::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 7px;
  background: color-mix(in srgb, var(--accent) 90%, transparent);
}

body.ui-theme-artdeco #authScreen .auth-tabs::before {
  top: -4px;
}

body.ui-theme-artdeco #authScreen .auth-tabs::after {
  bottom: -4px;
}

body.ui-theme-artdeco #authScreen .auth-tabs .tab-btn {
  min-height: 3.75rem;
  border: 0;
  border-left: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  background: transparent;
  font-size: 0.8rem;
  letter-spacing: 0.34em;
}

body.ui-theme-artdeco #authScreen .auth-tabs .tab-btn:first-child {
  border-left: 0;
}

body.ui-theme-artdeco #authScreen .auth-tabs .tab-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent);
}

@media (min-width: 901px) {
  body.ui-theme-artdeco #authScreen .auth-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 1fr) !important;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: stretch;
  }
}

body.ui-theme-artdeco #authForm.single-auth-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  min-height: 420px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.ui-theme-artdeco #authForm.single-auth-form h3 {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin: 0 0 0.4rem;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  line-height: 1;
}

body.ui-theme-artdeco #authForm.single-auth-form h3::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 3rem;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, transparent), transparent);
}

body.ui-theme-artdeco #authForm.single-auth-form input {
  grid-column: 1 / -1;
  min-height: 2.8rem;
  padding: 0.55rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  background: transparent;
  box-shadow: none;
}

body.ui-theme-artdeco #authForm.single-auth-form input:focus {
  border-bottom-color: color-mix(in srgb, var(--accent) 90%, transparent);
}

body.ui-theme-artdeco #authForm.single-auth-form .hint {
  margin: -0.4rem 0 0.35rem;
}

body.ui-theme-artdeco #authForm.single-auth-form .inline-actions {
  align-self: end;
  margin-top: 0.85rem;
}

body.ui-theme-artdeco #authForm.single-auth-form .inline-actions button {
  min-width: 13rem;
}

body.ui-theme-artdeco #authScreen .auth-side {
  min-height: 420px;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--tone-5) 8%, transparent), rgba(128, 0, 32, 0.08)),
    color-mix(in srgb, var(--text) 3%, transparent);
  position: relative;
  overflow: hidden;
}

body.ui-theme-artdeco #authScreen .auth-side::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  pointer-events: none;
}

body.ui-theme-artdeco #authScreen .auth-side-inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: start;
  min-height: 100%;
}

body.ui-theme-artdeco #authScreen .auth-brandmark {
  width: 112px;
  height: 112px;
  justify-self: end;
  align-self: end;
  margin: auto 0 0;
}

body.ui-theme-artdeco .app-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  body.ui-theme-artdeco #authScreen {
    padding: 1.25rem;
  }

  body.ui-theme-artdeco #authScreen > .auth-screen-header {
    padding-top: 0.5rem;
  }

  body.ui-theme-artdeco #authScreen .auth-screen-header h2 {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }

  body.ui-theme-artdeco #authForceUpdateBtn {
    top: 1rem;
    right: 1rem;
  }

  body.ui-theme-artdeco #authScreen .auth-tabs {
    grid-template-columns: 1fr;
  }

  body.ui-theme-artdeco #authScreen .auth-tabs .tab-btn {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  }

  body.ui-theme-artdeco #authForm.single-auth-form,
  body.ui-theme-artdeco #authScreen .auth-side {
    min-height: 0;
  }
}

/* ============================================================
   BUG FIXES — palette/thème incompatibilité + contraste
   ============================================================ */

/* Bug 3 — Contraste emerald+artdeco : panels quasi-invisibles sur fond vert profond */
body.ui-theme-artdeco.ui-palette-emerald .panel,
body.ui-theme-artdeco.ui-palette-emerald .subpanel,
body.ui-theme-artdeco.ui-palette-emerald .session-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 6%, transparent), transparent 24%),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 2%, transparent) 0 1px, transparent 1px 24px),
    color-mix(in srgb, var(--surface-panel) 92%, transparent);
}

/* Bug 4 — Logo brand-mark-shell : ne pas utiliser var(--bg) qui donne un fond ivoire sur palettes claires */
body.ui-theme-artdeco .brand-mark-shell {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface-panel) 80%, transparent);
}

/* Bug 5 — Onglets auth/admin actifs : renforcer l'indicateur doré */
body.ui-theme-artdeco .auth-tabs .tab-btn.active,
body.ui-theme-artdeco .admin-tabs .tab-btn.active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: color-mix(in srgb, var(--accent) 96%, transparent);
  position: relative;
}
body.ui-theme-artdeco .auth-tabs .tab-btn.active::after,
body.ui-theme-artdeco .admin-tabs .tab-btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in srgb, var(--accent) 82%, transparent);
}

/* ============================================================
   AUTH — empile verticalement sceau / eyebrow / titre / diviseur
   ============================================================ */

body.ui-theme-artdeco #authScreen .panel,
body.ui-theme-artdeco #authScreen .session-header {
  position: relative;
}

body.ui-theme-artdeco #authScreen .session-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  gap: 0.45rem;
  padding-top: 1.4rem;
}

/* Sceau / cible : enfant flex centré, pas absolute, pas float */
body.ui-theme-artdeco #authScreen .sunburst,
body.ui-theme-artdeco #authScreen .auth-sunburst,
body.ui-theme-artdeco #authScreen [class*="sunburst"] {
  order: 0 !important;
  position: static !important;
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  color: color-mix(in srgb, var(--accent) 92%, transparent);
}

/* Eyebrow "LE CERCLE JESF" */
body.ui-theme-artdeco #authScreen .session-header .eyebrow,
body.ui-theme-artdeco #authScreen .session-header .brand-kicker {
  order: 1 !important;
  margin: 0 auto !important;
  text-align: center;
}

/* Titre centré, sans divider asymétrique */
body.ui-theme-artdeco #authScreen .session-header h2,
body.ui-theme-artdeco #authScreen .panel > h2 {
  order: 2 !important;
  display: block !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  justify-content: center !important;
}

body.ui-theme-artdeco #authScreen .session-header h2::after,
body.ui-theme-artdeco #authScreen .panel > h2::after {
  content: none !important;
}

/* Diviseur centré sous le titre : ligne — losange — ligne */
body.ui-theme-artdeco #authScreen .session-header::after {
  content: "" !important;
  order: 3;
  display: block !important;
  width: min(360px, 60%);
  height: 14px;
  margin: 0.4rem auto 0 !important;
  background:
    linear-gradient(90deg,
      transparent 0%,
      color-mix(in srgb, var(--accent) 70%, transparent) 18%,
      color-mix(in srgb, var(--accent) 70%, transparent) 42%,
      transparent 50%,
      transparent 50%,
      color-mix(in srgb, var(--accent) 70%, transparent) 58%,
      color-mix(in srgb, var(--accent) 70%, transparent) 82%,
      transparent 100%
    ) center / 100% 1px no-repeat,
    linear-gradient(45deg,
      transparent 42%,
      color-mix(in srgb, var(--accent) 95%, transparent) 42% 58%,
      transparent 58%
    ) center / 12px 12px no-repeat;
}

/* Bouton refresh isolé en absolute */
body.ui-theme-artdeco #authScreen .session-header > .icon-button,
body.ui-theme-artdeco #authScreen .panel > .icon-button {
  position: absolute !important;
  top: 1rem;
  right: 1.1rem;
  margin: 0 !important;
}

/* ============================================================
   RÉSULTATS / ACCUEIL — graphes en 2 colonnes (panels frères)
   ============================================================ */

/* Conteneurs nommés qui regroupent des graphes */
body.ui-theme-artdeco #resultsScreen #resultsHierarchyPanel,
body.ui-theme-artdeco #resultsScreen .charts-row,
body.ui-theme-artdeco #homeScreen .charts-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

/* Grille 2 cols sur metabox-bd / panel-body (frères directs) */
body.ui-theme-artdeco #resultsScreen .metabox-bd,
body.ui-theme-artdeco #resultsScreen .panel-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  align-items: start;
}

/* Wrapper .two-col explicite (patch HTML) */
body.ui-theme-artdeco #resultsScreen .two-col,
body.ui-theme-artdeco #homeScreen .two-col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
}

/* SVG/canvas : contenus dans leur cellule */
body.ui-theme-artdeco #resultsScreen svg:not([width]),
body.ui-theme-artdeco #resultsScreen canvas,
body.ui-theme-artdeco #homeScreen svg:not([width]),
body.ui-theme-artdeco #homeScreen canvas {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 420px !important;
}

/* Textes / titres / tableaux : pleine largeur */
body.ui-theme-artdeco #resultsScreen .metabox-bd > h2,
body.ui-theme-artdeco #resultsScreen .metabox-bd > h3,
body.ui-theme-artdeco #resultsScreen .metabox-bd > h4,
body.ui-theme-artdeco #resultsScreen .metabox-bd > p,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .hint,
body.ui-theme-artdeco #resultsScreen .metabox-bd > table,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .table-wrap,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .full-width,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .inline-actions,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .kpi-grid,
body.ui-theme-artdeco #resultsScreen .metabox-bd > .kpi-row {
  grid-column: 1 / -1;
}

/* Bascule 1 colonne sous 980px */
@media (max-width: 980px) {
  body.ui-theme-artdeco #resultsScreen .metabox-bd,
  body.ui-theme-artdeco #resultsScreen .panel-body,
  body.ui-theme-artdeco #resultsScreen .charts-row,
  body.ui-theme-artdeco #resultsScreen .two-col,
  body.ui-theme-artdeco #homeScreen .charts-row,
  body.ui-theme-artdeco #homeScreen .two-col {
    grid-template-columns: 1fr;
  }
}

/* <<< css/themes/theme-artdeco.css */

/* >>> css/themes/theme-modern.css */

/* === Moderne (minimal, epure, Inter) === */
body.ui-theme-modern {
  --ui-ornament: 0;
  --user-font-body: "Inter", system-ui, sans-serif;
  --user-font-title: "Inter", system-ui, sans-serif;
  --user-font-eyebrow: "Inter", system-ui, sans-serif;
  --app-radius: 12px;
  --app-radius-tight: 8px;
}

body.ui-theme-modern h1,
body.ui-theme-modern h2,
body.ui-theme-modern h3,
body.ui-theme-modern h4 {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.ui-theme-modern .panel {
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 12px 32px -16px rgba(0, 0, 0, 0.4);
}

body.ui-theme-modern .subpanel {
  border: none;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

body.ui-theme-modern .app-header {
  border: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

body.ui-theme-modern button:not(.icon-button) {
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.ui-theme-modern .option-btn {
  border-radius: 10px;
}

body.ui-theme-modern .option-letter {
  border-radius: 8px;
  font-weight: 600;
}

body.ui-theme-modern input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.ui-theme-modern select,
body.ui-theme-modern textarea {
  border-radius: 8px;
}

body.ui-theme-modern .flashcard-review-card {
  border-radius: 16px;
}

/* ============================================================
   THEME: MODERNE (minimal, epure)
   ============================================================ */

/* --- Options QCM --- */
body.ui-theme-modern .option-btn {
  border: none;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent);
  background: var(--surface-subpanel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.ui-theme-modern .option-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  filter: none;
}

body.ui-theme-modern .option-btn.correct {
  border: none;
  box-shadow: 0 0 0 2px var(--tone-5), 0 2px 6px rgba(0, 0, 0, 0.15);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

body.ui-theme-modern .option-btn.wrong {
  border: none;
  box-shadow: 0 0 0 2px var(--danger), 0 2px 6px rgba(0, 0, 0, 0.15);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
}

/* --- Barre de progression --- */
body.ui-theme-modern .progress-wrap {
  border-radius: 999px;
  border: none;
  height: 6px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

body.ui-theme-modern .progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

/* --- Onglets --- */
body.ui-theme-modern .tab-btn {
  border-radius: 20px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border: none;
  font-size: 0.9rem;
  transition: background 0.2s ease, color 0.2s ease;
}

body.ui-theme-modern .tab-btn:hover {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  filter: none;
}

body.ui-theme-modern .tab-btn.active {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* --- Flashcard --- */
body.ui-theme-modern .flashcard-review-card {
  border: none;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  background: var(--surface-panel);
}

body.ui-theme-modern .flashcard-front {
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-modern .flashcard-back {
  border: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

body.ui-theme-modern .app-header,
body.ui-theme-modern .session-header,
body.ui-theme-modern .panel,
body.ui-theme-modern .subpanel,
body.ui-theme-modern .screen-options-panel {
  border-color: color-mix(in srgb, var(--text) 4%, transparent);
}

body.ui-theme-modern .global-nav button {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border: none;
}

body.ui-theme-modern .brand-mark-shell {
  border-radius: 24px;
}

body.ui-theme-modern {
  --app-radius: 28px;
  --app-radius-tight: 18px;
  --ui-ornament: 0;
}

body.ui-theme-modern::before,
body.ui-theme-modern::after {
  opacity: 0.12;
  filter: blur(0.2px) saturate(1.18);
}

body.ui-theme-modern .app {
  width: min(1220px, 94vw);
}

body.ui-theme-modern .app-header,
body.ui-theme-modern .session-header,
body.ui-theme-modern .panel,
body.ui-theme-modern .subpanel,
body.ui-theme-modern .screen-options-panel,
body.ui-theme-modern .appearance-shell {
  border: 1px solid color-mix(in srgb, var(--text) 6%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--text) 8%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-panel) 90%, transparent);
  box-shadow: 0 22px 54px -42px rgba(0, 0, 0, 0.72);
}

body.ui-theme-modern .subpanel,
body.ui-theme-modern .field-group,
body.ui-theme-modern .appearance-swatch {
  background: color-mix(in srgb, var(--surface-subpanel) 76%, transparent);
}

body.ui-theme-modern .global-nav button,
body.ui-theme-modern .tab-btn,
body.ui-theme-modern button.secondary,
body.ui-theme-modern .button-link {
  border-radius: 999px;
  border-color: transparent;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  letter-spacing: 0.02em;
  text-transform: none;
}

body.ui-theme-modern input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.ui-theme-modern select,
body.ui-theme-modern textarea {
  border-radius: 16px;
  background-color: color-mix(in srgb, var(--bg) 62%, color-mix(in srgb, var(--text) 5%, transparent));
}

body.ui-theme-modern .kpi-card,
body.ui-theme-modern .admin-domain-card,
body.ui-theme-modern .learner-action-card,
body.ui-theme-modern .flashcard-review-card {
  border-radius: 24px;
}

body.ui-theme-modern .option-btn {
  border-radius: 18px;
  padding-block: 1rem;
}

/* <<< css/themes/theme-modern.css */

/* >>> css/themes/theme-medieval.css */

body.ui-theme-medieval {
  --app-radius: 5px;
  --app-radius-tight: 2px;
  --ui-ornament: max(var(--ui-ornament, 0.7), 0.44);
  --user-font-body: "Caudex", "Cormorant Garamond", Georgia, serif;
  --user-font-title: "MedievalSharp", "Cormorant Garamond", serif;
  --user-font-eyebrow: "MedievalSharp", "Cormorant Garamond", serif;
}

body.ui-theme-medieval::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: calc(0.045 * var(--ui-ornament));
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--gold) 52%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 42%, transparent) 0 1px, transparent 1px 34px);
  mask: radial-gradient(ellipse at center, #000 18%, transparent 72%);
  -webkit-mask: radial-gradient(ellipse at center, #000 18%, transparent 72%);
}

body.ui-theme-medieval .app {
  width: min(1360px, 94vw);
}

body.ui-theme-medieval .app-header,
body.ui-theme-medieval .session-header,
body.ui-theme-medieval .panel,
body.ui-theme-medieval .subpanel,
body.ui-theme-medieval .screen-options-panel,
body.ui-theme-medieval .appearance-shell {
  border-radius: var(--app-radius);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 18px),
    color-mix(in srgb, var(--surface-panel) 94%, #1a120a 6%);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.28),
    inset 0 0 0 4px color-mix(in srgb, var(--gold) 10%, transparent),
    0 18px 42px -34px rgba(0, 0, 0, 0.72);
}

body.ui-theme-medieval .panel::after,
body.ui-theme-medieval .subpanel::after,
body.ui-theme-medieval .session-header::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
  pointer-events: none;
  opacity: var(--ui-ornament);
}

body.ui-theme-medieval .brand-kicker,
body.ui-theme-medieval .appearance-swatch-badge,
body.ui-theme-medieval .global-nav button,
body.ui-theme-medieval .tab-btn,
body.ui-theme-medieval .eyebrow,
body.ui-theme-medieval label {
  font-family: var(--user-font-eyebrow);
  letter-spacing: 0.12em;
}

body.ui-theme-medieval h1,
body.ui-theme-medieval h2,
body.ui-theme-medieval h3,
body.ui-theme-medieval h4,
body.ui-theme-medieval .brand-name {
  font-family: var(--user-font-title);
}

body.ui-theme-medieval p,
body.ui-theme-medieval input,
body.ui-theme-medieval select,
body.ui-theme-medieval textarea,
body.ui-theme-medieval .option-btn,
body.ui-theme-medieval .flashcard-front,
body.ui-theme-medieval .flashcard-back {
  font-family: var(--user-font-body);
}

body.ui-theme-medieval .global-nav {
  border-top: 1px solid color-mix(in srgb, var(--gold) 24%, transparent);
  padding-top: 0.75rem;
}

body.ui-theme-medieval .global-nav button,
body.ui-theme-medieval .tab-btn,
body.ui-theme-medieval button.secondary,
body.ui-theme-medieval .button-link {
  border-radius: 2px;
  border-color: color-mix(in srgb, var(--gold) 34%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 12%, transparent), transparent),
    color-mix(in srgb, var(--primary) 28%, transparent);
  text-transform: uppercase;
}

body.ui-theme-medieval .global-nav button.active,
body.ui-theme-medieval .tab-btn.active,
body.ui-theme-medieval button.primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 44%, var(--accent)), color-mix(in srgb, var(--primary) 34%, var(--accent)));
  color: color-mix(in srgb, var(--bg) 88%, #000 12%);
}

body.ui-theme-medieval input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.ui-theme-medieval select,
body.ui-theme-medieval textarea {
  border-radius: 2px;
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent),
    color-mix(in srgb, var(--bg) 66%, rgba(255, 255, 255, 0.035));
}

body.ui-theme-medieval .option-btn {
  border-radius: 2px;
  border-color: color-mix(in srgb, var(--gold) 25%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 10%, transparent), transparent 28%),
    color-mix(in srgb, var(--surface-subpanel) 82%, transparent);
}

body.ui-theme-medieval .option-btn:hover {
  border-color: color-mix(in srgb, var(--gold) 62%, var(--accent));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-subpanel) 92%, transparent);
}

body.ui-theme-medieval .progress-wrap {
  height: 8px;
  border-radius: 0;
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}

body.ui-theme-medieval .progress-bar {
  border-radius: 0;
  background: linear-gradient(90deg, var(--primary), var(--gold), var(--accent));
}

body.ui-theme-medieval .flashcard-review-card,
body.ui-theme-medieval .flashcard-front,
body.ui-theme-medieval .flashcard-back {
  border-radius: 2px;
  border-color: color-mix(in srgb, var(--gold) 28%, var(--line));
}

body.ui-theme-medieval .flashcard-review-card::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 68%);
}

body.ui-theme-medieval.bg-pattern-chevrons .app::before,
body.ui-theme-medieval.bg-pattern-grid .app::before,
body.ui-theme-medieval.bg-pattern-rays .app::before {
  opacity: calc(0.07 * var(--ui-ornament));
}

/* <<< css/themes/theme-medieval.css */

/* >>> css/themes/theme-night.css */

/* === Nocturne (confort visuel, contraste modere) === */
body.ui-theme-night {
  --ui-ornament: 0.2;
}

body.ui-theme-night .panel {
  box-shadow: none;
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .app-header {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   THEME: NOCTURNE (confort visuel, contraste modere)
   ============================================================ */

/* --- Options QCM --- */
body.ui-theme-night .option-btn {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-color: color-mix(in srgb, var(--text) 7%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}

body.ui-theme-night .option-btn:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: color-mix(in srgb, var(--text) 14%, transparent);
  filter: none;
}

body.ui-theme-night .option-btn.correct {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
}

body.ui-theme-night .option-btn.wrong {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}

/* --- Barre de progression --- */
body.ui-theme-night .progress-wrap {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .progress-bar {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0.85;
}

/* --- Onglets --- */
body.ui-theme-night .tab-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.ui-theme-night .tab-btn:hover {
  color: var(--text);
  filter: none;
}

body.ui-theme-night .tab-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  box-shadow: none;
}

/* --- Flashcard --- */
body.ui-theme-night .flashcard-review-card {
  background: color-mix(in srgb, var(--text) 4%, transparent);
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .flashcard-front {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .flashcard-back {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-color: color-mix(in srgb, var(--text) 5%, transparent);
}

body.ui-theme-night .app-header,
body.ui-theme-night .panel,
body.ui-theme-night .subpanel {
  box-shadow:
    0 22px 44px -36px rgba(0, 0, 0, 0.72),
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .global-nav button {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

body.ui-theme-night {
  --app-radius: 18px;
  --app-radius-tight: 12px;
  --ui-ornament: 0.18;
  --user-font-body: "Raleway", system-ui, sans-serif;
  --user-font-title: "Raleway", system-ui, sans-serif;
  --user-font-eyebrow: "Raleway", system-ui, sans-serif;
}

body.ui-theme-night .app-header,
body.ui-theme-night .session-header,
body.ui-theme-night .panel,
body.ui-theme-night .subpanel,
body.ui-theme-night .screen-options-panel {
  border-color: color-mix(in srgb, var(--text) 7%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text) 4%, transparent), transparent 34%),
    color-mix(in srgb, var(--surface-panel) 88%, #000 12%);
  box-shadow:
    0 18px 44px -38px rgba(0, 0, 0, 0.86),
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

body.ui-theme-night .global-nav button,
body.ui-theme-night .tab-btn,
body.ui-theme-night button.secondary {
  background: color-mix(in srgb, var(--text) 3%, transparent);
  border-color: color-mix(in srgb, var(--text) 6%, transparent);
}

body.ui-theme-night .option-btn,
body.ui-theme-night .flashcard-front,
body.ui-theme-night .flashcard-back {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

/* <<< css/themes/theme-night.css */

/* >>> css/themes/theme-editorial-light.css */

/* === Editorial Clair (lecture, contraste propre) === */
body.ui-theme-editorial-light {
  --ui-ornament: 0.15;
}

body.ui-theme-editorial-light .panel {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.ui-theme-editorial-light .subpanel {
  border-radius: 2px;
}

body.ui-theme-editorial-light h1,
body.ui-theme-editorial-light h2,
body.ui-theme-editorial-light h3 {
  letter-spacing: 0.02em;
}

body.ui-theme-editorial-light button:not(.icon-button) {
  letter-spacing: 0.06em;
}

/* ============================================================
   THEME: EDITORIAL CLAIR (lecture, contraste propre)
   ============================================================ */

/* --- Options QCM --- */
body.ui-theme-editorial-light .option-btn {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}

body.ui-theme-editorial-light .option-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--primary);
  filter: none;
}

body.ui-theme-editorial-light .option-btn.correct {
  background: rgba(26, 112, 64, 0.1);
  border-color: rgba(26, 112, 64, 0.5);
}

body.ui-theme-editorial-light .option-btn.wrong {
  background: rgba(176, 32, 24, 0.08);
  border-color: rgba(176, 32, 24, 0.4);
}

/* --- Barre de progression --- */
body.ui-theme-editorial-light .progress-wrap {
  border-radius: 0;
  height: 3px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.06);
}

body.ui-theme-editorial-light .progress-bar {
  border-radius: 0;
  background: var(--primary);
}

/* --- Onglets --- */
body.ui-theme-editorial-light .tab-btn {
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-weight: 600;
  transition: color 0.2s ease, border-color 0.2s ease;
}

body.ui-theme-editorial-light .tab-btn:hover {
  color: var(--text);
  filter: none;
}

body.ui-theme-editorial-light .tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: transparent;
  box-shadow: none;
}

/* --- Flashcard --- */
body.ui-theme-editorial-light .flashcard-review-card {
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.85);
}

body.ui-theme-editorial-light .flashcard-front {
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

body.ui-theme-editorial-light .flashcard-back {
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.ui-theme-editorial-light {
  --app-radius: 10px;
  --app-radius-tight: 6px;
}

body.ui-theme-editorial-light .app-header,
body.ui-theme-editorial-light .session-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.58)),
    linear-gradient(135deg, var(--header-start), var(--header-end));
  color: var(--text);
}

body.ui-theme-editorial-light .global-nav button {
  background: rgba(255, 255, 255, 0.68);
  border-radius: 8px;
}

body.ui-theme-editorial-light .brand-kicker {
  letter-spacing: 0.22em;
}

body.ui-theme-editorial-light {
  --app-radius: 8px;
  --app-radius-tight: 4px;
  --ui-ornament: 0.16;
  --user-font-body: "Georgia", "Palatino", serif;
  --user-font-title: "Georgia", "Palatino", serif;
  --user-font-eyebrow: "Raleway", "Segoe UI", sans-serif;
}

body.ui-theme-editorial-light {
  background:
    radial-gradient(900px 520px at 24% -12%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 64%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 74%, #fff 26%), color-mix(in srgb, var(--bg) 74%, #fff 26%));
}

body.ui-theme-editorial-light .app {
  width: min(1120px, 92vw);
}

body.ui-theme-editorial-light .app-header,
body.ui-theme-editorial-light .session-header,
body.ui-theme-editorial-light .panel,
body.ui-theme-editorial-light .subpanel,
body.ui-theme-editorial-light .screen-options-panel,
body.ui-theme-editorial-light .appearance-shell {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.62)),
    var(--surface-panel);
  border-color: color-mix(in srgb, var(--line) 70%, rgba(0, 0, 0, 0.12));
  box-shadow: 0 14px 32px -30px rgba(70, 52, 30, 0.42);
}

body.ui-theme-editorial-light h1,
body.ui-theme-editorial-light h2,
body.ui-theme-editorial-light h3,
body.ui-theme-editorial-light h4 {
  letter-spacing: 0.01em;
}

body.ui-theme-editorial-light .global-nav button,
body.ui-theme-editorial-light .tab-btn,
body.ui-theme-editorial-light button.secondary,
body.ui-theme-editorial-light .button-link {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  text-transform: none;
}

body.ui-theme-editorial-light .option-btn {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.68);
}

/* <<< css/themes/theme-editorial-light.css */


/* Base and shared layout */
/* >>> css/base/reset.css */
* {
  box-sizing: border-box;
  font-family: "Raleway", "Segoe UI", sans-serif;
}

html,
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at top, var(--bg-top) 0%, var(--bg) 64%);
  overflow-x: hidden;
}

body {
  font-size: 1.06rem;
  line-height: 1.45;
}

.app {
  width: min(1520px, 96vw);
  margin: 1.1rem auto 1.3rem;
  display: grid;
  gap: 1rem;
}

/* <<< css/base/reset.css */

/* >>> css/base/typography.css */

/* --- Variables de base (typographie + ornements) --- */
:root {
  --user-font-body: "Raleway", "Segoe UI", sans-serif;
  --user-font-title: "Raleway", "Segoe UI", sans-serif;
  --user-font-eyebrow: "Raleway", "Segoe UI", sans-serif;
  --ui-ornament: 0;
}

body {
  font-family: var(--user-font-body);
  transition: background 0.4s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--user-font-title);
}

/* ── E24.01 — Mode dyslexie ──────────────────────────────────────────────── */
/* OpenDyslexic via Google Fonts fallback or system. Applied via body class. */


body.dyslexia-mode {
  --user-font-body: "OpenDyslexic", "Comic Sans MS", cursive, sans-serif;
  --user-font-title: "OpenDyslexic", "Comic Sans MS", cursive, sans-serif;
  --user-font-eyebrow: "OpenDyslexic", "Comic Sans MS", cursive, sans-serif;
  letter-spacing: 0.06em;
  word-spacing: 0.18em;
  line-height: 1.75;
}

body.dyslexia-mode p,
body.dyslexia-mode li,
body.dyslexia-mode td,
body.dyslexia-mode .hint {
  line-height: 1.85;
  letter-spacing: 0.05em;
}

/* Eyebrow — labels, badges, navigation, kpi labels */
.eyebrow,
.brand-kicker,
.appearance-swatch-badge,
.kpi-label,
.global-nav button,
.tab-btn,
.field-group > label,
.form-group > label {
  font-family: var(--user-font-eyebrow);
}

/* ============================================================
   COMPOSANTS MAQUETTE ART DÉCO — AJOUTS
   Base styles (tous thèmes) + overrides body.ui-theme-artdeco
   ============================================================ */

/* ---- A7. Caption ---- */
.caption {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-muted, rgba(var(--text-rgb, 255,255,255), 0.6));
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}
body.ui-theme-artdeco .caption {
  font-size: 1.12rem;
  color: rgba(245, 236, 214, 0.62);
  letter-spacing: 0.01em;
}

/* <<< css/base/typography.css */

/* >>> css/layout/app.css */

/* ============================================================
   VISUAL REFRESH -- header, panels, appearance, flashcards
   ============================================================ */

:root {
  --app-radius: 18px;
  --app-radius-tight: 12px;
  --app-surface-highlight: rgba(255, 255, 255, 0.06);
  --app-surface-shadow: rgba(0, 0, 0, 0.28);
  --app-ornament-line: color-mix(in srgb, var(--accent) 66%, transparent);
}

body {
  position: relative;
  background:
    radial-gradient(1200px 760px at 18% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(960px 720px at 108% 8%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 58%),
    linear-gradient(180deg, var(--bg-top), var(--bg));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 16%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06), transparent 42%);
}

.app {
  position: relative;
  z-index: 1;
  gap: 1.15rem;
}

.app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.app > * {
  position: relative;
  z-index: 1;
}

.app-boot-screen {
  display: none;
  min-height: clamp(320px, 48vh, 560px);
  align-items: center;
  justify-content: center;
}

body.app-booting .app-boot-screen {
  display: flex;
}

body.app-booting main.app > section:not(#bootScreen),
body.app-booting .app-footer {
  display: none !important;
}

.app-boot-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 520px;
  padding: 1.25rem;
}

.app-boot-card h2,
.app-boot-card p {
  margin: 0;
}

.app-boot-mark {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  opacity: 0.8;
  animation: app-boot-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes app-boot-pulse {
  from { transform: scale(0.96); opacity: 0.55; }
  to { transform: scale(1); opacity: 0.95; }
}

.app-header,
.session-header,
.panel,
.subpanel,
.screen-options-panel {
  backdrop-filter: blur(14px);
}

.app-header,
.session-header {
  border-radius: var(--app-radius);
  overflow: hidden;
}

.app-header {
  padding: 1.1rem 1.25rem 1rem;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 42%),
    linear-gradient(135deg, var(--header-start), var(--header-end));
  box-shadow:
    0 18px 40px -24px var(--app-surface-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background:
    linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.06) 12%, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%);
}

.header-top,
.global-nav {
  position: relative;
  z-index: 1;
}

.header-top {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.45rem 0.9rem;
  align-items: center;
}

.header-branding {
  display: grid;
  gap: 0.35rem;
}

.title-link {
  gap: 0.95rem;
  align-items: center;
}

.brand-mark-shell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: clamp(52px, 4.6vw, 72px);
  height: clamp(52px, 4.6vw, 72px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    rgba(255, 255, 255, 0.05);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 20px -16px rgba(0, 0, 0, 0.45);
}

.brand-mark-shell::before,
.brand-mark-shell::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 14px;
  pointer-events: none;
}

.brand-mark-shell::before {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}

.brand-mark-shell::after {
  inset: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.brand-logo {
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.18));
}

.brand-copy {
  display: grid;
  gap: 0.12rem;
}

.brand-kicker {
  font-family: "Poiret One", "Raleway", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 86%, white 14%);
}

.brand-name {
  display: block;
}

.header-top p {
  max-width: 42rem;
  color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  font-weight: 600;
}

.app-theme-header-control {
  padding: 0.6rem 0.75rem 0.7rem;
  border-radius: var(--app-radius-tight);
  border: 1px solid color-mix(in srgb, var(--line) 80%, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.05);
}

.global-nav {
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.95rem;
}

.global-nav button {
  position: relative;
  overflow: hidden;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.global-nav button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 48%, transparent 100%);
  transform: translateX(-125%);
  transition: transform 280ms ease;
  pointer-events: none;
}

.global-nav button:hover::before,
.global-nav button:focus-visible::before {
  transform: translateX(125%);
}

.global-nav button:hover,
.global-nav button:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.04));
  box-shadow: 0 10px 20px -18px rgba(0, 0, 0, 0.5);
}

.global-nav button.active {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
}

.menu-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 75%, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.05);
}

.menu-toggle-box {
  display: inline-grid;
  gap: 5px;
}

.menu-toggle-box span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-toggle:hover .menu-toggle-box span:nth-child(1) {
  transform: translateX(-2px);
}

.menu-toggle:hover .menu-toggle-box span:nth-child(3) {
  transform: translateX(2px);
}

.panel,
.subpanel {
  position: relative;
  overflow: hidden;
  border-radius: var(--app-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015) 28%, transparent 100%),
    var(--surface-panel);
  box-shadow:
    0 22px 45px -34px var(--app-surface-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.subpanel {
  border-radius: var(--app-radius-tight);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 28%),
    var(--surface-subpanel);
}

.panel::before,
.subpanel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 18%, transparent 36%);
  opacity: calc(0.45 + var(--ui-ornament) * 0.2);
}

.screen-options-btn {
  border-radius: 999px !important;
  min-height: 40px;
}

.screen-options-panel {
  min-width: 280px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 24%),
    var(--surface-panel, #1a2332);
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--line) 82%, rgba(255, 255, 255, 0.08));
  box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.62);
}

/* ── Mobile nav drawer (universal) ── */

@media (max-width: 920px) {
  .global-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: min(320px, 88vw);
    height: 100dvh;
    z-index: 900;
    overflow-y: auto;
    transition: left 0.26s ease;
    background: var(--surface-panel);
    border-right: 1px solid var(--line);
    padding: 1.2rem 0.9rem;
  }

  .global-nav.open {
    position: fixed !important;
    left: 0 !important;
  }
}

body.nav-open .app-header {
  overflow: visible;
  z-index: 1000;
}

.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  backdrop-filter: blur(2px);
}

.nav-backdrop.visible {
  position: fixed !important;
  display: block !important;
}

/* <<< css/layout/app.css */

/* >>> css/layout/header.css */
.app-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: linear-gradient(135deg, var(--header-start), var(--header-end));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  padding: 1rem 1.2rem;
}

.header-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 0.9rem;
}

.header-branding {
  min-width: 0;
}

.app-theme-header-control {
  margin: 0;
  min-width: 220px;
  max-width: 300px;
  justify-self: end;
  align-self: start;
}

.app-theme-header-control label {
  margin-bottom: 0.18rem;
  font-size: 0.84rem;
}

.session-header {
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  background: linear-gradient(135deg, var(--header-start), var(--header-end));
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(6px);
  padding: 1rem 1.2rem;
}

.auth-screen-header {
  margin-bottom: 0.8rem;
}

.icon-button {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.55rem;
  font-size: 1.2rem;
  line-height: 1;
}

.header-top h1 {
  margin: 0;
  font-size: clamp(2.1rem, 3.6vw, 3.2rem);
}

.header-top p {
  margin: 0.35rem 0 0;
  color: #dceef7;
  font-size: 1.32rem;
  font-weight: 600;
}

.title-link {
  all: unset;
  cursor: pointer;
  font-size: inherit;
  font-weight: 800;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}

.brand-logo {
  width: clamp(40px, 4vw, 56px);
  height: clamp(40px, 4vw, 56px);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.brand-mark-shell {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.brand-kicker {
  display: none;
}

.brand-copy {
  display: grid;
  align-content: center;
  max-height: 56px;
  gap: 0.18rem;
}

.brand-name {
  font-size: clamp(1.45rem, 2vw, 1.95rem);
  line-height: 1;
}

.header-top p {
  max-width: 42rem;
  font-size: clamp(0.72rem, 0.85vw, 0.84rem);
  line-height: 1.15;
}

.title-link:hover {
  color: var(--gold);
}

.global-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.8rem;
}

/* Desktop structure: brand block on the left, main navigation on the right. */
@media (min-width: 921px) {
  .app-header {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    align-items: center;
    column-gap: clamp(1.25rem, 3vw, 3rem);
  }

  .header-top {
    grid-column: 1;
    grid-row: 1;
    align-items: center;
    min-width: 0;
  }

  .header-branding {
    min-width: 0;
  }

  .global-nav {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
    justify-content: flex-end;
    margin-top: 0;
  }

  .menu-toggle,
  .menu-close {
    display: none !important;
  }

  .app-theme-header-control {
    display: none !important;
  }

  .title-link:hover {
    color: inherit;
  }
}

/* E31.06 — Impersonation banner */
.impersonation-banner {
  margin-top: 0.5rem;
  border: 2px solid #e67e22;
  border-radius: 8px;
  background: rgba(230, 126, 34, 0.15);
  padding: 0.5rem 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  font-size: 0.93rem;
  color: var(--text);
}

.impersonation-banner strong {
  color: #e67e22;
}

.impersonation-banner .hint {
  color: var(--muted);
  font-size: 0.85em;
}

.impersonation-banner #stopImpersonationBtn {
  margin-left: auto;
  background: #e67e22;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  font-size: 0.88em;
  font-weight: 600;
}

.impersonation-banner #stopImpersonationBtn:hover {
  background: #cf6d17;
}

/* Install banner (PWA) */
.install-banner {
  margin-top: 0.8rem;
  border: 1px solid rgba(64, 224, 208, 0.35);
  border-radius: 10px;
  background: rgba(0, 0, 128, 0.22);
  padding: 0.65rem 0.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.install-banner-copy {
  display: grid;
  gap: 0.15rem;
}

.install-banner-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.install-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.install-banner-actions button {
  min-height: 44px;
  padding: 0.45rem 0.9rem;
  font-size: 1rem;
}

/* Mobile navigation drawer — default states */
.menu-toggle,
.menu-close {
  display: none;
}

.nav-backdrop {
  display: none;
}

/* → css/layout/header.css */

@media (max-width: 920px) {
  .app {
    width: min(1520px, 98vw);
  }

  body {
    font-size: 1rem;
  }

  .header-top p {
    font-size: 1.35rem;
  }

  label {
    font-size: 1rem;
  }

  input,
  select,
  textarea {
    font-size: 1rem;
    padding: 0.58rem 0.76rem;
  }

  button,
  .button-link {
    min-height: 46px;
    font-size: 1rem;
  }
}

@supports (padding: max(0px)) {
  .app {
    padding-left: max(0rem, env(safe-area-inset-left));
    padding-right: max(0rem, env(safe-area-inset-right));
    padding-bottom: max(0rem, env(safe-area-inset-bottom));
  }

  .app-header {
    top: max(0px, env(safe-area-inset-top));
  }
}

.notify-optin {
  margin: 0.5rem 0 0.85rem;
  border: 1px solid rgba(64, 224, 208, 0.4);
  border-radius: 12px;
  background: rgba(0, 95, 93, 0.25);
  padding: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.notify-optin h3 {
  margin: 0;
}

.notify-optin p {
  margin: 0.15rem 0 0;
  color: var(--muted);
}

.notify-optin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.notify-optin-actions button {
  min-height: 44px;
  font-size: 1rem;
}

.notification-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.pwa-education-card {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
  padding: 0.95rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line));
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent), transparent 46%),
    color-mix(in srgb, var(--panel) 92%, var(--bg));
}

.pwa-education-card h4,
.pwa-education-card p {
  margin: 0;
}

.pwa-education-card h4 {
  font-size: 1.05rem;
}

.pwa-education-card > div p {
  margin-top: 0.25rem;
  color: var(--muted);
}

.pwa-education-steps {
  counter-reset: pwa-step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.65rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pwa-education-steps li {
  counter-increment: pwa-step;
  position: relative;
  min-height: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.75rem;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: calc(var(--radius) * 0.75);
  background: color-mix(in srgb, var(--bg) 36%, transparent);
}

.pwa-education-steps li::before {
  content: counter(pwa-step);
  position: absolute;
  left: 0.75rem;
  top: 0.8rem;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-weight: 800;
  font-size: 0.82rem;
}

.pwa-education-steps strong,
.pwa-education-steps span {
  display: block;
}

.pwa-education-steps span {
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.pwa-education-note {
  color: var(--muted);
  font-size: 0.92rem;
}

.notification-settings-grid .kpi h4 {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.notification-settings-grid .kpi strong {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 1.2rem;
}

.notification-preferences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.notification-preferences label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* → css/layout/header.css */

@media (max-width: 920px) {
  .header-top h1 {
    text-align: center;
    padding-inline: 2.8rem;
  }

  .header-top p {
    text-align: center;
    margin-top: 0.4rem;
  }

  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0.12rem;
    left: 0;
    right: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: 0.2rem 0.35rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--text);
    z-index: 131;
  }

  .menu-toggle.hidden {
    display: none !important;
  }

  .menu-toggle:hover {
    filter: none;
    color: var(--gold);
  }

  .global-nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: min(82vw, 340px);
    margin: 0;
    padding: 0.8rem 0.7rem;
    background: linear-gradient(180deg, rgba(13, 59, 102, 0.98), rgba(0, 95, 93, 0.95));
    border-right: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.5rem;
    transform: translateX(-108%);
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
    z-index: 120;
    overflow-y: auto;
  }

  .global-nav.open {
    transform: translateX(0);
  }

  .menu-close {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    align-self: stretch;
    width: 100%;
    min-height: 46px;
    margin-bottom: 0.4rem;
    padding-inline: 0.85rem;
    font-size: 1.05rem;
  }

  .global-nav button {
    width: 100%;
    justify-content: flex-start;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 110;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  .nav-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .global-nav { transition: none !important; }
  .nav-backdrop { transition: none !important; }
}




/* Mobile overflow fix: keep header/body within viewport on iOS */
.app,
.app-header,
.panel,
.subpanel,
.session-header {
  min-width: 0;
  max-width: 100%;
}

.title-link {
  width: 100%;
  min-width: 0;
  display: flex;
}

.title-link span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .app {
    width: 100%;
    max-width: 100%;
    margin: 0.75rem auto 1rem;
    padding-inline: max(0.35rem, env(safe-area-inset-left)) max(0.35rem, env(safe-area-inset-right));
  }

  .header-top h1 {
    font-size: clamp(2rem, 8.2vw, 3rem);
    line-height: 1.1;
  }

  .header-top p {
    font-size: clamp(1.15rem, 6vw, 1.9rem);
    line-height: 1.25;
  }

  #homeScreen .table,
  #startScreen .table,
  #resultsScreen .table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #homeScreen .table th,
  #homeScreen .table td,
  #startScreen .table th,
  #startScreen .table td,
  #resultsScreen .table th,
  #resultsScreen .table td {
    white-space: nowrap;
  }

  #startScreen .grid-form {
    max-width: 100%;
  }

  #startScreen .grid-form input,
  #startScreen .grid-form select,
  #startScreen .grid-form textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Mobile hotfix (iOS): prevent right overflow on header + home + QCM */
@media (max-width: 920px) {
  .app {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0.75rem auto 1rem;
    padding-left: max(0.35rem, env(safe-area-inset-left));
    padding-right: max(0.35rem, env(safe-area-inset-right));
  }

  .app,
  .app-header,
  .panel,
  .subpanel,
  .session-header,
  .header-top,
  .header-top h1,
  .title-link {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .header-top h1 {
    font-size: clamp(1.78rem, 7.5vw, 2.35rem);
    line-height: 1.08;
    text-align: center;
    padding-left: 2.55rem;
    padding-right: 0.35rem;
  }

  .header-top p {
    font-size: clamp(0.94rem, 3.9vw, 1.18rem);
    line-height: 1.22;
    margin: 0.25rem auto 0;
    max-width: 28ch;
    text-align: center;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .menu-toggle {
    top: 50%;
    left: 0.15rem;
    transform: translateY(-50%);
    font-size: 1.9rem;
    padding: 0.15rem 0.35rem;
  }

  .title-link {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: nowrap;
  }

  .title-link span {
    display: block;
    width: auto;
    text-align: left;
    line-height: 1.06;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .brand-logo {
    width: clamp(38px, 9vw, 50px);
    height: clamp(38px, 9vw, 50px);
  }

  body.quiz-screen-active .app-header {
    padding: 0.7rem 0.85rem;
  }

  body.quiz-screen-active .header-top h1 {
    font-size: clamp(1.64rem, 6.7vw, 2.16rem);
    padding-left: 2.45rem;
    padding-right: 0.35rem;
  }

  body.quiz-screen-active .header-top p {
    font-size: clamp(0.9rem, 3.5vw, 1.04rem);
    margin-top: 0.16rem;
  }

  body.quiz-screen-active .global-nav {
    margin-top: 0.55rem;
  }

  #homeScreen #modeProgressPanel,
  #homeScreen #homeRecentTable,
  #startScreen,
  #startForm {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }

  #homeScreen #modeProgressPanel .table,
  #homeScreen #homeRecentTable .table {
    min-width: 560px;
  }

  #startScreen .grid-form,
  #startScreen .grid-form input,
  #startScreen .grid-form select,
  #startScreen .grid-form textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #startScreen .grid-form label,
  #startScreen .message,
  #homeScreen .message,
  #homeScreen h2,
  #homeScreen h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  #quizScreen > .session-header {
    padding: 0.68rem 0.82rem;
  }

  #quizScreen #quizTitle {
    font-size: 1.08rem;
  }

  #quizScreen #questionProgress {
    font-size: 1rem;
  }

  #quizScreen #quizTimer {
    margin: 0.32rem 0 0.35rem;
    min-height: 0;
  }

  #quizScreen .progress-wrap {
    height: 10px;
    margin-bottom: 0.55rem;
  }

  #quizScreen #questionText {
    font-size: clamp(1.28rem, 6.8vw, 1.75rem);
    line-height: 1.24;
    margin: 0.2rem 0 0.1rem;
  }

  #quizScreen .options {
    margin-top: 0.5rem;
  }

  body.quiz-screen-active #quizScreen {
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom));
  }

  body.quiz-screen-active #quizScreen #nextBtn:not(.hidden) {
    position: fixed;
    left: max(0.6rem, env(safe-area-inset-left));
    right: max(0.6rem, env(safe-area-inset-right));
    bottom: max(0.55rem, env(safe-area-inset-bottom));
    z-index: 95;
    min-height: 48px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  }
}

/* Final mobile header alignment + baseline visibility policy */
@media (max-width: 920px) {
  #adminScreen .admin-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .header-top {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.22rem;
  }

  .header-top h1 {
    width: 100%;
    margin: 0;
    text-align: center;
    padding-left: 2.55rem;
    padding-right: 0.35rem;
  }

  .title-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
  }

  .title-link span {
    white-space: nowrap;
  }

  .menu-toggle {
    top: 0.28rem;
    left: 0.18rem;
    transform: none;
    width: 2.1rem;
    min-height: 2.1rem;
    padding: 0;
    display: inline-grid !important;
    place-items: center;
    line-height: 1;
  }

  .app-theme-header-control {
    display: none !important;
  }

  /* Mobile: baseline only on home; desktop keeps baseline everywhere. */
  body:not([data-active-screen='home']) .header-top p {
    display: none;
  }
}

/* <<< css/layout/header.css */

/* >>> css/layout/navigation.css */
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
  color: var(--muted);
  min-height: 1.8rem;
}

.admin-breadcrumb-item {
  background: none;
  border: none;
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.15s, background 0.12s;
}

.admin-breadcrumb-item:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.admin-breadcrumb-item.current {
  color: var(--fg);
  cursor: default;
  pointer-events: none;
  font-weight: 600;
}

.admin-breadcrumb-sep {
  color: var(--muted);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
  font-size: 0.75rem;
}

/* <<< css/layout/navigation.css */

/* >>> css/layout/panels.css */
.panel {
  background: var(--surface-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem;
}

.subpanel {
  background: var(--surface-subpanel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.95rem;
  display: grid;
  gap: 0.65rem;
}

.subpanel:empty {
  display: none;
}

.subpanel h6 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

h2,
h3,
h4,
h5 {
  margin: 0.15rem 0;
}

.auth-tabs,
.admin-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.45rem;
  margin-bottom: 0.8rem;
}

/* <<< css/layout/panels.css */

/* >>> css/layout/footer.css */
.app-footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 0.8rem 0 1.3rem;
  color: var(--muted);
  margin-inline: auto;
}

.app-footer a {
  color: var(--accent);
  text-decoration: none;
}

.app-footer a:hover {
  text-decoration: underline;
}

.app-version-badge {
  font-weight: 700;
  color: var(--accent);
}

/* ── Footer par thème ── */

body.ui-theme-artdeco .app-footer {
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 1.4rem 0 1rem;
  font-family: var(--user-font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

body.ui-theme-artdeco .app-footer::before {
  content: "";
  display: block;
  width: 80px;
  height: 1px;
  margin: 0 auto 0.8rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

body.ui-theme-medieval .app-footer {
  border-top: 2px solid color-mix(in srgb, var(--gold) 40%, var(--line));
  font-family: var(--user-font-body);
}

body.ui-theme-modern .app-footer {
  border-top: 1px solid var(--line);
}

body.ui-theme-night .app-footer {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

body.ui-theme-editorial-light .app-footer {
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-family: var(--user-font-body, serif);
  font-size: 0.9rem;
}

body.ui-theme-classic .app-footer,
body:not([class*="ui-theme-"]) .app-footer {
  border-top: 1px solid var(--line);
}

/* <<< css/layout/footer.css */


/* Shared components */
/* >>> css/components/forms.css */
label {
  color: var(--muted);
  font-size: 1.08rem;
}

input,
select,
textarea {
  border: 1px solid rgba(125, 182, 235, 0.55);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text);
  padding: 0.65rem 0.82rem;
  font-size: 1.05rem;
}

textarea {
  width: 100%;
  min-height: 160px;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%), linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 4px), calc(100% - 12px) calc(50% - 4px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

select option {
  background: var(--panel);
  color: var(--text);
}

input::placeholder,
textarea::placeholder {
  color: rgba(238, 246, 255, 0.62);
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Inline field validation */
input.field-error,
select.field-error,
textarea.field-error {
  border-color: #f87171 !important;
  outline-color: #f87171 !important;
}

input.field-ok,
select.field-ok,
textarea.field-ok {
  border-color: #86efac !important;
}

.field-validation-msg {
  display: block;
  font-size: 0.75rem;
  color: #f87171;
  margin-top: 0.2rem;
  min-height: 1rem;
}

/* E34.06 — Drag-and-drop zone */
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: 6px;
  padding: 0.5rem;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.drop-zone.drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.drop-zone-label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
  margin-top: 0.2rem;
}

.admin-form-meta {
  color: var(--text-muted, rgba(255,255,255,0.6));
  font-size: 0.82rem;
  white-space: nowrap;
}

.admin-form-meta:empty {
  display: none;
}

.admin-autocomplete-dropdown {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  max-height: 280px;
  overflow-y: auto;
}

.admin-autocomplete-item {
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-autocomplete-item:hover,
.admin-autocomplete-item.active {
  background: var(--hover-bg, #e8f0fe);
}

.admin-autocomplete-item .ac-id {
  color: var(--muted);
  font-size: 0.78rem;
  margin-right: 0.3rem;
}

.admin-named-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.4rem 0;
  flex-wrap: wrap;
}

.admin-nf-dropdown-wrap {
  position: relative;
}

.admin-nf-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  list-style: none;
  padding: 0.25rem 0;
  margin: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  min-width: 200px;
  max-height: 260px;
  overflow-y: auto;
}

.admin-nf-dropdown.hidden {
  display: none;
}

.admin-nf-item {
  display: flex;
  align-items: center;
}

.admin-nf-apply {
  flex: 1;
  text-align: left;
  padding: 0.3rem 0.65rem;
  font-size: 0.88rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}

.admin-nf-apply:hover {
  background: var(--hover-bg, #e8f0fe);
}

.admin-nf-delete {
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
}

.admin-nf-delete:hover {
  color: var(--danger, #c0392b);
}

.admin-nf-empty {
  padding: 0.4rem 0.65rem;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

.admin-user-notes-wrap {
  padding: 0.5rem 0;
}

.admin-user-notes-title {
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
}

.admin-user-notes-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.88rem;
  background: var(--bg);
  color: var(--text);
  resize: vertical;
  min-height: 80px;
}

.admin-user-notes-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.admin-user-notes-save {
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
}

.admin-user-notes-status {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ── E43.11–E43.15 — Préférences apprenant ───────────────────────────────── */

.pref-list {
  display: grid;
  gap: 0.6rem;
  max-width: 480px;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  background: var(--panel-soft, rgba(255,255,255,0.04));
  border: 1px solid var(--line);
  cursor: default;
}

label.pref-row { cursor: pointer; }
label.pref-row:hover { border-color: var(--accent, #f0b24a); }

.pref-label {
  font-size: 0.88rem;
  color: var(--fg);
  flex: 1;
}

.pref-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--accent, #f0b24a);
}

.pref-row select {
  flex-shrink: 0;
  min-width: 130px;
  font-size: 0.85rem;
}

/* ── E43.11 — Densité ───────────────────────────────────────────────────────── */
body.density-compact .subpanel  { padding: 0.75rem; gap: 0.5rem; }
body.density-compact .kpi-grid  { gap: 0.35rem; }
body.density-compact .hint      { display: none; }

body.density-comfortable .subpanel { padding: 1.75rem; }
body.density-comfortable .kpi-grid  { gap: 1.25rem; }

/* ── E43.12 — Cacher les temps de réponse ───────────────────────────────────── */
body.hide-response-times .results-time-col { display: none; }
body.hide-response-times .question-highlight-meta .time-part { display: none; }

/* <<< css/components/forms.css */

/* >>> css/components/buttons.css */
button,
.button-link {
  border: 1px solid rgba(125, 182, 235, 0.45);
  border-radius: 10px;
  background: var(--primary);
  color: var(--text);
  font-weight: 700;
  font-size: 1.08rem;
  min-height: 50px;
  padding: 0.64rem 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

button.secondary,
.tab-btn,
.global-nav button {
  background: var(--primary);
  color: #fff;
}

button:hover,
.button-link:hover {
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.tab-btn.active,
.global-nav button.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(240, 178, 74, 0.48);
}

.message {
  min-height: 1.2rem;
  color: var(--muted);
}

.message.error { color: #fecaca; }
.message.success { color: #86efac; }
.message.highlight { color: #86efac; font-weight: 700; }

.hidden { display: none !important; }

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
}

.admin-return-link {
  border-color: rgba(251, 191, 36, 0.42);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(245, 158, 11, 0.08));
}

.admin-return-link:hover {
  border-color: rgba(251, 191, 36, 0.62);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2) inset;
}

.deck-row-learner-btn,
.deck-row-copy-link-btn {
  border-color: rgba(96, 165, 250, 0.28);
}

.deck-row-learner-btn[data-learner-target="qcm"] {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.16), rgba(37, 99, 235, 0.08));
}

.deck-row-learner-btn[data-learner-target="flashcards"] {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.16), rgba(5, 150, 105, 0.08));
}

.deck-row-copy-link-btn {
  background: rgba(148, 163, 184, 0.12);
}

.deck-row-learner-btn:hover,
.deck-row-copy-link-btn:hover {
  transform: translateY(-1px);
}

.auth-login-actions {
  justify-content: flex-start;
}

.auth-login-actions > button {
  min-width: 220px;
}

.deck-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.55rem;
}

.copy-id-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 0.25rem;
  font-size: 0.9em;
  opacity: 0.55;
  vertical-align: middle;
  transition: opacity 0.15s;
  color: inherit;
}

.copy-id-btn:hover {
  opacity: 1;
}

/* ---- RESET DES COULEURS HARDCODEES (base variable) ---- */

/* Les options QCM et la progress bar ont des couleurs hardcodees;
   on les rebranches sur les variables CSS pour que les themes fonctionnent. */
.option-btn {
  background: var(--surface-subpanel, rgba(13, 59, 102, 0.5));
  border-color: var(--line);
  transition:
    transform 180ms ease,
    box-shadow 220ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    opacity 180ms ease;
}

.option-btn.correct {
  border-color: var(--tone-5);
  background: rgba(64, 224, 208, 0.14);
}

.option-btn.wrong {
  border-color: var(--danger);
  background: rgba(128, 0, 32, 0.22);
}

.option-btn.is-picked {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 12px 26px -20px rgba(0, 0, 0, 0.55);
}

.option-btn.is-resolved.correct {
  animation: quiz-answer-correct 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.option-btn.is-resolved.wrong {
  animation: quiz-answer-wrong 430ms cubic-bezier(0.22, 1, 0.36, 1);
}

.options.is-answer-resolved .option-btn:not(.is-picked):not(.correct) {
  opacity: 0.72;
}

/* ── E33.01 — Bouton aide contextuelle "?" ───────────────────────────────── */

.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-height: unset;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-panel, rgba(14, 37, 73, 0.4));
  color: var(--muted, #9bb);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 0.45rem;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.help-btn:hover {
  background: rgba(240, 178, 74, 0.18);
  color: var(--accent, #f0b24a);
  border-color: rgba(240, 178, 74, 0.45);
}

/* ── E33.03 — FAB feedback ───────────────────────────────────────────────── */

.feedback-fab {
  position: fixed;
  bottom: 5rem;
  right: 1.2rem;
  z-index: 800;
  width: 46px;
  height: 46px;
  min-height: unset;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(125, 182, 235, 0.4);
  background: var(--surface-panel, rgba(14, 37, 73, 0.85));
  color: var(--muted, #9bb);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  backdrop-filter: blur(6px);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.feedback-fab:hover {
  background: rgba(240, 178, 74, 0.15);
  color: var(--accent, #f0b24a);
  border-color: rgba(240, 178, 74, 0.45);
  transform: scale(1.08);
}

/* <<< css/components/buttons.css */

/* >>> css/components/tabs.css */

/* ---- A3. Tabbar résultats ---- */
.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 18px 0 20px;
}
.tabbar button {
  background: transparent;
  border: none;
  color: var(--text-muted, rgba(255,255,255,0.55));
  font-family: "Raleway", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.tabbar button:hover {
  color: var(--text, rgba(255,255,255,0.9));
}
.tabbar button.active {
  color: var(--accent, #dd9933);
  background: linear-gradient(180deg, rgba(221, 153, 51, 0.07), transparent);
}
/* Overrides Art Déco */
body.ui-theme-artdeco .tabbar {
  border-top-color: rgba(221, 153, 51, 0.35);
  border-bottom-color: rgba(221, 153, 51, 0.35);
  position: relative;
}
body.ui-theme-artdeco .tabbar::before,
body.ui-theme-artdeco .tabbar::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(221, 153, 51, 0.75);
  transform: rotate(45deg);
}
body.ui-theme-artdeco .tabbar::before { left: 14px; top: -3px; }
body.ui-theme-artdeco .tabbar::after  { right: 14px; bottom: -3px; }
body.ui-theme-artdeco .tabbar button {
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.32em;
  font-size: 0.7rem;
  border-radius: 0;
  padding: 14px 22px;
}
body.ui-theme-artdeco .tabbar button.active {
  color: rgba(221, 153, 51, 0.95);
  background: linear-gradient(180deg, rgba(221, 153, 51, 0.1), transparent);
}


/* <<< css/components/tabs.css */

/* >>> css/components/progress.css */
.progress-wrap {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-subpanel);
  overflow: hidden;
  margin-bottom: 0.8rem;
}

.progress-bar {
  width: 0%;
  height: 100%;
  transition: width 0.2s ease;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.quality-progress-track {
  width: 100%;
  min-height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
  overflow: hidden;
}

.quality-progress-fill {
  display: block;
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e 0%, #6ee7b7 100%);
}

.options {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.option-btn {
  text-align: left;
  background: var(--surface-subpanel);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.option-letter {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 3px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  color: var(--accent);
  line-height: 1;
  user-select: none;
}

.option-letter span {
  display: block;
}

.option-text {
  flex: 1;
}

.option-btn.correct {
  background: color-mix(in srgb, var(--metric-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--metric-success) 50%, var(--line));
}
.option-btn.wrong {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger) 50%, var(--line));
}

.feedback {
  margin-top: 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-subpanel);
  padding: 0;
  overflow: hidden;
}

/* ── Verdict (bonne/mauvaise réponse) ──────────────────────────────────────── */
.feedback-verdict {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  border-bottom: 1px solid transparent;
}

.feedback-verdict--correct {
  background: color-mix(in srgb, var(--success, #16a34a) 12%, transparent);
  border-color: color-mix(in srgb, var(--success, #16a34a) 30%, transparent);
  color: color-mix(in srgb, var(--success, #16a34a) 80%, var(--text));
}

.feedback-verdict--wrong {
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 25%, transparent);
  color: color-mix(in srgb, var(--danger, #dc2626) 75%, var(--text));
}

.feedback-verdict-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.feedback-verdict-label {
  font-weight: 700;
  white-space: nowrap;
}

.feedback-verdict-answer {
  font-weight: 400;
  color: var(--text);
  opacity: 0.9;
}

/* ── Toggle "Pour en savoir plus" ──────────────────────────────────────────── */
.feedback-details {
  padding: 0;
}

.feedback-details summary {
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, var(--text));
  opacity: 0.75;
  list-style: none;
  user-select: none;
  border-top: 1px solid var(--line);
  transition: opacity 0.15s;
}
.feedback-details summary::-webkit-details-marker { display: none; }

.feedback-details summary::before {
  content: '▶ ';
  font-size: 0.65rem;
  vertical-align: middle;
  transition: transform 0.15s;
  display: inline-block;
}

.feedback-details[open] summary::before {
  transform: rotate(90deg);
}

.feedback-details summary:hover {
  opacity: 1;
}

.feedback-explanation-text {
  padding: 0.6rem 0.9rem 0.75rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  border-top: 1px solid var(--line);
  white-space: pre-wrap;
}

.progress-bar-wrap {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  margin: 0.4rem 0;
}

.progress-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #34d399);
  transition: width 0.25s ease;
}


.admin-editorial-status {
  margin: 0 0 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-subpanel, rgba(255,255,255,0.05));
}

.admin-editorial-status-compact {
  margin-bottom: 0.7rem;
}

.admin-editorial-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.admin-editorial-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.55rem;
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.22);
}

.admin-editorial-progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.25s ease;
  background: linear-gradient(90deg, #f97316, #f59e0b);
}

.admin-editorial-status.is-medium .admin-editorial-progress-fill {
  background: linear-gradient(90deg, #eab308, #22c55e);
}

.admin-editorial-status.is-high .admin-editorial-progress-fill {
  background: linear-gradient(90deg, #10b981, #34d399);
}

.admin-editorial-field-dirty {
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.28);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.12);
}

/* ---- A1. Barre de progression avec variable --p et marqueur diamant ---- */
/* Base */
.progress-wrap {
  position: relative;
  overflow: visible;
}
/* Art Déco override : gradient teal→or + marqueur diamant */
body.ui-theme-artdeco .progress-wrap {
  height: 3px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 0;
}
body.ui-theme-artdeco .progress-bar {
  height: 100%;
  border-radius: 0;
  background: linear-gradient(90deg, var(--teal, #008080), var(--accent, #dd9933));
  position: relative;
  transition: width 0.4s ease;
}
body.ui-theme-artdeco .progress-bar::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--accent, #dd9933);
  transform: translateY(-50%) rotate(45deg);
  border-radius: 0;
}

/* <<< css/components/progress.css */

/* >>> css/components/modals.css */
/* Confirmation dialogs */
.admin-confirm-dialog {
  border: none;
  border-radius: 10px;
  padding: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
  max-width: 440px;
  width: 92vw;
}

.admin-confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}

.admin-confirm-inner {
  padding: 1.6rem;
}

.admin-confirm-title {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.admin-confirm-body {
  margin: 0 0 1.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: pre-wrap;
  line-height: 1.55;
}

.admin-confirm-actions {
  justify-content: flex-end;
  gap: 0.6rem;
}

#adminConfirmOkBtn.danger,
.admin-confirm-dialog .btn-danger {
  background: #ef4444;
  color: #fff;
  border-color: #ef4444;
}

#adminConfirmOkBtn.danger:hover {
  background: #dc2626;
}

.admin-confirm-text-group {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.admin-confirm-text-hint {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.admin-confirm-text-input {
  font-family: var(--font-mono, monospace);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.18));
  background: var(--surface-subpanel, rgba(255, 255, 255, 0.05));
  color: inherit;
  width: 100%;
  box-sizing: border-box;
}

.admin-confirm-text-input:focus {
  outline: 2px solid var(--accent, #58c8d4);
  outline-offset: 1px;
  border-color: transparent;
}

#adminConfirmOkBtn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.command-palette {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(5, 15, 45, 0.66);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 1rem 1rem;
}

.command-palette-card {
  width: min(900px, 96vw);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(6, 35, 86, 0.98);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
  padding: 0.9rem;
  display: grid;
  gap: 0.7rem;
}

#commandPaletteInput {
  flex: 1 1 340px;
}

.command-palette-list {
  display: grid;
  gap: 0.45rem;
}

.command-palette-item {
  text-align: left;
}

.admin-shortcut-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-shortcut-help-box {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  min-width: 320px;
  max-width: 480px;
  padding: 1rem;
}

.admin-shortcut-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

.admin-shortcut-help-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--muted);
  padding: 0 0.3rem;
}

.admin-shortcut-help-close:hover {
  color: var(--text);
}

.admin-shortcut-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-shortcut-help-table td {
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}

.admin-shortcut-help-table tr:hover td {
  background: var(--hover-bg, #f0f4ff);
}

kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  font-family: monospace;
  background: var(--bg-alt, #f5f5f5);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--line);
  white-space: nowrap;
}

.shortcut-ctx {
  margin-left: 0.5rem;
  color: var(--muted);
  font-size: 0.8em;
}

.admin-template-picker-dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  padding: 0;
  max-width: 460px;
  width: 100%;
  background: var(--bg);
}

.admin-template-picker-dialog::backdrop {
  background: rgba(0,0,0,.4);
}

.admin-template-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
}

.admin-template-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--muted);
  padding: 0 0.3rem;
}

.admin-template-close:hover {
  color: var(--text);
}

.admin-template-list {
  list-style: none;
  padding: 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.admin-template-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: 5px;
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}

.admin-template-item:hover {
  background: var(--hover-bg, #e8f0fe);
  border-color: var(--accent, #4a86e8);
}

.admin-template-label {
  font-weight: 600;
  font-size: 0.92rem;
}

.admin-template-desc {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* ── E43.09 — Plan de révision rapide ─────────────────────────────────────── */
.revision-plan-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}

.revision-plan-modal.hidden {
  display: none;
}

.revision-plan-dialog {
  background: var(--surface, #1e2b45);
  color: var(--fg, #e8eaf6);
  border: 1px solid var(--line, rgba(255,255,255,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
  width: min(520px, 96vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.revision-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
  flex-shrink: 0;
}

.revision-plan-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.revision-plan-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--muted, #8899aa);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.revision-plan-header button:hover {
  color: var(--fg, #e8eaf6);
  background: var(--hover-bg, rgba(255,255,255,0.08));
}

#revisionPlanContent {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.revision-plan-score {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent, #58c8d4);
}

.revision-plan-themes h4 {
  margin: 0 0 0.45rem;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8899aa);
}

.revision-plan-themes ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.revision-plan-theme {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  padding: 0.3rem 0.55rem;
  border-radius: 5px;
  background: var(--surface-subpanel, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
}

.revision-plan-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.revision-plan-schedule h4 {
  margin: 0 0 0.3rem;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #8899aa);
}

.revision-plan-day {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-subpanel, rgba(255,255,255,0.04));
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  font-size: 0.88rem;
}

.revision-plan-day-label {
  font-weight: 700;
  min-width: 3rem;
}

.revision-plan-day-date {
  font-size: 0.8rem;
}

.revision-plan-day-focus {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.revision-plan-day-time {
  font-size: 0.8rem;
  white-space: nowrap;
}

.revision-plan-action {
  margin-top: 0.3rem;
}

.revision-plan-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--line, rgba(255,255,255,0.1));
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .revision-plan-day {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }
  .revision-plan-day-time { grid-column: 2; }
}

/* ── E33.03 — Modal feedback ─────────────────────────────────────────────── */

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 8500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.feedback-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.feedback-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  cursor: pointer;
}

.feedback-modal-panel {
  position: relative;
  z-index: 1;
  background: var(--surface-panel, rgba(14, 37, 73, 0.97));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: grid;
  gap: 0.65rem;
}

.feedback-modal-panel h3 {
  margin: 0 0 0.15rem;
}

.feedback-modal-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
  font-family: inherit;
  font-size: 0.95rem;
}

/* ── E33.01 — Popover aide contextuelle ──────────────────────────────────── */

.help-popover {
  position: absolute;
  z-index: 9100;
  background: var(--surface-panel, rgba(14, 37, 73, 0.97));
  border: 1px solid rgba(240, 178, 74, 0.4);
  border-radius: 10px;
  padding: 0.75rem 1rem 0.65rem;
  width: min(280px, calc(100vw - 20px));
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--fg);
  animation: popover-fade 0.18s ease;
}

.help-popover p {
  margin: 0.25rem 0 0;
  color: var(--muted, #9bb);
}

.help-popover-close {
  float: right;
  background: none;
  border: none;
  min-height: unset;
  padding: 0 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

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

/* <<< css/components/modals.css */

/* >>> css/components/toast.css */
/* Toast notifications */
.admin-toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  z-index: 9999;
  pointer-events: none;
  max-width: 360px;
  width: calc(100vw - 2rem);
}

.admin-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.45;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.admin-toast.admin-toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.admin-toast.admin-toast-leaving {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.admin-toast-success {
  border-left: 3px solid #86efac;
}

.admin-toast-error {
  border-left: 3px solid #f87171;
}

.admin-toast-warn {
  border-left: 3px solid #fbbf24;
}

.admin-toast-info {
  border-left: 3px solid var(--accent);
}

.admin-toast-msg {
  flex: 1;
  color: var(--fg);
}

.admin-toast-close {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color 0.12s;
}

.admin-toast-close:hover {
  color: var(--fg);
}

/* ── E43.06 — Micro-célébration streak ──────────────────────────────────────── */
.streak-toast {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(249,115,22,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 8500;
  white-space: nowrap;
}
.streak-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Confetti (badges + streak) ─────────────────────────────────────────────── */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9100;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -14px;
  opacity: 1;
  animation: confetti-fall var(--cf-dur, 2.8s) ease-in var(--cf-delay, 0s) forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0)      rotate(0deg);                  opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh)  rotate(var(--cf-rot, 540deg)); opacity: 0; }
}

/* <<< css/components/toast.css */

/* >>> css/components/grids.css */
.grid-form {
  display: grid;
  gap: 0.6rem;
  max-width: 820px;
}

.grid-form.is-full {
  width: 100%;
  max-width: 100%;
}

.form-grid-auto,
.deck-form-grid,
.survey-builder-grid,
.aggregate-session-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  width: 100%;
}

.field-group {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.field-full,
.form-grid-auto .field-full,
.deck-form-grid .field-full,
.survey-builder-grid .field-full,
.aggregate-session-edit-grid .field-full {
  grid-column: 1 / -1;
}

/* ---- B10. Bilan session — two-col ---- */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  margin-top: 16px;
}
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
}

/* → css/admin/admin-dashboard.css + css/learner/home.css */

.grid-form {
  display: grid;
  gap: 0.6rem;
  max-width: 820px;
}

/* <<< css/components/grids.css */

/* >>> css/components/cards.css */
.card-soft {
  border: 1px solid var(--border, var(--line));
  border-radius: 12px;
  background: var(--panel-soft);
  padding: 0.95rem;
}

.card-section,
.form-section-card,
.admin-test-form-section,
.admin-group-form-section {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-soft);
}

.card-compact {
  border-radius: 10px;
  padding: 0.6rem;
}

/* Shared component styles */
.comparison-row { display: flex; gap: 0.5rem; align-items: center; padding: 0.2rem 0; border-bottom: 1px solid var(--line); }
.comparison-label { flex: 1; font-size: 0.85rem; }
.comparison-current { font-weight: 600; }
.comparison-delta { font-size: 0.85rem; min-width: 3rem; text-align: right; }
.action-card { padding: 0.6rem; margin: 0.3rem 0; background: var(--surface-subpanel); border-radius: 6px; border-left: 3px solid var(--accent); }
.action-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; font-weight: 600; }
.action-reason { font-size: 0.82rem; color: var(--muted); margin: 0; }
.action-kpis { display: flex; gap: 0.25rem; flex-wrap: wrap; }
/* Cellule générique heatmap satisfaction (admin) — ne pas confondre avec .heatmap-regularity .heatmap-cell */
.sat-heatmap-row .heatmap-cell,
.heatmap-tile { display: flex; align-items: center; justify-content: center; padding: 0.3rem; border-radius: 4px; font-size: 0.8rem; cursor: default; }
/* Cellule régularité 14w — override l'ancienne règle .heatmap-cell globale */
.heatmap-regularity .heatmap-cell {
  display: block;
  padding: 0;
}
.insight-warning li { color: var(--metric-warning); }

/* FAQ — catégories englobantes */
.faq-category {
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}
.faq-category > summary {
  padding: 1rem 1.1rem;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--panel);
  color: var(--text);
  user-select: none;
}
.faq-category > summary::-webkit-details-marker { display: none; }
.faq-category > summary::after {
  content: '▾';
  margin-left: auto;
  font-size: 1.1em;
  transition: transform 0.2s;
  color: var(--muted);
}
.faq-category[open] > summary::after { transform: rotate(-180deg); }
.faq-category-body {
  padding: 0.5rem 0.75rem 0.75rem;
  background: var(--panel-soft);
}

/* FAQ & Changelog accordion */
.faq-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.faq-item summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel);
  color: var(--text);
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: '▶';
  font-size: 0.7em;
  transition: transform 0.2s;
  color: var(--muted);
  flex-shrink: 0;
}
.faq-item[open] summary::before { transform: rotate(90deg); }
.faq-item p, .faq-item ul {
  margin: 0;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--panel-soft);
}

.faq-item ul { padding-left: 2rem; }

/* ── Metaboxes (E39.01) ─────────────────────────────────────────────────────── */

.metabox {
  background: var(--surface-subpanel, rgba(255,255,255,.06));
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 0.55rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.metabox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--line, rgba(255,255,255,.12));
  transition: background 0.15s;
}

.metabox-header:hover {
  background: color-mix(in srgb, var(--accent, #58c8d4) 6%, transparent);
}

.metabox-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.metabox-badge {
  font-size: 0.7rem;
  padding: 0.15em 0.55em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--accent, #58c8d4) 18%, transparent);
  color: var(--accent, #58c8d4);
  font-weight: 600;
  white-space: nowrap;
}

.metabox-toggle-icon {
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.metabox-toggle-icon::before {
  content: '▾';
}

.metabox.is-collapsed .metabox-toggle-icon {
  transform: rotate(-90deg);
}

.metabox-body {
  padding: 1rem;
}

.metabox.is-collapsed .metabox-body {
  display: none;
}

.metabox.is-metabox-hidden {
  display: none;
}

/* Hero KPI row (Niveau 1 — toujours visible) */
.results-hero-kpis {
  background: color-mix(in srgb, var(--accent, #58c8d4) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #58c8d4) 22%, transparent);
  border-radius: 0.55rem;
  padding: 1rem;
  margin-bottom: 1rem;
}

/* ---- B2. Home — Cards avec numéros romains ---- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 20px 0;
}
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
}
.card {
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  padding: 24px 20px;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--radius-sm, 4px);
}
.card .roman {
  font-family: "Italiana", "Cormorant Garamond", serif;
  font-size: 1.6rem;
  color: var(--accent, #dd9933);
  line-height: 1;
  opacity: 0.8;
}
body.ui-theme-artdeco .cards { gap: 14px; }
body.ui-theme-artdeco .card {
  border-radius: 0;
  border-color: rgba(221, 153, 51, 0.16);
  background: linear-gradient(180deg, rgba(245, 236, 214, 0.03), rgba(0,0,0,0.07));
}
body.ui-theme-artdeco .card .roman {
  font-size: 1.8rem;
  color: rgba(221, 153, 51, 0.82);
}

.admin-hover-card {
  position: fixed;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  padding: 0.5rem 0.75rem;
  min-width: 160px;
  max-width: 280px;
  font-size: 0.88rem;
  pointer-events: none;
  z-index: 9998;
}

.hover-card-row {
  padding: 0.1rem 0;
  line-height: 1.4;
}

.hover-card-row.hint {
  color: var(--muted);
  font-size: 0.8rem;
}

.admin-recent-actions-panel {
  position: fixed;
  top: 4rem;
  right: 0;
  width: 260px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px 0 0 6px;
  box-shadow: -4px 4px 16px rgba(0,0,0,.12);
  z-index: 990;
  padding: 0.75rem;
}

.admin-recent-actions-panel.hidden {
  display: none;
}

.admin-recent-actions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.admin-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-recent-list li {
  display: flex;
  gap: 0.4rem;
  padding: 0.2rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--line);
}

.admin-recent-list li:last-child {
  border-bottom: none;
}

.recent-time {
  color: var(--muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  min-width: 2.5rem;
}

.recent-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-recent-actions-toggle {
  position: fixed;
  top: 8rem;
  right: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px 0 0 4px;
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  z-index: 989;
  font-size: 1rem;
  box-shadow: -2px 2px 8px rgba(0,0,0,.15);
  line-height: 1;
}

/* ── E33.02 — Page Nouveautés ────────────────────────────────────────────── */

.whats-new-release {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  background: var(--surface-panel, rgba(14, 37, 73, 0.3));
  margin-bottom: 1rem;
}

.whats-new-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
}

.whats-new-version {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent, #f0b24a);
  text-transform: uppercase;
}

.whats-new-date {
  font-size: 0.78rem;
}

.whats-new-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.whats-new-item {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--line);
}

.whats-new-item:last-child {
  border-bottom: none;
}

.whats-new-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent, #f0b24a);
}

.whats-new-text {
  font-size: 0.83rem;
  line-height: 1.45;
}

/* <<< css/components/cards.css */

/* >>> css/components/toolbars.css */
.toolbar,
.admin-table-toolbar,
.auto-table-ergo-toolbar,
.aggregate-sessions-toolbar,
.admin-global-ux-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: flex-start;
}

.toolbar.is-between {
  justify-content: space-between;
}

.admin-table-toolbar,
.aggregate-sessions-toolbar {
  justify-content: space-between;
}

.toolbar.is-centered {
  align-items: center;
}

.toolbar.is-end,
.admin-global-ux-toolbar {
  justify-content: flex-end;
}

.columns-menu,
.admin-columns-menu,
.aggregate-columns-menu {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.25rem 0.55rem;
  background: rgba(26, 70, 124, 0.38);
}

.columns-menu summary,
.admin-columns-menu summary,
.aggregate-columns-menu summary {
  cursor: pointer;
  font-weight: 700;
}

.columns-grid,
.admin-columns-grid,
.aggregate-columns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.35rem 0.8rem;
  margin-top: 0.55rem;
  min-width: min(720px, calc(100vw - 120px));
}

.col-toggle,
.admin-col-toggle,
.aggregate-col-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* ---- B6. Filter-bar résultats ---- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 14px 16px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm, 4px);
  margin: 12px 0 18px;
}
.fgrp {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fgrp label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.45));
}
.fgrp select,
.fgrp input[type="date"] {
  font-size: 0.82rem;
  padding: 5px 8px;
  min-width: 100px;
}
body.ui-theme-artdeco .filter-bar {
  border-color: rgba(221, 153, 51, 0.18);
  background: linear-gradient(180deg, rgba(245, 236, 214, 0.025), transparent);
  border-radius: 0;
}
body.ui-theme-artdeco .fgrp label {
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.28em;
  color: rgba(245, 236, 214, 0.42);
}

/* <<< css/components/toolbars.css */

/* >>> css/components/tables.css */
.table-resizable {
  width: 100%;
  max-width: 100%;
  max-height: 62vh;
  overflow: auto;
  resize: both;
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.table-wrap-text th,
.table-wrap-text td,
.table-resizable th,
.table-resizable td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.table-row-selected,
.table tr.is-selected {
  outline: 1px solid var(--accent);
  background: rgba(64, 224, 208, 0.08);
}

.table-row-related,
.table tr.is-related {
  background: rgba(125, 182, 235, 0.08);
}

.kpi-value,
.table .table-num,
.table td.numeric {
  font-variant-numeric: tabular-nums;
}

/* Forecast / analytics table */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 0.5rem;
}
.analytics-table th,
.analytics-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: left;
}
.analytics-table th {
  background: var(--table-head);
  font-weight: 600;
  font-size: 0.78rem;
}
.analytics-table tr:hover td { background: var(--table-row-hover); }

.table-compact td,
.table-compact th {
  padding: 0.15rem 0.4rem;
  font-size: 0.82rem;
  line-height: 1.3;
}

.table-compact .copy-id-btn,
.table-compact .inline-edit-input {
  font-size: 0.78rem;
}

.inline-edit-input {
  width: 100%;
  min-width: 80px;
  padding: 0.15rem 0.3rem;
  font-size: inherit;
  font-family: inherit;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
}

td.inline-edit-cell {
  cursor: text;
}

td.inline-edit-cell:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ---- B9. Tableau hiérarchique ---- */
.auto-ergo-table .deck-filter-row th {
  background: rgba(26, 70, 124, 0.55);
}

.auto-ergo-table .auto-ergo-pinned {
  position: sticky;
}

.auto-ergo-table thead .auto-ergo-pinned {
  background: var(--table-head);
  z-index: 6;
}

.auto-ergo-table .deck-filter-row .auto-ergo-pinned {
  background: rgba(26, 70, 124, 0.8);
  z-index: 5;
}

.auto-ergo-table tbody .auto-ergo-pinned {
  background: rgba(17, 54, 102, 0.96);
  z-index: 4;
}

.hierarchy-tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.hierarchy-tbl th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.45));
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
}
.hierarchy-tbl td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.88rem;
  vertical-align: middle;
}
.hierarchy-tbl tr.depth-1 td:first-child { padding-left: 24px; }
.hierarchy-tbl tr.depth-2 td:first-child {
  padding-left: 42px;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.hierarchy-tbl tr.depth-2 td:first-child::before {
  content: "— ";
  color: var(--accent, #dd9933);
  opacity: 0.5;
}
.hierarchy-tbl .mini-bar {
  height: 5px;
  background: rgba(255,255,255,0.07);
  position: relative;
  min-width: 60px;
}
.hierarchy-tbl .mini-bar > i {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--teal, #008080), var(--accent, #dd9933));
}
.hierarchy-tbl .tag {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted, rgba(255,255,255,0.5));
  border-radius: 2px;
  white-space: nowrap;
}
.hierarchy-tbl .tag.weak {
  color: rgba(174, 54, 81, 0.85);
  border-color: rgba(174, 54, 81, 0.35);
}
.hierarchy-tbl .tag.solid {
  color: rgba(69, 200, 160, 0.85);
  border-color: rgba(69, 200, 160, 0.35);
}
.hierarchy-tbl .trend-up   { color: rgba(69, 200, 160, 0.85); }
.hierarchy-tbl .trend-down { color: rgba(174, 54, 81, 0.85); }
body.ui-theme-artdeco .hierarchy-tbl th {
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.26em;
  color: rgba(221, 153, 51, 0.65);
  border-bottom-color: rgba(221, 153, 51, 0.25);
}
body.ui-theme-artdeco .hierarchy-tbl td {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  border-bottom-color: rgba(221, 153, 51, 0.1);
}
body.ui-theme-artdeco .hierarchy-tbl .tag {
  border-radius: 0;
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.2em;
}
body.ui-theme-artdeco .hierarchy-tbl .mini-bar {
  border: 1px solid rgba(221, 153, 51, 0.1);
}

/* <<< css/components/tables.css */

/* >>> css/components/kpi.css */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.kpi {
  min-width: 0;
}

.kpi-detail {
  color: var(--muted);
  font-size: 0.92rem;
}

.kpi-value.metric-positive,
.kpi b.metric-positive {
  color: var(--metric-success);
}

.kpi-value.metric-neutral,
.kpi b.metric-neutral {
  color: var(--metric-warning);
}

.kpi-value.metric-warning,
.kpi b.metric-warning {
  color: color-mix(in srgb, var(--metric-warning) 80%, var(--metric-risk));
}

.kpi-value.metric-negative,
.kpi b.metric-negative {
  color: var(--metric-risk);
}

.kpi {
  position: relative;
  padding: 0.78rem 0.78rem 0.72rem;
}

.kpi.state-stable {
  border-color: color-mix(in srgb, var(--metric-success) 55%, transparent);
}

.kpi.state-partial {
  border-color: color-mix(in srgb, var(--metric-warning) 55%, transparent);
}

.kpi.state-volatile {
  border-color: color-mix(in srgb, var(--metric-risk) 55%, transparent);
}

.kpi.state-insufficient {
  border-color: color-mix(in srgb, var(--metric-critical) 55%, transparent);
}

.kpi .kpi-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-bottom: 0.26rem;
  padding-right: 1.6rem;
  position: static;
}

.kpi-source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
  background: color-mix(in srgb, var(--metric-coverage) 22%, transparent);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.12rem 0.42rem;
  text-transform: uppercase;
}

.help-with-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.2rem;
}

.kpi .kpi-help,
.help-with-tooltip .kpi-help {
  position: absolute;
  top: 0.55rem;
  right: 0.62rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1;
  cursor: help;
  user-select: none;
}

.help-with-tooltip .kpi-help {
  position: static;
}

.kpi .kpi-tooltip,
.help-with-tooltip .kpi-tooltip {
  position: absolute;
  right: 0.62rem;
  top: 1.65rem;
  min-width: 12rem;
  max-width: 18rem;
  background: var(--surface-panel);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 8px;
  padding: 0.42rem 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.help-with-tooltip .kpi-tooltip {
  left: 0;
  right: auto;
  top: calc(100% + 0.35rem);
}

.kpi .kpi-help:hover + .kpi-tooltip,
.kpi .kpi-tooltip:hover,
.help-with-tooltip .kpi-help:hover + .kpi-tooltip,
.help-with-tooltip .kpi-tooltip:hover {
  opacity: 1;
  transform: translateY(0);
}

.kpi b,
.kpi .kpi-value {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.58rem;
  line-height: 1.2;
}

.kpi .kpi-howto {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.25;
}


/* Harmonisation KPI: Résultats (Simple/Expert) + Analytics admin */
#resultsScreen #kpiCards,
#resultsScreen #progressionKpis,
#resultsScreen #resultsEvolutionCards,
#adminPilotageCards,
#adminMemberAnalytics .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#resultsScreen #kpiCards .kpi,
#resultsScreen #progressionKpis .kpi,
#resultsScreen #resultsEvolutionCards .kpi,
#adminPilotageCards .kpi,
#adminMemberAnalytics .kpi-grid .kpi {
  min-height: 104px;
}

#adminPilotageCards .kpi {
  min-height: 112px;
}

@media (max-width: 1200px) {
  #resultsScreen #kpiCards,
  #resultsScreen #progressionKpis,
  #resultsScreen #resultsEvolutionCards,
  #adminPilotageCards,
  #adminMemberAnalytics .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-pilotage-summary-grid,
  .admin-survey-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  #resultsScreen #kpiCards,
  #resultsScreen #progressionKpis,
  #resultsScreen #resultsEvolutionCards,
  #adminPilotageCards,
  #adminMemberAnalytics .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #resultsScreen #kpiCards,
  #resultsScreen #progressionKpis,
  #resultsScreen #resultsEvolutionCards,
  #adminPilotageCards,
  #adminMemberAnalytics .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Analytics density + a11y (E2.05, E2.07, E2.08) */
:root[data-analytics-density="compact"] .kpi-grid {
  gap: 0.38rem;
}

:root[data-analytics-density="compact"] .kpi {
  padding: 0.38rem 0.5rem;
  min-height: auto;
}

:root[data-analytics-density="compact"] .subpanel {
  padding: 0.55rem 0.65rem;
}

:root[data-analytics-density="expert"] .kpi-grid {
  gap: 0.95rem;
}

:root[data-analytics-density="expert"] .kpi-value {
  font-size: 1.22rem;
}

/* ---- B2. KPI-row (accueil, 4 KPIs en ligne) ---- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  margin: 20px 0;
}
@media (max-width: 720px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr) !important; }
}
.kpi-row .kpi {
  background: var(--surface-panel);
  padding: 18px 16px;
  text-align: center;
}
.kpi-row .kpi .kpi-val {
  font-family: var(--user-font-title, "Italiana", "Cormorant Garamond", serif);
  font-size: 2.2rem;
  color: var(--accent);
  line-height: 1;
}
.kpi-row .kpi .kpi-lbl {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.ui-theme-artdeco .kpi-row {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}
body.ui-theme-artdeco .kpi-row .kpi {
  background: color-mix(in srgb, var(--text) 2%, transparent);
}
body.ui-theme-artdeco .kpi-row .kpi .kpi-lbl {
  font-family: var(--user-font-eyebrow, "Poiret One", "Raleway", sans-serif);
  letter-spacing: 0.22em;
  font-size: 0.68rem;
  color: color-mix(in srgb, var(--text) 48%, transparent);
}

.deck-inbox-table { font-size: 0.82rem; }
.deck-inbox-table .inbox-question-cell {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.inbox-problem-tag {
  display: inline-block;
}

/* <<< css/components/kpi.css */

/* >>> css/components/badges.css */
.status-pill,
.difficulty-badge,
.batch-status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.2rem 0.5rem;
}

.batch-status-chip {
  padding: 0.05rem 0.5rem;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  background: rgba(15, 23, 42, 0.35);
}

.status-pill.is-good,
.badge-success,
.batch-status-chip.status-completed {
  border-color: color-mix(in srgb, var(--metric-success, #6ee7b7) 55%, transparent);
  color: var(--metric-success, #6ee7b7);
}

.status-pill.is-warn,
.badge-warning,
.batch-status-chip.status-running {
  border-color: color-mix(in srgb, var(--metric-warning, #fde68a) 55%, transparent);
  color: var(--metric-warning, #fde68a);
}

.badge-danger,
.batch-status-chip.status-failed {
  border-color: color-mix(in srgb, var(--metric-risk, #fca5a5) 55%, transparent);
  color: var(--metric-risk, #fca5a5);
}

.batch-status-chip.status-rolled_back {
  border-color: rgba(191, 219, 254, 0.55);
  color: #bfdbfe;
}

/* Generic badge system */
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.badge-success { background: rgba(110,231,183,0.18); color: #6ee7b7; border: 1px solid rgba(110,231,183,0.35); }
.badge-warning { background: rgba(253,230,138,0.18); color: #fde68a; border: 1px solid rgba(253,230,138,0.35); }
.badge-error   { background: rgba(252,165,165,0.18); color: #fca5a5; border: 1px solid rgba(252,165,165,0.35); }
.badge-neutral { background: rgba(148,163,184,0.18); color: #94a3b8; border: 1px solid rgba(148,163,184,0.3); }

/* Difficulty status badge */
.difficulty-badge {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}

.difficulty-high   { background: rgba(239, 68, 68, 0.15);  color: #ef4444; }
.difficulty-medium { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.difficulty-ok     { background: rgba(34, 197, 94, 0.15);  color: #22c55e; }
.difficulty-na     { background: rgba(255,255,255,0.07);   color: var(--text-muted, #9bb); }

.badge-archived,
.badge-draft,
.badge-published {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.badge-archived {
  background: var(--line);
  color: var(--muted);
}

.badge-draft {
  background: #f0a500;
  color: #fff;
}

.badge-published {
  background: #27ae60;
  color: #fff;
}

.admin-autosave-badge,
.qcm-autosave-badge {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: var(--bg-alt, #f5f5f5);
  border: 1px solid var(--line);
}

/* ── E17.01 — Badges gamification ────────────────────────────────────────── */

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.badge-card {
  display: grid;
  align-content: start;
  gap: 0.3rem;
  padding: 0.85rem 0.7rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-panel, rgba(14, 37, 73, 0.35));
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s;
}

.badge-card.badge-earned {
  border-color: rgba(240, 178, 74, 0.55);
  background: rgba(240, 178, 74, 0.08);
  box-shadow: 0 0 0 1px rgba(240, 178, 74, 0.18);
}

.badge-card.badge-earned:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(240, 178, 74, 0.22);
}

.badge-card.badge-locked {
  opacity: 0.42;
  filter: grayscale(0.6);
}

.badge-card.badge-tier-silver.badge-earned {
  border-color: rgba(191, 219, 254, 0.5);
  background: rgba(191, 219, 254, 0.07);
  box-shadow: 0 0 0 1px rgba(191, 219, 254, 0.15);
}

.badge-card.badge-tier-gold.badge-earned {
  border-color: rgba(251, 191, 36, 0.7);
  background: rgba(251, 191, 36, 0.1);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25);
}

.badge-icon {
  font-size: 2rem;
  line-height: 1;
}

.badge-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.25;
}

.badge-date {
  font-size: 0.68rem;
  color: var(--muted);
}

/* Compteur badges */
.badges-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.badges-summary h3 {
  margin: 0;
}

.badges-count-pill {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(240, 178, 74, 0.18);
  border: 1px solid rgba(240, 178, 74, 0.38);
  color: var(--accent, #f0b24a);
}

/* ── E17.05 — Overlay de célébration ─────────────────────────────────────── */

#badgeCelebrationOverlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#badgeCelebrationOverlay.active {
  opacity: 1;
  pointer-events: auto;
}

.badge-celebration-card {
  display: grid;
  gap: 0.55rem;
  padding: 2rem 2.5rem;
  border: 2px solid rgba(240, 178, 74, 0.6);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(10, 26, 47, 0.97), rgba(20, 48, 82, 0.97));
  text-align: center;
  animation: badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: min(360px, 90vw);
}

.badge-celebration-card.badge-tier-gold {
  border-color: rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 40px rgba(251, 191, 36, 0.25);
}

.badge-celebration-card.badge-tier-silver {
  border-color: rgba(191, 219, 254, 0.6);
  box-shadow: 0 0 30px rgba(191, 219, 254, 0.2);
}

.badge-celebration-icon {
  font-size: 3.5rem;
  line-height: 1;
  animation: badge-bounce 0.6s 0.2s ease both;
}

.badge-celebration-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent, #f0b24a);
}

.badge-celebration-label {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fg);
}

.badge-celebration-desc {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

@keyframes badge-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@keyframes badge-bounce {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); }
  80%  { transform: scale(0.95) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── E17.06 — Records personnels ─────────────────────────────────────────── */

.records-kpi-row {
  margin-bottom: 0.75rem;
}

.records-deck-details {
  margin-top: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  background: var(--panel-soft);
}

.records-deck-details summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--muted);
}

.records-deck-list {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.records-deck-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.88rem;
  flex-wrap: wrap;
}

.records-deck-name {
  flex: 1 1 auto;
  color: var(--fg);
  font-weight: 600;
}

.records-deck-score {
  font-weight: 800;
  color: var(--accent);
}

/* ── E17.04 — Carte de progression (jalons) ──────────────────────────────── */

.progression-map {
  overflow-x: auto;
  padding: 0.5rem 0 0.75rem;
}

.progression-track {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  padding: 0.25rem 0.5rem;
}

.progression-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 88px;
  padding: 0.5rem 0.35rem;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--surface-panel, rgba(14, 37, 73, 0.35));
  text-align: center;
  transition: transform 0.18s, box-shadow 0.18s;
  position: relative;
  cursor: default;
}

.progression-node.unlocked {
  border-color: rgba(240, 178, 74, 0.55);
  background: rgba(240, 178, 74, 0.07);
  box-shadow: 0 0 0 1px rgba(240, 178, 74, 0.18);
}

.progression-node.locked {
  opacity: 0.38;
  filter: grayscale(0.5);
}

.prog-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.prog-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.2;
  max-width: 80px;
}

.prog-value {
  font-size: 0.65rem;
  color: var(--muted);
}

.progression-connector {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--line);
  flex-shrink: 0;
  border-radius: 2px;
}

.progression-connector.unlocked {
  background: linear-gradient(90deg, rgba(240, 178, 74, 0.7), rgba(240, 178, 74, 0.3));
}

.progression-metrics {
  margin-top: 0.25rem;
}

/* ── E17.02 — Classement hebdomadaire ────────────────────────────────────── */

.leaderboard-self td {
  background: rgba(240, 178, 74, 0.07);
  font-weight: 700;
}

/* ── E17.03 — Défis personnels ───────────────────────────────────────────── */

.challenges-list {
  display: grid;
  gap: 0.75rem;
}

.challenge-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--surface-panel, rgba(14, 37, 73, 0.35));
}

.challenge-card.challenge-done {
  border-color: rgba(110, 231, 183, 0.5);
  background: rgba(110, 231, 183, 0.06);
}

.challenge-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.challenge-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fg);
}

.challenge-delete-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0.3rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.challenge-delete-btn:hover {
  opacity: 1;
  color: var(--metric-risk, #fca5a5);
}

.challenge-desc {
  font-size: 0.8rem;
  margin-bottom: 0.45rem;
}

.challenge-progress-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.challenge-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.challenge-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent, #f0b24a), rgba(240, 178, 74, 0.55));
  transition: width 0.4s ease;
}

.challenge-card.challenge-done .challenge-progress-fill {
  background: linear-gradient(90deg, #6ee7b7, rgba(110, 231, 183, 0.55));
}

.challenge-progress-label {
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--muted);
}

/* §8.5 — Détail périmètre sous le KPI réussite */
.kpi-detail {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted, #9bb);
  font-weight: 400;
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* <<< css/components/badges.css */


/* Appearance and utilities */
/* >>> css/appearance/panel.css */

/* Screen Options */
.screen-options-wrap {
  position: relative;
}

.screen-options-btn {
  font-size: 0.8rem !important;
  padding: 0.3em 0.75em !important;
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.screen-options-btn .sopt-caret {
  font-size: 0.65rem;
  transition: transform 0.15s;
}

.screen-options-btn[aria-expanded="true"] .sopt-caret {
  transform: rotate(180deg);
}

.screen-options-panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 200;
  min-width: 240px;
  background: var(--surface, #1a2332);
  border: 1px solid var(--line, rgba(255,255,255,.14));
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 0.75rem 1rem 1rem;
}

.screen-options-panel h4 {
  margin: 0 0 0.6rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: 600;
}

.screen-options-grid {
  display: grid;
  gap: 0.45rem;
}

.screen-options-grid label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0;
}

.screen-options-grid input[type="checkbox"] {
  accent-color: var(--accent, #58c8d4);
  cursor: pointer;
}

.screen-options-hint {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  color: var(--muted);
}

/* ---- STYLE DES BLOCS (radius) ---- */

body.ui-radius-sharp .panel,
body.ui-radius-sharp .subpanel,
body.ui-radius-sharp .app-header,
body.ui-radius-sharp .session-header,
body.ui-radius-sharp button:not(.icon-button),
body.ui-radius-sharp input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.ui-radius-sharp select,
body.ui-radius-sharp textarea {
  border-radius: 0;
}

body.ui-radius-rounded .panel { border-radius: 14px; }
body.ui-radius-rounded .subpanel { border-radius: 10px; }

/* ---- PANNEAU APPARENCE ---- */

.appearance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem 1.4rem;
  margin-top: 0.75rem;
}

.appearance-full-width {
  grid-column: 1 / -1;
}

.appearance-ornament-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.appearance-ornament-row input[type=range] {
  flex: 1;
  accent-color: var(--accent);
  cursor: pointer;
}

.appearance-ornament-val {
  font-size: 0.82rem;
  color: var(--muted);
  min-width: 3.5ch;
  text-align: right;
}

.appearance-preview-note {
  margin-top: 0.5rem;
  font-size: 0.83rem;
  color: var(--muted);
  font-style: italic;
}


.appearance-showcase {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.appearance-swatch {
  position: relative;
  padding: 1rem 1rem 0.95rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, rgba(255, 255, 255, 0.06));
  background:
    linear-gradient(140deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    rgba(255, 255, 255, 0.04);
}

.appearance-swatch::after {
  content: "";
  position: absolute;
  inset: auto 1rem 0.7rem;
  height: 1px;
  background: linear-gradient(90deg, var(--app-ornament-line), transparent);
  opacity: calc(0.4 + var(--ui-ornament) * 0.4);
}

.appearance-swatch-badge {
  display: inline-flex;
  margin-bottom: 0.6rem;
  color: var(--accent);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.appearance-swatch strong {
  display: block;
  margin-bottom: 0.28rem;
  font-size: 0.98rem;
}

.appearance-swatch p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.appearance-showcase-controls {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}

.appearance-showcase-controls .appearance-swatch {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
}

.appearance-control-stack {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.appearance-control-stack .field-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.appearance-control-stack .field-group label {
  margin-bottom: 0.45rem;
  color: color-mix(in srgb, var(--muted) 62%, var(--accent) 38%);
  font-family: "Poiret One", "Raleway", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.appearance-control-stack .field-group label span {
  color: var(--accent);
}

.appearance-control-stack select {
  min-height: 42px;
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--app-radius-tight);
  background-color: color-mix(in srgb, var(--bg) 54%, rgba(255, 255, 255, 0.04));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.appearance-control-stack select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 72%, white 8%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.appearance-control-stack .appearance-ornament-row {
  padding: 0.15rem 0 0.05rem;
}

.appearance-control-stack .appearance-ornament-row input[type="range"] {
  accent-color: var(--accent);
  height: 0.42rem;
}

.appearance-control-stack .appearance-ornament-row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.42rem;
}

.appearance-grid .field-group {
  padding: 0.85rem 0.95rem 0.95rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, rgba(255, 255, 255, 0.06));
  background: rgba(255, 255, 255, 0.03);
}

.appearance-grid .field-group label {
  display: block;
  margin-bottom: 0.5rem;
}

.appearance-grid select,
.appearance-grid input[type="range"] {
  width: 100%;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.appearance-shell {
  position: relative;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 16%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 82%, #113c20), color-mix(in srgb, var(--bg) 90%, #082615));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(255, 215, 0, 0.03);
}

.appearance-shell::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 215, 0, 0.08);
  pointer-events: none;
}

.appearance-shell::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 18px;
  height: 18px;
  border-right: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  pointer-events: none;
}

.appearance-shell-header {
  position: relative;
  padding: 0.2rem 0 0.85rem;
  margin: 0 0 0.85rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.06));
}

.appearance-shell-kicker {
  display: inline-flex;
  color: var(--accent);
  font-family: "Poiret One", "Raleway", sans-serif;
  font-size: 1.02rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.appearance-grid-editorial {
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 0;
}

.appearance-grid-editorial .field-group {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.appearance-grid-editorial .field-group label {
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--muted) 62%, var(--accent) 38%);
  font-family: "Poiret One", "Raleway", sans-serif;
  font-size: 0.84rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.appearance-grid-editorial .field-group label span {
  color: var(--accent);
}

.appearance-grid-editorial select {
  min-height: 42px;
  padding: 0.72rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 0;
  background: rgba(4, 24, 13, 0.24);
  color: var(--text);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 0.98rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.appearance-grid-editorial select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 72%, white 8%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
}

.appearance-palette-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.18rem;
  padding: 0.05rem 0 0.15rem;
}

.appearance-palette-chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.appearance-palette-chip:hover,
.appearance-palette-chip:focus-visible {
  transform: translateY(-1px) scale(1.04);
  filter: brightness(1.08);
  outline: none;
}

.appearance-palette-chip.is-active::after {
  content: "";
  position: absolute;
  inset: 0.28rem;
  border: 1px solid color-mix(in srgb, var(--accent) 86%, white 14%);
  transform: rotate(45deg);
  pointer-events: none;
}

.appearance-palette-diamond {
  position: relative;
  display: block;
  width: 1.95rem;
  height: 1.95rem;
  transform: rotate(45deg);
  border: 1px solid color-mix(in srgb, var(--diamond-accent, var(--accent)) 72%, rgba(255, 255, 255, 0.15));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 8px 14px -12px rgba(0, 0, 0, 0.55);
}

.appearance-palette-diamond::before,
.appearance-palette-diamond::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 170%;
  background: rgba(255, 255, 255, 0.22);
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
}

.appearance-palette-diamond::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.appearance-palette-diamond.is-default {
  --diamond-accent: #d7b04e;
  background:
    conic-gradient(
      from 45deg,
      #f5ecd6 0deg 90deg,
      #1e4b38 90deg 180deg,
      #0d2230 180deg 270deg,
      #d7b04e 270deg 360deg
    );
}

.appearance-palette-diamond.palette-sapphire {
  --diamond-accent: #dd9933;
  background:
    conic-gradient(
      from 45deg,
      #f4f8ff 0deg 90deg,
      #1d3768 90deg 180deg,
      #005f5d 180deg 270deg,
      #dd9933 270deg 360deg
    );
}

.appearance-palette-diamond.palette-emerald {
  --diamond-accent: #e8c84a;
  background:
    conic-gradient(
      from 45deg,
      #e8f6ed 0deg 90deg,
      #0c3320 90deg 180deg,
      #1c7a40 180deg 270deg,
      #e8c84a 270deg 360deg
    );
}

.appearance-palette-diamond.palette-ivory {
  --diamond-accent: #c87820;
  background:
    conic-gradient(
      from 45deg,
      #faf4e8 0deg 90deg,
      #f0e8d8 90deg 180deg,
      #8b4a0a 180deg 270deg,
      #c87820 270deg 360deg
    );
}

.appearance-palette-diamond.palette-bordeaux {
  --diamond-accent: #d4a840;
  background:
    conic-gradient(
      from 45deg,
      #fce8ec 0deg 90deg,
      #2d0010 90deg 180deg,
      #8c2035 180deg 270deg,
      #d4a840 270deg 360deg
    );
}

.appearance-palette-diamond.palette-amethyst {
  --diamond-accent: #ff78c0;
  background:
    conic-gradient(
      from 45deg,
      #f0e8ff 0deg 90deg,
      #280d3c 90deg 180deg,
      #7020c8 180deg 270deg,
      #ff78c0 270deg 360deg
    );
}

.appearance-palette-diamond.palette-slate {
  --diamond-accent: #58c8d4;
  background:
    conic-gradient(
      from 45deg,
      #dde8f6 0deg 90deg,
      #172030 90deg 180deg,
      #2e6496 180deg 270deg,
      #58c8d4 270deg 360deg
    );
}

.appearance-palette-diamond.palette-forest {
  --diamond-accent: #e8c84a;
  background:
    conic-gradient(
      from 45deg,
      #e8f6ed 0deg 90deg,
      #041a0d 90deg 180deg,
      #1c7a40 180deg 270deg,
      #e8c84a 270deg 360deg
    );
}

.appearance-palette-diamond.palette-sunset {
  --diamond-accent: #ff8c00;
  background:
    conic-gradient(
      from 45deg,
      #fff0e0 0deg 90deg,
      #1c0a00 90deg 180deg,
      #9a4200 180deg 270deg,
      #ff8c00 270deg 360deg
    );
}

.appearance-palette-diamond.palette-aurora {
  --diamond-accent: #00e8a8;
  background:
    conic-gradient(
      from 45deg,
      #ccf2e6 0deg 90deg,
      #030e18 90deg 180deg,
      #006860 180deg 270deg,
      #00e8a8 270deg 360deg
    );
}

.appearance-palette-diamond.palette-frost {
  --diamond-accent: #40d8ff;
  background:
    conic-gradient(
      from 45deg,
      #ddf2ff 0deg 90deg,
      #060e1a 90deg 180deg,
      #0870c8 180deg 270deg,
      #40d8ff 270deg 360deg
    );
}

.appearance-palette-diamond.palette-rose {
  --diamond-accent: #ff78b8;
  background:
    conic-gradient(
      from 45deg,
      #ffe8f0 0deg 90deg,
      #190810 90deg 180deg,
      #8c2035 180deg 270deg,
      #ff78b8 270deg 360deg
    );
}

.appearance-palette-diamond.palette-cloud {
  --diamond-accent: #0888cc;
  background:
    conic-gradient(
      from 45deg,
      #f4f8ff 0deg 90deg,
      #d8e4f4 90deg 180deg,
      #1a5fa8 180deg 270deg,
      #0888cc 270deg 360deg
    );
}

.appearance-palette-diamond.palette-meadow {
  --diamond-accent: #28a848;
  background:
    conic-gradient(
      from 45deg,
      #f4fff6 0deg 90deg,
      #dceee0 90deg 180deg,
      #1a6a30 180deg 270deg,
      #28a848 270deg 360deg
    );
}

.appearance-grid-editorial .appearance-ornament-row {
  padding: 0.15rem 0 0.05rem;
}

.appearance-grid-editorial .appearance-ornament-row input[type="range"] {
  accent-color: var(--accent);
  height: 0.42rem;
}

.appearance-grid-editorial .appearance-ornament-row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.42rem;
}

.appearance-preview-note {
  margin-top: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

body.ui-theme-artdeco .appearance-shell {
  border-radius: 0;
  padding: 0.85rem 0.95rem 0.95rem;
  background:
    linear-gradient(180deg, rgba(221, 153, 51, 0.04), transparent 16%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-top) 90%, #18371f), color-mix(in srgb, var(--bg) 96%, #0a2614));
}

body.ui-theme-artdeco .appearance-shell-header {
  border-bottom-color: rgba(221, 153, 51, 0.18);
}

body.ui-theme-artdeco .appearance-grid-editorial .field-group label,
body.ui-theme-artdeco .appearance-control-stack .field-group label,
body.ui-theme-artdeco .appearance-shell-kicker {
  color: color-mix(in srgb, var(--accent) 84%, #f6ecd6 16%);
}

body.ui-theme-artdeco .appearance-grid-editorial select,
body.ui-theme-artdeco .appearance-control-stack select {
  border-radius: 0;
  background: rgba(4, 24, 13, 0.22);
  border-color: rgba(221, 153, 51, 0.22);
}

body.ui-theme-artdeco .appearance-swatch {
  border-radius: 0;
  border-color: rgba(221, 153, 51, 0.16);
  background:
    linear-gradient(180deg, rgba(221, 153, 51, 0.05), transparent 34%),
    rgba(8, 38, 20, 0.38);
}

body.ui-theme-artdeco .appearance-swatch::after {
  background: linear-gradient(90deg, rgba(221, 153, 51, 0.6), transparent);
}

body.ui-theme-artdeco .appearance-showcase {
  margin-bottom: 0.7rem;
}

@media (max-width: 700px) {
  .appearance-shell {
    padding: 0.85rem 0.8rem 0.9rem;
  }

  .appearance-palette-grid {
    gap: 0.12rem;
  }

  .appearance-palette-chip {
    width: 2.45rem;
    height: 2.45rem;
  }

  .appearance-palette-diamond {
    width: 1.45rem;
    height: 1.45rem;
  }
}

.flashcard-review-card {
  position: relative;
  min-height: 176px;
  isolation: isolate;
  overflow: hidden;
  align-items: stretch;
  perspective: 1200px;
}

.flashcard-review-card::after {
  content: "";
  position: absolute;
  inset: auto -16% -55% auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 24%, transparent), transparent 68%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.flashcard-front,
.flashcard-back {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  transition:
    opacity 300ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms ease,
    border-color 240ms ease;
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.flashcard-front {
  box-shadow: 0 14px 30px -26px rgba(0, 0, 0, 0.55);
}

.flashcard-back {
  opacity: 0;
  pointer-events: none;
  transform: rotateX(-18deg) translateY(14px) scale(0.985);
  box-shadow: 0 18px 30px -26px rgba(0, 0, 0, 0.48);
}

.flashcard-review-card.is-revealed .flashcard-front {
  opacity: 0.03;
  transform: rotateX(28deg) translateY(-20px) scale(0.97);
  pointer-events: none;
}

.flashcard-review-card.is-revealed .flashcard-back {
  opacity: 1;
  pointer-events: auto;
  transform: rotateX(0) translateY(0) scale(1.015);
}

.flashcard-review-card.is-flipping .flashcard-back,
.flashcard-review-card.is-flipping .flashcard-front {
  transition-duration: 520ms, 620ms, 280ms, 240ms;
}

.flashcard-review-card.is-review-success {
  animation: flashcard-review-success 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flashcard-review-card.is-review-fail {
  animation: flashcard-review-fail 430ms cubic-bezier(0.22, 1, 0.36, 1);
}

#flashcardFlipBtn,
#flashcardAgainBtn,
#flashcardKnownBtn,
#flashcardFeedbackBtn {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

#flashcardFlipBtn:hover,
#flashcardAgainBtn:hover,
#flashcardKnownBtn:hover,
#flashcardFeedbackBtn:hover {
  transform: translateY(-1px);
}

/* ---- B-ter. Panneau Tweaks intégré (section Apparence dans Paramètres) ---- */
.tweaks-section {
  padding: 20px 0;
  border-top: 1px solid var(--border, rgba(255,255,255,0.1));
}
.tweaks-section + .tweaks-section {
  margin-top: 4px;
}
.tweaks-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.tweaks-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.5));
  display: flex;
  align-items: center;
  gap: 8px;
}
.tweaks-label .tweaks-val {
  color: var(--accent, #dd9933);
  font-weight: 700;
}
/* Swatches palette en losange */
.tweaks-swatches {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.tweaks-swatch {
  width: 32px;
  height: 32px;
  transform: rotate(45deg);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.tweaks-swatch:hover {
  transform: rotate(45deg) scale(1.1);
}
.tweaks-swatch.active {
  border-color: var(--accent, #dd9933);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
/* Couleurs des swatches */
.tweaks-swatch[data-palette=""]         { background: linear-gradient(135deg, #005f5d, #0d3b66); }
.tweaks-swatch[data-palette="sapphire"] { background: linear-gradient(135deg, #800020, #7bb8ff); }
.tweaks-swatch[data-palette="emerald"]  { background: linear-gradient(135deg, #8b2020, #4fc9c8); }
.tweaks-swatch[data-palette="ivory"]    { background: linear-gradient(135deg, #b02018, #2080a0); }
.tweaks-swatch[data-palette="bordeaux"] { background: linear-gradient(135deg, #c82020, #c878a0); }
.tweaks-swatch[data-palette="amethyst"] { background: linear-gradient(135deg, #c02050, #80c8ff); }
.tweaks-swatch[data-palette="slate"]    { background: linear-gradient(135deg, #c0392b, #a0c8f0); }
body.ui-theme-artdeco .tweaks-section {
  border-top-color: rgba(221, 153, 51, 0.2);
}
body.ui-theme-artdeco .tweaks-label {
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.3em;
  color: rgba(245, 236, 214, 0.45);
}
body.ui-theme-artdeco .tweaks-label .tweaks-val {
  color: rgba(221, 153, 51, 0.85);
}

/* ============================================================
   FLOATING TWEAKS FAB — accès rapide à la personnalisation
   ============================================================ */

.tweaks-fab-wrap {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.tweaks-fab {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--accent, #dd9933);
  background: var(--surface-panel, #0d3b66);
  color: var(--accent, #dd9933);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px -6px rgba(0, 0, 0, 0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  flex-shrink: 0;
}

.tweaks-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.65);
  background: color-mix(in srgb, var(--surface-panel, #0d3b66) 80%, var(--accent, #dd9933) 20%);
}

.tweaks-fab.is-open {
  background: var(--accent, #dd9933);
  color: var(--bg, #000080);
}

.tweaks-panel {
  width: 280px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    var(--surface-panel, #0d3b66);
  border: 1px solid color-mix(in srgb, var(--accent, #dd9933) 55%, transparent);
  border-radius: var(--app-radius, 8px);
  padding: 14px 16px 16px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.75);
  display: none;
}

.tweaks-panel.is-open {
  display: block;
  animation: tweaks-in 0.18s ease;
}

@keyframes tweaks-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.tweaks-panel-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tweaks-panel-title {
  font-family: var(--user-font-eyebrow, "Raleway", sans-serif);
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent, #dd9933);
}

.tweaks-panel-close {
  background: transparent;
  border: none;
  color: var(--muted, #c8d7e6);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.tweaks-panel-close:hover { opacity: 1; }

.tweaks-row {
  margin-bottom: 11px;
}

.tweaks-row label {
  display: block;
  font-family: var(--user-font-eyebrow, "Raleway", sans-serif);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted, #c8d7e6);
  margin-bottom: 5px;
  opacity: 0.75;
}

.tweaks-row select,
.tweaks-row input[type="range"] {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  color: var(--text, #f4f8ff);
  font-size: 13px;
  padding: 5px 7px;
}

.tweaks-row input[type="range"] {
  padding: 0;
  accent-color: var(--accent, #dd9933);
}

.tweaks-row-half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Palette swatches */
.tweaks-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tweaks-swatch {
  background: transparent;
  border: none;
  padding: 1px;
  cursor: pointer;
  border-radius: 50%;
}

.tweaks-swatch-dot,
.tweaks-swatch .appearance-palette-diamond {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}

.tweaks-swatch.is-active .tweaks-swatch-dot,
.tweaks-swatch.is-active .appearance-palette-diamond {
  border-color: var(--accent, #dd9933);
  transform: scale(1.15);
}

.tweaks-swatch-dot.is-default {
  background: linear-gradient(135deg, var(--primary, #005f5d) 50%, var(--accent, #dd9933) 50%);
}

/* Art Deco tweaks panel overrides */
body.ui-theme-artdeco .tweaks-panel {
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent),
    #0c1a22;
  border-color: rgba(221, 153, 51, 0.55);
}

body.ui-theme-artdeco .tweaks-fab {
  border-radius: 0;
  transform: rotate(45deg);
}

body.ui-theme-artdeco .tweaks-fab > svg {
  transform: rotate(-45deg);
}

body.ui-theme-artdeco .tweaks-fab:hover {
  transform: rotate(45deg) scale(1.06);
}

body.ui-theme-artdeco .tweaks-fab.is-open {
  transform: rotate(45deg);
}

/* Medieval tweaks panel */
body.ui-theme-medieval .tweaks-panel {
  border-radius: 3px;
}

body.ui-theme-medieval .tweaks-panel-title {
  font-family: var(--user-font-eyebrow);
  letter-spacing: 0.18em;
}

/* Modern tweaks panel */
body.ui-theme-modern .tweaks-panel {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.1);
}

body.ui-theme-modern .tweaks-fab {
  border-radius: 14px;
}

@media (max-width: 480px) {
  .tweaks-fab-wrap {
    bottom: 14px;
    right: 14px;
  }
  .tweaks-panel {
    width: calc(100vw - 28px);
  }
}

/* <<< css/appearance/panel.css */

/* >>> css/utilities/states.css */
.metric-positive,
.delta-positive {
  color: #86efac;
  font-weight: 700;
}

.metric-neutral,
.delta-neutral {
  color: #fde68a;
  font-weight: 700;
}

.metric-warning {
  color: #fdba74;
  font-weight: 700;
}

.metric-negative,
.delta-negative {
  color: #fecaca;
  font-weight: 700;
}

.delta-positive {
  color: #6ee7b7;
}

.delta-neutral {
  color: #cbd5e1;
}

.delta-negative {
  color: #fca5a5;
}

.is-selected {
  outline: 1px solid var(--accent);
}

.is-related {
  background: rgba(125, 182, 235, 0.08);
}

.is-dragging {
  opacity: 0.65;
}

.is-drag-over {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}

/* Insight list for signals */
.insight-list {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.insight-list li {
  padding: 0.35rem 0.6rem;
  border-radius: 5px;
  font-size: 0.84rem;
}
.insight-risk    { background: rgba(252,165,165,0.12); border-left: 3px solid #fca5a5; }
.insight-warning { background: rgba(253,230,138,0.1);  border-left: 3px solid #fde68a; }

/* E43.04 + E43.05 — Theme delta sections (better / worse than usual) */
.theme-delta-section {
  margin: 0.5rem 0 0.25rem;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  font-size: 0.84rem;
}
.theme-delta--better {
  background: color-mix(in srgb, var(--success, #16a34a) 8%, transparent);
  border-left: 3px solid var(--success, #16a34a);
}
.theme-delta--worse {
  background: color-mix(in srgb, var(--warning, #d97706) 8%, transparent);
  border-left: 3px solid var(--warning, #d97706);
}
.theme-delta-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.theme-delta-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.theme-delta-list li {
  padding: 0.15rem 0;
}

/* Color helpers */
.text-risk     { color: var(--metric-risk); }
.text-positive { color: var(--metric-success); }

/* Empty states */
.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  text-align: center;
  gap: 0.45rem;
}

.admin-empty-icon {
  font-size: 2.2rem;
  opacity: 0.55;
  display: block;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.admin-empty-title {
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  font-size: 0.95rem;
}

.admin-empty-hint {
  font-size: 0.83rem;
  color: var(--muted);
  margin: 0;
  max-width: 300px;
  line-height: 1.45;
}

.admin-empty-cta {
  margin-top: 0.5rem;
}

/* Undo banner */
.admin-undo-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid #fbbf24;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.42);
  font-size: 0.875rem;
  z-index: 9998;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
}

.admin-undo-banner.hidden {
  display: none !important;
}

.undo-msg {
  color: var(--fg);
}

.undo-msg strong {
  color: #fbbf24;
  font-weight: 700;
}

.undo-btn {
  background: #fbbf24;
  color: #1a1a1a;
  border: none;
  border-radius: 5px;
  padding: 0.28rem 0.8rem;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.undo-btn:hover {
  background: #f59e0b;
}

.undo-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0;
  line-height: 1;
  transition: color 0.12s;
  flex-shrink: 0;
}

.undo-dismiss:hover {
  color: var(--fg);
}

.unsaved-indicator {
  display: none;
  color: #e67e22;
  font-size: 0.82rem;
  font-weight: 600;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.unsaved-indicator.visible {
  display: inline;
}

/* Skeleton loaders */
@keyframes skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.skeleton-row {
  height: 1.4rem;
  border-radius: 4px;
  margin: 0.4rem 0;
  background: linear-gradient(90deg, var(--line) 25%, var(--panel) 50%, var(--line) 75%);
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
}

.skeleton-table {
  padding: 0.5rem;
}

.skeleton-table .skeleton-row:first-child {
  width: 60%;
}

.skeleton-table .skeleton-row {
  width: 100%;
}

/* ── E34 — Import engine UI ───────────────────────────────────────────────── */
.csv-schema-check {
  margin: 0.6rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  border-left: 3px solid var(--accent, #58c8d4);
  background: var(--surface-subpanel, rgba(255,255,255,0.04));
  font-size: 0.9rem;
}

.csv-schema-check.csv-schema-error {
  border-left-color: #ef4444;
  background: rgba(239,68,68,0.06);
}

.csv-schema-list {
  margin: 0.3rem 0 0.2rem;
  padding-left: 1.2rem;
}

.csv-xref-block {
  margin: 0.6rem 0;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  border-left: 3px solid #a78bfa;
  background: var(--surface-subpanel, rgba(255,255,255,0.04));
  font-size: 0.9rem;
}

.csv-near-dups {
  border-left: 3px solid #f59e0b !important;
  background: rgba(245,158,11,0.06) !important;
}

.csv-near-dups ul {
  margin: 0.3rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
}

/* <<< css/utilities/states.css */

/* >>> css/utilities/pills.css */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 700;
  line-height: 1.2;
  padding: 0.22rem 0.58rem;
}

.pill.gold {
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
  color: var(--accent);
}

/* ---- A8. Pill dorée ---- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border: 1px solid var(--border, rgba(255,255,255,0.15));
  color: var(--text-muted, rgba(255,255,255,0.6));
  font-family: "Raleway", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 4px);
  white-space: nowrap;
}
.pill.gold {
  border-color: var(--accent, #dd9933);
  color: var(--accent, #dd9933);
}
body.ui-theme-artdeco .pill {
  border-radius: 0;
  font-family: "Poiret One", "Raleway", sans-serif;
  letter-spacing: 0.28em;
  font-size: 0.7rem;
}
body.ui-theme-artdeco .pill.gold {
  border-color: rgba(221, 153, 51, 0.7);
  color: rgba(221, 153, 51, 0.92);
}

/* <<< css/utilities/pills.css */

/* >>> css/utilities/ornaments.css */

/* ---- INTERPRETATION DES MOTIFS SELON LE THEME ---- */

body.ui-theme-artdeco.bg-pattern-chevrons .app::before,
body.ui-theme-artdeco.bg-pattern-grid .app::before,
body.ui-theme-artdeco.bg-pattern-rays .app::before {
  opacity: calc(0.09 * max(var(--ui-ornament, 0.6), 0.42));
}

body.ui-theme-modern.bg-pattern-chevrons .app::before,
body.ui-theme-modern.bg-pattern-grid .app::before,
body.ui-theme-modern.bg-pattern-rays .app::before {
  opacity: 0.038;
}

body.ui-theme-modern.bg-pattern-chevrons .app::before {
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 38px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 38px);
}

body.ui-theme-modern.bg-pattern-grid .app::before {
  background-size: 40px 40px;
}

body.ui-theme-modern.bg-pattern-rays .app::before {
  opacity: 0.03;
}

body.ui-theme-classic.bg-pattern-chevrons .app::before,
body:not([class*="ui-theme-"]).bg-pattern-chevrons .app::before,
body.ui-theme-classic.bg-pattern-grid .app::before,
body:not([class*="ui-theme-"]).bg-pattern-grid .app::before,
body.ui-theme-classic.bg-pattern-rays .app::before,
body:not([class*="ui-theme-"]).bg-pattern-rays .app::before {
  opacity: 0.055;
}

body.ui-theme-night.bg-pattern-chevrons .app::before,
body.ui-theme-night.bg-pattern-grid .app::before,
body.ui-theme-night.bg-pattern-rays .app::before {
  opacity: 0.03;
  filter: saturate(0.72);
}

body.ui-theme-night.bg-pattern-grid .app::before {
  background-size: 36px 36px;
}

body.ui-theme-editorial-light.bg-pattern-chevrons .app::before,
body.ui-theme-editorial-light.bg-pattern-grid .app::before,
body.ui-theme-editorial-light.bg-pattern-rays .app::before {
  opacity: 0.045;
}

body.ui-theme-editorial-light.bg-pattern-chevrons .app::before {
  background-image:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 34px);
}

body.ui-theme-editorial-light.bg-pattern-grid .app::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
}

body.ui-theme-editorial-light.bg-pattern-rays .app::before {
  background-image: repeating-conic-gradient(
    from 180deg at 50% 12%,
    rgba(0, 0, 0, 0.08) 0deg 1deg,
    transparent 1deg 8deg
  );
}

/* ---- MOTIFS DE FOND (standalone) ---- */

body.bg-pattern-chevrons::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.05 * var(--ui-ornament, 0.7));
  background-image:
    repeating-linear-gradient(135deg, var(--accent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(45deg, var(--accent) 0 1px, transparent 1px 22px);
  mask: radial-gradient(ellipse at center, #000 15%, transparent 72%);
  -webkit-mask: radial-gradient(ellipse at center, #000 15%, transparent 72%);
}

body.bg-pattern-chevrons .app::before {
  opacity: calc(0.075 * max(var(--ui-ornament, 0.4), 0.28));
  background-image:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 18%, transparent) 0 1px, transparent 1px 28px);
  mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

body.bg-pattern-grid::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.06 * var(--ui-ornament, 0.7));
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 28px;
}

body.bg-pattern-grid .app::before {
  opacity: calc(0.08 * max(var(--ui-ornament, 0.4), 0.3));
  background-image:
    linear-gradient(color-mix(in srgb, var(--line) 76%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line) 76%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  mask: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

body.bg-pattern-rays::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: calc(0.07 * var(--ui-ornament, 0.7));
  background-image: repeating-conic-gradient(
    var(--accent) 0deg 1deg,
    transparent 1deg 7deg
  );
  mask: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}

body.bg-pattern-rays .app::before {
  opacity: calc(0.065 * max(var(--ui-ornament, 0.4), 0.28));
  background-image: repeating-conic-gradient(
    from 180deg at 50% 12%,
    color-mix(in srgb, var(--accent) 20%, transparent) 0deg 1deg,
    transparent 1deg 8deg
  );
  mask: radial-gradient(circle at 50% 12%, #000 0%, #000 24%, transparent 72%);
  -webkit-mask: radial-gradient(circle at 50% 12%, #000 0%, #000 24%, transparent 72%);
}

/* ---- C2. Title-divider & Fleuron-divider ---- */
.title-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.title-divider h2,
.title-divider h3 {
  flex-shrink: 0;
}
.title-divider .line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--accent, #dd9933), transparent);
  opacity: 0.35;
}
.title-divider .ball {
  width: 6px;
  height: 6px;
  background: var(--accent, #dd9933);
  transform: rotate(45deg);
  flex-shrink: 0;
  opacity: 0.6;
}
.fleuron-divider {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 14px 0;
  color: var(--accent, #dd9933);
  opacity: 0.55;
}
body.ui-theme-artdeco .title-divider .line {
  opacity: calc(0.4 * var(--ui-ornament));
}
body.ui-theme-artdeco .title-divider .ball {
  opacity: calc(0.7 * var(--ui-ornament));
}
body.ui-theme-artdeco .fleuron-divider {
  opacity: calc(0.6 * var(--ui-ornament));
}

/* <<< css/utilities/ornaments.css */

/* >>> css/utilities/print.css */

/* E2.12 — Export-safe kit */
.export-safe, .export-safe * {
  background: #fff !important;
  color: #111 !important;
  border-color: #999 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  animation: none !important;
  transition: none !important;
}
.export-safe .kpi { border: 1px solid #bbb !important; page-break-inside: avoid; }
.export-safe .badge { border: 1px solid #999 !important; background: #eee !important; }

  .deck-code-row {
    grid-template-columns: 1fr;
  }
}

@media print {
  .no-print,
  .global-nav,
  .app-header,
  #backToResultsHubFromQcmBtn,
  #backToResultsFromFlashcardsResultsBtn,
  #exportPdfBtn {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

/* <<< css/utilities/print.css */


/* Responsive */
/* >>> css/responsive/breakpoints.css */
/* Responsive rules consolidated after the legacy CSS split. */

@media (max-width: 1080px) {
  #adminDecksPanel .deck-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-global-ux-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-layout-presets {
    min-width: 0;
  }

  .admin-theme-global-control {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 700px) {
  #adminDecksPanel .deck-form-grid,
  #adminDecksPanel .admin-deck-bulk-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 960px) {
  .admin-pilotage-landing-grid,
  .admin-survey-focus-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  }

  .table-resizable {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .sat-visual-mini-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
}

@media (max-width: 600px) {
  :root[data-analytics-density="compact"] .kpi-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* E2.11 — High-density decisional mode */
@media (min-width: 1440px) {
  body.density-high .kpi-grid { grid-template-columns: repeat(6, 1fr); gap: 0.3rem; }
  body.density-high .kpi { padding: 0.4rem 0.5rem; font-size: 0.82rem; }
  body.density-high .subpanel { padding: 0.5rem; }
  body.density-high h3, body.density-high h4 { font-size: 0.9rem; margin-bottom: 0.3rem; }
  body.density-high .inline-actions { gap: 0.3rem; }
}
body.density-high .kpi-label { font-size: 0.78rem; }
body.density-high .kpi-value { font-size: 1rem; }

@media (max-width: 1180px) {
  .admin-pilotage-kpi-grid,
  .admin-pilotage-route-workspace.view-overview #adminPilotageCards > .kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-pilotage-route-workspace.view-overview #adminPilotageAlerts,
  .admin-pilotage-route-workspace.view-overview #adminPilotageCohorts {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .admin-pilotage-context-grid,
  .admin-pilotage-kpi-grid,
  .admin-pilotage-route-workspace.view-overview #adminPilotageCards > .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .admin-pilotage-context-grid,
  .admin-pilotage-kpi-grid,
  .admin-pilotage-route-workspace.view-overview #adminPilotageCards > .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── E40 — Responsive / mise en page liquide ─────────────────────────────────
   Breakpoints :
     ≤768px  — tablette portrait / grand smartphone
     ≤480px  — smartphone compact
     ≥1400px — écran large / ultrawide
   ─────────────────────────────────────────────────────────────────────────── */

/* ── ≥1400px — écran large ─────────────────────────────────────────────────── */
@media (min-width: 1400px) {
  .app {
    gap: 1.25rem;
  }

  .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .metabox-body {
    padding: 1.25rem 1.5rem;
  }

  .results-bottom-grid {
    grid-template-columns: 3fr 1fr;
  }

  .panel {
    padding: 1.4rem;
  }
}

/* ── ≤768px — tablette / smartphone ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .app {
    width: min(100vw - 1rem, 1520px);
    margin: 0.5rem auto 1rem;
  }

  /* Panels & subpanels */
  .panel {
    padding: 0.75rem;
    border-radius: 10px;
  }

  .subpanel {
    padding: 0.7rem;
    border-radius: 8px;
  }

  /* Session header — stack title + actions */
  .session-header {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 10px;
  }

  .session-header h2 {
    font-size: 1.15rem;
    flex: 1 1 100%;
  }

  .session-header .inline-actions {
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  /* KPI grid — 2 colonnes max */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .kpi b {
    font-size: 1.25rem;
  }

  .kpi span {
    font-size: 0.85rem;
  }

  /* Quiz screen */
  #quizScreen {
    padding: 0.75rem;
  }

  #quizScreen .session-header {
    padding: 0.6rem 0.75rem;
  }

  #questionText {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .options {
    gap: 0.5rem;
    margin-top: 0.65rem;
  }

  .option-btn {
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    min-height: 2.8rem;
  }

  #quizConfidenceWrap {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  /* Results screen */
  .results-analytics-tabs {
    gap: 0.35rem;
  }

  .results-analytics-tabs .tab-btn {
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
  }

  .results-hero-kpis {
    padding: 0.75rem;
  }

  /* Metaboxes */
  .metabox-header {
    padding: 0.6rem 0.75rem;
  }

  .metabox-header h3 {
    font-size: 0.9rem;
  }

  .metabox-body {
    padding: 0.75rem;
  }

  /* Screen Options — pleine largeur en mobile */
  .screen-options-wrap {
    position: static;
  }

  .screen-options-panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0.75rem 0.75rem 0 0;
    z-index: 300;
  }

  /* inline-actions — wrap naturel déjà actif, juste espacer */
  .inline-actions {
    gap: 0.4rem;
  }

  /* Tables — scroll horizontal */
  .table-resizable,
  .table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Results bottom grid — déjà géré par 980px, mais on renforce */
  .results-bottom-grid {
    grid-template-columns: 1fr;
  }

  /* Admin tabs — scroll horizontal */
  .admin-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(auto-fill, minmax(7rem, auto));
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  /* Charts — pleine largeur */
  .learning-radar-wrap,
  .effort-gain-wrap {
    overflow-x: auto;
  }

  /* ── Admin tablette (E40.04) ─────────────────────────────────────────── */

  /* Dashboard hero — stack vertical */
  .admin-dashboard-hero {
    flex-direction: column;
  }

  /* Domain cards — hauteur min réduite */
  .admin-domain-card {
    min-height: 110px;
  }

  /* Pilotage summary grid — colonne unique */
  .admin-pilotage-summary-grid {
    grid-template-columns: 1fr;
  }

  /* Toolbars admin — stack vertical + espacement tactile */
  .auto-table-ergo-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* Centre notifications — pleine largeur */
  .admin-notifs-center {
    min-width: 100%;
  }

  /* Presets layout — inputs fluides */
  .admin-layout-presets input,
  .admin-layout-presets select {
    min-width: 0;
    width: 100%;
  }

  /* Flashcard editor header — stack vertical */
  .admin-flashcard-editor-header {
    flex-direction: column;
  }

  /* Editorial quality panel — message pleine largeur */
  #adminEditorialQualityPanel .editorial-feedback-message {
    max-width: 100%;
  }
}

/* ── ≤480px — smartphone compact ────────────────────────────────────────────── */
@media (max-width: 480px) {
  .app {
    width: 100vw;
    margin: 0;
    gap: 0.6rem;
  }

  .panel {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 0.6rem;
  }

  .session-header {
    border-radius: 0;
  }

  /* KPI grid — 2 colonnes serrées */
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }

  .kpi {
    padding: 0.5rem;
  }

  .kpi b {
    font-size: 1.1rem;
  }

  /* Quiz — boutons pleine largeur */
  .option-btn {
    width: 100%;
    min-height: 3rem;
    font-size: 0.95rem;
  }

  #questionText {
    font-size: 1rem;
  }

  /* Cacher les labels longs dans les inline-actions */
  .inline-actions label {
    font-size: 0.8rem;
  }

  /* Metaboxes — bords arrondis réduits */
  .metabox {
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin-bottom: 0.5rem;
  }

  .metabox-header {
    padding: 0.55rem 0.6rem;
  }

  .metabox-body {
    padding: 0.6rem;
  }

  /* Screen Options — full width */
  .screen-options-btn {
    font-size: 0.75rem !important;
    padding: 0.25em 0.55em !important;
  }

  /* Réduire le h1 du header */
  .header-top h1 {
    font-size: clamp(1.6rem, 5vw, 2.5rem);
  }
}

@media (max-width: 920px) {
  .app-header {
    padding-inline: 1rem;
  }

  .header-top {
    grid-template-columns: 1fr auto;
  }

  .app-theme-header-control {
    grid-column: 1 / -1;
    justify-self: stretch;
    max-width: none;
  }

  .title-link {
    gap: 0.75rem;
  }

  .brand-kicker {
    letter-spacing: 0.24em;
    font-size: 0.64rem;
  }

  .global-nav {
    padding-top: 1rem;
  }

  .global-nav button {
    border-radius: 14px;
  }

  .screen-options-panel {
    min-width: min(88vw, 320px);
  }
}

@media (max-width: 700px) {
  .appearance-showcase {
    grid-template-columns: 1fr;
  }

  .flashcard-review-card {
    min-height: 208px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-nav button,
  .global-nav button::before,
  .flashcard-front,
  .flashcard-back,
  #flashcardFlipBtn,
  #flashcardAgainBtn,
  #flashcardKnownBtn,
  #flashcardFeedbackBtn,
  .menu-toggle-box span {
    transition: none !important;
  }
}

@media (max-width: 920px) {
  body.ui-theme-modern .global-nav,
  body.ui-theme-editorial-light .global-nav,
  body.ui-theme-medieval .global-nav,
  body.ui-theme-night .global-nav {
    border-radius: 0;
  }
}

/* ── Fixes overflow mobile (≤720px) ─────────────────────────────────────── */

/* Plotly charts — empêche un débordement horizontal sur la page entière */
.js-plotly-plot,
#subjectsChart, #historyChart, #timelineChart, #scoreDistribution,
#themesChart, #accuracyChart {
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 720px) {
  /* Heatmap — réduit les gaps pour tenir 14 semaines sans scroll */
  .heatmap-regularity .heatmap-grid {
    min-width: 0;
  }
  .heatmap-regularity .heatmap-weeks {
    gap: 2px;
  }
  .heatmap-regularity .heatmap-row {
    gap: 2px;
  }
  .heatmap-regularity .heatmap-day-label {
    width: 18px;
    font-size: 0.5rem;
  }
}

/* Structural grid guards: keep information columns unless the viewport is genuinely narrow. */
@media (min-width: 721px) {
  #homeSummaryCards.kpi-grid,
  #homeSummaryCards.kpi-grid.kpi-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #engagementPanel.kpi-grid,
  #modeProgressPanel .kpi-grid,
  #recommendationsPanel .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 481px) and (max-width: 720px) {
  #homeSummaryCards.kpi-grid,
  #homeSummaryCards.kpi-grid.kpi-row,
  #engagementPanel.kpi-grid,
  #modeProgressPanel .kpi-grid,
  #recommendationsPanel .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 861px) {
  #authScreen .auth-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr) !important;
  }

  #resultsScreen .two-col {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 981px) {
  #resultsScreen [data-metabox-id="themes-chart"] .results-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  #resultsScreen [data-metabox-id="hierarchy"] .results-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  #resultsScreen [data-metabox-id="hierarchy"] .results-bottom-side,
  #resultsScreen [data-metabox-id="hierarchy"] .results-bottom-main {
    grid-column: 1 / -1;
  }
}

/* Results structure: chart pairs stay 50/50 outside genuinely narrow mobile. */
@media (min-width: 641px) {
  #resultsScreen #progressionKpis,
  #resultsScreen #resultsEvolutionCards {
    display: block !important;
    width: 100% !important;
  }

  #resultsScreen .results-progression-kpi-grid,
  #resultsScreen .results-evolution-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #resultsLearningDecisionPanel .learning-decision-highlights,
  #learningDecisionPanel .learning-decision-highlights {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  #resultsLearningDecisionPanel .learning-decision-highlights > .analytics-pair,
  #learningDecisionPanel .learning-decision-highlights > .analytics-pair {
    display: grid !important;
    grid-column: 1 / -1 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
  }

  #resultsLearningDecisionPanel .analytics-panel--radar,
  #learningDecisionPanel .analytics-panel--radar,
  #resultsLearningDecisionPanel .analytics-panel--typology,
  #learningDecisionPanel .analytics-panel--typology {
    grid-column: 1 !important;
    min-width: 0 !important;
  }

  #resultsLearningDecisionPanel .analytics-panel--bubble,
  #learningDecisionPanel .analytics-panel--bubble,
  #resultsLearningDecisionPanel .analytics-panel--difficulty,
  #learningDecisionPanel .analytics-panel--difficulty {
    grid-column: 2 !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  #resultsLearningDecisionPanel .learning-decision-highlights,
  #learningDecisionPanel .learning-decision-highlights,
  #resultsLearningDecisionPanel .learning-decision-highlights > .analytics-pair,
  #learningDecisionPanel .learning-decision-highlights > .analytics-pair {
    grid-template-columns: 1fr !important;
  }

  #resultsLearningDecisionPanel .analytics-panel--radar,
  #learningDecisionPanel .analytics-panel--radar,
  #resultsLearningDecisionPanel .analytics-panel--bubble,
  #learningDecisionPanel .analytics-panel--bubble,
  #resultsLearningDecisionPanel .analytics-panel--typology,
  #learningDecisionPanel .analytics-panel--typology,
  #resultsLearningDecisionPanel .analytics-panel--difficulty,
  #learningDecisionPanel .analytics-panel--difficulty {
    grid-column: 1 !important;
  }
}

/* ── E43.07 — Vue compacte résultats pensée mobile ─────────────────────────── */

/* Toggle bouton filtres (injecté par JS sur mobile) */
#resultsFiltersToggleBtn {
  display: none;
}

@media (max-width: 640px) {
  /* Header : empiler titre + actions, réduire le padding */
  #resultsScreen .session-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
  }
  #resultsScreen .session-header h2 {
    font-size: 1.1rem;
    margin: 0;
  }

  /* Boutons d'action : masquer les secondaires sur mobile */
  #exportPdfBtn,
  #exportResultsCsvBtn,
  #shareSessionSummaryBtn,
  #screenOptionsBtn {
    display: none !important;
  }

  /* Rendre les boutons restants plus larges et tactiles */
  #resultsScreen .inline-actions.no-print button {
    min-height: 2.5rem;
    font-size: 0.92rem;
  }

  /* Barre de filtres : masquée par défaut, révélée par toggle */
  #resultsFiltersToggleBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
  }

  #resultsStatsFilters {
    transition: max-height 0.25s ease, opacity 0.25s ease;
    overflow: hidden;
  }
  #resultsStatsFilters.filters-collapsed {
    max-height: 0 !important;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  /* KPI hero : 2 cartes par ligne, plus de hauteur */
  #resultsScreen .results-hero-kpis {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }
  #resultsScreen .results-hero-kpis .kpi-card {
    padding: 0.75rem 0.5rem;
    min-height: 80px;
  }
  #resultsScreen .results-hero-kpis .kpi-card .kpi-value {
    font-size: 1.6rem;
  }
  #resultsScreen .results-hero-kpis .kpi-card .kpi-label {
    font-size: 0.75rem;
  }

  /* Tab bar : boutons pleine largeur */
  #resultsScreen .results-analytics-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #resultsScreen .results-analytics-tabs button {
    text-align: center;
    padding: 0.65rem 0.5rem;
    font-size: 0.88rem;
  }

  /* Metaboxes : padding réduit, titre plus compact */
  #resultsScreen .metabox {
    padding: 0;
  }
  #resultsScreen .metabox > summary,
  #resultsScreen .metabox > .metabox-header {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
  }
  #resultsScreen .metabox > .metabox-body,
  #resultsScreen .metabox > div:not(.metabox-header):not(summary) {
    padding: 0.6rem 0.75rem;
  }

  /* Session detail: passer en 1 colonne */
  #resultsScreen .two-col {
    grid-template-columns: 1fr !important;
    gap: 0.6rem;
  }

  /* Session navigator : gros boutons tactiles */
  #prevSessionBtn,
  #nextSessionBtn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    font-size: 1.1rem;
  }

  /* Panneau session summary : toujours visible, pas de collapse */
  #resultsSessionSummaryPanel {
    padding: 0.5rem 0.75rem;
  }
  #resultsSessionSummaryPanel h4 {
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
  }

  /* Tableaux : overflow scroll horizontal */
  #resultsScreen .table-resizable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #resultsScreen table {
    min-width: 400px;
  }
}

@media (max-width: 400px) {
  /* Très petits écrans : KPI en 1 colonne */
  #resultsScreen .results-hero-kpis {
    grid-template-columns: 1fr;
  }
}

/* <<< css/responsive/breakpoints.css */


/* <<< css/bundles/common.css */