/* ==================================================================
   CE QUE L'OUTIL DE CONTRÔLE AJOUTE À LA FEUILLE DE HUNE — ET RIEN DE PLUS

   `design/hune.css` est la feuille de la maquette validée le 03/09. Elle est
   copiée telle quelle et ne se retouche pas : toute retouche se perdrait à la
   prochaine reprise, et l'écart avec Hune reviendrait par la fenêtre.

   Ce fichier ne porte donc que ce que Hune n'a pas à porter, parce que Hune
   n'a ni tournée de contrôle, ni tablette dehors. Chaque règle dit pourquoi
   elle existe. S'il en apparaît une sans raison écrite, elle est de trop.
   ================================================================== */

/* LA BARRE DE PÉRIMÈTRE EST COLLANTE — §10.1 de la spécification.
   Elle vaut sur tous les onglets et doit rester lisible quand on descend une
   liste de trois cents lignes : un tableau d'avancement dont on ne voit plus
   le périmètre est un chiffre sans unité. Hune n'a pas ce besoin, son
   périmètre étant porté par le compte et non par un filtre d'écran. */
/* ⛔ `.perimetre` est une classe de Hune : la redéfinir nue rendait collant le
   `p.perimetre` de la colonne — un paragraphe, à l'intérieur d'une colonne déjà
   collante. La barre de filtre porte donc sa propre classe. */
.perimetre-colle{position:sticky;top:58px;z-index:20}
.perimetre-colle .filtre{border-bottom:0}
.perimetre-colle .aide{align-self:center;max-width:44ch}

/* LES ONGLETS DE MODE VIVENT SUR LA COQUE — exploitation ou terrain.
   `.onglets` de Hune est dessiné pour un fond clair ; sur le bandeau sombre,
   ses couleurs d'encre disparaissent. */
.onglets-coque{border-bottom:0;gap:var(--e1)}
.onglets-coque a{color:var(--sur-coque-2);border-bottom:0;border-radius:999px;padding:4px 14px;font-size:12.5px}
.onglets-coque a:hover{color:#EAF3F6;background:rgba(255,255,255,.10)}
.onglets-coque a[aria-current="page"]{background:var(--lampe);color:#3A2704;font-weight:700}

/* LE TERRAIN — §10.2 : cibles de 44 px, lisible à 1 200 × 800, avec des gants.
   Le rail de l'exploitation n'a rien à faire là : le contrôleur saisit ses
   points dehors, sur une tablette, et il lui faut la largeur entière et de
   grandes cibles, pas quatorze rubriques de bureau. */
.large-terrain{padding:var(--e4);gap:var(--e4);max-width:1100px;margin:0 auto;width:100%}
.large-terrain .bt,.large-terrain button:not(.petit){min-height:44px;font-size:15px;padding:10px 18px}
.large-terrain .champ input:not([type=checkbox]):not([type=radio]),
.large-terrain .champ select,.large-terrain .champ textarea{min-height:44px;font-size:15px}
.large-terrain .cap h1{font-size:26px}
.large-terrain .tbl{font-size:15px}
.large-terrain .tbl td{padding:12px var(--e3)}

/* LES QUATRE VERDICTS D'UN POINT DE GRILLE — conforme, non conforme, sans
   objet, non vu. Quatre boutons côte à côte, aucune saisie clavier
   obligatoire (§10.2). Hune coche autrement : ses grilles ne se remplissent
   pas dehors. */
.verdicts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--e2)}
.verdicts button{min-height:52px;font-size:15px;justify-content:center}
.verdicts button[aria-pressed="true"]{background:var(--veille);border-color:var(--veille);
  color:var(--sur-veille);font-weight:700}
