/* Dōjō — thèmes. Chaque style est un vrai habillage : palette, matières (textures SVG en ligne), polices, coins, ombres, barre d'onglets.
   style.css n'utilise que les jetons sémantiques ci-dessous ; un thème = un bloc [data-theme="…"] qui les redéfinit. Le bloc :root est le style d'origine (Dōjō).
   Les aperçus de l'onglet Réglages posent data-theme sur un petit élément : les jetons s'appliquent à ce sous-arbre seulement. */
:root, [data-theme="dojo"] {
  /* palette Dōjō : pierre, bois, encre, crème, or, vermillon */
  --stone-950: #0f1115; --stone-900: #15181d; --stone-800: #1b1f26; --stone-700: #232830; --stone-600: #2d333d; --stone-500: #3a414c;
  --wood-50: #f0e3cb; --wood-100: #e6d2ae; --wood-200: #d8bf93; --wood-300: #c7a775; --wood-400: #b08c5a; --wood-500: #8f6d41; --wood-600: #6f512e; --wood-700: #4e3820;
  --wood-surface: #dbc49a; --ink: #241a10; --ink-2: #4a3a28; --ink-muted: #6e5b43; --cream: #f2eadb; --cream-2: #d8cfbf; --cream-muted: #a39a8b;
  --gold: #c9a24a; --gold-2: #e2c072; --red: #c73e2e; --red-2: #e0564a; --red-ink: #8f2a1e; --green: #6fa57b; --green-ink: #2f6b3c; --orange: #d9823b;
  /* étiquettes des coups (analyse), façon chess.com — communes à tous les thèmes */
  --cls-brilliant: #1baca6; --cls-great: #5c8bb0; --cls-best: #81b64c; --cls-excellent: #96bc4b; --cls-good: #a9c48f; --cls-book: #b08c5a;
  --cls-inaccuracy: #f0c15c; --cls-mistake: #e58f45; --cls-blunder: #d9483b; --cls-missed: #e06c75; --arrow: #4fb36a; --arrow-bad: #e0342b;
  --sq-light: #dcc39b; --sq-dark: #a9794a;

  /* ---- jetons sémantiques : page ---- */
  --bg: var(--stone-900); --bg-image: none; --text: var(--cream); --text-2: var(--cream-2); --muted: var(--cream-muted);
  --line: rgba(242,234,219,.12); --line-2: rgba(242,234,219,.24); --panel: var(--stone-800); --panel-2: var(--stone-700); --chart-bg: var(--stone-950);
  /* surfaces (cartes, colonnes du planning, clavier) */
  --surface: var(--wood-surface); --surface-2: var(--wood-100); --surface-image: none; --surface-text: var(--ink); --surface-text-2: var(--ink-2); --surface-muted: var(--ink-muted);
  --surface-line: rgba(36,26,16,.14); --surface-border: rgba(36,26,16,.22); --surface-tint: rgba(36,26,16,.08); --surface-shadow: none; --border-w: 1px;
  /* boutons, segments, onglets */
  --btn-bg: var(--wood-surface); --btn-text: var(--ink); --btn-border: transparent; --btn-shadow: none; --seg-on-bg: var(--wood-200); --seg-on-text: var(--ink);
  --tabs-bg: var(--wood-surface); --tabs-text: var(--ink-muted); --tabs-active: var(--ink); --tabs-mark: var(--gold); --tabs-border: rgba(36,26,16,.25); --tabs-shadow: 0 -2px 10px rgba(0,0,0,.35);
  /* accents et sémantique */
  --accent: var(--gold); --accent-2: var(--gold-2); --ok: var(--green); --ok-ink: var(--green-ink); --ok-deep: #4e8f5e; --bad: var(--red-2); --bad-ink: var(--red-ink);
  --pink: #e6a6b9; --pink-ink: #6e2743; --slot-text: var(--ink);
  /* planning : une couleur par matière (tons sourds sur surface claire) */
  --subj-maths: #a9b7d0; --subj-mathsos: #93a3c6; --subj-mathsr: #c0c8da; --subj-phys: #b9aacb; --subj-physos: #a593c0; --subj-chimie: #cdb86f; --subj-bio: #a9c2a0;
  --subj-fr: #d9a893; --subj-angl: #9fc0bd; --subj-ita: #bcc08e; --subj-all: #c5b1bb; --subj-hist: #c9a98f; --subj-geo: #dcb27f; --subj-arts: #cfa3b5; --subj-soutien: #c2bcb0; --subj-other: #bfb7a8;
  /* formes et polices */
  --radius: 4px; --radius-s: 3px;
  --font-title: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; --font-body: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --title-weight: 500; --title-tracking: .01em;
}

