/* Planning natif Le Fil (js/planning/, spec docs/specs/2026-10-01-planning-sejour-design.md ; remplace css/planning.css, supprimé).
   Style de Le Fil : encre, filets, pleine largeur, cibles de 44 px et plus, sept tailles de texte (12, 14, 16, 18, 24, 30), aucun effet décoratif,
   aucun verre ni halo. Couleur rare : la famille d'un créneau est un liseré et un pictogramme (jamais la couleur seule : le pictogramme et le mot portent
   le type) ; ambre = ce qui peut coûter (conflit, congé, à pourvoir), brique = refus, sapin = fait. Les feuilles (.fb-voile) sont posées dans <body>.
   Partie 1 : socle, familles de types, tête (navigation, vues, filtres, état et mode), pictogrammes de signes. */
.fp { box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 8px 16px 40px; color: var(--f-encre); font: 400 16px/1.5 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.fp *, .fp *::before, .fp *::after, .fp-voile *, .fp-voile *::before, .fp-voile *::after { box-sizing: border-box; }
.fp [hidden], .fp-voile [hidden] { display: none !important; }
.fp :focus-visible, .fp-voile :focus-visible { outline: 2px solid var(--f-encre); outline-offset: 3px; }
.fp button { font-family: inherit; }
.fp-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; line-height: 0; }
.fp-ico svg { display: block; }
.fp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Familles de types : un liseré et un lavis très léger (jetons --fam-* de tokens.css, clair et sombre) ---------- */
.fp-t-vie-quotidienne { --fp-c: var(--fam-vie); --fp-bg: var(--fam-vie-fond); --fp-line: var(--fam-vie-filet); }
.fp-t-temps-libres { --fp-c: var(--fam-libres); --fp-bg: var(--fam-libres-fond); --fp-line: var(--fam-libres-filet); }
.fp-t-animation { --fp-c: var(--fam-anim); --fp-bg: var(--fam-anim-fond); --fp-line: var(--fam-anim-filet); }
.fp-t-dehors { --fp-c: var(--fam-dehors); --fp-bg: var(--fam-dehors-fond); --fp-line: var(--fam-dehors-filet); }
.fp-t-organisation { --fp-c: var(--fam-orga); --fp-bg: var(--fam-orga-fond); --fp-line: var(--fam-orga-filet); }
.fp-t-neutre { --fp-c: var(--f-encre-2); --fp-bg: var(--f-surface-2); --fp-line: var(--f-filet); }
.fp-t-repos { --fp-c: var(--f-encre-3); --fp-bg: var(--f-surface-2); --fp-line: var(--f-filet); font-style: italic; }
.fp-point { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--fp-c, var(--f-encre-3)); }
.fp-ty { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--fp-c, var(--f-encre-2)); line-height: 0; }
.fp-ty svg { display: block; }
.hub-plan-row .fp-ty { margin: 0 2px; }   /* pictogramme du type dans le bandeau « Aujourd'hui » de la vue d'ensemble */

/* ---------- Tête : navigation, vues, filtres, état ---------- */
.fp-entete { display: grid; gap: 8px; margin: 0 0 12px; }
.fp-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fp-nav { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 48px; }
.fp-nav-titre { flex: 1 1 0; order: 2; min-width: 0; margin: 0; font: 600 18px/1.25 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nav > :nth-child(1) { order: 1; } .fp-nav > :nth-child(2) { order: 3; } .fp-nav > .fp-aujourdhui { order: 4; } .fp-nav > .fp-pas { order: 5; flex: 0 0 auto; }
.fp-nav .fp-bouton-icone { width: 44px; min-width: 44px; padding: 0; }
.fp-nav-titre small { margin-left: 6px; color: var(--f-encre-3); font: 500 14px/1 Inter, system-ui, sans-serif; }
.fp-bouton-icone { position: relative; flex: none; }
.fp-bouton-icone[disabled] { opacity: .4; }
.fp .fb-bouton { min-height: 48px; }
.fp-aujourdhui { flex: none; }
.fp-pas { display: inline-flex; flex: none; gap: 2px; padding: 2px; background: var(--f-surface-2); border: 1px solid var(--f-filet); border-radius: 14px; }
.fp-pas button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--f-encre-2); font: 500 14px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.fp-pas button[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); }

