/* css/planning.css — module Planning (grille Jour / 3 j / Semaine, Liste, fiches, gestes, filtres, projections).
   Règles .pe- / .pg- / .pl- / .plan-* sorties de css/styles.css telles quelles, dans leur ordre d'origine
   (brique F1, spec 2026-10-01-planning-sejour § 12) ; chargée juste après styles.css dans index.html.
   Aucune règle modifiée : rendu identique (styles calculés comparés avant / après, tools/recette/recette_planning_f1.mjs). */

/* ============================================================
   MODULE PLANNING — épine dorsale temporelle (B3)
   Vue collective : grille emploi du temps (axe horaire × jours).
   Web-first desktop, dense. Réutilise tokens + .glass / .sv-panel.
   ============================================================ */

/* — Filtres combinables de la vue Lecture (2026-07-02, remplace la sous-nav à
   onglets : collective/individuelle/groupe/prestataires/parents) — */
.plan-filt-bar{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:var(--sp-3)}
.plan-filt-chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-3);
  color:var(--text-2); font-size:.82rem; font-weight:500; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.plan-filt-chip:hover{border-color:var(--line-2); color:var(--text)}
.plan-filt-chip.on{
  border-color:var(--accent-glow); color:var(--text);
  background:var(--accent-bg); box-shadow:var(--shadow-accent);
}

/* — Barre d'outils unique du module Planning (filtres + ＋ Congé + légende) :
   UNE ligne compacte, scroll horizontal au besoin — l'écran appartient à la grille. — */
.plan-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; margin-bottom:8px; padding-bottom:2px;
}
.plan-toolbar::-webkit-scrollbar{display:none}
.plan-toolbar > *{flex:none}
.plan-toolbar .plan-filt-chip{padding:5px 11px; font-size:.78rem}
.plan-toolbar .plan-repos-btn{margin-bottom:0}
.plan-legend-inline{margin-bottom:0; flex-wrap:nowrap; margin-left:auto; padding-left:10px}
.plan-fill .pg-bar{margin-bottom:6px}

/* — Légende des types (dérivée des données présentes) — */
.plan-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:var(--sp-3)}
.plan-leg-chip{
  display:inline-flex; align-items:center; gap:7px; font-size:.74rem; color:var(--text-2);
}
.plan-leg-dot{width:10px; height:10px; border-radius:3px; flex:none; background:var(--plan-c, var(--accent))}

/* — Conteneur de la grille — */
.plan-gridwrap{padding:0}
/* Scroll horizontal : la grille s'élargit librement, le wrapper coupe et scrolle. */
.plan-inner-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.plan-inner-scroll::-webkit-scrollbar{display:none}
.plan-grid-head{
  display:grid;
  grid-template-columns:var(--plan-gutter-w, 62px) repeat(var(--plan-n-days, 7), minmax(72px, 1fr));
  min-width:calc(var(--plan-gutter-w, 62px) + var(--plan-n-days, 7) * 72px);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--glass-soft-from), transparent);
  position:sticky; top:0; z-index:3;
}
.plan-gutter-head{border-right:1px solid var(--line)}
.plan-day-head{
  padding:10px 8px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:2px; min-width:0;
}
.plan-day-name{font-size:.82rem; font-weight:600; color:var(--text); letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.plan-day-count{font-size:.58rem; color:var(--text-3); letter-spacing:.06em; white-space:nowrap}

.plan-grid-body{
  display:grid;
  grid-template-columns:var(--plan-gutter-w, 62px) repeat(var(--plan-n-days, 7), minmax(72px, 1fr));
  min-width:calc(var(--plan-gutter-w, 62px) + var(--plan-n-days, 7) * 72px);
  position:relative;
}

/* Gouttière des heures (graduations à gauche). */
.plan-gutter{position:relative; border-right:1px solid var(--line)}
.plan-hour{position:absolute; left:0; right:0; height:0}
.plan-hour-lbl{
  position:absolute; top:-7px; right:9px; font-size:.62rem; color:var(--text-3); letter-spacing:.04em;
}

/* Colonne d'un jour : lignes de fond + blocs absolus. */
.plan-col{position:relative; border-left:1px solid var(--line)}
.plan-row-line{position:absolute; left:0; right:0; height:1px; background:var(--line); opacity:.55}

/* Bloc-créneau. */
.plan-block{
  position:absolute; left:5px; right:5px; overflow:hidden;
  border-radius:var(--r-sm); padding:5px 8px; cursor:default;
  border:1px solid var(--plan-line, var(--line-2));
  border-left:3px solid var(--plan-c, var(--accent));
  background:var(--plan-bg, var(--surface-2));
  box-shadow:var(--shadow-card-hover);
  display:flex; flex-direction:column; gap:1px; min-height:0;
}
.plan-block-time{font-size:.6rem; color:var(--text-3); letter-spacing:.03em; line-height:1.1}
.plan-block-titre{
  font-size:.76rem; font-weight:600; color:var(--text); line-height:1.18;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.plan-block-meta{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:1px}
.plan-block-grp{
  font-size:.6rem; color:var(--plan-c, var(--accent)); letter-spacing:.05em; font-weight:600;
}
.plan-block-anim{font-size:.66rem; color:var(--text-2); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}

/* — Palette des 5 familles d'événements (F2, spec planning § 5) : une paire lavis / encre + filet par famille, jetons
   --fam-* de tokens.css (clair et sombre, contrastes AA mesurés par tests/palette.test.mjs). La famille d'un type est
   donnée par planningTypeFamily() (js/planning/model.js) ; un ancien code de type se lit sous son nouveau type. `repos`
   (hérité) et `neutre` (plage bloquée, garde, inconnu) restent hors famille. — */
.plan-t-vie-quotidienne{--plan-c:var(--fam-vie); --plan-bg:var(--fam-vie-fond); --plan-line:var(--fam-vie-filet)}
.plan-t-temps-libres{--plan-c:var(--fam-libres); --plan-bg:var(--fam-libres-fond); --plan-line:var(--fam-libres-filet)}
.plan-t-animation{--plan-c:var(--fam-anim); --plan-bg:var(--fam-anim-fond); --plan-line:var(--fam-anim-filet)}
.plan-t-dehors{--plan-c:var(--fam-dehors); --plan-bg:var(--fam-dehors-fond); --plan-line:var(--fam-dehors-filet)}
.plan-t-organisation{--plan-c:var(--fam-orga); --plan-bg:var(--fam-orga-fond); --plan-line:var(--fam-orga-filet)}
.plan-t-neutre{--plan-c:var(--texte-2); --plan-bg:var(--s3); --plan-line:var(--ligne-2)}
.plan-t-repos{--plan-c:var(--texte-3); --plan-bg:var(--s3); --plan-line:var(--ligne-2); font-style:italic}
.plan-block-del{position:absolute; top:3px; right:4px; background:none; border:none; color:var(--plan-c); opacity:.55; cursor:pointer; font-size:11px; padding:0 2px; line-height:1}
.plan-block-del:hover{opacity:1}
.plan-mode-bar{display:flex; justify-content:flex-end; margin-bottom:var(--sp-2)}
.plan-mode-btn{background:var(--s1); border:1px solid var(--ligne-2); color:var(--txt-2); border-radius:6px; padding:5px 12px; font-size:13px; cursor:pointer; transition:background .15s}
.plan-mode-btn.on{background:var(--accent-bg); border-color:var(--accent); color:var(--accent)}
.plan-mode-btn:hover{background:var(--survol-fond); border-color:var(--survol-filet); color:var(--survol-texte)}
.plan-repos-btn{margin-bottom:var(--sp-3); background:var(--s1); border:1px solid var(--ligne-2); color:var(--txt-2); border-radius:6px; padding:5px 12px; font-size:13px; cursor:pointer; transition:background .15s}
.plan-repos-btn:hover{background:var(--survol-fond); border-color:var(--survol-filet); color:var(--survol-texte)}
.repos-modal{min-width:280px}
.repos-field{display:flex; align-items:center; gap:10px; margin-bottom:var(--sp-2)}
.repos-label{min-width:50px; font-size:13px; color:var(--txt-2)}
.repos-input{flex:1; background:var(--s1); border:1px solid var(--ligne-2); border-radius:6px; color:var(--txt-1); padding:6px 8px; font-size:13px}
.repos-recur{gap:8px; cursor:pointer; font-size:13px; color:var(--txt-2)}
.repos-check{accent-color:var(--accent); width:15px; height:15px; cursor:pointer}
/* Bandeau all-day repos (style Google Agenda) */
.plan-allday-row{display:grid; grid-template-columns:var(--plan-gutter-w, 62px) repeat(var(--plan-n-days, 7), minmax(72px, 1fr)); min-width:calc(var(--plan-gutter-w, 62px) + var(--plan-n-days, 7) * 72px); border-bottom:1px solid var(--ligne); background:var(--s3); min-height:28px; align-items:stretch}
.plan-allday-gutter{flex:none; width:var(--plan-gutter-w, 62px); border-right:1px solid var(--ligne)}
.plan-allday-col{min-width:0; display:flex; flex-wrap:wrap; gap:3px; padding:4px 5px; border-right:1px solid var(--ligne)}
.plan-allday-chip{display:inline-flex; align-items:center; gap:5px; background:var(--s3); color:var(--txt-2); font-size:11px; font-style:italic; border-radius:4px; padding:2px 6px; white-space:nowrap; position:relative; line-height:1.4}

/* ---------- Sélecteur de projection (module Planning) ---------- */
.plan-proj-sel{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--sp-3);
  padding:8px 12px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface-3);
}
.plan-proj-sel-lbl{
  font-family:var(--font-sans); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3);
}
.plan-proj-sel .persp-anim-sel{width:auto; min-width:180px}

/* ---------- Note de projection (ce que la grille montre / masque) ---------- */
.plan-note{
  display:flex; align-items:flex-start; gap:9px; margin-bottom:var(--sp-3);
}
.plan-note-ico{display:inline-grid; place-items:center; color:var(--accent-2); flex:none; margin-top:1px}
.plan-note-ico .ico{width:15px; height:15px}

/* ---------- États sans grille (F9) : séjour sans dates, planning illisible ---------- */
.plan-sans-dates-msg{margin:0; font-size:.95rem; line-height:1.5; color:var(--text-2)}
.pg-sans-dates{padding:var(--sp-3, 12px)}
.plan-echec-corps{display:flex; flex-direction:column; align-items:flex-start; gap:8px}
.plan-echec-titre{font-size:1rem; color:var(--text)}
.plan-echec-aide{margin:0; font-size:.88rem; line-height:1.5; color:var(--text-2)}
.plan-echec-reessayer{min-height:40px}

/* ---------- Vue parents : grille publique (accent discret) ---------- */
.plan-parents{border-color:var(--line-2)}
.plan-parents .plan-block-meta{display:none}
@media (max-width:560px){
  .plan-proj-sel{width:100%}
  .plan-proj-sel .persp-anim-sel{flex:1; min-width:0}
  /* Téléphone : la barre d'outils passe à la ligne au lieu de défiler — le sélecteur « Groupe » a sa ligne et tient dans la largeur. */
  .plan-toolbar{flex-wrap:wrap; overflow-x:visible; row-gap:6px}
  .plan-toolbar > .plan-proj-sel{flex:1 1 100%; width:auto; min-width:0; max-width:100%; box-sizing:border-box; margin-bottom:0}
}

/* =====================================================================
   PLANNING éditable — grille 7 jours, blocs drag-resize + sélecteur d'activité
   ===================================================================== */
.pe-bar{display:flex; gap:10px; align-items:center; margin:14px 0 10px; flex-wrap:wrap}
.pe-week-nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.pe-week-btn{padding:4px 10px; font-size:.9rem}
.pe-week-lbl{font-size:.74rem; color:var(--text-3); min-width:72px; text-align:center}
.pe-hint{font-size:.74rem; color:var(--text-3)}
.pe-grid{display:flex; overflow-x:auto; overflow-y:auto; max-height:75vh; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3)}
.pe-axis{flex:none; width:54px; border-right:1px solid var(--line)}
.pe-corner{height:46px; border-bottom:1px solid var(--line)}
.pe-axis-col{position:relative}
.pe-hour{position:absolute; right:6px; transform:translateY(-50%); font-size:.62rem; color:var(--text-3); font-family:var(--font-mono)}
.pe-day{flex:1 0 120px; min-width:120px; border-right:1px solid var(--line)}
.pe-day:last-child{border-right:none}
.pe-day-head{height:46px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; border-bottom:1px solid var(--line); background:linear-gradient(180deg, var(--glass-soft-from), transparent)}
.pe-day-name{font-size:.74rem; font-weight:600; text-transform:capitalize}
.pe-day-date{font-size:.6rem; color:var(--text-3)}
.pe-col{
  position:relative; cursor:crosshair;
  /* Cadrillage renforcé, CSS seul (aucun nœud DOM par demi-heure) : zébrage heures
     paires/impaires + trait demi-heure à 28px (56px = PX_PER_HOUR, cf. js/render.js),
     plus fin/estompé que les lignes .pe-line (heures pleines, DOM, juste au-dessus). Fix
     du bug de contraste diagnostiqué : --line == --surface-3 rendait .pe-line invisible
     → .pe-line bascule sur --line-2 (plus clair) ci-dessous.
  */
  background-image:
    repeating-linear-gradient(to bottom, var(--voile) 0 56px, transparent 56px 112px),
    repeating-linear-gradient(to bottom, transparent 0 28px, var(--line-2) 28px 29px, transparent 29px 56px);
}
.pe-line{position:absolute; left:0; right:0; height:1px; background:var(--line-2); opacity:.85}
.pe-block{position:absolute; left:3px; right:3px; border-radius:6px; padding:4px 6px; overflow:hidden; cursor:grab; border:1px solid var(--plan-line, var(--line)); background:var(--plan-bg, var(--surface-3)); border-left:3px solid var(--plan-c, var(--accent)); user-select:none; touch-action:none}
.pe-block-ghost{opacity:.6; border-style:dashed; pointer-events:none}
.pe-block:hover{filter:brightness(1.08)}
.pe-block.pe-dragging{cursor:grabbing; z-index:10; box-shadow:var(--shadow-elevated)}
.pe-block-t{font-size:.72rem; font-weight:600; color:var(--text); line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:14px}
.pe-block-time{font-size:.6rem; color:var(--text-2); font-family:var(--font-mono)}
.pe-block-act{box-shadow:inset 0 0 0 1px var(--plan-c, var(--accent))}
.pe-block-x{position:absolute; top:0; right:0; min-width:32px; min-height:32px; display:grid; place-items:center; border:none; background:var(--s3); color:var(--text-2); border-radius:0 6px 0 4px; cursor:pointer; font-size:.7rem; padding:0; opacity:0; transition:opacity .12s}
.pe-block:hover .pe-block-x{opacity:1}
.pe-block-x:hover,.pe-block-x:active{color:var(--crit)}
.pe-block-handle{position:absolute; left:0; right:0; bottom:0; height:20px; cursor:ns-resize}
.pe-block-handle::after{content:''; position:absolute; left:50%; bottom:4px; transform:translateX(-50%); width:24px; height:2px; border-radius:2px; background:var(--plan-c, var(--accent)); opacity:.4}
.pe-block:hover .pe-block-handle::after{opacity:.8}

