/* Planning natif Le Fil — les vues Séjour (le tableau du mur), Lieux (par lieu) et Équipe (par animateur), et les gardes qui s'y lisent.
   Style de Le Fil : encre, filets, pleine largeur, cibles de 44 px et plus, sept tailles de texte (12, 14, 16, 18, 24, 30). Les états (verrouillé, proposé, modifié, conflit, doublon, repos)
   ne passent JAMAIS par la couleur seule : signe au trait + mot (ou contour pointillé) à chaque fois. Préfixes fp-sj- (Séjour), fp-lx- (Lieux), fp-eq- (Équipe), fp-g- (gardes). */
.fp-sj-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fp-sj-etat { min-width: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-sj-scroll, .fp-lx-scroll { min-width: 0; max-width: 100%; overflow: auto; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); overscroll-behavior: contain; }
.fp-vue[data-mode="edition"] .fp-sj-scroll, .fp-vue[data-mode="edition"] .fp-lx-scroll { background: var(--f-surface-2); outline: 2px solid var(--f-encre); outline-offset: -2px; }
.fp-vue[data-mode="proposition"] .fp-sj-scroll, .fp-vue[data-mode="proposition"] .fp-lx-scroll { background: var(--f-surface-2); outline: 2px dashed var(--f-encre-2); outline-offset: -2px; }

/* ---------- Séjour : jours en colonnes, moments × groupes en lignes ---------- */
.fp-sj-table { --fp-sj-moment-w: 44px; --fp-sj-groupe-w: 84px; --fp-sj-col: 140px; --fp-sj-col-mixte: 196px; display: grid; position: relative; grid-template-columns: var(--fp-sj-moment-w) var(--fp-sj-groupe-w); grid-template-rows: 56px; }
.fp-sj-table.fp-sj-sans-libelle { --fp-sj-groupe-w: 0px; }
.fp-sj-coin { z-index: 6; }
.fp-sj-jour { font-family: inherit; }
.fp-sj-moment { position: sticky; left: 0; z-index: 4; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 92px; padding: 6px 2px; background: var(--f-surface); border-right: 1px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); }
.fp-sj-moment-t { writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; white-space: nowrap; line-height: 1.3; }
.fp-sj-moment-t strong { display: block; font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.fp-sj-moment-t span { display: block; color: var(--fp-texte-3); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-sj-groupe { position: sticky; left: var(--fp-sj-moment-w); z-index: 4; display: flex; align-items: flex-start; gap: 6px; min-width: 0; padding: 8px; background: var(--f-surface); border-right: 1px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); color: var(--f-encre-2); font: 600 14px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-sj-groupe-equipe { font-style: italic; font-weight: 500; }
.fp-sj-premiere { border-top: 2px solid var(--f-filet); }
.fp-vue[data-mode="edition"] .fp-sj-moment, .fp-vue[data-mode="edition"] .fp-sj-groupe, .fp-vue[data-mode="proposition"] .fp-sj-moment, .fp-vue[data-mode="proposition"] .fp-sj-groupe { background: var(--f-surface-2); }
.fp-sj-bande { display: none; position: relative; border-top: 2px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); background: var(--f-surface-2); }
.fp-sj-bande-t { position: sticky; left: 0; display: inline-block; padding: 6px 12px; font: 400 14px/1.3 Inter, system-ui, sans-serif; }
.fp-sj-bande-t span { color: var(--fp-texte-3); }
.fp-sj-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; min-height: 52px; padding: 4px; border-right: 1px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); }
.fp-sj-cell.fp-sj-today, .fp-sj-span.fp-sj-today { background: color-mix(in srgb, var(--f-encre) 4%, transparent); }
/* Créneau de tout le séjour : une cellule sur toute la hauteur des lignes du moment ; les cellules voisines lui laissent sa place. */
.fp-sj-cell.fp-sj-avec-span { padding-left: calc(clamp(84px, 40%, 112px) + 10px); }
.fp-sj-span { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; align-self: stretch; justify-self: start; width: clamp(84px, 40%, 112px); min-width: 0; margin: 4px; padding: 3px; border: 1px solid var(--f-filet); border-radius: 12px; background: var(--f-surface-2); }
.fp-sj-span.fp-sj-span-seul { justify-self: stretch; width: auto; }
.fp-sj-cr { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 6px; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 4px 6px 4px 9px; border: 1px solid var(--fp-line, var(--f-filet)); border-radius: 10px; background: var(--fp-bg, var(--f-surface-2)); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; appearance: none; }
.fp-sj-cr:hover { border-color: var(--fp-c, var(--f-encre-3)); }
.fp-sj-cr-haut { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 5px; width: 100%; min-width: 0; }
.fp-sj-cr-haut .fp-ty { margin-top: 1px; }
.fp-sj-cr-h { flex: none; color: var(--f-encre-2); font: 500 12px/1.5 Inter, system-ui, sans-serif; }
.fp-sj-cr-t { flex: 1 1 5em; min-width: 0; font: 600 14px/1.25 Inter, system-ui, sans-serif; overflow-wrap: break-word; hyphens: auto; }
.fp-sj-span .fp-sj-cr-t { font-size: 14px; }
.fp-sj-cr-signes { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.fp-sj-cr-etats { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; width: 100%; min-width: 0; }
.fp-sj-cr-etats .fp-etiq, .fp-lx-bloc-sous .fp-etiq { container-type: normal; min-width: 0; max-width: 100%; }
.fp-sj-cr-etats .fp-etiq-txt { white-space: normal; overflow-wrap: break-word; }
.fp-sj-cr[data-genre="propose"], .fp-lx-bloc[data-genre="propose"] { border-style: dashed; }
.fp-sj-cr[data-genre="fantome"], .fp-lx-bloc[data-genre="fantome"] { border-style: dashed; opacity: .72; }
.fp-sj-cr[data-genre="suppression"], .fp-lx-bloc[data-genre="suppression"] { border: 1px dashed var(--f-urgent); }
.fp-sj-cr[data-plage] { border-style: dashed; background: var(--f-surface-2) repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--f-encre-3) 28%, transparent) 8px 10px); }
@media (min-width: 1200px) { .fp-sj-cr-t { font-size: 16px; } }

