/* =================================================================
   FLORIAN GRAVAUD — Portfolio one-page
   Charte : crème #F8F4EB · vert profond #1C5345 · or discret #D49D1E
   Rythme lent, beaucoup d'air, transitions ease-out >= 1s
   ================================================================= */

/* ---------- Variables & reset ---------- */
:root {
  --cream:      #F8F4EB;
  --cream-soft: #F1EADC;
  --green:      #1C5345;
  --green-deep: #133A30;
  --gold:       #D49D1E;
  --ink:        #16332B;   /* texte vert très foncé */

  --font-title: "Fraunces", Georgia, serif;
  --font-body:  "Inter", system-ui, sans-serif;
  --font-mono:  "Space Mono", ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out doux */
  --t:    1s;                              /* durée de base (lente) */

  --maxw: 1180px;
  --pad:  clamp(1.5rem, 5vw, 4rem);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3 { margin: 0; font-weight: 400; }

img, canvas { display: block; }

/* ---------- Intro (animation d'ouverture iris) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);            /* vert profond #1C5345 */

  /* Variables pilotées par le script : origine et rayon de l'iris.
     --r est animé de 0 à 150vmax pour révéler la frame 1 dessous. */
  --ox: 50%;
  --oy: 50%;
  --r: 0vmax;
  -webkit-mask: radial-gradient(circle at var(--ox) var(--oy), transparent var(--r), #000 calc(var(--r) + 1px));
  mask: radial-gradient(circle at var(--ox) var(--oy), transparent var(--r), #000 calc(var(--r) + 1px));
}
/* Iris terminé : on retire totalement l'overlay. */
.intro.is-done { display: none; }

.intro__center {
  position: relative;
  width: clamp(120px, 40vmin, 168px);
  height: clamp(120px, 40vmin, 168px);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

/* (Anneau de progression retiré : le logo-mark Lottie sert d'indicateur) */

/* Cercle fin or (~140px) avec le nom au centre */
.intro__disc {
  width: clamp(104px, 33vmin, 140px);
  height: clamp(104px, 33vmin, 140px);
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* Logo-mark F.G (Lottie) : se dessine selon la progression réelle */
.intro__mark {
  width: clamp(64px, 22vmin, 92px);
  aspect-ratio: 160 / 96;
  height: auto;
}
.intro__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- Hero scrollable ---------- */
.hero {
  position: relative;
  height: 300vh;          /* pin sur 300vh (mode scrub) */
  background: var(--green-deep);
}
/* Mode figé (par défaut tant que la vraie vidéo n'est pas là) : un écran,
   aucun scroll dans le vide. Repasser HERO_CONFIG.scrub à true pour le pin. */
.hero.hero--static { height: 100vh; }
/* Le pin est géré par ScrollTrigger (pas de position:sticky ici, pour
   éviter le conflit des deux mécanismes). */
.hero__sticky {
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.hero__canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}
/* Vrai plan drone : même cadrage que le canvas (cover), recouvre en fin de
   scrub. Bascule instantanée (même image de départ) = raccord invisible. */
.hero__video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
  opacity: 0;
  pointer-events: none;
}
.hero__video.is-active { opacity: 1; }
/* ---------- Overlay couverture (titre + label sur le visuel) ---------- */
.hero__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* GROS TITRE bas-gauche, Fraunces très grand, deux lignes, vert foncé de
   marque (le bas du visuel est clair). Halo crème très léger en appui de
   lisibilité, jamais de voile sombre. Déborde sur le visuel. */
.hero__title {
  position: absolute;
  left: var(--pad);
  bottom: clamp(2.5rem, 7vh, 5rem);
  margin: 0;
  max-width: calc(100% - var(--pad) * 2);
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.2rem, 12vw, 11rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--green-deep);
  text-shadow: 0 0 1px rgba(248, 244, 235, 0.55),
               0 2px 22px rgba(248, 244, 235, 0.42);
  will-change: opacity, transform;
}
.hero__title-line {
  display: block;
  overflow: hidden;          /* masque pour le reveal en lignes */
  padding-bottom: 0.08em;    /* marge de clip : ne rogne pas les jambages */
}
.hero__title-line > span {
  display: block;
  will-change: transform;
}

/* LABEL META bas-droite, mono petites capitales, vert foncé */
.hero__meta {
  position: absolute;
  right: var(--pad);
  bottom: clamp(2.9rem, 7vh, 5.4rem);
  margin: 0;
  max-width: 42vw;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.62rem, 0.9vw, 0.78rem);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--green-deep);
  /* Appui de lisibilité : halo crème (le coin bas-droite peut tomber sur
     des nuages gris moyen, jamais de voile sombre). */
  text-shadow: 0 0 1px rgba(248, 244, 235, 0.7),
               0 1px 12px rgba(248, 244, 235, 0.55);
  will-change: opacity, transform;
}
.hero__meta > span {
  display: inline-block;
  will-change: opacity, transform;
}

