/* Dronist shared theme — applies on every page after the page's own <style>.
   Defines light-mode overrides for the legacy variable names (--black, --orange…)
   and the sliding-pill theme toggle. */

:root {
  --accent: #141FDF;
  --accent-soft: #3845e8;
}

/* Light theme overrides — every legacy variable is remapped */
[data-theme="light"] {
  --black:        #f6f6f3;
  --dark:         #eeeeea;
  --card:         #ffffff;
  --card2:        #fafaf7;
  --border:       rgba(20,20,20,0.08);
  --border2:      rgba(20,20,20,0.14);
  --orange:       #141FDF;
  --orange-light: #3845e8;
  --amber:        #5e6cf0;
  --white:        #141414;
  --muted:        #65656a;
  --red:          #d33b32;
  --green:        #2f9e60;
}

/* ── Light-mode patches for hardcoded dark backgrounds ──
   Most pages bake their nav/topbar/popover backgrounds as literal
   rgba(15,15,15,…) values instead of CSS variables, so they don't
   flip when we switch the [data-theme]. These rules force the swap.
   Inline-style values need !important; class-style values usually win
   anyway thanks to load order. */

[data-theme="light"] nav,
[data-theme="light"] .topbar {
  background: rgba(246,246,243,0.92) !important;
  border-bottom-color: rgba(20,20,20,0.08);
}
/* Force readable text on the nav in light mode: logo, links, ghost buttons.
   Some pages duplicate or override these rules locally with color:white, so
   we win them back with !important on the [data-theme="light"] cascade. */
[data-theme="light"] nav .nav-logo-text,
[data-theme="light"] nav .logo-text,
[data-theme="light"] .topbar .topbar-title,
[data-theme="light"] .topbar-title {
  color: #141414 !important;
}
[data-theme="light"] nav .nav-links a {
  color: #65656a !important;
}
[data-theme="light"] nav .nav-links a:hover { color: #141FDF !important; }
[data-theme="light"] nav .btn-ghost,
[data-theme="light"] .btn-ghost {
  color: #141414 !important;
  border-color: rgba(20,20,20,0.18) !important;
}
[data-theme="light"] nav .btn-ghost:hover,
[data-theme="light"] .btn-ghost:hover {
  background: rgba(20,20,20,0.04) !important;
  border-color: rgba(20,20,20,0.3) !important;
}
/* Anything inside the nav/topbar that uses color: var(--white) reads as
   inherited #141414 already, but a few pages have inline style="color:#fff".
   Catch those too. */
[data-theme="light"] nav [style*="color:#fff"],
[data-theme="light"] nav [style*="color: #fff"],
[data-theme="light"] nav [style*="color: white"],
[data-theme="light"] nav [style*="color:white"],
[data-theme="light"] .topbar [style*="color:#fff"],
[data-theme="light"] .topbar [style*="color: white"] {
  color: #141414 !important;
}
[data-theme="light"] .sidebar {
  background: #eeeeea !important;
  border-right-color: rgba(20,20,20,0.08);
}
/* Sidebar section labels ("PRINCIPAL", "COMPTE") are hardcoded
   rgba(255,255,255,.2) on every app page — white on white in light
   mode. Re-ink them. */
[data-theme="light"] .sb-section {
  color: rgba(20,20,20,0.38) !important;
}
/* Body copy hardcoded as near-white cream (rgba(240,242,245,.7-.8))
   on several pages — invisible in light mode. Found by contrast audit:
   cgu articles (.section p/li/strong), comment-ca-marche .step-tip,
   profil-pilote .bio-text, ouvrir-litige .info-box, cgu .highlight-box. */
[data-theme="light"] .section p,
[data-theme="light"] .section li,
[data-theme="light"] .section strong,
[data-theme="light"] .step-tip,
[data-theme="light"] .bio-text,
[data-theme="light"] .info-box,
[data-theme="light"] .highlight-box {
  color: rgba(20,20,20,0.78) !important;
}
[data-theme="light"] .info-box strong,
[data-theme="light"] .highlight-box strong {
  color: #141414 !important;
}
[data-theme="light"] #langMenu {
  background: #ffffff !important;
  border-color: rgba(20,20,20,0.1) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}
