/* ============================================
   MODE CLAIR (LIGHT MODE)
   Fond blanc avec couleurs sénégalaises
   ============================================ */

/* Light Mode Variables */
body.light-mode {
    /* Senegalese Colors - Light Mode Adjusted */
    --color-primary: #008751;
    --color-primary-light: #00a862;
    --color-primary-dark: #006b3f;
    --color-secondary: #c9282d;
    --color-secondary-light: #e63946;
    --color-accent: #d4a017;
    --color-accent-glow: rgba(212, 160, 23, 0.3);
    --color-success: #00c853;
    --color-warning: #ff9800;
    
    /* Light Neutral Colors */
    --color-bg: #ffffff;
    --color-bg-light: #f8f9fa;
    --color-bg-card: #ffffff;
    --color-text: #1a1a1a;
    --color-text-muted: #5a5a5a;
    --color-border: #e0e0e0;
}

/* Body Light Mode */
body.light-mode {
    background-color: var(--color-bg);
    color: var(--color-text);
}

/* Navigation Light Mode */
body.light-mode .nav-main {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body.light-mode .nav-main.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-mode .nav-link {
    color: var(--color-text-muted);
}

body.light-mode .nav-link:hover,
body.light-mode .nav-link.active {
    color: var(--color-primary);
}

body.light-mode .nav-toggle span {
    background: var(--color-primary);
}

/* Hero Section Light Mode */
body.light-mode .hero {
    background: linear-gradient(135deg, 
        rgba(248, 249, 250, 1) 0%, 
        rgba(255, 255, 255, 1) 100%
    );
}

body.light-mode .hero-background {
    opacity: 0.6;
}

body.light-mode .grid-overlay {
    background-image: 
        linear-gradient(rgba(212, 160, 23, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.08) 1px, transparent 1px);
}

body.light-mode .signal-waves {
    background: radial-gradient(
        ellipse at center,
        rgba(212, 160, 23, 0.12) 0%,
        rgba(0, 135, 81, 0.08) 50%,
        transparent 70%
    );
}

body.light-mode .hero-badge {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.15), 
        rgba(201, 40, 45, 0.15)
    ) !important;
    border: 2px solid var(--color-accent) !important;
    color: var(--color-text);
    box-shadow: 0 4px 20px rgba(212, 160, 23, 0.2);
}

body.light-mode .hero-description {
    color: var(--color-text-muted);
}

/* Buttons Light Mode */
body.light-mode .btn-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: #ffffff;
    border-color: var(--color-primary);
}

body.light-mode .btn-primary:hover {
    background: var(--color-primary-light);
    box-shadow: 0 8px 30px rgba(0, 135, 81, 0.3);
}

body.light-mode .btn-secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text);
}

body.light-mode .btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(0, 135, 81, 0.05);
}

body.light-mode .btn-outline:hover {
    border-color: var(--color-text);
    /*color: var(--color-text);*/
    color: var(--color-accent);
}

body.light-mode .btn-outline {
    background: var(--color-text);
    color: #ffffff;

}

/* Sections Light Mode */
body.light-mode .mission-section,
body.light-mode .news-section,
body.light-mode .newsletter-section {
    background: var(--color-bg-light);
}

body.light-mode .content-section {
    background: #ffffff;
}

/* Cards Light Mode */
body.light-mode .mission-card,
body.light-mode .news-card,
body.light-mode .partner-card,
body.light-mode .content-article,
body.light-mode .sidebar-card,
body.light-mode .info-card,
body.light-mode .donation-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.light-mode .mission-card:hover,
body.light-mode .news-card:hover,
body.light-mode .partner-card:hover {
    box-shadow: 0 10px 40px rgba(212, 160, 23, 0.15);
}

/* Mission Icons Light Mode */
body.light-mode .mission-icon,
body.light-mode .info-icon {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #ffffff;
}

