/* ==========================================================
   PALIER — feuille de style commune

   SOMMAIRE (dans l'ordre du fichier)
   1. Base : couleurs, polices, boutons, formulaires, cartes, navigation
   2. Pages : accueil, connexion, questionnaire, tableau de bord, progression,
      modale, classement, profil, notifications
   3. v2  Cloche, fil d'actu, défi du jour, photo, admin
   4. v3  Fil "voir plus", classement mondial
   5. v4  Finitions visuelles (lueurs, survols, animations)
   6. v5  Niveaux de difficulté en callisthénie
   7. v6  Roue des paramètres
   8. v7  Événements saisonniers (thèmes, design Aventure, Avent, œufs…)
   9. Titres, binôme, inscription, questionnaire
   10. v8 Finitions "pro" : minuteur de repos, saisie rapide, chargement
   ========================================================== */

:root {
  --bg: #0d0e0b;
  --bg-2: #13140f;
  --surface: #191b15;
  --surface-2: #21241c;
  --line: #2c3026;
  --text: #f1f0e8;
  --muted: #9b9c90;
  --faint: #6b6d63;
  --cali: #c6f45c;
  --muscu: #ff7a45;
  --accent: var(--cali);
  --accent-ink: #12140c;
  --danger: #ff5d5d;
  --gold: #f5c84c;
  --silver: #c9ccd3;
  --bronze: #d08a55;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  color-scheme: dark;
}
body[data-disc="muscu"] { --accent: var(--muscu); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; }
h3 { font-size: 1.15rem; font-weight: 700; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.small { font-size: .85rem; }
.hidden { display: none !important; }

.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
main.page { padding: 28px 0 120px; }
@media (min-width: 860px) { main.page { padding: 40px 0 64px; } }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: transform .15s ease, background .2s, border-color .2s, opacity .2s;
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-danger { background: transparent; border-color: rgba(255, 93, 93, .4); color: var(--danger); }
.btn-sm { padding: 8px 14px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer;
}

/* ---------- Formulaires ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.input {
  width: 100%; padding: 13px 15px; border-radius: var(--radius-sm);
  background: var(--bg-2); border: 1px solid var(--line); outline: none;
  transition: border-color .2s; font-size: 1rem;
}
.input:focus { border-color: var(--accent); }
.form-error { color: var(--danger); font-size: .88rem; min-height: 1.3em; margin-bottom: 8px; }

/* ---------- Cartes & grilles ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted);
}
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- Navigation ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(13, 14, 11, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; }
.logo-mark { width: 30px; height: 30px; }
.nav-links { display: none; gap: 4px; }
.nav-links a {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  font-weight: 600; font-size: .92rem; color: var(--muted); transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-links svg { width: 18px; height: 18px; }
.nav-xp { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.nav-xp .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (min-width: 860px) { .nav-links { display: flex; } }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(19, 20, 15, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .7rem; font-weight: 600; color: var(--faint); padding: 4px 0; }
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a.active { color: var(--accent); }
@media (min-width: 860px) { .tabbar { display: none; } }

/* ---------- Landing ---------- */
.hero { padding: 56px 0 40px; position: relative; overflow: hidden; }
.hero h1 { max-width: 13ch; }
.hero h1 em { font-style: normal; color: var(--cali); }
.hero p.lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin: 18px 0 28px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-steps {
  position: absolute; right: -40px; bottom: -10px; width: 46%; max-width: 480px; opacity: .9; pointer-events: none;
}
@media (max-width: 760px) { .hero-steps { position: static; width: 100%; margin-top: 36px; } }
.disc-cards { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 30px 0; }
@media (min-width: 700px) { .disc-cards { grid-template-columns: 1fr 1fr; } }
.disc-card {
  position: relative; border-radius: var(--radius); padding: 26px; min-height: 230px;
  border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
}
.disc-card.cali { background: linear-gradient(160deg, rgba(198, 244, 92, .16), transparent 60%), var(--surface); }
.disc-card.muscu { background: linear-gradient(160deg, rgba(255, 122, 69, .18), transparent 60%), var(--surface); }
.disc-card .big-num {
  position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-weight: 800;
  font-size: 5rem; line-height: 1; opacity: .12;
}
.disc-card h3 { font-size: 1.6rem; margin-bottom: 8px; }
.disc-card.cali h3 { color: var(--cali); }
.disc-card.muscu h3 { color: var(--muscu); }
.feature { padding: 22px; }
.feature .num { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: 1rem; margin-bottom: 10px; }
.site-footer { border-top: 1px solid var(--line); padding: 26px 0; color: var(--faint); font-size: .85rem; }

/* ---------- Auth ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .auth-wrap { grid-template-columns: 1.05fr 1fr; } }
.auth-side {
  display: none; padding: 48px; flex-direction: column; justify-content: space-between;
  background: radial-gradient(120% 80% at 0% 100%, rgba(198, 244, 92, .18), transparent 60%), radial-gradient(90% 70% at 100% 0%, rgba(255, 122, 69, .14), transparent 60%), var(--bg-2);
  border-right: 1px solid var(--line);
}
@media (min-width: 900px) { .auth-side { display: flex; } }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth-box { width: 100%; max-width: 420px; }
.seg {
  display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); margin: 26px 0 22px;
}
.seg button { padding: 10px; border: 0; background: transparent; border-radius: 999px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--surface-2); color: var(--text); }

/* ---------- Questionnaire ---------- */
.quiz { max-width: 640px; margin: 0 auto; }
.quiz-progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; margin: 18px 0 30px; }
.quiz-progress span { display: block; height: 100%; background: var(--accent); transition: width .35s ease; }
.quiz h2 { margin-bottom: 8px; }
.options { display: grid; gap: 10px; margin: 24px 0; }
.option {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s, background .2s;
}
.option:hover { border-color: var(--muted); }
.option.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.option .o-key {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-2); font-weight: 800; font-size: .85rem; color: var(--muted);
}
.option.on .o-key { background: var(--accent); color: var(--accent-ink); }
.option strong { display: block; }
.option span.sub { font-size: .85rem; color: var(--muted); }
.quiz-nav { display: flex; justify-content: space-between; gap: 12px; }
.result-badge {
  width: 120px; height: 120px; border-radius: 32px; margin: 10px auto 20px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 3rem; font-weight: 800;
  transform: rotate(-6deg);
}

/* ---------- Tableau de bord ---------- */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.switch { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.switch button { white-space: nowrap; border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: .88rem; color: var(--muted); cursor: pointer; }
.switch button.on { background: var(--accent); color: var(--accent-ink); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat .v { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.stat .l { font-size: .8rem; color: var(--muted); font-weight: 600; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s ease; }
.level-card { display: flex; gap: 18px; align-items: center; }
.level-ring { width: 84px; height: 84px; flex: none; position: relative; }
.level-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.level-ring .n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; }
.todo { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.todo:last-child { border-bottom: 0; }
.todo .ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); font-weight: 800; color: var(--accent); font-family: var(--font-display); }
.todo .body { flex: 1; min-width: 0; }
.todo .t { font-weight: 700; }
.todo .s { font-size: .85rem; color: var(--muted); }
.feed-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: .92rem; }
.feed-item:last-child { border-bottom: 0; }
.feed-item b { color: var(--accent); white-space: nowrap; }
.empty { text-align: center; padding: 26px 10px; color: var(--muted); font-size: .92rem; }

/* ---------- Progression : callisthénie ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.skill-card { display: flex; flex-direction: column; gap: 14px; }
.skill-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.skill-top h3 { font-size: 1.3rem; }
.ladder { display: flex; flex-direction: column; gap: 0; position: relative; }
.rung { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 12px; }
.rung:last-child { padding-bottom: 0; }
.rung::before { content: ''; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--line); }
.rung:last-child::before { display: none; }
.rung .pt {
  width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: var(--bg-2);
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: var(--faint); position: relative; z-index: 1;
}
.rung.done .pt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.rung.done::before { background: var(--accent); opacity: .5; }
.rung.current .pt { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.rung .rn { font-weight: 700; font-size: .93rem; }
.rung .rt { font-size: .82rem; color: var(--muted); }
.rung.locked .rn { color: var(--faint); }
.rung .tip { font-size: .82rem; color: var(--muted); margin-top: 4px; }
.skill-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ladder.collapsed .rung.far { display: none; }

/* ---------- Progression : musculation ---------- */
.ex-card { display: flex; flex-direction: column; gap: 10px; cursor: pointer; transition: border-color .2s, transform .15s; }
.ex-card:hover { border-color: var(--muted); }
.ex-card:active { transform: scale(.99); }
.ex-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-best { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.ex-best .v { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; }
.lvl-tag { font-size: .75rem; font-weight: 700; padding: 4px 9px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }

/* ---------- Modal ---------- */
.modal-bg {
  position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .66);
  display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease;
}
@media (min-width: 700px) { .modal-bg { align-items: center; } }
.modal {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px 24px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  animation: up .25s ease;
}
@media (min-width: 700px) { .modal { border-radius: 24px; } }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.log-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.history { margin-top: 10px; }
.history .h { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.spark { width: 100%; height: 90px; margin: 6px 0 4px; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } }

