/* ═══════════════════════════════════════════════════════════════════════════
   sante.css — LE POINT.

   La matière vient de hub.css : argent gravé sur noir, gris CHAUDS du
   médaillon, et ⛔ LA COULEUR RÉSERVÉE AU STATUT. Aucun vert décoratif : un
   vert veut dire « ça tient », un ambre « ça dérive », un rouge « ça saigne ».

   ⚠️ Les jetons propres à cet écran sont scopés à `#mod-sante` — comme ceux du
   dashboard le sont à `#mod-tableau`. Deux écrans, deux jeux d'ajustements,
   un seul métal.
   ═══════════════════════════════════════════════════════════════════════════ */
#mod-sante,
#mod-moisson,
#mod-infra {
  --encre: var(--m-arete);
  --encre-2: #9d9992;
  --encre-3: #6d6a65;
  --encre-4: #4a4744;
  --filet-s: rgba(224, 219, 213, .075);
  --filet-s-fort: rgba(224, 219, 213, .14);
  --plaque-s: linear-gradient(180deg, #131312, #0b0b0b);
  --creux-s: #0f0f0e;
  --r-sm: 5px; --r-md: 8px; --r-lg: 11px;
  --dt: cubic-bezier(.16, 1, .3, 1);

  display: block; overflow-y: auto; overflow-x: hidden;
  font-family: var(--f-txt); color: var(--encre-2);
  font-variant-numeric: tabular-nums;
  background: radial-gradient(120% 68% at 12% -14%, rgba(224, 219, 213, .05), transparent 58%), #0a0a0b;
}
:root[data-theme="clair"] #mod-sante,
:root[data-theme="clair"] #mod-moisson,
:root[data-theme="clair"] #mod-infra {
  --encre: #201f1d; --encre-2: #4e5853; --encre-3: #75726c; --encre-4: #a29e97;
  --filet-s: rgba(0, 0, 0, .09); --filet-s-fort: rgba(0, 0, 0, .16);
  --plaque-s: #ffffff; --creux-s: #f2f1ef;
  background: #f7f6f4;
}
#mod-sante[hidden], #mod-moisson[hidden], #mod-infra[hidden] { display: none }
.sa { padding: 26px 30px 60px; max-width: 1280px }
@media (max-width: 640px) { .sa { padding: 16px 14px 40px } }

/* ── la tête de page ───────────────────────────────────────────────────── */
.sa-tete-page { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px }
.sa-tete-page h1 { font: 600 24px/1.1 var(--f-aff); letter-spacing: -.02em; color: var(--encre) }
.sa-tete-page p { margin-top: 5px; font-size: 13px; color: var(--encre-3) }
.sa-droite { display: flex; align-items: center; gap: 12px }
.sa-lu { font: 400 11px var(--f-num); color: var(--encre-4) }
.sa-recharger { font: 500 11.5px var(--f-txt); color: var(--encre-2); cursor: pointer;
  background: var(--plaque-s); border: 1px solid var(--filet-s); border-radius: var(--r-sm);
  padding: 6px 13px; box-shadow: var(--grave); transition: all .2s var(--dt) }
.sa-recharger:hover { border-color: var(--filet-s-fort); color: var(--encre) }
.sa-recharger:disabled { opacity: .45; cursor: progress }

/* ── LE VERDICT — la carte, frappée ────────────────────────────────────── */
.sa-hero { position: relative; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 30px; padding: 30px 32px 28px; margin-bottom: 20px;
  border-radius: var(--r-lg);
  background: var(--brosse), linear-gradient(168deg, #151413 0%, #0c0c0c 48%, #080808 100%);
  border: 1px solid var(--filet-s); box-shadow: var(--ombre-plaque) }
:root[data-theme="clair"] .sa-hero { background: #ffffff }
.sa-hero::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--arete-h) }
.sa-hero-g { flex: 1 1 400px; min-width: 0 }
.sa-sur { font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .28em;
  color: var(--encre-4); display: flex; align-items: center; gap: 10px; margin-bottom: 15px }
.sa-sur .pastille { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 6px;
  background: var(--l-inconnu) }
.sa-hero[data-gravite="3"] .pastille { background: var(--l-mal); box-shadow: 0 0 9px rgba(208,80,79,.8) }
.sa-hero[data-gravite="2"] .pastille { background: var(--l-attente); box-shadow: 0 0 9px rgba(224,176,99,.6) }
.sa-hero[data-gravite="0"] .pastille { background: var(--l-bon); box-shadow: 0 0 9px rgba(74,169,105,.6) }

/* ★ Le titre en métal poli : des lettres FRAPPÉES plutôt qu'écrites. */
.sa-hero h2 { font: 600 clamp(26px, 3.6vw, 40px)/1.06 var(--f-aff); letter-spacing: -.021em;
  max-width: 21ch;
  background: var(--poli); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .95)) }
:root[data-theme="clair"] .sa-hero h2 { background: none; color: var(--encre);
  -webkit-text-fill-color: var(--encre); filter: none }
.sa-hero-phrase { margin-top: 15px; font-size: 14.5px; line-height: 1.62;
  color: var(--encre-2); max-width: 56ch }
.sa-hero-geste { margin-top: 17px; font-size: 13px; line-height: 1.55; color: var(--m-clair);
  border-left: 1px solid var(--filet-s-fort); padding-left: 14px; max-width: 56ch }
.sa-hero-d { display: flex; gap: 10px; flex-wrap: wrap }
.sa-k { min-width: 128px; padding: 14px 16px 13px; border-radius: var(--r-md);
  background: var(--plaque-s); border: 1px solid var(--filet-s); box-shadow: var(--grave) }
.sa-k-n { font: 600 25px/1 var(--f-aff); letter-spacing: -.018em;
  background: var(--poli); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent }
:root[data-theme="clair"] .sa-k-n { background: none; color: var(--encre);
  -webkit-text-fill-color: var(--encre) }
.sa-k-n.alarme { background-image: none; color: var(--l-mal);
  -webkit-text-fill-color: var(--l-mal); filter: none }
