/* ============================================================
   FORGE & FONTE — design tokens
   Palette recalée sur les maquettes : noir bronze très sombre,
   cadres métal bronze/or, accent émeraude pour les infos "actives"
   (XP, repos, validation), or pour les chiffres et icônes.
   ============================================================ */
:root {
  --ink-night: #0e0c0a;
  --ink-night-2: #17130f;
  --ink-panel: #1c1712;
  --ink-panel-2: #241d15;
  --parchment: #e8dfc8;
  --parchment-dim: #b8ac8e;
  --ember: #8a5a2a;
  --ember-light: #b9803f;
  --gold: #c9a227;
  --gold-light: #e8c65a;
  --verdigris: #5c9a4e;
  --verdigris-light: #86c96e;
  --bone: #f1ead8;
  --danger: #a5432f;
  --bronze-line: rgba(201, 162, 39, 0.30);
  --line: rgba(201, 162, 39, 0.20);

  --font-display: 'Cinzel', serif;
  --font-body: 'Work Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* CRITICAL: any element carrying an authored `display:` rule (modals, the
   rest overlay, the celebration screen, onboarding steps, etc.) would
   otherwise stay visible when JS sets the `hidden` attribute, because an
   author rule always beats the browser's default [hidden]{display:none}.
   This single rule guarantees `hidden` always actually hides the element,
   for every current and future use in the app. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-night);
  color: var(--bone);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
  height: 100%;
}
body {
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(201,162,39,0.07), transparent 60%),
    radial-gradient(ellipse 700px 400px at 90% 100%, rgba(92,154,78,0.06), transparent 60%),
    var(--ink-night);
  min-height: 100vh;
  min-height: 100dvh;
}
button, input, select { font-family: inherit; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; letter-spacing: 0.02em; }
p { margin: 0; }
input:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- layout shells ---------- */
.screen { min-height: 100vh; min-height: 100dvh; }
.app-shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 14px) 18px 12px;
  background: linear-gradient(180deg, var(--ink-night-2), rgba(27,27,42,0.4));
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.topbar-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--gold-light); }

/* En-tête bandeau illustré (accueil uniquement) */
.topbar-banner { padding: calc(var(--safe-top) + 10px) 10px 0; background: none; border: none; }
.banner-img-wrap {
  position: relative; width: 100%; max-width: 480px; margin: 0 auto;
  aspect-ratio: 1202 / 154;
  background-image: url('assets/ui/header-banner.png');
  background-size: 100% 100%; background-repeat: no-repeat;
}
.banner-icon-btn {
  position: absolute; top: 46.1%; transform: translateY(-50%);
  width: 11.1%; aspect-ratio: 1/1; border-radius: 50%; background: none; border: none;
  display: flex; align-items: center; justify-content: center;
}
.banner-icon-btn img { width: 62%; height: 62%; object-fit: contain; display: block; }
.banner-icon-left { left: 0%; }
.banner-icon-right { left: 88.7%; }

.main-scroll.pad-safe-top { padding-top: calc(var(--safe-top) + 16px); }

.main-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px calc(122px + var(--safe-bottom));
  -webkit-overflow-scrolling: touch;
}

