/* ===========================================================================
   videos_mobile.css
   ---------------------------------------------------------------------------
   Adaptation mobile de la page /videos (videos.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 blocs B2 (h3), B4 (echelle typographique) et D (desktop) ont ete
   retires, ainsi que le bloc C. Leurs selecteurs commencaient par #content
   ou cumulaient quatre classes, donc ils l'emportaient en specificite sur
   oc_typography.css quel que soit l'ordre de chargement. C'est ce qui
   maintenait les descriptifs a 17.6px et les titres a 16.8px.

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

   ---------------------------------------------------------------------------
   NOTE : le min-width de #content et les proprietes d'apparence des classes
   oc-video-desc / oc-videos-sectionDesc sont aussi passes dans
   oc_typography.css, pour n'avoir qu'une seule source de verite.

   ---------------------------------------------------------------------------
   PROBLEMES TRAITES PAR CE FICHIER
   1. Chaque section est un .alert Bootstrap (1rem de padding) contenant
      un second .alert pour le contenu deplie : les paddings se cumulent.
   2. Les <ul class="margin-left-15"> ajoutent leur retrait au retrait par
      defaut du navigateur (40px).
   3. La marge haute du .bloc_index fusionne avec celle de son parent et
      saute a la premiere ouverture.

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

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

@media (max-width: 991px) {

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

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

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

    /* La marge haute du .bloc_index fusionne avec celle de son parent
       tant qu'aucun contenu visible ne les separe. A la premiere
       ouverture d'un paragraphe, la fusion cesse et le bloc remonte de
       41px. display:flow-root cree un contexte de formatage qui empeche
       cette fusion. */
    #content .bloc_index {
        display: flow-root;
        margin-top: 8px !important;
        padding-top: 4px;
        padding-bottom: 4px;
    }

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

    /* Les sections sont des .alert imbriques : le padding se cumule. */
    #content .alert {
        padding: 8px 6px;
        margin-bottom: 10px;
    }

    #content .alert .alert {
        padding: 4px 2px;
        margin-bottom: 0;
    }


/* ---------------------------------------------------------------------------
   2. TITRES
   ---------------------------------------------------------------------------
   Tailles, poids et couleurs : voir oc_typography.css.
   --------------------------------------------------------------------------- */

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

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

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


/* ---------------------------------------------------------------------------
   3. LISTES
   --------------------------------------------------------------------------- */

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

    /* margin-left-15 s'ajoute au retrait par defaut du <ul> (40px). */
    #content .collapse ul,
    #content ul.margin-left-15 {
        padding-left: 18px;
        margin-left: 0 !important;
        margin-bottom: 0;
        list-style-position: outside;
    }

    #content li.sitemap1 {
        /* Cible tactile confortable : Google verifie l'espacement des
           elements cliquables dans son rapport d'ergonomie mobile. */
        margin-bottom: 10px;
        overflow-wrap: break-word;
    }


/* ---------------------------------------------------------------------------
   4. 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%;
    }

}


/* ===========================================================================
   Les blocs A (regles globales), C (max-width 400px) et D (min-width 992px)
   ont ete supprimes : ils ne contenaient que des tailles de police et des
   proprietes d'apparence, desormais dans oc_typography.css.
   =========================================================================== */