/* ════════════════════════════════════════════════════════════
   GRI — Thème central (palette + boutons + mode sombre)
   Chargé par toutes les pages via <link rel="stylesheet" href="/theme.css">
   Les couleurs sont des VARIABLES : la page Apparence (super-admin) les
   modifie, theme.js injecte la palette enregistrée sur le serveur, et
   tous les boutons/menus/jours météo les lisent ici.
   Le mode sombre s'active par la classe body.dark.
   ════════════════════════════════════════════════════════════ */

/* ───────── Palette — valeurs par défaut (mode CLAIR) ───────── */
:root {
  /* Boutons (6 couleurs) */
  --btn-vert-bg:#f0fff4;  --btn-vert-bd:#9ae6b4;  --btn-vert-tx:#276749;  --btn-vert-hv:#c6f6d5;
  --btn-bleu-bg:#ebf4ff;  --btn-bleu-bd:#bee3f8;  --btn-bleu-tx:#2b6cb0;  --btn-bleu-hv:#dbeafe;
  --btn-marque-bg:#8eb1eb;--btn-marque-bd:#5985c9;--btn-marque-tx:#ffffff;--btn-marque-hv:#7aa3e0;
  --btn-jaune-bg:#fffbeb; --btn-jaune-bd:#f6e05e; --btn-jaune-tx:#b7791f; --btn-jaune-hv:#fef3c7;
  --btn-rouge-bg:#fff5f5; --btn-rouge-bd:#fed7d7; --btn-rouge-tx:#e53e3e; --btn-rouge-hv:#fed7d7;
  --btn-gris-bg:#edf2f7;  --btn-gris-bd:#cbd5e0;  --btn-gris-tx:#4a5568;  --btn-gris-hv:#e2e8f0;
  --btn-orange-bg:#fffaf0;--btn-orange-bd:#fbd38d;--btn-orange-tx:#c05621;--btn-orange-hv:#feebc8;
  --btn-violet-bg:#faf5ff;--btn-violet-bd:#d6bcfa;--btn-violet-tx:#6b46c1;--btn-violet-hv:#e9d8fd;
  /* Boutons du menu du haut */
  --nav-bg:transparent; --nav-bd:#ffffff; --nav-tx:#ffffff; --nav-hv:#3a72b0;
  /* Boutons des jours météo */
  --jour-bg:#ebf4ff;  --jour-bd:#bee3f8;  --jour-tx:#2b6cb0;
  --jourA-bg:#8eb1eb; --jourA-bd:#5985c9; --jourA-tx:#ffffff;
  --jourT-bg:#fffbeb; --jourT-bd:#f6e05e; --jourT-tx:#b7791f;
}
/* ───────── Palette — valeurs par défaut (mode SOMBRE) ───────── */
body.dark {
  --btn-vert-bg:#1c3328;  --btn-vert-bd:#2f6b4a;  --btn-vert-tx:#9ae6b4;  --btn-vert-hv:#244736;
  --btn-bleu-bg:#243044;  --btn-bleu-bd:#3a5573;  --btn-bleu-tx:#90cdf4;  --btn-bleu-hv:#2d3a4f;
  --btn-marque-bg:#5985c9;--btn-marque-bd:#8eb1eb;--btn-marque-tx:#ffffff;--btn-marque-hv:#6b93d4;
  --btn-jaune-bg:#332b14; --btn-jaune-bd:#b7791f; --btn-jaune-tx:#f6e05e; --btn-jaune-hv:#40361a;
  --btn-rouge-bg:#3a2326; --btn-rouge-bd:#a14a4a; --btn-rouge-tx:#fc8181; --btn-rouge-hv:#4a2c30;
  --btn-gris-bg:#2a3344;  --btn-gris-bd:#3a4658;  --btn-gris-tx:#cbd5e0;  --btn-gris-hv:#2d3a4f;
  --btn-orange-bg:#3a2a14;--btn-orange-bd:#c05621;--btn-orange-tx:#fbd38d;--btn-orange-hv:#47351a;
  --btn-violet-bg:#2a2440;--btn-violet-bd:#6b4ca1;--btn-violet-tx:#d6bcfa;--btn-violet-hv:#352b52;
  --nav-bg:transparent; --nav-bd:#ffffff; --nav-tx:#ffffff; --nav-hv:#3a72b0;
  --jour-bg:#243044;  --jour-bd:#3a5573;  --jour-tx:#90cdf4;
  --jourA-bg:#5985c9; --jourA-bd:#8eb1eb; --jourA-tx:#ffffff;
  --jourT-bg:#3a2f15; --jourT-bd:#b7791f; --jourT-tx:#f6e05e;
}

