/* ==========================================================================
   tablette.css — LE PORTAIL AU DOIGT ET SUR TABLETTE
   (Marie, 31/08/2026 : « adapte le portail à 100 % pour téléphone et tablette »)

   POURQUOI. mobile.css règle le téléphone et s'arrête net à 640 px. Au-dessus,
   plus rien : entre 641 et 1180 px — c'est-à-dire TOUTE la tablette — le
   portail était servi comme un poste de bureau. Les mesures au navigateur
   (89 pages, trois largeurs) le disent sans détour : 0 champ fautif à 390 px,
   mais 204 champs sous 16 px à 768 px et 210 à 1024 px, et deux fois plus de
   cibles trop petites qu'au téléphone.

   LA RÈGLE D'OR : un poste de bureau à la souris ne voit RIEN changer. Tout ce
   qui touche à la taille des cibles est enfermé dans la bande « doigt »
   (hover: none + pointer: coarse), qu'aucune souris ne déclenche — et qui
   attrape au passage l'iPad Pro à 1366 px, que la bande de largeur rate. Tout
   ce qui touche au nombre de colonnes est enfermé dans la bande « tablette »,
   bornée à 1180 px : on n'y retombe jamais à une colonne, deux colonnes de
   300 px valant mieux qu'une de 700.

   ORDRE DE CHARGEMENT, condition de fonctionnement : nginx injecte mobile.css
   puis interieur.css juste avant </head>. Cette feuille doit venir APRÈS
   interieur.css, sinon le défilement des tableaux tombe en silence.

   LIMITE CONNUE, à trancher avec Marie : un iPad muni d'un clavier-trackpad se
   déclare « souris » et ne reçoit donc pas la bande doigt. Le couvrir coûterait
   de grossir les cibles d'un VRAI poste de bureau sous 1180 px : pas sans elle.
   ========================================================================== */


