/* ==========================================================================
   ALPINVEST IMMOBILIER SA — Système visuel
   Conforme à APLINVEST_BrandGuidelines_2026 (v1.0, mai 2026)
   Couleurs primaires : Beige #D1C3AB · Anthracite #585858
   Couleurs de contraste : Noir #000000 · Blanc #FFFFFF
   Typographie : Geist — Bold (titres, approche 50, beige)
                        Light (corps, approche 0/25, anthracite)
   Structure : grille canonique suisse 3 · 6 · 12 colonnes
   ========================================================================== */

/* ------------------------------------------------------------- 0. GEIST */
/* Fonte officielle Geist (variable 100–900), servie localement.
   Licence SIL Open Font 1.1 — voir assets/fonts/Geist-LICENSE.txt */
@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2-variations"),
       url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Couleurs primaires — chartre */
  --beige: #d1c3ab;
  --anthracite: #585858;
  --noir: #000000;
  --blanc: #ffffff;

  /* Dérivées (respectant l'identité : teintes du beige, profondeurs du noir) */
  --beige-90: #d8ccb7;
  --beige-60: rgba(209, 195, 171, 0.6);
  --beige-30: rgba(209, 195, 171, 0.3);
  --beige-12: rgba(209, 195, 171, 0.12);
  --beige-06: rgba(209, 195, 171, 0.06);

  --papier: #f7f4ef; /* blanc cassé tiré du beige */
  --papier-2: #efe9e0;
  --lin: #e4dbcd;

  --encre: #201d18; /* charbon chaud, éclairci pour alléger l'ensemble */
  --encre-2: #2a261f;
  --encre-3: #353026;

  --gris-clair: #8d8d8d;

  /* Typographie */
  --ff: "Geist", "Geist Fallback", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", "Inter", Arial, sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;

  --approche-titre: 0.05em; /* approche 50 */
  --approche-legende: 0.025em; /* approche 25 */

  /* Échelle fluide */
  --fs-display: clamp(2.3rem, 9.6vw, 13rem);
  --fs-h1: clamp(2.6rem, 7.4vw, 8.4rem);
  --fs-h2: clamp(1.9rem, 4.5vw, 4.7rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.6rem);
  --fs-h4: clamp(1.15rem, 1.5vw, 1.45rem);
  --fs-body: clamp(1rem, 1.02vw, 1.125rem);
  --fs-small: 0.8125rem;
  --fs-micro: 0.6875rem;

  /* Grille suisse */
  --marge: clamp(1.25rem, 4.4vw, 5.5rem);
  --gouttiere: clamp(0.9rem, 1.65vw, 2rem);
  --colonnes: 12;

  /* Rythme vertical */
  --section: clamp(6rem, 15vh, 13rem);
  --bloc: clamp(3rem, 7vh, 6rem);

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --dur: 0.9s;

  --entete-h: 84px;
}

@media (max-width: 700px) {
  :root { --entete-h: 64px; }
}

/* Sur petits ecrans, la typographie de titre gagne en presence :
   le verrou passe de deux a trois lignes, plus vertical, plus affirme. */
@media (max-width: 620px) {
  :root { --fs-display: clamp(2.6rem, 13.4vw, 4.2rem); }
}

/* ------------------------------------------------------------ 2. REGLAGES */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--ff);
  font-weight: 300; /* Light */
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--anthracite);
  background: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-synthesis-weight: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--beige); color: var(--encre); }

:focus-visible {
  outline: 2px solid var(--beige);
  outline-offset: 4px;
  border-radius: 2px;
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--beige);
  color: var(--encre);
  padding: 0.9rem 1.4rem;
  font-size: var(--fs-small);
  letter-spacing: var(--approche-legende);
}
.saut-contenu:focus { left: 1rem; top: 1rem; }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------- 3. GRILLE & CONTENEURS */
.enveloppe {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--marge);
}

.grille {
  display: grid;
  grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  column-gap: var(--gouttiere);
}

@media (max-width: 900px) { :root { --colonnes: 6; } }
@media (max-width: 560px)  { :root { --colonnes: 3; } }

/* ------------------------------------------------------- 4. TYPOGRAPHIE */
.titre,
h1, h2, h3 {
  font-weight: 700; /* Bold */
  letter-spacing: var(--approche-titre);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--beige);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 {
  font-size: var(--fs-h3);
  line-height: 1.06;
  letter-spacing: 0.035em;
}

.sous-titre {
  font-weight: 600; /* SemiBold — titres de section */
  font-size: var(--fs-h4);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--beige);
  line-height: 1.2;
}

.mention {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--beige-60);
}

.mention--sombre { color: var(--anthracite); }

.chapo {
  font-weight: 300;
  font-size: clamp(1.15rem, 1.75vw, 1.6rem);
  line-height: 1.5;
  letter-spacing: 0;
  max-width: 46ch;
  text-wrap: pretty;
}

.legende {
  font-size: var(--fs-small);
  font-weight: 400; /* Regular — tenue à petite taille */
  letter-spacing: var(--approche-legende);
  line-height: 1.55;
}

/* Regular pour tous les petits textes : le Light manque de corps sous ~15px,
   en particulier sur les fonds sombres. Les grands paragraphes restent Light. */
.bien__lieu,
.bien__specs,
.bien__prix small,
.service__txt,
.valeur__d,
.membre__role,
.chrono__txt,
.coord__val.legende,
.form__rgpd,
.form__etat,
.pied__l,
.pied__bas p,
.pied__bas a,
.champ input,
.champ textarea,
.champ select,
.champ label { font-weight: 400; }

.num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* Sections claires */
.section--claire { background: var(--papier); color: var(--anthracite); }
.section--claire .titre,
.section--claire h2,
.section--claire h3 { color: var(--encre); }
.section--claire .titre em,
.section--claire h2 em { color: var(--beige); font-style: normal; }

/* Sections sombres */
.section--sombre { background: var(--encre); color: rgba(220, 209, 189, 0.82); }

/* -------------------------------------------------- 5. SPLIT TEXT / REVEAL */
.st-ligne {
  display: block;
  overflow: hidden;
  /* Marge de securite laterale : aucun jambage ni empattement n'est rogne
     par le masque de reveal. */
  padding: 0 0.14em 0.04em 0.02em;
  margin: 0 -0.14em 0 -0.02em;
}
.st-ligne > span {
  display: block;
  will-change: transform;
}
.st-mot { display: inline-block; overflow: hidden; vertical-align: top; }
.st-mot > span { display: inline-block; will-change: transform; }

.js .reveal { opacity: 0; }
.js .reveal-up { opacity: 0; transform: translate3d(0, 26px, 0); }

/* Masque d'image */
.masque {
  position: relative;
  overflow: hidden;
  background: var(--encre-2);
}
.masque img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.js .masque > .masque-voile {
  position: absolute;
  inset: 0;
  background: var(--encre);
  transform-origin: bottom;
  z-index: 2;
  pointer-events: none;
}

