/* ---------- Polices (hébergées avec l'app : hors ligne, sans appel à un tiers) ---------- */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); }

/* ---------- Thème « Néon sport » ---------- */
/* --accent : textes et icônes d'action ; --accent-bg / --on-accent : boutons pleins.
   En clair, le citron est illisible sur blanc : les liens passent en vert profond,
   les boutons pleins restent citron avec un texte noir. */
:root {
  --display: "Barlow Condensed", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --lime: #C6FF3D;
  --hot: #FF2E88;
  --bg: #f2f2f5;
  --bg2: #ffffff;
  --card: #ffffff;
  --card2: #e9e9ef;
  --segon: #ffffff;
  --text: #0b0b10;
  --muted: #6b6b78;
  --sep: rgba(11, 11, 16, 0.1);
  --fill: #d6d6de;
  --accent: #3f7d00;
  --accent-bg: #C6FF3D;
  --on-accent: #050507;
  --glow: none;
  --danger: #e5243b;
  --green: #C6FF3D;
  --tabbar: rgba(255, 255, 255, 0.94);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050507;
    --bg2: #050507;
    --card: #0f0f14;
    --card2: #1b1b23;
    --segon: #2c2c37;
    --text: #f4f4f6;
    --muted: #8a8a9a;
    --sep: #22222b;
    --fill: #2a2a34;
    --accent: #C6FF3D;
    --glow: 0 0 18px rgba(198, 255, 61, 0.45);
    --danger: #ff4d5e;
    --tabbar: rgba(5, 5, 7, 0.92);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #050507;
  --bg2: #050507;
  --card: #0f0f14;
  --card2: #1b1b23;
  --segon: #2c2c37;
  --text: #f4f4f6;
  --muted: #8a8a9a;
  --sep: #22222b;
  --fill: #2a2a34;
  --accent: #C6FF3D;
  --glow: 0 0 18px rgba(198, 255, 61, 0.45);
  --danger: #ff4d5e;
  --tabbar: rgba(5, 5, 7, 0.92);
  color-scheme: dark;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
/* Safari iOS grossit d'office les longs paragraphes (« text autosizing »), surtout après une
   rotation : les tailles de la feuille de style font foi. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overflow: hidden; }
input, textarea { -webkit-user-select: text; user-select: text; font: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
#haptic-switch, #haptic-label { position: fixed; left: -100px; top: -100px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- Barre de navigation ---------- */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  /* iOS (26 et plus) floute le haut de l'écran sous la barre d'état, un peu au-delà de la zone
     sûre : le titre démarre plus bas pour rester net. Sans encoche (ordinateur), marge normale. */
  padding: calc(env(safe-area-inset-top) + 10px + min(env(safe-area-inset-top), 14px)) 16px 12px;
  background: var(--bg2);
  border-bottom: 0.5px solid var(--sep);
  flex: none;
}
.nav h1 { margin: 0; font: 800 21px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; white-space: nowrap; max-width: 56vw; overflow: hidden; text-overflow: ellipsis; }
/* En-tête de l'accueil : grand titre aligné à gauche, façon tableau d'affichage. */
/* Grand titre : un peu plus d'air encore sous la barre d'état. */
.nav.hero { display: block; padding-top: calc(env(safe-area-inset-top) + 10px + min(env(safe-area-inset-top), 18px)); padding-bottom: 8px; border-bottom: 0; }
.nav.hero > :first-child, .nav.hero > :last-child { justify-self: start; }
/* Grand titre de l'accueil : jamais coupé (la limite de largeur des titres de page ne s'applique pas). */
/* Sur une seule ligne : la taille suit la largeur de l'écran (36 px dès qu'il y a la place). */
.nav.hero h1 { text-align: left; font-size: clamp(24px, 8.1vw, 36px); line-height: 1; letter-spacing: 0.02em; max-width: none; white-space: nowrap; overflow: visible; }
.nav.hero h1 em { font-style: normal; color: var(--accent); text-shadow: var(--glow); }
.nav.hero .hero-sub { width: 100%; max-width: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; min-height: 40px; }
.nav.hero .hero-sub p { margin: 0; }
.nav.hero p { margin: 6px 0 0; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; }
.nav > :first-child { justify-self: start; }
.nav > :last-child { justify-self: end; }
.link { color: var(--accent); font-size: 17px; }
.bold { font-weight: 600; }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; color: var(--accent); }
.nav-arrows { display: flex; gap: 4px; }
/* Historique : choix du mois sous le grand titre (même en-tête que Groupes et Réglages). */
.cal-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 16px 0; }
.cal-bar > :first-child { justify-self: start; }
.cal-bar > :last-child { justify-self: end; }
.cal-bar b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

/* ---------- Barre d'onglets ---------- */
#tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Pas de flou d'arrière-plan : sur iPhone, après une rotation, Safari laissait des zones
     noires sur la barre (onglet Groupes masqué), même revenu en portrait. */
  background: var(--bg2);
  border-top: 0.5px solid var(--sep);
  padding: 6px 0 calc(env(safe-area-inset-bottom) + 4px);
  flex: none;
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 2px 0; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--accent); }
.tab.on svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 55%, transparent)); }

/* ---------- Carte semaine ---------- */
.week { margin: 12px 16px 0; padding: 16px 16px 18px; background: var(--card); border: 1px solid var(--sep); border-radius: 18px; }
.week-head { display: flex; justify-content: space-between; align-items: flex-start; }
.week-head h2 { margin: 0; font: 800 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.week-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.week-head .link { display: flex; align-items: center; gap: 2px; }
.chart { position: relative; height: 140px; margin: 18px 0 10px; }
.gl { position: absolute; left: 0; right: 46px; border-top: 1px dashed var(--fill); }
.gl span { position: absolute; right: -46px; top: -9px; width: 42px; text-align: right; font-size: 12px; color: var(--muted); }
.bars { position: absolute; left: 0; right: 46px; top: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; }
.bars i { justify-self: center; width: 18px; min-height: 0; background: var(--accent-bg); border-radius: 3px; box-shadow: var(--glow); }
.dots { display: grid; grid-template-columns: repeat(7, 1fr); padding-right: 46px; }
.dots div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--fill); }
.dots .has i { background: var(--accent-bg); box-shadow: var(--glow); }
.dots .today { color: var(--text); }
.dots .today i { outline: 2px solid var(--text); outline-offset: 2px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sep); }
.stats b { display: block; font: 800 30px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.stats span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- Panneau routines ---------- */
.panel { padding: 22px 16px 120px; min-height: 55%; }
.grip { display: none; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 0 2px; }
.panel-head h2 { margin: 0; font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.empty { text-align: center; color: var(--muted); padding: 36px 16px; font-size: 15px; line-height: 1.5; }

.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--sep); border-radius: 14px;
  padding: 12px 14px; min-height: 64px;
  transition: transform 0.15s ease;
}
.row:active { opacity: 0.85; }
.cbar { width: 4px; height: 34px; border-radius: 2px; flex: none; }
.row .name { flex: 1; min-width: 0; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; margin-top: 2px; }
.row .dur { color: var(--text); font: 700 23px/1 var(--display); font-variant-numeric: tabular-nums; }
.chev { color: var(--muted); width: 16px; height: 16px; flex: none; }
.sel { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--muted); flex: none; display: grid; place-items: center; color: var(--on-accent); }
.sel.on { background: var(--accent-bg); border-color: var(--accent-bg); }
.info { color: var(--accent); flex: none; }
.handle { touch-action: none; color: var(--muted); padding: 8px 0 8px 10px; border-left: 0.5px solid var(--sep); flex: none; cursor: grab; }
.row.dragging { position: relative; z-index: 2; transition: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }

.fab {
  position: absolute; right: 20px; bottom: 20px;
  width: 62px; height: 62px; border-radius: 18px;
  background: var(--accent-bg); color: var(--on-accent);
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(198, 255, 61, 0.45), 0 8px 20px rgba(0, 0, 0, 0.25);
}
.fab:active { transform: scale(0.94); }
.edit-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 28px; background: var(--bg2); border-top: 0.5px solid var(--sep);
}
.edit-bar button { color: var(--accent); }
.edit-bar button:disabled { color: var(--muted); opacity: 0.5; }
.edit-mode .fab { bottom: 84px; }

/* ---------- Groupes / cellules ---------- */
.section-title { margin: 28px 30px 8px; font: 800 15px/1.2 var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; }
.section-foot { margin: 8px 30px 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.group { background: var(--card); border: 1px solid var(--sep); border-radius: 14px; margin: 0 16px; overflow: hidden; }
.cell {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 8px 16px; width: 100%;
  font-size: 17px; text-align: left; position: relative;
}
.cell + .cell::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--sep); }
button.cell:active { background: var(--card2); }
.val { color: var(--muted); display: flex; align-items: center; gap: 6px; }
.cell.center { justify-content: center; }
.accent { color: var(--accent); }
.danger { color: var(--danger); }
.banner { margin: 16px 16px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent-bg) 10%, var(--card)); font-size: 15px; line-height: 1.45; }

.switch { flex: none; }
.switch input { display: none; }
.switch i { display: block; width: 51px; height: 31px; border-radius: 16px; background: var(--fill); position: relative; transition: background 0.2s; }
.switch i::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s;
}
.switch input:checked + i { background: var(--green); box-shadow: var(--glow); }
.switch input:checked + i::after { transform: translateX(20px); background: #050507; }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 48%; height: 4px; border-radius: 2px; background: var(--fill); outline: none; }
input[type="range"] { accent-color: var(--accent-bg); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bg); box-shadow: 0 0 10px rgba(198, 255, 61, 0.5), 0 1px 4px rgba(0, 0, 0, 0.35); }

.pill {
  min-width: 92px; padding: 5px 14px; border-radius: 10px;
  color: #fff; font: 700 24px/1.15 var(--display); letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-variant-numeric: tabular-nums; text-align: center; flex: none;
}
.pill:active { filter: brightness(0.9); }
.seg { display: flex; background: var(--card2); border-radius: 9px; padding: 2px; flex: none; }
.seg button { padding: 6px 16px; border-radius: 7px; font-size: 15px; }
.seg .on { background: var(--segon); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); font-weight: 600; }
.stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper button { width: 34px; height: 32px; border-radius: 8px; background: var(--card2); font-size: 20px; display: grid; place-items: center; }
.stepper span { min-width: 76px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Pages & feuilles ---------- */
.page {
  position: fixed; inset: 0; z-index: 10;
  background: var(--bg);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.page.in { transform: none; }
.sheet-wrap { position: fixed; inset: 0; z-index: 50; }
.backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.25s; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 85%; overflow-y: auto;
  background: var(--card); border-radius: 20px 20px 0 0; border-top: 1px solid var(--sep);
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet-wrap.in .backdrop { opacity: 1; }
.sheet-wrap.in .sheet { transform: none; }
.sheet-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 14px 16px; border-bottom: 0.5px solid var(--sep); }
.sheet-head b { font: 800 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; text-align: center; }
.sheet-head > :first-child { justify-self: start; }
.sheet-head > :last-child { justify-self: end; }
.opt small { display: block; color: #e0a020; font-size: 13px; margin-top: 2px; }
.opt .check { color: var(--accent); font-size: 20px; }

.time-pick { display: flex; justify-content: center; gap: 18px; padding: 26px 16px 14px; }
.time-pick label { display: flex; align-items: center; gap: 8px; font-size: 17px; color: var(--muted); }
.time-pick select {
  -webkit-appearance: none; appearance: none;
  background: var(--c); color: #fff; border: 0; border-radius: 14px;
  font: 800 44px/1.1 var(--display); font-variant-numeric: tabular-nums;
  padding: 8px 20px; text-align: center; text-align-last: center;
}
.quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 16px; }
.quick button { background: var(--card2); border-radius: 16px; padding: 7px 12px; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ---------- Éditeur ---------- */
.editor-page .scroll { padding-bottom: 24px; }
.editor-page .group { margin-top: 20px; }
.name-row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--bg2); }
.name-row input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 800 34px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.name-row input::placeholder { color: var(--muted); }
.swatch { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.palette { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 20px 18px; background: var(--bg2); }
.palette .on { outline: 3px solid var(--text); outline-offset: 2px; }
.cy-title { display: flex; align-items: center; }
.minus { width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: #fff; margin-right: 12px; display: grid; place-items: center; font-weight: 700; flex: none; }
.ex { gap: 8px; }
.ex input.ex-name { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-size: 17px; }
.ex .pill { min-width: 66px; font-size: 16px; padding: 5px 9px; }
.x { color: var(--muted); width: 26px; height: 26px; display: grid; place-items: center; flex: none; }
.dot { width: 22px; height: 22px; border-radius: 50%; flex: none; position: relative; overflow: hidden; }
.dot input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; }
.sub-link { font-size: 15px; }
.ed-foot { padding: 10px 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--bg2); border-top: 0.5px solid var(--sep); text-align: center; font: 800 20px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.06em; flex: none; }
.tbar { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; margin-top: 10px; background: var(--card2); }
.tbar i { display: block; height: 100%; }