.sa-k-l { margin-top: 7px; font-size: 11.5px; color: var(--encre-3); line-height: 1.35;
  max-width: 19ch }

/* ── LA BARRE DE PÉRIODE ───────────────────────────────────────────────
   Un rail de raccourcis, deux champs de date, et une phrase qui dit ce que la
   période NE commande PAS. La couleur reste réservée au statut : le bouton
   actif se signale par son métal, pas par une teinte. */
.sa-periode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  background: var(--plaque-s); border: 1px solid var(--filet-s); border-radius: var(--r-md);
  padding: 11px 14px; margin-bottom: 18px; box-shadow: var(--grave) }
.sa-per-boutons { display: flex; flex-wrap: wrap; gap: 5px }
.sa-per-b { font: 500 11.5px var(--f-txt); color: var(--encre-3); cursor: pointer;
  background: transparent; border: 1px solid var(--filet-s); border-radius: 999px;
  padding: 5px 12px; transition: all .18s var(--dt); white-space: nowrap }
.sa-per-b:hover { border-color: var(--filet-s-fort); color: var(--encre) }
.sa-per-b.on { color: var(--encre); border-color: var(--m); background: var(--creux-s);
  box-shadow: inset 0 1px 0 rgba(224, 219, 213, .07) }
.sa-per-b:focus-visible { outline: 1px solid var(--m); outline-offset: 2px }
.sa-per-dates { display: flex; align-items: center; gap: 7px }
.sa-per-lab { font: 400 11px var(--f-num); color: var(--encre-4) }
.sa-periode input[type="date"] { font: 400 11.5px var(--f-num); color: var(--encre-2);
  background: var(--creux-s); border: 1px solid var(--filet-s); border-radius: var(--r-sm);
  padding: 5px 8px; color-scheme: dark }
:root[data-theme="clair"] .sa-periode input[type="date"] { color-scheme: light }
.sa-periode input[type="date"]:focus-visible { outline: 1px solid var(--m); outline-offset: 1px }
.sa-per-dit { flex: 1 1 100%; font: 400 11px/1.6 var(--f-num); color: var(--encre-4) }
.sa-per-dit b { color: var(--encre-2) }

/* ── LE VERDICT REPLIÉ ────────────────────────────────────────────────────
   Replié, il tient sur une ligne : la lampe, l'exergue, le titre. On garde le
   statut d'un coup d'œil et on rend la place à la courbe. */
.sa-hero-plier { position: absolute; top: 14px; right: 16px; z-index: 2;
  font: 500 10.5px var(--f-txt); color: var(--encre-4); cursor: pointer;
  background: transparent; border: 1px solid var(--filet-s); border-radius: 999px;
  padding: 4px 11px; transition: all .18s var(--dt) }
.sa-hero-plier:hover { color: var(--encre-2); border-color: var(--filet-s-fort) }
.sa-hero-plier:focus-visible { outline: 1px solid var(--m); outline-offset: 2px }

