/* Styles globaux pour toutes les pages */

/* Force Dark Theme for All Users */
:root {
    /* Override theme variables to force dark mode */
    --base: #222 !important;
    --base-text: #ddd !important;
    --primary: #0d47a1 !important;
    --toc-text: #64b5f6 !important;
    --color-hero: #181818 !important;
    --lighten-1: rgba(0, 0, 0, 0.125) !important;
    --lighten-2: rgba(0, 0, 0, 0.25) !important;
    --lighten-3: rgba(0, 0, 0, 0.5) !important;
    --darken-1: rgba(255, 255, 255, 0.125) !important;
    --darken-2: rgba(255, 255, 255, 0.25) !important;
    --darken-3: rgba(255, 255, 255, 0.5) !important;
    --footer-bg: #000 !important;
    --footer-fg: #777 !important;
}

/* Ensure body and html have dark background */
html {
    background: #222 !important;
}

body {
    background: #222 !important;
    color: #ddd !important;
}

/* Force social icons filter for dark theme */
.follow a.social {
    -webkit-filter: grayscale(.75) !important;
    filter: grayscale(.75) !important;
}

/* Force button styles for dark theme */
a.btn, button, input[type=button], input[type=reset], input[type=submit], span.btn {
    background: none !important;
}

/* Force proper text colors for readability */
h1, h2, h3, h4, h5, h6 {
    color: #ddd !important;
}

p, div, span {
    color: #ddd !important;
}

/* Ensure links are visible on dark backgrounds */
a, a:visited {
    color: #64b5f6 !important;
}

/* Override link colors on blue/primary backgrounds */
body > header a, 
body > header a:visited,
.cta-section a,
.cta-section a:visited,
.primary a,
.primary a:visited,
.services-cta a,
.services-cta a:visited,
.services-cta,
.services-btn,
.services-btn-primary,
.services-btn-secondary,
.contact-card.highlight .contact-cta,
.consultation-btn,
section.primary a,
section.primary a:visited,
.jumbo a,
.jumbo a:visited,
.info a,
.info a:visited,
[style*="background-color:#1976d2"] a,
[style*="background-color:#1976d2"] a:visited,
[style*="background: var(--primary)"] a,
[style*="background: var(--primary)"] a:visited {
    color: #fff !important;
}

/* Force white text in blue sections */
.primary, 
section.primary,
.jumbo,
.info {
    color: #fff !important;
}

.primary *,
section.primary *,
.jumbo *,
.info * {
    color: #fff !important;
}

/* Menu links specifically - all navigation items */
body > header nav a,
body > header nav a:visited,
body > header nav li a,
body > header nav li a:visited,
body > header nav ul li a,
body > header nav ul li a:visited {
    color: #fff !important;
    opacity: 0.9 !important;
}

body > header nav a:hover,
body > header nav li a:hover {
    color: #fff !important;
    opacity: 1 !important;
}

/* Active menu item styling - only for Hugo's active detection */
body > header nav li.active a {
    border-bottom: 2px solid #fff !important;
    opacity: 1 !important;
}

/* Ensure non-active menu items don't have underline */
body > header nav li:not(.active) a {
    border-bottom: none !important;
}

/* Override any light backgrounds */
.hero .description {
    background: #181818 !important;
    color: #ddd !important;
}

/* Footer - Masquer la ligne "FOLLOW US" sur toutes les pages */
body > footer .footer-header {
    display: none !important;
}

/* Services - Masquer la section témoignages temporairement */
.services-testimonials {
    display: none !important;
}

/* Améliorations mobile globales */
@media (max-width: 768px) {
    /* Header mobile - amélioration navigation */
    body > header .top-content {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 1rem;
    }
    
    body > header .logo {
        text-align: center;
        padding: 0.5rem 0;
    }
    
    body > header .logo img {
        height: 2rem;
    }
    
    /* Menu mobile plus lisible */
    body > header nav ul li {
        margin-right: 0.5rem;
    }
    
    body > header nav a {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Textes plus lisibles sur mobile */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.4 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Contenu principal - padding mobile */
    body > main > section {
        margin: 1rem 0 !important;
        padding: 2rem 1rem !important;
    }
    
    /* Footer mobile */
    body > footer {
        padding: 1rem 0.5rem !important;
    }
    
    body > footer .footer-footer {
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    
    body > footer .footer-footer div {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
}

@media (max-width: 480px) {
    /* Très petit écran - ajustements fins */
    body > header nav a {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    h2 {
        font-size: 1.3rem !important;
    }
    
    body > main > section {
        padding: 1.5rem 0.75rem !important;
    }
}