/* ZITARUS · L’or du Nord */
:root{
  --canvas:#12160F;
  --panel:#1B2116;
  --panel-2:#222A1B;
  --ivory:#F2ECDF;
  --ivory-ink:#1E2318;
  --ivory-ink-2:#4A4E3E;
  --gold-ink:#7A5818;
  --accent:#C9A04E;
  --accent-hover:#E3C678;
  --accent-muted:rgba(201,160,78,.28);
  --olive:#6E7836;
  --leaf:#9DAE3A;
  --leaf-ink:#55661C;
  --on-accent:#16190F;
  --text-secondary:#B8B29F;
  --text-primary:#F1EBDD;
  --line:rgba(201,160,78,.22);
  --line-strong:rgba(201,160,78,.55);
  --ease-out:cubic-bezier(.22,.8,.26,1);
  --ease-soft:cubic-bezier(.45,.05,.25,1);
  --tshadow:0 1px 2px rgba(6,7,4,.95),0 3px 12px rgba(6,7,4,.78),0 10px 44px rgba(6,7,4,.8);
  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px);
  --wrap:1240px;
  /* one spacing and radius scale for every section */
  --space-sec:clamp(80px,12vw,168px);
  --space-block:clamp(48px,6.5vw,88px);
  --space-head:clamp(28px,3.6vw,48px);
  --gap:clamp(16px,2vw,24px);
  --radius-sm:12px;
  --radius:20px;
  --radius-lg:28px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;animation:pageIn 1.1s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--canvas);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:12px}

/* ---------- Environment layer ---------- */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;inset:-20%;background:
  radial-gradient(40% 35% at 20% 30%,rgba(201,160,78,.10),transparent 70%),
  radial-gradient(35% 40% at 80% 70%,rgba(110,120,54,.12),transparent 70%);
  animation:haze 96s var(--ease-soft) infinite alternate;animation-delay:-30s}
.env::after{content:"";position:absolute;inset:0;opacity:.07;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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes haze{0%{transform:translate3d(-4%,-2%,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-2%,4%,0) scale(1.02)}}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent-hover);opacity:0;box-shadow:0 0 8px rgba(227,198,120,.6);animation:mote 22s linear infinite}
@keyframes mote{0%{transform:translate3d(0,10vh,0);opacity:0}15%{opacity:.35}85%{opacity:.25}100%{transform:translate3d(6vw,-90vh,0);opacity:0}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px var(--gutter);transition:background .5s var(--ease-out),backdrop-filter .5s var(--ease-out),padding .5s var(--ease-out)}
.nav.solid{background:rgba(18,22,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-top:10px;padding-bottom:10px;box-shadow:0 1px 0 var(--line)}
.nav .brand{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none}
.nav .brand img{height:62px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.7)) drop-shadow(0 0 1px rgba(0,0,0,.6));transition:height .5s var(--ease-out)}
.brand-tag{font-family:var(--display);font-size:13px;line-height:1;letter-spacing:.38em;padding-left:.38em;text-transform:uppercase;color:var(--accent-hover);text-shadow:0 1px 6px rgba(0,0,0,.85);white-space:nowrap;transition:font-size .5s var(--ease-out)}
.nav.solid .brand img{height:46px}
.nav.solid .brand-tag{font-size:11px}
@media (max-width:720px){.nav .brand img{height:52px}.nav .brand-tag{font-size:11.5px}.nav.solid .brand img{height:42px}.nav.solid .brand-tag{font-size:10px}}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav ul a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease-out);text-shadow:0 1px 6px rgba(0,0,0,.6)}
.nav ul a:hover,.nav ul a[aria-current]{color:var(--text-primary)}
.nav ul a[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:8px}
.nav-actions{display:flex;align-items:center;gap:10px}
.nav-links-cta,.burger{display:none}
@media (max-width:900px){
  .nav ul.nav-links{position:absolute;top:calc(100% + 6px);left:var(--gutter);right:var(--gutter);display:flex;flex-direction:column;gap:0;padding:6px 20px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 24px 60px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s}
  .nav.open ul.nav-links{opacity:1;visibility:visible;transform:none}
  .nav ul.nav-links li a{display:block;padding:15px 2px;font-size:13px;border-bottom:1px solid var(--line);text-shadow:none}
  .nav ul.nav-links a[aria-current]{text-decoration:none;color:var(--accent-hover)}
  .nav-links-cta{display:block;margin-top:18px}
  .nav ul.nav-links .nav-links-cta a{display:flex;border:0;font-family:var(--body);font-size:15px;letter-spacing:.02em;text-transform:none;color:var(--on-accent);padding:14px 20px}
  .burger{display:inline-grid;place-content:center;gap:6px;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:rgba(18,22,15,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer}
  .burger i{display:block;width:18px;height:1.5px;background:var(--text-primary);transition:transform .35s var(--ease-out)}
  .nav.open .burger i:first-of-type{transform:translateY(3.75px) rotate(45deg)}
  .nav.open .burger i:last-of-type{transform:translateY(-3.75px) rotate(-45deg)}
}
@media (max-width:420px){.nav-cta{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;border-radius:999px;padding:14px 26px;border:1px solid transparent;cursor:pointer;transition:background .35s var(--ease-out),color .35s var(--ease-out),border-color .35s var(--ease-out),transform .35s var(--ease-out),box-shadow .35s var(--ease-out)}
.btn-gold{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 30px -10px rgba(201,160,78,.6)}
.btn-gold:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 14px 36px -12px rgba(227,198,120,.7)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary);background:rgba(18,22,15,.35)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-hover)}
.btn-sm{padding:10px 18px;font-size:14px}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- Hero ---------- */
.hero{position:relative;height:1000vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--canvas)}
.poster,.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.poster.alt{opacity:0;transition:opacity 1.1s var(--ease-out)}
.poster.alt.on{opacity:1}
.hero video{opacity:0;transition:opacity .8s var(--ease-out);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,12,7,0) 35%,rgba(10,12,7,.62) 100%),
  linear-gradient(to bottom,rgba(10,12,7,.55),rgba(10,12,7,0) 18%)}
