/* Polices auto-hébergées — Cormorant Garamond & Jost (SIL Open Font License 1.1) */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/cormorant-garamond-600-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('assets/fonts/jost-200-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('assets/fonts/jost-200-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/jost-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/jost-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jost-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jost-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jost-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jost-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =====================================================================
   VILLA VERDUN — CASSIS
   Direction artistique « Calanque » : le bleu prélevé sur les meubles
   de cuisine et les volets du bien, posé sur un fond calcaire.
   ===================================================================== */

:root {
  /* Couleurs */
  --bg:            #F6F4EF;
  --bg-alt:        #EDEAE3;
  --surface:       #FFFFFF;
  --fg:            #22333F;
  --muted-fg:      #5E7386;
  --soft-fg:       #93A5B2;
  --accent:        #5C7488;
  /* LA MER DE CASSIS, POUR LE SEUL BOUTON QUI DÉCIDE.
     `--accent` est le bleu-gris de la charte : juste pour un titre, un repère,
     une bordure — mais éteint sur le bouton qu'on veut faire cliquer. Ces deux
     teintes-ci sont plus saturées et plus profondes, celles de l'eau devant le
     Cap Canaille. Elles ne servent QU'au dégradé des CTA : une touche, pas une
     nouvelle couleur de marque. */
  --mer-claire:    #2E7C9B;
  --mer-profonde:  #1B4F6B;
  --accent-hover:  #47606F;
  --accent-light:  #A9BCCB;
  --accent-deep:   #3A5163;
  --sand:          #C9B79E;
  /* Terre cuite. Elle ne sert qu'au surtitre des deux moments de capture, et
     nulle part ailleurs : une touche, pas une couleur de marque. */
  --terre:         #A8553A;
  --border:        #E2DCD2;
  --border-strong: #C7BEB1;
  --dark:          #2E3D4A;
  --dark-2:        #22333F;
  --dark-3:        #3E5163;

  /* Typo */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-sans:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelles */
  --container: 1280px;
  --radius-sm: 2px;
  --radius:    4px;

  /* Transitions */
  --t-fast: 180ms ease-out;
  --t:      300ms ease-out;
  --t-slow: 600ms cubic-bezier(.22,.61,.36,1);

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(34,51,63,.05);
  --shadow:    0 4px 24px rgba(34,51,63,.09);
  --shadow-lg: 0 20px 60px rgba(34,51,63,.20);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- Typographie ---------- */
.section-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: 0;
  color: var(--fg);
}
.section-title em { font-style: italic; color: var(--accent); }
.section-title--light { color: var(--bg); }
.section-title--light em { color: var(--accent-light); }

.section-lede {
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.75;
  color: var(--muted-fg);
  max-width: 58ch;
  margin: 20px 0 0;
}
.section-lede--light { color: rgba(246,244,239,.72); }

.eyebrow {
  position: relative;
  padding-left: 44px;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 22px;
}
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 32px; height: 1px; background: currentColor;
}
.eyebrow--light { color: var(--accent-light); }
.eyebrow--center { padding-left: 0; }
.eyebrow--center::before { display: none; }

.rule { width: 56px; height: 1px; background: var(--accent); margin: 0 0 26px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  padding: 16px 32px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; text-align: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: translateY(1px); }
/* Le sceau : un cadenas dont l'anse se soulève et pivote quand la carte
   arrive à l'écran. « Ça se déverrouille », dit sans un mot de plus. */
