@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap");
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-snap-type:y mandatory}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:floralwhite;color:#111}
button,input,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,a:focus-visible,.gallery:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.header{position:fixed;inset:0 0 auto;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px 30px;background:transparent;pointer-events:none}
.header a{color:inherit;text-decoration:none;pointer-events:auto}
.logo{font-weight:600}.header nav{display:flex;align-items:center;gap:25px;pointer-events:auto}
.menu-button{width:32px;height:22px;padding:0;border:0;background:transparent;display:flex;flex-direction:column;justify-content:space-between;color:inherit}
.menu-button span{display:block;width:100%;height:1px;background:currentColor}
.project{position:relative;width:100%;height:100vh;height:100svh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always}
/* Each slide is 82% of the viewport; the next slide remains visible on the right.
   scroll-padding centers the selected slide while preserving the peek. */
.gallery{--slide-width:82%;--edge:calc((100% - var(--slide-width))/2);position:absolute;inset:0 0 auto;width:100%;height:75%;display:flex;gap:2vw;padding-inline:var(--edge);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);scroll-behavior:smooth;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.slide{flex:0 0 var(--slide-width);height:100%;margin:0;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;padding:80px 4vw 20px}
.slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.caption{position:absolute;inset:auto 0 0;min-height:25%;padding:25px 70px 30px 30px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,2fr) auto;gap:40px;align-items:end;background:floralwhite}
.caption-title{display:flex;gap:20px;align-items:baseline}.caption h2{margin:0;font-size:clamp(20px,2vw,32px);font-weight:500}.caption p{margin:0;max-width:650px;font-size:14px;line-height:1.45}.number,.counter{font-size:12px}.counter{white-space:nowrap}
/* Every icon is built with CSS strokes 1px wide. */
.arrow{display:inline-block;position:relative;width:22px;height:22px;color:inherit}
.arrow:before{content:"";position:absolute;left:3px;right:3px;top:10px;border-top:1px solid currentColor}
.arrow:after{content:"";position:absolute;right:3px;top:6px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.arrow-left{transform:rotate(180deg)}.arrow-up{transform:rotate(-90deg)}.arrow-down{transform:rotate(90deg)}
.gallery-arrow,.nav-arrow{z-index:20;border:0;background:transparent;color:inherit;padding:14px;line-height:0}
.gallery-arrow{position:absolute;top:37.5%;transform:translateY(-50%)}.gallery-prev{left:16px}.gallery-next{right:16px}
.nav-arrow{position:fixed;right:22px;z-index:200}.nav-down{top:calc(50% + 25px)}
.is-hidden{visibility:hidden;pointer-events:none}
.overlay-menu[hidden]{display:none}
.overlay-menu{position:fixed;inset:0;z-index:1000;background:rgba(245,245,236,0.9);color:darkolivegreen;overflow-y:auto;overscroll-behavior:contain}
body.menu-open{overflow:hidden}
.overlay-close{position:fixed;top:20px;right:30px;z-index:1010;width:32px;height:32px;border:0;padding:0;background:transparent;color:#fff}
.overlay-close span{position:absolute;top:50%;left:2px;width:28px;height:1px;background:currentColor;transform-origin:center}
.overlay-close span:first-child{transform:rotate(45deg)}.overlay-close span:last-child{transform:rotate(-45deg)}
.overlay-content{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(220px,25%) minmax(0,1fr);gap:clamp(45px,8vw,150px);padding:clamp(100px,14vh,160px) clamp(30px,6vw,100px) 60px}
.overlay-about{max-width:400px}.overlay-about h2,.overlay-contact h2{margin:0 0 40px;font-size:13px;font-weight:400;text-transform:uppercase;letter-spacing:.08em}.overlay-about p{margin:0 0 1.4em;font-size:clamp(15px,1.25vw,19px);line-height:1.5}
.overlay-contact{width:100%;max-width:850px}.form-row{display:grid;grid-template-columns:120px minmax(0,1fr);border-top:1px solid rgba(255,255,255,.45);padding:18px 0}.form-message{border-bottom:1px solid rgba(255,255,255,.45)}.form-row label{font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding-top:5px}.form-row input,.form-row textarea{width:100%;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font-size:clamp(16px,1.5vw,22px)}.form-row textarea{resize:vertical;min-height:150px}.form-row input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s ease-in-out}
.form-submit{display:flex;align-items:center;gap:8px;margin:25px 0 0 auto;padding:10px 0;border:0;background:transparent;color:#fff;font-size:15px}.form-submit:hover{opacity:.65}.form-submit .arrow{width:20px}.form-status{min-height:20px;margin-top:20px;font-size:13px}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1024px){.header{padding:20px}.gallery{--slide-width:80%;gap:3vw}.slide{padding:70px 4vw 20px}.caption{padding:20px 60px 20px 20px;grid-template-columns:1fr 1.5fr auto;gap:25px}.overlay-content{grid-template-columns:30% minmax(0,1fr);gap:45px;padding:110px 40px 50px}}
@media(max-width:700px){.header{padding:15px;font-size:12px}.header nav{gap:12px}.menu-button{width:26px;height:18px}.gallery{--slide-width:84%;gap:3vw;height:70%}.slide{padding:65px 15px 10px}.caption{min-height:30%;padding:15px 50px 15px 15px;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:8px 14px;align-content:end}.caption-title{gap:10px}.caption h2{font-size:19px}.caption p{grid-column:1/-1;font-size:12px}.counter{grid-column:2;grid-row:1;align-self:center}.gallery-arrow{top:35%;padding:8px}.gallery-prev{left:0}.gallery-next{right:0}.nav-arrow{right:5px;padding:9px}.overlay-close{top:12px;right:15px}.overlay-content{display:block;padding:90px 20px 50px}.overlay-about{max-width:none;margin-bottom:55px}.overlay-about h2,.overlay-contact h2{margin-bottom:25px}.overlay-about p{font-size:15px}.form-row{display:block;padding:12px 0 18px}.form-row label{display:block;margin-bottom:12px;padding:0}.form-row input,.form-row textarea{font-size:17px}}
@media(max-height:480px){.caption{overflow-y:auto}.slide{padding-top:45px}}
@media(prefers-reduced-motion:reduce){html,.gallery{scroll-behavior:auto}}

/* Introduction : le corps du titre et des trois lignes est identique. */
body{background:#fff;color:#526a32}
.header{padding:0;inset:auto;position:static}
.header nav{position:fixed;right:27px;top:20px;z-index:100;gap:0}
.logo{position:fixed;z-index:110;top:0;left:0;font-size:clamp(18px,1.3vw,24px);font-weight:700;line-height:1.2;white-space:nowrap;transform:translate(var(--brand-x,40vw),var(--brand-y,32vh));will-change:transform}
.intro{height:100vh;height:100svh;position:relative;scroll-snap-align:start;scroll-snap-stop:always;background:#fff}
.intro-copy{position:absolute;left:40%;top:32%;width:min(54%,800px);font-size:clamp(18px,1.3vw,24px);font-weight:700;line-height:1.2}
.intro-title-space{height:1.2em;margin-bottom:1.3em}
.intro-copy p{margin:0 0 1.3em}
.intro-copy p:last-child{margin-bottom:0}
.project{background:#fff}.caption{background:#fff}
.nav-arrow{color:#526a32}.gallery-arrow{color:#526a32}
.overlay-menu{color:#526a32}
@media(max-width:1024px){.header nav{right:20px;top:20px}.intro-copy{left:33%;width:64%}}
@media(max-width:700px){.header nav{right:15px;top:15px}.intro-copy{left:9%;top:38%;width:82%;font-size:clamp(17px,4.5vw,21px)}.intro-title-space{margin-bottom:1.3em}.intro-copy p{margin-bottom:1.3em}.logo{font-size:clamp(17px,4.5vw,21px)}.nav-arrow{right:5px}}

/* Fondu croisé entre le titre central et son emplacement fixe. */
.logo{transform:none;left:27px;top:20px;opacity:var(--brand-opacity,0);pointer-events:none;will-change:opacity}
.logo.brand-visible{pointer-events:auto}
.intro-title{margin:0 0 1.3em;font:inherit;opacity:var(--intro-opacity,1);will-change:opacity}
.overlay-menu{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease}
.overlay-menu.open{opacity:1;visibility:visible;pointer-events:auto}
@media(max-width:1024px){.logo{left:20px;top:20px}}
@media(max-width:700px){.logo{left:15px;top:15px}}
@media(prefers-reduced-motion:reduce){.overlay-menu{transition:none}}

.header .logo{pointer-events:none}
.header .logo.brand-visible{pointer-events:auto}
.intro-down{display:block;margin-top:32px;margin-left:-14px;padding:14px;border:0;background:transparent;color:inherit;line-height:0}
.intro-down .arrow{width:22px;height:22px}
.nav-down{opacity:1;transition:opacity .35s ease}
.nav-down.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:700px){.intro-down{margin-top:22px}}

/* Inter : Light 300, Medium 500, Bold 700. */
body{font-family:Inter,Arial,Helvetica,sans-serif;font-weight:300}
.intro-copy,.intro-title,.logo,.overlay-brand{font-weight:700}
.caption h2,.form-submit,.overlay-contact h2{font-weight:500}
.caption p,.overlay-about p,.form-row input,.form-row textarea{font-weight:300}
/* Logo 10 % plus petit, aligné avec le texte de l’overlay. */
.logo{left:27px;right:auto;top:20px;font-size:clamp(16.2px,1.17vw,21.6px)}
.overlay-brand{position:fixed;top:20px;left:27px;z-index:1005;font-size:clamp(16.2px,1.17vw,21.6px);line-height:1.2;white-space:nowrap}
.overlay-content{grid-template-columns:minmax(220px,25%) minmax(0,1fr);gap:clamp(45px,8vw,150px);padding:75px 40px 60px 27px}
.overlay-about{grid-column:1;grid-row:1;max-width:400px;text-align:left}
.overlay-contact{grid-column:2;grid-row:1}
.overlay-close{right:27px;top:17px}
@media(max-width:1024px){
 .logo,.overlay-brand{left:20px;top:20px}
 .overlay-content{grid-template-columns:30% minmax(0,1fr);gap:45px;padding:75px 30px 50px 20px}
}
@media(max-width:700px){
 .logo,.overlay-brand{left:15px;top:15px;font-size:clamp(15.3px,4.05vw,18.9px)}
 .overlay-close{right:12px;top:9px}
 .overlay-content{display:block;padding:65px 20px 50px 15px}
 .overlay-about{margin-bottom:55px;max-width:none}
}

/* Titres et descriptions des projets : même corps à chaque format. */
.caption h2{font-size:14px;line-height:1.45}
@media(max-width:700px){.caption h2{font-size:12px}}

/* Espacement des vues : 100 px sur grand écran, réduit pour garder
   un aperçu de la vue suivante sur tablette et mobile. */
.gallery{--slide-width:75%;gap:100px}
.slide{padding-inline:0}
@media(max-width:1199px){.gallery{--slide-width:80%;gap:clamp(20px,5vw,60px)}}
@media(max-width:700px){.gallery{--slide-width:84%;gap:clamp(12px,3vw,20px)}}

/* Galeries : vues dimensionnées selon chaque image, avec un faible écart. */
.gallery{
  gap:6px;
  padding-left:var(--first-edge,20vw);
  padding-right:var(--last-edge,20vw);
  scroll-padding-inline:0;
}
.slide{flex:0 0 var(--item-width,60vw);scroll-snap-align:center}
.slide img{width:100%;height:100%;object-fit:contain}
/* Les vues défilent derrière ces deux marges blanches. */
.project::before,.project::after{
  content:"";position:absolute;top:0;height:75%;width:clamp(28px,5vw,96px);
  background:#fff;z-index:10;pointer-events:none;
}
.project::before{left:0}.project::after{right:0}

/* Titre et description empilés ; le compteur reste à droite. */
.caption{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  column-gap:24px;row-gap:6px;
  align-content:end;align-items:start;
  padding-bottom:64px;
}
.caption-title{grid-column:1;grid-row:1}
.caption p{grid-column:1;grid-row:2}
.counter{grid-column:2;grid-row:1;align-self:center}

/* Une seule flèche verticale, centrée au bas de la fenêtre. */
.nav-down{
  left:50%;right:auto;top:auto;bottom:17px;
  transform:translateX(-50%);
}
@media(max-width:700px){
  .gallery{gap:6px}
  .slide{flex-basis:var(--item-width,88vw)}
  .project::before,.project::after{height:70%;width:clamp(15px,6vw,28px)}
  .caption{padding:12px 16px 55px;row-gap:5px}
  .nav-down{left:50%;right:auto;top:auto;bottom:12px}
}

/* Première vue au bord de la marge gauche ; les suivantes restent centrées. */
@media(min-width:701px){
  .gallery{gap:100px;scroll-padding-left:clamp(28px,5vw,96px)}
  .slide:first-child{scroll-snap-align:start}
}
@media(max-width:700px){
  .gallery{gap:24px}
  .slide:first-child{scroll-snap-align:center}
}

/* Flèche de l’accueil sous la dernière ligne, alignée avec le texte. */
.intro-copy p:last-of-type{margin-bottom:0}

/* Retour au gris clair sur toutes les surfaces opaques. */
body,.intro,.project,.caption,.project::before,.project::after{background:rgba(245,245,236,0.2)}


/* Le titre commence exactement à la même marge que sa description. */
.caption-title .number{display:none}
.caption-title{display:block}

/* Texte de présentation légèrement réduit sur grand écran. */
.overlay-about p{font-size:clamp(13px,1vw,16px)}

/* Une figure sans image constitue une vue de texte à part entière. */
.slide--text p{
  width:100%;max-width:38ch;max-height:100%;overflow-y:auto;
  margin:0;padding:0 24px;
  font-size:clamp(16px,1.3vw,22px);font-weight:300;line-height:1.5;
  text-align:left;white-space:pre-line;
}
/* Un paragraphe peut aussi accompagner une image dans la même figure. */
.slide--with-text{flex-direction:column}
.slide--with-text img{min-height:0;flex:1 1 auto}
.slide--with-text p{flex:none;width:100%;margin:12px 0 0;font-size:14px;line-height:1.45}
@media(max-width:700px){
  .overlay-about p{font-size:15px}
  .slide--text p{padding:0 8px;font-size:16px}
  .slide--with-text p{font-size:12px}
}