/* ===========================================================================
   guide_mobile.css
   ---------------------------------------------------------------------------
   Adaptation mobile de la page /guide (guide.php) et de ses sections
   guide_includes/guideFor*.php.

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

   PROBLEMES TRAITES
   1. Titres de sections (h3 dans .div-collapse) et texte des paragraphes
      dimensionnes pour le desktop : trop gros sur petit ecran.
   2. Les images portent un style="width: 60%" (parfois 40%) EN DUR dans
      le HTML, calcule pour une colonne large. Sur 375px, cela donne des
      captures d'ecran de 130 a 200px : illisibles.
      -> Une regle externe avec !important bat une declaration inline SANS
         !important : on peut donc les passer a 100% sans toucher au PHP.
   3. Les images sont en float-left : sur mobile le texte s'enroule dans
      une colonne de quelques dizaines de pixels. Le float est supprime et
      l'image centree sur sa propre ligne.

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

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

@media (max-width: 991px) {

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

    /* Chaque guide_includes/guideFor*.php ouvre son propre
       #container.row.margin-0 avec margin-bottom: 60px : les vides
       s'accumulent entre sections. */
    #content .row.margin-0 {
        margin: 0 0 16px 0 !important;
        padding-top: 0;
        padding-bottom: 0;
        width: 100%;
    }

    /* .bloc_index porte 12px de padding haut et bas. */
    #content .bloc_index {
        padding-top: 4px;
        padding-bottom: 4px;
    }

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

    #content .bloc_tuto {
        padding-left: 8px;
        padding-right: 8px;
    }


/* ---------------------------------------------------------------------------
   2. TITRES
   --------------------------------------------------------------------------- */

    #content .bloc_index h1 {
        font-size: 1.25rem;
        line-height: 1.25;
        text-align: center;
        margin: 12px 0 6px 0;
    }

    /* En-tete de section repliable : c'est la zone cliquable, elle doit
       rester une cible tactile confortable malgre la police reduite. */
    #content .div-collapse {
        padding: 4px 0;
        cursor: pointer;
    }

    #content .div-collapse h3 {
        font-size: 1.05rem;
        line-height: 1.3;
        margin: 0 0 4px 0;
        padding-right: 20px;   /* place pour un eventuel chevron */
    }

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


/* ---------------------------------------------------------------------------
   3. TEXTE DES PARAGRAPHES
   ---------------------------------------------------------------------------
   .pb-5 de Bootstrap ajoute 3rem de padding bas a chaque paragraphe :
   beaucoup de vide sur mobile.
   --------------------------------------------------------------------------- */

    #content .collapse p,
    #content .bloc_tuto p {
        font-size: 13.5px;
        line-height: 1.5;
        text-align: left;
        overflow-wrap: break-word;
    }

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

    #content .collapse ul,
    #content .collapse ol {
        padding-left: 18px;
        font-size: 13.5px;
        line-height: 1.5;
    }

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

    #content .lien_text,
    #content .lien_text a {
        font-size: 13.5px;
        line-height: 1.5;
    }

/* ---------------------------------------------------------------------------
   4. IMAGES : pleine largeur
   ---------------------------------------------------------------------------
   Les <img class="tutoImage"> portent style="width: 60%" (ou 40%) en dur.
   Une declaration inline SANS !important est battue par une regle externe
   AVEC !important : on peut donc les elargir sans modifier le PHP.

   Le float est aussi supprime : sur 375px, un float-left ne laisse au
   texte qu'une colonne inutilisable.
   --------------------------------------------------------------------------- */

    #content .tutoImage,
    #content .collapse img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        float: none !important;
        display: block;
        margin: 10px auto !important;
        padding: 0 !important;
        border: 1px solid #e3e6ea;
        border-radius: 4px;
    }

    /* Neutralise les classes de flottement et d'espacement Bootstrap
       posees sur les images. */
    #content .collapse img.float-left,
    #content .collapse img.float-right {
        float: none !important;
    }


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

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

    #content pre {
        overflow-x: auto;
        max-width: 100%;
    }

}


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

@media (max-width: 400px) {

    #content .div-collapse h3 {
        font-size: 1rem;
    }

    #content .collapse p,
    #content .bloc_tuto p {
        font-size: 13px;
    }

}