/* FOND ET BASE  */
body {
    margin: 0; /* Pas les marges extérieures */
    padding: 0; /* Pas de espacements intérieurs */
    background: url('Back.jpg') repeat fixed; /* Image de fond répétée et fixe */
    background-size: 1000px; /* Largeur de l'image de fond */
    font-family: Arial, sans-serif;
    min-height: 100vh; /* La page occupe toute la hauteur de l'écran */
}




/* MENU */
.menuColl {
    position: relative; /* Positionne relative sans modifier la place des autres éléments. */
    top: 0; /* La position haute du menu collé */
    z-index: 1000; /* Place le menu au-dessus de tout le reste */
    background-color: #9370DB; /* Couleur de fond violette */
    height: 60px; /* Hauteur fixe de la barre de menu */
    width: 100%; /* Le menu prend toute la largeur */
    border: 3px solid black; /* Bordure noire de taille 3 pixels */
    display: flex; /* Mode flexible pour l'alignement */
    justify-content: center; /* Centre les liens (horizontal) */
    align-items: center; /* Centre les liens (vertical) */
    flex-wrap: wrap; /* Permet aux liens de passer à la ligne sur mobile */
    gap: 20px; /* Espace de 20 pixels entre chacun */
}

.menuColl a {
    color: white; 
    text-decoration: none; /* Pas de soulignement des liens */
    font-weight: bold; /* Texte en gras */
    font-size: 16px; 
    padding: 5px 10px; /* Espacement autour du texte des liens */
}



/* TITRES */
h1, h2 {
    color: white; 
    text-shadow: 2px 2px 4px black; /* Ajoute une ombre noire */
    text-align: center; 
    font-size: 2.5rem; /* Définit une grande taille identique pour h1 et h2 (02switch n'arrête pas d'affichier une erreur lorsque je mets 2 fois h1)*/
    margin: 30px 0; /* Marge de 30px en haut et en bas */
}



/* CENTRAGE DES VIDEOS */
main {
    display: flex; /* Mode flexible */
    flex-direction: column; /* Aligne les éléments (vertical)*/
    align-items: center; 
    padding: 20px; /* Espacement intérieur */
}

section {
    width: 100%; /* Occupe toute la largeur */
    max-width: 900px; /* Limite la largeur maximale à 900 pixels */
    text-align: center; 
    margin-bottom: 50px; /* Espace de 50px sous chaque section */
}

figure {
    margin: 0 auto; /* Centre le bloc média (horizontal) */
    position: relative; /* Point de repère pour le placement interne */
    width: 100%; /* Prend toute la largeur de sa section */
}


#video-web figure {
    padding-bottom: 55%; /* Cadre vidéo */
    height: 0; /* La hauteur réelle est créée par le padding */
}

#video-web iframe {
    position: absolute; 
    top: 0; /* Aligne en haut */
    left: 0; /* Aligne à gauche */
    width: 100%; /* Remplit toute la largeur du cadre */
    height: 100%; /* Remplit toute la hauteur du cadre */
    border: none; /* Pas de bordure par défaut de YouTube */
}


video {
    width: 100%; /* S'adapte à la largeur du parent */
    max-width: 900px; /* Ne dépasse jamais la largeur de 900px */
    height: auto; /* Conserve les proportions d'origine */
    border-radius: 8px; /* Arrondi les coins de la vidéo */
}



/* AUDIO, IMAGES ET TEXTES */
img {
    max-width: 100%; /* L'image ne dépasse jamais de l'écran */
    height: auto; 
    border: 3px solid black; /* Bordure noire de taille 3px */
    border-radius: 10px; 
}

audio {
    width: 100%; 
    max-width: 500px; /* Limite la taille sur les grands écrans */
}





p {
    background: rgba(255, 255, 255, 0.4); /* Fond blanc transparent (60% opacité) */
    padding: 30px; /* Espacement entre le texte et le bord du fond */
    border-radius: 10px; 
    text-align: justify; 
}





/*  TELEPHONE */
@media (max-width: 768px) {
    body { background-size: 500px; } /* Fond plus dense pour téléphone */
    h1, h2 { font-size: 1.8rem; } /* Réduit la taille des titres sur téléphone */
    .menuColl { height: auto; padding: 10px; } /* Ajuste le menu si les liens s'empilent */
    
    /* L'IMAGE CLIQUABLE */
    .map-container {
        width: 100%;
        overflow-x: auto; /* Active le défilement horizontal pour garder les coordonnées intactes */
        display: block; /* S'assure que le bloc est bien considéré comme un conteneur */

    }

    .map-container img {
        /* Force la taille originale pour que les <area> coords ne bougent pas */
        max-width: none !important; 
        width: 736px !important; 
        height: auto;
    }
}