/* RIVE — appartements haussmanniens
   palette: zinc #31383F · limestone #EDE7DC · old gilt #9E8352 · Paris blue-grey #5B6B84 · plaster #F7F3EB */

:root{
  --zinc:#31383F;
  --zinc-deep:#262C31;
  --zinc-night:#1F2429;
  --limestone:#EDE7DC;
  --gilt:#9E8352;
  --blue:#5B6B84;
  --plaster:#F7F3EB;
  --ink-soft:rgba(49,56,63,.62);
  --hair:rgba(49,56,63,.22);
  --hair-light:rgba(237,231,220,.22);
  --font-display:"Italiana",serif;
  --font-body:"Nunito Sans",system-ui,sans-serif;
  --font-annot:"Cousine",monospace;
  --ease-walk:cubic-bezier(.23,.9,.28,1);
  --ease-lift:cubic-bezier(.19,1,.22,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-body);
  font-weight:400;
  background:var(--limestone);
  color:var(--zinc);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--gilt);color:var(--plaster)}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}

img,svg,video{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.wrap.narrow{max-width:860px}

h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.04;letter-spacing:.01em}
h2{font-size:clamp(2.4rem,5.2vw,4.2rem);margin:.9rem 0 1.4rem}

.eyebrow{
  font-family:var(--font-annot);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--blue);
  display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:2.4rem;height:1px;background:var(--gilt);flex:none}
.dark .eyebrow{color:#9FB0C6}

.lede{max-width:46rem;font-size:clamp(1.05rem,1.35vw,1.2rem);color:var(--ink-soft)}
.dark .lede{color:rgba(237,231,220,.72)}

section{padding:clamp(5rem,10vw,9rem) 0}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-lift),transform .9s var(--ease-lift)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.no-js .reveal{opacity:1;transform:none}

/* ---------- grain ---------- */
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem clamp(1.25rem,4vw,3rem);
  color:var(--plaster);
  transition:background .4s ease,color .4s ease,padding .4s ease,box-shadow .4s ease;
}
.site-head.scrolled{
  background:rgba(237,231,220,.92);
  backdrop-filter:blur(10px);
  color:var(--zinc);
  padding-top:.7rem;padding-bottom:.7rem;
  box-shadow:0 1px 0 var(--hair);
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.7rem;letter-spacing:.22em;
  text-decoration:none;
}
.wordmark-dot{color:var(--gilt);margin-left:-.18em}
.site-nav{display:flex;gap:clamp(1rem,2.4vw,2.2rem);align-items:center}
.site-nav a{
  font-family:var(--font-annot);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;opacity:.85;padding:.3rem 0;
  border-bottom:1px solid transparent;
  transition:opacity .25s,border-color .25s;
}
.site-nav a:hover{opacity:1;border-color:var(--gilt)}
.site-nav .nav-cta{
  border:1px solid currentColor;border-radius:2px;
  padding:.45rem .9rem;opacity:1;
}
.site-nav .nav-cta:hover{background:var(--gilt);border-color:var(--gilt);color:var(--plaster)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;padding:0;
  display:flex;align-items:flex-end;
  color:var(--plaster);
}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--zinc-night)}
.hero-video,.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-poster{display:none}
.rm .hero-video,.no-js .hero-video{display:none}
.rm .hero-poster,.no-js .hero-poster{display:block}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(31,36,41,.30) 0%,rgba(31,36,41,.06) 34%,rgba(31,36,41,.28) 66%,rgba(38,44,49,.92) 100%);
}
.hero-inner{
  position:relative;z-index:6;
  padding:0 clamp(1.25rem,4vw,3rem) clamp(3.4rem,7vh,5.5rem);
  max-width:1180px;margin:0 auto;width:100%;
}
.hero-eyebrow{color:rgba(247,243,235,.85)}
.hero-eyebrow::before{background:var(--gilt)}
.hero-title{
  font-size:clamp(3.2rem,9vw,7.6rem);
  margin:1.1rem 0 1.2rem;
  text-shadow:0 2px 30px rgba(31,36,41,.45);
}
.hero-sub{max-width:34rem;color:rgba(247,243,235,.88);font-size:clamp(1rem,1.3vw,1.15rem)}
.hero-cta{
  display:inline-flex;align-items:center;gap:.7rem;
  margin-top:2rem;
  font-family:var(--font-annot);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--plaster);text-decoration:none;
  border:1px solid rgba(247,243,235,.5);border-radius:2px;
  padding:.8rem 1.3rem;
  transition:background .3s,border-color .3s;
}
.hero-cta:hover{background:var(--gilt);border-color:var(--gilt)}
.cta-arrow{transition:transform .3s var(--ease-lift)}
.hero-cta:hover .cta-arrow{transform:translateY(3px)}
.hero-note{
  position:absolute;right:clamp(1.25rem,4vw,3rem);bottom:1.4rem;z-index:6;
  font-family:var(--font-annot);font-size:.66rem;letter-spacing:.14em;
  color:rgba(247,243,235,.62);
}
/* staged hero load */
.hero-eyebrow,.hero-title,.hero-sub,.hero-cta{opacity:0;transform:translateY(24px)}
.hero.hero-in .hero-eyebrow,.hero.hero-in .hero-title,.hero.hero-in .hero-sub,.hero.hero-in .hero-cta{
  opacity:1;transform:none;
  transition:opacity 1.1s var(--ease-lift),transform 1.1s var(--ease-lift);
}
.hero.hero-in .hero-title{transition-delay:.12s}
.hero.hero-in .hero-sub{transition-delay:.26s}
.hero.hero-in .hero-cta{transition-delay:.4s}
.no-js .hero-eyebrow,.no-js .hero-title,.no-js .hero-sub,.no-js .hero-cta,
.rm .hero-eyebrow,.rm .hero-title,.rm .hero-sub,.rm .hero-cta{opacity:1;transform:none;transition:none}

