/* ── Sentinel — thème noir & blanc (command center) ──────────────
   L'accent est le BLANC pur. Les couleurs sémantiques (vert/ambre/rouge)
   sont conservées mais désaturées : les feux vert/orange/rouge et les
   niveaux de criticité ne sont lisibles que par la couleur.            */
/* `hidden` doit gagner, toujours. Une carte masquee selon le profil (le code
   d'administration sur equipe.html) redeviendrait visible le jour ou une regle
   de mise en page poserait un `display` sur son selecteur. */
[hidden]{display:none!important}

:root{
  --bg:#06080c; --bg2:#0a0d12; --panel-bg:#0b0e13;
  --glass:rgba(15,19,26,.72); --glass-brd:rgba(255,255,255,.10);
  --ink:rgba(255,255,255,.95); --muted:rgba(255,255,255,.60); --faint:rgba(255,255,255,.32);
  --accent:#ffffff; --accent-soft:rgba(255,255,255,.12);
  --gold:rgba(255,255,255,.86); --gold-soft:rgba(255,255,255,.10);
  --ok:#34d399; --warn:#fbbf24; --crit:#f87171; --slate:rgba(255,255,255,.45);
  --r:14px; --sh:0 18px 50px -18px rgba(0,0,0,.75);
}
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:'DM Sans',system-ui,sans-serif;background:
  radial-gradient(ellipse 800px 500px at 12% -8%,rgba(255,255,255,.05),transparent 60%),
  radial-gradient(ellipse 700px 450px at 95% 8%,rgba(255,255,255,.035),transparent 55%),
  radial-gradient(ellipse 900px 600px at 50% 110%,rgba(255,255,255,.028),transparent 60%),var(--bg);
  background-attachment:fixed;
  color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:'DM Mono',monospace}

/* panels */
.panel{background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);
  backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:var(--sh)}