.fp-segments { display: flex; gap: 4px; padding: 4px; background: var(--f-surface-2); border: 1px solid var(--f-filet); border-radius: 14px; min-width: 0; }
.fp-segment { display: inline-flex; flex: 1 1 0; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 44px; padding: 0 4px; border: 0; border-radius: 10px; background: transparent; color: var(--f-encre-2); font: 500 13px/1.1 Inter, system-ui, sans-serif; white-space: nowrap; cursor: pointer; }
.fp-segment[aria-current="page"] { background: var(--f-encre); color: var(--f-fond); }
.fp-segment .fp-ico { display: none; }
@media (min-width: 640px) {
  .fp-segments { display: inline-flex; flex: 0 0 auto; }
  .fp-segment { flex: 0 0 auto; padding: 0 18px; font-size: 14px; }
  .fp-segment .fp-ico { display: inline-flex; }
}

/* Barre de commandes du bureau : navigation, vues et actions sur la même ligne */
@media (min-width: 900px) {
  .fp-entete { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 16px; }
  .fp-entete > .fp-nav { grid-column: 1; flex-wrap: nowrap; }
  .fp-nav { gap: 8px; }
  .fp-nav .fp-bouton-icone { width: 48px; min-width: 48px; }
  .fp-nav > :nth-child(1) { order: 1; } .fp-nav > :nth-child(2) { order: 2; } .fp-nav-titre { order: 3; flex: 0 1 auto; margin: 0 8px; } .fp-nav > .fp-aujourdhui { order: 4; }
  .fp-entete > .fp-segments { grid-column: 2; }
  .fp-entete > .fp-outils { grid-column: 1; }
  /* L'état et le mode se rangent à droite de la rangée des filtres ; la bande du mode actif garde toute la largeur. */
  .fp-tete { display: contents; }
  .fp-tete > .fp-actions { grid-column: 2; justify-content: flex-end; }
  .fp-tete > .fp-mode { grid-column: 1 / -1; }
}
/* Téléphone : un planning publié est le cas normal, il ne se dit pas ; seul « Brouillon » se montre. */
@media (max-width: 899px) { .fp-etat[data-statut="publie"] { display: none; } }

