/* ============================================================
   WALDHOF v2 — "Quiet Luxury"
   Design language: Apple × Tesla — minimalist, full-bleed,
   monochrome with a single restrained gold accent.
   ============================================================ */

/* ---- Design tokens -------------------------------------- */
:root {
  /* Palette — monochrome + one accent */
  --ink:        #01222f;   /* bleu marine Waldhof (waldhof.fr) — plus aucun noir */
  --ink-soft:   #3c4f5e;
  --muted:      #6e6e73;   /* secondary text — contraste AA sur blanc */
  --line:       #d2d2d7;   /* hairline */
  --line-soft:  #e8e8ed;
  --bg:         #ffffff;
  --bg-alt:     #f5f5f7;   /* Apple light gray */
  --black:      #01222f;   /* panneaux pleine largeur : marine de marque, jamais noir */
  --gold:       #b8975a;   /* accent — used sparingly */
  --gold-soft:  #c9ad77;
  --gold-text:  #8a6f3c;   /* or lisible sur blanc (≥4.5:1) — pour le texte uniquement */

  /* Typography — SUPERIOR TITLE (titres, auto-hebergee, charte Waldhof)
     + INSTRUMENT SANS (corps, Google Fonts). Fraunces reste en fallback
     titres (et sert les logos presse SVG). Le corps n'est PAS en Arpona :
     le pack local n'a aucune graisse romane 400-600 (seulement Light 300 /
     ExtraBold 800) — Arpona Sans, la vraie police corps de la charte,
     reste a licencier. */
  --sans:  "Instrument Sans", "Arpona Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;

  /* Fluid type scale */
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h1:      clamp(2.1rem, 4.2vw, 3.4rem);
  --fs-h2:      clamp(1.75rem, 3.2vw, 2.75rem);
  --fs-h3:      clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-lead:    clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  /* Spacing rhythm (8pt) */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;    --s8: 8rem;
  --s9: 10rem;

  --maxw: 1180px;
  --maxw-wide: 1440px;
  --nav-h: 72px;

  --radius: 18px;
  --radius-sm: 12px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 0.5s var(--ease);
  --t-fast: 0.25s var(--ease);

  --z-cta: 80;       /* barre CTA mobile fiche bien */
  --z-curtain: 130;  /* .sw-after : contenu qui glisse sur la bannière (index) */
  --z-fab: 140;      /* bouton WhatsApp — au-dessus du rideau */
  --z-nav: 150;      /* header — au-dessus du rideau */
  --z-menu: 200;
}


/* ---- SUPERIOR TITLE (titres — police de marque, auto-hebergee) ----
   Version TRIAL (Befonts) : acheter la licence commerciale avant la prod.
   Le Medium couvre 500-600 (les stats en 600 restent en Medium, pas de
   faux-gras) ; le Bold prend 700+. */

/* ---- Reset ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-x: clip;   /* clip n'instaure pas de conteneur de defilement -> position:sticky reste fonctionnel */
}
body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
a { color: inherit; text-decoration: none; transition: color var(--t-fast), opacity var(--t-fast); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(184,151,90,0.24); }

/* Grain de film — texture subtile sur toute la page, casse la platitude numérique */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---- Typography ----------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; text-wrap: balance; }
.display {
  font-family: var(--serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--gold { color: var(--gold-text); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }

/* ---- Layout --------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem); }
.container--wide { max-width: var(--maxw-wide); }
/* Respiration généreuse mais contenue : ~7 rem max sur grand écran */
.section { padding-block: clamp(4.5rem, 9vw, 7rem); }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--black); color: #fff; }
.section--flush { padding-block: 0; }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }

.section-head { max-width: 720px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: var(--s2); }
.section-head .eyebrow::before, .section-head .eyebrow::after {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.45; }
.section-head h2 { font-size: var(--fs-h2); margin-bottom: var(--s3); }
.section-head p { color: var(--muted); font-size: var(--fs-lead); }
.section--dark .section-head p { color: rgba(255,255,255,0.55); }

/* ---- Buttons -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0;
  padding: 0.85rem 1.6rem; border-radius: 980px;
  min-height: 44px; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), border-color var(--t-fast), opacity var(--t-fast);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #011b25; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-soft); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: rgba(255,255,255,0.88); }
.btn--outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.btn--outline-white:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
/* Bouton « island » : flèche nichée dans sa propre pastille */
.btn--island { padding-right: 0.55rem; gap: 0.8rem; }
.btn__disc { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); transition: transform var(--t-fast), background var(--t-fast); }
.btn__disc svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.btn--island:hover .btn__disc { transform: translate(2px, -1px); background: rgba(255,255,255,0.26); }
.btn--ghost .btn__disc { background: rgba(29,29,31,0.06); }
.btn--ghost.btn--island:hover .btn__disc { background: rgba(29,29,31,0.10); }
/* Apple-style text link with chevron */
.link-arrow { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold-text); font-weight: 500; font-size: var(--fs-body); }
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--t-fast); }
.link-arrow:hover svg { transform: translateX(4px); }
.section--dark .link-arrow { color: var(--gold-soft); }

