/* Évaluation de fin de séjour, native Le Fil (js/evaluation-sejour/ : bilan #/projet/<id>/bilan — objectifs, retours, budget, stagiaires, rapport imprimable — et questionnaires de fin des
   familles et des enfants). Préfixe fes-, jetons --f-* de css/fil.css. La page de la direction parle le kit du budget (css/fil-budget.css : .fb, .fb-carte, .fb-bouton, .fb-puce, .fb-feuille…) et le
   groupe de choix des accueils (css/fil-creneaux.css : .fc-choix) ; ce fichier ne porte que ce qui est propre au bilan. Les questionnaires sont montés dans des pages PUBLIQUES (espace famille,
   espace ados) : ils parlent la fabrique publique (css/fil-public.css : .fpu-titre, .fpu-saisie, .fpu-bouton, .fpu-choix…) et n'ont besoin que des jetons de <html>.
   Style de Le Fil : encre, filets, ambre = ce qui peut coûter, sapin = fait, brique = non atteint ; cibles de 44 px et plus ; sept tailles de texte (12, 14, 16, 18, 24, 30, 64) ; aucun effet.
   Remplace css/evaluation-sejour.css (classique, préfixes es- et qf-, supprimé). */

.fes { min-width: 0; }
.fes [hidden] { display: none !important; }
.fes-pile { display: grid; gap: 12px; min-width: 0; }
.fes-intro { margin: 0 0 12px; }
.fes-zone { min-width: 0; margin-top: 12px; }
.fes-onglet { min-width: 0; }