.brochure-sceau { display: inline-flex; align-items: center; gap: .5rem; }
.brochure-sceau__cadenas { flex-shrink: 0; overflow: visible; }
.brochure-sceau__anse {
  transform-origin: 11.5px 8px;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.is-ouvert .brochure-sceau__anse { transform: translateY(-2.4px) rotate(26deg); }

/* Un visiteur qui demande moins d'animations n'en reçoit aucune : le cadenas
   est alors ouvert d'emblée, l'information passe quand même. */
@media (prefers-reduced-motion: reduce) {
  .brochure-sceau__anse { transition: none; transform: translateY(-2.4px) rotate(26deg); }
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--light { background: var(--bg); color: var(--dark-2); }
.btn--light:hover { background: #fff; }
/* ---------------------------------------------------------------------
   LE REFLET DES CTA

   POURQUOI. Les boutons étaient justes mais inertes : un aplat, un
   changement de teinte au survol, rien qui attire l'œil pendant qu'on lit.
   Sur téléphone, où il n'y a pas de survol, ils ne bougeaient jamais.

   CE QUI EST FAIT. Un reflet étroit traverse le bouton toutes les cinq
   secondes et demie, en un peu plus d'une seconde — une lueur qui passe sur
   du verre, pas un clignotant. Le reste du temps, le bouton est immobile :
   c'est la rareté du geste qui le rend élégant, et non sa fréquence.
   S'y ajoutent un relief très léger (une ligne claire sur l'arête haute, une
   ombre portée qui s'approfondit au survol) et une flèche qui avance de 4 px.

   TROIS PRÉCAUTIONS.
   · Le reflet passe DERRIÈRE le texte, jamais dessus : le libellé est
     enveloppé dans un <span> placé au-dessus.
   · L'animation ne tourne QUE lorsque le bouton est à l'écran — le script
     s'en charge. Un reflet qui balaie en boucle un bouton hors du champ, sur
     un téléphone, c'est de la batterie dépensée pour personne.
   · Un visiteur qui demande moins d'animations n'en reçoit aucune.
   --------------------------------------------------------------------- */
.btn--primary.btn--eclat {
  /* Le dégradé va du clair vers le profond, en diagonale : l'œil lit une
     matière, pas un aplat. */
  background: linear-gradient(135deg, var(--mer-claire) 0%, var(--mer-profonde) 100%);
  border-color: transparent;
}
.btn--primary.btn--eclat:hover {
  background: linear-gradient(135deg, #3690B2 0%, #1F5C7D 100%);
}
.btn--eclat {
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 6px 18px rgba(27,79,107,.26), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              transform var(--t-fast), box-shadow var(--t);
}
/* Le texte et la flèche au-dessus du reflet. */
.btn--eclat > * { position: relative; z-index: 1; }
.btn--eclat::after {
  content: ""; position: absolute; z-index: 0;
  top: -60%; bottom: -60%; left: 0; width: 46%;
  /* UNE LUEUR, PAS UNE BARRE DE CHROME. À .72 au cœur et sur une bande
     étroite, le reflet avait des bords nets et un éclat métallique — brillant
     au mauvais sens du terme. Le cœur est redescendu et les épaulements
     s'étalent : on voit une lumière passer sur du verre. */
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,.22) 38%,
    rgba(255,255,255,.50) 50%, rgba(255,255,255,.22) 62%, rgba(255,255,255,.06) 78%,
    rgba(255,255,255,0) 100%);
  transform: translate3d(-180%, 0, 0) skewX(-18deg);
  pointer-events: none;
  /* RÉGULIER, ET NON ACCÉLÉRÉ. Avec une courbe d'accélération, le reflet
     traversait le bouton en 0,35 s puis rampait hors champ : on voyait un
     clignement, pas une lumière qui glisse. À vitesse constante, il met près
     d'une seconde à traverser — c'est là qu'il devient élégant. */
  animation: btn-eclat 5.6s linear infinite;
  animation-play-state: paused;   /* le script le lance quand le bouton est vu */
}
.btn--eclat.est-en-vue::after { animation-play-state: running; }
@keyframes btn-eclat {
  0%, 4% { transform: translate3d(-180%, 0, 0) skewX(-18deg); }
  30%    { transform: translate3d(420%, 0, 0) skewX(-18deg); }
  100%   { transform: translate3d(420%, 0, 0) skewX(-18deg); }
}
/* Sur fond clair, un reflet blanc ne se verrait pas : c'est le bleu de la
   charte qui joue le rôle du verre. */
.btn--light.btn--eclat {
  box-shadow: 0 6px 18px rgba(20,31,39,.16), inset 0 1px 0 rgba(255,255,255,.60);
}
.btn--light.btn--eclat::after {
  background: linear-gradient(100deg,
    rgba(92,116,136,0) 0%, rgba(92,116,136,.05) 22%, rgba(92,116,136,.13) 38%,
    rgba(92,116,136,.28) 50%, rgba(92,116,136,.13) 62%, rgba(92,116,136,.05) 78%,
    rgba(92,116,136,0) 100%);
}
.btn--eclat:hover { transform: translateY(-1px); }
.btn--primary.btn--eclat:hover {
  box-shadow: 0 14px 32px rgba(27,79,107,.42), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--light.btn--eclat:hover {
  box-shadow: 0 12px 28px rgba(20,31,39,.24), inset 0 1px 0 rgba(255,255,255,.70);
}
/* Au survol, le reflet revient plus souvent : le bouton répond. */
.btn--eclat:hover::after { animation-duration: 2.2s; }
/* L'appui reste un appui, même survolé : cette règle vient APRÈS celle du
   survol, sans quoi le bouton s'enfoncerait sans bouger. */
.btn--eclat:active { transform: translateY(1px); }

/* LA FLÈCHE AVANCE TOUTE SEULE.
   Au survol seulement, elle ne disait rien à qui est sur téléphone — c'est-à-
   dire à la plupart des visiteurs. Elle fait maintenant deux petits pas vers
   la droite puis revient, au même rythme que le reflet : le bouton respire au
   lieu d'attendre. Le survol, lui, la pousse plus loin et fige l'aller-retour,
   pour que le geste réponde. */
.btn__fleche {
  flex: 0 0 auto;
  transition: transform var(--t-fast);
  animation: btn-fleche 5.6s ease-in-out infinite;
  animation-play-state: paused;
}
.btn--eclat.est-en-vue .btn__fleche { animation-play-state: running; }
@keyframes btn-fleche {
  0%, 6%   { transform: translateX(0); }
  11%      { transform: translateX(5px); }
  16%      { transform: translateX(0); }
  21%      { transform: translateX(5px); }
  28%, 100% { transform: translateX(0); }
}

/* LE LIBELLÉ RESTE SUR UNE LIGNE. La flèche prend 25 px de large, et sur un
   écran de 390 px « Recevoir la brochure » basculait sur deux lignes. On rend
   ces 25 px en resserrant le rembourrage là où il est le plus large. */
.btn--eclat .btn__texte { white-space: nowrap; }
@media (max-width: 480px) {
  .btn--lg.btn--eclat { padding-left: 20px; padding-right: 20px; }
}
.btn--eclat:hover .btn__fleche { animation: none; transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) {
  .btn--eclat::after { animation: none; opacity: 0; }
  .btn--eclat:hover, .btn--eclat:active { transform: none; }
  .btn__fleche, .btn--eclat:hover .btn__fleche {
    transition: none; transform: none; animation: none;
  }
}

.btn--sm { padding: 12px 22px; font-size: 11.5px; }
.btn--lg { padding: 20px 42px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------- Révélation au scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   NAVIGATION
   ===================================================================== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(246,244,239,.94);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px);
  height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__brand { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.nav__brand-logo { position: relative; display: block; width: 132px; height: 21px; }
.nav__logo {
  position: absolute; top: 0; left: 0; height: 21px; width: auto; max-width: none;
  transition: opacity var(--t);
}
.nav__logo--dark { opacity: 0; }
.nav.is-scrolled .nav__logo--light { opacity: 0; }
.nav.is-scrolled .nav__logo--dark { opacity: 1; }
.nav__brand-sub {
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.72); transition: color var(--t);
}
.nav.is-scrolled .nav__brand-sub { color: var(--muted-fg); }

.nav__links { display: flex; gap: 32px; }
.nav__links a {
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.86); text-decoration: none; transition: color var(--t);
}
.nav.is-scrolled .nav__links a { color: var(--muted-fg); }
.nav__links a:hover { color: var(--accent-light); }
.nav.is-scrolled .nav__links a:hover { color: var(--accent); }

.nav__actions { display: flex; align-items: center; gap: 14px; }
.nav__cta { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.nav__cta:hover { background: #fff; color: var(--dark-2); border-color: #fff; }
.nav.is-scrolled .nav__cta { background: var(--accent); border-color: var(--accent); color: #fff; }
.nav.is-scrolled .nav__cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.nav__burger {
  display: none; width: 40px; height: 40px; background: none; border: 0;
  flex-direction: column; justify-content: center; gap: 5px; padding: 0;
}
.nav__burger span { display: block; height: 1px; background: #fff; transition: background var(--t), transform var(--t), opacity var(--t); }
.nav.is-scrolled .nav__burger span { background: var(--fg); }
.nav__burger[aria-expanded="true"] span { background: var(--fg); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__mobile {
  display: none; flex-direction: column; gap: 4px;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px clamp(20px, 4vw, 48px) 26px;
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a {
  font-family: var(--font-serif); font-size: 22px; color: var(--fg);
  text-decoration: none; padding: 11px 0; border-bottom: 1px solid var(--border);
}
.nav__mobile .btn { margin-top: 18px; }

@media (max-width: 940px) {
  .nav__links { display: none; }
  .nav__actions { display: none; }
  .nav__burger { display: flex; }
}

/* =====================================================================
   HERO — même architecture que la page du chalet : bloc centré
   verticalement, colonne de texte à gauche, carte de capture à droite.
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 7rem clamp(20px, 4vw, 48px) 5rem;
  color: var(--bg);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* --- Fond animé -------------------------------------------------------
   La photo reste la couche de base : elle s'affiche immédiatement, sert
   d'affiche pendant le chargement et de solution de repli partout où la
   vidéo ne part pas (mobile, données réduites, animations désactivées).
   La vidéo se fond par-dessus une fois qu'elle joue vraiment.          */
.hero__video {
  position: absolute; inset: 0; overflow: hidden;
  opacity: 0; transition: opacity 900ms ease-out;
  pointer-events: none;
}
.hero__video.is-playing { opacity: 1; }

/* Un iframe ne se recadre pas avec object-fit : on force un 16/9 plus
   grand que la fenêtre, centré, pour obtenir l'équivalent d'un cover. */
.hero__video iframe,
.hero__video video {
  position: absolute; left: 50%;
  width: 100vw; height: 56.25vw;
  min-width: 177.78vh; min-height: 100vh;
  border: 0; pointer-events: none;
}
.hero__video video { top: 50%; transform: translate(-50%, -50%); }
/* L'iframe est agrandie de moitié et remontée : le bandeau de titre du
   lecteur YouTube passe hors cadre, en haut. */
.hero__video iframe { top: 44%; transform: translate(-50%, -50%) scale(1.5); }
.hero__video video { object-fit: cover; }

@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(20,31,39,.80) 0%, rgba(20,31,39,.56) 40%, rgba(20,31,39,.20) 72%, rgba(20,31,39,.10) 100%),
    linear-gradient(to top, rgba(20,31,39,.72) 0%, rgba(20,31,39,.34) 42%, rgba(20,31,39,.24) 74%, rgba(20,31,39,.56) 100%);
}

.hero__grid {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 460px; gap: 4rem;
  align-items: center;
  animation: heroIn 1.2s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .hero__grid { animation: none; } }

.hero__left { max-width: 760px; }

.hero__pill {
  display: flex; width: fit-content; align-items: center; gap: .75rem;
  padding: .6rem 1.2rem;
  border: 1px solid rgba(255,255,255,.4); border-radius: 100px;
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.94); margin-bottom: 1.9rem;
}
.hero__pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 8px var(--accent-light);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero__kicker {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(.85rem, 1vw, 1rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--accent-light);
  width: fit-content;
  margin-bottom: 1.1rem; padding-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.28);
}

.hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem);
  line-height: 1.03; letter-spacing: .004em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
}
.hero__title .italic { font-style: italic; font-weight: 400; color: var(--accent-light); }

.hero__subtitle {
  font-size: clamp(1.02rem, 1.3vw, 1.18rem); font-weight: 300;
  line-height: 1.55; color: rgba(246,244,239,.9);
  max-width: 560px; margin: 0;
}

.hero__features { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-direction: column; gap: .85rem; }
.hero__features li {
  display: flex; align-items: center; gap: .75rem;
  font-size: .95rem; font-weight: 300; color: rgba(246,244,239,.92);
}
.hero__features svg { color: var(--accent-light); flex-shrink: 0; }

/* --- visuel du bien, dans le flux (écrans étroits) --- */
.hero__shot { display: none; position: relative; margin: 1.75rem 0 0; }
.hero__shot img, .hero__shot video {
  width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block;
  border-radius: var(--radius); box-shadow: 0 18px 44px rgba(20,31,39,.42);
}
.hero__shot-tag {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(20,31,39,.62); backdrop-filter: blur(8px);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: #fff;
}
.hero__shot-tag .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-light); box-shadow: 0 0 8px var(--accent-light);
}
/* Le tap ne doit pas réveiller les contrôles natifs d'iOS par-dessus les
   nôtres : la vidéo elle-même ne reçoit aucun pointeur. */
