/* BELVEDERE : passe d'octobre, chargée après site.css.
   Bodoni Moda pour les titres (la couverture d'un magazine d'architecture), la lenteur comme mouvement,
   des pièces qui s'ouvrent comme une baie qui coulisse, une dernière image avant le formulaire. */

:root {
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-marque: "League Spartan", "Hanken Grotesk", system-ui, sans-serif;
  --lent: cubic-bezier(.22, 1, .36, 1);
}
html { scrollbar-color: #6b5a44 #0e0e0e; scrollbar-width: thin; }
body { caret-color: var(--tungsten); }
:focus-visible { outline: 2px solid var(--tungsten-hi); outline-offset: 3px; }

/* le logo « halvane » ne change pas */
.nav__mark, .footer__mark, .agency strong, .voile__marque { font-family: var(--font-marque); font-weight: 600; }

/* ---------- titres ---------- */
.hero__title { font-weight: 400; font-size: clamp(2.9rem, 6.6vw, 6rem); line-height: .98; letter-spacing: -.015em; }
.hero__title em { font-style: italic; color: var(--tungsten-hi); }
.section-title { font-weight: 400; text-transform: none; font-size: clamp(2.2rem, 4vw, 3.8rem); line-height: 1.06; letter-spacing: -.012em; }
.act__caption { font-weight: 400; font-style: italic; letter-spacing: 0; }
.act__caption .act__num { font-style: normal; }
.facts__price { font-weight: 400; font-style: italic; font-size: 1.7rem; }
.pose__s h3 { font-weight: 500; font-size: 1.5rem; }

/* ---------- barre du haut : elle s'efface en descendant, revient en remontant ---------- */
.nav { transition: background .5s var(--ease), box-shadow .5s var(--ease), transform .9s var(--lent); }
.nav.cachee { transform: translateY(-110%); }
.nav.is-solid { background: rgba(14, 14, 14, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: none; }

/* ---------- la baie coulissante : le montant qui découvre la pièce suivante (voir app.js) ---------- */
.act__frame { will-change: clip-path, transform; }
.act__montant {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 16px; margin-left: -8px; opacity: 0; pointer-events: none; will-change: transform;
  background: linear-gradient(90deg, rgba(0, 0, 0, .5), #17130f 28%, #3b3026 50%, #15110d 72%, rgba(0, 0, 0, .35));
  box-shadow: -22px 0 44px rgba(0, 0, 0, .4), 1px 0 0 rgba(231, 177, 112, .4);
}
.act.has-video .act__montant, .act.is-static .act__montant, .no-js .act__montant { display: none; }

/* ---------- la fiche : quatre grands chiffres, puis ce qui se dit en mots ---------- */
.chiffres { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem 1.6rem; margin: 0 0 2rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.chiffres div { display: flex; flex-direction: column-reverse; gap: .4rem; }
.chiffres dt { color: var(--print-dim); font-size: .9rem; }
.chiffres dd { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 3.2rem); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- la pose, un peu plus courte ---------- */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) { .pose { height: 340vh; } }

/* ---------- la fin : une dernière image, le titre posé dessus, puis le formulaire ---------- */
.visite { padding-top: 0; border-top: 0; }
.visite__vue { grid-column: 1 / -1; position: relative; margin: 0 calc(-1 * var(--gutter)); height: min(86vh, 860px); overflow: hidden; }
.visite__vue img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.visite__vue::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 14, 14, .4) 0%, rgba(14, 14, 14, 0) 22%, rgba(14, 14, 14, 0) 50%, var(--ground) 100%); }
.visite__intro, .visite__form { position: relative; z-index: 1; }
.visite__intro { margin-top: clamp(-11rem, -17vh, -6rem); }
@media (max-width: 900px) {
  .visite__vue { height: min(62vh, 520px); }
  .visite__intro { margin-top: -5rem; }
  .chiffres dd { font-size: 2.3rem; }
}