/* ------------------------------------------------------------ 6. CURSEUR */
.curseur {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--beige-60);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9000;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.4s;
  will-change: transform;
}
.curseur__pt {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--beige);
}
.curseur__txt {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--encre);
  opacity: 0;
}
.curseur.est-actif { opacity: 1; }
.curseur.est-lien { background: var(--beige); border-color: var(--beige); }
.curseur.est-lien .curseur__pt { opacity: 0; }
.curseur.est-media .curseur__txt { opacity: 1; }

/* Halo lumineux du curseur sur les photographies */
.halo {
  position: fixed;
  top: 0; left: 0;
  width: 460px; height: 460px;
  margin: -230px 0 0 -230px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(209, 195, 171, 0.16) 0%,
    rgba(209, 195, 171, 0.06) 38%,
    rgba(209, 195, 171, 0) 68%
  );
  mix-blend-mode: screen;
  transition: opacity 0.55s var(--ease-out);
  will-change: transform;
}

@media (hover: none), (pointer: coarse) {
  .curseur, .halo { display: none !important; }
}

/* ---------------------------------------------------------- 7. PRELOADER */
.prechargement {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--encre);
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
}
.prechargement__centre {
  grid-row: 1;
  align-self: center;
  display: grid;
  place-items: center;
  gap: 1.6rem;
}
.prechargement__logo {
  width: clamp(54px, 6vw, 78px);
  opacity: 0;
}
.prechargement__logo .lg-d { fill: var(--blanc); }
.prechargement__ligne {
  width: min(280px, 46vw);
  height: 1px;
  background: var(--beige-12);
  position: relative;
  overflow: hidden;
}
.prechargement__ligne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--beige);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.prechargement__pied {
  grid-row: 2;
  width: 100%;
  padding: 0 var(--marge) clamp(1.4rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 1rem;
}
@media (max-width: 620px) {
  .prechargement__pied { grid-template-columns: 1fr auto; }
  .prechargement__mention { display: none; }
}
.prechargement__compteur {
  font-size: clamp(2.4rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--beige);
  line-height: 0.9;
}
.prechargement__mention { text-align: right; }

/* ------------------------------------------------------------ 8. ENTETE */
.entete {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 800;
  height: var(--entete-h);
  display: flex;
  align-items: center;
  transition: background-color 0.55s var(--ease-out),
              backdrop-filter 0.55s var(--ease-out),
              border-color 0.55s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.entete__int {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gouttiere);
}
.entete.est-fond {
  background: rgba(32, 29, 24, 0.72);
  backdrop-filter: blur(22px) saturate(1.2);
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  border-bottom-color: var(--beige-12);
}
.entete.est-cachee { transform: translateY(-101%); }

/* Inversion automatique au-dessus des sections claires */
.entete.est-claire { background: rgba(247, 244, 239, 0.8); border-bottom-color: var(--lin); }
.entete.est-claire .entete__logo .lg-d { fill: var(--anthracite); }
.entete.est-claire .nav__lien { color: var(--anthracite); }
.entete.est-claire .nav__lien:hover,
.entete.est-claire .nav__lien.est-active { color: var(--encre); }
.entete.est-claire .nav__lien::after { background: var(--encre); }
.entete.est-claire .burger { border-color: rgba(88, 88, 88, 0.35); }
.entete.est-claire .burger span { background: var(--encre); }
.entete { transition: transform 0.7s var(--ease-out), background-color 0.55s var(--ease-out), backdrop-filter 0.55s, border-color 0.55s; }

.entete__logo { display: block; width: clamp(128px, 12vw, 178px); }
.entete__logo svg { width: 100%; height: auto; }
/* Logo négatif sur fond sombre : la partie « ALP » / montagne passe en blanc */
.entete__logo .lg-d { fill: var(--blanc); transition: fill 0.5s var(--ease-out); }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.3vw, 2.8rem); }
.nav__lien {
  position: relative;
  font-weight: 500; /* Medium — navigation */
  font-size: var(--fs-small);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--beige-60);
  padding: 0.4rem 0;
  transition: color 0.4s var(--ease-out);
}
.nav__lien::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--beige);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}
.nav__lien:hover, .nav__lien.est-active { color: var(--beige); }
.nav__lien:hover::after, .nav__lien.est-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (max-width: 1080px) { .nav--principale { display: none; } }

.burger {
  display: none;
  width: 46px; height: 46px;
  background: none;
  border: 1px solid var(--beige-30);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%; width: 16px; height: 1px;
  background: var(--beige);
  transform: translateX(-50%);
  transition: transform 0.5s var(--ease-io), opacity 0.3s;
}
.burger span:nth-child(1) { top: 20px; }
.burger span:nth-child(2) { top: 25px; }
.burger.est-ouvert span:nth-child(1) { transform: translateX(-50%) translateY(2.5px) rotate(45deg); }
.burger.est-ouvert span:nth-child(2) { transform: translateX(-50%) translateY(-2.5px) rotate(-45deg); }
@media (max-width: 1080px) { .burger { display: block; } }

/* Menu plein écran */
.menu {
  position: fixed;
  inset: 0;
  z-index: 790;
  background: var(--encre);
  padding: calc(var(--entete-h) + 4vh) var(--marge) var(--marge);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  overflow-y: auto;
}
.menu.est-ouvert { visibility: visible; }
.menu__liste { list-style: none; display: grid; gap: clamp(0.2rem, 1vh, 0.6rem); align-content: center; }
.menu__lien {
  display: block;
  font-size: clamp(2.2rem, 9vw, 5rem);
  font-weight: 700;
  letter-spacing: var(--approche-titre);
  text-transform: uppercase;
  color: var(--beige);
  line-height: 1.06;
  overflow: hidden;
}
.menu__lien span { display: block; transform: translateY(105%); }
.menu__pied {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  justify-content: space-between;
  border-top: 1px solid var(--beige-12);
  padding-top: 1.4rem;
}

/* --------------------------------------------------------- 9. BOUTONS */
.btn {
  --c: var(--beige);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 2.1rem;
  border: 1px solid var(--c);
  border-radius: 999px;
  background: none;
  color: var(--c);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.62s var(--ease-out);
  z-index: -1;
  border-radius: inherit;
}
.btn:hover::before { transform: scaleY(1); }
.btn__txt { position: relative; display: block; transition: color 0.42s var(--ease-out) 0.06s; }
.btn:hover .btn__txt { color: var(--encre); }
.btn__fleche { width: 13px; height: 13px; transition: transform 0.55s var(--ease-out), stroke 0.42s 0.06s; stroke: currentColor; }
.btn:hover .btn__fleche { transform: translateX(4px); stroke: var(--encre); }

.btn--plein { background: var(--beige); color: var(--encre); border-color: var(--beige); }
.btn--plein::before { background: transparent; }
.btn--plein:hover { background: transparent; color: var(--beige); }
.btn--plein:hover .btn__txt { color: var(--beige); }
.btn--plein:hover .btn__fleche { stroke: var(--beige); }

.btn--encre { --c: var(--encre); }
.btn--encre:hover .btn__txt { color: var(--papier); }
.btn--encre:hover .btn__fleche { stroke: var(--papier); }

/* Lien fléché éditorial */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid currentColor;
  transition: gap 0.5s var(--ease-out);
}
.lien-fleche:hover { gap: 1.15rem; }

