/* ------------------------------------------------------------------------------------
   Mise en page adaptative des écrans repris un par un.

   06_responsive.css traite le CADRE de l'application — barre, tiroir de menu, modales.
   Ce fichier-ci traite le CONTENU des pages reprises. Chargé après lui et après
   07_dataTable.css, il peut corriger l'un comme l'autre.

   Césure : 991.98px, la même que le tiroir de menu (Bootstrap lg). Une page ne doit pas
   changer de forme à une largeur différente de celle où le menu change de forme.
   ------------------------------------------------------------------------------------ */

/* ====================================================================================
   Colonnes Bootstrap sans césure — correction générale

   Une classe `col-9` sans préfixe de césure s'applique DÈS le plus petit écran. Toute
   l'application est bâtie ainsi : 222 gabarits, dont 379 `col-9` et 276 `col-3`. Sur un
   téléphone, une page garde donc son 75 % / 25 % — une colonne latérale de 90 pixels,
   inutilisable, et un tableau écrasé à côté.

   Corrigé ici plutôt qu'en reprenant les 222 fichiers un par un : une règle unique,
   réversible, qui fait exactement ce qu'aurait fait `col-12 col-lg-9` sur chacun d'eux.
   Les écrans repris sur dirDataTable gardent en plus leurs classes `gf-page-liste`, qui
   remontent la colonne latérale au-dessus de la liste ; ici on se contente d'empiler,
   sans toucher à l'ordre — on ne réorganise pas 222 pages qu'on n'a pas regardées.

   `col-6` est laissé de côté : un partage en deux moitiés reste lisible sur un téléphone,
   l'empiler ne ferait qu'allonger la page.
   ==================================================================================== */

@media (max-width: 991.98px) {

    #pageContent .row > .col-1,
    #pageContent .row > .col-2,
    #pageContent .row > .col-3,
    #pageContent .row > .col-4,
    #pageContent .row > .col-5,
    #pageContent .row > .col-7,
    #pageContent .row > .col-8,
    #pageContent .row > .col-9,
    #pageContent .row > .col-10,
    #pageContent .row > .col-11 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ====================================================================================
   Gabarit commun « liste + colonne latérale »

   Presque toutes les pages de liste sont bâties pareil : une liste en col-9, une
   colonne de filtres ou de boutons en col-3. Or Bootstrap sans préfixe de césure
   s'applique DÈS le plus petit écran : sur un téléphone la page gardait son
   75 % / 25 %, soit une colonne latérale de 90 pixels.

   Sous la césure : tout en pleine largeur, et la colonne latérale REMONTE au-dessus de
   la liste. On filtre avant de lire, et les boutons d'action restent à portée sans
   avoir à faire défiler toute la liste.
   ==================================================================================== */

@media (max-width: 991.98px) {

    .gf-page-liste {
        display: flex;
        flex-wrap: wrap;
    }

        .gf-page-liste > .gf-page-liste-principal,
        .gf-page-liste > .gf-page-liste-cote {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .gf-page-liste > .gf-page-liste-cote {
            order: -1;
        }

    .gf-page-liste-principal {
        margin-top: 0.5rem !important;
    }

    /* Les filtres côte à côte plutôt qu'empilés : quatre lignes de filtres avant
       d'atteindre la liste, c'est déjà un écran de perdu. */
    .gf-page-liste-filtres {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        align-items: flex-end;
    }

        .gf-page-liste-filtres > * {
            flex: 1 1 150px;
            min-width: 0;
            margin-bottom: 0 !important;
        }

        /* Un filtre qui doit occuper toute la largeur, la recherche par exemple. */
        .gf-page-liste-filtres > .gf-filtre-large {
            flex: 1 1 100%;
        }

    /* Boutons d'action en ligne, alignés à gauche. */
    .gf-page-liste-boutons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 0.5rem !important;
    }

        .gf-page-liste-boutons > .btn {
            margin-bottom: 0 !important;
        }
}

/* ====================================================================================
   Liste des clients : la fiche du client sélectionné
   ==================================================================================== */

@media (max-width: 991.98px) {

    .gf-clients-listes-deroulantes {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

        .gf-clients-listes-deroulantes > div {
            flex: 1 1 160px;
            margin-top: 0.5rem !important;
            width: auto !important;
        }

    /* Sur poste de travail la fiche vit dans la colonne de droite, toujours visible.
       Sur téléphone il n'y a pas de colonne de droite : elle devient un panneau qui
       monte depuis le bas quand on touche une ligne, et qu'on referme.

       C'est le modèle habituel des applications mobiles pour un détail rattaché à une
       liste : la liste reste à l'écran derrière, et le retour se fait d'un geste. */
    .gf-clients-fiche {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1046; /* au-dessus du tiroir de menu (1045) */
        max-height: 78vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0 12px 12px;
        background: #fff;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.22);
        /* Fermée : hors écran, et surtout non cliquable — un panneau invisible qui
           intercepte encore les appuis rend la liste inutilisable. */
        transform: translateY(102%);
        visibility: hidden;
        transition: transform 0.22s ease-out, visibility 0s linear 0.22s;
    }

        .gf-clients-fiche.gf-fiche-ouverte {
            transform: translateY(0);
            visibility: visible;
            transition: transform 0.22s ease-out, visibility 0s;
        }

    .gf-fiche-fermer {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-top: 8px;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: #eef2f7;
        color: #334155;
        font-size: 15px;
    }

    .gf-fiche-voile {
        position: fixed;
        inset: 0;
        z-index: 1044;
        background: rgba(0,0,0,0.35);
    }

    /* --- Aide contextuelle -----------------------------------------------------------

       La languette « ? » est fixée au milieu du bord droit. Sur téléphone elle tombe
       dans la zone du pouce et passait par-dessus le panneau glissant. On la descend
       au-dessus du bord bas et on la place SOUS le panneau : quand une fiche est
       ouverte, c'est la fiche qui compte. Le panneau d'aide est déjà limité à 92vw. */
    .aide-ctx-tab {
        top: auto;
        bottom: 84px;
        transform: none;
        z-index: 1043;
        width: 30px;
        height: 36px;
    }

        .aide-ctx-tab .fa {
            font-size: 16px;
        }
}

/* Sur poste de travail, la fiche reste dans le flux de la colonne : ni panneau, ni
   bouton de fermeture, ni voile. */
@media (min-width: 992px) {
    .gf-fiche-fermer,
    .gf-fiche-voile {
        display: none;
    }
}