/* Sevily — surcharge SOMBRE partagée (chargée APRÈS le <style> de chaque page,
   donc ses définitions gagnent quand data-theme=dark est posé sur <html>).
   Couvre tous les noms de variables utilisés par les pages du site. */

:root { --vitre: rgba(255, 255, 255, 0.85); }

[data-theme="dark"] {
  color-scheme: dark;
  --noir: #0A1120;
  --nuit: #0F1A2E;
  --eleve: #182742;
  --carte: #14213A;
  --ambre: #5A97F2;
  --ambre-vif: #74A9F5;
  --ambre-doux: #9FC1F8;
  --texte: #C4D2E8;
  --doux: #8FA1BF;
  --sourd: #5A6B85;
  --hairline: rgba(255, 255, 255, 0.09);
  --hairline-2: rgba(255, 255, 255, 0.16);
  --trait: rgba(255, 255, 255, 0.09);
  --trait2: rgba(255, 255, 255, 0.16);
  --vert: #2BC3A5;
  --vitre: rgba(15, 26, 46, 0.85);
}

/* Bouton bascule (soleil / lune) */
.bascule {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  border: 1px solid var(--hairline-2, var(--trait2, #CFD9E8));
  background: transparent; color: var(--doux, #64748B);
  cursor: pointer; padding: 0; transition: color .2s, border-color .2s;
}
.bascule:hover { color: var(--texte, #2C3E5C); border-color: var(--ambre, #2E6FD6); }
.bascule svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bascule .soleil { display: none; }
.bascule .lune { display: block; }
[data-theme="dark"] .bascule .soleil { display: block; }
[data-theme="dark"] .bascule .lune { display: none; }

/* Variante flottante pour les pages sans barre de navigation */
.bascule-fixe { position: fixed; top: 14px; right: 14px; z-index: 200; background: var(--nuit, #FFFFFF); }

/* Logo officiel — deux fichiers de la charte : clair (mot navy) / sombre (mot clair).
   Bascule pure CSS selon le thème, aucune pastille. */
.logo-img { height: 36px; width: auto; display: block; }
.logo-sombre { display: none; }
[data-theme="dark"] .logo-clair { display: none; }
[data-theme="dark"] .logo-sombre { display: block; }
