/* ===========================================================================
   faq_mobile.css
   ---------------------------------------------------------------------------
   Adaptation mobile de la page /faq (faq.php).

   A INCLURE AVEC header_mobile.css, qui fournit le logo et le menu.
   Ce fichier ne traite que la MISE EN PAGE.

   ---------------------------------------------------------------------------
   AUCUNE TAILLE DE POLICE DANS CE FICHIER

   Toutes les tailles sont desormais definies dans css/oc_typography.css,
   charge en dernier et commun aux cinq pages annexes (guide, glossary,
   videos, faq, tutorials).

   Les regles de taille qui se trouvaient ici ont ete retirees : leurs
   selecteurs commencaient par #content, donc un identifiant, et
   l'emportaient en specificite sur oc_typography.css quel que soit l'ordre
   de chargement. C'est ce qui maintenait les questions a 14px et les
   reponses a 13.5px sous 992px, au lieu des 22px et 18px de la charte.

   Ne PAS reintroduire de font-size ici. Pour modifier une taille, editer
   oc_typography.css.

   ---------------------------------------------------------------------------
   PROBLEMES TRAITES PAR CE FICHIER
   1. Chaque question est un .col-12 contenant un .alert Bootstrap
      (1rem de padding) : beaucoup d'espace perdu.
   2. Le margin-top du .bloc_index passe de 41px a 0 des qu'une reponse
      s'ouvre, ce qui fait sauter toute la page. Valeur figee.
   3. transition:all anime toutes les proprietes a chaque ouverture.

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

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

@media (max-width: 991px) {

/* ---------------------------------------------------------------------------
   1. CONTENEURS
   --------------------------------------------------------------------------- */

    #content .row.margin-0 {
        margin: 0 !important;
        width: 100%;
    }

    #content .col-12 {
        padding-left: 6px;
        padding-right: 6px;
        max-width: 100%;
    }

    /* Le margin-top calcule du .bloc_index passe de 41px a 0 a la
       premiere ouverture d'une reponse : toute la page remonte. Valeur
       figee pour supprimer le saut. */
    #content .bloc_index {
        display: flow-root;
        margin-top: 8px !important;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    /* Chaque question est enveloppee dans un .alert Bootstrap. */
    #content .alert {
        padding: 8px 8px;
        margin-bottom: 8px;
    }

    /* transition:all anime toutes les proprietes a chaque ouverture.
       Seule la hauteur doit l'etre. */
    #content .collapse,
    #content .collapsing {
        transition: height 0.35s ease !important;
    }


/* ---------------------------------------------------------------------------
   2. TITRE DE PAGE
   ---------------------------------------------------------------------------
   Taille et alignement : voir oc_typography.css.
   --------------------------------------------------------------------------- */

    #content .bloc_index h1 {
        line-height: 1.25;
        margin: 12px 0 8px 0;
    }


/* ---------------------------------------------------------------------------
   3. QUESTIONS
   ---------------------------------------------------------------------------
   Taille, poids et couleur : voir oc_typography.css.
   --------------------------------------------------------------------------- */

    #content .div-collapse {
        padding: 2px 0;
        cursor: pointer;
    }

    #content .div-collapse h3 {
        padding-right: 4px;
        overflow-wrap: break-word;
    }

    #content .div-collapse hr {
        margin: 4px 0 0 0;
    }


/* ---------------------------------------------------------------------------
   4. REPONSES
   ---------------------------------------------------------------------------
   Sur faq.php, le texte de la reponse est place DIRECTEMENT dans le
   .collapse, sans balise <p> autour. Sa taille est prise en charge par le
   selecteur ".bloc_index .collapse" de oc_typography.css.
   --------------------------------------------------------------------------- */

    #content .collapse {
        text-align: left;
        overflow-wrap: break-word;
        padding-top: 4px;
    }

    #content .collapse p {
        margin-bottom: 8px;
    }

    #content .collapse p.pb-5 {
        padding-bottom: 0.5rem !important;
    }

    #content .collapse ul,
    #content .collapse ol {
        padding-left: 18px;
        margin-left: 0 !important;
    }

    #content .collapse li {
        margin-bottom: 8px;
    }

    /* Cible tactile confortable : Google verifie l'espacement des
       elements cliquables dans son rapport d'ergonomie mobile. */
    #content .collapse a {
        display: inline-block;
        padding: 2px 0;
    }


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

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

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

}


/* ===========================================================================
   Le bloc @media (max-width: 400px) a ete supprime : il ne contenait que
   des regles de taille de police, desormais gerees par oc_typography.css.
   =========================================================================== */