.sa-hero.replie { padding: 14px 18px; align-items: center; gap: 14px }
.sa-hero.replie .sa-sur { margin-bottom: 0; flex: none }
.sa-hero.replie .sa-hero-g { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.sa-hero.replie h2 { font-size: 16px; line-height: 1.3; max-width: none;
  background: none; color: var(--encre); -webkit-text-fill-color: var(--encre); filter: none }
.sa-hero.replie .sa-hero-phrase,
.sa-hero.replie .sa-hero-geste,
.sa-hero.replie .sa-hero-d { display: none }

/* ── les bandes ────────────────────────────────────────────────────────── */
.sa-sec { margin-bottom: 18px }
.sa-rub { display: flex; align-items: center; gap: 12px; margin-bottom: 9px;
  font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .24em;
  color: var(--encre-4) }
.sa-rub::after { content: ''; flex: 1; height: 1px; background: var(--filet-s) }
.sa-row { display: grid; gap: 10px }
.sa-c3 { grid-template-columns: repeat(3, 1fr) }
.sa-mix { grid-template-columns: 1.5fr 1fr 1fr }
@media (max-width: 1080px) { .sa-c3, .sa-mix { grid-template-columns: 1fr 1fr } }
@media (max-width: 720px) { .sa-c3, .sa-mix { grid-template-columns: 1fr } }

.sa-t { background: var(--plaque-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-md); padding: 14px 16px 15px; box-shadow: var(--grave);
  display: flex; flex-direction: column; min-width: 0 }
.sa-t.mal { border-color: rgba(208, 80, 79, .4) }
.sa-t.att { border-color: rgba(224, 176, 99, .32) }
.sa-tete { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 9px }
.sa-tete b { font: 600 15px var(--f-aff); color: var(--encre) }
.sa-lab { font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .2em;
  color: var(--encre-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sa-val { font: 600 29px/1 var(--f-aff); letter-spacing: -.022em; color: var(--encre) }
.sa-val u { text-decoration: none; font-size: 12.5px; margin-left: 4px; font-weight: 500;
  color: var(--encre-4) }
.sa-val.mal { color: var(--l-mal) }
.sa-val.bon { color: var(--l-bon) }
.sa-sous { font: 400 11px/1.6 var(--f-num); color: var(--encre-3); margin-top: 8px }
.sa-sous em { font-style: normal; color: var(--encre-2) }
.sa-sous .dn { color: var(--l-mal) } .sa-sous .up { color: var(--l-bon) }
.sa-spark { margin-top: auto; padding-top: 11px }

/* ── LA COURBE — période contre période ──────────────────────────────────
   Elle occupe toute la largeur et respire : c'est l'objet principal de
   l'écran, pas une vignette posée dans une tuile. */
.sa-cb-tete { display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 16px 30px; margin-bottom: 4px }
.sa-cb-n { font: 600 46px/1 var(--f-aff); letter-spacing: -.03em; color: var(--encre) }
.sa-cb-n u { text-decoration: none; font: 400 12px var(--f-num); color: var(--encre-4);
  margin-left: 10px; letter-spacing: 0 }
.sa-cb-ecart { text-align: right }
.sa-cb-pc { font: 600 30px/1 var(--f-aff); letter-spacing: -.025em }
.sa-cb-l { font: 400 11px/1.6 var(--f-num); color: var(--encre-4); margin-top: 6px }
.sa-cb-l b { color: var(--encre-2) }
.sa-cb-plot { background: var(--plaque-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-md); padding: 10px 12px 4px; margin-top: 10px;
  box-shadow: var(--grave) }
.sa-cb-leg { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px;
  font: 400 11.5px var(--f-num); color: var(--encre-3) }
.sa-cb-leg span { display: inline-flex; align-items: center; gap: 8px }
.sa-cb-leg i { width: 16px; height: 3px; border-radius: 2px; flex: none }
.sa-cb-leg i.pointille { background: none !important;
  border-top: 2px dashed var(--m); height: 0 }

/* ── LA CHAÎNE DE KISSBOT ─────────────────────────────────────────────────
   Trois marches, deux taux entre elles. Elle se lit de gauche à droite comme
   le trajet d'une personne : acceptée, à qui on parle, à qui on donne. */
.sa-chaine { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap;
  margin: 12px 0 4px }
.sa-m { flex: 1 1 110px; min-width: 100px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; background: var(--creux-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-sm) }
.sa-m b { font: 600 26px/1 var(--f-aff); letter-spacing: -.02em; color: var(--encre) }
.sa-m span { font: 400 11px var(--f-num); color: var(--encre-3) }
.sa-m u { text-decoration: none; font: 400 10px var(--f-num); color: var(--encre-4) }
.sa-f { flex: 0 1 140px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 1px; padding: 0 8px; text-align: center; position: relative }
.sa-f::before { content: '→'; position: absolute; top: 8px; color: var(--encre-4); font-size: 13px }
.sa-f span { font: 400 10px var(--f-num); color: var(--encre-4); margin-top: 20px }
.sa-f b { font: 600 17px var(--f-num); color: var(--encre-2) }
.sa-f b.bas { color: var(--l-attente) }
.sa-f u { text-decoration: none; font: 400 9.5px var(--f-num); color: var(--encre-4) }
@media (max-width: 760px) {
  .sa-chaine { flex-direction: column }
  .sa-f { flex-basis: auto; padding: 6px 0 }
  .sa-f::before { content: '↓'; position: static }
  .sa-f span { margin-top: 0 }
}

/* ── pastille d'état ───────────────────────────────────────────────────── */
.sa-etat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--filet-s-fort);
  color: var(--encre-3) }
.sa-etat i { width: 5px; height: 5px; border-radius: 50%; background: var(--l-inconnu) }
.sa-etat.bon { color: var(--l-bon); border-color: rgba(74, 169, 105, .38) }
.sa-etat.bon i { background: var(--l-bon) }
.sa-etat.att { color: var(--l-attente); border-color: rgba(224, 176, 99, .38) }
.sa-etat.att i { background: var(--l-attente) }
.sa-etat.mal { color: var(--l-mal); border-color: rgba(208, 80, 79, .42) }
.sa-etat.mal i { background: var(--l-mal) }

/* ── jauges ────────────────────────────────────────────────────────────── */
.sa-jauges { display: grid; gap: 6px; margin-top: 11px }
.sa-ga { display: grid; grid-template-columns: 66px 1fr 96px; gap: 9px; align-items: center;
  font: 400 10.5px var(--f-num); color: var(--encre-3) }
.sa-ga > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sa-ga .bar { height: 5px; background: var(--creux-s); border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5) }
.sa-ga .bar i { display: block; height: 100%; border-radius: 3px; background: var(--m) }
.sa-ga.att .bar i { background: var(--l-attente) }
.sa-ga.bon .bar i { background: var(--l-bon) }
.sa-ga em { font-style: normal; text-align: right; color: var(--encre-2) }

/* ── la pile des places ────────────────────────────────────────────────── */
.sa-pile { display: flex; height: 32px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--creux-s); margin: 2px 0 10px }
.sa-pile > div { display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--f-num); color: #0a0a0b; cursor: default; transition: filter .15s }
:root[data-theme="clair"] .sa-pile > div { color: #fbfcfa }
.sa-pile > div + div { margin-left: 2px }
.sa-pile > div:hover { filter: brightness(1.18) }
.sa-leg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 5px 14px; font: 400 11.5px var(--f-num); color: var(--encre-3) }
.sa-leg span { display: flex; align-items: center; gap: 6px; white-space: nowrap }
.sa-leg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
.sa-leg b { color: var(--encre); font-weight: 600 }

/* ── le tunnel ─────────────────────────────────────────────────────────── */
.sa-tun { display: grid; gap: 8px }
.sa-et { display: grid; grid-template-columns: 116px 1fr 108px; gap: 11px; align-items: center;
  font: 400 11.5px var(--f-num) }
@media (max-width: 560px) { .sa-et { grid-template-columns: 90px 1fr 80px; font-size: 10.5px } }
.sa-et .nm { color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sa-et .bar { height: 17px; background: var(--creux-s); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5) }
.sa-et .bar i { display: block; height: 100%; border-radius: 4px; background: var(--m); opacity: .6 }
.sa-et.fin .bar i { background: var(--m-clair); opacity: 1 }
.sa-et .n { text-align: right; color: var(--encre); font-weight: 600 }
.sa-et .n u { text-decoration: none; color: var(--encre-4); font-weight: 400;
  font-size: 10px; display: block }
.sa-taux { display: grid; grid-template-columns: 116px 1fr; gap: 11px;
  font: 400 10.5px var(--f-num); color: var(--encre-4) }
.sa-taux span:last-child { color: var(--encre-3) }

/* ── le dépliant ───────────────────────────────────────────────────────── */
#mod-sante details, #mod-moisson details { margin-top: 11px; border-top: 1px solid var(--filet-s); padding-top: 10px }
#mod-sante summary, #mod-moisson summary { font: 400 11px var(--f-num); color: var(--encre-2); cursor: pointer;
  list-style: none; padding: 3px 0 }