/* --------------------------------------------------------------- 10. HERO */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background: #0a0d10;
}
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__scene canvas { width: 100% !important; height: 100% !important; }
.hero__repli {
  position: absolute;
  inset: 0;
  background-image: image-set(url("../img/hero-1920.webp") 1x, url("../img/hero-2560.webp") 2x);
  background-size: cover;
  background-position: 62% 62%;
  z-index: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero__scene.est-prete + .hero__repli { opacity: 0; }

/* En portrait, la scene WebGL cede la place au cadrage vertical de la
   photographie : composition preservee, batterie et GPU menages. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero__repli {
    background-image: image-set(url("../img/hero-p-800.webp") 1x, url("../img/hero-p-1200.webp") 2x);
    background-position: 50% 62%;
  }
  .hero__scene.est-prete + .hero__repli { opacity: 1; }
}
.hero__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 72% 88%, rgba(209, 195, 171, 0.16), transparent 58%),
    linear-gradient(to bottom, rgba(20, 22, 24, 0.42) 0%, rgba(20, 22, 24, 0.05) 32%, rgba(20, 22, 24, 0.05) 55%, rgba(24, 22, 18, 0.72) 100%);
}
.hero__grain {
  position: absolute;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  16% { transform: translate(-3%,-4%); }
  33% { transform: translate(2%,-2%); }
  50% { transform: translate(-2%,3%); }
  66% { transform: translate(3%,2%); }
  83% { transform: translate(-1%,-3%); }
}

.hero__contenu {
  position: relative;
  z-index: 3;
  grid-row: 1;
  align-self: end;
  padding-top: calc(var(--entete-h) + 6vh);
  padding-bottom: clamp(1.5rem, 4vh, 3.2rem);
}
.hero__mention {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: clamp(1rem, 3vh, 2.4rem);
}
.hero__mention::before {
  content: "";
  width: clamp(28px, 5vw, 76px);
  height: 1px;
  background: var(--beige-60);
  transform-origin: left;
}

.hero__titre {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--approche-titre);
  line-height: 0.86;
  text-transform: uppercase;
  color: var(--beige);
  margin-left: -0.045em;
}
.hero__titre .l2 { display: block; }

.hero__slogan {
  margin-top: clamp(1rem, 2.4vh, 1.9rem);
  font-size: clamp(1rem, 1.7vw, 1.75rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blanc);
}
.hero__slogan-tiret { color: var(--beige); }

.hero__bas {
  position: relative;
  z-index: 3;
  grid-row: 2;
  padding-bottom: clamp(1.6rem, 5vh, 3.4rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(1.4rem, 4vh, 2.6rem);
  align-items: end;
}
.hero__accroche { grid-column: 1 / span 7; }
.hero__ctas {
  grid-column: 8 / span 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: flex-end;
}
@media (max-width: 1080px) {
  .hero__accroche { grid-column: 1 / -1; }
  .hero__ctas { grid-column: 1 / -1; justify-content: flex-start; }
}
.hero__accroche p {
  color: var(--beige-90);
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  line-height: 1.45;
  max-width: none;
  white-space: nowrap;   /* une seule ligne sur desktop */
}
/* Repli sur plusieurs lignes en tablette/mobile — placé APRÈS la règle
   desktop pour l'emporter dans la cascade. */
@media (max-width: 1080px) {
  .hero__accroche p { white-space: normal; }
}

.hero__defil {
  position: absolute;
  bottom: clamp(1.6rem, 5vh, 3.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
}
@media (max-width: 1080px) { .hero__defil { display: none; } }
.hero__defil-ligne {
  width: 1px; height: 54px;
  background: linear-gradient(to bottom, var(--beige-60), transparent);
  position: relative;
  overflow: hidden;
}
.hero__defil-ligne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--beige);
  animation: defiler 2.6s var(--ease-io) infinite;
}
@keyframes defiler {
  0% { transform: translateY(-100%); }
  55%,100% { transform: translateY(100%); }
}

/* ------------------------------------------------------ 11. BANDE DEFILANTE */
.bande {
  overflow: hidden;
  border-block: 1px solid var(--beige-12);
  padding: clamp(0.8rem, 1.6vh, 1.3rem) 0;
  background: var(--encre);
}
.bande__piste {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}
.bande__el {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 3rem);
  padding-inline: clamp(0.7rem, 1.5vw, 1.5rem);
  font-size: clamp(0.72rem, 0.95vw, 0.9rem);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--beige-60);
  white-space: nowrap;
}
.bande__el svg { width: 13px; height: auto; flex: none; opacity: 0.55; }

/* ------------------------------------------------------------ 12. A PROPOS */
.apropos { padding-block: var(--section); }
.apropos__grille { row-gap: clamp(2.4rem, 6vh, 5rem); align-items: start; }
.apropos__media { grid-column: 1 / span 5; position: relative; }
.apropos__texte { grid-column: 7 / span 5; }
@media (max-width: 900px) {
  .apropos__media { grid-column: 1 / -1; }
  .apropos__texte { grid-column: 1 / -1; }
}
.apropos__media .masque { aspect-ratio: 4/5; }
.apropos__sceau {
  position: absolute;
  right: calc(-1 * clamp(14px, 2.5vw, 46px));
  bottom: clamp(-26px, -3vh, -18px);
  width: clamp(88px, 10vw, 132px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--beige);
  border-radius: 50%;
  padding: clamp(18px, 2vw, 26px);
  z-index: 3;
}
.apropos__sceau svg .lg-b { fill: var(--encre); }
.apropos__sceau svg .lg-d { fill: var(--encre); opacity: 0.45; }

.apropos__intro { margin-block: clamp(1.6rem, 3vh, 2.6rem) clamp(1.6rem, 3vh, 2.6rem); }
.apropos__corps { max-width: 52ch; }
.apropos__corps p + p { margin-top: 1.15em; }

.chiffres {
  margin-top: clamp(2.6rem, 6vh, 4.4rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--lin);
  border: 1px solid var(--lin);
}
.chiffre {
  background: var(--papier);
  padding: clamp(1.3rem, 2.6vw, 2.1rem) clamp(1.1rem, 2vw, 1.7rem);
}
.chiffre__val {
  display: block;
  font-size: clamp(2.1rem, 3.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--encre);
}
.chiffre__val sup { font-size: 0.42em; vertical-align: super; color: var(--beige); }
.chiffre__lib {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--anthracite);
}

/* ---------------------------------------------------------- 13. EN-TETES */
.entete-section {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(1.2rem, 3vh, 2rem);
  align-items: end;
  margin-bottom: clamp(2.6rem, 7vh, 5.4rem);
}
.entete-section__g { grid-column: 1 / span 8; min-width: 0; }
.entete-section__d { grid-column: 10 / span 3; padding-bottom: 0.5rem; }
@media (max-width: 900px) {
  .entete-section__g, .entete-section__d { grid-column: 1 / -1; }
}
.entete-section .mention { margin-bottom: clamp(0.9rem, 2vh, 1.5rem); display: block; }

/* ------------------------------------------------------------- 14. BIENS */
.biens { padding-block: var(--section); }