.bands{position:absolute;inset:0;pointer-events:none}
.side{position:absolute;top:0;bottom:0;width:62%;pointer-events:none;opacity:0}
.side.l{left:0;background:linear-gradient(90deg,rgba(8,10,5,.62) 0%,rgba(8,10,5,.42) 38%,rgba(8,10,5,0) 100%)}
.side.r{right:0;background:linear-gradient(270deg,rgba(8,10,5,.62) 0%,rgba(8,10,5,.42) 38%,rgba(8,10,5,0) 100%)}
.side.t,.side.b{left:0;right:0;width:auto;height:58%}
.side.t{top:0;bottom:auto;background:linear-gradient(180deg,rgba(8,10,5,.72) 0%,rgba(8,10,5,.4) 45%,rgba(8,10,5,0) 100%)}
.side.b{top:auto;bottom:0;background:linear-gradient(0deg,rgba(8,10,5,.84) 0%,rgba(8,10,5,.55) 45%,rgba(8,10,5,0) 100%)}


.band{position:absolute;isolation:isolate;top:50%;width:min(44vw,560px);opacity:0;text-shadow:var(--tshadow);transform:translateY(-50%)}
.band.left{left:var(--gutter)}
.band.right{right:var(--gutter);text-align:right}
.band::before{content:"";position:absolute;inset:-30% -24%;z-index:-1;pointer-events:none;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 60% 58% at 50% 50%,rgba(8,10,5,var(--sa,.66)) 0%,rgba(8,10,5,calc(var(--sa,.66)*.66)) 46%,rgba(8,10,5,0) 76%)}
.band.left::before{background:radial-gradient(ellipse 68% 66% at 42% 50%,rgba(8,10,5,var(--sa,.66)) 0%,rgba(8,10,5,calc(var(--sa,.66)*.82)) 52%,rgba(8,10,5,0) 82%)}
.band.right::before{background:radial-gradient(ellipse 68% 66% at 58% 50%,rgba(8,10,5,var(--sa,.66)) 0%,rgba(8,10,5,calc(var(--sa,.66)*.82)) 52%,rgba(8,10,5,0) 82%)}
.band .btn{text-shadow:none;pointer-events:auto}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-hover);display:inline-flex;align-items:center;gap:10px}
.band h1,.band h2,.band .line{font-family:var(--display);font-weight:400;line-height:1.08;margin:.3em 0 .25em;letter-spacing:.005em}
.band h1{font-size:clamp(40px,5.2vw,78px)}
.band h2,.band .line{font-size:clamp(34px,4.3vw,64px)}
.band .line.small{font-size:clamp(24px,2.7vw,38px);color:var(--text-primary)}
.band p{font-size:clamp(16px,1.3vw,20px);color:var(--text-primary);margin:.4em 0 0;max-width:34ch}
.band.right p{margin-left:auto}
.band .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.band .em{color:var(--accent-hover)}

/* split text */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block}
.vis{display:block}