#mod-sante summary::-webkit-details-marker,
#mod-moisson summary::-webkit-details-marker { display: none }
#mod-sante summary::before { content: '▸  '; color: var(--encre-4) }
#mod-sante details[open] > summary::before { content: '▾  ' }
#mod-sante summary:focus-visible { outline: 1px solid var(--m); outline-offset: 3px }
.sa-det { background: var(--plaque-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-md); padding: 4px 16px 12px; margin-top: 10px; border-top-width: 1px }
.sa-det-corps { padding-top: 12px }
.sa-det { margin-top: 10px }
#mod-sante .sa-det { border-top: 1px solid var(--filet-s) }

/* ── les sources ───────────────────────────────────────────────────────── */
.sa-org { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px }
.sa-o { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  background: var(--creux-s); border: 1px solid var(--filet-s); border-radius: var(--r-sm);
  font-size: 12.5px }
.sa-o i { width: 6px; height: 6px; border-radius: 50%; background: var(--l-bon); flex: none }
.sa-o.perime i { background: var(--l-attente) }
.sa-o.jamais i { background: var(--l-mal) }
.sa-o span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--encre-2) }
.sa-o b { font: 500 10.5px var(--f-num); color: var(--encre-4) }

/* ── les graphes ───────────────────────────────────────────────────────── */
.sa-plot { position: relative; margin-top: 6px }
.sa-plot svg { display: block; width: 100%; height: auto; overflow: visible }
.sa-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--encre); color: #0a0a0b; font: 500 10.5px var(--f-num);
  padding: 4px 8px; border-radius: 3px; white-space: nowrap;
  transform: translate(-50%, -140%); z-index: 5 }
:root[data-theme="clair"] .sa-tip { color: #fbfcfa }

/* ── notes et pied ─────────────────────────────────────────────────────── */
.sa-note { font: 400 11.5px/1.7 var(--f-txt); color: var(--encre-3); margin-top: 12px;
  border-left: 2px solid var(--filet-s); padding-left: 14px; max-width: 86ch }
.sa-note b { color: var(--encre-2) }
.sa-pied { font: 400 11px/1.9 var(--f-num); color: var(--encre-4); margin-top: 22px;
  padding-top: 14px; border-top: 1px solid var(--filet-s); max-width: 100ch }
.sa-pied b { color: var(--encre-3) }
.sa-attente { padding: 60px 30px; color: var(--encre-3); font-size: 14px }

/* ── LES MACHINES : UNE COLONNE PAR MACHINE, UNE LIGNE PAR QUESTION ───────
   L'écart se voit sans calculer de tête. Une valeur plus fraîche qu'une autre
   porte son âge collé au chiffre, et se grise. */
.in-hero { margin-bottom: 18px }
.in-tw { overflow-x: auto; border: 1px solid var(--filet-s); border-radius: var(--r-md);
  background: var(--plaque-s); box-shadow: var(--grave) }
table.in-comp { border-collapse: collapse; width: 100%; min-width: 520px }
table.in-comp th { padding: 14px 16px 12px; text-align: left; vertical-align: bottom;
  border-bottom: 1px solid var(--filet-s); background: var(--creux-s) }
table.in-comp th b { display: block; font: 600 17px var(--f-aff); color: var(--encre) }
table.in-comp th .sa-etat { margin-top: 6px }
table.in-comp th.q { width: 34%; min-width: 180px; background: transparent }
table.in-comp td { padding: 11px 16px; border-bottom: 1px solid var(--filet-s);
  vertical-align: baseline }
table.in-comp tbody tr:last-child td { border-bottom: 0 }
table.in-comp tbody tr:hover td { background: var(--creux-s) }
table.in-comp td.q { width: 34%; color: var(--encre-3); font: 400 13px var(--f-txt) }
table.in-comp td.q u { display: block; text-decoration: none; font: 400 10.5px var(--f-num);
  color: var(--encre-4); margin-top: 2px }
table.in-comp td.v b { font: 600 19px var(--f-num); color: var(--encre);
  font-variant-numeric: tabular-nums }
table.in-comp td.v b.mal { color: var(--l-mal) }
table.in-comp td.v b.vieux { color: var(--encre-3) }
table.in-comp td.v span { display: block; font: 400 10.5px var(--f-num); color: var(--encre-4);
  margin-top: 2px }
table.in-comp td.v u.vieux { display: block; text-decoration: none; margin-top: 3px;
  font: 400 10px var(--f-num); color: var(--l-attente) }
.in-inconnu { font: 400 13px var(--f-txt) !important; color: var(--encre-4) !important;
  font-style: italic }
table.in-comp th.muette b { color: var(--encre-3) }

.in-courbes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 10px }
.in-leg2 { font: 400 10px var(--f-num); color: var(--encre-4) }
.in-plot { margin-top: 8px }
.in-coupures { margin-top: 10px; border-top: 1px solid var(--filet-s); padding-top: 8px }
.in-c { display: flex; align-items: baseline; gap: 10px; padding: 3px 0;
  font: 400 11px var(--f-num); color: var(--encre-3) }
.in-c b { color: var(--l-mal); font-weight: 600; min-width: 48px }
.in-c u { text-decoration: none; color: var(--l-attente); font-size: 10px }
.in-regie { margin-top: 14px; border-left: 2px solid var(--filet-s); padding-left: 14px }

/* ── pastille d'état ───────────────────────────────────────────────────── */
.sa-etat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .14em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--filet-s-fort);
  color: var(--encre-3) }
.sa-etat i { width: 5px; height: 5px; border-radius: 50%; background: var(--l-inconnu) }
.sa-etat.bon { color: var(--l-bon); border-color: rgba(74, 169, 105, .38) }
.sa-etat.bon i { background: var(--l-bon) }
.sa-etat.att { color: var(--l-attente); border-color: rgba(224, 176, 99, .38) }
.sa-etat.att i { background: var(--l-attente) }
.sa-etat.mal { color: var(--l-mal); border-color: rgba(208, 80, 79, .42) }
.sa-etat.mal i { background: var(--l-mal) }

