/*
===================================================
STYLES SPÉCIFIQUES (contact.css)
===================================================
*/

/* Styles pour le bloc de contenu de contact */
.contact-content {
    /* Centrage du bloc de contenu */
    max-width: 800px;
    margin: 0 auto;
	
   padding: 20px 20px 20px 20px;
    text-align: center; /* Centrage des blocs de texte */

    /* Typographie */
    font-family: Verdana, sans-serif;
    font-size: 12px;
    color: #666666;
    line-height: 1.4;
}

.contact-content h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 25px;
    color: #666666;
}

.contact-content .intro {
    /* Style de la description */
    margin-bottom: 25px;
    line-height: 1.6em;
}

.contact-content .email-link {
    /* Styles du lien e-mail */
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none; /* Annule la décoration par défaut */
    border-bottom: 2px solid #FDC29B; /* Simule l'effet souligné avec la couleur du lien actif */
    display: inline-block;
    padding: 5px 0;
    
    /* Couleur du lien */
    color: #FDC29B;
}

.contact-content .email-link:hover {
    color: #666666; /* Le survol passe au gris */
    border-bottom: 2px solid #666666;
}


/*
===================================================
MEDIA QUERY (max-width: 768px) - CORRECTION MOBILE
===================================================
*/
@media (max-width: 768px) {
	
    /* ⭐ 1. CORRECTION CRITIQUE : Force la navigation à s'étendre et sortir du mode Flexbox PC ⭐ */
    nav.main-nav {
        display: block !important; /* Force la navigation à prendre toute la largeur, sortant du mode Flexbox PC */
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 2. Assure que le bouton toggle est visible et centré */
    .menu-toggle {
        display: block !important;
        width: 100%;
        text-align: center !important; 
        padding: 10px 0;
        margin: 0 auto 5px auto; 
        cursor: pointer;
        font-size: 24px; 
        border-bottom: 1px solid #ccc;
        position: relative; 
        z-index: 20; /* Priorité pour le clic */
    }

    /* 3. Masquer le menu par défaut */
    .menu-links {
        display: none !important;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* 4. Afficher et centrer le menu ACTIF (Corrige le décalage) */
    .menu-links.menu-active {
        display: flex !important;
        flex-direction: column; /* CRITIQUE : Aligner les éléments en colonne */
        align-items: center; /* CRITIQUE : Centrer les éléments dans la colonne */
        width: 100%;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
    }
    
/* 5. Séparer la règle des LIENS du menu des règles des SWITCHERS (Correction de l'espacement) */

/* a) Règle des LIENS du menu (supprime les marges verticales) */
.menu-links.menu-active a {
    /* 💥 CRITIQUE : Neutralise la marge verticale excessive qui crée trop d'espace */
    margin: 0 auto !important; 
    
    padding: 8px 0; /* Vous pouvez ajuster le 8px ici pour affiner l'espacement */
    display: block; 
    width: 100%; /* Permet au lien de prendre toute la largeur de l'élément flex parent (colonne) */
    text-align: center; 
}

/* b) Règle des SWITCHERS/INSTAGRAM (Ils peuvent garder leur marge pour être séparés du menu) */
.lang-switcher, 
.instagram-link {
    margin: 8px auto !important; /* Laissez-leur la marge verticale si vous voulez qu'ils soient séparés */
    display: block; 
    width: fit-content;
    text-align: center; 
}
    
    /* Ajustement du contenu de la page Contact pour mobile (si nécessaire) */
    .contact-content {
        padding-top: 50px; /* Ajoute un padding pour ne pas être caché par le header */
    }
}