/* Planning natif Le Fil — les feuilles (css/fil-planning.css pour le socle, la tête et les vues). Les feuilles (.fb-voile, css/fil-budget.css) sont posées dans <body> : elles héritent des
   jetons de <html>. Style de Le Fil : encre, filets, cibles de 44 px et plus, sept tailles de texte, aucun effet décoratif.
   Contenu : la fiche d'un créneau (création, modification, lecture), les sélecteurs (type, portée, animateurs, lieu), les propositions, les gardes, les réglages. */
.fp-feuille { --fp-texte-3: color-mix(in srgb, var(--f-encre-2) 85%, var(--f-fond)); }
.fp-feuille--creneau { width: min(100%, 560px); }
.fp-feuille--garde { width: min(100%, 520px); }
.fp-feuille-corps { display: grid; gap: 14px; align-content: start; }
.fp-feuille-corps > * { min-width: 0; }
.fp-voile .fp-note { margin: 0; }
.fp-note--icone { display: flex; align-items: flex-start; gap: 8px; }
.fp-voile .fp-avert { display: flex; align-items: flex-start; gap: 8px; margin: 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; overflow-wrap: anywhere; }
.fp-voile .fp-avert > span:last-child { color: var(--f-encre); }
.fp-voile .fp-bloc-lib { margin: 0 0 -6px; }
.fp-voile .fb-feuille-tete { align-items: flex-start; }
.fp-voile .fb-feuille-titre { overflow-wrap: anywhere; }

/* Titre */
.fp-titre-saisie { font-weight: 600; font-size: 18px; }

/* Type : treize boutons à pictogramme, rangés par famille, un toucher */
.fp-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.fp-type { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; padding: 0 10px 0 12px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); font: 500 14px/1.2 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.fp-type:hover { background: var(--f-surface-2); }
.fp-type-lib { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-type[aria-checked="true"] { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); font-weight: 600; box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); }
.fp-type[aria-checked="true"] .fp-ty { color: inherit; }
.fp-type:disabled { opacity: .5; cursor: default; }

/* Quand : le jour ‹ › puis le début, la fin, les durées */
.fp-quand { display: grid; gap: 10px; }
.fp-quand-rang { display: flex; align-items: center; gap: 8px; }
.fp-quand-jour { flex: 1; min-width: 0; text-align: center; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fp-quand-heures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fp-durees { gap: 6px; }

/* Plus : lieu, animateurs, fiche, verrou, plage bloquée, répétition */
.fp-plus-corps { display: grid; gap: 14px; }
.fp-plus-bloc { display: grid; gap: 8px; }
.fp-plus-bloc .fp-bloc-lib { margin: 0; }
.fp-fiche-lien { justify-content: flex-start; width: 100%; text-align: left; }
.fp-lieu { display: grid; gap: 8px; }
.fp-lieu-nouveau-rang { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-lieu-nouveau-rang .fb-saisie { flex: 1 1 200px; width: auto; }
.fp-lieu-note { display: grid; justify-items: start; gap: 8px; }
.fp-lieu-nouveau { display: grid; gap: 8px; }

/* Animateurs : des pastilles retirables, un bouton « Ajouter », les conflits en ambre */
.fp-anim { display: grid; gap: 8px; justify-items: start; }
.fp-anim-puces { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fp-anim-vide { color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-personne { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 2px 0 14px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface); font: 500 14px/1.2 Inter, system-ui, sans-serif; }
.fp-personne:not(:has(.fp-personne-x)) { padding-right: 14px; }
.fp-personne[data-etat="conge"] { border-color: var(--f-attention); color: var(--f-attention); }
.fp-personne[data-etat="retire"] { border-style: dashed; color: var(--f-encre-2); text-decoration: line-through; }
.fp-personne-statut { color: var(--f-encre-2); font: 400 12px/1.2 Inter, system-ui, sans-serif; text-decoration: none; display: inline-block; }
.fp-personne[data-etat="conge"] .fp-personne-statut { color: var(--f-attention); }
.fp-personne-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--f-encre-2); cursor: pointer; }
.fp-personne-x:hover { background: var(--f-surface-2); }
.fp-anim-conflits { display: grid; gap: 6px; width: 100%; }

/* Fiche en lecture : des lignes à pictogramme, peu de mots */
.fp-fiche { display: grid; gap: 12px; }
.fp-fiche-etat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.fp-fiche-type, .fp-fiche-fige { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface-2); box-shadow: inset 3px 0 0 var(--fp-c, var(--f-encre-3)); font: 500 14px/1.2 Inter, system-ui, sans-serif; }
.fp-fiche-fige { box-shadow: none; color: var(--f-encre-2); padding: 0 12px 0 10px; }
.fp-fiche-ligne { display: flex; align-items: flex-start; gap: 12px; min-width: 0; color: var(--f-encre); }
.fp-fiche-ligne > .fp-ico { margin-top: 2px; color: var(--f-encre-2); }
.fp-fiche-texte { min-width: 0; font: 400 16px/1.45 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-fiche-ligne--quand .fp-fiche-texte { font-weight: 600; }
.fp-enfants { margin: 0; }
.fp-enfant { padding: 4px 10px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface-2); color: var(--f-encre); font: 400 14px/1.3 Inter, system-ui, sans-serif; white-space: nowrap; }
.fp-enfant[title] { border-color: var(--f-attention); cursor: help; }

