/* Page d'annonce des Mi — sombre par conception (préférence « landing » de Nicolas : fond nuit, accents bleu/violet/cyan,
   le jaune YUMi pour la vie). Avatars : vendor/mi-avatars.css (yumi-bot, copié tel quel) ; police : vendor/manrope.css. */
:root {
  color-scheme: dark;
  /* Le ciel de la page et du film : des dégradés, rien d'autre (le premier fond, celui que Nicolas a gardé). */
  --sky-0: #04030f;
  --sky-1: #15146e;
  --sky-2: #6c34f2;
  --sky-3: #2a45ff;
  --sky-4: #92e7ff;
  --yumi: #ffc72c;      /* jaune YUMi (charte yumi-brand) */
  --yumi-hot: #f28a25;  /* orange du picto Mi */
  --mi-grad: linear-gradient(180deg, #ffdc5c 0%, var(--yumi) 46%, var(--yumi-hot) 100%);
  --snake: conic-gradient(from -90deg, var(--sky-4), var(--sky-2), #ff5fb0, var(--yumi), var(--sky-4));
  --ink: #f5f5f7;
  --ink-2: rgba(245, 245, 247, .72);
  --ink-3: rgba(245, 245, 247, .5);
  --wash: 255, 255, 255;   /* la teinte des voiles et des filets : blanc sur les fonds sombres, noir sur les clairs */
  --line: rgba(var(--wash), .12);
  --glass: rgba(16, 14, 56, .55);
  --card: #141149;                     /* le fond plein d'une carte (pistes de la démo) */
  --panel: rgba(18, 16, 52, .82);      /* le fond des fenêtres du navigateur des Mi */
  --bar-fade: rgba(4, 3, 15, .72);     /* le voile sous la barre du haut */
  --on-ink: #120f3a;                   /* ce qui se dessine sur un disque couleur d'encre */
  --yumi-text: var(--yumi);            /* le jaune quand il est du TEXTE (plus foncé sur les fonds clairs) */
  --mark: #ffca2b;                     /* le mot-symbole */
  --ok: #8ff0b0;
  --err: #ff9e94;
  /* Jetons lus par les avatars des Mi. */
  --surface: #17162e;
  --accent: var(--yumi);
  --mono-w: 36px;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --sky:
    radial-gradient(70% 60% at 78% 12%, color-mix(in oklab, var(--sky-2) 70%, transparent), transparent 70%),
    radial-gradient(60% 55% at 12% 88%, color-mix(in oklab, var(--sky-3) 55%, transparent), transparent 70%),
    linear-gradient(180deg, var(--sky-0), var(--sky-1)) var(--sky-0);
}
/* ── Les fonds au choix (menu en haut ; mi.js pose html[data-bg] et data-tone, gardés dans l'adresse : ?bg=) ─────────
   Un fond = ses cinq couleurs de ciel (--sky-0 la base … --sky-4) ; les motifs redéfinissent --sky en entier. Les verres,
   cartes et fenêtres s'en déduisent ; les fonds clairs passent l'encre au noir (data-tone="light"). */
:root[data-tone="dark"]:not([data-bg="night"]) {
  --glass: color-mix(in oklab, color-mix(in oklab, var(--sky-1) 55%, var(--sky-0)) 62%, transparent);
  --card: color-mix(in oklab, var(--sky-1) 55%, var(--sky-0)); --panel: color-mix(in oklab, var(--card) 88%, transparent);
  --bar-fade: color-mix(in oklab, var(--sky-0) 78%, transparent); --on-ink: var(--sky-0);
}
:root[data-tone="light"] {
  color-scheme: light; --wash: 0, 0, 0; --ink: #141416; --ink-2: rgba(20, 20, 22, .72); --ink-3: rgba(20, 20, 22, .52);
  --glass: rgba(255, 255, 255, .66); --card: #ffffff; --panel: rgba(255, 255, 255, .92); --on-ink: #ffffff; --yumi-text: #9a6400; --mark: #141416;
  --bar-fade: color-mix(in oklab, var(--sky-0) 85%, transparent);
}
/* Sombres */
:root[data-bg="graphite"] { --sky-0: #0a0a0b; --sky-1: #1b1b1e; --sky-2: #4a4a52; --sky-3: #2c2c31; --sky-4: #c7c7cc; }
:root[data-bg="midnight"] { --sky-0: #03040c; --sky-1: #0b1030; --sky-2: #2b3a8a; --sky-3: #141c52; --sky-4: #c9d6ff;
  --sky: radial-gradient(1.2px 1.2px at 20px 30px, #fff 50%, transparent 51%) 0 0 / 140px 140px, radial-gradient(1px 1px at 90px 80px, rgba(255, 255, 255, .7) 50%, transparent 51%) 0 0 / 140px 140px,
    radial-gradient(1.6px 1.6px at 60px 120px, rgba(255, 236, 170, .9) 50%, transparent 51%) 0 0 / 230px 230px, radial-gradient(1px 1px at 170px 40px, rgba(255, 255, 255, .5) 50%, transparent 51%) 0 0 / 230px 230px,
    radial-gradient(70% 55% at 80% 10%, color-mix(in oklab, var(--sky-2) 55%, transparent), transparent 70%), linear-gradient(180deg, var(--sky-0), var(--sky-1)) var(--sky-0); }
:root[data-bg="aurora"] { --sky-0: #020d0e; --sky-1: #08302f; --sky-2: #18b892; --sky-3: #5b3ce0; --sky-4: #8ff0d8; }
:root[data-bg="ember"] { --sky-0: #110305; --sky-1: #360b14; --sky-2: #f2602a; --sky-3: #a8174a; --sky-4: #ffb38a; }
:root[data-bg="neon"] { --sky-0: #050308; --sky-1: #120a1f; --sky-2: #ff2fb3; --sky-3: #00d4ff; --sky-4: #b4ff3c; }
:root[data-bg="forest"] { --sky-0: #030a06; --sky-1: #0d2618; --sky-2: #2f9e5a; --sky-3: #c9a227; --sky-4: #b8f2c8; }
:root[data-bg="plum"] { --sky-0: #0d0410; --sky-1: #2c0f33; --sky-2: #c13fd1; --sky-3: #ff5f8f; --sky-4: #ffc1e3; }
:root[data-bg="cosmos"] { --sky-0: #07051a; --sky-1: #160b38; --sky-2: #7b3cff; --sky-3: #ff4f9a; --sky-4: #4fd8ff;
  --sky: radial-gradient(45% 35% at 75% 20%, color-mix(in oklab, var(--sky-2) 60%, transparent), transparent 70%), radial-gradient(40% 30% at 20% 60%, color-mix(in oklab, var(--sky-3) 40%, transparent), transparent 70%),
    radial-gradient(35% 30% at 70% 85%, color-mix(in oklab, var(--sky-4) 35%, transparent), transparent 70%), conic-gradient(from 210deg at 60% 40%, var(--sky-1), var(--sky-0), var(--sky-1), var(--sky-0), var(--sky-1)) var(--sky-0); }
:root[data-bg="grid"] { --sky-0: #0b0d12; --sky-1: #121826; --sky-2: #2f5fd0; --sky-3: #1b2a44; --sky-4: #9fc2ff;
  --sky: linear-gradient(rgba(159, 194, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(159, 194, 255, .07) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(60% 45% at 50% 0%, color-mix(in oklab, var(--sky-2) 35%, transparent), transparent 70%), linear-gradient(180deg, var(--sky-0), var(--sky-1)) var(--sky-0); }
:root[data-bg="dots"] { --sky-0: #0a0a0d; --sky-1: #15121f; --sky-2: #6c34f2; --sky-3: #2a45ff; --sky-4: #92e7ff;
  --sky: radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.7px) 0 0 / 24px 24px, radial-gradient(60% 45% at 80% 10%, color-mix(in oklab, var(--sky-2) 45%, transparent), transparent 70%),
    radial-gradient(55% 40% at 10% 90%, color-mix(in oklab, var(--sky-3) 35%, transparent), transparent 70%), var(--sky-0); }
:root[data-bg="yumi"] { --sky-0: #0b0906; --sky-1: #1a1408; --sky-2: #ffc72c; --sky-3: #f28a25; --sky-4: #fff1b8; }
/* Clairs */
:root[data-bg="dawn"] { --sky-0: #f6f1e7; --sky-1: #fff8ea; --sky-2: #ffcf6e; --sky-3: #ffb19c; --sky-4: #c9b8ff; }
:root[data-bg="paper"] { --sky-0: #f5f5f7; --sky-1: #ffffff; --sky-2: #dcdce6; --sky-3: #cfd8ea; --sky-4: #ffe3a1; }
:root[data-bg="peach"] { --sky-0: #fff1e9; --sky-1: #fff9f5; --sky-2: #ffb59a; --sky-3: #ffd7a0; --sky-4: #ff9ec2; }
:root[data-bg="mint"] { --sky-0: #eefaf3; --sky-1: #f8fffb; --sky-2: #9fe6c3; --sky-3: #bfe9ff; --sky-4: #ffe7a3; }
:root[data-bg="lavender"] { --sky-0: #f3f0ff; --sky-1: #fbfaff; --sky-2: #c9b8ff; --sky-3: #ffc6e5; --sky-4: #b8e1ff; }
:root[data-bg="sky"] { --sky-0: #edf5ff; --sky-1: #ffffff; --sky-2: #a9d4ff; --sky-3: #ffe0a3; --sky-4: #c8f0ff; }
:root[data-bg="sand"] { --sky-0: #f2e9da; --sky-1: #faf5ec; --sky-2: #e7c99a; --sky-3: #dcb9a2; --sky-4: #ffe3a1; }
:root[data-bg="lemon"] { --sky-0: #ffd23f; --sky-1: #ffe27a; --sky-2: #fff4c2; --sky-3: #ffb43b; --sky-4: #ffffff; --yumi-text: #5c3c00; }
:root[data-bg="notebook"] { --sky-0: #fbfbf7; --sky-1: #ffffff; --sky-2: #ffe3a1; --sky-3: #d6e4ff; --sky-4: #ffd6e3;
  --sky: linear-gradient(rgba(60, 100, 190, .1) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(60, 100, 190, .1) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(55% 40% at 85% 10%, color-mix(in oklab, var(--sky-2) 60%, transparent), transparent 70%), var(--sky-0); }
:root[data-bg="polka"] { --sky-0: #fffaf3; --sky-1: #ffffff; --sky-2: #ffd3e1; --sky-3: #c9e8ff; --sky-4: #fff0b3;
  --sky: radial-gradient(circle, var(--sky-2) 7px, transparent 7.5px) 0 0 / 64px 64px, radial-gradient(circle, var(--sky-3) 7px, transparent 7.5px) 32px 32px / 64px 64px,
    radial-gradient(circle, var(--sky-4) 4px, transparent 4.5px) 16px 48px / 64px 64px, var(--sky-0); }
:root[data-bg="candy"] { --sky-0: #fff7fb; --sky-1: #ffffff; --sky-2: #ffb8d9; --sky-3: #b8f2dc; --sky-4: #fff1a8;
  --sky: radial-gradient(45% 35% at 15% 15%, var(--sky-2), transparent 70%), radial-gradient(45% 35% at 85% 25%, var(--sky-4), transparent 70%),
    radial-gradient(50% 40% at 30% 85%, var(--sky-3), transparent 70%), radial-gradient(45% 35% at 85% 80%, #d6c8ff, transparent 70%), var(--sky-0); }
/* Le menu des fonds : une pilule comme les langues, la flèche dessinée en code. */
.pick select { height: 38px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass) no-repeat right 11px center / 10px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6'/%3E%3C/svg%3E");
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink-2); font: 600 13px var(--sans); appearance: none; -webkit-appearance: none; cursor: pointer; }
.pick select:hover { color: var(--ink); }
.pick option, .pick optgroup { color: #141416; background: #fff; }
/* Téléphone : chaque menu devient une pastille à icône (le fond : une demi-lune ; la musique : une note). */
@media (max-width: 600px) {
  .pick select { width: 40px; padding: 0; color: transparent; background-position: center; background-size: 16px 16px; }
  .bg-pick select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3Cpath d='M8 1.5a6.5 6.5 0 0 1 0 13z' fill='%23999'/%3E%3C/svg%3E"); }
  .music-pick select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 12V3l7-1.5v9' fill='none' stroke='%23999' stroke-width='1.4'/%3E%3Ccircle cx='4.5' cy='12' r='2' fill='%23999'/%3E%3Ccircle cx='11.5' cy='10.5' r='2' fill='%23999'/%3E%3C/svg%3E"); }
}

@property --lvl { syntax: '<number>'; inherits: true; initial-value: 3; }
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --mx { syntax: '<length>'; inherits: true; initial-value: 0px; }

html { color: var(--ink); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--sky); background-attachment: fixed; }
body { margin: 0; font: 400 16px/1.5 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
img, svg { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--yumi); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--yumi); color: #181818; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Barre : logo, langues, son ───────────────────────────────────────────────────────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar::before { content: ''; position: absolute; inset: 0 0 -28px; z-index: -1; background: linear-gradient(180deg, var(--bar-fade), transparent); }
.brand img { height: 22px; width: auto; }
:root[data-tone="light"] .brand img { filter: brightness(0) saturate(0); opacity: .9; }   /* fonds clairs : le logo passe à l'encre, comme le grand */
.tools { display: flex; align-items: center; gap: 8px; }
.langs, .sound {
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.langs { display: flex; padding: 3px; }
.langs button { height: 30px; min-width: 40px; padding: 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.langs button:hover { color: var(--ink); }
.langs button[aria-pressed="true"] { background: rgba(var(--wash), .13); color: var(--ink); }
.sound { width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-2); }
.sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound svg path:first-child { fill: currentColor; }
.sound[aria-pressed="false"] .on, .sound[aria-pressed="true"] .off { display: none; }
.sound[aria-pressed="true"] { color: var(--yumi-text); border-color: color-mix(in oklab, var(--yumi) 45%, transparent); }

/* Navigation par sections : un point par acte, l'acte courant s'allonge. */
.dots { position: fixed; right: 14px; top: 50%; translate: 0 -50%; z-index: 20; display: grid; gap: 2px; }
.dots a { display: grid; place-items: center; width: 24px; height: 24px; }
.dots a::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: rgba(var(--wash), .32); transition: height .35s var(--ease), background-color .35s; }
.dots a:hover::before { background: rgba(var(--wash), .7); }
.dots a[aria-current="true"]::before { height: 18px; background: var(--yumi); }
@media (max-width: 899px) { .dots { display: none; } }

/* Luma, la mascotte (luma.js) : un calque fixe par-dessus la page, ses paillettes sur une toile ; seul Luma prend le clic. */
.luma-sky { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.luma-sky canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.luma { position: absolute; left: 0; top: 0; font-size: clamp(58px, 6.4vw, 96px); margin: -.5em 0 0 -.5em; pointer-events: auto; cursor: pointer; }
.luma::before { content: ''; position: absolute; inset: -45%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, #ffd84d 34%, transparent), transparent); pointer-events: none; }
.luma .av { font-size: 1em; }

/* ── Typographie commune ─────────────────────────────────────────────────────────────────────────────────────── */
main > section { position: relative; padding-inline: var(--gutter); }
.title { margin: 0; font: 800 clamp(40px, 7.4vw, 112px)/.98 var(--sans); letter-spacing: -.045em; text-align: center; text-wrap: balance; }
.lede { margin: 0; max-width: 34em; font: 400 clamp(17px, 1.55vw, 22px)/1.45 var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
.eyebrow { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--yumi-text); }
:lang(zh-CN) .title, :lang(zh-CN) .huge, :lang(zh-CN) .manifesto .stage { letter-spacing: 0; }
:lang(zh-CN) .eyebrow { letter-spacing: .3em; }
:lang(zh-CN) :is(.title, .huge, .say, .line, .big) { word-break: keep-all; }   /* chinois : un titre ne se coupe qu'après une ponctuation */

/* Apparition au défilement (fonctionnelle : elle dit « ceci arrive »). */
.reveal { opacity: 0; translate: 0 26px; transition: opacity .9s var(--ease), translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.reveal.in { opacity: 1; translate: 0 0; }

/* Mi en 3D : la case du rendu est plus grande que le Mi (--room3d, posé par sync-vendor.mjs avec l'air rendu à la
   caméra) : ses mains, ses sauts, ses oreilles en sortent sans être coupés ; 1.3 = le poids de son jumeau 2D. */
.av > canvas.av3d { scale: calc(1.3 * var(--room3d, 1)); pointer-events: none; }   /* les cases se chevauchent : le clic va au Mi, pas à son voisin */
/* Les Mi passent devant leur cadre (carte, ligne, assiette) : ils peuvent en déborder, rien ne les recouvre. */
.av { z-index: 1; }

/* ── Le mot-symbole officiel, lettre à lettre (logo.js) : YUMi ⇄ YOU & Mi ───────────────────────────────────── */
.mark { --h: 1em; display: flex; height: var(--h); color: var(--mark); }
/* Une lettre : sa case a la largeur officielle du glyphe, et l'écart qui la précède (--ml). */
.mark .g { flex: none; display: flex; height: 100%; width: calc(var(--w) * var(--h)); margin-left: calc(var(--ml, 0) * var(--h)); }
.mark .g svg { flex: none; width: 100%; height: 100%; fill: currentColor; overflow: visible; }
/* Les lettres de gauche forment un bloc posé par rapport au M (logo.js le déplace) ; seul le bord du M le coupe : ce qui
   passe derrière lui disparaît net. */
.mark .g-left { position: relative; flex: none; height: 100%; width: calc(var(--gw, 0) * var(--h)); clip-path: inset(-100% 0 -400% -400%); }
.mark .g-left .g { position: absolute; top: 0; right: 0; }
.mark .g-amp { align-items: center; }
.mark .g-amp span { width: 100%; text-align: center; font: 300 calc(var(--h) * .74)/1 var(--sans); color: var(--ink-3); }
/* Les trois barres du « i » : un vumètre (--lvl de 0 à 3) — la musique quand elle joue, une respiration sinon. */
.mark .b1 { opacity: clamp(.2, var(--lvl), 1); }
.mark .b2 { opacity: clamp(.2, calc(var(--lvl) - 1), 1); }
.mark .b3 { opacity: clamp(.2, calc(var(--lvl) - 2), 1); }
.mark.idle { animation: lvl 2.4s ease-in-out infinite; }
@keyframes lvl { 0%, 100% { --lvl: 3; } 50% { --lvl: 1.3; } }

/* ── Acte 1 : accroche ───────────────────────────────────────────────────────────────────────────────────────── */
.hero {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 2vw, 26px); padding-block: 96px 64px; text-align: center; overflow: clip;
}
.hero > :not(.crowd) { position: relative; z-index: 1; }
.wordmark { margin: 0; font-size: clamp(64px, 12.5vw, 176px); line-height: 1; }
.trans { margin: -.2em 0 0; height: 1.4em; font: 300 clamp(20px, 2.4vw, 32px)/1.4 var(--sans); letter-spacing: .04em; color: var(--ink-2); }
.trans span { display: inline-block; opacity: 0; translate: 0 .4em; transition: opacity .6s var(--ease), translate .6s var(--ease); }
.trans.show span { opacity: 1; translate: 0 0; }
.film-btn, .tour-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 14px; border-radius: 999px;
  font-weight: 700; font-size: 15px; color: var(--ink); background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: border-color .25s, translate .2s var(--ease);
}
.film-btn svg, .tour-btn svg { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--ink); fill: var(--on-ink); }
.film-btn:hover, .tour-btn:hover { border-color: color-mix(in oklab, var(--yumi) 55%, transparent); translate: 0 -1px; }
/* La présentation : la page se joue toute seule (mi.js) ; sa barre de progression, en bas, pour l'arrêter. */
.hero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tour-btn { border-color: color-mix(in oklab, var(--yumi) 45%, transparent); }
.tour-bar { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 21; translate: -50% 0; display: none; align-items: center; gap: 12px; padding: 7px 7px 7px 18px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.touring .tour-bar { display: flex; }
.tour-bar i { position: relative; width: 160px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.tour-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--yumi); }
.tour-stop { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--line); color: var(--ink); }
.tour-stop svg { width: 14px; height: 14px; fill: currentColor; }
.crowd { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.crowd .float {
  position: absolute; left: var(--x); top: var(--y); font-size: var(--s);
  translate: calc(var(--px, 0) * var(--d) * 40px) calc(var(--py, 0) * var(--d) * 40px - var(--sy, 0) * var(--d) * .45px);
  filter: blur(var(--b, 0px));
  scale: .4; opacity: 0; transition: scale 1s var(--ease) var(--in, 0s), opacity .6s var(--in, 0s);
}
.crowd.in .float { scale: 1; opacity: var(--o, 1); }
.crowd .av { font-size: 1em; animation: drift var(--ft, 7s) ease-in-out var(--fd, 0s) infinite alternate; }
@keyframes drift { from { transform: translateY(-7px) rotate(-4deg); } to { transform: translateY(7px) rotate(4deg); } }

/* Le prix d'entrée, en pastille, juste au-dessus du formulaire. */
.price { margin: 0; padding: 6px 14px; border-radius: 999px; font: 700 15px/1.2 var(--sans); color: var(--yumi-text); background: color-mix(in oklab, var(--yumi) 12%, transparent); border: 1px solid color-mix(in oklab, var(--yumi) 34%, transparent); }

/* Formulaire : une pilule (adresse + bouton), le message prend la place de la note. */
.signup { width: min(100%, 480px); display: grid; justify-items: center; gap: 12px; }
.pill {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 6px;
  border-radius: 999px; background: var(--glass); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 24px 60px -24px rgba(30, 12, 110, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .25s, box-shadow .25s;
}
.pill:focus-within { border-color: color-mix(in oklab, var(--yumi) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--yumi) 16%, transparent), 0 24px 60px -24px rgba(30, 12, 110, .9); }
.field { flex: 1; min-width: 0; display: flex; }
.field input { width: 100%; height: 48px; padding: 0 8px 0 20px; border: 0; background: transparent; color: var(--ink); font: 500 16px var(--sans); outline: none; }
.field input::placeholder { color: var(--ink-3); }
.signup button {
  flex: none; height: 48px; padding: 0 18px 0 22px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  font: 700 15px var(--sans); color: #1b1405; background: var(--mi-grad);
  box-shadow: 0 10px 26px -10px color-mix(in oklab, var(--yumi-hot) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: translate .2s var(--ease), filter .2s;
}
.signup button:hover { translate: 0 -1px; filter: brightness(1.06); }
.signup button:active { translate: 0 1px; }
.signup button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.signup .status, .signup .note { margin: 0; font-size: 14px; }
.signup .note { color: var(--ink-3); }
.signup .status:empty, .signup[data-state]:not([data-state=""]) .note { display: none; }
.signup[data-state="sending"] button { opacity: .65; pointer-events: none; }
.signup[data-state="ok"] .pill { display: none; }
.signup[data-state="ok"] .status { color: var(--ok); font-size: 17px; font-weight: 700; }
.signup[data-state="error"] .status { color: var(--err); font-weight: 600; }

/* ── Actes 2 et 5 : scènes épinglées, menées par le défilement ──────────────────────────────────────────────── */
.scene { height: 250vh; padding-inline: 0; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; padding-inline: var(--gutter); text-align: center; }

/* ── Acte 1 bis : l'application (app.js) — la fenêtre de yumi-bot, de biais puis de face, puis un zoom par étape ── */
.app { height: 560vh; }
.app-title { position: absolute; inset: max(84px, 12vh) var(--gutter) auto; z-index: 2; font-size: clamp(34px, 5.4vw, 80px); transition: opacity .5s, translate .5s var(--ease); }
.app:not([data-step="-1"]) .app-title { opacity: 0; translate: 0 -24px; }
/* La fenêtre est dessinée à --uw × --uh px (ordinateur ou téléphone, posés par app.js) ; --fit la fait tenir dans la
   scène, --k (1 → 0 au défilement) la redresse, la caméra (--zoom, --cx, --cy) cadre une zone. Les Mi qui en sortent
   sont posés en profondeur, devant l'écran. */
.app-view { position: absolute; inset: 0; perspective: 1600px; }
.app-tilt {
  --uw: 1280px; --uh: 800px;
  position: absolute; left: 50%; top: 56%; width: var(--uw); height: var(--uh); margin: calc(var(--uh) / -2) 0 0 calc(var(--uw) / -2); transform-style: preserve-3d;
  transform: scale3d(var(--fit, .5), var(--fit, .5), var(--fit, .5)) translateY(calc(var(--k, 0) * 70px)) rotateX(calc(var(--k, 0) * 30deg)) rotateY(calc(var(--k, 0) * -16deg)) rotateZ(calc(var(--k, 0) * 7deg));
}
.app-cam { position: absolute; inset: 0; transform: scale(var(--zoom, 1)) translate(calc(var(--uw) / 2 - var(--cx, 640) * 1px), calc(var(--uh) / 2 - var(--cy, 400) * 1px)); transition: transform 1.1s var(--ease); }
.app-pop { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); font-size: calc(var(--s) * 1px); margin: -.5em 0 0 -.5em; transform: translateZ(var(--dz)); transition: opacity .6s var(--ease); }
.phone .app-pop { font-size: calc(var(--s) * .55px); }
.app-pop .av { font-size: 1em; }
.app:not([data-step="-1"]):not([data-step="4"]) .app-pop { opacity: 0; }
.app-steps { position: absolute; inset: auto var(--gutter) max(26px, env(safe-area-inset-bottom)); z-index: 2; margin: 0; padding: 0; list-style: none; display: grid; justify-items: center; pointer-events: none; }
.app-steps li {
  grid-area: 1 / 1; display: grid; justify-items: center; gap: 4px; max-width: 34em; padding: 14px 24px; border-radius: 22px;
  background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  opacity: 0; translate: 0 14px; transition: opacity .45s var(--ease), translate .45s var(--ease);
}
.app[data-step="0"] .app-steps li:nth-child(1), .app[data-step="1"] .app-steps li:nth-child(2),
.app[data-step="2"] .app-steps li:nth-child(3), .app[data-step="3"] .app-steps li:nth-child(4) { opacity: 1; translate: 0 0; }
.app-steps b { font: 800 clamp(20px, 2.2vw, 30px)/1.15 var(--sans); letter-spacing: -.02em; }
.app-steps span { font-size: clamp(14px, 1.2vw, 17px); color: var(--ink-2); }
/* Grand écran : la légende en colonne à gauche, en grand, et la caméra cadre à sa droite (app.js lit sa largeur). */
@media (min-width: 1000px) {
  .app-steps { inset: 0 auto 0 var(--gutter); width: min(30vw, 440px); align-content: center; justify-items: start; }
  .app-steps li { justify-items: start; gap: 12px; padding: 0; text-align: left; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; translate: -18px 0; }
  .app-steps b { font-size: clamp(34px, 3.6vw, 58px); line-height: 1.02; letter-spacing: -.04em; }
  .app-steps span { font-size: clamp(17px, 1.4vw, 21px); }
  .app-view { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--mx) - 220px), #000 var(--mx)); mask-image: linear-gradient(90deg, transparent calc(var(--mx) - 220px), #000 var(--mx)); transition: --mx .9s var(--ease); }
  .app:not([data-step="-1"]):not([data-step="4"]) .app-view { --mx: var(--area-x, 0px); }
}

/* L'interface elle-même, aux couleurs du thème sombre de yumi-bot (px de dessin : la caméra met à l'échelle). */
.ui {
  --ui-bg: #1e1e20; --ui-side: #161618; --ui-panel: #1b1b1d; --ui-edge: #2b2b2f; --ui-field: #242427; --ui-mute: #8e8e93; --ui-text: #f2f2f4; --ui-green: #30d158;
  --ui-pick: color-mix(in oklab, var(--yumi) 22%, var(--ui-side));
  position: relative; width: var(--uw); height: var(--uh); display: grid; grid-template-columns: 236px 1fr; overflow: hidden; border-radius: 20px;
  background: var(--ui-bg); color: var(--ui-text); font: 400 14px/1.45 var(--sans); text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 70px 150px -40px rgba(0, 0, 0, .85), 0 0 140px -30px color-mix(in oklab, var(--sky-2) 60%, transparent);
}
.ui [hidden] { display: none !important; }
.ui p { margin: 0; }
.ui svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-side { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; background: var(--ui-side); border-right: 1px solid var(--ui-edge); }
.ui-seg { display: flex; gap: 4px; width: max-content; margin-left: 14px; padding: 4px; border-radius: 12px; background: var(--ui-field); }
.ui-seg i { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 8px; color: var(--ui-mute); }
.ui-seg i.on { background: #37373b; color: var(--ui-text); }
.ui-list { list-style: none; margin: 0; padding: 0; }
.ui-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 13px; height: 60px; padding: 0 14px 0 16px; transition: background-color .3s; }
.ui-row.on { background: var(--ui-pick); }
.ui-row .ui-pic > .av { font-size: 42px; }
.ui-txt { display: grid; min-width: 0; }
.ui-txt b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-row.on b { color: var(--yumi); }
.ui-sub { font-size: 12.5px; color: var(--yumi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-sub.last { color: #c7c7cc; }
.ui-meta { display: grid; justify-items: end; gap: 4px; font-size: 11.5px; color: var(--ui-mute); font-variant-numeric: tabular-nums; }
.ui-badge { display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: var(--ui-green); color: #062611; font: 800 11.5px/1 var(--sans); font-style: normal; }
.ui-row:has(.ui-badge) time { color: var(--ui-green); }
.ui-row.on .ui-badge { display: none; }
.ui-row.on time { color: var(--ui-mute); }
.ui-stack { position: relative; display: block; width: 44px; height: 44px; }
.ui-stack .av { position: absolute; font-size: 24px; }
.ui-stack .av:nth-child(1) { left: 10px; top: -2px; }
.ui-stack .av:nth-child(2) { left: -1px; bottom: -1px; }
.ui-stack .av:nth-child(3) { right: -1px; bottom: -1px; }
.ui-main { display: flex; flex-direction: column; min-width: 0; }
.ui-top { flex: none; display: flex; align-items: center; gap: 18px; height: 56px; padding: 0 18px; border-bottom: 1px solid var(--ui-edge); color: #c7c7cc; }
.ui-search { flex: 0 1 460px; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--ui-field); border: 1px solid #333338; color: var(--ui-mute); }
.ui-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px 46px; }
.ui-chat { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; padding: 24px 30px 22px; }   /* le fil est collé à la zone de saisie */
.ui-day { text-align: center; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-mute); }
.ui-thread { display: grid; gap: 14px; width: min(100%, 600px); margin: 20px auto 18px; }
.ui-msg { font-size: 15px; line-height: 1.5; opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.ui-msg.you { justify-self: end; max-width: 82%; padding: 10px 16px; border-radius: 20px; background: color-mix(in oklab, var(--yumi) 24%, var(--ui-bg)); }
.ui-msg.show, .ui-say.show { opacity: 1; translate: 0 0; }
.ui-typing { font-size: 14px; color: var(--ui-mute); opacity: 0; transition: opacity .3s; }
.ui-typing.show { opacity: 1; }
.ui-say { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; opacity: 0; translate: 0 8px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.ui-say .av { font-size: 38px; }
.ui-say b { display: block; font-size: 14px; }
.ui-say p { font-size: 15px; }
.ui-foot { width: 100%; }
/* La question s'ouvre dans le flux (0fr → 1fr) : elle pousse le fil vers le haut, comme dans yumi-bot. */
.ui-ask { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .3s; }
.ui-ask.show { grid-template-rows: 1fr; opacity: 1; }
.ui-ask.now { transition: none; }
.ui-ask-in { min-height: 0; overflow: hidden; display: grid; gap: 10px; margin-bottom: 10px; padding: 14px 18px; border-radius: 16px; background: #26262a; border: 1px solid #36363b; }
.ui-ask:not(.show) .ui-ask-in { padding-block: 0; border-width: 0; margin-bottom: 0; }
.ui-ask-h { display: flex; align-items: center; gap: 8px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-mute); }
.ui-ask-h .av { font-size: 26px; }
.ui-ask-h svg { width: 16px; height: 16px; color: var(--yumi); }
.ui-ask-q { font-size: 15.5px; font-weight: 600; }
.ui-btns { display: flex; justify-content: flex-end; gap: 8px; }
.ui-yes, .ui-no { display: grid; place-items: center; height: 36px; padding: 0 18px; border-radius: 10px; font-weight: 700; transition: scale .15s, filter .15s; }
.ui-yes { background: var(--yumi); color: #1b1405; }
.ui-no { border: 1px solid #3a3a3f; }
.ui-yes.pressed { scale: .92; filter: brightness(1.15); }
.ui-compose { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px; border-radius: 16px; border: 1px solid #333338; background: #1a1a1c; color: var(--ui-mute); }
.ui-field { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; }
.ui-typed { color: var(--ui-text); }
.ui-typed.caret::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -.2em; background: var(--yumi); }
.ui-event { justify-self: center; display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--ok); background: color-mix(in oklab, var(--ok) 16%, transparent); transition: opacity .35s, translate .35s var(--ease); }
@starting-style { .ui-event { opacity: 0; translate: 0 8px; } }
.ui-event svg { width: 16px; height: 16px; stroke-width: 2.6; }
.ui-panel { padding: 22px 18px; background: var(--ui-panel); border-left: 1px solid var(--ui-edge); }
.ui-pane { display: grid; align-content: start; gap: 14px; }
.ui-who { display: flex; align-items: center; gap: 16px; }
.ui-who > .av { font-size: 58px; }
.ui-who b { font-size: 16px; }
.ui-who .ui-sub { color: var(--ui-mute); }
.ui-who .ui-stack { width: 58px; height: 58px; }
.ui-who .ui-stack .av { font-size: 31px; }
.ui-who .ui-stack .av:nth-child(1) { left: 13px; }
.ui-desk { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; }
.ui-screen { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #2a2f3b; border: 1px solid #353b48; overflow: hidden; }
.ui-screen i { position: absolute; border-radius: 4px; background: #1f232c repeating-linear-gradient(180deg, transparent 0 8px, rgba(255, 255, 255, .16) 8px 10px, transparent 10px 14px) 10px 12px / 50% 100% no-repeat; }
.ui-screen .w1 { left: 7%; top: 10%; width: 54%; height: 62%; }
.ui-screen .w2 { left: 46%; top: 36%; width: 47%; height: 46%; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.ui-screen .pips { left: 35%; bottom: 6%; width: 30%; height: 7px; border-radius: 0; background: radial-gradient(circle, var(--yumi) 3px, transparent 3.5px) 0 0 / 20% 100%; }
.ui-h { display: flex; gap: 8px; margin-top: 6px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ui-mute); }
.ui-h em { font-style: normal; color: #c7c7cc; }
.ui-pend { display: grid; gap: 12px; }
.ui-prow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 14px; align-items: center; gap: 8px; font-size: 13.5px; }
.ui-prow span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-prow .av { font-size: 26px; }
.ui-prow time { color: var(--ui-mute); font-size: 12px; }
.ui-prow svg { width: 14px; height: 14px; color: var(--ui-mute); }
.ui-member { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--ui-edge); font-size: 14.5px; }
.ui-member .av { font-size: 38px; }
.ui-rail { display: grid; align-content: start; justify-items: center; gap: 20px; padding-top: 24px; color: #c7c7cc; }
.ui-shield { position: relative; display: grid; }
.ui-shield em { position: absolute; top: -8px; right: -9px; display: grid; place-items: center; min-width: 17px; height: 17px; border-radius: 9px; background: var(--yumi); color: #1b1405; font: 800 10px/1 var(--sans); font-style: normal; }
.ui-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .3s; }
.ui-cursor.show { opacity: 1; }
.ui-cursor > svg { width: 28px; height: 28px; margin: -3px 0 0 -6px; fill: #fff; stroke: #111; stroke-width: 1.3; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.ui-cursor .ripple { position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--yumi); opacity: 0; }
.ui-cursor.click .ripple { animation: ripple .5s ease-out; }
/* Le téléphone : un panneau à la fois — la liste, puis la conversation qui glisse par-dessus ; le doigt remplace le pointeur. */
.phone .ui { grid-template-columns: 100%; border-radius: 34px; }
.phone .ui-side, .phone .ui-main { grid-area: 1 / 1; min-width: 0; transition: translate .55s var(--ease), opacity .55s; }
.phone .ui-main { background: var(--ui-bg); }
.phone .ui[data-pane="list"] .ui-main { translate: 100% 0; }
.phone .ui[data-pane="chat"] .ui-side { translate: -25% 0; opacity: 0; }
.phone .ui-side { border-right: 0; padding-top: 18px; }
.phone .ui-body { grid-template-columns: 100%; }
.phone .ui-panel, .phone .ui-rail { display: none; }
.phone .ui-top { gap: 14px; }
.phone .ui-chat { padding: 18px 16px 18px; }
.phone .ui-cursor > svg { display: none; }
.phone .ui-cursor::before { content: ''; position: absolute; left: -18px; top: -18px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .3); border: 2px solid rgba(255, 255, 255, .8); }
.cut-a, .cut-b { grid-area: 1 / 1; display: grid; justify-items: center; gap: 16px; }
.cut-b { visibility: hidden; }
.cut[data-phase="b"] .cut-a { visibility: hidden; }
.cut[data-phase="b"] .cut-b { visibility: visible; }
.cut-b > p { position: relative; z-index: 1; }
.say { margin: 0; font: 700 clamp(24px, 4.6vw, 68px)/1.08 var(--sans); letter-spacing: -.035em; }
.dim { color: var(--ink-3); }
.cut-a .say { opacity: var(--a, 0); translate: 0 calc((1 - var(--a, 0)) * 22px); }
.lonely { display: inline-flex; gap: 6px; margin-bottom: 18px; padding: 16px 20px; border-radius: 22px 22px 22px 6px; background: rgba(var(--wash), .07); border: 1px solid var(--line); }
.lonely span { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); animation: wait 1.3s ease-in-out infinite; }
.lonely span:nth-child(2) { animation-delay: .16s; } .lonely span:nth-child(3) { animation-delay: .32s; }
@keyframes wait { 0%, 60%, 100% { opacity: .3; translate: 0 0; } 30% { opacity: 1; translate: 0 -4px; } }
.huge { margin: 0; font: 800 clamp(58px, 11.2vw, 178px)/.92 var(--sans); letter-spacing: -.055em; }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst .fly { position: absolute; left: 50%; top: 50%; font-size: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); scale: .2; opacity: 0; }
.cut[data-phase="b"] .burst .fly { translate: var(--tx) var(--ty); scale: 1; opacity: 1; transition: translate 1.1s var(--ease) calc(var(--i) * 40ms), scale 1.1s var(--ease) calc(var(--i) * 40ms), opacity .3s calc(var(--i) * 40ms); }
.burst .av { font-size: 1em; }
.manifesto { height: 300vh; }
.manifesto .stage { align-content: center; gap: .06em; font: 800 clamp(38px, 7vw, 110px)/1.02 var(--sans); letter-spacing: -.05em; }
.manifesto .line { margin: 0; opacity: calc(.13 + .87 * var(--a, 0)); filter: blur(calc((1 - var(--a, 0)) * 5px)); translate: 0 calc((1 - var(--a, 0)) * 16px); }
.manifesto .last { margin-top: .22em; background: var(--mi-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Acte 3 : démonstration (une phrase, six Mi en parallèle) ───────────────────────────────────────────────── */
.demo { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; gap: clamp(32px, 5vw, 64px); padding-block: 14vh; }
.board { position: relative; display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 560px); justify-content: center; align-items: center; gap: clamp(28px, 6vw, 110px); }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wires path { fill: none; stroke: color-mix(in oklab, var(--yumi) 38%, transparent); stroke-width: 1.5; stroke-linecap: round; }
.wires circle { fill: var(--yumi); filter: drop-shadow(0 0 6px var(--yumi)); }
.ask { position: relative; display: grid; gap: 12px; }
.msg { margin: 0; padding: 14px 18px; border-radius: 22px; font: 500 18px/1.4 var(--sans); opacity: 0; translate: 0 10px; transition: opacity .35s var(--ease), translate .35s var(--ease); }
.msg.show { opacity: 1; translate: 0 0; }
.msg.you { justify-self: end; min-height: 54px; background: rgba(var(--wash), .1); border: 1px solid var(--line); border-bottom-right-radius: 6px; opacity: 1; translate: none; }
.msg.you .typed::after { content: ''; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.18em; background: var(--yumi); }
.msg.you.sent .typed::after { display: none; }
.lead { display: flex; align-items: flex-start; gap: 12px; }
.lead-av .av { font-size: 60px; }
.replies { display: grid; justify-items: start; gap: 8px; }
.msg.reply { background: linear-gradient(180deg, color-mix(in oklab, var(--yumi) 17%, transparent), color-mix(in oklab, var(--yumi) 6%, transparent)); border: 1px solid color-mix(in oklab, var(--yumi) 32%, transparent); border-top-left-radius: 6px; }
.lanes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* Une tâche = une ligne. Pendant le travail, un serpent de lumière fait le tour de la carte à mesure qu'elle avance
   (--p de 0 à 1 : il est peint dans la bordure, sous un fond plein), avec un halo derrière ; fini : bordure verte.
   En attente, seul son CONTENU est atténué : une opacité sur la carte elle-même en ferait un contexte d'empilement le
   temps du fondu, et le halo (z-index -1) passerait alors PAR-DESSUS son fond — le triangle en diagonale du démarrage. */
.lane {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 15px 11px 11px;
  border-radius: 20px; border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(var(--line), var(--line)) border-box;
}
.lane > * { transition: opacity .35s; }
.lane[data-st="run"] {
  background: linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from -90deg, var(--sky-4) 0turn, var(--sky-2) calc(var(--p) * .4turn), #ff5fb0 calc(var(--p) * .75turn), var(--yumi) calc(var(--p) * 1turn), var(--line) 0) border-box;
}
.lane[data-st="done"] { background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(color-mix(in oklab, var(--ok) 70%, transparent), color-mix(in oklab, var(--ok) 70%, transparent)) border-box; }
.lane::after { content: ''; position: absolute; inset: -10px; z-index: -1; border-radius: 26px; background: var(--snake); filter: blur(18px); opacity: 0; transition: opacity .5s; mask: conic-gradient(from -90deg, #000 calc(var(--p) * 1turn), transparent 0); }
.lane[data-st="run"]::after { opacity: .95; }
.lane .av { font-size: 48px; flex: none; }
.lane b { font-size: 16px; font-weight: 700; white-space: nowrap; }
.lane .st { flex: 1; min-width: 0; font-size: 14px; color: var(--ink-3); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lane .ok { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; scale: .4; transition: opacity .3s, scale .3s var(--ease); }
.lane[data-st="idle"] > :not(.ok) { opacity: .5; }
.lane[data-st="done"] .ok { opacity: 1; scale: 1; }
.lane[data-st="done"] .st { color: var(--ok); }
@media (max-width: 860px) {
  .board { grid-template-columns: minmax(0, 540px); }
  .msg { font-size: 16px; }
}

/* ── Acte 3 bis : 24 h/24 — leur navigateur, leurs accès ─────────────────────────────────────────────────────── */
.h24 { min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 560px); justify-content: center; align-items: center; gap: clamp(32px, 6vw, 96px); padding-block: 14vh; content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.h24-copy { display: grid; gap: 18px; justify-items: start; }
.h24-copy .title { font-size: clamp(36px, 5.2vw, 76px); text-align: left; }
.h24-copy .lede { text-align: left; }
.checks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.check { display: flex; align-items: baseline; gap: 12px; font-size: 17px; opacity: .2; transform: translateX(-10px) scale(.96); transform-origin: 0 50%;
  transition: opacity .3s, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * var(--tac)); }
.check svg { width: 22px; height: 22px; flex: none; align-self: center; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke: color-mix(in oklab, var(--ok) 40%, transparent); fill: transparent; transition: fill .3s; transition-delay: calc(var(--i) * var(--tac)); }
.check path { stroke: var(--ok); stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s var(--ease); transition-delay: calc(var(--i) * var(--tac)); }
.check b { font-weight: 700; white-space: nowrap; }
.check span { color: var(--ink-2); font-size: 15px; }
.checks.go .check { opacity: 1; transform: none; }
.checks.go .check path { stroke-dashoffset: 0; }
.checks.go .check circle { fill: color-mix(in oklab, var(--ok) 16%, transparent); }
.limit { margin: 6px 0 0; padding: 14px 16px; border-radius: 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2); background: rgba(var(--wash), .05); border: 1px solid var(--line); }
@media (max-width: 960px) {
  .h24 { grid-template-columns: minmax(0, 600px); }
  .h24-copy { justify-items: center; }
  .h24-copy .title, .h24-copy .lede { text-align: center; }
}

/* Le navigateur du Mi (web.js) : une fenêtre, son adresse, sa page, son curseur — il clique, réserve, télécharge. */
.web { position: relative; aspect-ratio: 4 / 3; width: 100%; }
.win { position: absolute; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }
.win.main { inset: 8% 0 0 6%; z-index: 2; }
.win.back { inset: 0 18% 26% 0; z-index: 1; opacity: .5; filter: blur(.6px); }
.win-bar { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.win-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--wash), .18); }
.url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 8px; padding: 0 10px; border-radius: 8px; background: rgba(0, 0, 0, .28); font: 500 12px/1 var(--sans); color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.url svg { width: 11px; height: 11px; flex: none; fill: none; stroke: var(--ok); stroke-width: 2.4; }
.clock { display: flex; align-items: center; gap: 5px; font: 700 12px/1 var(--sans); color: var(--yumi-text); font-variant-numeric: tabular-nums; }
.clock svg { width: 12px; height: 12px; fill: var(--yumi-text); }
.win-body { position: relative; flex: 1; display: grid; align-content: start; gap: 10px; padding: 22px; }
.page-title { margin: 0 0 6px; font: 800 20px/1.2 var(--sans); letter-spacing: -.02em; }
.row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(var(--wash), .05); font-size: 14px; }
.row .grow { flex: 1; }
.row .pill-mini { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--ink-3); background: rgba(var(--wash), .07); }
.row .btn { padding: 6px 12px; border-radius: 8px; font-weight: 700; font-size: 13px; color: #1b1405; background: var(--mi-grad); transition: scale .15s, filter .15s; }
.row .btn.pressed { scale: .92; filter: brightness(1.2); }
.skel { height: 40px; border-radius: 10px; background: linear-gradient(90deg, rgba(var(--wash), .04), rgba(var(--wash), .1), rgba(var(--wash), .04)) 0 0 / 200% 100%; animation: skel 1s linear infinite; }
@keyframes skel { to { background-position: -200% 0; } }
.toast { position: absolute; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; color: #0c2a18; background: var(--ok); translate: -50% 12px; opacity: 0; transition: opacity .3s, translate .3s var(--ease); white-space: nowrap; }
.toast.show { opacity: 1; translate: -50% 0; }
.toast svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; will-change: translate; }
.cursor > svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.cursor .who { position: absolute; left: 16px; top: 16px; }
.cursor .who .av { font-size: 18px; }
.cursor .ripple { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--yumi); opacity: 0; }
.cursor.click .ripple { animation: ripple .5s ease-out; }
@keyframes ripple { from { scale: .3; opacity: 1; } to { scale: 1.6; opacity: 0; } }

/* ── Acte 4 : capacités ──────────────────────────────────────────────────────────────────────────────────────── */
.powers { display: grid; justify-items: center; gap: 22px; padding-block: 16vh 12vh; content-visibility: auto; contain-intrinsic-size: auto 1200px; }
/* Cartes bornées (280 à 400 px) qui se rangent en ajoutant des colonnes ; une rangée incomplète reste centrée. */
.cards { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; gap: 14px; }
@media (max-width: 700px) { .cards { grid-template-columns: minmax(0, 460px); } .cards .card:nth-child(n+4) { display: none; } }   /* téléphone : 3 Mi, une colonne */
.card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; padding: 20px; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); transition: border-color .3s; }
.card:hover { border-color: color-mix(in oklab, var(--yumi) 36%, transparent); }
.card .av { grid-row: span 2; font-size: 56px; }
.card h3 { margin: 0; font: 700 17px/1.2 var(--sans); letter-spacing: -.01em; align-self: end; }
.card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); align-self: start; }

/* ── Acte 6 : attrape ton Mi — le tapis roulant des Mi (belt.js), comme au bar à sushis ───────────────────────── */
.soon { min-height: 100vh; min-height: 100svh; display: grid; align-content: end; gap: 5vh; padding-block: 14vh 0; text-align: center; overflow: clip; content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.soon-copy { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; }
.soon .title { font-size: clamp(40px, 6.4vw, 96px); margin-top: 14px; }
.grab-row { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-3); }
.soon.kept .grab-row { display: none; }   /* son Mi est réservé : le tapis n'est plus qu'un décor */
.soon.kept .plate { cursor: default; }
.prize { display: flex; align-items: center; gap: 16px; min-height: 108px; }
.prize .slot { display: grid; place-items: center; width: 100px; height: 100px; border-radius: 50%; border: 2px dashed rgba(var(--wash), .22); transition: border-color .4s; }
.prize .won { margin: 0; max-width: 0; overflow: hidden; white-space: nowrap; font: 700 clamp(18px, 1.8vw, 24px)/1.2 var(--sans); color: var(--yumi-text); transition: max-width .6s var(--ease), margin-left .6s var(--ease); }
.prize.won .slot { border-color: transparent; }
.prize.won .won { max-width: 24em; margin-left: 46px; }   /* le Mi déborde de sa case (oreilles, grosse tête) : il ne touche jamais le texte */
.prize .slot .av { font-size: 100px; }
/* Le tapis, bord à bord, qui s'efface aux deux bouts (il vient de nulle part, il n'a pas de fin) : un dessus à lattes
   qui avancent avec les assiettes (--off, posé par belt.js), un chant avant. Tout se mesure en tailles de Mi (em) ; sa
   hauteur laisse de la place au-dessus des Mi : son fondu (mask) efface tout ce qui sort de sa boîte. */
.belt {
  position: relative; z-index: 1; height: 2.4em; margin-inline: calc(var(--gutter) * -1); font-size: clamp(56px, 6vw, 88px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.belt::before {
  content: ''; position: absolute; inset: auto 0 .3em; height: .7em; border-top: 1px solid rgba(var(--wash), .24);
  background: repeating-linear-gradient(90deg, rgba(var(--wash), .09) 0 1px, transparent 1px .5em) calc(var(--off, 0) * -1px) 0,
    linear-gradient(180deg, rgba(var(--wash), .1), rgba(var(--wash), .03));
}
.belt::after { content: ''; position: absolute; inset: auto 0 0; height: .3em; background: linear-gradient(180deg, rgba(var(--wash), .14), rgba(4, 3, 15, .6) 30%, rgba(4, 3, 15, .85)); }
/* Une assiette : le Mi posé dans son assiette en céramique, liseré de couleur ; de temps en temps, une dorée. */
.plate { position: absolute; left: 0; bottom: .7em; width: 1em; height: 1em; cursor: pointer; }
.plate::before {
  content: ''; position: absolute; z-index: -1; left: 50%; bottom: -.28em; width: 1.5em; height: .46em; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, #f1f0f8 58%, var(--rim) 60% 78%, #dddbeb 80%); box-shadow: 0 .08em .14em rgba(0, 0, 0, .45);
}
.plate:nth-child(3n+1) { --rim: var(--sky-3); }
.plate:nth-child(3n+2) { --rim: var(--sky-2); }
.plate:nth-child(3n) { --rim: var(--sky-4); }
.plate.gold { --rim: var(--yumi); }
.plate.gold::before { box-shadow: 0 0 .35em color-mix(in oklab, var(--yumi) 55%, transparent), 0 .08em .14em rgba(0, 0, 0, .45); }
.plate .av { font-size: 1em; transition: translate .25s var(--ease), scale .25s var(--ease); }
@media (hover: hover) { .soon:not(.kept) .plate:hover .av { translate: 0 -.18em; scale: 1.3; } }   /* il grossit : on voit qu'on peut l'attraper */
.foot { padding: 36px var(--gutter) max(36px, env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: var(--ink-3); }
.noscript { position: fixed; inset: auto 0 24px; text-align: center; color: var(--ink-2); }

/* Le film : au format smartphone, joué en direct dans la page ; un clic dehors le ferme. */
dialog.film { height: min(92vh, calc(94vw * 16 / 9)); width: auto; aspect-ratio: 9 / 16; max-width: none; max-height: none; padding: 0; border: 0; border-radius: 22px; background: #000; overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, .7); }
dialog.film::backdrop { background: rgba(3, 2, 12, .86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.film iframe { display: block; width: 100%; height: 100%; border: 0; }
dialog.film .close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--ink); }
dialog.film .close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* Mouvement réduit : tout reste lisible, rien ne bouge seul. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .av, .av *, .lonely span, .skel, .mark.idle { animation: none !important; transition: none !important; }
  .reveal, .crowd .float, .msg { opacity: 1; translate: none; scale: 1; transition: none; }
  .manifesto .line { filter: none; }
  .checks .check { opacity: 1; } .checks .check path { stroke-dashoffset: 0; }
}