/* ============================================================
   DEVB — Thème clair / sombre
   Variables réutilisables + overrides dark
   ============================================================ */

/* --- Variables par défaut (clair) --- */
:root,
html[data-theme="light"] {
    --primary:        #1a5d1a;
    --primary-dark:   #134713;
    --primary-light:  #27ae60;
    --primary-soft:   #e8f5e9;

    --blue:           #2980b9;
    --orange:         #f39c12;
    --red:            #dc3545;

    --bg-body:        #f8fafc;
    --bg-card:        #ffffff;
    --bg-hover:       #f1f5f9;
    --bg-muted:       #f8fafc;

    --text:           #0f172a;
    --text-body:      #334155;
    --text-muted:     #64748b;
    --text-invert:    #ffffff;

    --border:         #e2e8f0;
    --border-strong:  #cbd5e1;

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:      0 20px 40px -12px rgba(0,0,0,0.15);

    --sidebar-bg:     #ffffff;
    --sidebar-border: #e2e8f0;

    --table-head-bg:  #f8fafc;
    --table-row-hover: #f1f5f9;
}

/* --- Variables sombres --- */
html[data-theme="dark"] {
    --primary:        #4ade80;
    --primary-dark:   #22c55e;
    --primary-light:  #86efac;
    --primary-soft:   rgba(74, 222, 128, 0.12);

    --blue:           #60a5fa;
    --orange:         #fbbf24;
    --red:            #f87171;

    --bg-body:        #0b1220;
    --bg-card:        #111a2e;
    --bg-hover:       #1e293b;
    --bg-muted:       #1e293b;

    --text:           #f8fafc;
    --text-body:      #e2e8f0;
    --text-muted:     #94a3b8;
    --text-invert:    #0f172a;

    --border:         #1e293b;
    --border-strong:  #334155;

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.5);
    --shadow-lg:      0 20px 40px -12px rgba(0,0,0,0.6);

    --sidebar-bg:     #111a2e;
    --sidebar-border: #1e293b;

    --table-head-bg:  #1e293b;
    --table-row-hover: #1e293b;
}

/* --- Application globale --- */
html[data-theme="dark"] {
    color-scheme: dark;
}
html[data-theme="light"] {
    color-scheme: light;
}

body {
    background-color: var(--bg-body) !important;
    color: var(--text-body);
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* --- Bootstrap overrides --- */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--bg-card) !important;
    color: var(--text-body) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .table-light {
    background-color: var(--bg-muted) !important;
    color: var(--text-body) !important;
}

html[data-theme="dark"] .text-dark {
    color: var(--text) !important;
}

html[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .border {
    border-color: var(--border) !important;
}

html[data-theme="dark"] .table {
    color: var(--text-body);
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-body);
    --bs-table-border-color: var(--border);
}

html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--text-body);
    border-color: var(--border);
}

html[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--table-row-hover) !important;
    color: var(--text) !important;
}

html[data-theme="dark"] thead.bg-light th,
html[data-theme="dark"] .table-light th {
    background-color: var(--table-head-bg) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
}

/* Inputs */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background-color: var(--bg-muted) !important;
    color: var(--text-body) !important;
    border-color: var(--border) !important;
}

html[data-theme="dark"] .form-control::placeholder {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--bg-card) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25) !important;
}

/* Boutons "btn-light" */
html[data-theme="dark"] .btn-light {
    background-color: var(--bg-muted) !important;
    color: var(--text-body) !important;
    border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-light:hover {
    background-color: var(--bg-hover) !important;
}

/* Boutons outline */
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--text-muted) !important;
    border-color: var(--border-strong) !important;
}

/* Modales */
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Sidebar */
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .site-nav,
html[data-theme="dark"] .top-bar {
    background-color: var(--sidebar-bg) !important;
    border-color: var(--sidebar-border) !important;
}

html[data-theme="dark"] .sidebar .nav-link {
    color: var(--text-body) !important;
}
html[data-theme="dark"] .sidebar .nav-link:hover {
    background-color: var(--bg-hover) !important;
    color: var(--primary) !important;
}
html[data-theme="dark"] .sidebar .nav-link.active {
    background-color: var(--primary) !important;
    color: var(--text-invert) !important;
}

