/* Réinitialisation basique et polices */
body {
    font-family: 'trebuchet ms', Arial, sans-serif; /* NOUVELLE POLICE */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
    overflow: visible; /* Modifié pour le menu qui peut déborder */
    padding: 0 20px;
}

/* Header */
header {
    background: #333; /* Couleur de secours si l'image ne charge pas */
    color: #fff;
    padding: 20px 0; /* Ajuste si besoin */
    text-align: center;
    border-bottom: 3px solid #77aaff;
    /* Ajout pour l'image de fond */
    background-image: url('images/logo_grand.png'); /* Assure-toi d'avoir une version grand format */
    background-size: cover; /* Couvre tout l'espace */
    background-position: center center; /* Centre l'image */
    background-repeat: no-repeat; /* Évite la répétition */
    position: relative; /* Pour positionner l'overlay */
    min-height: 250px; /* Hauteur minimale pour l'en-tête avec l'image - VITAL POUR CLS */
    display: flex; /* Pour centrer le contenu verticalement */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* S'assure que padding/border sont inclus dans la hauteur/largeur */
}

    header::before { /* Overlay pour la lisibilité */
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); /* Noir semi-transparent */
        z-index: 1; /* S'assure qu'il est sous le texte */
    }

    header #logo { /* Masque l'ancienne balise img du logo */
        display: none; /* Cette ligne doit être présente pour cacher le <img id="logo"> */
    }

    header h1, header .sous-titre {
        position: relative; /* Pour les placer au-dessus de l'overlay */
        z-index: 2;
        margin: 0; /* Réinitialise les marges par défaut */
        padding: 5px 10px; /* Ajoute un peu de padding si le texte touche les bords */
    }

    header h1 {
        font-size: 3em; /* Ajuste la taille du titre */
        font-family: 'century gothic', Arial, sans-serif; /* NOUVELLE POLICE */
    }

    header .sous-titre {
        font-size: 1.2em; /* Taille par défaut pour le sous-titre */
        margin-top: 5px;
        font-family: 'trebuchet ms', Arial, sans-serif; /* POLICE CORPS DU TEXTE */
    }

/* --- Navigation et Menu Burger --- */
#main-nav {
    background: #444;
    color: #fff;
    padding: 5px 0; /* Un peu moins de padding pour le burger */
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 70px; /* VITAL POUR CLS - Hauteur minimale fixe pour la barre de navigation */
    box-sizing: border-box; /* S'assure que padding/border sont inclus dans la hauteur totale */
    display: flex; /* Assure que le conteneur flex empêche les éléments de flotter */
    align-items: center; /* Centre verticalement le contenu de la nav */
    justify-content: space-between; /* Assure que le burger est bien espacé */
}

    #main-nav .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%; /* S'assure que le container prend toute la largeur disponible */
    }

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Par défaut en ligne pour desktop */
    height: auto; /* Laisser la hauteur s'adapter au contenu sur desktop */
}

    .nav-menu li {
        display: inline-block;
    }

        .nav-menu li a {
            color: #fff; /* Style existant - non modifié */
            text-decoration: none; /* Style existant - non modifié */
            padding: 15px 1em; /* Ligne à modifier */
            display: block; /* Style existant - non modifié */
            transition: background-color 0.3s ease; /* Style existant - non modifié */
            text-align: left; /* Style existant - non modifié */
            border-bottom: 1px solid #555; /* Style existant - non modifié */
        }

            .nav-menu li a:hover,
            .nav-menu li a.active {
                background: #77aaff;
                color: #fff;
            }

.nav-toggle {
    display: none; /* Caché par défaut sur desktop */
    background: transparent;
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
}

.hamburger-icon {
    display: block;
    width: 25px;
    height: 3px;
    background: white;
    position: relative;
    transition: background 0.3s ease-in-out;
}

    .hamburger-icon::before,
    .hamburger-icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: white;
        position: absolute;
        left: 0;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    }

    .hamburger-icon::before {
        top: -8px;
    }

    .hamburger-icon::after {
        top: 8px;
    }

/* Styles pour le menu ouvert (via JS) */
.nav-toggle[aria-expanded="true"] .hamburger-icon {
    background: transparent; /* Barre du milieu disparaît */
}

    .nav-toggle[aria-expanded="true"] .hamburger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .nav-toggle[aria-expanded="true"] .hamburger-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }


