/* Drop v1 (YAP-034) : identité de la maquette validée (tools/drop-lab/mockup). */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("./fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url("./fonts/big-shoulders-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Mise en page : une colonne téléphone centrée, un écran à la fois, la carte occupe toute la hauteur libre. */
  color-scheme: dark;
  --ink: #121216;
  --ink-2: #171318;
  --glow: #30242a;
  --surface: #211f24;
  --surface-2: #2d292f;
  --line: #4b4548;
  --text: #f8f6f4;
  --muted: #b3abae;
  --coral: #ff6b5e;
  --coral-soft: #ff8b80;
  --coral-deep: #b23d2e;
  --focus: #ffaaa2;
  --on-coral: #171318;
  --gold-1: #fff1b8;
  --gold-2: #e8b847;
  --gold-3: #8f5f12;
  --silver-1: #f2eef1;
  --silver-2: #a59ca4;
  --silver-3: #575057;
  --holo-1: #7ef0ff;
  --holo-2: #b48cff;
  --holo-3: #ff8bd1;
  --holo-4: #ffe48a;
  --up: #ffd166;
  --down: #8aa4ff;
  --lore: #c4b1ff;
  --lore-ink: #241b3d;
  --tender: #ffcdbd;
  --tender-ink: #2a1a1c;
  --paper: #f4ebe1;
  --paper-ink: #2b2226;
  --ok: #7be0a6;
  --gain: #5fe3a1;
  --loss: #ff5f6d;
  --shade: rgb(8 6 10 / .7);
  --flash: #fff4ec;
  --holo: conic-gradient(from 210deg at 50% 45%, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-1));
  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Impact, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /* Zones sûres (encoche, indicateur d'accueil) : variables pour pouvoir les simuler en test. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
/* iOS : 100 % suit la petite fenêtre ; dvh suit la barre d'outils qui se replie. */
html, body { height: 100%; height: 100dvh; }
body {
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 82% 0%, var(--glow) 0, var(--ink) 30rem) var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .38; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Coquille : une colonne, un écran visible */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 460px;
  margin-inline: auto;
  padding-left: max(16px, var(--safe-left));
  padding-right: max(16px, var(--safe-right));
  padding-top: max(14px, var(--safe-top));
  padding-bottom: max(14px, calc(var(--safe-bottom) + 6px));
  /* Le halo du pack déborde de quelques pixels à 390 px : jamais de défilement latéral sur iOS. */
  overflow-x: clip;
}
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.scroll { overflow-y: auto; overscroll-behavior: contain; margin-inline: -6px; padding-inline: 6px; padding-bottom: 6px; }
.center { margin-block: auto; display: flex; flex-direction: column; gap: 16px; }
.eyebrow { color: var(--coral-soft); font-size: 11.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.title-xl { font-family: var(--font-display); font-size: 54px; font-weight: 900; line-height: .9; text-transform: uppercase; text-wrap: balance; }
.lead { color: var(--muted); font-size: 16px; font-weight: 600; }

.btn-primary, .btn-ghost {
  display: grid; place-items: center; width: 100%; min-height: 54px; padding: 10px 16px;
  border-radius: 16px; font-size: 16px; font-weight: 800;
}
.btn-primary { border: 0; background: var(--coral); color: var(--on-coral); }
.btn-ghost { border: 1.5px solid var(--line); background: transparent; color: var(--text); }

/* 1. Drop — YAP-045 : une action principale (déposer la conv), une secondaire (la conv fictive),
   tout le reste discret : pastilles des messageries, lien cadeau et textes légaux en pied de page. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--coral); color: var(--on-coral); font-size: 18px; font-weight: 900;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--coral) 35%, transparent);
}
.brand-name { font-size: 19px; font-weight: 900; letter-spacing: -.02em; }
.tag {
  padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fan { position: relative; flex: none; height: 128px; }
.fan-card {
  position: absolute; top: 8px; left: 50%; width: 82px; aspect-ratio: 5 / 7; margin-left: -41px;
  display: grid; place-items: center; border-radius: 12px;
  color: var(--on-coral); font-family: var(--font-display); font-size: 42px; font-weight: 900;
  box-shadow: 0 16px 30px -14px var(--shade);
}
.fan-card::after {
  content: ""; position: absolute; inset: 5px; border-radius: 8px;
  border: 1.5px solid color-mix(in srgb, var(--on-coral) 32%, transparent);
}
.fan-a { background: linear-gradient(150deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3)); transform: translateX(-58px) rotate(-12deg); }
.fan-c { background: radial-gradient(circle at 50% 35%, var(--coral-soft), var(--coral) 70%); transform: translateX(58px) rotate(12deg); }
.fan-b { z-index: 1; background: var(--holo); transform: translateY(-6px); font-size: 56px; }
.drop-title {
  font-family: var(--font-display); font-size: clamp(36px, 11vw, 48px); font-weight: 900;
  line-height: .9; text-transform: uppercase; text-wrap: balance; text-align: center;
}
.drop-title em { font-style: normal; color: var(--coral); }
.btn-drop {
  display: grid; gap: 2px; place-items: center; width: 100%; min-height: 84px; padding: 12px;
  border: 0; border-radius: 22px; background: var(--coral); color: var(--on-coral);
  box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--coral) 80%, transparent);
}
.btn-drop.is-over { outline: 3px dashed var(--text); outline-offset: 4px; }
.btn-drop-main { font-family: var(--font-display); font-size: 38px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.btn-drop-sub { font-size: 12.5px; font-weight: 700; opacity: .78; }
.consent { color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; text-wrap: balance; }
#screen-drop .center { gap: 14px; }
/* La ligne de confidentialité colle au bouton qu'elle explique. */
.drop-privacy { margin-top: -6px; }
.drop-privacy svg { display: inline-block; width: 13px; height: 13px; margin-right: 6px; vertical-align: -1px; color: var(--coral-soft); }
/* Action secondaire : la conv fictive ; sa page publique en simple lien juste dessous. */
.drop-try { display: flex; flex-direction: column; align-items: center; }
.drop-try > .dev-last { order: 1; align-self: stretch; margin-top: 4px; }
.demo-page-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; border-radius: 10px;
  color: var(--muted); font-size: 13px; font-weight: 700; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.demo-page-link:hover, .demo-page-link:focus-visible { color: var(--text); }
.foot-note { color: var(--muted); font-size: 11.5px; text-align: center; }

/* « Ça marche avec » (YAP-044, allégé en YAP-045) : une rangée de pastilles, chacune mène au guide
   d'export ; repères neutres (initiales, aucun logo de marque). Une ancre par langue, une seule
   visible selon <html lang> ; le lien couvre toute la pastille. */
.works { display: grid; justify-items: center; gap: 8px; }
.works-title { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.works-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.works-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 11px 0 7px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 55%, transparent); font-size: 12.5px; font-weight: 700; line-height: 1; white-space: nowrap;
}
.works-chip:hover { border-color: color-mix(in srgb, var(--coral-soft) 55%, var(--line)); background: var(--surface); }
.works-chip--partial { border-style: dashed; }
.works-mark {
  --hue: 200; display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px;
  background: linear-gradient(150deg, hsl(var(--hue) 82% 70%), hsl(calc(var(--hue) + 28) 70% 52%));
  color: #171318; font-family: var(--font-display); font-size: 13px; font-weight: 900; line-height: 1;
}
.works-mark--wa { --hue: 148; }
.works-mark--tg { --hue: 200; }
.works-mark--mm { --hue: 325; }
.works-mark--li { --hue: 112; }
.works-mark--dc { --hue: 238; filter: saturate(.55); }
.works-link { display: none; color: var(--text); text-decoration: none; }
.works-link::after { content: ""; position: absolute; inset: -1px; border-radius: 999px; }
.works-link:focus-visible { outline: none; }
.works-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
html:lang(fr) .works-link[hreflang="fr"], html:lang(en) .works-link[hreflang="en"], html:lang(es) .works-link[hreflang="es"],
html:lang(de) .works-link[hreflang="de"], html:lang(nl) .works-link[hreflang="nl"] { display: inline; }
.works-partial { color: var(--muted); font-size: 11px; font-weight: 700; }

/* Pied de page : « Offrir un pack » (gift.js) et textes légaux, en petit. Une ancre par langue. */
.drop-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 18px; padding-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 45%, transparent); color: var(--muted); font-size: 12px; font-weight: 650;
}
.drop-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
.foot-item { display: inline-flex; align-items: center; }
.foot-item + .foot-item::before { content: ""; width: 3px; height: 3px; margin-inline: 8px 6px; border-radius: 50%; background: currentColor; opacity: .6; }
.foot-link { display: none; align-items: center; min-height: 44px; padding: 0 4px; border-radius: 8px; color: inherit; text-decoration: none; }
.foot-link:hover, .foot-link:focus-visible { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
html:lang(fr) .foot-link[data-lang="fr"], html:lang(en) .foot-link[data-lang="en"], html:lang(es) .foot-link[data-lang="es"],
html:lang(de) .foot-link[data-lang="de"], html:lang(nl) .foot-link[data-lang="nl"] { display: inline-flex; }
#gift-entry:empty, #gift-entry:has(> .yg-gift-entry[hidden]) { display: none; }
#gift-entry .yg-gift-entry { color: var(--muted); }
#gift-entry .yg-gift-cta {
  width: auto; min-height: 44px; gap: 8px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: inherit;
}
#gift-entry .yg-gift-cta:hover { color: var(--text); }
#gift-entry .yg-gift-cta:hover .yg-cta-main { text-decoration: underline; text-underline-offset: 3px; }
#gift-entry .yg-gift-icon {
  width: 14px; height: 13px; border-width: 1.75px; border-radius: 3px; color: var(--coral-soft);
  background: linear-gradient(currentColor, currentColor) 50% 0 / 2px 100% no-repeat, linear-gradient(currentColor, currentColor) 0 3px / 100% 1.75px no-repeat;
}
#gift-entry .yg-cta-main { font-family: var(--font-body); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-transform: none; }
#gift-entry .yg-cta-sub { display: none; }
/* Le message des lecteurs d'écran (#announce) se pose en haut : sinon il ajoute 1 px sous la fenêtre. */
body > .sr-only { top: 0; left: 0; }

