/* ===========================================================================
   LOT 02 — CIBLES TACTILES À 44 PX SOUS 1024 PX
   À charger APRÈS lot01-coquille-responsive.css (donc après rail-lateral.css
   et easytime-shell.css).

   CE QUE CE FICHIER CORRIGE
     Le lot 01 replie la coquille et pose un tiroir sous 640 px. Il ne
     dimensionne rien : les rangées de navigation tiennent en 32 px de haut
     (rail-lateral.css:196), la pagination en 34 px, les cases à cocher du
     tableau en 17 px. Un tiroir qui s'ouvre et dont on rate les entrées au
     doigt n'est pas un gain — c'est la réserve n° 1 de la passation 15.

   D'OÙ VIENT LE 44
     Du dépôt, pas d'une recommandation générale : la caisse, seul écran conçu
     pour le tactile, pose déjà min-width/min-height 44 px sur ses commandes
     (caisse.css:284) et 48 px sur ses familles. Le lot ne fait qu'étendre ce
     gabarit aux deux surfaces partagées par tous les écrans.

   POURQUOI « min-height » ET JAMAIS « height »
     Une hauteur fixe tronque un libellé qui passe à la ligne — et il en passe,
     puisque le rail garde ses libellés sous 640 px dans un tiroir de 280 px.
     Le minimum, lui, ne fait que grandir.

   POURQUOI LA LARGEUR ET NON « pointer: coarse »
     Un portable à écran tactile annonce « pointer: fine » tant qu'une souris
     est branchée, et « coarse » sinon : la règle changerait selon qu'une
     souris est posée sur le bureau. La largeur, elle, se vérifie en recette et
     rejoint la frontière du lot 01 (1024 px) au lieu d'en ouvrir une
     cinquième. La piste reste ouverte, en ajout, pour les tablettes de plus de
     1024 px — voir docs/cibles-tactiles.md.

   AUCUNE COULEUR ICI. Comme le lot 01 : de la géométrie, rien d'autre.
   =========================================================================== */

