/* ============================================
   DARK MODE STYLES
   Active automatiquement de 19h à 6h
   ============================================ */

/* Variables pour mode sombre */
:root.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-card: #333333;
    --text-primary: #f0f0f0;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --border-color: #444444;
    --shadow-dark: rgba(0, 0, 0, 0.5);
    
    /* Conserver les couleurs d'accent */
    --primary-emerald: #10B981;
    --accent-gold: #FFD700;
    --earth-brown: #8B4513;
}

/* ============================================
   BODY & HTML
   ============================================ */
html.dark-mode,
body.dark-mode {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.dark-mode .header,
.dark-mode .navbar {
    background: var(--bg-secondary) !important;
    border-bottom: 2px solid var(--accent-gold);
}

.dark-mode .nav-menu a {
    color: var(--text-primary) !important;
}

.dark-mode .nav-menu a:hover {
    color: var(--accent-gold) !important;
}

.dark-mode .logo h1 {
    color: var(--primary-emerald) !important;
}

.dark-mode .tagline {
    color: var(--accent-gold) !important;
}

/* Boutons de langue en mode sombre */
.dark-mode .language-selector .lang-btn {
    background: var(--bg-card) !important;
    color: #e8e8e8 !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .language-selector .lang-btn:hover {
    background: var(--primary-emerald) !important;
    color: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
}

.dark-mode .language-selector .lang-btn.active {
    background: var(--primary-emerald) !important;
    color: var(--accent-gold) !important;
    border-color: var(--accent-gold) !important;
    font-weight: 700;
}

/* Menu hamburger en mode sombre */
.dark-mode .nav-menu {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-top: 1px solid var(--border-color) !important;
}

.dark-mode .nav-menu li a {
    color: #e8e8e8 !important;
    padding: 12px 15px;
    border-radius: 8px;
    display: block;
    transition: all 0.3s ease;
}

.dark-mode .nav-menu li a:hover {
    color: var(--accent-gold) !important;
    background: var(--bg-card) !important;
}

/* ============================================
   SECTIONS
   ============================================ */
.dark-mode section {
    background: var(--bg-primary) !important;
}

.dark-mode .about-new,
.dark-mode .products,
.dark-mode .contact {
    background: var(--bg-primary) !important;
}

/* ============================================
   CARDS & BOXES
   ============================================ */
.dark-mode .product-card,
.dark-mode .mission-card,
.dark-mode .about-hero,
.dark-mode .renovation-section,
.dark-mode .about-excellence {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .product-card:hover {
    box-shadow: 0 10px 30px var(--shadow-dark) !important;
}

/* ============================================
   TEXT
   ============================================ */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--text-primary) !important;
}

.dark-mode p,
.dark-mode li,
.dark-mode span {
    color: var(--text-secondary) !important;
}

.dark-mode .section-title {
    color: var(--primary-emerald) !important;
}

.dark-mode .section-subtitle {
    color: var(--accent-gold) !important;
}

/* Amélioration des paragraphes en mode sombre */
.dark-mode .about-hero-content p,
.dark-mode .renovation-content p,
.dark-mode .excellence-content p,
.dark-mode .mission-card p {
    color: #e0e0e0 !important;
    opacity: 1 !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn-primary {
    background: linear-gradient(135deg, var(--primary-emerald), #6B8E23) !important;
    color: var(--accent-gold) !important;
}

.dark-mode .add-to-cart {
    background: linear-gradient(135deg, #004D40, #6B8E23) !important;
    color: var(--accent-gold) !important;
}

/* ============================================
   HERO SECTION
   ============================================ */
.dark-mode .hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.8)), 
                url('../images/plantation-tree.jpg') !important;
}

.dark-mode .hero-title,
.dark-mode .hero-subtitle {
    color: var(--text-primary) !important;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
}

/* ============================================
   FOOTER
   ============================================ */
.dark-mode .footer {
    background: var(--bg-secondary) !important;
    border-top: 3px solid var(--accent-gold);
}

.dark-mode .footer p,
.dark-mode .footer a {
    color: var(--text-secondary) !important;
}

.dark-mode .footer a:hover {
    color: var(--accent-gold) !important;
}

/* ============================================
   CART SIDEBAR
   ============================================ */
.dark-mode .cart-sidebar {
    background: var(--bg-secondary) !important;
    border-left: 3px solid var(--accent-gold);
}

.dark-mode .cart-header {
    background: var(--bg-card) !important;
    border-bottom: 2px solid var(--border-color);
}

.dark-mode .cart-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* ============================================
   MODAL
   ============================================ */
.dark-mode .modal-content {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

.dark-mode .modal-header {
    border-bottom: 2px solid var(--border-color);
}

/* ============================================
   FORMS & INPUTS
   ============================================ */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: var(--text-muted) !important;
}

/* ============================================
   ABOUT / NOTRE HISTOIRE SECTION
   ============================================ */
.dark-mode .about-new {
    background: var(--bg-primary) !important;
}

/* Forcer les couleurs en mode sombre avec !important */
.dark-mode .about-hero-content h3 {
    color: var(--accent-gold) !important;
}

.dark-mode .about-year {
    color: white !important;
    background: linear-gradient(135deg, var(--accent-gold), var(--primary-emerald)) !important;
    font-weight: 700;
}

.dark-mode .about-hero-content p {
    color: #e8e8e8 !important;
    line-height: 1.8;
}

