/* ============================================================================
   Audit quotidien AltaGem — habillage cockpit.

   Reprend les tokens de leondervan.com/c/
   (automation-system/src/cockpit/src/tokens.css). Trois choses à ne pas
   défaire, ce sont elles qui font le look :
     - sombre uniquement, une échelle de 4 gris entre #15161b et #222328 ;
     - aucune ombre, la profondeur vient des gris et des bordures ;
     - une carte est PLUS SOMBRE que la page, pas plus claire.
   ========================================================================= */

:root {
  /* surfaces */
  --bg:            #1c1d23;
  --surface:       #15161b;
  --elevated:      #1e1f24;
  --elevated-2:    #222328;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);

  /* texte : trois niveaux, pas cinq */
  --fg:        #e8e9ee;
  --fg-muted:  #9a9ba4;
  --fg-subtle: #6a6b74;

  /* accent : une seule action primaire par écran */
  --accent:       #e8552f;
  --accent-fg:    #ffffff;
  --accent-hover: #f26440;

  /* couleur-donnée : liée à une valeur, jamais choisie par composant */
  --d-red-bg:     #3a2320;  --d-red-fg:     #e8837a;
  --d-yellow-bg:  #33301a;  --d-yellow-fg:  #d4c163;
  --d-neutral-bg: #232428;  --d-neutral-fg: #9a9ba4;
  --d-green-bg:   #1e2f22;  --d-green-fg:   #6fc98c;
  --d-rust-bg:    #3b2a1e;  --d-rust-fg:    #e8a06a;

  /* gravités de l'audit */
  --g4-bg: var(--d-red-bg);     --g4-fg: var(--d-red-fg);
  --g3-bg: var(--d-yellow-bg);  --g3-fg: var(--d-yellow-fg);
  --g2-bg: var(--d-neutral-bg); --g2-fg: var(--d-neutral-fg);

  /* état système */
  --ok:     #3fb950;  --ok-weak:     rgba(63, 185, 80, 0.14);
  --warn:   #d29922;  --warn-weak:   rgba(210, 153, 34, 0.14);
  --danger: #f85149;  --danger-weak: rgba(248, 81, 73, 0.14);

  --ff:      'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-label: 11px;  --fs-xs: 12.5px; --fs-sm: 13px;
  --fs-body:  14px;  --fs-md: 16px;  --fs-lg: 20px;  --fs-xl: 28px;
  --lh-tight: 1.2;   --lh-body: 1.5;
  --fw-regular: 400; --fw-medium: 500; --fw-semi: 600;
  --tracking-label: 0.06em;
  --tracking-tight: -0.01em;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --row-h: 34px; --topbar-h: 46px;

  --dur-fast: 90ms; --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--ff); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--fg); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  background: var(--elevated-2); border-radius: 5px; border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-subtle); }

/* ---------------------------------------------------------------- boutons */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  padding: 0 var(--sp-3); height: 30px;
  border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-default { border-color: var(--border); color: var(--fg); }
.btn-default:hover:not(:disabled) { background: var(--elevated); border-color: var(--border-strong); }
.btn-ghost { color: var(--fg-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--elevated); color: var(--fg); }
.btn:disabled {
  cursor: not-allowed;
  background: var(--elevated) !important; color: var(--fg-subtle) !important;
  border-color: var(--border) !important;
}
.btn-block { width: 100%; }

/* ----------------------------------------------------------------- champs */
.input {
  width: 100%; height: 30px; padding: 0 var(--sp-2);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-body); color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease);
}
.input::placeholder { color: var(--fg-subtle); }
.input:hover { border-color: var(--border-strong); }
.input:focus { outline: none; border-color: var(--accent); }
textarea.input {
  height: auto; min-height: 76px; padding: var(--sp-2);
  line-height: var(--lh-body); resize: vertical;
}
select.input { width: auto; min-width: 150px; }
.field { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.field-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-muted); }

