@import url(fonts.css);
:root{--cream:#F3ECDD;--sand:#E7DDC6;--forest:#17261B;--moss:#26401F;--ink:#1B261C;--ink2:#4A4636;--gold:#8A5A14;--goldl:#D9A94E;
--f-d:'Fraunces',Georgia,serif;--f-b:'Karla',system-ui,sans-serif;--pad:clamp(1.25rem,5vw,4rem);--sec:clamp(3.5rem,9vw,6.5rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-b);font-size:17px;line-height:1.6;color:var(--ink);background:var(--cream);overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
ul,ol{list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;top:0;background:var(--forest);color:var(--cream);padding:.6rem 1rem;z-index:100}
.skip:focus{left:0}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--pad)}
/* header */
.site-header{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:.9rem var(--pad);color:#F3ECDD}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand-logo{display:block;width:44px;height:44px;border-radius:50%;background:#F3ECDD;overflow:hidden;flex:none}
.brand-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.brand-name{font-family:var(--f-d);font-size:1.35rem;letter-spacing:.14em;text-transform:uppercase}
.nav ul{display:flex;gap:1.8rem}
.nav a{text-decoration:none;font-weight:500;font-size:.98rem;padding:.35rem 0;border-bottom:1px solid transparent;transition:border-color .25s}
.nav a:hover,.nav a[aria-current]{border-color:var(--goldl)}
.nav-toggle{display:none;background:none;border:1px solid rgba(243,236,221,.6);color:inherit;width:46px;height:46px;border-radius:50%;cursor:pointer}
.bars,.bars::before,.bars::after{display:block;width:18px;height:2px;background:#F3ECDD;margin:auto;position:relative;content:""}
.bars::before{position:absolute;top:-6px;left:0}.bars::after{position:absolute;top:6px;left:0}
@media(max-width:820px){
.nav-toggle{display:block;position:relative;z-index:41}
.nav{position:fixed;inset:0;background:var(--forest);display:none;z-index:40;padding:6rem var(--pad) 2rem}
.nav.open{display:block}
.nav ul{flex-direction:column;gap:1.2rem}
.nav a{font-family:var(--f-d);font-size:2rem;color:#F3ECDD}
.nav-open .site-header{position:fixed}
}
/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#F3ECDD;overflow:hidden;background:var(--forest)}
.hero-page{min-height:58svh}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,38,27,.55) 0%,rgba(23,38,27,.1) 35%,rgba(23,38,27,.82) 100%)}
.hero-shade.soft{background:linear-gradient(180deg,rgba(23,38,27,.2),rgba(23,38,27,.6))}
.hero-in{position:relative;padding-block:6rem 3.2rem}
.kicker{font-size:.85rem;letter-spacing:.22em;text-transform:uppercase;color:var(--goldl);margin-bottom:.8rem;font-weight:700}
.h-hero{font-family:var(--f-d);font-weight:600;font-size:clamp(3.2rem,14vw,9rem);line-height:.95;letter-spacing:.03em}
.h-page{font-family:var(--f-d);font-weight:600;font-size:clamp(2.6rem,9vw,5.6rem);line-height:1}
.h-page em{color:var(--goldl)}
.hero-quote{font-family:var(--f-d);font-style:italic;font-size:clamp(1.2rem,3.4vw,1.9rem);line-height:1.35;max-width:34ch;margin:1.2rem 0 1.8rem}
.hero-sub{font-size:1.15rem;max-width:42ch;margin-top:1rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
/* buttons */
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;font-weight:700;font-size:1rem;border:1.5px solid transparent;transition:transform .25s,background .25s,color .25s;min-height:48px}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:var(--goldl);color:var(--forest)}
.btn-gold:hover{background:#F0C26A}
.btn-line{border-color:#F3ECDD;color:#F3ECDD}
.btn-line:hover{background:rgba(243,236,221,.15)}
.btn-dark{background:var(--forest);color:var(--cream)}
.btn-dark:hover{background:#2A4430}
.btn-line-dark{border-color:var(--forest);color:var(--forest)}
.btn-line-dark:hover{background:var(--forest);color:var(--cream)}
/* sections */
.sec{padding-block:var(--sec)}
.sec.tight{padding-bottom:2rem}
.cream{background:radial-gradient(ellipse 60% 50% at 6% 0%,rgba(217,169,78,.16),transparent 70%),var(--cream)}.sand{background:radial-gradient(ellipse 55% 45% at 96% 0%,rgba(217,169,78,.14),transparent 70%),var(--sand)}.forest{background:radial-gradient(ellipse 55% 60% at 8% 0%,rgba(217,169,78,.20),transparent 65%),linear-gradient(165deg,#17261B 0%,#26401F 100%);color:#F3ECDD}
h2{font-family:var(--f-d);font-weight:400;font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.08;margin-bottom:1.4rem}
h2 em,.break-quote em{font-style:italic;color:var(--gold)}
.forest h2 em,.break-quote em{color:var(--goldl)}
h3{font-family:var(--f-d);font-weight:600;font-size:1.35rem;line-height:1.2}
p+p{margin-top:1rem}
.lead{font-size:1.18rem}
.narrow{max-width:52ch}
.pull{font-family:var(--f-d);font-style:italic;font-size:1.35rem;line-height:1.4;color:var(--gold);border-left:2px solid var(--gold);padding-left:1.1rem;margin-block:1.5rem}
.forest .pull{color:var(--goldl);border-color:var(--goldl)}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:1rem}
.forest .eyebrow{color:var(--goldl)}
.eyebrow.cc{justify-content:center}
.mark{width:12px;height:12px;border-radius:50%;background:currentColor;position:relative;flex:none}
.mark::after{content:"";position:absolute;left:18px;top:50%;width:34px;height:1px;background:currentColor}
.eyebrow{padding-right:0}
.eyebrow .mark{margin-right:2.2rem}
.head-c{text-align:center}.head-c .eyebrow{justify-content:center}
.center{text-align:center}
.split{display:grid;gap:2.2rem;align-items:center}
@media(min-width:880px){
.split-7-5{grid-template-columns:7fr 5fr;gap:5rem}
.split-5-7{grid-template-columns:5fr 7fr;gap:5rem}
.split-7-5.rev{grid-template-columns:7fr 5fr}
.sticky-l{align-items:start}.sticky-l>figure{position:sticky;top:2rem}
}
.arch{border-radius:999px 999px 14px 14px;overflow:hidden;background:var(--sand);aspect-ratio:4/5;max-width:520px;width:100%;justify-self:center}
.arch img{width:100%;height:100%;object-fit:cover}
.arch img.pos-left{object-position:0% 50%}
.band-img.pos-low{object-position:50% 70%}
.band{border-radius:14px;overflow:hidden;margin:1rem 0 2.4rem}
.band-img{width:100%;height:clamp(240px,48vw,520px);object-fit:cover;object-position:50% 40%}
.band.small .band-img{height:clamp(240px,34vw,400px)}
.venez{font-size:clamp(3rem,9vw,6rem)}
/* facts */
.facts{display:grid;gap:0 4rem;margin-bottom:2.4rem}
@media(min-width:760px){.facts{grid-template-columns:1fr 1fr}}
.facts li,.founders li{display:flex;gap:1.1rem;padding:1.3rem 0;border-top:1px solid rgba(27,38,28,.25)}
.num{font-family:var(--f-d);font-size:1.7rem;color:var(--gold);line-height:1;min-width:2.6rem}
.facts p{color:var(--ink2);margin-top:.2rem}
/* break */
.break{position:relative;min-height:70svh;display:flex;align-items:center;color:#F3ECDD;overflow:hidden;background:var(--forest)}
.break.cta{min-height:78svh}
.break-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.break-in{position:relative;padding-block:4rem}
.break-quote{font-family:var(--f-d);font-size:clamp(1.9rem,5.6vw,3.8rem);line-height:1.12;max-width:20ch;margin-bottom:1.6rem}
.center .break-quote{margin-inline:auto}
.big-quote{font-family:var(--f-d);font-style:italic;font-size:clamp(1.6rem,4.4vw,2.8rem);line-height:1.25;max-width:26ch;margin-inline:auto}
/* video */
.video{max-width:980px;margin:1.5rem auto 0}
.video video{width:100%;border-radius:14px;background:#000;aspect-ratio:16/9}
.video figcaption{font-size:.9rem;color:#D8D0BC;margin-top:.7rem;text-align:center}
/* refs */
.refs li{padding:1.1rem 0;border-top:1px solid rgba(243,236,221,.3)}
.refs .num{font-size:1.5rem;display:block;color:var(--goldl)}
.refs p{font-size:1.15rem}
/* founders / troupe */
.founders{margin-top:1.2rem}
.founders .role{color:var(--gold);font-weight:700;font-size:.92rem;margin-top:.3rem;letter-spacing:.02em}
.founders .tag{font-family:var(--f-d);font-style:italic;font-size:1.15rem;margin-top:.4rem}
.founders p{margin-top:.5rem}
.troupe{display:grid;gap:0 2rem;margin-top:1.8rem}
@media(min-width:560px){.troupe{grid-template-columns:1fr 1fr}}
.troupe li{display:flex;flex-direction:column;padding:.8rem 0;border-top:1px solid rgba(27,38,28,.25)}
.tn{font-family:var(--f-d);font-weight:600;font-size:1.2rem}
.td{color:var(--ink2);font-size:.97rem}
/* docs */
.docs{display:grid;gap:1.4rem;margin-top:1rem}
@media(min-width:900px){.docs{grid-template-columns:repeat(3,1fr)}}
.doc{display:flex;gap:1rem;background:var(--sand);padding:1.6rem;border-radius:14px;border-top:3px solid var(--gold)}
.doc-i{color:var(--gold)}
.doc-l{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.doc p{color:var(--ink2);margin:.5rem 0 1.1rem}
.mini li{padding:.7rem 0;border-top:1px solid rgba(27,38,28,.25)}
.mini h3{font-size:1.05rem}.mini p{color:var(--ink2);font-size:.98rem}
/* contacts */
.contacts{display:grid;gap:1.2rem}
.card{background:var(--sand);padding:1.6rem;border-radius:14px;border-top:3px solid var(--gold)}
.card .role{color:var(--gold);font-weight:700;margin:.2rem 0 1rem}
.btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1rem}
.card .btns{margin-top:0}
.btn-main{}
/* gallery */
.head-l{margin-bottom:1rem}
.rail-wrap{position:relative}
.rail{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem var(--pad) 1.4rem;scrollbar-width:thin}
.slide{flex:none;scroll-snap-align:center;height:clamp(300px,58vw,520px)}
.slide-btn{display:block;height:100%;border:0;background:none;cursor:zoom-in;padding:0;border-radius:12px;overflow:hidden}
.slide img{height:100%;width:auto;max-width:none;object-fit:cover;transition:transform .4s}
.slide-btn:hover img{transform:scale(1.03)}
.rail-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:var(--forest);color:var(--cream);font-size:1.8rem;cursor:pointer;line-height:1}
.rail-arrow.prev{left:.6rem}.rail-arrow.next{right:.6rem}
.hint{font-size:.9rem;color:var(--ink2)}
.lightbox{border:0;background:rgba(10,18,12,.96);width:100vw;height:100vh;max-width:none;max-height:none;padding:0;color:#F3ECDD}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox figure{max-width:92vw;max-height:88vh;text-align:center}
.lightbox img{max-width:92vw;max-height:80vh;width:auto;height:auto;margin:auto;border-radius:6px}
.lightbox figcaption{margin-top:.8rem;font-size:.95rem}
.lb-close,.lb-nav{position:absolute;background:rgba(243,236,221,.15);color:#F3ECDD;border:0;border-radius:50%;width:48px;height:48px;font-size:1.8rem;cursor:pointer}
.lb-close{top:1rem;right:1rem}.lb-prev{left:1rem}.lb-next{right:1rem}
.lb-nav{top:50%;transform:translateY(-50%)}
/* footer */
.site-footer{background:#101C13;color:#E8E0CC;padding-block:3.5rem 5rem}
.foot-grid{display:grid;gap:2rem}
@media(min-width:800px){.foot-grid{grid-template-columns:1.2fr 1fr 1.2fr}}
.foot-title{font-family:var(--f-d);font-size:1.6rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.8rem}
.foot-h{font-weight:700;color:var(--goldl);margin-bottom:.4rem}
.site-footer a{text-decoration:none;border-bottom:1px solid rgba(217,169,78,.5)}
.brand-logo.big{width:72px;height:72px}
/* badge */
.symphony-badge{position:fixed;right:.8rem;bottom:.8rem;z-index:60;background:var(--forest);color:var(--cream);font-family:var(--f-b);font-size:.78rem;padding:.4rem .8rem;border-radius:999px;text-decoration:none;border:1px solid var(--goldl);opacity:.95}
#wixheadless-banner-container{display:none !important}
/* motion */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.facts .reveal:nth-child(even),.troupe .reveal:nth-child(even){transition-delay:.08s}
@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}.reveal{opacity:1;transform:none}}
:focus-visible{outline:3px solid var(--goldl);outline-offset:3px}

.troupe li.has-photo{flex-direction:row;align-items:center;gap:1rem;grid-column:1/-1;padding:1rem 0}
.troupe .who{display:flex;flex-direction:column}
.portrait{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:56% 30%;flex:none;border:2px solid var(--gold)}

.troupe li.has-bio{align-items:flex-start}
.troupe li.has-bio .portrait{width:132px;height:132px}
.bio{margin-top:.6rem;font-size:.98rem;line-height:1.55;color:var(--ink2);font-style:italic}

.bio a{color:var(--gold);text-underline-offset:3px}

.hero-page{min-height:46svh}
.hero-page .hero-img{opacity:.8;filter:blur(2px) saturate(1.05);transform:scale(1.05)}
.hero-page .hero-shade{background:linear-gradient(180deg,rgba(23,38,27,.6) 0%,rgba(23,38,27,.35) 40%,rgba(23,38,27,.9) 100%)}
.site-footer{background:linear-gradient(180deg,rgba(16,28,19,.9),rgba(16,28,19,.97)),url(https://static.wixstatic.com/media/75953a_d09877f1095c4028b56d2d3520187790~mv2.jpg/v1/fit/w_1206,h_233,q_80,enc_auto/fond-mousse.jpg) center/cover;background-color:#101C13}
.bio{font-style:normal;font-size:1rem;line-height:1.6;color:var(--ink)}
.num{font-size:2.4rem;min-width:3.2rem}
.refs .num{font-size:1.6rem}

.gloss{font-size:1.05rem;color:var(--ink2);margin-top:-.4rem;font-style:italic}

/* sélecteur de langue : pastille sombre lisible sur photo et sur video */
.lang{display:flex;align-items:center;gap:0;margin-left:auto;margin-right:1.2rem;padding:3px;font-size:.9rem;font-weight:700;letter-spacing:.1em;background:rgba(23,38,27,.78);border:1px solid rgba(243,236,221,.55);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 12px rgba(10,18,12,.35)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 .55rem;border-radius:999px;text-decoration:none;color:#F3ECDD;opacity:1;transition:background .25s,color .25s}
.lang a:hover{background:rgba(243,236,221,.18)}
.lang a:focus-visible{outline:2px solid var(--goldl);outline-offset:1px}
.lang a[aria-current]{background:#F3ECDD;color:#17261B}
.lang a[aria-current]:hover{background:#F3ECDD}
.lang span{opacity:.55;color:#F3ECDD;font-weight:400}
@media(max-width:820px){.lang{margin-right:.5rem;font-size:.85rem}}
/* documents : 4 cartes */
@media(min-width:900px){.docs{grid-template-columns:repeat(2,1fr)}}
.frame{border-radius:14px;overflow:hidden;background:var(--sand);width:100%;max-width:560px;justify-self:center}
.frame img{display:block;width:100%;height:auto}
.frame figcaption{padding:.55rem .9rem;font-size:.82rem;color:var(--ink2)}
.founders .portrait-f{float:right;width:128px;height:128px;border-radius:50%;object-fit:cover;object-position:40% 30%;border:2px solid var(--gold);margin:0 0 .6rem 1rem}
@media(max-width:520px){.founders .portrait-f{width:96px;height:96px}}

/* accueil : photo de forêt avec le mot ZAKAYEN peint */
.hero-home{display:flex;align-items:center;justify-content:center;min-height:100svh;overflow:hidden;color:#F3ECDD;
 background:linear-gradient(180deg,rgba(23,38,27,.5),rgba(23,38,27,.62)),url(../img/fond-foret-flou.jpg) center/cover,var(--forest)}
.hero-frame{position:relative;width:min(100%,1560px,calc(100svh * 1.8189));aspect-ratio:1206/663}
.hero-stage{position:absolute;inset:0;overflow:hidden;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);
 -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-composite:intersect}
.hero-stage .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 47%;animation:forestZoom 36s ease-in-out infinite alternate}
.hero-stage .hero-shade{background:linear-gradient(180deg,rgba(23,38,27,.55) 0,rgba(23,38,27,0) 16%,rgba(23,38,27,0) 56%,rgba(23,38,27,.55) 70%,rgba(23,38,27,.9) 100%)}
.hero-glow{position:absolute;left:0;top:0;width:60%;height:60%;pointer-events:none;
 background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,214,120,.34),rgba(255,214,120,0) 70%);opacity:.5;animation:glowDrift 22s ease-in-out infinite alternate}
.hero-home .hero-in{position:absolute;left:0;right:0;bottom:0;padding-block:0 clamp(1.4rem,4vh,2.6rem);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-home .kicker{margin:0 0 .5rem;text-shadow:0 1px 12px rgba(10,18,12,.8)}
.hero-home .hero-quote{margin:0 auto 1.1rem;max-width:56ch;font-size:clamp(1.1rem,1.7vw,1.5rem);text-shadow:0 1px 14px rgba(10,18,12,.85)}
@keyframes forestZoom{from{transform:scale(1)}to{transform:scale(1.045)}}
@keyframes glowDrift{from{transform:translate(0,0);opacity:.35}to{transform:translate(55%,10%);opacity:.6}}
@media(max-width:1099px){
.hero-home{display:block;padding-top:4.8rem;padding-bottom:2.4rem;background:linear-gradient(180deg,rgba(23,38,27,.72),rgba(23,38,27,.94)),url(../img/fond-foret-flou.jpg) center/cover,var(--forest)}
.hero-frame{width:100%;aspect-ratio:auto;margin-inline:auto}
.hero-stage{position:relative;inset:auto;aspect-ratio:1206/663;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,#000 0,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%),linear-gradient(180deg,#000 0,#000 90%,transparent 100%)}
.hero-stage .hero-shade{background:linear-gradient(180deg,rgba(23,38,27,.4) 0,rgba(23,38,27,0) 14%,rgba(23,38,27,0) 80%,rgba(23,38,27,.5) 100%)}
.hero-home .hero-in{position:relative;padding-block:1.2rem 0}
.hero-glow{display:none}
}
@media(max-width:560px){.hero-stage{aspect-ratio:1.2}}
@media(prefers-reduced-motion:reduce),(prefers-reduced-data:reduce){.hero-stage .hero-img,.hero-glow{animation:none !important}}
.arch-wrap{justify-self:center;max-width:520px;width:100%}
.arch-wrap .arch{max-width:none}
.photo-credit{margin:.5rem 0 0;font-size:.8rem;color:var(--ink2);text-align:center}

/* selecteur a quatre langues : l'en-tete tient sur un telephone de 360 px */
@media(max-width:540px){.brand-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.lang span{display:none}.lang a{padding:0}.lang{margin-right:.4rem}}
.foot-legal{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(217,169,78,.3);text-align:center;font-size:.95rem;line-height:1.6;color:#E8E0CC}
.foot-legal p+p{margin-top:.2rem}