/* Variables CSS Dark Mode - Thème Noël (Vert et Rouge) */
/* Les variables de base sont redéfinies pour le dark mode */
body.dark-mode {
    /* ============================================
       REDÉFINITION DES COULEURS DE BASE
       pour le dark mode - Modifier ces couleurs
       change tout le thème en dark mode
       ============================================ */
    
    /* Couleurs principales (héritées ou redéfinies) */
    --base-color: #0f643c;              /* Garde la même couleur principale (vert Noël) */
    --base-color-light: #159b5c;        /* Garde la même couleur claire */
    --base-color-dark: #09532b;         /* Garde la même couleur foncée */
    
    /* Couleurs de texte (dark mode) */
    --text-color: #e8e8e8;              /* Texte principal dark */
    --text-color-muted: #b0b0b0;        /* Texte atténué dark */
    --text-color-soft: #d0d0d0;         /* Texte doux dark */
    --text-color-light: #d0d0d0;        /* Texte clair dark */
    --text-color-inverse: #1a1a1a;      /* Texte inversé dark */
    
    /* Couleurs secondaires (dark mode) */
    --second-color: #DC3545;            /* Garde la même (rouge Noël) */
    --second-color-muted: #BB2D3B;      /* Version atténuée */
    --second-color-soft: #E85D75;       /* Version douce */
    
    /* Couleurs de fond (dark mode) */
    --background-color: #1a1a1a;        /* Fond principal dark */
    --background-color-alt: #201d1d;    /* Fond alternatif dark */
    --background-color-secondary: #2a2a2a; /* Fond secondaire dark */
    --background-color-navbar: #2a2a2a;  /* Navbar dark - explicite */
    
    /* Couleurs spéciales (dark mode) */
    --color-success: #0F5132;           /* Garde la même (vert Noël) */
    --color-success-light: rgba(15, 81, 50, 0.2); /* Plus opaque en dark */
    --color-error: #DC3545;             /* Garde la même */
    --color-error-light: rgba(220, 53, 69, 0.15); /* Fond erreur dark */
    --color-warning: #ffc107;           /* Garde la même */
    --color-warning-text: #ffd54f;      /* Texte plus clair en dark */
    --color-warning-light: rgba(255, 193, 7, 0.2); /* Fond warning dark */
    --color-info: #198754;              /* Couleur information (vert clair) */
    --color-info-light: rgba(15, 81, 50, 0.15); /* Fond info dark */
    --color-note: rgba(15, 81, 50, 0.15); /* Fond note dark */
    --color-detail: rgba(255, 255, 255, 0.05); /* Fond détail dark */
    
    /* Couleurs boutons spéciaux (dark mode) - gardent les mêmes */
    --color-button-view: #4a5a70;
    --color-button-success: #0F5132;
    --color-button-edit: #ffc107;
    --color-button-delete: #dc3545;
    
    /* Couleurs de bordure (dark mode) */
    --border-color: rgba(255, 255, 255, 0.1); /* Bordure dark */
    
    /* Couleurs d'ombres (dark mode) */
    --shadow-color: rgba(0, 0, 0, 0.3); /* Ombre dark */
    
    /* Toutes les autres variables utilisent var() donc s'adaptent automatiquement */
    
    /* Redéfinitions spécifiques dark mode si nécessaire */
    --shadow-primary: 0 4px 12px rgba(15, 81, 50, 0.3);
    --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-modal: 0 12px 30px rgba(0, 0, 0, 0.3);
    --background-color-overlay: rgba(0, 0, 0, 0.7);
    
    /* Footer dark mode */
    --footer-text: #e8e8e8;
    --footer-title-text: #198754;
    --footer-link-text: #e8e8e8;
    --footer-link-hover-text: #198754;
    --footer-border: rgba(255, 255, 255, 0.1);
    
    /* Alertes dark mode spécifiques */
    --alert-error-text: #ff6b7a;        /* Texte erreur plus clair */
    --alert-error-border: rgba(220, 53, 69, 0.3);
    --alert-info-text: #d0d0d0;         /* Texte info dark */
    
    /* Variables de formulaire - explicites en dark mode */
    --form-background: var(--background-color-alt);
    --form-element-background: var(--background-color-alt);
    --form-input-background: var(--background-color-alt);
    --form-input-text: var(--text-color);
    --form-input-placeholder: var(--text-color-muted);
    --form-input-disabled-bg: var(--color-detail);
    --form-input-disabled-text: var(--text-color-muted);
    --form-label-text: var(--text-color);
    
    /* Fond et texte du body */
    background-color: var(--background-color);
    color: var(--text-color);
}