.pe-picker-ov{position:fixed; inset:0; background:var(--voile-modal); display:grid; place-items:center; z-index:100; padding:20px}
.pe-picker{width:min(440px, 92vw); max-height:80vh; display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--r-lg); border:1px solid var(--line-2)}
.pe-picker-h{margin:0; font-size:1.05rem}
.pe-picker-list{display:flex; flex-direction:column; gap:6px; overflow-y:auto}
.pe-picker-it{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface-3); color:var(--text); cursor:pointer; text-align:left; transition:.14s}
.pe-picker-it:hover{border-color:var(--survol-filet); background:var(--s3)}
.pe-picker-t{font-weight:600; font-size:.88rem}
.pe-picker-m{font-size:.7rem; color:var(--text-3)}

/* ---------- Popover léger création/édition de bloc (glisser, façon Google Agenda) ----------
   Pas de modale plein écran : scrim transparent (juste un capteur de clic extérieur) +
   boîte ancrée près du point de clic/du bloc. z-index sous .pe-picker-ov (100) : le
   sélecteur de fiche « Associer une fiche → » s'ouvre bien PAR-DESSUS ce popover. */
.pe-pop-scrim{position:fixed; inset:0; z-index:88; background:transparent}
.pe-pop{position:fixed; z-index:89; width:min(300px, 92vw); display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-elevated); visibility:hidden}
.pe-pop.pe-pop-ready{visibility:visible}
.pe-pop-when{font-size:.7rem; color:var(--text-3)}
.pe-pop-link{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-2); flex-wrap:wrap}
.pe-pop-link-btn{background:none; border:1px dashed var(--line-2); color:var(--accent); border-radius:var(--r-xs); padding:6px 10px; font-size:.78rem; cursor:pointer; transition:.14s; font-family:var(--font-sans)}
.pe-pop-link-btn:hover{background:var(--survol-fond)}
.pe-pop-btns{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.pe-pop.pg-ready{visibility:visible} /* placement par planning.js (placeNear) */

/* ---------- Moteur de grille unifié Planning (js/planning.js — refonte Google Agenda 2026-07-09) ----------
   Réutilise la palette 12 types .plan-t-* (variables --plan-c/--plan-bg/--plan-line),
   les chips all-day .plan-allday-chip et le popover .pe-pop ci-dessus. */
.pg-wrap{display:flex; flex-direction:column; gap:10px}
.pg-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pg-nav{display:flex; align-items:center; gap:6px}
.pg-nav-btn{
  min-width:34px; min-height:34px; padding:2px 10px; font-size:1rem; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xs); color:var(--text-2);
}
.pg-nav-btn:hover:not(:disabled){border-color:var(--line-2); color:var(--text)}
.pg-nav-btn:disabled{opacity:.35; cursor:default}
.pg-today-btn{
  min-height:34px; padding:2px 12px; font-size:.78rem; cursor:pointer;
  background:var(--surface-3); border:1px solid var(--line); border-radius:var(--r-xs); color:var(--text-2);
}
.pg-today-btn:hover{border-color:var(--survol-filet); color:var(--survol-texte)}
.pg-range{font-size:.72rem; color:var(--text-3); letter-spacing:.02em}
.pg-seg{display:flex; margin-left:auto; border:1px solid var(--line); border-radius:var(--r-xs); overflow:hidden}
.pg-seg-btn{
  min-height:34px; padding:2px 12px; font-size:.76rem; cursor:pointer; border:none;
  background:var(--surface-3); color:var(--text-3); border-right:1px solid var(--line);
}
.pg-seg-btn:last-child{border-right:none}
.pg-seg-btn:hover{color:var(--text)}
.pg-seg-btn.on{background:var(--accent-bg); color:var(--accent)}

/* Rangée all-day (congés journée entière) alignée sur les colonnes de la grille. */
.pg-allday{
  display:grid; grid-template-columns:var(--pg-gutter-w, 54px) repeat(var(--pg-n, 7), 1fr);
  border:1px solid var(--line); border-radius:var(--r-xs); background:var(--s3); min-height:28px;
}
.pg-allday-gutter{border-right:1px solid var(--line)}
.pg-allday-col{min-width:0; display:flex; flex-wrap:wrap; gap:3px; padding:4px 5px; border-right:1px solid var(--line)}
.pg-allday-col:last-child{border-right:none}

.pg-allday-conges{
  margin-top:4px; min-height:calc(var(--pg-conge-rows, 1) * 22px);
  grid-auto-rows:20px; row-gap:2px;
}
.pg-conge-bar{
  align-self:center; background:var(--ok-fond); color:var(--text);
  border-radius:4px; padding:2px 8px; font-size:11px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}

/* Conteneur de scroll propre : la grille scrolle verticalement (et horizontalement au
   besoin) DANS son cadre, en-têtes de jour sticky en haut, gouttière sticky à gauche. */
.pg-scroll{overflow:auto; max-height:75vh; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3); overscroll-behavior:contain}
.pg-table{
  display:grid; position:relative;
  grid-template-columns:var(--pg-gutter-w, 54px) repeat(var(--pg-n, 7), minmax(var(--pg-colmin, 110px), 1fr));
  grid-template-rows:46px auto;
}
.pg-table.pg-v1{--pg-colmin:0px}
.pg-table.pg-v3{--pg-colmin:88px}
.pg-corner{position:sticky; top:0; left:0; z-index:6; background:var(--surface-3); border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.pg-dayhead{
  position:sticky; top:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border:none; border-bottom:1px solid var(--line); border-right:1px solid var(--line); cursor:pointer;
  background:var(--surface-3); color:var(--text); padding:0; font-family:inherit;
}
.pg-dayhead:last-of-type{border-right:none}
.pg-dayhead:hover .pg-daynum{color:var(--survol-texte)}
.pg-dayname{font-size:.68rem; color:var(--text-3); text-transform:capitalize}
.pg-daynum{font-size:.92rem; font-weight:600; line-height:1.1}
.pg-dayhead.pg-is-today .pg-daynum{color:var(--accent)}
.pg-dayhead.pg-is-today .pg-dayname{color:var(--accent)}
.pg-gutter{position:sticky; left:0; z-index:4; background:var(--surface-3); border-right:1px solid var(--line)}
.pg-gutter, .pg-col{grid-row:2}
.pg-hour{position:absolute; right:6px; transform:translateY(-50%); font-size:.62rem; color:var(--text-3)}
.pg-col{
  position:relative; border-right:1px solid var(--line); min-width:0;
  /* Cadrillage CSS seul : zébrage heures + trait heure pleine + demi-heure (56px = PX_PER_HOUR). */
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 55px, var(--line-2) 55px 56px),
    repeating-linear-gradient(to bottom, transparent 0 28px, var(--voile) 28px 29px, transparent 29px 56px);
}
.pg-col:last-child{border-right:none}

/* Ligne « maintenant » : trait accent pleine largeur de la colonne du jour + pastille heure. */
.pg-now{position:absolute; left:0; right:0; height:0; border-top:2px solid var(--accent); z-index:3; pointer-events:none}
.pg-now::before{content:''; position:absolute; left:-1px; top:-5px; width:8px; height:8px; border-radius:50%; background:var(--accent)}
.pg-now-chip{
  position:absolute; right:3px; transform:translateY(-50%); z-index:5; pointer-events:none;
  font-size:.58rem; color:var(--sur-accent); background:var(--accent); border-radius:3px; padding:1px 4px; font-weight:600;
}

/* Blocs. touch-action:pan-y : le scroll tactile reste naturel, le drag n'est pris
   qu'après long-press (cf. pressDrag). Les poignées, elles, confisquent le geste. */
.pg-block{
  position:absolute; border-radius:6px; padding:3px 6px; overflow:hidden; cursor:pointer;
  border:1px solid var(--plan-line, var(--line)); background:var(--plan-bg, var(--surface-2));
  border-left:3px solid var(--plan-c, var(--accent));
  user-select:none; -webkit-user-select:none; touch-action:pan-y;
  display:flex; flex-direction:column; gap:1px; z-index:1;
}
.pg-block:hover{filter:brightness(1.1)}
/* Blocs saisissables : grab au survol (mode édition), lift franc à l'armement / au drag. */
.pg-editable .pg-block{cursor:grab; transition:box-shadow .12s, transform .12s}
.pg-block.pe-dragging{cursor:grabbing; z-index:10; box-shadow:var(--shadow-elevated); opacity:.94; transform:scale(1.015); transition:none}
.pg-block.pg-armed{box-shadow:0 0 0 2px var(--accent), var(--shadow-elevated); z-index:10; transform:scale(1.02)}
/* Heure masquée sur les blocs (déjà lisible dans la gouttière) : tout l'espace au
   titre. Elle ne réapparaît qu'en feedback live — drag/resize et fantôme de création. */
.pg-block-time{display:none; font-size:.6rem; color:var(--text-2); line-height:1.1; flex:none}
.pg-block.pe-dragging .pg-block-time, .pe-block-ghost .pg-block-time{display:block}
.pg-block-titre{
  font-size:.74rem; font-weight:600; color:var(--text); line-height:1.18;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pg-block-inits{font-size:.6rem; color:var(--plan-c, var(--accent)); letter-spacing:.06em; margin-top:auto; flex:none}
.pg-block-act{box-shadow:inset 0 0 0 1px var(--plan-c, var(--accent))}
.pg-xs{padding:1px 6px}
.pg-xs .pg-block-titre{font-size:.66rem; -webkit-line-clamp:1; line-height:1.3}
.pe-block-ghost.pg-block{opacity:.65; border-style:dashed; pointer-events:none; z-index:9}
/* Fantôme « en main » (carte de saisie ouverte) : interactif, drag immédiat (pas de
   long-press ni de scroll concurrent), poignées toujours visibles. */
.pe-block-ghost.pg-ghost-live{pointer-events:auto; touch-action:none; cursor:grab; opacity:.85}
.pe-block-ghost.pg-ghost-live .pg-h::after{opacity:.7}
.pg-h{position:absolute; left:0; right:0; height:12px; cursor:ns-resize; touch-action:none; z-index:2}
.pg-h-top{top:-3px}
.pg-h-bot{bottom:-3px}
.pg-h::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%); width:26px; height:3px;
  border-radius:2px; background:var(--plan-c, var(--accent)); opacity:0; transition:opacity .12s;
}
.pg-h-top::after{top:2px}
.pg-h-bot::after{bottom:2px}
.pg-block:hover .pg-h::after, .pg-block.pg-armed .pg-h::after{opacity:.7}
.pg-xs .pg-h{height:8px}

/* Cartes flottantes (création rapide + détail) : fixed, mesurées puis révélées. */
.pg-quick, .pg-detail{
  position:fixed; z-index:89; width:min(280px, 92vw); display:flex; flex-direction:column; gap:8px;
  padding:14px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line-2);
  box-shadow:var(--shadow-elevated); visibility:hidden;
}
/* La carte rapide porte le sélecteur des 13 types (5 familles × 2-3 boutons) : plus large, et jamais plus haute que l'écran. */
.pg-quick{width:min(360px, 94vw); max-height:calc(100dvh - 16px); overflow-y:auto}
.pg-quick.pg-ready, .pg-detail.pg-ready{visibility:visible}
.pg-quick-when{font-size:.7rem; color:var(--text-3)}
.pg-quick-times{display:flex; align-items:center; gap:6px}
.pg-quick-time{flex:1; min-width:0}
.pg-quick-sep{color:var(--text-3)}
.pg-quick-repeat{
  display:flex; align-items:center; gap:8px; font-size:.76rem; color:var(--text-2);
  cursor:pointer; user-select:none;
}
.pg-quick-repeat input{accent-color:var(--accent)}
.pg-quick-btns{display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap}
.pg-detail-titre{font-size:.98rem; font-weight:600; color:var(--text); line-height:1.25}
.pg-detail-when{font-size:.72rem; color:var(--text-3)}
.pg-detail-type{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-2); align-self:flex-start}
.pg-detail-row{display:flex; gap:8px; font-size:.78rem; line-height:1.4}
.pg-detail-lbl{flex:none; width:78px; color:var(--text-3)}
.pg-detail-val{color:var(--text-2); min-width:0}
.pg-detail-btns{display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; margin-top:4px; border-top:1px solid var(--line); padding-top:10px}
/* Enfants du groupe sur le détail d'un créneau (2026-07-13) */
.pg-detail-enfants{margin-top:6px; padding-top:8px; border-top:1px solid var(--line)}
.pg-detail-enfants .pg-detail-lbl{width:auto; margin-bottom:6px; color:var(--amber); font-size:.76rem}
.pg-detail-enfants-list{display:flex; flex-wrap:wrap; gap:5px; max-height:180px; overflow-y:auto}
.pg-enfant{padding:3px 8px; background:var(--surface-3); border:1px solid var(--line-2); border-radius:var(--r-sm); font-size:.74rem; color:var(--text-2); white-space:nowrap}
.pg-enfant[title]{cursor:help; border-color:var(--amber)}

@media (max-width:719px){
  .pg-scroll{max-height:72dvh}
  /* La période disparaît (elle est déjà dans les en-têtes de jours) : la barre tient
     sur UNE ligne, la hauteur va à la grille. */
  .pg-range{display:none}
  .pg-bar{row-gap:6px; gap:6px; flex-wrap:nowrap}
}

/* Route Planning plein écran : réduire le chrome du conteneur autour de la grille
   (la nav de sortie — header + onglets — reste intouchée). */
.proj-top:has(~ .proj-shell .plan-fill){margin-bottom:4px}
.proj-shell:has(.plan-fill){padding-top:4px; gap:4px}
.proj-content:has(.plan-fill){padding-top:0}
.plan-fill .pg-wrap{gap:4px}

/* — Quick wins UX mobile (audit 2026-06-30) — */
@media(max-width:720px){.pe-hint{display:none}}

/* — Popover de portée d'une série (pickScope, render.js) — */
.pg-scope-btns{flex-direction:column; gap:6px}
.pg-scope-btns .sf-btn{width:100%; text-align:left}

/* ================= Planning terrain (spec 2026-07-20) : FAB · vue Liste · fiche sheet · figé ================= */