/* ---- Navigation ----------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
}
.nav__inner { width: 100%; max-width: var(--maxw-wide); margin-inline: auto; padding-inline: clamp(1.25rem, 5vw, 2.5rem);
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid transparent; border-radius: 980px;
  transition: background 0.45s var(--ease), border-color 0.45s var(--ease),
              box-shadow 0.45s var(--ease), backdrop-filter 0.45s var(--ease),
              margin 0.45s var(--ease), width 0.45s var(--ease), min-height 0.45s var(--ease); }
.nav__logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; letter-spacing: -0.02em; color: #fff; transition: color var(--t-fast); }
.nav__logo b { font-size: 1.15rem; font-weight: 600; }
.nav__logo span { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; font-weight: 500; }
/* Brand logo image (swaps with nav state) */
.nav__logo-img { height: 42px; width: auto; display: block; }
.nav__logo-img--on-light { display: none; }
.nav.is-solid .nav__logo-img--on-dark { display: none; }
.nav.is-solid .nav__logo-img--on-light { display: block; }
@media (max-width: 480px) { .nav__logo-img { height: 32px; } }
.footer__logo-img { height: 38px; width: auto; display: block; margin-bottom: 1.1rem; }
.nav__links { display: flex; gap: clamp(1.25rem, 2.8vw, 2.6rem); }
.nav__links a { font-size: 0.96rem; font-weight: 500; color: rgba(255,255,255,0.88); }
.nav__links a:hover { color: #fff; }
.nav__right { display: flex; align-items: center; gap: 1.25rem; }
.nav__lang { font-size: 0.82rem; color: rgba(255,255,255,0.7); letter-spacing: 0.05em; }
.nav__cta { min-height: 46px; display: inline-flex; align-items: center; font-size: 0.9rem; font-weight: 500; color: #fff; padding: 0.6rem 1.35rem; border: 1px solid rgba(255,255,255,0.45); border-radius: 980px; transition: all var(--t-fast); }
.nav__cta:hover { background: #fff; color: var(--ink); }

/* scrolled / solid state — pilule de verre flottante, détachée du bord */
.nav.is-solid { height: auto; padding-top: 10px; }
.nav.is-solid .nav__inner {
  width: min(var(--maxw-wide), calc(100% - 24px));
  min-height: 62px; padding-block: 0.45rem;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(0,0,0,0.06);
  box-shadow: 0 12px 40px rgba(29,29,31,0.10), inset 0 1px 1px rgba(255,255,255,0.6); }
.nav.is-solid .nav__logo { color: var(--ink); }
.nav.is-solid .nav__links a { color: var(--ink-soft); }
.nav.is-solid .nav__links a:hover { color: var(--ink); }
.nav.is-solid .nav__lang { color: var(--muted); }
.nav.is-solid .nav__cta { color: var(--ink); border-color: var(--line); }
.nav.is-solid .nav__cta:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.nav.is-solid .nav__burger span { background: var(--ink); }

.nav__burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; }
.nav__burger span { display: block; width: 22px; height: 1.5px; background: #fff; transition: transform var(--t-fast), opacity var(--t-fast); }
.nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: rgba(255,255,255,0.98); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; justify-content: center; padding: 6rem 2rem 3rem;
  opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast); }
.menu.is-open { opacity: 1; visibility: visible; }
.menu a { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; padding: 0.6rem 0; color: var(--ink); border-bottom: 1px solid var(--line-soft); }
.menu__foot { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.menu__foot .muted { color: var(--muted); font-size: var(--fs-sm); }
/* Contact du menu mobile : `.menu a` (0-1-1) impose 1.6rem + un filet bas —
   on scope sous .menu (0-2-0) pour reprendre la main. iOS ne linkifie jamais
   les e-mails automatiquement : les deux lignes doivent etre de vrais liens. */
.menu .menu__contact { display: flex; align-items: center; gap: 0.85rem;
  min-height: 48px; padding: 0.35rem 0; border-bottom: 0;
  font-size: 1rem; font-weight: 400; letter-spacing: 0; color: var(--muted);
  transition: color var(--t-fast); }
.menu .menu__contact:hover { color: var(--ink); }
.menu .menu__contact svg { width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--gold); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
/* le sélecteur `.menu a` (0-1-1) bat `.btn--primary` (0-1-0) : re-forcer le texte blanc du CTA */
.menu__foot .btn--primary { color: #fff; border-bottom: 0; text-align: center; }
.menu__close { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px;
  display: grid; place-items: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; }

/* ---- Hero (full-viewport, Tesla-style) ------------------ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; padding: var(--nav-h) 1.5rem 4rem; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: -2; transform: scale(1.05); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0.55) 100%); }
.hero__inner { max-width: 900px; margin-top: 8vh; }
.hero .eyebrow { color: rgba(255,255,255,0.85); margin-bottom: 1.25rem; }
.hero__title { font-size: var(--fs-display); margin-bottom: 1.25rem; text-shadow: 0 2px 30px rgba(0,0,0,0.25); }
.hero__title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
.hero__sub { font-size: var(--fs-lead); color: rgba(255,255,255,0.9); max-width: 600px; margin: 0 auto 2rem; font-weight: 400; }
.hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero__scroll { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.hero__scroll-line { width: 1px; height: 38px; background: linear-gradient(rgba(255,255,255,0.7), transparent); animation: scrollPulse 2s var(--ease) infinite; }
@keyframes scrollPulse { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ---- Stats strip ---------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border-block: 1px solid var(--line-soft); }
.stat { background: var(--bg); padding: clamp(2rem, 4vw, 3rem) 1rem; text-align: center; }
.stat__num { font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 2.75rem); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.stat__num .accent { color: var(--gold); }
.stat__label { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.4rem; }
.section--dark .stats, .section--dark .stat { background: transparent; border-color: rgba(255,255,255,0.12); }
.section--dark .stat { border-right: 1px solid rgba(255,255,255,0.12); }

/* ---- Press logos ---------------------------------------- */
.press { padding-block: clamp(3rem, 6vw, 5rem); background: var(--bg-alt); text-align: center; overflow: hidden; }
.press__label { display: block; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
/* défilement continu à toutes les tailles — rythme lent et feutré sur desktop */
.press__marquee { position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.press__track { display: flex; align-items: center; justify-content: flex-start; width: max-content;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  animation: press-scroll 44s linear infinite; will-change: transform; }
.press__logo { height: clamp(26px, 2.6vw, 32px); width: auto; flex: none; opacity: 0.85; transition: opacity var(--t-fast); }
.press__logo:hover { opacity: 1; }
.press__logo[aria-hidden="true"] { display: block; }

@media (max-width: 860px) {
  .press__track { gap: 2.5rem; animation-duration: 26s; }
  .press__logo { height: 24px; opacity: 0.8; }
}
@keyframes press-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .press__track { animation: none; width: 100%; justify-content: center; }
  .press__logo[aria-hidden="true"] { display: none; }
  @media (max-width: 860px) { .press__track { overflow-x: auto; justify-content: flex-start; } }
}

/* ---- Property cards ------------------------------------- */
.tabs { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 3rem; flex-wrap: wrap; }
.tab-btn { min-height: 44px; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); padding: 0.6rem 1.25rem; border-radius: 980px; transition: all var(--t-fast); }
.tab-btn:hover { color: var(--ink); }
.tab-btn.is-active { background: var(--ink); color: #fff; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp 0.6s var(--ease); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1.25rem, 2.2vw, 1.9rem); }
.card { position: relative; background: var(--bg); border-radius: var(--radius); overflow: hidden; transition: transform var(--t), box-shadow var(--t); }
/* Toute la carte est cliquable : la zone du lien flèche est étendue à la carte
   entière (lien natif : Cmd+clic, clic molette, etc. fonctionnent). */
.card__go::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.card:hover .card__go { background: var(--ink); border-color: var(--ink); }
.card:hover .card__go svg { stroke: #fff; }
.card:hover { transform: translateY(-8px); box-shadow: 0 30px 70px rgba(29,29,31,0.12); }
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__badges { position: absolute; top: 1rem; left: 1rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.badge { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; padding: 0.35rem 0.7rem; border-radius: 980px; backdrop-filter: blur(8px); }
.badge--gold { background: rgba(184,151,90,0.92); color: #fff; }
.badge--light { background: rgba(255,255,255,0.92); color: var(--ink); }
.card__save { position: absolute; top: 0.85rem; right: 0.85rem; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.9); display: grid; place-items: center; backdrop-filter: blur(8px); transition: background var(--t-fast); }
.card__save:hover { background: #fff; }
.card__save svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.card__body { padding: 1.35rem 1.4rem 1.5rem; }
.card__loc { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.card__loc svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.card__title { font-family: var(--serif); font-size: 1.18rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.9rem; line-height: 1.2; }
.card__specs { display: flex; gap: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); margin-bottom: 1rem; }
.card__spec { display: flex; align-items: center; gap: 0.35rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.card__spec svg { width: 15px; height: 15px; fill: none; stroke: var(--muted); stroke-width: 2; }
.card__foot { display: flex; align-items: flex-end; justify-content: space-between; }
.card__price { font-size: 1.25rem; font-weight: 400; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.card__price-sub { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.1rem; }
.card__go { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: all var(--t-fast); }
.card__go:hover { background: var(--ink); border-color: var(--ink); }
.card__go svg { width: 17px; height: 17px; fill: none; stroke: var(--ink); stroke-width: 2; transition: stroke var(--t-fast); }
.card__go:hover svg { stroke: #fff; }

/* ---- Feature panel (Apple split) ------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--reverse .split__text { order: 2; }
.split__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__text h1, .split__text h2 { font-size: var(--fs-h2); margin-block: var(--s2) var(--s3); }
.split__text p { color: var(--muted); margin-bottom: var(--s3); }

/* ---- Promise grid --------------------------------------- */
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.promise { text-align: center; }
.promise__icon { width: 52px; height: 52px; margin: 0 auto 1.25rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); }
.promise__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.4; }
.promise h4 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.promise p { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.section--dark .promise__icon { border-color: rgba(255,255,255,0.2); }
.section--dark .promise p { color: rgba(255,255,255,0.55); }

/* ---- Destination / lifestyle panels (full-bleed tiles) -- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1rem, 1.8vw, 1.75rem); }
.tile { position: relative; aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; }
.tile--wide { grid-column: span 2; aspect-ratio: 16/10; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem; color: #fff; z-index: 1; }
.tile__label { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 0.4rem; }
.tile__body h3 { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 0.5rem; }
.tile__body p { font-size: var(--fs-sm); color: rgba(255,255,255,0.78); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t), opacity var(--t), margin var(--t); }
.tile:hover .tile__body p { max-height: 120px; opacity: 1; margin-bottom: 0.75rem; }
.tile__link { font-size: var(--fs-sm); color: #fff; display: inline-flex; align-items: center; gap: 0.4rem; }

/* ---- Grand CTA (bande finale) ---------------------------- */
.cta-grand__title { font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.08; margin: 1.25rem 0 1.5rem; }
.cta-grand__title em { font-style: italic; font-weight: 400; color: var(--gold-text); }

/* ---- Footer --------------------------------------------- */
.footer { background: var(--black); color: rgba(255,255,255,0.6); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__brand b { color: #fff; font-size: 1.3rem; font-weight: 600; }
.footer__brand p { font-size: var(--fs-sm); margin-top: 1rem; max-width: 280px; }
.footer h5 { color: #fff; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 1.1rem; letter-spacing: 0.02em; }
.footer li { margin-bottom: 0.7rem; }
.footer li a { font-size: var(--fs-sm); color: rgba(255,255,255,0.6); }
.footer li a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: var(--fs-xs); color: rgba(255,255,255,0.65); }
.footer__by { font-size: var(--fs-sm); }
.footer__by a { color: rgba(255,255,255,0.85); transition: color var(--t-fast); }
.footer__by a b { font-weight: 600; }
.footer__by a:hover { color: var(--gold-soft); }

/* ---- Floating WhatsApp ---------------------------------- */
.fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--z-fab); width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); transition: transform var(--t-fast); }
.fab:hover { transform: scale(1.08); }
.fab svg { width: 28px; height: 28px; fill: #fff; }
/* Ordinateur : remonte a mi-hauteur du bord droit — beaucoup de clients
   internationaux passent par WhatsApp, il doit se voir sans etre cherche.
   Le comportement mobile (zone sure du bas) reste gere dans index.html. */
@media (min-width: 861px) {
  .fab { top: 50%; bottom: auto; transform: translateY(-50%);
    right: 1.75rem; width: 58px; height: 58px; }
  .fab:hover { transform: translateY(-50%) scale(1.08); }
  .fab svg { width: 30px; height: 30px; }

  /* Fiche bien : la colonne de reservation est collante et occupe toute la
     bande verticale droite (il ne reste que 40 px de marge a 1440 px). A
     mi-hauteur le bouton recouvrait le champ « Depart », a 3rem il recouvrait
     « Contacter un conseiller ». On garde donc ici le placement d'origine,
     seul creneau qui ne masque aucune action. */
  body:has(.booking) .fab { top: auto; bottom: 1.5rem; right: 1.5rem;
    width: 54px; height: 54px; transform: none; }
  body:has(.booking) .fab:hover { transform: scale(1.08); }
  body:has(.booking) .fab svg { width: 28px; height: 28px; }
}

/* ---- Scroll reveal — entrée lourde et cinématique -------- */
.reveal { opacity: 0; transform: translateY(44px); filter: blur(10px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
[data-stagger] > * { opacity: 0; transform: translateY(44px); filter: blur(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
[data-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Cascade interne des têtes de section : liseré → titre → texte */
.section-head.reveal { opacity: 1; transform: none; filter: none; }
.section-head.reveal :is(.eyebrow, h2, p) { opacity: 0; transform: translateY(26px); filter: blur(8px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); }
.section-head.reveal.is-in :is(.eyebrow, h2, p) { opacity: 1; transform: none; filter: none; }
.section-head.reveal.is-in h2 { transition-delay: 0.12s; }
.section-head.reveal.is-in p { transition-delay: 0.26s; }

/* Les images dézooment lentement à leur entrée en scène */
[data-stagger]:not(.is-in) .tile img,
[data-stagger]:not(.is-in) .card__media img { transform: scale(1.12); }
.reveal:not(.is-in) .split__media img,
.split__media.reveal:not(.is-in) img { transform: scale(1.12); }
.split__media img { transition: transform 1.5s var(--ease); }

/* ---- Responsive ----------------------------------------- */
@media (max-width: 980px) {
  .nav__links, .nav__right { display: none; }
  .nav__burger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__text { order: 0; }
  .split__media { aspect-ratio: 16/11; }
  .tile--wide { grid-column: span 1; aspect-ratio: 3/4; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (hover: none), (max-width: 980px) {
  /* texte des tuiles toujours visible sans hover (mobile + tablettes tactiles) */
  .tile__body p { max-height: 120px; opacity: 1; margin-bottom: 0.75rem; }
}
@media (max-width: 640px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero__actions { flex-direction: column; width: 100%; max-width: 320px; }
  .hero__actions .btn { width: 100%; }
  /* tile p always visible on touch (no hover) */
  .tile__body p { max-height: 120px; opacity: 1; margin-bottom: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, [data-stagger] > *, .section-head.reveal :is(.eyebrow, h2, p) { opacity: 1 !important; transform: none !important; filter: none !important; }
  [data-stagger]:not(.is-in) :is(.tile, .card__media) img, .reveal:not(.is-in) .split__media img { transform: none !important; }
  .hero__bg { transform: none; }
}

/* ============================================================
   SUB-PAGE COMPONENTS
   ============================================================ */

/* Page header (compact hero for inner pages) */
/* Compact : le contenu utile de chaque page doit apparaitre sans scroller */
.page-hero { position: relative; padding: calc(var(--nav-h) + 2.75rem) 0 2.5rem; background: var(--bg-alt); overflow: hidden; }
.page-hero--image { color: #fff; background: var(--black); padding: calc(var(--nav-h) + 4.5rem) 0 3.5rem; }
.page-hero + .section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.page-hero--image .page-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.page-hero--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.35)); z-index: 0; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--fs-h1); margin-top: 0.75rem; max-width: 16ch; }
.page-hero--image h1 { max-width: 20ch; }
.page-hero p { color: var(--muted); font-size: var(--fs-lead); margin-top: 1rem; max-width: 56ch; }
.page-hero--image p { color: rgba(255,255,255,0.8); }

/* Breadcrumb */
.crumb { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.page-hero--image .crumb, .page-hero--image .crumb a { color: rgba(255,255,255,0.7); }
.crumb span { opacity: 0.5; }

/* Filter / toolbar */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.toolbar__count { font-size: var(--fs-body); color: var(--ink); }
.toolbar__count b { font-weight: 600; }
.toolbar__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.select { position: relative; }
.select select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 1rem; /* ≥16px : évite le zoom auto iOS */ padding: 0.6rem 2.2rem 0.6rem 1rem; border: 1px solid var(--line); border-radius: 980px; background: var(--bg); color: var(--ink); cursor: pointer; min-height: 44px; }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.view-toggle { display: flex; gap: 0.25rem; }
.view-toggle button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.view-toggle button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.view-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2rem; }
.chip { min-height: 44px; font-size: var(--fs-sm); padding: 0.55rem 1.1rem; border: 1px solid var(--line); border-radius: 980px; color: var(--ink-soft); transition: all var(--t-fast); cursor: pointer; }
.chip:hover { border-color: var(--ink); }
.chip.is-active { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
/* Filtre sans aucun bien dans l'onglet courant : eteint mais cliquable —
   l'etat vide propose de nous contacter, c'est une occasion de contact. */
.chip.is-empty:not(.is-active) { opacity: 0.42; }

/* Groupe « Autour de Monaco » : puce + panneau de communes */
.chip-group { position: relative; }
.chip--group { display: inline-flex; align-items: center; gap: 0.5rem; }
.chip__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px;
  padding: 0 6px; border-radius: 999px; background: var(--gold); color: #fff;
  font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* `display` bat l'attribut hidden : sans cette regle le compteur affiche « 0 ». */
.chip__count[hidden] { display: none; }
.chip--group.is-active .chip__count { background: rgba(255,255,255,0.22); }
.chip__caret { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform var(--t-fast); }
.chip--group[aria-expanded="true"] .chip__caret { transform: rotate(180deg); }

.chip-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20;
  min-width: 260px; padding: 0.5rem; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 18px 44px rgba(29,29,31,0.14);
  display: flex; flex-direction: column; max-height: 60vh; overflow-y: auto; }
.chip-panel[hidden] { display: none; }
.chip-opt { display: flex; align-items: center; gap: 0.7rem; min-height: 44px;
  padding: 0 0.65rem; border-radius: 8px; font-size: var(--fs-sm);
  color: var(--ink-soft); cursor: pointer; transition: background var(--t-fast); }
.chip-opt:hover { background: var(--bg-alt); }
.chip-opt input { width: 17px; height: 17px; flex: none; accent-color: var(--gold);
  cursor: pointer; }
.chip-opt--master { font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); border-radius: 8px 8px 0 0;
  margin-bottom: 0.25rem; }
.chip-opt.is-empty { opacity: 0.42; }

/* Ligne « Chambres » : meme grammaire que les localisations, precedee d'un label */
.filters--beds { align-items: center; }
.filters__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-right: 0.4rem; }
.filters--beds .chip { min-width: 52px; text-align: center; }

/* --- « Plus grand, pas plus cher » --- */
.larger-props { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line); }
.larger-props[hidden] { display: none; }
.larger-props__head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.larger-props__head .eyebrow { display: block; margin-bottom: 0.6rem; }
.larger-props__title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--gold-text);
  margin-bottom: 0.5rem; }
.larger-props__sub { color: var(--muted); font-size: var(--fs-sm); max-width: 60ch; }

/* --- Correction 3 : zone de filtres plus genereuse sur ordinateur --- */
@media (min-width: 861px) {
  .tabs { gap: 0.75rem; margin-bottom: 3.5rem; }
  .tab-btn { min-height: 52px; padding: 0.8rem 1.75rem; font-size: 1rem; font-weight: 600; }
  .tab-btn.is-active { font-weight: 700; }
  .filters { gap: 0.85rem; margin-bottom: 2.75rem; }
  .chip { min-height: 50px; padding: 0.7rem 1.5rem; font-size: 0.95rem; font-weight: 500; }
  .toolbar { gap: 1.5rem; margin-bottom: 3rem; }
  .toolbar__count { font-size: 1.05rem; }
  .toolbar__right { gap: 1rem; }
  .select select { min-height: 50px; padding: 0.7rem 2.6rem 0.7rem 1.35rem; font-weight: 600; }
  .view-toggle button { width: 50px; height: 50px; }
}

/* ---- Property detail ---- */
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; aspect-ratio: 16/8; border-radius: var(--radius); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery a:first-child { grid-row: span 2; }
.gallery a { position: relative; overflow: hidden; }
.gallery a img { transition: transform 0.8s var(--ease); }
.gallery a:hover img { transform: scale(1.05); }
.gallery__more { position: absolute; inset: 0; background: rgba(0,0,0,0.45); color: #fff; display: grid; place-items: center; font-size: var(--fs-sm); font-weight: 500; }

.detail { display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.detail__main h2 { font-size: var(--fs-h3); margin: 2.5rem 0 1rem; }
.detail__main p { color: var(--ink-soft); margin-bottom: 1rem; }
.feature-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; margin-top: 1rem; }
.feature-list li { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-sm); color: var(--ink-soft); padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.feature-list svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; flex-shrink: 0; }
.spec-row { display: flex; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; padding: 1.5rem 0; border-block: 1px solid var(--line); }
.spec-row .spec__v { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.spec-row .spec__l { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }

.booking { position: sticky; top: calc(var(--nav-h) + 1.5rem); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; }
.booking__price { font-size: 1.9rem; font-weight: 400; letter-spacing: -0.03em; }
.booking__price-sub { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 1.25rem; }
.booking .btn { width: 100%; margin-bottom: 0.6rem; }
.booking__meta { display: flex; align-items: center; gap: 0.5rem; justify-content: center; font-size: var(--fs-xs); color: var(--muted); margin-top: 0.75rem; }

/* Sticky mobile CTA bar */
.cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-cta); background: rgba(255,255,255,0.92); backdrop-filter: blur(16px); border-top: 1px solid var(--line-soft); padding: 0.75rem clamp(1rem,5vw,1.5rem); display: none; align-items: center; justify-content: space-between; gap: 1rem; }
.cta-bar__price { font-size: 1.15rem; font-weight: 400; }
.cta-bar__price small { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

/* ---- Forms ---- */
.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field .req { color: var(--gold); }
.field input, .field select, .field textarea { font: inherit; font-size: var(--fs-body); padding: 0.85rem 1rem; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); transition: border-color var(--t-fast); width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(184,151,90,0.30); }
.field textarea { min-height: 120px; resize: vertical; }
.field__hint { font-size: var(--fs-xs); color: var(--muted); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.steps { display: flex; gap: 0.5rem; margin-bottom: 2.5rem; }
.step { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.step.is-done { background: var(--gold); }
.benefit-list { display: grid; gap: 1.5rem; }
.benefit { display: flex; gap: 1rem; }
.benefit__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.benefit__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.benefit h4 { font-size: 1rem; margin-bottom: 0.2rem; }
.benefit p { font-size: var(--fs-sm); color: var(--muted); }
.page-hero--image .benefit h4 { color: #fff; }
.page-hero--image .benefit p { color: rgba(255,255,255,0.7); }
.page-hero--image .benefit__icon { border-color: rgba(255,255,255,0.25); }

/* ---- Checkout ---- */
.summary { background: var(--bg-alt); border-radius: var(--radius); overflow: hidden; }
.summary__media { aspect-ratio: 16/9; }
.summary__media img { width: 100%; height: 100%; object-fit: cover; }
.summary__body { padding: 1.5rem; }
.summary__row { display: flex; justify-content: space-between; padding: 0.7rem 0; font-size: var(--fs-body); color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }
.summary__row--total { font-weight: 600; color: var(--ink); font-size: 1.2rem; border-bottom: none; padding-top: 1.1rem; }
.summary__row .num { font-variant-numeric: tabular-nums; }
.rating { display: flex; align-items: center; gap: 0.4rem; font-size: var(--fs-sm); color: var(--ink-soft); }
.rating svg { width: 15px; height: 15px; fill: var(--gold); }

/* ---- About / story ---- */
.story-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 860px) { .story-grid { grid-template-columns: repeat(2, 1fr); } .story-stat { padding: 1.5rem 0.75rem; } }
.story-stat { background: var(--bg); padding: 2.25rem 1.5rem; text-align: center; }
.story-stat__n { font-family: var(--serif); font-size: clamp(1.6rem, 6vw, 2.5rem); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.story-stat__l { font-size: var(--fs-sm); color: var(--muted); margin-top: 0.3rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 980px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .team-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.member__photo { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem; }
.member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.member:hover .member__photo img { transform: scale(1.05); }
.member h4 { font-size: 1.1rem; }
.member span { font-size: var(--fs-sm); color: var(--muted); }

/* ---- FAQ — traitement editorial des objections ----
   Reponses toujours visibles : se scannent mieux qu'un accordeon, et restent
   indexables (les requetes « honoraires », « delai », « non-resident » sont a
   forte intention). Deux dispositions partagent la meme liste :
     .faq-split  -> rail colle + liste (pleine largeur de page)
     .faq-list   -> liste seule (colonne etroite, ex. fiche bien) */
.faq-split { display: grid; grid-template-columns: minmax(260px, 340px) 1fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.faq-rail { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
.faq-rail h2 { font-size: var(--fs-h2); margin-block: var(--s2) var(--s3); }
.faq-rail__lead { color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; }
.faq-rail__ask { margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem); border-top: 1px solid var(--line); }
.faq-rail__ask p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.35;
  margin-bottom: 0.4rem; }
.faq-rail__ask span { display: block; font-size: var(--fs-sm); color: var(--muted);
  margin-bottom: 1.1rem; }
.faq-rail__tel { display: block; margin-top: 0.9rem; font-size: var(--fs-sm);
  color: var(--muted); }
.faq-rail__tel a { color: var(--ink); border-bottom: 1px solid var(--line);
  padding-bottom: 1px; }
.faq-rail__tel a:hover { border-bottom-color: var(--ink); }

/* La liste : accordeon natif <details>/<summary> — accessible au clavier,
   sans JS, et le contenu reste dans le DOM (donc indexable). */
.faq-list { display: flex; flex-direction: column; }
.faq-list .faq__item { border-top: 1px solid var(--line-soft);
  transition: border-color var(--t-fast); }
.faq-list .faq__item:first-child { border-top-color: var(--line); }
.faq-list .faq__item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-list .faq__item:hover { border-top-color: var(--gold-soft); }

.faq-list summary { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  cursor: pointer; list-style: none;
  padding-block: clamp(1.15rem, 2.2vw, 1.6rem); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq__q { flex: 1; font-family: var(--serif); font-weight: 500; line-height: 1.28;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem); letter-spacing: -0.01em;
  margin: 0; text-wrap: balance; transition: color var(--t-fast); }
.faq-list summary:hover .faq__q { color: var(--gold-text); }

/* Marqueur : deux filets d'1 px, le vertical pivote et s'efface -> « + » puis « − ». */
.faq__mark { position: relative; flex: none; width: 15px; height: 15px; }
.faq__mark::before, .faq__mark::after { content: ""; position: absolute;
  background: var(--gold); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.faq__mark::before { top: 50%; left: 0; width: 15px; height: 1px; margin-top: -0.5px; }
.faq__mark::after  { left: 50%; top: 0; width: 1px; height: 15px; margin-left: -0.5px; }
.faq__item[open] .faq__mark::after { transform: rotate(90deg); opacity: 0; }
/* Scope sous .faq-list : sur la fiche bien, `.detail__main p` (0-1-1) battrait
   un `.faq__a` nu (0-1-0) et rajouterait couleur + margin-bottom parasites. */
.faq-list .faq__a { color: var(--muted); line-height: 1.7; max-width: 68ch;
  font-size: var(--fs-body);
  margin: 0 0 clamp(1.15rem, 2.2vw, 1.6rem); padding-right: 2.5rem; }
.faq-list .faq__a a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 2px; }
/* Ouverture : la reponse se depose, elle n'apparait pas d'un bloc. */
.faq-list .faq__item[open] .faq__a { animation: faqReveal 0.45s var(--ease); }
@keyframes faqReveal { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq__item[open] .faq__a { animation: none; }
  .faq__mark::before, .faq__mark::after { transition: none; }
}

/* Colonne etroite (fiche bien) : on redescend d'un cran. */
.faq-list--compact .faq__q { font-size: 1.08rem; }
.faq-list--compact .faq__a { font-size: var(--fs-sm); }
p.faq-after { margin: 1.25rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
p.faq-after a { color: var(--gold-text); border-bottom: 1px solid currentColor;
  padding-bottom: 1px; }
p.faq-after a:hover { color: var(--ink); }

.section--dark :is(.faq-list .faq__item) { border-top-color: rgba(255,255,255,0.14); }
.section--dark .faq__a { color: rgba(255,255,255,0.6); }
.section--dark .faq__a a { color: var(--gold-soft); }

@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; gap: 2.25rem; }
  .faq-rail { position: static; }
}

/* ---- Bloc portefeuille confidentiel (bas de catalogue) ---- */
.offmarket { display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.offmarket h2 { font-size: var(--fs-h2); margin-block: var(--s2) var(--s3); }
.offmarket__lead { color: var(--muted); margin-bottom: var(--s3); }
.offmarket__points { display: flex; flex-direction: column; gap: 0.7rem; }
.offmarket__points li { display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: var(--fs-sm); color: var(--ink-soft); }
.offmarket__points svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.25rem;
  fill: none; stroke: var(--gold); stroke-width: 2; }
.offmarket__form { background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.35rem, 3vw, 2rem); }
.offmarket__form .form { gap: 1rem; }
.offmarket__form .select, .offmarket__form .select select { width: 100%; }
.offmarket__form .select select { border-radius: var(--radius-sm); }
.offmarket__note { font-size: var(--fs-xs); color: var(--muted); text-align: center;
  margin-top: 0.85rem; }
.offmarket__note a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 860px) { .offmarket { grid-template-columns: 1fr; } }

/* ---- Services (management) ---- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: clamp(1.25rem,3vw,2rem); }
.service { padding: 2rem; border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color var(--t-fast), transform var(--t); }
.service:hover { border-color: var(--line); transform: translateY(-4px); }
.service__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--bg-alt); display: grid; place-items: center; margin-bottom: 1.25rem; }
.service__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.5; }
.service h4 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.service p { font-size: var(--fs-sm); color: var(--muted); }
.section--dark .service { border-color: rgba(255,255,255,0.12); }
.section--dark .service__icon { background: rgba(255,255,255,0.06); }
.section--dark .service p { color: rgba(255,255,255,0.55); }

@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; }
  .booking { position: static; }
  .cta-bar { display: flex; }
  .gallery { grid-template-columns: 1fr 1fr; aspect-ratio: 3/2; }
  .gallery a:first-child { grid-column: span 2; grid-row: span 1; }
  .gallery a:nth-child(n+4) { display: none; }
  body:has(.cta-bar) .fab { bottom: 5.25rem; }
}
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; grid-template-rows: 1fr; aspect-ratio: 4/3; }
  .gallery a:nth-child(n+2) { display: none; }
  .gallery a:first-child { grid-column: span 1; grid-row: span 1; }
}

/* Vue liste (toggle de la page propriétés) */
.cards--list { grid-template-columns: 1fr !important; }
.cards--list .card { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; }
.cards--list .card__media { aspect-ratio: 4/3; height: 100%; }
/* Sur mobile la grille est déjà en une colonne : sans disposition propre, la
   vue « liste » serait identique et les boutons sembleraient morts (retour
   client). La liste devient donc une rangée compacte photo + texte. */
@media (max-width: 640px) {
  .cards--list .card { grid-template-columns: 128px 1fr; }
  .cards--list .card__media { aspect-ratio: auto; min-height: 128px; }
  .cards--list .card__media img { height: 100%; object-fit: cover; }
  .cards--list .card__badges { display: none; }
  .cards--list .card__body { padding: 0.8rem 0.9rem; }
  .cards--list .card__specs { display: none; }
  .cards--list .card__title { font-size: 0.95rem; }
  .cards--list .card__price { font-size: 1.05rem; }
}
/* Favori actif */
.card__save.is-saved svg { fill: var(--gold); stroke: var(--gold); }

/* ---- Carrousel fiche bien ---- */
.pd-carousel { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/8; max-height: min(56vh, 600px); background: var(--bg-alt); }
.detail__main .pd-carousel { margin-bottom: 1.75rem; }
.pd-carousel__track { display: flex; height: 100%; transition: transform 0.55s var(--ease); will-change: transform; }
.pd-carousel__slide { flex: 0 0 100%; height: 100%; }
.pd-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--ink); display: grid; place-items: center; backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18); transition: background var(--t-fast), transform var(--t-fast); }
.pd-carousel__nav:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.pd-carousel__nav--prev { left: 14px; } .pd-carousel__nav--next { right: 14px; }
.pd-carousel__count { position: absolute; top: 14px; right: 14px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.04em;
  color: #fff; background: rgba(10,14,20,0.55); padding: 0.35rem 0.75rem; border-radius: 980px; backdrop-filter: blur(8px); }
.pd-carousel__more { position: absolute; bottom: 14px; right: 14px; font-size: var(--fs-xs); font-weight: 500; color: #fff;
  background: rgba(10,14,20,0.55); padding: 0.45rem 0.9rem; border-radius: 980px; backdrop-filter: blur(8px); transition: background var(--t-fast); }
.pd-carousel__more:hover { background: rgba(10,14,20,0.8); }
.pd-carousel__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; }
.pd-carousel__dots button { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); transition: background var(--t-fast), transform var(--t-fast); padding: 0; }
.pd-carousel__dots button.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 640px) {
  .pd-carousel { aspect-ratio: 4/3; }
  .pd-carousel__more { display: none; }
  .pd-carousel__dots { bottom: 12px; }
}

/* ── Sélecteur de langue ───────────────────────────────────────────────────
   Deux liens EN | FR. Sobre par défaut, doré à l'état actif, pour rester
   cohérent avec l'identité du site sans concurrencer le bouton d'appel. */
.lang { display: inline-flex; align-items: center; gap: 0.15rem;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.lang a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 0.4rem;
  color: inherit; opacity: 0.62; transition: opacity var(--t-fast), color var(--t-fast); }
.lang a:hover { opacity: 1; }
.lang a[aria-current="true"] { opacity: 1; color: var(--gold-soft, #c9ad77); font-weight: 600; }
.lang span { opacity: 0.35; }
/* Sur les en-têtes clairs (pages intérieures), on hérite de la couleur du texte. */
.nav.is-solid .lang a[aria-current="true"] { color: var(--gold, #b3985f); }


/* Bandeau discret proposant l'autre langue — jamais une redirection forcée,
   qui nuirait au référencement et contrarierait un choix délibéré. */
.langbar { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 160;
  display: none; align-items: center; gap: 0.9rem;
  max-width: min(92vw, 460px); padding: 0.7rem 0.9rem 0.7rem 1.1rem;
  background: rgba(1,34,47,0.95); color: #fff; border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.28); font-size: 0.84rem;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.langbar.is-in { display: flex; }
.langbar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.langbar button { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; font-size: 1rem; line-height: 1; }
.langbar button:hover { background: rgba(255,255,255,0.24); }
@media (max-width: 860px) {
  .langbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
    border-radius: 16px; flex-wrap: wrap; row-gap: 0.3rem;
    padding: 0.65rem 0.85rem 0.65rem 1rem; }
  .langbar span { flex: 1 1 100%; }
}

/* ── Sélecteur de langue sur mobile ────────────────────────────────────────
   Sur mobile, .nav__right est masqué (il portait le bouton « Estimation
   offerte », retiré à la demande). On ré-affiche le conteneur mais on ne
   laisse visible QUE le sélecteur, posé à côté du menu burger. */
@media (max-width: 860px) {
  .nav__right { display: flex; }
  .nav__right > *:not(.lang) { display: none; }
  .lang { font-size: 0.78rem; }
  .lang a { padding: 0 0.35rem; min-height: 44px; }   /* zone tactile confortable */

  /* Disposition mobile : sélecteur à gauche, logo centré, menu à droite.
     Le logo est centré en absolu — et non par le flux flex — car le
     sélecteur (~67 px) et le burger (44 px) n'ont pas la même largeur :
     un simple space-between décalerait visiblement le logo vers la droite. */
  .nav__inner { position: relative; gap: 0.5rem; }
  .nav__right { order: -1; margin-right: auto; }
  .nav__burger { order: 1; margin-left: auto; }
  .nav__logo { position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); margin: 0; }
  .nav__logo-img { height: 28px; }   /* un cran plus compact pour laisser de l'air */
}

/* Petits téléphones (≤360 px) : avec le sélecteur à gauche et le menu à droite,
   le logo centré n'a plus la place de tenir à 142 px de large. On resserre les
   trois éléments plutôt que de laisser le logo chevaucher le sélecteur. */
@media (max-width: 360px) {
  .nav__logo-img { height: 22px; }
  .lang { font-size: 0.72rem; }
  .lang a { padding: 0 0.22rem; }
}

/* ── Carte interactive des biens ──────────────────────────────────────────
   Desktop : liste et carte côte à côte, carte collante toujours visible
   (référence Le Collectionist, sans clic préalable). Mobile : la carte
   remplace la grille via le 3e bouton de vue.
   Repères : pastille or cerclée de marine, popup mini-fiche cliquable. */
.map-wrap { margin-top: 1.25rem; }
.prop-map { height: clamp(420px, 62vh, 640px); border-radius: var(--radius, 14px);
  overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-alt); }
.map-note { margin-top: 0.6rem; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

@media (min-width: 1101px) {
  .catalog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 42%);
    gap: clamp(1.25rem, 2vw, 2rem); align-items: start; }
  .catalog .map-wrap { position: sticky; top: calc(var(--nav-h, 72px) + 12px); margin-top: 0; }
  .catalog .prop-map { height: calc(100vh - var(--nav-h, 72px) - 96px); min-height: 460px; }
  /* deux colonnes de biens suffisent à côté de la carte */
  .catalog__list .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* La carte est désormais toujours visible, à côté (desktop) ou au-dessus
   (mobile) : le bouton « vue carte » n'a plus d'objet nulle part. */
.view-toggle button:nth-child(3) { display: none; }

@media (max-width: 1100px) {
  /* Mobile : la carte s'intègre EN HAUT de la liste, dimensionnée pour que la
     première fiche de bien reste visible dessous (référence Le Collectionist). */
  .catalog { display: flex; flex-direction: column; }
  .catalog .map-wrap { order: -1; margin: 0 0 1.1rem; }
  .catalog .prop-map { height: clamp(220px, 36vh, 320px); }
  .catalog .map-note { margin: 0.45rem 0 0; }
}

.wal-pin .wal-house { transition: transform 0.15s; }
.wal-pin:hover .wal-house { transform: scale(1.12); }

.wal-pop { width: 240px; }
.wal-pop img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px 8px 0 0; display: block; }
.wal-pop__body { padding: 0.65rem 0.75rem 0.75rem; display: grid; gap: 0.3rem; }
.wal-pop__body strong { font-size: 0.86rem; line-height: 1.25; color: var(--ink); }
.wal-pop__price { font-size: 0.9rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.wal-pop__price em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.wal-pop__link { font-size: 0.78rem; font-weight: 600; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-content-wrapper { border-radius: 10px !important; overflow: hidden; padding: 0 !important; }

/* Mini-carte de la fiche bien : zone approximative, jamais un point exact. */
.detail-map { height: 300px; border-radius: var(--radius, 14px); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--bg-alt); margin-top: 1rem; }

/* Attribution cartographique : réduite au minimum licite (OSM/CARTO l'exigent). */
.leaflet-control-attribution { font-size: 8.5px !important; opacity: 0.55;
  background: rgba(255,255,255,0.6) !important; }
.leaflet-control-attribution:hover { opacity: 1; }

/* Repère « maison » discret de la fiche bien : pastille or, icône marine. */
.wal-house { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--gold-soft, #c9ad77);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(1,34,47,0.35); }
.wal-house svg { width: 15px; height: 15px; stroke: #01222f; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Sélecteur de fond de carte : dans l'identité, compact. */
.leaflet-control-layers { border: 1px solid var(--line-soft) !important; border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(1,34,47,0.12) !important; }
.leaflet-control-layers-base label { font-size: 0.78rem; color: var(--ink); padding: 1px 2px; }

/* Enseignes maison sur fond minimal : point or + libellé lisible avec halo. */
.wal-poi { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.wal-poi i { flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold, #b8975a); border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(1,34,47,0.3); }
.wal-poi b { font-weight: 500; font-size: 10.5px; color: #01222f; letter-spacing: 0.01em;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff; }

/* ── Recherche par dates (locations saisonnières) ─────────────────────────
   Une pilule fine dans le langage des puces de filtre : hairline, coins
   pleins, libellés en petites capitales or, valeurs marine. Pas de panneau
   gris — la hiérarchie vient du trait, pas d'un fond. */
.date-filter { display: flex; margin: 0 0 2rem; }
@media (min-width: 861px) { .date-filter { justify-content: flex-start; } }
.date-filter__box { display: inline-flex; align-items: center; gap: 0.9rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35rem 0.75rem 0.35rem 1.1rem; min-height: 52px;
  transition: border-color var(--t-fast); }
.date-filter__box:focus-within { border-color: var(--ink); }
.date-filter__ico { display: grid; place-items: center; color: var(--gold, #b8975a); }
.date-filter__ico svg { width: 18px; height: 18px; }
.date-filter__wrap { position: relative; }
.date-filter__seg { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  border: 0; background: none; padding: 0.2rem 0.4rem; font: inherit; cursor: pointer;
  border-radius: 10px; transition: background var(--t-fast); }
.date-filter__seg:hover { background: var(--bg-alt); }
.date-filter__seg span { font-size: 0.64rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-text); }
.date-filter__seg b { font-weight: 400; font-size: 0.92rem; color: var(--muted);
  min-width: 7.2rem; text-align: left; font-variant-numeric: tabular-nums; }
.date-filter__seg b.is-set { color: var(--ink); font-weight: 500; }

/* Panneau calendrier : deux mois côte à côte, marine/or. */
.df-cal { position: absolute; top: calc(100% + 10px); left: 0;
  z-index: 60; background: var(--bg); border: 1px solid var(--line-soft);
  border-radius: 16px; box-shadow: 0 18px 44px rgba(1,34,47,0.16);
  padding: 1.1rem 1.2rem 1.2rem; }
.df-cal__head { position: absolute; inset: 1.05rem 1.05rem auto; display: flex; justify-content: space-between; pointer-events: none; }
.df-cal__nav { pointer-events: auto; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); cursor: pointer;
  display: grid; place-items: center; color: var(--ink); transition: all var(--t-fast); }
.df-cal__nav:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.df-cal__nav svg { width: 15px; height: 15px; }
.df-cal__months { display: flex; gap: 1.6rem; }
.df-cal__month { width: 238px; }
.df-cal__name { text-align: center; font-weight: 600; font-size: 0.88rem; color: var(--ink); margin-bottom: 0.6rem; }
.df-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.df-cal__dh { text-align: center; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--muted); padding-bottom: 0.35rem; }
.df-day { aspect-ratio: 1; border: 0; background: none; border-radius: 50%;
  font: inherit; font-size: 0.82rem; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; transition: background var(--t-fast); }
.df-day:hover { background: var(--bg-alt); }
.df-day--dis { color: var(--line); pointer-events: none; }
.df-day--sel { background: var(--ink) !important; color: #fff; font-weight: 600; }
.df-day--in { background: color-mix(in srgb, var(--gold-soft) 26%, #fff); border-radius: 0; }
@media (max-width: 640px) {
  /* Sur mobile le panneau quitte le flux : feuille fixe centrée, marges
     garanties quel que soit le conteneur, défilable sur petit écran.
     (Le positionnement absolu héritait de la géométrie de la pilule et
     pouvait déborder des marges — retour client.) */
  .df-cal { position: fixed; left: 14px; right: 14px; top: 50%;
    transform: translateY(-50%); max-height: 82dvh; overflow-y: auto;
    z-index: 210; }
  .df-cal__months { flex-direction: column; gap: 1.1rem; }
  .df-cal__month { width: 100%; }
}
.date-filter__sep { width: 1px; height: 26px; background: var(--line-soft); }
.date-filter__clear { flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: var(--bg-alt); color: var(--ink-soft); font-size: 1.05rem; line-height: 1;
  cursor: pointer; transition: background var(--t-fast); }
.date-filter__clear:hover { background: var(--line-soft); }
@media (max-width: 640px) {
  .date-filter__box { width: 100%; justify-content: space-between;
    padding-inline: 0.75rem; gap: 0.45rem; }
  /* le bouton Effacer (34 px) apparaît quand une date est posée : sans
     largeur minimale figée, les segments se resserrent au lieu de déborder */
  .date-filter__seg { min-width: 0; }
  .date-filter__seg b { min-width: 0; max-width: 34vw; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
  .date-filter__clear { width: 30px; height: 30px; }
}
/* jours réservés dans le calendrier de la fiche */
.dr-day--booked { color: var(--line) !important; text-decoration: line-through; pointer-events: none; }

/* Rythme vertical de la page catalogue : écarts homogènes entre les rangées
   de filtres (le 3 rem d'origine créait des trous inégaux). */
[data-tabs] .tabs { margin-bottom: 1.75rem; }
[data-tabs] .filters { margin-bottom: 1.25rem; }
[data-tabs] .filters--beds { margin-bottom: 1.5rem; }
[data-tabs] .toolbar { margin-bottom: 1.75rem; }

/* ── Deux correctifs d'empilement/visibilité (retours client) ─────────────
   1. `display: flex` sur .date-filter écrasait l'attribut hidden posé par
      app.js : la pilule de dates restait visible sur Ventes et Longue durée.
      Règle explicite : hidden gagne toujours.
   2. Les calques Leaflet (z-index internes jusqu'à ~1000) recouvraient le
      panneau du calendrier (z-index 60) sur mobile. `isolation: isolate`
      enferme les z-index de la carte dans leur propre contexte. */
.date-filter[hidden] { display: none !important; }
.map-wrap { position: relative; isolation: isolate; z-index: 0; }

/* ══ Barre de filtres A « Collectionist » (validée client) ═══════════════
   Une rangée : Localisation · Chambres · Dates · [compteur · tri · vues].
   Les rangées de puces d'origine restent la source de vérité, masquées. */
#locFilters { display: none !important; }
.fbar { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.9rem; }
.fbar__spacer { flex: 1; }
.fbar .toolbar { margin: 0; gap: 0.9rem; }
.fbtn { display: inline-flex; align-items: center; gap: 0.5rem; font: inherit; font-size: 0.8rem;
  font-weight: 500; letter-spacing: 0.02em; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 1.05rem; min-height: 44px;
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.fbtn:hover { border-color: var(--ink); }
.fbtn.is-active { border-color: var(--ink); font-weight: 600; }
.fbtn__ico { display: inline-flex; }
.fbtn__ico svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.fbtn__car { width: 11px; height: 11px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }
/* Comptage sans pastille (retour client) : le chiffre seul, en doré,
   séparé du libellé par un interpoint — « Localisation · 3 ». */
.fbtn__cnt { font-style: normal; font-weight: 600; color: var(--gold-text);
  font-variant-numeric: tabular-nums; }
.fbtn__cnt::before { content: "· "; color: var(--muted); font-weight: 400; }
#fbDatesVal.is-set { font-weight: 600; }

/* Panneaux ancrés sous la barre */
.fpanels { position: relative; }
.fb-panel { position: absolute; top: 6px; left: 0; z-index: 60; background: var(--bg);
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 0.8rem;
  box-shadow: 0 18px 44px rgba(1,34,47,0.16); min-width: 280px; max-height: 380px; overflow-y: auto; }
.fb-opt { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem;
  border-radius: 10px; cursor: pointer; font-size: 0.9rem; color: var(--ink); }
.fb-opt:hover { background: var(--bg-alt); }
.fb-opt input { width: 16px; height: 16px; accent-color: var(--ink); }
.fb-opt--all span { font-weight: 600; }
.fb-opt i { font-style: normal; color: var(--muted); }
.fb-rule { height: 1px; background: var(--line-soft); margin: 0.4rem 0.2rem; }
.fb-sec__btn { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  width: 100%; border: 0; background: none; font: inherit; font-size: 0.9rem; color: var(--ink);
  padding: 0.5rem 0.6rem; border-radius: 10px; cursor: pointer; }
.fb-sec__btn:hover { background: var(--bg-alt); }
.fb-sec__btn svg { width: 14px; height: 14px; color: var(--muted); transition: transform var(--t-fast); }
.fb-sec__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fb-sec__body { padding-left: 0.9rem; }
.fb-sec__body .fb-opt { padding-block: 0.4rem; font-size: 0.86rem; }

/* Panneau Chambres : la rangée d'origine, re-présentée en grille compacte */
.fb-panel--beds { min-width: 0; padding: 1rem 1.1rem; }
.fb-panel--beds .filters--beds { margin: 0; gap: 0.45rem; }
.fb-panel--beds .filters__label { display: block; width: 100%; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 0.55rem; }
/* le calendrier s'ancre sous la barre comme les autres panneaux (desktop) */
@media (min-width: 641px) { .fpanels .df-cal { top: 6px; } }
.df-cal__clear { display: block; margin: 0.8rem auto 0; border: 0; background: none; font: inherit;
  font-size: 0.82rem; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

@media (max-width: 640px) {
  .fbar .toolbar { width: 100%; justify-content: space-between; }
  .fb-panel { position: fixed; left: 14px; right: 14px; top: 50%; transform: translateY(-50%);
    max-height: 78dvh; z-index: 210; min-width: 0; }
}

/* Croix de fermeture des panneaux de filtres (retour client). */
.fb-panel, .df-cal { padding-top: 2.4rem; }
.fb-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: var(--bg-alt); color: var(--ink-soft);
  font-size: 1.15rem; line-height: 1; cursor: pointer; z-index: 2;
  transition: background var(--t-fast); }
.fb-close:hover { background: var(--line-soft); }
/* L'en-tête (flèches de mois) descend SOUS la croix de fermeture : les deux
   zones cliquables ne se recouvrent plus (retour client : la croix touchait
   la flèche « mois suivant »). */
.df-cal { padding-top: 2.9rem; }
.df-cal__head { inset: 2.95rem 1.05rem auto; }

/* ── Visionneuse photos plein écran (fiche bien) ────────────────────────── */
.pd-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(1,15,21,0.94);
  display: none; align-items: center; justify-content: center; }
.pd-lightbox.is-open { display: flex; }
.pd-lightbox img { max-width: min(94vw, 1920px); max-height: 92vh; object-fit: contain;
  border-radius: 6px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.pd-lightbox__close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px;
  width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12);
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; transition: background var(--t-fast); }
.pd-lightbox__close:hover { background: rgba(255,255,255,0.25); }
.pd-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.12);
  color: #fff; cursor: pointer; display: grid; place-items: center; transition: background var(--t-fast); }
.pd-lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.pd-lightbox__nav svg { width: 22px; height: 22px; }
.pd-lightbox__nav--prev { left: max(14px, env(safe-area-inset-left)); }
.pd-lightbox__nav--next { right: max(14px, env(safe-area-inset-right)); }
.pd-lightbox__count { position: absolute; bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75);
  font-size: 0.82rem; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pd-lightbox__nav { width: 42px; height: 42px; } }

/* Bouton « Parler à un conseiller » du rail FAQ : dans un rail étroit le texte
   passait sur deux lignes (bouton à 79 px, disque flottant — retour client).
   Pleine largeur du rail : texte à gauche, disque calé à droite. */
.faq-rail__ask .btn--island { white-space: nowrap; }   /* largeur au contenu (retour client) */
/* Le sélecteur générique `.faq-rail__ask span` (sous-titre du rail) attrapait
   aussi le disque-flèche du bouton : display block + marge basse de 1.1rem,
   d'où un bouton gonflé à 79 px avec disque décentré. Reset ciblé. */
.faq-rail__ask .btn__disc { display: grid; margin: 0; }
/* Bouton du rail plus compact (retour client). */
.faq-rail__ask .btn--island { padding: 0.45rem 0.45rem 0.45rem 1.15rem; min-height: 46px; font-size: 0.85rem; }
.faq-rail__ask .btn__disc { width: 28px; height: 28px; }
.faq-rail__ask .btn__disc svg { width: 13px; height: 13px; }

/* ── Journal — articles & guides ───────────────────────────────────────── */
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .jr-grid { grid-template-columns: 1fr; } }
a.jr-card { text-decoration: none; }
.jr-card { display: flex; flex-direction: column; background: var(--bg); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-soft); transition: transform var(--t), box-shadow var(--t); }
.jr-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(1,34,47,.12); }
.jr-card__media { aspect-ratio: 16 / 10; overflow: hidden; }
.jr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.jr-card:hover .jr-card__media img { transform: scale(1.04); }
.jr-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem 1.45rem 1.6rem; }
.jr-card__meta { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.jr-card__title { font-family: var(--serif); font-size: 1.35rem; line-height: 1.25; color: var(--ink); }
.jr-card__excerpt { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.jr-card__more { margin-top: auto; padding-top: .5rem; color: var(--gold-text); font-weight: 600; font-size: .9rem; }
.jr-card__sub { color: var(--muted); font-size: .8rem; letter-spacing: .06em; }
.jr-featured .jr-card__sub { color: rgba(255,255,255,.55); }

/* article à la une */
a.jr-featured { text-decoration: none; }
.jr-featured { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--radius); overflow: hidden; background: var(--black); color: #fff; }
.jr-featured__media { min-height: 320px; }
.jr-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jr-featured__body { display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: clamp(1.6rem, 4vw, 3.2rem); }
.jr-featured__body h2 { font-family: var(--serif); font-size: var(--fs-h2); line-height: 1.12; color: #fff; font-weight: 500; }
.jr-featured__body p { color: rgba(255,255,255,.78); max-width: 52ch; }
.jr-featured .jr-card__meta, .jr-featured .jr-card__more { color: var(--gold-soft); }
@media (max-width: 900px) { .jr-featured { grid-template-columns: 1fr; } .jr-featured__media { min-height: 220px; } }

/* Version A (choix client, 17 août 2026) : plus AUCUN texte posé sur photo.
   En-têtes clairs partout ; la photo d'article vit dans un cadre sous le titre. */
.article-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(2rem, 5vw, 3.4rem); }
.article-cover img { width: 100%; max-height: 480px; object-fit: cover; display: block; }

/* corps d'article — « Les Chapitres » (choix client, 17 août 2026) :
   lettrine, chapitres numérotés or, citation centrée, barre de progression */
.article { max-width: 660px; margin-inline: auto; counter-reset: chap; }
.article > p { margin-bottom: 1.5rem; line-height: 1.82; color: var(--ink-soft); }
.article .lede { font-size: 1.2rem; color: var(--ink-soft); line-height: 1.62; margin-bottom: 2.8rem; }
.article > p:first-of-type::first-letter { font-family: var(--serif); font-size: 3.4em; line-height: .82; float: left; padding: .06em .14em 0 0; color: var(--ink); }
.article h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--ink); margin: 3.1rem 0 1rem; display: flex; align-items: baseline; gap: .9rem; }
.article h2::before { counter-increment: chap; content: counter(chap, decimal-leading-zero); font-style: italic; font-size: 1.05rem; color: var(--gold-soft); }
.article ul { margin: 0 0 1.5rem 1.2rem; line-height: 1.75; color: var(--ink-soft); }
.article li { margin-bottom: .45rem; }
.article strong { font-weight: 600; color: var(--ink); }
.article a { color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; }
.article blockquote { border: 0; margin: 3rem 0; padding-top: 2rem; position: relative; text-align: center; font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--ink); }
.article blockquote::before { content: "\201C"; position: absolute; top: -.4em; left: 50%; transform: translateX(-50%); font-size: 3.6rem; color: var(--gold-soft); font-family: var(--serif); }
#jrBar { position: fixed; top: 0; left: 0; height: 3px; background: var(--gold-soft); width: 0; z-index: 300; }

/* ── Property Management — « L'Atelier » (choix client, 18 août 2026) :
   numéro discret dans la légende, cadre doré décalé, révélation en cascade ── */
.pm-band { border-radius: var(--radius); overflow: hidden; }
.pm-band img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; display: block; }
.pm3 { display: flex; flex-direction: column; gap: clamp(3.2rem, 7vw, 6rem); margin-top: 3.2rem; }
.pm3-row { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(2.2rem, 5vw, 4.5rem); align-items: center; }
.pm3-row:nth-child(even) .pm3-media { order: 2; }
.pm3-media { position: relative; }
.pm3-media::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--gold-soft); border-radius: var(--radius); transform: translate(14px, 14px); pointer-events: none; }
.pm3-row:nth-child(even) .pm3-media::before { transform: translate(-14px, 14px); }
.pm3-media figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; }
.pm3-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.65,.2,1); }
.pm3-row:hover img { transform: scale(1.035); }
.pm3-kick { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }
.pm3-kick i { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; color: var(--gold-soft); margin-right: .55rem; vertical-align: -1px; }
.pm3-body h3 { font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.2rem); color: var(--ink); font-weight: 500; margin: .7rem 0 .9rem; }
.pm3-body p { color: var(--muted); line-height: 1.7; max-width: 44ch; }
.pm3-rule { width: 46px; height: 2px; background: var(--gold-soft); margin-top: 1.4rem; }

