/* Securex Suivi Electro — feuille de la PWA.

   Socle porté de Suivi : les tokens de marque (--sx-*), les deux thèmes, les
   deux coquilles, les boutons et les formulaires. Volontairement RÉDUIT à ce que
   les écrans livrés utilisent : on n'emporte pas 700 lignes de classes d'écrans
   Human qui n'existent pas ici — du CSS mort finit toujours par être copié comme
   s'il faisait autorité.

   Les habillages d'écran métier viendront avec la conception CDesign du lot 1.

   ⚠️ Deux invariants de mise en page sont dans ce fichier, chacun né d'un
   incident : `height:100%` + `@supports (height:100dvh)` sur la coquille terrain
   (jamais `100vh` seul), et `min-height:0` sur la colonne de navigation. Voir
   leurs commentaires. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/hanken-700-latin.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/hanken-800-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/plexsans-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/plexsans-500-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/plexsans-600-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/plexsans-700-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/plexmono-400-latin.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/plexmono-600-latin.woff2') format('woff2')}

:root{
  --sx-rouge:#d11b2a; --sx-rouge-hover:#b3121f; --sx-encre:#0f1b2d; --sx-bleu:#1e3a5f;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif; --titres:'Hanken Grotesk',sans-serif;
}
/* Thème clair — le seul utilisé en E1. Le thème sombre est conservé (il servira
   aux écrans travaillés de nuit s'il y en a) mais rien ne l'active encore. */
.theme-clair{
  --fond:#eaeef3; --surface:#ffffff; --surface2:#f5f7fa;
  --bordure:#d7dee6; --bordure2:#c8d0da;
  --texte:#44566b; --titres-c:#0f1b2d; --muted:#5b6b7f; --muted2:#5b6b7f;
  --ok:#2e7d55; --ok-fond:#eaf3ed; --ok-bordure:#bcd8c9;
  --attente:#9a5b00; --attente-fond:#faf1e2; --attente-bordure:#e6cf9f;
  --alerte:#b3121f; --alerte-fond:#fbeaea;
  --nav-actif:#f5f7fa; --nav-actif-texte:#0f1b2d;
  /* B1 — la provenance d'une ligne du référentiel. En ENCRE, jamais en
     alerte : une saisie de bureau n'est pas une faute, c'est une source
     moins forte. C'est le repère qui distingue, pas la couleur. */
  --eq-provenance:#6b7a8d;
}
.theme-sombre{
  --fond:#060d15; --surface:#0a1119; --surface2:#080f18;
  --bordure:#121c29; --bordure2:#1c2a3c;
  --texte:#b3c0cf; --titres-c:#eaeef3; --muted:#8494ab; --muted2:#707f97;
  --ok:#3f8f68; --ok-fond:#0b1420; --ok-bordure:#1c2a3c;
  --attente:#d99a4e; --attente-fond:#151009; --attente-bordure:#3d2f1a;
  --alerte:#ff5a66; --alerte-fond:rgba(209,27,42,.07);
  --nav-actif:#101c2c; --nav-actif-texte:#eaeef3;
  --eq-provenance:#7d8ca1;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--sans);font-size:14px;-webkit-font-smoothing:antialiased}
a{color:var(--sx-bleu);text-decoration:none}
.theme-sombre a{color:#8fb3c9}
a:hover{color:var(--titres-c)}
::selection{background:var(--sx-rouge);color:#fff}
button{font-family:var(--sans)}
/* Transitions de couleur seulement, jamais la mise en page : rien ne bouge sous
   le doigt. Compatible prefers-reduced-motion (aucun mouvement). */
.nav-item,.onglet,.btn-primaire,.btn-secondaire,.pilule-langue{transition:background-color .15s ease,border-color .15s ease,color .15s ease}
:focus-visible{outline:2px solid var(--sx-rouge);outline-offset:1px;box-shadow:0 0 0 4px rgba(209,27,42,.12)}
.mono{font-family:var(--mono)}
.kicker{font-size:10.5px;letter-spacing:.2em;color:var(--muted)}
.flex1{flex:1}
#root{height:100%}
.pile{display:flex;flex-direction:column;gap:12px}
.pile-serree{display:flex;flex-direction:column;gap:6px}

/* ===== Coquille bureau (responsable, commercial, admin) ===== */
.coquille-bureau{display:flex;height:100vh;overflow:hidden}
/* 🔴 min-height:0 : sans lui, un enfant flex refuse de passer sous sa taille de
   contenu et RIEN ne défile — la colonne se tronque en silence. Sur Suivi, un
   compte multi-rôles cumulait assez d'entrées pour que le badge de synchro, le
   profil et la bascule FR/MG soient hors d'atteinte : ni barre, ni molette.
   Electro cumulera aussi (Sylvestre est responsable + technicien). */
.sidebar{width:210px;flex:none;display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--bordure);background:var(--surface2)}
/* La nav est la SEULE zone élastique et elle défile ; logo et pied ne se
   compriment jamais (flex:none) : le pied reste toujours visible en bas. */
.sidebar-logo{display:flex;flex-direction:column;gap:9px;padding:20px 18px 16px;flex:none}
.sidebar-logo img{width:100px;display:block}
.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:6px 10px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--bordure2) transparent}
.sidebar-nav::-webkit-scrollbar{width:7px}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--bordure2);border-radius:4px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.nav-item{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:8px;color:var(--muted);font-size:14px}
.nav-item:hover{background:var(--nav-actif);color:var(--texte)}
.nav-item.actif{background:var(--nav-actif);color:var(--nav-actif-texte);font-weight:600}
.sidebar-pied{display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;border-top:1px solid var(--bordure);flex:none}
.sidebar-user{display:flex;flex-direction:column;gap:2px;color:inherit}
.sidebar-nom{font-weight:600;font-size:13.5px;color:var(--titres-c)}
.sidebar-role{font-size:12px;color:var(--muted)}
.colonne-principale{flex:1;display:flex;flex-direction:column;min-width:0}
.contenu{flex:1;overflow:auto;padding:22px 26px}
.contenu-etroit{max-width:560px}

/* Bandeau du haut. flex-wrap : sous 1440 px les écrans chargés ne tiennent plus
   sur une ligne, et un débordement rogné produit un contrôle invisible mais
   focusable — le pire des cas. Mieux vaut deux lignes. */