/* --- FAB création : seule porte d'entrée au doigt, zone de pouce --- */
.pg-fab{position:fixed; right:18px; bottom:18px; z-index:60; width:56px; height:56px; border-radius:50%;
  border:none; background:var(--accent); color:var(--bg-0); font-size:1.7rem; line-height:1; cursor:pointer;
  box-shadow:var(--shadow-elevated); display:flex; align-items:center; justify-content:center; transition:.14s}
.pg-fab:active{transform:scale(.94)}

.pg-seg-btn{white-space:nowrap} /* « 3 j » sur une ligne */

/* --- Bande de jours (densité en pastilles) --- */
.pl-strip{display:flex; gap:4px; overflow-x:auto; padding:4px 2px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.pl-strip::-webkit-scrollbar{display:none}
.pl-day{flex:0 0 auto; min-width:52px; min-height:56px; display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 8px; border-radius:var(--r-lg); border:1px solid transparent; background:none; cursor:pointer; color:var(--text-2)}
.pl-day-name{font-size:.62rem; text-transform:uppercase; letter-spacing:.04em}
.pl-day-num{font-size:.95rem; font-weight:600}
.pl-day.pl-today .pl-day-num{color:var(--accent)}
.pl-day.on{background:var(--surface-2); border-color:var(--line-2); color:var(--text)}
.pl-dots{display:flex; gap:2px; height:4px; margin-top:2px}
.pl-dot{width:4px; height:4px; border-radius:50%; background:var(--accent); opacity:.75}

/* --- Liste du jour : cartes chrono, cibles >=48px --- */
.pl-scroll{overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding:6px 2px 80px; overscroll-behavior:contain}
.pl-conges{display:flex; flex-wrap:wrap; gap:6px}
.pl-card{display:flex; gap:12px; align-items:stretch; min-height:52px; padding:10px 12px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line-2); border-left:4px solid var(--line-2); cursor:pointer}
.pl-card{border-left-color:var(--plan-c, var(--line-2))} /* la famille (plan-t-*) fournit --plan-c */
.pl-card.pl-cur{outline:1px solid var(--accent); outline-offset:1px}
.pl-time{display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:46px; text-align:right}
.pl-time-deb{font-size:.86rem; font-weight:600}
.pl-time-fin{font-size:.7rem; color:var(--text-3)}
.pl-body{display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0}
.pl-titre{font-size:.92rem; font-weight:600; display:flex; align-items:center; gap:6px; overflow:hidden; text-overflow:ellipsis}
.pl-meta{font-size:.74rem; color:var(--text-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pl-empty{display:flex; flex-direction:column; align-items:center; gap:10px; padding:36px 0; color:var(--text-3); font-size:.86rem}
.pl-now{display:flex; align-items:center; gap:8px; margin:-2px 0}
.pl-now::after{content:''; flex:1; height:2px; background:var(--accent); border-radius:1px; opacity:.85}
.pl-now-chip{font-size:.66rem; color:var(--accent); font-weight:600}

/* --- Créneau figé : hachures + opacité — l'affordance de drag est retirée --- */
/* F2 : plus d'opacité (.82) — elle ramenait le pictogramme et le libellé du type à 3,8:1 sur le lavis olive (mesuré en navigateur,
   recette_planning_f2.mjs) ; le lavis est éclairci à la place, le texte garde son contraste. Mêmes hachures, même cadenas. */
.pg-fige{
  background-image:repeating-linear-gradient(45deg, transparent 0 7px, color-mix(in srgb, currentColor 9%, transparent) 7px 9px)}
.pg-block.pg-fige{background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 80%, var(--surface-3))}
.pl-card.pg-fige{background-color:color-mix(in srgb, var(--surface) 80%, var(--surface-3))}
.pg-block.pg-fige{cursor:default}
.pg-block.pg-fige .pg-h{display:none}
.pg-lock{display:inline-flex; align-items:center; opacity:.85; flex:0 0 auto}
.pg-block .pg-lock{position:absolute; top:4px; right:5px}
.pg-detail-fige{display:inline-flex; align-items:center; gap:5px; font-size:.72rem; color:var(--text-2);
  border:1px solid var(--line-2); border-radius:999px; padding:2px 9px; margin-left:6px}

/* --- Fiche sheet : bottom sheet au doigt, carte centrée au large --- */
.pg-sheet{position:fixed; z-index:89; display:flex; flex-direction:column; gap:10px; padding:16px;
  background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-elevated); visibility:hidden}
.pg-sheet.pg-ready{visibility:visible}
@media (max-width:719px){
  .pg-sheet{left:0; right:0; bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; border-bottom:none;
    max-height:82vh; overflow-y:auto; padding-bottom:max(16px, env(safe-area-inset-bottom))}
  .pg-sheet.pg-ready{animation:pg-sheet-up .18s ease-out}
}
@media (min-width:720px){
  .pg-sheet{left:50%; top:50%; transform:translate(-50%,-50%); width:min(400px, 92vw);
    max-height:86vh; overflow-y:auto; border-radius:var(--r-lg)}
}
@keyframes pg-sheet-up{from{transform:translateY(24px); opacity:.6} to{transform:none; opacity:1}}
.pg-sheet-date{display:flex; align-items:center; gap:10px; justify-content:center}
.pg-sheet-datelbl{font-size:.82rem; min-width:110px; text-align:center}
.pg-sheet-chips{display:flex; gap:6px; flex-wrap:wrap}
.pg-chip{border:1px solid var(--line-2); background:none; color:var(--text-2); border-radius:999px;
  padding:7px 13px; font-size:.78rem; cursor:pointer; font-family:var(--font-sans); min-height:32px}
.pg-chip.on{background:var(--accent-bg); border-color:var(--accent); color:var(--accent)}
.pg-sheet-time{display:flex; align-items:center; gap:8px}
.pg-step{border:1px solid var(--line-2); background:none; color:var(--text); border-radius:var(--r-xs);
  min-width:48px; min-height:40px; font-size:.82rem; cursor:pointer; font-family:var(--font-mono, monospace)}
.pg-step:active{background:var(--surface-2)}
.pg-sheet-time .pg-quick-time{flex:1; text-align:center}
.pg-sheet-fin{font-size:.8rem; color:var(--text-3); min-width:58px}
.pg-sheet-fige{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-2); cursor:pointer}
.pg-sheet-fige input{width:17px; height:17px; accent-color:var(--accent)}

/* ================= F2 (spec planning-sejour § 3 et 5) : types à pictogramme, verrou, plage bloquée, légende ================= */

/* --- Pictogramme d'un type : trait monochrome à la couleur de la famille (jamais la couleur seule : WCAG 1.4.1) --- */
.pg-ty{display:inline-flex; flex:none; align-items:center; color:var(--plan-c, currentColor); line-height:0}
.pg-ty svg{display:block}
.pg-block-ligne{display:flex; align-items:flex-start; gap:4px; min-width:0}
.pg-block-ligne .pg-ty{margin-top:1px}
.pg-block-ligne .pg-block-titre{flex:1 1 0; min-width:0}
.pg-xs .pg-block-ligne .pg-ty svg{width:11px; height:11px}
.pg-xs .pg-block-ligne .pg-ty{margin-top:0}
.pg-fige .pg-block-ligne{padding-right:14px}
.pg-block-type{flex:none; font-size:.6rem; letter-spacing:.02em; line-height:1.15; color:var(--plan-c);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl-titre .pg-ty{margin-right:0}
.pl-titre, .pl-meta{flex:none}   /* ni le titre ni la ligne du type ne s'écrasent (avant, overflow:hidden les laissait rétrécir et rognait les jambages) : la carte s'agrandit */
.pl-titre-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mnt-titre{display:flex; align-items:center; gap:6px}
.hub-plan-row .pg-ty{margin:0 2px}
.pg-detail-type .pg-ty{margin-right:0}

/* --- Plage bloquée : fond hachuré NEUTRE (autre sens que le verrou, autre angle), libellé visible, rien d'une famille.
   Le fond est traversable (créneaux posables par-dessus, avec avertissement) ; seul le libellé, un bouton, ouvre la fiche. --- */
.pg-block.pg-plage{
  z-index:0; padding:0; cursor:default; pointer-events:none; touch-action:auto; filter:none; box-shadow:none;
  color:var(--texte-2); background-color:var(--s3);
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--texte-3) 26%, transparent) 9px 11px);
  border:1px dashed var(--ligne-2); border-left:3px solid var(--texte-3); border-radius:6px;
}
.pg-editable .pg-block.pg-plage{cursor:default}
.pg-plage-lib{
  pointer-events:auto; display:inline-flex; align-items:center; gap:5px; align-self:flex-start; max-width:calc(100% - 4px);
  min-height:22px; margin:2px; padding:2px 7px; border:1px solid var(--ligne-2); border-radius:var(--r-lg);
  background:var(--s1); color:var(--texte-2); font:inherit; font-size:.7rem; font-weight:600; cursor:pointer;
}
.pg-plage-lib:hover{border-color:var(--survol-filet); color:var(--survol-texte)}
.pg-plage-txt{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pl-card.pg-plage{
  border-style:dashed; border-left-style:solid; border-left-color:var(--texte-3); background-color:var(--s3);
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--texte-3) 26%, transparent) 9px 11px);
}

/* --- Verrou (libellé « verrouillé » ; mêmes hachures et même cadenas qu'avant) : la raison s'affiche dans la fiche --- */
.pg-verrou-note{display:flex; align-items:center; gap:7px; margin:0; padding:7px 9px; font-size:.78rem; color:var(--text-2);
  background:var(--s3); border-radius:var(--r-xs)}

/* --- Sélecteur de nature : Créneau / Plage bloquée --- */
.pg-nature{display:flex; align-self:flex-start; border:1px solid var(--line-2); border-radius:var(--r-xs); overflow:hidden}
.pg-nature-btn{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:2px 12px; border:none; border-right:1px solid var(--line);
  background:var(--surface-3); color:var(--text-2); font-size:.76rem; font-family:var(--font-sans); cursor:pointer}
.pg-nature-btn:last-child{border-right:none}
.pg-nature-btn:hover{color:var(--survol-texte)}
.pg-nature-btn.on{background:var(--accent-bg); color:var(--accent); font-weight:600}
.pg-nature-btn .pg-ty{color:currentColor}

/* --- Sélecteur de type : 13 boutons à pictogramme, groupés par famille, un seul tap (carte rapide et fiche) --- */
.pg-types{display:flex; flex-wrap:wrap; gap:6px 8px}
.pg-types-fam{display:flex; flex-direction:column; gap:3px; padding:5px 5px 5px; border-radius:var(--r-lg);
  background:var(--plan-bg); border:1px solid var(--plan-line)}
.pg-types-nom{padding:0 2px; font-size:.58rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--plan-c)}
.pg-types-rang{display:flex; gap:3px}
.pg-type-btn{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:56px; min-height:48px;
  padding:4px 1px; border:1px solid transparent; border-radius:var(--r-lg); background:transparent; color:var(--text);
  font-family:var(--font-sans); cursor:pointer}
.pg-type-lib{max-width:100%; font-size:.62rem; line-height:1.1; letter-spacing:.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pg-type-btn:hover{border-color:var(--survol-filet); background:var(--survol-fond)}
/* Choisi : cadre franc, fond de carte et libellé gras — lisible sans la couleur. */
.pg-type-btn.on{border:2px solid var(--plan-c); padding:3px 0; background:var(--s1); font-weight:700}
.pg-type-btn:focus-visible, .pg-nature-btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pg-types-etat{display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; min-height:1.3em; font-size:.76rem; color:var(--text-2)}
.pg-types-etat strong{color:var(--text); font-weight:600}
.pg-types-verrou{display:inline-flex; align-items:center; gap:4px; color:var(--text-2)}
.pg-quick-types, .pg-sheet-types{display:flex; flex-direction:column; gap:6px}
.pg-sheet-fige input{flex:none}   /* la case garde sa taille malgré le libellé plus long */
.pg-portee{margin:0; font-size:.76rem; color:var(--text-2)}
.pg-avert{margin:0; padding:6px 8px; font-size:.74rem; line-height:1.35; color:var(--text);
  background:var(--alerte-fond); border:1px solid var(--alerte-filet); border-radius:var(--r-xs)}
/* [hidden] perd contre un display posé par une classe : on le rétablit pour les éléments basculés par l'attribut. */
.pg-quick [hidden], .pg-sheet [hidden], .pg-legende[hidden]{display:none !important}

/* --- Légende repliable (tête du planning) --- */
.pg-leg-btn{display:inline-flex; align-items:center; gap:6px}
.pg-leg-chevron{font-size:.7rem; line-height:1}
.pg-legende{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; padding:10px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface-3)}
.pg-leg-fam{flex:1 1 150px; min-width:0; padding:6px 9px 7px; border-left:3px solid var(--plan-c); border-radius:var(--r-sm);
  background:var(--plan-bg)}
.pg-leg-nom{display:block; margin-bottom:4px; font-size:.6rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--plan-c)}
.pg-leg-types{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.pg-leg-type{display:flex; align-items:center; gap:6px; font-size:.78rem; line-height:1.25; color:var(--text)}
.pg-leg-formes{flex-basis:100%}
.pg-leg-formes .pg-leg-types{flex-direction:row; flex-wrap:wrap; gap:4px 18px}
.pg-leg-plage{padding:1px 6px; border:1px dashed var(--ligne-2); border-radius:var(--r-xs);
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--texte-3) 26%, transparent) 9px 11px)}

@media (max-width:719px){
  .pg-quick .pg-types-fam{flex:1 1 auto}
  /* La fiche porte le sélecteur de type : elle défile, et ses boutons d'action restent toujours visibles en bas. */
  .pg-sheet{max-height:92dvh}
  .pg-sheet .pe-pop-btns{position:sticky; bottom:calc(-1 * max(16px, env(safe-area-inset-bottom))); margin:0 -16px; padding:10px 16px max(16px, env(safe-area-inset-bottom));
    background:var(--surface); border-top:1px solid var(--line)}
}

/* =====================================================================================================================
   F3 — Groupes : vue Jour en couloirs, portée, animateurs effectifs, conflits, réglages « Groupes et lieux »
   (spec 2026-10-01-planning-sejour § 6, 8, 12). Jetons de tokens.css seulement.
   ===================================================================================================================== */