/* ---- Papier : blanc cassé grainé, encre, bleu. Simple et clair. ---- */
[data-theme="papier"] {
  --border-w: 1px; --bg: #f4f1e9; --bg-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.17  0 0 0 0 0.1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --text: #1f1d18; --text-2: #3a372f; --muted: #7a7568;
  --line: rgba(31,29,24,.10); --line-2: rgba(31,29,24,.22); --panel: #ffffff; --panel-2: #ebe7dd; --chart-bg: #e6e2d7;
  --surface: #ffffff; --surface-2: #f1eee6; --surface-image: none; --surface-text: #1f1d18; --surface-text-2: #3a372f; --surface-muted: #7a7568;
  --surface-line: rgba(31,29,24,.10); --surface-border: rgba(31,29,24,.13); --surface-tint: rgba(31,29,24,.05); --surface-shadow: 0 1px 2px rgba(31,29,24,.05), 0 6px 18px rgba(31,29,24,.06);
  --btn-bg: #1f4ed8; --btn-text: #ffffff; --seg-on-bg: #1f1d18; --seg-on-text: #ffffff;
  --tabs-bg: #fffdf8; --tabs-text: #8a8577; --tabs-active: #1f4ed8; --tabs-mark: #1f4ed8; --tabs-border: rgba(31,29,24,.12); --tabs-shadow: none;
  --accent: #1f4ed8; --accent-2: #1f4ed8; --ok: #2e7d4f; --ok-ink: #2e7d4f; --ok-deep: #2e7d4f; --bad: #c62f2f; --bad-ink: #b02828; --pink: #f6cad7; --pink-ink: #7a2a46; --slot-text: #1f1d18;
  --radius: 10px; --radius-s: 8px; --font-title: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --title-weight: 700; --title-tracking: -.02em;
}

/* ---- Chêne : planches de noyer sombre, cartes en chêne clair, laiton. ---- */
[data-theme="chene"] {
  --border-w: 1px; --bg: #3b2415; --bg-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.003 0.07' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.34 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --text: #f0e4cf; --text-2: #d9c7a8; --muted: #b09a7e;
  --line: rgba(240,228,207,.14); --line-2: rgba(240,228,207,.28); --panel: #2f1b0f; --panel-2: #4d321d; --chart-bg: #24140a;
  --surface: #d8b98b; --surface-2: #e6cfa8; --surface-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.12  0 0 0 0 0.02  0 0 0 0.26 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --surface-text: #2b1b0f; --surface-text-2: #4a3321; --surface-muted: #6e5238;
  --surface-line: rgba(43,27,15,.2); --surface-border: rgba(43,27,15,.38); --surface-tint: rgba(43,27,15,.09); --surface-shadow: 0 2px 5px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.28);
  --btn-bg: #b98b3c; --btn-text: #2b1b0f; --seg-on-bg: #b98b3c; --seg-on-text: #2b1b0f;
  --tabs-bg: #d8b98b; --tabs-text: #6e5238; --tabs-active: #2b1b0f; --tabs-mark: #8a5a1e; --tabs-border: rgba(43,27,15,.45); --tabs-shadow: 0 -3px 10px rgba(0,0,0,.45);
  --accent: #d4a24c; --accent-2: #e2b866; --ok: #9ccf8a; --ok-ink: #2f6b3c; --ok-deep: #7fb574; --bad: #e8705f; --bad-ink: #8f2a1e; --pink: #e3a9b4; --pink-ink: #6e2743; --slot-text: #2b1b0f;
  --radius: 3px; --radius-s: 2px; --font-title: "Fraunces", Georgia, serif; --font-body: "Inter", -apple-system, sans-serif; --title-weight: 600; --title-tracking: 0;
}
[data-theme="chene"] .tabs { background-image: var(--surface-image); }

