:root{--gutter:clamp(24px,4.15vw,68px);--white:#fff;--black:#090909;--duration:6500ms}*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--white);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}body.menu-open{overflow:hidden}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit}.site-header{position:fixed;inset:0 0 auto;z-index:50;height:90px;padding:0 var(--gutter);display:flex;align-items:center;justify-content:space-between;animation:header-in .9s .15s both}.brand{position:relative;z-index:60;display:block;width:clamp(145px,14vw,188px)}.brand img{display:block;width:100%;filter:brightness(0) invert(1)}.desktop-nav{display:flex;align-items:center;gap:clamp(25px,3.05vw,49px)}.desktop-nav a,.lang{position:relative;border:0;padding:7px 0;background:transparent;cursor:pointer;color:rgba(255,255,255,.9);font-size:12px;font-weight:400;letter-spacing:.18em;text-transform:uppercase}.desktop-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:#fff;transition:right .3s ease}.desktop-nav a:hover::after,.desktop-nav a.active::after{right:0}.hero{position:relative;width:100%;height:100svh;min-height:560px;overflow:hidden;background:#111}.slides,.slide{position:absolute;inset:0}.slide{opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 1.1s}.slide.is-active{opacity:1;visibility:visible;z-index:2}.slide img{width:100%;height:100%;object-fit:cover;object-position:center 52%;transform:scale(1.025)}.slide.is-active img{animation:hero-zoom var(--duration) linear both}.hero-shade{position:absolute;z-index:4;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 38%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.72) 100%)}.hero-content{position:absolute;z-index:8;left:var(--gutter);right:var(--gutter);bottom:max(54px,calc(28px + env(safe-area-inset-bottom)));display:grid;grid-template-columns:1fr auto;align-items:end;gap:22px}.project-title{font-size:clamp(16px,1.5vw,22px);line-height:1.2;font-weight:600;letter-spacing:.15em;text-transform:uppercase;animation:title-in .7s .4s both}.slider-controls{display:flex;align-items:center;gap:8px}.arrow{width:38px;height:40px;border:0;background:none;font-family:Arial,sans-serif;font-size:34px;font-weight:200;line-height:1;cursor:pointer;opacity:.8;transition:.2s}.arrow:hover{opacity:1;transform:scale(1.1)}.dots{display:flex;align-items:center;gap:6px}.dot{width:16px;height:4px;padding:0;border:0;border-radius:3px;background:rgba(255,255,255,.36);cursor:pointer;transition:width .45s ease,background .45s ease}.dot.is-active{width:36px;background:#fff}.timeline{grid-column:1/-1;width:100%;height:1px;background:rgba(255,255,255,.2);overflow:hidden}.timeline span{display:block;width:0;height:100%;background:rgba(255,255,255,.82)}.timeline span.is-running{animation:progress var(--duration) linear forwards}.menu-toggle,.mobile-menu{display:none}@keyframes hero-zoom{from{transform:scale(1.025)}to{transform:scale(1.085)}}@keyframes progress{to{width:100%}}@keyframes title-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}@keyframes header-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@media(max-width:760px){:root{--gutter:24px}.site-header{height:78px}.brand{width:150px}.desktop-nav{display:none}.menu-toggle{position:relative;z-index:60;display:block;width:42px;height:42px;border:0;background:none;cursor:pointer}.menu-toggle span{position:absolute;left:7px;width:28px;height:1px;background:#fff;transition:.45s}.menu-toggle span:nth-child(1){top:13px}.menu-toggle span:nth-child(2){top:20px}.menu-toggle span:nth-child(3){top:27px}.menu-open .menu-toggle span:nth-child(1){top:20px;transform:rotate(45deg)}.menu-open .menu-toggle span:nth-child(2){opacity:0}.menu-open .menu-toggle span:nth-child(3){top:20px;transform:rotate(-45deg)}.mobile-menu{position:fixed;z-index:40;inset:0;display:flex;flex-direction:column;justify-content:center;padding:110px var(--gutter) 40px;background:#111;opacity:0;visibility:hidden;transition:.45s}.menu-open .mobile-menu{opacity:1;visibility:visible}.mobile-menu nav{display:flex;flex-direction:column;gap:18px}.mobile-menu nav a{font-size:clamp(34px,11vw,54px);font-weight:300;letter-spacing:-.03em}.mobile-menu p{position:absolute;bottom:32px;margin:0;color:#999;font-size:11px;line-height:1.6;letter-spacing:.16em;text-transform:uppercase}.hero-content{bottom:max(34px,calc(22px + env(safe-area-inset-bottom)));grid-template-columns:1fr;gap:20px}.project-title{font-size:16px}.slider-controls{display:none}.timeline{grid-column:1}.slide img{object-position:center}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* Navigation centrale et menu plein écran */
:root { --duration: 5000ms; }

.site-header {
  opacity: 1;
  transform: none;
  animation: none;
}

.project-title {
  opacity: 1;
  transform: none;
  animation: none;
}

.site-header .desktop-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-header .menu-toggle {
  position: relative;
  z-index: 60;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 50%;
  cursor: pointer;
}

.site-header .menu-toggle span {
  position: absolute;
  left: 9px;
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: top .4s ease, transform .4s ease, opacity .25s ease;
}

.site-header .menu-toggle span:nth-child(1) { top: 14px; }
.site-header .menu-toggle span:nth-child(2) { top: 21px; }
.site-header .menu-toggle span:nth-child(3) { top: 28px; }
.menu-open .site-header .menu-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .site-header .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .site-header .menu-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 110px var(--gutter) 40px;
  background: #111;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility .45s ease;
}