.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex;
  background: linear-gradient(180deg, var(--ink-panel), var(--ink-night-2));
  border-top: 1px solid var(--line);
  padding: 14px 6px calc(14px + var(--safe-bottom));
  z-index: 40;
}
.bn-btn {
  flex: 1; background: none; border: none; color: var(--parchment-dim);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 8px 2px; border-radius: var(--radius-sm);
}
.bn-btn .bn-icon {
  width: 36px; height: 36px; object-fit: contain;
  filter: grayscale(65%) brightness(0.75) opacity(0.75);
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.bn-btn .bn-icon-emoji {
  width: auto; height: auto; font-size: 30px; line-height: 1;
  filter: none; opacity: 0.6;
}
.bn-btn.active .bn-icon { filter: none; }
.bn-btn.active .bn-icon-emoji { opacity: 1; }
.bn-btn.active { color: var(--gold-light); }

.view { display: block; }
.view-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.view-header h2 { font-size: 20px; color: var(--bone); flex: 1; }
.section-subhead {
  font-family: var(--font-display); font-size: 15px; color: var(--gold-light);
  margin: 22px 0 10px; font-weight: 600;
}

.icon-btn {
  background: var(--ink-panel); border: 1px solid var(--bronze-line); color: var(--gold-light);
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  font-size: 17px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.icon-btn:active { background: var(--ink-panel-2); }
.icon-btn-round { border-radius: 50%; }

/* ---------- buttons ---------- */
.btn {
  border: none; border-radius: var(--radius-md); font-weight: 700;
  font-family: var(--font-body); cursor: pointer; padding: 13px 18px; font-size: 15px;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(180deg, var(--ember-light), var(--ember)); color: var(--bone); box-shadow: 0 3px 0 #5c3c18, 0 6px 14px rgba(185,128,63,0.25); width: 100%; }
.btn-secondary { background: var(--ink-panel-2); color: var(--gold-light); border: 1px solid var(--gold); width: 100%; }
.btn-ghost { background: transparent; color: var(--parchment-dim); border: 1px solid var(--line); }
.btn-danger { background: var(--danger); color: var(--bone); }
.btn-danger-ghost { background: transparent; color: #d97a63; border: 1px solid rgba(165,67,47,0.5); width: 100%; }
.btn-lg { padding: 16px; font-size: 16px; width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 13px; width: auto; }
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ---------- onboarding ---------- */
.onb-wrap {
  max-width: 460px; margin: 0 auto; padding: calc(var(--safe-top) + 40px) 24px 40px;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
}
.onb-step { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.onb-emblem { font-size: 44px; text-align: center; margin-bottom: 6px; filter: drop-shadow(0 0 14px rgba(192,86,44,0.5)); }
.onb-title { font-size: 34px; text-align: center; color: var(--gold-light); margin-bottom: 6px; }
.onb-sub { text-align: center; color: var(--parchment-dim); line-height: 1.5; margin-bottom: 20px; font-size: 15px; }
.onb-h2 { font-size: 22px; color: var(--bone); margin-bottom: 18px; text-align: center; }

.onb-lang-grid { display: flex; flex-direction: column; gap: 10px; }
.onb-lang-btn {
  background: var(--ink-panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--bone); font-size: 16px; font-weight: 600; padding: 16px; text-align: center;
}
.onb-lang-btn:active { border-color: var(--gold); background: var(--ink-panel-2); }
.onb-nav { display: flex; gap: 10px; margin-top: 10px; }
.onb-nav .btn-ghost { flex: 0 0 auto; }
.onb-nav .btn-primary { flex: 1; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; flex: 1; min-width: 0; }
.field label { font-size: 13px; color: var(--parchment-dim); font-weight: 600; }
.field input, .field select {
  background: var(--ink-panel); border: 1px solid var(--line); color: var(--bone);
  border-radius: var(--radius-sm); padding: 13px 14px; font-size: 16px; width: 100%;
  min-width: 0; /* empêche un <input type="date"> (élément flexible) de déborder de son cadre sur iOS/Safari, où sa taille naturelle peut dépasser la largeur disponible */
}
.field input::placeholder { color: rgba(236,225,198,0.35); }
.field-row { display: flex; gap: 12px; }

.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pick-grid-sm { grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; }
.pick-grid-locked { display: flex; gap: 10px; }
.pick-grid-locked .pick-grid-sm { grid-template-columns: 1fr; margin-bottom: 0; flex: 1; }
.settings-locked-note { font-size: 12px; color: var(--parchment-dim); margin-bottom: 10px; }
.pick-card {
  background: var(--ink-panel); border: 2px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--parchment-dim); text-align: center;
}
.pick-card .pc-icon { font-size: 26px; }
.pick-card .pc-icon-img { width: 44px; height: 44px; object-fit: contain; }
.pick-card .pc-icon-char {
  width: 64px; height: 96px; object-fit: cover; object-position: top;
  border-radius: 6px; background: var(--ink-night);
}
.pick-card .pc-name { font-weight: 700; font-size: 13px; color: var(--bone); }
.pick-card .pc-desc { font-size: 11px; line-height: 1.3; }
.pick-card.selected { border-color: var(--gold); background: var(--ink-panel-2); color: var(--parchment); box-shadow: 0 0 0 1px var(--gold) inset; }
.pick-card-locked { cursor: default; opacity: 0.92; }

.reveal-stage { display: flex; justify-content: center; margin: 20px 0; }

/* ---------- character frame (utilisé pour la révélation à l'onboarding et l'écran de fin de séance) ---------- */
.char-frame {
  position: relative;
  border-radius: 50% / 40%;
  background:
    radial-gradient(circle at 50% 30%, rgba(201,162,39,0.16), transparent 65%),
    linear-gradient(180deg, #241c11, #120d08);
  border: 3px solid #4a3a1f;
  box-shadow: inset 0 0 0 3px rgba(201,162,39,0.35), inset 0 10px 30px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.char-frame::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 7px);
  pointer-events: none;
}
.char-frame-lg { width: 190px; height: 190px; }
.char-frame-xl { width: 240px; height: 240px; }
.char-frame svg, .char-frame img.char-art-img { width: 82%; height: 92%; overflow: visible; object-fit: contain; object-position: bottom center; }

/* ============================================================
   TABLEAU DE BORD — panneau héros unique, en couches :
   1. .dash-hero-backdrop (fond fixe, tout le panneau)
   2. .dash-hero-char (personnage, jamais déformé, par-dessus le fond)
   3. .dash-hero-toprow (carte Progression + blason, superposés en haut)
   Le panneau a une hauteur fixée par son propre ratio (calé sur le
   fond), puisque tout son contenu est en superposition absolue.
   ============================================================ */
.dash-hero-panel { position: relative; width: 100%; aspect-ratio: 501 / 598; margin-top: 6px; border-radius: var(--radius-md); overflow: hidden; }

.dash-hero-backdrop {
  position: absolute; z-index: 0; inset: 0;
  background-image: url('assets/ui/character-backdrop.png');
  /* position "bottom" : le rognage (cover sur un cadre plus court que
     l'image d'origine) retire de la hauteur en haut plutôt qu'en bas, pour
     que le socle circulaire du fond reste toujours calé contre le bas du
     panneau, exactement sous les pieds du personnage. */
  background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}

/* Le personnage : superposé en grand, jamais déformé (object-fit: contain),
   calé sur le bas du panneau, pieds posés sur le socle du fond.
   z-index le PLUS ÉLEVÉ du panneau : le personnage passe devant la carte
   Progression et le blason (léger débordement des cheveux / de l'épaule
   sur leur coin, comme sur la maquette), jamais l'inverse. */
.dash-hero-char {
  position: absolute; z-index: 3; top: 5.5%; bottom: 0; left: 4%; right: 4%;
  pointer-events: none;
}
.dash-hero-char svg, .dash-hero-char img.char-art-img {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: auto; height: auto; max-width: 100%; max-height: 100%;
}

/* ============================================================
   PARTICULES D'AMBIANCE — décor très léger derrière le personnage
   (z-index 1 : au-dessus du fond fixe, mais toujours sous le
   personnage z:3 et les cartes z:2). Uniquement du transform +
   opacity (compositing GPU, aucun reflow), quelques éléments DOM
   créés une seule fois puis animés en boucle par CSS pur — aucun
   travail JS continu, donc aucun coût batterie après la création.
   Couleur définie par classe via --particle-color (voir JS).
   ============================================================ */
.dash-particles { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.dash-particle {
  position: absolute; bottom: 4%;
  width: var(--size, 3px); height: var(--size, 3px); border-radius: 50%;
  background: var(--particle-color, #c9a227);
  box-shadow: 0 0 4px 0.5px var(--particle-color, #c9a227);
  opacity: 0;
  animation: dash-particle-float var(--duration, 10s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}
@keyframes dash-particle-float {
  0%   { transform: translate(0, 0) scale(0.8); opacity: 0; }
  12%  { opacity: var(--maxOpacity, 0.45); }
  50%  { transform: translate(var(--drift, 8px), var(--riseHalf, -120px)) scale(1); }
  88%  { opacity: var(--maxOpacity, 0.45); }
  100% { transform: translate(calc(var(--drift, 8px) * 1.6), var(--riseFull, -240px)) scale(0.6); opacity: 0; }
}
/* Respecte la préférence système : mouvement réduit -> pas de particules du tout. */
@media (prefers-reduced-motion: reduce) {
  .dash-particle { display: none; }
}

/* Rangée du haut : carte Progression (gauche) + blason de niveau (droite),
   sous le personnage en z-index (voir .dash-hero-char). */
.dash-hero-toprow {
  position: relative; z-index: 2; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 4px; padding: 8px 8px 0;
}

.dash-level-shield {
  position: relative; width: 100%; z-index: 1;
  aspect-ratio: 295 / 300;
  background-image: url('assets/ui/level-shield.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  display: flex; flex-direction: column; align-items: center;
  padding-top: 17%;
}
.shield-level-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; font-size: clamp(8px, 2.4vw, 10.5px); color: var(--gold-light); text-transform: uppercase; margin-bottom: 2px; }
.shield-number { font-family: var(--font-display); font-weight: 800; font-size: clamp(14px, 4.6vw, 19px); color: var(--gold-light); line-height: 1.1; }
.shield-tier { font-size: clamp(7px, 2.1vw, 9px); color: var(--verdigris-light); font-weight: 700; margin-top: 2px; }
.dash-shield-col { width: 24%; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.dash-hero-name { font-family: var(--font-display); font-size: clamp(9.5px, 2.8vw, 11.5px); color: var(--bone); text-align: center; margin-top: 1px; }

/* Carte "Progression" unifiée : XP, poids total, dernière séance, poids actuel
   — volontairement compacte pour que toute la page tienne sur un écran
   sans défilement. */
.progression-card {
  width: 41%; flex-shrink: 0;
  background: linear-gradient(180deg, var(--ink-panel), var(--ink-night-2));
  border: 1px solid var(--bronze-line); border-radius: var(--radius-sm);
  padding: 6px 8px; display: flex; flex-direction: column; gap: 3px;
}
.pc-header {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-weight: 700; color: var(--gold-light);
  font-size: clamp(8.5px, 2.4vw, 10px); letter-spacing: 0.03em;
  padding-bottom: 4px; margin-bottom: 1px; border-bottom: 1px solid var(--line);
}
.pc-header img { width: 12px; height: 12px; object-fit: contain; }
.pc-row { display: flex; align-items: center; gap: 6px; }
.pc-row-btn { background: none; border: none; padding: 0; text-align: left; width: 100%; }
.pc-icon { font-size: 11px; width: 14px; text-align: center; flex-shrink: 0; }
.pc-row-text { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 0; }
.pc-label { font-size: clamp(6.5px, 1.9vw, 8px); color: var(--parchment-dim); line-height: 1.2; }
.pc-value {
  font-family: var(--font-mono); font-weight: 700; color: var(--gold-light);
  font-size: clamp(9px, 2.5vw, 11px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-transform: uppercase; line-height: 1.2;
}
.pc-row-xp { align-items: center; }
.pc-xp-block { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pc-xp-block .pc-label { margin-bottom: 0; }
.xp-bar-track { background: var(--ink-night); border-radius: 20px; height: 6px; overflow: hidden; border: 1px solid var(--bronze-line); }
.xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light)); border-radius: 20px; transition: width 0.5s ease; }
.xp-bar-fill.xp-bar-maxed { background: linear-gradient(90deg, var(--verdigris), var(--verdigris-light)); }

.btn-start-training {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1200 / 233; margin: 8px 0 4px;
  padding: 0 22%; /* symétrique : dégage l'épée à gauche tout en gardant le texte réellement centré sur le bouton */
  background-image: url('assets/ui/btn-start-training.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  background-color: transparent; border: none; border-radius: 0; box-shadow: none;
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em;
  font-size: clamp(11px, 3.5vw, 17px); color: var(--gold-light); text-transform: uppercase;
  white-space: nowrap; text-align: center;
}
.btn-start-training:active { transform: scale(0.98); }

/* stat-grid / stat-tile : réutilisés par l'écran Statistiques */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat-tile {
  background: var(--ink-panel); border: 1px solid var(--bronze-line); border-radius: var(--radius-md);
  padding: 14px; text-align: center;
}
.stat-tile-wide { grid-column: span 2; }
.stat-tile-value { font-family: var(--font-mono); font-weight: 700; font-size: 18px; color: var(--gold-light); }
.stat-tile-label { font-size: 11px; color: var(--parchment-dim); margin-top: 4px; }

.record-list-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--line);
}
.record-list-row:last-child { border-bottom: none; }
.record-list-name { font-size: 13.5px; color: var(--bone); }
.record-list-value { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--gold-light); flex-shrink: 0; }

/* ---------- sessions ---------- */
.session-list { display: flex; flex-direction: column; gap: 10px; }
.session-card {
  background: var(--ink-panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
}
.session-card-main { flex: 1; }
.session-card-name { font-weight: 700; font-size: 15.5px; color: var(--bone); }
.session-card-meta { font-size: 12px; color: var(--parchment-dim); margin-top: 3px; }
.session-card-edit { background: none; border: none; color: var(--gold-light); font-size: 16px; padding: 6px; }
.session-card-menu-btn { background: none; border: none; color: var(--parchment-dim); font-size: 18px; padding: 6px 4px; }
.empty-hint { color: var(--parchment-dim); text-align: center; padding: 30px 10px; font-size: 14px; line-height: 1.5; }

.ex-config-list { display: flex; flex-direction: column; gap: 8px; }
.ex-config-item {
  background: var(--ink-panel); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
.ex-config-item.dragging { opacity: 0.6; border-color: var(--gold); box-shadow: 0 4px 14px rgba(0,0,0,0.4); z-index: 5; position: relative; }
.ex-config-drag { color: var(--parchment-dim); font-size: 20px; cursor: grab; padding: 4px 8px; touch-action: none; }
.ex-config-info { flex: 1; }
.ex-config-name { font-weight: 700; font-size: 14px; color: var(--bone); }
.ex-config-detail { font-size: 12px; color: var(--parchment-dim); margin-top: 2px; font-family: var(--font-mono); }
.ex-config-actions { display: flex; gap: 4px; }
.ex-config-actions button { background: none; border: none; color: var(--parchment-dim); font-size: 15px; padding: 4px 6px; }

.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; -webkit-overflow-scrolling: touch; }
.chip {
  flex-shrink: 0; background: var(--ink-panel); border: 1px solid var(--line); color: var(--parchment-dim);
  border-radius: 20px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.chip.active { background: var(--verdigris); border-color: var(--verdigris-light); color: var(--bone); }

.ex-library-list { display: flex; flex-direction: column; gap: 8px; }
.ex-lib-item {
  display: flex; align-items: center; gap: 12px; background: var(--ink-panel);
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px;
}
.ex-lib-icon {
  width: 42px; height: 42px; border-radius: 10px; background: var(--ink-panel-2);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
  overflow: hidden;
}
.ex-lib-icon img { width: 100%; height: 100%; object-fit: contain; }
.ex-lib-info { flex: 1; }
.ex-lib-name { font-weight: 700; font-size: 14px; color: var(--bone); }
.ex-lib-meta { font-size: 11.5px; color: var(--parchment-dim); margin-top: 2px; }

/* ---------- workout active (écran de type "table" façon maquette) ---------- */
.wo-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wo-title { flex: 1; text-align: center; font-size: 19px; color: var(--gold-light); }
.wo-finish-link { background: none; border: none; color: var(--verdigris-light); font-weight: 700; font-size: 14.5px; padding: 6px 4px; flex-shrink: 0; }

/* Bouton musique on/off : même bouton visuellement sur l'accueil et en haut
   de l'entraînement, juste positionné différemment selon le contexte. */
.sound-toggle-btn {
  background: none; border: none; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sound-toggle-btn img { width: 26px; height: 26px; object-fit: contain; }
.sound-toggle-btn:active { transform: scale(0.92); }

.sound-toggle-dash {
  position: absolute; z-index: 4; top: 30%; right: 3%;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(14,12,10,0.6); backdrop-filter: blur(2px);
  border: 1px solid var(--bronze-line);
}
.sound-toggle-dash img { width: 19px; height: 19px; }

.sound-toggle-workout { margin-right: 2px; }
.sound-toggle-workout img { width: 22px; height: 22px; }

.wo-stats-bar {
  display: flex; align-items: center; justify-content: space-around;
  background: linear-gradient(180deg, var(--ink-panel), var(--ink-night-2));
  border: 1px solid var(--bronze-line); border-radius: var(--radius-md);
  padding: 12px 6px; margin-bottom: 16px;
}
.wo-stat-item { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.wo-stat-icon { font-size: 14px; }
.wo-stat-label { font-size: 10.5px; color: var(--parchment-dim); }
.wo-stat-value { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--bone); }
.wo-stat-green { color: var(--verdigris-light); }
.wo-stat-sep { width: 1px; align-self: stretch; background: var(--bronze-line); margin: 2px 0; }

.wo-exercise-list { display: flex; flex-direction: column; gap: 14px; }
.wo-ex-card {
  background: linear-gradient(180deg, var(--ink-panel), var(--ink-night-2));
  border: 1px solid var(--bronze-line); border-radius: var(--radius-md); overflow: hidden;
}
.wo-ex-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 10px; }
.wo-ex-thumb {
  width: 52px; height: 52px; border-radius: 10px; background: var(--ink-night);
  border: 1px solid var(--bronze-line); display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; overflow: hidden;
}
.wo-ex-thumb img { width: 100%; height: 100%; object-fit: contain; }
.wo-ex-info { flex: 1; min-width: 0; }
.wo-ex-info-clickable { cursor: pointer; }
.wo-ex-name2 { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--bone); }
.wo-ex-rest { font-size: 12px; color: var(--verdigris-light); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.wo-ex-menu-btn { background: none; border: none; color: var(--parchment-dim); font-size: 17px; padding: 6px 4px; flex-shrink: 0; }
.wo-ex-note-btn {
  background: none; border: none; padding: 6px 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wo-ex-note-btn img {
  width: 22px; height: 22px; object-fit: contain;
  opacity: 0.85;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.wo-ex-note-btn.has-note img { opacity: 1; filter: drop-shadow(0 0 3px rgba(232,198,90,0.6)); }

.wo-ex-note-area { margin: 0 12px 10px; }
.wo-ex-note-textarea {
  width: 100%; min-height: 64px; resize: vertical; background: var(--ink-night);
  border: 1px solid var(--bronze-line); border-radius: var(--radius-sm); color: var(--bone);
  font-family: var(--font-body); font-size: 14px; padding: 10px 12px; line-height: 1.4;
}
.wo-ex-note-textarea::placeholder { color: rgba(236,225,198,0.35); }

/* Résumé replié : dès que toutes les séries d'un exercice sont validées,
   sa carte se réduit à cette seule ligne, pour garder l'exercice suivant
   à portée de vue. Un tap la rouvre immédiatement. */
.wo-ex-collapsed-summary {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px;
  background: none; border: none; text-align: left;
}
.wo-ex-collapsed-summary .wo-ex-thumb {
  width: 38px; height: 38px; border-radius: 8px; background: var(--ink-night);
  border: 1px solid var(--bronze-line); display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.wo-ex-collapsed-name {
  flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wo-ex-collapsed-done {
  flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--verdigris-light);
  background: rgba(92,154,78,0.15); border: 1px solid var(--verdigris); border-radius: 20px; padding: 4px 10px;
}
.wo-ex-card.is-collapsed { opacity: 0.92; }

/* Bannière de repos : apparaît à chaque série validée, avec un décompte
   bien visible, une barre de progression qui se vide, et un bouton pour
   passer le repos à tout moment. */
.wo-rest-banner {
  margin: 0 12px 10px; padding: 12px 14px 10px; border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(92,154,78,0.16), rgba(92,154,78,0.06));
  border: 1px solid var(--verdigris); display: flex; flex-direction: column; gap: 8px;
}
.wo-rest-banner.rest-done { background: linear-gradient(180deg, rgba(201,162,39,0.2), rgba(201,162,39,0.08)); border-color: var(--gold); animation: pulse 1s ease-in-out infinite; }
.wo-rest-banner-row { display: flex; align-items: center; gap: 10px; }
.wo-rest-banner-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--verdigris-light); flex-shrink: 0; }
.wo-rest-banner.rest-done .wo-rest-banner-label { color: var(--gold-light); }
.wo-rest-banner-count { font-family: var(--font-mono); font-weight: 800; font-size: 22px; color: var(--bone); flex: 1; text-align: center; }
.wo-rest-skip-btn {
  background: var(--ink-night); border: 1px solid var(--bronze-line); color: var(--parchment-dim);
  border-radius: 7px; padding: 8px 12px; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.wo-rest-progress-track {
  width: 100%; height: 5px; border-radius: 20px; overflow: hidden;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.06);
}
.wo-rest-progress-fill {
  height: 100%; width: 100%; border-radius: 20px;
  background: linear-gradient(90deg, var(--verdigris), var(--verdigris-light));
  transition: width 1s linear;
}
.wo-rest-banner.rest-done .wo-rest-progress-fill { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }

.wo-set-table { width: 100%; border-collapse: collapse; padding: 0 12px; }
.wo-set-table-head { display: grid; grid-template-columns: 30px 1fr 68px 58px 34px; gap: 4px; padding: 4px 10px; font-size: 10px; letter-spacing: 0.04em; color: var(--parchment-dim); font-weight: 700; }
.wo-set-row2 { display: grid; grid-template-columns: 30px 1fr 68px 58px 34px; gap: 4px; align-items: center; padding: 5px 10px; }
.wo-set-row2.set-done { background: rgba(92,154,78,0.08); }
.wo-cell-num { font-family: var(--font-mono); font-weight: 700; color: var(--bone); font-size: 13px; text-align: center; }
.wo-cell-prev { font-family: var(--font-mono); font-size: 11px; color: var(--parchment-dim); text-align: center; }
.wo-cell-input input {
  /* font-size: 16px est requis (pas 13.5px) pour empêcher Safari iOS de
     zoomer automatiquement l'écran à chaque tap dans ce champ — c'est le
     champ le plus utilisé de toute l'app (à chaque série). */
  width: 100%; background: var(--ink-night); border: 1px solid var(--bronze-line); color: var(--bone);
  border-radius: 6px; padding: 5px 2px; font-family: var(--font-mono); font-size: 16px; text-align: center;
}
.wo-cell-check-wrap { position: relative; display: flex; align-items: center; justify-content: center; }
.wo-check-btn {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--bronze-line);
  background: var(--ink-night); color: transparent; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto;
}
.wo-check-btn.checked {
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: #241a06; border-color: var(--gold);
}
/* Petite coupe discrète : une série qui bat un record personnel (poids,
   répétitions ou volume) l'affiche au coin de sa case à cocher. */
.wo-record-badge {
  position: absolute; top: -7px; right: -5px; font-size: 12px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.7));
  animation: record-pop 0.3s ease-out;
}
@keyframes record-pop { from { transform: scale(0); } to { transform: scale(1); } }
.wo-add-set-btn {
  width: calc(100% - 24px); margin: 8px 12px 12px; border: 1px solid var(--bronze-line);
  background: linear-gradient(180deg, var(--ink-panel-2), var(--ink-night-2));
  color: var(--gold-light); border-radius: var(--radius-sm); padding: 11px; font-weight: 700; font-size: 13px;
}

/* ---------- config des séries par exercice (modal d'ajout à une séance) ---------- */
.cfg-set-table-head {
  display: grid; grid-template-columns: 30px 1fr 1fr 30px; gap: 8px; padding: 0 2px 4px;
  font-size: 10px; letter-spacing: 0.04em; color: var(--parchment-dim); font-weight: 700;
}
.cfg-set-row {
  display: grid; grid-template-columns: 30px 1fr 1fr 30px; gap: 8px; align-items: center; padding: 4px 2px;
}
.cfg-set-row .wo-cell-num { text-align: left; }
.cfg-set-row input {
  width: 100%; background: var(--ink-night); border: 1px solid var(--bronze-line); color: var(--bone);
  border-radius: 6px; padding: 7px 4px; font-family: var(--font-mono); font-size: 16px; text-align: center;
}
.cfg-row-remove {
  width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--bronze-line);
  background: var(--ink-night); color: var(--parchment-dim); font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.cfg-row-remove:disabled { opacity: 0.25; }
#cfg-add-set-btn { width: 100%; margin: 6px 0 16px; }
.btn-finish-bottom {
  width: 100%; margin-top: 18px; border: 1px solid var(--verdigris-light); border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--verdigris-light), var(--verdigris));
  color: #0e1a10; padding: 15px; font-weight: 800; font-size: 15px;
}
.btn-finish-bottom:active { transform: scale(0.98); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- celebration ---------- */
.celebration-view {
  position: fixed; inset: 0; background: linear-gradient(180deg, #1c150c, #0e0c0a);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 70; padding: 30px 24px;
}
.celeb-stage { position: relative; margin-bottom: 20px; }
.celeb-particles { position: absolute; inset: -30px; pointer-events: none; }
.celeb-particle {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-light); animation: celeb-rise 1.4s ease-out forwards;
}
@keyframes celeb-rise {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
.celeb-summary { text-align: center; width: 100%; max-width: 340px; }
.celeb-summary h2 { color: var(--gold-light); font-size: 22px; margin-bottom: 18px; letter-spacing: 0.04em; }
.celeb-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.celeb-stats > div { background: rgba(255,255,255,0.04); border-radius: var(--radius-md); padding: 12px; }
.celeb-stats span { display: block; font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--bone); }
.celeb-stats label { font-size: 11px; color: var(--parchment-dim); }
.celeb-levelup {
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: #241a06;
  font-family: var(--font-display); font-weight: 700; padding: 12px; border-radius: var(--radius-md);
  margin-bottom: 18px; animation: pulse 1.2s ease-in-out infinite;
}

/* ---------- calendar ---------- */
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month-label { font-family: var(--font-display); font-size: 17px; color: var(--gold-light); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow { text-align: center; font-size: 10.5px; color: var(--parchment-dim); font-weight: 700; padding-bottom: 4px; }
.cal-day {
  aspect-ratio: 1; border-radius: 10px; background: var(--ink-panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; color: var(--parchment-dim);
  position: relative;
}
.cal-day.empty { background: transparent; border: none; }
.cal-day.has-session { background: var(--ink-panel-2); border-color: var(--verdigris); color: var(--bone); font-weight: 700; }
.cal-day.has-session::before { content: "🏋"; position: absolute; top: 2px; right: 3px; font-size: 8px; line-height: 1; opacity: 0.85; }
.cal-day.has-measurement::after { content: "•"; position: absolute; bottom: 3px; color: var(--gold-light); font-size: 14px; }
.cal-day.today { box-shadow: 0 0 0 2px var(--gold); }
.cal-day-detail { margin-top: 18px; background: var(--ink-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 16px; }
.cal-day-detail h4 { font-family: var(--font-display); color: var(--gold-light); margin-bottom: 10px; font-size: 15px; }
.cal-day-detail-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid var(--line); color: var(--parchment-dim); }
.cal-day-detail-row span:last-child { color: var(--bone); font-family: var(--font-mono); }

/* ---------- measurements ---------- */
.measurement-list { display: flex; flex-direction: column; gap: 8px; }
.measurement-card { background: var(--ink-panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px 14px; }
.measurement-date { font-weight: 700; color: var(--gold-light); font-size: 13.5px; }
.measurement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 10px; margin-top: 8px; }
.measurement-grid div { font-size: 11.5px; color: var(--parchment-dim); }
.measurement-grid b { display: block; color: var(--bone); font-family: var(--font-mono); font-size: 13px; }
.measurement-actions { display: flex; gap: 8px; margin-top: 8px; }
.measurement-actions button { background: none; border: none; color: var(--parchment-dim); font-size: 12px; padding: 2px 4px; text-decoration: underline; }

/* ---------- stats ---------- */
.stats-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--ink-panel); border-radius: var(--radius-md); padding: 4px; }
.stats-tab { flex: 1; background: none; border: none; color: var(--parchment-dim); padding: 9px 4px; border-radius: 10px; font-size: 12.5px; font-weight: 700; }
.stats-tab.active { background: var(--verdigris); color: var(--bone); }
.stat-chart { width: 100%; height: 200px; background: var(--ink-panel); border-radius: var(--radius-md); border: 1px solid var(--line); }
.stat-chart-radar { margin-top: 10px; }
.stat-chart-pie { height: auto; }

.muscle-pie-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.muscle-pie-legend-item {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--parchment);
  padding: 2px 0;
}
.muscle-pie-swatch { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; }
.muscle-pie-name { flex: 1; }
.muscle-pie-pct { font-family: var(--font-mono); font-weight: 700; color: var(--gold-light); }
.stat-disclaimer { font-size: 11.5px; color: var(--parchment-dim); font-style: italic; margin-top: 14px; line-height: 1.4; }

/* ---------- toasts ---------- */
.toast-root { position: fixed; top: calc(var(--safe-top) + 10px); left: 0; right: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  background: var(--ink-panel-2); border: 1px solid var(--gold); color: var(--bone);
  padding: 10px 18px; border-radius: 20px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 6px 16px rgba(0,0,0,0.4); animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- modals ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,10,16,0.75); z-index: 100;
  display: flex; align-items: flex-end; justify-content: center;
  overflow-y: auto; /* filet de sécurité si le sheet dépasse quand même le viewport */
  padding-top: 20px;
}
.modal-sheet {
  background: var(--ink-panel); border: 1px solid var(--line); border-radius: 20px 20px 0 0;
  padding: 22px 20px calc(22px + var(--safe-bottom)); width: 100%; max-width: 480px;
  max-height: 88vh; max-height: 88svh; /* svh = hauteur visible réelle sur mobile (barre d'adresse exclue) */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column;
}
.modal-sheet-tall { max-height: 92vh; max-height: 92svh; }
.modal-sheet h3 { font-size: 17px; color: var(--gold-light); margin-bottom: 16px; flex-shrink: 0; }
.modal-sheet p { color: var(--parchment-dim); font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
.modal-actions {
  display: flex; gap: 10px; margin-top: 14px; padding-top: 12px;
  position: sticky; bottom: calc(-1 * (22px + var(--safe-bottom)));
  background: var(--ink-panel); flex-shrink: 0;
}
.modal-actions .btn { flex: 1; }
.modal-actions-col { flex-direction: column; }
.modal-actions-col .btn { flex: none; width: 100%; }

.rest-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--ink-night); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.rest-stepper span {
  font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: var(--bone); flex: 1; text-align: center;
}
.rest-stepper .stepper-btn {
  background: var(--ink-panel-2); border: 1px solid var(--bronze-line); color: var(--bone);
  width: 38px; height: 38px; border-radius: 8px; font-size: 18px; font-weight: 700; flex-shrink: 0;
}

.settings-version { text-align: center; color: var(--parchment-dim); font-size: 11.5px; margin-top: 26px; opacity: 0.6; }

/* level-up flash */
@keyframes levelup-flash {
  0% { box-shadow: 0 0 0 0 rgba(201,162,39,0.6); }
  100% { box-shadow: 0 0 0 40px rgba(201,162,39,0); }
}
.flash-levelup { animation: levelup-flash 0.8s ease-out; }

/* breathing idle animation applied to character svg root group */
.char-breathe { animation: breathe 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-2.5px) scaleY(1.015); }
}
.char-anim-swing { animation: swing-arm 0.6s ease-in-out; }
@keyframes swing-arm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-22deg); }
}
.char-anim-bob { animation: char-bob 0.7s ease-in-out; }
@keyframes char-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.char-anim-glow { animation: char-glow 1.2s ease-in-out; }
@keyframes char-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201,162,39,0)); }
  50% { filter: drop-shadow(0 0 10px rgba(201,162,39,0.7)); }
}

