/* AMRAP20 — design "liquid glass" : panneaux translucides sur fond sombre,
   halos de couleur diffus derrière le verre, liseré clair en haut des surfaces. */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0A0C10;
  --text: #F4F6FA;
  --muted: #8A93A6;
  --muted-2: #B7BFCC;
  --red: #FF3B30;        /* accent : icônes, bordures, jauges — sur fond sombre */
  --red-fill: #E12E22;   /* aplats portant du texte blanc : 4,55:1, seuil WCAG AA atteint
                            (#FF3B30 n'y monte qu'à 3,55:1 et échouait) */
  --red-hi: #FF5A50;
  --red-lo: #F03028;
  --yellow: #FFD60A;
  --green: #34C759;
  --strava: #FC4C02;

  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(20, 25, 33, 0.55);
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --blur: blur(22px) saturate(165%);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --tabbar-h: 82px;

  /* Courbe d'accélération proche de celle des transitions iOS :
     départ franc, arrivée très amortie. */
  --pill-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --pill-dur: 340ms;
  --view-dur: 280ms;
}

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* ---- halos ambiants ---- */
.halo { position: fixed; border-radius: 50%; filter: blur(40px); pointer-events: none; z-index: 0; }
.halo-red { top: -140px; left: -110px; width: 380px; height: 380px;
  background: radial-gradient(circle, rgba(255, 59, 48, 0.28) 0%, rgba(255, 59, 48, 0) 70%); }
.halo-yellow { bottom: -80px; right: -150px; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(255, 214, 10, 0.15) 0%, rgba(255, 214, 10, 0) 70%); }

/* ---- surface en verre ---- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke);
  box-shadow: var(--glass-inset);
}

/* ---- vues ---- */
#views { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.view { display: none; flex-direction: column; gap: 14px;
  padding: calc(var(--safe-t) + 22px) 20px calc(var(--tabbar-h) + var(--safe-b) + 24px) 20px; }
.view.active { display: flex; }

.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
h1 { font-family: 'Anton', Impact, sans-serif; font-size: 1.7rem; letter-spacing: 1px; font-weight: 400; }
h1 span { color: var(--red); }
h2 { font-family: 'Anton', Impact, sans-serif; font-size: 1.7rem; letter-spacing: 1px; font-weight: 400; }

.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px;
  font-size: 0.82rem; font-weight: 700; color: var(--yellow); }

.card { border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.label { font-size: 0.68rem; font-weight: 700; letter-spacing: 3px; color: var(--muted); }
.section-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 3px; color: var(--muted); margin-top: 4px; }
.note { color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

/* ---- carte du défi ---- */
#challenge-card { gap: 2px; }
.move { display: flex; align-items: baseline; gap: 12px; }
.move .num { font-family: 'Anton', Impact, sans-serif; font-size: 2.7rem; color: var(--yellow); min-width: 62px; }
.move .name { font-family: 'Anton', Impact, sans-serif; font-size: 1.6rem; letter-spacing: 2px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 0.8rem; color: var(--muted); flex-wrap: wrap; }
.goal { display: inline-flex; align-items: center; gap: 6px; }
.goal b { color: var(--text); }

/* ---- boutons ---- */
button { font-family: inherit; border: none; cursor: pointer; color: var(--text); background: none; }

/* Bouton principal : pilule pleine, aplat unique.
   Dans une interface entièrement en verre, l'élément opaque n'est pas l'intrus :
   c'est le repère. Ce qui faisait tache, c'était le dégradé (il simule un volume
   physique là où tout le reste est optique), le halo rouge (qui rejouait en double
   les halos du fond) et le liseré interne clair (vocabulaire du verre, appliqué à
   tort sur une surface pleine). Les trois sont supprimés. */
.btn-primary {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 58px; border-radius: 999px;
  font-size: 1.0625rem; font-weight: 700; color: #fff;
  background: var(--red-fill);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s, filter 0.12s;
}
.btn-primary:active { transform: scale(0.97); filter: brightness(0.92); }
.btn-primary:disabled { opacity: 0.55; box-shadow: none; }

.btn-glass {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 18px; border-radius: 18px;
  font-size: 0.9rem; font-weight: 700; color: var(--muted-2);
  background: var(--glass-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset);
}
/* « Terminer » reste neutre : le rouge signifie « l'action », et il est déjà pris
   par « Démarrer ». Le même rouge pour lancer et pour arrêter est une collision
   de sens — arrêter une séance n'est d'ailleurs pas destructeur. */
.btn-glass .sq { width: 11px; height: 11px; background: currentColor; border-radius: 3px; }

.btn-ghost { min-height: 44px; padding: 10px 18px; border-radius: 14px; font-size: 0.85rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.10); border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset); }