.hero__shot video { pointer-events: none; }
.hero__shot-cmd {
  position: absolute; right: 12px; bottom: 12px;
  display: flex; gap: 8px; z-index: 2;
}
.hero__shot-btn {
  width: 40px; height: 40px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(20,31,39,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18); color: #fff;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.hero__shot-btn:hover, .hero__shot-btn:active {
  background: rgba(20,31,39,.92); border-color: var(--accent-light); transform: scale(1.05);
}
.hero__shot-btn .i-son { display: none; }
.hero__shot-btn.is-audible .i-muet { display: none; }
.hero__shot-btn.is-audible .i-son { display: block; }
@media (max-width: 1200px) { .hero__shot { display: block; } }

/* --- La surface entière ouvre le plein écran ------------------------------
   Le <video> ne reçoit aucun pointeur (contrôles d'iOS) : c'est ce bouton,
   étendu sur toute la vignette, qui reçoit le tap. Il reste discret — un
   dégradé du bas et un libellé — pour ne pas masquer l'image, et il s'assombrit
   au contact. */
.hero__shot-ouvrir {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: flex-end; gap: 12px;
  padding: 1.1rem 1.15rem;
  border: 0; border-radius: var(--radius); cursor: pointer;
  background: linear-gradient(to top, rgba(20,31,39,.80) 0%, rgba(20,31,39,.34) 38%, rgba(20,31,39,0) 72%);
  color: #fff; text-align: left; font: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background var(--t);
}
.hero__shot-ouvrir:hover, .hero__shot-ouvrir:active {
  background: linear-gradient(to top, rgba(20,31,39,.88) 0%, rgba(20,31,39,.48) 46%, rgba(20,31,39,.12) 86%);
}
.hero__shot-ouvrir:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.hero__shot-ouvrir__rond {
  flex: 0 0 auto;
  /* 46 px sur une vignette de 350 : le triangle mangeait l'image. 38 px
     suffisent à se voir sans écraser la photo. */
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.17); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.34); color: #fff;
  transition: transform var(--t), background var(--t);
}
.hero__shot-ouvrir:hover .hero__shot-ouvrir__rond,
.hero__shot-ouvrir:active .hero__shot-ouvrir__rond {
  transform: scale(1.07); background: rgba(255,255,255,.28);
}
.hero__shot-ouvrir__texte {
  display: flex; flex-direction: column; line-height: 1.25;
  font-size: 13.5px; font-weight: 600; letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(20,31,39,.55);
}
.hero__shot-ouvrir__fin {
  font-size: 10px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; opacity: .82; margin-top: 3px;
}
/* Le bouton du son reste au-dessus de la surface cliquable : on peut mettre le
   son sans quitter la page. */