/* entrance: approach from depth (band 1) */
.fx-approach .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:scale(calc(.82 + .18*var(--kc)));transform-origin:50% 60%}
/* entrance: leaf flutter (band 2) */
.fx-flutter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.4,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* entrance: drift down (band 3) */
.fx-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-28px))}
/* entrance: blur to sharp + punch (band 4) */
.fx-punch .soft-wrap{position:relative;display:block}
.fx-punch .soft,.fx-punch .sharp{display:block}
.fx-punch .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--ka,0))}
.fx-punch .sharp{opacity:var(--ka,0)}
.fx-punch .punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.fx-punch .punch .w.em{--ov:.24;--sd:.14;--ss:3}
/* entrance: rise into staged settle (band 5) */
.fx-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*34px))}
.fx-rise .sub{--ks:clamp(0,(var(--k,0) - .62)*4,1);opacity:var(--ks);transform:translateY(calc((1 - var(--ks))*14px))}
.fx-rise .ctas{--kb:clamp(0,(var(--k,0) - .74)*5,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}
.fx-rise .kicker{--ks:clamp(0,(var(--k,0) - .02)*3,1);opacity:var(--ks)}

/* loading ring & scroll cue */
.loader{position:absolute;right:var(--gutter);bottom:28px;display:flex;align-items:center;gap:12px;color:var(--accent);font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:opacity .6s var(--ease-out)}
.loader svg{width:40px;height:40px;transform:rotate(-90deg)}
.loader circle.track{stroke:var(--accent-muted)}
.loader span{color:var(--text-secondary);text-shadow:0 1px 6px rgba(0,0,0,.7)}
.stage.video-ready .loader{opacity:0}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);text-shadow:0 1px 6px rgba(0,0,0,.7);transition:opacity .5s var(--ease-out)}
.cue i{width:1px;height:38px;background:linear-gradient(var(--accent),transparent);animation:cue 2.8s var(--ease-soft) infinite;animation-delay:-.8s;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero.past-start .cue{opacity:0}
.skip-film{position:absolute;left:var(--gutter);bottom:28px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--text-primary);padding:12px 18px;border:1px solid var(--line-strong);border-radius:999px;background:rgba(10,12,7,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .5s var(--ease-out),visibility .5s,border-color .3s var(--ease-out),color .3s var(--ease-out)}
.skip-film:hover{border-color:var(--accent);color:var(--accent-hover)}
.hero.near-end .skip-film{opacity:0;visibility:hidden}
@media (max-height:560px){.cue,.loader{display:none}}

/* static hero (the five gates) */
.hero-static{display:none}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),(prefers-reduced-motion: reduce){
  .hero{height:auto}
  .stage{position:relative;height:auto;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end}
  .stage .poster,.stage video,.stage .bands,.stage .side,.stage .loader,.stage .cue,.stage .skip-film{display:none}
  .hero-static{display:block;position:relative;width:100%;min-height:100vh;min-height:100svh}
  .hero-static .img{position:absolute;left:0;right:0;top:0;height:66%;background:url("table-zitarus.jpg") 76% 55%/cover no-repeat}
  .hero-static .img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,12,7,.6) 0%,rgba(10,12,7,0) 22%,rgba(10,12,7,0) 62%,var(--canvas) 100%)}
  .hero-static .copy{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:120px var(--gutter) 56px;text-shadow:var(--tshadow)}
  .hero-static .title{font-family:var(--display);font-weight:400;font-size:clamp(38px,9vw,64px);line-height:1.06;margin:.3em 0 .3em;max-width:14ch}
  .hero-static p{margin:0 0 26px;max-width:36ch;color:var(--text-primary)}
  .hero-static .btn{text-shadow:none;align-self:flex-start}
}

/* ---------- Sections (shared) ---------- */
.flow{position:relative}
.sec{position:relative;padding:var(--space-sec) var(--gutter)}
.wrap{max-width:var(--wrap);margin:0 auto;position:relative}
.sec .kicker{margin-bottom:18px}
.sec h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,68px);line-height:1.06;margin:0 0 .45em;letter-spacing:.005em}
.lede{font-size:clamp(18px,1.5vw,21px);color:var(--text-secondary);max-width:52ch;margin:0}
.sprig{width:22px;height:22px;flex:none}
.kicker .sprig{color:var(--leaf)}
.node{position:absolute;left:calc(-1 * var(--gutter) + 40px);top:6px;width:11px;height:11px;border-radius:50%;border:1px solid var(--line-strong);background:var(--canvas);transition:background .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .6s var(--ease-out)}
.node.lit{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(201,160,78,.12),0 0 18px rgba(227,198,120,.6)}
@media (max-width:1100px){.node{display:none}}

/* reveal choreography */
.rv .r{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out)}
.rv.in .r{opacity:1;transform:none}
.rv.in .r:nth-child(2){transition-delay:.1s}
.rv.in .r:nth-child(3){transition-delay:.2s}
.rv.in .r:nth-child(4){transition-delay:.3s}
.rv.in .r:nth-child(5){transition-delay:.4s}
.rv.settled .r,.rv.settled .r:nth-child(2),.rv.settled .r:nth-child(3),.rv.settled .r:nth-child(4),.rv.settled .r:nth-child(5){transition-delay:0s}