/* ---------- Historique ---------- */
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); padding: 12px 12px 8px; color: var(--muted); font-size: 15px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 12px; touch-action: pan-y; }
/* width + min-width + appearance : Safari iOS ne garantit pas qu'un <button> s'étire dans sa case de grille. */
.day { position: relative; display: block; width: 100%; min-width: 0; height: 54px; margin: 0; -webkit-appearance: none; appearance: none; background: var(--card); border: 1px solid var(--sep); border-radius: 8px; text-align: left; padding: 4px 7px; font: 700 21px/1.1 var(--display); font-variant-numeric: tabular-nums; overflow: hidden; }
.day.out { color: var(--muted); opacity: 0.45; }
.day.today { color: var(--accent); }
.day.has::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; border-radius: 2px; background: var(--dc, var(--accent-bg)); box-shadow: var(--glow); }
/* Jour coloré par le ressenti : pas de halo citron sous une autre couleur. */
.day.has[style]::after { box-shadow: 0 0 6px var(--dc); }
/* Bordure intérieure (box-shadow inset) plutôt qu'outline : rendu identique sur Safari iOS. */
.day.sel { box-shadow: inset 0 0 0 2px var(--accent); background: var(--card); background: color-mix(in srgb, var(--accent-bg) 14%, var(--card)); color: var(--text); }
.day:focus { outline: none; }
.day-title { margin: 22px 20px 10px; font: 800 16px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.day-title::first-letter { text-transform: uppercase; }
.sessions { padding: 0 16px 24px; }
.sessions .t { color: var(--muted); font-size: 18px; font-variant-numeric: tabular-nums; }
.sessions .bdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sessions .dur { color: var(--text); }

/* ---------- Écran d'exécution ---------- */
/* Fond sombre teinté par la couleur de la phase : on la reconnaît de loin, les chiffres
   blancs restent très contrastés. */
.run-page {
  --phase: #e8445f;
  color: #fff;
  background-color: #050507;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--phase) 80%, #050507) 0%, color-mix(in srgb, var(--phase) 38%, #050507) 52%, #050507 100%);
}
/* + min(…) : marge sous le flou d'iOS en haut de l'écran (cf. .nav), nulle sans encoche. */
.run-top { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 6px + min(env(safe-area-inset-top), 14px)) 20px 16px; }
.run-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.run-nav h1 { margin: 0; text-align: center; font: 800 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: 0.08em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-nav button { width: 44px; height: 44px; display: grid; place-items: center; }
.run-time {
  margin: auto 0 0; text-align: center; line-height: 1;
  font-family: var(--display); font-size: min(36vw, 30vh); font-weight: 800; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
.run-time.long { font-size: min(23vw, 22vh); }
/* minmax(0, 1fr) : sans cela, un nom de phase long élargit la colonne et pousse la flèche hors de l'écran. */
.run-phase { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; text-align: center; margin-top: 4vh; }
.run-phase button { width: 44px; height: 44px; display: grid; place-items: center; }
/* Nom long (« Repos entre les séries », exercice personnalisé) : deux lignes équilibrées au plus. */
/* Hauteur réservée pour deux lignes de nom + la ligne « Série … » : passer d'un nom court à un
   nom long ne décale rien (le bloc est centré verticalement dans cet espace fixe). */
.run-phase { --nf: clamp(26px, 8.5vw, 34px); }
.run-phase > div { min-height: calc(var(--nf) * 2.1 + 22px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
/* Pas de text-wrap: balance : sur iPhone, combiné à line-clamp, le nom ne passait plus à la ligne
   et masquait la flèche de droite. */
#run-name { font: 800 var(--nf)/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; width: 100%; max-width: 100%; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); }
#run-sub { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; margin-top: 4px; min-height: 18px; }
.run-stats { display: flex; justify-content: space-between; margin-top: auto; padding-top: 3vh; }
.run-stats b { display: block; font: 800 32px/1.05 var(--display); font-variant-numeric: tabular-nums; }
.run-stats span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; }
.run-stats div:last-child { text-align: right; }
/* Progression : un segment par phase (largeur = durée), comme un chrono de compétition. */
/* flex: none : quand la place manque (iPhone en portrait, nom sur deux lignes), la barre, sans
   contenu propre, était écrasée à 0 px de haut par la colonne et disparaissait. */
/* Barre des étapes de la séance : en haut, sous le titre (comme l'écran de musculation). */
.segs { display: flex; gap: 3px; height: 6px; margin-top: 10px; flex: none; }
.segs.dense { gap: 1px; }
.segs i { position: relative; flex: var(--d, 1) 1 0; min-width: 2px; border-radius: 3px; background: rgba(255, 255, 255, 0.32); overflow: hidden; }
/* Phase en cours : bien visible dès le départ, même avant que le remplissage n'avance. */
.segs i.now { background: rgba(255, 255, 255, 0.6); }
.segs i.done { background: var(--lime); box-shadow: 0 0 8px rgba(198, 255, 61, 0.55); overflow: visible; }
.segs i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--lime); }
.run-bottom { display: flex; flex-direction: column; align-items: center; padding: 3vh 22px calc(env(safe-area-inset-bottom) + 18px); flex: none; }
.run-ctrls { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.ring { position: relative; width: min(54vw, 30vh); aspect-ratio: 1; container-type: inline-size; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring #run-track { stroke: rgba(255, 255, 255, 0.14); }
.ring #run-arc { stroke: var(--lime); filter: drop-shadow(0 0 3px rgba(198, 255, 61, 0.8)); }
/* Taille du libellé relative au cercle (cqi) : « REPRENDRE » doit tenir quel que soit l'écran. */
.ring button { position: absolute; inset: 9%; border-radius: 50%; background: rgba(5, 5, 7, 0.55); color: var(--lime); font-family: var(--display); font-size: clamp(30px, 11vw, 50px); font-size: min(50px, 24cqi); font-weight: 800; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-shadow: 0 0 14px rgba(198, 255, 61, 0.55); }
.ring button.long { font-size: clamp(20px, 7vw, 34px); font-size: min(34px, 15cqi); letter-spacing: 0.02em; }
.ring button:active { background: rgba(5, 5, 7, 0.75); }
.round-btn { width: 60px; height: 60px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(5, 5, 7, 0.35); display: grid; place-items: center; }
.round-btn:active { background: rgba(255, 255, 255, 0.15); }
/* Deux lignes réservées : un « Ensuite : … » long ne remonte pas le bouton central. */
.next-up { margin-top: 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; line-height: 1.4; min-height: 2.8em; display: flex; align-items: center; justify-content: center; text-align: center; }
.run-page.locked .run-bottom, .run-page.locked .run-phase button, .run-page.locked .run-nav button { opacity: 0.3; }
.lock-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; padding-bottom: calc(env(safe-area-inset-bottom) + 34px); }
.unlock { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 16px; border: 1px solid rgba(198, 255, 61, 0.5); background: rgba(5, 5, 7, 0.7); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; touch-action: none; }
.unlock .fill { position: absolute; inset: 0; background: rgba(198, 255, 61, 0.35); transform: scaleX(0); transform-origin: left; }
.unlock.hold .fill { transform: scaleX(1); transition: transform 0.8s linear; }
.unlock span { position: relative; }
.done-overlay { position: absolute; inset: 0; z-index: 6; background: radial-gradient(120% 60% at 50% 30%, rgba(198, 255, 61, 0.16), transparent 70%), #050507; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; }
.done-overlay h2 { margin: 0; font: 800 64px/1 var(--display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--lime); text-shadow: 0 0 30px rgba(198, 255, 61, 0.55); }
.done-overlay p { margin: 0 0 18px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.85; }
.done-overlay button { min-width: 230px; padding: 15px 24px; border-radius: 16px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.btn-white { background: var(--lime); color: #050507; box-shadow: 0 0 24px rgba(198, 255, 61, 0.4); }
.btn-ghost { border: 1px solid rgba(255, 255, 255, 0.35); }
[hidden] { display: none !important; }

/* ---------- Bandeau de mise à jour ---------- */
#update-banner {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 0 12px 8px; padding: 10px 8px 10px 16px;
  border-radius: 14px; background: var(--card2); font-size: 15px;
}
#update-banner span { flex: 1; }
#update-banner .link { font-size: 15px; }
.banner-x { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); }

/* ---------- Paysage (téléphone couché) ---------- */
/* Encoche / Dynamic Island sur les côtés : les contenus ne passent pas dessous. */
#app, .page:not(.run-page) {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
@media (orientation: landscape) and (max-height: 600px) {
  /* Minuteur sur deux colonnes : infos à gauche, commandes à droite. */
  .run-page { flex-direction: row; }
  .run-top {
    flex: 1.35; min-width: 0;
    padding: calc(env(safe-area-inset-top) + 4px) 16px calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 16px);
  }
  .run-time { font-size: min(21vw, 40vh); margin: auto 0 0; }
  .run-time.long { font-size: min(13vw, 28vh); }
  .run-phase { margin-top: 1.5vh; }
  .run-phase { --nf: 26px; }
  #run-sub { font-size: 12px; }
  .run-stats { padding-top: 1.5vh; }
  .run-stats b { font-size: 22px; }
  .run-stats span { font-size: 14px; }
  .segs { margin-top: 8px; }
  .run-bottom {
    flex: 1; min-width: 0; justify-content: center;
    padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 16px) calc(env(safe-area-inset-bottom) + 10px) 16px;
  }
  .ring { width: min(24vw, 52vh); }
  .round-btn { width: 52px; height: 52px; }
  .next-up { margin-top: 10px; }
  .lock-overlay { padding-bottom: calc(env(safe-area-inset-bottom) + 16px); }
  .done-overlay { gap: 8px; }
  .done-overlay h2 { font-size: 44px; }
  .done-overlay p { margin-bottom: 8px; }
  .done-overlay button { padding: 11px 24px; }

  /* Écrans de liste : carte semaine plus compacte, onglets plus bas. */
  .chart { height: 90px; }
  .tab svg { width: 24px; height: 24px; }
}

/* ---------- Consentement mesure d'audience ---------- */
.consent { padding: 16px 20px 4px; font-size: 16px; line-height: 1.5; }
.consent p { margin: 0 0 12px; }
.consent p + p { color: var(--muted); font-size: 15px; }
.consent-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.consent-btns button { padding: 14px; border-radius: 12px; font-size: 17px; font-weight: 600; }
.consent-no { background: var(--card2); }
.consent-yes { background: var(--accent-bg); color: var(--on-accent); font-weight: 800; }

/* ---------- Loader et toast (sans décalage de mise en page) ---------- */
/* Le loader est posé en absolu dans le bouton : le libellé ne bouge pas. */
/* Une seule ligne et hauteur fixe : changer le libellé ne décale rien. */
.group .cell.center { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-action="check-update"], [data-action="force-update"], [data-action="cloud-push"], [data-action="push-test"], [data-a="restore"] { position: relative; }
.spinner {
  position: absolute; right: 16px; top: 50%;
  width: 18px; height: 18px; margin-top: -9px;
  border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#toast {
  /* Posé sur la barre de titre (sans bouton dans Réglages) : il ne recouvre jamais
     le contenu, quelle que soit la position de défilement — ni « Effacer l'historique »
     ni aucun autre bouton. */
  /* Bien visible : couleur d'action (citron) sur fond sombre, ombre ; sous la zone floutée
     d'iOS en haut de l'écran (même marge que les en-têtes) ; deux lignes au plus. */
  position: fixed; left: 50%; z-index: 60;
  top: calc(env(safe-area-inset-top) + 8px + min(env(safe-area-inset-top), 14px));
  width: max-content; max-width: calc(100% - 32px);
  padding: 11px 18px; border-radius: 14px;
  background: var(--accent-bg); color: var(--on-accent); font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 18px rgba(198, 255, 61, 0.35);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  opacity: 0; transform: translate(-50%, -10px) scale(0.96); pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(.2, .9, .3, 1.2);
}
#toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- Bandeaux (rappel de sauvegarde, restauration) ---------- */
.app-banner {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 0 12px 8px; padding: 10px 8px 10px 16px;
  border-radius: 14px; background: var(--card2); font-size: 15px; line-height: 1.3;
}
.app-banner span { flex: 1; }
.app-banner .link { font-size: 15px; white-space: nowrap; }

/* ---------- Sauvegarde en ligne ---------- */
.cloud-sheet { padding: 16px 20px 6px; font-size: 16px; line-height: 1.5; }
.cloud-sheet p { margin: 0 0 14px; }
.code-box {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(17px, 5.4vw, 24px); font-weight: 600; letter-spacing: 1px; text-align: center;
  padding: 16px 8px; border-radius: 12px; background: var(--card2);
  -webkit-user-select: all; user-select: all; word-break: break-all;
}
.code-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 16px; }
.code-btns button { padding: 12px; border-radius: 12px; background: var(--card2); color: var(--accent); font-weight: 700; font-size: 16px; }
.check-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; }
.check-row input { width: 22px; height: 22px; accent-color: var(--accent); }
.wide { width: 100%; padding: 14px; border-radius: 12px; font-size: 17px; font-weight: 600; }
/* Association par QR code : fond blanc (lisible par tous les lecteurs), aucun décalage
   pendant le chargement (taille fixe). */