/* ── jauges ────────────────────────────────────────────────────────────── */
.sa-jauges { display: grid; gap: 6px; margin-top: 11px }
.sa-ga { display: grid; grid-template-columns: 66px 1fr 96px; gap: 9px; align-items: center;
  font: 400 10.5px var(--f-num); color: var(--encre-3) }
.sa-ga > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.sa-ga .bar { height: 5px; background: var(--creux-s); border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5) }
.sa-ga .bar i { display: block; height: 100%; border-radius: 3px; background: var(--m) }
.sa-ga.att .bar i { background: var(--l-attente) }
.sa-ga.bon .bar i { background: var(--l-bon) }
.sa-ga em { font-style: normal; text-align: right; color: var(--encre-2) }

/* ── la pile des places ────────────────────────────────────────────────── */
.sa-pile { display: flex; height: 32px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--creux-s); margin: 2px 0 10px }
.sa-pile > div { display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--f-num); color: #0a0a0b; cursor: default; transition: filter .15s }
:root[data-theme="clair"] .sa-pile > div { color: #fbfcfa }
.sa-pile > div + div { margin-left: 2px }
.sa-pile > div:hover { filter: brightness(1.18) }
.sa-leg { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 5px 14px; font: 400 11.5px var(--f-num); color: var(--encre-3) }
.sa-leg span { display: flex; align-items: center; gap: 6px; white-space: nowrap }
.sa-leg i { width: 8px; height: 8px; border-radius: 2px; flex: none }
.sa-leg b { color: var(--encre); font-weight: 600 }

/* ── le tunnel ─────────────────────────────────────────────────────────── */
.sa-tun { display: grid; gap: 8px }
.sa-et { display: grid; grid-template-columns: 116px 1fr 108px; gap: 11px; align-items: center;
  font: 400 11.5px var(--f-num) }
@media (max-width: 560px) { .sa-et { grid-template-columns: 90px 1fr 80px; font-size: 10.5px } }
.sa-et .nm { color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.sa-et .bar { height: 17px; background: var(--creux-s); border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5) }
.sa-et .bar i { display: block; height: 100%; border-radius: 4px; background: var(--m); opacity: .6 }
.sa-et.fin .bar i { background: var(--m-clair); opacity: 1 }
.sa-et .n { text-align: right; color: var(--encre); font-weight: 600 }
.sa-et .n u { text-decoration: none; color: var(--encre-4); font-weight: 400;
  font-size: 10px; display: block }
.sa-taux { display: grid; grid-template-columns: 116px 1fr; gap: 11px;
  font: 400 10.5px var(--f-num); color: var(--encre-4) }
.sa-taux span:last-child { color: var(--encre-3) }

/* ── le dépliant ───────────────────────────────────────────────────────── */
#mod-sante details, #mod-moisson details { margin-top: 11px; border-top: 1px solid var(--filet-s); padding-top: 10px }
#mod-sante summary, #mod-moisson summary { font: 400 11px var(--f-num); color: var(--encre-2); cursor: pointer;
  list-style: none; padding: 3px 0 }
#mod-sante summary::-webkit-details-marker,
#mod-moisson summary::-webkit-details-marker { display: none }
#mod-sante summary::before { content: '▸  '; color: var(--encre-4) }
#mod-sante details[open] > summary::before { content: '▾  ' }
#mod-sante summary:focus-visible { outline: 1px solid var(--m); outline-offset: 3px }
.sa-det { background: var(--plaque-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-md); padding: 4px 16px 12px; margin-top: 10px; border-top-width: 1px }
.sa-det-corps { padding-top: 12px }
.sa-det { margin-top: 10px }
#mod-sante .sa-det { border-top: 1px solid var(--filet-s) }

/* ── les sources ───────────────────────────────────────────────────────── */
.sa-org { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 6px }
.sa-o { display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  background: var(--creux-s); border: 1px solid var(--filet-s); border-radius: var(--r-sm);
  font-size: 12.5px }
.sa-o i { width: 6px; height: 6px; border-radius: 50%; background: var(--l-bon); flex: none }
.sa-o.perime i { background: var(--l-attente) }
.sa-o.jamais i { background: var(--l-mal) }
.sa-o span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--encre-2) }
.sa-o b { font: 500 10.5px var(--f-num); color: var(--encre-4) }

/* ── les graphes ───────────────────────────────────────────────────────── */
.sa-plot { position: relative; margin-top: 6px }
.sa-plot svg { display: block; width: 100%; height: auto; overflow: visible }
.sa-tip { position: absolute; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--encre); color: #0a0a0b; font: 500 10.5px var(--f-num);
  padding: 4px 8px; border-radius: 3px; white-space: nowrap;
  transform: translate(-50%, -140%); z-index: 5 }