/* ───────── Boutons standards : base + couleur via variables ───────── */
.btn-vert, .btn-bleu, .btn-jaune, .btn-rouge, .btn-gris, .btn-orange, .btn-violet {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 30px; padding: 0 16px; border-radius: 8px; border: 1px solid;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s;
  box-sizing: border-box; white-space: nowrap; text-decoration: none;
}

/* ───────── Application de la palette aux boutons de l'app ─────────
   Sélecteur « body .classe » : remplace la couleur de base définie dans
   chaque page, mais laisse gagner les états plus spécifiques (.active…). */
body .btn-bleu, body .btn-bleu-clair, body .btn-apercu, body .btn-primary,
body .btn-modele, body .btn-pastel, body .btn-email-save, body .btn-pager-blue {
  background: var(--btn-bleu-bg); border-color: var(--btn-bleu-bd); color: var(--btn-bleu-tx);
}
body .btn-vert, body .btn-import, body .btn-excel-export, body .btn-save,
body .btn-save-saved, body .btn-email-save.sauvegarde, body .btn-ajouter-user.ok {
  background: var(--btn-vert-bg); border-color: var(--btn-vert-bd); color: var(--btn-vert-tx);
}
body .btn-jaune, body .btn-pastel-blue, body .btn-add, body .btn-nouvelle-offre,
body .btn-export-clients, body .cgv-btn-edit {
  background: var(--btn-jaune-bg); border-color: var(--btn-jaune-bd); color: var(--btn-jaune-tx);
}
body .btn-rouge, body .btn-danger, body .btn-pdf-export, body .btn-save.dirty,
body .btn-pastel.unsaved, body .btn-email-save.modifie, body .btn-save-unsaved {
  background: var(--btn-rouge-bg); border-color: var(--btn-rouge-bd); color: var(--btn-rouge-tx);
}
body .btn-gris, body .btn-secondary, body .btn-pager-orange, body .filter-btn {
  background: var(--btn-gris-bg); border-color: var(--btn-gris-bd); color: var(--btn-gris-tx);
}
body .btn-orange { background: var(--btn-orange-bg); border-color: var(--btn-orange-bd); color: var(--btn-orange-tx); }
body .btn-violet { background: var(--btn-violet-bg); border-color: var(--btn-violet-bd); color: var(--btn-violet-tx); }

@media (hover: hover) {
  body .btn-bleu:hover, body .btn-bleu-clair:hover, body .btn-apercu:hover, body .btn-primary:hover,
  body .btn-modele:hover, body .btn-pastel:hover, body .btn-email-save:hover, body .btn-pager-blue:hover { background: var(--btn-bleu-hv); }
  body .btn-vert:hover, body .btn-import:hover, body .btn-excel-export:hover, body .btn-save:hover,
  body .btn-save-saved:hover, body .btn-email-save.sauvegarde:hover, body .btn-ajouter-user.ok:hover { background: var(--btn-vert-hv); }
  body .btn-jaune:hover, body .btn-pastel-blue:hover, body .btn-add:hover, body .btn-nouvelle-offre:hover,
  body .btn-export-clients:hover, body .cgv-btn-edit:hover { background: var(--btn-jaune-hv); }
  body .btn-rouge:hover, body .btn-danger:hover, body .btn-pdf-export:hover, body .btn-save.dirty:hover,
  body .btn-pastel.unsaved:hover, body .btn-email-save.modifie:hover, body .btn-save-unsaved:hover { background: var(--btn-rouge-hv); }
  body .btn-gris:hover, body .btn-secondary:hover, body .btn-pager-orange:hover, body .filter-btn:hover { background: var(--btn-gris-hv); }
  body .btn-orange:hover { background: var(--btn-orange-hv); }
  body .btn-violet:hover { background: var(--btn-violet-hv); }
}

