/* =========================================
   RESPONSIVE DESIGN COMPLÉMENTAIRE
   ========================================= */

/* Ajustements généraux pour tablettes */
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }
}

/* Ajustements pour mobiles (< 768px) */
@media (max-width: 768px) {
    
    /* Typographie Mobile plus petite */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    
    .hero-content p { font-size: 1rem !important; }
    
    section {
        padding: 50px 0;
    }
    
    .full-screen-section {
        padding: 60px 20px;
    }

    /* Ajustement des grilles services/projets */
    .services-centered, .projects-grid {
        gap: 30px;
    }
    
    .service-card {
        max-width: 100%;
    }
    
    /* Footer en une seule colonne */
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    /* Centrage forcé du logo footer sur mobile */
    .footer-col img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .footer-col ul {
        padding: 0;
    }
}

/* =========================================
   CORRECTIF : PETITS PC PORTABLES ET ZOOM 
   ========================================= */
/* Cible les écrans d'ordinateur (menu complet) mais de faible hauteur (ex: PC 13" ou zoom navigateur) */
@media (min-width: 1025px) and (max-height: 850px) {
    
    /* Empêche le titre de remonter sous le menu fixe en forçant l'alignement vers le haut avec une marge */
    section#home,
    .hero.full-screen-section {
        padding-top: 190px !important; 
        justify-content: flex-start !important; 
    }

    .hero-content {
        margin-top: 10px !important;
    }

    /* Réduit la taille du logo sur l'accueil pour libérer l'espace visuel */
    .hero-logo-img {
        height: 75px !important;
        margin-bottom: 15px !important;
    }

    /* Réduit légèrement le gros titre pour l'adapter à l'écran écrasé */
    .hero-content h1 {
        font-size: 2.5rem !important;
        margin-bottom: 10px !important;
    }
    
    .hero-content p {
        font-size: 1.1rem !important;
        margin-top: 10px !important;
    }
}

/* =========================================
   OPTIMISATION MENU MOBILE (DESIGN & COULEURS)
   ========================================= */
/* Cette section gère l'affichage compact ET les couleurs (Bleu/Blanc/Or) */

@media (max-width: 1024px) {
    
    /* 1. COULEURS : Fond Bleu Marine */
    .nav-links {
        background-color: var(--bleu-marine) !important; /* Fond Bleu Marine force */
        padding-top: 80px !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    /* --- CORRECTIF UNIVERSEL COULEURS --- */
    /* Cible TOUS les cas possibles (Header normal, Header scrollé, Pages internes) */
    header .nav-links li a,
    header.scrolled .nav-links li a,
    .navbar .nav-links li a {
        color: #FFFFFF !important; /* BLANC PUR OBLIGATOIRE */
        text-shadow: none !important;
        font-size: 1.1rem !important;
        display: block;
        padding: 2px 0;
        transition: color 0.3s ease;
    }

    /* 2. SURVOL & SÉLECTION : Texte en Doré */
    /* Cible le survol dans tous les cas de figure */
    header .nav-links li a:hover,
    header.scrolled .nav-links li a:hover,
    .nav-links li a:active,
    .nav-links li a:focus {
        color: var(--color-gold-main) !important; /* Devient Doré au toucher */
    }

    /* 3. LAYOUT COMPACT (Pour tout voir sur un écran) */
    .nav-links li {
        margin: 8px 0 !important;
        width: 100%;
        text-align: center;
    }

    /* 4. BOUTON DEVIS SPÉCIFIQUE */
    .nav-links .btn-nav-devis {
        margin-top: 10px !important;
        padding: 10px 30px !important;
        display: inline-block !important;
        border: 1px solid var(--color-gold-main) !important;
        color: var(--color-gold-main) !important; /* Texte doré par défaut */
    }
    
    /* Bouton Devis au survol/toucher */
    .nav-links .btn-nav-devis:hover {
        background-color: var(--color-gold-main) !important;
        color: var(--color-white) !important;
    }

    /* 5. COULEUR DE LA CROIX (Fermeture du menu) */
    /* Quand le menu est ouvert (fond bleu), la croix doit être blanche pour être visible */
    .hamburger.active .bar {
        background-color: var(--color-white) !important;
    }
    
    /* Si le header est blanc (pages internes), on s'assure que le burger est visible AVANT de cliquer */
    header.scrolled .bar,
    header:not(.scrolled) .bar {
        /* On laisse le JS ou le CSS principal gérer la couleur du burger FERMÉ */
        /* Mais on s'assure que le burger OUVERT est blanc (géré ci-dessus par .active) */
    }
}

/* SÉCURITÉ : Pour les très petits téléphones (iPhone SE, écrans anciens) */
@media (max-width: 1024px) and (max-height: 700px) {
    .nav-links { padding-top: 70px !important; }
    .nav-links li { margin: 5px 0 !important; }
    .nav-links li a { font-size: 1rem !important; }
}

/* =========================================
   DÉSACTIVATION ANIMATIONS SUR MOBILE
   ========================================= */
@media (max-width: 768px) {
    /* On force tous les éléments "reveal" à être visibles immédiatement 
       sans transition ni déplacement */
    .reveal, 
    .reveal.active {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        visibility: visible !important;
    }
}