/* ---------- Classement ---------- */
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: end; margin: 8px 0 22px; }
.pod { text-align: center; }
.pod .av { margin: 0 auto 8px; }
.pod .block {
  border-radius: 14px 14px 6px 6px; background: var(--surface-2); border: 1px solid var(--line);
  padding: 12px 6px; font-family: var(--font-display); font-weight: 800;
}
.pod.p1 .block { height: 120px; border-color: var(--gold); background: linear-gradient(180deg, rgba(245, 200, 76, .18), var(--surface-2)); }
.pod.p2 .block { height: 92px; border-color: var(--silver); }
.pod.p3 .block { height: 72px; border-color: var(--bronze); }
.pod .name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .pts { font-size: .8rem; color: var(--muted); }
.av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 800; font-size: .95rem; color: #12140c; font-family: var(--font-display);
}
.av.lg { width: 56px; height: 56px; font-size: 1.3rem; }
.av.xl { width: 84px; height: 84px; font-size: 2rem; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.lb-row:last-child { border-bottom: 0; }
.lb-row .rk { width: 26px; text-align: center; font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.lb-row .who { flex: 1; min-width: 0; }
.lb-row .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-row .who span { font-size: .8rem; color: var(--muted); }
.lb-row .score { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.lb-row.me { background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 12px; }
.search-row { display: flex; gap: 8px; }
.search-row .input { flex: 1; }

/* ---------- Profil ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.kv { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 200;
  background: var(--text); color: var(--bg); padding: 12px 20px; border-radius: 999px;
  font-weight: 700; font-size: .92rem; box-shadow: var(--shadow); animation: up .25s ease; max-width: calc(100% - 32px); text-align: center;
}
@media (min-width: 860px) { .toast { bottom: 32px; } }

/* ==========================================================
   v2 — cloche, fil d'actu, défi du jour, photo, admin
   ========================================================== */
.faint { color: var(--faint); font-size: .8rem; font-weight: 500; }
.fineprint { color: var(--faint); font-size: .72rem; text-align: center; margin-top: 18px; opacity: .8; }

/* Avatars en photo */
img.av { object-fit: cover; display: block; }
.av.sm { width: 30px; height: 30px; font-size: .75rem; }

/* ---------- Cloche ---------- */
.nav-left { display: flex; align-items: center; gap: 10px; }
.bell {
  position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: border-color .2s, background .2s;
}
.bell:hover { border-color: var(--muted); }
.bell svg { width: 19px; height: 19px; }
.bell-badge {
  position: absolute; top: -5px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 99px;
  background: var(--danger); color: #fff; font-size: .68rem; font-weight: 800; line-height: 19px; text-align: center;
  border: 2px solid var(--bg); font-family: var(--font-body);
}
.notif-panel {
  position: fixed; z-index: 90; top: calc(70px + env(safe-area-inset-top, 0px)); left: 12px; right: 12px; max-width: 400px;
  max-height: min(70vh, 560px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); animation: up .2s ease;
}
@media (min-width: 1152px) { .notif-panel { left: calc((100vw - 1120px) / 2 + 16px); } }
.np-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.np-body { overflow-y: auto; padding: 6px; }
.np-item { border-radius: 14px; padding: 10px 10px; }
.np-item + .np-item { margin-top: 2px; }
.np-item.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.np-link { display: flex; gap: 12px; align-items: flex-start; }
.np-txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.4; overflow-wrap: anywhere; }
.np-what { color: var(--muted); font-size: .8rem; margin-top: 2px; }
.np-time { color: var(--faint); font-size: .75rem; margin-top: 3px; }
.np-actions { display: flex; gap: 8px; margin: 8px 0 2px 52px; }

/* ---------- Défi du jour ---------- */
.challenge {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%), var(--surface);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.challenge-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.challenge-title { font-size: clamp(1.25rem, 3.2vw, 1.6rem); margin-bottom: 4px; }
.challenge-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.challenge-xp { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--accent); }
.challenge.is-done { border-color: var(--line); background: var(--surface); }
.challenge.is-done .challenge-title { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }

/* ---------- Fil d'actu ---------- */
.feed-card { padding: 14px 0; border-bottom: 1px solid var(--line); }
.feed-card:last-child { border-bottom: 0; padding-bottom: 2px; }
.feed-card.flash { animation: flash 2.2s ease; border-radius: 14px; }
@keyframes flash { 0%, 40% { background: color-mix(in srgb, var(--accent) 14%, transparent); } 100% { background: transparent; } }
.fc-head { display: flex; gap: 12px; align-items: flex-start; }
.fc-txt { flex: 1; min-width: 0; font-size: .93rem; line-height: 1.4; }
.fc-what { color: var(--muted); font-size: .86rem; margin-top: 2px; overflow-wrap: anywhere; }
.fc-icon { font-size: .95rem; }
.fc-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.fc-xp { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: .95rem; }
.fc-time { color: var(--faint); font-size: .74rem; white-space: nowrap; }
.fc-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 10px 0 0 52px; flex-wrap: wrap; }
.reacts { display: flex; gap: 6px; flex-wrap: wrap; }
.react, .c-toggle {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 99px;
  background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; font-size: .95rem; transition: transform .12s, border-color .2s, background .2s;
}
.react:not(.has) { opacity: .55; }
.react:hover, .c-toggle:hover { opacity: 1; border-color: var(--muted); }
.react:active { transform: scale(.9); }
.react span, .c-toggle { font-size: .8rem; font-weight: 700; color: var(--muted); }
.react.on { opacity: 1; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); }
.react.on span { color: var(--accent); }
.c-toggle.on { border-color: var(--muted); color: var(--text); }
.comments { margin: 12px 0 0 52px; display: flex; flex-direction: column; gap: 10px; }
.comment { display: flex; gap: 10px; align-items: flex-start; }
.c-body { flex: 1; min-width: 0; font-size: .88rem; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; padding: 8px 12px; overflow-wrap: anywhere; }
.c-time { color: var(--faint); font-size: .72rem; margin-left: 4px; white-space: nowrap; }
.c-del { background: none; border: 0; color: var(--faint); font-size: 1.2rem; cursor: pointer; padding: 2px 6px; line-height: 1; }
.c-del:hover { color: var(--danger); }
.c-form { display: flex; gap: 8px; }
.c-input { padding: 9px 13px; font-size: .9rem; }
@media (max-width: 480px) {
  .fc-actions, .comments { margin-left: 0; }
  .np-actions { margin-left: 0; }
}

/* ---------- Demandes d'amis ---------- */
.req-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--danger); color: #fff; font-size: .75rem; font-family: var(--font-body); vertical-align: 2px; margin-left: 4px; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Photo de profil ---------- */
.photo-edit { position: relative; flex: none; }
.photo-btn {
  position: absolute; right: -4px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); border: 3px solid var(--bg); cursor: pointer;
}
.photo-btn svg { width: 16px; height: 16px; }
.photo-links { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.photo-links button { background: none; border: 0; cursor: pointer; padding: 0; }
.photo-links label:hover, .photo-links button:hover { text-decoration: underline; }

/* ---------- Admin ---------- */
.admin-link { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); transition: border-color .2s; }
.admin-link:hover { border-color: var(--accent); }
.admin-arrow { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); }
.chart-box { position: relative; }
.bars { width: 100%; height: auto; overflow: visible; }
.bars .grid-l { stroke: var(--line); stroke-width: 1; }
.bars .ax { fill: var(--faint); font-size: 13px; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.bars .bar-mark { fill: var(--accent); opacity: .85; transition: opacity .15s; }
.bars .bar-g { cursor: pointer; outline: none; }
.bars .bar-g.hot .bar-mark { opacity: 1; }
.chart-cap { margin-top: 10px; font-size: .82rem; font-weight: 600; color: var(--muted); min-height: 1.3em; font-variant-numeric: tabular-nums; }
.chart-tip {
  position: absolute; top: -6px; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  background: var(--text); color: var(--bg); font-size: .78rem; font-weight: 700; padding: 7px 11px; border-radius: 10px; box-shadow: var(--shadow);
}
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 640px; }
.admin-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.who-cell { display: flex; gap: 10px; align-items: center; }
.online { color: var(--cali); font-weight: 700; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- v3 : "voir plus" du fil + classement mondial ---------- */
.feed-more {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  margin-top: 6px; padding: 12px; border-radius: 14px; border: 1px dashed var(--line);
  background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; font-size: .85rem;
  transition: border-color .2s, color .2s, background .2s;
}
.feed-more:hover { border-color: var(--muted); color: var(--text); background: var(--bg-2); }
.feed-more .dots { display: inline-flex; gap: 5px; }
.feed-more .dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }
.scope-tabs { margin: 0 0 16px; }
.scope-tabs button { flex: 1; }
.lb-gap { text-align: center; color: var(--faint); letter-spacing: .3em; padding: 6px 0; }
.lb-row .tag-friend { font-size: .7rem; font-weight: 700; color: var(--accent); margin-left: 6px; }

/* ==========================================================
   v4 — finitions visuelles (lueurs, survols, animations, accessibilité)
   ========================================================== */
html { background: var(--bg); scroll-behavior: smooth; }
body { background: transparent; position: relative; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 85% -5%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(50% 40% at -10% 105%, rgba(255, 122, 69, .06), transparent 70%);
  transition: background .4s;
}
::selection { background: var(--accent); color: var(--accent-ink); }
html { scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent); }
.stat .v, .score, .lb-row .score, .nav-xp, .ex-best .v { font-variant-numeric: tabular-nums; }

/* Boutons */
.btn-primary { box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-ghost:hover { background: var(--surface-2); }
.btn:active { transform: scale(.97); }

/* Cartes : léger reflet en haut + survol */
.card, .stat, .disc-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.feature, .stat, .disc-card, .ex-card, .admin-link {
  transition: transform .2s ease, border-color .2s, box-shadow .2s;
}
.feature:hover, .stat:hover, .disc-card:hover, .ex-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 40px -24px rgba(0, 0, 0, .8);
}
.disc-card.cali:hover { border-color: rgba(198, 244, 92, .45); }
.disc-card.muscu:hover { border-color: rgba(255, 122, 69, .45); }
.disc-card .big-num { transition: opacity .3s, transform .3s; }
.disc-card:hover .big-num { opacity: .22; transform: translateY(-4px); }
.lb-row, .todo { transition: background .2s; }
a.lb-row:hover, a.todo:hover { background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: 12px; }

/* Barres de progression avec reflet */
.bar span, .quiz-progress span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Navigation */
.topbar { background: color-mix(in srgb, var(--bg) 78%, transparent); }
.nav-links a.active { box-shadow: inset 0 0 0 1px var(--line); }
.nav-xp {
  padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line);
}
.nav-xp .dot { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: pulse 2.4s infinite; }
.tabbar a { position: relative; transition: color .2s; }
.tabbar a.active::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 26px; height: 3px; margin-left: -13px;
  border-radius: 0 0 4px 4px; background: var(--accent); box-shadow: 0 2px 10px var(--accent);
}
.logo-mark { transition: transform .3s ease; }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }

/* Modale & toast */
.modal-bg { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal { box-shadow: var(--shadow); }
.toast { border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }

/* Podium */
.pod.p1 .block { box-shadow: 0 -10px 40px -18px rgba(245, 200, 76, .6); }
.pod.p1 .av { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); }

/* Écran de chargement */
.loader { display: grid; place-items: center; gap: 14px; padding: 90px 0; color: var(--muted); font-size: .9rem; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--surface-2); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}