.verdicts button.dgv[aria-pressed="true"]{background:var(--dg);border-color:var(--dg);color:#FFF}

/* L'ÉTAT DE LA POSITION RELEVÉE — elle suggère la présence, elle ne la prouve
   pas, et une pièce opposable ne cache pas ce qui l'affaiblit. */
.position{font-size:12.5px;color:var(--encre-3)}
.position.mauvais{color:var(--al);font-weight:600}

/* LA BOÎTE « CE QUE CECI NE DIT PAS » — une mise en garde en pleine page.
   `hune.css` dessine `.note` uniquement nichée (dans une barre, un filtre, un
   pied de dossier) : en tête d'écran, elle partait sans style. Ces encadrés
   portent ce qui empêche de mal lire un chiffre — pourquoi un taux est donné
   net des absences, pourquoi une cadence ne note personne. Les perdre, c'est
   perdre exactement ce qui protège quelqu'un d'être accusé à tort.
   ⛔ Le `b` ne passe PAS en bloc : « les cadences servent à **prévoir**, jamais
   à **noter** » se lisait alors sur cinq lignes, un mot par ligne. C'est ce
   que le dirigeant a vu sur son tableau de bord. */
/* ⛔ `.note.note:not(.barre .note)` valait pour TOUT `.note` de l'application —
   spécificité doublée à dessein, donc l'emportant aussi sur ceux que Hune
   dessinera demain. Exclure la barre au cas par cas était la « retouche par la
   bande » que ce fichier s'interdit dix lignes plus bas : une exception de plus
   à chaque nouveau contenant de Hune, et l'écart revenait par la fenêtre.
   Les encadrés de l'outil vivent dans trois contenants, et trois seulement :
   la colonne de l'écran, le corps d'un bloc, et l'encart d'habilitations d'un
   point de grille (`.point`, dessiné plus bas dans ce fichier). On les nomme.
   Relevé par l'audit d'ergonomie du 17/09. */
.large>.note,.corps>.note,.point .note{display:block;background:var(--lampe-f);
  border:1px solid var(--lampe);border-left-width:4px;border-radius:var(--r);
  padding:var(--e3) var(--e4);font-size:13.5px;color:var(--encre-2);max-width:none}
.large>.note>b:first-child,.corps>.note>b:first-child{display:block;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--lampe-s);
  margin-bottom:var(--e2)}
.large>.note b,.corps>.note b{color:var(--encre);font-weight:700}
.large>.note p,.corps>.note p{margin:var(--e2) 0 0;max-width:80ch}

/* UNE ADRESSE, UN JETON, UN MATRICULE — ça se relit caractère par caractère.
   `.champ input{font:inherit}` l'emporte sur `.code` de Hune : sans cette
   règle, le lien du contradictoire perd son chasse fixe dans le champ même où
   on le vérifie avant de le remettre à l'agent. */
.champ input.code,.champ textarea.code{font-family:ui-monospace,"SFMono-Regular",
  "Cascadia Mono",Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.01em}

/* LE QR REMIS EN MAIN PROPRE — il se montre, donc il se centre, et il tient
   la taille d'un écran de téléphone tendu à bout de bras. */
.qr{display:flex;flex-direction:column;align-items:center;gap:var(--e3);
  padding:var(--e4) 0}
.qr svg,.qr img{width:min(260px,70vw);height:auto}

/* L'ÉCRAN DE L'AGENT — il n'a pas de compte, il tient son téléphone, et il lit
   une seule chose. La largeur de la tournée d'un contrôleur y est trop grande. */
.large-terrain.large-etroit{max-width:520px}

/* ==================================================================
   CE QUE HUNE N'A PAS À DESSINER — la grille des tournées, la carte,
   le point de grille, les pièces.

   Hune n'a pas de tournée de contrôle : ses plannings sont ceux des agents
   sur les sites, pas ceux des contrôleurs entre les sites. Ces formes-là sont
   donc propres à l'outil. Les couleurs, les espacements et les rayons
   viennent tous des jetons de `hune.css` : rien n'est inventé, seule la
   géométrie l'est.
   ================================================================== */

/* LES ÉTATS D'UNE VISITE DE CONTRÔLE.
   ⛔ Volontairement DISTINCTS de la palette de production : là-bas, le vert
   veut dire « vacation non affectée ». Reprendre la même échelle ferait lire
   « fait » là où il faut lire « à pourvoir » — sur deux écrans que les mêmes
   personnes ouvrent le même jour. */
:root{
  --et-plan:#1F5C99; --et-plan-f:#E3EDF7;
  --et-cours:#926015; --et-cours-f:#FCF2DF;
  --et-faite:#1E6B47; --et-faite-f:#E6F2EA;
  --et-non:#A8321E;   --et-non-f:#FBEAE6;
  --et-ann:#596B74;   --et-ann-f:#F2F5F8;
}
:root[data-theme="nuit"]{
  --et-plan:#8FB6DC; --et-plan-f:#1A2B3C;
  --et-cours:#E5B458; --et-cours-f:#372A12;
  --et-faite:#78C79C; --et-faite-f:#14301F;
  --et-non:#F0917C;   --et-non-f:#3A1E18;
  --et-ann:#889FA6;   --et-ann-f:#1C2E38;
}

