/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ⭐⭐⭐ LE BANDEAU COMMUN (lot 14e, 15/10/2026) — UNE feuille, écrite par UN fichier (`app/Services/Bandeau.php`),
   et SEPT rendus : tableau de bord du nageur · tableau de bord du coach · suivi d'entraînement · fiche du nageur ·
   suivi quantitatif · écran WHOOP · suivi quantitatif public (la vitrine, visiteur sans compte).
   La forme est celle de la maquette (`claude/cowork/_maquettes_suivi/_core.py`, « BANDEAU COMMUN ») :
   surface d'identité, nom et sa pastille d'état (le surtitre), contexte, pastilles, liens à droite, actions, récap.
   ⭐ (lot DA-11, 16/10/2026) Le surtitre n'est plus une ligne mais une pastille à côté du nom, et les liens sont des
   pastilles d'icône. ⛔ Aucune règle ne suppose le bandeau à sa place d'origine : le suivi d'entraînement le retire
   et le repose à chaque dessin — tout s'écrit sous `.bnd`, jamais sous un parent.
   ⛔ Toute règle d'ici porte la racine `.bnd` : rien ne fuit ailleurs.
   ⭐ La surface est celle de l'ancien bandeau du tableau de bord (`--hero-grad` / `--hero-fg` quand un thème
   de séance les pose, l'identité sinon) ; Sombre et Bord de bassin prennent le bord `--line-strong`.
   ⭐ (lot DA-14, 16/10/2026) Le bandeau ne rogne plus : un menu « ⋯ » ouvert descend en entier sous son bord. Le décor
   n'en dépendait pas — sa couche (`.motif-couche`, `motif_bandeau.php`) se rogne elle-même, arrondi compris, et le fond
   de `.bnd` est un dégradé que l'arrondi rogne déjà.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.bnd{position:relative;border-radius:var(--radius);padding:16px 20px;margin:0 0 14px;
  color:var(--hero-fg,var(--identity-ink));background:var(--hero-grad,var(--identity));display:flex;flex-direction:column;gap:12px}
[data-theme="dark"] .bnd,[data-theme="poolside"] .bnd{border:var(--border-width) solid var(--line-strong)}
/* ⛔ Une part vide est cachée : une règle d'affichage de la part ne doit jamais la rallumer. */
.bnd[hidden],.bnd [hidden]{display:none!important}
.bnd .bnd-haut{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 22px;align-items:start}
.bnd .bnd-qui{min-width:0}
/* ⭐ (lot DA-11) LA PASTILLE D'ÉTAT — le surtitre, à côté du nom : la forme des pastilles, en capitales discrètes. */
.bnd .bnd-sur{display:inline-flex;align-items:center;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem;font-weight:800;
  line-height:1.35;margin:0;padding:3px 9px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--identity-ink);color:inherit;
  overflow-wrap:anywhere}
.bnd .bnd-greet{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.bnd .bnd-nom{font-size:1.45rem;font-weight:800;line-height:1.2;margin:0;color:inherit;text-wrap:balance;overflow-wrap:anywhere}
.bnd .bnd-nom-sub{font-weight:500;font-size:.92rem}
.bnd .bnd-nom-extra{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Le badge « 🏅 MT » (lot 14e-bis) : celui du tableau de bord du nageur, à côté du nom sur les quatre pages. */
.bnd .bnd-mt-place{display:inline-flex;align-items:center}
.bnd .bnd-mt{background:transparent;border:var(--border-width) solid var(--identity-ink);color:inherit;border-radius:var(--radius-sm);
  padding:3px 12px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;vertical-align:middle;line-height:1.7}
.bnd .bnd-mt:hover{text-decoration:underline}
.bnd .bnd-mt:focus-visible{outline:2px solid var(--identity-ink);outline-offset:2px}
.bnd .bnd-sub{font-size:13.5px;margin:6px 0 0;color:inherit}
.bnd .bnd-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.bnd .bnd-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:var(--radius-sm);
  background:transparent;color:inherit;border:var(--border-width) solid var(--identity-ink)}
.bnd .bnd-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 var(--border-width) var(--identity-ink)}
/* La focale lue (les jetons de série de la maquette et du suivi quantitatif). */
.bnd .bnd-chip[data-vue="nageur"] .bnd-dot{background:var(--series-2)}
.bnd .bnd-chip[data-vue="groupe"] .bnd-dot{background:var(--series-1)}
.bnd .bnd-chip[data-vue="coach"] .bnd-dot{background:var(--series-4)}
/* (lot DA-11) Un point posé, sans couleur : la valeur n'a pas encore de couleur sourcée. */
.bnd .bnd-chip[data-point="neutre"] .bnd-dot{background:transparent}
/* ⭐ (lot DA-11) LES LIENS VERS LES AUTRES PAGES — des pastilles d'icône, à droite, sur deux colonnes ; sous 720 px,
   en ligne, icône + mot court. ⛔ Un texte ne dépasse jamais sa pastille : elle prend la largeur de son mot. */
.bnd .bnd-liens{display:grid;grid-template-columns:repeat(2,max-content);gap:6px;justify-content:end;align-content:start}
/* ⭐ (lot DA-13) À droite : les liens, puis le menu « ⋯ » (le composant partagé `.row-actions-menu`, réglé au lot MENU-2 :
   son panneau, ses entrées et sa variante destructive ne sont pas repris ici). Seul son bouton prend la forme d'une
   pastille du bandeau — fond transparent, bord d'encre : ⛔ jamais de voile clair sous une pastille du bandeau. */