/* ---------- Accueil ---------- */
.hero::before {
  content: ''; position: absolute; width: 520px; height: 520px; right: -120px; top: -160px; z-index: -1;
  background: radial-gradient(circle, rgba(198, 244, 92, .14), transparent 65%); pointer-events: none;
}
.hero h1 em {
  background: linear-gradient(100deg, var(--cali), #e9ff9e 60%, var(--cali));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero .eyebrow, .hero h1, .hero .lead, .hero-actions { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 { animation-delay: .08s; }
.hero .lead { animation-delay: .16s; }
.hero-actions { animation-delay: .24s; }
.hero-steps .draw { stroke-dasharray: 700; stroke-dashoffset: 0; animation: draw 1.6s .3s ease-out both; }
.hero-steps .goal { transform-origin: 370px 110px; animation: pop .5s 1.7s ease-out both; }
.hero-steps .goal-ring { transform-origin: 370px 110px; animation: ring 2.4s 2.2s ease-out infinite; }
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 34px; animation: rise .7s .32s cubic-bezier(.2, .7, .2, 1) both; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.hero-stats span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.feature .num {
  display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.cta-band {
  position: relative; overflow: hidden; text-align: center; padding: 48px 22px; margin-bottom: 60px;
  border-radius: 26px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: radial-gradient(80% 120% at 50% 0%, rgba(198, 244, 92, .14), transparent 60%), var(--surface);
}
.cta-band h2 { max-width: 20ch; margin: 10px auto 12px; }
.cta-band p { max-width: 44ch; margin: 0 auto 24px; }
.site-footer .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.site-footer .logo { font-size: 1rem; color: var(--muted); }
.site-footer .logo-mark { width: 22px; height: 22px; }

/* Apparition au défilement (accueil) */
.js .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.reveal.in { animation: rise .7s cubic-bezier(.2, .7, .2, 1) backwards; } /* "backwards" pour garder l'effet de survol ensuite */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes draw { from { stroke-dashoffset: 700; } }
@keyframes pop { from { opacity: 0; transform: scale(0); } }
@keyframes ring { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal:not(.in) { opacity: 1; transform: none; }
  .feature:hover, .stat:hover, .disc-card:hover, .ex-card:hover, .btn-primary:hover { transform: none; }
}
/* ---------- v5 : niveaux de difficulté en callisthénie ---------- */
.tiers { display: flex; gap: 6px; flex-wrap: wrap; }
.tier {
  font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--faint); background: var(--bg-2);
}
.tier.done { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: transparent; color: var(--accent); }
.tier.current { border-color: var(--accent); color: var(--text); }
.skill-card.tier-2 { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.skill-card.tier-3 {
  border-color: color-mix(in srgb, var(--gold) 45%, var(--line));
  background: radial-gradient(120% 80% at 100% 0%, rgba(245, 200, 76, .08), transparent 60%), var(--surface);
}
/* ---------- v6 : roue des paramètres ---------- */
.nav-right { display: flex; align-items: center; gap: 10px; }
.gear svg { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.gear:hover svg, .gear[aria-expanded="true"] svg { transform: rotate(90deg); }
.gear.on { border-color: var(--accent); color: var(--accent); }
.settings-panel { left: auto; right: 12px; max-width: 320px; width: calc(100% - 24px); }
@media (min-width: 1152px) { .settings-panel { left: auto; right: calc((100vw - 1120px) / 2 + 16px); } }
.sp-who { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sp-who b { display: block; font-size: 1rem; overflow-wrap: anywhere; }
.sp-who span { font-size: .8rem; color: var(--muted); }
.sp-body { padding: 6px; overflow-y: auto; }
.sp-item {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px;
  background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s;
}
.sp-item:hover { background: var(--surface-2); }
.sp-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--muted); }
.sp-ic svg { width: 19px; height: 19px; }
.sp-txt { display: flex; flex-direction: column; min-width: 0; }
.sp-txt b { font-size: .92rem; }
.sp-txt span { font-size: .78rem; color: var(--muted); }
.sp-item.danger, .sp-item.danger .sp-ic { color: var(--danger); }
@media (max-width: 420px) { .nav-xp { padding: 6px 10px; font-size: .82rem; } .nav-right { gap: 8px; } }
/* ==========================================================
   v7 — ÉVÉNEMENTS SAISONNIERS
   ========================================================== */
main.page { position: relative; }
.user-title { font-size: .85rem; font-weight: 700; color: var(--gold); margin-top: 2px; }
.title-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.title-pick .chip { cursor: pointer; font-size: .82rem; padding: 7px 12px; }

/* Point "événement en cours" dans le menu */
a.ev-live { position: relative; }
a.ev-live::after {
  content: ''; position: absolute; top: 6px; right: 8px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--bg); animation: pulse 2s infinite;
}
.tabbar a.ev-live::after { top: 2px; right: calc(50% - 18px); }

/* Thèmes */
.ev { --ev: #ff8a1f; --ev2: #9b5cff; --accent: var(--ev); --accent-ink: #120c06; margin-bottom: 40px; position: relative; }
.ev[data-ev="halloween"] { --ev: #ff8a1f; --ev2: #9b5cff; }
.ev[data-ev="noel"]      { --ev: #ff5468; --ev2: #2fd27a; }
.ev[data-ev="nouvelan"]  { --ev: #f5c84c; --ev2: #7cc8ff; }
.ev[data-ev="valentin"]  { --ev: #ff5c8a; --ev2: #ffb3cf; }
.ev[data-ev="paques"]    { --ev: #ffd166; --ev2: #7ee0b5; }
.ev[data-ev="ete"]       { --ev: #ffb020; --ev2: #33c3f0; }
.ev .card { border-color: color-mix(in srgb, var(--ev) 18%, var(--line)); }
.ev-timer {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 99px; font-weight: 800; font-size: .88rem;
  background: color-mix(in srgb, var(--ev) 16%, transparent); color: var(--ev); border: 1px solid color-mix(in srgb, var(--ev) 40%, transparent);
}
.ev-emoji { font-size: 3.4rem; line-height: 1; display: inline-block; animation: evFloat 4s ease-in-out infinite; filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--ev) 50%, transparent)); }
.ev-emoji.sm { font-size: 2.4rem; }
.ev-emoji.xl { font-size: 5rem; }
.ev-tagline { color: var(--muted); max-width: 52ch; margin: 8px 0 16px; }
.ev-panel { margin: 16px 0; background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ev2) 10%, transparent), transparent 60%), var(--surface); }
.ev .stats { margin-top: 16px; }

/* Particules flottantes */
.ev-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ev-particles span { position: absolute; top: 105%; opacity: .5; animation: evRise linear infinite; }
@keyframes evRise { to { transform: translateY(-140vh) rotate(360deg); } }
@keyframes evFloat { 50% { transform: translateY(-8px) rotate(-4deg); } }

/* Défis */
.ev-ch { display: flex; flex-direction: column; gap: 10px; }
.ev-ch.done { opacity: .78; }
.ev-ch.done h3 { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ev) 60%, transparent); }
.ev-ch.locked { border-style: dashed; opacity: .7; }
.ev-ch.partial { border-color: color-mix(in srgb, var(--ev) 45%, var(--line)); }
.ev-ch-top { display: flex; gap: 12px; align-items: flex-start; }
.ev-ch-ic { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 1.4rem; background: color-mix(in srgb, var(--ev) 13%, var(--surface-2)); }
.ev-ch h3 { font-size: 1.05rem; }
.ev-xp { font-family: var(--font-display); font-weight: 800; color: var(--ev); white-space: nowrap; font-size: .95rem; }
.ev-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.ev-tags span { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.ev-steps { display: flex; flex-direction: column; gap: 8px; }
.ev-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ev-step > div { flex: 1; min-width: 0; }
.ev-step.ok { opacity: .6; }
.ev-step.cur { border-color: color-mix(in srgb, var(--ev) 50%, var(--line)); }
.ev-dot { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; background: var(--surface-2); }
.ev-step.ok .ev-dot { background: var(--ev); color: var(--accent-ink); }
.ev-duo-status { display: flex; gap: 8px; flex-wrap: wrap; }
.ev-duo-status span { font-size: .8rem; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); color: var(--muted); }
.ev-duo-status span.ok { color: var(--ev); border-color: color-mix(in srgb, var(--ev) 45%, var(--line)); }
.ev-dice { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--bg-2); border: 1px dashed color-mix(in srgb, var(--ev) 50%, var(--line)); }
.ev-dice-face { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.6rem; background: var(--surface-2); transform: rotate(-8deg); }
.ev-friends { display: flex; flex-wrap: wrap; gap: 8px; }
.ev-friend { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; font-weight: 700; }
.ev-friend:hover { border-color: var(--ev); }

/* Succès */
.ev-ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ev-badge { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 10px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); opacity: .5; filter: grayscale(.8); }
.ev-badge.ok { opacity: 1; filter: none; border-color: color-mix(in srgb, var(--ev) 45%, var(--line)); background: radial-gradient(100% 80% at 50% 0%, color-mix(in srgb, var(--ev) 14%, transparent), transparent 70%), var(--surface); }
.ev-badge .i { font-size: 1.8rem; }
.ev-badge b { font-size: .85rem; }
.ev-badge .d { font-size: .72rem; color: var(--muted); }

/* Titres */
.ev-titles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ev-title { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--line); color: var(--faint); }
.ev-title.ok { border: 1px solid var(--gold); color: var(--text); background: linear-gradient(135deg, rgba(245, 200, 76, .12), transparent 70%), var(--bg-2); }
.ev-title span { font-size: 1.3rem; }
.ev-titles-hidden { text-align: center; padding: 14px; }
.ev-titles-hidden > span { display: inline-block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 8px; }
.ev-title-big { font-weight: 800; color: var(--gold); padding: 8px 14px; border-radius: 99px; border: 1px solid var(--gold); background: rgba(245, 200, 76, .1); }

/* Calendrier de l'Avent */
.ev-advent { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.ev-cell {
  position: relative; aspect-ratio: 1; border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; transition: transform .15s, border-color .2s;
}
.ev-cell .n { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.ev-cell .i { font-size: 1.2rem; }
.ev-cell.open { background: linear-gradient(160deg, color-mix(in srgb, var(--ev) 18%, transparent), transparent 70%), var(--surface); border-color: color-mix(in srgb, var(--ev) 40%, var(--line)); }
.ev-cell.open:hover { transform: translateY(-3px) rotate(-2deg); }
.ev-cell.done { background: color-mix(in srgb, var(--ev2) 16%, var(--surface)); border-color: color-mix(in srgb, var(--ev2) 50%, var(--line)); }
.ev-cell.done .i { color: var(--ev2); font-weight: 800; }
.ev-cell.locked { opacity: .4; cursor: not-allowed; }
.ev-cell.today { box-shadow: 0 0 0 2px var(--ev), 0 0 24px color-mix(in srgb, var(--ev) 50%, transparent); }
.ev-cell.special::before { content: '⭐'; position: absolute; top: 4px; right: 6px; font-size: .7rem; }
.ev-cell.bonus::before { content: '🎁'; position: absolute; top: 4px; right: 6px; font-size: .7rem; }

/* Œufs de Pâques */
.ev-basket { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 360px; }
.ev-basket span { aspect-ratio: 1; border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%; display: grid; place-items: center; background: var(--bg-2); border: 1px dashed var(--line); color: var(--faint); font-weight: 800; }
.ev-basket span.got { border: 1px solid color-mix(in srgb, var(--ev) 50%, var(--line)); background: color-mix(in srgb, var(--ev) 14%, var(--bg-2)); }
.ev-basket span.gold.got { border-color: var(--gold); }
.ev-hints { padding-left: 18px; color: var(--muted); font-size: .85rem; display: grid; gap: 4px; }
.egg {
  position: absolute; z-index: 30; width: 30px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer;
  font-size: 1.3rem; line-height: 30px; transform: translateX(-50%); animation: eggWobble 2.6s ease-in-out infinite; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}
.egg.golden { font-size: 1.6rem; filter: drop-shadow(0 0 10px var(--gold)); }
.egg.found { animation: eggPop .5s ease forwards; }
@keyframes eggWobble { 0%, 70%, 100% { transform: translateX(-50%) rotate(0); } 80% { transform: translateX(-50%) rotate(-14deg); } 90% { transform: translateX(-50%) rotate(12deg); } }
@keyframes eggPop { to { transform: translateX(-50%) scale(2); opacity: 0; } }

/* Barre du mode démo */
.demo-bar { display: grid; gap: 8px; padding: 12px 14px; margin-bottom: 14px; border-radius: 16px; border: 1px dashed var(--gold); background: rgba(245, 200, 76, .07); font-size: .88rem; }
.demo-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.demo-ctl .chip { cursor: pointer; }

/* Aucun événement */
.ev-empty { text-align: center; padding: 70px 16px; max-width: 520px; margin: 0 auto; }
.ev-empty-ic { font-size: 3rem; margin-bottom: 12px; opacity: .85; }
.ev-empty h2 { margin-bottom: 8px; }
.ev-demo-links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }

/* ---------- Page Événements : design Aventure ---------- */
.ev-d3 { border-radius: 28px; padding: 30px 18px 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ev) 30%, var(--line));
  background: radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--ev) 22%, transparent), transparent 70%),
              radial-gradient(60% 40% at 0% 60%, color-mix(in srgb, var(--ev2) 14%, transparent), transparent 70%),
              radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--ev) 12%, transparent), transparent 70%), var(--bg-2); }