/* News Categories Light Mode */
body.light-mode .news-category {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #ffffff !important;
}

/* Page Header Light Mode */
body.light-mode .page-header {
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
}

body.light-mode .page-header-bg {
    background-image: 
        linear-gradient(rgba(212, 160, 23, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212, 160, 23, 0.05) 1px, transparent 1px);
}

body.light-mode .page-badge {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.1), 
        rgba(212, 160, 23, 0.1)
    ) !important;
    color: var(--color-text);
}

/* Section Tags Light Mode */
body.light-mode .section-tag {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.1), 
        rgba(212, 160, 23, 0.1)
    );
    color: var(--color-primary);
    border: 2px solid var(--color-accent) !important;
}

/* Forms Light Mode */
body.light-mode .form-input,
body.light-mode .form-textarea,
body.light-mode .form-select {
    background: #ffffff;
    border: 2px solid var(--color-border);
    color: var(--color-text);
}

body.light-mode .form-input:focus,
body.light-mode .form-textarea:focus,
body.light-mode .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 135, 81, 0.1) !important;
}

body.light-mode .form-label {
    color: var(--color-text);
}

/* CTA Section Light Mode */
body.light-mode .cta-section {
    background: linear-gradient(135deg, 
        var(--color-primary) 0%, 
        var(--color-primary-dark) 50%, 
        var(--color-secondary) 100%
    );
    color: #ffffff;
}

body.light-mode .cta-content h2,
body.light-mode .cta-content p {
    color: #ffffff;
}

/* Footer Light Mode */
body.light-mode .footer {
    background: var(--color-bg-light);
    border-top: 3px solid;
    border-image: linear-gradient(90deg, 
        var(--color-primary), 
        var(--color-accent), 
        var(--color-secondary)
    ) 1;
}

body.light-mode .footer-tagline,
body.light-mode .footer-links a,
body.light-mode .footer-bottom {
    color: var(--color-text-muted);
}

body.light-mode .footer-links a:hover {
    color: var(--color-primary);
}

body.light-mode .footer-social a {
    background: #ffffff;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

body.light-mode .footer-social a:hover {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #ffffff !important;
}

/* Gallery Light Mode */
body.light-mode .gallery-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

/* Login Card Light Mode */
body.light-mode .login-card {
    background: #ffffff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
}

/* Timeline Light Mode */
body.light-mode .timeline {
    border-left-color: var(--color-accent);
}

body.light-mode .timeline-marker {
    background: var(--color-accent) !important;
    border-color: #ffffff;
}

body.light-mode .timeline-content h3 {
    color: var(--color-primary);
}

body.light-mode .timeline-content p {
    color: var(--color-text-muted);
}

/* Value Cards Light Mode */
body.light-mode .value-card {
    background: var(--color-bg-card);
}

body.light-mode .value-card h3 {
    color: var(--color-primary);
}

body.light-mode .value-card p {
    color: var(--color-text-muted);
}

/* Gov Position Light Mode */
body.light-mode .gov-position {
    background: #ffffff;
    border: 1px solid var(--color-border);
}

body.light-mode .gov-position.president {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.1), 
        rgba(201, 40, 45, 0.1)
    ) !important;
    border: 2px solid var(--color-accent) !important;
}

body.light-mode .gov-position h4 {
    color: var(--color-primary);
}

body.light-mode .gov-position p {
    color: var(--color-text-muted);
}

/* Filter Buttons Light Mode */
body.light-mode .filter-btn,
body.light-mode .category-btn {
    background: #ffffff;
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
}

body.light-mode .filter-btn:hover,
body.light-mode .category-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.light-mode .filter-btn.active,
body.light-mode .category-btn.active {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #ffffff !important;
}

/* Stat Boxes Light Mode */
body.light-mode .stat-box {
    background: #ffffff;
    border: 2px solid var(--color-border);
}