/* Reveal au chargement (CSS) : les lignes du titre montent depuis leur
   masque en stagger, le label apparaît en fondu léger. État masqué tant
   que .is-revealed n'est pas posé (par JS, après l'intro). Anti-FOUC via
   .has-js. Neutralisé en mouvement réduit (voir media query plus bas). */
html.has-js .hero__title-line > span { transform: translateY(115%); }
html.has-js .hero__meta > span { opacity: 0; transform: translateY(12px); }
.hero__title-line > span {
  transition: transform 1.15s var(--ease);
}
.hero__meta > span {
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.hero__title-line:nth-child(2) > span { transition-delay: 0.12s; }
.hero__overlay.is-revealed .hero__title-line > span { transform: translateY(0); }
.hero__overlay.is-revealed .hero__meta > span {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* Scroll cue : "SCROLL" en or + flèche fine qui pulse doucement */
.scroll-cue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  color: var(--gold);
  /* Fade géré en JS : disparait au premier scroll et ne revient pas */
  transition: opacity 0.9s var(--ease);
}
.scroll-cue.is-gone { opacity: 0; }
.scroll-cue__word {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.scroll-cue__arrow {
  /* La flèche pulse doucement en boucle (descente lente, ease-out) */
  animation: cuePulse 2.4s var(--ease) infinite;
}
@keyframes cuePulse {
  0%, 100% { transform: translateY(0);    opacity: 0.55; }
  50%      { transform: translateY(8px);  opacity: 1; }
}

/* ---------- Nav flottante ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  /* Fond crème translucide + flou */
  background: rgba(248, 244, 235, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(28, 83, 69, 0.12);
  /* Cachée par défaut ; révélée après le héros (classe .is-visible en JS) */
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease),
              background-color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.nav.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0.9rem var(--pad);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav__logo {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--green);
  transition: color var(--t) var(--ease);
}
.nav__logo span { color: var(--gold); }
.nav__links {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}
.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  position: relative;
  padding-bottom: 3px;
  transition: color var(--t) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav__links a:hover { color: var(--gold); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
  padding: 0.7rem 1.4rem;
  font-size: 0.7rem;
}

/* Nav posée sur le hero : le haut du visuel est noir (l'espace), donc fond
   transparent + texte crème. Repasse en version foncée (fond crème, texte
   vert) dès la 1re section crème. Le CTA or reste lisible sur sombre. */
.nav--hero {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--hero .nav__logo { color: var(--cream); }
.nav--hero .nav__links a { color: var(--cream); }
.nav--hero .nav__links a:hover { color: var(--gold); }
.nav--hero .nav__burger span { background: var(--cream); }

/* Hamburger : caché en desktop */
.nav__burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--green);
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}

/* ---------- Menu plein écran (mobile) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: var(--green-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
              visibility 0.7s var(--ease);
}
.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  text-align: center;
}
.menu__links a {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2rem, 9vw, 3.2rem);
  letter-spacing: 0.02em;
  color: var(--cream);
  transition: color var(--t) var(--ease);
}
.menu__links a:hover { color: var(--gold); }

/* Croix de fermeture */
.menu__close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu__close::before,
.menu__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 1.5px;
  background: var(--gold);
}
.menu__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Layout sections ---------- */
.section {
  position: relative;
  padding: clamp(5rem, 14vh, 11rem) 0;
}
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  /* Au-dessus des dégradés de jonction (::before en position absolue),
     sinon ils recouvrent le contenu (eyebrow lavé en haut de section). */
  position: relative;
  z-index: 1;
}
.container--narrow { max-width: 720px; text-align: center; }
.container--readable { max-width: 820px; }

