/* Otakube · direction « Néon Sakura » (13 octobre 2026).
   Une seule couleur d'accent, le rose sakura, en dégradé sur la fin des titres ;
   fond nuit prune, verre, halos et rubans qui relient les sections. */
:root{
  --bg:#0A0710; --bg-2:#120C19; --bg-3:#171020;
  --ink:#F7F2F8; --ink-2:#DCD3E3; --mute:#B6ADC2; --dim:#8D849B;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.15);
  --glass:rgba(255,255,255,.045); --glass-2:rgba(255,255,255,.075);
  --s1:#FFD9EA; --s2:#FF8FC8; --s3:#FF4C9E; --mint:#3DFFA8;
  --grad:linear-gradient(95deg,var(--s1) 0%,var(--s2) 48%,var(--s3) 100%);
  --grad-btn:linear-gradient(97deg,#FFC2DE 0%,#FF86C3 52%,#FF4C9E 100%);
  --font:'Satoshi','DM Sans',system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --sheet:44px;
  --gutter:clamp(16px,5vw,64px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
html.motion-ready{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--bg)}
main{overflow-x:clip}
h1,h2,h3,p,figure{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.svg-library{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1em;height:1em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:700;transition:top .2s}
.skip-link:focus{top:16px}
:focus-visible{outline:2px solid var(--s2);outline-offset:4px;border-radius:10px}
h1,h2,h3{hyphens:auto;overflow-wrap:break-word}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;padding-right:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--s3);box-shadow:0 0 12px var(--s3);flex-shrink:0}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px var(--mint);flex-shrink:0;animation:live 2.4s ease-in-out infinite}
.grain{position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#petal-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:30;pointer-events:none}

/* ---------- source des visuels produit (fenêtres CSS, pixels intacts). Règle générique placée AVANT les sections : leurs largeurs propres doivent l’emporter ---------- */
.source-window{position:relative;overflow:hidden;width:100%;aspect-ratio:var(--crop-ratio);isolation:isolate}
.source-window>img{position:absolute;width:var(--image-width);max-width:none;height:auto;left:var(--image-left);top:var(--image-top)}

/* ---------- boutons ---------- */
.pill{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:6px 6px 6px 22px;border-radius:999px;font-weight:700;font-size:15px;line-height:1.1;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,border-color .3s}
.pill .icon{width:17px;height:17px}
.pill-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:transform .35s var(--ease)}
.pill-dot .icon{width:16px;height:16px;stroke-width:2.3}
.pill-main{color:#2A0619;background:var(--grad-btn);box-shadow:0 18px 44px -14px rgba(255,76,158,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.pill-main .pill-dot{background:rgba(42,6,25,.16)}
.pill-ghost{color:var(--ink);background:rgba(30,22,38,.62);border:1px solid var(--line-2)}
.pill-ghost .pill-dot{background:rgba(255,255,255,.08)}
@media (hover:hover){
  .pill-main:hover{transform:translateY(-2px);box-shadow:0 26px 56px -14px rgba(255,76,158,.85),inset 0 1px 0 rgba(255,255,255,.55)}
  .pill-ghost:hover{transform:translateY(-2px);border-color:rgba(255,143,200,.5);background:rgba(255,143,200,.08)}
  .pill:hover .pill-dot{transform:translateX(3px)}
}
.round-button{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.05);cursor:pointer;transition:border-color .3s,background .3s}
.round-button .icon{width:16px;height:16px}
.round-button:hover{border-color:rgba(255,143,200,.55);background:rgba(255,143,200,.1)}
.motion-toggle:disabled{opacity:.55;cursor:default}

/* ---------- en-tête ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:22px;padding:14px var(--gutter);border-bottom:1px solid transparent;transition:background .4s,border-color .4s,backdrop-filter .4s}
.site-header.is-scrolled{background:rgba(10,7,16,.96);border-bottom-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:-.035em}
.brand img{width:34px;height:34px;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 8px 20px -8px rgba(255,76,158,.6)}
.main-navigation{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;color:var(--mute)}
.main-navigation>a:not(.nav-cta){transition:color .25s;padding:6px 0}
.main-navigation>a:not(.nav-cta):hover{color:var(--ink)}
.nav-cta{display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 16px;border-radius:999px;font-weight:700;font-size:13.5px;color:#2A0619;background:var(--grad-btn);box-shadow:0 12px 30px -12px rgba(255,76,158,.65),inset 0 1px 0 rgba(255,255,255,.5);transition:transform .3s var(--ease)}
.nav-cta .pill-dot{width:30px;height:30px;background:rgba(42,6,25,.16)}
.nav-cta .pill-dot .icon{width:13px;height:13px}
.nav-cta:hover{transform:translateY(-1px)}
.header-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.menu-toggle{display:none}
.language-picker{position:relative;display:flex;align-items:center;justify-content:center;gap:7px;min-height:42px;min-width:84px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.05);color:var(--ink);flex-shrink:0;transition:border-color .3s,background .3s}
.language-flag{display:inline-block;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:17px;line-height:1}
.language-picker [data-current-language]{font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.language-picker>.language-chevron{width:12px;height:12px}
.language-picker select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font:500 16px var(--font);color-scheme:dark}
.language-picker option{background:#1A1222;color:#fff}
.language-picker:hover{border-color:rgba(255,143,200,.55);background:rgba(255,143,200,.1)}
.language-picker:focus-within{outline:2px solid var(--s2);outline-offset:4px}

/* ---------- haut de page ---------- */
.hero{position:relative;min-height:100svh;padding:clamp(112px,15vh,150px) var(--gutter) 0;text-align:center;isolation:isolate;overflow:hidden;--hero-progress:0;--hero-h:0px}
/* parallaxe : le décor recule (lent), le titre glisse derrière les téléphones, l'éventail s'ouvre et monte (rapide) */
.hero-landscape{position:absolute;inset:-4% -3% 0;z-index:-3;transform:translateY(calc(var(--hero-progress) * var(--hero-h) * .42)) scale(calc(1.06 + var(--hero-progress) * .16));will-change:transform}
.hero-landscape img{width:100%;height:100%;object-fit:cover;object-position:center 55%;opacity:.6;animation:landscape-in 2.6s var(--ease) both}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(60% 55% at 50% 76%,rgba(255,76,158,.30),transparent 70%),
  linear-gradient(180deg,rgba(10,7,16,.62) 0%,rgba(10,7,16,.22) 38%,rgba(10,7,16,.5) 70%,var(--bg) 97%)}