/* ---------- Le jalon « Évaluer » et ses quatre volets (chaque tuile ouvre son onglet) ---------- */
.fes-jalon-zone { margin: 0 0 12px; }
.fes-jalon { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.fes-jalon-ligne { flex: 1 1 260px; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-jalon-lbl { font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fes-jalon-raison { flex: 1 1 100%; color: var(--f-encre-2); overflow-wrap: anywhere; }
.fes-volets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 900px) { .fes-volets { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
:root [data-app] .fes button.fes-volet { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 8px; width: 100%; min-width: 0; min-height: 96px; padding: 12px; border: 1px solid var(--f-filet); border-radius: 18px;
  background: var(--f-surface); color: var(--f-encre); font: 400 14px/1.4 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
:root [data-app] .fes button.fes-volet:hover { background: var(--f-surface-2); }
:root [data-app] .fes button.fes-volet[aria-current="page"] { border-color: var(--f-encre); background: var(--f-surface-2); }
.fes-volet-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px; width: 100%; }
.fes-volet-titre { flex: 1 1 8rem; min-width: 0; font: 600 14px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-volet-raison { color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes :focus-visible { outline: 2px solid var(--f-encre); outline-offset: 3px; }
.fb-puce[data-etat="urgent"] { color: var(--f-urgent); border-color: var(--f-urgent); }

/* ---------- Objectifs ---------- */
.fes-resume { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.fes-resume-txt { margin: 0; font: 600 16px/1.4 Inter, system-ui, sans-serif; }
.fes-resume-puces { display: flex; flex-wrap: wrap; gap: 6px; }
.fes-obj { display: grid; gap: 10px; min-width: 0; }
.fes-obj--oo { margin-left: 12px; }
@media (min-width: 720px) { .fes-obj--oo { margin-left: 28px; } }
.fes-obj-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fes-obj-titre { min-width: 0; margin: 0; font: 600 16px/1.35 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-obj-num { margin-right: 4px; color: var(--f-encre-2); font-variant-numeric: tabular-nums; }
.fes-obj-etat { flex: none; }
.fes-obj-type, .fes-obj-critere, .fes-obj-appuis { margin: 0; color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-obj-critere { font-size: 14px; }
.fes-obj-poses { display: grid; gap: 8px; justify-items: start; padding-top: 10px; border-top: 1px solid var(--f-filet); }
.fes-obj-texte { margin: 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; white-space: pre-line; overflow-wrap: anywhere; }
.fes-alerte { margin: 0; }
.fes-orphelins .fes-lignes { margin-top: 4px; }

/* Lignes à filets (liens d'un objectif, stagiaires, orphelins) */
.fes-lignes { margin: 0; padding: 0; list-style: none; }
.fes-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--f-filet); min-width: 0; }
.fes-ligne:first-child { border-top: 0; }
.fes-ligne-texte { display: flex; flex: 1 1 200px; flex-direction: column; gap: 2px; min-width: 0; }
.fes-ligne-titre { font: 500 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
a.fes-ligne-titre { display: inline-flex; align-items: center; min-height: 44px; }
.fes-ligne-sous { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-lien-vide { padding: 8px 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-liens-lbl { margin: 14px 0 0; }
.fes-relier { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 10px; }
.fes-relier .fb-champ { flex: 1 1 200px; }
.fes-liens-autres { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Retours : fenêtre, agrégats anonymes ---------- */
.fes-fenetre-txt { margin: 0; font: 500 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-agregat-vide, .fes-equipe-txt { margin: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-agregat .fb-carte-ligne { align-items: center; margin-bottom: 4px; }
.fes-q { padding: 12px 0; border-top: 1px solid var(--f-filet); }
.fes-q:first-of-type { border-top: 0; }
.fes-q-libelle { margin: 0 0 6px; font: 500 16px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-q-moyenne { margin: 0 0 6px; font: 600 14px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fes-q-vide, .fes-q-note { margin: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fes-q-note { margin-top: 6px; font-size: 12px; }
.fes-barres { display: grid; gap: 8px; }
.fes-barre { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-barre-lib { overflow-wrap: anywhere; }
.fes-barre-piste { height: 8px; overflow: hidden; border-radius: 99px; background: var(--f-surface-2); box-shadow: inset 0 0 0 1px var(--f-filet); }
.fes-barre-plein { display: block; height: 100%; border-radius: 99px; background: var(--f-encre); }
.fes-barre-n { color: var(--f-encre-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .fes-barre { grid-template-columns: minmax(0, 1fr) auto; }
  .fes-barre-piste { grid-column: 1 / -1; grid-row: 2; }
}
.fes-citations { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fes-citation { padding: 8px 12px; border-left: 3px solid var(--f-filet); border-radius: 10px; background: var(--f-surface-2); }
.fes-citation p { margin: 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; white-space: pre-line; }
.fes-citation .fes-citation-sign { margin-top: 2px; color: var(--f-encre-2); font-size: 12px; white-space: normal; }

/* ---------- Budget en lecture seule ---------- */
.fes-etat { margin: 0; }
.fes-table { display: grid; gap: 0; min-width: 0; }
.fes-tr { display: grid; grid-template-columns: minmax(0, 1fr) 8rem 8rem 8rem; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--f-filet); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-tr.est-surligne { border-left: 3px solid var(--f-attention); padding-left: 10px; }
.fes-th { padding: 6px 0; border-top: 0; color: var(--f-encre-2); font-size: 12px; }
.fes-th > span:not(:first-child), .fes-tr > .fes-chiffre { text-align: right; }
.fes-chiffre { font-variant-numeric: tabular-nums; }
.fes-tf { border-top: 2px solid var(--f-encre); font-weight: 600; }
.fes-td-lib { overflow-wrap: anywhere; }
.fes-td-just { margin: 0; padding: 0 0 8px; color: var(--f-encre-2); font: 400 12px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .fes-tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fes-tr > span:first-child { grid-column: 1 / -1; font-weight: 600; }
  .fes-th { display: none; }
  .fes-tr:not(.fes-th) > span[data-lbl] { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
  .fes-tr:not(.fes-th) > span[data-lbl]::before { content: attr(data-lbl); color: var(--f-encre-3); font-size: 12px; font-weight: 400; }
}

@media (max-width: 719px) { .fes-budget .fb-chiffres--trois .fb-chiffre-val { font-size: 16px; white-space: nowrap; } }

/* ---------- Stagiaires ---------- */
.fes-stag-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.fes-stag-compte { margin: 0; font: 600 16px/1.4 Inter, system-ui, sans-serif; }

/* ---------- Liens vers d'autres modules ---------- */
.fes-liens { margin-top: 12px; }

/* ---------- Rapport imprimable ---------- */
.fes-rapport-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.fes-r-aide { flex: 1 1 16rem; min-width: 0; margin: 0; color: var(--f-encre-2); font: 400 12px/1.45 Inter, system-ui, sans-serif; }
.fes-rapport { min-width: 0; padding: 24px clamp(16px, 4vw, 40px); background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 24px; color: var(--f-encre); font: 400 14px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fes-rapport h1 { margin: 0; font: 400 30px/1.15 'Instrument Serif', Georgia, serif; }
.fes-rapport h2 { margin: 0 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--f-filet); font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fes-rapport h3 { margin: 12px 0 4px; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fes-r-entete { margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--f-encre); }
.fes-r-surtitre { margin: 0 0 4px; color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fes-r-meta { margin: 6px 0 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-r-section { margin-bottom: 24px; }
.fes-r-dl { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 4px 16px; margin: 0; }
.fes-r-dl dt { font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fes-r-dl dd { margin: 0; font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fes-r-obj { margin-bottom: 12px; }
.fes-r-obj--oo { padding-left: 16px; }
.fes-r-niveau { margin: 0; font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fes-r-note, .fes-r-texte { margin: 4px 0 0; font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fes-r-note { color: var(--f-encre-2); }
.fes-r-texte { white-space: pre-line; }
.fes-r-sous { margin: 8px 0 4px; font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fes-r-citations, .fes-r-liste { margin: 0; padding-left: 20px; font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fes-r-citations li, .fes-r-liste li { margin-bottom: 4px; }
.fes-r-table { width: 100%; border-collapse: collapse; font: 400 14px/1.4 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fes-r-table th, .fes-r-table td { padding: 6px 8px; border-bottom: 1px solid var(--f-filet); text-align: right; }
.fes-r-table th:first-child { text-align: left; }
.fes-r-table thead th { color: var(--f-encre-2); font-weight: 600; }
.fes-r-total th, .fes-r-total td { border-top: 2px solid var(--f-encre); font-weight: 600; }
@media (max-width: 600px) {
  .fes-rapport { padding: 16px; border-radius: 18px; }
  .fes-r-dl { grid-template-columns: minmax(0, 1fr); }
  .fes-r-dl dd { margin-bottom: 6px; }
}

/* Impression : le rapport seul, en A4, encre sur blanc (tant que le rapport est monté : body:has(.fes-rapport), sans classe à poser ni à retirer). Les couleurs viennent du système (Canvas, CanvasText) : jamais un thème sombre sur le papier. */
@media print {
  @page { size: A4; margin: 16mm 15mm; }
  :root { color-scheme: light; }
  body:has(.fes-rapport) { background: Canvas; color: CanvasText; }
  [data-interface="fil"] body:has(.fes-rapport) :is(.f-top, .f-bottom, .f-sidebar, .fh, .fmsg-pile, .fb-voile) { display: none !important; }
  body:has(.fes-rapport) [data-app] { margin: 0 !important; padding: 0 !important; }
  body:has(.fes-rapport) .fes { padding: 0; color: CanvasText; }
  body:has(.fes-rapport) .fes > :not(.fes-zone), body:has(.fes-rapport) .fes-no-print { display: none !important; }
  body:has(.fes-rapport) .fes-zone { margin: 0; }
  body:has(.fes-rapport) .fes-rapport { --f-encre: CanvasText; --f-encre-2: color-mix(in srgb, CanvasText 72%, Canvas); --f-filet: color-mix(in srgb, CanvasText 28%, Canvas); --f-surface: Canvas;
    padding: 0; border: 0; border-radius: 0; background: Canvas; color: CanvasText; }
  .fes-r-section h2, .fes-r-section h3 { break-after: avoid; }
  .fes-r-obj, .fes-r-q, .fes-r-table, .fes-r-chiffres { break-inside: avoid; }
}
/* L'espace famille est une page-document classique (index.html n'y pose pas data-interface="fil") : les jetons --f-* n'y existent pas. Les questionnaires y prennent ceux de la page (même pont, même sort). */
body.jf-mode .fes-qe { --f-fond: var(--bg-0); --f-surface: var(--s1); --f-surface-2: var(--s2); --f-encre: var(--texte); --f-encre-2: var(--texte-2); --f-encre-3: var(--texte-3); --f-filet: var(--ligne); --f-fait: var(--ok); --f-urgent: var(--critique); --f-attention: var(--critique); }

/* ---------- Questionnaires de fin (familles, enfants), dans les pages publiques ---------- */
.fes-qe { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fes-qe *, .fes-qe *::before, .fes-qe *::after, .fes-qe-ados *, .fes-qe-ados *::before, .fes-qe-ados *::after { box-sizing: border-box; }
.fes-qe-ados[hidden], .fes-qe [hidden] { display: none !important; }
.fes-qe-h2 { margin: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; color: var(--f-encre); }
.fes-qe-carte { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 16px; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 24px; min-width: 0; }
.fes-qe-carte > .fpu-texte { margin: 0; }
.fes-qe-etat { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 24px; }
.fes-qe-etat-titre, .fes-qe-merci-titre { margin: 0; font: 600 16px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre); }
.fes-qe-etat .fpu-texte, .fes-qe-merci .fpu-texte { margin: 0; }
.fes-qe-merci { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 12px 14px; border-left: 3px solid var(--f-fait); border-radius: 14px; background: var(--f-surface-2); }
.fes-qe-merci-titre { color: var(--f-fait); }
.fes-qe-ados { gap: 16px; }
.fes-qe-zone { min-width: 0; }
.fes-versions { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.fes-versions-q { margin: 0; font: 600 14px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre); }
.fes-version { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; }
.fes-version:hover { border-color: var(--f-encre-3); }
.fes-version:focus-visible, .fes-opt:focus-visible { outline: 2px solid var(--f-encre); outline-offset: 2px; }
.fes-version-titre { font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fes-version-texte { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }

.fes-qf { display: flex; flex-direction: column; gap: 16px; margin: 0; min-width: 0; }
.fes-qf-tete { display: flex; flex-direction: column; gap: 6px; }
.fes-qf-carte { padding: 14px 16px; background: var(--f-surface); border: 1px solid var(--f-filet); border-radius: 24px; min-width: 0; }
.fes-qe-ados .fes-qf-carte { background: var(--f-surface-2); }
.fes-qf-q { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; }
.fes-qf-libelle { padding: 0; margin: 0 0 12px; font: 600 16px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre); overflow-wrap: anywhere; }
.fes-qf-facultatif { font-weight: 400; font-size: 12px; color: var(--f-encre-3); }
.fes-qf-bornes { display: flex; justify-content: space-between; gap: 8px; font: 400 12px/1.4 Inter, system-ui, sans-serif; color: var(--f-encre-3); }
.fes-qf-signer { padding: 4px 0; }
.fes-qf-actions { display: flex; flex-direction: column; gap: 8px; }
.fes-opts { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fes-opts--echelle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fes-opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; min-width: 48px; padding: 8px 14px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface-2); color: var(--f-encre);
  font: 500 14px/1.3 Inter, system-ui, sans-serif; cursor: pointer; }
.fes-opt[aria-checked="true"], .fes-opt[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }
.fes-opts--pictos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fes-opt--picto { flex-direction: column; min-height: 104px; padding: 8px; text-align: center; }
.fes-picto { display: inline-grid; place-items: center; width: 56px; height: 56px; color: var(--f-encre-2); }
.fes-picto svg { width: 100%; height: 100%; }
.fes-opt[aria-checked="true"] .fes-picto, .fes-opt[aria-pressed="true"] .fes-picto { color: var(--f-fond); }
.fes-opt-lib { overflow-wrap: anywhere; }
@media (max-width: 600px) { .fes-opts--echelle { gap: 6px; } .fes-opt { padding: 8px; } }
@media (prefers-reduced-motion: reduce) { .fes *, .fes-qe *, .fes-qf * { transition: none !important; animation: none !important; } }