.ev-d3 > :not(.ev-particles) { position: relative; z-index: 1; }
.ev-d3-head { text-align: center; padding: 10px 0 8px; }
.ev-d3-head h1 { font-size: clamp(2.6rem, 9vw, 5rem); color: var(--ev); text-shadow: 0 0 40px color-mix(in srgb, var(--ev) 50%, transparent); }
.ev-d3-head .ev-tagline { margin: 8px auto 16px; }
.ev-d3-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ev-d3-pills span { padding: 7px 12px; border-radius: 99px; font-size: .82rem; font-weight: 700; background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid color-mix(in srgb, var(--ev) 30%, var(--line)); backdrop-filter: blur(6px); }
.ev-d3-bar { max-width: 420px; margin: 18px auto 0; height: 10px; }
.ev-d3-h { margin: 34px 0 16px; font-size: 1.4rem; text-align: center; }
.ev-path { position: relative; display: flex; flex-direction: column; gap: 18px; }
.ev-path::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--ev) 60%, transparent) 0 10px, transparent 10px 18px); }
.ev-node { position: relative; width: calc(50% - 30px); }
.ev-node.l { align-self: flex-start; }
.ev-node.r { align-self: flex-end; }
.ev-node-dot { position: absolute; top: 18px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: var(--surface-2); border: 3px solid var(--bg-2); z-index: 2; }
.ev-node.l .ev-node-dot { right: -47px; }
.ev-node.r .ev-node-dot { left: -47px; }
.ev-node.done .ev-node-dot { background: var(--ev); color: var(--accent-ink); }
.ev-node.open .ev-node-dot, .ev-node.partial .ev-node-dot { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ev) 30%, transparent); }
@media (max-width: 700px) {
  .ev-path::before { left: 16px; }
  .ev-node, .ev-node.l, .ev-node.r { width: auto; align-self: stretch; margin-left: 46px; }
  .ev-node.l .ev-node-dot, .ev-node.r .ev-node-dot { left: -47px; right: auto; }
}
.ev-ach.shelf { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.ev-ach.shelf .ev-badge { flex: 0 0 140px; scroll-snap-align: start; }
.ev-chest { text-align: center; }
.ev-chest .ev-titles { text-align: left; }

@media (prefers-reduced-motion: reduce) { .ev-particles { display: none; } }
.ev-ch > .chip, .ev-ch > .btn { align-self: flex-start; }

/* Explications des défis d'événement */
.ev-how { padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border-left: 3px solid var(--ev); font-size: .85rem; }
.ev-how b { display: block; font-size: .78rem; color: var(--ev); margin-bottom: 3px; }
.ev-how p { color: var(--text); line-height: 1.45; }
.ev-quote { font-size: .85rem; font-style: italic; color: var(--muted); }
.ev-step-how { color: var(--muted); margin-top: 4px; line-height: 1.4; }
/* Messages (repos, motivation) et résolution du Nouvel An */
.ev-msg { margin: 0; padding: 14px 16px; border-radius: 14px; font-size: .95rem; line-height: 1.5; font-weight: 600;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--ev) 14%, transparent), transparent 70%), var(--bg-2);
  border: 1px solid color-mix(in srgb, var(--ev) 30%, var(--line)); }
.ev-reso { display: grid; gap: 10px; }
.ev-reso textarea { resize: vertical; min-height: 64px; font-size: .95rem; }
.ev-reso .btn { justify-self: start; }
.reso-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.reso-row:last-child { border-bottom: 0; }
.reso-row .body { flex: 1; min-width: 0; }
.reso-row q { display: block; margin-top: 4px; font-size: .95rem; overflow-wrap: anywhere; }
/* Binôme de la Saint-Valentin */
.duo-who { display: flex; align-items: center; gap: 12px; }
.duo-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 6px; flex-wrap: wrap; }
.duo-row.invite { border-color: color-mix(in srgb, var(--ev) 50%, var(--line)); background: color-mix(in srgb, var(--ev) 8%, var(--bg-2)); }
.duo-name { flex: 1; min-width: 140px; font-size: .9rem; }
/* Titre d'événement sous le pseudo, partout sur le site */
.ptitle, .lb-row .who .ptitle, .sp-who .ptitle {
  display: block; font-size: .72rem; font-weight: 700; color: var(--gold); line-height: 1.25; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.ptitle:empty { display: none !important; }
.c-body .ptitle { display: inline; margin-left: 6px; }
.pod .ptitle { margin: 2px auto 4px; font-size: .68rem; }
.fc-txt .ptitle { margin-top: 2px; }
.user-title { color: var(--gold); }
/* Titre « Admin » : rouge lumineux */
.user-title:empty { display: none; }
.ptitle.is-admin, .user-title.is-admin, .lb-row .who .ptitle.is-admin {
  color: #ff3b3b; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  text-shadow: 0 0 4px rgba(255, 59, 59, .9), 0 0 12px rgba(255, 40, 40, .6), 0 0 22px rgba(255, 30, 30, .35);
  animation: adminGlow 2.4s ease-in-out infinite;
}
.chip.chip-admin { color: #ff3b3b; border-color: rgba(255, 59, 59, .5); text-shadow: 0 0 8px rgba(255, 59, 59, .7); }
.chip.chip-admin.on { background: #ff3b3b; color: #fff; text-shadow: none; box-shadow: 0 0 14px rgba(255, 59, 59, .6); }
@keyframes adminGlow { 50% { text-shadow: 0 0 6px rgba(255, 59, 59, 1), 0 0 18px rgba(255, 40, 40, .8), 0 0 30px rgba(255, 30, 30, .5); } }
/* Bouton "Ajouter en ami" sur la page d'un joueur */
.friend-cta { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface); }
.friend-cta-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.friend-cta-row p { flex: 1; min-width: 220px; }
/* Page admin : liste des titres */
.tl-card { margin-bottom: 16px; }
.tl-card.ev { margin-bottom: 16px; }
.tl-row { display: flex; align-items: baseline; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tl-row:last-of-type { border-bottom: 0; }
.tl-name { flex: 0 0 260px; max-width: 100%; font-weight: 700; color: var(--gold); }
.tl-row .small { flex: 1; min-width: 200px; }
/* Inscription : encart de confiance, aides et mot de passe */
.trust { margin: 0 0 20px; padding: 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%), var(--surface); }
.trust-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.trust-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); }
.trust-head b { display: block; font-size: 1rem; }
.trust-head span { font-size: .8rem; color: var(--muted); }
.trust-list { list-style: none; display: grid; gap: 9px; }
.trust-list li { display: flex; gap: 10px; font-size: .84rem; line-height: 1.45; color: var(--muted); }
.trust-list li > span { flex: none; width: 20px; text-align: center; }
.trust-list b { color: var(--text); }
.trust-more { margin-top: 12px; font-size: .8rem; color: var(--muted); }
.trust-more summary { cursor: pointer; color: var(--accent); font-weight: 700; }
.trust-more p { margin-top: 8px; line-height: 1.5; }
.hint { font-size: .76rem; color: var(--faint); line-height: 1.4; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 48px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 1rem; border-radius: 10px; }
.pw-eye:hover { background: var(--surface-2); }
.pw-meter { display: grid; gap: 5px; margin-top: 2px; }
.pw-bar { height: 5px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pw-bar span { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .3s, background .3s; }
/* Questionnaire : accueil, explications, plan personnalisé */
.quiz-intro { text-align: center; padding: 10px 0 24px; }
.quiz-wave { font-size: 3rem; display: inline-block; animation: wave 1.8s ease-in-out 2; transform-origin: 70% 70%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 15%, 45% { transform: rotate(14deg); } 30% { transform: rotate(-8deg); } }
.quiz-intro h2 { margin: 10px 0 12px; }
.quiz-intro > p { max-width: 50ch; margin: 0 auto; }
.quiz-promises { list-style: none; display: grid; gap: 10px; text-align: left; max-width: 460px; margin: 22px auto 0; }
.quiz-promises li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: .9rem; }
.quiz-why { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: .85rem; color: var(--muted); background: var(--bg-2); border-left: 3px solid var(--accent); }
.plan-card { background: radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface); }
.plan-tips { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.plan-tips li { display: flex; gap: 10px; font-size: .86rem; line-height: 1.45; }
.plan-tips li > span { flex: none; }
.plan-tips li { display: list-item; margin-left: 18px; list-style: disc; }
.plan-tips { list-style: disc; }

/* ==========================================================
   v8 — finitions "pro" : minuteur de repos, saisie rapide, chargement
   ========================================================== */
/* Saisie d'une série : boutons − / + */
.stepper { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-2); overflow: hidden; }
.stepper .input { border: 0; border-radius: 0; text-align: center; padding: 12px 4px; min-width: 0; font-weight: 800; font-size: 1.05rem; background: transparent; -moz-appearance: textfield; }
.stepper .input::-webkit-outer-spin-button, .stepper .input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper .input:focus { box-shadow: none; }
.stepper:focus-within { border-color: var(--accent); }
.stepper button { flex: none; width: 34px; border: 0; background: var(--surface-2); color: var(--text); font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.stepper button:active { background: var(--line); }
/* Noter une série (muscu) : 3 gros champs lisibles, sur téléphone un par ligne */
.log-row { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.log-field label { font-weight: 700; color: var(--text); }
.stepper-val { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 0; }
.stepper .stepper-val .input { padding: 6px 2px 0; font-family: var(--font-display); font-size: 1.6rem; line-height: 1.1; }
.stepper-unit { font-size: .75rem; color: var(--muted); font-weight: 600; }
.stepper button { width: 44px; font-size: 1.4rem; }
.log-sum { margin: 14px 0 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); text-align: center; font-size: 1.05rem; color: var(--muted); }
.log-sum b { color: var(--accent); font-family: var(--font-display); font-size: 1.3rem; }
@media (max-width: 560px) {
  .log-row { grid-template-columns: 1fr; gap: 12px; }
  .log-field { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 10px; }
  .log-field label { margin: 0; font-size: 1.05rem; }
  .stepper button { width: 54px; font-size: 1.6rem; }
  .stepper .stepper-val .input { font-size: 1.9rem; }
}
/* Charge / reps / séries dans une phrase : chiffres en gros et en clair */
.nums { font-variant-numeric: tabular-nums; }
.nums b { color: var(--text); font-weight: 800; font-size: 1.15em; }
.ex-best .v .nums { font-size: 1rem; font-family: var(--font-body, inherit); font-weight: 600; color: var(--muted); }
.ex-best .v .nums b { font-family: var(--font-display); font-size: 1.45rem; }
.todo .s .rec { white-space: nowrap; }
.todo .s .nums b { font-size: 1.2em; }
.advice-box { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.advice-box .nums { font-size: 1.05rem; color: var(--muted); }
.advice-box .nums b { color: var(--accent); font-family: var(--font-display); font-size: 1.35rem; }
/* Dernière fois + historique : charge, reps, séries en gros, chacun avec son nom */
.last-box { margin: -2px 0 14px; padding: 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); }
.set-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.set-nums div { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 10px; background: var(--surface-2); }
.set-nums b { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.set-nums span { font-size: .72rem; color: var(--muted); }
.history .h { align-items: center; gap: 10px; flex-wrap: wrap; }
.history .h .set-nums { flex: 1; margin-top: 0; min-width: 200px; }
.history .h-date { flex-basis: 100%; font-size: .8rem; color: var(--muted); }
.history .h:has(.set-nums) { padding: 10px 0; }

/* Minuteur de repos flottant */
.rest-pill {
  --p: 1; position: fixed; z-index: 150; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow); animation: up .25s ease;
}
@media (min-width: 860px) { .rest-pill { bottom: 28px; } }
.rest-ring { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 360deg), var(--surface-2) 0); -webkit-mask: radial-gradient(circle, transparent 11px, #000 12px); mask: radial-gradient(circle, transparent 11px, #000 12px); }
.rest-pill small { display: block; font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.rest-pill b { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; min-width: 3.2ch; display: inline-block; }
.rest-pill button { height: 32px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text); font-weight: 700; font-size: .78rem; cursor: pointer; display: grid; place-items: center; }
.rest-pill button svg { width: 14px; height: 14px; }

/* Chargement "squelette" (à la place d'un simple texte) */
#loading { padding-top: 6px; }
.skel { border-radius: 14px; background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%); background-size: 200% 100%; animation: skel 1.3s ease-in-out infinite; }
.skel-title { height: 44px; width: min(320px, 70%); margin-bottom: 12px; }
.skel-line { height: 14px; width: min(220px, 50%); margin-bottom: 26px; }
.skel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
@media (min-width: 760px) { .skel-grid { grid-template-columns: repeat(4, 1fr); } }
.skel-card { height: 86px; border-radius: var(--radius); }
.skel-block { height: 260px; border-radius: var(--radius); }
@keyframes skel { to { background-position: -200% 0; } }