/* 2. Lecture */
.read-title { font-family: var(--font-display); font-size: 40px; font-weight: 900; line-height: .95; text-transform: uppercase; }
.read-note { padding: 8px 12px; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600; }
.ticker {
  flex: 1; min-height: 0; margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; overflow: hidden;
}
.ticker.is-static { justify-content: flex-start; overflow-y: auto; }
.fact { font-size: 19px; font-weight: 700; line-height: 1.25; text-wrap: pretty; transition: opacity .4s; }
.ticker:not(.is-static) .fact:not(:last-child) { opacity: .5; }
.fact-big {
  color: var(--coral); font-family: var(--font-display);
  font-size: 40px; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums;
}
.read-foot { display: grid; gap: 12px; }
.progress { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--coral); }
.read-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.read-hint { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.read-row .btn-ghost, .read-row .btn-primary { width: auto; min-height: 44px; padding-inline: 18px; }

/* 3. C'est qui toi ? */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); text-align: left;
}
.chip:hover { border-color: var(--coral-soft); }
.chip-emoji { flex: none; font-size: 28px; line-height: 1; }
.chip-text { display: grid; min-width: 0; }
.chip-name { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.chip-sub { color: var(--muted); font-size: 12px; font-weight: 600; }

/* 4. Le pack fermé, puis l'ouverture */
.screen-pack { position: relative; }
.rar-legendary { --rar: var(--holo-2); }
.rar-gold { --rar: var(--gold-2); }
.rar-common { --rar: var(--silver-1); }
.pack-wrap { position: relative; z-index: 1; container-type: size; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.pack-wrap.is-fading { opacity: 0; transition: opacity .2s; }
.pack-wrap > p { transition: opacity .25s; }
.pack-wrap.is-open > p { opacity: 0; }
.pack {
  position: relative; isolation: isolate; display: block;
  width: min(270px, 74cqw, calc((100cqh - 120px) * .625)); aspect-ratio: 5 / 8;
  padding: 0; border: 0; border-radius: 16px; background: none; color: var(--text);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.pack-glow {
  position: absolute; inset: -24%; z-index: -1; border-radius: 50%; opacity: .3; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rar) 85%, transparent), transparent);
}
/* Les deux morceaux occupent la même boîte : la ligne de déchirure tombe juste. */
.pack-top, .pack-main { position: absolute; inset: 0; border-radius: 16px; background: var(--holo); }
.pack-top {
  z-index: 2; transform-origin: 90% 8%;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 30%, transparent) 0 2px, transparent 2px 6px), var(--holo);
  clip-path: polygon(0 0, 100% 0, 100% 12%, 95% 14.5%, 90% 11.5%, 85% 14%, 80% 11%, 75% 14.5%, 70% 12%, 65% 14%, 60% 11%, 55% 14.5%, 50% 11.5%, 45% 14%, 40% 11%, 35% 14.5%, 30% 12%, 25% 14%, 20% 11%, 15% 14.5%, 10% 11.5%, 5% 14%, 0 12%);
}
.pack-main {
  z-index: 1; display: flex; flex-direction: column;
  clip-path: polygon(0 12%, 5% 14%, 10% 11.5%, 15% 14.5%, 20% 11%, 25% 14%, 30% 12%, 35% 14.5%, 40% 11%, 45% 14%, 50% 11.5%, 55% 14.5%, 60% 11%, 65% 14%, 70% 12%, 75% 14.5%, 80% 11%, 85% 14%, 90% 11.5%, 95% 14.5%, 100% 12%, 100% 100%, 0 100%);
}
.pack-body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  margin: 22% 9% 5%; padding: 16px 12px; border-radius: 14px; background: var(--ink-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 35%, transparent);
}
.pack-bottom { flex: none; height: 8%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 32%, transparent) 0 2px, transparent 2px 6px); }
.pack-shine { position: absolute; inset: 0; z-index: 3; overflow: hidden; border-radius: 16px; pointer-events: none; }
.pack-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%; transform: skewX(-14deg);
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--text) 65%, transparent), transparent); mix-blend-mode: overlay;
}
.pack-brand { color: var(--coral); font-family: var(--font-display); font-size: 16px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; }
.pack-title { font-family: var(--font-display); font-size: clamp(28px, 9vw, 38px); font-weight: 900; line-height: .92; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.pack-count { color: var(--muted); font-size: 13px; font-weight: 700; }
.pack-count b { color: var(--text); }
.pack.is-torn .pack-shine { opacity: 0; }
.pack.is-torn .pack-top { transform: translate(46px, -170px) rotate(26deg); opacity: 0; }
.pack.is-spent .pack-main { transform: translateY(55%) scale(.9); opacity: 0; }
.pack.is-spent .pack-glow { opacity: 0 !important; }
.pack-hint { color: var(--muted); font-size: 14px; font-weight: 700; }
.pack-hint small { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; opacity: .8; }
.rays-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.rays {
  position: absolute; left: var(--cx, 50%); top: var(--cy, 45%); width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%; opacity: .28;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar) 50%, transparent) 0 5deg, transparent 5deg 16deg);
  -webkit-mask-image: radial-gradient(circle, var(--ink) 6%, transparent 62%); mask-image: radial-gradient(circle, var(--ink) 6%, transparent 62%);
}
.fanout { position: fixed; left: var(--cx, 50%); top: var(--cy, 45%); z-index: 12; width: 0; height: 0; pointer-events: none; }
.cb {
  position: absolute; left: -56px; top: -78px; width: 112px; height: 156px; border-radius: 12px; opacity: 0;
  display: grid; place-items: center; color: var(--on-coral); font-family: var(--font-display); font-size: 50px; font-weight: 900;
  box-shadow: 0 18px 30px -14px var(--shade);
}
.cb::after { content: ""; position: absolute; inset: 5px; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--on-coral) 32%, transparent); }
.cb:nth-child(1) { --x: -118px; --a: -26deg; --d: 0ms; background: linear-gradient(150deg, var(--silver-1), var(--silver-2) 50%, var(--silver-3)); }
.cb:nth-child(2) { --x: -60px; --a: -13deg; --d: 40ms; background: radial-gradient(circle at 50% 35%, var(--coral-soft), var(--coral) 70%); }
.cb:nth-child(3) { --x: 0px; --a: 0deg; --d: 80ms; background: linear-gradient(150deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3)); }
.cb:nth-child(4) { --x: 60px; --a: 13deg; --d: 120ms; background: var(--holo); }
.cb:nth-child(5) { --x: 118px; --a: 26deg; --d: 160ms; background: var(--foil); }
.flash {
  position: fixed; inset: 0; z-index: 20; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, var(--flash) 0, var(--flash) 14%, color-mix(in srgb, var(--rar, var(--coral)) 60%, transparent) 34%, transparent 72%);
}
.fx { position: fixed; inset: 0; z-index: 18; width: 100%; height: 100%; pointer-events: none; }

/* Walkout : la carte du joueur se dévoile indice par indice */
.walkout {
  position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; overflow: hidden;
  padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right));
  background: var(--ink);
}
.walkout::before {
  content: ""; position: absolute; inset: -15%;
  background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--ink) 42%, transparent) 0, color-mix(in srgb, var(--ink) 62%, transparent) 38%, var(--ink) 76%), var(--foil);
}
.wo-rays {
  position: absolute; left: 50%; top: 44%; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--text) 16%, transparent) 0 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(circle, var(--ink) 5%, transparent 60%); mask-image: radial-gradient(circle, var(--ink) 5%, transparent 60%);
}
.wo-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 420px; text-align: center; }
.wo-clue { opacity: 0; }
.wo-clue.is-in { opacity: 1; }
.wo-emoji {
  display: grid; place-items: center; width: 128px; height: 128px; border-radius: 50%; font-size: 64px;
  background: radial-gradient(circle, var(--ink-2) 62%, transparent 63%), var(--foil);
  box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 55%, transparent);
}
.wo-role { padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--accent); font-size: 16px; font-weight: 800; }
.wo-num {
  margin-top: 10px; color: var(--text); font-family: var(--font-display); font-size: 150px; font-weight: 900; line-height: .9;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 44px var(--accent), 0 6px 24px var(--ink);
}
.wo-rar { color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .32em; text-transform: uppercase; }
.wo-name {
  color: var(--text); font-family: var(--font-display); font-size: clamp(64px, 21vw, 104px); font-weight: 900; line-height: .85;
  text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 8px 30px var(--ink);
}
.wo-skip { position: absolute; left: 0; right: 0; bottom: calc(20px + var(--safe-bottom)); color: var(--text); font-size: 12.5px; font-weight: 700; text-align: center; opacity: .7; }

/* Bouton son */
.btn-sound {
  position: absolute; top: max(13px, var(--safe-top)); right: max(16px, var(--safe-right)); z-index: 40;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--text);
}
.btn-sound svg { width: 18px; height: 18px; }
.mute-room { padding-right: 46px; }

