/* HaNitzan SheBagan — "Garden Cinema". Propriétés logiques partout : HE(RTL) ↔ FR/EN(LTR) sans code dupliqué. */
:root{
  --ink:#06140d; --forest:#0d2a1b; --moss:#2f7a4a; --leaf:#4fa36a; --sage:#a9c2ad;
  --cream:#f4efe3; --paper:#faf7ef; --brass:#c9a65f; --brass-l:#ecd9a6; --lantern:#ffb85c;
  --text:#14221a; --muted:#52605a; --ghost:#c3cbc5; --line:rgba(20,34,26,.12);
  --gut:clamp(18px,4.2vw,64px); --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.32,.72,0,1);
  --serif:"Frank Ruhl Libre","Times New Roman",serif; --sans:Assistant,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip;background:var(--paper);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;padding:0}
h1,h2,h3,.serif{font-family:var(--serif)}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-block-start:-60px;inset-inline-start:12px;z-index:200;background:var(--brass);color:#111;padding:10px 16px;border-radius:999px;font-weight:700;transition:inset-block-start .2s}
.skip:focus{inset-block-start:12px}
.wrap{width:min(1280px,100% - 2*var(--gut));margin-inline:auto}

/* ───────── texte découpé (titres cinétiques) ───────── */
[data-split] .w{display:inline-block;white-space:nowrap;vertical-align:top}
.js [data-split]:not(.scrub) .w{overflow:hidden;padding:.1em .06em .16em;margin:-.1em -.06em -.16em}
.js [data-split]:not(.scrub) .c{display:inline-block;transform:translateY(112%) rotate(7deg);opacity:0;filter:blur(6px);
  transition:transform 1s var(--spring),opacity .7s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--i)*38ms + var(--d,0ms))}
