/* ============================================================
   THE CIRCLE SAMUI — D4 "Apple tropical — bis"
   Titres en serif éditorial (Cormorant — esprit du logo), corps en grotesque.
   Charte officielle The Circle Samui : terracotta #C0754C, olive #717055, crème #E8DCD0.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --ink: #1c1a17;
  --ink-soft: #3f3b35;
  --ink-mute: #756f66;
  /* Le gris de texte discret ci-dessus vaut 4,97 sur --paper, mais tombe à 4,25
     sur --cream-2 : sous le seuil AA. Même teinte assombrie juste ce qu'il faut
     pour rendre au crème la discrétion qu'il a sur le blanc (5,0). */
  --ink-mute-cream: #69645c;
  --line: #e8e3da;
  --line-soft: #f2efe9;
  --paper: #ffffff;
  --paper-2: #faf7f2;
  --paper-3: #fbf9f5;
  /* Charte officielle The Circle Samui — terracotta = accent principal (var. « lagon » conservée pour les 37 références) */
  --lagon: #C0754C;        /* terracotta — accent principal */
  --lagon-deep: #9F5C37;   /* terracotta foncé (hover) */
  --lagon-soft: #EBD8C8;   /* terracotta clair (fonds doux) */
  --olive: #717055;        /* olive — accent secondaire (subtil) */
  --olive-deep: #565538;
  --olive-soft: #E3E1D6;
  --cream: #E8DCD0;        /* crème — fonds chauds */
  --cream-2: #F4ECE3;      /* crème clair */
  --danger: #9a3a2e;

  /* Typographies — serif éditorial pour les titres (esprit Dream Avenue du logo), grotesque pour le corps.
     Polices de marque Dream Avenue / Gilmer (commerciales) à embarquer au build ; ici fallbacks proches. */
  --font-display: "Cormorant Garamond", "Hanken Grotesk", Georgia, serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --maxw: 1320px;
  --gut: clamp(20px, 5vw, 88px);

  --fs-display: clamp(2.6rem, 8.2vw, 7.4rem);
  --fs-h2: clamp(1.9rem, 4.4vw, 3.6rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.9rem);
  --fs-lead: clamp(1.05rem, 1.7vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-label: 0.72rem;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --header-h: 72px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--lagon);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 11vw, 150px); }
.section--tight { padding-block: clamp(48px, 7vw, 96px); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow--mute { color: var(--ink-mute); }

h1, h2 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.005em; font-weight: 500; }
h3 { line-height: 1.1; letter-spacing: -0.015em; font-weight: 400; }
.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: 500; line-height: 0.98; letter-spacing: -0.012em; }
.h2 { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.005em; }
.h3 { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.015em; }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.5; color: var(--ink-soft); }

/* Serif éditorial sur les titres marquants (esprit du logo) */
.entry__title, .vcard__name, .post__title, .kpi__num,
.villa-head h1, .specs__title, .ask h3, .panel h3, .modal h3, .agence__name {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em;
}

/* CTA texte + flèche — pas de bouton pill */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-weight: 600;
  font-size: 0.94rem;
  letter-spacing: 0.01em;
  color: var(--lagon-deep);
  position: relative;
  padding-block: 4px;
}
.cta .arrow { transition: transform 0.4s var(--ease-out); }
.cta:hover .arrow, .cta:focus-visible .arrow { transform: translateX(6px); }
.cta::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-out);
}
.cta:hover::after, .cta:focus-visible::after { transform: scaleX(1); }
.cta--ink { color: var(--ink); }
/* Sur photo sombre (héros) : --lagon-deep serait illisible. Le soulignement
   suit currentColor, il devient blanc automatiquement. */