.qr-box {
  position: relative; width: min(240px, 70vw); aspect-ratio: 1; margin: 4px auto 10px;
  border-radius: 14px; background: #fff; overflow: hidden; display: grid; place-items: center;
}
.qr-box .qr { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Feuilles avec QR code (invitation de groupe, association d'appareil) : plus d'air entre texte,
   QR code, bouton et note. */
.pair-sheet { padding-top: 22px; padding-bottom: 26px; }
.pair-sheet > p:first-child { margin-bottom: 22px; }
.pair-sheet .qr-box { margin: 0 auto 26px; }
.pair-sheet .ob-tip { margin-top: 14px; }
.qr-box.expired .qr { opacity: .12; }
.qr-box .spinner { position: static; margin: 0; border-color: rgba(0, 0, 0, .15); border-top-color: #000; }
.qr-renew { position: relative; padding: 10px 16px; border-radius: 12px; background: var(--accent-bg); color: var(--on-accent); font-weight: 700; font-size: 15px; }
.pair-status { text-align: center; color: var(--muted); font-size: 14px; min-height: 21px; }
.pair-or { margin-top: 18px !important; font-size: 15px; color: var(--muted); }
.pair-btn { display: block; width: 100%; padding: 12px; margin-bottom: 10px; border-radius: 12px; background: var(--card2); color: var(--accent); font-weight: 700; font-size: 15px; }
.scan-view { position: relative; width: min(300px, 80vw); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 16px; overflow: hidden; background: #000; }
.scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 14%; border: 3px solid var(--accent-bg); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); pointer-events: none; }
.err { color: var(--danger); font-size: 14px; min-height: 20px; margin: 10px 0 0 !important; }
.code-input {
  width: 100%; padding: 14px; margin-bottom: 14px; border-radius: 12px; border: 0;
  background: var(--card2); color: var(--text); text-align: center; text-transform: uppercase;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 18px; letter-spacing: 1px; outline: none;
}
.consent-yes .spinner, [data-a="restore"] .spinner { border-color: rgba(5, 5, 7, 0.25); border-top-color: #050507; }

/* ---------- Présentation (premier lancement) ---------- */
.ob-page { padding: calc(env(safe-area-inset-top) + 6px + min(env(safe-area-inset-top), 14px)) 0 calc(env(safe-area-inset-bottom) + 16px); }
.ob-top { display: flex; justify-content: flex-end; padding: 6px 20px; min-height: 40px; }
.ob-track {
  flex: 1; min-height: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
}
.ob-track::-webkit-scrollbar { display: none; }
.ob-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 4px 28px 0; overflow-y: auto;
}
.ob-art {
  width: 100%; max-width: 360px; aspect-ratio: 4 / 3; max-height: 38vh;
  border-radius: 28px; display: grid; place-items: center; flex: none;
  background:
    radial-gradient(90% 80% at 15% 10%, rgba(255, 46, 136, 0.55), transparent 60%),
    radial-gradient(80% 70% at 90% 100%, rgba(198, 255, 61, 0.35), transparent 60%),
    #111117;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.ob-art svg { width: 82%; height: 82%; }
.ob-slide h2 { margin: 28px 0 10px; font: 800 32px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.ob-slide p { margin: 0; max-width: 420px; font-size: 17px; line-height: 1.5; color: var(--muted); }
.ob-slide .ob-tip { margin-top: 14px; font-size: 14px; }
.ob-link { margin-top: 18px; font-size: 16px; }
.ob-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.ob-dots i { width: 8px; height: 8px; border-radius: 4px; background: var(--fill); transition: width 0.25s, background 0.25s; }
.ob-dots i.on { width: 22px; background: var(--accent-bg); box-shadow: var(--glow); }
.ob-actions { padding: 0 24px; }
.ob-btn { width: 100%; padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.ob-primary { background: var(--accent-bg); color: var(--on-accent); }
.ob-secondary { background: var(--card2); color: var(--text); }
.ob-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (orientation: landscape) and (max-height: 600px) {
  .ob-slide { display: grid; grid-template-columns: 42% 1fr; grid-template-rows: auto auto 1fr; column-gap: 28px; text-align: left; align-items: start; }
  .ob-art { grid-row: 1 / 4; max-height: 62vh; }
  .ob-slide h2 { margin: 6px 0 8px; }
  .ob-link { justify-self: start; }
}

/* ---------- Cycle : ligne d'ouverture et écran dédié ---------- */
.cy-head { gap: 0; padding: 0 0 0 16px; }
.cy-head .minus { margin-right: 12px; }
.cy-open {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 54px; padding: 8px 16px 8px 0; font-size: 17px; text-align: left;
}
.cy-open:active { opacity: 0.7; }
.drag-list { list-style: none; padding: 0; }
.cy-row { gap: 10px; transition: transform 0.15s ease; background: var(--card); }
.cy-row.dragging { position: relative; z-index: 2; transition: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); border-radius: 12px; }
.cy-row .handle { border-left: 0; padding: 8px 0 8px 6px; }
.cy-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.sm { min-width: 66px; font-size: 16px; padding: 5px 9px; }

/* ---------- Détail des phases, ajout / retrait, couleurs et sons ---------- */
.ph-open { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; text-align: left; font-size: 17px; color: var(--text); }
.ph-open svg { color: var(--muted); flex: none; }
.ph-open:active { opacity: 0.6; }
.ex-open .cy-name { flex: 0 1 auto; }
.ex-open .dot { width: 14px; height: 14px; }
.cell.ex .minus { margin-right: 4px; }
.add-row { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--text); min-height: 38px; }
.plus-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-style: normal; font-weight: 700; flex: none; }
.ph-name { flex: 1; min-width: 0; text-align: right; background: none; border: 0; outline: none; color: var(--muted); font-size: 17px; }
.dot.big { width: 26px; height: 26px; }
.val .dot { display: inline-block; }
.sheet-palette { padding: 18px 20px 14px; background: none; justify-content: center; }
.sheet-palette .swatch { width: 40px; height: 40px; border-radius: 50%; }
.custom-swatch { position: relative; overflow: hidden; background: conic-gradient(#f43f5e, #f59e0b, #84cc16, #06b6d4, #6366f1, #d946ef, #f43f5e); }
.custom-swatch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; border: 0; padding: 0; }
.opt small.muted { color: var(--muted); display: inline; margin-left: 6px; }

/* ---------- Création par l'IA ---------- */
.ai-btn {
  width: 52px; height: 40px; flex: none; border-radius: 12px;
  border: 1px solid var(--hot); color: var(--hot); display: grid; place-items: center;
  box-shadow: 0 0 12px rgba(255, 46, 136, 0.35);
}
.ai-btn:active { background: color-mix(in srgb, #FF2E88 15%, transparent); }
.ai-input {
  width: 100%; padding: 12px 14px; margin-bottom: 10px; border-radius: 12px; border: 0; resize: none;
  background: var(--card2); color: var(--text); font: inherit; font-size: 17px; line-height: 1.4; outline: none;
}
.ai-ideas { padding: 0 0 12px; justify-content: flex-start; }
[data-a="go"] { position: relative; }
[data-a="go"] .spinner { border-color: rgba(5, 5, 7, 0.25); border-top-color: #050507; }

/* ---------- IA : bientôt disponible ---------- */
.ai-teaser { text-align: center; padding-bottom: 12px; }
.ai-art {
  width: 84px; height: 84px; margin: 6px auto 14px; border-radius: 24px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #FF2E88, #7C3AED); box-shadow: 0 0 30px rgba(255, 46, 136, 0.4);
}
.ai-badge { display: inline-block; margin-bottom: 14px; padding: 5px 12px; border-radius: 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--hot); background: color-mix(in srgb, #FF2E88 15%, transparent); }
.ai-teaser .ob-tip { margin-bottom: 18px; }
.ai-teaser .ob-btn:disabled { opacity: 1; }

/* ---------- Avis ---------- */
.rate-sheet { text-align: center; }
.rate-stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 6px; }
.rate-stars button { font-size: 44px; line-height: 1; padding: 2px 4px; color: var(--fill); transition: transform 0.12s, color 0.12s; }
.rate-stars button.on { color: var(--accent-bg); text-shadow: var(--glow); }
.rate-stars button:active { transform: scale(0.88); }
.rate-label { min-height: 22px; margin-bottom: 12px; color: var(--muted); font-size: 15px; }
.rate-email { font-size: 16px; }
.rate-val { color: var(--accent); letter-spacing: 1px; }
[data-a="send"] { position: relative; }
[data-a="send"] .spinner { border-color: rgba(5, 5, 7, 0.25); border-top-color: #050507; }

/* ---------- Retours libres ---------- */
.cell-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.msg-kinds { display: flex; width: 100%; margin: 4px 0 14px; }
.msg-kinds button { flex: 1; padding: 8px 6px; }

/* ---------- Présentation : étapes d'installation ---------- */
.ob-steps { list-style: none; margin: 16px 0 0; padding: 0; width: 100%; max-width: 380px; text-align: left; display: flex; flex-direction: column; gap: 10px; }
.ob-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); font-size: 15px; line-height: 1.4; }
.ob-steps small { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }
.ob-num { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--accent-bg); color: var(--on-accent); font: 800 15px/1 var(--display); }
.ob-ico { display: inline-flex; vertical-align: -3px; color: var(--accent); }

a.cell { color: var(--text); text-decoration: none; }

/* ---------- Partage ---------- */
.done-overlay .done-share {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  min-width: 0; margin-top: 6px; padding: 10px 18px; border-radius: 22px;
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.done-overlay .done-share:active { opacity: 0.7; }

/* ---------- Installation sur l'écran d'accueil (selon l'appareil) ---------- */
.install-banner { display: flex; align-items: center; gap: 12px; }
.install-banner span { flex: 1; }
.install-banner .link { white-space: nowrap; font-size: 15px; }
.install-guide { width: 100%; max-width: 380px; margin: 0 auto; text-align: left; }
.install-guide .ob-steps { margin-top: 8px; }
.install-for { margin: 16px 0 0 !important; font: 800 15px/1.2 var(--display) !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent) !important; }
.install-now { margin-top: 16px; }
.install-or { margin: 10px 0 0 !important; font-size: 13px !important; text-align: center; color: var(--muted); }
.install-other { margin-top: 10px; border: 1px solid var(--sep); border-radius: 12px; padding: 10px 12px; }
.install-other summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--muted); }
.install-other .ob-steps li { background: var(--card2); }
.install-done { margin: 16px 0 0 !important; color: var(--accent) !important; font-weight: 700; text-align: center; }

/* ---------- Bibliothèque de routines ---------- */
.list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 14px 4px 0; font-size: 15px; }
.list-foot .muted-link { color: var(--muted); }
.lib-blank { margin-top: 16px; }
.lib-list { margin-bottom: 4px; }
.lib-item { justify-content: flex-start; }
.lib-emoji { font-size: 26px; width: 34px; text-align: center; flex: none; }
.lib-text { flex: 1; min-width: 0; }
.lib-dur { font: 700 21px/1 var(--display); font-variant-numeric: tabular-nums; color: var(--text); flex: none; }
.row .name small { white-space: normal; line-height: 1.3; }
.lib-warn { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #ffb020; }

/* ---------- Guide de respiration (cohérence cardiaque…) ---------- */
/* Disque posé sur le bouton central, sans capter les touches : le libellé reste lisible au travers. */
.ring .breath-orb {
  position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  /* Blanc lumineux : visible quelle que soit la couleur de la phase. */
  background: radial-gradient(circle, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 68%, rgba(255, 255, 255, 0.04) 100%);
  border: 2px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 34px rgba(255, 255, 255, 0.35), inset 0 0 24px rgba(255, 255, 255, 0.25);
  transform: scale(0.42); transition: transform 0.12s linear;
}

/* ---------- Fiche d'une routine (principe, bienfaits, conseils, références) ---------- */
.lib-item .chev { margin-left: -4px; }
.info-sheet { padding-top: 8px; }
.info-top { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.info-top .lib-emoji { font-size: 40px; width: 48px; }
.info-top h2 { margin: 0; font: 800 28px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
.info-top p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.info-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.info-meta span { border: 1px solid var(--sep); border-radius: 9px; padding: 4px 10px; font-size: 13px; }
.info-meta b { color: var(--accent); margin-right: 2px; }
.info-h { margin: 20px 0 6px; font: 800 17px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.info-sheet p { margin: 0 0 6px; }
.info-list { margin: 0; padding-left: 20px; } .info-list li { margin: 4px 0; }
.info-warn { border: 1px solid rgba(255, 176, 32, 0.5); background: rgba(255, 176, 32, 0.08); border-radius: 12px; padding: 8px 12px; }
.info-refs { margin-top: 18px; font-size: 13px; color: var(--muted); }
.info-refs summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.info-refs ol { padding-left: 18px; } .info-refs li { margin: 6px 0; }
.info-more { display: inline-flex; align-items: center; gap: 4px; margin: 16px 0 6px; font-size: 16px; font-weight: 600; text-decoration: none; }

/* Nom sanskrit (yoga) : en italique sous le nom de la posture ; ligne réservée sur toute la séance. */
#run-alt { font-size: 16px; font-style: italic; opacity: 0.9; margin-top: 2px; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#run-alt:empty { display: none; }
.run-page.has-alt #run-alt { display: block; min-height: 20px; }
.run-page.has-alt .run-phase > div { min-height: calc(var(--nf) * 2.1 + 44px); }
/* Références dans la fiche d'une routine : liens sans soulignement, comme sur le site. */
.info-refs a { color: var(--accent); text-decoration: none; }

/* ---------- Badges ---------- */
.medal { display: block; overflow: visible; }
.medal .medal-glow { filter: blur(6px); }
.medal.mini { width: 34px; height: 34px; flex: none; }
/* Bouton des badges, en haut à droite de l'accueil */
.badges-btn { position: relative; display: flex; align-items: center; gap: 6px; flex: none; padding: 4px 12px 4px 6px; background: var(--card); border: 1px solid var(--sep); border-radius: 999px; color: var(--text); }
.badges-btn:active { opacity: 0.85; }
.badges-btn b { font: 800 19px/1 var(--display); }
.bb-stack { display: flex; }
.bb-stack .medal.mini { width: 30px; height: 30px; }
.bb-stack .medal + .medal { margin-left: -12px; }
.bb-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--hot); border: 2px solid var(--bg); }
.bw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 16px; }
.bw-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; background: var(--card); border: 1px solid var(--sep); border-radius: 14px; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--text); }
.bw-tile .medal { width: 64px; height: 64px; }
.bw-next { gap: 12px; }
.bw-next-text { flex: 1; min-width: 0; }
.bw-bar { display: block; height: 4px; border-radius: 2px; background: var(--fill); margin-top: 6px; overflow: hidden; }
.bw-bar b { display: block; height: 100%; background: var(--accent-bg); }
.badge-info { text-align: center; }
.badge-info .bi-medal { width: 140px; height: 140px; margin: 4px auto 8px; }
.badge-info h2 { margin: 0 0 6px; font: 800 30px/1.05 var(--display); text-transform: uppercase; }
.bi-status { color: var(--accent); font-weight: 600; margin-top: 10px !important; }
/* Célébration d'un nouveau badge, par-dessus l'écran « Terminé ! » */
.badge-celebrate { position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: #fff;
  background: radial-gradient(70% 50% at 50% 38%, rgba(255, 46, 136, 0.35), transparent 70%), #050507; animation: bc-in 0.35s ease-out; }
.bc-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #FF6FAE; }
.badge-celebrate .bc-medal { width: min(52vw, 220px); height: min(52vw, 220px); animation: bc-pop 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.badge-celebrate h2 { margin: 4px 0 0; font: 800 40px/1 var(--display); text-transform: uppercase; }
.badge-celebrate p { margin: 0 0 16px; max-width: 300px; font-size: 15px; opacity: 0.85; }
.badge-celebrate small { opacity: 0.8; }
.badge-celebrate button.btn-white { min-width: 230px; padding: 15px 24px; border-radius: 16px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
@keyframes bc-in { from { opacity: 0; } }
@keyframes bc-pop { from { transform: scale(0.3) rotate(-12deg); opacity: 0; } }
.badge-celebrate .done-share {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap;
  margin-top: 6px; padding: 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; font-weight: 700;
}
.bw-article { margin: 18px 16px 0; width: calc(100% - 32px); background: var(--card); border: 1px solid var(--sep); border-radius: 14px; }

/* ---------- Partage d'une routine par lien ---------- */
.shared-routine h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font: 800 26px/1.05 var(--display); text-transform: uppercase; }
.shared-routine h2 .cbar { width: 5px; height: 26px; border-radius: 3px; flex: none; }
.sr-from { color: var(--muted); font-size: 14px; margin-bottom: 6px !important; }
.sr-bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; margin: 0 0 14px; }
.sr-bar i { min-width: 2px; }
.sr-steps { list-style: none; margin: 0 0 12px; padding: 0; }
.sr-steps li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 0.5px solid var(--sep); font-size: 15px; }
.sr-steps .bdot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.sr-steps .dur { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.shared-routine .consent-yes { margin: 6px 0 10px; }

/* ---------- Groupes ---------- */
.tab { position: relative; }
/* « has-new » et non « dot » : .dot est déjà la pastille de couleur (22 px, débordement masqué). */
.tab.has-new::after { content: ""; position: absolute; top: 2px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--hot); border: 2px solid var(--bg); }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: var(--card2); flex: none; }
.av.lg { width: 44px; height: 44px; font-size: 24px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--card2); font-size: 13px; font-weight: 600; color: var(--text); }
.chip.on { background: color-mix(in srgb, var(--accent-bg) 22%, transparent); color: var(--accent); }
.group-list { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 0; }
.group-card { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; padding: 14px; border-radius: 18px; background: var(--card); border: 0.5px solid var(--sep); }
.gc-top { display: flex; align-items: center; gap: 12px; }
.gc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-name b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-name small { color: var(--muted); font-size: 13px; }
.gc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hot); flex: none; }
.gc-last { color: var(--muted); font-size: 13.5px; line-height: 1.4; }
.gc-last b { color: var(--text); font-weight: 600; }
.groups-empty { text-align: center; padding: 26px 26px 6px; }
.groups-empty.small { padding-top: 30px; }
.groups-empty p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 14px; }
.groups-empty h2 { font: 800 26px/1.1 var(--display); text-transform: uppercase; margin: 6px 0 10px; }
.ge-art { font-size: 54px; }
.group-actions { padding: 18px 16px 30px; display: flex; flex-direction: column; gap: 10px; }
.group-actions .pair-btn { margin: 0; }
.group-form .f-label { display: block; font: 800 14px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 16px 0 8px; }
.group-form .f-label:first-child { margin-top: 2px; }
.f-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--card2); color: var(--text); font-size: 17px; outline: none; }
.emoji-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.emoji-pick button { aspect-ratio: 1; border-radius: 12px; background: var(--card2); font-size: 22px; display: grid; place-items: center; }
.emoji-pick button.on { box-shadow: inset 0 0 0 2px var(--accent); }
.share-opts { background: var(--card2); border-radius: 12px; padding: 2px 12px; margin-bottom: 18px; }
.share-opt { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 0.5px solid var(--sep); font-size: 15px; }
.share-opt:last-child { border: 0; }
.share-opt input { width: 20px; height: 20px; accent-color: var(--accent); margin: 1px 0 0; flex: none; }
.share-opt small { display: block; color: var(--muted); font-size: 13px; }
.gj-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.gj-head h2 { margin: 0; font: 800 24px/1.1 var(--display); text-transform: uppercase; }
.gj-head small { color: var(--muted); font-size: 13px; }
.g-title { max-width: 60vw; }
.g-seg { margin: 8px 16px 6px; }
.g-seg button { flex: 1; }
.feed { list-style: none; margin: 0; padding: 6px 16px 30px; display: flex; flex-direction: column; gap: 10px; }
.post { display: flex; gap: 10px; padding: 12px; border-radius: 16px; background: var(--card); border: 0.5px solid var(--sep); }
.post-body { flex: 1; min-width: 0; font-size: 15px; line-height: 1.45; }
.post .when { color: var(--muted); font-size: 13px; }
.post .what { margin: 2px 0 0; }
.r-pill { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 5px 10px 5px 8px; border-radius: 10px; background: var(--card2); font-weight: 600; font-size: 14px; color: var(--text); max-width: 100%; }
.r-pill::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--c); flex: none; }
.post .what .r-pill { display: flex; width: fit-content; }
.reacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.reacts .chip { min-width: 44px; justify-content: center; padding: 5px 10px; }
.rank-sub { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 16px 10px; }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: 8px; text-align: center; padding: 0 22px; }
.podium .p { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.podium .n { font-weight: 700; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .s { color: var(--muted); font-size: 12px; }
.podium .blk { width: 100%; border-radius: 12px 12px 4px 4px; background: var(--card2); font: 800 24px/1 var(--display); display: grid; place-items: center; }
.podium .p1 .blk { height: 84px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent-bg) 45%, transparent), color-mix(in srgb, var(--accent-bg) 8%, transparent)); color: var(--accent); }
.podium .p2 .blk { height: 60px; }
.podium .p3 .blk { height: 44px; }
.podium .p1 .av { box-shadow: 0 0 0 2px var(--accent); }
.rank-list { list-style: none; margin: 14px 16px 6px; padding: 4px 12px; border-radius: 16px; background: var(--card); }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0.5px solid var(--sep); }
.rank-list li:last-child { border: 0; }
.rank-list li.me .nm { color: var(--accent); }
.rank-list .pos { width: 18px; font: 800 18px var(--display); color: var(--muted); text-align: center; }
.rank-list .nm { flex: 1; min-width: 0; font-weight: 600; display: flex; flex-direction: column; overflow: hidden; }
.rank-list .nm small { color: var(--muted); font-weight: 400; font-size: 12px; }
.rk-dots { display: flex; gap: 4px; }
.rk-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--card2); }
.rk-dots i.on { background: var(--accent-bg); box-shadow: var(--glow); }
.ob-tip.center { text-align: center; padding: 0 20px; }
.groups-empty .ob-tip, .group-page .ob-tip, .shared-routine .ob-tip, .pair-sheet .ob-tip { color: var(--muted); font-size: 13.5px; line-height: 1.45; }