.js [data-split].in:not(.scrub) .c{transform:none;opacity:1;filter:none}
.scrub .c{display:inline-block;color:color-mix(in srgb,var(--fill,var(--ink)) calc(var(--k,0)*100%),var(--ghost));transform:translateY(calc((1 - var(--k,0))*.14em));will-change:color}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--moss)}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;transform-origin:var(--o,right);transform:scaleX(0);transition:transform 1s var(--ease) .1s}
[dir=ltr] .eyebrow{--o:left}
.in .eyebrow::before,.eyebrow.in::before{transform:none}
.dark .eyebrow{color:var(--brass-l)}
h2.h{font-size:clamp(2.1rem,5.6vw,4.6rem);line-height:1.04;font-weight:800;letter-spacing:-.02em;margin-block:14px 16px}
.lead{max-width:44rem;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted)}
.dark .lead{color:#b9c9be}
[data-r]{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js [data-r]{opacity:0;transform:translateY(34px)}
.js [data-r].in{opacity:1;transform:none}

/* ───────── boutons ───────── */
.btn{--bg:var(--brass);--fg:#14180f;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:8px 10px 8px 24px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:800;font-size:1.02rem;position:relative;isolation:isolate;overflow:hidden;transition:transform .5s var(--spring),box-shadow .5s var(--ease)}
[dir=rtl] .btn{padding:8px 24px 8px 10px}
.btn .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.12);transition:transform .5s var(--spring)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn:hover{box-shadow:0 14px 36px -10px rgba(201,166,95,.75)}
.btn:hover .ic{transform:translateX(3px) scale(1.08)}[dir=rtl] .btn:hover .ic{transform:translateX(-3px) scale(1.08)}
.btn:active{transform:scale(.97)}
.btn.ghost{--bg:rgba(255,255,255,.08);--fg:#fff;border:1px solid rgba(255,255,255,.32);backdrop-filter:blur(10px)}
.btn.ghost .ic{background:rgba(255,255,255,.14)}
.btn.wa{--bg:#1f8a4c;--fg:#fff}.btn.wa .ic{background:rgba(255,255,255,.18)}
.btn.dk{--bg:var(--ink);--fg:#fff}.btn.dk .ic{background:rgba(255,255,255,.14)}
.mag{will-change:transform}

/* ───────── barre de progression + curseur ───────── */
.prog{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:linear-gradient(90deg,var(--leaf),var(--brass));transform-origin:var(--o,right);transform:scaleX(var(--p,0))}
[dir=ltr] .prog{--o:left}
.cursor{position:fixed;inset:0 auto auto 0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--brass);z-index:150;pointer-events:none;opacity:0;transition:width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),opacity .3s,background .3s;display:grid;place-items:center;color:#111;font-size:.8rem;font-weight:800;mix-blend-mode:normal}
.cursor.on{opacity:1}
.cursor.big{width:92px;height:92px;margin:-46px 0 0 -46px;background:rgba(236,217,166,.94)}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ───────── loader rideau ───────── */
.curtain{position:fixed;inset:0;z-index:300;background:var(--ink);display:grid;place-items:center;transition:transform 1.1s var(--spring) .15s,visibility 0s 1.4s}
.curtain img{width:min(40vw,170px);background:#fff;border-radius:50%;padding:10px;opacity:0;transform:scale(.88);animation:cin 1s var(--ease) .1s forwards}
.curtain.out{transform:translateY(-101%);visibility:hidden}
@keyframes cin{to{opacity:1;transform:none}}
.js.ready .curtain{pointer-events:none}

/* ───────── header (îlot flottant) ───────── */
.hdr{position:fixed;inset-block-start:14px;inset-inline:0;z-index:100;display:flex;justify-content:center;pointer-events:none;transition:transform .7s var(--spring)}
.hdr.hide{transform:translateY(-130%)}
.pill{pointer-events:auto;display:flex;align-items:center;gap:clamp(8px,1.6vw,22px);width:min(1180px,100% - 24px);padding:8px 10px 8px 14px;border-radius:999px;background:rgba(6,20,13,.46);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(255,255,255,.14);color:#fff;transition:background .5s}
[dir=rtl] .pill{padding:8px 14px 8px 10px}
.hdr.solid .pill{background:rgba(6,20,13,.82)}
.pill .logo{display:block;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.96);padding:3px;flex:none}
.pill .logo img{width:100%;height:100%;object-fit:contain}
.pill nav{display:none;margin-inline:auto;gap:clamp(12px,2vw,30px);font-weight:700;font-size:.97rem}
.pill nav a{position:relative;padding:6px 2px;opacity:.88;transition:opacity .3s}
.pill nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:var(--o,right);transition:transform .45s var(--ease)}
[dir=ltr] .pill nav a::after{--o:left}
.pill nav a:hover,.pill nav a.on{opacity:1}.pill nav a:hover::after,.pill nav a.on::after{transform:none}
.pill .sp{margin-inline-start:auto}
.lang{display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(255,255,255,.1)}
.lang button{min-width:40px;min-height:36px;padding:0 10px;border-radius:999px;font-weight:800;font-size:.82rem;letter-spacing:.05em;opacity:.78;transition:background .35s var(--ease),opacity .3s,color .3s}
.lang button[aria-pressed=true]{background:var(--brass);color:#14180f;opacity:1}
.pill .btn{min-height:44px;padding:5px 6px 5px 18px;font-size:.92rem}[dir=rtl] .pill .btn{padding:5px 18px 5px 6px}
.pill .btn .ic{width:32px;height:32px}
.burger{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);position:relative}
.burger i{position:absolute;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .5s var(--spring),opacity .3s}
.burger i:nth-child(1){transform:translateY(-6px)}.burger i:nth-child(3){transform:translateY(6px)}
.menu-open .burger i:nth-child(1){transform:rotate(45deg)}.menu-open .burger i:nth-child(2){opacity:0}.menu-open .burger i:nth-child(3){transform:rotate(-45deg)}
.pill .btn.top{display:none}
@media (min-width:980px){.pill nav{display:flex}.burger{display:none}.pill .btn.top{display:inline-flex}.pill .sp{margin-inline-start:0}}
.drawer{position:fixed;inset:0;z-index:90;background:rgba(6,20,13,.94);backdrop-filter:blur(24px);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.menu-open .drawer{opacity:1;visibility:visible;transition-delay:0s}
.drawer a{font-family:var(--serif);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:800;color:#fff;opacity:0;transform:translateY(30px);transition:transform .7s var(--spring),opacity .5s}
.menu-open .drawer a{opacity:1;transform:none;transition-delay:calc(var(--k)*70ms + 120ms)}
.menu-open{overflow:hidden}

/* ───────── hero ───────── */
.hero{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;overflow:clip;isolation:isolate;background:var(--ink)}
.hero .bg{position:absolute;inset:-6% 0;z-index:-3;will-change:transform}
.hero .bg video,.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .bg video{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--ease)}
.hero .bg video.on{opacity:1}
.hero .veil{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(120% 70% at 50% 100%,rgba(6,20,13,.92),transparent 62%),
  linear-gradient(180deg,rgba(6,20,13,.55) 0%,rgba(6,20,13,.05) 30%,rgba(6,20,13,.55) 100%)}
.leaves{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.leaf{position:absolute;inset-block-start:-12%;width:var(--s,26px);height:var(--s,26px);color:var(--c,#7fc48f);opacity:var(--o,.5);left:var(--x);animation:fall var(--t,16s) linear var(--dl,0s) infinite;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.leaf svg{width:100%;height:100%;fill:currentColor;animation:sway var(--sw,4s) ease-in-out infinite alternate}
@keyframes fall{to{transform:translate3d(var(--dx,60px),125svh,0) rotate(var(--r,320deg))}}
@keyframes sway{from{transform:rotate(-24deg) translateX(-10px)}to{transform:rotate(26deg) translateX(10px)}}
.hero .copy{padding-block:calc(var(--gut) + 104px) calc(var(--gut) + 18px);display:grid;gap:clamp(14px,2.2vw,26px)}
.hero .kick{display:flex;align-items:center;gap:12px;font-size:.84rem;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--brass-l)}
.hero .kick img{width:46px;height:46px;border-radius:50%;background:#fff;padding:3px}
.hero h1{font-size:clamp(4.1rem,19vw,13.5rem);line-height:.9;font-weight:900;letter-spacing:-.035em;text-wrap:balance;text-shadow:0 8px 60px rgba(0,0,0,.45)}
[dir=ltr] .hero h1{font-size:clamp(3.1rem,13.5vw,10.5rem);line-height:.94}
.hero h1 .c{cursor:default}
.hero h1 .c.near{color:var(--brass-l);transform:translateY(-.06em) scale(1.06) !important;transition:transform .35s var(--spring),color .3s !important}
.hero .tag{max-width:40rem;font-size:clamp(1.05rem,1.9vw,1.4rem);line-height:1.5;color:#eef3ee;text-shadow:0 2px 24px rgba(0,0,0,.5)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{padding:7px 14px;border-radius:999px;font-size:.9rem;font-weight:700;background:rgba(255,255,255,.1);border:1px solid rgba(236,217,166,.4);backdrop-filter:blur(8px)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cue{position:absolute;inset-block-end:22px;inset-inline-end:var(--gut);display:none;align-items:center;gap:10px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--brass-l)}
.cue i{display:block;width:1px;height:56px;background:linear-gradient(var(--brass-l),transparent);animation:cue 2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media (min-width:900px){.cue{display:flex}}
.js .hero .kick,.js .hero .tag,.js .hero .chips,.js .hero .cta-row{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .hero.in .tag{opacity:1;transform:none;transition-delay:.45s}
.js .hero.in .chips{opacity:1;transform:none;transition-delay:.58s}.js .hero.in .cta-row{opacity:1;transform:none;transition-delay:.7s}

/* ───────── phrase qui se remplit au scroll ───────── */
.statement{position:relative;background:var(--cream);padding-block:clamp(90px,16vw,230px);overflow:clip}
.statement p{position:relative;z-index:2;max-width:1180px;font-family:var(--serif);font-size:clamp(2.3rem,6.9vw,6.4rem);font-weight:800;line-height:1.07;letter-spacing:-.03em;--fill:var(--forest)}
.statement .float{position:absolute;width:clamp(120px,17vw,260px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -26px rgba(6,20,13,.55);will-change:transform;z-index:0}
.statement .float img{width:100%;height:100%;object-fit:cover}
.statement .f1{inset-block-start:7%;inset-inline-end:2.5%;rotate:5deg}.statement .f2{inset-block-end:5%;inset-inline-end:16%;rotate:-6deg;width:clamp(100px,12vw,190px)}
@media (min-width:761px){.statement:not(.cta-st) p{max-width:min(1180px,74%)}}
.statement .wrap{position:relative;z-index:1}
@media (max-width:760px){.statement .float{opacity:.22}}
.cta-st{background:var(--forest);color:#fff}.cta-st p{--fill:#fff;color:#fff}

/* ───────── marquee ───────── */
.mq{background:var(--ink);color:var(--cream);overflow:hidden;padding-block:clamp(22px,3vw,40px);border-block:1px solid rgba(255,255,255,.08)}
.mq .row{display:flex;width:max-content;will-change:transform}
.mq .item{display:flex;align-items:center;gap:clamp(24px,4vw,56px);padding-inline-end:clamp(24px,4vw,56px);font-family:var(--serif);font-size:clamp(2.4rem,7vw,6rem);font-weight:900;white-space:nowrap;-webkit-text-stroke:1.5px var(--brass-l);color:transparent}
.mq .item:nth-child(even) span{color:var(--cream);-webkit-text-stroke:0}
.mq .item::after{content:"✦";font-size:.4em;color:var(--brass);-webkit-text-stroke:0}

/* ───────── reels : carrousel 3D ───────── */
.reels{position:relative;background:radial-gradient(90% 60% at 50% 0%,#14412a 0%,var(--forest) 45%,var(--ink) 100%);color:#fff;padding-block:clamp(80px,12vw,170px) clamp(60px,9vw,120px);overflow:clip}
.dark{color:#fff}
.reels .head{display:grid;gap:4px;margin-bottom:clamp(28px,5vw,64px)}
.reels h2.h{color:#fff}
.stage{perspective:1400px;position:relative}
.rail{display:flex;gap:clamp(14px,2.4vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;padding-block:30px 46px;padding-inline:calc(50% - var(--cw)/2);scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;--cw:min(66vw,300px)}
.rail::-webkit-scrollbar{display:none}
@media (min-width:900px){.rail{--cw:clamp(250px,21vw,330px)}}
.card{flex:0 0 var(--cw);scroll-snap-align:center;aspect-ratio:9/16;position:relative;transform-style:preserve-3d;will-change:transform,opacity;transition:filter .4s}
.card .ph{position:absolute;inset:0;border-radius:34px;overflow:hidden;background:#000;border:7px solid #15191a;box-shadow:0 40px 70px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12);isolation:isolate}
.card .ph::before{content:"";position:absolute;inset-block-start:9px;inset-inline:38%;height:18px;border-radius:99px;background:#050807;z-index:5}
.card img,.card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card video{opacity:0;transition:opacity .6s}.card video.on{opacity:1}
.card .shade{position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(transparent,rgba(0,0,0,.78));z-index:2}
.card .cap{position:absolute;inset-inline:16px;inset-block-end:16px;z-index:3;font-family:var(--serif);font-size:1.18rem;font-weight:800;line-height:1.2}
.card .open{position:absolute;inset:0;z-index:4;border-radius:28px}
.card .full{position:absolute;inset-block-start:34px;inset-inline-end:14px;z-index:5;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);pointer-events:none}
.card .full svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8}
.card .bar{position:absolute;inset:auto 0 0 0;height:3px;background:rgba(255,255,255,.2);z-index:5}.card .bar i{display:block;height:100%;width:100%;background:var(--brass);transform-origin:var(--o,right);transform:scaleX(0)}
[dir=ltr] .card .bar i{--o:left}
.nav-r{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:6px}
.nav-r button{width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background .35s,transform .5s var(--spring)}
.nav-r button:hover{background:var(--brass);color:#111;border-color:var(--brass);transform:scale(1.08)}
.nav-r svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.dots{display:flex;gap:7px;justify-content:center}
.dots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.28);transition:width .5s var(--spring),background .3s}.dots i.on{width:26px;background:var(--brass)}

/* ───────── viewer plein écran (style TikTok) ───────── */
.viewer{position:fixed;inset:0;z-index:250;background:#000;display:none}
.viewer.open{display:block}
.feed{height:100dvh;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.slide{height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;position:relative}
.frame{position:relative;height:100dvh;aspect-ratio:9/16;max-width:100vw;background:#000;overflow:hidden}
@media (min-width:700px){.frame{height:min(100dvh - 24px,920px);border-radius:26px}.slide{background:radial-gradient(60% 60% at 50% 50%,#10301f,#000)}}
.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .grad{position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(transparent,rgba(0,0,0,.82));pointer-events:none}
.frame .meta{position:absolute;inset-inline:18px;inset-block-end:calc(96px + env(safe-area-inset-bottom));color:#fff;pointer-events:none}
.frame .meta b{display:block;font-family:var(--serif);font-size:1.5rem;line-height:1.15}
.v-x,.v-snd{position:fixed;z-index:260;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);display:grid;place-items:center;border:1px solid rgba(255,255,255,.25)}
.v-x{inset-block-start:calc(14px + env(safe-area-inset-top));inset-inline-end:14px}
.v-snd{inset-block-start:calc(14px + env(safe-area-inset-top));inset-inline-start:14px}
.v-x svg,.v-snd svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}
.v-cta{position:fixed;z-index:260;inset-inline:0;inset-block-end:0;padding:14px var(--gut) calc(16px + env(safe-area-inset-bottom));display:flex;gap:10px;justify-content:center;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.v-cta .btn{min-height:50px;flex:1;max-width:260px;justify-content:center}
.v-hint{position:fixed;z-index:261;inset-block-start:50%;inset-inline:0;text-align:center;pointer-events:none;color:#fff;font-weight:800;opacity:0;transition:opacity .4s}
.v-hint.on{opacity:1}
.v-hint span{background:rgba(0,0,0,.6);padding:10px 18px;border-radius:99px;backdrop-filter:blur(8px)}

/* ───────── services : panneaux accordéon ───────── */
.services{padding-block:clamp(80px,12vw,170px);background:var(--paper)}
.panels{display:flex;flex-direction:column;gap:14px;margin-top:clamp(28px,5vw,60px)}
.panel{position:relative;min-height:340px;border-radius:30px;overflow:hidden;color:#fff;isolation:isolate;background:var(--forest);display:flex;align-items:flex-end}
.panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s var(--ease)}
.panel::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,20,13,.05) 20%,rgba(6,20,13,.88))}
.panel .pi{padding:26px}
.panel .num{font-family:var(--serif);font-size:1.1rem;font-weight:800;color:var(--brass-l);letter-spacing:.1em}
.panel h3{font-size:clamp(1.55rem,3.4vw,2.2rem);font-weight:800;line-height:1.1;margin-block:6px 10px}
.panel ul{display:grid;gap:5px;color:#e6efe8}
.panel li{display:flex;gap:10px;align-items:center}.panel li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brass);flex:none}
@media (min-width:900px){
  .panels{flex-direction:row;height:min(74vh,640px);gap:12px}
  .panel{flex:1 1 0;min-height:0;cursor:pointer;transition:flex-grow .9s var(--spring)}
  .panel.on{flex-grow:4.2}
  .panel .pi{padding:30px;width:100%}
  .panel h3{writing-mode:horizontal-tb}
  .panel .rest{opacity:0;max-height:0;overflow:hidden;transition:opacity .6s var(--ease) .2s,max-height .8s var(--ease)}
  .panel.on .rest{opacity:1;max-height:160px}
  .panel:not(.on) h3{font-size:1.25rem}
  .panel.on img{transform:scale(1.06)}
}

/* ───────── galerie ───────── */
.works{background:var(--cream);padding-block:clamp(80px,12vw,170px)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(150px,34vw,250px);gap:clamp(10px,1.4vw,18px);margin-top:clamp(28px,5vw,56px);grid-auto-flow:dense}
.g{position:relative;border-radius:22px;overflow:hidden;background:#ddd;cursor:pointer;isolation:isolate}
.g img{position:absolute;inset:-9% 0;width:100%;height:118%;object-fit:cover;transition:filter .6s;will-change:transform}
.g::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(6,20,13,.7));opacity:.0;transition:opacity .5s}
.g:hover::after,.g:focus-visible::after{opacity:1}
.g span{position:absolute;inset-inline:16px;inset-block-end:14px;z-index:2;color:#fff;font-weight:800;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .6s var(--spring)}
.g:hover span,.g:focus-visible span{opacity:1;transform:none}
.g.t{grid-row:span 2}.g.w{grid-column:span 2}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,19vw,300px)}.g.b{grid-column:span 2;grid-row:span 2}}
.lb{position:fixed;inset:0;z-index:240;background:rgba(3,10,6,.94);backdrop-filter:blur(10px);display:none;place-items:center}
.lb.open{display:grid}
.lb img{max-width:min(94vw,1500px);max-height:88vh;object-fit:contain;border-radius:14px;animation:lbin .5s var(--spring)}
@keyframes lbin{from{opacity:0;transform:scale(.94)}}
.lb button{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;color:#fff}
.lb button svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8}
.lb .x{inset-block-start:16px;inset-inline-end:16px}.lb .pv{inset-inline-start:14px}.lb .nx{inset-inline-end:14px}

/* ───────── pourquoi nous ───────── */
.why{background:var(--paper);padding-block:clamp(80px,12vw,170px)}
.why .cols{display:grid;gap:clamp(30px,6vw,90px)}
.steps{counter-reset:s;position:relative;display:grid;gap:0}
.steps::before{content:"";position:absolute;inset-block:0;inset-inline-start:30px;width:2px;background:var(--line)}
.steps::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:30px;width:2px;height:calc(var(--lp,0)*100%);background:linear-gradient(var(--leaf),var(--brass))}
.step{position:relative;padding:22px 0 22px 0;padding-inline-start:86px}
.step .n{position:absolute;inset-inline-start:0;inset-block-start:22px;width:62px;height:62px;border-radius:50%;background:var(--paper);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:1.25rem;color:var(--muted);transition:background .5s,color .5s,border-color .5s,transform .7s var(--spring)}
.step.in .n{background:var(--forest);border-color:var(--forest);color:var(--brass-l);transform:scale(1.04)}
.step h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;line-height:1.15;margin-bottom:6px}
.step p{color:var(--muted);max-width:34rem}
@media (min-width:1000px){.why .cols{grid-template-columns:.9fr 1.1fr}.why .stk{position:sticky;inset-block-start:120px;align-self:start}}

/* ───────── à propos ───────── */
.about{background:var(--forest);color:#fff;padding-block:clamp(80px,12vw,170px);overflow:clip}
.about .cols{display:grid;gap:clamp(30px,6vw,90px);align-items:center}
.about .pic{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/5}
.js .about .pic img{clip-path:inset(0 0 100% 0);transition:clip-path 1.6s var(--spring)}
.js .about .pic.in img{clip-path:inset(0)}
.about .pic img{width:100%;height:112%;object-fit:cover;will-change:transform}
.about p{color:#cfe0d3;font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:36rem;margin-top:16px}
.about h2.h{color:#fff}
@media (min-width:900px){.about .cols{grid-template-columns:1fr .85fr}}

/* ───────── contact ───────── */
.contact{background:var(--forest);color:#fff;padding-block:clamp(26px,4vw,50px) clamp(70px,10vw,140px)}
.cta-grid{display:grid;gap:clamp(26px,5vw,70px)}
form{display:grid;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:28px;padding:clamp(18px,3vw,32px);backdrop-filter:blur(10px)}
label{display:grid;gap:6px;font-weight:700;font-size:.9rem;color:var(--brass-l)}
input,select,textarea{font:inherit;font-size:16px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(6,20,13,.6);color:#fff;width:100%}
select option{color:#111}
input::placeholder,textarea::placeholder{color:#8aa093}
form .note{font-size:.85rem;color:#9fb3a5}
.cta-side{display:grid;gap:14px;align-content:start}
.cta-side .cta-row .btn{flex:1 1 220px;justify-content:space-between}
.soc{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.soc a{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.22);font-weight:800;font-size:.95rem;transition:background .35s,color .35s,transform .5s var(--spring)}
.soc a:hover{background:var(--brass);color:#111;transform:translateY(-3px)}
.soc svg{width:20px;height:20px;fill:currentColor}
@media (min-width:960px){.cta-grid{grid-template-columns:1.1fr .9fr}}

/* ───────── pied de page ───────── */
footer{background:var(--ink);color:#d3e0d6;padding-block:clamp(50px,8vw,100px) 120px;overflow:clip}
.word{font-family:var(--serif);font-weight:900;font-size:clamp(3.4rem,17vw,17rem);line-height:.9;letter-spacing:-.04em;white-space:nowrap;--fill:var(--brass-l);margin-bottom:clamp(30px,5vw,60px)}
[dir=ltr] .word{font-size:clamp(2.2rem,8.6vw,8.6rem)}
.fcols{display:grid;gap:30px;grid-template-columns:1fr 1fr}
.fcols h4{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin-bottom:12px}
.fcols li{margin-block:6px}.fcols a:hover{color:var(--brass-l)}
.fcols .about-f{grid-column:1/-1;max-width:30rem}
.fcols img{height:84px;width:84px;border-radius:50%;background:#fff;padding:5px;margin-bottom:14px;object-fit:contain}
@media (min-width:900px){.fcols{grid-template-columns:1.5fr 1fr 1fr 1fr}.fcols .about-f{grid-column:auto}}
.copy-r{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#8aa093}

/* ───────── barre collante mobile + toast source ───────── */
.sticky{position:fixed;inset-inline:0;inset-block-end:0;z-index:95;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,rgba(6,20,13,.92) 40%);transform:translateY(120%);transition:transform .7s var(--spring)}
.sticky.on{transform:none}
.sticky .btn{flex:1;justify-content:space-between;min-height:50px}
@media (min-width:900px){.sticky{display:none}}
.toast{position:fixed;inset-block-start:84px;inset-inline:0;z-index:110;display:flex;justify-content:center;pointer-events:none;transform:translateY(-30px);opacity:0;transition:opacity .6s,transform .8s var(--spring)}
.toast.on{opacity:1;transform:none}
.toast span{background:var(--brass);color:#14180f;font-weight:800;padding:9px 18px;border-radius:99px;box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}

/* ───────── a11y : mouvement réduit ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-split]:not(.scrub) .c,.js [data-r],.js .hero .kick,.js .hero .tag,.js .hero .chips,.js .hero .cta-row{opacity:1;transform:none;filter:none;transition:none}
  .leaf,.cue i,.curtain img{animation:none}.curtain{display:none}
  .scrub .c{color:var(--fill)}
  .js .about .pic img{clip-path:none;transition:none}
}
[dir=rtl] .btn .ic svg.arr{transform:scaleX(-1)}

.nav-r #rPrev svg{transform:scaleX(-1)}[dir=rtl] .nav-r #rPrev svg{transform:none}
.nav-r #rNext svg{transform:none}[dir=rtl] .nav-r #rNext svg{transform:scaleX(-1)}
.lb .pv svg{transform:scaleX(-1)}[dir=rtl] .lb .pv svg{transform:none}
.lb .nx svg{transform:none}[dir=rtl] .lb .nx svg{transform:scaleX(-1)}
.panel .vt{display:none}
@media (min-width:900px){
  .panel .pi{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 24px}
  .panel .num{position:absolute;inset-block-start:22px;inset-inline-start:24px}
  .panel .vt{display:flex;position:absolute;inset-block-end:24px;inset-inline:0;justify-content:center;transition:opacity .5s var(--ease)}
  .panel .vt span{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--serif);font-weight:800;font-size:1.3rem;white-space:nowrap}
  .panel.on .vt{opacity:0;pointer-events:none}
  .panel h3{transition:opacity .6s var(--ease) .25s}
  .panel:not(.on) h3{opacity:0;height:0;margin:0;overflow:hidden;position:absolute}
}
@media (max-width:899px){.panel .num{display:block}}
[lang=he] .frame .meta{display:none}

/* ───────── titre hero en contours ───────── */
.hero h1{position:relative;isolation:isolate}
.hero h1 .c{color:transparent;-webkit-text-stroke:2px var(--brass-l)}
.js .hero h1.in .c{animation:hfill 1.1s var(--ease) forwards;animation-delay:calc(var(--i)*60ms + 1s)}
@keyframes hfill{to{color:#fff;-webkit-text-stroke-color:rgba(236,217,166,.85)}}
.hero h1 .c.near{color:transparent !important;-webkit-text-stroke-color:var(--brass) !important}
.hero h1::before{content:attr(aria-label);position:absolute;inset:0;z-index:-1;pointer-events:none;color:transparent;-webkit-text-stroke:1.3px rgba(236,217,166,.42);text-shadow:none;
  transform:translate3d(calc(.045em + var(--hx,0px)),calc(.09em + var(--hy,0px)),0);opacity:0;transition:opacity 1.4s var(--ease) 1.6s,transform .5s var(--ease)}
.hero h1.in::before{opacity:1}
@media (max-width:760px){.hero h1 .c{-webkit-text-stroke-width:1.5px}.hero h1::before{-webkit-text-stroke-width:1px}}

/* ───────── carte zone d'intervention ───────── */
.area{background:radial-gradient(80% 70% at 70% 40%,#143e28 0%,var(--forest) 45%,var(--ink) 100%);color:#fff;padding-block:clamp(80px,12vw,170px);overflow:clip}
.area h2.h{color:#fff}
.acols{display:grid;gap:clamp(22px,4vw,56px);grid-template-areas:"t" "m" "c"}
.atext{grid-area:t}.mapwrap{grid-area:m;perspective:1600px}.aside{grid-area:c;display:grid;gap:16px;align-content:start}
@media (min-width:1000px){.acols{grid-template-columns:.78fr 1.22fr;grid-template-areas:"t m" "c m";align-items:start}.aside{align-self:start}}
#mapSvg{width:100%;height:auto;display:block;border-radius:28px;background:#06150d;box-shadow:0 40px 80px -30px rgba(0,0,0,.85),0 0 0 1px rgba(236,217,166,.16);transition:transform .7s var(--ease);transform-style:preserve-3d;overflow:hidden}
#mapSvg .seaR{fill:#06150d}
#mapSvg .wave{fill:none;stroke:rgba(127,196,143,.2);stroke-width:2;stroke-dasharray:12 10;animation:wv 6s linear infinite;animation-delay:calc(var(--k)*-1.2s)}
@keyframes wv{to{stroke-dashoffset:-88}}
#mapSvg .coast{fill:none;stroke:rgba(236,217,166,.6);stroke-width:2.5}
#mapSvg .topo{fill:none;stroke:rgba(236,217,166,.14);stroke-width:1.5}
#mapSvg .zone{fill:url(#gArea);stroke:rgba(236,217,166,.6);stroke-width:2.2;stroke-dasharray:9 8;animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{opacity:.72}}
#mapSvg .rg{fill:rgba(236,217,166,.72);font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:.14em;text-anchor:middle}
#mapSvg .route{fill:none;stroke:url(#gRoute);stroke-width:5;stroke-linecap:round;stroke-dashoffset:var(--L);transition:stroke-dashoffset 2.6s var(--ease) calc(var(--k)*.5s + .3s)}
.mapwrap.in #mapSvg .route{stroke-dashoffset:0}
#mapSvg .flow{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:2 26;opacity:0;animation:flow 2.2s linear infinite;transition:opacity .6s 3.4s}
.mapwrap.in #mapSvg .flow{opacity:.75}
@keyframes flow{to{stroke-dashoffset:-56}}
#mapSvg .city{opacity:0;transition:opacity .6s calc(var(--k)*.12s + 1s)}
.mapwrap.in #mapSvg .city{opacity:1}
#mapSvg .city[data-k]{cursor:pointer;outline:none}
#mapSvg .city .dot{fill:#ecd9a6;stroke:#06140d;stroke-width:3;transition:fill .3s}
#mapSvg .city.hub .dot{fill:#fff}
#mapSvg .city .halo{fill:rgba(236,217,166,0);stroke:none;transition:fill .35s}
#mapSvg .city .pulse{fill:none;stroke:#ecd9a6;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:pl 2.4s ease-out infinite;animation-delay:calc(var(--k)*.3s)}
@keyframes pl{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
#mapSvg .city .lbl{fill:#fff;font-family:var(--sans);font-weight:800;font-size:30px;paint-order:stroke;stroke:#06140d;stroke-width:7px;stroke-linejoin:round;transition:fill .3s}
#mapSvg .city.hub .lbl{font-family:var(--serif);font-size:40px;font-weight:900}
#mapSvg .city.ref .lbl{fill:rgba(255,255,255,.72);font-size:22px;font-weight:600}
#mapSvg .city.ref .dot{fill:rgba(255,255,255,.45);stroke:none}
#mapSvg .city[data-k]:hover .halo,#mapSvg .city[data-k]:focus-visible .halo,#mapSvg .city.on .halo{fill:rgba(236,217,166,.2)}
#mapSvg .city:focus-visible .halo{stroke:#ecd9a6;stroke-width:2}
#mapSvg .city.on .dot{fill:var(--brass)}#mapSvg .city.on .lbl{fill:var(--brass-l)}
.mapwrap.in #mapSvg.has .city[data-k]:not(.on){opacity:.6}
#mapSvg .compass circle{fill:rgba(255,255,255,.05);stroke:rgba(236,217,166,.4)}#mapSvg .compass path{fill:#ecd9a6}#mapSvg .compass text{fill:#ecd9a6;font-size:16px;font-weight:800;text-anchor:middle}
@media (max-width:640px){#mapSvg .city .lbl{font-size:38px;stroke-width:8px}#mapSvg .city.hub .lbl{font-size:46px}#mapSvg .rg{font-size:30px}#mapSvg .city.ref .lbl{font-size:28px}}
.mcard{background:rgba(255,255,255,.06);border:1px solid rgba(236,217,166,.22);border-radius:24px;padding:22px;display:grid;gap:8px;backdrop-filter:blur(10px)}
.mcard b{font-family:var(--serif);font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.1;color:#fff}
.mcard p{color:#b9c9be;min-height:1.4em;margin:0}
.mcard .btn{justify-self:start;margin-top:6px}
.mcard.pop{animation:pop .6s var(--spring)}
@keyframes pop{from{transform:scale(.96);opacity:.6}}
.mchips{display:flex;flex-wrap:wrap;gap:8px}
.mchips button{min-height:42px;padding:8px 15px;border-radius:99px;border:1px solid rgba(255,255,255,.24);font-weight:700;color:#e6efe8;transition:background .3s,color .3s,border-color .3s}
.mchips button[aria-pressed=true],.mchips button:hover{background:var(--brass);color:#14180f;border-color:var(--brass)}
@media (prefers-reduced-motion:reduce){.hero h1 .c{color:#fff}.js .hero h1.in .c{animation:none;color:#fff}#mapSvg .route{transition:none;stroke-dashoffset:0}#mapSvg .city{opacity:1;transition:none}#mapSvg .wave,#mapSvg .pulse,#mapSvg .zone,#mapSvg .flow{animation:none}}

/* ───────── bouton musique (égaliseur) ───────── */
.music{position:fixed;z-index:96;inset-inline-start:16px;inset-block-end:calc(84px + env(safe-area-inset-bottom));width:52px;height:52px;border-radius:50%;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:16px;background:rgba(6,20,13,.78);border:1px solid rgba(236,217,166,.35);backdrop-filter:blur(10px);box-shadow:0 10px 30px -10px rgba(0,0,0,.6);transition:transform .5s var(--spring),background .3s}
.music:hover{transform:scale(1.08)}
.music[hidden]{display:none}
.music i{width:3px;height:6px;border-radius:2px;background:var(--brass-l);transition:height .3s}
.music.on i{animation:eq 1s ease-in-out infinite alternate}.music.on i:nth-child(2){animation-delay:-.4s}.music.on i:nth-child(3){animation-delay:-.7s}.music.on i:nth-child(4){animation-delay:-.2s}
@keyframes eq{from{height:5px}to{height:20px}}
.music .mx{position:absolute;inset:0;margin:auto;width:20px;height:20px;stroke:var(--brass-l);fill:none;stroke-width:1.8;opacity:0;transition:opacity .3s}
.music:not(.on) i{opacity:0}.music:not(.on) .mx{opacity:1}
@media (min-width:900px){.music{inset-block-end:24px}}
@media (prefers-reduced-motion:reduce){.music.on i{animation:none;height:14px}}

#mapSvg{direction:ltr}
@media (max-width:760px){.hero h1::before{display:none}}
.v-nav{display:none;position:fixed;z-index:260;inset-inline-end:24px;top:calc(50% - 64px);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);place-items:center}
.v-nav.dn{top:calc(50% + 12px)}
.v-nav svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.8;transform:rotate(-90deg)}
.v-nav.dn svg{transform:rotate(90deg)}
@media (min-width:700px) and (hover:hover){.v-nav{display:grid}}

/* projets par chantier */
.projs{padding-block-start:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(24px,4vw,48px)}
.pc{position:relative;display:block;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:#0d1f14;padding:0;border:0;cursor:pointer;text-align:start;min-width:0}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--spring)}
.pc:hover img,.pc:focus-visible img{transform:scale(1.05)}
.pc .pt{position:absolute;inset-inline:0;inset-block-end:0;padding:14px 16px;background:linear-gradient(transparent,rgba(3,12,6,.82));color:#fff;display:grid;gap:2px}
.pc .pt b{font-size:1.02rem;line-height:1.25}
.pc .pt small{opacity:.85;font-size:.82rem}
.pc:focus-visible{outline:3px solid #a9d9a3;outline-offset:3px}
.lb .lbc{position:absolute;inset-inline:0;inset-block-end:18px;margin:0 auto;max-width:min(90vw,900px);text-align:center;color:#fff;font-size:.95rem;opacity:.9;padding-inline:16px}
.lb .lbc:empty{display:none}
@media (prefers-reduced-motion:reduce){.pc img{transition:none}}
@media (max-width:599px){.pc{aspect-ratio:16/10}}
@media (min-width:900px){.pgrid{grid-template-columns:repeat(3,1fr)}}