/* small screens */
@media (max-width: 340px) {
  .stat-grid { gap: 8px; }
  .pick-grid { gap: 8px; }
}

/* ============================================================
   BADGES — page, tuiles, détail
   ============================================================ */
.badges-progress { padding: 4px 2px 18px; }
.badges-progress-bar {
  width: 100%; height: 8px; border-radius: 5px; background: var(--ink-panel-2);
  border: 1px solid var(--bronze-line); overflow: hidden; margin-bottom: 8px;
}
.badges-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 5px; transition: width 0.4s ease; width: 0%;
}
.badges-progress-label { font-size: 13px; color: var(--parchment-dim); font-weight: 600; text-align: center; }

.badges-category { margin-bottom: 22px; }
.badges-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px;
}
.badge-tile {
  background: none; border: none; padding: 0; border-radius: var(--radius-sm);
  aspect-ratio: 320 / 460; display: flex; align-items: center; justify-content: center;
}
.badge-tile img { width: 100%; height: 100%; object-fit: contain; }
.badge-tile.locked img {
  filter: grayscale(85%) brightness(0.45) opacity(0.7);
}
.badge-tile.unlocked img {
  filter: drop-shadow(0 0 6px rgba(201,162,39,0.35));
}
.badges-coming-soon { text-align: center; margin-top: 4px; }