/* ───────── Boutons du menu du haut ───────── */
body .btn-header { background: var(--nav-bg); border-color: var(--nav-bd); color: var(--nav-tx); }
@media (hover: hover) { body .btn-header:hover { background: var(--nav-hv); } }

/* ───────── Bouton marqué (filtre actif / sélectionné) ───────── */
body .filter-btn.active { background: var(--btn-marque-bg); border-color: var(--btn-marque-bd); color: var(--btn-marque-tx); }
@media (hover: hover) { body .filter-btn.active:hover { background: var(--btn-marque-hv); } }

/* ───────── Boutons des jours météo ───────── */
body .meteo-jour-btn { background: var(--jour-bg); border-color: var(--jour-bd); color: var(--jour-tx); }
body .meteo-jour-btn.active { background: var(--jourA-bg); border-color: var(--jourA-bd); color: var(--jourA-tx); }
body .meteo-jour-btn.today  { background: var(--jourT-bg); border-color: var(--jourT-bd); color: var(--jourT-tx); }

/* ════════════════════════════════════════════════════════════
   MODE SOMBRE — composants partagés (hors couleurs de boutons)
   ════════════════════════════════════════════════════════════ */
body.dark { background: #0f1623; color: #cbd5e0; color-scheme: dark; }
body.dark .hero { color: #e2e8f0; }
body.dark .hero small { color: #8595a8; }

body.dark .card, body.dark .group, body.dark .panel, body.dark .box {
  background: #1a2332; box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
body.dark .card > h2, body.dark .card h2 { color: #90cdf4; border-bottom-color: #2d3748; }
body.dark .card-vide, body.dark .vide, body.dark .empty { color: #718096; }

body.dark input[type="text"], body.dark input[type="number"], body.dark input[type="email"],
body.dark input[type="password"], body.dark input[type="search"], body.dark input[type="date"],
body.dark input[type="tel"], body.dark textarea, body.dark select {
  background: #243044; border-color: #2d3748; color: #e2e8f0;
}
body.dark input:focus, body.dark textarea:focus, body.dark select:focus {
  border-color: #4299e1; box-shadow: 0 0 0 3px rgba(66,153,225,.15);
}
body.dark input::placeholder, body.dark textarea::placeholder { color: #8595a8; }

/* Intitulés de champs un peu plus clairs en mode sombre (toutes les pages) */
body.dark label { color: #a0aec0; }

body.dark .toolbar { background: #1a2332; box-shadow: 0 2px 12px rgba(0,0,0,.4); }

body.dark .offres-table thead th, body.dark table thead th { background: #243044; color: #90cdf4; }
body.dark .offres-table td { border-bottom-color: #2d3748; }
@media (hover: hover) {
  body.dark .offres-table tbody tr:hover td, body.dark table tbody tr:hover td { background: #243044; }
}
body.dark .o-num-badge, body.dark .o-client { color: #90cdf4; }
body.dark .o-regie, body.dark .o-dim, body.dark .count-info { color: #8595a8; }
body.dark .o-saved-by { background: #243044; color: #90cdf4; }
body.dark .o-statut-en-cours, body.dark .o-statut-termine { background: #2a3344; color: #a0aec0; }

body.dark .pager { border-top-color: #90cdf4; }
body.dark .btn-pager-blue.active { background: #2b6cb0; border-color: #2b6cb0; color: #fff; }

/* ───────── Météo ───────── */
body.dark .meteo-card { background: linear-gradient(135deg, #1a2940 0%, #1a2332 100%); }
body.dark .meteo-temp, body.dark .meteo-day .mm b, body.dark .meteo-hour .t,
body.dark .ms-val, body.dark .meteo-stats b, body.dark .meteo-dh-date { color: #90cdf4; }
body.dark .meteo-cond { color: #e2e8f0; }
body.dark .meteo-sub, body.dark .meteo-sec, body.dark .ms-top,
body.dark .meteo-hour .h, body.dark .meteo-day .mm .min { color: #8595a8; }
body.dark .meteo-hour, body.dark .meteo-day { background: #243044; border-color: #3a5573; }
body.dark .meteo-day .d { color: #cbd5e0; }
body.dark .meteo-tip { background: #243044; }
body.dark #meteo-svg line[stroke="#e2e8f0"] { stroke: #2d3748; }
body.dark #meteo-svg text[fill="#718096"] { fill: #8595a8; }