.biens__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(2.6rem, 6vh, 4.5rem);
  align-items: start;   /* cartes alignées en haut, pas étirées */
}
@media (max-width: 1024px) { .biens__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .biens__grille { grid-template-columns: 1fr; } }

.bien { position: relative; }
.bien__media {
  position: relative;
  overflow: hidden;
  background: var(--papier-2);
  aspect-ratio: 4 / 5;   /* toutes les cartes au même format */
  transform-style: preserve-3d;
  will-change: transform;
}
.bien__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.25s var(--ease-out), filter 1.25s var(--ease-out);
  transform: scale(1.015);
}
.bien:hover .bien__media img { transform: scale(1.06); }

.bien__badge {
  position: absolute;
  top: clamp(0.85rem, 1.4vw, 1.3rem);
  left: clamp(0.85rem, 1.4vw, 1.3rem);
  z-index: 3;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  background: rgba(32, 29, 24, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--beige-30);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--beige);
  transform: translateZ(38px);
}
.bien__badge--exclusif { background: var(--beige); color: var(--encre); border-color: var(--beige); }

.bien__lueur {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  background: linear-gradient(115deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 42%);
}
.bien:hover .bien__lueur { opacity: 1; }

.bien__info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.2rem;
  padding-top: clamp(1rem, 1.8vh, 1.5rem);
  border-top: 1px solid var(--lin);
  margin-top: clamp(1rem, 1.8vh, 1.5rem);
}
.section--sombre .bien__info { border-top-color: var(--beige-12); }
.bien__titre {
  font-size: clamp(1.02rem, 1.3vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  line-height: 1.22;
  color: var(--encre);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bien__lieu {
  display: block;
  margin-top: 0.45rem;
  font-size: var(--fs-small);
  letter-spacing: var(--approche-legende);
  color: var(--anthracite);
}
.bien__prix {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--encre);
  white-space: nowrap;
}
.bien__prix small { display: block; font-size: 0.62em; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--anthracite); margin-bottom: 0.2rem; }

.bien__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 0.95rem;
  font-size: var(--fs-small);
  letter-spacing: var(--approche-legende);
  color: var(--anthracite);
}
.bien__specs li { list-style: none; display: flex; align-items: center; gap: 0.5rem; }
.bien__specs svg { width: 14px; height: 14px; flex: none; stroke: var(--beige); fill: none; stroke-width: 1.2; }

.biens__pied {
  margin-top: clamp(3.4rem, 9vh, 7rem);
  display: flex;
  justify-content: center;
}

/* Cartes de biens sur fond sombre (section Louer) */
.section--sombre .bien__titre,
.section--sombre .bien__prix { color: var(--beige); }
.section--sombre .bien__lieu,
.section--sombre .bien__specs,
.section--sombre .bien__prix small { color: rgba(209, 195, 171, 0.62); }
.section--sombre .bien__specs svg { stroke: var(--beige); }

/* --------------------------------------------------------------- VENDRE */
.vendre { padding-block: var(--section); }
.vendre__grille { align-items: center; row-gap: clamp(2.6rem, 6vh, 4.4rem); }
.vendre__texte { grid-column: 1 / span 6; }
.vendre__media { grid-column: 8 / span 5; }
@media (max-width: 900px) {
  .vendre__texte { grid-column: 1 / -1; }
  .vendre__media { grid-column: 1 / -1; grid-row: 1; }
}
.vendre__media .masque { aspect-ratio: 4/5; }

.vendre__etapes {
  list-style: none;
  margin-top: clamp(2rem, 5vh, 3.4rem);
  display: grid;
  gap: clamp(1.2rem, 3vh, 2rem);
}
.vendre__etapes li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
  padding-top: clamp(1.2rem, 3vh, 2rem);
  border-top: 1px solid var(--lin);
}
.vendre__num {
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  font-weight: 700;
  color: var(--beige);
  letter-spacing: 0.04em;
}
.vendre__t {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.vendre__d { font-size: var(--fs-small); font-weight: 400; line-height: 1.6; color: var(--anthracite); max-width: 46ch; }
.vendre__cta { margin-top: clamp(2rem, 5vh, 3.2rem); }

/* ---------------------------------------------------------- 15. SERVICES */
.services { padding-block: var(--section); }
.services__grille {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--beige-12);
  border: 1px solid var(--beige-12);
}
@media (max-width: 900px) { .services__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .services__grille { grid-template-columns: 1fr; } }

.service {
  position: relative;
  background: var(--encre);
  padding: clamp(1.8rem, 3.4vw, 3.2rem) clamp(1.4rem, 2.6vw, 2.6rem) clamp(2.4rem, 4vw, 3.6rem);
  display: grid;
  align-content: start;
  gap: clamp(1rem, 2vh, 1.5rem);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(240px, 30vh, 340px);
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--beige);
  transform: translateY(101%);
  transition: transform 0.72s var(--ease-out);
}
.service:hover::before { transform: translateY(0); }
.service__num {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--beige-60);
  transition: color 0.45s var(--ease-out);
}
.service__icone { width: 34px; height: 34px; stroke: var(--beige); fill: none; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.45s var(--ease-out), transform 0.7s var(--ease-out); }
.service:hover .service__icone { stroke: var(--encre); transform: translateY(-3px); }
.service__titre {
  font-size: clamp(1.15rem, 1.55vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  color: var(--beige);
  line-height: 1.12;
  transition: color 0.45s var(--ease-out);
}
.service__txt {
  font-size: var(--fs-small);
  line-height: 1.62;
  color: rgba(209, 195, 171, 0.6);
  transition: color 0.45s var(--ease-out);
  max-width: 34ch;
}
.service:hover .service__num,
.service:hover .service__titre { color: var(--encre); }
.service:hover .service__txt { color: rgba(32, 29, 24, 0.82); }

/* ------------------------------------------- 15b. EN-TÊTE DE PAGE (sous-pages) */
.page-hero {
  position: relative;
  padding: calc(var(--entete-h) + clamp(4rem, 13vh, 9rem)) 0 clamp(3rem, 8vh, 6rem);
  overflow: hidden;
}
.page-hero__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 82% 4%, rgba(209, 195, 171, 0.10), transparent 60%),
    radial-gradient(120% 120% at 50% 120%, var(--encre-3), var(--encre));
}
.page-hero__int { position: relative; z-index: 1; }
.page-hero .mention { display: block; margin-bottom: clamp(1rem, 2.5vh, 1.8rem); }
.page-hero__titre {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--approche-titre);
  line-height: 0.88;
  text-transform: uppercase;
  color: var(--beige);
}
.page-hero__txt { margin-top: clamp(1.4rem, 3vh, 2.2rem); max-width: 54ch; color: rgba(220, 209, 189, 0.82); }
.biens__note { text-align: center; margin-top: clamp(2.4rem, 6vh, 4rem); color: var(--anthracite); }