/* ==========================================================================
   1. AU DOIGT, À TOUTE LARGEUR — l'ergonomie tactile, et rien d'autre.
      Aucune de ces règles ne peut atteindre un écran piloté à la souris.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {

    /* Le poste le plus lourd de l'audit. Sous 16 px, iOS zoome à chaque mise au
       point et la page reste décadrée : on filtre l'accidentologie et l'écran
       part de travers. Un iPad est un appareil iOS — la largeur ne suffisait
       pas. Le !important est dû aux règles concurrentes, toutes plus
       spécifiques que le sélecteur nu (.toolrow select, .ind select, .champ
       input, .barre input[type=search]…) ; mobile.css fait de même sous 640 px. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select, textarea { font-size: 16px !important; }

    /* La police empêche le zoom, elle ne donne pas la cible : les listes
       déroulantes de filtre font 30 à 35 px partout. Les champs posés DANS un
       tableau sont exclus (les grandir gonflerait un listing de 380 lignes) ;
       ceux qu'on remplit vraiment au doigt sont repris nommément plus bas.
       textarea l'est aussi : il battrait textarea{min-height:96px} de
       mobile.css et rapetisserait les zones de saisie sur téléphone. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not(table input),
    select:not(table select) { min-height: 44px; }

    /* Les cases retombent à leurs 13 px natifs au-dessus de 640 px, alors que
       la tablette est exactement l'appareil qu'on tient debout pour cocher une
       checklist ou une fiche d'accueil. Les quatre derniers sélecteurs sont là
       parce que les pages écrivent .risque input[type=checkbox] (0,2,1), qui
       battrait un input[type=checkbox] nu. */
    input[type=checkbox], input[type=radio], .risque input[type=checkbox],
    .tache input[type=checkbox], .c-coches input[type=checkbox], #toolbar input[type=checkbox] {
        width: 22px; height: 22px; min-height: 0;
    }

    /* Les boutons d'action. La liste d'exclusions est reprise telle quelle de
       mobile.css (éprouvée sur 70 pages) : ni pastilles décoratives, ni icônes
       de ligne de tableau, ni onglets — chacun a sa règle. On ne touche PAS au
       display : trois pages de formulaire posent .btn{display:block;width:100%}
       et l'inline-flex les ramènerait à la largeur de leur texte. */
    button:not(table button):not(.pers-chip):not(.seg):not(.chip):not(.fermer):not(.tab):not(.mini):not([class*="onglet"]):not(.rel-select):not(.evt):not(.evt-plus),
    .btn:not(.mini), a.btn, .btn-mini, .btn-clair, .btn-envoyer, .btn-pdf, .btn-retirer, .btn-corbeille,
    .fr-bouton, .hbtn, .add-btn, .export-btn, .btn-marine, .btn-blanc, .btn-sortie,
    .tete-liens a, .liens a, .links a, .mic, .addphoto { min-height: 44px; }

    /* Le centrage vertical, réservé aux familles dessinées en inline-block :
       sans lui, la hauteur ci-dessus laisse le libellé collé en haut. Elles
       sont nommées une par une, aucune ne porte de bouton de formulaire pleine
       largeur — c'est ce qui rend le display sûr ici et pas au-dessus. */
    .admin-corps :is(.btn, .btn-mini), .btn-marine, .btn-blanc, .btn-sortie, .btn-clair, .fr-bouton,
    .btn-retirer, .btn-corbeille, .btn-pdf, .add-btn, .hbtn, .export-btn, #vue-suivi .btn,
    .tete-liens a, .liens a, .links a, .mic, .addphoto { display: inline-flex; align-items: center; justify-content: center; }

    /* Les boutons volontairement « mini » restent des cibles, sans transformer
       les listes de repères, de calques et de pièces jointes en colonnes de
       gros boutons : 38 px passe la barre des 36. */
    .btn.mini { min-height: 38px; padding: .4rem .75rem; }
    body button.mini:not(.btn), table.ro .mini, .cadre-ro .mini {
        min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    }

    /* Des cibles voisines dont l'une supprime : signer un participant / le
       retirer, télécharger un document / le jeter, plus les onglets et exports
       du document Système de Management, dont le rembourrage est en style EN
       LIGNE — seuls min-height et min-width peuvent encore les rattraper. */
    .participant :is(.p-sign, .p-del), .panneau-doc .doc a, .panneau-doc .doc button.suppr,
    .entite .membre button, .membres .membre button,   /* la croix qui retire une
        personne du coffre confidentiel : 20 px de large, collée à la liste de son
        droit — au doigt on visait le mauvais des deux (/cofinur/ et /urano/) */
    .entite .membre button, .e-tete .lien-admin, #tabs .tab, #view button, #overlay .modal-body button {
        min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
    }
    /* la croix de retrait d'un atelier : le !important bat la règle générale
       des boutons ci-dessus (0,8,2). On veut 36 px, pas une pastille de 48. */
    .gestion .puce button { min-height: 36px !important; min-width: 36px; padding: 0 .55rem; }

    /* UN LIEN EN « display:inline » IGNORE min-height. C'est le cas de
       « ⬇️ Ouvrir le fichier » de la commission sécurité : la règle ci-dessus
       lui donne bien 44 px, la boîte en fait 35. inline-flex les fait
       obéir. La page /signer/ pose .btn{display:block;width:100%} sur son
       lien PDF : width:100% survit à inline-flex, le bouton y reste pleine
       largeur (vérifié à 768 px). */
    a.btn { display: inline-flex; align-items: center; justify-content: center; }

    /* Les réglettes d'onglets. interieur.css §2 leur impose un rembourrage en
       !important qui les fige à 33 px, mais ne déclare AUCUN min-height : une
       hauteur passe devant sans entrer dans sa bataille, le centrage y est déjà. */
    .onglets > button, .onglets > a, .onglets .onglet, .onglets-rh > button, .onglets-rh > a,
    .tabs > button, .tabs > a, .forma-onglets > button, .sous-onglets > button, .vue-toggle > button { min-height: 44px; }
    /* mêmes rangées, même geste, mais qu'interieur.css n'habille pas : filtres
       des 1/4 h, voies arbre / 8M de l'enquête, aiguillage terrain / 5S. */
    :is(.filters, .modes, .bascule) > :is(button, a, span) { min-height: 44px; display: inline-flex; align-items: center; }

    /* Les pastilles qui sont de VRAIS boutons : filtres du DUERP et du parc,
       tri des salariés, choix du document de séance, participants, éditeur
       d'accès. Le préfixe body est indispensable — interieur.css §7 les rabote
       à .18rem avec une spécificité (0,1,1) qu'il faut dépasser. Les pastilles
       décoratives (.tag, .badge, .statut) ne sont pas touchées. */
    body .chips > button, body .docs > button, body button.chip, body a.chip,
    body .pers-chip, body .sous-chip, body .admin-corps .seg .seg-btn { min-height: 40px; padding: .45rem .9rem; }

    /* Le fil d'ariane : cible la plus répandue et la plus basse de tout l'audit
       (27-29 px sur presque chaque page), et seul chemin de retour vers le
       processus. Le !important bat .navlinks a{padding:.3rem .55rem!important}. */
    #fil-ariane .fil-retour, .topbar .navlinks .fil-retour {
        min-height: 48px; padding-left: .7rem !important; padding-right: .7rem !important;
    }
    /* Le reste de la navigation est fait de liens NUS : sans inline-flex, une
       hauteur sur un <a> inline ne fait rien du tout. --touche vaut 48 px là où
       processus.css est chargé, 44 ailleurs : rien ne rétrécit. */
    body .topbar a, body .topbar button, body .tete a, body .tete button, body > header > a,
    .pagehead .fil a, .tete .wrap a, .entete-page a.pdf, .sommaire a, #tb-module, #tb-module ~ a {
        min-height: var(--touche, 44px); display: inline-flex; align-items: center;
    }
    .pagehead .fil a { padding: 0 .6rem; margin-left: -.6rem; }
    body > header > a, #tb-module, #tb-module ~ a { padding: .35rem .6rem; }
    /* le parent est en align-items:baseline : sans align-self, le lien s'étire */
    .entite > header a { min-height: 44px; display: inline-flex; align-items: center; align-self: center; }
    /* « se connecter » du pied de la remontée QR : unique sortie de la page,
       15 px de haut. inline-block et non flex, pour ne pas casser la phrase. */
    /* Le rembourrage LATÉRAL décrochait le point final : 9,6 px de trou entre le
       mot souligné et le « . » de la phrase. On le ramène à 2,4 px, invisible,
       et on rattrape la hauteur de cible sur le vertical (43,8 px). */
    .pied a { display: inline-block; padding: .9rem .15rem; }

    /* Les replis sont la seule façon d'ouvrir la GED d'un salarié, les
       habilitations, les ancrages d'un plan ou le « qui modifie quoi ? » des
       fils rouges. On ne touche PAS au display : un summary est en list-item,
       toute autre valeur efface le triangle ▸. */
    body summary { min-height: 44px; padding: .55rem .4rem; }
    /* la frise : pastilles de famille à 30 px, liens d'outils à 26 px — la
       cible la plus RÉPÉTÉE du portail (huit accueils et l'accueil BEMACO). */
    body .fresque .fr-fam > a, body .fresque .fr-outils a { min-height: 40px; }

    /* Les cases qu'on touche pour SAISIR : ce sont des boutons déguisés en
       cellules — case atelier × mois d'un audit, note 0-5 de la polyvalence,
       valeur mensuelle d'un indicateur, suivi bi-mensuel, préventif niveau 1.
       À 26 px on tape dans la colonne d'à côté, et une valeur fausse repart
       ensuite dans les taux de fréquence. */
    .gridbox table.grille .cell { width: 60px; height: 44px; }
    body .cadre td.n { height: 2.5rem; min-width: 2.5rem; }
    body .ind tbody td[contenteditable] { height: 40px; padding-top: .55rem; padding-bottom: .55rem; }
    .card > #zone input.cell, #vue-suivi .cell { min-height: 40px; }
    /* le libellé d'un indicateur EST le bouton qui ouvre son historique, et la
       page le déclare padding:0 depuis le corps du document, donc après nous */
    .ind td.lib .nom button { padding: .45rem 0 !important; }
    /* Conforme / Non conforme / Sans objet : le geste répété quarante fois par
       audit, debout dans l'atelier, souvent avec des gants. */
    .q .ans { width: 52px; height: 52px; }
    /* les lignes à cocher : le libellé fait partie de la cible. 40 px et non
       44 — ce sont des lignes de liste (signataires parmi 371 noms, pièces
       jointes d'un PPSPS, ateliers d'une FDS), pas des boutons d'action. */
    .em-case, .cases > .case, .ateliers-coches > label, .services > label { min-height: 40px; }

    /* L'affiche QR d'un atelier : un lien nu de 21 px, seule action de la
       carte, et c'est le geste même de la page — quelqu'un debout qui veut
       l'affiche du poste où il se trouve. */
    .carte-qr a.affiche { min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
        padding: .5rem .9rem; margin-top: .5rem; }

    /* La croix qui retire une photo est posée SUR une vignette qu'on touche
       pour agrandir : à 20 px, c'est la suppression qu'on déclenche en voulant
       regarder. Le décalage de 8 px est exactement le gap de .thumbs — la croix
       affleure la vignette voisine au lieu de mordre dessus. */
    :is(.thumbs, .photos) .thumb > button { width: 30px; height: 30px; top: -8px; right: -8px; font-size: .85rem; }
    /* même croix côté remontées : le !important bat le <style> que
       js/photos-ticket.js injecte à l'exécution, donc après toutes les feuilles */
    .bph-grille .vignette button, .photos-grille .vignette button, .photos .vignette button {
        width: 32px !important; height: 32px !important; min-height: 32px !important; font-size: 1rem;
    }
    /* le nom du secteur est le seul chemin vers sa fiche, et c'est un <a> nu */
    .gestion .ligne .nom-sect { min-height: 40px; display: inline-flex; align-items: center; }

    /* « Documents attendus du mois » : cases de 18 px, flèches de mois de 32,
       frise des douze mois de 26. On écarte AUSSI les lignes — grossir des
       cibles sans les espacer rapproche deux voisines à moins de 8 px et
       produit exactement les fautes de frappe qu'on cherche à éviter. */
    .att-case { width: 2rem; height: 2rem; font-size: .95rem; }
    .att-fleche { width: 2.75rem; height: 2.75rem; }
    .att-annee button { height: 2.25rem; font-size: .7rem; }
    .att-l { padding: .6rem 0; gap: .7rem; }
    /* pastilles d'événement du calendrier : 20 px, et c'est pourtant l'objet
       même de la page. 36 px et non 44 — une case de jour porte jusqu'à quatre
       événements, 44 px donnerait une semaine de plus de 200 px de haut. */
    .cal .evt, .cal .evt-plus { min-height: 36px; padding: .45rem .4rem; margin-bottom: .3rem; }
    /* le pavé où l'entreprise extérieure signe le plan de prévention. Sûr à
       agrandir : la page recalcule la trame du canvas depuis la boîte CSS à
       l'ouverture. Borné en vh pour rester entier sur un écran couché. */
    #sigcanvas { height: min(260px, 34vh); }

    /* LE TROU NOIR DE LA FICHE SALARIÉ : le crayon d'édition, les outils de
       ligne, « relier une pièce » et le détachement d'une pièce sont posés à
       opacity:0 et ne reviennent qu'au survol. Sans souris ils N'EXISTENT PAS,
       et aucune de ces actions n'a d'autre chemin dans la page. */
    body .titre-ligne :is(.titre-outils, .ligne-mod, .ligne-rec, .ligne-sup, .ligne-ranger, .btn-lier, .chip-x) { opacity: 1; }
    /* Idem sur la carte des échéances : au doigt, rien ne survole. */
    body .alerte-ligne .alerte-act { opacity: 1; }
}