/* gold swash divider (from the logo) */
.swash{display:block;width:min(420px,70%);height:auto;margin:0 auto;overflow:visible}
.swash path{fill:none;stroke:url(#goldGrad);stroke-width:2;stroke-linecap:round;stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 2.2s var(--ease-out)}
.swash.in path{stroke-dashoffset:0}
.divider{padding:0 var(--gutter)}

/* ---------- 01 Origine ---------- */
.origine .grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.logo-stage{position:relative;aspect-ratio:1/1;display:grid;place-items:center;border-radius:50%;background:radial-gradient(closest-side,rgba(201,160,78,.13),rgba(201,160,78,0) 70%)}
.logo-stage img{width:86%;position:relative;z-index:1}
.logo-stage .halo{position:absolute;inset:6%;border-radius:50%;border:1px solid var(--line);animation:spin 120s linear infinite;animation-delay:-40s}
.logo-stage .halo::after{content:"";position:absolute;top:-4px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent-hover)}
@keyframes spin{to{transform:rotate(360deg)}}
.equation{font-family:var(--display);font-size:clamp(34px,4.8vw,66px);line-height:1.08;margin:0 0 .5em}
.equation .plus,.equation .eq{color:var(--accent);padding:0 .12em}
.equation .res{display:block;color:var(--accent-hover);letter-spacing:.06em}
.origine .body p{color:var(--text-secondary);max-width:46ch}
.coords{font-family:var(--mono);font-size:12px;letter-spacing:.18em;color:var(--accent);margin-top:28px;display:flex;align-items:center;gap:12px}
.coords::before{content:"";width:28px;height:1px;background:var(--accent)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:var(--space-block);background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pillar{background:var(--canvas);padding:clamp(26px,3vw,36px)}
.pillar b{display:block;font-family:var(--display);font-weight:400;font-size:26px;color:var(--text-primary);margin-bottom:8px}
.pillar span{color:var(--text-secondary);font-size:16px}
.pillar .num{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);display:block;margin-bottom:22px}
@media (max-width:860px){.origine .grid{grid-template-columns:1fr}.logo-stage{max-width:340px;margin:0 auto;width:100%}.pillars{grid-template-columns:1fr}}

/* ---------- 02 Nommer l'or ---------- */
.nommer{background:linear-gradient(180deg,rgba(27,33,22,0),rgba(27,33,22,.9) 18%,rgba(27,33,22,.9) 82%,rgba(27,33,22,0))}
.nommer .wrap{text-align:center}
.nommer h2{font-size:clamp(44px,7vw,104px)}
.nommer .lede{margin:0 auto;max-width:58ch}
.bulk{margin:var(--space-block) auto 0;max-width:980px;text-align:start}
.bulk-bar{position:relative;height:clamp(64px,8vw,88px);border-radius:var(--radius-sm);overflow:hidden;background:rgba(241,235,221,.05);border:1px solid var(--line);display:flex}
.bulk-bar .seg{position:relative;height:100%;display:flex;align-items:flex-end;padding:0 18px 14px;transform-origin:left;transform:scaleX(0);transition:transform 2s var(--ease-out)}
.bulk-bar .vrac{flex:86;background:repeating-linear-gradient(135deg,rgba(184,178,159,.16) 0 2px,rgba(184,178,159,.05) 2px 9px)}
.bulk-bar .nom{flex:14;background:linear-gradient(180deg,var(--accent-hover),var(--accent));transition-delay:.9s}
.bulk.in .bulk-bar .seg{transform:scaleX(1)}
.bulk-legend{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.bulk-legend strong{font-family:var(--display);font-weight:400;font-size:clamp(40px,5vw,64px);letter-spacing:0;color:var(--text-primary);display:block;line-height:1;margin-bottom:6px;text-transform:none}
.bulk-legend .gold strong{color:var(--accent-hover)}
.bulk-legend .gold{text-align:end}
.nommer .answer{font-family:var(--display);font-size:clamp(24px,2.6vw,36px);line-height:1.3;max-width:30ch;margin:var(--space-block) auto 0;color:var(--text-primary)}
.nommer .answer em{font-style:normal;color:var(--accent-hover)}
.srcs{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--text-secondary);margin-top:30px}
.srcs a{color:var(--text-secondary);text-underline-offset:3px}
.srcs a:hover{color:var(--accent)}

/* ---------- 03 Rituel ---------- */
.rituel .top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.pour{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px}
.pour svg{width:min(420px,92%);height:auto;overflow:visible}
.pour .thread{stroke:url(#streamGrad);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:80;stroke-dashoffset:80}
/* the bottle turns around its mouth: resting, then tipped to pour while the button is held */
.pour .bottle{transform:translate(170px,134px) rotate(80deg) scale(.64);transition:transform .7s var(--ease-soft)}
.pour svg.pouring .bottle{transform:translate(170px,134px) rotate(124deg) scale(.64);transition:transform .45s var(--ease-out)}
.pour .pool{transform-origin:170px 209px;transform:scale(var(--pp,0),calc(var(--pp,0)*1))}
.pour .glint{opacity:calc(var(--pp,0)*.9)}
.hold{position:relative;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none}
.hold .fill{position:absolute;inset:0;background:var(--accent-hover);transform-origin:left;transform:scaleX(var(--hp,0));opacity:.55;pointer-events:none}
.hold .label{position:relative}
.rituel.done .hold{pointer-events:none}
.pour .hint{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary);min-height:1.4em;text-align:center;transition:opacity .5s var(--ease-out)}
.rituel .after{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);color:var(--accent-hover);opacity:0;transform:translateY(10px);transition:opacity 1s var(--ease-out) 1.4s,transform 1s var(--ease-out) 1.4s;margin:0;text-align:center}
.rituel.done .after{opacity:1;transform:none}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:var(--space-block)}
.rcard{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--panel);border:1px solid var(--line);opacity:.34;filter:saturate(.35);transform:translateY(12px);transition:opacity 1s var(--ease-out),filter 1.2s var(--ease-out),transform 1s var(--ease-out),border-color 1s var(--ease-out)}
.rituel.done .rcard{opacity:1;filter:none;transform:none;border-color:var(--line-strong)}
.rituel.done .rcard:nth-child(2){transition-delay:.25s}
.rituel.done .rcard:nth-child(3){transition-delay:.5s}
.rituel.settled .rcard,.rituel.settled .rcard:nth-child(2),.rituel.settled .rcard:nth-child(3){transition-delay:0s}
.rcard .ph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--panel-2)}
.rcard .tx{padding:clamp(22px,2.4vw,28px)}
.rcard h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.2vw,28px);margin:0 0 8px}
.rcard p{margin:0;color:var(--text-secondary);font-size:16px}
@media (max-width:900px){.rituel .top{grid-template-columns:1fr}.cards3{grid-template-columns:1fr}}