.btn-link { min-height: 44px; font-size: 0.82rem; color: var(--muted); text-decoration: underline; }

/* Orange Strava assombri (#FC4C02 → #D64100) : le blanc n'atteignait que 3,40:1
   sur l'orange de marque, contre 4,55:1 ici. On reste dans la famille de teinte. */
.btn-strava { display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 52px; border-radius: 999px; font-size: 1rem; font-weight: 700; color: #fff;
  background: #D64100; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
.btn-strava:disabled { opacity: 0.5; }

.icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; flex-shrink: 0; }

/* Bouton de départ en anneau : anneau de verre + pastille pleine.
   Deux écarts assumés par rapport à la maquette, chacun corrigeant un défaut relevé :
   le libellé est en couleur PRINCIPALE (l'habiller en texte secondaire revenait à
   chuchoter la seule action de l'app), et il est à l'intérieur du bouton pour que
   le contrôle ait un nom accessible et une zone tactile unique. */
.btn-start { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px; }
.btn-start .ring {
  width: 108px; height: 108px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: transform 0.12s;
}
.btn-start .disc {
  width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--red-fill);
  transition: filter 0.12s;
}
/* Un triangle paraît décentré s'il est centré géométriquement. */
.btn-start .disc svg { margin-left: 5px; }
#btn-start-label { font-size: 1.0625rem; font-weight: 700; color: var(--text); }
.btn-start:active .ring { transform: scale(0.96); }
.btn-start:active .disc { filter: brightness(0.92); }
.btn-start:disabled { opacity: 0.55; }
.btn-start:disabled .ring { transform: none; }

.actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#duration-label { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--muted); }

/* ---- option de séance (« filmer la séance ») ----
   Posée sur une surface en verre plutôt qu'en simple case à cocher : c'est un
   choix qui engage la séance entière (batterie, quota), pas un réglage discret. */
.opt { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 16px; border-radius: 18px; cursor: pointer; }
.opt input[type="checkbox"] { flex: none; width: 22px; height: 22px;
  min-height: 0; min-width: 0; padding: 0; margin: 0; accent-color: var(--red); }
.opt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt-title { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; }
.opt-note { color: var(--muted); font-size: 0.74rem; line-height: 1.35; }
/* Jaune vif porteur de texte : c'est le noir du fond qui va dessus, pas du blanc
   (jaune + blanc = 1,7:1). Vérifié par test/contrast.test.mjs. */
.opt .pro { font-size: 0.6rem; font-weight: 700; letter-spacing: 1.5px;
  padding: 3px 7px; border-radius: 6px; background: #FFD60A; color: #0A0C10; }
.opt:has(input:disabled) { opacity: 0.6; cursor: default; }
select, input {
  font-family: inherit; font-size: 0.9rem; color: var(--text);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--glass-stroke);
  border-radius: 12px; padding: 11px 12px; min-height: 44px;
}
select { padding-right: 8px; }
input { flex-grow: 1; min-width: 0; }
input:focus, select:focus { outline: 1px solid var(--red); }

