/* ==========================================================================
   mobile.css — LE PORTAIL SUR TÉLÉPHONE (Marie, 26/08 : « adapte
   l'application à 100 % pour les téléphones »).

   Injectée par nginx sur TOUTES les pages HTML (sub_filter sur </head>), donc
   aussi sur celles qui n'ont ni processus.css ni le bloc d'habillage. Elle ne
   fait rien au-dessus de 640 px : le bureau ne change pas.

   Ce qu'elle règle, dans l'ordre d'importance :
   1. les champs à 16 px minimum — sous 16 px, iOS zoome à chaque frappe ;
   2. les tableaux larges défilent dans leur boîte au lieu de pousser la page ;
   3. les grilles passent à une colonne, les rangées de boutons se replient ;
   4. les cibles tactiles (boutons) font au moins 40 px de haut ;
   5. marges, titres et fenêtres modales ramenés à la largeur de l'écran.
   ========================================================================== */
@media (max-width: 640px) {
    html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
    img, video, canvas, svg { max-width: 100%; height: auto; }

    /* 1. Champs : plus de zoom intempestif, doigt à l'aise. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
    select, textarea { font-size: 16px !important; min-height: 42px; }
    textarea { min-height: 96px; }

    /* 2. Tableaux : ils défilent horizontalement dans leur boîte. */
    table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table th, table td { white-space: nowrap; }

    /* 3. Grilles et rangées. */
    .grid, .grille, .rangee, .rangée, .choix, .fiche-damier, .damier, .kpis, .kpi-grid, .cartes, .tuiles,
    .colonnes, .deux-colonnes, .trois-colonnes, .form-grid, .ind-grid, .stats, .chiffres, .cases, .partie-grille,
    /* :not(.cal-grille) — LE CALENDRIER N'EST PAS UNE GRILLE DE CARTES.
       Depuis le 26/08, « [class*="-grille"] » attrapait aussi .cal-grille et
       ramenait le mois à UNE colonne : les 31 jours s'empilaient sur 3 300 px,
       les sept en-têtes LUN MAR MER restant, eux, sur une ligne. Un calendrier
       qui n'a plus de semaines n'est plus un calendrier. Il a sa propre règle
       plus bas : sept colonnes de 100 px qui défilent dans leur boîte. */
    [class*="grid-"], [class*="-grille"]:not(.cal-grille), [class*="cols-"] { grid-template-columns: 1fr !important; }
    .grid > a.card { grid-column: auto !important; }
    .rangee > *, .rangée > * { min-width: 0; }
    .onglets, .forma-onglets, .doc-onglets, .actions, .boutons, .volet-tete, .ligne-depot, .ajout,
    .barre, .filtres, .toolbar, .entete-actions, .topbar .navlinks { flex-wrap: wrap; }
    .onglets { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .2rem; }
    .onglets > button, .onglets > a { flex: 0 0 auto; }
    .en-fiche .fiche-colonnes, .fiche-colonnes, .deux-col, .side-by-side { display: block !important; }
    .en-fiche .fiche-colonnes > *, .fiche-colonnes > * { width: 100% !important; max-width: 100% !important; }

    /* 4. Cibles tactiles : les boutons d'action, pas les pastilles ni les cases de tableau. */
    button:not(table button):not(.pers-chip):not(.seg):not(.chip):not(.fermer):not(.tab):not(.mini):not([class*="onglet"]):not(.rel-select),
    .btn, .btn-mini, .btn-envoyer, .btn-pdf, a.btn { min-height: 40px; }
    .btn-mini { padding: .45rem .8rem; }
    a.card .more { padding: .6rem 1rem; min-height: 40px; display: inline-flex; align-items: center; }

    /* 5. Gabarit : marges, en-têtes, cartes, modales. */
    .wrap { padding-left: .85rem !important; padding-right: .85rem !important; }
    .topbar .wrap { padding-top: .45rem; padding-bottom: .45rem; gap: .5rem; }
    .brand img { height: 36px !important; }
    .hero .wrap, .pagehead .wrap { padding-top: 1.2rem !important; padding-bottom: 1.2rem !important; }
    .hero h1, .pagehead h1, h1 { font-size: 1.35rem !important; line-height: 1.2; }
    .hero .lead, .pagehead p { font-size: .92rem; }
    h2 { font-size: 1.08rem; }
    .card, .form-carte, .form-action, .dossier, .partie-bloc { padding: .85rem .8rem !important; }
    .succes, .zone-depot { padding: 1rem .85rem !important; }
    .fenetre > div, [role="dialog"] > div, .modal > div, .choix-boite { width: calc(100vw - 1.2rem) !important; max-width: none !important;
        max-height: 92vh; overflow: auto; margin: .6rem auto; }
    .pers-chip { padding: .45rem .8rem; font-size: .9rem; }
    .doc-cat-titre, summary { padding: .55rem .4rem; }
    .titre-ligne { grid-template-columns: 1fr !important; }
    .sigpad { height: 160px !important; }
    /* Cases à cocher et boutons radio : à la taille du doigt. */
    input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; }
    /* La barre du haut se replie au lieu de déborder (processus.css la fige en nowrap à 640 px). */
    .topbar .wrap { flex-wrap: wrap !important; row-gap: .3rem; }
    .topbar .navlinks, .navlinks { flex-wrap: wrap; justify-content: flex-end; gap: .3rem .5rem; }
    .navlinks a, .navlinks button { font-size: .85rem !important; padding: .3rem .55rem !important; }
    pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* --------------------------------------------------------------------------
   Cas particuliers relevés par l'audit du 26/08 (390 px de large).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    /* Calendrier QSE : sept colonnes ne tiennent pas — la grille garde sa
       largeur de lecture et défile dans sa boîte. */
    .cal { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    .cal-entetes, .cal-grille { min-width: 700px; }
    /* Plan du chantier : la scène se déplace au doigt dans sa boîte. */
    #scene { max-width: 100%; overflow: auto; }
    /* Matrice de polyvalence : la première colonne reste sous le doigt. */
    table.tension th:first-child, table.tension td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; }
}