/* Couloirs : une colonne par groupe (placées explicitement : la couche des créneaux étendus occupe les mêmes cases). */
.pg-table.pg-couloirs{grid-template-rows:52px auto}
.pg-couloirs .pg-col{border-right:1px solid var(--line-2)}
.pg-couloirs .pg-col.pg-col-der{border-right:none}
.pg-corner-jour{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px}
.pg-corner-jour.pg-is-today .pg-daynum, .pg-corner-jour.pg-is-today .pg-dayname{color:var(--accent)}
.pg-couloir-tete{
  grid-row:1; position:sticky; top:0; z-index:5; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; padding:0 6px; background:var(--surface-3); border-bottom:1px solid var(--line); border-right:1px solid var(--line-2);
}
.pg-couloir-tete:last-of-type{border-right:none}
.pg-couloir-nom{max-width:100%; font-size:.8rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pg-couloir-age{max-width:100%; font-size:.66rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pg-couloir-equipe .pg-couloir-nom{font-style:italic}
/* Couche des créneaux de tout le séjour : traversable (on pose dans les couloirs dessous) ; ses blocs passent SOUS ceux des
   couloirs (qui leur laissent la première colonne de leur grappe). */
.pg-span{grid-row:2; position:relative; pointer-events:none; min-width:0}
.pg-span .pg-block:not(.pg-plage){pointer-events:auto}
.pg-span .pg-block:not(.pe-dragging):not(.pg-armed){z-index:0}
/* Rangée de puces (téléphone, plus de couloirs que de place) : collante, retour à la ligne, jamais de défilement horizontal. */
.pg-couloirs-puces{position:sticky; top:0; z-index:7; display:flex; flex-wrap:wrap; gap:6px; padding:2px 0 4px; background:var(--surface)}
.pg-couloir-puce{min-height:32px; padding:5px 12px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface);
  color:var(--text-2); font-family:var(--font-sans); font-size:.78rem; cursor:pointer}
.pg-couloir-puce.on{background:var(--accent-bg); border-color:var(--accent); color:var(--accent); font-weight:600}
.pg-couloir-puce:focus-visible{outline:2px solid var(--accent); outline-offset:1px}

/* Animateurs effectifs sur un bloc : initiales quand il est étroit, prénoms quand la place le permet. */
.pg-block-anim{display:block; flex:none; min-width:0; margin-top:auto; container-type:inline-size}
.pg-anim-l{display:block; font-size:.62rem; line-height:1.25; color:var(--plan-c, var(--accent)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pg-anim-ini{letter-spacing:.06em}
.pg-anim-pre{display:none; font-weight:600}
.pg-anim-cg{font-style:italic; color:var(--text-2)}
@container (min-width:118px){
  .pg-anim-ini{display:none}
  .pg-anim-pre{display:inline}
}
.pg-block-conge{flex:none; font-size:.6rem; font-style:italic; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Conflit : signe monochrome (triangle au trait) sur le bloc, couleur d'alerte sur son fond — jamais la couleur seule. */
.pg-conflit{position:absolute; top:3px; right:4px; display:inline-flex; padding:2px; border-radius:50%; line-height:0;
  color:var(--alerte); background:var(--alerte-fond); box-shadow:0 0 0 1px var(--alerte-filet)}
.pg-fige .pg-conflit{right:20px}
/* Le titre laisse la place au signe (et au cadenas) au lieu de passer dessous. */
.pg-a-conflit .pg-block-ligne{padding-right:17px}
.pg-fige.pg-a-conflit .pg-block-ligne{padding-right:33px}
.pg-xs .pg-conflit{top:1px; padding:1px}
.pl-titre .pg-conflit{position:static; margin-left:4px}
.pg-conflit-ligne{display:flex; align-items:flex-start; gap:6px}
.pg-conflit-sig{flex:none; display:inline-flex; color:var(--alerte); margin-top:1px}

/* Fiche : portée et animateurs. */
.pg-sheet-lbl{display:block; margin-bottom:4px; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.pg-portee-rang, .pg-anim-chips, .pg-anim-liste, .pg-rg-puces{display:flex; flex-wrap:wrap; gap:6px}
.pg-portee-btn[aria-pressed="true"]{font-weight:600}
.pg-anim-sel{display:flex; flex-direction:column; gap:6px}
.pg-anim-chip{display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:3px 4px 3px 12px; border:1px solid var(--line-2);
  border-radius:999px; font-size:.78rem; color:var(--text); background:var(--surface)}
.pg-anim-chip.pg-anim-on{border-color:var(--accent); background:var(--accent-bg)}
.pg-anim-chip.pg-anim-conge{padding-right:12px; border-style:dashed; color:var(--text-2)}
.pg-anim-chip.pg-anim-retire{color:var(--text-2)}
.pg-anim-chip.pg-anim-retire .pg-anim-nom{text-decoration:line-through}
.pg-anim-statut{font-size:.68rem; font-style:italic; color:var(--text-2)}
.pg-anim-x{display:inline-flex; align-items:center; justify-content:center; min-width:26px; min-height:26px; padding:0; border:none; border-radius:50%;
  background:transparent; color:var(--text-2); font-size:.8rem; cursor:pointer}
.pg-anim-x:hover{background:var(--survol-fond); color:var(--survol-texte)}
.pg-anim-x:focus-visible, .pg-portee-btn:focus-visible, .pg-rg-ref:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pg-anim-vide{font-size:.76rem; color:var(--text-2)}
.pg-anim-ajout{align-self:flex-start}
.pg-anim-conflits{display:flex; flex-direction:column; gap:4px}
.pg-anim-sel[hidden], .pg-anim-liste[hidden]{display:none !important}

/* Tête du planning : accès aux réglages. */
.plan-reglages-btn{margin-left:auto}

/* Réglages « Groupes et lieux » : la fiche du planning, plus large au bureau. */
.pg-rg-scrim{background:var(--voile-modal)}
.pg-reglages{gap:14px}
@media (min-width:720px){ .pg-reglages{width:min(640px, 94vw)} }
.pg-rg-tete{display:flex; align-items:center; justify-content:space-between; gap:10px}
.pg-rg-titre{margin:0; font-size:1.05rem}
.pg-rg-fermer{min-width:40px; min-height:40px; margin-left:0}
.pg-rg-sec{display:flex; flex-direction:column; gap:8px}
.pg-rg-h{margin:0; font-size:.86rem; font-weight:600; color:var(--text)}
.pg-rg-aide{margin:0; font-size:.76rem; color:var(--text-2)}
.pg-rg-liste{display:flex; flex-direction:column; gap:8px}
.pg-rg-carte, .pg-rg-lieu{display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3)}
.pg-rg-ligne{display:flex; align-items:center; flex-wrap:wrap; gap:6px}
.pg-rg-nom{flex:1 1 160px; min-width:0}
.pg-rg-ages{display:flex; align-items:center; gap:4px}
.pg-rg-age{width:62px; text-align:center}
.pg-rg-mini{font-size:.74rem; color:var(--text-2)}
.pg-rg-ordre, .pg-rg-suppr{min-width:40px; min-height:40px; padding:0; margin-left:0}
.pg-rg-erreur{padding:8px 10px; border:1px solid var(--alerte-filet); border-radius:var(--r-xs); background:var(--alerte-fond); font-size:.78rem; color:var(--text)}
.pg-rg-erreur[hidden]{display:none !important}
.pg-rg-err-msg{margin:0 0 4px; font-weight:600}
.pg-rg-err-sous{margin:0 0 4px}
.pg-rg-err-liste{margin:0; padding-left:18px}
.pg-rg-ajout{display:flex; flex-wrap:wrap; gap:6px}
.pg-rg-ajout .sf-input{flex:1 1 200px; min-width:0}
.pg-rg-etat{margin:0; min-height:1.2em; font-size:.76rem; color:var(--text-2)}

/* ================= F4 (spec planning § 3.1) : tête du planning, mode lecture / édition, marque « modifié » =================
   Tokens de css/tokens.css seuls. L'état n'est jamais porté par la couleur seule : le mot (« Mode édition », « Brouillon »,
   « Publié le 12 oct. », « modifié ») et un signe au trait accompagnent chaque teinte. */
.plan-tete{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; min-height:34px; margin-bottom:6px}
.plan-tete-etat{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; min-width:0; font-size:.82rem; color:var(--text-2)}
.plan-tete-mode, .plan-tete-statut{display:inline-flex; align-items:center; gap:6px}
.plan-tete-mode{font-weight:600}
.plan-tete-actions{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.plan-tete .sf-btn{min-height:34px; padding:4px 12px; font-size:.8rem; white-space:nowrap}
.plan-tete-mode[hidden], .plan-tete-sep[hidden], .plan-tete-publier[hidden], .plan-tete-mode-btn[hidden], .plan-tete-actions[hidden],
.plan-reglages-btn[hidden]{display:none !important}
/* Bandeau collant du mode édition : bande pleine d'accent (langage de surface), sous l'en-tête de la plateforme. */
.plan-tete-edition{position:sticky; top:var(--header-h); z-index:30; padding:6px 10px; border-radius:var(--r-sm); background:var(--accent-bande); color:var(--sur-portail)}
.plan-tete-edition .plan-tete-etat{color:inherit}
/* Fond teinté de la grille (et de la Liste) en édition : premier signal, vu de loin. */
.pg-editable{--pg-teinte:color-mix(in srgb, var(--accent-fond) 70%, var(--surface-3))}
.pg-editable .pg-scroll{background:var(--pg-teinte); border-color:var(--accent-filet); box-shadow:inset 0 0 0 2px var(--accent-filet)}
.pg-editable .pg-corner, .pg-editable .pg-gutter{background:var(--pg-teinte)}
.pg-editable .pl-scroll{background:var(--pg-teinte); box-shadow:inset 0 0 0 2px var(--accent-filet)}

/* Marque « modifié » : signe au trait + le mot, sur le bloc (coin bas) et sur la carte de la Liste (après le titre). */
.pg-modifie{display:inline-flex; align-items:center; gap:3px; padding:1px 5px 1px 4px; border:1px solid var(--line-2); border-radius:var(--r-xs);
  background:var(--surface); color:var(--text); font-size:.6rem; font-weight:600; line-height:1.3; letter-spacing:.02em; white-space:nowrap}
.pg-modifie-sg{display:inline-flex; line-height:0}
.pg-block .pg-modifie{position:absolute; right:3px; bottom:2px; z-index:1}
.pg-xs .pg-modifie{padding:1px 2px}
.pg-xs .pg-modifie-txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}   /* lu au lecteur d'écran */
.pl-titre .pg-modifie{margin-left:6px; flex:none; font-size:.66rem}
.pg-detail-modifie{display:flex; align-items:center; gap:6px; margin:4px 0; font-size:.78rem; color:var(--text-2)}

/* Confirmation de publication. */
.cdlg-box.plan-pub{max-width:460px; gap:14px}
.plan-pub-titre{margin:0; font-family:var(--serif); font-size:1.3rem; font-weight:400; color:var(--text)}
.plan-pub-liste{margin:0; padding-left:1.1rem; display:grid; gap:6px; font-size:.9rem; line-height:1.45; color:var(--text)}
.plan-pub-avert{display:flex; align-items:flex-start; gap:8px; margin:0; padding:8px 10px; border:1px solid var(--alerte-filet); border-radius:var(--r-xs);
  background:var(--alerte-fond); font-size:.86rem; line-height:1.4; color:var(--text)}
.plan-pub-avert-sg{display:inline-flex; flex:none; margin-top:2px; color:var(--alerte)}
@media (max-width:719px){
  .plan-tete-edition{padding:5px 8px}
  .plan-tete .sf-btn{padding:4px 10px}
}

/* =====================================================================================================================
   F5 (spec planning § 4) : proposer / valider — mode « Proposer », créneau proposé, fantôme, suppression proposée,
   « À valider » et « Mes propositions ». Tokens de css/tokens.css seuls. L'état n'est JAMAIS porté par la couleur seule :
   contour pointillé, étiquette en toutes lettres et signe au trait accompagnent chaque teinte (WCAG 1.4.1).
   ===================================================================================================================== */

/* --- Mode « Proposer » : bandeau et fond teintés PRUNE (l'édition de la direction est pétrole), mot « Mode proposition » --- */
.plan-tete-proposition{position:sticky; top:var(--header-h); z-index:30; padding:6px 10px; border-radius:var(--r-sm); background:var(--equipe-portail); color:var(--sur-portail)}
.plan-tete-proposition .plan-tete-etat{color:inherit}
.pg-editable.pg-proposant{--pg-teinte:color-mix(in srgb, var(--equipe-fond) 70%, var(--surface-3))}
.pg-editable.pg-proposant .pg-scroll{background:var(--pg-teinte); border-color:var(--equipe-filet); box-shadow:inset 0 0 0 2px var(--equipe-filet)}
.pg-editable.pg-proposant .pg-corner, .pg-editable.pg-proposant .pg-gutter{background:var(--pg-teinte)}
.pg-editable.pg-proposant .pl-scroll{background:var(--pg-teinte); box-shadow:inset 0 0 0 2px var(--equipe-filet)}
.pg-proposant .pg-couloirs-puces{background:var(--surface)}
.plan-tete-compteur[hidden]{display:none !important}
.plan-tete-compteur{font-variant-numeric:tabular-nums}
.plan-tete-compteur:not([data-n="0"]){font-weight:600; border-color:var(--equipe-filet)}
@media (max-width:719px){ .plan-tete-proposition{padding:5px 8px} }

/* --- Étiquette en toutes lettres (« proposé · Léa ») : signe + mot, dans le bloc ou la carte --- */
.pg-etiquette{display:inline-flex; align-items:center; gap:4px; flex:none; align-self:flex-start; max-width:100%; min-width:0; margin-top:1px; padding:1px 5px 1px 4px;
  border:1px dashed var(--plan-c, var(--texte-3)); border-radius:var(--r-xs); background:var(--surface); color:var(--text);
  font-size:.6rem; font-weight:600; line-height:1.3; letter-spacing:.01em; white-space:nowrap}
.pg-etiquette-sg{display:inline-flex; flex:none; line-height:0; color:var(--plan-c, currentColor)}
.pg-etiquette-w{display:block; flex:none; min-width:0; margin-top:1px; container-type:inline-size}
.pg-etiquette-w > .pg-etiquette{margin-top:0}
/* Bloc étroit : le texte se réduit au prénom (le contour pointillé, le signe et l'infobulle disent le reste ; le mot complet reste lu). */
@container (max-width:118px){
  .pg-etiquette-txt[data-court]{font-size:0}
  .pg-etiquette-txt[data-court]::before{content:attr(data-court); font-size:.6rem}
}
.pg-xs .pg-etiquette{padding:1px 2px; margin-top:0}
.pg-block .pg-etiquette-w ~ .pg-block-anim, .pg-block .pg-etiquette-w ~ .pg-block-conge{margin-top:auto}
.pg-xs .pg-etiquette-txt{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}   /* bloc très court : le mot reste lu au lecteur d'écran et en survol */
.pl-body .pg-etiquette-w{margin-top:2px}
.pl-body .pg-etiquette{font-size:.68rem}

/* --- Créneau PROPOSÉ : contour pointillé 2 px, lavis éclairci, pas de poignée tant qu'il n'est pas le sien (voir fiche.js) --- */
.pg-block.pg-propose{border:2px dashed var(--plan-c); background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 55%, var(--surface)); padding:2px 5px}
.pl-card.pg-propose, .pl-card.pg-fantome, .pl-card.pg-suppr{flex:none}   /* la carte porte une ligne de plus (l'étiquette) : elle ne se laisse pas écraser par la liste */
.pl-card.pg-propose{border:2px dashed var(--plan-c); background-color:color-mix(in srgb, var(--surface) 70%, var(--plan-bg, var(--surface)))}

/* --- FANTÔME d'une proposition de modification : pointillé rond + trame de points, posé à côté de l'original --- */
.pg-block.pg-fantome{border:2px dotted var(--plan-c); padding:2px 5px; cursor:pointer; z-index:2;
  background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 45%, var(--surface));
  background-image:radial-gradient(color-mix(in srgb, var(--plan-c) 28%, transparent) 1px, transparent 1.6px); background-size:7px 7px}
.pl-card.pg-fantome{border:2px dotted var(--plan-c);
  background-image:radial-gradient(color-mix(in srgb, var(--plan-c) 28%, transparent) 1px, transparent 1.6px); background-size:7px 7px}
.pg-editable .pg-block.pg-fantome{cursor:pointer}
.pg-block.pg-fantome .pg-h{display:none}

/* --- ORIGINAL dont la suppression est proposée : contour pointillé brique, mention en toutes lettres --- */
.pg-block.pg-suppr{border:2px dashed var(--critique); padding:2px 5px}
.pl-card.pg-suppr{border:2px dashed var(--critique)}
.pg-suppr .pg-etiquette{border-color:var(--critique)}
.pg-suppr .pg-etiquette-sg{color:var(--critique)}

/* --- Fiche d'un créneau : proposé, raison d'un refus de geste, carte d'une proposition --- */
.pg-detail-propose{margin:2px 0; font-size:.78rem; color:var(--text-2)}
.pg-detail-raison{margin:4px 0}
.pg-detail-sous{margin:0; font-size:.78rem; color:var(--text-2)}
.pg-detail-proposition{gap:8px}
.pg-propose-note{align-items:flex-start}

/* --- Panneau latéral : « À valider » et « Mes propositions » (bureau : volet à droite, la grille reste vivante ; téléphone : plein écran) --- */
.plan-panneau-ov{position:fixed; inset:0; z-index:95; pointer-events:none}
.plan-panneau{position:fixed; top:var(--header-h, 62px); right:0; bottom:0; width:min(440px, 100vw); pointer-events:auto; display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--line-2); box-shadow:var(--shadow-elevated)}
.plan-panneau-tete{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--surface)}
.plan-panneau-titre{margin:0; font-size:1.02rem; font-weight:600; color:var(--text)}
.plan-panneau-titre:focus{outline:none}
.plan-panneau-fermer{min-width:40px; min-height:40px; padding:0}
.plan-panneau-corps{flex:1; min-height:0; overflow-y:auto; padding:12px 14px max(16px, env(safe-area-inset-bottom)); overscroll-behavior:contain}
@media (max-width:719px){
  .plan-panneau-ov{pointer-events:auto; background:var(--voile-modal)}
  .plan-panneau{top:0; left:0; width:auto; border-left:none}
}