/* LA GRILLE DES TOURNÉES — une semaine de contrôleurs, en colonnes de jours.
   La colonne des noms est collante : sur sept jours et douze contrôleurs, on
   perd sinon la ligne qu'on suit dès le troisième jour. */
.pl{border-collapse:collapse;min-width:100%;font-size:11.5px;color:var(--encre)}
.pl th,.pl td{border:1px solid var(--filet);padding:3px;vertical-align:top;min-width:112px}
.pl th{background:var(--surf-2);color:var(--encre-2);font-weight:700;padding:5px 3px;
  text-align:center;white-space:nowrap;font-size:11px}
.pl th.pl-qui,.pl td.pl-qui{min-width:196px;text-align:left;padding:8px 10px;
  position:sticky;left:0;background:var(--surf);z-index:1;vertical-align:middle}
.pl th.pl-qui{background:var(--surf-2)}
.pl td.pl-qui b{font-size:13px}
.pl td.pl-qui small{display:block;color:var(--encre-3);font-size:11px}
.pl th.pl-we,.pl td.pl-we{background:var(--surf-2)}
.pl th.pl-di,.pl td.pl-di{background:var(--lampe-f)}
.pl td.pl-auj{box-shadow:inset 0 0 0 2px var(--lampe)}
/* Une indisponibilité se HACHURE : une case vide et une case indisponible ne
   disent pas la même chose, et les confondre fait planifier chez un absent. */
.pl td.pl-indispo{background:repeating-linear-gradient(45deg,var(--surf-2),
  var(--surf-2) 4px,var(--filet-2) 4px,var(--filet-2) 8px)}

/* UNE VISITE DANS LA GRILLE. C'est un lien, pas un bouton : le HTML d'avant
   plaçait un bouton dans un lien, ce qui est invalide et se comporte mal au
   clavier. Il lui faut donc son propre `text-decoration`. */
.vis{display:block;border-radius:5px;padding:3px 5px;margin:2px 0;cursor:pointer;
  font-size:11px;line-height:1.3;border-left:3px solid;text-align:left;width:100%;
  background:var(--surf);text-decoration:none;min-height:44px}
.vis:hover{box-shadow:var(--ombre);transform:translateY(-1px);text-decoration:none}
.vis b{display:block;font-weight:700;font-size:11px}
.vis .h{font-variant-numeric:tabular-nums;font-weight:700}
.vis .ag{display:flex;gap:2px;margin-top:2px;flex-wrap:wrap}
.vis .ag i{width:7px;height:7px;border-radius:50%;display:inline-block;
  background:var(--encre-3);font-style:normal}
.vis .ag i.att{background:var(--dg)}
.vis .vieux{float:right;font-weight:700;font-variant-numeric:tabular-nums}
.v-plan{background:var(--et-plan-f);border-left-color:var(--et-plan);color:var(--encre)}
.v-cours{background:var(--et-cours-f);border-left-color:var(--et-cours);color:var(--encre)}
.v-faite{background:var(--et-faite-f);border-left-color:var(--et-faite);color:var(--encre)}
.v-non{background:var(--et-non-f);border-left-color:var(--et-non);color:var(--encre)}
.v-ann{background:var(--et-ann-f);border-left-color:var(--et-ann);color:var(--encre-3);
  text-decoration:line-through}

/* LA LÉGENDE de cette grille — Hune dessine `.legende-permanente`, mais ses
   pastilles sont pleines ; celles-ci portent l'accent à gauche, comme les
   visites qu'elles nomment. */
.pl-lg i{width:12px;height:12px;border-radius:3px;display:inline-block;border-left:3px solid}
.pl-lg i.l-plan{background:var(--et-plan-f);border-left-color:var(--et-plan)}
.pl-lg i.l-cours{background:var(--et-cours-f);border-left-color:var(--et-cours)}
.pl-lg i.l-faite{background:var(--et-faite-f);border-left-color:var(--et-faite)}
.pl-lg i.l-non{background:var(--et-non-f);border-left-color:var(--et-non)}
.pl-lg i.l-ann{background:var(--et-ann-f);border-left-color:var(--et-ann)}
.pl-lg i.l-indispo{background:repeating-linear-gradient(45deg,var(--surf-2),
  var(--surf-2) 3px,var(--filet-2) 3px,var(--filet-2) 6px);border-left-color:var(--filet-fort)}