.hero-copy{position:relative;z-index:3;max-width:900px;margin:0 auto;transform:translateY(calc(var(--hero-progress) * var(--hero-h) * .2)) scale(calc(1 - var(--hero-progress) * .06));opacity:calc(1 - var(--hero-progress) * 2.4)}
.badge{display:inline-flex;align-items:center;gap:10px;max-width:100%;padding:6px 16px 6px 6px;border-radius:999px;border:1px solid var(--line-2);background:rgba(30,22,38,.6);font-size:13px;color:var(--mute);animation:rise-in 1s .1s var(--ease) both}
.badge img{width:26px;height:26px;border-radius:50%}
.badge strong{color:var(--ink);font-weight:700}
.badge-extra{display:inline-flex;align-items:center;gap:8px}
.badge-sep{opacity:.6}
.hero h1{margin:26px auto 0;max-width:13ch;font-weight:900;font-size:clamp(44px,7.4vw,108px);line-height:.98;letter-spacing:-.045em}
.line-mask{display:block;overflow:hidden;padding:.04em .1em .12em;margin-bottom:-.07em}
.line-mask>*{display:inline-block;animation:line-up 1.25s var(--ease) both}
.line-mask+.line-mask>*{animation-delay:.14s}
.hero-description{max-width:560px;margin:24px auto 0;color:var(--mute);font-size:clamp(16px,1.25vw,18.5px);line-height:1.62;animation:rise-in 1s .45s var(--ease) both}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px;animation:rise-in 1s .6s var(--ease) both}
.hero-visual{position:relative;max-width:1200px;height:clamp(400px,50vw,660px);margin:clamp(40px,6vh,72px) auto 0;perspective:1600px;--pointer-x:0;--pointer-y:0;z-index:4;transform:translateY(calc(var(--hero-progress) * var(--hero-h) * -.08))}
.hero-halo{position:absolute;left:50%;top:40%;width:min(920px,92vw);aspect-ratio:1.8;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,76,158,.44),rgba(255,143,200,.12) 55%,transparent);animation:breathe 7s ease-in-out infinite alternate;pointer-events:none}
.hero-fan{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--pointer-y)*-6deg)) rotateY(calc(var(--pointer-x)*8deg))}
.hero-phone{position:absolute;left:50%;top:0;width:clamp(150px,17vw,252px)}
.hero-phone-center{z-index:3;transform:translate(-50%,0) translateZ(60px);translate:0 calc(var(--hero-progress) * -12%);scale:calc(1 + var(--hero-progress) * .08);animation:phone-center 1.6s .3s var(--ease) both}
.hero-phone-left{z-index:2;transform:translate(-128%,9%) rotate(-11deg) translateZ(-40px);translate:calc(var(--hero-progress) * -14%) 0;rotate:calc(var(--hero-progress) * -9deg);animation:phone-left 1.7s .45s var(--ease) both}
.hero-phone-right{z-index:2;transform:translate(28%,9%) rotate(11deg) translateZ(-40px);translate:calc(var(--hero-progress) * 14%) 0;rotate:calc(var(--hero-progress) * 9deg);animation:phone-right 1.7s .55s var(--ease) both}
.hero-phone-left .phone,.hero-phone-right .phone{filter:brightness(.88)}
.hero-floor{position:absolute;left:50%;bottom:-6%;width:70%;height:18%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,76,158,.35),transparent);pointer-events:none}