/* ------------------------------------------------- 15c. APERÇU BIENS (accueil) */
.apercu { padding-block: var(--section); }
.apercu__cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gouttiere); }
@media (max-width: 900px) { .apercu__cartes { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vh, 2.6rem); } }
.apercu__carte { display: block; }
.apercu__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/5;
  background: var(--papier-2);
  margin-bottom: clamp(1rem, 1.8vh, 1.4rem);
}
.apercu__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); transform: scale(1.01); }
.apercu__carte:hover .apercu__media img { transform: scale(1.06); }
.apercu__over {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: clamp(1rem, 1.6vw, 1.4rem);
}
.apercu__lib {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--beige); background: rgba(32, 29, 24, 0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--beige-30);
}
.apercu__fl {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--beige); color: var(--encre); font-size: 1.1rem;
  transform: translateX(-6px); opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.apercu__carte:hover .apercu__fl { opacity: 1; transform: none; }
.apercu__t {
  font-size: clamp(1.15rem, 1.6vw, 1.7rem); font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase; color: var(--encre);
}
.apercu__d { margin-top: 0.5rem; color: var(--anthracite); }

/* ----------------------------------------------- 15d. PAGES LÉGALES (doc) */
.doc { padding-block: clamp(3.5rem, 9vh, 7rem) var(--section); }
.doc__wrap { max-width: 74ch; }
.doc__note {
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--anthracite);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--lin);
  background: var(--papier-2);
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.doc h2 {
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
  color: var(--encre);
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  margin-bottom: 0.9rem;
}
.doc h2:first-of-type { margin-top: 0; }
.doc h3 {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--encre);
  margin-top: clamp(1.6rem, 3.5vh, 2.2rem);
  margin-bottom: 0.6rem;
}
.doc p, .doc li {
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  color: var(--anthracite);
}
.doc p { margin-bottom: 1rem; }
.doc strong { color: var(--encre); font-weight: 600; }
.doc ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.doc li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; }
.doc li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 6px; height: 1px; background: var(--beige);
}
.doc a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--beige); }
.doc a:hover { text-decoration-color: var(--encre); }

/* ----------------------------------------------------------- 16. RÉGION */
.region { position: relative; }

.region__intro { padding-block: var(--section) clamp(3rem, 8vh, 6rem); }
.region__chapo { margin-bottom: clamp(2.6rem, 6vh, 4.4rem); }
.region__chapo .chapo { max-width: 62ch; }

.region__chiffres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--lin);
  border: 1px solid var(--lin);
}
@media (max-width: 900px) { .region__chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .region__chiffres { grid-template-columns: 1fr; } }
.region__chiffre {
  background: var(--papier);
  padding: clamp(1.4rem, 2.8vw, 2.2rem) clamp(1.2rem, 2vw, 1.8rem);
}
.region__val {
  display: block;
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--encre);
  letter-spacing: 0.01em;
}
.region__val span {
  font-size: 0.4em;
  font-weight: 600;
  margin-left: 0.15em;
  color: var(--beige);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.region__lib {
  display: block;
  margin-top: 0.8rem;
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: var(--approche-legende);
  color: var(--anthracite);
  max-width: 24ch;
}

.region__vivre { padding-block: clamp(4rem, 11vh, 9rem); }
.region__vivre-grille { row-gap: clamp(2.4rem, 6vh, 4rem); align-items: start; }
.region__vivre-titre { grid-column: 1 / span 4; }
.region__vivre-liste {
  grid-column: 6 / span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) var(--gouttiere);
}
@media (max-width: 900px) {
  .region__vivre-titre { grid-column: 1 / -1; }
  .region__vivre-liste { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .region__vivre-liste { grid-template-columns: 1fr; } }
.region__item { padding-top: 1.2rem; border-top: 1px solid var(--beige); }
.region__item-t {
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 0.6rem;
}
.region__item-d { font-size: var(--fs-small); font-weight: 400; line-height: 1.6; color: var(--anthracite); }
.region__cta { margin-top: clamp(2.6rem, 6vh, 4.4rem); display: flex; justify-content: center; }

/* --------------------------------------------------------- 16b. VOLETS */
.lifestyle { position: relative; }
.volet {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.volet__media {
  position: absolute;
  inset: -12% 0;
  z-index: 0;
  will-change: transform;
}
.volet__media img { width: 100%; height: 100%; object-fit: cover; }
.volet::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(8,10,12,0.5), rgba(8,10,12,0.15) 45%, rgba(8,10,12,0.78));
  pointer-events: none;
}
.volet__contenu {
  position: relative;
  z-index: 2;
  text-align: center;
  display: grid;
  gap: clamp(1rem, 2.4vh, 1.8rem);
  justify-items: center;
  padding-inline: var(--marge);
}
.volet__titre {
  font-size: clamp(2.6rem, 9.2vw, 10rem);
  font-weight: 700;
  letter-spacing: var(--approche-titre);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--beige);
}
.volet__txt { max-width: 40ch; color: var(--beige-90); font-size: clamp(1rem, 1.25vw, 1.25rem); }
.volet__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin-top: 0.6rem;
}
.volet__meta li { list-style: none; }

/* ------------------------------------------------------------ 17. AGENCE */
.agence { padding-block: var(--section); }
.agence__haut { row-gap: clamp(2rem, 5vh, 4rem); align-items: end; margin-bottom: clamp(2.6rem, 7vh, 5rem); }
.agence__media { grid-column: 1 / span 7; }
.agence__media .masque { aspect-ratio: 16/10; }
.agence__intro { grid-column: 9 / span 4; }
@media (max-width: 900px) { .agence__media, .agence__intro { grid-column: 1 / -1; } }
/* Page Agence (section sans id) : titre calibré pour que les mots longs
   comme « CONVICTION » tiennent dans la colonne étroite, sans être coupés.
   Le teaser d'accueil (section#agence) conserve sa taille. */
.agence:not(#agence) .agence__intro h2 {
  font-size: clamp(1.7rem, 3vw, 3rem);
  overflow-wrap: break-word;
}

.chrono { position: relative; border-top: 1px solid var(--lin); }
.chrono__el {
  display: grid;
  grid-template-columns: minmax(84px, 1fr) minmax(0, 3fr) minmax(0, 5fr);
  gap: var(--gouttiere);
  align-items: baseline;
  padding-block: clamp(1.4rem, 3vh, 2.4rem);
  border-bottom: 1px solid var(--lin);
  position: relative;
}
.chrono__el::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1px;
  background: var(--beige);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
}
.chrono__el:hover::after { transform: scaleX(1); }
.chrono__an {
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--beige);
}
.chrono__titre {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--encre);
}
.chrono__txt { font-size: var(--fs-small); line-height: 1.66; color: var(--anthracite); }
@media (max-width: 760px) {
  .chrono__el { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Équipe */
.equipe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.6rem) var(--gouttiere);
}
@media (max-width: 760px) { .equipe { grid-template-columns: 1fr; } }
.membre { display: grid; gap: 1rem; }
.membre__portrait {
  aspect-ratio: 4/5;
  background: var(--papier-2);
  border: 1px solid var(--lin);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.membre__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 55%, rgba(209, 195, 171, 0.22));
}
.membre__portrait span {
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--beige);
}
.membre__portrait img { width: 100%; height: 100%; object-fit: cover; }
.membre__nom {
  font-size: clamp(1.1rem, 1.4vw, 1.4rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--encre);
  line-height: 1.1;
}
.membre__role {
  font-size: var(--fs-small);
  letter-spacing: var(--approche-legende);
  color: var(--anthracite);
}