.hero__shot-cmd { z-index: 3; }

/* La lecture automatique a été REFUSÉE (mode économie d'énergie, navigateur
   intégré de Facebook ou d'Instagram). Sans ce repère, il ne restait qu'une
   affiche immobile et rien ne disait quoi faire. */
.hero__shot.is-arretee .hero__shot-ouvrir {
  background: linear-gradient(to top, rgba(20,31,39,.84) 0%, rgba(20,31,39,.52) 50%, rgba(20,31,39,.30) 100%);
  align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  text-align: center;
}
/* Lecture refusée : là, le rond DOIT se voir — c'est la seule chose à faire. */
.hero__shot.is-arretee .hero__shot-ouvrir__rond { width: 56px; height: 56px; }
.hero__shot.is-arretee .hero__shot-ouvrir__texte { align-items: center; }

/* --- Pilule « Voir la visite », sur grand écran --------------------------- */
.hero__visite {
  display: none;
  align-items: center; gap: 11px;
  margin: 1.6rem 0 0; padding: 11px 20px 11px 13px;
  border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,.10); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.26);
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.hero__visite:hover {
  background: rgba(255,255,255,.17); border-color: var(--accent-light);
  transform: translateY(-1px);
}
.hero__visite:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.hero__visite__rond {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; flex: 0 0 auto;
}
.hero__visite__duree {
  font-size: 10.5px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; opacity: .72;
  padding-left: 11px; margin-left: 2px;
  border-left: 1px solid rgba(255,255,255,.26);
}
/* Elle ne sert qu'au-dessus de 1200 px : en dessous, la vignette elle-même est
   le bouton, et deux portes pour la même pièce se contredisent. */
@media (min-width: 1201px) { .hero__visite { display: inline-flex; } }

/* --- Couche « grand écran » de la visite ---------------------------------- */
.visite {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: #0b1216;
}
.visite[hidden] { display: none; }
.visite__scene { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* La vidéo déplacée ici reprend des dimensions de LECTEUR, et non celles de la
   vignette : elle doit tenir l'écran entier sans se faire rogner. Le
   `!important` surcharge la règle de la vignette, qui impose un 3/2 recadré. */
.visite__scene video {
  width: 100% !important; height: 100% !important;
  max-width: 100vw; max-height: 100vh;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  border-radius: 0 !important; box-shadow: none !important;
  background: #0b1216;
  pointer-events: auto !important;   /* ici, les contrôles natifs servent */
}
.visite__fermer {
  position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px;
  width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11,18,22,.62); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  transition: background var(--t), border-color var(--t);
}
.visite__fermer:hover { background: rgba(11,18,22,.92); border-color: var(--accent-light); }
/* ELLE RESTE VISIBLE, MÊME EN VRAI PLEIN ÉCRAN. On l'avait d'abord masquée,
   en supposant que le navigateur dessinait sa propre sortie : c'est faux sur
   Chrome pour Android, qui n'affiche rien et attend le geste « retour ».
   Masquer la nôtre enfermait le visiteur dans la vidéo. */
.visite:fullscreen .visite__fermer,
.visite:-webkit-full-screen .visite__fermer { z-index: 2; }
body.visite-ouverte { overflow: hidden; }

/* --- carte de capture --- */
.hero__form-wrap { position: relative; }
.hero__form-card {
  position: relative;
  background: rgba(246,244,239,.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--fg);
  padding: 2.5rem 2.25rem;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(20,31,39,.45);
}
.hero__form-card::before {
  content: ''; position: absolute; top: -1px; left: 2rem;
  width: 60px; height: 2px; background: var(--accent);
}
.hero__form-card .eyebrow { margin-bottom: 1rem; }
.hero__form-title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.35rem, 1.7vw, 1.6rem); line-height: 1.2;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--fg); margin: 0 0 .75rem;
}
.hero__form-lede { font-size: .95rem; line-height: 1.55; color: var(--muted-fg); margin: 0 0 1.75rem; }
.hero__form-perks { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: .7rem; }
.hero__form-perks li { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; line-height: 1.4; color: var(--muted-fg); }
.hero__form-perks svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.hero__form-trust {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .75rem; color: var(--muted-fg); margin: 1rem 0 0;
}
.hero__form-trust svg { color: var(--accent); flex-shrink: 0; }

