/* bigo : landing. Gris clair d'iPhone, encre presque noire, un violet de marque, des couleurs de notification.
   Bricolage Grotesque pour la voix (titres, logo), Inter pour lire. */
:root {
  --bg: #f5f5f5; --card: #fff; --ink: #111114; --ink-2: #3a3a42; --muted: #6e6e78; --line: #e4e4ea; --ghost: #c4c4cc;
  --violet: #ff4f1f; --violet-2: #ff7a45; --violet-soft: #ffeae2;
  --green: #1aae4f; --green-soft: #e3f6ea; --blue: #2f74f0; --blue-soft: #e5eefe;
  --orange: #f2711c; --orange-soft: #fdeee3; --pink: #ff4f1f; --pink-soft: #ffeae2;
  --display: "Inter Tight", Inter, system-ui, sans-serif; --stamp: Archivo, "Arial Black", system-ui, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.7, 0, .2, 1);
  --r-card: 30px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 10px; }
html.lock-scroll, html.lock-scroll body { overflow: hidden; }

/* ---------- typo ---------- */
.display { margin: 0 auto; max-width: 15ch; font: 800 clamp(50px, 8.4vw, 116px)/.94 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.display.md { max-width: 18ch; font-size: clamp(38px, 5.4vw, 74px); line-height: .98; letter-spacing: -.03em; }
.display.light { color: #fff; }
.center { text-align: center; }
.lede { max-width: 34em; margin: 26px auto 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; text-wrap: pretty; }
.hl { color: var(--violet); }
.label { margin: 0 0 6px; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }

/* mots qui arrivent un par un : flous, gris, puis nets à l'encre */
.js [data-words] .w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(.32em) scale(.98); color: var(--ghost); transition: opacity .7s var(--ease), filter .8s var(--ease), transform 1s var(--ease), color 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 75ms); will-change: transform, filter; }
.js [data-words].in .w { opacity: 1; filter: none; transform: none; color: var(--ink); }
.js .display.light .w { color: rgba(255,255,255,.35); }
.js .display.light.in .w { color: #fff; }
.js [data-words].in .hl .w { color: var(--violet); }

/* apparitions : léger flou et montée */
.js .rv { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }

/* ---------- pastilles (boutons) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font: 600 15.5px/1 var(--body); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background .2s, box-shadow .3s; }
.pill:active { transform: scale(.97); }
.pill-violet { background: var(--violet); color: #fff; box-shadow: 0 10px 26px -10px rgba(255, 79, 31, .7), inset 0 1px 0 rgba(255,255,255,.25); }
.pill-violet:hover { background: #ec3f10; }
.pill-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.pill-ghost:hover { box-shadow: inset 0 0 0 1px #cfcfd8; }
.pill-white { background: #fff; color: var(--ink); }
.pill-sm { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.pill-lg { min-height: 58px; padding: 0 30px; font-size: 17px; }

/* ---------- mascotte ---------- */
.mascot { width: 64px; height: 84px; overflow: visible; }
.mascot.sm { width: 20px; height: 26px; }
.mascot.md { width: 44px; height: 58px; flex: none; }
.m-pupils { animation: look 5s var(--ease) infinite; }
@keyframes look { 0%, 18% { transform: translate(0, 0); } 24%, 44% { transform: translate(-1.6px, .4px); } 50%, 70% { transform: translate(1.8px, -.6px); } 76%, 100% { transform: translate(0, 0); } }
.m-eyes { transform-origin: 32px 40px; animation: blink 4.2s infinite; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.wobble { animation: wobble 1.1s var(--ease) infinite alternate; transform-origin: 50% 90%; }
@keyframes wobble { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-6px); } }

/* ---------- chargement ---------- */
.loader { position: fixed; inset: 0; z-index: 120; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--bg); transition: opacity .5s var(--ease), visibility 0s .5s; }
.loader p { margin: 0; color: var(--muted); font-size: 13.5px; }
.load-batt { width: 46px; height: 20px; padding: 2px; border-radius: 6px; border: 2px solid var(--ink); position: relative; }
.load-batt::after { content: ""; position: absolute; right: -6px; top: 5px; width: 3px; height: 7px; border-radius: 0 2px 2px 0; background: var(--ink); }
.load-batt i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--green); animation: charge 1.2s var(--ease) forwards; }
@keyframes charge { to { width: 100%; } }
html.loaded .loader, html:not(.js) .loader { opacity: 0; visibility: hidden; }

