/* Portail Elevate Coaching — style « Performance » : noir, or, Oswald pour les titres et les chiffres, Barlow pour le texte. */

/* Transitions animées d'une page à l'autre (navigateurs récents ; sans effet ailleurs). */
@view-transition { navigation: auto; }

:root {
  --bg: #0B0B0C; --card: #161618; --card-2: #1E1E21; --line: #2A2A2E; --line-2: #3A3A3F;
  --text: #F4F4F0; --soft: #C2C2BB; --mute: #92928B; --faint: #6B6B65;
  --gold: #F0B429; --gold-ink: #141000; --gold-soft: rgba(240, 180, 41, .13); --gold-deep: #7A5C14;
  --warn: #F2994A; --bad: #FF6B6B; --top: #FF6B6B; --back: #6FCF73;
  --display: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --glass: rgba(24, 24, 27, .72);
  --s: var(--gold); --s-rgb: 240, 180, 41; --s-ink: #111112;
  color-scheme: dark;
}

/* Chaque séance de la semaine a sa couleur, la même partout (cartes, séance, performances, tableaux du coach). */
.s1 { --s: #F0B429; --s-rgb: 240, 180, 41; }
.s2 { --s: #FF8A5B; --s-rgb: 255, 138, 91; }
.s3 { --s: #3DD6B5; --s-rgb: 61, 214, 181; }
.s4 { --s: #6AA8FF; --s-rgb: 106, 168, 255; }
.s5 { --s: #B79CFF; --s-rgb: 183, 156, 255; }
.s6 { --s: #FF82B4; --s-rgb: 255, 130, 180; }
.s7 { --s: #A3DD63; --s-rgb: 163, 221, 99; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100vh; background: var(--bg) linear-gradient(180deg, #110E07, #0B0B0C 46%, #0F0D08) fixed; color: var(--text); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
kbd { font: 500 12px/1 var(--display); letter-spacing: .06em; padding: 4px 7px; border: 1px solid var(--line-2); border-radius: 6px; color: var(--soft); }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------ mouvement */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -14px); } }
/* D'une page à l'autre : le fond, la barre du haut et le menu du bas ne bougent pas (ce sont les mêmes), le repère doré
   du menu glisse vers le nouvel onglet, et le contenu de la nouvelle page monte doucement en fondu.
   IMPORTANT — on n'affiche jamais la « photo » que le navigateur prend de la page qu'on quitte : avec le fond animé, cette
   photo sort parfois toute blanche (constaté sur Chrome 152), et la fondre avec la nouvelle page donnait un voile blanc à
   chaque changement d'onglet. Tout ce qui se voit pendant la transition vient donc de la nouvelle page, déjà prête. */
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(*) { display: none; }
::view-transition-new(*) { animation: none; mix-blend-mode: normal; opacity: 1; }
::view-transition-new(page) { animation: vt-in .3s cubic-bezier(.2, .8, .2, 1) both; }
/* Chaque partie se pose tout de suite à sa place dans la nouvelle page (sinon, parti d'une page qu'on avait fait défiler,
   le contenu arriverait en glissant de très haut). Seul le repère doré du menu voyage d'un onglet à l'autre. */
::view-transition-group(root), ::view-transition-group(page), ::view-transition-group(topbar), ::view-transition-group(dock) { animation: none; }
::view-transition-group(dock-on) { animation-duration: .42s; animation-timing-function: var(--ease); }

/* Le fond : un noir légèrement doré, et quatre halos d'or très doux qui dérivent lentement (deux calques, un aller-retour
   de 48 s et un de 64 s). Le rythme est calé sur l'heure (voir vt.js) : en changeant de page, le mouvement continue
   au lieu de repartir de zéro. Rien ne bouge si l'appareil demande moins d'animations. */
@keyframes drift-a { to { transform: translate3d(9vmax, 6vmax, 0) scale(1.1); } }
@keyframes drift-b { to { transform: translate3d(-8vmax, -7vmax, 0) scale(1.14); } }
body::before, body::after { content: ''; position: fixed; inset: -20vmax; z-index: -1; pointer-events: none; will-change: transform; }
body::before { background: radial-gradient(44vmax 44vmax at calc(20vmax + 14vw) calc(20vmax + 6vh), rgba(244, 174, 38, .2), transparent 68%), radial-gradient(34vmax 34vmax at calc(20vmax + 96vw) calc(20vmax + 62vh), rgba(244, 174, 38, .11), transparent 66%); animation: drift-a 48s ease-in-out var(--drift-a, 0s) infinite alternate; }
body::after { background: radial-gradient(30vmax 30vmax at calc(20vmax + 72vw) calc(20vmax - 4vh), rgba(255, 206, 110, .09), transparent 66%), radial-gradient(42vmax 42vmax at calc(20vmax + 8vw) calc(20vmax + 104vh), rgba(244, 174, 38, .13), transparent 68%); animation: drift-b 64s ease-in-out var(--drift-b, 0s) infinite alternate; }

.wrap > * { animation: rise .55s var(--ease) both; }
.wrap > *:nth-child(2) { animation-delay: .05s; }
.wrap > *:nth-child(3) { animation-delay: .1s; }
.wrap > *:nth-child(4) { animation-delay: .15s; }
.wrap > *:nth-child(5) { animation-delay: .2s; }
.wrap > *:nth-child(6) { animation-delay: .25s; }
.wrap > *:nth-child(7) { animation-delay: .3s; }
.wrap > *:nth-child(n+8) { animation-delay: .35s; }
.vt .wrap > * { animation: none; }       /* arrivée par une transition de page (voir vt.js) : pas de seconde entrée */

/* ------------------------------------------------------------ structure */
.top { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); view-transition-name: topbar; }
.wordmark { display: grid; padding: 10px 0; transition: filter .25s, transform .25s var(--ease); }
.wordmark img { display: block; height: 25px; width: auto; }
.wordmark:hover { filter: brightness(1.12); } .wordmark:active { transform: scale(.97); }
.top-ctx { font: 500 12.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding-left: 12px; border-left: 1px solid var(--line); }
.top .sp { flex: 1; }
.top-back { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 12px 0 8px; border-radius: 18px; border: 1px solid var(--line-2); font: 500 12.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); transition: border-color .2s, color .2s, transform .2s var(--ease); }
.top-back .ic { width: 16px; height: 16px; }
.top-back:hover { color: var(--text); border-color: var(--mute); }
.top-back:active { transform: scale(.96); }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--soft); transition: transform .2s var(--ease), border-color .2s, color .2s; }
.icon-btn:hover { border-color: var(--line-2); color: var(--text); }
.icon-btn:active { transform: scale(.94); }
.avatar-btn { font: 600 16px/1 var(--display); color: var(--text); }
.wrap { max-width: 760px; margin: 0 auto; padding: 6px 20px 150px; view-transition-name: page; }
.space-coach .wrap { max-width: 1208px; padding: 10px 36px 160px; }
.trail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 -8px; font: 500 12.5px/1.4 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.trail a { padding: 8px 0; } .trail a:hover { color: var(--gold); }
.trail span { color: var(--soft); } .trail i { font-style: normal; color: var(--faint); }

/* ------------------------------------------------------------ titres */
.hello { margin: 16px 0 18px; display: flex; flex-direction: column; gap: 6px; }
.date { font: 600 12px/1.35 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
h1 { font: 600 38px/1.05 var(--display); text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.hello-sm h1 { font-size: 30px; }
.lead { margin-top: 4px; color: var(--soft); font-size: 15px; max-width: 62ch; }
.head-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.sec { margin-top: 26px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 12px; margin-bottom: 10px; }
.sec-head h3 { display: flex; align-items: center; gap: 10px; font: 500 15px/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.sec-head > span { font: 500 12px/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); text-align: right; }
.sec-head a, .under a, .hint a { color: var(--gold); }
.under { margin: 10px 2px; color: var(--mute); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hint { color: var(--mute); font-size: 13px; }
.hint.aside { margin: 12px 2px 0; font-size: 14px; }
.empty { color: var(--mute); padding: 18px; border: 1px solid var(--line); border-radius: 16px; text-align: center; }
.info { margin: 12px 0; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); color: var(--soft); font-size: 14.5px; }
.info-warn { border-color: var(--warn); color: var(--text); }
.flash { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 70; view-transition-name: flash; max-width: min(520px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid var(--gold-deep); font-size: 14.5px; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: drop .45s var(--ease) both; transition: opacity .4s, transform .4s; }
.flash.out { opacity: 0; transform: translate(-50%, -12px); }
.banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 0; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--gold-deep); background: var(--gold-soft); font-size: 14px; }
.banner p { flex: 1; min-width: 200px; }
.banner .ic { color: var(--gold); }

/* ------------------------------------------------------------ boutons, étiquettes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 600 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: transform .18s var(--ease), filter .18s, border-color .18s; }
.btn:active { transform: scale(.97); }
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--gold); color: var(--gold-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: var(--line-2); color: var(--text); font-weight: 500; }
.btn-ghost:hover { border-color: var(--mute); }
.btn-s { background: var(--s); color: var(--s-ink); }
.btn-s:hover { filter: brightness(1.08); }
.btn-sm { height: 40px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.btn-block { width: 100%; height: auto; min-height: 46px; padding-block: 10px; white-space: normal; text-align: center; line-height: 1.15; }
.btn.armed { border-color: var(--warn); color: var(--warn); white-space: normal; height: auto; min-height: 44px; padding-block: 9px; text-transform: none; letter-spacing: 0; font: 500 14px/1.3 var(--body); }
.link-btn { background: none; border: 0; padding: 12px 0; font: 500 13.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.link-btn.quiet { padding: 8px 0; font-size: 12.5px; color: var(--mute); }
.link-btn.armed { color: var(--warn); }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.pill { display: inline-flex; align-items: center; font: 500 12.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px; white-space: nowrap; }
.pill i { display: none; }
.pill-accent { color: var(--gold); border-color: var(--gold); }
.pill-warn { color: var(--warn); border-color: var(--warn); }
.pill-ok { color: var(--back); border-color: var(--back); }
.pill-info { color: #6AA8FF; border-color: #6AA8FF; }
.btn em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--gold); color: var(--gold-ink); font: 600 11px/1 var(--display); letter-spacing: 0; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 8px; background: var(--card-2); color: var(--text); font: 500 15px/1.35 var(--display); letter-spacing: .03em; }
.chip-main { background: var(--gold); color: var(--gold-ink); font-weight: 600; }
.chip-mute { color: var(--mute); }
.rx { display: flex; flex-wrap: wrap; gap: 6px; }
.k-top, .k-back { font-style: normal; font-size: .72em; letter-spacing: .08em; }
.k-top { color: var(--top); } .k-back { color: var(--back); }
.av { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); font: 600 16px/1 var(--display); color: var(--text); }
.av-sm { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.av-lg { width: 58px; height: 58px; border-radius: 16px; font-size: 21px; }
.av-xl { width: 84px; height: 84px; border-radius: 22px; font-size: 30px; }
.who-title a { display: grid; transition: transform .2s var(--ease); } .who-title a:hover { transform: scale(1.05); }
.banner .av { width: 40px; height: 40px; border-radius: 11px; }
.av img, .avatar-btn img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.av:has(img), .avatar-btn:has(img) { overflow: hidden; padding: 0; }
.who-title { display: flex; align-items: center; gap: 12px; }
.me-photo { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); }
/* la photo à côté du bonjour : un appui suffit pour l'ajouter */
.hello-me { flex-direction: row; align-items: center; gap: 14px; }
.hello-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.me-av { position: relative; display: grid; flex: none; cursor: pointer; transition: transform .2s var(--ease); }
.me-av:hover { transform: scale(1.04); } .me-av:active { transform: scale(.96); }
.me-av i { position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--gold-ink); border: 2px solid var(--bg); }
.me-av i .ic { width: 14px; height: 14px; stroke-width: 2.1; }
.me-av.is-empty .av { border-style: dashed; border-color: var(--gold-deep); color: var(--soft); }
.me-av:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 16px; }
.me-ask { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; min-height: 32px; color: var(--gold); font: 500 12.5px/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.me-ask .ic { width: 16px; height: 16px; flex: none; }
.me-ask .warn { color: var(--warn); }
.who-msg { font: 400 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--mute); } .who-msg:empty { display: none; }
.who-msg.warn { color: var(--warn); }
.banner > a { display: grid; flex: none; transition: transform .2s var(--ease); } .banner > a:hover { transform: scale(1.06); }
.me-photo-side { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: start; min-width: 0; }
.me-photo-side .btn { max-width: 100%; height: auto; min-height: 40px; padding-block: 8px; white-space: normal; text-align: left; line-height: 1.2; }   /* sur un petit écran, le libellé passe à la ligne au lieu de dépasser */
.me-photo .hint.warn { color: var(--warn); }
.av-hot { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.tile { width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); color: var(--soft); }
.tile-ok { color: var(--gold); border-color: var(--gold-deep); }

