/* ==========================================================================
   ORBITECH AI ACADEMY — Dark Mode (refonte 2026)
   Inversion via CSS variables : encre profonde + crème + accent
   ========================================================================== */

[data-theme="dark"] {
    --ink:           #FAFAF7;
    --ink-soft:      #E8E5DA;
    --ink-muted:     #A8A8B3;
    --ink-faint:     #6E727B;

    --paper:         #0A0E1A;
    --paper-soft:    #14182A;
    --paper-card:    #1A1F33;
    --rule:          #2C3148;
    --rule-soft:     #1F2438;

    --accent:        #6E8FB8;
    --accent-strong: #8FB0DA;
    --accent-soft:   #1F2C44;
    --accent-link:   #8FB0DA;

    --gilt:          #D4B85A;
    --gilt-soft:     #2A2615;

    --signal-ok:     #4ADE80;
    --signal-ok-bg:  #142B1F;
    --signal-warn:   #FBBF24;
    --signal-warn-bg:#2B2110;
    --signal-err:    #F87171;
    --signal-err-bg: #2A1717;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:     0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:     0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-xl:     0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow:   0 0 0 3px rgba(110, 143, 184, 0.2);

    --gradient-paper: linear-gradient(180deg, var(--paper) 0%, var(--paper-soft) 100%);
}

/* Tokens bleu/ambre de la refonte (juin 2026) — variantes DARK.
   html[data-theme] (spécificité 0,1,1) bat les :root inline auto-suffisants des pages (0,1,0)
   → s'applique sur toutes les pages refondues sans dépendre de l'ordre de chargement. */
html[data-theme="dark"] {
    --accent-bright:      #5b8def;  /* bleu plus clair → lisible sur fond sombre (eyebrows, KPI, numéros, titres em) */
    --accent-bright-deep: #3b6fd4;  /* éclairci : lisible comme TEXTE sur sections sombres (.security-value, prix)
                                       ET garde un contraste blanc ~5:1 sur les boutons/bulles remplis */
    --accent-wash:        #131c33;  /* sections teintées → bleu nuit (texte clair lisible, fini l'invisible) */
    --accent-warm:        #E0A52E;  /* ambre plus clair pour le dark */
    /* --accent-bubble reste clair : bulles/badges à contenu foncé (hero window, eco-tag) lisibles sur dark */
}

[data-theme="dark"] body {
    background: var(--paper);
    color: var(--ink-soft);
}

/* ============================================
   Navbar
   ============================================ */

[data-theme="dark"] .navbar {
    background: rgba(10, 14, 26, 0.85);
    border-bottom-color: transparent;
}

[data-theme="dark"] .navbar.scrolled {
    background: rgba(10, 14, 26, 0.96);
    border-bottom-color: var(--rule);
}

[data-theme="dark"] .logo {
    color: var(--ink);
}

[data-theme="dark"] .logo:hover {
    color: var(--ink);
    opacity: 0.7;
}

[data-theme="dark"] .logo-mark {
    color: var(--accent-strong);
}

[data-theme="dark"] .nav-link {
    color: var(--ink-soft);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--ink);
}

[data-theme="dark"] .nav-link.active {
    color: var(--ink);
}

[data-theme="dark"] .nav-link::after {
    background: var(--ink);
}

[data-theme="dark"] .nav-cta {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

[data-theme="dark"] .nav-cta:hover {
    background: var(--ink-soft);
    border-color: var(--ink-soft);
    color: var(--paper);
}

[data-theme="dark"] .mobile-toggle {
    background: transparent;
    border-color: var(--rule);
}

[data-theme="dark"] .mobile-toggle span {
    background: var(--ink);
}

[data-theme="dark"] .nav-links {
    background: var(--paper-card);
    border-bottom-color: var(--rule);
}

@media (max-width: 900px) {
    [data-theme="dark"] .nav-links {
        background: var(--paper-card);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    }
}

/* ============================================
   Scrollbars
   ============================================ */

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--paper);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--rule);
    border: 3px solid var(--paper);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--ink-faint);
}

/* ============================================
   Inputs & forms
   ============================================ */

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--paper-soft);
    border-color: var(--rule);
    color: var(--ink);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--ink-faint);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    background: var(--paper-card);
    border-color: var(--accent);
    box-shadow: var(--shadow-glow);
}

/* ============================================
   Code blocks
   ============================================ */

[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--paper-soft);
    border: 1px solid var(--rule-soft);
    color: var(--accent-strong);
}

[data-theme="dark"] kbd {
    background: var(--ink);
    color: var(--paper);
}

/* ============================================
   Tables
   ============================================ */

[data-theme="dark"] table {
    background: var(--paper);
    color: var(--ink-soft);
}

[data-theme="dark"] th {
    background: var(--paper-card);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
}

[data-theme="dark"] td {
    border-color: var(--rule-soft);
}

[data-theme="dark"] tr:hover {
    background: var(--paper-soft);
}

/* ============================================
   Modals & overlays
   ============================================ */

