/* Layout: pearl light theme — floating glass nav, mesh-gradient hero with 3D rotating product ring, text marquee, stats, about mosaic, logo wall, tilt product grid, gradient CTA, dark footer */
:root{
  --bg:#f6f5fb; --ink:#16132e; --ink-2:#3a3658; --muted:#6d6a88; --line:#e7e4f2; --card:#ffffff;
  --violet:#2457f5; --aqua:#16b3c6; --rose:#ff6f9f; --gold:#f2b84b; --deep:#100d26;--logo:#0b2c63;--word:#ffffff;--hdr:rgba(255,255,255,.86);--glass:rgba(255,255,255,.55);--mesh-o:.75;
  --grad:linear-gradient(120deg,var(--violet),var(--aqua) 50%,var(--rose));
  --f-display:"Unbounded",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.2,.75,.2,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 var(--f-body);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.02em}
section{padding-block:110px}
.kicker{display:inline-flex;align-items:center;gap:10px;font:700 12px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.kicker i{width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 4px rgba(36,87,245,.12)}
.sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:52px}
.sec-head h2{font-size:clamp(30px,4.2vw,52px);font-weight:700}
.sec-head p{margin:0;color:var(--muted);font-size:18px}
.gtext{background:var(--grad);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gmove 6s linear infinite}
@keyframes gmove{to{background-position:200% 0}}
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font:700 15px var(--f-body);text-decoration:none;border-radius:999px;padding:16px 28px;border:0;cursor:pointer;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s}
.btn:hover{transform:translateY(-3px)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:0 14px 30px rgba(22,19,46,.25)}
.btn-dark::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .4s}
.btn-dark:hover::before{opacity:1}
.btn>*{position:relative}
.btn-line{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px}