/* Continuité de fond : chaque section reprend la couleur précédente.
   On gère les transitions par paires (crème -> vert -> or) avec un
   léger fondu via un dégradé en haut de chaque bloc fort. */
.section--cream { background: var(--cream); color: var(--ink); }
.section--green { background: var(--green); color: var(--cream); }
.section--gold  { background: var(--gold);  color: var(--green-deep); }

/* Section pinnée (stats) : contexte d'empilement au-dessus des .container
   voisins (z-index:1) pour qu'aucun contenu adjacent ne peigne par-dessus
   pendant le pin (fixed sinon en z-index auto, donc sous les containers). */
#stats { z-index: 2; }

/* Fondu de jonction crème -> vert (pas de coupure franche) */
.section--green::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--cream), var(--green));
  pointer-events: none;
}
/* Quand une section verte suit une autre verte, pas de fondu crème */
.section--green + .section--green::before { display: none; }

/* Fondu vert -> or */
.section--gold::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--green), var(--gold));
  pointer-events: none;
}

/* La toute première section (signature) prolonge le bas sombre du héros */
.signature::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(to bottom, rgba(19,58,48,0.0), var(--cream));
  pointer-events: none;
}

/* Fondu vert -> crème : sections crème qui suivent une section verte
   (Méthode après les Chiffres clés, Avis après les Certifications,
   Bien d'exception après les Certifications) */
.method::before,
.reviews::before,
.bien::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, var(--green), var(--cream));
  pointer-events: none;
}

/* ---------- Typo blocs ---------- */
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 1.6rem;
}
.label--gold { color: var(--gold); }
.label--dark { color: var(--green-deep); }

.display {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.display--sm {
  font-size: clamp(1.9rem, 4vw, 3rem);
  max-width: 20ch;
}
.display.light, .light { color: var(--cream); }

/* Surlignage or des mots-clés */
.hl {
  position: relative;
  color: var(--green);
  white-space: nowrap;
}
.hl::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.08em;
  height: 0.30em;
  background: var(--gold);
  opacity: 0.55;
  z-index: -1;
  border-radius: 2px;
}

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 300;
  max-width: 46ch;
  margin: 1.8rem 0 0;
  color: var(--ink);
}
.lede--light { color: rgba(248, 244, 235, 0.85); }
.lede--dark  { color: var(--green-deep); }

.section-head { margin-bottom: clamp(3rem, 7vh, 5rem); }

/* ---------- Boutons ---------- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
}
.btn-row--center { justify-content: center; }

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1.1rem 2.2rem;
  border-radius: 2px;
  border: 1px solid transparent;
  transition: background var(--t) var(--ease),
              color var(--t) var(--ease),
              border-color var(--t) var(--ease),
              transform 0.5s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--solid {
  background: var(--green);
  color: var(--cream);
}
.btn--solid:hover { background: var(--green-deep); }

.btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--outline:hover { background: var(--green); color: var(--cream); }

.btn--dark {
  background: var(--green-deep);
  color: var(--cream);
}
.btn--dark:hover { background: var(--ink); }

.btn--gold {
  background: var(--gold);
  color: var(--green-deep);
}
.btn--gold:hover { background: #c08e16; }

/* ---------- Liens "en savoir plus" ---------- */
.link-more {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  color: var(--gold);
}
.link-more::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0.4);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.link-more:hover::after { transform: scaleX(1); }

.center-link { text-align: center; margin-top: 3.5rem; }

/* ---------- Grilles ---------- */
.grid { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Cartes (génériques) ---------- */
.card {
  position: relative;
  padding: clamp(1.8rem, 2.6vw, 2.6rem);
  border-radius: 4px;
  transition: transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card__title {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}
.card__kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.5rem 0 1rem;
}
.card__text {
  font-size: 0.98rem;
  margin: 0.6rem 0 0;
  opacity: 0.92;
}

/* Badge or numéroté / label */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 2px;
}

/* Icônes Lottie des certifications (tracé animé, chargé en lazy) */
.cert-ico {
  width: 52px;
  height: 52px;
  margin: 0 0 1.2rem;
}
.cert-ico svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Cartes méthode (sur crème) */
.card--step {
  background: var(--cream-soft);
  border: 1px solid rgba(28, 83, 69, 0.08);
}
.card--step:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px -30px rgba(19, 58, 48, 0.4);
}