/* ---------- dark sections ---------- */
.dark{background:var(--zinc);color:var(--limestone)}

/* agence */
.agence-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  margin-top:3.4rem;border-top:1px solid var(--hair-light);padding-top:2rem;
}
.agence-stats dt{
  font-family:var(--font-annot);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(237,231,220,.55);
  min-height:2.4em;
}
.agence-stats dd{
  font-family:var(--font-display);font-size:clamp(1.9rem,3vw,2.7rem);
  color:var(--plaster);margin-top:.35rem;
}

/* ---------- étage noble ---------- */
.etage-grid{
  display:grid;grid-template-columns:minmax(300px,440px) 1fr;
  gap:clamp(2rem,5vw,5rem);
  margin-top:3rem;align-items:start;
}
.facade-fig{position:sticky;top:6rem}
.facade-holder svg{width:100%;height:auto}
.annot{
  font-family:var(--font-annot);font-size:.68rem;letter-spacing:.08em;
  color:var(--blue);margin-top:.9rem;
}
.floor-list{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.floor-item{
  display:flex;gap:1.3rem;align-items:baseline;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--hair);
  padding:1.15rem .6rem;cursor:pointer;
  font:inherit;color:inherit;
  transition:background .3s;
}
.floor-item:hover{background:rgba(158,131,82,.07)}
.floor-item.is-active{background:rgba(158,131,82,.11)}
.floor-rank{
  font-family:var(--font-display);font-size:1.5rem;color:var(--gilt);
  width:2.2rem;flex:none;text-align:center;
}
.floor-body{display:block}
.floor-body strong{font-weight:700;font-size:1.02rem;letter-spacing:.01em}
.floor-body em{
  display:inline-block;margin-left:.8rem;font-style:normal;
  font-family:var(--font-annot);font-size:.68rem;letter-spacing:.1em;color:var(--blue);
}
.floor-note{
  display:block;color:var(--ink-soft);font-size:.92rem;line-height:1.55;margin-top:.3rem;
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .45s var(--ease-walk),opacity .45s;
}
.floor-item.is-active .floor-note{max-height:7em;opacity:1}
@media (prefers-reduced-motion:reduce){.floor-note{transition:none}}
.no-js .floor-note{max-height:none;opacity:1}