/* --- Entrées (cartes) : mêmes briques dans « À valider » et « Mes propositions » --- */
.pgp-liste{display:flex; flex-direction:column; gap:10px}
.pgp-vide{margin:8px 0; font-size:.86rem; line-height:1.45; color:var(--text-2)}
.pgp-carte{display:flex; flex-direction:column; gap:6px; padding:12px; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--surface-3)}
.pgp-carte.pgp-occupee{opacity:.6}
.pgp-carte-tete{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.76rem; color:var(--text-2)}
.pgp-genre{display:inline-flex; align-items:center; gap:5px; padding:2px 8px 2px 6px; border:1px dashed var(--equipe-filet); border-radius:999px;
  background:var(--equipe-fond); color:var(--equipe); font-weight:600}
.pgp-genre-sg{display:inline-flex; line-height:0}
.pgp-genre-suppression{border-color:var(--critique-filet); background:var(--critique-fond); color:var(--critique)}
.pgp-auteur{font-weight:600; color:var(--text)}
.pgp-date{margin-left:auto; font-size:.72rem}
.pgp-titre{margin:0; font-size:.98rem; font-weight:600; line-height:1.25; color:var(--text)}
.pgp-ou, .pgp-resume{margin:0; font-size:.8rem; color:var(--text-2)}
.pgp-lignes{margin:0; display:grid; gap:5px}
.pgp-ligne{display:grid; grid-template-columns:62px minmax(0, 1fr); gap:8px; align-items:baseline; font-size:.84rem}
.pgp-ligne-long{grid-template-columns:max-content minmax(0, 1fr)}
.pgp-lbl{margin:0; font-size:.68rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.pgp-vals{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; min-width:0}
.pgp-avant{color:var(--text-2); text-decoration:line-through}
.pgp-fleche{color:var(--text-2)}
.pgp-apres{padding:0 5px; border-radius:3px; background:var(--equipe-fond); box-shadow:inset 0 -2px 0 var(--equipe-filet); font-weight:700; color:var(--text)}
.pgp-obsolete{display:flex; align-items:center; gap:7px; margin:0; padding:6px 9px; border:1px solid var(--alerte-filet); border-radius:var(--r-xs); background:var(--alerte-fond);
  font-size:.8rem; font-weight:600; color:var(--text)}
.pgp-obsolete-sg{display:inline-flex; flex:none; color:var(--alerte); line-height:0}
.pgp-actions{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:8px; align-items:center; margin-top:2px}
.pgp-actions[hidden], .pgp-confirmation[hidden], .pgp-erreur[hidden]{display:none !important}
.pgp-refus{display:flex; gap:6px; min-width:0}
.pgp-motif{flex:1 1 0; min-width:0}
.pgp-accepter, .pgp-refuser, .pgp-retirer, .pgp-confirmer{min-height:40px}
.pgp-confirmation{display:flex; flex-direction:column; gap:8px; padding:8px 10px; border:1px solid var(--alerte-filet); border-radius:var(--r-xs); background:var(--alerte-fond)}
.pgp-confirmation-txt{margin:0; font-size:.82rem; line-height:1.4; color:var(--text)}
.pgp-confirmation-btns{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px}
.pgp-erreur{margin:0; padding:6px 9px; border:1px solid var(--critique-filet); border-radius:var(--r-xs); background:var(--critique-fond); font-size:.8rem; color:var(--text)}
.pgp-voir{align-self:flex-start; display:inline-flex; align-items:center; min-height:28px; padding:4px 0; border:none; background:none; color:var(--accent); font:inherit; font-size:.78rem; text-decoration:underline; cursor:pointer}
.pgp-voir:hover{color:var(--survol-texte)}
/* « Mes propositions » : sections par état, état en toutes lettres, motif d'un refus lisible. */
.pgp-section{display:flex; flex-direction:column; gap:8px; padding:0; border:none; border-radius:0; background:none; box-shadow:none}
.pgp-section-titre{margin:4px 0 0; font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.pgp-mini .pgp-titre{font-size:.92rem}
.pgp-etat{display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border:1px solid var(--line-2); border-radius:999px; font-weight:600; color:var(--text)}
.pgp-etat-sg{font-size:.8rem; line-height:1}
.pgp-etat-refusee{border-color:var(--critique-filet); background:var(--critique-fond)}
.pgp-etat-acceptee{border-color:var(--ok-filet); background:var(--ok-fond)}
.pgp-motif-lu{margin:0; padding:6px 9px; border-left:3px solid var(--critique); background:var(--surface); font-size:.82rem; color:var(--text)}
.pgp-motif-lbl{font-weight:600}
.pgp-retirer{align-self:flex-start}
@media (max-width:480px){
  .pgp-actions{grid-template-columns:minmax(0, 1fr)}
  .pgp-accepter{width:100%}
}

/* --- Le toast « Annuler » (bas de l'écran, au-dessus de tout) ne recouvre pas les boutons d'une carte ou d'une fiche ouverte :
   il passe en haut tant qu'elle est là (l'annulation reste à portée, les boutons de la carte restent cliquables). --- */
body:has(.pg-detail, .pg-quick, .pg-sheet) .anima-action-toast{bottom:auto; top:calc(var(--header-h, 62px) + 10px)}

/* =====================================================================================================================
   F6 (spec planning § 8) : vues « Séjour » (tableau du mur) et « Lieux » (par lieu), choix du lieu dans la fiche.
   Tokens de css/tokens.css seuls. Les états (verrouillé, proposé, modifié, conflit, chevauchement de lieu) ne passent JAMAIS par la
   couleur seule : signe au trait + mot (ou contour pointillé) à chaque fois. Préfixes pgs- (Séjour), pgl- (Lieux), pgli- (choix du
   lieu) : aucun n'existe ailleurs (css/*.css, vérifié par git grep).
   ===================================================================================================================== */
.pg-nav[hidden]{display:none !important}
.pgs-outils{display:flex; align-items:center; gap:6px 12px; flex-wrap:wrap}
.pgs-etat{font-size:.76rem; color:var(--text-2); min-width:0}
.pgs-tout{min-height:34px; padding:2px 12px; font-size:.78rem}
.pgs-scroll, .pgl-scroll{overflow:auto; min-width:0; max-width:100%; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3); overscroll-behavior:contain}
/* Les deux signaux du mode édition (fond teinté, bordure) valent aussi ici : on y ouvre la fiche en édition. */
.pg-editable .pgs-scroll, .pg-editable .pgl-scroll{background:var(--pg-teinte); border-color:var(--accent-filet); box-shadow:inset 0 0 0 2px var(--accent-filet)}
.pg-editable.pg-proposant .pgs-scroll, .pg-editable.pg-proposant .pgl-scroll{border-color:var(--equipe-filet); box-shadow:inset 0 0 0 2px var(--equipe-filet)}
.pg-editable .pgs-coin, .pg-editable .pgl-coin, .pg-editable .pgl-axe, .pg-editable .pgs-moment, .pg-editable .pgs-groupe, .pg-editable .pgl-lieu{background:var(--pg-teinte)}

/* --- Séjour : jours en colonnes, moments × groupes en lignes --- */
.pgs-table{
  --pgs-moment-w:40px; --pgs-groupe-w:72px; --pgs-col:128px; --pgs-col-mixte:178px;
  display:grid; position:relative;
  grid-template-columns:var(--pgs-moment-w) var(--pgs-groupe-w);   /* les jours : posés par sejour.js (largeur selon le contenu) */
  grid-template-rows:48px;
}
.pgs-table.pgs-sans-libelle{--pgs-groupe-w:0px}
.pgs-jour{font-family:inherit}
.pgs-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(--surface-3); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
/* Bureau : le moment est une bande verticale, lue de bas en haut (une colonne étroite : la place va aux jours). */
.pgs-moment-t{writing-mode:vertical-rl; transform:rotate(180deg); text-align:center; white-space:nowrap; line-height:1.3}
.pgs-moment-t strong{display:block; font-size:.9rem; font-weight:600; color:var(--text)}
.pgs-moment-t span{display:block; font-size:.66rem; color:var(--text-3)}
.pgs-groupe{
  position:sticky; left:var(--pgs-moment-w); z-index:4; display:flex; align-items:flex-start; min-width:0; padding:7px 8px;
  background:var(--surface-3); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:.78rem; font-weight:600; line-height:1.25; color:var(--text-2); overflow-wrap:anywhere;
}
.pgs-groupe-equipe{font-style:italic; font-weight:500}
.pgs-premiere{border-top:2px solid var(--line-2)}
/* Téléphone : le moment prend sa propre ligne (bande), la colonne collante ne porte que les groupes. */
.pgs-bande{display:none; position:relative; border-top:2px solid var(--line-2); border-bottom:1px solid var(--line); background:var(--surface-2)}
.pgs-bande-t{position:sticky; left:0; display:inline-block; padding:5px 10px; font-size:.78rem; color:var(--text)}
.pgs-bande-t span{color:var(--text-3)}
.pgs-cell{
  position:relative; min-width:0; min-height:46px; padding:4px; display:flex; flex-direction:column; align-items:stretch; gap:3px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pgs-cell.pgs-today, .pgs-today.pgs-span{background-color:color-mix(in srgb, var(--accent-fond) 38%, 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. */
.pgs-cell.pgs-avec-span{padding-left:calc(clamp(84px, 40%, 112px) + 10px)}
.pgs-span{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; margin:4px; padding:3px; align-self:stretch; justify-self:start;
  width:clamp(84px, 40%, 112px); border:1px solid var(--line); border-radius:8px; background:var(--surface-2);
}
.pgs-span.pgs-span-seul{justify-self:stretch; width:auto}
.pgs-span.pgs-today{background-color:color-mix(in srgb, var(--accent-fond) 38%, var(--surface-2))}
.pgs-cr{
  position:relative; display:flex; flex-wrap:wrap; align-items:flex-start; gap:2px 6px; width:100%; min-width:0; margin:0; padding:4px 6px 4px 5px;
  font:inherit; text-align:left; color:var(--text); cursor:pointer; appearance:none;
  border:1px solid var(--plan-line, var(--line)); border-left:3px solid var(--plan-c, var(--accent)); border-radius:6px; background-color:var(--plan-bg, var(--surface-2));
}
.pgs-cr:hover{filter:brightness(1.06)}
.pgs-cr:focus-visible, .pgl-bloc:focus-visible, .pgl-hors-it:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgs-cr-haut{display:flex; flex-wrap:wrap; align-items:flex-start; gap:2px 5px; width:100%; min-width:0}
.pgs-cr-haut .pg-ty{margin-top:1px}
.pgs-cr-h{flex:none; font-size:.72rem; line-height:1.4; color:var(--text-2)}
.pgs-cr-t{flex:1 1 5em; min-width:0; font-size:.82rem; font-weight:600; line-height:1.22; overflow-wrap:break-word; hyphens:auto}
.pgs-span .pgs-cr-t{font-size:.78rem}
.pgs-cr-signes{display:inline-flex; align-items:center; gap:4px; margin-left:auto}
.pgs-cr .pg-conflit{position:static; padding:2px}
.pgs-cr-etats{display:flex; flex-wrap:wrap; align-items:center; gap:3px; width:100%; min-width:0}
.pgs-cr-etats .pg-etiquette-w, .pgl-bloc-sous .pg-etiquette-w{container-type:normal; display:inline-flex; min-width:0; max-width:100%; margin:0}
.pgl-bloc-sous .pg-etiquette-txt{overflow:hidden; text-overflow:ellipsis}
/* Dans le tableau, l'état se lit EN ENTIER (il passe à la ligne plutôt que d'être tronqué) : « suppression proposée · Tom ». */
.pgs-cr-etats .pg-etiquette{white-space:normal; line-height:1.25; max-width:100%; padding:1px 2px 1px 2px; gap:2px; font-size:.6rem; letter-spacing:0}
.pgs-cr-etats .pg-etiquette-txt{min-width:0; overflow-wrap:break-word}
/* États de proposition : mêmes contours que dans la grille (pointillé = proposé, points = fantôme, brique = suppression proposée). */
.pgs-cr.pg-propose, .pgl-bloc.pg-propose{border:2px dashed var(--plan-c); padding:3px 5px 3px 4px; background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 55%, var(--surface))}
.pgs-cr.pg-fantome, .pgl-bloc.pg-fantome{
  border:2px dotted var(--plan-c); padding:3px 5px 3px 4px; background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 45%, var(--surface));
  background-image:radial-gradient(color-mix(in srgb, var(--plan-c) 28%, transparent) 1px, transparent 1.6px); background-size:7px 7px;
}
.pgs-cr.pg-suppr, .pgl-bloc.pg-suppr{border:2px dashed var(--critique); padding:3px 5px 3px 4px}
.pgs-cr.pg-plage{
  color:var(--texte-2); border:1px dashed var(--ligne-2); border-left:3px solid var(--texte-3); background-color:var(--s3);
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--texte-3) 26%, transparent) 9px 11px);
}
.pgs-cr.pg-fige{background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 80%, var(--surface-3))}

