/* =========================================
   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;
    }
    
    /* AJOUT : 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;
    }
}