/* =============================================================================
   FORMENERGIE — Skin additif pour le CRM
   -----------------------------------------------------------------------------
   À CHARGER APRÈS le <style> existant, dans <head> de public/index.html :

       <link rel="stylesheet" href="skin-formenergie.css">

   Pour tout annuler : supprime cette ligne. Aucun fichier existant n'est modifié.

   RÈGLE DE SÉCURITÉ appliquée dans tout ce fichier : on ne touche QU'AUX
   propriétés décoratives — couleurs, bordures, arrondis, ombres, polices,
   transitions. Aucune modification de padding, font-size, display, position,
   grid-template ou géométrie de modal : ce sont exactement les propriétés que
   tes media queries mobiles ajustent. Le responsive existant reste donc intact.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Righteous&family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

/* -----------------------------------------------------------------------------
   1. PALETTE — on réaligne tes jetons sur la charte graphique FORMENERGIE.
   Tout le reste de ton CSS hérite automatiquement de ces valeurs.
   Orange #D86000 (les rayons) · Amber #FFC000 (le soleil) · Vert #187860 (les mains)
   -------------------------------------------------------------------------- */
:root {
  --orange: #D86000;
  --orange-dark: #B85100;
  --orange-light: #FCEEE2;
  --yellow: #FFC000;
  --yellow-bg: #FFF8E3;
  --green: #187860;
  --green-dark: #0F4C3E;
  --green-light: #E9F4EF;
  --blue: #1F6FB2;
  --blue-dark: #16527F;
  --blue-light: #E7F0F8;

  /* Neutres ardoise chaude — remplacent le gris froid Tailwind */
  --gray-900: #131A20;
  --gray-800: #222A32;
  --gray-700: #353D47;
  --gray-600: #4C5661;
  --gray-500: #6B7681;
  --gray-400: #97A3AF;
  --gray-300: #C1CAD3;
  --gray-200: #DCE2E8;
  --gray-100: #EDF0F4;
  --gray-50:  #F6F8FA;

  --red-100: #F8E9E5;
  --red-700: #C0492E;
  --red-800: #8F331F;

  /* Branches — dégradés adoucis, sans effet « SaaS froid » */
  --energie-primary: #187860;
  --energie-secondary: #1F6FB2;
  --energie-gradient: linear-gradient(135deg, #187860 0%, #1F6FB2 100%);
  --energie-bg: linear-gradient(135deg, #E9F4EF 0%, #E7F0F8 100%);
  --tp-primary: #C0492E;
  --tp-secondary: #FFC000;
  --tp-gradient: linear-gradient(135deg, #C0492E 0%, #FFC000 100%);
  --tp-bg: linear-gradient(135deg, #F8E9E5 0%, #FFF8E3 100%);
  --serv-primary: #4C5661;
  --serv-secondary: #97A3AF;
  --serv-gradient: linear-gradient(135deg, #4C5661 0%, #97A3AF 100%);
  --serv-bg: linear-gradient(135deg, #EDF0F4 0%, #F6F8FA 100%);

  /* Ombres douces, jamais de noir franc */
  --fe-shadow-xs: 0 1px 2px rgba(19,26,32,.06);
  --fe-shadow-sm: 0 2px 6px rgba(19,26,32,.07);
  --fe-shadow-md: 0 6px 18px rgba(19,26,32,.09);
  --fe-shadow-lg: 0 16px 40px rgba(19,26,32,.12);
  --fe-ease: cubic-bezier(.22, 1, .36, 1);

  /* Surfaces — redéfinies en mode sombre plus bas */
  --fe-page: #F1F4F6;
  --fe-panel: #ffffff;
  --fe-sunk: #EDF0F4;
  --fe-line: #E2E7EC;
  --fe-ink: #131A20;
  --fe-ink2: #4C5661;
  --fe-ink3: #7B8590;
  --fe-rail: #0A372D;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHIE — Mulish pour l'interface, Righteous pour les titres et
   les chiffres clés (police officielle de la charte).
   -------------------------------------------------------------------------- */
body {
  font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--fe-page);
  color: var(--fe-ink);
}

.section-head h2,
.modal-head h3,
.kpi .value,
#loginBox h2 {
  font-family: 'Righteous', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -.01em;
}

header h1 {
  font-family: 'Righteous', 'Trebuchet MS', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}

/* -----------------------------------------------------------------------------
   3. HEADER — vert profond de la charte plutôt que noir.
   -------------------------------------------------------------------------- */
header {
  background: var(--fe-rail);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
header img {
  border-radius: 8px;
  background: #fff;
}
.user-menu .role-tag {
  background: var(--yellow);
  color: var(--gray-900);
  font-weight: 800;
  border-radius: 999px;
}
.user-menu button {
  border-color: rgba(255,255,255,.22);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
}
.user-menu button:hover {
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.06);
}
.user-menu .um-avatar {
  background: #11493B;
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
}
#quickAddBtn {
  background: var(--yellow);
  color: var(--gray-900);
  border-radius: 999px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(224,168,0,.28);
  transition: filter 140ms var(--fe-ease), transform 140ms var(--fe-ease);
}
#quickAddBtn:hover { filter: brightness(1.06); }
#quickAddBtn:active { transform: translateY(1px) scale(.99); }
#quickAddMenu {
  border-radius: 14px;
  border-color: var(--fe-line);
  box-shadow: var(--fe-shadow-lg);
}
#quickAddMenu button { border-radius: 9px; }

/* Bouton clair / sombre — injecté par skin-rail.js, présent à toutes les tailles */
#themeToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  margin-right: 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.82);
  cursor: pointer;
  padding: 0;
  transition: background 140ms var(--fe-ease), color 140ms var(--fe-ease);
}
#themeToggle:hover { background: rgba(255,255,255,.09); color: #fff; }
#themeToggle svg { width: 17px; height: 17px; display: block; }
body.theme-dark #themeToggle { color: var(--yellow); border-color: rgba(255,192,0,.35); }

/* Liens de données — noms de client, intitulés d'affaire dans les listes.
   Sobres par défaut (même encre que le texte), la couleur de marque n'apparaît
   qu'au survol : dans une liste dense, une colonne de liens colorés et
   soulignés attire l'œil au détriment du chiffre qu'on est venu lire. */
.table-wrap table a,
#todoList a,
.card a:not(.btn) {
  color: var(--fe-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms var(--fe-ease), border-color 140ms var(--fe-ease);
}
.table-wrap table a:hover,
#todoList a:hover,
.card a:not(.btn):hover {
  color: var(--orange);
  border-bottom-color: currentColor;
}
body.theme-dark .table-wrap table a,
body.theme-dark #todoList a,
body.theme-dark .card a:not(.btn) { color: var(--fe-ink); }
body.theme-dark .table-wrap table a:hover,
body.theme-dark #todoList a:hover,
body.theme-dark .card a:not(.btn):hover { color: var(--yellow); }

/* Sur écran tactile il n'y a pas de survol : sans repère, le nom cliquable
   devient indistinguable du texte. On rétablit donc en permanence un filet
   discret sous le lien — visible mais pas criard. */
@media (hover: none) {
  .table-wrap table a,
  #todoList a,
  .card a:not(.btn) { border-bottom-color: rgba(216, 96, 0, .38); }
  body.theme-dark .table-wrap table a,
  body.theme-dark #todoList a,
  body.theme-dark .card a:not(.btn) { border-bottom-color: rgba(255, 192, 0, .34); }
}

/* Sélecteurs de période (Analyses, Bilan, compte de résultat) — pilules. */
.hz-btn {
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  border-color: var(--gray-200) !important;
  color: var(--gray-600);
  transition: background 140ms var(--fe-ease), color 140ms var(--fe-ease),
              border-color 140ms var(--fe-ease);
}
.hz-btn:hover { background: var(--gray-50) !important; border-color: var(--gray-300) !important; }
.hz-btn.active {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: #fff !important;
}
body.theme-dark .hz-btn { background: var(--fe-sunk) !important; color: var(--fe-ink2); }
body.theme-dark .hz-btn.active { background: var(--green) !important; color: #fff !important; }

/* -----------------------------------------------------------------------------
   3 bis. INFO-BULLES (#tipBox) et pastilles « ? » du glossaire.
   -----------------------------------------------------------------------------
   #tipBox est déclaré dans index.html en `background: var(--gray-900); color:
   white`. Comme le thème sombre inverse la rampe de gris (--gray-900 devient
   #EAF0ED, la couleur du texte), la bulle devenait blanche sur blanc : le
   texte disparaissait. On fixe donc ses deux couleurs explicitement, sans
   passer par la rampe.
   -------------------------------------------------------------------------- */
#tipBox {
  background: #0A241D !important;      /* vert de marque très foncé */
  color: #F4F8F6 !important;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--fe-font-body, Mulish), system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 320px;                     /* les explications de calcul sont longues */
  text-wrap: pretty;
  box-shadow: 0 10px 26px rgba(19, 26, 32, .26);
}
body.theme-dark #tipBox {
  background: #E8EFEC !important;       /* inversé : clair sur fond sombre */
  color: #0F1A16 !important;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
/* Les mots mis en avant dans une bulle restent lisibles sur les deux fonds. */
#tipBox strong { color: inherit; font-weight: 800; }

/* -----------------------------------------------------------------------------
   3 ter. Trois autres règles atteintes du même défaut : une couleur prise dans
   la rampe (que le thème sombre inverse) associée à une couleur écrite en dur
   (qui, elle, ne bouge pas). Repérées par un balayage systématique du CSS
   de index.html — les 341 règles ont été contrôlées.
   -------------------------------------------------------------------------- */

/* a) Bandeau de notification neutre : `background: var(--gray-900); color:
   white`. Les variantes .success et .error avaient déjà leur fond, mais un
   toast sans classe devenait blanc sur blanc en thème sombre. Comme c'est un
   élément flottant, il reste foncé dans les deux thèmes — comme l'info-bulle. */
.toast {
  background: #0A241D !important;
  color: #F4F8F6 !important;
  border: 1px solid rgba(255, 255, 255, .10);
}
.toast.success { background: var(--green-dark) !important; color: #F4F8F6 !important; }
.toast.error   { background: var(--red-700) !important;   color: #FFF3F2 !important; }

/* b) Résumé en français simple du tableau de bord : fond en dégradé clair figé
   (#f5fbf8 → #fef9e7) et texte en var(--gray-900), qui passe au blanc cassé en
   thème sombre — le texte disparaissait sur le fond resté clair. Surface
   propre, texte qui suit le thème, accent porté par le liseré. */
.resume-simple {
  background: var(--fe-panel) !important;
  border: 1px solid var(--fe-line);
  border-left: 3px solid var(--green);
  border-radius: var(--fe-radius-lg, 18px);
  color: var(--fe-ink);
}
.resume-simple b { color: var(--green); }
body.theme-dark .resume-simple b { color: #4FBF9B; }

/* c) Cible de dépôt d'une tâche (glisser-déposer sur les onglets Agenda) :
   `background: var(--green-light); color: #14532d`. En thème sombre
   --green-light devient #12281F, donc vert très foncé sur texte vert foncé —
   la cible était illisible au moment précis où l'utilisateur en a besoin. */
#actTabs button.drop-hot {
  outline: 2px dashed var(--green) !important;
  outline-offset: 3px;
  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
  color: var(--green-dark) !important;
  transform: scale(1.04);
}
body.theme-dark #actTabs button.drop-hot {
  outline-color: #4FBF9B !important;
  background: color-mix(in srgb, #4FBF9B 20%, transparent) !important;
  color: #BFEBDC !important;
}

/* La pastille « ? » : lisible au repos, pas seulement au survol. */
.gloss-icon {
  width: 17px;
  height: 17px;
  background: var(--gray-100);
  color: var(--gray-600);
  border: 1px solid var(--gray-200);
  font-size: 10.5px;
  font-weight: 800;
}
.gloss-icon:hover,
.gloss-icon:focus-visible {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* -----------------------------------------------------------------------------
   3 quater. GARDE-FOU DE DÉBORDEMENT HORIZONTAL
   -----------------------------------------------------------------------------
   `.dash-grid` est en `grid-template-columns: 2fr 1fr`. Or une colonne de
   grille ne rétrécit jamais sous la largeur naturelle de son contenu : un
   tableau à six colonnes ou un graphique impose sa largeur minimale, la
   colonne déborde, et la page devient plus large que la fenêtre. Le défaut
   existait déjà, mais restait invisible tant que `main` occupait toute la
   largeur ; la barre latérale lui retire 252 px et le rend apparent.

   La correction est la règle standard pour ce cas : autoriser les éléments de
   grille et de flex à passer sous leur largeur minimale, et faire défiler les
   tableaux à l'intérieur de leur carte plutôt que de pousser la page.
   -------------------------------------------------------------------------- */
.dash-grid > *,
.grid > *,
.kpi-grid > * {
  min-width: 0;
}
/* `min-width: auto` est la valeur par défaut des éléments de grille : c'est
   elle qui empêche le rétrécissement. */
.card,
.section-head,
.table-wrap {
  min-width: 0;
}

/* Un tableau trop large défile dans sa carte, il ne pousse plus la page. */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 8px;
}

/* Chart.js dessine dans un canvas dimensionné en pixels : sans cette borne il
   déborde de sa carte au lieu de se redimensionner. */
canvas {
  max-width: 100%;
}

/* Dernier rempart : quoi qu'il arrive, la page ne défile pas horizontalement. */
main {
  overflow-x: clip;
}

/* -----------------------------------------------------------------------------
   4. NAV — onglets en pilules, plus de soulignement.
   -------------------------------------------------------------------------- */
nav {
  background: var(--fe-panel);
  border-bottom-color: var(--fe-line);
}
nav button {
  border-bottom-color: transparent;
  border-radius: 999px;
  color: var(--fe-ink3);
  font-weight: 700;
  transition: background 140ms var(--fe-ease), color 140ms var(--fe-ease);
}
nav button:hover { background: var(--fe-sunk); color: var(--fe-ink); }
nav button.active {
  color: var(--green-dark);
  background: var(--green-light);
  border-bottom-color: transparent;
}

/* -----------------------------------------------------------------------------
   5. CARTES & KPI — arrondis généreux, ombre douce, liseré de couleur.
   -------------------------------------------------------------------------- */
.card {
  background: var(--fe-panel);
  border-color: var(--fe-line);
  border-radius: 18px;
  box-shadow: var(--fe-shadow-sm);
}

.kpi {
  background: var(--fe-panel);
  border-color: var(--fe-line);
  border-radius: 18px;
  box-shadow: var(--fe-shadow-sm);
  border-top: 3px solid var(--green);
  transition: box-shadow 200ms var(--fe-ease), transform 200ms var(--fe-ease);
}
.kpi:hover { box-shadow: var(--fe-shadow-md); transform: translateY(-2px); }
.kpi .label {
  color: var(--fe-ink3);
  font-weight: 800;
  letter-spacing: .1em;
}
.kpi .value { color: var(--fe-ink); }
.kpi .sub { color: var(--fe-ink3); }
.kpi.green { border-top-color: var(--green); }
.kpi.orange { border-top-color: var(--orange); }
.kpi.energie-accent { border-top-color: var(--energie-primary); }
.kpi.tp-accent { border-top-color: var(--tp-primary); }

.ai-panel {
  background: linear-gradient(150deg, #187860 0%, #0F4C3E 100%);
  border: none;
  border-radius: 18px;
  color: #fff;
  box-shadow: var(--fe-shadow-md);
}
.ai-panel .ai-label { color: var(--yellow); letter-spacing: .14em; font-weight: 800; }
.ai-output {
  background: rgba(255,255,255,.94);
  border-color: transparent;
  border-radius: 12px;
  color: var(--fe-ink);
}

/* -----------------------------------------------------------------------------
   6. BOUTONS — pilules, éclaircissement au survol, enfoncement au clic.
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 999px;
  font-weight: 800;
  transition: filter 140ms var(--fe-ease), transform 140ms var(--fe-ease),
              box-shadow 140ms var(--fe-ease), background 140ms var(--fe-ease);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--orange); box-shadow: var(--fe-shadow-xs); }
.btn-primary:hover { background: var(--orange); }
.btn-green { background: var(--green); box-shadow: 0 8px 20px rgba(15,76,62,.22); }
.btn-green:hover { background: var(--green); }
.btn-secondary {
  background: var(--fe-panel);
  color: var(--fe-ink2);
  border-color: var(--fe-line);
}
.btn-secondary:hover { background: var(--fe-sunk); }
.btn-ai { background: linear-gradient(135deg, var(--green) 0%, var(--orange) 100%); }
.btn-danger { background: var(--red-700); }
.btn-danger:hover { background: var(--red-700); }

/* -----------------------------------------------------------------------------
   7. TABLEAUX — entêtes en petites capitales espacées, lignes plus calmes.
   Le passage en cartes empilées ≤640px de ton CSS n'est pas touché.
   -------------------------------------------------------------------------- */
.table-wrap {
  background: var(--fe-panel);
  border-color: var(--fe-line);
  border-radius: 16px;
  box-shadow: var(--fe-shadow-sm);
}
th {
  background: var(--fe-sunk);
  color: var(--fe-ink3);
  font-weight: 800;
  letter-spacing: .1em;
  border-bottom-color: var(--fe-line);
}
td {
  border-bottom-color: var(--fe-line);
  color: var(--fe-ink2);
}
td:first-child { color: var(--fe-ink); font-weight: 700; }
tr.clickable:hover { background: var(--fe-sunk); }

/* -----------------------------------------------------------------------------
   8. BADGES — pilules pleines, contrastes vérifiés (l'amber prend du texte foncé).
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
}
.badge.prospect { background: var(--fe-sunk); color: var(--fe-ink2); }
.badge.client { background: var(--green-light); color: var(--green-dark); }
.badge.inactif { background: var(--fe-sunk); color: var(--fe-ink3); }
.badge.stage-prospect { background: var(--fe-sunk); color: var(--fe-ink2); }
.badge.stage-contacted { background: var(--blue-light); color: var(--blue-dark); }
.badge.stage-quote_sent { background: var(--yellow-bg); color: #8F6900; }
.badge.stage-negotiation { background: var(--orange-light); color: var(--orange-dark); }
.badge.stage-invoiced { background: var(--orange-light); color: var(--orange-dark); }
.badge.stage-won { background: var(--green-light); color: var(--green-dark); }
.badge.stage-lost { background: var(--red-100); color: var(--red-800); }
.badge.bu-energie { border-color: var(--energie-primary); color: var(--green-dark); }
.badge.bu-travaux_publics { border-color: var(--tp-primary); color: var(--red-800); }
.badge.bu-services { border-color: var(--serv-primary); color: var(--gray-700); }
.badge.bu-mixte { border-color: var(--yellow); color: #8F6900; }

.bu-tabs button {
  border-radius: 999px;
  border-color: var(--fe-line);
  background: var(--fe-panel);
  color: var(--fe-ink2);
  font-weight: 800;
  transition: all 140ms var(--fe-ease);
}
.bu-tabs button:hover { background: var(--fe-sunk); }
.bu-tabs button.active.bu-all { background: var(--fe-rail); border-color: var(--fe-rail); }

.bu-section-header { border-radius: 16px; box-shadow: var(--fe-shadow-sm); }

/* -----------------------------------------------------------------------------
   9. KANBAN — zones de dépôt en pointillés, cartes qui se soulèvent.
   -------------------------------------------------------------------------- */
.kanban-col {
  background: transparent;
  border: 1.5px dashed var(--fe-line);
  border-radius: 16px;
}
.kanban-col h4 {
  color: var(--fe-ink2);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kanban-col .total { color: var(--fe-ink); font-weight: 800; }
.deal-card {
  background: var(--fe-panel);
  border-color: var(--fe-line);
  border-radius: 13px;
  box-shadow: var(--fe-shadow-xs);
  transition: box-shadow 160ms var(--fe-ease), transform 160ms var(--fe-ease);
}
.deal-card:hover {
  box-shadow: var(--fe-shadow-md);
  border-color: var(--fe-line);
  transform: translateY(-2px);
}
.deal-card .title { color: var(--fe-ink); font-weight: 800; }
.deal-card .meta { color: var(--fe-ink3); }
.deal-card .amount {
  font-family: 'Righteous', system-ui, sans-serif;
  font-weight: 400;
  color: var(--fe-ink);
}
/* Le dégradé de fond par branche est remplacé par un simple liseré : plus lisible */
.deal-card.bu-energie { background: var(--fe-panel); border-left: 4px solid var(--energie-primary); }
.deal-card.bu-travaux_publics { background: var(--fe-panel); border-left: 4px solid var(--tp-primary); }
.deal-card.bu-services { background: var(--fe-panel); border-left: 4px solid var(--serv-primary); }
.deal-card.bu-mixte { background: var(--fe-panel); border-left: 4px solid var(--yellow); }

/* -----------------------------------------------------------------------------
   10. FORMULAIRES — bordure 2px, anneau vert au focus.
   -------------------------------------------------------------------------- */
.field label { color: var(--fe-ink2); font-weight: 800; }
.field input, .field select, .field textarea,
.search-bar input, .search-bar select {
  border: 2px solid var(--fe-line);
  border-radius: 12px;
  background: var(--fe-panel);
  color: var(--fe-ink);
  transition: border-color 140ms var(--fe-ease), box-shadow 140ms var(--fe-ease);
}
.field input:focus, .field select:focus, .field textarea:focus,
.search-bar input:focus, .search-bar select:focus {
  border-color: #2E9278;
  box-shadow: 0 0 0 4px rgba(46,146,120,.16);
  outline: none;
}
.field input::placeholder, .search-bar input::placeholder { color: var(--fe-ink3); }

/* -----------------------------------------------------------------------------
   11. MODALES & TOASTS
   -------------------------------------------------------------------------- */
.modal-bg { background: rgba(10,20,17,.45); }
.modal {
  background: var(--fe-panel);
  border-radius: 20px;
  box-shadow: var(--fe-shadow-lg);
}
.modal-head, .modal-foot { border-color: var(--fe-line); }
.modal-head .close { color: var(--fe-ink3); border-radius: 999px; }
.toast { border-radius: 999px; box-shadow: var(--fe-shadow-md); font-weight: 700; }
.toast.success { background: var(--green-dark); }
.toast.error { background: var(--red-700); }

.empty { color: var(--fe-ink3); }
.muted { color: var(--fe-ink3); }
hr.sep { border-top-color: var(--fe-line); }
.spinner { border-color: var(--fe-line); border-top-color: var(--green); }

/* -----------------------------------------------------------------------------
   12. CONNEXION
   -------------------------------------------------------------------------- */
#loginScreen { background: linear-gradient(150deg, #0A372D 0%, #11493B 55%, #0F4C3E 100%); }
#loginBox { border-radius: 22px; box-shadow: 0 28px 64px rgba(10,20,17,.45); }
#loginBox .switch a { color: var(--orange); }

/* -----------------------------------------------------------------------------
   13. NAV MOBILE — mêmes couleurs que le reste, géométrie inchangée.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  nav#mainNav {
    background: var(--fe-panel);
    border-top-color: var(--fe-line);
    box-shadow: 0 -12px 36px rgba(19,26,32,.18);
  }
  nav#mainNav button { border-radius: 12px; }
  nav#mainNav button.active { background: var(--green-light); color: var(--green-dark); }
  #bottomNav {
    background: var(--fe-panel);
    border-top-color: var(--fe-line);
    box-shadow: 0 -4px 18px rgba(19,26,32,.08);
  }
  #bottomNav button { color: var(--fe-ink3); font-weight: 700; }
  #bottomNav button.active { color: var(--green); }
}

/* =============================================================================
   14. MODE SOMBRE — inactif par défaut.
   Il s'active quand <body> porte la classe « theme-dark ».
   Aucune géométrie touchée : uniquement des couleurs.
   ============================================================================= */
body.theme-dark {
  --fe-page: #0D1311;
  --fe-panel: #161E1B;
  --fe-sunk: #111815;
  --fe-line: #26312D;
  --fe-ink: #EAF0ED;
  --fe-ink2: #A8B5AF;
  --fe-ink3: #7C8A84;
  --fe-rail: #080F0D;
  --gray-50: #111815;
  --gray-100: #0D1311;
  --gray-200: #26312D;
  --gray-300: #3A4741;
  --gray-400: #7C8A84;
  --gray-500: #93A09A;
  --gray-600: #A8B5AF;
  --gray-700: #C6D0CB;
  --gray-900: #EAF0ED;
  --green-light: #12281F;
  --orange-light: #2E1B0C;
  --yellow-bg: #2B2208;
  --blue-light: #14232E;
  --red-100: #2C1410;
  --energie-bg: linear-gradient(135deg, #12281F 0%, #14232E 100%);
  --tp-bg: linear-gradient(135deg, #2C1410 0%, #2B2208 100%);
  --serv-bg: linear-gradient(135deg, #1A2220 0%, #111815 100%);
  --fe-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
  --fe-shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --fe-shadow-md: 0 8px 22px rgba(0,0,0,.45);
  --fe-shadow-lg: 0 20px 50px rgba(0,0,0,.6);
  background: var(--fe-page);
  color: var(--fe-ink);
}
/* En sombre, les encres foncées des badges deviennent illisibles : on éclaircit. */
body.theme-dark .badge.client,
body.theme-dark .badge.stage-won,
body.theme-dark .badge.bu-energie { color: #7FCFB4; }
body.theme-dark .badge.stage-negotiation,
body.theme-dark .badge.stage-invoiced { color: #F0A868; }
body.theme-dark .badge.stage-quote_sent,
body.theme-dark .badge.bu-mixte { color: #F2C94C; }
body.theme-dark .badge.stage-contacted { color: #93C2E8; }
body.theme-dark .badge.stage-lost,
body.theme-dark .badge.bu-travaux_publics { color: #E7A793; }
body.theme-dark .ai-output { background: #1C2622; color: var(--fe-ink); }
body.theme-dark canvas { filter: brightness(.94); }

/* Respect des préférences système d'animation réduite */
@media (prefers-reduced-motion: reduce) {
  .kpi, .deal-card, .btn, nav button, .bu-tabs button { transition: none; }
  .kpi:hover, .deal-card:hover { transform: none; }
}
