/* Les écrans d'un accueil de loisirs, natifs Le Fil (js/accueils/ : tableau, semaine, période, activités, enfants, réglages, séance, création, liste ACM).
   Préfixe fac-, jetons --f-* de css/fil.css. Ils parlent le kit du budget (css/fil-budget.css : .fb, .fb-carte, .fb-bouton, .fb-feuille…) et celui des créneaux types
   (css/fil-creneaux.css : .fc-choix, groupe de boutons à bascule) ; ce fichier ne porte que ce qui est propre aux accueils. Style de Le Fil : encre, filets, aucune couleur
   décorative (ambre = ce qui peut coûter, sapin = fait), cibles de 44 px et plus, sept tailles de texte (12, 14, 16, 18, 24, 30, 64), aucun effet.
   Remplace css/accueils.css (classique, préfixe acl-, supprimé). Les feuilles (.fb-voile) sont posées dans <body> : elles héritent des jetons de <html>. */

.fac-page { min-width: 0; }
.fac-contenu { min-width: 0; }
.fac [hidden] { display: none !important; }
.fac-pleine-largeur { grid-column: 1 / -1; }

/* ---------- États : attente, erreur avec « Réessayer » ---------- */
.fac-erreur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px 0; padding: 12px 14px; background: var(--f-surface); border: 1px solid var(--f-filet); border-left: 3px solid var(--f-urgent); border-radius: 14px; }
.fac-erreur-texte { flex: 1 1 14rem; margin: 0; color: var(--f-urgent); font: 500 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-erreur-zone:empty, .fac-msg-zone:empty { display: none; }
.fac-msg { margin: 10px 0 0; }
.fac-msg:empty { display: none; }
.fac .fb-carte > .fb-carte-ligne { margin-bottom: 10px; }
.fac-note[data-etat="erreur"] { color: var(--f-urgent); }

/* ---------- Listes à filets : une ligne = un titre, ses détails, ses gestes ---------- */
.fac-liste { margin: 0; padding: 0; list-style: none; }
.fac-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--f-filet); min-width: 0; }
.fac-ligne:first-child { border-top: 0; }
.fac-ligne-texte { display: flex; flex: 1 1 220px; flex-direction: column; gap: 2px; min-width: 0; }
.fac-ligne-titre { font: 500 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-ligne-sous { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-ligne-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fac-ligne > .fac-erreur, .fac-ligne > .fac-msg-zone { flex: 1 1 100%; }
.fac-ligne.est-annulee .fac-ligne-titre { color: var(--f-encre-3); text-decoration: line-through; }
.fac-sans-activite { color: var(--f-encre-3); }
.fac-ligne--vacances .fac-ligne-titre { color: var(--f-encre-2); }
.fac-nombre { font: 600 16px/1.3 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fb-carte > .fac-liste { margin-top: 4px; }
.fb-carte > .fb-sous-titre:first-of-type { margin-top: 8px; }

/* Des faits : « libellé — valeur » */
.fac-faits { margin: 0; padding: 0; list-style: none; }
.fac-fait { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--f-filet); }
.fac-fait:first-child { border-top: 0; }
.fac-fait-lib { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fac-fait-val { font: 600 16px/1.3 Inter, system-ui, sans-serif; text-align: right; overflow-wrap: anywhere; }
.fac-annee { display: grid; gap: 12px; }
.fac-annee .fb-actions { margin-top: 0; }

/* ---------- Taux d'encadrement : ambre quand il en manque ---------- */
.fac-taux { margin: 4px 0; padding-left: 12px; border-left: 3px solid var(--f-filet); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fac-taux[data-etat="ok"] { border-left-color: var(--f-fait); }
.fac-taux[data-etat="attention"] { border-left-color: var(--f-attention); }
.fac-taux-manque { color: var(--f-attention); }

/* ---------- Tableau de bord ---------- */
.fac-seance-tete { display: grid; gap: 6px; min-width: 0; }
.fac-seance-titre { margin: 4px 0 0; font: 600 24px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-seance-quand, .fac-seance-equipe { margin: 0; color: var(--f-encre-2); font: 400 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-seance-groupe { display: grid; gap: 6px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--f-filet); }
.fac-seance-groupe-nom { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fac-seance-actions { margin-top: 4px; }
.fac-seance-actions .fb-bouton { flex: 1 1 140px; }
.fac-alertes { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.fac-alerte { padding: 10px 12px; border-left: 3px solid var(--f-filet); border-radius: 10px; background: var(--f-surface-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-alerte[data-etat="attention"] { border-left-color: var(--f-attention); }
.fac-alerte[data-etat="ok"] { border-left-color: var(--f-fait); }
.fac-alerte[data-etat="info"] { border-left-color: var(--f-encre-3); }
.fac-alerte:has(> .fb-lien) { padding: 0 12px; }
.fac-alerte > .fb-lien { display: flex; align-items: center; min-height: 44px; }
.fac-ligne-titre .fb-lien { display: inline-flex; align-items: center; min-height: 44px; }
.fac-barre { display: grid; gap: 6px; margin-top: 8px; }
.fac-barre-texte { font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fac-barre-piste { height: 8px; overflow: hidden; border-radius: 99px; background: var(--f-surface-2); box-shadow: inset 0 0 0 1px var(--f-filet); }
.fac-barre-rempli { height: 100%; border-radius: 99px; background: var(--f-encre); }

/* ---------- Semaine ---------- */
.fac-semaine-nav { gap: 8px; margin: 0 0 12px; }
.fac-semaine-titre { flex: 1 1 100%; margin: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fac-semaine-nav .fb-bouton { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
.fac-semaine-grille { min-width: 0; margin-bottom: 16px; }
@media (min-width: 720px) { .fac-semaine-titre { flex: 1 1 auto; } .fac-semaine-nav .fb-bouton { flex: 0 0 auto; padding-inline: 18px; } }

/* ---------- Période ---------- */
.fac-periode-haut { max-width: 560px; margin: 0 0 12px; }
.fac-ligne-cycle { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 12px; }

/* ---------- Enfants ---------- */
.fac-enfant { border-top: 1px solid var(--f-filet); }
.fac-enfant:first-child { border-top: 0; }
.fac-enfant-corps { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; }
label.fac-enfant-corps { cursor: pointer; }
.fac-enfant-case { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--f-encre); }
.fac-enfant-texte { display: flex; flex: 1 1 auto; flex-direction: column; gap: 4px; min-width: 0; }
.fac-enfant-nom { font: 400 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-enfant-nom b { font-weight: 500; }
.fac-enfant-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.fac-enfant-meta:empty { display: none; }
@media (min-width: 720px) { .fac-enfant-texte { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .fac-enfant-meta { justify-content: flex-end; } }
.fac-masse { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 8px 8px 16px; background: var(--f-surface); border: 1px solid var(--f-encre-3); border-radius: 18px; }
.fac-masse-nb { margin-right: auto; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
@media (min-width: 900px) { .fac-masse { bottom: 16px; } }
.fac-masse-section { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--f-filet); }
.fac-masse-section:first-child { padding-top: 0; border-top: 0; }
.fac-masse-section .fb-actions { margin-top: 0; }
.fac-groupes-edit { display: grid; }
.fac-groupes-edit > .fb-bouton { justify-self: start; margin-top: 12px; }
.fac-groupe-ligne { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--f-filet); min-width: 0; }
.fac-groupe-ligne:first-child { border-top: 0; padding-top: 4px; }
.fac-groupe-ligne .fb-actions { margin-top: 0; }
.fac-import { padding-top: 12px; }

/* ---------- Activités ---------- */
.fac-resultats { margin: 10px 0 0; }
.fac-resultats .fac-ligne:first-child { border-top: 1px solid var(--f-filet); }

/* ---------- Séance : pointage et retour (mobile d'abord) ---------- */
.fac-seance-page { padding-bottom: 8px; }
.fac-seance-resume { display: grid; gap: 2px; margin: 0 0 12px; }
.fac-seance-groupe-titre { font: 600 18px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-seance-resume-sous { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-seance-corps { display: grid; gap: 12px; max-width: 46rem; min-width: 0; }
.fac-taux-zone { display: grid; gap: 4px; padding: 12px 16px; }
.fac-taux-zone .fb-note { margin: 2px 0 0; }
.fac-pointage { margin: 0; padding: 0; overflow: hidden; list-style: none; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 18px; }
.fac-pointage-ligne + .fac-pointage-ligne { border-top: 1px solid var(--f-filet); }
.fac-pointage-bouton { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom etat" "meta meta"; align-items: center; gap: 4px 12px; width: 100%; min-height: 60px; padding: 10px 16px; border: 0; border-left: 4px solid transparent; border-radius: 0; background: transparent; color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; touch-action: manipulation; }
:root [data-app] .fac button.fac-pointage-bouton { min-height: 60px; }
.fac-pointage-bouton:hover { background: var(--f-surface-2); }
.fac-pointage-bouton[aria-pressed="true"] { border-left-color: var(--f-fait); background: color-mix(in srgb, var(--f-fait) 12%, var(--f-surface)); }
.fac-pointage-bouton .fac-enfant-nom { grid-area: nom; font-size: 18px; }
.fac-pointage-bouton .fac-enfant-meta { grid-area: meta; }
.fac-enfant-etat { grid-area: etat; color: var(--f-encre-3); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fac-pointage-bouton[aria-pressed="true"] .fac-enfant-etat { color: var(--f-fait); font-weight: 600; }
.fac-pointage-bouton:focus-visible { outline: 2px solid var(--f-encre); outline-offset: -2px; }
.fac-pied-pointage { display: grid; gap: 10px; justify-items: start; }
.fac-fin { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fac-fin:empty { display: none; }
.fac-barre-bas { position: sticky; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; background: var(--f-surface); border: 1px solid var(--f-encre-3); border-radius: 18px; }
.fac-compteur { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fac-terminer { min-width: 9rem; }
@media (min-width: 900px) { .fac-barre-bas { bottom: 16px; } }
.fac-resultat { width: 100%; min-height: 48px; padding: 8px 12px; text-align: left; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: inherit; cursor: pointer; }
.fac-resultat:hover { background: var(--f-surface-2); }
.fac-resultat small { color: var(--f-encre-2); }
.fb-feuille .fac-resultats { display: grid; gap: 6px; margin-top: 10px; }
.fac-nouveau { display: grid; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--f-filet); }
.fac-nouveau .fb-sous-titre { margin: 0; }
.fac-nouveau .fb-note { margin: 0; }
.fac-nouveau .fb-actions { margin-top: 0; }
.fac-retours { display: grid; gap: 12px; }
.fac-retour { display: grid; gap: 12px; }
.fac-retour-kicker { margin: 0; color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; }
.fac-retour-titre { margin: 0; font: 600 24px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-retour-statut { min-height: 1.4em; margin: 0; font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fac-retour-statut[data-etat="ok"] { color: var(--f-fait); }
.fac-gros { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
:root [data-app] .fac .fac-gros button.fc-choix { min-height: 52px; font-size: 16px; }
.fac-note-retour { min-height: 64px; }

/* ---------- Création et liste ACM ---------- */
.fac-creation .fb-pile { column-width: auto; max-width: 760px; }
.fac-form { min-width: 0; }
.fac-details-corps { display: grid; gap: 14px; }
.fac-premier-creneau .fb-repli-resume { color: var(--f-encre-2); }
.fb-carte--repli .fc-heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fac-form .fb-actions--bas { max-width: 760px; }
.fac-note { max-width: 760px; }
.fac-doublon { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; background: var(--f-surface-2); border: 1px solid var(--f-attention); border-radius: 14px; }
.fac-doublon-txt { margin: 0; font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fac-entrees { margin: 0; }
.fac-entree { border-top: 1px solid var(--f-filet); }
.fac-entree:first-child { border-top: 0; }
.fac-entree-lien { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 64px; padding: 12px 32px 12px 0; justify-content: center; color: var(--f-encre); text-decoration: none; }
.fac-entree-lien::after { content: ''; position: absolute; top: 50%; right: 8px; width: 8px; height: 8px; border-top: 2px solid var(--f-encre-3); border-right: 2px solid var(--f-encre-3); transform: translateY(-50%) rotate(45deg); }
.fac-entree-lien:hover .fac-ligne-titre { text-decoration: underline; text-underline-offset: 3px; }

/* Suggestions (écoles, centres, ACM connus, organismes) : combobox groupée sous le champ */
.fac-sugg-zone { grid-column: 1 / -1; position: relative; min-width: 0; margin-top: -6px; }
.fac-sugg-zone:not(:has(.fac-sugg-liste:not([hidden]), .fac-sugg-statut:not([hidden]):not(.est-lecteur))) { display: none; }
.fac-sugg { display: grid; gap: 4px; min-width: 0; }
.fac-sugg [hidden] { display: none; }
.fac-sugg-liste { max-height: min(60vh, 26rem); overflow-y: auto; overscroll-behavior: contain; background: var(--f-surface); border: 1px solid var(--f-encre-3); border-radius: 14px; }
.fac-sugg-groupe + .fac-sugg-groupe { border-top: 1px solid var(--f-filet); }
.fac-sugg-titre { padding: 10px 14px 4px; color: var(--f-encre-2); font: 500 12px/1.4 Inter, system-ui, sans-serif; }
.fac-sugg-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 48px; padding: 8px 14px; cursor: pointer; border-top: 1px solid var(--f-filet); }
.fac-sugg-titre + .fac-sugg-option { border-top: 0; }
.fac-sugg-nom { min-width: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-sugg-meta { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fac-sugg-option:hover, .fac-sugg-option.est-actif { background: var(--f-surface-2); }
.fac-sugg-option.est-actif { box-shadow: inset 3px 0 0 var(--f-encre); }
.fac-sugg-option-acm .fac-sugg-meta { color: var(--f-attention); }
.fac-sugg-source { margin: 0; padding: 8px 14px; border-top: 1px solid var(--f-filet); color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; }
.fac-sugg-statut { margin: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fac-sugg-statut.est-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 480px) {
  .fac-seance-actions .fb-bouton { flex: 1 1 100%; }
  .fac-ligne-cycle { grid-template-columns: minmax(0, 1fr); }
}
@media print { .fac-masse, .fac-barre-bas { display: none !important; } }