[data-theme="light"] #langBtn {
  color: rgba(20,20,20,0.65) !important;
  border-color: rgba(20,20,20,0.12) !important;
}
[data-theme="light"] .lang-item,
[data-theme="light"] #langMenu .lang-item {
  color: rgba(20,20,20,0.7) !important;
}
[data-theme="light"] .lang-item:hover {
  background: rgba(20,20,20,0.05) !important;
  color: #141414 !important;
}
[data-theme="light"] #dronist-topright {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(20,20,20,0.1) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
[data-theme="light"] .success-overlay {
  background: rgba(246,246,243,0.97) !important;
}
[data-theme="light"] .map-label {
  background: rgba(255,255,255,0.95) !important;
}

/* Buttons / chips with hardcoded rgba(255,255,255,…) backgrounds
   become invisible on a light page. Re-tint them with the inverse. */
[data-theme="light"] [style*="rgba(255,255,255,0.15)"],
[data-theme="light"] [style*="rgba(255,255,255,.15)"] {
  background: rgba(20,31,223,0.10) !important;
  color: #141FDF !important;
  border-color: rgba(20,31,223,0.25) !important;
}
[data-theme="light"] [style*="color: white"],
[data-theme="light"] [style*="color:white"] {
  /* If a hardcoded white-text element sits on a CTA (--orange / --accent
     blue background) it should stay white; only re-tint when the
     element's background is also light. We rely on the cascade — the
     specific overrides above for known-light elements already win. */
}

/* Hover states that paint with rgba(255,255,255,0.05) need a dark
   equivalent in light mode so the affordance is still visible. */
[data-theme="light"] .btn-ghost:hover {
  background: rgba(20,20,20,0.04) !important;
  border-color: rgba(20,20,20,0.18) !important;
}
[data-theme="light"] .nav-links a:hover {
  color: #141FDF !important;
}

/* Small chips/tags with dark backdrops on hero/service imagery — keep the
   tag readable in light mode by inverting bg + adjusting text color. */
[data-theme="light"] .service-tag,
[data-theme="light"] .badge {
  background: rgba(255,255,255,0.92) !important;
  color: #141FDF !important;
  border-color: rgba(20,31,223,0.2) !important;
}

/* Modal/popover dark backdrops that don't use the theme variable */
[data-theme="light"] .modal,
[data-theme="light"] .modal-bg,
[data-theme="light"] .overlay {
  background: rgba(246,246,243,0.85) !important;
}

/* Notif/toast dark surfaces */
[data-theme="light"] .toast {
  background: #ffffff !important;
  border-color: rgba(20,20,20,0.12) !important;
  color: #141414 !important;
}

/* Scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track { background: #eeeeea; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #141FDF; }

/* Smooth cross-fade when switching themes */
html { transition: background-color .25s ease; }
body, nav, .nav, .topbar, .sidebar, .card, .stat-card,
.field-input, input, textarea, select, button,
.toast, .lang-btn, .lang-menu {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
}

/* ── Theme toggle (sliding pill) ── */
.dronist-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 52px;
  height: 26px;
  background: rgba(127,127,127,0.08);
  border: 1px solid rgba(127,127,127,0.18);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  transition: background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dronist-theme-toggle:hover {
  background: rgba(127,127,127,0.14);
  border-color: rgba(127,127,127,0.3);
}
.dronist-theme-toggle .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(20,31,223,0.45);
  transition: transform .28s cubic-bezier(.4,.2,.2,1);
  pointer-events: none;
  z-index: 1;
}
/* Sun on the left = light mode (knob stays put). Moon on the right = dark
   mode (knob slides). 26px puts the knob 2px from each edge — symmetric. */
.dronist-theme-toggle:not(.light) .knob { transform: translateX(26px); }
.dronist-theme-toggle .icon {
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(127,127,127,0.7);
  pointer-events: none;
  transition: color .2s ease;
  z-index: 2;
}
.dronist-theme-toggle .icon svg { width: 12px; height: 12px; display: block; }
.dronist-theme-toggle .icon-sun  { left: 2px; }
.dronist-theme-toggle .icon-moon { right: 2px; }
/* Optically centre the crescent's visible mass in the knob (dialed in by hand). */
.dronist-theme-toggle .icon-moon svg { transform: translate(0.6px, 0.1px); }
.dronist-theme-toggle.light .icon-sun         { color: #fff; }
.dronist-theme-toggle:not(.light) .icon-moon { color: #fff; }

/* ── Global mobile safety net (loaded on every page via dronist-theme.css) ── */
img, video { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  /* clip (not hidden) kills accidental horizontal scroll without breaking position:sticky */
  html, body { overflow-x: clip; -webkit-text-size-adjust: 100%; }
}