@media (max-width: 1024px) {

    /* --- A. LA COQUILLE ---------------------------------------------------
       Rail et barre du haut : ce que le lot 01 vient de rendre atteignable.
       Sélecteurs préfixés .appgrid — le <style> embarqué de ShellModule vit
       dans le corps du document et l'emporterait sinon à spécificité égale. */

    /* Rangée d'écran. Seuls la hauteur et les marges verticales bougent : le
       retrait de 31 px porte l'alignement du rail déployé, et le lot 01 le
       ramène à 19 px dans le rail d'icônes. Ni l'un ni l'autre ne regarde le
       doigt. */
    .appgrid .et-navmain { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }

    /* Intitulé de groupe : c'est un vrai bouton (il plie l'accordéon), au
       contraire de .et-listhdr qui n'est qu'un titre — celui-là garde sa
       hauteur, agrandir ce qui ne se clique pas ne fait que perdre des lignes. */
    .appgrid .et-grouphdr { min-height: 44px; padding-top: 13px; padding-bottom: 11px; }

    /* L'étoile de favori borde la rangée : deux cibles côte à côte, celle de
       droite étant la plus petite et la plus regrettable à toucher par erreur.
       44 px de large, et le libellé cède la place — dans un tiroir de 280 px
       il en reste 236, de quoi tenir « Périodes de pointage ». */
    .appgrid .et-star { width: 44px; min-height: 44px; }

    .appgrid .et-pers { min-height: 48px; }
    .appgrid .et-side-rech input { height: 44px; }
    /* Le bouton d'effacement vit DANS le champ : l'agrandir à 44 px le ferait
       déborder d'un champ de 44. Il monte à 32 px, ce que la règle d'espacement
       ne concerne pas — il n'a pas de cible adjacente. */
    .appgrid .et-side-rech .clr { width: 32px; height: 32px; }

    /* Barre du haut. Elle porte, sous 640 px, le bouton de tiroir du lot 01
       (déjà à 44 px) : ses voisins immédiats ne peuvent pas rester à 34. */
    .appgrid .et-ctrl { width: 44px; height: 44px; }
    .appgrid .et-accueil,
    .appgrid .et-periode,
    .appgrid .et-sel-btn,
    .appgrid .et-onglet { min-height: 44px; }

    /* ── LES TROIS CIBLES QUE LA BARRE GARDAIT SOUS 44 px (2026-09-10) ───────
       Mesurées dans le navigateur, identiques à 390 / 560 / 640 / 720 / 1024 px :
       .et-lanceur-btn 34×34, .et-accueil 38×44, .etp-ctx-quitter 22×22.

       LA HAUTEUR ÉTAIT POSÉE, LA LARGEUR NON — et c'est le même oubli trois fois.
       Ce lot avait écrit `min-height` pour .et-accueil et `flex: none` contre le
       rétrécissement, mais une cible perd aussi sa largeur quand son CONTENU
       disparaît : `.et-accueil-lbl` est masqué sous 1240 px (rail-lateral.css) et
       il ne reste que l'icône. `flex: none` ne protège pas de ça — il empêche la
       boîte de céder, pas le texte de s'en aller. D'où `min-width`, ici et non
       dans la feuille du composant : la largeur d'une cible est une affaire de
       palier, la couleur et la forme restent au composant. */
    .appgrid .et-accueil { min-width: 44px; }

    /* Le lanceur d'applications (coin gauche, façon Office 365) échappait
       entièrement au lot : sa feuille est embarquée dans SelecteurModule.razor et
       sa classe n'est pas .et-ctrl, alors que c'est le même objet — un bouton
       d'icône carré dans la barre. Il rejoint .et-ctrl, valeur comprise. */
    .appgrid .et-lanceur-btn { width: 44px; height: 44px; }

    /* Le bouton « Revenir à l'administration », dans la pastille de contexte du
       super-administrateur (AppTopbarActions.razor). C'est la plus petite cible de
       la coquille, et celle dont le geste est le plus lourd : elle referme le
       dossier d'un client.

       PAS PAR PSEUDO-ÉLÉMENT, ET LA MESURE L'A TRANCHÉ. Un <button> n'est pas un
       élément remplacé — contrairement à une case à cocher — donc sa zone de clic
       PEUT s'étendre par ::after. Mais il ne reste que 13 px à sa droite avant la
       cible suivante (les notifications) : une nappe de 44 px centrée sur 22
       déborde de 11 px de chaque côté et lui volerait ses clics, en tombant sous
       les 6 px d'espacement que ce lot impose. C'est donc le bouton lui-même qui
       grandit.

       LA PASTILLE NE REÇOIT PAS DE HAUTEUR, ELLE PERD SON REMBOURRAGE. Écrire
       `min-height: 44px` dessus donnait **54 px** : en `border-box`, le plancher
       porte sur la boîte, mais un contenu plus haut l'emporte — le bouton de 44
       plus 4+4 de rembourrage et 2 de bordure. Dans une barre de 56 px il restait
       1 px de part et d'autre. Le rembourrage vertical passe donc à 0 et c'est la
       CIBLE qui donne sa hauteur à la pastille : 46 px, bordure comprise, mesurés.
       Le 44 n'est ainsi écrit qu'une fois.
       Le rembourrage droit tombe avec : le bouton forme le bout de la pastille,
       sinon ses 4 px s'ajouteraient aux 22 gagnés et mangeraient l'espacement. Il
       reste 9 px jusqu'aux notifications, au-dessus des 6 px du lot. */
    .appgrid .etp-ctx { padding: 0 0 0 9px; }
    .appgrid .etp-ctx-quitter { width: 44px; height: 44px; }
    /* Le sélecteur de contexte du module (exercice comptable, période de pointage) est
       une pilule .et-periode — couverte juste au-dessus. Son PANNEAU, lui, a ses propres
       cibles : les rangs, les crans de la rangée d'années et les cases de la grille de
       périodes, les plus fines de la coquille. Le panneau de dossier a les siennes plus
       bas, avec sa règle propre. */
    .appgrid .et-choix-rang,
    .appgrid .et-choix-annees button,
    .appgrid .et-choix-mois button { min-height: 44px; }
    .appgrid .et-user { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }

    /* Le sélecteur de dossier, sa pilule et les lignes de son panneau. Le panneau
       porte désormais deux lignes de texte par dossier (raison sociale, puis NIF et
       RCCM) : il est plus haut qu'avant, mais la hauteur se pose ici et non là-bas —
       une cible ne dépend pas de la longueur de son contenu.
       LES LIGNES « SANS ACCÈS » N'EN SONT PAS : elles ne se cliquent pas, et agrandir
       ce qui ne répond pas ne fait que perdre des lignes. D'où le sélecteur sur
       `button` et non sur la classe seule. */
    .appgrid .et-societe-btn,
    .appgrid button.et-societe-item { min-height: 44px; }
    .appgrid .et-societe-rech input { min-height: 44px; }
    .appgrid .et-usermenu a,
    .appgrid .et-usermenu button { min-height: 44px; }

    /* UNE CIBLE NE RÉTRÉCIT PAS. La barre du haut est une rangée flex sans
       retour à la ligne : à 390 px elle déborde, et ce sont les seuls éléments
       au rétrécissement par défaut qui paient — .et-ctrl, mesuré à 22 px de
       large, c'est-à-dire le bouton du tiroir lui-même. Poser la hauteur sans
       poser ça ne corrige rien. */
    .appgrid .et-topbar .et-ctrl,
    .appgrid .et-topbar .et-accueil,
    .appgrid .et-topbar .et-periode,
    .appgrid .et-topbar .et-user,
    .appgrid .et-topbar .et-lanceur-btn,
    .appgrid .et-topbar .etp-ctx-quitter { flex: none; }

    /* --- B. LE TABLEAU ----------------------------------------------------
       Le gabarit de liste (.tbl-*) est servi par une quarantaine d'écrans :
       c'est le seul endroit où poser la règle une fois pour toutes.

       ET .table DE BOOTSTRAP AVEC LUI, ajouté le 2026-08-21 après recette de
       la console d'administration. Le gabarit .tbl-* n'est pas le seul modèle
       de liste du dépôt : DataGrid (Components/Shared/DataGrid.razor) rend
       « table table-hover align-middle », jamais .tbl, et c'est lui que
       servent les écrans antérieurs à la charte 2026-08 — les sept écrans
       /admin/* entre autres. Mesuré à 390 px : leurs quatre boutons de fin de
       ligne restaient à 31 px de haut et collés, c'est-à-dire précisément ce
       que ce lot existe pour empêcher. La règle ne pouvait pas rester adossée
       à une classe maison quand le balisage majoritaire est celui de Bootstrap.

       LA BARRE D'OUTILS DE CES ÉCRANS EST ATTEINTE DEPUIS LE 2026-08-21, et
       c'était la limite assumée n° 4 de docs/cibles-tactiles.md : le « d-flex
       flex-wrap » en tête de card-body (Actualiser, Nouvelle société, exports)
       n'avait AUCUNE classe à viser, contrairement à .tbl-barre. Deux issues
       étaient possibles — un crochet de balisage écran par écran, ou un
       sélecteur structurel large et fragile. C'est la première qui a été prise,
       mais posée UNE FOIS : le composant Components/Shared/BarreListe.razor rend
       cette bande pour tous ces écrans et porte « barre-liste ».

       « barre-liste » NE PORTE AUCUN STYLE hors de ce lot : elle n'existe que
       pour la règle tactile. C'est voulu — la barre garde l'aspect Bootstrap de
       son card-body, et surtout elle ne prend pas l'habillage de .tbl-barre
       (fond, filet, rembourrage), qui ferait un cadre de trop. */

    /* Actions de fin de ligne. Bootstrap .btn-sm est ce que les pages
       emploient — près de six cents fois — et non une classe maison : c'est
       donc lui qu'il faut atteindre, dans la table et dans la barre d'outils.

       inline-flex ET PAS SEULEMENT min-height : .btn de Bootstrap est en
       inline-block, où une hauteur minimale pousse le texte en haut de la boîte
       au lieu de le centrer. Le bouton paraîtrait mal composé — et le défaut ne
       se voit qu'en dessous de 1024 px, donc jamais sur le poste de celui qui
       l'a écrit. */
    .tbl td .btn,
    .tbl-barre .btn,
    .tbl-pied .btn,
    .table td .btn,
    .barre-liste .btn {
        min-height: 44px; min-width: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }

    /* .btn-close N'EST PAS un .btn : la croix des modales échappe au sélecteur
       ci-dessus et garde ses 16 px. Elle est hors table, donc hors de ce lot —
       la note est là pour qu'on ne la cherche pas ici. */

    /* ESPACEMENT, et pas seulement hauteur : deux boutons de 44 px collés
       forment une cible de 88 px dont on ne sait pas laquelle on touche. */
    .tbl td .btn + .btn,
    .table td .btn + .btn { margin-left: 6px; }
    .tbl-nav { gap: 10px; }

    /* Les commandes SOUDÉES restent soudées : .tbl-groupe et .tbl-etat-opt
       sont des sélecteurs segmentés, un seul objet à plusieurs positions. Les
       écarter les ferait lire comme des boutons indépendants. Elles grandissent
       sans se séparer.

       min-height l'emporte sur le height: 34px du sélecteur segmenté — la
       hauteur utilisée est le maximum des deux — et le centrage est à reposer
       pour la même raison qu'au-dessus. */
    .tbl-groupe > button {
        min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .tbl-groupe.est-lignes > button { min-width: 44px; }
    .tbl-etat-opt { width: 44px; height: 44px; }

    .tbl-pg { min-width: 44px; height: 44px; }
    .tbl-saut { height: 44px; }
    .tbl-recherche input { height: 44px; }

    /* Les CHAMPS de la barre de liste, au même titre que ses boutons : le champ
       de recherche que rend BarreListe, et les sélecteurs que les écrans posent
       dans son contenu libre (la société sur /admin/utilisateurs). Un champ de
       31 px à côté d'un bouton de 44 se touche moins bien que son voisin, et
       c'est le champ qu'on vise en premier sur un écran de liste. */
    .barre-liste .form-control,
    .barre-liste .form-select { height: 44px; }

    /* La case à cocher de filtre (« Non affectés seulement ») : même limite que
       .tbl-case, un élément remplacé dont la zone de clic ne s'étend pas par
       pseudo-élément. Elle passe à 24 px, et c'est son <label> adjacent — déjà
       lié par « for » — qui offre la seconde cible. */
    .barre-liste .form-check-input { width: 24px; height: 24px; }
    .barre-liste .form-check-label { min-height: 24px; }
    .tbl-vider { min-width: 32px; min-height: 32px; }

    .tbl-menu-item,
    .tbl-menu-act,
    .tbl-menu-tout { min-height: 44px; }

    /* Case à cocher de ligne : 17 px, la plus petite cible de l'application.
       Une case native ne prend pas de pseudo-élément (élément remplacé), donc
       sa zone de clic ne peut pas être étendue au-delà de sa boîte sans
       l'envelopper d'un <label> — modification de balisage, hors de ce lot.
       Elle passe à 24 px, et c'est la COLONNE qui fournit les 44 px de rangée
       utile : la ligne entière reste la cible principale. Limite écrite dans
       docs/cibles-tactiles.md. */
    .tbl-case-col { width: 52px; }

    /* ── TOUTES LES CASES NATIVES DU BACK-OFFICE, D'UN COUP (2026-09-10) ──────
       Ceci remplace .tbl-case ci-dessus, .tbl-menu-item input, et ONZE règles
       identiques écrites une par une dans les feuilles d'écran — à 20 ou 22 px
       selon l'écran, pour le même geste et le même doigt. Le relevé : 20 px sur
       easystock, ecran-securite-module et ecran-modele-impression ; 22 px sur
       brouillard, cles-api, conservation, controle-paie, import-ecritures,
       modele-paie, sessions-saisie et webhooks ; 24 px ici. Trois valeurs, aucune
       raison, et douze endroits à tenir alignés.

       C'EST LA LIMITE N° 3 DE docs/cibles-tactiles.md QUI SE REFERME — « les
       écrans à feuille propre : leurs commandes locales ne sont pas atteintes par
       ce lot ». Elles le sont maintenant, et par la valeur que le document avait
       déjà fixée pour la case de liste et celle de BarreListe : 24 px.

       POURQUOI « .appgrid » DEVANT, ET POURQUOI « :where() » DERRIÈRE. app.css
       pose les 17 px de base sur `input:where([type=checkbox], [type=radio])`,
       spécificité (0,0,1) — et il est lié APRÈS ce fichier (App.razor:76 contre
       :55). À spécificité égale, l'ordre trancherait en sa faveur et cette règle
       ne ferait rien. `.appgrid` la porte à (0,1,1) : elle gagne, et elle se
       trouve borner exactement le bon périmètre — le POS monte ses écrans HORS
       du shell (.caisse-plein-ecran, .salle-plein-ecran, .inventaire-plein-ecran)
       avec sa propre densité et ses jetons --cai-*, et la charte s'arrête à la
       coquille. `:where()` autour des deux sélecteurs d'attribut garde la
       spécificité à celle de `.appgrid input`, pour qu'un écran qui aurait
       vraiment besoin d'autre chose puisse encore le dire avec une seule classe.

       CE QUE ÇA NE COUVRE PAS, ET C'EST VOULU : .iu-bascule-case, qui est un
       <div> dessiné et non une case native — aucune règle sur `input` ne
       l'atteint ; et les interrupteurs (.mx-switch, .nat-bascule .pastille), qui
       ne sont pas des cases. */
    .appgrid input:where([type="checkbox"], [type="radio"]) { width: 24px; height: 24px; }

    /* --- C. LES DEUX SURFACES QUE LE LOT AVAIT MANQUÉES -------------------
       Trouvées à la recette responsive du portail client (LOT 9), et aucune
       des deux n'est propre au portail : ce sont des surfaces partagées, ce
       que ce lot couvre par définition. Elles avaient échappé au relevé
       initial parce qu'elles ne sont ni dans la coquille ni dans .tbl-*.

       LA CARTE D'AUTHENTIFICATION — six écrans, trois portails (client,
       salarié, conso). Deux champs et un bouton à ~38 px, et c'est le PREMIER
       écran qu'un client voit, sur son téléphone, une fois. Rater le champ de
       mot de passe au doigt avant d'être entré ne se rattrape pas : il n'y a
       pas encore de session à laquelle revenir.

       LA BARRE D'OUTILS DE L'EN-TÊTE, CÔTÉ BOOTSTRAP (.mx-page-tete .btn) —
       cinq écrans du portail client. Ses commandes sont des `btn-sm`, mesurés
       à 31 px : la plus petite cible non couverte du dépôt après les cases à
       cocher.

       SEULEMENT .btn, ET C'EST LE POINT. Deux vocabulaires cohabitent dans
       cet en-tête : Bootstrap (.btn), employé par le portail, et le gabarit
       (.mx-btn), employé par les approbations de vente. Le SECOND EST DÉJÀ
       COUVERT — modele-erp.css pose `.mx-btn { min-height: 44px }` sous
       1024 px depuis le 2026-08-25. Le viser ici n'aurait rien ajouté qu'une
       seconde adresse pour une même règle, et la question « laquelle
       s'applique ? » le jour où l'une des deux change. Le trou n'était pas
       l'en-tête, c'était le vocabulaire que l'en-tête n'avait jamais servi
       avant le portail.

       PAS DE GOUTTIÈRE ENTRE LES SEGMENTS D'UN GROUPE. La règle des 6 px vise
       deux cibles INDÉPENDANTES ; « En cours / Tous » est un seul contrôle
       segmenté, comme .tbl-etats plus haut, que ce lot dimensionne sans
       jamais l'écarter. Les séparer donnerait deux boutons là où l'écran
       montre un choix. */

    .portail-auth .form-control,
    .portail-auth .btn { min-height: 44px; }

    .mx-page-tete .btn { min-height: 44px; min-width: 44px; }
}

/* --- La place doit venir de quelque part ------------------------------------
   Corollaire de la règle ci-dessus : si rien ne rétrécit, quelque chose doit
   sortir. Sous 640 px c'est le NOM du module — il est déjà porté par le tiroir
   et par le titre de l'écran, et il ne se clique pas. L'icône reste.

   ÉCART ASSUMÉ : ce n'est pas le palier complet de la barre du haut (repli des
   commandes secondaires dans un menu « … »), qui reste à faire. C'est le
   strict nécessaire pour que la règle des 44 px tienne sur la coquille.
   =========================================================================== */
@media (max-width: 640px) {
    /* Le jeton, et non `padding` : le lot 07 y ajoute le retrait de l'encoche
       (voir easytime-shell.css, .et-topbar). Un raccourci `padding` ecrit ici
       ecraserait ce retrait, et c'est sur le telephone qu'il sert. */
    .appgrid .et-topbar { gap: 8px; --et-topbar-px: 8px; }
    .appgrid .et-topbar .shell-marque > span { display: none; }
}