/* Filtres : une rangée de groupes (défilement interne si besoin) et un bouton « Filtres » */
.fp-outils { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fp-outils > .fp-filtres-bouton { margin-left: auto; }
@media (min-width: 900px) { .fp-outils > .fp-filtres-bouton { margin-left: 0; } }
.fp-chips { display: flex; flex: 0 1 auto; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.fp-chips::-webkit-scrollbar { display: none; }
.fp-chip { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 14px; 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; }
.fp-chip:hover { background: var(--f-surface-2); }
.fp-chip[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }
.fp-chip--moi { font-weight: 600; }
.fp-filtres-bouton { flex: none; position: relative; }
.fp-filtres-bouton[data-n]:not([data-n="0"])::after { content: attr(data-n); position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--f-encre); color: var(--f-fond); font: 600 12px/18px Inter, system-ui, sans-serif; text-align: center; }

/* Feuille des filtres */
.fp-bloc-lib { margin: 14px 0 6px; color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-bloc-lib:first-child { margin-top: 0; }
.fp-chips--libre { flex-wrap: wrap; overflow: visible; }
.fp-note { margin: 8px 0 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-note[data-etat="attention"] { color: var(--f-attention); }
.fp-texte { margin: 0; color: var(--f-encre); font: 400 16px/1.5 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-legende { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fp-legende-fam { display: grid; gap: 4px; padding-left: 12px; border-left: 3px solid var(--fp-c); }
.fp-legende-nom { font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.fp-legende-types { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-legende-types li { display: inline-flex; align-items: center; gap: 6px; }

/* État et actions de la page : l'état (brouillon / publié), le mode, les propositions */
.fp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fp-etat { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--f-filet); border-radius: 99px; color: var(--f-encre-2); font: 500 14px/1 Inter, system-ui, sans-serif; white-space: nowrap; }
.fp-etat[data-statut="publie"] { color: var(--f-fait); border-color: var(--f-fait); }
.fp-etat[data-statut="brouillon"] { color: var(--f-attention); border-color: var(--f-attention); }
.fp-compteur[data-n]:not([data-n="0"]) { border-color: var(--f-attention); color: var(--f-attention); }
.fp-compteur .fp-n { min-width: 22px; padding: 3px 7px; border-radius: 99px; background: var(--f-attention); color: var(--f-fond); font: 600 12px/1 Inter, system-ui, sans-serif; text-align: center; }
.fp-compteur[data-n="0"] .fp-n { display: none; }
.fp-actions-fin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

/* Mode édition / proposition : une bande à l'encre (premier signal), la grille teintée (second signal) */
.fp-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 8px 8px 16px; border-radius: 18px; background: var(--f-encre); color: var(--f-fond); }
.fp-mode[data-mode="proposition"] { background: var(--f-surface-2); color: var(--f-encre); border: 1px dashed var(--f-encre-2); }
.fp-mode-texte { display: inline-flex; flex: 1 1 200px; align-items: center; gap: 8px; min-width: 0; font: 600 14px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-mode-texte small { font: 400 14px/1.3 Inter, system-ui, sans-serif; opacity: .8; }
.fp-mode .fb-bouton { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 45%, transparent); }
.fp-mode .fb-bouton:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.fp-mode .fb-bouton--plein { background: var(--f-fond); color: var(--f-encre); border-color: var(--f-fond); }
.fp-mode[data-mode="proposition"] .fb-bouton--plein { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }

/* Publication : liste de ce qui devient visible */
.fp-liste-simple { display: grid; gap: 6px; margin: 0; padding-left: 20px; font: 400 14px/1.45 Inter, system-ui, sans-serif; color: var(--f-encre-2); }
.fp-avert { display: flex; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--f-attention); border-radius: 14px; color: var(--f-attention); font: 500 14px/1.4 Inter, system-ui, sans-serif; }

/* Signes monochromes (verrou, conflit, modifié) : toujours accompagnés d'un mot ou d'une infobulle */
.fp-signe { display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--f-encre-2); line-height: 0; }
.fp-signe--conflit { color: var(--f-attention); }
.fp-modifie { display: inline-flex; flex: none; align-items: center; gap: 3px; padding: 1px 6px; border: 1px solid var(--f-encre-3); border-radius: 99px; color: var(--f-encre-2); font: 600 12px/1.3 Inter, system-ui, sans-serif; }

/* Feuilles : petites (confirmation, portée) et choix en colonne */
.fp-feuille--petite { width: min(100%, 440px); }
.fp-titre-phrase { font: 600 18px/1.4 Inter, system-ui, sans-serif; }
.fp-choix-liste { display: grid; gap: 8px; }
.fp-choix-ligne { justify-content: flex-start; width: 100%; text-align: left; }
.fp-danger { background: var(--f-urgent); border-color: var(--f-urgent); color: var(--f-fond); }
.fp-feuille-tete .fp-bouton-icone { margin: -6px -8px -6px 0; }
@media (prefers-reduced-motion: reduce) { .fp-feuille { animation: none; } }

/* ---------- Partie 2 : la grille (Jour, 3 jours, Semaine, couloirs), les blocs, les rangées « journée entière », les gardes du soir ---------- */
.fp { --fp-texte-3: color-mix(in srgb, var(--f-encre-2) 85%, var(--f-fond)); --fp-gouttiere-l: 54px; }
.fp-vue { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp-scroll { overflow: auto; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); overscroll-behavior: contain; }
/* Mode édition : la grille est teintée et cerclée à l'encre (second signal du mode, après la bande) ; mode proposition : cerclée en pointillé. */
.fp-vue[data-mode="edition"] .fp-scroll { background: var(--f-surface-2); outline: 2px solid var(--f-encre); outline-offset: -2px; }
.fp-vue[data-mode="proposition"] .fp-scroll { background: var(--f-surface-2); outline: 2px dashed var(--f-encre-2); outline-offset: -2px; }
.fp-table { display: grid; position: relative; grid-template-columns: var(--fp-gouttiere-l) repeat(var(--fp-n, 7), minmax(var(--fp-colmin, 110px), 1fr)); grid-template-rows: 60px auto; }
.fp-table.fp-v1 { --fp-colmin: 0px; }
.fp-table.fp-v3 { --fp-colmin: 96px; }
.fp-coin { position: sticky; top: 0; left: 0; z-index: 6; background: var(--f-surface); border-bottom: 1px solid var(--f-filet); border-right: 1px solid var(--f-filet); }
.fp-vue[data-mode="edition"] .fp-coin, .fp-vue[data-mode="edition"] .fp-jour-tete, .fp-vue[data-mode="edition"] .fp-gouttiere,
.fp-vue[data-mode="proposition"] .fp-coin, .fp-vue[data-mode="proposition"] .fp-jour-tete, .fp-vue[data-mode="proposition"] .fp-gouttiere { background: var(--f-surface-2); }
.fp-jour-tete { position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid var(--f-filet); border-right: 1px solid var(--f-filet); background: var(--f-surface); color: var(--f-encre); cursor: pointer; }
.fp-jour-tete:last-of-type { border-right: 0; }
.fp-jour-nom { color: var(--fp-texte-3); font: 500 12px/1 Inter, system-ui, sans-serif; text-transform: capitalize; }
.fp-jour-num { font: 600 18px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
[data-aujourdhui] > .fp-jour-num { display: inline-block; min-width: 30px; padding: 5px 6px; border-radius: 99px; background: var(--f-encre); color: var(--f-fond); text-align: center; }
[data-aujourdhui] > .fp-jour-nom { color: var(--f-encre); font-weight: 600; }
.fp-gouttiere { position: sticky; left: 0; z-index: 4; grid-row: 2; background: var(--f-surface); border-right: 1px solid var(--f-filet); }
.fp-col { grid-row: 2; position: relative; min-width: 0; border-right: 1px solid var(--f-filet); cursor: crosshair;
  background-image: repeating-linear-gradient(to bottom, transparent 0 55px, var(--f-filet) 55px 56px), repeating-linear-gradient(to bottom, transparent 0 27px, color-mix(in srgb, var(--f-filet) 45%, transparent) 27px 28px, transparent 28px 56px); }
.fp-col:last-child { border-right: 0; }
.fp-vue:not([data-mode="edition"]):not([data-mode="proposition"]) .fp-col { cursor: default; }
.fp-heure { position: absolute; right: 6px; transform: translateY(-50%); color: var(--fp-texte-3); font: 400 12px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }
/* Ligne « maintenant » : un trait à l'encre sur la colonne du jour + la pastille de l'heure en gouttière */
.fp-maintenant { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--f-encre); z-index: 3; pointer-events: none; }
.fp-maintenant::before { content: ''; position: absolute; left: -1px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--f-encre); }
.fp-maintenant-heure { position: absolute; right: 3px; transform: translateY(-50%); z-index: 5; padding: 2px 5px; border-radius: 6px; background: var(--f-encre); color: var(--f-fond); font: 600 12px/1.2 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; pointer-events: none; }

/* Un bloc : un liseré de famille, un lavis très léger ; le pictogramme et le titre disent le type, l'état se lit en toutes lettres */
.fp-bloc { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 3px 6px 3px 9px; overflow: hidden; border: 1px solid var(--fp-line, var(--f-filet)); border-radius: 10px; background: color-mix(in srgb, var(--fp-bg, var(--f-surface-2)) 62%, var(--f-surface));
  box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); color: var(--f-encre); cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.fp-bloc:hover { border-color: var(--fp-c, var(--f-encre-3)); }
.fp-vue[data-mode="edition"] .fp-bloc:not([data-fige]):not([data-plage]), .fp-vue[data-mode="proposition"] .fp-bloc:not([data-genre]):not([data-fige]):not([data-plage]) { cursor: grab; }
.fp-bloc.fp-glisse { z-index: 10; cursor: grabbing; opacity: .94; box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)), 0 0 0 2px var(--f-encre); }
.fp-bloc.fp-arme { z-index: 10; box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)), 0 0 0 2px var(--f-encre); }
.fp-bloc-heure { display: none; flex: none; color: var(--f-encre-2); font: 500 12px/1.1 Inter, system-ui, sans-serif; }
.fp-bloc.fp-glisse .fp-bloc-heure, .fp-bloc--ebauche .fp-bloc-heure { display: block; }
.fp-bloc-ligne { display: flex; align-items: flex-start; gap: 4px; min-width: 0; }
.fp-bloc-ligne .fp-ty { margin-top: 1px; }
.fp-bloc-titre { flex: 1 1 0; min-width: 0; font: 600 14px/1.2 Inter, system-ui, sans-serif; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fp-bloc--xs { padding-block: 1px; }
.fp-bloc--xs .fp-bloc-titre { font-size: 12px; -webkit-line-clamp: 1; }
.fp-bloc--xs .fp-ty svg { width: 12px; height: 12px; }
.fp-bloc[data-fiche] { border-width: 1px; }
.fp-bloc-inits, .fp-bloc-anim, .fp-bloc-conge { flex: none; color: var(--f-encre-2); font: 400 12px/1.25 Inter, system-ui, sans-serif; }
.fp-bloc-inits { margin-top: auto; letter-spacing: .04em; }
.fp-bloc-conge { color: var(--f-attention); font-weight: 500; }
.fp-bloc-anim { container-type: inline-size; display: block; }
.fp-anim-l { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-anim-pre { display: none; }
@container (min-width: 96px) { .fp-anim-ini { display: none; } .fp-anim-pre { display: inline; } }
.fp-bloc[data-conflit] { border-color: var(--f-attention); }
.fp-bloc[data-genre="propose"], .fp-bloc[data-genre="suppression"] { border-style: dashed; }
.fp-bloc[data-genre="fantome"] { border-style: dashed; opacity: .72; }
.fp-bloc[data-genre="suppression"] .fp-bloc-titre { text-decoration: line-through; }
.fp-bloc[data-fige] { cursor: default; }
.fp-bloc[data-fige] .fp-poignee { display: none; }
.fp-bloc-ligne .fp-signe { margin-top: 2px; }
.fp-bloc--ebauche { opacity: .7; border-style: dashed; pointer-events: none; z-index: 9; }
.fp-poignee { position: absolute; left: 0; right: 0; height: 12px; z-index: 2; cursor: ns-resize; touch-action: none; }
.fp-poignee--haut { top: -3px; } .fp-poignee--bas { bottom: -3px; }
.fp-poignee::after { content: ''; position: absolute; left: 50%; width: 26px; height: 3px; border-radius: 2px; background: var(--fp-c, var(--f-encre)); opacity: 0; transform: translateX(-50%); }
.fp-poignee--haut::after { top: 2px; } .fp-poignee--bas::after { bottom: 2px; }
.fp-bloc:hover .fp-poignee::after, .fp-bloc.fp-arme .fp-poignee::after { opacity: .7; }
/* Plage bloquée : un fond hachuré NEUTRE (autre sens que le verrou), le libellé en bouton ; le fond est traversable (on pose un créneau par-dessus, avec avertissement) */
.fp-bloc[data-plage] { z-index: 0; padding: 0; cursor: default; pointer-events: none; touch-action: auto; box-shadow: none; border: 1px dashed var(--f-encre-3); border-radius: 10px; color: var(--f-encre-2);
  background: var(--f-surface-2) repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--f-encre-3) 28%, transparent) 8px 10px); }
