/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   WHOOP (lot W3, 16/10/2026) — « Ce matin, mon groupe » et « Sommeil, récupération, effort ».
   Écrit UNE fois pour W3, d'après les deux maquettes, sur les jetons de la peau du programme (Clair, Sombre,
   Bord de bassin : tokens.css). ⛔ Aucune classe empruntée à un autre écran : tout est préfixé `wh-`.
   ⛔ Couleurs de score : celles de WHOOP, servies par le serveur (`WhoopFiche`), jamais écrites ici.
   Stades de sommeil et zones de FC : une seule famille de tons (bleu WHOOP mêlé à la surface), aucune
   couleur de score — comme la maquette.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */
.wh-carte,.wh-ecran{--wh-bleu:#0093E7;
  --wh-s0:color-mix(in srgb,var(--text-2) 35%,var(--surface));
  --wh-s1:color-mix(in srgb,#0093E7 28%,var(--surface));
  --wh-s2:color-mix(in srgb,#0093E7 58%,var(--surface));
  --wh-s3:#0b63a8;
  --wh-z0:color-mix(in srgb,var(--text-2) 30%,var(--surface));
  --wh-z1:color-mix(in srgb,#0093E7 22%,var(--surface));
  --wh-z2:color-mix(in srgb,#0093E7 40%,var(--surface));
  --wh-z3:color-mix(in srgb,#0093E7 60%,var(--surface));
  --wh-z4:color-mix(in srgb,#0093E7 80%,var(--surface));
  --wh-z5:#075e96}

/* ── carte et titre à liseré ── */
.wh-carte{margin:14px 0}
.wh-tete{margin-bottom:2px}
.wh-titre{font-size:14px;font-weight:800;line-height:1.3;position:relative;padding-left:12px;color:var(--text)}
.wh-titre::before{content:"";position:absolute;left:0;top:.1em;bottom:.1em;width:4px;border-radius:3px;background:var(--accent)}
.wh-sous{font-size:11.5px;color:var(--text-2);margin-top:3px;max-width:78ch;line-height:1.45}
/* (03/11/2026) Plus de sous-titre dans les panneaux : son texte est la bulle d'un ⓘ posé dans le titre (`bio-i`, la bulle maison du
   suivi physiologique, `bio.css`). Posé ici aussi pour les écrans qui chargent cette feuille sans `bio.css` (la vitrine). */
.wh-titre>.bio-i{display:inline-grid;place-items:center;width:22px;height:22px;margin-left:4px;border-radius:50%;font-size:14px;font-weight:700;
  line-height:1;color:var(--accent);vertical-align:-3px;cursor:help}
.wh-titre>.bio-i:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wh-titre>.bio-i[hidden]{display:none}
.wh-note{font-size:11.5px;color:var(--text-2);margin-top:8px;line-height:1.45;max-width:78ch}
/* (lot DA-11) Le récapitulatif de la fenêtre choisie, descendu du bandeau au-dessus des panneaux de courbes. */
.wh-recap{font-size:13px;color:var(--text);margin:0 0 10px;line-height:1.45}
.wh-recap b{font-weight:800}
.wh-badge{display:inline-flex;align-items:center;margin-left:6px;vertical-align:2px;font-size:10px;letter-spacing:.04em;text-transform:uppercase;font-weight:800;
  background:var(--surface-2);color:var(--text-2);border:var(--border-width,1px) dashed var(--line-strong);border-radius:var(--radius-sm,8px);padding:2px 7px}
.wh-marque{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;color:var(--text-2);
  border:var(--border-width,1px) solid var(--line);border-radius:999px;padding:3px 9px;white-space:nowrap}
.wh-plage{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--text);border:var(--border-width,1px) solid var(--line);
  border-radius:var(--radius-sm,8px);padding:6px 10px;background:var(--surface-2);white-space:nowrap}
.wh-plage-n{color:var(--text-2);font-weight:700;white-space:normal}
.wh-lien{appearance:none;border:0;background:none;padding:0;font:inherit;font-weight:800;color:var(--accent);text-decoration:underline;cursor:pointer}
.wh-lien:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── bascule segmentée ── */
.wh-seg{display:inline-flex;flex-wrap:wrap;border:var(--border-width,1px) solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.wh-seg button{appearance:none;border:0;background:transparent;font:inherit;font-weight:800;font-size:12px;padding:6px 13px;cursor:pointer;color:var(--text-2);white-space:nowrap}
.wh-seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.wh-seg button:disabled{color:var(--text-disabled);cursor:default}
.wh-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wh-fen{border-radius:var(--radius-sm,8px)}

/* ── « Ce matin, mon groupe » ── */
.wh-barre{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.wh-barre .wh-marque{margin-left:auto}
/* (lot P1, 29/10/2026) Le titre du bloc et sa barre sur une ligne ; quand la place manque, la barre passe dessous. */
.wh-haut{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.wh-haut .wh-titre{flex:0 1 auto;min-width:0}
.wh-haut .wh-barre{margin-top:0;flex:1 1 auto}
/* (lot P1) Une valeur mesurée absente le jour de réveil : « pas de donnée depuis le … », sans valeur. */
.wh-sans{font-size:11px;font-weight:700;color:var(--text-2);line-height:1.3}
.wh-sans b{font-weight:800}
.wh-liste{display:flex;flex-direction:column;gap:6px;margin-top:10px}
/* (17/10/2026) La récupération n'est plus qu'une pastille, et le cœur deux valeurs (FC de repos, VFC) : colonnes resserrées.
   ⭐ (lot C4, 23/10/2026) LES COLONNES SUIVENT LE CHOIX DU COACH : le bloc porte ses largeurs (`--wh-larges`, `--wh-etroit`,
   posées par `_groupe_bloc.php`) — le nom, une case par colonne affichée, puis « reçu à ». L'état WHOOP d'une ligne sans relevé
   (`.wh-etat-l`) passe sous ses valeurs. */
.wh-ligne{display:grid;grid-template-columns:140px var(--wh-larges,minmax(0,1fr)) auto;align-items:center;gap:4px 10px;border:var(--border-width,1px) solid var(--line);
  border-radius:var(--radius-sm,8px);background:var(--surface);padding:10px 12px;color:var(--text)}
.wh-etat-l{grid-column:2 / -1;grid-row:2;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.wh-geste{margin-left:auto;font-size:11.5px;font-weight:700}
/* (lot 2b, 04/11/2026) L'état de l'accès du nageur, sous ses valeurs (après l'état WHOOP quand il y en a un) ; « Redemander » à droite. */
.wh-acces{grid-column:2 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.wh-acces-e{font-size:12px;font-weight:800;color:var(--text-2)}
.wh-acces-e.wh-eteint{color:var(--text-disabled)}
/* (lot 2b) Un bloc où rien n'est noté : « – » dans chaque case, sous le nom de la colonne. */
.wh-cel--vide .wh-val{color:var(--text-2)}
.wh-j{font-size:10.5px;font-weight:700;color:var(--text-2);line-height:1.1}
.wh-cel[data-tip]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
/* (lot B4d) Seule une ligne qui ouvre la fenêtre du suivi physiologique (`data-bio-ouvrir`) se montre cliquable. */
.wh-ligne[data-bio-ouvrir]{cursor:pointer}
.wh-ligne[data-bio-ouvrir]:hover,.wh-ligne[data-bio-ouvrir]:focus-visible{border-color:var(--accent);box-shadow:inset 0 0 0 var(--border-width,1px) var(--accent);outline:none}
.wh-nom{font-weight:900;font-size:14px}
.wh-cel{display:flex;flex-direction:column;gap:2px;min-width:0}
.wh-val small{font-size:11px;font-weight:700;color:var(--text-2)}
/* (lot indice affiné) « ≠ » en petit après la valeur de l'indice affiné : visible à toutes les largeurs (pas un `small`, que le bloc
   étroit masque à l'œil). */
.wh-val .wh-ne{margin-left:2px;font-size:11px;font-weight:700;color:var(--text-2)}
.wh-pastille{display:inline-grid;place-items:center;width:40px;height:26px;border-radius:999px;color:#06121D;font-weight:900;font-size:14px;font-variant-numeric:tabular-nums}
.wh-val{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums}
.wh-cl{font-size:11px;color:var(--text-2);line-height:1.3}
.wh-cl b{color:var(--text);font-weight:800}
.wh-txt{font-weight:800;font-size:13.5px}
.wh-mal{color:var(--end);font-weight:800}
.wh-eteint{color:var(--text-disabled)}
.wh-q{justify-self:end;font-size:11.5px;color:var(--text-2);font-weight:700;white-space:nowrap}
.wh-entete{display:none}
/* (lot C4) La fenêtre « Colonnes » : les colonnes possibles avec leurs cases, dans l'ordre de la liste. */
.wh-col-note{margin:0;font-size:12.5px;color:var(--text-2);line-height:1.45}
.wh-col-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 12px}
.wh-col-case{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--text);cursor:pointer;padding:4px 0}
.wh-col-case input{width:auto;margin:0;accent-color:var(--accent);flex:0 0 auto}
.wh-col-msg{margin:0;font-size:12.5px;font-weight:700;color:var(--text)}
.wh-vide{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;border:var(--border-width,1px) dashed var(--line-strong);
  border-radius:var(--radius-sm,8px);padding:12px 14px;color:var(--text-2);background:var(--surface-2);font-size:12.5px;margin-top:10px}
.wh-vide b{color:var(--text);font-weight:800}
.wh-invit-res{color:var(--text)}
.wh-invit-res code{word-break:break-all}
/* ⭐ (lot DA-15, 17/10/2026) LE REPLI SE DÉCIDE SUR LA LARGEUR DU BLOC, PAS DE LA FENÊTRE (patron des lots DA-12/DA-13) :
   le menu latéral mange 250-280 px au-dessus de 900 px de fenêtre, et l'ancienne règle à 860 px de fenêtre laissait la
   grille de six colonnes déborder de ~200 px à 1 000 px. Seuil mesuré sur la page rendue (lot DA-15) : la ligne tient à
   partir de 884 px de bloc dans les trois peaux ; 900 px laisse 16 px de marge — choix du programme.
   (17/10/2026) Les colonnes larges se sont resserrées (pastille seule, deux valeurs cardiaques) ; le seuil reste à 900 px :
   en dessous, le bloc passe au tableau d'une ligne par nageur, plus lisible qu'une grille large serrée. */
.wh-carte{container-type:inline-size}
/* ⭐⭐ (17/10/2026) BLOC ÉTROIT (téléphone) : UNE LIGNE PAR NAGEUR, comme un tableau — les titres des colonnes une fois en
   tête (`.wh-entete`), les valeurs seules dans la ligne ; le nom, avec « reçu à » dessous, à gauche. Les étiquettes et les
   unités de chaque valeur restent lues par un lecteur d'écran (masquées à l'œil seulement). Une ligne sans relevé garde
   son état sur la largeur des valeurs, son geste dessous. Mêmes colonnes pour la tête et les lignes : elles s'alignent. */
@container (max-width:899px){
  /* (lot C4) Les largeurs étroites suivent les colonnes affichées (`--wh-etroit`) ; la tête et les lignes les partagent. */
  .wh-ligne,.wh-entete{grid-template-columns:minmax(0,1fr) var(--wh-etroit,30px);column-gap:3px}
  .wh-ligne{row-gap:0;padding:6px 10px}
  .wh-liste{gap:4px}
  .wh-entete{display:grid;align-items:end;margin-top:10px;padding:0 calc(10px + var(--border-width,1px));font-size:10px;font-weight:800;line-height:1.15;color:var(--text-2);hyphens:manual}
  .wh-entete small{display:block;font-weight:700}
  .wh-nom{grid-column:1;grid-row:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
  .wh-cel{grid-row:1;align-self:center;white-space:nowrap}
  .wh-ligne--releve .wh-cel{grid-row:1 / span 2}
  .wh-ligne--releve .wh-q{grid-column:1;grid-row:2;justify-self:start;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .wh-ligne:not(.wh-ligne--releve) .wh-q{display:none}
  .wh-val{font-size:13px}
  .wh-j{display:block;margin:0;font-size:10px;line-height:1.1}
  .wh-pastille{width:32px;height:22px;font-size:12.5px}
  .wh-cel .wh-cl,.wh-val small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .wh-etat-l{grid-column:1 / -1;flex-wrap:nowrap;gap:8px}
  .wh-etat-l .wh-cl:not(.wh-geste){display:none}
  .wh-etat-l .wh-txt{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .wh-acces{grid-column:1 / -1;flex-wrap:nowrap;gap:8px}
  .wh-acces .wh-cl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .wh-geste{flex:0 0 auto}
  .wh-barre .wh-marque{margin-left:0}
  /* (lot P1) « depuis » et le jour, l'un sous l'autre ; « pas de donnée » et « le » restent au lecteur d'écran. */
  .wh-sans{font-size:9.5px;line-height:1.1}
  .wh-sans-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .wh-sans b{display:block}
}

/* ── « Sommeil, récupération, effort » ── */
.wh-ecran{color:var(--text)}
.wh-focal{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:14px;padding:10px 12px;background:var(--surface);
  border:var(--border-width,1px) solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.wh-sel{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:var(--text-2);text-transform:uppercase;letter-spacing:.04em;flex-wrap:wrap}
.wh-sel input[type=date]{width:auto;padding:5px 8px;font-size:13px;text-transform:none;letter-spacing:0}
.wh-pick{width:auto;border:var(--border-width,1px) solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:7px 14px;
  font-size:13.5px;font-weight:700;text-transform:none;letter-spacing:0;box-shadow:var(--shadow);max-width:100%}
.wh-etat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;font-size:12.5px;color:var(--text-2);background:var(--surface);
  border:var(--border-width,1px) solid var(--line);border-radius:var(--radius);padding:9px 12px;margin-bottom:10px}
.wh-etat b{color:var(--text);font-weight:800}
.wh-etat-alt{border-style:dashed}
.wh-ok{display:inline-flex;align-items:center;gap:7px;font-weight:800;color:var(--text)}
.wh-etat .wh-mal{display:inline-flex;align-items:center;gap:7px}
.wh-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.wh-sep{color:var(--text-disabled)}
.wh-act{margin-left:auto}
.wh-msg{flex-basis:100%;color:var(--text)}
@media(max-width:719px){.wh-act{margin-left:0}}
.wh-grille{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.wh-grille{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.wh-grille{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wh-panneau{margin:0;background:var(--surface);border:var(--border-width,1px) solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.wh-plot{margin-top:10px;min-width:0}
.wh-plot svg{display:block;width:100%;height:auto;overflow:visible}
/* ⭐ (lot DA-16) Un graphique dont les colonnes descendraient sous 24 px défile de côté (`whoop.js`) : le dessin glisse,
   l'échelle reste posée à gauche, sur le fond du panneau. */
.wh-plot{position:relative}
.wh-glisse{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain}
.wh-glisse svg{max-width:none}
.wh-axe-y{position:absolute;left:0;top:0;width:40px;pointer-events:none;background:var(--surface)}
.wh-axe-y svg{width:40px}
.wh-grain-note{margin:0 0 10px}
/* (lot DA-16) La zone qu'on touche d'une colonne large (semaine, mois) : invisible, elle se teinte au survol et au clavier. */
.wh-cible{cursor:help}
.wh-cible:hover,.wh-cible:focus-visible{fill:color-mix(in srgb,var(--text) 7%,transparent);outline:none}
.wh-plot text{font-family:inherit}
.wh-legende{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:10px;font-size:11.5px;color:var(--text-2)}
.wh-legende span{display:inline-flex;align-items:center;gap:5px}
.wh-legende i{width:12px;height:12px;border-radius:3px;flex:0 0 auto;box-shadow:inset 0 0 0 var(--border-width,1px) var(--text-2)}
.wh-drapeau{font-size:12.5px;line-height:1.45;margin-top:10px;background:var(--surface-2);border:var(--border-width,1px) solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--radius-sm,8px);padding:9px 11px;color:var(--text)}
.wh-mk{transition:filter .08s}
.wh-mk:hover,.wh-mk:focus-visible{filter:brightness(1.14) saturate(1.05);outline:none}
:root[data-theme="poolside"] .wh-mk{stroke:var(--line);stroke-width:var(--border-width,1.5px)}
/* ⭐ (lot DA-17, 17/10/2026) « TOUT SUR LE MÊME AXE » : PLEINE LARGEUR, QUELLE QUE SOIT LA GRILLE — il occupe toute la
   rangée (1, 2 ou 3 colonnes), sinon il serait plus étroit sur ordinateur que sur téléphone. Les noms des séries restent
   posés à gauche ; le dessin défile seul. La lecture d'une colonne s'écrit dessous, jamais dans une bulle de survol. */
.wh-axe{grid-column:1 / -1}
.wh-axe-reglages{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin-top:10px}
.wh-axe-series{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.wh-axe-series label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text);border:var(--border-width,1px) solid var(--line);
  border-radius:999px;padding:3px 10px;cursor:pointer;background:var(--surface);white-space:nowrap;line-height:1.4}
.wh-axe-series input{accent-color:var(--accent);margin:0;width:auto;flex:0 0 auto}
.wh-axe-series i,.wh-axe-nom i,.wh-axe-lecture i{width:9px;height:9px;border-radius:50%;display:inline-block;flex:0 0 auto}
.wh-axe-zone{display:grid;grid-template-columns:auto minmax(0,1fr);margin-top:10px}
.wh-axe-noms{display:flex;flex-direction:column}
.wh-axe-nom{font-size:11px;font-weight:800;line-height:1.25;color:var(--text-2);padding-right:8px;display:flex;flex-direction:column;justify-content:center;
  border-right:var(--border-width,1px) solid var(--line-strong);overflow:hidden}
.wh-axe-nom span{display:flex;align-items:center;gap:5px}
.wh-axe-nom small{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.wh-axe-nom-sup{border-right:0}
.wh-axe-nom .wh-axe-trait{width:12px;height:3px;border-radius:0}
.wh-axe-glisse{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;min-width:0}
.wh-axe-glisse svg{display:block;max-width:none;overflow:visible}
.wh-axe-glisse text{font-family:inherit}
.wh-axe-cible{cursor:help;outline:none}
.wh-axe-cible:hover,.wh-axe-cible:focus-visible{fill:color-mix(in srgb,var(--text) 7%,transparent)}
.wh-axe-lecture{margin-top:10px;border:var(--border-width,1px) solid var(--line);border-radius:var(--radius-sm,8px);background:var(--surface-2);padding:8px 10px;
  font-size:12.5px;color:var(--text);min-height:3.2em}
.wh-axe-lecture > b{display:block;margin-bottom:3px;font-weight:800}
.wh-axe-lecture ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-variant-numeric:tabular-nums}
.wh-axe-lecture li{display:inline-flex;align-items:center;gap:5px}
.wh-axe-lecture li b{font-weight:800}
/* La fenêtre : lisible comme un écran de téléphone. Une seule colonne de panneaux, quelle que soit la largeur. */
.wh-modale-carte{width:min(560px,96vw);max-width:min(560px,96vw);max-height:92vh;overflow:auto;background:var(--bg,var(--surface))}
.wh-modale-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
/* (lot B4d) Le suivi physiologique est long : « Ouvrir en page » et « Fermer » restent en haut de la fenêtre quand on y descend. */
.wh-modale .wh-modale-tete{position:sticky;top:-1rem;z-index:3;margin:-1rem -1rem 10px;padding:1rem 1rem 8px;background:inherit;border-bottom:var(--border-width,1px) solid var(--line)}
.wh-modale-actions{display:flex;gap:8px}
.wh-modale .wh-grille{grid-template-columns:minmax(0,1fr)}
@media (prefers-reduced-motion:reduce){.wh-mk{transition:none}}
/* Lot W5 — FC et VFC par jour : un tableau lisible sans survoler, aucune couleur sur les valeurs (ni score, ni allure).
   Un jour sans aucune des quatre valeurs garde sa ligne, vide : c'est le trou de l'axe. */
.wh-tab-cadre{margin-top:10px;max-height:360px;overflow:auto;border:var(--border-width,1px) solid var(--line);border-radius:var(--radius-sm,8px)}
.wh-tab{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--text)}
.wh-tab th,.wh-tab td{padding:5px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.wh-tab thead th{position:sticky;top:0;background:var(--surface-2);font-size:11px;font-weight:800;color:var(--text-2);vertical-align:bottom}
.wh-tab thead th small{display:block;font-weight:700;font-size:10px}
.wh-tab tbody th{text-align:left;font-weight:700;color:var(--text-2)}
.wh-tab thead th:first-child{text-align:left}
.wh-tab tr:last-child th,.wh-tab tr:last-child td{border-bottom:0}