/* révélation au scroll — la rangée ne masque plus en bloc : image puis texte,
   en cascade (même patron que .section-head, mobile compris) */
.pm3-row.reveal { opacity: 1; transform: none; filter: none; }
.pm3-row.reveal .pm3-media, .pm3-row.reveal .pm3-body {
  opacity: 0; transform: translateY(34px);
  transition: opacity .7s ease, transform .75s cubic-bezier(.2,.65,.2,1);
}
.pm3-row.reveal.is-in .pm3-media { opacity: 1; transform: none; }
.pm3-row.reveal.is-in .pm3-body { opacity: 1; transform: none; transition-delay: .16s; }

@media (max-width: 860px) {
  .pm-band img { aspect-ratio: 4 / 3; }
  .pm3 { gap: 2.6rem; margin-top: 2.2rem; }
  .pm3-row { grid-template-columns: 1fr; gap: 1.1rem; }
  .pm3-row:nth-child(even) .pm3-media { order: 0; }
  .pm3-media::before { transform: translate(10px, 10px) !important; }
  .pm3-body h3 { margin-top: .45rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pm3-row.reveal .pm3-media, .pm3-row.reveal .pm3-body { opacity: 1; transform: none; transition: none; }
}

/* étapes « Our method » — numéros or à la place des icônes (cohérence 01-06) */
.pmstep-n { font-family: var(--serif); font-style: italic; font-size: 2.7rem; line-height: 1; color: var(--gold-soft); display: block; margin-bottom: 1rem; }
.section--dark .promise h4 { margin-bottom: .65rem; }
.section--dark .promise p { line-height: 1.7; }

/* témoignage propriétaire (page gestion) */
.pm-quote { max-width: 780px; margin-inline: auto; text-align: center; position: relative; padding-top: 2.4rem; }
.pm-quote::before { content: "\201C"; position: absolute; top: -.35em; left: 50%; transform: translateX(-50%); font-family: var(--serif); font-size: 4.6rem; color: var(--gold-soft); }
.pm-quote blockquote { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.45; color: var(--ink); margin: 0 0 1.4rem; }
.pm-quote cite { font-style: normal; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; }

/* page gestion — cartes et étapes en carrousel à glissement sur mobile */
@media (max-width: 860px) {
  .pm-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
                 gap: 1rem; padding-bottom: .9rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pm-carousel::-webkit-scrollbar { display: none; }
  .pm-carousel > * { flex: 0 0 82%; scroll-snap-align: center; }
  .promise-grid.pm-carousel > * { flex-basis: 74%; }
}

/* ── feuilletage des photos directement sur les cartes (catalogue/accueil) ── */
.card__ph { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; display: grid; place-items: center; cursor: pointer; z-index: 2;
  opacity: 0; transition: opacity .25s, background .2s; }
.card__ph svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.card__ph--prev { left: 10px; } .card__ph--next { right: 10px; }
.card:hover .card__ph, .card:focus-within .card__ph { opacity: 1; }
.card__ph:hover { background: #fff; }
.card__ph-count { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(1,34,47,.72); color: #fff;
  font-size: .72rem; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .04em; }
@media (max-width: 860px) { .card__ph { opacity: .95; width: 30px; height: 30px; } }

/* pastille conseiller — un vrai visage à côté des promesses de rappel */
.advisor-chip { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.1rem; }
.advisor-chip img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; object-position: top; box-shadow: 0 0 0 2px var(--gold-soft); }
.advisor-chip b { display: block; color: var(--ink); font-size: .95rem; }
.advisor-chip span { display: block; color: var(--muted); font-size: .8rem; letter-spacing: .04em; }

/* texte pour lecteurs d'écran et moteurs, invisible à l'écran */
.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; }