/* Ligne de progression de la méthode (tracée au scroll pendant le pin) */
.method__track {
  position: relative;
  height: 2px;
  background: rgba(28, 83, 69, 0.14);
  margin-bottom: clamp(2.4rem, 6vh, 4rem);
  overflow: hidden;
}
.method__track-fill {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}
/* Étape active : badge plein or (piloté en JS pendant le pin) */
.card--step .badge {
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.card--step.is-active .badge {
  background: var(--gold);
  color: var(--green-deep);
  border-color: var(--gold);
}

/* Cartes choix & certifications (sur vert) */
.card--choice,
.card--certif,
.card--squarimo {
  background: var(--green-deep);
  border: 1px solid rgba(212, 157, 30, 0.18);
  color: var(--cream);
}
.card--choice:hover,
.card--certif:hover,
.card--squarimo:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 157, 30, 0.5);
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6);
}
.card--choice .card__title,
.card--certif .card__title,
.card--squarimo .card__title { color: var(--cream); }
.card--choice .card__text,
.card--certif .card__text,
.card--squarimo .card__text { color: rgba(248, 244, 235, 0.82); }

.card--choice { padding-bottom: 2.4rem; }
.card--choice .link-more { margin-top: 1.6rem; }

/* ---------- Galerie certifications (scroll horizontal pinné) ---------- */
.certifs__viewport {
  overflow: hidden;
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.certifs__track {
  display: flex;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  width: max-content;
  padding: 0 var(--pad);
  will-change: transform;
}
.certifs__track .card--certif {
  flex: 0 0 auto;
  width: clamp(300px, 46vw, 560px);
  min-height: clamp(340px, 52vh, 480px);
  display: flex;
  flex-direction: column;
  padding: clamp(2.2rem, 3vw, 3.2rem);
}
.certifs__track .card--certif .card__text { margin-top: auto; padding-top: 1rem; }
/* En colonne flex, badge et icône ne doivent pas s'étirer sur la largeur */
.certifs__track .card--certif .badge,
.certifs__track .card--certif .cert-ico { align-self: flex-start; }

/* Mobile : pas de scroll horizontal, on empile (allégé) */
@media (max-width: 767px) {
  .certifs__viewport { overflow: visible; }
  .certifs__track {
    flex-direction: column;
    width: auto;
    gap: 1.2rem;
  }
  .certifs__track .card--certif { width: auto; min-height: 0; }
}

/* Cartes avis (sur crème) */
.card--review {
  background: var(--cream-soft);
  border: 1px solid rgba(28, 83, 69, 0.08);
  margin: 0;
}
.stars {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.2rem;
}
.card__quote {
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 300;
  font-size: 1.18rem;
  line-height: 1.6;
  margin: 0 0 1.4rem;
  color: var(--ink);
}
.card__author {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}

/* Encart Squarimo (sur vert, plus sombre) */
.callout {
  margin-top: clamp(2.5rem, 5vh, 4rem);
  padding: clamp(2.2rem, 4vw, 3.4rem);
  background: var(--green-deep);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
}
.callout__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.callout__text {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(248, 244, 235, 0.9);
  max-width: 60ch;
}

/* ---------- Bande chiffres clés (count-up) ---------- */
/* En mode pinné (desktop), la section remplit l'écran : écran vert plein,
   chiffres centrés qui roulent (odomètre). Classe posée en JS. */
.stats--tall {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.stats__eyebrow { text-align: center; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }

/* Stat signature (track-record Squarimo) — le grand chiffre */
.stat-hero {
  text-align: center;
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.stat-hero__num {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(4.5rem, 15vw, 12rem);
  line-height: 0.92;
  color: var(--gold);
  margin: 0;
  letter-spacing: -0.02em;
}
.stat-hero__unit { font-size: 0.5em; }
.stat-hero__label {
  max-width: 24ch;
  margin: clamp(1rem, 2.5vh, 1.6rem) auto 0;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  color: rgba(248, 244, 235, 0.88);
}

/* Grille support : chiffres secondaires, plus discrets que la signature */
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  text-align: center;
  border-top: 1px solid rgba(212, 157, 30, 0.22);
  padding-top: clamp(2rem, 5vh, 3.2rem);
}
.stats__grid .stat__num { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.stat__num {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.6rem);
  line-height: 1;
  color: var(--gold);
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.06em;
}
.stat__unit {
  font-size: 0.5em;
  color: var(--gold);
}
.stat__label {
  margin: 1rem 0 0;
  font-size: 0.98rem;
  color: rgba(248, 244, 235, 0.85);
}
.stat__todo {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: rgba(212, 157, 30, 0.65);
  border: 1px solid rgba(212, 157, 30, 0.4);
  border-radius: 2px;
  padding: 0.25rem 0.5rem;
}

/* ---------- Squarimo interactif (3 états) ---------- */
.squarimo__interactive {
  text-align: center;
  margin-top: clamp(1rem, 3vh, 2rem);
}
.squarimo__stage {
  min-height: clamp(11rem, 26vh, 15rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.squarimo__word {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(2.8rem, 11vw, 7rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
  /* Transition douce du mot (pilotée en JS via .is-changing) */
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.squarimo__desc {
  max-width: 52ch;
  margin: 1.6rem auto 0;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: rgba(248, 244, 235, 0.85);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
/* État transitoire : on masque légèrement avant de réinjecter le contenu */
.squarimo__stage.is-changing .squarimo__word,
.squarimo__stage.is-changing .squarimo__desc {
  opacity: 0;
  transform: translateY(14px);
}
.squarimo__tabs {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.squarimo__tab {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 244, 235, 0.7);
  background: transparent;
  border: 1px solid rgba(212, 157, 30, 0.35);
  border-radius: 2px;
  padding: 0.8rem 1.5rem;
  cursor: pointer;
  transition: color var(--t) var(--ease), background var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.squarimo__tab:hover { border-color: var(--gold); color: var(--cream); }
.squarimo__tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
}

/* ---------- FAQ accordéon ---------- */
.faq__list {
  border-top: 1px solid rgba(212, 157, 30, 0.22);
}
.faq__item {
  border-bottom: 1px solid rgba(212, 157, 30, 0.22);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  color: var(--cream);
  transition: color var(--t) var(--ease);
}
.faq__q:hover { color: var(--gold); }

/* Icône "+" qui pivote en "×" à l'ouverture */
.faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transition: transform var(--t) var(--ease);
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--gold);
}
.faq__icon::before { width: 18px; height: 1.5px; transform: translate(-50%, -50%); }
.faq__icon::after  { width: 1.5px; height: 18px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__icon { transform: rotate(135deg); }

/* Contenu replié : hauteur animée (max-height piloté en JS) */
.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.9s var(--ease);
}
.faq__a-inner {
  padding: 0 0 1.8rem;
  max-width: 60ch;
}
.faq__a-inner p {
  margin: 0;
  font-size: 1.02rem;
  color: rgba(248, 244, 235, 0.82);
}

/* ---------- Visite virtuelle 360° (Matterport) — immersif plein cadre ---------- */
/* Scène pleine largeur, haute, encadrée d'un filet or haut/bas */
.tour__stage {
  position: relative;
  width: 100%;
  min-height: clamp(420px, 82vh, 900px);
  margin-top: clamp(2.5rem, 5vh, 4rem);
  overflow: hidden;
  background: var(--green-deep);
  border-top: 1px solid rgba(212, 157, 30, 0.45);
  border-bottom: 1px solid rgba(212, 157, 30, 0.45);
}
.tour__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Façade : invitation cliquable plein cadre (charge l'iframe au clic) */
.tour__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(28, 83, 69, 0.2), var(--green-deep) 75%);
  border: 0;
  cursor: pointer;
  color: var(--cream);
}
.tour__facade.is-hidden { display: none; }
.tour__facade-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  text-align: center;
  padding: 1rem;
}
.tour__play {
  position: relative;
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
  border: 1px solid var(--gold);
  border-radius: 50%;
  transition: background 0.5s var(--ease), transform 0.5s var(--ease);
}
.tour__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--gold);
}
.tour__facade:hover .tour__play,
.tour__facade:focus-visible .tour__play {
  background: rgba(212, 157, 30, 0.14);
  transform: scale(1.06);
}
.tour__facade:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; }
.tour__facade-text {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  color: var(--cream);
}
.tour__facade-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- Bien d'exception (éditorial, parallax borné) ---------- */
.bien__head { max-width: 62ch; }
/* Badge TODO inline (placeholders texte à remplacer) */
.bien__todo {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  border: 1px solid rgba(212, 157, 30, 0.5);
  border-radius: 2px;
  padding: 0.12rem 0.4rem;
  transform: translateY(-0.1em);
}
.bien__facts {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.bien__facts li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.02rem;
  color: var(--ink);
}
.bien__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold);
  border-radius: 50%;
}