/* Lisibilité des chiffres */
.stat .v, .score, .pts, .nav-xp, .ev-xp, .fc-xp, .admin-table .num { font-variant-numeric: tabular-nums; }
/* Progression muscu : titre de chaque groupe musculaire */
.group-h { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 2px 2px; border-bottom: 1px solid var(--line); }
.group-h:first-child { padding-top: 0; }
.group-h h3 { font-size: 1.25rem; }.stepper { width: 100%; }
.stepper .input { flex: 1; width: 100%; }

/* ---------- Page Réglages (liste groupée, à la manière des réglages d'un téléphone) ---------- */
.set-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.set-head h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.set-title { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 22px 0 8px 4px; }
.set-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.set-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; cursor: pointer; transition: background .15s; }
.set-row:last-child { border-bottom: 0; }
.set-row:not(.static):hover { background: var(--surface-2); }
.set-row.static { cursor: default; }
/* Guide d'installation : ce qu'il faut toucher clignote, une bulle explique l'étape */
.guide-pulse { animation: guidePulse 1.3s ease-in-out infinite; }
@keyframes guidePulse { 0%, 100% { box-shadow: inset 0 0 0 2px transparent, 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent); } }
.guide-tip { position: fixed; z-index: 9999; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); max-width: 420px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.guide-tip span { flex: 1; line-height: 1.35; }
.guide-tip button { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.12); color: inherit; cursor: pointer; }
.guide-tip button svg { width: 16px; height: 16px; }
.set-label { flex: 1; min-width: 0; font-weight: 600; font-size: .95rem; }
.set-label small { display: block; font-weight: 500; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.set-value { color: var(--muted); font-size: .88rem; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.set-chev { color: var(--faint); font-size: 1.3rem; line-height: 1; }
.set-row.danger .set-label { color: var(--danger); }
.set-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 2px solid var(--line); }
.set-mini { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.switch-ui { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); transition: background .2s; }
.switch-ui::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.switch-ui.on { background: var(--accent); border-color: var(--accent); }
.switch-ui.on::after { transform: translateX(18px); background: var(--accent-ink); }
.color-pick { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.color-pick.on { border-color: var(--text); }

/* Page Confidentialité */
.legal { max-width: 720px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 8px 0 6px; }
.legal h2 { font-size: 1.25rem; margin: 30px 0 10px; }
.legal p, .legal li { line-height: 1.65; color: var(--muted); }
.legal b { color: var(--text); }
.legal ul { padding-left: 20px; display: grid; gap: 6px; margin-bottom: 10px; }
/* Annonce (fenêtre "Quoi de neuf") */
.ann-list { list-style: none; display: grid; gap: 10px; margin-top: 16px; }
.ann-list li { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); }
.ann-list b { font-size: .95rem; }
.ann-list span { font-size: .86rem; color: var(--muted); line-height: 1.45; }
/* Sondage des joueurs + page admin "Avis" */
.survey-q { display: grid; gap: 8px; margin-top: 18px; }
.survey-q b { font-size: .98rem; }
.survey-q .title-pick .chip { cursor: pointer; padding: 8px 14px; font-size: .86rem; }
.survey-q textarea { resize: vertical; min-height: 76px; }
.av-bar { display: grid; grid-template-columns: 120px 1fr 74px; align-items: center; gap: 10px; padding: 6px 0; font-size: .88rem; }
.av-n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.av-n small { color: var(--muted); font-weight: 500; }
.av-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* Roue : nouvelles réponses au sondage (admin) */
.sp-item.is-new .sp-txt span { color: var(--accent); font-weight: 700; }
.sp-item.is-new { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* Vidéo d'un exercice de muscu (bonhomme bâton animé, js/demo.js) */
.demo-box { margin-top: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.demo-svg { display: block; width: 100%; max-height: 300px; }

/* Installer l'appli */
.install-steps { padding-left: 20px; display: grid; gap: 10px; line-height: 1.5; color: var(--muted); }
.install-steps b { color: var(--text); }
/* iPhone : flèche vers le bouton Partager de Safari */
.ios-hint { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .7); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 16px calc(64px + env(safe-area-inset-bottom)); animation: fade .2s ease; }
.ios-hint-box { display: grid; gap: 8px; max-width: 360px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); font-size: .92rem; line-height: 1.45; color: var(--muted); }
.ios-hint-box > b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); }
.ios-hint-box span b { color: var(--text); }
.ios-hint-box .btn { justify-self: start; margin-top: 4px; }
.ios-hint-arrow { margin-top: 10px; font-size: 2.4rem; font-weight: 800; color: var(--accent); animation: iosBounce 1s ease-in-out infinite; }
@keyframes iosBounce { 50% { transform: translateY(10px); } }
/* Erreur affichée sous le champ concerné */
.field-error { color: var(--danger); font-size: .82rem; font-weight: 600; line-height: 1.35; margin-top: -1px; }
.field-error:empty { display: none; }
.input.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 93, 93, .15); }.input.invalid, .input.invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 93, 93, .18); outline-color: var(--danger); }

/* ---------- Revue générale : petites corrections d'affichage ---------- */
/* Connexion sur mobile : le formulaire commence en haut au lieu de flotter au milieu de l'écran */
@media (max-width: 899px) { .auth-main { align-items: flex-start; padding-top: 28px; } }
/* Connexion sur ordinateur : le logo est déjà à gauche, pas besoin de le répéter au-dessus du formulaire */
@media (min-width: 900px) { #logoMain { display: none; } }
/* Carte « Active les notifications » (accueil de l'appli installée) */
.push-ask { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.push-ask-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--accent) 14%, transparent); flex: none; }

/* Liste des joueurs à cocher pour les notifications (page Statistiques) */
.push-people { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.push-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.push-person:hover { background: var(--surface-2); }
.push-person input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.push-person-name { display: flex; flex-direction: column; min-width: 0; }

/* ==========================================================
   v9 — PLUS DE DYNAMIQUE
   1. Design plus énergique (dégradés, lueurs, fond vivant)
   2. Mouvement (apparition en cascade, barres, anneau, +XP, pages)
   3. Vie entre joueurs (bande « En direct », amis actifs)
   ========================================================== */
:root {
  --accent-2: #7be8a0;                                     /* vert menthe, pour les dégradés */
  --grad: linear-gradient(135deg, #e2ff7a 0%, var(--cali) 45%, var(--accent-2) 100%);
  --glow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 12px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent);
}

/* ---------- 1. Design plus énergique ---------- */
/* Fond vivant : les halos de couleur dérivent lentement */
body::before {
  background:
    radial-gradient(55% 40% at 85% -5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(45% 35% at -5% 100%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%),
    radial-gradient(30% 25% at 40% 55%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%);
  background-size: 140% 140%;
  animation: bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 100% { background-position: 30% 20%, 70% 80%, 40% 60%; } }

/* Boutons principaux : dégradé + reflet qui balaie au survol */
.btn-primary { background: var(--grad); position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }
.btn:active { transform: scale(.95); }
.btn { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background .2s, border-color .2s, opacity .2s, box-shadow .2s; }

/* Titres de page plus percutants */
.dash-head h1 { letter-spacing: -.035em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 14px; height: 3px; border-radius: 3px; background: var(--grad); flex: none; }

/* Cartes : liseré lumineux au survol, et touché qui s'enfonce légèrement */
.card { transition: border-color .25s, box-shadow .25s, transform .2s; }
@media (hover: hover) {
  .card:hover { border-color: color-mix(in srgb, var(--accent) 22%, var(--line)); }
}
a.card:active, .todo:active, a.lb-row:active { transform: scale(.985); }

/* Chiffres clés : le plus important en dégradé, petite barre de couleur sur chaque bloc */
.stat { position: relative; overflow: hidden; }
.stat::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); opacity: .85; }
.stat .v.accent, .level-ring .n, .pod.p1 .pts {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lvl-tag { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Anneau de niveau qui brille */
.level-ring svg { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 45%, transparent)); }
.level-card { background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 60%); }

/* Défi du jour : bordure en dégradé qui tourne */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.challenge:not(.is-done) {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--ang), var(--line) 0 55%, var(--accent) 70%, var(--accent-2) 80%, var(--line) 95%) border-box;
  animation: angSpin 5s linear infinite;
}
@keyframes angSpin { to { --ang: 360deg; } }

/* Barre du bas : l'onglet actif rebondit */
.tabbar a.active svg { animation: tabPop .45s cubic-bezier(.3, 1.8, .5, 1); color: var(--accent); }
@keyframes tabPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

/* ---------- 2. Mouvement ---------- */
/* Apparition en cascade à l'ouverture d'une page (classe posée par animateIn() dans app.js) */
.dyn-in { animation: dynRise .6s cubic-bezier(.2, .8, .2, 1) var(--dyn-delay, 0ms) backwards; }
@keyframes dynRise { from { opacity: 0; transform: translateY(16px) scale(.985); } }
/* les barres se remplissent, l'anneau de niveau se dessine */
.dyn-in .bar span, .dyn-in .quiz-progress span { animation: barGrow 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--dyn-delay, 0ms) + .15s) backwards; }
@keyframes barGrow { from { width: 0; } }
.dyn-in .ring-fill { animation: ringDraw 1.3s cubic-bezier(.2, .8, .2, 1) .2s backwards; }
@keyframes ringDraw { from { stroke-dashoffset: var(--c); } }

/* XP gagnée : le compteur rebondit et « +XP » s'envole */
.nav-xp.xp-bump { animation: xpBump .6s cubic-bezier(.3, 1.8, .5, 1); border-color: var(--accent); }
@keyframes xpBump { 30% { transform: scale(1.18); box-shadow: var(--glow); } }
.xp-fly {
  position: fixed; z-index: 500; transform: translateX(-50%); pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: xpFly 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}
@keyframes xpFly { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, 34px) scale(1); } }

/* Transition douce d'une page à l'autre (Chrome, Edge, Safari récents) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .16s ease both; }
::view-transition-new(root) { animation: vtIn .3s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 3. Vie entre joueurs ---------- */
/* Bande « En direct » de l'accueil */
.live {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 8px 8px 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); overflow: hidden;
}
.live-tag { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.live-tag i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); animation: liveDot 1.6s infinite; }
@keyframes liveDot { 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 77, 77, 0); } }
.live-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 92%, transparent); }
.live-row { display: flex; gap: 10px; width: max-content; }
.live-row.scroll { animation: liveScroll calc(var(--n) * 6s) linear infinite; }
.live-row.scroll:hover, .live-row.scroll:focus-within { animation-play-state: paused; }
.live-copy { display: contents; }
@keyframes liveScroll { to { transform: translateX(-50%); } }
.live-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 5px 14px 5px 5px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); cursor: pointer; text-align: left; white-space: nowrap;
  transition: border-color .2s, transform .15s;
}
.live-pill:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.live-pill:active { transform: scale(.96); }
.live-txt { font-size: .82rem; line-height: 1.25; }
.live-txt small { display: block; color: var(--muted); font-size: .72rem; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* « X amis ont déjà bougé aujourd'hui » */
.active-today { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 30%, var(--line)); }
.av-stack { display: flex; flex: none; }
.av-stack .av { box-shadow: 0 0 0 2px var(--surface); }
.av-stack .av + .av { margin-left: -9px; }

/* Nouveaux exploits arrivés en direct dans le fil */
.feed-card.flash { animation: flash 2.6s ease; }

