/* ==========================================================================
   MODE SOMBRE (« Nuit ») DE L'ESPACE ENSEIGNANT
   Actif seulement sous html[data-theme="sombre"], que pose js/theme-boot.js
   selon Réglages › Apparence (choix gardé sur l'appareil).

   Le principe : on redonne d'autres valeurs aux jetons --so-* de couleurs.css,
   sans toucher aux composants. La couleur du site (prise en base, --bg-start /
   --bg-end) reste la même : elle teinte toujours le fond, les cartes et les
   bords, comme en clair.
   ⚠️ La seconde moitié du fichier rattrape les couleurs encore écrites EN DUR
   dans les autres feuilles (un #fff, un rose pâle…). Un composant neuf qui
   écrit sa couleur en dur au lieu d'un jeton --so-* restera clair en mode
   sombre : passer par les jetons, ou l'ajouter ici.
   ========================================================================== */

html[data-theme="sombre"] {
  color-scheme: dark; /* barres de défilement, menus déroulants natifs */

  /* Le fond : un brun très sombre, chaud, jamais du noir pur */
  --so-bg: color-mix(in srgb, var(--bg-start, #FF6B35) 6%, #141210 94%);

  /* Les trois degrés de surface, de plus en plus clairs (en clair, c'était
     de plus en plus teinté) */
  --so-surface: color-mix(in srgb, var(--bg-start, #FF6B35) 4%, #1F1C19 96%);
  --so-surface-2: color-mix(in srgb, var(--bg-start, #FF6B35) 7%, #26221E 93%);
  --so-surface-3: color-mix(in srgb, var(--bg-start, #FF6B35) 10%, #2E2924 90%);
  --so-border: color-mix(in srgb, var(--bg-start, #FF6B35) 10%, #35302A 90%);
  --so-border-strong: color-mix(in srgb, var(--bg-start, #FF6B35) 18%, #4A433B 82%);

  /* Le texte : crème, pas blanc pur (moins éblouissant le soir) */
  --so-text: #F3EFE9;
  --so-text-2: #C9C1B7;
  --so-text-3: #8C847A;
  --so-success: #4ADE80;
  --so-danger: #F87171;
  --score-ok: #22C55E;
  --score-ko: #EF4444;
  --color-muted: #C9C1B7;
  --color-border: rgba(243, 239, 233, 0.12);
  --color-success: #4ADE80;
  --color-danger: #F87171;

  /* Les fonds teintés de la couleur du site : mélangés au sombre au lieu du blanc */
  --so-accent-soft: color-mix(in srgb, var(--bg-start, #FF6B35) 16%, #1F1C19 84%);
  --so-accent-hover: color-mix(in srgb, var(--bg-start, #FF6B35) 32%, #1F1C19 68%);
  /* « Accent profond » sert de texte coloré : en sombre il doit ÉCLAIRCIR */
  --so-accent-deep: color-mix(in srgb, var(--bg-start, #FF6B35) 72%, #FFFFFF 28%);
  --color-on-light-accent: var(--so-accent-deep);

  /* Le verre : même recette, mais teinte sombre et reflets adoucis
     (des reflets blancs à 90 % sur du sombre feraient des traits de néon) */
  --so-glass-tint: #3A332C;
  --so-glass: color-mix(in srgb, var(--so-glass-tint) 30%, transparent);
  --so-glass-strong: color-mix(in srgb, var(--so-glass-tint) 55%, transparent);
  --so-specular:
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
    inset 2px 1px 0 -1px color-mix(in srgb, #fff 28%, transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, #fff 18%, transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, #fff 12%, transparent);
  --so-specular-lg:
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, #fff 24%, transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, #fff 16%, transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, #fff 10%, transparent),
    inset 0 3px 4px -2px color-mix(in srgb, #000 30%, transparent);

  --so-shadow-sm:
    0 0 0 1px color-mix(in srgb, var(--so-accent) 30%, transparent),
    0 3px 6px 0 color-mix(in srgb, #000 35%, transparent);
  --so-shadow-pose: 0 1px 2px rgba(0, 0, 0, 0.45);
  --so-shadow-md: 0 12px 32px -10px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);
  --so-shadow-lg: 0 18px 44px -10px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Les halos du fond : gardés, mais beaucoup plus discrets, et sans le jaune */
html[data-theme="sombre"]::before {
  background-image:
    linear-gradient(to bottom, transparent 84%, var(--so-bg) 98%),
    radial-gradient(55% 38% at 82% -8%, rgba(var(--so-accent-rgb), 0.16), transparent 65%),
    radial-gradient(40% 34% at 28% 52%, color-mix(in srgb, var(--bg-end, #C0392B) 8%, transparent), transparent 70%),
    radial-gradient(50% 40% at 78% 88%, rgba(var(--so-accent-rgb), 0.08), transparent 62%) !important;
}

/* ==========================================================================
   LES COULEURS ÉCRITES EN DUR DANS LES AUTRES FEUILLES
   Tout est enveloppé dans :where(), qui ne compte pas dans la priorité : chaque
   règle pèse donc EXACTEMENT comme celle qu'elle remplace et gagne seulement
   parce que ce fichier se charge après elle. Ainsi survol.css, chargé après
   lui, garde la main sur les survols, comme en clair.
   ========================================================================== */

/* Les recettes communes : --sb-champ = le fond d'un champ ou d'une case (le
   blanc du clair) ; --sb-*-fond / --sb-*-texte = les pastilles de sens (rouge,
   vert, ambre, violet), 18 % de la couleur mélangée à la carte. */
html[data-theme="sombre"] {
  --sb-champ: var(--so-surface-2);
  --sb-flottant: color-mix(in srgb, var(--so-surface) 92%, transparent);
  --sb-rouge-fond: color-mix(in srgb, #ef4444 18%, var(--so-surface) 82%);
  --sb-rouge-filet: color-mix(in srgb, #ef4444 40%, transparent);
  --sb-rouge-texte: #fca5a5;
  --sb-vert-fond: color-mix(in srgb, #22c55e 18%, var(--so-surface) 82%);
  --sb-vert-texte: #86efac;
  --sb-ambre-fond: color-mix(in srgb, #f59e0b 18%, var(--so-surface) 82%);
  --sb-ambre-texte: #fcd34d;
  --sb-violet-fond: color-mix(in srgb, #8b5cf6 20%, var(--so-surface) 80%);
  --sb-violet-texte: #c4b5fd;
  --sb-accent-fond: color-mix(in srgb, var(--so-accent) 20%, var(--so-surface) 80%);
  /* Le cadran de l'horloge (Outils), blanc en clair (js/outils-horloge.js) */
  --ho-cadran: var(--so-surface-2);
}

/* ── Champs de saisie, menus et cases : le blanc devient la surface ── */
/* Priorité d'un simple nom de balise : une classe qui habille un champ garde la main. */
:where(html[data-theme="sombre"]) :is(input, select, textarea):where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
  background-color: var(--sb-champ);
  color: var(--so-text);
  border-color: var(--so-border-strong);
}
:where(html[data-theme="sombre"]) select option { background: var(--so-surface); color: var(--so-text); }
:where(html[data-theme="sombre"]) .mail-label input,
:where(html[data-theme="sombre"]) .eval-head-input,
:where(html[data-theme="sombre"]) .eval-note-input,
:where(html[data-theme="sombre"]) .eval-direct-select,
:where(html[data-theme="sombre"]) .cmp-chk,
:where(html[data-theme="sombre"]) .ck-choix,
:where(html[data-theme="sombre"]) .sv-dot--0,
:where(html[data-theme="sombre"]) .sv-pill--0,
:where(html[data-theme="sombre"]) .sv-level--0,
:where(html[data-theme="sombre"]) .ac-neuve__box,
:where(html[data-theme="sombre"]) .exd-mea__carte {
  background: var(--sb-champ); color: var(--so-text);
}
:where(html[data-theme="sombre"]) .exd-mea__carte i { background: var(--so-border-strong); }
:where(html[data-theme="sombre"]) :is(.case, .td-box, .ck-box):where(:not(.case--on, .td-box--on, .ck-box--on, .ck-box--moyen, .ck-box--non)) {
  /* Seules les cases VIDES s'assombrissent. Le vert, le jaune et le rouge
     (fait, à moitié, pas fait) sont des couleurs de sens, gardées telles
     quelles ; le :where() exclut ces états sans peser dans la priorité. */
  background: var(--sb-champ); border-color: var(--so-border-strong);
}

/* ── Les interrupteurs : rail sombre au repos, bouton gris (le blanc pur
   éblouissait sur le sombre), blanc seulement une fois allumé ── */
:where(html[data-theme="sombre"]) .toggle-row input[type="checkbox"] {
  background: var(--so-surface-3);
  border-color: var(--so-border-strong);
}
:where(html[data-theme="sombre"]) .toggle-row input[type="checkbox"]::after {
  background: #A8A097;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
:where(html[data-theme="sombre"]) .toggle-row input[type="checkbox"]:checked { border-color: transparent; }
:where(html[data-theme="sombre"]) .toggle-row input[type="checkbox"]:checked::after { background: #F3EFE9; }

/* ── Les petites fenêtres, menus et panneaux qui flottent ── */
:where(html[data-theme="sombre"]) .modal__content,
:where(html[data-theme="sombre"]) .sv-modal { background: var(--sb-flottant); }
:where(html[data-theme="sombre"]) .drp,
:where(html[data-theme="sombre"]) .ck-menu,
:where(html[data-theme="sombre"]) .td-cal,
:where(html[data-theme="sombre"]) .td-menu,
:where(html[data-theme="sombre"]) .cpt-menu,
:where(html[data-theme="sombre"]) .chip-bulle,
:where(html[data-theme="sombre"]) .chip-bulle::before,
:where(html[data-theme="sombre"]) .eval-msg-card { background: var(--so-surface); color: var(--so-text); }
:where(html[data-theme="sombre"]) .cg-panneau { background: var(--so-surface); color: var(--so-text); }
:where(html[data-theme="sombre"]) .cg-panneau h2 { color: var(--so-text); }
:where(html[data-theme="sombre"]) .login-back,
:where(html[data-theme="sombre"]) .exd-header,
:where(html[data-theme="sombre"]) .exd-close,
:where(html[data-theme="sombre"]) .exd-vote { background: color-mix(in srgb, var(--so-surface-2) 70%, transparent); }
:where(html[data-theme="sombre"]) .sv-agg { background: var(--so-surface-2); color: var(--so-text-2); }
:where(html[data-theme="sombre"]) .exercise-card__score { background: color-mix(in srgb, var(--so-surface) 90%, transparent); }
/* ⚠️ Gardé blanc EXPRÈS : .apercu-impression__cadre, l'aperçu de la feuille
   imprimée. C'est du papier, il doit le rester. */

/* ── Les couches (progression → scores → fiche) : en clair, leurs tuiles et
   leur en-tête sont du blanc à moitié transparent, qui sur du sombre donnait
   un gris sale ── */
:where(html[data-theme="sombre"]) .couche__tete { background: color-mix(in srgb, var(--so-surface) 70%, transparent); }
:where(html[data-theme="sombre"]) .mobile-ex-card { background: var(--so-surface-2); }
:where(html[data-theme="sombre"]) .exd-mea__cadre { background: color-mix(in srgb, var(--so-surface-2) 60%, transparent); }
:where(html[data-theme="sombre"]) .exd-mea__scene[data-etat="important"] .exd-mea__carte--cible,
:where(html[data-theme="sombre"]) .ex-pill__mea--important { background: var(--sb-ambre-fond); color: var(--sb-ambre-texte); }
:where(html[data-theme="sombre"]) .eval-mention--PA { background: color-mix(in srgb, #f97316 20%, var(--so-surface) 80%); color: #fdba74; }

/* ── La Compta a ses propres jetons (compta.css). Les trois couleurs de SENS
   gardent leur teinte (vert = rentre, rouge = sort, violet = à répartir) ;
   seuls leurs fonds pâles s'assombrissent et le texte s'éclaircit pour rester
   lisible. ── */
:where(html[data-theme="sombre"]) :is(#tab-admin, .couche--compta) {
  --cmp-surface: var(--so-surface-2);
  --cmp-accent-soft: var(--so-accent-soft);
  --cmp-pos: #4ADE80;
  --cmp-pos-bg: color-mix(in srgb, #15803D 26%, var(--so-surface) 74%);
  --cmp-neg: #F87171;
  --cmp-neg-bg: color-mix(in srgb, #C13A2B 26%, var(--so-surface) 74%);
  --cmp-flex: #C4B5FD;
  --cmp-flex-bg: color-mix(in srgb, #6D28D9 24%, var(--so-surface) 76%);
  --cmp-flex-line: color-mix(in srgb, #6D28D9 55%, var(--so-surface) 45%);
}
:where(html[data-theme="sombre"]) .cmp-chk { background: var(--sb-champ); }

/* ── Suivi : le camembert VIDE est dessiné en trois beiges écrits dans
   js/suivi.js (pieFrom) ; on les redonne en trois bruns ── */
:where(html[data-theme="sombre"]) .sv-pie--empty svg > :nth-child(1) { fill: #3A342E; }
:where(html[data-theme="sombre"]) .sv-pie--empty svg > :nth-child(2) { fill: #453E37; }
:where(html[data-theme="sombre"]) .sv-pie--empty svg > :nth-child(3) { fill: #332E29; }
:where(html[data-theme="sombre"]) .sv-pie--empty::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }

/* ── Le portail : ses cartes (rôle, classe, élève, dé) sont du blanc à moitié
   transparent en clair ── */
:where(html[data-theme="sombre"]) :is(.login-role-card, .login-class-card, .login-eleve-card),
:where(html[data-theme="sombre"]) .login-de { background: color-mix(in srgb, var(--so-surface-2) 85%, transparent); }
:where(html[data-theme="sombre"]) .login-eleve-card--plus { background: color-mix(in srgb, var(--so-surface-2) 60%, transparent); }

/* ── Relecture Codex (20.10.2026) : les textes de sens restés au vert, rouge
   ou violet FONCÉS du clair, illisibles sur les surfaces sombres ── */
:where(html[data-theme="sombre"]) .exd-q-answer,
:where(html[data-theme="sombre"]) .exd-q-bonne,
:where(html[data-theme="sombre"]) .login-hint--ok { color: var(--so-success); }
:where(html[data-theme="sombre"]) .exd-q-answer--choix { color: var(--so-text); }
:where(html[data-theme="sombre"]) .exd-q-instr { color: #C4B5FD; }
:where(html[data-theme="sombre"]) .exd-q-item { border-bottom-color: var(--so-border); }
:where(html[data-theme="sombre"]) .ck-note--bas { color: #FCA5A5; }
:where(html[data-theme="sombre"]) .ck-note--moyen { color: #FDBA74; }
:where(html[data-theme="sombre"]) .ck-box--on .ck-note-fond { color: #fff; }
:where(html[data-theme="sombre"]) .ck-menu .ck-menu__danger,
:where(html[data-theme="sombre"]) .td-menu .td-menu__danger,
:where(html[data-theme="sombre"]) .cmp-cover-row .cmp-give.cmp-give--trop { color: var(--so-danger); }
:where(html[data-theme="sombre"]) .sheet-item--danger { color: var(--so-danger); border-color: var(--sb-rouge-filet); }
:where(html[data-theme="sombre"]) .streak-badge { background: var(--sb-ambre-fond); color: var(--sb-ambre-texte); }
:where(html[data-theme="sombre"]) .eval-degre-badge.eval-degre-badge--gris { background: var(--so-surface-3); color: var(--so-text-2); }
/* « Ouvrir l'aide détaillée » : son fond est le jeton d'ENCRE accentuée, que
   le sombre éclaircit ; avec son texte blanc, il faut un fond de bouton plein. */
:where(html[data-theme="sombre"]) .eval-kbd-help { background: var(--so-accent-end); }
:where(html[data-theme="sombre"]) .eval-direct-select.eval-case--non-enregistree {
  background: var(--sb-rouge-fond); border-color: var(--sb-rouge-filet); color: var(--sb-rouge-texte);
}

/* ── La petite page élève de la fenêtre « Mise en avant » (et de son aperçu
   dans l'aide) : le fond de la classe, sous le même voile que la vraie page
   élève (sombre-eleve.css) ── */
:where(html[data-theme="sombre"]) .exd-mea__scene {
  background: linear-gradient(rgba(12, 10, 9, 0.68), rgba(12, 10, 9, 0.68)), var(--so-grad);
}

/* ── Les textes écrits en gris-bleu foncé ── */
:where(html[data-theme="sombre"]) .mail-label,
:where(html[data-theme="sombre"]) .sv-empty,
:where(html[data-theme="sombre"]) .ck-empty,
:where(html[data-theme="sombre"]) .td-erreur { color: var(--so-text-2); }
:where(html[data-theme="sombre"]) .eval-note,
:where(html[data-theme="sombre"]) .eval-mention,
:where(html[data-theme="sombre"]) .eval-moy-val,
:where(html[data-theme="sombre"]) .eval-msg strong,
:where(html[data-theme="sombre"]) .eval-msg__title,
:where(html[data-theme="sombre"]) .qc-reponse b { color: var(--so-text); }
:where(html[data-theme="sombre"]) .qc-reponse { color: var(--so-text-2); }

/* ── Jauges et barres vides ── */
:where(html[data-theme="sombre"]) .jauge,
:where(html[data-theme="sombre"]) .aide-teinte--vide { background: var(--so-surface-3); }

/* ── Ce qui est ALLUMÉ dans la couleur du site (11 % sur blanc en clair) ── */
:where(html[data-theme="sombre"]) .choix[aria-pressed="true"],
:where(html[data-theme="sombre"]) #btn-cpt-reglages[aria-expanded="true"], :where(html[data-theme="sombre"]) #btn-cpt-choisir[aria-pressed="true"],
:where(html[data-theme="sombre"]) .cpt-el[aria-pressed="true"],
:where(html[data-theme="sombre"]) .cpt-menu__style[aria-pressed="true"],
:where(html[data-theme="sombre"]) .exd-btn--etat[aria-pressed="true"] { background: var(--sb-accent-fond); }

/* ── Les pastilles de sens : rouge, vert, ambre, violet ── */
:where(html[data-theme="sombre"]) .eval-note.eval-note--low,
:where(html[data-theme="sombre"]) .eval-mention--NA,
:where(html[data-theme="sombre"]) .eval-note-input.eval-note--invalide,
:where(html[data-theme="sombre"]) .eval-note-input.eval-case--non-enregistree,
:where(html[data-theme="sombre"]) .eval-head-input.eval-case--non-enregistree,
:where(html[data-theme="sombre"]) .exs-chip--weak,
:where(html[data-theme="sombre"]) .ex-pill__level--difficile,
:where(html[data-theme="sombre"]) .exd-level--difficile,
:where(html[data-theme="sombre"]) .exd-vote--dislike-on,
:where(html[data-theme="sombre"]) .login-alerte,
:where(html[data-theme="sombre"]) #tab-admin input.cmp-fixed-input.cmp-fixed-input--trop,
:where(html[data-theme="sombre"]) #tab-admin .cmp-editor-body input.cmp-montant--invalide,
:where(html[data-theme="sombre"]) .couche--compta input.cmp-montant--invalide,
:where(html[data-theme="sombre"]) .td-bloc--urgent .td-bloc__nom,
:where(html[data-theme="sombre"]) .td-echeance--proche {
  background: var(--sb-rouge-fond); border-color: var(--sb-rouge-filet); color: var(--sb-rouge-texte);
}
:where(html[data-theme="sombre"]) .eval-note.eval-note--mid {
  background: color-mix(in srgb, #f97316 20%, var(--so-surface) 80%);
  border-color: color-mix(in srgb, #f97316 40%, transparent); color: #fdba74;
}
:where(html[data-theme="sombre"]) .ex-pill__level--facile,
:where(html[data-theme="sombre"]) .exd-level--facile,
:where(html[data-theme="sombre"]) .exd-vote--like-on,
:where(html[data-theme="sombre"]) .sv-edit--today,
:where(html[data-theme="sombre"]) .binome-status--on { background: var(--sb-vert-fond); color: var(--sb-vert-texte); }
:where(html[data-theme="sombre"]) .ex-pill__level--moyen,
:where(html[data-theme="sombre"]) .exd-level--moyen,
:where(html[data-theme="sombre"]) .ex-pill__action-btn--fav.is-fav,
:where(html[data-theme="sombre"]) .ex-fav-filter.is-on,
:where(html[data-theme="sombre"]) .exd-btn--fav.is-fav,
:where(html[data-theme="sombre"]) .ou-attention { background: var(--sb-ambre-fond); color: var(--sb-ambre-texte); }
:where(html[data-theme="sombre"]) .ex-pill__type--probleme,
:where(html[data-theme="sombre"]) .exd-probleme-badge { background: var(--sb-violet-fond); color: var(--sb-violet-texte); }

/* ── Survols clairs écrits en dur dans survol.css : ceux-là doivent battre
   survol.css, d'où la vraie priorité (sans :where) ── */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="sombre"] #exd-vote-like:hover { background: var(--sb-vert-fond); color: var(--sb-vert-texte); }
  html[data-theme="sombre"] #exd-vote-dislike:hover,
  html[data-theme="sombre"] #exd-vote-dislike.exd-vote--dislike-on:hover { background: var(--sb-rouge-fond); color: var(--sb-rouge-texte); }
  html[data-theme="sombre"] .exd-btn--etat[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--so-accent) 30%, var(--so-surface) 70%); }
  html[data-theme="sombre"] :is(.survol-pilule--verre, .btn--glass):hover { background: var(--so-surface-3); }
  html[data-theme="sombre"] #exd-vote-like.exd-vote--like-on:hover { background: color-mix(in srgb, #22c55e 26%, var(--so-surface) 74%); }
  html[data-theme="sombre"] :is(.ex-pill__action-btn--fav.is-fav, .exd-btn--fav.is-fav):hover { background: color-mix(in srgb, #f59e0b 26%, var(--so-surface) 74%); }
  html[data-theme="sombre"] .sv-edit--today:hover { background: color-mix(in srgb, #22c55e 30%, var(--so-surface) 70%); color: var(--sb-vert-texte); }
  html[data-theme="sombre"] .cmp-btn.cmp-btn--plus:hover { background: var(--sb-vert-fond); }
  html[data-theme="sombre"] .cmp-btn.cmp-btn--moins:hover { background: var(--sb-rouge-fond); }
  html[data-theme="sombre"] :is(.login-role-card, .login-class-card, .login-eleve-card, .login-de):hover,
  html[data-theme="sombre"] .login-eleve-card--plus:hover { background: var(--so-surface-3); }
}