/* =============================================================================
   TechForge — themes.css
   UN BLOC PAR THÈME. Chaque bloc n'est qu'un jeu de design tokens : aucune règle
   de mise en page ici, aucune classe de composant. Changer de thème ne change
   donc que des couleurs, jamais la structure des écrans.

   Le thème « Neon Forge » n'est pas ici : c'est :root dans base.css, le défaut
   du site. « Clair » non plus : c'est body.ifpa-light-mode, au même endroit.
   Les deux gardent leur place historique pour que le site reste entier même si
   cette feuille ne se charge pas.

   Comment ça s'accroche : <body class="tf-theme-<slug>">, posé par PHP
   (Theme::bodyClass) et rejoué par theme.js au changement. Un thème clair porte
   EN PLUS la classe historique .ifpa-light-mode, dont dépendent une quinzaine de
   règles et la vue imprimable.

   Fabrication : les tokens de palette (fond, texte, accents) sont conçus à la
   main ; ceux qui s'en DÉDUISENT (texte sur aplat, versions foncées, halos, HUD,
   voiles) sont calculés — luminance WCAG — puis vérifiés. Le fichier est écrit
   une fois et se retouche ensuite à la main comme n'importe quel CSS.

   Contraste : chaque thème vise AA (4.5:1) pour le texte courant, le texte
   secondaire et les accents lus comme du texte.
   ========================================================================== */