[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content {
    background: var(--paper-card);
    border: 1px solid var(--rule);
}

/* ============================================
   Cards & surfaces
   ============================================ */

[data-theme="dark"] .card,
[data-theme="dark"] .box,
[data-theme="dark"] .panel {
    background: var(--paper-card);
    border-color: var(--rule-soft);
}

[data-theme="dark"] .card:hover {
    border-color: var(--rule);
}

[data-theme="dark"] .card-ink,
[data-theme="dark"] .card-gradient {
    background: var(--paper-soft);
    border-color: var(--rule);
}

[data-theme="dark"] .profile-dropdown,
[data-theme="dark"] .matiere-dropdown,
[data-theme="dark"] .dropdown-menu {
    background: var(--paper-card);
    border: 1px solid var(--rule);
}

/* ============================================
   Typographie
   ============================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--ink);
}

[data-theme="dark"] p {
    color: var(--ink-soft);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-cta):not(.logo) {
    color: var(--accent-strong);
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.nav-cta):not(.logo):hover {
    color: var(--ink);
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
    color: var(--ink);
}

[data-theme="dark"] blockquote {
    color: var(--ink);
    border-left-color: var(--ink);
}

[data-theme="dark"] blockquote cite {
    color: var(--ink-muted);
}

[data-theme="dark"] hr,
[data-theme="dark"] .section-rule {
    border-top-color: var(--rule);
}

[data-theme="dark"] mark {
    background: var(--gilt-soft);
    color: var(--ink);
}

/* ============================================
   Composants éditoriaux
   ============================================ */

[data-theme="dark"] .eyebrow {
    color: var(--ink-muted);
}

[data-theme="dark"] .byline {
    color: var(--ink-muted);
    border-bottom-color: var(--rule);
}

[data-theme="dark"] .pull-quote {
    color: var(--ink);
    border-left-color: var(--accent-strong);
}

[data-theme="dark"] .kpi-value {
    color: var(--ink);
}

[data-theme="dark"] .kpi-label {
    color: var(--ink-muted);
}

[data-theme="dark"] .kpi-source {
    color: var(--ink-faint);
}

/* ============================================
   Buttons (legacy variants)
   ============================================ */

[data-theme="dark"] .btn-secondary {
    background: var(--paper-card);
    color: var(--ink);
    border-color: var(--rule);
}

[data-theme="dark"] .btn-secondary:hover {
    background: var(--paper-soft);
    border-color: var(--ink-faint);
}

[data-theme="dark"] .btn-outline {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--ink);
    color: var(--paper);
}

[data-theme="dark"] .btn-ghost:hover {
    background: var(--paper-soft);
}

[data-theme="dark"] .btn-demo {
    background: var(--paper-card);
    color: var(--ink);
    border-color: var(--rule);
}

[data-theme="dark"] .btn-demo:hover {
    background: var(--paper-soft);
    border-color: var(--ink-faint);
}

/* ============================================
   Back buttons / utility nav
   ============================================ */

[data-theme="dark"] .back-button,
[data-theme="dark"] .back-btn {
    background: var(--paper-card);
    color: var(--ink);
    border: 1px solid var(--rule-soft);
}

[data-theme="dark"] .back-button:hover,
[data-theme="dark"] .back-btn:hover {
    background: var(--paper-soft);
    border-color: var(--rule);
}

/* ============================================
   Accessibility panel
   ============================================ */

[data-theme="dark"] .accessibility-panel {
    background: var(--paper-card);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .accessibility-content {
    background: var(--paper-card);
}

[data-theme="dark"] .accessibility-section {
    border-bottom-color: var(--rule-soft);
}

[data-theme="dark"] .section-header h4 {
    color: var(--ink);
}

[data-theme="dark"] .toggle-label {
    color: var(--ink);
}

[data-theme="dark"] .control-group > label:not(.toggle-switch) {
    color: var(--ink-muted);
}

[data-theme="dark"] .toggle-slider {
    background: var(--rule);
}

[data-theme="dark"] .slider-container input[type="range"] {
    background: var(--rule-soft);
}

[data-theme="dark"] .accessibility-panel select {
    background: var(--paper-soft);
    border-color: var(--rule-soft);
    color: var(--ink);
}

[data-theme="dark"] .accessibility-panel select:hover {
    border-color: var(--rule);
}

[data-theme="dark"] .accessibility-panel select:focus {
    background: var(--paper-card);
    border-color: var(--accent);
}

[data-theme="dark"] .btn-option {
    background: var(--paper-soft);
    border-color: var(--rule-soft);
    color: var(--ink-muted);
}

[data-theme="dark"] .btn-option:hover {
    background: var(--paper-card);
    border-color: var(--rule);
}

[data-theme="dark"] .btn-option.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

[data-theme="dark"] .btn-reset {
    background: var(--paper-soft);
    border-color: var(--rule-soft);
    color: var(--ink-muted);
}

[data-theme="dark"] .btn-reset:hover {
    background: var(--paper-card);
    border-color: var(--accent);
    color: var(--accent-strong);
}

[data-theme="dark"] .accessibility-footer {
    border-top-color: var(--rule);
}

[data-theme="dark"] .accessibility-content::-webkit-scrollbar-track {
    background: var(--paper);
}

[data-theme="dark"] .accessibility-content::-webkit-scrollbar-thumb {
    background: var(--rule);
}

[data-theme="dark"] .accessibility-content::-webkit-scrollbar-thumb:hover {
    background: var(--ink-faint);
}