.facade-holder .fg{cursor:pointer;outline:none}
.facade-holder .fg .floor-bg,.facade-holder .fg .win-glass{transition:fill .35s ease}
.facade-holder .fg.is-active .floor-bg{fill:#F1E7D2}
.facade-holder .fg.is-active .win-glass{fill:rgba(158,131,82,.5)}
@media (prefers-reduced-motion:reduce){.facade-holder .fg .floor-bg,.facade-holder .fg .win-glass{transition:none}}

.balcon-note{
  margin-top:3.6rem;max-width:44rem;
  border:1px solid var(--hair);border-left:3px solid var(--gilt);
  padding:1.5rem 1.8rem;
  background:var(--plaster);
}
.balcon-note h3{font-size:1.5rem;margin-bottom:.5rem}
.balcon-note p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- plaques ---------- */
.plaques{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2.6rem}
.plaque{
  display:inline-flex;flex-direction:column;align-items:center;gap:.15rem;
  background:var(--blue);color:var(--plaster);
  border-radius:5px;
  padding:.85rem 1.7rem .95rem;
  box-shadow:inset 0 0 0 2px var(--blue),inset 0 0 0 3.5px rgba(247,243,235,.85),0 2px 10px rgba(49,56,63,.18);
  text-decoration:none;text-align:center;
  transition:transform .3s var(--ease-lift),box-shadow .3s;
}
a.plaque:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--blue),inset 0 0 0 3.5px rgba(247,243,235,.95),0 8px 20px rgba(49,56,63,.24)}
.plaque-arr{
  font-family:var(--font-annot);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(247,243,235,.75);
  border-bottom:1px solid rgba(247,243,235,.4);
  padding-bottom:.22rem;margin-bottom:.15rem;
}
.plaque-rue{font-family:var(--font-display);font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.plaque sup{font-size:.6em}
.plaque-small{padding:.55rem 1.1rem .65rem}
.plaque-small .plaque-rue{font-size:.95rem}

/* ---------- apartments / enfilade ---------- */
.apt{padding:clamp(4rem,8vw,7rem) 0 0}
.apt-head{margin-bottom:2.6rem}
.apt-plaque{margin-bottom:1.3rem}
.apt-title{font-size:clamp(2.3rem,4.6vw,3.8rem)}
.apt-sub{color:var(--ink-soft);margin-top:.5rem}
.apt-specs{
  font-family:var(--font-annot);font-size:.7rem;letter-spacing:.12em;
  color:var(--blue);margin-top:1rem;max-width:52rem;line-height:2;
}

/* default (no-JS / reduced-motion): native horizontal strip */
.enfilade{position:relative}
.enf-sticky{position:relative;background:var(--zinc-deep);overflow-x:auto;overflow-y:hidden}
.enf-track{
  display:flex;align-items:center;
  gap:0;
  width:max-content;
  padding:3.2rem 6vw;
  min-height:78vh;
}
/* JS + full-motion mode */
.enf-js .enf-sticky{
  position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;align-items:center;
}
.enf-js .enf-track{
  padding:0 12vw;min-height:0;
  will-change:transform;
}

.room{
  position:relative;flex:none;
  height:min(66vh,620px);
  aspect-ratio:1000/700;
  background:var(--plaster);
  box-shadow:0 18px 60px rgba(0,0,0,.35);
  z-index:1;
}
/* morning light crosses the room you are standing in */
.enf-js .room{transform:scale(calc(.984 + .024 * var(--focus,0)))}
.enf-js .room::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,241,205,0) 18%,rgba(255,239,198,.20) 46%,rgba(255,236,196,0) 76%);
  opacity:var(--focus,0);
}
.room svg{width:100%;height:100%}
.room figcaption{
  position:absolute;left:0;top:100%;padding-top:1rem;width:100%;
  color:var(--limestone);
  font-size:.85rem;line-height:1.5;
  display:grid;grid-template-columns:auto auto 1fr;gap:.35rem .9rem;align-items:baseline;
}
.room-n{font-family:var(--font-display);color:var(--gilt);font-size:1.05rem}
.room figcaption strong{font-weight:700;letter-spacing:.04em}
.room figcaption em{
  font-style:normal;font-family:var(--font-annot);font-size:.66rem;letter-spacing:.12em;
  color:#93A3BB;
}
.room-note{grid-column:1/-1;color:rgba(237,231,220,.55);font-size:.8rem;max-width:34rem}