/* ─────────────────────────────────────────────────────────────────────────
   Nord Givré — Un thème sombre bleu-gris, calme et peu contrasté, conçu pour les longues sessions de lecture de cours sans fatigue oculaire.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-nord-givre {
    color-scheme: dark;

    --bg:             #1c212b;
    --bg-2:           #222836;
    --surface:        #272e3c;
    --surface-2:      #2f3749;
    --surface-3:      #3a4356;
    --border:         #4e5a76;
    --border-soft:    #353e52;
    --text:           #e7ecf5;
    --muted:          #a9b5ca;
    --faint:          #8b97af;
    --primary:        #88c0d0;
    --primary-deep:   #3f7084;
    --violet:         #aca4da;
    --magenta:        #db94bf;
    --accent:         #db94bf;
    --green:          #a3be8c;
    --amber:          #e0a96d;
    --red:            #de9299;
    --gold:           #ebcb8b;
    --gold-soft:      rgba(235,203,139,.13);
    --primary-soft:   rgba(136,192,208,.12);
    --violet-soft:    rgba(169,160,216,.14);
    --accent-soft:    rgba(217,141,187,.14);
    --green-soft:     rgba(163,190,140,.12);
    --amber-soft:     rgba(224,169,109,.13);
    --red-soft:       rgba(220,139,147,.12);
    --glow-cyan:      0 0 12px rgba(136,192,208,.22);
    --glow-pink:      0 0 12px rgba(217,141,187,.22);
    --glow-green:     0 0 12px rgba(163,190,140,.20);
    --glow-gold:      0 0 12px rgba(235,203,139,.22);
    --shadow:         0 10px 28px rgba(9,12,18,.50);
    --shadow-soft:    0 6px 16px rgba(9,12,18,.36);
    --grid:           rgba(136,192,208,.045);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 12px rgba(136,192,208,.22);
    --glow-accent:    0 0 12px rgba(217,141,187,.22);
    --on-accent:      #12151c;
    --on-primary:     #12151c;
    --on-gold:        #12151c;
    --green-deep:     #64765b;
    --red-deep:       #92626a;
    --amber-deep:     #896949;
    --violet-deep:    #726e94;
    --gold-deep:      #847455;
    --neutral:        #778299;
    --neutral-deep:   #4f5868;
    --primary-light:  #bedce5;
    --halo-1:         rgba(172,164,218,0.16);
    --halo-2:         rgba(136,192,208,0.12);
    --halo-3:         rgba(219,148,191,0.1);
    --topbar-bg:      linear-gradient(180deg, rgba(39,46,60,0.94), rgba(34,40,52,0.86));
    --topbar-line:    rgba(136,192,208,0.15);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(136,192,208,0.18), transparent 60%),
                   linear-gradient(135deg, #4b5f71, #585c78);
    --selection-bg:   rgba(219,148,191,0.32);
    --selection-fg:   #ffffff;
    --overlay:        rgba(23,27,37,0.78);
    --code-bg:        #11161f;
    --code-text:      #e9eef6;
    --hud-bg:         linear-gradient(90deg, rgba(34,40,52,0.96), rgba(48,56,72,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #626584, #6a5b76);
    --hud-text:       #e7ecf5;
    --hud-muted:      #a9b5ca;
    --hud-primary:    #88c0d0;
    --hud-accent:     #db94bf;
    --hud-violet:     #aca4da;
    --hud-accent-soft: rgba(217,141,187,.14);
    --hud-border:     #4e5a76;
    --hud-glow:       0 0 12px rgba(136,192,208,.22);
}

/* ─────────────────────────────────────────────────────────────────────────
   Terminal — Phosphore — Pour les sessions tardives en salle sombre : un charbon verdâtre, du texte vert phosphore reposant et deux phosphores d'accent (vert vif, ambre) — l'esprit console, sans le cyan ni le violet.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-terminal-phosphore {
    color-scheme: dark;

    --bg:             #060a07;
    --bg-2:           #0a1109;
    --surface:        #131b16;
    --surface-2:      #141e17;
    --surface-3:      #1d2a20;
    --border:         #27362a;
    --border-soft:    #1a2520;
    --text:           #c9e4c1;
    --muted:          #8fa88c;
    --faint:          #6f8569;
    --primary:        #3fe07c;
    --primary-deep:   #1cab5b;
    --violet:         #5ad2c8;
    --magenta:        #e07fa6;
    --accent:         #e07fa6;
    --green:          #7ddc52;
    --amber:          #ffc24d;
    --red:            #ff6a5f;
    --gold:           #ffd65e;
    --gold-soft:      rgba(255,214,94,.14);
    --primary-soft:   rgba(63,224,124,.12);
    --violet-soft:    rgba(90,210,200,.14);
    --accent-soft:    rgba(224,127,166,.12);
    --green-soft:     rgba(125,220,82,.12);
    --amber-soft:     rgba(255,194,77,.13);
    --red-soft:       rgba(255,106,95,.12);
    --glow-cyan:      0 0 12px rgba(63,224,124,.35);
    --glow-pink:      0 0 12px rgba(224,127,166,.32);
    --glow-green:     0 0 12px rgba(125,220,82,.34);
    --glow-gold:      0 0 12px rgba(255,214,94,.36);
    --shadow:         0 10px 30px rgba(0,0,0,.62);
    --shadow-soft:    0 6px 18px rgba(0,0,0,.48);
    --grid:           rgba(63,224,124,.045);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 12px rgba(63,224,124,.35);
    --glow-accent:    0 0 12px rgba(224,127,166,.32);
    --on-accent:      #040705;
    --on-primary:     #040705;
    --on-gold:        #040705;
    --green-deep:     #477e35;
    --red-deep:       #c1524c;
    --amber-deep:     #8f6f32;
    --violet-deep:    #347876;
    --gold-deep:      #837038;
    --neutral:        #5b6e57;
    --neutral-deep:   #404e42;
    --primary-light:  #95eeb7;
    --halo-1:         rgba(90,210,200,0.16);
    --halo-2:         rgba(63,224,124,0.12);
    --halo-3:         rgba(224,127,166,0.1);
    --topbar-bg:      linear-gradient(180deg, rgba(19,27,22,0.94), rgba(13,19,15,0.86));
    --topbar-line:    rgba(63,224,124,0.15);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(63,224,124,0.18), transparent 60%),
                   linear-gradient(135deg, #245234, #2d564c);
    --selection-bg:   rgba(224,127,166,0.32);
    --selection-fg:   #ffffff;
    --overlay:        rgba(6,10,10,0.78);
    --code-bg:        #060a0d;
    --code-text:      #cee7c7;
    --hud-bg:         linear-gradient(90deg, rgba(13,19,15,0.96), rgba(22,33,25,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #32655b, #584448);
    --hud-text:       #c9e4c1;
    --hud-muted:      #8fa88c;
    --hud-primary:    #3fe07c;
    --hud-accent:     #e07fa6;
    --hud-violet:     #5ad2c8;
    --hud-accent-soft: rgba(224,127,166,.12);
    --hud-border:     #27362a;
    --hud-glow:       0 0 12px rgba(63,224,124,.35);
}

/* ─────────────────────────────────────────────────────────────────────────
   Papier — Crème et encre brune, façon livre technique : pour lire de longs cours à l'écran sans fatigue.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-papier {
    color-scheme: light;

    --bg:             #f3ebdd;
    --bg-2:           #ece2d0;
    --surface:        #fdfaf4;
    --surface-2:      #f7f1e6;
    --surface-3:      #eee4d2;
    --border:         #dbcbb0;
    --border-soft:    #ebe1cf;
    --text:           #2b211a;
    --muted:          #6a5a49;
    --faint:          #8d7a66;
    --primary:        #1a5a8c;
    --primary-deep:   #124063;
    --violet:         #5f3f96;
    --magenta:        #9d2f5c;
    --accent:         #9d2f5c;
    --green:          #2f6b45;
    --amber:          #8f540c;
    --red:            #a8322a;
    --gold:           #766413;
    --gold-soft:      rgba(118,100,19,.12);
    --primary-soft:   rgba(26,90,140,.10);
    --violet-soft:    rgba(95,63,150,.10);
    --accent-soft:    rgba(157,47,92,.10);
    --green-soft:     rgba(47,107,69,.10);
    --amber-soft:     rgba(143,84,12,.12);
    --red-soft:       rgba(168,50,42,.10);
    --glow-cyan:      0 0 0 1px rgba(26,90,140,.28), 0 2px 8px rgba(74,56,38,.10);
    --glow-pink:      0 0 0 1px rgba(157,47,92,.28), 0 2px 8px rgba(74,56,38,.10);
    --glow-green:     0 0 0 1px rgba(47,107,69,.30), 0 2px 8px rgba(74,56,38,.10);
    --glow-gold:      0 0 0 1px rgba(118,100,19,.32), 0 2px 8px rgba(74,56,38,.10);
    --shadow:         0 10px 28px rgba(74,56,38,.13), 0 1px 2px rgba(74,56,38,.08);
    --shadow-soft:    0 4px 14px rgba(74,56,38,.09);
    --grid:           rgba(122,96,62,.055);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 0 1px rgba(26,90,140,.28), 0 2px 8px rgba(74,56,38,.10);
    --glow-accent:    0 0 0 1px rgba(157,47,92,.28), 0 2px 8px rgba(74,56,38,.10);
    --on-accent:      #ffffff;
    --on-primary:     #ffffff;
    --on-gold:        #ffffff;
    --green-deep:     #2c5f41;
    --red-deep:       #932f2a;
    --amber-deep:     #7d4c10;
    --violet-deep:    #553a86;
    --gold-deep:      #685a16;
    --neutral:        #a59581;
    --neutral-deep:   #59514a;
    --primary-light:  #5383a9;
    --halo-1:         rgba(95,63,150,0.07);
    --halo-2:         rgba(26,90,140,0.07);
    --halo-3:         rgba(157,47,92,0.05);
    --topbar-bg:      linear-gradient(180deg, rgba(253,250,244,0.94), rgba(248,243,233,0.86));
    --topbar-line:    rgba(26,90,140,0.22);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(26,90,140,0.14), transparent 60%),
                   linear-gradient(135deg, #d5d3ca, #e0d4cc);
    --selection-bg:   rgba(157,47,92,0.22);
    --selection-fg:   #14161e;
    --overlay:        rgba(123,122,121,0.55);
    --code-bg:        #0f1626;
    --code-text:      #e3ebf7;
    --hud-bg:         linear-gradient(90deg, rgba(250,246,237,0.96), rgba(243,235,221,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #bcaabd, #d6aeaf);
    --hud-text:       #2b211a;
    --hud-muted:      #6a5a49;
    --hud-primary:    #1a5a8c;
    --hud-accent:     #9d2f5c;
    --hud-violet:     #5f3f96;
    --hud-accent-soft: rgba(157,47,92,.10);
    --hud-border:     #dbcbb0;
    --hud-glow:       0 0 0 1px rgba(26,90,140,.28), 0 2px 8px rgba(74,56,38,.10);
}

/* ─────────────────────────────────────────────────────────────────────────
   Atelier — Un sombre chaud d'atelier de forge : anthracite brun, surfaces métal huilé, accents cuivre et laiton — sérieux, artisanal, sans une trace de néon froid.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-atelier {
    color-scheme: dark;

    --bg:             #12100d;
    --bg-2:           #1a1613;
    --surface:        #241d17;
    --surface-2:      #302720;
    --surface-3:      #3e332a;
    --border:         #54442f;
    --border-soft:    #372d24;
    --text:           #f4ece1;
    --muted:          #c3ae97;
    --faint:          #9b8770;
    --primary:        #ff9552;
    --primary-deep:   #e0722b;
    --violet:         #c193ee;
    --magenta:        #f57bb0;
    --accent:         #f57bb0;
    --green:          #74cf94;
    --amber:          #f2c53c;
    --red:            #fb7d86;
    --gold:           #efc766;
    --gold-soft:      rgba(239,199,102,.14);
    --primary-soft:   rgba(255,149,82,.12);
    --violet-soft:    rgba(193,147,238,.14);
    --accent-soft:    rgba(245,123,176,.12);
    --green-soft:     rgba(116,207,148,.12);
    --amber-soft:     rgba(242,197,60,.14);
    --red-soft:       rgba(251,125,134,.12);
    --glow-cyan:      0 0 10px rgba(255,149,82,.26), 0 0 26px rgba(224,114,43,.16);
    --glow-pink:      0 0 10px rgba(245,123,176,.24), 0 0 26px rgba(245,123,176,.14);
    --glow-green:     0 0 10px rgba(116,207,148,.24), 0 0 24px rgba(116,207,148,.14);
    --glow-gold:      0 0 10px rgba(239,199,102,.30), 0 0 26px rgba(239,199,102,.16);
    --shadow:         0 12px 30px rgba(8,5,2,.58);
    --shadow-soft:    0 6px 18px rgba(8,5,2,.42);
    --grid:           rgba(226,160,96,.045);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 10px rgba(255,149,82,.26), 0 0 26px rgba(224,114,43,.16);
    --glow-accent:    0 0 10px rgba(245,123,176,.24), 0 0 26px rgba(245,123,176,.14);
    --on-accent:      #0c0a08;
    --on-primary:     #0c0a08;
    --on-gold:        #0c0a08;
    --green-deep:     #488060;
    --red-deep:       #b25b63;
    --amber-deep:     #887129;
    --violet-deep:    #8063a1;
    --gold-deep:      #867240;
    --neutral:        #84725f;
    --neutral-deep:   #584f46;
    --primary-light:  #ffc5a0;
    --halo-1:         rgba(193,147,238,0.16);
    --halo-2:         rgba(255,149,82,0.12);
    --halo-3:         rgba(245,123,176,0.1);
    --topbar-bg:      linear-gradient(180deg, rgba(36,29,23,0.94), rgba(27,23,18,0.86));
    --topbar-line:    rgba(255,149,82,0.15);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(255,149,82,0.18), transparent 60%),
                   linear-gradient(135deg, #684933, #604c5d);
    --selection-bg:   rgba(245,123,176,0.32);
    --selection-fg:   #ffffff;
    --overlay:        rgba(15,15,14,0.78);
    --code-bg:        #0c0d10;
    --code-text:      #f5eee4;
    --hud-bg:         linear-gradient(90deg, rgba(27,23,18,0.96), rgba(48,40,32,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #6c556f, #754952);
    --hud-text:       #f4ece1;
    --hud-muted:      #c3ae97;
    --hud-primary:    #ff9552;
    --hud-accent:     #f57bb0;
    --hud-violet:     #c193ee;
    --hud-accent-soft: rgba(245,123,176,.12);
    --hud-border:     #54442f;
    --hud-glow:       0 0 10px rgba(255,149,82,.26), 0 0 26px rgba(224,114,43,.16);
}

/* ─────────────────────────────────────────────────────────────────────────
   Aurore — Une nuit indigo traversée de rideaux magenta, violets et turquoise — pour qui veut l'ambiance néon sans l'arcade cyan.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-aurore {
    color-scheme: dark;

    --bg:             #0a0618;
    --bg-2:           #120a2a;
    --surface:        #1e1537;
    --surface-2:      #211640;
    --surface-3:      #2c1e55;
    --border:         #3d2a70;
    --border-soft:    #2a1d4e;
    --text:           #f2e9ff;
    --muted:          #bcaadc;
    --faint:          #8f7db6;
    --primary:        #e57cff;
    --primary-deep:   #bf4ae8;
    --violet:         #9083ff;
    --magenta:        #ff5ca0;
    --accent:         #ff5ca0;
    --green:          #2ff0c4;
    --amber:          #ffb347;
    --red:            #ff6f5c;
    --gold:           #ffdc6b;
    --gold-soft:      rgba(255,220,107,.14);
    --primary-soft:   rgba(229,124,255,.13);
    --violet-soft:    rgba(144,131,255,.15);
    --accent-soft:    rgba(255,92,160,.13);
    --green-soft:     rgba(47,240,196,.12);
    --amber-soft:     rgba(255,179,71,.13);
    --red-soft:       rgba(255,111,92,.13);
    --glow-cyan:      0 0 16px rgba(229,124,255,.42);
    --glow-pink:      0 0 16px rgba(255,92,160,.42);
    --glow-green:     0 0 14px rgba(47,240,196,.36);
    --glow-gold:      0 0 14px rgba(255,220,107,.38);
    --shadow:         0 12px 34px rgba(6,2,18,.62);
    --shadow-soft:    0 6px 18px rgba(6,2,18,.45);
    --grid:           rgba(203,124,255,.055);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 16px rgba(229,124,255,.42);
    --glow-accent:    0 0 16px rgba(255,92,160,.42);
    --on-accent:      #070410;
    --on-primary:     #070410;
    --on-gold:        #070410;
    --green-deep:     #1b7d6b;
    --red-deep:       #b45146;
    --amber-deep:     #8f672f;
    --violet-deep:    #6e65c4;
    --gold-deep:      #83733f;
    --neutral:        #76659e;
    --neutral-deep:   #51496c;
    --primary-light:  #f1b7ff;
    --halo-1:         rgba(144,131,255,0.16);
    --halo-2:         rgba(229,124,255,0.12);
    --halo-3:         rgba(255,92,160,0.1);
    --topbar-bg:      linear-gradient(180deg, rgba(30,21,55,0.94), rgba(20,14,40,0.86));
    --topbar-line:    rgba(229,124,255,0.15);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(229,124,255,0.18), transparent 60%),
                   linear-gradient(135deg, #55337a, #463881);
    --selection-bg:   rgba(255,92,160,0.32);
    --selection-fg:   #ffffff;
    --overlay:        rgba(9,7,23,0.78);
    --code-bg:        #080815;
    --code-text:      #f3ebff;
    --hud-bg:         linear-gradient(90deg, rgba(20,14,40,0.96), rgba(34,23,67,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #4f4191, #6b316c);
    --hud-text:       #f2e9ff;
    --hud-muted:      #bcaadc;
    --hud-primary:    #e57cff;
    --hud-accent:     #ff5ca0;
    --hud-violet:     #9083ff;
    --hud-accent-soft: rgba(255,92,160,.13);
    --hud-border:     #3d2a70;
    --hud-glow:       0 0 16px rgba(229,124,255,.42);
}

/* ─────────────────────────────────────────────────────────────────────────
   Contraste élevé — Noir absolu, blanc pur et bordures franches : le thème à choisir quand la lisibilité prime sur tout le reste — basse vision, vidéoprojecteur en salle, écran de mauvaise qualité.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-contraste-eleve {
    color-scheme: dark;

    --bg:             #000000;
    --bg-2:           #0d0d0d;
    --surface:        #131313;
    --surface-2:      #1e1e1e;
    --surface-3:      #2e2e2e;
    --border:         #808080;
    --border-soft:    #666666;
    --text:           #ffffff;
    --muted:          #d8d8d8;
    --faint:          #ababab;
    --primary:        #5fe9ff;
    --primary-deep:   #16b9e0;
    --violet:         #bfa0ff;
    --magenta:        #ff7de8;
    --accent:         #ff7de8;
    --green:          #3dffb4;
    --amber:          #ff9e1f;
    --red:            #ff6e85;
    --gold:           #ffe34f;
    --gold-soft:      rgba(255,227,79,.16);
    --primary-soft:   rgba(95,233,255,.16);
    --violet-soft:    rgba(191,160,255,.16);
    --accent-soft:    rgba(255,125,232,.16);
    --green-soft:     rgba(61,255,180,.16);
    --amber-soft:     rgba(255,158,31,.16);
    --red-soft:       rgba(255,110,133,.16);
    --glow-cyan:      0 0 0 2px rgba(95,233,255,.90);
    --glow-pink:      0 0 0 2px rgba(255,125,232,.90);
    --glow-green:     0 0 0 2px rgba(61,255,180,.90);
    --glow-gold:      0 0 0 2px rgba(255,227,79,.95);
    --shadow:         0 10px 28px rgba(0,0,0,.92), 0 0 0 1px rgba(255,255,255,.24);
    --shadow-soft:    0 4px 14px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.15);
    --grid:           rgba(255,255,255,.07);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 0 2px rgba(95,233,255,.90);
    --glow-accent:    0 0 0 2px rgba(255,125,232,.90);
    --on-accent:      #000000;
    --on-primary:     #000000;
    --on-gold:        #000000;
    --green-deep:     #228563;
    --red-deep:       #b45063;
    --amber-deep:     #9b631a;
    --violet-deep:    #7e6cac;
    --gold-deep:      #837731;
    --neutral:        #8c8c8c;
    --neutral-deep:   #616366;
    --primary-light:  #a7f3ff;
    --halo-1:         rgba(191,160,255,0.16);
    --halo-2:         rgba(95,233,255,0.12);
    --halo-3:         rgba(255,125,232,0.1);
    --topbar-bg:      linear-gradient(180deg, rgba(19,19,19,0.94), rgba(10,10,10,0.86));
    --topbar-line:    rgba(95,233,255,0.15);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(95,233,255,0.18), transparent 60%),
                   linear-gradient(135deg, #39575c, #544c64);
    --selection-bg:   rgba(255,125,232,0.32);
    --selection-fg:   #ffffff;
    --overlay:        rgba(2,3,5,0.78);
    --code-bg:        #030509;
    --code-text:      #ffffff;
    --hud-bg:         linear-gradient(90deg, rgba(10,10,10,0.96), rgba(31,31,31,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #615677, #6d4666);
    --hud-text:       #ffffff;
    --hud-muted:      #d8d8d8;
    --hud-primary:    #5fe9ff;
    --hud-accent:     #ff7de8;
    --hud-violet:     #bfa0ff;
    --hud-accent-soft: rgba(255,125,232,.16);
    --hud-border:     #808080;
    --hud-glow:       0 0 0 2px rgba(95,233,255,.90);
}

/* ─────────────────────────────────────────────────────────────────────────
   Océan — Un clair froid et lumineux, bleu profond, sarcelle et corail, pensé pour une salle très éclairée ou un vidéoprojecteur.
   ───────────────────────────────────────────────────────────────────────── */