:root[data-theme="clair"] .sa-tip { color: #fbfcfa }

/* ── notes et pied ─────────────────────────────────────────────────────── */
.sa-note { font: 400 11.5px/1.7 var(--f-txt); color: var(--encre-3); margin-top: 12px;
  border-left: 2px solid var(--filet-s); padding-left: 14px; max-width: 86ch }
.sa-note b { color: var(--encre-2) }
.sa-pied { font: 400 11px/1.9 var(--f-num); color: var(--encre-4); margin-top: 22px;
  padding-top: 14px; border-top: 1px solid var(--filet-s); max-width: 100ch }
.sa-pied b { color: var(--encre-3) }
.sa-attente { padding: 60px 30px; color: var(--encre-3); font-size: 14px }

/* ── LES MACHINES ─────────────────────────────────────────────────────────
   La place d'abord, en gros ; les jauges ensuite ; la forme sur 24 h en bas. */
.in-hero { margin-bottom: 18px }
.in-places { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 10px 0 2px }
.in-places b { font: 600 30px/1 var(--f-aff); letter-spacing: -.025em; color: var(--encre) }
.in-places b.mal { color: var(--l-mal) }
.in-places span { font: 400 11px var(--f-num); color: var(--encre-3); margin-right: 8px }
.in-places .in-rien { font-style: italic }
.in-plot { margin-top: 12px }
.in-leg { display: flex; align-items: center; gap: 4px; margin-top: 4px;
  font: 400 10px var(--f-num); color: var(--encre-4) }
.in-leg i { display: inline-block; width: 12px; height: 2px; margin-right: 4px; vertical-align: 2px }
.in-leg i.plein { background: var(--m-arete); height: 2.5px }
.in-leg i.cpu { background: var(--l-attente) }
.in-leg i.coupe { background: var(--l-mal); opacity: .35; height: 9px; width: 7px }
.in-muette { opacity: .78 }
.in-coupures { margin-top: 12px; border-top: 1px solid var(--filet-s); padding-top: 10px }
.in-c { display: flex; align-items: baseline; gap: 10px; padding: 4px 0;
  font: 400 11px var(--f-num); color: var(--encre-3) }
.in-c b { color: var(--l-mal); font-weight: 600; min-width: 52px }
.in-c u { text-decoration: none; color: var(--l-attente); font-size: 10px }

/* ── ADD LEADS : le bandeau d'âge et les comptes muets ─────────────────── */
.mo-age { margin-bottom: 20px }
.mo-muets { display: grid; gap: 5px; margin-top: 10px }
.mo-muet { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline;
  padding: 7px 10px; background: var(--creux-s); border: 1px solid var(--filet-s);
  border-radius: var(--r-sm); font: 400 11.5px var(--f-num) }
.mo-muet b { color: var(--encre); font-weight: 600 }
.mo-muet span { color: var(--encre-3) }
.sa-erreur { display: grid; gap: 7px; padding: 22px; border-radius: var(--r-md);
  background: rgba(208, 80, 79, .07); border: 1px solid rgba(208, 80, 79, .3);
  color: var(--encre-2); font-size: 13.5px }
.sa-erreur b { color: var(--l-mal); font: 600 15px var(--f-aff) }

/* ═══ LA BANQUE D'AJOUT (Add Leads) ═════════════════════════════════════
   Quatre réponses possibles, quatre tons — et le ton porte le SENS, jamais
   la décoration : ambre = « il n'a rien reçu, agis », vert = « c'est fait »,
   neutre = « n'y touche pas », rouge = « je ne peux pas répondre ».
   ⛔ Aucun ton ne dit « refusé » : ce cas n'existe pas dans la donnée. */
#mod-moisson .mo-banque { padding: 16px 18px }
#mod-moisson .mo-ch { display: flex; gap: 8px; max-width: 520px }
#mod-moisson .mo-ch input {
  flex: 1; font-family: var(--f-num); font-size: 13px; padding: 9px 12px;
  border-radius: var(--r-md); border: 1px solid var(--filet-s-fort);
  background: var(--creux-s); color: var(--encre);
}
#mod-moisson .mo-ch input:focus {
  outline: none; border-color: var(--kp-accent);
  box-shadow: 0 0 0 3px var(--kp-accent-voile);
}
#mod-moisson .mo-ch-b {
  font-family: var(--f-num); font-size: 12.5px; padding: 9px 16px;
  border-radius: var(--r-md); border: 0; cursor: pointer;
  background: var(--kp-accent); color: #0b0b0b;
}
#mod-moisson .mo-ch-b:disabled { opacity: .5; cursor: default }
#mod-moisson .mo-rep:empty { display: none }
#mod-moisson .mo-r {
  margin-top: 14px; padding: 13px 16px; border-radius: var(--r-md);
  background: var(--creux-s); border-left: 2px solid var(--m-arete);
}
#mod-moisson .mo-r.bon { border-left-color: var(--l-bon) }
#mod-moisson .mo-r.att { border-left-color: var(--l-attente) }
#mod-moisson .mo-r.mal { border-left-color: var(--l-mal) }
#mod-moisson .mo-r.neutre { border-left-color: var(--kp-accent) }
#mod-moisson .mo-r-t {
  margin: 0 0 7px; font-family: var(--f-aff); font-size: 15px; color: var(--encre);
}
#mod-moisson .mo-r.bon .mo-r-t { color: var(--l-bon) }
#mod-moisson .mo-r.att .mo-r-t { color: var(--l-attente) }
#mod-moisson .mo-r.mal .mo-r-t { color: var(--l-mal) }
#mod-moisson .mo-r-l { margin: 0 0 5px; font-size: 12.5px; line-height: 1.5; color: var(--encre-2) }
#mod-moisson .mo-r-l:last-child { margin-bottom: 0; color: var(--encre-4); font-size: 11.5px }
#mod-moisson .mo-r-l b { color: var(--encre); font-weight: 500 }

/* ═══ OÙ SONT MES ADDS — les quatre seaux ═══════════════════════════════
   ⛔ La couleur porte le SENS : vert = devenu ami, cyan = en attente (une
   indécision, pas un échec), gris = état illisible, ambre = jamais retrouvé.
   Aucune part n'est rouge : rien ici n'est un refus. */
#mod-moisson .mo-seaux { margin-top: 12px; padding: 16px 18px }
#mod-moisson .mo-s-tete { margin: 0 0 12px; font-size: 13px; color: var(--encre-2) }
#mod-moisson .mo-s-tete b { color: var(--encre); font-weight: 500 }
#mod-moisson .mo-barre {
  display: flex; height: 26px; border-radius: var(--r-sm); overflow: hidden;
  background: var(--creux-s); gap: 2px;
}
#mod-moisson .mo-b {
  display: grid; place-items: center; min-width: 2px;
  font-family: var(--f-num); font-size: 11px; color: #0b0b0b; font-weight: 500;
}
#mod-moisson .mo-b.bon { background: var(--l-bon) }
#mod-moisson .mo-b.neutre { background: var(--kp-accent) }
#mod-moisson .mo-b.gris { background: var(--m); color: #0b0b0b }
#mod-moisson .mo-b.att { background: var(--l-attente) }
#mod-moisson .mo-leg {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 14px;
}
#mod-moisson .mo-l { padding-left: 10px; border-left: 2px solid var(--m) }
#mod-moisson .mo-l.bon { border-left-color: var(--l-bon) }
#mod-moisson .mo-l.neutre { border-left-color: var(--kp-accent) }
#mod-moisson .mo-l.att { border-left-color: var(--l-attente) }
#mod-moisson .mo-l b { display: block; font: 500 20px var(--f-num); color: var(--encre) }
#mod-moisson .mo-l span { display: block; font-size: 11.5px; color: var(--encre-2); margin-top: 1px }
#mod-moisson .mo-l u { display: block; text-decoration: none; font-size: 10.5px; color: var(--encre-4); margin-top: 2px }