.fp-plage-lib { pointer-events: auto; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: calc(100% - 4px); min-height: 28px; margin: 2px; padding: 2px 8px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface); color: var(--f-encre); font: 600 12px/1.2 Inter, system-ui, sans-serif; cursor: pointer; }
.fp-plage-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Étiquette de proposition : le mot et le signe */
.fp-etiq { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: var(--f-encre); font: 600 12px/1.3 Inter, system-ui, sans-serif; container-type: inline-size; }
.fp-etiq-sg { display: inline-flex; flex: none; line-height: 0; }
.fp-etiq-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-bloc .fp-etiq { flex: none; }
.fp-modifie { align-self: flex-start; margin-top: 1px; }
.fp-bloc .fp-modifie { padding: 0 5px; font-size: 12px; }
.fp-bloc--xs .fp-modifie-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Rangées « journée entière » : repos posés à 00:00 et barres des congés validés */
.fp-toutjour { display: grid; grid-template-columns: var(--fp-gouttiere-l) repeat(var(--fp-n, 7), minmax(0, 1fr)); min-height: 36px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface-2); overflow: hidden; }
.fp-toutjour-gouttiere { border-right: 1px solid var(--f-filet); }
.fp-toutjour-col { display: flex; flex-wrap: wrap; align-content: center; gap: 4px; min-width: 0; padding: 4px 6px; border-right: 1px solid var(--f-filet); }
.fp-toutjour-col:last-child { border-right: 0; }
.fp-toutjour--conges { grid-auto-rows: 22px; row-gap: 2px; min-height: calc(var(--fp-conge-rangs, 1) * 24px + 6px); padding-block: 3px; }
.fp-repos, .fp-conge { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface); color: var(--f-encre-2); font: 400 12px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-repos { font-style: italic; padding-right: 4px; }
.fp-repos-x { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--f-encre-2); cursor: pointer; }
.fp-repos-x::after { content: ''; position: absolute; inset: -10px; }
.fp-conge { align-self: center; background: var(--f-surface-2) repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--f-encre-3) 30%, transparent) 6px 7px); }
.fp-liste-haut .fp-repos, .fp-liste-haut .fp-conge { padding-right: 10px; }