.badge-detail-sheet { text-align: center; }
.badge-detail-img { width: 140px; height: 200px; object-fit: contain; margin: 0 auto 14px; display: block; }
.badge-detail-img.locked { filter: grayscale(85%) brightness(0.45) opacity(0.7); }
.badge-detail-sheet h3 { color: var(--gold-light); font-size: 18px; margin-bottom: 6px; }
.badge-detail-condition { color: var(--parchment); font-size: 14px; margin-bottom: 10px; line-height: 1.4; }
.badge-detail-status { font-size: 13px; color: var(--parchment-dim); margin-bottom: 18px; font-weight: 600; }
.badge-detail-status.unlocked { color: var(--gold-light); }

/* ---------------- Animation de déblocage ---------------- */
.badge-unlock-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.badge-unlock-dim {
  position: absolute; inset: 0; background: rgba(5,4,2,0.72);
  opacity: 0; animation: bu-dim-in 0.35s ease forwards;
}
.badge-unlock-stage {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: 20px; max-width: 340px; width: 100%;
}
.badge-unlock-flash {
  position: absolute; top: 22%; left: 50%; width: 260px; height: 260px; margin-left: -130px; margin-top: -130px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,244,214,0.95) 0%, rgba(232,198,90,0.55) 35%, rgba(232,198,90,0) 70%);
  opacity: 0; pointer-events: none;
  animation: bu-flash 0.5s ease-out 0.12s forwards;
}
.badge-unlock-glow {
  position: absolute; top: 22%; left: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px;
  border-radius: 50%; background: radial-gradient(circle, rgba(232,198,90,0.55) 0%, rgba(232,198,90,0.18) 45%, rgba(232,198,90,0) 72%);
  opacity: 0; pointer-events: none; transform: scale(0.3);
}
.badge-unlock-overlay.settled .badge-unlock-glow { animation: bu-glow 0.7s ease-out forwards; }

