/* VERMEIL Paris — landing page. "Un rouge à lèvres qui peint l'écran":
   noir velours scenes cut by lipstick strokes, a scroll-driven nuancier that recolours the page,
   a compact that opens in 3D, a horizontal shelf, a COD order drawer. */

body.is-loading{overflow:hidden}

/* ---------- grain ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}
@media (max-width:820px){.grain{animation:none;opacity:.06}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--noir);display:grid;place-items:center}
.loader svg{width:min(760px,86vw);height:auto;overflow:visible}
.loader text{font-family:var(--f-display);font-size:150px;fill:transparent;stroke:var(--cerise);stroke-width:1.4}
.loader-meta{position:absolute;bottom:clamp(20px,5svh,48px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;color:var(--muted)}
.curtain{position:fixed;inset:0;z-index:99;background:var(--cerise);clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);pointer-events:none}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:95;pointer-events:none;opacity:0;transition:opacity .4s}
.cursor.is-on{opacity:1}
.c-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cerise)}
.c-ring{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:1px solid rgba(255,244,241,.35);display:grid;place-items:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ivoire);transition:background .3s,border-color .3s}
.cursor.is-label .c-ring{background:var(--cerise);border-color:var(--cerise)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) 16px;--fg:var(--ivoire);--inv:var(--noir);color:var(--fg);transition:color .5s}
.nav::before{content:"";position:absolute;inset:0 0 -30px;background:linear-gradient(180deg,rgba(11,5,7,.28),rgba(11,5,7,0));pointer-events:none;transition:opacity .5s;z-index:-1}
.nav.on-light{--fg:var(--noir);--inv:var(--ivoire)}
.nav.on-light::before{opacity:0}
.menu-open .nav{--fg:var(--ivoire);--inv:var(--cerise)}
.menu-open .nav::before{opacity:0}
.logo{justify-self:start;display:flex;align-items:baseline;gap:10px}
.logo b{font-family:"Gloock",Georgia,serif;font-weight:400;font-size:1.3rem;letter-spacing:.28em}
.logo span{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1rem;opacity:.75}
.nav-links{display:flex;gap:30px}
.nav-links a{font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;font-weight:700;position:relative;padding:6px 0}
html[lang="ar"] .nav-links a{letter-spacing:0;font-size:.85rem}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-r{justify-self:end;display:flex;align-items:center;gap:8px}
.pill{display:flex;align-items:center;gap:10px;height:40px;padding:0 5px 0 16px;border-radius:999px;border:1px solid currentColor;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-weight:800;transition:color .5s,border-color .5s}
html[lang="ar"] .pill{letter-spacing:0;font-size:.8rem;padding:0 16px 0 5px}
.pill b{display:grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:14px;background:var(--fg);color:var(--inv);font-size:.68rem;letter-spacing:0;transition:background-color .5s,color .5s}
.nav-cta{height:40px;padding:0 18px;border-radius:999px;border:1px solid currentColor;font-size:var(--t-label);letter-spacing:.18em;text-transform:uppercase;font-weight:800;transition:background-color .35s,color .35s,border-color .35s}
.nav-cta:hover{background:var(--cerise);color:var(--ivoire);border-color:var(--cerise)}
html[lang="ar"] .nav-cta{letter-spacing:0;font-size:.8rem}
.lang{display:flex;border:1px solid currentColor;border-radius:999px;height:40px;padding:3px;transition:border-color .5s}
.lang button{min-width:36px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.06em;transition:background-color .4s,color .4s}
.lang button[aria-pressed="true"]{background:var(--fg);color:var(--inv)}
.menu-btn{display:none;width:40px;height:40px;border-radius:50%;background:var(--fg);color:var(--inv);place-items:center;position:relative;transition:background-color .5s,color .5s}
.menu-btn i{position:absolute;width:16px;height:1.5px;background:currentColor;transition:transform .5s var(--ease-out)}
.menu-btn i:first-child{transform:translateY(-3px)}.menu-btn i:last-child{transform:translateY(3px)}
.menu-open .menu-btn i:first-child{transform:rotate(45deg)}.menu-open .menu-btn i:last-child{transform:rotate(-45deg)}
@media (max-width:900px){.nav-links,.nav-cta{display:none}.nav{grid-template-columns:1fr auto}.logo span{display:none}.menu-btn{display:grid}}
@media (max-width:420px){.pill .t{display:none}.pill{padding:0 5px 0 12px}}

/* menu (mobile) */
.menu{position:fixed;inset:0;z-index:55;background:var(--cerise);color:var(--ivoire);visibility:hidden;clip-path:circle(0 at 90% 4%);display:grid;align-content:center;padding:100px var(--gutter) 40px;gap:6px}
.menu a{font-family:var(--f-display);font-size:clamp(2.6rem,12vw,5rem);line-height:1.05;overflow:hidden;display:block}
.menu a span{display:inline-block}
.menu-foot{margin-top:30px;display:grid;gap:8px;color:rgba(255,244,241,.8);font-size:.9rem}
.menu-foot .btn{justify-self:start;margin-top:8px}

