:root{
  --ink:#221f1a;--ink2:#2d2924;--gold:#a67c3d;--gold-soft:#c9a566;
  --stone:#f3f1ed;--muted:#6b655b;
  --sans:'Poppins',system-ui,sans-serif;--serif:'Lora',Georgia,serif;
  --pad:clamp(1.25rem,5vw,5rem);--hh:76px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{line-height:1.1;letter-spacing:-.015em}
h1{font-size:clamp(2rem,4.6vw,3.9rem);font-weight:700}
h2{font-size:clamp(1.4rem,2.5vw,2.1rem);font-weight:600}
section,.ph{padding:clamp(3rem,7vw,6rem) var(--pad)}
.dark{background:var(--ink);color:#fff}
.tag{font-family:var(--serif);font-style:italic;color:var(--gold-soft);font-size:clamp(1.15rem,2vw,1.55rem)}
.btn{display:inline-block;font-weight:500;font-size:.95rem;cursor:pointer;background:var(--ink);color:#fff;border:1.5px solid var(--ink);padding:.85rem 1.8rem;border-radius:999px;transition:background .25s,transform .25s}
.btn:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}
.btn.gold{background:var(--gold);border-color:var(--gold)}
.btn.gold:hover{background:#fff;color:var(--ink);border-color:#fff}
.lnk{display:inline-block;margin-top:1rem;font-weight:500;color:var(--gold);border-bottom:1px solid currentColor}
body{animation:pg .6s ease}
@keyframes pg{from{opacity:0}to{opacity:1}}
html{overflow-x:hidden}

/* en-tête */
.hd{position:fixed;inset:0 0 auto;z-index:30;height:var(--hh);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.hd:not(.solid){background:linear-gradient(#000000aa,transparent)}
.hd.solid{background:#fffffff2;backdrop-filter:blur(12px);color:var(--ink);box-shadow:0 1px 0 #0000001a}
.brand{flex:none}.brand img{height:38px;width:auto}
.hd .l-d{display:none}.hd.solid .l-d{display:block}.hd.solid .l-l{display:none}
#nav{display:flex;align-items:center;gap:clamp(1rem,1.8vw,2rem);font-size:.85rem;font-weight:500;height:100%;white-space:nowrap}
.ni{position:relative;height:100%;display:flex;align-items:center}
.ni>a{position:relative;padding:.3rem 0}
.ni>a.act::after{width:100%}
.ni>a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--gold);transition:width .3s}
.ni:hover>a::after{width:100%}
.drop{position:absolute;top:100%;left:-1.2rem;min-width:320px;display:none;flex-direction:column;background:var(--ink);color:#fff;padding:.9rem 0;border-top:2px solid var(--gold);box-shadow:0 20px 40px #0004}
.ni:hover .drop,.ni:focus-within .drop{display:flex}
.drop a{padding:.5rem 1.4rem;font-weight:400;transition:background .2s,color .2s,padding .2s}
.drop a:hover{background:var(--ink2);color:var(--gold-soft);padding-left:1.8rem}
.ni:nth-last-child(-n+3) .drop{left:auto;right:-1.2rem}
.cta{border:1.5px solid currentColor;padding:.5rem 1.2rem;border-radius:999px;transition:all .25s}
.cta:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.mb{display:none;background:none;border:1.5px solid currentColor;border-radius:999px;padding:.35rem 1rem;cursor:pointer}

/* accueil : l'arche */
.portal{height:240vh;background:var(--ink);padding:0}
.stick{position:sticky;top:0;height:100vh;overflow:hidden}
.win{position:absolute;overflow:hidden;background:#000;will-change:width,height,left,top}
.win img{width:100%;height:100%;object-fit:cover;will-change:transform}
.ptxt{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:min(46vw,640px);color:#fff;z-index:2}
.ptxt h1{margin-bottom:1.3rem}
.ptxt .tag{margin-bottom:2rem}
.hint{position:absolute;left:var(--pad);bottom:2rem;color:#fff9;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s}
.hint::before{content:"";display:inline-block;width:40px;height:1px;background:var(--gold);vertical-align:middle;margin-right:.8rem}
.uni h2{margin-bottom:3rem}
.uni ul{list-style:none;padding:0}
.uni li{border-top:1px solid #ffffff2e}
.uni li:last-child{border-bottom:1px solid #ffffff2e}
.uni a{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center;padding:2rem 0;transition:padding .35s,color .35s}
.uni h3{font-size:clamp(1.3rem,2.8vw,2.2rem);font-weight:600}
.uni p{color:#ffffffa6;font-size:.95rem}
.uni li:hover a{padding-left:1.5rem;color:var(--gold-soft)}
.peek{position:fixed;top:0;left:0;width:280px;height:200px;object-fit:cover;pointer-events:none;z-index:25;opacity:0;transition:opacity .25s;box-shadow:0 20px 50px #0008}
.peek.on{opacity:1}
.rail-s{background:var(--stone);padding-inline:0}
.rh{display:flex;justify-content:space-between;align-items:end;padding:0 var(--pad) 2.5rem}
.rh p{color:var(--muted);font-size:.9rem}
.rail{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 1rem;scrollbar-width:thin;cursor:grab}
.rc{flex:0 0 clamp(260px,28vw,380px);height:clamp(340px,40vw,500px);position:relative;border:0;padding:0;background:#000;overflow:hidden;scroll-snap-align:start;cursor:inherit}
.rc img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;user-select:none;-webkit-user-drag:none}
.rc:hover img{transform:scale(1.06)}
.rc span{position:absolute;inset:auto 0 0;padding:2.5rem 1.1rem 1rem;color:#fff;text-align:left;font-weight:600;background:linear-gradient(transparent,#000000cc)}
.rc small{display:block;font-weight:400;font-size:.8rem;opacity:.8}
.band{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.band h2{max-width:41ch !important;}

/* pages intérieures */
.ph{padding-top:calc(var(--hh) + clamp(2.5rem,6vw,4.5rem));padding-bottom:clamp(2.5rem,5vw,4rem)}.ph h1{font-size:clamp(1.7rem,3.4vw,2.6rem)}
.crumb{font-size:.85rem;color:#ffffff99;margin-bottom:1.5rem}
.crumb a:hover{color:var(--gold-soft)}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.5vw,1.2rem);color:var(--gold-soft);max-width:48ch;margin-top:1rem}
.acc{max-width:980px}
.ai{border-top:1px solid #0002;scroll-margin-top:calc(var(--hh) + 10px)}
.ai:last-child{border-bottom:1px solid #0002}
.ai>button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;text-align:left;background:none;border:0;cursor:pointer;padding:1.3rem 0;font-size:clamp(1rem,1.7vw,1.3rem);font-weight:500;transition:color .25s}
.ai>button:hover{color:var(--gold)}
.ai i{flex:none;width:22px;height:22px;position:relative}
.ai i::before,.ai i::after{content:"";position:absolute;background:var(--gold);transition:transform .3s}
.ai i::before{left:0;right:0;top:10px;height:2px}.ai i::after{top:0;bottom:0;left:10px;width:2px}
.ai.open i::after{transform:scaleY(0)}
.ap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}
.ap>div{overflow:hidden}
.ai.open .ap{grid-template-rows:1fr}
.ap p{color:var(--muted);max-width:60ch;padding-bottom:.2rem}
.ap .lnk{margin-bottom:1.8rem}
.gal-s{background:var(--stone)}
.gal-s h2{margin-bottom:2.2rem}
.grid{columns:3 280px;column-gap:1rem}
.gi{break-inside:avoid;margin-bottom:1rem;position:relative;display:block;width:100%;padding:0;border:0;background:#000;overflow:hidden;cursor:zoom-in}
.gi img{width:100%;height:auto;transition:transform .6s ease}
.gi:hover img{transform:scale(1.05)}
.gi span{position:absolute;inset:auto 0 0;padding:2.2rem 1rem .8rem;text-align:left;color:#fff;font-size:.88rem;background:linear-gradient(transparent,#000000cc);opacity:0;transition:opacity .3s}
.gi:hover span,.gi:focus-visible span{opacity:1}

/* agence */
.subnav{position:sticky;top:var(--hh);z-index:10;display:flex;gap:2rem;overflow-x:auto;background:#fff;padding:1rem var(--pad);border-bottom:1px solid #0001;font-size:.9rem;font-weight:500;white-space:nowrap}
.subnav a:hover{color:var(--gold)}
.ag{display:grid;grid-template-columns:1fr 1.6fr;gap:2rem 4rem;border-bottom:1px solid #0001;scroll-margin-top:calc(var(--hh) + 50px);padding-block:clamp(3rem,6vw,5.5rem)}
.big{font-family:var(--serif);font-size:clamp(1.05rem,1.6vw,1.35rem);line-height:1.5}
.vals{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
.vals>div{border-top:2px solid var(--gold);padding-top:1rem}
.vals p{color:var(--muted);font-size:.95rem;margin-top:.4rem}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.av{aspect-ratio:3/4;border-radius:999px 999px 0 0;background:var(--stone);margin-bottom:.8rem}
.team b{display:block}.team span{color:var(--muted);font-size:.88rem}
.clients{list-style:none;padding:0;margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.6rem 2rem;font-size:1.25rem;font-weight:600}
.clients li{color:#8d867a}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.5fr;gap:3rem 5rem;background:var(--stone)}
.coords{font-size:1.2rem;font-weight:500}
.coords a{border-bottom:1px solid var(--gold)}
form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
label{display:flex;flex-direction:column;gap:.35rem;font-size:.88rem;font-weight:500}
label.full,form .btn,.form-status{grid-column:1/-1}
input,select,textarea{font:inherit;padding:.75rem .9rem;border:1.5px solid #d6d1c7;border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
.err{border-color:#b3392b!important}
form .btn{justify-self:start}
.form-status{font-size:.92rem;min-height:1.4em}
.form-status.ok{color:#2f6b3f}.form-status.ko{color:#b3392b}

/* pied de page */
footer{background:var(--ink);color:#fff;padding:4rem var(--pad) 2rem}
.ft-top{display:grid;grid-template-columns:240px 1fr;gap:3rem}
.ft-top>img{width:200px}
.ft-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;font-size:.82rem}
.ft-cols div{display:flex;flex-direction:column;gap:.4rem}
.ft-cols a{color:#ffffffa6;transition:color .2s}.ft-cols a:hover{color:var(--gold-soft)}
.ft-cols .ft-h{color:#fff;font-weight:600;font-size:.9rem;margin-bottom:.4rem}
.ft-b{margin-top:3rem;padding-top:1.5rem;border-top:1px solid #ffffff22;color:#ffffff80;font-size:.82rem;display:flex;justify-content:space-between;gap:1rem}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:#000000ee;display:flex;align-items:center;justify-content:center;padding:2rem}
.lightbox[hidden]{display:none}
.lightbox figure{max-width:min(1100px,86vw)}
.lightbox img{max-height:80vh;width:auto;margin:auto}
.lightbox figcaption{color:#fff;text-align:center;margin-top:.8rem;font-family:var(--serif);font-style:italic}
.lb-close,.lb-nav{position:absolute;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;padding:.6rem 1rem}
.lb-close{top:.6rem;right:.8rem}.lb-nav{top:50%;transform:translateY(-50%)}
.lb-nav.prev{left:.4rem}.lb-nav.next{right:.4rem}
.lb-close:hover,.lb-nav:hover{color:var(--gold-soft)}

@media (hover:none){.peek{display:none}}
@media (max-width:1000px){
  .ft-top,.contact,.ag{grid-template-columns:1fr}
  .ft-cols{grid-template-columns:1fr 1fr}
  .uni a{grid-template-columns:1fr;gap:.6rem}
}
@media (max-width:1100px){
  .mb{display:block}
  #nav{white-space:normal;position:fixed;inset:var(--hh) 0 0;height:auto;flex-direction:column;align-items:flex-start;gap:1.2rem;padding:2rem var(--pad);background:var(--ink);color:#fff;font-size:1.2rem;overflow:auto;display:none}
  body.menu #nav{display:flex}
  
}
@media (max-width:900px){
  .ptxt{max-width:none;right:var(--pad);top:auto;bottom:5.5rem;transform:none}
  .ptxt h1{font-size:1.9rem}.ptxt .tag{margin-bottom:1.2rem}
  .hint{display:none}
  .vals,.team,form{grid-template-columns:1fr}
  .team{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
  .portal{height:100vh}
  .ptxt{opacity:1!important}
}

/* slider des pages détaillées */
.slider{position:relative;margin-top:var(--hh);height:clamp(380px,64vh,640px);background:#000;overflow:hidden;color:#fff;padding:0}
.slides,.slide{position:absolute;inset:0;margin:0}
.slide{opacity:0;transition:opacity 1.1s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 7s ease-out}
.slide.on img{transform:scale(1)}
.slide figcaption{position:absolute;right:var(--pad);bottom:1.6rem;font-family:var(--serif);font-style:italic;font-size:.9rem;color:#fffc}
.slider::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000000b3,#00000040 60%,#0000),linear-gradient(0deg,#000000a6,transparent 55%);pointer-events:none}
.s-over{position:absolute;z-index:2;left:var(--pad);right:var(--pad);bottom:clamp(2.8rem,6vw,4.5rem);max-width:640px}
.s-over h1{font-size:clamp(1.6rem,3.6vw,2.7rem)}
.s-over .crumb{margin-bottom:.9rem}
.s-prev,.s-next{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1.5px solid #ffffff80;background:#0000004d;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;transition:background .25s,border-color .25s}
.s-prev{left:1rem}.s-next{right:1rem}
.s-prev:hover,.s-next:hover{background:var(--gold);border-color:var(--gold)}
.dots{position:absolute;z-index:3;left:var(--pad);bottom:1.4rem;display:flex;gap:.5rem}
.dots button{width:26px;height:3px;border:0;padding:0;background:#ffffff66;cursor:pointer;transition:background .3s,width .3s}
.dots button.on{background:var(--gold-soft);width:44px}

/* page détaillée : menu latéral + accordéon */
.detail{display:grid;grid-template-columns:260px 1fr;gap:3rem 5rem;align-items:start}
.side{position:sticky;top:calc(var(--hh) + 1.5rem)}
.side p{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.side nav{display:flex;flex-direction:column;border-left:1.5px solid #0002}
.side a{padding:.55rem 0 .55rem 1rem;font-size:.9rem;color:var(--muted);margin-left:-1.5px;border-left:1.5px solid transparent;transition:color .2s,border-color .2s}
.side a:hover{color:var(--ink);border-color:var(--gold)}
.acc{max-width:none}

/* apparition au défilement (le contenu reste visible sans JS) */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.js .rv.vis{opacity:1;transform:none}

@media (max-width:1000px){
  .detail{grid-template-columns:1fr;gap:1.5rem}
  .side{position:static}
  .side nav{flex-direction:row;overflow-x:auto;border:0;gap:.5rem;padding-bottom:.5rem}
  .side a{white-space:nowrap;border:1.5px solid #0002;border-radius:999px;padding:.4rem 1rem;margin:0}
}
@media (max-width:700px){
  .slider{height:clamp(340px,60vh,480px)}
  .slide figcaption{display:none}
  .s-prev,.s-next{top:auto;bottom:.9rem;transform:none;width:38px;height:38px}
  .s-prev{left:auto;right:4rem}.s-next{right:1rem}
  .dots{bottom:1.6rem}
  .s-over{bottom:4.2rem}
  .rail{padding-inline:1.25rem}
  .ft-cols{grid-template-columns:1fr}
  .ft-b{flex-direction:column}
  .subnav{gap:1.2rem}
  .uni a{padding:1.4rem 0}
}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.slide img{transform:none}}
.detail>*,.contact>*,.ag>*,.ft-top>*,form>*{min-width:0}
input,select,textarea{width:100%;max-width:100%}

/* slider plein écran de l'accueil */
.slider.full{margin-top:0;height:100vh;height:100svh;min-height:560px}
.slider.full .s-over{top:50%;bottom:auto;transform:translateY(-50%);max-width:720px}
.slider.full .s-over h1{font-size:clamp(2rem,4.8vw,3.9rem);margin-bottom:1.2rem}
.slider.full .tag{margin-bottom:2rem}
.actions{display:flex;flex-wrap:wrap;gap:.9rem}
.btn.ghost-w{background:transparent;border-color:#fff}
.btn.ghost-w:hover{background:#fff;color:var(--ink);border-color:#fff}
@media (max-width:700px){
  .slider.full{min-height:520px}
  .slider.full .s-over{top:auto;bottom:6rem;transform:none}
  .slider.full .s-over h1{font-size:1.9rem}
  .slider.full .tag{margin-bottom:1.2rem}
  .actions .btn{padding:.7rem 1.3rem;font-size:.88rem}
}

/* section "Notre approche" */
.manifesto{display:grid;grid-template-columns:minmax(240px,400px) 1fr;gap:clamp(2.5rem,7vw,6.5rem);align-items:center;padding-block:clamp(3.5rem,8vw,7rem)}
.m-img{aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden;outline:1.5px solid var(--gold);outline-offset:10px;margin:10px}
.m-img img{width:100%;height:100%;object-fit:cover}
.eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:1.2rem}
.m-big{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.9rem);line-height:1.4;max-width:32ch}
.m-pts{list-style:none;padding:0;margin:2.2rem 0 1.4rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.m-pts li{border-top:2px solid var(--gold);padding-top:.9rem}
.m-pts b{display:block;font-weight:600;margin-bottom:.3rem}
.m-pts span{color:var(--muted);font-size:.9rem;line-height:1.5;display:block}
@media (max-width:900px){
  .manifesto{grid-template-columns:1fr}
  .m-img{width:min(78%,320px)}
  .m-pts{grid-template-columns:1fr}
}

/* bouton de sous-menu : visible seulement sur mobile/tablette */
.sub-t{display:none}
@media (max-width:1100px){
  body.menu{overflow:hidden}
  body.menu .hd{background:var(--ink);color:#fff;box-shadow:none;backdrop-filter:none}
  body.menu .hd .l-l{display:block}body.menu .hd .l-d{display:none}
  .ni{height:auto;width:100%;flex-wrap:wrap;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff1f;padding-bottom:.9rem}
  .ni>a{flex:1}
  .ni>a::after{display:none}
  .ni>a.act{color:var(--gold-soft)}
  .sub-t{display:block;position:relative;width:40px;height:40px;background:none;border:1.5px solid #ffffff55;border-radius:50%;cursor:pointer;color:#fff}
  .sub-t::before,.sub-t::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;transition:transform .3s}
  .sub-t::before{width:14px;height:2px;margin:-1px 0 0 -7px}
  .sub-t::after{width:2px;height:14px;margin:-7px 0 0 -1px}
  .ni.open .sub-t{border-color:var(--gold);color:var(--gold-soft)}
  .ni.open .sub-t::after{transform:scaleY(0)}
  .drop,.ni:nth-last-child(-n+3) .drop{position:static;display:none;width:100%;min-width:0;background:none;box-shadow:none;border:0;padding:.6rem 0 0 .2rem;left:auto;right:auto}
  .ni:hover .drop,.ni:focus-within .drop{display:none}
  .ni.open .drop{display:flex}
  .drop a{font-size:.95rem;color:#ffffffbf;padding:.55rem 0 .55rem 1rem;border-left:2px solid var(--gold)}
  .drop a:hover{background:none;padding-left:1.3rem}
  .cta{margin-top:.5rem}
}