/* ---------- Défis de groupe ---------- */
.ch-feed { padding: 6px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.ch-list { padding: 6px 16px 30px; display: flex; flex-direction: column; gap: 12px; }
.ch-card { border-radius: 18px; padding: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-bg) 16%, var(--card)), var(--card) 70%); border: 0.5px solid color-mix(in srgb, var(--accent-bg) 40%, transparent); }
.ch-card[data-a] { cursor: pointer; }
.ch-card.ended { background: var(--card); border-color: var(--sep); }
.ch-card h3 { font: 800 22px/1.05 var(--display); text-transform: uppercase; margin: 8px 0 2px; }
.ch-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ch-top .link { font-size: 14px; }
.ch-sub { color: var(--muted); font-size: 13px; margin: 0 0 10px; }
.ch-members { display: flex; flex-direction: column; gap: 9px; }
.ch-member { display: flex; align-items: center; gap: 9px; }
.ch-member .av { width: 30px; height: 30px; font-size: 16px; }
.ch-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--card2); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: 4px; background: var(--accent-bg); transition: width .4s; }
.ch-member small { min-width: 40px; text-align: right; color: var(--muted); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.ch-member.done small { color: var(--accent); }
.ch-member.me .av { box-shadow: 0 0 0 2px var(--accent); }
.ch-past { font: 800 16px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 14px 2px 0; }
.ch-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-presets .chip { padding: 8px 12px; font-size: 14px; }
.ch-seg { margin-bottom: 10px; }
.ch-seg button { flex: 1; padding: 7px 4px; font-size: 14px; }
.ch-preview { text-align: center; font: 800 20px/1.2 var(--display); text-transform: uppercase; margin: 14px 0 !important; color: var(--accent); }
.ch-pill { color: var(--text); }
.notify-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--card2); border-radius: 12px; padding: 10px 12px; margin: -6px 0 18px; border: 0; }