/* ============================================
   STYLES DARK MODE POUR LES COMPOSANTS
   Ces styles utilisent les variables définies ci-dessus
   ============================================ */

/* Navbar */
body.dark-mode .navbar {
    background: var(--background-color-navbar);
    border-bottom-color: var(--border-color);
}

/* Liens généraux */
body.dark-mode a:not(.btn-view):not(.btn-duplicate):not(.btn-delete):not(.btn-edit) {
    color: var(--text-color);
}

body.dark-mode a:not(.btn-view):not(.btn-duplicate):not(.btn-delete):not(.btn-edit):hover {
    color: var(--base-color-light);
}

/* Navigation links */
body.dark-mode .nav-links a {
    background: var(--background-color-navbar);
    color: var(--nav-link-text);
    border-color: var(--border-color);
}

body.dark-mode .nav-links a:hover {
    background: var(--background-color-secondary);
    color: var(--nav-link-hover-text);
    border-color: var(--base-color-light);
}

body.dark-mode .nav-links a.active {
    background: var(--nav-link-active-bg);
    color: var(--nav-link-active-text);
    border-color: var(--base-color);
}

/* Navigation links nav-primary */
body.dark-mode .nav-links a.nav-primary {
    background: var(--background-color-navbar);
    border-color: var(--base-color);
}

body.dark-mode .nav-links a.nav-primary:hover {
    background: var(--background-color-secondary);
    border-color: var(--base-color);
}

body.dark-mode .nav-links a.nav-primary.active {
    background: var(--nav-link-active-bg);
    color: var(--nav-link-active-text);
    border-color: var(--base-color);
}

/* Footer */
body.dark-mode .site-footer {
    background: var(--background-color-footer);
    color: var(--footer-text);
    border-top-color: var(--footer-border);
}

body.dark-mode .footer-title,
body.dark-mode .footer-subtitle {
    color: var(--footer-title-text);
}

body.dark-mode .footer-link {
    color: var(--footer-link-text);
}

body.dark-mode .footer-link:hover {
    color: var(--footer-link-hover-text);
}

body.dark-mode .footer-copyright {
    border-top-color: var(--footer-border);
}

/* Formulaires généraux */
body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background: var(--form-input-background);
    color: var(--form-input-text);
    border-color: var(--border-color);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
    color: var(--form-input-placeholder);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
    border-color: var(--border-color-focus);
}

body.dark-mode .contact-form input,
body.dark-mode .contact-form textarea,
body.dark-mode .contact-form select {
    background: var(--form-input-background);
    color: var(--form-input-text);
    border-color: var(--border-color);
}

/* Autres classes de formulaire */
body.dark-mode .account-field input,
body.dark-mode .account-field select,
body.dark-mode .account-field textarea {
    background: var(--form-input-background);
    color: var(--form-input-text);
}

body.dark-mode .contacts-search-input,
body.dark-mode .contacts-search-select {
    background: var(--form-input-background);
    color: var(--form-input-text);
}

body.dark-mode .account-field-with-privacy .account-field-input-row input {
    background: var(--form-input-background);
    color: var(--form-input-text);
}

/* Pages publiques */
body.dark-mode .feature-card,
body.dark-mode .about-section,
body.dark-mode .faq-item,
body.dark-mode .privacy-section,
body.dark-mode .contact-form {
    background: var(--background-color-alt);
    color: var(--text-color);
}

body.dark-mode .feature-card p,
body.dark-mode .about-section p,
body.dark-mode .privacy-section p,
body.dark-mode .privacy-section ul,
body.dark-mode .faq-answer-content {
    color: var(--text-color-soft);
}

/* Formulaires dans les divs de contrôles */
body.dark-mode .control-form-group input[type="text"],
body.dark-mode .control-form-group input[type="number"],
body.dark-mode .control-form-group textarea,
body.dark-mode .control-form-group select {
    background-color: var(--color-control-bg) !important;
    color: var(--color-control-text) !important;
    border-color: var(--color-control-border) !important;
}