.bnd .bnd-droite{display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;min-width:0}
.bnd .bnd-menu{flex:0 0 auto;display:flex}
.bnd .bnd-menu>.row-actions-menu{display:flex}
/* ⚠️ (lot DA-13) Le décor du bandeau (`motif_bandeau.php`) pose chaque partie au niveau 1 : la rangée du haut et les
   actions qui la suivent sont alors deux couches égales, et la seconde passait PAR-DESSUS le menu ouvert. Pendant que
   le menu est ouvert — et seulement alors —, sa rangée passe au-dessus des parties qui suivent. (Le décor pèse zéro :
   `:where`.) Niveau 3 : la fiche met ses actions au niveau 2 pour leurs propres menus (`.sp .sp-hero-actions`). */
.bnd .bnd-haut:has(.bnd-menu-d[open]){z-index:3}
.bnd .bnd-menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;padding:0 6px;
  border:var(--border-width) solid var(--identity-ink);border-radius:var(--radius-sm);color:inherit;font-weight:800;font-size:15px;line-height:1}
.bnd .bnd-menu-btn:hover{text-decoration:none;box-shadow:0 0 0 var(--border-width) var(--identity-ink)}
.bnd .bnd-menu-btn:focus-visible{outline:2px solid var(--identity-ink);outline-offset:2px}
/* (lot DA-13) Une pastille qui mène quelque part (WHOOP sur la fiche) : la même pastille, soulignée au survol. */
.bnd a.bnd-chip-lien{text-decoration:none}
.bnd a.bnd-chip-lien:hover{text-decoration:underline;text-underline-offset:.2em;color:inherit}
.bnd a.bnd-chip-lien:focus-visible{outline:2px solid var(--identity-ink);outline-offset:2px}
.bnd .bnd-lien{font-size:12px;font-weight:700;line-height:1.3;color:inherit;display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border:var(--border-width) solid var(--identity-ink);border-radius:var(--radius-sm);text-decoration:none;
  text-underline-offset:.2em;white-space:nowrap}
.bnd .bnd-lien:hover{text-decoration:underline;color:inherit}
.bnd .bnd-lien-ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bnd .bnd-lien-court{display:none}
.bnd .bnd-lien:focus-visible{outline:2px solid var(--identity-ink);outline-offset:2px}
.bnd .bnd-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bnd .bnd-actions .btn,.bnd .bnd-notes .btn{color:var(--identity-ink);border-color:var(--identity-ink);background:transparent}
.bnd .bnd-actions .btn:hover,.bnd .bnd-notes .btn:hover{color:var(--identity-ink);box-shadow:var(--shadow)}
[data-theme="poolside"] .bnd .bnd-actions .btn:hover,[data-theme="poolside"] .bnd .bnd-notes .btn:hover{box-shadow:0 0 0 var(--border-width) var(--identity-ink)}
.bnd .bnd-recap{margin:0;background:color-mix(in srgb,var(--identity-ink) 6%,transparent);
  border:var(--border-width) solid color-mix(in srgb,var(--identity-ink) 24%,transparent);border-left:4px solid var(--identity-ink);
  border-radius:var(--radius-sm);padding:9px 13px;font-size:14px;color:inherit}
.bnd .bnd-recap b{color:inherit}
.bnd .bnd-notes{display:flex;flex-direction:column;gap:8px;font-size:13px}
/* Bascule Coach / Nageur — la pilule de la maquette (reprise des deux tableaux de bord). EXCEPTION NOMMÉE :
   l'arrondi complet vaut pour cette bascule segmentée et pour rien d'autre. 24 % (contour) et 6 % (fond) sont
   des valeurs de COMPOSANT : 12 % de fond faisait tomber « Nageur » à 4,29 en Clair. */
.bnd .view-toggle{gap:.15em;padding:.2em;border-radius:999px;background:color-mix(in srgb,var(--identity-ink) 6%,transparent);
  border:var(--border-width) solid color-mix(in srgb,var(--identity-ink) 24%,transparent);box-shadow:none}
.bnd .vt-btn{color:inherit;font-size:.8rem;padding:5px 13px;border-radius:999px}
.bnd .vt-btn.on{background:var(--identity-ink);color:var(--identity-1);box-shadow:none}
/* ⭐ (lot DA-11) Sous 720 px la pastille d'état passe souvent sous le nom, et les liens deviennent des pastilles : le
   bandeau resserre ses respirations pour ne jamais grossir (mesuré sur les six rendus, à 390 px). */
@media (max-width:720px){
  .bnd{padding:14px 16px;gap:10px}
  .bnd .bnd-haut{grid-template-columns:minmax(0,1fr);gap:10px}
  .bnd .bnd-greet{gap:6px 10px}
  .bnd .bnd-mt{line-height:1.35}
  .bnd .bnd-chips{margin-top:8px}
  /* (lot DA-13) Sous 720 px, le bouton « ⋯ » entre dans le flux des pastilles de liens : il prend la place libre de la
     dernière ligne au lieu d'en réserver une colonne (mesuré : sinon le bandeau du tableau de bord prenait une ligne). */
  .bnd .bnd-droite{flex-wrap:wrap;justify-content:flex-start}
  .bnd .bnd-droite>.bnd-liens{display:contents}
  .bnd .bnd-menu-btn{height:auto;padding:3px 8px;font-size:12px;line-height:1.25;border-width:var(--border-width)}
  .bnd .bnd-liens{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:6px}
  .bnd .bnd-lien{padding:3px 8px;line-height:1.25}
  .bnd .bnd-lien-lib{display:none}
  .bnd .bnd-lien-court{display:inline}
  .bnd .bnd-nom{font-size:1.3rem}
}