/* command bar */
.appbar{position:fixed;top:16px;left:76px;right:16px;z-index:20;display:flex;align-items:stretch;gap:10px}
.brand{display:flex;align-items:center;gap:12px;padding:11px 16px}
.brand .logo{width:34px;height:34px;border-radius:9px;object-fit:contain;background:#0b0e13;border:1px solid var(--glass-brd)}
.brand h1{font-size:14px;font-weight:600;letter-spacing:.2px;line-height:1}
.brand .sub{font:500 10px/1.4 'DM Mono';color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;margin-top:3px}
.appbar .title{display:flex;flex-direction:column;justify-content:center;padding:0 18px;border-left:1px solid var(--glass-brd);flex:1}
.appbar .title .pg{font:600 16px/1 'DM Sans'}
.appbar .title .cx{font:500 10px/1.4 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-top:4px}
.appbar .clock{display:flex;flex-direction:column;justify-content:center;padding:0 16px;border-left:1px solid var(--glass-brd)}
.appbar .clock .t{font:500 16px/1 'DM Mono';letter-spacing:1px}
.appbar .clock .d{font:400 10px/1.4 'DM Mono';color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:3px}

/* left nav rail */
.nav{position:fixed;left:16px;top:16px;bottom:16px;z-index:21;display:flex;flex-direction:column;gap:6px;padding:10px;align-items:center}
.nav .np{width:44px;height:44px;border:0;border-radius:11px;background:transparent;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;transition:.18s;position:relative}
.nav .np svg{width:20px;height:20px}
.nav .np:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.nav .np.on{background:var(--accent-soft);color:var(--accent)}
.nav .np.on::before{content:"";position:absolute;left:-10px;top:11px;bottom:11px;width:3px;border-radius:3px;background:var(--accent)}
.nav .tip{position:absolute;left:54px;white-space:nowrap;background:var(--glass);border:1px solid var(--glass-brd);
  padding:6px 10px;border-radius:8px;font:500 11px/1 'DM Sans';opacity:0;pointer-events:none;transform:translateX(-6px);transition:.16s;backdrop-filter:blur(12px);z-index:30}
.nav .np:hover{z-index:31}
.nav .np:hover .tip{opacity:1;transform:translateX(0)}

/* ── Fenêtres de création (modales) ──────────────────────────────
   Étaient redéfinies page par page ; centralisées ici pour que toute
   nouvelle page en hérite. z-index élevé : au-dessus de la nav ET des
   panes Leaflet (qui montent jusqu'à 700 dans leur contexte). */
.ovl{position:fixed;inset:0;z-index:200;background:rgba(4,5,8,.74);backdrop-filter:blur(7px);
  display:none;align-items:center;justify-content:center;padding:20px}
.ovl.on{display:flex}
/* 92vh + les 2x20px de marge de l'overlay dépassaient la fenêtre, et `.ovl`
   est fixe sans défilement : le bas de la boîte était COUPÉ, pas seulement
   long. On enlève la marge de la hauteur au lieu de deviner un pourcentage. */
.dlg{width:min(700px,100%);max-height:calc(100vh - 40px);overflow:auto;overscroll-behavior:contain}
/* ET IL FAUT REMONTER LA SPÉCIFICITÉ, sans quoi la ligne du dessus ne sert à
   rien. `.card` (plus bas dans ce fichier) pose `overflow:hidden`. À
   spécificité égale, c'est la règle la PLUS TARDIVE qui gagne : sur un
   `<div class="card dlg">`, le contenu était donc COUPÉ au lieu de défiler.
   La hauteur maximale s'appliquait bien — d'où une boîte qui remplit l'écran
   et dont le bas est simplement inatteignable.

   Signalé par Thomas le 04/08 sur le suivi RH, où le commentaire et la
   décision sont en bas du dossier : les deux seules écritures de la page
   étaient hors de portée. HUIT boîtes étaient dans ce cas — alertes (3),
   contrôles, main courante (2), distributeurs, suivi RH.

   `.card.dlg` plutôt qu'un déplacement de bloc : l'ordre des règles se casse
   en silence au premier réagencement du fichier, la spécificité non. */
.card.dlg{overflow:auto}
.dh{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;
  border-bottom:1px solid var(--glass-brd)}
.dh h3{font:600 18px 'DM Sans'}
.dh .sub{font:500 10.5px 'DM Mono';color:var(--muted);margin-top:5px;text-transform:uppercase;letter-spacing:1.2px}
.db{padding:20px 22px;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.fld{display:flex;flex-direction:column;gap:7px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font:600 10.5px 'DM Sans';color:var(--muted);text-transform:uppercase;letter-spacing:.9px}
.fld label b{color:var(--crit)}
.fld .inp,.fld .sel{width:100%}
/* Un `<input>` a une largeur intrinsèque d'environ 180 px, quelle que soit la
   place disponible. Dans un `.champ` (libellé au-dessus, saisie en dessous)
   c'est un moignon au milieu d'une carte vide — visible sur téléphone, où la
   grille passe à une colonne, mais faux dès le départ. Les `max-width` posés
   au cas par cas continuent de plafonner. */
.champ .inp,.champ .sel,.champ textarea{width:100%}
/* Bouton destructeur. Etait defini en double dans `paie.html` et
   `equipe.html`, et donc ABSENT de `parametres.html` ou il servait au bouton
   de purge : le seul bouton du produit qui supprime sans retour avait l'air
   d'un bouton ordinaire. Meme faute que `.btn.pri` le 02/09 — un style
   partage n'a rien a faire dans une page. */
.btn.danger{border-color:rgba(248,113,113,.35);color:var(--crit)}
.btn.danger:hover:not(:disabled){background:rgba(248,113,113,.10)}
.df,.da{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--glass-brd)}
/* Bouton principal. Il n'existait QUE dans le <style> de convoyage.html :
   planning.html l'utilisait sans l'avoir, donc son bouton principal ne
   ressortait pas. Une classe du design system appartient au design system. */
.btn.pri{background:var(--accent);border-color:transparent;color:#04070d}
.btn.pri:hover:not(:disabled){background:var(--accent);filter:brightness(1.08)}

.msg{grid-column:1/-1;font:500 12.5px 'DM Sans';padding:11px 13px;border-radius:9px;display:none}
.msg.err{display:block;background:rgba(248,113,113,.12);color:var(--crit);border:1px solid rgba(248,113,113,.3)}
.msg.ok{display:block;background:rgba(52,211,153,.12);color:var(--ok);border:1px solid rgba(52,211,153,.3)}
.msg.warn{display:block;background:rgba(251,191,36,.12);color:var(--warn);border:1px solid rgba(251,191,36,.3)}
.hint{grid-column:1/-1;font:500 11.5px/1.6 'DM Sans';color:var(--faint)}
@media(max-width:640px){.db{grid-template-columns:1fr}}
.nav .sep{flex:1}

/* content */
.content{margin-left:76px;padding:104px 20px 28px;max-width:1560px}
.kpigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.kpi{padding:16px 18px;border-radius:var(--r);background:var(--panel-bg);border:1px solid var(--glass-brd)}
.kpi .n{font:600 26px/1 'DM Mono';letter-spacing:.5px}
.kpi .l{font:500 10.5px/1.3 'DM Sans';color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:7px}
.kpi.ok .n{color:var(--ok)} .kpi.warn .n{color:var(--warn)} .kpi.crit .n{color:var(--crit)}
.kpi.acc .n{color:var(--accent)} .kpi.gold .n{color:var(--gold)}

.card{background:var(--panel-bg);border:1px solid var(--glass-brd);border-radius:16px;overflow:hidden}
.card .hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-bottom:1px solid var(--glass-brd);flex-wrap:wrap}
.card .hd h2{font:600 15px/1 'DM Sans'}
.card .hd .cnt{font:500 11px/1 'DM Mono';color:var(--muted)}

/* filters */
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.inp,.sel{height:36px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--glass-brd);
  color:var(--ink);font:500 12.5px 'DM Sans';padding:0 12px;outline:none;transition:.15s}