/* ---------- 04 Notre huile (ivory) ---------- */
.huile{background:var(--ivory);color:var(--ivory-ink);border-radius:clamp(22px,4vw,48px);margin:0 clamp(8px,1.4vw,20px)}
.huile .kicker{color:var(--gold-ink)}
.huile .kicker .sprig{color:var(--leaf-ink)}
.huile .lede{color:var(--ivory-ink-2)}
.huile :focus-visible{outline-color:var(--gold-ink)}
.huile-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.feature{position:sticky;top:120px;margin:0;border-radius:var(--radius);overflow:hidden;background:#E9DCC4;box-shadow:0 30px 60px -30px rgba(40,34,18,.45)}
.feature img{width:100%;aspect-ratio:2/3;object-fit:cover}
.feature figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#F4EEDF;background:linear-gradient(to top,rgba(30,24,12,.62),rgba(30,24,12,0))}
.fiche{margin-top:var(--space-head)}
.fiche h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);margin:0 0 14px}
.fiche table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55}
.fiche thead th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);text-align:start;padding-block:0 12px;padding-inline:0 16px;border-bottom:1px solid rgba(122,88,24,.5)}
.fiche tbody th,.fiche tbody td{padding-block:16px;padding-inline:0 16px;border-bottom:1px solid rgba(122,88,24,.2);text-align:start;vertical-align:top}
.fiche tbody th{width:24%;font-weight:600;color:var(--ivory-ink)}
.fiche tbody td:nth-child(2){width:30%;font-family:var(--display);font-size:18px;line-height:1.35;color:var(--ivory-ink)}
.fiche tbody td:last-child{padding-inline-end:0;color:var(--ivory-ink-2)}
.fiche-note{margin:14px 0 0;font-size:13px;color:var(--ivory-ink-2)}
.fiche-note a{color:var(--gold-ink);text-decoration:none;font-family:var(--mono);font-size:11px}
.huile .btn-ink{background:var(--ivory-ink);color:var(--ivory);margin-top:32px}
.huile .btn-ink:hover{background:#2E3524;transform:translateY(-2px)}
@media (max-width:900px){
  /* phones: title first, then the bottle, then the technical sheet */
  .huile-grid{display:flex;flex-direction:column;gap:0}
  .huile-body{display:contents}
  .huile-body>*{order:2}
  .huile .kicker{order:0;align-self:flex-start}
  .huile h2,.huile .lede{order:0}
  .feature{order:1;position:relative;top:auto;width:100%;max-width:380px;margin:var(--space-head) auto 0}
  .huile .btn-ink{align-self:flex-start}
}
@media (max-width:640px){
  .fiche thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .fiche table,.fiche tbody,.fiche tr,.fiche tbody th,.fiche tbody td{display:block;width:auto}
  .fiche tbody tr{padding:16px 0;border-bottom:1px solid rgba(122,88,24,.22)}
  .fiche tbody tr:first-child{border-top:1px solid rgba(122,88,24,.5)}
  .fiche tbody th,.fiche tbody td{padding:0;border:0}
  .fiche tbody th{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
  .fiche tbody th,.fiche tbody td:nth-child(2){width:auto}
  .fiche tbody td:nth-child(2){font-size:20px;margin:4px 0 6px}
  .fiche tbody td:last-child{font-size:14.5px}
}

/* ---------- 05 Comme un parfum ---------- */
.parfum-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:start}
.parfum .story p:not(.lede){color:var(--text-secondary);max-width:46ch;margin:1.2em 0 0}
.why h3,.offrir h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);margin:0 0 10px}
.why ol{list-style:none;margin:0;padding:0}
.why li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:8px;padding:20px 0;border-bottom:1px solid var(--line)}
.why li:first-child{border-top:1px solid var(--line)}
.why .num{grid-row:span 2;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--accent);padding-top:6px}
.why b{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.8vw,24px);color:var(--text-primary)}
.why li span:last-child{color:var(--text-secondary);font-size:16px}
.offrir{margin-top:var(--space-block);text-align:center}
.offrir .pillars{margin-top:var(--space-head);text-align:start}
.offrir .answer{font-family:var(--display);font-size:clamp(22px,2.4vw,32px);line-height:1.3;max-width:32ch;margin:var(--space-head) auto 28px;color:var(--text-primary)}
.offrir .answer em{font-style:normal;color:var(--accent-hover)}
@media (max-width:900px){.parfum-grid{grid-template-columns:1fr}}
@media (max-width:860px){.offrir .pillars{grid-template-columns:1fr}}