/* L'âge de l'index, collé à la barre de recherche.
   ⛔ `mo-idx`, PAS `mo-age` : cette dernière appartient au grand bandeau du
   relevé, et la réutiliser l'écrasait (1,0,1,0 bat 0,0,1,0). */
#mod-moisson .mo-idx { margin: 8px 0 0; font-size: 11.5px; color: var(--encre-4) }
#mod-moisson .mo-idx.mo-mal { color: var(--l-mal) }
#mod-moisson .mo-mal { color: var(--l-mal) }

/* ═══ LES CORRESPONDANCES PARTIELLES ════════════════════════════════════
   ⛔ Volontairement sobre et BORNÉE À 20 : c'est une aide à retrouver
   quelqu'un, pas un annuaire. Une liste qu'on peut faire défiler longtemps
   invite à parcourir ; une liste courte invite à préciser sa recherche. */
#mod-moisson .mo-proches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px; margin: 10px 0 8px;
}
#mod-moisson .mo-p {
  padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--plaque-s); border-left: 2px solid var(--m);
}
#mod-moisson .mo-p.bon { border-left-color: var(--l-bon) }
#mod-moisson .mo-p.att { border-left-color: var(--l-attente) }
#mod-moisson .mo-p.neutre { border-left-color: var(--kp-accent) }
#mod-moisson .mo-p b { display: block; font: 500 12.5px var(--f-num); color: var(--encre) }
#mod-moisson .mo-p span { display: block; font-size: 11px; color: var(--encre-2); margin-top: 2px }
#mod-moisson .mo-p u { display: block; text-decoration: none; font-size: 10px; color: var(--encre-4) }

/* le dénominateur d'une liste : il doit se lire AVEC le chiffre, pas sous lui */
#mod-moisson .sa-sous-fort {
  margin: 2px 0 8px; font-family: var(--f-num); font-size: 11.5px; color: var(--encre-3);
}

/* ═══ L'HEURE QU'IL EST — le rythme de la journée en cours ═══════════════
   ⬛ La phrase d'abord, le graphe ensuite, le détail en dernier : c'est
   l'ordre dans lequel on lit, et l'ordre dans lequel on a besoin. */
#mod-sante .ry-phrase, .kp-boite .ry-phrase { padding: 16px 18px; background: var(--creux-s);
  border-radius: var(--r-md); border-left: 2px solid var(--kp-accent) }
.ry-dit { margin: 0; font-size: 15px; line-height: 1.5; color: var(--encre-2) }
.ry-dit b { color: var(--encre); font-weight: 500 }
.ry-suite { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--encre-3) }
.ry-suite b { color: var(--encre-2) }
.ry-suite u { text-decoration: none; color: var(--encre-2) }
.ry-suite.ry-att { color: var(--l-attente) }
.ry-haut { color: var(--l-bon) }
.ry-bas { color: var(--l-mal) }

.ry-sec { margin-top: 16px }
.ry-plot svg { width: 100%; height: auto; display: block; overflow: visible }
.ry-leg { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;
  font-size: 11.5px; color: var(--encre-3) }
.ry-leg span { display: inline-flex; align-items: center; gap: 7px }
.ry-leg i { width: 16px; height: 2.5px; border-radius: 2px; flex: none }
.ry-leg i.pointille { height: 0; border-top: 2.5px dashed currentColor;
  background: none !important; color: var(--m-arete) }

.ry-tab { width: 100%; border-collapse: collapse; font-family: var(--f-num); font-size: 12px }
.ry-tab th { text-align: left; font-weight: 400; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre-4); padding: 0 10px 6px 0;
  border-bottom: 1px solid var(--filet-s-fort) }
/* ⛔ UN EN-TÊTE À GAUCHE SUR UNE COLONNE DE CHIFFRES À DROITE FAIT LIRE LA
   MAUVAISE COLONNE. Les trois colonnes numériques alignent leur titre sur
   leurs valeurs — c est la seule façon de savoir ce qu on regarde. */
.ry-tab th:not(:first-child) { text-align: right }
.ry-tab td { padding: 5px 10px 5px 0; border-bottom: 1px solid var(--filet-s); color: var(--encre-2) }
.ry-tab .ry-n { text-align: right; font-variant-numeric: tabular-nums }
.ry-tab .ry-pale { color: var(--encre-4) }
/* ⬛ L'heure courante se repère sans la chercher : c'est la ligne qu'on vient lire. */
.ry-tab .ry-ici td { background: var(--kp-accent-voile); color: var(--encre) }
.ry-tab .ry-ici td:first-child { font-weight: 500 }
.ry-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--encre-4) }
.ry-note b { color: var(--encre-3) }

/* « (journée finie à 342) » — le repère qui situe la projection sans la
   concurrencer : plus petit, plus pâle, entre parenthèses. */
#mod-sante .sa-sous u { text-decoration: none; color: var(--encre-4); font-size: .92em }

/* ═══ LES 4 CHIFFRES DU JOUR — 11/10/2026 ═══════════════════════════════
   Quatre tuiles de front (deux, puis une, quand l'écran rétrécit), et dessous
   le tableau jour par jour. Le tableau défile dans SA boîte : sur un téléphone
   il ne pousse jamais la page en largeur. */
.sa-c4 { grid-template-columns: repeat(4, 1fr) }
/* Les seuils comptent la FENÊTRE, et la barre latérale en garde 258 px : sous
   1360 px quatre tuiles n'ont plus que 208 px et leurs titres se coupent. */
