/* ============================================================
   BOBOTEL 31 — Thème clair / toggle jour-nuit
   ------------------------------------------------------------
   Le SOMBRE = valeurs natives de main.css (rien à faire).
   Ici on n'override QUE vers le clair, quand html[data-theme="light"].
   Les variables de palette sont définies dans le critical CSS
   inline de chaque page (:root = clair, html[data-theme=dark] = sombre).
   ============================================================ */

/* Transition douce au switch (activée par JS après le 1er paint) */
html.theme-ready,
html.theme-ready body,
html.theme-ready .nav-glass,
html.theme-ready .nav-solid,
html.theme-ready [class*="bg-dark-"],
html.theme-ready .card-hover,
html.theme-ready .mobile-menu {
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}

/* ---------- Bouton toggle ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--text-strong);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { border-color: rgba(192, 0, 0, .45); color: #c00000; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle .ico-moon { display: none; }

/* ---------- Menu déroulant "Services" (nav desktop) ---------- */
.nav-dropdown { position: relative; }
.nav-dropdown-btn { cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.nav-dropdown-chevron { transition: transform .2s ease; }
.nav-dropdown:hover .nav-dropdown-chevron,
.nav-dropdown:focus-within .nav-dropdown-chevron { transform: rotate(180deg); }
.nav-dropdown::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: .6rem; }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + .55rem); left: 0; min-width: 200px; padding: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: .9rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 55;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu a {
  display: block; padding: .55rem .8rem; border-radius: .55rem; color: var(--text-muted);
  font-size: .9rem; font-weight: 500; white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.nav-dropdown-menu a:hover { background: rgba(192,0,0,.08); color: #c00000; }

/* ---------- Bouton téléphone (icône seule, nav desktop) ---------- */
.nav-phone-icon {
  align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: linear-gradient(135deg,#c00000,#ff1a1a); color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-phone-icon:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(192,0,0,.45); }
.nav-phone-icon svg { width: 1.15rem; height: 1.15rem; }

/* ============================================================
   MODE CLAIR — équilibre affiné (skill frontend-design)
   Texte plus dense (noir net), contours définis, meilleure lisibilité.
   Le rouge reste l'unique accent ; le noir gagne en présence.
   ============================================================ */
:root {
  --page-fg: #242424;       /* corps de texte : dense, lecture confortable */
  --text-strong: #0b0b0b;   /* titres : quasi-noir, tranchant */
  --text-soft: #2b2b2b;
  --text-muted: #565656;    /* gris lisible sur blanc (contraste AA) */
  --surface: #f6f6f7;       /* cartes : blanc cassé subtil */
  --surface-2: #eeeef0;
  --border: rgba(0,0,0,.12);       /* contours visibles */
  --border-strong: rgba(0,0,0,.22);
}
/* Cartes en clair : contour net + légère profondeur (définition) */
html[data-theme="light"] .bg-dark-700 { border: 1px solid rgba(0,0,0,.1); }
html[data-theme="light"] .card-hover { box-shadow: 0 1px 3px rgba(0,0,0,.06); }
html[data-theme="light"] .card-hover:hover { box-shadow: 0 10px 28px rgba(192,0,0,.12); }
/* Filet séparateur sous la nav collée (accent noir discret) */
html[data-theme="light"] .nav-solid { border-bottom-color: rgba(0,0,0,.14); }
/* Sélection : accent rouge + texte net */
html[data-theme="light"] ::selection { background: rgba(192,0,0,.15); color: #0b0b0b; }

/* ============================================================
   LIGHT THEME OVERRIDES  (html[data-theme="light"])
   ============================================================ */

/* --- Surfaces --- */
html[data-theme="light"] .bg-dark-900 { background-color: var(--page-bg); }
html[data-theme="light"] .bg-dark-800 { background-color: var(--surface-2); }
html[data-theme="light"] .bg-dark-700 { background-color: var(--surface); }
html[data-theme="light"] .bg-dark-600 { background-color: var(--surface-2); }

/* Hero : le dégradé "dark-900" devient fond de page clair */
html[data-theme="light"] .from-dark-900 {
  --tw-gradient-from: var(--page-bg) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .to-dark-900 {
  --tw-gradient-to: var(--page-bg) var(--tw-gradient-to-position);
}
html[data-theme="light"] .via-dark-900\/90 {
  --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--page-bg) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* --- Texte --- */
html[data-theme="light"] .text-white { color: var(--text-strong); }
html[data-theme="light"] .text-gray-300 { color: var(--text-soft); }
html[data-theme="light"] .text-gray-400 { color: var(--text-muted); }
html[data-theme="light"] .hover\:text-white:hover { color: var(--text-strong); }

/* Restaurer le texte BLANC sur les surfaces rouges — auto-détecté :
   .btn-gradient (boutons rouges), boutons à dégradé rouge inline (Déposer),
   .bg-brand, et toute <section> contenant le dégradé CTA (via :has). */
html[data-theme="light"] .btn-gradient,
html[data-theme="light"] .btn-gradient .text-white,
html[data-theme="light"] [style*="#c00000"],
html[data-theme="light"] [style*="#c00000"] .text-white,
html[data-theme="light"] .bg-brand .text-white,
html[data-theme="light"] .bg-brand.text-white,
html[data-theme="light"] .on-brand .text-white,
html[data-theme="light"] .on-brand.text-white,
html[data-theme="light"] section:has(> .from-brand-dark) .text-white,
html[data-theme="light"] section:has(> .from-brand-dark) .text-white\/80 { color: #fff; }

/* --- Voiles blancs subtils -> voiles sombres subtils --- */
html[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,.04); }
html[data-theme="light"] .hover\:bg-white\/5:hover { background-color: rgba(0,0,0,.05); }

/* --- Bordures --- */
html[data-theme="light"] .border-white\/5 { border-color: var(--border); }
html[data-theme="light"] .border-white\/10 { border-color: var(--border); }
html[data-theme="light"] .border-white\/20 { border-color: var(--border-strong); }
html[data-theme="light"] .border-dark-500 { border-color: var(--border); }
html[data-theme="light"] .card-hover { border-color: var(--border); }

/* Voile blanc /10 (badges, overlays) */
html[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,.06); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.07); }

/* --- Navigation + menu mobile --- */
html[data-theme="light"] .nav-glass { background: var(--nav-bg); border-bottom-color: var(--nav-border); }
html[data-theme="light"] .nav-solid { background: rgba(255,255,255,.95); border-bottom-color: rgba(192,0,0,.25); }
html[data-theme="light"] .mobile-menu { background: var(--page-bg); }
html[data-theme="light"] #mobile-toggle span { background-color: var(--text-strong); }

/* --- Éléments custom (page Tarifs : barre de recherche sticky + modal devis) --- */
html[data-theme="light"] #search-bar {
  background-image: linear-gradient(rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 85%, rgba(255,255,255,0) 100%);
}
html[data-theme="light"] #devis-drawer .devis-panel { background-color: var(--surface); }
html[data-theme="light"] #devis-drawer .devis-backdrop { background: rgba(0,0,0,.45); }

/* --- Scrollbar (WebKit) --- */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surface-2); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cfcfd3; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #c00000; }

/* ============================================================
   PAGE TARIFS — composants custom (recherche, filtres, table, devis)
   (les surfaces rouges gardent leur texte blanc, non touchées)
   ============================================================ */
/* Dropdown recherche */
html[data-theme="light"] #search-dropdown .sd-label { color: var(--text-strong); }
html[data-theme="light"] #search-dropdown .sd-brand,
html[data-theme="light"] #search-dropdown .sd-label .sd-section,
html[data-theme="light"] #search-dropdown .sd-more { color: var(--text-muted); }
html[data-theme="light"] #search-dropdown .sd-more { background: rgba(0,0,0,.03); }
html[data-theme="light"] #search-dropdown .sd-price,
html[data-theme="light"] #search-no-results.is-success { color: #15803d; }

/* Filtres */
html[data-theme="light"] .text-section-label { color: #c00000; }
html[data-theme="light"] .filter-row-label,
html[data-theme="light"] .active-filters { color: var(--text-muted); }
html[data-theme="light"] .filter-chip { color: var(--text-soft); background: rgba(0,0,0,.05); }
html[data-theme="light"] .filter-chip:hover { color: var(--text-strong); background: rgba(0,0,0,.08); }
html[data-theme="light"] .chip-count { color: var(--text-muted); background: rgba(0,0,0,.08); }
html[data-theme="light"] .active-filters .af-item { color: #c00000; }
html[data-theme="light"] .active-filters .af-count { color: #15803d; }

/* Table tarifs */
html[data-theme="light"] .tarifs-table-wrap { background: rgba(0,0,0,.02); }
html[data-theme="light"] .tarifs-table th { color: var(--text-muted); }
html[data-theme="light"] .tarifs-table td,
html[data-theme="light"] .model-main { color: var(--text-strong); }
html[data-theme="light"] .tarifs-table tbody tr:hover { background: rgba(0,0,0,.03); }
html[data-theme="light"] .brand-tag { color: var(--text-soft); background: rgba(0,0,0,.06); }
html[data-theme="light"] .model-section { color: var(--text-muted); }

/* Badges "problème" — texte assombri pour lisibilité sur blanc */
html[data-theme="light"] .problem-screen{color:#2563eb} html[data-theme="light"] .problem-battery{color:#16a34a}
html[data-theme="light"] .problem-liquid{color:#0284c7} html[data-theme="light"] .problem-charging{color:#a16207}
html[data-theme="light"] .problem-camera{color:#9333ea} html[data-theme="light"] .problem-back{color:#db2777}
html[data-theme="light"] .problem-audio{color:#0891b2} html[data-theme="light"] .problem-software{color:#059669}
html[data-theme="light"] .problem-hardware{color:#ea580c} html[data-theme="light"] .problem-joystick{color:#c026d3}
html[data-theme="light"] .problem-hdmi{color:#7c3aed} html[data-theme="light"] .problem-other{color:var(--text-muted)}

/* Devis + empty state */
html[data-theme="light"] .devis-btn,
html[data-theme="light"] .tarifs-empty button { color: #c00000; }
html[data-theme="light"] .tarifs-empty { color: var(--text-muted); }
html[data-theme="light"] .tarifs-empty .empty-cta { color: var(--text-strong); background: rgba(0,0,0,.05); }
html[data-theme="light"] .tarifs-empty .empty-cta:hover { background: rgba(0,0,0,.1); }

/* Bandeau logos de marques (Apple, Samsung…) : blanc sur dark -> gris foncé sur clair */
html[data-theme="light"] .brand-logo { color: #2b2b2b; opacity: .62; }

/* ============================================================
   WIZARD prise-en-charge / intervention.css
   ============================================================ */
html[data-theme="light"] .input-field { background: var(--surface); color: var(--text-strong); }
html[data-theme="light"] .input-field:focus { background: #fff; }
html[data-theme="light"] .input-field::placeholder { color: var(--text-muted); }
html[data-theme="light"] .material-card-inner,
html[data-theme="light"] .lock-card-inner { background: rgba(0,0,0,.03); }
html[data-theme="light"] .material-card-inner:hover,
html[data-theme="light"] .lock-card-inner:hover { background: rgba(0,0,0,.05); }
html[data-theme="light"] .option-row { background: rgba(0,0,0,.02); }
html[data-theme="light"] .option-row:hover { background: rgba(0,0,0,.04); }
html[data-theme="light"] .wz-step-dot { color: var(--text-muted); background: rgba(0,0,0,.06); }
html[data-theme="light"] .wz-step.is-active .wz-step-label { color: var(--text-strong); }
html[data-theme="light"] .wz-label { color: var(--text-muted); }
html[data-theme="light"] .chip { color: var(--text-soft); background: rgba(0,0,0,.05); }
html[data-theme="light"] .chip.is-active { color: #c00000; }         /* texte lisible sur pastille rouge pâle */
html[data-theme="light"] .wz-btn-ghost { color: var(--text-soft); }
html[data-theme="light"] .wz-btn-ghost:hover { color: var(--text-strong); background: rgba(0,0,0,.06); }
html[data-theme="light"] .bg-white\/\[0\.02\] { background: rgba(0,0,0,.02); }
html[data-theme="light"] .bg-white\/\[0\.03\] { background: rgba(0,0,0,.03); }
html[data-theme="light"] .wz-header { background: rgba(255,255,255,.92); border-bottom-color: var(--border); }
html[data-theme="light"] .wz-actionbar { background: rgba(255,255,255,.95); border-top-color: var(--border); }
html[data-theme="light"] .wz-step-label { color: var(--text-muted); }
html[data-theme="light"] .wz-title { color: var(--text-strong); }
/* Schéma de déverrouillage : anneaux + centres inactifs visibles dans les 2 thèmes
   (centres inactifs = currentColor ; sélectionnés restent rouge #ff1a1a) */
.pattern-svg { color: rgba(255,255,255,.28); }
html[data-theme="light"] .pattern-svg { color: rgba(0,0,0,.32); }
html[data-theme="light"] .pattern-svg circle[r="26"] { fill: rgba(0,0,0,.025); stroke: rgba(0,0,0,.22); }
/* (.wz-btn-primary, .wz-step.is-active .wz-step-dot : dégradé rouge plein → texte blanc conservé) */

/* ============================================================
   TOGGLE FLOTTANT (pages sans navbar : prise-en-charge, 404, admin)
   ============================================================ */
.theme-toggle-float {
  position: fixed; top: 1rem; right: 1rem; z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; cursor: pointer;
  color: var(--text-strong); background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.theme-toggle-float:hover { border-color: rgba(192,0,0,.45); color: #c00000; }
.theme-toggle-float svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle-float .ico-sun { display: none; }
html[data-theme="dark"] .theme-toggle-float .ico-sun { display: block; }
html[data-theme="dark"] .theme-toggle-float .ico-moon { display: none; }

/* ============================================================
   ADMIN pro/* — surfaces rgba (non couvertes par la conversion hex inline)
   ============================================================ */
html[data-theme="light"] .filter-input,
html[data-theme="light"] .filter-select { background: var(--surface); color: var(--text-strong); border-color: var(--border); }
html[data-theme="light"] .filter-input::placeholder { color: var(--text-muted); }
html[data-theme="light"] .stat-chip { background: rgba(0,0,0,.03); }
html[data-theme="light"] .stat-chip:hover { border-color: rgba(0,0,0,.2); }
html[data-theme="light"] table.list tr:hover td,
html[data-theme="light"] .intv-card:active { background: rgba(0,0,0,.03); }
html[data-theme="light"] .btn-ghost { border-color: var(--border); }
html[data-theme="light"] .btn-ghost:hover { border-color: rgba(0,0,0,.25); }

/* --- Sélection --- */
html[data-theme="light"] ::selection { background: rgba(192,0,0,.18); color: #111; }