/* La ligne « Garde » du tableau */
.fp-sj-groupe-garde { align-items: center; }
.fp-sj-cell--garde { gap: 4px; }
.fp-sj-poste { display: grid; gap: 3px; }
.fp-sj-poste-nom { color: var(--fp-texte-3); font: 600 12px/1.3 Inter, system-ui, sans-serif; }
.fp-sj-g { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; width: 100%; min-height: 44px; padding: 4px 8px; border: 1px solid var(--f-filet); border-radius: 10px; background: var(--f-surface-2); color: var(--f-encre); font: 500 14px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.fp-sj-g[data-etat="vide"] { border-style: dashed; color: var(--f-encre-2); }
.fp-sj-g[data-etat="conge"] { border-color: var(--f-attention); }
.fp-sj-g-t { color: var(--f-encre-2); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fp-sj-g-alerte { display: inline-flex; align-items: center; gap: 4px; color: var(--f-attention); font: 500 12px/1.3 Inter, system-ui, sans-serif; }

/* ---------- Lieux : une ligne par lieu, les heures de 07:00 à 23:00 en abscisse ---------- */
.fp-lx-table { --fp-lx-label-w: 152px; --fp-lx-heure: 62px; display: grid; position: relative; grid-template-columns: var(--fp-lx-label-w) minmax(calc(16 * var(--fp-lx-heure)), 1fr); grid-template-rows: 52px; min-width: calc(var(--fp-lx-label-w) + 16 * var(--fp-lx-heure)); }
.fp-lx-coin { display: flex; align-items: center; padding: 0 12px; }
.fp-lx-coin-jour { font: 600 14px/1.2 Inter, system-ui, sans-serif; }
.fp-lx-axe { position: sticky; top: 0; z-index: 5; background: var(--f-surface); border-bottom: 1px solid var(--f-filet); }
.fp-vue[data-mode="edition"] .fp-lx-axe, .fp-vue[data-mode="proposition"] .fp-lx-axe, .fp-vue[data-mode="edition"] .fp-lx-coin, .fp-vue[data-mode="proposition"] .fp-lx-coin, .fp-vue[data-mode="edition"] .fp-lx-lieu, .fp-vue[data-mode="proposition"] .fp-lx-lieu { background: var(--f-surface-2); }
.fp-lx-h { position: absolute; bottom: 8px; transform: translateX(-50%); color: var(--fp-texte-3); font: 400 12px/1 Inter, system-ui, sans-serif; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fp-lx-h--premiere { transform: translateX(4px); }
.fp-lx-h--derniere { transform: translateX(calc(-100% - 4px)); }
.fp-lx-lieu { position: sticky; left: 0; z-index: 4; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; padding: 6px 12px; background: var(--f-surface); border-right: 1px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); }
.fp-lx-lieu-nom { font: 600 14px/1.25 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-lx-lieu-sans .fp-lx-lieu-nom { font-style: italic; font-weight: 500; color: var(--f-encre-2); }
.fp-lx-lieu-meta { display: flex; align-items: center; gap: 4px; color: var(--fp-texte-3); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-lx-lieu-meta[data-alerte] { color: var(--f-attention); font-weight: 600; }
.fp-lx-piste { position: relative; min-height: 52px; border-bottom: 1px solid var(--f-filet); background-image: repeating-linear-gradient(to right, var(--f-filet) 0 1px, transparent 1px calc(100% / 16)); }
.fp-lx-bloc { position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 30px; margin: 0; padding: 2px 6px 2px 9px; overflow: hidden; border: 1px solid var(--fp-line, var(--f-filet)); border-radius: 10px; background: var(--fp-bg, var(--f-surface-2)); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); color: var(--f-encre); font: inherit; text-align: left; cursor: pointer; appearance: none; container-type: inline-size; }
.fp-lx-bloc:hover { border-color: var(--fp-c, var(--f-encre-3)); z-index: 2; }
/* Bloc très court : le titre ne tient pas, le pictogramme seul reste (le titre, la durée et le lieu sont dans l'infobulle et lus au lecteur d'écran). */
@container (max-width: 52px) { .fp-lx-bloc-titre, .fp-lx-bloc-sous { display: none; } .fp-lx-bloc-ligne { justify-content: center; } }
.fp-lx-bloc[data-coupe-g] { border-left-style: dashed; }
.fp-lx-bloc[data-coupe-d] { border-right: 3px double var(--fp-c, var(--f-encre-3)); }
.fp-lx-bloc-ligne { display: flex; align-items: center; gap: 5px; min-width: 0; }
.fp-lx-bloc-titre { flex: 1 1 auto; min-width: 0; font: 600 14px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-lx-bloc-signes { display: inline-flex; flex: none; align-items: center; gap: 3px; }
.fp-lx-bloc-sous { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; color: var(--f-encre-2); font: 400 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; }
.fp-lx-bloc-groupes { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Lieu occupé en même temps : contour d'alerte ET signe au trait ET phrase (infobulle, lecteur d'écran, texte de la ligne du lieu). */
.fp-lx-bloc[data-chevauche] { border-color: var(--f-attention); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)), 0 0 0 1px var(--f-attention); }
.fp-lx-hors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-lx-hors-it { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--fp-line, var(--f-filet)); border-radius: 14px; background: var(--fp-bg, var(--f-surface-2)); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); color: var(--f-encre); font: 500 14px/1.3 Inter, system-ui, sans-serif; cursor: pointer; appearance: none; }