/* ---- Ardoise : pierre grise, craie, cuivre. Sobre et net. ---- */
[data-theme="ardoise"] {
  --border-w: 1px; --bg: #2b3035; --bg-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.4' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --text: #eaedf0; --text-2: #cfd5da; --muted: #93a0a9;
  --line: rgba(234,237,240,.12); --line-2: rgba(234,237,240,.24); --panel: #22272b; --panel-2: #394047; --chart-bg: #1b1f23;
  --surface: #3a4147; --surface-2: #474f56; --surface-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --surface-text: #eef1f3; --surface-text-2: #d3d9de; --surface-muted: #9aa5ad;
  --surface-line: rgba(255,255,255,.10); --surface-border: rgba(255,255,255,.14); --surface-tint: rgba(255,255,255,.06); --surface-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 6px rgba(0,0,0,.35);
  --btn-bg: #c9784a; --btn-text: #1b1f23; --seg-on-bg: #eaedf0; --seg-on-text: #1b1f23;
  --tabs-bg: #22272b; --tabs-text: #8f9aa3; --tabs-active: #f3f5f7; --tabs-mark: #c9784a; --tabs-border: rgba(255,255,255,.10); --tabs-shadow: none;
  --accent: #c9784a; --accent-2: #e0956b; --ok: #7fc8a0; --ok-ink: #8fd3ad; --ok-deep: #6fb892; --bad: #ef6b5e; --bad-ink: #f28a7e; --pink: #7a3a52; --pink-ink: #ffd9e6; --slot-text: #eef1f3;
  --subj-maths: #3f5680; --subj-mathsos: #35486c; --subj-mathsr: #4b5f85; --subj-phys: #5a4a74; --subj-physos: #4b3c64; --subj-chimie: #6f5f2a; --subj-bio: #3f6a46;
  --subj-fr: #7a4a3a; --subj-angl: #2f6464; --subj-ita: #5a6a36; --subj-all: #6a4a5a; --subj-hist: #6e5238; --subj-geo: #7a5a2a; --subj-arts: #6e4059; --subj-soutien: #4c535a; --subj-other: #4c535a;
  --radius: 2px; --radius-s: 2px; --font-title: "IBM Plex Sans", -apple-system, sans-serif; --font-body: "IBM Plex Sans", -apple-system, sans-serif; --title-weight: 600; --title-tracking: -.01em;
}