/* ---- listes ---- */
.list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-radius: 18px; padding: 14px 16px; font-size: 0.88rem;
  background: var(--glass-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.list li.me { border-color: rgba(255, 214, 10, 0.45); background: rgba(255, 214, 10, 0.08); }
.list li.empty { justify-content: center; color: var(--muted); }
.li-main { display: flex; flex-direction: column; gap: 2px; }
.li-sub { font-size: 0.75rem; color: var(--muted); }
.li-score { font-family: 'Anton', Impact, sans-serif; font-size: 1.35rem; color: var(--yellow); white-space: nowrap; }
.li-score small { font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; color: var(--muted); }
.li-rank { font-size: 0.8rem; color: var(--muted); min-width: 18px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 700; background: rgba(255, 255, 255, 0.08); flex-shrink: 0; }

/* ---- classement ---- */
.segmented { position: relative; display: flex; border-radius: 999px; padding: 4px; }
.seg { position: relative; z-index: 1; flex-grow: 1; min-height: 44px; border-radius: 999px;
  font-size: 0.85rem; color: var(--muted); transition: color var(--pill-dur) var(--pill-ease); }
.seg.active { color: var(--text); font-weight: 700; }

#podium { display: flex; align-items: flex-end; gap: 12px; }
#podium:empty { display: none; }
.pod { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.pod-avatar { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 700; background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pod-name { font-size: 0.8rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-bar { width: 100%; border-radius: 16px 16px 6px 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--glass-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset); }
.pod-bar .n { font-family: 'Anton', Impact, sans-serif; font-size: 1.5rem; }
.pod-bar .u { font-size: 0.62rem; color: var(--muted); }
.pod.p1 .pod-bar { height: 92px; }
.pod.p2 .pod-bar { height: 64px; }
.pod.p3 .pod-bar { height: 48px; }
.pod.me .pod-avatar, .pod.me .pod-bar { border-color: rgba(255, 214, 10, 0.5); }
.pod.me .pod-avatar, .pod.me .pod-bar .n { color: var(--yellow); }
.pod.me .pod-bar { background: rgba(255, 214, 10, 0.09); }
.crown { color: var(--yellow); }

/* ---- profil ---- */
.stats { display: flex; gap: 10px; }
.stat { flex: 1; border-radius: 20px; padding: 14px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-align: center; }
.stat-num { font-family: 'Anton', Impact, sans-serif; font-size: 1.7rem; color: var(--yellow); }
.stat-lbl { font-size: 0.66rem; color: var(--muted); }
.row { display: flex; gap: 8px; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code { font-family: 'Anton', Impact, sans-serif; font-size: 1.5rem; letter-spacing: 6px; }
.disclaimer { font-size: 0.7rem; color: #5A6272; line-height: 1.5; text-align: center; padding: 4px 4px 0; }
.build { font-size: 0.65rem; color: #454C59; text-align: center; }

/* ---- barre d'onglets flottante ---- */
#tabbar {
  position: fixed; z-index: 20;
  left: 50%; transform: translateX(-50%);
  bottom: calc(var(--safe-b) + 16px);
  width: min(calc(100% - 40px), 480px);
  display: flex; padding: 8px; border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 40px rgba(0, 0, 0, 0.5);
}
.tab { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 9px 0; border-radius: 999px; color: var(--muted); font-size: 0.68rem;
  transition: color var(--pill-dur) var(--pill-ease); }
.tab.active { color: var(--text); font-weight: 700; }
.tab svg { transition: stroke var(--pill-dur) var(--pill-ease); }
.tab.active svg { stroke: var(--red); }

/* La bulle active : un seul élément qu'on déplace, au lieu d'un fond qui saute
   d'un onglet à l'autre. Le navigateur l'anime — via view-transition quand il
   sait le faire (Safari 18+, Chrome), sinon via cette transition CSS. */
#tab-pill, #seg-pill {
  position: absolute; top: 4px; left: 0; height: calc(100% - 8px);
  border-radius: 999px; pointer-events: none; width: 0;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: transform var(--pill-dur) var(--pill-ease), width var(--pill-dur) var(--pill-ease);
}
#tab-pill { top: 8px; height: calc(100% - 16px); view-transition-name: tab-pill; }
/* Le segment est dans une vue masquée au chargement : impossible de le mesurer en JS.
   Le CSS pose donc l'état initial (premier segment actif), le JS prend le relais au clic. */
#seg-pill { width: calc(50% - 4px); view-transition-name: seg-pill; }
/* Pendant une view-transition, c'est le navigateur qui anime la bulle :
   la transition CSS ferait doublon et décalerait la fin du mouvement. */
html.vt #tab-pill, html.vt #seg-pill { transition: none; }

/* ---- scène caméra plein écran ---- */
#stage { position: fixed; inset: 0; z-index: 40; background: #000; overflow: hidden; }
#video, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#stage.manual #video, #stage.manual #overlay { display: none; }
#stage.manual { background: linear-gradient(180deg, #1A1F27 0%, #0A0C10 100%); }

.stage-top { position: absolute; top: calc(var(--safe-t) + 14px); left: 14px; right: 14px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stage-bottom { position: absolute; bottom: calc(var(--safe-b) + 26px); left: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin: 0 auto; }
.stage-title { font-size: 0.95rem; font-weight: 700; letter-spacing: 1px; align-self: center; }

.status { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 16px;
  font-size: 0.9rem; font-weight: 700; }
.status .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.status.ok { color: var(--green); border-color: rgba(52, 199, 89, 0.5); background: rgba(21, 45, 30, 0.45); }
.status.ok .dot { background: var(--green); }
.status.ko { color: var(--red-hi); }
.status.ko .dot { background: var(--red); }

#placement, #hud { position: absolute; inset: 0; }
#placement .stage-top { justify-content: flex-start; gap: 10px; }
.tips { gap: 10px; padding: 16px; }
.tip { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.tip svg { flex-shrink: 0; }
.tip .warn { color: var(--yellow); }

#hint { position: absolute; top: calc(var(--safe-t) + 82px); left: 50%; transform: translateX(-50%);
  max-width: min(88%, 340px); text-align: center; border-radius: 16px; padding: 10px 16px;
  font-size: 0.82rem; font-weight: 500; color: var(--yellow); background: rgba(40, 34, 10, 0.5); }

#countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', Impact, sans-serif; font-size: 7rem; color: var(--yellow);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6); pointer-events: none; }

/* HUD de séance */
#hud { pointer-events: none; }
#hud button, #hud .stage-actions { pointer-events: auto; }
#timer { font-family: 'Anton', Impact, sans-serif; font-size: 2.3rem; letter-spacing: 2px;
  border-radius: 18px; padding: 2px 18px;
  background: rgba(20, 25, 33, 0.42); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset); }
#timer.warning { color: var(--yellow); }
#timer.danger { color: var(--red-hi); }
#round-box { display: flex; flex-direction: column; align-items: center; border-radius: 16px; padding: 6px 13px; }
#round-box .lbl { font-size: 0.6rem; letter-spacing: 3px; color: var(--muted); }
#round { font-family: 'Anton', Impact, sans-serif; font-size: 1.6rem; color: var(--yellow); }

#exo-box { align-items: center; gap: 6px; border-radius: 26px; padding: 16px 20px 20px;
  background: rgba(16, 20, 27, 0.42); box-shadow: var(--glass-inset), 0 16px 40px rgba(0, 0, 0, 0.35); }
#exo-name { font-family: 'Anton', Impact, sans-serif; font-size: 1.25rem; letter-spacing: 5px;
  color: rgba(244, 246, 250, 0.75); }
#exo-count { display: flex; align-items: baseline; gap: 6px; font-family: 'Anton', Impact, sans-serif; }
#exo-done { font-size: 4.4rem; line-height: 1; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
#exo-target { font-size: 2rem; color: rgba(244, 246, 250, 0.55); }
.bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.bar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--red), var(--yellow)); transition: width 0.2s; }