.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  color: rgba(246,244,239,.7); font-size: .7rem; letter-spacing: .28em;
  text-transform: uppercase; text-decoration: none;
}
.hero__scroll:hover { color: var(--bg); }
.hero__scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, rgba(246,244,239,.6), transparent);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine { 0%, 100% { transform: scaleY(1); opacity: .7; } 50% { transform: scaleY(.6); opacity: .3; } }

@media (max-width: 1200px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.5rem; max-width: 600px; }
}
@media (max-width: 760px) {
  .hero { padding: 6rem 1.25rem 3rem; align-items: flex-start; min-height: auto; }
  .hero__grid { gap: 1.5rem; }
  .hero__pill { font-size: .6rem; padding: .45rem .85rem; letter-spacing: .15em; margin-bottom: 1.1rem; }
  .hero__kicker { margin-bottom: .8rem; padding-bottom: .6rem; }
  /* Centré et plus grand, comme sur le Cambre d'Aze : sur un téléphone, un
     titre aligné à gauche sur trois lignes courtes laisse une colonne vide à
     droite, et le hero perd sa tenue. Le texte du hero est centré ; la carte,
     elle, reste alignée à gauche — on lit une promesse centrée, on remplit un
     formulaire aligné. */
  .hero__left { text-align: center; }
  .hero__pill, .hero__kicker { margin-left: auto; margin-right: auto; }
  .hero__kicker { display: table; }
  /* Taille FLUIDE, et non une valeur fixe.
     Le titre doit tenir sur DEUX lignes : « Villa vue mer » puis « à Cassis ».
     Une troisième ligne casse la tenue du hero, et c'est elle qui limite, pas
     le débordement. Mesuré ligne par ligne sur l'étendue réelle des glyphes,
     le plafond va de 38,5 px (320) à 53,5 px (430) — d'où cette pente, qui
     s'y tient avec un pixel de marge.
     « vue mer » a laissé de la place : l'ancien titre plafonnait 7 px plus
     bas à cause du seul mot « contemporaine ». */
  .hero__title { font-size: clamp(2.3rem, calc(13.6vw - 6px), 3.3rem); line-height: .96; margin-bottom: .9rem; }
  .hero__subtitle { font-size: .95rem; margin-left: auto; margin-right: auto; max-width: 34ch; }
  .hero__form-card { text-align: left; }
  .hero__features { display: none; }   /* déjà résumé dans le sous-titre */
  .hero__form-card { padding: 1.75rem 1.4rem; }
  .hero__scroll { display: none; }
}

/* =====================================================================
   BENTO — carte d'identité
   ===================================================================== */
.bento { padding: clamp(76px, 10vw, 132px) 0; background: var(--bg); }
.bento__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 28px; margin-bottom: clamp(36px, 5vw, 56px);
}
.bento__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 14px; }
.tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 22px 24px 20px; min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
}
/* L'icône occupe le haut de la tuile : sans elle, le chiffre calé en bas
   laissait une large plage blanche au-dessus. */
.tile__icon { color: var(--tile-c, var(--accent)); }
.tile__icon svg { width: 22px; height: 22px; }
.tile--dark .tile__icon { color: var(--accent-light); }
/* Apparition en cascade : les tuiles montent l'une après l'autre quand la
   section entre dans le champ. Sans elle, huit tuiles claires arrivaient
   d'un bloc et se lisaient comme un mur. */
.bento .tile { opacity: 0; transform: translateY(20px); transition: opacity .55s ease-out, transform .55s cubic-bezier(.22,.61,.36,1); }
.bento.is-in .tile { opacity: 1; transform: none; }
.bento.is-in .tile:nth-child(1)  { transition-delay: .02s }
.bento.is-in .tile:nth-child(2)  { transition-delay: .07s }
.bento.is-in .tile:nth-child(3)  { transition-delay: .12s }
.bento.is-in .tile:nth-child(4)  { transition-delay: .17s }
.bento.is-in .tile:nth-child(5)  { transition-delay: .22s }
.bento.is-in .tile:nth-child(6)  { transition-delay: .27s }
.bento.is-in .tile:nth-child(7)  { transition-delay: .32s }
.bento.is-in .tile:nth-child(8)  { transition-delay: .37s }
.bento.is-in .tile:nth-child(9)  { transition-delay: .42s }
.bento.is-in .tile:nth-child(10) { transition-delay: .47s }
.bento.is-in .tile:nth-child(n+11) { transition-delay: .52s }
@media (prefers-reduced-motion: reduce) {
  .bento .tile { opacity: 1; transform: none; transition: none; }
}

/* Respirations photographiques réservées aux écrans étroits : au-dessus, la
   grille en quatre colonnes tient déjà toute seule. */
.tile--respiration { display: none; }

.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--full { grid-column: span 4; min-height: 0; }
.tile--full img { min-height: 0; height: auto; aspect-ratio: 4 / 1.05; }
.tile--photo { padding: 0; overflow: hidden; min-height: 240px; }
/* La photo haute se cale sur les deux rangées de tuiles. Sans position
   absolue, elle prend la hauteur naturelle de l'image (390 px pour un
   1600x1066) et étire les tuiles voisines, ce qui rouvre du vide. */