/* Badges "bg-success-subtle", etc. */
html[data-theme="dark"] .bg-success-subtle { background-color: rgba(74, 222, 128, 0.15) !important; }
html[data-theme="dark"] .bg-info-subtle    { background-color: rgba(96, 165, 250, 0.15) !important; }
html[data-theme="dark"] .bg-warning-subtle { background-color: rgba(251, 191, 36, 0.15) !important; }
html[data-theme="dark"] .bg-danger-subtle  { background-color: rgba(248, 113, 113, 0.15) !important; }
html[data-theme="dark"] .bg-secondary-subtle { background-color: rgba(148, 163, 184, 0.15) !important; }

/* Alertes */
html[data-theme="dark"] .alert-success {
    background-color: rgba(74, 222, 128, 0.12);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.3);
}
html[data-theme="dark"] .alert-danger {
    background-color: rgba(248, 113, 113, 0.12);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
}
html[data-theme="dark"] .alert-info {
    background-color: rgba(96, 165, 250, 0.12);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}
html[data-theme="dark"] .alert-warning {
    background-color: rgba(251, 191, 36, 0.12);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.3);
}
html[data-theme="dark"] .alert-light {
    background-color: var(--bg-muted);
    color: var(--text-body);
    border-color: var(--border);
}

/* Footer */
html[data-theme="dark"] footer,
html[data-theme="dark"] .page-footer {
    background-color: #050a14 !important;
    color: var(--text-muted);
}

/* Styles de la landing publique */
html[data-theme="dark"] .hero {
    filter: brightness(0.9);
}
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .device-banner,
html[data-theme="dark"] .install-cta,
html[data-theme="dark"] .faq details {
    background-color: var(--bg-card) !important;
    border-color: var(--border) !important;
    color: var(--text-body);
}
html[data-theme="dark"] .section-desc,
html[data-theme="dark"] .service-card p,
html[data-theme="dark"] .faq p {
    color: var(--text-muted) !important;
}

/* Bouton de toggle (dans le header) */
.theme-toggle {
    background: transparent;
    border: 1.5px solid var(--border);
    color: var(--text-body);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.theme-toggle:hover {
    background: var(--bg-hover);
    color: var(--primary);
    border-color: var(--primary);
}
.theme-toggle .material-symbols-outlined {
    font-size: 1.25rem;
}

/* Focus accessible */
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] button:focus-visible {
    outline-color: var(--primary);
}

/* ============================================================
   CONTRASTE — Rendre les textes lisibles en mode clair
   ============================================================ */

/* --- Textes "muted" plus foncés en mode clair --- */
html[data-theme="light"] .text-muted,
html:not([data-theme="dark"]) .text-muted {
    color: #475569 !important; /* slate-600 au lieu de #6c757d */
}

/* --- Textes très clairs codés en dur (#94a3b8, #64748b, etc.) --- */
html[data-theme="light"] .text-secondary,
html:not([data-theme="dark"]) .text-secondary {
    color: #475569 !important;
}

/* --- Placeholders visibles --- */
html[data-theme="light"] .form-control::placeholder,
html:not([data-theme="dark"]) .form-control::placeholder {
    color: #64748b !important;
    opacity: 1;
}

/* --- Petits textes (form-text, small muted) --- */
html[data-theme="light"] .form-text,
html[data-theme="light"] small.text-muted,
html:not([data-theme="dark"]) .form-text,
html:not([data-theme="dark"]) small.text-muted {
    color: #475569 !important;
}

/* --- Liens secondaires --- */
html[data-theme="light"] .back-link,
html[data-theme="light"] .footer-note,
html:not([data-theme="dark"]) .back-link,
html:not([data-theme="dark"]) .footer-note {
    color: #475569 !important;
}

/* --- Labels de formulaires --- */
html[data-theme="light"] .form-label,
html:not([data-theme="dark"]) .form-label {
    color: #1e293b !important; /* slate-800 */
}

/* --- En mode sombre, garder les muted plus clairs --- */
html[data-theme="dark"] .text-muted {
    color: #94a3b8 !important;
}