/* L'infirmerie (poste sanitaire), native Le Fil (js/infirmerie/ : fiches, fiche d'un jeune, aujourd'hui, allergies, à fournir, baignade, registre des soins, urgences).
   Préfixe fin-, jetons --f-* de css/fil.css. Elle parle le kit du budget (css/fil-budget.css : .fb, .fb-carte, .fb-bouton, .fb-segments, .fb-saisie, .fb-case, .fb-puce, .fb-feuille…) ;
   ce fichier ne porte que ce qui est propre au poste sanitaire. Style de Le Fil : encre, filets, aucune couleur décorative (ambre = soutenue / à surveiller, rouge = critique / urgence,
   sapin = fait), cibles de 44 px et plus, sept tailles de texte (12, 14, 16, 18, 24, 30, 64), aucun effet.
   Remplace css/infirmerie.css (classique, préfixe inf-, supprimé). Les feuilles (.fb-voile) sont posées dans <body> : elles héritent des jetons de <html>. */

.fin [hidden] { display: none !important; }
.fin-contenu { min-width: 0; }
.fin > .fb-carte, .fin > .fin-barre { margin-bottom: 12px; }
.fin .fb-puce[data-etat="urgent"] { color: var(--f-urgent); border-color: var(--f-urgent); }
.fin .fin-pile--une { column-width: auto; column-gap: 0; }
.fin .fin-pile--une > * { break-inside: auto; }
.fin-vide { padding: 4px 0; }