/* Mur (grand écran) : un cran de plus pour lire de loin. */
@media (min-width:1200px){
  .pgs-cr-t{font-size:.9rem}
  .pgs-cr-h{font-size:.76rem}
  .pgs-groupe{font-size:.86rem}
  .pgs-moment-t strong{font-size:.98rem}
  .pgs-span .pgs-cr-t{font-size:.84rem}
}

/* --- Lieux : une ligne par lieu, heures de 07:00 à 23:00 en abscisse --- */
.pgl-table{
  --pgl-label-w:152px; --pgl-heure:58px;
  display:grid; position:relative;
  grid-template-columns:var(--pgl-label-w) minmax(calc(16 * var(--pgl-heure)), 1fr);
  grid-template-rows:48px;
  min-width:calc(var(--pgl-label-w) + 16 * var(--pgl-heure));   /* aussi large que ses heures : la colonne des lieux collante reste retenue par toute la grille */
}
.pgl-coin{display:flex; align-items:center; padding:0 10px}
.pgl-coin-jour{font-size:.82rem; font-weight:600; color:var(--text)}
.pgl-coin.pg-is-today .pgl-coin-jour{color:var(--accent)}
.pgl-axe{position:sticky; top:0; z-index:5; background:var(--surface-3); border-bottom:1px solid var(--line)}
.pgl-h{position:absolute; bottom:7px; transform:translateX(-50%); font-size:.64rem; color:var(--text-3); white-space:nowrap}
.pgl-h-premiere{transform:translateX(4px)}
.pgl-h-derniere{transform:translateX(calc(-100% - 4px))}
.pgl-lieu{
  position:sticky; left:0; z-index:4; display:flex; flex-direction:column; justify-content:center; gap:2px; min-width:0; padding:6px 10px;
  background:var(--surface-3); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.pgl-lieu-nom{font-size:.86rem; font-weight:600; line-height:1.2; color:var(--text); overflow-wrap:anywhere}
.pgl-lieu-sans .pgl-lieu-nom{font-style:italic; font-weight:500; color:var(--text-2)}
.pgl-lieu-meta{display:flex; align-items:center; gap:4px; font-size:.68rem; color:var(--text-3)}
.pgl-lieu-meta.pgl-meta-alerte{color:var(--text); font-weight:600}
.pgl-meta-sg{display:inline-flex; line-height:0; color:var(--alerte)}
.pgl-piste{
  position:relative; min-height:46px; border-bottom:1px solid var(--line);
  background-image:repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px calc(100% / 16));
}
.pgl-bloc{
  position:absolute; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; gap:1px; min-width:30px; margin:0; padding:2px 6px 2px 5px; overflow:hidden;
  font:inherit; text-align:left; color:var(--text); cursor:pointer; appearance:none;
  border:1px solid var(--plan-line, var(--line)); border-left:3px solid var(--plan-c, var(--accent)); border-radius:6px; background-color:var(--plan-bg, var(--surface-2));
}
.pgl-bloc{container-type:inline-size}
.pgl-bloc:hover{filter:brightness(1.06); 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){
  .pgl-bloc-titre, .pgl-bloc-sous{display:none}
  .pgl-bloc-ligne{justify-content:center}
}
.pgl-bloc.pg-fige{background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 80%, var(--surface-3))}
.pgl-coupe-g{border-left-style:dashed}
.pgl-coupe-d{border-right:3px double var(--plan-c)}
.pgl-bloc-ligne{display:flex; align-items:center; gap:5px; min-width:0}
.pgl-bloc-titre{flex:1 1 auto; min-width:0; font-size:.78rem; font-weight:600; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pgl-bloc-signes{display:inline-flex; align-items:center; gap:3px; flex:none}
.pgl-bloc-sous{display:flex; align-items:center; gap:4px; min-width:0; overflow:hidden; font-size:.68rem; line-height:1.2; color:var(--text-2); white-space:nowrap}
.pgl-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 (titre, lecteur d'écran, texte de la ligne du lieu). */
.pgl-a-chevauchement{box-shadow:0 0 0 2px var(--alerte)}
.pgl-chev{display:inline-flex; padding:2px; border-radius:50%; line-height:0; color:var(--alerte); background:var(--alerte-fond); box-shadow:0 0 0 1px var(--alerte-filet)}
.pgl-hors{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:.76rem; color:var(--text-2)}
.pgl-hors[hidden]{display:none !important}
.pgl-hors-it{
  display:inline-flex; align-items:center; gap:4px; padding:3px 8px; font:inherit; font-size:.76rem; color:var(--text); cursor:pointer; appearance:none;
  border:1px solid var(--plan-line, var(--line)); border-left:3px solid var(--plan-c, var(--accent)); border-radius:6px; background-color:var(--plan-bg, var(--surface-2));
}

/* Téléphone (≤ 719 px) : défilement horizontal INTERNE au tableau (jamais celui de la page), première colonne collante. */
@media (max-width:719px){
  .pgs-table{--pgs-moment-w:0px; --pgs-groupe-w:76px; --pgs-col:128px; --pgs-col-mixte:184px}
  .pgs-moment-t{writing-mode:horizontal-tb; transform:none}
  .pgs-moment{display:none}
  .pgs-bande{display:block}
  .pgl-table{--pgl-label-w:104px; --pgl-heure:72px}
  /* Six vues dans le sélecteur : il prend sa propre ligne, pleine largeur, boutons égaux (la barre ne rogne plus rien, à 360 comme à 390 px). */
  .pg-bar-vues{flex-wrap:wrap}
  .pg-bar-vues .pg-seg{flex:1 1 100%; margin-left:0}
  .pg-bar-vues .pg-seg-btn{flex:1 1 0; min-width:0; padding:2px 4px}
  /* F7 : « Équipe » s'ajoute pour la direction (sept boutons) — le sélecteur défile DANS son cadre plutôt que de rogner un mot ou de
     déborder de la page ; chaque bouton garde sa largeur naturelle (jamais moins que son mot) et se partage le reste à parts égales. */
  .pg-bar-vues .pg-seg{overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .pg-bar-vues .pg-seg::-webkit-scrollbar{display:none}
  .pg-bar-vues .pg-seg-btn{flex:1 0 auto}
  .pgs-etat{flex:1 1 100%}
}

/* --- Choix du lieu (carte rapide et fiche) : un sélecteur, création à la volée, rattachement d'un ancien texte --- */
.pgli{display:flex; flex-direction:column; gap:6px; min-width:0}
.pgli[hidden], .pgli [hidden]{display:none !important}
.pgli-ligne{display:flex; align-items:center; gap:8px; min-width:0}
.pgli-lbl{flex:none; margin:0}
.pgli-sel{flex:1 1 0; min-width:0}
.pgli-nouveau-rang{display:flex; flex-wrap:wrap; gap:6px}
.pgli-champ{flex:1 1 160px; min-width:0}
.pgli-note{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:.74rem; line-height:1.4; color:var(--text-2)}
.pgli-erreur{flex:1 1 100%; margin:0}
.pgli-rattacher{min-height:32px; padding:3px 10px; font-size:.76rem}


/* =====================================================================================================================
   F7 (spec planning § 8) : vue « Équipe » (par animateur, direction) et vue « Ma journée » (chaque membre, pensée pour le téléphone).
   Tokens de css/tokens.css seuls. Les états (repos, doublon, maintenant / ensuite, proposé, verrouillé, modifié) ne passent JAMAIS par la
   couleur seule : hachures + le mot « repos », signe au trait + le mot « doublon », pastille en toutes lettres. Préfixes pge- (Équipe) et
   pgm- (Ma journée) : aucun n'existe ailleurs (css/*.css, vérifié par git grep). Le bloc, la piste, l'étiquette de ligne et l'axe de la
   frise du jour sont ceux de la vue Lieux (pgl-*) : leurs règles ne sont pas redites.
   ===================================================================================================================== */

/* --- Tête du planning : « Ma journée », le bouton de l'entrée téléphone --- */
.plan-tete-maj{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--accent); background:var(--surface); border-color:var(--accent-filet)}
.plan-tete-maj[hidden]{display:none !important}
.plan-tete-maj svg{flex:none}
/* allumé (« Ma journée » affichée) : fond d'accent clair et double filet — le texte garde la couleur d'accent que couleur.css impose aux .sf-btn */
.plan-tete-maj.on{background:var(--accent-fond); border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.plan-tete-maj:hover{border-color:var(--accent)}

/* --- Équipe : échelle, tableau, lignes de membres --- */
.pge-outils{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap}
.pge-echelle{display:inline-flex; border:1px solid var(--line); border-radius:var(--r-xs); overflow:hidden}
.pge-echelle-btn{min-height:34px; padding:2px 14px; font-size:.78rem; cursor:pointer; border:none; border-right:1px solid var(--line); background:var(--surface-3); color:var(--text-3)}
.pge-echelle-btn:last-child{border-right:none}
.pge-echelle-btn:hover{color:var(--text)}
.pge-echelle-btn.on{background:var(--accent-bg); color:var(--accent); font-weight:600}
.pge-scroll{background:var(--surface-3)}
.pge-table{
  --pgl-label-w:152px; --pgl-heure:58px; --pge-col:118px;
  position:relative; display:block;
  min-width:calc(var(--pgl-label-w) + 16 * var(--pgl-heure));   /* aussi large que ses heures : la colonne des noms collante reste retenue par tout le tableau */
}
.pge-table.pge-sem{min-width:calc(var(--pgl-label-w) + var(--pge-n) * var(--pge-col))}
.pge-row{display:grid; grid-template-columns:var(--pgl-label-w) minmax(0, 1fr)}
.pge-sem .pge-row{grid-template-columns:var(--pgl-label-w) repeat(var(--pge-n), minmax(var(--pge-col), 1fr))}
.pge-tete{position:sticky; top:0; z-index:5; height:48px; background:var(--surface-3)}
.pge-tete .pgl-axe{position:relative; top:auto}
.pge-tete .pg-dayhead{position:relative; top:auto; min-width:0}
.pge-label{gap:1px}
.pge-label .pgl-lieu-nom{font-size:.84rem}
.pge-sous{font-size:.68rem; line-height:1.25; color:var(--text-2); overflow-wrap:anywhere}
.pge-meta-h{font-variant-numeric:tabular-nums}
.pge-meta-repos{color:var(--text-2)}
.pge-meta-dbl{color:var(--text)}
.pge-label-vide{min-height:0; padding:0}
.pge-row-hors .pge-hors{padding:4px 10px; border-bottom:1px solid var(--line); background:var(--surface-3)}
.pge-vide{margin:0; padding:18px 14px; font-size:.86rem; color:var(--text-2)}
.pg-editable .pge-tete, .pg-editable .pge-label, .pg-editable .pge-hors{background:var(--pg-teinte)}

/* Repos : une bande hachurée sur la ligne du membre, avec le mot « repos » (jamais la hachure seule). Sous les blocs. */
.pge-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(--line-2); border-right:1px dashed var(--line-2);
  background-color:color-mix(in srgb, var(--text-3) 9%, var(--surface-3));
  background-image:repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--text-3) 26%, transparent) 7px 8.5px);
}
.pge-repos-mot{padding:1px 5px; border-radius:var(--r-xs); background:var(--surface-3); font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text)}
.pg-editable .pge-repos-mot{background:var(--pg-teinte)}
.pge-bloc.pgl-a-chevauchement{z-index:1}