/* Main content */
main {
    padding: 20px 0;
}

    main section {
        background: #fff;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }

    main h2, main h3 {
        color: #333;
        margin-top: 0;
        font-family: 'century gothic', Arial, sans-serif; /* NOUVELLE POLICE */
    }

.image-responsive {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px 0;
    border-radius: 5px;
}

.bouton {
    display: inline-block;
    background: #77aaff;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 10px;
    transition: background-color 0.3s ease;
}

    .bouton:hover {
        background: #5588dd;
    }

/* Footer */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}

    footer p {
        margin: 5px 0;
    }

    footer a {
        color: #77aaff; /* Votre couleur bleue accent */
        text-decoration: none; /* Enlève le soulignement par défaut */
        font-weight: bold; /* Pour le rendre plus visible */
        transition: color 0.3s ease; /* Transition douce au survol */
    }

        footer a:hover {
            color: #5588dd; /* Une couleur un peu plus foncée au survol */
            text-decoration: underline; /* Souligne au survol pour l'interactivité */
        }

/* --- Diaporama --- */
#diaporama-section {
    padding-bottom: 30px; /* Espace pour les dots */
}

.slideshow-container {
    max-width: 800px; /* Ajustez selon vos images */
    position: relative;
    margin: auto;
    overflow: hidden; /* Cache les images qui ne sont pas actives */
    border-radius: 5px;
    min-height: 450px; /* Hauteur minimale pour le diaporama pour éviter le CLS */
}

.slide {
    display: none; /* Caché par défaut */
    width: 100%;
}

    .slide.active { /* Sera géré par JS */
        display: block;
    }

    .slide img {
        width: 100%;
        vertical-align: middle; /* Pour enlever l'espace sous l'image */
        max-height: 450px; /* Limite la hauteur pour éviter que ce soit trop grand */
        object-fit: cover; /* S'assure que l'image couvre bien, peut rogner un peu */
        /* aspect-ratio: 16 / 9; */ /* Ex: Pour des images en 16:9, aide à stabiliser la hauteur */
    }

.slide-caption {
    text-align: center;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: calc(100% - 24px); /* Prend en compte le padding */
    left: 0; 
    color: #f2f2f2;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    font-size: 15px;
    border-radius: 0 0 4px 4px;
}

/* Boutons Précédent/Suivant */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px; /* Moitié de la hauteur du padding */
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.3);
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

/* Indicateurs (dots) */
.dots-container {
    text-align: center;
    padding-top: 15px;
}

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .dot.active, .dot:hover { /* .active sera géré par JS */
        background-color: #717171;
    }

/* Animation de fondu */
.fade {
    animation-name: fadeEffect;
    animation-duration: 1.5s;
}

