/* ==========================================================================
   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) {
    /* Sécurité : neutralise toute règle sitewide imposant une largeur minimale de
       960px (héritée d'un design non responsive), pour que le menu et la page
       puissent réellement rétrécir sur mobile/tablette. */
    header, .slider, footer, html, body {
        min-width: 0;
    }
    /* CORRECTIF MAJEUR : la classe .inner (largeur fixe 950px, sans media query,
       dans css/style.css) est le conteneur utilisé par PRESQUE TOUT le site —
       header, bandeau titre (.slider), fil d'Ariane, contenu principal (.main),
       pied de page. Comme elle ne rétrécissait jamais, chaque page restait figée
       à 950px de large sur mobile : le contenu apparaissait tassé à gauche avec
       une grande zone blanche à droite, quelle que soit la page du site. On la
       rend fluide ici (100% de large, jusqu'à 950px maximum) pour que TOUTES les
       pages redeviennent responsives, pas seulement le menu. */
    .inner {
        width: 100%;
        max-width: 950px;
        box-sizing: border-box;
    }
    /* header .inner a ses propres réglages (un peu plus large, position relative
       pour placer le bouton menu) : cette règle plus spécifique prend le dessus
       sur la règle générale .inner ci-dessus, spécifiquement pour le header. */
    header .inner {
        position: relative;
        width: 100%;
        max-width: 1023px;
        box-sizing: border-box;
    }
    /* CORRECTIF : le pied de page (colonnes "Streampartner", "Vous cherchez des
       réponses...", "Nous défendons nos produits") est prévu en desktop avec
       une hauteur FIXE (260px pour le bloc, 220px par colonne) pour que les
       3 colonnes flottantes tiennent bien côte à côte sur une seule ligne.
       En les empilant les unes sous les autres sur mobile (comme il se doit),
       cette hauteur fixe restait active malgré tout : chaque colonne gardait
       220px de haut même si son contenu tenait sur 80px, ce qui créait un
       grand vide blanc entre chaque bloc du pied de page. On repasse tout en
       hauteur automatique ici pour que les colonnes s'empilent sans espace vide. */
    footer .footer {
        height: auto;
    }
    footer .footer ul,
    footer .footer div div {
        width: 100%;
        float: none;
        height: auto;
        margin: 0 0 20px 0;
    }
    #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%;
    }

    /* Formulaires et colonnes à deux volets (section + aside) : css/phone.css
       gère déjà ces cas, mais UNIQUEMENT en dessous de 482px (son media
       attribute). Entre 482px et 1023px, ces règles n'existaient nulle part et
       les formulaires (contact, commande...) débordaient. On reprend ici les
       mêmes règles éprouvées de phone.css, mais sur toute la plage mobile et
       tablette (jusqu'à 1023px), pour combler ce trou. */
    aside {
        display: none;
    }
    .main section {
        width: 100%;
        float: none;
    }
    form fieldset label {
        width: 100%;
    }
    form input, form select {
        width: 97% !important;
        float: none;
    }
    form fieldset .radio-buttons {
        width: auto !important;
    }

    /* Ancien système de grille (.span1 à .span6, ex: fiches techniques,
       gateway) : largeurs fixes en em, jamais fluides. Même trou que
       ci-dessus (phone.css les corrige seulement sous 482px). */
    .span1, .span2, .span3, .span4, .span5, .span6 {
        width: 100%;
        float: none;
    }

    /* Bloc "D'autres besoins ?" en bas de plusieurs pages : titre en largeur
       fixe 740px flottant à côté d'une icône positionnée en absolu. Sur
       mobile/tablette le titre débordait ; l'icône, positionnée pour un
       grand écran, se serait retrouvée mal placée par-dessus le texte. */
    .cant-find-answers h1, .cant-find-answers h3 {
        width: 100%;
    }
    .cant-find-answers img {
        display: none;
    }

    /* webinar.html : bandeau de fond décoratif en largeur fixe 1200px (aucun
       contenu dedans) qui provoquait un défilement horizontal sur toute la
       page en mobile/tablette. On le masque simplement à ces largeurs. */
    #webinar-bg-band {
        display: none;
    }
}