/* Semaine : une cellule par jour — mini-frise, repos ombré, heures, signe de doublon. */
.pge-cell{position:relative; min-width:0; display:flex; flex-direction:column; gap:3px; padding:5px 6px 4px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.pge-cell.pge-today{background-color:color-mix(in srgb, var(--accent-fond) 38%, transparent)}
.pge-cell-doublon{box-shadow:inset 0 0 0 2px var(--alerte)}
.pge-mini{
  position:relative; flex:none; overflow:visible; border-radius:3px; background-color:color-mix(in srgb, var(--surface) 55%, transparent);
  background-image:linear-gradient(to right, transparent calc(31.25% - 1px), var(--line) calc(31.25% - 1px) 31.25%, transparent 31.25% calc(75% - 1px), var(--line) calc(75% - 1px) 75%, transparent 75%);   /* 12:00 et 19:00 */
}
.pge-mini .pge-repos{padding:0 3px; align-items:center}
.pge-mini .pge-repos-mot{font-size:.56rem; padding:0 3px; line-height:1.5}
.pge-barre{
  position:absolute; z-index:1; height:9px; min-width:4px; margin:0; padding:0; appearance:none; cursor:pointer;
  border:1px solid var(--plan-c, var(--accent)); border-radius:2px; background-color:var(--plan-c, var(--accent));
}
.pge-barre::after{content:''; position:absolute; inset:-5px -2px}   /* zone de toucher plus large que le trait */
.pge-barre.pg-propose{background-color:var(--surface); border-style:dashed}
.pge-barre.pg-fantome{background-color:var(--surface); border-style:dotted}
.pge-barre.pge-barre-doublon{box-shadow:0 0 0 2px var(--alerte); z-index:2}
.pge-barre:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pge-pied{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 6px; min-height:16px; font-size:.72rem; line-height:1.3; color:var(--text-2)}
.pge-h{font-weight:600; color:var(--text); font-variant-numeric:tabular-nums}
.pge-h-vide{font-weight:400; color:var(--text-2)}
.pge-dbl{display:inline-flex; align-items:center; gap:3px; color:var(--alerte)}
.pge-dbl svg{flex:none}
.pge-dbl-mot{font-size:.66rem; font-weight:600; color:var(--text); white-space:nowrap}
.pge-legende{display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; margin:0; font-size:.74rem; color:var(--text-2)}
.pge-lg{display:inline-flex; align-items:center; gap:5px}
.pge-lg-repos{display:inline-block; width:24px; height:12px; border:1px dashed var(--line-2); border-radius:2px;
  background-image:repeating-linear-gradient(-45deg, transparent 0 4px, color-mix(in srgb, var(--text-3) 38%, transparent) 4px 5.5px)}

/* --- Ma journée : une colonne, de grandes cibles, l'heure d'abord --- */
.pgm{display:flex; flex-direction:column; gap:12px; width:100%; max-width:680px; min-width:0; margin:0 auto; padding-bottom:84px}
.pgm-tete{display:flex; align-items:center; gap:8px}
.pgm-nav{flex:none; width:44px; height:44px; padding:0; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--text-2); background:var(--surface-3); border:1px solid var(--line); border-radius:50%}
.pgm-nav:hover:not(:disabled){border-color:var(--line-2); color:var(--text)}
.pgm-nav:disabled{opacity:.35; cursor:default}
.pgm-titre{flex:1 1 auto; min-width:0; margin:0; text-align:center; font-family:var(--serif); font-size:clamp(1.15rem, 5vw, 1.55rem); font-weight:400; line-height:1.2; color:var(--text)}
.pgm-titre-jour{white-space:nowrap}
.pgm-outils{display:flex; justify-content:center; flex-wrap:wrap; gap:0 18px; margin-top:-6px}
.pgm-lien{min-height:36px; padding:0 4px; font:inherit; font-size:.84rem; color:var(--accent); background:none; border:none; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pgm-qui{margin:0; text-align:center; font-size:.86rem; color:var(--text-2)}
.pgm-refs{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 8px}
.pgm-refs[hidden], .pgm-repos[hidden]{display:none !important}
.pgm-refs-lbl{font-size:.8rem; color:var(--text-2)}
.pgm-chip{padding:3px 12px; font-size:.84rem; font-weight:600; color:var(--text); background:var(--accent-fond); border:1px solid var(--accent-filet); border-radius:999px}
.pgm-repos{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background-color:var(--surface-2);
  background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--text-3) 24%, transparent) 9px 11px);
}
.pgm-repos-mot{padding:2px 8px; font-size:.7rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--text); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-xs)}
.pgm-repos-phrase{padding:2px 8px; font-size:1rem; font-weight:600; color:var(--text); background:var(--surface-2); border-radius:var(--r-xs)}
.pgm-liste{display:flex; flex-direction:column; gap:8px; min-width:0}
.pgm-vide{margin:0; padding:18px 8px; text-align:center; font-size:.9rem; color:var(--text-2)}
.pgm-cr{
  position:relative; display:flex; align-items:flex-start; gap:12px; width:100%; min-width:0; min-height:64px; margin:0; padding:10px 12px 10px 10px;
  font:inherit; text-align:left; color:var(--text); cursor:pointer; appearance:none;
  border:1px solid var(--plan-line, var(--line)); border-left:5px solid var(--plan-c, var(--accent)); border-radius:10px; background-color:var(--plan-bg, var(--surface-2));
}
.pgm-cr:hover{filter:brightness(1.05)}
.pgm-cr:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pgm-cr.pg-fige{background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 80%, var(--surface-3))}
.pgm-cr.pg-propose{border:2px dashed var(--plan-c); border-left-width:5px; padding:9px 11px 9px 9px; background-color:color-mix(in srgb, var(--plan-bg, var(--surface-2)) 55%, var(--surface))}
.pgm-cr.pg-suppr{border:2px dashed var(--critique); border-left-width:5px; padding:9px 11px 9px 9px}
.pgm-cr.pgm-maintenant{box-shadow:0 0 0 3px var(--accent)}
.pgm-heures{flex:none; display:flex; flex-direction:column; gap:2px; min-width:3.1rem}
.pgm-h-debut{font-size:1.02rem; font-weight:700; line-height:1.25; font-variant-numeric:tabular-nums}
.pgm-h-fin{font-size:.76rem; line-height:1.2; color:var(--text-2); font-variant-numeric:tabular-nums}
.pgm-corps{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px}
.pgm-l1{display:flex; align-items:flex-start; gap:7px; min-width:0}
.pgm-l1 .pg-ty{margin-top:2px}
.pgm-cr-titre{min-width:0; font-size:1rem; font-weight:700; line-height:1.25; overflow-wrap:anywhere}
.pgm-l2, .pgm-avec{font-size:.82rem; line-height:1.3; color:var(--text-2); overflow-wrap:anywhere}
.pgm-etats{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px}
.pgm-etats .pg-etiquette-w{container-type:normal; display:inline-flex; min-width:0; max-width:100%; margin:0}
.pgm-etats .pg-etiquette{white-space:normal; line-height:1.25; font-size:.68rem}
.pgm-repere{padding:2px 9px; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border:1.5px solid var(--accent); border-radius:999px}
.pgm-repere-maintenant{color:var(--sur-accent); background:var(--accent)}
.pgm-repere-ensuite{color:var(--accent); background:var(--surface)}
.pgm-etat{display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; color:var(--text)}
.pgm-doublon{display:flex; align-items:flex-start; gap:6px; font-size:.78rem; font-weight:600; line-height:1.3; color:var(--text)}
.pgm-doublon .pgl-chev{flex:none; margin-top:1px}
.pgm-mes{margin-top:8px; padding-top:14px; border-top:1px solid var(--line)}
.pgm-mes-titre{margin:0 0 10px; font-size:1rem; font-weight:600; color:var(--text)}
.pgm-hors-equipe{display:flex; flex-direction:column; align-items:center; gap:10px; padding:20px 16px; text-align:center; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md)}
.pgm-hors-titre{margin:0; font-size:1.05rem; font-weight:600; color:var(--text)}
.pgm-hors-aide{margin:0; font-size:.86rem; line-height:1.4; color:var(--text-2)}

@media (max-width:719px){
  .pge-table{--pgl-label-w:104px; --pgl-heure:72px; --pge-col:96px}
  .pge-label{padding:5px 8px}
  .pge-sous{font-size:.64rem}
  .pge-dbl-mot{display:none}
}


/* =====================================================================================================================
   F8 (spec planning § 7) : les GARDES — postes (réglages), « Tour de garde » (rotation), bandeau du Jour, cartes de la Liste, ligne « Garde » du
   tableau Séjour, blocs de la vue Équipe, « Ma garde » de Ma journée, fiche d'une garde. Tokens de css/tokens.css seuls.
   Les gardes ont LEUR forme (spec § 5) : ni une famille de couleur, ni un des 13 types — un liseré épais de la dominante (pétrole), la lanterne pour la
   garde du soir, la lune pour la permanence de nuit ; le soir est un lavis clair, la nuit un lavis un cran plus profond. Jamais la couleur seule :
   le pictogramme ET le mot (« soir », « nuit », « permanence »). États (« X en congé », doublon, retouchée) : signe au trait + mots.
   Préfixe pgg- : aucun n'existe ailleurs (css/*.css, vérifié par tests/planning_gardes.test.mjs).
   ===================================================================================================================== */
.pgg-bloc, .pgg-carte, .pgg-barre, .pgg-hors, .pgg-detail, .pgg-sj-poste, .pgg-bandeau, .pgm-garde, .pgg-slot{--g-c:var(--accent); --g-bg:var(--accent-fond); --g-line:var(--accent-filet)}
.pgg-bloc-nuit, .pgg-carte-nuit, .pgg-barre-nuit, .pgg-hors-nuit, .pgg-slot-nuit, .pgg-detail[data-garde="nuit"]{--g-c:var(--accent-bande); --g-bg:var(--accent-fond2)}

/* --- Tête du planning : « Tour de garde » --- */
.plan-tete-tour{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.plan-tete-tour[hidden]{display:none !important}
.plan-tete-tour svg{flex:none}

/* --- Réglages : postes de garde --- */
.pgg-poste-titre{display:flex; align-items:center; gap:7px; min-width:0}
.pgg-poste-ico{display:inline-flex; flex:none; color:var(--accent)}
.pgg-poste-nom{min-width:0; font-size:.94rem; overflow-wrap:anywhere}
.pgg-poste-texte{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:3px}
.pgg-poste-sous{display:flex; flex-wrap:wrap; gap:2px 12px; font-size:.78rem; color:var(--text-2)}
.pgg-modifier{min-height:40px; margin-left:0}
.pgg-ajout{align-self:flex-start; min-height:40px}
.pgg-ajout[hidden]{display:none !important}
.pgg-edition{gap:12px}
.pgg-champ{display:flex; flex-direction:column; gap:5px; min-width:0}
.pgg-portee{display:flex; flex-wrap:wrap; gap:6px}
.pgg-portee-btn, .pgg-lieu, .pgg-groupe{min-height:40px}
.pgg-detail[hidden], .pgg-champ [hidden]{display:none !important}
.pgg-nb-rang{display:flex; align-items:center; gap:6px}
.pgg-nb{width:72px; text-align:center}
.pgg-pas{min-width:44px; min-height:44px; padding:0; margin-left:0; font-size:1.1rem}
.pgg-horaire{display:flex; flex-direction:column; gap:6px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface)}
.pgg-horaire-tete{display:flex; align-items:center; gap:8px; min-height:34px; font-size:.86rem; font-weight:600; color:var(--text); cursor:pointer}
.pgg-horaire-tete input{width:20px; height:20px; accent-color:var(--accent)}
.pgg-horaire-ico{display:inline-flex; color:var(--accent)}
.pgg-heures{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px}
.pgg-heures[hidden]{display:none !important}
.pgg-heure{width:112px; min-height:44px}
.pgg-fleche{color:var(--text-3)}
.pgg-lendemain{font-size:.76rem; color:var(--text-2)}
.pgg-actions{display:flex; flex-wrap:wrap; gap:8px}
.pgg-actions .sf-btn{min-height:44px; margin-left:0}

/* --- Tour de garde : le panneau --- */
@media (min-width:720px){ .plan-panneau.pgg-tour{width:min(800px, 100vw)} }
.pgg-tour-corps{display:flex; flex-direction:column; gap:14px; padding-bottom:0}
.pgg-t-sec{display:flex; flex-direction:column; gap:8px; min-width:0}
.pgg-t-sec[hidden], .pgg-t-pied[hidden], .pgg-t-perime[hidden], .pgg-t-note[hidden]{display:none !important}
.pgg-t-h{margin:0; font-size:.9rem; font-weight:600; color:var(--text)}
.pgg-t-aide, .pgg-t-note{margin:0; font-size:.78rem; line-height:1.4; color:var(--text-2)}
.pgg-pool{display:flex; flex-wrap:wrap; gap:6px}
.pgg-membre{display:inline-flex; flex-direction:column; align-items:flex-start; gap:0; min-height:44px; padding:4px 12px; text-align:left}
.pgg-membre-nom{font-size:.86rem; font-weight:600}
.pgg-membre-role{font-size:.66rem; color:var(--text-3)}
.pgg-membre-role:empty{display:none}
.pgg-membre.on .pgg-membre-role{color:var(--text-2)}
.pgg-t-periode-ligne{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.pgg-t-lbl{font-size:.82rem; color:var(--text-2)}
.pgg-t-date{min-height:44px; width:auto; min-width:160px}
.pgg-t-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px}
.pgg-generer{min-height:44px; margin-left:0; padding:0 22px}
.pgg-generer:disabled{opacity:.5}
.pgg-t-tirage{font-size:.76rem; color:var(--text-3)}
.pgg-t-perime{margin:0; padding:8px 10px; font-size:.82rem; font-weight:600; color:var(--text); border:1px solid var(--alerte-filet); border-radius:var(--r-xs); background:var(--alerte-fond)}

/* Compteurs : collés en haut de l'aperçu, visibles pendant qu'on ajuste. */
.pgg-compteurs{position:sticky; top:0; z-index:3; display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; padding:8px 0; background:var(--surface); border-bottom:1px solid var(--line)}
.pgg-cpt-titre{font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2); margin-right:4px}
.pgg-cpt{display:inline-flex; align-items:baseline; gap:4px; padding:2px 9px; font-size:.8rem; border:1px solid var(--line-2); border-radius:999px; background:var(--surface-2)}
.pgg-cpt-nom{font-weight:600}
.pgg-cpt-v{font-weight:700; font-variant-numeric:tabular-nums}
.pgg-cpt-sep{color:var(--text-3)}
.pgg-cpt-hors{border-style:dashed; color:var(--text-2)}
.pgg-cpt-lg{margin-left:4px; font-size:.7rem; color:var(--text-3)}

/* Aperçu : soirs en lignes, postes en colonnes ; défilement INTERNE seulement. */
.pgg-ap-defil{overflow:auto; max-width:100%; max-height:max(280px, calc(100dvh - 250px)); border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-3); overscroll-behavior:contain}
.pgg-ap{width:100%; min-width:max-content; border-collapse:separate; border-spacing:0}
.pgg-ap-cap{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.pgg-ap th, .pgg-ap td{border-bottom:1px solid var(--line); border-right:1px solid var(--line); vertical-align:top; text-align:left}
.pgg-ap thead th{position:sticky; top:0; z-index:2; padding:8px 10px; background:var(--surface-3); font-weight:600}
.pgg-ap-coin{left:0; z-index:3 !important; font-size:.72rem; color:var(--text-3); width:74px}
.pgg-ap-poste-nom{display:block; font-size:.86rem; color:var(--text)}
.pgg-ap-poste-sous{display:block; font-size:.66rem; font-weight:400; color:var(--text-3); white-space:nowrap}
.pgg-ap-jour{position:sticky; left:0; z-index:1; width:74px; padding:8px 10px; background:var(--surface-3); font-size:.8rem; font-weight:600; white-space:nowrap; color:var(--text)}
.pgg-ap-case{min-width:170px; padding:5px; display:table-cell}
.pgg-ap-case > * + *{margin-top:5px}
.pgg-ap-rien{color:var(--text-3)}
.pgg-slot{
  box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; gap:2px 6px; width:100%; min-height:44px; margin:0; padding:6px 8px 6px 7px; font:inherit; text-align:left; color:var(--text);
  appearance:none; cursor:pointer; border:1px solid var(--g-line); border-left:5px solid var(--g-c); border-radius:8px; background-color:var(--g-bg);
}
.pgg-slot:hover{filter:brightness(1.05)}
.pgg-slot:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgg-slot-ico{display:inline-flex; flex:none; color:var(--g-c)}
.pgg-slot-t{flex:none; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-2)}
.pgg-slot-n{min-width:0; font-size:.86rem; font-weight:600; overflow-wrap:anywhere}
.pgg-slot-vide{font-weight:500; font-style:italic; color:var(--text-2)}
.pgg-slot-a-pourvoir{border-style:dashed; border-left-style:solid}
.pgg-slot-signale{box-shadow:0 0 0 2px var(--alerte)}
.pgg-slot-fixe{cursor:default; background-image:repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--text-3) 14%, transparent) 9px 11px)}
.pgg-slot-fixe:hover{filter:none}
.pgg-slot-etat{display:inline-flex; align-items:center; gap:4px; font-size:.68rem; font-weight:600; color:var(--text-2)}
.pgg-slot-alerte{flex:1 1 100%; display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600; color:var(--text)}
.pgg-slot-sg{display:inline-flex; line-height:0; color:var(--alerte)}