/* Cadre média : overflow hidden ; l'image remplit exactement le cadre par
   défaut (statique / mouvement réduit), zéro recadrage du bien (cadre à
   l'aspect des photos). aspect-ratio = dimensions réservées (anti-CLS). */
.bien__media {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream-soft);
}
.bien__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Mode mouvement : image nettement plus grande que le cadre -> matière à
   déplacer pour un parallax franc, mais marge suffisante pour ne JAMAIS
   montrer les bords (classe posée en JS, jamais en mouvement réduit). */
.bien.is-motion .bien__media img {
  top: -12%;
  left: -12%;
  width: 124%;
  height: 124%;
  will-change: transform;
}

/* 1 · Ouverture large : bande pleine largeur (recadrage volontaire, le bien
   est centré dans la photo), parallax de fond */
.bien__opener {
  margin: clamp(3rem, 7vh, 5.5rem) 0;
  padding: 0 var(--pad);
}
.bien__opener .bien__media {
  max-width: var(--maxw);
  margin: 0 auto;
  aspect-ratio: 16 / 10;
}

/* 2-3 · Éditorial : image en colonne (portrait respecté) + texte et air */
.bien__editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin: clamp(3rem, 9vh, 7rem) 0;
}
.bien__editorial--reverse .bien__frame { order: 2; }
.bien__frame .bien__media { aspect-ratio: 4 / 5; }
.bien__subtitle {
  font-family: var(--font-title);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0.6rem 0 1rem;
}
.bien__para { max-width: 44ch; color: var(--ink); }