.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.5vh, 26px);
  text-align: center;
}

.mobile-menu nav a {
  font-size: clamp(38px, 6vw, 82px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.035em;
}

.mobile-menu p {
  position: absolute;
  bottom: 32px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  color: #999;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .16em;
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .site-header .desktop-nav { display: none; }
}

/* Studio statement — second chapter of the homepage. */
body .site-header.home-header.is-solid {
  background: rgba(25, 25, 25, .96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
  backdrop-filter: blur(12px) !important;
}

.home-studio {
  position: relative;
  min-height: 100svh;
  padding: clamp(105px, 9vw, 145px) var(--gutter) clamp(90px, 9vw, 145px);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr);
  gap: clamp(70px, 10vw, 170px);
  background: #f1efe9;
  color: #191919;
  overflow: hidden;
}

.home-studio-intro {
  display: grid;
  grid-template-columns: minmax(125px, .38fr) minmax(0, 1fr);
  column-gap: clamp(35px, 5vw, 80px);
  align-content: start;
}

.home-studio-kicker {
  grid-column: 1 / -1;
  margin-bottom: clamp(30px, 3vw, 48px);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-studio h2 {
  grid-column: 1 / -1;
  max-width: 800px;
  margin: 0 0 clamp(30px, 3.5vw, 52px);
  font-family: "MuseoModerno", "Helvetica Neue", sans-serif !important;
  font-size: clamp(42px, 5.4vw, 88px) !important;
  font-weight: 700 !important;
  line-height: .98;
  letter-spacing: -.055em;
}

.home-studio h2 span {
  display: block;
  white-space: nowrap;
}

.home-studio-copy {
  grid-column: 1 / -1;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.home-studio-copy p {
  margin: 0;
  color: #393939;
  font-size: clamp(15px, 1.05vw, 18px);
  font-weight: 300;
  line-height: 1.85;
}

.home-index {
  align-self: stretch;
  padding-left: clamp(35px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(25, 25, 25, .18);
}

.home-index > p {
  margin: 0 0 clamp(40px, 5vw, 72px);
  color: #777;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.home-index a {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: clamp(24px, 2.4vw, 38px) 0;
  border-top: 1px solid rgba(25, 25, 25, .2);
  overflow: hidden;
}

.home-index a::after {
  content: "";
  position: absolute;
  right: 100%;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #191919;
  transition: right .45s cubic-bezier(.2, .7, .2, 1);
}

.home-index a:hover::after { right: 0; }
.home-index small { color: #888; font-size: 10px; letter-spacing: .12em; }
.home-index span {
  font-family: "MuseoModerno", "Helvetica Neue", sans-serif;
  font-size: clamp(28px, 3vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
  transition: transform .4s ease;
}
.home-index a:hover span { transform: translateX(8px); }
.home-index i { position:relative; display:block; width:18px; height:18px; transition:transform .35s ease; }
.home-index i::before { content:""; position:absolute; top:8px; left:1px; width:16px; height:1px; background:currentColor; transform:rotate(-45deg); transform-origin:center; }
.home-index i::after { content:""; position:absolute; top:1px; right:0; width:7px; height:7px; border-top:1px solid currentColor; border-right:1px solid currentColor; }
.home-index a:hover i { transform:translate(3px,-3px); }
.home-studio-copy strong { font-weight:600; }

@media (max-width: 900px) {
  .home-studio {
    min-height: 100svh;
    grid-template-columns: 1fr;
    gap: 90px;
    padding-top: 100px;
  }
  .home-studio-intro { grid-template-columns: 1fr; }
  .home-studio-kicker { margin-bottom: 34px; }
  .home-studio h2 { margin-bottom: 34px; }
  .home-studio-copy { grid-column: 1; max-width: 680px; }
  .home-index { min-height: 520px; padding-left: 0; border-left: 0; }
  .home-index > p { margin-bottom: 45px; padding-bottom: 0; }
}

@media (max-width: 760px) {
  .home-studio h2 {
    font-size: clamp(20px, 5.3vw, 38px) !important;
    white-space: nowrap;
  }
  .home-studio h2 span { display: inline; }
  .home-studio h2 span + span::before { content: " "; }
}

@media (max-width: 520px) {
  .home-studio { gap: 75px; padding: 92px 24px 32px; }
  .home-studio-kicker { margin-bottom: 28px; }
  .home-studio-kicker span:last-child { display: none; }
  .home-studio h2 { margin-bottom: 28px; }
  .home-studio-copy p { font-size: 15px; line-height: 1.75; }
  .home-index { min-height: 0; }
  .home-index span { font-size: 31px; }
}
