:root{--bg:#0D0A1A;--bg2:#151028;--card:#1A1432;--line:#2A2248;--tx:#F3F0FF;--mut:#A9A2C8;
--violet:#7C5CFF;--mint:#7CF0C9;--salmon:#FF9A8B;--sky:#9CD6FF;--r:22px}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font:400 16px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.serif{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;color:var(--mint)}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
section{padding:clamp(72px,12vw,150px) 0}
h1,h2{font-weight:700;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(2.5rem,9vw,5.2rem)}h2{font-size:clamp(2rem,6vw,3.4rem)}
.lead{color:var(--mut);font-size:clamp(1rem,2.6vw,1.2rem);max-width:46ch;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font:600 1rem "Plus Jakarta Sans",sans-serif;padding:16px 28px;border-radius:99px;background:var(--violet);color:#fff;min-height:52px;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 40px -10px var(--violet)}
.btn.ghost{background:transparent;border:1px solid var(--line)}
header{position:fixed;inset:0 0 auto;z-index:50;backdrop-filter:blur(16px);background:rgba(13,10,26,.7);border-bottom:1px solid rgba(42,34,72,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.cartbtn{position:relative;background:var(--card);border:1px solid var(--line);color:var(--tx);border-radius:99px;padding:10px 18px;font:600 .95rem inherit;cursor:pointer;min-height:44px}
.cartbtn b{background:var(--salmon);color:#2a0f0b;border-radius:99px;padding:2px 8px;margin-left:6px;font-size:.8rem}
/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding-top:110px;position:relative;overflow:hidden}
.aurora{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 40% at 20% 30%,rgba(124,92,255,.45),transparent 70%),radial-gradient(35% 35% at 80% 20%,rgba(156,214,255,.22),transparent 70%),radial-gradient(40% 40% at 70% 80%,rgba(255,154,139,.2),transparent 70%);animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(-4%,5%,0) scale(1.1)}}
.herogrid{display:grid;gap:56px;align-items:center}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none;padding:0}
.chips li{font-size:.9rem;color:var(--mut);border:1px solid var(--line);padding:8px 14px;border-radius:99px}
.chips li::before{content:"✓ ";color:var(--mint)}
.reveal{animation:up .9s cubic-bezier(.2,.8,.2,1) both}.reveal.d2{animation-delay:.15s}.reveal.d3{animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(28px)}}
/* phone */
.phone{width:min(290px,72vw);aspect-ratio:9/19;margin-inline:auto;border-radius:44px;padding:10px;background:linear-gradient(160deg,#3a2f6b,#15102b);box-shadow:0 40px 100px -30px var(--violet),inset 0 0 0 1px #ffffff1f;will-change:transform}
.screen{height:100%;border-radius:34px;overflow:hidden;background:var(--bg2);position:relative;display:flex;flex-direction:column}
.screen::before{content:"";position:absolute;top:8px;left:50%;width:30%;height:20px;background:#000;border-radius:99px;transform:translateX(-50%);z-index:3}
.screen video{width:100%;height:100%;object-fit:cover}
.ui{padding:44px 16px 16px;display:grid;gap:12px}
.ui i{display:block;border-radius:14px;background:var(--card);height:64px}
.ui i:first-child{height:130px;background:linear-gradient(135deg,var(--violet),var(--sky));animation:pulse 3s ease-in-out infinite}
.ui i:nth-child(2){background:linear-gradient(90deg,var(--salmon),transparent)}.ui i:nth-child(3){background:linear-gradient(90deg,var(--mint),transparent);opacity:.8}
.ui u{display:block;height:44px;border-radius:99px;background:var(--violet);text-decoration:none}
@keyframes pulse{50%{filter:brightness(1.25)}}
/* produits */
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;margin-bottom:48px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filters button{background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:99px;padding:10px 18px;font:600 .9rem inherit;cursor:pointer;min-height:44px}
.filters button[aria-pressed=true]{background:var(--tx);color:var(--bg);border-color:var(--tx)}
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-6px);border-color:var(--violet)}
.media{aspect-ratio:1;background:linear-gradient(135deg,#2a2150,#1a1432);display:grid;place-items:center;font:italic 4rem "Instrument Serif",serif;color:var(--violet);position:relative;overflow:hidden}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.info{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat{color:var(--sky);font-size:.85rem}.info h3{font-size:1.15rem}.info p{color:var(--mut);font-size:.95rem;flex:1}
.price{display:flex;align-items:baseline;gap:10px;font-weight:700;font-size:1.2rem;margin:8px 0}
.price s{color:var(--mut);font-weight:400;font-size:.95rem}
/* étapes / showcase */
.steps{display:grid;gap:20px;margin-top:48px;list-style:none;padding:0;counter-reset:s}
.steps li{counter-increment:s;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.steps li::before{content:counter(s);font:italic 2.4rem "Instrument Serif",serif;color:var(--salmon)}
.steps h3{margin:6px 0}.steps p{color:var(--mut)}
details{border-bottom:1px solid var(--line);padding:22px 0}summary{font-weight:600;cursor:pointer;font-size:1.1rem}details p{color:var(--mut);margin-top:12px;max-width:60ch}
footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:.9rem}
/* panier */
.drawer{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:var(--bg2);z-index:100;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;border-left:1px solid var(--line)}
.drawer.open{transform:none}
.dh,.df{padding:20px;display:flex;justify-content:space-between;align-items:center}.df{flex-direction:column;gap:14px;border-top:1px solid var(--line);align-items:stretch}
.items{flex:1;overflow:auto;padding:0 20px}.line{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;gap:10px;align-items:center}.qty button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--tx);cursor:pointer}
.veil{position:fixed;inset:0;background:#0009;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}.veil.on{opacity:1;pointer-events:auto}
.empty{color:var(--mut);padding:40px 0;text-align:center}
@media(min-width:860px){.herogrid{grid-template-columns:1.2fr .8fr}.steps{grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
.pgrid{display:grid;gap:40px;align-items:start}.gal{display:grid;gap:12px}.gal img{border-radius:var(--r);width:100%}
.pinfo h1{font-size:clamp(2rem,6vw,3rem)}.pinfo .price{font-size:1.6rem}.pinfo select{width:100%;padding:14px;border-radius:14px;background:var(--card);color:var(--tx);border:1px solid var(--line);font:inherit;margin:8px 0 16px}
.desc{color:var(--mut);margin:20px 0}.stack{display:grid;gap:12px;margin-top:16px}
.crow{display:grid;grid-template-columns:80px 1fr auto;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.crow img{border-radius:14px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--mint);color:#06241b;padding:14px 22px;border-radius:99px;font-weight:600;z-index:200;transition:transform .4s}.toast.on{transform:translate(-50%,0)}
.pad{padding-top:130px}.pag{display:flex;gap:12px;justify-content:center;margin-top:40px}
@media(min-width:860px){.pgrid{grid-template-columns:1fr 1fr}}