.cta--hero { color: #fff; }

/* Rectangle fin uppercase espacé (CTA primaire) */
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  border: 1px solid currentColor;
  color: var(--ink);
  padding: 16px 30px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.btn-line:hover, .btn-line:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-line--lagon { color: var(--lagon); }
.btn-line--lagon:hover, .btn-line--lagon:focus-visible { background: var(--lagon); color: #fff; border-color: var(--lagon); }
.btn-line--invert { color: #fff; }
.btn-line--invert:hover, .btn-line--invert:focus-visible { background: #fff; color: var(--ink); border-color: #fff; }

/* Solid fill (form submit) */
.btn-fill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  background: var(--lagon); color: #fff;
  padding: 16px 28px;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.4s var(--ease);
}
.btn-fill:hover, .btn-fill:focus-visible { background: var(--lagon-deep); }
.btn-fill--block { width: 100%; }

/* ---------- Reveal (scroll storytelling — enhancement only) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: 0.08s; }
.js .reveal.d2 { transition-delay: 0.16s; }
.js .reveal.d3 { transition-delay: 0.24s; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
/* Hero overlay header (transparent over dark hero) */
.site-header.is-over {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header.is-over .brand, .site-header.is-over .nav a,
.site-header.is-over .h-tools button, .site-header.is-over .menu-toggle,
.site-header.is-over .h-phone { color: #fff; }
.site-header.is-over .pipe { background: rgba(255,255,255,0.4); }
.site-header.is-over .cur-select { color: #fff; border-color: rgba(255,255,255,0.4); }
.site-header.is-over .cur-wrap::after { color: rgba(255,255,255,0.8); }
.site-header.is-over .switch .sep { color: rgba(255,255,255,0.4); }

.header-row {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink);
  white-space: nowrap;
}
/* Wordmark officiel (logo horizontal The Circle Samui) */
.brand-wordmark { height: 26px; width: auto; display: block; flex: none; }
.footer__brand .brand-wordmark { height: 34px; }
/* Header overlay (hero) : wordmark en blanc */
.site-header.is-over .brand-wordmark { filter: brightness(0) invert(1); }
@media (max-width: 480px) { .brand-wordmark { height: 21px; } }
/* Compat ancien monogramme (icône carrée) */
.brand-logo { width: 30px; height: 30px; object-fit: contain; flex: none; display: block; }
.site-header.is-over .brand-logo { filter: brightness(0) invert(1); }
.brand b { font-weight: 600; }
.brand span { font-weight: 300; }

.nav { display: none; }
@media (min-width: 940px) {
  .nav { display: flex; align-items: center; gap: 34px; }
  .nav a {
    font-size: 0.92rem; font-weight: 500; color: var(--ink-soft);
    position: relative; padding-block: 6px;
  }
  .nav a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.4s var(--ease-out);
  }
  .nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
  .nav a[aria-current] { color: var(--ink); }
}

.h-tools { display: flex; align-items: center; gap: 14px; }
.h-tools .pipe { width: 1px; height: 18px; background: var(--line); }
.h-phone { display: none; }
@media (min-width: 940px) {
  .h-phone {
    display: inline-flex; align-items: center;
    font-size: 0.85rem; font-weight: 600; letter-spacing: 0.01em;
    color: var(--ink); transition: color 0.3s;
  }
  .h-phone:hover { color: var(--lagon); }
}
.switch { display: inline-flex; align-items: center; gap: 6px; }
.switch button {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-mute); padding: 4px 2px; transition: color 0.3s;
}
.switch button[aria-pressed="true"] { color: var(--ink); }
.switch .sep { color: var(--line); font-size: 0.7rem; }
.cur-select {
  position: relative;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 6px 26px 6px 10px;
  background: transparent;
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.cur-wrap { position: relative; display: inline-flex; }
.cur-wrap::after {
  content: "▾"; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: 0.6rem; color: var(--ink-mute); pointer-events: none;
}

.menu-toggle {
  display: inline-flex; flex-direction: column; gap: 5px;
  width: 30px; padding: 6px 0;
}
.menu-toggle span { height: 1.5px; width: 100%; background: currentColor; transition: transform 0.4s var(--ease), opacity 0.3s; }
@media (min-width: 940px) { .menu-toggle { display: none; } }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 55;
  background: var(--paper);
  padding: 36px var(--gut) 48px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}
.mobile-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
.mobile-nav a {
  font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.mobile-nav .m-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; color: var(--ink-mute); font-size: 0.9rem; }
@media (min-width: 940px) { .mobile-nav { display: none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  margin-top: calc(-1 * var(--header-h));
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
/* Héros des pages dédiées : même traitement cinématique que l'accueil (photo,
   dégradé, Ken Burns), mais plus court — une page intérieure ne prend pas tout
   l'écran avant son contenu. */
.hero--page { min-height: min(66svh, 660px); }
.hero--page .hero__title { max-width: 22ch; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* cinématique : désaturé, contraste léger */
  filter: saturate(0.92) contrast(1.04) brightness(0.92);
  transform: scale(1);
}
/* Ken Burns : départ recadré 106 %, retour lent vers 100 % une fois la page chargée */
.js .hero__media img { transform: scale(1.06); transition: transform 7s var(--ease-out); }
.js .hero.is-loaded .hero__media img { transform: scale(1); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,12,14,0.42) 0%, rgba(8,12,14,0.05) 32%, rgba(8,12,14,0.10) 60%, rgba(8,12,14,0.74) 100%);
}
/* Héros posé sur une photo de plein jour : le dégradé vertical ne descend qu'à
   5–10 % en son milieu — assez sur une photo au crépuscule, pas sur un ciel clair,
   où le chapô blanc devient illisible. On ajoute un voile latéral du côté du texte,
   qui laisse la droite de l'image intacte. */
.hero--bright .hero__media::after {
  background:
    linear-gradient(90deg, rgba(8,12,14,0.64) 0%, rgba(8,12,14,0.36) 42%, rgba(8,12,14,0) 74%),
    linear-gradient(180deg, rgba(8,12,14,0.42) 0%, rgba(8,12,14,0.05) 32%, rgba(8,12,14,0.10) 60%, rgba(8,12,14,0.74) 100%);
}
/* Voile renforcé : pour une photo qui contient elle-même un objet lumineux et
   graphique. Le bureau de l'agence porte l'enseigne au néon, au tiers gauche,
   c'est-à-dire exactement là où retombe le titre du héros. Aucun recadrage ne
   sépare les deux : l'enseigne est en haut à gauche de la source, le titre est
   ancré en bas à gauche, et remonter l'un fait descendre l'autre. Vérifié en
   navigateur sur cinq recadrages. On assume donc la superposition et on la
   rend délibérée : l'enseigne redevient une lueur d'ambiance derrière le titre
   au lieu d'un second logo qui lui dispute la lecture.
   Modificateur à part, et non un durcissement de hero--bright, parce que
   louer.html partage hero--bright et n'a pas ce problème.

   Volontairement SANS contre-partie mobile, contrairement à hero--bright juste
   en dessous. Cette règle-là rend le voile vertical sous 860 px, en partant du
   principe que le texte occupe alors toute la largeur et qu'aucun côté n'est à
   épargner. Ici le sujet gênant reste à gauche même en mobile (hero--focus-left
   cadre à 26 %) : repasser en vertical rallume l'enseigne au lieu de la calmer.
   Essayé et rejeté sur capture. Le voile latéral s'applique donc à toutes les
   largeurs, par spécificité (3 classes contre 2).

   Mesuré, texte blanc sur le fond composite, pire cas au 98e centile :
   1440 px -> surtitre 6,0 · titre 4,3 (grand texte, seuil 3,0) · chapô 9,7 · boutons 6,7
    500 px -> surtitre 6,6 · titre 5,5 · chapô 5,2 · boutons 9,3
   Tout au-dessus du seuil AA. Refaire la mesure si la photo change. */
.hero--veil-strong.hero--bright .hero__media::after {
  background:
    linear-gradient(90deg, rgba(8,12,14,0.76) 0%, rgba(8,12,14,0.56) 46%, rgba(8,12,14,0.26) 78%, rgba(8,12,14,0.18) 100%),
    linear-gradient(180deg, rgba(8,12,14,0.46) 0%, rgba(8,12,14,0.18) 34%, rgba(8,12,14,0.20) 60%, rgba(8,12,14,0.78) 100%);
}

/* Un héros pleine largeur en 16/9 sur un écran étroit ne montre plus qu'une
   bande centrale : à 390x570 elle ne vaut que 38 % de la largeur de l'image.
   Quand le sujet n'est pas au centre (l'enseigne du bureau, sur agence.html,
   est au tiers gauche), le cadrage par défaut le coupe en deux. Ce modificateur
   déplace la fenêtre vers la gauche, uniquement sous 860 px, là où la bande se
   resserre. Au-dessus, le héros est assez large pour tout montrer. */
@media (max-width: 860px) {
  .hero--focus-left .hero__media img { object-position: 26% 50%; }
}

/* Sur mobile le texte occupe toute la largeur : le voile latéral n'a plus de
   côté à épargner, il redevient vertical. */
@media (max-width: 860px) {
  .hero--bright .hero__media::after {
    background:
      linear-gradient(180deg, rgba(8,12,14,0.52) 0%, rgba(8,12,14,0.30) 38%, rgba(8,12,14,0.44) 68%, rgba(8,12,14,0.82) 100%);
  }
}
.hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-bottom: clamp(48px, 8vw, 96px);
  padding-top: calc(var(--header-h) + 24px);
}
.hero .eyebrow { color: rgba(255,255,255,0.82); }
.hero__title {
  max-width: 16ch;
  margin-top: 18px;
  text-shadow: 0 2px 40px rgba(0,0,0,0.25);
}
.hero__sub {
  margin-top: 22px; max-width: 46ch;
  font-size: var(--fs-lead); font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
/* Les 2 CTA s'empilent sur mobile : côte à côte, le secondaire passait sous la
   bulle WhatsApp fixée en bas à droite (chevauchement mesuré à 500 px). */
.hero__cta { margin-top: 34px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
@media (min-width: 640px) {
  .hero__cta { flex-direction: row; align-items: center; gap: 28px; flex-wrap: wrap; }
}
.hero__scroll {
  position: absolute; right: var(--gut); bottom: clamp(48px, 8vw, 96px);
  z-index: 2;
  display: none;
  writing-mode: vertical-rl;
  font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
@media (min-width: 940px) { .hero__scroll { display: inline-flex; align-items: center; gap: 14px; } }
.hero__scroll .ln { width: 1px; height: 54px; background: rgba(255,255,255,0.45); display: block; }

/* --- Héros scindé (DA #2) : montrer une photo en portrait sans la recadrer ---
   ⚠️ PLUS AUCUNE PAGE NE L'UTILISE depuis le 25/08 : agence.html, son seul
   usager, est repassé au héros pleine largeur avec la photo d'équipe (demande
   cliente « mettre en paysage le héros de L'agence »).
   Le bloc est CONSERVÉ, pas supprimé, pour deux raisons : c'est le seul gabarit
   du site capable d'afficher une photo en portrait sans la massacrer (si une
   photo verticale revient, il est prêt), et il documente deux pièges déjà payés :
   un plafond de hauteur sur une boîte en `aspect-ratio` lui rétrécit aussi la
   largeur, en 430 px (20/08) comme en 1536 px (24/08). Ces notes valent pour
   tout le CSS du site, pas seulement pour ce gabarit.

   Cas d'agence.html : la seule photo du bureau est un 1000x1250. Servie dans un
   héros pleine largeur, elle était agrandie puis rognée à une bande horizontale —
   l'enseigne lumineuse et la personne disparaissaient. Ici l'image garde sa
   proportion et le texte reçoit son propre fond, au lieu de se poser dessus. */
.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
  min-height: 0;
  background: var(--ink);
}

.hero--split .hero__media {
  position: relative; inset: auto;
  aspect-ratio: 4 / 5;
}

/* Desktop — la bande sombre à droite de la photo (signalée par la cliente le
   24/08 09:23, capture à l'appui) : c'est EXACTEMENT le piège déjà rencontré en
   430 px et documenté plus bas. `max-height: min(78svh, 700px)` posé sur une
   boîte en `aspect-ratio` lui rétrécit aussi la LARGEUR — sur un portable
   1536x864, la colonne fait 640 px, le 4/5 réclame 800 px de haut, le plafond
   coupe à ~600 et la photo tombe à ~480 px de large. D'où le fond `--ink` qui
   apparaît sur ~160 px, et un héros qui « fait petit ».
   Correctif : plus aucun plafond sur la boîte. La hauteur de la rangée est
   pilotée par la grille (`min-height` ci-dessous) et la photo s'y étire via
   `align-items: stretch`. Elle remplit donc toujours sa colonne.
   Contrepartie assumée : la photo (1000x1250, soit 0,80) est servie dans une
   boîte à ~0,83 — `object-fit: cover` en rogne environ 4 % en hauteur. C'est
   l'intention d'origine du héros scindé (montrer le portrait sans le massacrer)
   tenue à 4 % près, contre une bande vide de 25 % de la colonne. */
@media (min-width: 861px) {
  .hero--split { min-height: clamp(560px, 52vw, 760px); }
  .hero--split .hero__media { aspect-ratio: auto; }
  .hero--split .hero__media img { object-position: 50% 42%; }
}

/* l'image ne porte plus le texte : ni dégradé, ni assombrissement */
.hero--split .hero__media::after { display: none; }
.hero--split .hero__media img { filter: saturate(0.97) contrast(1.02); }

.hero--split .hero__panel {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + clamp(24px, 3vw, 44px)) clamp(24px, 4vw, 72px) clamp(40px, 5vw, 76px);
}

/* le titre est calé sur un héros pleine largeur : dans la colonne du scindé
   il déborde et pousse le panneau plus bas que la photo. On le redescend d'un cran. */
.hero--split .hero__title {
  max-width: 16ch; text-shadow: none;
  font-size: clamp(2.1rem, 3.2vw, 3.1rem); line-height: 1.02;
}
.hero--split .hero__sub { max-width: 42ch; margin-top: 18px; }
.hero--split .hero__cta { margin-top: 28px; flex-direction: row; flex-wrap: wrap; align-items: center; }

@media (max-width: 860px) {
  .hero--split { grid-template-columns: 1fr; }
  /* Pas de plafond de hauteur ici : `max-height` sur une boîte en `aspect-ratio`
     rétrécit la LARGEUR autant que la hauteur. Sur un vrai iPhone, `svh` exclut
     la barre Safari, le plafond mordait, et l'image tombait à 82 % de large —
     bande sombre à droite (signalé par la cliente le 20/08 18:44). Invisible en
     headless, où `svh` vaut la pleine hauteur de fenêtre : reproduire en 430x750. */
  .hero--split .hero__media { aspect-ratio: 4 / 5; max-height: none; }
  .hero--split .hero__panel {
    padding-top: clamp(28px, 6vw, 40px);
    padding-bottom: clamp(36px, 7vw, 56px);
  }
}
/* Viewport court (téléphone en paysage) : un 4/5 pleine largeur ferait plus de
   1 000 px de haut. On recadre la photo au lieu de l'étirer — le seul cas où le
   portrait cède, faute de mieux. */
@media (max-width: 860px) and (max-height: 520px) {
  .hero--split .hero__media { aspect-ratio: 16 / 9; }
}
.js .hero__scroll .ln { animation: dropline 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes dropline { 0%,100% { transform: scaleY(0.4); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ============================================================
   CATALOGUE ENTRIES (Acheter / Conciergerie / Louer)
   ============================================================ */
.entries { border-top: 1px solid var(--line); }
.entries__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 760px) { .entries__grid { grid-template-columns: repeat(3, 1fr); } }
.entry {
  display: block; padding: clamp(32px, 4vw, 52px) clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: background 0.5s var(--ease);
}
@media (min-width: 760px) { .entry { border-bottom: none; border-right: 1px solid var(--line); } .entry:last-child { border-right: none; } }
.entry:hover { background: var(--paper-2); }
.entry__num { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; color: var(--ink-mute); }
.entry__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 300; letter-spacing: -0.02em; margin-top: 18px; }
.entry__desc { margin-top: 12px; color: var(--ink-mute); font-size: 0.96rem; max-width: 32ch; }
.entry__go { margin-top: 26px; }
.entry .arrow { transition: transform 0.4s var(--ease-out); display: inline-block; }
.entry:hover .arrow { transform: translateX(6px); }

/* ============================================================
   SECTION HEAD
   ============================================================ */
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head__l { max-width: 56ch; }
.sec-head h2 { margin-top: 14px; }
.sec-head .lead { margin-top: 18px; }

/* ============================================================
   FEATURED VILLAS
   ============================================================ */
.villas-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 720px) { .villas-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1080px) { .villas-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.vcard { display: flex; flex-direction: column; background: var(--paper); }
.vcard--feature { grid-column: 1 / -1; }
@media (min-width: 1080px) {
  .vcard--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 0; border: 1px solid var(--line); }
}

.vcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.vcard--feature .vcard__media { aspect-ratio: 16 / 11; }
@media (min-width: 1080px) { .vcard--feature .vcard__media { aspect-ratio: auto; height: 100%; min-height: 440px; } }
.vcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.vcard:hover .vcard__media img, a.vcard:hover .vcard__media img { transform: scale(1.045); }

.badges { position: absolute; top: 16px; left: 16px; display: flex; flex-wrap: wrap; gap: 8px; z-index: 2; }
.badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 11px; background: rgba(255,255,255,0.95); color: var(--ink);
}
.badge--heart { background: var(--ink); color: #fff; }
.badge--fast { background: var(--danger); color: #fff; }
.badge--status { background: rgba(17,20,24,0.82); color: #fff; }

/* tenure chip bottom-left over photo */
.tenure {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(255,255,255,0.95); color: var(--ink);
}
.tenure .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute); }
.tenure--lease .dot { background: var(--ink-mute); }

.vcard__body { padding: 22px 4px 8px; display: flex; flex-direction: column; }
.vcard--feature .vcard__body { padding: clamp(28px, 3vw, 44px); justify-content: center; }
.vcard__loc { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.vcard__name { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 300; letter-spacing: -0.02em; margin-top: 8px; }
.vcard--feature .vcard__name { font-size: clamp(1.9rem, 3vw, 2.9rem); }
.vcard__specs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: 0.92rem; }
.vcard__specs li { display: inline-flex; align-items: center; gap: 7px; }
.vcard__specs .ic { color: var(--ink-mute); font-weight: 600; }
.vcard--feature .feat-lead { margin-top: 18px; color: var(--ink-soft); font-weight: 300; max-width: 48ch; }

.vcard__foot { margin-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.vcard__price .amount { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; letter-spacing: -0.01em; }
.vcard__price .was { display: block; font-size: 0.82rem; color: var(--ink-mute); text-decoration: line-through; margin-bottom: 2px; }
.vcard__price .yield { display: block; font-size: 0.8rem; color: var(--ink-mute); font-weight: 600; margin-top: 3px; }
.vcard__foot .cta { white-space: nowrap; }

/* ============================================================
   CERCLE — off-market gated (signature)
   ============================================================ */
.cercle {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
}
.cercle__bg { position: absolute; inset: 0; z-index: 0; }
.cercle__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; filter: saturate(0.9) brightness(0.8); }
.cercle__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 30%, rgba(192,117,76,0.32), transparent 60%); }
.cercle__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 940px) { .cercle__inner { grid-template-columns: 1.05fr 0.95fr; } }