/* ---------- intro racontée ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--bg); border-radius: 0 0 48px 48px; box-shadow: 0 30px 80px rgba(0,0,0,.14); overflow: hidden; transition: transform 1.05s var(--ease-in-out); }
html.seen .intro, html:not(.js) .intro { display: none; }
.intro.out { transform: translateY(-104%); }
.scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 34px; padding: 24px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), transform .7s var(--ease), filter .6s, visibility 0s .7s; }
.scene.on { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.scene.gone { opacity: 0; transform: translateY(-34px) scale(.98); filter: blur(8px); }
.say { margin: 0; max-width: 15ch; font: 800 clamp(40px, 6.4vw, 86px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.say.soft.in .w { color: var(--muted) !important; }
.ul { position: relative; display: inline-block; }
.ul::after { content: ""; position: absolute; left: 3%; right: 3%; bottom: -.02em; height: .085em; border-radius: 99px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) 1s; }
.in .ul::after { transform: scaleX(1); }
.intro-skip { position: absolute; z-index: 2; top: 22px; right: 22px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 14px; cursor: pointer; }
.intro-skip:hover { color: var(--ink); }
.intro-dots { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.intro-dots i { width: 7px; height: 7px; border-radius: 99px; background: #d4d4dc; transition: width .4s var(--ease), background .4s; }
.intro-dots i.on { width: 22px; background: var(--ink); }

/* polaroïds qui tombent sur la table */
.polas { position: relative; width: 250px; height: 250px; }
.pola { position: absolute; margin: 0; padding: 10px 10px 34px; background: #fff; border-radius: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08); }
.pola img { width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.polas .pola { width: 190px; height: 220px; left: 30px; top: 10px; opacity: 0; }
.scene.on .polas .pola { animation: drop .9s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.polas .p1 { --r: -9deg; --x: -50px; animation-delay: .05s !important; }
.polas .p2 { --r: 7deg; --x: 52px; animation-delay: .22s !important; }
.polas .p3 { --r: -2deg; --x: 0px; animation-delay: .4s !important; }
@keyframes drop { from { opacity: 0; transform: translate(var(--x), -170px) rotate(calc(var(--r) * -2)) scale(1.15); } to { opacity: 1; transform: translate(var(--x), 0) rotate(var(--r)); } }

/* ---------- navigation ---------- */
.nav-wrap { position: fixed; z-index: 60; top: 16px; left: 0; right: 0; display: flex; justify-content: center; padding: 0 12px; pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 18px; border-radius: 999px; background: rgba(17, 17, 20, .94); color: #fff; box-shadow: 0 16px 40px -12px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateY(-160%); transition: transform .9s cubic-bezier(.3, 1.3, .5, 1) .15s; }
html.ready .nav, html:not(.js) .nav { transform: none; }
.wordmark { display: inline-flex; align-items: center; gap: 8px; margin-right: 14px; text-decoration: none; font: 800 26px/1 var(--display); letter-spacing: -.05em; }
.wordmark .mascot { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.wordmark:hover .mascot { transform: rotate(-12deg) translateY(-2px); }
.nav-links { display: flex; }
.nav-links a, .nav-login { padding: 10px 12px; border-radius: 99px; color: rgba(255,255,255,.7); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s, background .2s; }
.nav-links a:hover, .nav-login:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-login { margin-left: 8px; color: #fff; }
@media (max-width: 760px) { .nav-links { display: none; } .nav { padding-left: 14px; } .nav-login { margin-left: 0; } .wordmark { margin-right: 6px; } }

/* ---------- hero ---------- */
.hero { padding: 150px 16px 0; text-align: center; }
.badge-live { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 28px; padding: 8px 15px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 14px; font-weight: 500; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping 1.8s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(26, 174, 79, .5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(26, 174, 79, 0); } }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.proof { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 26px 0 0; color: var(--muted); font-size: 14.5px; }
.stack { display: inline-flex; }
.stack img, .stack b { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2.5px solid var(--bg); margin-left: -9px; }
.stack img:first-child { margin-left: 0; }
.stack b { display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11px; }

/* le monde : ciel, collines, et le téléphone qui en sort */
.world { position: relative; overflow: hidden; width: min(1280px, 100%); height: clamp(640px, 64vw, 900px); margin: 64px auto 0; border-radius: 44px; background: #86bcef; isolation: isolate; }
.world-sky { position: absolute; inset: -14% 0 0; background: #86bcef url("/site/landing/hero-bg.webp") center bottom / cover no-repeat; will-change: transform; }
.world-hills { position: absolute; z-index: 2; left: -2%; right: -2%; bottom: -2px; aspect-ratio: 1998 / 787; background: url("/site/landing/hero-hills.webp") center bottom / 100% auto no-repeat; pointer-events: none; }
.stage-par { position: absolute; z-index: 1; left: 0; right: 0; top: 54px; will-change: transform; }
.stage { position: relative; width: min(390px, 74vw); margin: 0 auto; }
.phone { position: relative; aspect-ratio: 434 / 906; filter: drop-shadow(0 40px 50px rgba(20, 30, 70, .35)); }
.phone iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.world-hint { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 22px; margin: 0; color: rgba(255,255,255,.95); font-size: 14px; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.45); }

.float { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 44px -10px rgba(0,0,0,.25); font-size: 13px; line-height: 1.3; text-align: left; animation: floaty 6s ease-in-out infinite; }
.float b { display: block; font-size: 13.5px; }
.float small { display: block; color: var(--muted); font-size: 12.5px; }
.float em { display: block; font-style: normal; color: var(--violet); font-weight: 600; font-size: 12.5px; }
.f-notif { left: -310px; top: 120px; width: 270px; }
.f-bio { right: -300px; top: 230px; width: 260px; animation-delay: -2s; }
.f-bio img { width: 40px; height: 40px; border-radius: 50%; }
.f-call { left: -240px; top: 420px; width: 200px; flex-direction: column; align-items: flex-start; gap: 4px; background: rgba(24, 24, 30, .9); color: #fff; animation-delay: -3s; }
.f-call small { color: rgba(255,255,255,.65); }
.fc-btns { display: flex; gap: 12px; margin-top: 6px; }
.fc-btns i { width: 34px; height: 34px; border-radius: 50%; background: #ff3b30; }
.fc-btns i.yes { background: #34c759; }
.f-vault { right: -210px; top: 470px; flex-direction: column; align-items: flex-start; gap: 8px; animation-delay: -4.5s; }
@keyframes floaty { 50% { transform: translateY(-10px); } }
@media (max-width: 1060px) { .float { display: none; } }
.dots { display: inline-flex; gap: 8px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; }
.dots i.on { background: currentColor; }
.fi { width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-block; background: linear-gradient(180deg, #67f27f, #0fbd2e); position: relative; }
.fi::after { content: ""; position: absolute; inset: 8px 7px 9px; border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%; background: #fff; }
.fi-wa { background: linear-gradient(180deg, #5af27a, #1fad4f); }
.fi-vault { background: linear-gradient(180deg, #3b3b46, #16161c); }
.fi-vault::after { inset: 11px 10px 8px; border-radius: 3px; background: #ffd60a; }

/* ---------- promesse ---------- */
.promise { padding: 150px 16px 40px; text-align: center; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 44px; }
.tile { margin: 0; width: 150px; padding: 18px 12px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.tile b { display: block; font: 800 34px/1 var(--display); letter-spacing: -.03em; }
.tile span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; width: min(1180px, calc(100% - 32px)); margin: 60px auto 0; scroll-margin-top: 90px; }
.card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 620px; padding: 34px 34px 0; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.chip-ic { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 26px; }
.chip-ic svg { width: 20px; height: 20px; fill: currentColor; }
.card h3 { margin: 0; max-width: 18ch; font: 700 clamp(26px, 2.4vw, 32px)/1.12 var(--display); letter-spacing: -.025em; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 9px; color: var(--ink-2); font-size: 15.5px; }
.checks li { position: relative; padding-left: 28px; }
.checks li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 14px; height: 10px; background: var(--c, var(--violet)); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1.5 5.2 5 8.5l7.5-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1.5 5.2 5 8.5l7.5-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.c-violet { --c: var(--violet); --cs: var(--violet-soft); }
.c-green { --c: var(--green); --cs: var(--green-soft); }
.c-blue { --c: var(--blue); --cs: var(--blue-soft); }
.c-orange { --c: var(--orange); --cs: var(--orange-soft); }
.c-pink { --c: var(--pink); --cs: var(--pink-soft); }
.c-ink { --c: var(--ink); --cs: #ececf0; }
.card .chip-ic { background: var(--cs); color: var(--c); }
.card .label { color: var(--c); }
.vis { position: relative; margin: auto auto 0; padding-top: 36px; width: 100%; display: flex; justify-content: center; }

.v-lock { flex-direction: column; align-items: center; width: 330px; height: 310px; margin-bottom: -30px; padding: 34px 16px 0; border-radius: 40px 40px 0 0; background: #1a1430 url("https://images.unsplash.com/photo-1601042879364-f3947d3f9c16?ixlib=rb-4.1.0&auto=format&q=70&fit=crop&w=700&h=640") center / cover; color: #fff; box-shadow: 0 0 0 9px #111114, 0 30px 60px -20px rgba(0,0,0,.4); }
.v-lock small { font-weight: 600; font-size: 14px; opacity: .9; }
.v-lock b { font: 700 72px/1 var(--display); letter-spacing: -.02em; }
.v-lock em { margin-top: 4px; font-style: normal; font-size: 12.5px; opacity: .85; }
.vn { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 330px; padding: 11px 12px; border-radius: 20px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--ink); text-align: left; font-size: 13px; line-height: 1.3; box-shadow: 0 12px 30px -10px rgba(0,0,0,.2); }
.vn > span { flex: 1; min-width: 0; }
.vn b { display: block; font-size: 13.5px; }
.vn small { display: block; color: var(--muted); }
.vn time { align-self: flex-start; color: var(--muted); font-size: 11.5px; }
.v-lock .vn { margin-top: 26px; background: rgba(255,255,255,.22); color: #fff; }
.v-lock .vn small { color: rgba(255,255,255,.8); }

.v-notifs { flex-direction: column; align-items: center; gap: 10px; padding: 36px 0 54px; }
.v-notifs .vn { opacity: 0; transform: translateY(-26px) scale(.96); transition: opacity .6s var(--ease), transform .8s cubic-bezier(.3, 1.4, .5, 1); background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -14px rgba(0,0,0,.25); }
.card.in .v-notifs .vn { opacity: 1; transform: none; }
.card.in .v-notifs .n1 { transition-delay: .5s; } .card.in .v-notifs .n2 { transition-delay: 1.1s; } .card.in .v-notifs .n3 { transition-delay: 1.7s; }

.v-phone { flex-direction: column; align-items: center; width: 300px; height: 340px; margin-bottom: -40px; padding: 76px 20px 0; border-radius: 50px 50px 0 0; background: linear-gradient(180deg, #2a2348, #6b3a7a 60%, #c2557b); color: #fff; box-shadow: 0 0 0 10px #111114, 0 30px 60px -20px rgba(0,0,0,.45); }
.vp-island { position: absolute; top: 16px; left: 50%; width: 94px; height: 28px; margin-left: -47px; border-radius: 99px; background: #000; }
.v-phone small { font-size: 14px; opacity: .8; }
.v-phone b { margin-top: 4px; font: 600 28px/1.1 var(--display); }
.vp-btns { display: flex; gap: 70px; margin-top: 64px; }
.vp-btns i { position: relative; width: 62px; height: 62px; border-radius: 50%; background: #ff3b30; }
.vp-btns i.yes { background: #34c759; animation: ring 1.6s ease-in-out infinite; }
.vp-btns i.yes::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #34c759; animation: halo 1.6s ease-out infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-12deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-6deg); } 40% { transform: rotate(0); } }
@keyframes halo { from { transform: scale(1); opacity: .9; } to { transform: scale(1.7); opacity: 0; } }

.v-keys { flex-direction: column; align-items: center; gap: 22px; padding-bottom: 38px; color: var(--ink); }
.v-keys .dots i { width: 14px; height: 14px; }
.v-keys .dots i.blink { animation: blinkdot 1s steps(2) infinite; }
@keyframes blinkdot { 50% { background: currentColor; } }
.keys { display: grid; grid-template-columns: repeat(3, 62px); gap: 12px; }
.keys i { display: grid; place-items: center; height: 62px; border-radius: 50%; background: #f1f1f4; font: 500 24px/1 var(--display); font-style: normal; transition: background .2s, transform .2s; }
.keys i.e { background: none; }
.keys i:not(.e):hover { background: var(--orange-soft); transform: scale(.94); }

.v-funnel { flex-direction: column; gap: 10px; padding-bottom: 44px; }
.v-funnel span { position: relative; height: 46px; display: flex; align-items: center; padding: 0 16px; border-radius: 14px; color: #fff; font-weight: 600; font-size: 14px; width: 0; background: var(--pink); white-space: nowrap; overflow: hidden; transition: width 1.2s var(--ease); }
.v-funnel span:nth-child(2) { background: #e85b93; } .v-funnel span:nth-child(3) { background: #ee7ba8; } .v-funnel span:nth-child(4) { background: #f39cbf; }
.card.in .v-funnel span { width: var(--w); }
.card.in .v-funnel span:nth-child(2) { transition-delay: .15s; } .card.in .v-funnel span:nth-child(3) { transition-delay: .3s; } .card.in .v-funnel span:nth-child(4) { transition-delay: .45s; }
.v-funnel small { color: var(--muted); font-size: 12px; }

.v-batt { flex-direction: column; align-items: center; gap: 18px; padding-bottom: 70px; }
.batt { position: relative; width: 170px; height: 78px; padding: 6px; border-radius: 20px; border: 4px solid var(--ink); }
.batt::after { content: ""; position: absolute; right: -14px; top: 22px; width: 8px; height: 26px; border-radius: 0 6px 6px 0; background: var(--ink); }
.batt i { display: block; height: 100%; width: 100%; border-radius: 11px; background: var(--green); transition: width 2.6s cubic-bezier(.5, 0, .3, 1) .4s, background .4s 2.4s; }
.card.in .batt i { width: 6%; background: #ff3b30; }
.v-batt b { font: 800 44px/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ---------- manifeste : les mots se colorent avec le défilement ---------- */
.manifest { padding: 170px 16px 120px; text-align: center; }
.scrub { max-width: 17ch; margin: 0 auto; font: 800 clamp(40px, 5.8vw, 82px)/1 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.scrub .w { color: #d3d3da; transition: color .3s linear; }
.scrub .w.lit { color: var(--violet); }
.manifest .pill { margin-top: 34px; }

/* ---------- univers ---------- */
.worlds { padding: 60px 0 40px; scroll-margin-top: 90px; }
.deck { margin-top: 40px; overflow-x: auto; scrollbar-width: none; cursor: grab; }
.deck::-webkit-scrollbar { display: none; }
.deck.grabbing { cursor: grabbing; }
.deck-track { display: flex; gap: 30px; width: max-content; padding: 30px max(24px, calc(50vw - 560px)) 40px; }
.phone-card { flex: none; width: 240px; margin: 0; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); user-select: none; -webkit-user-select: none; }
.phone-card:nth-child(odd) { transform: rotate(-3deg); }
.phone-card:nth-child(even) { transform: rotate(2.5deg) translateY(18px); }
.phone-card:hover { transform: rotate(0) translateY(-8px) scale(1.03); }
.phone-card img { width: 100%; border-radius: 36px; box-shadow: 0 0 0 7px #111114, 0 30px 50px -18px rgba(0,0,0,.45); pointer-events: none; }
.phone-card figcaption { margin-top: 24px; color: var(--muted); font-size: 14px; text-align: center; }
.phone-card figcaption b { display: block; color: var(--ink); font: 700 19px/1.2 var(--display); }
.drag-hint { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- un mot ---------- */
.note-sec { padding: 120px 16px 40px; }
.note { position: relative; width: min(860px, 100%); margin: 0 auto; padding: 42px 320px 46px 46px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.note header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.note header b { display: block; font: 700 19px/1.2 var(--display); }
.note header small { color: var(--muted); font-size: 13.5px; }
.note-body p { margin: 0 0 14px; color: var(--ink-2); line-height: 1.65; }
.note-body .sign { margin-top: 22px; display: flex; align-items: baseline; gap: 10px; }
.note-body .sign b { font: 700 18px/1 var(--display); color: var(--ink); background: linear-gradient(var(--violet), var(--violet)) left bottom / 100% 2px no-repeat; padding-bottom: 4px; }
.note-body .sign span { color: var(--muted); font-size: 13px; }
.note-polas { position: absolute; right: -36px; top: -40px; width: 330px; height: 460px; }
.note-polas .pola { width: 200px; height: 330px; }
.note-polas .pola img { object-position: top; }
.note-polas .n1 { right: 40px; top: 0; --r: 5deg; }
.note-polas .n2 { right: 70px; top: 270px; --r: -7deg; width: 230px; height: 170px; }
@media (max-width: 860px) { .note { padding: 32px 24px; } .note-polas { position: relative; right: auto; top: auto; width: 100%; height: 420px; margin-top: 24px; } .note-polas .n1 { right: 12%; } .note-polas .n2 { right: auto; left: 4%; top: 190px; } }

/* ---------- prix ---------- */
.pricing { padding: 130px 16px 40px; scroll-margin-top: 90px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 390px)); justify-content: center; gap: 16px; margin-top: 46px; }
.plan { display: flex; flex-direction: column; padding: 32px; border-radius: var(--r-card); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); --c: var(--violet); }
.plan .label { color: var(--violet); }
.plan h3 { margin: 4px 0 8px; font: 800 56px/1 var(--display); letter-spacing: -.035em; }
.plan h3 span { font-size: 18px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan > p:not(.label) { margin: 0; color: var(--muted); }
.plan .checks { margin-bottom: 28px; }
.plan .pill { margin-top: auto; width: 100%; }
.plan.dark { background: var(--ink); color: #fff; box-shadow: none; --c: #ff8a5c; }
.plan.dark .label { color: #ff8a5c; }
.plan.dark > p:not(.label), .plan.dark .checks { color: rgba(255,255,255,.72); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* ---------- questions ---------- */
.faq { width: min(780px, calc(100% - 32px)); margin: 0 auto; padding: 130px 0 40px; }
.faq .display { margin: 0 0 26px; text-align: left; }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary { position: relative; list-style: none; cursor: pointer; padding: 22px 46px 22px 0; font: 600 19px/1.3 var(--display); letter-spacing: -.01em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #e9e9ee url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M13 8.5v9M8.5 13h9' stroke='%23111114' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 26px; transition: transform .4s var(--ease), background-color .2s; }
.acc details[open] summary::after { transform: rotate(45deg); background-color: var(--violet-soft); }
.acc details > div { overflow: hidden; }
.acc details p { margin: 0; padding: 0 46px 22px 0; color: var(--muted); }

/* ---------- fin ---------- */
.final { padding: 130px 16px 0; }
.final-card { position: relative; overflow: hidden; isolation: isolate; width: min(1280px, 100%); margin: 0 auto; padding: 140px 24px; border-radius: 44px; background: #120f24; text-align: center; color: #fff; }
.final-bg { position: absolute; inset: -14% 0; z-index: -2; background: url("https://images.unsplash.com/photo-1659469377768-4f42f2f091c5?ixlib=rb-4.1.0&auto=format&q=75&fit=crop&w=1800&h=1200") center / cover; }
.final-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 50% 50%, rgba(18, 15, 36, .3), rgba(18, 15, 36, .82)); }
.final-copy > p { margin: 22px 0 0; color: rgba(255,255,255,.78); }
.claim { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.claim-field { display: flex; align-items: center; min-height: 56px; padding: 0 20px; border-radius: 99px; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font-size: 17px; }
.claim-host { color: rgba(255,255,255,.7); }
.claim-field input { width: 150px; border: 0; background: none; color: #fff; font: 600 17px var(--body); outline: none; }
.claim-field input::placeholder { color: rgba(255,255,255,.5); }
.claim .pill { min-height: 56px; padding: 0 28px; font-size: 16.5px; }

/* ---------- pied ---------- */
.foot { width: min(1280px, calc(100% - 32px)); margin: 0 auto; padding: 70px 0 24px; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.foot-brand { margin: 0; max-width: 24em; color: var(--muted); }
.foot nav { display: grid; gap: 8px; align-content: start; font-size: 15px; }
.foot nav b { font: 700 15px/1 var(--display); margin-bottom: 4px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); }
.giant { display: flex; justify-content: center; margin: 40px 0 0; font: 800 clamp(140px, 31vw, 440px)/.82 var(--display); letter-spacing: -.07em; overflow: hidden; padding-bottom: .05em; }
.giant span { display: inline-block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.2, 1.1, .3, 1); }
.giant.in span { transform: none; }
.giant.in span:nth-child(2) { transition-delay: .08s; } .giant.in span:nth-child(3) { transition-delay: .16s; } .giant.in span:nth-child(4) { transition-delay: .24s; }
.giant span:nth-child(4) { color: var(--violet); }
.foot-legal { margin: 18px 0 0; color: var(--muted); font-size: 12.5px; text-align: center; }
@media (max-width: 700px) { .foot-cols { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr; }
  .card { min-height: 0; padding: 28px 24px 0; }
  .hero { padding-top: 120px; }
  .world { border-radius: 30px; height: 175vw; max-height: 860px; margin-top: 44px; }
  .stage { width: 74vw; }
  .promise, .manifest { padding-top: 110px; }
  .v-lock, .v-phone { width: 100%; max-width: 300px; }
}

/* ---------- accessibilité ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv, .js [data-words] .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .js [data-words] .w { color: inherit !important; }
  .js [data-words] .hl .w { color: var(--violet) !important; }
  .intro, .loader { display: none !important; }
  .nav { transform: none !important; transition: none; }
  .float, .live, .wobble, .m-pupils, .m-eyes, .vp-btns i, .vp-btns i::after, .blink { animation: none !important; }
  .v-notifs .vn { opacity: 1; transform: none; transition: none; }
  .giant span { transform: none; transition: none; }
  .v-funnel span { width: var(--w); transition: none; }
  .batt i { transition: none; }
  .scrub .w { color: var(--violet); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .float, .vn, .claim-field { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .float, .vn { background: #fff; }
  .nav { background: #111114; }
}
.note-polas .pola { transform: rotate(var(--r, 0deg)); }

/* au doigt, le téléphone de la landing laisse défiler la page tant qu'on ne l'a pas touché pour l'essayer */
.phone-shield, .phone-done { display: none; }
@media (pointer: coarse) {
  .phone-shield { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 22%; border: 0; border-radius: 13%; background: transparent; touch-action: pan-y; cursor: pointer; }
  .phone-shield span { padding: 11px 18px; border-radius: 99px; background: rgba(17, 17, 20, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font: 600 14.5px/1 var(--body); box-shadow: 0 10px 30px -8px rgba(0,0,0,.5); animation: floaty 3s ease-in-out infinite; }
  .phone.active .phone-shield { display: none; }
  .phone.active .phone-done { display: inline-flex; position: absolute; z-index: 3; left: 50%; top: -50px; transform: translateX(-50%); background: var(--ink); color: #fff; }
  .phone.active { outline: 3px solid var(--violet); outline-offset: 8px; border-radius: 14%; }
}

/* ---------- ajustements responsive ---------- */
.v-lock, .v-phone { margin-top: 36px; }
.vis.v-lock, .vis.v-phone { padding-top: 34px; }
.vis.v-phone { padding-top: 76px; }
.pill { white-space: nowrap; }
.claim { max-width: 100%; }
.claim-field { max-width: 100%; min-width: 0; }
.claim-field input { min-width: 0; flex: 1; }
@media (max-width: 520px) {
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); justify-content: center; }
  .tile { width: auto; }
  .claim { display: grid; width: 100%; }
  .claim-field { width: 100%; }
  .claim-host { flex: none; }
  .final-card { padding: 100px 18px; border-radius: 30px; }
  .card h3 { font-size: 25px; }
  .say { font-size: clamp(34px, 10vw, 44px); }
}
@media (max-width: 380px) {
  .nav-login { display: none; }
  .wordmark { font-size: 23px; }
  .nav { padding-left: 12px; }
}

/* ================= boutons de marque =================
   Le bouton principal est un « glisser pour déverrouiller » : la pastille noire, le texte qui scintille comme sur l'écran
   verrouillé, et la mascotte dans le bouton rond. Au survol elle glisse au bout ; on peut aussi la tirer avec le doigt.
   Le bouton secondaire est une notification : on clique dessus comme on touche une bulle sur l'écran verrouillé. */
.slide { --h: 62px; --pad: 5px; --k: calc(var(--h) - var(--pad) * 2); position: relative; display: inline-flex; align-items: center; height: var(--h); min-width: 290px; padding: 0 30px 0 calc(var(--k) + var(--pad) + 18px); border: 0; border-radius: 999px; background: var(--ink); color: #fff; font: 700 18px/1 var(--display); letter-spacing: -.015em; text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate; box-shadow: 0 18px 34px -16px rgba(17, 17, 20, .55), inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .3s var(--ease), box-shadow .3s; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.slide::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--violet); transform: scaleX(var(--fill, 0)); transform-origin: left; transition: transform .45s var(--ease); }
.slide .knob { position: absolute; left: var(--pad); top: var(--pad); width: var(--k); height: var(--k); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); transform: translateX(var(--x, 0px)); transition: transform .55s cubic-bezier(.3, 1.35, .45, 1); will-change: transform; }
.slide .knob .mascot { width: calc(var(--k) * .42); height: calc(var(--k) * .55); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.slide-txt { position: relative; white-space: nowrap; background: linear-gradient(100deg, rgba(255,255,255,.55) 0 38%, #fff 48%, rgba(255,255,255,.55) 58% 100%) 0 0 / 260% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.6s linear infinite; transition: opacity .3s var(--ease), transform .45s var(--ease); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -60% 0; } }
.slide.go .slide-txt, .slide.dragging .slide-txt { opacity: 0; transform: translateX(14px); }
.slide.go .knob .mascot { transform: rotate(-14deg) scale(1.08); }
.slide.go { --fill: 1; }
.slide.dragging .knob { transition: none; }
.slide:focus-visible { outline-offset: 4px; }
.slide:active { transform: scale(.98); }
.slide-sm { --h: 42px; --pad: 4px; min-width: 0; padding-right: 16px; padding-left: calc(var(--k) + var(--pad) + 10px); font-size: 15px; background: var(--violet); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.slide-sm::before { background: #fff; opacity: .16; }
.slide-sm .slide-txt { background-image: linear-gradient(100deg, rgba(255,255,255,.75) 0 38%, #fff 48%, rgba(255,255,255,.75) 58% 100%); }
.slide-block { display: flex; width: 100%; min-width: 0; }
.final .slide { box-shadow: 0 18px 34px -16px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.18); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.plan.dark .bubble { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.plan.dark .bubble small { color: rgba(255,255,255,.6); }

.bubble { display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 22px 8px 9px; border-radius: 22px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); color: var(--ink); text-decoration: none; text-align: left; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -18px rgba(0,0,0,.35); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s; }
.bubble .fi { width: 44px; height: 44px; border-radius: 11px; }
.bubble .fi::after { inset: 11px 9px 12px; }
.bubble-txt b { display: block; font: 700 17px/1.15 var(--display); letter-spacing: -.01em; }
.bubble-txt small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.bubble:hover { transform: translateY(-3px) scale(1.015); box-shadow: inset 0 0 0 1px #d6d6de, 0 22px 36px -18px rgba(0,0,0,.4); }
.bubble:hover .fi { animation: buzz .5s ease-in-out; }
.bubble:active { transform: scale(.97); }
@keyframes buzz { 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
.bubble-block { display: flex; width: 100%; }
.fi-mail { background: linear-gradient(180deg, #4fb3ff, #1673f0); }
.fi-mail::after { inset: 13px 9px 13px !important; border-radius: 3px; }
.ctas { align-items: center; }
.plan .slide, .plan .bubble { margin-top: auto; }
.claim .slide { --h: 56px; min-width: 0; }
@media (max-width: 520px) { .slide:not(.slide-sm) { min-width: 0; width: 100%; } .ctas { flex-direction: column; align-items: stretch; width: min(340px, 100%); margin-left: auto; margin-right: auto; } .bubble { justify-content: flex-start; } .claim .slide { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .slide-txt { animation: none; background: none; color: #fff; } .slide .knob, .slide::before { transition: none; } .bubble:hover .fi { animation: none; } }
.slide[data-go]::after { content: attr(data-go); position: absolute; left: 26px; top: 50%; color: #fff; font: inherit; white-space: nowrap; opacity: 0; transform: translate(-10px, -50%); transition: opacity .3s var(--ease) .1s, transform .45s var(--ease) .1s; pointer-events: none; }
.slide-sm[data-go]::after { left: 16px; }
.slide.go[data-go]::after { opacity: 1; transform: translate(0, -50%); }

/* ================= l'histoire ================= */
.kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(17,17,20,.08); color: var(--ink-2); font: 600 14px/1 var(--body); }
.kicker.center { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.ch { position: relative; }
.cloud { position: absolute; z-index: 1; pointer-events: none; user-select: none; filter: drop-shadow(0 20px 30px rgba(80, 110, 170, .18)); animation: drift var(--t, 26s) ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(var(--from, -30px)) scaleX(var(--sx, 1)); } to { transform: translateX(var(--to, 40px)) scaleX(var(--sx, 1)); } }

/* chapitre 1 : le ciel et le post */
.sky { position: relative; overflow: hidden; isolation: isolate; margin: 10px; min-height: max(100svh, 1080px); border-radius: 44px; background: #7cb6f2; text-align: center; padding: 140px 16px 120px; }
.sky-bg { position: absolute; inset: -6% 0 -18%; z-index: -1; background: #7cb6f2 url("/site/landing/story/ciel.webp") center bottom / cover no-repeat; will-change: transform; }
.k1 { width: 420px; top: 120px; left: -90px; --t: 24s; }
.k2 { width: 560px; top: 360px; right: -140px; --sx: -1; --t: 31s; --from: 30px; --to: -50px; opacity: .95; }
.k3 { width: 300px; top: 620px; left: 6%; --t: 20s; opacity: .85; }
.post-copy { position: relative; z-index: 2; }
.post-copy .display { max-width: 14ch; }
.post { position: relative; z-index: 3; width: min(470px, 100%); margin: 54px auto 0; padding: 16px 16px 14px; border-radius: 24px; background: #000; color: #e7e9ea; text-align: left; box-shadow: 0 40px 80px -30px rgba(10, 20, 60, .6), 0 0 0 1px rgba(255,255,255,.08); transform: rotate(-2.5deg); }
.js .post.rv { transform: translateY(40px) rotate(4deg) scale(.96); }
.js .post.rv.in { transform: rotate(-2.5deg); transition: opacity .8s var(--ease), transform 1.2s cubic-bezier(.3, 1.3, .5, 1), filter .8s; }
.post header { display: flex; align-items: center; gap: 11px; }
.post header b { display: block; color: #fff; font-size: 15.5px; }
.post header small { color: #71767b; font-size: 14px; }
.post-av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #111114; color: #fff; font: 700 17px/1 var(--display); }
.post-txt { margin: 12px 0; font-size: 18px; color: #e7e9ea; }
.post-card { position: relative; display: block; height: 250px; border-radius: 18px; overflow: hidden; text-decoration: none; background: linear-gradient(180deg, #2a2348, #6b3a7a 55%, #e0839c); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.post-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding-top: 34px; color: #fff; }
.post-lock small { font-size: 13px; opacity: .85; }
.post-lock b { font: 700 62px/1 var(--display); letter-spacing: -.02em; }
.post-lock em { margin-top: 6px; font-style: normal; font-size: 12.5px; opacity: .85; }
.post-link { position: absolute; left: 12px; bottom: 12px; padding: 5px 9px; border-radius: 7px; background: rgba(0,0,0,.6); color: #fff; font-size: 13px; }
.post figcaption { margin-top: 12px; color: #71767b; font-size: 14px; }
.post figcaption b { color: #e7e9ea; font-weight: 600; font-variant-numeric: tabular-nums; }
.cursor { position: absolute; left: 70%; top: 72%; width: 26px; height: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M5 3l15 9.2-6.6 1.5 3.8 7.6-3 1.5-3.8-7.6L5 20z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: point 5s var(--ease) 2.2s infinite; opacity: 0; }
.cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.6); transform: scale(0); opacity: 0; animation: tap 5s ease-out 2.2s infinite; }
@keyframes point { 0% { opacity: 0; transform: translate(90px, 70px); } 15% { opacity: 1; } 40%, 70% { opacity: 1; transform: translate(-60px, -40px); } 46% { transform: translate(-60px, -40px) scale(.85); } 52% { transform: translate(-60px, -40px) scale(1); } 85%, 100% { opacity: 0; transform: translate(-60px, -40px); } }
@keyframes tap { 0%, 44% { transform: scale(0); opacity: 0; } 46% { opacity: .9; transform: scale(.4); } 60% { opacity: 0; transform: scale(1.6); } 100% { opacity: 0; } }
.scroll-cue { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; font-size: 13.5px; font-weight: 600; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.scroll-cue span { width: 2px; height: 40px; border-radius: 2px; background: linear-gradient(rgba(255,255,255,0), #fff); animation: cue 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* chapitre 2 : le téléphone dans son cadre de verre */
.ch-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: center; gap: 40px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 150px 0 60px; }
.ch-copy .display { margin: 0; text-align: left; max-width: 14ch; }
.ch-copy .lede { margin-left: 0; text-align: left; }
.portal { position: relative; width: 100%; aspect-ratio: 1036 / 1518; }
.portal-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 30px 40px rgba(20, 20, 30, .25)); }
.portal-phone { position: absolute; z-index: 1; left: 26.4%; top: 12.6%; width: 47.2%; aspect-ratio: 434 / 906; overflow: hidden; border-radius: 15% / 7.3%; }
.portal-phone .phone { position: absolute; inset: 0; aspect-ratio: auto; filter: none; transform: translateY(104%); transition: transform 1.5s cubic-bezier(.25, 1.15, .4, 1) .35s; }
.portal.in .portal-phone .phone, html:not(.js) .portal-phone .phone { transform: none; }
.js .portal.rv { transform: translateY(40px) scale(.94); }
.js .portal.rv.in { transform: none; }
.portal .f-notif { left: -230px; top: 26%; width: 260px; z-index: 3; }
.portal .f-vault { right: -70px; top: 58%; z-index: 3; }
.portal .phone.active .phone-done { position: fixed; z-index: 70; top: auto; bottom: 24px; left: 50%; }

/* chapitre 3 : perdu dedans */
.ch-lost { padding: 170px 16px 150px; text-align: center; overflow: hidden; }
.ch-lost .scrub { max-width: 16ch; }
.handset { position: absolute; right: max(-40px, calc(50% - 720px)); top: 60px; width: clamp(180px, 22vw, 330px); pointer-events: none; filter: drop-shadow(0 30px 40px rgba(255, 79, 31, .28)); will-change: transform; }
.handset.ringing { animation: handring .9s ease-in-out 2; }
@keyframes handring { 0%, 100% { translate: 0 0; rotate: 0deg; } 15% { rotate: -9deg; } 30% { rotate: 8deg; } 45% { rotate: -6deg; } 60% { rotate: 4deg; } 75% { rotate: -2deg; } }

/* chapitre 4 : l'avion de papier */
.ch-idea { height: 260vh; }
.flight { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.trail { position: absolute; inset: 8% 0; width: 100%; height: 84%; overflow: visible; }
.trail path { fill: none; stroke: rgba(255, 79, 31, .35); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 9999; }
.plane { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(150px, 17vw, 250px); filter: drop-shadow(0 30px 30px rgba(255, 79, 31, .3)); will-change: transform; }
.idea-copy { position: relative; z-index: 3; max-width: 780px; padding: 0 16px; text-align: center; opacity: 0; transform: translateY(30px); filter: blur(8px); transition: opacity .8s var(--ease), transform 1s var(--ease), filter .8s; }
.flight.show .idea-copy, html:not(.js) .idea-copy { opacity: 1; transform: none; filter: none; }

/* chapitre 5 : bigo, le téléphone qui tourne */
.ch-bigo { height: 240vh; }
.turn { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 30px; width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.turn-copy .display { margin: 0; text-align: left; max-width: 12ch; }
.turn-copy .lede { margin-left: 0; text-align: left; }
.turn-stage { position: relative; height: min(78vh, 680px); perspective: 1400px; display: grid; place-items: center; }
.back { height: 100%; width: auto; transform-style: preserve-3d; will-change: transform; filter: drop-shadow(0 40px 40px rgba(40, 30, 90, .25)); }
.turn-shadow { position: absolute; bottom: -10px; left: 50%; width: 46%; height: 24px; margin-left: -23%; border-radius: 50%; background: radial-gradient(rgba(30, 20, 70, .3), rgba(30, 20, 70, 0) 70%); }

/* ce qu'on cache dedans */
.bento-sec { padding: 150px 0 20px; }
.bento-sec .display { margin-bottom: 10px; }

/* fin : le coucher de soleil */
.ch-end { padding: 120px 0 0; }
.sunset { position: relative; overflow: hidden; isolation: isolate; margin: 0 10px; min-height: max(100svh, 900px); border-radius: 44px; background: #b9a8f2; text-align: center; padding: 150px 16px 200px; }
.sunset-bg { position: absolute; inset: -16% 0 -4%; z-index: -1; background: #b9a8f2 url("/site/landing/story/coucher.webp") center bottom / cover no-repeat; will-change: transform; }
.k4 { width: 460px; top: 90px; left: -110px; --t: 28s; opacity: .9; }
.k5 { width: 360px; top: 300px; right: -60px; --sx: -1; --t: 23s; --from: 20px; --to: -40px; opacity: .85; }
.end-copy { position: relative; z-index: 2; }
.end-copy > p:not(.kicker) { margin: 22px auto 0; color: var(--ink-2); }
.ch-end .claim-field { background: rgba(255,255,255,.62); box-shadow: inset 0 0 0 1px rgba(17,17,20,.08), 0 14px 30px -18px rgba(40, 20, 90, .4); }
.ch-end .claim-host { color: var(--muted); }
.ch-end .claim-field input { color: var(--ink); }
.ch-end .claim-field input::placeholder { color: #9a98a8; }
.ch-end .end-note { font-size: 14px; color: var(--muted) !important; }
.sig { font: 600 15px/1.3 var(--display); font-style: italic; color: var(--ink-2) !important; }
.foot-brand a { color: var(--violet); }

@media (max-width: 860px) {
  .sky { margin: 6px; border-radius: 30px; padding-top: 120px; min-height: 0; }
  .k1 { width: 260px; } .k2 { width: 320px; top: 520px; } .k3 { display: none; }
  .post { margin-top: 40px; }
  .ch-phone { grid-template-columns: 1fr; padding-top: 110px; gap: 20px; }
  .ch-copy { text-align: center; } .ch-copy .display, .ch-copy .lede { text-align: center; margin-left: auto; margin-right: auto; }
  .portal { width: min(420px, 100%); margin: 0 auto; }
  .handset { top: 20px; right: -50px; width: 150px; opacity: .9; }
  .ch-idea { height: 220vh; }
  .ch-bigo { height: auto; }
  .turn { position: relative; height: auto; grid-template-columns: 1fr; padding: 110px 0 20px; text-align: center; }
  .turn-copy .display, .turn-copy .lede { text-align: center; margin-left: auto; margin-right: auto; }
  .turn-stage { height: 460px; }
  .sunset { margin: 0 6px; border-radius: 30px; padding: 110px 16px 160px; min-height: 0; }
  .k4 { width: 260px; } .k5 { width: 220px; top: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .cursor, .cursor::after, .scroll-cue span, .handset.ringing { animation: none !important; }
  .cursor { display: none; }
  .ch-idea, .ch-bigo { height: auto; }
  .flight, .turn { position: relative; height: auto; padding: 120px 0; }
  .idea-copy { opacity: 1; transform: none; filter: none; }
  .plane { position: relative; margin: 0 auto 30px; display: block; }
  .trail { display: none; }
  .portal-phone .phone { transform: none; transition: none; }
}
.sky-hills { position: absolute; z-index: 2; left: -3%; right: -3%; bottom: -150px; aspect-ratio: 1998 / 787; background: url("/site/landing/story/collines.webp") center bottom / 100% auto no-repeat; pointer-events: none; will-change: transform; }
@media (max-width: 860px) { .sky-hills { left: -30%; right: -30%; bottom: -70px; } }

/* sur un téléphone, l'écran remplit la fenêtre du cadre de verre, sans boîtier d'iPhone */
@media (pointer: coarse) and (max-width: 600px) {
  .portal-phone { left: 25.4%; top: 10.6%; width: 48.4%; height: 70.9%; aspect-ratio: auto; border-radius: 13% / 6%; }
}
@media (pointer: coarse) { .phone-shield span { white-space: nowrap; padding: 9px 14px; font-size: 13px; } }

/* le vrai post, en capture */
.post-shot { padding: 0; background: #000; overflow: visible; }
.post-shot a { position: relative; display: block; border-radius: 24px; overflow: hidden; }
.post-shot img { display: block; width: 100%; height: auto; }
.post-shot .cursor { left: 26%; top: 74%; }
.post-shot figcaption { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%) rotate(2.5deg); margin: 0; padding: 7px 14px; border-radius: 99px; background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -10px rgba(0,0,0,.3); }

/* ================= direction « cool » : gris clair, encre, orange signal, chrome ================= */
.display { letter-spacing: -.045em; font-weight: 800; }
.say, .scrub { letter-spacing: -.045em; }
.wordmark { font: 900 21px/1 var(--stamp); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; }
.giant { font: 900 clamp(120px, 27vw, 400px)/.8 var(--stamp); font-stretch: 125%; letter-spacing: -.04em; }
.giant span:nth-child(4) { color: var(--violet); }
.v-funnel span { background: #111114; } .v-funnel span:nth-child(2) { background: #3a3a40; } .v-funnel span:nth-child(3) { background: #6a6a72; } .v-funnel span:nth-child(4) { background: var(--violet); }
.slide-sm { background: var(--violet); box-shadow: 0 8px 20px -10px rgba(255, 79, 31, .8), inset 0 1px 0 rgba(255,255,255,.3); }
.kicker { font-weight: 600; letter-spacing: -.01em; }
.kicker.dark { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.trail path { stroke: var(--violet); stroke-width: 2; stroke-dasharray: 0 9999; opacity: .7; }
.portal-frame { filter: drop-shadow(0 30px 40px rgba(20, 20, 30, .28)); }
.handset { filter: drop-shadow(0 30px 40px rgba(20, 20, 30, .25)); }
.plane { filter: drop-shadow(0 30px 30px rgba(20, 20, 30, .25)); }

/* fin : la nuit */
.night { position: relative; overflow: hidden; isolation: isolate; margin: 0 10px; min-height: max(92svh, 820px); border-radius: 44px; background: #0b0b0d; color: #fff; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; padding: 110px max(24px, 6vw); }
.night-glow { position: absolute; z-index: -1; right: -10%; bottom: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 79, 31, .55), rgba(255, 79, 31, .12) 55%, rgba(255, 79, 31, 0)); filter: blur(10px); }
.night::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 1px 1px, rgba(255,255,255,.09) 1px, transparent 1.4px) 0 0 / 22px 22px; mask: linear-gradient(90deg, #000, transparent 70%); -webkit-mask: linear-gradient(90deg, #000, transparent 70%); }
.night-phone { grid-column: 2; grid-row: 1; justify-self: center; width: min(360px, 32vw); filter: drop-shadow(0 50px 60px rgba(0,0,0,.6)); will-change: transform; }
.night .end-copy { grid-column: 1; grid-row: 1; text-align: left; }
.night .display { margin: 0; text-align: left; max-width: 13ch; }
.night .end-copy > p:not(.kicker) { margin: 22px 0 0; color: rgba(255,255,255,.7); }
.night .claim { justify-content: flex-start; }
.night .claim-field { background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.night .claim-host { color: rgba(255,255,255,.55); }
.night .claim-field input { color: #fff; }
.night .claim-field input::placeholder { color: rgba(255,255,255,.35); }
.night .end-note { font-size: 14px; color: rgba(255,255,255,.5) !important; }
.night .sig { color: rgba(255,255,255,.75) !important; font-style: normal; font-weight: 600; }
.slide-hot { background: var(--violet); box-shadow: 0 18px 34px -14px rgba(255, 79, 31, .7), inset 0 1px 0 rgba(255,255,255,.3); }
.slide-hot::before { background: #fff; opacity: .18; }
.slide-hot .slide-txt { background-image: linear-gradient(100deg, rgba(255,255,255,.8) 0 38%, #fff 48%, rgba(255,255,255,.8) 58% 100%); }
.js .display.light .hl .w, .display.light .hl .w { color: var(--violet) !important; }
@media (max-width: 860px) {
  .night { grid-template-columns: 1fr; padding: 90px 22px 70px; margin: 0 6px; border-radius: 30px; min-height: 0; }
  .night-phone { grid-column: 1; grid-row: 2; width: min(240px, 60vw); margin-top: 40px; }
  .night .end-copy, .night .display { text-align: center; margin-left: auto; margin-right: auto; }
  .night .claim { justify-content: center; }
}

/* objets du pack, passés en chrome : un geste chacun, et ils s'arrêtent quand on réduit les animations */
.deco { position: absolute; pointer-events: none; user-select: none; filter: drop-shadow(0 24px 30px rgba(20, 20, 30, .22)); }
.fleur-hero { width: clamp(70px, 8vw, 120px); right: max(4%, calc(50% - 560px)); top: -40px; animation: spin-float 14s ease-in-out infinite; }
@keyframes spin-float { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(14deg); } }
.bulle-portal { z-index: 3; width: clamp(120px, 12vw, 180px); left: -18%; top: 4%; transform-origin: 80% 90%; opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .5s var(--ease) .9s, transform .9s cubic-bezier(.3, 1.5, .5, 1) .9s; }
.portal.in .bulle-portal, html:not(.js) .bulle-portal { opacity: 1; transform: none; animation: bubble 5s ease-in-out 2s infinite; }
@keyframes bubble { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.bento-sec { position: relative; }
.cadenas-bento { width: clamp(90px, 9vw, 140px); right: max(3%, calc(50% - 600px)); top: 70px; animation: settle 1.2s cubic-bezier(.3, 1.6, .5, 1) both; animation-play-state: paused; }
.bento-sec:has(.card.in) .cadenas-bento { animation-play-state: running; }
@keyframes settle { from { transform: translateY(-50px) rotate(-18deg); opacity: 0; } to { transform: rotate(8deg); opacity: 1; } }
.herbe { display: block; width: 100%; max-width: none; height: auto; margin: -40px 0 -20px; pointer-events: none; position: relative; z-index: 0; }
.foot { position: relative; }
.fleur-foot { width: clamp(60px, 7vw, 110px); right: 8%; bottom: 120px; animation: spin-float 16s ease-in-out infinite; }
@media (max-width: 860px) { .bulle-portal { left: -6%; top: -2%; } .cadenas-bento { top: 40px; right: 4%; } .fleur-hero { top: -60px; right: 6%; } }
@media (prefers-reduced-motion: reduce) { .deco, .bulle-portal, .cadenas-bento { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } }