/* EnergySys — habillage SOMBRE, la même palette que la ligne « expert ».
 *
 * Cette feuille ne redessine rien : elle REPEINT. Tout ce que styles.css
 * exprime en variables est ici redéfini pour le thème sombre ; ne restent
 * en dessous que les rares teintes qu'aucune variable ne portait — nommées
 * une à une, avec leur écran, pour qu'on sache toujours ce qu'on repeint.
 *
 * Règle de la maison : chaque déclaration est sous html[data-theme="sombre"].
 * Aucune règle ne commence par « . » ou « body » : sans cette garde, une
 * retouche du thème sombre déteindrait sur le thème clair.
 */

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

  /* Surfaces, du plus profond au plus proche */
  --bg: #0e131a;
  --panel: #151c25;
  --panel-haut: #1a232e;
  --creux: #10161e;
  --zebre: #131b24;
  --survol: #1f2a37;
  --voile: #0b1016;

  /* Traits */
  --border: #26313f;
  --border-strong: #33414f;
  --ligne: #202a36;
  --ligne-forte: #33414f;

  /* Textes */
  --text: #e4ebf2;
  --muted: #94a3b4;

  /* Accent et états */
  --accent: #4aa3ff;
  --accent-soft: rgba(74, 163, 255, .14);
  --accent-strong: #6cb6ff;
  --sur-accent: #ffffff;           /* posé sur rouge, gris ou bleu foncé */
  --ok: #4ade80;
  --warn: #f6c66b;
  --error: #ff8b7d;
  --ok-soft: rgba(74, 222, 128, .13);
  --warn-soft: rgba(246, 198, 107, .13);
  --error-soft: rgba(255, 139, 125, .13);

  /* Natures de fluide : les mêmes qu'en clair, sauf la donnée — un gris
     presque noir (#222) disparaissait sur fond sombre. */
  --data: #7a94b0;

  /* Ce qui flotte au-dessus du schéma ou des courbes garde sa
     translucidité — on devine le tracé dessous — mais en teinte de
     panneau. (L'infobulle était DÉJÀ sombre : ses filets blancs à 16 %
     restent justes, on n'y touche pas.) */
  --verre: rgba(21, 28, 37, .95);
  --verre-doux: rgba(31, 42, 55, .75);

  /* Quadrillage du canevas et relief */
  --grille: #1e2732;
  --grille-douce: #182029;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --radius: 4px;                   /* l'angle vif de la ligne expert */
}

/* Les chiffres en colonnes, comme sur la ligne expert : une valeur qui
   change ne fait plus danser celles d'à côté. */