/* Respect du réglage « réduire les animations » du téléphone */
@media (prefers-reduced-motion: reduce) {
  body::before, .challenge:not(.is-done), .live-row.scroll, .live-tag i { animation: none !important; }
  .live-track { overflow-x: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
/* Couleur des titres selon l'événement où ils ont été gagnés (le titre Admin reste rouge lumineux) */
:root .ptitle.t-halloween, :root .user-title.t-halloween { color: #ff8a2a; text-shadow: 0 0 10px rgba(255, 138, 42, .35); }  /* orange citrouille */
:root .ptitle.t-noel, :root .user-title.t-noel { color: #ff5252; text-shadow: 0 0 10px rgba(255, 82, 82, .3); }              /* rouge Noël */
:root .ptitle.t-nouvelan, :root .user-title.t-nouvelan { color: #f5c84c; text-shadow: 0 0 10px rgba(245, 200, 76, .35); }    /* or */
:root .ptitle.t-valentin, :root .user-title.t-valentin { color: #ff6fae; text-shadow: 0 0 10px rgba(255, 111, 174, .35); }  /* rose */
:root .ptitle.t-paques, :root .user-title.t-paques { color: #c39bff; text-shadow: 0 0 10px rgba(195, 155, 255, .35); }       /* violet pastel */
:root .ptitle.t-ete, :root .user-title.t-ete { color: #2fd6d0; text-shadow: 0 0 10px rgba(47, 214, 208, .35); }              /* bleu lagon */
/* ==========================================================
   v10 — FICHES DES FIGURES (page Progression, js/figures.js)
   Téléphone : la fiche monte depuis le bas. Ordinateur : grande fenêtre au centre.
   --fig = couleur de la famille (Tirage bleu, Poussée orange, Jambes violet, Gainage turquoise, Équilibre rose)
   ========================================================== */
/* Cartes de la page Progression : on peut les toucher */
.skill-card[data-open-fig] { cursor: pointer; position: relative; }
/* ligne de couleur en haut : c'est la bordure de la carte, elle suit donc exactement les coins arrondis */
.skill-card[data-open-fig] { border-top: 3px solid color-mix(in srgb, var(--fig) 75%, var(--surface)); }
@media (hover: hover) { .skill-card[data-open-fig]:hover { border-color: color-mix(in srgb, var(--fig) 45%, var(--line)); border-top-color: var(--fig); transform: translateY(-2px); } }
.skill-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.skill-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-size: 1.35rem; border-radius: 12px; background: color-mix(in srgb, var(--fig) 16%, transparent); }
.skill-more { margin-left: auto; }

.fig-sheet { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center; }
.fig-scrim { position: absolute; inset: 0; background: rgba(5, 6, 4, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.fig-panel {
  position: relative; width: 100%; max-width: 760px; height: 94vh; height: 94dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg-2); border: 1px solid var(--line); border-bottom: 0; border-radius: 26px 26px 0 0;
  box-shadow: 0 -30px 80px -20px rgba(0, 0, 0, .8);
  transform: translateY(100%); transition: transform .42s cubic-bezier(.2, .9, .2, 1);
  padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}
.fig-sheet.open .fig-scrim { opacity: 1; }
.fig-sheet.open .fig-panel { transform: none; }
.fig-sheet.closing .fig-scrim { opacity: 0; }
.fig-sheet.closing .fig-panel { transform: translateY(100%); transition-duration: .28s; }
.fig-sheet.no-anim .fig-panel, .fig-sheet.no-anim .fig-scrim { transition: none; }
@media (min-width: 820px) {
  .fig-sheet { align-items: center; padding: 3vh 16px; }
  .fig-panel { height: auto; max-height: 92vh; border-radius: 26px; border-bottom: 1px solid var(--line); transform: translateY(24px) scale(.96); opacity: 0; transition: transform .38s cubic-bezier(.2, .9, .2, 1), opacity .25s; }
  .fig-sheet.open .fig-panel { opacity: 1; }
  .fig-sheet.closing .fig-panel { transform: translateY(16px) scale(.97); opacity: 0; }
}

/* En-tête coloré */
.fig-hero {
  position: relative; padding: 26px 22px 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--fig) 38%, transparent), transparent 62%),
              linear-gradient(180deg, color-mix(in srgb, var(--fig) 14%, var(--bg-2)), var(--bg-2));
  border-bottom: 1px solid var(--line);
}
.fig-hero::before { content: ''; position: absolute; top: 8px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
@media (min-width: 820px) { .fig-hero::before { display: none; } }
.fig-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .12); color: var(--text); }
.fig-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 52px 16px 0; }
.fig-hero-ic {
  width: 74px; height: 74px; display: grid; place-items: center; font-size: 2.4rem; border-radius: 22px;
  background: color-mix(in srgb, var(--fig) 22%, rgba(0, 0, 0, .3)); border: 1px solid color-mix(in srgb, var(--fig) 45%, transparent);
  box-shadow: 0 14px 40px -14px var(--fig);
}
.fig-sheet.open:not(.no-anim) .fig-hero-ic { animation: figPop .6s cubic-bezier(.3, 1.6, .5, 1) .12s backwards; }
@keyframes figPop { from { transform: scale(.4) rotate(-12deg); opacity: 0; } }
.fig-ring { position: relative; width: 74px; height: 74px; flex: none; }
.fig-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fig) 50%, transparent)); }
.fig-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-size: .78rem; color: var(--muted); }
.fig-ring span b { font-family: var(--font-display); font-size: 1.3rem; color: var(--text); margin-right: 1px; }
.fig-ring span { display: flex; align-items: baseline; justify-content: center; padding-top: 24px; }
.fig-sheet.open:not(.no-anim) .fig-ring-fill { animation: ringDraw 1.2s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
.fig-kind { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--fig); }
.fig-hero h2 { font-size: clamp(2rem, 7vw, 2.8rem); margin: 4px 0 6px; }
.fig-tagline { color: var(--muted); font-size: 1rem; }
.fig-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.fig-facts > div { padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .07); min-width: 0; }
.fig-facts small { display: block; color: var(--muted); font-size: .7rem; margin-bottom: 4px; }
.fig-facts b { font-size: .85rem; line-height: 1.2; display: block; }
.fig-dots { display: flex; gap: 4px; padding-top: 3px; }
.fig-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.fig-dots i.on { background: var(--fig); box-shadow: 0 0 8px var(--fig); }

/* Onglets qui restent en haut pendant la lecture */
.fig-tabs {
  position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; padding: 10px 16px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.fig-tabs::-webkit-scrollbar { display: none; }
.fig-tabs a { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: var(--muted); white-space: nowrap; transition: background .2s, color .2s; }
.fig-tabs a.on { background: color-mix(in srgb, var(--fig) 20%, transparent); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fig) 45%, transparent); }

/* Sections */
.fig-sec { padding: 22px 22px 6px; }
.fig-sec + .fig-sec { border-top: 1px dashed var(--line); margin-top: 16px; }
.fig-sec h3 { margin-bottom: 12px; }
.fig-sec h4 { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.fig-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fig-sec-head h3 { margin: 0; }
.fig-desc { font-size: 1.02rem; line-height: 1.6; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.fig-now-card {
  margin: 18px 0; padding: 18px; border-radius: 18px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--fig) 12%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--fig) 35%, var(--line));
}
.fig-now-card.pop { animation: figCardPop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes figCardPop { 30% { transform: scale(1.025); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fig) 30%, transparent); } }
.fig-now-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.fig-now-card h3 { font-size: 1.35rem; margin-bottom: 4px; }
.fig-goal { margin-bottom: 6px; }
.fig-goal b { color: var(--fig); }
.fig-now-card .bar span { background: var(--fig); box-shadow: 0 0 10px color-mix(in srgb, var(--fig) 50%, transparent); }
.fig-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.fig-actions .btn-primary { flex: 1 1 220px; }
.fig-cols { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .fig-cols { grid-template-columns: 1fr 1fr; } }
.fig-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fig-chip { padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--surface); border: 1px solid var(--line); }