.valeurs {
  margin-top: clamp(3rem, 8vh, 6rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gouttiere) var(--gouttiere);
}
@media (max-width: 900px) { .valeurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.valeur { padding-top: 1.2rem; border-top: 1px solid var(--beige); }
.valeur__t {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--encre);
  margin-bottom: 0.6rem;
}
.valeur__d { font-size: var(--fs-small); line-height: 1.62; color: var(--anthracite); }

/* Témoignages */
.temoignages { padding-block: var(--section); }
.temoignages__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 4rem) var(--gouttiere); }
@media (max-width: 760px) { .temoignages__grille { grid-template-columns: 1fr; } }
.temoignage {
  margin: 0;
  padding-top: clamp(1.6rem, 3vh, 2.4rem);
  border-top: 1px solid var(--beige-12);
  display: grid;
  gap: clamp(1.2rem, 2.5vh, 1.8rem);
  position: relative;
}
.temoignage::before {
  content: "\201C";
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 0.6;
  color: var(--beige);
  opacity: 0.35;
}
.temoignage__txt {
  font-size: clamp(1.1rem, 1.5vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(220, 209, 189, 0.92);
  text-wrap: pretty;
  max-width: 42ch;
}
.temoignage__sig { display: grid; gap: 0.25rem; }
.temoignage__nom {
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--beige);
}
.temoignage__src {
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--beige-60);
}

/* Carrousel d'avis (RealAdvisor) */
.avis-section { padding-block: var(--section); overflow: hidden; }
.avis-note-globale { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; }
.avis-note-globale__val { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 700; color: var(--beige); line-height: 1; }
.avis__note { color: var(--beige); letter-spacing: 0.15em; font-size: 0.95rem; }

.avis-fenetre {
  margin-top: clamp(2.4rem, 6vh, 4rem);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.avis-piste {
  display: flex;
  gap: var(--gouttiere);
  width: max-content;
  padding-inline: var(--marge);
  will-change: transform;
}
.avis-piste.anime { animation: avisDefile 72s linear infinite; }
.avis-fenetre:hover .avis-piste.anime { animation-play-state: paused; }
@keyframes avisDefile { to { transform: translateX(-50%); } }

.avis {
  flex: none;
  width: clamp(280px, 30vw, 396px);
  margin: 0;
  padding: clamp(1.6rem, 2.4vw, 2.4rem);
  background: var(--encre-2);
  border: 1px solid var(--beige-12);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vh, 1.4rem);
  min-height: clamp(280px, 34vh, 340px);
}
.avis__txt {
  margin: 0;
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: rgba(220, 209, 189, 0.9);
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.avis__sig { margin-top: auto; display: grid; gap: 0.25rem; }
.avis__nom { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--beige); }
.avis__src { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--beige-60); }

.avis-piste.fige { animation-play-state: paused; }  /* figé pendant l'agrandissement */

.avis { cursor: pointer; transition: border-color 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
.avis:hover { border-color: var(--beige-30); transform: translateY(-4px); }
.avis:focus-visible { outline: 2px solid var(--beige); outline-offset: 3px; }
.avis__plus {
  margin-top: 0.2rem;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--beige-60);
  display: inline-flex; align-items: center; gap: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .avis-piste.anime { animation: none; }
  .avis-fenetre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* -------------------------------------------- Fenêtre d'avis agrandi */
.avis-modal {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center;
  padding: clamp(1.2rem, 4vw, 3rem);
}
.avis-modal[hidden] { display: none; }
.avis-modal__voile {
  position: absolute; inset: 0;
  background: rgba(14, 13, 11, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.5s var(--ease-out);
}
.avis-modal__boite {
  position: relative; z-index: 1;
  width: min(640px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--encre-2);
  border: 1px solid var(--beige-12);
  padding: clamp(2.2rem, 4.5vw, 3.6rem);
  display: grid; gap: clamp(1.2rem, 2.5vh, 1.8rem);
  transform: scale(0.9); opacity: 0;
  transition: transform 0.55s var(--ease-out), opacity 0.5s var(--ease-out);
}
.avis-modal.est-ouvert .avis-modal__voile { opacity: 1; }
.avis-modal.est-ouvert .avis-modal__boite { transform: none; opacity: 1; }
.avis-modal__txt {
  margin: 0; font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.62;
  color: rgba(220, 209, 189, 0.95); text-wrap: pretty;
}
.avis-modal__sig { display: grid; gap: 0.25rem; }
.avis-modal__nom { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--beige); }
.avis-modal__fermer {
  position: absolute; top: clamp(0.9rem, 2vw, 1.5rem); right: clamp(0.9rem, 2vw, 1.5rem);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--beige-30); background: none; color: var(--beige);
  display: grid; place-items: center; cursor: pointer;
  transition: background-color 0.35s var(--ease-out);
}
.avis-modal__fermer:hover { background: var(--beige); }
.avis-modal__fermer svg { width: 15px; height: 15px; stroke: currentColor; fill: none; transition: stroke 0.35s; }
.avis-modal__fermer:hover svg { stroke: var(--encre); }

@media (prefers-reduced-motion: reduce) {
  .avis-modal__voile, .avis-modal__boite { transition: none; }
}

/* ----------------------------------------------------------- 18. CONTACT */
.contact { position: relative; padding-block: var(--section); overflow: hidden; }
.contact__fond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.contact__fond img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.contact__fond::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--encre) 0%, rgba(32,29,24,0.62) 42%, var(--encre) 100%);
}
.contact__int { position: relative; z-index: 2; }

.contact__declaration {
  font-size: clamp(2.3rem, 7.4vw, 8rem);
  font-weight: 700;
  letter-spacing: var(--approche-titre);
  line-height: 0.92;
  text-transform: uppercase;
  color: var(--beige);
  margin-left: -0.035em;
  margin-bottom: clamp(2.6rem, 7vh, 5rem);
  max-width: 16ch;
}

.contact__grille { row-gap: clamp(2.6rem, 6vh, 4.4rem); align-items: start; }
.contact__form { grid-column: 1 / span 6; }
.contact__infos { grid-column: 8 / span 5; }
@media (max-width: 900px) { .contact__form, .contact__infos { grid-column: 1 / -1; } }

.form { display: grid; gap: clamp(1.3rem, 2.6vh, 2rem); }
.form__ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.3rem, 2.6vh, 2rem); }
@media (max-width: 620px) { .form__ligne { grid-template-columns: 1fr; } }

.champ { position: relative; }
.champ input, .champ textarea, .champ select {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--beige-30);
  padding: 0.85rem 0 0.75rem;
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--beige);
  border-radius: 0;
  transition: border-color 0.5s var(--ease-out);
}
.champ select { appearance: none; cursor: pointer; }
.champ select option { background: var(--encre-2); color: var(--beige); }
.champ textarea { resize: vertical; min-height: 108px; }
.champ input::placeholder, .champ textarea::placeholder { color: transparent; }
.champ label {
  position: absolute;
  left: 0; top: 0.85rem;
  font-size: var(--fs-body);
  font-weight: 400;
  color: rgba(209, 195, 171, 0.5);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.45s var(--ease-out), color 0.45s var(--ease-out);
}
.champ input:focus + label,
.champ textarea:focus + label,
.champ input:not(:placeholder-shown) + label,
.champ textarea:not(:placeholder-shown) + label,
.champ select:valid + label,
.champ select:focus + label {
  transform: translateY(-1.35rem) scale(0.7);
  color: var(--beige);
}
.champ--select label { transform: translateY(-1.35rem) scale(0.7); color: var(--beige); }
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none;
  border-bottom-color: var(--beige);
}
.champ__fleche { position: absolute; right: 2px; top: 1.15rem; width: 11px; stroke: var(--beige-60); fill: none; pointer-events: none; }