.stage-actions { display: flex; gap: 10px; }
.stage-actions .btn-glass { flex: 1; }

.btn-rep { width: 100%; min-height: 76px; border-radius: 24px;
  font-family: 'Anton', Impact, sans-serif; font-size: 1.6rem; letter-spacing: 3px; color: #0A0C10;
  background: #F5C400;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); }
.btn-rep:active { transform: scale(0.985); }

#camera-error { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10, 12, 16, 0.9); }
#camera-error .card { gap: 12px; max-width: 380px; text-align: center; align-items: stretch; }

/* ---- feuille de résultat ---- */
#summary { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow-y: auto; }
.halo-yellow-top { top: 20px; left: 50%; transform: translateX(-50%); width: 470px; height: 440px;
  background: radial-gradient(circle, rgba(255, 214, 10, 0.20) 0%, rgba(255, 214, 10, 0) 65%); filter: blur(30px); }
.summary-inner { position: relative; z-index: 1; max-width: 480px; margin: 0 auto;
  min-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: calc(var(--safe-t) + 60px) 22px calc(var(--safe-b) + 32px); }
.summary-inner .label { letter-spacing: 5px; }
#summary-rounds { font-family: 'Anton', Impact, sans-serif; font-size: 9rem; line-height: 1; color: var(--yellow);
  text-shadow: 0 0 60px rgba(255, 214, 10, 0.35); }