/* Son coupé pendant une séance : bandeau discret posé sous l'en-tête (position absolue : aucun décalage). */
.run-top { position: relative; }
.run-mute { position: absolute; top: calc(env(safe-area-inset-top) + 54px); left: 50%; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 7px 14px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 14px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.run-mute b { color: var(--lime); }

/* ---------- Musculation : séance (série / repos / fin) ---------- */
.strength-page { --phase: #0A84FF; }
.strength-page.st-rest-page { --phase: #30D158; }
.strength-page.st-done-page { --phase: #5856D6; }
.strength-page .run-nav { padding: calc(env(safe-area-inset-top) + 6px + min(env(safe-area-inset-top), 14px)) 14px 0; grid-template-columns: 44px minmax(0, 1fr) auto 44px; gap: 6px; }
.st-clock { text-align: right; font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; opacity: .85; }
.st-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 8px 20px calc(env(safe-area-inset-bottom) + 16px); }
.st-ex { text-align: center; font: 800 clamp(28px, 9vw, 40px)/1 var(--display); text-transform: uppercase; margin-top: 4px; }
.st-setof { text-align: center; font: 800 16px/1 var(--display); letter-spacing: .14em; opacity: .85; text-transform: uppercase; }
.st-dots { display: flex; justify-content: center; gap: 6px; }
.st-dots i { width: 28px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.st-dots i.on { background: var(--lime); } .st-dots i.cur { background: #fff; }
.st-done { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 24px; }
.st-done span { font-size: 13px; padding: 3px 9px; border-radius: 8px; background: rgba(198, 255, 61, .14); color: var(--lime); font-weight: 700; }
.st-last, .st-target { text-align: center; font-size: 14px; opacity: .85; margin: 0; }
.st-sugg { text-align: center; margin: 0; font-size: 14px; font-weight: 700; color: var(--lime); }
.st-steppers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.st-steppers.one { grid-template-columns: minmax(0, 220px); justify-content: center; }
.st-stepper { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px; padding: 12px 10px; text-align: center; }
.st-stepper b { display: block; font: 800 clamp(48px, 15vw, 64px)/1 var(--display); font-variant-numeric: tabular-nums; cursor: pointer; }
.st-stepper small { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.st-stepper div { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; }
.st-stepper button { flex: 1; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .12); font-size: 26px; font-weight: 700; color: #fff; }
.st-validate { margin-top: auto; width: 100%; padding: 18px; border-radius: 18px; background: var(--lime); color: #050507; font: 800 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 24px rgba(198, 255, 61, .35); }
.st-links { display: flex; justify-content: space-between; gap: 10px; }
.st-links button { font-size: 14px; opacity: .8; padding: 6px 2px; color: #fff; }
.st-pr { text-align: center; background: linear-gradient(90deg, rgba(255, 176, 32, .28), rgba(255, 46, 136, .22)); border: 1px solid rgba(255, 176, 32, .55); border-radius: 14px; padding: 10px; font-weight: 700; font-size: 14px; }
.st-ring { position: relative; width: min(64vw, 240px); aspect-ratio: 1; margin: 6px auto 0; }
.st-ring svg { width: 100%; height: 100%; }
.st-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.st-ring b { font: 800 clamp(56px, 18vw, 76px)/1 var(--display); font-variant-numeric: tabular-nums; }
.st-ring small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.st-rest-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-rest-btns button { padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .1); font-weight: 700; font-size: 16px; color: #fff; }
.st-rest-btns .accent { color: var(--lime); }
.st-next { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.st-next small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.st-next b { font-size: 17px; } .st-next span { font-size: 14px; opacity: .8; }
.st-title { text-align: center; margin: 6px 0 2px; font: 800 40px/1 var(--display); text-transform: uppercase; }
.st-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.st-stats div { background: rgba(255, 255, 255, .07); border-radius: 14px; padding: 10px 6px; text-align: center; }
.st-stats b { display: block; font: 800 24px/1.1 var(--display); }
.st-stats small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.st-recap { background: rgba(255, 255, 255, .06); border-radius: 16px; padding: 4px 14px; font-size: 14px; }
.st-recap div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.st-recap div:last-child { border: 0; }
.st-recap span:last-child { opacity: .8; text-align: right; }
.st-tip { margin: 0; background: rgba(198, 255, 61, .1); border: 1px solid rgba(198, 255, 61, .35); border-radius: 14px; padding: 10px 12px; font-size: 14px; line-height: 1.4; }
.st-tip b { color: var(--lime); }
.st-finish .st-validate { margin-top: 6px; }
.st-finish .pair-btn { background: rgba(255, 255, 255, .1); }

/* ---------- Progression (historique de musculation) ---------- */
.prog-entry { display: flex; align-items: center; justify-content: space-between; width: calc(100% - 32px); margin: 8px 16px 4px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 0.5px solid var(--sep); font-weight: 600; color: var(--text); }
.prog-entry svg { color: var(--muted); }
.progress-page .page-stats { margin: 16px 16px 0; }
.progress-page .page-stats div { background: var(--card); color: var(--text); }
.progress-page .page-stats .gold b { color: #FFB020; }
.prog-chart { margin: 14px 16px 0; padding: 12px; border-radius: 16px; background: var(--card); }
.prog-chart .seg { margin-bottom: 10px; } .prog-chart .seg button { flex: 1; font-size: 13px; padding: 6px 4px; }
.prog-svg { width: 100%; height: auto; display: block; }
.trend { font-style: normal; font-size: 12px; color: var(--accent); margin-left: 4px; }
.lift-name { width: 100%; border: 0; background: transparent; color: var(--text); font-size: 17px; outline: none; padding: 4px 0; }
.intent-cell .lib-text { flex: 1; }
.prog-val { white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.prog-val > span { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.prog-val .trend { margin: 0; }
.st-segs { margin: 6px 20px 0; flex: none; }
.st-segs i.cur { background: rgba(255, 255, 255, .8); }
.st-gap { flex: none; width: 5px; }

/* ---------- Profil ---------- */
.pf-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.pf-chip { padding: 9px 14px; font-size: 15px; border: 1px solid transparent; }
.pf-chip.on { background: color-mix(in srgb, var(--accent-bg) 22%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent-bg) 60%, transparent); }
.profile-form .f-label small { font: 500 12px/1 -apple-system, system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); }
.profile-form .ob-tip { margin-top: 18px !important; color: var(--muted); font-size: 13px; line-height: 1.45; }
.for-you { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent-bg) 22%, transparent); color: var(--accent); font-size: 11px; letter-spacing: .06em; vertical-align: 2px; }

/* ---------- Confidentialité ---------- */
.privacy { padding-left: 20px; padding-right: 20px; }
.privacy h2 { font-family: var(--display); font-size: 19px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 22px 0 6px; }
.privacy p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.privacy .pv-lead { margin-top: 12px; font-size: 16px; }
.acct-legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.acct-legal .link { font-size: inherit; padding: 0; }
.privacy .pv-date { margin-top: 24px; font-size: 13px; color: var(--muted); }
.profile-form .ob-tip .link { padding: 0; font-size: inherit; }

/* ---------- Ressenti après la séance ---------- */
/* L'écran de fin peut défiler (question du ressenti, paysage) : centré tant qu'il y a la place. */
.done-overlay { justify-content: flex-start; overflow-y: auto; }
.done-overlay > :first-child { margin-top: auto; }
.done-overlay > :last-child { margin-bottom: auto; }
#done-feel:empty { display: none; }
.feel-ask { width: min(100%, 340px); margin: 0 auto 8px; padding: 14px 12px 10px; border-radius: 18px; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); text-align: center; }
.feel-ask .fa-q { display: block; font: 800 22px/1 var(--display); text-transform: uppercase; letter-spacing: 0.04em; }
.feel-ask small { display: block; margin-top: 5px; font-size: 12px; opacity: 0.7; }
.fa-scale { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin-top: 12px; }
.done-overlay .fa-scale button, .fa-scale button { min-width: 0; height: 36px; padding: 0; border-radius: 9px; background: var(--c); color: #050507; font: 800 17px/1 var(--display); letter-spacing: 0; opacity: 0.42; transition: transform .15s, opacity .15s; }
.done-overlay .fa-scale button.on, .fa-scale button.on { opacity: 1; transform: scale(1.15); box-shadow: 0 0 0 2px #fff, 0 0 16px var(--c); }
.fa-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; opacity: 0.6; }
.fa-picked { margin-top: 9px; min-height: 19px; font-size: 14px; font-weight: 700; }
.fa-picked em { font-style: normal; }
.fa-feel { display: grid; gap: 7px; margin-top: 12px; }
.done-overlay .fa-feel button, .fa-feel button { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 12px; background: color-mix(in srgb, currentColor 9%, transparent); color: inherit; font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; text-align: left; }
.fa-feel button i { font-style: normal; font-size: 20px; }
.done-overlay .fa-feel button.on, .fa-feel button.on { background: rgba(64, 200, 224, 0.18); box-shadow: 0 0 0 2px #40C8E0 inset; }
.st-finish .feel-ask { margin: 4px 0 6px; }
.feel-sheet { padding: 8px 16px 24px; }
.feel-sheet .feel-ask { width: 100%; }
.fpill { display: table; margin-top: 5px; padding: 4px 9px; border-radius: 999px; background: var(--c); color: #050507; font-size: 12px; font-weight: 800; white-space: nowrap; }
.fpill.calm { background: rgba(64, 200, 224, 0.16); color: #1c9fb8; }
.fpill.add { background: transparent; border: 1px dashed var(--sep); color: var(--muted); font-weight: 600; }
@media (prefers-color-scheme: dark) { .fpill.calm { color: #40C8E0; } }
:root[data-theme="dark"] .fpill.calm { color: #40C8E0; }
.fdots { display: flex; gap: 3px; margin-right: 10px; flex: none; }
.fdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.feel-tip { margin: 12px 16px 0; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent-bg) 50%, transparent); background: color-mix(in srgb, var(--accent-bg) 9%, var(--card)); }
.feel-tip.soft { border-color: rgba(255, 95, 46, 0.45); background: color-mix(in srgb, #FF5F2E 9%, var(--card)); }
.feel-tip > b, .feel-tip-head b { display: block; font-size: 16px; }
.feel-tip-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.feel-tip p { margin: 5px 0 12px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.feel-tip-acts { display: flex; gap: 8px; margin-top: 10px; }
.feel-tip > b + p + .feel-tip-acts { margin-top: 0; }
.feel-tip-acts button { flex: 1; padding: 10px; border-radius: 12px; background: var(--card2); color: var(--accent); font-size: 15px; font-weight: 700; }
.feel-tip-acts button.main { background: var(--accent-bg); color: var(--on-accent); }
.feed-hot { color: #FF5F2E; font-weight: 700; }

/* ---------- Exercices aux répétitions ---------- */
.mode-seg { margin: 20px 16px 0; }
.mode-seg button { flex: 1; }
.cy-name small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.run-time.reps { cursor: pointer; }
/* Bouton central « Fait » : plein, bien visible. */
.reps-now #run-main { background: var(--lime); color: #050507; text-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation: done-pulse 1.8s ease-out infinite; }
/* La coche n'hérite pas du placement de l'anneau (.ring svg : absolu et tourné). */
.reps-now #run-main svg { position: static; inset: auto; transform: none; width: 34%; height: auto; }
.reps-now #run-main b { font-size: min(26px, 12cqi); letter-spacing: 0.08em; line-height: 1; }
.reps-now #run-main:active { background: #b3ec2a; }
.pace-now .ring > svg { opacity: 0; }
@keyframes done-pulse { 0% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0.55); } 70% { box-shadow: 0 0 0 18px rgba(198, 255, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .reps-now #run-main { animation: none; } }
.reps-recap { width: min(100%, 340px); margin: 0 auto 10px; text-align: left; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.reps-recap:empty { display: none; }
.reps-recap div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px; }
.reps-recap div:last-child { border-bottom: 0; }
.reps-recap em { font-style: normal; color: var(--lime); font-weight: 700; }
.reps-recap .up { color: #34C759; } .reps-recap .dn { color: rgba(255, 255, 255, 0.55); font-weight: 600; }
#done-reps { width: min(100%, 340px); }
#done-reps:empty { display: none; }
#done-reps .reps-recap { width: 100%; }
.tp-reps { margin-top: 6px; border-top: 0.5px solid var(--sep); }
/* Lien vers le guide : détaché de la note qui le précède. */
.reps-guide { margin-top: 24px; }

/* ---------- Illustrations des exercices (silhouettes SVG) ---------- */
.move-svg { display: block; overflow: visible; color: #fff; }
.move-svg .fig { fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.move-svg .fig.back { opacity: 0.5; }
.move-svg .acc { fill: none; stroke: var(--lime); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(198, 255, 61, 0.85)); }
.move-svg .head { fill: none; stroke: currentColor; stroke-width: 4.5; }
.move-svg .gnd { stroke: currentColor; opacity: 0.3; stroke-width: 2; stroke-linecap: round; }
.move-svg .prop { fill: none; stroke: currentColor; opacity: 0.4; stroke-width: 3; stroke-linecap: round; }
.move-svg .db { fill: currentColor; }
.move-svg .plate { fill: none; stroke: currentColor; stroke-width: 3.5; }
/* Séance : sous le chrono, le chrono rétrécit un peu ; masquée en paysage (place). */
.run-art { position: relative; flex: 0 1 clamp(70px, 15vh, 140px); min-height: 0; margin-top: 1.2vh; }
/* Élément souple de l'écran : sur un écran court (zones de l'encoche et de la barre d'accueil),
   l'illustration rétrécit la première pour que rien ne se chevauche. */
.run-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.run-art.next svg { opacity: 0.5; }
/* Aperçu de l'exercice suivant : l'étiquette sous la silhouette, centrée (dans un coin, on ne
   voyait pas à quoi elle se rapportait). */
.run-art.next svg { height: calc(100% - 16px); }
.run-art-next { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
/* Portrait seulement : le paysage a ses propres tailles (deux colonnes). */
@media (orientation: portrait) {
  .has-art .run-time { font-size: min(28vw, 18vh); }
  .has-art .run-time.long { font-size: min(20vw, 15vh); }
  .has-art .run-phase { margin-top: 1.5vh; }
  .has-art .run-stats { padding-top: 1.5vh; }
  .has-art .run-bottom { padding-top: 1.5vh; }
  .has-art .ring { width: min(50vw, 26vh); }
}
@media (orientation: landscape) and (max-height: 520px) { .run-art { display: none; } }
/* Éditeur : vignette fixe de l'exercice */
.ex-art { width: 42px; height: 30px; flex: none; margin-right: 10px; border-radius: 8px; background: color-mix(in srgb, var(--c) 70%, #050507); display: grid; place-items: center; overflow: hidden; }
.ex-art .move-svg { width: 100%; height: 100%; }
.ex-art .move-svg .fig, .ex-art .move-svg .head, .ex-art .move-svg .acc { stroke-width: 9; }
.ex-art .move-svg .fig.back { opacity: 0.6; }
.ex-art .move-svg .acc { filter: none; }
.ex-art .move-svg .gnd { display: none; }
.ex-art i, .mv-th i { font-style: normal; font-size: 15px; color: #fff; }
/* Fiche : choix de l'illustration */
.mv-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 0 16px; }
.mv-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 6px 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--sep); color: var(--muted); font-size: 11.5px; line-height: 1.2; text-align: center; }
.mv-tile.on { border-color: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent-bg) inset; color: var(--text); }
.mv-th { width: 100%; height: 54px; border-radius: 8px; background: color-mix(in srgb, #E8445F 55%, #111117); display: grid; place-items: center; }
.mv-th .move-svg { width: 100%; height: 100%; }
.mv-th .move-svg .fig, .mv-th .move-svg .head, .mv-th .move-svg .acc { stroke-width: 6; }

/* Musculation : silhouette de l'exercice (souple : rétrécit la première sur un écran court) */
.st-art { position: relative; flex: 0 1 clamp(60px, 14vh, 130px); min-height: 0; }
.st-art .move-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-next { position: relative; }
.st-next:has(.st-next-art) { padding-right: 112px; }
.st-next-art { position: absolute; right: 10px; top: 8px; bottom: 8px; width: 92px; }
.st-next-art .move-svg { width: 100%; height: 100%; }
.lift-cell-name { flex: 1; min-width: 0; text-align: left; }

/* ---------- Musique des séances ---------- */
.music-pick { padding: 4px 16px 18px; }
.mp-opt { display: flex; align-items: center; gap: 6px; border-bottom: 0.5px solid var(--sep); }
.mp-opt:last-of-type { border-bottom: 0; }
.mp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 0; text-align: left; color: var(--text); }
.mp-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--card2); flex: none; }
.mp-txt { flex: 1; min-width: 0; } .mp-txt b { display: block; font-size: 16px; } .mp-txt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.mp-ck { color: var(--accent); flex: none; }
.mp-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: var(--accent); background: color-mix(in srgb, var(--accent-bg) 16%, var(--card2)); border: 1px solid color-mix(in srgb, var(--accent-bg) 35%, transparent); transition: transform .15s, background .2s; }
.mp-play:active { transform: scale(0.92); }
.mp-play svg { width: 16px; height: 16px; margin-left: 2px; }
/* En lecture : bouton plein avec un égaliseur animé ; un toucher arrête. */
.mp-play.on { background: var(--accent-bg); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 16px rgba(198, 255, 61, 0.45); }
.mp-eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.mp-eq b { width: 3px; height: 6px; border-radius: 1.5px; background: currentColor; animation: mp-eq 0.9s ease-in-out infinite; }
.mp-eq b:nth-child(2) { animation-delay: -0.45s; } .mp-eq b:nth-child(3) { animation-delay: -0.2s; } .mp-eq b:nth-child(4) { animation-delay: -0.65s; }
@keyframes mp-eq { 0%, 100% { height: 4px; } 50% { height: 16px; } }
@media (prefers-reduced-motion: reduce) { .mp-eq b { animation: none; height: 10px; } }
.mp-opt.on .mp-ic { background: color-mix(in srgb, var(--accent-bg) 25%, var(--card2)); }
.mp-link { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.mp-link label { font-size: 13px; color: var(--muted); font-weight: 600; }
.mp-link input { font: inherit; font-size: 16px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--sep); background: var(--card); color: var(--text); width: 100%; }
.mp-link small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
/* À la place de la ligne « Ensuite » (masquée tant que le bouton est là) : aucun décalage. */
.run-bottom { position: relative; }
.run-playlist { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 12px); left: 50%; transform: translateX(-50%); z-index: 3; white-space: nowrap; padding: 10px 18px; border-radius: 999px; background: #1DB954; color: #04140a; font-size: 15px; font-weight: 800; box-shadow: 0 6px 18px rgba(29, 185, 84, 0.4); }
.run-playlist[hidden] { display: none; }

/* ---------- Communauté : pouls, défi du mois, compteurs ---------- */
#community:empty { display: none; }
#community { margin: 12px 16px 0; display: flex; flex-direction: column; gap: 10px; }
.cm-pulse { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); padding: 0 4px; }
.cm-pulse b { color: var(--text); font-weight: 600; }
.cm-pulse i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-bg); flex: none; animation: cm-pulse 1.8s infinite; }
@keyframes cm-pulse { 0% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0.55); } 80% { box-shadow: 0 0 0 9px rgba(198, 255, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); } }
@media (prefers-reduced-motion: reduce) { .cm-pulse i { animation: none; } }
.cm-card { position: relative; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent-bg) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent-bg) 13%, var(--card)), color-mix(in srgb, #40C8E0 7%, var(--card))); }
.cm-open { display: flex; flex-direction: column; width: 100%; padding: 13px 14px 12px; text-align: left; color: var(--text); }
.cm-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-right: 26px; }
.cm-top b { font: 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: 0.03em; }
.cm-top small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.cm-goal { font-size: 14px; margin-top: 4px; }
.cm-bar { position: relative; display: block; height: 10px; border-radius: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); margin: 10px 0 7px; overflow: hidden; }
.cm-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent-bg); box-shadow: 0 0 10px rgba(198, 255, 61, 0.55); }
.cm-bar u { position: absolute; top: 0; bottom: 0; background: var(--text); opacity: 0.85; text-decoration: none; }
.cm-nums { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }
.cm-nums b { color: var(--text); }
.cm-x { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); }
.cm-counters { display: flex; gap: 10px; }
.cm-counters div { flex: 1; border-radius: 14px; padding: 11px 12px; border: 1px solid color-mix(in srgb, var(--accent-bg) 35%, transparent); background: color-mix(in srgb, var(--accent-bg) 8%, var(--card)); }
.cm-counters b { display: block; font: 800 24px/1 var(--display); color: var(--accent); }
.cm-counters small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.cm-sheet { padding: 6px 0 18px; }
.cm-big { text-align: center; font: 800 52px/1 var(--display); margin-top: 6px; }
.cm-big em { font-style: normal; color: var(--accent); }
.cm-sub { text-align: center; color: var(--muted); font-size: 14px; margin: 6px 16px 0; }
.cm-sheet .cm-bar { margin: 14px 16px 16px; }
#done-comm:empty { display: none; }
#done-comm { width: min(100%, 340px); margin: 0 auto 8px; text-align: center; }
#done-comm p { margin: 0 0 6px; font-size: 14px; line-height: 1.45; text-transform: none; letter-spacing: 0; font-weight: 500; opacity: 0.9; }
#done-comm .dc-together { padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 1; }
#done-comm b { color: var(--lime); }

/* Écran de fin en paysage : deux colonnes (bilan et boutons à gauche, ressenti à droite),
   pour que tout tienne sans défiler sur un téléphone couché. */
@media (orientation: landscape) and (max-height: 600px) {
  .done-overlay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 7px; align-content: center; justify-items: center; padding: 14px max(24px, env(safe-area-inset-right)) 14px max(24px, env(safe-area-inset-left)); }
  .done-overlay > * { grid-column: 1; }
  .done-overlay > :first-child, .done-overlay > :last-child { margin: 0; }
  .done-overlay h2 { font-size: 40px; }
  .done-overlay p { margin-bottom: 2px; }
  .done-overlay #done-feel { grid-column: 2; grid-row: 1 / span 8; align-self: center; width: 100%; }
  .done-overlay #done-feel .feel-ask { margin: 0 auto; }
  .done-overlay #done-comm { margin-bottom: 2px; }
  .done-overlay #done-comm p { margin-bottom: 2px; }
  .done-overlay #done-comm .dc-together { padding: 7px 12px; }
  .done-overlay button { padding: 10px 24px; }
  .done-overlay .done-share { margin-top: 0; padding: 8px 18px; }
  .done-overlay:has(> #done-feel:empty) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- En famille : chemin des animaux, consigne, écran de fin « collection » ---------- */
.run-page.kids .segs { display: none; }
.kid-trail { flex: none; margin-top: 8px; min-height: 54px; text-align: center; }
.kid-trail div { display: flex; gap: 6px; justify-content: center; }
.kid-trail span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(0, 0, 0, 0.25); filter: grayscale(1); opacity: 0.5; transition: transform 0.25s; }
.kid-trail span.ok { filter: none; opacity: 0.9; background: rgba(255, 255, 255, 0.2); }
.kid-trail span.on { filter: none; opacity: 1; background: #fff; transform: scale(1.18); box-shadow: 0 0 14px rgba(255, 255, 255, 0.6); }
.kid-trail span.next { filter: none; opacity: 1; background: rgba(255, 255, 255, 0.25); animation: kid-next 0.9s ease-in-out infinite alternate; }
@keyframes kid-next { to { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .kid-trail span.next { animation: none; } }
.kid-trail small { display: block; margin-top: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
/* Consigne de l'animal : deux lignes réservées (pas de décalage d'une phase à l'autre). */
.run-page.kids #run-sub { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; line-height: 1.35; min-height: 2.7em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.run-page.kids .done-overlay { background: radial-gradient(120% 60% at 50% 30%, rgba(255, 184, 0, 0.2), transparent 70%), #050507; }
.run-page.kids .done-overlay h2 { color: #FFB800; text-shadow: 0 0 30px rgba(255, 184, 0, 0.55); }
.kid-stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 2px auto 0; }
.kid-stickers div { border-radius: 16px; padding: 9px 4px 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 184, 0, 0.4); }
.kid-stickers span { display: block; font-size: 30px; line-height: 1.15; transform: rotate(var(--r, 0deg)); }
.kid-stickers small { display: block; margin-top: 3px; font-size: 11px; line-height: 1.25; opacity: 0.75; }
.done-overlay p.kid-met { margin: 10px 0 4px; font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0; }
@media (orientation: landscape) and (max-height: 600px) {
  .run-page.kids #done-reps { width: min(100%, 660px); }
  .kid-stickers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
  .kid-stickers div { width: 64px; padding: 6px 2px; }
  .kid-trail { margin-top: 2px; min-height: 0; }
  .kid-trail span { width: 26px; height: 26px; font-size: 14px; }
  .kid-trail small { display: none; }
  .kid-stickers span { font-size: 24px; }
  .kid-stickers small { font-size: 10px; }
  .done-overlay p.kid-met { margin: 4px 0 0; }
}
/* Portrait : l'animal à imiter passe avant les chiffres. Écoulé / restant masqués, chrono plus
   petit, et une hauteur garantie pour la silhouette (sur iPhone, l'encoche et la barre d'accueil
   réduisent la place : l'illustration, seul élément souple, était écrasée). */
@media (orientation: portrait) {
  .run-page.kids .run-stats { display: none; }
  .run-page.kids .run-time { font-size: min(24vw, 13vh); }
  .run-page.kids .run-art { flex: 1 1 auto; min-height: 110px; max-height: 210px; margin-top: 1vh; }
  .run-page.kids .run-phase { margin-top: 1vh; }
}

/* ---------- Matériel, « Pour toi », Composer ma routine ---------- */
.lib-missing .lib-emoji, .lib-missing .lib-text, .lib-missing .lib-dur { opacity: 0.5; }
.lib-lock { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--muted); }
.lib-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.lib-why i { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--accent-bg) 16%, transparent); color: var(--accent); }
.lib-compose { margin-top: 14px; }
.lib-compose .cell { border: 1px dashed color-mix(in srgb, var(--accent-bg) 60%, transparent); border-radius: inherit; }
.lib-compose .lib-text { color: var(--accent); font-weight: 700; }
.empty-compose { display: block; margin: 18px auto 0; padding: 12px 18px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--accent-bg) 60%, transparent); color: var(--accent); font-weight: 700; font-size: 15px; }
.cp-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cp-seg button { flex: 1; padding: 9px 2px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--muted); }
.cp-seg button.on { background: var(--accent-bg); color: var(--on-accent); }
.compose .consent-yes { margin-top: 18px; }
.cp-name { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 26px/1.05 var(--display); text-transform: uppercase; }
.cp-name .cbar { height: 26px; width: 5px; }
.cp-meta { margin: 6px 0 12px; color: var(--muted); font-size: 14px; }
.cp-list { display: flex; flex-direction: column; gap: 6px; }
.cp-ex { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.cp-ex .ex-art { width: 54px; height: 36px; }
.cp-txt { flex: 1; min-width: 0; font-size: 15px; }
.cp-txt b { font-weight: 600; }
.cp-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 5px; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 1px; }
.cp-legs { background: rgba(255, 149, 0, 0.18); color: #FF9500; }
.cp-hinge { background: rgba(255, 55, 95, 0.18); color: #FF5F7E; }
.cp-push { background: rgba(255, 46, 136, 0.18); color: #FF5FA2; }
.cp-pull { background: rgba(10, 132, 255, 0.2); color: #5AB0FF; }
.cp-core { background: rgba(175, 82, 222, 0.2); color: #C78BEA; }
.cp-cardio { background: color-mix(in srgb, var(--accent-bg) 18%, transparent); color: var(--accent); }
.cp-sub { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-why { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, currentColor 5%, transparent); font-size: 13.5px; color: var(--muted); }
.cp-why b { color: var(--text); }
.cp-why ul { margin: 6px 0 0; padding-left: 18px; }
.cp-why li { margin-bottom: 3px; }
.cp-row { display: flex; gap: 8px; margin-top: 14px; }
.cp-row .pair-btn { flex: 1; margin: 0; }

/* ---------- Séance en direct à plusieurs ---------- */
.lv-card { margin: 0 16px 12px; padding: 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(255, 46, 136, 0.18), color-mix(in srgb, var(--accent-bg) 8%, var(--card))); border: 1px solid rgba(255, 46, 136, 0.45); }
.lv-card h3 { margin: 6px 0 2px; font: 800 22px/1.05 var(--display); text-transform: uppercase; }
.lv-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #FF5FA2; }
.lv-tag i { width: 8px; height: 8px; border-radius: 50%; background: #FF2E88; animation: lv-pulse 1.6s infinite; flex: none; }
@keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0.6); } 80% { box-shadow: 0 0 0 8px rgba(255, 46, 136, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 46, 136, 0); } }
@media (prefers-reduced-motion: reduce) { .lv-tag i { animation: none; } }
.lv-people { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.lv-btns { display: flex; gap: 8px; align-items: center; }
.lv-btns .consent-yes { flex: 1; margin: 0; padding: 12px; border-radius: 12px; font-size: 16px; }
.lv-btns .pair-btn { margin: 0; width: auto; padding: 12px 16px; }
.lv-going { flex: 1; font-weight: 700; color: var(--accent); }
.lv-launch { display: block; width: calc(100% - 32px); margin: 0 16px 12px; }
.lv-list { display: flex; flex-direction: column; gap: 6px; }
.lv-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 15px; text-align: left; color: var(--text); }
.lv-opt span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-opt small { color: var(--muted); font-variant-numeric: tabular-nums; }
.lv-opt .cbar { height: 22px; }
.lv-opt.on { border-color: var(--accent-bg); box-shadow: 0 0 0 1px var(--accent-bg) inset; }
.live-page { background: radial-gradient(120% 50% at 50% 25%, rgba(255, 46, 136, 0.16), transparent 70%), var(--bg); }
.lv-lobby { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 20px calc(env(safe-area-inset-bottom) + 20px); overflow-y: auto; flex: 1; }
.lv-lobby h2 { margin: 8px 0 0; font: 800 34px/1 var(--display); text-transform: uppercase; }
.lv-meta { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.lv-count { margin: 22px auto 8px; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; border: 4px solid #FF2E88; box-shadow: 0 0 30px rgba(255, 46, 136, 0.4); }
.lv-count b { display: block; font: 800 50px/1 var(--display); font-variant-numeric: tabular-nums; }
.lv-count small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.lv-who { width: 100%; max-width: 420px; margin-top: 14px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.lv-who .lbl { font: 800 13px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.lv-who > div:not(.lbl) { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.lv-who > div.off { opacity: 0.55; }
.lv-who span:last-child { margin-left: auto; font-size: 13px; color: var(--muted); }
.lv-who span.ok { color: var(--accent); font-weight: 700; }
.lv-actions { width: 100%; max-width: 420px; margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.lv-actions .consent-yes, .lv-actions .pair-btn { margin: 0; }
/* En séance : pastille « En direct », avatars des présents, réactions qui s'envolent. */
.lv-bar { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; flex: none; min-height: 34px; }
.lv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lv-pill i { width: 7px; height: 7px; border-radius: 50%; background: #FF2E88; animation: lv-pulse 1.6s infinite; }
.lv-avs { display: flex; gap: 5px; }
.lv-av { position: relative; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(0, 0, 0, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.6); }
.lv-pop { position: absolute; left: 50%; top: -6px; font-style: normal; font-size: 20px; pointer-events: none; animation: lv-up 2s ease-out forwards; }
@keyframes lv-up { 0% { opacity: 0; transform: translate(-50%, 8px) scale(0.6); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -34px) scale(1); } }
.lv-note { width: 100%; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }
.lv-reacts { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }
.lv-reacts button { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 21px; display: grid; place-items: center; }
.lv-reacts button:active { transform: scale(1.15); }
/* Chrono commun : pas de saut de phase, ni de « recommencer », ni de modification en direct. */
.run-page.live-run .run-phase > button, .run-page.live-run #run-side, .run-page.live-run .run-nav [data-action="edit"] { visibility: hidden; }
/* Lancer une séance en direct : routines bien distinctes, choix du départ sur une ligne, bouton espacé. */
.lv-create .lv-list { gap: 8px; }
.lv-create .lv-opt { padding: 13px 14px; gap: 12px; background: color-mix(in srgb, currentColor 6%, transparent); border-color: color-mix(in srgb, currentColor 12%, transparent); }
.lv-create .lv-opt small { margin-left: 12px; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, currentColor 8%, transparent); font-size: 13px; font-weight: 600; }
.lv-create .lv-opt.on { background: color-mix(in srgb, var(--accent-bg) 10%, transparent); }
.lv-create .lv-opt.on small { background: color-mix(in srgb, var(--accent-bg) 22%, transparent); color: var(--accent); }
.lv-create .cp-seg button { white-space: nowrap; }
.lv-create .consent-yes { margin-top: 24px; }

/* ---------- Installation : mini Safari animé (iPhone) et relance « Garde tes progrès » ---------- */
/* Chronologie sur 12 s : ••• (0-25 %), Partager (25-50 %), Sur l'écran d'accueil + Ajouter (50-75 %), icône (75-100 %).
   Couleurs fixes : c'est l'image de Safari, pas l'interface de l'app. */
.ins-demo { position: relative; width: 210px; height: 236px; margin: 6px auto 10px; border-radius: 22px; border: 2px solid #33333d; background: #f2f2f7; overflow: hidden; color: #111; flex: none; font: 500 11px/1.3 -apple-system, system-ui, sans-serif; text-align: left; }
.ins-pg { position: absolute; inset: 0 0 44px; background: linear-gradient(160deg, #0b0b10, #1d2a0c); color: #fff; display: grid; place-items: center; font: 800 22px/1 var(--display); letter-spacing: 0.06em; }
.ins-pg em { font-style: normal; color: #C6FF3D; }
.ins-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: rgba(245, 245, 247, 0.97); display: flex; align-items: center; justify-content: space-around; padding: 0 6px; border-top: 1px solid #ddd; color: #0A84FF; font-size: 15px; }
.ins-url { flex: 1; margin: 0 6px; height: 26px; border-radius: 9px; background: #e3e3e8; font-size: 10px; font-weight: 600; line-height: 26px; text-align: center; color: #333; }
.ins-menu, .ins-share, .ins-add { position: absolute; left: 8px; right: 8px; border-radius: 14px; background: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); opacity: 0; }
.ins-menu > div, .ins-share > div:not(.ins-apps) { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #eee; }
.ins-menu > div:last-child, .ins-share > div:last-child { border: 0; }
.ins-demo .hl { background: #e8f1ff; color: #0A84FF; font-weight: 700; }
.ins-menu { bottom: 50px; padding: 4px 0; animation: ins-m1 12s infinite; }
.ins-share { bottom: 4px; padding: 8px 0 4px; animation: ins-s1 12s infinite; }
.ins-apps { display: flex; gap: 8px; padding: 2px 12px 8px; border-bottom: 1px solid #eee; }
.ins-apps i { width: 28px; height: 28px; border-radius: 8px; background: #ddd; }
.ins-add { top: 28px; padding: 10px 12px; animation: ins-a1 12s infinite; }
.ins-top { display: flex; justify-content: space-between; color: #0A84FF; font-weight: 600; margin-bottom: 8px; }
.ins-top b { color: #111; }
.ins-ic { display: flex; gap: 8px; align-items: center; }
.ins-ic i, .ins-home i.fp { width: 34px; height: 34px; border-radius: 9px; background: #050507; display: grid; place-items: center; color: #C6FF3D; font: 800 13px/1 var(--display); font-style: normal; }
.ins-home { position: absolute; inset: 0; background: linear-gradient(160deg, #3a4f7a, #182033); opacity: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 22px 16px; align-content: start; animation: ins-h1 12s infinite; }
.ins-home i { width: 34px; height: 34px; border-radius: 9px; background: rgba(255, 255, 255, 0.25); justify-self: center; }
.ins-home i.fp { box-shadow: 0 0 0 2px #C6FF3D; animation: ins-pop 12s infinite; }
.ins-tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(10, 132, 255, 0.25); border: 2px solid #0A84FF; opacity: 0; pointer-events: none; }
.ins-tap.t1 { left: 182px; top: 214px; animation: ins-tap1 12s infinite; }
.ins-tap.t2 { left: 70px; top: 150px; animation: ins-tap2 12s infinite; }
.ins-tap.t3 { left: 90px; top: 194px; animation: ins-tap3 12s infinite; }
.ins-tap.t4 { left: 182px; top: 42px; animation: ins-tap4 12s infinite; }
@keyframes ins-tap1 { 0%, 8% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1); } 18%, 100% { opacity: 0; } }
@keyframes ins-m1 { 0%, 15% { opacity: 0; transform: translateY(12px); } 19%, 40% { opacity: 1; transform: none; } 44%, 100% { opacity: 0; } }
@keyframes ins-tap2 { 0%, 30% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; transform: scale(1); } 41%, 100% { opacity: 0; } }
@keyframes ins-s1 { 0%, 44% { opacity: 0; transform: translateY(12px); } 48%, 63% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; } }
@keyframes ins-tap3 { 0%, 53% { opacity: 0; transform: scale(0.6); } 58% { opacity: 1; transform: scale(1); } 64%, 100% { opacity: 0; } }
@keyframes ins-a1 { 0%, 64% { opacity: 0; } 67%, 80% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes ins-tap4 { 0%, 72% { opacity: 0; transform: scale(0.6); } 76% { opacity: 1; transform: scale(1); } 81%, 100% { opacity: 0; } }
@keyframes ins-h1 { 0%, 81% { opacity: 0; } 85%, 98% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ins-pop { 0%, 84% { transform: scale(0.4); } 89% { transform: scale(1.15); } 92%, 100% { transform: scale(1); } }
/* Étapes synchronisées : la ligne du geste en cours s'allume. */
.ins-sync li { border: 1px solid transparent; }
.ins-sync .ins-k1 { animation: ins-k1 12s infinite; }
.ins-sync .ins-k2 { animation: ins-k2 12s infinite; }
.ins-sync .ins-k3 { animation: ins-k3 12s infinite; }
.ins-sync .ins-k4 { animation: ins-k4 12s infinite; }
@keyframes ins-k1 { 0%, 24% { border-color: var(--accent-bg); } 25%, 100% { border-color: transparent; } }
@keyframes ins-k2 { 0%, 24% { border-color: transparent; } 25%, 49% { border-color: var(--accent-bg); } 50%, 100% { border-color: transparent; } }
@keyframes ins-k3 { 0%, 49% { border-color: transparent; } 50%, 74% { border-color: var(--accent-bg); } 75%, 100% { border-color: transparent; } }
@keyframes ins-k4 { 0%, 74% { border-color: transparent; } 75%, 100% { border-color: var(--accent-bg); } }
@media (prefers-reduced-motion: reduce) { .ins-demo { display: none; } .ins-sync li { animation: none; } }
.ins-nudge { text-align: center; }
.ins-nudge .ins-em { font-size: 40px; }
.ins-nudge h2 { margin: 4px 0 8px; font: 800 26px/1.05 var(--display); text-transform: uppercase; }
.ins-nudge > p { color: var(--muted); }
.ins-nudge .ins-warn { margin: 12px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 184, 0, 0.12); color: #e0a400; font-size: 14px; text-align: left; }
.ins-nudge .install-guide { margin-top: 10px; }
.ob-slide.compact h2 { margin-top: 6px; }
.ob-slide.compact .ins-demo { margin-top: 2px; }
.lv-btns .lv-share { flex: none; width: 48px; padding: 12px 0; display: grid; place-items: center; }
.lv-actions .pair-btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Salle d'attente en paysage : séance et compte à rebours à gauche, présents et boutons à droite. */
@media (orientation: landscape) and (max-height: 600px) {
  .lv-lobby { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 28px; align-content: center; padding: 0 max(24px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(24px, env(safe-area-inset-left)); }
  .lv-lobby > .lv-tag, .lv-lobby > h2, .lv-lobby > .lv-meta, .lv-lobby > .lv-count { grid-column: 1; justify-self: center; }
  .lv-lobby > h2 { font-size: 28px; margin-top: 4px; }
  .lv-count { width: 112px; height: 112px; margin: 12px auto 0; }
  .lv-count b { font-size: 38px; }
  .lv-lobby > .lv-who { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; align-self: end; }
  .lv-lobby > .lv-actions { grid-column: 2; grid-row: 4; margin-top: 0; padding-top: 12px; align-self: end; }
}
/* Séance en direct en portrait : pastille des présents et réactions en plus ; l'illustration garde
   sa place (elle était écrasée sous le nom) : écoulé / restant masqués, chrono et anneau plus compacts. */
@media (orientation: portrait) {
  .run-page.live-run .run-stats { display: none; }
  .run-page.live-run .run-time { font-size: min(24vw, 13vh); }
  .run-page.live-run.has-art .run-art { flex: 1 1 auto; min-height: 100px; max-height: 190px; margin-top: 1vh; }
  .run-page.live-run .run-phase { margin-top: 1vh; }
  .run-page.live-run .ring { width: min(46vw, 24vh); }
  .run-page.live-run .lv-reacts { margin-top: 8px; }
  .run-page.live-run .lv-reacts button { width: 40px; height: 40px; font-size: 19px; }
  .run-page.live-run .next-up { margin-top: 6px; }
}
@media (orientation: landscape) and (max-height: 600px) {
  .run-page.live-run .run-stats { display: none; }
  .run-page.live-run .run-time { font-size: min(17vw, 30vh); }
  .run-page.live-run .lv-bar { margin-top: 2px; min-height: 0; }
  .run-page.live-run .lv-reacts { margin-top: 8px; }
}
/* Fil d'un groupe : de l'air entre les onglets (Fil, Défis, Classement) et la séance en direct. */
.g-seg + .lv-card, .g-seg + .lv-launch { margin-top: 18px; }
/* Fin d'une séance en direct : carte festive (pastille, titre, avec qui) et confettis qui jaillissent. */
#done-comm .dc-live { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 14px 12px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 46, 136, 0.28), rgba(198, 255, 61, 0.14)); border: 1px solid rgba(255, 46, 136, 0.55); box-shadow: 0 0 26px rgba(255, 46, 136, 0.25); animation: dc-in 0.5s cubic-bezier(.2, 1.4, .4, 1) both; }
#done-comm .dc-live b { color: #fff; font: 800 26px/1.05 var(--display); text-transform: uppercase; letter-spacing: 0.02em; }
#done-comm .dc-live small { font-size: 14px; opacity: 0.85; }
#done-comm .dc-live .lv-tag { font-size: 11px; }
.dc-conf { position: absolute; left: 50%; top: 18px; pointer-events: none; }
.dc-conf i { position: absolute; left: 0; top: 0; font-style: normal; font-size: 20px; opacity: 0; animation: dc-burst 1.4s ease-out var(--d) forwards; }
@keyframes dc-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes dc-burst { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--x)), -70px) scale(1.1) rotate(25deg); } }
@media (prefers-reduced-motion: reduce) { #done-comm .dc-live, .dc-conf i { animation: none; } }
/* Salle d'attente : statuts en pastilles (en séance, prêt·e, arrive…, a dit « Je viens »). */
.lv-st { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.lv-st.ok { background: color-mix(in srgb, var(--accent-bg) 18%, transparent); color: var(--accent); }
.lv-st.run { background: rgba(255, 46, 136, 0.18); color: #FF5FA2; }
.lv-st.run i { width: 7px; height: 7px; border-radius: 50%; background: #FF2E88; animation: lv-pulse 1.6s infinite; }
.lv-st.wait { background: color-mix(in srgb, currentColor 8%, transparent); color: var(--muted); gap: 2px; }
.lv-st.wait i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: lv-dots 1.2s infinite; }
.lv-st.wait i:first-of-type { margin-left: 3px; }
.lv-st.wait i:nth-of-type(2) { animation-delay: 0.2s; }
.lv-st.wait i:nth-of-type(3) { animation-delay: 0.4s; }
@keyframes lv-dots { 0%, 60%, 100% { opacity: 0.25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.lv-st.yes { background: none; border: 1px dashed color-mix(in srgb, currentColor 30%, transparent); color: var(--muted); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .lv-st i { animation: none !important; } }
.lv-count.ended { border-color: var(--accent-bg); box-shadow: 0 0 30px color-mix(in srgb, var(--accent-bg) 40%, transparent); }
.lv-count.ended b { color: var(--accent); }
/* Séance en direct : son mis en veille par iOS → une touche pour le réactiver. */
.lv-sound { width: 100%; margin-top: 6px; padding: 9px 12px; border-radius: 12px; background: #FFB800; color: #050507; font-size: 14px; font-weight: 800; }

/* ---------- Compte facultatif : carte de l'accueil, création, connexion ---------- */
.acct-card { margin: 12px 16px 0; border-radius: 16px; padding: 13px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent-bg) 14%, var(--card)), color-mix(in srgb, #40C8E0 8%, var(--card))); border: 1px solid color-mix(in srgb, var(--accent-bg) 45%, transparent); }
.acct-card .h { display: flex; gap: 10px; align-items: center; }
.acct-card .em { font-size: 22px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(0, 0, 0, 0.25); flex: none; }
.acct-card b { display: block; font-size: 15px; }
.acct-card small { color: var(--muted); font-size: 13px; }
.acct-card .row2 { display: flex; gap: 8px; margin-top: 10px; }
.acct-card .row2 > * { flex: 1; margin: 0; padding: 11px; font-size: 14px; }
.acct { text-align: center; }
.acct .acct-h { margin: 4px 0 8px; font: 800 24px/1.05 var(--display); text-transform: uppercase; }
.acct-perks { display: flex; flex-direction: column; gap: 9px; margin: 14px 0; text-align: left; }
.acct-perks div { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; }
.acct-perks i { font-style: normal; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--accent-bg) 14%, transparent); display: grid; place-items: center; flex: none; }
.acct .pair-btn { margin-top: 8px; }
.acct .link { margin-top: 12px; }
.acct-in { width: 100%; height: 48px; margin: 12px 0 4px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 17px; }
.acct-opt { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 13px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-align: left; }
.acct-opt > i:first-child { font-style: normal; font-size: 22px; width: 30px; text-align: center; }
.acct-opt b { display: block; font-size: 15px; }
.acct-opt small { display: block; color: var(--muted); font-size: 12.5px; }
.acct-opt.prim { border-color: var(--accent-bg); background: color-mix(in srgb, var(--accent-bg) 9%, var(--card)); }
.ok-val { color: var(--accent); font-weight: 700; }
/* Rejoindre un groupe : « C'est toi sur un autre appareil ? » à la place du formulaire */
.group-form.asking > :not(.gj-twin) { display: none; }
.gj-twin { text-align: center; padding: 8px 0 4px; }
.gj-twin h2 { margin: 10px 0 6px; font-size: 19px; }
.gj-twin p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.gj-twin .link { margin-top: 10px; }
/* Page de déménagement (ancienne adresse → app.fitpacer.online) */
.move { padding: calc(env(safe-area-inset-top) + 36px) 22px 40px; text-align: center; max-width: 520px; margin: 0 auto; }
.move-ic { font-size: 54px; }
.move h1 { font: 800 34px/1.05 var(--display); text-transform: uppercase; margin: 10px 0 12px; }
.move p { font-size: 15.5px; line-height: 1.5; margin: 0 0 14px; }
.move .wide, .move .pair-btn { display: block; margin: 16px auto 0; text-decoration: none; text-align: center; }
.move .muted-note { color: var(--muted); font-size: 13.5px; }
.move-help { margin-top: 28px; padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--sep); text-align: left; }
.move-help h2 { font: 800 17px var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; }