/*
===================================================
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 DÉCALAGE PC 💥 */
    margin: 130px auto 0 auto; /* ⬅️ Modification ici : DÉFINIT LA MARGE HAUTE FIXE */
    /* 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 #fff;
    padding-bottom: 5px;
}



/*
===================================================
RÈGLES D'ADAPTATION (MEDIA QUERIES) - CORRECTIONS MOBILE
===================================================
*/
@media (max-width: 768px) {

    /* Règle générale pour le texte mobile */
    body {
        font-size: 16px !important;
        line-height: 1.6;
    }

    .bio-lists,
    .bio-lists p,
    .bio-lists ul,
    .bio-lists li,
    .bio-lists a {
        font-size: 1em !important;
        line-height: 1.6;
    }

    /* Aligne le titre H2 */
    header h2 {
        margin: 15px 0 10px 0 !important;
        padding: 0 !important;
    }

    /* Navigation mobile */
    nav.main-nav {
        display: block !important; 
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Bouton hamburger */
    #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: none !important; /* plus de ligne grise */
        background-color: white !important;
        position: relative;
        z-index: 20;
    }

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

    /* Menu actif centré */
    .menu-links.menu-active {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0;
        padding-bottom: 15px;
        border-bottom: none !important; /* plus de ligne fantôme */
    }

    /* Liens du menu */
    .menu-links.menu-active a {
        margin: 0 auto !important;
        padding: 8px 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Langue et Instagram */
    .lang-switcher,
    .instagram-link {
        margin: 8px auto !important;
        padding: 8px 0;
        display: block;
        width: fit-content;
        text-align: center;
        border: none !important;
        background: none !important;
    }

    .lang-switcher {
        font-size: 12px !important;
        margin-bottom: 15px !important;
    }

    .instagram-link {
        margin-top: 15px !important;
        padding-top: 15px;
    }
}