/* concentric circles motif (discret) */
.cercle__rings { position: relative; aspect-ratio: 1; max-width: 360px; margin-inline: auto; display: none; }
@media (min-width: 940px) { .cercle__rings { display: block; } }
.cercle__rings span { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,0.16); border-radius: 50%; }
.cercle__rings span:nth-child(2) { inset: 14%; border-color: rgba(255,255,255,0.2); }
.cercle__rings span:nth-child(3) { inset: 30%; border-color: rgba(255,255,255,0.26); }
.cercle__rings span:nth-child(4) { inset: 46%; border-color: rgba(192,117,76,0.7); }
.cercle__rings .core {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: var(--fs-label); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85);
  border: none;
}
.js .cercle__rings span:nth-child(-n+4) { animation: ringpulse 6s var(--ease) infinite; }
.js .cercle__rings span:nth-child(2) { animation-delay: 0.4s; }
.js .cercle__rings span:nth-child(3) { animation-delay: 0.8s; }
.js .cercle__rings span:nth-child(4) { animation-delay: 1.2s; }
@keyframes ringpulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.025); opacity: 0.8; } }

.cercle .eyebrow { color: var(--lagon-soft); }
.cercle h2 { margin-top: 16px; }
.cercle__lead { margin-top: 20px; color: rgba(255,255,255,0.82); font-weight: 300; font-size: var(--fs-lead); max-width: 44ch; }
.cercle__form { margin-top: 32px; }
.gate {
  display: flex; gap: 0; border-bottom: 1.5px solid rgba(255,255,255,0.4);
  max-width: 460px; transition: border-color 0.4s var(--ease);
}
.gate:focus-within { border-color: #fff; }
.gate input {
  flex: 1; background: transparent; border: none; color: #fff;
  font-size: 1.1rem; font-weight: 300; padding: 14px 2px;
}
.gate input::placeholder { color: rgba(255,255,255,0.5); }
.gate input:focus-visible { outline: none; }
.gate button {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0 4px; color: #fff; white-space: nowrap;
}
.gate button .arrow { transition: transform 0.4s var(--ease-out); }
.gate button:hover .arrow { transform: translateX(5px); }
.cercle__note { margin-top: 16px; font-size: 0.84rem; color: rgba(255,255,255,0.6); }
.cercle__perks { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.cercle__perks li { font-size: 0.86rem; color: rgba(255,255,255,0.78); display: inline-flex; align-items: center; gap: 9px; }
.cercle__perks .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lagon); }
.gate-turnstile { margin-top: 18px; max-width: 460px; } /* aligné sur .gate */
.cercle__form.is-submitting .gate button { opacity: 0.55; pointer-events: none; }
.gate-ok { margin-top: 14px; font-size: 0.92rem; color: var(--lagon-soft); display: none; }
.gate-ok.show { display: block; }
.gate-err { margin-top: 12px; font-size: 0.88rem; color: #f0b8ab; display: none; }
.gate-err.show { display: block; }

/* ============================================================
   LOADER (§6.2) — monogramme en rotation
   ------------------------------------------------------------
   Reprend le principe de l'ancien site WordPress (plugin
   « safelayout cute preloader », même image : le monogramme
   terracotta). Deux écarts assumés : il n'apparaît qu'une fois
   par session au lieu de chaque page, et il a un plafond dur
   côté JS pour ne jamais retenir la page.
   Sans JS, .tcs-loading n'est jamais posée : rien ne s'affiche.
   ============================================================ */
.preloader { display: none; }
.tcs-loading .preloader {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9999;
  background: var(--paper);
}
.tcs-loading .preloader img {
  width: clamp(58px, 8vw, 88px); height: auto;
  animation: tcs-spin 1.7s linear infinite;
}
@keyframes tcs-spin { to { transform: rotate(360deg); } }
.tcs-loading .preloader.is-done {
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s 0.45s;
}

/* ============================================================
   BANDE PHOTO PLEINE LARGEUR (DA #2)
   ------------------------------------------------------------
   Respiration entre deux blocs clairs : une photo pleine largeur
   avec une phrase courte. Même traitement cinématique que le
   héros (dégradé, léger dézoom à l'apparition), déclenché par la
   classe .is-in que pose l'IntersectionObserver de app.js — donc
   neutralisé sous prefers-reduced-motion comme le reste.
   ============================================================ */
.band {
  position: relative;
  min-height: min(76svh, 700px);
  display: flex; align-items: flex-end;
  color: #fff;
  overflow: hidden;
}
/* La section porte .reveal uniquement pour recevoir .is-in de l'observer ;
   on annule le fondu/translation par défaut, qui décalerait une section pleine
   largeur et laisserait apparaître une bande vide le temps de l'animation.
   Le texte, lui, garde son .reveal à l'intérieur. */
.js .band.reveal { opacity: 1; transform: none; }
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.94) contrast(1.03) brightness(0.9);
  transform: scale(1);
}
.js .band__media img { transform: scale(1.07); transition: transform 9s var(--ease-out); }
.js .band.is-in .band__media img { transform: scale(1); }
/* Deux voiles : vertical pour asseoir le texte en bas, horizontal parce que le
   texte est aligné à gauche et que ces photos y sont parfois très claires
   (piscine en plein soleil). Mesuré sur la bande « la baie ». */
.band__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(8,12,14,0.46) 0%, rgba(8,12,14,0.12) 46%, rgba(8,12,14,0) 68%),
    linear-gradient(180deg, rgba(8,12,14,0.34) 0%, rgba(8,12,14,0.06) 30%, rgba(8,12,14,0.52) 68%, rgba(8,12,14,0.78) 100%);
}
.band__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(52px, 8vw, 104px); }
.band .eyebrow { color: rgba(255,255,255,0.82); }
.band__title {
  margin-top: 16px; max-width: 18ch;
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 500;
  letter-spacing: -0.005em; line-height: 1.04;
  text-shadow: 0 2px 40px rgba(0,0,0,0.28);
}
.band__note {
  margin-top: 20px; max-width: 44ch;
  font-size: var(--fs-lead); font-weight: 300; line-height: 1.5;
  color: rgba(255,255,255,0.9);
}
.band__cta { margin-top: 30px; }

/* ============================================================
   CONCIERGERIE
   ============================================================ */