/* Niveaux et liste des étapes (ligne de progression) */
.fig-tiers button.on { background: color-mix(in srgb, var(--fig) 22%, var(--surface-2)); color: var(--text); }
.fig-steps { list-style: none; position: relative; }
.fig-steps::before { content: ''; position: absolute; left: 15px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.fig-step { position: relative; display: flex; gap: 14px; padding: 8px 0; }
.fig-sheet.open:not(.no-anim) .fig-step { animation: dynRise .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * 40ms) backwards; }
.fig-step-dot {
  position: relative; z-index: 1; width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: .85rem; background: var(--surface-2); border: 2px solid var(--line); color: var(--muted);
}
.fig-step.done .fig-step-dot { background: var(--fig); border-color: var(--fig); color: #111; }
.fig-step.current .fig-step-dot { border-color: var(--fig); color: var(--text); box-shadow: 0 0 0 5px color-mix(in srgb, var(--fig) 20%, transparent); }
.fig-step-body { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.fig-step.current .fig-step-body { border-color: color-mix(in srgb, var(--fig) 55%, var(--line)); background: color-mix(in srgb, var(--fig) 7%, var(--surface)); }
.fig-step.locked .fig-step-body { opacity: .62; }
.fig-step-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fig-step-goal { font-size: .82rem; font-weight: 700; color: var(--fig); white-space: nowrap; }
.fig-step-body p { font-size: .86rem; color: var(--muted); margin-top: 4px; }
.fig-now { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--fig); color: #111; }

/* Technique et conseils : voir v18 (version « mémo ») */

@media (prefers-reduced-motion: reduce) {
  .fig-panel, .fig-scrim { transition: none !important; }
}
/* ---------- Glisser pour changer de page (indicateur sur le côté) ---------- */
.swipe-hint {
  position: fixed; top: 50%; z-index: 250; display: flex; align-items: center; gap: 8px; pointer-events: none;
  padding: 12px 16px; border-radius: 999px; font-weight: 800; font-size: .9rem;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
  opacity: 0; transform: translateY(-50%) scale(.85); transition: opacity .2s, transform .2s, background .2s, color .2s;
}
.swipe-hint b { font-size: 1.3rem; line-height: 1; }
.swipe-hint.right { right: 12px; }
.swipe-hint.left { left: 12px; }
.swipe-hint.show { opacity: calc(.35 + var(--p, 0) * .65); transform: translateY(-50%) scale(calc(.85 + var(--p, 0) * .15)); transition: none; }
.swipe-hint.ready { background: var(--grad); color: var(--accent-ink); border-color: transparent; box-shadow: var(--glow); }
/* le geste « page précédente » du navigateur ne doit pas se mélanger au glissement entre les pages de Palier */
html, body { overscroll-behavior-x: none; }

/* ---------- Guide d'installation iPhone / iPad (flèche vers le bouton Partager) ---------- */
.ios-guide { position: fixed; inset: 0; z-index: 400; background: rgba(4, 5, 3, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; padding: 16px; animation: fade .2s ease; }
.ios-guide.bottom, .ios-guide.bottom-right { justify-content: flex-end; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.ios-guide.top { justify-content: flex-start; padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
.ios-guide-box { display: grid; gap: 12px; width: 100%; max-width: 360px; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); box-shadow: var(--glow); animation: dynRise .4s cubic-bezier(.2, .8, .2, 1); }
.ios-guide-title { font-family: var(--font-display); font-size: 1.25rem; }
.ios-step { display: flex; align-items: center; gap: 12px; font-size: .95rem; line-height: 1.35; }
.ios-step small { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.ios-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--accent) 15%, var(--surface-2)); color: var(--accent); font-weight: 900; }
.ios-ic svg { width: 22px; height: 22px; }
.ios-guide-box .btn { justify-self: start; }
.ios-guide-arrow { width: 54px; height: 54px; margin-top: 10px; color: var(--accent); filter: drop-shadow(0 0 12px var(--accent)); animation: iosBounce 1s ease-in-out infinite; }
.ios-guide-arrow svg { width: 100%; height: 100%; }
.ios-guide.bottom-right .ios-guide-arrow { align-self: flex-end; margin-right: 6px; }
.ios-guide.top .ios-guide-arrow { order: -1; align-self: flex-end; margin: 0 6px 10px 0; transform: rotate(180deg); animation-name: iosBounceUp; }
@keyframes iosBounceUp { 50% { translate: 0 -10px; } }
/* Choix de la langue (FR · EN · NL) */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.lang-switch button { padding: 5px 11px; border-radius: 999px; border: 0; background: none; color: var(--muted); font-weight: 800; font-size: .75rem; letter-spacing: .06em; cursor: pointer; }
.lang-switch button.on { background: var(--accent); color: var(--accent-ink); }
.site-footer .container { flex-wrap: wrap; gap: 12px; }

/* ==========================================================
   v11 — VÉRIFICATION DES ÉTAPES PAR VIDÉO (js/verif.js, validations.html)
   ========================================================== */
/* Côté joueur : bouton, état, petite explication */
.verif-btn { background: linear-gradient(135deg, #ffb347, #ff7a45) !important; color: #1a0f05 !important; border-color: transparent !important; }
.btn-ghost.verif-btn { background: color-mix(in srgb, #ff9a3c 16%, transparent) !important; color: #ffb36b !important; border-color: color-mix(in srgb, #ff9a3c 45%, transparent) !important; }
.verif-wait { background: color-mix(in srgb, #ffb347 14%, var(--surface-2)); border-color: color-mix(in srgb, #ffb347 40%, var(--line)); color: #ffc274; }
.verif-refused { flex-basis: 100%; font-size: .82rem; color: #ff8a8a; margin: 0 0 4px; }
.verif-hint { margin: 2px 0 10px; }
.rung-verif { font-size: .8em; margin-left: 4px; filter: saturate(1.2); }

/* La fenêtre : accord, conseils, choix */
.verif-list { list-style: none; display: grid; gap: 10px; margin: 14px 0 16px; }
.verif-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--muted); }
.verif-list li b { color: var(--text); }
.verif-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-size: .9rem; margin-bottom: 14px; cursor: pointer; }
.verif-check input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--accent); }
.verif-goal { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; margin: 4px 0 12px; background: color-mix(in srgb, #ff9a3c 9%, var(--surface)); border: 1px solid color-mix(in srgb, #ff9a3c 35%, var(--line)); }
.verif-goal b { color: #ffb36b; white-space: nowrap; }
.verif-tips { margin: 0 0 16px 18px; display: grid; gap: 6px; font-size: .9rem; color: var(--muted); }
.verif-tips b { color: var(--text); }
.verif-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.verif-choice .btn { width: 100%; }
@media (max-width: 420px) { .verif-choice { grid-template-columns: 1fr; } }

/* La caméra dans Palier */
.verif-cam { position: relative; border-radius: 18px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; max-height: 58vh; margin: 0 auto 14px; }
.verif-cam video { width: 100%; height: 100%; object-fit: cover; display: block; }
.verif-cam video.mirror { transform: scaleX(-1); }
.verif-rec { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-weight: 800; font-size: .85rem; font-variant-numeric: tabular-nums; }
.verif-rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b3b; animation: liveDot 1.2s infinite; }
.verif-flip { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .45); font-size: 1.2rem; cursor: pointer; }
#vStart.rec { background: #ff3b3b; color: #fff; box-shadow: 0 0 0 4px rgba(255, 59, 59, .25); }

/* Revoir et envoyer */
.verif-preview { width: 100%; max-height: 52vh; border-radius: 16px; background: #000; display: block; }
.verif-meta { text-align: center; margin: 8px 0 12px; }
.verif-progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-bottom: 12px; }
.verif-progress span { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }

/* Côté admins : page Validations */
.vf-card { margin-bottom: 14px; border-top: 3px solid var(--fig); transition: opacity .25s, transform .25s; }
.vf-card.vf-gone { opacity: 0; transform: translateX(30px); }
.vf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vf-who { display: flex; flex-direction: column; min-width: 0; }
.vf-step { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); margin-bottom: 12px; }
.vf-step span { font-size: .88rem; color: var(--muted); }
.vf-step small { font-size: .8rem; color: var(--faint); }
.vf-video { margin-bottom: 12px; }
.vf-video video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; display: block; }
.vf-note { resize: vertical; margin-bottom: 12px; }
.vf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* ==========================================================
   v12 — ANIMATIONS 3D DU BONHOMME (js/anim3d.js) : studio 3D + repères du coach
   ========================================================== */
.fig-anim:empty { display: none; }
.fig-anim { margin-top: 10px; }
.fig-anim-now { margin-top: 14px; }
.fig-anim-btn { margin-top: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--fig, var(--accent)) 45%, var(--line)); background: color-mix(in srgb, var(--fig, var(--accent)) 10%, transparent); color: var(--text); font-weight: 700; font-size: .8rem; cursor: pointer; }
.a3d { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, #1c2016, #0b0c09 70%); }
.a3d-stage { position: relative; height: 250px; touch-action: pan-y; }
@media (min-width: 600px) { .a3d-stage { height: 290px; } }
.a3d-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.a3d-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px 8px 12px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .25); }
.a3d-cap { flex: 1; min-width: 0; font-size: .84rem; color: var(--muted); }
.a3d-play { width: 34px; height: 34px; font-size: .8rem; flex: none; }
.a3d-hint { position: absolute; right: 10px; bottom: 9px; font-size: .68rem; color: var(--faint); pointer-events: none; transition: opacity .6s; }
.a3d-hint.gone { opacity: 0; }

/* repères par-dessus l'animation : phase du mouvement, angle, point de contrôle */
.a3d-ov { position: absolute; inset: 0; pointer-events: none; }
.a3d-phase { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 130px); padding: 5px 11px; border-radius: 14px; font-weight: 800; font-size: .78rem; line-height: 1.3; background: rgba(0, 0, 0, .55); border: 1px solid var(--line); }
.a3d-phase:empty, .a3d-angle:empty, .a3d-line:empty { display: none; }
.a3d-phase.down { color: #ffb347; border-color: rgba(255, 179, 71, .5); }
.a3d-phase.up, .a3d-phase.air { color: #c6f45c; border-color: rgba(198, 244, 92, .5); }
.a3d-angle { position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: rgba(0, 0, 0, .55); font-variant-numeric: tabular-nums; }
.a3d-line { position: absolute; left: 10px; bottom: 10px; font-size: .74rem; font-weight: 700; color: #5ee6b5; }
/* ==========================================================
   v13 — ANIMATIONS 3D, VERSION DYNAMIQUE (même style que la v9)
   ========================================================== */
/* le lecteur arrive en glissant, avec une bordure en dégradé qui tourne (comme le défi du jour) */
.a3d {
  border: 1px solid transparent;
  background: radial-gradient(120% 90% at 50% 0%, #1c2016, #0b0c09 70%) padding-box,
              conic-gradient(from var(--ang), var(--line) 0 55%, var(--accent) 70%, var(--accent-2) 80%, var(--line) 95%) border-box;
  animation: angSpin 6s linear infinite, a3dIn .55s cubic-bezier(.2, .8, .2, 1) backwards;
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--accent) 60%, transparent);
}
@keyframes a3dIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
/* halo vert sous le bonhomme qui « respire » */
.a3d-stage::before {
  content: ''; position: absolute; left: 15%; right: 15%; bottom: 6%; height: 40%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 70%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  animation: a3dBreath 3.2s ease-in-out infinite alternate;
}
@keyframes a3dBreath { from { opacity: .45; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
/* la consigne rebondit à chaque changement, avec une lueur de sa couleur */
.a3d-phase { transition: box-shadow .3s, border-color .3s, color .3s; }
.a3d-phase.pop { animation: a3dPop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes a3dPop { 0% { transform: scale(.82); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.a3d-phase.up { box-shadow: 0 0 18px -4px rgba(198, 244, 92, .55); }
.a3d-phase.down { box-shadow: 0 0 18px -4px rgba(255, 179, 71, .55); }
.a3d-angle { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.a3d-line { text-shadow: 0 0 10px rgba(94, 230, 181, .55); animation: a3dGlow 2.4s ease-in-out infinite alternate; }
@keyframes a3dGlow { from { opacity: .7; } to { opacity: 1; } }
/* bouton lecture / pause en dégradé, qui s'enfonce au toucher */
.a3d-play { background: var(--grad); color: #12140c; border: none; box-shadow: var(--glow); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.a3d-play:active { transform: scale(.88); }
/* « Voir l'animation » : lueur au survol, rebond au toucher, dégradé quand elle est ouverte */
.fig-anim-btn { transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s, background .25s; }
.fig-anim-btn:active { transform: scale(.94); }
@media (hover: hover) { .fig-anim-btn:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--fig, var(--accent)) 55%, transparent), 0 8px 22px -12px var(--fig, var(--accent)); } }
.fig-anim-btn.open { background: var(--grad); color: #12140c; border-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  .a3d, .a3d-stage::before, .a3d-phase.pop, .a3d-line { animation: none; }
}
/* Petit logo Netlify (barre d'outils que Netlify ajoute en bas de la page pour le propriétaire du site) : caché */
#netlify-drawer, netlify-drawer, [id^="netlify-drawer"], [id^="netlify-toolbar"], [class^="netlify-drawer"],
iframe[src*="netlify-cdp"], iframe[src*="app.netlify.com"], iframe[id*="netlify"] { display: none !important; visibility: hidden !important; pointer-events: none !important; }
/* accueil : jours d'affilée à côté du « Salut » */
.hello { font-size: clamp(2rem, 5vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hello-flame { font-family: inherit; font-size: 1.1rem; font-weight: 800; padding: 6px 14px; border-radius: 999px; line-height: 1;
  background: color-mix(in srgb, #ff8a4c 18%, var(--surface)); border: 1px solid color-mix(in srgb, #ff8a4c 45%, var(--line)); color: #ffb37a;
  animation: pop .5s .2s cubic-bezier(.3, 1.6, .5, 1) both; }
.hello-flame.off { filter: grayscale(1); opacity: .55; }
/* ==========================================================
   v14 — PAGE PROGRESSION, VERSION DYNAMIQUE (même style que la v9)
   ========================================================== */
/* filtres : le filtre choisi passe en dégradé et rebondit */
#filters .chip { cursor: pointer; transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), border-color .2s, background .2s; }
#filters .chip:active { transform: scale(.92); }
#filters .chip.on { background: var(--grad); border-color: transparent; color: #12140c; box-shadow: var(--glow); animation: tabPop .4s cubic-bezier(.3, 1.8, .5, 1); }
/* icône de la figure : flotte doucement, et grossit au survol de la carte */
.skill-ic { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); animation: icFloat 3.6s ease-in-out infinite alternate; }
.skill-card:nth-child(2n) .skill-ic { animation-delay: -1.8s; }
@keyframes icFloat { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@media (hover: hover) { .skill-card:hover .skill-ic { animation-play-state: paused; transform: scale(1.12) rotate(-6deg); } }
/* compteur d'étapes et niveaux : dégradé pour ce qui est fait */
.skill-card .lvl-tag { font-variant-numeric: tabular-nums; }
.tier.done { background: var(--grad); color: #12140c; }
.tier.current { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); animation: pulse 2s infinite; }
/* barre : dégradé avec un reflet qui la traverse */
.skill-card .bar span { background: var(--grad); position: relative; overflow: hidden; }
.skill-card .bar span::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .5) 50%, transparent 80%);
  transform: translateX(-100%); animation: barShine 3.2s ease-in-out infinite;
}
@keyframes barShine { 60%, 100% { transform: translateX(100%); } }
/* échelle : étapes faites en dégradé, l'étape en cours bat comme un cœur */
.rung.done .pt { background: var(--grad); border-color: transparent; }
.rung.done::before { background: linear-gradient(var(--accent), var(--accent-2)); opacity: .6; }
.rung.current .pt { animation: pulse 1.8s infinite; }
.rung.current .rn { color: var(--accent); }
.rung .tip { border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-left: 8px; }
/* étapes qui apparaissent une à une quand on les déplie (classe posée dans progression.html) */
.rung.rung-in { animation: dynRise .45s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 45ms) backwards; }
/* étape tout juste validée : la carte s'illumine, la pastille éclate */
.skill-card.just { animation: justGlow 1.4s ease; }
@keyframes justGlow { 0%, 35% { box-shadow: 0 0 0 1px var(--accent), 0 0 34px -6px color-mix(in srgb, var(--accent) 70%, transparent); } 100% { box-shadow: none; } }
.rung.just-done .pt { animation: pop .5s cubic-bezier(.3, 1.8, .5, 1); }
.rung.just-done .pt::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: ring .8s ease-out forwards; pointer-events: none; }
.rung .pt { position: relative; }
/* niveau terminé : la bordure en dégradé tourne autour de la carte */
.skill-card.levelup {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--ang), var(--line) 0 40%, var(--accent) 60%, var(--accent-2) 75%, var(--line) 95%) border-box;
  animation: angSpin 2.5s linear 2, justGlow 2s ease;
}
/* le bouton « Valider l'étape » respire, pour donner envie */
.skill-actions [data-ok] { animation: okBreath 2.6s ease-in-out infinite; }
@keyframes okBreath { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), 0 10px 26px -10px var(--accent); } }
/* la barre glisse de l'ancienne valeur à la nouvelle (largeur posée dans progression.html) */
.skill-card .bar span { transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.skill-card.dyn-in .bar span { animation: none; } /* le remplissage est géré par progression.html */

/* ---------- Partout sur le site ---------- */
/* blocs pas encore visibles : ils attendent qu'on fasse défiler jusqu'à eux (animateIn dans app.js) */
.dyn-wait { opacity: 0; transform: translateY(16px); }
/* confettis */
.confetto {
  position: fixed; z-index: 600; width: 8px; height: 12px; border-radius: 2px; pointer-events: none;
  animation: confetto var(--t, 900ms) cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes confetto {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 60px)) rotate(var(--r)) scale(1); opacity: 0; }
}
/* onde quand on touche un bouton */
.ripple-box { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .25; transform: scale(0); animation: ripple .6s ease-out forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
/* lumière qui suit la souris sur les cartes (ordinateur) */
@media (hover: hover) {
  .skill-card[data-open-fig]::after, .disc-card::after, .stat::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--fig, var(--accent)) 13%, transparent), transparent 70%);
  }
  .skill-card[data-open-fig]:hover::after, .disc-card:hover::after, .stat:hover::after { opacity: 1; }
}
/* ==========================================================
   v15 — OUVERTURE DES PAGES, FLUIDE ET PROPRE
   ordre : barres du haut et du bas → titre → filtres → cartes en cascade (animateIn, app.js)
   ========================================================== */