/* ---------- Segments : six rubriques, deux rangées de trois au téléphone ---------- */
.fin-barre { margin-bottom: 12px; }
.fin-segments { flex-wrap: wrap; }
.fin-segment { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.fin-segment-lib { white-space: nowrap; }
.fin-compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 6px; border: 1px solid var(--f-filet); border-radius: 10px; background: var(--f-surface); color: var(--f-encre-2); font: 600 12px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fb-segment[aria-current="page"] .fin-compte { background: var(--f-fond); border-color: var(--f-fond); color: var(--f-encre); }
@media (max-width: 639px) {
  .fin-segment { flex: 1 1 auto; padding: 0 8px; }
}

/* ---------- Urgences : des liens tel: gros et tapables ---------- */
.fin-urg .fb-carte-ligne { align-items: center; margin-bottom: 12px; }
.fin-urg-tete { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; }
.fin-urg-rapide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fin-urg-corps { min-width: 0; }
.fin-urg-ext { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.fin-tel { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; min-height: 56px; padding: 10px 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); color: var(--f-encre); text-decoration: none; }
.fin-tel:hover { background: var(--f-surface); border-color: var(--f-encre-3); }
.fin-tel--ext { flex-direction: column; align-items: flex-start; gap: 0; border-color: var(--f-urgent); }
.fin-tel--ext .fin-tel-txt { flex: none; }
.fin-tel--long { grid-column: 1 / -1; }
.fin-tel-num { flex: none; white-space: nowrap; font: 600 18px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fin-tel--ext .fin-tel-num { color: var(--f-urgent); }
.fin-tel-txt { display: flex; flex: 1 1 90px; flex-direction: column; gap: 2px; min-width: 0; }
.fin-tel-lib { font: 500 14px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-tel-sous { color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-urg-int { min-width: 0; }
.fin-urg-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.fin-urg-ligne { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fin-urg-actions { display: flex; gap: 8px; }
.fin-urg-actions .fb-bouton { flex: 1 1 0; }
.fin-urg .fb-actions { margin-top: 12px; }

/* ---------- Pastille de niveau d'attention (0 à 3) ---------- */
.fin-niv { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--f-filet); border-radius: 10px; background: var(--f-surface); color: var(--f-encre-3); }
.fin-niv-num { font: 600 14px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fin-niv--1 { border-color: var(--f-encre-3); color: var(--f-encre-2); }
.fin-niv--2 { border-color: var(--f-attention); color: var(--f-attention); }
.fin-niv--3 { border-color: var(--f-urgent); background: color-mix(in srgb, var(--f-urgent) 12%, var(--f-surface)); color: var(--f-urgent); }

/* ---------- Liste des fiches : une tuile par jeune, les vigilances en tête ---------- */
.fin-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fin-ligne { min-width: 0; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); }
.fin-ligne--n2 { border-color: var(--f-attention); }
.fin-ligne--n3 { border-color: var(--f-urgent); }
.fin-ligne-bouton { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 18px; background: transparent; color: var(--f-encre); text-align: left; font: inherit; cursor: pointer; }
.fin-ligne-bouton:hover { background: var(--f-surface); }
.fin-ligne-texte { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; }
.fin-ligne-nom { font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-ligne-etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fin-ligne-age { color: var(--f-encre-2); font: 400 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fin-ligne-rappels, .fin-detail-rappels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fin-rappels-lib { color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; }
.fin-rappels-total { margin: 4px 0 0; }
.fin-chevron { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--f-encre-3); border-bottom: 2px solid var(--f-encre-3); transform: rotate(-45deg); }

/* ---------- La fiche d'un jeune ---------- */
.fin-detail-tete { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fb-pile > .fin-detail-tete { column-span: all; }
.fin-retour { padding-left: 4px; }
.fin-retour::before { content: ''; width: 8px; height: 8px; margin: 0 4px 0 8px; border-left: 2px solid var(--f-encre-2); border-bottom: 2px solid var(--f-encre-2); transform: rotate(45deg); }
.fin-detail-titre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fin-detail-nom { margin: 0; font: 600 24px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-detail-rappels { padding: 10px 14px; border: 1px solid var(--f-attention); border-left-width: 3px; border-radius: 14px; }
.fin-carte--vigilance, .fin-carte--urgence { border-left: 3px solid var(--f-urgent); }
.fin-carte--sante { border-left: 3px solid var(--f-attention); }
.fin-att-texte { margin: 8px 0 0; font: 400 16px/1.5 Inter, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.fin-fait { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; min-width: 0; }
.fin-fait + .fin-fait { border-top: 1px solid var(--f-filet); }
.fb-carte-ligne + .fin-fait { margin-top: 4px; }
.fin-fait-lib { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fin-fait-val { margin: 0; font: 400 16px/1.45 Inter, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.fin-fait-val--vide { color: var(--f-encre-3); }
.fin-contact { position: relative; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--f-filet); border-radius: 14px; }
.fin-contact-idx { color: var(--f-encre-2); font: 600 12px/1.4 Inter, system-ui, sans-serif; }
.fin-suivi-ligne { display: flex; align-items: center; gap: 6px 10px; padding: 6px 0; }
.fin-suivi-ligne .fb-puce { flex: none; }
.fin-suivi-ligne.est-fait .fin-suivi-lib { color: var(--f-encre-3); text-decoration: line-through; }
.fin-suivi-lib { flex: 1 1 0; min-width: 0; font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-suivi-heure { flex: none; color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fin-notes { margin: 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.fin-maj { margin: 8px 0 0; }

/* ---------- Choix d'un seul bouton (niveau, aisance, type de soin, suite) : boutons de 44 px ---------- */
.fin-choix { display: flex; flex-wrap: wrap; gap: 8px; }
.fin-choix-bouton { min-height: 44px; padding: 0 16px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 500 14px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.fin-choix-bouton:hover { background: var(--f-surface-2); border-color: var(--f-encre-3); }
.fin-choix-bouton[aria-checked="true"] { border-color: var(--f-encre); background: var(--f-encre); color: var(--f-fond); }
.fin-choix-bouton[aria-checked="true"][data-risque="2"] { border-color: var(--f-attention); background: var(--f-attention); }
.fin-choix-bouton[aria-checked="true"][data-risque="3"] { border-color: var(--f-urgent); background: var(--f-urgent); }
.fin-ajuste .fin-choix-bouton { min-width: 56px; padding: 0; font-variant-numeric: tabular-nums; }
.fin-baignade-edit { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Onglets de suivi : une carte par jeune ---------- */
.fin-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; }
.fin-jeune-carte { min-width: 0; }
.fin-jeune-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 6px; }
.fin-jeune-nom { flex: 1 1 8rem; margin: 0; min-width: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-bg--risque { border-color: var(--f-urgent); }
.fin-bandeau { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--f-attention); border-left-width: 3px; border-radius: 14px; color: var(--f-attention); font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fin-liste--gestes { display: block; margin-top: 8px; }
.fin-geste { border-top: 1px solid var(--f-filet); }
.fin-geste:first-child { border-top: 0; }
.fin-geste .fb-case { padding: 8px 0; }
.fin-geste-sous { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fin-geste-heure { font-variant-numeric: tabular-nums; }
.fin-geste.est-fait .fb-case-lib { color: var(--f-encre-3); text-decoration: line-through; }
.fin-doc-case { border-top: 1px solid var(--f-filet); }

/* ---------- Feuilles (noter un soin, numéro du séjour) ---------- */
.fin-formulaire { display: grid; gap: 14px; margin-top: 4px; }

/* ---------- Registre des soins ---------- */
.fin-noter { min-width: 180px; }
.fin-registre-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fin-registre-outils .fb-saisie { flex: 1 1 220px; width: auto; min-width: 0; max-width: 100%; }
.fin-liste--soins { display: block; margin-top: 4px; }
.fin-soin { padding: 12px 0; border-top: 1px solid var(--f-filet); }
.fin-soin:first-child { border-top: 0; }
.fin-soin-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fin-soin-ts { font: 600 14px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fin-soin-nom { font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-soin-suppr { margin-left: auto; }
.fin-soin-corps { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.fin-soin-loc { font: 600 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fin-soin-desc { color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; white-space: pre-wrap; overflow-wrap: anywhere; }
.fin-soin-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.fin-soin-soignant { color: var(--f-encre-3); font: 400 12px/1.4 Inter, system-ui, sans-serif; }


@media (prefers-reduced-motion: reduce) { .fin *, .fin *::before, .fin *::after { transition: none !important; animation: none !important; } }