/* Content Article Titles Light Mode */
body.light-mode .content-article h2,
body.light-mode .content-article h3,
body.light-mode .mission-card h3,
body.light-mode .news-content h3,
body.light-mode .partner-card h3 {
    color: var(--color-primary);
}

body.light-mode .content-article p,
body.light-mode .mission-card p,
body.light-mode .news-content p,
body.light-mode .partner-card p {
    color: var(--color-text-muted);
}

/* Section Titles Light Mode */
body.light-mode .section-title,
body.light-mode .page-title {
    color: var(--color-text);
}

body.light-mode .page-subtitle {
    color: var(--color-text-muted);
}

/* Pagination Light Mode */
body.light-mode .pagination-btn {
    background: #ffffff;
    border: 2px solid var(--color-border);
    color: var(--color-text);
}

body.light-mode .pagination-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.light-mode .pagination-info {
    color: var(--color-text-muted);
}

/* Map Placeholder Light Mode */
body.light-mode .map-placeholder {
    background: #ffffff;
    border: 3px solid;
    border-image: linear-gradient(135deg, 
        var(--color-primary), 
        var(--color-accent), 
        var(--color-secondary)
    ) 1;
}

/* Back to Top Light Mode */
body.light-mode .back-to-top {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)) !important;
    color: #ffffff !important;
}

body.light-mode .back-to-top:hover {
    background: var(--color-accent) !important;
}

/* Payment Badges Light Mode */
body.light-mode .payment-badge {
    background: #ffffff;
    border: 2px solid var(--color-border);
    color: var(--color-text-muted);
}

body.light-mode .payment-badge:hover {
    background: var(--color-accent);
    color: #ffffff;
}

/* Sidebar CTA Light Mode */
body.light-mode .sidebar-cta {
    background: linear-gradient(135deg, 
        var(--color-primary) 0%, 
        var(--color-secondary) 100%
    ) !important;
    color: #ffffff;
}

body.light-mode .sidebar-cta h3,
body.light-mode .sidebar-cta p {
    color: #ffffff;
}

/* Links Light Mode */
body.light-mode .news-link,
body.light-mode .section-link {
    color: var(--color-primary);
}

body.light-mode .news-link:hover,
body.light-mode .section-link:hover {
    color: var(--color-accent);
}

body.light-mode .form-link a {
    color: var(--color-primary);
}

body.light-mode .form-link a:hover {
    color: var(--color-accent);
}

/* Contact Form Container Light Mode */
body.light-mode .contact-form-container {
    background: #ffffff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Archive Categories Light Mode */
body.light-mode .archive-categories {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.05), 
        rgba(212, 160, 23, 0.05),
        rgba(201, 40, 45, 0.05)
    );
}

/* Senegalese Enhancements Light Mode Adjustments */
body.light-mode .hero::before,
body.light-mode .hero::after {
    opacity: 0.15;
}

body.light-mode .senegal-accent {
    opacity: 0.12;
}

/* Key Figures Light Mode */
body.light-mode .key-figure {
    border-bottom: 1px solid var(--color-border);
}