/* ------------------------------------------------------------- connexion */
.connexion { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-6); }
.connexion form {
  width: 100%; max-width: 340px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6);
}
.connexion h1 { font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-1); }
.connexion .sous { color: var(--fg-muted); font-size: var(--fs-xs); margin-bottom: var(--sp-5); }
/* Sur écran tactile, cet écran est la porte d'entrée : champs et bouton à 44 px,
   la taille d'un doigt, et texte à 16 px, sinon iOS zoome la page dès qu'on
   touche un champ. Le reste de l'application garde sa densité de 30 px. */
@media (pointer: coarse) {
  .connexion .input, .connexion .btn { height: 44px; }
  .connexion .input { font-size: var(--fs-md); }
  .connexion .btn { font-size: var(--fs-body); }
}

/* -------------------------------------------------------------- en-tête */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  min-height: var(--topbar-h); padding: var(--sp-2) var(--sp-4);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.topbar h1 {
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
}
.topbar-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  font-size: var(--fs-xs); color: var(--fg-muted);
}
/* Séparateurs discrets plutôt qu'un simple espace : quatre chiffres collés
   les uns aux autres se lisent mal en un coup d'oeil à 8h30. */
.topbar-meta > span { padding: 0 var(--sp-3); border-left: 1px solid var(--border); }
.topbar-meta > span:first-child { padding-left: 0; border-left: 0; }
.topbar-meta .num { font-family: var(--ff-mono); color: var(--fg); }
.topbar-meta .is-alerte { color: var(--warn); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  display: inline-block; margin-right: var(--sp-1);
}
.dot.is-bad { background: var(--danger); }
.qui { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); }
.qui-label {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle);
}
.qui-nom { color: var(--fg); font-weight: var(--fw-medium); }

/* ------------------------------------------------------------- bandeaux */
.banner {
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border: 1px solid var(--border); background: var(--surface);
  font-size: var(--fs-xs); color: var(--fg-muted); line-height: var(--lh-body);
  margin-bottom: var(--sp-2);
}
.banner strong { color: var(--fg); font-weight: var(--fw-semi); }
.banner.is-warn { border-color: var(--warn); background: var(--warn-weak); color: var(--fg); }
.banner.is-warn strong { color: var(--warn); }
.banner.is-error { border-color: var(--danger); background: var(--danger-weak); color: var(--fg); }
.banner.is-error strong { color: var(--danger); }
code {
  font-family: var(--ff-mono); font-size: 0.9em;
  padding: 1px 5px; border-radius: var(--r-sm);
  background: var(--elevated-2); color: var(--fg); overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- toolbar */
/* Une seule rangée. Cinq bandeaux avant le premier cas, personne ne les lit :
   l'état permanent est passé en pastilles dans l'en-tête, et la doc sur le
   périmètre tablette a rejoint l'onglet Règles où elle est actionnable. */
.toolbar { display: flex; padding: var(--sp-2) var(--sp-5); }
.toolbar .rang {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%;
}
.toolbar .sep-v { width: 1px; height: 16px; background: var(--border); margin: 0 4px; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-2); height: 26px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--fg); }
.chip[aria-selected="true"] {
  border-color: var(--border-strong); color: var(--fg); background: var(--elevated);
}
.chip .n {
  font-family: var(--ff-mono); font-size: var(--fs-label); color: var(--fg-subtle);
}
.chip[aria-selected="true"] .n { color: var(--fg-muted); }
.cout {
  margin-left: auto; white-space: nowrap; font-size: var(--fs-xs);
  color: var(--fg-muted); cursor: help;
}
/* Liste ou grille : sur un grand écran deux colonnes tiennent, sur un cas long
   une seule colonne se lit mieux. Le choix reste dans le navigateur. */
/* Filtres déroulants, même forme que ceux du cockpit : une puce qui ouvre un
   menu, chaque ligne portant son compteur et une coche quand elle est active. */