/* ---------- téléphone réaliste : cadre titane, verre noir, Dynamic Island (les captures ne sont pas retouchées) ---------- */
.phone{--ti-1:#ECEAE7;--ti-2:#ABA8A4;--ti-3:#72706C;--ti-4:#4B4947;--ti-5:#2F2E2D;position:relative;width:100%;aspect-ratio:767/1599;container-type:inline-size}
.phone-keys{position:absolute;inset:0;pointer-events:none}
.phone-keys i{position:absolute;width:1.6cqw;border-radius:.8cqw;background:linear-gradient(90deg,var(--ti-4),var(--ti-2) 45%,var(--ti-3));box-shadow:inset 0 .4cqw .3cqw rgba(255,255,255,.25),inset 0 -.4cqw .3cqw rgba(0,0,0,.35)}
.phone-keys i:nth-child(1){left:-.8cqw;top:17.5%;height:4.6%}
.phone-keys i:nth-child(2){left:-.8cqw;top:25.5%;height:8.6%}
.phone-keys i:nth-child(3){left:-.8cqw;top:36%;height:8.6%}
.phone-keys i:nth-child(4){right:-.8cqw;top:27.5%;height:13.5%}
.phone-face{position:absolute;inset:0;border-radius:15.5cqw;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 6%,transparent 94%,rgba(0,0,0,.25)),conic-gradient(from 225deg,var(--ti-1),var(--ti-2) 9%,var(--ti-3) 18%,var(--ti-2) 30%,var(--ti-3) 40%,var(--ti-1) 50%,var(--ti-2) 59%,var(--ti-3) 68%,var(--ti-2) 80%,var(--ti-3) 90%,var(--ti-1));box-shadow:inset 0 0 0 .22cqw rgba(255,255,255,.35),inset 0 0 0 .5cqw rgba(0,0,0,.18),0 0 0 .18cqw rgba(0,0,0,.55),var(--phone-shadow,0 1.5cqw 3cqw rgba(0,0,0,.45),0 12cqw 26cqw -6cqw rgba(0,0,0,.85),0 0 22cqw -4cqw rgba(255,76,158,.28))}
.phone-face::before{content:"";position:absolute;inset:1.2cqw;border-radius:14.3cqw;background:#050505;box-shadow:0 0 0 .22cqw rgba(0,0,0,.7),inset 0 0 0 .2cqw #161616}
.phone-face::after{content:"";position:absolute;inset:1.2cqw;border-radius:14.3cqw;pointer-events:none;background:linear-gradient(112deg,rgba(255,255,255,.14),rgba(255,255,255,.05) 22%,transparent 36%);box-shadow:inset 0 .3cqw .4cqw rgba(255,255,255,.08)}
.phone-screen{position:absolute;inset:1.71% 3.56%;border-radius:12.8%/5.9%;inset:3.56cqw;border-radius:11.9cqw;overflow:hidden;background:#000}
.phone-screen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.phone-island{position:absolute;z-index:2;left:50%;top:2.3cqw;width:27.2cqw;height:8cqw;transform:translateX(-50%);border-radius:99px;background:#000}
.phone-island::after{content:"";position:absolute;right:9.5%;top:50%;width:2.2cqw;height:2.2cqw;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle at 40% 38%,#22304D .2cqw,#0C1220 .7cqw,#040507 1.1cqw)}
/* version 3D (chapitres épinglés) : la tranche et les boutons ont une vraie épaisseur quand le téléphone tourne */
.phone-3d{transform-style:preserve-3d;--phone-shadow:0 0 transparent}
.phone-3d .phone-keys{transform-style:preserve-3d}
.phone-3d .phone-keys i{transform:translateZ(-4.75cqw)}
.phone-3d .phone-face{will-change:filter} /* sans ce calque, Chrome dessine l'écran en 3D à basse résolution (texte flou) */
.phone-edge{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.phone-edge i{position:absolute;inset:0;border-radius:15.5cqw;background:linear-gradient(180deg,transparent 12%,rgba(0,0,0,.4) 12%,rgba(0,0,0,.4) 12.4%,transparent 12.4%,transparent 87.6%,rgba(0,0,0,.4) 87.6%,rgba(0,0,0,.4) 88%,transparent 88%) var(--c,var(--ti-3));transform:translateZ(calc(var(--k) * -9.5cqw))}
.phone-edge i:nth-child(1){--k:.12;--c:var(--ti-4)}
.phone-edge i:nth-child(2){--k:.25}
.phone-edge i:nth-child(3){--k:.38;--c:var(--ti-2)}
.phone-edge i:nth-child(4){--k:.5;--c:var(--ti-2)}
.phone-edge i:nth-child(5){--k:.62;--c:var(--ti-2)}
.phone-edge i:nth-child(6){--k:.75}
.phone-edge i:nth-child(7){--k:.88;--c:var(--ti-4)}
.phone-edge i:nth-child(8){--k:1;--c:var(--ti-5);box-shadow:0 1.5cqw 3cqw rgba(0,0,0,.45),0 12cqw 26cqw -6cqw rgba(0,0,0,.85),0 0 22cqw -4cqw rgba(255,76,158,.28)}

/* ---------- rubans de transition ---------- */
.ribbons{position:relative;z-index:6;height:clamp(150px,15vw,220px);margin-top:clamp(-150px,-9vw,-80px);pointer-events:none;overflow-x:clip}
.ribbon{position:absolute;left:-6%;right:-6%;display:flex;overflow:hidden;padding:clamp(10px,1.1vw,16px) 0}
.ribbon-front{top:26%;transform:rotate(-3deg);background:var(--grad-btn);box-shadow:0 22px 50px -18px rgba(255,76,158,.7)}
.ribbon-back{top:50%;transform:rotate(2.2deg);background:#18101F;border-block:1px solid rgba(255,255,255,.08)}
.ribbon-track{display:flex;flex-shrink:0;will-change:transform}
.ribbon-seq{display:flex;align-items:center;flex-shrink:0;gap:clamp(18px,2.4vw,34px);padding-right:clamp(18px,2.4vw,34px);white-space:nowrap}
.ribbon-front .ribbon-seq{font:italic 900 clamp(22px,3.1vw,44px)/1.08 var(--font);letter-spacing:-.03em;color:#2A0619}
.ribbon-back .ribbon-seq{font:700 clamp(18px,2.3vw,32px)/1.1 var(--font);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,217,234,.55)}
.ribbon-flower{width:.8em;height:.8em;flex-shrink:0}
.ribbon-front .ribbon-flower{fill:#2A0619}
.ribbon-back .ribbon-flower{fill:none;stroke:rgba(255,143,200,.75);stroke-width:2}
.ribbons-second{margin-top:clamp(10px,3vw,40px);margin-bottom:clamp(-150px,-9vw,-80px)}
.ribbons-second .ribbon-front{top:46%;transform:rotate(2.6deg)}
.ribbons-second .ribbon-back{top:20%;transform:rotate(-2deg)}

/* ---------- feuilles qui recouvrent la section précédente ---------- */
.sheet{position:relative;border-radius:var(--sheet) var(--sheet) 0 0;box-shadow:0 -1px 0 rgba(255,255,255,.11),0 -40px 80px -30px rgba(0,0,0,.75)}

/* ---------- l'app en pratique (chapitres épinglés) ---------- */
.journey{z-index:5;margin-top:clamp(-120px,-7vw,-70px);background:radial-gradient(70% 45% at 85% 20%,rgba(255,76,158,.12),transparent 70%),linear-gradient(180deg,#15101D,#0E0A14 75%);--journey-progress:0}
.journey-pin{max-width:1320px;margin:0 auto;padding:clamp(120px,14vh,150px) var(--gutter) 40px}
.journey-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.journey-count{font-size:13px;letter-spacing:.14em;color:var(--dim)}
.journey-count b{color:var(--ink);font-weight:700}
.journey-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:5vw;align-items:center;position:relative}
.journey-chapter{padding:56px 0}
.chapter-number{display:block;font:italic 900 clamp(96px,11vw,170px)/.8 var(--font);letter-spacing:-.06em;background:linear-gradient(180deg,rgba(255,217,234,.95),rgba(255,76,158,.12));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em;width:max-content}
.chapter-label{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.journey-chapter h2,.account-copy h2,.identity-intro h2,.release-copy h2,.faq-intro h2,.launch-content h2{font-weight:900;letter-spacing:-.045em;line-height:1}
.journey-chapter h2{font-size:clamp(38px,4.6vw,70px);margin-top:16px}
.journey-chapter p{color:var(--mute);font-size:17px;line-height:1.65;max-width:460px;margin-top:20px}
.feature-line{display:inline-flex;align-items:center;gap:10px;margin-top:24px;padding:11px 16px;border-radius:14px;border:1px solid var(--line);background:var(--glass);font-size:14px;line-height:1.4;color:var(--ink-2)}
.journey-art{position:relative;display:grid;place-items:center;perspective:1400px;min-height:520px}
.journey-glow{position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,76,158,.3),rgba(255,143,200,.08) 60%,transparent);pointer-events:none;animation:breathe-soft 8s ease-in-out infinite alternate}
.journey-device{position:relative;z-index:2;height:min(62vh,600px);aspect-ratio:767/1599;transform-style:preserve-3d;--tilt:-3deg;transform:rotateY(calc(-14deg + var(--local-progress,0)*18deg)) rotateX(5deg) rotateZ(var(--tilt));transition:transform .9s var(--ease)}
.journey[data-active="1"] .journey-device{--tilt:4deg}
.journey[data-active="2"] .journey-device{--tilt:-1deg}
.journey-screen{opacity:0;transform:translateX(26px) scale(1.03);transition:opacity .7s,transform 1s var(--ease)}
.journey-screen.is-active{opacity:1;transform:none}
.journey-device .phone-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 40%,rgba(255,200,230,.5) 49%,rgba(255,255,255,.75) 50%,rgba(255,200,230,.5) 51%,transparent 60%) no-repeat;background-size:100% 300%;background-position:0 100%;opacity:0}
.journey-device.is-switching .phone-screen::after{animation:screen-scan .8s cubic-bezier(.3,.6,.3,1)}
@keyframes screen-scan{0%{opacity:1;background-position:0 100%}85%{opacity:1}100%{opacity:0;background-position:0 0}}
.journey-tag{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(25,18,32,.92);font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:0 20px 40px -20px rgba(0,0,0,.85);opacity:0;transform:translateY(14px) scale(.96);transition:opacity .5s,transform .8s var(--ease)}
.journey-tag .icon{color:var(--mint);width:15px;height:15px;stroke-width:2.6}
.journey-tag.is-active{opacity:1;transform:none}
.journey-tag[data-tag="0"]{left:4%;top:24%}
.journey-tag[data-tag="1"]{right:2%;top:48%}
.journey-tag[data-tag="2"]{left:8%;bottom:16%}
.screen-caption{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.06em;color:var(--dim);white-space:nowrap}
.journey-bottom{display:flex;align-items:center;gap:24px;padding-top:16px;border-top:1px solid var(--line)}
.journey-dots{display:flex;gap:8px;flex-wrap:wrap}
.journey-dot{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--mute);font-size:14px;font-weight:700;cursor:pointer;transition:background .3s,color .3s,border-color .3s,box-shadow .3s}
.journey-dot span{font-size:11px;color:var(--dim)}
.journey-dot:hover{color:var(--ink)}
.journey-dot.is-active{background:var(--glass-2);color:var(--ink);border-color:rgba(255,143,200,.45);box-shadow:0 0 26px -8px rgba(255,76,158,.6)}
.journey-progress{flex:1;min-width:60px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.journey-progress span{display:block;height:100%;background:var(--grad-btn);transform:scaleX(var(--journey-progress));transform-origin:left}
.journey-hint{font-size:13px;color:var(--dim);white-space:nowrap}
.mobile-screen{display:none}
@media (min-width:901px){
  .js .journey{height:330vh}
  .js .journey-pin{position:sticky;top:0;height:100svh;min-height:680px;display:flex;flex-direction:column;padding-top:clamp(96px,12vh,124px);padding-bottom:28px}
  .js .journey-layout{flex:1;min-height:0}
  .js .journey-copy{position:relative;height:100%}
  .js .journey-chapter{position:absolute;left:0;right:0;top:50%;padding:0;transform:translateY(calc(-50% + 50px));opacity:0;visibility:hidden;pointer-events:none;transition:transform .95s var(--ease),opacity .6s,visibility .6s}
  .js .journey-chapter.is-active{transform:translateY(-50%);opacity:1;visibility:visible;pointer-events:auto}
  .js .journey-art{height:100%;min-height:0}
}

/* ---------- import ---------- */
.account-section{z-index:6;margin-top:-64px;padding:clamp(110px,12vw,160px) var(--gutter) clamp(100px,11vw,150px);background:radial-gradient(60% 50% at 80% 40%,rgba(255,76,158,.1),transparent 70%),linear-gradient(180deg,#130D1A,var(--bg) 96%);overflow:hidden}
.account-layout{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;align-items:center}
.account-copy h2,.release-copy h2{font-size:clamp(40px,4.6vw,70px);margin-top:20px}
.account-copy>p:not(.eyebrow),.release-copy>p:not(.eyebrow){color:var(--mute);font-size:17px;line-height:1.65;max-width:440px;margin-top:22px}
.account-copy>p.account-detail{font-size:15px;color:var(--dim);margin-top:16px}
.account-preview{position:relative;padding:20px 0 0;perspective:1200px}
.account-glow,.release-glow,.showcase-glow{position:absolute;inset:-10% -12%;background:radial-gradient(closest-side,rgba(255,76,158,.28),rgba(255,143,200,.07) 60%,transparent);pointer-events:none;z-index:0}
.account-card{position:relative;z-index:1;width:92%;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 30px 60px -28px rgba(0,0,0,.95),0 0 50px -18px rgba(255,76,158,.4)}
.account-card .source-window{border-radius:24px}
.account-card-mal{rotate:-2deg;animation:card-float 8s ease-in-out infinite alternate}
.account-card-anilist{margin:26px 0 0 8%;rotate:1.6deg;animation:card-float 8s -4s ease-in-out infinite alternate-reverse}
.account-preview figcaption,.calendar-preview figcaption{position:relative;z-index:1;color:var(--dim);font-size:13px;line-height:1.5;text-align:center;margin-top:24px}
.calendar-preview figcaption{font-size:11px;margin-top:17px;color:#B5ADBD}

/* ---------- profil et tier list ---------- */
.identity-section{position:relative;overflow-x:clip;padding:clamp(110px,12vw,160px) var(--gutter) clamp(60px,7vw,100px);background:radial-gradient(46% 26% at 50% 30%,rgba(255,76,158,.09),rgba(255,76,158,.035) 45%,rgba(255,76,158,.01) 72%,transparent)}
.identity-intro{max-width:780px;margin:0 auto;text-align:center}
.identity-intro h2{font-size:clamp(44px,5.6vw,86px);margin-top:20px}
.identity-intro p:not(.eyebrow){color:var(--mute);font-size:17px;line-height:1.65;margin-top:22px}
.identity-product-grid{--showcase-height:clamp(360px,42vw,560px);position:relative;display:grid;grid-template-columns:1.2fr .8fr;gap:7%;align-items:start;max-width:1080px;margin:64px auto 0}
.profile-showcase-art,.tier-showcase-art{position:relative;height:var(--showcase-height);display:flex;justify-content:center;align-items:center;perspective:1400px}
.profile-source{position:relative;z-index:1;width:min(100%,calc(var(--showcase-height)*.9));border-radius:6%;transform:rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) rotate(-2deg);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(255,76,158,.45);transition:transform .6s var(--ease)}
.tier-showcase-art .phone{z-index:1;flex:none;width:calc((var(--showcase-height) - 26px) * 767 / 1599);transform:rotate(4deg)}
.identity-product-grid figcaption{margin:30px auto 0;max-width:380px;text-align:center}
.identity-product-grid h3{font-weight:900;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em}
.identity-product-grid figcaption p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--mute)}
.profile-sharing{display:flex;width:max-content;max-width:100%;align-items:center;gap:12px;margin:46px auto 0;padding:12px 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass);font-size:15px;font-weight:700;color:var(--ink-2)}
.profile-sharing .icon{width:17px;height:17px;color:var(--s2)}

/* ---------- sorties ---------- */
.release-section{z-index:5;padding:clamp(120px,13vw,170px) var(--gutter) clamp(90px,10vw,130px);background:radial-gradient(55% 45% at 75% 35%,rgba(255,76,158,.12),transparent 70%),linear-gradient(180deg,#15101D,var(--bg) 92%);overflow:hidden}
.release-layout{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center}
.release-copy>p.release-calendar{font-size:15px;color:var(--dim);margin-top:14px}
.calendar-preview{width:100%;max-width:405px;margin-top:30px;padding:23px 17px 17px;border-radius:24px;border:1px solid rgba(230,217,230,.12);background:#303030;box-shadow:0 23px 48px -25px #000}
.calendar-heading,.calendar-next{width:92%;margin-left:auto;margin-right:auto}
.calendar-featured{margin-top:13px;border-radius:16px;box-shadow:0 12px 20px -14px #000}
.calendar-next{margin-top:18px}
/* écran verrouillé : l'iPhone s'allume, la Dynamic Island s'ouvre, la notification tombe puis se détache */
.release-illustration{position:relative;container-type:inline-size;min-height:clamp(500px,50vw,660px);--lock-p:0}
.notif-card{position:relative;filter:drop-shadow(0 2.4cqw 3.4cqw rgba(0,0,0,.55)) drop-shadow(0 0 5cqw rgba(255,76,158,.32))}
.notif-crop{--crop-ratio:2079/372;--image-width:104.473305%;--image-left:-2.260702%;--image-top:-45.967742%}
.notif-shine{position:absolute;inset:0;z-index:1;border-radius:5.77%/32.3%;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.3) 46%,rgba(255,255,255,.07) 54%,transparent 64%) no-repeat;background-size:250% 100%;background-position:120% 0}
.lock-scene{position:absolute;inset:0;perspective:1500px;--lock-tilt:rotateY(17deg) rotateX(5deg) rotateZ(-2.5deg)}
.lock-moon{position:absolute;right:-4%;top:-2%;width:62cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 46% 44%,rgba(255,240,230,.42),rgba(255,190,220,.14) 42%,transparent 68%);transform:translateY(calc(var(--lock-p) * 34px))}
.lock-device{position:absolute;left:6%;top:50%;width:clamp(180px,44cqw,272px);transform-style:preserve-3d;transform:translateY(-50%) translateY(calc(var(--lock-p) * -16px)) var(--lock-tilt)}
.lock-device .phone{animation:lock-float 7s ease-in-out infinite alternate}
.lock-rings{position:absolute;left:50%;top:3.2%;width:0;height:0;transform:translateZ(-2px)}
.lock-rings i{position:absolute;left:-30cqw;top:-30cqw;width:60cqw;height:60cqw;border-radius:50%;border:.5cqw solid rgba(255,143,200,.75);box-shadow:0 0 3cqw rgba(255,76,158,.45),inset 0 0 3cqw rgba(255,76,158,.3);opacity:0;scale:.2}
.lock-screen{background:#04050A}
.lock-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:77% 50%;filter:brightness(.8) saturate(1.08)}
.lock-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,5,14,.38),transparent 34%,transparent 58%,rgba(8,5,14,.62))}
.lock-status{position:absolute;right:8%;top:4.6cqw;display:flex;align-items:center;gap:1.5cqw;height:3.4cqw;color:#fff}
.lock-status svg{height:100%;width:auto;fill:currentColor}
.lock-batt{width:6.6cqw;height:3.1cqw;border-radius:1cqw;border:.32cqw solid rgba(255,255,255,.55);padding:.35cqw;position:relative}
.lock-batt::before{content:"";display:block;width:78%;height:100%;border-radius:.5cqw;background:#fff}
.lock-batt::after{content:"";position:absolute;right:-1cqw;top:30%;width:.5cqw;height:40%;border-radius:0 .4cqw .4cqw 0;background:rgba(255,255,255,.55)}
.lock-clock{position:absolute;left:0;right:0;top:20cqw;text-align:center;color:rgba(255,246,250,.95);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,var(--font);text-shadow:0 .4cqw 2cqw rgba(0,0,0,.28)}
.lock-date{display:block;font-size:5cqw;font-weight:600;letter-spacing:.005em;opacity:.92}
.lock-time{display:block;margin-top:.4cqw;font-size:25cqw;font-weight:700;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lock-banner{position:absolute;left:3.2%;right:3.2%;top:82cqw;filter:drop-shadow(0 1cqw 2.4cqw rgba(0,0,0,.4))}
.lock-quick{position:absolute;left:9%;right:9%;bottom:7cqw;display:flex;justify-content:space-between}
.lock-btn{width:13.5cqw;height:13.5cqw;border-radius:50%;display:grid;place-items:center;background:rgba(18,14,24,.5);color:#fff}
.lock-btn svg{width:5.6cqw;height:5.6cqw;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lock-home{position:absolute;left:50%;bottom:2.4cqw;width:35%;height:1.25cqw;border-radius:9px;transform:translateX(-50%);background:rgba(255,255,255,.88)}
.lock-off{position:absolute;inset:0;z-index:1;background:#020204;opacity:0;pointer-events:none}
.lock-live{position:absolute;z-index:3;left:50%;top:2.3cqw;height:8cqw;width:27.2cqw;translate:-50% 0;border-radius:99px;background:#000;display:flex;align-items:center;justify-content:space-between;padding:0 1.3cqw;opacity:0;overflow:hidden}
.lock-live img{width:6.6cqw;height:6.6cqw;border-radius:2cqw;flex:none}
.lock-live i{width:3.6cqw;height:3.6cqw;margin-right:.6cqw;border-radius:50%;background:#FF4C9E;box-shadow:0 0 0 .9cqw rgba(255,76,158,.28),0 0 2.6cqw #FF4C9E;flex:none}
.lock-pop{position:absolute;left:15%;right:3%;top:57%;z-index:5;transform:translateY(calc(var(--lock-p) * -54px)) var(--lock-tilt) translateZ(46px)}
.lock-pop .notif-card{animation:lock-bob 6s 4s ease-in-out infinite alternate}
.lock-pop-in{transform-origin:20% 50%}

/* séquence A : écran éteint, réveil, Dynamic Island + vibration + ondes, notification qui tombe puis se détache */
html.motion-ready:not(.motion-paused) .lock-scene:not(.is-playing) .lock-off{opacity:1}
html.motion-ready:not(.motion-paused) .lock-scene:not(.is-playing) .lock-clock,
html.motion-ready:not(.motion-paused) .lock-scene:not(.is-playing) .lock-pop-in{opacity:0}
.lock-scene .lock-banner{opacity:0}
.lock-scene.is-playing .lock-off{animation:lock-off .7s .3s ease-out both}
.lock-scene.is-playing .lock-wall{animation:lock-wake 1.6s .3s cubic-bezier(.2,.8,.2,1) both}
.lock-scene.is-playing .lock-clock{animation:lock-clock .9s .45s cubic-bezier(.2,.8,.2,1) both}
.lock-scene.is-playing .lock-live{animation:lock-live 1.25s 1s cubic-bezier(.3,.9,.3,1) both}
.lock-scene.is-playing .lock-live>*{animation:lock-live-content 1.25s 1s ease both}
.lock-scene.is-playing .lock-device .phone{animation:lock-buzz .46s 1.05s linear both,lock-float 7s 2s ease-in-out infinite alternate}
.lock-scene.is-playing .lock-rings i{animation:lock-ring 1.7s 1.1s cubic-bezier(.15,.7,.3,1) both}
.lock-scene.is-playing .lock-rings i:nth-child(2){animation-delay:1.28s}
.lock-scene.is-playing .lock-rings i:nth-child(3){animation-delay:1.46s}
.lock-scene.is-playing .lock-banner{animation:lock-banner 1.75s 2s both}
.lock-scene.is-playing .lock-pop-in{animation:lock-pop 1.1s 3.05s cubic-bezier(.16,1,.3,1) both}
.lock-scene.is-playing .lock-pop .notif-shine{animation:notif-shine 1.3s 3.9s ease-in-out both}
@keyframes lock-off{to{opacity:0}}
@keyframes lock-wake{from{scale:1.16;filter:brightness(.25) saturate(.8)}to{scale:1;filter:brightness(.8) saturate(1.08)}}
@keyframes lock-clock{from{opacity:0;translate:0 3cqw}to{opacity:1;translate:none}}
@keyframes lock-live{0%{opacity:0;width:27.2cqw;height:8cqw}10%{opacity:1}34%{width:64cqw;height:9.6cqw}74%{width:64cqw;height:9.6cqw;opacity:1}100%{width:27.2cqw;height:8cqw;opacity:0}}
@keyframes lock-live-content{0%,22%{opacity:0;scale:.6}38%,70%{opacity:1;scale:1}86%,100%{opacity:0;scale:.6}}
@keyframes lock-buzz{0%,100%{translate:0 0}10%{translate:-2.4px 0}20%{translate:2.4px 0}30%{translate:-2.2px 0}40%{translate:2.2px 0}50%{translate:-1.8px 0}60%{translate:1.8px 0}70%{translate:-1px 0}80%{translate:1px 0}}
@keyframes lock-ring{0%{opacity:0;scale:.2}12%{opacity:.95}100%{opacity:0;scale:2.6}}
@keyframes lock-banner{0%{opacity:0;translate:0 -64cqw;scale:.4 .4}24%{opacity:1;translate:0 2cqw;scale:1.03 1.03}34%{translate:0 -.8cqw;scale:1}42%,62%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 0;scale:1.08}}
@keyframes lock-pop{from{opacity:0;transform:translate(-34cqw,-10cqw) scale(.34);filter:blur(5px)}40%{opacity:1}to{opacity:1;transform:none;filter:none}}
@keyframes lock-bob{from{translate:0 -5px}to{translate:0 6px}}
@keyframes lock-float{from{translate:0 -6px}to{translate:0 6px}}
@keyframes notif-shine{from{background-position:120% 0}to{background-position:-30% 0}}


/* ---------- questions ---------- */
.faq-section{max-width:1240px;margin:0 auto;padding:clamp(90px,10vw,140px) var(--gutter);display:grid;grid-template-columns:.85fr 1.15fr;gap:6vw;align-items:start}
.faq-intro h2{font-size:clamp(40px,4.6vw,68px);margin-top:20px}
.faq-list{display:grid;gap:12px}
.faq-list details{border:1px solid var(--line);background:var(--glass);border-radius:20px;transition:border-color .3s,background .3s,box-shadow .3s}
.faq-list details[open]{border-color:rgba(255,143,200,.38);background:rgba(255,255,255,.065);box-shadow:0 0 40px -18px rgba(255,76,158,.5)}
.faq-list summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px 20px 24px;font-weight:700;font-size:17px;line-height:1.4;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.faq-icon{position:relative;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);flex-shrink:0;transition:transform .45s var(--ease),border-color .3s,background .3s}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink)}
.faq-icon::after{transform:rotate(90deg)}
.faq-list details[open] .faq-icon{transform:rotate(45deg);border-color:rgba(255,143,200,.6);background:rgba(255,143,200,.14)}
.faq-list details p{padding:0 24px 22px;color:var(--mute);font-size:16px;line-height:1.7}

/* ---------- lancement ---------- */
.launch-section{position:relative;isolation:isolate;overflow:hidden;min-height:min(100svh,860px);display:grid;place-items:center;text-align:center;padding:150px var(--gutter) 130px}
.launch-landscape{position:absolute;inset:0;z-index:-3}
.launch-landscape img{width:100%;height:100%;object-fit:cover;object-position:center 60%;opacity:.5;transform:scale(1.04)}
.launch-section::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,var(--bg) 0%,rgba(10,7,16,.3) 34%,rgba(10,7,16,.35) 70%,var(--bg) 100%)}
.launch-glow{position:absolute;left:50%;top:55%;width:min(900px,95vw);aspect-ratio:1.6;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(255,76,158,.34),transparent);animation:breathe 7s ease-in-out infinite alternate}
.launch-content{max-width:780px}
.launch-icon{width:86px;height:86px;margin:0 auto 26px;border-radius:26px;display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(255,255,255,.06);box-shadow:0 0 70px -10px rgba(255,76,158,.7)}
.launch-icon img{width:62px;height:62px;border-radius:18px}
.launch-content h2{font-size:clamp(46px,6.4vw,96px);margin-top:20px}
.launch-content>p:not(.eyebrow){color:var(--ink-2);font-size:17.5px;line-height:1.65;margin-top:24px}
.social-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:34px}

/* ---------- pied de page ---------- */
.site-footer{max-width:1320px;margin:0 auto;padding:36px var(--gutter) 44px;display:grid;grid-template-columns:auto 1fr;gap:16px 28px;align-items:center;border-top:1px solid var(--line)}
.site-footer>p{color:var(--dim);font-size:14px}
.footer-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:var(--mute)}
.footer-links a:hover{color:var(--ink)}
.site-footer small{grid-column:1/-1;color:var(--dim);font-size:13px}


/* ---------- apparitions ---------- */
.motion-ready .reveal{opacity:0;transform:translateY(46px);transition:opacity 1s,transform 1.2s var(--ease)}
.motion-ready .reveal.is-visible{opacity:1;transform:none;filter:none}

/* ---------- variables de défilement : non héritées, posées par le script sur les seuls éléments qui les lisent ---------- */
@property --cover{syntax:'<number>';inherits:false;initial-value:0}
@property --hero-progress{syntax:'<number>';inherits:false;initial-value:0}
@property --hero-h{syntax:'<length>';inherits:false;initial-value:0px}
@property --journey-progress{syntax:'<number>';inherits:false;initial-value:0}
@property --local-progress{syntax:'<number>';inherits:false;initial-value:0}
@property --lock-p{syntax:'<number>';inherits:false;initial-value:0}

/* ---------- système néon : coutures entre sections, enseignes, recul, progression, halo ---------- */
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:31;pointer-events:none}
.scroll-neon{position:fixed;left:0;right:0;top:0;z-index:45;height:2px;pointer-events:none;--scroll:0}
.scroll-neon span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--scroll));background:linear-gradient(90deg,#FF4C9E,#FF8FC8 75%,#FFF);box-shadow:0 0 8px #FF4C9E,0 0 20px rgba(255,76,158,.7)}
.fx-spot{position:fixed;left:0;top:0;z-index:29;width:1120px;height:1120px;margin:-560px 0 0 -560px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .8s;background:radial-gradient(closest-side,rgba(255,76,158,.085),rgba(255,143,200,.03) 45%,transparent 72%);will-change:transform}
.fx-spot.is-on{opacity:1}
/* couture : tube néon qui grésille puis s'ouvre, cône de lumière sur la section qui arrive, impulsion qui court le long du tube */
.seam{position:absolute;left:0;right:0;top:0;height:0;z-index:4;pointer-events:none}
.seam-tube{position:absolute;left:10%;right:10%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#FF4C9E 12%,#FFC2DF 36%,#FFF 50%,#FFC2DF 64%,#FF4C9E 88%,transparent);box-shadow:0 0 6px #FF4C9E,0 0 16px rgba(255,76,158,.9),0 0 44px rgba(255,76,158,.55);opacity:.92}
.seam-edge{position:absolute;left:0;right:0;top:0;height:calc(var(--sheet) * 1.3);border:2px solid #FF8FC8;border-bottom:0;border-radius:var(--sheet) var(--sheet) 0 0;box-shadow:inset 0 3px 14px -3px rgba(255,76,158,.85),inset 0 1px 0 rgba(255,255,255,.5);-webkit-mask:linear-gradient(180deg,#000 35%,transparent);mask:linear-gradient(180deg,#000 35%,transparent);opacity:.85}
.seam-tube::after{content:"";position:absolute;top:50%;left:0;width:110px;height:6px;margin-top:-3px;border-radius:6px;background:radial-gradient(closest-side,#fff,rgba(255,214,234,.7) 45%,transparent);opacity:0}
.seam-lamp{position:absolute;left:50%;top:0;width:min(1200px,96%);height:clamp(240px,32vw,460px);transform:translateX(-50%);background:conic-gradient(from 180deg at 50% 0%,transparent 124deg,rgba(255,76,158,.3) 158deg,rgba(255,180,218,.42) 180deg,rgba(255,76,158,.3) 202deg,transparent 236deg);-webkit-mask:linear-gradient(180deg,#000,transparent 94%);mask:linear-gradient(180deg,#000,transparent 94%);filter:blur(16px);opacity:.75}
html.motion-ready:not(.motion-paused) .seam:not(.is-lit) .seam-tube{opacity:0;transform:scaleX(.03)}
html.motion-ready:not(.motion-paused) .seam:not(.is-lit) .seam-lamp,html.motion-ready:not(.motion-paused) .seam:not(.is-lit) .seam-edge{opacity:0}
.seam.is-lit .seam-edge{animation:edge-on 1.2s .1s steps(1,end) both}
.seam.is-lit .seam-tube{animation:seam-ignite 1.15s cubic-bezier(.2,.8,.2,1) both}
.seam.is-lit .seam-tube::after{animation:seam-pulse 6s 1.8s ease-in-out infinite}
.seam.is-lit .seam-lamp{animation:lamp-on 1.8s .2s cubic-bezier(.2,.8,.2,1) both}
/* la section recouverte recule et s'assombrit */
[data-recede]{--cover:0}
[data-recede]::after{--cover:inherit;content:"";position:absolute;inset:0;z-index:40;pointer-events:none;background:#05030A;opacity:calc(var(--cover) * .6)}
.identity-section{isolation:isolate}
@media (min-width:901px){
  .hero[data-recede],.identity-section[data-recede]{transform-origin:50% 100%;scale:calc(1 - var(--cover) * .055);border-radius:calc(var(--cover) * 40px)}
  .journey-pin[data-recede]{transform-origin:50% 100%;scale:calc(1 - var(--cover) * .06)}
}
/* enseignes en katakana : オタク avant la fiche d'otaku, オタキューブ pour la fin */
.kana-sign{position:relative;z-index:1;width:min(980px,100%);height:clamp(110px,14vw,200px);margin:0 auto clamp(6px,1.4vw,18px);pointer-events:none}
.kana-sign canvas{position:absolute;left:0;top:-90%;width:100%;height:210%;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 38%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 38%);mask-composite:intersect}
.kana-sign::after{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:76%;height:120%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,76,158,.3),rgba(255,76,158,.1) 55%,transparent);opacity:0;transition:opacity 1.4s}
.kana-sign.is-lit::after{opacity:1}
.kana-sign.is-lit canvas{animation:neon-on 1.25s steps(1,end) both,neon-buzz 7s 1.6s infinite}
.launch-section{align-content:center}
.launch-section .kana-sign{width:min(900px,92vw);height:clamp(84px,10vw,160px);margin-bottom:clamp(14px,2.6vw,34px)}
/* titres, rubans, boutons, questions */
.grad{filter:drop-shadow(0 0 14px rgba(255,76,158,.3))}
.motion-ready .reveal.is-visible .grad{animation:grad-ignite 1.3s .4s steps(1,end) both}
.journey-chapter.is-active .chapter-number{animation:grad-ignite 1.1s steps(1,end) both}
.ribbon-front{box-shadow:0 0 0 1px rgba(255,214,234,.6),0 0 24px rgba(255,76,158,.7),0 0 70px rgba(255,76,158,.35),0 22px 50px -18px rgba(255,76,158,.7)}
.ribbon-front::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.3) 50%,transparent);transform:translateX(-110%);animation:ribbon-shine 5.5s ease-in-out infinite}
.ribbon-back .ribbon-seq{-webkit-text-stroke:1px rgba(255,180,216,.95);text-shadow:0 0 9px rgba(255,76,158,.75)}
html.motion-ready:not(.motion-paused) .ribbons:not(.is-lit) .ribbon-front{filter:brightness(.3) saturate(.3);box-shadow:none}
html.motion-ready:not(.motion-paused) .ribbons:not(.is-lit) .ribbon-back .ribbon-seq{opacity:.3;text-shadow:none}
.ribbons.is-lit .ribbon-front{animation:ribbon-ignite 1.1s steps(1,end) both}
.ribbons.is-lit .ribbon-back .ribbon-seq{animation:neon-on 1.3s .3s steps(1,end) both}
.pill-main{position:relative;isolation:isolate}
.pill-beam{position:absolute;inset:-1.5px;z-index:1;border-radius:inherit;padding:1.5px;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pill-beam::before{content:"";position:absolute;left:50%;top:50%;width:300%;aspect-ratio:1;translate:-50% -50%;background:conic-gradient(transparent 0 62%,rgba(255,255,255,.95) 78%,#FF8FC8 86%,transparent 94%);animation:beam-spin 3.4s linear infinite}
.faq-list details{position:relative}
.faq-list details::before{content:"";position:absolute;left:-1px;top:22%;bottom:22%;width:2px;border-radius:2px;background:linear-gradient(180deg,#FFC2DF,#FF4C9E);box-shadow:0 0 8px #FF4C9E,0 0 22px rgba(255,76,158,.65);opacity:.5;transition:opacity .3s,top .45s var(--ease),bottom .45s var(--ease)}
.faq-list details[open]::before,.faq-list details:hover::before{opacity:1;top:12%;bottom:12%}
.motion-ready .faq-list.is-visible details::before{animation:faq-on .9s steps(1,end) backwards}
.motion-ready .faq-list.is-visible details:nth-child(2)::before{animation-delay:.16s}
.motion-ready .faq-list.is-visible details:nth-child(3)::before{animation-delay:.32s}
.motion-ready .faq-list.is-visible details:nth-child(4)::before{animation-delay:.48s}
@keyframes seam-ignite{0%{opacity:0;transform:scaleX(.03)}7%{opacity:1}11%{opacity:.2}17%{opacity:1}23%{opacity:.45}29%{opacity:1;transform:scaleX(.1)}100%{opacity:.92;transform:scaleX(1)}}
@keyframes lamp-on{0%{opacity:0;transform:translateX(-50%) scaleX(.15)}100%{opacity:.75;transform:translateX(-50%) scaleX(1)}}
@keyframes edge-on{0%{opacity:0}10%{opacity:.9}16%{opacity:.1}26%{opacity:.85}34%{opacity:.3}46%,100%{opacity:.85}}
@keyframes seam-pulse{0%{transform:translateX(0);opacity:0}6%,44%{opacity:1}50%,100%{transform:translateX(calc(80vw - 110px));opacity:0}}
@keyframes neon-on{0%{opacity:.15}6%{opacity:1}10%{opacity:.12}16%{opacity:1}22%{opacity:.35}30%{opacity:1}36%{opacity:.6}44%,100%{opacity:1}}
@keyframes neon-buzz{0%,90%,95%,100%{opacity:1}91%{opacity:.5}92.5%{opacity:.95}93.5%{opacity:.35}}
@keyframes grad-ignite{0%{opacity:.12}8%{opacity:1}12%{opacity:.3}18%{opacity:1}26%{opacity:.55}34%,100%{opacity:1}}
@keyframes faq-on{0%{opacity:0}10%{opacity:1}20%{opacity:.1}34%{opacity:1}48%{opacity:.25}62%{opacity:1}100%{opacity:.5}}
@keyframes ribbon-ignite{0%{filter:brightness(.3) saturate(.3)}7%{filter:none}13%{filter:brightness(.35) saturate(.4)}21%{filter:none}29%{filter:brightness(.55) saturate(.6)}38%,100%{filter:none}}
@keyframes ribbon-shine{0%,30%{transform:translateX(-110%)}70%,100%{transform:translateX(440%)}}
@keyframes beam-spin{to{rotate:360deg}}

/* ---------- pause, préférences système, page masquée ---------- */
html.motion-paused *,html.motion-paused *::before,html.motion-paused *::after{animation:none!important;transition:none!important}
html.motion-paused{scroll-behavior:auto}
html.motion-paused .reveal{opacity:1;transform:none;filter:none}
html.motion-paused .hero-copy,html.motion-paused .hero-visual,html.motion-paused .hero-landscape{transform:none;opacity:1}
html.motion-paused .hero-fan{transform:none}
html.motion-paused .hero-phone{translate:none;rotate:none;scale:none}
html.motion-paused #petal-canvas{display:none}
html.motion-paused #fx-canvas,html.motion-paused .fx-spot{display:none}
html.page-hidden *,html.page-hidden *::before,html.page-hidden *::after{animation-play-state:paused!important}
/* hors de l'écran, seules les animations en boucle sont mises en pause (sélecteurs ciblés : basculer la classe ne recalcule pas toute la section) */
.is-idle .live-dot,.is-idle .hero-halo,.is-idle .journey-glow,.is-idle .account-card,.is-idle .lock-device .phone,.is-idle .lock-pop .notif-card,.is-idle .launch-glow,.is-idle .seam-tube::after,.is-idle .kana-sign canvas,.is-idle .ribbon-front::after,.is-idle .pill-beam::before{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important;filter:none!important}
  #petal-canvas,#fx-canvas,.fx-spot{display:none}
}

/* ---------- animations ---------- */
@keyframes line-up{from{transform:translateY(112%) rotate(3deg)}to{transform:none}}
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes landscape-in{from{opacity:0;transform:scale(1.1)}to{opacity:.6;transform:none}}
@keyframes breathe{from{opacity:.72;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@keyframes breathe-soft{from{opacity:.7;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
@keyframes live{50%{opacity:.35}}
@keyframes phone-center{from{opacity:0;transform:translate(-50%,40%) translateZ(60px) rotateX(25deg)}to{opacity:1;transform:translate(-50%,0) translateZ(60px)}}
@keyframes phone-left{from{opacity:0;transform:translate(-50%,50%) rotate(0) translateZ(-40px)}to{opacity:1;transform:translate(-128%,9%) rotate(-11deg) translateZ(-40px)}}
@keyframes phone-right{from{opacity:0;transform:translate(-50%,50%) rotate(0) translateZ(-40px)}to{opacity:1;transform:translate(28%,9%) rotate(11deg) translateZ(-40px)}}
@keyframes card-float{from{translate:0 -6px}to{translate:0 8px}}

/* ---------- tablette et téléphone ---------- */
@media (max-width:1100px) and (min-width:901px){
  .main-navigation{gap:16px;font-size:13.5px}
  .nav-cta{display:none}
}
@media (max-width:900px){
  .site-header{gap:10px;padding:12px 16px}
  .menu-toggle{display:grid}
  .main-navigation{display:none;position:absolute;top:calc(100% + 8px);left:12px;right:12px;flex-direction:column;align-items:stretch;gap:4px;padding:14px;border-radius:24px;border:1px solid var(--line-2);background:rgba(18,12,25,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);font-size:19px;color:var(--ink)}
  .main-navigation.is-open{display:flex}
  .main-navigation>a:not(.nav-cta){padding:12px 10px;border-radius:14px}
  .main-navigation>a:not(.nav-cta):hover{background:var(--glass)}
  .nav-cta{display:inline-flex;justify-content:space-between;margin-top:8px;padding:6px 6px 6px 18px;font-size:16px}
  .nav-cta .pill-dot{width:38px;height:38px}
  .hero{padding-top:110px}
  .badge-extra{display:none}
  .hero-visual{height:min(118vw,520px)}
  .hero-phone{width:clamp(130px,38vw,210px)}
  .hero-phone-left{transform:translate(-118%,12%) rotate(-11deg) translateZ(-40px)}
  .hero-phone-right{transform:translate(18%,12%) rotate(11deg) translateZ(-40px)}
  @keyframes phone-left{from{opacity:0;transform:translate(-50%,50%) rotate(0) translateZ(-40px)}to{opacity:1;transform:translate(-118%,12%) rotate(-11deg) translateZ(-40px)}}
  @keyframes phone-right{from{opacity:0;transform:translate(-50%,50%) rotate(0) translateZ(-40px)}to{opacity:1;transform:translate(18%,12%) rotate(11deg) translateZ(-40px)}}
  .ribbons{height:150px;margin-top:-90px}
  .sheet{--sheet:30px}
  .journey{margin-top:-60px;overflow-x:clip}
  .journey-pin{padding-top:100px;padding-bottom:30px}
  .journey-layout{grid-template-columns:1fr}
  .journey-art,.journey-bottom{display:none}
  .journey-chapter{padding:44px 0 34px;border-bottom:1px solid var(--line)}
  .journey-chapter:last-child{border-bottom:0}
  .chapter-number{font-size:clamp(84px,24vw,120px)}
  .mobile-screen{display:block;position:relative;width:min(250px,64vw);margin:40px auto 0}
  .mobile-screen::before{content:"";position:absolute;inset:-14% -30%;background:radial-gradient(closest-side,rgba(255,76,158,.3),transparent);z-index:-1}
  .screen-tag{position:absolute;left:-12%;bottom:12%;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.13);background:rgba(25,18,32,.92);font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 18px 36px -18px rgba(0,0,0,.85)}
  .screen-tag .icon{color:var(--mint);width:14px;height:14px;stroke-width:2.6}
  .account-section{margin-top:-30px}
  .account-layout,.release-layout,.faq-section{grid-template-columns:1fr}
  .account-preview{max-width:560px;margin:0 auto;width:100%}
  .identity-product-grid{grid-template-columns:1fr;gap:56px;--showcase-height:clamp(320px,95vw,460px)}
  .release-illustration{min-height:clamp(420px,112vw,560px)}
  .lock-device{left:4%;width:46cqw}
  .lock-pop{left:12%;right:2%;top:60%}
  .faq-section{gap:30px}
  .site-footer{grid-template-columns:1fr}
}
@media (max-width:480px){
  .hero h1{font-size:clamp(38px,11.4vw,52px)}
  .pill{min-height:50px;font-size:14.5px;padding-left:18px}
  .pill-dot{width:38px;height:38px}
  .journey-chapter h2,.account-copy h2,.release-copy h2,.faq-intro h2{font-size:clamp(34px,10vw,44px)}
  .identity-intro h2,.launch-content h2{font-size:clamp(38px,11vw,52px)}
  .identity-intro p br,.launch-content p br{display:none}
  .faq-list summary{font-size:16px;padding:18px 18px 18px 20px}
  .faq-list details p{padding:0 20px 20px}
  .screen-tag{left:-6%}
}
@media (max-width:360px){
  .site-header{padding:10px 12px}
  .brand{font-size:19px;gap:8px}
  .brand img{width:30px;height:30px}
  .header-controls{gap:6px}
  .language-picker{min-width:74px;padding:0 9px;gap:5px}
  .round-button{width:40px;height:40px}
  .badge{font-size:12px}
}