@media (max-width: 1360px) { .sa-c4 { grid-template-columns: 1fr 1fr } }
@media (max-width: 840px) { .sa-c4 { grid-template-columns: 1fr } }
.q4-carte { margin-top: 10px }
.q4-defile { overflow-x: auto; margin-top: 6px }
table.q4-tab { border-collapse: collapse; width: 100%; min-width: 640px;
  font: 400 12.5px var(--f-num); font-variant-numeric: tabular-nums }
table.q4-tab th { padding: 7px 10px; text-align: right; white-space: normal; vertical-align: bottom;
  font: 500 9.5px var(--f-txt); text-transform: uppercase; letter-spacing: .14em;
  color: var(--encre-3); border-bottom: 1px solid var(--filet-s) }
table.q4-tab th:first-child, table.q4-tab td:first-child { text-align: left }
table.q4-tab th[title] { cursor: help }
table.q4-tab td { padding: 7px 10px; text-align: right; white-space: nowrap;
  color: var(--encre-2); border-bottom: 1px solid var(--filet-s) }
table.q4-tab tbody tr:last-child td { border-bottom: 0 }
table.q4-tab tbody tr:hover td { background: var(--creux-s) }
table.q4-tab td.q4-jour { color: var(--encre) }
table.q4-tab td.q4-fort { color: var(--encre); font-weight: 600 }
table.q4-tab td.q4-gris, table.q4-tab td.q4-vide { color: var(--encre-4) }
table.q4-tab td[title] { cursor: help }
table.q4-tab tr.q4-encours td { background: var(--creux-s) }
table.q4-tab tr.q4-encours td.q4-jour { font-weight: 600 }
.q4-plus { font: 500 10.5px var(--f-txt); letter-spacing: .08em; color: var(--encre-3);
  background: transparent; border: 1px solid var(--filet-s); border-radius: 6px;
  padding: 3px 9px; cursor: pointer }
.q4-plus:hover, .q4-plus:focus-visible { color: var(--encre); border-color: var(--encre-3); outline: none }

/* ── LES COMPTES QUI RAPPORTENT (12/10/2026) — même tableau que les 4 chiffres,
   une colonne d'état en plus : une pastille et le mot du berger, à gauche. ── */
.cr-cause { margin-top: 10px }
.cr-cause .sa-sous { margin-top: 0; font-size: 12px; color: var(--encre-2) }
.cr-cause .sa-sous b { color: var(--l-mal); font-weight: 600 }
table.cr-tab { min-width: 560px }
table.cr-tab th:nth-child(-n+3), table.cr-tab td:nth-child(-n+3),
table.cr-tab th:nth-child(n+7), table.cr-tab td:nth-child(n+7) { text-align: left }
table.cr-tab td.cr-etat { white-space: normal; min-width: 160px }
table.cr-tab td.q4-jour small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--encre-3) }
table.cr-tab td.cr-etat small { display: block; margin: 2px 0 0 13px; font-size: 10.5px; color: var(--encre-3) }
table.cr-tab td.cr-etat i { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--l-inconnu) }
table.cr-tab td.cr-etat.bon i { background: var(--l-bon) }
table.cr-tab td.cr-etat.att i { background: var(--l-attente) }
table.cr-tab td.cr-etat.mal i { background: var(--l-mal) }
table.cr-tab td.cr-etat.mal { color: var(--l-mal) }
table.cr-tab tr.cr-mal td.q4-jour { color: var(--l-mal) }

/* ── LA COUVEUSE (12/10/2026) — deux tableaux : par créatrice, puis un par un
   avec les demandes jour par jour et les deux lignes de repère. ── */
table.cv-tab th:first-child, table.cv-tab td:first-child { text-align: left }
table.cv-tab td.cv-mal { color: var(--l-mal) }
table.cv-tab td.q4-jour small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 400; color: var(--encre-3) }
table.cv-un { min-width: 760px }
table.cv-un th:nth-child(-n+3), table.cv-un td:nth-child(-n+3),
table.cv-un th:nth-last-child(-n+2), table.cv-un td:nth-last-child(-n+2) { text-align: left }
table.cv-un td.cv-pente { white-space: nowrap; color: var(--encre-3) }
table.cv-un td.cv-pente.bon { color: var(--l-bon) }
table.cv-un td.cv-pente.att { color: var(--l-attente) }
table.cv-un tr.cv-ref td { background: var(--creux-s); color: var(--encre-2); font-style: italic }
table.cv-un tr.cv-ref td.q4-jour { font-style: normal }
table.cv-un td.cr-etat { white-space: normal; min-width: 150px }
table.cv-un td.cr-etat i { display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; background: var(--l-inconnu) }
table.cv-un td.cr-etat.bon i { background: var(--l-bon) }
table.cv-un td.cr-etat.att i { background: var(--l-attente) }
table.cv-un td.cr-etat.mal i { background: var(--l-mal) }
table.cv-un td.cr-etat.mal { color: var(--l-mal) }


/* ── L'INVENTAIRE (12/10/2026) — trois colonnes : la case, son nombre, ce qu'elle
   veut dire. Les sous-lignes sont en retrait sous leur case. ── */
table.iv-tab { min-width: 520px }
table.iv-tab th:nth-child(3), table.iv-tab td:nth-child(3) { text-align: left }
table.iv-tab td.iv-quoi { white-space: normal; color: var(--encre-3); font-family: var(--f-txt); font-size: 12px }
table.iv-tab td.q4-jour { font-weight: 600 }
table.iv-tab tr.iv-sous td.q4-jour { padding-left: 26px; font-weight: 400; color: var(--encre-2) }
table.iv-tab tr.iv-mal td.q4-jour, table.iv-tab tr.iv-mal td.q4-fort, table.iv-tab tr.iv-mal td:nth-child(2) { color: var(--l-mal); font-weight: 600 }
table.iv-cre { min-width: 600px }
table.iv-cre tr.iv-reste td { color: var(--encre-3); font-style: italic }
table.iv-cre tr.iv-reste td.q4-jour { color: var(--encre-2) }