.filtre { position: relative; }
.filtre-btn {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: 0 var(--sp-2); height: 26px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-size: var(--fs-xs); color: var(--fg-muted); white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filtre-btn:hover { border-color: var(--border-strong); color: var(--fg); }
.filtre-btn.is-set {
  border-color: var(--border-strong); color: var(--fg); background: var(--elevated);
}
.filtre-btn .fleche { color: var(--fg-subtle); font-size: 9px; }
.filtre-btn .valeur { color: var(--fg); font-weight: var(--fw-medium); }
.filtre-menu {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 45;
  min-width: 230px; max-height: 340px; overflow-y: auto; padding: 4px;
  background: var(--elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
@media (max-width: 560px) {
  .filtre-menu { left: auto; right: 0; max-width: calc(100vw - 2 * var(--sp-4)); }
}
.filtre-menu.is-date { padding: var(--sp-3); min-width: 210px; }
.date-l {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-2);
}
.date-l input {
  background: var(--bg); border: 1px solid var(--border-strong); color: var(--fg);
  border-radius: var(--r-sm); padding: 4px 6px; font: inherit; font-size: var(--fs-sm);
  color-scheme: dark;
}
.filtre-menu.is-date .filtre-item { margin-top: var(--sp-2); }

.filtre-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: 5px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--fg); text-align: left;
}
.filtre-item:hover { background: var(--surface); }
.filtre-item .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtre-item .n {
  font-family: var(--ff-mono); font-size: var(--fs-label); color: var(--fg-subtle);
}
.filtre-item .coche { width: 12px; color: var(--accent); }
.filtre-item.is-set .lbl { font-weight: var(--fw-medium); }
.filtres-actifs { display: flex; gap: var(--sp-1); align-items: center; }
.filtre-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: var(--elevated-2); font-size: var(--fs-label); color: var(--fg-muted);
}
.filtre-tag button { color: var(--fg-subtle); line-height: 1; }
.filtre-tag button:hover { color: var(--fg); }

.recherche { width: 165px; height: 26px; font-size: var(--fs-xs); margin-left: var(--sp-2); }
.recherche::-webkit-search-cancel-button { cursor: pointer; }

