/* ==========================================================================
   COACH AD v2 — thème « Performance »
   Mêmes couleurs (noir, or, blanc). Tuiles arrondies, gros chiffres condensés,
   barre d'onglets flottante. Ce fichier se charge après styles.css et ne fait
   que changer l'apparence : aucune fonction de l'app n'en dépend.
   ========================================================================== */
:root {
  --bg: #0b0b0b;
  --bg-raise: #1a1a1a;
  --bg-field: #1d1d1d;
  --line: #262626;
  --line-strong: #333333;
  --tile: #1a1a1a;
  --tile-2: #262626;
  --display: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --r-md: 20px;
  --r-lg: 26px;
  --tabbar-h: 66px;
}
html, body { background: var(--bg); }
.app { padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 48px); }

/* ---------- Titres condensés ---------- */
.topbar h1, .h2, .sheet-head h2, .dialog h3, .gate h1, .greeting, .client-head h2,
.sign-call h2, .done-burst h2, .fold-t, .chal-t, .goal-t, .streak .sn, .weeknav .lbl {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
}
.next .time, .next .day, .goal-j, .stat .val, .carnet-head .big, .dateblock .dn, .daystrip .n, .code,
.gc-top .pct, .rec-hero .val, .rec-best, .tm-num, .fold-r b, .fold-sub b, .timeblock, .sig-recap .d, .sig-recap .t {
  font-family: var(--display); font-weight: 800; letter-spacing: 0;
}

