/******************************************************************************
 * Navigation sur petit écran
 *
 * Objectif limité et assumé : rendre l'application NAVIGABLE au téléphone et à
 * la tablette. Les écrans eux-mêmes ne sont pas repris ici — c'est un autre
 * chantier, page par page.
 *
 * Fichier volontairement séparé et chargé en dernier dans _Api/css : on ne
 * touche pas aux 19 000 lignes existantes, et il suffit de le retirer pour
 * revenir exactement au comportement d'avant.
 *
 * Seuil à 991.98px = le point de rupture "lg" de Bootstrap 4, déjà utilisé par
 * les classes px-lg-2 de l'en-tête. Au-dessus, rien ne change : pas une seule
 * règle ne s'applique au poste de travail de la réception.
 *
 * Auteur : G.Jelal
 * Créé le : 03.09.2026
 ******************************************************************************/

@media (max-width: 991.98px) {

    /* ------------------------------------------------------------------
     * LE point bloquant. body impose min-width: 1200px (01_main.css), ce qui
     * force le téléphone à dézoomer toute la page pour la faire tenir : texte
     * minuscule et défilement horizontal permanent. Sans cette ligne, aucune
     * autre correction ne se voit.
     * ------------------------------------------------------------------ */
    body {
        min-width: 0 !important;
        padding-top: 0 !important;
        overflow-x: hidden;
    }

    /* ------------------------------------------------------------------
     * L'EN-TÊTE devient une barre d'application
     *
     * Sur poste de travail il fait 100px fixes et ses enfants — fil d'Ariane,
     * rangée d'icônes, utilisateur — sont posés en position absolute dedans
     * (01_main.css). Dès qu'on lui rend une hauteur libre, ces trois blocs ne
     * prennent plus de place et s'empilent au fond : c'est ce qui donnait un
     * bandeau écrasé sans aucune icône au premier essai.
     *
     * Ici tout revient dans le flux, sur DEUX rangées :
     *   1. [bouton menu] titre ............................ utilisateur
     *   2. [accueil > fil d'Ariane] [icônes ...........................]
     *
     * Une grille CSS et non un flex-wrap : avec flex, le retour à la ligne
     * dépend de la largeur du contenu, et le fil d'Ariane — trois icônes de
     * large sur l'accueil — remontait sur la première rangée ou restait seul
     * sur la sienne. La grille rend l'emplacement de chaque bloc déterministe,
     * quelle que soit la page.
     *
     * Trois colonnes : [fil d'Ariane, auto] [reste, 1fr] [utilisateur, auto].
     * Le titre s'étale sur les deux premières, les icônes sur les deux
     * dernières. L'accueil est ainsi tout à gauche, sans espace devant.
     *
     * position: sticky plutôt que fixed : la barre reste visible en haut mais
     * garde sa place dans la page, donc plus besoin de deviner sa hauteur pour
     * décaler le contenu — elle varie d'une page à l'autre.
     * ------------------------------------------------------------------ */
    body > header {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0;
        height: auto !important;
        flex: 0 0 auto !important;
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-rows: 48px auto;
        align-items: center;
        padding: 0 !important;
        overflow: visible !important;      /* le menu déroulant de l'utilisateur */
    }

    /* Rangée 1 */
    body > header > h1 {
        grid-column: 1 / 3;
        grid-row: 1;
        min-width: 0;
        margin: 0 !important;
        padding: 0 4px 0 52px !important;  /* 48px : le bouton menu, fixé à gauche */
        line-height: 48px;
        font-size: 1.05rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body > header > #login {
        grid-column: 3;
        grid-row: 1;
        position: static !important;
        padding: 0 10px 0 6px;
        font-size: 0.85rem;
        line-height: 48px;
        white-space: nowrap;
    }

    /* Rangée 2, à gauche : accueil + fil d'Ariane, tout au bord. Sur une page
     * profonde le chemin peut être long : il défile, et laisse au moins 40 %
     * de la largeur aux icônes. */
    body > header > .breadcrumb {
        grid-column: 1;
        grid-row: 2;
        position: static !important;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        max-width: 60vw;
        min-height: 40px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        padding: 0 4px 0 8px !important;
        font-size: 0.8rem;
        line-height: 1.3;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    body > header > .breadcrumb > li {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Rangée 2, à droite : les icônes, sur la même ligne que l'accueil.
     * Défilement horizontal plutôt qu'un retour à la ligne en escalier :
     * toutes les fonctions restent atteignables, rien n'est masqué. */
    body > header > #shortcut {
        grid-column: 2 / 4;
        grid-row: 2;
        position: static !important;
        display: flex;
        flex-wrap: nowrap !important;
        align-items: center;
        min-width: 0;
        min-height: 40px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin: 0 !important;
        padding: 0 8px 0 2px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    body > header > #shortcut > * {
        flex: 0 0 auto;
        margin: 0 3px !important;
    }

    /* Les icônes sont calées par des margin-top en dur dans le HTML ; on les
     * neutralise, sinon la rangée fait le double de hauteur nécessaire.
     *
     * Le bandeau mélange trois écritures Font Awesome : .fa, .fa-solid et
     * .fas (le raccourci clients, ClientsShortcut.html). En ne visant que les
     * deux premières, l'icône des clients restait en fa-2x et dépassait les
     * autres d'un tiers. [class*="fa-"] attrape toutes les variantes, y compris
     * celles qu'un gabarit ajoutera demain. */
    body > header > #shortcut [class*="fa-"] {
        font-size: 1.3rem !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
        line-height: 36px;
    }

    body > header > #shortcut .dropdown {
        margin-right: 8px !important;
    }

    /* Le menu déroulant du raccourci clients (« Filtre des clients ») était
     * MASQUÉ : #shortcut défile à l'horizontale, et un overflow autre que
     * visible rogne aussi ce qui dépasse verticalement — donc tout menu
     * absolu qui s'ouvre en dessous.
     *
     * Plutôt que renoncer au défilement, le menu ouvert est fixé au viewport,
     * en pleine largeur juste sous la barre : il sort ainsi du conteneur
     * rogné, et au pouce une liste pleine largeur vaut mieux qu'un petit
     * menu accroché à une icône. Popper pose sa position en style inline
     * (absolute + translate3d) : !important est nécessaire pour l'emporter. */
    body > header > #shortcut .dropdown-menu.show {
        position: fixed !important;
        top: 92px !important;          /* 48px rangée 1 + 40px rangée 2 + marge */
        left: 8px !important;
        right: 8px !important;
        bottom: auto !important;
        transform: none !important;
        width: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        z-index: 1035;
    }

    /* Un ancêtre transformé devient le conteneur d'un position: fixed et le
     * ramènerait dans la zone rognée. .icon-button:hover applique scale(1.2)
     * (01_main.css) et le :hover peut rester collé après un toucher : on le
     * neutralise ici, l'effet de survol n'a de toute façon aucun sens sur un
     * écran tactile. */
    body > header > #shortcut .icon-button:hover,
    body > header > #shortcut .icon-button:active {
        transform: none !important;
    }

    /* ------------------------------------------------------------------
     * LE MENU devient un tiroir
     *
     * .sidebar-menu est DÉJÀ en position fixed sur 210px (03_hack.css) : il
     * suffit de le sortir de l'écran et de le ramener au clic. Rien à
     * restructurer dans le HTML.
     *
     * #mainMenu réserve 210px dans le flux (01_main.css) : on le ramène à zéro
     * pour que le contenu prenne toute la largeur.
     *
     * #mainMenu est aussi en position: relative avec z-index: 10 : il forme
     * donc un CONTEXTE D'EMPILEMENT, et le z-index du tiroir ne compte que
     * dedans. Au premier essai le voile (1040, au niveau du body) passait
     * ainsi par-dessus le tiroir, qu'on voyait assombri — le « tout devient
     * flou ». C'est #mainMenu lui-même qu'il faut hisser au-dessus du voile.
     * ------------------------------------------------------------------ */
    body > #pageMiddle > #mainMenu {
        flex: 0 0 0 !important;
        width: 0 !important;
        z-index: 1045 !important;
    }

    .sidebar-menu {
        width: 82% !important;
        max-width: 320px;
        top: 0 !important;
        padding-top: 48px;               /* sous le bouton menu */
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease-out;
    }

    body.gf-menu-ouvert .sidebar-menu {
        transform: translateX(0);
    }

    /* Le décalage de 100px posé en style inline dans Index.html laisse un trou
     * en haut du tiroir : le padding-top ci-dessus le remplace. */
    .sidebar-menu > .menu {
        margin-top: 0 !important;
    }

    /* Cibles tactiles : 44px est le minimum confortable au pouce. */
    .sidebar-menu a {
        display: block;
        padding-top: 11px !important;
        padding-bottom: 11px !important;
    }

    /* ------------------------------------------------------------------
     * Sous-menus en ACCORDÉON
     *
     * Sur poste de travail un sous-menu est un volet absolu qui sort à droite
     * du parent, au survol (03_hack.css : #menu li ul en absolute, left 100%,
     * visibility/opacity basculées par #menu li:hover > ul). Au doigt il n'y
     * a pas de survol, et sortir à droite d'un tiroir déjà collé au bord n'a
     * aucun sens.
     *
     * Ici le sous-menu revient dans le flux, sous son parent, replié par
     * défaut ; il se déplie quand le <li> porte gf-ouvert, posé par
     * clicMenuMobile (ctrlSubMenus.js). :hover est neutralisé, sinon le
     * :hover collant du tactile déplierait tout au premier contact.
     * ------------------------------------------------------------------ */
    .sidebar-menu #menu li ul,
    .sidebar-menu #menu li li ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: none;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        padding: 0;
        box-shadow: none !important;
        background-color: rgba(43, 87, 154, 0.08) !important;
    }

    .sidebar-menu #menu li:hover > ul {
        display: none;
    }

    .sidebar-menu #menu li.gf-ouvert > ul {
        display: block !important;
    }

    /* Indentation par niveau, pour lire la hiérarchie d'un coup d'œil. */
    .sidebar-menu #menu li li a {
        padding-left: 34px !important;
    }

    .sidebar-menu #menu li li li a {
        padding-left: 50px !important;
    }

    /* Le chevron « › » pivote vers le bas quand le niveau est déplié. */
    .sidebar-menu #menu li > a > .fa-angle-right {
        transition: transform 0.15s ease-out;
    }

    .sidebar-menu #menu li.gf-ouvert > a > .fa-angle-right {
        transform: rotate(90deg);
    }

    /* Le survol relevait l'entrée d'un pixel avec une ombre (03_hack.css) :
     * inutile au doigt, et le :hover collant laisserait une entrée « levée ». */
    .sidebar-menu #menu li a:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Voile derrière le tiroir : ferme le menu au clic et signale qu'on est
     * dans un mode superposé. En dessous de #mainMenu (1045), au-dessus de
     * l'en-tête (100) et du contenu. */
    .gf-menu-voile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1040;
    }

    /* ------------------------------------------------------------------
     * CONTENU
     * ------------------------------------------------------------------ */
    body > #pageMiddle > #pageContent {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Les listes gardent table-layout: fixed et white-space: nowrap
     * (03_hack.css) : sans conteneur défilant, un tableau de huit colonnes
     * déborde et casse la mise en page. Le défilement horizontal est un
     * pis-aller — le vrai correctif est un rendu en fiches dans dirTable,
     * c'est un autre chantier.
     *
     * Ciblé sur table.table, le balisage exact de dirTable, et PAS sur tout
     * <table> : les tableaux de texte de la documentation (.doc-table) doivent
     * rester des tableaux qui vont à la ligne, et ce sélecteur à deux #id
     * l'emporterait sur le leur. */
    body > #pageMiddle > #pageContent table.table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        max-width: 100%;
    }

    body > footer {
        font-size: 0.75rem;
        padding-left: 10px !important;
    }

    /* ------------------------------------------------------------------
     * FENÊTRES MODALES (SMS, relevé client, courrier, caisse, check-in...)
     *
     * Elles sont déclarées en modal-lg / modal-xl : 800px ou 90 % de large,
     * et 03_hack.css fige modal-dialog-scrollable à 90 % de hauteur avec un
     * display:block. Sur 375px la fenêtre déborde et son contenu, posé sur des
     * colonnes col-N sans point de rupture, se serre en demi-largeurs
     * illisibles.
     *
     * Ici : la fenêtre prend toute la largeur moins une marge, sa hauteur
     * s'adapte au contenu avec défilement interne, et à l'intérieur toute
     * colonne passe en pleine largeur — les champs s'empilent. C'est ce qui
     * rend une modale UTILISABLE au pouce ; la refonte champ par champ reste
     * un autre chantier.
     * ------------------------------------------------------------------ */
    .modal-dialog,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        width: auto !important;
        max-width: calc(100% - 16px) !important;
        margin: 8px auto !important;
    }

    .modal-dialog.modal-dialog-scrollable {
        height: auto !important;
        max-height: calc(100vh - 16px);
    }

    .modal-dialog.modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 16px) !important;
    }

    .modal-dialog .modal-content {
        width: 100% !important;
    }

    .modal-dialog .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 10px !important;
    }

    .modal-dialog .modal-header,
    .modal-dialog .modal-footer {
        padding: 8px 10px !important;
    }

    /* Les colonnes de la grille Bootstrap à l'intérieur d'une modale : toutes
     * en pleine largeur. Ciblé sur [class*="col-"] à l'intérieur de .modal
     * uniquement, pour ne pas toucher les pages. */
    .modal .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Les boutons d'action des modales se serrent sur une ligne : on les laisse
     * passer à la ligne plutôt que sortir du cadre. */
    .modal-dialog .modal-footer {
        flex-wrap: wrap;
    }

    .modal-dialog .modal-footer > * {
        margin: 3px !important;
    }
}

/* ---------------------------------------------------------------------------
 * LE BOUTON DU MENU
 *
 * N'existe qu'en petit écran. Masqué par défaut pour ne rien changer au poste
 * de travail, y compris si le fichier est chargé sans que le media query ne
 * s'applique.
 *
 * Fixé en haut à gauche, exactement de la hauteur de la première rangée de
 * l'en-tête et de la même couleur, sans bordure ni coin arrondi : il se fond
 * dans la barre au lieu de flotter dessus. Au-dessus de tout (1060) pour rester
 * cliquable menu ouvert, où il devient une croix.
 * --------------------------------------------------------------------------- */
.gf-bouton-menu {
    display: none;
}

@media (max-width: 991.98px) {
    .gf-bouton-menu {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 48px;
        height: 48px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: #2b579a;
        color: #fff;
        font-size: 1.3rem;
        z-index: 1060;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .gf-bouton-menu:focus {
        outline: none;
        box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
    }

    /* Menu ouvert : le bouton est posé sur le tiroir (fond clair), on l'inverse
     * pour qu'il reste lisible. */
    body.gf-menu-ouvert .gf-bouton-menu {
        background: transparent;
        color: #2b579a;
    }
}