/* UNE ÉCHELLE — une étiquette, une barre, un nombre à droite. */
.ligne-plan{display:grid;grid-template-columns:200px 1fr 92px;gap:var(--e3);
  align-items:center;padding:8px var(--e4);border-bottom:1px solid var(--filet-2);
  font-size:12.5px}
.ligne-plan:last-child{border-bottom:0}
.ligne-plan .q{font-weight:600}
.ligne-plan .c{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}

/* LA CARTE DES TOURNÉES — un SVG posé par le serveur.
   ⚠ Les nombres y sont écrits en anglais volontairement : Django localise
   `608.7` en `608,7`, et une virgule dans un attribut SVG casse le dessin
   sans un mot d'erreur. */
.carte-svg{width:100%;height:auto;background:var(--surf-2);border-radius:var(--r);
  border:1px solid var(--filet)}
.carte-svg text{font-family:var(--texte);font-size:11px}
.carte-t{background:var(--surf);border:1px solid var(--filet);border-radius:var(--r);
  padding:var(--e3);display:flex;flex-direction:column;gap:6px}
.carte-t .t{font-size:13.5px;font-weight:700}
.carte-t .s{font-size:12px;color:var(--encre-3)}

/* UN POINT DE GRILLE — il se lit et se coche dehors, donc il tient sur une
   colonne : les quatre verdicts ont besoin de toute la largeur. */
.point{display:grid;grid-template-columns:1fr;gap:10px;padding:14px var(--e4);
  border-bottom:1px solid var(--filet-2);align-items:start}
.point:last-child{border-bottom:0}
.point .lib{font-size:14px;font-weight:600}

/* LES PHOTOGRAPHIES DE CONSTAT. Elles ne sont jamais servies par nginx :
   chaque vignette passe par une vue qui vérifie le périmètre et journalise
   l'accès. */