/* ---------- En-tête : petit libellé au-dessus, grand titre, logo à droite ---------- */
.topbar {
  background: rgba(11, 11, 11, .92); border-bottom: 0;
  padding-top: calc(var(--safe-top) + 12px); padding-bottom: 12px;
}
.topbar h1 { font-size: 34px; line-height: .95; display: flex; flex-direction: column-reverse; }
.topbar .sub {
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.topbar > .mark { order: 3; width: 44px; height: 44px; }
.icon-btn { border-radius: 50%; border: 0; background: var(--tile-2); width: 44px; height: 44px; }
.h2 { font-size: 21px; margin-bottom: 12px; }
.h2 .link { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Barre d'onglets flottante ---------- */
.tabbar {
  left: 14px; right: 14px; bottom: calc(var(--safe-bottom) + 14px);
  max-width: 532px; margin: 0 auto;
  background: rgba(30, 30, 30, .94); border: 1px solid #2c2c2c; border-radius: 34px;
  padding: 0 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.tabbar .inner { display: flex; justify-content: space-around; align-items: center; height: var(--tabbar-h); }
.tabbar button {
  flex: 0 0 auto; flex-direction: row; gap: 7px; height: 48px; padding: 0 13px; border-radius: 24px;
  color: #8b8b8b; transition: background .2s, color .2s;
}
.tabbar button > span:last-child { display: none; }
.tabbar button[aria-current="page"] {
  background: var(--gold); color: #111; padding: 0 17px;
  font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .05em; text-transform: uppercase;
}
.tabbar button[aria-current="page"] > span:last-child { display: inline; }
.tabbar .badge-dot::after { box-shadow: 0 0 0 2px #1e1e1e; }
.fab {
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 28px);
  height: 54px; border-radius: 27px;
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 4px rgba(11, 11, 11, .6);
}

/* ---------- Boutons ---------- */
.btn { border-radius: 18px; border-color: var(--line-strong); }
.btn-gold, .btn-dark {
  font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: .05em; text-transform: uppercase;
}
.btn-dark { background: #111; border-color: #111; }
.btn-small { border-radius: 14px; }
.text-btn { font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.chip { border-radius: 999px; background: var(--tile); border-color: var(--line-strong); }
.seg { background: transparent; border: 0; padding: 0; gap: 6px; }
.seg button {
  background: var(--tile); border-radius: 14px; min-height: 42px;
  font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: #8b8b8b;
}
.seg button[aria-pressed="true"] { background: #fff; color: #111; }

/* ---------- Champs ---------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="password"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], input[type="search"], select, textarea {
  border-radius: 16px; background: var(--bg-field); border-color: var(--line-strong);
}

/* ---------- Tuiles ---------- */
.stat, .fold, .goal, .goalca, .refer, .tip, .access, .prog, .alert, .rec-chart, .badge, .kv-tile {
  border: 0; background: var(--tile); border-radius: var(--r-lg);
}
.stat { padding: 16px; gap: 6px; }
.stat .lbl, .goal-lbl, .gc-top .lbl, .rec-hero .lbl {
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b8b8b;
}
.stat .val { font-size: 38px; line-height: .95; }
.stat.wide { background: var(--tile); }
.stat.warn { box-shadow: inset 0 0 0 1.5px #6b2a22; }
.stat.warn .lbl { color: #ff8a7a; }
.stats-grid { gap: 10px; }
.tip.gold { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.alert { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.empty { border-radius: var(--r-lg); border-color: #2c2c2c; }

/* Listes : chaque ligne devient une tuile */
main.view .list { gap: 8px; }
main.view .list > .row, main.view .list > .row:first-child {
  background: var(--tile); border: 0; border-radius: 20px; padding: 12px 14px;
}
main.view .fold .list { gap: 0; border-top: 0; }
main.view .fold .list > .row, main.view .fold .list > .row:first-child, main.view .kv .row {
  background: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--line);
}
main.view .fold .list > .row:last-child { border-bottom: 0; }
.row .t1 { font-size: 15px; }
.row .chev { color: #6b6b6b; }
.dateblock {
  width: 52px; height: 56px; border-radius: 14px; border: 1.5px solid var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dateblock .dn { font-size: 26px; line-height: .9; color: var(--gold); }
.dateblock .dm { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.timeblock { font-size: 20px; width: 56px; }
.avatar { border: 0; background: var(--tile-2); width: 46px; height: 46px; font-family: var(--display); font-size: 18px; }
.pill { border-radius: 999px; }

/* Blocs repliables */
.fold-head { padding: 16px 18px; }
.fold-t { font-size: 20px; }
.fold.fold-day .fold-t { font-size: 18px; font-family: var(--display); font-weight: 800; text-transform: uppercase; }
.fold.today { box-shadow: inset 0 0 0 1.5px var(--gold-line); border: 0; }
.fold-r b { font-size: 21px; }
.fold.fold-day .fold-r b { font-size: 19px; }
.fold-n { background: var(--tile-2); border: 0; }
.fold-empty { background: none; box-shadow: inset 0 0 0 1px #222; }

/* ---------- Accueil client ---------- */
.sign-call { background: #fff; color: #111; border-radius: var(--r-lg); }
.sign-call h2 { font-size: 26px; line-height: 1; }
.sign-call p { opacity: 1; color: #555; }
.sign-call .btn-dark { color: var(--gold); }
.next {
  border: 0; border-radius: var(--r-lg);
  background: linear-gradient(150deg, #dcc173, #c9a84c 55%, #b08f36); color: #111;
}
.next .top { color: rgba(17, 17, 17, .65); font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.next .count { color: #111; }
.next .day { font-size: 30px; line-height: 1; text-transform: uppercase; margin-top: 8px; }
.next .time { color: #111; font-size: 84px; line-height: .9; }
.next .time .end { color: rgba(17, 17, 17, .6); font-family: var(--display); font-size: 28px; }
.next .meta { color: rgba(17, 17, 17, .8); font-weight: 600; }
.next .meta svg { color: rgba(17, 17, 17, .6); }
.next .quote { background: rgba(17, 17, 17, .12); color: #111; }
.next .quote b { color: #111; }
.next .text-btn { color: #111; }
.goal { padding: 16px 18px; }
.goal-lbl { color: #8b8b8b; }
.goal-top { align-items: center; }
.goal-j { font-size: 26px; line-height: 1; }
.goal-t { font-size: 22px; line-height: 1.05; }
.goal-n { color: #a3a3a3; }
.goal.past { background: var(--tile); }
.chal { border: 0; background: var(--tile); border-radius: var(--r-lg); }
.chal-t { font-size: 22px; line-height: 1.05; }
.chal.mini .chal-t { font-size: 20px; }
.chal-top .lbl { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
.chal-top .left { font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.chal-bar { height: 10px; background: #2a2a2a; }
.chal-n b { font-family: var(--display); font-size: 22px; }
.refer { padding: 16px 18px; }
.prog { border: 0; border-radius: var(--r-lg); padding: 16px; }
.prog .t1 { font-family: var(--display); font-weight: 800; font-size: 21px; text-transform: uppercase; }

/* Carnet */
.carnet-head .big { font-size: 56px; line-height: .9; }
.carnet-head .big small { font-family: var(--display); font-size: 18px; font-weight: 700; text-transform: uppercase; }
.box { border-radius: 14px; border-color: #3a3a3a; }
.box.coach { background: var(--tile-2); }
.fold-carnet .fold-sub b { font-size: 24px; }

/* Progrès */
.streak { border: 0; background: var(--tile); border-radius: var(--r-lg); padding: 18px; }
.streak .sn { font-size: 28px; line-height: 1; }
.badge { padding: 14px 8px; }
.badge .medal {
  width: 54px; height: 60px; border: 0; border-radius: 0; background: var(--tile-2); color: #6b6b6b;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  font-family: var(--display); font-size: 20px;
}
.badge.ok { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.badge.ok .medal { background: var(--gold); color: #111; box-shadow: none; }
.rec-hero .val { font-size: 64px; line-height: .95; }
.rec-best { font-size: 22px; }

/* ---------- Planning coach ---------- */
.weeknav .lbl { font-size: 22px; }
.weeknav .lbl small { font-family: var(--font); text-transform: none; letter-spacing: 0; }
.daystrip { gap: 6px; }
.daystrip button { border: 0; background: var(--tile); border-radius: 16px; padding: 9px 0 8px; }
.daystrip .w { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.daystrip .n { font-size: 22px; }
.daystrip button.today { background: var(--gold); color: #111; }
.daystrip button.today .n, .daystrip button.today .w { color: #111; }
.daystrip button.today .c i { background: #111; }
.daygroup h3 { font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .02em; }
.pending { border-top-color: #2c2c2c; }

/* Facturation */
.goalca { padding: 18px; gap: 10px; }
.gc-top { align-items: center; }
.gc-top .pct { font-size: 24px; line-height: 1; }
.gc-bar { height: 14px; background: #2a2a2a; }
.bars .bar i { border-radius: 7px 7px 3px 3px; }

/* ---------- Feuilles et fenêtres ---------- */
.sheet { background: #151515; border: 0; border-radius: 30px 30px 0 0; }
.sheet-head h2 { font-size: 26px; line-height: 1; }
.dialog { background: #1a1a1a; border: 0; border-radius: var(--r-lg); }
.dialog h3 { font-size: 24px; }
.sigpad { border-radius: 24px; }
.done-burst .ring { width: 120px; height: 120px; border: 0; background: var(--gold); color: #111; box-shadow: 0 0 60px rgba(201, 168, 76, .45); }
.done-burst .ring svg { width: 60px; height: 60px; }
.done-burst h2 { font-size: 40px; line-height: 1; }

/* Minuteur */
.tm-num { font-size: 84px; }
.tm-step { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: 38px; line-height: 1; }
.tm-step.long { font-size: 28px; }

/* Connexion */
.gate h1 { font-size: 44px; line-height: .95; }

.code-input { font-family: var(--display) !important; font-size: 34px !important; }
.tabbar button[aria-current="page"] .badge-dot::after { background: #111; box-shadow: 0 0 0 2px var(--gold); }
main.view section > .row, main.view section > .list-flat > .row { background: var(--tile); border: 0; border-radius: 20px; padding: 12px 14px; }
main.view section > .row + .row { margin-top: 8px; }
.fold-badges .fold-body { padding-top: 2px; }
.fold-badges .fold-sub b { font-size: 24px; }
/* Badges : médailles compactes avec anneau de progression */
.badges4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; padding-top: 4px; }
.bdg { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; min-width: 0; }
.bdg-r { position: relative; width: 66px; height: 66px; }
.bdg-r svg { position: absolute; inset: 0; width: 66px; height: 66px; }
.bdg-r .bg { fill: none; stroke: #2e2e2e; stroke-width: 4; }
.bdg-r .fg { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
.bdg-r b { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-2); color: #6b6b6b; font-family: var(--display); font-weight: 800; font-size: 19px; }
.bdg.ok .bdg-r b { background: radial-gradient(circle at 35% 30%, #e6cf86, #c9a84c 60%, #a8862f); color: #111; box-shadow: 0 0 16px rgba(201, 168, 76, .35); }
.bdg-t { font-size: 11px; line-height: 1.2; font-weight: 600; color: #7a7a7a; overflow-wrap: anywhere; }
.bdg.ok .bdg-t { color: var(--fg-soft); }
button.bdg { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
button.bdg:active .bdg-r { transform: scale(.94); }
.bdg-r { transition: transform .15s; }
.badge-sheet { align-items: center; text-align: center; gap: 14px; padding-bottom: 6px; }
.bs-ring { position: relative; width: 120px; height: 120px; margin-top: 4px; }
.bs-ring svg { position: absolute; inset: 0; width: 120px; height: 120px; }
.bs-ring .bg { fill: none; stroke: #2e2e2e; stroke-width: 6; }
.bs-ring .fg { fill: none; stroke: var(--gold); stroke-width: 6; stroke-linecap: round; }
.bs-ring b { position: absolute; inset: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--tile-2); color: #6b6b6b; font-family: var(--display); font-weight: 800; font-size: 34px; }
.badge-sheet.ok .bs-ring b { background: radial-gradient(circle at 35% 30%, #e6cf86, #c9a84c 60%, #a8862f); color: #111; box-shadow: 0 0 30px rgba(201, 168, 76, .4); }
.bs-desc { margin: 0; color: var(--fg-soft); font-size: 15px; }
.bs-prog { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.bs-num { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--muted); }
.bs-num b { font-size: 40px; color: var(--gold); }
.bs-how { margin: 0; font-size: 14px; color: var(--fg-soft); }
.badge-sheet.ok .bs-how { color: var(--gold); font-weight: 700; }
/* Badges hexagonaux */
.bdg-r svg.hexm, .bs-ring svg.hexm { position: static; display: block; }
.bdg.ok .hexm { filter: drop-shadow(0 0 10px rgba(201, 168, 76, .35)); }
.bs-ring { width: 124px; height: 124px; }
.badge-sheet.ok .hexm { filter: drop-shadow(0 0 22px rgba(201, 168, 76, .45)); }
/* Mon mois en story : choix des infos */
.story-sheet { gap: 16px; }
.story-top { display: flex; gap: 16px; align-items: flex-start; }
.story-prev.small { width: 132px; max-width: 132px; flex: none; margin: 0; border-radius: 14px; }
.story-side { flex: 1; min-width: 0; }
.story-side .seg button { font-size: 15px; }
.st-opts { display: flex; flex-direction: column; }
.st-opt { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.st-opt .bx { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #444; display: grid; place-items: center; flex: none; color: #111; }
.st-opt .bx svg { width: 16px; height: 16px; stroke-width: 3; }
.st-opt.on .bx { background: var(--gold); border-color: var(--gold); }
.st-opt .nm { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.st-opt .nm em { font-style: normal; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #111; background: var(--gold); border-radius: 999px; padding: 2px 8px; }
.st-opt .vv { font-family: var(--display); font-weight: 800; font-size: 18px; color: #8b8b8b; white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
.st-opt.on .vv { color: var(--gold); }
.st-opt.off { color: #6b6b6b; }
.st-opt[disabled] { cursor: default; }
.st-opt[disabled] .vv { font-family: var(--font); font-weight: 500; font-size: 12.5px; color: #555; }

/* ==========================================================================
   Journal d'entraînement (sport en dehors des séances), résumé, calendrier,
   couleurs par sport, records automatiques et charge vue par le coach
   ========================================================================== */
.wk-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.wk-mini > div { background: var(--tile); border-radius: 18px; padding: 12px 12px 11px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wk-mini .lbl, .wk-grp { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-mini b { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1; white-space: nowrap; }
.wk-links { display: flex; gap: 8px; margin: 0 0 4px; }
.wk-links .btn { flex: 1; }
.wk-grp { margin: 14px 2px 8px; }
.wk-row { width: 100%; text-align: left; font: inherit; color: inherit; }
.wk-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.wk-ico svg { width: 21px; height: 21px; stroke-width: 2; }
.wk-logo { background: #000; border-radius: 50%; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.wk-logo img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.wk-r { margin-left: auto; text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wk-r b { font-family: var(--display); font-weight: 800; font-size: 18px; white-space: nowrap; }
.wk-r small { font-size: 11.5px; color: var(--muted); font-weight: 600; white-space: nowrap; }
.wk-all { margin-top: 10px; }
.wk-sheet .list { display: flex; flex-direction: column; gap: 8px; border-top: 0; }
.wk-sheet .list > .row, .wk-sheet .list > .row:first-child { background: var(--tile); border: 0; border-radius: 18px; padding: 12px 14px; }
/* saisie */
.chips.wk-rpe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.chips.wk-rpe .chip { padding: 0; min-height: 40px; min-width: 0; justify-content: center; border-radius: 10px; font-family: var(--display); font-weight: 800; font-size: 16px; }
.wk-rpe-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
#wk-other { margin-top: 8px; }
/* résumé et calendrier */
.wk-sheet { display: flex; flex-direction: column; gap: 12px; }
.wk-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wk-nav b { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; text-align: center; }
.wk-nav .icon-btn[disabled] { opacity: .3; pointer-events: none; }
.wk-sheet .stat .val small { font-size: 16px; color: var(--muted); }
.wk-box { gap: 12px; }
/* Chaque barre repose sur un rail gris : toutes les couleurs, noir compris, sont bordées de la même façon
   (sur le fond sombre, le noir seul semblait plus petit que les couleurs claires) */
.wk-split { display: block; height: 22px; padding: 3px; border-radius: 11px; background: #333; }
.wk-split > i, .wk-stack > i { display: block; width: 100%; height: 100%; border-radius: 8px; }
.wk-leg { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 8px 14px; font-size: 12.5px; color: var(--fg-soft); }
.wk-leg span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wk-leg i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.wk-leg em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-leg b { margin-left: auto; font-family: var(--display); font-size: 15px; white-space: nowrap; }
.wk-sw-logo { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.wk-bars { display: flex; align-items: flex-end; gap: 8px; height: 128px; }
.wk-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; min-width: 0; }
.wk-stack { display: block; width: 100%; padding: 3px; border-radius: 9px; background: #333; }
.wk-stack > i { border-radius: 6px; }
.wk-stack.wk-none { height: 3px; background: var(--tile-2); border-radius: 2px; }
.wk-col small { text-align: center; font-family: var(--display); font-weight: 700; font-size: 12px; color: var(--muted); }
.wk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wk-cal > b { font-family: var(--display); font-weight: 700; font-size: 12px; color: #6b6b6b; text-align: center; }
.wk-cal > button, .wk-cal > .e { aspect-ratio: 1; border-radius: 10px; background: #141414; border: 0; position: relative; padding: 0; color: #6b6b6b; font: 700 12px/1 var(--display); }
.wk-cal > .e { background: none; }
.wk-cal > button span { position: absolute; left: 5px; top: 4px; }
.wk-cal > button.f { color: #3a3a3a; }
.wk-cal > button.today { box-shadow: inset 0 0 0 2px var(--gold); }
.wk-cal > button.sel { outline: 2px solid #fff; outline-offset: 1px; }
.wk-cal > button img { position: absolute; width: 44%; height: 44%; right: 3px; bottom: 3px; border-radius: 50%; box-shadow: 0 0 0 1.5px #111; }
.wk-cal > button.co { background: #1d1d1d; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: var(--fg-soft); }
.wk-cal > button.co.today { box-shadow: inset 0 0 0 2px var(--gold); }
.wk-cal > button.co img { width: 52%; height: 52%; right: auto; bottom: auto; left: 56%; top: 60%; transform: translate(-50%, -50%); box-shadow: none; }
.wk-colors-link { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.wk-colors-link svg { width: 14px; height: 14px; }
/* couleurs */
.wk-crows { display: flex; flex-direction: column; }
.wk-crow { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px; cursor: pointer; }
.wk-crow .wk-ico { width: 34px; height: 34px; border-radius: 11px; }
.wk-crow .wk-logo { border-radius: 50%; }
.wk-crow .wk-ico svg { width: 18px; height: 18px; }
.wk-cv { margin-left: auto; color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.wk-cv svg { width: 14px; height: 14px; }
.wk-color { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }
/* records automatiques */
.wk-recs { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 8px; }
.wk-hex { width: 96px; height: 106px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #e6cf86, var(--gold) 55%, #a8862f); display: grid; place-items: center; color: #111; margin: 4px 0 8px; }
.wk-hex svg { width: 42px; height: 42px; stroke-width: 2; }
.wk-recs h2 { font-family: var(--display); font-weight: 800; font-size: 30px; text-transform: uppercase; margin: 6px 0 0; line-height: 1; }
.wk-vs { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.wk-vs s { font-family: var(--display); font-weight: 800; font-size: 30px; color: var(--muted); }
.wk-vs b { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1; color: var(--gold); }
.wk-vs svg { width: 20px; height: 20px; color: var(--muted); }
.wk-gain { color: var(--ok); font-weight: 600; margin: 0; }
.wk-recs .sheet-actions { width: 100%; flex-direction: column; margin-top: 12px; }
.wk-recs .sheet-actions .btn { width: 100%; }
/* charge vue par le coach */
.wk-load { gap: 6px; margin-bottom: 10px; }
.wk-load-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wk-load .val small { font-family: var(--font); font-size: 13px; color: var(--muted); font-weight: 600; }
.pill.lv-ok { color: var(--ok); border-color: rgba(127, 191, 146, .45); background: rgba(127, 191, 146, .12); }
.pill.lv-low { color: var(--fg-soft); }
.pill.lv-high { color: var(--danger); border-color: rgba(226, 128, 111, .45); background: var(--danger-wash); }
.wk-gauge { position: relative; height: 14px; border-radius: 8px; background: linear-gradient(90deg, #3a3a3a 0 40%, #6fd39a 40% 65%, #e2806f 65%); margin: 10px 0 4px; }
.wk-gauge i { position: absolute; top: -6px; width: 6px; height: 26px; margin-left: -3px; border-radius: 3px; background: #fff; box-shadow: 0 0 0 3px var(--tile); }
.wk-gauge-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.wk-sec .tip { margin-bottom: 10px; }
.wk-row .main { min-width: 0; }
.wk-row .t2 { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.wk-crow .nm { flex: 1; min-width: 0; }
.wk-cv { white-space: nowrap; flex: none; }
/* calendrier : cases « Jours actifs » et « Plus longue série » compactes */
.wk-cstats { gap: 8px; }
.wk-cstats .stat { padding: 10px 12px; gap: 2px; border-radius: 16px; }
.wk-cstats .stat .lbl { font-size: 11px; }
.wk-cstats .stat .val { font-size: 24px; line-height: 1.05; }
.wk-sheet .wk-cstats .stat .val small { font-size: 13px; }
.wk-cstats .stat .sub { font-size: 11px; }

/* ==========================================================================
   v3 : 5 onglets client (Accueil · Séances · Entraînement · Progrès · Profil)
   ========================================================================== */
.tabbar button { padding: 0 10px; }
.tabbar button[aria-current="page"] { padding: 0 14px; }
@media (max-width: 374px) {
  .tabbar { left: 10px; right: 10px; padding: 0 4px; }
  .tabbar button { padding: 0 8px; }
  .tabbar button[aria-current="page"] { padding: 0 11px; font-size: 13px; }
}
.wk-h3 { margin: 18px 2px 10px; font-family: var(--display); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .01em; }
.wk-sec > .wk-h3 + .wk-grp { margin-top: 0; }
.fold-progs .progs { margin-top: 4px; }
/* Profil */
.pf-head { display: flex; align-items: center; gap: 14px; background: var(--tile); border-radius: 24px; padding: 14px 16px; }
.pf-head .avatar { width: 56px; height: 56px; background: var(--gold); color: #111; font-size: 22px; flex: none; }
.pf-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.pf-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.pf-list { gap: 0 !important; background: var(--tile); border-radius: 22px; overflow: hidden; }
main.view .pf-list > .row, main.view .pf-list > .row:first-child { background: none; border-radius: 0; border-bottom: 1px solid var(--line); padding: 11px 16px; }
main.view .pf-list > .row:last-child { border-bottom: 0; }
.pf-row { width: 100%; text-align: left; font: inherit; color: inherit; text-decoration: none; }
.pf-row .main { min-width: 0; }
.pf-row .t2 { white-space: normal; line-height: 1.35; }
.pf-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--tile-2); color: var(--gold); display: grid; place-items: center; flex: none; }
.pf-ic svg { width: 19px; height: 19px; }
.pf-r { margin-left: auto; color: var(--muted); display: flex; align-items: center; gap: 6px; flex: none; }
.pf-r svg { width: 16px; height: 16px; }
.pf-code { font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .04em; color: var(--gold); }
.pf-state { font-size: 13px; font-weight: 600; color: var(--gold); }
.pf-state.on { color: var(--ok); }

/* ---------- Accueil client v3 ---------- */
.hm-lbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hm-lbl svg { width: 15px; height: 15px; }
.hm-lbl.gold { color: var(--gold); }
.hm-t { font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.05; text-transform: uppercase; }
.hm-sub { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.hm-chal, .hm-prog { display: flex; align-items: center; gap: 14px; background: var(--tile); border-radius: var(--r-lg); padding: 14px 18px; cursor: pointer; }
.hm-chal .main, .hm-prog .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hm-chal > svg { width: 20px; height: 20px; color: var(--fg-soft); flex: none; }
.hm-bar { display: block; height: 10px; border-radius: 6px; background: #2a2a2a; overflow: hidden; margin-top: 4px; }
.hm-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold), #dcc173); }
.hm-next { background: linear-gradient(150deg, #dcc173, var(--gold) 55%, #b08f36); color: #111; border-radius: var(--r-lg); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.hm-next .hm-lbl { color: rgba(17, 17, 17, .62); }
.hm-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hm-day { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; margin-top: 4px; }
.hm-time { font-family: var(--display); font-weight: 800; font-size: 84px; line-height: .9; letter-spacing: -.01em; }
.hm-pill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; background: #111; color: var(--gold); border: 0; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; flex: none; }
.hm-pill svg { width: 15px; height: 15px; stroke-width: 2.4; }
span.hm-pill { font-size: 13px; letter-spacing: .04em; }
.hm-meta { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(17, 17, 17, .78); margin-top: 4px; }
.hm-meta svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: rgba(17, 17, 17, .6); }
.hm-next .quote { margin-top: 8px; background: rgba(17, 17, 17, .12); color: #111; }
.hm-next .quote b { color: #111; }
.hm-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hm-duo.one { grid-template-columns: 1fr; }
.hm-tile { background: var(--tile); border-radius: var(--r-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; text-align: left; border: 0; color: inherit; font: inherit; }
.hm-big { font-family: var(--display); font-weight: 800; font-size: 46px; line-height: .95; text-transform: uppercase; }
.hm-big.gold { color: var(--gold); }
.hm-big small { font-size: 18px; color: var(--muted); margin-left: 4px; }
.hm-play { width: 56px; height: 56px; border-radius: 50%; background: var(--gold); color: #111; display: grid; place-items: center; flex: none; }
.hm-play svg { width: 28px; height: 28px; }
main.view.view-home { gap: 12px; }
.hm-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; padding: 9px 12px; border-radius: 14px; background: rgba(17, 17, 17, .1); font-size: 12.5px; line-height: 1.4; color: #111; }
.hm-note svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: rgba(17, 17, 17, .65); }

/* ---------- Barre du bas : icône et libellé centrés sur la même ligne ---------- */
.tabbar button { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.tabbar button > span:first-child { display: flex; align-items: center; justify-content: center; line-height: 0; }
.tabbar button svg { display: block; }
.tabbar button[aria-current="page"] > span:last-child { display: block; line-height: 1; }
/* Séances client : « + de séances » sous la liste */
.sess-more { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; }
/* Légende : le logo (séances avec le coach) a exactement la taille des pastilles de couleur */
.wk-leg i, .wk-sw-logo { width: 14px; height: 14px; flex: none; }
.wk-leg i { border-radius: 4px; }
.wk-sw-logo { border-radius: 50%; display: block; object-fit: cover; }
.stat .sub.wk-one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 374px) { .stat .sub.wk-one { font-size: 11px; letter-spacing: -.01em; } }
/* Séance offerte (parrainage) */
.offer-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--gold-wash); color: var(--gold); font-family: var(--display); font-weight: 700; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }
.offer-tag svg { width: 11px; height: 11px; }
/* Carnet : séances offertes (parrainage), sous les cases du carnet */
.offer-sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.offer-sec .t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font-family: var(--display); font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.offer-sec .t small { font-family: var(--font); font-weight: 600; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.box.offer { background: var(--paper); border: 0; color: var(--paper-ink); box-shadow: inset 0 0 0 2px var(--gold); overflow: hidden; }
.box.offer img { position: absolute; inset: 14% 6% 24%; width: 88%; height: 62%; object-fit: contain; }
.box.offer .d { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 10.5px; font-weight: 600; color: #8a8576; font-variant-numeric: tabular-nums; }
.box.offer .rib { position: absolute; top: 0; left: 0; right: 0; height: 17px; background: var(--gold); color: #111; font: 800 10.5px/17px var(--display); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.box.offer.coachv { background: var(--tile-2); color: var(--fg-soft); }
.box.offer .v { position: absolute; top: 40%; left: 0; right: 0; text-align: center; font-size: 10.5px; }
/* Choix du sport : 2 lignes de 4 (Course · Vélo · Natation · Renfo / Hyrox · Marche · Yoga · Autre) sur tous les téléphones */
.chips[data-for="wk-sport"] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.chips[data-for="wk-sport"] .chip { justify-content: center; text-align: center; padding-left: 4px; padding-right: 4px; min-width: 0; white-space: nowrap; }
/* Story : disciplines à afficher sous la distance totale */
.st-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 2px 12px 40px; border-bottom: 1px solid var(--line); }
.st-sub .tiny { width: 100%; margin-bottom: -2px; }
.st-sub .chip { min-height: 34px; padding: 0 12px; font-size: 13px; }
/* Fiche d'un record : le chiffre (ex. « 16 kg ») ne touche plus la ligne du dessous */
.rec-hero { gap: 4px; }
.rec-hero .val { line-height: 1.1; padding-bottom: 2px; }
/* Fiche d'un record : historique des mesures replié (menu déroulant) */
.rec-fold { background: var(--tile); border-radius: 20px; overflow: hidden; }
.rec-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.rec-fold > summary::-webkit-details-marker { display: none; }
.rec-fold-r { display: flex; align-items: center; gap: 8px; color: var(--muted); font-family: var(--font); font-size: 13px; font-weight: 600; text-transform: none; }
.rec-fold-r b { font-family: var(--display); font-size: 20px; color: var(--fg); }
.rec-fold-r svg { width: 18px; height: 18px; transform: rotate(90deg); transition: transform .2s; }
.rec-fold[open] .rec-fold-r svg { transform: rotate(-90deg); }
.rec-fold .list { padding: 0 16px 6px; }
.rec-fold .list > .row { background: none; border-radius: 0; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rec-fold .list > .row:last-child { border-bottom: 0; }
/* Titre du défi du mois : toujours sur une seule ligne */
.chal-t, .hm-chal .hm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pastille « La grande » : toujours sur une seule ligne, c'est le nom de l'info qui passe à la ligne si besoin */
.st-opt .nm .nm-t { min-width: 0; }
.st-opt .nm em { white-space: nowrap; flex: none; }

/* ---------- Fiche client coach (v3) : en-tête compact + 4 onglets ---------- */
.client-head.ch-v3 { gap: 12px; }
.client-head.ch-v3 .avatar { width: 52px; height: 52px; flex: none; }
.client-head.ch-v3 .ch-id { flex: 1; min-width: 0; }
.client-head.ch-v3 h2 { font-size: 22px; line-height: 1.05; overflow-wrap: anywhere; }
.client-head.ch-v3 p { font-size: 12.5px; }
.ch-quick { display: flex; gap: 7px; flex: none; }
.ch-quick a, .ch-quick button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--tile); color: var(--gold); display: grid; place-items: center; text-decoration: none; padding: 0; cursor: pointer; }
.ch-quick svg { width: 19px; height: 19px; }
main.view-client { gap: 14px; }
main.view-client .cli-panel > section > .h2:first-child, main.view-client .cli-panel > section:first-child { margin-top: 0; }
.cli-goal { display: flex; align-items: center; gap: 10px; background: var(--tile); border-radius: 16px; padding: 10px 14px; margin-top: -2px; }
.cli-goal > svg { width: 18px; height: 18px; color: var(--gold); flex: none; }
.cli-goal .main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cli-goal .t { font-weight: 700; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-goal .n { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cli-goal b { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--gold); white-space: nowrap; }
.cli-goal.past b { color: var(--muted); font-size: 14px; }
.cli-tabs { display: flex; gap: 4px; background: var(--tile); border-radius: 16px; padding: 4px; position: sticky; top: calc(env(safe-area-inset-top) + 6px); z-index: 5; box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); }
.cli-tabs button { flex: 1; min-width: 0; position: relative; border: 0; background: none; color: #8b8b8b; border-radius: 12px; padding: 10px 0; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.cli-tabs button[aria-selected="true"] { background: #fff; color: #111; }
.cli-tabs .cli-dot { position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.cli-panel { display: flex; flex-direction: column; gap: 28px; padding-top: 6px; }
.cli-panel[hidden] { display: none; }
.cli-panel .sess-more { align-self: center; margin-top: 10px; }
.pay-list { border-top: 1px solid var(--line); }
.cli-emarg { width: 100%; margin-top: 14px; }
.list + .wk-links { margin-top: 14px; }

/* ---------- Facturation (v3) : Ce mois · Chiffres · Outils ---------- */
main.view-billing { gap: 14px; }
.bill-hero { background: linear-gradient(150deg, #dcc173, var(--gold) 55%, #b08f36); color: #111; border-radius: 24px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; }
.bill-hero .bh-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bill-hero .lbl { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(17,17,17,.62); }
.bill-hero .bh-goal { font-family: var(--display); font-weight: 800; font-size: 14px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bill-hero .bh-goal svg { width: 15px; height: 15px; }
.bill-hero .bh-val { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bill-hero .bh-val b { font-family: var(--display); font-weight: 800; font-size: 56px; line-height: .95; font-variant-numeric: tabular-nums; }
.bill-hero .bh-val span { font-family: var(--display); font-weight: 800; font-size: 16px; text-transform: uppercase; }
.bill-hero .bh-bar { height: 10px; border-radius: 999px; background: rgba(17,17,17,.16); overflow: hidden; display: flex; margin-top: 4px; }
.bill-hero .bh-bar .d { background: #111; }
.bill-hero .bh-bar .p { background: repeating-linear-gradient(135deg, rgba(17,17,17,.45) 0 5px, rgba(17,17,17,.2) 5px 10px); }
.bill-hero .bh-s { font-size: 12.5px; font-weight: 600; color: rgba(17,17,17,.78); }
.bill-k3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bill-k3 .stat { padding: 10px 11px; gap: 3px; }
.bill-k3 .stat .lbl { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-k3 .stat .val { font-size: 21px; white-space: nowrap; }
.bill-k3 .stat .sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bill-k3 .stat.warn .val { color: var(--danger, #e2806f); }
.sched { background: var(--tile); border-radius: 20px; padding: 2px 14px; }
.sched-r { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sched-r:last-child { border-bottom: 0; }
.sched-r .sm { width: 42px; flex: none; font-family: var(--display); font-weight: 800; font-size: 15px; text-transform: uppercase; color: var(--muted); }
.sched-r .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; background: none; border: 0; color: inherit; text-align: left; padding: 0; cursor: pointer; font: inherit; }
.sched-r .t1 { font-size: 14px; font-weight: 600; }
.sched-r .t2 { font-size: 11.5px; color: var(--muted); }
.sched-r .sr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.sched-r .sr b { font-family: var(--display); font-weight: 800; font-size: 18px; white-space: nowrap; }
.sched-r .sr .text-btn { font-size: 12px; padding: 0; }
.bill-chart .bc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.bill-chart .bc-top .h2 { margin: 0; }
.bc-tog { display: flex; background: var(--tile-2); border-radius: 10px; padding: 3px; flex: none; }
.bc-tog button { border: 0; background: none; color: #8b8b8b; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; cursor: pointer; }
.bc-tog button[aria-pressed="true"] { background: #fff; color: #111; }
.bc-v[hidden] { display: none; }
.bc-leg { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.bc-leg span { display: inline-flex; align-items: center; gap: 6px; }
.bc-leg i { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--gold); }
.bc-leg i.d { border-top: 2px dashed #6b6b6b; }
.ch-prev { fill: none; stroke: #6b6b6b; stroke-width: 1.6; stroke-dasharray: 4 4; }
.bill-goalrow b { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--gold); white-space: nowrap; }
@media (max-width: 350px) { .bill-k3 .stat .val { font-size: 18px; } .bill-hero .bh-val b { font-size: 46px; } }
.bill-due .list { gap: 8px; border-top: 0; }
.bill-due .duerow { background: var(--tile); border: 0; border-radius: 18px; padding: 12px 14px; }
.bill-due .duerow.late { box-shadow: inset 0 0 0 1.5px rgba(226, 128, 111, 0.5); }
.bill-due .duerow .amt { font-family: var(--display); font-weight: 800; font-size: 19px; }

/* ---------- Paniers repas (onglet Déplacements) ---------- */
.fold-meal { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #111; background: var(--gold); border-radius: 999px; padding: 2px 9px 2px 7px; white-space: nowrap; }
.fold-meal svg { width: 13px; height: 13px; stroke-width: 2.2; }
.fold-meal.miss { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.meal-list { margin-top: 8px; }
.meal-row .meal-ic { width: 34px; height: 34px; border-radius: 11px; background: #2e2a1c; color: var(--gold); display: grid; place-items: center; flex: none; }
.meal-row .meal-ic svg { width: 18px; height: 18px; }
.meal-ctx { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #9a927c; background: #17140c; border: 1.5px solid #3a3424; border-radius: 14px; padding: 9px 12px; }
.meal-ctx svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--gold); }
.meal-ctx b { color: var(--fg); font-weight: 600; }
.meal-photo { width: 100%; border-radius: 16px; display: flex; align-items: center; gap: 12px; font: inherit; font-size: 14px; font-weight: 600; }
.meal-photo.add { height: 76px; justify-content: center; border: 1.5px dashed #6b5a2a; background: #17140c; color: var(--gold); cursor: pointer; }
.meal-photo.add svg { width: 20px; height: 20px; }
.meal-photo.ok { padding: 10px 12px; border: 1.5px solid #333; background: #1d1d1d; color: var(--fg); }
.meal-photo .th { width: 56px; height: 70px; border-radius: 9px; background: repeating-linear-gradient(180deg, #f4f1ea 0 7px, #e5e0d3 7px 9px); flex: none; overflow: hidden; display: block; }
.meal-photo .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.meal-photo-bts { display: flex; gap: 16px; margin-top: 4px; }
.meal-photo-bts .text-btn { padding: 0; font-size: 13px; }
.meal-calc { border-radius: 16px; background: var(--tile); padding: 11px 14px; font-size: 13px; color: #cfcfcf; }
.meal-calc[hidden] { display: none; }
.meal-calc .r { display: flex; justify-content: space-between; padding: 3px 0; }
.meal-calc .t { border-top: 1px solid #2a2a2a; margin-top: 4px; padding-top: 7px; font-weight: 700; color: var(--fg); align-items: baseline; }
.meal-calc .t b { font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--gold); }
.fold-trip .fold-t { white-space: nowrap; }
.fold-trip .fold-r { gap: 8px; flex: none; }

/* ---------- Courbe vivante d'un record ---------- */
.rec-live { position: relative; padding: 10px 8px 6px; }
.rec-live .rl { display: block; overflow: visible; }
.rl-ref { stroke: #2c2a26; stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.rl-y, .rl-x { font-family: var(--display); font-weight: 700; font-size: 11px; fill: var(--muted); }
.rl-line { fill: none; stroke: #e3c56f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rl-halo { fill: var(--gold); opacity: 0; }
.rl-pt { cursor: pointer; outline: none; }
.rl-hit { fill: transparent; }
.rl-dot { fill: #151515; stroke: #e3c56f; stroke-width: 2.5; }
.rl-pt.best .rl-dot { fill: #e3c56f; }
.rl-pt.on .rl-dot, .rl-pt:focus-visible .rl-dot { stroke: #fff; }
.rl-pill rect { fill: #e3c56f; }
.rl-pill text { font-family: var(--display); font-weight: 800; font-size: 12px; fill: #111; letter-spacing: .04em; }
.rec-tip { position: absolute; pointer-events: none; background: #f4f1ea; color: #111; border-radius: 12px; padding: 6px 10px; font-size: 12px; font-weight: 600; transform: translate(-50%, -115%); white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.5); z-index: 2; }
.rec-tip b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; }
.rec-tip .up { color: #2f7d4f; } .rec-tip .down { color: #b4533f; }
.rec-hint { margin: -6px 0 0; text-align: center; font-size: 11.5px; color: var(--muted); }
/* Aperçu des records : sans courbe, évolution sur une seule ligne */
.rec-row .t2.rec-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Badge : médaille qui tourne, se penche et se retourne ---------- */
.bs-stage { position: relative; width: 190px; height: 196px; display: grid; place-items: center; margin-top: 2px; }
.bs-tilt { perspective: 700px; width: 172px; height: 172px; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; outline: none; }
.bs-tilt:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 24px; }
.bs-coin { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.bs-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: grid; place-items: center; }
.bs-face svg { width: 172px; height: 172px; filter: drop-shadow(0 16px 22px rgba(0,0,0,.55)); }
.bs-back { transform: rotateY(180deg); }
.bs-shine { position: absolute; inset: 0; pointer-events: none; clip-path: polygon(50% 4%, 92% 27%, 92% 73%, 50% 96%, 8% 73%, 8% 27%); background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 250% 100%; background-position: 160% 0; mix-blend-mode: soft-light; }
.bs-back .bk { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; padding: 0 34px; color: #1d1708; }
.bs-back.locked .bk { color: #a59f90; }
.bk-k { font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
.bk-d { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; text-shadow: 0 1px 0 rgba(255,255,255,.25); }
.bk-t { font-size: 10.5px; font-weight: 700; opacity: .7; margin-top: 4px; line-height: 1.2; }
.bs-floor { position: absolute; bottom: -2px; left: 50%; width: 120px; height: 16px; margin-left: -60px; border-radius: 50%; background: radial-gradient(rgba(201,168,76,.32), transparent 70%); }
.badge-sheet:not(.ok) .bs-floor { background: radial-gradient(rgba(255,255,255,.08), transparent 70%); }
.bs-hint { margin: -6px 0 0; font-size: 11.5px; color: var(--muted); }
.bs-when { color: var(--muted); font-weight: 500; }

/* ---------- Badges : familles et raretés ---------- */
.bdg-fam + .bdg-fam { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line, #232323); }
.bdg-fh { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-soft); }
.bdg-fh span:last-child { font-family: inherit; font-size: 13px; color: var(--muted); letter-spacing: 0; }
.bdg-fh b { color: var(--gold); }
.bdg.ok.tier-bronze .hexm { filter: drop-shadow(0 0 10px rgba(192, 122, 69, .35)); }
.bdg.ok.tier-argent .hexm { filter: drop-shadow(0 0 10px rgba(200, 205, 210, .3)); }
.bdg.ok.tier-legende .hexm { filter: drop-shadow(0 0 12px rgba(227, 197, 111, .5)); }
.bdg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin: 16px 0 2px; font-size: 11px; color: var(--muted); }
.bdg-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.t-bronze { background: linear-gradient(135deg, #efc29a, #7f4a24); }
.t-argent { background: linear-gradient(135deg, #f4f6f8, #7c8288); }
.t-or { background: linear-gradient(135deg, #e6cf86, #a8862f); }
.t-legende { background: #111; box-shadow: inset 0 0 0 1.5px #e3c56f; }
.bs-tier { display: inline-block; padding: 4px 12px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; border: 1px solid currentColor; }
.tier-bronze .bs-tier { color: #d79563; }
.tier-argent .bs-tier { color: #c9ced3; }
.tier-or .bs-tier { color: var(--gold); }
.tier-legende .bs-tier { color: #111; background: linear-gradient(135deg, #e6cf86, #c9a84c); border-color: transparent; }
.badge-sheet.ok.tier-bronze .hexm { filter: drop-shadow(0 0 22px rgba(192, 122, 69, .45)); }
.badge-sheet.ok.tier-argent .hexm { filter: drop-shadow(0 0 22px rgba(210, 214, 218, .35)); }
.badge-sheet.ok.tier-legende .hexm { filter: drop-shadow(0 0 26px rgba(227, 197, 111, .6)); }
.badge-sheet.tier-bronze .bs-num b { color: #d79563; }
.badge-sheet.tier-argent .bs-num b { color: #d5d9dd; }
.badge-sheet.ok.tier-bronze .bs-how { color: #d79563; }
.badge-sheet.ok.tier-argent .bs-how { color: #d5d9dd; }
.tier-bronze .bs-back:not(.locked) .bk { color: #2a1608; }
.tier-argent .bs-back:not(.locked) .bk { color: #1c1f22; }
.tier-legende .bs-back:not(.locked) .bk { color: #e3c56f; }
.tier-legende .bs-back:not(.locked) .bk-d { text-shadow: none; }
.cg-btn { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 1.5px solid #3a3a3a; color: var(--muted); cursor: pointer; padding: 0; }
.cg-btn svg { width: 17px; height: 17px; }
.cg-btn.on { background: var(--gold); border-color: var(--gold); color: #111; }
.cli-goal.won { box-shadow: inset 0 0 0 1px rgba(201, 168, 76, .45); }
.cg-count { margin: 6px 2px 0; }
.bdg-fam .bdg-t { font-size: 10.5px; overflow-wrap: normal; word-break: normal; -webkit-hyphens: auto; hyphens: auto; }
.badge-sheet.ok.tier-bronze .bs-floor { background: radial-gradient(rgba(192,122,69,.32), transparent 70%); }
.badge-sheet.ok.tier-argent .bs-floor { background: radial-gradient(rgba(210,214,218,.25), transparent 70%); }
.bdg-fh { cursor: pointer; margin: 0; padding: 6px 0; -webkit-tap-highlight-color: transparent; }
.bdg-fh[aria-expanded="true"] { margin-bottom: 10px; }
.bdg-fr { display: inline-flex; align-items: center; gap: 8px; }
.bdg-fh .fold-chev { width: 16px; height: 16px; color: var(--muted); transition: transform .2s; }
.bdg-fh[aria-expanded="true"] .fold-chev { transform: rotate(90deg); }
.bdg-fam + .bdg-fam { margin-top: 8px; padding-top: 8px; }
.badges4[hidden] { display: none; }

/* ---------- Bienvenue : stories de première connexion (avant le contrat) ---------- */
.wl { position: relative; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: #050505; color: #f3f1ec; font-family: 'Montserrat', system-ui, sans-serif; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.wl-bars { position: absolute; top: calc(var(--safe-top) + 12px); left: 14px; right: 14px; display: flex; gap: 4px; z-index: 10; }
.wl-bars span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.22); overflow: hidden; }
.wl-bars i { display: block; height: 100%; width: 0; background: #f3f1ec; }
.wl-who { position: absolute; top: calc(var(--safe-top) + 26px); left: 14px; z-index: 10; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.wl-who img { width: 28px; height: 28px; border-radius: 50%; }
.wl-who small { color: #8a857b; font-weight: 500; font-size: 12px; }
.wl-skip { position: absolute; top: calc(var(--safe-top) + 24px); right: 10px; z-index: 12; background: none; border: 0; color: #8a857b; font: 600 13px 'Montserrat', system-ui, sans-serif; padding: 8px; cursor: pointer; }
.wl-pause { position: absolute; top: calc(var(--safe-top) + 64px); right: 18px; z-index: 10; font-size: 11px; font-weight: 600; color: #c9c5bc; opacity: 0; transition: opacity .2s; }
.wl.paused .wl-pause { opacity: 1; }
.wl.paused *, .wl.paused *::before, .wl.paused *::after { animation-play-state: paused !important; }
.wl-st { position: absolute; inset: 0; padding: calc(var(--safe-top) + 92px) 26px calc(var(--safe-bottom) + 110px); display: flex; flex-direction: column; opacity: 0; transition: opacity .4s ease; max-width: 560px; margin: 0 auto; }
.wl-st.cur { opacity: 1; }
.wl::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 55% at 50% 30%, rgba(201,168,76,.24), transparent 70%); pointer-events: none; }
.wl-k { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.wl-st h2 { margin: 6px 0 8px; font-size: 24px; line-height: 1.12; font-weight: 700; letter-spacing: -.02em; font-family: inherit; text-transform: none; }
.wl-p { margin: 0; color: #c9c5bc; font-size: 14px; line-height: 1.5; }
.wl-hello { font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1.02; margin: 26px 0 16px; overflow-wrap: anywhere; }
.wl-hello span { color: var(--gold); }
.wl-vis { margin: auto 0; position: relative; }
.wl-pad { background: #fff; border-radius: 16px; aspect-ratio: 1.5; position: relative; }
.wl-pad svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wl-sig { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.wl-st.cur .wl-sig { transition: stroke-dashoffset 1.8s ease .4s; stroke-dashoffset: 0; }
.wl-base { position: absolute; left: 14px; right: 14px; bottom: 24px; border-top: 1.5px solid var(--gold); }
.wl-stamp { position: absolute; right: -6px; top: -12px; background: var(--gold); color: #111; border-radius: 999px; padding: 5px 12px; font: 700 12px 'Montserrat', system-ui, sans-serif; transform: scale(0); }
.wl-st.cur .wl-stamp { transition: transform .4s cubic-bezier(.2,.9,.3,1.4) 2.3s; transform: scale(1); }
.wl-chart { border: 1px solid #333; border-radius: 16px; padding: 14px; }
.wl-chart svg { width: 100%; height: auto; display: block; }
.wl-lbl { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.wl-lbl span { font-size: 12px; color: #8a857b; }
.wl-lbl b { font-family: var(--display); font-weight: 800; font-size: 26px; color: var(--gold); }
.wl-ln { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; }
.wl-ar { fill: url(#wlFg); opacity: 0; }
.wl-dot { fill: var(--gold); transform: scale(0); transform-origin: 268px 22px; transform-box: view-box; }
.wl-st.cur .wl-ln { transition: stroke-dashoffset 1.6s ease .3s; stroke-dashoffset: 0; }
.wl-st.cur .wl-ar { transition: opacity .8s ease 1.4s; opacity: 1; }
.wl-st.cur .wl-dot { transition: transform .35s cubic-bezier(.2,.9,.3,1.5) 1.8s; transform: scale(1); }
.wl-center { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-38%); display: grid; place-items: center; }
.wl-medal { position: relative; width: min(52vw, 220px); aspect-ratio: 1; }
.wl-medal::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,168,76,.45), transparent); opacity: 0; }
.wl-hex { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 14px 22px rgba(0,0,0,.6)); }
.wl-shine { position: absolute; inset: 0; clip-path: polygon(50% 6%, 88% 28%, 88% 72%, 50% 94%, 12% 72%, 12% 28%); background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: soft-light; }
.wl-st.cur .wl-medal { animation: wlPop .7s cubic-bezier(.2,.9,.3,1.3) both .25s; }
.wl-st.cur .wl-medal::before { animation: wlHalo 2.4s ease-out .5s both; }
.wl-st.cur .wl-shine { animation: wlShine 1.2s ease .9s both; }
@keyframes wlPop { from { transform: scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wlHalo { 0% { opacity: 0; transform: scale(.7); } 40% { opacity: 1; } 100% { opacity: .55; transform: none; } }
@keyframes wlShine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.wl-tap { position: absolute; top: calc(var(--safe-top) + 60px); bottom: calc(var(--safe-bottom) + 96px); z-index: 8; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wl-l { left: 0; width: 35%; } .wl-r { right: 0; width: 65%; }
.wl-tap:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.wl-tip { position: absolute; left: 16px; right: 16px; bottom: calc(var(--safe-bottom) + 34px); text-align: center; font-size: 11.5px; color: #8a857b; z-index: 9; transition: opacity .3s; }
.wl-end { position: absolute; left: 24px; right: 24px; bottom: calc(var(--safe-bottom) + 26px); z-index: 9; max-width: 512px; margin: 0 auto; opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; pointer-events: none; }
.wl-end.in { opacity: 1; transform: none; pointer-events: auto; }
.wl-go { width: 100%; min-height: 52px; border: 0; border-radius: 14px; background: var(--gold); color: #111; font: 700 15px 'Montserrat', system-ui, sans-serif; cursor: pointer; }
.wl-go:focus-visible, .wl-skip:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wl *, .wl *::before { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
/* Petits écrans : la pastille de l'onglet actif (« Entraînements ») tient dans la barre */
@media (max-width: 400px) {
  .tabbar button { padding: 0 10px; }
  .tabbar button[aria-current="page"] { padding: 0 13px; font-size: 15px; letter-spacing: .03em; }
}

/* Carnet : annulation décomptée, à signer puis signée par le client */
.box.late small { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .85; }
.box.late-s { overflow: hidden; box-shadow: inset 0 0 0 2px rgba(226, 128, 111, .75); }
.box.late-s img { inset: 31% 8% 26%; width: 84%; height: 43%; }
.box.late-s .rib { position: absolute; top: 0; left: 0; right: 0; height: 17px; background: var(--danger); color: #fff; font: 800 10.5px/17px var(--display); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.sign-call.late-call h2 { color: var(--danger); }

/* Fiche client (coach) : badges presque gagnés */
.cb-count { font-family: var(--body, 'Montserrat', sans-serif); font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; text-transform: none; margin-left: 4px; }
.cb-count b { color: var(--gold); }
.cb-near { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.cb-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cb-row .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cb-row .t1 { font-weight: 700; font-size: 14px; }
.cb-row .t2 { font-size: 12px; color: var(--muted); }
.cb-med { flex: none; background: none; border: 0; padding: 0; cursor: pointer; }
.cb-med svg { width: 46px; height: 46px; }
.cb-bar { display: block; height: 5px; border-radius: 3px; background: #2a2a2a; overflow: hidden; margin-top: 3px; }
.cb-bar i { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.cb-row .btn-small { flex: none; }

/* Fiche « Contacter Anthony » : portrait rond cerclé d'or à la place du titre */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ct-head { justify-content: flex-end; position: relative; z-index: 2; }
.ct-body { padding-top: 0; }
.ct-coach { pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; margin: -40px 0 4px; }
.ct-ring { width: 132px; height: 132px; border-radius: 50%; padding: 3px; background: linear-gradient(145deg, #e6cf86, #a8862f); box-shadow: 0 0 18px 2px rgba(227,197,111,.38); flex: none; }
.ct-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #151515; }
.ct-coach h3 { margin: 4px 0 0; font: 800 28px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; color: #f3f1ec; }
.ct-coach .small { font-size: 12.5px; }
.ct-num { font-size: 24px; letter-spacing: .04em; margin: 4px 0 0; text-align: center; }

/* Écran d'accueil avant les stories : logo au centre qui respire, puis « C'est parti ! » l'envoie
   à sa place en haut à gauche de la première story (le logo des stories est masqué pendant ce temps) */
.wl-in-lg { position: absolute; left: 0; top: 0; z-index: 11; width: 128px; height: 128px; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.wl-in-lg img { display: block; width: 100%; height: 100%; border-radius: 50%; opacity: 0; transform: scale(.82); transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,.84,.24,1); }
.wl-in-lg::before { content: ""; position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(closest-side, rgba(201,168,76,.34), transparent); opacity: 0; transition: opacity .4s; }
.wl-shown .wl-in-lg img { opacity: 1; transform: none; }
.wl-ready:not(.wl-going) .wl-in-lg img { animation: wlBreathe 3.2s ease-in-out infinite; }
.wl-ready:not(.wl-going) .wl-in-lg::before { animation: wlHaloIn 3.2s ease-in-out infinite; }
@keyframes wlBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes wlHaloIn { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.wl-in-go { position: absolute; left: 24px; right: 24px; bottom: calc(var(--safe-bottom) + 26px); z-index: 12; max-width: 512px; margin: 0 auto; min-height: 52px; border: 0; border-radius: 14px; background: var(--gold); color: #111; font: 700 15px 'Montserrat', system-ui, sans-serif; cursor: pointer; box-shadow: 0 0 14px 1px rgba(227,197,111,.42); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.24,1); }
.wl-ready .wl-in-go { opacity: 1; transform: none; pointer-events: auto; }
.wl-going .wl-in-go { opacity: 0; transform: translateY(10px); pointer-events: none; transition-duration: .3s; }
.wl-in-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wl-bars, .wl-who span, .wl-skip { transition: opacity .45s ease; }
.wl-intro .wl-bars, .wl-intro .wl-who span, .wl-intro .wl-skip, .wl-intro .wl-tip { opacity: 0; pointer-events: none; }
.wl-intro .wl-who img { visibility: hidden; }
.wl-intro .wl-st, .wl-intro .wl-tap { visibility: hidden; }
.wl-going .wl-bars, .wl-going .wl-who span, .wl-going .wl-skip { opacity: 1; transition-delay: .6s; }
/* Démo uniquement : le bandeau « Démo » ne doit pas pousser le bas des stories hors de l'écran */
.demo-band + .wl { height: calc(100vh - 48px); height: calc(100dvh - 48px); min-height: 512px; }

/* Strava : profil, fiche de connexion, carte de ressenti, étiquettes */
.pf-ic.sv-ic { background: rgba(252,82,0,.16); color: #ff7a3d; }
.st-tag { display: inline-block; margin-left: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; background: rgba(252,82,0,.16); color: #ff7a3d; vertical-align: 2px; font-family: 'Montserrat', system-ui, sans-serif; }
.sv-intro { margin: -6px 0 4px; color: var(--fg-soft); font-size: 14.5px; line-height: 1.5; }
.sv-opt { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; font: inherit; cursor: pointer; }
.sv-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sv-opt b { display: block; font-size: 15px; }
.sv-opt span:not(.sv-box) { font-size: 13px; color: var(--muted); line-height: 1.45; }
.sv-box { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--line-strong); display: grid; place-items: center; margin-top: 1px; color: transparent; }
.sv-box svg { width: 15px; height: 15px; stroke-width: 3; }
.sv-box.on, .sv-opt input:checked + .sv-box { background: var(--gold); border-color: var(--gold); color: #111; }
.sv-opt input:focus-visible + .sv-box { outline: 2px solid var(--fg); outline-offset: 2px; }
.sv-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.sv-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: 14px; background: #fc5200; color: #fff; font: 700 15px 'Montserrat', system-ui, sans-serif; margin: 14px 0 10px; cursor: pointer; }
.sv-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sv-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin: 0 0 14px; background: rgba(252,82,0,.06); }
.sv-card .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ff7a3d; }
.sv-card b { display: block; font-size: 17px; margin: 6px 0 2px; }
.sv-card .s { display: block; font-size: 13px; color: var(--muted); }
.sv-q { margin-top: 12px; font-weight: 600; font-size: 14px; }
.sv-rpe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 10px 0 4px; }
.sv-rpe button { height: 36px; border-radius: 9px; border: 1.5px solid var(--line-strong); background: none; color: var(--fg); font: 700 13px 'Montserrat', system-ui, sans-serif; padding: 0; cursor: pointer; }
.sv-rpe button:active { background: var(--gold); color: #111; border-color: var(--gold); }
.sv-rpe-l { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.sv-line { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.sv-line b { color: #ff7a3d; font-weight: 700; }

/* Accueil en affichage simple : carnet en une ligne */
.hm-carnet { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 18px; cursor: pointer; }
.hm-carnet .main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hm-carnet-n { font-size: 13px; color: var(--muted); white-space: nowrap; }
.hm-carnet-n b { font: 800 26px/1 'Barlow Condensed', sans-serif; color: var(--gold); margin-right: 2px; }

/* Entraînements : les chiffres de la semaine forment une seule bulle qui ouvre « Mon sport » (résumé et calendrier) */
.wk-card { display: block; width: 100%; padding: 0; margin: 0 0 14px; border: 1px solid var(--line); border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow: hidden; }
.wk-card .wk-mini { margin: 0; gap: 0; }
.wk-card .wk-mini > div { background: transparent !important; border: 0 !important; border-radius: 0 !important; }
.wk-card .wk-mini > div + div { border-left: 1px solid var(--line) !important; }
.wk-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); color: var(--fg); font-weight: 600; font-size: 14px; }
.wk-card-foot svg { width: 18px; height: 18px; color: var(--muted); }
.wk-card:active { transform: scale(.99); }
.wk-card:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
.wk-one-btn { width: 100%; justify-content: center; }
.wk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,.06); margin: 0 0 14px; }
.wk-seg button { height: 38px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 14px 'Montserrat', system-ui, sans-serif; cursor: pointer; }
.wk-seg button[aria-selected="true"] { background: var(--gold); color: #111; }

/* « Mes records » replié comme « Mes badges » */
.fold-recs .fold-body .list { margin: 0; }
.rec-add { display: grid; place-items: center; width: 100%; height: 44px; margin-top: 10px; border: 1px dashed var(--line-strong); border-radius: 12px; background: none; color: var(--gold); font: 700 14px 'Montserrat', system-ui, sans-serif; cursor: pointer; }
.rec-add:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

/* Interrupteurs des Réglages du Profil (affichage simple, rappels) */
.pf-sw { position: relative; display: inline-block; width: 46px; height: 28px; flex: none; border-radius: 999px; background: var(--line-strong, #3a3a3a); transition: background .22s ease; }
.pf-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--fg); box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: transform .22s ease, background .22s ease; }
.pf-sw.on { background: var(--gold); }
.pf-sw.on::after { transform: translateX(18px); background: var(--on-gold, #111); }
.pf-row:focus-visible .pf-sw { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pf-sw, .pf-sw::after { transition: none; } }

/* Objectif réussi. Coach : le petit trophée jaillit entouré de rayons et d'étoiles. Client : « le grand moment » en plein écran, puis le trophée se pose dans la tuile. */
.hm-won { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hm-trophy, .cg-trophy { position: relative; flex: none; padding: 0; border: 0; background: none; color: var(--gold); display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hm-trophy { top: 2px; width: 40px; height: 40px; margin: -4px 0 -4px -2px; border-radius: 50%; background: radial-gradient(circle, rgba(201,168,76,.22), rgba(201,168,76,0) 70%); }
.hm-trophy svg { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(201,168,76,.45)); }
.hm-trophy.tr-wait svg { opacity: 0; transform: scale(0); }
.hm-trophy.tr-land svg { animation: trLand .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes trLand { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.cg-trophy { width: 26px; height: 26px; margin: -4px; }
.cg-trophy > svg { width: 18px; height: 18px; }
.tr-fx { position: absolute; inset: 0; pointer-events: none; }
.tr-ray { position: absolute; left: 50%; top: 50%; width: 2px; height: 8px; margin: -4px 0 0 -1px; border-radius: 2px; background: linear-gradient(#e6cf86, var(--gold)); opacity: 0; }
.tr-star { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px; color: #e6cf86; opacity: 0; }
.tr-star svg { width: 100%; height: 100%; display: block; }
.tr-pop > svg { animation: trPop .8s cubic-bezier(.3,1.6,.5,1) both; }
.tr-pop .tr-ray { animation: trRay .9s cubic-bezier(.2,.8,.3,1) .25s both; }
.tr-pop .tr-star { animation: trStar 1.2s ease-out both; animation-delay: var(--d); }
@keyframes trPop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes trRay { 0% { opacity: 0; transform: rotate(var(--a)) translateY(-6px) scaleY(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-24px) scaleY(1); } }
@keyframes trStar { 0% { opacity: 0; transform: translate(0,0) scale(.2); } 35% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1.1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4) rotate(90deg); } }
.gm-wrap { position: fixed; inset: 0; z-index: 450; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 42%, rgba(70,56,22,.97), rgba(8,8,8,.97) 62%); animation: gmIn .3s ease both; cursor: pointer; overflow: hidden; }
.gm-wrap.gm-out { animation: gmOut .35s ease both; }
@keyframes gmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gmOut { from { opacity: 1; } to { opacity: 0; } }
.gm-tr { width: 132px; height: 132px; color: var(--gold); }
.gm-tr svg { width: 100%; height: 100%; filter: drop-shadow(0 0 20px rgba(201,168,76,.65)); animation: gmSpin 2.2s cubic-bezier(.2,.7,.3,1) both; }
@keyframes gmSpin { 0% { transform: perspective(400px) rotateY(0) scale(.3); } 45% { transform: perspective(400px) rotateY(700deg) scale(1.15); } 70%, 100% { transform: perspective(400px) rotateY(1080deg) scale(1); } }
.gm-t { font: 800 40px/1 var(--display); text-transform: uppercase; color: var(--gold); animation: gmUp .5s ease-out .9s both; }
.gm-s { font-size: 15px; color: var(--fg); max-width: 30ch; animation: gmUp .5s ease-out 1.1s both; }
@keyframes gmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.gm-fx { position: absolute; inset: 0; pointer-events: none; }
.gm-cf { position: absolute; top: -14px; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: gmFall 2.6s linear forwards; animation-delay: var(--d); }
@keyframes gmFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), 105vh) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .tr-pop > svg, .tr-pop .tr-ray, .tr-pop .tr-star, .hm-trophy.tr-land svg { animation: none; } .tr-pop .tr-ray, .tr-pop .tr-star { opacity: 0; } }

/* Importer une activité (fichier GPX, TCX ou FIT) */
.imp-lead { margin: 0 0 14px; color: var(--fg-soft, #c9c5bc); font-size: 14px; line-height: 1.5; }
.imp > .btn { width: 100%; }
.imp-how { margin-top: 16px; border-top: 1px solid var(--line, #262626); padding-top: 12px; }
.imp-how summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--gold); }
.imp-how ul { margin: 10px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--fg-soft, #c9c5bc); }
.imp-how .hint { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: var(--muted, #8a857b); }
.sheet .imp-link { display: inline-flex; align-items: center; gap: 6px; width: auto; min-height: 0; margin: 0 0 14px; padding: 4px 0; border: 0; background: none; box-shadow: none; color: var(--gold); font-family: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.imp-link svg, .imp-note svg { width: 16px; height: 16px; flex: none; }
.imp-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.35); color: var(--fg); font-size: 13.5px; line-height: 1.45; }
.imp-note svg { color: var(--gold); margin-top: 2px; }
.imp-note b { display: block; margin-top: 4px; color: var(--gold); font-weight: 600; }