/* nav */
.navbar{position:fixed;top:14px;left:0;right:0;z-index:60;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px))}
.nav{max-width:1220px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.66);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 40px rgba(22,19,46,.08);border-radius:999px;padding:10px 10px 10px 22px;transition:transform .5s var(--ease)}
.navbar.hide .nav{transform:translateY(-130%)}
.logo img{height:40px;width:auto}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:block;text-decoration:none;font-weight:600;font-size:14.5px;color:var(--ink-2);padding:10px 16px;border-radius:999px;transition:background .25s,color .25s}
.menu a:hover{background:rgba(108,76,245,.08);color:var(--violet)}
.nav .btn{padding:12px 22px;font-size:14px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger i{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}
@media (max-width:900px){
  .menu{position:absolute;top:calc(100% + 10px);left:14px;right:14px;flex-direction:column;background:var(--card);border-radius:22px;padding:10px;box-shadow:0 20px 50px rgba(22,19,46,.15);display:none}
  .menu.open{display:flex}.burger{display:block}.nav>.btn{display:none}
}

/* hero */
.hero{position:relative;min-height:min(100vh,960px);display:grid;align-items:center;padding-block:140px 80px;overflow:hidden;isolation:isolate}
.mesh{position:absolute;inset:-10%;z-index:-2;filter:blur(80px) saturate(1.2);opacity:.75}
.mesh span{position:absolute;border-radius:50%;animation:drift 18s ease-in-out infinite alternate}
.mesh .m1{width:46vw;height:46vw;left:46%;top:-8%;background:#c9b8ff}
.mesh .m2{width:36vw;height:36vw;left:70%;top:35%;background:#a6ecf3;animation-delay:-6s}
.mesh .m3{width:30vw;height:30vw;left:30%;top:55%;background:#ffc6d9;animation-delay:-12s}
@keyframes drift{to{transform:translate(-6vw,4vw) scale(1.15)}}
.spot{position:absolute;inset:0;z-index:-1;background:radial-gradient(500px circle at var(--mx,70%) var(--my,40%),rgba(255,255,255,.7),transparent 60%);pointer-events:none}
.bigword{position:absolute;bottom:-3vw;left:50%;transform:translateX(-50%);z-index:-1;font:800 clamp(90px,19vw,300px)/1 var(--f-display);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(108,76,245,.14);white-space:nowrap;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(40px,5.8vw,78px);font-weight:800}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.hero h1 .w>span{display:inline-block;animation:wordUp 1s var(--ease) both}
@keyframes wordUp{from{transform:translateY(105%)}}
.hero p.lead{font-size:19px;color:var(--ink-2);max-width:520px;margin:26px 0 36px;animation:fadeUp 1s .5s var(--ease) both}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;animation:fadeUp 1s .65s var(--ease) both}
.hero .kicker{margin-bottom:24px;animation:fadeUp .9s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}}
.trust{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap;animation:fadeUp 1s .8s var(--ease) both}
.trust div{display:grid}
.trust b{font:700 26px var(--f-display);font-variant-numeric:tabular-nums}
.trust span{color:var(--muted);font-size:13.5px;font-weight:600}

/* 3D ring */
.scene{position:relative;height:560px;perspective:1300px;animation:fadeUp 1.2s .3s var(--ease) both}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.ring{position:absolute;left:50%;top:46%;width:0;height:0;transform-style:preserve-3d;animation:orbit 36s linear infinite}
.scene:hover .ring{animation-play-state:paused}
@keyframes orbit{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
.item{position:absolute;width:190px;height:250px;left:-95px;top:-125px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.75));box-shadow:0 30px 60px rgba(22,19,46,.14),inset 0 0 0 1px rgba(255,255,255,.9);display:grid;place-items:center;padding:20px;backface-visibility:hidden}
.item img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.item small{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-weight:700;font-size:11.5px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.pedestal{position:absolute;left:50%;bottom:20px;transform:translateX(-50%) rotateX(72deg);width:440px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(108,76,245,.25),transparent 65%)}
@media (max-width:980px){.hero-grid{grid-template-columns:1fr}.scene{height:440px}.item{width:150px;height:200px;left:-75px;top:-100px}}

/* marquee */
.mq{overflow:hidden;padding-block:26px;background:var(--deep);color:#fff;transform:rotate(-1.5deg);margin:10px -20px 0;box-shadow:0 20px 50px rgba(16,13,38,.2)}
.mq .tr{display:flex;width:max-content;animation:slide 30s linear infinite;gap:0}
.mq span{font:700 clamp(24px,3vw,40px) var(--f-display);white-space:nowrap;padding-right:40px;display:inline-flex;align-items:center;gap:40px}
.mq span em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes slide{to{transform:translateX(-50%)}}

/* reveal */
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.wait{opacity:0;transform:translateY(50px)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{background:var(--card);border-radius:26px;padding:30px;border:1px solid var(--line);position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:var(--grad);opacity:.12}
.stat b{display:block;font:800 clamp(38px,4vw,54px)/1 var(--f-display);font-variant-numeric:tabular-nums;margin-bottom:10px}
.stat span{color:var(--muted);font-weight:600}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.stats{grid-template-columns:1fr}}

/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
@media (max-width:940px){.about{grid-template-columns:1fr}}
.mosaic{position:relative;height:560px}
.mosaic .card{position:absolute;background:var(--card);border-radius:28px;box-shadow:0 30px 60px rgba(22,19,46,.12);display:grid;place-items:center;padding:24px;transition:transform .6s var(--ease)}
.mosaic .card img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mosaic .c1{left:0;top:40px;width:56%;height:62%;background:linear-gradient(160deg,var(--card),#efeaff)}
.mosaic .c2{right:0;top:0;width:40%;height:46%;background:linear-gradient(160deg,var(--card),#e2f8fa)}
.mosaic .c3{right:6%;bottom:0;width:48%;height:44%;background:linear-gradient(160deg,var(--card),#ffe9f0)}
.mosaic:hover .c1{transform:translate(-8px,-8px) rotate(-2deg)}
.mosaic:hover .c2{transform:translate(8px,-6px) rotate(3deg)}
.mosaic:hover .c3{transform:translate(6px,8px) rotate(-2deg)}
.mosaic .badge{position:absolute;left:8%;bottom:6%;background:var(--ink);color:#fff;border-radius:20px;padding:16px 20px;z-index:3;animation:bob 6s ease-in-out infinite}
.mosaic .badge b{display:block;font:800 22px var(--f-display)}
@keyframes bob{50%{transform:translateY(-10px)}}
@media (max-width:560px){.mosaic{height:420px}}
.about p{color:var(--ink-2);font-size:17px;max-width:58ch}
.pills{display:grid;gap:12px;margin-top:30px}
.pill{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 20px;background:var(--card);border-radius:20px;border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s}
.pill:hover{transform:translateX(8px);box-shadow:0 18px 40px rgba(22,19,46,.08)}
.pill .ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--grad);color:#fff}
.pill h3{font-size:16px;font-weight:600;margin-bottom:2px}
.pill p{margin:0;font-size:15px;color:var(--muted)}

/* brands */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.wall button{all:unset;cursor:pointer;height:120px;border-radius:24px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;padding:18px 22px;position:relative;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.wall button::before{content:"";position:absolute;inset:0;background:var(--grad);opacity:0;transition:opacity .45s}
.wall button::after{content:"";position:absolute;inset:2px;border-radius:22px;background:var(--card)}
.wall button:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(108,76,245,.18);border-color:transparent}
.wall button:hover::before{opacity:1}
.wall img{position:relative;z-index:1;max-height:62px;max-width:100%;width:auto;object-fit:contain;transition:transform .45s var(--ease)}
.wall button:hover img{transform:scale(1.08)}
.wall .wm{position:relative;z-index:1;font:700 18px var(--f-display);letter-spacing:.06em;color:#7a5a3a}

.bcards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media (max-width:1060px){.bcards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.bcards{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:420px){.bcards{grid-template-columns:1fr}}
.bc{all:unset;cursor:pointer;display:grid;grid-template-rows:auto 1fr;background:var(--card);border-radius:28px;overflow:hidden;border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.bc:hover{transform:translateY(-10px);box-shadow:0 34px 60px rgba(22,19,46,.14)}
.bc:focus-visible{outline:2px solid var(--violet)}
.bc .pic{aspect-ratio:1/1;display:grid;place-items:center;padding:34px;background:radial-gradient(110% 80% at 50% 100%,var(--tint),var(--card) 72%);position:relative;overflow:hidden}
.bc .pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
.bc:hover .pic img{transform:scale(1.1) rotate(-3deg)}
.bc .tx{padding:20px 22px 24px;display:grid;gap:10px;align-content:start}
.bc .lg{height:34px;display:flex;align-items:center}
.bc .lg img{max-height:34px;width:auto}
.bc .lg b{font:700 17px var(--f-display);letter-spacing:.08em;color:#7a5a3a}
.bc p{margin:0;color:var(--muted);font-size:14.5px}
.bc .more-l{font-weight:700;font-size:14px;color:var(--violet);display:inline-flex;gap:6px;transition:gap .3s}
.bc:hover .more-l{gap:12px}
.bc.wide{grid-column:span 1}
.partners{margin-top:40px;display:grid;gap:16px}
.partners>span{font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.partners .wall{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.partners .wall{grid-template-columns:repeat(2,1fr)}}
.univ{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.univ{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.univ{grid-template-columns:1fr}}
.uv{all:unset;cursor:pointer;position:relative;border-radius:30px;overflow:hidden;min-height:440px;display:grid;align-content:end;padding:26px;color:#fff;background:var(--bgc);isolation:isolate;transition:transform .5s var(--ease)}
.uv:hover{transform:translateY(-8px)}
.uv:focus-visible{outline:2px solid var(--violet)}
.uv .ph{position:absolute;inset:0 0 34% 0;z-index:-1;display:grid;place-items:center;padding:30px}
.uv .ph::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.95);transition:transform .7s var(--ease)}
.uv:hover .ph::before{transform:scale(1.12)}
.uv .ph img{position:relative;max-height:100%;width:62%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s var(--ease)}
.uv:hover .ph img{transform:translateY(-10px) rotate(-3deg)}
.uv h3{font-size:22px;font-weight:700}
.uv p{margin:8px 0 0;font-size:14px;opacity:.85}
.uv .bl{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.uv .bl span{font-size:12px;font-weight:700;background:rgba(255,255,255,.18);border-radius:999px;padding:4px 10px}
/* products */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.chip{font:700 14px var(--f-body);border-radius:999px;border:0;background:var(--card);color:var(--ink-2);padding:11px 20px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:all .3s var(--ease)}
.chip:hover{color:var(--violet);box-shadow:inset 0 0 0 1.5px var(--violet)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:0 10px 24px rgba(22,19,46,.2)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media (max-width:1060px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}}
@media (max-width:420px){.grid{grid-template-columns:1fr}}
.pc{position:relative;border-radius:28px;background:var(--card);border:1px solid var(--line);overflow:hidden;display:grid;grid-template-rows:auto 1fr;transform-style:preserve-3d;transition:transform .25s ease-out,box-shadow .4s;animation:pop .6s var(--ease) both;will-change:transform}
@keyframes pop{from{opacity:0;transform:translateY(30px) scale(.96)}}
.pc:hover{box-shadow:0 30px 60px rgba(22,19,46,.14)}
.pc .im{position:relative;aspect-ratio:4/5;display:grid;place-items:center;padding:30px 26px 18px;background:radial-gradient(120% 80% at 50% 100%,var(--tint,#efeaff),var(--card) 70%)}
.pc .im::after{content:"";position:absolute;bottom:14px;left:22%;right:22%;height:18px;border-radius:50%;background:rgba(22,19,46,.12);filter:blur(10px);transition:transform .5s var(--ease),opacity .5s}
.pc .im img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s var(--ease)}
.pc:hover .im img{transform:translateY(-12px) scale(1.05) rotate(-2deg)}
.pc:hover .im::after{transform:scaleX(.8);opacity:.6}
.pc .bd{padding:18px 20px 20px;display:grid;gap:4px;align-content:start}
.pc .bd small{font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet)}
.pc .bd h3{font:600 16px/1.3 var(--f-display);letter-spacing:-.01em}
.pc .bd em{font-style:normal;color:var(--muted);font-size:13.5px}
.pc .go{position:absolute;top:14px;right:14px;z-index:2;width:40px;height:40px;border-radius:50%;background:var(--card);display:grid;place-items:center;text-decoration:none;color:var(--ink);box-shadow:0 8px 20px rgba(22,19,46,.12);transform:scale(.6);opacity:0;transition:all .4s var(--ease)}
.pc:hover .go,.pc:focus-within .go{transform:none;opacity:1}
.pc .go:hover{background:var(--ink);color:#fff}
@media (hover:none){.pc .go{transform:none;opacity:1}}
.more{margin-top:36px;display:flex;justify-content:center}

/* cta */
.cta-band{position:relative;overflow:hidden;border-radius:36px;padding:70px 56px;background:var(--deep);color:#fff;display:grid;grid-template-columns:1.3fr auto;gap:30px;align-items:center}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.6;animation:drift 12s ease-in-out infinite alternate}
.cta-band::before{width:420px;height:420px;background:var(--violet);right:-100px;top:-180px}
.cta-band::after{width:340px;height:340px;background:var(--aqua);left:-120px;bottom:-200px;animation-delay:-5s}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,3.6vw,46px);font-weight:700}
.cta-band p{color:#c9c5e6;margin:14px 0 0;font-size:17px;max-width:52ch}
.cta-band .btn{background:var(--card);color:var(--ink)}
@media (max-width:760px){.cta-band{grid-template-columns:1fr;padding:44px 26px}}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:40px}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.info{display:grid;gap:12px;align-content:start}
.info div{background:var(--card);border-radius:22px;border:1px solid var(--line);padding:20px 22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;transition:transform .35s var(--ease)}
.info div:hover{transform:translateX(6px)}
.info i{width:48px;height:48px;border-radius:16px;background:#f0ecff;display:grid;place-items:center;font-style:normal;font-size:20px}
.info small{display:block;color:var(--muted);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.info span{font-weight:700}
form{background:var(--card);border-radius:30px;padding:34px;display:grid;gap:16px;border:1px solid var(--line);box-shadow:0 30px 60px rgba(22,19,46,.06)}
form .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){form .two{grid-template-columns:1fr}form{padding:24px}}
label{font-weight:700;font-size:14px;display:grid;gap:8px}
input,select,textarea{font:inherit;border:1.5px solid var(--line);border-radius:14px;padding:13px 15px;color:var(--ink);background:var(--bg);width:100%;transition:border-color .25s,box-shadow .25s,background .25s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);background:var(--card);box-shadow:0 0 0 5px rgba(108,76,245,.12)}
textarea{resize:vertical;min-height:120px}

footer{background:var(--deep);color:#a9a5c8;padding-block:70px 30px;font-size:14.5px;margin-top:20px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot img{height:50px;width:auto;margin-bottom:16px}
.foot h4{font:600 15px var(--f-display);color:#fff;margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{text-decoration:none;transition:color .2s}.foot a:hover{color:#fff}
.copy{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

.wa{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;width:60px;height:60px;border-radius:50%;background:#22b35e;display:grid;place-items:center;box-shadow:0 14px 30px rgba(34,179,94,.4);transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa::before{content:"";position:absolute;inset:0;border-radius:50%;background:#22b35e;z-index:-1;animation:ping 2.2s infinite}
@keyframes ping{to{transform:scale(1.8);opacity:0}}
.bar{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad);z-index:80}


.item img,.bc .pic img,.mosaic .card img,.pc .im img,.uv .ph img{position:absolute;top:var(--pt,22px);bottom:var(--pb,22px);left:var(--px,22px);right:var(--px,22px);width:calc(100% - 2*var(--px,22px));height:calc(100% - var(--pt,22px) - var(--pb,22px));margin:auto}
.item{--pt:20px;--pb:34px;--px:20px}
.bc .pic{--pt:30px;--pb:26px;--px:30px}
.pc .im{--pt:30px;--pb:26px;--px:26px}
.uv .ph{--pt:40px;--pb:20px;--px:22%}
.uv .ph img{width:56%;}
.mosaic .card{overflow:hidden}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.js .rv.wait{opacity:1;transform:none}}

/* ===== ajouts multi-pages ===== */
.menu a.on{background:var(--ink);color:#fff}
.bc{text-decoration:none;color:inherit}
.bc .pic.grad{background:var(--grad)}
.bc .pic.grad span{font:800 54px var(--f-display);color:#fff}
.partners .wall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:760px){.partners .wall{grid-template-columns:repeat(2,1fr)}}
.wl{height:120px;border-radius:24px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;padding:20px 26px;transition:transform .45s var(--ease),box-shadow .45s}
.wl:hover{transform:translateY(-8px);box-shadow:0 24px 50px rgba(36,87,245,.15)}
.wl img{max-height:64px;max-width:100%;width:auto;object-fit:contain}
.uv{text-decoration:none}

.phero{position:relative;overflow:hidden;isolation:isolate;padding-block:170px 70px}
.phero .mesh{opacity:.55}
.phero h1{font-size:clamp(36px,5.4vw,70px);font-weight:800;max-width:16ch}
.phero p{font-size:19px;color:var(--ink-2);max-width:620px;margin:22px 0 0}
.crumb{display:flex;gap:8px;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:22px}
.crumb a{text-decoration:none;color:var(--violet)}

.toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:14px}
.searchbox{position:relative;flex:1 1 260px;max-width:420px}
.searchbox input{padding-left:46px;border-radius:999px;background:var(--card)}
.searchbox svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
#count{font-weight:700;color:var(--muted);font-size:14px}
.chip.sm{padding:8px 16px;font-size:13px}
#cats{margin-bottom:30px}
#filters{margin-bottom:12px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:60px 0}

.brow{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;padding-block:60px;border-bottom:1px solid var(--line);scroll-margin-top:100px}
.brow.rev .bvis{order:2}
.bvis{position:relative;aspect-ratio:1/1;border-radius:36px;background:radial-gradient(100% 80% at 50% 100%,var(--tint),var(--card) 70%);border:1px solid var(--line);overflow:hidden}
.bvis img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;mix-blend-mode:multiply;transition:transform .8s var(--ease)}
.brow:hover .bvis img{transform:scale(1.06) rotate(-2deg)}
.btx .lg{height:56px;display:flex;align-items:center;margin-bottom:18px}
.btx .lg img{max-height:56px;width:auto}
.btx .lg b{font:700 26px var(--f-display);letter-spacing:.08em;color:#7a5a3a}
.btx .big{font:600 clamp(20px,2.2vw,26px)/1.3 var(--f-display);margin:0 0 14px;letter-spacing:-.01em}
.btx p{color:var(--ink-2);max-width:56ch}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0 30px}
.mini div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px;display:grid;gap:6px;text-align:center}
.mini img{width:100%;aspect-ratio:3/4;object-fit:contain;mix-blend-mode:multiply}
.mini span{font-size:11.5px;font-weight:700;line-height:1.25;color:var(--ink-2)}
@media (max-width:900px){.brow{grid-template-columns:1fr;gap:30px}.brow.rev .bvis{order:0}.bvis{max-width:420px}}
@media (max-width:480px){.mini{grid-template-columns:repeat(2,1fr)}}

.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.val{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px;display:grid;gap:12px;align-content:start;transition:transform .4s var(--ease),box-shadow .4s}
.val:hover{transform:translateY(-8px);box-shadow:0 26px 50px rgba(22,19,46,.1)}
.val .ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--grad);color:#fff}
.val h3{font-size:20px;font-weight:700}
.val p{margin:0;color:var(--muted)}
@media (max-width:860px){.values{grid-template-columns:1fr}}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding:28px;border-radius:26px;background:var(--card);border:1px solid var(--line)}
.step::before{counter-increment:s;content:"0" counter(s);font:800 40px var(--f-display);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:10px}
.step h3{font-size:17px;font-weight:700;margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}
.info a{text-decoration:none}

/* ===== logo animé ===== */
.logo svg{height:44px;width:auto;display:block;overflow:visible}
.logo svg path{fill:var(--logo)}
.logo .dot{transform-box:fill-box;transform-origin:50% 100%}
.logo:hover .dot{animation:dotHop .9s var(--ease)}
.logo .y-swoosh{transition:fill .3s}
@keyframes dotHop{0%{transform:none}30%{transform:translateY(-38%) scale(1.05)}55%{transform:translateY(0) scale(1.12,.86)}75%{transform:translateY(-12%)}100%{transform:none}}

.splash{position:fixed;inset:0;z-index:200;background:var(--card);display:grid;place-items:center;overflow:hidden;transition:clip-path 1s cubic-bezier(.76,0,.24,1)}
.splash::before{content:"";position:absolute;inset:-20%;background:radial-gradient(40% 40% at 30% 30%,#dfe7ff,transparent 70%),radial-gradient(35% 35% at 75% 70%,#d6f6fa,transparent 70%),radial-gradient(30% 30% at 70% 25%,#ffe1ec,transparent 70%);animation:drift 6s ease-in-out infinite alternate}
.splash.out{clip-path:circle(0% at 50% 50%)}
.splash .sl{position:relative;width:min(560px,78vw)}
.splash svg{width:100%;height:auto;overflow:visible;display:block}
.splash path{fill:var(--logo);fill-opacity:0;stroke:var(--logo);stroke-width:3;stroke-linejoin:round}
.splash .big,.splash .y{animation:draw 1.1s var(--ease) forwards,fillIn .6s .85s ease forwards;animation-delay:var(--d),calc(var(--d) + .75s)}
.splash .dot{fill-opacity:1;stroke:none;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(-900%);animation:dotDrop 1s cubic-bezier(.3,1.6,.5,1) 1.25s forwards}
.splash .line{fill-opacity:1;stroke:none;transform-box:fill-box;transform:scaleX(0);transform-origin:var(--o) 50%;animation:lineGrow .7s var(--ease) 1.6s forwards}
.splash .small{fill-opacity:1;stroke:none;opacity:0;transform-box:fill-box;transform:translateY(40%);animation:rise2 .6s var(--ease) forwards;animation-delay:var(--d)}
.splash .shine{position:absolute;inset:-10% -20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);transform:translateX(-120%);animation:sweep 1s ease 2.05s forwards;mix-blend-mode:screen;pointer-events:none}
.splash .tag{position:absolute;left:0;right:0;bottom:-58px;text-align:center;font:700 12px var(--f-body);letter-spacing:.32em;text-transform:uppercase;color:var(--muted);opacity:0;animation:fadeUp .8s var(--ease) 2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillIn{to{fill-opacity:1;stroke-opacity:0}}
@keyframes dotDrop{0%{transform:translateY(-900%)}70%{transform:translateY(0) scale(1.15,.82)}100%{transform:none}}
@keyframes lineGrow{to{transform:scaleX(1)}}
@keyframes rise2{to{opacity:1;transform:none}}
@keyframes sweep{to{transform:translateX(120%)}}
.foot .flogo svg{height:54px;width:auto;margin-bottom:16px}
.foot .flogo path{fill:#fff}

/* ===== intro : présentation ===== */
.splash .sl{transition:transform 1s var(--ease)}
.splash.up .sl{transform:translateY(-22vh) scale(.62)}
@media (max-height:620px){.splash.up .sl{transform:translateY(-26vh) scale(.5)}}
.splash .tag{display:none}
.scenes{position:absolute;left:0;right:0;top:50%;transform:translateY(-14%);margin-top:30px;display:grid;place-items:center;padding:0 24px;pointer-events:none}
.isc{grid-area:1/1;text-align:center;display:grid;gap:22px;justify-items:center;align-content:start;opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s}
.splash.on1 .s1,.splash.on2 .s2,.splash.on3 .s3,.splash.on4 .s4{opacity:1;transform:none;filter:none}
.isc .eyeb{margin:0;font:800 12px var(--f-body);letter-spacing:.32em;text-transform:uppercase;color:var(--violet)}
.isc h2{font:700 clamp(24px,3.6vw,44px)/1.15 var(--f-display);color:var(--ink);letter-spacing:-.02em}
.isc .lgs{display:flex;gap:clamp(24px,6vw,80px);align-items:center;justify-content:center;flex-wrap:wrap}
.isc .lgs img{height:clamp(56px,9vw,100px);width:auto;max-width:42vw;object-fit:contain;opacity:0;transform:scale(.6) translateY(20px);transition:opacity .6s var(--ease),transform .8s cubic-bezier(.3,1.6,.5,1)}
.splash.on2 .s2 .lgs img,.splash.on3 .s3 .lgs img{opacity:1;transform:none}
.isc .lgs img:nth-child(2){transition-delay:.35s}
.sp-ui{position:absolute;left:0;right:0;bottom:calc(26px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px));z-index:3}
.sp-ui button{font:700 13px var(--f-body);border:0;cursor:pointer;border-radius:999px;padding:11px 18px;display:inline-flex;align-items:center;gap:10px;transition:background .25s,color .25s,transform .25s}
.sp-ui button:hover{transform:translateY(-2px)}
.sp-skip{background:var(--ink);color:#fff}
.sp-skip span{font-size:18px;line-height:0}
.sp-sound{background:rgba(255,255,255,.85);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);backdrop-filter:blur(8px)}
.eq{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.eq i{width:3px;height:4px;border-radius:2px;background:var(--violet)}
.sp-sound.playing .eq i{animation:eq .9s ease-in-out infinite}
.sp-sound.playing .eq i:nth-child(2){animation-delay:-.3s}.sp-sound.playing .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{50%{height:14px}}
.sp-prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(22,19,46,.06)}
.sp-prog i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;animation:prog var(--total,12s) linear forwards}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.replay{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}

/* ===== en-tête professionnel ===== */
.navbar,.nav{all:unset}
.hdr{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,box-shadow .4s,backdrop-filter .4s}
.hdr-top{height:38px;overflow:hidden;background:var(--deep);color:#c9c5e6;font-size:13px;font-weight:600;transition:height .4s var(--ease)}
.hdr-top .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.hdr-top .l{display:flex;gap:22px;align-items:center}
.hdr-top .l span{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.hdr-top .l svg{opacity:.7}
.hdr-top .r{letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;color:#9f9bc4}
@media (max-width:760px){.hdr-top .r,.hdr-top .l span:nth-child(2){display:none}}
.hdr-main{height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px;transition:height .4s var(--ease)}
.hdr.scrolled{background:var(--hdr);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 1px 0 var(--line),0 12px 30px rgba(22,19,46,.06)}
.hdr.scrolled .hdr-top{height:0}
.hdr.scrolled .hdr-main{height:66px}
.hdr .logo svg{height:46px;transition:height .4s var(--ease)}
.hdr.scrolled .logo svg{height:38px}
.menu{position:relative;display:flex;gap:2px;list-style:none;margin:0;padding:6px;border-radius:999px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--line)}
.hdr.scrolled .menu{background:var(--glass)}
.menu li{position:relative;z-index:1}
.menu a{display:block;text-decoration:none;font-weight:600;font-size:14.5px;color:var(--ink-2);padding:9px 18px;border-radius:999px;transition:color .3s}
.menu a:hover{background:none;color:var(--ink)}
.menu a.on{background:none;color:#fff}
.menu .ind{position:absolute;z-index:0;top:6px;height:calc(100% - 12px);border-radius:999px;background:var(--ink);box-shadow:0 8px 18px rgba(22,19,46,.2);transition:left .45s var(--ease),width .45s var(--ease),background .3s;pointer-events:none}
.menu.hov .ind{background:#e7e4f2;box-shadow:none}
.menu.hov a.on{color:var(--ink-2)}
.menu.hov a.cur{color:var(--ink)}
.actions{display:flex;align-items:center;gap:10px}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line);background:var(--card);transition:transform .3s var(--ease),box-shadow .3s}
.icon-btn:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px var(--violet);color:var(--violet)}
.actions .btn{padding:12px 22px;font-size:14px}
.burger{display:none;background:var(--card);border:0;width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);cursor:pointer;place-items:center}
.burger i{display:block;width:18px;height:2px;background:var(--ink);margin:4px auto;border-radius:2px;transition:transform .3s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  .burger{display:grid}
  .actions .btn,.actions .icon-btn{display:none}
  .menu{position:absolute;top:100%;left:16px;right:16px;flex-direction:column;background:var(--card)!important;border-radius:22px;padding:10px;box-shadow:0 24px 50px rgba(22,19,46,.15);display:none}
  .menu.open{display:flex}
  .menu .ind{display:none}
  .menu a{padding:14px 16px}
  .menu a.on{background:var(--ink);color:#fff}
}
.hero{padding-top:170px}
.phero{padding-top:200px}
/* titre : dégradé net sur les mots */
.gtext{background:linear-gradient(100deg,var(--violet),#3b8cf0 55%,var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent;animation:none}
.hero h1 .w>.gtext{background-size:auto}
.bigword{opacity:.6}

/* ===== visionneuse 3D produit ===== */
.pc{cursor:zoom-in}
.pc .v3d{position:absolute;left:14px;top:14px;z-index:2;font:800 10.5px var(--f-body);letter-spacing:.12em;color:var(--violet);background:var(--card);border-radius:999px;padding:6px 10px;box-shadow:0 6px 16px rgba(22,19,46,.08);display:inline-flex;gap:6px;align-items:center}
.pv{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;background:rgba(16,13,38,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .4s}
.pv.in{opacity:1}
.pv-box{position:relative;width:min(1100px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--bg);border-radius:32px;display:grid;grid-template-columns:1.25fr 1fr;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:translateY(30px) scale(.97);transition:transform .5s var(--ease)}
.pv.in .pv-box{transform:none}
@media (max-width:860px){.pv-box{grid-template-columns:1fr}}
.pv-stage{position:relative;min-height:520px;overflow:hidden;border-radius:32px 0 0 32px;background:radial-gradient(80% 60% at 50% 40%,var(--card),var(--tint,#ecebf7));cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;perspective:1100px}
.pv-stage:active{cursor:grabbing}
@media (max-width:860px){.pv-stage{min-height:420px;border-radius:32px 32px 0 0}}
.pv-floor{position:absolute;left:50%;bottom:9%;width:46%;height:26px;margin-left:-23%;border-radius:50%;background:radial-gradient(closest-side,rgba(22,19,46,.32),transparent);filter:blur(4px);transition:transform .08s linear}
.pv-ring{position:absolute;left:50%;bottom:6%;width:62%;aspect-ratio:1;margin-left:-31%;border-radius:50%;border:1.5px dashed rgba(36,87,245,.22);transform:rotateX(78deg);animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotateX(78deg) rotateZ(360deg)}}
.pv-obj{position:absolute;inset:8% 18% 13%;transform-style:preserve-3d;will-change:transform}
.pv-obj img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;pointer-events:none;-webkit-user-drag:none}
.pv-obj .layer{filter:brightness(.55)}
.pv-sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:linear-gradient(var(--la,100deg),transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);background-size:220% 100%;background-position:var(--lp,50%) 0;-webkit-mask:var(--mask);mask:var(--mask);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.pv-hint{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:inline-flex;gap:8px;align-items:center;font:700 12.5px var(--f-body);color:var(--ink-2);background:rgba(255,255,255,.9);border-radius:999px;padding:8px 14px;box-shadow:0 8px 20px rgba(22,19,46,.08);transition:opacity .4s;white-space:nowrap}
.pv-hint svg{animation:hand 1.6s ease-in-out infinite}
@keyframes hand{50%{transform:translateX(8px)}}
.pv-stage.used .pv-hint{opacity:0}
.pv-tools{position:absolute;right:16px;top:16px;display:grid;gap:8px}
.pv-tools button{width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font:700 18px var(--f-body);cursor:pointer;box-shadow:0 8px 20px rgba(22,19,46,.1);display:grid;place-items:center}
.pv-tools button:hover{background:var(--ink);color:#fff}
.pv-info{padding:44px 40px;display:grid;gap:16px;align-content:center}
@media (max-width:560px){.pv-info{padding:28px 24px}}
.pv-info .b{font:800 12px var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--violet)}
.pv-info h3{font:700 clamp(26px,3vw,36px)/1.1 var(--f-display);letter-spacing:-.02em}
.pv-info .meta{display:flex;flex-wrap:wrap;gap:8px}
.pv-info .meta span{font-size:13px;font-weight:700;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;color:var(--ink-2)}
.pv-info p{margin:0;color:var(--muted)}
.pv-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:6px}
.pv-thumbs button{all:unset;cursor:pointer;position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--card);border-radius:14px;border:1.5px solid var(--line);display:block;transition:border-color .25s,transform .25s}
.pv-thumbs button:hover{transform:translateY(-3px)}
.pv-thumbs button[aria-current="true"]{border-color:var(--violet)}
.pv-thumbs img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;mix-blend-mode:multiply}
.pv-close{position:absolute;right:16px;top:16px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:20px;cursor:pointer}

.pv-box .pv-tools{right:16px;top:16px}
@media (max-width:860px){.pv-box .pv-tools{top:70px}}

.pv-obj{filter:drop-shadow(0 0 0 transparent)}

/* ===== anneau : produits flottants, sans fond ===== */
.scene{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.scene.grab{cursor:grabbing}
.scene .ring{animation:none;top:44%}
.item{background:none;box-shadow:none;width:200px;height:300px;left:-100px;top:-150px;padding:0;display:block;backface-visibility:visible;transition:opacity .2s}
.item .it{position:absolute;inset:0 0 54px;}
.item img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;filter:saturate(1.05) contrast(1.03);-webkit-user-drag:none;transition:transform .5s var(--ease)}
.item:hover img{transform:translateY(-10px) scale(1.04)}
.item .sh{position:absolute;left:22%;right:22%;bottom:38px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,19,46,.28),transparent);filter:blur(3px)}
.item small{bottom:6px;font-size:11px;color:var(--ink-2);background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border-radius:999px;padding:5px 12px;left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}
.scene .pedestal{width:520px;height:520px;bottom:-20px;background:radial-gradient(circle,rgba(36,87,245,.18),transparent 62%)}
.scene .tilt{transform:none!important}
.scene::after{content:"⟲  Glissez pour faire tourner";position:absolute;left:50%;bottom:4px;transform:translateX(-50%);font:700 12px var(--f-body);color:var(--muted);background:rgba(255,255,255,.75);backdrop-filter:blur(6px);padding:7px 14px;border-radius:999px;white-space:nowrap;pointer-events:none}
@media (max-width:980px){.item{width:160px;height:240px;left:-80px;top:-120px}.item .it{inset:0 0 46px}}

.isc .lgs img.wide{height:clamp(30px,4.2vw,48px);max-width:60vw}
.isc .lgs img:nth-child(3){transition-delay:.7s}
@media (max-width:640px){.isc .lgs{gap:22px 30px}}

/* ===== vitrine : un produit à la fois ===== */
.show{--tint:#efeaff;--mx:0;--my:0;position:relative;height:600px;display:grid;grid-template-rows:1fr auto auto;user-select:none;-webkit-user-select:none;animation:fadeUp 1.1s .3s var(--ease) both}
.show-bg{position:absolute;inset:0 0 90px;display:grid;place-items:center;pointer-events:none}
.show-bg .disc{width:min(440px,86%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--card) 0%,var(--tint) 70%);box-shadow:0 40px 90px rgba(22,19,46,.12),inset 0 -20px 50px rgba(255,255,255,.6);transition:background .9s var(--ease);transform:translate(calc(var(--mx)*-14px),calc(var(--my)*-10px))}
.show-bg .halo{position:absolute;width:min(540px,100%);aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(36,87,245,.18);animation:spin2 40s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.show-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:800 clamp(70px,10vw,150px)/1 var(--f-display);letter-spacing:-.04em;color:var(--word);opacity:.75;white-space:nowrap;pointer-events:none;text-shadow:0 2px 30px rgba(22,19,46,.04)}
.show-stage{position:relative;cursor:grab;touch-action:pan-y}
.show-stage:active{cursor:grabbing}
.sp{position:absolute;inset:10px 0 0;margin:0;display:grid;place-items:center;opacity:0;pointer-events:none;--dx:0px;--rot:0deg}
.sp img{display:block;height:min(470px,100%);max-width:78%;width:auto;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(22,19,46,.22));transform:translate(calc(var(--dx) + var(--mx)*16px),calc(var(--my)*10px)) rotate(var(--rot));transition:transform .5s var(--ease);-webkit-user-drag:none}
.sp .sp-sh{position:absolute;bottom:2%;left:50%;width:180px;height:22px;margin-left:-90px;border-radius:50%;background:radial-gradient(closest-side,rgba(22,19,46,.3),transparent);filter:blur(2px)}
.sp.in{opacity:1;pointer-events:auto;animation:spIn .95s var(--ease) both}
.sp.in.l{animation-name:spInL}
.sp.out{animation:spOut .7s var(--ease) both}
.sp.out.r{animation-name:spOutR}
@keyframes spIn{from{opacity:0;transform:translateX(90px) rotate(8deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes spInL{from{opacity:0;transform:translateX(-90px) rotate(-8deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes spOut{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-120px) rotate(-10deg) scale(.85)}}
@keyframes spOutR{from{opacity:1;transform:none}to{opacity:0;transform:translateX(120px) rotate(10deg) scale(.85)}}
.show-cap{position:relative;display:flex;justify-content:space-between;align-items:end;gap:20px;padding:18px 6px 14px}
.show-txt{display:grid;gap:4px;min-width:0}
.show-txt small{font:800 12px var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--violet)}
.show-txt b{font:700 clamp(20px,2vw,26px)/1.15 var(--f-display);letter-spacing:-.01em}
.swap{animation:swapIn .7s var(--ease) both}
.show-word.swap{animation:wordIn .9s var(--ease) both}
@keyframes swapIn{from{opacity:0;transform:translateY(14px)}}
@keyframes wordIn{from{opacity:0;letter-spacing:.1em}}
.show-nav{display:flex;align-items:center;gap:12px;flex:none}
.show-nav button{width:46px;height:46px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font:700 18px var(--f-body);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line),0 8px 20px rgba(22,19,46,.06);transition:background .25s,color .25s,transform .25s}
.show-nav button:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.show-count{font:600 14px var(--f-body);color:var(--muted);font-variant-numeric:tabular-nums}
.show-count b{color:var(--ink);font-family:var(--f-display)}
.show-bar{height:3px;border-radius:3px;background:rgba(22,19,46,.08);overflow:hidden}
.show-bar i{display:block;height:100%;background:var(--grad);transform-origin:0 50%;animation:prog 4.2s linear forwards}
@media (max-width:980px){.show{height:520px}.sp img{height:min(380px,100%)}}
@media (max-width:480px){.show{height:470px}.show-txt b{font-size:18px}.show-nav button{width:40px;height:40px}}
@media (prefers-reduced-motion:reduce){.sp.in,.sp.out{animation:none}.sp.out{opacity:0}}
.show{overflow:hidden;border-radius:30px}
.show-word{font-size:clamp(56px,7.5vw,120px)}
.sp{display:flex;align-items:center;justify-content:center;inset:10px 0 0;padding-bottom:12px}
.sp img{height:100%;max-height:470px;width:auto;max-width:78%}
@media (max-width:980px){.show{height:500px}.sp img{max-height:380px}}
@media (max-width:480px){.show{height:460px}.show-word{font-size:15vw}}
/* univers : photo carrée détourée en rond (Vaseline Lip Therapy) */
.uv .ph.round img{width:62%;height:auto;aspect-ratio:1;max-height:none;inset:auto;position:relative;object-fit:cover;clip-path:circle(47% at 50% 50%);mix-blend-mode:normal}
.uv .ph.round::before{width:72%}
/* partenaires : 5 logos */
.partners .wall{grid-template-columns:repeat(5,1fr)}
@media (max-width:980px){.partners .wall{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.partners .wall{grid-template-columns:repeat(2,1fr)}}
.wl img[alt="Nuhanciam"]{max-height:40px}

/* ===================== THÈMES ===================== */
html{transition:background-color .5s}
body,.stat,.bc,.pc,.wl,.val,.step,.pill,.info div,form,.chip,.mini div{transition:background-color .5s,color .5s,border-color .5s,box-shadow .5s}
.mesh{opacity:var(--mesh-o)}

/* --- Sombre --- */
:root[data-theme="dark"]{
  --bg:#0c0b16; --card:#16142a; --ink:#f2f0fb; --ink-2:#c8c5de; --muted:#8f8bad; --line:#2a2742;
  --violet:#7b9bff; --aqua:#3fd4e4; --rose:#ff7eaa; --deep:#06050d;
  --logo:#ffffff; --word:rgba(255,255,255,.06); --hdr:rgba(12,11,22,.82); --glass:rgba(255,255,255,.05); --mesh-o:.28;
  color-scheme:dark;
}
/* --- Prestige (noir & or) --- */
:root[data-theme="luxe"]{
  --bg:#0a0a0a; --card:#141313; --ink:#f4efe6; --ink-2:#d6cfc2; --muted:#9a9184; --line:#2b2824;
  --violet:#c9a45c; --aqua:#e6cf98; --rose:#a8813c; --gold:#c9a45c; --deep:#050505;
  --grad:linear-gradient(120deg,#a8813c,#e9d39d 50%,#c9a45c);
  --logo:#e3c98f; --word:rgba(201,164,92,.07); --hdr:rgba(10,10,10,.85); --glass:rgba(255,255,255,.04); --mesh-o:.12;
  --f-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}
:root[data-theme="luxe"] h1,:root[data-theme="luxe"] h2,:root[data-theme="luxe"] .show-txt b,:root[data-theme="luxe"] .stat b{font-weight:600;letter-spacing:-.01em}
:root[data-theme="luxe"] .hero h1{font-size:clamp(46px,6.4vw,90px);font-weight:500;font-style:normal}
:root[data-theme="luxe"] .gtext{background:linear-gradient(100deg,#b38b45,#f0dcaa 50%,#c9a45c);-webkit-background-clip:text;background-clip:text;font-style:italic}
:root[data-theme="luxe"] .mesh .m1{background:#4a3a1c}:root[data-theme="luxe"] .mesh .m2{background:#2a2216}:root[data-theme="luxe"] .mesh .m3{background:#3a2c14}
:root[data-theme="luxe"] .btn-dark{background:linear-gradient(120deg,#b38b45,#e3c98f);color:#0a0a0a;box-shadow:0 14px 30px rgba(201,164,92,.25)}
:root[data-theme="luxe"] .btn-dark::before{background:#f4efe6}
:root[data-theme="luxe"] .menu a.on,:root[data-theme="luxe"] .chip[aria-pressed="true"]{color:#0a0a0a}
:root[data-theme="luxe"] .menu .ind,:root[data-theme="luxe"] .chip[aria-pressed="true"]{background:linear-gradient(120deg,#b38b45,#e3c98f)}
:root[data-theme="luxe"] .kicker{color:var(--gold)}
:root[data-theme="luxe"] .uv{background:#141313!important;box-shadow:inset 0 0 0 1px #2b2824}
:root[data-theme="luxe"] .uv .ph::before{background:radial-gradient(circle,#2a251c,#141313 70%)}
:root[data-theme="luxe"] .uv .bl span{background:rgba(201,164,92,.15);color:#e6cf98}
:root[data-theme="luxe"] .cta-band{background:linear-gradient(120deg,#141313,#1d1914);box-shadow:inset 0 0 0 1px #2b2824}
:root[data-theme="luxe"] .cta-band::before{background:#6b5326}:root[data-theme="luxe"] .cta-band::after{background:#3d2f15}
:root[data-theme="luxe"] .stat::after{opacity:.18}

/* éléments communs aux thèmes sombres */
:root[data-theme="dark"] .menu .ind{background:#fff}
:root[data-theme="dark"] .menu a.on,:root[data-theme="dark"] .chip[aria-pressed="true"]{color:#0c0b16}
:root[data-theme="dark"] .chip[aria-pressed="true"]{background:#fff}
:root[data-theme="dark"] .btn-dark{background:#fff;color:#0c0b16}
:root[data-theme="dark"] .menu.hov .ind,:root[data-theme="luxe"] .menu.hov .ind{background:rgba(255,255,255,.1)}
:root[data-theme="dark"] .menu.hov a.on,:root[data-theme="luxe"] .menu.hov a.on{color:var(--ink-2)}
:root[data-theme="dark"] .menu.hov a.cur,:root[data-theme="luxe"] .menu.hov a.cur{color:var(--ink)}
:root:is([data-theme="dark"],[data-theme="luxe"]) img{mix-blend-mode:normal!important}
:root:is([data-theme="dark"],[data-theme="luxe"]) :is(.wl img,.bc .lg img,.btx .lg img,.isc .lgs img,.partners img){filter:brightness(0) invert(1);opacity:.92}
:root[data-theme="luxe"] :is(.wl img,.bc .lg img,.btx .lg img,.isc .lgs img,.partners img){filter:brightness(0) invert(84%) sepia(28%) saturate(560%) hue-rotate(2deg)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .bigword{-webkit-text-stroke-color:rgba(255,255,255,.06)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .show-bg .disc{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.14),rgba(255,255,255,.02) 70%);box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-theme="luxe"] .show-bg .disc{background:radial-gradient(circle at 35% 30%,rgba(233,211,157,.18),rgba(201,164,92,.03) 70%);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 0 0 1px rgba(201,164,92,.18)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .show-bg .halo{border-color:rgba(255,255,255,.1)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .sp img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
:root:is([data-theme="dark"],[data-theme="luxe"]) :is(.pc .im,.bc .pic,.bvis){background:radial-gradient(110% 80% at 50% 100%,rgba(255,255,255,.08),var(--card) 70%)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .mosaic .card{background:var(--card)!important}
:root:is([data-theme="dark"],[data-theme="luxe"]) .mq{background:#000;box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
:root:is([data-theme="dark"],[data-theme="luxe"]) footer{background:#000}
:root:is([data-theme="dark"],[data-theme="luxe"]) .hdr-top{background:#000}
:root:is([data-theme="dark"],[data-theme="luxe"]) .pv{background:rgba(0,0,0,.7)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .pv-stage{background:radial-gradient(80% 60% at 50% 40%,rgba(255,255,255,.1),var(--card))}
:root:is([data-theme="dark"],[data-theme="luxe"]) .wa{box-shadow:0 14px 30px rgba(0,0,0,.5)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .burger i{background:var(--ink)}
:root:is([data-theme="dark"],[data-theme="luxe"]) .phero .mesh{opacity:calc(var(--mesh-o) * .8)}

/* sélecteur de thème */
.themes{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.themes button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font:700 11.5px var(--f-body);letter-spacing:.06em;color:#bdb9d8;padding:5px 11px;border-radius:999px;transition:background .3s,color .3s}
.themes button:hover{color:#fff}
.themes button[aria-pressed="true"]{background:#fff;color:#0c0b16}
:root[data-theme="luxe"] .themes button[aria-pressed="true"]{background:linear-gradient(120deg,#b38b45,#e3c98f);color:#0a0a0a}
.themes button:focus-visible{outline:2px solid var(--violet)}
.themes .dot{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.hdr-top .r{display:none!important}
@media (max-width:560px){.themes button span.t{display:none}.themes button{padding:6px 8px}}
:root[data-theme="luxe"] .hero h1{line-height:1.02}
:root[data-theme="luxe"] .hero h1 .w{padding-bottom:.14em;margin-bottom:-.08em}

/* ===== vitrine v2 : studio produit ===== */
.show{height:auto;display:grid;gap:16px;grid-template-rows:none;overflow:visible;border-radius:0}
.show-panel{position:relative;height:560px;border-radius:36px;overflow:hidden;isolation:isolate;
  background:radial-gradient(90% 70% at 50% 30%,var(--card) 0%,var(--tint) 75%);
  box-shadow:0 40px 80px rgba(22,19,46,.12),inset 0 0 0 1px rgba(255,255,255,.7);transition:background .9s var(--ease)}
.show-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(22,19,46,.035) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(22,19,46,.035) 79px 80px);mask-image:radial-gradient(70% 60% at 50% 45%,#000,transparent)}
.show-glow{position:absolute;left:50%;top:44%;width:70%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent);z-index:-1;animation:glow 6s ease-in-out infinite alternate}
@keyframes glow{to{transform:translate(-50%,-50%) scale(1.12);opacity:.8}}
.show-top{position:absolute;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;align-items:center;z-index:3}
.show-logo{height:34px;display:flex;align-items:center}
.show-logo img{max-height:34px;max-width:150px;width:auto;object-fit:contain}
.show-logo b{font:700 16px var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.show-top .show-count{background:rgba(255,255,255,.7);backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;font-size:13px}
.show-stage{position:absolute;inset:70px 70px 120px;cursor:grab;touch-action:pan-y;z-index:2}
.sp{inset:0;padding:0}
.sp img{height:100%;max-height:none;max-width:100%;filter:drop-shadow(0 26px 24px rgba(22,19,46,.25));-webkit-box-reflect:below 6px linear-gradient(transparent 78%,rgba(255,255,255,.22));animation:floaty 5s ease-in-out infinite}
@keyframes floaty{50%{translate:0 -10px}}
.podium{position:absolute;left:50%;bottom:78px;width:62%;height:64px;transform:translateX(-50%);z-index:1}
.podium::before{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.35));box-shadow:0 18px 30px rgba(22,19,46,.14),inset 0 -6px 14px rgba(22,19,46,.06)}
.podium i{position:absolute;left:18%;right:18%;top:28%;height:30%;border-radius:50%;background:radial-gradient(closest-side,rgba(22,19,46,.32),transparent);filter:blur(4px);animation:shadowPulse 5s ease-in-out infinite}
@keyframes shadowPulse{50%{transform:scaleX(.86);opacity:.7}}
.show-cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;display:grid;gap:2px;padding:0;z-index:3}
.show-cap small{font:800 11.5px var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--violet)}
.show-cap b{font:700 clamp(18px,1.8vw,24px)/1.2 var(--f-display);letter-spacing:-.01em}
.show-arrow{position:absolute;top:50%;margin-top:-26px;z-index:4;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);background:rgba(255,255,255,.8);backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(22,19,46,.1);transition:transform .3s var(--ease),background .3s,color .3s,opacity .3s}
.show-arrow.l{left:18px}.show-arrow.r{right:18px}
.show-arrow:hover{background:var(--ink);color:#fff;transform:scale(1.08)}
.show-sweep{position:absolute;inset:-20% -60%;z-index:5;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%);transform:translateX(-100%)}
.show-sweep.swap{animation:sweep2 1.1s var(--ease) .15s both}
@keyframes sweep2{from{transform:translateX(-60%)}to{transform:translateX(60%)}}
.show-logo.swap{animation:swapIn .7s var(--ease) both}
.show-thumbs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:4px 2px 6px;scroll-snap-type:x mandatory}
.show-thumbs::-webkit-scrollbar{display:none}
.show-thumbs button{all:unset;cursor:pointer;flex:0 0 64px;height:76px;position:relative;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden;scroll-snap-align:center;transition:transform .3s var(--ease),box-shadow .3s}
.show-thumbs button:hover{transform:translateY(-3px)}
.show-thumbs button:focus-visible{outline:2px solid var(--violet)}
.show-thumbs img{position:absolute;inset:8px 10px 12px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;opacity:.7;transition:opacity .3s}
.show-thumbs button.on{box-shadow:inset 0 0 0 2px var(--ink)}
.show-thumbs button.on img,.show-thumbs button:hover img{opacity:1}
.show-thumbs button i{position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.show-thumbs button.on i::after{content:"";position:absolute;inset:0;background:var(--grad);transform-origin:0 50%;animation:prog var(--dur,4.5s) linear forwards}
.show.paused .show-thumbs button.on i::after{animation-play-state:paused}
.show-word,.show-bg,.show-bar,.show-nav{display:none}
:root[data-theme="dark"] .show-panel{background:radial-gradient(90% 70% at 50% 30%,#232041 0%,#121024 75%);box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06)}
:root[data-theme="dark"] .show-glow{background:radial-gradient(closest-side,rgba(123,155,255,.22),transparent)}
:root[data-theme="dark"] .podium::before{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03));box-shadow:0 18px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme="dark"] .podium i{background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
:root[data-theme="dark"] .show-panel::before{background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.04) 79px 80px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.04) 79px 80px)}
:root[data-theme="dark"] :is(.show-arrow,.show-top .show-count){background:rgba(255,255,255,.08);color:var(--ink)}
:root[data-theme="dark"] .show-arrow:hover{background:#fff;color:#0c0b16}
:root[data-theme="dark"] .show-logo img{filter:brightness(0) invert(1)}
:root[data-theme="dark"] .sp img{-webkit-box-reflect:below 6px linear-gradient(transparent 80%,rgba(255,255,255,.1))}
:root[data-theme="dark"] .show-sweep{background:linear-gradient(100deg,transparent 44%,rgba(255,255,255,.12) 50%,transparent 56%)}
:root[data-theme="dark"] .show-thumbs button.on{box-shadow:inset 0 0 0 2px #fff}
@media (max-width:980px){.show-panel{height:500px}}
@media (max-width:560px){.show-panel{height:440px;border-radius:28px}.show-stage{inset:66px 40px 112px}.show-arrow{width:42px;height:42px;margin-top:-21px}.show-arrow.l{left:10px}.show-arrow.r{right:10px}.show-top{left:18px;right:18px;top:18px}.show-thumbs button{flex-basis:56px;height:66px}}
@media (prefers-reduced-motion:reduce){.sp img,.podium i,.show-glow{animation:none}}

.show-cap{display:grid;justify-items:center;justify-content:center;align-items:center}

/* ===== écran de chargement (v2) ===== */
.loader{position:fixed;inset:0;z-index:190;display:grid;place-items:center;color:#fff;pointer-events:auto}
.loader.gone{display:none}
.ld-p{position:absolute;left:0;right:0;height:50.5%;background:#0c0b16;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.ld-p1{top:0}.ld-p2{bottom:0}
.ld-p1::after{content:"";position:absolute;inset:0;background:radial-gradient(45% 60% at 25% 35%,rgba(36,87,245,.2),transparent 70%)}
.ld-p2::after{content:"";position:absolute;inset:0;background:radial-gradient(45% 60% at 75% 65%,rgba(22,179,198,.14),transparent 70%)}
.ld-in,.ld-foot,.ld-line{position:relative;z-index:2;transition:opacity .45s,transform .7s cubic-bezier(.76,0,.24,1)}
.ld-logo{width:min(300px,68vw)}
.ld-svg{display:block;width:100%;height:auto;overflow:visible}
.ld-svg path{fill:#fff;transform-box:fill-box}
.ld-svg .lb{opacity:0;transform:translateY(55%);animation:ldUp .7s cubic-bezier(.2,.9,.25,1) forwards;animation-delay:calc(var(--i) * 55ms + 80ms)}
.ld-svg .ld{opacity:0;transform-origin:50% 100%;animation:ldDrop .8s cubic-bezier(.3,1.5,.5,1) .55s forwards;fill:#5b8cff}
.ld-svg .ll{transform:scaleX(0);transform-origin:50% 50%;animation:ldLine .6s var(--ease) .6s forwards;fill:rgba(255,255,255,.6)}
.ld-svg .ls{opacity:0;transform:translateY(40%);animation:ldUp .5s var(--ease) forwards;animation-delay:calc(var(--i) * 50ms + 650ms);fill:rgba(255,255,255,.75)}
@keyframes ldUp{to{opacity:1;transform:none}}
@keyframes ldDrop{0%{opacity:0;transform:translateY(-500%)}60%{opacity:1;transform:translateY(0) scale(1.18,.8)}100%{opacity:1;transform:none}}
@keyframes ldLine{to{transform:scaleX(1)}}
.ld-foot{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;align-items:end;padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px));z-index:2}
.ld-tag{font:700 11px var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.45);opacity:0;animation:ldUp .8s var(--ease) .4s forwards}
.ld-num{font:300 clamp(46px,7vw,84px)/.8 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.04em;color:#fff;display:flex;align-items:start;gap:4px}
.ld-num small{font-size:.32em;font-weight:600;color:rgba(255,255,255,.5);margin-top:.3em}
.ld-line{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.08);z-index:2}
.ld-line i{display:block;height:100%;width:100%;background:var(--grad);transform-origin:0 50%;transform:scaleX(0)}
/* sortie : rideau qui s'ouvre */
.loader.done{pointer-events:none}
.loader.done .ld-p1{transform:translateY(-101%)}
.loader.done .ld-p2{transform:translateY(101%)}
.loader.done .ld-in{opacity:0;transform:scale(.92) translateY(-20px)}
.loader.done :is(.ld-foot,.ld-line){opacity:0}
/* départ vers une autre page : rideau qui se ferme */
.loader.leaving .ld-p1{animation:ldClose1 .55s cubic-bezier(.76,0,.24,1) both}
.loader.leaving .ld-p2{animation:ldClose2 .55s cubic-bezier(.76,0,.24,1) both}
.loader.leaving :is(.ld-in,.ld-foot,.ld-line){opacity:0}
@keyframes ldClose1{from{transform:translateY(-101%)}}
@keyframes ldClose2{from{transform:translateY(101%)}}
@media (prefers-reduced-motion:reduce){.ld-svg path{animation:none!important;opacity:1!important;transform:none!important}.ld-p{transition:none}}
.ld-num{display:none!important}

/* ===== fond « distribution cosmétique » ===== */
body::before{content:"";position:fixed;inset:-420px;z-index:-1;pointer-events:none;
  background-image:url("../img/motif-cosmetique.svg");background-size:420px 420px;opacity:.055;
  animation:motifMove 90s linear infinite}
@keyframes motifMove{to{transform:translate(420px,420px)}}
body{background-color:var(--bg)}
.netbg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.netbg .routes path{fill:none;stroke:var(--violet);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round;opacity:.35;animation:routeDash 18s linear infinite}
@keyframes routeDash{to{stroke-dashoffset:-240}}
.netbg .trucks circle{fill:var(--violet);opacity:.75}
.netbg .cities circle{fill:#fff;stroke:var(--violet);stroke-width:3}
.netbg .cities circle.hq{fill:var(--violet)}
.netbg .cities .pulse{fill:none;stroke:var(--violet);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:cityPulse 2.6s ease-out infinite}
.netbg .cities g:nth-child(2n) .pulse{animation-delay:-1.3s}
@keyframes cityPulse{from{transform:scale(1);opacity:.6}to{transform:scale(3.4);opacity:0}}
.netbg text{font:700 15px var(--f-body);fill:var(--ink-2);opacity:.55;letter-spacing:.04em}
.hero .netbg{left:auto;right:0;width:62%;opacity:.75;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.netbg.sm{width:48%;left:auto;right:0;opacity:.5;mask-image:linear-gradient(90deg,transparent,#000 40%)}
@media (max-width:900px){.hero .netbg{width:100%;opacity:.35}.netbg.sm{width:100%;opacity:.25}.netbg text{display:none}}
@media (prefers-reduced-motion:reduce){body::before,.netbg *{animation:none!important}}
.hero .netbg{width:100%;right:0;top:90px;height:calc(100% - 90px);opacity:.6;mask-image:radial-gradient(70% 80% at 62% 55%,#000 45%,transparent 100%)}
.netbg.sm{top:110px;height:calc(100% - 110px)}
.hero .netbg text{font-size:10px;opacity:.45}.hero .netbg{opacity:.5}

/* ===================== BON DE COMMANDE ===================== */
.bc-sec{padding-block:30px 100px}
.bc-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.bdc{background:#fff;border-radius:28px;padding:34px;box-shadow:0 20px 50px rgba(13,27,62,.07);border:1px solid var(--line)}
.bdc-head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.bdc-head img{height:48px;width:auto}
.bdc-title{text-align:right;display:grid;gap:2px}
.bdc-title b{font:800 clamp(18px,2vw,24px) var(--f-display);letter-spacing:.06em}
.bdc-title span{color:var(--muted);font-size:14px}
.bdc-client{border:0;margin:24px 0 0;padding:0;display:grid;gap:14px}
.bdc-client legend{font:700 12px var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.grid3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:14px}
.bdc label{font-weight:700;font-size:13.5px;display:grid;gap:6px}
.bdc input,.bdc textarea{font:500 15px var(--f-body);border:1.5px solid var(--line);border-radius:12px;padding:11px 14px;background:#fbfbfd;color:var(--ink);width:100%}
.bdc input:focus,.bdc textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px rgba(36,87,245,.1);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bdc-tools{position:sticky;top:76px;z-index:5;background:#fff;margin:26px -34px 0;padding:14px 34px 12px;border-bottom:1px solid var(--line);display:grid;gap:12px}
.bdc-search{position:relative;display:block!important}
.bdc-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.bdc-search input{padding-left:42px;border-radius:999px}
.bdc-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.bdc-tabs::-webkit-scrollbar{display:none}
.bdc-tabs button{flex:none;font:600 13.5px var(--f-body);border:0;border-radius:999px;padding:8px 14px;background:var(--soft,#f3f4f8);color:var(--ink-2);cursor:pointer}
.bdc-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.bdc-table{margin-top:6px}
.bdc-row{display:grid;grid-template-columns:56px minmax(0,1fr) 150px;gap:14px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);border-radius:12px;transition:background .2s}
.bdc-row.on{background:#eef3ff}
.bdc-th{font:700 11.5px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-block:12px;border-radius:0}
.bdc-th span:last-child{text-align:center}
.bdc-group{margin:22px 0 4px;padding:0 10px;font:800 15px var(--f-display);letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.bdc-group small{font:600 12px var(--f-body);color:var(--muted);background:var(--soft,#f3f4f8);border-radius:999px;padding:2px 8px}
.bdc-row .th{width:56px;height:56px;border-radius:12px;background:#f4f6fb;display:grid;place-items:center;overflow:hidden}
.bdc-row .th img{width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply}
.bdc-row .nm{display:grid;gap:1px;min-width:0}
.bdc-row .nm b{font-weight:600;font-size:14px;line-height:1.3}
.bdc-row .nm small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.qt{display:flex;align-items:center;justify-content:center;gap:4px}
.qt button{width:34px;height:34px;border-radius:50%;border:0;background:var(--soft,#f3f4f8);color:var(--ink);font:700 18px var(--f-body);cursor:pointer;flex:none;transition:background .2s,color .2s}
.qt button:hover{background:var(--ink);color:#fff}
.qt input{width:64px!important;text-align:center;padding:8px 4px!important;font-weight:700!important;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.qt input::-webkit-outer-spin-button,.qt input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bdc-row.on .qt input{border-color:var(--violet);background:#fff}
.bdc-none{text-align:center;color:var(--muted);padding:40px 0}
.bdc-note{margin-top:24px}
.bdc-note textarea{min-height:90px;resize:vertical}
.bdc-sum{position:sticky;top:96px}
.sum-in{background:#fff;border-radius:28px;padding:26px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(13,27,62,.07);display:grid;gap:16px}
.sum-in h3{font:800 20px var(--f-display)}
.sum-kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sum-kpi div{background:var(--soft,#f3f4f8);border-radius:16px;padding:14px;display:grid}
.sum-kpi b{font:800 28px var(--f-display);font-variant-numeric:tabular-nums}
.sum-kpi span{font-size:13px;color:var(--muted)}
.sum-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:min(42vh,380px);overflow:auto}
.sum-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px;line-height:1.3;padding:8px 10px;border-radius:12px;background:#f7f8fb}
.sum-list li.empty{display:block;background:none;color:var(--muted);padding:0}
.sum-list .sq{min-width:34px;text-align:center;font-weight:800;background:var(--ink);color:#fff;border-radius:8px;padding:3px 6px;font-variant-numeric:tabular-nums}
.sum-list button{border:0;background:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0 4px}
.sum-list button:hover{color:#d33}
.sum-err{margin:0;color:#c0262d;font-size:14px;font-weight:600;display:grid;gap:8px}
.sum-wa{color:#1a8f4c;font-weight:800;text-decoration:none}
.sum-go{justify-content:center;width:100%}
.sum-go:disabled{opacity:.6;cursor:wait}
.sum-clear{border:0;background:none;color:var(--muted);font:600 13px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.sum-mobile{display:none}
@media (max-width:1000px){
  .bc-layout{grid-template-columns:1fr}
  .bdc-sum{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:65;padding:0 12px calc(12px + env(safe-area-inset-bottom,0px))}
  .sum-in{display:none;max-height:70vh;overflow:auto;margin-bottom:8px}
  .bdc-sum.open .sum-in{display:grid}
  .sum-mobile{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:0;border-radius:18px;background:var(--ink);color:#fff;font:600 14px var(--f-body);padding:16px 18px;cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.25)}
  .bc-sec{padding-bottom:140px}
  .wa{bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){
  .bdc{padding:20px;border-radius:22px}
  .bdc-tools{margin-inline:-20px;padding-inline:20px;top:64px}
  .grid3{grid-template-columns:1fr}
  .bdc-row{grid-template-columns:44px minmax(0,1fr);row-gap:8px}
  .bdc-row .th{width:44px;height:44px}
  .bdc-row .qt{grid-column:2;justify-content:flex-start}
  .bdc-th{display:none}
  .bdc-head img{height:36px}
}
.bdc-ok{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(13,27,62,.55);backdrop-filter:blur(6px)}
.ok-box{background:#fff;border-radius:28px;padding:40px;max-width:480px;text-align:center;display:grid;gap:14px;justify-items:center;animation:pop .5s var(--ease) both}
.ok-ico{width:72px;height:72px;border-radius:50%;background:#1fbf6a;color:#fff;font-size:36px;display:grid;place-items:center}
.ok-box h3{font:800 26px var(--f-display)}
.ok-box p{margin:0;color:var(--ink-2)}
.ok-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (max-width:1000px){body:has(.bdc-sum) .wa{display:none}}

/* ===== carte du Maroc plus visible ===== */
.netbg .maroc{fill:rgba(36,87,245,.07);stroke:var(--violet);stroke-width:2.5;stroke-opacity:.35;stroke-linejoin:round}
.netbg .routes path{stroke-width:3;opacity:.6;stroke-dasharray:4 10}
.netbg .trucks circle{r:8;opacity:1;fill:#ff6f9f;stroke:#fff;stroke-width:2.5}
.netbg .cities circle{stroke-width:3.5}
.hero .netbg{opacity:.95}
.hero .netbg text{font-size:12px;opacity:.75;font-weight:800}
.netbg.sm{opacity:.85}
.netbg.sm text{opacity:.7}

/* ===== touches de couleur douces dans le bas des pages ===== */
html{background-color:var(--bg);
  background-image:
    radial-gradient(38% 18% at 0% 28%,rgba(36,87,245,.10),transparent 70%),
    radial-gradient(34% 16% at 100% 42%,rgba(255,111,159,.10),transparent 70%),
    radial-gradient(40% 18% at 6% 60%,rgba(22,194,184,.10),transparent 70%),
    radial-gradient(36% 16% at 98% 76%,rgba(255,196,46,.12),transparent 70%),
    radial-gradient(40% 14% at 30% 94%,rgba(164,121,255,.10),transparent 70%);
  background-repeat:no-repeat;background-size:100% 100%;min-height:100%}
body{background-color:transparent!important}

/* ===== carte : Maroc entier, discrète ===== */
.netbg,.hero .netbg,.netbg.sm{mask-image:none;-webkit-mask-image:none}
.hero .netbg{left:auto;right:2%;top:96px;width:58%;height:calc(100% - 110px);opacity:.55}
.netbg.sm{left:auto;right:2%;top:100px;width:46%;height:calc(100% - 110px);opacity:.5}
.netbg .maroc{fill:rgba(36,87,245,.05);stroke:var(--violet);stroke-width:2;stroke-opacity:.28}
.netbg .routes path{stroke-width:2;opacity:.4;stroke-dasharray:3 9}
.netbg .trucks circle{r:6;fill:var(--violet);stroke:none;opacity:.7}
.netbg .cities circle{stroke-width:3}
.hero .netbg text,.netbg.sm text{font-size:14px;font-weight:700;opacity:.55}
@media (max-width:900px){.hero .netbg,.netbg.sm{width:100%;right:0;opacity:.3}}

/* ===== plus de couleur dans le fond du bas ===== */
html{background-image:
    radial-gradient(45% 14% at 0% 24%,rgba(36,87,245,.20),transparent 70%),
    radial-gradient(45% 14% at 100% 36%,rgba(255,111,159,.20),transparent 70%),
    radial-gradient(50% 14% at 0% 50%,rgba(22,194,184,.20),transparent 70%),
    radial-gradient(45% 14% at 100% 63%,rgba(255,196,46,.24),transparent 70%),
    radial-gradient(50% 14% at 0% 78%,rgba(164,121,255,.20),transparent 70%),
    radial-gradient(45% 12% at 100% 92%,rgba(36,87,245,.16),transparent 70%),
    linear-gradient(180deg,var(--bg) 0%,#f1f0fb 30%,#fdf1f6 55%,#eef8f7 80%,var(--bg) 100%)}
.hero .netbg{left:0;right:auto;width:50%;top:80px;height:calc(100% - 80px);opacity:.42}
.netbg.sm{opacity:.75}
@media (max-width:900px){.hero .netbg{width:100%;opacity:.25}}
/* carte réelle du Maroc */
.netbg .maroc{fill:rgba(36,87,245,.06);stroke:var(--violet);stroke-width:2.5;stroke-opacity:.35}
.netbg text{font-size:20px!important}
.hero .netbg{left:-2%;width:52%;top:84px;height:calc(100% - 90px);opacity:.5}
.netbg.sm{width:40%;opacity:.7}
.hero .netbg{opacity:.6}
.netbg .cities .cs circle{stroke-width:2.5}
.netbg .cities .cs text{font-size:14px!important;font-weight:600;opacity:.75}
.netbg .cities .cm text{font-size:19px!important;font-weight:800}
/* camions de livraison */
.netbg .trucks .tb{fill:var(--violet)}
.netbg .trucks .tc{fill:#ff6f9f}
.netbg .trucks .tw{fill:#fff;opacity:.85}
.netbg .trucks .tr{fill:#16132e;stroke:#fff;stroke-width:1.5}
.netbg .trucks .tl{stroke:#fff;stroke-width:2;stroke-linecap:round;opacity:.7}
.netbg .truck{animation:none}
.netbg .trucks use{animation:bump .5s ease-in-out infinite alternate}
@keyframes bump{to{transform:translateY(-1.5px)}}

/* ===== accueil : carte très discrète derrière le titre ===== */
.hero .netbg{opacity:.18!important;left:-6%;width:46%}
.hero .netbg text,.hero .netbg .trucks,.hero .netbg .pulse,.hero .netbg .cs{display:none}

/* ===== section « Notre réseau » ===== */
.reseau{padding-block:90px}
.reseau-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
.reseau-t{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.02em;line-height:1.05;margin:16px 0}
.reseau-p{color:var(--ink-2);font-size:17.5px;max-width:48ch;margin:0 0 26px}
.reseau-kpi{list-style:none;margin:0 0 30px;padding:0;display:flex;gap:30px;flex-wrap:wrap}
.reseau-kpi b{display:block;font:800 34px var(--f-display);color:var(--violet)}
.reseau-kpi span{font-size:14px;color:var(--muted);font-weight:600}
.reseau-map{position:relative;border-radius:32px;background:#fff;box-shadow:0 30px 60px rgba(22,19,46,.08);padding:20px;aspect-ratio:1/1}
.netmap{width:100%;height:100%;display:block}
.netmap .maroc{fill:rgba(36,87,245,.07);stroke:var(--violet);stroke-width:2.5;stroke-opacity:.45}
.netmap .routes path{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-dasharray:4 9;stroke-linecap:round;opacity:.5;animation:routeDash 18s linear infinite}
.netmap .cities circle{fill:#fff;stroke:var(--violet);stroke-width:3}
.netmap .cities circle.hq{fill:var(--violet)}
.netmap .cities .pulse{fill:none;stroke:var(--violet);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:cityPulse 2.6s ease-out infinite}
.netmap text{font:700 18px var(--f-body);fill:var(--ink-2)}
.netmap .cs text{font-size:13px;font-weight:600;fill:var(--muted)}
.netmap .cm text{font-size:20px;font-weight:800;fill:var(--ink)}
@media (max-width:900px){.reseau-grid{grid-template-columns:1fr}.netmap .cs text{display:none}}
.reseau-map{background:none;box-shadow:none;padding:0;border-radius:0}