/* ============================================================
   Thème CLAIR — overrides activés via html[data-theme="light"]
   Le thème SOMBRE reste le défaut (aucun override nécessaire).
   ============================================================ */

html[data-theme="light"] {
    color-scheme: light;
    background: #FAFAF9;
}
html[data-theme="light"] body {
    background-color: #FAFAF9;
    color: #0B0F1A;
}

/* ---- Backgrounds ink-* (page bg) ---- */
html[data-theme="light"] .bg-ink-950 { background-color: #FAFAF9 !important; }
html[data-theme="light"] .bg-ink-900 { background-color: #F5F5F4 !important; }
html[data-theme="light"] .bg-ink-800 { background-color: #E7E5E4 !important; }
html[data-theme="light"] .bg-ink-950\/70 { background-color: rgba(250,250,249,.82) !important; }
html[data-theme="light"] .bg-ink-900\/70 { background-color: rgba(245,245,244,.82) !important; }

/* ---- Text slate-* (greys) ---- */
html[data-theme="light"] .text-slate-100 { color: #0B0F1A !important; }
html[data-theme="light"] .text-slate-200 { color: #1c1917 !important; }
html[data-theme="light"] .text-slate-300 { color: #292524 !important; }
html[data-theme="light"] .text-slate-400 { color: #57534E !important; }
html[data-theme="light"] .text-slate-500 { color: #78716C !important; }
html[data-theme="light"] .text-slate-600 { color: #A8A29E !important; }
html[data-theme="light"] .text-slate-700 { color: #D6D3D1 !important; }
html[data-theme="light"] .text-white { color: #0B0F1A !important; }

/* ---- Backgrounds bg-white/* (translucides) ---- */
html[data-theme="light"] .bg-white { background-color: #0B0F1A !important; }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(0,0,0,.04) !important; }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(0,0,0,.06) !important; }
html[data-theme="light"] .bg-white\/15 { background-color: rgba(0,0,0,.10) !important; }
html[data-theme="light"] .bg-white\/\[\.02\] { background-color: rgba(0,0,0,.025) !important; }
html[data-theme="light"] .bg-white\/\[\.03\] { background-color: rgba(0,0,0,.035) !important; }
html[data-theme="light"] .bg-white\/\[\.04\] { background-color: rgba(0,0,0,.045) !important; }
html[data-theme="light"] .bg-white\/\[\.06\] { background-color: rgba(0,0,0,.065) !important; }

html[data-theme="light"] .hover\:bg-white\/\[\.06\]:hover { background-color: rgba(0,0,0,.07) !important; }
html[data-theme="light"] .hover\:bg-white\/\[\.08\]:hover { background-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,.08) !important; }
html[data-theme="light"] .hover\:bg-slate-100:hover { background-color: #E7E5E4 !important; }

/* ---- Borders white/* ---- */
html[data-theme="light"] .border-white\/5 { border-color: rgba(0,0,0,.06) !important; }
html[data-theme="light"] .border-white\/10 { border-color: rgba(0,0,0,.10) !important; }
html[data-theme="light"] .border-white\/15 { border-color: rgba(0,0,0,.14) !important; }
html[data-theme="light"] .border-white\/20 { border-color: rgba(0,0,0,.18) !important; }
html[data-theme="light"] .border-white\/25 { border-color: rgba(0,0,0,.22) !important; }
html[data-theme="light"] .border-white\/35 { border-color: rgba(0,0,0,.30) !important; }
html[data-theme="light"] .hover\:border-white\/25:hover { border-color: rgba(0,0,0,.25) !important; }

/* ---- Hover text white ---- */
html[data-theme="light"] .hover\:text-white:hover { color: #0B0F1A !important; }

/* ---- Accent signal-* (rouge) — reste rouge, contraste ajusté ---- */
html[data-theme="light"] .text-signal-500 { color: #DC2626 !important; }
html[data-theme="light"] .text-signal-400 { color: #EF4444 !important; }
html[data-theme="light"] .text-signal-300 { color: #F87171 !important; }
html[data-theme="light"] .hover\:text-signal-400:hover { color: #DC2626 !important; }
html[data-theme="light"] .hover\:text-signal-300:hover { color: #EF4444 !important; }

/* ---- Bg signal opacités plus subtiles en light ---- */
html[data-theme="light"] .bg-signal-500\/5 { background-color: rgba(220,38,38,.04) !important; }
html[data-theme="light"] .bg-signal-500\/10 { background-color: rgba(220,38,38,.07) !important; }
html[data-theme="light"] .bg-signal-500\/15 { background-color: rgba(220,38,38,.10) !important; }
html[data-theme="light"] .bg-signal-500\/20 { background-color: rgba(220,38,38,.13) !important; }
html[data-theme="light"] .bg-signal-500\/\[\.06\] { background-color: rgba(220,38,38,.05) !important; }
html[data-theme="light"] .border-signal-500\/20 { border-color: rgba(220,38,38,.30) !important; }
html[data-theme="light"] .border-signal-500\/30 { border-color: rgba(220,38,38,.40) !important; }

/* ---- Couleurs accent secondaires (badges colorés) — ajuster contraste ---- */
html[data-theme="light"] .bg-emerald-500\/15 { background-color: rgba(16,185,129,.14) !important; }
html[data-theme="light"] .bg-sky-500\/15 { background-color: rgba(14,165,233,.14) !important; }
html[data-theme="light"] .bg-amber-500\/15 { background-color: rgba(245,158,11,.16) !important; }
html[data-theme="light"] .text-emerald-300 { color: #047857 !important; }
html[data-theme="light"] .text-sky-300 { color: #0369A1 !important; }
html[data-theme="light"] .text-amber-300 { color: #B45309 !important; }
html[data-theme="light"] .bg-emerald-400 { background-color: #10B981 !important; }
html[data-theme="light"] .bg-sky-400 { background-color: #38BDF8 !important; }
html[data-theme="light"] .bg-slate-500 { background-color: #A8A29E !important; }

/* ---- Specials site-wide ---- */
html[data-theme="light"] .text-ink-900 { color: #FAFAF9 !important; } /* bouton "Démarrer" navbar : texte sombre sur fond blanc → reste OK */

/* ---- Inputs ---- */
html[data-theme="light"] .input-fx {
    background-color: rgba(0,0,0,.025) !important;
    border-color: rgba(0,0,0,.10) !important;
    color: #0B0F1A !important;
}
html[data-theme="light"] .input-fx:focus {
    background-color: #FFFFFF !important;
    border-color: #DC2626 !important;
}
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder { color: #A8A29E !important; }

/* ---- Grid bg (subtil rouge) — opacités à booster sur clair ---- */
html[data-theme="light"] .grid-bg {
    background-image:
        linear-gradient(rgba(220,38,38,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220,38,38,.06) 1px, transparent 1px) !important;
}

/* ---- Radial glows — légèrement plus opaques sur fond clair ---- */
html[data-theme="light"] .radial-glow-top {
    background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(220,38,38,.14), transparent 70%) !important;
}
html[data-theme="light"] .radial-glow-center {
    background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(220,38,38,.10), transparent 70%) !important;
}
html[data-theme="light"] .radial-glow {
    background: radial-gradient(ellipse 60% 60% at 30% 50%, rgba(220,38,38,.13), transparent 70%) !important;
}

/* ---- Mock window (dashboard preview index.php) ---- */
html[data-theme="light"] .mock-window {
    background-image: linear-gradient(to bottom right, #FFFFFF, #F5F5F4) !important;
    box-shadow:
        0 60px 120px -30px rgba(220,38,38,.20),
        0 30px 60px -20px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(0,0,0,.05) !important;
}

/* ---- Gradients utility (from-/to-) — overrides spécifiques utilisés ---- */
html[data-theme="light"] .from-ink-900 {
    --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="light"] .to-ink-800 {
    --tw-gradient-to: #F5F5F4 var(--tw-gradient-to-position) !important;
}

/* ---- Noise atténué sur clair ---- */
html[data-theme="light"] .noise { opacity: .02 !important; mix-blend-mode: multiply !important; }

/* ---- Box-shadows ajustés ---- */
html[data-theme="light"] .cta-shadow {
    box-shadow:
        0 10px 40px -10px rgba(220,38,38,.45),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* ---- Cards custom (inscription, contact) ---- */
html[data-theme="light"] .card {
    background: linear-gradient(180deg, rgba(0,0,0,.025), rgba(0,0,0,.012)) !important;
    border-color: rgba(0,0,0,.08) !important;
}

/* ---- prose-alarme (mentions-legales, rgpd) ---- */
html[data-theme="light"] .prose-alarme h2 { color: #0B0F1A !important; }
html[data-theme="light"] .prose-alarme p,
html[data-theme="light"] .prose-alarme li { color: #44403c !important; }
html[data-theme="light"] .prose-alarme strong { color: #0B0F1A !important; }
html[data-theme="light"] .prose-alarme a { color: #DC2626 !important; }

/* ---- Period toggle (#tarifs) ---- */
html[data-theme="light"] #tarifs .period-btn { color: #57534E !important; }
html[data-theme="light"] #tarifs .period-btn:hover:not(.active) { color: #0B0F1A !important; }
html[data-theme="light"] #tarifs .period-btn.active { background: #DC2626 !important; color: #fff !important; }

/* ---- Sélection ---- */
html[data-theme="light"] ::selection { background: #DC2626; color: #FFFFFF; }

/* ============================================================
   Toggle FAB universel (visible sur toutes les pages)
   ============================================================ */
.theme-fab {
    position: fixed;
    right: 18px;
    bottom: 80px; /* 80px pour ne pas chevaucher l'agentation FAB (s'il est là) */
    z-index: 9998;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.06);
    color: #f1f5f9;
    display: grid; place-items: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .15s, background-color .15s, border-color .15s;
}
.theme-fab:hover { transform: scale(1.06); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
.theme-fab:active { transform: scale(.94); }
.theme-fab svg { width: 18px; height: 18px; }

html[data-theme="light"] .theme-fab {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.10);
    color: #0B0F1A;
}
html[data-theme="light"] .theme-fab:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.18); }