/* Couloirs : une colonne par groupe */
.fp-table.fp-couloirs { grid-template-rows: 56px auto; }
.fp-couloirs .fp-col { border-right: 1px solid var(--f-filet); }
.fp-coin--jour { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.fp-couloir-tete { grid-row: 1; position: sticky; top: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 0 6px; background: var(--f-surface); border-bottom: 1px solid var(--f-filet); border-right: 1px solid var(--f-filet); }
.fp-vue[data-mode="edition"] .fp-couloir-tete, .fp-vue[data-mode="proposition"] .fp-couloir-tete { background: var(--f-surface-2); }
.fp-couloir-tete:last-of-type { border-right: 0; }
.fp-couloir-nom { max-width: 100%; font: 600 14px/1.2 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-couloir-age { max-width: 100%; color: var(--fp-texte-3); font: 400 12px/1.2 Inter, system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-couloir-tete[data-equipe] .fp-couloir-nom { font-style: italic; }
.fp-etendu-couche { grid-row: 2; position: relative; min-width: 0; pointer-events: none; }
.fp-etendu-couche .fp-bloc:not([data-plage]) { pointer-events: auto; }
.fp-etendu-couche .fp-bloc:not(.fp-glisse):not(.fp-arme) { z-index: 0; }
.fp-couloirs-choix { position: sticky; top: 0; z-index: 7; padding: 2px 0 4px; background: var(--f-fond); }

/* Gardes du soir (vue Jour) : une bande discrète au-dessus des couloirs */
.fp-gardes { display: flex; align-items: flex-start; gap: 12px; padding: 4px 12px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); }
.fp-gardes-tete { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; font: 600 14px/1.2 Inter, system-ui, sans-serif; }
.fp-gardes-corps { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.fp-gardes-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.fp-gardes-temps { display: inline-flex; align-items: baseline; gap: 6px; font: 400 14px/1.3 Inter, system-ui, sans-serif; }
.fp-gardes-detail { color: var(--fp-texte-3); font-size: 12px; }
.fp-gardes-puces { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fp-garde-puce { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-height: 44px; padding: 4px 12px; 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; text-align: left; cursor: pointer; }
.fp-garde-puce[data-etat="vide"] { border-style: dashed; color: var(--f-encre-2); }
.fp-garde-puce[data-etat="conge"] { border-color: var(--f-attention); }
.fp-garde-poste { font-weight: 600; }
.fp-garde-alerte { display: inline-flex; align-items: center; gap: 4px; color: var(--f-attention); font: 500 12px/1.3 Inter, system-ui, sans-serif; }

/* Le bouton ＋ : l'entrée unique de création au doigt, dans la zone du pouce, au-dessus de la barre basse */
.fp-fab { position: fixed; right: 16px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: var(--f-encre); color: var(--f-fond); cursor: pointer; }
.fp-fab:active { transform: scale(.94); }
@media (min-width: 900px) { .fp-fab { bottom: 28px; right: 28px; } }

/* États sans grille */
.fp-vide { display: grid; justify-items: start; gap: 10px; max-width: 520px; margin: 24px 0; }
.fp-vide-titre { font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fp-vide-texte { margin: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .fp-fab:active { transform: none; } }

/* ---------- Partie 3 : la Liste et « Moi » — le fil de la journée (une ligne verticale, l'heure à gauche, une carte par créneau) ---------- */
.fp-liste, .fp-moi { --fp-t: 52px; --fp-axe: calc(var(--fp-t) + 15px); max-width: 720px; margin: 0 auto; width: 100%; }
.fp-jours { display: flex; gap: 6px; padding: 2px 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fp-jours::-webkit-scrollbar { display: none; }
.fp-jour { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 2px; min-width: 56px; min-height: 68px; padding: 8px 6px 6px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); cursor: pointer; }
.fp-jour .fp-jour-nom { color: inherit; opacity: .8; }
.fp-jour[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }
.fp-jour[data-aujourdhui]:not([aria-pressed="true"]) { border-color: var(--f-encre); border-width: 2px; padding: 7px 5px 5px; }
.fp-jour .fp-jour-num { padding: 0; min-width: 0; background: transparent; color: inherit; }
.fp-jour-points { display: flex; gap: 3px; height: 5px; margin-top: 2px; }
.fp-jour-point { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.fp-liste-haut { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }

.fp-fil { position: relative; margin: 4px 0 0; padding: 0; list-style: none; }
.fp-fil::before { content: ''; position: absolute; left: calc(var(--fp-axe) - 1px); top: 0; bottom: 0; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--f-encre) 18%, transparent); }
.fp-fil-ligne { position: relative; display: grid; grid-template-columns: var(--fp-t) minmax(0, 1fr); gap: 0 30px; padding: 5px 0; }
.fp-fil-ligne::after { content: ''; position: absolute; left: calc(var(--fp-axe) - 6px); top: 21px; width: 12px; height: 12px; border-radius: 50%; background: var(--f-fond); border: 2px solid var(--f-encre-3); }
.fp-fil-ligne[data-en-cours]::after, .fp-fil-ligne[data-repere="maintenant"]::after { background: var(--f-encre); border-color: var(--f-encre); }
.fp-fil-ligne[data-passe] { opacity: .62; }
.fp-fil-h { display: flex; flex-direction: column; align-items: flex-end; padding-top: 9px; font-variant-numeric: tabular-nums; }
.fp-fil-debut { font: 600 14px/1.4 Inter, system-ui, sans-serif; }
.fp-fil-fin { color: var(--fp-texte-3); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-fil-carte { display: grid; align-content: center; gap: 3px; width: 100%; min-width: 0; min-height: 56px; margin: 0; padding: 10px 14px 10px 16px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); color: var(--f-encre); box-shadow: inset 4px 0 0 var(--fp-c, var(--f-filet)); font: inherit; text-align: left; cursor: pointer; }
.fp-fil-carte:hover { background: var(--f-surface-2); }
.fp-fil-ligne[data-en-cours] .fp-fil-carte, .fp-fil-ligne[data-repere="maintenant"] .fp-fil-carte { border: 2px solid var(--f-encre); padding: 9px 13px 9px 15px; }
.fp-fil-ligne[data-repere="ensuite"] .fp-fil-carte { border-color: var(--f-encre-2); }
.fp-fil-carte[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) 24%, transparent) 8px 10px); }
.fp-fil-carte[data-genre="propose"], .fp-fil-carte[data-genre="fantome"], .fp-fil-carte[data-genre="suppression"] { border-style: dashed; }
.fp-fil-carte[data-conflit] { border-color: var(--f-attention); }
.fp-fil-titre { display: flex; align-items: center; gap: 8px; min-width: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fp-fil-titre-txt { min-width: 0; overflow-wrap: anywhere; }
.fp-fil-carte[data-genre="suppression"] .fp-fil-titre-txt { text-decoration: line-through; }
.fp-fil-repere { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--f-encre); color: var(--f-fond); font: 600 12px/1.4 Inter, system-ui, sans-serif; }
.fp-fil-ligne[data-repere="ensuite"] .fp-fil-repere { background: transparent; color: var(--f-encre); border: 1px solid var(--f-encre-2); }
.fp-fil-meta { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-fil-doublon { display: inline-flex; align-items: flex-start; gap: 6px; color: var(--f-attention); font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fp-fil-maintenant { position: relative; display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 2px 0; }
.fp-fil-maintenant::after { content: ''; flex: 1; height: 2px; border-radius: 1px; background: var(--f-encre); }
.fp-fil-maintenant-heure { min-width: var(--fp-t); padding: 2px 6px; border-radius: 6px; background: var(--f-encre); color: var(--f-fond); font: 600 12px/1.4 Inter, system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; }
.fp-fil-vide { list-style: none; display: grid; justify-items: start; gap: 10px; padding: 20px 0 20px var(--fp-t); }
.fp-fil-vide .fp-vide-texte { padding-left: 30px; }
.fp-fil-vide .fb-bouton { margin-left: 30px; }
.fp-etiquette { display: inline-block; padding: 3px 10px; border: 1px solid var(--f-filet); border-radius: 99px; color: var(--f-encre-2); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fp-fiche-ligne--attention { color: var(--f-attention); }

/* « Moi » : qui, ma garde, mon repos, mes groupes */
.fp-moi-qui { margin: 4px 0 10px; color: var(--f-encre-2); font: 500 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-moi-garde { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); }
.fp-moi-garde-corps { display: grid; gap: 4px; min-width: 0; font: 400 14px/1.5 Inter, system-ui, sans-serif; }
.fp-moi-garde-l { margin: 0; overflow-wrap: anywhere; }
.fp-moi-garde-lien { display: inline; padding: 10px 2px; color: var(--f-encre); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fp-moi-refs { margin: 0 0 8px; }
.fp-moi-repos { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 12px 14px; border: 1px dashed var(--f-encre-3); border-radius: 18px; color: var(--f-encre-2); font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fp-moi-mes { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--f-filet); }
.fp-moi-mes-titre { margin: 0 0 10px; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
@media (min-width: 900px) { .fp-liste, .fp-moi { margin: 0; } }