/* ---------- 05 Recevoir ---------- */
.recevoir .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.recevoir .head .lede{max-width:40ch}
.grid4{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);margin-top:var(--space-block)}
.acard{position:relative;padding:clamp(26px,3.4vw,44px);border-radius:var(--radius);background:linear-gradient(160deg,var(--panel-2),var(--panel));border:1px solid var(--line);overflow:hidden;transition:border-color .5s var(--ease-out),transform .5s var(--ease-out)}
.acard:hover{border-color:var(--line-strong);transform:translateY(-4px)}
.acard::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,160,78,.16),transparent);opacity:.6;animation:breathe 7s var(--ease-soft) infinite alternate}
.acard:nth-child(2)::after{animation-delay:-2s}.acard:nth-child(3)::after{animation-delay:-4s}.acard:nth-child(4)::after{animation-delay:-6s}
@keyframes breathe{from{opacity:.25;transform:scale(.9)}to{opacity:.8;transform:scale(1.1)}}
.acard svg{width:46px;height:46px;stroke:var(--accent);fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;margin-bottom:26px}
.acard h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,31px);margin:0 0 10px}
.acard p{margin:0;color:var(--text-secondary);max-width:40ch}
@media (max-width:780px){.grid4{grid-template-columns:1fr}}

/* ---------- 06 Méditerranée ---------- */
.medi{padding:0;min-height:100vh;display:flex;align-items:center}
.medi .bg{position:absolute;inset:0;background:url("table-zitarus.jpg") 70% center/cover no-repeat}
.medi .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,17,11,.94) 0%,rgba(14,17,11,.78) 38%,rgba(14,17,11,.1) 70%),linear-gradient(to bottom,var(--canvas),rgba(18,22,15,0) 16%,rgba(18,22,15,0) 84%,var(--canvas))}
.medi .inner{position:relative;padding:var(--space-sec) var(--gutter);width:100%}
.medi .panel-t{max-width:560px}
.medi p{color:var(--text-secondary);max-width:46ch}
.medi p sup a{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:11px}
@media (max-width:760px){.medi .bg{background-image:url("table-zitarus-960.jpg")}.medi .bg::after{background:linear-gradient(to bottom,var(--canvas) 0%,rgba(14,17,11,.6) 30%,rgba(14,17,11,.94) 62%,var(--canvas))}.medi{align-items:flex-end}}

/* ---------- 07 Fondateurs ---------- */
.fondateurs .wrap{text-align:center}
.fondateurs .lede{margin:0 auto}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px);margin-top:var(--space-block)}
.person{display:flex;flex-direction:column;align-items:center}
.person .mono{letter-spacing:.04em;margin-top:0;text-transform:none;width:clamp(120px,12vw,152px);height:clamp(120px,12vw,152px);border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-strong);font-family:var(--display);font-size:40px;color:var(--accent-hover);position:relative;margin-bottom:22px;background:radial-gradient(closest-side,rgba(201,160,78,.12),transparent)}
.person .mono img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;filter:saturate(.92)}
.person .mono::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px dashed var(--line);animation:spin 90s linear infinite}
.person:nth-child(2) .mono::before{animation-direction:reverse;animation-delay:-20s}
.person b{font-family:var(--display);font-weight:400;font-size:24px}
.person span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin-top:6px}
@media (max-width:760px){.trio{grid-template-columns:1fr;gap:40px}}

/* ---------- 08 FAQ ---------- */
.faq .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,90px);align-items:start}
.faq .head{position:sticky;top:120px}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:24px 4px;font-family:var(--display);font-size:clamp(20px,1.9vw,25px);transition:color .3s var(--ease-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-hover)}
.qa summary i{flex:none;width:14px;height:14px;position:relative;transform:translateY(2px)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--accent);transition:transform .45s var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa[open] summary i::after{transform:rotate(0)}
.qa .ans{overflow:hidden;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease-out)}
.qa[open] .ans{grid-template-rows:1fr}
.qa .ans>div{min-height:0}
.qa .ans p{margin:0 4px 26px;color:var(--text-secondary);max-width:58ch}
.qa .ans a{color:var(--accent-hover);text-underline-offset:3px}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr}.faq .head{position:static}}