.tile--tall.tile--photo { position: relative; min-height: 0; }
.tile--tall.tile--photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  min-height: 0; object-fit: cover;
}
.tile--photo img { width: 100%; height: 100%; min-height: 240px; object-fit: cover; transition: transform var(--t-slow); }
.tile--photo:hover img { transform: scale(1.04); }
.tile--dark { background: var(--dark); border-color: var(--dark); }
.tile__key {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(32px, 3.2vw, 43px); line-height: 1; letter-spacing: -.02em;
  color: var(--fg); margin: 14px 0 6px;
}
.tile__key span { font-size: .44em; letter-spacing: .02em; }
.tile__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); }
.tile--dark .tile__key { color: var(--bg); }
.tile--dark .tile__label { color: var(--accent-light); }

@media (max-width: 1020px) {
  .bento__grid { grid-template-columns: repeat(2, 1fr); }
  .tile--tall { grid-row: span 1; }
  .tile--full { grid-column: span 2; }
  .tile--full img { aspect-ratio: 3 / 1.4; }
}
@media (max-width: 1020px) {
  /* Les photos passent en bandeau pleine largeur : elles coupent la
     succession de tuiles claires au lieu de s'y fondre. */
  .tile--respiration { display: block; grid-column: span 2; min-height: 0; }
  .tile--respiration img { width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; }
}
@media (max-width: 580px) {
  /* DEUX colonnes maintenues, et non une seule : empilées, les huit tuiles
     claires formaient un long mur blanc au défilement. C'était le reproche. */
  .bento__grid { gap: 10px; }
  .tile { padding: 16px 16px 14px; min-height: 124px; }
  .tile__icon svg { width: 19px; height: 19px; }
  .tile__key { font-size: 27px; margin: 10px 0 5px; }
  .tile__label { font-size: 10.5px; letter-spacing: .12em; }
  .tile--wide, .tile--full, .tile--respiration { grid-column: span 2; }
  .tile--photo { min-height: 0; }
  .tile--photo img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .tile--tall.tile--photo { position: relative; }
  .tile--tall.tile--photo img { position: static; aspect-ratio: 3 / 2; }
  .tile--full img { aspect-ratio: 3 / 1.6; }
}

/* =====================================================================
   STORY — sections éditoriales
   ===================================================================== */
.story { padding: clamp(76px, 10vw, 132px) 0; background: var(--bg-alt); }
.story--plain { background: var(--bg); }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5.5vw, 80px); align-items: center; }
.story--reverse .story__media { order: 2; }
.story__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-sm); }
.story__media--wide img { aspect-ratio: 3/2; }
.story__body p { font-size: 16.5px; line-height: 1.8; color: var(--muted-fg); margin: 22px 0 0; }
.story__stats { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--border-strong); }
.story__stat-k { font-family: var(--font-serif); font-size: 34px; line-height: 1; color: var(--accent); }
.story__stat-l { font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted-fg); margin-top: 6px; }

@media (max-width: 900px) {
  .story__grid { grid-template-columns: 1fr; }
  .story--reverse .story__media { order: 0; }
  .story__media img { aspect-ratio: 3/2; }
}

/* =====================================================================
   GALERIE
   ===================================================================== */
.gallery { padding: clamp(76px, 10vw, 132px) 0; background: var(--bg); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 12px; margin-top: clamp(36px, 5vw, 56px); }
.gallery__item {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  cursor: zoom-in; background: var(--bg-alt); border: 0; padding: 0;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery__item img { aspect-ratio: 3/2; }
.gallery__item--wide { grid-column: span 2; }
.gallery__item--wide img { aspect-ratio: 3/1.02; }
.gallery__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(24,36,45,.72), transparent);
  color: #fff; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  text-align: left; opacity: 0; transition: opacity var(--t);
}
.gallery__item:hover .gallery__cap, .gallery__item:focus-visible .gallery__cap { opacity: 1; }

@media (max-width: 900px) {
  .gallery__grid { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide img { aspect-ratio: 3/1.6; }
}
@media (max-width: 520px) {
  .gallery__grid { grid-template-columns: 1fr; }
  .gallery__item--wide { grid-column: span 1; }
  .gallery__item--wide img { aspect-ratio: 3/2; }
}

/* =====================================================================
   NIVEAUX
   ===================================================================== */
.levels { padding: clamp(76px, 10vw, 132px) 0; background: var(--dark-2); }
.levels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.level { background: var(--dark-3); border-radius: var(--radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.level img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.level__body { padding: 28px 26px 32px; flex: 1; }
.level__n { font-family: var(--font-serif); font-size: 13px; letter-spacing: .3em; color: var(--accent-light); margin-bottom: 12px; }
.level__t { font-family: var(--font-serif); font-size: 26px; font-weight: 400; line-height: 1.15; color: var(--bg); margin: 0 0 12px; }
.level__p { font-size: 14.5px; line-height: 1.7; color: rgba(246,244,239,.68); margin: 0; }
@media (max-width: 900px) { .levels__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   LE LIEU
   ===================================================================== */
.place { position: relative; padding: clamp(88px, 12vw, 152px) 0; background: var(--dark-2); overflow: hidden; }
.place__bg { position: absolute; inset: 0; }
.place__bg img { width: 100%; height: 100%; object-fit: cover; }
.place__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(24,36,45,.96) 0%, rgba(24,36,45,.90) 42%, rgba(24,36,45,.62) 72%, rgba(24,36,45,.38) 100%); }
.place__inner { position: relative; max-width: 620px; }
.place__list { list-style: none; margin: 34px 0 0; padding: 0; }
.place__list li {
  display: flex; justify-content: space-between; gap: 22px;
  padding: 14px 0; border-bottom: 1px solid rgba(246,244,239,.16);
  font-size: 14.5px; color: var(--bg);
}
.place__list li span { color: rgba(246,244,239,.6); white-space: nowrap; }

.place__strip { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.place__shot { margin: 0; }
.place__shot img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-sm); }
.place__shot figcaption {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-light); margin-top: 12px;
}
@media (max-width: 820px) {
  .place__strip { grid-template-columns: 1fr; gap: 20px; }
}

