/* --- Styles de base et mise en page générale --- */
body {
    margin: 0;
    background: #D7E2EF;
    min-height: 100vh; /* S'assure que le corps prend toute la hauteur de la fenêtre */
    display: flex; /* Utilise Flexbox pour centrer le contenu principal */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    font-family: verdana, helvetica, sans-serif; /* Police de base */
}

/* Conteneur extérieur - gère la largeur globale */
#outer {
    width: 95vw; /* Occupe 95% de la largeur de la fenêtre */
    max-width: 1400px; /* Largeur maximale sur très grands écrans */
    position: relative; /* Base pour le positionnement d'inner si besoin, mais ici plus pour le flux */
    padding: 10px; /* Petite marge intérieure */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

/* Conteneur intérieur - gère la disposition des éléments */
#inner {
    position: relative; /* Indispensable pour positionner .bgtext en absolu à l'intérieur */
    width: 100%; /* Prend toute la largeur de #outer */
    min-height: 500px; /* Hauteur minimale, ajustable */
    padding: 20px; /* Rembourrage intérieur */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
    background: transparent; /* Pas de fond, les éléments sont par-dessus le body */

    /* Flexbox pour les liens */
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne */
    justify-content: space-around; /* Distribue les liens avec de l'espace autour */
    align-items: flex-start; /* Aligne les liens en haut de leur ligne */
    gap: 20px; /* Espace entre les éléments flexibles */
}

/* --- Texte d'arrière-plan (Prénoms) --- */
.bgtext {
    font-size: clamp(28px, 10vw, 80px); /* Taille de police adaptative (min, préférée en vw, max) */
    color: #E6F9FF; /* Couleur très claire */
    font-family: verdana, helvetica, sans-serif;
    position: absolute; /* Positionné par rapport à #inner */
    top: 50%; /* Centre verticalement */
    left: 50%; /* Centre horizontalement */
    transform: translate(-50%, -50%); /* Déplace le texte pour un centrage parfait */
    width: 100%; /* S'étend sur toute la largeur */
    text-align: center; /* Centre le texte lui-même */
    line-height: 1.1; /* Ajuste l'espacement des lignes */
    z-index: 100; /* Assure qu'il est au-dessus des liens */
    pointer-events: none; /* TRÈS IMPORTANT : Permet aux clics de traverser le texte et d'atteindre les liens en dessous */
    user-select: none; /* Empêche la sélection du texte par l'utilisateur */
    white-space: pre-wrap; /* Maintient les sauts de ligne du HTML */
    word-break: break-word; /* Casse les mots longs si nécessaire */
}

/* --- Styles des liens --- */
/* Styles communs à tous les blocs de liens */
div#text1, div#text2, div#text3, div#text5 {
    color: #B91C57; /* Couleur des liens */
    font-family: verdana, helvetica, sans-serif;
    position: relative; /* Optionnel, si vous voulez positionner des éléments à l'intérieur de chaque lien */
    z-index: 100; /* Assure que les liens sont cliquables et au-dessus du texte d'arrière-plan */
    flex-basis: 45%; /* Par défaut, les liens essaieront de prendre 45% de la largeur du conteneur (deux colonnes) */
    box-sizing: border-box; /* Inclut le padding/border dans la largeur */
    text-align: center; /* Centre le texte de chaque lien */
    padding: 10px; /* Rembourrage autour du texte du lien */
}

/* Tailles de police responsives spécifiques pour chaque lien */
div#text1 { font-size: clamp(18px, 2.5vw, 29px); order: 1; }
div#text2 { font-size: clamp(25px, 4vw, 60px); order: 3; }
div#text3 { font-size: clamp(25px, 4vw, 60px); order: 2; }
div#text5 { font-size: clamp(18px, 2.5vw, 29px); order: 4; }

/* Styles des liens (couleur, soulignement) */
div#inner a {
    text-decoration: none;
    color: #B91C57;
    display: inline-block; /* Permet d'appliquer padding/margin si besoin */
}

div#inner a:link,
div#inner a:visited {
    text-decoration: none;
}

div#inner a:hover {
    text-decoration: none;
}

/* Effets au survol des liens (le texte descriptif) */
div#inner a span {
    display: none; /* Cache le texte descriptif par défaut */
}

div#inner a:hover span {
    display: block; /* Affiche le texte descriptif au survol */
    position: relative; /* Positionnement relatif au lien */
    background: none;
    font-size: clamp(12px, 1.2vw, 18px); /* Taille de police responsive pour le span */
    /* Les 'top' et 'left' spécifiques pour chaque span:hover ne sont plus nécessaires avec cette nouvelle structure */
    /* Ils peuvent être ajustés si vous voulez un décalage très précis */
}


/* --- Media Queries (adaptations pour différentes tailles d'écran) --- */

/* Pour les écrans plus petits (ex: tablettes en portrait, grands mobiles) */
@media (max-width: 768px) {
    #outer {
        width: 98vw; /* Prend un peu plus de largeur */
    }

    #inner {
        flex-direction: column; /* Les liens s'empilent verticalement */
        align-items: center; /* Centrer les liens empilés */
        gap: 15px; /* Ajuste l'espace entre les liens */
        min-height: 400px; /* Ajuste la hauteur minimale */
    }

    /* Les liens prennent presque toute la largeur sur les petits écrans */
    div#text1, div#text2, div#text3, div#text5 {
        flex-basis: 90%; /* Occupe 90% de la largeur du conteneur */
        margin: 5px 0; /* Marge verticale réduite */
        font-size: clamp(16px, 4.5vw, 30px); /* Ajuste la taille des polices des liens */
    }

    .bgtext {
        font-size: clamp(35px, 15vw, 100px); /* Ajuste la taille du texte d'arrière-plan */
        top: 45%; /* Réajuste sa position */
    }
}

/* Pour les très petits écrans (ex: mobiles en portrait) */
@media (max-width: 480px) {
    .bgtext {
        font-size: clamp(28px, 18vw, 80px); /* Encore plus petit pour les mobiles */
        top: 40%;
    }
    div#text1, div#text2, div#text3, div#text5 {
        font-size: clamp(14px, 5vw, 25px); /* Taille de police des liens encore plus petite */
    }
}