/* ---------- 09 Sélection (form) ---------- */
.selection .card{position:relative;border-radius:var(--radius-lg);padding:clamp(24px,5vw,72px);background:linear-gradient(165deg,var(--panel-2),var(--panel));border:1px solid var(--line-strong);overflow:hidden}
.selection .card::before{content:"";position:absolute;left:50%;top:-240px;width:620px;height:480px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(201,160,78,.2),transparent);pointer-events:none;animation:breathe 9s var(--ease-soft) infinite alternate;animation-delay:-3s}
.selection .grid{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px)}
.selection .lede{margin-bottom:26px}
.promise{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:14px}
.promise li{display:flex;gap:12px;align-items:baseline;color:var(--text-secondary);font-size:16px}
.direct{margin:26px 0 8px;color:var(--text-secondary);font-size:15px}
.contact-links{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0}
.contact-links a{color:var(--accent-hover);text-decoration:none;font-size:16px;unicode-bidi:isolate}
.contact-links a:hover{text-decoration:underline;text-underline-offset:4px}
footer .foot-contact{margin:34px 0 12px}
.promise li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-2px)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;color:var(--text-primary);background:rgba(10,12,7,.5);border:1px solid rgba(201,160,78,.45);border-radius:var(--radius-sm);padding:13px 14px;transition:border-color .3s var(--ease-out),background .3s var(--ease-out),box-shadow .3s var(--ease-out);width:100%}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.field select option{background:var(--panel);color:var(--text-primary)}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(184,178,159,.7)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-hover);background:rgba(10,12,7,.7);box-shadow:0 0 0 3px rgba(201,160,78,.2)}
.field input[type="date"]{color-scheme:dark}
.submit-row{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.submit-row small{color:var(--text-secondary);font-size:13px;max-width:40ch}
.drop{width:16px;height:22px;flex:none}
.sent:focus{outline:none}
.sent{display:none;grid-column:1/-1;text-align:center;padding:40px 10px}
.sent h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,40px);margin:12px 0 8px}
.sent p{color:var(--text-secondary);margin:0 auto;max-width:42ch}
form.is-sent>*:not(.sent){display:none}
form.is-sent .sent{display:block;animation:fadeUp .9s var(--ease-out) both}
@media (max-width:900px){.selection .grid{grid-template-columns:1fr}form{grid-template-columns:1fr}}

