/* ==========================================================================
   Menu mobile — bouton "hamburger" + navigation empilée verticalement.

   Pourquoi ce fichier : le menu d'origine (float + position absolue dans
   css/phone.css) a été conçu pour 5 liens tenant sur une seule ligne. Avec
   le lien "Exemple" en plus, les liens ne tiennent plus sur une ligne aux
   petites largeurs : le dernier lien retombe alors hors de la barre de menu
   et se retrouve affiché par-dessus l'image d'accueil, illisible.

   Les règles ci-dessous utilisent des sélecteurs par identifiant (#site-nav,
   #mobile-menu-toggle) qui l'emportent toujours sur les anciennes règles
   "nav { ... }" de css/style.css et css/phone.css, quel que soit l'ordre de
   chargement des fichiers — donc pas besoin de toucher aux anciens fichiers.
   ========================================================================== */

#mobile-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 18px;
    z-index: 30;
}
#mobile-menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 5px 0;
    background: #ffffff;
    border-radius: 2px;
}
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

@media only screen and (max-width: 1023px) {
    /* Le style de base impose une largeur minimale de 960px sur toute la page
       (header, .slider, footer, html, body), pensée pour un site non responsive.
       Sans cette neutralisation, la page ne peut jamais devenir plus étroite que
       960px, même avec les règles ci-dessous : le menu resterait décalé hors de
       l'écran sur mobile/tablette. */
    header, .slider, footer, html, body {
        min-width: 0;
    }
    /* header .inner est en largeur fixe (960px) dans le style de base : au lieu de
       s'adapter, il débordait de l'écran entre 482px et 1023px (le correctif pour
       petits écrans de css/phone.css ne s'applique qu'en dessous de 482px). On le
       rend fluide ici pour que le bouton "menu" et la navigation restent bien
       visibles, alignés dans l'écran, à toutes les largeurs de tablette/mobile. */
    header .inner {
        position: relative;
        width: 100%;
        max-width: 1023px;
        box-sizing: border-box;
    }
    #mobile-menu-toggle {
        display: block;
    }
    #site-nav {
        position: static;
        width: 100%;
        height: auto;
        float: none;
        clear: both;
        margin: 0;
        background: #333;
        display: none;
    }
    #site-nav.nav-open {
        display: block;
    }
    #site-nav > ul {
        float: none;
        display: block;
        width: 100%;
        margin: 0;
    }
    #site-nav > ul > li {
        float: none;
        display: block;
        width: 100%;
    }
    #site-nav ul li a {
        display: block;
        width: auto;
        height: auto;
        line-height: normal;
        border-right: 0;
        border-bottom: 1px solid #282828;
        box-sizing: border-box;
    }
    #site-nav .dropdown-content {
        display: block;
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        background: #2e2e2e;
        min-width: 0;
    }
    #site-nav .dropdown-content a {
        float: none;
        width: auto;
    }
    #site-nav .dropdown-content a {
        padding-left: 2em;
    }
    #site-nav .lang-selector {
        float: none;
        width: 100%;
    }
}