@media (max-width: 640px) {
    /* Bandeau des pages RH : la description revient au bord, sous le titre. */
    header.bandeau p { padding-left: 0 !important; }
    /* Barres d'onglets « soulignés » (audits…) : elles défilent au doigt. */
    .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .tabs button { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 640px) {
    /* Lignes d'alerte des fiches (formations à recycler, constats) : la date
       passait devant et laissait 1 px au libellé — elle passe dessous. */
    .alerte-ligne { flex-wrap: wrap; }
    .alerte-libelle { flex: 1 1 55%; }
    .alerte-quand { flex: 0 0 100%; white-space: normal !important; padding-left: calc(34px + .6rem); }
}

@media (max-width: 640px) {
    /* Barres de filtres (plan d'action…) : chaque contrôle tient dans la carte. */
    .barre > select, .barre > input, .barre > label, .barre > button { max-width: 100%; min-width: 0 !important; width: 100%; box-sizing: border-box; }
    .barre > .chip-retard, .barre > .muted { width: auto; }
}


/* ==========================================================================
   REFONTE DU 10/09/2026 — LA DENSITÉ (Marie : « refais une belle adaptation
   de l'application complète pour téléphone, tablette etc. »)

   CE QUI N'ALLAIT PAS, ET QUI NE SE VOYAIT PAS DANS LES CHIFFRES. L'audit
   annonçait « 0 page qui déborde » — et c'était vrai. Le défaut n'était pas là :
   tout TENAIT, mais tout était trop gros. Sur un écran de 390 × 844 :
     · la barre du haut prenait 225 px, 27 % de l'écran, avant le moindre mot ;
     · une carte d'outil faisait 480 px de haut : un outil et demi par écran,
       là où le processus QSE en compte quatorze ;
     · quatre compteurs empilés un par ligne repoussaient la liste des salariés
       à mille pixels de défilement ;
     · le bouton 🧰 recouvrait le dernier champ de chaque page.
   Ne rien couper est honnête ; obliger à faire défiler dix écrans pour trouver
   un outil ne l'est pas.

   RÈGLE D'OR INCHANGÉE : rien ici ne sort de la bande ≤ 640 px. Le bureau et la
   tablette ne voient rien changer.
   ========================================================================== */
@media (max-width: 640px) {

    /* ---- 1. LES CARTES D'OUTILS DEVIENNENT DES LIGNES D'ANNUAIRE ----------
       L'icône à gauche sur toute la hauteur, le texte à droite, un chevron au
       bout. C'est le motif que tout le monde connaît d'un téléphone, et il fait
       passer la carte de 480 px à environ 120 : cinq outils par écran au lieu
       d'un et demi. Le bouton « Ouvrir → » disparaît au profit du chevron : la
       carte entière est déjà cliquable, il ne disait rien de plus et coûtait
       une ligne à chaque fois. */
    /* LES COLONNES SONT « auto », ET LES ÉCARTS SONT PORTÉS PAR LES ÉLÉMENTS.
       Première version : trois colonnes dont une de 2,5 rem pour l'icône. Sur
       /production/, dont les cartes n'ont PAS d'icône, cela laissait une
       colonne vide et décalait tout le texte de 68 px vers la droite. Une
       colonne « auto » sans contenu ne mesure rien ; l'écart, lui, doit
       disparaître avec l'élément — d'où column-gap à zéro et des marges sur
       l'icône et le chevron. */
    .services .grid > a.card, .procs .grid > a.card {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 0; row-gap: .16rem;
        align-content: center;
        padding: .8rem .9rem !important;
        min-height: 0;
    }
    .services .grid > a.card > *, .procs .grid > a.card > * { grid-column: 2; min-width: 0; }
    .services .grid > a.card > .ico, .procs .grid > a.card > .ico {
        grid-column: 1; grid-row: 1 / span 9; align-self: center;
        width: 2.5rem !important; height: 2.5rem !important; font-size: 1.25rem !important;
        margin: 0 .8rem 0 0 !important;
    }
    /* Le chevron remplace le bouton, collé au bord droit, centré en hauteur. */
    .services .grid > a.card > .more, .procs .grid > a.card > .more {
        grid-column: 3; grid-row: 1 / span 9; align-self: center; justify-self: end;
        margin-left: .5rem;
        min-height: 0 !important; padding: 0 !important; background: none !important;
        box-shadow: none !important; border: 0 !important;
        color: var(--fam, #3a4a68) !important;
        /* Le libellé « Ouvrir → » est REMPLACÉ par le chevron, pas rapetissé à
           zéro : un texte de 0 px reste un texte, les lecteurs d'écran le
           lisent et l'audit le compte comme illisible. */
        overflow: hidden; text-indent: -999em; width: 1rem; height: 1.5rem;
        position: relative;
    }
    .services .grid > a.card > .more::after, .procs .grid > a.card > .more::after {
        content: "›"; font-size: 1.5rem; font-weight: 700; line-height: 1.5rem;
        position: absolute; inset: 0; text-indent: 0; text-align: right;
    }
    /* TOUS LES TITRES À LA MÊME TAILLE. Les accueils donnent un corps plus
       gros aux deux premières cartes (.majeure, :first-child) pour les mettre
       en avant sur un grand écran : en colonne unique, cela ne hiérarchise plus
       rien — cela fait juste une ligne qui dépasse des autres. */
    .services .grid > a.card h3, .procs .grid > a.card h3,
    .services .grid > a.card.majeure h3, .services .grid.principales > a.card h3,
    .services .grid > a.card:first-child h3 { font-size: 1rem !important; line-height: 1.25; }
    /* La description tient en deux lignes : au-delà, on ouvre l'outil. */
    .services .grid > a.card p, .procs .grid > a.card p {
        font-size: .84rem; line-height: 1.4; flex: none;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .services .grid > a.card .tag, .procs .grid > a.card .tag {
        justify-self: start; padding: .1rem .45rem;
    }
    .grid { gap: .55rem !important; }
    .card.soon { min-height: 0; padding: .7rem .9rem !important; }

    /* ---- 2. LES COMPTEURS PAR DEUX ---------------------------------------
       mobile.css ramenait TOUTES les grilles à une colonne — bon réflexe pour
       une carte qui contient un paragraphe, absurde pour un compteur qui
       contient « 47 » et « expirés ». Deux colonnes de 175 px suffisent
       largement, et quatre compteurs tiennent en deux lignes au lieu de huit. */
    /* .fiche-damier RETIRÉ de cette liste : ce n'est pas une rangée de
       compteurs. Ses deux cases portent un titre long et un paragraphe ; à
       179 px, « 🎓 Formation » se casse en deux lignes, le chevron tombe seul
       sur une troisième et les textes sont tronqués. Elle garde la colonne
       unique que la page prévoit déjà pour elle. */
    .kpis, .chiffres, .stats, .kpi-grid, .tuiles, #contenu .tuiles,
    .sg-jauges, .cartes-chiffres {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }
    .kpis > *, .chiffres > *, .stats > *, .tuiles > * { min-width: 0; }
    .tuiles > * { padding: .7rem .75rem !important; }
    .kpi, .chiffre-carte, .stat { padding: .7rem .75rem !important; }
    .kpi .val, .kpi .n, .chiffre, .stat .val { font-size: 1.5rem !important; line-height: 1.1; }
    .kpi .lib, .kpi small, .stat .lib { font-size: .74rem; line-height: 1.3; }
    /* Un compteur qui porte un graphique ou une phrase garde toute la largeur. */
    .kpis > .card:has(canvas), .kpis > .card:has(svg), .chiffres > :has(canvas) { grid-column: 1 / -1; }

    /* ---- 3. LE BOUTON 🧰 NE RECOUVRE PLUS RIEN ---------------------------
       Il est fixe en bas à droite, 54 px de côté : il masquait le dernier
       champ de chaque page — vu sur la fiche salarié, où il cachait « Trier ».
       Une réserve en bas de page suffit, et elle ne coûte rien ailleurs. */
    main, body > .wrap:last-of-type, .admin-corps { padding-bottom: 4.75rem !important; }
    footer { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

    /* ---- 4. CE QUI DÉFILE DOIT LE DIRE -----------------------------------
       La réglette des familles, les onglets, les rangées de puces défilent au
       doigt depuis le 27/08 — sans le moindre indice. On voyait « MAÎTRISER LES
       RISQUES » coupé net et on croyait à un bug d'affichage. Un dégradé sur le
       bord droit dit « il y a une suite », et disparaît au bout de la course. */
    .fresque .fr-liste, .onglets, .tabs, .forma-onglets, .doc-onglets {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent);
    }
    /* Le fondu seul ne suffit pas sur des majuscules épaisses : on croit encore
       à un mot coupé. Un chevron posé sur le bord — par le PARENT, qui lui ne
       défile pas, sinon il partirait avec le contenu — dit franchement « ça
       continue par là ». */
    .fresque { position: relative; }
    .fresque::after {
        content: "›"; position: absolute; right: .35rem; top: 50%; transform: translateY(-50%);
        font-size: 1.5rem; font-weight: 700; line-height: 1; color: #8a90a0;
        pointer-events: none; z-index: 2;
    }
    .fresque.fr-fini::after { display: none; }
    /* Arrivé au bout, plus rien à annoncer : le masque se lève. */
    .fresque .fr-liste:not(:has(> :nth-child(3))), .onglets:not(:has(> :nth-child(3))) {
        -webkit-mask-image: none; mask-image: none;
    }

    /* ---- 5. LE FOND NE DOIT PAS GÊNER LA LECTURE -------------------------
       La photo de fond (27/08) est posée sous un voile clair calculé pour un
       grand écran. Sur un téléphone tenu à bout de bras dans un atelier, le
       texte gris des chapôs passait sur un soudeur à l'arc. On épaissit le
       voile : la photo reste, elle cesse de concurrencer les mots. */
    /* `html body::before` et pas `body::before` : habillage.css pose le sien
       avec un voile de .40/.56, et il est chargé APRÈS cette feuille par les
       pages elles-mêmes. À spécificité égale, le dernier gagne — il faut donc
       peser un cran de plus. La photo n'est pas nommée : on ne remplace que le
       voile, chaque page garde SA photo. */
    html body::before {
        background-image:
            linear-gradient(rgba(246, 247, 250, .86), rgba(246, 247, 250, .93)),
            var(--hab-photo, var(--fond-page, url('/img/fond2.jpg'))) !important;
        background-position: center; background-size: cover; background-repeat: no-repeat;
    }

    /* ---- 6. LES BANDEAUX DE PAGE RESPIRENT MOINS -------------------------
       Titre, sous-titre et fil : 1,2 rem en haut et en bas, c'est un tiers
       d'écran pour dire où l'on est. On garde le titre lisible et on rend le
       reste au contenu. */
    .pagehead .wrap { padding-top: .9rem !important; padding-bottom: 1rem !important; }
    .pagehead .lead, .hero .lead, .pagehead p.lead {
        font-size: .85rem; line-height: 1.35; margin-top: .25rem;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .fam-chapo { font-size: .84rem; line-height: 1.35; margin: .1rem 0 .5rem; }
    .services .famille h2, .services h2 { margin-bottom: .55rem !important; font-size: 1.05rem; }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — LES TROIS BLOCS DE L'ACCUEIL QUI ONT LEUR PROPRE
   MOBILIER. /bemaco/ n'utilise ni .services .grid ni .kpis : ses tuiles, sa
   barre de chiffres et sa carte de suivi sont écrites dans la page. Elles
   méritent le même traitement, elles ne pouvaient pas le recevoir des
   sélecteurs communs.
   ========================================================================== */
@media (max-width: 640px) {

    /* La carte « Gestion de tickets » : une icône de 1,8 rem perdue à gauche
       d'un texte sur quatre lignes très aérées, pour une carte de 320 px. Même
       parti que les cartes d'outils : deux lignes de texte, un chevron. */
    .suivi-card { gap: .7rem; padding: .7rem .85rem; align-items: center; }
    .suivi-card .suivi-ic { font-size: 1.5rem; flex: none; }
    .suivi-card .suivi-txt strong { font-size: .97rem; line-height: 1.25; }
    .suivi-card .suivi-txt span {
        line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden;
    }
    .suivi-card .suivi-fleche { flex: none; }

    /* La barre de chiffres : quatre cellules en flex donnaient « 3 puis 1 »,
       une cellule orpheline sur sa ligne avec un filet qui ne sépare plus rien.
       Deux colonnes franches, et les filets deviennent une grille. */
    .readout {
        display: grid !important; grid-template-columns: 1fr 1fr;
        margin-top: 1.4rem !important; gap: .1rem .9rem;
    }
    .readout .cell {
        padding: .45rem .8rem .45rem 0 !important; margin: 0 !important;
        border-right: 1px solid rgba(255, 255, 255, .22) !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }
    .readout .cell:nth-child(2n) { border-right: 0 !important; padding-right: 0 !important; }
    .readout .cell:nth-last-child(-n+2) { border-bottom: 0; }
    .readout .n { font-size: 1.45rem; }
    .readout .l { margin-top: .2rem; font-size: .62rem; }

    /* La tuile en vedette : 220 px de haut sur un écran de 844, pour un titre
       et deux lignes — elle mangeait le quart de ce qui reste après le bandeau. */
    .tile-feat { min-height: 150px !important; }
    .tile-feat .body { padding: 1rem .95rem .9rem !important; }
    .tile-feat h3 { font-size: 1.08rem !important; margin: .2rem 0 !important; }
    .tile-feat p {
        font-size: .85rem; line-height: 1.35;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — RIEN SOUS 11 PIXELS.

   MESURÉ, PAS SUPPOSÉ. L'audit des 109 pages relève 597 textes sous 11 px sur
   téléphone, et ZÉRO sur tablette comme sur le poste de bureau. Le portail
   écrivait donc PLUS PETIT sur le plus petit écran — exactement à l'envers.
   Le coupable principal est interieur.css §4, qui ramène le sur-titre des
   bandeaux de .78 à .62 rem sous 640 px : 9,9 px, en capitales espacées, pour
   dire « PROCESSUS ». Les pastilles des cartes suivaient à 10,9 px, les
   en-têtes de tableau à 10,7, les montants à 10,2.

   On ne grossit pas tout : on pose un PLANCHER. Onze pixels et demi pour les
   étiquettes, douze pour les chiffres qu'on lit dans un tableau. Rien de tout
   cela ne sort de la bande téléphone.
   ========================================================================== */
@media (max-width: 640px) {

    /* Le sur-titre des bandeaux — le plus petit texte du portail. */
    .pagehead .kicker, .hero .kicker, p.kicker { font-size: .74rem !important; letter-spacing: .1em; }

    /* Les étiquettes et pastilles : « Tous les comptes », « Accès restreint »,
       « publié », « direct », les puces des menus. */
    .card .tag, .tag, .tag.open, .tag.lock, .badge, .chip, .pastille, .puce,
    .etiquette, .statut, .pill, .tb-src, .loc, .eb, .doc-cat-nb, .fr-fam .n,
    .et, .pct, .proc-tag, .subchip, .kicker, .readout .l, .cell .l,
    [class*="-tag"], [class*="-chip"], [class*="-badge"], [class*="-pastille"] {
        font-size: .72rem !important;
    }

    /* Les tableaux : en-têtes et nombres. Ils défilent déjà dans leur boîte
       (règle 2 du haut de cette feuille), les grossir ne pousse donc rien. */
    /* !important : plusieurs pages fixent la taille de leurs cellules dans
       leur propre <style>, plus spécifique que le sélecteur nu. Sans cela
       116 en-têtes de tableau restaient à 10,7 px. */
    table th, table td, td.n, td.n.grp { font-size: .78rem !important; }
    table th { font-size: .74rem !important; }

    /* Le filet de sécurité : plus rien n'écrit sous 11 px sur un téléphone.
       Posé en dernier et sans !important — une page qui a une bonne raison de
       faire autrement peut encore le dire, mais il faudra qu'elle le dise. */
    body, body p, body span, body div, body li, body td, body th, body small, body label {
        text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
    }
    small, .note, .muted, .meta, .titre-meta, .doc-meta, .fam-chapo, .lead { font-size: .8rem; }

    /* ---- LES CIBLES NOMMÉES ----------------------------------------------
       427 cibles sous 44 px sur téléphone contre 104 ailleurs. On ne grossit
       pas « tous les liens » — un lien au fil d'un paragraphe n'est pas une
       cible et l'étirer casserait le texte. On grossit ceux qui SONT des
       boutons : la navigation, les listes cliquables, les onglets. */
    /* PAS .vue-item ICI : le passer en flex mettait son intitulé et sa
       provenance CÔTE À CÔTE, et la provenance se retrouvait dans 90 px
       (« Audi ·… »). Sa hauteur dépasse déjà 44 px toute seule — une cible
       assez grande n'a pas besoin qu'on y touche. */
    .navlinks a, a.dep, a.actif, a.nom-sect, a.tb-lien, a.doc-chip, .rail a,
    .fr-fam > a, a.suivi-card, .bao-ligne a {
        min-height: 44px; display: flex; align-items: center;
    }
    /* Les cases à cocher gardent leurs 22 px visibles, mais le doigt vise une
       zone de 44 : c'est le libellé qui la fournit. */
    label:has(> input[type=checkbox]), label:has(> input[type=radio]) {
        min-height: 44px; display: flex; align-items: center; gap: .5rem;
    }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — LES LIBELLÉS COUPÉS ET LES BARRES D'ACTION.

   Sur un poste de bureau, couper un intitulé à l'ellipse est un compromis
   raisonnable : la colonne est large, on lit l'essentiel. Sur 390 px de large
   il ne reste que « Sécurisation immédiate Interdire le nettoyage sans co… » :
   on doit ouvrir la fiche pour savoir de quoi il s'agit. Le même parti que la
   tablette a pris le 31/08 — mais elle s'arrêtait à 641 px et le téléphone,
   qui en a le plus besoin, n'en profitait pas.
   ========================================================================== */
@media (max-width: 640px) {

    /* Les intitulés des listes passent à la ligne, deux lignes au plus : la
       ligne ne s'étale pas et on sait enfin ce qu'on regarde. */
    .vue-item .lib, .vue-item .vi-l2, .liste-item .lib, .ligne-lib, .item-lib {
        white-space: normal !important; overflow: hidden; text-overflow: clip;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        line-height: 1.3;
    }
    .vue-item { padding: .55rem .3rem; }
    /* La première ligne portait l'intitulé, le badge d'état ET la provenance
       côte à côte : une fois l'intitulé sur deux lignes, le reste se retrouvait
       écrasé dans 90 px (« Audi ·… »). L'intitulé prend toute la largeur, le
       badge et la provenance passent dessous — on lit les trois. */
    .vue-item .vi-l1 { flex-wrap: wrap; row-gap: .25rem; align-items: center; }
    .vue-item .vi-l1 > .lib { flex: 1 1 100%; }
    .vue-item .vi-l1 > :not(.lib) { flex: 0 1 auto; }

    /* Les liens d'action du bandeau : deux boutons de 205 et 156 px ne tiennent
       pas dans 362 px utiles, ils tombaient l'un sous l'autre et le bandeau
       prenait 370 px de haut. Un peu moins de rembourrage, et ils tiennent
       côte à côte sans rien perdre de leur lisibilité. */
    .tete-liens { gap: .4rem; }
    .tete-liens a, .liens a, .links a {
        padding: .42rem .7rem !important; font-size: .84rem !important;
        min-height: 40px; flex: 1 1 auto; justify-content: center;
    }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — LES PLANS DU SITE.
   ========================================================================== */
@media (max-width: 640px) {
    /* Les pastilles de couleur du dessin étaient devenues des ellipses
       verticales : mobile.css impose 40 px de haut à tout bouton, et une
       pastille qui mesure 24 px de large se retrouve deux fois plus haute que
       large. Une pastille est ronde ou n'est pas. */
    .coul { min-height: 0 !important; width: 30px !important; height: 30px !important; flex: none; }
    /* La barre d'outils prenait 800 px avant de laisser voir le plan : sur un
       téléphone, on venait pour le plan. Elle se replie, il commence plus haut. */
    .scene { height: 62vh; min-height: 340px; }
}

@media (max-width: 640px) {
    /* LE PLAN AVANT LES OUTILS. La barre d'outils — consulter, tracer, six
       couleurs, enregistrer, exporter — prenait 830 px avant qu'on aperçoive
       le plan. Sur un téléphone, on ouvre cette page pour REGARDER le plan ;
       dessiner dessus se fait au bureau. La carte passe en colonne et le plan
       remonte en tête, les outils restent accessibles juste en dessous. */
    /* LA CAUSE DU PLAN EN TIMBRE-POSTE, ET ELLE DATE DU 26/08. La règle
       « img { max-width: 100% } » du haut de cette feuille ramenait l'image du
       plan de ses 673 px naturels à la largeur de l'écran ; or le plan calcule
       son zoom À PARTIR de la taille naturelle et l'applique en transform. Le
       facteur de réduction s'appliquait donc DEUX FOIS : 673 → 327 → 159. La
       scène positionne ses couches elle-même, elle n'a pas besoin qu'on borne
       ses images. */
    .scene img, .scene canvas { max-width: none !important; height: auto; }

    .carte:has(> .scene) { display: flex; flex-direction: column; }
    .carte > .scene { order: -1; margin-bottom: .7rem; }
    .carte > .outils { order: 0; }
    .carte > .aide { order: 1; }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — LES MOTS COUPÉS ET LES BLOCS QUI SE CHEVAUCHENT.
   Relevés par l'inspection des écrans, page par page.
   ========================================================================== */
@media (max-width: 640px) {

    /* LES NOMS DE FICHIERS. « Mouvement des Stoc… », « HA_… » : un nom de
       classeur ne se devine pas à sa moitié. Il n'y a pas d'espace où couper,
       il faut donc autoriser la coupure n'importe où — mieux vaut un mot en
       deux morceaux qu'un nom perdu. Idem pour les phrases des cartes vides,
       coupées en plein mot au bord (« Aucun accident dé… »). */
    .fichier, .nom-fichier, .doc-titre, .fich-nom, .dep-nom, .depot-nom,
    .vide, .empty, .carte .vide, td.fichier {
        overflow-wrap: anywhere; word-break: break-word; white-space: normal !important;
        text-overflow: clip;
    }

    /* Le chapô des bandeaux de tableau de bord : quatre lignes qui poussent les
       premiers chiffres hors du premier écran. Deux lignes suffisent à situer. */
    .pagehead .lead, .hero .lead, .bandeau p, .tb-chapo, .dash-chapo {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden; font-size: .85rem; line-height: 1.35;
    }

    /* UN SEUL ASCENSEUR HORIZONTAL. Sur /quarts/, le tableau des 1/4 par mois
       est enfermé dans DEUX conteneurs qui défilent l'un dans l'autre : on
       pousse le premier, il s'arrête, il faut trouver le second. Le conteneur
       extérieur cesse de défiler, seul celui qui porte le tableau le fait. */
    .card:has(> .tablewrap), .carte:has(> .tablewrap) { overflow-x: visible; }
    .tablewrap > .tablewrap { overflow-x: visible; }
}

@media (max-width: 640px) {
    /* LES EN-TÊTES « LOGO + TITRE + RETOUR » sur une seule rangée (le dépôt de
       fichiers, et toutes les pages qui reprennent ce gabarit). Le titre est en
       flex:1 entre deux liens : il se retrouve dans 159 px et se casse en trois
       lignes, pendant que la moitié droite de la barre reste vide. Le retour
       passe sur sa propre ligne, le titre récupère toute la largeur. */
    body > header:has(> h1) { flex-wrap: wrap; row-gap: .3rem; padding: .55rem .85rem; }
    body > header:has(> h1) > h1 { flex: 1 1 auto; font-size: .98rem; line-height: 1.25; min-width: 0; }
    body > header:has(> h1) > a:last-child { flex: 0 0 100%; order: 3; font-size: .85rem; }
    body > header:has(> h1) > a:first-child img { height: 32px; }
}


/* ==========================================================================
   REFONTE DU 10/09 (suite) — CE QUE L'INSPECTION DES ÉCRANS A TROUVÉ,
   page par page. Chaque règle répond à un défaut vu sur une capture.
   ========================================================================== */
@media (max-width: 640px) {

    /* LA MATRICE DE POLYVALENCE ne montrait QUE sa colonne de noms : la
       première colonne est collée à gauche (sticky) et fait 205 px sur 361 —
       il ne reste rien pour les compétences, et le tableau paraît vide. On la
       ramène à une largeur qui laisse voir trois ou quatre colonnes. */
    table.poly td.poste, table.poly th.qui, table.poly td.qui,
    table.tension th:first-child, table.tension td:first-child {
        max-width: 9.5rem; min-width: 0; width: 9.5rem;
        white-space: normal; overflow-wrap: anywhere; font-size: .74rem !important; line-height: 1.2;
    }

    /* LA COLONNE « ATELIER » DES GRILLES ANNUELLES — corrigée deux fois le
       même jour, et la première fois de travers. Un plafond de 8,5 rem avec
       « overflow-wrap: anywhere » sur une table en width:max-content ne borne
       rien : la colonne s'écrase à 35 px et « Maintenance » s'écrit une lettre
       par ligne, sur dix lignes. Il lui faut une largeur FERME — plancher
       autant que plafond — et une coupure aux mots, pas au caractère.
       Et puisqu'on défile forcément (douze mois dans 361 px), la colonne se
       colle à gauche, comme la tablette le fait depuis le 31/08 : sans elle on
       lit « 14/20 » sans savoir de quel atelier. « Récap chantiers » est exclu,
       sa colonne tient déjà — c'est l'exclusion que tablette.css pose aussi. */
    .gridbox table.grille:not(.recap-chantiers) td.atelier,
    .gridbox table.grille:not(.recap-chantiers) thead th:first-child {
        position: sticky; left: 0; z-index: 2;
        width: 7rem; min-width: 7rem; max-width: 7rem;
        white-space: normal; overflow-wrap: break-word;
        font-size: .74rem !important; line-height: 1.25;
    }
    .gridbox table.grille:not(.recap-chantiers) td.atelier { background: #fff; }
    .gridbox table.grille:not(.recap-chantiers) thead th:first-child { background: #eef1f7; z-index: 3; }

    /* Les rangées d'onglets propres à une page (RH, tableaux de bord) : elles
       s'empilaient sur trois rangées et repoussaient le contenu. Elles
       défilent comme toutes les autres — et reglette.js garde l'onglet actif
       sous les yeux. */
    .onglets-rh, .tabs-rh, .sous-menu, .menu-onglets {
        display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .25rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .onglets-rh > *, .tabs-rh > *, .sous-menu > *, .menu-onglets > * { flex: 0 0 auto; white-space: nowrap; }

    /* Les filtres de période : « du [date] au [date] » se coupait entre le mot
       « au » et son champ, la date orpheline sur la ligne suivante. Le couple
       reste ensemble. */
    .toolrow > div:has(> input[type=date]), .barre > div:has(> input[type=date]),
    .filtres > div:has(> input[type=date]) {
        display: flex; align-items: center; gap: .4rem; flex-wrap: nowrap; width: 100%;
    }
    .toolrow > div:has(> input[type=date]) > input { flex: 1 1 auto; min-width: 0; }

    /* Les rangées de compteurs qui n'ont pas la classe commune. */
    .statgrid, .stat-grid, .compteurs, .chiffres-annee {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .5rem !important;
    }

    /* Les notes explicatives posées en flex:1 dans une carte : elles se
       retrouvaient dans une colonne de 100 px à côté d'un bouton. */
    .card > .note[style*="flex"], .carte > .note[style*="flex"] {
        flex: 1 1 100% !important; min-width: 0;
    }

    /* Les noms d'unités de l'arbre du DUERP, coupés au milieu d'un mot. */
    .noeud .libut { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
    .noeud { align-items: flex-start; }

    /* Les cases du damier de la fiche salarié : deux par ligne, comme les
       compteurs — une case par ligne pour « GED · 39 », c'est du défilement
       pour rien. */
    .fiche-damier, .fiche-bas { grid-template-columns: minmax(0, 1fr) !important; }
    .fiche-damier .tuile { padding: .7rem .75rem !important; }
    .fiche-damier .tuile-info { display: -webkit-box; -webkit-line-clamp: 2;
        -webkit-box-orient: vertical; overflow: hidden; font-size: .74rem; line-height: 1.3; }
}

/* Deux défauts vus sur TABLETTE (820 px) : ils tiennent à la largeur, pas au
   doigt — ils vont donc dans la bande de largeur, pas dans la bande tactile. */
@media (min-width: 641px) and (max-width: 1180px) {
    /* Les pastilles de catégorie débordaient de leur colonne et passaient
       par-dessus le nom de l'atelier. */
    td > .tag, td > .badge, td > .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    /* Les objectifs saisis, coupés au milieu d'un mot dans leur cellule. */
    #vue-suivi .cell, .suivi-cell { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
    /* LA BARRE NOIRE DES TABLEAUX DE BORD. Son titre était comprimé dans 55 px
       et tombait sur quatre lignes, à côté d'un sélecteur de module qui prenait
       tout le reste. Les deux passent l'un sous l'autre. */
    div:has(> #tb-module) { flex-wrap: wrap; row-gap: .35rem; }
    div:has(> #tb-module) > span:first-child { flex: 1 1 100%; font-size: .95rem; line-height: 1.25; }
    div:has(> #tb-module) > #tb-module { flex: 1 1 100%; }

    /* Les boutons « retirer » posés à côté d'une action principale : ils
       s'étalaient sur toute la largeur sous elle, comme s'ils étaient l'action.
       Ils reprennent leur taille de bouton secondaire. */
    .af-tete > button[aria-label^="Retirer"], .af-tete > button[title^="Retirer"] {
        flex: 0 0 auto; width: auto; min-width: 44px;
    }
}

/* Les liens en icône seule dans un tableau (⚡ flash accident, 🌳 arbre des
   causes) : 16 px de côté, impossibles à viser au doigt. Ils sont dans un
   tableau, donc hors de la règle générale des cibles — nommément repris ici,
   à toute largeur tactile. */
@media (hover: none) and (pointer: coarse) {
    td a[href*="flash"], td a[href*="arbre"], td a[href*="pdf"], td a.ico-lien {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 36px; min-height: 36px;
    }
}

@media (max-width: 640px) {
    /* LE BANDEAU SOMBRE DES TABLEAUX DE BORD. Il est écrit sans classes : un
       <span> en flex qui porte le logo, le titre et la ligne « À jour : … ».
       Le titre s'y retrouvait dans 55 px et tombait sur quatre lignes pendant
       que la phrase de fraîcheur prenait tout le reste. On les laisse se
       replier, et le titre passe devant. */
    body > div > span[style*="display:flex"], body > div > span[style*="display: flex"] {
        flex-wrap: wrap !important; row-gap: .3rem;
    }
    body > div > span[style*="flex"] > span:first-of-type { font-size: 1rem; line-height: 1.2; }
    body > div > span[style*="flex"] > span:last-of-type { flex: 1 1 100%; font-size: .76rem; line-height: 1.3; }
}

@media (max-width: 640px) {
    /* LE CALENDRIER, SUITE. Sept colonnes de 100 px ne tiennent pas dans 335 :
       il défile, comme prévu depuis le 26/08 — mais rien ne le disait, et une
       case de jour vide occupait 240 px de haut, si bien qu'on ne voyait qu'un
       lundi à la fois. Des cases à hauteur de téléphone, et le même chevron que
       les réglettes pour annoncer la suite. */
    .cal { position: relative; }
    .cal .jour, .cal-grille > * { min-height: 84px; }
    .cal-grille {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    }
    .cal::after {
        content: "›"; position: absolute; right: .3rem; top: 55%;
        font-size: 1.6rem; font-weight: 700; color: #8a90a0; pointer-events: none; z-index: 2;
    }
}

@media (max-width: 640px) {
    /* Les en-têtes de mois des tableaux d'indicateurs (« jan », « fév ») et les
       dernières étiquettes restées sous le seuil : une déclaration dans le
       <style> de la page bat le sélecteur nu, il faut nommer les classes. */
    table th, table thead th, .ind table th, .ind table td,
    .pct, .pct.low, .pct.high, .unite, button.voir, .voir, td.total, .tot {
        font-size: .74rem !important;
    }
}

@media (max-width: 640px) {
    /* DEUX ASCENSEURS EMBOÎTÉS, ET C'EST NOUS QUI LES CRÉONS. La règle 2 du
       haut de cette feuille donne « display:block; overflow-x:auto » à TOUTE
       table, pour qu'un tableau large défile au lieu de pousser la page. Quand
       la page a déjà enveloppé son tableau dans un .tablewrap qui défile, on se
       retrouve avec deux glissières l'une dans l'autre : sur /quarts/, on pousse
       la première (640 → 336), elle s'arrête, et il faut trouver la seconde
       (828 → 640) pour atteindre les derniers mois. Une table déjà enveloppée
       redevient une table : c'est son conteneur qui défile, lui seul. */
    .tablewrap > table, .cadre > table, .defile > table, .apercu > table,
    .gridbox > table, .vgp-famille > table {
        display: table !important; overflow: visible !important; width: max-content; min-width: 100%;
    }
    /* Et la ligne d'en-tête cesse d'être figée en nowrap dans ce cas : les
       libellés de colonne peuvent enfin passer à la ligne. */
    .tablewrap > table th, .cadre > table th { white-space: normal; }

    /* Les phrases des cartes vides et des mentions de bas de page, tranchées
       en plein mot : elles n'ont pas toutes la classe .vide. Toute cellule ou
       paragraphe d'une carte peut revenir à la ligne. */
    .card p, .carte p, .card li, .carte li { white-space: normal !important; overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
    /* LA LISTE DES COMPTES (administration). Chaque compte occupait une bande
       de 259 px dont 200 de blanc : la table garde ses colonnes de bureau, la
       première fait 9 rem, les cinq boutons d'action s'empilent un par ligne
       dans une cellule étroite, et le rôle et les dates tombent en dessous.
       Sur téléphone la table défile déjà ; on lui rend simplement des cellules
       à la bonne taille et des actions en ligne. */
    .vue-comptes #app table td:first-child { min-width: 7rem; }
    .vue-comptes #app table td, .vue-ateliers #app table td { font-size: .8rem !important; padding: .3rem .4rem; }
    .vue-comptes #app table select { max-width: 8rem; font-size: .8rem; }
    .actions-c { flex-wrap: nowrap; gap: .25rem; }
    .actions-c .btn { padding: .28rem .45rem; font-size: .74rem !important; min-height: 34px; }
    .vue-comptes #app table td .dates { white-space: normal; line-height: 1.25; }
}

@media (min-width: 641px) and (max-width: 1180px) {
    /* Le nom du plan de prévention, écrasé dans 42 px et affiché sur cinq
       lignes pendant que la moitié de la ligne restait vide. */
    .plan-nom, td.nom, .pdp-nom { min-width: 12rem; white-space: normal; overflow-wrap: anywhere; }
    /* Les cinq boutons d'action des comptes tiennent en ligne au lieu de
       s'empiler un par ligne dans une cellule de 177 px. */
    .actions-c { flex-wrap: wrap; }
    .actions-c .btn { flex: 0 0 auto; }
}

@media (max-width: 1180px) {
    /* CONTENU COUPÉ, ET INVISIBLE AUX COMPTEURS. Sur /commercial/, <body> est
       en flex et <main> en est un élément : un élément flex ne rétrécit pas
       sous la largeur de son contenu (min-width: auto). <main> mesurait donc
       979 px sur un écran de 390 — et comme « html, body { overflow-x: hidden } »
       (26/08) empêche la page de déborder, rien ne se voyait dans les mesures :
       plus de la moitié de la page était simplement COUPÉE, inatteignable.
       min-width: 0 rend à l'élément le droit de rétrécir. */
    body > main, body > .wrap, body > section, body > div > main { min-width: 0; }
    /* FILET DE SÉCURITÉ. min-width:0 rend le droit de rétrécir, mais ne suffit
       pas quand un descendant impose une largeur en dur. Le contenu doit rester
       ATTEIGNABLE quoi qu'il arrive : à défaut de tenir, il défile. Mieux vaut
       un glissement horizontal qu'une moitié de page perdue derrière un
       overflow:hidden. */
    body > main { max-width: 100vw; overflow-x: auto; overscroll-behavior-x: contain; }
    /* Et les grilles qui posent un plancher en pixels : sous 390 px de large,
       un « minmax(340px, 1fr) » vaut 340 px quoi qu'il arrive. */
    .graphes, .cibles, .concs, .depts, .deux, .constats, .pk {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
    }
}


/* ==========================================================================
   REFONTE DU 10/09 (fin) — LES DÉFAUTS CONFIRMÉS PAR LA VÉRIFICATION
   ADVERSARIALE. Chaque règle a été mesurée avant/après par un agent qui a
   d'abord cherché à REFUTER le défaut, et contrôlée à 1440 px à la souris.
   ========================================================================== */
@media (max-width: 640px) {

    /* LA REVUE DE DIRECTION : 17 GRAPHIQUES ILLISIBLES. Ils sont dessinés dans
       un repère de 720 unités ramené à 100 % : à 316 px de place, l'échelle
       tombe à 0,439 et le texte des axes s'affiche à 4,6 px. Grossir la police
       dans le repère ferait chevaucher les mois ; le graphe garde donc sa
       largeur de lecture et défile dans sa boîte — le parti déjà pris pour les
       tableaux et le calendrier. Et il l'annonce : sans cela on ne voit que
       cinq mois sur douze en croyant lire l'année entière. */
    .graphe { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .graphe > svg.sg { width: 720px; max-width: none; }
    .graphe > svg.sg .ax, .graphe > svg.sg .et, .graphe > svg.sg .obj { font-size: 12px; }
    .graphe:has(> svg.sg) h3::after {
        content: " › glissez"; font-size: .62rem; font-weight: 700; letter-spacing: .04em;
        color: #8b93a7; text-transform: none; white-space: nowrap;
    }

    /* LES COMPTEURS DE PAGE DE GARDE (Cofinur, Truck, Urano, secteurs de
       production). Cinq pages déclarent .chiffres en FLEX : la mise en grille
       posée plus haut ne les atteint pas, seul le « gap » passe — et il
       REMPLACE les 2,2 rem voulus par la page, d'où « documents au coffre » et
       « personnes autorisées » collés à 7 px, lus comme une seule phrase. On en
       fait vraiment une grille. Le préfixe « body » n'est pas décoratif : sans
       lui la règle se joue à égalité et ne gagne que par sa place dans le
       fichier. Un compteur orphelin prend la ligne entière plutôt que de
       laisser un trou. */
    body .chiffres {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem .8rem !important;
    }
    body .chiffres > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* LA RECHERCHE DE CHANTIER (Urano) : .rech est un flex sans repli dont le
       champ porte min-width: 15rem — il refuse de descendre sous 349 px, et le
       bouton « Chercher » passe 8 px hors de l'écran, coin arrondi rasé. À
       320 px, ce sont 77 px dehors et le bouton se lit « Cher ». !important
       parce que le <style> de la page est dans le corps du document, donc lu
       après les feuilles injectées. */
    .rech { flex-wrap: wrap; }
    .rech input { min-width: 0 !important; flex: 1 1 12rem; }

    /* LA BARRE DE FILTRES DE L'ADMINISTRATION : les champs de recherche
       prennent toute la largeur, les listes déroulantes se dimensionnent sur
       leur contenu — 240 et 288 px entre des champs de 304, trois bords droits
       pour une même barre. On ne vise que les listes de filtre de
       l'administration : celles de l'accidentologie rangent volontairement deux
       listes par ligne. */
    .toolrow > select.champ-recherche { flex: 1 1 100%; width: 100%; min-width: 0; box-sizing: border-box; }
}

/* Le rail des rubriques de l'administration : il bascule en ligne défilante à
   1100 px (admin.css) et se faisait trancher net au bord droit, en plein milieu
   de « Rôles & permissions », sans le moindre indice. C'est la suite de la
   règle « ce qui défile doit le dire » — le rail y avait été oublié. La bande
   est celle d'admin.css au pixel près : au-dessus de 1100 px le rail est
   vertical, un dégradé y rongerait le bord de pastilles empilées. */
@media (max-width: 1100px) {
    .rail {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
        mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
    }
}

/* La rangée d'actions d'une fiche de risque (DUERP Truck Location) : quatre
   boutons de 335 px dans une carte de 293, et la corbeille — la seule action
   qui supprime — retombait seule et décalée sur les 31 risques de l'unité.
   BORNÉE À 430 px et pas 640 : mesuré pas à pas, la rangée tient sur une seule
   ligne dès 432 px de fenêtre ; au-delà, un 2 × 2 ajouterait la ligne qu'on
   veut éviter. « .risque > .actions-l » et non « .actions-l » : la même classe
   habille les quatre pieds de formulaire de la page, où deux colonnes égales
   donneraient à « Annuler » le poids d'« Enregistrer ». */
@media (max-width: 430px) {
    body .risque > .actions-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .risque > .actions-l > .btn { width: 100%; }
}