/* ---------- Équipe : une ligne par membre (Jour : la frise ; Semaine : une cellule par jour) ---------- */
.fp-eq-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fp-eq-echelle { display: inline-flex; gap: 2px; padding: 2px; background: var(--f-surface-2); border: 1px solid var(--f-filet); border-radius: 14px; }
.fp-eq-echelle-btn { min-width: 44px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--f-encre-2); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.fp-eq-echelle-btn[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); }
.fp-eq-scroll { background: var(--f-surface); }
.fp-eq-table { --fp-lx-label-w: 164px; --fp-lx-heure: 62px; --fp-eq-col: 124px; position: relative; display: block; min-width: calc(var(--fp-lx-label-w) + 16 * var(--fp-lx-heure)); }
.fp-eq-table.fp-eq-sem { min-width: calc(var(--fp-lx-label-w) + var(--fp-eq-n) * var(--fp-eq-col)); }
.fp-eq-row { display: grid; grid-template-columns: var(--fp-lx-label-w) minmax(0, 1fr); }
.fp-eq-sem .fp-eq-row { grid-template-columns: var(--fp-lx-label-w) repeat(var(--fp-eq-n), minmax(var(--fp-eq-col), 1fr)); }
.fp-eq-tete { position: sticky; top: 0; z-index: 5; height: 56px; background: var(--f-surface); }
.fp-eq-tete .fp-lx-axe { position: relative; top: auto; }
.fp-eq-tete .fp-jour-tete { position: relative; top: auto; min-width: 0; }
.fp-eq-coin { grid-row: auto; }
.fp-eq-label { gap: 1px; }
.fp-eq-sous { color: var(--fp-texte-3); font: 400 12px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-eq-meta-h { font-variant-numeric: tabular-nums; }
.fp-eq-meta-repos { color: var(--f-encre-2); }
.fp-eq-meta-dbl { color: var(--f-attention); font-weight: 600; }
.fp-eq-label-vide { min-height: 0; padding: 0; }
.fp-eq-row-hors .fp-eq-hors { padding: 6px 12px; border-bottom: 1px solid var(--f-filet); background: var(--f-surface-2); }
.fp-eq-vide { margin: 0; padding: 20px 14px; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fp-vue[data-mode="edition"] .fp-eq-tete, .fp-vue[data-mode="proposition"] .fp-eq-tete { background: var(--f-surface-2); }
/* Repos : une bande hachurée sur la ligne du membre, avec le mot « repos » (jamais la hachure seule). Sous les blocs. */
.fp-eq-repos { position: absolute; top: 0; bottom: 0; z-index: 0; display: flex; align-items: flex-start; padding: 3px 6px; overflow: hidden; border-left: 1px dashed var(--f-encre-3); border-right: 1px dashed var(--f-encre-3); background: var(--f-surface-2) repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--f-encre-3) 28%, transparent) 7px 8.5px); }
.fp-eq-repos-mot { padding: 1px 6px; border-radius: 6px; background: var(--f-surface); color: var(--f-encre); font: 600 12px/1.4 Inter, system-ui, sans-serif; }
.fp-eq-bloc[data-chevauche] { z-index: 1; }
/* Semaine : une cellule par jour — mini-frise, repos ombré, heures, signe de doublon. */
.fp-eq-cell { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 6px 4px; border-right: 1px solid var(--f-filet); border-bottom: 1px solid var(--f-filet); }
.fp-eq-cell.fp-eq-today { background: color-mix(in srgb, var(--f-encre) 4%, transparent); }
.fp-eq-cell-doublon { box-shadow: inset 0 0 0 2px var(--f-attention); }
.fp-eq-mini { position: relative; flex: none; overflow: visible; border-radius: 4px; background: color-mix(in srgb, var(--f-surface-2) 60%, transparent);
  background-image: linear-gradient(to right, transparent calc(31.25% - 1px), var(--f-filet) calc(31.25% - 1px) 31.25%, transparent 31.25% calc(75% - 1px), var(--f-filet) calc(75% - 1px) 75%, transparent 75%); }   /* 12:00 et 19:00 */