body.light-mode .figure-number {
    background: linear-gradient(135deg, 
        var(--color-accent), 
        var(--color-primary), 
        var(--color-secondary)
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

body.light-mode .figure-label {
    color: var(--color-text-muted);
}

/* Iconic Places Light Mode */
body.light-mode .iconic-places li {
    border-bottom: 1px solid var(--color-border);
}

body.light-mode .iconic-places strong {
    color: var(--color-primary);
}

body.light-mode .iconic-places p {
    color: var(--color-text-muted);
}

/* Newsletter Light Mode */
body.light-mode .newsletter-section {
    background: linear-gradient(135deg, 
        rgba(0, 135, 81, 0.05) 0%, 
        rgba(212, 160, 23, 0.03) 50%,
        rgba(201, 40, 45, 0.05) 100%
    );
}

body.light-mode .newsletter-content h2 {
    color: var(--color-text);
}

body.light-mode .newsletter-content p {
    color: var(--color-text-muted);
}

/* Strong Text in Light Mode */
body.light-mode strong {
    color: var(--color-primary);
}

/* Modal Light Mode */
body.light-mode .modal-overlay {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .modal-content {
    background: #ffffff;
    border: 2px solid var(--color-border);
}

body.light-mode .modal-content h3 {
    color: var(--color-primary);
}

body.light-mode .modal-content p {
    color: var(--color-text-muted);
}

body.light-mode .modal-close {
    background: var(--color-primary);
    color: #ffffff;
}





/*
!* Logo visibility - Light mode by default *!
.logo-dark,
#logoDark,
#footerLogoDark {
    display: none !important;
    opacity: 0;
}

.logo-light,
#logoLight,
#footerLogoLight {
    display: block !important;
    opacity: 1;
}

!* Theme toggle icons - Light mode default (show moon) *!
.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}


body:not(.light-mode) .logo-dark,
body:not(.light-mode) #logoDark,
body:not(.light-mode) #footerLogoDark {
    display: block !important;
    opacity: 1;
}

body:not(.light-mode) .logo-light,
body:not(.light-mode) #logoLight,
body:not(.light-mode) #footerLogoLight {
    display: none !important;
    opacity: 0;
}

body:not(.light-mode) .sun-icon {
    display: block;
}

body:not(.light-mode) .moon-icon {
    display: none;
}

!* Smooth transitions *!
.logo-dark,
.logo-light,
#logoDark,
#logoLight,
#footerLogoDark,
#footerLogoLight {
    transition: opacity 0.3s ease;
}

.sun-icon,
.moon-icon {
    transition: opacity 0.3s ease;
}
*/

/* Logo visibility - Light mode by default */
.logo-dark,
#logoDark,
#footerLogoDark {
    display: none !important;
    opacity: 0;
}

.logo-light,
#logoLight,
#footerLogoLight {
    display: block !important;
    opacity: 1;
}

/* Theme toggle icons - Light mode default (show moon) */
.sun-icon {
    display: none;
}

.moon-icon {
    display: block;
}

/* Dark mode overrides */
body:not(.light-mode) {
    /* Dark mode colors */
    --color-bg: #0a0e12;
    --color-text: #e2e8f0;
    --color-text-muted: #a0aec0;
    --color-bg-card: #1a202c;
    --color-bg-light: #2d3748;
    --color-border: #2d3748;

    background-color: var(--color-bg);
    color: var(--color-text);
}

body:not(.light-mode) .logo-dark,
body:not(.light-mode) #logoDark,
body:not(.light-mode) #footerLogoDark {
    display: block !important;
    opacity: 1;
}

body:not(.light-mode) .logo-light,
body:not(.light-mode) #logoLight,
body:not(.light-mode) #footerLogoLight {
    display: none !important;
    opacity: 0;
}

body:not(.light-mode) .sun-icon {
    display: block;
}

body:not(.light-mode) .moon-icon {
    display: none;
}

/* Smooth transitions */
.logo-dark,
.logo-light,
#logoDark,
#logoLight,
#footerLogoDark,
#footerLogoLight {
    transition: opacity 0.3s ease;
}

.sun-icon,
.moon-icon {
    transition: opacity 0.3s ease;
}

/* ============================================
   THEME TOGGLE ICONS - FIX COMPLET
   ============================================ */

/* MODE CLAIR (défaut) → Afficher LUNE 🌙 */
.theme-toggle .sun-icon {
    display: none !important;
}

.theme-toggle .moon-icon {
    display: block !important;
}

/* MODE SOMBRE → Afficher SOLEIL ☀️ */
body:not(.light-mode) .theme-toggle .sun-icon {
    display: block !important;
}

body:not(.light-mode) .theme-toggle .moon-icon {
    display: none !important;
}