/* ── Fiche saisonnière : onglet « Disponibilités et tarifs » (demande client) ── */
.pd-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin: 0 0 1.75rem; }
.pd-tabs[hidden], .pd-book-panel[hidden], .pd-book-err[hidden] { display: none !important; }
.pd-tab { background: none; border: 0; padding: 0.9rem 1.1rem; font: inherit; font-size: 0.98rem; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; transition: color var(--t-fast); }
.pd-tab:hover { color: var(--ink); }
.pd-tab.is-active { color: var(--ink); }
.pd-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.pd-book-panel .date-range__cal { position: static; display: block; box-shadow: none; margin-top: 0.75rem; }
.pd-book-panel .dr-cal__confirm { display: none !important; }
.pd-book-panel .date-range { max-width: 720px; }
.pd-book-panel .guest-counter, .pd-book-panel .price-breakdown, .pd-book-panel .pd-min-note, .pd-book-panel .btn { max-width: 720px; }
.pd-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; max-width: 720px; }
.pd-rate { background: var(--bg-alt); border-radius: var(--radius-sm, 12px); padding: 1rem 1.15rem; }
.pd-rate b { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.pd-rate span { font-size: 0.8rem; color: var(--muted); }
.pd-min-note { font-size: 0.86rem; color: var(--gold-text); margin: 0.4rem 0 1rem; }
.pd-book-note { font-size: 0.86rem; color: var(--muted); line-height: 1.6; margin-top: 1rem; max-width: 68ch; }
.pd-seasons { list-style: none; padding: 0; margin: 0 0 1.5rem; max-width: 720px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm, 12px); overflow: hidden; }
.pd-seasons li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; font-size: 0.9rem; border-top: 1px solid var(--line-soft); }
.pd-seasons li:first-child { border-top: 0; }
.pd-seasons li b { font-weight: 600; }
/* deux mois côte à côte : [nom, grille] par colonne */
.pd-book-panel .dr-cal__months { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 2.5rem; }
.pd-book-panel .dr-cal__month-name { text-align: left; }
@media (max-width: 700px) { .pd-book-panel .dr-cal__months { grid-template-columns: 1fr; grid-auto-flow: row; } .pd-tab { padding: 0.8rem 0.8rem; font-size: 0.9rem; } }
/* erreur de réservation (dates manquantes / séjour trop court) */
.pd-book-err { display: none; align-items: flex-start; gap: 0.6rem; max-width: 720px; margin: -0.6rem 0 1.25rem; padding: 0.85rem 1rem; border-radius: var(--radius-sm, 12px); background: #fff4f2; border: 1px solid #f0c2ba; color: #9a2f22; font-size: 0.9rem; line-height: 1.5; font-weight: 500; }
.pd-book-err.is-on { display: flex; animation: pdErrIn 0.35s var(--ease); }
.pd-book-err svg { flex: none; margin-top: 0.1rem; }
.date-range.is-error .date-range__bar { border-color: #d9534f; box-shadow: 0 0 0 3px rgba(217,83,79,0.18); animation: pdShake 0.4s; }
@keyframes pdErrIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pdShake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── Menu déroulant « Rentals » : saisonnier / longue durée ── */
.nav__item.has-sub { position: relative; }
.nav__sub-toggle { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav__chev { transition: transform var(--t-fast); opacity: 0.7; }
.has-sub.is-open .nav__chev, .has-sub:hover .nav__chev { transform: rotate(180deg); opacity: 1; }
.nav__sub { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 220px; padding: 0.5rem;
  background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; box-shadow: 0 16px 48px rgba(29,29,31,0.14);
  list-style: none; opacity: 0; visibility: hidden; transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 0.2s; z-index: 5; }
.nav__sub::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* pont de survol */
.has-sub.is-open .nav__sub, .has-sub:hover .nav__sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
.nav__sub li a { display: block; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.92rem; font-weight: 500; color: var(--ink) !important; white-space: nowrap; }
.nav__sub li a:hover { background: var(--bg-alt); color: var(--ink) !important; }

/* ── Menu mobile : « Rentals » dépliable ── */
.menu__group { display: flex; flex-direction: column; }
.menu__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; text-align: left; font: inherit;
  font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; padding: 0.6rem 0; color: var(--ink); border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.menu__chev { transition: transform var(--t-fast); opacity: 0.6; flex: none; }
.menu__group.is-open .menu__chev { transform: rotate(180deg); opacity: 1; }
.menu__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.menu__sub-in { overflow: hidden; min-height: 0; display: flex; flex-direction: column; }
.menu__group.is-open .menu__sub { grid-template-rows: 1fr; }
.menu__sub { overflow: hidden; }
.menu .menu__sub a { font-size: 1.15rem; font-weight: 500; padding: 0.55rem 0 0.55rem 1.25rem; color: var(--ink-soft); border-bottom: 1px solid var(--line-soft); }

/* ═══════════ Recherche immobilière par IA — barre fine + panneau ═══════════ */
:root { --ai-bar-h: 0px; }
body { padding-top: var(--ai-bar-h); }
.nav { top: var(--ai-bar-h); }
.ai-bar { position: fixed; top: 0; left: 0; right: 0; height: var(--ai-bar-h); z-index: calc(var(--z-nav) + 1);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0 1rem;
  background: var(--ink); color: #e9e4d8; font-size: 0.8rem; letter-spacing: 0.01em; cursor: pointer; border: 0; width: 100%;
  font-family: inherit; text-align: center; transition: background var(--t-fast); }
.ai-bar:hover { background: #052c3b; }
.ai-bar__tag { display: inline-flex; align-items: center; gap: 0.55rem; color: #fff; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; line-height: 1; }
.ai-bar__tag svg { width: 17px; height: 17px; color: var(--gold-soft); }
.ai-bar__txt { color: rgba(233,228,216,0.85); }
.ai-bar__go { color: #fff; font-weight: 600; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; }
.ai-bar__go span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ai-bar__go svg { width: 14px; height: 14px; transition: transform var(--t-fast); }
.ai-bar:hover .ai-bar__go svg { transform: translateX(3px); }
.ai-bar { gap: 0.9rem; }
@media (max-width: 640px) { .ai-bar { gap: 0.6rem; font-size: 0.76rem; } }

.ai-panel { position: fixed; inset: 0; z-index: calc(var(--z-menu) + 5); display: none; }
.ai-panel.is-open { display: block; }
.ai-panel__backdrop { position: absolute; inset: 0; background: rgba(1,34,47,0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s var(--ease); }
.ai-panel.is-open .ai-panel__backdrop { opacity: 1; }
.ai-panel__sheet { position: absolute; top: 0; left: 0; right: 0; max-height: 100dvh; overflow-y: auto; background: var(--bg); color: var(--ink);
  border-radius: 0 0 28px 28px; box-shadow: 0 30px 80px rgba(1,34,47,0.25); transform: translateY(-24px); opacity: 0; transition: transform 0.4s var(--ease), opacity 0.35s var(--ease); }
.ai-panel.is-open .ai-panel__sheet { transform: none; opacity: 1; }
.ai-panel__inner { max-width: 1120px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2rem, 4vw, 3rem); }
.ai-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ai-panel__head .eyebrow { display: block; margin-bottom: 0.6rem; }
.ai-panel__title { font-family: var(--serif); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; max-width: 22ch; }
.ai-panel__close { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background var(--t-fast); }
.ai-panel__close:hover { background: var(--bg-alt); }
.ai-field { display: flex; align-items: center; gap: 0.75rem; border: 1.5px solid var(--line); border-radius: 999px; padding: 0.45rem 0.55rem 0.45rem 1.25rem; background: var(--bg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.ai-field:focus-within { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(184,151,90,0.14); }
.ai-field svg.ai-spark { width: 20px; height: 20px; color: var(--gold-text); flex: none; }
.ai-field input { flex: 1; border: 0; background: none; font: inherit; font-size: 1.05rem; color: var(--ink); min-width: 0; outline: none; padding: 0.55rem 0; }
.ai-field input::placeholder { color: var(--muted); }
.ai-field__btn { flex: none; min-height: 46px; padding: 0 1.4rem; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; transition: background var(--t-fast); }
.ai-field__btn:hover { background: #052c3b; }
@media (max-width: 640px) { .ai-field { padding-left: 1rem; } .ai-field input { font-size: 0.98rem; } .ai-field__btn { padding: 0 1rem; font-size: 0.85rem; } }
.ai-examples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.ai-examples span { font-size: 0.78rem; color: var(--muted); margin-right: 0.25rem; align-self: center; }
.ai-chip { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 0.42rem 0.85rem; font: inherit; font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); }
.ai-chip:hover { border-color: var(--gold-soft); color: var(--ink); }
.ai-understood { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 1.3rem; }
.ai-understood:empty { display: none; }
.ai-results:empty { display: none; }
.ai-understood__lbl { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; margin-right: 0.35rem; }
.ai-crit { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--bg-alt); border-radius: 999px; padding: 0.35rem 0.75rem; font-size: 0.8rem; color: var(--ink); }
.ai-crit i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); display: inline-block; }
.ai-results { margin-top: 1.6rem; }
.ai-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ai-results__count { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.ai-results__note { font-size: 0.86rem; color: var(--muted); }
.ai-results__all { font-size: 0.86rem; font-weight: 600; color: var(--gold-text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.ai-grid .card { margin: 0; }
.ai-grid .card__media { aspect-ratio: 4 / 3; }
.ai-empty { color: var(--muted); font-size: 0.95rem; padding: 1rem 0; }
.ai-foot { margin-top: 1.4rem; font-size: 0.74rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; }
.ai-foot svg { width: 12px; height: 12px; color: var(--gold); }
body.ai-open { overflow: hidden; }

/* ── pages légales : tableaux d'honoraires + mentions à compléter ── */
.legal .tbc { background: #fff3cd; color: #7a5a00; padding: 0 0.3em; border-radius: 4px; font-style: italic; }
.legal table.fees { width: 100%; border-collapse: collapse; margin: 0.75rem 0 1.5rem; font-size: var(--fs-sm); }
.legal table.fees th, .legal table.fees td { text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal table.fees th { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-text); font-weight: 600; border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .legal table.fees { display: block; overflow-x: auto; } }
/* carte Google chargée à la demande (consentement) */
.map-consent { width: 100%; height: 100%; min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: var(--bg-alt); border: 1px dashed var(--line); border-radius: var(--radius, 14px); cursor: pointer; font: inherit; color: var(--ink); padding: 1.5rem; transition: background var(--t-fast), border-color var(--t-fast); }
.map-consent:hover { background: #eeece6; border-color: var(--gold-soft); }
.map-consent svg { color: var(--gold-text); }
.map-consent b { font-weight: 600; font-size: 0.98rem; }
.map-consent span { font-size: 0.78rem; color: var(--muted); max-width: 34ch; text-align: center; line-height: 1.45; }
/* mobile : la colonne de la fiche ne doit jamais s'étirer à la largeur de son contenu (panneau réservation) */
.detail > * { min-width: 0; }
.pd-book-panel { max-width: 100%; }
.pd-book-panel .pd-rates { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Annonce retirée du flux Apimo */
.pd-retired { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 3px solid var(--gold, #b08d57); border-radius: var(--radius); background: var(--bg); }
.pd-retired svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold, #b08d57); stroke-width: 1.8; stroke-linecap: round; }
.pd-retired div { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.2rem; }
.pd-retired b { font-weight: 600; }
.pd-retired span { color: var(--muted); font-size: 0.95rem; }
.pd-retired .btn { flex: none; }
body.is-retired #bookingCard, body.is-retired .cta-bar, body.is-retired #pdTabs, body.is-retired .pd-book-panel { display: none !important; }

/* Pages légales : les titres portent déjà leur numéro (« 01 — … ») — pas de compteur automatique en plus */
.legal h2::before { display: none; }

/* Annonce retirée et jamais publique : on ne montre que le fil d'Ariane et le bandeau */
body.is-retired-bare section.section > .container--wide > *:not(.crumb):not(.pd-retired) { display: none !important; }
body.is-retired-bare #pdSuggest, body.is-retired-bare .wa-float { display: none !important; }

/* Accueil, ordinateur : la bannière à défilement fait 3,85 × la hauteur d'écran (valeur calculée par scrub-engine.js).
   On la réserve dès le premier affichage : sinon tout le contenu qui suit saute de plusieurs milliers de pixels (CLS 1,0). */
@media (min-width: 861px) { .sw-banner { min-height: calc(3.85 * 100vh); } }