.fp-eq-mini .fp-eq-repos { padding: 0 3px; align-items: center; }
.fp-eq-mini .fp-eq-repos-mot { padding: 0 4px; font-size: 12px; line-height: 1.2; }
.fp-eq-barre { position: absolute; z-index: 1; height: 10px; min-width: 4px; margin: 0; padding: 0; border: 1px solid var(--fp-c, var(--f-encre-3)); border-radius: 3px; background: var(--fp-c, var(--f-encre-3)); cursor: pointer; appearance: none; }
.fp-eq-barre::after { content: ''; position: absolute; inset: -9px -3px; }   /* zone de toucher plus large que le trait */
.fp-eq-barre[data-genre="propose"] { background: var(--f-surface); border-style: dashed; }
.fp-eq-barre[data-genre="fantome"] { background: var(--f-surface); border-style: dotted; }
.fp-eq-barre[data-doublon] { box-shadow: 0 0 0 2px var(--f-attention); z-index: 2; }
.fp-eq-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 6px; min-height: 18px; color: var(--f-encre-2); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-eq-h { color: var(--f-encre); font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-eq-h-vide { color: var(--f-encre-2); font-weight: 400; }
.fp-eq-dbl { display: inline-flex; align-items: center; gap: 3px; color: var(--f-attention); }
.fp-eq-dbl-mot { color: var(--f-encre); font: 600 12px/1.2 Inter, system-ui, sans-serif; white-space: nowrap; }
.fp-eq-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-eq-lg { display: inline-flex; align-items: center; gap: 6px; }
.fp-eq-lg-repos { display: inline-block; width: 26px; height: 12px; border: 1px dashed var(--f-encre-3); border-radius: 3px; background-image: repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--f-encre-3) 40%, transparent) 4px 5.5px); }

