/*
 * Fichier: responsive.css
 * Description: Règles de Media Queries pour l'adaptation aux tablettes et smartphones.
 */

/* --- Media Queries (pour la réactivité) --- */

@media (max-width: 992px) {
    /* Tablette */
    .service-bloc {
        width: calc(50% - 20px); /* 2 blocs par ligne sur tablette */
    }
    
    /* Correction Pages Détaillées (Image au-dessus du texte sur tablette/petit écran) */
    .intro-flex {
        flex-direction: column; 
        gap: 20px;
    }
    .intro-image-container {
        min-width: 100%;
    }
    
    /* Correction Page À Propos */
    #propos-intro .intro-flex {
        flex-direction: column;
    }
    #propos-intro .intro-image-container {
        flex: 1 1 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }
}


/* =======================================
    BLOC CORRIGÉ POUR LE MENU MOBILE (max-width: 600px)
    ======================================= */
@media (max-width: 600px) {
    /* Smartphone */
    .service-bloc {
        width: 100%; /* 1 bloc par ligne sur mobile */
    }
    
    /* 2. Style et positionnement du menu déroulant */
    #main-nav {
        /* *** CORRECTION CLÉ : Masqué par défaut sur mobile, même SANS la classe hidden-mobile au chargement *** */
        display: none;    
        width: 100%;
        position: absolute;
        top: 70px; /* Positionnement juste sous le header fixe (70px) */
        left: 0;
        background-color: var(--couleur-secondaire);
        box-shadow: 0 5px 5px rgba(0,0,0,0.1);
        z-index: 999;
    }
    
    /* RÈGLE CLÉ : Affiche le menu lorsque la classe 'hidden-mobile' est retirée par le JS (état OUVERT) */
    #main-nav:not(.hidden-mobile) {
        display: block;
    }

    /* 1. Afficher le bouton menu */
    .menu-toggle {
        display: block;    
        position: absolute;
        top: 15px;    
        right: 5%;    
    }

    /* 3. Organisation des liens du menu déroulant (liste verticale) */
    #main-nav ul {
        flex-direction: column;    
        gap: 0;
        padding: 10px 0;
        border-top: 1px solid var(--couleur-dynamique);
        align-items: flex-start;    
    }

    #main-nav ul li {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--couleur-accent-2);
    }
    
    #main-nav a {
        display: block;    
        padding: 15px 5%;    
    }

    /* 4. Correction du décalage sur mobile (hauteur du header fixe) */
    body {
        padding-top: 70px;    
    }

    /* 5. Réorganisation du header (logo à gauche, bouton à droite) */
    #main-header {
        flex-direction: row;    
        justify-content: space-between;
        text-align: left;
    }
    .logo {
        margin-bottom: 0;
    }

    /* NOUVEL AJUSTEMENT SPÉCIFIQUE DES TITRES DE PAGE SUR SMARTPHONE */
    .header-titre {
        /* Encore moins de padding sur mobile */
        padding: 5px 0; 
    }
    
    .header-titre h2 {
        /* Réduction de la taille de la police à 1.4em sur mobile */
        font-size: 1.2em; 
    }
}