.room--photo{
  aspect-ratio:auto;
  width:auto;
  padding:1.1rem;
  background:var(--plaster);
}
.room--photo img{
  height:calc(100% - 0px);width:auto;object-fit:cover;
  border:1px solid rgba(49,56,63,.5);
  outline:6px solid transparent;
  box-shadow:0 0 0 3px var(--plaster),0 0 0 4px var(--gilt);
}

.portal{
  flex:none;position:relative;z-index:2;
  height:min(72vh,680px);
  aspect-ratio:300/700;
  margin:0 max(-120px,-9vw);
  pointer-events:none;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.4));
}
.portal svg{width:100%;height:100%}

.enf-card{
  flex:none;width:min(420px,80vw);
  color:var(--limestone);
  margin:0 4vw;
}
.enf-card--start{margin-left:0}
.enf-card-eyebrow{
  font-family:var(--font-annot);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gilt);margin-bottom:1rem;
}
.enf-card-title{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,3rem);line-height:1.06;color:var(--plaster)}
.enf-card-price{font-family:var(--font-display);font-size:clamp(2.6rem,4.4vw,3.8rem);color:var(--plaster);white-space:nowrap}
.enf-card-sub{margin-top:1.1rem;color:rgba(237,231,220,.62);font-size:.92rem;max-width:30rem}

.btn{
  display:inline-block;margin-top:1.6rem;
  font-family:var(--font-annot);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  border:1px solid var(--zinc);border-radius:2px;
  background:none;color:var(--zinc);
  padding:.85rem 1.4rem;
  transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--zinc);color:var(--limestone)}
.btn--light{border-color:rgba(237,231,220,.55);color:var(--limestone)}
.btn--light:hover{background:var(--gilt);border-color:var(--gilt);color:var(--plaster)}

.enf-hud{
  position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);
  display:none;align-items:center;gap:1.1rem;
  color:rgba(237,231,220,.75);
  font-family:var(--font-annot);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;z-index:6;
}
.enf-js .enf-hud{display:flex}
.enf-hud-apt{color:rgba(237,231,220,.45)}
.enf-hud-bar{width:130px;height:1px;background:rgba(237,231,220,.25);position:relative;display:block}
.enf-hud-fill{position:absolute;left:0;top:-0.5px;height:2px;width:0;background:var(--gilt)}

/* ---------- parquets ---------- */
.parquets{background:var(--plaster)}
.swatch-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem);margin-top:3rem}
.swatch{cursor:pointer}
.swatch-holder{border:1px solid var(--hair);background:var(--limestone)}
.swatch-holder svg{width:100%;height:auto}
.swatch figcaption{margin-top:1rem}
.swatch figcaption strong{font-family:var(--font-display);font-weight:400;font-size:1.45rem;letter-spacing:.02em;display:block}
.swatch figcaption span{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:.4rem;line-height:1.55}
.swatch .stave{
  fill:none;stroke:var(--zinc);stroke-opacity:.28;
  transition:fill .4s ease calc(var(--i)*16ms),stroke-opacity .4s ease calc(var(--i)*16ms);
}
.swatch:hover .stave,.swatch:focus-visible .stave,.swatch.is-laid .stave{
  fill:rgba(158,131,82,.2);stroke:var(--gilt);stroke-opacity:.85;
}
@media (prefers-reduced-motion:reduce){.swatch .stave{transition:none}}
.no-js .swatch .stave{fill:rgba(158,131,82,.16);stroke-opacity:.6}