.bien__cta {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: clamp(1.5rem, 4vh, 3rem);
}

/* Mobile : empilé, plein cadre portrait propre (pas de bande large) */
@media (max-width: 767px) {
  .bien__editorial,
  .bien__editorial--reverse { grid-template-columns: 1fr; }
  .bien__editorial--reverse .bien__frame { order: 0; }
  .bien__opener .bien__media { aspect-ratio: 4 / 5; }
}

/* ---------- Accès privé / Off-market (formulaire lead) ---------- */
.offmarket__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vh, 3.5rem);
}
.field { display: flex; flex-direction: column; gap: 0.55rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.field__opt { color: rgba(248, 244, 235, 0.45); }
.field input,
.field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(212, 157, 30, 0.4);
  border-radius: 0;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding: 0.7rem 0.1rem;
  transition: border-color 0.4s var(--ease);
}
.field textarea { resize: vertical; min-height: 3rem; }
.field input:focus,
.field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field.is-invalid input,
.field.is-invalid textarea {
  border-bottom-color: var(--gold);
  border-bottom-width: 2px;
}
.field__error {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  min-height: 0.95rem;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.field.is-invalid .field__error { opacity: 1; }
.offmarket__actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.offmarket__status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0;
}
.offmarket__note {
  margin: clamp(1.6rem, 3vh, 2.2rem) 0 0;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(212, 157, 30, 0.6);
  border: 1px solid rgba(212, 157, 30, 0.3);
  border-radius: 2px;
  padding: 0.6rem 0.9rem;
  display: inline-block;
}
@media (max-width: 640px) {
  .offmarket__form { grid-template-columns: 1fr; }

  /* Hero couverture mobile : titre bas-gauche plus petit mais présent,
     label réduit et passé SOUS le titre (toujours bas-gauche). Taille
     calée pour que « de la hauteur » tienne sans déborder de l'écran. */
  .hero__title {
    font-size: clamp(2.2rem, 12vw, 3.4rem);
    bottom: clamp(4.2rem, 14vh, 6rem);
    letter-spacing: -0.01em;
  }
  .hero__meta {
    left: var(--pad);
    right: auto;
    bottom: clamp(2rem, 6vh, 3rem);
    max-width: none;
    text-align: left;
    letter-spacing: 0.2em;
    font-size: 0.6rem;
  }
}

