[hidden]{display:none!important}
:root{
  --bg:#0B0D14; --bg2:#10131D; --card:#141824; --line:#232A3B; --text:#F2F4F8; --muted:#9AA3B5;
  --violet:#8B5CF6; --amber:#F2A93B; --teal:#2EC5C5; --rose:#F06292; --blue:#5B8DEF; --green:#4CC38A;
  --head:"Fredoka",system-ui,sans-serif; --body:"Nunito Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);overflow-x:hidden}
a{color:var(--text)}
a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:8px}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
/* ----- annonce et navigation ----- */
.notice{max-width:1120px;margin:14px auto 0;padding:0 22px}
.notice div{display:flex;gap:12px;align-items:center;border:1px solid #5A3A12;background:linear-gradient(90deg,#2A1A08,#1A1208);
  border-radius:12px;padding:10px 14px;font-size:.92rem;color:#F5D7A6}
.notice b{color:#FFE2B0}
.notice button{margin-inline-start:auto;background:none;border:0;color:#F5D7A6;font-size:1.2rem;cursor:pointer}
nav{max-width:1120px;margin:0 auto;padding:16px 22px;display:flex;align-items:center;gap:14px}
.brand{display:flex;gap:10px;align-items:center;font:600 1.2rem var(--head);text-decoration:none;margin-inline-end:auto}
.brand img{width:30px;height:30px}
select{font:600 .9rem var(--body);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:999px;padding:7px 12px}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 .95rem var(--head);border-radius:999px;padding:9px 18px;
  background:var(--text);color:#0B0D14;text-decoration:none;border:0}
.pill svg{width:18px;height:18px;flex:none}
.stores .pill{padding:12px 20px}
.pill.dark{background:var(--card);color:var(--text);border:1px solid var(--line)}
/* ----- halos ----- */
.halo{position:relative;isolation:isolate}
.halo::before{content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;filter:blur(60px);opacity:.7;
  background:radial-gradient(closest-side,var(--h1,var(--violet)),transparent),radial-gradient(closest-side at 70% 60%,var(--h2,var(--amber)),transparent);
  animation:souffle 9s ease-in-out infinite alternate}
@keyframes souffle{to{transform:scale(1.08) translateY(-2%);opacity:.95}}
/* ----- écran de démonstration ----- */
.screen{position:relative;aspect-ratio:16/10;border-radius:18px;border:1px solid #2E3650;overflow:hidden;
  background:radial-gradient(circle at 30% 20%,#3B2F6B,transparent 55%),radial-gradient(circle at 80% 80%,#14495A,transparent 50%),#1A1E33;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.mw{position:absolute;background:#F5F7FB;border-radius:9px;box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.mw::before{border-radius:9px 9px 0 0}
.on{position:absolute;bottom:100%;transform:translateY(3%)}
.taskbar .on{transform:translateY(5%)}
.mw::before{content:"";display:block;height:20px;background:#E1E6EF;border-bottom:1px solid #CBD3E0}
.mw::after{content:"";position:absolute;left:12px;right:12px;top:34px;height:60%;
  background:repeating-linear-gradient(#DCE2EC 0 7px,transparent 7px 18px)}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:7%;background:rgba(12,14,24,.86);backdrop-filter:blur(6px);
  display:flex;gap:1.6%;align-items:center;padding:0 2%}
.taskbar .start{height:52%;aspect-ratio:1;background:
  linear-gradient(#5B8DEF,#5B8DEF) 0 0/45% 45% no-repeat,linear-gradient(#5B8DEF,#5B8DEF) 100% 0/45% 45% no-repeat,
  linear-gradient(#5B8DEF,#5B8DEF) 0 100%/45% 45% no-repeat,linear-gradient(#5B8DEF,#5B8DEF) 100% 100%/45% 45% no-repeat}
.taskbar .app{height:62%;aspect-ratio:1;border-radius:22%;position:relative}
.taskbar .app::after{content:"";position:absolute;inset:28%;border-radius:2px;background:rgba(255,255,255,.85)}
.taskbar .a1{background:#E2643F}.taskbar .a1::after{border-radius:50%}
.taskbar .a2{background:#2E9C6A}.taskbar .a2::after{inset:30% 22%}
.taskbar .a3{background:#F2A93B;box-shadow:0 2px 0 -1px #fff}.taskbar .a3::after{border-radius:50% 50% 40% 40%}
.taskbar .clock{margin-inline-start:auto;font:600 clamp(.45rem,1vw,.8rem) var(--body);color:#C9CFDB}
.cat{position:absolute;bottom:100%;transform:translateY(4%);background:url(assets/marche.png) 0 0/800% 100% no-repeat;aspect-ratio:200/170;
  animation:pas .8s steps(7) infinite,ronde 16s linear infinite}
@keyframes pas{to{background-position:100% 0}}
@keyframes ronde{0%{left:var(--x0);transform:translateY(4%) scaleX(1)}46%{left:var(--x1);transform:translateY(4%) scaleX(1)}
  50%{left:var(--x1);transform:translateY(4%) scaleX(-1)}96%{left:var(--x0);transform:translateY(4%) scaleX(-1)}100%{left:var(--x0);transform:translateY(4%) scaleX(1)}}
.sit{position:absolute}
@media (prefers-reduced-motion:reduce){.cat{animation:none;background:url(assets/assis.png) center/contain no-repeat}.halo::before{animation:none}}
/* ----- ouverture ----- */
.hero{padding:34px 0 10px;text-align:center}
.hero .halo{max-width:860px;margin:0 auto 44px}
h1{font:600 clamp(2.3rem,5.6vw,4rem)/1.05 var(--head);letter-spacing:-.02em;margin:0 auto 16px;max-width:16ch}
.lead{color:var(--muted);font-size:1.18rem;max-width:56ch;margin:0 auto 26px}
.soon{display:block;margin-top:10px;font-size:.88rem;color:var(--muted)}
/* ----- sections ----- */
section.block{padding:92px 0 0}
h2{font:600 clamp(1.8rem,3.6vw,2.6rem)/1.15 var(--head);letter-spacing:-.01em;margin:0 0 12px;text-align:center}
.sub{color:var(--muted);text-align:center;max-width:60ch;margin:0 auto 46px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.steps h3{font:600 1.15rem var(--head);margin:14px 0 6px}
.steps p{color:var(--muted);margin:0;font-size:.98rem}
.ico{width:46px;height:46px;border-radius:12px;display:inline-grid;place-items:center;background:var(--card);border:1px solid var(--line)}
.ico svg{width:22px;height:22px}
.feature{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;margin-top:110px}
.feature.rev{grid-template-columns:.85fr 1.15fr}
.feature.rev .visual{order:2}
.feature h3{font:600 clamp(1.6rem,3vw,2.2rem)/1.15 var(--head);margin:16px 0 10px}
.feature p{color:var(--muted);margin:0;max-width:44ch}
.visual .screen{aspect-ratio:16/9}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px}
.card p{margin:14px 0 0;font:600 1.05rem/1.4 var(--head)}
.card svg{width:26px;height:26px}
.c-v{color:var(--violet)}.c-a{color:var(--amber)}.c-t{color:var(--teal)}.c-r{color:var(--rose)}.c-b{color:var(--blue)}.c-g{color:var(--green)}
/* ----- tarifs ----- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto}
.price{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px}
.price h3{font:600 1.2rem var(--head);margin:0;color:var(--muted)}
.amount{font:600 2.8rem/1.1 var(--head);margin:8px 0 4px}
.amount small{font:500 1rem var(--body);color:var(--muted)}
.price ul{margin:16px 0 0;padding-inline-start:20px}
.price li{margin:6px 0}
.price .note{color:var(--muted);font-size:.92rem;margin:16px 0 0}
.price.full{position:relative;border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,
  linear-gradient(135deg,var(--amber),var(--violet),var(--teal)) border-box;box-shadow:0 0 60px -20px rgba(139,92,246,.6)}
/* ----- FAQ ----- */
.faq{max-width:760px;margin:0 auto}
details{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;padding:0 18px}
summary{cursor:pointer;list-style:none;padding:16px 0;font:600 1rem var(--head);display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--muted);font-size:1.3rem;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--muted);margin:0 0 16px}
/* ----- appel final, pied de page ----- */
.final{text-align:center;padding:110px 0 30px}
.final h2{font-size:clamp(2rem,4.4vw,3.2rem)}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
footer{border-top:1px solid var(--line);margin-top:90px;padding:46px 0 30px;color:var(--muted);font-size:.95rem}
.cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.cols h4{font:600 .95rem var(--head);color:var(--text);margin:0 0 10px}
.cols a{display:block;color:var(--muted);text-decoration:none;margin:5px 0}
.cols a:hover{color:var(--text)}
.copy{text-align:center;margin-top:34px;font-size:.88rem}
/* ----- pages légales ----- */
.legal{max-width:760px;margin:0 auto;padding:20px 22px 0}
.legal h1{font-size:2.4rem;text-align:start;margin:40px 0 20px;max-width:none}
.legal h2{font-size:1.25rem;text-align:start;margin:30px 0 8px}
.legal p{color:#C9CFDB;max-width:72ch}
.legal a{color:var(--amber)}
.fallback{background:#2A1A08;border:1px solid #5A3A12;color:#F5D7A6;border-radius:10px;padding:8px 12px;font-size:.92rem}
@media (max-width:860px){
  .steps,.cards,.prices,.cols{grid-template-columns:1fr}
  .feature,.feature.rev{grid-template-columns:1fr;gap:28px;text-align:center}
  .feature.rev .visual{order:0}
  .feature p{margin:0 auto}
}
@media (max-width:540px){nav .pill{display:none}nav{gap:10px}.notice div{font-size:.85rem}}
/* ----- page « Merci » ----- */
.thanks{max-width:720px;margin:0 auto;padding:30px 22px 0;text-align:center}
.thanks h1{font-size:clamp(2rem,5vw,3rem)}
.order{display:inline-block;margin:6px 0 26px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.95rem}
.order b{color:var(--text);font-weight:600}
.keybox{background:var(--card);border-radius:20px;padding:26px;margin:0 auto 34px;text-align:center;position:relative;
  border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,var(--amber),var(--violet),var(--teal)) border-box;
  box-shadow:0 0 70px -24px rgba(139,92,246,.7)}
.keybox h2{font-size:1rem;color:var(--muted);margin:0 0 12px}
.key{font:600 clamp(1rem,3.2vw,1.45rem)/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;
  word-break:break-all;background:#0E111B;border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 16px;user-select:all}
.keybox .nokey{color:var(--muted);margin:0}
.thanks ol{list-style:none;padding:0;margin:0 auto 18px;max-width:520px;text-align:start;counter-reset:etape}
.thanks ol li{counter-increment:etape;display:flex;gap:14px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin:10px 0}
.thanks ol li::before{content:counter(etape);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font:600 .95rem var(--head);background:#1E2436;color:var(--amber)}
.thanks .note{color:var(--muted);font-size:.95rem;max-width:56ch;margin:0 auto}
.thanks h2{font-size:1.5rem;margin:46px 0 16px}