/* ---------- moulures ---------- */
.profil-row{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.6vw,2.2rem);margin-top:3rem}
.profil-holder{background:var(--plaster);border:1px solid var(--hair)}
.profil-holder svg{width:100%;height:auto}
.profil figcaption{margin-top:.9rem}
.profil figcaption strong{font-family:var(--font-display);font-weight:400;font-size:1.25rem;display:block}
.profil figcaption span{font-family:var(--font-annot);font-size:.66rem;letter-spacing:.1em;color:var(--blue);display:block;margin-top:.3rem}

/* ---------- visites ---------- */
.visites{background:var(--zinc-night)}
.visit-grid{display:grid;grid-template-columns:1fr .8fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.visit-form{margin-top:2.8rem;max-width:34rem}
.visit-aside{
  margin-top:2.8rem;
  border:1px solid rgba(237,231,220,.16);border-left:3px solid var(--gilt);
  padding:1.6rem 1.8rem;
  color:rgba(237,231,220,.72);font-size:.95rem;
}
.visit-aside h3{font-size:1.6rem;color:var(--plaster);margin-bottom:.6rem}
.visit-aside ul{margin:1rem 0 0 1.1rem;display:grid;gap:.55rem}
.visit-aside li::marker{color:var(--gilt)}
.visit-note{margin-top:1.4rem;font-style:italic;color:var(--gilt)}
@media (max-width:900px){.visit-grid{grid-template-columns:1fr}.visit-aside{margin-top:.6rem}}
.form-row{margin-bottom:1.4rem}
.form-row label{
  display:block;font-family:var(--font-annot);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(237,231,220,.6);margin-bottom:.5rem;
}
.form-row input,.form-row select,.form-row textarea{
  width:100%;
  background:rgba(237,231,220,.05);
  border:1px solid rgba(237,231,220,.25);
  border-radius:2px;
  color:var(--plaster);
  font:inherit;font-size:1rem;
  padding:.75rem .9rem;
  transition:border-color .3s;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:var(--gilt);outline:none}
.form-row ::placeholder{color:rgba(237,231,220,.35)}
.form-row select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239E8352' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center}
.form-row select option{color:var(--zinc)}
.form-done{margin-top:1.4rem;color:var(--gilt);font-style:italic}

/* ---------- footer ---------- */
.site-foot{background:var(--zinc-night);color:rgba(237,231,220,.6);padding:3.5rem 0 2rem;border-top:1px solid rgba(158,131,82,.35)}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}
.foot-mark{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.22em;color:var(--limestone)}
.foot-line{font-size:.85rem;line-height:1.8}
.foot-line a{color:rgba(237,231,220,.8)}
.credit{
  max-width:1180px;margin:2.6rem auto 0;padding:1.4rem clamp(1.25rem,4vw,3rem) 0;
  border-top:1px solid rgba(237,231,220,.12);
  font-size:.75rem;color:rgba(237,231,220,.4);
}
.credit a{color:rgba(237,231,220,.6)}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .etage-grid{grid-template-columns:minmax(260px,360px) 1fr;gap:2rem}
  .swatch-row{grid-template-columns:repeat(3,1fr)}
  .profil-row{grid-template-columns:repeat(2,1fr)}
}
.apts-intro{padding-bottom:clamp(1.5rem,3vw,3rem)}

@media (max-width:760px){
  .site-nav .nav-min{display:none}
  .site-nav{gap:1.1rem}
  .site-nav a:first-child{display:none}
  .wordmark{font-size:1.45rem}
  .agence-stats{grid-template-columns:1fr 1fr;gap:1.6rem 1rem}
  .etage-grid{grid-template-columns:1fr}
  .facade-fig{position:static;max-width:380px}
  .swatch-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .room{height:min(56vh,480px)}
  .portal{height:min(61vh,530px);margin:0 -14vw}
  .enf-js .enf-track{padding:0 8vw}
  .enf-card{width:78vw}
  .enf-hud-apt{display:none}
  .hero-note{display:none}
  .hero-title{font-size:clamp(3rem,13vw,4.4rem)}
  .room figcaption{font-size:.78rem}
  .room-note{display:none}
}