/* ------------------------------------------------------------ carte d'action, avancement */
.hero { margin: 0 0 18px; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; display: flex; flex-direction: column; gap: 6px; }
.hero-do { border-color: var(--gold-deep); }
.kicker { font: 500 12px/1.25 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hero-wait .kicker { color: var(--mute); }
.hero h2 { font: 600 25px/1.1 var(--display); text-transform: uppercase; text-wrap: balance; }
.hero-text { color: var(--soft); font-size: 14.5px; max-width: 60ch; }
.hero-act { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
.hero-act .btn, .hero-act form { flex: 1 1 220px; } .hero-act form .btn { width: 100%; }
.space-coach .hero-act .btn, .space-coach .hero-act form { flex: 0 1 auto; }
.hero-s { border-color: rgba(var(--s-rgb), .6); background: linear-gradient(115deg, rgba(var(--s-rgb), .22), rgba(var(--s-rgb), .05) 70%), var(--card); }
.hero-s .kicker { color: var(--s); }
.segbar { display: flex; gap: 6px; }
.segbar i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); position: relative; overflow: hidden; }
.segbar i.on::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: left; animation: grow-x .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 110ms + .2s); }
.segs { display: flex; gap: 4px; margin-top: 6px; }
.segs i { width: 22px; height: 4px; border-radius: 2px; background: var(--line-2); }
.segs i.on { background: var(--gold); }
.frise { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.frise li { padding: 12px 14px; border-radius: 14px; background: var(--card); display: grid; gap: 2px; min-width: 0; border-top: 3px solid var(--line); }
.frise i { display: none; }
.frise b { font: 500 14px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.frise span { font-size: 13px; color: var(--mute); }
.st-done { border-top-color: var(--gold) !important; } .st-done span { color: var(--soft); }
.st-now { border-top-color: var(--gold-deep) !important; } .st-now b { color: var(--gold); }
.st-todo b { color: var(--mute); }

/* ------------------------------------------------------------ accueil : ton suivi, ta semaine */
.suivi { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--line); }
.suivi h2 { font: 600 27px/1.08 var(--display); text-transform: uppercase; }
.suivi h2 span { color: var(--mute); font-weight: 500; }
.weekdots { display: flex; gap: 4px; }
.weekdots i { flex: 1; height: 8px; border-radius: 4px; background: var(--line); transform-origin: left; animation: grow-x .6s var(--ease) both .15s; }
.weekdots i.on { background: var(--gold-deep); }
.weekdots i.now { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.suivi-sub { font: 500 12px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.goals { margin: 4px 0 0; display: grid; }
.goal { display: grid; gap: 5px; padding: 13px 0; border-top: 1px solid var(--line); }
.goal:last-child { padding-bottom: 0; }
.suivi > .goals:first-child { margin: 0; } .suivi > .goals:first-child .goal:first-child { border-top: 0; padding-top: 0; }
.goal dt { display: flex; align-items: center; gap: 8px; font: 500 11.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.goal dt .ic { width: 16px; height: 16px; }
.goal dd { margin: 0; display: grid; gap: 7px; font-size: 15px; line-height: 1.4; font-weight: 500; text-wrap: pretty; }
.goal-num { font: 600 24px/1 var(--display); }
.goal-facts { font-size: 13.5px; font-weight: 400; color: var(--soft); }
.snum { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; background: var(--s); color: var(--s-ink); font: 700 21px/1 var(--display); letter-spacing: 0; }
.snum-sm { width: 24px; height: 24px; border-radius: 8px; font-size: 14px; }
.scards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.scard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px 14px 12px 14px; border-radius: 16px; background: linear-gradient(100deg, rgba(var(--s-rgb), .24), rgba(var(--s-rgb), .07) 64%), var(--card); border: 1px solid rgba(var(--s-rgb), .36); transition: transform .22s var(--ease), border-color .2s, box-shadow .2s; }
.scard:hover { transform: translateY(-2px); border-color: rgba(var(--s-rgb), .8); }
.scard:active { transform: scale(.985); }
.scard.is-next { border-color: var(--s); box-shadow: 0 0 0 1px var(--s) inset, 0 14px 40px rgba(var(--s-rgb), .16); }
.scard-main { display: grid; gap: 3px; min-width: 0; }
.scard-main b { font: 600 19px/1.1 var(--display); text-transform: uppercase; }
.scard-sub { font: 500 11.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--s); }
.scard-ex { font-size: 13px; line-height: 1.35; color: var(--soft); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.scard-state { display: flex; align-items: center; gap: 6px; color: var(--mute); }
.sp { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid transparent; font: 600 11.5px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.sp .ic { width: 14px; height: 14px; stroke-width: 2.8; }
.sp-done, .sp-going { color: var(--s); border-color: rgba(var(--s-rgb), .55); }
.sp-next { background: var(--s); color: var(--s-ink); }
.sp-later, .sp-miss { color: var(--soft); border-color: var(--line-2); }
.scard.is-done { opacity: .8; }
.scard.is-done:hover { opacity: 1; }

/* ------------------------------------------------------------ séances de la semaine, en grand */
.sboxes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sbox { border-radius: 20px; background: linear-gradient(165deg, rgba(var(--s-rgb), .18), rgba(var(--s-rgb), .04) 48%), var(--card); border: 1px solid rgba(var(--s-rgb), .36); overflow: hidden; }
.sbox.is-next { border-color: var(--s); }
.sbox header { display: flex; align-items: center; gap: 14px; padding: 16px; }
.sbox-title { flex: 1; min-width: 0; }
.sbox h3 { font: 600 21px/1.08 var(--display); text-transform: uppercase; }
.sbox header p { margin-top: 4px; font: 500 11.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--s); }
.sbox-list { list-style: none; margin: 0; padding: 0 16px; }
.sbox-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid rgba(var(--s-rgb), .18); }
.sbox-list .n { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid rgba(var(--s-rgb), .65); color: var(--s); font: 600 13px/1 var(--display); }
.sbox-list .t { display: grid; gap: 1px; min-width: 0; }
.sbox-list b { font: 500 15px/1.25 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.sbox-list .t > span { font-size: 13.5px; color: var(--soft); }
.sbox-list em { font-style: normal; font-size: 13px; color: var(--s); }
.sbox-list b em { font-size: .72em; }
.sbox-list .v { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--s); font: 500 13px/1 var(--display); }
.sbox-list .v .ic { width: 16px; height: 16px; }
.sbox-list li.is-warm b { font-size: 14px; color: var(--soft); }
.sbox footer { padding: 14px 16px 16px; }

/* ------------------------------------------------------------ cartes, listes, chiffres */
.card { background: var(--card); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; }
.card.narrow { max-width: 460px; }
.cards-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.card-link { display: flex; gap: 14px; align-items: flex-start; margin: 0; border: 1px solid transparent; transition: transform .2s var(--ease), border-color .2s; }
.card-link:hover { transform: translateY(-2px); border-color: var(--line-2); }
.card-link b { display: block; font: 500 17px/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.card-link small { color: var(--mute); font-size: 13.5px; }
.rows { display: grid; gap: 8px; }
.home-links { margin-top: 22px; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--card); border: 1px solid transparent; border-radius: 16px; text-align: left; width: 100%; transition: transform .2s var(--ease), border-color .2s; }
a.row:hover, button.row:hover, .row:has(.row-link:hover) { transform: translateY(-1px); border-color: var(--line-2); }
.row-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-main b { font: 500 16px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.row-sub { color: var(--soft); font-size: 13.5px; }
.row-meta { color: var(--mute); font-size: 13px; }
.row-side { display: flex; align-items: center; gap: 10px; flex: none; color: var(--mute); }
.row-side form { display: flex; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 18px; }
.stat { background: var(--card); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat > span { font: 500 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.stat b { font: 600 22px/1.15 var(--display); }
.stat small { font-size: 12.5px; color: var(--soft); }
.card .stats { margin: 0; } .card .stat { background: var(--card-2); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.kpis .stat { border-radius: 18px; padding: 16px 18px; }
.kpis .stat b { font-size: 38px; line-height: 1.05; }
.kpis .stat.hot b { color: var(--gold); }
.split { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.prio { margin: 0; padding: 0; list-style: none; counter-reset: p; display: grid; }
.prio li { counter-increment: p; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.prio li:first-child { border-top: 0; padding-top: 2px; } .prio li:last-child { padding-bottom: 2px; }
.prio li::before { content: counter(p); grid-row: span 2; font: 600 16px/1.3 var(--display); color: var(--gold); }
.prio b { grid-column: 2; font: 500 15px/1.3 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.prio span { grid-column: 2; color: var(--soft); font-size: 14px; }
.remark { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--soft); }
.prios { margin: 0 0 14px; padding: 11px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.prios summary { display: grid; gap: 8px; cursor: pointer; list-style: none; }
.prios summary::-webkit-details-marker { display: none; }
.prios-head { display: flex; align-items: center; justify-content: space-between; font: 500 11.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.prios-head .ic { width: 17px; height: 17px; color: var(--mute); transition: transform .3s var(--ease); }
.prios[open] .prios-head .ic { transform: rotate(180deg); }
.prios-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.prios-chips span { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border-radius: 13px; background: var(--card-2); font: 500 12.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.prios-chips i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--gold-ink); font: 600 11px/1 var(--display); font-style: normal; }
.prios .prio { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); animation: rise .35s var(--ease) both; }
.plain { margin: 0; padding-left: 18px; color: var(--soft); display: grid; gap: 6px; }
.facts { color: var(--mute); margin: 0 0 12px; }
.prose { display: grid; gap: 10px; color: var(--soft); font-size: 15.5px; }
.prose h4 { margin-top: 8px; color: var(--text); font: 500 17px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; }

/* ------------------------------------------------------------ onglets, sélecteurs */
.tabs { display: flex; gap: 4px 26px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 20px 0 18px; }
.tabs a { display: flex; align-items: center; min-height: 44px; border-bottom: 3px solid transparent; margin-bottom: -1px; font: 500 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); transition: color .2s; }
.tabs a:hover { color: var(--text); }
.tabs a.on { border-color: var(--gold); color: var(--text); }
.tabs span { display: none; } .tabs b { font-weight: 500; }
.tabs a em { font-style: normal; margin-left: 7px; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: var(--gold); color: var(--gold-ink); font: 600 12px/1 var(--display); letter-spacing: 0; }
.weeks { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.weeks a { min-width: 44px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--line); font: 500 14px/1 var(--display); letter-spacing: .06em; color: var(--mute); transition: border-color .2s, color .2s; }
.weeks a:hover { color: var(--text); border-color: var(--line-2); }
.weeks a.on { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); font-weight: 600; }

/* ------------------------------------------------------------ formulaires */
input, select, textarea { font: inherit; color: var(--text); width: 100%; padding: 11px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--gold); }
textarea { resize: vertical; min-height: 46px; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span, .f > span, legend { font: 500 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 0; }
.grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.grid-fields .field { margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 18px; }
.form-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.savebar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; width: max-content; max-width: calc(100vw - 24px); margin: 0; padding: 8px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); flex-wrap: nowrap; }
.savebar .hint { display: none; }
/* Sur un écran d'édition (sans menu du bas), la barre d'enregistrement prend la place du menu dans les transitions de page :
   elle arrive nette, à sa place, au lieu d'être fondue dans le fond. */
.focus .savebar { view-transition-name: dock; }
/* Sur une page qui garde son menu (Exercices), elle se pose au-dessus de lui, et seulement quand il y a de quoi enregistrer. */
.savebar-up { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 86px); transition: opacity .25s, transform .35s var(--ease); }
.savebar-up.is-clean { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
.essai-mark { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 200; padding: 6px 13px; border-radius: 20px; background: #1F6FEB; color: #fff; font: 600 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.scale { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.scale div { display: flex; gap: 8px; margin-top: 8px; }
.scale label { flex: 1; }
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale span { display: grid; place-items: center; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font: 600 19px/1 var(--display); transition: background .2s, color .2s, transform .2s var(--ease); }
.scale input:checked + span { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); transform: scale(1.04); }
.scale input:focus-visible + span { box-shadow: 0 0 0 3px var(--gold-soft); }
.check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mute); font-size: 13.5px; }
.day-pick { display: flex; align-items: center; gap: 6px; }
.day-pick label { display: flex; align-items: center; }
.day-pick input { width: auto; height: 40px; padding: 0 10px; border-radius: 10px; font: 500 14px/1 var(--display); letter-spacing: .04em; }
.day-pick .icon-btn { width: 40px; height: 40px; border-radius: 10px; }
.day-pick .icon-btn.is-off { visibility: hidden; }
.day-pick .ic { width: 18px; height: 18px; }
.pe-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.pe-label { align-self: center; min-width: 84px; font: 500 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.f { display: grid; gap: 5px; flex: 1 1 130px; min-width: 104px; }
.f-xs { flex: 0 1 84px; min-width: 68px; } .f-sm { flex: 0 1 138px; } .f-grow { flex: 3 1 240px; }
.f:has(> input[type="date"]) { flex: 0 1 178px; min-width: 168px; }       /* un champ de date a besoin de sa largeur */
.f > input, .f > select, .f > textarea { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------ éditeur de programme : une ligne par exercice, comme dans un tableur */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.prog { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.prog .card { margin: 0; }
.pb-head, .cy-level { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; font: 500 11.5px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; }
.pb-head b, .cy-level b { font-weight: 500; color: var(--gold); }
.pb-head span, .cy-level span { color: var(--mute); letter-spacing: .08em; }
.pb-sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pb-sub small { font: 400 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--mute); }
.pp-rows { display: grid; gap: 6px; }
.pp { display: grid; grid-template-columns: 26px minmax(0, 220px) minmax(0, 1fr); gap: 6px; align-items: start; }
.pp i { margin-top: 9px; }
.pp textarea { min-height: 40px; height: 40px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; line-height: 1.4; resize: none; overflow: hidden; }
.pp i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font: 600 12px/1 var(--display); font-style: normal; }
.px-c { display: grid; gap: 3px; min-width: 0; }
.px-c > span { font: 500 10.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.pp .px-c > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pp input, .px input, .px textarea, .px select, .px-head input, .px-head select { padding: 9px 10px; border-radius: 10px; font-size: 14.5px; }
.px-t { padding: 14px 16px 12px 14px; scroll-margin-top: 76px; }
.px-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.px-head .snum { width: 38px; height: 38px; font-size: 19px; margin-bottom: 1px; }
.px-head .px-name { flex: 0 1 210px; } .px-head .px-day { flex: 0 1 150px; min-width: 124px; } .px-head .px-sub { flex: 1 1 220px; }
.px-head .px-name input { font: 500 15px/1.2 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.px-cols, .px { display: grid; grid-template-columns: 22px 46px minmax(0, 1.2fr) 58px 104px 90px 84px minmax(0, 1fr) 32px 32px; column-gap: 6px; }
.px-cols { padding: 0 0 5px; font: 500 10.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.px-cols span { padding-left: 2px; }
.px { grid-template-areas: "mv num ex sets reps load rest note more del" ". . extra extra extra extra extra extra extra extra"; align-items: start; padding: 3px 0; border-radius: 12px; transition: opacity .25s, background .4s; }
.px-move { grid-area: mv; } .px-num { grid-area: num; } .px-ex { grid-area: ex; } .px-sets { grid-area: sets; } .px-reps { grid-area: reps; }
.px-load { grid-area: load; } .px-rest { grid-area: rest; } .px-note { grid-area: note; } .px-tog { grid-area: more; } .px-del { grid-area: del; }
.px-extra { grid-area: extra; display: none; flex-wrap: wrap; gap: 8px; padding: 8px 0 10px; }
.px .px-c > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.px-num input, .px-sets input { text-align: center; padding-left: 4px; padding-right: 4px; }
.px-ex input { font-weight: 500; }
.px textarea { min-height: 40px; height: 40px; resize: none; overflow: hidden; line-height: 1.4; }
.px-move { display: grid; align-content: center; height: 40px; }
.px-move button { display: grid; place-items: center; width: 22px; height: 18px; padding: 0; border: 0; background: none; color: var(--faint); border-radius: 5px; transition: color .15s, background .15s; }
.px-move button:hover { color: var(--text); background: var(--card-2); }
.px-move .ic { width: 15px; height: 15px; }
.px-tog, .px-del { position: relative; display: grid; place-items: center; width: 32px; height: 40px; border-radius: 10px; color: var(--mute); cursor: pointer; transition: color .15s, background .15s; }
.px-tog:hover, .px-del:hover { color: var(--text); background: var(--card-2); }
.px-tog input, .px-del input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.px-tog .ic, .px-del .ic { width: 17px; height: 17px; pointer-events: none; }
.px-tog.has::after { content: ''; position: absolute; top: 7px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--s); }
.px-tog:has(input:focus-visible), .px-del:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 1px; }
.px:has(.px-tog input:checked) .px-extra { display: flex; animation: rise .3s var(--ease) both; }
.px:has(.px-tog input:checked) .px-tog { color: var(--s); background: rgba(var(--s-rgb), .12); }
.px:has(.px-del input:checked) > :not(.px-del) { opacity: .3; }
.px:has(.px-del input:checked) .px-ex input { text-decoration: line-through; }
.px:has(.px-del input:checked) .px-del { color: var(--bad); background: rgba(255, 107, 107, .12); }
.px[data-kind=topset] .px-ex input { box-shadow: inset 3px 0 0 var(--top); }
.px[data-kind=backoff] .px-ex input { box-shadow: inset 3px 0 0 var(--back); }
.px[data-kind=echauffement] .px-ex input { box-shadow: inset 3px 0 0 var(--line-2); color: var(--soft); }
.px[data-new] .px-move, .px[data-new] .px-del { visibility: hidden; }
.px[data-new].is-filled .px-move, .px[data-new].is-filled .px-del { visibility: visible; }
.px.moved { background: rgba(var(--s-rgb), .1); }
.px-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; margin-top: 8px; }
.add-line { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border: 1px dashed rgba(var(--s-rgb), .5); border-radius: 12px; background: rgba(var(--s-rgb), .06); color: var(--s); font: 500 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: background .2s, border-color .2s, transform .2s var(--ease); }
.add-line:hover { background: rgba(var(--s-rgb), .13); border-color: var(--s); } .add-line:active { transform: scale(.98); }
.add-line .ic { width: 17px; height: 17px; }
.pb .add-line { margin-top: 8px; }
.link-danger { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; color: var(--faint); font: 500 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.link-danger .ic { width: 15px; height: 15px; }
.link-danger:hover { color: var(--bad); } .link-danger.armed { color: var(--bad); }
.add-session { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; width: 100%; min-height: 64px; padding: 12px 16px; border: 1px dashed var(--line-2); border-radius: 18px; background: transparent; color: var(--gold); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.add-session b { font: 500 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.add-session span { flex-basis: 100%; text-align: center; color: var(--mute); font-size: 13px; }
.add-session:hover { border-color: var(--gold); background: var(--gold-soft); } .add-session:active { transform: scale(.995); }
.newb { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line); }
.newb h2 { font: 600 22px/1.15 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.newb .pick { margin: 6px 0 4px; } .newb .pick div { max-width: 460px; }
.newb .pick span { height: 44px; font-size: 17px; }
.newb .pe-line { margin: 0; } .newb .form-foot { margin-top: 4px; }
.nextb p { color: var(--soft); font-size: 14px; } .nextb .split { margin: 12px 0 10px; }
/* éditeur : la semaine qu'on modifie (celle en cours, ou la suivante préparée à l'avance) */
.wsw-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; }
.wsw { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.wsw a { display: grid; gap: 3px; min-width: 128px; padding: 8px 14px; border-radius: 10px; color: var(--mute); transition: background .25s, color .2s, transform .2s var(--ease); }
.wsw a b { font: 500 13.5px/1.1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.wsw a span { font-size: 12px; line-height: 1.1; }
.wsw a:hover { color: var(--text); } .wsw a:active { transform: scale(.98); }
.wsw a.on { background: var(--gold); color: var(--gold-ink); } .wsw a.on span { color: rgba(20, 16, 0, .72); }
.wsw-say { flex: 1 1 320px; max-width: 72ch; color: var(--mute); font-size: 13.5px; }
/* Les charges prévues sur tout le bloc : une colonne par mouvement à charge fixe, une ligne par semaine. */
.pl { padding-bottom: 12px; }
.pl-hint { margin: 0 0 12px; color: var(--mute); font-size: 13.5px; } .pl-hint b { color: var(--text); font-weight: 600; }
.pl-tbl { width: auto; min-width: 100%; border-collapse: collapse; }
.pl-tbl th, .pl-tbl td { padding: 6px 10px; text-align: left; vertical-align: middle; white-space: nowrap; }
.pl-tbl thead th { padding-bottom: 8px; border-bottom: 1px solid var(--line); vertical-align: bottom; white-space: normal; min-width: 132px; }
.pl-tbl thead th b { display: block; font: 500 13px/1.25 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.pl-tbl thead th small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--mute); }
.pl-tbl tbody th { font: 500 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.pl-tbl tbody th small { display: block; margin-top: 2px; font-size: 10.5px; letter-spacing: .08em; color: var(--s); }
.pl-tbl tr.pl-cur td { color: var(--soft); font-size: 14px; }
.pl-tbl tr.pl-cur th, .pl-tbl tr.pl-cur td { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.pl-cell { display: inline-flex; align-items: center; gap: 5px; }
.pl-cell input { width: 62px; padding: 7px 8px; font-size: 14px; border-radius: 9px; color: var(--mute); }
.pl-cell input:first-child { width: 46px; }
.pl-cell i { font-style: normal; color: var(--faint); }
.pl-cell.is-set input { color: var(--text); border-color: rgba(var(--s-rgb), .5); }
.pl-cell input:focus { color: var(--text); }
.wsw-say b { color: var(--text); font-weight: 600; }
.px-leaving { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 0 0 12px; padding: 4px 12px; border-radius: 10px; background: rgba(242, 153, 74, .1); color: var(--warn); font-size: 13.5px; }
.px-leaving .link-btn { color: var(--text); }
/* retour : retirer un exercice pour la suite, en ajouter sous chaque séance */
.fb-del { position: relative; margin-left: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 9px; border-radius: 10px; color: var(--faint); font: 500 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s; }
.fb-del input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fb-del .ic { width: 15px; height: 15px; }
.fb-del .is-on { display: none; }
.fb-del:hover { color: var(--bad); }
.fb-del:has(input:checked) { color: var(--bad); background: rgba(255, 107, 107, .12); }
.fb-del:has(input:checked) .is-on { display: inline; } .fb-del:has(input:checked) .is-off { display: none; }
.fb-del:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 1px; }
.fb-next:has(.fb-del input:checked) .f, .fb-next:has(.fb-del input:checked) .fb-last { opacity: .3; }
.tnext { margin: 2px 18px 16px; padding-top: 12px; border-top: 1px dashed var(--line-2); }
.tnext-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; font: 500 11.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tnext-head b { font-weight: 500; color: var(--s); } .tnext-head span { color: var(--mute); letter-spacing: .08em; }
.tnext .px-cols:has(+ .px-rows:empty) { display: none; }
.tnext .px-rows:not(:empty) { margin-bottom: 8px; }
.tnext-title { margin: 22px 2px 10px; font: 500 15px/1.25 var(--display); letter-spacing: .08em; text-transform: uppercase; }
form:not(.prog) > .add-session { margin: 14px 0 0; }
.archived { margin-top: 26px; }
.archived summary { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; list-style: none; color: var(--mute); font: 500 13px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.archived summary::-webkit-details-marker { display: none; }
.archived summary .ic { width: 16px; height: 16px; transition: transform .3s var(--ease); } .archived[open] summary .ic { transform: rotate(180deg); }
.archived summary em { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 11px; background: var(--card-2); color: var(--soft); font-size: 12px; letter-spacing: 0; }
.archived .hint { margin: 4px 0 10px; } .archived .row { opacity: .8; }
/* tableau de bord : les dernières séances terminées, avec ce que l'athlète en a dit */
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--card); border: 1px solid transparent; border-left: 3px solid var(--s); transition: transform .2s var(--ease), border-color .2s; }
.lrow:hover { transform: translateY(-1px); border-color: var(--line-2); border-left-color: var(--s); }
.lrow-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.lrow-main b { font: 500 15px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.lrow-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--mute); font-size: 13px; }
.lrow-sub .snum { width: 20px; height: 20px; border-radius: 6px; font-size: 12px; }
.lrow-say { color: var(--soft); font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lrow-side { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex: none; max-width: 46%; }
.lrow-none { color: var(--faint); font-size: 12.5px; }
.lchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 9px; background: rgba(255, 255, 255, .05); background: color-mix(in srgb, var(--t) 14%, transparent); border: 1px solid var(--t); color: var(--t); font: 600 14px/1 var(--display); white-space: nowrap; }
.lchip i { font: 500 10.5px/1 var(--display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.lchip-v { --t: var(--soft); border-color: var(--line-2); background: none; font-weight: 500; } .lchip-v .ic { width: 15px; height: 15px; }
/* accueil d'un nouvel athlète : trois premiers pas */
.first { border: 1px solid var(--gold-deep); background: linear-gradient(160deg, var(--gold-soft), transparent 70%), var(--card); }
.first-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; counter-reset: st; }
.first-steps li { counter-increment: st; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; border-top: 1px solid var(--line); }
.first-steps li:first-child { border-top: 0; }
.first-steps i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold-deep); color: var(--gold); font: 600 13px/1 var(--display); font-style: normal; }
.first-steps i:empty::before { content: counter(st); }
.first-steps i .ic { width: 15px; height: 15px; }
.first-steps li.is-done i { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.first-steps a, .first-steps label, .first-steps li > span { flex: 1; min-width: 0; display: grid; gap: 1px; cursor: pointer; }
.first-steps li > span { cursor: default; }
.first-steps b { font: 500 15px/1.25 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.first-steps small { color: var(--mute); font-size: 13px; } .first-steps small.warn { color: var(--warn); }
.first-steps li.is-done b { color: var(--soft); }
/* le ressenti d'une séance, lisible d'un coup d'œil côté coach : fatigue avant, RPE moyen, commentaire */
.tsum { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 170px) minmax(0, 1fr); gap: 8px; padding: 8px 18px 14px; }
.tsum-i { display: grid; align-content: start; gap: 2px; min-width: 0; padding: 10px 12px 11px; border-radius: 12px; background: var(--card-2); border-top: 2px solid var(--t, var(--line-2)); }
.tsum-i > span { font: 500 10.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.tsum-i b { font: 600 24px/1.1 var(--display); color: var(--t, var(--text)); }
.tsum-i b small { font-size: 13px; font-weight: 500; color: var(--mute); }
.tsum-i em { font-style: normal; font-size: 12.5px; color: var(--soft); }
.tsum-say { border-top-color: var(--s); }
.tsum-say p { margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.tsum-i.is-off { border-top-color: var(--line-2); } .tsum-i.is-off b { color: var(--faint); }
.tsum-i.is-off em, .tsum-i.is-off p { color: var(--mute); font-size: 13px; }
.rpe-chip { display: inline-grid; place-items: center; min-width: 36px; height: 26px; padding: 0 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); background: color-mix(in srgb, var(--t) 16%, transparent); border: 1px solid var(--t); color: var(--t); font: 600 14px/1 var(--display); }
.rpe-none { color: var(--faint); }
.tcard-fix { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 30px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line-2); color: var(--soft); font: 500 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.tcard-fix .ic { width: 14px; height: 14px; }
.tcard-fix:hover { color: var(--s); border-color: var(--s); }
.save-note { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 8px; font: 500 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.save-note::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: pop .4s var(--ease) both; }

/* ------------------------------------------------------------ cycle d'entraînement : macrocycle, mésocycle, microcycles */
.cycle { position: relative; display: grid; gap: 12px; padding-left: 26px; grid-template-columns: minmax(0, 1fr); }
.cycle::before { content: ''; position: absolute; left: 8px; top: 24px; bottom: 40px; width: 1px; background: linear-gradient(var(--gold), var(--line) 85%); opacity: .7; }
.cy { position: relative; padding: 16px 18px; background: var(--card); border-radius: 18px; animation: rise .55s var(--ease) both; }
.cy:nth-child(2) { animation-delay: .07s; } .cy:nth-child(3) { animation-delay: .14s; }
.cy::before { content: ''; position: absolute; left: -23px; top: 18px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--gold); }
.cy:nth-child(2)::before { border-color: #D9A93A; } .cy:nth-child(3)::before { border-color: var(--gold-deep); }
.cy-level { margin-bottom: 6px; }
.cy h2 { font: 500 19px/1.3 var(--display); letter-spacing: .02em; text-wrap: balance; }
.cy-meta { margin-top: 3px; color: var(--mute); font-size: 13.5px; }
.cy-remark { margin-top: 10px; color: var(--soft); font-size: 14px; }
.cy .prios-chips { margin-top: 12px; }
.cy-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cy-acts:empty { display: none; }
.cy-line { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cy-seg { position: relative; flex: 1 1 0; min-width: 132px; display: grid; gap: 2px; padding: 10px 12px 13px; border-radius: 12px; background: var(--card-2); border: 1px solid transparent; overflow: hidden; transition: border-color .2s, transform .2s var(--ease); }
.cy-seg:hover { border-color: var(--line-2); transform: translateY(-1px); }
.cy-seg b { font: 500 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.cy-seg span { color: var(--mute); font-size: 12.5px; white-space: nowrap; }
.cy-seg i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--gold-deep); transform-origin: left; animation: grow-x .8s var(--ease) both; }
.cy-seg.is-live i { background: var(--gold); }
.cy-seg.on { border-color: rgba(240, 180, 41, .55); background: var(--gold-soft); }
.cy-edit { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.cy-edit summary { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; cursor: pointer; list-style: none; color: var(--mute); font: 500 12px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: color .2s; }
.cy-edit summary::-webkit-details-marker { display: none; }
.cy-edit summary:hover, .cy-edit[open] summary { color: var(--gold); }
.cy-edit summary .ic { width: 15px; height: 15px; }
.cy-edit .pe-line { margin: 10px 0 2px; }
.cy-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 12px; }
.cy-week { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 82px; padding: 10px 11px 11px; border-radius: 12px; background: var(--card-2); border: 1px solid transparent; transition: border-color .2s, transform .2s var(--ease); }
a.cy-week:hover { border-color: var(--line-2); transform: translateY(-2px); }
.cy-bar { display: block; height: 4px; margin: 5px 0 6px; border-radius: 2px; background: var(--line); overflow: hidden; }
.cy-bar i { display: block; width: calc(var(--h) * 1%); height: 100%; border-radius: 2px; background: #B8892A; transform-origin: left; animation: grow-x .8s var(--ease) both; }
.cy-week b { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 6px; font: 500 12.5px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.cy-week b em { font-style: normal; font-size: 10.5px; letter-spacing: .06em; color: var(--gold); }
.cy-week span { color: var(--soft); font-size: 12.5px; white-space: nowrap; } .cy-week small { color: var(--faint); font-size: 12.5px; }
.cy-week.is-now { border-color: rgba(240, 180, 41, .55); background: var(--gold-soft); } .cy-week.is-now .cy-bar i { background: var(--gold); }
.cy-week.is-todo { background: transparent; border: 1px dashed var(--line); } .cy-week.is-todo b { color: var(--mute); } .cy-week.is-todo .cy-bar { background: transparent; }
.cy-legend { margin-top: 10px; }
.cy-sub { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.cy-sessions { display: grid; gap: 6px; }
.cy-s { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px 6px 8px; border-radius: 12px; background: var(--card-2); border-left: 3px solid var(--s); transition: transform .2s var(--ease); }
.cy-s:hover { transform: translateX(2px); }
.cy-s b { font: 500 14px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.cy-s > span:not(.snum):not(.pill) { flex: 1; min-width: 0; color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-s .pill { flex: none; } .cy-s.is-done b { color: var(--soft); }
.access { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.access b { font: 500 15.5px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.creds { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.creds .stat b { font: 600 22px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }

/* ------------------------------------------------------------ séance : un exercice à la fois */
.sess-title { display: flex; align-items: center; gap: 14px; }
.sess-title .snum { width: 42px; height: 42px; border-radius: 12px; font-size: 22px; }
.sess-bar { margin: 0 0 16px; display: grid; gap: 9px; }
.sess-bar .segbar i.on::after { background: var(--s); animation-delay: 0s; }
.sess-bar p { font: 500 13.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.exs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ss { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px; border-radius: 24px; border: 1px dashed rgba(var(--s-rgb), .5); }
.ss-label { margin: 2px 6px 0; font: 500 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--s); }
.xo { background: var(--card); border: 1px solid var(--line); border-radius: 18px; scroll-margin-top: 72px; transition: border-color .25s; }
.xo[open] { border-color: rgba(var(--s-rgb), .7); background: linear-gradient(180deg, rgba(var(--s-rgb), .13), rgba(var(--s-rgb), 0) 200px), var(--card); }
.xo summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 18px; cursor: pointer; list-style: none; }
.xo summary::-webkit-details-marker { display: none; }
.xo-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; border: 2px solid rgba(var(--s-rgb), .7); color: var(--s); font: 600 16px/1 var(--display); transition: background .25s, color .25s, border-color .25s; }
.xo-n .ic { display: none; width: 17px; height: 17px; stroke-width: 2.8; }
.xo.done .xo-n { background: var(--s); border-color: var(--s); color: var(--s-ink); animation: pop .45s var(--ease); }
.xo.done .xo-n span { display: none; } .xo.done .xo-n .ic { display: block; }
.xo-t { display: grid; gap: 2px; min-width: 0; }
.xo-t b { font: 600 17.5px/1.15 var(--display); text-transform: uppercase; text-wrap: balance; transition: font-size .25s var(--ease); }
.xo[open] .xo-t b { font-size: 20px; }
.xo-rx { font-size: 13.5px; color: var(--soft); }
.xo-done { font-size: 13px; color: var(--s); } .xo-done:empty { display: none; }
.xo-chev { display: grid; color: var(--mute); transition: transform .3s var(--ease); }
.xo[open] .xo-chev { transform: rotate(180deg); }
.xo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 2px 16px 16px; animation: rise .4s var(--ease) both; }
.xo.is-warm { background: transparent; }
.xo.is-warm .xo-t b { font-size: 15.5px; color: var(--soft); } .xo.is-warm[open] .xo-t b { font-size: 17.5px; color: var(--text); }
.todo { display: grid; gap: 7px; padding: 11px 13px; background: var(--bg); border-radius: 12px; }
.todo-head { font: 500 11px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--s); }
.todo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
.todo-item { font-size: 13.5px; color: var(--soft); white-space: nowrap; }
.todo-item + .todo-item { margin-left: 13px; padding-left: 13px; border-left: 1px solid var(--line-2); }
.todo-item b { margin-right: 5px; font: 600 21px/1.1 var(--display); color: var(--text); }
.todo-line { font-size: 13.5px; color: var(--soft); }
.todo-line b { color: var(--text); font-weight: 600; }
.todo-none { color: var(--mute); font-size: 14px; }
.ex-num { min-width: 30px; height: 30px; padding: 0 7px; border-radius: 9px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); color: var(--soft); font: 600 14px/1 var(--display); flex: none; }
.cat { font: 500 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.demo { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin: -6px 0; font: 500 13.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.note { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); display: grid; gap: 3px; }
.note-head { display: flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.note-head .ic { display: none; }
.note p { font-size: 14.5px; line-height: 1.4; }
.older { margin-top: 6px; font-size: 14px; color: var(--soft); }
.older summary { cursor: pointer; min-height: 32px; color: var(--mute); font-size: 13px; }
.old-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.old-note small { color: var(--mute); }
.prev { font-size: 13.5px; color: var(--mute); padding: 0 2px; }
.sets { display: grid; gap: 8px; }
.sets-head, .set { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr) 46px; align-items: center; gap: 8px; }
.sets-head { padding: 0 6px; font: 500 11.5px/1.3 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: center; }
.sets-head span:first-child { text-align: left; }
.set { padding: 5px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; transition: border-color .25s, background .25s; }
.set-n { width: 26px; height: 26px; margin-left: 2px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); font: 600 13px/1 var(--display); color: var(--soft); transition: background .25s, color .25s; }
.set input { height: 44px; padding: 0 6px; border-radius: 10px; border-color: transparent; text-align: center; font: 600 19px/1 var(--display); background: var(--card); }
.set input::placeholder { color: var(--faint); font-weight: 500; }
.ok-btn { width: 42px; height: 42px; padding: 0; justify-self: center; border-radius: 50%; border: 2px solid var(--line-2); background: transparent; color: var(--faint); display: grid; place-items: center; transition: background .2s, color .2s, border-color .2s, transform .18s var(--ease); }
.ok-btn .ic { width: 20px; height: 20px; stroke-width: 2.8; }
.ok-btn:active { transform: scale(.9); }
.xo[open] .set.next { border-color: rgba(var(--s-rgb), .85); }
.xo[open] .set.next .ok-btn { border-color: var(--s); color: var(--s); }
.set.saved { background: rgba(var(--s-rgb), .09); border-color: rgba(var(--s-rgb), .32); }
.set.saved .ok-btn { background: var(--s); border-color: var(--s); color: var(--s-ink); }
.set.saved .set-n { background: rgba(var(--s-rgb), .28); color: var(--text); }
.set.saved.just .ok-btn { animation: pop .4s var(--ease); }
.set.saving { opacity: .75; }
.set.error { border-color: var(--bad); }
.set-note { margin: 8px 2px 0; font-size: 13.5px; line-height: 1.4; color: var(--warn); } .set-note[hidden] { display: none; }
.sets-help { margin-top: -4px; font-size: 13px; color: var(--mute); }
.xo-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-top: -6px; }
.ton { margin-left: auto; font: 500 13px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.rpe { display: grid; gap: 9px; padding-top: 13px; border-top: 1px solid var(--line); }
.rpe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 500 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.rpe-head small { font-size: 11.5px; color: var(--mute); }
.rpe-head a { font-size: 11.5px; letter-spacing: .08em; color: var(--gold); white-space: nowrap; }
.rpe-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.rpe-scale label { position: relative; }
.rpe-scale input { position: absolute; opacity: 0; pointer-events: none; }
.rpe-scale span { --t: #6FCF73; display: grid; place-items: center; height: 40px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); border-bottom: 2px solid var(--t); font: 600 16px/1 var(--display); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.rpe-scale label:nth-child(n+4) span { --t: #B5D85A; }
.rpe-scale label:nth-child(n+6) span { --t: #F0B429; }
.rpe-scale label:nth-child(n+8) span { --t: #F2994A; }
.rpe-scale label:nth-child(n+9) span { --t: #FF7A59; }
.rpe-scale label:nth-child(10) span { --t: #FF5C5C; }
.rpe-scale span:active { transform: scale(.94); }
.rpe-scale input:checked + span { background: var(--t); border-color: var(--t); color: #111112; transform: scale(1.05); }
.rpe-scale input:focus-visible + span { box-shadow: 0 0 0 3px var(--gold-soft); }
.rpe-scale input:disabled + span { cursor: default; opacity: .55; } .rpe-scale input:disabled:checked + span { opacity: 1; }
.fat-scale span { --t: #6AA8FF; }
.fat-scale label:nth-child(n+4) span { --t: #8E9BFF; }
.fat-scale label:nth-child(n+6) span { --t: #B79CFF; }
.fat-scale label:nth-child(n+8) span { --t: #DE8BEA; }
.fat-scale label:nth-child(n+9) span { --t: #F283CB; }
.fat-scale label:nth-child(10) span { --t: #FF82B4; }
.pre { display: grid; gap: 9px; margin: 0 0 14px; padding: 12px 14px 13px; background: var(--card); border: 1px solid rgba(183, 156, 255, .38); border-radius: 16px; }
.pre .rpe-head > span { color: #B79CFF; }
.pre .rpe-head small { letter-spacing: .08em; }
.pre .rpe-say:empty::before { content: '1 = en pleine forme · 10 = épuisé'; }
.pre.error .rpe-say { color: var(--warn); }
.rpe-say { min-height: 19px; font-size: 13.5px; font-weight: 600; }
.rpe-say:empty::before { content: 'De 1, très facile, à 10, le maximum.'; font-weight: 400; color: var(--mute); }
.xo.done .rpe:not(.has) .rpe-head > span { color: var(--s); }
.rpe.error .rpe-say { color: var(--warn); }
.finish { margin-top: 16px; display: grid; gap: 12px; border: 1px solid rgba(var(--s-rgb), .4); }
.finish .field { margin: 0; } .finish .kicker { color: var(--s); }
.done-card { display: flex; align-items: center; gap: 14px; margin-top: 16px; border: 1px solid rgba(var(--s-rgb), .5); }
.done-card .tile-ok { color: var(--s); border-color: rgba(var(--s-rgb), .5); }
.done-card div { flex: 1; } .done-card b { font: 500 15px/1.3 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.done-card p { color: var(--soft); font-size: 14px; }
.rest { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 45; width: min(440px, calc(100vw - 24px)); padding: 12px 12px 12px 18px; display: flex; align-items: center; gap: 14px; border-radius: 20px; background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 50px rgba(0, 0, 0, .6); transform: translate(-50%, 140%); opacity: 0; transition: transform .45s var(--ease), opacity .3s; }
.rest.show { transform: translate(-50%, 0); opacity: 1; }
.rest-main { flex: 1; display: grid; gap: 7px; }
.rest-line { display: flex; align-items: baseline; gap: 10px; }
.rest-line span { font: 500 12px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.rest-line b { font: 600 24px/1 var(--display); color: var(--s); font-variant-numeric: tabular-nums; }
.rest-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rest-bar i { display: block; height: 100%; width: 100%; background: var(--s); transform-origin: left; transition: transform .25s linear; }

/* ------------------------------------------------------------ vidéos */
.vids { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.vid-list { display: grid; gap: 10px; width: 100%; } .vid-list:empty { display: none; }
.vid-add { position: relative; cursor: pointer; }
.vid-progress { width: 100%; }
.vids-head { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.vids-head .ic { width: 16px; height: 16px; color: var(--s); }
.vids .btn-block { border-color: rgba(var(--s-rgb), .55); } .vids .btn-block .ic { color: var(--s); }
.vid-hint { margin: -2px 0 0; font-size: 13px; line-height: 1.4; color: var(--mute); }
.vids .vid-what b { display: none; }          /* dans la séance, le nom de l'exercice est déjà au-dessus */
.xo.drop { border-color: var(--s); box-shadow: 0 0 0 3px rgba(var(--s-rgb), .25); }
.xo-side { display: flex; align-items: center; gap: 8px; }
.xo-cam { display: grid; color: var(--s); } .xo-cam .ic { width: 18px; height: 18px; }
.vid-add:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.vid-progress { display: grid; gap: 8px; }
.vid-progress .rest-bar { height: 8px; border-radius: 4px; } .vid-progress .rest-bar i { transform: scaleX(0); }
.vid-progress p { font-size: 14px; color: var(--soft); }
.vid-progress.error p { color: var(--warn); } .vid-progress.error .rest-bar { display: none; }
.vid { min-width: 0; display: grid; gap: 8px; align-content: start; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.vids .vid { background: var(--card-2); }
.vid video { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 440px; border-radius: 10px; background: #000; }
.vid-link { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 14px; border-radius: 10px; background: var(--card-2); font: 500 14.5px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.vid-link .ic { color: var(--gold); }
.vid-link small { display: block; margin-top: 3px; font: 400 12.5px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--mute); }
.vid-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 0 4px 2px; }
.vid-what { flex: 1; min-width: 150px; display: grid; gap: 1px; }
.vid-what b { font: 500 14px/1.25 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.vid-what small { font-size: 12.5px; color: var(--mute); }
.vid-meta form { display: flex; }
.vid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; }
.vid-new { display: grid; gap: 12px; border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.vid-new.drop { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.vid-new .field { margin: 0; }
.vid-link-form summary { padding: 9px 0; cursor: pointer; font-size: 14.5px; color: var(--soft); }
.vid-link-form summary::marker { color: var(--gold); }
.vid-link-form .pe-line { margin: 8px 0 0; }

/* ------------------------------------------------------------ performances */
.perfs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.perf { margin: 0; display: grid; gap: 8px; align-content: start; border: 1px solid rgba(var(--s-rgb), .32); background: linear-gradient(170deg, rgba(var(--s-rgb), .16), rgba(var(--s-rgb), 0) 58%), var(--card); }
.perf header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.perf-from { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--s); }
.perf h3 { font: 600 18px/1.12 var(--display); text-transform: uppercase; text-wrap: balance; }
.perf-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.perf-big b { font: 600 32px/1 var(--display); }
.perf-big span { font: 500 16px/1 var(--display); color: var(--soft); }
.perf-big em { margin-left: auto; font: 500 12px/1.3 var(--display); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.vlink { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: 500 12px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--s); }
.vlink .ic { width: 17px; height: 17px; }
.vlink small { font-size: 11px; letter-spacing: .06em; color: var(--mute); }
.vlink.quiet { color: var(--mute); }
.vlink:hover { color: var(--text); }
.pl-name .vlink { margin-left: 8px; min-height: 0; vertical-align: -3px; } .pl-name .vlink span, .pl-name .vlink small { display: none; }
.delta { display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 9px; border-radius: 8px; font: 600 14px/1 var(--display); letter-spacing: .04em; white-space: nowrap; }
.delta small { font: 500 11.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.delta.up { background: rgba(111, 207, 115, .15); color: var(--back); }
.delta.down { background: var(--card-2); color: var(--soft); }
.plist { padding: 0; overflow: hidden; border-left: 4px solid var(--s); }
.plist header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.plist header b { font: 600 16px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.plist ul { list-style: none; margin: 0; padding: 0; }
.plist li { display: grid; grid-template-columns: minmax(0, 1fr) auto 104px; align-items: center; gap: 4px 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.plist .delta { justify-self: end; }
.pl-name { min-width: 0; font: 500 14.5px/1.25 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.pl-val { font: 500 15px/1.2 var(--display); color: var(--soft); white-space: nowrap; }
.pl-val b { font-size: 16px; font-weight: 600; color: var(--text); }
.pl-val.quiet { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* ------------------------------------------------------------ tableaux, retours */
.tcard { padding: 0; overflow: hidden; }
.tcard-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; }
.tcard-head > span:not(.snum):not(.pill) { margin-left: auto; text-align: right; }
.tcard-head .pill { flex: none; }
.tcard-say { margin: 0; padding: 2px 18px 10px; font-size: 13.5px; color: var(--soft); }

/* Les vidéos de l'entraînement : un onglet au-dessus du nom de la séance, qui les ouvre toutes côte à côte. Chaque
   vidéo garde sa forme (debout ou couchée) et toutes ont la même hauteur, comme une planche de photos. */
.tvids { border-bottom: 1px solid var(--line); }
.tvids > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 18px; cursor: pointer; list-style: none; background: rgba(var(--s-rgb), .09); transition: background .2s; }
.tvids > summary::-webkit-details-marker { display: none; }
.tvids > summary:hover { background: rgba(var(--s-rgb), .16); }
.tvids > summary:focus-visible { outline: 2px solid var(--s); outline-offset: -2px; }
.tvids > summary > .ic { flex: none; width: 22px; height: 22px; color: var(--s); }
.tvids > summary b { font: 500 13.5px/1.25 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.tvids-n { color: var(--mute); font-size: 13px; white-space: nowrap; }
.tvids-new, .tv-new { flex: none; font: 600 10.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 4px 6px; white-space: nowrap; }
.tvids-chev { margin-left: auto; display: grid; color: var(--mute); transition: transform .25s var(--ease); }
.tvids-chev .ic { width: 18px; height: 18px; }
.tvids[open] .tvids-chev { transform: rotate(180deg); }
.tvids[open] > summary { background: rgba(var(--s-rgb), .14); }
.tv-row { --tv-h: 300px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px 18px 16px; background: rgba(var(--s-rgb), .04); }
.tv { flex: none; width: calc(var(--tv-h) * var(--ar, .75) + 18px); min-width: 204px; max-width: 100%; margin: 0; display: grid; gap: 8px; align-content: start; padding: 8px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); transition: width .3s var(--ease), border-color .2s; }
.tv[data-new] { border-color: rgba(240, 180, 41, .45); }
.tv figcaption { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 26px; }
.tv-n { flex: none; min-width: 24px; height: 24px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 8px; background: var(--s); color: var(--s-ink); font: 700 13px/1 var(--display); }
.tv.is-warm .tv-n { background: transparent; border: 1px solid var(--line-2); color: var(--mute); font-size: 10.5px; }
.tv figcaption b { flex: 1; min-width: 0; font: 500 13px/1.25 var(--display); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.tv-frame { position: relative; }
.tv video { display: block; width: 100%; height: var(--tv-h); border-radius: 9px; background: #000; object-fit: contain; }
.tv-big { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .6); color: #fff; transition: background .2s, color .2s, transform .2s var(--ease); }
.tv-big .ic { width: 17px; height: 17px; }
.tv-big:hover { background: var(--s); color: var(--s-ink); } .tv-big:active { transform: scale(.93); }
.tv-link { display: grid; place-content: center; justify-items: center; gap: 10px; height: 150px; padding: 0 12px; border-radius: 9px; background: var(--bg); text-align: center; font: 500 13.5px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.tv-link .ic { width: 38px; height: 38px; color: var(--s); }
.tv-link small { display: block; margin-top: 4px; font: 400 12.5px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--mute); overflow-wrap: anywhere; }
.tv-link:hover { color: var(--s); }
.tv-done { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 0 2px; font-size: 13px; line-height: 1.35; color: var(--soft); }
.tv-done span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tv-done .rpe-chip { flex: none; min-width: 32px; height: 24px; font-size: 13px; }
.tv-write { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--soft); font: 500 11.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; transition: color .2s, border-color .2s; }
.tv-write .ic { width: 14px; height: 14px; }
.tv-write:hover { color: var(--s); border-color: var(--s); }
.tvids-none { display: flex; align-items: center; gap: 7px; margin: 0; padding: 11px 18px 0; font-size: 12.5px; color: var(--faint); }
.tvids-none .ic { width: 15px; height: 15px; }
.tbl tr.is-aimed td { background: rgba(var(--s-rgb), .1); transition: background .4s; }
.c-vid { white-space: nowrap; }
.vplay { display: inline-flex; align-items: center; gap: 5px; height: 28px; margin-right: 4px; padding: 0 10px 0 7px; border-radius: 14px; background: var(--s); color: var(--s-ink); font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; transition: filter .2s, transform .2s var(--ease); }
.vplay .ic { width: 15px; height: 15px; }
.vplay:hover { filter: brightness(1.1); } .vplay:active { transform: scale(.95); }
.tbl td.missing { color: var(--warn); }
/* Le tableau du retour tient dans la largeur dès 820 px (fenêtre réduite, volet de l'application) : la case « Ton
   commentaire » reste toujours à l'écran. En dessous seulement, il défile de côté. */
.tbl-edit { min-width: 820px; }
.tbl-edit th, .tbl-edit td { padding-left: 9px; padding-right: 9px; }
.tbl-edit .c-note { width: 30%; min-width: 230px; padding-top: 8px; padding-bottom: 8px; }
.tbl-edit .c-ton, .tbl-edit .c-rpe { white-space: nowrap; }
.tbl-edit .c-note textarea { min-height: 54px; font-size: 14px; background: var(--bg); }
.tbl tr.fb-next td { border-top: 0; padding-top: 0; padding-bottom: 12px; }
.fb-next .pe-line { margin: 0; align-items: flex-end; gap: 8px; }
.fb-next .pe-label { align-self: flex-end; padding-bottom: 9px; }
.fb-next .fb-last { align-self: center; }
.fb-next .f { flex: 0 1 112px; min-width: 64px; gap: 2px; } .fb-next .f-xs { flex-basis: 60px; }
.fb-next .f > span { font-size: 10px; letter-spacing: .1em; }
.fb-next input { padding: 7px 9px; font-size: 13.5px; border-radius: 9px; }
.fb-next .pe-label { min-width: 0; margin-right: 2px; font-size: 11.5px; color: var(--mute); }
/* La règle de progression, à côté des cases de la semaine suivante : ce qu'elle a changé (en vert), ou pourquoi elle ne change rien. */
.fb-prog { flex: 0 1 auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 5px; min-height: 30px; margin-bottom: 3px; padding: 4px 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--card-2); font-size: 12.5px; line-height: 1.25; color: var(--mute); }
.fb-prog .ic { flex: none; width: 14px; height: 14px; }
.fb-prog.is-up { color: var(--back); border-color: rgba(111, 207, 115, .42); background: rgba(111, 207, 115, .1); }
.fb-prog.is-todo { color: var(--warn); border-color: rgba(242, 153, 74, .45); background: rgba(242, 153, 74, .08); }
.fb-prog.is-fixed { padding-inline: 2px; border-color: transparent; background: none; color: var(--faint); }
.fb-br { display: none; }
.fb-prog.is-off { border-style: dashed; }
.fb-next .f.is-auto input { border-color: rgba(111, 207, 115, .55); color: var(--back); }
.fb-next .f.is-auto input:focus { border-color: var(--gold); color: var(--text); }
.fb-next:has(.fb-del input:checked) .fb-prog { display: none; }
.f-prog { flex: 1 1 250px; }
.fb-last { flex: 1 1 200px; min-width: 0; max-height: 2.7em; font-size: 12.5px; line-height: 1.35; color: var(--mute); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.sline { border-left: 4px solid var(--s); }
.pe-line > .snum { align-self: center; }
.c-rpe { font: 600 15px/1.3 var(--display); white-space: nowrap; }
.tcard-head b { font: 500 16px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.tcard-head a:hover { color: var(--gold); }
.tcard-head span { color: var(--mute); font-size: 13.5px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th { text-align: left; font: 500 12px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; white-space: nowrap; }
.tbl td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl td small { display: block; color: var(--mute); font-size: 12px; }
.tbl th:first-child, .tbl td:first-child { padding-left: 18px; } .tbl th:last-child, .tbl td:last-child { padding-right: 18px; }
.tbl tr.is-warm td { color: var(--mute); }
.tbl .name { display: inline-flex; align-items: center; gap: 10px; font: 500 16px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.tbl .num { font: 500 15.5px/1.2 var(--display); white-space: nowrap; }
.tbl tr.rowlink { transition: background .2s; } .tbl tr.rowlink:hover { background: var(--card-2); }
.c-num { font: 500 13px/1.6 var(--display); color: var(--mute); white-space: nowrap; }
.c-ton { text-align: right; font: 500 15px/1.4 var(--display); white-space: nowrap; }
.card > .tbl-wrap { margin: -6px -6px; }
.tfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 56px; padding: 6px 18px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--soft); }
.fb header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; margin-bottom: 10px; }
.fb header b { font: 600 20px/1.1 var(--display); text-transform: uppercase; }
.fb header > span:not(.pill) { grid-column: 1 / -1; grid-row: 2; font: 500 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.fb-title { margin: 16px 0 8px; font: 500 11.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.fb-general { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--gold-deep); display: grid; gap: 6px; }
.fb-general .fb-title { margin: 0 0 2px; color: var(--gold); }
.fb-general p { font-size: 14.5px; } .fb-general .quiet { color: var(--mute); }
.fb-open { margin-top: 6px; }
.fb-link { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.fb-session { margin-top: 8px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(var(--s-rgb), .36); background: linear-gradient(170deg, rgba(var(--s-rgb), .13), rgba(var(--s-rgb), .03) 60%), var(--bg); }
.fb-session header { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; }
.fb-session header b { font: 600 16px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; }
.fb-row { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); gap: 4px 16px; padding: 10px 14px; border-top: 1px solid rgba(var(--s-rgb), .2); }
.fb-exo { font: 500 14.5px/1.3 var(--display); letter-spacing: .03em; text-transform: uppercase; color: var(--s); }
.fb-text { display: grid; gap: 4px; font-size: 14.5px; color: var(--text); }
.fb-session header span:last-child { margin-left: auto; font-size: 12.5px; color: var(--mute); }
.checkin { display: grid; gap: 10px; border: 1px solid var(--line); } .pain { color: var(--warn); }

/* ------------------------------------------------------------ retours : une ligne par semaine, la plus récente en haut ; un retour ne se déplie qu'au toucher */
.rt-list { display: grid; gap: 10px; }
.rt-list + .rt-more, .rt-more + .rt-list { margin-top: 12px; }
.rt { margin: 0; padding: 0; overflow: hidden; border: 1px solid transparent; transition: border-color .25s; scroll-margin-top: 78px; }
.rt[open] { border-color: rgba(240, 180, 41, .38); }
.rt.is-new:not([open]) { border-color: rgba(240, 180, 41, .28); }
.rt-sum { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 11px 14px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.rt-sum::-webkit-details-marker { display: none; }
.rt-sum:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 18px; }
.rt-wk { flex: none; width: 46px; height: 46px; display: grid; place-content: center; justify-items: center; gap: 3px; border-radius: 13px; background: var(--card-2); border: 1px solid var(--line); color: var(--soft); transition: background .25s, color .25s, border-color .25s; }
.rt-wk small { font: 500 9.5px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.rt-wk b { font: 600 18px/1 var(--display); }
.rt[open] .rt-wk, .rt.is-new .rt-wk { background: var(--gold-soft); border-color: rgba(240, 180, 41, .5); color: var(--gold); }
.rt[open] .rt-wk small, .rt.is-new .rt-wk small { color: var(--gold); opacity: .85; }
.rt-title { flex: 1; min-width: 0; display: grid; gap: 4px; }
.rt-title b { font: 600 15.5px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.rt-title span { font-size: 13px; line-height: 1.35; color: var(--mute); }
.rt-new .pill { margin-right: 6px; padding: 3px 6px; font-size: 10.5px; vertical-align: 1px; }
.rt-chev { flex: none; display: grid; place-items: center; width: 28px; height: 28px; color: var(--mute); transition: transform .3s var(--ease), color .2s; }
.rt-chev .ic { width: 18px; height: 18px; }
.rt-sum:hover .rt-chev { color: var(--text); }
.rt[open] .rt-chev { transform: rotate(90deg); color: var(--gold); }
.rt-body { padding: 4px 14px 16px; animation: rise .3s var(--ease) both; }
.rt-by { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.rt-by span { display: grid; gap: 2px; font-size: 13px; color: var(--mute); }
.rt-by b { font: 500 13.5px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.rt-more .f { flex: none; }
.rt-more .f > span { display: flex; align-items: center; gap: 7px; }
.rt-more .f > span .ic { width: 15px; height: 15px; color: var(--gold); }
.rt-more select { width: 100%; min-height: 46px; }
.rt-sec { margin-top: 14px; }
.rt-sec:first-of-type { margin-top: 0; }
.rt-h { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font: 500 12px/1.3 var(--display); letter-spacing: .13em; text-transform: uppercase; color: var(--soft); }
.rt-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: var(--gold-soft); color: var(--gold); }
.rt-ic .ic { width: 16px; height: 16px; }
.rt .fb-general .rt-h { margin-bottom: 4px; color: var(--gold); }
.rt-bilan { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card-2); }
.rt-bilan .quiet { margin: 0; font-size: 14px; color: var(--mute); }
.rt .fb-session:first-of-type { margin-top: 0; }

/* ------------------------------------------------------------ suivi : une couleur par donnée */
.m-weight { --s: #F0B429; --s-rgb: 240, 180, 41; }
.m-steps { --s: #3DD6B5; --s-rgb: 61, 214, 181; }
.m-water { --s: #6AA8FF; --s-rgb: 106, 168, 255; }
.m-kcal { --s: #FF8A5B; --s-rgb: 255, 138, 91; }
.m-train { --s: #A3DD63; --s-rgb: 163, 221, 99; }
.m-sleep { --s: #B79CFF; --s-rgb: 183, 156, 255; }
.m-fatigue { --s: #FF82B4; --s-rgb: 255, 130, 180; }
.fatigue { display: grid; gap: 9px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.fatigue .rpe-head small { letter-spacing: .06em; text-transform: none; font: 400 12.5px/1.3 var(--body); color: var(--mute); }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--s); vertical-align: 1px; }
.otiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.otile { min-width: 0; display: grid; gap: 5px; align-content: start; padding: 13px 14px; border-radius: 16px; background: linear-gradient(150deg, rgba(var(--s-rgb), .2), rgba(var(--s-rgb), .05) 70%), var(--card); border: 1px solid rgba(var(--s-rgb), .34); }
.otile-top { display: flex; align-items: center; gap: 7px; font: 500 11.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--s); }
.otile-top .ic { width: 17px; height: 17px; }
.otile b { font: 600 24px/1.1 var(--display); }
.otile b small { margin-left: 2px; font: 500 12px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.otile-sub { font-size: 12.5px; color: var(--soft); }

.dayrows { display: grid; gap: 6px; }
.dayrow { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 9px 12px 9px 9px; background: var(--card); border: 1px solid transparent; border-radius: 14px; color: var(--mute); transition: transform .2s var(--ease), border-color .2s; }
.dayrow:hover { transform: translateY(-1px); border-color: var(--line-2); }
.dayrow.is-today { border-color: var(--gold-deep); }
.daytag { display: grid; justify-items: center; gap: 1px; padding: 6px 0 5px; border-radius: 10px; background: var(--card-2); color: var(--text); }
.daytag small { font: 500 10px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.daytag b { font: 600 19px/1 var(--display); }
.dayrow.is-today .daytag { background: var(--gold); color: var(--gold-ink); } .dayrow.is-today .daytag small { color: var(--gold-ink); }
.dayvals { display: flex; flex-wrap: wrap; gap: 5px 14px; min-width: 0; }
.dval { display: inline-flex; align-items: baseline; font-size: 13px; color: var(--soft); white-space: nowrap; }
.dval .dot { align-self: center; margin-right: 6px; }
.dval b { margin-right: 4px; font: 600 15px/1.2 var(--display); color: var(--text); }
.dayrow > .ic { width: 16px; height: 16px; }

/* ------------------------------------------------------------ aperçu des athlètes : état coloré, quotidien, accès rapides */
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.legend-note { margin-left: 6px; font-size: 12.5px; color: var(--mute); }
/* La carte d'un athlète, sur deux étages : en haut qui c'est et où il en est, en bas son quotidien de la semaine et les
   accès rapides. Le texte et les boutons ont chacun leur place : ils ne se chevauchent à aucune largeur d'écran. */
.arow { display: grid; grid-template-columns: minmax(230px, 1fr) auto; grid-template-areas: "id pill" "recap acts"; align-items: center; gap: 10px 16px; padding: 12px 16px; background: var(--card); border-radius: 16px; border-left: 3px solid var(--line-2); transition: transform .2s var(--ease); }
.arow.t-accent { border-left-color: var(--gold); }
.arow.t-ok { border-left-color: var(--back); }
.arow.t-info { border-left-color: #6AA8FF; }
.arow.t-warn { border-left-color: var(--warn); }
.arow-id { grid-area: id; display: flex; align-items: center; gap: 12px; min-width: 0; }
.arow-id:hover b { color: var(--gold); }
.arow-recap { grid-area: recap; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.arow-none { font-size: 12.5px; line-height: 1.35; color: var(--faint); }
.arow-side { display: contents; }
.arow-side > .pill { grid-area: pill; justify-self: end; }
.arow-acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; }
.arow-acts .btn-sm { height: 32px; padding: 0 10px; gap: 6px; font-size: 11.5px; border-radius: 9px; }
.arow-acts .btn-sm .ic { width: 15px; height: 15px; }
.mchip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 13px; border: 1px solid rgba(var(--s-rgb), .45); color: var(--s); font: 600 12.5px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.mchip .ic { width: 14px; height: 14px; }
.mchip.hit { background: var(--s); border-color: var(--s); color: var(--s-ink); }

/* ------------------------------------------------------------ tableau de bord : planning des retours, jour par jour */
/* Les sept prochains jours : une ligne par jour, aujourd'hui en tête. Les prénoms se suivent et passent à la ligne s'il le
   faut : aucun n'est coupé, rien ne dépasse de son cadre, quelle que soit la largeur de l'écran. */
.plan { display: grid; gap: 6px; }
.plan-day { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; gap: 6px 14px; min-width: 0; padding: 9px 12px 9px 14px; background: var(--card); border: 1px solid transparent; border-radius: 14px; }
.plan-day.is-today { border-color: rgba(240, 180, 41, .55); background: linear-gradient(100deg, var(--gold-soft), rgba(240, 180, 41, .02) 60%), var(--card); }
.plan-head { display: grid; gap: 3px; min-width: 0; margin: 0; font-family: var(--display); text-transform: uppercase; }
.plan-head b { font-size: 13.5px; font-weight: 600; line-height: 1.15; letter-spacing: .08em; }
.plan-head span { font-size: 11.5px; line-height: 1.2; letter-spacing: .06em; color: var(--mute); }
.plan-day.is-today .plan-head b, .plan-day.is-today .plan-head span { color: var(--gold); }
.plan-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.plan-chip { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 11px; background: var(--card-2); border-left: 3px solid var(--line-2); font: 500 13.5px/1.2 var(--display); letter-spacing: .03em; text-transform: uppercase; transition: transform .2s var(--ease), background .2s; }
.plan-chip:hover { transform: translateY(-1px); background: #26262a; }
.plan-chip span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-chip.t-accent { border-left-color: var(--gold); } .plan-chip.t-ok { border-left-color: var(--back); }
.plan-chip.t-info { border-left-color: #6AA8FF; } .plan-chip.t-warn { border-left-color: var(--warn); }
.plan-none { font-size: 13px; color: var(--faint); }
.dash-all { justify-content: flex-end; margin-top: 14px; }

/* ------------------------------------------------------------ tableau de bord : RPE moyen de chaque séance */
.rchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rchip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px 0 3px; border-radius: 12px; background: rgba(var(--s-rgb), .14); border: 1px solid rgba(var(--s-rgb), .4); font: 600 13px/1 var(--display); color: var(--text); white-space: nowrap; }
.rchip i { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: var(--s); color: var(--s-ink); font: 700 11px/1 var(--display); font-style: normal; }

/* ------------------------------------------------------------ graphiques */
.chart { margin: 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart polyline { fill: none; stroke: var(--s); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; animation: fade .9s ease-out both .2s; }
.chart circle { fill: var(--card); stroke: var(--s); stroke-width: 2; animation: pop .5s var(--ease) both .4s; transform-box: fill-box; transform-origin: center; }
.chart figcaption { display: flex; justify-content: space-between; margin-top: 6px; font: 500 12px/1.3 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.chart figcaption b { color: var(--soft); font-weight: 500; }
.bars { position: relative; margin: 0; }
.bars ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 6px; height: 168px; }
.bars li { flex: 1; min-width: 0; display: grid; grid-template-rows: 18px 1fr 20px; justify-items: center; }
.bars li i { align-self: end; width: 100%; min-height: 3px; border-radius: 4px 4px 1px 1px; background: rgba(var(--s-rgb), .38); transform-origin: bottom; animation: grow-y .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + .15s); }
.bars li i.none { background: var(--line); }
.bars li i.hit, .bars li i.peak { background: var(--s); }
.bar-val { align-self: end; font: 500 10.5px/1.4 var(--display); color: var(--mute); white-space: nowrap; }
.bar-val.peak { color: var(--s); }
.bar-lab { align-self: center; font: 500 11px/1.4 var(--display); color: var(--mute); }
.bars-plot { position: relative; }
.bar-target { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(var(--s-rgb), .6); pointer-events: none; }
.bar-goal { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0 0 6px; font: 500 10.5px/1.4 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--s); }
.bar-goal i { flex: none; width: 20px; border-top: 1px dashed rgba(var(--s-rgb), .8); }
.progs { display: grid; gap: 14px; }
.prog { display: grid; gap: 7px; }
.prog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--display); text-transform: uppercase; }
.prog-head span:first-child { font-size: 15px; font-weight: 500; letter-spacing: .04em; }
.prog-val { font-size: 15px; font-weight: 500; color: var(--soft); white-space: nowrap; }
.prog-val b { color: var(--text); font-size: 16px; font-weight: 600; }
.meter { position: relative; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.meter span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; transform-origin: left; animation: grow-x .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + .2s); }
.meter-now { background: var(--gold); }
.meter-start { background: var(--gold-deep); border-radius: 4px 0 0 4px !important; }

/* ------------------------------------------------------------ barre flottante */
.dock { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; gap: 2px; padding: 7px; border-radius: 24px; background: var(--glass); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 22px 60px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 255, 255, .07) inset; view-transition-name: dock; }
.dock-item { position: relative; flex: none; width: 72px; height: 58px; padding: 0; border: 0; background: none; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--mute); transition: transform .28s var(--ease), color .2s; }
.dock-item:hover { transform: translateY(-4px) scale(1.06); color: var(--text); }
.dock-item:active { transform: scale(.94); }
.dock-item .ic { width: 22px; height: 22px; position: relative; }
.dock-item span { position: relative; font: 500 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.dock-item.on { color: var(--gold); }
.dock-item.on::before { content: ''; position: absolute; inset: 0; border-radius: 18px; background: var(--gold-soft); border: 1px solid rgba(240, 180, 41, .28); view-transition-name: dock-on; }
.dock-item em { position: absolute; top: 9px; right: 18px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #1b1b1e; }
.focus .dock { display: none; }

/* ------------------------------------------------------------ panneaux coulissants */
.scrim { position: fixed; inset: 0; z-index: 50; background: rgba(4, 4, 5, .6); opacity: 0; pointer-events: none; transition: opacity .3s; }
.sheet-open .scrim { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; left: 50%; bottom: 0; z-index: 55; width: min(560px, 100vw); max-height: 84vh; overflow-y: auto; padding: 10px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: rgba(22, 22, 24, .94); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid rgba(255, 255, 255, .08); border-bottom: 0; transform: translate(-50%, 104%); transition: transform .42s var(--ease); visibility: hidden; }
.sheet.open { transform: translate(-50%, 0); visibility: visible; }
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 2px auto 14px; }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sheet-head div { flex: 1; min-width: 0; }
.sheet-head b { display: block; font: 600 20px/1.1 var(--display); text-transform: uppercase; }
.sheet-head small { font: 500 12.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.sheet h6 { margin: 16px 2px 6px; font: 500 12.5px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.sheet-links { display: grid; gap: 4px; }
.sheet-links a, .sheet-links button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--card-2); text-align: left; font: 500 15px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; transition: transform .2s var(--ease), background .2s; }
.sheet-links a:hover, .sheet-links button:hover { transform: translateX(3px); background: #26262a; }
.sheet-links .ic { color: var(--gold); }
.sheet form.idea { display: grid; gap: 8px; margin-top: 4px; }
.who-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.who-grid a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px 0 8px; border-radius: 14px; background: var(--card-2); font: 500 15px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; transition: transform .2s var(--ease), background .2s; }
.who-grid a:hover { transform: translateY(-2px); background: #26262a; }
.who-grid a.on { outline: 1px solid var(--gold); }
.who-grid a > span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ recherche rapide */
.palette { position: fixed; inset: 0; z-index: 80; background: rgba(4, 4, 5, .64); display: grid; justify-items: center; align-content: start; padding: 12vh 16px 0; animation: fade .2s ease-out both; }
.palette-box { width: min(560px, 100%); background: rgba(22, 22, 24, .96); border: 1px solid var(--line-2); border-radius: 18px; padding: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); animation: rise .3s var(--ease) both; }
.palette input { font-size: 17px; padding: 13px 14px; }
.palette ul { list-style: none; margin: 8px 0 0; padding: 0; max-height: 46vh; overflow-y: auto; }
.palette li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 12px; border-radius: 10px; }
.palette li.on a, .palette li a:hover { background: var(--gold-soft); }
.palette li b { font: 500 15px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.palette li span { color: var(--mute); font-size: 13px; white-space: nowrap; }
.palette p { color: var(--faint); font-size: 12px; padding: 8px 12px 2px; }

/* ------------------------------------------------------------ connexion */
.bare { min-height: 100vh; display: grid; place-items: center; padding: 24px 18px; }
.login { width: min(400px, 100%); text-align: center; animation: rise .7s var(--ease) both; }
.login-logo { width: 230px; max-width: 70%; height: auto; margin-bottom: 18px; }
.login h1 { font-size: 28px; }
.login .lead { margin: 6px auto 26px; }
.login form { text-align: left; }
.login .hint { margin-top: 18px; }
/* « Rester connecté » : un interrupteur, doré quand il est allumé */
.keep { position: relative; display: flex; align-items: center; gap: 12px; margin: 2px 0 18px; padding: 11px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left; }
.keep input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keep-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 13px; background: var(--line-2); transition: background .25s; }
.keep-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--soft); transition: transform .25s var(--ease), background .25s; }
.keep input:checked + .keep-sw { background: var(--gold); }
.keep input:checked + .keep-sw::after { transform: translateX(18px); background: var(--gold-ink); }
.keep input:focus-visible + .keep-sw { outline: 2px solid var(--gold); outline-offset: 2px; }
.keep-t { display: grid; gap: 2px; min-width: 0; }
.keep-t b { font: 500 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.keep-t small { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.login .info { text-align: left; }

/* ------------------------------------------------------------ petits écrans */
@media (max-width: 720px) {
  .tvids > summary { flex-wrap: wrap; gap: 4px 10px; padding: 9px 14px; }
  .tvids > summary b { flex: 1 1 60%; }
  .tv-row { --tv-h: 260px; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px 14px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .tv-row::-webkit-scrollbar { display: none; }
  .tv { max-width: 84%; scroll-snap-align: center; }
  .tv:only-child { max-width: 100%; margin-inline: auto; }
  .tv video { height: auto; aspect-ratio: var(--ar, .75); max-height: var(--tv-h); }     /* une vidéo couchée ne laisse pas de bandes noires */
  .tvids-none { padding: 10px 14px 0; }
  .rt-sum { gap: 10px; padding: 10px 12px; }
  .rt-wk { width: 42px; height: 42px; }
  .rt-title b { font-size: 14.5px; }
  .rt-body { padding: 2px 12px 14px; }
  .tsum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 8px 14px 12px; }
  .tsum-say { grid-column: 1 / -1; }
  .tcard-head { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px 6px; }
  .tcard-head b { flex: 1 1 auto; min-width: 0; }
  .tcard-head > span:not(.snum):not(.pill) { order: 5; flex: 1 1 100%; margin-left: 0; text-align: left; }
  input, select, textarea { font-size: 16px; }
  h1 { font-size: 32px; } .hello-sm h1 { font-size: 26px; }
  .top { padding: 0 16px; }
  .wrap, .space-coach .wrap { padding: 4px 16px 150px; }
  .hero h2 { font-size: 23px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis .stat b { font-size: 32px; }
  .row { flex-wrap: wrap; }
  .row-side { width: 100%; justify-content: space-between; padding-left: 58px; }
  .row-go { flex-wrap: nowrap; } .row-go .row-side { width: auto; padding-left: 0; }
  .frise { grid-auto-flow: row; }
  .dock-item { width: 70px; } .dock-item span { font-size: 10.5px; letter-spacing: .06em; }
  .rx-more { display: none; }
  .suivi h2 { font-size: 24px; }
  .rpe-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .todo-item b { font-size: 19px; }
  .xo[open] .xo-t b { font-size: 19px; }
  .perf-big b { font-size: 30px; }
  .plist li { grid-template-columns: minmax(0, 1fr) auto; }
  .plist .pl-name { grid-column: 1 / -1; }
  .vid-grid { grid-template-columns: minmax(0, 1fr); }
  .sess-title .snum { width: 38px; height: 38px; font-size: 20px; }
  .day-pick input { min-width: 0; }
  .dayrow { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; } .dayrow > .ic { display: none; }
  .fb-row { grid-template-columns: minmax(0, 1fr); }
  .top-back { padding: 0 10px 0 6px; }
  .top-ctx { display: none; }
}
@media (max-width: 430px) {
  .dock-item { width: 66px; }
  .scard { gap: 12px; padding: 12px 12px 12px 14px; } .scard-state > .ic { display: none; } .scard-main b { font-size: 18px; }
  .xo summary { gap: 12px; padding: 13px 12px 13px 14px; } .xo-body { padding: 2px 12px 14px; }
  .sets-head, .set { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; }
}
@media (max-width: 430px) { .visiting .dock-item { width: 56px; } .visiting .dock-item span { font-size: 9.5px; letter-spacing: .03em; } }
@media (max-width: 380px) { .dock-item { width: 62px; } }
@media (max-width: 360px) {      /* très petits téléphones : rien ne sort de l'écran */
  .visiting .dock-item { width: 50px; } .visiting .dock-item span { font-size: 9px; letter-spacing: 0; }
  .dock { padding: 6px 5px; }
  .savebar { width: calc(100vw - 16px); max-width: none; }
  .savebar .btn { flex: 1 1 0; min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; white-space: normal; font-size: 13px; line-height: 1.15; }
}
@media (max-width: 350px) { .dock-item { width: 56px; } .dock-item span { font-size: 10px; letter-spacing: .04em; } }

@media (max-width: 1200px) {
  /* Trop étroit pour des colonnes : une fiche par exercice, chaque donnée avec son intitulé. */
  .tbl-edit thead { display: none; }
  .tbl-edit, .tbl-edit tbody { display: block; min-width: 0; }
  .tbl-edit tr { display: grid; grid-template-columns: 30px auto minmax(0, 1fr) auto; grid-template-areas: "num name name vid" "num rx rx rx" "num done done done" "num rpe ton ton" "note note note note"; gap: 5px 10px; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--line); }
  .tbl-edit td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl-edit td:first-child, .tbl-edit td:last-child { padding: 0; }
  .tbl-edit td:empty { display: none; }
  .tbl-edit .c-num { grid-area: num; } .tbl-edit .c-name { grid-area: name; } .tbl-edit .c-vid { grid-area: vid; justify-self: end; }
  .tbl-edit .c-rx { grid-area: rx; } .tbl-edit .c-done { grid-area: done; } .tbl-edit .c-rpe { grid-area: rpe; } .tbl-edit .c-ton { grid-area: ton; text-align: left; }
  .tbl-edit .c-note { grid-area: note; width: auto; min-width: 0; padding-top: 4px; }
  .tbl-edit td[data-l] { position: relative; padding-left: 72px; }                    /* l'intitulé à gauche, la valeur alignée même sur deux lignes */
  .tbl-edit td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 3px; font: 500 10.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .tbl-edit td.c-ton[data-l], .tbl-edit td.c-note[data-l] { padding-left: 0; }
  .tbl-edit td.c-ton[data-l]::before { position: static; margin-right: 8px; }
  .tbl-edit td.c-note[data-l]::before { position: static; display: block; margin: 0 0 4px; }
  .tbl-edit .c-rpe:not(:empty) { margin-right: 6px; }
  .tbl-edit .rx-more { display: inline; }
  .tbl-edit tr.fb-next { display: block; padding-top: 0; border-top: 0; }
  .tbl-edit tr.fb-next td { padding: 0 0 2px; }
  .tbl-edit { min-width: 0; }
  /* La semaine suivante sur deux lignes : les cases et « Retirer », puis l'étiquette de progression et la note en cours. */
  .tbl-edit .fb-del { order: 1; }
  .tbl-edit .fb-br { display: block; order: 2; flex: 0 0 100%; height: 0; margin-top: -8px; }
  .tbl-edit .fb-prog { order: 3; align-self: center; margin-bottom: 0; }
  .tbl-edit .fb-last { order: 4; }
}
@media (max-width: 820px) {
  /* Trop étroit pour des colonnes : une fiche par exercice, chaque donnée avec son intitulé. */
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; min-width: 0; }
  .tbl tr { display: grid; grid-template-columns: 30px auto minmax(0, 1fr) auto; grid-template-areas: "num name name vid" "num rx rx rx" "num done done done" "num rpe ton ton" "note note note note"; gap: 5px 10px; align-items: baseline; padding: 12px 16px; border-top: 1px solid var(--line); }
  .tbl td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl td:first-child, .tbl td:last-child { padding: 0; }
  .tbl td:empty { display: none; }
  .tbl .c-num { grid-area: num; } .tbl .c-name { grid-area: name; } .tbl .c-vid { grid-area: vid; justify-self: end; }
  .tbl .c-rx { grid-area: rx; } .tbl .c-done { grid-area: done; } .tbl .c-rpe { grid-area: rpe; } .tbl .c-ton { grid-area: ton; text-align: left; }
  .tbl .c-note { grid-area: note; width: auto; min-width: 0; padding-top: 4px; }
  .tbl td[data-l] { position: relative; padding-left: 72px; }                    /* l'intitulé à gauche, la valeur alignée même sur deux lignes */
  .tbl td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 3px; font: 500 10.5px/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
  .tbl td.c-ton[data-l], .tbl td.c-note[data-l] { padding-left: 0; }
  .tbl td.c-ton[data-l]::before { position: static; margin-right: 8px; }
  .tbl td.c-note[data-l]::before { position: static; display: block; margin: 0 0 4px; }
  .tbl .c-rpe:not(:empty) { margin-right: 6px; }
  .tbl .rx-more { display: inline; }
  .tbl tr.fb-next { display: block; padding-top: 0; border-top: 0; }
  .tbl tr.fb-next td { padding: 0 0 2px; }
}
@media (max-width: 900px) {
  .arow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id pill" "recap recap" "acts acts"; gap: 10px 12px; }
  .arow-acts { justify-content: flex-start; }
  .plan-day { grid-template-columns: 148px minmax(0, 1fr); }
  .px-cols { display: none; }
  .px { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-areas: "num ex ex ex ex ex ex ex" "sets sets reps reps load load rest rest" "note note note note note note note note" "mv mv . . . . more del" "extra extra extra extra extra extra extra extra"; row-gap: 6px; padding: 12px 0 6px; border-top: 1px solid var(--line); border-radius: 0; }
  .px .px-c > span { position: static; width: auto; height: auto; clip-path: none; }
  .px-move { display: flex; gap: 4px; height: 36px; align-items: center; } .px-move button { width: 34px; height: 32px; background: var(--card-2); border-radius: 8px; }
  .px-tog, .px-del { justify-self: end; width: 36px; height: 36px; }
  .px[data-new] .px-move, .px[data-new] .px-del { display: none; } .px[data-new].is-filled .px-move { display: flex; } .px[data-new].is-filled .px-del { display: grid; }
  .px-extra { padding: 4px 0 8px; }
}
@media (max-width: 720px) {
  .fb-next .pe-label { flex: 1 0 100%; padding-bottom: 0; }        /* « Semaine N » sur sa ligne, les quatre cases côte à côte dessous */
  .fb-next .f, .fb-next .f-xs { flex: 1 1 56px; min-width: 52px; }
  .fb-next .fb-last { flex: 1 1 100%; }
  /* Sur téléphone : l'étiquette de progression et « Retirer » partagent la ligne sous les cases, la note vient dessous. */
  /* Les trois boutons « semaine en cours · suivante · tout le bloc » se partagent la largeur du téléphone. */
  .wsw { display: flex; width: 100%; }
  .wsw a { flex: 1 1 0; min-width: 0; padding: 8px 6px; text-align: center; }
  .wsw a b { font-size: 12.5px; letter-spacing: .05em; } .wsw a span { font-size: 11px; }
  .pl-tbl th, .pl-tbl td { padding: 6px 7px; } .pl-tbl thead th { min-width: 118px; }
  .fb-next .fb-br { order: 1; }
  .fb-next .fb-prog { order: 2; flex: 1 1 0; min-width: 0; align-self: center; margin: 0; }
  .fb-next .fb-del { order: 3; }
  .fb-next .fb-last { order: 4; }
  /* (après les règles « 900 px » ci-dessus, pour passer devant elles sur téléphone) */
  .arow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "pill" "recap" "acts"; }
  .arow-side > .pill { justify-self: start; }
  .arow-acts .btn-sm { flex: 1 1 auto; }
  .plan-day { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .plan-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
  .pp { grid-template-columns: 26px minmax(0, 1fr); } .pp-body { grid-column: 2; }
  .px-head .px-name { flex: 1 1 150px; } .px-head .px-day { flex: 1 1 120px; }
  .cycle { padding-left: 18px; } .cycle::before { left: 4px; } .cy::before { left: -19px; }
  .cy { padding: 14px; } .cy h2 { font-size: 17.5px; }
  .cy-weeks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .cy-week { padding: 7px 8px 9px; }
  .save-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ------------------------------------------------------------------ au doigt (téléphone, tablette)
   Deux garde-fous pour les écrans tactiles, vérifiés écran par écran :
   1. Aucun champ sous 16 px. En dessous, un iPhone zoome sur la page dès qu'on touche le champ, et ne dézoome pas tout
      seul. (!important : une règle plus précise, écrite ailleurs pour un champ compact, ne doit jamais repasser dessous.)
   2. Les petits liens et boutons gardent une zone de toucher d'au moins 44 px, sans changer de taille à l'œil.
   3. Deux appuis rapprochés sur un bouton (valider deux séries d'affilée) ne zooment pas la page ; pincer pour agrandir
      reste possible partout. */
a, button, input, select, textarea, label, summary { touch-action: manipulation; }
@media (max-width: 720px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea { font-size: 16px !important; }
  /* Les quatre petites cases (séries, reps, charge, récup) : « séries », qui porte un chiffre ou « 5 min », cède de la place
     à « reps » et « charge », pour que « 13 / 12 / 12 » et « 2min30 » tiennent en entier à cette taille. */
  .fb-next input, .px-sets input, .px-reps input, .px-load input, .px-rest input, .pl-cell input { padding-inline: 8px; word-spacing: -2px; }
  .fb-next .pe-line > .f-xs { flex: 0 0 52px; min-width: 52px; }
  .fb-next .pe-line > .f-sm { flex: 1.28 1 70px; }
  .fb-next .pe-line > label.f:nth-of-type(4) { flex: 1.04 1 60px; }
  .px { grid-template-columns: minmax(0, 1fr) minmax(0, .4fr) repeat(4, minmax(0, 1.17fr)) minmax(0, .96fr) minmax(0, .96fr);
        grid-template-areas: "num ex ex ex ex ex ex ex" "sets sets reps reps load load rest rest" "note note note note note note note note"
                             "mv mv mv . . . more del" "extra extra extra extra extra extra extra extra"; }
}
/* Très petit écran (320 px : anciens téléphones, ou « affichage agrandi » de l'iPhone) : dans le bandeau d'une séance,
   le bouton de retour ne garde que sa flèche, pour que la recherche et le profil restent entiers. */
@media (max-width: 359px) {
  .top { gap: 8px; padding: 0 12px; }
  .top-back { padding: 0 9px; }
  .top-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (pointer: coarse) {
  .arow-acts .btn-sm, .link-btn.quiet, .vlink, .vplay, .tcard-fix, .tv-write, .me-ask, .top-back, .trail a, .dash-all a,
  .cy-edit summary, .sbox-title a, .rpe-head a, .px-move button { position: relative; }
  .tv-big::after, .arow-acts .btn-sm::after, .link-btn.quiet::after, .vlink::after, .vplay::after, .tcard-fix::after, .tv-write::after,
  .me-ask::after, .top-back::after, .trail a::after, .dash-all a::after, .cy-edit summary::after, .sbox-title a::after, .rpe-head a::after {
    content: ''; position: absolute; top: 50%; left: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .px-move button::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}