/* 4 bis. Le paquet de cartes */
.deck { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.deck-bar { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.deck-group { flex: 1; min-width: 0; overflow: hidden; font-size: 14px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.deck-count { color: var(--muted); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.btn-mini { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 700; }
.deck-progress { height: 3px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.deck-progress span { display: block; width: 0; height: 100%; background: var(--coral); transition: width .25s; }
.stage { position: relative; flex: 1; min-height: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.stage:focus-visible { outline-offset: -3px; border-radius: var(--radius); }
.deck-actions { display: grid; grid-template-columns: 48px 1fr 1fr 48px; align-items: center; gap: 8px; }
.btn-round { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); }
.btn-round svg { width: 22px; height: 22px; }
.btn-act { min-height: 48px; padding: 0 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 15px; font-weight: 800; }
.btn-act-main { border-color: transparent; background: var(--coral); color: var(--on-coral); }
.btn-act[aria-expanded="true"] { background: var(--text); color: var(--ink); }

/* Cartes : socle commun */
.card {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  height: 100%; aspect-ratio: 9 / 16; max-width: 100%;
  overflow: hidden; border-radius: var(--radius); background: var(--ink-2); color: var(--text);
  box-shadow: 0 24px 50px -24px var(--shade), 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent) inset;
}
.card-in {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 22px 20px 14px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
}
.card blockquote, .card figure, .card ol, .card dl { margin: 0; }
.card .kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.card-foot {
  align-self: stretch; margin-top: auto; display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; text-align: left;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.card-foot span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.push { margin-top: auto; }
.display { font-family: var(--font-display); font-weight: 900; line-height: .9; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }

/* Carte joueur */
.r-legendary { --foil: var(--holo); --num: linear-gradient(165deg, var(--holo-1), var(--holo-3) 55%, var(--holo-4)); --accent: var(--holo-4); }
.r-gold { --foil: linear-gradient(150deg, var(--gold-1), var(--gold-2) 35%, var(--gold-3) 62%, var(--gold-1)); --num: linear-gradient(175deg, var(--gold-1), var(--gold-2)); --accent: var(--gold-2); }
.r-common { --foil: linear-gradient(150deg, var(--silver-1), var(--silver-2) 40%, var(--silver-3) 70%, var(--silver-1)); --num: linear-gradient(175deg, var(--silver-1), var(--silver-2)); --accent: var(--silver-1); }
.card-player { background: var(--foil); }
.card-player .card-in {
  inset: 6px; gap: 10px; padding: 18px 18px 12px; border-radius: calc(var(--radius) - 6px);
  background: radial-gradient(120% 55% at 85% 0%, color-mix(in srgb, var(--accent) 22%, var(--ink-2)) 0, var(--ink-2) 70%);
}
.pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pc-ovr { display: flex; flex-direction: column; align-items: flex-start; }
.pc-num {
  font-family: var(--font-display); font-size: 96px; font-weight: 900; line-height: .78;
  background: var(--num); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-rar { margin-top: 8px; color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pc-emoji {
  display: grid; place-items: center; flex: none; width: 92px; height: 92px; border-radius: 50%; font-size: 48px;
  background: radial-gradient(circle, var(--ink-2) 63%, transparent 64%), var(--foil);
}
.pc-you { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--coral); color: var(--on-coral); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-name { font-size: 50px; line-height: .86; }
.pc-role { margin-top: 6px; color: var(--accent); font-size: 15px; font-weight: 700; line-height: 1.25; }
.pc-meta { margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.pc-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; padding-block: 10px;
  border-block: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.pc-stats div { display: flex; align-items: baseline; gap: 6px; }
.pc-stats dd { order: -1; margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.pc-stats dt { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.pc-sig blockquote { font-size: 16px; font-weight: 700; line-height: 1.3; }
.pc-sig figcaption { margin-top: 3px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.pc-traits { display: grid; gap: 6px; font-size: 13.5px; line-height: 1.35; }
.pc-traits b { display: block; color: var(--accent); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.pc-line { color: var(--coral-soft); font-size: 16px; font-weight: 800; line-height: 1.3; }

/* Aura */
.card-aura { --tone: var(--gain); background: radial-gradient(100% 60% at 50% 32%, color-mix(in srgb, var(--tone) 34%, var(--ink-2)) 0, var(--ink-2) 75%); }
.card-aura.is-down { --tone: var(--loss); }
.card-aura .card-in { align-items: center; text-align: center; }
.card-aura .kicker { align-self: flex-start; color: var(--tone); }
.aura-num {
  color: var(--tone); font-family: var(--font-display); font-size: clamp(104px, 34vw, 150px); font-weight: 900; line-height: .82;
  font-variant-numeric: tabular-nums; text-shadow: 0 0 46px color-mix(in srgb, var(--tone) 55%, transparent);
}
.aura-unit { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.aura-person { margin-top: 14px; font-size: 44px; }
.aura-reason { max-width: 30ch; font-size: 17px; font-weight: 600; line-height: 1.4; text-wrap: balance; }

/* Lore */
.card-lore { background: linear-gradient(170deg, var(--lore-ink) 0, var(--ink-2) 72%); }
.card-lore .kicker { color: var(--lore); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.since { padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--lore) 55%, transparent); border-radius: 999px; color: var(--lore); font-size: 12px; font-weight: 700; }
.lore-emoji { font-size: 72px; line-height: 1; }
.lore-title { font-size: 46px; }
.lore-story { font-size: 17px; font-weight: 500; line-height: 1.45; }
.lore-count { display: flex; align-items: baseline; gap: 8px; }
.lore-count b { color: var(--lore); font-family: var(--font-display); font-size: 44px; font-weight: 900; line-height: .9; }
.lore-count span, .lore-people { color: var(--muted); font-size: 13px; font-weight: 700; }

/* Épisode et affiche de la saison */
.card-episode { background: linear-gradient(180deg, var(--ink) 0 15%, var(--ink-2) 15% 85%, var(--ink) 85%); }
.ep-code { color: var(--coral); font-family: var(--font-display); font-size: 60px; font-weight: 900; line-height: .85; }
.ep-show { margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ep-title { font-size: 44px; }
.ep-sum { font-size: 17px; line-height: 1.45; }
.ep-dots { display: flex; gap: 5px; }
.ep-dots span { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.ep-dots .past { background: color-mix(in srgb, var(--coral) 45%, var(--surface-2)); }
.ep-dots .on { background: var(--coral); }
.card-trailer { background: linear-gradient(180deg, var(--ink-2) 35%, color-mix(in srgb, var(--coral) 42%, var(--ink-2)) 100%); }
.card-trailer .kicker { color: var(--coral-soft); }
.tr-title { font-size: 50px; }
.tr-tag { font-size: 17px; font-style: italic; font-weight: 500; line-height: 1.4; }
.tr-list { display: grid; gap: 7px; padding: 0; list-style: none; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tr-list li { display: flex; gap: 10px; }
.tr-list span { flex: none; min-width: 28px; color: var(--coral-soft); font-family: var(--font-display); font-size: 16px; font-weight: 900; }
.tr-foot { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* Roast */
.card-roast { background: var(--coral); color: var(--on-coral); }
.roast-kicker { font-family: var(--font-display); font-size: 92px; font-weight: 900; line-height: .8; text-transform: uppercase; }
.roast-person { align-self: flex-start; padding: 4px 10px; background: var(--on-coral); color: var(--coral); font-size: 34px; line-height: 1; }
.roast-line { font-size: 24px; font-weight: 800; line-height: 1.22; letter-spacing: -.01em; text-wrap: pretty; }

/* Award */
.card-award {
  background:
    repeating-conic-gradient(from 0deg at 50% 24%, color-mix(in srgb, var(--gold-2) 12%, transparent) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle at 50% 24%, color-mix(in srgb, var(--gold-2) 26%, var(--ink-2)), var(--ink-2) 62%);
}
.card-award .card-in { align-items: center; text-align: center; }
.card-award .kicker { align-self: flex-start; color: var(--gold-1); }
.medal {
  display: grid; place-items: center; flex: none; width: 132px; height: 132px; border-radius: 50%; font-size: 60px;
  background: radial-gradient(circle, var(--ink-2) 61%, transparent 62%), linear-gradient(150deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3));
  box-shadow: 0 0 44px color-mix(in srgb, var(--gold-2) 40%, transparent);
}
.aw-title { color: var(--gold-1); font-size: 44px; }
.aw-to { color: var(--muted); font-size: 13px; font-weight: 600; }
.aw-to b { display: block; color: var(--text); font-size: 21px; font-weight: 800; }
.aw-reason { max-width: 30ch; font-size: 17px; font-weight: 500; line-height: 1.45; text-wrap: balance; }

/* Prédiction */
.card-pred { background: radial-gradient(90% 50% at 50% 28%, color-mix(in srgb, var(--lore) 30%, var(--ink-2)), var(--ink-2) 70%); }
.card-pred .card-in { align-items: center; text-align: center; }
.card-pred .kicker { align-self: flex-start; color: var(--lore); }
.orb {
  flex: none; width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--text) 0, var(--lore) 20%, var(--lore-ink) 72%);
  box-shadow: 0 0 54px color-mix(in srgb, var(--lore) 55%, transparent);
}
.pred-for { font-size: 40px; }
.pred-text { font-size: 21px; font-weight: 700; line-height: 1.3; text-wrap: balance; }

/* Lettre */
.card-letter { background: var(--paper); color: var(--paper-ink); }
.card-letter .card-in { gap: 14px; padding: 26px 24px 14px; }
.card-letter .kicker { color: var(--coral-deep); }
.lt-to { font-size: 38px; }
.lt-text { font-size: 15.5px; line-height: 1.62; white-space: pre-line; }
.lt-sign { font-weight: 800; }

/* Vous étiez là */
.card-care { background: linear-gradient(165deg, var(--tender) 0, color-mix(in srgb, var(--tender) 72%, var(--coral)) 100%); color: var(--tender-ink); }
.card-care .kicker { color: var(--coral-deep); }
.care-heart { color: var(--coral-deep); font-family: var(--font-display); font-size: 80px; font-weight: 900; line-height: .8; }
.care-title { font-size: 42px; }
.care-story { font-size: 17px; font-weight: 500; line-height: 1.45; }
.people { display: flex; flex-wrap: wrap; gap: 6px; }
.people span { padding: 4px 10px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.lock { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--tender-ink); color: var(--tender); font-size: 13px; line-height: 1.35; }
.lock svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.lock b { display: block; }

/* Classement aura */
.card-rank { background: linear-gradient(180deg, color-mix(in srgb, var(--up) 16%, var(--ink-2)), var(--ink-2) 55%); }
.card-rank .kicker { color: var(--up); }
.rk-title { font-size: 46px; }
.rk-list { display: grid; gap: 14px; padding: 0; list-style: none; }
.rk-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; }
.rk-pos { color: var(--muted); font-family: var(--font-display); font-size: 26px; font-weight: 900; }
.rk-name { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; }
.rk-val { color: var(--gain); font-family: var(--font-display); font-size: 30px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rk-row.is-down .rk-val { color: var(--loss); }
.rk-bar { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rk-bar span { display: block; height: 100%; background: var(--gain); }
.rk-row.is-down .rk-bar span { background: var(--loss); }
.rk-row:first-child .rk-pos, .rk-row:first-child .rk-val { font-size: 40px; }

/* Quiz */
.card-quiz { background: radial-gradient(110% 55% at 50% 0%, color-mix(in srgb, var(--coral) 24%, var(--ink-2)), var(--ink-2) 65%); }
.card-quiz .kicker { color: var(--coral-soft); }
.qz-title { font-size: 48px; }
.qz-body { display: flex; flex-direction: column; gap: 12px; }
.qz-step { color: var(--muted); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bubble { padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); font-size: 18px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.bubble small { display: block; margin-top: 8px; color: var(--muted); font-size: 11.5px; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qz-opt { min-height: 48px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.qz-opt:disabled { opacity: .45; }
.qz-opt.is-right, .qz-opt.is-wrong { opacity: 1; border-color: transparent; }
.qz-opt.is-right { background: var(--ok); color: var(--ink); }
.qz-opt.is-wrong { background: var(--coral); color: var(--on-coral); }
.qz-feedback { min-height: 1.4em; font-size: 16px; font-weight: 800; }

/* Offre */
.card-offer { background: radial-gradient(120% 45% at 50% 0%, color-mix(in srgb, var(--coral) 30%, var(--ink-2)), var(--ink-2) 62%); }
.card-offer .card-in { gap: 10px; }
.card-offer .kicker { color: var(--coral-soft); }
.of-title { font-size: 42px; }
.of-sub { font-size: 15px; font-weight: 700; }
.tiers { display: grid; gap: 12px; margin-top: 4px; }
.tier {
  position: relative; display: grid; gap: 4px; padding: 11px 14px; text-align: left;
  border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface);
}
.tier.is-main { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 14%, var(--surface)); box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--coral) 80%, transparent); }
.tier[aria-pressed="true"] { border-color: var(--ok); }
.tier-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tier-name { font-family: var(--font-display); font-size: 26px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.tier-price { color: var(--coral); font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: 1; }
.tier-items { color: var(--muted); font-size: 12.5px; font-weight: 500; line-height: 1.38; }
.tier-more { font-size: 12px; font-weight: 800; }
.tier[aria-pressed="true"] .tier-more { color: var(--ok); }
.tier-badge { position: absolute; top: -9px; right: 12px; padding: 3px 8px; border-radius: 999px; background: var(--coral); color: var(--on-coral); font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.of-sim { color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
.of-later { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Preuve : vrais messages, par-dessus la carte */
.proof {
  position: absolute; inset: auto 0 0; z-index: 3; max-height: 74%; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px 18px; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
  background: var(--ink); color: var(--text); text-align: left; box-shadow: 0 -20px 40px -10px var(--shade);
  user-select: text; -webkit-user-select: text;
}
.proof-head { color: var(--muted); font-size: 13px; font-weight: 600; }
.proof-head b { color: var(--text); }
.proof-lead { margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.proof-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.msg { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); }
.msg-meta { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.msg-meta b { color: var(--coral-soft); }
.msg-text { font-size: 14.5px; line-height: 1.38; overflow-wrap: anywhere; }
.msg-media .msg-text, .msg-system .msg-text { color: var(--muted); font-style: italic; }
.proof-more { margin-top: 8px; color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* 5. Récap */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mini {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  aspect-ratio: 3 / 4; max-width: 100%; padding: 9px; overflow: hidden; text-align: left;
  border: 0; border-radius: 12px;
}
/* Fond neutre en spécificité nulle : la classe de type de carte l'emporte. */
:where(.mini) { background: var(--surface); color: var(--text); }
.mini.card-player { color: var(--on-coral); }
.mini-kind { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.mini-big { font-family: var(--font-display); font-size: 34px; font-weight: 900; line-height: .9; overflow-wrap: anywhere; }
.mini-name { display: -webkit-box; overflow: hidden; font-size: 11.5px; font-weight: 700; line-height: 1.2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-more { border: 1.5px dashed var(--line); background: transparent; }
.mini-more .mini-big { color: var(--coral); }
.recap-actions { display: grid; gap: 10px; }
.link-box { display: grid; gap: 6px; }
.link-box label { color: var(--muted); font-size: 12px; font-weight: 700; }
.link-box input { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Annonces */
.toast {
  position: fixed; left: 50%; bottom: calc(86px + var(--safe-bottom)); z-index: 30; translate: -50% 0;
  width: max-content; max-width: calc(100vw - 32px - var(--safe-left) - var(--safe-right));
  padding: 12px 16px; border-radius: 14px; background: var(--text); color: var(--ink);
  font-size: 14px; font-weight: 700; text-align: center; box-shadow: 0 16px 40px -12px var(--shade);
}

/* Le seul moment orchestré : l'ouverture du pack. Ailleurs, des transitions courtes. */
.enter-fade { animation: fade .25s ease-out backwards; }
@media (prefers-reduced-motion: no-preference) {
  .pack { animation: bob 3.2s ease-in-out infinite; }
  .pack.is-torn { animation: none; }
  .pack-shine::before { animation: shimmer 3.4s ease-in-out infinite; }
  .pack-top { transition: transform .55s cubic-bezier(.2, .7, .3, 1), opacity .45s .12s; }
  .pack-main, .pack-glow { transition: transform .45s var(--ease), opacity .45s; }
  .rays { animation: spin 40s linear infinite; }
  .rays-layer.is-burst .rays { animation: rays-burst .9s ease-out forwards; }
  .fanout.is-out .cb { animation: fan .85s var(--ease) both; animation-delay: var(--d); }
  .flash.is-on { animation: flash .8s ease-out both; }
  .walkout.is-on::before { animation: flood .55s var(--ease) both; }
  .wo-rays { animation: spin 16s linear infinite; }
  .wo-role.is-in, .wo-rar.is-in { animation: rise .4s var(--ease) both; }
  .wo-emoji.is-in, .wo-num.is-in { animation: pop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
  .wo-name.is-in { animation: slam .34s cubic-bezier(.2, .9, .3, 1.15) both; }
  .wo-stage.is-quake { animation: quake .32s linear; }
  .enter-reveal { animation: reveal .45s cubic-bezier(.2, 1.3, .4, 1) backwards; }
  .enter-next { animation: flip-next .5s var(--ease) backwards; }
  .enter-prev { animation: flip-prev .5s var(--ease) backwards; }
  .fx-sweep::after {
    content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateX(-130%);
    background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--text) 50%, transparent) 46%, color-mix(in srgb, var(--holo-1) 35%, transparent) 52%, transparent 66%);
    mix-blend-mode: screen; animation: sweep .9s .18s var(--ease) forwards;
  }
  .fact { animation: rise .45s var(--ease) both; }
  .proof:not([hidden]) { animation: sheet .28s var(--ease) both; }
  .toast:not([hidden]) { animation: rise .25s var(--ease) both; }
  .card.is-settling { transition: transform .2s var(--ease); }
}
@media (prefers-reduced-motion: reduce) { .rays-layer { display: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
@keyframes shimmer { 0%, 55% { transform: translateX(0) skewX(-14deg); } 100% { transform: translateX(420%) skewX(-14deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rays-burst { from { opacity: 1; } to { opacity: 0; transform: rotate(140deg) scale(1.9); } }
@keyframes fan {
  0% { opacity: 0; transform: translateY(70px) scale(.5); }
  25% { opacity: 1; }
  55%, 72% { opacity: 1; transform: translate(var(--x), -46px) rotate(var(--a)); }
  100% { opacity: 1; transform: translate(0, -24px) scale(1.06); }
}
@keyframes flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes flood { from { opacity: 0; transform: scale(.25); } }
@keyframes pop { 0% { opacity: 0; transform: scale(.3); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes slam { 0% { opacity: 0; transform: scale(2.8); } 65% { opacity: 1; transform: scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-7px, 4px); } 40% { transform: translate(6px, -5px); } 60% { transform: translate(-4px, -3px); } 80% { transform: translate(3px, 4px); } }
@keyframes reveal { from { opacity: 0; transform: scale(.86); } }
@keyframes flip-next { from { opacity: 0; transform: perspective(1100px) translateX(36px) rotateY(-68deg) scale(.96); } }
@keyframes flip-prev { from { opacity: 0; transform: perspective(1100px) translateX(-36px) rotateY(68deg) scale(.96); } }
@keyframes sweep { to { transform: translateX(130%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes sheet { from { transform: translateY(100%); } }

/* Ajouts v1 : import réel, accord, attente honnête, erreurs, bêta. */
.drop-busy { color: var(--muted); font-size: 13.5px; font-weight: 700; text-align: center; }
.drop-error {
  padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--coral) 55%, transparent); border-radius: 14px;
  background: color-mix(in srgb, var(--coral) 12%, var(--surface)); font-size: 14px; font-weight: 600; line-height: 1.4;
}
.consent-box {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px;
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.4;
  border: 1px solid var(--line);
}
.consent-box svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--coral-soft); }
.consent-box.is-demo { color: var(--muted); }
.who-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.btn-link {
  min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--muted);
  font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.read-meta { display: grid; gap: 2px; min-width: 0; }
.progress.is-busy span { width: 34%; }
.tier { cursor: default; }
.of-beta { min-height: 52px; margin-top: 2px; }
.btn-drop:disabled, .btn-ghost:disabled { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .progress.is-busy span { animation: busy 1.6s ease-in-out infinite; }
}
@keyframes busy { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@media (min-width: 900px) {
  .app { max-width: 480px; }
}
/* L'offre tient sur un écran de 390 × 844 : paliers plus compacts qu'en maquette. */
.card-offer .card-in { gap: 8px; padding-top: 18px; }
.card-offer .of-title { font-size: 38px; }
.card-offer .of-sub { font-size: 14px; }
.card-offer .tiers { gap: 10px; }
.card-offer .tier { padding: 9px 12px; gap: 2px; }
.card-offer .tier-name { font-size: 23px; }
.card-offer .tier-price { font-size: 26px; }
.card-offer .tier-items { font-size: 12px; line-height: 1.32; }
.card-offer .of-later { min-height: 36px; }
.chip-emoji { font-family: var(--font-display); font-weight: 900; color: var(--coral-soft); }

/* ───── YAP-036 : langue, « Vous », chargement, offre, classeur, holographie ───── */
.mute-room { padding-right: 96px; }
.lang-select {
  /* Discret : un simple « FR » grisé à côté du son, sans cadre ni fond. */
  position: absolute; top: calc(max(13px, var(--safe-top)) + 4px); right: calc(max(16px, var(--safe-right)) + 46px); z-index: 40;
  height: 28px; min-width: 0; padding: 0 4px; border: 0; border-radius: 8px;
  background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  appearance: none; -webkit-appearance: none; cursor: pointer; opacity: .75;
}
.lang-select:hover, .lang-select:focus-visible { opacity: 1; color: var(--text); }
.lang-select option { color: initial; background: initial; }
.translate-status {
  position: fixed; top: calc(58px + var(--safe-top)); left: 50%; z-index: 35; translate: -50% 0; max-width: calc(100vw - 32px);
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
  color: var(--text); font-size: 13px; font-weight: 700; text-align: center; box-shadow: 0 10px 30px -12px var(--shade);
}

/* « Comment ils t'appellent ? » */
.name-form { display: grid; gap: 8px; }
.name-label { font-size: 13px; font-weight: 800; color: var(--muted); }
.name-input {
  width: 100%; min-height: 56px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--text); font-family: var(--font-display); font-size: 30px; font-weight: 900; text-transform: uppercase;
}
.name-input:focus-visible { border-color: var(--coral-soft); }
.name-hint { color: var(--muted); font-size: 12.5px; font-weight: 600; }

/* Lecture : time-lapse en fond, trouvailles en mini-cartes, progression réelle */
.screen-read { position: relative; isolation: isolate; }
.screen-read > :not(.read-bg) { position: relative; z-index: 1; }
/* YAP-037 : le time-lapse (frise, courbe, emojis) occupe un bandeau en haut, sous le sur-titre ;
   titre, trouvailles et progression restent dessous, sans chevauchement. */
.screen-read > .eyebrow { order: -2; }
.read-bg {
  order: -1; flex: none; display: block; width: 100%; height: clamp(96px, 19dvh, 180px);
  margin-bottom: -4px; pointer-events: none; opacity: .75;
}
.ticker { gap: 10px; }
.find {
  align-self: flex-start; display: grid; gap: 2px; max-width: 92%; padding: 10px 14px; border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -18px var(--shade); font-size: 16px;
}
.find:nth-child(even) { align-self: flex-end; }
.find.is-voice { background: color-mix(in srgb, var(--coral) 16%, var(--surface)); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.find-kicker { color: var(--coral-soft); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.find .fact-big { font-size: 30px; }
.ticker:not(.is-static) .fact:not(:last-child) { opacity: .62; }
.read-status { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.progress span { transition: width .6s var(--ease); }

/* Offre */
.of-fair { color: var(--text); font-size: 13.5px; font-weight: 700; }
.tier.is-owned { border-color: var(--ok); opacity: .82; }
.tier-name { margin: 0; }
.tier-each { color: var(--muted); font-size: 12px; font-weight: 700; }
.tier-plus { margin-top: 4px; font-size: 12.5px; font-weight: 800; }
.tier-items { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; }
.tier-item { display: grid; gap: 4px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tier-line { display: flex; gap: 8px; align-items: baseline; }
.tier-ico { flex: none; width: 1.3em; text-align: center; }
.blurred { display: grid; gap: 3px; margin: 0 0 2px 1.9em; padding: 0; list-style: none; font-size: 13px; }
.blurred li { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.blur-code { flex: none; color: var(--coral-soft); font-family: var(--font-display); font-weight: 900; }
.blur-emoji { flex: none; }
/* Titres annoncés mais flous : lisibles plus tard, ni sélectionnables ni lus maintenant. */
.blur {
  min-width: 0; overflow-wrap: anywhere; filter: blur(5px); opacity: .85;
  user-select: none; -webkit-user-select: none; pointer-events: none;
}
.tier-buy { margin-top: 8px; min-height: 50px; font-size: 15px; }
.tier-buy.is-quiet { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.tier-owned { margin-top: 6px; color: var(--ok); font-size: 13px; font-weight: 800; }
.tier-badge { z-index: 1; }

/* Classeur */
.binder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  position: relative; display: grid; gap: 4px; align-content: start; min-height: 104px; padding: 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden;
}
.tile::after { content: ""; position: absolute; inset: auto -20% -60% 40%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 22%, transparent), transparent); pointer-events: none; }
.tile-icon { font-size: 28px; line-height: 1; }
.tile-name { font-family: var(--font-display); font-size: 24px; font-weight: 900; line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; }
.tile-count { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.tile .ico-lock { position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; color: var(--muted); }
.tile.is-locked { border-style: dashed; }
.tile.is-locked.is-empty { opacity: .72; }
.tile:not(.is-locked) { border-color: color-mix(in srgb, var(--coral) 40%, var(--line)); }

/* Album */
.album { display: grid; gap: 16px; }
.album-sec { display: grid; gap: 8px; }
.album-head { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-transform: uppercase; }
.mini-locked { border: 1.5px dashed var(--line); background: repeating-linear-gradient(135deg, var(--surface) 0 8px, var(--ink-2) 8px 16px); }
.mini-locked .ico-lock { width: 18px; height: 18px; color: var(--muted); }
.mini-locked .mini-big { color: var(--muted); }

/* Carton d'intro de section */
.card-intro { background: radial-gradient(110% 60% at 50% 30%, color-mix(in srgb, var(--coral) 34%, var(--ink-2)), var(--ink) 75%); }
.card-intro .card-in { align-items: center; text-align: center; }
.card-intro .kicker { align-self: flex-start; color: var(--coral-soft); }
.intro-icon { font-size: 92px; line-height: 1; }
.intro-title { font-size: clamp(54px, 17vw, 76px); }
.intro-count { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.intro-prev { display: grid; gap: 6px; max-width: 32ch; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 70%, transparent); text-align: left; }
.intro-prev-head { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.intro-prev-text { font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.intro-tag { color: var(--muted); font-size: 13.5px; font-style: italic; }
.sec-season.card-intro { background: radial-gradient(110% 60% at 50% 30%, color-mix(in srgb, var(--loss) 30%, var(--ink-2)), var(--ink) 75%); }
.sec-care.card-intro { background: linear-gradient(165deg, color-mix(in srgb, var(--tender) 30%, var(--ink-2)), var(--ink) 80%); }

/* Épisode façon série */
.ep-series { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ep-badge { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 6px; background: var(--coral); color: var(--on-coral); font-family: var(--font-display); font-size: 17px; letter-spacing: 0; }
.ep-title { font-size: 42px; }
.ep-title .ep-code { color: var(--coral); }
.ep-title .ep-dot { color: var(--muted); }
.ep-hook { font-size: 18px; font-weight: 600; line-height: 1.4; }

/* Aura : jauge qui se remplit pendant que le compteur tourne */
.aura-gauge { width: 72%; height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.aura-gauge span { display: block; width: var(--gauge, 0%); height: 100%; border-radius: inherit; background: var(--tone); box-shadow: 0 0 14px var(--tone); transition: width .9s var(--ease); }

/* Holographie et swipe : la carte suit l'inclinaison et le doigt. */
.card { transform: translateX(var(--dx, 0px)) rotate(var(--dr, 0deg)) perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--holo-1) 55%, transparent) 38%, color-mix(in srgb, var(--holo-3) 50%, transparent) 50%, color-mix(in srgb, var(--holo-4) 45%, transparent) 62%, transparent 80%);
  background-size: 260% 260%; background-position: var(--hx, 50%) var(--hy, 50%); mix-blend-mode: color-dodge;
}
.card.is-holo::before { opacity: .12; }
.card.is-holo.r-legendary::before, .card.is-holo.r-gold::before, .card.is-holo.card-award::before { opacity: .38; }
.card.is-holo.card-letter::before, .card.is-holo.card-care::before { opacity: .08; }
.proof { z-index: 5; }
.enter-soft { animation: fade .9s ease-out backwards; }
@media (prefers-reduced-motion: no-preference) {
  .find { animation: drop-in .55s cubic-bezier(.2, 1.25, .4, 1) both; }
  .enter-fling { animation: reveal .32s var(--ease) backwards; }
  .tile { transition: transform .2s var(--ease); }
  .tile:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .card { transform: none; }
  .card::before { display: none; }
  .aura-gauge span { transition: none; }
  .enter-soft { animation: none; }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-34px) rotate(-4deg) scale(.92); } }
@media (max-width: 370px) {
  .binder { gap: 8px; }
  .tile-name { font-size: 21px; }
  .title-xl { font-size: 46px; }
}

/* Médias locaux : photos d’épisode, meme du groupe, vocaux */
.ep-photos { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 6px; }
.ep-photos.n-1 { --cols: 1; }
.ep-photos.n-3 { --cols: 3; }
.ep-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.ep-photos.n-1 img { aspect-ratio: 16 / 9; }
.card-meme { background: var(--ink); }
.card-meme .kicker { color: var(--coral-soft); }
.meme { display: grid; gap: 0; margin: 0; overflow: hidden; border-radius: 16px; background: var(--surface); }
.meme-img { display: block; width: 100%; max-height: 52vh; max-height: 52svh; object-fit: cover; }
.meme-quote {
  padding: 12px 14px; font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: .95;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.meme-by { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.meme-laughs { color: var(--coral-soft); font-size: 13px; font-weight: 800; }
.card-voices { background: linear-gradient(170deg, color-mix(in srgb, var(--holo-1) 18%, var(--ink-2)), var(--ink-2) 60%); }
.card-voices .kicker { color: var(--holo-1); }
.voices-total { font-family: var(--font-display); font-size: clamp(64px, 20vw, 92px); font-weight: 900; line-height: .85; }
.voices-sub { color: var(--muted); font-size: 13px; font-weight: 700; }
.voices-longest { font-size: 14px; font-weight: 600; }
.voices-longest b { color: var(--holo-1); }
.card-voices .rk-bar span { background: var(--holo-1); }
.card-voices .rk-val { color: var(--text); font-size: 20px; }
.side-box { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.side-box-title { font-family: var(--font-display); font-size: 26px; font-weight: 900; text-transform: uppercase; }
.side-box-status { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Les titres reçoivent le focus pour les lecteurs d'écran, sans anneau : ils ne sont pas interactifs. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
/* Le sur-titre réserve la hauteur des boutons langue et son : le titre passe dessous. */
.eyebrow.mute-room { min-height: 36px; display: flex; align-items: center; }

/* Écrans tactiles (YAP-037) : sous 16 px, Safari iOS zoome au focus d'un champ ; le sélecteur
   de langue garde son aspect discret par une mise à l'échelle visuelle. */
@media (hover: none) and (pointer: coarse) {
  .lang-select { font-size: 16px; scale: .69; transform-origin: 100% 50%; }
  .link-box input { font-size: 16px; }
}

/* Ordinateur (YAP-037) : l'offre montre les trois paliers côte à côte sur toute la largeur,
   Saison (recommandé) au milieu, légèrement surélevé, boutons alignés en bas. */
@media (min-width: 1024px) {
  .app:has(> #screen-offer:not([hidden])) { max-width: min(1240px, 100%); }
  #screen-offer > :not(.tiers, .of-hero, .of-bg) { width: 100%; max-width: 720px; margin-inline: auto; text-align: center; justify-content: center; }
  #screen-offer .of-later { width: auto; }
  #screen-offer .tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 20px;
    width: 100%; padding: 22px 4px 6px;
  }
  #screen-offer .tier { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; }
  #screen-offer .tier.is-main { translate: 0 -14px; }
  #screen-offer .tier-buy { margin-top: auto; }
  #screen-offer .tier-items { margin-bottom: 10px; }
}

/* ───── YAP-041 : offre vivante. Fond animé, exemple holo doré, grille des paliers, note divisée.
   Animations en transform / opacity seulement ; toutes coupées avec le mouvement réduit. ───── */
#screen-offer > .of-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.of-blob { position: absolute; width: 72vmax; height: 72vmax; border-radius: 50%; opacity: .5; }
.of-blob.b1 { left: -34vmax; top: -30vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--coral) 46%, transparent), transparent); }
.of-blob.b2 { right: -38vmax; top: 18vh; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold-2) 36%, transparent), transparent); }
.of-blob.b3 { left: -14vmax; bottom: -44vmax; background: radial-gradient(closest-side, color-mix(in srgb, var(--holo-2) 40%, transparent), transparent); }
.of-aurora {
  position: absolute; left: 50%; top: 40%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .16;
  background: conic-gradient(from 0deg, transparent 0 12%, var(--gold-2) 18%, transparent 26% 48%, var(--coral) 56%, transparent 64% 80%, var(--holo-2) 88%, transparent 96%);
  -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 70%); mask-image: radial-gradient(closest-side, #000 20%, transparent 70%);
}

/* Exclusif Légendaire : carte d'exemple + ce que le pack ultime ajoute */
.of-hero { display: grid; gap: 16px; }
/* Ancre des .sr-only et des calques : sinon WebKit les compte dans la hauteur du document. */
.of-hero, .of-show, .of-grid, .of-group, .of-row, .of-split, .of-sample { position: relative; }
.of-show {
  display: grid; gap: 10px; padding: 16px; border-radius: 24px; overflow: hidden;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--gold-2) 22%, transparent), transparent 60%) padding-box,
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    conic-gradient(from 140deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--holo-4), var(--gold-1)) border-box;
  box-shadow: 0 30px 60px -34px color-mix(in srgb, var(--gold-2) 75%, transparent);
}
.of-show-kicker { color: var(--gold-1); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.of-show-title { font-family: var(--font-display); font-size: 34px; font-weight: 900; line-height: .92; text-transform: uppercase; text-wrap: balance; }
.of-gold-text {
  background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 38%, var(--gold-1) 62%, var(--gold-2) 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.of-show-lead { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.of-show-body { display: grid; grid-template-columns: minmax(118px, 40%) minmax(0, 1fr); gap: 14px; align-items: center; }
.of-perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.of-perk { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 6px; align-items: start; }
.of-perk-ico { font-size: 17px; line-height: 1.15; }
.of-perk-text { display: grid; gap: 1px; min-width: 0; }
.of-perk-text b { font-size: 13.5px; font-weight: 800; line-height: 1.2; }
.of-perk-text span { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.3; }
.of-see { justify-self: start; min-height: 44px; padding: 0; color: var(--gold-1); }

/* Carte d'exemple, finition holo dorée (rendu propre à l'offre, indépendant du classeur) */
.of-sample { display: grid; gap: 8px; margin: 0; }
.sc-stage { position: relative; perspective: 800px; }
.sc-tilt { touch-action: pan-y; }
.sc-tag {
  position: absolute; top: -7px; left: -5px; z-index: 3; padding: 3px 8px; border-radius: 999px;
  background: var(--text); color: var(--ink); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 14px -6px var(--shade);
}
.sc-card {
  --rx: 0deg; --ry: 0deg; --hx: 0%; --hy: 0%;
  position: relative; aspect-ratio: 5 / 7; overflow: hidden; border-radius: 14px; color: #2a1904;
  background:
    radial-gradient(110% 70% at 25% 0%, #fff7d6 0%, transparent 55%),
    linear-gradient(155deg, #ffeaa6 0%, #e8b847 30%, #b9821f 55%, #f4d06c 76%, #9c6b15 100%);
  box-shadow: inset 0 0 0 1.5px #fff3c4, inset 0 0 0 4px color-mix(in srgb, #8f5f12 70%, transparent),
    0 22px 40px -18px color-mix(in srgb, var(--gold-2) 85%, transparent), 0 0 46px -10px color-mix(in srgb, var(--gold-1) 55%, transparent);
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .18s var(--ease);
}
.sc-card.is-ghost { background: linear-gradient(155deg, var(--surface-2), var(--surface)); box-shadow: inset 0 0 0 1.5px var(--line); }
.sc-holo, .sc-shine { position: absolute; pointer-events: none; }
.sc-holo {
  inset: -45%; opacity: .42; mix-blend-mode: color-dodge;
  background: conic-gradient(from 0deg, var(--holo-1), var(--holo-2), var(--holo-3), var(--holo-4), var(--holo-1));
  translate: var(--hx) var(--hy);
}
.sc-shine {
  inset: 0; z-index: 2; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / .8) 47%, rgb(255 246 214 / .35) 53%, transparent 64%);
  mix-blend-mode: soft-light;
}
.sc-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .7;
  background-image: radial-gradient(circle, rgb(255 255 255 / .95) 0 .8px, transparent 1.4px), radial-gradient(circle, rgb(255 255 255 / .7) 0 .6px, transparent 1.2px);
  background-size: 23px 29px, 37px 31px; background-position: 0 0, 11px 13px;
}
.sc-in { position: relative; z-index: 3; display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 9% 9% 7%; }
.sc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.sc-ovr { display: grid; line-height: 1; }
.sc-num { font-family: var(--font-display); font-size: clamp(26px, 9vw, 46px); font-weight: 900; line-height: .85; }
.sc-rar { font-size: clamp(7px, 2.2vw, 10px); font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.sc-emoji { font-size: clamp(20px, 7vw, 34px); line-height: 1; filter: drop-shadow(0 2px 3px rgb(80 50 0 / .35)); }
.sc-name { margin-top: auto; font-family: var(--font-display); font-size: clamp(20px, 7.4vw, 38px); font-weight: 900; line-height: .9; text-transform: uppercase; }
.sc-role { font-size: clamp(8.5px, 2.6vw, 12px); font-weight: 800; line-height: 1.15; }
.sc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px 4px; margin: 3px 0 0; padding-top: 4px; border-top: 1px solid rgb(42 25 4 / .35); }
.sc-stats div { display: flex; justify-content: space-between; gap: 2px; }
.sc-stats dt { font-size: clamp(6.5px, 2vw, 9px); font-weight: 800; letter-spacing: .06em; opacity: .8; }
.sc-stats dd { margin: 0; font-family: var(--font-display); font-size: clamp(9.5px, 3vw, 14px); font-weight: 900; line-height: 1.1; }
.sc-line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: clamp(7.5px, 2.3vw, 11px); font-weight: 700; font-style: italic; line-height: 1.2; }
.sc-foot { font-size: clamp(6.5px, 2vw, 9px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.sc-cap { color: var(--muted); font-size: 11.5px; font-weight: 600; line-height: 1.3; }

/* Grille « ce que chaque pack débloque » */
.of-grid {
  display: grid; gap: 12px; padding: 16px; border-radius: 24px; border: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--ink-2) 94%, transparent));
  box-shadow: 0 26px 50px -34px var(--shade);
}
.of-grid-title { font-family: var(--font-display); font-size: 30px; font-weight: 900; line-height: .95; text-transform: uppercase; text-wrap: balance; }
.of-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--ink); }
.of-pick-btn {
  display: grid; place-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 54px; padding: 6px 4px;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted); text-align: center;
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.of-pick-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-display); font-size: 18px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.of-pick-price { font-size: 12.5px; font-weight: 800; }
.of-pick-btn[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--coral), 0 8px 20px -10px color-mix(in srgb, var(--coral) 80%, transparent); }
.of-pick-btn.t-squad[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--silver-2); }
.of-pick-btn.t-legendaire[aria-pressed="true"] {
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold-2) 30%, var(--surface-2)), var(--surface-2));
  box-shadow: inset 0 0 0 2px var(--gold-2), 0 8px 22px -10px color-mix(in srgb, var(--gold-2) 85%, transparent);
}
.of-pick-btn.t-legendaire[aria-pressed="true"] .of-pick-price { color: var(--gold-1); }
.of-pick-btn:disabled { opacity: .6; }
.of-groups { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.of-group {
  display: grid; gap: 2px; padding: 8px 10px 6px; border-radius: 16px; border: 1px solid transparent;
  color: var(--muted); transition: background-color .3s, border-color .3s, color .3s;
}
.of-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.of-group-name { font-family: var(--font-display); font-size: 19px; font-weight: 900; line-height: 1; text-transform: uppercase; }
.of-group-state { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.of-group-state .ico-lock { width: 16px; height: 16px; }
.of-rows { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.of-row { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) 20px; gap: 8px; align-items: center; min-height: 36px; padding: 3px 0; }
.of-row-ico { text-align: center; font-size: 16px; }
.of-row-text { display: block; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.of-row-text::first-letter { text-transform: uppercase; }
.of-row .of-check { width: 20px; height: 20px; }
.of-row .of-check path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.of-row.is-exclusive .of-row-text { font-weight: 700; }
.of-group.is-out .of-row-ico { filter: grayscale(1); opacity: .55; }
.of-group.is-out .of-group-state { color: var(--muted); }
.of-group.is-in, .of-group.is-owned { color: var(--text); }
.of-group.is-in .of-check, .of-group.is-owned .of-check { color: var(--ok); }
.of-group.is-in .of-group-state, .of-group.is-owned .of-group-state { color: var(--ok); }
.of-group.is-fresh { color: var(--text); background: color-mix(in srgb, var(--coral) 13%, transparent); border-color: color-mix(in srgb, var(--coral) 45%, transparent); }
.of-group.is-fresh .of-check, .of-group.is-fresh .of-group-state { color: var(--coral-soft); }
.of-group.is-fresh.t-squad { background: color-mix(in srgb, var(--silver-2) 13%, transparent); border-color: color-mix(in srgb, var(--silver-2) 45%, transparent); }
.of-group.is-fresh.t-squad .of-check, .of-group.is-fresh.t-squad .of-group-state { color: var(--silver-1); }
.of-group.is-fresh.t-legendaire { background: color-mix(in srgb, var(--gold-2) 14%, transparent); border-color: color-mix(in srgb, var(--gold-2) 55%, transparent); }
.of-group.is-fresh.t-legendaire .of-check, .of-group.is-fresh.t-legendaire .of-group-state { color: var(--gold-1); }
.of-group.t-legendaire .of-group-name { color: var(--gold-1); }
.of-group.is-out.t-legendaire .of-group-name { color: color-mix(in srgb, var(--gold-1) 75%, var(--muted)); }

/* Diviser la note */
.of-split {
  display: grid; gap: 8px; padding: 14px; border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--coral) 20%, var(--ink-2)), var(--ink-2) 75%);
  border: 1px solid color-mix(in srgb, var(--coral) 35%, var(--line));
}
.of-split.t-legendaire { background: linear-gradient(135deg, color-mix(in srgb, var(--gold-2) 20%, var(--ink-2)), var(--ink-2) 75%); border-color: color-mix(in srgb, var(--gold-2) 45%, var(--line)); }
.of-split.t-squad { background: linear-gradient(135deg, color-mix(in srgb, var(--silver-2) 16%, var(--ink-2)), var(--ink-2) 75%); border-color: var(--line); }
.of-split-title { color: var(--coral-soft); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.of-split.t-legendaire .of-split-title { color: var(--gold-1); }
.of-split.t-squad .of-split-title { color: var(--silver-1); }
.of-split-each { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.of-split-each b { font-family: var(--font-display); font-size: 48px; font-weight: 900; line-height: .9; font-variant-numeric: tabular-nums; }
.of-split-each span { color: var(--muted); font-size: 13px; font-weight: 700; }
.of-split-btn { display: flex; justify-content: center; gap: 8px; min-height: 48px; background: color-mix(in srgb, var(--ink) 50%, transparent); }
.of-split-box { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink); color: var(--text); font: inherit; font-size: 14px; resize: vertical; }
.of-split-note { color: var(--muted); font-size: 11.5px; font-weight: 600; }
.of-cta { min-height: 56px; margin-top: 0; font-size: 16px; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--coral) 90%, transparent); }
.of-cta.t-squad { background: var(--silver-1); color: var(--ink); box-shadow: none; }
.btn-primary.is-gold, .of-cta.t-legendaire {
  border: 0; color: #2a1904;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 45%, #f6d77a 70%, var(--gold-2));
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--gold-2) 95%, transparent);
}

/* Paliers : profondeur, halo, Légendaire visiblement premium */
#screen-offer .tier {
  border-radius: 20px; padding: 14px 16px 16px; gap: 5px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 5%, var(--surface)), var(--surface) 55%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 9%, transparent), 0 24px 44px -28px var(--shade);
  transition: box-shadow .3s, border-color .3s;
}
#screen-offer .tier.t-squad { border-color: color-mix(in srgb, var(--silver-2) 45%, var(--line)); }
#screen-offer .tier.t-squad .tier-price { color: var(--silver-1); }
#screen-offer .tier.is-main {
  border-color: var(--coral);
  background: linear-gradient(180deg, color-mix(in srgb, var(--coral) 20%, var(--surface)), color-mix(in srgb, var(--coral) 6%, var(--surface)) 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--coral) 40%, transparent), 0 26px 50px -24px color-mix(in srgb, var(--coral) 70%, transparent);
}
#screen-offer .tier.is-legend {
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--gold-2) 26%, transparent), transparent 60%) padding-box,
    linear-gradient(180deg, color-mix(in srgb, var(--gold-2) 10%, var(--surface)), var(--surface) 60%) padding-box,
    conic-gradient(from 140deg, var(--gold-1), var(--gold-2), var(--gold-3), var(--holo-4), var(--gold-1)) border-box;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gold-1) 20%, transparent), 0 28px 56px -26px color-mix(in srgb, var(--gold-2) 70%, transparent);
}
#screen-offer .tier.is-legend .tier-name { background: linear-gradient(100deg, var(--gold-1), var(--gold-2) 45%, var(--gold-1) 70%, var(--gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
#screen-offer .tier.is-legend .tier-price { color: var(--gold-2); }
#screen-offer .tier.is-owned { border-color: var(--ok); }
#screen-offer .tier.is-picked:not(.is-owned) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 80%, transparent), 0 28px 56px -26px var(--shade); }
#screen-offer .tier.is-legend.is-picked { box-shadow: 0 0 0 2px var(--gold-1), 0 0 40px -8px color-mix(in srgb, var(--gold-2) 70%, transparent), 0 28px 56px -26px color-mix(in srgb, var(--gold-2) 70%, transparent); }
.tier-shine { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.tier-shine::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-110%);
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--gold-1) 20%, transparent) 50%, transparent 62%);
}
#screen-offer .tier > :not(.tier-shine, .tier-badge) { position: relative; z-index: 1; }
.tier-badge.is-gold { background: linear-gradient(90deg, var(--gold-1), var(--gold-2)); color: #2a1904; }
.tier-price { display: inline-flex; align-items: baseline; gap: 6px; }
.tier-was { color: var(--muted); font-family: var(--font-body); font-size: 14px; font-weight: 700; }
.tier-diff { color: var(--ok); font-size: 12.5px; font-weight: 800; }
.tier-label { min-width: 0; }
.tier-excl {
  display: inline-block; margin-left: 6px; vertical-align: 1px; padding: 1px 6px; line-height: 1.4; border-radius: 999px; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  background: color-mix(in srgb, var(--gold-2) 22%, transparent); color: var(--gold-1); border: 1px solid color-mix(in srgb, var(--gold-2) 50%, transparent);
}
.tier-item.is-exclusive { color: var(--text); }
.rec-tease li { flex-wrap: wrap; }
.rec-tease-name { flex: none; color: var(--text); font-weight: 700; }

/* Cartes du pack : records (calculés sur l'appareil) et bande-son */
.card-record { background: radial-gradient(110% 55% at 50% 18%, color-mix(in srgb, var(--up) 26%, var(--ink-2)), var(--ink-2) 68%); }
.card-record .card-in { align-items: center; text-align: center; }
.card-record .kicker { align-self: flex-start; color: var(--up); }
.rec-icon { font-size: 64px; line-height: 1; }
.rec-title { font-size: clamp(36px, 11vw, 52px); }
.rec-value { font-family: var(--font-display); font-size: clamp(54px, 18vw, 84px); font-weight: 900; line-height: .9; color: var(--up); font-variant-numeric: tabular-nums; }
.rec-detail { max-width: 30ch; font-size: 16px; font-weight: 600; line-height: 1.4; }
.rec-local { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.card-anthem { background: radial-gradient(120% 60% at 50% 20%, color-mix(in srgb, var(--holo-2) 32%, var(--ink-2)), var(--ink-2) 70%); }
.card-anthem .card-in { align-items: center; text-align: center; }
.card-anthem .kicker { align-self: flex-start; color: var(--holo-1); }
.an-disc {
  display: grid; place-items: center; width: 120px; height: 120px; border-radius: 50%; font-size: 52px;
  background: repeating-radial-gradient(circle, var(--ink) 0 3px, color-mix(in srgb, var(--ink) 70%, var(--text)) 3px 4px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--holo-2) 40%, transparent), 0 20px 40px -14px var(--shade);
}
.an-for { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.an-name { font-size: clamp(40px, 13vw, 60px); }
.an-song { display: grid; gap: 2px; }
.an-title { font-size: 22px; font-weight: 800; line-height: 1.2; }
.an-artist { color: var(--holo-1); font-size: 15px; font-weight: 700; }
.an-reason { max-width: 30ch; font-size: 16px; font-weight: 600; line-height: 1.4; }

@media (prefers-reduced-motion: no-preference) {
  .of-blob { will-change: transform; }
  .of-blob.b1 { animation: of-drift-a 22s ease-in-out infinite alternate; }
  .of-blob.b2 { animation: of-drift-b 27s ease-in-out infinite alternate; }
  .of-blob.b3 { animation: of-drift-c 31s ease-in-out infinite alternate; }
  .of-aurora { animation: of-turn 80s linear infinite; }
  .of-gold-text { animation: of-gold 6s ease-in-out infinite alternate; }
  .sc-tilt:not(.is-tilting) { animation: of-sway 7s ease-in-out infinite; }
  .sc-holo { animation: of-holo 9s linear infinite; }
  .sc-shine { animation: of-shine 4.2s 1s var(--ease) infinite; }
  .sc-card::after { animation: of-twinkle 2.6s ease-in-out infinite alternate; }
  .tier-shine::before { animation: of-shine 6s 1.5s var(--ease) infinite; }
  .tier-badge { animation: of-badge 2.8s ease-in-out infinite; }
  .of-group.is-fresh .of-check path { animation: of-draw .5s calc(var(--i, 0) * 45ms + 120ms) var(--ease) both; }
  .of-group.is-fresh { animation: of-light .6s var(--ease) both; }
  .of-group.is-fresh .of-row { animation: of-pop .45s calc(var(--i, 0) * 45ms) var(--ease) both; }
  .tiers.is-entering .tier { animation: of-tier-in .65s calc(var(--n, 0) * 110ms) cubic-bezier(.2, 1.1, .3, 1) both; }
  .tiers.is-entering .tier-item { animation: rise .45s calc(var(--n, 0) * 110ms + 260ms + var(--i, 0) * 50ms) var(--ease) both; }
  .of-show.is-entering .of-perk { animation: rise .45s calc(200ms + var(--i, 0) * 90ms) var(--ease) both; }
  .of-pick-btn:active, .of-split-btn:active, .tier-buy:active { transform: scale(.97); }
  #screen-offer .tier:not(.is-owned):hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--text) 40%, transparent), 0 30px 56px -26px var(--shade); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-card { transition: none; }
  .of-pick-btn, .of-group { transition: none; }
}
@keyframes of-drift-a { to { transform: translate(16vmax, 12vmax) scale(1.18); } }
@keyframes of-drift-b { to { transform: translate(-14vmax, 16vmax) scale(.86); } }
@keyframes of-drift-c { to { transform: translate(18vmax, -12vmax) scale(1.12); } }
@keyframes of-turn { to { transform: rotate(360deg); } }
@keyframes of-gold { to { background-position: 100% 0; } }
@keyframes of-sway { 0%, 100% { transform: rotateY(-9deg) rotateX(4deg); } 50% { transform: rotateY(9deg) rotateX(-3deg); } }
@keyframes of-holo { to { rotate: 360deg; } }
@keyframes of-shine { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }
@keyframes of-twinkle { from { opacity: .35; } to { opacity: .85; } }
@keyframes of-badge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes of-draw { from { stroke-dashoffset: 1; } }
@keyframes of-light { from { background-color: transparent; border-color: transparent; } }
@keyframes of-pop { from { opacity: .4; transform: translateX(-6px); } }
@keyframes of-tier-in { from { opacity: 0; transform: translateY(26px) scale(.96); } }

@media (max-width: 370px) {
  .of-show, .of-grid { padding: 14px 12px; }
  .of-show-title { font-size: 30px; }
  .of-grid-title { font-size: 26px; }
  .of-pick-name { font-size: 15px; }
  .of-group { padding: 8px 6px 6px; }
  .of-row { gap: 6px; }
  .of-split-each b { font-size: 42px; }
}

/* Ordinateur : paliers en trois colonnes d'abord, puis l'exemple et la grille côte à côte. */
@media (min-width: 1024px) {
  #screen-offer .tiers { order: 1; }
  #screen-offer .of-hero { order: 2; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 20px; width: 100%; margin-top: 8px; }
  #screen-offer #offer-note, #screen-offer #offer-redeem, #screen-offer #btn-offer-later { order: 3; }
  .of-show { padding: 22px; gap: 12px; }
  .of-show-title { font-size: 42px; }
  .of-show-body { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 20px; }
  .of-perk-text b { font-size: 15px; }
  .of-perk-text span { font-size: 13px; }
  .sc-num { font-size: 46px; }
  .sc-name { font-size: 34px; }
  .sc-role { font-size: 12px; }
  .sc-stats dt { font-size: 9px; }
  .sc-stats dd { font-size: 14px; }
  .sc-line { font-size: 11px; }
  .sc-rar, .sc-foot { font-size: 9.5px; }
  .of-grid { padding: 22px; }
  .of-grid-title { font-size: 34px; }
  .of-show, .of-grid { text-align: left; }
}

/* Bêta seulement (YAP-041) : « Rouvrir mon dernier classeur » sur l'accueil, petit (YAP-045) :
   une pastille en pointillés, « Oublier » à côté, la note sur une ligne. */
.dev-last { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 4px; }
.dev-last .dev-last-open {
  display: inline-grid; gap: 1px; width: auto; min-height: 44px; padding: 5px 16px;
  border: 1px dashed var(--line); border-radius: 999px; font-size: 13px; text-align: center;
}
.dev-last-title { font-size: 13px; font-weight: 800; }
.dev-last-sub { color: var(--muted); font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.dev-last .dev-last-forget { font-size: 12px; }
.dev-last-note { flex-basis: 100%; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; opacity: .85; }

/* Lien du classeur (YAP-041) : note de confidentialité sous les boutons, suppression confirmée. */
.side-box-note { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.4; }
#btn-group-delete.is-confirm { border-color: var(--loss); color: var(--loss); }

/* ───── YAP-042 : grand écran. Le téléphone (< 1024 px) garde exactement sa mise en page ;
   au-delà, chaque écran compose sur toute la largeur : colonnes, respiration, typographie
   plus grande. Les enveloppes de composition (.drop-copy, .who-intro, .who-pick) n'existent
   pas en mise en page sur téléphone (display: contents). ───── */
.drop-copy, .who-intro, .who-pick { display: contents; }

@media (min-width: 1024px) {
  :root {
    --page-w: 1440px;
    --gutter: clamp(28px, 3.6vw, 72px);
  }
  body { font-size: 16px; background: radial-gradient(60rem 40rem at 82% -10%, var(--glow) 0, transparent 70%), radial-gradient(50rem 36rem at 0% 110%, color-mix(in srgb, var(--coral) 9%, transparent) 0, transparent 70%) var(--ink); }
  .app, .app:has(> #screen-offer:not([hidden])), .app:has(> #screen-binder:not([hidden])) {
    max-width: none;
    padding-left: max(var(--gutter), var(--safe-left)); padding-right: max(var(--gutter), var(--safe-right));
    padding-top: max(22px, var(--safe-top)); padding-bottom: max(22px, var(--safe-bottom));
  }
  .btn-sound { top: max(22px, var(--safe-top)); right: max(var(--gutter), var(--safe-right)); width: 40px; height: 40px; }
  .lang-select { top: calc(max(22px, var(--safe-top)) + 6px); right: calc(max(var(--gutter), var(--safe-right)) + 50px); font-size: 12px; }
  /* Écran défilant : contenu centré sur --page-w, barre de défilement au bord de la fenêtre. */
  .scroll { margin-inline: calc(-1 * var(--gutter)); padding-inline: max(var(--gutter), calc((100% - var(--page-w)) / 2 + var(--gutter))); }
  .title-xl { font-size: clamp(64px, 5.4vw, 108px); }
  .lead { font-size: 18px; }
  .eyebrow { font-size: 12.5px; }
  .btn-primary, .btn-ghost { min-height: 58px; font-size: 17px; }
  .foot-note { font-size: 12.5px; }
  .toast { bottom: calc(40px + var(--safe-bottom)); font-size: 15px; }

  /* 1. Accueil (YAP-045) : tient dans la fenêtre sans défiler dès 1024 × 720. Texte et actions à
     gauche, éventail (et bandeau cadeau) à droite, pied de page en bas. Les tailles suivent la
     largeur ET la hauteur (clamp + svh) : une composition, pas un tassement. */
  #screen-drop { --page-w: 1400px; gap: clamp(8px, 1.8svh, 18px); }
  #screen-drop .center {
    display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "copy banner" "copy fan";
    align-items: center; column-gap: clamp(40px, 5vw, 112px); row-gap: 0; padding-block: clamp(4px, 1.5svh, 18px);
  }
  #gift-banner { grid-area: banner; align-self: end; }
  #gift-banner:empty { display: none; }
  #gift-banner .yg-banner { max-width: 520px; margin: 0 auto clamp(8px, 2svh, 20px); }
  #gift-banner .yg-banner-text { text-wrap: pretty; }
  .drop-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 2.3svh, 24px); }
  .drop-copy > * { width: 100%; max-width: 640px; }
  .drop-copy > .drop-title { max-width: 15ch; font-size: clamp(52px, min(5.5vw, 9.6svh), 96px); text-align: left; }
  .drop-copy > .btn-drop { min-height: clamp(82px, 13svh, 112px); border-radius: 26px; }
  .drop-copy .btn-drop-main { font-size: clamp(38px, 6svh, 52px); }
  .drop-copy .btn-drop-sub { font-size: 13.5px; }
  .drop-copy > .drop-privacy { margin-top: calc(-1 * clamp(4px, 1.1svh, 12px)); font-size: 13px; text-align: left; }
  .drop-try { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
  .drop-try > .btn-ghost { width: auto; min-height: clamp(50px, 7.4svh, 58px); padding-inline: 26px; font-size: 16px; }
  .drop-try > .demo-page-link { margin-left: -6px; }
  .drop-try > .dev-last { flex-basis: 100%; justify-content: flex-start; margin-top: -4px; }
  .dev-last .dev-last-open { min-height: 44px; font-size: 13px; }
  .dev-last-note { text-align: left; }
  .drop-copy > .works { max-width: none; justify-items: start; }
  .works-list { justify-content: flex-start; gap: 5px; }
  .works-chip { padding: 0 10px 0 7px; font-size: clamp(12.5px, .78vw, 14px); }
  #screen-drop .fan { --fan-w: clamp(124px, min(13vw, 24svh), 230px); grid-area: fan; height: calc(var(--fan-w) * 1.8); }
  #screen-drop .fan::before {
    content: ""; position: absolute; inset: -6% -4%; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--holo-2) 26%, transparent), color-mix(in srgb, var(--coral) 10%, transparent) 55%, transparent);
  }
  #screen-drop .fan-card {
    top: 50%; width: var(--fan-w); margin: calc(var(--fan-w) * -.7) 0 0 calc(var(--fan-w) / -2);
    border-radius: calc(var(--fan-w) * .1); font-size: calc(var(--fan-w) * .54); box-shadow: 0 40px 60px -30px var(--shade);
  }
  #screen-drop .fan-card::after { inset: 9px; border-radius: calc(var(--fan-w) * .065); border-width: 2px; }
  #screen-drop .fan-a { transform: translateX(-72%) rotate(-13deg); }
  #screen-drop .fan-c { transform: translateX(72%) rotate(13deg); }
  #screen-drop .fan-b { transform: translateY(-6%); font-size: calc(var(--fan-w) * .7); }
  .drop-foot { justify-content: space-between; padding-top: 0; }
  .drop-legal { margin-left: auto; }

  /* 2. « C'est qui toi ? » : présentation et accord à gauche, prénoms à droite. */
  #screen-who { --page-w: 1240px; }
  #screen-who .center {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
    column-gap: clamp(40px, 6vw, 112px); padding-block: 24px;
  }
  .who-intro, .who-pick { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  .who-intro .title-xl { font-size: clamp(72px, 6vw, 112px); }
  .who-pick .foot-note { text-align: left; }
  .who-intro .consent-box { font-size: 15px; padding: 16px 18px; }
  .who-pick .chips { gap: 14px; }
  .who-pick .chip { min-height: 84px; padding: 14px 18px; border-radius: 22px; gap: 14px; }
  .who-pick .chip-emoji { font-size: 36px; }
  .who-pick .chip-name { font-size: 19px; }
  .who-pick .chip-sub { font-size: 13px; }
  .who-pick .consent { text-align: left; }
  .who-pick .who-actions { justify-content: flex-start; }
  .who-pick .name-input { min-height: 68px; font-size: 38px; }
  .chip { transition: border-color .2s, background-color .2s; }
  .chip:hover { background: var(--surface-2); }

  /* Erreur : une colonne lisible au centre. */
  #screen-error .center { width: min(100%, 760px); margin-inline: auto; }
  #screen-error .recap-actions { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); }

  /* 3. Lecture : time-lapse en bandeau large, titre et progression à gauche, trouvailles à droite. */
  .screen-read {
    display: grid; width: min(100%, 1380px); margin-inline: auto;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "eye eye" "bg bg" "title ticker" "note ticker" "foot ticker";
    column-gap: clamp(40px, 6vw, 112px); row-gap: 18px;
  }
  .screen-read > .eyebrow { grid-area: eye; }
  .screen-read > .read-bg { grid-area: bg; height: clamp(150px, 27dvh, 300px); }
  .screen-read > .read-title { grid-area: title; align-self: start; font-size: clamp(56px, 5vw, 96px); }
  .screen-read > .read-note { grid-area: note; align-self: start; font-size: 14px; }
  .screen-read > .ticker { grid-area: ticker; min-height: 0; gap: 14px; }
  .screen-read > .read-foot { grid-area: foot; align-self: end; gap: 14px; }
  .screen-read .find { max-width: min(82%, 520px); padding: 14px 18px; border-radius: 20px; font-size: 18px; }
  .screen-read .find .fact-big { font-size: 38px; }
  .screen-read .read-status { font-size: 18px; }
  .screen-read .progress { height: 8px; border-radius: 4px; }
  .screen-read .read-hint { font-size: 13.5px; }

  /* 4. Pack, ouverture et walkout : plus grands, mêmes gestes. */
  .pack { width: min(360px, 74cqw, calc((100cqh - 150px) * .625)); }
  .pack-title { font-size: clamp(36px, 3.2vw, 50px); }
  .pack-brand { font-size: 19px; }
  .pack-count { font-size: 15px; }
  .pack-hint { font-size: 16px; }
  .pack-hint small { font-size: 13.5px; }
  .pack-wrap > .eyebrow { font-size: 13px; }
  .rays { width: 1100px; height: 1100px; margin: -550px 0 0 -550px; }
  .cb { left: -84px; top: -117px; width: 168px; height: 234px; font-size: 76px; border-radius: 18px; }
  .cb:nth-child(1) { --x: -190px; }
  .cb:nth-child(2) { --x: -96px; }
  .cb:nth-child(4) { --x: 96px; }
  .cb:nth-child(5) { --x: 190px; }
  .wo-rays { width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax; }
  .wo-stage { max-width: 960px; gap: 16px; }
  .wo-emoji { width: 176px; height: 176px; font-size: 88px; }
  .wo-role { padding: 9px 18px; font-size: 20px; }
  .wo-num { font-size: clamp(170px, 15vw, 240px); }
  .wo-rar { font-size: 15px; }
  .wo-name { font-size: clamp(110px, 10vw, 190px); }
  .wo-skip { font-size: 14px; }

  /* 4 bis. Paquet de cartes : la carte au centre, à hauteur confortable, commandes à sa mesure. */
  .deck { width: min(100%, 1240px); margin-inline: auto; gap: 14px; }
  .deck-bar, .deck-progress { width: min(100%, 760px); margin-inline: auto; }
  .deck-bar.mute-room { padding-right: 0; }
  .deck-group { font-size: 16px; }
  .deck-count { font-size: 14px; }
  .deck-progress { height: 4px; }
  .deck-actions { width: min(100%, 600px); margin-inline: auto; grid-template-columns: 56px 1fr 1fr 56px; gap: 12px; }
  .btn-round { width: 56px; height: 56px; }
  .btn-act { min-height: 56px; font-size: 16px; border-radius: 16px; }
  .stage .card { top: 50%; translate: -50% -50%; max-height: 820px; }

  /* 5. Offre : pleine largeur jusqu'à 1440 px, en-tête centré, paliers et vitrine plus amples. */
  #screen-offer > :not(.tiers, .of-hero, .of-bg) { max-width: 820px; }
  #screen-offer .title-xl { font-size: clamp(68px, 5.6vw, 112px); }
  #screen-offer .lead { font-size: 19px; }
  #screen-offer .of-fair { font-size: 15px; }
  #screen-offer .tiers { gap: clamp(20px, 2vw, 32px); padding-top: 28px; }
  #screen-offer .of-hero { gap: clamp(20px, 2vw, 32px); margin-top: 16px; }
}

