:root{--bg:#0d0c0d;--panel:#171415;--ink:#f1ece4;--mute:#9a9288;--line:#2e2a29;--gold:#c8b08a;
--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:"Jost","Helvetica Neue",Arial,sans-serif;--script:"Pinyon Script"}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font:300 1.05rem/1.7 var(--sans)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
header{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(1.25rem,4vw,3.5rem);background:linear-gradient(rgba(13,12,13,.75),transparent);transition:background .3s,padding .3s}
header.solid{background:rgba(13,12,13,.95);padding-block:.8rem;border-bottom:1px solid var(--line)}
.logo{text-decoration:none;text-align:center;line-height:1}
.logo b{display:block;font:400 clamp(2.6rem,5vw,3.6rem)/.9 var(--script);font-weight:400}
.logo small{display:block;margin-top:.4rem;font:400 .68rem var(--serif);letter-spacing:.32em;text-transform:uppercase}
nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,1.6rem)}
nav>a{font:500 1.05rem var(--serif);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:border-color .2s}
nav>a:hover,nav>a[aria-current]{border-color:var(--ink)}
.social{display:block;width:22px;height:22px;margin-left:clamp(.5rem,2vw,1.5rem)}
.social svg{width:100%;height:100%;fill:currentColor}
main{padding-top:110px}
main.home{padding-top:0}
section{padding:clamp(3rem,8vw,6rem) clamp(1.25rem,5vw,4rem);max-width:1100px;margin:auto}
h1.title{font:300 clamp(2.2rem,6vw,4rem)/1.1 var(--serif);letter-spacing:.02em;margin-bottom:2.5rem}
figure{background:linear-gradient(160deg,#211d1e,#141112);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--mute);font-size:.9rem;text-align:center}
figure::before{content:attr(data-label);padding:1rem}
figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Accueil */
.hero{max-width:none;padding:0;margin:0;height:100svh;min-height:520px;position:relative}
.hero figure{position:absolute;inset:0;font-size:1rem}
.hero figure img{object-position:50% 12%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,13,.6),transparent 60%),linear-gradient(transparent 50%,rgba(13,12,13,.9));pointer-events:none}
.hero-text{position:absolute;z-index:2;left:clamp(1.25rem,4vw,3.5rem);bottom:clamp(2rem,7vh,5rem)}
.hero-text h1{font:300 clamp(2.8rem,8vw,6.5rem)/1 var(--serif);letter-spacing:.08em;text-transform:uppercase;animation:reveal 1.8s ease-out both}
.hero-text h1 span{display:block;color:var(--gold)}
.roles{margin-top:1.4rem;font:500 1.15rem var(--serif);letter-spacing:.3em;text-transform:uppercase}
.where{margin-top:.4rem;color:var(--mute);letter-spacing:.1em}
@keyframes reveal{from{opacity:0;letter-spacing:.22em}to{opacity:1}}
.quote{text-align:center;max-width:820px}
blockquote{font:italic 300 clamp(1.6rem,4vw,2.5rem)/1.35 var(--serif)}
cite{display:block;margin-top:1.2rem;font-style:normal;color:var(--gold);letter-spacing:.14em}
.intro{max-width:760px;text-align:center}
.intro h2,.story h2{font:300 clamp(1.6rem,3.5vw,2.3rem)/1.2 var(--serif);color:var(--gold);margin-bottom:1.5rem}
.intro p+p,.story p+p{margin-top:1.2rem}
.motto{margin-top:2.5rem;font:400 1.6rem var(--serif);letter-spacing:.2em;text-transform:uppercase}
.closing{text-align:center;max-width:760px;border-top:1px solid var(--line)}
.closing p{font:italic 300 clamp(1.3rem,3vw,1.8rem)/1.5 var(--serif)}
/* Profil */
.profil{display:grid;grid-template-columns:300px 1fr;gap:clamp(2rem,6vw,5rem);align-items:start}
aside figure{aspect-ratio:3/4;margin-bottom:1.8rem}
aside figure img{object-position:50% 18%}
dl{border-top:1px solid var(--line)}
dl div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.98rem}
dt{color:var(--mute)}
.story{font:400 1.2rem/1.75 var(--serif);max-width:60ch}
.story h2{margin-top:3rem}
.story h2:first-child{margin-top:0}
.story .lines{margin-top:1.2rem;color:var(--mute)}
.story .lines p+p{margin-top:.2rem}
.story .end{margin-top:3rem;font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase}
.story .place{margin-top:.6rem;color:var(--mute);font:300 1rem var(--sans);letter-spacing:.14em}
/* Galeries */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.grid figure{aspect-ratio:2/3}
.grid figure:nth-child(3n+2){margin-top:2.5rem}
.more{display:inline-block;margin-top:2.5rem;color:var(--gold)}
.polas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.polas figure{aspect-ratio:2/3}
.sub{font:300 1.8rem var(--serif);margin:4rem 0 1.5rem}
.video{margin:0 auto;max-width:380px;aspect-ratio:9/16;background:var(--panel);display:grid;place-items:center;color:var(--mute);border:1px solid var(--line);overflow:hidden}
.video iframe{width:100%;height:100%;border:0}
.videos{display:grid;gap:2rem;justify-items:center}
.video.wide{width:100%;max-width:900px;aspect-ratio:16/9}
.empty{color:var(--mute);text-align:center;font:italic 300 1.4rem var(--serif)}
/* Contact */
form{display:grid;gap:1.6rem;max-width:820px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font:400 1.2rem var(--serif)}
label i{font:300 .85rem var(--sans);font-style:normal;color:var(--mute);margin-left:.4rem}
input,textarea{width:100%;margin-top:.5rem;padding:.9rem 1rem;background:var(--panel);border:1px solid var(--line);color:var(--ink);font:300 1rem var(--sans);border-radius:0;transition:border-color .2s}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
textarea{min-height:11rem;resize:vertical}
.hp{position:absolute;left:-9999px}
button{justify-self:start;padding:1rem 2.8rem;background:transparent;border:1px solid var(--ink);color:var(--ink);font:500 1rem var(--serif);letter-spacing:.35em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s}
button:hover{background:var(--ink);color:var(--bg)}
#msg{min-height:1.5rem;color:var(--gold)}
footer{border-top:1px solid var(--line);padding:2.5rem 1.25rem;text-align:center;color:var(--mute);font-size:.85rem}
footer .tag{font:500 1rem var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:.8rem}
@media(max-width:820px){
header{flex-direction:column;gap:.7rem;padding:.8rem 1rem}
nav{flex-wrap:wrap;justify-content:center;gap:.4rem 1rem}
nav>a{font-size:.85rem}
.social{margin-left:0}
main{padding-top:130px}
.hero-text{bottom:2.5rem}
.hero-text h1{letter-spacing:.05em}
.roles{letter-spacing:.2em;font-size:1rem}
.profil,.row{grid-template-columns:1fr}
.grid{grid-template-columns:repeat(2,1fr)}
.grid figure:nth-child(3n+2){margin-top:0}
.polas{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){h1{animation:none!important}}

html[lang="en"] [data-lang="fr"],html[lang="fr"] [data-lang="en"]{display:none}
.flags{display:flex;gap:.6rem;margin-left:clamp(.3rem,1vw,.8rem)}
.flags button{padding:0;width:30px;height:20px;border:0;border-radius:3px;background:none;opacity:.4;cursor:pointer;line-height:0;transition:opacity .2s}
.flags button svg{width:100%;height:100%;border-radius:3px;display:block}
.flags button:hover{background:none;opacity:.85}
.flags button[aria-pressed="true"]{opacity:1;outline:1px solid var(--gold);outline-offset:3px}