.dispo { display: none; }
.dispo-btn {
  padding: 0 var(--sp-3); height: 26px; font-size: var(--fs-xs); color: var(--fg-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.dispo-btn + .dispo-btn { border-left: 1px solid var(--border); }
.dispo-btn:hover { background: var(--elevated); color: var(--fg); }
.dispo-btn[aria-selected="true"] { background: var(--elevated); color: var(--fg);
  font-weight: var(--fw-medium); }
.cout .num { font-family: var(--ff-mono); color: var(--fg); font-weight: var(--fw-medium); }

/* ---------------------------------------------------------------- liste */
main { padding: var(--sp-3) var(--sp-5) var(--sp-10); }
.groupe-titre {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--ff-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg);
  margin: var(--sp-5) 0 var(--sp-2);
}
.groupe-titre:after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.groupe-titre .n { color: var(--fg-subtle); font-weight: var(--fw-regular); }
/* Les cartes se rangent en colonnes plutôt que de s'étirer : une ligne de
   texte sur 1600px ne se lit pas. La bascule Liste/Grille de la barre d'outils
   force une colonne quand un cas demande de la place. */
.grille-cas {
  display: grid; gap: var(--sp-2); align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
}
/* Densité choisie à la main : le nombre demandé, exactement. `auto-fill` en
   mettait autant qu'il pouvait, donc « 3 par ligne » en donnait 4 sur un grand
   écran. `minmax(0, 1fr)` autorise la colonne à rétrécir sous la largeur de
   son contenu, sans quoi la page déborde. */
.grille-cas[data-colonnes="1"] { grid-template-columns: minmax(0, 1fr); }
.grille-cas[data-colonnes="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grille-cas[data-colonnes="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grille-cas[data-colonnes="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* En dessous de ces largeurs, une carte devient illisible : on retombe sur
   moins de colonnes quoi qu'ait choisi l'utilisateur. */
@media (max-width: 1500px) {
  .grille-cas[data-colonnes="4"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
  .grille-cas[data-colonnes="3"],
  .grille-cas[data-colonnes="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grille-cas[data-colonnes="2"],
  .grille-cas[data-colonnes="3"],
  .grille-cas[data-colonnes="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* À 3 et 4 colonnes une carte devient étroite : on resserre ce qui peut l'être
   et le texte du SMS passe en plus petit plutôt que de faire déborder la carte. */
.grille-cas[data-colonnes="3"] .card,
.grille-cas[data-colonnes="4"] .card { padding: var(--sp-3); }
.grille-cas[data-colonnes="3"] .card textarea,
.grille-cas[data-colonnes="4"] .card textarea { font-size: var(--fs-xs); min-height: 88px; }
.grille-cas[data-colonnes="4"] .card-title { font-size: var(--fs-xs); min-width: 0; }
.grille-cas[data-colonnes="4"] .actions .btn { padding: 0 var(--sp-2); }
.grille-cas[data-colonnes="4"] .deleguer { display: none; }

.densite { display: inline-flex; align-items: center; margin-left: auto; }
.densite button:first-of-type { border-radius: var(--r-md) 0 0 var(--r-md); }
.densite button:last-of-type { border-radius: 0 var(--r-md) var(--r-md) 0; }
.densite button { border: 1px solid var(--border); }
.densite button + button { border-left: 0; }
.densite button {
  width: 28px; height: 26px; font-family: var(--ff-mono); font-size: var(--fs-label);
  color: var(--fg-muted);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.densite button:hover { background: var(--elevated); color: var(--fg); }
.densite button[aria-selected="true"] {
  background: var(--elevated); color: var(--fg); font-weight: var(--fw-medium);
}

.card {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4);
}
.card:hover { border-color: rgba(255, 255, 255, 0.2); }
.card.is-done { opacity: 0.55; }
.card-head { display: flex; align-items: flex-start; gap: var(--sp-2); flex-wrap: wrap; }
.card-title {
  flex: 1; min-width: 200px;
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}
.pill {
  display: inline-block; padding: 1px var(--sp-2);
  border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  line-height: 1.5; white-space: nowrap;
  background: var(--d-neutral-bg); color: var(--d-neutral-fg);
}
.pill-g4 { background: var(--g4-bg); color: var(--g4-fg); }
.pill-g3 { background: var(--g3-bg); color: var(--g3-fg); }
.pill-g2 { background: var(--g2-bg); color: var(--g2-fg); }
.pill-ok { background: var(--d-green-bg); color: var(--d-green-fg); }
.pill-due { background: var(--d-rust-bg); color: var(--d-rust-fg); }

.card-sub {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--fg-muted);
}
.card-sub .sep { color: var(--fg-subtle); opacity: 0.5; }
.card-sub .who { color: var(--fg); font-weight: var(--fw-medium); }
.tel { font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg); }
.tel.is-missing { color: var(--danger); font-family: var(--ff); font-weight: var(--fw-medium); }

.sms-zone { margin-top: var(--sp-3); }
.sms-label {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle);
  display: block; margin-bottom: var(--sp-1);
}
.compteur {
  margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--fg-subtle);
}
.compteur .num { font-family: var(--ff-mono); }
.compteur.is-over { color: var(--warn); }
.actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.actions .right { margin-left: auto; display: flex; gap: var(--sp-2); }
.deleguer { display: flex; align-items: center; gap: var(--sp-1); }

.details {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--fg-muted);
}
.details dl {
  display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-1) var(--sp-4);
}
.details dt {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle);
  padding-top: 2px;
}
.details dd { color: var(--fg-muted); }

/* --------------------------------------------------------------- états */
.state { text-align: center; padding: var(--sp-10) var(--sp-4); }
.state-title { font-size: var(--fs-body); color: var(--fg-muted); margin-bottom: var(--sp-1); }
.state-body { font-size: var(--fs-xs); color: var(--fg-subtle); max-width: 42ch; margin: 0 auto; }

#toast {
  position: fixed; bottom: var(--sp-5); left: 50%; transform: translateX(-50%);
  background: var(--elevated-2); color: var(--fg);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs);
  z-index: 60; max-width: min(560px, 92vw);
}
#toast.is-error { border-color: var(--danger); background: var(--danger-weak); }