/* =====================================================================
   SPECS
   ===================================================================== */
.specs { padding: clamp(76px, 10vw, 132px) 0; background: var(--bg-alt); }
.specs__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5.5vw, 80px); align-items: stretch; }
.specs__media { position: relative; min-height: 460px; }
.specs__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.specs__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-strong); }
.specs__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.specs__k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-fg); }
.specs__v { font-size: 15.5px; color: var(--fg); text-align: right; }
@media (max-width: 900px) {
  .specs__grid { grid-template-columns: 1fr; }
  .specs__media { position: static; min-height: 0; }
  .specs__media img { position: static; aspect-ratio: 3/2; height: auto; }
}

/* =====================================================================
   PROCESS
   ===================================================================== */
.process { padding: clamp(76px, 10vw, 132px) 0; background: var(--bg); }
.process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.step { padding-top: 24px; border-top: 1px solid var(--border-strong); }
.step__n { font-family: var(--font-serif); font-size: 46px; line-height: 1; color: var(--accent); margin-bottom: 14px; }
.step__t { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--fg); margin: 0 0 8px; }
.step__p { font-size: 14.5px; line-height: 1.7; color: var(--muted-fg); margin: 0; }
@media (max-width: 900px) { .process__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .process__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   PRIX / CTA FINAL
   ===================================================================== */
.price { position: relative; padding: clamp(88px, 12vw, 152px) 0; background: var(--dark); overflow: hidden; }
.price__bg { position: absolute; inset: 0; }
.price__bg img { width: 100%; height: 100%; object-fit: cover; }
.price__bg::after { content: ""; position: absolute; inset: 0; background: rgba(30,42,52,.88); }
.price__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; }
.price__lede { font-size: 16.5px; line-height: 1.75; color: rgba(246,244,239,.74); margin: 22px auto 36px; max-width: 54ch; }
.price__note {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(246,244,239,.6); margin-top: 24px;
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--dark-2); border-top: 1px solid rgba(246,244,239,.1); padding: 56px 0 44px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.4fr; gap: 32px; }
.footer__logo { width: 152px; height: auto; }
.footer__tagline { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,244,239,.56); margin-top: 8px; }
.footer__info p { margin: 0 0 4px; font-size: 14px; color: rgba(246,244,239,.72); }
.footer__info-title { font-size: 10.5px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-light) !important; margin-bottom: 10px !important; }
.footer__wa {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 9px 18px; background: #25D366; color: #fff; border-radius: 100px;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500;
  text-decoration: none; transition: filter var(--t-fast);
}
.footer__wa:hover { filter: brightness(1.08); }

.footer__credits p { margin: 0 0 4px; font-size: 12.5px; color: rgba(246,244,239,.5); }
.footer__credits a { color: rgba(246,244,239,.7); }
.footer__credits-photo { font-size: 11px !important; line-height: 1.6; color: rgba(246,244,239,.42) !important; margin-top: 10px !important; }
@media (max-width: 900px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__inner { grid-template-columns: 1fr; } }

/* =====================================================================
   MODAL BROCHURE
   ===================================================================== */
.modal { position: fixed; inset: 0; z-index: 90; display: none; }
.modal.is-open { display: block; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(24,36,45,.72); backdrop-filter: blur(4px); }
.modal__panel {
  position: relative; max-width: 560px; width: calc(100% - 2rem);
  margin: 6vh auto; background: var(--bg);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* `vh` sur iOS designe le GRAND viewport, celui qu'on a quand les barres du
   navigateur sont escamotees. Barres affichees — c'est-a-dire a l'ouverture,
   c'est-a-dire toujours ici — le panneau depassait donc sous la barre d'outils,
   et le bouton « Continuer » se retrouvait coupe en deux.
   `svh` designe le PETIT viewport, barres comprises : le panneau tient alors
   quoi qu'il arrive. Declare apres, il ne sert qu'aux navigateurs qui le
   comprennent ; les autres gardent `vh`. */
@supports (height: 100svh) {
  .modal__panel { margin: 6svh auto; max-height: 88svh; }
}
.modal__close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px;
  background: none; border: 0; color: var(--muted-fg); font-size: 26px; line-height: 1;
}
.modal__head { padding: 44px 40px 0; }
.modal__head .eyebrow { font-size: 10.5px; margin-bottom: 14px; }
.modal__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 31px); line-height: 1.14;
  letter-spacing: .004em; text-transform: uppercase;
  color: var(--fg); margin: 0 0 14px;
}
.modal__lede { font-size: 15.5px; line-height: 1.6; color: var(--muted-fg); margin: 0; }
.modal__form { padding: 28px 40px 36px; min-height: 220px; position: relative; }
@media (max-width: 520px) {
  .modal__head { padding: 34px 24px 0; }
  .modal__form { padding: 22px 24px 28px; }
}

/* Ecrans courts : la hauteur manque, pas la largeur.
   
   Ce qu'on rend au formulaire vient de l'EN-TETE, et c'est deliberé : il
   repete l'argumentaire a quelqu'un qui vient de cliquer « recevez la
   brochure ». La personne a deja decide ; ce qu'elle attend, c'est la
   premiere question et le bouton pour y repondre. Sur un telephone, cet
   en-tete occupait plus du tiers de l'ecran. */
@media (max-height: 760px) {
  @supports (height: 100svh) {
    .modal__panel { margin: 3svh auto; max-height: 94svh; }
  }
  .modal__head { padding: 22px 22px 0; }
  .modal__head .eyebrow { margin-bottom: 10px; }
  .modal__title { font-size: clamp(19px, 4.6vw, 23px); margin-bottom: 8px; }
  .modal__lede { font-size: 13.5px; line-height: 1.45; }
  .modal__form { padding: 14px 22px 18px; min-height: 160px; }
  .modal__close { top: 4px; right: 4px; width: 36px; height: 36px; }
}