.badge-unlock-img {
  position: relative; z-index: 2; width: 190px; height: auto; margin-top: 8px;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.6));
  opacity: 0; transform: translateY(-160%);
  animation: bu-drop 0.75s cubic-bezier(0.32,0,0.67,0) 0.12s forwards;
}
.badge-unlock-overlay.settled .badge-unlock-img { animation: bu-drop 0.75s 0.12s forwards, bu-pulse 0.4s ease-in-out 0.95s; }

.badge-unlock-sparkles { position: absolute; top: 22%; left: 50%; width: 1px; height: 1px; z-index: 3; pointer-events: none; }
.bu-spark {
  position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-light); opacity: 0;
  animation: bu-spark-fly 0.75s ease-out forwards;
}

.badge-unlock-text {
  position: relative; z-index: 2; text-align: center; margin-top: 18px;
  opacity: 0; transform: translateY(8px);
}
.badge-unlock-text.shown { animation: bu-text-in 0.4s ease forwards; }
.badge-unlock-kicker {
  color: var(--gold-light); font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.08em; font-size: 14px; margin-bottom: 6px;
}
.badge-unlock-name { color: var(--bone); font-size: 22px; margin-bottom: 6px; }
.badge-unlock-condition { color: var(--parchment-dim); font-size: 14px; margin-bottom: 20px; }
.badge-unlock-continue { min-width: 160px; }