/* ---------- HERO ---------- */
.hero-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:
  radial-gradient(42% 52% at 50% 58%,rgba(224,0,43,.42) 0%,rgba(224,0,43,0) 70%),
  radial-gradient(90% 70% at 50% 110%,#3A0610 0%,rgba(58,6,16,0) 70%),var(--noir)}
.hero-word{position:absolute;left:0;right:0;bottom:-.12em;text-align:center;direction:ltr;font-family:"Gloock",Georgia,serif;font-size:var(--t-mega);line-height:.8;letter-spacing:-.03em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,244,241,.22);background:linear-gradient(180deg,rgba(224,0,43,.0) 30%,rgba(224,0,43,.35));-webkit-background-clip:text;background-clip:text;pointer-events:none;user-select:none}
.hero-word span{display:inline-block}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.has-video .hero-video{opacity:1}
.has-video .lipstick{opacity:0}
.lipstick{position:absolute;left:50%;bottom:-2svh;width:min(150px,28vw);height:min(78svh,560px);margin-left:calc(min(150px,28vw) / -2);z-index:3;filter:drop-shadow(0 40px 50px rgba(0,0,0,.6))}
.lipstick > div{position:absolute;left:0;right:0}
.lipstick svg{display:block;width:100%;height:100%;overflow:visible}
.ls-base{bottom:0;height:46%;z-index:2}
.ls-bullet{bottom:42%;height:44%;z-index:1;transform:translateY(62%)}
.ls-cap{bottom:40%;height:44%;z-index:3}
.hero-copy{position:absolute;inset-inline-start:var(--gutter);top:clamp(100px,17svh,170px);z-index:4;max-width:min(40vw,560px)}
.hero-copy .lbl{color:var(--rose);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.hero-copy .lbl::before{content:"";width:34px;height:1px;background:currentColor}
.hero-title{font-size:var(--t-hero)}
.hero-title em{color:var(--cerise);display:inline-block;padding-inline-end:.06em}
.hero-side{position:absolute;inset-inline-end:var(--gutter);top:clamp(110px,22svh,220px);z-index:4;display:grid;gap:22px;justify-items:end;text-align:end;max-width:300px}
html[dir="rtl"] .hero-side{justify-items:start}
.hero-side p{color:var(--muted);font-size:.98rem}
.hero-ctas{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
html[dir="rtl"] .hero-ctas{justify-content:flex-start}
.hero-trust{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
html[dir="rtl"] .hero-trust{justify-content:flex-start;letter-spacing:0}
.hero-trust span{display:flex;align-items:center;gap:6px}
.hero-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cerise)}
.hero-foot{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,4svh,40px);display:flex;justify-content:space-between;align-items:flex-end;z-index:4;color:var(--muted);gap:16px}
.shade-tag{display:grid;gap:4px}
.shade-tag b{font-family:var(--f-display);font-weight:400;font-size:1.6rem;color:var(--ivoire);letter-spacing:0;text-transform:none}
.cue{position:absolute;left:50%;bottom:0;transform:translateX(calc(-100% - 110px));display:grid;justify-items:center;gap:10px}
html[dir="rtl"] .cue{transform:translateX(110px)}
.cue i{width:1px;height:36px;background:currentColor;animation:cue 2.2s var(--ease-out) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.paint{position:absolute;inset:0;z-index:6;width:100%;height:100%;pointer-events:none}
.paint path{fill:none;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .hero-copy{max-width:none;inset-inline-end:var(--gutter);top:96px}
  .hero-side{top:auto;bottom:20px;inset-inline-end:var(--gutter);inset-inline-start:var(--gutter);max-width:none;justify-items:stretch;text-align:start;gap:14px}
  .hero-side p{display:none}
  .hero-ctas{justify-content:stretch}.hero-ctas .btn{flex:1;justify-content:space-between}.hero-ctas .btn.ghost{display:none}
  .hero-trust{justify-content:center;font-size:.64rem}
  .lipstick{height:min(46svh,400px);bottom:max(112px,15svh);width:min(100px,24vw);margin-left:calc(min(100px,24vw) / -2)}
  .hero-foot{display:none}
}

/* ---------- SHADES ---------- */
.shades-stage{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--shade);color:var(--shade-ink);transition:color .6s}
.shades-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 72% 50%,rgba(255,255,255,.18),rgba(255,255,255,0) 60%),radial-gradient(80% 80% at 0% 100%,rgba(0,0,0,.35),rgba(0,0,0,0) 60%);pointer-events:none}
.sh-grid{position:absolute;inset:0;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;padding:110px var(--gutter) 130px;gap:3vw}
.sh-copy{display:grid;gap:20px;min-width:0;position:relative;z-index:2}
.sh-top{display:flex;gap:16px;align-items:center;opacity:.85}
.sh-name{font-size:clamp(3.4rem,10vw,10.5rem);line-height:.86;min-height:1.75em;display:flex;align-items:flex-end}
.sh-name .inner{display:block}
.sh-desc{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:34ch;line-height:1.5}
.sh-buy{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.sh-price{font-family:var(--f-display);font-size:2rem}
.sh-vis{position:relative;height:min(70svh,640px);display:flex;align-items:center;justify-content:center}
.sh-vis .swatch{position:absolute;inset:6% -10% auto -10%;height:70%;width:120%;overflow:visible}
.sh-vis .swatch path{fill:none;stroke-linecap:round}
.sh-vis .big-ls{position:relative;height:100%;z-index:2;filter:drop-shadow(0 40px 40px rgba(0,0,0,.45))}
.sh-vis .big-ls svg{height:100%;width:auto;overflow:visible}
.sh-strip{position:absolute;left:0;right:0;bottom:clamp(16px,3.5svh,34px);display:flex;gap:8px;padding:0 var(--gutter);overflow-x:auto;scrollbar-width:none;z-index:3;
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.sh-strip::-webkit-scrollbar{display:none}
.sh-dot{flex:none;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 6px;border-radius:999px;border:1px solid color-mix(in srgb,var(--shade-ink) 30%,transparent);font-size:.72rem;font-weight:700;letter-spacing:.06em;color:inherit;transition:background-color .4s,color .4s,border-color .4s}
html[lang="ar"] .sh-dot{letter-spacing:0;padding:0 6px 0 14px;font-size:.8rem}
.sh-dot i{width:26px;height:26px;border-radius:50%;border:2px solid var(--shade-ink);flex:none}
.sh-dot[aria-pressed="true"]{background:var(--shade-ink);color:var(--shade);border-color:var(--shade-ink)}
.sh-big{position:absolute;inset-inline-end:-2vw;top:-4vw;font-family:"Gloock",Georgia,serif;font-size:clamp(8rem,26vw,26rem);line-height:.8;opacity:.1;pointer-events:none;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .sh-grid{grid-template-columns:1fr;align-content:start;padding:96px var(--gutter) 96px;gap:0}
  .sh-vis{position:absolute;inset-inline-end:8vw;top:12svh;height:30svh;z-index:1}
  .sh-vis .swatch{inset:10% -30% auto -60%;width:160%}
  .sh-copy{margin-top:max(220px,34svh);gap:12px}
  .sh-desc{font-size:1rem}
  .sh-name{font-size:clamp(2.6rem,13vw,4.4rem);min-height:auto}
  .sh-strip{bottom:14px}
}
@media (max-width:820px) and (max-height:720px){.sh-desc{display:none}.sh-vis{height:26svh}.sh-copy{margin-top:max(190px,28svh)}}

/* ---------- PALETTE ---------- */
.pal-stage{position:relative;height:100svh;min-height:640px;overflow:hidden;background:radial-gradient(70% 60% at 50% 62%,#2A0B14 0%,var(--noir) 70%)}
.pal-head{position:absolute;inset-inline-start:var(--gutter);top:clamp(100px,15svh,150px);z-index:3;display:grid;gap:14px;max-width:min(360px,30vw)}
.pal-head h2{font-size:var(--t-h2)}
.pal-head h2 em{color:var(--cerise)}
.pal-head p{color:var(--muted)}
.pal-list{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--muted);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
html[lang="ar"] .pal-list{letter-spacing:0}
.pal-list span{display:flex;align-items:center;gap:6px}
.pal-list i{width:9px;height:9px;border-radius:50%;background:var(--pc);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.pal-side{position:absolute;inset-inline-end:var(--gutter);bottom:clamp(24px,8svh,80px);z-index:3;display:grid;gap:12px;justify-items:end;text-align:end}
html[dir="rtl"] .pal-side{justify-items:start}
.pal-side .sh-price{color:var(--ivoire)}
.pal-side s{color:var(--muted);font-size:1rem}
.pal-3d{position:absolute;left:50%;top:56%;width:var(--cw);height:calc(var(--cw) * 1.24);margin-left:calc(var(--cw) / -2);margin-top:calc(var(--cw) * -.62);perspective:1800px;--cw:min(520px,74vw);z-index:2}
.compact{position:absolute;left:0;right:0;bottom:0;height:50%;transform-style:preserve-3d}
.c-base,.c-lid{position:absolute;inset:0;border-radius:22px}
.c-base{background:linear-gradient(160deg,#1E1014,#090305);box-shadow:0 50px 80px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.06);padding:5%}
.tray{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4%;background:#050203;border-radius:12px;padding:4%;box-shadow:inset 0 4px 14px rgba(0,0,0,.8)}
.pan{position:relative;border-radius:8px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 0 0 2px #1a1a1d;background:var(--pc)}
.pan::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(255,255,255,.38),rgba(255,255,255,0) 55%)}
.pan.shim::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0) 30%,rgba(255,255,255,.3) 55%,rgba(255,255,255,0) 70%);mix-blend-mode:overlay;animation:spin 6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pan span{position:absolute;left:8%;bottom:6%;font-size:clamp(7px,1vw,10px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.c-lid{transform-origin:50% 0;transform-style:preserve-3d;z-index:2}
.lid-face,.lid-in{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.lid-face{background:linear-gradient(150deg,#26131A 0%,#0B0507 55%,#1A0A10 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 30px 60px rgba(255,255,255,.04);display:grid;place-items:center;align-content:center;gap:6px}
.lid-face b{font-family:"Gloock",Georgia,serif;font-weight:400;font-size:clamp(1.6rem,4vw,2.6rem);letter-spacing:.3em;padding-left:.3em;background:linear-gradient(180deg,#fff,#9EA0A8 60%,#E9EBEF);-webkit-background-clip:text;background-clip:text;color:transparent}
.lid-face span{font-family:"Instrument Serif",Georgia,serif;font-style:italic;color:var(--muted)}
.lid-face::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%)}
.lid-in{transform:rotateX(180deg);background:linear-gradient(160deg,#C9CCD3 0%,#F7F8FA 30%,#8E9199 55%,#E3E5EA 80%,#A3A6AE 100%);box-shadow:inset 0 0 0 10px #120609,inset 0 0 0 11px rgba(255,255,255,.3)}
.lid-in::after{content:"";position:absolute;inset:10px;border-radius:14px;background:linear-gradient(120deg,rgba(255,255,255,.0) 20%,rgba(255,255,255,.55) 32%,rgba(255,255,255,0) 44%),radial-gradient(60% 60% at 70% 70%,rgba(224,0,43,.18),transparent 70%)}
.flood{position:absolute;inset:0;z-index:5;background:var(--rose);clip-path:circle(0% at 50% 50%)}
@media (max-width:820px){.pal-head{top:90px;inset-inline-end:var(--gutter);max-width:none}.pal-head p,.pal-list{display:none}.pal-3d{top:60%}.pal-side{left:var(--gutter);right:var(--gutter);justify-items:start;text-align:start;bottom:18px}}

/* ---------- COLLECTION (horizontal) ---------- */
.col-stage{--sk:0deg;position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--rose);color:var(--noir);display:flex;flex-direction:column;justify-content:center}
.col-head{position:absolute;top:clamp(90px,13svh,130px);left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.col-head h2{font-size:clamp(2.4rem,5vw,5rem)}
.col-head h2 em{color:var(--cerise)}
.col-head p{max-width:32ch;color:var(--muted-d)}
.track{display:flex;gap:clamp(14px,2vw,28px);padding:0 var(--gutter);width:max-content;margin-top:clamp(90px,12svh,130px);direction:ltr;will-change:transform}
.card{transform:skewX(var(--sk,0deg));width:clamp(264px,26vw,380px);background:var(--ivoire);border-radius:26px;padding:14px 14px 16px;display:grid;gap:14px;position:relative;box-shadow:0 30px 60px rgba(120,0,25,.12);transform-style:preserve-3d}
html[dir="rtl"] .card{direction:rtl}
.card-vis{height:clamp(200px,32svh,320px);border-radius:18px;display:flex;align-items:center;justify-content:center;background:radial-gradient(70% 70% at 50% 60%,var(--tint),#F2D6DD);position:relative;overflow:hidden}
.card-vis svg{height:82%;width:auto;max-width:86%;overflow:visible;filter:drop-shadow(0 20px 24px rgba(60,0,10,.35));transition:transform .8s var(--ease-out)}
.card:hover .card-vis svg{transform:translateY(-8px) rotate(-4deg) scale(1.04)}
.card-n{position:absolute;top:12px;inset-inline-start:14px;font-family:"Gloock",Georgia,serif;font-size:1rem;color:var(--noir);opacity:.6}
.badge{position:absolute;top:12px;inset-inline-end:12px;background:var(--cerise);color:var(--ivoire);border-radius:999px;padding:4px 10px;font-size:.68rem;font-weight:800}
.card-kind{position:absolute;bottom:12px;inset-inline-start:14px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted-d)}
html[lang="ar"] .card-kind{letter-spacing:0;font-size:.75rem}
.card-body{display:grid;gap:6px;padding:0 6px}
.card h3{font-size:1.7rem;line-height:1}
.card p{color:var(--muted-d);font-size:.92rem;line-height:1.5;min-height:4.5em}
.card-tut{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;color:var(--muted-d);padding:0 6px}
.card-tut i{width:18px;height:18px;border-radius:50%;background:var(--noir);color:var(--ivoire);display:grid;place-items:center;font-size:.5rem;font-style:normal}
.card-buy{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 0 0 6px}
html[dir="rtl"] .card-buy{padding:0 6px 0 0}
.card-buy .pr{font-family:var(--f-display);font-size:1.45rem;line-height:1;white-space:nowrap}
.card-buy s{display:block;font-family:var(--f-body);font-size:.8rem;color:var(--muted-d)}
.col-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(18px,4svh,36px);height:2px;background:var(--line-d)}
.col-bar i{position:absolute;inset:0;background:var(--cerise);transform-origin:left;transform:scaleX(0)}
.col-hint{position:absolute;inset-inline-end:var(--gutter);bottom:clamp(30px,5svh,50px);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--muted-d)}
@media (min-width:821px){.col-hint{display:none}}

/* ticker */
.ticker{background:var(--cerise);color:var(--ivoire);overflow:hidden;padding-block:20px;direction:ltr}
.tk{display:flex;width:max-content}
.tk span{display:inline-flex;align-items:center;gap:40px;padding-right:40px;font-family:"Gloock",Georgia,serif;font-size:clamp(1.8rem,3.6vw,3.4rem);white-space:nowrap}
.tk span::after{content:"✦";font-size:.5em;color:var(--noir)}

/* ---------- AVIS (social proof) ---------- */
.avis{padding:clamp(80px,11vw,150px) var(--gutter);background:var(--noir-2);display:grid;gap:clamp(36px,5vw,60px)}
.avis-head{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end}
.avis-head h2{font-size:var(--t-h2)}
.avis-head h2 em{color:var(--cerise)}
.avis-head p{color:var(--muted);max-width:40ch;justify-self:end;font-size:1.1rem}
.proof{display:flex;gap:clamp(24px,5vw,70px);flex-wrap:wrap;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof div{display:grid;gap:4px}
.proof b{font-family:var(--f-display);font-weight:400;font-size:clamp(2rem,4vw,3.4rem);line-height:1}
.proof b small{font-size:.45em;color:var(--cerise);margin-inline-start:4px}
.proof span{color:var(--muted);font-size:.9rem}
.avis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.av{border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:18px;align-content:start;background:var(--noir)}
.av .stars{color:var(--cerise);letter-spacing:.12em;font-size:.9rem}
.av blockquote{margin:0;font-family:var(--f-ital);font-size:clamp(1.25rem,1.6vw,1.5rem);line-height:1.35;text-wrap:pretty}
html[lang="ar"] .av blockquote{font-style:normal}
.av footer{display:flex;justify-content:space-between;gap:12px;align-items:end;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:14px}
.av footer b{color:var(--ivoire);display:block;font-weight:700}
.av footer span:last-child{display:flex;align-items:center;gap:8px;white-space:nowrap}
.av footer i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.avis-note{color:var(--muted);font-size:.8rem}
@media (max-width:900px){.avis-grid{grid-template-columns:1fr}.avis-head{grid-template-columns:1fr}.avis-head p{justify-self:start}}

/* ---------- DELIVERY ---------- */
.deliv{padding:clamp(90px,13vw,170px) var(--gutter);background:var(--noir);display:grid;gap:clamp(50px,8vw,100px)}
.deliv-head{display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:end}
.deliv-head h2{font-size:var(--t-h2)}
.deliv-head h2 em{color:var(--cerise)}
.deliv-head p{color:var(--muted);max-width:40ch;justify-self:end;font-size:1.1rem}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.stat{padding:28px 0;display:grid;gap:8px;border-inline-end:1px solid var(--line);padding-inline:0 20px}
.stat:last-child{border:0}
.stat b{font-family:"Gloock",Georgia,serif;font-weight:400;font-size:clamp(4rem,10vw,9rem);line-height:.85;color:var(--ivoire);font-variant-numeric:tabular-nums}
.stat b small{font-size:.35em;color:var(--cerise);margin-inline-start:6px}
.stat span{color:var(--muted)}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:0}
.how li{list-style:none;border:1px solid var(--line);border-radius:22px;padding:26px;display:grid;gap:14px;background:var(--noir-2);position:relative}
.how .n{width:42px;height:42px;border-radius:50%;background:var(--cerise);display:grid;place-items:center;font-weight:800}
.how h3{font-size:1.9rem}
.how p{color:var(--muted)}
.fee{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;border:1px solid var(--line);border-radius:26px;padding:clamp(22px,3vw,36px);background:linear-gradient(135deg,var(--noir-2),var(--noir))}
.fee-copy{display:grid;gap:10px}
.fee-copy h3{font-size:var(--t-h3)}
.fee-copy p{color:var(--muted);max-width:40ch}
.fee-ctl{display:grid;gap:14px}
.fee select{height:52px;border-radius:14px;border:1px solid var(--line);background:var(--noir-2);color:var(--ivoire);padding:0 16px;width:100%}
.fee select:focus{outline:2px solid var(--cerise);outline-offset:1px}
.fee-out{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fee-out div{border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:4px}
.fee-out span{color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800}
html[lang="ar"] .fee-out span{letter-spacing:0}
.fee-out b{font-family:var(--f-display);font-weight:400;font-size:1.7rem;line-height:1}
.fee-note{color:var(--muted);font-size:.78rem}
@media (max-width:820px){.deliv-head,.how,.fee{grid-template-columns:1fr}.deliv-head p{justify-self:start}.stats{grid-template-columns:1fr}.stat{border-inline-end:0;border-bottom:1px solid var(--line)}}

/* ---------- GESTE (frame) ---------- */
.geste-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--noir)}
.frame{position:absolute;inset:0;clip-path:inset(26% 30% 26% 30% round 26px);background:linear-gradient(140deg,#5A0012,#E0002B 50%,#FF5A7A);z-index:2;overflow:hidden}
.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.has-video .frame video{opacity:1}
.eye{position:absolute;left:50%;top:50%;width:min(780px,90vw);transform:translate(-50%,-50%)}
.eye svg{width:100%;height:auto;overflow:visible}
.has-video .eye{opacity:0}
.g-word{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-family:var(--f-display);font-size:clamp(2.2rem,4.8vw,5.6rem);line-height:.95;z-index:3;pointer-events:none;text-wrap:balance}
.g-word.l{inset-inline-start:var(--gutter);inset-inline-end:calc(70% + 2vw);justify-content:flex-start;text-align:start}
.g-word.r{inset-inline-start:calc(70% + 2vw);inset-inline-end:var(--gutter);justify-content:flex-end;text-align:end}
.g-word em{color:var(--cerise)}
.g-cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,5svh,44px);display:flex;justify-content:space-between;gap:20px;z-index:3;color:var(--ivoire)}
.g-cap p{max-width:40ch}
@media (max-width:820px){.frame{clip-path:inset(30% 18% 30% 18% round 20px)}.g-word{font-size:clamp(2.2rem,11vw,3.4rem);white-space:nowrap}.g-word.l{inset-inline-end:auto;inset-inline-start:var(--gutter);top:13%;bottom:auto}.g-word.r{inset-inline-start:auto;inset-inline-end:var(--gutter);top:auto;bottom:18%}.g-cap .lbl{display:none}}

/* ---------- FOOTER ---------- */
.foot{background:var(--cerise);color:var(--ivoire);padding:clamp(80px,11vw,140px) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));overflow:hidden;position:relative}
.club{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
.club h2{font-size:var(--t-h2)}
.club h2 em{color:var(--noir)}
.club form{display:grid;gap:12px}
.field{display:flex;gap:12px;border-bottom:2px solid rgba(255,244,241,.5);padding-bottom:8px}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:none;font-size:1.1rem;padding:10px 0;color:var(--ivoire)}
.field input::placeholder{color:rgba(255,244,241,.7)}
.field button{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:var(--t-label);white-space:nowrap}
html[lang="ar"] .field button{letter-spacing:0;font-size:.85rem}
.form-msg{min-height:1.4em;font-size:.92rem}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(50px,8vw,100px);padding-top:26px;border-top:1px solid rgba(255,244,241,.3)}
.foot-cols div{display:grid;gap:8px;align-content:start}
.foot-cols h4{margin:0 0 6px;font-family:var(--f-body);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;opacity:.75;line-height:1.4}
html[lang="ar"] .foot-cols h4{letter-spacing:0;font-size:.8rem}
.foot-cols a{justify-self:start;position:relative}
.foot-cols a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.foot-cols a:hover::after{transform:scaleX(1);transform-origin:left}
.foot-wa{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:var(--noir);color:var(--ivoire);font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;font-weight:800;width:max-content;margin-top:6px}
html[lang="ar"] .foot-wa{letter-spacing:0;font-size:.8rem}
.wordmark{font-family:"Gloock",Georgia,serif;font-size:clamp(4rem,20vw,22rem);line-height:.78;text-align:center;margin-top:clamp(40px,7vw,90px);white-space:nowrap;letter-spacing:-.02em;color:var(--noir);direction:ltr}
.wordmark span{display:inline-block}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;font-size:.8rem}
.legal a{text-decoration:underline;text-underline-offset:3px;font-weight:700}
@media (max-width:820px){.card-buy .pr{font-size:1.15rem}.card p{min-height:0}.club{grid-template-columns:1fr}.foot-cols{grid-template-columns:1fr 1fr}.foot{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}}

/* ---------- MOBILE ORDER BAR ---------- */
.mcta{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:58;display:none;align-items:center;gap:12px;padding:7px 7px 7px 14px;border-radius:999px;background:var(--ivoire);color:var(--noir);box-shadow:0 20px 40px rgba(0,0,0,.35);transform:translateY(160%);transition:transform .6s var(--ease-out)}
html[dir="rtl"] .mcta{padding:7px 14px 7px 7px}
.mcta.is-on{transform:none}
body.drawer-open .mcta,body.menu-open .mcta{transform:translateY(160%)}
.mcta i{width:30px;height:30px;border-radius:50%;background:var(--shade);flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.mcta .t{display:grid;flex:1;min-width:0;line-height:1.15}
.mcta .t b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcta .t span{font-size:.72rem;color:var(--muted-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcta .btn{height:44px;padding:0 18px}
html[lang="ar"] .mcta .btn{padding:0 18px}
@media (max-width:900px){.mcta{display:flex}.col-bar{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}.col-hint{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}}

/* ---------- DRAWER (COD order) ---------- */
.shade-bg{position:fixed;inset:0;z-index:70;background:rgba(11,5,7,.6);backdrop-filter:blur(4px);opacity:0;visibility:hidden}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;z-index:71;width:min(520px,100vw);background:var(--ivoire);color:var(--noir);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 20px) clamp(18px,3vw,32px) calc(env(safe-area-inset-bottom,0px) + 28px);display:grid;gap:18px;align-content:start;visibility:hidden}
.d-top{display:flex;justify-content:space-between;align-items:center}
.d-top h3{font-size:1.9rem}
.d-close{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-d);font-size:1.2rem}
.d-prod{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border-radius:18px;background:var(--rose)}
.d-prod .v{height:96px;border-radius:12px;background:var(--ivoire);display:flex;align-items:center;justify-content:center}
.d-prod .v svg{height:80%;width:auto;max-width:80%}
.d-prod h4{margin:0;font-family:var(--f-display);font-weight:400;font-size:1.4rem;line-height:1.05}
.d-prod p{font-size:.85rem;color:var(--muted-d)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.fl{display:grid;gap:6px;min-width:0}
.fl > span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted-d)}
html[lang="ar"] .fl > span{letter-spacing:0;font-size:.85rem}
.fl input,.fl select{height:48px;border-radius:12px;border:1px solid rgba(11,5,7,.2);background:#fff;padding:0 14px;color:var(--noir);width:100%;min-width:0}
.fl input:focus,.fl select:focus{outline:2px solid var(--cerise);outline-offset:1px}
.fl input[aria-invalid="true"],.fl select[aria-invalid="true"]{border-color:var(--cerise)}
.fl .err{font-size:.78rem;color:var(--cerise-d);min-height:1em}
.phone{display:flex;gap:8px;direction:ltr}
.phone .pre{display:grid;place-items:center;height:48px;padding:0 12px;border-radius:12px;border:1px solid rgba(11,5,7,.2);background:#fff;font-weight:700;flex:none;direction:ltr}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:grid;gap:2px;padding:12px 14px;border-radius:14px;border:1px solid rgba(11,5,7,.2);background:#fff;font-size:.9rem;font-weight:700;cursor:pointer}
.seg span small{font-weight:500;color:var(--muted-d)}
.seg input:checked+span{border-color:var(--cerise);box-shadow:0 0 0 2px var(--cerise) inset;background:#FFF0F2}
.seg input:focus-visible+span{outline:2px solid var(--noir);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(11,5,7,.15)}
.chips button[aria-pressed="true"]{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--noir)}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(11,5,7,.2);border-radius:999px;height:44px;background:#fff;width:max-content}
.qty button{width:40px;height:100%;font-size:1.1rem}
.qty output{min-width:24px;text-align:center;font-weight:800}
.sum{border-top:1px solid var(--line-d);padding-top:14px;display:grid;gap:8px}
.sum div{display:flex;justify-content:space-between;font-size:.95rem}
.sum .tot{font-family:var(--f-display);font-size:1.6rem}
.cod{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#F3FFF6;color:#155E2E;font-size:.88rem;font-weight:700}
.d-actions{display:grid;gap:10px}
.d-actions .btn{justify-content:space-between;width:100%}
.d-note{font-size:.78rem;color:var(--muted-d);text-align:center}
.ok-view{display:grid;gap:16px;text-align:center;justify-items:center;padding-top:30px}
.ok-view .tick{width:84px;height:84px;border-radius:50%;background:var(--cerise);color:var(--ivoire);display:grid;place-items:center;font-size:2.2rem}
.ok-view h3{font-size:2.4rem}
.ok-view p{color:var(--muted-d);max-width:36ch}
.ok-view .ref{font-weight:800;letter-spacing:.1em}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:80;transform:translate(-50%,220%);background:var(--ivoire);color:var(--noir);padding:14px 20px;border-radius:999px;font-size:.9rem;font-weight:600;box-shadow:0 20px 40px rgba(0,0,0,.35);max-width:calc(100vw - 32px);display:flex;gap:10px;align-items:center}
.toast i{width:9px;height:9px;border-radius:50%;background:var(--cerise);flex:none}

/* ---------- static fallback (reduced motion / no GSAP) ---------- */
.rm .ls-bullet{transform:none}
.rm .ls-cap{display:none}
.rm .paint{display:none}
.rm .flood{display:none}
.rm .c-lid{transform:rotateX(172deg)}
.rm .col-stage{height:auto;padding-block:120px 60px}
.rm .track{width:auto;flex-wrap:wrap;margin-top:60px;justify-content:center}
.rm .col-head{position:static;margin:0 var(--gutter)}
.rm .frame{clip-path:inset(6% 6% round 24px)}
.rm .grain,.rm .cue i{animation:none}
.rm .g-word{display:none}
@media (prefers-reduced-motion:reduce){.pan.shim::before{animation:none}}