/* Tres courts : le chapeau disparait. Il porte « acces immediat, sans
   engagement » — un argument, pas une consigne : la personne le lira sur la
   page, pas dans la boite ou elle remplit deja le formulaire. Mieux vaut cet
   argument en moins qu'un bouton qu'il faut aller chercher. */
@media (max-height: 660px) {
  @supports (height: 100svh) {
    .modal__panel { margin: 2svh auto; max-height: 96svh; }
  }
  .modal__lede { display: none; }
  .modal__head { padding: 18px 22px 0; }
  .modal__head .eyebrow { margin-bottom: 8px; }
  .modal__title { font-size: clamp(18px, 4.4vw, 22px); margin-bottom: 0; }
  .modal__form { padding: 12px 22px 16px; }
}

/* Le formulaire est servi par Prodigio dans un iframe : il apporte ses
   propres styles. On se contente de l'empêcher de déborder de la modale,
   sa hauteur étant posée par le script à la réception de son message. */
#brochureFormContainer iframe { max-width: 100% !important; }
/* Tant que l'iframe n'a pas annoncé sa hauteur, on le masque sans le sortir
   du flux : visibility lui conserve sa boîte, donc un vrai viewport, donc la
   capacité de se mesurer. L'attente est posée par-dessus. */
#prodigio-form:not(.is-ready) { visibility: hidden; }

/* Cadre REPLIE : le repli WhatsApp occupe le flux a sa place, mais le cadre
   garde sa largeur et sa hauteur reelles, hors du flux. C'est ce qui lui
   permet de continuer a annoncer sa hauteur — et donc de reprendre la main si
   le formulaire finit par arriver. Mis en display:none, il ne mesurait plus
   rien et le repli etait definitif, alors qu'il se veut reversible. */
#prodigio-form.is-replie {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

/* ---------------------------------------------------------------------
   Esquisse du formulaire

   Un mot centre dans une boite vide de 520 px de haut fait paraitre
   l'attente plus longue qu'elle n'est : l'oeil n'a rien a quoi se
   raccrocher. L'esquisse montre tout de suite la FORME de ce qui arrive —
   un titre, quatre choix, un bouton — et le cadre se pose dessus quand il
   est pret. Elle disparait avec le mot d'attente, que main.js retire des
   que le formulaire annonce sa hauteur.
   --------------------------------------------------------------------- */
.modal__esquisse {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  pointer-events: none;
}
.modal__esquisse > * {
  display: block; border-radius: 10px;
  background: linear-gradient(
    100deg,
    rgba(20,31,39,.045) 30%,
    rgba(20,31,39,.085) 50%,
    rgba(20,31,39,.045) 70%
  );
  background-size: 300% 100%;
  animation: esquisse 1.6s ease-in-out infinite;
}
.modal__esquisse-ligne--titre { height: 22px; width: 72%; margin-bottom: 10px; }
.modal__esquisse-choix { height: 52px; }
.modal__esquisse-bouton { height: 52px; margin-top: 6px; border-radius: 10px; }

@keyframes esquisse {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

/* Mouvement reduit : on garde la forme, on retire l'animation. */
@media (prefers-reduced-motion: reduce) {
  .modal__esquisse > * { animation: none; }
}

.modal__spinner {
  position: absolute; left: 0; right: 0; bottom: 18px;
  margin: 0; text-align: center;
  color: var(--soft-fg); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}

/* =====================================================================
   STICKY CTA
   ===================================================================== */
.sticky-cta {
  position: fixed; z-index: 45; opacity: 0; visibility: hidden;
  transition: opacity var(--t), visibility var(--t), transform var(--t);
  transform: translateY(10px);
}
.sticky-cta.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (min-width: 761px) {
  .sticky-cta { right: 28px; bottom: 28px; }
  .sticky-cta .btn { box-shadow: var(--shadow-lg); }
}
@media (max-width: 760px) {
  .sticky-cta { left: 0; right: 0; bottom: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(246,244,239,.96); backdrop-filter: blur(12px); border-top: 1px solid var(--border); }
  .sticky-cta .btn { width: 100%; }
}

/* =====================================================================
   LIGHTBOX
   ===================================================================== */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; }
.lightbox.is-open { display: block; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(18,27,34,.96); }
.lightbox__figure {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px; padding: 64px 20px;
}
.lightbox__img { max-width: 92vw; max-height: 78vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox__cap { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.66); text-align: center; }
.lightbox__btn {
  position: absolute; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 20px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox__prev { left: 12px; } .lightbox__next { right: 12px; }
  .lightbox__btn { width: 42px; height: 42px; }
}

/* ---------- Accessibilité ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Ancres : compenser la navigation fixe ---------- */
#bien, #galerie, #niveaux, #lieu, #process { scroll-margin-top: 88px; }

/* =====================================================================
   LES DEUX MOMENTS DE CAPTURE — une touche, pas une refonte
   La carte du hero et la modale sont les deux seuls endroits ou l'on demande
   quelque chose au visiteur. Deux retouches, et rien d'autre : le surtitre
   passe en terre cuite, et le gras souligne ce qui decide d'un clic — ce
   qu'on recoit, en combien de temps. Le bleu-gris, les coches, le bouton et
   le liseré de la carte ne bougent pas.

   Ce bloc est en FIN de feuille a dessein : les regles de la carte vivent
   plus bas que les utilitaires, et une declaration posee plus haut perdrait
   silencieusement.

   Jost s'arrete a 500 : ce gras est un fichier de police deja charge, jamais
   un gras synthetique du navigateur, et aucune requete n'est ajoutee. Les
   titres restent en Cormorant sans gras — a cette taille, 500 et 600 ne se
   distinguent pas, un gras invisible n'est pas un gras.
   ===================================================================== */
.eyebrow--terre { color: var(--terre); }
.hero__form-lede strong,
.hero__form-perks strong,
.modal__lede strong { font-weight: 500; color: var(--fg); }