/* Avant → après : l'ancienne valeur barrée, la nouvelle en gras avec une flèche (lisible sans la couleur) */
.fp-avap { display: grid; gap: 6px; margin: 0; }
.fp-avap-ligne { display: grid; grid-template-columns: minmax(80px, auto) minmax(0, 1fr); gap: 2px 12px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface-2); }
.fp-avap-lbl { margin: 0; color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-avap-vals { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; min-width: 0; font: 400 14px/1.4 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-avap-avant { color: var(--f-encre-2); }
.fp-avap-apres { font-weight: 600; }

/* Propositions : À valider (direction) et Mes propositions (équipe) */
.fp-feuille--panneau { width: min(100%, 520px); }
.fp-props { display: grid; gap: 10px; }
.fp-props-section { display: grid; gap: 10px; }
.fp-props-section + .fp-props-section { margin-top: 8px; }
.fp-props-titre { margin: 0; color: var(--f-encre-2); font: 600 14px/1.3 Inter, system-ui, sans-serif; }
.fp-prop { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); }
.fp-prop[data-genre="creneau"] { border-style: dashed; }
.fp-prop[data-obsolete] { border-color: var(--f-attention); }
.fp-prop[data-occupee] { opacity: .6; }
.fp-prop-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-prop-genre { display: inline-flex; align-items: center; gap: 6px; color: var(--f-encre); font-weight: 600; }
.fp-prop-date, .fp-prop-etat { margin-left: auto; }
.fp-prop-titre { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; overflow-wrap: anywhere; }
.fp-prop-ou { margin: 0; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-prop-actions { display: grid; gap: 8px; }
.fp-prop-refus { display: flex; gap: 8px; }
.fp-prop-refus .fb-saisie { flex: 1 1 auto; width: auto; min-width: 0; }
.fp-prop-confirmation { display: grid; gap: 8px; }
.fp-prop-voir { justify-self: start; }
.fp-prop--mini[data-etat="refusee"] { border-color: var(--f-urgent); }
.fp-prop--mini[data-etat="acceptee"] .fp-prop-etat { color: var(--f-fait); }
@media (min-width: 900px) {
  /* Au bureau, le panneau est un volet à droite : la grille reste visible et vivante derrière (la décision se voit tout de suite). */
  .fp-voile--panneau { align-items: stretch; justify-content: flex-end; padding: 0; background: transparent; pointer-events: none; }
  .fp-voile--panneau .fp-feuille--panneau { pointer-events: auto; width: 460px; max-height: none; height: 100%; border-radius: 0; border-width: 0 0 0 1px; animation: none; }
}

/* Gardes : confier, échanger */
.fp-confier { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface-2); }
.fp-reprend { display: grid; gap: 6px; }
.fp-reprend-membre { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; min-height: 52px; padding: 8px 14px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 500 14px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.fp-reprend-membre:disabled { opacity: .6; cursor: default; }
.fp-reprend-compte { color: var(--f-encre-2); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-reprend-raison { grid-column: 1 / -1; color: var(--f-attention); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-echange { display: grid; gap: 8px; }
.fp-jours-liste, .fp-jours { gap: 6px; }

/* Réglages : groupes, lieux, postes de garde */
.fp-feuille--reglages { width: min(100%, 720px); }
.fp-rg-sec { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--f-filet); }
.fp-rg-sec:last-of-type { border-bottom: 0; }
.fp-rg-h { margin: 0; font: 600 18px/1.3 Inter, system-ui, sans-serif; }
.fp-rg-liste { display: grid; gap: 8px; }
.fp-rg-carte { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--f-filet); border-radius: 18px; background: var(--f-surface); }
.fp-rg-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fp-rg-nom { flex: 1 1 180px; width: auto; min-width: 0; }
.fp-rg-ages { display: flex; align-items: center; gap: 6px; }
.fp-rg-ages .fb-saisie { width: 76px; padding-inline: 8px; text-align: center; }
.fp-rg-mini { color: var(--f-encre-2); font: 400 14px/1.2 Inter, system-ui, sans-serif; }
.fp-rg-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-rg-actions--fin { justify-content: flex-end; }
.fp-rg-ajout { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-rg-ajout .fb-saisie { flex: 1 1 220px; width: auto; }
.fp-rg-etat:empty { display: none; }
.fp-rg-poste-texte { display: grid; flex: 1 1 200px; gap: 4px; min-width: 0; }
.fp-rg-poste-titre { display: flex; align-items: center; gap: 8px; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fp-rg-poste-sous { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--f-encre-2); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-rg-champ { display: grid; gap: 6px; }
.fp-rg-pas { display: flex; align-items: center; gap: 8px; }
.fp-rg-nb { width: 84px; text-align: center; }
.fp-rg-horaire { display: grid; gap: 8px; }
.fp-rg-horaire-lib { display: inline-flex; align-items: center; gap: 8px; }
.fp-rg-heures { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fp-rg-heures .fb-saisie { width: 120px; }
.fp-rg-ajout-poste { justify-self: start; }
.fp-rg-err-msg { margin: 0; }

/* Tour de garde */
.fp-tg { width: min(100%, 720px); }
.fp-tg-tour-corps { gap: 16px; }
.fp-tg-t-sec { display: grid; gap: 8px; }
.fp-tg-t-h { margin: 0; font: 600 16px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-t-aide, .fp-tg-t-note, .fp-tg-t-tirage, .fp-tg-t-resume { margin: 0; color: var(--f-encre-2); font: 400 14px/1.45 Inter, system-ui, sans-serif; }
.fp-tg-pool { display: flex; flex-wrap: wrap; gap: 6px; }
.fp-tg-membre { flex-direction: column; align-items: flex-start; gap: 0; padding-block: 6px; text-align: left; }
.fp-tg-membre-role { font: 400 12px/1.2 Inter, system-ui, sans-serif; opacity: .8; }
.fp-tg-t-periode-ligne { display: flex; align-items: center; gap: 10px; }
.fp-tg-t-lbl { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-t-date { width: auto; }
.fp-tg-t-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fp-tg-t-perime { margin: 0; color: var(--f-attention); font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fp-tg-compteurs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fp-tg-cpt-titre { color: var(--f-encre-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-cpt { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 10px; border: 1px solid var(--f-filet); border-radius: 99px; background: var(--f-surface-2); font: 500 14px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-cpt-hors { opacity: .6; border-style: dashed; }
.fp-tg-cpt-v { font-weight: 600; font-variant-numeric: tabular-nums; }
.fp-tg-cpt-sep, .fp-tg-cpt-lg { color: var(--f-encre-2); font-size: 12px; }
.fp-tg-ap-defil { overflow: auto; max-width: 100%; border: 1px solid var(--f-filet); border-radius: 14px; }
.fp-tg-ap { border-collapse: separate; border-spacing: 0; min-width: 100%; }
.fp-tg-ap-cap { caption-side: bottom; padding: 6px 10px; color: var(--f-encre-2); text-align: left; font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-ap th, .fp-tg-ap td { padding: 6px; border-bottom: 1px solid var(--f-filet); border-right: 1px solid var(--f-filet); vertical-align: top; text-align: left; font: 400 14px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-ap-jour { position: sticky; left: 0; z-index: 1; background: var(--f-surface); white-space: nowrap; font-weight: 600; }
.fp-tg-ap-coin { position: sticky; left: 0; z-index: 2; background: var(--f-surface); }
.fp-tg-ap-poste { min-width: 150px; background: var(--f-surface); }
.fp-tg-ap-poste-nom { display: block; font-weight: 600; }
.fp-tg-ap-poste-sous { display: block; color: var(--f-encre-2); font-size: 12px; }
.fp-tg-ap-case { display: grid; gap: 4px; min-width: 150px; }
.fp-tg-slot { 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; }
button.fp-tg-slot { cursor: pointer; }
.fp-tg-slot-t { color: var(--f-encre-2); font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-slot-vide { color: var(--f-attention); }
.fp-tg-slot-a-pourvoir { border-style: dashed; }
.fp-tg-slot-signale { border-color: var(--f-attention); }
.fp-tg-slot-fixe { background: var(--f-surface); }
.fp-tg-slot-etat, .fp-tg-slot-alerte { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-slot-alerte { color: var(--f-attention); }
.fp-tg-alertes { display: grid; gap: 6px; }
.fp-tg-alertes-ok, .fp-tg-alertes-t { margin: 0; color: var(--f-encre-2); font: 500 14px/1.4 Inter, system-ui, sans-serif; }
.fp-tg-alertes-liste { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fp-tg-alerte { display: flex; align-items: flex-start; gap: 8px; color: var(--f-attention); font: 400 14px/1.4 Inter, system-ui, sans-serif; }
.fp-tg-alerte > span:last-child { color: var(--f-encre); }
.fp-tg-t-pied { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid var(--f-filet); }
.fp-tg-choix-liste { display: grid; gap: 6px; }
.fp-tg-choix-membre { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 52px; padding: 8px 14px; border: 1px solid var(--f-filet); border-radius: 14px; background: var(--f-surface); color: var(--f-encre); font: 500 14px/1.3 Inter, system-ui, sans-serif; text-align: left; cursor: pointer; }
.fp-tg-choix-membre[aria-pressed="true"] { background: var(--f-encre); color: var(--f-fond); border-color: var(--f-encre); }
.fp-tg-choix-membre:disabled { opacity: .6; cursor: default; }
.fp-tg-choix-cpt { color: inherit; opacity: .8; font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-choix-note { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; color: var(--f-attention); font: 400 12px/1.3 Inter, system-ui, sans-serif; }
.fp-tg-choix-membre[aria-pressed="true"] .fp-tg-choix-note { color: inherit; }
.fp-tg-choix-vider { justify-content: flex-start; }