@keyframes fadeEffect {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

/* Styles spécifiques pour la page professeurs */
.professeur-card {
    background: #fdfdfd;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .professeur-card h3 {
        color: #77aaff;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 1.8em;
        font-family: 'century gothic', Arial, sans-serif; /* NOUVELLE POLICE */
    }

    .professeur-card img {
        width: 150px; /* Taille fixe pour les photos de profil */
        height: 150px;
        border-radius: 50%; /* Rendre les images rondes */
        object-fit: cover; /* Assure que l'image couvre l'espace */
        border: 3px solid #77aaff;
        margin-bottom: 15px;
    }

/* Styles spécifiques pour la page contact */
.contact-details {
    margin-bottom: 30px;
    line-height: 1.8;
}

    .contact-details p {
        margin: 5px 0;
        font-size: 1.1em;
    }

    .contact-details a {
        color: #77aaff;
        text-decoration: none;
        font-weight: bold;
    }

        .contact-details a:hover {
            text-decoration: underline;
        }

/* Styles pour la section image et carte */
.location-note {
    font-size: 1em; /* Légèrement plus petit que le texte normal */
    font-weight: bold; /* Pas en gras */
    text-align: left; /* Ou center si vous préférez */
    margin-top: 10px;
    margin-bottom: 15px; /* Espace avant les visuels */
    color: #555; /* Un gris un peu plus doux */
}

.location-visuals {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
    gap: 20px; /* Espace entre l'image et la carte */
    align-items: stretch; /* Les enfants s'étirent pour avoir la même hauteur */
    margin-top: 10px; /* Espace au-dessus de cette section */
}

.location-image,
.location-map-container {
    flex: 1; /* Chaque élément prendra une part égale de l'espace disponible */
    min-width: 280px; /* Empêche les éléments de devenir trop étroits avant de wrapper */
    background: #fff; /* Assure un fond si l'image/carte tarde à charger */
    border-radius: 5px; /* Coins arrondis cohérents */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombre portée cohérente */
    overflow: hidden; /* S'assure que les coins arrondis s'appliquent bien à l'image/iframe */
}

    .location-image img {
        display: block;
        width: 100%;
        height: 450px; /* Hauteur fixe désirée */
        object-fit: cover; /* S'assure que l'image couvre l'espace, peut rogner */
        border-radius: 5px; /* Au cas où le parent n'a pas overflow:hidden */
    }

    .location-map-container .google-map {
        margin-top: 0; /* Réinitialise la marge du .google-map car il est maintenant dans un flex-item */
        height: 100%; /* Prend toute la hauteur du conteneur parent flex */
        border-radius: 5px; /* Pour que l'iframe respecte les coins */
        overflow: hidden; /* Assure que l'iframe ne dépasse pas */
    }

    .location-map-container iframe {
        display: block;
        width: 100%;
        height: 450px; /* Hauteur fixe désirée, identique à l'image */
        /* border:0; est déjà en attribut style */
    }


/* Styles pour l'image du planning */
.planning-image-container {
    text-align: center; /* Centre l'image */
    margin-top: 20px;
    margin-bottom: 20px;
    background: #fff;
    padding: 10px; /* Petit padding autour de l'image */
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.planning-image {
    max-width: 100%; /* S'assure que l'image ne dépasse pas la largeur de son conteneur */
    height: auto; /* Maintient le ratio d'aspect */
    display: block; /* Supprime l'espace sous l'image */
    margin: 0 auto; /* Centre l'image si elle est plus petite que le conteneur */
    border-radius: 3px; /* Légers coins arrondis */
}


/* ----- Responsive Design ----- */

/* Pour les tablettes et mobiles (point de rupture pour le menu burger) */
@media (max-width: 768px) {
    header {
        min-height: 180px; /* Ajuste la hauteur sur mobile */
    }

        header h1 {
            font-size: 2.2em; /* Réduit la taille du titre */
        }

        header .sous-titre {
            font-size: 1.1em;
        }

    .nav-toggle {
        display: block; /* Afficher le bouton burger */
        z-index: 1001; /* Au-dessus du menu */
    }

    .nav-menu {
        position: fixed; /* Ou absolute, selon le comportement désiré */
        inset: 0 0 0 30%; /* Couvre 70% de l'écran à partir de la droite */
        flex-direction: column;
        padding: min(20vh, 10rem) 2em; /* Espace en haut et sur les côtés */
        background: hsl(0 0% 0% / 0.8); /* Noir semi-transparent */
        backdrop-filter: blur(1rem); /* Effet de flou derrière */
        transform: translateX(100%); /* Caché à droite par default */
        transition: transform 350ms ease-out;
        z-index: 999; /* En dessous du toggle mais au-dessus du reste */
    }

        .nav-menu[data-visible="true"] {
            transform: translateX(0%); /* Le menu s'affiche */
        }

        .nav-menu li {
            display: block;
            width: 100%;
        }

            .nav-menu li a {
                color: #fff;
                text-decoration: none;
                padding: 15px 1em; /* MODIFIÉ ICI - anciennement 15px 0 */
                display: block;
                transition: background-color 0.3s ease;
                text-align: left;
                border-bottom: 1px solid #555;
            }

            .nav-menu li:last-child a {
                border-bottom: none;
            }

    .container {
        width: 95%;
        padding: 0 10px;
    }

    .slideshow-container {
        max-width: 100%;
        min-height: 250px; /* Ajuste min-height du diaporama pour mobile */
    }

    .slide img {
        max-height: 300px;
        /* aspect-ratio: 16 / 9; /* Si vous utilisez un ratio fixe, ajustez pour mobile si besoin */
    }

    .professeur-card img {
        width: 120px;
        height: 120px;
    }

    .professeur-card h3 {
        font-size: 1.5em;
    }

    /* Ajustements pour la section image et carte sur tablettes et mobiles */
    .location-visuals {
        flex-direction: column; /* Empile les éléments verticalement */
    }

    .location-image,
    .location-map-container {
        /* flex-basis: 100%; est implicite avec flex-direction: column et flex:1 */
        margin-bottom: 15px; /* Espace entre l'image et la carte quand elles sont empilées */
    }

    .location-visuals > div:last-child { /* Enlève la marge du dernier élément pour ne pas avoir de double espace */
        margin-bottom: 0;
    }


    .location-image img,
    .location-map-container iframe {
        height: 300px; /* Réduit la hauteur de la carte et de l'image sur mobile/tablette */
    }
}

/* Pour les mobiles (encore plus petits) */
@media (max-width: 480px) {
    header {
        min-height: 150px;
    }

        header h1 {
            font-size: 1.8em;
        }

        header .sous-titre {
            font-size: 0.9em;
        }

    .nav-menu {
        inset: 0 0 0 20%; /* Menu prend plus de place */
    }

    .slideshow-container {
        min-height: 200px; /* Encore plus petit sur très petits écrans */
    }

    .slide img {
        max-height: 250px;
    }

    .prev, .next {
        font-size: 16px;
        padding: 12px;
    }

    .dot {
        height: 12px;
        width: 12px;
    }

    .professeur-card img {
        width: 100px;
        height: 100px;
    }

    .professeur-card h3 {
        font-size: 1.3em;
    }

    /* Ajustements pour la section image et carte sur petits mobiles */
    .location-image img,
    .location-map-container iframe {
        height: 250px; /* Réduit encore la hauteur pour les très petits écrans */
    }
}