.rounds-lbl { font-family: 'Anton', Impact, sans-serif; font-size: 1.7rem; letter-spacing: 8px; }
#summary-detail { text-align: center; margin-top: 6px; }
#summary-streak { margin-top: 12px; }
.goal-card { width: 100%; margin-top: 24px; border-radius: 20px; }
.summary-actions { width: 100%; margin-top: auto; padding-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.summary-row { display: flex; gap: 10px; }
.summary-row .btn-glass { flex: 1; }
#video-status:empty { display: none; }
/* Quand la vidéo est là, c'est elle le partage principal : le bouton image passe
   en verre pour qu'il n'y ait jamais deux aplats pleins qui se disputent l'œil. */
#btn-share-video:not(.hidden) ~ #btn-share-img {
  color: var(--muted-2); background: var(--glass-bg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-stroke); box-shadow: var(--glass-inset);
}
#strava-status { text-align: center; }

.hidden { display: none !important; }

/* ---- transitions entre onglets ----
   Le contenu glisse dans le sens de la navigation. La barre d'onglets, la bulle
   et les halos portent leur propre view-transition-name : ils sont donc animés
   séparément et ne partent pas en glissade avec le contenu. */
#tabbar { view-transition-name: tabbar; }
.halo-red { view-transition-name: halo-red; }
.halo-yellow { view-transition-name: halo-yellow; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--view-dur); }

@keyframes slide-from-right { from { opacity: 0; transform: translateX(28px); } }
@keyframes slide-to-left { to { opacity: 0; transform: translateX(-28px); } }
@keyframes slide-from-left { from { opacity: 0; transform: translateX(-28px); } }
@keyframes slide-to-right { to { opacity: 0; transform: translateX(28px); } }

html[data-dir="forward"]::view-transition-old(root) { animation: slide-to-left var(--view-dur) var(--pill-ease) both; }
html[data-dir="forward"]::view-transition-new(root) { animation: slide-from-right var(--view-dur) var(--pill-ease) both; }
html[data-dir="back"]::view-transition-old(root) { animation: slide-to-right var(--view-dur) var(--pill-ease) both; }
html[data-dir="back"]::view-transition-new(root) { animation: slide-from-left var(--view-dur) var(--pill-ease) both; }

/* Navigateurs sans View Transitions : au moins un fondu d'entrée. */
html.no-vt .view.active { animation: view-in var(--view-dur) var(--pill-ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  html.no-vt .view.active { animation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}