@charset "utf-8";
/* CSS Document */

/* ==========================================
   ADAPTATION SMARTPHONE (Écrans < 768px)
   ========================================== */
@media screen and (max-width: 767px) {

    /* 1. Ajustement global du corps de page */
    body {
        height: auto; /* On annule le height: 200% qui force un scroll infini */
    }

    /* 2. Le Menu de navigation */
    #menu {
        height: auto; /* Le menu peut prendre plusieurs lignes si nécessaire */
    }
    
    #menu ul {
        display: flex;
        flex-direction: column; /* On empile les boutons les uns sous les autres */
    }

    #menu li {
        float: none; /* On annule le float:left qui mettait les éléments en ligne */
        width: 100%; /* Chaque bouton prend toute la largeur */
    }

    #menu li a {
        width: auto; /* On oublie les 242px fixes qui dépassent sur mobile */
        box-sizing: border-box;
        padding: 12px; /* Des boutons plus grands, plus faciles à cliquer avec le doigt */
    }

    /* Gestion des sous-menus sur mobile (évite le survol instable) */
    #menu li ul {
        position: static; /* On remet le sous-menu dans le flux normal */
    }
    
    /* Désactivation du zoom de texte au survol (le hover n'existe pas vraiment sur tactile) */
    #menu :hover {
        font-size: 17px; 
    }

    /* 3. Le Pied de page (Footer) */
    #pied {
        position: static; /* Au lieu de flotter en bas, il se met sagement à la fin de la page */
        width: 100%; /* Fini les 1918px de large ! */
        margin-left: 0; /* On annule les marges négatives de centrage PC */
        left: 0;
        box-sizing: border-box;
        height: auto; /* Laisse le texte respirer */
    }

    /* 4. Diaporama (Slideshow) */
    .slideshow {
        width: 100%; /* Le diaporama s'adapte à la largeur du téléphone */
        max-width: 300px; /* On lui donne une taille max raisonnable pour mobile */
        height: auto;
        margin: 0 auto; /* Centrage */
    }
    
    .slideshow ul {
        height: auto;
    }
}