.pieces{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pieces a{display:flex;flex-direction:column;align-items:center;gap:2px;
  text-decoration:none;font-size:10.5px}
.pieces img{width:88px;height:88px;object-fit:cover;border-radius:6px;
  border:1px solid var(--filet-fort);background:var(--surf-2)}
.pieces a:hover img{border-color:var(--lampe)}

/* LA FILE HORS LIGNE — `file.js` fabrique ces deux nœuds quand le réseau
   tombe. Sans règle, le contrôleur voit du texte nu à l'endroit précis où on
   lui promet que son geste est conservé. */
/* ⛔ ELLE ÉTAIT LE DERNIER ENFANT DE LA PAGE, EN FLUX NORMAL. Mesurée à
   y = 10 564 px sur une page de 10 604, pendant que le contrôleur travaillait
   à 1 969. « n gestes en attente » ne prévenait donc personne, alors que c'est
   la seule chose qui dit au contrôleur que sa nuit n'est pas encore partie.
   Elle est désormais posée sur l'écran, au-dessus de tout, et elle ne couvre
   jamais un bouton : la tournée réserve la place en bas. */
.file-terrain{position:fixed;left:var(--e4);right:var(--e4);bottom:var(--e4);
  z-index:var(--z-flottant);display:flex;align-items:center;gap:var(--e2);
  flex-wrap:wrap;background:var(--al-f);border:1px solid var(--al);
  border-left-width:4px;border-radius:var(--r);padding:9px var(--e4);
  font-size:13px;color:var(--al);font-weight:600;box-shadow:var(--ombre)}
.large-terrain{padding-bottom:88px}
/* Dans un formulaire, c'est un avis sur place : il reste où il est posé. */
form>.file-terrain{position:static;left:auto;right:auto;bottom:auto;
  margin-bottom:var(--e3)}
.avis{display:flex;align-items:center;gap:var(--e2);flex-wrap:wrap;
  background:var(--veille-f);border:1px solid var(--veille);border-left-width:4px;
  border-radius:var(--r);padding:9px var(--e4);font-size:13px;color:var(--encre-2)}
.avis b{color:var(--veille)}

/* UNE AIDE HORS D'UN CHAMP — Hune ne la dessine que dans un `.champ`.
   ⛔ `p.aide` sortait `.aide` du `.champ` où Hune la confine, partout. On se
   borne aux deux conteneurs de l'outil. */
.large>.aide,.corps>.aide{font-size:12.5px;color:var(--encre-3);max-width:80ch}

/* L'ÉCRAN DE CONNEXION EST LE PREMIER ÉCRAN DE LA NUIT, et il se tape sur la
   même tablette, avec les mêmes gants. Il rendait un bouton de 30 px et des
   champs de 32 : tout le §10.2 s'appliquait aux écrans d'après, et pas à
   celui par lequel on entre. */
.seul .bt,.seul button{min-height:44px;font-size:15px;padding:10px 18px}
.seul .champ input,.seul .champ select{min-height:44px;font-size:15px}
.seul .champ>label{font-size:12.5px}

/* LES DEUX SORTIES DE SECOURS — « déroger » et « forcer la clôture ».
   Cases de 15 px, sur un écran de terrain : le geste le plus lourd de l'outil
   était le plus difficile à viser. On ne l'agrandit pas pour le rendre facile,
   on l'agrandit pour qu'il soit *délibéré* et non manqué. */
.large-terrain .champ.coche input[type=checkbox],
.large-terrain .choix input[type=checkbox]{width:24px;height:24px}
.large-terrain .champ.coche>label,.large-terrain .choix label{font-size:15px}

/* --------------------------------------------------------------------------
   LE FILTRE DE PÉRIMÈTRE DANS LA COLONNE DES POSSIBILITÉS.

   Il vivait en haut de l'écran, collant, sur toute la largeur. Il est passé
   dans la colonne le 17/09 avec la reprise de la coquille à trois colonnes de
   Hune : c'est là qu'il borne, à côté des écrans qu'il borne. Les champs de
   Hune sont dessinés pour la pleine largeur d'un bloc ; ici ils tiennent dans
   286 px, et leur étiquette débordait de la colonne.
   -------------------------------------------------------------------------- */
/* ⛔ **LES TROIS ENCADRÉS ÉTAIENT MAL TAILLÉS** — relevé par le dirigeant le
   17/09. Trois causes, toutes dans ces quatre règles :

   1. chaque champ portait une étiquette en capitales de 10 px — « SOCIÉTÉ »,
      « SECTEUR », « RESPONSABLE » — qui ressemblait à un titre de section et
      en concurrençait trois autres dans la même colonne, alors que l'option
      par défaut du menu dit déjà la famille (« Toutes les sociétés »).
      L'étiquette reste dans le HTML, pour le lecteur d'écran, et sort de l'œil
      (`.vh` de Hune) ;
   2. la phrase du bas visait un sélecteur — `p.perimetre` — qui n'existait pas
      dans le gabarit : elle n'avait donc **aucun retrait** et courait d'un bord
      à l'autre de la colonne pendant que les menus, eux, étaient en retrait.
      C'est ce décalage qu'on voyait ;
   3. rien ne calait la hauteur des menus : ils prenaient celle du texte, plus
      courte que les liens de la colonne juste au-dessus.

   Le retrait est désormais `var(--e4)`, celui de `.lien` et de `.grp>.q` de
   Hune : les trois menus s'alignent au millimètre sur les liens d'écran.
   -------------------------------------------------------------------------- */
.poss .perimetre .champ{padding:0 var(--e4) 5px;display:block}
.poss .perimetre .champ select{width:100%;max-width:100%;font-size:12.5px;
  min-height:32px}
.poss .perimetre>p{padding:6px var(--e4) 0;margin:0;font-size:11.5px;
  line-height:1.45;color:var(--encre-3)}

/* Le bandeau porte l'horloge, le quart de nuit, le thème et le compte : sur un
   écran de 1280 px, les quatre ne tiennent qu'en serrant. */
@media(max-width:1400px){.quart .b-nuit{font-size:11px;padding:3px 9px}}

/* ⛔ NE JAMAIS REDÉFINIR UNE CLASSE DE HUNE ICI.
   Cette feuille redéfinissait `.deux` (1fr 420px au lieu du 1fr 1fr de Hune) et
   `.liste-ecrans`. L'en-tête de ce fichier promet que `hune.css` ne se retouche
   pas : la redéfinir dans la feuille suivante EST une retouche, en pire —
   l'écart est invisible, et il vaut pour tout écran qui emploiera `.deux`
   demain. L'accueil de rubrique emploie désormais `.acc-g` / `.acc-c`, la
   grille officielle de Hune pour cet écran-là.
   Seule addition, parce que Hune ne la porte pas : la phrase de l'écran sous
   son nom, dans la liste des écrans d'une rubrique. */
.liste-ecrans .lien small{font-weight:400;line-height:1.35;display:block;margin-top:1px}

/* La ligne ouverte d'une liste : le formulaire de l'objet est rendu SOUS sa
   ligne, dans la même table. C'est la réponse à « je dois pouvoir modifier dans
   la même page » — la ligne ne saute pas, la position ne se perd pas, et la
   liste reste la liste. */
.tbl tr.ouverte>td{background:var(--surf-2);padding:0}
.tbl tr.ouverte .bloc{border:0;box-shadow:none;background:transparent;margin:0}
.tbl tr.ouverte .pile{gap:var(--e3);padding:var(--e3) 0}

/* La jauge de mise en service : la largeur vient d'une DONNÉE, et Hune pose la
   règle — « la hauteur est portée par la feuille, jamais par un style en
   ligne » (garde A-08, `.serie .bh`). On fait de même, au pas de cinq : vingt
   et une règles suffisent, et la charte reste dans la feuille. */
.jauge i[data-part="0"]{width:0}
.jauge i[data-part="5"]{width:5%}    .jauge i[data-part="10"]{width:10%}
.jauge i[data-part="15"]{width:15%}  .jauge i[data-part="20"]{width:20%}
.jauge i[data-part="25"]{width:25%}  .jauge i[data-part="30"]{width:30%}
.jauge i[data-part="35"]{width:35%}  .jauge i[data-part="40"]{width:40%}
.jauge i[data-part="45"]{width:45%}  .jauge i[data-part="50"]{width:50%}
.jauge i[data-part="55"]{width:55%}  .jauge i[data-part="60"]{width:60%}
.jauge i[data-part="65"]{width:65%}  .jauge i[data-part="70"]{width:70%}
.jauge i[data-part="75"]{width:75%}  .jauge i[data-part="80"]{width:80%}
.jauge i[data-part="85"]{width:85%}  .jauge i[data-part="90"]{width:90%}
.jauge i[data-part="95"]{width:95%}  .jauge i[data-part="100"]{width:100%}

/* ⛔ `.seul` de Hune veut dire « une page seule, centrée, pleine hauteur »
   (`min-height:calc(100vh - 50px)`) — c'est l'écran de connexion. Employée
   comme enveloppe d'une case à cocher dans la matrice des droits, elle a rendu
   chaque cellule haute d'un écran entier : la table paraissait VIDE, et les
   onze lignes étaient poussées hors de vue. Relevé sur capture le 17/09.
   Une case de matrice se dessine ici, et la cible reste confortable au doigt. */
.tbl.matrice input[type="checkbox"]{width:20px;height:20px;cursor:pointer;
  accent-color:var(--veille)}
.tbl.matrice td{text-align:center}
.tbl.matrice td:first-child{text-align:left}

/* LE VOLET D'UN AGENT SE REPLIE.

   À six agents, l'écran d'une visite dépassait 6 000 px : le contrôleur
   cherchait son agent en défilant, dehors, sur une tablette, de nuit. Les
   volets sont repliés sauf celui qu'on ouvre, et une barre les nomme en tête.
   Aucun script : un `<details>` fonctionne hors réseau, et c'est là que ça
   compte. Le curseur et la flèche disent que ça s'ouvre. */
.volet-agent>summary{cursor:pointer;list-style:none}
.volet-agent>summary::-webkit-details-marker{display:none}
.volet-agent>summary::after{content:"▾";margin-left:auto;color:var(--encre-3);
  font-size:13px;transition:transform var(--etat)}
.volet-agent[open]>summary::after{transform:rotate(180deg)}
.volet-agent>summary:hover{background:var(--surf-2)}
/* La cible d'ancre ne se colle pas sous le bandeau. */
.volet-agent{scroll-margin-top:60px}

/* LE BANDEAU SUR LA TABLETTE DU TERRAIN (1 024 px).

   Hune réduit son quartier C par le SENS sous 1 280 px. L'outil de contrôle
   descend plus bas : la tablette du terrain fait 1 024 px, et c'est sa
   définition de travail, pas un cas limite. On applique la même doctrine —
   on retire ce qui ne réclame rien, on garde ce qui empêche, et on ne coupe
   jamais un mot en deux. */
@media(max-width:1100px){
  .bandeau>.instance{display:none}
  .b-ref .chaine{display:none}
  .b-poste .longuevue{max-width:120px;min-width:90px}
  .b-poste .quart b{min-width:6ch;font-size:13px}
  .b-poste{gap:var(--e2);padding-right:2px}
  .b-poste form:last-child .b-nuit{max-width:11ch;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;display:inline-block;
    line-height:1.6}
}
@media(max-width:820px){
  .b-poste .longuevue-forme{display:none}
  .b-etat{display:none}
}

/* LE DÉTAIL DE LA FILE — parce qu'un compteur ne se reprend pas.

   « 14 gestes en attente — 3 refusé(s) par le serveur : à reprendre. »
   Lesquels ? Sur quel site, quel point, quel verdict ? La barre s'ouvre
   maintenant sur la liste, avec l'heure de saisie et le motif du refus, et un
   bouton qui force le renvoi. Sans cela on ressaisit tout au bureau, à l'heure
   du bureau — ou on sort le carnet. */
.file-detail{position:fixed;left:0;right:0;bottom:44px;z-index:61;max-height:46vh;
  overflow:auto;background:var(--surf);border-top:2px solid var(--lampe);
  box-shadow:0 -12px 30px -14px rgba(0,0,0,.4);padding:var(--e3) var(--e4);
  font-size:13.5px;color:var(--encre)}
.file-detail>b{display:block;margin-bottom:var(--e2);font-family:var(--display);
  font-size:16px;font-weight:400}
.file-detail ul{margin:0 0 var(--e3);padding:0;list-style:none}
.file-detail li{padding:5px 0;border-bottom:1px solid var(--filet-2);
  font-variant-numeric:tabular-nums;line-height:1.4}
.file-detail li:last-child{border-bottom:0}
.file-detail button{min-height:44px;font-size:15px;padding:10px 18px;
  background:var(--veille);color:#fff;border:0;border-radius:var(--r);cursor:pointer}
#file-terrain{cursor:pointer}

/* LE TEXTE DU TERRAIN, PAS SEULEMENT SES CIBLES.

   `.large-terrain` agrandissait les boutons et les champs, et laissait à 11 px
   capitales interlettrées les étiquettes, les aides et `.dit` — où vivent
   l'échéance de carte professionnelle, la référence du point et le libellé de
   l'écart retenu. Le §10.2 était tenu pour les doigts, pas pour les yeux. */
.large-terrain .champ>label{font-size:13.5px;text-transform:none;letter-spacing:0}
.large-terrain .dit,.large-terrain .aide,.large-terrain .pq{font-size:13.5px;
  line-height:1.45}
.large-terrain .jeton{font-size:12.5px;padding:3px 10px}

/* La croix d'une bulle : une bulle définitive qui recouvre le bandeau de la
   file cache la seule ligne qui dit si la nuit est partie. */
/* ⛔ Ces deux règles écrasaient `.toast` et `.toasts` de Hune SUR TOUS LES
   ÉCRANS, pour un besoin qui n'existe que sous le bandeau de file du terrain.
   Elles sont désormais portées par la coque terrain. */
.large-terrain .toast,.terrain .toast{position:relative;padding-right:30px}
.toast-fermer{position:absolute;top:2px;right:6px;background:transparent;border:0;
  color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.6;padding:2px 4px}
.toast-fermer:hover{opacity:1}
/* Les bulles s'empilent AU-DESSUS du bandeau de file, jamais dessus — et
   seulement là où ce bandeau existe. */
body:has(.large-terrain) .toasts{bottom:52px}

/* L'itinéraire depuis la carte de tournée. Un contrôleur en remplacement ne
   connaît pas le site : sans ce lien, il ouvre son téléphone personnel. */
.lien-plan { margin-left: .6rem; font-size: .85em; white-space: nowrap; }

/* LE DOSSIER D'UN ÉCART, OUVERT DANS SA LIGNE — le constat, sa pièce et
   l'échange contradictoire avant les deux boutons. On ne lève pas un écart
   qu'on n'a pas lu. */
.dossier-ecart { max-width: 90ch; }
.dossier-ecart p { margin: 0 0 var(--e3); }
.dossier-ecart p:last-child { margin-bottom: 0; }

/* UN VERBE QUI DOIT POSTER — pour que le matricule d'une demande d'article 15
   ne parte pas dans l'adresse (historique, journal de façade, Referer). Le
   bouton se présente comme le lien qu'il remplace : c'est le geste qui change,
   pas l'écran. */
.verbe-forme{display:inline}
.verbe-forme .verbe{border:0;background:none;cursor:pointer;font:inherit;padding:0}

/* ⛔ « SIMPLIFIE, IL Y A TROP DE BLABLA » — le dirigeant, 16/09.
   Les notes de doctrine protègent quelqu'un d'être accusé à tort : elles ne se
   suppriment pas. Mais elles ne se relisent pas dix fois par jour, et sur
   l'écran des non-conformités le premier écart actionnable commençait à près de
   sept cents pixels du haut. Elles se replient donc : le texte reste ENTIER
   dans la page — pour l'impression, pour un navigateur sans script, et pour
   qui veut le lire — il n'occupe simplement plus l'écran. */
.note-repliee{max-height:78px;overflow:hidden;position:relative}
.note-repliee::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:34px;background:linear-gradient(to bottom,transparent,var(--lampe-f))}
.note-plier{display:block;margin-top:var(--e2);border:0;background:none;padding:0;
  font:inherit;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--lampe-s);cursor:pointer}
