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

/* ⭐️ NOUVELLE RÈGLE GLOBALE : Bloque l'ajustement de la taille de police par le navigateur ⭐️ */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* 💥 CORRECTION SPÉCIFIQUE FIREFOX MOBILE (Texte trop gros) - FORCÉ GLOBALEMENT EN 13PX POUR LE MOBILE */
body {
    /* Retirer le !important ici pour qu'il soit écrasé par le 12px du PC, si on n'est pas sur mobile. */
    font-size: 100%; 
    line-height: 1.6; /* Améliore la lisibilité globale */
    
    /* Empêche le navigateur de redimensionner le texte de manière imprévue */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* CORRECTION CRITIQUE : Aligne le titre H2 avec les autres pages (mode PC) */
header h2 {
    /* 15px en haut (pour aligner le titre) + 10px en bas (espace avec le menu) */
    margin: 15px 0 10px 0 !important; 
    padding: 0 !important;
}

.bio-introduction p {
    margin-bottom: 1.5em;
    text-align: justify;
}

.bio-lists {
    /* Styles de typographie et centrage du contenu */
    font-family: Verdana, sans-serif;
    /* ⭐️ PC : Fixé à 12px ⭐️ */
    font-size: 12px;
    color: #666666;
    line-height: 1.4;
    max-width: 800px;
    margin: 0 auto;
    
    /* Correction du décalage à l'intérieur de bio-lists (padding du haut à 0px) */
    padding: 0 20px 20px 20px; 
}

.bio-lists h3 {
    /* Styles des titres (H3) */
    font-size: 1.5em; /* 1.5 * 12px = 18px sur PC */
    font-weight: bold;
    color: #666666;
    margin-top: 2.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}



/*
===================================================
RÈGLES D'ADAPTATION (MEDIA QUERIES) - CORRECTIONS MOBILE
===================================================
*/

@media (max-width: 768px) {
    
   
   /* Règle GÉNÉRIQUE (pour Chrome, Safari, etc.) */
    body {
        font-size: 16px !important; /* Base mobile acceptable pour la plupart */
        line-height: 1.6;
    }
	
    
    .bio-lists,
    .bio-lists p,
    .bio-lists ul,
    .bio-lists li,
    .bio-lists a {
        font-size: 1em !important; /* Hérite du 13px du body */
        line-height: 1.6;
    }

/* ✅ CORRECTION CRITIQUE : Force l'alignement H2 sur mobile (À INSÉRER ICI) */
    header h2 {
        margin: 15px 0 10px 0 !important;
        padding: 0 !important;
    }
    
    .bio-lists,
/* ... autres règles ... */

    /* 1. CORRECTION CRITIQUE DU DÉCALAGE : La navigation doit prendre 100% de la largeur */
    nav.main-nav { /* <-- Votre règle de navigation commence ici */
        display: block !important; 
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* 2. CORRECTION CRITIQUE : AFFICHE le bouton hamburger sur mobile (Règle plus spécifique avec ID) */
    #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; 
    }

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

    /* 3. Affichage et Centrage du Menu Actif */
    .menu-links.menu-active {
        display: flex !important; 
        flex-direction: column; 
        align-items: center; 
        width: 100%;
        padding: 0;
        margin: 0;
        padding-bottom: 15px;
        border-bottom: 1px solid #ccc;
    }
    
    /* 4. Centrage et espacement uniforme des LIENS du menu */
    .menu-links.menu-active a {
        margin: 0 auto !important; 
        padding: 8px 0;
        display: block; 
        width: 100%;
        text-align: center; 
    }
    
    /* 5. Éléments latéraux */
    .lang-switcher, 
    .instagram-link {
        margin: 8px auto !important; 
        padding: 8px 0;
        display: block; 
        width: fit-content;
        text-align: center; 
    }

    /* Règle 6: Conserve le padding réduit pour mobile */
    .bio-lists {
        padding: 0 15px 15px 15px;
    }

    /* Règle 7: Le titre H3 revient à 1.5em de la base de 13px (donc 19.5px) */
    .bio-lists h3 {
        font-size: 1.5em; 
        margin-top: 1.5em; 
        margin-bottom: 0.5em; 
    }
}