/* ==========================================================================
   2. LA TABLETTE (641 → 1180 px) — la mise en page : le nombre de colonnes
      et la place. Rien sur la taille des cibles, c'est la section 1 qui s'en
      charge, pour ne jamais toucher un poste à souris.
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1180px) {

    /* LE VRAI BUG, et il ne se voit pas dans le « 0 page qui déborde » : rien
       ne déborde parce que tout est ROGNÉ. interieur.css §7 pose
       body :is(.tablewrap, …){overflow:hidden} (0,1,1), chargé après le <style>
       de chaque page, et écrase le .tablewrap{overflow-x:auto} que huit pages
       déclarent chacune de leur côté (0,1,0). Sur iPad, les colonnes de droite
       de l'accidentologie — le flash accident, l'arbre des causes — sont
       aujourd'hui INATTEIGNABLES. overflow-y reste hidden : l'arrondi tient. */
    body :is(.card.tablewrap, .tablewrap) { overflow-x: auto !important; }
    /* deux tableaux larges sans conteneur : le radar VGP, et les fiches du
       document Système de Management qui s'ouvrent dans une fenêtre */
    .vgp-famille, #overlay .modal-body { overflow-x: auto; }
    /* le défilement s'arrête au bout du tableau au lieu d'entraîner la page ou
       de déclencher le geste de retour arrière du navigateur */
    .tablewrap, .defile, .ind .cadre, .apercu, .vgp-famille, #overlay .modal-body { overscroll-behavior-x: contain; }

    /* Les accueils de processus. Une fois la frise déduite, les grilles à 3 ou
       4 colonnes tombent à 159 px de colonne : on descend à 2, jamais à 1. La
       seconde ligne annule le « span 2 » que /qse/ et /rh/ donnent à leurs deux
       premières cartes, sans !important. */
    body .services .grid.principales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .services .grid.principales > a.card:nth-child(-n+2) { grid-column: span 1; }
    body .p-qse .services .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* L'accueil BEMACO. Les zones nommées DOIVENT être redessinées en même
       temps que les colonnes, sinon les tuiles se chevauchent — la page le
       documente elle-même. « dir » et « outils » ne sont réclamés par aucune
       tuile : ils n'ouvrent que deux cellules vides que le placement
       automatique remplit dans l'ordre du DOM. On lit donc QSE en pleine
       largeur, puis Direction+RH, Production+Maintenance, Outils+Chantier. */
    body .bento { grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "feat feat" "dir rh" "prod maint" "outils chan"; }

    /* La frise en volet latéral emporte jusqu'à 292 px : lui en rendre 52 fait
       passer les colonnes ci-dessus d'environ 290 à 345 px. L'ancrage sur
       « > .fresque » rend la règle inerte dès que le parent n'est plus en flex. */
    body .services .wrap.avec-fresque > .fresque, body .procs .wrap > .fresque { flex-basis: 240px; }

    /* Les rangées de compteurs. Partout le plancher est à 150-158 px : on
       obtient 4 à 6 tuiles de 155 à 176 px, où « équipements jamais déclarés en
       VGP » tombe sur trois lignes sous un chiffre de 2 rem. À 200 px : trois
       tuiles à 768, quatre à 1024, toutes lisibles. Le min(100%, …) évite tout
       débordement dans une carte plus étroite que le plancher. */
    body .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
    body .admin-corps .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
    body .panneau .kpis { grid-template-columns: 1fr 1fr; } /* le volet de chantier a choisi 2 colonnes */
    body .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sg-jauges { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    #contenu .tuiles { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
    /* les tuiles de la remontée par QR : le premier geste de l'opérateur qui
       vient de scanner, avec des gants — 2 colonnes de 356 px plutôt que 4 de 165 */
    .choix { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

    /* Les grilles qui retombaient à UNE colonne beaucoup trop tôt. Les tableaux
       de bord renvoient tout en pleine largeur sous 960 et 1100 px : à 768 px
       cela empile une quinzaine de cartes, près de cinq mille pixels de
       défilement pour des camemberts qui tiennent à deux de front. Les cadres
       .col-8 et .c12 restent pleine largeur : histogrammes à libellés longs. */
    .tab-content > .grid > .card.col-6 { grid-column: span 6; }
    .grille > .c6 { grid-column: span 6; }
    body.en-fiche .fiche-damier { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .c-grille { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    /* l'analyse 8M : quatre branches de 165 px pour y écrire des phrases */
    #a8m-qqoqcp { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    #a8m-branches { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

    /* La colonne de libellés qui mange l'écran : le tableau des indicateurs
       fige la sienne à 17 rem, soit 37 % d'un écran de 768 px avant même le
       premier mois. À 11 rem on voit six mois au lieu de trois, la colonne
       restant collée à gauche pendant le défilement. */
    body .ind table th.lib, body .ind table td.lib { min-width: 11rem; }

    /* Les grilles annuelles font 900 px pour douze mois : on défile forcément,
       et en défilant on perd le nom de l'atelier, seule chose qui donne un sens
       à la case qu'on regarde — même parti que la matrice de polyvalence sur
       téléphone. Le z-index 3 met l'en-tête au-dessus des cellules collées,
       sinon un trou blanc s'ouvre au-dessus de la colonne. */
    .gridbox table.grille:not(.recap-chantiers) td.atelier { position: sticky; left: 0; z-index: 1; background: #fff; }
    .gridbox table.grille thead th:first-child { position: sticky; left: 0; z-index: 3; background: #eef1f7; }

    /* Les libellés coupés au tiers. Sur l'écran de triage du lundi matin, un
       intitulé tronqué (« Définir et imposer les EPI adapt… ») oblige à ouvrir
       la fiche pour savoir de quoi il s'agit. Seul le titre est libéré : la
       deuxième ligne garde son ellipse pour que la ligne ne s'étale pas. */
    .vue-carte .vue-item .lib { white-space: normal; overflow: visible; text-overflow: clip; }
    /* le calendrier garde ses sept colonnes de 100 px : deux lignes suffisent à
       reconnaître « VGP chariot… » ou « Formation ha… » */
    .cal .evt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; line-height: 1.25; }

    /* La commission sécurité, c'est « le document support en grand ». Sa
       hauteur est figée à 640 px : sur un iPad couché cela remplit l'écran sans
       laisser voir les notes, debout cela laisse du vide. 62vh cale le document
       sur l'écran réel dans les deux orientations, et le contain cesse d'étirer
       les supports fournis en image. */
    .visionneuse, .visionneuse iframe, .visionneuse img { min-height: 0; height: 62vh; }
    .visionneuse img { object-fit: contain; }
    /* les notes passent sous le document en une colonne : à 560 px de haut, il
       faut trois écrans pour aller de l'un à l'autre pendant la séance */
    .support textarea { min-height: 280px; }
    /* le sélecteur de signataires est figé à 300 px : dix noms visibles sur 371 */
    .em-choix, .em-choix.em-salaries { max-height: 48vh; }
}


/* ==========================================================================
   3. COMPLÉMENTS TÉLÉPHONE (≤ 640 px) — les trois défauts que l'audit à
      390 px a trouvés APRÈS mobile.css, et qu'elle ne pouvait pas voir.
   ========================================================================== */
@media (max-width: 640px) {

    /* DUERP, onglet Indicateurs : la ligne « picto | libellé | barre | total »
       réserve 150 px au libellé, si bien qu'à 390 px la barre horizontale tombe
       à 0 px et le graphique des catégories de danger devient une colonne de
       nombres. Libellé et barre se partagent désormais ce qui reste ; le
       libellé se tronque proprement, il porte déjà une ellipse et un title. */
    .ligne-bar { grid-template-columns: 30px minmax(0, 1fr) minmax(56px, 1fr) 40px; gap: .4rem; }
    .ligne-bar.sans-picto { grid-template-columns: minmax(0, 1fr) minmax(56px, 1fr) 40px; }

    /* PLAN DE CHANTIER CASSÉ AUJOURD'HUI. Les deux lignes de mobile.css qui
       ramènent #scene à 100 % ont été écrites pour /outils/plans.php, où .scene
       est le conteneur. Sur /chantier/suivi.php, .scene est au contraire la
       SURFACE déplacée par transform : ramenée à 100 %, elle rogne toutes les
       tuiles hors du premier écran et les canvas écrasés désalignent les
       repères, alors que le code garde la taille d'origine. Les spécificités
       (1,1,0) et (1,1,1) suffisent, sans !important. */
    .zone > #scene, .zone > #scene > canvas, .zone > #scene > img { max-width: none; overflow: visible; }
}


/* ==========================================================================
   4. LES BOÎTES QUI REFUSENT DE RÉTRÉCIR (≤ 1180 px)
   Ce que règle cette section : deux débordements que le ré-audit a trouvés
   APRÈS coup. Ils ont la même cause — un enfant de grille ou de flex a
   min-width:auto par défaut, donc il POUSSE son parent au lieu de tenir
   dedans, et le défilement prévu ne se déclenche jamais.
   ========================================================================== */
@media (max-width: 1180px) {

    /* CALENDRIER QSE. .cal porte bien overflow-x:auto et .cal-grille son
       min-width:700px, mais .disposition repasse à « 1fr » sous 1100 px
       (calendrier.php:46) au lieu de « minmax(0, 1fr) » : la boîte grandit
       jusqu'aux 700 px de la grille au lieu de la faire défiler, et sept
       colonnes sortent de l'écran. */
    .disposition > * { min-width: 0; }

    /* ACCIDENTOLOGIE. Le groupe de période — deux champs de date et les
       flèches — s'est élargi le jour où les champs sont passés à 16 px pour
       ne plus faire zoomer iOS : 424 px dans une barre de 361. Il se replie
       maintenant, comme le reste de la barre de filtres. */
    .toolrow > div { min-width: 0; flex-wrap: wrap; }
    .toolrow input[type=date] { min-width: 0; }
}