.note-plier:hover{text-decoration:underline}

/* LA PHOTOGRAPHIE SE DÉPLIE — elle faisait 180 px sur chacun des vingt points
   d'une visite, pour un geste qui sert une ou deux fois. Le point à photo
   exigée s'ouvre tout seul : on ne doit pas pouvoir l'oublier. */
.photo-volet>summary{cursor:pointer;padding:8px 0;font-size:13px;
  color:var(--encre-2);list-style:none}
.photo-volet>summary::-webkit-details-marker{display:none}
.photo-volet>summary::before{content:"＋ ";color:var(--lampe-s)}
.photo-volet[open]>summary::before{content:"− "}
.large-terrain .photo-volet>summary{font-size:15px;padding:12px 0}

/* UNE PIÈCE SE REGARDE ET SE RETIRE AU MÊME ENDROIT — elle s'affichait deux
   fois sur le même écran : en vignette en haut, puis en ligne en bas. */
.piece-j{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

/* UNE LIGNE DE TABLEAU QUI DOIT POSTER — on trouvait l'agent et on ne pouvait
   pas l'ouvrir ; son matricule ne doit pas pour autant repartir dans l'adresse. */
.lien-tbl{border:0;background:none;padding:0;font:inherit;color:var(--lampe-s);
  cursor:pointer;text-align:left}
.lien-tbl:hover{text-decoration:underline}

/* POSER UNE ATTRIBUTION DEPUIS LA LIGNE DE LA PERSONNE — elles se lisaient ici
   et se posaient ailleurs, ce qui refermait la fiche et rouvrait l'organigramme
   entier. Le formulaire se déplie sous ses attributions. */
.poser-attribution>summary{cursor:pointer;padding:10px var(--e4);font-size:13px;
  color:var(--lampe-s);list-style:none;border-top:1px solid var(--trait)}
.poser-attribution>summary::-webkit-details-marker{display:none}
.poser-attribution>summary::before{content:"＋ "}
.poser-attribution[open]>summary::before{content:"− "}

/* L'ÉCART ET L'OBSERVATION SE DÉPLIENT — ils coûtaient 160 px sur chacun des
   quarante-six points d'une visite, pour un geste qui ne sert qu'au « non
   conforme » et au « non constaté ». Ils restent AU-DESSUS des verdicts : les
   poser après avoir tranché obligeait à re-trancher. */
.constat-volet>summary{cursor:pointer;padding:8px 0;font-size:13px;
  color:var(--encre-2);list-style:none}
.constat-volet>summary::-webkit-details-marker{display:none}
.constat-volet>summary::before{content:"＋ ";color:var(--lampe-s)}
.constat-volet[open]>summary::before{content:"− "}
.large-terrain .constat-volet>summary{font-size:15px;padding:12px 0}