html[data-theme="sombre"] body { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- canevas */

/* Le fond propre de React Flow est opaque : sans ça, il masque le fond de
   l'application et le quadrillage. */
html[data-theme="sombre"] .react-flow__renderer,
html[data-theme="sombre"] .react-flow__pane { background: var(--bg); }

html[data-theme="sombre"] .react-flow__minimap {
  background: var(--creux); border: 1px solid var(--border);
}
html[data-theme="sombre"] .react-flow__minimap-mask { fill: rgba(8, 12, 18, .65); }
html[data-theme="sombre"] .react-flow__controls-button {
  background: var(--panel); border-bottom: 1px solid var(--border); fill: var(--muted);
}
html[data-theme="sombre"] .react-flow__controls-button:hover { background: var(--survol); }

/* Un texte posé sur une surface accentuée pleine (bouton principal, jauge,
   badge) : l'accent clair du thème sombre demande de l'encre foncée. */
html[data-theme="sombre"] .btn-primary,
html[data-theme="sombre"] .fiche-badge.detaillee { color: #06101c; }
html[data-theme="sombre"] .btn-primary:hover { color: #06101c; }

/* --------------------------------------------- surfaces restées en dur */


/* Jauge de progression. */
html[data-theme="sombre"] .voile-barre { background: var(--survol); }

/* Blocs de messages et d'état : le pastel clair devient une teinte sourde
   de la même famille, et l'encre remonte pour rester lisible. */
html[data-theme="sombre"] .flash-alerte,
html[data-theme="sombre"] .mode-secours.actif,
html[data-theme="sombre"] .man-warn,
html[data-theme="sombre"] .lecture-seule,
html[data-theme="sombre"] .nom-rappel,
html[data-theme="sombre"] .project-name.nom-requis,
html[data-theme="sombre"] .aide-alerte {
  background: rgba(246, 198, 107, .12); border-color: rgba(246, 198, 107, .45);
  color: var(--warn);
}
html[data-theme="sombre"] .flash-erreur,
html[data-theme="sombre"] .audit-ligne.ko,
html[data-theme="sombre"] .audit-verdict.ko,
html[data-theme="sombre"] .ctxmenu button.danger:hover {
  background: rgba(255, 139, 125, .12); color: var(--error);
}
html[data-theme="sombre"] .audit-verdict.ok,
html[data-theme="sombre"] .cmp-table td.cmp-best,
html[data-theme="sombre"] .carte-recup-commune {
  background: rgba(74, 222, 128, .12); color: var(--ok);
}
html[data-theme="sombre"] .audit-ligne.ko .audit-etat,
html[data-theme="sombre"] .perft-cop.incoherent { color: var(--error); }
html[data-theme="sombre"] .audit-etat,
html[data-theme="sombre"] .carte-recup-commune .carte-resume { color: var(--ok); }

/* Bandeaux d'information (aide, assistant, comparaison, étiquettes). */
html[data-theme="sombre"] .aide-fiche,
html[data-theme="sombre"] .assistant-moi,
html[data-theme="sombre"] .variante-ligne.active,
html[data-theme="sombre"] .msg-tag,
html[data-theme="sombre"] .info-badge.has-fiche {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
}
html[data-theme="sombre"] .assistant-bot,
html[data-theme="sombre"] .assistant-confidentialite,
html[data-theme="sombre"] .manual-toc,
html[data-theme="sombre"] .fiche-zone.survol,
html[data-theme="sombre"] .choix-mode .carte-mode.actif { background: var(--survol); }

/* Pastilles de version : fonds pleins, encre foncée dessus. */
html[data-theme="sombre"] .version-badge { background: var(--muted); color: #06101c; }
html[data-theme="sombre"] .version-badge.majeure { background: var(--error); color: #06101c; }
html[data-theme="sombre"] .version-badge.mineure { background: var(--warn); color: #06101c; }
html[data-theme="sombre"] .version-badge.legere { background: var(--ok); color: #06101c; }
html[data-theme="sombre"] .version-neuve { background: var(--hot); }
html[data-theme="sombre"] .fiche-badge.simple { background: var(--muted); color: #06101c; }

/* Bouton d'action destructrice : le rouge sombre devient un rouge clair,
   donc son texte doit foncer. */
html[data-theme="sombre"] .btn.btn-danger { background: var(--error); border-color: var(--error); color: #06101c; }
html[data-theme="sombre"] .btn.btn-danger:hover { background: #ff6f5e; border-color: #ff6f5e; }

/* Textes gris trop foncés pour un fond sombre. */
html[data-theme="sombre"] .groupe-titre,
html[data-theme="sombre"] .groupe-prise,
html[data-theme="sombre"] .tuto-carte p,
html[data-theme="sombre"] .choix-mode .carte-mode span,
html[data-theme="sombre"] .badge-mode.simplifie { color: var(--muted); }
html[data-theme="sombre"] .local-case { border-color: var(--border-strong); }
html[data-theme="sombre"] .niveau-trait .ligne { border-top-color: var(--border-strong); }


/* Accessoires : le survol clair du volet devient une nuance sombre. */
html[data-theme="sombre"] .acc-ligne:hover,
html[data-theme="sombre"] .acc-ligne.sel { background: rgba(255, 255, 255, .05);
  border-color: var(--border-strong); }
html[data-theme="sombre"] .acc-branche,
html[data-theme="sombre"] .acc-palette,
html[data-theme="sombre"] .acc-item { border-color: var(--border-strong); }
html[data-theme="sombre"] .acc-item:hover { background: rgba(255, 255, 255, .06);
  border-color: var(--muted); }
html[data-theme="sombre"] .acc-point { background: rgba(255, 255, 255, .10); }

html[data-theme="sombre"] .acc-coef { border-color: var(--border-strong); }

html[data-theme="sombre"] .block-item .acc-ico { color: #e8a36a; }