.bandeau{display:flex;align-items:center;flex-wrap:wrap;gap:20px;padding:12px 22px;border-bottom:1px solid var(--bordure);background:var(--surface);flex:none;min-height:62px}
.bandeau-libelle{font-family:var(--titres);font-weight:700;font-size:15px;color:var(--titres-c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.horloge{font-weight:600;font-size:21px;color:var(--titres-c)}

/* Badge synchro — 3 états, honnêtes */
.badge-synchro{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:999px;white-space:nowrap;align-self:flex-start}
.badge-synchro.ok{background:var(--ok-fond);color:var(--ok);border:1px solid var(--ok-bordure)}
.badge-synchro.encours{background:#eaeef3;border:1px solid #c8d0da;color:var(--sx-bleu)}
.badge-synchro.horsligne{background:var(--sx-encre);color:#fff;border:1px solid var(--sx-encre)}

/* Bascule FR/MG */
.bascule-langue{display:flex;gap:6px}
.pilule-langue{font-family:var(--mono);font-size:11px;padding:5px 11px;border-radius:6px;border:1px solid var(--bordure2);color:var(--muted);cursor:pointer;background:none;min-height:28px}
.pilule-langue:hover{color:var(--texte)}
.pilule-langue.active{background:var(--sx-bleu);border-color:var(--sx-bleu);color:#fff;font-weight:600}
.bascule-langue.large .pilule-langue{min-height:44px;flex:1;font-size:12px}

/* ===== Coquille terrain (technicien, mobile ≤ 420 px) ===== */
/* 🔴 height:100% et NON 100vh : sur mobile, 100vh inclut la zone de la barre du
   navigateur — la barre d'onglets du bas se retrouvait cachée DERRIÈRE elle, et
   l'utilisateur ne pouvait plus changer d'écran. `dvh` quand il est disponible. */
.coquille-terrain{max-width:420px;margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--fond)}
@supports (height:100dvh){.coquille-terrain{height:100dvh}}
.terrain-entete{display:flex;align-items:center;gap:12px;padding:14px 16px 12px;background:var(--surface);border-bottom:1px solid var(--bordure)}
.terrain-titres{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.terrain-titre{font-family:var(--titres);font-weight:800;font-size:18px;color:var(--titres-c)}
.terrain-soustitre{font-size:11px;color:var(--muted);letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.terrain-contenu{flex:1;overflow:auto;padding:14px 14px 20px}
/* padding-bottom safe-area : sur téléphone à encoche/indicateur d'accueil, la
   barre d'onglets ne doit pas être poussée sous l'indicateur. */
.barre-onglets{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface);border-top:1px solid var(--bordure);padding-bottom:env(safe-area-inset-bottom,0)}
/* Cible tactile 52 px : le technicien manipule le téléphone d'une main, souvent
   avec des gants ou les mains sales. */
.onglet{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 2px;font-size:11.5px;letter-spacing:-.2px;font-weight:500;color:var(--muted);border-top:2px solid transparent;text-align:center;line-height:1.15;overflow:hidden}
@media (min-width:420px){.onglet{font-size:12.5px}}
.onglet.actif{color:var(--sx-bleu);border-top-color:var(--sx-bleu);font-weight:600}

/* ===== Boutons & formulaires ===== */
.btn-primaire{display:flex;align-items:center;justify-content:center;min-height:50px;width:100%;background:var(--sx-rouge);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer}
.btn-primaire:hover:not(:disabled){background:var(--sx-rouge-hover)}
.btn-primaire:disabled{background:var(--bordure2);cursor:default}
.btn-secondaire{min-height:48px;background:var(--surface);border:1px solid var(--bordure2);border-radius:10px;color:var(--titres-c);font-family:var(--sans);font-weight:600;font-size:14px;cursor:pointer}
.btn-secondaire:hover{background:var(--surface2)}
.btn-texte-rouge{background:none;border:none;color:var(--sx-rouge);font-size:14px;font-weight:600;cursor:pointer;padding:12px 4px;text-align:left;min-height:44px}
.btn-texte-rouge:hover{color:var(--sx-rouge-hover)}
.champ{display:flex;flex-direction:column;gap:6px}
.champ-libelle{font-size:12.5px;font-weight:600;color:var(--titres-c)}
.champ input{min-height:46px;padding:0 13px;border:1px solid var(--bordure2);border-radius:9px;font-family:var(--sans);font-size:15px;color:var(--titres-c);background:var(--surface)}
.champ input::placeholder{color:var(--muted2)}
/* Aide sous un champ : posée sur Suivi le 26/07/2026 parce qu'un champ
   « Téléphone » tout court ne disait ni de quel numéro il s'agit ni à quoi il
   sert. Sur une fiche d'intervention (SIM, scellé, n° de série), l'explication
   cesse d'être un confort. */
.champ-aide{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.champ-erreur{font-size:11px;color:var(--alerte)}
.form-erreur{padding:11px 13px;border-radius:9px;background:var(--alerte-fond);color:var(--alerte);font-size:13px;border:1px solid rgba(209,27,42,.35)}
/* E141 — le geste offert DANS le refus. Un « déjà au parc » sans bouton
   pour y aller n'est qu'un reproche : celui qui lit cette phrase vient de
   chercher cette plaque sans la trouver. */
.form-erreur{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.btn-en-ligne{width:auto;min-height:36px;padding:0 12px;font-size:12.5px}

/* ===== Connexion ===== */
.connexion{min-height:100vh;display:flex}
.form-connexion{display:flex;flex-direction:column;gap:16px}
.connexion-marque{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.connexion-carte{background:#fff;border-radius:14px;padding:34px 32px;width:min(400px,92vw);box-shadow:0 18px 50px rgba(15,27,45,.18)}
.connexion-carte.nue{box-shadow:none;padding:0}
.connexion-titre{font-family:var(--titres);font-weight:800;font-size:22px;color:var(--sx-encre);margin:0 0 20px}
.connexion-volets .volet-encre{flex:1.1;background:var(--sx-encre);color:#b3c0cf;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:56px 64px}
.connexion-volets .volet-encre .kicker{color:#8494ab}
.volet-phrase{font-family:var(--titres);font-weight:700;font-size:26px;line-height:1.35;color:#eaeef3;max-width:420px;margin:0;text-wrap:pretty}
.volet-pied{font-size:10.5px;letter-spacing:.2em;color:#5c6f86;margin-top:26px}
.connexion-volets .volet-form{flex:1;background:#fff;display:flex;align-items:center;justify-content:center;padding:40px}
/* Sous 760 px (un technicien qui se connecte depuis son téléphone), les deux
   volets s'empilent : le formulaire reste atteignable sans défilement latéral. */
@media (max-width:760px){.connexion-volets{flex-direction:column}.connexion-volets .volet-encre{padding:36px 28px;flex:none}}
.indice-demo{margin-top:18px;font-size:10px;letter-spacing:.05em;color:#5b6b7f;background:#f5f7fa;border:1px dashed #c8d0da;border-radius:8px;padding:9px 11px;line-height:1.6}

/* ===== Cartes, profil, chantier ===== */
.carte{background:var(--surface);border:1px solid var(--bordure);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px}
.carte-titre{font-family:var(--titres);font-weight:700;font-size:15px;color:var(--titres-c)}
.carte-texte{font-size:13.5px;line-height:1.6;color:var(--texte);margin:0;text-wrap:pretty}
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.etat-vide{border:1px dashed var(--bordure2);border-radius:9px;padding:16px 14px;font-size:14px;color:var(--muted);text-wrap:pretty}
.chantier{border:1px dashed var(--bordure2);border-radius:12px;padding:22px 20px}
.chantier-titre{font-family:var(--titres);font-weight:700;font-size:16px;color:var(--titres-c)}
.chantier-texte{font-size:13.5px;color:var(--muted);line-height:1.6;margin:8px 0 0;text-wrap:pretty}
.profil{display:flex;flex-direction:column;gap:12px}
.profil-nom{font-family:var(--titres);font-weight:800;font-size:20px;color:var(--titres-c)}
.profil-role{font-size:13px;color:var(--muted)}
.profil-agence,.profil-email{font-size:11.5px;color:var(--muted2)}
.profil-version{font-size:10.5px;color:var(--muted2);letter-spacing:.04em;display:flex;gap:8px;flex-wrap:wrap}
.profil-verdict.a-jour{color:var(--ok)}
.profil-verdict.perimee{color:var(--attente)}
.synchro-detail{display:flex;flex-direction:column}
.synchro-ligne{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;border-bottom:1px solid var(--bordure)}
.synchro-ligne:last-child{border-bottom:none}
.synchro-libelle{font-size:13px}
.synchro-valeur{font-size:11.5px;color:var(--titres-c)}
.synchro-valeur.alerte{color:var(--alerte)}
/* ===== Badge DÉMO : permanent, impossible à confondre avec le réel =====

   🔴 IL RÉSERVE SA BANDE, IL NE SE POSE PLUS SUR L'ACTION (ED07, accroc de la
   formation du 31/07/2026).

   Posé en `fixed` à 14 px du bas et centré, il tombait pile au milieu de la
   `.barre-basse` — c'est-à-dire SUR le bouton « Faire signer », qui occupe
   toute la largeur restante (`.barre-basse .btn-primaire{flex:1}`). Et sur
   l'accueil, sur la barre d'onglets. `pointer-events:none` achevait de rendre
   le défaut sournois : le bouton restait cliquable, seul son libellé était
   illisible — rien ne se cassait, on lisait juste mal l'écran le jour de la
   formation. Mesuré : 4855 px² de recouvrement, soit le badge ENTIER sur
   l'action, en 390×844 comme en 520×760.

   Le geste est celui d'E20, retourné vers le bas : on réserve une bande de la
   hauteur du badge et on réduit le contenu d'autant. Il ne recouvre donc plus
   rien — mais il ne se ferme pas, ne défile pas et ne dépend d'aucun clic : il
   reste rouge, en bas, `pointer-events:none`. C'est un état, pas un message.

   🔴 ET DES DEUX CÔTÉS, comme E20 l'a appris à ses dépens : les coquilles ne se
   dimensionnent PAS sur #root (100vh au bureau, 100dvh au terrain, donc sur le
   VIEWPORT). Réduire #root seul les laisserait déborder par le bas de la hauteur
   exacte de la bande, et la barre d'onglets du technicien s'en trouverait
   coupée — onglet Profil compris, celui qui porte la déconnexion.

   Les règles d'E20 ne sont pas réécrites mais COMPLÉTÉES par un sélecteur plus
   spécifique quand les deux marqueurs coexistent (démonstration ouverte sur
   l'essai). Réunir les deux réserves dans une variable unique aurait été plus
   court et aurait effacé les quatre lignes qu'un test cite mot pour mot :
   `MarqueurInstanceFrontTest` les vérifie à la chaîne près, et affaiblir le
   garde-fou du bandeau pour raccourcir celui du badge serait un mauvais
   échange. */
:root{--h-badge-demo:38px}
.badge-demo{position:fixed;left:50%;transform:translateX(-50%);bottom:7px;z-index:60;font-size:10px;letter-spacing:.14em;font-weight:600;color:#fff;background:var(--sx-rouge);border-radius:999px;padding:6px 12px;box-shadow:0 4px 14px rgba(209,27,42,.35);pointer-events:none;white-space:nowrap}
body.avec-badge-demo #root{height:calc(100% - var(--h-badge-demo))}
body.avec-badge-demo .coquille-bureau{height:calc(100vh - var(--h-badge-demo))}
@supports (height:100dvh){
  body.avec-badge-demo .coquille-terrain{height:calc(100dvh - var(--h-badge-demo))}
}
/* Les DEUX marqueurs à la fois — bandeau en haut, badge en bas. Le cas existe
   et il n'est pas rare : c'est une démonstration ouverte sur essai.electro…,
   celle de la formation. Les deux réserves s'additionnent. */
body.avec-bandeau-instance.avec-badge-demo #root{height:calc(100% - var(--h-bandeau-instance) - var(--h-badge-demo))}
body.avec-bandeau-instance.avec-badge-demo .coquille-bureau{height:calc(100vh - var(--h-bandeau-instance) - var(--h-badge-demo))}
@supports (height:100dvh){
  body.avec-bandeau-instance.avec-badge-demo .coquille-terrain{height:calc(100dvh - var(--h-bandeau-instance) - var(--h-badge-demo))}
}

/* ===== Bandeau d'instance — le bac à sable (E20) =====

   Permanent, en HAUT, pleine largeur, sur TOUS les écrans. Il ne se ferme pas et
   ne défile pas : c'est un état de la machine, pas un message.

   🔴 AMBRE RAYÉ, PAS ROUGE. Le rouge est la marque Securex ET la couleur des
   alertes : un bandeau rouge permanent aurait banalisé les deux en une journée.
   La trame de ruban de chantier dit « zone d'exercice » sans mot, et se
   distingue au premier coup d'œil du badge DÉMO (pastille rouge, en bas) — les
   deux coexistent sur une démonstration ouverte sur l'essai, et ils ne doivent
   pas se confondre.

   🔴 IL POUSSE LE CONTENU, IL NE LE RECOUVRE PAS. Posé en `fixed` seul, il
   masquerait l'en-tête de la coquille terrain — dont le titre de la fiche en
   cours. On décale donc #root d'autant, via une classe posée sur BODY : les
   coquilles réécrivent `document.documentElement.className` à chaque rendu
   (`theme-clair`), une classe posée sur <html> disparaîtrait au premier écran.

   Aucune animation : la trame est statique (compatible prefers-reduced-motion). */
:root{--h-bandeau-instance:22px}
.bandeau-instance{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--h-bandeau-instance);line-height:var(--h-bandeau-instance);
  text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:10px;letter-spacing:.16em;font-weight:600;color:#2a1800;
  background:repeating-linear-gradient(135deg,#f0a824 0 10px,#d98e05 10px 20px);
  border-bottom:1px solid #8a5a00;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  pointer-events:none;
}
body.avec-bandeau-instance #root{height:calc(100% - var(--h-bandeau-instance));margin-top:var(--h-bandeau-instance)}
/* 🔴 ET LES DEUX COQUILLES AVEC LUI. Elles ne se dimensionnent PAS sur #root :
   la coquille bureau est en `100vh` et la coquille terrain en `100dvh` — donc
   sur le VIEWPORT. Décaler #root seul les laissait déborder par le bas de la
   hauteur exacte du bandeau, et la barre d'onglets du technicien s'en trouvait
   coupée : Aujourd'hui, Sites, Envois, Profil à moitié hors écran, dont l'onglet
   Profil qui porte la déconnexion.

   Trouvé par le BALAYAGE, sur sa capture (reel-technicien-accueil.png), et par
   lui seul — le bandeau était bien là, aucun symptôme n'était levé, et rien dans
   le DOM ne disait que le bas de l'écran était parti dessous.

   L'invariant de `.coquille-terrain` est préservé : `height:100%` en base (elle
   hérite alors du #root déjà réduit) et `100dvh` sous @supports, jamais `100vh`
   seul — cf. le commentaire en tête de fichier. */
body.avec-bandeau-instance .coquille-bureau{height:calc(100vh - var(--h-bandeau-instance))}
@supports (height:100dvh){
  body.avec-bandeau-instance .coquille-terrain{height:calc(100dvh - var(--h-bandeau-instance))}
}
/* L'alerte globale est en `fixed` elle aussi : sans ce décalage, le bandeau lui
   mangerait ses premiers pixels — et une erreur à demi lisible est pire qu'une
   erreur absente. */
body.avec-bandeau-instance .alerte-globale{top:calc(14px + var(--h-bandeau-instance))}

/* ===== Modale ===== */
.voile{position:fixed;inset:0;background:rgba(6,13,21,.55);display:flex;align-items:center;justify-content:center;z-index:80}
.dialogue{background:var(--surface);border:1px solid var(--bordure2);border-radius:12px;padding:20px;width:min(380px,90vw);display:flex;flex-direction:column;gap:12px}
.dialogue-titre{font-family:var(--titres);font-weight:700;font-size:15px;color:var(--titres-c)}
.dialogue-boutons{display:flex;gap:8px;justify-content:flex-end}
.dialogue-boutons .btn-secondaire{min-height:40px;padding:0 14px}

/* ===== Alerte globale ===== */
/* Un geste refusé doit se voir : sur Suivi, toutes les écritures avalaient leurs
   erreurs en silence et l'opérateur « cliquait dans le vide ». */
.alerte-globale{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:12px;max-width:min(680px,92vw);padding:12px 14px;border-radius:10px;background:var(--alerte-fond);border:1px solid rgba(209,27,42,.45);color:var(--alerte);font-size:13.5px;box-shadow:0 6px 24px rgba(6,13,21,.28);text-wrap:pretty}
.theme-sombre .alerte-globale{background:#2a0d11;border-color:#5e1a22;color:#ff8a92}
.alerte-texte{flex:1;min-width:0}
.alerte-fermer{flex:none;min-height:28px;min-width:28px;background:none;border:none;color:inherit;cursor:pointer;font-size:13px}

/* ══════════════════════════════════════════════════════════════════════════
   ÉCRANS DU TECHNICIEN — lot 1 (E5)

   Habillage des six écrans de `.design/lot1-fiche-intervention/` : S1
   Aujourd'hui, S2 fiche systèmes fixes (option A, fiche continue), S3
   signature et fiche figée, S4 fiche GPS, S5 sites et historique, S6 envois.

   Les maquettes M1–M5 sont des PROTOTYPES : on les lit, on ne copie pas leur
   HTML (leurs styles sont inline, sans tokens, sans thème). Ce qui est repris
   d'elles, ce sont les DÉCISIONS — la grammaire des chips, la ligne
   d'équipement avec son segmenté, la barre basse fixe, le sceau.

   Contraintes de terrain (DESIGN_BRIEF § 1.4) : une main, plein soleil,
   Android d'entrée de gamme. Cibles ≥ 48 px, corps ≥ 16 px sur ce qui se
   saisit, contrastes forts sur fond clair, actions principales en bas (zone du
   pouce), aucune animation décorative. ═════════════════════════════════════ */

/* ——— Chips de statut ————————————————————————————————————————————————————
   🔴 « Signée » et « envoyée » sont DEUX chips distinctes, jamais fusionnées
   (DESIGN_BRIEF § 2). Une fiche signée hors réseau est déjà une preuve,
   complète, avant d'avoir quitté le téléphone : les confondre en une seule
   pastille verte ferait croire au technicien que son travail est parti. */
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.chip-planifiee{background:#eceef2;color:#44566b}
.chip-en-cours{background:#e6eef2;color:#2f6f8f}
.chip-attente{background:#faf0dd;color:#8a5a14}
.chip-envoyee{background:#e7f3ec;color:#2f8f5a}
.chip-recue{background:#e7f3ec;color:#2f8f5a}
.chip-figee{background:var(--sx-encre);color:#fff}
.chip-anomalie{background:#fbeaea;color:#c0392b}
.chip-type{background:none;border:1px solid var(--bordure2);color:var(--texte)}
.chip-gps{background:#44566b;color:#fff}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* ——— Bandeaux d'état ————————————————————————————————————————————————————
   Le bandeau hors-ligne est un LIEN vers Envois : il ne se contente pas
   d'annoncer un état, il mène au seul écran qui peut le résoudre. */
.bandeau-horsligne{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1c2a3d;color:#ecd9b0;padding:11px 16px;font-size:13px;font-weight:600;min-height:44px}
.bandeau-horsligne:hover{color:#fff}
.bandeau-erreur{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--alerte-fond);color:var(--alerte);padding:10px 16px;font-size:12.5px;border-bottom:1px solid rgba(209,27,42,.3)}
.bandeau-erreur button{background:none;border:1px solid currentColor;border-radius:6px;color:inherit;font-weight:600;font-size:12px;min-height:32px;padding:0 10px;cursor:pointer}
.note-source{font-size:11.5px;color:var(--muted);text-wrap:pretty}

/* ——— En-tête terrain enrichi (zone, état de synchro) ————————————————————— */
.terrain-entete{gap:10px}
.terrain-etat{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);white-space:nowrap}
.point{width:8px;height:8px;border-radius:50%;flex:none}
.point-ok{background:#2f8f5a}
.point-attente{background:#cf8a2e}

/* ——— Onglets : badge de la file ————————————————————————————————————————— */
.onglet{position:relative}
.onglet-badge{position:absolute;top:4px;left:calc(50% + 8px);background:var(--sx-rouge);color:#fff;font-size:10px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* ——— S1 : la journée ————————————————————————————————————————————————————— */
.jour-entete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.jour-date{font-family:var(--titres);font-weight:700;font-size:18px;color:var(--titres-c)}
.jour-compte{font-size:13px;color:var(--texte)}
.carte-interv{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:14px;text-align:left;width:100%;font-family:var(--sans);cursor:pointer;color:inherit}
.carte-interv.a-moi{border:1.5px solid var(--sx-encre)}
.carte-interv:hover{border-color:var(--bordure2)}
.carte-interv-haut{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.carte-interv-heure{font-size:14px;font-weight:700;color:var(--titres-c)}
.carte-interv-site{font-size:17px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.carte-interv-detail{display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--texte)}
.carte-interv-pied{display:flex;align-items:center;justify-content:space-between;gap:8px}
.carte-interv-ref{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mention-redacteur{font-size:12px;font-weight:600;color:var(--sx-rouge)}
/* Le bouton flottant reste au-dessus du contenu défilant, jamais au-dessus de
   la barre d'onglets : il doit être atteignable sans masquer la navigation. */
.bouton-flottant{position:sticky;bottom:0;align-self:flex-end;background:var(--sx-encre);color:#fff;border:none;border-radius:999px;padding:0 20px;min-height:52px;font-size:14px;font-weight:600;font-family:var(--sans);cursor:pointer;box-shadow:0 8px 20px rgba(15,27,45,.3);margin-top:4px}
.bouton-flottant:hover{background:#1c2a3d}
.etat-vide-centre{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:28px 24px;color:var(--muted)}
.etat-vide-titre{font-family:var(--titres);font-weight:700;font-size:17px;color:var(--titres-c)}
.etat-vide-texte{font-size:13.5px;line-height:1.5;text-wrap:pretty}

/* ——— En-tête de fiche (S2/S3/S4) ————————————————————————————————————————— */
.fiche-entete{display:flex;align-items:center;gap:12px;background:var(--sx-encre);color:#fff;padding:12px 16px}
.fiche-entete .retour{flex:none;background:none;border:none;color:#fff;cursor:pointer;min-height:44px;min-width:44px;font-size:20px;line-height:1;padding:0}
.fiche-entete-titres{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.fiche-ref{font-family:var(--mono);font-size:13px;font-weight:600}
.fiche-ref-provisoire{color:#ecd9b0}
.fiche-sous{font-size:11.5px;color:#9fabba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ——— S2 : le corps de la fiche ————————————————————————————————————————— */
.bloc{background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.bloc-titre{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)}
.bloc-entete{display:flex;align-items:center;justify-content:space-between;gap:10px}
.contexte-grille{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px}
.contexte-grille > span{min-width:0;overflow-wrap:anywhere}
.contexte-libelle{color:var(--muted)}
.compteur-equip{font-family:var(--mono);font-size:12px;font-weight:600;color:#2f6f8f}
.groupe-systeme{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}

/* Ligne d'équipement : désignation + n° de série mono + segmenté OK/Anomalie.
   Le n° de série est en mono parce qu'il se lit et se compare caractère par
   caractère — c'est lui qui identifie le matériel dans dix ans. */
.equip{background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:10px}
.equip.en-anomalie{border:1.5px solid #c0392b}
.equip.pose{background:var(--ok-fond);border-color:var(--ok-bordure)}
/* « Déjà en place » : un fond NEUTRE, jamais le vert de la pose. Les deux
   natures ne doivent pas se ressembler — c'est toute la fermeture d'ED42. Le
   trait plein à gauche marque un ajout du technicien sans lui donner la couleur
   de ce que Securex a posé. */
.equip.constatee{background:var(--surface2);border-left:3px solid var(--sx-bleu)}
.equip.constatee .equip-marque{color:var(--sx-bleu)}
.equip.deposee{background:var(--surface2);border-style:dashed}
.equip-haut{display:flex;align-items:center;gap:10px}
.equip-identite{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.equip-nom{font-size:14px;font-weight:600;color:var(--titres-c);overflow-wrap:anywhere}
.equip-sn{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
/* Le geste de complétion : une cible de 44 px, pas un lien de 12 px. Il est
   offert au doigt d'un technicien debout, pas à une souris. */
.equip-sn-completer{align-self:flex-start;min-height:44px;padding:0;border:none;background:none;font-family:var(--mono);font-size:11.5px;color:var(--sx-bleu);text-decoration:underline;cursor:pointer;text-align:left}
.equip-marque{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--ok)}
.equip-actions{display:flex;gap:6px;flex:none}
/* Segmenté : deux cibles de 48 px de haut minimum, côte à côte. « OK » et
   « Tsy mety » tiennent tous deux dans 72 px (SPEC-S2). */
.segmente{display:flex;border:1.5px solid var(--bordure2);border-radius:7px;overflow:hidden;flex:none}
.segmente button{background:var(--surface);border:none;border-left:1px solid var(--bordure2);min-height:48px;min-width:62px;padding:0 12px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texte);cursor:pointer}
.segmente button:first-child{border-left:none}
.segmente.est-ok{border-color:#2f8f5a}
.segmente.est-ok button[data-constat="ok"]{background:#2f8f5a;color:#fff;font-weight:700}
.segmente.est-anomalie{border-color:#c0392b}
.segmente.est-anomalie button[data-constat="anomalie"]{background:#c0392b;color:#fff;font-weight:700}
.equip textarea,.bloc textarea{width:100%;min-height:64px;border:1px solid var(--bordure2);border-radius:8px;padding:10px 11px;font-family:var(--sans);font-size:16px;color:var(--titres-c);background:var(--surface);resize:vertical}
.equip-suite{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--texte);min-height:44px;cursor:pointer}
.equip-suite input{width:20px;height:20px;flex:none;accent-color:var(--sx-encre)}
/* Trois gestes désormais : les deux AJOUTS côte à côte — c'est leur comparaison
   qui compte, et le libellé doit se lire d'un coup d'œil en plein soleil — puis
   la dépose sur sa propre ligne, parce qu'elle est d'une autre nature. */
.actions-equip{display:flex;gap:8px;flex-wrap:wrap}
.btn-pointille{flex:1;border:1.5px dashed var(--muted);border-radius:8px;background:none;padding:12px 8px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texte);cursor:pointer;min-height:48px}
.btn-pointille:hover{border-color:var(--sx-encre);color:var(--titres-c)}
.btn-ajout{flex:1 1 calc(50% - 4px);min-width:0;overflow-wrap:anywhere}
.btn-deposer{flex:1 1 100%}
/* 🔴 LE BOUTON PLEIN, ET IL CHANGE DE CAMP. Sur un site jamais inventorié, c'est
   « + Équipement déjà en place » qui le porte : presque tout ce qu'on y ajoute
   était déjà là. Trait plein contre trait pointillé — la différence se voit sans
   lire, ce qui est le seul test qui vaille sur un téléphone au soleil. */
.btn-pointille.est-primaire{border-style:solid;border-color:var(--sx-encre);background:var(--surface);color:var(--titres-c)}
.btn-pointille.est-primaire:hover{background:var(--surface2)}

/* ── EA68 · le remplacement — DANS LA LIGNE, pas dans la barre d'ajout ──────
   🔴 C'est le point de vigilance du rang, et il se règle ICI autant que dans le
   JS. Les deux boutons d'ajout parlent du SITE : trait pointillé, pleine
   largeur, en bas dans `.actions-equip`. Celui-ci parle de CETTE PIÈCE-LÀ : il
   est aligné à GAUCHE, il ne prend pas toute la ligne, et il est discret —
   souligné plutôt que cadré, comme `.equip-sn-completer`, l'autre geste qui vit
   dans une ligne d'équipement. La famille visuelle dit à quoi le geste
   s'applique, sans qu'on ait à lire.
   ⚠️ 44 px de haut quand même : c'est une cible tactile, au soleil, avec des
   gants. */
.btn-remplacer{align-self:flex-start;min-height:44px;padding:0;border:none;background:none;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--sx-bleu);text-decoration:underline;cursor:pointer;text-align:left}
.btn-remplacer:hover{color:var(--sx-encre)}
/* La pièce qui sort, en tête de la feuille : elle se lit, elle ne se saisit
   pas. Fond mat et bord gauche, comme tout ce qui est du référentiel. */
.equip-sortant{background:var(--surface2);border-left:3px solid var(--muted);border-radius:0 8px 8px 0;padding:9px 11px;display:flex;flex-direction:column;gap:2px}
/* EA67 · les quatre motifs. Un tap au lieu d'un clavier ouvert en plein soleil.
   🔴 Le choisi est PLEIN, les autres cadrés : la différence se voit sans lire. */
.chips-motif{display:flex;flex-wrap:wrap;gap:6px}
.chip-motif{border:1px solid var(--bordure2);border-radius:16px;background:var(--surface);padding:9px 13px;min-height:44px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--texte);cursor:pointer}
.chip-motif.est-choisi{background:var(--sx-encre);border-color:var(--sx-encre);color:#fff}

.bascule{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.bascule input{width:22px;height:22px;accent-color:#2f8f5a}

/* Barre basse : l'action principale reste dans la zone du pouce, quelle que
   soit la longueur de la fiche.

   🔴 HORS de la zone défilante (elle est un frère du <main>, pas son dernier
   enfant). En `position:sticky` à l'intérieur, elle collait bien en bas — et le
   contenu défilait DERRIÈRE elle : le dixième équipement d'une liste de dix
   finissait sous la barre, illisible et intappable, donc jamais renseigné,
   donc « Faire signer » gris sans qu'on comprenne pourquoi. Vu sur la capture
   du balayage, et par lui seul.

   `padding-bottom: env(safe-area-inset-bottom)` comme la barre d'onglets : sur
   téléphone à indicateur d'accueil, le bouton ne doit pas passer dessous. */
.barre-basse{flex:none;display:flex;align-items:center;gap:12px;background:var(--surface);border-top:1px solid var(--bordure);padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.barre-basse-etat{display:flex;flex-direction:column;gap:2px;flex:none}
.barre-basse-compteur{font-family:var(--mono);font-size:13px;font-weight:700;color:#2f6f8f}
.barre-basse-reste{font-size:11px;color:var(--texte)}
.barre-basse .btn-primaire{flex:1;width:auto}

/* ——— Champs d'identifiant (n° de série, SIM, scellé, compteur) ————————————
   🔴 Tous en mono, tous en `inputmode` adapté, tous avec `maxlength` : ce sont
   les seules recopies que le lot 1 laisse au technicien, et une faute de frappe
   sur un n° de scellé n'est pas rattrapable après signature. */
.champ-id input,.champ-id textarea{font-family:var(--mono);font-size:16px;letter-spacing:.02em}
.champ input[inputmode="numeric"]{font-family:var(--mono)}
.champ-requis .champ-libelle{color:var(--alerte)}
.champ-requis input{border-color:var(--alerte);border-width:2px;background:#fff8f8}
/* 🔴 flex:none sur un sélecteur de date : dans un bandeau chargé, un champ
   date compressé descend sous la largeur de son propre texte et devient
   illisible — puis inutilisable au doigt. */
input[type="date"],input[type="time"]{flex:none;min-height:46px;padding:0 12px;border:1px solid var(--bordure2);border-radius:9px;font-family:var(--sans);font-size:16px;background:var(--surface);color:var(--titres-c)}

/* ——— S3 : signature ————————————————————————————————————————————————————— */
.recap-faits{display:flex;flex-direction:column;gap:9px}
.recap-fait{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}
.recap-puce{width:8px;height:8px;border-radius:50%;flex:none;margin-top:6px}
.recap-puce.ok{background:#2f8f5a}
.recap-puce.anomalie{background:#c0392b}
.avertissement{border:1px dashed var(--bordure2);border-radius:8px;padding:11px 14px;font-size:12.5px;color:var(--texte);line-height:1.5;text-wrap:pretty}
.lien-discret{background:none;border:none;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texte);text-decoration:underline;cursor:pointer;min-height:44px;padding:0}
.signature-zone{border:2px dashed var(--bordure2);border-radius:12px;background:#fff;position:relative;overflow:hidden;touch-action:none}
.signature-zone.a-signe{border-style:solid;border-color:var(--sx-encre)}
.signature-toile{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
.signature-consigne{font-size:12.5px;color:var(--texte);line-height:1.5;text-align:center;text-wrap:pretty}
.signature-actions{display:flex;gap:10px;align-items:center}
.signature-actions .btn-secondaire{flex:none;padding:0 18px}
.signature-actions .btn-primaire{flex:1;width:auto}

/* ——— Fiche figée : présentation DOCUMENT ————————————————————————————————
   🔴 Une fiche figée ne doit plus RESSEMBLER à un formulaire. Fond papier,
   champs aplatis, aucun affordance de saisie : ce qui se lit ne doit pas avoir
   l'air de ce qui s'écrit, sinon quelqu'un finira par essayer d'écrire. */
.document{background:#fff;border:1px solid var(--bordure2);border-radius:4px;box-shadow:0 2px 8px rgba(15,27,45,.08);padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.document-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:2px solid var(--sx-encre);padding-bottom:12px}
.document-marque{display:flex;align-items:center;gap:6px}
.document-pastille{width:9px;height:9px;background:var(--sx-rouge);display:inline-block}
.document-marque-nom{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--titres-c)}
.document-titre{font-size:15px;font-weight:700;color:var(--titres-c)}
.document-ref{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--titres-c)}
.document-grille{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;font-size:12.5px;color:var(--titres-c)}
.document-grille > span{min-width:0;overflow-wrap:anywhere}
.document-section{display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.5;color:var(--titres-c)}
.document-etiquette{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.document-signatures{display:flex;gap:12px;border-top:1px solid var(--bordure);padding-top:12px}
.document-signature{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.document-signature img{width:100%;max-width:110px;height:38px;object-fit:contain;object-position:left}
.document-signature-nom{font-size:11.5px;color:var(--texte);overflow-wrap:anywhere}
.visa-attente{height:38px;border:1.5px dashed var(--bordure2);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--muted);text-align:center;padding:0 4px}
/* Le sceau : encadré encre, horodatage, lieu. C'est lui qui dit « ceci est une
   pièce », et il porte la référence provisoire quand il y en a eu une — le
   client a pu signer un document numéroté HP-…, et l'effacer effacerait la
   trace de ce qu'il a eu sous les yeux. */
.sceau{border:1.5px solid var(--sx-encre);border-radius:4px;padding:10px 12px;display:flex;align-items:center;gap:10px;background:var(--surface2)}
.sceau-cadenas{flex:none}
.sceau-textes{display:flex;flex-direction:column;gap:2px;min-width:0}
.sceau-titre{font-size:12px;font-weight:700;color:var(--titres-c)}
.sceau-detail{font-size:11px;color:var(--texte);overflow-wrap:anywhere}
.rappel-envoi{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--attente-fond);border:1px solid var(--attente-bordure);border-radius:8px;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--attente);min-height:48px}

/* ——— S5 : sites et historique ————————————————————————————————————————— */
.recherche{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--sx-encre);border-radius:10px;padding:0 14px}
.recherche input{flex:1;min-height:48px;border:none;background:none;font-family:var(--sans);font-size:16px;color:var(--titres-c);outline:none}
.filtres{display:flex;gap:6px;flex-wrap:wrap}
.filtre{padding:0 12px;min-height:40px;border-radius:999px;border:1px solid var(--bordure2);background:var(--surface);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--texte);cursor:pointer}
.filtre.actif{background:var(--sx-encre);border-color:var(--sx-encre);color:#fff}
.liste{background:var(--surface);border:1px solid var(--bordure);border-radius:10px;overflow:hidden}
.liste-ligne{display:flex;flex-direction:column;gap:3px;padding:13px 14px;border-bottom:1px solid var(--bordure);width:100%;text-align:left;background:none;border-left:none;border-right:none;border-top:none;font-family:var(--sans);cursor:pointer;color:inherit;min-height:56px}
.liste-ligne:last-child{border-bottom:none}
.liste-ligne:hover{background:var(--surface2)}
.liste-ligne[disabled]{opacity:.55;cursor:default}
.liste-ligne-titre{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600;color:var(--titres-c)}
.liste-ligne-detail{font-size:12.5px;color:var(--texte);text-wrap:pretty}
.liste-groupe{padding:9px 12px;background:var(--fond);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.liste-paire{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--bordure);font-size:13px}
.liste-paire:last-child{border-bottom:none}
.liste-paire-nom{font-weight:600;color:var(--titres-c);min-width:0;overflow-wrap:anywhere}
.liste-paire-valeur{font-family:var(--mono);color:var(--texte);white-space:nowrap}
.site-entete{display:flex;flex-direction:column;gap:8px;background:var(--sx-encre);color:#fff;padding:12px 16px}
.site-entete-nom{font-family:var(--titres);font-size:16px;font-weight:700}
.site-entete-lignes{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#9fabba}
.site-entete-lignes a{color:#fff;font-weight:600}
.site-entete-lignes .mono{color:#fff}
.chrono{display:flex;flex-direction:column;border-left:2px solid var(--bordure);margin-left:6px;padding-left:14px}
.chrono-item{position:relative;padding:2px 0 14px}
.chrono-item:last-child{padding-bottom:2px}
.chrono-puce{position:absolute;left:-20px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--muted);border:2px solid var(--fond)}
.chrono-item:first-child .chrono-puce{background:var(--sx-encre)}
.chrono-carte{background:var(--surface);border:1px solid var(--bordure);border-radius:8px;padding:11px 12px;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;font-family:var(--sans);cursor:pointer;color:inherit}
.chrono-carte:hover{border-color:var(--bordure2)}
.chrono-carte-haut{display:flex;justify-content:space-between;align-items:center;gap:8px}
.chrono-carte-titre{font-size:13.5px;font-weight:700;color:var(--titres-c)}
.chrono-carte-detail{font-size:12.5px;color:var(--texte);text-wrap:pretty}
.encart-suite{background:#e6eef2;border:1px solid var(--attente-bordure);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--attente);text-wrap:pretty}

/* ——— S6 : envois ————————————————————————————————————————————————————————— */
.section-titre{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)}
.section-titre.attente{color:var(--attente)}
.carte-envoi{background:var(--surface);border:1px solid var(--attente-bordure);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.carte-envoi.en-echec{border-color:#f0c8cb}
.carte-envoi-haut{display:flex;align-items:center;justify-content:space-between;gap:10px}
.carte-envoi-ref{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--titres-c)}
.carte-envoi-site{font-size:14px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.carte-envoi-detail{font-size:12px;color:var(--texte)}
.btn-renvoyer{align-self:flex-start;border:1.5px solid var(--sx-encre);border-radius:6px;background:none;padding:0 14px;min-height:44px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--titres-c);cursor:pointer}
.btn-renvoyer:hover{background:var(--surface2)}
.btn-renvoyer:disabled{border-color:var(--bordure2);color:var(--muted2);cursor:default}
.note-pedagogique{border:1px dashed var(--bordure2);border-radius:8px;padding:12px 14px;font-size:12.5px;color:var(--texte);line-height:1.5;text-wrap:pretty}

/* ——— Formulaire en modale (hors planning, ajout d'équipement, motif) —————
   🔴 UNE SEULE RÈGLE, et pas deux cantonnées par coquille (E8) : les dialogues
   sont montés sur `document.body` (ui.js), donc HORS de `.coquille-bureau`. Un
   sélecteur cantonné ne les aurait jamais atteints, et les trois gestes à motif
   du bureau — annulation (EA18), classement (EA19), clôture de suite — auraient
   perdu leur largeur sans que rien ne le signale.
   Largeur d'E6 (460 px, confortable au bureau) et bornes d'E5 : sur un téléphone
   c'est le `92vw` qui décide, et `max-height`/`overflow` empêchent un dialogue
   long de déborder — sans eux, le bouton Valider sort de l'écran. */
.dialogue-large{width:min(460px,92vw);max-height:88vh;overflow-y:auto}
.dialogue .champ select,.dialogue .champ input{min-height:48px;font-size:16px}
.champ select{min-height:48px;padding:0 12px;border:1px solid var(--bordure2);border-radius:9px;font-family:var(--sans);font-size:16px;background:var(--surface);color:var(--titres-c)}
.dialogue-boutons .btn-primaire{width:auto;flex:1;min-height:48px}
/* =====================================================================
   ÉCRANS DU BUREAU — E6 (S7 planning, S8 fiches & suites, S9 dossier site)

   Système visuel du DESIGN_BRIEF §3 : industriel-utilitaire, dense sans être
   serré. Les identifiants (réf. de fiche, n° de série, SIM, scellé, plaque) sont
   en IBM Plex Mono, TOUJOURS : un n° de série se lit et se compare caractère par
   caractère, et deux polices proportionnelles rendent « 88-04220-K » et
   « 88-04220-X » presque identiques. C'est exactement l'erreur que l'avenant de
   la fixture corrige.

   Le rouge Securex reste l'action primaire et l'alerte, jamais un ornement.
   ===================================================================== */

.theme-clair{
  --statut-planifiee:#44566b; --statut-planifiee-fond:#eceef2;
  --statut-encours:#2f6f8f;   --statut-encours-fond:#e6eef2;
  --statut-signee:#ffffff;    --statut-signee-fond:#0f1b2d;
  --statut-annulee:#6b7a8d;   --statut-annulee-fond:#eceef2;
  --statut-recue:#2f8f5a;     --statut-recue-fond:#e7f3ec;
  --statut-attente:#8a5a14;   --statut-attente-fond:#faf0dd;
}

/* 🔴 E8 — POURQUOI CERTAINES RÈGLES DE CE BLOC SONT PRÉFIXÉES `.coquille-bureau`.
   E5 et E6 ont chacune écrit son bloc en fin de fichier, et HUIT classes portent
   le même nom des deux côtés avec des règles différentes : .chip,
   .chip-planifiee, .chrono, .chrono-carte, .filtre, .filtres, .groupe-systeme
   (et .dialogue-large, traité à part plus haut). Le bloc du bureau venant après,
   il gagnait partout, y compris sur le téléphone — en silence, sans qu'un seul
   test puisse le voir.
   Le plus coûteux était `.filtre` : bouton-pilule de 40 px de haut chez le
   technicien (une cible tactile, sur le terrain, parfois avec des gants) contre
   un simple label chez le bureau. Le filtre de zone de l'écran Sites serait
   devenu intappable.
   Les règles du bureau sont donc cantonnées à sa racine — celle que
   `coquilleBureau()` pose sur tous ses écrans. Chacun garde son style, et la
   spécificité dit maintenant à qui la règle s'adresse.

   ——— Chips de statut. Statut et état d'envoi ne fusionnent JAMAIS. */
.coquille-bureau .chip{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.coquille-bureau .chip-planifiee{background:var(--statut-planifiee-fond);color:var(--statut-planifiee)}
.chip-en_cours{background:var(--statut-encours-fond);color:var(--statut-encours)}
.chip-signee,.chip-non_signee{background:var(--statut-signee-fond);color:var(--statut-signee)}
.chip-annulee{background:var(--statut-annulee-fond);color:var(--statut-annulee);text-decoration:line-through}
.chip-envoi-recue{background:var(--statut-recue-fond);color:var(--statut-recue)}
.chip-envoi-envoyee{background:var(--statut-encours-fond);color:var(--statut-encours)}
.chip-envoi-en_attente_envoi{background:var(--statut-attente-fond);color:var(--statut-attente)}

/* ——— Boutons complémentaires */
.btn-compact{min-height:38px;width:auto;padding:0 14px;font-size:13px;border-radius:8px}
.btn-encre{min-height:38px;padding:0 14px;background:var(--sx-encre);color:#fff;border:none;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:13px;cursor:pointer}
.btn-encre:hover:not(:disabled){background:#1c2a3d}
.btn-encre:disabled{background:var(--bordure2);cursor:default}
.btn-lien{background:none;border:none;color:var(--sx-bleu);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;padding:6px 4px;min-height:32px;text-align:left}
.btn-lien:hover{color:var(--titres-c)}
.btn-lien.danger{color:var(--sx-rouge)}
.btn-lien.danger:hover{color:var(--sx-rouge-hover)}
.btn-lien.centre{display:block;width:100%;text-align:center}
.btn-fleche{background:var(--surface);border:1px solid var(--bordure2);border-radius:7px;min-width:30px;min-height:30px;font-size:16px;line-height:1;cursor:pointer;color:var(--titres-c)}

/* ——— Champs complémentaires */
.champ-texte{min-height:40px;padding:0 11px;border:1px solid var(--bordure2);border-radius:8px;font-family:var(--sans);font-size:13.5px;color:var(--titres-c);background:var(--surface);width:100%}
.champ-select{min-height:40px;padding:0 8px;border:1px solid var(--bordure2);border-radius:8px;font-family:var(--sans);font-size:13.5px;color:var(--titres-c);background:var(--surface);width:100%}
.champ-zone{padding:9px 11px;border:1px solid var(--bordure2);border-radius:8px;font-family:var(--sans);font-size:13.5px;color:var(--titres-c);background:var(--surface);width:100%;resize:vertical}
.champ-duo{display:flex;gap:10px}
.champ-court{width:110px;flex:none}
.dialogue-aide{margin:0;font-size:12.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ——— Segments (jour/semaine, zone, site/véhicule) */
.segments{display:inline-flex;border:1px solid var(--bordure2);border-radius:7px;overflow:hidden}
.segment{background:var(--surface);border:none;padding:7px 13px;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;min-height:34px}
.segment.actif{background:var(--sx-encre);color:#fff}
.segment + .segment{border-left:1px solid var(--bordure2)}

/* ——— Chips de choix (les types d'intervention) */
.chips-choix{display:flex;gap:5px;flex-wrap:wrap}
.chip-choix{padding:7px 10px;border-radius:999px;border:1px solid var(--bordure2);background:var(--surface);font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;min-height:32px}
.chip-choix.actif{background:var(--sx-encre);border-color:var(--sx-encre);color:#fff}

/* ——— Bandeaux d'information */
.bandeau-info{border-radius:8px;padding:9px 14px;font-size:12.5px;line-height:1.5;text-wrap:pretty}
.bandeau-info.attente{background:var(--attente-fond);border:1px solid var(--attente-bordure);color:var(--attente)}
.bandeau-info.alerte{background:var(--alerte-fond);border:1px solid rgba(209,27,42,.35);color:var(--alerte)}
.note-regle{margin:0;font-size:11.5px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.encart{background:var(--surface2);border:1px solid var(--bordure);border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.5}
.encart p{margin:4px 0 0}
.encart-ok{background:var(--ok-fond);border-color:var(--ok-bordure);color:var(--ok)}
.encart-avenant{border-left:3px solid var(--sx-rouge);background:var(--alerte-fond)}
/* EA21 — la position relevée à la signature. Teinte « attente » quand elle
   appelle une décision (site sans géolocalisation), encart neutre quand elle ne
   fait qu'informer d'un écart. */
.encart-geo{border-left:3px solid var(--attente-bordure);background:var(--attente-fond);color:var(--attente)}
.encart-position{margin:6px 0 0;font-size:14px;font-weight:600;letter-spacing:.3px}
.encart-geo .btn-secondaire{margin-top:9px}
.dialogue-details{margin:0;font-size:15px;font-weight:600;letter-spacing:.3px;color:var(--titres-c)}

/* =====================================================================
   S7 — Planning
   ===================================================================== */
.planning{display:flex;gap:0;height:100%;min-height:0;margin:-22px -26px;align-items:stretch}
/* Panneau de création PERMANENT : la tâche la plus répétée de la journée ne
   passe pas par une modale. Il défile seul — la grille est déjà longue. */
.panneau-creation{width:330px;flex:none;background:var(--surface);border-right:1px solid var(--bordure);padding:18px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.planning-grille{flex:1;min-width:0;padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.panneau-titre{font-family:var(--titres);font-weight:700;font-size:16px;color:var(--titres-c)}
/* 🔴 Le bouton de création ne défile PAS avec le formulaire. Sans ça il sort du
   cadre dès que la liste des techniciens s'allonge, et il faut défiler pour
   valider — sur le geste le plus répété de la journée. Deux zones, donc : les
   champs défilent, le pied reste. */
.form-creation{display:flex;flex-direction:column;min-height:0;flex:1}
.form-champs{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:13px;padding-right:2px}
.form-pied{flex:none;padding-top:13px;margin-top:13px;border-top:1px solid var(--bordure)}
.bloc-recherche{position:relative;display:flex;flex-direction:column;gap:4px}
.resultats-recherche{display:flex;flex-direction:column;border:1px solid var(--bordure2);border-radius:8px;overflow:hidden;background:var(--surface);max-height:230px;overflow-y:auto}
.resultat{text-align:left;background:none;border:none;border-bottom:1px solid var(--bordure);padding:9px 11px;font-family:var(--sans);font-size:13px;color:var(--titres-c);cursor:pointer;min-height:40px}
.resultat:last-child{border-bottom:none}
.resultat:hover{background:var(--surface2)}
.resultat-vide{padding:10px 11px;font-size:12.5px;color:var(--muted)}
/* E141 — la sortie du vide. Pleine largeur : c'est le seul geste possible
   quand la recherche n'a rien rendu, il ne se cherche pas. */
.btn-creer-vehicule{width:100%;margin:0 0 4px;min-height:40px;font-size:12.5px}
.cible-choisie{display:flex;align-items:center;gap:8px;border:1.5px solid var(--sx-encre);border-radius:8px;padding:9px 11px;background:var(--surface)}
.cible-nom{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--titres-c);overflow:hidden;text-overflow:ellipsis}
.cible-type{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.cible-retirer{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;min-width:28px;min-height:28px}
.liste-techniciens{display:flex;flex-direction:column;gap:6px}
.ligne-technicien{display:flex;align-items:center;gap:10px;border:1px solid var(--bordure2);border-radius:8px;padding:8px 11px;background:var(--surface);cursor:pointer;text-align:left;font-family:var(--sans);min-height:44px}
.ligne-technicien.actif{border:1.5px solid var(--sx-encre);background:var(--surface2)}
.ligne-technicien .case{width:17px;height:17px;flex:none;border-radius:4px;border:1.5px solid var(--bordure2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff}
.ligne-technicien .case.cochee{background:var(--sx-encre);border-color:var(--sx-encre)}
.tech-nom{font-size:13.5px;font-weight:600;color:var(--titres-c)}
.tech-charge{margin-left:auto;font-size:11px;color:var(--muted);text-align:right}

.planning-barre{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.planning-jour{font-size:15px;font-weight:700;color:var(--titres-c);text-transform:capitalize}
.rangee-rattacher{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--alerte-fond);border:1px solid rgba(209,27,42,.3);border-radius:8px;padding:9px 14px;font-size:12.5px}
.rangee-etiquette{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--alerte)}
.rangee-texte{flex:1;min-width:200px}
.rangee-ref{font-size:11.5px;color:var(--muted)}
/* ED66 — le manque, sous la ligne et non à côté d'elle : le responsable lit la
   rangée de gauche à droite jusqu'au bouton, et une mention posée en fin de
   ligne se lirait après le geste. Bloc, donc, et dans l'encre de l'alerte. */
.rangee-alerte{display:block;margin-top:3px;font-weight:700;color:var(--alerte)}

.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:start}
.colonne-technicien{display:flex;flex-direction:column;gap:9px;min-width:0}
.colonne-entete{display:flex;align-items:center;gap:8px;padding-bottom:7px;border-bottom:2px solid var(--sx-encre)}
.avatar{width:26px;height:26px;flex:none;border-radius:50%;background:var(--sx-encre);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.colonne-nom{font-size:13.5px;font-weight:700;color:var(--titres-c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.colonne-synchro{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--ok);white-space:nowrap}
/* Une synchro qui date de plusieurs jours n'est pas un détail : la colonne peut
   mentir sur ce que le technicien a réellement fait. */
.colonne-synchro.froid{color:var(--attente)}

.carte-intervention{background:var(--surface);border:1px solid var(--bordure);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:5px}
.carte-intervention.annulee{background:var(--surface2);border-style:dashed;opacity:.75}
.carte-intervention.annulee .carte-cible,.carte-intervention.annulee .carte-heure{text-decoration:line-through}
.carte-tete{display:flex;align-items:center;gap:8px;justify-content:space-between}
.carte-heure{font-size:12.5px;font-weight:700;color:var(--titres-c)}
.carte-cible{font-size:12.5px;color:var(--texte)}
.carte-equipe{font-size:11.5px;color:var(--muted)}
.carte-ref{font-size:10.5px;color:var(--muted2)}
.carte-alerte{font-size:11px;font-weight:600;color:var(--attente)}
.carte-annulation{font-size:11.5px;color:var(--muted);line-height:1.45;text-wrap:pretty}

/* =====================================================================
   S8 — Fiches rendues & suites à donner
   ===================================================================== */
.inbox{display:flex;gap:0;height:100%;min-height:0;margin:-22px -26px;align-items:stretch}
.inbox-liste{flex:1;min-width:0;padding:18px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--bordure)}
/* Le panneau prend une part de la largeur plutôt qu'une valeur fixe : la
   maquette M7 travaille sur 1360 px, un portable en fait 1280 — et à largeur
   fixe c'est la LISTE qui paie la différence, donc la colonne « suite à
   donner », qui est justement ce que le responsable vient voir. */
.inbox-panneau{width:min(430px,36%);min-width:340px;flex:none;padding:18px;overflow-y:auto;background:var(--surface2);display:flex;flex-direction:column;gap:12px}
.onglets-inbox{display:flex;gap:2px;border-bottom:1px solid var(--bordure);flex-wrap:wrap}
.onglet-inbox{background:none;border:none;border-bottom:3px solid transparent;padding:9px 13px;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;min-height:40px}
.onglet-inbox.actif{border-bottom-color:var(--sx-rouge);color:var(--titres-c);font-weight:700}
.coquille-bureau .filtres{display:flex;gap:10px;flex-wrap:wrap}
.coquille-bureau .filtre{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.coquille-bureau .filtre .champ-select{width:auto;min-width:150px}

/* 🔴 Le tableau DÉFILE plutôt que de s'écraser. Vécu le 28/07/2026 (E6) : avec
   des colonnes en largeurs fixes, la somme dépassait la largeur disponible, la
   colonne `1fr` tombait à zéro et le NOM DU SITE disparaissait — sans un pixel
   pour le signaler, `overflow:hidden` faisant son office. Une colonne vide se
   lit « cette fiche n'a pas de site », ce qui est faux et invérifiable à l'œil.
   Un `min-width` sur la grille + un conteneur défilant rend le manque de place
   visible au lieu de le rendre silencieux. */
.tableau{background:var(--surface);border:1px solid var(--bordure);border-radius:10px;overflow-x:auto}
.tableau-entete,.tableau-ligne{display:grid;grid-template-columns:146px 56px minmax(130px,1fr) 104px 112px 84px;gap:9px;align-items:center;padding:10px 12px;text-align:left;min-width:700px}
.tableau-entete{background:var(--fond);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tableau-ligne{border-top:1px solid var(--bordure);background:none;border-left:none;border-right:none;border-bottom:none;font-family:var(--sans);font-size:12.5px;color:var(--texte);cursor:pointer;width:100%;min-height:46px}
.tableau-ligne:hover{background:var(--surface2)}
.tableau-ligne.active{background:var(--alerte-fond);box-shadow:inset 3px 0 0 var(--sx-rouge)}
.cellule-site{font-weight:600;color:var(--titres-c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.texte-ok{color:var(--ok);font-weight:600}
.texte-attente{color:var(--attente);font-weight:600}
.texte-alerte{color:var(--sx-rouge);font-weight:700}
.texte-muet{color:var(--muted2)}

.carte-suite{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:12px 15px;flex-wrap:wrap}
.pastille{width:8px;height:8px;flex:none;border-radius:50%;background:var(--sx-rouge)}
/* Une suite de plus d'une semaine est un engagement client oublié : l'âge est ce
   que le responsable regarde en premier. */
.pastille.chaude{background:var(--attente);box-shadow:0 0 0 3px var(--attente-fond)}
.suite-corps{flex:1;min-width:220px;display:flex;flex-direction:column;gap:3px}
.suite-texte{font-size:13.5px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.suite-meta{font-size:11.5px;color:var(--muted)}

.panneau-tete{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panneau-etiquette{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.panneau-actions{display:flex;gap:8px;flex-wrap:wrap}
.panneau-repos{display:flex;flex-direction:column;gap:10px}

/* ——— Le rendu DOCUMENT d'une fiche figée.
   « Fond papier, champs aplatis, sceau » (DESIGN_BRIEF §1) : une fiche figée ne
   doit plus ressembler à un formulaire, sinon on cherche encore où cliquer. */
.doc{background:#fff;border:1px solid var(--bordure2);border-radius:4px;box-shadow:0 2px 8px rgba(15,27,45,.08);padding:16px;display:flex;flex-direction:column;gap:11px;font-size:12.5px;color:var(--titres-c)}
.doc-entete{display:grid;grid-template-columns:1fr auto;gap:3px 10px;border-bottom:2px solid var(--sx-encre);padding-bottom:9px}
.doc-marque{display:flex;align-items:center;gap:6px}
.doc-carre{width:9px;height:9px;background:var(--sx-rouge);display:inline-block}
.doc-marque-nom{font-size:11px;font-weight:700;letter-spacing:.12em}
.doc-titre{font-size:14px;font-weight:700}
.doc-ref{grid-column:2;grid-row:1/3;align-self:center;font-size:11.5px;font-weight:600}
.doc-ref-provisoire{font-size:10.5px;color:var(--muted);grid-column:2}
.doc-corps{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.doc-ligne{display:flex;gap:6px;min-width:0}
.doc-libelle{color:var(--muted2);font-size:11px;text-transform:uppercase;letter-spacing:.04em;flex:none}
.doc-valeur{font-weight:600;min-width:0;overflow-wrap:anywhere}
.doc-equipements{display:flex;flex-direction:column;border-top:1px solid var(--bordure);padding-top:9px}
.doc-equipement{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:4px 0;border-bottom:1px solid #f0f3f6}
.doc-eq-nature{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.doc-eq-nature.pose{color:var(--ok)}
.doc-eq-nature.depose{color:var(--muted2)}
.doc-eq-designation{font-weight:600}
.doc-eq-serie{font-size:11.5px;color:var(--texte)}
.doc-eq-constat{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--ok)}
.doc-eq-constat.anomalie{color:var(--alerte)}
.doc-eq-obs{flex-basis:100%;font-size:11.5px;color:var(--muted);text-wrap:pretty}
.doc-bloc{border-top:1px solid var(--bordure);padding-top:9px}
.doc-bloc p{margin:3px 0 0;line-height:1.5;text-wrap:pretty}
.doc-suite{border-left:3px solid var(--attente);padding-left:10px;border-top:none;background:var(--attente-fond);border-radius:0 6px 6px 0;padding:8px 10px}
.doc-correction{font-size:11.5px;color:var(--muted)}
.doc-signatures{display:flex;gap:14px;border-top:1px solid var(--bordure);padding-top:10px}
.doc-signature{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.doc-signature-img{max-width:100%;height:38px;object-fit:contain;object-position:left}
.doc-sans-signature{color:var(--muted2)}
.doc-signataire{font-size:11px;color:var(--muted)}
.doc-non-signee{background:var(--attente-fond);border:1px solid var(--attente-bordure);border-radius:6px;padding:8px 10px;font-size:12px;color:var(--attente);text-wrap:pretty}
/* Le sceau : encadré encre, horodaté, avec le début du hachage. Il n'est pas
   décoratif — c'est ce qu'on montre quand un client conteste. */
.doc-sceau{display:flex;gap:9px;align-items:flex-start;border:1.5px solid var(--sx-encre);border-radius:5px;padding:9px 11px;background:var(--surface2)}
.doc-sceau.rompu{border-color:var(--alerte);background:var(--alerte-fond)}
.doc-sceau-cadenas{font-size:14px;line-height:1.2}
.doc-sceau-texte{display:flex;flex-direction:column;gap:2px;font-size:11px;font-weight:600;min-width:0}
.doc-sceau-hachage{color:var(--muted);font-weight:400}
.doc-sceau-verdict{color:var(--ok);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.doc-sceau-verdict.rompu{color:var(--alerte)}

/* =====================================================================
   S9 — Dossier site
   ===================================================================== */
.sites-recherche{display:flex;flex-direction:column;gap:14px;max-width:900px}
/* ED52 — la barre porte désormais QUATRE choses (champ, case, triage, création)
   et non plus trois : elle passe au retour à la ligne, sinon la porte de
   création sortirait de l'écran sur un portable du bureau — c'est-à-dire
   resterait invisible, le défaut même qu'ED52 répare. `align-items:center`
   garde la case des archivés alignée sur le champ, plus haut que les boutons. */
.barre-recherche{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.barre-recherche .champ-recherche-large{flex:1 1 220px;min-width:0}
.champ-recherche-large{min-height:46px;font-size:15px}
.sites-resultats{display:flex;flex-direction:column;gap:6px}
.ligne-site{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,2fr) 52px minmax(0,1.4fr);gap:12px;align-items:center;background:var(--surface);border:1px solid var(--bordure);border-radius:9px;padding:11px 14px;color:var(--texte);min-height:48px}
.ligne-site:hover{background:var(--surface2);color:var(--texte)}
.site-nom{font-size:13.5px;font-weight:600;color:var(--titres-c);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-lieu,.site-systemes{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-zone{font-size:11px;font-weight:600;color:var(--sx-bleu)}

.dossier{display:flex;flex-direction:column;gap:0;margin:-22px -26px;height:100%;min-height:0}
.dossier-entete{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 22px;background:var(--surface);border-bottom:1px solid var(--bordure);flex:none}
.dossier-titres{display:flex;flex-direction:column;gap:2px;min-width:0}
.dossier-nom{font-family:var(--titres);font-weight:800;font-size:20px;color:var(--titres-c);margin:0}
.dossier-sous{font-size:12.5px;color:var(--muted)}
.dossier-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* Trois colonnes, comme SPEC-S9. Elles s'empilent sous 1100 px : l'écran est
   prévu pour un poste de bureau, mais un portable 13" ne doit pas tronquer la
   chronologie en silence. */
.dossier-colonnes{display:grid;grid-template-columns:300px 380px minmax(0,1fr);gap:0;flex:1;min-height:0;overflow:hidden}
@media (max-width:1100px){.dossier-colonnes{grid-template-columns:1fr;overflow:auto}}
.dossier-colonne{padding:16px 18px;border-right:1px solid var(--bordure);display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-width:0}
.dossier-colonne:last-child{border-right:none}
.colonne-titre{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ligne-identite{display:flex;flex-direction:column;gap:2px}
.ligne-libelle{font-size:11px;color:var(--muted2)}
.ligne-valeur{font-size:13px;font-weight:600;color:var(--titres-c);overflow-wrap:anywhere}
.ligne-vehicule{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px}
/* E141 — le repère « à compléter » s'intercale entre la plaque et la
   balise, et c'est la balise qui recule : le manque doit se lire au bout
   de la plaque, pas au bout de la ligne. */
.ligne-vehicule .chip{flex:none}
.ligne-vehicule .muet{margin-left:auto;text-align:right}
.muet{color:var(--muted)}
.carte-reservee{border-style:dashed;background:none}

.coquille-bureau .groupe-systeme{background:var(--surface);border:1px solid var(--bordure);border-radius:10px;overflow:hidden}
.groupe-titre{padding:7px 12px;background:var(--fond);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ligne-equipement{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:8px 12px;border-bottom:1px solid var(--bordure);font-size:12.5px}
.ligne-equipement:last-child{border-bottom:none}
.ligne-equipement.anomalie{background:var(--alerte-fond)}
.eq-designation{font-weight:600;color:var(--titres-c)}
.eq-designation.barre{text-decoration:line-through;color:var(--muted)}
.eq-serie{font-size:11.5px;color:var(--texte)}
.eq-etat{grid-column:2;font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--alerte)}
.eq-meta{grid-column:1/3;font-size:11px;color:var(--muted2)}
/* ——— B1 · La provenance, DANS LA LIGNE ———
   Pas au survol, pas dans un panneau de détail : ce que vaut une ligne se lit
   en même temps qu'elle, ou ne se lit pas. 11,5 px, sous la désignation. */
/* ⚠️ `text-transform` ET `letter-spacing` SONT REMIS À PLAT, ET CE N'EST PAS
   cosmétique : `.groupe-systeme` les impose en capitales espacées grasses à
   TOUTE la colonne par héritage. Une étiquette de trois mots le supporte ; une
   PHRASE ne le supporte pas — « SAISI AU BUREAU, CONFIRMÉ SUR PLACE · FICHE
   ELE-TNA-2026-0114 » passe sur deux lignes et se lit comme un titre de
   section, alors que c'est une note sous la désignation. M25 la montre en
   casse normale, et la couleur discrète qu'exige la spec dit la même chose. */
.eq-provenance{grid-column:1/3;font-size:11.5px;line-height:1.4;color:var(--eq-provenance);display:flex;gap:6px;align-items:baseline;text-transform:none;letter-spacing:normal;font-weight:400}
/* Le repère de preuve : ▪ plein adossé à une pièce scellée, ▫ creux sans
   pièce. Largeur FIXE — sans elle, les deux glyphes n'ont pas la même chasse
   et les phrases d'une colonne ne s'alignent plus. */
.eq-repere{flex:none;width:10px;text-align:center;font-size:10px}
.eq-provenance.adossee .eq-repere{color:var(--sx-bleu)}
/* Le manque de numéro de série EST LE SUJET (296 lignes de production n'en ont
   aucun) : il s'écrit, il ne se laisse pas deviner d'une case vide. */
.eq-serie-absente{font-size:11px;font-style:italic;color:var(--muted2);text-transform:none;letter-spacing:normal;font-weight:400}
.eq-legende{font-size:11.5px;color:var(--muted2);text-transform:none;letter-spacing:normal;font-weight:400}
.eq-legende summary{cursor:pointer;color:var(--muted)}
.eq-legende-corps{display:flex;flex-direction:column;gap:3px;padding:6px 0 0 2px}
.eq-legende-corps>div{display:flex;gap:6px;align-items:baseline}
.colonne-titre-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.colonne-sous{font-size:11.5px;color:var(--muted2);margin-top:-6px}
.colonne-note{margin:0;font-size:11px;line-height:1.45;color:var(--muted2);text-wrap:pretty}

/* ——— B1 · Le panneau de la porte du bureau ———
   Latéral et non centré : le dossier du site reste lisible pendant la saisie —
   c'est lui qu'on recopie. `margin-left:auto` dans le voile (flex) l'ancre à
   droite sans toucher au voile lui-même, partagé par toutes les modales. */
.panneau-lateral{margin-left:auto;width:min(420px,100%);max-height:100%;background:var(--surface);border-left:1px solid var(--bordure);padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.panneau-sous{margin:0;font-size:12.5px;font-weight:600;color:var(--titres-c)}
.panneau-lateral .bandeau-encre{padding:10px 12px;border-radius:9px;font-size:12px;line-height:1.5;text-wrap:pretty}
.chips-choix{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
/* Les déposés ne disparaissent jamais : c'est un état, pas une suppression. */
.bloc-deposes{background:var(--surface);border:1px dashed var(--bordure2);border-radius:10px;overflow:hidden}

.dossier-chrono{gap:10px}
.chrono-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.coquille-bureau .chrono{display:flex;flex-direction:column;gap:12px;border-left:2px solid var(--bordure);margin-left:5px;padding-left:16px}
.chrono-entree{position:relative}
.chrono-point{position:absolute;left:-23px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--sx-encre);border:2px solid var(--fond)}
.chrono-point.annulee{background:var(--muted2)}
.coquille-bureau .chrono-carte{background:var(--surface);border:1px solid var(--bordure);border-radius:9px;padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.coquille-bureau .chrono-carte.annulee{border-style:dashed;background:var(--surface2);opacity:.8}
.chrono-tete-carte{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chrono-date{font-size:13px;font-weight:700;color:var(--titres-c)}
.chrono-ref{font-size:11px;color:var(--muted)}
.chrono-detail{font-size:12px;color:var(--muted)}
.chrono-compteurs{color:var(--texte)}
.chrono-annulation{font-size:11.5px;color:var(--muted);text-wrap:pretty}
/* L'avenant s'intercale SOUS sa fiche d'origine : ailleurs, personne ne saurait
   à quoi il se rapporte. */
.chrono-avenant{margin-top:5px;border-left:3px solid var(--sx-rouge);background:var(--alerte-fond);border-radius:0 7px 7px 0;padding:7px 11px;display:flex;flex-direction:column;gap:2px;font-size:11.5px}
.avenant-tete{font-weight:700;color:var(--alerte)}
.avenant-contenu{color:var(--texte);line-height:1.45;text-wrap:pretty}

/* ===== Squelettes de chargement ===== */
/* Le routeur vide la racine avant d'attendre les données : sans repère, l'écran
   reste blanc pendant le fetch. */
@keyframes skShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk{background:linear-gradient(90deg,var(--surface2) 25%,var(--bordure) 50%,var(--surface2) 75%);background-size:200% 100%;animation:skShimmer 1.5s ease-in-out infinite;border-radius:10px}
.sk-wrap{gap:14px}
.sk-titre{height:26px;width:200px}
.sk-carte{height:92px;border-radius:13px}
.sk-ligne{height:52px}
@media (prefers-reduced-motion:reduce){.sk{animation:none;opacity:.65}}

/* =====================================================================
   S14 — LA FILE DES REMISES, ET LES ENCARTS DE S8/S9 (E89, lot 3)
   =====================================================================

   🔴 LES PASTILLES D'ÉTAT VIVENT ICI ET NULLE PART AILLEURS. Trois surfaces
   les affichent — la file, la fiche du bureau, le dossier de site — et trois
   jeux de couleurs écrits dans trois fichiers finiraient par dire trois choses
   du même mot. C'est ce que le lot 1 a déjà payé avec les chips de statut.

   🔴 LE 6ᵉ ÉTAT — « Bloquée » — EST AMBRE, ET C'EST UN ARBITRAGE. Aucune
   maquette ne le montre : Q35 a été tranchée le 01/09, après la conception.
   Le rouge dit « quelque chose a échoué » ; ici quelqu'un a DÉCIDÉ, et sa
   décision attend une suite. L'ambre est déjà, dans ce produit, le registre de
   l'attente qui demande un geste humain sans qu'il y ait de panne — le rappel
   de mot de passe (E76) et le bandeau de santé de l'ordonnanceur.

   ⚠️ Les couleurs passent par les variables du thème dès qu'il en existe une :
   cet écran doit rester lisible en thème sombre, où le bureau travaille le
   soir. */

.chip-rem-sans-adresse{background:none;border:1px solid var(--bordure2);color:var(--texte)}
.chip-rem-fenetre{background:var(--statut-encours-fond);color:var(--statut-encours)}
.chip-rem-file{background:var(--sx-encre);color:#fff}
.chip-rem-partie{background:var(--statut-recue-fond);color:var(--statut-recue)}
.chip-rem-reprendre{background:var(--alerte-fond);color:var(--alerte)}
.chip-rem-arretee{background:var(--sx-rouge);color:#fff}
.chip-rem-bloquee{background:var(--attente-fond);color:var(--attente)}
.chip-rem-sans-objet{background:var(--statut-annulee-fond);color:var(--statut-annulee)}
.chip-rem-propose{background:#e6eef2;color:#2f6f8f}

/* ——— En-tête : la santé de l'ordonnanceur est à droite, toujours visible ——— */
.rem-entete{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.rem-titres{display:flex;flex-direction:column;gap:2px}
.rem-soustitre{font-size:12.5px;color:var(--muted);margin:0}
.rem-sante-bloc{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.rem-sante{font-size:11.5px;color:var(--muted)}
/* 🔴 « Silencieux » et « jamais tourné » portent la MÊME force : ce sont deux
   façons d'être arrêté, et la seconde est la pire. */
.rem-sante-alerte{color:var(--attente);font-weight:700}

.bandeau-alerte{padding:10px 14px;border-radius:9px;font-size:12.5px;line-height:1.45;text-wrap:pretty}
.bandeau-ambre{background:var(--attente-fond);border:1px solid var(--attente-bordure);color:var(--attente)}
.bandeau-encre{background:var(--sx-encre);color:#fff}

/* ——— Les sections. Empilées, ouvertes, jamais des onglets ——— */
.rem-section{gap:8px}
.rem-section-tete{display:flex;align-items:center;gap:9px}
.rem-section-titre{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--titres-c)}
.rem-section-compte{font-size:13px;font-weight:700;color:var(--titres-c)}
.rem-section-phrase{margin:0;font-size:12.5px;color:var(--muted);text-wrap:pretty}
/* Le filet de gauche est le seul rouge de l'écran, et il est mérité : dans
   cette section-là, quelque chose s'est cassé. */
.rem-section-alerte{border-left:3px solid var(--sx-rouge)}
.rem-section-alerte .rem-section-titre{color:var(--alerte)}
.rem-section-neutre{border-left:3px solid var(--bordure2)}
.rem-section-quiet{border-left:3px solid var(--bordure);opacity:.92}

/* ——— Les lignes. On agit DANS la ligne : le champ y est, le bouton aussi ——— */
.rem-lignes{display:flex;flex-direction:column}
.rem-ligne{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:11px 2px;border-top:1px solid var(--bordure)}
.rem-ligne-quiet{opacity:.9}
.rem-cell{display:flex;flex-direction:column;gap:2px;min-width:0}
.rem-cell-fiche{width:170px;flex:none}
.rem-cell-site{width:210px;flex:none}
.rem-cell-attente{width:150px;flex:none}
.rem-cell-destinataire{width:210px;flex:none}
.rem-cell-motif{width:210px;flex:none}
.rem-cell-tentatives{width:150px;flex:none}
.rem-cell-etat{width:120px;flex:none}
.rem-cell-large{flex:1 1 320px}
.rem-cell-adresse{gap:6px}
.rem-jours{font-size:13px;font-weight:700;color:var(--titres-c)}
.rem-motif{font-size:12.5px;font-weight:600;color:var(--alerte)}
.rem-motif-libre{margin:0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
.rem-arret{font-size:11px;font-weight:700;color:var(--alerte)}
.rem-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rem-propose{display:flex;align-items:center;gap:7px;flex-wrap:wrap}

/* 🔴 LA LIGNE BRUTE DU SERVEUR N'EST JAMAIS CACHÉE, ET JAMAIS AU PREMIER PLAN.
   Elle est sous le libellé, plus petite, en gris — sauf quand le motif est
   « Échec d'envoi », le seul cas où elle est la seule information réelle. */
.rem-brute{margin:0;font-size:10.5px;color:var(--muted);word-break:break-word}
.rem-brute[data-rem-brute="principale"]{color:var(--texte)}
.rem-avertir{margin:0;font-size:11.5px;color:var(--attente);font-weight:600}
/* L'échec d'un geste reste SOUS LE CHAMP, dans la ligne : jamais une modale,
   qui fermerait la ligne et perdrait la saisie. */
.rem-erreur-ligne{margin:0;font-size:12px;color:var(--alerte);text-wrap:pretty}

.rem-vide{align-items:center;text-align:center;gap:6px;padding:26px 18px}
.rem-vide-titre{margin:0;font-size:15px;font-weight:600;color:var(--titres-c)}
.rem-erreur{gap:10px;align-items:flex-start}

/* ——— Le panneau de renvoi — un seul, trois portes ——— */
/* 🔴 LE BOUTON D'ENVOI EST ROUGE, ET C'EST L'USAGE PRÉVU DU ROUGE SECUREX HORS
   IDENTITÉ : une action engageante. Envoyer une pièce opposable à un client en
   est une. `btn-primaire` ne convenait pas — pleine largeur, 50 px, taillé pour
   le pouce d'un technicien debout, pas pour le pied d'un dialogue de bureau. */
.btn-rouge{min-height:38px;padding:0 16px;background:var(--sx-rouge);color:#fff;border:none;border-radius:8px;font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer}
.btn-rouge:hover{background:var(--sx-rouge-hover)}
.btn-rouge:disabled{opacity:.45;cursor:not-allowed}

.dialogue-renvoi{width:520px;max-width:94vw;display:flex;flex-direction:column;gap:14px}
.env-bloc{display:flex;flex-direction:column;gap:5px}
.env-etiquette{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.env-reference{font-size:14px;font-weight:700;color:var(--titres-c)}
.env-ligne{font-size:12.5px;color:var(--texte)}
/* Le cadre du sceau : ce qu'on envoie est une PIÈCE, pas une référence. */
.env-sceau{background:var(--surface2);border:1px solid var(--bordure);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;font-size:11.5px}
.env-journal-ligne{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--bordure)}
.champ-case{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--texte)}
.encart-refus{border-left:3px solid var(--sx-encre);background:var(--surface2)}

/* ——— L'encart de S8 et S9 ——— */
.enc-remise{background:var(--surface2);border:1px solid var(--bordure);border-radius:9px;padding:11px 13px;display:flex;flex-direction:column;gap:6px}
.enc-tete{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.enc-titre{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.enc-ligne{font-size:12.5px;color:var(--texte);text-wrap:pretty}
.enc-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ——— S15 « Mes sites » et le dossier du commercial (E98, lot 4) ———————————

   🔴 LE CHAMP D'ADRESSE EST DANS LA LIGNE, et toute cette grille existe pour
   ça : `contact_email` vaut zéro sur 362 sites, le lot 3 attend une adresse, et
   le geste doit coûter deux interactions — cliquer, valider — au lieu des six
   qu'imposerait un aller-retour par le dossier de site.

   🔴 ENCRE POUR CE QUI MANQUE, AMBRE POUR CE QUI ATTEND DÉJÀ. Règle écrite du
   lot 3 : « rien n'a échoué, ce n'est la faute de personne ». Le seul ambre du
   bandeau est la ligne des pièces signées en attente — la seule qui décrit une
   conséquence déjà advenue. Aucun rouge : le commercial n'a rien cassé. */

.parc-entete{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.parc-titres{display:flex;flex-direction:column;gap:2px}
.parc-titre{font-family:var(--titres);font-weight:800;font-size:22px;color:var(--titres-c);margin:0}
.parc-soustitre{margin:0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
.parc-compte{font-size:12px;color:var(--muted);white-space:nowrap;align-self:center}
.parc-champ-mail{max-width:230px}
.parc-entete .champ-recherche-large{width:280px;max-width:100%}

.parc-zones{display:flex;gap:0;border:1px solid var(--bordure2);border-radius:8px;overflow:hidden}
.parc-zone{min-height:38px;padding:0 12px;border:0;background:var(--surface);font-family:var(--mono);font-size:12px;color:var(--texte);cursor:pointer}
.parc-zone+.parc-zone{border-left:1px solid var(--bordure2)}
.parc-zone.actif{background:var(--sx-encre);color:#fff;font-weight:700}

/* Le bandeau : il POUSSE le contenu, il ne le recouvre pas. Filet gauche encre,
   jamais rouge ni ambre sur les deux premières lignes. */
.parc-bandeau{background:#eef2f6;border-left:3px solid var(--sx-encre);border-radius:0 10px 10px 0;padding:14px 18px;display:flex;flex-direction:column;gap:3px}
.parc-bandeau-titre{margin:0;font-size:14.5px;font-weight:700;color:var(--titres-c);text-wrap:pretty}
.parc-bandeau-ligne{margin:0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
.parc-bandeau-ambre{margin:0;font-size:12.5px;color:var(--attente);font-weight:600;text-wrap:pretty}
.parc-bandeau-ambre::before{content:'● ';font-size:9px;vertical-align:middle}
/* Zéro site sans adresse : une ligne quiet. Pas de vert, pas de coche, aucune
   félicitation — refus déjà posé au lot 3. */
.parc-bandeau-quiet{margin:0;font-size:12.5px;color:var(--texte)}

.parc-table{display:flex;flex-direction:column;border:1px solid var(--bordure);border-radius:10px;overflow:hidden;background:var(--surface)}
.parc-tete,.parc-ligne{display:grid;grid-template-columns:1.05fr 58px 108px 118px 1.35fr 1.15fr 100px;gap:12px;align-items:start;padding:10px 14px}
.parc-tete{background:var(--surface2);border-bottom:1px solid var(--bordure);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)}
.parc-ligne+.parc-ligne{border-top:1px solid #eef2f6}
.parc-ligne-inactive{opacity:.85;grid-template-columns:1.15fr 62px 1fr}
.parc-cell{min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--texte)}
.parc-cell-site{gap:2px}
.parc-lien-site{font-size:13px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.parc-lien-site:hover{color:var(--sx-rouge)}
.parc-lieu{font-size:11.5px;color:var(--texte)}
.parc-systemes{font-size:11.5px}
.parc-visite{font-size:12.5px}
.parc-vide{display:block}
.chip-zone{background:#eef2f6;color:var(--texte);font-family:var(--mono);font-size:10.5px}

/* EA49 — la pastille « à valider ». AMBRE, pas rouge : personne n'a échoué, le
   bureau n'a simplement pas encore vérifié. Le rouge de cette application
   signale un retard de maintenance ; l'user ici userait le seul rouge qui compte. */
.chip-a-valider{background:var(--attente-fond);color:var(--attente);border:1px solid var(--attente-bordure)}

.parc-adresse{display:flex;flex-direction:column;gap:4px;min-width:0}
.parc-adresse-saisie{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.parc-adresse-lue{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.parc-adresse-valeur{font-size:12.5px;color:var(--titres-c);max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.parc-adresse-ok{font-size:11.5px;color:#2f8f5a;font-weight:600;white-space:nowrap}
.parc-lecture{font-size:11.5px;color:var(--muted);white-space:nowrap}
.parc-aide{margin:0;font-size:11px;line-height:1.45;color:var(--muted);text-wrap:pretty}
.parc-avert{margin:0;font-size:11px;line-height:1.45;color:var(--attente);text-wrap:pretty}
.parc-erreur-ligne{margin:0;font-size:11.5px;color:#c0392b;text-wrap:pretty}
.parc-demande{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.parc-demande-chip{font-size:11px;color:var(--attente);background:var(--attente-fond);border-radius:4px;padding:2px 7px}
.parc-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.parc-fiches{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.parc-fiches-attente{font-size:12px;color:var(--attente);background:#faf0dd;border-radius:4px;padding:2px 7px}
.parc-fiches-reprendre{font-size:12px;color:#c0392b}
.parc-fiches-parties{font-size:12px;color:var(--muted)}

.parc-inactifs{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.parc-repli{align-self:flex-start;background:none;border:0;padding:0;font-family:var(--titres);font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);cursor:pointer}
.parc-inactifs-lignes{border:1px solid var(--bordure);border-radius:10px;overflow:hidden;background:var(--surface)}
.parc-aucun{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:18px}
.parc-vide-carte{align-self:center;max-width:420px;text-align:left}

.nav-inerte{display:flex;flex-direction:column;gap:2px;padding:8px 12px;color:#9fabba;font-size:14px;cursor:default}
.nav-inerte-aide{font-size:11px;line-height:1.45;color:#9fabba;text-wrap:pretty}

/* ——— Le dossier de site vu par le commercial ——— */
.csite-fil{font-size:12px;color:var(--muted)}
.csite-fil a:hover{color:var(--sx-rouge)}
.csite-entete{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.csite-titre-ligne{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.csite-titre{font-family:var(--titres);font-weight:800;font-size:22px;color:var(--titres-c);margin:0;text-wrap:pretty}
.csite-ancien{margin:0;font-size:12px;color:var(--muted)}
.csite-renommage{max-width:420px}
.csite-colonnes{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:18px;align-items:start}
.csite-champ{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--texte)}
.csite-etiquette{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.csite-equip{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--texte)}
.csite-echeancier{display:flex;flex-direction:column;gap:3px;border:1px dashed var(--bordure2);border-radius:8px;padding:9px 11px}
.csite-fiche{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--bordure);font-size:12.5px;color:var(--texte)}
.csite-fiche-date{font-size:12.5px;color:var(--titres-c);white-space:nowrap}
.csite-fiche-type{font-size:12.5px}
.csite-fiche-remise{font-size:12px;color:var(--muted)}
.csite-motif{font-size:11.5px;color:var(--attente)}

/* ══════════════════════════════════════════════════════════════════════
   S17 — LE VIVIER DE L'AUTO-RÉCLAMATION (E152, ED63)

   🔴 QUATRE COLONNES, PAS SEPT. Le vivier ne montre que ce qui sert à DÉCIDER
   de réclamer : le nom, la zone, les systèmes, le geste. Ni adresse, ni
   contact, ni fiches — ce sont des données du dossier d'un client dont on
   n'est pas encore le commercial, et le serveur ne les envoie pas non plus
   (`versApiListe()`, jamais `versApi()`). Réutiliser la grille de S15 à sept
   colonnes aurait laissé trois colonnes vides à remplir un jour.
   ══════════════════════════════════════════════════════════════════════ */
.viv-table{display:flex;flex-direction:column;border:1px solid var(--bordure);border-radius:10px;overflow:hidden;background:var(--surface)}
.viv-tete,.viv-ligne{display:grid;grid-template-columns:1.4fr 64px 1.1fr 150px;gap:12px;align-items:start;padding:10px 14px}
/* 🔴 LE BOUTON NE S'ÉTIRE PAS SUR SA COLONNE. Les cellules sont des colonnes
   flex, donc étirées par défaut : vingt-cinq rectangles pleins d'encre à la
   suite saturaient la page et tiraient l'œil vers le geste plutôt que vers le
   NOM DU SITE, qui est ce sur quoi on décide. Mesuré à la capture du balayage.
   Sur téléphone, il reprend la pleine largeur — la cible tactile prime. */
.viv-ligne .parc-cell,.viv-ligne .pile-serree{align-items:flex-start}
.viv-tete{background:var(--surface2);border-bottom:1px solid var(--bordure);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--texte)}
.viv-ligne+.viv-ligne{border-top:1px solid #eef2f6}
.viv-pagination{display:flex;gap:12px;align-items:center;justify-content:center;padding:4px 0}

/* ——— Mobile (Q48) : UNE VUE RÉACTIVE, PAS UN SECOND ÉCRAN.
   Le parc et la saisie d'UNE adresse tiennent sur un téléphone ; la passe, non,
   et elle ne s'y propose pas. La table devient une liste de cartes — une carte,
   un site — et le champ passe pleine largeur, cible tactile de 48 px. */
@media (max-width: 720px){
  .parc-tete{display:none}
  .parc-table,.parc-inactifs-lignes{border:0;background:none;gap:10px;display:flex;flex-direction:column}
  .parc-ligne,.parc-ligne-inactive{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:12px 14px}
  .parc-ligne+.parc-ligne{border-top:1px solid var(--bordure)}
  .parc-adresse-saisie{flex-direction:column;align-items:stretch}
  .parc-champ-mail{max-width:none;min-height:48px}
  .parc-adresse-saisie .btn-compact,.parc-adresse-saisie .btn-encre{min-height:48px;width:100%}
  .parc-entete .champ-recherche-large{width:100%}
  .csite-colonnes{grid-template-columns:1fr}
  /* Le vivier suit la même règle que le parc : une carte, un site. Réclamer
     EST un geste de téléphone — le commercial est chez son client quand il
     découvre que le site n'a pas de commercial. */
  .viv-tete{display:none}
  .viv-table{border:0;background:none;gap:10px;display:flex;flex-direction:column}
  .viv-ligne{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--bordure);border-radius:10px;padding:12px 14px}
  .viv-ligne+.viv-ligne{border-top:1px solid var(--bordure)}
  .viv-ligne .btn-encre{min-height:48px;width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   E99 — la file d'adresses du commercial, dans la ligne du parc (Q51 b)

   🔴 L'AMBRE DIT « EN ROUTE », LE ROUGE DIT « REFUSÉ », et les deux ne se
   confondent pas : une adresse en attente n'a rien d'anormal, c'est le
   comportement promis. Un rouge sur une attente ferait croire à une panne à
   chaque saisie hors réseau, c'est-à-dire à chaque geste que ce lot existe
   pour rendre possible.
   ══════════════════════════════════════════════════════════════════════ */
.parc-file-attente{font-size:11.5px;font-weight:600;color:var(--attente);white-space:nowrap}
.parc-file-attente::before{content:'● ';font-size:9px;vertical-align:middle}
.parc-file-refus{font-size:11.5px;font-weight:600;color:var(--alerte);white-space:nowrap}

/* ══════════════════════════════════════════════════════════════════════
   E99 — S16 « Renseigner les adresses », la passe

   🔴 LA BARRE DE PROGRESSION EST LÉGITIME ICI, et refusée dans le parc : une
   session a une fin, un parc n'en a pas (un site neuf naît sans adresse).
   C'est la même règle qui donne la barre à S11 et la refuse à S15.
   ══════════════════════════════════════════════════════════════════════ */
.passe{display:flex;flex-direction:column;gap:14px}
.passe-fil{display:flex;align-items:center;gap:7px;font-size:12.5px}
.passe-fil-chevron{color:var(--muted);font-size:13px}
.passe-fil-actif{color:var(--titres-c);font-weight:600}
.passe-entete{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.passe-titre{font-family:var(--titres);font-weight:800;font-size:22px;color:var(--titres-c);margin:0}
.passe-sous{margin:3px 0 0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
.passe-fermer{white-space:nowrap;align-self:center}

.passe-progression{display:flex;flex-direction:column;gap:7px}
.passe-progression-ligne{display:flex;align-items:center;gap:12px}
.passe-compteur{font-size:15px;font-weight:600;color:var(--titres-c);white-space:nowrap}
.passe-barre{width:220px;height:6px;border-radius:3px;background:var(--bordure);overflow:hidden;flex:none}
.passe-barre-part{height:100%;background:var(--sx-encre);border-radius:3px;transition:width .18s ease-out}
.passe-restants{font-size:12.5px;color:var(--texte);white-space:nowrap}
.passe-aide-clavier{margin:0;font-size:11.5px;color:var(--muted);text-wrap:pretty}
.passe-reprise{margin:0;font-size:12px;color:var(--muted);text-wrap:pretty}
.passe-tri{align-self:flex-start}

.passe-groupe{display:flex;flex-direction:column;border:1px solid var(--bordure);border-radius:10px;overflow:hidden;background:var(--surface)}
.passe-groupe-tete{margin:0;padding:8px 14px;min-height:28px;display:flex;align-items:center;background:var(--surface2);font-family:var(--titres);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* La tête du premier groupe est en ENCRE : ce sont les lignes dont
   l'enregistrement produit un effet visible immédiat. */
.passe-groupe-accent{color:var(--titres-c)}
.passe-groupe-aide{margin:0;padding:0 14px 8px;font-size:12.5px;color:var(--texte);background:var(--surface2);text-wrap:pretty}

.passe-ligne{display:flex;align-items:center;gap:12px;padding:10px 14px;min-width:0}
.passe-ligne+.passe-ligne{border-top:1px solid #eef2f6}
.passe-nom{font-size:14.5px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.passe-lieu{font-size:12.5px;color:var(--texte)}
.passe-contexte{font-size:11.5px;color:var(--muted)}
.passe-tiret{margin-left:auto;color:var(--bordure2)}

/* Ligne EN ATTENTE : 44 px, non éditable, cliquable. */
.passe-ligne-attente{background:var(--surface2);min-height:44px;cursor:pointer}
.passe-ligne-attente:hover{background:#eef2f6}
.passe-ligne-attente:focus-visible{outline:2px solid var(--sx-encre);outline-offset:-2px}

/* Ligne ACTIVE : fond blanc, filet gauche encre. Une seule à la fois. */
.passe-ligne-active{background:var(--surface);border-left:3px solid var(--sx-encre);align-items:flex-start;padding-left:11px}
.passe-active-gauche{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.passe-active-titre{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.passe-active-contexte{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--muted)}
.passe-attente{color:var(--attente);font-weight:600}
.passe-active-droite{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.passe-active-saisie{display:flex;align-items:center;gap:8px}
.passe-champ{width:300px;max-width:100%}
.passe-passer{align-self:flex-end}
.passe-erreur{margin:0;font-size:11.5px;color:var(--alerte);text-align:right;text-wrap:pretty}

/* Ligne VALIDÉE : repliée, 40 px. */
.passe-ligne-validee{min-height:40px;background:var(--surface)}
.passe-coche{color:var(--ok);font-weight:700}
.passe-mail{font-size:12px;color:var(--texte);max-width:28ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.passe-queued{font-size:11.5px;color:var(--ok);font-weight:600}
.passe-conflit{font-size:11.5px;color:var(--attente);font-weight:600}
.passe-ligne-validee .btn-lien{margin-left:auto}

/* Ligne PASSÉE — « adresse à demander », une décision datée. */
.passe-ligne-passee{background:var(--surface2);min-height:40px}
.passe-demandee{font-size:11.5px;color:var(--attente);font-weight:600}
.passe-ligne-passee .btn-lien{margin-left:auto}

.passe-carte{display:flex;flex-direction:column;align-items:center;gap:9px;padding:44px 24px;border:1px solid var(--bordure);border-radius:10px;background:var(--surface);text-align:center}
.passe-carte-titre{margin:0;font-family:var(--titres);font-weight:800;font-size:18px;color:var(--titres-c);text-wrap:pretty}
.passe-carte-ligne{margin:0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
.passe-carte-ambre{margin:0;font-size:12.5px;color:var(--attente);font-weight:600;text-wrap:pretty}

/* 🔴 LA PASSE NE SE PROPOSE PAS SUR MOBILE (Q48), ET ELLE NE SE TAIT PAS NON
   PLUS. Sous 720 px : le bouton du bandeau du parc DISPARAÎT — on ne propose
   pas ce qu'on ne veut pas voir fait ici — et l'écran atteint par lien direct
   remplace sa liste par une phrase. Un écran simplement illisible sur
   téléphone se lirait comme une application cassée. */
.passe-mobile{display:none}
@media (max-width:720px){
  .parc-passe-cta{display:none}
  .passe-mobile{display:block;padding:14px 16px;border-radius:9px;background:var(--surface2);border:1px solid var(--bordure);font-size:12.5px;color:var(--texte);text-wrap:pretty}
  .passe-groupe,.passe-progression,.passe-carte{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   E99 — le triage du responsable, « Rattacher les sites »

   🔴 LA BARRE D'ACTION EST COLLANTE EN BAS, et elle n'apparaît QU'UNE FOIS
   UNE LIGNE COCHÉE : une barre permanente sur un écran de 362 lignes
   mangerait la moitié de la hauteur utile pour ne rien dire.
   ══════════════════════════════════════════════════════════════════════ */
.ratt{display:flex;flex-direction:column;gap:14px;padding-bottom:72px}
.ratt-filtres{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ratt-case-inactifs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--texte);cursor:pointer;white-space:nowrap}
.ratt-filtres .champ-recherche-large{width:240px;max-width:100%}

.ratt-section{border:1px solid var(--bordure);border-left:3px solid var(--sx-encre);border-radius:0 10px 10px 0;background:#eef2f6;padding:12px 16px;display:flex;flex-direction:column;gap:3px}
.ratt-section-tete{margin:0;font-family:var(--titres);font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--titres-c)}
.ratt-section-aide{margin:0;font-size:12.5px;color:var(--texte);text-wrap:pretty}
/* La section reste affichée à 0 : son absence se lirait comme un chargement
   incomplet — règle posée par la file des remises du lot 3. */
.ratt-section-vide{margin:0;font-size:12.5px;color:var(--muted);font-weight:600}

.ratt-table{display:flex;flex-direction:column;border:1px solid var(--bordure);border-radius:10px;overflow:hidden;background:var(--surface)}
.ratt-tete{display:flex;align-items:center;gap:12px;padding:8px 14px;background:var(--surface2);border-bottom:1px solid var(--bordure)}
.ratt-tete-libelle{font-family:var(--titres);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ratt-ligne{display:grid;grid-template-columns:28px 1.6fr 62px 96px 1.5fr;gap:12px;align-items:start;padding:10px 14px}
.ratt-ligne+.ratt-ligne{border-top:1px solid #eef2f6}
.ratt-case{display:flex;align-items:center;justify-content:center;min-height:24px}
.ratt-cell{min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--texte)}
.ratt-cell-site{gap:2px}
.ratt-lien-site{font-size:13px;font-weight:600;color:var(--titres-c);text-wrap:pretty}
.ratt-lien-site:hover{color:var(--sx-rouge)}
.ratt-lieu{font-size:11.5px;color:var(--texte)}
.ratt-adresse-ok{color:var(--ok);font-weight:700}
.ratt-adresse-non{color:var(--attente);font-weight:600;font-size:11.5px}
.ratt-commerciaux{display:flex;flex-direction:column;gap:5px}
.ratt-commercial{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ratt-commercial-nom{font-size:12.5px;color:var(--texte)}
.ratt-commercial-nom.est-titulaire{font-weight:600;color:var(--titres-c)}
.ratt-chip-titulaire{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ok)}
.ratt-detacher{color:var(--muted)}
.ratt-select{max-width:220px}
.ratt-aucun-compte{font-size:12px;color:var(--attente);text-wrap:pretty}

.ratt-barre-lot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-radius:10px;background:var(--sx-encre);color:#fff;box-shadow:0 -2px 14px rgba(15,27,45,.18)}
.ratt-barre-compte{font-size:13px;font-weight:600}
.ratt-barre-vide{font-size:12.5px;color:#f0c98a}
.ratt-barre-clear{color:#fff;margin-left:auto;text-decoration:underline}
.ratt-barre-lot .champ-select{min-height:36px}

@media (max-width:900px){
  .ratt-ligne{grid-template-columns:28px 1fr;row-gap:6px}
  .ratt-ligne>.ratt-cell:nth-child(3),.ratt-ligne>.ratt-cell:nth-child(4){grid-column:2}
  .ratt-ligne>.ratt-cell:nth-child(5){grid-column:2}
  .ratt-filtres .champ-recherche-large{width:100%}
}

/* ED55 — LA LIGNE OÙ L'ON REVIENT, BRIÈVEMENT MARQUÉE.
   🔴 UNE MARQUE QUI S'EFFACE, ET C'EST LE POINT. Elle dit « te voilà revenu
   ici », pas « cette ligne a quelque chose de particulier » : laissée en place,
   elle deviendrait au bout de trois retours un état permanent que personne ne
   saurait lire — et sur une liste de 268 sites, une ligne teintée sans cause
   visible se lit comme une alerte.
   ⚠️ ELLE NE DÉPLACE RIEN. Ni bordure qui pousse, ni `padding` : un contour
   dessiné par-dessus (`outline`) et un fond. Une marque qui décale la ligne
   ferait sauter la liste à l'instant précis où l'on vient d'y ramener le
   lecteur.
   ⚠️ `prefers-reduced-motion` coupe la transition, jamais la marque : c'est
   l'animation qui gêne, pas le repère. */
.ligne-revenue{outline:2px solid var(--sx-bleu);outline-offset:-1px;background:var(--surface2);transition:outline-color .5s ease,background-color .5s ease}
.liste-ligne.ligne-revenue{outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.ligne-revenue{transition:none}}

/* E99 — la vie d'un site (EA50) : la case des archivés, la marque, la création. */
.sites-case-archives{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--texte);cursor:pointer;white-space:nowrap}
.site-chip-archive{margin-left:8px;font-size:10.5px;background:var(--attente-fond);border:1px solid var(--attente-bordure);color:var(--attente)}
.sites-creer{display:flex;justify-content:center;padding:6px 0 14px}

/* ——— T · LES TROIS PORTES DU TÉLÉPHONE (EA52, EA57) ————————————————————
   Le champ de contact est LIBRE : aucun masque, aucune police imposée au nom.
   Seul le NUMÉRO passe en `mono` (`IBM Plex Mono`), par sa classe, comme tous
   les identifiants du dépôt.
   🔴 La mention de dernière écriture est en TEXTE SECONDAIRE, SANS COULEUR :
   une correction n'est pas un incident. Il n'y a aucun ambre et aucun rouge
   dans tout ce rang — le manque n'est pas une alerte. */
.champ-contact{margin:6px 0}
.champ-contact input{width:100%}
.contact-derniere-ecriture{display:block;margin-top:3px;font-size:11px;color:var(--muted)}
/* T · EA66 — les deux mentions de remplacement, EN ENCRE et jamais en
   avertissement : un remplacement est un acte normal de maintenance, pas un
   incident. Même traitement que les quatre provenances de B1. */
.eq-remplacement{display:block;font-size:11.5px;color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════════
   E112 — LA NATURE DU CATALOGUE ET LE MATÉRIEL UTILISÉ (lot 5, rang A3)
   ═══════════════════════════════════════════════════════════════════════════ */

/* L'écran de classement — il sert UNE FOIS, et sa densité le dit : 57 lignes
   doivent tenir sous les yeux d'une séance à deux, pas remplir un écran. */
/* 🔴 `catalogue-filtre`, ET SURTOUT PAS `onglet` : `.onglet` est DÉJÀ pris
   (l. 138) par la barre d'onglets du technicien, et une seconde définition du
   même sélecteur écraserait la première selon l'ordre du fichier — sans une
   erreur, sans qu'aucun test ne le voie, et le défaut n'apparaîtrait que sur le
   téléphone de quelqu'un. Même famille que les routes doubles du mock (ED04) :
   un doublon ne se voit pas à la lecture. */
.catalogue-filtres{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0}
.catalogue-filtre{border:1px solid var(--bordure);border-radius:999px;background:var(--surface);padding:6px 12px;font-family:var(--sans);font-size:12.5px;color:var(--texte);cursor:pointer;min-height:36px}
.catalogue-filtre.actif{border-color:var(--sx-encre);background:var(--surface2);color:var(--titres-c);font-weight:600}

.ligne-catalogue{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--bordure);border-radius:8px;cursor:pointer}
.ligne-catalogue-libelle{flex:1;font-size:13.5px;color:var(--titres-c);overflow-wrap:anywhere}
.ligne-catalogue-variantes{font-size:11.5px;color:var(--muted)}
.ligne-catalogue-etat{font-size:12px;white-space:nowrap}
/* 🔴 LA NON CLASSÉE EST EN ENCRE DISCRÈTE, JAMAIS EN ROUGE. 52 lignes sur 57
   sont dans cet état le jour 1 : les peindre en avertissement ferait un écran
   entièrement rouge pour un état parfaitement normal — et userait le rouge, qui
   sur ce projet signale un retard de maintenance. Rien ne bloque (EA58). */
.ligne-catalogue-etat.non-classee{color:var(--muted);font-style:italic}
.ligne-catalogue-etat.classee{color:var(--titres-c);font-weight:600}
/* La mention `EA54` remplace un auteur : elle se lit, elle ne s'impose pas. */
.ligne-catalogue-source{margin-left:6px;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.ligne-catalogue-note{font-size:11px;color:var(--muted);font-style:italic}
/* Les points d'ordre du jour de la séance (Q71, Q74) — pas des erreurs. */
.ligne-catalogue-question{font-family:var(--mono);font-size:10.5px;color:var(--muted)}

/* L'action de lot n'apparaît QUE quand une case est cochée : une barre d'action
   permanente au-dessus d'une liste sans sélection propose un geste impossible. */
.barre-lot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;background:var(--surface2);border:1px solid var(--sx-encre);border-radius:8px}
.barre-lot-compte{font-size:12.5px;font-weight:600;color:var(--titres-c)}
.barre-lot-actions{display:flex;gap:6px;flex-wrap:wrap}

/* Le bloc « matériel utilisé » de la fiche — MOBILE, en plein soleil.
   🔴 AUCUNE CHIP DE CONSTAT ICI, et l'absence est le sujet : une goulotte ne se
   constate pas, elle se pose. La ligne est donc plus basse qu'un équipement, et
   c'est ce qui la distingue au premier coup d'œil. */
.equip.fourniture{border-left:3px solid var(--bordure)}
.quantite{display:flex;align-items:center;gap:4px}
/* 48 px : la cible tactile minimale du projet. Un pas de ±1 qu'on rate en plein
   soleil coûte plus cher que la place qu'il prend. */
.btn-quantite{min-width:44px;min-height:44px;border:1px solid var(--bordure);border-radius:8px;background:var(--surface);font-size:18px;line-height:1;color:var(--titres-c);cursor:pointer}
.btn-quantite:hover{border-color:var(--sx-encre)}
/* La saisie directe sert les grands nombres : 120 colliers ne se tapent pas en
   120 taps. Les deux gestes coexistent, jamais l'un sans l'autre. */
.quantite-champ{width:64px;min-height:44px;text-align:center;font-family:var(--mono);font-size:15px;border:1px solid var(--bordure);border-radius:8px;background:var(--surface);color:var(--titres-c)}
.btn-retirer{min-width:44px;min-height:44px;border:none;background:none;font-size:16px;color:var(--muted);cursor:pointer}
.btn-retirer:hover{color:var(--titres-c)}