/* ANIMA · Hors ligne — saisies grisées sans réseau (spec 2026-10-22-hors-ligne § 3.7, js/hors-ligne/saisie.js) et témoin (§ 3.6, js/hors-ligne/temoin.js, préfixe `ht-`).
   `body.hors-reseau` est posé par js/hors-ligne/etat.js. Un contrôle d'écriture marqué `data-saisie` se grise mais reste touchable :
   le toucher est intercepté en JS pour annoncer « Nécessite le réseau » (jamais `pointer-events: none`, qui avalerait le toucher en silence). */
body.hors-reseau [data-saisie] {
  opacity: .45;
  cursor: not-allowed;
}

/* ---- Le témoin : la pastille de la barre haute de la coque du Fil (jetons --f-*, js/fil/coquille.js › .f-top) ----
   Gris quand il n'y a pas de réseau : jamais de rouge, ni d'alarme. L'état se lit aussi par la FORME du point (disque plein = prêt, anneau = sans réseau, demi-disque =
   incomplet, anneau en tirets = impossible), pas par la seule couleur. Cible tactile ≥ 44 px. */
[data-interface="fil"] .ht-pastille {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; max-width: 100%; padding: 0 14px;
  border: 1px solid var(--f-filet); border-radius: 999px; background: var(--f-surface-2); color: var(--f-encre-2);
  font: 500 13px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
[data-interface="fil"] .ht-pastille[hidden] { display: none; }   /* entre deux séjours, en ligne : rien à promettre (le display fixe ci-dessus battrait [hidden]) */
[data-interface="fil"] .ht-pastille:hover { background: var(--f-surface); color: var(--f-encre); }
[data-interface="fil"] .ht-point { flex: none; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: var(--f-encre-3); }
[data-interface="fil"] .ht-pastille[data-etat="pret"] .ht-point { background: var(--f-fait); }
[data-interface="fil"] .ht-pastille[data-etat="incomplet"] .ht-point { background: linear-gradient(90deg, var(--f-attention) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--f-attention); }
[data-interface="fil"] .ht-pastille[data-etat="hors-reseau"] .ht-point { background: transparent; box-shadow: inset 0 0 0 2px var(--f-encre-3); }
[data-interface="fil"] .ht-pastille[data-etat="impossible"] .ht-point { background: transparent; border: 2px dotted var(--f-encre-3); }
[data-interface="fil"] .ht-pastille[data-etat="preparation"] .ht-point { background: transparent; box-shadow: inset 0 0 0 2px var(--f-encre-3); opacity: .6; }
[data-interface="fil"] .ht-texte { overflow: hidden; text-overflow: ellipsis; }
[data-interface="fil"] .ht-texte--court { display: none; }
/* Barre étroite (le menu latéral et la recherche passent en barre basse sous 900 px) : la forme courte, l'heure est dans le panneau. */
@media (max-width: 899px) {
  [data-interface="fil"] .ht-texte--long { display: none; }
  [data-interface="fil"] .ht-texte--court { display: inline; }
  [data-interface="fil"] .ht-pastille { padding-inline: 12px; }
}
/* Téléphone : « Prêt » et « En préparation » se taisent (un point suffit, le nom accessible dit tout) ; ce qui demande un regard reste écrit. */
@media (max-width: 520px) {
  [data-interface="fil"] .ht-pastille[data-etat="pret"], [data-interface="fil"] .ht-pastille[data-etat="preparation"] { padding-inline: 0; justify-content: center; width: 44px; }
  [data-interface="fil"] .ht-pastille[data-etat="pret"] .ht-texte, [data-interface="fil"] .ht-pastille[data-etat="preparation"] .ht-texte { display: none; }
}
@media (max-height: 500px) { [data-interface="fil"] .ht-pastille { min-height: 44px; } }

/* ---- Le panneau de détail (la feuille du kit, .fb-feuille, posée dans <body>) ---- */
.ht-etat { margin: 0 0 4px; font: 600 16px/1.35 Inter, system-ui, sans-serif; color: var(--f-encre); overflow-wrap: anywhere; }
.ht-section { margin-top: 14px; }
.ht-titre { margin: 0 0 6px; font: 500 12px/1.3 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--f-encre-2); }
.ht-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ht-liste li { padding: 8px 12px; border: 1px solid var(--f-filet); border-radius: 12px; background: var(--f-surface-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre); overflow-wrap: anywhere; }
.ht-note { margin: 6px 0 0; font: 400 14px/1.45 Inter, system-ui, sans-serif; color: var(--f-encre-2); overflow-wrap: anywhere; }
.ht-note--manque { color: var(--f-attention); font-weight: 500; }
.ht-note--bouton { align-self: center; margin: 0 4px 0 0; }