
:root{--ink:#0D0C09;--ink2:#151411;--cream:#F5F3EE;--tx:#23221E;--dim:#5E5D56;--line:#D9D5CA;--acc:#B5503A;--acc2:#9C4130;--sage:#5C6D57;--pale:#C9D5C4}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--tx);font:16px/1.75 'Inter',system-ui,sans-serif}
a{color:inherit}img{max-width:100%;height:auto;display:block}
.mono{font:12px/1.4 'Space Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}
.top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(20px,5vw,64px)}
.top img{width:78px;height:auto}
.top nav{display:flex;align-items:center;gap:clamp(14px,3vw,34px)}
.top nav a{color:#E9E7E0;text-decoration:none;font:12px 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.top nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.top nav a.pill{border:1px solid rgba(245,243,238,.45);border-radius:40px;padding:10px 18px}
.top nav a.pill:hover{background:var(--acc);border-color:var(--acc);text-decoration:none}
@media(max-width:760px){.top nav a:not(.pill){display:none}.top img{width:68px}}
.hero{background:var(--ink);color:#F5F3EE;padding:clamp(150px,22vh,210px) clamp(20px,5vw,64px) clamp(56px,9vh,96px)}
.wrap{max-width:1160px;margin:0 auto}
.crumb{color:var(--pale);opacity:.85;margin-bottom:34px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.kick{color:#E07A5F;margin-bottom:18px;display:block}
h1{font:300 clamp(2.6rem,7vw,5.6rem)/.98 'Cormorant Garamond',Georgia,serif;letter-spacing:-.012em;margin:0 0 6px;max-width:15em}
.sub{font:italic 300 clamp(1.3rem,2.6vw,2rem)/1.2 'Cormorant Garamond',Georgia,serif;color:var(--pale);margin:0 0 30px}
.lead{max-width:640px;font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.8;color:#D6D6D0;margin:0 0 38px}
.acts{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center}
.btn{display:inline-flex;align-items:center;padding:15px 30px;border-radius:50px;background:var(--acc);color:#fff;text-decoration:none;font:12px 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;transition:background .25s,transform .25s}
.btn:hover{background:var(--acc2);transform:translateY(-2px)}
.lnk{font:12px 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#E9E7E0;text-decoration:none;border-bottom:1px solid rgba(233,231,224,.4);padding:4px 0}
.lnk:hover{border-color:#fff;color:#fff}
main{padding:clamp(56px,9vh,110px) clamp(20px,5vw,64px) clamp(40px,7vh,80px)}
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(18px,4vw,64px);padding:clamp(30px,5vh,52px) 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:0}
.row h2{font:400 12px/1.5 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:6px 0 0}
@media(max-width:760px){.row{grid-template-columns:1fr;gap:12px}}
.row p{margin:0 0 16px;max-width:680px;color:var(--dim)}
.row p:last-child{margin-bottom:0}
.row ul{list-style:none;margin:0 0 16px;padding:0;max-width:680px}
.row ul li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--tx)}
.row ul li:first-child{border-top:1px solid var(--line)}
.row ol{list-style:none;margin:0;padding:0;max-width:720px;counter-reset:s}
.row ol li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:6px 14px;padding:18px 0;border-bottom:1px solid var(--line)}
.row ol li:first-child{border-top:1px solid var(--line)}
.row ol li::before{content:counter(s,decimal-leading-zero);font:12px/1.9 'Space Mono',monospace;color:var(--acc);letter-spacing:.1em}
.row ol b{display:block;font:400 1.5rem/1.2 'Cormorant Garamond',Georgia,serif;color:var(--tx);margin-bottom:4px}
.row ol span{color:var(--dim)}
.n ol li{grid-template-columns:44px 1fr}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;margin:6px 0 20px;max-width:880px}
.figs figure{margin:0}
.figs img{width:auto;max-width:100%;height:auto;background:#E7E3D8}
.figs.logo{grid-template-columns:minmax(0,440px)}
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;margin:6px 0 20px;max-width:880px}
.vids.wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.vp{all:unset;box-sizing:border-box;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;color:#E8E4D8;text-align:center;padding:16px;background:linear-gradient(160deg,#1c1b17,#0D0C09)}
.vp .pl{width:58px;height:58px;border-radius:50%;border:1px solid var(--acc);display:block;position:relative;transition:background .2s}
.vp .pl:after{content:'';position:absolute;left:23px;top:18px;border-left:15px solid var(--acc);border-top:11px solid transparent;border-bottom:11px solid transparent;transition:border-color .2s}
.vp:hover .pl,.vp:focus-visible .pl{background:var(--acc)}.vp:hover .pl:after,.vp:focus-visible .pl:after{border-left-color:#fff}
.vp .pt{font:12px/1.4 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase}.vp .pn{font-size:12px;color:#9a978c;max-width:22ch}
.dl{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 18px}.dl a{display:inline-block;padding:12px 20px;border:1px solid var(--tx);border-radius:999px;text-decoration:none;font:12px/1.2 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;transition:background .2s,color .2s}.dl a:hover{background:var(--tx);color:var(--cream)}
.vid{margin:0}.vf{aspect-ratio:var(--r);background:#111;border-radius:4px;overflow:hidden}
.vf iframe,.vf video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#111}
.vid figcaption{font:12px/1.5 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.figs figcaption{font:12px/1.5 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.more a{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font:400 1.4rem/1.25 'Cormorant Garamond',Georgia,serif;max-width:680px}
.more a:first-child{border-top:1px solid var(--line)}
.more a:hover{color:var(--acc)}.more a span{font-family:'Space Mono',monospace;font-size:14px;color:var(--acc)}
.cta{background:var(--ink);color:#F5F3EE;padding:clamp(60px,10vh,110px) clamp(20px,5vw,64px)}
.cta .mono{color:#E07A5F;display:block;margin-bottom:16px}
.cta h2{font:300 clamp(2.4rem,6.5vw,4.8rem)/.98 'Cormorant Garamond',Georgia,serif;margin:0 0 18px}
.cta h2 em{color:#E07A5F}
.cta p{max-width:480px;color:#D6D6D0;margin:0 0 30px}
.foot{background:var(--ink2);color:#B9BBB5;padding:30px clamp(20px,5vw,64px);font-size:13px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
.foot a{color:#C9CBC6;text-decoration:none}.foot a:hover{text-decoration:underline}
.foot div{display:flex;flex-wrap:wrap;gap:8px 22px}
.top nav a.lg{opacity:.75;font-size:12px}.top nav a.lg:hover{opacity:1}
.top nav .nav-dd{position:relative}
.top nav .nav-dd>a.dd-t{white-space:nowrap}
.top nav .nav-dd>a.dd-t:after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.top nav .dd-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:10px;min-width:300px;padding:8px;background:rgba(20,19,15,.97);border:1px solid rgba(245,243,238,.22);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.4);z-index:20}
.top nav .dd-menu:before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.top nav .nav-dd:hover .dd-menu,.top nav .nav-dd:focus-within .dd-menu,.top nav .nav-dd.open .dd-menu{display:block}
.top nav .dd-menu a{display:block;font-size:12px;letter-spacing:.08em;line-height:1.35;padding:11px 14px;border-radius:10px;text-decoration:none!important;color:#E9E7E0}
.top nav .dd-menu a:hover,.top nav .dd-menu a:focus-visible{background:rgba(245,243,238,.1);color:#fff}
.top nav .dd-menu a[aria-current]{color:var(--acc)}
.top nav .dd-menu a.dd-all{border-bottom:1px solid rgba(245,243,238,.18);border-radius:10px 10px 0 0;margin-bottom:4px}
@media(max-width:760px){
.top nav .nav-dd{position:static}
.top nav .nav-dd>a.dd-t{display:inline}
.top nav .dd-menu{position:absolute;left:16px;right:16px;top:100%;transform:none;min-width:0;margin-top:0}
.top nav .nav-dd .dd-menu a{display:block}
}

/* ---- pages services : mise en page éditoriale ---- */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(32px,6vw,96px);align-items:end}
.idx{display:flex;flex-direction:column;border-top:1px solid rgba(245,243,238,.28);align-self:end}
.idx .mono{color:var(--pale);padding:14px 0 10px;opacity:.9}
.idx a{display:flex;gap:16px;align-items:baseline;padding:11px 0;border-bottom:1px solid rgba(245,243,238,.14);text-decoration:none;color:#BDBFB8;font:400 1.15rem/1.25 'Cormorant Garamond',Georgia,serif;transition:color .2s,padding .25s}
.idx a i{font:normal 12px/1 'Space Mono',monospace;letter-spacing:.1em;color:#E07A5F}
.idx a:hover{color:#fff;padding-left:6px}
.idx a[aria-current]{color:#fff;font-style:italic}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr}.idx{display:none}}
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line)}
.pane{padding:clamp(26px,4vw,52px)}
.pane h2{font:400 12px/1.5 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--sage);margin:0 0 22px}
.pane ul{list-style:none;margin:0;padding:0;counter-reset:p}
.pane li{counter-increment:p;position:relative;padding:15px 0 15px 38px;border-top:1px solid var(--line);line-height:1.55}
.pane li:first-child{border-top:0;padding-top:0}
.pane.pl li:before{content:"";position:absolute;left:0;top:27px;width:18px;height:1px;background:var(--acc)}
.pane.pl li:first-child:before{top:12px}
.pane.pd{background:var(--ink);color:#F1EEE6}
.pane.pd h2{color:var(--pale)}
.pane.pd li{border-color:rgba(245,243,238,.14)}
.pane.pd li:before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:19px;font:12px/1 'Space Mono',monospace;color:#E07A5F;letter-spacing:.1em}
.pane.pd li:first-child:before{top:4px}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.sh{font:300 clamp(2rem,4.2vw,3.1rem)/1.05 'Cormorant Garamond',Georgia,serif;margin:0 0 30px;letter-spacing:-.01em}
.meth,.proj,.oth{padding-top:clamp(56px,9vh,100px)}
.meth ol{list-style:none;margin:0;padding:0;counter-reset:s;border-top:1px solid var(--line)}
.meth li{counter-increment:s;display:grid;grid-template-columns:84px minmax(0,230px) minmax(0,1fr);gap:6px 28px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.meth li:before{content:counter(s,decimal-leading-zero);font:italic 300 2.6rem/1 'Cormorant Garamond',Georgia,serif;color:var(--acc)}
.meth li>div{display:contents}
.meth b{font:400 1.65rem/1.2 'Cormorant Garamond',Georgia,serif;color:var(--tx)}
.meth span{color:var(--dim);max-width:640px}
@media(max-width:760px){.meth li{grid-template-columns:56px 1fr}.meth li span{grid-column:2}.meth li:before{font-size:2rem;grid-row:span 2}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:34px 24px}
.card{display:flex;flex-direction:column;gap:3px;text-decoration:none}
.card .ph{display:block;aspect-ratio:4/3;background:#14130F;overflow:hidden;border-radius:2px;margin-bottom:12px}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card .ph.lg img{object-fit:contain;padding:14%}
.card:hover .ph img{transform:scale(1.04)}
.card .ct{font:400 1.5rem/1.2 'Cormorant Garamond',Georgia,serif;transition:color .2s}
.card .cs{font:12px/1.55 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.card:hover .ct{color:var(--acc)}
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chips a{padding:13px 22px;border:1px solid var(--tx);border-radius:999px;text-decoration:none;font:12px/1.2 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;transition:background .2s,color .2s}
.chips a:after{content:" →"}
.chips a:hover{background:var(--tx);color:var(--cream)}
main{padding-bottom:clamp(56px,9vh,100px)}

/* ---- menu déroulant Services : version éditoriale ---- */
.top nav .dd-menu{border-radius:2px;padding:6px 0;min-width:410px;counter-reset:dd;background:rgba(14,13,10,.98)}
.top nav .dd-menu a{counter-increment:dd;display:flex;gap:16px;align-items:baseline;border-radius:0;padding:11px 24px;font:400 1.2rem/1.25 'Cormorant Garamond',Georgia,serif;letter-spacing:0;text-transform:none;border-left:2px solid transparent;transition:background .2s,border-color .2s,padding .2s}
.top nav .dd-menu a:before{content:counter(dd,decimal-leading-zero);font:12px/1 'Space Mono',monospace;letter-spacing:.1em;color:#E07A5F;min-width:18px}
.top nav .dd-menu a:hover,.top nav .dd-menu a:focus-visible{background:rgba(245,243,238,.05);border-left-color:var(--acc);padding-left:28px;color:#fff}
.top nav .dd-menu a.dd-all{counter-increment:none;font:12px/1.4 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#A9ABA4;border-bottom:1px solid rgba(245,243,238,.16);border-radius:0;margin:0 0 6px;padding:12px 24px}
.top nav .dd-menu a.dd-all:before{content:none}
.top nav .dd-menu a[aria-current]{color:#E07A5F;font-style:italic}
@media(max-width:760px){.top nav .dd-menu{min-width:0}}
.top nav .nav-dd>a.dd-t{display:inline-flex;align-items:center}
@media(max-width:760px){.top nav .nav-dd>a.dd-t{display:inline-flex}}

/* bloc "A propos du projet" */
.about h3{font:400 clamp(1.4rem,2.2vw,1.8rem)/1.15 'Cormorant Garamond',Georgia,serif;color:var(--tx);margin:26px 0 10px}
.about h3:first-child{margin-top:0}
.about .svclink{margin-top:24px;padding-top:18px;border-top:1px dashed var(--line)}
.about .svclink a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}
.about .svclink .more1{margin-left:6px;text-decoration:none;white-space:nowrap}
