/**
 * Mode Sombre / Dark Mode
 * Thème sombre pour le site
 */

/* Variables CSS pour les thèmes */
:root {
    /* Mode clair (par défaut) - Couleurs améliorées */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-card: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --card-bg: #ffffff;
    --card-hover-bg: #fafafa;
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: var(--secondary-color);
    --navbar-bg: #ffffff;
    --footer-bg: #1a1a1a;
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --highlight-color: rgba(var(--secondary-rgb), 0.1);
}

/* Mode sombre - Couleurs améliorées avec meilleur contraste */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-muted: #94a3b8;
    --border-color: #475569;
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-bg: #1e293b;
    --card-hover-bg: #334155;
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-focus-border: #f4d03f;
    --navbar-bg: #1e293b;
    --footer-bg: #0f172a;
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --highlight-color: rgba(244, 208, 63, 0.1);
    
    /* Couleurs d'accent pour le mode sombre */
    --accent-gold: #f4d03f;
    --accent-gold-light: #fde047;
    --accent-gold-dark: #d4af37;
}

/* Appliquer les variables aux éléments */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* === CARTES AMÉLIORÉES === */
.product-card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.creator-card,
.card {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
}

.creator-card:hover,
.card:hover {
    background-color: var(--card-hover-bg);
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Cartes en mode sombre */
[data-theme="dark"] .product-card,
[data-theme="dark"] .creator-card,
[data-theme="dark"] .card {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .creator-card:hover,
[data-theme="dark"] .card:hover {
    background: linear-gradient(145deg, var(--bg-tertiary) 0%, #3d4f66 100%);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(244, 208, 63, 0.1);
}

/* Sections */
.section {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease;
}

.section-alt {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .section-alt {
    background-color: var(--bg-secondary);
}

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

.navbar .nav-link {
    color: var(--text-primary);
}

.navbar .nav-link:hover {
    color: var(--primary-color);
}

/* Footer */
.footer {
    background-color: var(--footer-bg);
}

[data-theme="dark"] .footer {
    background-color: var(--bg-secondary);
}

/* Inputs et formulaires */
.form-input,
.form-select,
.form-textarea,
input,
select,
textarea {
    background-color: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary-color);
}

/* === BOUTONS EN MODE SOMBRE === */

/* Bouton par défaut en mode sombre */
[data-theme="dark"] .btn {
    background: linear-gradient(135deg, #f4d03f 0%, #d4af37 100%);
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(244, 208, 63, 0.25);
}

[data-theme="dark"] .btn:hover {
    background: linear-gradient(135deg, #fde047 0%, #f4d03f 100%);
    box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
}

/* Bouton primary en mode sombre */
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #f4d03f 0%, #d4af37 100%);
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(244, 208, 63, 0.25);
}

[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #fde047 0%, #f4d03f 100%);
    box-shadow: 0 8px 25px rgba(244, 208, 63, 0.4);
}

/* Bouton secondary en mode sombre */
[data-theme="dark"] .btn-secondary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .btn-secondary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

/* Bouton outline en mode sombre */
[data-theme="dark"] .btn-outline {
    background: transparent;
    color: #f4d03f;
    border: 2px solid #f4d03f;
    box-shadow: 0 2px 10px rgba(244, 208, 63, 0.1);
}

[data-theme="dark"] .btn-outline:hover {
    background: #f4d03f;
    color: #0f172a;
    box-shadow: 0 8px 20px rgba(244, 208, 63, 0.3);
}

/* Bouton accent en mode sombre */
[data-theme="dark"] .btn-accent {
    background: linear-gradient(135deg, #fde047 0%, #f4d03f 100%);
    color: #0f172a;
    box-shadow: 0 4px 15px rgba(253, 224, 71, 0.3);
}

[data-theme="dark"] .btn-accent:hover {
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    box-shadow: 0 8px 25px rgba(253, 224, 71, 0.4);
}

/* Bouton success en mode sombre */
[data-theme="dark"] .btn-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
    box-shadow: 0 4px 15px rgba(52, 211, 153, 0.25);
}

[data-theme="dark"] .btn-success:hover {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
    box-shadow: 0 8px 25px rgba(52, 211, 153, 0.4);
}

/* Bouton danger en mode sombre */
[data-theme="dark"] .btn-danger {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
    box-shadow: 0 4px 15px rgba(248, 113, 113, 0.25);
}

[data-theme="dark"] .btn-danger:hover {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
    box-shadow: 0 8px 25px rgba(248, 113, 113, 0.4);
}

/* Headers de page */
.page-header {
    background-color: var(--bg-secondary);
}

 [data-theme="dark"] .page-header::before {
     background: linear-gradient(135deg, rgba(15, 23, 42, 0.82) 0%, rgba(15, 23, 42, 0.62) 50%, rgba(15, 23, 42, 0.82) 100%);
 }

/* Hero section */
[data-theme="dark"] .hero {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .hero-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.8) 100%);
}

/* Sidebar */
.products-sidebar,
.sidebar {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table thead {
    background-color: var(--bg-secondary);
}

.table tbody tr {
    border-bottom-color: var(--border-color);
}

.table tbody tr:hover {
    background-color: var(--bg-secondary);
}

/* Badges */
.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Modals */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    box-shadow: 0 10px 40px var(--shadow-color);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--bg-secondary);
}

/* Autocomplete */
.autocomplete-results {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 10px 25px var(--shadow-color) !important;
}

.autocomplete-item:hover {
    background-color: var(--bg-secondary) !important;
}

/* Tooltips */
.tooltip {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Toggle button - caché car maintenant dans le header */
.theme-toggle {
    display: none !important;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--shadow-color);
}

/* Animations pour le toggle */
@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.theme-toggle.animating {
    animation: rotateIcon 0.5s ease;
}

/* Position spécifique pour l'interface admin */
.admin-layout .theme-toggle {
    left: 300px; /* Décalé après la sidebar (280px + 20px de marge) */
}

/* Position mobile pour l'admin */
@media (max-width: 767px) {
    .admin-layout .theme-toggle {
        left: 20px; /* Retour à gauche sur mobile */
    }
}

/* ============================================
   LIENS DE NAVIGATION ACTIFS
   ============================================ */

/* Navigation publique - liens actifs (Mode Jour) */
.nav-link.active {
    color: #b8941f;
    font-weight: 700;
    position: relative;
    text-shadow: 0 1px 2px rgba(212, 175, 55, 0.2);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #d4af37, #b8941f, #d4af37, transparent);
    border-radius: 2px;
    box-shadow: 0 3px 10px rgba(212, 175, 55, 0.5);
}

/* Navigation publique - hover */
.nav-link:hover {
    color: #b8941f;
    transition: color 0.3s ease;
    font-weight: 600;
}

/* ============================================
   TESTIMONIALS EN MODE SOMBRE
   ============================================ */

[data-theme="dark"] .testimonial-card {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .testimonial-content {
    color: var(--text-secondary);
}

[data-theme="dark"] .testimonial-author-name {
    color: var(--text-primary);
}

[data-theme="dark"] .testimonial-author-title {
    color: var(--text-muted);
}

[data-theme="dark"] .rating .star {
    color: var(--secondary-color);
}

/* ============================================
   MODE SOMBRE
   ============================================ */

/* Navigation publique - Onglet actif en mode sombre */
[data-theme="dark"] .nav-link.active {
    color: #f4d03f;
    text-shadow: 0 0 10px rgba(244, 208, 63, 0.5);
}

[data-theme="dark"] .nav-link.active::after {
    background: linear-gradient(90deg, transparent, #f4d03f, transparent);
    box-shadow: 0 2px 12px rgba(244, 208, 63, 0.6);
}

[data-theme="dark"] .nav-link:hover {
    color: #f4d03f;
}

/* Interface Admin - Sidebar active en mode sombre */
[data-theme="dark"] .admin-sidebar {
    background: #0f172a;
    border-right: 1px solid #1e293b;
}

[data-theme="dark"] .sidebar-link.active {
    background: linear-gradient(90deg, rgba(244, 208, 63, 0.2), rgba(244, 208, 63, 0.05));
    color: #f4d03f;
    font-weight: 600;
    box-shadow: inset 0 0 20px rgba(244, 208, 63, 0.15);
}

[data-theme="dark"] .sidebar-link.active::before {
    background: linear-gradient(180deg, #f4d03f, #d4af37);
    box-shadow: 0 0 15px rgba(244, 208, 63, 0.7);
}

[data-theme="dark"] .sidebar-link.active svg {
    color: #f4d03f;
    filter: drop-shadow(0 0 5px rgba(244, 208, 63, 0.7));
}

[data-theme="dark"] .sidebar-link:hover {
    background: rgba(244, 208, 63, 0.1);
    color: #f4d03f;
}

[data-theme="dark"] .sidebar-link.active .sidebar-badge {
    background: linear-gradient(135deg, #f4d03f, #d4af37);
    box-shadow: 0 2px 12px rgba(244, 208, 63, 0.8);
}

/* Interface Admin - Header en mode sombre */
[data-theme="dark"] .admin-header {
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

[data-theme="dark"] .admin-content {
    background: #0f172a;
}

[data-theme="dark"] .admin-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .admin-card-header {
    border-bottom-color: #334155;
}

[data-theme="dark"] .admin-user-avatar {
    background: linear-gradient(135deg, #f4d03f, #d4af37);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(244, 208, 63, 0.4);
}

[data-theme="dark"] .admin-main {
    background: #0f172a;
}

/* Améliorer la lisibilité en mode sombre */
[data-theme="dark"] .text-muted,
[data-theme="dark"] .product-creator,
[data-theme="dark"] .creator-location {
    color: var(--text-secondary);
}

[data-theme="dark"] .product-category {
    color: var(--text-muted);
}

/* Badges promo en mode sombre */
[data-theme="dark"] .badge-promo {
    background: linear-gradient(135deg, #f87171, #ef4444);
    box-shadow: 0 3px 12px rgba(248, 113, 113, 0.5);
}

[data-theme="dark"] .badge-promo-value {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .badge-new {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    box-shadow: 0 3px 12px rgba(139, 92, 246, 0.5);
}

/* Bouton de recherche en mode sombre */
[data-theme="dark"] .btn-search {
    color: white;
}

[data-theme="dark"] .btn-search svg {
    stroke: white;
}

[data-theme="dark"] .btn-search:hover {
    color: var(--primary-color);
}

[data-theme="dark"] .btn-search:hover svg {
    stroke: var(--primary-color);
}

/* ============================================
   MENU TOGGLE MOBILE - MODE SOMBRE AMÉLIORÉ
   ============================================ */

@media (max-width: 768px) {
    /* Bouton hamburger en mode sombre */
    [data-theme="dark"] .navbar-toggle {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
    }
    
    [data-theme="dark"] .navbar-toggle:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    [data-theme="dark"] .navbar-toggle span {
        background: white;
    }

    /* Menu déroulant en mode sombre */
    [data-theme="dark"] .navbar-menu {
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 100%);
        border-bottom: none;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    
    /* Les onglets dans le menu toggle en mode sombre */
    [data-theme="dark"] .navbar-menu .nav-link {
        color: #e2e8f0;
        background: rgba(255, 255, 255, 0.03);
    }
    
    /* Hover des onglets en mode sombre */
    [data-theme="dark"] .navbar-menu .nav-link:hover {
        background: linear-gradient(135deg, #f4d03f, #d4af37);
        color: #0f172a;
        box-shadow: 0 4px 15px rgba(244, 208, 63, 0.3);
    }
    
    /* Onglet actif en mode sombre */
    [data-theme="dark"] .navbar-menu .nav-link.active {
        background: linear-gradient(135deg, #f4d03f, #d4af37);
        color: #0f172a;
        box-shadow: 0 4px 20px rgba(244, 208, 63, 0.4);
    }
    
    /* Actions navbar en mode sombre */
    [data-theme="dark"] .navbar-actions {
        border-top-color: rgba(255, 255, 255, 0.08);
    }
}

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

[data-theme="dark"] .navbar {
    background: var(--navbar-bg);
    border-bottom: 1px solid #1e293b;
}

/* Form pagination en mode sombre */
[data-theme="dark"] .progress-bar {
    background: #1e293b;
}

[data-theme="dark"] .progress-bar-fill {
    background: linear-gradient(90deg, #f4d03f, #d4af37);
}

[data-theme="dark"] .radio-card-content,
[data-theme="dark"] .checkbox-card-content {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .radio-card input:checked + .radio-card-content,
[data-theme="dark"] .checkbox-card input:checked + .checkbox-card-content {
    background: rgba(244, 208, 63, 0.15);
    border-color: #f4d03f;
}

/* Ombres en mode sombre */
[data-theme="dark"] .product-card,
[data-theme="dark"] .creator-card {
    box-shadow: 0 4px 12px var(--shadow-color);
}

[data-theme="dark"] .creator-card:hover {
    box-shadow: 0 8px 24px var(--shadow-color);
}

/* Transitions fluides - exclure les cartes produits */
*:not(.product-card):not(.product-card *):not(.product-card-link):not(.product-card-image):not(.product-card-image *):not(.product-card-body):not(.product-card-body *) {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Éviter les transitions sur certains éléments */
img,
.hero-image,
.logo-image {
    transition: none !important;
}

/* Forcer aucune transition sur les cartes produits */
.product-card,
.product-card *,
.product-card-link,
.product-card-image,
.product-card-image *,
.product-card-body,
.product-card-body * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
}

.product-card:hover,
.product-card:hover *,
.product-card:active,
.product-card:active * {
    transition: none !important;
    transform: none !important;
    animation: none !important;
}