/* Accueil entre 1024 et 1279 px : colonne de texte un peu plus large, pastilles sans initiale,
   pour garder les messageries sur une seule rangée. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #screen-drop .center { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  #screen-drop .works-mark { display: none; }
  #screen-drop .works-chip { padding: 0 12px; }
}

@media (min-width: 1360px) {
  #screen-offer .tier { padding: 22px 24px 24px; gap: 8px; }
  #screen-offer .tier-name { font-size: 32px; }
  #screen-offer .tier-price { font-size: 38px; }
  #screen-offer .tier-each { font-size: 13px; }
  #screen-offer .tier-item { font-size: 14.5px; }
  #screen-offer .blurred { font-size: 14px; }
  #screen-offer .tier-buy { min-height: 58px; font-size: 16px; }
  .of-show, .of-grid { padding: 28px; }
  .of-show-title { font-size: 50px; }
  .of-grid-title { font-size: 40px; }
  .of-show-lead { font-size: 15px; }
  .of-perks { gap: 14px; }
  .of-perk-text b { font-size: 16px; }
  .of-perk-text span { font-size: 13.5px; }
  .of-pick-btn { min-height: 62px; }
  .of-pick-name { font-size: 21px; }
  .of-row { min-height: 40px; }
  .of-row-text { font-size: 14.5px; }
  .of-group-name { font-size: 22px; }
  .of-split { padding: 18px; }
  .of-split-each b { font-size: 56px; }
  .sc-num { font-size: 56px; }
  .sc-name { font-size: 42px; }
  .sc-role { font-size: 14px; }
  .sc-stats dt { font-size: 10px; }
  .sc-stats dd { font-size: 16px; }
  .sc-line { font-size: 12.5px; }
  .sc-rar, .sc-foot { font-size: 10.5px; }
  .sc-cap { font-size: 12.5px; }
}

/* Éventail de l'accueil : flottement lent (grand écran, mouvement autorisé). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  #screen-drop .fan-a { animation: fan-float-a 6s ease-in-out infinite; }
  #screen-drop .fan-b { animation: fan-float-b 5.2s ease-in-out infinite; }
  #screen-drop .fan-c { animation: fan-float-c 6.6s ease-in-out infinite; }
}
@keyframes fan-float-a { 0%, 100% { transform: translateX(-72%) rotate(-13deg); } 50% { transform: translateX(-74%) translateY(-10px) rotate(-15deg); } }
@keyframes fan-float-b { 0%, 100% { transform: translateY(-6%); } 50% { transform: translateY(-9%) rotate(1.5deg); } }
@keyframes fan-float-c { 0%, 100% { transform: translateX(72%) rotate(13deg); } 50% { transform: translateX(74%) translateY(-8px) rotate(15deg); } }

/* Album : sections côte à côte, vignettes plus nombreuses par ligne. */
@media (min-width: 1024px) {
  #screen-recap { --page-w: 1400px; }
  #screen-recap .album { grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); gap: 28px 40px; align-items: start; }
  #screen-recap .album .grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
  #screen-recap .album-head { font-size: 26px; }
  #screen-recap .mini-big { font-size: 40px; }
  #screen-recap .recap-actions { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: start; }
}
@media (min-width: 1024px) {
  /* L'exemple Légendaire reste visible pendant qu'on parcourt la grille des paliers. */
  #screen-offer .of-show { position: sticky; top: 8px; }
}
@media (min-width: 1600px) {
  .of-show-body { grid-template-columns: minmax(0, 50%) minmax(0, 1fr); gap: 28px; }
  .sc-num { font-size: 64px; }
  .sc-name { font-size: 48px; }
}

/* YAP-039 : lien « ce qui part, ce qui reste » sous l'accord, renonciation avant le paiement. */
#who-consent { flex-wrap: wrap; }
.consent-link { flex-basis: 100%; margin-left: 30px; color: var(--coral-soft); font-size: 13px; font-weight: 700; }
.of-waiver { width: min(100%, 640px); margin: 4px auto 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.of-waiver-label { display: flex; align-items: flex-start; gap: 12px; color: var(--text); font-size: 14px; font-weight: 600; line-height: 1.45; cursor: pointer; }
.of-waiver-box { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--coral); cursor: pointer; }
.of-waiver-box:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.of-waiver-box[aria-invalid="true"] { outline: 2px solid var(--loss); outline-offset: 2px; }
.of-waiver-terms { color: var(--coral-soft); font-weight: 750; }
.of-waiver-err { margin: 8px 0 0 34px; color: #ff9b92; font-size: 13px; font-weight: 700; }
.of-waiver-err:empty { display: none; }