.form__rgpd {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: var(--fs-small);
  color: rgba(209, 195, 171, 0.6);
  line-height: 1.55;
}
.form__rgpd input { margin-top: 0.28rem; accent-color: var(--beige); width: 15px; height: 15px; flex: none; }
.form__etat { font-size: var(--fs-small); color: var(--beige); min-height: 1.4em; }

.coord { display: grid; gap: clamp(1.6rem, 3.4vh, 2.6rem); }
.coord__bloc { display: grid; gap: 0.45rem; }
.coord__lib {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--beige-60);
}
.coord__val {
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  font-weight: 300;
  color: var(--beige);
  line-height: 1.45;
}
a.coord__val { position: relative; display: inline-block; width: fit-content; }
a.coord__val::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--beige);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease-out);
}
a.coord__val:hover::after { transform: scaleX(1); transform-origin: left; }

.carte {
  margin-top: clamp(3rem, 8vh, 6rem);
  height: clamp(300px, 46vh, 520px);
  border: 1px solid var(--beige-12);
  position: relative;
  background: var(--encre-2);
  overflow: hidden;
}
.carte__toile { position: absolute; inset: 0; filter: grayscale(1) contrast(0.92) brightness(0.82); }
.carte__repli {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.8rem;
  text-align: center;
  padding: 2rem;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.8s var(--ease-out);
}
.carte.est-chargee .carte__repli { opacity: 0; }
.carte__etiq {
  position: absolute;
  z-index: 500;
  left: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  background: var(--beige);
  color: var(--encre);
  padding: 0.9rem 1.2rem;
  display: grid;
  gap: 0.2rem;
  max-width: 260px;
}
.carte__etiq strong { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.carte__etiq span { font-size: var(--fs-micro); letter-spacing: 0.06em; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(32, 29, 24, 0.55) !important; color: #777 !important; }
.leaflet-control-attribution a { color: #999 !important; }

/* ------------------------------------------------------------- 19. PIED */
.pied {
  background: var(--encre);
  border-top: 1px solid var(--beige-12);
  padding-block: clamp(3rem, 7vh, 5.4rem) clamp(1.6rem, 3vh, 2.4rem);
}
.pied__haut {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gouttiere);
  row-gap: clamp(2.2rem, 5vh, 3.4rem);
  padding-bottom: clamp(2.4rem, 6vh, 4rem);
  border-bottom: 1px solid var(--beige-12);
}
.pied__marque { grid-column: 1 / span 4; display: grid; gap: 1.4rem; align-content: start; }
.pied__marque svg { width: clamp(150px, 15vw, 210px); height: auto; }
.pied__marque .lg-d { fill: var(--blanc); }
.pied__col { display: grid; gap: 0.8rem; align-content: start; }
.pied__col:nth-of-type(1) { grid-column: 6 / span 2; }
.pied__col:nth-of-type(2) { grid-column: 8 / span 2; }
.pied__col:nth-of-type(3) { grid-column: 10 / span 3; }
@media (max-width: 900px) {
  .pied__marque { grid-column: 1 / -1; }
  .pied__col:nth-of-type(1) { grid-column: 1 / span 2; }
  .pied__col:nth-of-type(2) { grid-column: 3 / span 2; }
  .pied__col:nth-of-type(3) { grid-column: 5 / span 2; }
}
@media (max-width: 560px) {
  .pied__col:nth-of-type(1),
  .pied__col:nth-of-type(2),
  .pied__col:nth-of-type(3) { grid-column: 1 / -1; }
}
.pied__t {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--beige-60);
  margin-bottom: 0.4rem;
}
.pied__l {
  font-size: var(--fs-small);
  color: rgba(209, 195, 171, 0.72);
  transition: color 0.4s var(--ease-out);
  width: fit-content;
}
.pied__l:hover { color: var(--beige); }
.pied__bas {
  padding-top: clamp(1.4rem, 3vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: center;
}
.pied__bas p, .pied__bas a { font-size: var(--fs-micro); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(209,195,171,0.45); }
.pied__bas a:hover { color: var(--beige); }

/* Retour haut */
.haut {
  position: fixed;
  right: clamp(1rem, 2vw, 2rem);
  bottom: clamp(1rem, 2vw, 2rem);
  z-index: 700;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--beige-30);
  background: rgba(32, 29, 24, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), background-color 0.4s;
  pointer-events: none;
}
.haut.est-visible { opacity: 1; transform: none; pointer-events: auto; }
.haut:hover { background: var(--beige); }
.haut svg { width: 14px; stroke: var(--beige); fill: none; stroke-width: 1.4; transition: stroke 0.4s; }
.haut:hover svg { stroke: var(--encre); }

/* ---------------------------------------------- 20. PROGRESSION / DIVERS */
.progression {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 900;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--beige);
  opacity: 0.85;
}

.respiration { animation: respirer 6.5s ease-in-out infinite; }
@keyframes respirer {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.028); }
}

/* ---------------------------------------- 21. ACCESSIBILITE / PERFORMANCE */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal, .js .reveal-up { opacity: 1 !important; transform: none !important; }
  .js .masque > .masque-voile { display: none; }
  .menu__lien span { transform: none; }
  .hero__grain, .respiration { animation: none; }
  .curseur, .halo { display: none; }
}

