@font-face{font-family:Fell;src:url(fonts/im_fell_sc.ttf) format("truetype");font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/alegreya_sans_regular.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Alegreya;src:url(fonts/alegreya_sans_bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Mono;src:url(fonts/spline_sans_mono.ttf) format("truetype");font-display:swap}

:root{--bg:#11181b;--bg2:#161f23;--panel:#1c262b;--line:#2e3a40;--ink:#f3e7c9;--muted:#a9b3b1;--brass:#d4a64a;--brass2:#f0c766;
  --green:#6cc59b;--coral:#e8907a;--blue:#86a9de;--violet:#9d7fd8;--parch:#ecdfbd;--dark:#2a2016}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.55 Alegreya,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--brass2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.fell{font-family:Fell,Georgia,serif}
.mono{font-family:Mono,ui-monospace,monospace}

/* ---------- barre du haut ---------- */
header.top{position:sticky;top:0;z-index:20;background:rgba(17,24,27,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(46,58,64,.6)}
header.top .wrap{display:flex;align-items:center;gap:14px;height:62px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brass);font:1.55rem Fell,serif;letter-spacing:.03em}
.logo img{width:36px;height:36px;border-radius:10px}
header.top nav{margin-left:auto;display:flex;gap:20px;align-items:center}
header.top nav a.lnk{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;opacity:.85}
header.top nav a.lnk:hover{opacity:1;color:var(--brass2)}
.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.9rem}
.langs summary::-webkit-details-marker{display:none}
.langs div{position:absolute;right:0;top:120%;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;min-width:140px;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.langs div a{display:block;padding:6px 12px;border-radius:9px;text-decoration:none;color:var(--ink)}
.langs div a:hover,.langs div a.on{background:rgba(212,166,74,.15);color:var(--brass2)}
@media(max-width:720px){header.top nav a.lnk{display:none}}

/* ---------- badge Play ---------- */
.badge{display:inline-flex;align-items:center;gap:12px;background:#000;color:#fff;border:1.5px solid #5d6468;border-radius:14px;padding:9px 20px 9px 14px;text-decoration:none;position:relative;overflow:hidden}
.badge svg{width:30px;height:30px;flex:none}
.badge small{display:block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#d6d6d6;line-height:1.1}
.badge b{display:block;font-size:1.32rem;line-height:1.1;letter-spacing:.01em}
.badge::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.6s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.soon{display:inline-flex;align-items:center;gap:8px;font:700 .78rem/1 Mono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--brass2);background:rgba(212,166,74,.12);border:1px solid rgba(212,166,74,.35);border-radius:999px;padding:7px 13px}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(108,197,155,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(108,197,155,0)}100%{box-shadow:0 0 0 0 rgba(108,197,155,0)}}

/* ---------- héros ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 70px;background:radial-gradient(900px 600px at 75% 30%,#33264c 0%,rgba(51,38,76,0) 70%),radial-gradient(700px 500px at 10% 90%,rgba(108,197,155,.10),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;position:relative;z-index:2}
.hero h1{font:400 clamp(2.5rem,6vw,4.4rem)/1.04 Fell,Georgia,serif;margin:18px 0 18px;letter-spacing:.01em}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,#f7d98a,#d4a64a 40%,#fff0c2 55%,#d4a64a 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gold 5s linear infinite}
@keyframes gold{to{background-position:-250% 0}}
.hero p.lead{font-size:1.22rem;color:#d9d3c2;max-width:34em;margin:0 0 28px}
.cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ghost{color:var(--ink);text-decoration:none;font-weight:700;border:1px solid var(--line);border-radius:14px;padding:13px 20px}
.ghost:hover{border-color:var(--brass)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips span{font-size:.9rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.bubbles span{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.35),rgba(134,169,222,.12) 60%,transparent 70%);animation:rise linear infinite;z-index:1}
@keyframes rise{to{transform:translateY(-900px) translateX(30px);opacity:0}}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;text-align:center}.hero p.lead{margin-left:auto;margin-right:auto}.cta,.chips{justify-content:center}}

/* ---------- téléphone Android ---------- */
.phone{--w:300px;width:var(--w);height:calc(var(--w)*2.16);border-radius:44px;background:linear-gradient(145deg,#3a4247,#1b2124);padding:4px;position:relative;margin:0 auto;
  box-shadow:0 50px 90px -20px rgba(0,0,0,.75),0 0 0 1px #4a5358 inset}
.phone::before,.phone::after{content:"";position:absolute;right:-3px;width:4px;border-radius:0 3px 3px 0;background:#2c3337}
.phone::before{top:23%;height:9%}
.phone::after{top:36%;height:15%}
.bezel{width:100%;height:100%;border-radius:40px;background:#050708;padding:9px}
.screen{width:100%;height:100%;border-radius:32px;overflow:hidden;position:relative;background:var(--bg)}
.sbar{position:absolute;top:0;left:0;right:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 20px 0 22px;font:600 11px Alegreya,sans-serif;color:#e8e8e8;z-index:5;background:var(--bg)}
.sbar .cam{position:absolute;left:50%;top:8px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#000;box-shadow:0 0 0 1.5px #1d2326}
.sbar .cam::after{content:"";position:absolute;left:3px;top:3px;width:4px;height:4px;border-radius:50%;background:#1d2a44}
.sbar svg{height:10px;fill:#e8e8e8}
.sbar .ic{display:flex;gap:5px;align-items:center}
.gbar{position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--bg);z-index:5}
.gbar::after{content:"";position:absolute;left:50%;bottom:6px;width:96px;height:4px;margin-left:-48px;border-radius:4px;background:rgba(255,255,255,.55)}
.view{position:absolute;top:28px;bottom:18px;left:0;right:0;overflow:hidden}
.glow{position:absolute;inset:-12% -30%;background:radial-gradient(closest-side,rgba(212,166,74,.32),transparent);filter:blur(10px);z-index:-1;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.08);opacity:.75}}
.stage{position:relative;z-index:1;display:flex;justify-content:center}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(.6deg)}}

/* ---------- démo jouable dans le téléphone ---------- */
.demo{position:absolute;inset:0;font-family:Alegreya,sans-serif;color:var(--ink)}
.demo .scr{position:absolute;inset:0;padding:12px 11px;transition:opacity .45s,transform .45s}
.demo .scr.off{opacity:0;transform:translateX(30px);pointer-events:none}
.d-top{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;gap:10px;align-items:center}
.flask{width:38px;height:46px;flex:none}
.d-top .st{font:15px Fell,serif;letter-spacing:.02em}
.d-top .sc{font:700 20px Mono,monospace;color:var(--brass)}
.d-top .sc small{font-size:13px;color:var(--muted)}
.d-meta{font:10px Mono,monospace;color:var(--muted);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
.cd{height:122px;border-radius:10px;background:var(--parch);border:2.5px solid #c9b98f;position:relative;overflow:hidden;color:var(--dark);
  transform:translateY(260px) rotate(8deg);opacity:0;transition:transform .5s cubic-bezier(.2,1.3,.4,1),opacity .3s,border-color .2s,box-shadow .2s}
.cd.in{transform:none;opacity:1}
.cd.sel{transform:translateY(-8px) rotate(-1.5deg);border-color:var(--brass);box-shadow:0 10px 18px rgba(0,0,0,.45),0 0 0 2px var(--brass2)}
.cd .art{height:46px;display:flex;align-items:center;justify-content:center;font-size:24px;background:repeating-linear-gradient(120deg,rgba(255,255,255,.18) 0 2px,transparent 2px 12px),var(--c,#86a9de)}
.cd .pt{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#2c2c2c;color:#f3e7c9;font:700 9px/20px Mono,monospace;text-align:center}
.cd .tt{font:700 10.5px/1.15 Alegreya,sans-serif;padding:6px 6px 0}
.cd .er{position:absolute;left:6px;bottom:6px;font-size:9px;color:#7b6c52}
.d-hint{font-size:11px;color:#d8d0bb;margin:16px 2px 8px;min-height:15px;opacity:0;transition:opacity .3s}
.d-hint.on{opacity:1}
.btn{border-radius:10px;padding:10px;text-align:center;font-weight:700;font-size:14px;transition:transform .15s,filter .15s}
.btn.gold{background:var(--brass);color:#2a2016}
.btn.dark{background:var(--panel);border:1px solid var(--line);color:var(--ink)}
.btn.press{transform:scale(.95);filter:brightness(1.15)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}
.finger{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.28);border:2px solid rgba(255,255,255,.75);z-index:9;left:50%;top:110%;
  transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),transform .12s;pointer-events:none}
.finger.tap{transform:scale(.7);background:rgba(255,255,255,.5)}
/* écran réponse */
.d-head{display:flex;gap:8px;align-items:center;font:12px Mono,monospace;color:var(--muted)}
.d-head .flask{width:22px;height:28px}
.eyebrow{font:700 10px Mono,monospace;letter-spacing:.12em;color:var(--brass);text-transform:uppercase;margin:10px 0 8px}
.big{border-radius:14px;border:3px solid var(--brass);overflow:hidden;background:var(--parch);color:var(--dark)}
.big .art{height:70px;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;background:repeating-linear-gradient(120deg,rgba(255,255,255,.2) 0 2px,transparent 2px 16px),var(--blue)}
.big .art b{position:absolute;left:8px;top:6px;font:700 9px Mono,monospace}
.big .art i{position:absolute;right:6px;top:6px;font:700 10px Mono,monospace;font-style:normal;background:#2c2c2c;color:#f3e7c9;border-radius:999px;padding:2px 7px}
.big h4{font:400 17px/1.15 Fell,serif;margin:10px 12px 2px}
.big p{margin:0 12px 10px;font-size:12px}
.field{margin-top:10px;border:1.5px solid var(--brass);border-radius:10px;padding:8px 10px;font:600 17px Mono,monospace;min-height:40px;display:flex;align-items:center;background:#0e1416}
.field .ph{color:#5d6a6c;font:12px Alegreya,sans-serif}
.field .car{display:inline-block;width:2px;height:18px;background:var(--brass2);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ok{margin-top:10px;border:1.5px solid var(--green);border-radius:12px;padding:8px 10px;display:flex;gap:9px;align-items:center;opacity:0;transform:translateY(8px);transition:.3s;background:var(--panel)}
.ok.on{opacity:1;transform:none}
.ok b{color:var(--green);font-size:14px}
.ok span{font-size:11px;color:#d8d0bb;display:block}
.ok .pl{margin-left:auto;font:700 16px Mono,monospace;color:var(--brass2)}
.keys{position:absolute;left:0;right:0;bottom:0;background:#1d2427;padding:7px 6px 9px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.keys span{background:#323b3f;border-radius:7px;text-align:center;font:500 16px/33px Alegreya,sans-serif;color:#eee;transition:background .1s}
.keys span.k{background:#7a8a90}
.keys span.go{background:var(--green);color:#11181b}
/* écran chaudron */
.caul{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pot{position:relative;width:180px;height:150px}
.pot .bowl{position:absolute;left:10px;right:10px;top:30px;height:90px;border-radius:0 0 90px 90px;background:var(--blue);box-shadow:inset 0 -14px 0 rgba(0,0,0,.12)}
.pot .rim{position:absolute;left:4px;right:4px;top:22px;height:16px;border-radius:50%;border:4px solid #3a4a52;background:#86a9de}
.pot .fire{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.pot .fire i{width:14px;height:26px;border-radius:50% 50% 30% 30%/70% 70% 30% 30%;background:linear-gradient(#f4b38f,#e8907a);animation:flick .5s ease-in-out infinite alternate}
.pot .fire i:nth-child(2n){animation-delay:.2s;height:32px}
@keyframes flick{to{transform:scaleY(.75)}}
.pot .bub{position:absolute;border-radius:50%;background:#a8c3ea;animation:pop 1.6s ease-in infinite}
@keyframes pop{0%{transform:translateY(0) scale(.6);opacity:1}100%{transform:translateY(-70px) scale(1.2);opacity:0}}
.mult{font:700 30px Mono,monospace;display:flex;gap:16px;align-items:baseline}
.mult .x{color:var(--brass)}
.gain{font:700 52px/1 Mono,monospace;color:var(--brass);transform:scale(0);transition:transform .45s cubic-bezier(.2,1.6,.4,1)}
.gain.on{transform:scale(1)}
.combo{font-size:12px;color:#d8d0bb}
.gauge{width:200px;height:10px;border-radius:9px;background:#26323a;overflow:hidden;margin-top:6px}
.gauge i{display:block;height:100%;width:0;background:var(--green);border-radius:9px;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.gnum{font:700 13px Mono,monospace;color:var(--green);width:200px;text-align:right}
.won{font:400 24px Fell,serif;color:var(--green);opacity:0;transform:scale(.6);transition:.4s cubic-bezier(.2,1.6,.4,1)}
.won.on{opacity:1;transform:none}
.coin{position:absolute;top:-12px;width:9px;height:12px;border-radius:50%;background:var(--brass2);animation:fall linear forwards}
@keyframes fall{to{transform:translateY(640px) rotate(540deg)}}

/* ---------- galerie de captures ---------- */
.shots .phone{--w:270px}
.shots .view img{width:100%;height:100%;object-fit:cover;object-position:top}
.slides{position:absolute;inset:0}
.slides img{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .7s,transform 1.2s}
.slides img.on{opacity:1;transform:none}
.gal{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center}
.caps{list-style:none;margin:0;padding:0;counter-reset:c}
.caps li{display:flex;gap:16px;align-items:center;padding:13px 16px;border-radius:16px;cursor:pointer;color:var(--muted);transition:.25s;border:1px solid transparent}
.caps li b{font:400 1.3rem Fell,serif}
.caps li .n{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:700 .85rem Mono,monospace}
.caps li.on{color:var(--ink);background:var(--panel);border-color:var(--line)}
.caps li.on .n{background:var(--brass);color:var(--dark);border-color:var(--brass)}
.caps li .bar{height:3px;border-radius:3px;background:var(--line);margin-top:6px;overflow:hidden;display:none}
.caps li.on .bar{display:block}
.caps li.on .bar i{display:block;height:100%;background:var(--brass);width:0;animation:fillbar 4.5s linear forwards}
@keyframes fillbar{to{width:100%}}
@media(max-width:820px){.gal{grid-template-columns:1fr;gap:28px}.caps li{padding:9px 12px}.caps li b{font-size:1.1rem}}

/* ---------- sections ---------- */
section{padding:84px 0;position:relative;overflow:hidden}
section.alt{background:var(--bg2);border-top:1px solid #1c2529;border-bottom:1px solid #1c2529}
.kicker{font:700 .78rem Mono,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
h2{font:400 clamp(2rem,4.5vw,3rem)/1.1 Fell,Georgia,serif;margin:.25em 0 .4em}
.sub{color:var(--muted);font-size:1.12rem;max-width:40em;margin:0 0 40px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* chiffres */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:-34px;position:relative;z-index:3}
.stats div{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 10px;text-align:center}
.stats b{display:block;font:700 2.1rem/1 Mono,monospace;color:var(--brass)}
.stats span{color:var(--muted);font-size:.95rem}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* étapes */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:22px;position:relative;overflow:hidden}
.step .num{position:absolute;right:18px;bottom:-6px;font:400 4.2rem Fell,serif;color:rgba(212,166,74,.13)}
.step h3{font:400 1.45rem Fell,serif;margin:14px 0 6px}
.step p{margin:0;color:var(--muted)}
.ill{height:130px;border-radius:14px;background:#121a1e;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
/* illustration 1 : cartes qui se lèvent */
.mini{width:52px;height:72px;border-radius:8px;background:var(--parch);border:2px solid #c9b98f;margin:0 -6px;position:relative;box-shadow:0 6px 12px rgba(0,0,0,.4)}
.mini::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;border-radius:5px 5px 0 0;background:var(--c,var(--blue))}
.mini.a{transform:rotate(-12deg);animation:pick 3s ease-in-out infinite}
.mini.b{transform:rotate(-4deg);animation:pick 3s .25s ease-in-out infinite}
.mini.c{transform:rotate(4deg)}
.mini.d{transform:rotate(12deg);animation:pick 3s .5s ease-in-out infinite}
@keyframes pick{30%,70%{translate:0 -16px;border-color:var(--brass2);box-shadow:0 0 0 2px var(--brass),0 12px 20px rgba(0,0,0,.5)}}
/* illustration 2 : saisie */
.typer{font:600 1.5rem Mono,monospace;border:2px solid var(--brass);border-radius:12px;padding:8px 16px;min-width:150px;background:#0e1416}
.typer::after{content:"";display:inline-block;width:2px;height:1.1em;vertical-align:-3px;background:var(--brass2);animation:blink 1s steps(1) infinite}
.tick{position:absolute;right:22px;top:22px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#11181b;display:grid;place-items:center;font-weight:700;transform:scale(0);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.tick.on{transform:scale(1)}
/* illustration 3 : combo */
.cx{font:700 3rem Mono,monospace;color:var(--brass);animation:combo 2.4s ease-in-out infinite}
@keyframes combo{0%,100%{transform:scale(.9)}50%{transform:scale(1.15);text-shadow:0 0 24px rgba(240,199,102,.7)}}
.spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--brass2);animation:spark 2.4s ease-out infinite}
@keyframes spark{0%,40%{transform:translate(0,0);opacity:0}50%{opacity:1}100%{transform:translate(var(--x),var(--y));opacity:0}}

/* thèmes : cartes qui se retournent */
.themes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;perspective:1100px}
.tcard{height:168px;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.5,1);cursor:pointer}
.tcard.flip{transform:rotateY(180deg)}
.tcard>div{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.tcard .fr{background:var(--parch);color:var(--dark);border:3px solid #c9b98f}
.tcard .fr .art{height:70px;display:flex;align-items:center;justify-content:center;font-size:2.4rem;background:repeating-linear-gradient(120deg,rgba(255,255,255,.2) 0 2px,transparent 2px 14px),var(--c)}
.tcard .fr h3{font:400 1.3rem Fell,serif;margin:8px 14px 0}
.tcard .fr p{margin:2px 14px;font-size:.95rem;line-height:1.25}
.tcard .bk{transform:rotateY(180deg);background:linear-gradient(150deg,#22303a,#1a2328);border:2px solid var(--green);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px}
.tcard .bk small{color:var(--green);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:.75rem}
.tcard .bk b{font:400 1.9rem Fell,serif;color:var(--ink);margin-top:4px}
.tcard .bk span{color:var(--brass2);font:700 .9rem Mono,monospace;margin-top:6px}
@media(max-width:820px){.themes{grid-template-columns:repeat(2,1fr)}.tcard{height:160px}}
@media(max-width:420px){.tcard .fr h3{font-size:1.1rem}.tcard .fr p{font-size:.85rem}}

/* modes */
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode{border-radius:22px;padding:22px 20px;border:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;transition:transform .3s}
.mode:hover{transform:translateY(-6px)}
.mode .em{font-size:2.4rem;display:inline-block;animation:bob 3s ease-in-out infinite}
.mode:nth-child(2) .em{animation-delay:.4s}.mode:nth-child(3) .em{animation-delay:.8s}.mode:nth-child(4) .em{animation-delay:1.2s}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
.mode h3{font:400 1.4rem Fell,serif;margin:10px 0 6px}
.mode p{margin:0;color:#cfc8b6;font-size:.98rem}
.mode.daily{background:linear-gradient(160deg,#e3b75a,#b8862f);color:var(--dark);border:0}
.mode.daily p{color:#3a2c18}
.mode.surv{background:linear-gradient(160deg,#3b2730,#251a20);border-color:#5b3a44}
.mode.great{background:linear-gradient(160deg,#4b3270,#2b2140);border-color:#6a4f96}
.mode .play{position:absolute;right:16px;top:18px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.18);animation:pulse 2s ease-in-out infinite}
.mode .play::before{content:"";border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px;opacity:.85}
@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,255,255,.06)}}
@media(max-width:980px){.modes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.modes{grid-template-columns:1fr}}

/* mémoire */
.memory{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.track{position:relative;height:150px;margin-top:10px}
.track .line{position:absolute;left:4%;right:4%;top:90px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--coral),var(--brass),var(--green))}
.track .day{position:absolute;top:80px;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--bg);border:3px solid var(--brass)}
.track .day span{position:absolute;top:30px;left:50%;transform:translateX(-50%);white-space:nowrap;font:700 .8rem Mono,monospace;color:var(--muted)}
.track .hop{position:absolute;top:8px;width:46px;height:62px;margin-left:-23px;border-radius:8px;background:var(--parch);border:2px solid var(--brass);box-shadow:0 8px 16px rgba(0,0,0,.4);animation:hop 7s ease-in-out infinite}
.track .hop::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:var(--blue);border-radius:5px 5px 0 0}
.track .hop::after{content:"✦✦✦";position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:9px;color:var(--brass)}
@keyframes hop{0%,8%{left:4%}18%,24%{left:27%}34%,40%{left:50%}52%,58%{left:73%}72%,90%{left:96%}100%{left:4%}}
.facts{list-style:none;padding:0;margin:0}
.facts li{display:flex;gap:14px;margin:0 0 16px;align-items:flex-start}
.facts li i{font-style:normal;font-size:1.5rem;flex:none;width:44px;height:44px;border-radius:12px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center}
.facts b{display:block;font-size:1.08rem}
.facts span{color:var(--muted)}
@media(max-width:820px){.memory{grid-template-columns:1fr}}

/* promesses */
.promise{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.promise div{border:1px solid var(--line);border-radius:18px;padding:20px;text-align:center;background:var(--panel)}
.promise i{font-style:normal;font-size:2rem;display:block}
.promise b{display:block;margin-top:6px;font-size:1.08rem}
.promise span{color:var(--muted);font-size:.93rem}
@media(max-width:820px){.promise{grid-template-columns:repeat(2,1fr)}}

/* appel final */
.final{text-align:center;padding:100px 0 90px;background:radial-gradient(600px 380px at 50% 40%,rgba(212,166,74,.18),transparent 70%)}
.alki{display:block;width:120px;height:120px;margin:0 auto 10px;animation:float 4s ease-in-out infinite}
.final h2{margin-bottom:.2em}
.final .sub{margin:0 auto 28px}
footer{border-top:1px solid #1c2529;padding:28px 0 40px;color:var(--muted);font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
footer a{color:var(--muted)}
footer .sp{margin-left:auto}

/* politique de confidentialité */
.doc{max-width:760px;margin:0 auto;padding:40px 20px 60px}
.doc h1{font:400 2.6rem Fell,serif;color:var(--brass);margin:.2em 0}
.doc h2{font-size:1.5rem;color:var(--brass);margin:1.4em 0 .3em}
.doc .card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:6px 24px 20px;margin:20px 0}
.muted{color:var(--muted);font-size:.95rem}

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