/* REGINE : mode sombre. Classe dark posée sur <html> avant l'affichage (fragments/head.html) : choix mémorisé, sinon réglage de l'appareil.
   Chargée après tailwind.css : html.dark .x l'emporte sur l'utilitaire .x. Le bundle React lit la même classe (jetons .dark de frontend/src/index.css).
   Le bulletin de paie (.bulletin) reste une feuille blanche. */
html.dark {
    color-scheme: dark;
    --s-fond: #0b1626; --s-surface: #13233a; --s-surface-2: #1a2d48; --s-bord: #2a3f5c;
    --s-texte: #e2e8f0; --s-texte-2: #cbd5e1; --s-discret: #94a3b8; --s-titre: #8fdcff;
}
html.dark body { background: var(--s-fond); color: var(--s-texte); }

/* Surfaces */
html.dark :is(.bg-white, .carte, .champ, .btn-neutre, header.bg-white) { background-color: var(--s-surface); }
html.dark :is(.bg-slate-50, .bg-gray-50) { background-color: var(--s-fond); }
html.dark main :is(.bg-slate-50, .bg-gray-50) :is(.bg-slate-50, .bg-gray-50),
html.dark :is(.carte, .bg-white) :is(.bg-slate-50, .bg-gray-50, .bg-slate-100, .bg-gray-100) { background-color: var(--s-surface-2); }
html.dark :is(.bg-slate-100, .bg-gray-100, .bg-gray-200) { background-color: var(--s-surface-2); }
html.dark :is(.hover\:bg-slate-50, .hover\:bg-gray-50, .hover\:bg-slate-100, .btn-neutre):hover { background-color: var(--s-surface-2); }

/* Bordures */
html.dark :is(.carte, .champ, .btn-neutre, .border-gray-200, .border-gray-100, .border-gray-300, .border-b, .border-t, .border) { border-color: var(--s-bord); }
html.dark :is(.divide-gray-100, .divide-gray-200, .divide-y) > * + * { border-color: var(--s-bord); }

/* Textes */
html.dark :is(.text-regine-blue, .hover\:text-regine-blue:hover, .code, h1, h2, h3) { color: var(--s-titre); }
html.dark :is(.text-regine-graphite, .text-gray-700, .text-gray-800, .text-gray-900, .etiquette) { color: var(--s-texte); }
html.dark :is(.text-gray-600, .text-gray-500) { color: var(--s-texte-2); }
html.dark :is(.text-gray-400, .text-gray-300, .text-regine-blue\/60, .th) { color: var(--s-discret); }
html.dark .bg-regine-blue\/10 { background-color: rgba(143, 220, 255, .12); }

/* Boutons et champs ; le bouton principal garde la charte, éclaircie pour rester visible */
html.dark .btn-primaire { background: #2a5a96; }
html.dark .btn-primaire:hover { background: #336bb0; }
html.dark :is(.btn-neutre, .champ) { color: var(--s-texte); }
html.dark .btn-danger { background: transparent; color: #fca5a5; border-color: #7f1d1d; }
html.dark :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) { background-color: var(--s-surface); color: var(--s-texte); border-color: var(--s-bord); }
html.dark ::placeholder { color: #64748b; }

/* Messages colorés : fonds sombres teintés, textes clairs */
html.dark :is(.bg-red-50, .bg-red-100) { background-color: rgba(239, 68, 68, .14); }
html.dark :is(.bg-green-50, .bg-green-100) { background-color: rgba(34, 197, 94, .14); }
html.dark :is(.bg-amber-50, .bg-amber-100, .bg-yellow-50) { background-color: rgba(245, 158, 11, .14); }
html.dark :is(.bg-blue-50, .bg-sky-50) { background-color: rgba(56, 189, 248, .14); }
html.dark :is(.border-red-200, .border-green-200, .border-amber-200, .border-amber-300, .border-blue-200, .border-sky-300) { border-color: var(--s-bord); }
html.dark :is(.text-red-500, .text-red-600, .text-red-700, .text-red-800) { color: #fca5a5; }
html.dark :is(.text-green-600, .text-green-800, .text-emerald-600) { color: #86efac; }
html.dark :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900) { color: #fcd34d; }
html.dark :is(.text-blue-600, .text-blue-800, .text-sky-900) { color: #7dd3fc; }

/* Menu : déjà sombre, un ton plus profond pour se détacher du fond */
html.dark #menu { background-color: #0d1d33; }

/* Bulletin : feuille blanche, textes d'origine */
html.dark .bulletin { background: #fff; color: #111; color-scheme: light; padding: .75rem; border-radius: .5rem; }
html.dark .bulletin :is(h1, h2, h3, .text-regine-blue, .text-gray-500, .text-gray-400) { color: inherit; }

/* Panneau de l'assistant (css/assistant.css) */
html.dark :is(.assistant-panneau, .assistant-carte, .assistant-pastille, .assistant-bouton-neutre, .assistant-miniatures button) { background: var(--s-surface); color: var(--s-texte); border-color: var(--s-bord); }
html.dark :is(.assistant-contexte, .assistant-carte-entete, .assistant-apercu-demande, .assistant-bouton-neutre:hover, .assistant-icone:hover, .assistant-etapes-bouton:hover) { background: var(--s-surface-2); border-color: var(--s-bord); }
html.dark :is(.assistant-beta, .assistant-icone[aria-pressed="true"], .assistant-expliquer:hover, .assistant-expliquer[aria-pressed="true"], tr.assistant-ligne-selectionnee, .assistant-tuile.choisie, .assistant-depot.survol, .assistant-micro:hover) { background: rgba(143, 220, 255, .14); color: var(--s-titre); }
html.dark :is(.assistant-demande :is(input, select, textarea), .assistant-saisie textarea, .assistant-signalement textarea) { background: var(--s-surface); color: var(--s-texte); border-color: var(--s-bord); }
html.dark .assistant-panneau dialog, html.dark dialog { background: var(--s-surface); color: var(--s-texte); }

/* Bouton de bascule (fragments/header.html) : lune en clair, soleil en sombre */
.theme-soleil, html.dark .theme-lune { display: none; }
html.dark .theme-soleil { display: inline; }

/* Logo sur son cadre blanc (menu, portail) */
html.dark aside a.bg-white { background-color: #fff; }

html.dark .mdp-oeil { color: var(--s-discret); }
html.dark .mdp-oeil:hover { color: var(--s-titre); }