@keyframes bu-dim-in { to { opacity: 1; } }
@keyframes bu-flash {
  0% { opacity: 0; transform: scale(0.4); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.3); }
}
@keyframes bu-glow {
  0% { opacity: 0; transform: scale(0.3); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes bu-drop {
  0% { opacity: 0; transform: translateY(-160%); }
  10% { opacity: 1; }
  55% { transform: translateY(10%); animation-timing-function: ease-out; }
  75% { transform: translateY(-4%); }
  90% { transform: translateY(1.5%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes bu-pulse {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(0) scale(1.08); }
}
@keyframes bu-spark-fly {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.3); }
}
@keyframes bu-text-in { to { opacity: 1; transform: translateY(0); } }

/* Préférence "mouvement réduit" : simple fondu, sans chute/rebond/particules. */
@media (prefers-reduced-motion: reduce) {
  .badge-unlock-dim { animation: none; opacity: 1; }
  .badge-unlock-flash, .badge-unlock-glow, .bu-spark { display: none; }
  .badge-unlock-img {
    animation: none !important; opacity: 1; transform: translateY(0);
    transition: opacity 0.3s ease;
  }
  .badge-unlock-text { transition: opacity 0.3s ease; transform: none; }
  .badge-unlock-text.shown { animation: none; opacity: 1; }
}