body.tf-theme-ocean {
    color-scheme: light;

    --bg:             #dce9f6;
    --bg-2:           #cfe1f2;
    --surface:        #ffffff;
    --surface-2:      #f1f7fd;
    --surface-3:      #e5f0fb;
    --border:         #a9c6de;
    --border-soft:    #cfe0ee;
    --text:           #0d2739;
    --muted:          #496478;
    --faint:          #6b8598;
    --primary:        #0a68a8;
    --primary-deep:   #074f80;
    --violet:         #5a4fc8;
    --magenta:        #c03d29;
    --accent:         #c03d29;
    --green:          #0c7462;
    --amber:          #9a5b06;
    --red:            #c22a3f;
    --gold:           #856614;
    --gold-soft:      rgba(141,108,21,.12);
    --primary-soft:   rgba(10,104,168,.10);
    --violet-soft:    rgba(90,79,200,.12);
    --accent-soft:    rgba(200,64,43,.10);
    --green-soft:     rgba(12,116,98,.11);
    --amber-soft:     rgba(160,95,6,.13);
    --red-soft:       rgba(194,42,63,.10);
    --glow-cyan:      0 0 0 1px rgba(10,104,168,.34), 0 2px 10px rgba(10,104,168,.18);
    --glow-pink:      0 0 0 1px rgba(200,64,43,.32), 0 2px 10px rgba(200,64,43,.16);
    --glow-green:     0 0 0 1px rgba(12,116,98,.32), 0 2px 10px rgba(12,116,98,.16);
    --glow-gold:      0 0 0 1px rgba(141,108,21,.34), 0 2px 10px rgba(141,108,21,.16);
    --shadow:         0 14px 32px rgba(12,58,99,.16);
    --shadow-soft:    0 6px 16px rgba(12,58,99,.10);
    --grid:           rgba(10,104,168,.07);

    /* Déduits de la palette ci-dessus. */
    --glow-primary:   0 0 0 1px rgba(10,104,168,.34), 0 2px 10px rgba(10,104,168,.18);
    --glow-accent:    0 0 0 1px rgba(200,64,43,.32), 0 2px 10px rgba(200,64,43,.16);
    --on-accent:      #ffffff;
    --on-primary:     #ffffff;
    --on-gold:        #ffffff;
    --green-deep:     #0e6759;
    --red-deep:       #a9283c;
    --amber-deep:     #87520b;
    --violet-deep:    #5048b0;
    --gold-deep:      #755b17;
    --neutral:        #8aa0b1;
    --neutral-deep:   #465766;
    --primary-light:  #478ebe;
    --halo-1:         rgba(90,79,200,0.07);
    --halo-2:         rgba(10,104,168,0.07);
    --halo-3:         rgba(192,61,41,0.05);
    --topbar-bg:      linear-gradient(180deg, rgba(255,255,255,0.94), rgba(238,244,251,0.86));
    --topbar-line:    rgba(10,104,168,0.22);
    --thumb-bg:       radial-gradient(circle at 30% 20%, rgba(10,104,168,0.14), transparent 60%),
                   linear-gradient(135deg, #cbe0f1, #d7e0f6);
    --selection-bg:   rgba(192,61,41,0.22);
    --selection-fg:   #14161e;
    --overlay:        rgba(113,121,133,0.55);
    --code-bg:        #0f1626;
    --code-text:      #e3ebf7;
    --hud-bg:         linear-gradient(90deg, rgba(245,248,252,0.96), rgba(235,243,252,0.96));
    --hud-badge-bg:   linear-gradient(135deg, #b4b8e9, #dababc);
    --hud-text:       #0d2739;
    --hud-muted:      #496478;
    --hud-primary:    #0a68a8;
    --hud-accent:     #c03d29;
    --hud-violet:     #5a4fc8;
    --hud-accent-soft: rgba(200,64,43,.10);
    --hud-border:     #a9c6de;
    --hud-glow:       0 0 0 1px rgba(10,104,168,.34), 0 2px 10px rgba(10,104,168,.18);
}