/* ------------------------------------------------------------ mobile */
@media (max-width: 720px) {
  .topbar { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .topbar h1 { width: 100%; font-size: var(--fs-body); }
  .topbar-actions { width: 100%; margin-left: 0; justify-content: space-between; }
  main, .toolbar { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .cout { margin-left: 0; width: 100%; }
  .card { padding: var(--sp-3); }
  .actions .btn { flex: 1 1 auto; }
  .deleguer { width: 100%; }
  .deleguer select.input { flex: 1; min-width: 0; }
  .actions .right { margin-left: 0; width: 100%; }
  .details dl { grid-template-columns: 1fr; }
  .details dd { margin-bottom: var(--sp-2); }
}


/* ---------------------------------------------------- menu des classeurs */
.topbar-actions { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 210px; padding: 4px;
  background: var(--elevated); border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}
.menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; padding: 6px 8px; border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--fg); text-align: left;
}
.menu-item:hover { background: var(--surface); }
.menu-item span:first-child { font-family: var(--ff-mono); }
.menu-n { color: var(--fg-subtle); font-size: var(--fs-label); }

/* ------------------------------------------------------- vues secondaires */
.vues { display: flex; gap: var(--sp-1); }
.vue-onglet {
  padding: 0 var(--sp-2); height: 26px; border-radius: var(--r-md);
  border: 1px solid transparent; color: var(--fg-muted); font-size: var(--fs-xs);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.vue-onglet:hover { background: var(--elevated); color: var(--fg); }
.vue-onglet[aria-selected="true"] {
  background: var(--elevated); color: var(--fg); border-color: var(--border-strong);
  font-weight: var(--fw-medium);
}

/* --------------------------------------------------------------- règles */
.bloc {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
/* Même principe pour les règles : elles se rangent côte à côte plutôt que de
   faire courir un texte de SMS sur toute la largeur. */
.grille-regles {
  display: grid; gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr));
  align-items: start;
}
.grille-regles .regle { margin-bottom: 0; }
/* Les bandeaux et le texte explicatif restent à une largeur de lecture. */
.banner, .bloc-aide, .state-body { max-width: 105ch; }
.bloc-titre {
  font-size: var(--fs-md); font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight); margin-bottom: var(--sp-1);
}
.bloc-aide { font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: var(--sp-4); }
.grille-seuils {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: var(--sp-3);
}
.seuil-label { display: block; font-size: var(--fs-xs); color: var(--fg-muted);
  margin-bottom: var(--sp-1); }
.seuil-aide { font-size: var(--fs-label); color: var(--fg-subtle); margin-top: 3px;
  line-height: 1.45; }

.regle {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-2); background: var(--bg);
}
.regle.is-off { opacity: 0.5; }
.regle.is-faux { border-color: var(--danger); }

/* Les variables ne se tapent pas, elles s'insèrent : une faute de frappe
   partirait telle quelle dans le SMS d'un technicien. */
.vars { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; margin-top: 6px; }
.vars-label {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle);
  margin-right: 2px;
}
.var {
  font-family: var(--ff-mono); font-size: var(--fs-label);
  padding: 2px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--elevated); color: var(--fg-muted);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.var:hover { border-color: var(--accent); color: var(--accent); }
.var-erreur {
  margin-top: 6px; font-size: var(--fs-xs); color: var(--danger);
  background: var(--danger-weak); border-radius: var(--r-sm); padding: 5px 8px;
}
.regle-tete { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.regle-num {
  font-family: var(--ff-mono); font-size: var(--fs-xs); color: var(--fg-subtle);
  min-width: 22px;
}
.regle-nom { flex: 1; min-width: 180px; font-size: var(--fs-body);
  font-weight: var(--fw-medium); }
.regle-cond {
  font-size: var(--fs-xs); color: var(--fg-muted); margin: var(--sp-2) 0 0;
  padding-left: 30px;
}
.regle-champs { padding-left: 30px; margin-top: var(--sp-2); }
.regle-fige {
  font-size: var(--fs-xs); color: var(--fg-subtle); font-style: italic;
  padding-left: 30px; margin-top: var(--sp-2);
}
.interrupteur { display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-xs); color: var(--fg-muted); cursor: pointer; }
input[type=checkbox] {
  appearance: none; width: 15px; height: 15px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--bg); cursor: pointer;
  display: grid; place-content: center; vertical-align: -2px;
}
input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.barre-enregistrer {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
}
.barre-enregistrer .info { font-size: var(--fs-xs); color: var(--fg-muted); flex: 1; }