.dark-mode .renovation-content h3,
.dark-mode .excellence-content h3 {
    color: var(--accent-gold) !important;
}

.dark-mode .excellence-content h4 {
    color: var(--accent-gold) !important;
}

.dark-mode .renovation-content p,
.dark-mode .excellence-content p {
    color: #e8e8e8 !important;
    line-height: 1.8;
}

/* Timeline text */
.dark-mode .timeline-content {
    background: var(--bg-card) !important;
}

.dark-mode .timeline-content h4 {
    color: var(--accent-gold) !important;
}

.dark-mode .timeline-content p {
    color: #e0e0e0 !important;
}

/* Mission cards */
.dark-mode .mission-card h4 {
    color: var(--accent-gold) !important;
}

.dark-mode .mission-card p {
    color: #e0e0e0 !important;
}

/* Gallery */
.dark-mode .about-gallery h3 {
    color: var(--accent-gold) !important;
}

.dark-mode .gallery-caption {
    color: #e8e8e8 !important;
}

/* ============================================
   TIMELINE
   ============================================ */
.dark-mode .timeline-item {
    background: var(--bg-card) !important;
}

.dark-mode .timeline-dot {
    background: var(--accent-gold) !important;
}

/* ============================================
   GALLERY
   ============================================ */
.dark-mode .gallery-item {
    background: var(--bg-card) !important;
}

.dark-mode .gallery-caption {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   TABLES
   ============================================ */
.dark-mode table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

.dark-mode th {
    background: var(--primary-emerald) !important;
    color: white !important;
}

.dark-mode td {
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.dark-mode tr:hover {
    background: var(--bg-secondary) !important;
}

/* ============================================
   HIGHLIGHT BOXES
   ============================================ */
.dark-mode .highlight-box {
    background: var(--bg-card) !important;
    border-color: var(--accent-gold) !important;
    color: var(--text-primary) !important;
}

/* ============================================
   BADGES
   ============================================ */
.dark-mode .product-badge,
.dark-mode .excellence-badge {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
}

/* ============================================
   IMAGES - Légère réduction de luminosité
   ============================================ */
.dark-mode img {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.dark-mode img:hover {
    opacity: 1;
}

/* ============================================
   MOBILE MENU
   ============================================ */
.dark-mode .mobile-menu-toggle {
    background: rgba(51, 51, 51, 0.8) !important;
    border-color: var(--accent-gold) !important;
}

.dark-mode .mobile-menu-toggle:hover {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: var(--primary-emerald) !important;
}

.dark-mode .mobile-menu-toggle span {
    background: var(--accent-gold) !important;
}

.dark-mode .mobile-menu-toggle:hover span {
    background: var(--primary-emerald) !important;
}

/* ============================================
   NEWS BANNER
   ============================================ */
.dark-mode .news-banner {
    background: linear-gradient(135deg, #3d2817, #5d3a1a) !important;
    border-color: var(--accent-gold) !important;
}

.dark-mode .news-icon {
    background: linear-gradient(135deg, var(--accent-gold), var(--primary-emerald)) !important;
}

.dark-mode .news-content {
    color: var(--text-primary) !important;
}

.dark-mode .news-content h3 {
    color: var(--accent-gold) !important;
}

.dark-mode .news-content p {
    color: var(--text-secondary) !important;
}

.dark-mode .news-content strong {
    color: var(--accent-gold) !important;
}

.dark-mode .news-content em {
    color: var(--primary-emerald) !important;
}

.dark-mode .news-close {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: var(--accent-gold) !important;
    color: var(--accent-gold) !important;
}

.dark-mode .news-close:hover {
    background: var(--accent-gold) !important;
    color: var(--bg-primary) !important;
}

/* ============================================
   NEWS SECTION (Carrousel)
   ============================================ */
.dark-mode .news-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d3d2f 100%) !important;
}

.dark-mode .news-wrapper {
    background: var(--bg-secondary) !important;
    background-image: 
        linear-gradient(#2a2a2a, #2a2a2a),
        linear-gradient(135deg, #10B981, #FFD700, #6B8E23) !important;
    box-shadow: 0 20px 60px rgba(255, 215, 0, 0.2) !important;
}

.dark-mode .news-wrapper::before {
    background: var(--bg-secondary) !important;
}

.dark-mode .news-item {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .news-item:hover {
    border-color: var(--accent-gold) !important;
}

.dark-mode .news-title {
    color: var(--accent-gold) !important;
}

.dark-mode .news-text {
    color: var(--text-secondary) !important;
}

.dark-mode .news-meta {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: var(--bg-primary) !important;
}

.dark-mode .carousel-btn {
    background: linear-gradient(135deg, #10B981, #0d9468) !important;
    border-color: var(--accent-gold) !important;
}

.dark-mode .carousel-btn:hover {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: var(--bg-primary) !important;
}

.dark-mode .news-dot {
    background: #444444 !important;
}

.dark-mode .news-dot.active {
    background: linear-gradient(135deg, #10B981, #6B8E23) !important;
    border-color: var(--accent-gold) !important;
}

.dark-mode .news-dot:hover {
    background: var(--accent-gold) !important;
}

/* ============================================
   TRANSITIONS SMOOTH
   ============================================ */
html,
body,
.header,
.navbar,
section,
.product-card,
.mission-card,
.cart-sidebar,
.modal-content {
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.dark-mode-toggle {
    transition: all 0.3s ease !important;
}

.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-color: var(--primary-emerald) !important;
    color: var(--bg-primary) !important;
}