.concierge { background: var(--paper-2); }
.concierge__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 940px) { .concierge__grid { grid-template-columns: 0.95fr 1.05fr; } }
.concierge__media { position: relative; aspect-ratio: 5 / 4; overflow: hidden; order: -1; }
@media (min-width: 940px) { .concierge__media { order: 1; aspect-ratio: 4 / 5; } }
.concierge__media img { width: 100%; height: 100%; object-fit: cover; }
.concierge h2 { margin-top: 16px; }
.concierge__lead { margin-top: 20px; }
.concierge__list { margin-top: 26px; display: grid; gap: 2px; }
.concierge__list li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.concierge__list .k { font-weight: 600; font-size: 1rem; min-width: 0; flex: 1; }
.concierge__list .v { color: var(--ink-mute); font-size: 0.92rem; text-align: right; flex: none; }
.concierge__cta { margin-top: 32px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* ============================================================
   KPI — specs produit (compteurs)
   ============================================================ */
.kpi { background: var(--ink); color: #fff; }
.kpi__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 860px) { .kpi__grid { grid-template-columns: repeat(4, 1fr); } }
.kpi__item { padding: clamp(28px, 4vw, 48px) clamp(18px, 2.5vw, 36px); border-top: 1px solid rgba(255,255,255,0.12); border-left: 1px solid rgba(255,255,255,0.12); }
.kpi__item:nth-child(odd) { border-left: none; }
@media (min-width: 860px) { .kpi__item { border-top: none; } .kpi__item:nth-child(odd) { border-left: 1px solid rgba(255,255,255,0.12); } .kpi__item:first-child { border-left: none; } }
.kpi__num { font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; display: flex; align-items: baseline; }
.kpi__num .suf { font-size: 0.45em; font-weight: 600; margin-left: 4px; color: var(--lagon-soft); letter-spacing: 0; }
.kpi__label { margin-top: 14px; font-size: 0.9rem; color: rgba(255,255,255,0.66); max-width: 22ch; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testi__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 820px) { .testi__grid { grid-template-columns: repeat(3, 1fr); } }
.testi__card { display: flex; flex-direction: column; padding-top: 28px; border-top: 1px solid var(--ink); }
.testi__stars { color: var(--ink); letter-spacing: 0.12em; font-size: 0.9rem; }
.testi__quote { margin-top: 18px; font-size: 1.08rem; font-weight: 300; line-height: 1.55; color: var(--ink); flex: 1; }
.testi__by { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.testi__who b { display: block; font-weight: 600; font-size: 0.96rem; }
.testi__who span { font-size: 0.84rem; color: var(--ink-mute); }
.testi__src { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* ============================================================
   BLOG TEASER
   ============================================================ */
.blog__grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 760px) { .blog__grid { grid-template-columns: repeat(2, 1fr); } }
.post { display: flex; flex-direction: column; }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.post:hover .post__media img { transform: scale(1.04); }
.post__meta { margin-top: 20px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.post__title { margin-top: 12px; font-size: clamp(1.3rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: -0.02em; max-width: 28ch; }
.post__go { margin-top: 18px; }
.post__link { display: flex; flex-direction: column; color: inherit; }
.post__excerpt { margin-top: 12px; color: var(--ink-mute); font-weight: 300; max-width: 46ch; }
.post__link:hover .post__go .cta::after,
.post__link:focus-visible .post__go .cta::after { transform: scaleX(1); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); padding-block: clamp(56px, 7vw, 96px) 40px; }
.footer__top { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 760px) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__brand .brand { font-size: 1.2rem; }
.footer__tag { margin-top: 18px; color: var(--ink-soft); font-weight: 300; max-width: 34ch; }
.footer__col h4 { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px; }
.footer__col a, .footer__col p { display: block; color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 12px; }
.footer__col a { transition: color 0.3s; }
.footer__col a:hover { color: var(--lagon); }
.footer__col .muted { color: var(--ink-mute); }
.footer__bar { margin-top: clamp(40px, 5vw, 64px); padding-top: 26px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.footer__bar .legal { font-size: 0.82rem; color: var(--ink-mute); }
.footer__tools { display: flex; align-items: center; gap: 16px; }

/* Réseaux sociaux (demande cliente du 25/08 : à gauche du sélecteur FR/EN).
   Marques en aplat plutôt qu'en filaire : à 18 px, un contour fin rend le « f »
   de Facebook et l'appareil photo d'Instagram illisibles. La zone cliquable est
   portée à 34 px : l'icône seule tombe sous la cible tactile confortable, et
   c'est une barre qu'on manipule surtout au pouce.
   Le gap de 4 px est volontairement plus serré que les 16 px de .footer__tools :
   les icônes forment UN groupe, séparé du sélecteur de langue par le trait. */
.footer__social { display: inline-flex; align-items: center; gap: 4px; }
.footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: -8px 0;   /* la cible déborde sans pousser la barre */
  color: var(--ink-mute); transition: color 0.3s;
}
.footer__social a:hover, .footer__social a:focus-visible { color: var(--ink); }
.footer__social svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: clamp(28px, 4vw, 44px); }
.footer__legal a { color: var(--ink-mute); font-size: var(--fs-small); transition: color 0.3s; }
.footer__legal a:hover { color: var(--ink); }

/* ============================================================
   BANDEAU COOKIES (consentement RGPD — mesure d'audience)
   Injecté par app.js → présent sur toutes les pages (y c. légales).
   ============================================================ */
.cookie-bar {
  position: fixed;
  left: clamp(12px, 3vw, 28px);
  bottom: clamp(12px, 3vw, 28px);
  width: min(420px, calc(100vw - 24px));
  z-index: 80; /* > wa-float (70), < modal (90) */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(28, 26, 23, 0.18);
  padding: clamp(18px, 2.4vw, 24px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.cookie-bar.is-in { opacity: 1; transform: none; }
.cookie-bar__inner { display: flex; flex-direction: column; gap: 16px; }
.cookie-bar__txt { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-soft); }
.cookie-bar__txt a { color: var(--lagon); text-decoration: underline; text-underline-offset: 2px; }
.cookie-bar__txt a:hover { color: var(--lagon-deep); }
.cookie-bar__actions { display: flex; gap: 10px; }
.cookie-bar__actions button {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cookie-bar .ck-refuse { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.cookie-bar .ck-refuse:hover { border-color: var(--ink-mute); color: var(--ink); }
.cookie-bar .ck-accept { background: var(--lagon); color: #fff; }
.cookie-bar .ck-accept:hover { background: var(--lagon-deep); }
/* Sur petit écran, le bandeau (ancré en bas) recouvrirait le bouton WhatsApp : on le masque le temps du choix. */
@media (max-width: 600px) {
  body.consent-open .wa-float { opacity: 0; pointer-events: none; }
}

/* ============================================================
   WHATSAPP FLOAT (unique)
   ============================================================ */
.wa-float {
  position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 70;
  display: inline-flex; align-items: center; gap: 0;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 0;
  box-shadow: 0 8px 30px rgba(8,20,18,0.16);
  overflow: hidden;
  transition: padding 0.4s var(--ease), background 0.4s var(--ease), opacity 0.35s var(--ease);
}
.wa-float .ico { width: 54px; height: 54px; display: grid; place-items: center; flex: none; color: var(--lagon); }
.wa-float .ico svg { width: 26px; height: 26px; }
.wa-float .txt { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; padding-right: 0; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width 0.45s var(--ease), opacity 0.35s var(--ease), padding 0.45s var(--ease); }
@media (min-width: 760px) {
  .wa-float:hover { background: var(--lagon); color: #fff; }
  .wa-float:hover .ico { color: #fff; }
  .wa-float:hover .txt { max-width: 180px; opacity: 1; padding-right: 22px; }
}

/* ============================================================
   ===============   VILLA PAGE (villa.html)   ================
   ============================================================ */
.villa-top { padding-top: clamp(28px, 4vw, 56px); }
.crumbs { font-size: 0.84rem; color: var(--ink-mute); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
/* Le fil d'Ariane est posé entre le héros sombre et la première section. Dès que
   celle-ci n'a pas le fond de page, il reste seul sur du blanc et dessine un
   bandeau coincé entre les deux. La cliente l'a signalé le 20/08 sur /agence
   (section .kpi, fond --ink) ; le correctif d'alors n'a traité que ce cas, en
   concluant que « partout ailleurs la section est claire ». Clair ne veut pas
   dire du même blanc : /conciergerie et /services enchaînent sur --cream-2 et
   portaient le même défaut, en plus discret. Retrouvé par Tom le 25/08.
   Le fil se rattache donc au bloc qui suit, quelle que soit sa couleur : la
   structure ici, la teinte dans le modificateur. */
.crumbs-band .crumbs { padding-block: clamp(14px, 2vw, 20px); }
.crumbs-band--ink { background: var(--ink); }
.crumbs-band--ink .crumbs { color: rgba(255,255,255,0.58); }
.crumbs-band--ink .crumbs a { color: rgba(255,255,255,0.8); }
.crumbs-band--ink .crumbs a:hover { color: #fff; }
.crumbs-band--ink .crumbs .sep { color: rgba(255,255,255,0.28); }
.crumbs-band--cream { background: var(--cream-2); }
.crumbs-band--cream .crumbs { color: var(--ink-mute-cream); }
.crumbs a:hover { color: var(--lagon); }
.crumbs .sep { color: var(--line); }
.villa-head { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; }
.villa-head__l { max-width: 60ch; }
.villa-head__loc { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.villa-head h1 { font-size: clamp(2.2rem, 5.5vw, 4.4rem); font-weight: 300; letter-spacing: -0.035em; margin-top: 14px; }
.villa-head__chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 13px; border: 1px solid var(--line);
}
.chip--tenure { background: var(--lagon); color: #fff; border-color: var(--lagon); }
.chip--heart { background: var(--ink); color: #fff; border-color: var(--ink); }
.villa-head__price { text-align: right; }
.villa-head__price .amount { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.02em; display: block; }
.villa-head__price .cur-conv { margin-top: 8px; }
.villa-head__price .price-alt {
  display: block; margin-top: 4px;
  font-size: 0.95rem; font-weight: 400; color: var(--ink-soft);
}
.villa-head__price .price-alt__note { font-size: 0.8em; opacity: 0.7; }
.villa-head__price .price-alt[hidden] { display: none; }

/* gallery */
.gallery { margin-top: clamp(28px, 4vw, 48px); }
.gallery__grid { display: grid; gap: 8px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    aspect-ratio: 16 / 8;
  }
  .gallery__cell { overflow: hidden; }
  .gallery__cell:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery__cell:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
  .gallery__cell:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
  .gallery__cell:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
  .gallery__cell:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }
}
.gallery__cell { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--paper-2); }
@media (min-width: 760px) { .gallery__cell { aspect-ratio: auto; } }
.gallery__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.gallery__cell:hover img { transform: scale(1.045); }
.gallery__more {
  position: absolute; inset: auto 14px 14px auto; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(17,20,24,0.92); color: #fff;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em;
  padding: 11px 16px;
}
.gallery__more:hover { background: var(--lagon); }
/* mobile swipe row */
.gallery__swipe { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery__swipe::-webkit-scrollbar { display: none; }
.gallery__swipe .gallery__cell { flex: 0 0 86%; scroll-snap-align: start; aspect-ratio: 4 / 3; }
@media (min-width: 760px) { .gallery__swipe { display: none; } }
.gallery__grid.is-desktop { display: none; }
@media (min-width: 760px) { .gallery__grid.is-desktop { display: grid; } }
.gallery__more-mobile { margin-top: 14px; width: 100%; justify-content: center; }
@media (min-width: 760px) { .gallery__more-mobile { display: none; } }

/* villa main layout */
.villa-main { display: grid; grid-template-columns: 1fr; gap: clamp(40px, 5vw, 72px); margin-top: clamp(48px, 6vw, 88px); }
@media (min-width: 1000px) { .villa-main { grid-template-columns: 1fr 380px; gap: clamp(48px, 5vw, 80px); align-items: start; } }

/* story */
.story h2 { margin-top: 14px; }
.story__body { margin-top: 22px; }
.story__body p { margin-bottom: 18px; color: var(--ink-soft); font-weight: 300; font-size: 1.08rem; line-height: 1.62; max-width: 60ch; }
.story__body p.persona { color: var(--ink); font-style: italic; border-left: 2px solid var(--lagon); padding-left: 20px; }

/* specs grid */
.specs { margin-top: clamp(40px, 5vw, 64px); }
.specs__title { margin-top: 12px; }
.specs__grid { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .specs__grid { grid-template-columns: repeat(3, 1fr); } }
.spec { background: var(--paper); padding: 22px 20px; }
.spec__k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.spec__v { margin-top: 10px; font-size: 1.32rem; font-weight: 300; letter-spacing: -0.02em; }
.spec__v small { font-size: 0.8rem; color: var(--ink-mute); font-weight: 500; }

/* sidebar */
.villa-aside { position: relative; }
@media (min-width: 1000px) { .villa-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.ask {
  border: 1px solid var(--line); padding: clamp(24px, 3vw, 32px);
  background: var(--paper);
}
.ask h3 { font-size: 1.4rem; font-weight: 300; letter-spacing: -0.02em; }
.ask__price { margin-top: 8px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.ask__yield { margin-top: 4px; font-size: 0.88rem; color: var(--ink-mute); font-weight: 600; }
.ask__wa { margin-top: 22px; }
.wa-context {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; background: var(--lagon); color: #fff;
  padding: 16px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em;
  transition: background 0.4s var(--ease);
}
.wa-context:hover { background: var(--lagon-deep); }
.wa-context svg { width: 20px; height: 20px; }
.ask__brochure { display: flex; width: 100%; justify-content: center; margin-top: 12px; padding: 14px; }
.ask__or { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--ink-mute); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; }
.ask__or::before, .ask__or::after { content: ""; height: 1px; background: var(--line); flex: 1; }

/* form */
.field { margin-bottom: 16px; }
.field label, .field .field-label { display: block; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.field input, .field textarea {
  width: 100%; background: var(--paper); border: 1px solid var(--line);
  padding: 13px 14px; font-size: 1rem; transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lagon); }
.field textarea { resize: vertical; min-height: 92px; }
.field.invalid input, .field.invalid textarea { border-color: var(--danger); }
.field__err { display: none; margin-top: 7px; font-size: 0.8rem; color: var(--danger); }
.field.invalid .field__err { display: block; }
.form-ok { display: none; margin-top: 16px; padding: 14px; background: var(--lagon-soft); color: var(--lagon-deep); font-size: 0.92rem; font-weight: 500; }
.form-ok.show { display: block; }

/* Honeypot anti-bot : hors écran, jamais visible pour l'humain, laissé vide. */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Feedback des formulaires branchés sur l'API (tcs-forms). */
.form-feedback { display: none; margin-top: 16px; padding: 14px; font-size: 0.92rem; font-weight: 500; }
form[data-tcs-status="success"] .form-feedback { display: block; background: var(--lagon-soft); color: var(--lagon-deep); }
form[data-tcs-status="error"] .form-feedback { display: block; background: rgba(178, 58, 40, 0.08); color: var(--danger); }
form.is-submitting button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* booking + simulator */
.villa-extra { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 880px) { .villa-extra { grid-template-columns: 1fr 1fr; } }
.panel { border: 1px solid var(--line); padding: clamp(26px, 3vw, 40px); }
.panel h3 { font-size: var(--fs-h3); font-weight: 300; letter-spacing: -0.02em; }
.panel .eyebrow { margin-bottom: 14px; display: block; }

/* calendar */
/* Sélecteur de RDV en colonne étroite (fiche villa) : la bande de dates défile
   horizontalement au lieu de s'empiler sur six lignes dans le panneau.
   ⚠️ `min-width: 0` sur le panneau est INDISPENSABLE : .villa-extra est une grille,
   et un élément de grille vaut `min-width: auto` — il refuse donc de rétrécir sous
   la largeur de son contenu. Sans ça, l'`overflow-x: auto` de la bande ne se
   déclenche jamais et c'est la PAGE ENTIÈRE qui part en défilement horizontal sur
   mobile (constaté : 1301 px de large dans un viewport de 390). */
.villa-extra > .panel { min-width: 0; }
.rdv-picker--tight { margin-top: 20px; }
/* Phrase qui annonce la nature de l'échange : on demande une visite, on ne
   réserve pas une case. Sans elle, des puces « Lundi / Mardi » se lisent comme
   un calendrier — exactement le contresens que la refonte du 24/08 supprime. */
.rdv-intro { margin-top: 10px; color: var(--ink-soft); font-size: 0.95rem; }
.rdv-form { margin-top: 24px; }
.rdv-note { margin-top: 14px; font-size: 0.84rem; color: var(--ink-mute); }

/* simulator teaser */
.sim__gauge { margin-top: 24px; }
.sim__big { display: flex; align-items: baseline; gap: 10px; }
.sim__big .pct { font-size: clamp(3rem, 8vw, 5rem); font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--lagon); }
.sim__big .pct__sign { font-size: 0.5em; }
.sim__big .lbl { font-size: 0.9rem; color: var(--ink-mute); }
.sim__note { margin-top: 18px; }
.sim__bar { margin-top: 22px; height: 6px; background: var(--line); position: relative; overflow: hidden; }
.sim__bar i { position: absolute; inset: 0 28% 0 0; background: var(--lagon); transform-origin: left; }
.js .sim__bar i { transform: scaleX(0); transition: transform 1.4s var(--ease-out); }
.js .sim__bar.is-in i { transform: scaleX(1); }
.sim__rows { margin-top: 24px; display: grid; gap: 1px; }
.sim__rows li { display: flex; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.sim__rows .k { color: var(--ink-mute); }
.sim__rows .v { font-weight: 600; }
.sim__cta { margin-top: 24px; }

/* similar villas */
.similar { margin-top: clamp(56px, 7vw, 96px); }

/* le bloc outils (visite + simulateur) reçoit un fond pleine largeur : la <section>
   portait le .wrap, donc un fond y aurait été encadré au lieu d'aller bord à bord */
/* Pas de margin-top ici : la section suit la bande photo pleine largeur, et une
   marge externe laisse voir le fond de page entre les deux, soit un bandeau blanc
   de 96 px coincé entre la photo sombre et le crème. Partout ailleurs la section
   qui suit une .band n'a que du padding (.section, .section--tight) et l'aplat
   démarre au pixel où la photo s'arrête. On s'aligne. Signalé par Tom le 25/08. */
.villa-outils { padding-block: clamp(48px, 6vw, 84px); }
.villa-outils .villa-extra { margin-top: 0; }
/* la fiche ouvre désormais sur un fond crème : la galerie n'est plus posée sur du blanc pur */
.villa-top.section--cream { padding-bottom: clamp(40px, 5vw, 72px); }
.similar__grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 720px) { .similar__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   MODAL (gallery gate)
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 90; display: none; }
.modal.is-open { display: block; }
.modal__scrim { position: absolute; inset: 0; background: rgba(10,14,16,0.72); }
.js .modal__scrim { opacity: 0; transition: opacity 0.4s var(--ease); }
.js .modal.is-open .modal__scrim { opacity: 1; }
.modal__panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -48%);
  width: min(520px, calc(100vw - 32px));
  background: var(--paper); padding: clamp(28px, 4vw, 44px);
}
.js .modal__panel { opacity: 0; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease-out); }
.js .modal.is-open .modal__panel { opacity: 1; transform: translate(-50%, -50%); }
.modal__close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: grid; place-items: center; color: var(--ink-mute); font-size: 1.1rem; }
.modal__close:hover { color: var(--ink); }
.modal h3 { margin-top: 12px; font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em; }
.modal p { margin-top: 14px; color: var(--ink-soft); font-weight: 300; }
.modal__form { margin-top: 24px; }
.modal__alt { margin-top: 18px; text-align: center; }
.modal__alt a { display: inline-flex; align-items: center; gap: 9px; color: var(--lagon); font-weight: 600; font-size: 0.9rem; }
/* Repli de téléchargement de la brochure (URL signée) : posé après l'envoi. */
.modal__dl { margin-top: 18px; }
.modal__dl .btn-line { display: flex; width: 100%; justify-content: center; padding: 14px; }

/* utility */
.center { text-align: center; }
.mt-cta { margin-top: clamp(36px, 5vw, 56px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ≤480px : le header ne garde que marque + langue + burger (devise et séparateurs masqués) */
@media (max-width: 480px) {
  .header-row { gap: 12px; }
  .h-tools { gap: 10px; }
  .h-tools .pipe { display: none; }
  .cur-wrap { display: none; }
}

/* ============================================================
   AJOUTS — bouton olive, catalogue+brochures, art de vivre,
   l'agence, vendre/confier, contact
   ============================================================ */

/* ---------- CATALOGUE + BROCHURES ---------- */
/* Modificateurs de fond — DA #2 : « moins de blocs blancs ». L'accueil alignait
   jusqu'à trois sections --paper d'affilée ; ces classes cassent les suites sans
   toucher à la palette. */
.section--paper2 { background: var(--paper-2); }
.section--cream { background: var(--cream-2); }

.catalogue { background: var(--paper); }
.cat-grid { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: box-shadow 0.4s var(--ease), transform 0.4s var(--ease); }
.cat-card:hover { box-shadow: 0 18px 50px rgba(28,26,23,0.10); transform: translateY(-3px); }
.cat-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.cat-card__media a { display: block; height: 100%; }
.cat-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.cat-card:hover .cat-card__media img { transform: scale(1.05); }
.cat-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.cat-card__loc { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.cat-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.45rem; letter-spacing: -0.005em; margin-top: 5px; }
.cat-card__specs { margin-top: 11px; color: var(--ink-soft); font-size: 0.9rem; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cat-card__specs li { display: inline-flex; align-items: center; gap: 6px; }
.cat-card__price { margin-top: 14px; font-weight: 600; font-size: 1.12rem; letter-spacing: -0.01em; }
.cat-card__price .per,
.vcard__price .per { font-weight: 400; font-size: 0.84rem; color: var(--ink-mute); }
.cat-card__actions { margin-top: auto; padding-top: 16px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); }
.cat-card__actions .cta { font-size: 0.86rem; }
.brochure-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; color: var(--lagon-deep); white-space: nowrap; }
.brochure-link svg { width: 15px; height: 15px; }
.brochure-link:hover { color: var(--lagon-deep); }
.catalogue__foot { margin-top: clamp(36px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.catalogue__count { color: var(--ink-mute); font-size: 0.92rem; }

/* ---------- ART DE VIVRE (conciergerie élargie : services invités) ---------- */
.artvivre { background: var(--cream-2); }
.services__grid { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 680px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .services__grid { grid-template-columns: repeat(3, 1fr); } }
.service { background: var(--paper); padding: clamp(26px, 3vw, 38px) clamp(22px, 2.5vw, 32px); }
.service__ic { width: 40px; height: 40px; display: grid; place-items: center; color: var(--lagon); }
.service__ic svg { width: 28px; height: 28px; }
.service h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; margin-top: 14px; }
.service p { margin-top: 9px; color: var(--ink-mute); font-size: 0.94rem; font-weight: 300; line-height: 1.5; }

/* ---------- L'AGENCE / À PROPOS ---------- */
.agence { background: var(--paper); }
.agence__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 940px) { .agence__grid { grid-template-columns: 1.05fr 0.95fr; } }
.agence__video { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.agence__video img { width: 100%; height: 100%; object-fit: cover; }
.agence__video::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(transparent, rgba(0,0,0,0.42)); pointer-events: none; }
/* Variante vidéo : la présentation de l'équipe est filmée en 9/16 (format story).
   Le conteneur épouse ce ratio — un recadrage en 4/5 amputerait les sous-titres
   français, qui sont INCRUSTÉS dans l'image. Largeur bornée pour que le bloc ne
   dépasse pas la colonne de texte en regard. */
.agence__video--film { aspect-ratio: 9 / 16; max-width: 400px; margin-inline: auto; background: var(--ink); }
.agence__video--film video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le dégradé de base est en bas (il masquerait les sous-titres incrustés et la
   barre de contrôles) : on le bascule en haut, juste pour asseoir le libellé. */
.agence__video--film::after { inset: 0 0 auto 0; height: 26%; background: linear-gradient(rgba(0,0,0,0.38), transparent); }
.agence__vlabel--top { top: 16px; bottom: auto; }

.agence__vlabel { position: absolute; left: 18px; bottom: 16px; z-index: 1; color: #fff; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.values { margin-top: 28px; display: grid; gap: 1px; }
.values li { display: flex; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.values .vn { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--olive); font-weight: 600; flex: none; }
.values .vt b { display: block; font-weight: 600; font-size: 1.02rem; }
.values .vt span { color: var(--ink-mute); font-size: 0.92rem; }
.team { border-top: 1px solid var(--line); margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(40px, 5vw, 64px); }
.team__grid { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 680px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
.member { display: flex; gap: 18px; align-items: flex-start; }
.member__ava { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--lagon-soft); flex: none; }
.member__ava img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.member__name { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.005em; }
.member__role { color: var(--lagon-deep); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; margin-top: 3px; text-transform: uppercase; }
.member__bio { margin-top: 9px; color: var(--ink-soft); font-size: 0.94rem; font-weight: 300; line-height: 1.55; max-width: 40ch; }

/* ---------- VENDRE / CONFIER (soumission propriétaires) ---------- */
.vendre { background: var(--cream-2); }
.vendre__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (min-width: 940px) { .vendre__grid { grid-template-columns: 0.88fr 1.12fr; } }
.vendre__points { margin-top: 28px; display: grid; gap: 1px; }
.vendre__points li { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.vendre__points .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); flex: none; margin-top: 8px; }
.form-card { border: 1px solid var(--line); padding: clamp(24px, 3vw, 38px); background: var(--paper); }
.form-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field select {
  width: 100%; background: var(--paper); border: 1px solid var(--line);
  padding: 13px 14px; font-size: 1rem; transition: border-color 0.3s;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23756f66' stroke-width='1.4'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 10px;
}
.field select:focus { outline: none; border-color: var(--lagon); }
.choice { display: flex; flex-wrap: wrap; gap: 10px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span { display: inline-block; padding: 10px 16px; border: 1px solid var(--line); font-size: 0.88rem; font-weight: 500; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.choice input:checked + span { background: var(--lagon); color: #fff; border-color: var(--lagon); }
.choice input:focus-visible + span { outline: 2px solid var(--lagon); outline-offset: 2px; }

/* ---------- CONTACT ---------- */
.contact { background: var(--paper-2); }
.contact__grid { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 60px); align-items: start; }
@media (min-width: 940px) { .contact__grid { grid-template-columns: 1.1fr 0.9fr; } }
.contact__info { display: grid; gap: 22px; }
.contact__info .row { display: flex; gap: 16px; align-items: flex-start; }
.contact__info .ic { width: 22px; color: var(--lagon); flex: none; margin-top: 2px; }
.contact__info .ic svg { width: 20px; height: 20px; }
.contact__info b { display: block; font-weight: 600; font-size: 0.96rem; }
.contact__info a, .contact__info p { color: var(--ink-soft); font-size: 0.96rem; }
.contact__info a:hover { color: var(--lagon); }
.contact__map { margin-top: 6px; aspect-ratio: 16 / 9; border: 1px solid var(--line); overflow: hidden; }
.contact__map iframe { width: 100%; height: 100%; border: 0; }

/* ============ CATALOGUE (page dédiée + filtres) ============ */
.cat-page { padding-top: clamp(28px, 4vw, 56px); padding-bottom: clamp(64px, 9vw, 130px); }
.cat-page__head { max-width: 64ch; margin-top: 22px; }
.cat-page__head h1 { margin-top: 14px; }
.cat-page__head .lead { margin-top: 16px; }

.filters { margin-top: clamp(28px, 4vw, 44px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.filters__field { display: flex; flex-direction: column; gap: 8px; }
.filters__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.filters__select { appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; padding: 10px 38px 10px 14px; min-width: 168px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23756f66' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.filters__select:hover { border-color: var(--ink-mute); }
.filters__select:focus-visible { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.seg__btn { font-family: var(--font-body); font-size: 0.9rem; color: var(--ink-soft); background: var(--paper); border: 0; border-left: 1px solid var(--line); padding: 10px 18px; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.seg__btn:first-child { border-left: 0; }
.seg__btn:hover { background: var(--paper-2); }
.seg__btn[aria-pressed="true"] { background: var(--lagon); color: #fff; }

.filters__reset { margin-left: auto; align-self: flex-end; font-family: var(--font-body); font-size: 0.86rem; color: var(--ink-mute); background: none; border: 0; padding: 10px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.filters__reset:hover { color: var(--lagon); }

.cat-page__count { margin-top: 20px; margin-bottom: 26px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

.cat-empty { text-align: center; max-width: 52ch; margin: clamp(40px, 7vw, 80px) auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cat-empty .lead { color: var(--ink-soft); }
.cat-empty .btn-line { margin-top: 6px; }

@media (max-width: 720px) {
  .filters { gap: 16px; }
  .filters__field { flex: 1 1 100%; }
  .filters__field--seg .seg, .filters__select { width: 100%; }
  .seg { width: 100%; }
  .seg__btn { flex: 1; text-align: center; }
  .filters__reset { margin-left: 0; }
}

/* Galerie fiche : mode photo unique (villas sans galerie complète) */
.gallery__grid.is-desktop.gallery--single { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 16 / 9; }
.gallery--single .gallery__cell:nth-child(1) { grid-column: 1 / -1; grid-row: 1 / -1; }

/* L'attribut [hidden] doit l'emporter sur les règles display: des composants
   (budget, état vide, simulateur, récit, cellules galerie masquées par JS). */
[hidden] { display: none !important; }

/* ============ COMPARATEUR ============ */

/* Toggle « Comparer » sur les cartes du catalogue (sur la photo, en haut à droite) */
.cat-compare {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.95); color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cat-compare__ic { display: inline-flex; }
.cat-compare__ic svg { width: 14px; height: 14px; display: block; }
.cat-compare:hover { background: #fff; color: var(--lagon-deep); }
.cat-compare:focus-visible { outline: 2px solid var(--lagon); outline-offset: 2px; }
.cat-compare[aria-pressed="true"] { background: var(--lagon); color: #fff; }
.cat-compare[aria-pressed="true"]:hover { background: var(--lagon-deep); }
.cat-compare[aria-pressed="true"] .cat-compare__ic { display: none; }
.cat-compare[aria-pressed="true"]::before { content: "\2713"; font-weight: 700; }

/* Barre collante de sélection (catalogue) */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 75;
  background: var(--ink); color: #fff;
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.22);
  transform: translateY(100%); transition: transform 0.4s var(--ease-out);
}
body.cmp-tray-open .cmp-tray { transform: translateY(0); }
body.cmp-tray-open { padding-bottom: 92px; }
.cmp-tray__inner { display: flex; align-items: center; gap: 18px; padding: 13px 0; flex-wrap: wrap; }
.cmp-tray__items { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; }
.cmp-tray__chip { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.08); padding: 5px 8px 5px 5px; }
.cmp-tray__chip img { width: 46px; height: 34px; object-fit: cover; display: block; }
.cmp-tray__ph { width: 46px; height: 34px; background: rgba(255,255,255,0.15); display: block; }
.cmp-tray__name { font-size: 0.84rem; font-weight: 500; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-tray__rm { background: none; border: 0; color: rgba(255,255,255,0.7); font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.cmp-tray__rm:hover { color: #fff; }
.cmp-tray__actions { display: flex; align-items: center; gap: 16px; flex: none; }
.cmp-tray__clear { background: none; border: 0; color: rgba(255,255,255,0.75); font-family: var(--font-body); font-size: 0.86rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cmp-tray__clear:hover { color: #fff; }
.cmp-tray__go.is-disabled { opacity: 0.45; pointer-events: none; }
.cmp-tray__hint { flex: 1 1 100%; margin: 0; font-size: 0.8rem; color: var(--lagon-soft); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.3s var(--ease), max-height 0.3s var(--ease); }
.cmp-tray__hint.is-on { opacity: 1; max-height: 2.4em; }

/* Page comparer.html */
.cmp-meta { margin-top: 12px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.cmp-meta:empty { display: none; }
.cmp-back { margin-top: 16px; }
.cmp-back .cta { font-size: 0.86rem; }

.cmp-scroll { margin-top: clamp(24px, 4vw, 40px); overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); }
.cmp { width: 100%; border-collapse: collapse; min-width: 640px; background: var(--paper); }
.cmp th, .cmp td { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: middle; font-size: 0.95rem; }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) .cmp__rowhead { background: var(--paper-3); }

/* 1re colonne = libellés de lignes, collante au scroll horizontal */
.cmp__rowhead {
  position: sticky; left: 0; z-index: 2; border-left: 0; background: var(--paper);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap; width: 1%;
}
.cmp thead .cmp__corner { z-index: 3; }

/* En-tête de colonne villa */
.cmp__villa { background: var(--paper); vertical-align: top; min-width: 210px; position: relative; }
.cmp__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); margin-bottom: 12px; }
.cmp__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp__media-ph { display: block; width: 100%; height: 100%; background: var(--paper-2); }
.cmp__name { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.005em; display: block; }
.cmp__name:hover { color: var(--lagon-deep); }
.cmp__zone { display: block; margin-top: 3px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); }
.cmp__remove {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border: 0; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-size: 1.2rem; line-height: 1; border-radius: 50%; display: grid; place-items: center;
}
.cmp__remove:hover { background: var(--ink); color: #fff; }

.cmp__per { font-weight: 400; font-size: 0.82rem; color: var(--ink-mute); }
.cmp__na { color: var(--ink-mute); }
.cmp__chip { display: inline-block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; background: var(--cream-2); color: var(--ink-soft); margin: 2px 4px 2px 0; }
.cmp__best { color: var(--lagon-deep); font-weight: 600; }
.cmp__top { color: var(--lagon); font-size: 0.7rem; margin-right: 5px; }
.cmp tfoot th, .cmp tfoot td { background: var(--paper); vertical-align: top; }
.cmp__actions .cta { font-size: 0.86rem; }
.cmp__actions .brochure-link { display: inline-flex; margin-top: 12px; }

@media (max-width: 640px) {
  .cmp th, .cmp td { padding: 11px 12px; font-size: 0.9rem; }
  .cmp__villa { min-width: 158px; }
  .cmp__name { font-size: 1.08rem; }
  .cmp-tray__name { max-width: 9ch; }
  .cat-compare__txt { display: none; }
  .cat-compare { padding: 8px; }
}

/* ============ Prise de rendez-vous (Module 2.5) ============ */
.rdv__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }
.rdv-picker__label { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; }
.rdv-picker__step + .rdv-picker__step { margin-top: 22px; }
.rdv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rdv-chip {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: 4px; padding: 9px 13px; cursor: pointer; line-height: 1.2;
  font-size: 0.92rem; transition: border-color .15s, background .15s, color .15s;
}
.rdv-chip:hover { border-color: var(--lagon); }
.rdv-chip:focus-visible { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }
.rdv-chip.is-active { background: var(--lagon); border-color: var(--lagon); color: #fff; }
.rdv-selected { display: block; margin: 0 0 16px; padding: 11px 14px; background: var(--lagon-soft); border-radius: 4px; color: var(--ink); font-size: 0.95rem; }
button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 860px) {
  .rdv__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ============ Simulateur de rendement (Module 2.6) ============ */
.sim-app { display: grid; grid-template-columns: 350px 1fr; gap: clamp(22px, 3.5vw, 46px); align-items: start; margin-top: clamp(24px, 4vw, 40px); }

/* ---- Saisie ---- */
.sim-form {
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(20px, 2.4vw, 28px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  position: sticky; top: calc(var(--header-h) + 16px);
}
.sim-field { grid-column: 1 / -1; }
.sim-field--half { grid-column: span 1; }
.sim-form label {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.sim-rangehead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.sim-rangehead label { margin-bottom: 0; }
.sim-input, .sim-select {
  width: 100%; border: 1px solid var(--line); background: var(--paper);
  color: var(--ink); font-family: var(--font-body); font-size: 1rem;
  padding: 11px 13px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.sim-input:focus, .sim-select:focus { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }
.sim-rangeval { color: var(--lagon-deep); font-weight: 700; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.sim-range { width: 100%; accent-color: var(--lagon); height: 6px; cursor: pointer; }
.sim-range-ticks { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--ink-mute); margin-top: 5px; }
/* Interrupteur « qui paie le ménage » : 2 radios rendues en segments. Le <span>
   porte l'apparence (sélecteur frère), l'input reste focusable pour le clavier. */
.sim-seg__head {
  display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.sim-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sim-form .sim-seg__opt { display: block; margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; }
.sim-seg__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sim-seg__opt span {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 46px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper); color: var(--ink-soft); font-size: 0.8rem; line-height: 1.25;
  cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease;
}
.sim-seg__opt:hover span { border-color: var(--lagon); }
.sim-seg__opt input:checked + span { border-color: var(--lagon); background: var(--lagon-soft); color: var(--ink); font-weight: 600; }
.sim-seg__opt input:focus-visible + span { border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }
.sim-seg__hint { margin: 8px 0 0; font-size: 0.74rem; line-height: 1.45; color: var(--ink-mute); }
.sim-form__note { grid-column: 1 / -1; margin: 0; font-size: 0.78rem; line-height: 1.45; color: var(--ink-mute); }

/* ---- Résultats ---- */
.sim-nightly { margin: 0 0 18px; font-size: 0.96rem; color: var(--ink-soft); }
.sim-nightly strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-nightly small { color: var(--ink-mute); }

.sim-lenses { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sim-lens { border: 1px solid var(--line); padding: clamp(20px, 2.2vw, 28px); background: var(--paper); }
.sim-lens--conc { background: var(--paper-2); border-color: var(--lagon-soft); }
.sim-lens__eyebrow { margin: 0 0 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lagon-deep); }
.sim-lens__title { margin: 0 0 18px; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.01em; }

.sim-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sim-kpi { display: flex; flex-direction: column; gap: 3px; }
.sim-kpi__k { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-mute); }
.sim-kpi__v { font-family: var(--font-display); font-weight: 500; font-size: 1.7rem; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.sim-kpi__sub { font-size: 0.74rem; color: var(--ink-mute); }
.sim-kpi--hero .sim-kpi__v { color: var(--lagon-deep); font-size: 2rem; }

.sim-flow { list-style: none; margin: 0; padding: 0; }
.sim-flow li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; font-size: 0.96rem; border-bottom: 1px solid var(--line-soft); }
.sim-flow li span { color: var(--ink-soft); }
.sim-flow li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-flow__sub span { color: var(--ink-mute); padding-left: 12px; }
.sim-flow__conc span em { color: var(--lagon-deep); font-style: normal; font-weight: 600; }
.sim-flow__total { border-bottom: 0 !important; margin-top: 4px; padding-top: 13px; border-top: 1.5px solid var(--ink) !important; }
.sim-flow__total span { color: var(--ink); font-weight: 600; }
.sim-flow__total strong { color: var(--lagon-deep); font-size: 1.18rem; }
.sim-flow__mo { border-bottom: 0; padding-top: 4px; }
.sim-flow__mo span, .sim-flow__mo strong { color: var(--ink-mute); font-size: 0.86rem; }

.sim-hint { margin: 16px 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--ink-mute); }
.sim-hint strong { color: var(--lagon-deep); }
.sim-hint--em { color: var(--ink-soft); }

/* ---- Scénarios ---- */
.sim-scn-wrap { margin-top: 22px; }
.sim-scn-head { margin: 0 0 10px; font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.sim-scns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sim-scn {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  border: 1px solid var(--line); background: var(--paper); border-radius: 4px;
  padding: 13px 14px; cursor: pointer; font-family: var(--font-body);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.sim-scn:hover { border-color: var(--lagon); }
.sim-scn:focus-visible { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }
.sim-scn.is-on { border-color: var(--lagon); background: var(--lagon-soft); }
.sim-scn__lbl { font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.sim-scn__occ { font-size: 0.74rem; color: var(--ink-mute); }
.sim-scn__y { margin-top: 4px; font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; color: var(--lagon-deep); font-variant-numeric: tabular-nums; }
.sim-scn__y small { font-family: var(--font-body); font-size: 0.66rem; color: var(--ink-mute); }
.sim-scn__r { font-size: 0.82rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- Détail des charges ---- */
.sim-details { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.sim-details summary { cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--lagon-deep); list-style: none; }
.sim-details summary::-webkit-details-marker { display: none; }
.sim-details summary::after { content: " ▾"; color: var(--ink-mute); }
.sim-details[open] summary::after { content: " ▴"; }
.sim-charges { list-style: none; margin: 14px 0 0; padding: 0; }
.sim-charge { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.92rem; }
.sim-charge__k { color: var(--ink-soft); display: flex; flex-direction: column; }
.sim-charge__k small { color: var(--ink-mute); font-size: 0.76rem; }
.sim-charge__v { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.sim-charge__v em { font-style: normal; color: var(--ink-mute); font-size: 0.8rem; margin-left: 6px; }
.sim-charge--sub .sim-charge__k, .sim-charge--sub .sim-charge__v { font-weight: 600; }
.sim-charge--off .sim-charge__k, .sim-charge--off .sim-charge__v { color: var(--ink-mute); }
.sim-charge--tot { border-bottom: 0; border-top: 1.5px solid var(--ink); margin-top: 4px; padding-top: 11px; font-weight: 700; }
.sim-charge--tot .sim-charge__v { color: var(--lagon-deep); }

.sim-disclaimer { margin-top: clamp(26px, 3vw, 40px); max-width: 80ch; font-size: 0.82rem; line-height: 1.6; color: var(--ink-mute); }
.sim-disclaimer strong { color: var(--ink-soft); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .sim-app { grid-template-columns: 1fr; }
  .sim-form { position: static; }
}
@media (max-width: 720px) {
  .sim-lenses { grid-template-columns: 1fr; }
  .sim-kpis { grid-template-columns: 1fr 1fr; }
  .sim-scns { grid-template-columns: 1fr; }
}

/* =============================================================================
   Le Cercle — newsletter (Module 3) : page cercle.html + bande home #newsletter
   ============================================================================= */
.cercle-page .cat-page__head { max-width: 60ch; }

/* Carte formulaire (page dédiée) */
.cercle-card {
  max-width: 520px; margin: clamp(20px, 3vw, 32px) 0 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 1px 0 var(--line-soft);
}
.cercle-form { display: flex; flex-direction: column; gap: 14px; }
.cercle-form .field { margin: 0; }
.cercle-consent {
  margin: 4px 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--ink-mute);
}
.cercle-consent a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }

/* Bandeau de statut (confirmation / désinscription) */
.cercle-banner {
  margin: 0 0 clamp(18px, 2.5vw, 26px); padding: 14px 18px;
  border-radius: 12px; font-size: 0.95rem; line-height: 1.5;
  border: 1px solid var(--line);
}
.cercle-banner.is-ok {
  background: var(--lagon-soft); border-color: var(--lagon);
  color: var(--lagon-deep);
}
.cercle-banner.is-warn {
  background: #fbf3e8; border-color: #e6c89c; color: #8a5a00;
}

/* Bande home #newsletter (CTA newsletter au-dessus du pied de page ; l'ancre
   #cercle vise la section signature « Entrez dans le Cercle », plus haut) */
.cercle-band { background: var(--cream-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 84px) 0; }
.cercle-band__inner {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 5vw, 64px); align-items: center;
}
.cercle-band__text { max-width: 46ch; }
.cercle-band__text .lead { margin-bottom: 0; }
.cercle-band .cercle-form {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 16px; padding: clamp(20px, 2.6vw, 28px);
}

@media (max-width: 860px) {
  .cercle-band__inner { grid-template-columns: 1fr; }
}

/* =================== Le Journal / Blog (blog.html, article.html) =================== */
.blog-page .cat-page__head { max-width: 64ch; }

/* Filtres par catégorie */
.blog-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 4px; }
.blog-chip { font: inherit; font-size: 0.86rem; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: color .25s, border-color .25s, background .25s; }
.blog-chip:hover { border-color: var(--lagon); color: var(--lagon); }
.blog-chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Grille d'articles */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); margin-top: 30px; }
.blog-empty { margin-top: 40px; color: var(--ink-mute); font-size: 1.02rem; }

/* Carte article (réutilisée par « À lire aussi ») */
.blog-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.blog-card:hover { box-shadow: 0 18px 50px rgba(28,26,23,0.10); transform: translateY(-3px); }
.blog-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); }
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
.blog-card__media--empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--lagon-soft), var(--paper-2)); }
.blog-card__mono { font-family: var(--font-display); font-size: 1.5rem; color: var(--lagon-deep); letter-spacing: .02em; }
.blog-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 24px; flex: 1; }
.blog-card__cat { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lagon-deep); font-weight: 600; }
.blog-card__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.blog-card a:hover .blog-card__title { color: var(--lagon-deep); }
.blog-card__excerpt { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); font-weight: 300; }
.blog-card__foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blog-card__date { font-size: 0.82rem; color: var(--ink-mute); }

/* Article */
.article { padding-top: clamp(24px, 3.4vw, 48px); }
.article__wrap { max-width: 760px; }
.article-head { margin-top: 22px; }
.article-head .eyebrow { color: var(--lagon-deep); }
.article-title { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.015em; margin-top: 12px; }
.article-meta { margin-top: 16px; font-size: 0.9rem; color: var(--ink-mute); }
.article-cover { margin: clamp(26px, 4vw, 44px) 0 0; }
.article-cover img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* Corps de l'article (typographie de lecture, rendu markdown-lite) */
.article-body { margin-top: clamp(26px, 4vw, 40px); font-size: 1.075rem; line-height: 1.72; color: var(--ink-soft); font-weight: 300; }
.article-body h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); margin-top: 1.7em; }
.article-body h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--ink); margin-top: 1.5em; }
.article-body p { margin-top: 1.1em; }
.article-body p:first-child, .article-body h2:first-child, .article-body h3:first-child { margin-top: 0; }
.article-body a { color: var(--lagon-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--lagon); }
.article-body strong { font-weight: 600; color: var(--ink); }
.article-body ul { margin-top: 1.1em; padding-left: 1.3em; list-style: disc; }
.article-body li { margin-top: 0.5em; }
.article-body img { width: 100%; height: auto; }
.article-body__fig { margin: 1.6em 0; }
.article .cmp-back { margin-top: clamp(34px, 5vw, 54px); }

/* À lire aussi */
.related { background: var(--paper-2); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 84px) 0; margin-top: clamp(48px, 6vw, 80px); }
.related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); margin-top: 28px; }

@media (max-width: 980px) {
  .blog-grid, .related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .blog-grid, .related__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   QUESTIONNAIRE DE QUALIFICATION (contact.html)
   ------------------------------------------------------------
   Retour cliente du 18/08/2026 : les formulaires « avaient du sens mais étaient
   mis bout à bout à la fin sur la même page ». D'où le parti pris ici : UNE
   question à l'écran, jamais deux saisies visibles en même temps. Le sélecteur
   de rendez-vous n'apparaît qu'APRÈS l'envoi, sur clic explicite.
   ============================================================ */

/* Héros court : la page est un outil, pas une vitrine — le formulaire doit être
   atteignable sans scroller longtemps sur un portable. */
.hero--short { min-height: min(52svh, 520px); }
.hero--short .hero__title { max-width: 18ch; }

.qualif__wrap { max-width: 900px; }
.qualif__card {
  margin-top: clamp(26px, 4vw, 42px);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: clamp(22px, 3.4vw, 46px);
}

/* ---- Fil de progression ---- */
.qualif__dots {
  display: flex; align-items: center; gap: clamp(10px, 2.4vw, 26px);
  list-style: none; padding: 0 0 18px; margin: 0 0 clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--line-soft);
}
.qualif__dots li { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-mute); }
.qualif__dot-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.qualif__dot-l { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.qualif__dots li.is-current { color: var(--ink); }
.qualif__dots li.is-current .qualif__dot-n { border-color: var(--lagon); color: var(--lagon); }
.qualif__dots li.is-done .qualif__dot-n { background: var(--lagon); border-color: var(--lagon); color: #fff; }
@media (max-width: 620px) {
  .qualif__dot-l { display: none; }
  .qualif__dots { gap: 12px; }
  .qualif__dots li::after { content: ""; width: 22px; height: 1px; background: var(--line); }
  .qualif__dots li:last-child::after { display: none; }
}

/* Rappel du projet choisi, en tête des étapes 2 et 3. */
.qualif__recap {
  display: inline-block; margin: 0 0 18px;
  padding: 6px 12px; background: var(--lagon-soft); color: var(--ink);
  font-size: 0.85rem; border-radius: 3px;
}

/* ---- Étapes ---- */
/* Le masquage vient de l'attribut `hidden` (HTML + tcs-qualif.js), pas d'ici. */
.qualif__step { border: 0; padding: 0; margin: 0; }
.qualif__q {
  font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500;
  line-height: 1.2; letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 clamp(16px, 2.4vw, 26px);
}
.qualif__q:focus { outline: none; }
.is-js .qualif__step { animation: qualif-in .45s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .is-js .qualif__step { animation: none; } }
@keyframes qualif-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Étape 1 : les 4 portes d'entrée ---- */
.qualif__choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qualif-choice {
  display: block; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper);
  padding: clamp(15px, 2vw, 22px);
  transition: border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.qualif-choice:hover { border-color: var(--lagon); transform: translateY(-2px); }
.qualif-choice:focus-visible { outline: none; border-color: var(--lagon); box-shadow: 0 0 0 3px var(--lagon-soft); }
.qualif-choice.is-active { border-color: var(--lagon); background: var(--paper-2); }
.qualif-choice__t {
  display: block; font-family: var(--font-display); font-size: 1.25rem;
  font-weight: 500; color: var(--ink); line-height: 1.2;
}
.qualif-choice__d { display: block; margin-top: 7px; font-size: 0.92rem; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 620px) { .qualif__choices { grid-template-columns: 1fr; } }

.qualif__aside { margin-top: 22px; font-size: 0.92rem; color: var(--ink-mute); }
.qualif__aside a { color: var(--lagon-deep); text-decoration: underline; text-underline-offset: 3px; }
.qualif__aside a:hover { color: var(--lagon); }

/* ---- Étape 2 : les précisions, par branche ---- */
.qualif__branch { border: 0; padding: 0; margin: 0; min-width: 0; }
.qualif__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.qualif__grid > .field { min-width: 0; }
@media (max-width: 620px) { .qualif__grid { grid-template-columns: 1fr; } }

/* ---- Navigation entre étapes ---- */
.qualif__nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(20px, 3vw, 30px); flex-wrap: wrap; }
.qualif__nav .btn-fill { margin-left: auto; }
.arrow--back { display: inline-block; }

.qualif__consent { margin-top: 16px; font-size: 0.82rem; color: var(--ink-mute); line-height: 1.55; }
.qualif__consent a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Confirmation + proposition de rendez-vous ---- */
.qualif__done-k { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lagon); margin: 0 0 12px; }
.qualif__done-t { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; color: var(--ink); margin: 0 0 12px; }
.qualif__done-l { color: var(--ink-soft); font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; max-width: 56ch; margin: 0 0 24px; }

/* ---- Coordonnées sans saisie (bas de page) ---- */
.contact__grid--info { grid-template-columns: 1fr 1.15fr; }
.contact__grid--info .contact__map { margin-top: 0; }
@media (max-width: 860px) { .contact__grid--info { grid-template-columns: 1fr; } }

/* ---- Clôture de l'accueil (remplace la bande newsletter, 18/08/2026) ---- */
.closing__inner { text-align: center; max-width: 720px; margin-inline: auto; }
/* `balance` évite le mot orphelin sur la dernière ligne du titre centré ;
   les navigateurs qui ne le connaissent pas ignorent la déclaration. */
.closing__inner .h2 { text-wrap: balance; }
.closing__inner .lead { margin-top: 14px; margin-inline: auto; }
.closing__cta { margin-top: clamp(22px, 3vw, 32px); display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------------------
   404 — la liste de rattrapage reprend le style clé/valeur de .concierge__list ;
   seule la zone cliquable est ajoutée (toute la ligne, pas seulement le libellé).
   --------------------------------------------------------------------------- */
.e404-links li { padding: 0; }
.e404-links a { display: flex; gap: 16px; align-items: baseline; width: 100%; padding: 16px 0; text-decoration: none; color: inherit; transition: color .2s ease; }
.e404-links a:hover .k { color: var(--lagon); }