/* -------------------------------------------------------- récapitulatif */
/* Objectif : tout tenir dans un écran, sans défilement horizontal. Les colonnes
   de règles sont numérotées et étroites, la légende sous le tableau les nomme. */


.recap-cadre {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
table.recap { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.recap th {
  font-family: var(--ff-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--fg-subtle);
  text-align: left; padding: var(--sp-2) var(--sp-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.recap td {
  padding: var(--sp-2); border-bottom: 1px solid var(--border);
  color: var(--fg-muted); font-size: var(--fs-xs); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
table.recap tbody tr:last-child td { border-bottom: 0; }
table.recap tbody tr:hover td { background: var(--elevated); }

/* Largeurs calibrées. Le nom est borné : en `auto` il avalait toute la place
   restante et on ne suivait plus une ligne jusqu'à ses chiffres. Le surplus
   éventuel se répartit sur toutes les colonnes, pas sur une seule. */
table.recap .fige { width: 230px; }
table.recap .tot  { width: 92px; }
table.recap .r    { width: 52px; text-align: center; }
table.recap .e    { width: 92px; text-align: center; }
table.recap .d    { width: 76px; text-align: right; }
table.recap th.r, table.recap th.e, table.recap th.d { text-align: center; }
table.recap th.d { text-align: right; }

table.recap td.nom { color: var(--fg); font-weight: var(--fw-medium); font-size: var(--fs-body); }
table.recap td.r, table.recap td.e { font-family: var(--ff-mono); color: var(--fg); }
table.recap td.vide { color: transparent; }
table.recap td.e.ok  { color: var(--d-green-fg); }
table.recap td.e.att { color: var(--d-yellow-fg); }
table.recap td.d { font-family: var(--ff-mono); color: var(--fg-subtle); font-size: var(--fs-label); }

/* le total porte une petite jauge : on repère les cas lourds sans lire les chiffres */
table.recap td.tot { position: relative; font-family: var(--ff-mono); color: var(--fg); }
table.recap td.tot .jauge {
  position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%);
  height: 4px; width: calc(var(--part) * 0.42); max-width: 42px;
  background: var(--accent); border-radius: 2px; opacity: .55;
}
table.recap td.tot .n { position: relative; margin-left: 46px; }

/* Le détail daté d'une personne, replié par défaut. « 4 fois » ne dit pas
   quand : la question suivante est toujours « à quelles dates ». */
table.recap tr.ligne { cursor: pointer; }
table.recap tr.ligne.is-ouvert td { background: var(--elevated); }
table.recap tr.ligne.is-ouvert td.nom { box-shadow: inset 2px 0 0 var(--accent); }
table.recap tr.detail td { padding: 0; background: var(--bg); }
.occurrences { display: flex; flex-direction: column; padding: var(--sp-2) var(--sp-3); gap: 3px; }
.occ {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--fg-muted);
}
.occ-date {
  font-family: var(--ff-mono); color: var(--fg); min-width: 46px;
}
.occ-lib { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.occ-statut { color: var(--fg-subtle); font-size: var(--fs-label); white-space: nowrap; }

.legende {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3); padding: 0 var(--sp-1);
  font-size: var(--fs-xs); color: var(--fg-muted);
}
.legende span { display: inline-flex; align-items: baseline; gap: 5px; }
.legende b {
  font-family: var(--ff-mono); font-weight: var(--fw-medium); color: var(--fg);
  background: var(--elevated-2); border-radius: var(--r-sm); padding: 0 5px;
}
.legende i { font-style: normal; color: var(--fg-subtle); font-size: var(--fs-label); }

@media (max-width: 720px) {
  body.vue-recap main { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .recap-cadre { overflow-x: auto; }
  table.recap { table-layout: auto; min-width: 620px; }
  table.recap .fige {
    position: sticky; left: 0; z-index: 2; background: var(--surface);
    border-right: 1px solid var(--border);
  }
  table.recap tbody tr:hover td.fige { background: var(--elevated); }
}