@media print {
  .prechargement, .entete, .curseur, .halo, .haut, .progression, .hero__scene { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===================================================================
   19. FICHE DÉTAIL D'UN BIEN (bien.php)
   =================================================================== */
.fiche { padding-block: calc(var(--entete-h) + clamp(1.6rem,5vh,3.2rem)) var(--section); }

.fil { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; font-size:var(--fs-small); color:var(--anthracite); margin-bottom:clamp(1.4rem,3vh,2.4rem); }
.fil a { color:var(--anthracite); transition:color .3s var(--ease-out); }
.fil a:hover { color:var(--encre); }
.fil span[aria-hidden] { opacity:.4; }

.fiche__tete { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1.4rem 2rem; padding-bottom:clamp(1.4rem,3vh,2.2rem); border-bottom:1px solid rgba(88,88,88,.16); }
.fiche__titre { font-size:clamp(1.85rem,3.8vw,3.3rem); font-weight:600; line-height:1.06; color:var(--encre); letter-spacing:-.01em; max-width:20ch; text-transform:none; }
.fiche__lieu { margin-top:.7rem; font-size:var(--fs-small); letter-spacing:.02em; color:var(--anthracite); }
.fiche__prix { flex:none; font-size:clamp(1.5rem,2.6vw,2.4rem); font-weight:600; color:var(--encre); line-height:1; text-align:right; }
.fiche__prix small { display:block; font-size:var(--fs-small); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--anthracite); margin-bottom:.35rem; }

/* Galerie */
.galerie { margin-top:clamp(1.6rem,4vh,2.6rem); display:grid; grid-template-columns:1.9fr 1fr; gap:clamp(.5rem,1vw,.85rem); }
.galerie__grande, .galerie__vign { position:relative; overflow:hidden; border:0; padding:0; cursor:pointer; background:var(--lin); border-radius:2px; }
.galerie__grande { aspect-ratio:3/2; }
.galerie__grande img, .galerie__vign img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease-out); }
.galerie__grande:hover img, .galerie__vign:hover img { transform:scale(1.045); }
.galerie__cote { display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:clamp(.5rem,1vw,.85rem); }
.galerie__vign { aspect-ratio:1/1; }
.galerie__compte { position:absolute; left:.9rem; bottom:.9rem; padding:.4rem .8rem; font-size:var(--fs-small); letter-spacing:.04em; color:var(--blanc); background:rgba(32,29,24,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); border-radius:2px; }
.galerie__vign--plus::after { content:attr(data-reste); position:absolute; inset:0; display:grid; place-items:center; font-size:1.4rem; font-weight:600; color:var(--blanc); background:rgba(32,29,24,.5); }

/* Corps : description + carte résumé */
.fiche__corps { margin-top:clamp(2.4rem,6vh,4rem); display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:clamp(2rem,4vw,4.5rem); align-items:start; }
.fiche__chiffres { list-style:none; display:flex; flex-wrap:wrap; gap:clamp(1.4rem,3vw,2.8rem); padding:0 0 clamp(1.6rem,3vh,2.2rem); margin:0 0 clamp(1.6rem,3vh,2.2rem); border-bottom:1px solid rgba(88,88,88,.16); }
.fiche__chiffres li { display:flex; flex-direction:column; gap:.2rem; }
.fiche__chiffres .num { font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600; color:var(--encre); }
.fiche__chiffres small { font-size:var(--fs-small); letter-spacing:.1em; text-transform:uppercase; color:var(--anthracite); }

.prose { color:#4a4a47; font-size:var(--fs-body); line-height:1.72; }
.prose p { margin:0 0 1.05em; }
.prose h2 { font-size:clamp(1.15rem,1.7vw,1.5rem); font-weight:600; color:var(--encre); margin:1.8em 0 .7em; letter-spacing:0; text-transform:none; }
.prose h3 { font-size:1.1rem; font-weight:600; color:var(--encre); margin:1.4em 0 .5em; text-transform:none; }
.prose ul { margin:0 0 1.05em; padding-left:1.1rem; }
.prose li { margin:.3em 0; }
.prose strong, .prose b { color:var(--encre); font-weight:600; }

.fiche__st { font-size:clamp(1.2rem,1.9vw,1.6rem); font-weight:600; color:var(--encre); margin:clamp(2rem,4vh,3rem) 0 1.1rem; letter-spacing:0; text-transform:none; }
.equip { list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.55rem 1.4rem; padding:0; margin:0; }
.equip li { display:flex; align-items:center; gap:.6rem; font-size:var(--fs-small); color:#4a4a47; }
.equip svg { width:15px; height:15px; flex:none; color:var(--beige); }

.fiche__aside { position:sticky; top:calc(var(--entete-h) + 1.2rem); }
.carte-bien { background:var(--blanc); border:1px solid rgba(88,88,88,.14); border-radius:3px; padding:clamp(1.5rem,2.4vw,2rem); box-shadow:0 24px 60px -40px rgba(32,29,24,.42); }
.carte-bien__prix { font-size:clamp(1.5rem,2.2vw,2rem); font-weight:600; color:var(--encre); line-height:1; }
.carte-bien__prix small { display:block; font-size:var(--fs-small); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--anthracite); margin-top:.4rem; }
.carte-bien__specs { margin:1.4rem 0; display:grid; gap:0; }
.carte-bien__specs > div { display:flex; justify-content:space-between; gap:1rem; padding:.62rem 0; border-bottom:1px solid rgba(88,88,88,.12); font-size:var(--fs-small); }
.carte-bien__specs > div:last-child { border-bottom:0; }
.carte-bien__specs dt { color:var(--anthracite); margin:0; }
.carte-bien__specs dd { margin:0; color:var(--encre); font-weight:600; text-align:right; }
.carte-bien__cta { width:100%; justify-content:space-between; margin-top:.4rem; }
.carte-bien__contact { margin-top:1.2rem; display:grid; gap:.35rem; text-align:center; }
.carte-bien__contact a { font-size:var(--fs-small); color:var(--anthracite); transition:color .3s var(--ease-out); }
.carte-bien__contact a:first-child { font-size:1.05rem; font-weight:600; color:var(--encre); }
.carte-bien__contact a:hover { color:var(--beige); }

.fiche-carte { margin-top:clamp(2.4rem,5vh,3.6rem); }
.fiche-carte__zone { height:clamp(300px,42vh,440px); border-radius:3px; overflow:hidden; border:1px solid rgba(88,88,88,.14); background:var(--lin); }
.fiche-carte__note { margin-top:.8rem; }

.fiche__retour { margin-top:clamp(2.4rem,5vh,3.6rem); }
.fiche__retour .lien-fleche { color:var(--anthracite); }
.fiche__retour .lien-fleche:hover { color:var(--encre); }
.fiche__retour .lien-fleche svg { width:14px; height:14px; stroke:currentColor; fill:none; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:9600; display:grid; place-items:center; background:rgba(14,13,11,.94); }
.lightbox[hidden] { display:none; }
.lightbox__fig { margin:0; max-width:92vw; max-height:86vh; }
.lightbox__fig img { max-width:92vw; max-height:86vh; object-fit:contain; display:block; }
.lightbox__fermer { position:absolute; top:1.2rem; right:1.4rem; width:48px; height:48px; font-size:1.8rem; line-height:1; color:var(--beige); background:none; border:1px solid var(--beige-30); border-radius:50%; cursor:pointer; transition:background-color .3s var(--ease-out), color .3s var(--ease-out); }
.lightbox__fermer:hover { background:var(--beige); color:var(--encre); }
.lightbox__nav { position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; font-size:2rem; line-height:1; color:var(--beige); background:none; border:0; cursor:pointer; opacity:.75; transition:opacity .3s var(--ease-out); }
.lightbox__nav:hover { opacity:1; }
.lightbox__nav--prec { left:1rem; }
.lightbox__nav--suiv { right:1rem; }
.lightbox__compte { position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); font-size:var(--fs-small); letter-spacing:.1em; color:var(--beige-60); }

@media (max-width:920px) {
  .fiche__corps { grid-template-columns:1fr; }
  .fiche__aside { position:static; }
  .galerie { grid-template-columns:1fr; }
  .galerie__cote { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:560px) {
  .fiche__tete { flex-direction:column; align-items:flex-start; }
  .fiche__prix { text-align:left; }
  .galerie__cote { grid-template-columns:repeat(2,1fr); }
  .equip { grid-template-columns:1fr 1fr; }
}