:root{--paper:#FAFAFA;--ink:#1C1C1A;--ink-soft:#7A7A76;--g3:#B0B0AC;--line:#E5E5E3;--line-2:#D9D8D3;--off:#F0F0EE;--blue:#FF4B1F;--pad:clamp(20px,5vw,80px);--sec:clamp(70px,12vh,150px);--ease:cubic-bezier(.4,0,.1,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:where(#projets,#demarche){scroll-margin-top:clamp(80px,11vh,108px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--paper);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-weight:300;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--blue);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.mono{font-family:'Space Mono',monospace}
.lab{font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.b{color:var(--blue)}
.scrimT{position:absolute;inset:0 0 auto 0;height:24%;background:linear-gradient(rgba(15,16,20,.4),transparent);pointer-events:none}
.scrim{position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(transparent,rgba(15,16,20,.55));pointer-events:none}

/* persistent nav */
.siteHeader{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px var(--pad);background:transparent;border-bottom:1px solid transparent;transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
body.hdr-solid .siteHeader{background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom-color:var(--line);box-shadow:0 1px 24px rgba(0,0,0,.04)}
.siteName{display:flex;flex-direction:column;gap:4px;color:var(--ink);font-weight:500;font-size:clamp(21px,2.5vw,29px);line-height:1.1;transition:color .3s}
.siteName .role{display:flex;align-items:center;gap:.6em;font-family:'Space Mono',monospace;font-weight:400;font-size:clamp(9.5px,.85vw,12px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.siteName .role .sq{width:8px;height:8px;background:var(--blue);display:inline-block;flex:none}
.siteNav{display:flex;gap:clamp(13px,1.3vw,19px);font-family:'Space Mono',monospace;font-size:clamp(11px,.95vw,14px);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);transition:color .3s}
body.hdr-light .siteName,body.hdr-light .siteNav{color:#fff}
body.hdr-light .siteName .role{color:rgba(255,255,255,.78)}
.siteNav a:hover{color:var(--blue)}

.rv{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}.rv{opacity:1;transform:none}}

/* hero */
.hero{height:100svh;position:relative;overflow:hidden}
.hero>img{width:100%;height:100%;object-fit:cover}
.hero .htxt{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(60px,11vh,96px);z-index:3;color:#fff}
.hero .ovl{display:flex;align-items:center;gap:.7rem;font-family:'Space Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.88);margin-bottom:1.1rem}
.hero .ovl .sq{width:11px;height:11px;background:var(--blue);display:inline-block}
.hero h1{font-weight:300;font-size:clamp(2.3rem,5vw,4.6rem);line-height:1.05;letter-spacing:-.03em;max-width:17ch}
.hero .sc{position:absolute;left:var(--pad);bottom:clamp(26px,5vh,44px);z-index:3;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.82);transition:color .3s}
.hero a.sc:hover{color:#fff}

/* intro + projects (home) */
.intro{max-width:1180px;margin:0 auto;padding:clamp(60px,10vh,120px) var(--pad) clamp(20px,4vh,40px)}
.intro .lab{margin-bottom:14px}
.intro p{font-weight:300;font-size:clamp(1.3rem,2.6vw,2.1rem);letter-spacing:-.02em;line-height:1.25;max-width:24ch}
.tHead{max-width:1180px;margin:0 auto;padding:clamp(40px,7vh,80px) var(--pad) 16px;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line)}
.tHead .t{font-weight:400;font-size:clamp(1.1rem,2vw,1.5rem);letter-spacing:-.01em}
a.erow{max-width:1180px;margin:0 auto;padding:clamp(40px,7vh,90px) var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,60px);align-items:center}
.erow.rev .im{order:2}
.erow .im{overflow:hidden;border:1px solid var(--line-2)}
.erow .im.draw{background:var(--off);display:flex;align-items:center;justify-content:center;padding:clamp(16px,2vw,30px)}
/* les visuels gardent leur format d'origine : jamais de recadrage */
.erow .im img{width:100%;height:auto;transition:transform 1.1s var(--ease)}
.erow:hover .im img{transform:scale(1.03)}
.erow .im.draw img{width:100%;height:auto;border:1px solid var(--line-2);background:#fff}
.erow:hover .im.draw img{transform:none}
.erow .n{font-family:'Space Mono',monospace;font-size:12px;color:var(--blue);margin-bottom:14px}
.erow h3{font-weight:300;font-size:clamp(1.6rem,2.8vw,2.4rem);letter-spacing:-.025em;line-height:1.06}
.erow .x{color:var(--ink-soft);margin-top:16px;max-width:40ch;font-size:15px;line-height:1.6}
.erow .go{display:inline-block;margin-top:20px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}
.erow:hover .go{color:var(--blue);border-color:var(--blue)}

/* démarche */
.dem{padding:var(--sec) var(--pad);max-width:1180px;margin:0 auto}
.dem h2{font-weight:300;font-size:clamp(1.8rem,3.4vw,2.9rem);letter-spacing:-.03em;line-height:1.06;max-width:20ch;margin:10px 0 clamp(34px,5vh,58px)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,52px)}
.step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
.step .no{position:absolute;top:-19px;left:0;width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-size:14px;background:var(--paper)}
.step h3{font-weight:500;font-size:1.1rem;letter-spacing:-.01em;margin-bottom:11px}
.step p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.demClose{margin-top:clamp(34px,5vh,56px);font-weight:300;font-size:clamp(1.05rem,1.8vw,1.4rem);letter-spacing:-.01em;max-width:48ch}
.demClose .ar{color:var(--blue);margin-right:.4em}

/* atelier */
.about{padding:var(--sec) var(--pad);max-width:1180px;margin:0 auto}
/* blocs d'accueil consécutifs : le padding bas du précédent fait l'espacement,
   sinon les deux s'additionnent et le trou double entre chaque bloc */
.hblock + .hblock{padding-top:0}
.about .lab{margin-bottom:20px}
.about p{font-weight:400;font-size:clamp(1.15rem,1.8vw,1.45rem);line-height:1.5;letter-spacing:-.015em;margin-bottom:20px}
.about .small{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.03em;color:var(--ink-soft);line-height:1.8;margin-top:8px}

/* detail pages */
.dtop{max-width:1180px;margin:0 auto;padding:clamp(84px,10vh,116px) var(--pad) 0;display:flex;justify-content:space-between;align-items:center;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--ink-soft)}
.dtop a:hover{color:var(--blue)}
.dHeader{max-width:1180px;margin:0 auto;padding:clamp(28px,5vh,60px) var(--pad) clamp(8px,3vh,28px)}
.dHeader .n{font-family:'Space Mono',monospace;font-size:13px;color:var(--ink-soft)}
.dHeader h2{font-weight:300;font-size:clamp(2rem,5vw,3.8rem);letter-spacing:-.03em;line-height:1.03;margin:12px 0}
.dHeader .meta{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.05em;color:var(--ink-soft)}
.dHeader .desc{font-size:clamp(16px,1.3vw,19px);color:#3a3a37;max-width:62ch;margin-top:20px;line-height:1.62}
.dWrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
.drow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,50px);align-items:center;padding:clamp(28px,5vh,64px) 0}
.drow.rev .im{order:2}
.drow .im{overflow:hidden;border:1px solid var(--line-2)}
.drow .im img{width:100%;height:auto}
.drow .tx .k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.drow .tx p{color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:42ch}
.plate{background:var(--off);border:1px solid var(--line-2);margin:clamp(24px,4vw,52px) auto 0;max-width:1180px;padding:clamp(20px,3vw,40px)}
.plate .ph{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line-2);padding-bottom:12px;margin-bottom:22px}
.plate .ph .t{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.plate .ph .s{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--ink-soft)}
.plate img{width:100%;background:#fff;border:1px solid var(--line-2)}
.plate figcaption{font-family:'Space Mono',monospace;font-size:10.5px;color:var(--ink-soft);padding-top:12px}
.plate .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.dnav{max-width:1180px;margin:clamp(40px,7vh,90px) auto 0;padding:24px var(--pad) 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}
.dnav a{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.06em;display:inline-flex;gap:8px;align-items:center}
.dnav a:hover{color:var(--blue)}
.dnav .next{font-family:'DM Sans';font-weight:400;font-size:clamp(15px,2vw,20px);letter-spacing:-.01em}

/* pied de page — discret, filet fin aligné sur la largeur du contenu */
/* pleine largeur, comme le header : filet bord à bord, contenu aligné sur les gouttières --pad */
.siteFooter{margin-top:clamp(48px,8vh,90px);padding:26px var(--pad) 36px;background:#fff;border-top:1px solid var(--line)}
/* après un bloc d'accueil, son padding bas fait déjà l'espacement */
.hblock + .siteFooter{margin-top:0}
.siteFooter .sf-in{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}
.siteFooter .sf-brand{display:flex;flex-direction:column;gap:4px}
.siteFooter .sf-name{font-weight:500;font-size:14px;letter-spacing:-.01em}
.siteFooter .sf-role{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.siteFooter .sf-nav{display:flex;gap:16px;flex-wrap:wrap;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.siteFooter .sf-nav a:hover{color:var(--blue)}
.siteFooter .sf-legal{margin-top:20px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.06em;color:var(--g3)}

@media(max-width:640px){.siteHeader{padding:13px var(--pad);gap:14px}.siteName{font-size:20px;gap:3px}.siteName .role{font-size:9.5px;letter-spacing:.06em}.siteName .role .sq{width:7px;height:7px}.siteNav{font-size:11px;gap:12px}}
@media(max-width:780px){.steps{grid-template-columns:1fr;gap:36px}a.erow{grid-template-columns:1fr;gap:18px}.erow.rev .im{order:0}.drow{grid-template-columns:1fr;gap:16px}.drow.rev .im{order:0}.plate .two{grid-template-columns:1fr}}


/* blocs de contenu configurables — placement de la photo, bloc de texte, rendu du markdown */
.drow.stack{grid-template-columns:1fr}
.drow.stack .tx{max-width:62ch}
.drow.stack .tx .rich,.drow.stack .tx p{max-width:none}
.drow.below .im{order:2}
.dtext{max-width:62ch;padding:clamp(28px,5vh,64px) 0}
.dtext .rich{max-width:none}
.dtext h3{font-weight:300;font-size:clamp(1.5rem,2.8vw,2.2rem);letter-spacing:-.02em;line-height:1.12;margin-bottom:14px}
.rich{color:var(--ink-soft);font-size:15px;line-height:1.62;max-width:42ch}
.rich > *:last-child{margin-bottom:0}
.rich p,.rich ul,.rich ol,.rich blockquote{margin-bottom:1em}
.rich ul,.rich ol{padding-left:1.15em}
.rich li{margin-bottom:.35em}
.rich strong{color:var(--ink);font-weight:500}
.rich em{font-style:italic}
.rich a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.rich blockquote{border-left:2px solid var(--blue);padding-left:16px;color:var(--ink)}
.dHeader .desc{max-width:62ch}
.dHeader .desc.rich{color:#3a3a37;font-size:clamp(16px,1.3vw,19px)}
@media(max-width:780px){.drow.below .im{order:2}}