.inp:focus,.sel:focus{border-color:var(--accent);background:rgba(255,255,255,.07)}
.inp::placeholder{color:var(--faint)}
/* La liste déroulante native d'un <select> est dessinée par le système :
   sans couleurs explicites, elle sort en fond clair avec du texte blanc
   hérité — donc illisible. On force le fond sombre du thème.

   La règle vise `select` et non `.sel` : elle ne portait que sur la classe,
   et deux listes déclarées `class="inp"` seule s'ouvraient donc en blanc sur
   blanc (equipe.html, signalé le 03/09). Un défaut d'affichage ne doit pas
   dépendre du fait qu'on ait pensé à mettre la bonne classe.

   `color-scheme:dark` complète le tableau : sans lui, l'ascenseur et le cadre
   de la liste native restent clairs même quand les options sont sombres. */
select{color-scheme:dark}
select option,select optgroup{background:#0f131a;color:#e8eaee;font:500 13px 'DM Sans'}
select option:checked,select option:hover{background:#1c2531;color:#fff}
select optgroup{color:var(--muted);font-weight:700}
/* Champs date / heure : l'icône native du navigateur est noire sur fond sombre. */
.inp[type="date"],.inp[type="time"],.inp[type="number"]{color-scheme:dark}
.inp.search{min-width:220px}
.seg{display:flex;background:rgba(255,255,255,.04);border:1px solid var(--glass-brd);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:6px 12px;border-radius:7px;font:600 11.5px 'DM Sans';transition:.14s}
.seg button.on{background:var(--accent-soft);color:var(--accent)}
.btn{height:36px;border-radius:9px;border:1px solid var(--glass-brd);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;font:600 12px 'DM Sans';padding:0 14px;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.btn:hover{background:rgba(255,255,255,.08)}
.btn svg{width:15px;height:15px}

/* Ligne de tableau cliquable : sans indice visuel, personne ne devine
   qu'une fiche existe derriere. */
.tbl tr.clik{cursor:pointer}
.tbl tr.clik:hover td{background:rgba(255,255,255,.05)}

/* Pagination (H.pager). Le pied indique le total REEL : les tableaux
   tronquaient auparavant en silence, ce qui laissait croire a un journal
   complet alors qu'il manquait des milliers de lignes. */
.pgwrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--glass-brd)}
.pginfo{font:500 12px 'DM Mono';color:var(--muted);font-variant-numeric:tabular-nums}
.pginfo b{color:var(--ink);font-weight:500}
.pgbtns{display:flex;gap:4px;margin-left:auto}
/* `.pg` est AUSSI la classe du titre de page dans la barre du haut
   (`.appbar .title .pg`) : non bornée, cette règle lui donnait un cadre, un
   fond et 30 px de haut — le titre flottait dans une case vide, sur toutes les
   pages et à toutes les largeurs. Bornée aux boutons de pagination. */
.pgbtns .pg{min-width:30px;height:30px;padding:0 8px;border-radius:8px;cursor:pointer;
  border:1px solid var(--glass-brd);background:rgba(255,255,255,.04);color:var(--muted);
  font:600 12px 'DM Sans';font-variant-numeric:tabular-nums;transition:background .14s,color .14s,border-color .14s}
.pgbtns .pg:hover:not(:disabled){background:rgba(255,255,255,.08);color:var(--ink)}
.pgbtns .pg.on{background:var(--accent);border-color:var(--accent);color:#0a0a0b}
.pgbtns .pg:disabled{opacity:.3;cursor:default}
.pgsize{height:30px;padding:0 8px;font-size:12px}
@media(max-width:720px){.pgbtns{margin-left:0;order:3;width:100%;justify-content:center}}

/* table */
.tblwrap{overflow:auto;max-height:calc(100vh - 300px)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;background:#0b0e13;z-index:2;text-align:left;padding:11px 16px;
  font:600 10px/1 'DM Sans';text-transform:uppercase;letter-spacing:1px;color:var(--muted);border-bottom:1px solid var(--glass-brd)}
.tbl td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
.tbl tr:hover td{background:rgba(255,255,255,.025)}
.tbl .mono{font-family:'DM Mono';color:var(--muted);font-size:12px}
.tbl .strong{font-weight:600}
.tbl::-webkit-scrollbar,.tblwrap::-webkit-scrollbar{width:8px;height:8px}
.tblwrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}

/* chips */
.tag{font:600 9.5px/1 'DM Sans';text-transform:uppercase;letter-spacing:.7px;padding:5px 8px;border-radius:6px;display:inline-block;white-space:nowrap}
.t-ok{background:rgba(52,211,153,.13);color:var(--ok)}
.t-warn{background:rgba(251,191,36,.13);color:var(--warn)}
.t-crit{background:rgba(248,113,113,.13);color:var(--crit)}
.t-acc{background:var(--accent-soft);color:var(--accent)}
.t-gold{background:var(--gold-soft);color:var(--gold)}
.t-slate{background:rgba(255,255,255,.16);color:var(--slate)}
.puck{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 11px 'DM Sans';color:#04070d;flex-shrink:0}
.avatar{display:flex;align-items:center;gap:11px}
.avatar .nm{font-weight:600;font-size:13px}
.avatar .sb{font:500 10.5px 'DM Mono';color:var(--muted);margin-top:2px}

/* severity dot */
.sev{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:2px}
.sev.info{background:var(--accent)} .sev.warn{background:var(--warn)} .sev.critical{background:var(--crit)}

.empty{padding:60px 20px;text-align:center;color:var(--muted);font:500 14px 'DM Sans'}
.imm{display:inline-flex;align-items:center;gap:6px;font:500 10px 'DM Mono';color:var(--gold);
  background:var(--gold-soft);padding:5px 10px;border-radius:7px;text-transform:uppercase;letter-spacing:.6px}
.bar{height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;min-width:70px}
.bar > i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px}
@media(max-width:720px){.appbar .clock{display:none}.content{padding-left:14px;padding-right:14px}}

/* ══════════════════════════════════════════════════════════
   TÉLÉPHONE — la coquille se replie, elle ne se rétrécit pas

   Mesuré sur un écran de 390 px : le rail de navigation prenait 100 px et ne
   se repliait jamais, la barre du haut alignait quatre panneaux côte à côte et
   sortait de l'écran, et le contenu se retrouvait dans 290 px. Réduire les
   marges n'y aurait rien fait : c'est la DISPOSITION qui ne tient pas, pas les
   espacements.

   Le rail devient donc un TIROIR — mêmes entrées, mêmes icônes, avec les
   libellés enfin lisibles. Un rail transformé en barre du bas aurait obligé à
   faire défiler vingt icônes à l'horizontale pour trouver la quinzième.

   Le seuil est à 860 px et non à 720 : entre les deux, la barre du haut tient
   encore mais le rail mange déjà le quart d'une tablette en portrait.
   ══════════════════════════════════════════════════════════ */
.navtoggle{display:none}

@media(max-width:860px){
  /* ── Le tiroir ──────────────────────────────────────────── */
  .nav{left:0;top:0;bottom:0;border-radius:0;padding:14px 10px;
       overflow-y:auto;overscroll-behavior:contain;
       transform:translateX(-110%);transition:transform .22s ease;
       box-shadow:0 0 40px rgba(0,0,0,.6);align-items:stretch;width:min(78vw,270px)}
  body.tiroir .nav{transform:translateX(0)}
  /* Un tiroir ouvert doit se refermer en touchant à côté : sans ce voile, le
     seul moyen de sortir serait le bouton, et on tape d'abord ailleurs. */
  .nav::after{content:none}
  .navscrim{position:fixed;inset:0;z-index:20;background:rgba(4,5,8,.6);
            opacity:0;pointer-events:none;transition:opacity .22s}
  body.tiroir .navscrim{opacity:1;pointer-events:auto}

  /* Dans le tiroir, l'icône seule ne suffit plus : le libellé qui servait
     d'infobulle au survol devient le texte du bouton. Une infobulle n'existe
     pas au doigt — la garder cachée aurait laissé vingt icônes muettes. */
  .nav .np{width:auto;height:auto;justify-content:flex-start;
           display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:10px}
  .nav .np svg{flex:none}
  .nav .np .tip{position:static;opacity:1;transform:none;background:none;border:0;
                padding:0;font:500 13.5px 'DM Sans';backdrop-filter:none;white-space:normal}
  .nav .np.on::before{left:-10px}
  .nav .sep{width:100%}

  /* ── La barre du haut ───────────────────────────────────── */
  .appbar{left:12px;right:12px;top:12px;gap:8px}
  .appbar .clock{display:none}
  .brand{padding:9px 12px;flex:none}
  .brand h1{font-size:12.5px;max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand .sub{display:none}
  .brand .logo{width:28px;height:28px}
  .appbar .title{padding:0 12px;min-width:0}
  .appbar .title .pg{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Le contexte est une phrase d'explication : sur 390 px elle passerait sur
     trois lignes et pousserait le titre hors de la barre. */
  .appbar .title .cx{display:none}
  /* Le nom et le rôle sortent ; la pastille d'initiales suffit à dire qui est
     connecté, et le tiroir porte la déconnexion. */
  .appbar .compte > div:last-child{display:none}
  .appbar .compte{padding:0 10px !important}

  .navtoggle{display:grid;place-items:center;width:42px;flex:none;
             background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--r);
             color:var(--ink);cursor:pointer;padding:0}
  .navtoggle svg{width:20px;height:20px}

  /* ── Le contenu récupère toute la largeur ──────────────── */
  .content{margin-left:0;padding:78px 12px 46px}

  /* Sur une tablette, un tableau garde ses colonnes et défile dans SA boîte.
     Le plafond de hauteur saute — deux ascenseurs imbriqués sont
     impraticables au doigt. Sous 640 px il devient une pile de fiches (plus
     bas). */
  .tblwrap{max-height:none;-webkit-overflow-scrolling:touch}
  .tbl th,.tbl td{padding-left:12px;padding-right:12px}
  .card .hd{align-items:flex-start;flex-direction:column;gap:9px}
  .filters{width:100%}
  .filters .inp,.filters .sel,.filters .search{flex:1 1 130px;min-width:0}
  .db{grid-template-columns:1fr}
  .ovl{padding:10px}
  .dlg{max-height:calc(100vh - 20px)}
  /* Les grilles à deux ou trois colonnes des formulaires : une seule colonne. */
  .g2,.g3,.grille2,.champs{grid-template-columns:1fr !important}
}

/* Sur un vrai téléphone, le titre de la page se retrouvait réduit à « M... » :
   la raison sociale, la bascule et la pastille du compte se partageaient la
   barre et il ne restait rien pour dire OÙ l'on est. Sous 560 px, le nom de
   l'entreprise cède la place — le logo suffit à la reconnaître, alors que
   « Main courante » n'a pas d'équivalent visuel. */
@media(max-width:560px){
  .brand h1{display:none}
  .brand{padding:9px 11px}
  .appbar .title{flex:1 1 auto;min-width:0;padding:0 11px}
}

/* ══════════════════════════════════════════════════════════
   TÉLÉPHONE — au doigt, et sans rien de coupé (22/09)

   Mesuré sur les 22 pages à 390 px : aucune ne défilait de travers, mais
   chacune avait quelque chose de CACHÉ — des colonnes hors de la boîte du
   tableau, des onglets et des champs de date coupés par le bord d'une carte
   (`.card` est en overflow:hidden, donc ce qui dépasse disparaît sans
   ascenseur), et la pastille « direct » posée sur le contenu.
   ══════════════════════════════════════════════════════════ */
@media(max-width:860px){
  /* Au doigt, 36 px est trop juste ; 16 px dans un champ évite aussi que
     Safari zoome sur la page à chaque saisie (portail client sur iPhone). */
  .btn,.inp,.sel{height:42px}
  .inp,.sel,textarea{font-size:16px}
  .pgbtns .pg{min-width:38px;height:38px}
  .btn{min-width:42px;justify-content:center}
  input[type="checkbox"],input[type="radio"]{width:20px;height:20px;flex:none;accent-color:var(--accent)}
  .tag{font-size:10.5px}
  /* Une barre d'onglets trop longue défile dans sa largeur au lieu d'être
     coupée par la carte qui la contient. */
  .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;padding:9px 13px}
  /* Une rangée d'outils écrite en flex sans retour à la ligne (dates d'un
     rapport, bouton à côté d'un champ) passe à la ligne au lieu de sortir. */
  .card .hd > *, .filters > *{max-width:100%}
  .card .hd [style*="display:flex"], .filters [style*="display:flex"]{flex-wrap:wrap}
  .card .hd .inp[type="date"]{flex:1 1 140px;width:auto !important;min-width:0}
  /* La pastille « direct / différé » flottait sur le contenu, en bas à droite
     — par-dessus la dernière ligne de chaque tableau. Elle devient un point
     sur le bouton du menu ; l'état reste visible, rien n'est recouvert. */
  #sentinel-live-dot{display:none !important}
  .navtoggle{position:relative}
  body[data-direct] .navtoggle::after{content:"";position:absolute;top:9px;right:9px;width:7px;height:7px;
    border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px var(--bg,#06080c)}
  body[data-direct="1"] .navtoggle::after{background:var(--ok)}
  .nav .ver{display:block;padding:10px 12px 2px;font:500 10px 'DM Mono';letter-spacing:1px;
    text-transform:uppercase;color:var(--faint)}
}
.nav .ver{display:none}

/* Sous 640 px, un tableau devient une PILE DE FICHES.
   La note du 03/09 défendait l'inverse — garder les colonnes et faire défiler
   la boîte — pour préserver la comparaison ligne à ligne. Mesuré à 390 px,
   cette comparaison n'existait plus : trois colonnes visibles sur huit, le
   reste hors écran sans aucun indice, et chaque cellule repliée sur trois
   lignes (« C / Export »). Sur un téléphone on lit une ligne à la fois ; la
   fiche la donne en entier, chaque valeur sous le nom de sa colonne.
   Les noms viennent de l'en-tête du tableau, recopiés par `H.etiqueter()`
   (core.js) — aucune page n'a eu à être réécrite. */
@media(max-width:640px){
  .tblwrap{overflow:visible}
  .tbl{display:block;font-size:13.5px}
  .tbl thead{display:none}
  .tbl tbody{display:block}
  .tbl tr{display:flex;flex-direction:column;gap:7px;padding:14px 16px;
          border-bottom:1px solid rgba(255,255,255,.06)}
  .tbl td{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
          padding:0;border:0;min-width:0;text-align:right;overflow-wrap:anywhere}
  .tbl td::before{content:attr(data-label);flex:none;max-width:44%;text-align:left;
          font:600 10px/1.7 'DM Sans';text-transform:uppercase;letter-spacing:.9px;color:var(--faint)}
  /* La première colonne est le titre de la fiche : pas d'étiquette. */
  .tbl td:first-child{justify-content:flex-start;text-align:left;font-weight:600;font-size:14.5px}
  .tbl td:first-child::before,
  .tbl td:not([data-label])::before,.tbl td[data-label=""]::before{display:none}
  /* Une cellule sans en-tête (pastille, boutons d'action) se range à droite. */
  .tbl td[data-label=""]:not(:first-child){justify-content:flex-end}
  .tbl td:empty{display:none}
  /* Ligne d'état (« Aucune alerte. », « Chargement… ») : pleine largeur. */
  .tbl td[colspan]{display:block;text-align:center}
  .tbl td.empty{padding:36px 8px}
  .tbl tr:hover td,.tbl tbody tr:hover td,.tbl tr.clik:hover td{background:none}
  .tbl tr.clik:active{background:rgba(255,255,255,.05)}
  .tbl td .inp,.tbl td .sel{flex:1 1 auto;min-width:0}
  /* Les petits boutons d'une ligne (×, ✎) deviennent des cibles au doigt. */
  .tbl td button:not(.btn){min-width:40px;min-height:40px}
  .tbl .num,.tbl td.num{text-align:right}
}

/* Le doigt n'a pas de survol : une infobulle au survol reste affichée après
   le tap, par-dessus le contenu. Restreint aux LARGES écrans — sous 860 px le
   « tip » n'est plus une infobulle mais le libellé du bouton, et `:hover`
   l'emporterait en spécificité : taper une entrée du tiroir en aurait effacé
   le texte. */
@media(hover:none) and (min-width:861px){ .nav .np:hover .tip{opacity:0} }
@media(hover:none){ #navtip{display:none !important} }

/* ══════════════════════════════════════════════════════════
   POLISH — profondeur, mouvement, états. S'applique aux 14 pages.
   Toutes les animations sont sur transform/opacity (composées par le GPU)
   et respectent prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */

/* Apparition douce du contenu de page */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.content>*{animation:riseIn .42s cubic-bezier(.22,.8,.24,1) both}
.content>*:nth-child(1){animation-delay:.02s}
.content>*:nth-child(2){animation-delay:.08s}
.content>*:nth-child(3){animation-delay:.14s}
.content>*:nth-child(4){animation-delay:.20s}

/* KPI : relief au survol + chiffre tabulaire (pas de sautillement) */
.kpi{transition:border-color .18s,background .18s,transform .18s}
.kpi:hover{border-color:rgba(255,255,255,.20);transform:translateY(-2px)}
.kpi .n{font-variant-numeric:tabular-nums}

/* Cartes */
.card{transition:border-color .18s}
.card:hover{border-color:rgba(255,255,255,.16)}

/* Tableaux : lignes plus vivantes, en-têtes nets */
.tbl tbody tr{transition:background .14s}
.tbl tbody tr:hover td{background:rgba(255,255,255,.045)}
.tbl td,.tbl th{transition:none}
.tbl .mono{font-variant-numeric:tabular-nums}

/* Boutons : retour tactile */
.btn{transition:background .15s,border-color .15s,transform .12s}
.btn:hover{border-color:rgba(255,255,255,.20)}
.btn:active{transform:scale(.975)}
.seg button{transition:background .14s,color .14s}
.seg button:hover:not(.on){color:var(--ink);background:rgba(255,255,255,.05)}

/* Champs : anneau de focus net, cohérent avec l'accent blanc */
.inp,.sel{transition:border-color .16s,background .16s,box-shadow .16s}
.inp:focus,.sel:focus{box-shadow:0 0 0 3px rgba(255,255,255,.08)}

/* Puces d'état : lisibilité renforcée */
.tag{transition:background .14s}
.puck{font-variant-numeric:tabular-nums}

/* Rail de navigation : glissement de l'indicateur */
.nav .np{transition:background .18s,color .18s,transform .16s}
.nav .np:active{transform:scale(.94)}

/* Barre de défilement discrète */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.20)}

/* Accessibilité : on coupe tout mouvement si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce){
  .content>*{animation:none}
  *{transition-duration:.01ms!important}
}