/* ---------- Gardes : leur forme propre (la lanterne, la lune), jamais une famille de couleur ---------- */
.fp-g-bloc { box-shadow: inset 4px 0 0 var(--f-encre); }
.fp-g-bloc[data-garde="nuit"] { background: color-mix(in srgb, var(--f-encre) 8%, var(--f-surface)); }
.fp-g-conge { color: var(--f-attention); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fp-g-barre { border-color: var(--f-encre); background: var(--f-encre); }
.fp-g-barre[data-garde="soir"] { background: var(--f-surface); border-width: 2px; }
.fp-g-hors { box-shadow: inset 4px 0 0 var(--f-encre); }
.fp-g-decompte { color: var(--f-encre-2); }
.fp-g-cell { display: inline-flex; align-items: center; gap: 4px; color: var(--f-encre-2); font: 500 12px/1.3 Inter, system-ui, sans-serif; }

/* Téléphone (≤ 719 px) : défilement horizontal INTERNE au tableau (jamais celui de la page), première colonne collante. */
@media (max-width: 719px) {
  .fp-sj-table { --fp-sj-moment-w: 0px; --fp-sj-groupe-w: 80px; --fp-sj-col: 132px; --fp-sj-col-mixte: 188px; }
  .fp-sj-moment-t { writing-mode: horizontal-tb; transform: none; }
  .fp-sj-moment { display: none; }
  .fp-sj-bande { display: block; }
  .fp-lx-table { --fp-lx-label-w: 112px; --fp-lx-heure: 72px; }
  .fp-eq-table { --fp-lx-label-w: 112px; --fp-lx-heure: 72px; --fp-eq-col: 100px; }
  .fp-sj-etat { flex: 1 1 100%; }
  .fp-eq-dbl-mot { display: none; }
}