:root{--bg:#ebe3d2;--ink:#26221c;--mute:#675f50;--line:#cdc2ab;--serif:"EB Garamond",Garamond,Georgia,serif;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.5rem}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;margin:0}
nav{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;font-size:.95rem}
nav a{text-decoration:none;color:var(--mute);margin-left:1.5rem}
nav a:hover{color:var(--ink)}
nav .tel{color:var(--ink)}
.hero{padding:2rem 0 5rem;display:grid;gap:3rem;grid-template-columns:1.1fr 1fr;align-items:center}
.hero img{width:100%;height:auto;display:block}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);letter-spacing:-.01em}
.hero p{color:var(--mute);max-width:34rem;margin:1.5rem 0 2rem;font-size:1.15rem}
.btn{display:inline-block;border:1px solid var(--ink);padding:.85rem 1.6rem;text-decoration:none;font-weight:500;transition:background .2s,color .2s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn.ghost{border-color:var(--line);color:var(--mute);margin-left:.75rem}
section{padding:5rem 0;border-top:1px solid var(--line)}
section>.wrap>h2{font-size:clamp(2rem,4vw,2.9rem);margin-bottom:3rem;max-width:36rem}
.phase{display:grid;grid-template-columns:14rem 1fr;gap:2rem;padding:2.25rem 0;border-top:1px solid var(--line)}
.phase:first-of-type{border-top:0;padding-top:0}
.phase h3{font-size:1.9rem}
.phase h3 small{display:block;font:400 .9rem var(--sans);color:var(--mute);margin-top:.5rem}
.phase ul{list-style:none;margin:0;padding:0}
.phase li{padding:1rem 0;border-bottom:1px solid var(--line)}
.phase li:first-child{padding-top:0}
.phase li:last-child{border-bottom:0}
.phase b{font-family:var(--serif);font-weight:500;font-size:1.3rem;display:block;margin-bottom:.15rem}
.phase li span{color:var(--mute)}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.gallery figure{margin:0}
.gallery .ph{aspect-ratio:4/3;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--mute);font-size:.95rem;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{margin-top:.8rem}
.gallery figcaption b{font-family:var(--serif);font-weight:500;font-size:1.25rem;display:block}
.gallery figcaption span{color:var(--mute);font-size:.95rem}
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.promise h3{font-size:1.5rem;margin-bottom:.6rem}
.promise p{color:var(--mute);margin:0}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.contact h2{margin-bottom:1.5rem}
.contact p{color:var(--mute);margin:0 0 2rem;max-width:28rem}
.coords{font-style:normal;font-size:1.2rem;line-height:2}
.coords a{text-decoration:none;border-bottom:1px solid var(--line)}
.coords a:hover{border-color:var(--ink)}
.coords span{display:block;color:var(--mute);font-size:1rem}
footer{border-top:1px solid var(--line);padding:2rem 0;color:var(--mute);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
@media(max-width:800px){
 .hero,.contact,.promise,.gallery{grid-template-columns:1fr}
 .hero{gap:2rem}.hero .logo{order:-1}
 .phase{grid-template-columns:1fr;gap:1.25rem}
 nav a.hide{display:none}
 .btn.ghost{margin:.75rem 0 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}
.gallery{grid-auto-rows:clamp(13rem,23vw,17rem);gap:1rem}
.gallery figure{overflow:hidden}
.gallery figure.big{grid-column:span 2}
.proj{margin:0 0 1.5rem}.proj b{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin-right:1rem}.proj span{color:var(--mute)}
@media(max-width:800px){.gallery figure.big{grid-column:auto}}
.legal{max-width:46rem}.legal h2{margin-bottom:2rem}.legal h3{font-size:1.5rem;margin:2.25rem 0 .75rem}.legal p,.legal li{color:var(--mute);margin:0 0 .75rem}.legal ul{margin:0 0 .75rem;padding-left:1.25rem}.legal b{color:var(--ink);font-weight:500}.todo{color:var(--ink);border-bottom:1px dashed var(--mute)}
footer a{text-decoration:none;border-bottom:1px solid var(--line)}footer a:hover{border-color:var(--ink)}
.form{display:grid;gap:1rem;max-width:30rem}
.form label{display:grid;gap:.35rem;font-size:.95rem;color:var(--mute)}
.form input,.form select,.form textarea{font:inherit;color:var(--ink);background:transparent;border:1px solid var(--line);padding:.75rem .9rem;border-radius:0;width:100%}
.form select{background:var(--bg)}
.form textarea{min-height:8rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form button.btn{background:transparent;color:var(--ink);font:inherit;font-weight:500;cursor:pointer;justify-self:start}
.form .note{font-size:.85rem;color:var(--mute);margin:0}
.hp{position:absolute;left:-9999px}
@media(max-width:800px){.form .row{grid-template-columns:1fr}}

/* Bandeau noir (accroche + logo), reste du site en tons crème / travertin */
body{background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.22' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.50  0 0 0 0 0.40  0 0 0 0 0.27  0 0 0 0.20 0'/%3E%3C/filter%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.25  0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23v%29'/%3E%3Crect width='100%25' height='100%25' filter='url%28%23p%29'/%3E%3C/svg%3E") repeat top left;background-size:700px 700px}
.band{--bg:#000;--ink:#f2f0ea;--mute:#a09d95;--line:#3a3935;background:#000;color:var(--ink)}
.band+section{border-top:0}
section{border-top-color:var(--line)}
.btn:hover{background:var(--ink);color:var(--bg)}
.band .btn:hover{background:#f2f0ea;color:#000}

.carousel{position:relative}
.track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:0 max(1.5rem,calc((100vw - 68rem)/2 + 1.5rem)) 1rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.track figure{flex:0 0 auto;margin:0;height:clamp(16rem,32vw,24rem);scroll-snap-align:start}
.track figure img{height:100%;width:auto;display:block}
.track .intro{flex:0 0 clamp(12rem,20vw,16rem);scroll-snap-align:start;display:flex;align-items:flex-end;padding-right:1rem}
.track .intro+figure,.track figure+.intro{margin-left:0}
.track .intro .proj{margin:0}.track .intro .proj b{display:block;margin:0 0 .4rem}
.ctrl{display:flex;gap:.75rem;margin-top:1rem}
.ctrl button{width:3rem;height:3rem;border:1px solid var(--ink);background:none;color:var(--ink);font-size:1.2rem;cursor:pointer;transition:background .2s,color .2s}
.ctrl button:hover{background:var(--ink);color:var(--bg)}
.project{margin-top:3rem}.project:first-of-type{margin-top:0}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem}
.phead .proj{margin:0}.phead .proj b{display:block;margin:0 0 .3rem}
.phead .ctrl{margin-top:0;flex:none}
.mentions{padding:2.5rem 0}
.legal summary{cursor:pointer;font-family:var(--serif);font-size:1.25rem;list-style:none;display:flex;justify-content:space-between;align-items:center}
.legal summary::-webkit-details-marker{display:none}
.legal summary::after{content:"+";font-family:var(--sans);font-size:1.4rem;color:var(--mute)}
.legal details[open] summary::after{content:"–"}
.legal details[open] summary{margin-bottom:.5rem}
.legal h3{font-size:1.15rem!important;margin:1.5rem 0 .4rem!important}
.legal p{font-size:.92rem;line-height:1.55;margin-bottom:.5rem!important}
.phase b a{text-decoration:none;border-bottom:1px solid var(--line)}.phase b a:hover{border-color:var(--ink)}

.pagehead{padding:1.5rem 0 4.5rem}
.pagehead h1{font-size:clamp(2.1rem,4.6vw,3.4rem);max-width:44rem;letter-spacing:-.01em}
.pagehead p{color:var(--mute);max-width:38rem;margin:1.25rem 0 2rem;font-size:1.15rem}
.prose{max-width:46rem}
section>.wrap.prose>h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:2.75rem 0 .9rem;max-width:none}
section>.wrap.prose>h2:first-child{margin-top:0}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin-bottom:.5rem}
.prose a{text-underline-offset:3px}
.fig{margin:2.5rem 0 0}
.fig img{width:100%;height:auto;max-height:26rem;object-fit:cover;display:block}
.fig figcaption{color:var(--mute);font-size:.95rem;margin-top:.6rem}
.cta h2{margin-bottom:1rem}
.cta p{color:var(--mute);max-width:34rem;margin:0 0 1.75rem}
.more ul{list-style:none;padding:0;margin:0;display:grid;gap:.9rem}
.more li a{font-family:var(--serif);font-size:1.3rem;text-decoration:none;border-bottom:1px solid var(--line)}
.more li a:hover{border-color:var(--ink)}
.more li span{display:block;color:var(--mute);font-size:.95rem;margin-top:.15rem}
.faq details{border-top:1px solid var(--line);padding:1.1rem 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-family:var(--serif);font-size:1.3rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);color:var(--mute)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.8rem 0 0;color:var(--mute);max-width:42rem}