/* ---- Jazz club : velours bordeaux, laiton, lettres de cabaret. ---- */
[data-theme="jazz"] {
  --border-w: 1px; --bg: #230d13; --bg-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.6  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"), radial-gradient(ellipse 120% 70% at 50% -10%, #5a1f2c 0%, #35121b 45%, #1b080c 100%); --text: #f3e3c3; --text-2: #dcc8a3; --muted: #ad9574;
  --line: rgba(243,227,195,.14); --line-2: rgba(243,227,195,.3); --panel: #2b1118; --panel-2: #3d1a24; --chart-bg: #150709;
  --surface: #3a1620; --surface-2: #4a1d29; --surface-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.85  0 0 0 0 0.6  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E"); --surface-text: #f3e3c3; --surface-text-2: #dcc8a3; --surface-muted: #b59c7a;
  --surface-line: rgba(243,227,195,.14); --surface-border: rgba(212,168,75,.45); --surface-tint: rgba(243,227,195,.06); --surface-shadow: 0 0 0 3px #3a1620, 0 0 0 4px rgba(212,168,75,.35), 0 10px 26px rgba(0,0,0,.5);
  --btn-bg: #d4a84b; --btn-text: #2a0f14; --seg-on-bg: #d4a84b; --seg-on-text: #2a0f14;
  --tabs-bg: #1c080c; --tabs-text: #ad9574; --tabs-active: #f3e3c3; --tabs-mark: #d4a84b; --tabs-border: rgba(212,168,75,.5); --tabs-shadow: 0 -4px 14px rgba(0,0,0,.5);
  --accent: #d4a84b; --accent-2: #e8c470; --ok: #86c296; --ok-ink: #a6dbb3; --ok-deep: #86c296; --bad: #ea6f6f; --bad-ink: #f29090; --pink: #7a2f4a; --pink-ink: #ffd7e6; --slot-text: #f3e3c3;
  --subj-maths: #3a4a7a; --subj-mathsos: #30406a; --subj-mathsr: #46557f; --subj-phys: #5a3f72; --subj-physos: #4a3260; --subj-chimie: #7a5f24; --subj-bio: #3f6648;
  --subj-fr: #7f3f36; --subj-angl: #2e6060; --subj-ita: #5c6a32; --subj-all: #6a4458; --subj-hist: #6e4f36; --subj-geo: #7c5a26; --subj-arts: #713e5a; --subj-soutien: #55434a; --subj-other: #55434a;
  --radius: 2px; --radius-s: 2px; --font-title: "Playfair Display", Georgia, serif; --font-body: "Lora", Georgia, serif; --title-weight: 600; --title-tracking: .02em;
}
[data-theme="jazz"] h2 { font-style: italic; }
[data-theme="jazz"] h2::after { content: ''; display: block; width: 72px; height: 5px; margin-top: 8px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); opacity: .8; }
[data-theme="jazz"] .chess-head h2::after { display: none; }

/* ---- Studio : blanc, traits noirs, rouge, jaune et bleu francs. ---- */
[data-theme="studio"] {
  --bg: #fbfaf7; --bg-image: none; --text: #111111; --text-2: #333333; --muted: #6b6b6b;
  --line: rgba(0,0,0,.14); --line-2: #111111; --panel: #ffffff; --panel-2: #f1efe9; --chart-bg: #efede7;
  --surface: #ffffff; --surface-2: #f6f4ee; --surface-image: none; --surface-text: #111111; --surface-text-2: #333333; --surface-muted: #6b6b6b;
  --surface-line: rgba(0,0,0,.14); --surface-border: #111111; --surface-tint: rgba(0,0,0,.05); --surface-shadow: 3px 3px 0 #111111; --border-w: 2px;
  --btn-bg: #e63b2e; --btn-text: #ffffff; --btn-border: #111111; --btn-shadow: 3px 3px 0 #111111; --seg-on-bg: #111111; --seg-on-text: #ffffff;
  --tabs-bg: #ffffff; --tabs-text: #111111; --tabs-active: #e63b2e; --tabs-mark: #f2c230; --tabs-border: #111111; --tabs-shadow: none;
  --accent: #2457c5; --accent-2: #2457c5; --ok: #1f8a4c; --ok-ink: #1f8a4c; --ok-deep: #1f8a4c; --bad: #e63b2e; --bad-ink: #c62f2f; --pink: #f2c230; --pink-ink: #111111; --slot-text: #111111;
  --subj-maths: #bcd0f5; --subj-mathsos: #a6c0f0; --subj-mathsr: #d0def7; --subj-phys: #d7c6f0; --subj-physos: #c9b3ea; --subj-chimie: #f3dd8e; --subj-bio: #bfe3b8;
  --subj-fr: #f5bfae; --subj-angl: #b4e0dc; --subj-ita: #d8e0a0; --subj-all: #e3c6d6; --subj-hist: #e5c7ab; --subj-geo: #f1cf98; --subj-arts: #efc0d6; --subj-soutien: #dcdcd4; --subj-other: #d9d6cc;
  --radius: 0; --radius-s: 0; --font-title: "Space Grotesk", -apple-system, sans-serif; --font-body: "Inter", -apple-system, sans-serif; --title-weight: 700; --title-tracking: -.02em;
}
[data-theme="studio"] .tab.active::before { height: 4px; width: 28px; margin-left: -14px; }