/* barres de navigation : glissent doucement en place */
.topbar { animation: pgTop .45s cubic-bezier(.2, .8, .2, 1) backwards; }
.tabbar { animation: pgBottom .5s cubic-bezier(.2, .8, .2, 1) .05s backwards; }
@keyframes pgTop { from { opacity: 0; transform: translateY(-14px); } }
@keyframes pgBottom { from { opacity: 0; transform: translateY(24px); } }
/* titre de la page, sous-titre, filtres : arrivent l'un après l'autre */
.dash-head > *, .page .container > .tabs, .page .container > .switch {
  animation: pgRise .55s cubic-bezier(.2, .8, .2, 1) backwards;
}
.dash-head > :nth-child(2) { animation-delay: .06s; }
.page .container > .tabs, .page .container > .switch { animation-delay: .1s; }
@keyframes pgRise { from { opacity: 0; transform: translateY(12px); filter: blur(3px); } }
/* une fois la page ouverte, les mises à jour s'affichent sans rejouer l'entrée */
.pg-done .dash-head > *, .pg-done .page .container > .tabs, .pg-done .page .container > .switch { animation: none; }
/* blocs gris de chargement : s'effacent en fondu au-dessus de la page qui arrive */
#loading { animation: pgFade .3s ease backwards; }
.skel-out { position: absolute; left: 0; right: 0; top: 28px; pointer-events: none; animation: skelOut .3s ease forwards; }
@media (min-width: 860px) { .skel-out { top: 40px; } }
@keyframes pgFade { from { opacity: 0; } }
@keyframes skelOut { to { opacity: 0; transform: scale(.99); } }
/* d'une page à l'autre : l'ancienne s'efface en reculant un peu, la nouvelle monte en douceur */
::view-transition-old(root) { animation: vtOut2 .18s ease both; }
::view-transition-new(root) { animation: vtIn2 .38s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vtOut2 { to { opacity: 0; transform: scale(.985); } }
@keyframes vtIn2 { from { opacity: 0; transform: translateY(12px); } }

/* ==========================================================
   v16 — PROGRESSION SUR TÉLÉPHONE : cartes compactes, 2 exercices visibles à la fois
   ========================================================== */
@media (max-width: 640px) {
  #list.grid { gap: 12px; }
  #list .skill-card { padding: 14px 16px; gap: 9px; }
  #list .skill-top h3 { font-size: 1.12rem; margin-top: 2px !important; }
  #list .skill-top .eyebrow { font-size: .72rem; }
  #list .skill-title { gap: 10px; }
  #list .skill-ic { width: 34px; height: 34px; font-size: 1.1rem; border-radius: 10px; }
  #list .tier { font-size: .72rem; padding: 2px 8px; }
  #list .bar { height: 6px; }
  /* une seule étape visible : celle en cours (« Voir les étapes » les montre toutes) */
  #list .rung.near { display: none; }
  #list .ladder:has(.near) .rung::before { display: none; } /* pas de trait vers des étapes cachées */
  #list .ladder:not(:has(.rung:not(.hidden):not(.near))) { display: none; } /* rien à montrer (tout est maîtrisé) */
  #list .rung { padding-bottom: 8px; }
  #list .rung .rn { font-size: .9rem; }
  #list .rung .rt { font-size: .78rem; }
  #list [data-expand] { font-size: .78rem; padding: 0; }
  #list .skill-actions .btn-sm { padding: 8px 14px; font-size: .84rem; }
  #list .skill-actions { gap: 6px; }
  #list .skill-actions .btn-sm:not(.verif-btn) { white-space: nowrap; }
  /* « Annuler » devient une petite flèche ↺ pour que les boutons tiennent sur une ligne */
  #list .undo-btn { padding: 8px 12px; font-size: 1rem; }
  #list .undo-btn .undo-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 380px) {
  #list .skill-card { padding: 13px 14px; }
  #list .skill-actions .btn-sm { padding: 8px 11px; font-size: .8rem; }
}
.undo-ic { display: none; }
@media (max-width: 640px) { #list .undo-ic { display: inline; } }
/* ==========================================================
   v17 — FLUIDITÉ SUR TÉLÉPHONE (fiches des figures, page Progression)
   ========================================================== */
/* la place du bonhomme 3D est gardée pendant que la fiche monte (il démarre juste après, js/figures.js) */
.fig-anim-now:empty {
  display: block; height: 309px; border-radius: 16px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 50% 0%, #1c2016, #0b0c09 70%);
}
@media (min-width: 600px) { .fig-anim-now:empty { height: 343px; } }
/* fiche de préparation (warmFigure) : jamais visible ni touchable */
.fig-sheet.fig-warm { visibility: hidden; pointer-events: none; }
/* fond vivant : il glisse (géré par la carte graphique) au lieu d'être redessiné à chaque image */
body::before { inset: -12%; background-size: 100% 100%; animation: bgDrift2 26s ease-in-out infinite alternate; will-change: transform; }
@keyframes bgDrift2 { from { transform: translate3d(-4%, -3%, 0); } to { transform: translate3d(4%, 3%, 0); } }
/* « Valider l'étape » respire en grossissant un peu (avant : une ombre animée, redessinée à chaque image) */
.skill-actions [data-ok] { animation-name: okBreath2; }
@keyframes okBreath2 { 50% { scale: 1.035; } } /* « scale » se combine avec l'enfoncement au toucher (.btn:active) */
@media (max-width: 820px) {
  /* le flou en direct derrière la fiche et sous ses onglets est le plus lourd pour un téléphone : fond sombre à la place */
  .fig-scrim { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5, 6, 4, .82); }
  .fig-tabs { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-2); }
}

/* ==========================================================
   v18 — FICHES : TECHNIQUE ET CONSEILS EN « MÉMO » (tout visible, en liste serrée — js/figures.js techSections)
   ========================================================== */
.fx3 { padding-top: 16px; }
.fx3 + .fx3 { margin-top: 0; border-top: 0; padding-top: 4px; }
/* listes courtes : ✓ à faire, ✕ à éviter */
.fx-list { list-style: none; display: grid; gap: 7px; padding: 0; margin: 0; }
.fx-list li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.4; }
.fx-list li::before { position: absolute; left: 0; top: 0; font-weight: 900; }
.fx-list.ok li::before { content: '✓'; color: var(--fig, var(--accent)); }
.fx-list.no li::before { content: '✕'; color: var(--danger); }
/* pastilles des figures liées */
.fx-links { margin-top: 14px; }
.fx-links h4 { margin-bottom: 8px; }
.fx-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; font-size: .84rem; cursor: pointer; }
.fx-pill:active { transform: scale(.96); }

/* un cadre par sujet */
.fx-memo { padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); margin-bottom: 8px; }
.fx-memo h4 { margin-bottom: 8px; }
.fx-line { display: flex; gap: 10px; font-size: .88rem; line-height: 1.4; color: var(--muted); }
.fx-line + .fx-line { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
.fx-line b { color: var(--text); }
.fx-line.warn b { color: var(--gold); }

/* ==========================================================
   v19 — TÉLÉPHONE : LISIBLE ET FACILE À TOUCHER (vérification de toutes les pages en 360 px)
   ========================================================== */
@media (max-width: 640px) {
  #filters .chip { min-height: 36px; padding: 7px 14px; font-size: .84rem; } /* filtres de Progression : assez grands pour le doigt */
  #list [data-expand] { padding: 9px 0 !important; margin: -8px 0; } /* « Voir les étapes » : zone de toucher plus haute, même place à l'écran */
}
.topbar .logo { min-height: 38px; } /* logo : plus facile à toucher pour revenir à l'accueil */
.card-head > a, .card-head > .small { white-space: nowrap; flex: none; } /* « Voir tout » ne passe plus sur deux lignes */
@media (max-width: 400px) {
  .vf-actions { grid-template-columns: 1fr; } /* Validations : « Valider » et « Refuser » l'un sous l'autre, sans être coupés */
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  .topbar, .tabbar, .dash-head > *,
  .page .container > .tabs, .page .container > .switch, #loading, .skel-out { animation: none !important; }
  .dyn-wait { opacity: 1; transform: none; }
  .skill-actions [data-ok] { animation: none !important; }
  .skill-ic, .tier.current, .rung.current .pt, .skill-card .bar span::after, .rung.rung-in,
  .skill-card.just, .skill-card.levelup, .rung.just-done .pt, .rung.just-done .pt::after, #filters .chip.on { animation: none !important; }
}