/* ---------- Footer ---------- */
.footer {
  background: var(--green-deep);
  color: var(--cream);
  padding: clamp(3.5rem, 8vh, 6rem) 0;
  text-align: center;
}
.footer__mark {
  font-family: var(--font-title);
  font-size: 2.4rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.6rem;
}
.footer__mark span { color: var(--gold); }
.footer__contact {
  font-size: 0.95rem;
  margin: 0 0 1.8rem;
  color: rgba(248, 244, 235, 0.85);
}
.footer__contact a { transition: color var(--t) var(--ease); }
.footer__contact a:hover { color: var(--gold); }
.footer__contact .sep { margin: 0 0.7rem; color: rgba(248,244,235,0.4); }
.footer__credit {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 244, 235, 0.45);
  margin: 0;
}

/* ---------- Reveal au scroll (piloté par GSAP) ----------
   Masqués uniquement si JS est actif (flag .has-js posé avant le 1er
   paint). Sans JS, le contenu reste visible. GSAP révèle puis retire la
   classe pour rendre la main aux transitions CSS (hover). */
html.has-js .reveal {
  opacity: 0;
  transform: translateY(28px);
}

/* ---------- Lignes de titre SplitText (volet masqué) ----------
   Le cache (.sline-mask, overflow:clip) est généré par SplitText
   (mask: lines). On lui donne un padding optique vertical : la zone de
   clip s'étend au-delà du texte, donc les glyphes Fraunces (ascendantes,
   descendantes, accents) ne sont JAMAIS rognés. Pas de marge négative
   (qui ferait remonter l'élément suivant sur le titre). */
.sline { will-change: transform; }
.sline-mask {
  /* Étend la zone de clip au-delà de la boîte sans en changer la taille :
     glyphes jamais rognés ET aucun impact sur le flux (anti-CLS, pas de
     chevauchement de l'élément suivant). overflow:clip est posé par SplitText. */
  overflow-clip-margin: 0.22em;
}

/* ---------- Visuels révélés en volet (clip-path) ---------- */
.reveal--media {
  transform-origin: center;
  will-change: transform, clip-path;
}

/* ---------- Cibles parallax ---------- */
.stats__grid,
.squarimo__stage,
.tour__viewer { will-change: transform; }

/* ---------- Curseur custom ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9500;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.cursor__dot,
.cursor__ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  /* centrés sur le point piloté en JS (translate via GSAP) */
  margin-left: -3px;
  margin-top: -3px;
}
.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
}
.cursor__ring {
  width: 42px;
  height: 42px;
  margin-left: -21px;
  margin-top: -21px;
  border: 1px solid rgba(212, 157, 30, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.4s var(--ease), height 0.4s var(--ease),
    margin 0.4s var(--ease), background 0.4s var(--ease),
    border-color 0.4s var(--ease);
}
/* Survol d'un interactif : l'anneau grossit, le dot s'efface */
.cursor.is-hover .cursor__ring {
  width: 64px;
  height: 64px;
  margin-left: -32px;
  margin-top: -32px;
  background: rgba(212, 157, 30, 0.12);
  border-color: var(--gold);
}
.cursor.is-hover .cursor__dot { opacity: 0; }
.cursor__label {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  white-space: nowrap;
}
.cursor.has-label .cursor__ring {
  width: 76px;
  height: 76px;
  margin-left: -38px;
  margin-top: -38px;
}
.cursor.has-label .cursor__label { opacity: 1; transform: scale(1); }
/* On masque le curseur natif uniquement quand le custom est actif */
body.cursor-on,
body.cursor-on * { cursor: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Bascule de la nav en mode mobile : logo + hamburger uniquement */
@media (max-width: 860px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; gap: 2.6rem; }

  .btn-row { gap: 0.8rem; }
  .btn { width: 100%; text-align: center; }
  .btn-row--center .btn { width: auto; }
  .footer__contact .sep { display: none; }
  .footer__contact a { display: block; margin: 0.4rem 0; }
}

/* Respect des préférences d'accessibilité : on neutralise TOUT
   (états finaux posés, ni volet, ni parallax, ni curseur custom). */
@media (prefers-reduced-motion: reduce) {
  html.has-js .reveal { opacity: 1 !important; transform: none !important; }
  /* Hero couverture : titre et label posés visibles, sans reveal ni fondu */
  html.has-js .hero__title-line > span { transform: none; transition: none; }
  html.has-js .hero__meta > span { opacity: 1; transform: none; transition: none; }
  .scroll-cue__arrow { animation: none; }
  html { scroll-behavior: auto; }
  .cursor { display: none !important; }
}