body.dark-mode .control-form-group input[type="text"]:focus,
body.dark-mode .control-form-group input[type="number"]:focus,
body.dark-mode .control-form-group textarea:focus,
body.dark-mode .control-form-group select:focus {
    background-color: var(--color-control-focus-bg) !important;
    border-color: var(--border-color-focus) !important;
}

body.dark-mode .control-form-group input[type="color"] {
    border-color: var(--color-control-border) !important;
}

body.dark-mode .control-form-group input[type="color"]:focus {
    border-color: var(--border-color-focus) !important;
}

body.dark-mode .control-form-group input[type="range"] {
    background: var(--color-range-track);
}

body.dark-mode .control-form-group input[type="range"]::-webkit-slider-runnable-track {
    background: var(--color-range-track);
}

body.dark-mode .control-form-group input[type="range"]::-moz-range-track {
    background: var(--color-range-track);
}

/* SVG dans le menu d'accessibilité */
body.dark-mode .accessibility-menu-btn svg,
body.dark-mode .accessibility-toggle svg,
body.dark-mode .accessibility-btn-small svg {
    fill: currentColor;
}

/* Concept card et text-card */
body.dark-mode .concept-card,
body.dark-mode .text-card {
    background: var(--background-color-alt);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .concept-card h3,
body.dark-mode .text-card h3 {
    color: var(--base-color);
}

body.dark-mode .concept-card .concept-text,
body.dark-mode .text-card p,
body.dark-mode .concept-card p {
    color: var(--text-color-soft);
}

body.dark-mode .concept-card:hover,
body.dark-mode .text-card:hover {
    border-color: var(--base-color);
    box-shadow: var(--shadow-card);
}

body.dark-mode .concept-card.selected,
body.dark-mode .text-card.selected {
    background: var(--color-success-light) !important;
    border-color: var(--base-color) !important;
    box-shadow: var(--shadow-primary) !important;
}

body.dark-mode .concept-card.selected .concept-text,
body.dark-mode .concept-card.selected p,
body.dark-mode .text-card.selected p {
    color: var(--text-color);
}

/* Checkboxes et radios */
body.dark-mode input[type="checkbox"] {
    background-color: var(--checkbox-bg);
    border-color: var(--checkbox-border);
}

body.dark-mode input[type="checkbox"]:checked {
    background-color: var(--checkbox-checked-bg);
    border-color: var(--checkbox-checked-border);
}

body.dark-mode input[type="radio"] {
    background-color: var(--radio-bg);
    border-color: var(--radio-border);
}

body.dark-mode input[type="radio"]:checked {
    background-color: var(--radio-checked-bg);
    border-color: var(--radio-checked-border);
}

/* Boutons toggle (radio et checkbox) */
body.dark-mode .btn-toggle,
body.dark-mode .btn-toggle-radio,
body.dark-mode .btn-toggle-checkbox {
    background: var(--background-color-alt);
    color: var(--text-color);
    border-color: var(--border-color);
}

body.dark-mode .btn-toggle:hover,
body.dark-mode .btn-toggle-radio:hover,
body.dark-mode .btn-toggle-checkbox:hover {
    background: var(--background-color-secondary);
    border-color: var(--base-color-light);
}

body.dark-mode .btn-toggle.selected,
body.dark-mode .btn-toggle-radio.selected,
body.dark-mode .btn-toggle-checkbox.selected,
body.dark-mode .btn-toggle:has(input[type="radio"]:checked),
body.dark-mode .btn-toggle-radio:has(input[type="radio"]:checked),
body.dark-mode .btn-toggle:has(input[type="checkbox"]:checked),
body.dark-mode .btn-toggle-checkbox:has(input[type="checkbox"]:checked) {
    background: var(--base-color);
    color: var(--text-color-white);
    border-color: var(--base-color);
    box-shadow: var(--shadow-primary);
}

/* Supprimer le box-shadow du texte à l'intérieur */
body.dark-mode .btn-toggle.selected *,
body.dark-mode .btn-toggle-radio.selected *,
body.dark-mode .btn-toggle-checkbox.selected *,
body.dark-mode .btn-toggle:has(input[type="radio"]:checked) *,
body.dark-mode .btn-toggle-radio:has(input[type="radio"]:checked) *,
body.dark-mode .btn-toggle:has(input[type="checkbox"]:checked) *,
body.dark-mode .btn-toggle-checkbox:has(input[type="checkbox"]:checked) * {
    box-shadow: none !important;
    text-shadow: none !important;
}