/* ---------- Fil d'or (signature thread) ---------- */
.fil{position:absolute;left:0;top:0;width:120px;height:100%;pointer-events:none;overflow:visible;z-index:0}
.fil path{fill:none;stroke:url(#filGrad);stroke-width:1.6;stroke-linecap:round}
.fil .fil-bg{stroke:rgba(201,160,78,.10)}
.fil circle{fill:var(--accent-hover);filter:drop-shadow(0 0 6px rgba(227,198,120,.9))}
@media (max-width:1100px){.fil{display:none}}

.fil{z-index:2}
.node{z-index:3}
.huile{z-index:3}
.pour .thread{transition:stroke-dashoffset .45s var(--ease-out)}
.pour .thread.on{stroke-dashoffset:0;transition:stroke-dashoffset .35s var(--ease-soft)}
.sec:not(.live) *,.sec:not(.live) *::before,.sec:not(.live) *::after{animation-play-state:paused}
.err{font-size:13px;color:#F0B39A}
.field [aria-invalid="true"]{border-color:#E08F6E}
.selection .wrap>.node{top:-40px}

/* ---------- Footer ---------- */
footer{padding:var(--space-sec) var(--gutter) 40px;border-top:1px solid var(--line);margin-top:var(--space-block)}
footer .top{display:grid;grid-template-columns:1fr 1.4fr;gap:60px}
.foot-brand{display:inline-flex;flex-direction:column;align-items:center;gap:8px}
footer .logo{width:300px;max-width:80vw}
footer .brand-tag{font-size:16px}
footer .tag{font-family:var(--display);font-size:22px;color:var(--text-secondary);margin:18px 0 0}
footer h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 16px}
footer ol{margin:0;padding-left:0;list-style:none;display:grid;gap:8px;font-size:14px;color:var(--text-secondary)}
footer ol a{color:var(--text-secondary);text-underline-offset:3px}
footer ol a:hover{color:var(--accent-hover)}
footer ol span{font-family:var(--mono);color:var(--accent);margin-inline-end:8px;font-size:12px}
footer .bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:70px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
@media (max-width:860px){footer .top{grid-template-columns:1fr;gap:40px}}

/* Phones and portrait tablets: the portrait film, captions in the calm lower part of the frame */
@media (max-aspect-ratio: 1/1){
  .hero{height:900vh}
  .band,.band.left,.band.right{left:var(--gutter);right:var(--gutter);width:auto;top:auto;bottom:calc(56px + env(safe-area-inset-bottom));transform:none;text-align:start}
  .band.right p{margin-left:0}
  .band::before,.band.left::before,.band.right::before{inset:-26% -12% -18%;background:radial-gradient(ellipse 72% 70% at 40% 60%,rgba(8,10,5,var(--sa,.66)) 0%,rgba(8,10,5,calc(var(--sa,.66)*.8)) 50%,rgba(8,10,5,0) 84%)}
  .band h1{font-size:clamp(34px,9.4vw,56px)}
  .band h2,.band .line{font-size:clamp(28px,7.8vw,48px)}
  .band .line.small{font-size:clamp(19px,5.2vw,28px)}
  .band p{font-size:16px;max-width:none}
  .band.mtop{top:calc(104px + env(safe-area-inset-top));bottom:calc(36px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
  .band.mtop::before{inset:-84px calc(-1 * var(--gutter)) -40px;background:linear-gradient(180deg,rgba(8,10,5,calc(var(--sa,.66)*.95)) 0%,rgba(8,10,5,calc(var(--sa,.66)*.6)) 26%,rgba(8,10,5,0) 44%,rgba(8,10,5,0) 72%,rgba(8,10,5,calc(var(--sa,.66)*1.1)) 100%)}
  .band.mtop .sub{margin-top:.5em}
  .band.mtop .ctas{margin-top:auto}
  .band .ctas .btn{flex:1 1 auto}
  .loader{bottom:auto;top:calc(104px + env(safe-area-inset-top))}
  .skip-film{bottom:auto;top:calc(104px + env(safe-area-inset-top));padding:10px 14px}
  .cue{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv .r{opacity:1;transform:none}
  .swash path{stroke-dashoffset:0}
  .bulk-bar .seg{transform:none}
  .rcard{opacity:1;filter:none;transform:none}
  .rituel .after{opacity:1;transform:none}
  .mote{display:none}
}

@media (max-width:760px){.hero-static .img{background-image:url("table-zitarus-960.jpg")}}
@media (max-height:700px) and (max-width:720px){.hero-static .img{height:56%}}

/* ---------- Language gate ---------- */
.gate{display:none}
html.gate-open{overflow:hidden}
html.gate-open .gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px var(--gutter);background:
  radial-gradient(60% 50% at 50% 42%,rgba(201,160,78,.12),rgba(201,160,78,0) 70%),
  radial-gradient(50% 45% at 70% 80%,rgba(110,120,54,.14),rgba(110,120,54,0) 70%),
  var(--canvas);transition:opacity .7s var(--ease-soft),visibility .7s}
.gate.leaving{opacity:0;visibility:hidden;pointer-events:none}
.gate-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,7vh,72px);animation:fadeUp 1.1s var(--ease-out) both}
.gate-mark{width:min(380px,72vw);height:auto;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.gate-langs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.gate-langs a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:168px;min-height:52px;padding:14px 28px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(18,22,15,.4);color:var(--text-primary);font-family:var(--display);font-size:20px;cursor:pointer;transition:background .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.gate-langs a:hover,.gate-langs a:focus-visible{border-color:var(--accent);background:var(--accent);color:var(--on-accent);transform:translateY(-2px)}
.gate-langs a[lang="ar"]{font-family:"Amiri",var(--display);font-size:22px}
@media (max-width:480px){.gate-langs{flex-direction:column;width:100%;max-width:300px}.gate-langs a{width:100%}}
/* a saved language loads hidden until main.js has swapped the strings: no flash of French */
html.i18n-wait body{visibility:hidden}

/* ---------- Language switcher (header) ---------- */
.lang-switch{display:flex;align-items:center;padding:3px;border:1px solid var(--line);border-radius:999px;background:rgba(18,22,15,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lang-switch a{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;min-width:34px;height:30px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:var(--text-secondary);font-family:var(--mono);font-size:11px;letter-spacing:.12em;cursor:pointer;transition:background .3s var(--ease-out),color .3s var(--ease-out)}
.lang-switch a[lang="ar"]{font-family:"IBM Plex Sans Arabic",var(--body);font-size:14px;letter-spacing:0}
.lang-switch a:hover{color:var(--text-primary)}
.lang-switch a[aria-current]{background:var(--accent-muted);color:var(--accent-hover)}
@media (pointer:coarse){.lang-switch a{height:38px;min-width:40px}}
@media (max-width:560px){.nav-cta{display:none}}

/* ---------- Arabic ---------- */
html[lang="ar"]{--display:"Amiri",Georgia,serif;--body:"IBM Plex Sans Arabic",system-ui,sans-serif;--mono:"IBM Plex Sans Arabic",system-ui,sans-serif}
html[lang="ar"] body *:not(.lang-switch a){letter-spacing:0!important}
html[lang="ar"] .kicker,html[lang="ar"] .nav ul a,html[lang="ar"] .field label,html[lang="ar"] .bulk-legend,html[lang="ar"] .fiche thead th,html[lang="ar"] .fiche tbody th,html[lang="ar"] .feature figcaption,html[lang="ar"] .cue,html[lang="ar"] .loader,html[lang="ar"] .skip-film,html[lang="ar"] .person span,html[lang="ar"] footer .bottom,html[lang="ar"] footer h4{font-size:14px}
html[lang="ar"] .band h1,html[lang="ar"] .band h2,html[lang="ar"] .band .line,html[lang="ar"] .sec h2,html[lang="ar"] .hero-static .title{line-height:1.35}
html[lang="ar"] .lede,html[lang="ar"] p{line-height:1.85}
html[dir="rtl"] .hold .fill,html[dir="rtl"] .bulk-bar .seg{transform-origin:right}
html[dir="rtl"] .field select{background-position:15px 55%,20px 55%;padding-right:14px;padding-left:36px}
html[dir="rtl"] .medi .panel-t{margin-inline-start:auto}
html[dir="rtl"] .fiche-note a,html[dir="rtl"] .medi p sup a{font-family:var(--body)}
/* the English tagline is longer: keep logo, switcher and menu on one phone-width row */
html[lang="en"] .brand-tag{letter-spacing:.26em;padding-left:.26em}
@media (max-width:480px){
  .nav{gap:12px}
  .nav-actions{gap:8px}
  .lang-switch a{min-width:32px;padding:0 6px}
  html[lang="en"] .brand-tag{letter-spacing:.16em;padding-left:.16em}
}
/* right to left: the gold thread runs down the right edge, where Arabic lines start */
html[dir="rtl"] .node{left:auto;right:calc(-1 * var(--gutter) + 40px)}