/* Alertes de la rotation : en toutes lettres. */
.pgg-alertes{display:flex; flex-direction:column; gap:6px}
.pgg-alertes-t{margin:0; font-size:.82rem; font-weight:700; color:var(--text)}
.pgg-alertes-ok{margin:0; font-size:.82rem; color:var(--text-2)}
.pgg-alertes-liste{display:flex; flex-direction:column; gap:5px; margin:0; padding:0; list-style:none}
.pgg-alerte{display:flex; align-items:flex-start; gap:7px; padding:7px 10px; font-size:.8rem; line-height:1.4; color:var(--text); border:1px solid var(--alerte-filet); border-radius:var(--r-xs); background:var(--alerte-fond)}
.pgg-alerte-sg{display:inline-flex; flex:none; margin-top:2px; line-height:0; color:var(--alerte)}

/* Pied : valider et publier, collé en bas du panneau. */
.pgg-t-pied{position:sticky; bottom:0; z-index:4; display:flex; flex-direction:column; gap:6px; margin:0 -14px; padding:10px 14px max(12px, env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--line-2)}
.pgg-t-resume{margin:0; font-size:.8rem; color:var(--text-2)}
.pgg-valider{min-height:48px; margin-left:0; font-size:.94rem}
.pgg-t-erreur{margin:0}

/* Choix d'un membre pour une case : une feuille au-dessus du panneau (téléphone : collée en bas). */
.pgg-choix-ov{position:fixed; inset:0; z-index:130; display:flex; align-items:center; justify-content:center; padding:12px; background:var(--voile-modal)}
.pgg-choix{display:flex; flex-direction:column; gap:8px; width:min(420px, 100%); max-height:calc(100dvh - 24px); overflow-y:auto; padding:14px; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--shadow-elevated)}
@media (max-width:719px){ .pgg-choix-ov{align-items:flex-end; padding:0} .pgg-choix{width:100%; border-radius:var(--r-lg) var(--r-lg) 0 0; padding-bottom:max(14px, env(safe-area-inset-bottom))} }
.pgg-choix-tete{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pgg-choix-titre{margin:0; font-size:.98rem; font-weight:600; color:var(--text)}
.pgg-choix-fermer{min-width:40px; min-height:40px; padding:0; margin-left:0}
.pgg-choix-sous{margin:0; font-size:.78rem; color:var(--text-2)}
.pgg-choix-liste{display:flex; flex-direction:column; gap:6px}
.pgg-choix-membre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; min-height:48px; padding:6px 12px; font:inherit; text-align:left; color:var(--text); appearance:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2)}
.pgg-choix-membre:hover:not(:disabled){border-color:var(--accent); background:var(--accent-fond)}
.pgg-choix-membre.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-fond)}
.pgg-choix-membre:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgg-choix-membre:disabled{cursor:not-allowed; opacity:.6}
.pgg-choix-nom{font-size:.92rem; font-weight:600}
.pgg-choix-cpt{font-size:.72rem; color:var(--text-2)}
.pgg-choix-note{flex:1 1 100%; display:inline-flex; align-items:center; gap:4px; font-size:.74rem; font-weight:600; color:var(--text)}
.pgg-choix-vider{justify-content:center; font-weight:500; color:var(--text-2); background:transparent}
.pgg-choix-ok{min-height:44px; margin-left:0}
.pgg-choix-msg{min-height:1.1em; margin:0; font-size:.78rem; font-weight:600; color:var(--text)}

/* --- Bandeau du Jour --- */
.pgg-bandeau{display:flex; flex-wrap:wrap; align-items:flex-start; gap:2px 14px; margin:0 0 6px; padding:3px 10px; font-size:.76rem; color:var(--text);
  border:1px solid var(--g-line); border-left:4px solid var(--g-c); border-radius:var(--r-sm); background:color-mix(in srgb, var(--g-bg) 50%, var(--surface))}
.pgg-b-tete{display:inline-flex; align-items:center; gap:6px; min-height:26px; font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.pgg-b-ico{display:inline-flex}
.pgg-b-corps{flex:1 1 260px; min-width:0; display:flex; flex-direction:column; gap:1px}
.pgg-b-ligne{display:flex; flex-wrap:wrap; align-items:center; gap:1px 10px; min-width:0}
.pgg-b-temps{display:inline-flex; align-items:baseline; gap:6px; min-width:7.2rem}
.pgg-b-detail{font-size:.72rem; color:var(--text-2)}
.pgg-b-puces{display:flex; flex-wrap:wrap; gap:4px 6px; min-width:0}
.pgg-puce{display:inline-flex; align-items:baseline; flex-wrap:wrap; gap:2px 6px; min-height:28px; padding:2px 9px; font:inherit; font-size:.74rem; color:var(--text); text-align:left; appearance:none; cursor:pointer;
  border:1px solid var(--g-line); border-radius:999px; background:var(--surface)}
.pgg-puce:hover{border-color:var(--accent)}
.pgg-puce:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgg-puce-poste{font-weight:700; color:var(--text-2)}
.pgg-puce-noms{font-weight:600}
.pgg-puce-vide .pgg-puce-noms{font-style:italic; font-weight:500; color:var(--text-2)}
.pgg-puce-conge{border-color:var(--alerte-filet); background:var(--alerte-fond)}
.pgg-puce-alerte{display:inline-flex; align-items:center; gap:3px; font-size:.72rem; font-weight:600}
.pgg-puce-sg{display:inline-flex; line-height:0; color:var(--alerte)}

/* --- Liste : cartes de gardes --- */
.pgg-carte{border-left:5px solid var(--g-c); border-color:var(--g-line); border-left-color:var(--g-c); background-color:var(--g-bg)}
.pgg-carte-suite{border-top-style:dashed}
.pgg-carte .pl-type{font-weight:600}
.pgg-carte .pl-meta{white-space:normal; overflow:visible; text-overflow:clip}

/* --- Équipe : blocs, barres, décompte --- */
.pgg-bloc{border:1px solid var(--g-line); border-left:5px solid var(--g-c); background-color:var(--g-bg)}
.pgg-bloc .pg-ty, .pgg-hors .pg-ty{color:var(--g-c)}
.pgg-bloc-conge{font-weight:600; color:var(--text)}
.pgg-hors{border:1px solid var(--g-line); border-left:5px solid var(--g-c); background-color:var(--g-bg)}
.pgg-barre{border-color:var(--g-c); background-color:var(--g-c)}
.pgg-barre-nuit{background-image:repeating-linear-gradient(-45deg, transparent 0 3px, color-mix(in srgb, var(--sur-portail) 40%, transparent) 3px 4.5px)}
.pgg-decompte{color:var(--text); font-weight:600}
.pgg-decompte-ico{display:inline-flex; color:var(--accent)}
.pgg-cell-garde{display:inline-flex; align-items:center; gap:4px; font-size:.66rem; font-weight:600; color:var(--text-2)}
.pgg-cell-garde svg{flex:none; color:var(--accent)}

/* --- Séjour : la ligne « Garde » --- */
.pgs-groupe-garde{align-items:center; gap:4px; padding-inline:6px 4px; font-weight:600; white-space:nowrap}
.pgg-sj-lg-ico{display:inline-flex; color:var(--accent)}
.pgg-sj-cell{display:flex; flex-direction:column; gap:5px}
.pgg-sj-poste{display:flex; flex-direction:column; gap:1px; min-width:0; padding:3px 4px 3px 6px; border-left:4px solid var(--g-c); border-radius:4px; background:var(--g-bg)}
.pgg-sj-poste-nom{font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); overflow-wrap:anywhere}
.pgg-sj-slot{display:flex; flex-wrap:wrap; align-items:baseline; gap:1px 6px; width:100%; min-height:26px; margin:0; padding:2px 3px; font:inherit; font-size:.8rem; text-align:left; color:var(--text); appearance:none; cursor:pointer; border:none; border-radius:4px; background:transparent}
.pgg-sj-slot:hover{background:color-mix(in srgb, var(--surface) 55%, transparent)}
.pgg-sj-slot:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgg-sj-ico{display:inline-flex; align-self:center; color:var(--accent)}
.pgg-sj-t{flex:none; min-width:2.2em; font-size:.64rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-2)}
.pgg-sj-noms{min-width:0; font-weight:600; overflow-wrap:anywhere}
.pgg-sj-vide .pgg-sj-noms{font-style:italic; font-weight:500; color:var(--text-2)}
.pgg-sj-alerte{flex:1 1 100%; display:inline-flex; align-items:center; gap:3px; font-size:.68rem; font-weight:600; color:var(--text)}
.pgg-sj-sg{display:inline-flex; line-height:0; color:var(--alerte)}

/* --- Ma journée : ma garde --- */
.pgm-garde{display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border:1px solid var(--g-line); border-left:5px solid var(--g-c); border-radius:10px; background:var(--g-bg)}
.pgm-garde[hidden]{display:none !important}
.pgm-garde-ico{display:inline-flex; flex:none; margin-top:2px; color:var(--accent)}
.pgm-garde-corps{display:flex; flex-direction:column; gap:4px; min-width:0}
.pgm-garde-l{margin:0; font-size:.96rem; line-height:1.5; color:var(--text); overflow-wrap:anywhere}
.pgm-garde-l strong{font-weight:700}
.pgm-garde-lien{display:inline; margin:0; padding:3px 0; font:inherit; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.pgm-garde-lien:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* --- Fiche d'une garde --- */
.pgg-detail{max-height:calc(100dvh - 16px); overflow-y:auto}
.pgg-detail-type{padding:2px 10px 2px 8px; border:1px solid var(--g-line); border-left:4px solid var(--g-c); border-radius:var(--r-xs); background:var(--g-bg); color:var(--text)}
.pgg-detail-type .pg-ty{color:var(--g-c)}
.pgg-detail-echange{padding:8px 10px; border:1px dashed var(--equipe-filet, var(--line-2)); border-radius:var(--r-xs)}
.pgg-confier{display:flex; flex-direction:column; gap:8px; padding-top:6px}
.pgg-confier[hidden]{display:none !important}
.pgg-confier-t{margin:0; font-size:.8rem; font-weight:600; color:var(--text)}
.pgg-quitte{display:flex; flex-wrap:wrap; gap:6px}
.pgg-quitte-btn{min-height:40px}
.pgg-reprend{display:flex; flex-direction:column; gap:6px}
.pgg-reprend-membre{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; min-height:48px; padding:6px 12px; font:inherit; text-align:left; color:var(--text); appearance:none; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface-2)}
.pgg-reprend-membre:hover:not(:disabled){border-color:var(--accent); background:var(--accent-fond)}
.pgg-reprend-membre:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.pgg-reprend-membre:disabled{cursor:not-allowed; opacity:.62}
.pgg-reprend-nom{font-size:.9rem; font-weight:600}
.pgg-reprend-cpt{font-size:.72rem; color:var(--text-2)}
.pgg-reprend-raison{flex:1 1 100%; font-size:.74rem; font-weight:600; color:var(--text)}
.pgg-confier-vide{margin:0; font-size:.78rem; color:var(--text-2)}
.pgg-confier-btn{min-height:44px}

@media (max-width:719px){
  .pgg-bandeau{gap:0 6px; padding:2px 8px 3px 7px; font-size:.74rem}
  .pgg-b-tete{min-height:22px}
  .pgg-b-tete .pgg-b-mot{display:none}
  .pgg-b-temps{min-width:0; gap:5px}
  .pgg-b-ligne{gap:1px 8px}
  .pgg-puce{min-height:26px; padding:1px 8px; font-size:.72rem}
  .pgg-b-puces{gap:3px 4px}
  .pgg-compteurs{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:6px 0}
  .pgg-compteurs::-webkit-scrollbar{display:none}
  .pgg-compteurs > *{flex:none}
  .pgg-ap-case{min-width:152px}
  .pgg-t-date{flex:1 1 160px}
  .pgg-heure{flex:1 1 104px}
}

/* ---------- Filtres « Groupes » et « Animateurs » (F10) : boutons à sélection multiple ----------
   L'état actif ne tient pas à la couleur seule : coche « ✓ », fond teinté, filet plus marqué (box-shadow intérieur : la boîte ne bouge pas).
   Cible tactile 40 px de haut. Jetons de css/tokens.css seulement. */
.plan-toolbar.plan-toolbar-filtres{flex-wrap:wrap; overflow-x:visible; row-gap:8px}
.plan-toolbar > .pgf-bloc{flex:1 1 100%; min-width:0; display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 28px}   /* les deux rangées côte à côte quand la largeur le permet, sinon l'une sous l'autre */
.pgf{display:flex; align-items:flex-start; gap:6px 12px; min-width:0; flex:0 1 auto; max-width:100%}
.pgf-lbl{
  flex:none; min-width:84px; min-height:40px; display:inline-flex; align-items:center;
  font-family:var(--font-sans); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3);
}
.pgf-btns{display:flex; flex-wrap:wrap; gap:6px; flex:1 1 0; min-width:0}
.pgf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box;
  min-height:40px; min-width:48px; max-width:100%; padding:0 14px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-3);
  color:var(--text-2); font:inherit; font-size:.84rem; font-weight:500; line-height:1.2; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
}
.pgf-btn:hover{border-color:var(--line-2); color:var(--text)}
.pgf-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.pgf-btn.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); background:var(--accent-bg); color:var(--text); font-weight:600}
.pgf-coche{flex:none; font-size:.9em; line-height:1}
.pgf-nom{min-width:0; overflow-wrap:anywhere}
.pgf-rappel,.pgf-note{flex:1 1 100%; margin:0; font-size:.8rem; line-height:1.45; color:var(--text-2)}
.pgf-note{max-width:70ch}
@media (max-width:560px){
  .pgf-lbl{min-width:72px}
  .pgf-btn{padding:0 12px}
}