/* ===========================================================================
   glossary_mobile.css
   ---------------------------------------------------------------------------
   Adaptation mobile de la page /optics_glossary (glossary.php) et des
   pages de definition individuelles.

   A INCLURE AVEC header_mobile.css, qui fournit le logo et le menu.
   Ce fichier ne traite que le contenu.

   PROBLEMES TRAITES
   1. L'index alphabetique (A..W) s'etale sur 3 lignes : police et
      espacement prevus pour le desktop.
   2. Les definitions n'occupent que la moitie de la largeur : padding
      cumule du .col-12 (15px), du .alert (20px) et du <ul> (40px par
      defaut du navigateur), soit ~75px perdus de chaque cote.
   3. Police du texte trop grande pour un petit ecran.

   PORTEE : tout est dans @media (max-width: 991px).
            Au-dessus, AUCUNE regle ne s'applique.

   Appele par css/cssGlossaryMobile.php
   =========================================================================== */

@media (max-width: 991px) {

/* ---------------------------------------------------------------------------
   1. CONTENEURS : recuperer la largeur perdue
   --------------------------------------------------------------------------- */

    #content > #container.row.margin-0 {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }

    #content #container > .col-12,
    #content #container .bloc_index {
        padding-left: 8px;
        padding-right: 8px;
        width: 100%;
        max-width: 100%;
    }

    #content .bloc_index h1 {
        font-size: 1.6rem;
        text-align: center;
        margin: 10px 0 4px 0;
    }


/* ---------------------------------------------------------------------------
   2. INDEX ALPHABETIQUE : deux lignes au lieu de trois
   ---------------------------------------------------------------------------
   Le <p> contient les lettres separees par des espaces. On le passe en
   flex pour maitriser l'espacement, et on reduit les marges verticales
   du bloc (margin-top-50 / margin-bottom-50 = 100px perdus).
   --------------------------------------------------------------------------- */

    #ordre_alphabetique {
        margin-top: 20px !important;
        margin-bottom: 0px !important;
    }

    #ordre_alphabetique p {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px 6px;
        margin: 0;
    }

    #ordre_alphabetique a {
        display: inline-block;
        min-width: 26px;
        padding: 3px 2px;
        font-size: 15px;
        font-weight: bold;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }


/* ---------------------------------------------------------------------------
   3. BLOCS DE DEFINITIONS
   ---------------------------------------------------------------------------
   Mesures a 373px : #affichage_infos_glossaire porte 50px de marge de
   chaque cote + 16px de padding, .alert 8px, ul.listes 16px, li 10px.
   Total : environ 100px perdus a gauche et le bloc deborde a droite
   (scrollWidth 414 pour un ecran de 373).
   --------------------------------------------------------------------------- */

    #affichage_infos_glossaire {
        width: auto !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
    }

    #affichage_infos_glossaire .divParLettre,
    #affichage_infos_glossaire .alert {
        padding: 10px 8px;
        margin-bottom: 14px;
        margin-left: 0;
        margin-right: 0;
        width: auto;
        max-width: 100%;
    }

    #affichage_infos_glossaire h2 {
        font-size: 1.3rem;
        margin: 0 0 4px 0;
    }

    #affichage_infos_glossaire hr {
        margin: 4px 0 8px 0;
    }

    /* Le retrait par defaut du <ul> coute 40px : ramene a 16px. */
    #affichage_infos_glossaire ul.listes {
        list-style-position: outside;
        padding-left: 16px;
        padding-right: 0;
        margin: 0;
    }

    /* .margin-bottom-10 sur les <li> ajoute aussi une marge gauche. */
    #affichage_infos_glossaire ul.listes > li {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 8px 0 !important;
        text-align: left;
        overflow-wrap: break-word;
    }

    #affichage_infos_glossaire ul.listes > li b {
        font-size: 13.5px;
    }


/* ---------------------------------------------------------------------------
   4. BOUTON RETOUR EN HAUT
   ---------------------------------------------------------------------------
   Defini en <style> inline dans glossary.php : bottom 75px, right 25px,
   padding 15px. Trop volumineux et trop haut sur mobile.
   --------------------------------------------------------------------------- */

    #btn-back-to-top {
        bottom: 16px !important;
        right: 12px !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        opacity: 0.85;
    }


/* ---------------------------------------------------------------------------
   5. FILET DE SECURITE
   --------------------------------------------------------------------------- */

    #content img,
    #content svg {
        max-width: 100%;
        height: auto;
    }

    #content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

}


/* ---------------------------------------------------------------------------
   TRES PETITS ECRANS
   --------------------------------------------------------------------------- */

@media (max-width: 400px) {

    #ordre_alphabetique a {
        min-width: 22px;
        font-size: 14px;
        padding: 2px 1px;
    }

    #ordre_alphabetique p {
        gap: 3px 4px;
    }

}


/* ---------------------------------------------------------------------------
   4. Largeur de #content entre 992 et 1449px
   ---------------------------------------------------------------------------
   Tout ce qui precede est dans @media (max-width: 991px). Or default.css
   impose min-width:1450px a #content : entre 992 et 1449px la page deborde
   sans qu'aucune regle ne la rattrape.

   Mesure a 1300px sur optics_glossary2-* avant correction :
     #content 0 -> 1450, debordement de 150px
     header et menu-wrapper debordent aussi de 150px
   --------------------------------------------------------------------------- */

@media (max-width: 1449px) {

    #content {
        min-width: 0 !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }

    body {
        overflow-x: hidden;
    }
}