/* =============================================================================
   RAYCAST — MODE SOMBRE  ·  Raycom Électrique
   Surcharge des tokens sous html[data-theme="dark"]. Chargé EN DERNIER.
   Défaut = clair (le thème sombre est opt-in via le bouton ☀️/🌙).
   Le PDF (pdf-2026.jsx) utilise des couleurs inline #fff → reste blanc (voulu).
   ============================================================================= */

html[data-theme="dark"] {
  color-scheme: dark;

  /* ---------- Tokens --raycom-* ---------- */
  --raycom-bg:            #0a1322;
  --raycom-surface:       #111e34;
  --raycom-surface-2:     #18283f;

  --raycom-ink:           #e9f1fc;
  --raycom-ink-muted:     #aebfd8;
  --raycom-ink-dim:       #7589a6;

  --raycom-border:        #243349;
  --raycom-border-strong: #324a68;

  --raycom-accent:        #4a92d8;
  --raycom-accent-light:  #6fb0ec;
  --raycom-accent-dark:   #2f7bc4;
  --raycom-accent-dim:    rgba(74, 146, 216, 0.16);
  --raycom-accent-tint:   rgba(74, 146, 216, 0.26);

  --raycom-energy:        #10b981;
  --raycom-energy-dim:    rgba(16, 185, 129, 0.16);

  --margin-green:         #22c55e;
  --margin-yellow:        #eab308;
  --margin-red:           #f87171;

  /* ---------- Tokens --r5-* ---------- */
  --r5-primary:        #3b82f6;
  --r5-primary-hover:  #60a5fa;
  --r5-primary-dark:   #2563eb;
  --r5-primary-tint:   #16243c;
  --r5-primary-soft:   #1e3a5f;

  --r5-accent:         #f59e0b;
  --r5-accent-dark:    #d4880a;
  --r5-accent-tint:    #3a2e12;

  --r5-orange:         #fb7a3c;
  --r5-orange-dark:    #ea580c;
  --r5-orange-tint:    #3a2113;
  --r5-peach:          #5a3a22;
  --r5-gold:           #f59e0b;
  --r5-gold-dark:      #d4880a;
  --r5-gold-tint:      #3a2e12;

  --r5-success:        #10b981;
  --r5-success-tint:   #0e2f26;
  --r5-warning:        #e0a23a;
  --r5-warning-tint:   #38290f;
  --r5-danger:         #ef4444;
  --r5-danger-tint:    #3a1a1a;

  --r5-ink:            #e9f1fc;
  --r5-ink-2:          #cddef4;
  --r5-ink-3:          #aebfd8;
  --r5-ink-4:          #8ba3c4;
  --r5-ink-5:          #6b829f;

  --r5-line:           #243349;
  --r5-line-strong:    #324a68;
  --r5-line-soft:      #1a2c45;

  --r5-bg:             #111e34;
  --r5-bg-soft:        #0c1726;
  --r5-bg-tinted:      #18283f;

  --r5-sh-1: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
  --r5-sh-2: 0 4px 12px -2px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.35);
  --r5-sh-3: 0 12px 32px -8px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.4);
  --r5-sh-focus: 0 0 0 3px rgba(59,130,246,.32);
}

/* ---------- Surfaces codées en dur (rgba blanc) → équivalents sombres ---------- */
html[data-theme="dark"] body { background: var(--raycom-bg); color: var(--raycom-ink); }

html[data-theme="dark"] .sidebar { background: rgba(17, 30, 52, 0.72); }
html[data-theme="dark"] .topbar  { background: rgba(10, 19, 34, 0.85); }

/* États de survol clairs (rgba sombre sur fond blanc) → rgba clair sur fond sombre */
html[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,0.06); }

/* Barres de défilement */
html[data-theme="dark"] .col-right::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }

/* Champs de formulaire (au cas où le navigateur force le blanc) */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--raycom-surface-2);
  color: var(--raycom-ink);
  border-color: var(--raycom-border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--raycom-ink-dim); }

/* ---------- Transition douce clair <-> sombre ---------- */
html.rc-theme-anim,
html.rc-theme-anim body,
html.rc-theme-anim .sidebar,
html.rc-theme-anim .topbar,
html.rc-theme-anim .card,
html.rc-theme-anim [class*="card"],
html.rc-theme-anim [class*="panel"] {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* =============================================================================
   BOUTON BASCULE ☀️/🌙 (injecté par index.html — vanilla, hors arbre React)
   ============================================================================= */
#rc-theme-toggle {
  position: fixed; top: 14px; right: 16px; z-index: 2147482500;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; line-height: 1;
  background: var(--raycom-surface, #fff);
  border: 1px solid var(--raycom-border, #e2e8f0);
  color: var(--raycom-ink, #0b1b2b);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
#rc-theme-toggle:hover { transform: translateY(-1px) scale(1.05); filter: brightness(1.05); }
#rc-theme-toggle:active { transform: scale(.96); }
html[data-theme="dark"] #rc-theme-toggle { box-shadow: 0 4px 16px rgba(0,0,0,.5); }

/* Sur mobile, ne pas masquer la barre supérieure : on le décale un peu */
@media (max-width: 820px) {
  #rc-theme-toggle { top: 10px; right: 12px; width: 36px; height: 36px; font-size: 16px; }
}