/* ═══════════════════════════════════════════════════════════════════════════
   OBSESSION — design system v2 (glass, aurore, animations)
   L'ancienne version est sauvegardée dans ../ascend_v1_sauvegarde
   ═══════════════════════════════════════════════════════════════════════════ */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root {
  --bg: #08071a; --bg2: #100e26; --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.17);
  --text: #f5f3ff; --muted: #a5a2cc;
  --accent: #b7a0ff; --accent2: #8a6bff; --violet: #8a6bff;
  --pink: #ff6bd6; --cyan: #5ad7ff; --yellow: #ffc94a; --green: #3ddc97; --red: #ff5d73;
  --radius: 22px; --ease: cubic-bezier(.2,.9,.3,1); --spring: cubic-bezier(.34,1.56,.64,1);
  font-family: "Inter var", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { color-scheme: dark; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.5; padding-bottom: 132px; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(138,107,255,.55); }
::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(160,130,255,.28); border-radius: 12px; border: 3px solid transparent; background-clip: content-box; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.02em; }
[hidden] { display: none !important; }
input, select, textarea { color-scheme: dark; }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 18px; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.accent { color: var(--accent); } .green { color: var(--green); } .red { color: var(--red); }
.mb { margin-bottom: 16px; }

/* ── Fond « aurore » : trois halos qui dérivent lentement ── */
.aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(1100px 620px at 50% -18%, #221656 0%, transparent 62%), var(--bg); }
.aurora i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { left: -22vmax; top: -28vmax; background: radial-gradient(circle, rgba(138,107,255,.55), transparent 62%); animation: drift1 28s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -28vmax; top: 8vmax; background: radial-gradient(circle, rgba(255,107,214,.26), transparent 62%); animation: drift2 34s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 6vmax; bottom: -38vmax; background: radial-gradient(circle, rgba(90,215,255,.2), transparent 62%); animation: drift3 40s ease-in-out infinite alternate; }
.aurora::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); }
@keyframes drift1 { to { transform: translate(14vmax, 10vmax) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vmax, 12vmax) scale(.9); } }
@keyframes drift3 { to { transform: translate(12vmax, -14vmax) scale(1.12); } }

/* ── En-tête ── */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  background: linear-gradient(180deg, rgba(10,8,28,.82), rgba(10,8,28,.5)); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 12px; height: 66px; }
.pg { font-size: 21px; font-weight: 800; background: linear-gradient(90deg, #fff, var(--accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lvl { margin-left: auto; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 6px 8px 6px 16px; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); transition: transform .3s var(--spring), border-color .25s, background .25s; }
.lvl:hover { border-color: rgba(160,130,255,.5); background: rgba(255,255,255,.09); transform: translateY(-1px); }
.lvl.pop { animation: chipPop .6s var(--spring); }
@keyframes chipPop { 40% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(138,107,255,.25), 0 0 32px rgba(138,107,255,.6); } }
.xpwrap { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.xpwrap small { font-size: 10.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1; }
.xpbar { position: relative; width: 112px; height: 8px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; }
.xpbar i { position: relative; display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #8a6bff, #ff6bd6); box-shadow: 0 0 14px rgba(138,107,255,.9);
  transition: width .9s var(--ease); overflow: hidden; }
.xpbar i::after, .bar-line i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%); animation: sweep 2.6s ease-in-out infinite; }
@keyframes sweep { 60%, 100% { transform: translateX(100%); } }
.chip { border-radius: 999px; padding: 5px 13px; font-weight: 800; font-size: 13px; background: color-mix(in srgb, var(--c1, #5a3dff) 38%, #0b0a1d);
  color: var(--c2, #fff); border: 1px solid color-mix(in srgb, var(--c2, #8a6bff) 70%, transparent); }
.logo { font-weight: 900; letter-spacing: .22em; font-size: 15px; background: linear-gradient(90deg, #fff, var(--accent), var(--pink), var(--accent), #fff);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: -250% 0; } }

/* ── Cartes en verre ── */
main { padding-top: 22px; }
.card { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 16px; box-shadow: 0 14px 36px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .4s var(--ease), border-color .3s, box-shadow .4s; }
.card:not(.tier)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(160,130,255,.17), transparent 62%); }
.card:not(.tier):hover { border-color: rgba(160,130,255,.3); } .card:not(.tier):hover::before { opacity: 1; }
.card[data-act] { cursor: pointer; } .card[data-act]:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0,0,0,.4), 0 0 0 1px rgba(160,130,255,.22); }
.card h3 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; font-weight: 800; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .grid2 .card { margin: 0; }
.stat { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat.accent { background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat small { font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 5px; letter-spacing: 0; }
.stat.sm { font-size: 25px; }
main.wrap > h2:first-child { display: none; }   /* le titre de page est dans l'en-tête */
main h2 { font-size: 24px; }
h3.sec { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 26px 2px 12px; font-weight: 800; }

/* ── Héros : série en cours ── */
.hero { text-align: center; padding: 26px 18px 22px; }
.hero > :not(.embers) { position: relative; z-index: 1; }
.hero .embers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.embers i { position: absolute; bottom: -10px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c2, #b7a0ff);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--c2, #b7a0ff) 70%, transparent); opacity: 0; animation: ember var(--d) linear var(--dl) infinite; }
@keyframes ember { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-330px) translateX(var(--dx)); opacity: 0; } }
.ring { position: relative; width: 256px; height: 256px; margin: 4px auto 10px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring .track { stroke: rgba(255,255,255,.08); }
.ring .bar { stroke: url(#g); transition: stroke-dashoffset 1.3s var(--ease); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c2, #b7a0ff) 65%, transparent)); }
.ring .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.flame { font-size: 36px; line-height: 1; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c2, #ff9650) 80%, transparent)); animation: flick 1.7s ease-in-out infinite; }
@keyframes flick { 0%,100% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.14) rotate(3deg); } }
.days { font-size: 84px; font-weight: 900; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 20%, var(--c2, var(--accent))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.clock { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 17px; margin-top: 6px; letter-spacing: .02em; }
.rank { display: inline-flex; gap: 9px; align-items: center; border-radius: 999px; padding: 8px 20px; font-weight: 800; font-size: 17px; margin-top: 8px;
  background: color-mix(in srgb, var(--c1, #8a6bff) 24%, transparent); color: var(--c2, var(--accent));
  border: 1px solid color-mix(in srgb, var(--c2, #8a6bff) 55%, transparent); box-shadow: 0 6px 24px color-mix(in srgb, var(--c1, #8a6bff) 30%, transparent); }
.glyph { font-size: 1.2em; line-height: 1; }
.next { margin-top: 14px; color: var(--muted); font-size: 14px; }
.bar-line { position: relative; height: 10px; background: rgba(255,255,255,.09); border-radius: 10px; overflow: hidden; }
.bar-line i { position: relative; display: block; height: 100%; background: linear-gradient(90deg, #8a6bff, #ff6bd6); border-radius: 10px; transition: width .9s var(--ease); overflow: hidden;
  box-shadow: 0 0 12px rgba(138,107,255,.6); }

/* ── Boutons ── */
.btn, .quest, .pick button, .tabs2 button, .rl-item, .tk, .tm-btn, .tm-play { position: relative; overflow: hidden; }
.btn { border: 0; cursor: pointer; border-radius: 16px; padding: 14px 20px; font-weight: 800; letter-spacing: .01em; color: #fff;
  background: linear-gradient(135deg, #a98fff, #7b5bf5 60%, #6a49e6); box-shadow: 0 10px 26px rgba(110,80,240,.4), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .3s var(--spring), box-shadow .3s, filter .2s, opacity .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(110,80,240,.55), inset 0 1px 0 rgba(255,255,255,.45); filter: brightness(1.08); }
.btn:active { transform: translateY(0) scale(.97); } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; filter: none; }
.btn.ghost { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.btn.ghost:hover { background: rgba(255,255,255,.11); box-shadow: 0 8px 22px rgba(0,0,0,.3); }
.btn.violet { background: linear-gradient(135deg, #8a6bff, #5a3dff); }
.btn.danger { background: rgba(255,93,115,.12); color: var(--red); border: 1px solid rgba(255,93,115,.42); box-shadow: none; }
.btn.danger:hover { background: rgba(255,93,115,.2); box-shadow: 0 10px 26px rgba(255,93,115,.25); }
.btn.block { display: block; width: 100%; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; font-size: 14px; transition: color .2s; }
.link:hover { color: var(--text); }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.4); transform: scale(0); animation: rip .7s ease-out forwards; pointer-events: none; }
@keyframes rip { to { transform: scale(1); opacity: 0; } }

/* ── Champs ── */
label { display: block; font-size: 13px; color: var(--muted); font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=time], input[type=datetime-local], select, textarea {
  width: 100%; background: rgba(0,0,0,.34); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; outline: none; transition: border-color .25s, box-shadow .25s, background .25s; }
input:focus, select:focus, textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(138,107,255,.22); background: rgba(0,0,0,.45); }
textarea { resize: vertical; min-height: 72px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text); margin: 16px 0; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent2); flex: none; }
.err { color: var(--red); font-size: 14px; min-height: 20px; margin: 8px 0 0; }

/* ── Sélecteurs 1-5 ── */
.pick { display: flex; gap: 8px; }
.pick button { flex: 1; padding: 10px 0 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(0,0,0,.28); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .3s var(--spring), background .25s, border-color .25s; }
.pick button:hover { transform: translateY(-3px); border-color: var(--line2); }
.pick .e { font-size: 22px; line-height: 1.2; } .pick b { font-size: 13px; color: var(--muted); }
.pick button.on { background: linear-gradient(180deg, rgba(138,107,255,.42), rgba(138,107,255,.16)); border-color: var(--violet); transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 24px rgba(110,80,240,.35); }
.pick button.on b { color: #fff; }

/* ── Quêtes ── */
.phase { margin-bottom: 18px; }
.phase-h { display: flex; justify-content: space-between; align-items: flex-end; margin: 8px 2px 12px; gap: 10px; }
.quest { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  margin-bottom: 11px; cursor: pointer; width: 100%; text-align: left; transition: transform .35s var(--spring), border-color .3s, background .3s, box-shadow .3s; }
.quest:hover { transform: translateY(-2px) scale(1.01); border-color: rgba(160,130,255,.45); box-shadow: 0 14px 30px rgba(0,0,0,.3); }
.quest .ico { font-size: 28px; } .quest .lb { flex: 1; font-weight: 700; }
.quest .xp { font-size: 13px; font-weight: 900; color: var(--accent); background: rgba(138,107,255,.14); padding: 3px 9px; border-radius: 999px; }
.quest .tick { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; font-weight: 900; transition: all .35s var(--spring); flex: none; }
.quest .hint { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.quest.done { background: linear-gradient(180deg, rgba(61,220,151,.13), rgba(61,220,151,.05)); border-color: rgba(61,220,151,.45); cursor: default; transform: none; }
.quest.done .tick { background: var(--green); border-color: var(--green); color: #05261a; animation: tickPop .6s var(--spring); box-shadow: 0 0 18px rgba(61,220,151,.6); }
@keyframes tickPop { 0% { transform: scale(.2) rotate(-40deg); } 60% { transform: scale(1.35); } }
.quest.done .lb { opacity: .72; } .quest.done .lb > small { text-decoration: none; }

/* ── Heatmap ── */
.heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr); gap: 5px; }
.heat i { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.07); transition: transform .2s; }
.heat i:hover { transform: scale(1.35); }
.heat i.l1 { background: rgba(138,107,255,.38); } .heat i.l2 { background: rgba(138,107,255,.7); }
.heat i.l3 { background: var(--yellow); box-shadow: 0 0 8px rgba(255,201,74,.5); } .heat i.rl { background: var(--red); } .heat i.now { outline: 2px solid #fff; }
.chart { width: 100%; height: 150px; } .chart2 { width: 100%; height: auto; display: block; }

/* ── Trophées ── */
/* (anciennes cartes de trophées remplacées : voir « Trophées » plus bas) */

/* ── Classement ── */
.row { display: flex; align-items: center; gap: 12px; padding: 13px 8px; border-bottom: 1px solid var(--line); transition: background .25s; }
.row:hover { background: rgba(255,255,255,.04); } .row:last-child { border: 0; }
.row.me { background: linear-gradient(90deg, rgba(138,107,255,.28), rgba(138,107,255,.08)); border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(160,130,255,.4); }
.row .pos { width: 30px; font-weight: 900; color: var(--muted); text-align: center; }
.row .nm { flex: 1; font-weight: 700; } .row .dy { font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.tabs2 { display: flex; gap: 8px; margin-bottom: 16px; padding: 5px; border-radius: 18px; background: rgba(0,0,0,.28); border: 1px solid var(--line); }
.tabs2 button { flex: 1; padding: 11px; border-radius: 14px; background: none; border: 0; cursor: pointer; font-weight: 800; color: var(--muted); transition: all .3s var(--ease); }
.tabs2 button:hover { color: var(--text); }
.tabs2 button.on { background: linear-gradient(135deg, #a58bff, #7c5cff); color: #fff; box-shadow: 0 8px 22px rgba(110,80,240,.4); }
.tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
  color: var(--c2); border: 1px solid color-mix(in srgb, var(--c2) 55%, transparent); background: color-mix(in srgb, var(--c1) 22%, transparent); }

/* ── Sommeil, puces, détails ── */
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .times.one { grid-template-columns: 1fr; }
.times div { background: rgba(0,0,0,.26); border: 1px solid var(--line); border-radius: 18px; padding: 14px; text-align: center; }
.times b { display: block; font-size: 40px; font-variant-numeric: tabular-nums; letter-spacing: -.03em; margin-top: 2px;
  background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip2 { font-size: 13px; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); }
.chip2.ok { color: var(--green); border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.1); }
.chip2.ko { color: var(--red); border-color: rgba(255,93,115,.4); background: rgba(255,93,115,.08); }
details.card summary { cursor: pointer; font-weight: 800; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after { content: "+"; color: var(--accent); font-size: 24px; line-height: 1; transition: transform .3s var(--spring); }
details[open].card summary::after { transform: rotate(45deg); }
.pillars { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 14px; }
.pillars li b { display: block; } .pillars li span { color: var(--muted); font-size: 14px; }

/* ── Fenêtres, toasts, effets de jeu ── */
.overlay { position: fixed; inset: 0; z-index: 60; background: rgba(5,4,16,.82); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  overflow-y: auto; display: flex; animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } }
.overlay .box { margin: auto; width: 100%; max-width: 480px; padding: 26px 18px; text-align: center; animation: modalIn .5s var(--spring) both; }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }
.overlay.sosbg { background: radial-gradient(700px 500px at 50% 30%, #2a1a6a, #07060f); }
.modal { background: linear-gradient(180deg, #17143a, #0f0d26); border: 1px solid var(--line2); border-radius: 26px; padding: 24px; text-align: left; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal.center { text-align: center; }
.big-ic { font-size: 76px; line-height: 1.1; animation: pop .8s var(--spring); filter: drop-shadow(0 8px 24px rgba(138,107,255,.6)); } @keyframes pop { from { transform: scale(0) rotate(-30deg); } }
.breath { width: 190px; height: 190px; border-radius: 50%; margin: 24px auto; display: grid; place-items: center; font-size: 22px; font-weight: 800;
  background: radial-gradient(circle, rgba(138,107,255,.6), rgba(138,107,255,.08)); border: 2px solid rgba(138,107,255,.7); animation: box 16s linear infinite; }
@keyframes box { 0%,100% { transform: scale(.7); } 25%,50% { transform: scale(1.15); } 75% { transform: scale(.7); } }
.overlay .timer { font-size: 52px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gradeName { font-size: 44px; font-weight: 900; letter-spacing: -.02em; margin: 4px 0 8px; background: linear-gradient(90deg, var(--c1), var(--c2), var(--c1)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }
.modal.tier .btn { margin-top: 6px; }
#toasts { position: fixed; top: 82px; left: 0; right: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: rgba(20,17,48,.9); backdrop-filter: blur(14px); border: 1px solid rgba(160,130,255,.5); color: var(--accent); padding: 10px 18px; border-radius: 999px; font-weight: 800;
  box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 24px rgba(138,107,255,.25); animation: tin .45s var(--spring), tout .4s 2.3s forwards; }
@keyframes tin { from { transform: translateY(-18px) scale(.9); opacity: 0; } } @keyframes tout { to { opacity: 0; transform: translateY(-12px); } }
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 100; width: 100%; height: 100%; }
.xp-float { position: fixed; z-index: 96; pointer-events: none; font-weight: 900; font-size: 24px; color: #fff; white-space: nowrap; letter-spacing: -.01em;
  text-shadow: 0 0 16px #8a6bff, 0 0 32px #8a6bff, 0 2px 0 rgba(0,0,0,.4); animation: floatup 1.4s var(--ease) forwards; }
@keyframes floatup { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 18% { opacity: 1; transform: translate(-50%, -80%) scale(1.25); } 100% { opacity: 0; transform: translate(-50%, -300%) scale(1); } }
.levelup { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(138,107,255,.28), transparent 60%); animation: fadeIn .3s ease both; }
.lu-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid rgba(183,160,255,.9); animation: shock 1.6s var(--ease) forwards; }
.lu-ring.r2 { animation-delay: .25s; border-color: rgba(255,107,214,.8); }
@keyframes shock { from { transform: scale(.3); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.lu-txt { text-align: center; animation: luIn 1s var(--spring) both, luOut .5s 2s ease forwards; }
.lu-txt small { display: block; font-weight: 800; letter-spacing: .3em; color: var(--accent); font-size: 13px; }
.lu-txt b { display: block; font-size: 120px; line-height: 1; font-weight: 900; background: linear-gradient(180deg, #fff, #b7a0ff 60%, #ff6bd6); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(138,107,255,.9)); }
@keyframes luIn { from { transform: scale(.3) rotate(-8deg); opacity: 0; } } @keyframes luOut { to { opacity: 0; transform: scale(1.2); } }

/* ── Accueil / connexion ── */
.landing { padding: 44px 0 24px; text-align: center; }
.brand-row { display: flex; justify-content: center; align-items: center; gap: 12px; }
.landing h1 { font-size: clamp(38px, 9vw, 58px); letter-spacing: -.035em; margin: 18px 0 14px; line-height: 1.04; }
.landing h1 .accent { background: linear-gradient(90deg, #b7a0ff, #ff6bd6, #5ad7ff, #b7a0ff); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }
.landing .sub { color: var(--muted); max-width: 470px; margin: 0 auto 22px; font-size: 16.5px; }
.feat { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; text-align: left; }
.feat > div { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); border: 1px solid var(--line); border-radius: 20px; padding: 16px; font-size: 14px; color: var(--muted);
  transition: transform .4s var(--spring), border-color .3s; }
.feat > div:hover { transform: translateY(-4px); border-color: rgba(160,130,255,.4); }
.feat b { display: block; margin: 10px 0 4px; color: var(--text); font-size: 15px; }
.fi { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, rgba(138,107,255,.4), rgba(255,107,214,.25)); color: #fff; }
.fi svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.legal { font-size: 12px; color: var(--muted); line-height: 1.55; padding: 14px 0 34px; }
@media (max-width: 380px) { .ring { width: 214px; height: 214px; } .days { font-size: 66px; } .badges { grid-template-columns: repeat(2, 1fr); } }

/* ═══ Grades : couleurs et cadres évolutifs ═══
   .tN = palette du grade N (0 = Larve … 18 = Dieu vivant) ; .fB = bande de cadre (0 pointillés → 6 prismatique animé) */
@keyframes spin { to { --ang: 360deg; } }
@keyframes glowpulse { 50% { box-shadow: 0 0 calc(var(--glow) * 1.6) color-mix(in srgb, var(--c2) 70%, transparent); } }
@keyframes twinkle { 50% { opacity: .45; transform: translateX(-50%) scale(1.25); } }
.t0  { --c1: #5f5b57; --c2: #9a948b; }  .t1  { --c1: #6d6253; --c2: #a8987f; }  .t2  { --c1: #66714a; --c2: #a3b56f; }
.t3  { --c1: #8a5a3a; --c2: #d0925a; }  .t4  { --c1: #8c6a3f; --c2: #d4aa70; }  .t5  { --c1: #cd7f32; --c2: #f0b06a; }
.t6  { --c1: #9aa3ad; --c2: #d5dbe2; }  .t7  { --c1: #aeb8c4; --c2: #f4f7fb; }  .t8  { --c1: #d4a017; --c2: #ffd86b; }
.t9  { --c1: #e6b422; --c2: #fff0a0; }  .t10 { --c1: #1fae6b; --c2: #8ff0c0; }  .t11 { --c1: #2f8fe0; --c2: #9adbff; }
.t12 { --c1: #3a5bff; --c2: #8fb0ff; }  .t13 { --c1: #8a4bff; --c2: #d0a8ff; }  .t14 { --c1: #c03bff; --c2: #ff8ad8; }
.t15 { --c1: #ff3b5c; --c2: #ff9a5a; }  .t16 { --c1: #ff7a1a; --c2: #ffd23a; }  .t17 { --c1: #ffd86b; --c2: #ffffff; }
.t18 { --c1: #ff5d73; --c2: #ffffff; }
.f0 { --glow: 0px; } .f1 { --glow: 10px; } .f2 { --glow: 18px; } .f3 { --glow: 26px; } .f4 { --glow: 34px; } .f5 { --glow: 42px; } .f6 { --glow: 56px; }
.tier { --bgc: #100e28; position: relative; border: 2px solid transparent;
  background: linear-gradient(var(--bgc), var(--bgc)) padding-box, var(--bd, linear-gradient(135deg, var(--c1), var(--c2))) border-box;
  box-shadow: 0 0 var(--glow, 0px) color-mix(in srgb, var(--c2) 45%, transparent); }
.hero.tier { background: radial-gradient(440px 260px at 50% 0%, color-mix(in srgb, var(--c1) 30%, transparent), transparent 70%) padding-box,
  linear-gradient(var(--bgc), var(--bgc)) padding-box, var(--bd, linear-gradient(135deg, var(--c1), var(--c2))) border-box; }
.tier.f0 { border: 2px dashed var(--c1); background: var(--bgc); box-shadow: none; }
.hero.tier.f0 { background: radial-gradient(440px 260px at 50% 0%, color-mix(in srgb, var(--c1) 20%, transparent), transparent 70%), var(--bgc); }
.tier.f2, .tier.f3, .tier.f4, .tier.f5, .tier.f6 { border-width: 3px; outline: 1px solid color-mix(in srgb, var(--c2) 45%, transparent); outline-offset: -9px; }
.tier.f4 { --bd: conic-gradient(from var(--ang), var(--c1), var(--c2), var(--c1), var(--c2), var(--c1)); animation: spin 7s linear infinite; }
.tier.f5 { --bd: conic-gradient(from var(--ang), var(--c1), var(--c2), #fff, var(--c2), var(--c1), var(--c2), var(--c1)); border-width: 4px; animation: spin 5s linear infinite, glowpulse 2.4s ease-in-out infinite; }
.tier.f6 { --bd: conic-gradient(from var(--ang), #ff5d73, #ffc94a, #3ddc97, #2f8fe0, #8a6bff, #ff5d73); border-width: 4px; animation: spin 4s linear infinite, glowpulse 2s ease-in-out infinite; }
.tier.t17.f6 { --bd: conic-gradient(from var(--ang), #ffd86b, #fff, #ffd86b, #fff4c2, #ffd86b); }
.tier.f3::before, .tier.f3::after, .tier.f4::before, .tier.f4::after, .tier.f5::before, .tier.f5::after, .tier.f6::before, .tier.f6::after {
  position: absolute; left: 50%; transform: translateX(-50%); color: var(--c2); background: var(--bgc); padding: 0 8px; line-height: 1; z-index: 1; }
.tier.f3::before, .tier.f4::before, .tier.f5::before, .tier.f6::before { top: -9px; } .tier.f3::after, .tier.f4::after, .tier.f5::after, .tier.f6::after { bottom: -9px; }
.tier.f3::before, .tier.f3::after { content: "◆"; font-size: 13px; }
.tier.f4::before, .tier.f4::after { content: "❖"; font-size: 15px; }
.tier.f5::before, .tier.f5::after { content: "❖"; font-size: 19px; text-shadow: 0 0 10px var(--c2); }
.tier.f6::before, .tier.f6::after { content: "✦"; font-size: 22px; text-shadow: 0 0 12px var(--c2), 0 0 24px var(--c1); animation: twinkle 2.2s ease-in-out infinite; }

/* ═══ Menu latéral : logos seuls, tous les titres se déplient quand la souris approche ═══ */
nav.side { position: fixed; z-index: 35; top: 0; bottom: 0; left: 0; width: 70px; padding: 14px 11px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(22,18,52,.86), rgba(11,9,28,.9)); backdrop-filter: blur(26px) saturate(1.5); -webkit-backdrop-filter: blur(26px) saturate(1.5);
  border-right: 1px solid var(--line); transition: width .45s var(--ease), box-shadow .45s; }
@media (hover: hover) { nav.side:hover { width: 236px; box-shadow: 30px 0 80px rgba(0,0,0,.5); } }
nav.side.open, nav.side:has(:focus-visible) { width: 236px; box-shadow: 30px 0 80px rgba(0,0,0,.5); }
.rl-brand { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 4px; margin-bottom: 14px; flex: none; }
/* ── La marque : un O qui fixe (anneau + pupille). Le cercle tourne lentement, la pupille se contracte : l'obsession. ── */
.rl-gem { display: grid; place-items: center; width: 40px; height: 40px; flex: none; filter: drop-shadow(0 6px 18px rgba(138,107,255,.55)); }
.ob-mark { display: block; width: 100%; height: 100%; overflow: visible; }
.ob-ring { transform-box: view-box; transform-origin: 50% 50%; animation: obSpin 16s linear infinite; }
.ob-pup { transform-box: view-box; transform-origin: 50% 50%; animation: obPulse 3.6s var(--ease) infinite; }
@keyframes obSpin { to { transform: rotate(360deg); } }
@keyframes obPulse { 0%, 100% { transform: scale(1); } 46% { transform: scale(.66); } }
.rl-word { font-weight: 900; letter-spacing: .24em; font-size: 15px; white-space: nowrap; opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .45s var(--ease); }
.rl-item { display: flex; align-items: center; gap: 15px; height: 50px; padding: 0 13px; flex: none; border-radius: 17px; border: 0; background: none; color: var(--muted); cursor: pointer; white-space: nowrap;
  text-align: left; transition: background .25s, color .25s, transform .3s var(--spring); }
.rl-ic { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.rl-ic svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--spring); }
.rl-lb { font-weight: 800; font-size: 15px; opacity: 0; transform: translateX(-14px); transition: opacity .3s, transform .45s var(--ease); transition-delay: calc(var(--k, 0) * 35ms); }
@media (hover: hover) { nav.side:hover .rl-lb, nav.side:hover .rl-word { opacity: 1; transform: none; } }
nav.side.open .rl-lb, nav.side.open .rl-word, nav.side:has(:focus-visible) .rl-lb, nav.side:has(:focus-visible) .rl-word { opacity: 1; transform: none; }
.rl-item:hover { background: rgba(255,255,255,.08); color: #fff; } .rl-item:hover .rl-ic svg { transform: scale(1.18) rotate(-6deg); } .rl-item:active { transform: scale(.96); }
.rl-item.on { color: #fff; background: linear-gradient(135deg, rgba(138,107,255,.42), rgba(138,107,255,.12)); box-shadow: inset 0 0 0 1px rgba(160,130,255,.4), 0 10px 28px rgba(110,80,240,.28); }
.rl-item.on::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(#d5c7ff, #8a6bff); box-shadow: 0 0 14px #8a6bff; }
.rl-item:focus-visible, .play:focus-visible, .lvl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rl-toggle { margin-top: auto; }
.rl-toggle svg { transition: transform .45s var(--ease); }
nav.side.open .rl-toggle svg { transform: rotate(180deg); }
body.in-app .wrap { padding-left: 18px; }
@media (max-width: 860px) { body.in-app .wrap { padding-left: 88px; } }

/* ═══ Bouton JOUER : capsule flottante, bordure vivante, anneau de progression de l'objectif hebdo ═══ */
.play { position: fixed; z-index: 40; right: calc(24px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 15px; width: max-content; min-width: 232px; height: 70px; padding: 8px 20px 8px 9px; border-radius: 999px; cursor: pointer; color: #fff; text-align: left;
  border: 2px solid transparent; background: linear-gradient(rgba(17,14,42,.94), rgba(17,14,42,.94)) padding-box, conic-gradient(from var(--ang), #8a6bff, #ff6bd6, #5ad7ff, #8a6bff) border-box;
  animation: spin 5s linear infinite; box-shadow: 0 20px 44px rgba(0,0,0,.6), 0 0 44px rgba(138,107,255,.38);
  transition: transform .4s var(--spring), box-shadow .35s; }
.play::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.2) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0; animation: shine 4.5s ease-in-out infinite; }
.pl-aura { position: absolute; inset: -16px; z-index: -1; border-radius: 999px; background: radial-gradient(closest-side, rgba(138,107,255,.6), transparent); filter: blur(16px); opacity: .7; animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 1; transform: scale(1.08); } }
.play:hover { transform: translateY(-5px) scale(1.045); box-shadow: 0 30px 60px rgba(0,0,0,.6), 0 0 70px rgba(138,107,255,.65); }
.play:active { transform: scale(.965); }
.pl-orb { position: relative; width: 52px; height: 52px; flex: none; display: grid; place-items: center; }
.pl-orb::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgba(160,130,255,.7); animation: ping 2.4s cubic-bezier(0,0,.2,1) infinite; pointer-events: none; }
@keyframes ping { 0% { transform: scale(.9); opacity: .9; } 75%, 100% { transform: scale(1.65); opacity: 0; } }
.pl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-ring circle { fill: none; stroke-width: 3.5; } .pl-ring .bg { stroke: rgba(255,255,255,.13); }
.pl-ring .fg { stroke: #d9ccff; stroke-linecap: round; filter: drop-shadow(0 0 5px #8a6bff); transition: stroke-dashoffset 1s var(--ease); }
.pl-core { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #e0d4ff, #8a6bff 55%, #5a3dd8); box-shadow: 0 6px 18px rgba(110,80,240,.6), inset 0 -4px 8px rgba(0,0,0,.28); transition: transform .4s var(--spring); }
.pl-core svg { width: 18px; height: 18px; margin-left: 2px; } .play:hover .pl-core { transform: scale(1.1) rotate(8deg); }
.pl-info { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.pl-title { white-space: nowrap; font-size: 20px; font-weight: 900; letter-spacing: .16em; background: linear-gradient(90deg, #fff, #d7c9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-sub { font-size: 12px; margin-top: 4px; color: #b9b3e6; font-variant-numeric: tabular-nums; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-go { margin-left: auto; width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.09); transition: transform .4s var(--spring), background .25s; }
.pl-go svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.play:hover .pl-go { transform: translateX(5px); background: rgba(255,255,255,.2); }
.play.here { box-shadow: 0 20px 44px rgba(0,0,0,.6), 0 0 64px rgba(138,107,255,.6); }
.play.on { --run: 1; box-shadow: 0 20px 44px rgba(0,0,0,.6), 0 0 54px rgba(255,80,110,.5); }
.play.on .pl-aura { background: radial-gradient(closest-side, rgba(255,80,110,.6), transparent); }
.play.on .pl-orb::after { border-color: rgba(255,93,115,.85); animation-duration: 1.3s; }
.play.on .pl-core { background: radial-gradient(circle at 30% 25%, #ffc2ce, #ff5d73 55%, #d9264a); box-shadow: 0 6px 18px rgba(255,60,90,.65), inset 0 -4px 8px rgba(0,0,0,.28); }
.play.on .pl-ring .fg { stroke: #ffc2ce; filter: drop-shadow(0 0 5px #ff5d73); }
@media (max-width: 420px) { .play { min-width: 196px; gap: 11px; padding-right: 14px; } .pl-title { font-size: 17px; } .pl-sub { max-width: 104px; font-size: 11px; } }
@media (max-width: 420px) { .play { right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); } }

/* ═══ Travail : chrono façon Toggl ═══ */
.timer { padding: 16px; } .timer.live { border-color: rgba(255,93,115,.55); background: linear-gradient(180deg, rgba(255,93,115,.1), rgba(255,93,115,.03)); box-shadow: 0 0 40px rgba(255,93,115,.15), 0 14px 36px rgba(0,0,0,.3); }
.tm-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tm-field { position: relative; flex: 1 1 100%; } .tm-field input { font-size: 17px; padding: 15px; }
.tm-clock { flex: 1; font-size: 38px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tm-btn { width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; transition: transform .35s var(--spring); }
.tm-btn:hover { transform: scale(1.1); } .tm-btn:active { transform: scale(.92); } .tm-btn svg { width: 25px; height: 25px; }
.tm-btn.go { background: linear-gradient(135deg, #a58bff, #7c5cff); color: #fff; padding-left: 3px; box-shadow: 0 10px 26px rgba(110,80,240,.5); }
.tm-btn.stop { background: linear-gradient(135deg, #ff6b83, #ff2f54); color: #fff; box-shadow: 0 0 0 0 rgba(255,60,90,.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 18px rgba(255,60,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,60,90,0); } }
@keyframes blink { 50% { opacity: .2; } }
.tm-drop { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 10; background: #1a1738; border: 1px solid var(--line2); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 40px rgba(0,0,0,.6); animation: modalIn .25s var(--ease) both; }
.tm-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 13px 15px; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.tm-item:last-child { border: 0; } .tm-item:hover { background: rgba(138,107,255,.16); } .tm-item small { color: var(--muted); }
.chips-t { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.tk { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.05); cursor: pointer; font-size: 13px; font-weight: 700;
  transition: transform .3s var(--spring), border-color .25s, background .25s; }
.tk:hover { transform: translateY(-3px); border-color: rgba(160,130,255,.5); background: rgba(138,107,255,.16); }
.tk svg { width: 11px; height: 11px; flex: none; color: var(--accent); } .tk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot-rec { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff2f54; margin-right: 7px; animation: blink 1s infinite; box-shadow: 0 0 10px #ff2f54; }
.goalbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 16px; } .goalbtns .btn { padding: 12px 4px; font-size: 14px; }
.day-h { display: flex; justify-content: space-between; margin: 22px 2px 10px; font-weight: 800; }
.day-h > span:first-child { display: inline-block; } .day-h > span:first-child::first-letter { text-transform: uppercase; }
.tm-entry { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); margin-bottom: 9px;
  transition: transform .35s var(--spring), border-color .25s; }
.tm-entry:hover { transform: translateX(4px); border-color: rgba(160,130,255,.4); }
.tm-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer; padding: 0; }
.tm-name { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tm-range { font-size: 12px; color: var(--muted); }
.tm-dur { font-variant-numeric: tabular-nums; font-weight: 800; }
.tm-play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.05); color: var(--accent); cursor: pointer; display: grid; place-items: center; transition: transform .3s var(--spring), background .25s; }
.tm-play:hover { transform: scale(1.15); background: rgba(138,107,255,.25); } .tm-play svg { width: 14px; height: 14px; margin-left: 2px; }

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

/* ═══ Projets, deepwork, assistant de configuration ═══ */
.pj { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 7px; font-size: 13px; vertical-align: -3px;
  background: color-mix(in srgb, var(--pc) 28%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 60%, transparent); }
.card-hd { display: flex; justify-content: space-between; align-items: flex-start; } .card-hd .link { padding: 0 0 8px; }
.pj-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pj-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,.04); border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); transition: transform .3s var(--spring), background .25s, box-shadow .25s; }
.pj-chip:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--pc) 16%, transparent); }
.pj-chip.on { background: color-mix(in srgb, var(--pc) 34%, transparent); border-color: var(--pc); box-shadow: 0 0 20px color-mix(in srgb, var(--pc) 45%, transparent); }
.pj-chip .pe { font-size: 16px; }
.pj-chip.plain { --pc: #7e78a8; padding: 8px 16px; }   /* « Autres » : pas d'emoji, juste le mot */
.dw-hint { margin-top: 12px; }

/* Courbe de progression du deepwork */
.dw { margin-top: 16px; padding: 14px 14px 10px; border-radius: 20px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 14%, transparent), rgba(0,0,0,.18)); border: 1px solid color-mix(in srgb, var(--pc) 35%, transparent); }
.dw-top { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.dw-tag { font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); } .dw-goal { color: var(--muted); } .dw-pct { margin-left: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.dw-left { text-align: center; margin: 4px 0 0; } .dw-left small { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.dw-left b { font-size: 46px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; text-shadow: 0 0 26px color-mix(in srgb, var(--pc) 70%, transparent); }
.dw-curve { width: 100%; height: auto; display: block; overflow: visible; margin-top: 2px; }
.dw-track { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 5; stroke-linecap: round; }
.dw-fill { fill: none; stroke: url(#dwg); stroke-width: 5.5; stroke-linecap: round; filter: drop-shadow(0 0 7px var(--pc)); }
.dw-mark { fill: #0e0c24; stroke: rgba(255,255,255,.25); stroke-width: 2; transition: fill .4s, stroke .4s, filter .4s; }
.dw-mark.on { fill: var(--pc); stroke: #fff; filter: drop-shadow(0 0 6px var(--pc)); }
.dw-head { fill: #fff; stroke: var(--pc); stroke-width: 3; filter: drop-shadow(0 0 10px var(--pc)); animation: headPulse 1.4s ease-in-out infinite; }
@keyframes headPulse { 50% { r: 8; } }
.dw-endc { fill: #14112e; stroke: rgba(255,255,255,.25); stroke-width: 2; transition: all .4s var(--spring); } .dw-trophy { opacity: .55; filter: grayscale(1); transition: all .4s; }
.dw.done { border-color: #ffc94a; background: linear-gradient(180deg, rgba(255,201,74,.16), rgba(0,0,0,.18)); box-shadow: 0 0 40px rgba(255,201,74,.25); }
.dw.done .dw-left b { color: #ffe08a; text-shadow: 0 0 28px rgba(255,201,74,.85); } .dw.done .dw-fill { stroke: #ffc94a; filter: drop-shadow(0 0 9px #ffc94a); }
.dw.done .dw-endc { fill: #ffc94a; stroke: #fff; filter: drop-shadow(0 0 12px #ffc94a); animation: trophyPop 1.2s var(--spring) infinite alternate; } .dw.done .dw-trophy { opacity: 1; filter: none; }
.dw.done .dw-tag { color: #ffc94a; } .dw.done .dw-head { stroke: #ffc94a; }
@keyframes trophyPop { to { transform: scale(1.18); transform-origin: center; transform-box: fill-box; } }
.dw-foot { font-size: 12px; margin-top: 4px; text-align: center; }

/* Progression de la semaine par projet */
.pj-item { padding: 12px 0; border-top: 1px solid var(--line); } .pj-item:first-of-type { margin-top: 10px; }
.pj-top { display: flex; justify-content: space-between; gap: 10px; font-weight: 800; } .pj-hours { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 700; font-size: 13px; }
.pj-bar { position: relative; height: 12px; border-radius: 12px; background: color-mix(in srgb, var(--pc) 16%, rgba(255,255,255,.06)); margin: 9px 0 7px; overflow: hidden; }
.pj-bar i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 55%, transparent), var(--pc)); box-shadow: 0 0 12px color-mix(in srgb, var(--pc) 70%, transparent); transition: width .9s var(--ease); }
.pj-sub { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); } .pj-item.met .pj-name::after { content: " ✓"; color: var(--green); }

/* Assistant */
.wz { position: relative; padding-top: 18px; } .wz-x { position: absolute; top: 12px; right: 14px; }
.wz h2 { font-size: 24px; margin-bottom: 6px; } .wz > #wzBody > .muted { margin-top: 0; }
.wz-dots { display: flex; gap: 6px; margin: 0 0 22px; padding-right: 70px; }
.wz-dot { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
.wz-dot:disabled { cursor: default; } .wz-dot b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid var(--line2); font-size: 13px; transition: all .35s var(--spring); }
.wz-dot.on { color: #fff; } .wz-dot.on b { background: linear-gradient(135deg, #a58bff, #7c5cff); border-color: transparent; box-shadow: 0 0 20px rgba(138,107,255,.7); transform: scale(1.15); }
.wz-dot.done b { background: rgba(61,220,151,.18); border-color: var(--green); color: var(--green); }
.wz-list { display: grid; gap: 10px; margin-bottom: 12px; }
.wz-proj { border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent); background: color-mix(in srgb, var(--pc) 8%, rgba(0,0,0,.2)); border-radius: 18px; padding: 10px; transition: all .3s var(--ease); }
.wz-proj.open { box-shadow: 0 0 26px color-mix(in srgb, var(--pc) 35%, transparent); border-color: var(--pc); }
.wz-row { display: flex; gap: 10px; align-items: center; }
.wz-emo { width: 48px; height: 48px; flex: none; border-radius: 15px; font-size: 24px; cursor: pointer; border: 2px solid var(--pc); background: color-mix(in srgb, var(--pc) 22%, transparent); transition: transform .3s var(--spring); }
.wz-emo:hover { transform: scale(1.1) rotate(-4deg); }
.wz-name { flex: 1; min-width: 0; }
.wz-del { width: 36px; height: 36px; flex: none; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font-size: 20px; cursor: pointer; } .wz-del:hover:not(:disabled) { color: var(--red); border-color: var(--red); } .wz-del:disabled { opacity: .3; cursor: not-allowed; }
.wz-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); animation: fadeIn .25s both; }
.wz-sw { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sw { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; background: var(--c); cursor: pointer; transition: transform .25s var(--spring); } .sw:hover { transform: scale(1.18); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 2px var(--c), 0 0 16px var(--c); }
.sw-custom { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.wz-em { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; margin-top: 12px; }
.em { aspect-ratio: 1; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.05); font-size: 19px; cursor: pointer; transition: transform .25s var(--spring); } .em:hover { transform: scale(1.25); background: rgba(255,255,255,.12); }
.em.on { border-color: var(--pc); background: color-mix(in srgb, var(--pc) 30%, transparent); }
.wz-share { margin-bottom: 16px; } .wz-sh { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 8px; }
.wz-pn { display: flex; align-items: center; gap: 6px; } .wz-pn input { width: 74px; padding: 8px 10px; text-align: right; }
.wz-share input[type=range] { width: 100%; accent-color: var(--pc); height: 6px; cursor: pointer; }
.wz-stack { display: flex; gap: 2px; height: 16px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.07); margin: 6px 0 10px; }
.wz-stack i { display: block; height: 100%; background: var(--pc); transition: width .3s var(--ease); }
.wz-sum { font-weight: 800; margin-bottom: 12px; } .wz-sum.ok { color: var(--green); } .wz-sum.ko { color: var(--red); }
.hms { display: flex; gap: 10px; } .hms-f { flex: 1; display: flex; align-items: center; gap: 8px; margin: 0; background: rgba(0,0,0,.34); border: 1px solid var(--line); border-radius: 14px; padding: 0 12px 0 0; color: var(--muted); font-weight: 700; }
.hms-f input { border: 0; background: none; box-shadow: none; text-align: center; font-size: 20px; font-weight: 800; padding: 12px 4px; min-width: 0; color: var(--text); } .hms-f input:focus { box-shadow: none; background: none; }
.hms-f:focus-within { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(138,107,255,.22); }
.hrs { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 700; } .hrs input { max-width: 140px; font-size: 20px; font-weight: 800; }
.wz-diffs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.df { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 6px; border-radius: 14px; cursor: pointer; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); transition: transform .3s var(--spring), background .25s, box-shadow .25s; }
.df b { font-size: 13px; } .df small { font-size: 12px; color: var(--accent); font-weight: 800; } .df:hover { transform: translateY(-2px); }
.df.on { background: linear-gradient(180deg, rgba(138,107,255,.45), rgba(138,107,255,.16)); border-color: var(--violet); box-shadow: 0 8px 22px rgba(110,80,240,.35); transform: translateY(-2px); } .df.on small { color: #fff; }
.wz-prev { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(138,107,255,.1); border: 1px solid rgba(160,130,255,.25); line-height: 1.6; } .wz-prev:empty { display: none; }
.wz-nav { display: flex; gap: 10px; margin-top: 18px; } .wz-nav .btn { flex: 1; }
@media (max-width: 420px) { .wz-em { grid-template-columns: repeat(6, 1fr); } .wz-diffs { grid-template-columns: repeat(2, 1fr); } }

.dw.done .dw-head { display: none; }
.wz-list { grid-template-columns: minmax(0, 1fr); } .wz-proj { min-width: 0; } .wz-em { grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (max-width: 420px) { .wz-em { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ═══ Temps de travail : vues Jour / Semaine / Mois ═══ */
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid var(--line); }
.seg button { flex: 1; padding: 9px 10px; border-radius: 10px; border: 0; background: none; color: var(--muted); font-weight: 800; font-size: 14px; cursor: pointer; transition: all .3s var(--ease); }
.seg button:hover { color: var(--text); } .seg button.on { background: linear-gradient(135deg, #a58bff, #7c5cff); color: #fff; box-shadow: 0 6px 18px rgba(110,80,240,.4); }
.seg.sm { max-width: 260px; } .seg.sm button { padding: 7px 10px; font-size: 13px; }
.cv-ctl { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cv-nav { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; } .cv-nav b { flex: 1; text-align: center; font-size: 17px; }
.cv-nav > button:not(.link) { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer; transition: transform .3s var(--spring), background .2s; }
.cv-nav > button:not(.link):hover:not(:disabled) { background: rgba(138,107,255,.25); transform: scale(1.1); } .cv-nav > button:disabled { opacity: .3; cursor: default; }
.cv-nav .link { padding: 4px; font-size: 13px; }
.cv-sum { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 12px 0 8px; } .cv-sum small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.cv-sum b { font-size: 22px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* Répartition par projet : une seule barre segmentée, légende en dessous */
.cv-split { margin: 16px 0 4px; }
.cv-track { display: flex; gap: 3px; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); }
.cv-seg { min-width: 4px; border-radius: 3px; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 92%, #fff 16%), var(--pc)); transition: width .7s var(--ease); }
.cv-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 11px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.cv-lg { display: inline-flex; align-items: center; gap: 7px; }
.cv-lg i { width: 8px; height: 8px; border-radius: 3px; background: var(--pc); flex: none; box-shadow: 0 0 8px color-mix(in srgb, var(--pc) 60%, transparent); }
.cv-lg b { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pj-tag { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--pc) 18%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 50%, transparent); }
.cv-body { margin-top: 12px; } .cv-scroll { overflow-x: auto; overflow-y: hidden; margin: 0 -4px; padding: 0 4px 4px; }

/* Jour : frise verticale des heures */
.tl { position: relative; margin-top: 4px; }
.tl-h { position: absolute; left: 0; right: 0; border-top: 1px solid rgba(255,255,255,.08); } .tl-h span { position: absolute; left: 0; top: -9px; width: 40px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; background: transparent; }
.tl-col { position: absolute; left: 46px; right: 0; top: 0; bottom: 0; }
.tl-b { position: absolute; display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; text-align: left; padding: 5px 9px; overflow: hidden; cursor: pointer; color: var(--text);
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--pc) 70%, transparent); border-left: 4px solid var(--pc);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pc) 34%, #0d0b22), color-mix(in srgb, var(--pc) 16%, #0d0b22)); box-shadow: 0 6px 18px color-mix(in srgb, var(--pc) 20%, transparent);
  transition: transform .3s var(--spring), box-shadow .3s; }
.tl-b:hover { transform: scale(1.02); box-shadow: 0 10px 26px color-mix(in srgb, var(--pc) 40%, transparent); z-index: 2; }
.tl-b b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-b span { font-size: 11.5px; color: color-mix(in srgb, var(--text) 75%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tl-b.run, .wc-blk.run { animation: runGlow 1.8s ease-in-out infinite; } @keyframes runGlow { 50% { box-shadow: 0 0 22px var(--pc); } }
.tl-now { position: absolute; left: -46px; right: 0; height: 0; border-top: 2px solid #ff5d73; z-index: 3; pointer-events: none; }
.tl-now::before { content: ""; position: absolute; left: 34px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: #ff5d73; box-shadow: 0 0 10px #ff5d73; }

/* Semaine : calendrier */
.wc { display: grid; grid-template-columns: 34px repeat(7, minmax(58px, 1fr)); min-width: 460px; gap: 4px; }
.wc-gh { height: 66px; } .wc-gb { position: relative; } .wc-gb span { position: absolute; right: 4px; top: -7px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-h { display: flex; flex-direction: column; align-items: center; width: 100%; height: 62px; margin-bottom: 4px; padding: 6px 2px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--text); cursor: pointer; transition: all .3s var(--spring); }
.wc-h:hover { background: rgba(138,107,255,.2); transform: translateY(-2px); } .wc-h small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; } .wc-h b { font-size: 17px; line-height: 1.1; }
.wc-h em { font-style: normal; font-size: 12.5px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; }
.wc-c.now .wc-h { border-color: var(--violet); background: rgba(138,107,255,.18); box-shadow: 0 0 18px rgba(138,107,255,.35); }
.wc-b { position: relative; border-radius: 12px; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hp) - 1px), rgba(255,255,255,.07) calc(var(--hp) - 1px), rgba(255,255,255,.07) var(--hp)), rgba(0,0,0,.18); }
.wc-blk { position: absolute; display: grid; place-items: center; font-size: 13px; padding: 0; border-radius: 8px; cursor: pointer; border: 1px solid color-mix(in srgb, var(--pc) 75%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 55%, #0d0b22), color-mix(in srgb, var(--pc) 32%, #0d0b22)); transition: transform .25s var(--spring); } .wc-blk:hover { transform: scale(1.06); z-index: 2; }
.wc-c .tl-now { left: 0; } .wc-c .tl-now::before { left: -4px; }

/* Courbes */
.cv-curve { display: block; width: 100%; height: auto; overflow: visible; }
.cv-val { font-size: 12px; font-weight: 800; fill: #fff; font-variant-numeric: tabular-nums; } .cv-val.z { fill: var(--muted); font-weight: 600; }
.cv-x { font-size: 10.5px; fill: var(--muted); } .cv-x.now { fill: var(--accent); font-weight: 800; }

/* Mois : calendrier */
.mc { display: grid; grid-template-columns: repeat(7, minmax(40px, 1fr)) minmax(52px, .9fr); gap: 5px; min-width: 340px; }
.mc-hd { text-align: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; padding-bottom: 2px; }
.mc-d { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 58px; padding: 6px 5px 5px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: var(--text); cursor: pointer; text-align: left; transition: transform .3s var(--spring), background .2s, border-color .2s; }
.mc-d:hover { transform: translateY(-2px); background: rgba(138,107,255,.16); border-color: rgba(160,130,255,.5); }
.mc-d i { font-style: normal; font-size: 11px; color: var(--muted); font-weight: 700; } .mc-d b { font-size: 12.5px; font-weight: 900; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1; }
.mc-d.out { opacity: .32; } .mc-d.has { background: rgba(138,107,255,.12); border-color: rgba(160,130,255,.35); }
.mc-d.now { border-color: #fff; box-shadow: 0 0 16px rgba(138,107,255,.55); } .mc-d.now i { color: #fff; }
.mc-bars { display: flex; width: 100%; height: 4px; gap: 1px; border-radius: 3px; overflow: hidden; margin-top: 3px; } .mc-bars u { display: block; background: var(--pc); }
.mc-w { display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px dashed var(--line2); text-align: center; }
.mc-w b { font-size: 13px; font-variant-numeric: tabular-nums; } .mc-w small { font-size: 10.5px; color: var(--muted); } .mc-w.met { border-color: var(--green); background: rgba(61,220,151,.1); } .mc-w.met small, .mc-w.met b { color: var(--green); }

/* Historique : corbeille */
.tm-trash { flex: none; min-width: 38px; height: 38px; padding: 0 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); cursor: pointer; display: grid; place-items: center; transition: all .25s var(--spring); }
.tm-trash svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tm-trash:hover { color: var(--red); border-color: rgba(255,93,115,.55); background: rgba(255,93,115,.1); transform: scale(1.08); }
.tm-trash.armed { background: rgba(255,93,115,.22); border-color: var(--red); color: #fff; animation: shakeIt .35s; } .tm-trash.armed span { font-size: 12px; font-weight: 800; white-space: nowrap; }
@keyframes shakeIt { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* Projets : progression vers l'objectif du projet */
.pj-pct { font-size: 15px; font-variant-numeric: tabular-nums; color: var(--pc); } .pj-sub { align-items: center; }
.pj-item.met .pj-bar i { background: linear-gradient(90deg, var(--pc), #fff); } .pj-item.met .pj-name::after { content: " ✓"; color: var(--green); }
.pj-item.epic { animation: epicPulse .9s ease-in-out 3; border-radius: 14px; } @keyframes epicPulse { 50% { background: color-mix(in srgb, var(--pc) 22%, transparent); box-shadow: 0 0 34px var(--pc); } }
@media (max-width: 420px) { .tm-entry { gap: 6px; padding: 10px; } .tm-dur { font-size: 13px; } }

/* ═══ Objectif de la semaine ═══ */
.gl-bar { position: relative; margin: 18px 0 10px; }
.gl-bar .bar-line { height: 7px; border-radius: 5px; background: rgba(255,255,255,.07); }
.gl-bar .bar-line i { border-radius: 5px; background: linear-gradient(90deg, #6a4be0, #8a6bff 48%, #5ad7ff); box-shadow: 0 0 16px rgba(110,140,255,.4); }
.gl-m { position: absolute; top: -3px; width: 1px; height: 13px; background: rgba(255,255,255,.18); transform: translateX(-.5px); }
.gl-trophy { position: absolute; right: -4px; top: -15px; font-size: 22px; filter: grayscale(1) opacity(.45); transition: filter .5s; }
.gl-bar.done .gl-trophy { filter: none; animation: trophyBounce 1.2s var(--spring) infinite alternate; } @keyframes trophyBounce { to { transform: translateY(-4px) scale(1.15); } }
.gl-bar.done .bar-line i { background: linear-gradient(90deg, #8a6bff, #5ad7ff 55%, #3ddc97); box-shadow: 0 0 18px rgba(61,220,151,.45); }
.gl-pace { font-size: 13px; margin-top: 6px; color: var(--accent); font-weight: 700; } .gl-pace:empty { display: none; }
.lu-txt em { display: block; font-style: normal; font-size: 15px; color: var(--muted); margin-top: 8px; }

/* Durées avec secondes : chiffres en grand, unités en petit */
.stat.sm small { font-size: 12px; margin: 0 6px 0 2px; color: var(--muted); font-weight: 700; }
.pj-hours small { font-size: 10.5px; margin: 0 4px 0 1px; color: var(--muted); font-weight: 700; }
.cv-sum b small { display: inline; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0 5px 0 2px; font-weight: 700; }
.wc-h em { font-size: 11.5px; } .mc-d b { font-size: 10.5px; letter-spacing: -.01em; } .mc-w b { font-size: 11.5px; } .cv-val { font-size: 11px; }
.mc { grid-template-columns: repeat(7, minmax(50px, 1fr)) minmax(62px, .9fr); min-width: 440px; }

/* Blocs proportionnels au temps : le texte s'adapte à la hauteur, quelques secondes = un simple trait */
.tl-b.s1 { flex-direction: row; align-items: center; gap: 8px; padding-top: 0; padding-bottom: 0; } .tl-b.s1 b { flex: 0 1 auto; min-width: 0; } .tl-b.s1 span { flex: 1 1 0; min-width: 0; }
.tl-b.s0 { padding: 0; border-radius: 5px; border-left-width: 3px; box-shadow: none; } .tl-b.s0 > * { display: none; }
.wc-blk.s0 { font-size: 0; border-radius: 4px; }
@media (max-width: 480px) { .stat.sm { font-size: 19px; letter-spacing: -.03em; } .stat.sm small { font-size: 10px; margin: 0 4px 0 1px; } .grid2 .card { padding: 14px; } }

/* ═══ Page Mission : deux colonnes (travail | progression), rang, niveau nommé, combo ═══ */
.wrap.wide { max-width: 1260px; }
@media (max-width: 1400px) { body.in-app .wrap.wide { padding-left: 88px; } }
.wrap.full { max-width: none; padding-right: 26px; }   /* page Tâches : toute la place disponible, quel que soit l'écran */
body.in-app .wrap.full { padding-left: 96px; }
@media (max-width: 720px) { body.in-app .wrap.full { padding-left: 84px; padding-right: 14px; } }
.mgrid { display: flex; flex-direction: column; padding-top: 18px; }
.mcol-l, .mcol-r { min-width: 0; }
@media (max-width: 1023px) {   /* téléphone / tablette : chrono, totaux, puis progression, puis le reste */
  .mcol-l { display: contents; }
  .mcol-l > :nth-child(-n+2) { order: 1; } .mcol-r { order: 2; } .mcol-l > :nth-child(n+3) { order: 3; }
}
@media (min-width: 1024px) {
  .mgrid { display: grid; grid-template-columns: minmax(0, 1fr) 410px; gap: 28px; align-items: start; }
  .mcol-r { position: sticky; top: 81px; max-height: calc(100vh - 208px); overflow-y: auto; overflow-x: hidden; padding: 4px 8px 30px 4px; margin: -4px -8px 0 -4px; scrollbar-width: thin; scrollbar-color: rgba(160,130,255,.3) transparent; }
}
.mcol-r .card { margin-bottom: 16px; }

/* Emblèmes SVG : animations légères (rayons, étincelles, reflet qui balaie l'écu) */
.rk-svg, .lv-svg { display: block; overflow: visible; }
.sv-rays { transform-box: view-box; transform-origin: 60px 61px; animation: svSpin 46s linear infinite; }
.sv-orbit { transform-box: view-box; transform-origin: 60px 60px; animation: svSpin 12s linear infinite; }
.sv-spin { transform-box: fill-box; transform-origin: center; animation: svSpin 14s linear infinite; }
.sv-sp { transform-box: fill-box; transform-origin: center; animation: svTwinkle 2.8s ease-in-out infinite; }
.sv-shine { animation: svShine 4.6s ease-in-out infinite; }
.sv-halo { animation: svHalo 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes svSpin { to { transform: rotate(360deg); } }
@keyframes svTwinkle { 0%, 100% { opacity: .15; transform: scale(.55); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes svShine { 0%, 52% { transform: skewX(-18deg) translateX(-30px); } 100% { transform: skewX(-18deg) translateX(200px); } }
@keyframes svHalo { to { opacity: .55; transform: scale(1.06); } }
.rk-svg.sm .sv-rays, .rk-svg.sm .sv-sp, .rk-svg.sm .sv-shine, .rk-svg.sm .sv-spin, .lv-svg.sm .sv-orbit, .lv-svg.sm .sv-rays, .lv-svg.locked .sv-orbit, .lv-svg.locked .sv-rays { animation: none; }
.rk-svg.sm .sv-sp { opacity: .8; transform: none; }
.lv-svg.locked { filter: saturate(.62) brightness(.78); }

/* Carte Rang */
.rk { --rc: #a5a2cc; overflow: hidden; }
.rk-glow { position: absolute; left: 50%; top: 40px; width: 420px; height: 300px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 38%, transparent), transparent 72%); opacity: .8; animation: rkBreathe 4.5s ease-in-out infinite alternate; }
@keyframes rkBreathe { to { opacity: .45; transform: translateX(-50%) scale(1.08); } }
.rk .card-hd { align-items: center; } .rk-cap { font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.rk-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 0 4px; }
.rk-emb { animation: rkFloat 5.2s ease-in-out infinite; filter: drop-shadow(0 14px 26px color-mix(in srgb, var(--rc) 50%, transparent)); }
@keyframes rkFloat { 50% { transform: translateY(-6px); } }
.rk-name { margin-top: 2px; font-size: 32px; font-weight: 900; letter-spacing: -.025em; line-height: 1.1; background: linear-gradient(180deg, #fff 20%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--rc) 55%, transparent)); }
.rk-rec { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; }
.rk-rec > div { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--line); }
.rk-rec small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.rk-rec b { display: block; margin-top: 3px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-rec b small { display: inline; font-size: 10.5px; letter-spacing: 0; text-transform: none; margin: 0 3px 0 1px; }
.rk-nx { position: relative; display: flex; align-items: center; gap: 12px; }
.rk-nx-t { flex: 1; min-width: 0; } .rk-nx-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1px 10px; font-size: 13px; margin-bottom: 7px; color: var(--muted); } .rk-nx-h > * { white-space: nowrap; }
.rk-nx-h b { color: var(--text); font-variant-numeric: tabular-nums; } .rk-nx-h span b { color: var(--rc); }
.rk-bar { height: 12px; } .rk-bar i { background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 70%, #000), var(--rc)); box-shadow: 0 0 14px color-mix(in srgb, var(--rc) 70%, transparent); }
.rk-ghost { flex: none; opacity: .55; filter: grayscale(.7) brightness(.85); } .rk-ghost:hover { opacity: .9; filter: none; }
.rk-hint { position: relative; margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.rk-tiers { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px 4px; margin: 16px 0 10px; }
.rk-t { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px; border-radius: 14px; border: 1px solid transparent; }
.rk-t small { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: .01em; text-align: center; line-height: 1.1; }
.rk-t:not(.got) .rk-svg { filter: grayscale(1) brightness(.42); opacity: .8; } .rk-t:not(.got) small { opacity: .5; }
.rk-t.cur { background: color-mix(in srgb, var(--rc) 14%, transparent); border-color: color-mix(in srgb, var(--rc) 55%, transparent); box-shadow: 0 0 20px color-mix(in srgb, var(--rc) 25%, transparent); } .rk-t.cur small { color: #fff; }
.rk-more { position: relative; display: block; width: 100%; padding: 9px 10px; border-radius: 12px; border: 1px dashed var(--line2); background: none; color: var(--muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.rk-more:hover { color: #fff; border-color: rgba(160,130,255,.5); background: rgba(255,255,255,.04); }
.rk-list { position: relative; margin-top: 10px; max-height: 330px; overflow-y: auto; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); scrollbar-width: thin; }
.rk-row { display: grid; grid-template-columns: 34px 1fr auto 18px; align-items: center; gap: 10px; padding: 5px 12px 5px 8px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.05); }
.rk-row:last-child { border: 0; } .rk-row b { font-weight: 800; } .rk-row span { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; } .rk-row i { font-style: normal; color: var(--green); font-weight: 900; }
.rk-row:not(.got) .rk-svg { filter: grayscale(1) brightness(.4); } .rk-row:not(.got) b { color: var(--muted); font-weight: 700; }
.rk-row.cur { background: rgba(138,107,255,.16); box-shadow: inset 3px 0 0 var(--accent); }

/* Carte Niveau : cadre, titre, récompense, prochain niveau, chemin */
.lvc { --rc: #b7a0ff; overflow: hidden; }
.lvh { position: relative; width: 196px; height: 196px; margin: 0 auto; }
.lvh-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.lvh-ring .tr { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3; }
.lvh-ring .fg { fill: none; stroke: var(--rc); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px var(--rc)); }
.lvh-b { position: absolute; inset: 19px; animation: rkFloat 5.6s ease-in-out infinite; filter: drop-shadow(0 12px 22px color-mix(in srgb, var(--rc) 45%, transparent)); }
.lvh-b .lv-svg { width: 100%; height: 100%; }
.lv-title { text-align: center; margin-top: 4px; }
.lv-title small { display: block; font-size: 12px; letter-spacing: .34em; font-weight: 900; color: var(--rc); padding-left: .34em; }
.lv-title b { display: block; font-size: 28px; line-height: 1.12; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(180deg, #fff 25%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lv-title > span { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.lv-pips { display: inline-flex; gap: 4px; } .lv-pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.14); } .lv-pips i.on { background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.lv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 6px; }
.lv-stats > div { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--line); text-align: center; }
.lv-stats small { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .lv-stats b { display: block; margin-top: 3px; font-size: 17px; font-weight: 900; }
.lv-live { margin: 8px 0 4px; font-size: 12.5px; color: var(--muted); text-align: center; min-height: 1.2em; }
.nx { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--rc) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 10%, transparent), rgba(0,0,0,.18)); }
.nx-b { position: relative; flex: none; width: 96px; height: 96px; } .nx-b .lv-svg { width: 100%; height: 100%; }
.nx-lock { position: absolute; right: -2px; bottom: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #171436; border: 1px solid var(--line2); color: #fff; }
.nx-lock svg { width: 15px; height: 15px; }
.nx-i { min-width: 0; flex: 1; } .nx-i small { display: block; font-size: 10.5px; letter-spacing: .18em; font-weight: 900; color: var(--accent); }
.nx-i > b { display: block; font-size: 17px; line-height: 1.2; font-weight: 900; margin: 2px 0 8px; }
.nx-r { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.07); } .nx-r span { color: var(--muted); } .nx-r b { font-variant-numeric: tabular-nums; text-align: right; }
.nx-r em { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba(255,107,214,.16); color: var(--pink); }
.nx-fr { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px; color: var(--muted); background: rgba(255,255,255,.04); border: 1px solid var(--line); } .nx-fr b { color: var(--text); }
.nx-fr.new { color: #fff3c4; border-color: rgba(255,201,74,.55); background: linear-gradient(90deg, rgba(255,201,74,.16), rgba(255,107,214,.1)); animation: newFrame 2.4s ease-in-out infinite; }
.nx-fr.new > span { font-size: 18px; color: var(--yellow); } @keyframes newFrame { 50% { box-shadow: 0 0 20px rgba(255,201,74,.35); } }
.rm-h { margin: 16px 2px 8px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.rm-list { display: flex; flex-direction: column; gap: 6px; }
.rm { position: relative; display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 8px; border-radius: 14px; background: rgba(0,0,0,.2); border: 1px solid var(--line); }
.rm .lv-svg { flex: none; width: 46px; height: 46px; } .rm-i { min-width: 0; flex: 1; } .rm-i b { display: block; font-size: 13.5px; line-height: 1.25; } .rm-i small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rm.new { border-color: rgba(255,201,74,.5); background: linear-gradient(90deg, rgba(255,201,74,.1), rgba(0,0,0,.2)); }
.rm-tag { flex: none; font-size: 10.5px; font-weight: 900; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; color: #ffe08a; background: rgba(255,201,74,.16); border: 1px solid rgba(255,201,74,.45); }
.rm.cap { border-color: rgba(255,201,74,.4); }
.rm-gap { text-align: center; color: var(--muted); letter-spacing: .4em; font-size: 14px; line-height: 1; padding: 2px 0; }
.lt-max { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; text-align: center; font-size: 13px; background: linear-gradient(90deg, rgba(255,201,74,.15), rgba(255,107,214,.12)); border: 1px solid rgba(255,201,74,.4); }

/* Combo : anneau de 5 arcs, parfaitement circulaire */
.cbc { display: flex; align-items: center; gap: 16px; }
.cb-ring { flex: none; width: 104px; height: 104px; border-radius: 50%; }
.cb-ring svg { display: block; width: 104px; height: 104px; }
.cb-a { fill: none; stroke-width: 9; stroke-linecap: round; } .cb-a:not(.on) { stroke: rgba(255,255,255,.12); }
.cb-a.on { filter: drop-shadow(0 0 5px rgba(255,140,90,.75)); animation: cbOn .7s var(--spring) backwards; transform-box: view-box; }
.cb-a.next { stroke: rgba(183,160,255,.55); animation: cbNext 1.8s ease-in-out infinite; }
@keyframes cbOn { from { opacity: 0; stroke-width: 15; } } @keyframes cbNext { 50% { stroke: rgba(183,160,255,.95); } }
.cb-num { font-size: 30px; font-weight: 900; fill: #fff; font-family: inherit; font-variant-numeric: tabular-nums; } .cb-num.sm { font-size: 24px; }
.cb-lb { font-size: 8px; font-weight: 800; letter-spacing: .22em; fill: var(--muted); font-family: inherit; }
.cb-ring.max { animation: cbGlow 1.8s ease-in-out infinite alternate; } @keyframes cbGlow { from { filter: drop-shadow(0 0 4px rgba(255,150,90,.5)); } to { filter: drop-shadow(0 0 16px rgba(255,120,120,.95)); } }
.cb-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cb-txt b { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.cb-cnt { font-size: 21px; font-weight: 900; letter-spacing: -.02em; } .cb-txt small { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.cb-st { margin-top: 6px; font-size: 13px; font-weight: 800; color: #ffcf8a; }

/* Accueil : niveau et rang sur la carte Mission */
.hm-ms { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .hm-emb { flex: none; width: 44px; height: 44px; }

/* Écran de montée de rang : de plus en plus grandiose (p0 discret … p5 Challenger) */
.rup { position: fixed; inset: 0; z-index: 94; pointer-events: none; display: grid; place-items: center; animation: rupOut .5s ease calc(var(--dur) - .5s) forwards; }
.rup.p3, .rup.p4, .rup.p5 { pointer-events: auto; cursor: pointer; }
@keyframes rupOut { to { opacity: 0; } }
.rup-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--rc) 34%, transparent), rgba(5,4,16,.72) 68%); animation: fadeIn .35s ease both; }
.rup.p0 .rup-bg { display: none; }
.rup.p4 .rup-bg, .rup.p5 .rup-bg { animation: rupFlash .9s ease both; } @keyframes rupFlash { 0% { background: #fff; } 100% { } }
.rup-rays { position: absolute; left: 50%; top: 46%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: .4; animation: rupSpin 24s linear infinite, fadeIn 1s ease both;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 70%, transparent) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 30%); mask-image: radial-gradient(circle, #000 0, transparent 30%); }
.rup.p5 .rup-rays { opacity: .55; background: repeating-conic-gradient(from 0deg, #ffd45e 0 4deg, transparent 4deg 10deg, #54e4ff 10deg 13deg, transparent 13deg 20deg); }
@keyframes rupSpin { to { transform: rotate(360deg); } }
.rup-ring { position: absolute; left: 50%; top: 46%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%; border: 3px solid var(--rc); box-shadow: 0 0 30px var(--rc); opacity: 0; animation: rupShock 1.7s var(--ease) both; }
.rup.p0 .rup-ring { display: none; }
@keyframes rupShock { from { transform: scale(.3); opacity: .95; } to { transform: scale(7.5); opacity: 0; } }
.rup-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: -4vh; }
.rup-emb { filter: drop-shadow(0 0 40px var(--rc)); animation: rupEmb 1.1s var(--spring) both; }
@keyframes rupEmb { from { transform: scale(.15) rotate(-14deg); opacity: 0; filter: brightness(3) drop-shadow(0 0 60px #fff); } 55% { opacity: 1; } }
.rup.p4 .rup-emb, .rup.p5 .rup-emb { animation: rupEmb 1.2s var(--spring) both, rkFloat 3.4s ease-in-out 1.2s infinite; }
.rup-txt { margin-top: 6px; animation: rupTxt .9s var(--ease) .35s both; } @keyframes rupTxt { from { opacity: 0; transform: translateY(18px) scale(.9); } }
.rup-txt small { display: block; font-size: 13px; font-weight: 900; letter-spacing: .38em; padding-left: .38em; color: var(--rc2); }
.rup-txt b { display: block; font-size: clamp(38px, 8vw, 68px); line-height: 1.05; font-weight: 900; letter-spacing: -.03em; background: linear-gradient(180deg, #fff 30%, var(--rc)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px var(--rc)); }
.rup-txt em { display: block; margin-top: 6px; font-style: normal; font-size: 14.5px; color: #d7d3f5; } .rup-jump { display: inline-block; margin-top: 10px; padding: 3px 12px; border-radius: 999px; font-weight: 800; font-size: 12.5px; background: rgba(255,255,255,.12); }
.rup.p5 .rup-txt b { background: linear-gradient(180deg, #fff 20%, #ffd45e 60%, #54e4ff); -webkit-background-clip: text; background-clip: text; }
/* faste 0 : simple pastille en haut de l'écran */
.rup.p0 { place-items: start center; }
.rup.p0 .rup-card { flex-direction: row; gap: 14px; margin: 76px 0 0; padding: 8px 22px 8px 12px; border-radius: 999px; background: rgba(20,17,48,.92); backdrop-filter: blur(14px); border: 1px solid color-mix(in srgb, var(--rc) 65%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 34px color-mix(in srgb, var(--rc) 40%, transparent); animation: rupPill .6s var(--spring) both; text-align: left; }
@keyframes rupPill { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
.rup.p0 .rup-emb { animation: none; filter: drop-shadow(0 0 14px var(--rc)); margin: -14px 0; } .rup.p0 .rup-txt { margin: 0; animation: none; }
.rup.p0 .rup-txt b { font-size: 22px; filter: none; } .rup.p0 .rup-txt small { font-size: 10px; letter-spacing: .24em; padding: 0; } .rup.p0 .rup-txt em { display: none; }
@media (max-width: 520px) { .rup-emb .rk-svg { width: 190px; height: 190px; } .rup.p0 .rup-emb .rk-svg { width: 78px; height: 78px; } }

/* Niveau validé : le cadre apparaît avec son titre */
.lvup { background: radial-gradient(circle, color-mix(in srgb, var(--rc) 30%, transparent), transparent 62%); }
.lvup .lu-ring { border-color: var(--rc); }
.lvup .lu-txt { animation: luIn 1s var(--spring) both, luOut .5s 2.6s ease forwards; }
.lvup .lu-txt small { color: var(--rc); } .lvu-b { margin: 4px auto 0; width: 220px; filter: drop-shadow(0 0 34px var(--rc)); }
.lvup .lu-txt b { font-size: 40px; margin-top: 4px; filter: drop-shadow(0 0 20px var(--rc)); background: linear-gradient(180deg, #fff 30%, var(--rc)); -webkit-background-clip: text; background-clip: text; }
@media (max-width: 520px) { .lvu-b { width: 170px; } .lvu-b .lv-svg { width: 170px; height: 170px; } .lvup .lu-txt b { font-size: 32px; } }
@media (max-width: 520px) {
  .nx { gap: 10px; padding: 12px; } .nx-b { width: 74px; height: 74px; } .nx-lock { width: 26px; height: 26px; } .nx-i > b { font-size: 15px; margin-bottom: 6px; }
  .nx-r { flex-wrap: wrap; gap: 0 8px; } .nx-r em { white-space: nowrap; }
  .lvh { width: 176px; height: 176px; } .lvh-b { inset: 17px; } .rk-name { font-size: 28px; } .rk .rk-emb .rk-svg { width: 156px; height: 156px; }
  .cbc { gap: 12px; } .cb-ring, .cb-ring svg { width: 92px; height: 92px; }
}

/* Rang : à tenir semaine après semaine */
.rk-state { margin-top: 4px; font-size: 12.5px; font-weight: 800; color: var(--green); } .rk-state:empty { display: none; }
.rk.warn .rk-state { color: #ffb45e; } .rk.warn .rk-bar i { background: linear-gradient(90deg, #ff7a3d, #ffc94a); box-shadow: 0 0 14px rgba(255,150,60,.6); } .rk.warn .rk-nx-h span b { color: #ffb45e; }
.rk-rule { position: relative; margin: 8px 0 0; padding: 8px 11px; border-radius: 11px; font-size: 12px; line-height: 1.45; color: var(--muted); background: rgba(255,255,255,.04); border: 1px dashed var(--line2); }

/* Courbes des projets : marqueurs et aperçu */
.pj-bar s { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0,0,0,.32); }
.pj-bar i { position: relative; } .pj-bar i::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px; border-radius: 10px; background: #fff; opacity: .7; filter: blur(3px); }
.pj-item.prev .pj-bar i { background: repeating-linear-gradient(135deg, var(--pc) 0 7px, color-mix(in srgb, var(--pc) 55%, transparent) 7px 14px); }

/* Barre de progression collante (page Mission) : chemin du niveau 1 au niveau maximum */
.pb-wrap { position: fixed; left: 0; right: 0; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 41; padding: 0 18px; pointer-events: none; }
@media (max-width: 1400px) { .pb-wrap { padding-left: 88px; } }
.pb { pointer-events: auto; max-width: 1224px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding: 10px 26px 10px 14px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(30,24,70,.92), rgba(12,10,32,.95)); backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); box-shadow: 0 18px 46px rgba(0,0,0,.55), 0 0 40px color-mix(in srgb, var(--c) 20%, transparent); }
.pb-cur { display: flex; align-items: center; gap: 12px; flex: none; }
.pb-bd { flex: none; width: 54px; height: 54px; filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--c) 45%, transparent)); } .pb-bd .lv-svg { width: 54px; height: 54px; }
.pb-nm small { display: block; font-size: 10px; letter-spacing: .28em; font-weight: 900; color: var(--c); }
.pb-nm b { display: block; font-size: 17px; line-height: 1.15; font-weight: 900; max-width: 160px; }
.pb-mid { flex: 1; min-width: 0; }
.pb-track { position: relative; height: 12px; margin: 10px 14px 0 12px; border-radius: 12px; }
.pb-ticks { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--step) - 1px), rgba(0,0,0,.4) calc(var(--step) - 1px), rgba(0,0,0,.4) var(--step)); }
.pb-veil { position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 12px 12px 0; background: rgba(9,7,26,.74); }
.pb-ms { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; transform: rotate(45deg); background: #171436; border: 2px solid var(--c); border-radius: 2px; z-index: 1; }
.pb-ms.on { background: var(--c); box-shadow: 0 0 10px var(--c); }
.pb-goal { position: absolute; right: -12px; top: 50%; margin-top: -15px; font-size: 22px; line-height: 1; filter: grayscale(1) opacity(.5); transition: filter .5s; z-index: 1; }
.pb-goal.on { filter: none; animation: trophyBounce 1.2s var(--spring) infinite alternate; }
.pb-me { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #fff; color: #21134f; font-size: 12px; font-weight: 900;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 40%, transparent), 0 0 20px var(--c); animation: curPulse 1.8s ease-in-out infinite; }
.pb-lbl { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-lbl b { color: #ffe08a; } .pb-nx { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .pb-wrap { bottom: calc(8px + env(safe-area-inset-bottom)); } .pb { flex-direction: column; align-items: stretch; gap: 2px; padding: 9px 22px 9px 12px; border-radius: 20px; }
  .pb-bd, .pb-bd .lv-svg { width: 40px; height: 40px; } .pb-nm b { font-size: 15px; max-width: none; } .pb-track { margin-top: 6px; } .pb-lbl { margin-top: 7px; font-size: 11px; }
}
@media (max-width: 480px) { .pb-nx { display: none; } }

/* ═══ Sommeil : deux colonnes et enclos ═══ */
.pen-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0d0a34; isolation: isolate; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 30px rgba(0,0,0,.35); touch-action: pan-y; }
.pen-bg, .pen-fg, .pen-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pen-fg { pointer-events: none; }
.pn-star { transform-box: fill-box; transform-origin: center; animation: pnTw 3.2s ease-in-out infinite; }
@keyframes pnTw { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
.pn-moonglow { transform-box: fill-box; transform-origin: center; animation: pnGlow 5s ease-in-out infinite alternate; } @keyframes pnGlow { to { opacity: .5; transform: scale(1.08); } }
.pn-cloud { animation: pnCloud 46s linear infinite alternate; } .pn-cloud2 { animation-duration: 62s; animation-direction: alternate-reverse; } @keyframes pnCloud { from { transform: translateX(-14px); } to { transform: translateX(40px); } }
.pn-lamp { animation: pnLamp 2.4s ease-in-out infinite; } @keyframes pnLamp { 0%, 100% { opacity: .95; } 45% { opacity: .62; } 60% { opacity: 1; } }
.pn-win { animation: pnLamp 3.1s ease-in-out infinite; }
.pn-tuft { transform-box: fill-box; transform-origin: 50% 100%; animation: pnSway 3.4s ease-in-out infinite; } @keyframes pnSway { 50% { transform: rotate(7deg); } }
.pn-fly circle { animation: pnFly 5s ease-in-out infinite alternate; } .pn-fly circle:nth-child(2) { animation-duration: 6.4s; animation-delay: -2s; } .pn-fly circle:nth-child(3) { animation-duration: 4.2s; animation-delay: -1s; }
@keyframes pnFly { from { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } to { transform: translate(14px, -10px); opacity: .3; } }
.pen-stage.idle * { animation-play-state: paused !important; }   /* hors écran / onglet masqué : le décor ne consomme plus rien */

/* Sommeil : ordre sur mobile (rythme, nuit, enclos, puis le reste) et cartes de l'enclos */
@media (max-width: 1023px) { .sgrid .mcol-l > :nth-child(-n+3) { order: 1; } .sgrid .mcol-l > :nth-child(n+4) { order: 3; } .sgrid .mcol-r { order: 2; } }
.pen { padding-bottom: 14px; } .pen .card-hd { align-items: center; }
.pen-stats { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; font-size: 12.5px; color: var(--muted); } .pen-stats b { color: var(--text); font-size: 14px; } .pen-stats i { width: 4px; height: 4px; border-radius: 50%; background: var(--line2); margin: 0 4px; }
.pen-msg { position: absolute; left: 50%; top: 10px; z-index: 3; max-width: 94%; padding: 8px 16px; border-radius: 999px; text-align: center; font-size: 13.5px; line-height: 1.3; background: rgba(20,17,48,.93); border: 1px solid rgba(160,130,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.5); opacity: 0; transform: translate(-50%, -14px) scale(.92); transition: opacity .35s, transform .45s var(--spring); pointer-events: none; }
.pen-msg.show { opacity: 1; transform: translate(-50%, 0) scale(1); } .pen-msg small { display: block; font-size: 11px; color: var(--muted); }
.pen-msg.r1 { border-color: #ffc93c; box-shadow: 0 0 26px rgba(255,201,74,.55), 0 10px 26px rgba(0,0,0,.5); } .pen-msg.r2 { border-color: #ff6bd6; box-shadow: 0 0 28px rgba(255,107,214,.55), 0 10px 26px rgba(0,0,0,.5); }
.pen-msg.r3 { border-color: #8fd07a; box-shadow: 0 0 30px rgba(143,208,122,.6), 0 10px 26px rgba(0,0,0,.5); }
.pen-msg.wolf { border-color: #ff5d73; color: #ffd4da; box-shadow: 0 0 30px rgba(255,93,115,.55), 0 10px 26px rgba(0,0,0,.5); } .pen-msg.wolfend { border-color: rgba(255,93,115,.6); }
.pen-tip { position: absolute; z-index: 4; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 11px; border-radius: 12px; background: rgba(14,11,38,.95); border: 1px solid var(--line2); font-size: 12px; white-space: nowrap; pointer-events: none; }
.pen-tip b { font-size: 12.5px; } .pen-tip em { font-style: normal; color: #ff8fa8; font-weight: 700; font-size: 11px; } .pen-tip small { color: var(--muted); font-size: 10.5px; }
.pt-hs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 83px; margin: 3px 0 1px; }
.pt-hs svg { width: 15px; height: 15px; fill: rgba(26,18,56,.8); stroke: rgba(206,198,246,.55); stroke-width: 1.6; stroke-linejoin: round; }
.pt-hs svg.on { fill: #ff4d78; stroke: #6d0f2e; filter: drop-shadow(0 0 3px rgba(255,77,120,.55)); animation: ptBeat 1.1s ease-in-out infinite; }
.pt-hs svg:nth-child(2) { animation-delay: .08s; } .pt-hs svg:nth-child(3) { animation-delay: .16s; } .pt-hs svg:nth-child(4) { animation-delay: .24s; } .pt-hs svg:nth-child(5) { animation-delay: .32s; }
@keyframes ptBeat { 0%, 60%, 100% { transform: scale(1); } 30% { transform: scale(1.18); } }
.pen-today { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.45; } .pen-hint { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
.fk-grid { display: flex; flex-direction: column; gap: 7px; }
.fk-row { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.fk-row img { display: block; width: 54px; max-height: 46px; object-fit: contain; margin: 0 auto; } .fk-i b { display: block; font-size: 13.5px; } .fk-i span, .fk-r span { display: block; font-size: 11.5px; color: var(--muted); }
.fk-r { text-align: right; } .fk-r b { font-size: 14px; font-variant-numeric: tabular-nums; } .fk-r small { color: var(--muted); font-weight: 600; font-size: 10.5px; display: block; } .fk-r em { font-style: normal; color: var(--green); }
.fk-wolf { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(255,93,115,.14), rgba(0,0,0,.2)); border: 1px solid rgba(255,93,115,.35); }
.fk-wolf img { flex: none; } .fk-wolf b { display: block; } .fk-wolf span { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .fk-wolf span b { display: inline; color: #ff8fa8; } .fk-wolf small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); }

.pn-shoot { offset-path: none; animation: pnShoot 11s ease-in infinite; transform: translate(-40px, 10px) rotate(24deg); opacity: 0; }
@keyframes pnShoot { 0%, 78% { opacity: 0; transform: translate(60px, 8px) rotate(24deg); } 82% { opacity: 1; } 92% { opacity: 0; transform: translate(300px, 104px) rotate(24deg); } 100% { opacity: 0; } }

/* Sommeil : la colonne de droite descend jusqu'en bas (pas de barre de niveaux ici) */
@media (min-width: 1024px) { .sgrid .mcol-r { max-height: calc(100vh - 102px); } }
.sl-note { margin: 18px 2px 0; font-size: 13px; line-height: 1.5; }

/* Bouton plein écran de l'enclos */
.pen-wrap { position: relative; }
.pen-exp { position: absolute; right: 10px; top: 10px; z-index: 5; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; cursor: pointer;
  background: rgba(14,11,38,.72); border: 1px solid rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(8px); opacity: .55; transition: opacity .25s, transform .3s var(--spring), background .25s; }
.pen-exp svg { width: 17px; height: 17px; }
.pen-stage:hover + .pen-exp, .pen-exp:hover, .pen-exp:focus-visible { opacity: 1; background: rgba(24,19,60,.9); transform: scale(1.06); }

/* Enclos en plein écran */
.pen-full { position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 16px; background: rgba(6,5,20,.82); backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .3s; }
.pen-full.on { opacity: 1; }
.pf-box { width: min(100% , calc((100vh - 128px) * 4 / 3)); transform: scale(.94); transition: transform .4s var(--spring); }
.pen-full.on .pf-box { transform: none; }
.pf-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.pf-hd b { font-size: 19px; font-weight: 900; letter-spacing: -.01em; } .pf-hd span { font-size: 13px; color: var(--muted); }
.pf-x { margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: 12px; cursor: pointer; background: rgba(255,255,255,.07); border: 1px solid var(--line2); color: var(--text); font-size: 15px; transition: background .25s, transform .3s var(--spring); }
.pf-x:hover { background: rgba(255,255,255,.14); transform: scale(1.06); }
.pen-full .pen-stage { box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); border-radius: 22px; }
.pen-full .pen-msg { top: 16px; font-size: 16px; padding: 10px 22px; }
@media (max-width: 720px) { .pen-full { padding: 12px; } .pf-hd b { font-size: 17px; } .pf-hd span { display: none; } }

/* Graphique en barres (semaine / mois) */
.cv-bars { display: block; width: 100%; height: auto; max-height: 252px; margin: 0 auto; overflow: visible; }
.cv-bar { transition: height .5s var(--ease), y .5s var(--ease); }
.cv-bar.now { filter: drop-shadow(0 0 8px rgba(255,107,214,.55)); }
.cv-goal { font-size: 10.5px; font-weight: 800; fill: #3ddc97; letter-spacing: .02em; }

/* Page Labo (compte de test) */
.lb-r { display: flex; align-items: center; gap: 14px; justify-content: space-between; margin-top: 12px; }
.lb-r > span { font-size: 14px; font-weight: 700; } .lb-r small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.lb-r input, .lb-r select { flex: none; width: 168px; margin: 0; }
.lb-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .lb-btns .btn { flex: 1 1 auto; padding: 11px 14px; font-size: 14px; }
@media (max-width: 520px) { .lb-r { flex-direction: column; align-items: stretch; gap: 6px; } .lb-r input, .lb-r select { width: 100%; } }

/* JOUER à droite : la colonne de droite du Sommeil garde de la place pour lui en bas */

/* ═══ Page Énergie : des cercles de série qui prennent feu (inspiré de Streaks : rien d'autre que les cercles) ═══ */
.en-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; padding: 64px 0 20px; justify-items: center; }
@media (max-width: 640px) { .en-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-top: 70px; } }
.en-c { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; font: inherit; transition: transform .45s var(--spring); }
.en-c:hover { transform: translateY(-4px); } .en-c:active { transform: scale(.97); }
.en-c:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; border-radius: 24px; }
.en-ring { --D: 280px; position: relative; width: var(--D); height: var(--D); margin-bottom: 14px; }
@media (max-width: 640px) { .en-ring { --D: 250px; } }
@media (max-width: 380px) { .en-ring { --D: 222px; } }
.en-halo { position: absolute; inset: -16%; border-radius: 50%; pointer-events: none; opacity: var(--eg);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--ec) 55%, transparent) 55%, color-mix(in srgb, var(--ec) 18%, transparent) 78%, transparent); filter: blur(8px); }
.en-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.en-track { fill: none; stroke: color-mix(in srgb, var(--ec) 16%, rgba(255,255,255,.06)); stroke-width: 14; }
.en-bar { fill: none; stroke: var(--ec); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease), stroke .8s;
  filter: drop-shadow(0 0 calc(2px + var(--eg) * 16px) var(--ec)); }
.en-fire { position: absolute; left: -25%; top: -45%; width: 150%; height: 160%; pointer-events: none; }
.en-core { position: absolute; inset: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10,8,28,.96) 72%, rgba(10,8,28,.82) 88%, rgba(10,8,28,0)); }
.en-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.en-flame { font-size: calc(28px + var(--es) * 20px); line-height: 1; margin-bottom: 2px; animation: flick 1.7s ease-in-out infinite;
  filter: drop-shadow(0 0 calc(6px + var(--eg) * 18px) var(--ec)); }
.en-mid b { font-size: calc(var(--D) * .27); font-weight: 900; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 0 calc(var(--eg) * 26px) color-mix(in srgb, var(--ec) 80%, transparent); }
.en-mid small { font-size: 13px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.en-clock { font-size: 14px; color: color-mix(in srgb, var(--ec) 45%, var(--muted)); margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.en-name { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.en-next { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }
/* la chaleur monte avec les paliers */
/* ── La parure du contour : dix crans, un de plus par palier, et une pièce de plus par ère ── */
/* La parure ne subit PAS la rotation de -90° de l'anneau : ses crans sont déjà placés en partant du haut
   (enOrnInner, a = -π/2 + i·2π/10). Sans ce transform:none, ils repartaient de 9 h et le premier cran
   ne tombait plus là où l'arc de progression démarre. */
.en-orn { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.en-ring > svg.en-orn { transform: none; }
.en-orn * { transform-box: view-box; transform-origin: 125px 125px; }
.en-mk { transition: fill .5s, stroke .5s; }
.en-mk.on { filter: drop-shadow(0 0 4px var(--mc)); }
.en-mk.cur { animation: enMk 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes enMk { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .72; } }
.en-o2 { animation: spin360 var(--os, 24s) linear infinite; }
.en-o3 { animation: spin360 calc(var(--os, 24s) * 1.4) linear infinite reverse; }
.en-o4 { animation: spin360 calc(var(--os, 24s) * 2.6) linear infinite; }
.en-run { animation: spin360 calc(var(--os, 24s) * .28) linear infinite; filter: drop-shadow(0 0 7px var(--mc)); }
.en-sat { animation: spin360 calc(var(--os, 24s) * .42) linear infinite; filter: drop-shadow(0 0 8px var(--mc)); }
.en-orn.o9 { animation: enIris 9s linear infinite; }
@keyframes enIris { to { filter: hue-rotate(360deg); } }
.en-orn.o8 .en-mks, .en-orn.o9 .en-mks { animation: enMks 4s ease-in-out infinite; }
@keyframes enMks { 50% { transform: rotate(6deg); } }

/* la chaleur monte par ère (10 paliers chacune) : le halo respire, puis scintille, puis le cercle bat */
.en-ring.e0 .en-halo, .en-ring.e1 .en-halo, .en-ring.e2 .en-halo, .en-ring.e3 .en-halo, .en-ring.e4 .en-halo,
.en-ring.e5 .en-halo { animation: enBreathe 3.4s ease-in-out infinite; }
.en-ring.e6 .en-halo, .en-ring.e7 .en-halo, .en-ring.e8 .en-halo, .en-ring.e9 .en-halo { animation: enShimmer 1.9s ease-in-out infinite; }
.en-ring.e8, .en-ring.e9 { animation: enBeat 1.25s ease-in-out infinite; }
.en-ring.e9 .en-bar { stroke-width: 16; }
.en-ring.s0 .en-halo { animation: none; }
@keyframes enBreathe { 50% { transform: scale(1.06); opacity: calc(var(--eg) * .7); } }
@keyframes enShimmer { 0%, 100% { transform: scale(1) rotate(0deg); } 33% { transform: scale(1.09) rotate(2deg); opacity: calc(var(--eg) * .8); } 66% { transform: scale(1.03) rotate(-2deg); } }
@keyframes enBeat { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.035); } 26% { transform: scale(1.015); } }
.en-ring.flash .en-bar { animation: enFlash 1.1s var(--ease); }
.en-ring.flash .en-mid b { animation: enPop .9s var(--spring); }
@keyframes enFlash { 0% { stroke: #fff; filter: drop-shadow(0 0 30px #fff); } }
@keyframes enPop { 40% { transform: scale(1.18); } }

/* fiche d'un cercle */
.en-sheet { --ec: #fff; }
.en-sh-h { text-align: center; } .en-sh-h small { font-size: 11px; letter-spacing: .22em; font-weight: 900; color: var(--ec); } .en-sh-h h2 { margin: 4px 0 2px; }
.en-sh-st { font-size: 15px; color: var(--ec); }
.en-sh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 12px; }
.en-sh-stats > div { padding: 10px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--line); text-align: center; }
.en-sh-stats small { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 800; } .en-sh-stats b { display: block; margin-top: 3px; font-size: 14px; }
.en-sh-nx { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; background: color-mix(in srgb, var(--ec) 10%, rgba(0,0,0,.2)); border: 1px solid color-mix(in srgb, var(--ec) 40%, transparent); }
.en-sh-nx span { color: var(--muted); font-size: 12.5px; }
.en-era { position: sticky; top: 0; z-index: 1; display: flex; align-items: baseline; gap: 8px; padding: 7px 12px;
  background: linear-gradient(90deg, rgba(20,17,48,.97), rgba(20,17,48,.9)); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.en-era b { font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.en-era small { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.en-era em { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; color: var(--ec); border: 1px solid color-mix(in srgb, var(--ec) 45%, transparent); }
.en-list { max-height: 380px; overflow-y: auto; margin-bottom: 14px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--line); scrollbar-width: thin; }
.en-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.en-row:last-child { border: 0; }
.en-row i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 900; border: 2px solid color-mix(in srgb, var(--rc) 55%, transparent); color: var(--muted); }
.en-row.got i { background: var(--rc); border-color: var(--rc); color: #1a0d05; }
.en-row.cur { background: color-mix(in srgb, var(--rc) 14%, transparent); box-shadow: inset 3px 0 0 var(--rc); } .en-row.cur i { border-color: var(--rc); color: #fff; box-shadow: 0 0 12px var(--rc); }
.en-row b { display: block; font-size: 13.5px; } .en-row small { display: block; font-size: 11.5px; color: var(--muted); }
.en-row span { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.en-row:not(.got):not(.cur) b { color: var(--muted); font-weight: 700; }

/* nouveau palier */
.enup { position: fixed; inset: 0; z-index: 94; pointer-events: none; display: grid; place-items: center; }
.enup.small { place-items: start center; }
.enup-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--ec) 32%, transparent), rgba(5,4,16,.7) 68%); animation: fadeIn .35s ease both, rupOut .5s ease 3.1s forwards; }
.enup-rays { position: absolute; left: 50%; top: 46%; width: 190vmax; height: 190vmax; margin: -95vmax 0 0 -95vmax; opacity: .38; animation: rupSpin 24s linear infinite, fadeIn 1s ease both, rupOut .5s ease 3.1s forwards;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--ec) 75%, transparent) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 30%); mask-image: radial-gradient(circle, #000 0, transparent 30%); }
.enup-card { position: relative; display: flex; align-items: center; gap: 14px; text-align: left; }
.enup.big .enup-card { flex-direction: column; text-align: center; gap: 6px; animation: rupTxt .8s var(--spring) both, rupOut .5s ease 3.1s forwards; }
.enup.small .enup-card { margin-top: 76px; padding: 10px 22px 10px 14px; border-radius: 999px; background: rgba(20,17,48,.93); backdrop-filter: blur(14px);
  border: 1px solid color-mix(in srgb, var(--ec) 65%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 30px color-mix(in srgb, var(--ec) 40%, transparent); animation: rupPill .6s var(--spring) both, rupOut .45s ease 2.15s forwards; }
.enup-fl { font-size: 30px; line-height: 1; filter: drop-shadow(0 0 12px var(--ec)); animation: flick 1.2s ease-in-out infinite; } .enup.big .enup-fl { font-size: 84px; filter: drop-shadow(0 0 30px var(--ec)); }
.enup-card small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .24em; color: var(--ec); } .enup.big .enup-card small { font-size: 12.5px; letter-spacing: .34em; }
.enup-card b { display: block; font-size: 20px; font-weight: 900; line-height: 1.15; }
.enup.big .enup-card b { font-size: clamp(38px, 8vw, 64px); letter-spacing: -.03em; background: linear-gradient(180deg, #fff 30%, var(--ec)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 24px var(--ec)); }
.enup-card em { display: block; font-style: normal; font-size: 12.5px; color: #d7d3f5; } .enup.big .enup-card em { font-size: 16px; margin-top: 4px; }
.enup-card span { display: inline-block; margin-top: 10px; padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.1); }

/* Flammes dessinées au centre des cercles (1, 2, 3 flammes par style ; 7 styles de plus en plus beaux) */
.en-fl { display: flex; align-items: flex-end; justify-content: center; height: calc(var(--D, 260px) * .22); margin-bottom: 2px; }
.enf { display: block; width: calc(var(--D, 260px) * .2 * var(--k, 1)); margin: 0 calc(var(--D, 260px) * -.036); transform-origin: 50% 88%; animation: enfFlick 1.5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.enf svg { display: block; width: 100%; height: auto; overflow: visible; }
.enf { filter: drop-shadow(0 0 var(--gb, 0px) var(--g, transparent)); }
.enf-ring { transform-box: view-box; transform-origin: 64px 72px; animation: spin360 9s linear infinite; }
.enf-core { transform-box: fill-box; transform-origin: 50% 100%; animation: enfCore 1.3s ease-in-out infinite; }
@keyframes enfCore { 50% { transform: scale(1.18, .88); opacity: .75; } }
.enf-arc { transform-box: view-box; transform-origin: 64px 70px; animation: enfArc 1.1s steps(1) infinite; }
@keyframes enfArc { 0%, 100% { opacity: .9; transform: scaleX(1); } 50% { opacity: .25; transform: scaleX(-1); } }
@keyframes enfFlick { 0%, 100% { transform: scale(1, 1) skewX(0deg); } 30% { transform: scale(.97, 1.06) skewX(-2deg); } 65% { transform: scale(1.02, .96) skewX(1.6deg); } }
.enf-in { transform-box: fill-box; transform-origin: 50% 100%; animation: enfIn 1.1s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes enfIn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, .93); } }
.enf-sp { transform-box: fill-box; transform-origin: center; animation: svTwinkle 1.8s ease-in-out infinite; }
.enf-em { animation: enfEm 2.2s ease-out infinite; }
@keyframes enfEm { 0% { transform: translateY(18px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }
.enf-rays { transform-box: view-box; transform-origin: 64px 70px; animation: spin360 14s linear infinite; }
@keyframes spin360 { to { transform: rotate(360deg); } }
/* avant le premier jour : le chrono en grand au milieu */
.en-ring.pre .en-mid b { font-size: calc(var(--D) * .128); letter-spacing: -.01em; margin-top: 6px; }
.en-ring.pre .en-mid small, .en-ring.pre .en-clock { display: none; }
.enup-fl { display: flex; align-items: flex-end; } .enup-fl .enf { width: calc(40px * var(--k, 1)); margin: 0 -8px; }
.enup.big .enup-fl .enf { width: calc(104px * var(--k, 1)); margin: 0 -18px; }
.enup-fl { filter: none; animation: none; }

/* JOUER dans le menu de gauche : menu replié = un seul bouton play, rond et vivant, SANS contour ;
   menu déplié = la capsule JOUER d'origine (bordure vivante, anneau de l'objectif, chrono en entier) */
nav.side .play { position: relative; right: auto; bottom: auto; flex: none; margin: 12px 0 0 0; z-index: 1;
  width: 48px; min-width: 0; height: 48px; padding: 0; gap: 0; border-radius: 24px; overflow: visible;
  background: none; border: 0; box-shadow: none;
  transition: width .45s var(--ease), height .45s var(--ease), padding .45s var(--ease), gap .45s var(--ease), border-radius .45s var(--ease), box-shadow .35s, transform .4s var(--spring); }
nav.side .play::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: linear-gradient(rgba(17,14,42,.96), rgba(17,14,42,.96)) padding-box, conic-gradient(from var(--ang), #8a6bff, #ff6bd6, #5ad7ff, #8a6bff) border-box; border: 2px solid transparent; }
nav.side .play::after { opacity: 0; transition: opacity .3s; }
nav.side .play .pl-orb { width: 48px; height: 48px; }
nav.side .play .pl-ring, nav.side .play .pl-orb::after { opacity: 0; transition: opacity .35s; }
nav.side .play .pl-aura { inset: -6px; border-radius: 50%; opacity: .85; }
nav.side .play .pl-core { width: 44px; height: 44px; overflow: hidden; isolation: isolate;
  background: radial-gradient(circle at 30% 24%, #fbf7ff 0 7%, #c9b6ff 24%, #8a6bff 52%, #5b3ce0 78%, #3d23b0);
  box-shadow: 0 8px 22px rgba(110,80,240,.62), 0 0 0 0 rgba(160,130,255,.55), inset 0 -6px 10px rgba(28,10,90,.5), inset 0 2px 2px rgba(255,255,255,.55);
  animation: plBeat 2.6s ease-in-out infinite; transition: width .45s var(--ease), height .45s var(--ease), transform .4s var(--spring); }
nav.side .play .pl-core::before { content: ""; position: absolute; left: 16%; top: 7%; width: 56%; height: 34%; border-radius: 50%; z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
nav.side .play .pl-core::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); background-size: 300% 100%; background-position: 150% 0; animation: plSheen 3.6s ease-in-out infinite; }
nav.side .play .pl-core svg { width: 18px; height: 18px; margin-left: 3px; filter: drop-shadow(0 2px 3px rgba(30,10,90,.55)); }
@keyframes plBeat { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(110,80,240,.62), 0 0 0 0 rgba(160,130,255,.5), inset 0 -6px 10px rgba(28,10,90,.5), inset 0 2px 2px rgba(255,255,255,.55); }
  45% { transform: scale(1.07); box-shadow: 0 10px 28px rgba(110,80,240,.78), 0 0 0 7px rgba(160,130,255,0), inset 0 -6px 10px rgba(28,10,90,.5), inset 0 2px 2px rgba(255,255,255,.55); } }
@keyframes plSheen { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
nav.side .play.on .pl-core { background: radial-gradient(circle at 30% 24%, #fff5f7 0 7%, #ffc2ce 24%, #ff5d73 52%, #d9264a 78%, #a3102f); animation-duration: 1.3s;
  box-shadow: 0 8px 22px rgba(255,60,90,.6), inset 0 -6px 10px rgba(90,6,30,.5), inset 0 2px 2px rgba(255,255,255,.55); }
nav.side .play.here:not(.on) .pl-core { background: radial-gradient(circle at 30% 24%, #ffffff 0 8%, #ddd0ff 26%, #9d82ff 52%, #6446ea 78%, #4428bd); }
nav.side .play .pl-info, nav.side .play .pl-go { opacity: 0; max-width: 0; overflow: hidden; transition: opacity .3s, max-width .45s var(--ease); }
nav.side .play:hover { transform: scale(1.06); }
nav.side .play:hover .pl-core { animation-play-state: paused; }
/* menu déplié : la capsule complète */
@media (hover: hover) { nav.side:hover .play { width: 214px; height: 60px; padding: 4px 12px 4px 6px; gap: 10px; border-radius: 999px; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 34px rgba(138,107,255,.38); }
  nav.side:hover .play:hover { transform: translateY(-2px); }
  nav.side:hover .play::before, nav.side:hover .play::after, nav.side:hover .play .pl-ring, nav.side:hover .play .pl-orb::after { opacity: 1; }
  nav.side:hover .play .pl-aura { inset: -12px; border-radius: 999px; }
  nav.side:hover .play .pl-core { width: 36px; height: 36px; animation: none; } nav.side:hover .play .pl-core svg { width: 16px; height: 16px; margin-left: 2px; }
  nav.side:hover .play .pl-info { opacity: 1; max-width: 110px; } nav.side:hover .play .pl-go { opacity: 1; max-width: 28px; } }
nav.side.open .play, nav.side:has(:focus-visible) .play { width: 214px; height: 60px; padding: 4px 12px 4px 6px; gap: 10px; border-radius: 999px; box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 34px rgba(138,107,255,.38); }
nav.side.open .play::before, nav.side.open .play::after, nav.side.open .play .pl-ring, nav.side.open .play .pl-orb::after,
nav.side:has(:focus-visible) .play::before, nav.side:has(:focus-visible) .play::after, nav.side:has(:focus-visible) .play .pl-ring, nav.side:has(:focus-visible) .play .pl-orb::after { opacity: 1; }
nav.side.open .play .pl-aura, nav.side:has(:focus-visible) .play .pl-aura { inset: -12px; border-radius: 999px; }
nav.side.open .play .pl-core, nav.side:has(:focus-visible) .play .pl-core { width: 36px; height: 36px; animation: none; }
nav.side.open .play .pl-info, nav.side:has(:focus-visible) .play .pl-info { opacity: 1; max-width: 110px; }
nav.side.open .play .pl-go, nav.side:has(:focus-visible) .play .pl-go { opacity: 1; max-width: 28px; }
nav.side .play .pl-title { font-size: 17px; letter-spacing: .12em; } nav.side .play.on .pl-title { font-size: 16px; letter-spacing: .05em; }
nav.side .play .pl-sub { max-width: none; overflow: visible; text-overflow: clip; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #d4ccff; }
/* plus de bouton flottant en bas : l'espace n'est gardé que pour la barre de niveaux de la Mission */
body.in-app:not(.pb-on) { padding-bottom: 56px; }

/* ═══ Énergie : l'anneau de la Rétention à gauche, le bar du No Alcool à droite ═══ */
.wrap.mid { max-width: 1140px; } main.wrap.mid { overflow-x: clip; }   /* les flammes de l'anneau ne débordent jamais de l'écran */
@media (max-width: 1320px) { body.in-app .wrap.mid { padding-left: 88px; } }
.en-home { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 640px); justify-content: center; align-items: center; gap: 36px 44px; padding: 40px 0 24px; }
.en-left { display: grid; place-items: center; padding-top: 34px; }
@media (max-width: 1080px) { .en-home { grid-template-columns: minmax(0, 640px); gap: 64px; padding-top: 70px; } }
/* la carte du bar */
.bar-card.bare .bar-stage { margin: 0; }
.bar-card { --ba: #c9b27a; position: relative; border-radius: 26px; padding: 14px; background: linear-gradient(180deg, rgba(28,23,58,.92), rgba(16,13,38,.94));
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px color-mix(in srgb, var(--ba) 14%, transparent); }
.bar-hd { display: flex; align-items: center; gap: 12px; padding: 2px 6px 12px; }
.bar-hd small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--ba); }
.bar-hd b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15; }
.bar-pill { margin-left: auto; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--ba) 16%, rgba(0,0,0,.25)); border: 1px solid color-mix(in srgb, var(--ba) 45%, transparent); color: #fff; }
.bar-stage { position: relative; }
.bar-scene { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #120d09; isolation: isolate; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 30px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; }
.bar-scene:focus-visible { outline: 2px solid var(--ba); outline-offset: 3px; }
.bl { position: absolute; pointer-events: none; }
.bl > svg { display: block; width: 100%; height: 100%; }
.bl-full { left: 0; top: 0; width: 100%; height: 100%; }
.bar-scene.idle .bl, .bar-scene.idle .bl > svg { animation-play-state: paused !important; }
/* compteur façon jeu, en haut à gauche de la scène */
.bar-hud { position: absolute; left: 12px; top: 12px; z-index: 3; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; padding: 8px 14px 9px; border-radius: 16px;
  background: rgba(12,9,26,.84); border: 1px solid color-mix(in srgb, var(--ba) 45%, rgba(255,255,255,.1)); pointer-events: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.bar-hud b { font-size: 30px; font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 18px color-mix(in srgb, var(--ba) 60%, transparent); }
.bar-hud small { font-size: 12px; font-weight: 800; color: var(--ba); }
.bar-hud span { grid-column: 1 / -1; font-size: 11.5px; color: #cfc9ee; font-variant-numeric: tabular-nums; margin-top: 3px; letter-spacing: .04em; }
.bar-hud.pre b { font-size: 24px; letter-spacing: -.01em; } .bar-hud.pre small, .bar-hud.pre span { display: none; }
.bar-exp { opacity: .85; }
.bar-stage:hover .bar-exp { opacity: 1; }
/* bulle de dialogue */
.bar-say { position: absolute; z-index: 4; left: 56%; top: 6%; max-width: 40%; padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: #fffdf5; color: #24160e;
  font-size: 13.5px; font-weight: 800; line-height: 1.3; box-shadow: 0 10px 24px rgba(0,0,0,.35); pointer-events: none; opacity: 0; transform: translateY(8px) scale(.8); transform-origin: 0% 100%;
  transition: opacity .25s, transform .35s var(--spring); }
.bar-say.on { opacity: 1; transform: none; }
.bar-scene.talk .an-head { animation: barTalk .6s var(--spring) 1, barNod 5s ease-in-out .6s infinite; }
/* bas de carte : palier, progression, fiche du personnage */
.bar-foot { padding: 14px 6px 4px; }
.bar-st { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.bar-st b { font-size: 18px; font-weight: 900; letter-spacing: -.01em; }
.bar-st span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar-prog { height: 8px; margin: 10px 0 14px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar-prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ba) 60%, #fff), var(--ba)); box-shadow: 0 0 12px var(--ba); transition: width 1s linear; }
.bar-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bar-stats > div { padding: 9px 10px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--line); min-width: 0; }
.bar-stats small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bar-stats b { display: block; margin-top: 4px; font-size: 15px; font-weight: 900; white-space: nowrap; }
.bar-hp { height: 9px; margin-top: 8px !important; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar-hp i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5d73, #ffc94a 55%, #3ddc97); background-size: 300% 100%; background-position: 0 0; }
.bar-stars i { font-style: normal; color: rgba(255,255,255,.18); font-size: 14px; letter-spacing: -1px; }
.bar-stars i.on { color: #ffc93c; text-shadow: 0 0 8px rgba(255,201,60,.6); }
.bar-stars i.half { background: linear-gradient(90deg, #ffc93c 50%, rgba(255,255,255,.18) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bar-acts { display: flex; gap: 8px; margin-top: 12px; } .bar-acts .btn { flex: 1; }
.bar-drank { color: #ff9aa8; }
@media (max-width: 520px) { .bar-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bar-hud b { font-size: 24px; } .bar-hud.pre b { font-size: 19px; } .bar-hd b { font-size: 19px; } .bar-say { font-size: 12px; left: 50%; max-width: 46%; } }
/* plein écran */
.bar-fullv .bar-fullcard { padding: 0; background: none; border: 0; box-shadow: none; }
.bar-fullv .bar-scene { border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
.bar-fullv .bar-say { font-size: 17px; }
/* célébration : le buste du personnage */
.enup-bust { display: block; width: 58px; height: 62px; flex: none; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.enup-bust svg { width: 100%; height: 100%; overflow: hidden; }
.enup.big .enup-bust { width: 170px; height: 180px; margin-bottom: 4px; animation: barBust 1s var(--spring) both; }
@keyframes barBust { from { transform: scale(.4) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* animations du bar : uniquement transform/opacity (calques sur la carte graphique, aucun redessin) */
.an-breathe { transform-origin: 50% 74%; animation: barBreathe 4.2s ease-in-out infinite; }
@keyframes barBreathe { 50% { transform: scaleY(1.012); } }
.an-head { animation: barNod 5s ease-in-out infinite; }
@keyframes barNod { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1.2deg); } }
.an-head.drunk { animation: barSway 3.2s ease-in-out infinite; }
@keyframes barSway { 0%, 100% { transform: rotate(-4deg) translateX(-.4%); } 50% { transform: rotate(3.5deg) translateX(.4%); } }
@keyframes barTalk { 0% { transform: none; } 35% { transform: translateY(-1.6%) rotate(-2deg); } 70% { transform: translateY(.4%) rotate(1deg); } 100% { transform: none; } }
.an-lids { opacity: 0; animation: barBlink 5.2s infinite; }
@keyframes barBlink { 0%, 93%, 100% { opacity: 0; } 94.5%, 97% { opacity: 1; } }
.an-fly { animation: barOrbit 3.4s linear infinite; }
@keyframes barOrbit { to { transform: rotate(360deg); } }
.an-stink { opacity: 0; animation: barRise 2.8s ease-in-out infinite; }
@keyframes barRise { 0% { transform: translateY(25%); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-45%); opacity: 0; } }
.an-hic { opacity: 0; transform-origin: 15% 90%; animation: barHic 5.5s ease-in-out infinite; }
@keyframes barHic { 0%, 62%, 100% { opacity: 0; transform: scale(.3); } 68% { opacity: 1; transform: scale(1.1); } 72%, 86% { opacity: 1; transform: scale(1); } 92% { opacity: 0; transform: scale(.9); } }
.an-spark, .an-glint { animation: barTwinkle 2.4s ease-in-out infinite; }
@keyframes barTwinkle { 0%, 100% { opacity: .1; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } }
.an-aura { animation: barAura 3.6s ease-in-out infinite; }
@keyframes barAura { 0%, 100% { opacity: .6; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
.an-bub { opacity: 0; animation: barBub 1.9s linear infinite; }
@keyframes barBub { 0% { transform: translateY(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateY(-72%); opacity: 0; } }
.an-steam { opacity: 0; animation: barSteam 2.6s ease-in-out infinite; }
@keyframes barSteam { 0% { transform: translateY(15%) scaleX(.8); opacity: 0; } 35% { opacity: .9; } 100% { transform: translateY(-35%) scaleX(1.2); opacity: 0; } }
.an-shake { animation: barShake .3s linear infinite; }
@keyframes barShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-2.5%, 1%); } 50% { transform: translate(2%, -1%); } 75% { transform: translate(-1.2%, -1.4%); } }
.an-drip { opacity: 0; animation: barDrip 2.2s ease-in infinite; }
@keyframes barDrip { 0%, 30% { transform: translateY(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(160%); opacity: 0; } }
.an-neon { animation: barNeon 6s steps(1) infinite; }
@keyframes barNeon { 0%, 100% { opacity: 1; } 71% { opacity: .2; } 72% { opacity: 1; } 74% { opacity: .1; } 75% { opacity: 1; } 90% { opacity: .5; } 91% { opacity: 1; } }
.an-mouse { overflow: hidden; } .an-mouse > svg { animation: barMouse 9s ease-in-out infinite; }
@keyframes barMouse { 0%, 55%, 100% { transform: translateY(105%); } 62%, 80% { transform: translateY(0); } 70% { transform: translateY(10%); } }
.an-bulb { animation: barSwing 4.6s ease-in-out infinite; }
@keyframes barSwing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.an-rays { animation: barGlow 6s ease-in-out infinite; }
.an-sec { animation: barTick 60s steps(60) infinite; }
@keyframes barTick { to { transform: rotate(360deg); } }
.an-plant { animation: barLeaf 5s ease-in-out infinite; }
@keyframes barLeaf { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.an-pend { animation: barPend 6s ease-in-out infinite; }
@keyframes barPend { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.an-glow, .an-glow2 { animation: barGlow 3s ease-in-out infinite; }
@keyframes barGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.an-glow2 { animation-duration: 1.3s; }
.an-hearth { animation: barHearth .9s ease-in-out infinite alternate; }
@keyframes barHearth { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.94, 1.08) skewX(-3deg); } 100% { transform: scale(1.04, .95) skewX(2deg); } }
.an-twk { animation: barTwk 3.2s ease-in-out infinite; }
@keyframes barTwk { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.an-fw { opacity: 0; animation: barFw 4.6s ease-out infinite; }
@keyframes barFw { 0%, 55% { transform: scale(.1); opacity: 0; } 60% { opacity: 1; } 85% { transform: scale(1.15); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
.an-heli { animation: barHeli 40s linear infinite; }
@keyframes barHeli { from { transform: translateX(0); } to { transform: translateX(520%); } }
.an-blink { animation: barLight 1.6s steps(1) infinite; }
@keyframes barLight { 0%, 100% { opacity: 1; } 50% { opacity: .12; } }
.an-ripple { animation: barRipple 3s ease-in-out infinite; }
@keyframes barRipple { 0%, 100% { transform: translateX(-2%); opacity: .6; } 50% { transform: translateX(2%); opacity: 1; } }
/* transformation au passage d'un palier (éclair + étoiles) et changement de lieu (fondu circulaire) */
.bar-scene::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #fff 0 12%, color-mix(in srgb, var(--ba) 70%, #fff) 30%, transparent 62%); }
.bar-scene.morph::after { animation: barFlash .8s ease-out; }
.bar-scene.morph.late::after { animation: barFlashOut .7s ease-out; }
.bar-scene.morph.late .bl-full.an-breathe { animation: barPop .7s var(--spring), barBreathe 4.2s ease-in-out .7s infinite; }
@keyframes barFlash { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.4); } 100% { opacity: 1; transform: scale(1.6); } }
@keyframes barFlashOut { from { opacity: 1; transform: scale(1.6); } to { opacity: 0; transform: scale(1.9); } }
@keyframes barPop { 0% { transform: scale(.86); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.bar-scene.travel { animation: barIrisIn .65s cubic-bezier(.6, 0, .9, .4) both; }
.bar-scene.travel.late { animation: barIrisOut .85s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes barIrisIn { from { clip-path: circle(75% at 50% 45%); } to { clip-path: circle(0% at 50% 45%); } }
@keyframes barIrisOut { from { clip-path: circle(0% at 50% 45%); } to { clip-path: circle(75% at 50% 45%); } }
@media (prefers-reduced-motion: reduce) { .bar-scene .bl, .bar-scene .bl > svg { animation: none !important; } .an-lids, .an-hic, .an-bub, .an-steam, .an-stink, .an-drip, .an-fw { opacity: 0 !important; } }

/* ═══ Sommeil : nuit validée (définitive, en lecture seule) ═══ */
.night-done { border-color: rgba(61,220,151,.35); background: linear-gradient(180deg, rgba(61,220,151,.1), rgba(255,255,255,.028)); }
.night-done h3 { display: flex; align-items: center; gap: 8px; }
.nd-lock { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(61,220,151,.16); }
.nd-lock svg { width: 14px; height: 14px; fill: none; stroke: #3ddc97; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nd-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.nd-row > div { padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.24); border: 1px solid var(--line); text-align: center; }
.nd-row small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.nd-row b { display: block; margin-top: 4px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ═══ Choix de la langue : FR / EN (page d'inscription, en-tête, profil) ═══ */
.lang-sw { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; flex: none;
  background: rgba(255,255,255,.06); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.lang-sw button { min-width: 34px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px; cursor: pointer; background: none;
  color: var(--muted); font: inherit; font-size: 12px; font-weight: 900; letter-spacing: .08em; transition: background .25s, color .25s, transform .3s var(--spring); }
.lang-sw button:hover { color: #fff; }
.lang-sw button.on { color: #fff; background: linear-gradient(135deg, #8a6bff, #6a4be0); box-shadow: 0 4px 14px rgba(110,80,240,.45); }
.lang-sw button:active { transform: scale(.94); }
.lang-sw button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top .lang-sw.top-lang { margin-left: auto; }
.top .lang-sw.top-lang ~ .lvl { margin-left: 4px; }
.brand-row { position: relative; }
.lang-sw.auth-lang { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.lang-sw.lang-big button { min-width: 64px; height: 38px; font-size: 14px; }
@media (max-width: 520px) { .top .lang-sw.top-lang button { min-width: 30px; height: 26px; padding: 0 7px; font-size: 11px; }
  .lang-sw.auth-lang { position: static; transform: none; margin-left: auto; } .brand-row { justify-content: flex-start; } }
/* en-tête sur téléphone : titre + FR/EN + pastille de niveau (la jauge d'XP se replie pour que tout tienne sur une ligne) */
@media (max-width: 560px) { .top .wrap { gap: 8px; } .top .pg { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lvl .xpwrap { display: none; } .lvl { padding: 5px; gap: 0; flex: none; } }

/* ───────── En-tête : niveau (affichage seul) + bouton profil ───────── */
.lvl { cursor: default; }
.lvl:hover { transform: none; border-color: var(--line); background: rgba(255,255,255,.05); }
.me-btn { flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: #d9d3ff;
  cursor: pointer; display: grid; place-items: center; overflow: hidden; transition: transform .3s var(--spring), border-color .25s, box-shadow .25s; }
.me-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.me-btn .av { width: 100%; height: 100%; font-size: 17px; }
.me-btn:hover { transform: translateY(-1px) scale(1.06); border-color: rgba(160,130,255,.6); box-shadow: 0 0 0 4px rgba(138,107,255,.16); }
.me-btn.on { border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(138,107,255,.4), 0 0 18px rgba(138,107,255,.55); }
.me-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) { .me-btn { width: 36px; height: 36px; } .me-btn svg { width: 18px; height: 18px; } }

/* ───────── Avatars ───────── */
.av { display: block; border-radius: 50%; object-fit: cover; background: #1a1540; }
.av-mono { display: grid; place-items: center; color: #fff; font-weight: 900; line-height: 1; user-select: none;
  background: linear-gradient(135deg, hsl(var(--h) 72% 60%), hsl(calc(var(--h) + 45) 68% 36%)); text-shadow: 0 1px 3px rgba(0,0,0,.35); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 12px; }
.av-opt { position: relative; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  display: grid; place-items: center; transition: transform .3s var(--spring); }
.av-opt .av { width: 100%; height: 100%; font-size: 26px; box-shadow: 0 0 0 2px rgba(255,255,255,.08); transition: box-shadow .25s; }
.av-opt:hover { transform: translateY(-2px) scale(1.06); }
.av-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.av-opt.on .av { box-shadow: 0 0 0 3px var(--accent2), 0 0 20px rgba(138,107,255,.7); }
.av-opt.on::after { content: "✓"; position: absolute; right: -2px; bottom: -2px; width: 21px; height: 21px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 900; background: var(--accent2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.av-up { gap: 2px; align-content: center; border: 1.5px dashed rgba(160,130,255,.6); background: rgba(138,107,255,.1); color: #ddd4ff; font-size: 11px; font-weight: 800; }
.av-up input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.av-up svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.av-up:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.av-rm { margin-top: 14px; padding: 4px 0; background: none; border: 0; color: #ff9aa8; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.av-rm:hover { text-decoration: underline; }

/* ───────── Classements ───────── */
.lb { max-width: 760px; margin: 0 auto; padding-top: 10px; }
.lb-pod .lb-st { justify-content: center; margin-top: 2px; }
.lb-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 5px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.lb-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 10px 6px 9px; border: 0; border-radius: 15px;
  background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1.15; text-align: center; cursor: pointer;
  transition: background .25s, color .25s, transform .3s var(--spring), box-shadow .25s; }
.lb-tabs button:hover { color: #fff; background: rgba(255,255,255,.05); }
.lb-tabs button:active { transform: scale(.96); }
.lb-tabs button.on { color: #fff; background: linear-gradient(135deg, #8a6bff, #6a4be0); box-shadow: 0 8px 22px rgba(110,80,240,.42); }
.lb-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-sub { margin: 14px 0 4px; text-align: center; font-size: 13.5px; color: var(--muted); }
.lb-load { padding: 50px 0; text-align: center; color: var(--muted); }
.lb-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 10px; margin: 34px 0 14px; }
.lb-pod { --mc: #e59a5c; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: center; cursor: pointer; }
.lb-pod.p1 { --mc: #ffd45e; } .lb-pod.p2 { --mc: #d6dde8; }
.lb-pod.empty { --mc: rgba(255,255,255,.25); cursor: default; opacity: .4; }
.lb-pav { position: relative; display: block; width: 72px; height: 72px; margin-bottom: 10px; transition: transform .35s var(--spring); }
.lb-pod.p1 .lb-pav { width: 94px; height: 94px; }
.lb-pod:not(.empty):hover .lb-pav { transform: translateY(-4px) scale(1.04); }
.lb-pimg { width: 100%; height: 100%; font-size: 32px; box-shadow: 0 0 0 3px var(--mc), 0 0 0 7px color-mix(in srgb, var(--mc) 22%, transparent), 0 14px 30px rgba(0,0,0,.5); }
.lb-pod.p1 .lb-pimg { font-size: 40px; box-shadow: 0 0 0 3px var(--mc), 0 0 0 8px color-mix(in srgb, var(--mc) 26%, transparent), 0 0 36px color-mix(in srgb, var(--mc) 45%, transparent), 0 14px 30px rgba(0,0,0,.5); }
.lb-pav > i { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-style: normal; font-size: 13px; font-weight: 900; color: #1a1030; background: var(--mc); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.lb-crown { position: absolute; left: 50%; top: -30px; width: 36px; margin-left: -18px; color: #ffd45e; filter: drop-shadow(0 0 8px rgba(255,212,94,.75)); animation: lbCrown 2.8s ease-in-out infinite; }
.lb-crown svg { display: block; width: 100%; height: auto; }
@keyframes lbCrown { 50% { transform: translateY(-3px) rotate(-4deg); } }
.lb-pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 900; }
.lb-pod.me .lb-pn { color: var(--accent); }
.lb-pod .lb-rk, .lb-pod .lb-stage, .lb-pod .lb-kinds { justify-content: center; }
.lb-pval b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-pbust { width: 58px; height: 62px; object-fit: contain; }
.lb-step { display: block; width: 100%; height: 44px; margin-top: 8px; border-radius: 14px 14px 4px 4px; border: 1px solid color-mix(in srgb, var(--mc) 42%, transparent); border-bottom: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 30%, transparent), rgba(255,255,255,.015)); }
.lb-pod.p1 .lb-step { height: 72px; } .lb-pod.p3 .lb-step { height: 28px; }
.lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lb-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 8px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--spring), background .25s, border-color .25s; }
.lb-row:hover { transform: translateY(-1px); background: rgba(255,255,255,.07); border-color: rgba(160,130,255,.42); }
.lb-row:focus-visible, .lb-pod:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lb-row.me { border-color: rgba(138,107,255,.7); background: rgba(138,107,255,.13); }
.lb-pos { flex: none; width: 28px; text-align: center; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-av { flex: none; width: 44px; height: 44px; font-size: 19px; }
.lb-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.lb-nm > b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; }
.lb-nm em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent); }
.lb-val { flex: none; text-align: right; }
.lb-val b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-val small, .lb-pval small { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lb-rk { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 12.5px; font-weight: 800; color: var(--rc); white-space: nowrap; }
.lb-rk svg { flex: none; }
.lb-kinds, .pc-kinds { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 9px; }
.lb-kinds i, .pc-kinds i { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 12px; font-weight: 800; color: #d9d3ff; }
.lb-kinds img, .pc-kinds img { width: 24px; height: auto; }
.lb-stage { display: inline-flex; font-size: 12.5px; font-weight: 800; color: #ffcf8a; }
.lb-st { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lb-st .bar-stars i { font-size: 11px; }
.lb-hp { display: inline-flex; justify-content: flex-end; width: 46px; height: 6px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #ff5d73, #ffc94a 55%, #3ddc97); }
.lb-hp i { display: block; height: 100%; background: #26204e; }
.lb-money { color: #9fe3a0; }
.lb-bust { flex: none; width: 50px; height: 54px; object-fit: contain; }
.lb-mine { margin: 18px 0 8px; text-align: center; font-weight: 700; color: var(--muted); }
.lb-note { margin-top: 18px; }
@media (max-width: 520px) {
  .lb-tabs { gap: 3px; padding: 4px; } .lb-tabs button { font-size: 10.5px; padding: 9px 2px 8px; } .lb-tabs svg { width: 19px; height: 19px; }
  .lb-podium { gap: 6px; } .lb-pod .lb-rk { font-size: 11px; gap: 3px; } .lb-pod .lb-rk svg { width: 18px; height: 18px; } .lb-pav { width: 58px; height: 58px; } .lb-pod.p1 .lb-pav { width: 76px; height: 76px; } .lb-pn { font-size: 13.5px; } .lb-pval b { font-size: 16px; }
  .lb-row { gap: 9px; padding: 9px 10px 9px 6px; } .lb-av { width: 38px; height: 38px; } .lb-pos { width: 22px; } .lb-bust { width: 40px; height: 44px; } .lb-val b { font-size: 15px; } }

/* ───────── Carte de joueur (profil) ───────── */
.pc-mine { max-width: 1180px; margin: 0 auto; }
.pcard { --pc: #8a86a8; position: relative; overflow: hidden; padding: 18px; border-radius: 28px; text-align: left;
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--pc) 24%, transparent), transparent 62%), radial-gradient(90% 70% at 100% 100%, rgba(255,107,214,.1), transparent 60%), linear-gradient(160deg, #1d1948, #0f0c28 62%, #150f33);
  border: 1px solid color-mix(in srgb, var(--pc) 45%, rgba(255,255,255,.1)); box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); }
.pcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 2px, transparent 2px 10px); }
.pc-hd { position: relative; display: flex; align-items: center; gap: 16px; margin: 2px 2px 18px; }
.pc-av { position: relative; flex: none; width: 88px; height: 88px; }
.pc-img { width: 100%; height: 100%; font-size: 38px; box-shadow: 0 0 0 3px var(--pc), 0 0 0 7px color-mix(in srgb, var(--pc) 22%, transparent), 0 10px 28px rgba(0,0,0,.5); }
.pc-lv { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(135deg, #8a6bff, #6a4be0); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 4px 12px rgba(110,80,240,.5); }
.pc-id { flex: 1; min-width: 0; }
.pc-id h2 { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.pc-ttl { margin: 5px 0 0; font-size: 14px; font-weight: 800; color: color-mix(in srgb, var(--pc) 70%, #fff); }
.pc-since { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.pc-tro { flex: none; display: flex; flex-direction: column; align-items: center; padding: 9px 12px 8px; border-radius: 16px; color: #ffc93c; background: rgba(255,201,60,.08); border: 1px solid rgba(255,201,60,.3); }
.pc-tro svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-tro b { margin-top: 2px; font-size: 20px; font-weight: 900; line-height: 1.05; color: #fff; } .pc-tro small { font-size: 11px; font-weight: 700; color: var(--muted); }
.pc-grid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pc-t { min-width: 0; display: flex; flex-direction: column; padding: 12px; border-radius: 20px; background: rgba(0,0,0,.24); border: 1px solid var(--line); }
.pc-t h4 { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 11.5px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #cfc9ee; white-space: nowrap; overflow: hidden; }
.pc-t h4 svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-vis { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-radius: 14px; background: rgba(255,255,255,.03); }
.pc-vwork { background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--pc) 34%, transparent), transparent 64%), rgba(255,255,255,.02); }
.pc-vwork .rk-svg { width: 64%; height: auto; }
.pc-lvf { position: absolute; right: 5%; bottom: 4%; width: 31%; } .pc-lvf svg { display: block; width: 100%; height: auto; }
.pc-ret .pc-vis { background: radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--ec) 22%, transparent), transparent 62%), rgba(255,255,255,.02); }
.pc-scene.bar-scene { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; cursor: default; }
.pc-pen { position: absolute; inset: 0; overflow: hidden; background: #0d0a34; }
.pc-sh { position: absolute; height: auto; transform-origin: 50% 100%; animation: pcGraze 3.4s ease-in-out infinite; }
.pc-sh.fl { animation-name: pcGrazeF; }
@keyframes pcGraze { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-3deg); } }
@keyframes pcGrazeF { 0%, 100% { transform: scaleX(-1) rotate(0deg); } 50% { transform: scaleX(-1) rotate(-3deg); } }
.pc-more, .pc-empty { position: absolute; right: 8px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: rgba(10,8,28,.78); border: 1px solid var(--line); }
.pc-empty { right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #cfc9ee; }
.pc-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-height: 20px; margin: 10px 0 2px; font-size: 14.5px; font-weight: 900; line-height: 1.25; }
.pc-name small { font-size: 12px; font-weight: 700; color: var(--muted); }
.pc-big { display: flex; align-items: baseline; gap: 6px; margin: 1px 0 8px; }
.pc-big b { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-big small { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: 0; }
.pc-big b small { margin-left: 5px; }
.pc-kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: auto 0 0; font-size: 12.5px; }
.pc-kv dt { font-weight: 700; color: var(--muted); } .pc-kv dd { margin: 0; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-kv dd small { margin-left: 3px; font-weight: 700; color: var(--muted); }
.pc-bar .lb-st { margin-top: auto; }
.pc-note { max-width: 540px; margin: 12px auto 18px; text-align: center; font-size: 13px; color: var(--muted); }
.pc-load { padding: 60px 0; text-align: center; color: var(--muted); }
.overlay.pc-ov .box { max-width: 790px; padding-top: 16px; }
.pc-modal { padding: 0; background: none; border: 0; box-shadow: none; }
.pc-close { margin-top: 12px; }
@media (max-width: 560px) {
  .pcard { padding: 12px; border-radius: 22px; } .pc-hd { gap: 12px; margin-bottom: 16px; } .pc-av { width: 68px; height: 68px; } .pc-img { font-size: 30px; }
  .pc-id h2 { font-size: 20px; } .pc-ttl { font-size: 12.5px; } .pc-since { font-size: 11.5px; } .pc-tro { padding: 7px 8px 6px; } .pc-tro b { font-size: 16px; }
  .pc-grid { gap: 8px; } .pc-t { padding: 8px; border-radius: 16px; } .pc-t h4 { font-size: 9.5px; letter-spacing: .08em; gap: 5px; margin-bottom: 8px; } .pc-t h4 svg { width: 13px; height: 13px; }
  .pc-name { font-size: 12.5px; margin-top: 8px; } .pc-big b { font-size: 19px; } .pc-big small { font-size: 11px; } .pc-kv { font-size: 11px; gap: 2px 6px; }
  .lb-st { gap: 2px 7px; font-size: 11px; } .pc-kinds img { width: 20px; } }
/* carte de joueur : les nombres ne se coupent jamais (le libellé passe à la ligne s'il le faut) */
.pc-big { flex-wrap: wrap; row-gap: 0; }
.pc-big b, .pc-kv dd { white-space: nowrap; }
.pc-kv { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 560px) { .pc-t h4 { white-space: normal; line-height: 1.2; } .pc-kv { font-size: 10.5px; } .pc-kv dt { line-height: 1.25; } }


/* ───────── Menu : pastille « nouveaux trophées » ───────── */
.rl-ic { position: relative; }
.rl-dot { position: absolute; top: -3px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: #ff5a8c; box-shadow: 0 0 0 2px #0c0a22, 0 0 10px #ff5a8c; animation: rlDot 1.8s ease-in-out infinite; }
.rl-dot[hidden] { display: none; }
@keyframes rlDot { 50% { transform: scale(1.3); } }

/* ───────── Mode de vie : 50 paliers, 5 ères — pierre, bronze, argent, or, prisme ─────────
   La matière de l'ère habille le sceau ET le contour du bloc, et s'anime de plus en plus. */
.lf { display: grid; gap: 34px; padding-top: 6px; }
.lf-top { margin: 0; padding: 13px 18px; border-radius: 16px; font-size: 14px; font-weight: 800; color: #d9d3ff;
  border: 1px solid rgba(184,156,255,.22); background: linear-gradient(120deg, rgba(138,107,255,.14), rgba(90,215,255,.07)); }
.lf-s { position: relative; }
.lf-s + .lf-s { padding-top: 30px; border-top: 1px solid var(--line); }
.lf-sh { margin: 0 0 16px; }
.lf-sh h2 { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 25px; font-weight: 900; letter-spacing: -.025em; }
.lf-sh h2::before { content: ""; width: 5px; height: 26px; border-radius: 3px; background: var(--sc, #8a6bff); box-shadow: 0 0 14px var(--sc, #8a6bff); }
.lf-sh p { margin: 7px 0 0 17px; font-size: 13.5px; color: var(--muted); }
.lf-s.habit { --sc: #4ade9b; }
.lf-s.ban { --sc: #ff7a8f; }
.lf-s.habit .lf-sh h2 { color: #b6f3d1; }
.lf-s.ban .lf-sh h2 { color: #ffc2cb; }
.lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(352px, 1fr)); gap: 16px; }

/* ───────── La page : un bloc par centre d'intérêt, posés sur une grille de 12 colonnes ─────────
   Chaque bloc dit sa largeur (data-sp) : on peut donc composer la page librement au fil des univers ajoutés. */
.lf-board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; align-items: start; }
.lf-board > * { grid-column: span 6; }
.lf-board > [data-sp="4"] { grid-column: span 4; }
.lf-board > [data-sp="8"] { grid-column: span 8; }
.lf-board > [data-sp="12"] { grid-column: span 12; }
@media (max-width: 960px) { .lf-board > * { grid-column: span 12; } }

/* un bloc dans son emplacement, avec sa poignée pour le ranger */
.lf-slot { position: relative; }
.lf-grip { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 11px; cursor: grab; border: 1px solid transparent; background: rgba(255,255,255,.04); color: var(--muted);
  opacity: 0; transition: .18s; touch-action: none; }
.lf-slot:hover .lf-grip, .lf-grip:focus-visible { opacity: 1; }
.lf-grip svg { width: 20px; height: 20px; fill: currentColor; }
.lf-grip:hover { color: var(--text); background: rgba(255,255,255,.1); border-color: var(--line2); }
.lf-slot.drag { cursor: grabbing; transform: rotate(-.5deg) scale(1.012); filter: drop-shadow(0 26px 50px rgba(0,0,0,.6)); }
.lf-slot.drag .lf-grip { opacity: 1; cursor: grabbing; }
body.lb-dragging { cursor: grabbing; user-select: none; }
body.lb-dragging .lf-grip { opacity: 1; }
/* (l'ancien emplacement pointillé .lf-ph du glisser-déposer : remplacé par .dnd-ph, voir v43) */
.lf-void { display: grid; justify-items: center; gap: 9px; text-align: center; padding: 48px 22px; border-radius: 28px;
  border: 1.5px dashed rgba(184,156,255,.28); background: radial-gradient(70% 100% at 50% 0%, rgba(138,107,255,.13), transparent 72%); }
.lf-void-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 21px; background: rgba(255,138,61,.14); }
.lf-void-ic svg { width: 31px; height: 31px; fill: #ff9d55; }
.lf-void b { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.lf-void p { margin: 0; max-width: 46ch; font-size: 13.5px; color: var(--muted); }

/* Bandeau « nouvelle version » : discret, jamais bloquant */
.newver { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 95; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #f5f3ff;
  background: rgba(20,17,48,.95); border: 1px solid rgba(184,156,255,.4); box-shadow: 0 16px 40px rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: nvUp .5s var(--spring) both; }
.newver .btn { padding: 8px 16px; font-size: 13px; }
@keyframes nvUp { from { opacity: 0; transform: translate(-50%, 14px); } }
@media (max-width: 560px) { .newver { left: 12px; right: 12px; transform: none; justify-content: space-between; } 
  @keyframes nvUp { from { opacity: 0; transform: translateY(14px); } } }

/* Le chrono sous les yeux : bouton de la fenêtre flottante */
.tm-pin { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 14px; border-radius: 14px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: .18s; }
.tm-pin svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tm-pin:hover { color: var(--text); border-color: var(--line2); transform: translateY(-1px); }
.tm-pin.on { color: #cbbcff; border-color: rgba(138,107,255,.5); background: rgba(138,107,255,.14); }

/* ───────── Muscle PC : le serpent, son vivarium, le programme et le chrono de séance ───────── */
.pcv { display: block; width: 100%; height: auto; border-radius: 18px; }
.sk-lid { transform-box: fill-box; transform-origin: 50% 0; animation: skBlink 5.4s ease-in-out infinite; }
@keyframes skBlink { 0%, 92%, 100% { transform: scaleY(0); } 95%, 97% { transform: scaleY(1); } }
.pcv .sk-leaf { transform-box: fill-box; transform-origin: 50% 100%; animation: skSway 4.2s ease-in-out infinite; }
@keyframes skSway { 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) {
  .pcv animate, .pcv animateTransform { display: none; }
  .sk-lid, .sk-tongue, .sk-aura, .sk-star, .pcv .sk-leaf { animation: none; }
}
.sk-tongue { transform-origin: left center; animation: skTongue 3.2s ease-in-out infinite; }
@keyframes skTongue { 0%, 86%, 100% { transform: scaleX(.15); opacity: .35; } 90%, 94% { transform: scaleX(1); opacity: 1; } }
.sk-aura { animation: skAura 3.4s ease-in-out infinite; }
@keyframes skAura { 50% { opacity: .55; } }
.sk-star { animation: skStar 2.6s ease-in-out infinite; }
@keyframes skStar { 50% { opacity: .15; } }

.lf-bk.pc { padding: 22px 24px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: radial-gradient(130% 150% at 14% -10%, color-mix(in srgb, var(--c) 14%, transparent), transparent 62%), rgba(16,14,38,.72);
  box-shadow: 0 24px 64px rgba(0,0,0,.45); }
.mp-hd { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.pc-ttl { display: flex; align-items: center; gap: 13px; }
.pc-em { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 26px; flex: none;
  background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.pc-ttl b { display: block; font-size: 20.5px; font-weight: 900; letter-spacing: -.025em; }
.pc-ttl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.pc-pl { display: grid; gap: 1px; padding: 8px 15px; border-radius: 15px; text-align: right; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); transition: .2s; }
.pc-pl:hover { background: color-mix(in srgb, var(--c) 20%, transparent); transform: translateY(-1px); }
.pc-pl i { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pc-pl b { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--c) 45%, #fff); }
.pc-body { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px 30px; align-items: center; margin-top: 16px; }
.pc-view { position: relative; }
.pc-side { display: grid; gap: 14px; }
.pc-cy b { display: block; font-size: 14px; font-weight: 900; color: color-mix(in srgb, var(--c) 40%, #fff); }
.pc-cy span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.pc-pg { display: grid; gap: 6px; }
.pc-pgt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pc-pgt b { font-size: 15px; font-weight: 900; }
.pc-pgt span { font-size: 12.5px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-pgb { height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.pc-pgb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9fe06a, var(--c));
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); transition: width .6s var(--ease); }
.pc-pgn { margin: 0; font-size: 13px; line-height: 1.55; color: #c9c4e8; }
.pc-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pc-b { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 13px; font-weight: 800; transition: .18s; }
.pc-b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-b:not(.go):hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 13%, transparent); }
.pc-b.go { grid-column: 1 / -1; padding: 15px; font-size: 15px; color: #08120d; border: 0;
  background: linear-gradient(120deg, #3fbf6a, #9fe06a 55%, #4fae62); box-shadow: 0 12px 30px rgba(63,191,106,.28); }
.pc-b.go svg { fill: currentColor; stroke: none; width: 19px; height: 19px; }
.pc-b.go:hover { transform: translateY(-3px); filter: brightness(1.08) saturate(1.05);
  background: linear-gradient(120deg, #4fd47c, #b6f08a 55%, #5fc472); box-shadow: 0 16px 38px rgba(63,191,106,.42); }
.pc-b.go:active { transform: translateY(-1px) scale(.99); }
.pc-b.done, .pc-b.rest { grid-column: 1 / -1; color: var(--muted); cursor: default; }
.pc-b.done { border-color: rgba(63,191,106,.4); color: #9fe06a; }
.pc-b.done svg { stroke: currentColor; }
@media (max-width: 900px) { .pc-body { grid-template-columns: minmax(0, 1fr); } }

/* le programme, séance par séance */
.pc-cyc { margin-top: 16px; }
.pc-cyc header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.pc-cn { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; flex: none; font-size: 14px; font-weight: 900; color: #0b1a10;
  background: linear-gradient(150deg, #9fe06a, var(--c)); }
.pc-cyc header b { display: block; font-size: 16px; font-weight: 900; }
.pc-cyc header small { display: block; font-size: 12px; color: var(--muted); }
.pc-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.pc-list li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.pc-list b { display: block; font-size: 14px; font-weight: 800; }
.pc-list small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.pc-list em { font-style: normal; font-size: 12px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 900;
  border: 2px solid rgba(255,255,255,.14); color: var(--muted); }
.pc-list li.done { opacity: .62; } .pc-list li.done .pc-n { background: var(--c); border-color: var(--c); color: #0b1a10; }
.pc-list li.cur { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.pc-list li.cur .pc-n { border-color: var(--c); color: #fff; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.pc-go { padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 900; color: #08120d;
  background: linear-gradient(120deg, #3fbf6a, #9fe06a); }
@media (max-width: 560px) { .pc-list li { grid-template-columns: 26px 1fr; } .pc-list em, .pc-go { grid-column: 2; justify-self: start; } }

/* l'écran d'explication, avant de lancer */
.pc-brief { display: grid; gap: 8px; margin: 14px 0; padding: 0; list-style: none; text-align: left; }
.pc-brief li { position: relative; padding: 11px 14px 11px 40px; border-radius: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.45;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.pc-brief li::before { content: ""; position: absolute; left: 15px; top: 15px; width: 10px; height: 10px; border-radius: 50%;
  background: #4fae62; box-shadow: 0 0 10px rgba(79,174,98,.7); }
.pc-r-meta { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }
.pc-r-meta span { display: flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  border: 1px solid var(--line); background: rgba(0,0,0,.22); }
.pc-r-meta svg { width: 15px; height: 15px; fill: none; stroke: #9fe06a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pc-r-tip { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.pc-r-h p { margin: 2px 0 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--muted); }
.pc-r-dial.pre { --pc: #b7a0ff; }
.pc-r-dial.pre .pc-r-mid b { animation: pcTick .9s var(--spring) infinite; }
@keyframes pcTick { 0% { transform: scale(1.22); opacity: .5; } 40% { transform: none; opacity: 1; } }
.pc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.pc-dots i { width: 22px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); transition: .3s; }
.pc-dots i.done { background: #4fae62; }
.pc-dots i.on { background: #9fe06a; box-shadow: 0 0 12px rgba(159,224,106,.8); transform: scaleY(1.5); }

/* le chrono de séance */
.overlay.mp-ov .box { max-width: 460px; }
.pc-run { text-align: center; }
.pc-r-h small { font-size: 10.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.pc-r-h h2 { margin: 4px 0 4px; font-size: 26px; }
.pc-r-h p { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.pc-r-dial { --pc: #8a6bff; position: relative; width: 210px; height: 210px; margin: 0 auto; }
.pc-r-dial.go { --pc: #ff5d73; } .pc-r-dial.off { --pc: #3ddc97; } .pc-r-dial.pause { --pc: #8a6bff; }
.pc-r-dial.up { --pc: #ffc94a; } .pc-r-dial.down { --pc: #5ad7ff; }
/* overflow visible : sans ça le viewport du SVG coupe le halo au carré */
.pc-r-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pc-tr { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 13; }
.mp-arc { fill: none; stroke: var(--pc); stroke-width: 13; stroke-linecap: round; transition: stroke .35s;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--pc) 90%, transparent)) drop-shadow(0 0 11px color-mix(in srgb, var(--pc) 55%, transparent)); }
/* le halo large est peint par un calque flouté derrière le cadran : un dégradé radial ne se coupe jamais */
.pc-r-dial::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: .5; transition: background .35s;
  background: radial-gradient(closest-side, transparent 58%, color-mix(in srgb, var(--pc) 42%, transparent) 76%, transparent 92%); filter: blur(7px); }
.pc-r-mid b { transition: color .35s; }
.pc-r-mid { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.pc-r-mid b { font-size: 60px; font-weight: 900; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: #fff; }
.pc-r-mid span { font-size: 14px; font-weight: 900; letter-spacing: .04em; color: var(--pc); }
.pc-r-dial.pop { animation: pcPop .45s var(--spring); }
@keyframes pcPop { 40% { transform: scale(1.05); } }
.pc-r-next { margin: 12px 0 0; min-height: 1.3em; font-size: 12.5px; color: var(--muted); }
.pc-r-pg { height: 8px; margin: 10px 0 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.pc-r-pg i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #9fe06a, #4fae62); }
.pc-r-tot { margin: 0 0 14px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-r-act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pc-r-fin { text-align: center; }
.pc-r-fv { margin: -6px 0 12px; }
.pc-r-fin h2 { margin: 0 0 6px; font-size: 24px; }
.pc-r-fin p { margin: 0 0 10px; font-size: 13.5px; }

/* ───────── « En détail » : un onglet par centre d'intérêt, sous le tableau de bord ───────── */
.lf-dt { margin-top: 2px; }
.lf-back { margin: 0 0 14px; padding: 8px 15px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--muted); border: 1px solid var(--line); background: rgba(255,255,255,.03); transition: .18s; }
.lf-back:hover { color: var(--text); border-color: var(--line2); transform: translateX(-2px); }

/* Le bandeau collant : le tableau de bord, puis une page par centre d'intérêt */
.lf-bar { position: sticky; bottom: 12px; z-index: 6; margin-top: 26px; }
.lf-bar-in { display: flex; gap: 6px; overflow-x: auto; padding: 7px; border-radius: 999px; scrollbar-width: none;
  background: rgba(14,12,34,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--line2); box-shadow: 0 18px 44px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.lf-bar-in::-webkit-scrollbar { display: none; }
.lf-bt { display: flex; align-items: center; gap: 8px; flex: none; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: inherit;
  font-size: 13.5px; font-weight: 800; color: var(--muted); border: 1px solid transparent; background: none; transition: .18s; }
.lf-bt svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.lf-bte { font-size: 16px; line-height: 1; }
.lf-bt b { font-weight: 800; white-space: nowrap; }
.lf-bt:hover { color: var(--text); background: rgba(255,255,255,.06); }
.lf-bt.on { color: #fff; border-color: color-mix(in srgb, var(--c, var(--violet)) 60%, transparent);
  background: color-mix(in srgb, var(--c, var(--violet)) 20%, rgba(255,255,255,.04));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c, var(--violet)) 26%, transparent); }
@media (max-width: 640px) { .lf-bt { padding: 9px 13px; font-size: 12.5px; } .lf-bar { bottom: 8px; } }
.lf-pan { position: relative; padding: 24px 26px 26px; border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); overflow: hidden; }
.lf-pan::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--c), transparent 70%); }
.lf-ph { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.lf-pe { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 15px; font-size: 24px;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.lf-ph h3 { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.lf-ph p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* les chiffres */
.lf-sts { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 10px; }
.lf-st { padding: 13px 15px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.lf-st small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lf-st b { display: block; margin-top: 4px; font-size: 19px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.lf-st b small { display: inline; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--muted); }
.lf-st em { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--muted); }

/* les blocs de la fiche */
.lf-sub { margin-top: 26px; }
.lf-sub h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 16px; font-weight: 900; letter-spacing: -.015em; }
.lf-sub h4::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--c); box-shadow: 0 0 10px var(--c); }
.lf-sub > p { margin: 0 0 12px; font-size: 13px; color: var(--muted); max-width: 72ch; }
.lf-lead { margin: 0; padding: 14px 16px; border-radius: 16px; font-size: 14.5px; font-weight: 700; color: #e6e1ff;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
/* la page « en détail » : son bloc en tête, puis des cartes, pas des pavés */
.lf-hero { margin: 0 0 18px; }
.lf-hero .lf-bk { margin: 0; }
.lf-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.lf-rule { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 1px 12px; align-items: center;
  padding: 13px 15px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.lf-rule i { grid-row: span 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-style: normal; font-size: 19px;
  background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); }
.lf-rule b { font-size: 14px; font-weight: 900; letter-spacing: -.01em; }
.lf-rule span { font-size: 12.8px; line-height: 1.5; color: #c4bfe4; }
.lf-gains { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; margin-bottom: 12px; }
.lf-gain { position: relative; padding: 13px 15px 13px 17px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); overflow: hidden; }
.lf-gain::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--c); }
.lf-gain b { display: block; font-size: 14px; font-weight: 900; }
.lf-gain span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.55; color: #c4bfe4; }
.lf-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lf-list li { padding: 13px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.lf-list b { display: block; font-size: 14.5px; font-weight: 800; }
.lf-list span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: #c9c4e8; }
.lf-myth li { border-color: rgba(255,93,115,.22); background: rgba(255,93,115,.05); }
.lf-myth b { color: #ffb3bd; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lf-chips li { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #d8d2f7;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
.lf-note { margin: 12px 0 0; padding: 12px 14px; border-radius: 14px; font-size: 12.8px; line-height: 1.6; color: var(--muted);
  border: 1px dashed rgba(255,255,255,.16); background: rgba(255,255,255,.02); }
.lf-tl { display: grid; gap: 0; margin: 0; padding: 0 0 0 22px; list-style: none; border-left: 2px solid color-mix(in srgb, var(--c) 30%, transparent); }
.lf-tl li { position: relative; padding: 0 0 16px; }
.lf-tl li:last-child { padding-bottom: 0; }
.lf-tl li::before { content: ""; position: absolute; left: -28px; top: 5px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent); }
.lf-tl b { display: block; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 45%, #fff); }
.lf-tl span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: #c9c4e8; }
.lf-steps { counter-reset: st; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lf-steps li { counter-increment: st; position: relative; padding: 13px 16px 13px 54px; border-radius: 16px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.lf-steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 10px; font-size: 13px; font-weight: 900; color: #0b0718;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); }
.lf-steps b { display: block; font-size: 14.5px; font-weight: 800; }
.lf-steps span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: #c9c4e8; }
.lf-sos { padding: 18px 18px 20px; border-radius: 20px; border: 1px solid rgba(255,93,115,.3); background: rgba(255,93,115,.06); }
.lf-sos h4::before { background: #ff5d73; box-shadow: 0 0 10px #ff5d73; }
.lf-90 { counter-reset: u; display: grid; gap: 7px; margin: 12px 0 14px; padding: 0; list-style: none; }
.lf-90 li { counter-increment: u; position: relative; padding: 9px 14px 9px 44px; border-radius: 13px; font-size: 13.5px; font-weight: 700;
  background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07); }
.lf-90 li::before { content: counter(u); position: absolute; left: 12px; top: 8px; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%; font-size: 11px; font-weight: 900; color: #2a0710; background: #ff9aa8; }
.lf-sos .rt-b { width: 100%; border-color: rgba(255,93,115,.45); color: #ffc2cb; }
.lf-soonp { margin: 20px 0 0; font-size: 13.5px; color: var(--muted); }

/* déclencheurs et heures à risque */
.lf-bars { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.lf-bars li { display: grid; grid-template-columns: 116px 1fr 34px; align-items: center; gap: 10px; font-size: 13px; }
.lf-bars span { font-weight: 700; }
.lf-bars i { position: relative; height: 14px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.lf-bars i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); }
.lf-bars em { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #ff5d73, #ff8a9c); }
.lf-bars b { font-size: 13px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.lf-lg { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.lf-lg span { width: 11px; height: 11px; border-radius: 4px; }
.lf-lg1 { background: var(--c); } .lf-lg2 { background: #ff5d73; margin-left: 10px; }
.lf-hrs { display: grid; grid-template-columns: repeat(24, 1fr); align-items: end; gap: 3px; height: 74px;
  padding: 10px 12px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,.2); }
.lf-hrs i { height: max(3px, var(--h)); border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 35%, transparent)); }
.lf-hlb { display: flex; justify-content: space-between; margin-top: 5px; font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .lf-pan { padding: 18px 16px 20px; }
  .lf-bars li { grid-template-columns: 92px 1fr 28px; gap: 8px; font-size: 12px; }
}

/* ── Rétention séminale : le feu. L'anneau qui s'embrase à gauche, tout ce qui compte à droite. ── */
.lf-bk { position: relative; border-radius: 28px; }
.lf-bk.rt { padding: 22px 24px 22px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--ec) 38%, transparent);
  background: radial-gradient(130% 150% at 14% -10%, color-mix(in srgb, var(--ec) 15%, transparent), transparent 60%), rgba(16,14,38,.72);
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 46px color-mix(in srgb, var(--ec) 10%, transparent); }
.rt-bg { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(48% 70% at 16% 118%, color-mix(in srgb, var(--ec) 24%, transparent), transparent 70%); }
.rt-hd { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rt-ttl { display: flex; align-items: center; gap: 13px; min-width: 0; }
.rt-em { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ec) 36%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--ec) 45%, transparent); }
.rt-em svg { width: 25px; height: 25px; fill: var(--ec); filter: drop-shadow(0 0 9px var(--ec)); }
.rt-ttl b { display: block; font-size: 20.5px; font-weight: 900; letter-spacing: -.025em; }
.rt-ttl small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.rt-pl { display: grid; gap: 1px; padding: 8px 15px; border-radius: 15px; text-align: right; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid color-mix(in srgb, var(--ec) 40%, transparent); background: color-mix(in srgb, var(--ec) 12%, transparent); transition: .2s; }
.rt-pl:hover { background: color-mix(in srgb, var(--ec) 20%, transparent); transform: translateY(-1px); }
.rt-pl i { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rt-pl b { font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--ec) 45%, #fff); }
.rt-body { position: relative; display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: center; gap: 4px 44px; }
.rt-ring { display: block; justify-self: center; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .45s var(--spring); }
.rt-ring:hover { transform: translateY(-3px); }
.rt-ring:focus-visible { outline: 2px solid var(--ec); outline-offset: 8px; border-radius: 50%; }
.rt-ring .en-ring { --D: 320px; margin: 26px auto 30px; }
.rt-side { display: grid; gap: 13px; width: 100%; }
.rt-fx { margin: 0; font-size: 14.5px; font-weight: 700; color: color-mix(in srgb, var(--ec) 34%, #fff); }
.rt-pg { display: grid; gap: 6px; }
.rt-pgt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rt-pgt b { font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rt-pgt span { font-size: 14.5px; font-weight: 900; color: #fff; }
.rt-pgb { height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); }
.rt-pgb i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd45e, var(--ec));
  box-shadow: 0 0 16px color-mix(in srgb, var(--ec) 60%, transparent); transition: width .6s var(--ease); }
.rt-nx { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rt-nx b { font-size: 13px; font-weight: 900; color: color-mix(in srgb, var(--ec) 45%, #fff); }
.rt-nx span { margin-left: 8px; }
.rt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.rt-stats > div { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.rt-stats small { display: block; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.rt-stats b { display: block; margin-top: 3px; font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rt-act { display: grid; grid-template-columns: repeat(auto-fit, minmax(134px, 1fr)); gap: 8px; }
.rt-b { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 13px; font-weight: 800; transition: .18s; }
.rt-b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rt-b:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ec) 55%, transparent); background: color-mix(in srgb, var(--ec) 13%, transparent); }
.rt-b.bad { border-color: rgba(255,93,115,.38); color: #ff9aa8; }
.rt-b.bad:hover { border-color: #ff5d73; background: rgba(255,93,115,.14); }
.rt-x { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: 0; border-radius: 12px; cursor: pointer;
  background: none; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; transition: .18s; }
.rt-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rt-x:hover { color: #ff9aa8; background: rgba(255,93,115,.1); }
.rt-x.armed { color: #fff; background: #ff5d73; }
@media (max-width: 860px) {   /* l'anneau passe au-dessus et se met à la largeur qui reste */
  .rt-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rt-ring { width: 100%; }
  .rt-ring .en-ring { --D: min(300px, calc(100vw - 160px)); margin: 18px auto 22px; }
  .rt-pl { text-align: left; }
}
@media (max-width: 560px) {   /* les trois chiffres passent en lignes : libellé à gauche, valeur à droite */
  .lf-bk.rt { padding: 18px 16px; }
  .rt-stats { grid-template-columns: 1fr; gap: 7px; }
  .rt-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
  .rt-stats b { margin-top: 0; }
}

/* Le seul bouton de la page : « Ajouter des centres d'intérêt » */
.lf-add { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 18px; border: 0; border-radius: 20px;
  font: inherit; text-align: left; cursor: pointer; color: #0c0722; position: relative; overflow: hidden;
  background: linear-gradient(120deg, #8a6bff, #d8ccff 55%, #a78bfa); box-shadow: 0 12px 34px rgba(138,107,255,.32);
  transition: transform .22s var(--spring), box-shadow .25s, filter .2s; }
.lf-add::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%) 160% 0 / 260% 100% no-repeat; }
.lf-add:hover { transform: translateY(-3px); filter: brightness(1.05); }
.lf-add:hover::after { animation: lfAddShine .9s ease-out; }
@keyframes lfAddShine { to { background-position: -120% 0; } }
.lf-add:active { transform: scale(.985); }
.lf-ad-ic, .lf-ad-p { display: grid; place-items: center; flex: none; border-radius: 14px; background: rgba(0,0,0,.14); }
.lf-ad-ic { width: 44px; height: 44px; }
.lf-ad-p { width: 36px; height: 36px; margin-left: auto; }
.lf-add svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lf-ad-t b { display: block; font-size: 16.5px; font-weight: 900; letter-spacing: -.01em; }
.lf-ad-t small { display: block; font-size: 12.5px; font-weight: 700; opacity: .72; margin-top: 1px; }

/* Le sceau : 25 dessins, un nouveau tous les 2 paliers. Les ornements viennent du SVG, les mouvements d'ici. */
.lf-sl { display: block; overflow: visible; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.lf-sl text { paint-order: stroke; }
.lf-sl .sl-ring { transform-origin: 60px 60px; }
.lf-sl .sl-ring.spin { animation: lfSpinSlow 30s linear infinite; }
.lf-sl.rk15 .sl-ring.spin, .lf-sl.rk16 .sl-ring.spin, .lf-sl.rk17 .sl-ring.spin { animation-duration: 24s; }
.lf-sl.rk18 .sl-ring.spin, .lf-sl.rk19 .sl-ring.spin, .lf-sl.rk20 .sl-ring.spin { animation-duration: 20s; }
.lf-sl.rk21 .sl-ring.spin, .lf-sl.rk22 .sl-ring.spin, .lf-sl.rk23 .sl-ring.spin, .lf-sl.rk24 .sl-ring.spin { animation-duration: 15s; }
@keyframes lfSpinSlow { to { transform: rotate(360deg); } }
.lf-sl .sl-halo, .lf-sl .sl-halo2 { transform-origin: 60px 60px; animation: lfBreathe 3.6s ease-in-out infinite; }
.lf-sl .sl-halo2 { animation: lfSpinSlow 18s linear infinite reverse; }
@keyframes lfBreathe { 50% { opacity: .95; transform: scale(1.04); } }
.lf-sl .sl-rays { transform-origin: 60px 60px; animation: lfSpinSlow 60s linear infinite; }
.lf-sl .sl-orb { transform-origin: 60px 60px; animation: lfSpinSlow 22s linear infinite; }
.lf-sl .sv-sp { transform-box: fill-box; transform-origin: 50% 50%; animation: lfTwinkle 2.4s ease-in-out infinite; }
@keyframes lfTwinkle { 0%, 100% { opacity: .3; transform: scale(.65); } 50% { opacity: 1; transform: scale(1.2); } }
.lf-sl .sl-p.on { filter: drop-shadow(0 0 4px var(--m)); }
.lf-sl.pulse { animation: lfSealPulse 2.8s ease-in-out infinite; }
@keyframes lfSealPulse { 50% { filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)) drop-shadow(0 0 14px var(--m)); } }
.lf-sl.iris .sl-ring, .lf-sl.iris .sl-rays, .lf-sl.iris .sl-orb, .lf-sl.iris .sl-w1, .lf-sl.iris .sl-w2 { animation-name: lfSpinSlow, lfIris; animation-duration: 15s, 8s; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; }
.lf-sl.iris .sl-rays { animation-duration: 60s, 8s; }
.lf-sl.iris .sl-orb { animation-duration: 22s, 8s; }
.lf-sl.iris .sl-w1, .lf-sl.iris .sl-w2 { animation-name: lfIris; animation-duration: 8s; }
@keyframes lfIris { to { filter: hue-rotate(360deg); } }

/* La carte d'une ligne — son contour porte la même matière que le sceau */
.lf-c { position: relative; padding: 19px 19px 16px; border-radius: 24px; border: 1.5px solid color-mix(in srgb, var(--m) 42%, transparent);
  background: linear-gradient(155deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); transition: transform .25s var(--ease), border-color .3s, box-shadow .3s; }
.lf-c:hover { transform: translateY(-2px); }
.lf-c.in { animation: lfIn .6s var(--spring); }
@keyframes lfIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.lf-c.up { animation: lfUp 1.1s var(--ease); }
@keyframes lfUp { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 60% { box-shadow: 0 0 0 16px transparent; } }
.lf-c.era-up { animation: lfEraUp 2.2s var(--ease); }
@keyframes lfEraUp { 0% { box-shadow: 0 0 0 0 var(--m); transform: scale(1); } 18% { transform: scale(1.02); } 70% { box-shadow: 0 0 0 26px transparent; } }

/* Le contour : équerres aux angles, matière de l'ère, de plus en plus vivant */
.lf-frm { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lf-frm i { position: absolute; width: 30px; height: 30px; border: 0 solid var(--m); }
.lf-frm i:nth-child(1) { left: -1.5px; top: -1.5px; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 24px; }
.lf-frm i:nth-child(2) { right: -1.5px; top: -1.5px; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 24px; }
.lf-frm i:nth-child(3) { right: -1.5px; bottom: -1.5px; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 24px; }
.lf-frm i:nth-child(4) { left: -1.5px; bottom: -1.5px; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 24px; }
.lf-frm i::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 2px; transform: rotate(45deg) scale(0);
  background: var(--h); box-shadow: 0 0 8px var(--m); transition: transform .35s var(--spring); }
.lf-frm i:nth-child(1)::after { left: 8px; top: 8px; } .lf-frm i:nth-child(2)::after { right: 8px; top: 8px; }
.lf-frm i:nth-child(3)::after { right: 8px; bottom: 8px; } .lf-frm i:nth-child(4)::after { left: 8px; bottom: 8px; }
.lf-c.era2 { border-color: color-mix(in srgb, var(--m) 62%, transparent); }
.lf-c.era3, .lf-c.era4, .lf-c.era5 { border-color: color-mix(in srgb, var(--m) 78%, transparent); }
.lf-c.era3 .lf-frm::before, .lf-c.era4 .lf-frm::before, .lf-c.era5 .lf-frm::before {
  content: ""; position: absolute; inset: 6px; border-radius: 19px; border: 1px solid color-mix(in srgb, var(--h) 24%, transparent); }
.lf-c.era3 { box-shadow: 0 0 26px color-mix(in srgb, var(--m) 14%, transparent); }
.lf-c.era4 { box-shadow: 0 0 34px color-mix(in srgb, var(--m) 22%, transparent); }
.lf-c.era5 { box-shadow: 0 0 46px color-mix(in srgb, var(--m) 30%, transparent), inset 0 0 30px color-mix(in srgb, var(--m) 8%, transparent); }
.lf-c.era4 .lf-frm i::after, .lf-c.era5 .lf-frm i::after { transform: rotate(45deg) scale(1); }
.lf-c.era4 .lf-frm, .lf-c.era5 .lf-frm { overflow: hidden; border-radius: inherit; }
.lf-c.era4 .lf-frm::after, .lf-c.era5 .lf-frm::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, var(--h) 50%, transparent 68%) 150% 0 / 300% 100% no-repeat;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: lfSweep 4.2s linear infinite; }
.lf-c.era5 .lf-frm::after { animation-duration: 3s; }
@keyframes lfSweep { to { background-position: -150% 0; } }
.lf-c.era5 { animation: lfIrisCard 7s linear infinite; }
@keyframes lfIrisCard { to { --m: var(--m); } }

.lf-hd { position: relative; display: flex; align-items: center; gap: 14px; }
.lf-bg { flex: none; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; transition: transform .25s var(--spring); }
.lf-bg:hover { transform: scale(1.06) rotate(-2deg); }
.lf-id { flex: 1; min-width: 0; }
.lf-nm { margin: 0; font-size: 18px; font-weight: 900; letter-spacing: -.015em; }
.lf-stn { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; margin: 3px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; }
.lf-stn:hover b { text-decoration: underline; text-underline-offset: 3px; }
.lf-stn i { font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); width: 100%; }
.lf-stn b { font-size: 15px; font-weight: 900; color: color-mix(in srgb, var(--c) 55%, #fff 45%); }
.lf-stn em { font-style: normal; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  color: var(--d); background: var(--m); }
.lf-d { margin: 5px 0 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.lf-d b { font-size: 17px; font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

/* La progression vers le palier suivant : même épaisseur du début à la fin */
.lf-pg { position: relative; margin: 15px 0 0; }
.lf-pgt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 7px; font-size: 11.5px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; }
.lf-pgt b { color: color-mix(in srgb, var(--c) 60%, #fff 40%); }
.lf-pgt span { color: var(--muted); text-align: right; }
.lf-pgb { position: relative; height: 18px; border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.07);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.06); }
.lf-pgb i { position: absolute; top: 0; bottom: 0; left: 0; width: var(--p, 0%); min-width: 14px; border-radius: 10px; transition: width .9s var(--ease);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff 30%), var(--c) 45%, color-mix(in srgb, var(--c) 72%, #000));
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
.lf-pgb i::after { content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%) 150% 0 / 300% 100% no-repeat;
  animation: lfSweep 2.8s linear infinite; }
.lf-pgn { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }

/* Habitude : les 7 derniers jours, cochables d'un doigt */
.lf-wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 0; }
.lf-dy { display: grid; justify-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--muted); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.lf-dy:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 70%, transparent); }
.lf-dy small { font-size: 10px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.lf-dy i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.16); transition: background .25s, border-color .25s; }
.lf-dy i svg { width: 12px; height: 12px; fill: none; stroke: #07130d; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.lf-dy.on { color: #fff; }
.lf-dy.on i { background: #3ddc97; border-color: #3ddc97; box-shadow: 0 0 12px rgba(61,220,151,.6); }
.lf-dy.now { border-color: color-mix(in srgb, var(--c) 45%, transparent); }
.lf-dy.now small { color: color-mix(in srgb, var(--c) 60%, #fff 40%); }

/* Le geste du jour */
.lf-act { position: relative; display: flex; align-items: center; gap: 7px; margin-top: 14px; }
.lf-go { display: flex; align-items: center; justify-content: center; gap: 9px; flex: 1; min-width: 0; padding: 13px 14px; border-radius: 15px; border: 0;
  background: linear-gradient(120deg, #22c98a, #5ef0b5 60%, #2fd48a); color: #07130d; font: inherit; font-size: 14.5px; font-weight: 900;
  letter-spacing: -.01em; cursor: pointer; transition: transform .18s var(--spring), filter .2s, box-shadow .25s;
  box-shadow: 0 10px 24px rgba(47,212,138,.26), inset 0 1px 0 rgba(255,255,255,.45); }
.lf-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lf-go:hover { transform: translateY(-2px); filter: brightness(1.06); }
.lf-go:active { transform: scale(.97); }
.lf-go.done { background: rgba(61,220,151,.1); color: #7ef2c0; box-shadow: inset 0 0 0 1.5px rgba(61,220,151,.4); }
.lf-go.red { background: rgba(255,255,255,.05); color: #cfc9ee; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.14); }
.lf-go.red svg { stroke-width: 2.2; }
.lf-go.red:hover { background: rgba(255,93,115,.16); color: #ff9aa8; box-shadow: inset 0 0 0 1.5px rgba(255,93,115,.5); }
.lf-b { display: grid; place-items: center; width: 42px; height: 42px; flex: none; padding: 0; border-radius: 13px; border: 1px solid var(--line2);
  background: rgba(255,255,255,.04); color: #c9c3ec; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.lf-b svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lf-b:hover { border-color: color-mix(in srgb, var(--m) 70%, transparent); color: #fff; }
.lf-b.x { color: var(--muted); }
.lf-b.x:hover { border-color: #ff5d73; color: #ff9aa8; }
.lf-b.x.armed { background: #ff5d73; border-color: #ff5d73; color: #fff; }

/* Le catalogue */
.lf-cat { max-width: 560px; }
.lf-fam { margin-top: 18px; }
.lf-fam h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 3px; font-size: 16px; font-weight: 900; letter-spacing: -.015em; }
.lf-fam h3::before { content: ""; width: 4px; height: 17px; border-radius: 2px; background: var(--fc); box-shadow: 0 0 10px var(--fc); }
.lf-fam.do { --fc: #3ddc97; } .lf-fam.stop { --fc: #ff5d73; }
.lf-fam > p { margin: 0 0 10px 13px; font-size: 12.5px; color: var(--muted); }
.lf-pick.stop:hover { border-color: #ff5d73; }
.lf-sn em { font-style: normal; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-left: 2px; }
.lf-ch { margin: 16px 0 8px; font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* Les choix se présentent comme les « bientôt » : des puces, pas des cartes. */
.lf-picks { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.lf-pick { display: flex; flex-direction: row; align-items: center; gap: 7px; padding: 7px 13px 7px 10px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(255,255,255,.04); color: #d9d3ff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.lf-pick:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); transform: translateY(-1px); }
.lf-pick .lf-pe { width: auto; height: auto; border-radius: 0; background: none; border: 0; font-size: 15px; line-height: 1; }
.lf-pick b { font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.lf-pick small { display: none; }
.lf-pick::after { content: "+"; margin-left: 1px; font-size: 13px; font-weight: 900; color: var(--c); }
.lf-soon { display: flex; flex-wrap: wrap; gap: 7px; }
.lf-sn { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--muted);
  border: 1px dashed color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 7%, transparent); }
.lf-sn i { font-style: normal; font-size: 14px; filter: grayscale(.35); opacity: .8; }

/* Les 50 paliers, rangés par ère */
.lf-st { max-width: 560px; }
.ls-wrap { max-height: 58vh; overflow: auto; margin-top: 14px; padding-right: 4px; display: grid; gap: 14px; }
.ls-era { border-radius: 20px; border: 1px solid var(--line); padding: 12px 14px 10px; opacity: .55; transition: opacity .3s; }
.ls-era.done { opacity: .85; }
.ls-era.cur { opacity: 1; border-color: color-mix(in srgb, var(--c) 55%, transparent); background: rgba(255,255,255,.03); }
.ls-era > header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ls-sl { flex: none; line-height: 0; }
.ls-era header b { display: block; font-size: 16px; font-weight: 900; }
.ls-era header small { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.overlay.lf-ov .box { max-width: 660px; }
.ls-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 5px; }
.ls-list li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 9px; border-radius: 11px; background: rgba(255,255,255,.03); font-size: 12.5px; }
.ls-list li.done { color: #cfc9ee; }
.ls-list li.cur { background: color-mix(in srgb, var(--c) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); }
.ls-n { flex: none; display: grid; place-items: center; min-width: 26px; height: 20px; border-radius: 6px; background: rgba(255,255,255,.07);
  font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.ls-list b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-list small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lf-here { padding: 2px 7px; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  background: var(--c); color: #0b0920; }
@media (max-width: 560px) { .lf-grid { grid-template-columns: minmax(0, 1fr); } .lf-sh h2 { font-size: 21px; } .ls-list { grid-template-columns: 1fr; } }

/* Récap de la veille, au moment de valider la nuit */
.overlay.rc-ov .box { max-width: 560px; }
.rc-list { max-height: 46vh; overflow: auto; margin-top: 10px; padding-right: 4px; }
.rc-n { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.rc-n b { color: #d9d3ff; }
.rc-n b.green { color: #7ef2c0; }
.quest.pickq { cursor: pointer; }
.quest.pickq:hover { border-color: rgba(184,156,255,.6); }
.nd-day { margin: -4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.sl-cal { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 0 14px; }
.sl-cal svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sl-cal i { font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #b89cff; background: rgba(138,107,255,.16); }

/* ───────── Le calendrier d'historique, façon Streaks ───────── */
.cal-modal { max-width: 420px; }
.cal { margin-top: 14px; }
.cal-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal-hd b { font-size: 15.5px; font-weight: 900; text-transform: capitalize; }
.cal-hd button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 11px; border: 1px solid var(--line2);
  background: rgba(255,255,255,.04); color: #d9d3ff; font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .2s, background .2s; }
.cal-hd button:hover:not(:disabled) { border-color: var(--c); }
.cal-hd button:disabled { opacity: .3; cursor: default; }
.cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-w { display: grid; place-items: center; height: 24px; font-size: 10.5px; font-weight: 900; letter-spacing: .08em; color: var(--muted); }
.cal-d { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03); color: rgba(255,255,255,.55); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
  transition: background .25s, border-color .25s, color .25s, transform .2s; }
.cal-d:hover:not(:disabled) { transform: scale(1.1); border-color: var(--c); }
.cal-d:disabled { opacity: .22; cursor: default; }
.cal-d.ok { background: var(--c); border-color: var(--c); color: #0b0920; box-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.cal-d.start { box-shadow: 0 0 0 2px #fff inset, 0 0 12px color-mix(in srgb, var(--c) 55%, transparent); }
.cal-d.ko { background: rgba(255,93,115,.16); border-color: rgba(255,93,115,.5); color: #ff9aa8; }
.cal-d.none { border-style: dashed; }
.cal-d.now { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
.cal-tip { margin: 14px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.cal-modal { max-height: 86vh; overflow: auto; }
@media (max-width: 480px) { .overlay .box { padding: 16px 12px; } .cal-g { gap: 4px; } .cal-d { font-size: 12px; } }

.lb-stale .lb-p, .lb-stale .lb-list { opacity: .45; transition: opacity .2s; }   /* le temps que le nouveau classement arrive */
/* Classement : portée (publique / amis) et choix de la ligne de vie */
.lb-scope { display: inline-flex; gap: 4px; margin: 0 auto 12px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.lb-scope button { padding: 7px 16px; border: 0; border-radius: 10px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; transition: background .25s, color .25s; }
.lb-scope button.on { background: linear-gradient(135deg, #8a6bff, #6a4be0); color: #fff; }
.lb-lines { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
.lb-line { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(255,255,255,.04); color: #cfc9ee; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.lb-line:hover { border-color: var(--c); }
.lb-line.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); color: #fff; }
.lb .lb-scope, .lb .lb-lines { display: flex; }
.lb .lb-scope { width: max-content; }

/* La vie du joueur en haut de sa carte */
.pc-life { position: relative; margin: 0 0 14px; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.pc-life .av-sc { display: block; width: 100%; height: auto; }
.pc-life-b { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: rgba(0,0,0,.3); }
.pc-life-b > div { flex: none; text-align: center; }
.pc-life-b small { display: block; font-size: 9.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pc-life-b b { font-size: 21px; font-weight: 900; letter-spacing: -.03em; }
.pc-life-b b i { font-style: normal; font-size: 11px; color: var(--muted); }
.pc-life-b p { margin: 0; font-size: 12.5px; color: #cfc9ee; text-align: left; }
.pc-life.divine { border-color: rgba(255,210,63,.5); box-shadow: 0 0 34px rgba(255,210,63,.24); }

/* ───────── Amis : demandes, liste et conversation ───────── */
.mt { display: grid; gap: 30px; padding-top: 4px; }
.mt-s h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 21px; font-weight: 900; letter-spacing: -.02em; }
.mt-s h2 i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font-style: normal;
  font-size: 12px; font-weight: 900; background: rgba(138,107,255,.24); color: #d9d3ff; }
.mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.mt-c { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 18px; border: 1px solid var(--line);
  background: rgba(255,255,255,.035); transition: border-color .2s, background .2s; }
.mt-c:hover { border-color: rgba(184,156,255,.45); }
.mt-id { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mt-av { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.mt-id b { display: block; font-size: 15px; font-weight: 800; }
.mt-sub { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30ch; }
.mt-b { display: flex; align-items: center; gap: 6px; flex: none; }
.mt-b .btn.sm { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12.5px; border-radius: 12px; }
.mt-b .btn.sm svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mt-b .mt-x { padding: 7px 9px; }
.mt-b .mt-x.armed { background: #ff5d73; border-color: #ff5d73; color: #fff; }
.mt-wait { font-size: 12px; color: var(--muted); }
.rl-badge { position: absolute; top: -3px; right: -5px; display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 900; background: #ff5d73; color: #fff; box-shadow: 0 0 0 2px #0b0920; }

@media (max-width: 560px) { .mt-grid { grid-template-columns: minmax(0, 1fr); } .mt-sub { max-width: 22ch; } }

/* ───────── Mon avatar : sa vie entière, dessinée par ses statistiques ───────── */
.av-stage { position: relative; overflow: hidden; padding: 0; border-radius: 26px; }
.av-sc { display: block; width: 100%; height: auto; }
.av-cap { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: rgba(0,0,0,.28); border-top: 1px solid var(--line); }
.av-cap > div { flex: none; text-align: center; }
.av-cap small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.av-cap b { font-size: 26px; font-weight: 900; letter-spacing: -.03em; }
.av-cap b i { font-style: normal; font-size: 13px; color: var(--muted); }
.av-next, .av-god { margin: 0; font-size: 13.5px; color: #cfc9ee; }
.av-next b { color: #fff; }
.av-god { font-weight: 900; letter-spacing: .06em; color: #ffe9a8; text-shadow: 0 0 18px rgba(255,210,63,.6); }
.av-stage.divine { box-shadow: 0 0 60px rgba(255,210,63,.3); border-color: rgba(255,210,63,.45); }
.av-sc .av-rays { transform-origin: 400px 250px; animation: avSpin 42s linear infinite; }
.av-sc .av-halo { animation: avHalo 3.4s ease-in-out infinite; transform-origin: 410px 168px; }
.av-sc .av-spark path { transform-box: fill-box; transform-origin: 50% 50%; animation: avTw 2.8s ease-in-out infinite; animation-delay: calc(var(--k, 0) * 180ms); }
@keyframes avSpin { to { transform: rotate(360deg); } }
@keyframes avHalo { 50% { transform: scale(1.08); opacity: .75; } }
@keyframes avTw { 0%, 100% { opacity: .25; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.25); } }
.av-slip { margin: 14px 0 0; padding: 11px 15px; border-radius: 14px; font-size: 13px; color: #ffc2cb;
  border: 1px solid rgba(255,93,115,.3); background: rgba(255,93,115,.08); }
.av-slip b { color: #fff; }
.av-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.av-st { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.av-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.av-sh b { font-size: 14.5px; font-weight: 800; }
.av-sh i { font-style: normal; font-size: 17px; font-weight: 900; color: var(--c); font-variant-numeric: tabular-nums; }
.av-sb { height: 10px; margin: 7px 0 6px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,.45); }
.av-sb span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #0b0920), var(--c));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); transition: width .8s var(--ease); }
.av-sf { margin: 0; font-size: 11.5px; color: var(--muted); }
.av-sf small { font-size: 10px; opacity: .75; }
.avp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.avp-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.avp-list b { font-size: 14.5px; }
.avp-list span { flex: 1; min-width: 180px; font-size: 13px; color: var(--muted); }
.av-lv { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: #d9d3ff; background: rgba(138,107,255,.2); }

/* ───────── Tâches : une seule journée à l'écran, dans l'esprit de Rappels ───────── */
.tsk { max-width: 1180px; margin: 0 auto; padding-bottom: 20px; }

/* La barre du haut : date, onglets, compteur de tâches faites. Rien d'autre. */
.tk-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tk-date { margin: 0; flex: 1; min-width: 0; font-size: 14.4px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; color: #b89cff; }
.tk-tabs { display: flex; gap: 4px; flex: none; padding: 4px; border-radius: 15px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.tk-tabs button { display: flex; align-items: center; gap: 8px; padding: 7px 18px; border: 0; border-radius: 11px; background: none; color: var(--muted);
  font: inherit; font-size: 16.2px; font-weight: 800; cursor: pointer; transition: background .25s, color .25s; }
.tk-tabs button i { font-style: normal; font-size: 13.2px; font-weight: 900; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); }
.tk-tabs button:hover { color: #fff; }
.tk-tabs button.on { background: linear-gradient(135deg, #8a6bff, #6a4be0); color: #fff; box-shadow: 0 6px 18px rgba(110,80,240,.42); }
.tk-tabs button.on i { background: rgba(0,0,0,.26); }
.tk-score { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; cursor: default; }
.tk-score svg { width: 30px; height: 30px; transform: rotate(-90deg); flex: none; }
.tk-score .bg { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 4; }
.tk-score .fg { fill: none; stroke: #b7a0ff; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .7s var(--ease), stroke .4s; }
.tk-score b { font-size: 18px; font-weight: 900; }
.tk-score small { font-size: 14.4px; color: var(--muted); font-weight: 800; }
.tk-score.gold .fg { stroke: #ffc94a; filter: drop-shadow(0 0 7px rgba(255,201,74,.8)); }
.tk-score.gold b { color: #ffd98a; }

/* Sections : l'obsession, puis un bloc par projet */
.tk-sec { margin-bottom: 24px; }
.tk-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 9px; padding: 0 8px; font-size: 14.4px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tk-sec h3 small { font-size: 13.2px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: rgba(165,162,204,.75); }
.tk-sec h3 svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.tk-focus h3 { color: #ffd98a; } .tk-focus h3 svg { fill: #ffc94a; stroke: none; }
.tk-fold { cursor: pointer; } .tk-fold svg { transition: transform .3s var(--ease); }
.tk-donesec.open .tk-fold svg { transform: rotate(180deg); }
.tk-grp h3 { color: #d9d3ff; font-size: 15.6px; letter-spacing: .05em; text-transform: none; }
.tk-grp h3 .tk-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pc, #6b6790); flex: none; box-shadow: 0 0 10px var(--pc, transparent); }
.tk-grp h3 small { margin-left: auto; font-variant-numeric: tabular-nums; }
.tk-ul { list-style: none; margin: 0; padding: 0; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.tk-grp .tk-ul { border-left: 2px solid color-mix(in srgb, var(--pc, #6b6790) 55%, transparent); }
.tk-focus .tk-ul { border-color: rgba(255,201,74,.3); background: linear-gradient(180deg, rgba(255,201,74,.07), rgba(255,255,255,.02)); }

/* Une tâche */
.tkit { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .2s; }
.tk-ul > li:last-child { border-bottom: 0; }
.tkit:hover { background: rgba(255,255,255,.04); }
.tk-ck { flex: none; width: 27px; height: 27px; padding: 0; border: 0; background: none; cursor: pointer; }
.tk-ck svg { width: 100%; height: 100%; overflow: visible; }
.tk-ck .ck-r { fill: none; stroke: var(--pc, #7d76b5); stroke-width: 2; transition: stroke .2s, fill .35s; }
.tk-ck .ck-m { fill: none; stroke: #0b0920; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s var(--ease) .05s; }
.tk-ck:hover .ck-r { stroke: var(--pc, #b7a0ff); }
.tkit.vital .ck-r { stroke: #ffc94a; stroke-width: 2.4; }
.tkit.done .ck-r { fill: var(--pc, #8a6bff); stroke: var(--pc, #8a6bff); }
.tkit.vital.done .ck-r { fill: #ffc94a; stroke: #ffc94a; }
.tkit.done .ck-m { stroke-dashoffset: 0; }
.tkit.tk-crown { animation: tkCrown .64s var(--spring); z-index: 3; }
@keyframes tkCrown { 0% { transform: scale(1); } 34% { transform: scale(1.02); box-shadow: inset 0 0 0 2px rgba(255,201,74,.85), 0 0 42px rgba(255,201,74,.4); } 100% { transform: scale(1); } }
.tkit.tk-crown .tk-v svg { animation: tkStar .64s var(--spring); transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes tkStar { 40% { transform: scale(1.8) rotate(20deg); } 100% { transform: scale(1) rotate(0); } }
.tkit.tk-newobs { animation: tkObs 1.15s var(--ease); }
@keyframes tkObs { 0% { background: rgba(255,201,74,.32); } 100% { background: transparent; } }
.tkit.tk-newobs::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5), transparent 70%); background-size: 240% 100%; animation: tkShine 1.1s var(--ease); }
@keyframes tkShine { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.tkit.pop .tk-ck { animation: tkPop .55s var(--spring); }
@keyframes tkPop { 30% { transform: scale(1.35); } 62% { transform: scale(.93); } }
.tkit.pop::after { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -13.5px; width: 27px; height: 27px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px var(--pc, #b7a0ff), 0 0 18px var(--pc, #8a6bff); animation: tkRing .65s ease-out forwards; }
.tkit.vital.pop::after { box-shadow: 0 0 0 2px #ffc94a, 0 0 22px #ffc94a; }
@keyframes tkRing { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.5); opacity: 0; } }
.tk-b { flex: 1; min-width: 0; }
.tk-t { display: block; font-size: 18.6px; line-height: 1.35; cursor: text; overflow-wrap: anywhere; transition: color .3s; }
.tkit.vital .tk-t { font-size: 20.4px; font-weight: 700; letter-spacing: -.01em; }
.tkit.done .tk-t { color: rgba(255,255,255,.32); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.28); }
.tk-ed { width: 100%; height: 26px; padding: 0; border: 0; border-bottom: 1px solid rgba(184,156,255,.6); background: none; color: #fff; font: inherit; font-size: 18.6px; outline: none; }
.tk-ed:focus { background: none; box-shadow: none; border-bottom: 1px solid rgba(184,156,255,.6); }
.tk-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.tk-pj { display: inline-flex; align-items: center; gap: 5px; font-size: 13.2px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  color: var(--pc, #b89cff); background: color-mix(in srgb, var(--pc, #8a6bff) 16%, transparent); }
.tk-tag, .tk-late { font-size: 13.2px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.tk-tag { color: #9ad9ff; background: rgba(90,215,255,.13); }
.tk-late { color: #ffb08a; background: rgba(255,138,61,.15); }
.tkit.rot .tk-late { color: #ff9aa8; background: rgba(255,93,115,.17); }
.tk-c { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.tkit:hover .tk-c, .tkit:focus-within .tk-c { opacity: 1; }
@media (hover: none) { .tk-c { opacity: .6; } }
.tk-c button, .tk-co .tk-v, .tk-co .co-x { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.tk-c button:hover, .tk-co .tk-v:hover, .tk-co .co-x:hover { background: rgba(255,255,255,.09); color: #fff; }
.tk-c svg, .tk-co .tk-v svg, .tk-co .co-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-v.on { color: #ffc94a; } .tk-v.on svg { fill: #ffc94a; stroke: #ffc94a; }
.tk-c button.armed { color: #fff; background: #ff5d73; }

/* Le coup de pouce quand rien n'est choisi, et les avertissements */
.tk-empty { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 20px; border: 1.5px dashed rgba(184,156,255,.3); color: var(--muted); font-size: 15.6px; }
.tk-empty b { font-size: 18px; color: #d9d3ff; }
.tk-empty.nudge { border-color: rgba(255,201,74,.5); background: rgba(255,201,74,.06); animation: tkNudge 2.8s ease-in-out infinite; }
@keyframes tkNudge { 50% { border-color: rgba(255,201,74,.95); } }
.tk-warn { margin: 10px 8px 20px; font-size: 15px; color: #ffb08a; }

/* Le bouton unique, en bas à droite : immobile, mais au survol les projets se déploient */
.tk-fab { position: fixed; z-index: 30; right: calc(26px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: row; align-items: flex-end; gap: 14px; }
.fab-b { display: grid; place-items: center; width: 76px; height: 76px; flex: none; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(140deg, #ab8fff, #8a6bff 46%, #ff6bd6);
  box-shadow: 0 16px 38px rgba(110,80,240,.5), inset 0 2px 10px rgba(255,255,255,.3);
  transition: transform .38s var(--spring), box-shadow .3s; }
.fab-b svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; transition: transform .45s var(--spring); }
.tk-fab:hover .fab-b, .tk-fab.open .fab-b, .tk-fab:focus-within .fab-b { transform: scale(1.07); box-shadow: 0 22px 48px rgba(110,80,240,.62), inset 0 2px 10px rgba(255,255,255,.34); }
.tk-fab:hover .fab-b svg, .tk-fab.open .fab-b svg, .tk-fab:focus-within .fab-b svg { transform: rotate(135deg); }
.fab-b:active { transform: scale(.95); }
.fab-b.close { width: 52px; height: 52px; background: linear-gradient(140deg, #3a3466, #241f4a); box-shadow: 0 10px 26px rgba(0,0,0,.5); }
.fab-b.close svg { width: 22px; height: 22px; }

.fab-fan { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.fab-p { display: flex; align-items: center; gap: 11px; padding: 6px 7px 6px 16px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(26,22,58,.97), rgba(16,14,38,.97)); color: #d9d3ff; font: inherit; font-size: 16.2px; font-weight: 800; cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,0,0,.45); opacity: 0; pointer-events: none; transform: translateX(26px) scale(.86);
  transition: opacity .26s var(--ease), transform .44s var(--spring), border-color .2s, color .2s; }
.fab-p.plain { padding: 10px 18px; }
.tk-fab:hover .fab-p, .tk-fab.open .fab-p, .tk-fab:focus-within .fab-p { opacity: 1; transform: none; pointer-events: auto; transition-delay: calc(var(--k, 0) * 45ms); }
.fab-em { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 20.4px; line-height: 1;
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in srgb, var(--pc) 80%, #fff 16%), color-mix(in srgb, var(--pc) 60%, #0b0920));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc) 45%, transparent), inset 0 1px 5px rgba(255,255,255,.28); }
.fab-nm { white-space: nowrap; }
.tk-fab .fab-p:hover { border-color: var(--pc); color: #fff; transform: translateX(-6px) scale(1.05); transition-delay: 0ms; }
.tk-fab .fab-p:hover .fab-em { box-shadow: 0 6px 20px color-mix(in srgb, var(--pc) 70%, transparent), inset 0 1px 5px rgba(255,255,255,.34); }
.fab-p:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* La saisie : elle s'ouvre juste au-dessus du bouton, à la couleur du projet */
.tk-fab.composing { gap: 12px; align-items: center; }
.tk-co { display: flex; align-items: center; gap: 10px; width: min(460px, calc(100vw - 80px)); padding: 9px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent); background: linear-gradient(180deg, rgba(22,19,50,.97), rgba(14,12,32,.97));
  box-shadow: 0 16px 44px rgba(0,0,0,.55), 0 0 0 4px color-mix(in srgb, var(--pc) 16%, transparent); animation: tkCoIn .34s var(--spring); }
@keyframes tkCoIn { from { transform: translateY(16px) scale(.9); opacity: 0; } }
.co-em { font-size: 24px; line-height: 1; flex: none; }
.tk-in { flex: 1; min-width: 0; height: 34px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 18.6px; outline: none; box-shadow: none; }
.tk-in::placeholder { color: rgba(184,156,255,.5); }
.tk-in:focus { background: none; box-shadow: none; }

/* Plus tard : la barre des jours (on les consulte, ou on y envoie les tâches cochées) */
.tk-nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; transition: background .3s, border-color .3s; }
.tk-days { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; overflow-x: auto; padding: 2px 4px 2px 2px; scrollbar-width: none; }   /* la barre des jours prend toute la largeur : aucun jour rogné */
.tk-days::-webkit-scrollbar { display: none; }
.tk-day { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 11px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: #cfc9ee; font: inherit; cursor: pointer; transition: transform .25s var(--spring), border-color .2s, background .2s, color .2s;
  animation: tkDayIn .42s var(--spring) both; animation-delay: calc(var(--k, 0) * 30ms); }
.tk-day b { font-size: 15px; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.tk-day small { font-size: 12.6px; color: var(--muted); white-space: nowrap; }
.tk-day:hover:not(:disabled) { border-color: rgba(160,130,255,.75); color: #fff; transform: translateY(-2px); }
.tk-day.on { border-color: rgba(138,107,255,.85); background: rgba(138,107,255,.2); color: #fff; box-shadow: 0 6px 18px rgba(110,80,240,.3); }
.tk-day.on small { color: #d9d3ff; }
.tk-day:disabled { opacity: .35; cursor: default; }
@keyframes tkDayIn { from { opacity: 0; transform: translateY(8px); } }
.tk-nav.planning { padding: 12px; border-radius: 20px; border: 1px solid rgba(90,215,255,.32); background: rgba(90,215,255,.06); animation: tkCoIn .3s var(--spring); }
.tk-nav.planning .tk-day:hover:not(:disabled) { border-color: #5ad7ff; background: rgba(90,215,255,.18); }
.tk-planinfo { display: flex; align-items: center; gap: 10px; flex: none; }
.tk-barn { font-size: 15.6px; font-weight: 800; color: #9ad9ff; white-space: nowrap; }
.tk-barb { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 15px; border-radius: 14px; border: 1px solid var(--line2);
  background: rgba(255,255,255,.04); color: #d9d3ff; font: inherit; font-size: 15.6px; font-weight: 800; cursor: pointer; transition: border-color .2s, color .2s; }
.tk-barb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-barb:hover { border-color: rgba(138,107,255,.75); color: #fff; }
.tk-barb.ghost { border-style: dashed; }
.tkit.tkpick { cursor: pointer; }
.tkit.tkpick .tk-ck { pointer-events: none; }
.tkit.tkpick .ck-r { stroke: rgba(90,215,255,.55); }
.ck-d { fill: #5ad7ff; transform: scale(0); transform-box: fill-box; transform-origin: 50% 50%; transition: transform .28s var(--spring); }
.tkit.sel { background: rgba(90,215,255,.13); box-shadow: inset 0 0 0 1.5px rgba(90,215,255,.55); }
.tkit.sel .ck-r { stroke: #5ad7ff; stroke-width: 2.4; }
.tkit.sel .ck-d { transform: scale(1); }
.tkit.done .ck-d, .tkit:not(.sel) .ck-d { transform: scale(0); }

/* Choisir le projet d'une tâche : même langage que l'éventail */
.tkp .tkp-g { display: grid; gap: 8px; margin: 16px 0 14px; }
.tkp-b { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: #d9d3ff; font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.tkp-b i { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; font-size: 20.4px; font-style: normal; line-height: 1;
  background: radial-gradient(120% 120% at 32% 26%, color-mix(in srgb, var(--pc) 80%, #fff 16%), color-mix(in srgb, var(--pc) 60%, #0b0920));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pc) 45%, transparent), inset 0 1px 5px rgba(255,255,255,.28); }
.tkp-b b { flex: 1; font-size: 17.4px; font-weight: 700; }
.tkp-on { font-size: 12.6px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.tkp-b.plain { padding-left: 16px; }
.tkp-b:hover { border-color: var(--pc); background: rgba(255,255,255,.07); transform: translateX(3px); }
.tkp-b.on { border-color: var(--pc); box-shadow: inset 0 0 0 1px var(--pc); }

@media (max-width: 719px) {
  .tk-top { flex-wrap: wrap; gap: 8px 12px; }
  .tk-date { flex: 1 1 auto; font-size: 13.2px; }
  .tk-score { flex: none; }
  .tk-tabs { order: 3; flex: 1 0 100%; justify-content: center; }
  .tk-sec h3 { flex-wrap: wrap; } .tk-sec h3 small { flex: 1 0 100%; margin-top: 2px; }
  .tk-grp h3 small { flex: none; margin-left: auto; }
  .tkit { flex-wrap: wrap; padding: 11px 12px; } .tk-t { font-size: 18px; } .tkit.vital .tk-t { font-size: 19.2px; }
  .tk-b { flex: 1 1 calc(100% - 40px); }
  .tk-c { order: 3; margin-left: auto; opacity: .75; }
  .tk-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); gap: 9px; }
  .fab-b { width: 58px; height: 58px; } .fab-b svg { width: 26px; height: 26px; }
  .fab-p { font-size: 15px; padding: 5px 6px 5px 13px; } .fab-em { width: 30px; height: 30px; font-size: 18px; }
  .tk-co { width: calc(100vw - 34px); padding: 7px 12px; } .co-em { font-size: 20.4px; } .tk-in { font-size: 18px; }
  .tk-bar.on { padding: 10px; } .tk-days { gap: 5px; } .tk-day { padding: 5px 9px; } .tk-day b { font-size: 13.8px; }
}

/* Déplacer une tâche : on l'attrape n'importe où sur la ligne */
.tsk .tkit { touch-action: pan-y; cursor: grab; }
.tsk .tkit:active { cursor: grabbing; }
.tsk .tkit .tk-t, .tsk .tkit button { cursor: pointer; }
.tk-grip { display: grid; place-items: center; width: 18px; flex: none; margin-left: -4px; color: var(--muted); opacity: .3; transition: opacity .2s, color .2s; }
.tk-grip svg { width: 15px; height: 15px; fill: currentColor; }
.tkit:hover .tk-grip { opacity: .95; color: #b89cff; }
.tk-hint { display: flex; align-items: center; gap: 8px; margin: -6px 0 14px; font-size: 13.2px; color: var(--muted); }
.tk-hint svg { width: 15px; height: 15px; fill: currentColor; opacity: .7; }
.tk-drop { list-style: none; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px;
  border: 1.5px dashed rgba(184,156,255,.32); color: var(--muted); font-size: 14.4px; transition: border-color .25s, background .25s; }
.tk-drop b { font-size: 16.8px; color: #d9d3ff; }
.tk-drop.nudge { border-color: rgba(255,201,74,.5); background: rgba(255,201,74,.06); animation: tkNudge 2.8s ease-in-out infinite; }
body.tk-dragging .tk-drop { border-color: rgba(255,201,74,.8); background: rgba(255,201,74,.1); }
body.tk-dragging { user-select: none; cursor: grabbing; }
body.tk-dragging .tsk .tkit { touch-action: none; }
.tkit.tk-drag { cursor: grabbing; border-radius: 16px; border-bottom: 0;
  background: linear-gradient(120deg, rgba(138,107,255,.3), rgba(90,215,255,.18));
  box-shadow: 0 18px 40px rgba(0,0,0,.55), inset 0 0 0 1.5px rgba(184,156,255,.7); }
.tkit.tk-drag .tk-c { opacity: 0; }
.tk-ph { list-style: none; margin: 0; border-radius: 16px; border: 1.5px dashed rgba(184,156,255,.5);
  background: rgba(184,156,255,.07); animation: tkPh .18s ease-out; }
@keyframes tkPh { from { opacity: 0; transform: scale(.98); } }
.tk-sec.tk-over > h3 { color: #d9d3ff; }
.tk-sec.tk-over .tk-ul { background: rgba(184,156,255,.06); border-radius: 16px; }
.tk-sec .tk-ul { transition: background .2s; }
.tk-vul { min-height: 8px; }
.tk-sec.tk-focus.tk-over .tk-drop { border-color: #ffc94a; background: rgba(255,201,74,.16); }
.tk-sec.tk-focus.tk-over .tk-vul { min-height: 56px; background: rgba(255,201,74,.1); }

/* Le fil des amis : une carte par ami, comme un feed */
.tk-feed { display: grid; gap: 18px; }   /* même largeur que la liste du jour : une carte par ami, sur toute la page */
.tk-mt { border-radius: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.035); padding: 4px 4px 12px; }
.tk-mt > header { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; }
.tk-mt-id { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tk-mt-av { width: 46px; height: 46px; border-radius: 50%; flex: none; object-fit: cover; }
.tk-mt-id b { display: block; font-size: 17px; font-weight: 900; letter-spacing: -.01em; }
.tk-mt-id span { display: block; font-size: 12.5px; color: var(--muted); }
.tk-mt-ring { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(#8a6bff var(--p, 0%), rgba(255,255,255,.08) 0); position: relative; }
.tk-mt-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #14102e; }
.tk-mt-ring b, .tk-mt-ring small { position: relative; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tk-mt-ring small { font-size: 9px; margin-left: 1px; color: var(--muted); }
.tk-mt-ring.full { background: conic-gradient(#3ddc97 100%, #3ddc97 0); }
.tk-mt-s { padding: 2px 6px 4px; }
.tk-mt-s h4 { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 0 8px; font-size: 11.5px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tk-mt-s h4 small { font-size: 11px; font-weight: 800; letter-spacing: 0; opacity: .8; }
.tk-mt-s h4 svg { width: 13px; height: 13px; fill: #ffc94a; }
.tk-mt-s.obs h4 { color: #ffc94a; }
.tk-mt-s .tk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, #7d76b5); }
.tk-mt-none { margin: 0; padding: 4px 16px 8px; font-size: 13px; color: var(--muted); }
.tkit.ro { cursor: default; }
.tkit.ro:hover { background: none; }
.tk-ck.ro { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.tk-ck.ro svg { width: 100%; height: 100%; }
.tkit.ro .ck-r { fill: none; stroke: var(--pc, #7d76b5); stroke-width: 2; }
.tkit.ro .ck-m { fill: none; stroke: #0b0920; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.tkit.ro.done .ck-r { fill: var(--pc, #8a6bff); stroke: var(--pc, #8a6bff); }
.tkit.ro.done .ck-m { stroke-dashoffset: 0; }
.tk-pj.obs { color: #ffc94a; background: rgba(255,201,74,.14); }
.tk-pj.obs svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }

/* ───────── Trophées ───────── */
.tro { max-width: 1120px; margin: 0 auto; padding-top: 6px; }
.medal { display: block; overflow: visible; }
.medal.locked { filter: grayscale(1) brightness(.6) contrast(.95); }
.medal .md-shine { transform-box: view-box; animation: mdShine 4.2s ease-in-out infinite; }
@keyframes mdShine { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(210px); } }
.medal .md-rays { transform-box: view-box; transform-origin: 60px 60px; animation: spin360 22s linear infinite; }
.medal .md-sp { transform-box: fill-box; transform-origin: center; animation: svTwinkle 1.9s ease-in-out infinite; }
.medal.locked .md-rays, .medal.locked .md-shine, .medal.locked .md-sp { display: none; }
.tr-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 26px; padding: 22px 24px; border-radius: 28px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(138,107,255,.22), transparent 60%), radial-gradient(80% 100% at 100% 100%, rgba(255,107,214,.14), transparent 60%), linear-gradient(160deg, #1b1745, #100d2a);
  border: 1px solid rgba(160,130,255,.3); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.tr-ring { position: relative; flex: none; width: 140px; height: 140px; }
.tr-hmid { flex: 1 1 280px; min-width: 0; }
.tr-ring svg { width: 100%; height: 100%; filter: drop-shadow(0 0 14px rgba(138,107,255,.45)); }
.tr-ring-fg { transition: stroke-dasharray 1.2s var(--ease); }
.tr-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.tr-ring b { font-size: 36px; font-weight: 900; letter-spacing: -.03em; }
.tr-ring small { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.tr-ring span { margin-top: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 900; color: #1a1030; background: linear-gradient(90deg, #b89cff, #ff9ad8); }
.tr-hmid small, .tr-vit small { display: block; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.tr-pts { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 12px; font-size: 42px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
  background: linear-gradient(90deg, #fff, #ffd98a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-pts em { font-style: normal; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.tr-rars { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-rchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #d9d3ff;
  background: color-mix(in srgb, var(--rc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
.tr-rchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.tr-rchip b { font-variant-numeric: tabular-nums; color: #fff; }
.tr-vit { --rc: #8a6bff; flex: 1 1 300px; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 16px 12px 12px; border-radius: 22px; text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: radial-gradient(circle at 18% 50%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 62%), rgba(0,0,0,.22); border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent);
  transition: transform .3s var(--spring), border-color .25s; }
.tr-vit:hover { transform: translateY(-2px); }
.tr-vit .medal { flex: none; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--rc) 45%, transparent)); }
.tr-vit b { display: block; margin: 2px 0; font-size: 17px; font-weight: 900; line-height: 1.2; }
.tr-vit em { display: block; font-style: normal; font-size: 12px; color: var(--muted); }
.tr-vit.empty { border-style: dashed; border-color: rgba(184,156,255,.4); background: rgba(0,0,0,.16); }
.tr-vit-slot { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px dashed rgba(184,156,255,.5); font-size: 28px; font-weight: 300; color: #b89cff; }
.tr-near { margin-top: 26px; }
.tr-near h3, .tr-sec-h h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #cfc9ee; }
.tr-near-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tr-nc { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 10px 8px; border-radius: 18px; text-align: left; color: inherit; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.035); border: 1px solid var(--line); transition: transform .3s var(--spring), border-color .25s; }
.tr-nc:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
.tr-nc .medal { flex: none; }
.tr-nc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-nc-t b { font-size: 14.5px; font-weight: 900; } .tr-nc-t > span:not(.tr-bar) { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-nc-t small { font-size: 12px; font-weight: 700; color: #d9d3ff; font-variant-numeric: tabular-nums; } .tr-nc-t small em { font-style: normal; color: var(--accent); }
.tr-bar { display: block; height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.tr-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--rc, #8a6bff) 55%, #fff), var(--rc, #8a6bff)); box-shadow: 0 0 10px var(--rc, #8a6bff); }
.tr-bar.big { height: 10px; margin: 4px 0 6px; }
.tr-tabs { display: flex; gap: 6px; margin: 30px 0 6px; padding: 5px; overflow-x: auto; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px solid var(--line); scrollbar-width: none; }
.tr-tabs button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 0; border-radius: 13px; background: none; color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .25s, color .25s; }
.tr-tabs button:hover { color: #fff; }
.tr-tabs button.on { color: #fff; background: linear-gradient(135deg, #8a6bff, #6a4be0); box-shadow: 0 6px 18px rgba(110,80,240,.4); }
.tr-tabs svg, .tr-sec-h svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-tabs em { font-style: normal; font-size: 11.5px; opacity: .75; font-variant-numeric: tabular-nums; }
.tr-sec { margin-top: 24px; }
.tr-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tr-sec-h h3 { margin: 0; }
.tr-sec-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.tr-sec-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a6bff, #ff6bd6); }
.tr-sec-h > b { font-size: 12.5px; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.tr-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 14px 10px 12px; border-radius: 22px; text-align: center; color: inherit; font: inherit; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: transform .35s var(--spring), border-color .25s, box-shadow .25s; }
.tr-card:hover { transform: translateY(-4px); }
.tr-card:focus-visible, .tr-nc:focus-visible, .tr-vit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-card.got { background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--rc) 24%, transparent), transparent 62%), rgba(255,255,255,.035);
  border-color: color-mix(in srgb, var(--rc) 45%, transparent); }
.tr-card.got:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--rc) 25%, transparent); }
.tr-card.got.r3, .tr-card.got.r4 { box-shadow: 0 0 24px color-mix(in srgb, var(--rc) 20%, transparent); }
.tr-card:not(:hover) .md-shine { animation-play-state: paused; }
.tr-med { display: block; margin-bottom: 4px; transition: transform .45s var(--spring); }
.tr-card:hover .tr-med { transform: scale(1.08) rotate(-4deg); }
.tr-card.got .tr-med .medal { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--rc) 45%, transparent)); }
.tr-name { font-size: 14px; font-weight: 900; line-height: 1.2; }
.tr-card.locked .tr-name { color: #cfc9ee; }
.tr-rar { font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.tr-card.locked .tr-rar { opacity: .7; }
.tr-desc { font-size: 12px; line-height: 1.35; color: var(--muted); min-height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-card .tr-bar { width: 88%; margin-top: 6px; height: 6px; }
.tr-pg, .tr-date { font-size: 11.5px; font-weight: 700; color: #d9d3ff; font-variant-numeric: tabular-nums; }
.tr-date { margin-top: 6px; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.tr-xp { margin-top: 2px; font-size: 11.5px; font-weight: 900; color: var(--accent); }
.tr-card.locked .tr-xp { opacity: .6; }
.tr-new, .tr-pin { position: absolute; top: 10px; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; z-index: 1; }
.tr-new { left: 10px; color: #fff; background: linear-gradient(90deg, #ff5a8c, #ff6bd6); box-shadow: 0 0 14px rgba(255,90,140,.7); animation: rlDot 1.6s ease-in-out infinite; }
.tr-pin { right: 10px; color: #1a1030; background: var(--rc); }
.overlay.tr-ov .box { max-width: 460px; }
.tr-modal, .tr-cele { position: relative; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--rc) 26%, transparent), transparent 62%), linear-gradient(180deg, #17143a, #0f0d26); }
.tr-mbig { position: relative; display: grid; place-items: center; margin: 4px 0 6px; }
.tr-mbig .medal { position: relative; filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--rc) 55%, transparent)); }
.tr-mrays { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rc) 34%, transparent) 0deg 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 68%); mask: radial-gradient(circle, #000 20%, transparent 68%); animation: spin360 16s linear infinite; }
.tr-mrar { font-size: 11.5px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--rc); }
.tr-modal h2, .tr-cele h2 { margin: 4px 0 0; font-size: 26px; }
.tr-mdate { margin: 0 0 12px; font-weight: 800; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.tr-mprog { margin: 0 0 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-mfacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 4px 0 16px; font-size: 12.5px; color: var(--muted); }
.tr-mfacts b { color: #fff; }
.tr-cl-t { font-size: 13px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; color: #fff; text-shadow: 0 0 18px var(--rc); }
.tr-cele .medal.pop { animation: trPop 1s var(--spring) both; }
@keyframes trPop { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.12) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.tr-cl-xp { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 15px; font-weight: 900; color: #1a1030; background: linear-gradient(90deg, #b89cff, #ffd98a); }
.tr-cl-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.tr-cl-more span { display: flex; flex-direction: column; align-items: center; width: 76px; }
.tr-cl-more small { font-size: 10.5px; font-weight: 700; line-height: 1.2; color: #d9d3ff; }
.tr-cl-more em { align-self: center; font-style: normal; font-size: 12px; color: var(--muted); }
.tr-pickg { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; margin-top: 12px; }
.tr-pk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: inherit; font: inherit; cursor: pointer; }
.tr-pk:hover { border-color: color-mix(in srgb, var(--rc) 60%, transparent); background: color-mix(in srgb, var(--rc) 12%, transparent); }
.tr-pk b { font-size: 12px; line-height: 1.2; } .tr-pk small { font-size: 10px; font-weight: 800; color: var(--rc); text-transform: uppercase; letter-spacing: .1em; }
@media (max-width: 860px) { .tr-near-g { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .tr-hero { gap: 16px; padding: 16px; } .tr-ring { width: 108px; height: 108px; } .tr-ring b { font-size: 28px; } .tr-pts { font-size: 32px; }
  .tr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .tr-card { padding: 12px 6px 10px; border-radius: 18px; } .tr-card .medal { width: 72px; height: 72px; } }

/* ───────── Classements : rangs bien visibles, sommeil, palier de rétention ───────── */
.lb-row[style*="--rc"] { box-shadow: inset 3px 0 0 var(--rc); }
.lb-rk { font-size: 14px; font-weight: 900; text-shadow: 0 0 14px color-mix(in srgb, var(--rc) 60%, transparent); }
.lb-emb { flex: none; display: grid; place-items: center; width: 50px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--rc) 45%, transparent)); }
.lb-emb svg { display: block; }
.lb-pemb { display: block; margin: 2px 0 -2px; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 55%, transparent)); }
.lb-pemb svg { display: block; }
.lb-pod .lb-rk { font-size: 13.5px; }
.lb-score { font-size: 19px !important; } .lb-score small { margin-left: 2px !important; }
.lb-sl { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 12px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.lb-sl > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lb-sl svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lb-sl .ok { color: #8fe3b0; }
.lb-sheep img { width: 22px; height: auto; }
.lb-pod .lb-sl { justify-content: center; }
.lb-stage[style*="--sc"] { color: var(--sc); align-items: center; gap: 4px; }
.lb-stage svg { width: 13px; height: 13px; fill: currentColor; }
.lb-stage small { font-size: 11px; font-weight: 700; color: var(--muted); }
@media (max-width: 520px) { .lb-emb { width: 38px; } .lb-emb svg { width: 36px; height: 36px; } .lb-pemb svg { width: 46px; height: 46px; } .lb-pod.p1 .lb-pemb svg { width: 56px; height: 56px; } }

/* ───────── Carte de joueur : trophées sur une ligne, trophée exposé, crayon ───────── */
.pc-tro { flex-direction: row; align-items: center; gap: 7px; padding: 8px 12px; }
.pc-tro b { margin-top: 0; font-size: 18px; line-height: 1; }
.pc-tro small { font-size: 12px; line-height: 1; }
.pc-edit { position: absolute; top: -4px; right: -4px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8a6bff, #6a4be0); border: 2px solid #120e2e; box-shadow: 0 4px 12px rgba(0,0,0,.45); transition: transform .3s var(--spring); }
.pc-edit:hover { transform: scale(1.12) rotate(-8deg); }
.pc-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-edit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-show { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: -4px 0 14px; padding: 8px 14px 8px 8px; border-radius: 18px; text-align: left; color: inherit; font: inherit;
  background: radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--rc) 28%, transparent), transparent 60%), rgba(0,0,0,.24); border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent); }
.pc-show .medal { flex: none; filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--rc) 50%, transparent)); }
.pc-show small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); }
.pc-show b { display: block; font-size: 16px; font-weight: 900; line-height: 1.2; }
.pc-show span { display: block; font-size: 12px; color: var(--muted); }
.pc-show.empty { --rc: #8a6bff; cursor: pointer; border-style: dashed; background: rgba(0,0,0,.16); padding: 10px 14px; }
.pc-show.empty:hover { border-color: rgba(184,156,255,.8); }
.pc-show-plus { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed rgba(184,156,255,.55); color: #b89cff; font-size: 22px; }
.overlay.av-ov .box { max-width: 560px; }
.av-modal .av-grid { margin-top: 14px; }
.nb-modal { text-align: center; }
.nb-wolf { display: grid; place-items: center; margin-bottom: 6px; }
.nb-wolf img { filter: drop-shadow(0 0 18px rgba(255,60,60,.55)); animation: nbWolf 2.4s ease-in-out infinite; }
@keyframes nbWolf { 50% { transform: translateY(-3px) scale(1.04); } }
.nb-modal #nbEdit { text-align: left; margin-top: 12px; }
.av-up { overflow: hidden; min-height: 0; }
.av-up span { line-height: 1.1; }
.lb-list { grid-template-columns: minmax(0, 1fr); }   /* une ligne longue (fiche du personnage en anglais) ne fait plus déborder la page sur téléphone */

/* Deepwork en temps bonus : le trophée de fin et la bille du chemin ne bougent plus (rien n'incite à s'arrêter) */
.dw.done .dw-endc { animation: none; }
.pb.bonus .pb-me { animation: none; }

/* Quêtes : pendant la saisie, le fond reste tel quel (la règle générale des champs l'assombrissait) */

/* Classement Temps de travail : le rang domine la ligne */
.lb-row.rk { padding-top: 6px; padding-bottom: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 20%, transparent), rgba(255,255,255,.03) 58%);
  border-color: color-mix(in srgb, var(--rc) 40%, transparent); }
.lb-row.rk .lb-rk { font-size: 17px; letter-spacing: .01em; }
.lb-emb { width: 78px; margin: -4px 0; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--rc) 60%, transparent)); }
.lb-pemb { margin: 4px 0 0; }
.lb-pod .lb-rk { font-size: 15.5px; }
.lb-avg { display: inline-flex; align-items: baseline; gap: 4px; font-size: 19px !important; }
.lb-avg small { margin: 0 !important; font-size: 11.5px !important; }
.lb-avg.none { color: var(--muted); }
.lb-bv { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lb-bv .lb-val { text-align: center; }
.lb-pod .lb-pbust { width: 64px; height: 68px; margin: 2px 0 -2px; }
@media (max-width: 520px) { .lb-emb { width: 54px; } .lb-emb svg { width: 54px; height: 54px; } .lb-row.rk .lb-rk { font-size: 14.5px; }
  .lb-pemb svg { width: 64px; height: 64px; } .lb-pod.p1 .lb-pemb svg { width: 78px; height: 78px; } }

/* Carte de joueur : le trophée exposé entre le pseudo et le compteur de trophées, avec sa rareté seule */
.pc-hd .pc-show { flex: 0 1 auto; width: auto; max-width: 240px; min-width: 0; margin: 0; padding: 5px 12px 5px 5px; gap: 8px; border-radius: 16px; }
.pc-hd .pc-show > div { min-width: 0; }
.pc-hd .pc-show b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-hd .pc-show.empty { padding: 7px 12px 7px 8px; }
.pc-hd .pc-show .pc-show-plus { width: 34px; height: 34px; font-size: 18px; }
@media (max-width: 560px) { .pc-hd .pc-show { padding: 4px; border-radius: 50%; } .pc-hd .pc-show > div { display: none; } .pc-hd .pc-show .medal { width: 42px; height: 42px; } }

/* Choix d'avatar : la case « Importer » a exactement la même taille que les autres */
.av-grid { grid-auto-rows: 1fr; align-items: center; }
.av-opt { width: 100%; height: auto; }
.av-up { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lb-pod .lb-pbust { width: 84px; height: 88px; }
.lb-bv .lb-bust { width: 58px; height: 62px; }
@media (max-width: 520px) { .lb-pod .lb-pbust { width: 64px; height: 68px; } .lb-bv .lb-bust { width: 46px; height: 50px; } }
.av-grid label.av-up { margin: 0; padding: 0; }
@media (max-width: 560px) {   /* carte de joueur sur téléphone : pseudo sur la 1re ligne, trophée exposé puis compteur sur la 2e */
  .pc-hd { flex-wrap: wrap; row-gap: 12px; }
  .pc-hd .pc-id { flex: 1 1 calc(100% - 84px); }
  .pc-hd .pc-show { order: 3; flex: 1 1 0; min-width: 0; max-width: none; padding: 4px 12px 4px 4px; border-radius: 14px; }
  .pc-hd .pc-show > div { display: block; }
  .pc-hd .pc-show .medal { width: 40px; height: 40px; }
  .pc-hd .pc-show b { font-size: 12.5px; line-height: 1.15; -webkit-line-clamp: 2; }
  .pc-hd .pc-tro { order: 4; }
}

/* Bulles d'aide (survol d'un trophée…) */
.tip { position: fixed; left: 0; top: 0; z-index: 300; max-width: 260px; padding: 8px 12px; border-radius: 12px; pointer-events: none; white-space: pre-line;
  font-size: 12.5px; font-weight: 650; line-height: 1.4; color: #f3f0ff; background: rgba(22,18,52,.97); border: 1px solid rgba(184,156,255,.45);
  box-shadow: 0 14px 34px rgba(0,0,0,.55); opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s; }
.tip.on { opacity: 1; transform: none; }
.tip.below { transform: translateY(-4px); } .tip.below.on { transform: none; }
.pc-hd .pc-show[data-tip] { cursor: help; }
.pc-hd .pc-show[data-tip]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tr-mshown { margin: 0 0 10px; font-weight: 800; color: color-mix(in srgb, var(--rc) 60%, #fff); }
.tr-pk { position: relative; }
.tr-pk.on { border-color: var(--rc); background: color-mix(in srgb, var(--rc) 16%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--rc) 30%, transparent); }
.tr-pk-on { position: absolute; top: 5px; right: 5px; padding: 2px 6px; border-radius: 999px; font-style: normal; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #1a1030; background: var(--rc); }

/* Carte de joueur : crayon du trophée exposé (sur MA carte), symbole « + » de la vitrine vide bien centré */
.pc-hd .pc-show { position: relative; }
.pc-show-edit { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #8a6bff, #6a4be0); border: 2px solid #120e2e; box-shadow: 0 4px 10px rgba(0,0,0,.45); transition: transform .3s var(--spring); z-index: 1; }
.pc-show-edit:hover { transform: scale(1.12) rotate(-8deg); }
.pc-show-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-show-edit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-show .pc-show-plus { display: grid; place-items: center; padding: 0; line-height: 0; }   /* « .pc-show span » le passait en block : le symbole tombait de travers */
.pc-show-plus svg { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* Carte de joueur : l'anneau de feu de la rétention en miniature (même moteur que la page Énergie) */
.pc-ring.en-ring { position: relative; width: 44%; height: auto; aspect-ratio: 1; margin: 8% 0 0; --D: 120px; }
.pc-ring.en-ring > svg { filter: none; }
.pc-ring .en-halo { filter: blur(6px); }
.pc-ring .pc-fl { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding-bottom: 2%; }
.pc-ring .pc-fl .enf { width: calc(30% * var(--k, 1)); margin: 0 -4%; }

/* ───────── Ultra légendaire : nacre irisée, reflets lents, auréole, éclat de lumière ───────── */
@property --trang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes trAng { to { --trang: 360deg; } }
@keyframes trIri { to { background-position: 200% 0; } }
.medal .md-aur { transform-box: view-box; transform-origin: 60px 60px; animation: spin360 70s linear infinite; }
.medal .md-sheen { transform-box: view-box; animation: mdSheen 6.5s cubic-bezier(.45, 0, .2, 1) infinite; }
@keyframes mdSheen { 0%, 50% { transform: translateX(0); } 100% { transform: translateX(260px); } }
.medal.r5:not(.locked) { animation: mdGlow 9s ease-in-out infinite; }
@keyframes mdGlow { 0%, 100% { filter: drop-shadow(0 0 9px rgba(255,201,232,.5)); } 33% { filter: drop-shadow(0 0 11px rgba(166,240,255,.5)); } 66% { filter: drop-shadow(0 0 11px rgba(255,233,176,.5)); } }
.medal.locked .md-aur, .medal.locked .md-sheen { display: none; }
.tr-rar-u, .tr-card.r5 .tr-rar, .tr-modal.r5 .tr-mrar, .tr-cele.r5 .tr-mrar, .tr-pk.r5 small, .pc-show.r5 small {
  background: linear-gradient(90deg, #ffc9e8, #cdb8ff, #a9c4ff, #a6f0ff, #bff5dc, #ffe9b0, #ffc9e8) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: trIri 7s linear infinite; }
.tr-rchip.r5 i { background: conic-gradient(#ffc9e8, #cdb8ff, #a6f0ff, #bff5dc, #ffe9b0, #ffc9e8); box-shadow: 0 0 8px rgba(214,196,255,.9); }
/* cadre en nacre qui tourne lentement autour de la carte */
.tr-card.got.r5, .pc-show.r5, .tr-vit.r5, .tr-pk.r5 { border-color: transparent;
  background: radial-gradient(circle at 50% 28%, rgba(214,196,255,.2), transparent 62%) padding-box, linear-gradient(#15112f, #110e28) padding-box,
    conic-gradient(from var(--trang), #ffc9e8, #cdb8ff, #a9c4ff, #a6f0ff, #bff5dc, #ffe9b0, #ffc9e8) border-box;
  animation: trAng 9s linear infinite; box-shadow: 0 0 26px rgba(205,184,255,.16), 0 0 60px rgba(166,240,255,.07); }
.tr-card.got.r5 { border-width: 1.5px;
  background: radial-gradient(circle at 50% 26%, rgba(214,196,255,.24), transparent 58%) padding-box, radial-gradient(70% 50% at 0% 0%, rgba(255,168,217,.12), transparent 70%) padding-box,
    radial-gradient(70% 50% at 100% 100%, rgba(134,230,255,.1), transparent 70%) padding-box, linear-gradient(#15112f, #110e28) padding-box,
    conic-gradient(from var(--trang), #ffc9e8, #cdb8ff, #a9c4ff, #a6f0ff, #bff5dc, #ffe9b0, #ffc9e8) border-box; }
.tr-card.got.r5 .tr-name { text-shadow: 0 0 14px rgba(214,196,255,.55); }
.tr-card.got.r5:hover { box-shadow: 0 14px 40px rgba(205,184,255,.28), 0 0 70px rgba(166,240,255,.12); }
.pc-show.r5 { background: radial-gradient(circle at 10% 50%, rgba(214,196,255,.22), transparent 60%) padding-box, linear-gradient(#120f28, #120f28) padding-box,
    conic-gradient(from var(--trang), #ffc9e8, #cdb8ff, #a9c4ff, #a6f0ff, #bff5dc, #ffe9b0, #ffc9e8) border-box; }
.tr-card.locked.r5 { border-color: rgba(214,196,255,.28); background: radial-gradient(circle at 50% 28%, rgba(214,196,255,.07), transparent 62%), rgba(255,255,255,.03); }
.tr-card.r5 .tr-bar i, .tr-nc.r5 .tr-bar i, .tr-modal.r5 .tr-bar i { background: linear-gradient(90deg, #ffc9e8, #cdb8ff, #a6f0ff, #bff5dc, #ffe9b0) 0 0 / 200% 100%; box-shadow: 0 0 10px rgba(214,196,255,.7); animation: trIri 5s linear infinite; }
.tr-card.got.r5 .tr-med .medal, .tr-vit.r5 .medal { filter: none; }
.tr-modal.r5, .tr-cele.r5 { background: radial-gradient(60% 45% at 18% 4%, rgba(166,240,255,.16), transparent 70%), radial-gradient(60% 45% at 82% 6%, rgba(255,201,232,.16), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, rgba(205,184,255,.26), transparent 62%), linear-gradient(180deg, #17143a, #0f0d26); }
.tr-modal.r5 .tr-mrays, .tr-cele.r5 .tr-mrays { width: 320px; height: 320px; margin: -160px 0 0 -160px; animation-duration: 30s;
  background: repeating-conic-gradient(from 0deg, rgba(255,246,255,.16) 0deg 4deg, transparent 4deg 12deg),
    conic-gradient(rgba(255,168,217,.5), rgba(187,163,255,.5), rgba(134,230,255,.5), rgba(158,242,203,.5), rgba(255,220,143,.5), rgba(255,168,217,.5)); }
.tr-cele.r5 .tr-cl-t { background: linear-gradient(90deg, #fff, #ffc9e8, #cdb8ff, #a6f0ff, #bff5dc, #ffe9b0, #fff) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; animation: trIri 4s linear infinite; filter: drop-shadow(0 0 12px rgba(214,196,255,.6)); }
.tr-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 30%, #fff, rgba(255,255,255,.6) 30%, transparent 70%); animation: trFlash 1.1s ease-out forwards; z-index: 2; }
@keyframes trFlash { from { opacity: 1; } to { opacity: 0; } }
.tr-cele.r5 .medal.pop { animation: trPopU 1.6s cubic-bezier(.2, .9, .2, 1) both, mdGlow 9s ease-in-out 1.6s infinite; }
@keyframes trPopU { 0% { transform: scale(.1) rotate(-200deg); opacity: 0; } 55% { transform: scale(1.18) rotate(8deg); opacity: 1; } 75% { transform: scale(.96) rotate(-2deg); } 100% { transform: none; } }

/* ───────── Sommeil : le cours du coucher, en bougies façon crypto ───────── */
.trade { --up: #0ecb81; --dn: #f6465d; background: radial-gradient(90% 60% at 100% 0%, rgba(14,203,129,.07), transparent 60%), radial-gradient(80% 60% at 0% 100%, rgba(246,70,93,.05), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.028)); }
.td-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; }
.td-tk { display: flex; align-items: center; gap: 10px; }
.td-logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #ffd66b, #f0a91c); box-shadow: 0 0 16px rgba(255,201,74,.35); }
.td-logo svg { width: 18px; height: 18px; fill: #3a2600; }
.td-tk b { display: block; font-size: 16px; font-weight: 900; letter-spacing: .02em; }
.td-tk small { display: block; font-size: 11.5px; color: var(--muted); }
.td-px { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-right: auto; }
.td-px > b { font-size: 26px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.td-px small { width: 100%; font-size: 11px; color: var(--muted); }
.td-chg { padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; color: #cfc9ee; background: rgba(255,255,255,.07); }
.td-chg.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.td-chg.dn { color: var(--dn); background: color-mix(in srgb, var(--dn) 14%, transparent); }
.td-tf { flex: none; } .td-tf button { flex: none; white-space: nowrap; padding: 6px 11px; font-variant-numeric: tabular-nums; }
.trade-cv { overflow: visible; }
.trade-cv .td-grid { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.trade-cv .td-ax { font-size: 10.5px; fill: #8f8cb8; font-variant-numeric: tabular-nums; }
.trade-cv .td-goal { stroke: #b89cff; stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .85; }
.trade-cv .td-goal-tag { fill: #221a45; stroke: #b89cff; stroke-width: 1; }
.trade-cv .td-tag { font-size: 10.5px; font-weight: 800; fill: #d9ccff; font-variant-numeric: tabular-nums; }
.trade-cv .td-tag.last { fill: #fff; }
.trade-cv .td-ma { fill: none; stroke: url(#slMaG); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.trade-cv .td-last { stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.trade-cv .td-live { fill: var(--c); animation: tdLive 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tdLive { 0% { opacity: 1; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3.2); } }
.trade-cv .cd-w { stroke: var(--c); stroke-width: 1.2; }
.trade-cv .cd-b { fill: var(--c); stroke: var(--c); stroke-width: .6; }
.trade-cv .cd.dn .cd-b, .trade-cv .cd.up .cd-b { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c) 55%, transparent)); }
.trade-cv .cd-v { fill: var(--c); opacity: .32; }
.trade-cv .cd-x { stroke: rgba(255,255,255,.35); stroke-width: .8; stroke-dasharray: 2 2; opacity: 0; transition: opacity .15s; }
.trade-cv .cd:hover .cd-x { opacity: 1; }
.trade-cv .cd:hover .cd-v { opacity: .6; }
.trade-cv .cd-g { transform-box: fill-box; transform-origin: 50% 50%; }
.trade-cv .cd-g.grow { animation: cdGrow .55s cubic-bezier(.34, 1.56, .64, 1) backwards; }
@keyframes cdGrow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }
.td-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.td-stats span { padding: 7px 8px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); min-width: 0; }
.td-stats small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-stats b { display: block; margin-top: 1px; font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.td-stats em { font-style: normal; }
.trade .up { color: var(--up); } .trade .dn { color: var(--dn); }
.td-leg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.td-leg span { display: inline-flex; align-items: center; gap: 5px; }
.td-leg i { display: inline-block; width: 7px; height: 12px; border-radius: 1.5px; }
.td-leg i.up { background: var(--up); } .td-leg i.dn { background: var(--dn); }
.td-leg i.ma { width: 14px; height: 2px; background: #ffc94a; }
.td-leg i.wk { width: 1.5px; height: 12px; background: #cfc9ee; }
.td-leg i.goal { width: 14px; height: 0; border-top: 1.5px dashed #b89cff; border-radius: 0; }
.td-leg i.vol { width: 10px; height: 7px; background: rgba(207,201,238,.35); align-self: flex-end; margin-bottom: 2px; }
@media (max-width: 560px) { .td-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .td-px > b { font-size: 22px; } }

/* ───────── Mission : les tâches du jour deviennent le titre de la mission ───────── */
.tm-todos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0 2px; }
.tm-todos-h { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tm-todos-h svg, .tm-todos-none svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tm-lbl { display: flex; align-items: center; gap: 6px; margin: 16px 0 8px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tm-lbl svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chips-t { margin-top: 0; }
.tm-todos-l { display: flex; flex-wrap: wrap; gap: 7px; min-width: 0; }
.tm-todo { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; padding: 7px 12px 7px 9px; border-radius: 12px; border: 1px dashed rgba(184,156,255,.45); background: rgba(138,107,255,.07);
  color: #e4dcff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .25s var(--spring), background .2s, border-color .2s; }
.tm-todo svg { flex: none; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; width: 0; transition: opacity .2s, width .2s; }
.tm-todo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-todo:hover { transform: translateY(-2px); border-style: solid; border-color: rgba(184,156,255,.75); background: rgba(138,107,255,.16); }
.tm-todo.on { border: 1px solid transparent; color: #fff; background: linear-gradient(135deg, #a58bff, #7c5cff); box-shadow: 0 6px 18px rgba(110,80,240,.4); }
.tm-todo.on svg { opacity: 1; width: 13px; }
.tm-todo-more { align-self: center; font-size: 12px; color: var(--muted); }
.tm-todos-none { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.tm-todos-none .link { padding: 0; font-size: 12.5px; }
.tm-dh { padding: 9px 15px 5px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: rgba(0,0,0,.18); }
.tm-item.tdo { justify-content: flex-start; align-items: center; }
.tm-item.tdo svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* Habitudes, Interdictions : un seul bloc, centré */
.en-home.one { grid-template-columns: minmax(0, 640px); padding-top: 70px; }
.en-home.one .en-left { padding-top: 0; }

/* ───────── Easter egg : le clown qui se moque des procrastinateurs (clown.js) ───────── */
.clown { position: fixed; right: 14px; bottom: -6px; z-index: 260; display: flex; align-items: flex-end; pointer-events: none; }
.clown .cl-fig { position: relative; transform: translateY(115%); transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }   /* le liseré clair est dans le dessin (filtre SVG) */
/* projecteur de cirque derrière lui, pour qu'il ressorte sur le fond sombre */
.clown::before { content: ''; position: absolute; right: -40px; bottom: -30px; width: 360px; height: 420px; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse 50% 46% at 55% 58%, rgba(255,236,196,.3), rgba(255,214,150,.1) 55%, transparent 72%); }
.clown.in::before { opacity: 1; } .clown.run::before { opacity: 0; }
.clown .cl-svg { display: block; overflow: visible; transform-origin: 50% 100%; }
.clown.in .cl-fig { animation: clIn .8s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.clown.in .cl-svg { animation: clIdle 1.8s ease-in-out .8s infinite; }
@keyframes clIn { 0% { transform: translateY(115%) rotate(16deg) scale(.85); } 65% { transform: translateY(-7%) rotate(-5deg) scale(1.04); } 100% { transform: none; } }
@keyframes clIdle { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2.5deg) translateY(-3px); } }
.clown .cl-svg g { transform-box: view-box; }   /* origines en coordonnées du dessin (531 × 576) : épaules, cou, chevilles */
.clown .cl-head { transform-origin: 240px 252px; }
.clown .cl-arm-r, .clown .cl-hand-r { transform-origin: 318px 236px; }
.clown .cl-arm-l, .clown .cl-hand-l { transform-origin: 178px 238px; }
.clown .cl-leg-l { transform-origin: 218px 505px; } .clown .cl-leg-r { transform-origin: 366px 488px; }
.clown.laugh .cl-svg { animation: clShake .2s ease-in-out infinite alternate; }
.clown.laugh .cl-head { animation: clHead .4s ease-in-out infinite alternate; }
.clown.laugh .cl-arm-r, .clown.laugh .cl-hand-r { animation: clArmR .2s ease-in-out infinite alternate; }
.clown.laugh .cl-arm-l, .clown.laugh .cl-hand-l { animation: clArmL .4s ease-in-out infinite alternate; }
@keyframes clShake { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-5px) scaleY(.985); } }
@keyframes clHead { from { transform: rotate(-6deg); } to { transform: rotate(5deg) translateY(-3px); } }
@keyframes clArmR { from { transform: rotate(0); } to { transform: rotate(-6deg); } }
@keyframes clArmL { from { transform: rotate(0); } to { transform: rotate(5deg); } }
/* la bulle de bande dessinée */
.cl-say { position: absolute; right: calc(100% - 46px); bottom: 72%; width: max-content; max-width: 270px; padding: 12px 16px; border-radius: 22px 22px 6px 22px;
  background: #fffdf3; border: 3px solid #161212; box-shadow: 4px 5px 0 #161212; color: #161212; font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -.01em;
  opacity: 0; transform: scale(.4) rotate(-6deg); transform-origin: 100% 100%; transition: opacity .25s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.cl-say span { display: block; min-height: 1.25em; }
.cl-say::after { content: ''; position: absolute; right: 18px; bottom: -17px; width: 22px; height: 18px; background: #fffdf3; border: 3px solid #161212; border-top: 0; border-left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%); transform: skewX(-24deg); }
.cl-say.on { opacity: 1; transform: none; }
/* il s'enfuit : petits sauts rapides vers la droite */
.clown.run .cl-fig { animation: clRun 1.2s cubic-bezier(.5, 0, .9, .6) forwards; }
.clown.run .cl-svg { animation: clHop .16s ease-in-out infinite alternate; }
.clown.run .cl-leg-l { animation: clLeg .16s ease-in-out infinite alternate; }
.clown.run .cl-leg-r { animation: clLeg .16s ease-in-out infinite alternate-reverse; }
@keyframes clRun { 0% { transform: none; } 18% { transform: translateX(-24px) rotate(-6deg); } 100% { transform: translateX(140%) rotate(10deg); } }
@keyframes clHop { from { transform: translateY(0); } to { transform: translateY(-16px); } }
@keyframes clLeg { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@media (max-width: 560px) { .cl-say { max-width: 190px; font-size: 14px; padding: 10px 13px; } }

/* ───────── Pause automatique : « Tu es toujours là ? » ───────── */
.afk .afk-ic { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; font-size: 28px;
  background: radial-gradient(circle at 35% 30%, #b7a0ff, #6a4be0); box-shadow: 0 0 0 8px rgba(138,107,255,.15), 0 10px 30px rgba(110,80,240,.45); animation: afkPulse 1.8s ease-in-out infinite; }
@keyframes afkPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(138,107,255,.15), 0 10px 30px rgba(110,80,240,.45); } 50% { box-shadow: 0 0 0 16px rgba(138,107,255,.06), 0 10px 30px rgba(110,80,240,.45); } }

/* ───────── Rétention pas encore lancée, et choix homme / femme à l'inscription ───────── */
.en-off { max-width: 520px; margin: 40px auto 0; }
.en-off-ic { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ff9a3d, #d8422a); box-shadow: 0 0 0 10px rgba(255,138,61,.12), 0 12px 32px rgba(216,66,42,.4); }
.en-off-ic svg { width: 42px; height: 42px; fill: #fff3d6; }
.en-off h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--text); }
.seg.sex { max-width: 320px; margin-top: 6px; }

/* Suggestions de tâches dans « Ajouter une entrée », et la question du deepwork quand on coche une tâche */
.ent-sug { margin: 8px 0 2px; }
.ent-sg-h { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ent-sg-h svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ent-sg-l { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ent-sg { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: #d9d3ff; border: 1px solid var(--line2); background: rgba(255,255,255,.03); transition: .16s; }
.ent-sg svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ent-sg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ent-sg:hover { color: #fff; border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.ent-sg.on { color: #fff; border-color: var(--violet); background: color-mix(in srgb, var(--violet) 26%, transparent); }
.tk-dw h2 { margin: 0 0 6px; font-size: 21px; }
.tk-dw .muted { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; }
.tk-dwl { display: grid; gap: 7px; max-height: 46vh; overflow: auto; margin: 4px 0 2px; }
.tk-dwt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 15px; cursor: pointer; text-align: left;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--text); border: 1px solid var(--line); background: rgba(255,255,255,.025); transition: .16s; }
.tk-dwt svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--muted); }
.tk-dwt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-dwt:hover { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 14%, transparent); transform: translateX(2px); }

/* ───────── « Ce que je veux arrêter » : cinq univers, cent paliers (stop.js) ─────────
   Le bloc réutilise la mise en page de la rétention (.rt-*) ; seul l'anneau change. */
.st-em { font-size: 26px; display: grid; place-items: center; }
.st-ring { --D: 280px; position: relative; width: var(--D); height: var(--D); margin-bottom: 14px; }
.st-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-track-svg { transform: rotate(-90deg); }
.st-track { fill: none; stroke: color-mix(in srgb, var(--sc) 16%, rgba(255,255,255,.06)); stroke-width: 13; }
.st-bar { fill: none; stroke: var(--sc); stroke-width: 13; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease), stroke .8s;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sc) 80%, transparent)); }
.st-halo { position: absolute; inset: -12%; border-radius: 50%; pointer-events: none; opacity: var(--sg, .3); transition: background .8s;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sc) 40%, transparent), transparent 72%); animation: stBreathe 4.2s ease-in-out infinite; }
@keyframes stBreathe { 50% { opacity: calc(var(--sg, .3) * 1.7); transform: scale(1.04); } }
.st-art { z-index: 1; }
.st-crans-svg { z-index: 2; }
.st-cran-new { animation: stCran .9s var(--spring) both; }
@keyframes stCran { 0% { transform: scale(0); } 60% { transform: scale(1.5); } }
.st-mid { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 3; display: flex; justify-content: center; pointer-events: none; }
.st-plate { display: flex; flex-direction: column; align-items: center; padding: 3px 16px 6px; border-radius: 18px;
  background: rgba(9,7,24,.58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.09); }
.st-mid b { font-size: calc(var(--D) * .155); font-weight: 900; line-height: .95; letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.75); }
.st-mid small { font-size: 12px; color: #d6d0f2; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.st-sun { animation: stPulse 4.6s ease-in-out infinite; transform-origin: center; }
@keyframes stPulse { 50% { filter: brightness(1.18); } }
.st-rays { animation: stSpin 44s linear infinite; }
@keyframes stSpin { to { transform: rotate(360deg); } }
.st-beam { animation: stSweep 7.5s ease-in-out infinite; }
@keyframes stSweep { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
.st-lamp { animation: stLamp 3.1s ease-in-out infinite; }
@keyframes stLamp { 50% { opacity: .55; } }
.st-crown { animation: stSway 6.4s ease-in-out infinite; transform-origin: 125px 190px; }
@keyframes stSway { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }
.st-fruit { animation: stPulse 3.8s ease-in-out infinite; }
.st-spark { animation: stSpark 2.8s ease-in-out infinite; }
@keyframes stSpark { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.st-cloud { animation: stDrift 11s ease-in-out infinite; }
@keyframes stDrift { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.st-flag { animation: stFlag 2.4s ease-in-out infinite; transform-origin: left center; }
@keyframes stFlag { 50% { transform: scaleX(.86); } }
.st-bird { animation: stDrift 9s ease-in-out infinite; }
.kn-bob { animation: soFloat 4.6s ease-in-out infinite; }
.kn-rays { transform-box: view-box; animation: spin360 44s linear infinite; }
.kn-glow, .kn-shroom { animation: stSpark 2.4s ease-in-out infinite; }
.kn-eyes { animation: stSpark 1.8s ease-in-out infinite; }
.kn-halo { animation: soHalo 3s ease-in-out infinite; }
.kn-fire { animation: stSpark 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kn-bob, .kn-rays, .kn-glow, .kn-shroom, .kn-eyes, .kn-halo, .kn-fire { animation: none; } }
@media (prefers-reduced-motion: reduce) {
  .st-halo, .st-sun, .st-rays, .st-beam, .st-lamp, .st-crown, .st-fruit, .st-spark, .st-cloud, .st-flag, .st-bird, .st-cran-new { animation: none; }
}
/* la liste des cent paliers */
.overlay.st-ov .box { max-width: 560px; }
.st-list h2 { margin: 0 0 4px; font-size: 22px; }
.st-rows { list-style: none; margin: 14px 0 0; padding: 0; max-height: 58vh; overflow: auto; display: grid; gap: 5px; }
.st-era { margin: 14px 0 2px; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.st-era:first-child { margin-top: 0; }
.st-era span { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid var(--line2); }
.st-row { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(255,255,255,.02); }
.st-row i { font-style: normal; font-size: 11px; font-weight: 900; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-row b { font-size: 14px; font-weight: 800; }
.st-row em { font-style: normal; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.st-row.done { opacity: .55; }
.st-row.done i { color: var(--sc); }
.st-row.on { border-color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--sc) 24%, transparent); }
.st-row.on b { color: #fff; }
.st-you { padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: #120e2e; background: var(--sc); }
.st-up-em { font-size: 34px; display: grid; place-items: center; }
@media (max-width: 900px) { .st-ring { --D: 240px; } }

/* le tracé nerveux du café, et la petite tasse qui se vide */
.st-onde { animation: stOnde 3.2s ease-in-out infinite; }
@keyframes stOnde { 50% { opacity: .78; } }
.st-coeur { animation: stCoeur var(--bpm, 1s) ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes stCoeur { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 26% { transform: scale(1); } 38% { transform: scale(1.12); } }
.st-vap { animation: stVap 3.6s ease-in-out infinite; }
@keyframes stVap { 0%, 100% { opacity: .18; transform: translateY(2px); } 50% { opacity: .55; transform: translateY(-3px); } }
.rt-b.go { color: #0f2a16; border-color: transparent; background: linear-gradient(135deg, #9fe06a, #4fae62); font-weight: 900; }
.rt-b.go:hover { filter: brightness(1.07); transform: translateY(-1px); }
.rt-b.done { color: #9fe06a; border-color: color-mix(in srgb, #4fae62 45%, transparent); background: color-mix(in srgb, #4fae62 16%, transparent); }
@media (prefers-reduced-motion: reduce) { .st-onde, .st-coeur, .st-vap { animation: none; } }

/* ───────── Tableau de bord compact : une carte par centre d'intérêt ─────────
   Le détail s'ouvre dans une fenêtre (.lf-pop) qu'on ferme avec la croix. */
.lf-board.mini { gap: 16px; }
.lf-board.mini > * { grid-column: span 4; }
@media (max-width: 1100px) { .lf-board.mini > * { grid-column: span 6; } }
@media (max-width: 680px) { .lf-board.mini > * { grid-column: span 12; } }
.lf-mini { position: relative; border-radius: 22px; overflow: hidden; border: 1.5px solid color-mix(in srgb, var(--ec) 34%, var(--line));
  background: radial-gradient(130% 130% at 16% -10%, color-mix(in srgb, var(--ec) 13%, transparent), transparent 62%), rgba(16,14,38,.72);
  box-shadow: 0 18px 44px rgba(0,0,0,.4); transition: transform .18s var(--ease), border-color .2s, box-shadow .2s; }
.lf-mini:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--ec) 60%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--ec) 26%, transparent); }
.lf-mi-go { display: block; width: 100%; padding: 14px 15px 12px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lf-mi-hd { display: flex; align-items: center; gap: 9px; }
.lf-mi-em { font-size: 19px; line-height: 1; flex: none; }
.lf-mi-hd b { flex: 1; min-width: 0; font-size: 15px; font-weight: 900; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-mi-hd i { flex: none; font-style: normal; font-size: 10.5px; font-weight: 900; letter-spacing: .06em; color: var(--muted);
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line2); font-variant-numeric: tabular-nums; }
.lf-mv { position: relative; margin: 10px auto 4px; width: 100%; max-width: 210px; }
.lf-mv .en-ring, .lf-mv .st-ring { --D: 100%; width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.lf-mv .pcv { border-radius: 14px; }
/* le chiffre est déjà repris sous le visuel : on garde les flammes, on masque le compteur */
.lf-mv .st-mid { display: none; }
.lf-mv .en-mid b, .lf-mv .en-mid small, .lf-mv .en-clock { display: none; }
.lf-mv .en-fl { font-size: calc(var(--D, 210px) * .2); }
.lf-mi-ft { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; }
.lf-mi-n b { font-size: 21px; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lf-mi-n small { margin-left: 4px; font-size: 11px; font-weight: 800; color: var(--muted); }
.lf-mi-st { font-size: 12px; font-weight: 800; color: color-mix(in srgb, var(--ec) 45%, #fff); text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.lf-mi-pg { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.lf-mi-bar { flex: 1; height: 13px; border-radius: 999px; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.lf-mi-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--ec) 55%, #fff), var(--ec));
  box-shadow: 0 0 14px color-mix(in srgb, var(--ec) 65%, transparent); transition: width .8s var(--ease); }
.lf-mi-pc { flex: none; font-size: 12.5px; font-weight: 900; letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--ec) 45%, #fff); min-width: 38px; text-align: right; }
.lf-mi-b { display: flex; align-items: center; justify-content: center; gap: 7px; width: calc(100% - 30px); margin: 0 15px 14px;
  padding: 9px 12px; border-radius: 13px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  border: 1px solid var(--line2); background: rgba(255,255,255,.04); color: var(--text); transition: .16s; }
.lf-mi-b svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lf-mi-b.go { color: #0f2a16; border-color: transparent; background: linear-gradient(135deg, #9fe06a, #4fae62); font-weight: 900; }
.lf-mi-b.go:hover { filter: brightness(1.08); }
.lf-mi-b.done { color: #9fe06a; border-color: color-mix(in srgb, #4fae62 40%, transparent); background: color-mix(in srgb, #4fae62 14%, transparent); cursor: default; }
/* la fenêtre de détail */
.overlay.lf-pop-ov .box { max-width: 980px; padding: 12px; }
.lf-pop { position: relative; padding: 18px; }
.lf-pop .lf-dt { margin-top: 0; }
.lf-pop-x { position: absolute; right: 12px; top: 12px; z-index: 5; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; cursor: pointer; border: 1px solid var(--line2); background: rgba(12,10,32,.8); color: var(--muted); transition: .16s; }
.lf-pop-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.lf-pop-x:hover { color: #fff; border-color: var(--red); background: color-mix(in srgb, var(--red) 20%, transparent); }
@media (max-width: 720px) { .lf-pop { padding: 10px; } .overlay.lf-pop-ov .box { padding: 6px; } }

}

/* les deux familles du tableau de bord */
.lf-famb { margin-top: 26px; }
.lf-famb:first-of-type { margin-top: 6px; }
.lf-famb > h3 { margin: 0 0 14px; font-size: 17px; }

/* Muscle PC : le vivarium tient dans le même anneau que les autres */
.pc-vr-in { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; z-index: 1; }
.pc-vr-in .pcv { position: absolute; top: 0; left: 50%; height: 100%; width: 134%; transform: translateX(-50%); border-radius: 0; }
.pc-view .st-ring { --D: 100%; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; margin: 0 auto; }

/* Musculation : vert et calme en anabolisme, rouge et affolé en catabolisme */
.gy-calm { animation: gyCalm 4.6s ease-in-out infinite; }
@keyframes gyCalm { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.gy-panic { animation: gyPanic .42s ease-in-out infinite; }
@keyframes gyPanic { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2px, 1px) rotate(-.7deg); }
  75% { transform: translate(2px, -1px) rotate(.7deg); } }
.gy-up text { font-weight: 900; animation: gyUp 3.4s ease-in-out infinite; }
@keyframes gyUp { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-16px); } }
.gy-dn path { animation: gyDn 1.9s ease-in infinite; }
@keyframes gyDn { 0% { opacity: 0; transform: translateY(-6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(22px); } }
.gy-warn { animation: gyWarn .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gyWarn { 50% { opacity: .35; } }
.gy-b.on { color: #6edc7c; } .gy-b.off { color: #f07070; }
.gy-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 10px; }
.gy-c { padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800;
  color: var(--muted); border: 1px solid var(--line2); background: rgba(255,255,255,.03); transition: .16s; }
.gy-c:hover { color: var(--text); border-color: var(--gc); }
.gy-c.on { color: #0f2a16; border-color: transparent; background: var(--gc); }
.gy-hint { margin: 12px 0 0; padding: 11px 13px; border-radius: 13px; font-size: 12.8px; line-height: 1.55; color: #cfc9ee;
  border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.overlay.gy-mod .box { max-width: 460px; }
@media (prefers-reduced-motion: reduce) { .gy-calm, .gy-panic, .gy-up text, .gy-dn path, .gy-warn { animation: none; } }

/* Le bouton d'ajout : compact, centré, et qui donne envie d'appuyer */
.lf-add { display: inline-flex; align-items: center; gap: 12px; width: auto; margin: 30px auto 0; padding: 13px 26px 13px 15px;
  border-radius: 999px; cursor: pointer; font: inherit; color: #fff; border: 0; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #c3a6ff, #8a6bff 45%, #6a3fe0); box-shadow: 0 14px 34px rgba(138,107,255,.42), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .16s var(--spring), box-shadow .2s, filter .2s; }
.lf { display: flex; flex-direction: column; }
.lf > .lf-add { align-self: center; }
.lf-add::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform: translateX(-120%); animation: lfShine 3.6s ease-in-out infinite; }
@keyframes lfShine { 0%, 62% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
.lf-add:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 20px 46px rgba(138,107,255,.6), inset 0 1px 0 rgba(255,255,255,.6); filter: saturate(1.1); }
.lf-add:active { transform: translateY(-1px) scale(.99); }
.lf-ad-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.lf-ad-ic svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; }
.lf-ad-t { display: grid; gap: 1px; text-align: left; }
.lf-ad-t b { font-size: 15px; font-weight: 900; letter-spacing: -.01em; }
.lf-ad-t small { font-size: 11.5px; font-weight: 700; opacity: .72; }
.lf-ad-p { display: none; }
@media (prefers-reduced-motion: reduce) { .lf-add::after { animation: none; } }
@media (max-width: 560px) { .lf-add { width: 100%; justify-content: center; } }

/* ───────── Carte de joueur : le rang façon classé, les blocs qu'on masque ou remet ───────── */
.pc-ranked { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px;
  margin: 0 0 14px; padding: 16px 24px 16px 14px; border-radius: 24px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  background: radial-gradient(90% 140% at 12% 50%, color-mix(in srgb, var(--pc) 26%, transparent), transparent 70%),
    linear-gradient(90deg, color-mix(in srgb, var(--pc2) 30%, rgba(8,6,24,.6)), rgba(8,6,24,.55)); }
.pc-rk-em { position: relative; display: grid; place-items: center; width: 190px; }
.pc-rk-em .pc-rkg { position: absolute; inset: 8%; border-radius: 50%; filter: blur(24px); opacity: .55;
  background: radial-gradient(closest-side, var(--pc), transparent); }
.pc-rk-em svg { position: relative; display: block; filter: drop-shadow(0 10px 24px rgba(0,0,0,.5)); }
.pc-rk-in { min-width: 0; }
.pc-rk-in small { display: block; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pc-rk-in > b { display: block; margin: 4px 0 12px; font-size: 38px; font-weight: 900; letter-spacing: -.035em; line-height: 1;
  color: color-mix(in srgb, var(--pc) 40%, #fff); text-shadow: 0 2px 22px color-mix(in srgb, var(--pc) 45%, transparent); }
.pc-rk-bar { height: 14px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.pc-rk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--pc) 50%, #fff), var(--pc));
  box-shadow: 0 0 16px color-mix(in srgb, var(--pc) 60%, transparent); }
.pc-rk-in p { margin: 9px 0 10px; font-size: 13px; color: #cfc9ee; }
.pc-rk-in p strong { color: #fff; font-variant-numeric: tabular-nums; }
.pc-rk-in .pc-kv { margin: 0; max-width: 420px; }
@media (max-width: 640px) {
  .pc-ranked { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 14px; }
  .pc-rk-em { width: 150px; } .pc-rk-in > b { font-size: 30px; } .pc-rk-in .pc-kv { margin: 0 auto; }
}
.pc-t h4 i { margin-left: auto; font-style: normal; font-size: 10px; letter-spacing: .06em; color: var(--muted);
  padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line2); }
.pc-t-em { font-size: 15px; letter-spacing: 0; }
.pc-vring { aspect-ratio: 1; padding: 6px; background: none; }
.pc-vring .st-ring, .pc-vring .en-ring { --D: 100%; width: 100%; height: auto; aspect-ratio: 1; margin: 0; }
.pc-vring .st-mid { display: none; }
/* édition : un œil par bloc */
.pc-blk { position: relative; min-width: 0; }
.pc-blk-tro { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pc-hd .pc-blk-tro .pc-show { margin: 0; }
.pc-eye { position: absolute; top: 8px; right: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px;
  border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 900; color: #0f2a16;
  border: 0; background: #9fe06a; box-shadow: 0 6px 16px rgba(0,0,0,.4); transition: .16s; }
.pc-eye svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-eye.off { color: #fff; background: #5a5478; }
.pc-eye:hover { transform: scale(1.05); }
.pc-off > :not(.pc-eye) { opacity: .28; filter: grayscale(.8); }
.pc-off { border-radius: 20px; outline: 2px dashed rgba(255,255,255,.18); outline-offset: 2px; }
.pc-editbtn { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 900; color: var(--text); border: 1px solid var(--line2); background: rgba(255,255,255,.05); transition: .16s; }
.pc-editbtn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pc-editbtn:hover { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.pc-editbtn.on { color: #0f2a16; border-color: transparent; background: linear-gradient(135deg, #9fe06a, #4fae62); }
.pc-edhint { margin: -6px 2px 14px; padding: 10px 14px; border-radius: 14px; font-size: 12.8px; color: #d9d3ff;
  border: 1px dashed var(--line2); background: rgba(255,255,255,.03); }
.pcard.editing .pc-blk:not(.pc-blk-tro) { padding-top: 0; }
@media (max-width: 720px) { .pc-hd { flex-wrap: wrap; } .pc-blk-tro { margin-left: 0; width: 100%; } .pc-editbtn { margin-left: auto; } }

/* la durée d'une séance : heures et minutes côte à côte */
.gy-hm { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.gy-f { position: relative; display: block; margin: 0; }
.gy-f input { width: 100%; padding-right: 46px; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gy-f span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 800; color: var(--muted); pointer-events: none; }

/* Mission : les tâches du jour, pleines et bien lisibles, avec leur case à cocher */
.tm-todos-l { gap: 8px; }
.tm-todo-w { display: inline-flex; align-items: stretch; max-width: 320px; border-radius: 13px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent); background: color-mix(in srgb, var(--tc) 17%, rgba(255,255,255,.03));
  box-shadow: 0 4px 14px rgba(0,0,0,.28); transition: transform .16s var(--ease), box-shadow .2s, opacity .3s; }
.tm-todo-w:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--tc) 28%, transparent); }
.tm-todo-w .tm-todo { max-width: none; border: 0; border-radius: 0; background: none; padding: 8px 13px 8px 9px;
  font-size: 13.5px; font-weight: 800; color: #f2effc; }
.tm-todo-w .tm-todo:hover { transform: none; background: color-mix(in srgb, var(--tc) 14%, transparent); }
.tm-todo-w .tm-todo.on { background: color-mix(in srgb, var(--tc) 42%, transparent); box-shadow: none; }
.tm-star { font-style: normal; color: #ffd23f; margin-right: 2px; }
.tm-ck { flex: none; display: grid; place-items: center; width: 38px; cursor: pointer; border: 0;
  border-right: 1.5px solid color-mix(in srgb, var(--tc) 40%, transparent); background: color-mix(in srgb, var(--tc) 12%, transparent); color: transparent; transition: .16s; }
.tm-ck::before { content: ""; position: absolute; }
.tm-ck svg { width: 18px; height: 18px; padding: 2px; border-radius: 50%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 70%, #fff); opacity: 1 !important; transition: .16s; }
.tm-ck:hover { color: #fff; background: color-mix(in srgb, #4fae62 55%, transparent); }
.tm-ck:hover svg { box-shadow: inset 0 0 0 2px #fff; }
.tm-todo-w.done { opacity: .35; transform: scale(.96); pointer-events: none; }
.tm-todo-w.done .tm-ck { color: #fff; background: #4fae62; }

/* ───────── Rétention : le personnage au centre de l'anneau (soul.js) ───────── */
.en-fl:has(.ens) { height: auto; margin-bottom: 0; }
.ens { display: block; width: calc(var(--D, 260px) * .4); filter: drop-shadow(0 0 calc(4px + var(--eg, .3) * 14px) color-mix(in srgb, var(--g, #ff8a3d) 60%, transparent)); }
.ens svg { display: block; width: 100%; height: auto; overflow: visible; }
.en-ring:has(.ens) .en-mid b { font-size: calc(var(--D) * .19); }
.lf-mv .ens { width: calc(var(--D, 210px) * .66); }
.pc-vring .ens, .pc-vis .ens { width: 62%; }
.enup-fl .ens { width: 72px; }
.so-float { animation: soFloat 4.2s ease-in-out infinite; }
@keyframes soFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.so-wing { transform-box: view-box; }
.so-wing.l { transform-origin: 82px 124px; animation: soFlapL 2.8s ease-in-out infinite; }
.so-wing.r { transform-origin: 118px 124px; animation: soFlapR 2.8s ease-in-out infinite; }
@keyframes soFlapL { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(7deg); } }
@keyframes soFlapR { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
.so-halo { animation: soHalo 3s ease-in-out infinite; }
@keyframes soHalo { 50% { filter: drop-shadow(0 0 6px #ffe89a); } }
.so-rays { transform-box: view-box; animation: spin360 38s linear infinite; }
.so-spark path { animation: stSpark 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .so-float, .so-wing, .so-halo, .so-rays, .so-spark path { animation: none; } }

/* ───────── v39 — la carte de joueur tient sur un seul écran ─────────
   En-tête · une rangée « rang · niveau de vie · sommeil » · une rangée de 5 centres d'intérêt au plus.
   Les hauteurs suivent la hauteur de l'écran (vh) ; la largeur, celle de la carte (container query). */
.pcard { container: pcard / inline-size; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; }
.pc-hd { margin: 0; gap: 14px; }
.pc-av { width: 64px; height: 64px; }
.pc-img { font-size: 28px; }
.pc-lv { bottom: -8px; font-size: 11px; padding: 1px 8px; }
.pc-id h2 { font-size: 24px; }
.pc-edhint { margin: 0; }
/* la rangée du haut */
.pc-top { display: flex; gap: 12px; height: clamp(176px, 26vh, 270px); min-height: 0; }
.pc-top > .pc-blk { flex: 1 1 0; min-width: 0; display: flex; }
.pc-top > .pc-b-rank { flex-grow: 1.15; } .pc-top > .pc-b-life { flex-grow: 1.35; } .pc-top > .pc-blk[data-part=sleep] { flex-grow: .9; }
.pc-top > .pc-blk > section { flex: 1; min-width: 0; min-height: 0; margin: 0; }
.pc-top .pc-ranked { gap: 14px; padding: 12px 16px 12px 10px; grid-template-columns: auto minmax(0, 1fr); }
.pc-top .pc-rk-em { width: clamp(84px, 13.5vh, 132px); }
.pc-top .pc-rk-em svg { width: 100%; height: auto; }
.pc-top .pc-rk-in > small { letter-spacing: .08em; line-height: 1.3; }
.pc-top .pc-rk-in > b { margin: 3px 0 9px; font-size: clamp(24px, 3.6vh, 34px); }
.pc-top .pc-rk-bar { height: 11px; }
.pc-top .pc-rk-in p { margin: 7px 0 6px; font-size: 12.5px; line-height: 1.35; }
.pc-top .pc-rk-in .pc-kv { font-size: 12px; max-width: 300px; }
.pc-top .pc-life { position: relative; display: flex; }
.pc-top .pc-life .av-sc { position: absolute; inset: 0; width: 100%; height: 100%; }
.pc-top .pc-life-b { position: absolute; left: 0; right: 0; bottom: 0; gap: 12px; padding: 22px 12px 9px;
  background: linear-gradient(transparent, rgba(8,6,24,.82) 45%); }
.pc-top .pc-life-b b { font-size: 19px; }
.pc-top .pc-life-b p { font-size: 12px; line-height: 1.3; }
.pc-top .pc-sleep { display: flex; flex-direction: column; padding: 10px 12px; }
.pc-top .pc-sleep h4 { margin-bottom: 7px; }
.pc-top .pc-sleep .pc-vis { flex: 1 1 0; min-height: 0; width: auto; height: auto; max-width: 100%; aspect-ratio: 4 / 3; align-self: center; }
.pc-top .pc-sleep .pc-kv { margin-top: 7px; font-size: 11.5px; }
.pc-t h4 .pc-t-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* la rangée des centres d'intérêt : 5 au plus, sur une ligne */
.pc-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 10px; }
.pc-grid .pc-t { padding: 10px 10px 8px; align-items: stretch; }
.pc-grid .pc-t h4 { justify-content: center; margin-bottom: 4px; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: #e6e1ff; }
.pc-grid .pc-vring { position: relative; overflow: visible; width: min(100%, clamp(88px, 18vh, 180px)); margin: 0 auto; padding: 4px; }
.pcd-tier { position: absolute; left: 50%; bottom: 0; z-index: 4; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 900;
  color: #fff; white-space: nowrap; background: color-mix(in srgb, var(--ec, #8a6bff) 55%, #120f28); border: 1px solid color-mix(in srgb, var(--ec, #8a6bff) 70%, #fff 10%); box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.pc-grid .pc-name { justify-content: center; margin: 6px 0 0; min-height: 0; font-size: 13px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
.pc-grid .pc-big { justify-content: center; margin: 1px 0 0; }
.pc-grid .pc-big b { font-size: 20px; }
.pc-grid .pc-big b small { font-size: 11px; }
/* l'œil de l'édition : juste l'icône sur les petits blocs */
.pc-grid .pc-eye, .pc-top .pc-eye { top: 6px; right: 6px; padding: 6px; }
.pc-grid .pc-eye span, .pc-top .pc-eye span { display: none; }
/* édition : les centres d'intérêt qui ne sont pas sur la carte */
.pc-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; border: 1px dashed rgba(184,156,255,.35); background: rgba(0,0,0,.18); }
.pc-tray small { margin-right: 4px; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #cfc9ee; }
.pc-tray em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.pc-addl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800;
  color: #d9d3ff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); }
.pc-addl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.pc-addl:hover { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 16%, transparent); }
.pc-addl.full { opacity: .5; }
/* dans la fenêtre d'un autre joueur, la carte est plus étroite */
.overlay.pc-ov .box { max-width: 980px; }
/* carte étroite (téléphone, tablette) : tout reste visible, en plus petit */
@container pcard (max-width: 760px) {
  .pc-top { flex-wrap: wrap; height: auto; }
  .pc-top > .pc-b-rank { flex: 1 1 100%; }
  .pc-top > .pc-b-life, .pc-top > .pc-blk[data-part=sleep] { flex: 1 1 0; height: clamp(104px, 17vh, 170px); }
  .pc-top .pc-ranked { padding: 8px 12px 8px 8px; }
  .pc-top .pc-rk-em { width: 64px; }
  .pc-top .pc-rk-in > b { font-size: 22px; margin: 2px 0 6px; }
  .pc-top .pc-rk-in p { margin: 5px 0 0; font-size: 11.5px; }
  .pc-top .pc-rk-in .pc-kv { display: none; }
  .pc-top .pc-life-b { padding: 16px 8px 6px; } .pc-top .pc-life-b p { display: none; } .pc-top .pc-life-b b { font-size: 16px; }
  .pc-top .pc-sleep { padding: 7px 8px; } .pc-top .pc-sleep .pc-kv { display: none; }
  .pc-grid { gap: 6px; }
  .pc-grid .pc-t { padding: 6px 4px; border-radius: 14px; }
  .pc-grid .pc-t h4 { font-size: 11px; }
  .pcd-tier { font-size: 9px; padding: 1px 5px; }
  .pc-grid .pc-vring { width: 100%; padding: 2px; }
  .pc-grid .pc-name { font-size: 10.5px; margin-top: 3px; }
  .pc-grid .pc-big b { font-size: 14px; } .pc-grid .pc-big b small { display: none; }
}
@container pcard (max-width: 520px) { .pc-grid .pc-t h4 .pc-t-nm { display: none; } .pc-grid .pc-t h4 { font-size: 15px; } }
@container pcard (max-width: 460px) { .pc-grid .pc-name { display: none; } .pcd-tier { display: none; } }
@media (max-width: 560px) { .pcard { gap: 9px; } .pc-av { width: 52px; height: 52px; } .pc-img { font-size: 24px; } .pc-id h2 { font-size: 19px; } }
/* v40 — marcher au soleil : la durée et le(s) moment(s) de la journée */
.sn-moms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.sn-mom { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border-radius: 16px; cursor: pointer; font: inherit; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.12); transition: transform .15s, border-color .15s, background .15s; }
.sn-mom .sn-e { font-size: 26px; line-height: 1; filter: grayscale(.7); transition: filter .15s; }
.sn-mom b { font-size: 12.5px; font-weight: 800; line-height: 1.2; text-align: center; color: var(--text); }
.sn-mom small { font-size: 11px; font-weight: 800; color: var(--muted); }
.sn-mom:hover { border-color: #ffc94a; }
.sn-mom.on { color: #3a2a00; border-color: #ffc94a; background: linear-gradient(160deg, rgba(255,201,74,.3), rgba(255,140,60,.18)); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,180,60,.22); }
.sn-mom.on .sn-e { filter: none; }
.sn-mom.on small { color: #ffd98a; }
.sn-hint b { color: #ffd98a; }
/* carte très étroite (téléphone) : le bouton d'édition devient une icône sur la première ligne, l'état de la muscu une pastille */
@container pcard (max-width: 460px) {
  .pc-hd .pc-id { flex: 1 1 0; }
  .pc-hd .pc-editbtn { order: 2; padding: 9px; margin-left: 0; } .pc-hd .pc-editbtn span { display: none; }
  .pc-hd .pc-blk-tro { order: 3; }
  .pc-grid .pc-big { min-height: 17px; align-items: center; }
  .pc-grid .gy-b { display: inline-block; width: 11px; height: 11px; padding: 0; border-radius: 50%; font-size: 0; background: currentColor; box-shadow: 0 0 8px currentColor; }
}
/* v41 — étirements et méditation */
.et-fig { animation: none; }
.et-aur { animation: etAur 7s ease-in-out infinite; }
@keyframes etAur { 50% { transform: translateY(6px); opacity: .55; } }
.et-rub { animation: etRub 2.2s linear infinite; }
@keyframes etRub { to { stroke-dashoffset: -32; } }
.zen-fig { animation: zenBreath 6s ease-in-out infinite; }
@keyframes zenBreath { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.028); } }
.zen-lev { animation: zenLev 5s ease-in-out infinite; }
@keyframes zenLev { 50% { transform: translateY(-4px); } }
.zen-th { animation: zenTh 2.6s ease-in-out infinite; }
@keyframes zenTh { 0%, 100% { transform: translate(0, 0); opacity: .95; } 30% { transform: translate(1.5px, -2px); } 60% { transform: translate(-1.5px, 1px); opacity: .75; } }
.zen-br { animation: zenBr 6s ease-in-out infinite; }
@keyframes zenBr { 0%, 100% { transform: scale(.86); opacity: .15; } 45% { transform: scale(1.08); opacity: .6; } }
.zen-man { animation: spin360 60s linear infinite; }
.zen-aura { animation: zenAura 6s ease-in-out infinite; }
@keyframes zenAura { 50% { transform: scale(1.05); opacity: .8; } }
.zen-chk { animation: stSpark 3s ease-in-out infinite; }
.zen-halo { animation: soHalo 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .et-aur, .et-rub, .zen-fig, .zen-lev, .zen-th, .zen-br, .zen-man, .zen-aura, .zen-chk, .zen-halo { animation: none; } }

/* v42 — étirements et méditation : les fenêtres, la séance guidée */
.rt-b span { white-space: nowrap; }
.ca-ok { color: #7ff0a8; }
.ca-max { align-self: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.zen-mus { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.zen-mus input { position: absolute; opacity: 0; pointer-events: none; }
.zen-sw { flex: none; position: relative; width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s; }
.zen-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); transition: transform .2s; }
.zen-mus input:checked + .zen-sw { background: var(--gc, #8a6bff); }
.zen-mus input:checked + .zen-sw::after { transform: translateX(18px); }
.zen-mus input:focus-visible + .zen-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.zen-mus b { display: block; font-size: 13.5px; } .zen-mus small { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.zen-run { text-align: center; }
.zen-top { margin: 0 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.zen-orb-w { position: relative; width: min(280px, 72vw); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.zen-orb-w svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.zen-tr { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 5; }
.zen-arc { fill: none; stroke: #9fd8ff; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset .4s linear; filter: drop-shadow(0 0 6px rgba(159,216,255,.6)); }
.zen-orb { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; transform: scale(.62); will-change: transform;
  background: radial-gradient(circle at 38% 34%, #ffffff, #bfe6ff 22%, #6a9cff 58%, #5a3fd0); box-shadow: 0 0 60px rgba(120,170,255,.55), inset 0 -12px 30px rgba(40,20,120,.35); }
.zen-mid { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-shadow: 0 2px 12px rgba(20,10,60,.7); }
.zen-mid b { font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: #fff; }
.zen-mid span { font-size: 14px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: #eef4ff; }
.zen-tip { max-width: 360px; margin: 14px auto 16px; font-size: 13px; color: var(--muted); }
.zen-fin { padding: 10px 0; } .zen-fin-ic { font-size: 54px; } .zen-fin h2 { margin: 6px 0; } .zen-fin .btn { margin-top: 14px; }

/* v43 — glisser-déposer : la carte se décolle et suit le pointeur, les autres s'écartent */
.dnd-ph { border-radius: 22px; border: 2px dashed color-mix(in srgb, var(--violet) 60%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--violet) 10%, transparent) 0 10px, transparent 10px 20px); animation: dndPh 1.2s ease-in-out infinite; }
@keyframes dndPh { 50% { border-color: color-mix(in srgb, var(--violet) 95%, transparent); } }
.dnd-lift { filter: drop-shadow(0 26px 44px rgba(0,0,0,.6)); will-change: transform; }
body.dnd-on, body.dnd-on * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }
.lf-grip { touch-action: none; cursor: grab; }
.lf-slot .lf-mi-go { -webkit-touch-callout: none; }
.pcard.editing .pc-grid > .pc-blk { cursor: grab; touch-action: pan-y; }
.pcard.editing .pc-grid > .pc-blk::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 26px; height: 4px; transform: translateX(-50%); border-radius: 4px; background: rgba(255,255,255,.28); }
@media (hover: none) { .lf-grip { opacity: .75; } }
@media (prefers-reduced-motion: reduce) { .dnd-ph { animation: none; } }
.ca-ov .btn { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ca-ov .btn svg { flex: none; width: 17px; height: 17px; fill: currentColor; }
/* les boutons d'action des blocs : l'icône garde sa taille (écrasée, elle ressemblait à un point), le texte reste sur une ligne */
.rt-act { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
.rt-b svg, .pc-b svg { flex: none; }
.rt-b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.zen-run .pc-r-act { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* la carte de joueur : le panneau du rang se resserre quand il manque de place, au lieu de déborder */
.pc-top > .pc-b-rank { container-type: inline-size; }
.pc-top .pc-rk-in > b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container rkb (max-width: 320px) {   /* bloc étroit : le rang passe à la verticale, logo au-dessus, texte centré */
  .pc-ranked { grid-template-columns: 1fr !important; justify-items: center; align-content: center; text-align: center; gap: 2px !important; padding: 8px 8px !important; }
  .pc-rk-em { width: min(72cqw, 158px) !important; }
  .pc-ranked.long .pc-rk-em { width: min(56cqw, 132px) !important; }   /* nom sur deux lignes : un logo un peu plus petit */
  .pc-rk-in > b { font-size: clamp(18px, 15cqw, 32px) !important; margin: 3px 0 4px !important; white-space: normal; }
  .pc-rk-in > small { font-size: 9px !important; letter-spacing: .06em !important; }
  .pc-rk-wk { font-size: 12px !important; } .pc-rk-nx { font-size: 11px !important; margin-bottom: 0 !important; }
  .pc-rk-in .pc-kv { display: none; }
}

/* v44 — la carte de joueur : agrandir la scène de vie et l'enclos */
.pz-go { cursor: zoom-in; }
.pz-hint { position: absolute; top: 8px; left: 8px; z-index: 5; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #fff;
  background: rgba(10,8,30,.62); border: 1px solid rgba(255,255,255,.18); opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s; pointer-events: none; }
.pz-hint svg { width: 16px; height: 16px; }
.pz-go:hover .pz-hint, .pz-go:focus-visible .pz-hint { opacity: 1; transform: none; }
@media (hover: none) { .pz-hint { opacity: .85; transform: none; } }
.pcard.editing .pz-go { cursor: grab; } .pcard.editing .pz-hint { display: none; }
.pz { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; background: rgba(6,5,20,.84); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s; }
.pz.on { opacity: 1; }
.pz-box { width: min(1100px, 100%); }
.pz-box.pen { width: min(900px, 100%, calc((100vh - 150px) * 4 / 3)); }
.pz-box.life { width: min(1200px, 100%, calc((100vh - 150px) * 16 / 9)); }
.pz-stage { position: relative; overflow: hidden; border-radius: 22px; touch-action: none; cursor: zoom-in; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); background: #0d0a34; }
.pz-stage.zoomed { cursor: grab; } .pz-stage.zoomed:active { cursor: grabbing; }
.pz-box.pen .pz-stage { aspect-ratio: 4 / 3; } .pz-box.life .pz-stage { aspect-ratio: 16 / 9; }
.pz-in { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.pz-in .pc-pen { position: absolute; inset: 0; }
.pz-in .av-sc { display: block; width: 100%; height: 100%; }
.pz-tools { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.pz-tools button { min-width: 44px; height: 40px; padding: 0 14px; border-radius: 12px; cursor: pointer; font: inherit; font-size: 18px; font-weight: 900; color: #fff;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }
.pz-tools .pz-pct { font-size: 13px; min-width: 76px; font-variant-numeric: tabular-nums; }
.pz-tools button:hover { background: rgba(255,255,255,.14); }
/* v45 — la carte de joueur : l'enclos en plein bloc (au format 4/3 de l'onglet Sommeil), la courbe $DODO, un rang qui remplit son bloc */
.pc-top { --rowh: clamp(176px, 26vh, 270px); height: var(--rowh); }
.pc-top > .pc-blk[data-part=sleep] { flex: none; width: calc(var(--rowh) * 4 / 3); }
.pc-top .pc-sleep { position: relative; padding: 0; overflow: hidden; }
.pc-sl-vis { position: absolute; inset: 0; background: #0d0a34; }
.pc-sl-vis .pen-stage { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.pc-sl-vis .pc-pen { position: absolute; inset: 0; }
.pc-sl-vis .pc-dodo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pc-dodo-void { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; font-size: 13px; color: var(--muted); }
.pc-sl-vis .pz-hint { top: auto; left: auto; right: 8px; bottom: 34px; }
.pc-sl-hd { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 6; display: flex; pointer-events: none; }
.pc-sl-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(10,8,30,.7); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); pointer-events: auto; }
.pc-sl-tabs button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 800; color: #cfc9ee; background: none; border: 0; }
.pc-sl-tabs button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pc-sl-tabs button b { font-weight: 900; letter-spacing: .02em; }
.pc-sl-tabs button.on { color: #fff; background: linear-gradient(135deg, #8a6bff, #6a4be0); }
.pc-sl-ft { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 8px; padding: 18px 11px 7px;
  font-size: 11.5px; font-weight: 700; color: #cfc9ee; background: linear-gradient(transparent, rgba(8,6,24,.88)); pointer-events: none; }
.pc-sl-ft b { color: #fff; font-weight: 900; }
.pz-box.dodo { width: min(1060px, 100%); }
.pz-dodo { padding: 14px; border-radius: 22px; background: #120f2a; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); }
/* le rang remplit son bloc : logo et texte à l'échelle de la largeur disponible */
.pc-top .pc-ranked { gap: 4cqw; padding: 10px 5cqw 10px 3cqw; }
.pc-top .pc-rk-em { width: clamp(72px, 40cqw, 176px); }
.pc-top .pc-rk-in > small { font-size: clamp(9px, 2.9cqw, 11.5px); }
.pc-top .pc-rk-in > b { font-size: clamp(22px, 10.5cqw, 46px); margin: 4px 0 8px; }
.pc-top .pc-rk-wk { margin: 0; font-size: clamp(12px, 4.4cqw, 17px); color: #cfc9ee; }
.pc-top .pc-rk-wk strong { font-size: 1.3em; color: #fff; font-variant-numeric: tabular-nums; }
.pc-top .pc-rk-nx { margin: 3px 0 9px; font-size: clamp(11px, 3.5cqw, 14px); color: var(--muted); }
.pc-top .pc-rk-in .pc-kv { font-size: clamp(11px, 3.4cqw, 13.5px); max-width: none; }
@container pcard (max-width: 760px) {
  .pc-top { --rowh: auto; height: auto; }
  .pc-top > .pc-blk[data-part=sleep] { flex: none; height: clamp(104px, 17vh, 170px); width: calc(clamp(104px, 17vh, 170px) * 4 / 3); }
  .pc-top .pc-sleep .pc-sl-ft { display: none; }
  .pc-sl-tabs button span { display: none; }
}

/* l'enclos de la carte : cadrage normal, infos en haut pour ne rien cacher du pré */
.pc-sl-hd { justify-content: space-between; align-items: flex-start; }
.pc-sl-st { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; color: #cfc9ee;
  background: rgba(10,8,30,.7); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(6px); pointer-events: auto; }
.pc-sl-st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.pc-sl-st b { color: #fff; font-weight: 900; font-variant-numeric: tabular-nums; }
.pc-sl-vis .pz-hint { bottom: 8px; }
/* le bouton d'agrandissement : en bas à droite, pour la scène de vie comme pour l'enclos */
.pc-life .pz-hint { top: auto; left: auto; right: 8px; bottom: 8px; z-index: 6; }
.pc-top .pc-life-b { padding-right: 46px; }
/* la courbe $DODO hors de l'onglet Sommeil (carte de joueur, visionneuse) : mêmes couleurs de bougies */
.pc-dodo, .pz-dodo { --up: #0ecb81; --dn: #f6465d; }

/* v46 — l'en-tête de la carte : photo plus grande, trophée à la une juste à droite du pseudo */
.pcard .pc-hd { align-items: center; gap: 18px; }
.pcard .pc-av { width: 92px; height: 92px; }
.pcard .pc-img { font-size: 40px; }
.pcard .pc-lv { bottom: -9px; font-size: 12px; padding: 2px 10px; }
.pc-idr { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.pc-idr h2 { font-size: 26px; }
.pc-idr .pc-blk-tro { margin-left: 0; }
.pc-hd .pc-editbtn { margin-left: auto; align-self: flex-start; }
.pc-since { margin-top: 5px; }
@container pcard (max-width: 560px) { .pcard .pc-av { width: 64px; height: 64px; } .pcard .pc-img { font-size: 28px; } .pc-idr h2 { font-size: 20px; } }

/* v47 — Muscle PC : le vivarium entier dans le cercle (comme sur la première planche), le bocal des séances 0-2 vu de près */
.pc-vr-in { background: linear-gradient(var(--vw, #1b2138) 0 52%, var(--vs, #c9b184) 52%); }
.pc-vr-in .pcv { top: 50%; left: 50%; width: 100%; height: auto; transform: translate(-50%, -50%); }
.pc-vr-in .pcv.t0 { width: 250%; top: -70%; transform: translateX(-50%); }
/* l'en-tête de la carte : « Depuis… » sous le pseudo, trophée à la une plus grand, compteur tout à droite */
.pc-nm { display: flex; flex-direction: column; min-width: 0; }
.pc-nm .pc-since { margin: 2px 0 0; font-size: 11.5px; white-space: nowrap; }
.pc-idr { align-items: center; }
.pc-hd .pc-show { padding: 7px 16px 7px 7px; gap: 10px; max-width: 280px; }
.pc-hd .pc-show .medal { width: 58px; height: 58px; }
.pc-hd .pc-show b { font-size: 15.5px; } .pc-hd .pc-show small { font-size: 11px; }
.pc-hd-r { margin-left: auto; align-self: flex-start; display: flex; align-items: center; gap: 10px; }
.pc-hd-r .pc-editbtn { margin-left: 0; }
/* le rang occupe toute la hauteur de son bloc */
.pc-top .pc-ranked { align-content: center; }
.pc-top .pc-rk-em { width: clamp(84px, 46cqw, 200px); }
.pc-top .pc-rk-in > b { font-size: clamp(24px, 12.5cqw, 52px); margin: 6px 0 10px; }
.pc-top .pc-rk-wk { font-size: clamp(13px, 5cqw, 19px); margin-bottom: 10px; }

/* les centres d'intérêt de la carte : toujours la taille d'un cinquième, centrés quand il y en a moins de 5 */
.pc-grid { grid-template-columns: repeat(var(--n, 5), minmax(0, calc((100% - 40px) / 5))); justify-content: center; }
/* v48 — le texte du rang s'adapte à la place qu'il a vraiment (sa colonne), jamais tronqué */
.pc-top .pc-ranked { grid-template-columns: auto minmax(0, 1fr); }
.pc-top .pc-rk-em { width: clamp(76px, 40cqw, 190px); }
.pc-top .pc-rk-in { container-type: inline-size; min-width: 0; }
.pc-top .pc-rk-in > small { font-size: clamp(8.5px, 5.2cqw, 11.5px); letter-spacing: .07em; white-space: nowrap; overflow: visible; }
.pc-top .pc-rk-in > b { font-size: clamp(19px, 19cqw, 48px); line-height: 1.02; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; overflow-wrap: break-word; }
.pc-top .pc-rk-wk { font-size: clamp(11.5px, 8cqw, 19px); }
.pc-top .pc-rk-in .pc-kv { font-size: clamp(10.5px, 6.6cqw, 13.5px); gap: 2px 8px; }
.pc-top .pc-rk-in { justify-self: stretch; width: 100%; }   /* un conteneur de requête n'a pas de largeur propre : on l'étire */

/* deux conteneurs nommés : le bloc du rang (pour passer à la verticale) et la colonne de texte (pour la taille des lettres) */
.pc-top > .pc-b-rank { container: rkb / inline-size; }
.pc-top .pc-rk-in { container: rkt / inline-size; }
/* v49 — musculation : aujourd'hui / hier, la perte de terrain */
.gy-when { display: flex; gap: 8px; align-items: stretch; }
.gy-when .gy-day { flex: none; }
.gy-when .gy-day button { white-space: nowrap; }   /* « ven. 2 oct. » : un jour touché dans l'historique, sur une ligne */
.gy-when input { flex: 1; min-width: 0; }
.gy-perd { color: #ff7a7a; }
/* v50 — alcool, malbouffe, scroll : chaque palier bouge */
.al-bub { animation: alBub 2.4s ease-in infinite; }
@keyframes alBub { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-34px); opacity: 0; } }
.al-sway { animation: alSway 3.6s ease-in-out infinite; }
@keyframes alSway { 0%, 100% { transform: rotate(calc(var(--sw) * -1)); } 50% { transform: rotate(var(--sw)); } }
.jk-coeur { transform-box: fill-box; transform-origin: center; animation: jkCoeur 1.4s ease-in-out infinite; }
@keyframes jkCoeur { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(.96); } 45% { transform: scale(1.1); } }
.jk-pap { animation: jkPap 5s ease-in-out infinite; }
@keyframes jkPap { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(6px, -5px); } 50% { transform: translate(12px, 2px); } 75% { transform: translate(4px, 6px); } }
.ec-feed { animation: ecFeed var(--spd, 2s) linear infinite; }
@keyframes ecFeed { to { transform: translateY(-104px); } }
.ec-pop { transform-box: fill-box; transform-origin: center; animation: ecPop 3.2s ease-in-out infinite; }
@keyframes ecPop { 0%, 30%, 100% { transform: scale(1) rotate(0); } 6% { transform: scale(1.2) rotate(-8deg); } 12% { transform: scale(.95) rotate(6deg); } 18% { transform: scale(1.06) rotate(-3deg); } }
.ec-pouce { animation: ecPouce .8s ease-in-out infinite; }
@keyframes ecPouce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ec-halo { transform-box: fill-box; transform-origin: center; animation: ecHalo 4s ease-in-out infinite; }
@keyframes ecHalo { 50% { transform: scale(1.08); } }
.ec-mote { animation: ecMote 5.5s ease-in-out infinite; }
@keyframes ecMote { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(9px, -24px); opacity: 0; } }
.ec-bulb { animation: ecBulb 1.8s ease-in-out infinite; }
@keyframes ecBulb { 50% { opacity: .3; } }
.ec-rideau { transform-box: fill-box; transform-origin: 50% 0; animation: ecRideau 4.4s ease-in-out infinite alternate; }
@keyframes ecRideau { from { transform: skewX(-1.8deg); } to { transform: skewX(1.8deg); } }
.ec-feuille { transform-box: fill-box; transform-origin: 50% 100%; animation: ecFeuille 3.2s ease-in-out infinite alternate; }
@keyframes ecFeuille { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.ec-vapeur { animation: ecVapeur 2.4s ease-out infinite; }
@keyframes ecVapeur { 0% { transform: translateY(2px); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-9px); opacity: 0; } }
.ec-page { transform-box: view-box; transform-origin: 0 0; animation: ecPage 6s ease-in-out infinite; }
@keyframes ecPage { 0%, 55% { transform: scaleX(1); opacity: 0; } 57% { opacity: 1; } 68% { transform: scaleX(.2) skewY(-7deg); } 80% { transform: scaleX(-1); opacity: 1; } 84%, 100% { transform: scaleX(-1); opacity: 0; } }
.ec-rays { transform-box: view-box; transform-origin: 0 0; animation: spin360 30s linear infinite; }
.ec-nuage { animation: ecNuage var(--nd, 10s) ease-in-out infinite alternate; }
@keyframes ecNuage { from { transform: translateX(-12px); } to { transform: translateX(12px); } }
.ec-eau { animation: ecEau .9s linear infinite; }
@keyframes ecEau { to { stroke-dashoffset: -18; } }
.ec-pas { animation: ecPas 3s linear infinite; }
@keyframes ecPas { to { stroke-dashoffset: -20; } }
.ec-reflet { animation: ecReflet 2.2s ease-in-out infinite; }
@keyframes ecReflet { 50% { opacity: .12; transform: translateX(3px); } }
.ec-sapin { transform-box: fill-box; transform-origin: 50% 100%; animation: ecSapin 3.4s ease-in-out infinite alternate; }
@keyframes ecSapin { from { transform: skewX(-2.4deg); } to { transform: skewX(2.4deg); } }
.ec-vol { animation: ecVol 15s linear infinite; }
@keyframes ecVol { from { transform: translate(-30px, 0); } 50% { transform: translate(125px, -8px); } to { transform: translate(280px, 0); } }
.ec-drapeau { transform-box: fill-box; transform-origin: 0 50%; animation: ecDrapeau 1.4s ease-in-out infinite alternate; }
@keyframes ecDrapeau { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(.8) skewY(7deg); } }
.ec-feu { animation: ecFeu 1.3s steps(3) infinite; }
@keyframes ecFeu { 50% { opacity: .55; } }
.ec-flamme { transform-box: fill-box; transform-origin: 50% 100%; animation: ecFlamme .45s ease-in-out infinite alternate; }
@keyframes ecFlamme { from { transform: scale(1, 1) skewX(-5deg); } to { transform: scale(.9, 1.14) skewX(5deg); } }
/* « Ce que je fais » / « Ce que j'arrête » : titres deux fois plus grands */
.lf-fam h3 { font-size: 32px; gap: 12px; letter-spacing: -.025em; line-height: 1.1; }
.lf-fam h3::before { width: 6px; height: 30px; border-radius: 3px; }
.lf-famb > h3 { font-size: 34px; margin: 0 0 16px; }
.lf-fam > p { margin-left: 18px; }
.jk-vap { animation: ecVapeur 2.4s ease-out infinite; }
.jk-new { transform-box: fill-box; transform-origin: 50% 100%; animation: jkNew 1.8s ease-in-out infinite; }
@keyframes jkNew { 0%, 60%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(-5px) scale(1.06, .96); } 30% { transform: translateY(0) scale(.96, 1.04); } 42% { transform: translateY(-2px) scale(1.02); } }
.jk-neon { animation: jkNeon 4s steps(1) infinite; }
@keyframes jkNeon { 0%, 100% { opacity: 1; } 71% { opacity: .35; } 73% { opacity: 1; } 76% { opacity: .5; } 78% { opacity: 1; } }
.jk-ble, .jk-plant { transform-box: fill-box; transform-origin: 50% 100%; animation: ecFeuille 3s ease-in-out infinite alternate; }
.jk-papier { transform-box: fill-box; transform-origin: center; animation: jkPapier 3.4s ease-in-out infinite; }
@keyframes jkPapier { 50% { transform: rotate(6deg) translateY(-1px); } }
.jk-reflet { animation: jkReflet 3.2s linear infinite; }
@keyframes jkReflet { to { stroke-dashoffset: -502; } }
.jk-herbe { animation: jkHerbe 3.6s ease-in infinite; opacity: 0; }
@keyframes jkHerbe { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(6px, 70px) rotate(220deg); opacity: 0; } }
.jk-aile { transform-box: fill-box; transform-origin: center; animation: jkAile .35s ease-in-out infinite alternate; }
@keyframes jkAile { to { transform: scaleX(.35); } }
.jk-garni > g:last-child { transform-box: fill-box; transform-origin: center; animation: jkGarni 2.2s ease-in-out infinite; }
@keyframes jkGarni { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.35); } 40% { transform: scale(1); } }
/* v51 — le café : la crème qui tourne, la ride, le reflet, la vapeur, l'étiquette de la tisane */
.cf-tour { transform-box: view-box; transform-origin: 0 0; animation: spin360 16s linear infinite; }
.cf-ride { transform-box: view-box; transform-origin: 0 0; animation: cfRide 3.8s ease-out infinite; }
@keyframes cfRide { 0% { transform: scale(.15); opacity: .8; } 70%, 100% { transform: scale(1); opacity: 0; } }
.cf-reflet { animation: cfReflet 3.4s ease-in-out infinite; }
@keyframes cfReflet { 50% { opacity: .2; transform: translateX(1.4px); } }
.cf-vap { animation: cfVap 3.3s ease-in-out infinite; opacity: 0; }
@keyframes cfVap { 0% { transform: translate(0, 4px) scaleY(.7); opacity: 0; } 30% { opacity: 1; } 60% { transform: translate(1.6px, -6px) scaleY(1); opacity: .8; } 100% { transform: translate(-1px, -14px) scaleY(1.1); opacity: 0; } }
.cf-tag { transform-box: fill-box; transform-origin: 50% 0; animation: ecFeuille 2.6s ease-in-out infinite alternate; }
/* v52 — Muscle PC, le nouveau serpent : il respire, le cou ondule (SMIL), la tête cligne, la langue sort ; chaque attribut bouge */
.pc-vr-in .pcv, .pc-vr-in .pcv.t0 { top: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 4 / 3; transform: translateX(-50%); }
.sk-souffle { animation: skSouffle 4.2s ease-in-out infinite; }
@keyframes skSouffle { 50% { transform: scale(1.015, 1.035); } }
.sk-langue { transform-box: fill-box; transform-origin: 50% 0; animation: skLangue 3.4s ease-in-out infinite; }
@keyframes skLangue { 0%, 70%, 100% { transform: scaleY(0); } 76%, 82% { transform: scaleY(1); } 79% { transform: scaleY(.7); } }
.sk-capuchon { transform-box: fill-box; transform-origin: 50% 70%; animation: skCapuchon 3.6s ease-in-out infinite; }
@keyframes skCapuchon { 50% { transform: scale(1.07, 1.02); } }
.sk-plume { transform-box: fill-box; transform-origin: 50% 100%; animation: skPlume 2.4s ease-in-out infinite; }
@keyframes skPlume { 50% { transform: rotate(6deg) scaleY(1.06); } }
.sk-aile { transform-box: view-box; transform-origin: 0 0; animation: skAile 2.2s ease-in-out infinite; }
@keyframes skAile { 50% { transform: rotate(calc(var(--s) * -14deg)) scaleY(.92); } }
.sk-nageoire { transform-box: view-box; transform-origin: 0 0; animation: skNageoire 1.6s ease-in-out infinite; }
@keyframes skNageoire { 50% { transform: rotate(calc(var(--s) * 12deg)); } }
.sk-moust { transform-box: view-box; transform-origin: 0 0; animation: skMoust 3s ease-in-out infinite; }
@keyframes skMoust { 50% { transform: rotate(calc(var(--s) * -10deg)); } }
.sk-glow { animation: skAura 2.2s ease-in-out infinite; }
.sk-rune { animation: skRune 2.6s ease-in-out infinite; }
@keyframes skRune { 50% { opacity: .35; } }
.sk-sonnette { transform-box: view-box; transform-origin: 0 0; animation: skSonnette .18s linear infinite alternate; }
@keyframes skSonnette { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.sk-eclat { transform-box: fill-box; transform-origin: center; animation: skEclat 2.4s ease-in-out infinite; }
@keyframes skEclat { 0%, 60%, 100% { transform: scale(0); } 75% { transform: scale(1.2) rotate(45deg); } }
.sk-lampe { animation: skAura 4.4s ease-in-out infinite; }
.sk-brume { animation: stDrift 12s ease-in-out infinite; }
.sk-rayons { animation: skAura 6s ease-in-out infinite; }
.sk-cascade { animation: skCascade .8s linear infinite; }
@keyframes skCascade { to { stroke-dashoffset: -24; } }
.sk-luciole { animation: skLuciole 4.6s ease-in-out infinite; }
@keyframes skLuciole { 0%, 100% { transform: translate(0, 0); opacity: .2; } 50% { transform: translate(8px, -10px); opacity: 1; } }
.sk-flamme { animation: skFlamme .5s ease-in-out infinite alternate; }
@keyframes skFlamme { from { transform: scale(1, 1) skewX(-5deg); } to { transform: scale(.9, 1.12) skewX(5deg); } }
.sk-reflet { animation: skReflet 5s ease-in-out infinite; }
@keyframes skReflet { 0%, 100% { transform: translateX(-30px); opacity: 0; } 40% { opacity: 1; } 60% { transform: translateX(110px); opacity: 0; } }
.sk-ride { transform-box: fill-box; transform-origin: center; animation: skRide 3.6s ease-out infinite; opacity: 0; }
@keyframes skRide { 0% { transform: scale(.85); opacity: .7; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sk-souffle, .sk-langue, .sk-capuchon, .sk-plume, .sk-aile, .sk-nageoire, .sk-moust, .sk-glow, .sk-rune, .sk-sonnette, .sk-eclat, .sk-lampe, .sk-brume, .sk-rayons, .sk-cascade, .sk-luciole, .sk-flamme, .sk-reflet, .sk-ride { animation: none; } }
/* v52 — étirements : le pantin de bois grince (petits à-coups), le corps souple enchaîne (SMIL) */
.et-raide { transform-box: fill-box; transform-origin: 50% 100%; animation: etRaide 2.6s steps(2) infinite; }
@keyframes etRaide { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.2deg); } 50% { transform: rotate(.6deg); } 75% { transform: rotate(-.4deg); } }
@media (prefers-reduced-motion: reduce) { .et-raide { animation: none; } }
/* v53 — classement des habitudes et interdictions : le palier, son nom, et ce qui y a mené */
.lb-det { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.lb-pod .lb-det { display: block; text-align: center; }
.lb-val small, .lb-pval small { font-size: .62em; font-weight: 800; color: var(--muted); margin-left: 1px; }
.lb-stage .lb-ic { display: inline-flex; }
.lb-stage .lb-ic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* v54 — les autorisations du chrono (sur ordinateur) : une fenêtre claire, avec la démo animée de ce que le navigateur va afficher */
.perm-ov .modal.perm { max-width: 470px; }
.perm h2 { text-align: center; margin: 0; }
.perm-demo { position: relative; height: 176px; margin: 2px auto 16px; max-width: 360px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(#26224e, #17142f); border: 1px solid var(--line2); }
.perm-bar { display: flex; align-items: center; gap: 8px; margin: 10px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12.5px; color: #cfcaf0; }
.perm-lock { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; }
.perm-pop, .perm-menu { position: absolute; left: 16px; top: 50px; width: 250px; padding: 12px 14px 10px; border-radius: 12px; background: #fff; color: #1d1a2e;
  font-size: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.45); transform-origin: 20px 0; }
.perm-pop { animation: permPop 4.2s ease-in-out infinite; }
.perm-pop b { display: block; font-size: 12.5px; margin-bottom: 6px; }
.perm-pop p { margin: 3px 0; }
.perm-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.perm-btns span { padding: 5px 12px; border-radius: 999px; font-weight: 800; border: 1px solid #d6d2ea; }
.perm-btns .perm-ok { background: #6a4cff; color: #fff; border-color: #6a4cff; animation: permOk 4.2s ease-in-out infinite; }
.perm-cur { position: absolute; left: 0; top: 0; width: 22px; height: 22px; animation: permCur 4.2s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); z-index: 2; }
.perm-cur svg { width: 100%; height: 100%; fill: #fff; stroke: #1d1a2e; stroke-width: 1.4; stroke-linejoin: round; }
@keyframes permPop { 0%, 8% { opacity: 0; transform: scale(.85) translateY(-6px); } 16%, 78% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes permCur { 0%, 18% { transform: translate(330px, 160px); } 46% { transform: translate(200px, 143px); } 50% { transform: translate(200px, 143px) scale(.8); } 54%, 78% { transform: translate(200px, 143px); } 100% { transform: translate(330px, 160px); } }
@keyframes permOk { 0%, 48% { box-shadow: 0 0 0 0 rgba(106,76,255,0); } 52% { box-shadow: 0 0 0 6px rgba(106,76,255,.35); background: #8a70ff; } 62%, 100% { box-shadow: 0 0 0 0 rgba(106,76,255,0); } }
/* refusée une fois : on montre le cadenas, puis les interrupteurs à passer sur « Autoriser » */
.perm-demo.bloque .perm-lock { animation: permLock 4.4s ease-in-out infinite; }
.perm-menu { animation: permMenu 4.4s ease-in-out infinite; }
.perm-menu p { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 5px 0; }
.perm-sw { position: relative; flex: none; width: 30px; height: 17px; border-radius: 999px; background: #c9c5dc; animation: permSw 4.4s ease-in-out infinite; }
.perm-sw b { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; animation: permSwB 4.4s ease-in-out infinite; }
.perm-demo.bloque .perm-cur { animation: permCurB 4.4s ease-in-out infinite; }
@keyframes permLock { 0%, 22% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 28% { box-shadow: 0 0 0 6px rgba(255,255,255,.28); background: rgba(255,255,255,.18); } 40%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
@keyframes permMenu { 0%, 30% { opacity: 0; transform: scale(.9); } 36%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
@keyframes permSw { 0%, 60% { background: #c9c5dc; } 64%, 100% { background: #6a4cff; } }
@keyframes permSwB { 0%, 60% { transform: none; } 64%, 100% { transform: translateX(13px); } }
@keyframes permCurB { 0%, 10% { transform: translate(300px, 150px); } 24% { transform: translate(29px, 25px); } 28% { transform: translate(29px, 25px) scale(.8); } 32% { transform: translate(29px, 25px); } 54% { transform: translate(201px, 67px); } 58% { transform: translate(201px, 67px) scale(.8); } 62%, 80% { transform: translate(201px, 67px); } 100% { transform: translate(300px, 150px); } }
.perm-lead { margin: 6px 0 12px; text-align: center; }
.perm-list { display: grid; gap: 10px; margin-bottom: 16px; }
.perm-it { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.perm-ic { font-size: 22px; line-height: 1; }
.perm-it b { display: block; font-size: 14px; margin-bottom: 3px; }
.perm-it small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.perm-st { font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.perm-st.ok { color: #7ee0a0; background: rgba(79,174,98,.16); }
.perm-st.non { color: #ff8a8a; background: rgba(224,76,76,.16); }
.perm-st.att { color: #ffcf6a; background: rgba(255,200,80,.14); }
.perm-go { animation: permBtn 2.4s ease-in-out infinite; }
@keyframes permBtn { 50% { box-shadow: 0 0 0 6px rgba(138,107,255,.25); } }
.perm-pc { text-align: center; margin: 10px 0 0; }
@media (prefers-reduced-motion: reduce) { .perm-pop, .perm-cur, .perm-ok, .perm-menu, .perm-sw, .perm-sw b, .perm-lock, .perm-go { animation: none !important; } .perm-pop, .perm-menu { opacity: 1; } }
/* classement des centres d'intérêt : le nombre de jours bien en vue, le palier en petit dessous le pseudo */
.lb[class*="lb-life:"] .lb-pval b { font-size: 24px; }
.lb[class*="lb-life:"] .lb-val b { font-size: 21px; }
.lb[class*="lb-life:"] .lb-pval small, .lb[class*="lb-life:"] .lb-val small { font-size: 12px; }
/* v55 — la carte d'un autre joueur s'ouvre aussi grande que la sienne (page Profil : 1180 px + marges de la fenêtre) */
.overlay.pc-ov .box { max-width: 1216px; }
/* le petit bouton « classement » de chaque centre d'intérêt, en haut à droite de sa carte */
.lf-mi-hd { padding-right: 88px; }   /* la place du bouton classement et, à sa droite, de la poignée de déplacement */
.lf-mi-rk { position: absolute; top: 13px; right: 52px; z-index: 2; width: 31px; height: 31px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 10px; border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: var(--muted);
  transition: color .2s, background .2s, border-color .2s, transform .3s var(--spring); }
.lf-mi-rk svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.lf-mi-rk:hover, .lf-mi-rk:focus-visible { color: var(--ec); border-color: color-mix(in srgb, var(--ec) 50%, transparent); background: color-mix(in srgb, var(--ec) 16%, transparent); transform: translateY(-1px) scale(1.06); }
/* v55 — le classement d'un centre d'intérêt en fenêtre (bouton podium de sa carte) */
.overlay.lbp-ov .box { max-width: 700px; text-align: left; }
.lb-pop { position: relative; padding: 22px 22px 18px; }
.lbp-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 11px; cursor: pointer; font-size: 14px; color: var(--text);
  background: rgba(255,255,255,.07); border: 1px solid var(--line2); transition: background .2s, transform .3s var(--spring); }
.lbp-x:hover { background: rgba(255,255,255,.14); transform: scale(1.06); }
.lbp-hd { display: flex; align-items: center; gap: 12px; padding-right: 44px; margin-bottom: 12px; }
.lbp-em { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; font-size: 22px;
  background: color-mix(in srgb, var(--c, #8a6bff) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c, #8a6bff) 40%, transparent); }
.lbp-hd b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -.015em; }
.lbp-hd small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); line-height: 1.4; }
.lb-pop .lb-scope { display: flex; width: max-content; margin: 0 auto 6px; }
.lb-pop .lb { padding: 0; }
.lbp-close { margin-top: 12px; }
/* v56 — muscu : la barre monte (▲ vert, anabolisme) ou redescend (▼ rouge, catabolisme), en direct */
.lf-mi-pc.up { color: #6edc7c; }
.lf-mi-pc.down { color: #ff7a7a; }
/* v57 — cohérence cardiaque : le cœur bat en panique, puis calmement, puis respire lentement (6 respirations par minute) */
.coh-panique, .coh-bat, .coh-souffle { transform-box: fill-box; transform-origin: 50% 55%; }
.coh-panique { animation: cohPanique .62s ease-in-out infinite; }
@keyframes cohPanique { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.13) rotate(-2deg); } 28% { transform: scale(.96); } 42% { transform: scale(1.08) rotate(2deg); } 60% { transform: scale(1); } }
.coh-bat { animation: cohBat 1.05s ease-in-out infinite; }
@keyframes cohBat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.09); } 28% { transform: scale(1); } 42% { transform: scale(1.05); } }
.coh-souffle { animation: cohSouffle 10s ease-in-out infinite; }
@keyframes cohSouffle { 0%, 100% { transform: scale(.93); } 50% { transform: scale(1.1); } }
/* la fenêtre : les trois respirations, la description, les rétentions du Wim Hof */
.coh-techs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 8px; }
.coh-t { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px; cursor: pointer; color: var(--text);
  border: 1.5px solid var(--line2); background: rgba(255,255,255,.04); transition: border-color .2s, background .2s, transform .3s var(--spring); }
.coh-t b { font-size: 16px; font-weight: 900; letter-spacing: -.01em; }
.coh-t small { font-size: 11.5px; color: var(--muted); }
.coh-t:hover { transform: translateY(-1px); }
.coh-t.on { border-color: var(--gc, #ff6bd6); background: color-mix(in srgb, var(--gc, #ff6bd6) 16%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gc, #ff6bd6) 18%, transparent); }
.coh-desc { margin: 2px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.coh-run .zen-orb { background: radial-gradient(circle at 38% 34%, #ffffff, #ffd0e6 22%, #ff6bb0 58%, #b0306e); box-shadow: 0 0 60px rgba(255,110,170,.5), inset 0 -12px 30px rgba(110,20,60,.35); transition: transform .12s linear; }
.coh-run .zen-arc { stroke: #ff9ac8; filter: drop-shadow(0 0 6px rgba(255,140,190,.6)); }
.coh-holds { display: flex; justify-content: center; gap: 10px; margin: 6px 0 10px; }
.coh-holds span { display: flex; flex-direction: column; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line2); }
.coh-holds small { font-size: 11px; color: var(--muted); } .coh-holds b { font-size: 18px; font-weight: 900; }
@media (prefers-reduced-motion: reduce) { .coh-panique, .coh-bat, .coh-souffle { animation: none; } }

/* ═══ v58 · Téléphone : la colonne de gauche devient une barre d'onglets en bas (sous le pouce),
   le bouton BOSSER au centre, en relief ; le contenu prend toute la largeur de l'écran ═══ */
@media (max-width: 720px) {
  /* une capsule flottante en verre dépoli, détachée des bords (façon applis actuelles) ; seul l'onglet actif dit son nom */
  :root { --nav-h: 64px; --nav-gap: max(10px, calc(env(safe-area-inset-bottom) - 6px)); --nav-b: calc(var(--nav-h) + var(--nav-gap)); }
  nav.side, nav.side.open, nav.side:has(:focus-visible) { z-index: 45; top: auto; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: var(--nav-gap); width: auto; max-width: 520px; height: var(--nav-h); margin: 0 auto; flex-direction: row; align-items: center; gap: 0; padding: 0 6px;
    overflow: visible; border-radius: 26px; border: 1px solid rgba(255,255,255,.1);
    background: rgba(24,20,54,.74); backdrop-filter: blur(22px) saturate(1.7); -webkit-backdrop-filter: blur(22px) saturate(1.7);
    box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.09); }
  body.in-app::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--nav-b) + 28px); z-index: 34; pointer-events: none;
    background: linear-gradient(to top, rgba(7,6,20,.94) 35%, rgba(7,6,20,0)); }   /* un fondu sous la capsule : le contenu s'efface en douceur */
  nav.side .rl-brand, nav.side .rl-item.rl-toggle { display: none; }
  nav.side .rl-item { flex: 1 1 0; min-width: 0; height: 58px; padding: 0; display: grid; place-items: center; overflow: visible; border-radius: 18px;
    background: none; box-shadow: none; color: rgba(214,206,255,.6); }
  nav.side .rl-item::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; bottom: auto; width: min(48px, 100%); height: 36px; margin: -18px auto 0; border-radius: 18px;
    background: linear-gradient(135deg, rgba(165,139,255,.36), rgba(124,92,255,.2)); box-shadow: inset 0 0 0 1px rgba(184,162,255,.3);
    opacity: 0; transform: scaleX(.4); transition: opacity .25s, transform .4s var(--spring); }
  nav.side .rl-item .rl-ic { width: 26px; height: 26px; transition: transform .4s var(--spring); }
  nav.side .rl-item .rl-ic svg { width: 24px; height: 24px; transition: none; }
  nav.side .rl-lb { display: none; }   /* icônes seules : le titre de la page est déjà en haut */
  nav.side .rl-item.on { color: #fff; background: none; box-shadow: none; }
  nav.side .rl-item.on::before { opacity: 1; transform: none; }
  nav.side .rl-item.on .rl-ic { animation: navPop .45s var(--spring); filter: drop-shadow(0 0 8px rgba(184,160,255,.7)); }
  nav.side .rl-item:active .rl-ic { transform: scale(.86); }
  nav.side .rl-item:hover { background: none; }
  nav.side > .play { order: 1; flex: none; margin: 0 4px; }   /* BOSSER au centre, dans la capsule */
  nav.side > .rl-item:is([data-t=trophies], [data-t=board], [data-t=shop], [data-t=lab]) { order: 2; }   /* 3 onglets de chaque côté (Tâches, Sommeil, Mode de vie | Trophées, Classement, Boutique) : BOSSER pile au centre */
  nav.side > .rl-item[data-t=mates] { display: none; }   /* les Amis sont en haut, entre la langue et le niveau */
  nav.side .play .pl-orb { width: 52px; height: 52px; } nav.side .play .pl-core { width: 46px; height: 46px; }
  nav.side .play .pl-aura { inset: -3px; opacity: .55; }
  body.in-app .wrap, body.in-app .wrap.wide, body.in-app .wrap.mid, body.in-app .wrap.full { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body.in-app, body.in-app:not(.pb-on) { padding-bottom: calc(var(--nav-b) + 28px); }
  body.in-app.pb-on { padding-bottom: calc(var(--nav-b) + 96px); }   /* la barre des niveaux de la Mission flotte au-dessus des onglets */
  .pb-wrap { bottom: calc(var(--nav-b) + 8px); padding: 0 10px; }
  .pb { flex-direction: row; align-items: center; gap: 10px; padding: 7px 20px 7px 8px; border-radius: 18px; box-shadow: 0 -8px 26px rgba(0,0,0,.4), 0 0 30px color-mix(in srgb, var(--c) 18%, transparent); }   /* sur une ligne : badge, nom, chemin */
  .pb-cur { gap: 8px; min-width: 0; } .pb-bd, .pb-bd .lv-svg { width: 38px; height: 38px; }
  .pb-nm small { display: none; } .pb-nm b { font-size: 13px; max-width: 84px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-track { height: 10px; margin: 2px 12px 0 8px; } .pb-lbl { margin-top: 6px; font-size: 10.5px; gap: 8px; }
  .pb-me { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 11px; } .pb-goal { font-size: 18px; margin-top: -12px; }
  .tk-fab { right: max(16px, env(safe-area-inset-right)); bottom: calc(var(--nav-b) + 16px); }
  .newver { bottom: calc(var(--nav-b) + 12px); }
  .clown { bottom: calc(var(--nav-b) - 6px); }
}

@keyframes navPop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }

/* Téléphone : la semaine et le mois du chrono tiennent dans l'écran (7 colonnes), plus de défilement de côté */
@media (max-width: 520px) {
  .wc { grid-template-columns: 22px repeat(7, minmax(0, 1fr)); min-width: 0; gap: 2px; }
  .wc-gb span { right: 1px; font-size: 9px; } .wc-gh { height: 58px; }
  .wc-h { height: 54px; padding: 5px 0; border-radius: 10px; } .wc-h small { font-size: 9px; letter-spacing: 0; } .wc-h b { font-size: 15px; }
  .wc-h em { font-size: 9.5px; letter-spacing: -.02em; } .wc-b { border-radius: 8px; } .wc-blk { font-size: 0; border-radius: 5px; }
  .mc { grid-template-columns: repeat(7, minmax(0, 1fr)) minmax(38px, .85fr); min-width: 0; gap: 3px; }
  .mc-hd { font-size: 9px; letter-spacing: 0; } .mc-d { min-height: 50px; padding: 5px 3px 4px; border-radius: 9px; }
  .mc-d i { font-size: 10px; } .mc-d b { font-size: 9.5px; letter-spacing: -.02em; } .mc-w { border-radius: 9px; } .mc-w b { font-size: 10px; } .mc-w small { font-size: 8.5px; }
}
@media (max-width: 520px) {   /* onglets des Tâches : sur une ligne, à parts égales */
  .tk-tabs button { flex: 1 1 auto; justify-content: center; gap: 6px; padding: 8px 8px; white-space: nowrap; }
  .tk-tabs button i { padding: 1px 6px; }
}
@media (max-width: 520px) {   /* quêtes du sommeil : le texte prend la largeur, l'XP passe sous la case */
  .quest { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico lb tick" "ico lb xp"; column-gap: 11px; row-gap: 6px; padding: 12px 13px; }
  .quest .ico { grid-area: ico; font-size: 23px; align-self: center; } .quest .lb { grid-area: lb; align-self: center; }
  .quest .tick { grid-area: tick; align-self: end; justify-self: center; } .quest .xp { grid-area: xp; align-self: start; justify-self: center; font-size: 11.5px; padding: 2px 7px; }
}
/* Carte de joueur étroite (téléphone) : photo + pseudo, puis trophées et bouton, puis le trophée vitrine sur toute la largeur */
@container pcard (max-width: 460px) {
  .pcard .pc-hd { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av nm" "av r" "tro tro"; column-gap: 14px; row-gap: 8px; align-items: center; }
  .pcard .pc-id, .pcard .pc-idr { display: contents; }
  .pcard .pc-av { grid-area: av; } .pcard .pc-nm { grid-area: nm; min-width: 0; align-self: end; }
  .pcard .pc-hd-r { grid-area: r; margin: 0; align-self: start; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .pcard .pc-hd .pc-blk-tro { grid-area: tro; min-width: 0; } .pcard .pc-hd .pc-show { width: 100%; max-width: none; }
  .pcard .pc-hd .pc-show b { -webkit-line-clamp: 1; }
  .pc-sl-tabs button { padding: 4px 8px; font-size: 10.5px; } .pc-sl-st { padding: 4px 8px; font-size: 11px; } .pc-sl-st svg { display: none; }
}
@media (max-width: 520px) {   /* fenêtres : moins de marges perdues sur les côtés */
  .overlay .box { padding: 14px 10px calc(14px + env(safe-area-inset-bottom)); }
  .modal { padding: 20px 16px; border-radius: 22px; }
  .lf-pop { padding: 0; background: none; border: 0; box-shadow: none; }   /* la fiche d'un centre d'intérêt : un seul cadre, le sien */
  .overlay.lf-pop-ov .box { padding: 8px 6px calc(8px + env(safe-area-inset-bottom)); }
  .lf-pop-x { right: 10px; top: 10px; }
}
/* Tactile : pas de zoom au double-tap sur les commandes, pas de texte grossi en paysage, jamais de défilement de côté */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, a, label, select, input, [data-act] { touch-action: manipulation; }
@media (max-width: 720px) { html, body { overflow-x: clip; } }
/* Mission, tâches du jour : une tâche trop longue se termine par « … » au lieu d'être coupée net */
.tm-todo-w { max-width: min(320px, 100%); min-width: 0; } .tm-todo-w .tm-todo { min-width: 0; }
@media (max-width: 400px) {   /* très petits écrans : onglets des Tâches plus serrés, sans les compteurs sous 360 px */
  .tk-tabs { gap: 2px; } .tk-tabs button { font-size: 14px; padding: 8px 6px; }
}
@media (max-width: 360px) { .tk-tabs button i { display: none; } }
/* Ajoutée à l'écran d'accueil (plein écran) : rien sous l'heure et la batterie, ni sous l'encoche */
header.top { padding-top: env(safe-area-inset-top); }
#toasts { top: calc(82px + env(safe-area-inset-top)); }
@media (max-width: 520px) { .overlay .box { padding-top: max(14px, env(safe-area-inset-top)); } }
@media (max-width: 520px) {   /* accueil : le formulaire remonte, les 4 atouts tiennent en un écran */
  .landing .sub { font-size: 15px; margin-bottom: 14px; }
  .feat { gap: 8px; margin: 14px 0 18px; } .feat > div { padding: 12px; font-size: 12.5px; line-height: 1.4; border-radius: 16px; }
  .feat b { margin: 8px 0 3px; font-size: 14px; } .fi { width: 32px; height: 32px; border-radius: 10px; } .fi svg { width: 17px; height: 17px; }
  .tabs2 button { padding: 11px 6px; }   /* « Créer un compte » sur une ligne */
}
@media (max-width: 520px) { .rt-act .rt-b.go { grid-column: 1 / -1; } }   /* fiche : l'action principale sur toute la largeur, jamais coupée */
@media (max-width: 720px) {   /* clavier ouvert : les barres du bas s'effacent, le champ reste visible */
  body:has(:is(input:not([type=checkbox], [type=radio], [type=range], [type=button]), textarea):focus) :is(nav.side, .pb-wrap, .tk-fab) { display: none; }
}

/* ═══ v59 · Téléphone : les Amis en haut (entre la langue et le niveau) ; au doigt, aucune icône ne reste de travers ═══ */
.top-mates { display: none; }
@media (max-width: 720px) {
  .top .wrap { gap: 6px; }
  .top-mates { position: relative; flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--line2); background: rgba(255,255,255,.06); color: #d9d3ff; transition: transform .3s var(--spring), border-color .25s, box-shadow .25s; }
  .top-mates svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .top-mates.on { color: #fff; border-color: var(--accent2); box-shadow: 0 0 0 3px rgba(138,107,255,.4), 0 0 18px rgba(138,107,255,.55); }
  .top-mates:active { transform: scale(.92); } .top-mates .rl-badge { top: -4px; right: -5px; }
}
@media (max-width: 340px) { .top .lang-sw.top-lang { display: none; } .top .top-mates { margin-left: auto; } }
@media (hover: none) {   /* écran tactile : le « survol » reste collé après un toucher, il ne doit rien pencher ni grossir */
  .rl-item:hover .rl-ic svg, .play:hover .pl-core, .wz-emo:hover, .lf-bg:hover, .tr-card:hover .tr-med, .pc-edit:hover, .pc-show-edit:hover, .me-btn:hover { transform: none; }
  .rl-item:not(.on):hover { background: none; color: var(--muted); }
}
@media (max-width: 720px) {   /* écrire une tâche : la barre tient entre les deux bords de l'écran, le bouton fermer à sa droite */
  .tk-fab.composing { left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right)); }
  .tk-fab.composing .tk-co { flex: 1 1 auto; width: auto; min-width: 0; }
  .tk-fab.composing .fab-b { width: 52px; height: 52px; }
}
/* Carte de joueur sur téléphone : la scène de vie et l'enclos l'un sous l'autre (assez grands pour être vus), les centres d'intérêt 2 par ligne */
@container pcard (max-width: 460px) {
  .pc-top > .pc-b-life, .pc-top > .pc-blk[data-part=sleep] { flex: 1 1 100%; width: auto; height: auto; aspect-ratio: 16 / 9; }
  .pc-top .pc-life-b p { display: block; }
  .pc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 8px; }
  .pc-grid .pc-t { padding: 10px 8px 8px; }
  .pc-grid .pc-t h4 { font-size: 12.5px; gap: 6px; } .pc-grid .pc-t h4 .pc-t-nm { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pc-grid .pc-vring { width: 78%; margin: 0 auto; }
  .pc-grid .pc-name { display: block; font-size: 11.5px; } .pcd-tier { display: inline-block; }
  .pc-grid .pc-big b { font-size: 16px; }
}

/* ═══ v60 · Connexion avec Google ═══ */
.card.g-card h3 { margin: 0 0 6px; font-size: 22px; font-weight: 900; letter-spacing: -.01em; text-transform: none; color: var(--text); }
.g-card { margin-bottom: 4px; } .landing.l-feat { padding-top: 0; } .landing.l-feat .feat { margin-top: 0; }
.g-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 54px; margin: 16px 0 10px; border-radius: 16px;
  background: #fff; color: #1f1f1f; font-weight: 800; font-size: 16.5px; text-decoration: none; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .25s var(--spring), box-shadow .25s; }
.g-btn svg { width: 22px; height: 22px; flex: none; }
.g-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 0 0 4px rgba(138,107,255,.25); } .g-btn:active { transform: scale(.98); }
.g-note { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 6px 0 0; }
.g-who { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); overflow-wrap: anywhere; }
.g-who svg { width: 20px; height: 20px; flex: none; } .g-who b { color: var(--text); }
.g-alt { display: block; margin: 14px auto 0; font-size: 13.5px; color: var(--muted); text-align: center; }
@media (max-width: 720px) { nav.side .rl-item:hover .rl-ic svg, nav.side .rl-item .rl-ic svg { transform: none; } }

/* ═══ v61 · Profil : relier Telegram ═══ */
.tg-card h3 { display: flex; align-items: center; gap: 8px; }
.tg-h { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #2aabee; color: #fff; }
.tg-h svg, .tg-av svg, .tg-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn.tg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background: linear-gradient(135deg, #37bbfe, #1d93d2); box-shadow: 0 10px 26px rgba(42,171,238,.35); }
.tg-btn svg { width: 19px; height: 19px; }
.tg-ok { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: rgba(42,171,238,.1); border: 1px solid rgba(42,171,238,.35); }
.tg-av { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #37bbfe, #1d93d2); color: #fff; }
.tg-av svg { width: 21px; height: 21px; }
.tg-who { flex: 1; min-width: 0; } .tg-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tg-who small { color: var(--muted); }
.tg-badge { flex: none; font-style: normal; font-size: 12px; font-weight: 900; color: #7dffb0; padding: 4px 9px; border-radius: 999px; background: rgba(61,220,151,.14); }
.tg-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tg-un.armed { color: #ff8a9a; border-color: rgba(255,90,120,.6); background: rgba(255,90,120,.12); }
.tg-wait { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.tg-wait i { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 2px solid rgba(42,171,238,.3); border-top-color: #2aabee; animation: tgSpin .9s linear infinite; }
@keyframes tgSpin { to { transform: rotate(360deg); } }
@media (max-width: 400px) { .tg-acts { grid-template-columns: 1fr; } }

/* ═══ v62 · Mission : chaque réglage s'ouvre seul ; objectif manqué → proposition d'ajuster ═══ */
.modal.wz.solo { padding-top: 22px; }
.modal.wz.solo #wzDots { display: none; }
.wz-close-x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line2); background: rgba(255,255,255,.05); color: var(--muted); }
.wz-close-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wz-close-x:hover { color: #fff; }
.modal.wz.solo h2 { padding-right: 44px; }
.wz-note { margin: 0 0 12px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: #ffd9a8; background: rgba(255,170,60,.1); border: 1px solid rgba(255,170,60,.35); }
.gm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 12px; border-radius: 14px;
  font-size: 13px; color: #ffd9a8; background: rgba(255,170,60,.1); border: 1px solid rgba(255,170,60,.35); }
.gm-bar > div { display: flex; align-items: center; gap: 4px; }
.gm-bar .btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 11px; } .gm-bar .link { font-size: 13px; padding: 6px 8px; }
.card-links { display: inline-flex; gap: 4px; } .card-links .link { padding: 0 6px 8px; }

/* ═══ v65 · Focus — The One Thing en jeu : Obsession + dominos, Success list, To-do list, cascade d'objectifs ═══
   Moderne et lisible : des cartes calmes, une seule couleur forte (l'or de l'Obsession), deux colonnes sur grand écran. */
.wrap.fxw { max-width: 1280px; }
body.in-app .wrap.fxw { padding-left: max(88px, 3vw); padding-right: clamp(18px, 3vw, 56px); }
.fx { --y: #ffd60a; --y2: #ffaa00; --card: rgba(255,255,255,.035); --bd: rgba(255,255,255,.075); padding: 2px 0 48px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif; }
.fx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 18px; }
.fx-date { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--muted); text-transform: capitalize; letter-spacing: .01em; }
.fx-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.fx-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; background: var(--card); border: 1px solid var(--bd); color: #cfcae8; }
.fx-pill b { font-weight: 700; } .fx-pill em { font-style: normal; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.fx-pill svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-pill.on { color: #1c1600; background: var(--y); border-color: var(--y); } .fx-pill.on em { color: #5a4300; }
.fx-chips { display: flex; gap: 8px; }
.fx-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--bd); color: #d9d3ff; font-variant-numeric: tabular-nums; }
.fx-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-chip b { font-size: 15px; font-weight: 800; }
.fx-chip.gold { color: var(--y); border-color: rgba(255,214,10,.3); background: rgba(255,214,10,.08); }
.fx-chip.hot { color: #ff8a80; border-color: rgba(255,69,58,.45); background: rgba(255,69,58,.1); animation: fxHot 2.4s ease-in-out infinite; }
.fx-miss { margin: 0 0 16px; padding: 13px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; color: #ffc2bd; background: rgba(255,69,58,.1); border: 1px solid rgba(255,69,58,.32); }

/* la grille : une colonne au téléphone ; à partir de 1000 px, l'Obsession à gauche, les listes à droite */
.fx-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "lists" "goals" "week"; }
.fx-a-hero { grid-area: hero; } .fx-a-lists { grid-area: lists; display: flex; flex-direction: column; gap: 16px; } .fx-a-goals { grid-area: goals; } .fx-a-week { grid-area: week; }
@media (min-width: 1000px) {
  .fx-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 20px;
    grid-template-areas: "hero lists" "goals lists" "week lists"; align-items: start; }
  .fx-a-week { align-self: start; }
}

/* les cartes */
.fx-card { position: relative; border-radius: 22px; background: var(--card); border: 1px solid var(--bd); box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 16px 40px rgba(0,0,0,.22); }
.fx-lh { display: flex; align-items: center; gap: 12px; padding: 16px 18px 10px; width: 100%; border: 0; background: none; color: inherit; text-align: left; font: inherit; }
.fx-lh > div { flex: 1; min-width: 0; }
.fx-lh h4 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.fx-lh p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.fx-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 19px; background: rgba(255,255,255,.06); }
.fx-cnt { flex: none; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.06); color: #cfcae8; font-variant-numeric: tabular-nums; }
.fx-list.lev .fx-ic { background: rgba(255,214,10,.14); } .fx-list.lev .fx-cnt { background: rgba(255,214,10,.14); color: var(--y); }

/* l'Obsession */
.fx-hero { overflow: hidden; border-color: rgba(255,214,10,.3); background: linear-gradient(170deg, rgba(255,214,10,.1), rgba(255,214,10,.02) 55%), var(--card); }
.fx-hero.hot { border-color: rgba(255,69,58,.5); animation: fxHot 2.4s ease-in-out infinite; }
.fx-hero.done { border-color: rgba(255,214,10,.55); }
@keyframes fxHot { 50% { box-shadow: 0 16px 40px rgba(0,0,0,.22), 0 0 0 4px rgba(255,69,58,.12); } }
.fx-dom { display: block; cursor: pointer; aspect-ratio: 3.2 / 1; background: #120f2a; border-bottom: 1px solid var(--bd); }
.fx-dom .dm-svg { display: block; width: 100%; height: 100%; }
.dm-glow { animation: dmGlow 2.2s ease-in-out infinite; } @keyframes dmGlow { 50% { opacity: .45; } }
.fx-dcap { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 11px 18px; border: 0; border-bottom: 1px solid var(--bd); background: rgba(0,0,0,.18); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fx-dcap span { min-width: 0; } .fx-dcap b { display: block; font-size: 14px; font-weight: 800; color: #fff3b0; }
.fx-dcap small { display: block; font-size: 12.5px; color: var(--muted); } .fx-dcap em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--y); white-space: nowrap; }
.fx-hero-in { padding: 18px 20px 20px; }
.fx-k { margin: 0 0 8px; font-size: 11.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--y); }
.fx-q { margin: 0 0 16px; font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.fx-cta { display: block; width: 100%; height: 52px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 16.5px; font-weight: 800; color: #1c1600;
  background: linear-gradient(135deg, #ffe45c, var(--y) 50%, var(--y2)); box-shadow: 0 12px 30px rgba(255,190,10,.32); transition: transform .25s var(--spring); }
.fx-cta:active { transform: scale(.97); }
.fx-one-row { display: flex; align-items: center; gap: 16px; }
.fx-one-row h3 { margin: 0; font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fx-hero.done h3 { text-decoration: line-through; text-decoration-color: rgba(255,214,10,.7); text-decoration-thickness: 2px; color: #fff4c2; }
.fx-hold { position: relative; flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer; touch-action: none;
  border: 2.5px solid rgba(255,214,10,.8); background: rgba(255,214,10,.08); color: transparent; -webkit-user-select: none; user-select: none; }
.fx-hold svg:not(.fx-ring) { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.fx-ring circle { fill: none; stroke: var(--y); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; }
.fx-hold.holding { transform: scale(.94); transition: transform .2s; }
.fx-hold.holding .fx-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset .85s linear; }
.fx-hold.ok { color: #1c1600; background: var(--y); border-color: var(--y); animation: fxPop .5s var(--spring); }
@keyframes fxPop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: none; } }
.fx-hint { margin: 10px 0 0 72px; font-size: 12.5px; color: var(--muted); }
.fx-block { margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--bd); }
.fx-block-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; color: #cfcae8; }
.fx-block-t b { font-variant-numeric: tabular-nums; color: #fff; } .fx-live { font-style: normal; color: #ff6b6b; font-weight: 800; font-size: 12px; }
.fx-bar { height: 7px; margin-top: 8px; border-radius: 7px; background: rgba(255,255,255,.08); overflow: hidden; }
.fx-bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #ffe45c, var(--y2)); transition: width .6s var(--ease); }
.fx-block.full { border-color: rgba(255,214,10,.45); }
.fx-one-act { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fx-work { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 48px; padding: 0 18px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 800; font-size: 15.5px;
  color: #1c1600; background: var(--y); box-shadow: 0 10px 24px rgba(255,190,10,.28); }
.fx-work svg { width: 16px; height: 16px; fill: currentColor; }
.fx-ghost { height: 48px; padding: 0 18px; border-radius: 14px; cursor: pointer; font: inherit; font-weight: 700; color: #d9d3ff; background: rgba(255,255,255,.05); border: 1px solid var(--bd); }
.fx-press { margin: 14px 0 0; font-size: 13.5px; line-height: 1.45; color: #e7e1c6; }
.fx-press.hot { color: #ffb0a8; font-weight: 700; }
.fx-undo { font-size: 12.5px; padding: 0 0 0 6px; }

/* les lignes de tâches */
.fx-list { padding-bottom: 6px; }
.fx-row { display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 0 8px; padding: 8px 10px; border-radius: 14px; transition: background .2s, opacity .35s, transform .35s; }
.fx-row + .fx-row { box-shadow: 0 -1px 0 var(--bd); }
.fx-row:hover { background: rgba(255,255,255,.03); }
.fx-ck { flex: none; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid rgba(255,255,255,.3); background: none; color: transparent; transition: all .3s var(--spring); }
.fx-list.lev .fx-ck { border-color: rgba(255,214,10,.75); }
.fx-ck svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .35s .05s; }
.fx-row.done .fx-ck { background: var(--y); border-color: var(--y); color: #1c1600; } .fx-list.util .fx-row.done .fx-ck { background: #8e8aa8; border-color: #8e8aa8; }
.fx-row.done .fx-ck svg { stroke-dashoffset: 0; }
.fx-row.pop .fx-ck { animation: fxPop .45s var(--spring); }
.fx-tx { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.4; overflow-wrap: anywhere; }
.fx-row.done .fx-tx { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.35); }
.fx-list.lev .fx-tx { font-weight: 600; }
.fx-push { flex: none; font-style: normal; font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; color: #ff9f8f; background: rgba(255,90,70,.12); }
.fx-more { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.fx-more svg { width: 18px; height: 18px; fill: currentColor; } .fx-more:hover { background: rgba(255,255,255,.07); color: #fff; }
.fx-row.gone { opacity: 0; transform: translateX(-30px); }
.fx-list.locked .fx-row:not(.done) { opacity: .5; }
.fx-row.locked .fx-ck { cursor: not-allowed; border-style: dashed; color: rgba(255,255,255,.5); } .fx-row.locked .fx-ck svg { stroke-dasharray: none; stroke-dashoffset: 0; width: 13px; height: 13px; stroke-width: 2.2; }
.fx-lock { display: flex; align-items: center; gap: 8px; margin: 0 18px 6px; padding: 8px 12px; border-radius: 12px; font-size: 13px; color: #ffcf6a; background: rgba(255,214,10,.07); }
.fx-lock svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; flex: none; }
.fx-empty { margin: 0 18px 12px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }

.fx-rev { border-color: rgba(255,159,10,.4); background: rgba(255,159,10,.06); padding-bottom: 8px; }
.fx-rev .fx-ic { background: rgba(255,159,10,.15); }
.fx-rv { margin: 0 18px; padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-rv + .fx-rv { box-shadow: 0 -1px 0 rgba(255,159,10,.2); }
.fx-rv-b { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.fx-mini { height: 36px; border-radius: 11px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: #e6e1ff; background: rgba(255,255,255,.06); border: 1px solid var(--bd); }
.fx-mini.gold { color: #1c1600; background: var(--y); border-color: var(--y); } .fx-mini.bad { color: #ff9a9a; }

/* vider sa tête */
.fx-cap { padding: 6px 8px; }
.fx-in { display: flex; align-items: flex-start; gap: 10px; padding: 6px 10px; cursor: text; }
.fx-in > svg { flex: none; width: 22px; height: 22px; margin-top: 13px; fill: none; stroke: var(--y); stroke-width: 2.4; stroke-linecap: round; }
#fxIn { flex: 1; display: block; min-height: 48px; padding: 12px 0; resize: none; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; font: inherit; font-size: 16.5px; line-height: 1.45; outline: none; }
#fxIn::placeholder { color: rgba(235,235,245,.38); } #fxIn:focus { background: none; box-shadow: none; }
.fx-inbox { display: flex; align-items: center; gap: 12px; width: calc(100% - 12px); margin: 4px 6px 8px; padding: 12px 14px; border-radius: 16px; cursor: pointer; font: inherit; text-align: left;
  border: 1px solid rgba(255,214,10,.45); background: rgba(255,214,10,.09); color: #fff; animation: fxNag 2.6s ease-in-out infinite; }
.fx-inbox b { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 11px; background: var(--y); color: #1c1600; font-weight: 900; font-size: 15px; }
.fx-inbox span { flex: 1; font-weight: 800; } .fx-inbox small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); margin-top: 1px; }
.fx-inbox em { font-style: normal; font-weight: 800; color: var(--y); white-space: nowrap; }
.fx-inbox.bump { animation: fxPop .45s var(--spring); }
@keyframes fxNag { 50% { box-shadow: 0 0 0 4px rgba(255,214,10,.1); } }

/* plus tard */
.fx-fold { cursor: pointer; padding-bottom: 14px; } .fx-chev { flex: none; font-size: 22px; color: var(--muted); transition: transform .3s; } .fx-chev.on { transform: rotate(90deg); }
.fx-row.lat { opacity: calc(.4 + .6 * var(--life)); }
.fx-ck.up { border-color: rgba(255,255,255,.2); color: var(--muted); } .fx-ck.up svg { stroke-dasharray: none; stroke-dashoffset: 0; width: 14px; height: 14px; stroke-width: 2.4; }
.fx-ck.up:hover { color: var(--y); border-color: var(--y); }
.fx-life { flex: none; font-style: normal; font-size: 11.5px; color: var(--muted); } .fx-life.hot { color: #ff9f8f; font-weight: 800; }

/* la cascade d'objectifs */
.fx-casc { position: relative; padding: 4px 18px 18px; }
.fx-casc::before { content: ""; position: absolute; left: 30px; top: 18px; bottom: 34px; width: 2px; background: linear-gradient(rgba(255,255,255,.1), rgba(255,214,10,.6)); }
.fx-gl { position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
div.fx-gl { cursor: default; }
.fx-gl i { flex: none; position: relative; z-index: 1; width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; background: #17143a; border: 2px solid rgba(255,255,255,.18); }
.fx-gl.set i { border-color: var(--y); background: radial-gradient(circle, var(--y) 0 35%, #17143a 40%); }
.fx-gl.stale i { border-color: #ff9f0a; background: radial-gradient(circle, #ff9f0a 0 35%, #17143a 40%); }
.fx-gl.now i { border-color: var(--y); } .fx-gl.now.set i, .fx-gl.go i { background: var(--y); box-shadow: 0 0 14px rgba(255,214,10,.55); }
.fx-gl span { min-width: 0; } .fx-gl small { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fx-gl small b { color: #ff9f0a; } .fx-gl > span > b { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.fx-gl:not(.set) > span > b { color: rgba(235,235,245,.4); font-weight: 600; }
button.fx-gl:hover > span > b { color: #fff; }
.fx-gl .link { padding: 0; font-size: 15px; font-weight: 800; color: var(--y); }

/* la semaine */
.fx-wk { display: flex; justify-content: space-between; gap: 6px; padding: 4px 18px 10px; }
.fx-wd { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fx-wd i { display: grid; place-items: center; width: 34px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.18); }
.fx-wd i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fx-wd.done i { color: var(--y); background: rgba(255,214,10,.12); } .fx-wd.done i svg { fill: rgba(255,214,10,.25); }
.fx-wd.miss i { color: #ff6b6b; background: rgba(255,69,58,.1); } .fx-wd.miss i svg { transform: rotate(80deg); }
.fx-wd.today i { color: var(--y); box-shadow: inset 0 0 0 1.5px rgba(255,214,10,.6); }
.fx-wd small { font-size: 11px; color: var(--muted); font-weight: 700; }
.fx-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 18px 4px; text-align: center; }
.fx-stats span { padding: 10px 6px; border-radius: 14px; background: rgba(255,255,255,.03); }
.fx-stats b { display: block; font-size: 21px; font-weight: 900; } .fx-stats small { display: block; font-size: 11px; color: var(--muted); line-height: 1.3; margin-top: 2px; }
.fx-lesson { margin: 12px 18px 0; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: #e6e1ff; background: rgba(138,107,255,.1); border: 1px solid rgba(138,107,255,.25); }
.fx-lesson b { display: block; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #b8a6ff; margin-bottom: 3px; }
.fx-old { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 12px 18px 16px; text-align: center; font-size: 13px; color: var(--muted); }

/* les fenêtres : Filtre, choix, menu, objectifs, chemin des dominos */
.overlay.fx-ov .box { max-width: 520px; }
.fx-filter { text-align: center; }
.fx-f-n { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fx-prog { height: 4px; margin-bottom: 16px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; } .fx-prog i { display: block; height: 100%; background: var(--y); transition: width .3s; }
.fx-tcard { padding: 30px 22px; border-radius: 22px; background: linear-gradient(160deg, #26214d, #17143a); border: 1px solid var(--line2); box-shadow: 0 18px 40px rgba(0,0,0,.4);
  transition: transform .25s var(--ease), opacity .25s, border-color .2s; touch-action: pan-y; cursor: grab; }
.fx-f-t { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 800; overflow-wrap: anywhere; }
.fx-tcard.hint-lev { border-color: var(--y); } .fx-tcard.hint-trash { border-color: #ff453a; }
.fx-tcard.out-lev { transform: translateX(120%) rotate(12deg); opacity: 0; } .fx-tcard.out-trash { transform: translateX(-120%) rotate(-12deg); opacity: 0; } .fx-tcard.out-util { transform: translateY(40px) scale(.9); opacity: 0; }
.fx-f-q { margin: 18px 4px 14px; font-size: 15.5px; line-height: 1.45; color: #fff; font-weight: 800; }
.fx-f-q small { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #ffe27a; }
.fx-f-b { display: grid; gap: 8px; }
.fx-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 13px 16px; border-radius: 16px; cursor: pointer; font: inherit; color: #fff; text-align: left;
  border: 1px solid var(--line2); background: rgba(255,255,255,.04); transition: transform .2s var(--spring), background .2s; }
.fx-opt b { font-size: 16px; } .fx-opt small { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fx-opt kbd { position: absolute; right: 14px; top: 50%; margin-top: -11px; font: inherit; font-size: 11px; font-weight: 800; color: var(--muted); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line2); }
.fx-opt.lev { border-color: rgba(255,214,10,.5); background: rgba(255,214,10,.1); } .fx-opt.trash { border-color: rgba(255,69,58,.4); }
.fx-opt:active { transform: scale(.97); }
@media (hover: none) { .fx-opt kbd { display: none; } }
.fx-f-h { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.fx-fin h2 { margin: 6px 0 10px; } .fx-sum { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 15px; }
.fx-pick h2, .fx-gmod h2 { font-size: 20px; line-height: 1.32; margin: 0 0 10px; }
.fx-wkgoal { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; color: #ffe9a0; background: rgba(255,214,10,.08); border: 1px solid rgba(255,214,10,.25); }
.fx-cands { display: grid; gap: 8px; margin: 12px 0 14px; max-height: 40vh; overflow-y: auto; }
.fx-cand { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; cursor: pointer; font: inherit; color: #fff; text-align: left; border: 1px solid var(--line2); background: rgba(255,255,255,.04); }
.fx-cand b { flex: 1; font-weight: 700; overflow-wrap: anywhere; } .fx-cand small { color: var(--muted); font-size: 12px; }
.fx-cand.lev { border-color: rgba(255,214,10,.4); } .fx-cand.util { opacity: .7; } .fx-cand.on { background: rgba(255,214,10,.16); border-color: var(--y); }
.fx-new { display: flex; gap: 8px; } .fx-new input { flex: 1; min-width: 0; }
.fx-gmod input { margin-top: 4px; }
.fx-menu .fx-m-t { margin: 0 0 12px; font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.fx-mi { display: block; width: 100%; padding: 13px 14px; margin-bottom: 6px; border-radius: 13px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 700; color: #fff; text-align: left;
  border: 1px solid var(--line); background: rgba(255,255,255,.04); } .fx-mi.bad { color: #ff9a9a; }
.fx-path h2 { margin: 0 0 6px; }
.fx-pnow { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,214,10,.1); border: 1px solid rgba(255,214,10,.35); }
.fx-pnow > span { color: var(--y); } .fx-pnow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.fx-pnow b { display: block; } .fx-pnow small { color: var(--muted); }
.fx-plist { display: grid; gap: 4px; max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.fx-pr { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; }
.fx-pe { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 21px; background: rgba(255,255,255,.04); filter: grayscale(.85) opacity(.55); }
.fx-pr > div { flex: 1; min-width: 0; } .fx-pr b { display: block; font-size: 14.5px; } .fx-pr small { color: var(--muted); font-size: 12px; }
.fx-pr i { flex: none; font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--muted); }
.fx-pr.ok .fx-pe, .fx-pr.was .fx-pe { filter: none; background: rgba(255,214,10,.12); } .fx-pr.ok i { color: var(--y); }
.fx-pr.next { background: rgba(255,214,10,.08); box-shadow: inset 0 0 0 1px rgba(255,214,10,.35); } .fx-pr.next .fx-pe { filter: none; } .fx-pr.next i { color: var(--y); }

/* la victoire : la cascade de dominos */
.overlay.dm-ov { background: rgba(4,3,14,.92); }
.overlay.dm-ov .box { max-width: 760px; }
.dm-win { padding: 0; overflow: hidden; text-align: center; border-color: rgba(255,214,10,.4); }
.dm-stage { height: min(46vh, 380px); background: #120f2a; }
.dm-stage .dm-svg { display: block; width: 100%; height: 100%; }
.dm-stage.dm-shake { animation: dmShake var(--skd, .45s) cubic-bezier(.36,.07,.19,.97); }
@keyframes dmShake { 10%, 90% { transform: translate(calc(var(--sk, 6px) * -.15), calc(var(--sk, 6px) * .15)); } 20%, 80% { transform: translate(calc(var(--sk, 6px) * .5), calc(var(--sk, 6px) * -.35)); } 30%, 50%, 70% { transform: translate(calc(var(--sk, 6px) * -1), calc(var(--sk, 6px) * .5)); } 40%, 60% { transform: translate(var(--sk, 6px), calc(var(--sk, 6px) * -.5)); } }
.dm-txt { padding: 20px 22px 22px; }
.dm-txt.in { animation: dmIn .5s var(--spring) both; } @keyframes dmIn { from { opacity: 0; transform: translateY(16px); } }
.dm-txt h2 { margin: 2px 0 4px; font-size: 26px; letter-spacing: -.01em; }
.dm-mk { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: #fff3b0; }
.dm-xp { margin: 0; font-size: 34px; font-weight: 900; color: var(--y, #ffd60a); text-shadow: 0 0 24px rgba(255,214,10,.5); }
.dm-st { margin: 4px 0 8px; font-size: 16px; font-weight: 800; color: #ffcf6a; }

/* téléphone */
@media (max-width: 720px) {
  body.in-app .wrap.fxw { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .fx-head { align-items: flex-start; } .fx-chips { width: 100%; } .fx-chip { flex: 1; justify-content: center; }
  .fx-dom { aspect-ratio: 2.6 / 1; } .fx-hero-in { padding: 16px 16px 18px; } .fx-q { font-size: 19px; } .fx-one-row h3 { font-size: 19px; }
  .fx-hint { margin-left: 0; } .fx-dcap { padding: 10px 14px; } .fx-dcap em { display: none; }
  .fx-lh { padding: 14px 14px 8px; } .fx-row { margin: 0 4px; } .fx-stats b { font-size: 18px; }
  .dm-stage { height: 40vh; }
}
@media (prefers-reduced-motion: reduce) { .fx-hero.hot, .fx-inbox, .fx-chip.hot, .dm-glow { animation: none; } }

/* v66 · dominos : objets dessinés (plus d'emoji), compteur de la cascade, étiquettes des objets dépassés */
.dm-ico { display: inline-block; width: 1.5em; height: 1.5em; vertical-align: -.42em; margin-right: .35em; }
.fx-dcap small .dm-ico { width: 1.6em; height: 1.6em; } .fx-dcap em .dm-ico { width: 1.5em; height: 1.5em; }
.fx-pe .dm-ico { width: 28px; height: 28px; margin: 0; vertical-align: middle; }
.dm-mk .dm-ico { width: 1.9em; height: 1.9em; vertical-align: -.6em; }
.dm-stage { position: relative; }
.dc-count { position: absolute; left: 12px; top: 12px; display: flex; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 999px;
  background: rgba(10,8,30,.62); border: 1px solid rgba(255,214,10,.35); color: #fff; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); }
.dc-count b { font-size: 20px; font-weight: 900; color: #ffd60a; min-width: 1ch; text-align: right; } .dc-count span { font-size: 13px; font-weight: 700; color: #cfcae8; }
.dc-lab { font: 800 12.5px -apple-system, Inter, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(10,8,30,.85); stroke-width: 4px; stroke-linejoin: round; transition: opacity .35s; }

/* OFM : OnlyOasis intégré (compte de l'agence uniquement) */
.ofm-frame { display: block; width: 100%; height: calc(100vh - 92px); min-height: 560px; border: 0; border-radius: 16px; background: #0c0c11; }

/* ═════════ v67 (14/10/2026) — les coins remplacent l'XP, la Boutique, le Focus × Cap de l'artefact « Premier Domino » ═════════ */
/* matières des dominos et tapis de l'Obsession (achetés à la Boutique) : par défaut ivoire sur violet */
:root { --dom-bg: #F7F8F3; --dom-solid: #F7F8F3; --dom-ink: #101A16; --dom-ink-2: #4E5D56; --dom-line: #D3DBD5; --dom-pip: #D0293A;
  --felt: #3a2a86; --felt-2: #1f1650; --felt-3: #5b45bd; --on-felt: #f4f0ff; --on-felt-2: #c7bcf0; --pip-felt: #ff7a70; }
[data-dom="bone"] { --dom-bg: #EFE6D2; --dom-solid: #EFE6D2; --dom-ink: #2B2418; --dom-ink-2: #6B5E48; --dom-line: #D8CBAE; }
[data-dom="ebony"] { --dom-bg: #17191A; --dom-solid: #17191A; --dom-ink: #F1EFE8; --dom-ink-2: #A7A9A3; --dom-line: #34383A; --dom-pip: #E5484D; }
[data-dom="jade"] { --dom-bg: linear-gradient(150deg, #3B7E67, #25594A); --dom-solid: #2F6B57; --dom-ink: #F2F8F4; --dom-ink-2: #C4DDD2; --dom-line: #5A9580; --dom-pip: #FF8A80; }
[data-dom="gold"] { --dom-bg: linear-gradient(150deg, #F5DA8A, #C8961E); --dom-solid: #E2B547; --dom-ink: #36270A; --dom-ink-2: #6D5212; --dom-line: #B68A20; --dom-pip: #9E1C28; }
[data-dom="glass"] { --dom-bg: linear-gradient(150deg, rgba(255,255,255,.88), rgba(214,232,250,.72)); --dom-solid: #E3EEF7; --dom-ink: #0E1A15; --dom-ink-2: #40524B; --dom-line: rgba(14,26,21,.16); }
[data-felt="night"] { --felt: #1C2747; --felt-2: #0f1630; --felt-3: #2C3B66; }
[data-felt="slate"] { --felt: #2F3B42; --felt-2: #1b2328; --felt-3: #42525B; }
[data-felt="bordeaux"] { --felt: #4B1F2A; --felt-2: #2c1018; --felt-3: #652B39; }
[data-felt="green"] { --felt: #1B4436; --felt-2: #10291f; --felt-3: #2A5E48; }

/* la pièce */
svg.coin { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.coin .c-o { fill: #f0b429; stroke: #b9770e; stroke-width: 1; } .coin .c-r { fill: #ffcf4d; stroke: #fff1b8; stroke-width: .8; stroke-opacity: .7; }
.coin .c-d { fill: #fff8e1; stroke: #b9770e; stroke-width: .8; } .coin .c-p { fill: #c0392b; } .coin .c-h { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linecap: round; opacity: .7; }
.coin-amt { display: inline-flex; align-items: center; gap: 4px; }
.xp-float { display: inline-flex; align-items: center; gap: 6px; } .xp-float svg.coin { width: 26px; height: 26px; }

/* l'en-tête : le solde à la place du niveau, un bouton vers la Boutique */
.coin-pill { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(240,180,41,.4); background: linear-gradient(180deg, rgba(240,180,41,.16), rgba(240,180,41,.06)); color: #ffe7a3; font: inherit;
  transition: transform .3s var(--spring), border-color .25s, box-shadow .25s; }
.coin-pill svg.coin { width: 24px; height: 24px; }
.coin-pill b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.coin-pill:hover { transform: translateY(-1px); border-color: rgba(240,180,41,.7); }
.coin-pill.on { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240,180,41,.25), 0 0 20px rgba(240,180,41,.35); }
.coin-pill.pop { animation: coinPop .6s var(--spring); }
@keyframes coinPop { 40% { transform: scale(1.14); box-shadow: 0 0 0 6px rgba(240,180,41,.28), 0 0 30px rgba(240,180,41,.6); } }
.top .lang-sw.top-lang ~ .coin-pill { margin-left: 4px; }
@media (max-width: 560px) { .coin-pill { height: 36px; padding: 0 11px 0 8px; gap: 6px; } .coin-pill svg.coin { width: 21px; height: 21px; } .coin-pill b { font-size: 14.5px; } }

/* ── Focus : la carte du haut, un domino sur le tapis ── */
.fh { overflow: hidden; display: grid; gap: 16px; padding: 22px 20px 18px; color: var(--on-felt); border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 80% at 15% -10%, rgba(255,255,255,.13), transparent 55%), radial-gradient(90% 70% at 110% 120%, rgba(0,0,0,.32), transparent 60%), linear-gradient(160deg, var(--felt), var(--felt-2));
  box-shadow: 0 30px 60px -24px rgba(6,4,20,.75), 0 1px 0 rgba(255,255,255,.08) inset; }
.fh::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.2px); background-size: 5px 5px; }
.fh > * { position: relative; z-index: 1; }
.fh.hot { border-color: rgba(255,69,58,.55); }
@media (min-width: 720px) { .fh { padding: 28px 28px 20px; } }
.fh-step { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; font-weight: 700; color: var(--on-felt-2); }
.fh-step > span:nth-child(2) { margin-right: auto; }
.fh-k { font-size: 11.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--on-felt-2); }
.fh-dots { display: inline-flex; gap: 5px; }
.fh-dots i { width: 8px; height: 14px; border-radius: 3px; border: 1.4px solid rgba(255,255,255,.35); }
.fh-dots i.on { background: var(--on-felt); border-color: var(--on-felt); }
.fh-dots i.cur { border-color: var(--pip-felt); box-shadow: 0 0 0 3px rgba(255,122,112,.25); animation: fhBreathe 2.2s ease-in-out infinite; }
@keyframes fhBreathe { 50% { box-shadow: 0 0 0 6px rgba(255,122,112,.08); } }
.fh-gain { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-weight: 900; color: #ffe08a; background: rgba(240,180,41,.14); border: 1px solid rgba(240,180,41,.35); }
.fh-gain i { font-style: normal; font-size: 11px; color: #ffd36e; opacity: .85; }
.fh-gain.won { color: #2a1e04; background: #f0b429; border-color: transparent; }
.fh-q { margin: 0; font-size: clamp(25px, 3.2vw, 36px); line-height: 1.12; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.fh-q em { font-style: normal; color: var(--pip-felt); }
.fh-serves { margin: -6px 0 0; font-size: 14px; color: var(--on-felt-2); } .fh-serves b { color: var(--on-felt); font-weight: 700; }
.fh-tip { margin: -2px 0 0; font-size: 13px; color: var(--on-felt-2); } .fh .link { color: var(--on-felt); }
.fh-dom { display: grid; grid-template-columns: 58px 1px minmax(0, 1fr); background: var(--dom-bg); color: var(--dom-ink); border-radius: 18px; min-height: 92px; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 18px 34px -20px rgba(0,0,0,.85); animation: fhIn .5s var(--spring) both; }
@keyframes fhIn { from { transform: translateY(8px) rotate(-1.5deg); } to { transform: none; } }
.fh-dom.big { min-height: 112px; }
.fh-half { display: grid; place-items: center; } .fh-half i { width: 20px; height: 20px; border-radius: 50%; background: var(--dom-pip); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
.fh-dom.ask .fh-half i { animation: fhPip 2.4s ease-in-out infinite; }
@keyframes fhPip { 50% { transform: scale(1.18); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 0 0 6px rgba(208,41,58,.18); } }
.fh-bar { background: var(--dom-line); margin-block: 14px; }
.fh-body { padding: 14px 16px; display: grid; gap: 10px; min-width: 0; align-content: center; }
.fh-in { width: 100%; min-height: 58px; padding: 0; border: 0; background: transparent; resize: none; outline: none; box-shadow: none; color: var(--dom-ink); font-family: inherit; font-weight: 700; font-size: clamp(18px, 2.2vw, 22px); line-height: 1.3; }
.fh-in::placeholder { color: var(--dom-ink-2); opacity: .85; font-weight: 600; }
.fh-act { display: flex; justify-content: flex-end; }
.fh-go { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-weight: 800; font-size: 14px;
  color: var(--dom-solid); background: var(--dom-ink); transition: transform .15s; }
.fh-go:active { transform: scale(.96); } .fh-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fh-one-row { display: flex; align-items: center; gap: 14px; }
.fh-one { flex: 1; min-width: 0; margin: 0; font-size: clamp(19px, 2.4vw, 25px); line-height: 1.25; font-weight: 800; overflow-wrap: anywhere; }
.fh-dom.done .fh-one { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--dom-pip); color: var(--dom-ink-2); }
.fh-hint { margin: 0; font-size: 12.5px; color: var(--dom-ink-2); }
.fh-edit { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: var(--dom-ink-2); cursor: pointer; }
.fh-edit:hover { background: var(--dom-line); color: var(--dom-ink); }
.fh-edit svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fh .fx-hold { color: var(--dom-ink); border-color: var(--dom-line); background: rgba(0,0,0,.04); }
.fh .fx-hold .fx-ring circle { stroke: var(--dom-pip); }
.fh .fx-hold.ok { color: #fff; background: var(--dom-pip); border-color: var(--dom-pip); }
.fh .fx-block { margin: 0; background: rgba(0,0,0,.24); border-color: rgba(255,255,255,.12); }
.fh .fx-press { margin: 0; color: var(--on-felt-2); } .fh .fx-press b { color: var(--on-felt); }
.fh-acts { display: flex; gap: 10px; }
.fh-work { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 16px; font-weight: 900;
  color: var(--dom-ink); background: var(--dom-bg); box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); transition: transform .15s; }
.fh-work:active { transform: scale(.97); } .fh-work svg { width: 18px; height: 18px; fill: currentColor; }
.fh-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .fh-cands small { width: 100%; font-size: 12.5px; color: var(--on-felt-2); }
.fh-cand { max-width: 100%; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: var(--on-felt); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.fh-cand:hover { background: rgba(255,255,255,.15); }
.fh-will { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: var(--on-felt-2); }
.fh-will b { color: var(--on-felt); font-weight: 700; }
.fh-batt { width: 30px; height: 16px; flex: none; } .fh-batt .bt-o { fill: none; stroke: var(--on-felt-2); stroke-width: 1.4; } .fh-batt .bt-c { fill: var(--on-felt-2); }
.fh-batt .bt-f { fill: var(--on-felt); } .fh-batt.low .bt-f { fill: var(--pip-felt); }
.fx-miss.saved { display: flex; align-items: center; gap: 10px; color: #b9f3d2; border-color: rgba(61,220,151,.35); background: rgba(61,220,151,.08); }
.fx-miss.saved svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-chip i { font-style: normal; font-size: 11.5px; font-weight: 900; padding: 2px 6px; border-radius: 999px; background: rgba(240,180,41,.18); color: #ffd36e; }

/* ── Cap : la cascade ── */
.fx-cap2 { padding-bottom: 6px; }
.fx-chain { display: block; width: calc(100% - 36px); margin: 4px 18px 0; height: auto; max-height: 170px; }
.fx-chain .floor { stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.fx-chain .ct rect { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.3; stroke-dasharray: 3 3; }
.fx-chain .ct line { stroke: rgba(255,255,255,.18); stroke-width: 1.2; }
.fx-chain .ct.set rect { fill: var(--dom-solid); stroke: rgba(255,255,255,.75); stroke-dasharray: none; stroke-width: 1.4; }
.fx-chain .ct.set line { stroke: var(--dom-ink-2); }
.fx-chain .ct { transform-box: fill-box; transform-origin: 50% 100%; animation: fxRise .6s var(--spring) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes fxRise { from { transform: scaleY(.7); } to { transform: none; } }
.fx-chain .sh { fill: rgba(0,0,0,.35); } .fx-chain .cpip { fill: var(--dom-pip); } .fx-chain .cdot { fill: var(--dom-ink-2); }
.fx-chain-m { display: flex; align-items: baseline; gap: 10px; margin: 8px 18px 6px; font-size: 13.5px; color: var(--muted); }
.fx-chain-m b { font-size: 24px; font-weight: 900; color: #fff; }
.fx-lrs { display: grid; padding: 0 8px 6px; }
.fx-lr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; border-top: 1px solid rgba(255,255,255,.06); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: 0; }
.fx-lr:first-child { border-top: 0; } .fx-lr:hover { background: rgba(255,255,255,.04); border-radius: 12px; }
.fx-lr > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-ld { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 30px; border-radius: 6px; border: 1.6px dashed rgba(255,255,255,.4); color: var(--muted); }
.fx-ld svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.fx-ld.set { background: var(--dom-solid); border: 1.6px solid rgba(255,255,255,.8); }
.fx-ld.now.set::after { content: ""; position: absolute; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--dom-pip); }
.fx-ld.lock { border-style: solid; border-color: rgba(255,255,255,.12); }
.fx-lr-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.fx-lr-t b { font-weight: 700; } .fx-lr-t b small { margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.fx-lr-t > span { font-size: 13.5px; color: #cfc9ee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-lr.locked .fx-lr-t > span { color: var(--muted); } .fx-lr.stale .fx-lr-t > span { color: #ffcf8a; }
.fx-lr-a { font-style: normal; font-size: 12px; font-weight: 800; color: #9be7c4; padding: 3px 8px; border-radius: 999px; background: rgba(61,220,151,.1); }
.fx-acts { margin: 14px 0 12px; display: grid; gap: 6px; }
.fx-acts-t { margin: 0 0 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.fx-act { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-top: 1px solid rgba(255,255,255,.06); }
.fx-act span { flex: 1; min-width: 0; overflow-wrap: anywhere; } .fx-act.on span { text-decoration: line-through; color: var(--muted); }
.fx-act .fx-ck { width: 30px; height: 30px; } .fx-act.on .fx-ck { color: #1c1600; background: #ffd60a; border-color: #ffd60a; }
.fx-lockline { display: flex; align-items: center; gap: 8px; color: var(--muted); } .fx-lockline svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.fx-gmod textarea { width: 100%; margin-top: 4px; }

/* ── La route vers la Lune ── */
.fx-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px 4px; }
.fx-sec-h h4 { margin: 0; font-size: 17px; font-weight: 800; } .fx-sec-h span { font-size: 13px; color: var(--muted); } .fx-sec-h span b { color: #fff; }
.fx-moonc, .fx-coins { margin-top: 16px; }
.fx-moon { display: block; width: 100%; max-width: 460px; margin: 0 auto; height: auto; overflow: visible; padding: 0 10px; box-sizing: border-box; }
.fx-moon .rt-all { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 2.5; stroke-dasharray: 3 6; stroke-linecap: round; }
.fx-moon .rt-done { fill: none; stroke: #8a6bff; stroke-width: 4; stroke-linecap: round; }
.fx-moon .rt-start { fill: #8a6bff; }
.fx-moon .ms-c { fill: #17142f; stroke: rgba(255,255,255,.2); stroke-width: 1.5; }
.fx-moon .ig { fill: none; stroke: #a49fc4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-moon .ms.hit .ms-c { fill: rgba(240,180,41,.18); stroke: #f0b429; } .fx-moon .ms.hit .ig { stroke: #ffd36e; }
.fx-moon .moonart circle { fill: rgba(255,255,255,.25); } .fx-moon .ms.last .ms-c { fill: #24204a; }
.fx-moon .ms-l { font: 600 10.5px Inter, -apple-system, sans-serif; fill: #a49fc4; } .fx-moon .ms.hit .ms-l { fill: #ffd36e; }
.fx-moon .rt-me { transition: transform 1.1s cubic-bezier(.34,1.3,.5,1); }
.fx-moon .me-halo { fill: rgba(255,122,112,.2); animation: fxHalo 2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes fxHalo { 50% { transform: scale(1.35); opacity: .4; } }
.fx-moon .me-dom { fill: var(--dom-solid); stroke: #fff; stroke-width: 1.4; } .fx-moon .me-pip { fill: var(--dom-pip); }
.fx-moon-c { margin: 4px 18px 16px; text-align: center; font-size: 13px; color: var(--muted); }

/* ── Tes coins ── */
.fx-coins { padding-bottom: 14px; } .fx-coins > p { margin: 10px 18px 0; }
.fx-coin-bal { display: flex; align-items: center; gap: 10px; padding: 6px 18px 4px; color: #ffe7a3; }
.fx-coin-bal svg.coin { width: 34px; height: 34px; } .fx-coin-bal b { font-size: 36px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fx-coin-r { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 18px 0; }
.fx-coin-r span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(0,0,0,.22); border: 1px solid var(--bd); }
.fx-coin-r small { font-size: 11.5px; color: var(--muted); } .fx-coin-r b { font-size: 18px; font-weight: 900; color: #ffe7a3; } .fx-coin-r b i { font-style: normal; font-size: 12px; color: #ffd36e; opacity: .8; }
.fx-tiers { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 18px 0; }
.fx-tiers span { font-size: 12px; font-weight: 700; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.05); color: var(--muted); }
.fx-tiers span.hit { background: rgba(240,180,41,.16); color: #ffd36e; }
.fx-wd.saved i { color: #3ddc97; } .fx-wd.saved i svg { stroke: #3ddc97; }

/* ── La fenêtre de victoire : le domino avance sur la route ── */
.fx-won { text-align: center; } .fx-won .fx-k { color: #ffd36e; }
.fx-won-r { margin: 6px -6px 4px; }
.fx-won h2 { margin: 2px 0 4px; font-size: 26px; }
.fx-won-mk { margin: 0 0 8px; font-weight: 700; color: #fff3b0; }
.fx-won-c { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 2px; font-size: 38px; font-weight: 900; color: #ffd60a; text-shadow: 0 0 24px rgba(255,214,10,.45); }
.fx-won-c svg.coin { width: 36px; height: 36px; }
.fx-won-s { margin: 0 0 14px; color: #ffcf6a; font-weight: 800; }

/* ═════════ La Boutique ═════════ */
.shp { display: grid; gap: 14px; max-width: 720px; margin: 0 auto; padding-bottom: 40px; }
.shp-sub { margin: 0; }
.shp-wallet { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 18px 18px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(240,180,41,.18), transparent 70%), rgba(255,255,255,.035); border-color: rgba(240,180,41,.3); }
.shp-bal { display: flex; align-items: center; gap: 12px; color: #ffe7a3; } .shp-bal svg.coin { width: 44px; height: 44px; }
.shp-bal b { font-size: 52px; line-height: 1; font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .shp-bal span { font-weight: 700; color: var(--muted); }
.shp-earn { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.shp-earn span { font-size: 13px; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,.25); color: #e6e0ff; } .shp-earn b { color: #ffe08a; }
.shp-wallet p.small { margin: 0; }
.shp-seg { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); }
.shp-seg button { flex: 1; padding: 10px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: background .25s, color .2s; }
.shp-seg button.on { background: linear-gradient(135deg, #8a6bff, #6a4be0); color: #fff; box-shadow: 0 4px 14px rgba(110,80,240,.45); }
.sh-price { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sh-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 14px; background: rgba(255,255,255,.06); color: #d9d3ff; }
.sh-ic.gold { background: rgba(240,180,41,.14); color: #ffd36e; } .sh-ic.big { width: 64px; height: 64px; border-radius: 50%; }
.sh-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sh-ic.big svg { width: 30px; height: 30px; }
.sh-list { padding: 4px 10px; }
.sh-rw { display: flex; align-items: center; gap: 12px; padding: 12px 6px; } .sh-rw + .sh-rw { border-top: 1px solid var(--line); }
.sh-rw-t { flex: 1; display: grid; gap: 5px; min-width: 0; } .sh-rw-t b { font-weight: 700; overflow-wrap: anywhere; }
.sh-rw-t > span:not(.sh-bar) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12.5px; color: var(--muted); }
.sh-rw-t em { font-style: normal; }
.sh-bar { height: 7px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; } .sh-bar i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #f0b429, #ffd36e); }
.sh-x { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.sh-x:hover { background: rgba(255,255,255,.06); } .sh-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.btn.arm { background: linear-gradient(135deg, #f0b429, #e08a00); color: #2a1e04; }
.sh-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 26px 18px; border: 1.5px dashed var(--line2); border-radius: 22px; color: var(--muted); }
.sh-empty b { color: #fff; }
.sh-new { display: grid; gap: 10px; } .sh-new h3 { margin: 0; }
.sh-new-r { display: flex; align-items: center; gap: 10px; } .sh-new-r input { max-width: 170px; }
.sh-claimed summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.sh-cl { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.sh-cl svg { width: 16px; height: 16px; flex: none; fill: none; stroke: #ffd36e; stroke-width: 1.8; } .sh-cl span { flex: 1; } .sh-cl small { color: var(--muted); }
.sh-sec { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px 18px; } .sh-sec h3, .sh-sec p { margin: 0; }
.sh-shield { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(61,220,151,.12); color: #3ddc97; }
.sh-shield svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.sh-stock { display: flex; align-items: center; gap: 8px; } .sh-stock span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.05); color: rgba(255,255,255,.18); }
.sh-stock span.on { color: #3ddc97; background: rgba(61,220,151,.12); } .sh-stock svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.sh-sty h3 { margin: 0 0 12px; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.sh-st { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.03); text-align: center; }
.sh-st.used { border-color: rgba(138,107,255,.7); box-shadow: inset 0 0 0 1px rgba(138,107,255,.5); background: rgba(138,107,255,.08); }
.sh-st b { font-size: 14px; } .sh-st .btn { min-width: 92px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.sh-tag { font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; background: rgba(61,220,151,.14); color: #3ddc97; }
.mini-dom { width: 30px; height: 50px; } .mini-dom .md-b { fill: var(--dom-solid); stroke: rgba(255,255,255,.55); stroke-width: 1.4; }
.mini-dom .md-l { stroke: var(--dom-ink-2); stroke-width: 1.6; stroke-linecap: round; } .mini-dom .md-p { fill: var(--dom-pip); } .mini-dom .md-i { fill: var(--dom-ink); }
.sh-felt { display: block; width: 64px; height: 44px; border-radius: 12px; background: radial-gradient(120% 80% at 15% -10%, rgba(255,255,255,.18), transparent 55%), linear-gradient(160deg, var(--felt), var(--felt-2)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.sh-snd { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.06); color: #d9d3ff; }
.sh-snd svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-won { text-align: center; display: grid; justify-items: center; gap: 6px; } .sh-won .btn { width: 100%; margin-top: 8px; }
.fx-act.on .fx-ck svg { stroke-dashoffset: 0; }
.fx-gmod em, .fx-pick h2 em { font-style: normal; color: #ff7a70; }
.fh-gain.won svg.coin .c-o { fill: #fff3c4; }
@media (max-width: 560px) { .fh-dom { grid-template-columns: 40px 1px minmax(0, 1fr); } .fh-half i { width: 16px; height: 16px; } .fh-body { padding: 12px 12px; }
  .fh .fx-hold { width: 46px; height: 46px; } .fh-one-row { gap: 10px; } .fh-edit { width: 32px; height: 32px; } }
@media (min-width: 1000px) {   /* à gauche ce qu'on fait aujourd'hui (l'Obsession, les listes), à droite la cascade, la route et les coins */
  .fx-grid { grid-template-areas: "hero goals" "lists goals" "week goals"; grid-template-rows: auto auto 1fr; }
  .fx-a-goals { align-self: start; } .fx-a-goals > .fx-card:first-child { margin-top: 0; } }

/* ═════════ v68 (14/10/2026) — l'onglet Tâches = le Focus ; la Mission en est reliée ═════════ */
.fx-tsec { flex: none; font-style: normal; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: #b9aef0; padding: 3px 8px; border-radius: 999px; background: rgba(138,107,255,.12); }
.fx-tsec.run { color: #ff8a80; background: rgba(255,69,58,.12); }
.fx-play { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(138,107,255,.4); background: rgba(138,107,255,.12); color: #d9d3ff; cursor: pointer; transition: transform .15s, background .2s; }
.fx-play:hover { background: rgba(138,107,255,.3); color: #fff; } .fx-play:active { transform: scale(.9); }
.fx-play svg { width: 13px; height: 13px; fill: currentColor; margin-left: 2px; }
.fx-row.done .fx-play { display: none; }
.fx-mates { margin-top: 16px; padding-bottom: 8px; }
.fx-mt { display: flex; gap: 12px; padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.06); }
.fx-mt:first-of-type { border-top: 0; }
.fx-mt-av { flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.fx-mt-av > * { width: 100%; height: 100%; }
.fx-mt-b { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fx-mt-b p { margin: 0; }
.fx-mt-h { display: flex; align-items: center; gap: 8px; } .fx-mt-h i { font-style: normal; font-size: 12px; font-weight: 800; color: #ffcf6a; }
.fx-mt-one { font-size: 14px; font-weight: 700; color: #f4f0ff; overflow-wrap: anywhere; } .fx-mt-one.done { color: #9be7c4; text-decoration: line-through; text-decoration-color: rgba(155,231,196,.6); }
.fx-mt-none { font-size: 13px; color: var(--muted); }
.fx-mt-lev { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: #cfc9ee; } .fx-mt-lev .done { text-decoration: line-through; color: var(--muted); }
.tm-todo-w.one .tm-todo { border-color: rgba(255,122,112,.5); }
.tm-todo-w.locked { opacity: .55; } .tm-todo-w.locked .tm-ck { cursor: not-allowed; }
.tm-star { font-style: normal; }

/* v69 (15/10/2026) — Profil → Telegram : les trois rappels du coach */
.tg-prefs { display: grid; gap: 8px; margin: 12px 0 14px; }
.tg-pref { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tg-pref.on { border-color: rgba(42,171,238,.45); background: rgba(42,171,238,.07); }
.tg-pe { font-size: 22px; flex: none; } .tg-pt { flex: 1; display: grid; gap: 2px; min-width: 0; } .tg-pt small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tg-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: rgba(255,255,255,.14); transition: background .2s; }
.tg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s var(--spring); }
.tg-pref.on .tg-sw { background: #2aabee; } .tg-pref.on .tg-sw::after { transform: translateX(18px); }

/* v70 (15/10/2026) — Sommeil : les rituels se cochent pendant la journée ; plus de « +XP » sur les rituels */
@media (max-width: 520px) { .quest { grid-template-areas: "ico lb tick"; } .quest .tick { align-self: center; } }
.q-det { margin-top: 12px; } .q-det summary { cursor: pointer; font-weight: 700; color: var(--muted); } .q-det[open] summary { margin-bottom: 10px; }
.pre-card { margin-bottom: 12px; }

/* v71 (15/10/2026) — trois styles de deepwork */
.tabs2.tabs3 { margin-top: 6px; } .tabs2.tabs3 button { flex: 1; }
.wz-cnt { display: flex; gap: 8px; } .wz-cnt button { flex: 1; height: 46px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: inherit; font: inherit; font-size: 17px; font-weight: 900; cursor: pointer; }
.wz-cnt button.on { border-color: var(--accent2, #8a6bff); background: linear-gradient(135deg, #8a6bff, #6a4be0); color: #fff; box-shadow: 0 4px 14px rgba(110,80,240,.4); }
.lv-style { margin: -4px 0 10px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Bilan hebdomadaire des interdictions (15/10/2026) */
.bc { margin: 8px 0 12px; padding: 14px 14px 12px; border-radius: 16px; background: linear-gradient(160deg, rgba(255,93,115,.14), rgba(255,93,115,.04)); border: 1px solid rgba(255,93,115,.35); }
.bc h4 { margin: 0 0 4px; font-size: 16px; font-weight: 900; }
.bc > p { margin: 0 0 10px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.bc-l { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.bc-l li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255,255,255,.04); }
.bc-l li span { flex: 1; font-weight: 800; font-size: 14px; }
.bc-l li small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.bc-l li em { font-style: normal; font-size: 12px; font-weight: 800; color: #ff8a9a; }
.bc-cr { border: 1px solid rgba(255,93,115,.45); background: transparent; color: #ff8a9a; font-weight: 800; font-size: 12px; padding: 6px 9px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.bc-cr:hover { background: rgba(255,93,115,.12); }
.bc-ok { background: #3ddc97; color: #062b1b; font-weight: 900; }
.bc-when { margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.bc-done { margin: 4px 0 10px 13px; font-size: 12.5px; color: #3ddc97; font-weight: 700; }
.bc-out { margin: 10px auto 4px; max-width: 520px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,93,115,.35); background: rgba(255,93,115,.08); text-align: center; }
.bc-out p { margin: 0 0 8px; font-size: 13.5px; }
.bc-pop { text-align: left; }

/* Boutique (15/10/2026) : ordre d'achat glissable et numéroté, prix en ligue atteinte, à quoi servent les styles */
.sh-list-c { padding: 6px 0 2px; }
.sh-order { margin: 6px 16px 0; }
.sh-grip { flex: none; display: grid; place-items: center; width: 22px; height: 34px; margin-right: -6px; color: var(--muted); cursor: grab; touch-action: none; opacity: .7; }
.sh-grip:hover { opacity: 1; } .sh-grip svg { width: 18px; height: 18px; fill: currentColor; }
.sh-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(240,180,41,.16); color: #ffd36e; font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1.5px rgba(240,180,41,.45); }
.sh-rw.dnd-lift { background: var(--bg2); border-radius: 16px; border-top: 0; }
.sh-price.lg { color: var(--lc); gap: 5px; } .sh-price.lg svg { width: 18px; height: 18px; }
.sh-bar.lg i { background: linear-gradient(90deg, #6eaeff, #c66dff); }
.sh-kind { margin: 10px 0; } .sh-kind button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; padding: 9px 8px; }
.sh-kind .coin-ic, .sh-kind svg { width: 16px; height: 16px; }
.sh-lgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.sh-lg { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: rgba(255,255,255,.03); color: var(--text); font: inherit; cursor: pointer; }
.sh-lg b { font-size: 12.5px; font-weight: 800; } .sh-lg small { font-size: 11px; color: var(--muted); }
.sh-lg.on { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 14%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--lc) 35%, transparent); }
.sh-why { margin: -4px 0 10px; line-height: 1.4; }

/* Muscle PC : la séance se valide toute seule à la fin (16/10/2026) */
.pc-r-ok { margin: 10px 0 12px; font-weight: 800; color: #4fae62; }

/* Boutique : la ligue se choisit à la division près (16/10/2026) */
.sh-lgs { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 10px; }
.sh-lgr { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.sh-lgn { flex: none; width: 112px; display: flex; align-items: center; gap: 6px; } .sh-lgn b { font-size: 12.5px; font-weight: 800; color: var(--lc); }
.sh-lgn svg { width: 28px; height: 28px; flex: none; }
.sh-lgd { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sh-lgr .sh-lg { padding: 5px 2px; gap: 0; border-radius: 10px; }
.sh-lgr .sh-lg b { font-size: 13px; } .sh-lgr .sh-lg small { font-size: 10px; white-space: nowrap; }
.sh-lgr .sh-lg.on { border-color: var(--lc); }
.sh-lgsel { margin: 0 0 8px; font-size: 13px; }

/* Fiche d'un centre d'intérêt sur téléphone (16/10/2026) :
   · l'anneau se centre dans sa colonne (il restait collé à gauche) ;
   · les fenêtres évitent la barre d'état et la Dynamic Island de l'iPhone (web app plein écran : la page passe dessous, et les
     touches y sont perdues — la croix était inaccessible) ; la croix reste accrochée en haut pendant qu'on fait défiler la fiche. */
.rt-ring > .st-ring { margin-left: auto; margin-right: auto; }
.overlay { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.lf-pop-x { position: sticky; top: calc(10px + env(safe-area-inset-top)); right: auto; margin: 0 0 -38px auto; }
@media (max-width: 720px) { .lf-pop-x { width: 42px; height: 42px; margin: 8px 8px -50px auto; } }