/* ===== Secundo Real Estate - Shared Stylesheet ===== */

/* Feuille du plugin de consentement (surchargee plus bas via ses variables) */
@import url("vendor/cookieconsent.css?v=670b37e7");

/* ===== Font Faces ===== */
@font-face {
  font-family: 'Intertight Variablefont Wght';
  src: url("fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dancingscript';
  src: url("fonts/dancing-script-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Dancingscript';
  src: url("fonts/dancing-script-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== CSS Variables - Secundo Gold Theme (Light Mode) ===== */
:root {
  --colors-dark: #1a1714;
  --font-primary: "Intertight Variablefont Wght", Arial, sans-serif;
  --grey-white: #f5f2ed;
  --main-text: 18px;
  --colors-transparent: transparent;
  --h1: 3.8em;
  --colors-pale-gold: #f0d68a;
  --colors-bright-gold: #dcaf27;
  --font-secondary: Dancingscript, Arial, sans-serif;
  --colors-warm-white: #dcaf271f;
  --colors-white: white;
  --colors-gold: #dcaf27;
  --colors-gold-transparent: #dcaf2780;
  --colors-white-5: #ffffff0d;
  --colors-pale-gold-transparent: #f0d68a1f;
  --small-text: 16px;
  --colors-gold-accent: #dcaf27;
  --big-text: 20px;
  --h2: 54px;
  --h3: 22px;
  --h4: 18px;
  /* Light mode tokens */
  --colors-bg: #FEFCF9;
  --colors-text: #2D2A26;
  --colors-text-secondary: #6B6560;
  --colors-border: #E8E2DA;
  --colors-surface: #F5F2ED;
  /* Gris ardoise du logo Secundo — fond des sections/footer sombres */
  --colors-slate: #495F6B;
  --colors-slate-light: #5C7683;
  /* Motion tokens */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  /* Rythme vertical entre sections. Une seule valeur pour tout le site : avant,
     les paddings inline melangeaient 40/56/60/64/80/90/100px selon les pages.
     Vaut ~79px a 1440 (donc l'ancien 80px des pages les plus aerees) et se
     resserre a 56 sous 1024, ou 80px de blanc etait trop pour l'ecran. */
  --section-gap: clamp(64px, 8vw, 120px);
  /* Gouttiere laterale. Egale a l'ancien 5% autour de 1440 ; les bornes evitent
     18px de marge sur un tres petit ecran et une derive inutile au-dela. */
  --gutter: clamp(20px, 5vw, 80px);
  /* Porteur unique du rythme : CHAQUE section contribue une demi-mesure par
     cote (via son .container quand elle en a un, via son padding inline
     sinon). Deux voisines produisent donc toujours un --section-gap, sans
     qu il faille savoir laquelle porte quoi. */
  --section-gap-half: calc(var(--section-gap) / 2);
}

/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--colors-bg);
  font-family: var(--font-primary);
  color: var(--colors-text);
  font-size: var(--main-text);
  line-height: 155%;
}
h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; font-weight: bold; }
h1 { margin-top: 20px; font-size: 38px; line-height: 44px; }
h2 { margin-top: 20px; font-size: 32px; line-height: 36px; }
h3 { margin-top: 20px; font-size: 24px; line-height: 30px; }
p { margin-top: 0; margin-bottom: 10px; }
a { text-decoration: none; color: inherit; }
img { vertical-align: middle; max-width: 100%; display: inline-block; border: 0; }

/* ===== Layout ===== */
.container {
  width: 100%;
  max-width: 1439px;
  /* Moitie du rythme en haut ET en bas : deux sections voisines produisent
     donc exactement un --section-gap. L horizontal garde son echelle par
     paliers, plus resserree sur petit ecran qu un clamp lineaire. */
  padding: var(--section-gap-half) 80px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.container.sticky { padding-bottom: 60px; position: sticky; }
/* Les bandes a fond propre (hero, CTA dore, section sombre) n'apportent aucun
   blanc de page : leur padding est interne, il vit DANS la couleur. La section
   voisine porte donc la mesure pleine de ce cote-la, sinon la respiration
   retombe a la moitie juste la ou une bande commence ou finit.
   Un conteneur qui redefinit son padding en inline garde la main : c'est le cas
   des sections qui portent deja le rythme sur la balise <section> elle-meme. */
.hero-inner + section > .container,
.cta-band-bottom + section > .container,
.cta-section-gold + section > .container,
.section-dark + section > .container { padding-top: var(--section-gap); }
section:has(+ .cta-band-bottom) > .container,
section:has(+ .cta-section-gold) > .container,
section:has(+ .section-dark) > .container { padding-bottom: var(--section-gap); }
/* La bande CTA de bas de page vit HORS du <main> : l'adjacence ci-dessus ne
   l'atteint pas. La derniere section du main porte donc la mesure pleine, ce
   qui vaut aussi quand c'est le footer qui suit directement. */
main > section:last-of-type > .container { padding-bottom: var(--section-gap); }
/* Meme regle pour les sections qui n ont pas de .container : ce sont elles
   qui portent alors le padding. */
.hero-inner + section:not(:has(> .container)),
.cta-band-bottom + section:not(:has(> .container)),
.cta-section-gold + section:not(:has(> .container)),
.section-dark + section:not(:has(> .container)) { padding-top: var(--section-gap); }
section:not(:has(> .container)):has(+ .cta-band-bottom),
section:not(:has(> .container)):has(+ .cta-section-gold),
section:not(:has(> .container)):has(+ .section-dark) { padding-bottom: var(--section-gap); }
.container-nav {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 1439px;
  padding: 20px 80px;
  display: flex;
  margin: 0 auto;
}
.container-footer {
  width: 100%;
  max-width: 1439px;
  padding: 24px 80px;
  margin: 0 auto;
}

/* ===== Navbar ===== */
.navbar {
  background-color: var(--colors-transparent);
  width: 100%;
  position: absolute;
  z-index: 1000;
}
.navbar.navbar-inner {
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transform: translateY(0);
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease,
              backdrop-filter 0.4s ease,
              box-shadow 0.4s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar.navbar-inner.navbar-visible {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Logo transitions */
.navbar.navbar-inner .logo-img {
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.navbar.navbar-inner .logo-light {
  display: block;
  position: absolute;
  top: 0; left: 0;
}
.navbar.navbar-inner .logo-dark { opacity: 1; }
.navbar.navbar-inner .logo-light { opacity: 0; }
.navbar.navbar-inner.navbar-visible .logo-dark { opacity: 0; }
.navbar.navbar-inner.navbar-visible .logo-light { opacity: 1; }


/* Menu button color transitions */
.navbar.navbar-inner .button-text,
.navbar.navbar-inner .line {
  transition: background-color 0.3s ease, color 0.3s ease;
}
.navbar.navbar-inner .button-text { color: var(--colors-text); }
.navbar.navbar-inner .line { background-color: var(--colors-text); }
.navbar.navbar-inner .buton-secondary {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: transparent;
}
.navbar.navbar-inner.navbar-visible .button-text { color: white; }
.navbar.navbar-inner.navbar-visible .line { background-color: white; }
.navbar.navbar-inner.navbar-visible .buton-secondary {
  border-color: rgba(255,255,255,0.25);
  background-color: rgba(255,255,255,0.1);
}

/* Light-top pages (no dark hero behind the navbar, e.g. property gallery):
   keep the glass bar + dark logo/menu at scroll-top so the brand stays legible. */
.navbar.navbar-inner.navbar-solid-top.navbar-visible {
  background-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.navbar.navbar-inner.navbar-solid-top.navbar-visible .logo-dark { opacity: 1; }
.navbar.navbar-inner.navbar-solid-top.navbar-visible .logo-light { opacity: 0; }
.navbar.navbar-inner.navbar-solid-top.navbar-visible .button-text { color: var(--colors-text); }
.navbar.navbar-inner.navbar-solid-top.navbar-visible .line { background-color: var(--colors-text); }
.navbar.navbar-inner.navbar-solid-top.navbar-visible .buton-secondary {
  border-color: rgba(0, 0, 0, 0.1);
  background-color: transparent;
}


.navbar-cover {
  z-index: -1;
  background-image: linear-gradient(180deg, var(--colors-bg), rgba(254,252,249,0.6) 80%, rgba(254,252,249,0));
  height: 110%;
  position: absolute;
  inset: 0;
}
.navbar.navbar-inner .navbar-cover { display: none; }
.brand { float: left; text-decoration: none; position: relative; display: flex; align-items: center; gap: 10px; }
.logo-img { height: 40px; width: auto; display: block; }
.logo-light { display: none; }

/* Mega Menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
}
.nav-menu.open { display: flex; }
.navlinks-wrap {
  gap: 16px;
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}
.nav-link {
  color: var(--colors-text);
  font-size: 15px;
  font-weight: 400;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: color .3s ease;
}
.nav-link:hover { color: var(--colors-gold); }
.nav-cta { padding: 11px 22px; font-size: 14px; }
/* Nav links follow the navbar state, like the logo */
.navbar.navbar-inner.navbar-visible .nav-link { color: #fff; }
.navbar.navbar-inner.navbar-solid-top.navbar-visible .nav-link { color: var(--colors-text); }

/* Selecteur de langue (injecte par lang-switch.js avant le CTA). Controle
   segmente BE | FR : la variante active est en or, l'autre est cliquable.
   La couleur suit currentColor pour rester lisible sur navbar claire comme
   sur le hero sombre, exactement comme les .nav-link. */
.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid currentColor;
  border-radius: 999px;
  overflow: hidden;
  opacity: .85;
}
.lang-opt {
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.35;
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.lang-opt + .lang-opt { border-left: 1px solid currentColor; }
.lang-opt.is-active {
  background: var(--colors-gold);
  color: #fff;
  cursor: default;
}
.lang-opt:not(.is-active):hover { background: color-mix(in srgb, currentColor 14%, transparent); }
@media (max-width: 991px) {
  /* Dans le tiroir mobile, on aligne le selecteur a gauche comme les liens. */
  .lang-switch { align-self: flex-start; }
}

/* Mega menu columns */
.mega-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  width: 100%;
}
.mega-menu-col { display: flex; flex-direction: column; gap: 8px; }
.mega-menu-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--colors-gold);
  margin-bottom: 8px;
}
.mega-menu-link {
  font-size: 15px;
  font-weight: 300;
  color: var(--colors-text);
  text-decoration: none;
  padding: 4px 0;
  transition: color .3s;
}
.mega-menu-link:hover { color: var(--colors-gold); }
.mega-menu-cta {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--colors-border);
}

.buton-secondary {
  gap: 12px;
  border: 1px solid var(--colors-border);
  background-color: rgba(255,255,255,0.7);
  background-image: none;
  box-shadow: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--colors-text);
  border-radius: 40px;
  padding: 20px 22px;
  font-weight: 400;
  line-height: 100%;
  text-decoration: none;
  transition: box-shadow .4s, border-color .3s;
  display: inline-flex;
  align-items: center;
  position: relative;
}
.buton-secondary:hover { box-shadow: 0 4px 20px rgba(220,175,39,0.15); border-color: var(--colors-gold-transparent); }
.buton-secondary.menu { display: none; margin-left: auto; padding: 0; }

.munu-wrap { gap: 12px; justify-content: flex-start; align-items: center; display: flex; }
.button-text { z-index: 2; font-size: var(--main-text); font-weight: 400; position: relative; }
.burger { gap: 4px; flex-flow: column; display: flex; }
.line { background-color: var(--colors-text); border-radius: 40px; width: 16px; height: 2px; }
.line._02 { width: 11px; }
.code-embed { z-index: 2; justify-content: center; align-items: center; width: 14px; height: 14px; display: flex; position: relative; }

/* ===== Hero Section (Homepage) ===== */
.section { width: 100%; }
.section.hero {
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  position: relative;
  color: white;
  overflow: hidden;
}
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(254,252,249,0.1), rgba(0,0,0,0.3) 40%, rgba(0,0,0,0.5) 80%, var(--colors-bg));
  z-index: -1;
}
.section.hero .buton-secondary { border-color: rgba(255,255,255,0.25); background-color: rgba(255,255,255,0.1); color: white; }
.section.hero .buton-secondary:hover { box-shadow: 0 4px 20px rgba(255,255,255,0.15); }
.section.hero .line { background-color: white; }

/* ===== OVERDRIVE: View Transitions ===== */
@view-transition {
  navigation: auto;
}

.navbar.navbar-inner {
  view-transition-name: navbar;
}

::view-transition-old(root) {
  animation: pageOut 0.16s ease-out both;
}
::view-transition-new(root) {
  animation: pageIn 0.22s ease-out both;
}

/* Navbar stays fixed during transition */
::view-transition-old(navbar),
::view-transition-new(navbar) {
  animation: none;
}

@keyframes pageOut { to { opacity: 0; } }
@keyframes pageIn { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

/* ===== OVERDRIVE: Hero Parallax ===== */
.hero-video {
  will-change: transform;   /* pas de transition : elle trainait derriere le scroll */
}
.hero-container {
  will-change: transform, opacity;
}
.section.hero .logo-dark { display: none; }
.section.hero .logo-light { display: block; }
.hero-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 100px;
  padding-bottom: 48px;
  gap: 32px;
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  max-width: 720px;
  width: 100%;
}
.hero-center .h1-heading {
  text-align: center;
  max-width: 100%;
}
.hero-center .paragpaph.hero {
  width: auto;
  max-width: 500px;
  text-align: center;
  margin: 0;
  opacity: 0.85;
}
.hero-center .button-wrap {
  justify-content: center;
}
.hero-center .hero-incentive {
  margin-top: 0;
}
.horizontal-wrap { justify-content: space-between; display: flex; }
.horizontal-wrap.hero { justify-content: space-between; align-items: flex-end; width: 100%; }
.horizontal-wrap.top-align { justify-content: space-between; align-items: flex-start; }
.content-wrapper { gap: 32px; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.hero-content-wrap { gap: 12px; flex-flow: column; justify-content: center; align-items: flex-start; display: flex; }

/* ===== Inner Page Hero Banner ===== */
.hero-inner {
  position: relative;
  min-height: max(440px, 50vh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: white;
  padding-top: 96px;        /* dégage le contenu sous la navbar fixe (titres multi-lignes) */
  box-sizing: border-box;
}
.hero-inner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
/* Pages that wrap the hero image in <div class="hero-inner-bg"><img></div>
   need the inner <img> sized to fill the box; pages using <img class="hero-inner-bg">
   directly are already covered by the rule above. */
.hero-inner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-inner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
  z-index: -1;
}
.hero-inner .container {
  padding-top: 60px;
  padding-bottom: 60px;
}
.hero-inner-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Older-template pages put .hero-inner-content directly inside .hero-inner (no
   .container wrapper), which left the hero text flush to the viewport edge. Mirror
   the .hero-inner .container box so every hero aligns identically across the site. */
.hero-inner > .hero-inner-content {
  width: 100%;
  max-width: 1439px;
  margin-left: auto;
  margin-right: auto;
  padding: 60px 80px;
}
.hero-inner-content .h1-heading {
  width: 100%;
  max-width: 700px;
}

/* ===== Breadcrumb ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 300;
  opacity: 0.8;
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: opacity .3s;
}
.breadcrumb a:hover { opacity: 1; color: var(--colors-pale-gold); }
.breadcrumb span { opacity: 0.6; }

/* ===== Pill / Badge ===== */
.pill-wrap {
  gap: 10px;
  border: 1px solid var(--colors-border);
  background-color: rgba(255,255,255,0.8);
  background-image: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 40px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 18px;
  /* inline-flex (et non flex) : un pill epouse TOUJOURS son contenu. En flex bloc,
     dans un conteneur bloc (ex. video-spot-body), il s'etirait sur toute la largeur. */
  display: inline-flex;
  vertical-align: middle;
}
.section.hero .pill-wrap {
  border-color: rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.hero-inner .pill-wrap {
  border-color: rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.pill-dot {
  background-image: linear-gradient(143deg, var(--colors-pale-gold), var(--colors-bright-gold) 57%);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.pill-text { font-size: var(--small-text); font-weight: 300; line-height: 90%; }

/* ===== Headings ===== */
/* Equilibre les lignes des titres : evite les orphelins et surtout qu'un
   segment cursif (.handwriting, ex. "de reve") se coupe en deux lignes sur
   mobile. Sur les libelles longs, wrappe normalement (aucun debordement). */
h1, h2, h3, .h1-heading, .h2-heading, .h3-heading { text-wrap: balance; }
.h1-heading { font-size: var(--h1); max-width: 700px; width: 100%; margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: 110%; }
.h2-heading { font-size: var(--h2); margin-top: 0; margin-bottom: 0; font-weight: 500; line-height: 110%; }
.h2-heading.half-width { width: 50%; }
.h2-heading.small { font-size: 52px; line-height: 100%; }
.h2-heading.center-alighn-on-desctop { text-align: center; }
.h3-heading { font-size: var(--h3); margin-top: 0; margin-bottom: 0; font-weight: 300; line-height: 110%; }

.handwriting {
  color: var(--colors-gold);
  font-family: var(--font-secondary);
  padding-left: 10px;
  font-size: 100px;
  font-weight: 600;
  line-height: 80%;
  /* Bloc atomique : le segment cursif ne se coupe plus au milieu d'une phrase
     sur mobile (ex. "coup de coeur"). Les libelles longs se replient dans leur
     propre bloc au lieu de s'entrelacer avec le reste du titre. */
  display: inline-block;
  vertical-align: baseline;
  /* Sur desktop, le segment cursif reste sur UNE seule ligne (il y a la place).
     Sous 900px on repasse en normal : les libelles longs (ex. "le jardin de la
     Costa del Sol") se replient au lieu de deborder ; les courts restent entiers
     grace a l'inline-block. "Sur une ligne si possible". */
  white-space: nowrap;
}
@media (max-width: 900px) { .handwriting { white-space: normal; } }
.handwriting.h2 {
  text-shadow: 0 1px 1px rgba(45, 42, 38, 0.4), 0 2px 10px rgba(45, 42, 38, 0.12);
  padding-left: 10px;
  padding-right: 10px;
  font-size: 78px;
  font-weight: 500;
  line-height: 70%;
}
.handwriting.h2.small { font-size: 70px; line-height: 70%; }
.handwriting.h2.white {
  color: var(--colors-pale-gold);
}

/* ===== Buttons ===== */
.button-wrap { gap: 24px; justify-content: flex-start; align-items: center; display: flex; }
.buton-primary {
  gap: 12px;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 20px 22px;
  font-weight: 500;
  line-height: 100%;
  text-decoration: none;
  transition: box-shadow .4s;
  display: inline-flex;
  position: relative;
  border: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.buton-primary:hover { box-shadow: 0 4px 20px 0 var(--colors-gold-transparent); }
.buton-primary .button-text { color: var(--colors-dark); }

/* ===== Paragraphs ===== */
.paragpaph { opacity: .7; font-size: var(--main-text); font-variation-settings: "wght" 250; margin-bottom: 0; font-weight: 300; }
.paragpaph.hero { font-size: var(--main-text); width: 300px; opacity: .85; }
.paragpaph.big { font-size: var(--big-text); font-weight: 300; }
.paragpaph.big.half-width { width: 50%; font-size: 20px; line-height: 150%; }
.paragpaph.small { font-size: var(--small-text); }
.paragpaph.short { width: 80%; }

/* ===== About / Full Size Image ===== */
.container.short-top-padding { padding-top: 120px; }
.full-size-image {
  background-image:
    linear-gradient(90deg, var(--colors-bg), var(--colors-transparent) 13%, var(--colors-transparent) 77%, var(--colors-bg)),
    url("images/about-full-1920w.jpg");
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-attachment: scroll, scroll;  /* fixed forcait un repaint complet a chaque scroll */
  height: 450px;
  margin-bottom: 140px;
  border-radius: 24px;
}

/* ===== Trust Flow ===== */
.stats-section { border-bottom: 1px solid var(--colors-border); }
.trust-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 40px 0;
}
.trust-pair {
  font-size: 15px;
  font-weight: 400;
  color: var(--colors-text-secondary);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.trust-num {
  font-size: 22px;
  font-weight: 650;
  color: var(--colors-gold);
  letter-spacing: -0.01em;
}
.trust-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--colors-gold);
  flex-shrink: 0;
  opacity: 0.5;
}

/* ===== Trust Ribbon ===== */
.trust-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 28px 0;
  flex-wrap: wrap;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 100px;
  background: oklch(0.97 0.008 80);
  border: 1px solid oklch(0.92 0.015 80);
  white-space: nowrap;
}
.trust-badge--families {
  background: oklch(0.22 0.01 240);
  border-color: oklch(0.22 0.01 240);
}
.trust-badge--families .trust-badge-number {
  color: var(--colors-gold);
}
.trust-badge--families .trust-badge-text {
  color: oklch(0.88 0.005 80);
}
.trust-badge--satisfaction {
  background: var(--colors-gold);
  border-color: var(--colors-gold);
}
.trust-badge--satisfaction .trust-badge-number {
  color: oklch(0.18 0.01 80);
}
.trust-badge--satisfaction .trust-badge-text {
  color: oklch(0.28 0.02 80);
}
.trust-badge-number {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}
.trust-badge-text {
  font-size: 13px;
  font-weight: 500;
  color: oklch(0.45 0.01 240);
  line-height: 1.2;
}
.trust-badge-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.trust-badge-rating {
  display: flex;
  align-items: center;
  gap: 8px;
}
.trust-badge-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--colors-text);
  line-height: 1;
}
.trust-badge-stars {
  display: flex;
  gap: 1px;
}
.trust-badge-stars svg {
  width: 14px;
  height: 14px;
  fill: oklch(0.75 0.16 85);
}
.trust-badge-star--partial {
  fill: oklch(0.88 0.04 85);
}

/* ===== Regions Section ===== */
.section.listing {
  background-color: var(--colors-surface);
  background-image: none;
  border-radius: 40px;
  position: relative;
  overflow: visible;
}
.content-wrap-centered {
  gap: 32px;
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

/* ===== Region Grid ===== */
.property-wrapper { margin-top: 60px; }
.property-list-grid { gap: 40px; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; display: grid; width: 100%; }
.property-wrap {
  background-image: linear-gradient(178deg, var(--colors-transparent) 47%, #231e1b);
  color: var(--grey-white);
  border-radius: 12px;
  min-height: 460px;
  text-decoration: none;
  display: flex;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform .3s;
}
.property-wrap:hover { transform: scale(1.02); }
.property-image-frame { z-index: -2; border-radius: 16px; height: 100%; position: absolute; inset: 0; overflow: hidden; }
.property-grid-image { object-fit: cover; width: 100%; height: 100%; }
.property-cover-gradient { z-index: -1; background-image: linear-gradient(0deg, rgba(0,0,0,0.7), var(--colors-transparent) 65%); display: flex; position: absolute; inset: 0; }
.chip {
  background-color: var(--colors-gold);
  color: var(--colors-dark);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 110%;
  display: flex;
  position: absolute;
  top: 10px;
  left: 20px;
}
.property-content-wrap { gap: 8px; flex-flow: column; padding: 20px; display: flex; position: absolute; bottom: 0; left: 0; right: 0; }
.property-feature-wrapper { gap: 10px; justify-content: flex-start; align-items: center; display: flex; }
.property-feature-wrap { gap: 6px; justify-content: flex-start; align-items: center; display: flex; }
.dot { background-color: var(--colors-gold); border-radius: 50%; width: 6px; height: 6px; }
.property-grid-price { margin-bottom: 0; font-size: 22px; font-weight: 500; }
.price-wrap { gap: 4px; justify-content: flex-start; align-items: center; display: flex; }
.centered-button-wrap { justify-content: center; align-items: center; margin-top: 40px; display: flex; }

/* ===== Press logo wall ===== */
.press-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 28px 32px;
  align-items: center;
  margin-top: 40px;
}
.press-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 8px 16px;
}
.press-logo img {
  max-height: 38px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
  opacity: 0.5;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease-out-quint), filter 0.35s var(--ease-out-quint);
}
.press-logo:hover img { opacity: 1; filter: grayscale(0); }

/* ===== Vision / Engagements Cards ===== */
.card-wrapper { gap: 24px; justify-content: flex-start; align-items: stretch; margin-top: 60px; display: flex; }
.card {
  gap: 30px;
  border: 1px solid var(--colors-border);
  background-color: white;
  background-image: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 24px;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 40px 24px 40px;
  transition: border-color .4s, box-shadow .4s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 24px rgba(220,175,39,0.1); }
.card-icon { width: 40px; height: 40px; }
.card-icon-emoji { font-size: 36px; line-height: 1; }
.card-icon-svg { width: 32px; height: 32px; color: var(--colors-gold); flex-shrink: 0; }

/* Card wrapper: 3-column grid variant for service grids */
.card-wrapper-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 60px; }

/* ===== Numbered service list (2-column compact) ===== */
.service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 48px; counter-reset: svc; }
.service-list-item { display: flex; gap: 16px; padding: 28px 24px; border-bottom: 1px solid #E8E2DA; position: relative; transition: background-color 0.25s ease; }
.service-list-item:hover { background-color: rgba(220,175,39,0.04); }
.service-list-item:nth-child(odd) { border-right: 1px solid #E8E2DA; }
.service-list-item::before { counter-increment: svc; content: counter(svc, decimal-leading-zero); font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: var(--colors-gold); min-width: 28px; line-height: 1.6; }
.service-list-title { font-family: var(--font-primary); font-size: 16px; font-weight: 600; color: var(--colors-dark); margin-bottom: 4px; }
.service-list-desc { font-size: 14px; line-height: 160%; color: rgba(45,42,38,0.55); }

/* ===== Process steps (sequential flow) ===== */
.process-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; counter-reset: step; }
.process-step { position: relative; padding: 32px 24px 28px; background: #F5F2ED; border-radius: 16px; }
.process-step:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(45,42,38,0.08); }
.process-step-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--colors-gold); color: var(--colors-dark); font-family: var(--font-primary); font-size: 14px; font-weight: 700; margin-bottom: 16px; }
.process-step-title { font-family: var(--font-primary); font-size: 16px; font-weight: 600; color: var(--colors-dark); margin-bottom: 6px; }
.process-step-desc { font-size: 14px; line-height: 160%; color: rgba(45,42,38,0.55); }
.process-step-connector { display: none; }
/* Timeline verticale (home "5 etapes") : les etapes reutilisent .process-step et
   heritaient du fond #F5F2ED + hover des cartes -> le rond collait au bord gauche
   de la box. On enleve la box : timeline propre, rond sur la ligne, texte a droite. */
.process-timeline .process-step { background: transparent; border-radius: 0; }
.process-timeline .process-step:hover { transform: none; box-shadow: none; }
/* Le rond a un z-index inline mais pas de position -> inactif : la ligne absolue
   passait par-dessus les numeros. On le positionne pour qu'il couvre la ligne. */
.process-timeline .process-step > div:first-child { position: relative; z-index: 1; }

/* ===== Highlight cards (fiscal/legal accents) ===== */
.highlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.highlight-grid-3col { grid-template-columns: repeat(3, 1fr); }
.highlight-card { background: #F5F2ED; border-radius: 16px; padding: 32px; border: 1px solid #E8E2DA; transition: border-color 0.25s ease; }
.highlight-card:hover { border-color: var(--colors-gold); }
.highlight-card-accent { font-family: var(--font-primary); font-size: 28px; font-weight: 700; color: var(--colors-gold); margin-bottom: 8px; line-height: 1.2; }
.highlight-card-title { font-family: var(--font-primary); font-size: 16px; font-weight: 600; color: var(--colors-dark); margin-bottom: 6px; }
.highlight-card-desc { font-size: 14px; line-height: 160%; color: rgba(45,42,38,0.55); }

/* ===== Commitments (redesigned engagements) ===== */
.commitments-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 60px;
}
.commitment-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 32px 28px;
  border-bottom: 1px solid var(--colors-border);
  transition: background-color 0.3s ease;
}
.commitment-item:hover {
  background-color: rgba(220, 175, 39, 0.03);
}
.commitment-item:nth-child(odd) {
  border-right: 1px solid var(--colors-border);
}
.commitment-item:nth-last-child(-n+2) {
  border-bottom: none;
}
.commitment-number {
  font-family: var(--font-secondary);
  font-size: 38px;
  font-weight: 700;
  color: var(--colors-gold);
  line-height: 1;
  flex-shrink: 0;
  width: 44px;
  opacity: 0.7;
}
.commitment-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.commitment-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.commitment-desc {
  font-size: 15px;
  font-weight: 400;
  opacity: 0.6;
  line-height: 160%;
}

/* ===== Social Icons ===== */
.social-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--colors-border);
  transition: border-color 0.3s, background-color 0.3s;
}
.social-icon-link:hover {
  border-color: var(--colors-gold);
  background-color: rgba(220, 175, 39, 0.08);
}
.social-icon-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  opacity: 0.7;
}
.social-icon-link:hover svg {
  opacity: 1;
}

/* ===== Form States ===== */
.form-success {
  display: none;
  text-align: center;
  padding: 40px 24px;
}
.form-success.active {
  display: block;
}
.form-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(220, 175, 39, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.form-success-icon svg {
  width: 28px;
  height: 28px;
  color: var(--colors-gold);
}
.form-success-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-success-desc {
  font-size: 15px;
  opacity: 0.7;
  line-height: 160%;
}
.submit-button.loading {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}
.submit-button-wrap .form-error {
  color: #c0392b;
  font-size: 14px;
  margin-top: 8px;
  display: none;
}
.submit-button-wrap .form-error.active {
  display: block;
}

.content-wrap { gap: 16px; flex-flow: column; justify-content: flex-start; align-items: flex-start; display: flex; }
.content-wrap.small-gap { gap: 12px; }

/* ===== Process Steps ===== */
.steps-wrapper { margin-top: 60px; display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.step-card {
  flex: 1;
  min-width: 220px;
  max-width: 260px;
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.step-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 20px rgba(220,175,39,0.1); }
.step-number {
  font-family: var(--font-secondary);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--colors-gold);
  margin-bottom: 12px;
}
.step-title { font-size: 20px; font-weight: 500; margin-bottom: 12px; }
.step-desc { font-size: 15px; font-weight: 300; opacity: .7; line-height: 150%; }

/* ===== Timeline parcours (5 etapes) ===== */
.timeline { position: relative; list-style: none; max-width: 880px; margin: 64px auto 0; padding: 0; }
.timeline::before { content: ""; position: absolute; top: 30px; bottom: 30px; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, var(--colors-gold) 8%, var(--colors-gold) 92%, transparent); }
.tl-step { position: relative; display: grid; grid-template-columns: 1fr 72px 1fr; column-gap: 34px; align-items: center; padding: 18px 0; }
.tl-node { grid-column: 2; justify-self: center; position: relative; z-index: 2; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-secondary); font-size: 26px; font-weight: 700; line-height: 1; color: var(--colors-gold); background: #fff; border: 2px solid var(--colors-gold); box-shadow: 0 6px 20px rgba(220,175,39,0.22); }
.tl-node::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 2px; background: var(--colors-gold); opacity: .45; }
.tl-step:nth-child(odd) .tl-node::after { right: 100%; }
.tl-step:nth-child(even) .tl-node::after { left: 100%; }
.tl-content { max-width: 360px; }
.tl-step:nth-child(odd) .tl-content { grid-column: 1; justify-self: end; text-align: right; }
.tl-step:nth-child(even) .tl-content { grid-column: 3; justify-self: start; text-align: left; }
.tl-kicker { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--colors-gold-accent); margin-bottom: 6px; }
.tl-title { font-size: 21px; font-weight: 500; margin: 0 0 8px; color: var(--colors-text); line-height: 1.2; }
.tl-desc { font-size: 15px; font-weight: 300; opacity: .7; line-height: 1.55; margin: 0; }

@media (max-width: 768px) {
  .timeline { margin-top: 44px; max-width: 460px; }
  .timeline::before { left: 30px; top: 16px; bottom: 16px; }
  .tl-step { grid-template-columns: 60px 1fr; padding: 12px 0; align-items: start; }
  .tl-node { grid-column: 1; justify-self: center; width: 52px; height: 52px; font-size: 22px; }
  .tl-node::after { left: 100%; right: auto; width: 16px; }
  .tl-step:nth-child(odd) .tl-content,
  .tl-step:nth-child(even) .tl-content { grid-column: 2; justify-self: start; text-align: left; max-width: none; padding: 2px 0 0 18px; }
}

/* ===== Blog Section ===== */
.content-wrap-horizontal { gap: 24px; flex-flow: row; justify-content: space-between; align-items: flex-end; display: flex; }
.blog-wrapper { margin-top: 60px; }
.blog-list-flex { gap: 40px; display: flex; }
.collection-blog-item { flex: 1; }
.featured-blog-item { color: var(--colors-text); flex-flow: column; width: 100%; text-decoration: none; display: flex; }
.blog-image-wrap { position: relative; }
.blog-image-frame { border-radius: 16px; height: 360px; overflow: hidden; }
.blog-grid-image { object-fit: cover; width: 100%; height: 100%; }
.blog-glowing-frame { z-index: -1; border: 1px solid var(--colors-border); border-radius: 16px; position: absolute; inset: 0; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.blog-content-wrap { gap: 12px; flex-flow: column; justify-content: flex-start; align-items: flex-start; width: 80%; margin-top: 20px; display: flex; }
.read-time-wrap { gap: 4px; justify-content: flex-start; align-items: center; display: flex; }

/* Blog Grid (listing page) */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
.blog-card {
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
  text-decoration: none;
  color: var(--colors-text);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.blog-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 20px rgba(220,175,39,0.1); }
.blog-card-image { width: 100%; height: 240px; object-fit: cover; }
.blog-card-content { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 300; opacity: 0.6; }
.blog-card-category {
  background-color: var(--colors-surface);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--colors-gold-accent);
}
.blog-card-title { font-size: 20px; font-weight: 500; margin: 0; line-height: 130%; }
.blog-card-excerpt { font-size: 15px; font-weight: 300; opacity: 0.7; line-height: 160%; margin: 0; }

/* Blog filter pills */
.filter-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.catalog-filters .filter-pills,
.catalog-filter-bar .filter-pills {
  margin-top: 0;
  gap: 6px;
}
.filter-pill {
  padding: 12px 20px;
  min-height: 44px;
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 400;
  color: var(--colors-text);
  cursor: pointer;
  transition: all .3s;
  text-decoration: none;
}
.catalog-filters .filter-pill,
.catalog-filter-bar .filter-pill {
  padding: 6px 12px;
  font-size: 12px;
  background-color: var(--colors-surface);
  border-color: transparent;
}
.filter-pill:hover, .filter-pill.active {
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  border-color: var(--colors-gold);
}
.filter-pill:focus-visible {
  outline: 2px solid var(--colors-gold);
  outline-offset: 2px;
}
/* Sélecteur de tri du catalogue (injecté dans la barre de résultats) */
.catalog-sort { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.catalog-sort label { font-size: 14px; color: var(--colors-text-secondary); }
.catalog-sort-select {
  font-family: inherit;
  font-size: 14px;
  color: var(--colors-text);
  background-color: var(--colors-surface);
  border: 1px solid var(--colors-border);
  border-radius: 10px;
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232D2A26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.catalog-sort-select:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 2px; }
@media (max-width: 640px) { .catalog-sort { margin-left: 0; width: 100%; } .catalog-sort-select { flex: 1; } }

/* ===== Testimonials ===== */
.section.no-overflow { overflow: hidden; }
.slider-container { background-color: var(--colors-transparent); height: 100%; margin-top: 60px; position: relative; }
.slider-track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 20px;
}
.slider-track::-webkit-scrollbar { display: none; }
.slide { min-width: 400px; max-width: 400px; flex-shrink: 0; }
.testimonials-wrapper {
  gap: 30px;
  border: 1px solid var(--colors-border);
  background-color: white;
  background-image: none;
  border-radius: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  min-height: 380px;
  padding: 40px 32px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.testimonial-quote-mark {
  font-family: var(--font-secondary);
  font-size: 60px;
  color: var(--colors-gold);
  line-height: 1;
  margin-bottom: -10px;
}
.testimonials-content { gap: 40px; flex-flow: column; flex: 1; justify-content: space-between; align-self: stretch; align-items: flex-start; display: flex; }
.testimonial { color: var(--colors-text); font-size: var(--main-text); margin-bottom: 0; font-style: italic; font-weight: 300; line-height: 150%; }
.client-wrap { display: flex; flex-direction: column; gap: 4px; }
.client-wrap--has-avatar { flex-direction: row; align-items: center; gap: 12px; }
.client-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid oklch(0.94 0.02 80);
}
.client-info { display: flex; flex-direction: column; gap: 2px; }
.client-name { color: var(--colors-gold); font-size: var(--small-text); margin-bottom: 0; font-weight: 500; }
.arrow-controls { display: flex; justify-content: flex-end; gap: 20px; margin-top: -50px; position: relative; z-index: 10; }
.arrow-wrap {
  border: 1px solid var(--colors-pale-gold-transparent);
  background-image: radial-gradient(circle farthest-side at 50% 100%, var(--colors-pale-gold), var(--colors-gold) 60%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  transition: box-shadow .35s;
  display: flex;
  cursor: pointer;
}
.arrow-wrap:hover { box-shadow: 0 4px 20px 0 var(--colors-gold-transparent); }
.arrow-icon { width: 16px; }
.arrow-icon.left { transform: rotate(-180deg); }

/* Testimonials grid (masonry layout) */
.testimonials-grid {
  columns: 3;
  column-gap: 24px;
  margin-top: 60px;
}
.testimonials-grid .testimonials-wrapper {
  break-inside: avoid;
  margin-bottom: 24px;
  min-height: auto;
}

/* Featured testimonial variant */
.testimonials-wrapper--featured {
  background-color: oklch(0.97 0.012 80) !important;
  border-color: oklch(0.90 0.04 80) !important;
  padding: 48px 36px 36px !important;
}
.testimonials-wrapper--featured .testimonials-content p {
  font-size: 19px;
  line-height: 170%;
  font-weight: 400;
  color: var(--colors-dark);
}
.testimonials-wrapper--featured .testimonial-quote-mark {
  font-size: 72px;
  color: oklch(0.78 0.1 80);
}
.testimonials-wrapper--featured .client-name {
  font-size: 15px;
  font-weight: 600;
}
/* Photo testimonial variant */
.testimonials-wrapper--photo {
  padding: 0 !important;
  overflow: hidden;
}
.testimonial-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.testimonial-photo-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.testimonial-photo-body p {
  font-size: 15px;
  line-height: 160%;
  font-style: italic;
  font-weight: 300;
  color: var(--colors-text);
}
.testimonial-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: oklch(0.55 0.01 240);
  margin-top: 2px;
}
.testimonial-source svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Star rating in featured cards */
.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.testimonial-stars svg {
  width: 14px;
  height: 14px;
  fill: var(--colors-gold);
}

/* ===== FAQ ===== */
.section.faq { position: relative; }
.faq-wrapper { width: 50%; margin-left: auto; margin-right: auto; }
.faq-wrapper.full-width { width: 100%; max-width: 800px; }
.faq-wrap { gap: 24px; flex-flow: column; margin-top: 40px; display: flex; }
.faq-question-wrap {
  border: 1px solid var(--colors-border);
  background-color: white;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 20px;
  transition: border-color .35s, box-shadow .35s;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
}
.faq-question-wrap:hover, .faq-question-wrap.open { border-color: var(--colors-gold-transparent); box-shadow: 0 2px 12px rgba(220,175,39,0.08); }
.faq-question-bar { justify-content: space-between; align-items: center; font-size: 20px; font-weight: 300; text-decoration: none; display: flex; }
.question-title { color: var(--colors-text); margin-right: 10px; }
.plus-icon { width: 20px; height: 20px; transition: transform .3s; }
.faq-question-wrap.open .plus-icon { transform: rotate(45deg); }
.faq-content { overflow: hidden; max-height: 0; }
.faq-question-wrap.open .faq-content { max-height: 500px; }
.faq-paragraph { opacity: .6; font-variation-settings: "wght" 250; width: 95%; margin-bottom: 0; padding-top: 16px; padding-bottom: 8px; line-height: 160%; }
.faq-lights { display: none; }
.faq-category-title {
  font-size: 24px;
  font-weight: 500;
  margin-top: 48px;
  margin-bottom: 0;
  color: var(--colors-text);
  display: flex;
  align-items: center;
  gap: 12px;
}
.faq-category-title:first-child { margin-top: 0; }
.faq-category-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--colors-gold); }
.faq-category-icon svg { display: block; }

/* ===== Contact ===== */
.section.contact { position: relative; }
.contact-wrapper { gap: 40px; justify-content: space-between; width: 100%; display: flex; }
.contact-info-wrap { gap: 32px; flex-flow: column; justify-content: flex-start; align-self: stretch; align-items: flex-start; width: 50%; display: flex; }
.social-media-wrap-main { gap: 16px; justify-content: flex-start; align-items: flex-start; display: flex; }
.social-link { opacity: .8; transition: opacity .3s; text-decoration: none; font-size: 24px; }
.social-link:hover { opacity: 1; }
.contact-wrap { gap: 12px; flex-flow: column; display: flex; }
.heading-h3 { margin-top: 0; margin-bottom: 0; font-size: 18px; font-weight: 500; line-height: 120%; }
.paragraph.small { opacity: .8; font-size: var(--small-text); font-variation-settings: "wght" 300; margin-bottom: 0; font-weight: 300; }
.link { opacity: .7; color: var(--colors-text); font-size: var(--small-text); font-weight: 300; line-height: 120%; text-decoration: none; transition: color .4s, opacity .4s; }
.link:hover { opacity: 1; color: var(--colors-gold); }

/* Map embed */
.map-container {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 60px;
  border: 1px solid var(--colors-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.map-container iframe { width: 100%; height: 400px; border: 0; }

/* Office cards */
.offices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.office-card {
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: border-color .3s, box-shadow .3s;
}
.office-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 20px rgba(220,175,39,0.1); }
.office-card-title { font-size: 20px; font-weight: 500; margin-bottom: 16px; }
.office-card-detail { font-size: 15px; font-weight: 300; opacity: 0.7; margin-bottom: 8px; line-height: 150%; }

/* ===== Form ===== */
.form-block { border: 1px solid var(--colors-border); border-radius: 16px; width: 45%; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.form-block.full-width { width: 100%; }
.form { gap: 40px; background-color: white; flex-flow: column; justify-content: flex-start; align-items: flex-start; height: 100%; padding: 32px; display: flex; }
.form-wrapper { gap: 24px; flex-flow: column; align-self: stretch; display: flex; }
.field-wrapper { gap: 24px; align-self: stretch; display: flex; }
.field-wrap { gap: 4px; flex-flow: column; flex: 1; justify-content: flex-start; align-self: stretch; align-items: flex-start; display: flex; }
.field-label { font-size: var(--small-text); font-weight: 300; display: block; margin-bottom: 5px; }
.text-field {
  border: 1px solid var(--colors-border);
  background-color: var(--colors-bg);
  border-radius: 8px;
  min-height: 50px;
  margin-bottom: 0;
  width: 100%;
  padding: 8px 12px;
  color: var(--colors-text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
}
.text-field::placeholder { color: #9B9490; font-size: 15px; font-weight: 300; }
.text-field:focus { border-color: var(--colors-gold); }
.text-field.area { min-height: 100px; resize: vertical; }
.submit-button-wrap {
  gap: 12px;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  line-height: 100%;
  transition: box-shadow .4s;
  display: flex;
  position: relative;
  cursor: pointer;
}
.submit-button-wrap:hover { box-shadow: 0 4px 20px 0 var(--colors-gold-transparent); }
.submit-button {
  z-index: 2;
  background-color: var(--colors-transparent);
  border-radius: 40px;
  padding: 20px 32px;
  font-weight: 500;
  position: relative;
  border: none;
  color: var(--colors-dark);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* Radio group for civility */
.radio-group { display: flex; gap: 16px; align-items: center; }
.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 300;
  cursor: pointer;
}
.radio-label input[type="radio"] { accent-color: var(--colors-gold); }

/* ===== Footer ===== */
.footer { background-color: var(--colors-surface); position: relative; }
.footer-wrap { justify-content: space-between; align-items: flex-start; display: flex; gap: 40px; padding: 40px 0 20px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--colors-gold);
  margin-bottom: 4px;
}
.footer-link-wrap { gap: 12px; justify-content: flex-end; align-items: center; display: flex; }
.footer-link { opacity: .5; color: var(--colors-text); font-weight: 300; text-decoration: none; transition: opacity .3s; font-size: 14px; }
.footer-link:hover { opacity: 1; color: var(--colors-gold); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--colors-border);
  margin-top: 20px;
}
.footer-legal-links { justify-content: center; margin-bottom: 0 !important; }
.footer-bottom-text { font-size: 13px; font-weight: 300; opacity: 0.5; }
.footer-ipi { max-width: 780px; margin-top: 0 !important; }
.footer-social { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ===== Article / Content Typography ===== */
.article-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 60px 0;
}
.article-content h2 {
  font-size: 28px;
  font-weight: 500;
  margin-top: 48px;
  margin-bottom: 16px;
  line-height: 130%;
}
.article-content h3 {
  font-size: 22px;
  font-weight: 500;
  margin-top: 32px;
  margin-bottom: 12px;
}
.article-content p {
  font-size: 17px;
  font-weight: 300;
  line-height: 175%;
  opacity: 0.8;
  margin-bottom: 20px;
}
.article-content ul, .article-content ol {
  font-size: 17px;
  font-weight: 300;
  line-height: 175%;
  opacity: 0.8;
  padding-left: 24px;
  margin-bottom: 20px;
}
.article-content li { margin-bottom: 8px; }
.article-content blockquote {
  border: 1px solid var(--colors-border);
  padding: 16px 24px;
  margin: 32px 0;
  background-color: var(--colors-surface);
  border-radius: 12px;
  font-style: italic;
  opacity: 0.9;
}
.article-content img {
  width: 100%;
  border-radius: 16px;
  margin: 32px 0;
}
/* Illustration en cours de lecture. Elle deborde legerement de la colonne de
   texte : l'oeil enregistre une respiration, pas un simple bloc intercale.
   Le ratio est pose en CSS pour qu'aucun saut de mise en page n'ait lieu
   pendant le chargement, meme si l'image arrive tard. */
.article-figure {
  margin: 40px calc(var(--debord, 32px) * -1) 44px;
}
.article-figure img {
  width: 100%;
  /* height:auto est indispensable : l'attribut height="450" du HTML est
     traduit en indice de presentation et l'emportait sur aspect-ratio, qui
     etait bien calcule mais jamais applique -- l'image sortait en 2.01. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 16px;
}
.article-figure figcaption {
  margin-top: 10px;
  padding: 0 var(--debord, 32px);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--colors-text-secondary);
}
@media (max-width: 860px) {
  /* Sous cette largeur la colonne touche deja les bords : le debord ferait
     sortir l'image de l'ecran. */
  .article-figure { --debord: 0px; }
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 300;
  opacity: 0.6;
}
.article-meta-divider { width: 4px; height: 4px; border-radius: 50%; background-color: var(--colors-gold); }
.article-sidebar {
  position: sticky;
  top: 100px;
}
.sidebar-card {
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sidebar-card-title { font-size: 18px; font-weight: 500; margin-bottom: 16px; }
.sidebar-article-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--colors-border);
  text-decoration: none;
  color: var(--colors-text);
  transition: color .3s;
}
.sidebar-article-link:last-child { border-bottom: none; }
.sidebar-article-link:hover { color: var(--colors-gold); }
.sidebar-article-title { font-size: 15px; font-weight: 400; }
.sidebar-article-meta { font-size: 13px; opacity: 0.5; font-weight: 300; }

/* Two column article layout */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Team Grid ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.team-card {
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: border-color .3s, box-shadow .3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.team-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 20px rgba(220,175,39,0.1); }
.team-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: var(--colors-surface);
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--colors-gold);
  font-weight: 600;
}
.team-name { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
.team-role { font-size: 14px; font-weight: 300; opacity: 0.6; }

/* ===== Values Grid ===== */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 60px;
}

/* ===== Comparatif Secundo vs agence classique (qui-sommes-nous) ===== */
.comparison-wrap { max-width: 920px; margin: 48px auto 0; }
.comparison-table thead th:last-child,
.comparison-table td:last-child { background: rgba(220,175,39,0.07); }
.comparison-table thead th:last-child { color: var(--colors-text); font-weight: 600; }
.comparison-table thead th:first-child { width: 27%; }
.comparison-table .cmp-crit { font-weight: 500; color: var(--colors-text); }
.comparison-table .cmp-other { color: var(--colors-text); opacity: .55; }
.comparison-table .cmp-secundo { color: var(--colors-text); font-weight: 400; }
.cmp-check { display: inline-flex; vertical-align: -2px; margin-right: 7px; color: var(--colors-gold); flex-shrink: 0; }

/* ===== Landing page : nav allegee (catalogue) ===== */
.navbar-lp .brand { cursor: default; }
.lp-phone { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; color: var(--colors-text); text-decoration: none; transition: color .25s ease; }
.lp-phone svg { color: var(--colors-gold); }
.lp-phone:hover { color: var(--colors-gold); }

/* ===== CTA Catalogue (homepage) ===== */
.catalogue-cta { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items: center; background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: 28px; padding: clamp(32px, 4vw, 56px); }
.catalogue-cta-visual { display: flex; justify-content: center; align-items: center; }
.catalogue-cta-visual img { width: 52%; border-radius: 8px; box-shadow: 0 16px 40px rgba(45,42,38,0.22); border: 4px solid #fff; }
.catalogue-cta-visual .cc-front { transform: rotate(-4deg); position: relative; z-index: 1; }
.catalogue-cta-visual .cc-back { transform: rotate(5deg); margin-left: -16%; z-index: 0; }
.catalogue-cta-body .h2-heading { margin: 14px 0 0; }
.catalogue-cta-body .paragpaph { margin: 14px 0 28px; max-width: 460px; }
@media (max-width: 820px) {
  .catalogue-cta { grid-template-columns: 1fr; text-align: center; gap: 28px; }
  .catalogue-cta-visual { order: -1; }
  .catalogue-cta-body .paragpaph { margin-left: auto; margin-right: auto; }
}

/* ===== Landing page : sections enrichies (catalogue) ===== */
.lp-trust { border-top: 1px solid var(--colors-border); border-bottom: 1px solid var(--colors-border); background: var(--colors-surface); }
.lp-trust .trust-flow { max-width: 1080px; margin: 0 auto; padding: 26px 5%; }
.lp-trust-logo { height: 18px; width: auto; vertical-align: -4px; }

.lp-why { max-width: 1100px; margin: 0 auto; padding: 84px 5%; }
.lp-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.lp-why-col { background: #fff; border: 1px solid var(--colors-border); border-radius: 24px; padding: clamp(28px, 3vw, 40px); box-shadow: 0 2px 14px rgba(45,42,38,0.04); }
.lp-why-list { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 6px; }
.lp-why-list li { padding: 14px 0; border-top: 1px solid var(--colors-border); }
.lp-why-list li:first-child { border-top: none; padding-top: 4px; }
.lp-why-list li { display: flex; gap: 14px; align-items: flex-start; }
.lp-why-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: rgba(220,175,39,0.12); display: grid; place-items: center; color: var(--colors-gold); }
.lp-why-ic svg { width: 20px; height: 20px; display: block; }
.lp-why-list li > div { font-size: 14.5px; line-height: 1.5; color: rgba(45,42,38,.62); }
.lp-why-list strong { display: block; font-size: 16px; font-weight: 500; color: var(--colors-text); margin-bottom: 3px; }

.lp-regions { max-width: 1000px; margin: 0 auto; padding: 0 5% 84px; text-align: center; }
.lp-regions-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-regions-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.lp-region-chip { padding: 12px 22px; border: 1px solid var(--colors-border); border-radius: 999px; background: #fff; font-size: 15px; font-weight: 500; color: var(--colors-text); }

/* LP footer minimal (sans liens) */
.lp-footer .lp-footer-inner { max-width: 900px; margin: 0 auto; padding: 48px 5%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-footer p { font-size: 13.5px; color: rgba(245,242,237,0.6); line-height: 1.6; max-width: 560px; margin: 0; }
.lp-footer .lp-footer-copy { font-size: 12.5px; opacity: .85; }

.lp-final-cta { position: relative; overflow: hidden; max-width: 1120px; margin: 0 auto 92px; border-radius: 28px; }
.lp-final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-final-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(45,42,38,.50), rgba(45,42,38,.72)); }
.lp-final-inner { position: relative; z-index: 1; text-align: center; padding: clamp(56px, 7vw, 96px) 24px; }

@media (max-width: 820px) {
  .lp-why { padding: 60px 7%; }
  .lp-why-grid { grid-template-columns: 1fr; gap: 40px; }
  .lp-trust-inner { gap: 16px 28px; }
}

/* ============ OVERDRIVE LP : lumiere & revelations ============ */
/* Halo de soleil qui derive doucement derriere le hero */
.lead-pitch > .pill-wrap { display: inline-flex; }
.lead-hero::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
  width: 62vmax; height: 62vmax; left: 24%; top: -20%;
  background: radial-gradient(circle at center, rgba(220,175,39,0.22), rgba(220,175,39,0.08) 38%, rgba(220,175,39,0) 66%);
  animation: lpSunDrift 22s ease-in-out infinite alternate;
}
@keyframes lpSunDrift {
  0%   { transform: translate(-55%, -2%) scale(1);    opacity: .82; }
  50%  { opacity: 1; }
  100% { transform: translate(-40%, 9%)  scale(1.16); opacity: .9; }
}

/* Couvertures du hero : inclinaison 3D suivant le curseur */
.lead-teaser { perspective: 900px; }
.lead-teaser img { transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transition: transform .18s ease-out; will-change: transform; }
.lead-teaser img:nth-child(2) { transform: rotate(3deg) rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); }

/* Chiffres de confiance qui s'incrementent : pas de saut de largeur */
.lp-count { font-variant-numeric: tabular-nums; }

/* Transition cinematique formulaire -> remerciement (View Transitions).
   Limitee au catalogue par la classe lp-vt : sans elle, elle s'appliquait a TOUTES
   les navigations du site (~1 s de zoom par changement de page). */
@media (prefers-reduced-motion: no-preference) {
  html.lp-vt::view-transition-old(root) { animation: lpVtOut .42s ease both; }
  html.lp-vt::view-transition-new(root) { animation: lpVtIn .58s cubic-bezier(.22,.7,.2,1) both; }
}
@keyframes lpVtOut { to { opacity: 0; transform: scale(.985); } }
@keyframes lpVtIn { from { opacity: 0; transform: scale(1.014); } to { opacity: 1; transform: none; } }

/* Le badge de remerciement qui eclot */
#thankYou .ty-badge { animation: lpBadgePop .7s cubic-bezier(.2,.8,.2,1) .15s both; }
@keyframes lpBadgePop { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.12); } to { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .lead-hero::before { animation: none; }
  .lead-teaser img, .lead-teaser img:nth-child(2) { transition: none; }
  #thankYou .ty-badge { animation: none; }
}

/* ============ LP : blocs commerciaux ============ */
/* Presse */
.lp-press { max-width: 1180px; margin: 0 auto; padding: 40px 0 8px; text-align: center; }
.lp-press-label { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--colors-text); opacity: .45; margin: 0 0 22px; }
.lp-press-row { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 30px; padding: 0 5%; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lp-press-row::-webkit-scrollbar { display: none; }
.lp-press-row img { height: 36px; width: auto; flex: 0 0 auto; object-fit: contain; opacity: .92; transition: opacity .3s ease, transform .3s ease; }
.lp-press-row img:hover { opacity: 1; transform: translateY(-2px); }

/* Sejour decouverte */
.lp-sejour { padding: 44px 5%; }
.lp-sejour-inner { max-width: 920px; margin: 0 auto; background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: 28px; padding: clamp(36px, 4vw, 56px); text-align: center; position: relative; overflow: hidden; }
.lp-sejour-sun { position: absolute; top: 22px; right: 26px; width: 76px; height: 76px; color: var(--colors-gold); opacity: .55; pointer-events: none; }
.lp-sejour-inner .h2-heading { margin-top: 14px; }
.lp-sejour-points { list-style: none; padding: 0; margin: 30px auto 0; max-width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; text-align: left; }
.lp-sejour-points li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.45; color: var(--colors-text); }
.lp-sejour-points li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--colors-gold); }
.lp-sejour-points li::after { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* Dans le catalogue (apercu pages) */
.lp-inside { max-width: 1120px; margin: 0 auto; padding: 70px 5%; text-align: center; }
.lp-inside-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-inside-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.lp-inside-grid img { width: 100%; border-radius: 10px; border: 1px solid var(--colors-border); box-shadow: 0 12px 30px rgba(45,42,38,0.12); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.lp-inside-grid img:hover { transform: translateY(-6px) scale(1.02); }

/* Temoignages */
.lp-testi { max-width: 1100px; margin: 0 auto; padding: 20px 5% 80px; text-align: center; }
.lp-testi-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lp-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.lp-testi-card { margin: 0; background: #fff; border: 1px solid var(--colors-border); border-radius: 20px; overflow: hidden; box-shadow: 0 2px 14px rgba(45,42,38,0.05); display: flex; flex-direction: column; }
.lp-testi-card > img { width: 100%; height: 200px; object-fit: cover; }
.lp-testi-card figcaption { padding: 22px 22px 24px; text-align: left; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.lp-testi-stars { display: flex; gap: 2px; }
.lp-testi-stars svg { width: 16px; height: 16px; fill: var(--colors-gold); }
.lp-testi-card p { font-size: 15.5px; line-height: 1.5; color: var(--colors-text); margin: 0; flex: 1; }
.lp-testi-who { display: flex; flex-direction: column; }
.lp-testi-who strong { font-size: 15px; font-weight: 500; color: var(--colors-text); }
.lp-testi-who span { font-size: 13px; color: var(--colors-gold-accent); }

/* Carte regions (forcer l'affichage hors contexte homepage + surligner les 5 costas) */
.lp-regions-map { max-width: 560px; margin: 36px auto 0; }
.lp-regions-map .spain-map-svg { opacity: 1; transform: none; }
.lp-regions-map .spain-province--target { fill: oklch(0.87 0.06 85); stroke: var(--colors-gold); stroke-width: 0.8; }

@media (max-width: 820px) {
  .lp-inside-grid { grid-template-columns: 1fr 1fr; }
  .lp-testi-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .lp-press-row { justify-content: flex-start; gap: 26px; }
}
@media (max-width: 520px) {
  .lp-sejour-points { grid-template-columns: 1fr; }
  .lp-press-row { gap: 22px; }
  .lp-press-row img { height: 30px; }
  .lp-sejour-sun { width: 50px; height: 50px; top: 16px; right: 16px; opacity: .4; }
}

/* ===== Region Map ===== */
.region-map-wrapper {
  position: relative;
  max-width: 600px;
  margin: 60px auto;
}
.region-map-wrapper img { width: 100%; }

/* Region detail sections */
.cities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.city-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--colors-border);
  background-color: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: border-color .3s, box-shadow .3s;
}
.city-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 4px 20px rgba(220,175,39,0.1); }
.city-card-image-wrap { overflow: hidden; }
.city-card-image { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; }
.city-card:hover .city-card-image { transform: scale(1.05); }
.city-card-content { padding: 20px; }
.city-card-name { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.city-card-desc { font-size: 15px; font-weight: 300; opacity: 0.7; line-height: 150%; margin: 0; }
.city-card--link { text-decoration: none; color: inherit; display: block; cursor: pointer; }

/* Dark section highlight cards */
.section-dark .highlight-card {
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.section-dark .highlight-card:hover { border-color: var(--colors-gold); }
.section-dark .highlight-card-accent { color: var(--colors-gold); }
.section-dark .client-name { color: var(--colors-gold); }
.section-dark .highlight-card-title { color: #F5F2ED; }
.section-dark .highlight-card-desc { color: rgba(245,242,237,0.55); }
.section-dark .card-icon-svg { color: var(--colors-gold); }

/* Comparison table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--colors-border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.comparison-table th {
  background-color: var(--colors-surface);
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid var(--colors-border);
}
.comparison-table td {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 300;
  border-bottom: 1px solid var(--colors-border);
}
.comparison-table tr:last-child td { border-bottom: none; }
.comparison-table tr:hover td { background-color: rgba(220,175,39,0.03); }

/* Video embed */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}

/* Video testimonials grid */
.video-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.video-testimonial-card {
  display: block;
}
.video-testimonial-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--colors-text);
  margin-top: 12px;
  text-align: left;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== CTA Section ===== */
.cta-section {
  background-color: var(--colors-surface);
  border-radius: 24px;
  padding: 80px 60px;
  text-align: center;
  margin: 80px max(5%, calc((100% - 1200px) / 2));
}
.cta-section .h2-heading { margin-bottom: 16px; }
.cta-section .paragpaph { margin-bottom: 32px; }

/* Dark CTA variant (inline style driven) */
.cta-section[style*="2D2A26"] .h2-heading,
.cta-section[style*="495F6B"] .h2-heading { color: #F5F2ED; }
.cta-section[style*="2D2A26"] .handwriting,
.cta-section[style*="495F6B"] .handwriting { color: var(--colors-gold); }
.cta-section[style*="2D2A26"] .paragpaph,
.cta-section[style*="495F6B"] .paragpaph { color: rgba(245,242,237,0.6); }

/* ===== Section Variants ===== */

/* Dark section: slate background, cream text */
.section-dark {
  background-color: var(--colors-slate);
  color: #F5F2ED;
}
.section-dark .container { position: relative; }
.section-dark .pill-wrap {
  border-color: rgba(255,255,255,0.12);
  background-color: rgba(255,255,255,0.06);
  box-shadow: none;
}
.section-dark .pill-dot {
  background-image: linear-gradient(143deg, var(--colors-pale-gold), var(--colors-bright-gold) 57%);
}
.section-dark .h2-heading,
.section-dark .h3-heading { color: #F5F2ED; }
.section-dark .handwriting { color: var(--colors-gold); }
.section-dark .paragpaph { color: rgba(245,242,237,0.65); }
.section-dark .commitment-title { color: #F5F2ED; }
.section-dark .commitment-desc { color: rgba(245,242,237,0.5); }
.section-dark .commitment-item { border-color: rgba(255,255,255,0.08); }
.section-dark .commitment-item:hover { background-color: rgba(220,175,39,0.05); }
.section-dark .buton-secondary {
  border-color: rgba(255,255,255,0.2);
  background-color: rgba(255,255,255,0.06);
  color: #F5F2ED;
}
.section-dark .buton-secondary:hover {
  border-color: var(--colors-gold-transparent);
  box-shadow: 0 4px 20px rgba(220,175,39,0.15);
}
.section-dark .card {
  background-color: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
}
.section-dark .card:hover {
  border-color: rgba(220,175,39,0.3);
  background-color: rgba(255,255,255,0.06);
}
.section-dark .card-text { color: rgba(245,242,237,0.7); }
.section-dark .testimonials-wrapper {
  background-color: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}
.section-dark .testimonials-wrapper:hover { border-color: rgba(220,175,39,0.2); }
.section-dark .testimonial { color: rgba(245,242,237,0.8); }
.section-dark .paragpaph.small { color: rgba(245,242,237,0.4); }
.section-dark .arrow-wrap { opacity: 0.8; }

/* Gold CTA section: bold gold background */
.cta-section-gold {
  background-color: var(--colors-gold);
  color: var(--colors-dark);
  border-radius: 0;
  padding: 100px 80px;
  text-align: center;
}
.cta-section-gold .h2-heading { color: var(--colors-dark); margin-bottom: 16px; }
.cta-section-gold .handwriting { color: var(--colors-dark); opacity: 0.7; }
.cta-section-gold .paragpaph { color: var(--colors-dark); opacity: 0.7; margin-bottom: 32px; }
.cta-section-gold .buton-primary {
  background-image: none;
  background-color: var(--colors-dark);
  color: #F5F2ED;
}
.cta-section-gold .buton-primary .button-text { color: #F5F2ED; }
.cta-section-gold .buton-primary:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.cta-section-gold .buton-secondary {
  border-color: var(--colors-dark);
  background-color: transparent;
  color: var(--colors-dark);
}

/* Dark footer variant */
.footer-dark {
  background-color: var(--colors-slate);
  color: #F5F2ED;
}
.footer-dark .footer-col-title { color: var(--colors-gold); }
.footer-dark .footer-link { color: rgba(245,242,237,0.5); }
.footer-dark .footer-link:hover { color: var(--colors-gold); opacity: 1; }
.footer-dark .footer-bottom { border-color: rgba(255,255,255,0.08); }
.footer-dark .footer-bottom-text { color: rgba(245,242,237,0.4); }
.footer-dark .paragpaph { color: rgba(245,242,237,0.5); }
.footer-dark input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #F5F2ED !important;
}
.footer-dark input[type="email"]::placeholder { color: rgba(245,242,237,0.35) !important; }

/* ===== Floating Filter Bar ===== */
.catalog-filter-bar {
  position: relative;
  z-index: 10;
  margin-top: -56px;
  padding: 0 5%;
}
.catalog-filter-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--colors-border);
  border-radius: 14px;
  padding: 20px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 28px;
}

/* ===== Property Catalog ===== */
.catalog-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
}
.catalog-filters.catalog-filters--stacked {
  grid-template-columns: 1fr 1fr;
  gap: 20px 32px;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--colors-text-secondary);
  white-space: nowrap;
  min-width: fit-content;
}
.catalog-results-bar {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--colors-border);
  margin-top: 16px;
  font-size: 15px;
  font-weight: 300;
  opacity: 0.7;
  gap: 12px;
  flex-wrap: wrap;
}
/* Compteur de resultats masque (demande client : "X biens trouves" non visible).
   Le JS continue d'ecrire dedans sans effet ; on retire le separateur pour ne pas
   laisser une barre vide bordee quand aucun filtre n'est actif. */
#resultsCount { display: none; }
.catalog-results-bar { border-bottom: none; padding-bottom: 0; }
.ref-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-search-input {
  width: 130px;
  padding: 6px 12px;
  border: 1px solid transparent;
  background: var(--colors-surface);
  border-radius: 8px;
  font-size: 13px;
  font-family: var(--font-primary);
  background: white;
  transition: border-color 0.2s;
}
.ref-search-input:focus { outline: none; border-color: var(--colors-gold); box-shadow: 0 0 0 3px rgba(220,175,39,0.1); }
.ref-search-input::placeholder { color: var(--colors-text-secondary); font-weight: 400; }
.catalog-no-results {
  display: none;
  text-align: center;
  padding: 80px 20px;
  font-size: 18px;
  font-weight: 300;
  opacity: 0.6;
}
.catalog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  margin-top: 32px;
}
.catalog-card {
  border: 1px solid var(--colors-border);
  background-color: white;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  text-decoration: none;
  color: var(--colors-text);
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.catalog-card:hover {
  border-color: var(--colors-gold-transparent);
  box-shadow: 0 4px 20px rgba(220,175,39,0.1);
  transform: translateY(-4px);
}
.catalog-card-image-wrap {
  position: relative;
  overflow: hidden;
}
.catalog-card-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform .4s;
}
.catalog-card:hover .catalog-card-image {
  transform: scale(1.05);
}
.catalog-card-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(255,255,255,0.94);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colors-text);
}
.catalog-card-new {
  position: absolute;
  top: 12px;
  right: 12px;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.catalog-card-photos {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.catalog-card-photos svg { width: 13px; height: 13px; opacity: 0.85; }
.catalog-card-fav {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  z-index: 2;
  border: none;
  padding: 0;
}
.catalog-card-fav:hover { transform: scale(1.1); background: white; }
.catalog-card-fav svg { width: 16px; height: 16px; stroke: var(--colors-text); fill: none; stroke-width: 2; }
.catalog-card-fav.liked svg { fill: #e74c3c; stroke: #e74c3c; }
.catalog-card-ref {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.4;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--colors-border);
}
.catalog-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.catalog-card-title {
  font-size: 17px;
  font-weight: 500;
  margin: 0;
  line-height: 130%;
}
.catalog-card-price {
  font-size: 22px;
  font-weight: 600;
  color: var(--colors-gold-accent);
  margin: 0;
}
.catalog-card-location {
  font-size: 14px;
  font-weight: 300;
  opacity: 0.6;
  margin: 0;
}
.catalog-card-specs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 300;
  opacity: 0.7;
}
.catalog-card-spec {
  display: flex;
  align-items: center;
  gap: 5px;
}
.catalog-card-spec svg {
  width: 16px;
  height: 16px;
  opacity: 0.5;
}

/* ===== Property Detail ===== */
.detail-ref {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--colors-text-secondary);
  background: var(--colors-surface);
  border: 1px solid var(--colors-border);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.detail-ref:empty { display: none; }
/* Bouton plein écran en haut à droite de la photo wide */
.gallery-expand {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff;
  border: none; border-radius: 10px; cursor: pointer;
  backdrop-filter: blur(2px);
  transition: background .2s;
}
.gallery-expand:hover { background: rgba(0,0,0,0.78); }
.gallery-expand:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 2px; }
.gallery-expand svg { width: 22px; height: 22px; }
/* Lightbox plein écran */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lb-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.lb-btn {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.12); color: #fff;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background .2s;
}
.lb-btn:hover { background: rgba(255,255,255,0.28); }
.lb-btn:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 2px; }
.lb-btn svg { width: 24px; height: 24px; }
.lb-close { top: 20px; right: 20px; width: 48px; height: 48px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-counter {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 14px; letter-spacing: .05em;
  background: rgba(0,0,0,0.45); padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 640px) {
  .gallery-expand { width: 40px; height: 40px; top: 12px; right: 12px; }
  .lb-close { width: 42px; height: 42px; top: 14px; right: 14px; }
  .lb-prev, .lb-next { width: 44px; height: 44px; }
  .lb-prev { left: 10px; } .lb-next { right: 10px; }
}
.detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.detail-gallery-main {
  border-radius: 24px;
  overflow: hidden;
  max-height: 500px;
}
.detail-gallery-main img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
  transition: opacity .3s;
}
/* Vignettes sur UNE seule ligne + flèches de navigation (slider horizontal). */
.detail-thumbs-slider { display: flex; align-items: center; gap: 10px; }
.detail-gallery-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE/Edge */
  flex: 1;
  min-width: 0;
}
.detail-gallery-thumbs::-webkit-scrollbar { display: none; }
.detail-thumb {
  flex: 0 0 96px;                     /* largeur fixe -> reste sur une ligne */
  border: 2px solid var(--colors-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .3s;
  background: none;
  padding: 0;
}
.thumb-arrow {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--colors-border);
  border-radius: 50%;
  background: white;
  color: var(--colors-text);
  cursor: pointer;
  transition: background .2s, border-color .2s, opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.thumb-arrow[hidden] { display: none; }
.thumb-arrow svg { width: 20px; height: 20px; }
.thumb-arrow:hover { border-color: var(--colors-gold); background: var(--colors-surface); }
.thumb-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }
.thumb-arrow:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 2px; }
.detail-thumb.active, .detail-thumb:hover {
  border-color: var(--colors-gold);
}
.detail-thumb:focus-visible {
  outline: 2px solid var(--colors-gold);
  outline-offset: 2px;
}
.detail-thumb img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  margin-top: 40px;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.detail-header-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-type-badge {
  display: inline-flex;
  background-color: var(--colors-surface);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--colors-gold-accent);
  width: fit-content;
}
.detail-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin: 0;
  line-height: 120%;
}
.detail-location {
  font-size: 16px;
  font-weight: 300;
  opacity: 0.6;
}
.detail-price {
  font-size: 28px;
  font-weight: 600;
  color: var(--colors-gold-accent);
  white-space: nowrap;
}
.detail-specs-row {
  display: flex;
  gap: 0;
  background-color: var(--colors-surface);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 32px;
}
.detail-spec-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 20px 16px;
  text-align: center;
  border-right: 1px solid var(--colors-border);
}
.detail-spec-item:last-child { border-right: none; }
.detail-spec-item svg {
  width: 24px;
  height: 24px;
  color: var(--colors-gold);
}
.detail-spec-value {
  font-size: 18px;
  font-weight: 500;
}
.detail-spec-label {
  font-size: 13px;
  font-weight: 300;
  opacity: 0.6;
}
.detail-description {
  margin-top: 32px;
}
.detail-description h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 16px;
}
.detail-description p {
  font-size: 16px;
  font-weight: 300;
  line-height: 170%;
  opacity: 0.8;
  margin-bottom: 16px;
}
.detail-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
.detail-features-grid h3 {
  grid-column: 1 / -1;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 4px;
}
.detail-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 300;
  padding: 8px 0;
}
.detail-feature-item svg {
  width: 18px;
  height: 18px;
  color: var(--colors-gold);
  flex-shrink: 0;
}
.detail-sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.detail-sidebar .sidebar-card {
  padding: 28px;
}
.detail-actions { display: flex; flex-direction: column; gap: 12px; }
.detail-action-btn { width: 100%; justify-content: center; }
.detail-sidebar .form-wrapper {
  gap: 16px;
}
/* Le formulaire (.form align-items:flex-start) ne stretche pas ses enfants :
   le bouton d'envoi restait calé à gauche en largeur-contenu. On l'étire pour
   qu'il remplisse la carte, comme les boutons d'action en dessous. */
.detail-sidebar .submit-button-wrap { align-self: stretch; }
.detail-sidebar .submit-button { width: 100%; }
/* .form a un fond blanc pur (#fff) à coins droits + height:100% : dans le
   sidebar il débordait sous la carte arrondie (tache blanche sur le fond crème)
   et forçait du vide. La carte porte déjà le fond -> on neutralise ici. */
.detail-sidebar .form { background: transparent; height: auto; padding: 0; }
.detail-sidebar .sidebar-card { overflow: hidden; }
.detail-agent-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background-color: var(--colors-surface);
  border-radius: 12px;
}
.detail-agent-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--colors-dark);
  flex-shrink: 0;
}
.detail-agent-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-agent-name {
  font-size: 16px;
  font-weight: 500;
}
.detail-agent-role {
  font-size: 13px;
  font-weight: 300;
  opacity: 0.6;
}
.detail-agent-phone {
  font-size: 14px;
  font-weight: 400;
  color: var(--colors-gold-accent);
  text-decoration: none;
  margin-top: 2px;
}
.detail-agent-phone:hover { text-decoration: underline; }

/* ===== Hero Ratings & Incentive ===== */
.hero-ratings {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-rating-pill {
  gap: 8px;
  padding: 8px 14px;
}
.hero-rating-pill span {
  font-size: 14px;
  font-weight: 500;
}

/* ===== Hero Search Bar ===== */
.hero-search-bar {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 6px;
  width: 100%;
  max-width: 900px;
}
.hero-search-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  min-width: 170px;
  flex: 1;
  position: relative;
}
.hero-search-field + .hero-search-field {
  border-left: 1px solid rgba(255,255,255,0.15);
}
.hero-search-field label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.hero-search-field select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  color: white;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 16px 2px 0;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
}
.hero-search-field select:focus {
  outline: none;
}
.hero-search-field select option {
  background: #2D2A26;
  color: white;
  padding: 6px 10px;
}
.hero-search-field--budget {
  min-width: 250px;
  flex: 1.4;
}
.hero-budget-range {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Chaque select doit rester assez large pour que la liste native ne tronque pas les montants */
.hero-budget-range select {
  flex: 1 1 0;
  min-width: 96px;
  padding-right: 16px;
}
.hero-budget-sep {
  flex: none;
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  line-height: 1;
}
.hero-search-field--ref {
  min-width: 120px;
  flex: 0.7;
}
.hero-search-field input[type="text"] {
  background: transparent;
  border: none;
  color: white;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  padding: 2px 0;
  width: 100%;
}
.hero-search-field input[type="text"]::placeholder {
  color: rgba(255,255,255,0.35);
}
.hero-search-field input[type="text"]:focus {
  outline: none;
}
.hero-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--colors-gold);
  color: var(--colors-dark);
  border: none;
  border-radius: 10px;
  padding: 12px 24px;
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.hero-search-btn:hover {
  background: var(--colors-pale-gold);
  transform: translateY(-1px);
}

/* ===== Region Quick Info ===== */
.region-quick-info {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.region-info-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.2;
}
.region-info-tag svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ===== Trust Banner ===== */
.trust-banner {
  display: flex;
  align-items: center;
  background: var(--colors-surface);
  border-bottom: 1px solid var(--colors-border);
  overflow: hidden;
  position: relative;
}
.trust-banner-label {
  flex-shrink: 0;
  padding: 16px 24px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--colors-text-secondary);
  border-right: 1px solid var(--colors-border);
  background: var(--colors-surface);
  z-index: 2;
}
.trust-banner-track {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent);
}
.trust-banner-scroll {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  padding: 18px 0;
  animation: trust-scroll 40s linear infinite;
}
.trust-logo-img {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 120px;
  height: 48px;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
/* Optical balancing: heavy / wide wordmarks fill their box too much, so we add
   padding to shrink their ink to match the compact marks. Tuned per logo.
   Les PNG ont ete detourees et recadrees (data/detour_press_logos.py), donc
   elles n'ont plus de marge interne : les valeurs ci-dessous ne compensent
   plus que le poids d'encre. Un logo en pave plein (Le Vif, Trends) pese plus
   qu'un contour (Le Soir) ou qu'un lettrage ajoure (L'Echo, RTL+). */
.trust-logo-img[src*="rtbf"]      { padding: 9px 26px; }
.trust-logo-img[src*="lavenir"]   { padding: 8px 18px; }
.trust-logo-img[src*="la-libre"]  { padding: 5px 12px; }
.trust-logo-img[src*="dh.svg"]    { padding: 7px 16px; }
.trust-logo-img[src*="trends"]    { padding: 6px 12px; }
.trust-logo-img[src*="le-vif"]    { padding: 5px 10px; }
.trust-logo-img[src*="soirmag"]   { padding: 3px 6px; }
.trust-logo-img[src*="lecho"]     { padding: 2px 4px; }
.trust-banner:hover .trust-logo-img {
  opacity: 1;
}
.trust-banner:hover .trust-banner-scroll {
  animation-play-state: paused;
}
@keyframes trust-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== Moments Grid (Facebook posts) ===== */
.moments-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 48px;
}
.moment-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: default;
  flex: 1 1 260px;
  height: 260px;
}
.moment-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.moment-card:hover img {
  transform: scale(1.04);
}
.moment-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 16px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 60%, transparent 100%);
  color: white;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.moment-card:hover .moment-overlay {
  opacity: 1;
  transform: translateY(0);
}
.moment-region {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(220, 175, 39, 0.85);
  color: #1a1a1a;
}
.moment-caption {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  margin: 0;
}
.moments-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.moments-fb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  text-decoration: none;
  transition: color 0.2s ease;
}
.moments-fb-link:hover {
  color: #1877F2;
}
.moments-fb-link svg {
  flex-shrink: 0;
}

/* ===== Delight: Scroll Progress Bar ===== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--colors-gold);
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ===== Delight: Hero Pill Shimmer ===== */
.hero-incentive {
  position: relative;
  overflow: hidden;
}
.hero-incentive::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: pillShimmer 4s ease-in-out 2s infinite;
}
@keyframes pillShimmer {
  0%, 100% { left: -100%; }
  50% { left: 150%; }
}

/* ===== Performance Hints ===== */
.property-card,
.blog-card,
.step-card,
.process-step,
.testimonials-wrapper,
.city-card {
  contain: layout style paint;
  will-change: transform;
}
.buton-primary,
.buton-secondary {
  will-change: transform, box-shadow;
}

/* ===== Site-wide Motion Layer ===== */

/* Navigation links */
.nav-link,
.mega-menu-link {
  transition: color 0.2s var(--ease-out-expo), transform 0.2s var(--ease-out-expo);
}
.mega-menu-link:hover {
  transform: translateX(4px);
}

/* Step & blog cards */
.step-card,
.blog-card {
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease, border-color 0.35s ease;
}
.step-card:hover,
.blog-card:hover {
  transform: translateY(-4px);
}
.blog-card img {
  transition: transform 0.5s var(--ease-out-expo);
}
.blog-card:hover img {
  transform: scale(1.03);
}

/* Testimonial cards */
.testimonials-wrapper {
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}
.testimonials-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07);
}

/* FAQ accordion */
.faq-question-wrap {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.faq-content {
  transition: max-height 0.45s var(--ease-out-expo);
}

/* Form inputs */
input, select, textarea {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(220, 175, 39, 0.12);
}

/* Footer & social links */
.footer-col a {
  transition: color 0.2s var(--ease-out-expo);
}
.footer-col a:hover {
  color: var(--colors-gold);
}
.social-link {
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out-expo);
}
.social-link:hover {
  transform: scale(1.12);
}

/* Trust flow entrance */
.trust-flow .trust-pair {
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

/* Gold CTA section */
.cta-section-gold {
  transition: transform 0.7s var(--ease-out-expo);
}

/* Image zoom on hover (covers, thumbnails) */
.city-card-image,
.property-cover img {
  transition: transform 0.5s var(--ease-out-expo);
}
.city-card:hover .city-card-image,
.property-cover:hover img {
  transform: scale(1.04);
}

/* Process steps - upgrade easing */
.process-step {
  transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
}

/* Whatsapp widget */
.wa-contact-fab,
#waContactFab {
  transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
}
.wa-contact-fab:hover,
#waContactFab:hover {
  transform: scale(1.08);
}

/* ===== Hero Entrance Choreography ===== */
.hero-center .hero-incentive,
.hero-center .h1-heading,
.hero-center .paragpaph.hero,
.hero-center .button-wrap,
.hero-search-bar {
  opacity: 0;
  transform: translateY(16px);
  animation: heroEntrance 0.55s var(--ease-out-expo) forwards;
}
/* Chorégraphie resserrée (0,8 s x 5 étages jusqu'à 1,5 s -> ~0,8 s au total). */
.hero-center .hero-incentive { animation-delay: 0s; }
.hero-center .h1-heading { animation-delay: 0.06s; transform: translateY(20px); }
.hero-center .paragpaph.hero { animation-delay: 0.14s; }
.hero-center .button-wrap { animation-delay: 0.2s; }
/* Barre de recherche : elle porte un backdrop-filter ; la faire glisser recalcule le flou
   a chaque image (a-coup). Fondu seul. */
.hero-search-bar { animation: heroFade 0.5s ease-out 0.26s forwards; transform: none; }
@keyframes heroFade { to { opacity: 1; } }

@keyframes heroEntrance {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Button Hover Feedback ===== */
.buton-primary,
.buton-secondary {
  transition: transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.buton-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 175, 39, 0.25);
}
.buton-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.buton-primary:active,
.buton-secondary:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* ===== Property Card Hover ===== */
.property-card {
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}
.property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
.property-card img {
  transition: transform 0.5s var(--ease-out-expo);
}
.property-card:hover img {
  transform: scale(1.03);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .hero-center .hero-incentive,
  .hero-center .h1-heading,
  .hero-center .paragpaph.hero,
  .hero-center .button-wrap,
  .hero-search-bar {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .buton-primary:hover,
  .buton-secondary:hover,
  .property-card:hover,
  .step-card:hover,
  .blog-card:hover,
  .testimonials-wrapper:hover,
  .process-step:hover,
  .wa-contact-fab:hover,
  .social-link:hover,
  .mega-menu-link:hover {
    transform: none;
  }
  .blog-card:hover img,
  .property-card:hover img,
  .city-card:hover .city-card-image {
    transform: none;
  }
  .hero-incentive::after {
    animation: none;
  }
  .scroll-progress {
    display: none;
  }
}

/* ===== Responsive ===== */
@media screen and (max-width: 991px) {
  :root { --main-text: 16px; --h1: 3.2em; --h2: 50px; }
  .container { padding-inline: 40px; z-index: 10; }
  .container-nav { padding: 20px 40px; }
  .container-footer { padding: 24px 40px; }
  .h1-heading { max-width: 500px; }
  .handwriting { font-size: 90px; padding: 0 4px; }
  .handwriting.h2 { font-size: 65px; }
  .hero-container { padding-bottom: 32px; padding-top: 80px; gap: 24px; }
  .hero-center { gap: 20px; }
  .content-wrapper { gap: 24px; }
  .hero-ratings { gap: 8px; }
  .hero-rating-pill { padding: 6px 12px; }
  .hero-rating-pill span { font-size: 13px; }
  .hero-incentive { font-size: 12px; padding: 7px 14px; }
  .paragpaph.big.half-width { width: 70%; }
  .full-size-image { height: 300px; margin-bottom: 100px; }
  .content-wrap-centered { width: 100%; }
  .h2-heading.half-width { width: 70%; }
  .card-wrapper { display: grid; grid-template-columns: 1fr 1fr; }
  .card-wrapper-3col { grid-template-columns: 1fr 1fr; }
  .process-flow { grid-template-columns: 1fr 1fr; }
  .highlight-grid-3col { grid-template-columns: 1fr 1fr; }
  .commitments-grid { grid-template-columns: 1fr 1fr; }
  .property-list-grid { gap: 24px; grid-template-columns: 1fr 1fr; }
  .faq-wrapper { width: 100%; }
  .contact-wrapper { flex-flow: column; }
  .contact-info-wrap { width: 100%; }
  .form-block { width: 100%; }
  .blog-list-flex { gap: 24px; }
  .slide { min-width: 350px; max-width: 350px; }
  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 2px; margin: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--colors-border);
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    padding: 12px clamp(20px,5vw,40px) 24px;
  }
  .nav-menu.open { display: flex; }
  .nav-menu .nav-link { color: var(--colors-text) !important; font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--colors-border); }
  .nav-menu .nav-cta { margin-top: 14px; align-self: flex-start; }
  .buton-secondary.menu { display: flex; }
  .trust-num { font-size: 20px; }
  .steps-wrapper { gap: 16px; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .testimonials-grid { columns: 2; }
  .video-testimonials-grid { grid-template-columns: 1fr; }
  .cities-grid { grid-template-columns: 1fr 1fr; }
  .offices-grid { grid-template-columns: 1fr 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .blog-grid { gap: 24px; }
  .cta-section { padding: 60px 40px; }
  .cta-section-gold { padding: 80px 40px; }
  .catalog-filters { gap: 12px 24px; }
  .catalog-filter-bar-inner { padding: 16px 20px; gap: 14px 20px; }
  .catalog-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
  .detail-gallery-main img { height: 400px; }
  .hero-search-bar { flex-wrap: wrap; }
  .hero-search-field { min-width: 140px; flex: 1 1 auto; }
  .hero-search-field--budget { min-width: 250px; flex: 1 1 100%; }
  .hero-search-btn { width: 100%; justify-content: center; }
  .moments-grid { gap: 12px; }
  .moment-card { flex-basis: 220px; height: 230px; }
  .spain-map-layout { grid-template-columns: 300px 1fr; gap: 32px; margin-top: 40px; }
  .spain-map-item { padding: 14px 16px; }
  .spain-map-item-name { font-size: 15px; }
  .spain-map-item-meta { gap: 12px; font-size: 12px; }
  .spain-map-item-head { padding-right: 20px; }
}

@media screen and (max-width: 767px) {
  :root { --h1: 2.5em; --h2: 40px; }
  .container { padding-inline: 20px; }
  .container-nav { padding: 16px 20px; }
  .container-footer { padding: 20px; }
  .hero-container { padding-bottom: 24px; padding-top: 112px; gap: 20px; justify-content: flex-start; }
  .hero-center { gap: 16px; }
  .content-wrapper { gap: 20px; }
  .h1-heading { max-width: 100%; }
  /* line-height serre (70-90%) coupe les jambages de la cursive quand les
     titres reviennent a la ligne sur mobile -> on relache + petit padding bas. */
  .handwriting { font-size: 60px; line-height: 0.98; }
  .handwriting.h2 { font-size: 55px; line-height: 1.02; padding-bottom: 2px; }
  .handwriting.h2.small { font-size: 50px; line-height: 1.02; }
  .sd-promo-text .h2-heading .handwriting.h2 { line-height: 1.02; }
  .hero-center .paragpaph.hero { max-width: 100%; }
  .hero-ratings { gap: 8px; }
  .hero-rating-pill { padding: 6px 10px; }
  .hero-rating-pill span { font-size: 12px; }
  .hero-incentive { font-size: 11px; padding: 6px 12px; }
  .hero-incentive svg { width: 14px; height: 14px; }
  .button-wrap { gap: 12px; flex-wrap: wrap; }
  /* flex-wrap reste "wrap" du bloc 991 : en flex-direction column ca enroulait
     les champs sur plusieurs colonnes qui se chevauchaient. On force nowrap. */
  .hero-search-bar { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .hero-search-field + .hero-search-field { border-left: none; border-top: 1px solid rgba(255,255,255,0.15); }
  .hero-search-field { min-width: unset; padding: 10px 16px; flex: 0 0 auto; }
  .hero-search-field--ref { flex: 1; }
  .hero-search-btn { width: 100%; justify-content: center; padding: 14px 24px; border-radius: 10px; }
  .paragpaph.big.half-width { width: 100%; }
  .content-wrap-horizontal { flex-flow: column; gap: 24px; }
  .h2-heading.half-width { width: 100%; }
  .card-wrapper { grid-template-columns: 1fr; }
  .card-wrapper-3col { grid-template-columns: 1fr; }
  .service-list { grid-template-columns: 1fr; }
  .service-list-item:nth-child(odd) { border-right: none; }
  .process-flow { grid-template-columns: 1fr; }
  .highlight-grid { grid-template-columns: 1fr; }
  .commitments-grid { grid-template-columns: 1fr; }
  .commitment-item:nth-child(odd) { border-right: none; }
  .property-list-grid { grid-template-columns: 1fr; }
  .blog-list-flex { flex-flow: column; }
  .blog-image-frame { height: 260px; }
  .slide { min-width: 300px; max-width: 300px; }
  /* .nav-menu mobile dropdown handled at max-width:991px */
  .mega-menu-grid { grid-template-columns: 1fr; gap: 24px; }
  .footer-wrap { flex-flow: column; gap: 24px; }
  .footer-link-wrap { flex-wrap: wrap; justify-content: center; }
  .field-wrapper { flex-flow: column; }
  .trust-flow { padding: 32px 0; gap: 10px 20px; }
  .trust-num { font-size: 18px; }
  .trust-pair { font-size: 14px; }
  .spain-map-layout { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .spain-map-visual { max-width: 480px; margin: 0 auto; }
  .spain-map-list { order: 2; }
  .spain-map-visual { order: 1; }
  .spain-map-item { padding: 14px 16px; }
  .spain-map-item::after { right: 16px; }
  .spain-map-item-head { padding-right: 20px; }
  .spain-map-item-meta { flex-wrap: wrap; gap: 8px 14px; }
  .spain-map-footer { margin-top: 32px; }
  .spain-province { stroke-width: 0.3; }
  .spain-svg-label { font-size: 5px; stroke-width: 1.5px; }
  .steps-wrapper { flex-direction: column; align-items: center; }
  .step-card { max-width: 100%; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { columns: 1; }
  .cities-grid { grid-template-columns: 1fr; }
  .offices-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .comparison-table { font-size: 13px; }
  .comparison-table th, .comparison-table td { padding: 10px 12px; }
  .hero-inner { min-height: 300px; }
  .cta-section { padding: 48px 24px; }
  .cta-section-gold { padding: 60px 20px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .trust-banner-label { display: none; }
  .trust-logo-img { width: 96px; height: 36px; }
  .trust-banner-scroll { gap: 28px; }
  .moments-grid { gap: 10px; margin-top: 32px; }
  .moment-card { flex-basis: 44%; height: 200px; }
  .moment-overlay { opacity: 1; transform: none; background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, transparent 70%); }
  .moment-caption { font-size: 12px; }
  .moments-footer { gap: 20px; flex-direction: column; }
  .catalog-filter-bar { margin-top: -40px; padding: 0 16px; }
  .catalog-filter-bar-inner { padding: 16px; gap: 12px; border-radius: 12px; }
  .catalog-filters { grid-template-columns: 1fr; gap: 14px; }
  .filter-group { flex-direction: column; align-items: flex-start; gap: 6px; }
  .catalog-grid { grid-template-columns: 1fr; gap: 20px; }  /* une colonne sur mobile : deux etaient illisibles */
  .catalog-card-image { height: 200px; }
  /* cartes etroites en 2 colonnes : les specs ch/sdb/m2 debordaient sur une
     seule ligne -> on resserre et on autorise le retour a la ligne. */
  .catalog-card-content { padding: 16px; }
  .catalog-card-specs { flex-wrap: wrap; gap: 6px 12px; font-size: 13px; }
  .catalog-card-spec { gap: 4px; }
  .catalog-card-spec svg { width: 14px; height: 14px; }
  .ref-search-wrap { margin-left: 0; width: 100%; }
  .ref-search-input { flex: 1; width: auto; }
  .detail-specs-row { flex-wrap: wrap; }
  .detail-spec-item { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--colors-border); }
  .detail-features-grid { grid-template-columns: 1fr; }
  .detail-header { flex-direction: column; }
  .detail-gallery-main img { height: 300px; }
  .detail-thumb img { height: 60px; }
  .detail-breadcrumb-section { padding-left: 20px !important; padding-right: 20px !important; }
  .detail-gallery-section { padding-left: 20px !important; padding-right: 20px !important; }
  .detail-content-section { padding-left: 20px !important; padding-right: 20px !important; }
}

@media screen and (max-width: 479px) {
  :root { --h1: 1.8em; --h2: 34px; }
  .hero-container { padding-bottom: 20px; padding-top: 104px; gap: 16px; justify-content: flex-start; }
  .hero-center { gap: 14px; }
  .content-wrapper { gap: 16px; }
  .handwriting { font-size: 46px; }
  .handwriting.h2 { font-size: 40px; }
  .slide { min-width: 280px; max-width: 280px; }
  .h2-heading.small { font-size: 40px; }
  .team-grid { grid-template-columns: 1fr; }
  .hero-rating-pill { padding: 5px 8px; }
  .hero-rating-pill span { font-size: 11px; }
  .hero-incentive { font-size: 10px; padding: 5px 10px; }
  .buton-primary, .buton-secondary { padding: 14px 20px; font-size: 14px; }
  .container { padding-inline: 16px; }
  .moment-card { flex-basis: 100%; height: 220px; }
  .catalog-card-image { height: 180px; }
  .detail-gallery-main img { height: 240px; }
  .detail-gallery-thumbs { gap: 8px; }
  .detail-thumb img { height: 50px; }
}

/* ===== Ultra-wide ===== */
@media screen and (min-width: 1600px) {
  .container { max-width: 1540px; padding-inline: 100px; }
  .container-nav { max-width: 1540px; padding: 24px 100px; }
  .container-footer { max-width: 1540px; padding: 32px 100px; }
  :root { --h1: 4.2em; --h2: 60px; --main-text: 19px; }
  .hero-center { max-width: 800px; gap: 28px; }
  .hero-search-bar { max-width: 900px; }
  .catalog-grid { grid-template-columns: 1fr 1fr 1fr; }
  .property-list-grid { grid-template-columns: repeat(4, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
  .process-flow { grid-template-columns: repeat(4, 1fr); }
  .testimonials-grid { columns: 3; }
  .moment-card { flex-basis: 300px; height: 300px; }
  .cities-grid { grid-template-columns: repeat(3, 1fr); }
  .spain-map-layout { grid-template-columns: 380px 1fr; gap: 48px; }
  .cta-section-gold { padding: 120px 80px; }
}

@media screen and (min-width: 2560px) {
  .container { max-width: 1800px; padding-inline: 120px; }
  .container-nav { max-width: 1800px; }
  :root { --h1: 4.8em; --h2: 68px; --main-text: 20px; --big-text: 22px; }
  .hero-center { max-width: 900px; }
  .catalog-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
  .trust-flow { gap: 16px 32px; }
  .trust-num { font-size: 26px; }
  .trust-pair { font-size: 17px; }
}

/* ===== Mobile touch & CTA fixes ===== */
@media screen and (max-width: 767px) {
  /* Hero 3 CTAs: stack vertically */
  .hero-cta-trio {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .hero-cta-trio .buton-primary,
  .hero-cta-trio .buton-secondary {
    justify-content: center;
    text-align: center;
    min-height: 48px;
  }

  /* Touch targets: 44px minimum */
  .buton-primary, .buton-secondary {
    min-height: 44px;
    padding: 12px 20px;
  }
  .mega-menu-link {
    padding: 10px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .faq-question-bar {
    min-height: 44px;
    padding: 12px 0;
  }
  .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Trust flow: tighter on mobile */
  .trust-flow {
    gap: 8px 16px;
    padding: 28px 0;
  }
  .trust-dot {
    width: 3px;
    height: 3px;
  }
}

@media screen and (max-width: 479px) {
  /* Hero CTAs: full-width buttons */
  .hero-cta-trio {
    max-width: 100%;
  }
  .hero-cta-trio .buton-primary,
  .hero-cta-trio .buton-secondary {
    width: 100%;
  }

  /* Trust flow: wrap freely, smaller text */
  .trust-flow {
    justify-content: center;
    gap: 6px 12px;
    padding: 24px 0;
  }
  .trust-num { font-size: 16px; }
  .trust-pair { font-size: 13px; white-space: normal; }
  .trust-dot { display: none; }
}

/* ── Scroll Animations ── */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .catalog-card { transition: none; }
  .catalog-card:hover { transform: none; }
  .catalog-card:hover .catalog-card-image { transform: none; }
  .catalog-card-image { transition: none; }
  .detail-gallery-main img { transition: none; }
  .detail-thumb { transition: none; }
  .filter-pill { transition: none; }
}

/* ===== Speed Dating Immo ===== */
.sd-wizard {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 80px;
}

/* Step indicator */
.sd-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.sd-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--colors-border);
  background: white;
  transition: all .3s;
  flex-shrink: 0;
}
.sd-dot.active, .sd-dot.done {
  border-color: var(--colors-gold);
  background: var(--colors-gold);
}
.sd-line {
  width: 60px;
  height: 2px;
  background: var(--colors-border);
  transition: background .3s;
}
.sd-line.done { background: var(--colors-gold); }

/* Steps */
.sd-step { display: none; }
.sd-step.active { display: block; animation: sd-fadeIn .4s ease; }
.sd-step-card {
  border: 1px solid var(--colors-border);
  background: white;
  border-radius: 24px;
  padding: 40px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.sd-step-title { font-size: 24px; font-weight: 500; margin-bottom: 4px; }
.sd-step-subtitle { font-size: 15px; font-weight: 300; opacity: .6; margin-bottom: 28px; }

/* Form */
.sd-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sd-field label { font-size: 14px; font-weight: 400; }
.sd-field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--colors-border);
  background: var(--colors-bg);
  border-radius: 8px;
  padding: 12px;
  font-family: inherit;
  font-size: 15px;
  color: var(--colors-text);
  outline: none;
  transition: border-color .3s;
}
.sd-field input:focus { border-color: var(--colors-gold); }
.sd-field input::placeholder { color: #9B9490; font-weight: 300; }

/* Section label */
.sd-section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--colors-gold);
  margin-bottom: 12px;
  margin-top: 24px;
}
.sd-section-label:first-of-type { margin-top: 0; }

/* Checkboxes */
.sd-checkbox-group { display: flex; gap: 12px; }
.sd-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid var(--colors-border);
  background: white;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 400;
  transition: border-color .3s, box-shadow .3s;
  flex: 1;
}
.sd-checkbox.checked {
  border-color: var(--colors-gold);
  box-shadow: 0 0 0 1px var(--colors-gold);
}
.sd-checkbox input { accent-color: var(--colors-gold); width: 18px; height: 18px; }

/* Radio pills */
.sd-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.sd-radio-pill {
  cursor: pointer;
  border: 1px solid var(--colors-border);
  background: white;
  border-radius: 40px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 400;
  transition: all .3s;
  flex: 1;
  text-align: center;
  white-space: nowrap;
}
.sd-radio-pill.checked {
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  border-color: var(--colors-gold);
}
.sd-radio-pill input { display: none; }

/* Buttons */
.sd-next-btn {
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  border: none;
  border-radius: 40px;
  background-image: radial-gradient(circle farthest-corner at 50% 100%, var(--colors-gold) 69%, var(--colors-pale-gold));
  color: var(--colors-dark);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: box-shadow .3s;
}
.sd-next-btn:hover { box-shadow: 0 4px 20px var(--colors-gold-transparent); }
.sd-back-btn {
  width: 100%;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--colors-border);
  border-radius: 40px;
  background: white;
  color: var(--colors-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .3s;
}
.sd-back-btn:hover { border-color: var(--colors-gold-transparent); }
.sd-step2-actions { display: flex; flex-direction: column-reverse; margin-top: 24px; }
.sd-step2-actions .sd-next-btn { margin-top: 0; }
.sd-step2-actions .sd-back-btn { margin-top: 0; margin-bottom: 8px; }
.sd-link-btn {
  background: none;
  border: none;
  color: var(--colors-gold-accent);
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px 0;
}

/* Counter */
.sd-counter { text-align: center; font-size: 14px; font-weight: 300; opacity: .6; margin-bottom: 20px; }

/* Card stack */
.sd-swipe-area {
  position: relative;
  width: 100%;
  min-height: 420px;
}
.sd-card-stack { position: relative; width: 100%; height: 420px; }
.sd-card-stack:empty { height: 0; }
.sd-card {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--colors-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform;
}
.sd-card:active { cursor: grabbing; }
.sd-card:nth-child(2) { transform: translateY(8px) scale(0.97); z-index: -1; pointer-events: none; }
.sd-card:nth-child(3) { transform: translateY(16px) scale(0.94); z-index: -2; pointer-events: none; }
.sd-card-img {
  width: 100%;
  height: 55%;
  object-fit: cover;
  pointer-events: none;
}
.sd-card-body {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sd-card-type {
  display: inline-flex;
  width: fit-content;
  background: var(--colors-surface);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--colors-gold-accent);
  text-transform: capitalize;
}
.sd-card-nom { font-size: 17px; font-weight: 500; margin: 0; }
.sd-card-lieu { font-size: 13px; font-weight: 300; opacity: .6; margin: 0; }
.sd-card-prix { font-size: 20px; font-weight: 600; color: var(--colors-gold-accent); margin: 4px 0 0; }
.sd-card-specs { display: flex; gap: 14px; font-size: 13px; font-weight: 300; opacity: .7; margin-top: 2px; }

/* Swipe feedback badges */
.sd-badge {
  position: absolute;
  top: 20px;
  padding: 8px 20px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
.sd-badge-like { right: 20px; border: 3px solid #4CAF50; color: #4CAF50; transform: rotate(-15deg); }
.sd-badge-nope { left: 20px; border: 3px solid #f44336; color: #f44336; transform: rotate(15deg); }

/* Action buttons */
.sd-actions { display: flex; justify-content: center; gap: 32px; margin-top: 24px; }
.sd-btn-pass, .sd-btn-like {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--colors-border);
  background: white;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .3s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.sd-btn-pass:hover { border-color: #f44336; color: #f44336; box-shadow: 0 4px 20px rgba(244,67,54,0.2); }
.sd-btn-like:hover { border-color: #4CAF50; color: #4CAF50; box-shadow: 0 4px 20px rgba(76,175,80,0.2); }
.sd-prefs-link { text-align: center; margin-top: 16px; }

/* Match overlay */
.sd-match-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.sd-match-overlay.active { display: flex; }
.sd-match-content {
  background: white;
  border-radius: 24px;
  padding: 40px 32px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  animation: sd-matchPop .5s ease;
}
.sd-match-heart { font-size: 64px; animation: sd-heartBeat 1s ease infinite; }
.sd-match-title {
  font-family: var(--font-secondary);
  font-size: 36px;
  font-weight: 700;
  color: var(--colors-gold);
  margin: 8px 0 20px;
}
.sd-match-card {
  border: 1px solid var(--colors-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sd-match-card img { width: 100%; height: 160px; object-fit: cover; }
.sd-match-card-info { padding: 12px 16px; text-align: left; }
.sd-match-card-info p { margin: 0 0 2px; font-size: 14px; font-weight: 300; opacity: .7; }
.sd-match-card-info strong { font-size: 16px; font-weight: 500; }
.sd-match-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.sd-match-actions .sd-next-btn { display: inline-flex; justify-content: center; text-decoration: none; }

/* Empty state */
.sd-empty { text-align: center; padding: 60px 20px; }
.sd-empty-icon { font-size: 48px; margin-bottom: 16px; }
.sd-empty-title { font-size: 22px; font-weight: 500; margin-bottom: 8px; }
.sd-empty-text { font-size: 15px; font-weight: 300; opacity: .6; margin-bottom: 24px; }
.sd-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sd-empty-actions .sd-next-btn { width: auto; padding: 14px 32px; }

/* Keyframes */
@keyframes sd-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sd-swipeRight {
  to { transform: translateX(150%) rotate(30deg); opacity: 0; }
}
@keyframes sd-swipeLeft {
  to { transform: translateX(-150%) rotate(-30deg); opacity: 0; }
}
@keyframes sd-matchPop {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes sd-heartBeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.1); }
  60% { transform: scale(1); }
}

/* ===== Floating Mobile CTA Bar ===== */
.mobile-cta-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 998;
  background: var(--colors-dark);
  padding: 10px 16px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}
.mobile-cta-bar.visible { transform: translateY(0); }
.mobile-cta-phone {
  color: white;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.mobile-cta-phone svg { width: 16px; height: 16px; flex-shrink: 0; }
.mobile-cta-btn {
  background: var(--colors-gold);
  color: var(--colors-dark);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .mobile-cta-bar { display: flex; }
  /* barre CTA = 65px de haut : WhatsApp remonte au-dessus (76 + encoche) */
  .mobile-cta-bar.visible ~ .wa-contact-fab,
  .mobile-cta-bar.visible ~ #waContactFab { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
}
@media screen and (min-width: 768px) {
  .mobile-cta-bar { display: none !important; }
}

/* ===== Interactive Spain Map Section ===== */
.spain-map-section { overflow: hidden; }
.spain-map-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 48px;
  align-items: center;
  margin-top: 56px;
}

/* Region list */
.spain-map-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.spain-map-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border-radius: 0;
  text-decoration: none;
  color: var(--colors-text);
  position: relative;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.16,1,0.3,1), padding-left 0.35s cubic-bezier(0.16,1,0.3,1);
  /* Entrance animation */
  opacity: 0;
  transform: translateX(-24px);
}
.spain-map-item + .spain-map-item {
  border-top: 1px solid var(--colors-border);
}
.spain-map-section.revealed .spain-map-item {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1),
              background 0.35s cubic-bezier(0.16,1,0.3,1), padding-left 0.35s cubic-bezier(0.16,1,0.3,1);
}
.spain-map-section.revealed .spain-map-item:nth-child(1) { transition-delay: 0.15s; }
.spain-map-section.revealed .spain-map-item:nth-child(2) { transition-delay: 0.25s; }
.spain-map-section.revealed .spain-map-item:nth-child(3) { transition-delay: 0.35s; }
.spain-map-section.revealed .spain-map-item:nth-child(4) { transition-delay: 0.45s; }
.spain-map-section.revealed .spain-map-item:nth-child(5) { transition-delay: 0.55s; }

/* Hover / active state */
.spain-map-item:hover,
.spain-map-item.is-active {
  background: oklch(0.97 0.012 80);
  padding-left: 28px;
}

/* Arrow indicator slides in on hover/active */
.spain-map-item::after {
  content: "\2192";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  font-size: 16px;
  color: var(--colors-gold-accent);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.spain-map-item:hover::after,
.spain-map-item.is-active::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.spain-map-item-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-right: 24px;
}
.spain-map-item-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--colors-text);
  transition: color 0.25s ease;
}
.spain-map-item:hover .spain-map-item-name,
.spain-map-item.is-active .spain-map-item-name {
  color: var(--colors-gold-accent);
}
.spain-map-item-count {
  font-size: 13px;
  font-weight: 500;
  color: var(--colors-gold-accent);
  opacity: 0.8;
}
.spain-map-item-meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  font-weight: 400;
  color: var(--colors-text-secondary);
}
.spain-map-item-meta span {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.spain-map-item-meta span::before {
  font-size: 11px;
  opacity: 0.55;
}
.spain-map-item-meta span:nth-child(2)::before { content: "\2600"; }
.spain-map-item-meta span:nth-child(3)::before { content: "\2708"; }

/* Map visual container */
.spain-map-visual {
  position: relative;
  width: 100%;
}

/* Inline SVG map */
.spain-map-svg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.spain-map-section.revealed .spain-map-svg {
  opacity: 1;
  transform: scale(1);
}

/* Province shapes */
.spain-province {
  fill: oklch(0.92 0.005 80);
  stroke: oklch(0.99 0.005 80);
  stroke-width: 0.5;
  transition: fill 0.35s ease, stroke 0.35s ease;
}
.spain-province--target {
  cursor: pointer;
  pointer-events: all;
}
.spain-province--target:hover,
.spain-province--target.is-active {
  fill: oklch(0.87 0.06 85);
  stroke: var(--colors-gold);
  stroke-width: 0.8;
}

/* SVG dot markers */
.spain-svg-dot {
  pointer-events: all;
  cursor: pointer;
}
.spain-svg-dot-point {
  fill: var(--colors-gold);
  stroke: oklch(0.99 0.005 80);
  stroke-width: 1.5;
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), fill 0.25s ease;
}
/* Staggered dot reveal */
.spain-map-section.revealed .spain-svg-dot[data-region="cbn"] .spain-svg-dot-point { transform: scale(1); transition-delay: 0.4s; }
.spain-map-section.revealed .spain-svg-dot[data-region="cbs"] .spain-svg-dot-point { transform: scale(1); transition-delay: 0.55s; }
.spain-map-section.revealed .spain-svg-dot[data-region="cc"]  .spain-svg-dot-point { transform: scale(1); transition-delay: 0.7s; }
.spain-map-section.revealed .spain-svg-dot[data-region="ca"]  .spain-svg-dot-point { transform: scale(1); transition-delay: 0.85s; }
.spain-map-section.revealed .spain-svg-dot[data-region="cds"] .spain-svg-dot-point { transform: scale(1); transition-delay: 1.0s; }
/* Dot hover/active */
.spain-svg-dot:hover .spain-svg-dot-point,
.spain-svg-dot.is-active .spain-svg-dot-point {
  fill: var(--colors-gold-accent);
  transform: scale(1.4);
}
/* Pulse ring */
.spain-svg-dot-pulse {
  fill: var(--colors-gold);
  opacity: 0;
  transform-origin: center;
}
.spain-svg-dot.is-active .spain-svg-dot-pulse {
  animation: map-dot-ping 1.5s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes map-dot-ping {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0; transform: scale(3); }
}

/* SVG region labels */
.spain-svg-label {
  font-family: var(--font-primary);
  font-size: 6.5px;
  font-weight: 600;
  fill: var(--colors-text);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  paint-order: stroke;
  stroke: oklch(0.99 0.005 80);
  stroke-width: 2px;
  stroke-linejoin: round;
}
.spain-svg-label--left {
  text-anchor: end;
}
.spain-svg-label.is-active {
  opacity: 1;
}
/* Mobile : la carte est rendue ~2x plus petite, donc 6.5u ~ 5px reels
   (illisible). On agrandit les labels (place APRES la regle de base pour
   gagner l'ordre-source ; le bloc <=767 plus haut etait sans effet). */
@media (max-width: 767px) {
  .spain-svg-label { font-size: 11px; stroke-width: 2.6px; }
}
/* Aeroports sur la carte */
.spain-svg-airport {
  font-family: var(--font-primary);
  font-size: 4.4px;
  font-weight: 500;
  fill: var(--colors-text);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.spain-svg-airport--left { text-anchor: end; }
.spain-map-section.revealed .spain-svg-airport,
.lp-regions-map .spain-svg-airport { opacity: 0.72; }

.spain-map-footer {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spain-map-item,
  .spain-map-svg {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .spain-province {
    transition: fill 0.15s ease;
  }
  .spain-svg-dot-point {
    transform: scale(1);
    transition: fill 0.2s ease;
  }
  .spain-svg-dot-pulse {
    animation: none;
  }
  .spain-svg-label {
    transition: opacity 0.15s ease;
  }
}

/* ===== Hero Incentive Badge ===== */
.hero-incentive {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--colors-gold);
  color: var(--colors-dark);
  padding: 8px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 16px;
  animation: pulse-badge 2.5s ease-in-out infinite;
}
.hero-incentive svg { width: 16px; height: 16px; flex-shrink: 0; }
@keyframes pulse-badge {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,175,39,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(220,175,39,0); }
}

/* Speed Dating responsive */
@media screen and (max-width: 767px) {
  .sd-wizard { max-width: 100%; }
  .sd-form-grid { grid-template-columns: 1fr; }
  .sd-step-card { padding: 28px 20px; }
  .sd-swipe-area { height: 380px; }
  .sd-checkbox-group { flex-direction: column; }
  .sd-radio-group { flex-direction: column; }
}
@media screen and (max-width: 479px) {
  .sd-swipe-area { height: 350px; }
  .sd-card-body { padding: 10px 14px; gap: 3px; }
  .sd-card-nom { font-size: 15px; }
  .sd-card-prix { font-size: 18px; }
  .sd-actions { gap: 24px; }
  .sd-btn-pass, .sd-btn-like { width: 52px; height: 52px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sd-step.active { animation: none; }
  .sd-match-content { animation: none; }
  .sd-match-heart { animation: none; }
  .sd-card { transition: none !important; }
}

/* ===== OVERDRIVE: Speed Dating deck physics + match ===== */
.sd-card-stack { perspective: 1200px; }
.sd-card { backface-visibility: hidden; transition: box-shadow .35s var(--ease-out-expo); }
/* JS drives deck depth now; drop the static peek transforms */
.sd-card:nth-child(2), .sd-card:nth-child(3) { transform: none; }
/* Intent wash while dragging (green = like, red = pass) */
.sd-card-tint {
  position: absolute; inset: 0; border-radius: 20px;
  opacity: 0; pointer-events: none; z-index: 6;
  mix-blend-mode: multiply; transition: opacity .12s linear;
}
/* Match overlay: WAAPI drives the entrance, so kill the CSS pop */
.sd-match-content { animation: none; position: relative; z-index: 2; }
.sd-confetti { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.sd-match-actions .sd-next-btn { min-width: 210px; }
@media (prefers-reduced-motion: reduce) {
  .sd-card-tint { transition: none; }
  .sd-card { transition: none !important; }
}

/* ===== OVERDRIVE: Contact - living form + bridge ===== */
/* Floating-label fields */
.ff-row { display: flex; gap: 20px; }
.ff-row > .ff-field { flex: 1; min-width: 0; }
.ff-field { position: relative; }
.ff-radios { display: flex; flex-direction: column; gap: 8px; }
.ff-radios-label { font-size: 13px; color: var(--colors-text-secondary); letter-spacing: .02em; }
.ff-input {
  width: 100%; min-height: 56px; padding: 22px 40px 8px 14px;
  border: 1px solid var(--colors-border); border-radius: 10px;
  background: var(--colors-bg); color: var(--colors-text);
  font-family: inherit; font-size: 15px; outline: none;
  transition: border-color .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo);
}
textarea.ff-input { min-height: 120px; padding-top: 26px; resize: vertical; line-height: 1.5; }
.ff-label {
  position: absolute; left: 14px; top: 17px; font-size: 15px; font-weight: 300; color: #9B9490;
  pointer-events: none; transform-origin: left top;
  transition: transform .2s var(--ease-out-expo), color .2s var(--ease-out-expo);
}
.ff-input:focus + .ff-label,
.ff-input:not(:placeholder-shown) + .ff-label { transform: translateY(-10px) scale(0.74); color: var(--colors-gold-accent); }
.ff-input:focus { border-color: var(--colors-gold); box-shadow: 0 0 0 3px var(--colors-warm-white); }

/* Validation feedback (reassuring, not alarming) */
.ff-check { position: absolute; right: 12px; top: 16px; width: 20px; height: 20px; color: #4f9a52;
  opacity: 0; transform: scale(.5); transition: opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo); }
.ff-check svg { width: 18px; height: 18px; }
.ff-field.is-valid .ff-input { border-color: #8fbf8a; }
.ff-field.is-valid .ff-check { opacity: 1; transform: scale(1); }
.ff-field.is-invalid .ff-input { border-color: #d79b86; }
.ff-hint { display: block; font-size: 12.5px; color: #bd7a5e; margin-top: 5px;
  max-height: 0; overflow: hidden; opacity: 0; transition: opacity .2s var(--ease-out-expo), max-height .2s var(--ease-out-expo); }
.ff-field.is-invalid .ff-hint { opacity: 1; max-height: 24px; }
.ff-field.ff-shake { animation: ffShake .4s ease; }
@keyframes ffShake { 10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(2px);} 30%,50%,70%{transform:translateX(-4px);} 40%,60%{transform:translateX(4px);} }

/* Foot: completion meter + submit choreography */
.ff-foot { align-self: stretch; width: 100%; display: flex; flex-direction: column; gap: 14px; }
.ff-progress { display: flex; align-items: center; gap: 12px; }
.ff-meter { flex: 1; height: 5px; border-radius: 99px; background: var(--colors-surface); overflow: hidden; }
.ff-meter-fill { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--colors-gold-accent), var(--colors-gold)); transition: width .45s var(--ease-out-expo); }
.ff-meter-text { font-size: 12.5px; color: var(--colors-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ff-submit { position: relative; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 28px; border: none; border-radius: 40px; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 500; color: var(--colors-dark);
  background-image: radial-gradient(circle farthest-corner at 50% 130%, var(--colors-gold) 60%, var(--colors-pale-gold));
  filter: saturate(.85) opacity(.92);
  transition: box-shadow .4s var(--ease-out-expo), filter .4s var(--ease-out-expo), transform .2s var(--ease-out-expo); }
.ff-submit.is-ready { filter: none; box-shadow: 0 8px 26px -8px var(--colors-gold-transparent); }
.ff-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--colors-gold-transparent); }
.ff-submit-label { transition: opacity .2s; }
.ff-submit-spinner, .ff-submit-check { position: absolute; left: 50%; top: 50%; }
.ff-submit-spinner { width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2.5px solid rgba(26,23,20,0.25); border-top-color: var(--colors-dark); border-radius: 50%; opacity: 0; animation: ffSpin .7s linear infinite; }
.ff-submit-check { width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; transform: scale(.5); transition: opacity .25s var(--ease-out-expo), transform .25s var(--ease-out-expo); }
.ff-submit.is-loading .ff-submit-label, .ff-submit.is-done .ff-submit-label { opacity: 0; }
.ff-submit.is-loading .ff-submit-spinner { opacity: 1; }
.ff-submit.is-done .ff-submit-check { opacity: 1; transform: scale(1); }
.ff-submit.is-loading, .ff-submit.is-done { pointer-events: none; }
@keyframes ffSpin { to { transform: rotate(360deg); } }

/* Success state */
.form-success-icon { position: relative; overflow: visible; }
.form-success-sun { position: absolute; inset: -22px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(220,175,39,0.35), rgba(220,175,39,0) 70%); opacity: 0; transform: scale(.4); }
.form-success.active .form-success-sun { animation: ffSun 1.1s var(--ease-out-expo) forwards; }
@keyframes ffSun { 0%{opacity:0;transform:scale(.4);} 50%{opacity:1;} 100%{opacity:.8;transform:scale(1);} }
.ff-success-check { stroke-dasharray: 30; stroke-dashoffset: 30; }
.form-success.active .ff-success-check { animation: ffDraw .6s var(--ease-out-expo) .15s forwards; }
@keyframes ffDraw { to { stroke-dashoffset: 0; } }
.form-success.active .form-success-title { animation: ffRise .5s var(--ease-out-expo) .25s backwards; }
.form-success.active .form-success-desc { animation: ffRise .5s var(--ease-out-expo) .35s backwards; }
.form-success.active .ff-success-cta { animation: ffRise .5s var(--ease-out-expo) .45s backwards; }
@keyframes ffRise { from { opacity: 0; transform: translateY(10px); } }
.ff-success-cta { display: inline-block; margin-top: 22px; padding: 12px 22px; border: 1px solid var(--colors-border); border-radius: 40px;
  font-size: 14px; font-weight: 500; color: var(--colors-text); text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .2s var(--ease-out-expo); }
.ff-success-cta:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 6px 20px -8px var(--colors-gold-transparent); transform: translateY(-1px); }

/* Belgium <-> Spain bridge */
.bridge-lede { max-width: 60ch; margin: 12px auto 0; text-align: center; color: var(--colors-text-secondary); }
.bridge { max-width: 820px; margin: clamp(28px,4vw,48px) auto 0; }
.bridge-svg { width: 100%; height: auto; display: block; overflow: visible; }
.bridge-arc { fill: none; stroke: var(--colors-gold); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.bridge.in .bridge-arc { transition: stroke-dashoffset 2s var(--ease-out-quint); stroke-dashoffset: 0; }
.bridge-pin-dot { fill: var(--colors-gold-accent); }
.bridge-pin-ring { fill: none; stroke: var(--colors-gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.bridge.in .bridge-pin-ring { animation: bridgePulse 2.6s var(--ease-out-quint) infinite; }
@keyframes bridgePulse { 0%{transform:scale(.5);opacity:.6;} 70%{transform:scale(3);opacity:0;} 100%{opacity:0;} }
.bridge-sun { fill: url(#bridgeSun); opacity: 0; transition: opacity 1.1s ease .5s; }
.bridge.in .bridge-sun { opacity: 1; }
.bridge-label { font-family: var(--font-primary); fill: var(--colors-text); paint-order: stroke; stroke: var(--colors-bg); stroke-width: 3px; stroke-linejoin: round; }
.bridge-label--lg { font-size: 16px; font-weight: 600; }
.bridge-label--sm { font-size: 12px; font-weight: 400; fill: var(--colors-text-secondary); }
.bridge-fly { font-family: var(--font-primary); font-size: 13px; font-style: italic; fill: var(--colors-gold-accent); }
.bridge-plane { fill: var(--colors-dark); opacity: 0; transition: opacity .4s ease; }
.bridge.in .bridge-plane { opacity: 1; }

@media (max-width: 600px) { .ff-row { flex-direction: column; gap: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .ff-meter-fill, .ff-label, .ff-check, .ff-submit-check { transition: none; }
  .ff-submit-spinner { animation: none; }
  .form-success-sun, .form-success.active .ff-success-check, .form-success.active .form-success-title,
  .form-success.active .form-success-desc, .form-success.active .ff-success-cta { animation: none; }
  .ff-success-check { stroke-dashoffset: 0; }
  .form-success-sun { opacity: .8; transform: scale(1); }
  .bridge.in .bridge-arc { transition: none; stroke-dashoffset: 0; }
  .bridge.in .bridge-pin-ring { animation: none; }
}

/* ===== A11Y: focus, contrast, skip-link ===== */
.skip-link {
  position: absolute; left: 12px; top: -56px; z-index: 10001;
  background: var(--colors-gold); color: var(--colors-dark);
  padding: 10px 16px; border-radius: 8px; font-family: var(--font-primary);
  font-weight: 600; text-decoration: none;
  transition: top .2s cubic-bezier(0.16,1,0.3,1);
}
.skip-link:focus { top: 12px; }

/* Visible keyboard focus for every interactive element (WCAG 2.4.7) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
.buton-primary:focus-visible, .buton-secondary:focus-visible,
.submit-button:focus-visible, .ff-submit:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex="0"]:focus-visible {
  outline: 3px solid var(--colors-gold);
  outline-offset: 3px;
}
.footer-dark a:focus-visible,
.section-dark a:focus-visible,
.cta-section a:focus-visible,
.navbar.navbar-visible a:focus-visible { outline-color: var(--colors-pale-gold); }
main[tabindex="-1"]:focus { outline: none; }

/* Converted menu button keeps the brand font + look */
button.buton-secondary, button.buton-primary {
  font-family: var(--font-primary); -webkit-appearance: none; appearance: none; cursor: pointer;
}

/* Contrast: lift de-emphasised text back above 4.5:1 (WCAG 1.4.3) */
.link { opacity: .82; }
.footer-link { opacity: .72; }
.footer-dark .footer-link { color: rgba(245,242,237,0.72); opacity: 1; }

/* ===== Mobile layout fixes (overflow + menu) ===== */
/* Grid items must be allowed to shrink; otherwise the SVG map's intrinsic
   width blows the 1fr track past the viewport and the map runs off-screen. */
.spain-map-layout > * { min-width: 0; }
.spain-map-visual, .spain-map-list { min-width: 0; }
.spain-map-svg { max-width: 100%; }

/* Mobile mega-menu: cap height and allow internal scroll so the whole menu
   (Services column + Contact CTA) is always reachable. */
@media screen and (max-width: 991px) {
  .nav-menu.open {
    max-height: calc(100vh - 92px);
    max-height: calc(100dvh - 92px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Responsive tables (no page overflow) ===== */
@media screen and (max-width: 767px) {
  .comparison-table, .cookie-table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ===== Mobile: de-cramp fixed inline paddings ===== */
@media screen and (max-width: 767px) {
  .hero-inner-content { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ===== Spain map: single column on tablet/mobile ===== */
@media screen and (max-width: 991px) {
  .spain-map-layout { grid-template-columns: 1fr !important; gap: 24px; }
  .spain-map-visual { order: 1; min-width: 0; max-width: 480px; margin: 0 auto; width: 100%; }
  .spain-map-list { order: 2; min-width: 0; }
}

/* ===== OVERDRIVE: FAQ explorer (search + filter + scroll-spy) ===== */
.faq-explorer { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: start; max-width: 1040px; margin: 56px auto 0; }
.faq-explorer .faq-wrapper.full-width { max-width: none; margin: 0; }

.faq-rail { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; }
.faq-search { position: relative; margin-bottom: 10px; }
.faq-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--colors-text-secondary); pointer-events: none; }
.faq-search input { width: 100%; padding: 11px 34px 11px 36px; border: 1px solid var(--colors-border); border-radius: 10px; background: var(--colors-bg); font-family: inherit; font-size: 14px; color: var(--colors-text); outline: none; transition: border-color .25s var(--ease-out-expo), box-shadow .25s var(--ease-out-expo); }
.faq-search input:focus { border-color: var(--colors-gold); box-shadow: 0 0 0 3px var(--colors-warm-white); }
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: none; background: none; font-size: 20px; line-height: 1; color: var(--colors-text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.faq-search-clear:hover { color: var(--colors-text); }

.faq-nav { display: flex; flex-direction: column; gap: 2px; }
.faq-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: none; background: none; border-radius: 9px; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--colors-text-secondary); cursor: pointer; transition: background .2s var(--ease-out-expo), color .2s var(--ease-out-expo); }
.faq-nav-link svg { width: 16px; height: 16px; flex: none; opacity: .65; }
.faq-nav-link:hover { color: var(--colors-text); background: var(--colors-surface); }
.faq-nav-link.is-active { color: var(--colors-dark); background: var(--colors-warm-white); font-weight: 600; }
.faq-nav-link.is-active svg { opacity: 1; color: var(--colors-gold-accent); }
.faq-count { margin: 14px 0 0; padding: 0 12px; font-size: 12.5px; color: var(--colors-text-secondary); font-variant-numeric: tabular-nums; }

.faq-group[hidden], .faq-question-wrap[hidden] { display: none; }
.faq-group .faq-category-title { margin-top: 40px; }
.faq-explorer .faq-group:first-child .faq-category-title { margin-top: 0; }

/* Accordion: smooth grid-rows, no clipping */
/* minmax(0,..) : sans ca le track ferme prenait la taille min-content du
   paragraphe (son padding ~24px) et laissait voir une bribe de reponse. */
.faq-content { display: grid; grid-template-rows: minmax(0, 0fr); max-height: none; transition: grid-template-rows .35s var(--ease-out-expo); }
.faq-question-wrap.open .faq-content { grid-template-rows: minmax(0, 1fr); max-height: none; }
.faq-content > .faq-paragraph { overflow: hidden; min-height: 0; }

.question-title mark { background: rgba(220,175,39,0.30); color: inherit; padding: 0 2px; border-radius: 3px; }

.faq-empty { text-align: center; padding: 48px 20px; color: var(--colors-text-secondary); }
.faq-empty a { display: inline-block; margin-top: 8px; color: var(--colors-gold-accent); font-weight: 600; text-decoration: none; }
.faq-empty a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .faq-content { transition: none; } }

@media screen and (max-width: 860px) {
  .faq-explorer { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .faq-rail { position: static; }
  .faq-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .faq-nav-link { white-space: nowrap; border: 1px solid var(--colors-border); border-radius: 999px; padding: 8px 14px; }
  .faq-nav-link svg { display: none; }
  .faq-count { padding: 0; }
}

/* ============ LEAD-GEN / CATALOGUE ============ */
.lead-hero { max-width: 1240px; margin: 0 auto; padding: 150px clamp(20px, 5vw, 60px) 90px; position: relative; isolation: isolate; }
.lead-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(36px, 5vw, 72px); align-items: start; }
.lead-pitch .h1-heading { line-height: 1.05; }
.lead-checklist { list-style: none; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.lead-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.lead-check { flex-shrink: 0; color: var(--colors-gold); margin-top: 1px; }
.lead-emoji { flex-shrink: 0; font-size: 20px; line-height: 1.2; }
.lead-checklist strong { display: block; font-size: 15px; font-weight: 500; color: var(--colors-text); margin-bottom: 3px; }
.lead-checklist li > div { font-size: 13.5px; line-height: 1.45; color: rgba(45,42,38,.6); }

/* Hero : photo lifestyle (cliente lisant le catalogue) */
.lead-hero-photo { margin: 34px 0 0; position: relative; max-width: 560px; }
.lead-hero-photo img { width: 100%; height: auto; display: block; border-radius: 18px; box-shadow: 0 20px 50px rgba(45,42,38,0.18); }
.lead-hero-photo figcaption { position: absolute; left: 16px; bottom: 16px; background: #fff; padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--colors-text); box-shadow: 0 6px 18px rgba(45,42,38,0.16); }

@media (max-width: 560px) {
  .lead-checklist { grid-template-columns: 1fr; gap: 16px; }
}
.lead-teaser { display: flex; align-items: center; gap: 14px; margin-top: 36px; }
.lead-teaser img { width: 142px; height: 100px; object-fit: cover; object-position: top center; border-radius: 9px; box-shadow: 0 10px 26px rgba(45,42,38,0.18); border: 4px solid #fff; }
.lead-teaser img:nth-child(2) { margin-left: -52px; transform: rotate(3deg); }
.lead-teaser span { font-size: 14px; font-weight: 500; color: var(--colors-text); opacity: .75; }

.lead-form-card { background: #fff; border: 1px solid var(--colors-border); border-radius: 22px; padding: clamp(28px, 3vw, 40px); box-shadow: 0 24px 70px rgba(45,42,38,0.10); position: sticky; top: 100px; }
.lead-form-card form { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.lead-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lead-field label { font-size: 13px; font-weight: 500; color: var(--colors-text); }
.lead-field input { box-sizing: border-box; width: 100%; min-width: 0; padding: 13px 15px; font: inherit; font-size: 15px; color: var(--colors-text); background: var(--colors-bg); border: 1px solid var(--colors-border); border-radius: 11px; transition: border-color .2s ease, box-shadow .2s ease; }
.lead-field input::placeholder { color: var(--colors-text); opacity: .38; }
.lead-field input:focus { outline: none; border-color: var(--colors-gold); box-shadow: 0 0 0 3px rgba(220,175,39,0.18); }
.lead-submit { width: 100%; justify-content: center; margin-top: 4px; }
.lead-reassure { font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--colors-text); opacity: .55; margin: 4px 0 0; }
/* Piege a robots. Sorti du flux plutot que display:none : certains robots
   ignorent deliberement les champs masques, aucun ne calcule une position. */
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ty-section { max-width: 980px; margin: 0 auto; padding: 150px clamp(20px, 5vw, 60px) 110px; text-align: center; }
.ty-badge { width: 76px; height: 76px; margin: 0 auto 28px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--colors-gold); box-shadow: 0 12px 34px rgba(220,175,39,0.40); }
.resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 50px; text-align: left; }
.resource-card { background: #fff; border: 1px solid var(--colors-border); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
.resource-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(45,42,38,0.12); }
.resource-cover-wrap { aspect-ratio: 1432 / 1012; overflow: hidden; background: var(--colors-surface); border-bottom: 1px solid var(--colors-border); }
.resource-cover-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.resource-body { padding: 24px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.resource-kicker { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--colors-gold-accent); }
.resource-title { font-size: 20px; font-weight: 500; margin: 0; color: var(--colors-text); line-height: 1.2; }
.resource-dl { margin-top: 16px; width: 100%; justify-content: center; gap: 9px; }
.ty-next { margin-top: 54px; padding-top: 38px; border-top: 1px solid var(--colors-border); display: flex; flex-direction: column; align-items: center; gap: 16px; }

@media (max-width: 900px) {
  .lead-hero { padding-top: 120px; }
  .lead-grid { grid-template-columns: 1fr; gap: 40px; }
  .lead-form-card { position: static; margin-top: 0; }
  .ty-section { padding-top: 120px; }
  .resource-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  .lead-form-grid { grid-template-columns: 1fr; }
  .lead-teaser img { width: 116px; height: 82px; }
  .lead-teaser img:nth-child(2) { margin-left: -42px; }
}

/* ===== Speed Dating Immo - promo (homepage) ===== */
.sd-promo-section { background: linear-gradient(180deg, var(--colors-bg), var(--colors-surface)); }
.sd-promo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.sd-promo-text { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; }
.sd-promo-text .pill-wrap { align-self: flex-start; margin-bottom: 24px; }
.sd-promo-text .h2-heading { margin-bottom: 20px; }
.sd-promo-text .h2-heading .handwriting.h2 { line-height: 90%; }
.sd-promo-features {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 22px 0 28px;
}
.sd-promo-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--colors-text-secondary);
}
.sd-promo-feature svg { width: 18px; height: 18px; color: var(--colors-gold); flex-shrink: 0; }
.sd-promo-visual { display: flex; justify-content: center; }
.sd-promo-cards { position: relative; width: 300px; height: 380px; }
.sd-promo-card {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background-size: cover;
  background-position: center;
  border: 4px solid #fff;
  box-shadow: 0 18px 50px rgba(45, 42, 38, 0.18);
}
.sd-promo-card--back { transform: rotate(-8deg) translateY(8px) scale(0.94); opacity: 0.7; }
.sd-promo-card--mid { transform: rotate(5deg) translateY(4px) scale(0.97); opacity: 0.85; }
.sd-promo-card--front { transform: rotate(-2deg); overflow: hidden; }
.sd-promo-like {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--colors-gold);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 7px 14px;
  border-radius: 40px;
  transform: rotate(8deg);
  box-shadow: 0 4px 14px rgba(220, 175, 39, 0.4);
}
.sd-promo-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 18px 16px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), transparent);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sd-promo-card-info strong { font-size: 18px; }
.sd-promo-card-info span { font-size: 14px; opacity: 0.9; }
@media (max-width: 900px) {
  .sd-promo { grid-template-columns: 1fr; gap: 36px; text-align: center; }
  /* relache le line-height cursif (override la regle de base plus haut) */
  .sd-promo-text .h2-heading .handwriting.h2 { line-height: 1.02; }
  .sd-promo-text { max-width: none; align-items: center; }
  .sd-promo-text .pill-wrap { align-self: center; }
  .sd-promo-visual { order: -1; }
  .sd-promo-features { justify-content: center; }
  .sd-promo .button-wrap { justify-content: center; }
}
@media (max-width: 520px) {
  .sd-promo-cards { width: 240px; height: 310px; }
}

/* ===== Événements (séances d'info) ===== */
.event-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.event-card { display: flex; gap: 18px; padding: 22px; border: 1px solid var(--colors-border); border-radius: 14px; background: #fff; transition: box-shadow .2s ease, border-color .2s ease; }
.event-card:hover { border-color: var(--colors-gold-transparent); box-shadow: 0 10px 30px rgba(220,175,39,.1); }
.event-date { flex-shrink: 0; width: 66px; text-align: center; border-radius: 10px; background: var(--colors-surface); padding: 12px 0; height: fit-content; }
.event-date .ed-day { font-size: 22px; font-weight: 700; color: var(--colors-gold); line-height: 1.05; }
.event-date .ed-mon { font-size: 12px; text-transform: uppercase; color: var(--colors-text-secondary); letter-spacing: 1px; }
.event-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--colors-gold); background: rgba(220,175,39,.12); padding: 3px 10px; border-radius: 40px; margin-bottom: 8px; }
.event-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.event-loc { font-size: 13px; color: var(--colors-text-secondary); display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
.event-loc svg { width: 14px; height: 14px; }
.event-body p { margin: 0 0 14px; font-size: 14px; color: var(--colors-text-secondary); line-height: 1.45; }
@media (max-width: 768px) { .event-grid { grid-template-columns: 1fr; } }

/* ===== Mur de preuve (home) =====
   Bande editoriale, pas une carte : filets 1px en haut/bas, et les separateurs
   internes sont obtenus par gap:1px sur un fond couleur bordure -> la grille de
   filets reste parfaite quel que soit le nombre de colonnes apres wrap.

   Les panneaux sont hauts : ils portent la preuve elle-meme (visages, regions,
   etapes) et non un simple libelle. L'icone et le texte sont ancres en bas
   (justify-content: flex-end), ce qui vaut pour l'etat clair comme pour l'etat
   image : aucun deplacement quand les imagettes arrivent derriere. */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 1px;
  background: var(--colors-border);
  border-top: 1px solid var(--colors-border);
  border-bottom: 1px solid var(--colors-border);
}
.proof-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 14px;
  min-height: clamp(380px, 33vw, 520px);
  padding: 28px 22px 26px;
  background: var(--colors-bg);
  text-decoration: none;
  color: var(--colors-text);
  transition: background-color .25s var(--ease-out-expo);
}
.proof-item:hover { background: var(--colors-surface); }
.proof-item:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: -2px; }
/* Icone nue : la pastille arrondie mangeait la largeur utile du titre */
.proof-icon { color: var(--colors-gold); line-height: 0; }
.proof-icon svg { width: 24px; height: 24px; }
.proof-text { display: flex; flex-direction: column; gap: 4px; }
.proof-text strong { font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; text-wrap: balance; }
.proof-text span { font-size: 13.5px; color: var(--colors-text-secondary); line-height: 1.4; }
/* Fleche signature du site : revele au survol, sans decalage de mise en page */
.proof-item::after {
  content: "";
  position: absolute;
  top: 26px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: var(--colors-gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.29289 13.2929C0.902369 13.6834 0.902369 14.3166 1.29289 14.7071C1.68342 15.0976 2.31658 15.0976 2.70711 14.7071L2 14L1.29289 13.2929ZM15.0208 1.97918C15.0208 1.4269 14.5731 0.979185 14.0208 0.979184L5.02081 0.979185C4.46853 0.979185 4.02081 1.4269 4.02082 1.97918C4.02082 2.53147 4.46853 2.97918 5.02082 2.97918L13.0208 2.97918L13.0208 10.9792C13.0208 11.5315 13.4685 11.9792 14.0208 11.9792C14.5731 11.9792 15.0208 11.5315 15.0208 10.9792L15.0208 1.97918ZM2 14L2.70711 14.7071L14.7279 2.68629L14.0208 1.97918L13.3137 1.27208L1.29289 13.2929L2 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.29289 13.2929C0.902369 13.6834 0.902369 14.3166 1.29289 14.7071C1.68342 15.0976 2.31658 15.0976 2.70711 14.7071L2 14L1.29289 13.2929ZM15.0208 1.97918C15.0208 1.4269 14.5731 0.979185 14.0208 0.979184L5.02081 0.979185C4.46853 0.979185 4.02081 1.4269 4.02082 1.97918C4.02082 2.53147 4.46853 2.97918 5.02082 2.97918L13.0208 2.97918L13.0208 10.9792C13.0208 11.5315 13.4685 11.9792 14.0208 11.9792C14.5731 11.9792 15.0208 11.5315 15.0208 10.9792L15.0208 1.97918ZM2 14L2.70711 14.7071L14.7279 2.68629L14.0208 1.97918L13.3137 1.27208L1.29289 13.2929L2 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.proof-item:hover::after,
.proof-item:focus-visible::after { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .proof-item { min-height: 300px; padding: 22px 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-item, .proof-item::after { transition: none; }
  .proof-item:hover::after, .proof-item:focus-visible::after { transform: none; }
}

/* ===== OVERDRIVE: la bande de reassurance s'ecrit =====
   La bande s'assemble a l'entree dans le viewport : les filets se tracent,
   les icones s'encrent au trait, puis les chiffres s'incrementent. Le tic-tac
   est 100% CSS (propriete <integer> enregistree + counter()), aucun JS ajoute :
   la choreographie se branche sur la classe .visible que l'IntersectionObserver
   de la page pose deja sur la section .reveal.

   Toute la mecanique est enfermee dans @media (scripting: enabled) : sans JS,
   aucun etat cache n'est applique et la bande s'affiche complete et lisible. */
.proof-item:nth-child(1) { --proof-delay: 0ms; }
.proof-item:nth-child(2) { --proof-delay: 90ms; }
.proof-item:nth-child(3) { --proof-delay: 180ms; }
.proof-item:nth-child(4) { --proof-delay: 270ms; }
.proof-item:nth-child(5) { --proof-delay: 360ms; }

@media (scripting: enabled) {
  /* 1. Les filets. Les separateurs internes ne sont que le fond du conteneur vu
     au travers du gap:1px -> un balayage de background-size les fait apparaitre
     de gauche a droite, sans un seul element supplementaire. */
  .proof-strip {
    position: relative;
    border-color: transparent;
    background-color: transparent;
    background-image: linear-gradient(var(--colors-border) 0 0);
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size 1.05s var(--ease-out-expo) .1s;
  }
  .reveal.visible .proof-strip { background-size: 100% 100%; }
  /* Filets haut et bas : scaleX, donc compositor pur. */
  .proof-strip::before,
  .proof-strip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--colors-border);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s var(--ease-out-expo);
  }
  .proof-strip::before { top: -1px; }
  .proof-strip::after { bottom: -1px; transition-delay: .12s; }
  .reveal.visible .proof-strip::before,
  .reveal.visible .proof-strip::after { transform: scaleX(1); }

  /* 2. L'encrage des icones. Le trace complet est l'etat de repos : si
     l'animation ne se joue jamais (onglet en arriere-plan, rendu headless),
     l'icone est simplement deja dessinee au lieu de rester invisible. */
  .proof-icon svg > * { stroke-dasharray: 1; }
  .reveal.visible .proof-icon svg > * {
    animation: proofInk .9s var(--ease-out-expo) calc(220ms + var(--proof-delay)) both;
  }

}

@keyframes proofInk { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ===== OVERDRIVE: le mur de preuve =====
   Chaque panneau PORTE la preuve de ce qu'il annonce : les 16 visages, les 5
   regions, les 5 etapes, le mur des familles, les vraies questions. Elle est
   visible d'emblee -- "la confiance avant la conversion" : cacher la preuve
   derriere un survol revenait a enterrer l'argument. Le survol ne fait plus que
   l'intensifier (le voile s'allege, l'image avance d'un cran).

   Tout est branche sur .peek-ready, posee par proof-peek.js une fois le contenu
   injecte : sans JS aucun panneau ne bascule en sombre, le mur reste clair.

   Les etats de repos sont les etats FINAUX ; l'entree en scene est une
   @keyframes jouee sur .reveal.visible. Si elle ne se joue jamais (onglet en
   arriere-plan, rendu headless), le mur est deja affiche -- rien n'est
   conditionne a une transition.

   Le texte passe en blanc sur un voile sombre plutot que de rester en encre sur
   la photo : c'est le traitement deja retenu pour .profil-card, ou le blanc
   tient >12:1 quelle que soit l'image en dessous. */
.proof-item { isolation: isolate; overflow: hidden; }
.proof-icon, .proof-text { position: relative; z-index: 1; }

.proof-peek {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: transform .6s var(--ease-out-expo);
}
/* Voile : leger en haut ou vit l'image, dense en bas ou vit le texte. */
.proof-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,23,20,.06) 0%,
    rgba(26,23,20,.28) 48%,
    rgba(26,23,20,.90) 100%);
  transition: opacity .45s var(--ease-out-expo);
}
/* Survol : l'image avance et le voile s'allege. Plancher a .8 -- en dessous, le
   blanc de la legende descend sous 4.5:1 sur les imagettes les plus claires. */
.proof-strip.peek-ready .proof-item:hover .proof-peek,
.proof-strip.peek-ready .proof-item:focus-visible .proof-peek { transform: scale(1.045); }
.proof-strip.peek-ready .proof-item:hover .proof-peek::after,
.proof-strip.peek-ready .proof-item:focus-visible .proof-peek::after { opacity: .8; }

.proof-strip.peek-ready .proof-item { background: var(--colors-dark); }
.proof-strip.peek-ready .proof-text strong { color: #fff; }
.proof-strip.peek-ready .proof-text span { color: rgba(255,255,255,.86); }
.proof-strip.peek-ready .proof-icon { color: var(--colors-pale-gold); }
.proof-strip.peek-ready .proof-item::after { background: var(--colors-pale-gold); }

/* -- Mosaiques : les visages de l'equipe, le mur des familles --
   --rows est pose par le JS d'apres le nombre reel d'imagettes, pour que la
   mosaique remplisse le panneau sans rangee trouee. */
.peek-team, .peek-clients {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(var(--rows, 4), 1fr);
  gap: 1px;
}
.peek-tile {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Les photos de familles sont de vrais instantanes de vacances, tres satures et
   tres bavards a cote des portraits d'equipe en noir et blanc : on les calme
   d'un cran pour que les deux mosaiques appartiennent au meme mur. */
.peek-clients .peek-tile { filter: saturate(.72) contrast(1.04); }
.reveal.visible .proof-strip.peek-ready .peek-tile {
  animation: peekTileIn .55s var(--ease-out-expo) calc(var(--i) * 22ms) both;
}
@keyframes peekTileIn { from { opacity: 0; transform: scale(.86); } }

/* -- Les 5 regions : bandes verticales qui s'ouvrent en sequence --
   Le nom est ecrit a la verticale et ancre en haut : il degage ainsi le bas du
   panneau, ou vient s'inscrire le libelle de la cellule. */
.peek-regions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; }
.peek-region {
  position: relative;
  background-size: cover;
  background-position: center;
}
/* Scrim haut : Costa Calida et Costa Almeria ouvrent sur un ciel clair, ou le
   seul text-shadow laissait le nom sous le seuil de lisibilite. */
.peek-region::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 46%;
  background: linear-gradient(to bottom, rgba(26,23,20,.62), rgba(26,23,20,0));
}
.reveal.visible .proof-strip.peek-ready .peek-region {
  animation: peekBandIn .6s var(--ease-out-expo) calc(var(--i) * 75ms) both;
}
@keyframes peekBandIn { from { clip-path: inset(0 100% 0 0); } }
.peek-region-label {
  position: absolute;
  left: 50%; top: 14px;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 1px 3px rgba(0,0,0,.65);
  white-space: nowrap;
}

/* -- Les etapes et les questions : purement typographiques --
   La liste occupe le haut du panneau ; la reserve basse laisse respirer le
   libelle de la cellule, qui vient se poser par-dessus. */
.peek-steps, .peek-faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 26px 22px 104px;
  background: var(--colors-slate);
}
/* 13px et pas 14 : a 14, "Reservation & demarches" se replie sur deux lignes
   dans une colonne de 207px et casse l'alignement de la liste. L'air se gagne
   par le gap, pas par le corps. */
.peek-line {
  font-size: 13px;
  line-height: 1.35;
  color: rgba(255,255,255,.94);
  text-wrap: pretty;
}
.reveal.visible .proof-strip.peek-ready .peek-line {
  animation: peekLineIn .5s var(--ease-out-expo) calc(var(--i) * 60ms) both;
}
@keyframes peekLineIn { from { opacity: 0; transform: translateY(8px); } }
.peek-steps .peek-line { padding-left: 16px; position: relative; }
.peek-steps .peek-line::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--colors-gold);
}
.peek-faq .peek-line::before { content: "— "; color: var(--colors-gold); }
/* Sur l'ardoise, un voile plein n'a pas lieu d'etre : juste un fond de page qui
   detache le libelle de la derniere ligne de la liste. */
.peek-steps::after, .peek-faq::after {
  background: linear-gradient(to bottom,
    rgba(26,23,20,0) 42%,
    rgba(26,23,20,.58) 100%);
}

@media (max-width: 560px) {
  .peek-steps, .peek-faq { gap: 7px; padding: 22px 18px 92px; }
  .peek-line { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .proof-strip { transition: none; background-size: 100% 100%; }
  .proof-strip::before, .proof-strip::after { transition: none; transform: scaleX(1); }
  .proof-icon svg > * { stroke-dashoffset: 0; animation: none !important; }
  .proof-peek, .proof-peek::after { transition: none; }
  .peek-tile, .peek-region, .peek-line { animation: none !important; }
  .proof-strip.peek-ready .proof-item:hover .proof-peek,
  .proof-strip.peek-ready .proof-item:focus-visible .proof-peek { transform: none; }
}

/* ===== Buyer journey / parcours sur-mesure ===== */
.bj-options { display: grid; gap: 12px; margin: 10px 0 20px; }
.bj-options.bj-2col { grid-template-columns: 1fr 1fr; }
.bj-opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px 18px; border: 1.5px solid var(--colors-border); border-radius: 12px;
  background: #fff; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--colors-text);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.bj-opt:hover { border-color: var(--colors-gold-transparent); transform: translateY(-1px); }
.bj-opt.selected { border-color: var(--colors-gold); background: rgba(220,175,39,.08); }
.bj-opt-emoji { font-size: 22px; line-height: 1; }
.bj-fields { display: flex; flex-direction: column; gap: 14px; margin: 10px 0 22px; }
.bj-fields input {
  padding: 14px 16px; border: 1px solid var(--colors-border); border-radius: 10px;
  font-size: 15px; font-family: inherit; color: var(--colors-text);
}
.bj-fields input:focus { outline: none; border-color: var(--colors-gold); box-shadow: 0 0 0 3px rgba(220,175,39,.12); }
.sd-back { background: none; border: none; color: var(--colors-text-secondary); font-size: 14px; cursor: pointer; margin-top: 14px; padding: 6px 0; }
.sd-back:hover { color: var(--colors-gold); }
.bj-result-card { border: 1px solid var(--colors-border); border-radius: 14px; padding: 22px; margin-bottom: 14px; background: #fff; }
.bj-result-card h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; }
.bj-result-card p { margin: 0 0 14px; font-size: 15px; color: var(--colors-text-secondary); line-height: 1.5; }
.bj-result-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { .bj-options.bj-2col { grid-template-columns: 1fr; } }

/* ===== Simulateur de frais d'achat ===== */
.simu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.simu-inputs, .simu-results { background: #fff; border: 1px solid var(--colors-border); border-radius: 16px; padding: 28px; }
.simu-inputs { display: flex; flex-direction: column; gap: 22px; }
.simu-field { display: flex; flex-direction: column; gap: 8px; }
.simu-field > label { font-size: 13px; font-weight: 600; color: var(--colors-text-secondary); }
.simu-prix-wrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--colors-border); border-radius: 10px; padding: 0 14px; }
.simu-prix-wrap input { border: none; outline: none; padding: 14px 0; font-size: 18px; font-weight: 600; width: 100%; background: transparent; color: var(--colors-text); }
.simu-prix-wrap span { font-size: 18px; color: var(--colors-text-secondary); }
.simu-toggle { display: flex; gap: 8px; }
.simu-toggle-btn { flex: 1; padding: 12px; border: 1px solid var(--colors-border); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--colors-text); transition: background-color .2s, border-color .2s, color .2s; }
.simu-toggle-btn.active { background: var(--colors-gold); border-color: var(--colors-gold); color: #fff; }
.simu-line { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--colors-border); font-size: 15px; }
.simu-line span { color: var(--colors-text-secondary); }
.simu-line strong { color: var(--colors-text); font-weight: 600; }
.simu-line-total { border-bottom: 2px solid var(--colors-text); }
.simu-line-total span, .simu-line-total strong { font-size: 16px; color: var(--colors-text); }
.simu-line-total em { font-style: normal; color: var(--colors-gold); font-weight: 600; margin-left: 4px; }
.simu-line-budget { border-bottom: none; }
.simu-line-budget strong { font-size: 22px; color: var(--colors-gold); }
.simu-note { margin-top: 14px; font-size: 13px; color: var(--colors-text-secondary); line-height: 1.5; }
.simu-note a { color: var(--colors-gold); text-decoration: none; font-weight: 600; }
@media (max-width: 768px) { .simu-grid { grid-template-columns: 1fr; } }

/* ===== PEB (performance énergétique) — fiche bien ===== */
.peb-scale { display: flex; gap: 6px; flex-wrap: wrap; }
.peb-grade {
  width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: #fff; font-size: 15px; opacity: .45;
  transition: opacity .2s ease, transform .2s ease;
}
.peb-grade.active { opacity: 1; transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,0,0,.18); outline: 2px solid var(--colors-text); outline-offset: 2px; }
.peb-a { background: #1a9850; } .peb-b { background: #66bd63; } .peb-c { background: #a6d96a; color:#2D2A26; }
.peb-d { background: #fdae61; color:#2D2A26; } .peb-e { background: #f46d43; } .peb-f { background: #d73027; } .peb-g { background: #a50026; }
.peb-note { margin-top: 14px; font-size: 14px; color: var(--colors-text-secondary); }

/* ===== Emplacement vidéo (réutilisable) ===== */
.video-frame {
  position: relative; aspect-ratio: 16/9; width: 100%; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #2D2A26, #4a4540);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid var(--colors-border);
}
.video-frame.video-has-bg::before { content:""; position:absolute; inset:0; background: rgba(0,0,0,.45); }
.video-play {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: var(--colors-gold); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 24px rgba(220,175,39,.4);
}
.video-play svg { width: 26px; height: 26px; color: #fff; margin-left: 3px; }
.video-label { position: relative; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; }

/* ===== Bannière Secundo Atlas (home) =====
   Reprend l'identite de secundo-atlas.com : teal "carlo blue", pierre chaude
   et fond encre. Les tokens sont locaux a la banniere pour ne pas contaminer
   la charte Secundo Espagne (or/ardoise). */
.atlas-banner {
  --atlas-teal: #5fe0d3;
  --atlas-stone: #d8cbbc;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  max-width: 1200px; margin: 0 auto; padding: 44px 48px; border-radius: 22px;
  background: radial-gradient(125% 150% at 85% 6%, #3fc6ba 0%, #1a908d 46%, #0f5f60 100%);
  color: #fff; position: relative; overflow: hidden;
}
/* Halo en pointilles, echo du globe du logo Atlas */
.atlas-banner::after {
  content: ""; position: absolute; top: -70px; right: -60px; width: 300px; height: 300px;
  border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(var(--atlas-teal) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 72%);
  opacity: .3;
}
.atlas-banner-main { position: relative; z-index: 1; flex: 1 1 460px; }
.atlas-banner-side {
  position: relative; z-index: 1; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.atlas-banner-logo { display: block; width: auto; height: 62px; margin-bottom: 14px; }
.atlas-banner-eyebrow {
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--atlas-teal); font-weight: 600; margin: 0;
}
.atlas-banner h2 { font-size: 32px; font-weight: 500; line-height: 1.2; margin: 10px 0 8px; color: #fff; }
.atlas-script {
  font-family: var(--font-secondary); font-size: 1.3em; font-weight: 600;
  color: var(--atlas-teal); -webkit-text-fill-color: var(--atlas-teal);
}
.atlas-banner-lead { font-size: 15px; line-height: 1.6; color: var(--atlas-stone); max-width: 520px; margin: 0; }

/* Destinations : pastilles discretes, separees par un point teal */
.atlas-dest { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0; }
.atlas-dest li {
  font-size: 13px; color: rgba(255,255,255,.85); padding: 5px 13px; border-radius: 999px;
  border: 1px solid rgba(216,203,188,.28); background: rgba(255,255,255,.04);
}

.atlas-stat { border-left: 2px solid var(--atlas-teal); padding-left: 16px; }
.atlas-stat-num { display: block; font-size: 40px; font-weight: 600; line-height: 1; color: #fff; }
.atlas-stat-lbl { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--atlas-stone); }

.atlas-cta {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  padding: 14px 26px; border-radius: 999px; background: var(--atlas-teal);
  color: #0c4746; font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .25s var(--ease-out-expo), transform .25s var(--ease-out-expo);
}
.atlas-cta:hover { background: #7fe9dd; transform: translateY(-2px); }
.atlas-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 900px) {
  .atlas-banner { gap: 28px; }
  .atlas-banner-side { flex-direction: row; align-items: center; gap: 28px; flex-wrap: wrap; }
}
@media (max-width: 700px) {
  .atlas-banner { padding: 32px 26px; }
  .atlas-banner h2 { font-size: 25px; }
  .atlas-banner-logo { height: 52px; }
  .atlas-stat-num { font-size: 34px; }
  /* stat + CTA en colonne : en ligne, le CTA "nowrap" debordait et etait
     coupe par l'overflow:hidden de la banniere. */
  .atlas-banner-side { flex-direction: column; align-items: flex-start; gap: 18px; width: 100%; }
  .atlas-cta { white-space: normal; }
}

/* ===== Contact : déroulant d'orientation + CTA visio ===== */
.ff-select { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ff-select-label { font-size: 13px; font-weight: 600; color: var(--colors-text-secondary); }
.ff-select-input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--colors-border);
  border-radius: 10px; background: #fff; font-size: 15px; color: var(--colors-text);
  font-family: inherit; cursor: pointer;
}
.ff-select-input:focus { outline: none; border-color: var(--colors-gold); box-shadow: 0 0 0 3px rgba(220,175,39,.12); }
.contact-visio-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 20px; margin-bottom: 22px;
  background: linear-gradient(135deg, #fbf4e3, var(--colors-surface));
  border: 1px solid var(--colors-border); border-radius: 14px;
}
.contact-visio-cta strong { display: block; font-size: 15px; color: var(--colors-text); }
.contact-visio-cta span { display: block; font-size: 13px; color: var(--colors-text-secondary); margin-top: 2px; }

/* ===== Cibles d'ancre (offset sous la navbar fixe) ===== */
.anchor-target { scroll-margin-top: 96px; }

/* ===== Sélections dynamiques (homepage) ===== */
.selections-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 36px; }
.selections-tab {
  border: 1px solid var(--colors-border); background: #fff; color: var(--colors-text);
  padding: 10px 20px; border-radius: 40px; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.selections-tab:hover { border-color: var(--colors-gold-transparent); }
.selections-tab.active { background: var(--colors-gold); border-color: var(--colors-gold); color: #fff; }

/* ===== Bulles de réassurance (composant réutilisable) ===== */
.reassurance-section { padding: 0; }
.reassurance-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.reassurance-bubble {
  display: flex; align-items: flex-start; gap: 15px;
  padding: 22px 22px; background: var(--colors-white, #fff);
  border: 1px solid var(--colors-border); border-radius: 16px;
  box-shadow: 0 14px 32px -24px rgba(45, 42, 38, .30);
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo), border-color .3s ease;
}
.reassurance-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 46px -26px rgba(45, 42, 38, .36);
  border-color: color-mix(in srgb, var(--colors-gold) 42%, var(--colors-border));
}
.reassurance-bubble-icon {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: var(--colors-pale-gold, rgba(220,175,39,.14)); color: var(--colors-gold);
}
.reassurance-bubble-icon svg { width: 23px; height: 23px; }
.reassurance-bubble strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--colors-dark); }
.reassurance-bubble div span { display: block; font-size: 13px; color: var(--colors-text-secondary); margin-top: 4px; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .reassurance-bubble { transition: none; } .reassurance-bubble:hover { transform: none; } }
@media (max-width: 991px) { .reassurance-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .reassurance-strip { grid-template-columns: 1fr; } }

/* ===== Bandeau filtre actif (biens.html via URL) ===== */
.url-filter-notice {
  font-size: 14px; color: var(--colors-text-secondary);
  background: var(--colors-surface); border: 1px solid var(--colors-border);
  border-radius: 40px; padding: 6px 14px;
}
.url-filter-notice strong { color: var(--colors-text); font-weight: 600; }
.url-filter-clear { color: var(--colors-gold); text-decoration: none; font-weight: 600; margin-left: 8px; white-space: nowrap; }
.url-filter-clear:hover { text-decoration: underline; }

/* ===== CTA par étape (processus d'achat) ===== */
.process-step-cta {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 12px; font-size: 13px; font-weight: 600;
  color: var(--colors-gold); text-decoration: none;
  transition: gap .2s ease;
}
.process-step-cta:hover { gap: 9px; }

/* ===== Bandeau CTA bas de page (toutes pages) ===== */
.cta-band-bottom {
  background: linear-gradient(135deg, #fbf4e3, var(--colors-surface));
  border-top: 1px solid var(--colors-border);
  padding: 76px 0;
}
.cta-band-bottom-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px; max-width: 720px; margin: 0 auto;
}
.cta-band-bottom .h2-heading { margin: 0; }
.cta-band-bottom .paragpaph { margin: 0; max-width: 520px; }
.cta-band-bottom-btns { margin-top: 18px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 520px) {
  .cta-band-bottom { padding: 56px 0; }
  .cta-band-bottom-btns { width: 100%; }
  .cta-band-bottom-btns .buton-primary,
  .cta-band-bottom-btns .buton-secondary { width: 100%; justify-content: center; }
}

/* ===== Offre par profil (homepage, haut de page) ===== */
.profil-section { padding-top: 72px; padding-bottom: 8px; }
.profil-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px;
}
/* La photo EST la carte. Voiler l'image sous un calque clair pour y poser du
   texte sombre degradait les deux : image delavee, texte sans contraste.
   Le texte descend donc dans une zone sombre dediee en bas de carte, ou le
   blanc tient >12:1 quelle que soit la photo ; le haut reste l'image nette. */
.profil-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  justify-content: flex-end;
  padding: 24px; min-height: 300px;
  background: var(--colors-dark); border: none;
  border-radius: 16px; text-decoration: none;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s ease;
}
.profil-card-bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  transition: transform .6s var(--ease-out-expo);
}
.profil-card-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(26,23,20,.34) 0%,
    rgba(26,23,20,.20) 30%,
    rgba(26,23,20,.72) 68%,
    rgba(26,23,20,.90) 100%);
  transition: opacity .3s ease;
}
.profil-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(26,23,20,.22);
}
.profil-card:hover .profil-card-bg { transform: scale(1.05); }
/* Le survol assombrit : le contraste du texte ne peut que s'ameliorer. */
.profil-card:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 3px; }
.profil-card-icon {
  position: absolute; top: 22px; left: 24px;
  width: auto; height: auto; border-radius: 0; background: none;
  color: var(--colors-gold);
  filter: drop-shadow(0 1px 3px rgba(26,23,20,.55));
}
.profil-card-icon svg { width: 26px; height: 26px; }
.profil-card-title {
  font-size: 19px; font-weight: 600; color: #FFF;
  text-shadow: 0 1px 2px rgba(26,23,20,.4);
}
.profil-card-desc {
  font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.45;
  text-shadow: 0 1px 2px rgba(26,23,20,.4);
}
.profil-card-arrow {
  margin-top: 6px; font-size: 13px; font-weight: 600;
  color: var(--colors-pale-gold);
  transition: transform .3s var(--ease-out-expo);
}
.profil-card:hover .profil-card-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .profil-card, .profil-card-bg, .profil-card-arrow { transition: none; }
  .profil-card:hover .profil-card-bg,
  .profil-card:hover .profil-card-arrow { transform: none; }
}
@media (max-width: 991px) { .profil-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
  .profil-grid { grid-template-columns: 1fr; }
  .profil-card { min-height: 240px; }
}

/* ===== Méga-menu déroulant — refonte nav (25/06) ===== */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link.has-dropdown { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nav-chevron { width: 11px; height: 11px; opacity: .6; transition: transform .25s ease; flex-shrink: 0; }
.nav-item:hover .nav-chevron,
.nav-item:focus-within .nav-chevron { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute; top: 100%; left: 0;
  padding-top: 16px;                 /* pont de survol (évite la coupure curseur) */
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 200; pointer-events: none;
}
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
/* les 2 piliers de droite s'ouvrent vers la gauche pour ne pas déborder */
.nav-item:nth-last-child(2) > .nav-dropdown,
.nav-item:nth-last-child(3) > .nav-dropdown { left: auto; right: 0; }

.nav-dropdown-inner {
  background: #fff; border: 1px solid var(--colors-border);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(45,42,38,.16);
  padding: 26px 30px; min-width: 500px;
}
.nav-dropdown-inner.nav-dd-2 { min-width: 380px; grid-template-columns: 1fr 1fr; }
.mega-menu-link.is-tool { font-weight: 500; color: var(--colors-gold); }
.mega-menu-link .nav-ext { opacity: .5; font-size: 11px; vertical-align: super; }

/* Sélecteur de langue : nav-item déroulant compact (même design que la nav) */
.nav-dropdown-inner.nav-dd-lang { min-width: 200px; }
.lang-switch-item .lang-flag { width: 15px; height: 15px; opacity: .7; flex-shrink: 0; }
.lang-switch-item .lang-current { font-weight: 600; letter-spacing: .02em; }
.nav-dd-lang .mega-menu-link { display: flex; align-items: baseline; gap: 8px; }
.nav-dd-lang .lang-opt-code { font-size: 11px; font-weight: 700; opacity: .55; min-width: 34px; letter-spacing: .03em; }
.nav-dd-lang .mega-menu-link[aria-current="true"],
.nav-dd-lang .mega-menu-link[aria-current="true"] .lang-opt-code { color: var(--colors-gold); font-weight: 600; opacity: 1; }

/* ===== Carte d'embarquement — page Séjour découverte ===== */
.boarding-pass {
  max-width: 760px; margin: 44px auto 0;
  background: var(--colors-white, #fff);
  border: 1px solid var(--colors-border);
  border-radius: 22px;
  box-shadow: 0 28px 64px -28px rgba(45, 42, 38, .30);
  overflow: hidden;
}
.bp-ticket-eyebrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 15px 30px; border-bottom: 1px solid var(--colors-border);
  background: var(--colors-surface);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--colors-text-secondary);
}
.bp-ticket-eyebrow span:first-child { color: var(--colors-dark); font-weight: 600; }
.bp-route {
  display: grid; grid-template-columns: auto minmax(80px, 1fr) auto; align-items: center; gap: 18px;
  padding: 26px 30px 22px;
}
.bp-endpoint { display: flex; flex-direction: column; gap: 4px; }
.bp-endpoint-to { text-align: right; }
.bp-code { font-family: var(--font-primary); font-weight: 700; font-size: clamp(30px, 7vw, 46px); line-height: .95; letter-spacing: -.03em; color: var(--colors-dark); }
.bp-place { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--colors-text-secondary); }
.bp-path { position: relative; height: 54px; }
.bp-path-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bp-arc { stroke: color-mix(in srgb, var(--colors-gold) 65%, var(--colors-border)); stroke-dasharray: 1; stroke-dashoffset: 1; }
.bp-plane { position: absolute; top: 50%; left: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; color: var(--colors-gold); opacity: 0; }
.bp-plane svg { width: 100%; height: 100%; display: block; }
.boarding-pass.is-drawn .bp-arc { animation: bp-draw 1.5s var(--ease-out-quint, cubic-bezier(.22,1,.36,1)) .15s forwards; }
.boarding-pass.is-drawn .bp-plane { animation: bp-fly 1.6s cubic-bezier(.45,0,.15,1) .15s forwards; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-fly {
  0%   { left: 3%;  transform: translateY(9px) rotate(-2deg) scale(.9);  opacity: 0; }
  16%  { opacity: 1; }
  50%  { transform: translateY(-13px) rotate(-8deg) scale(1); }
  86%  { opacity: 1; }
  100% { left: 95%; transform: translateY(9px) rotate(-2deg) scale(.92); opacity: 1; }
}
.bp-tear { position: relative; height: 0; margin: 0 22px; border-top: 2px dashed var(--colors-border); }
.bp-segments { list-style: none; margin: 0; padding: 6px 14px 14px; }
.bp-segment { border-top: 1px solid var(--colors-border); }
.bp-segment:first-child { border-top: 0; }
.bp-seg-head {
  width: 100%; display: flex; align-items: center; gap: 16px; padding: 18px 16px;
  background: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border-radius: 12px; transition: background .2s ease;
}
.bp-seg-head:hover { background: var(--colors-surface); }
.bp-seg-head:focus-visible { outline: 2px solid var(--colors-gold); outline-offset: 2px; }
.bp-seg-day {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; white-space: nowrap;
  color: var(--colors-dark); background: var(--colors-pale-gold, color-mix(in srgb, var(--colors-gold) 16%, transparent));
  padding: 7px 11px; border-radius: 8px;
}
.bp-seg-title { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--colors-dark); }
.bp-seg-chevron { width: 16px; height: 16px; color: var(--colors-text-secondary); transition: transform .35s var(--ease-out-expo); flex-shrink: 0; }
.bp-segment.is-open .bp-seg-chevron { transform: rotate(180deg); }
.bp-seg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease-out-expo); }
.bp-segment.is-open .bp-seg-body { grid-template-rows: 1fr; }
.bp-seg-body > div { overflow: hidden; }
.bp-seg-body p { margin: 0 16px 18px; padding-left: 68px; color: var(--colors-text-secondary); line-height: 1.65; max-width: 62ch; }
@media (max-width: 600px) {
  .bp-route { padding: 22px 20px 18px; gap: 12px; }
  .bp-seg-head { padding: 16px 10px; gap: 12px; }
  .bp-seg-body p { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .boarding-pass .bp-arc { stroke-dashoffset: 0; animation: none; }
  .boarding-pass .bp-plane { opacity: 1; left: auto; right: 4%; transform: none; animation: none; }
  .bp-seg-body, .bp-seg-chevron { transition: none; }
}

/* ===== Passeport — bandeau de preuves, page Séjour découverte ===== */
.passport { max-width: 980px; margin: 0 auto; }
.passport-page {
  position: relative;
  background: var(--colors-surface);
  border: 1px solid var(--colors-border);
  border-radius: 20px;
  padding: 28px 26px;
  overflow: hidden;
}
.passport-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--colors-gold) 24%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(#000, transparent 72%);
  mask-image: linear-gradient(#000, transparent 72%);
}
.passport-head {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-bottom: 20px;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--colors-text-secondary);
}
.passport-head span:first-child { color: var(--colors-dark); font-weight: 600; }
.passport-stamps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pp-stamp {
  background: var(--colors-white, #fff);
  border: 1.5px solid color-mix(in srgb, var(--colors-gold) 55%, var(--colors-border));
  border-radius: 14px; padding: 18px 16px;
  box-shadow: 0 12px 28px -18px rgba(45, 42, 38, .30);
  transform: rotate(var(--rot, 0deg));
}
.pp-stamp.is-featured { background: var(--colors-pale-gold, color-mix(in srgb, var(--colors-gold) 14%, #fff)); border-color: var(--colors-gold); }
.pp-stamp-icon { display: inline-flex; width: 30px; height: 30px; color: var(--colors-gold); margin-bottom: 10px; }
.pp-stamp-icon svg { width: 100%; height: 100%; }
.pp-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--colors-dark); line-height: 1.25; }
.pp-num { font-variant-numeric: tabular-nums; }
.pp-sub { margin-top: 6px; font-size: 12.5px; color: var(--colors-text-secondary); line-height: 1.45; }
/* tampon à l'apparition */
.passport:not(.is-stamped) .pp-stamp { opacity: 0; transform: rotate(0deg) scale(1.12); }
.passport.is-stamped .pp-stamp {
  opacity: 1; transform: rotate(var(--rot, 0deg)) scale(1);
  transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.35, .5, 1);
}
.passport.is-stamped .pp-stamp:nth-child(2) { transition-delay: .09s; }
.passport.is-stamped .pp-stamp:nth-child(3) { transition-delay: .18s; }
.passport.is-stamped .pp-stamp:nth-child(4) { transition-delay: .27s; }
@media (max-width: 900px) { .passport-stamps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .passport-stamps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .passport:not(.is-stamped) .pp-stamp,
  .passport.is-stamped .pp-stamp { opacity: 1; transform: rotate(var(--rot, 0deg)); transition: none; }
}

/* Chapô d'article : la 1re phrase d'intro (avant, balisée en gros titre) */
.article-content .article-lede {
  font-size: clamp(1.15rem, 2.2vw, 1.35rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--colors-dark);
  margin: 0 0 28px;
}

@media screen and (max-width: 991px) {
  .nav-item { display: block; width: 100%; }
  .nav-item .nav-link.has-dropdown { justify-content: space-between; width: 100%; }
  .nav-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none;
    padding-top: 0; pointer-events: auto; z-index: auto;
  }
  .nav-item:nth-last-child(2) > .nav-dropdown,
  .nav-item:nth-last-child(3) > .nav-dropdown { right: auto; }
  .nav-dropdown-inner,
  .nav-dropdown-inner.nav-dd-2 {
    background: transparent; border: none; border-radius: 0; box-shadow: none;
    padding: 2px 0 10px 14px; min-width: 0; grid-template-columns: 1fr; gap: 4px;
  }
  .nav-dropdown-inner .mega-menu-title { margin-top: 12px; margin-bottom: 0; }
  .nav-dropdown-inner .mega-menu-link { font-size: 15px; padding: 8px 0; border-bottom: none; }
  /* Accordeon (cf. lang-switch.js) : rubriques fermees par defaut, une seule ouverte. */
  .nav-item > .nav-dropdown { display: none; }
  .nav-item.is-open > .nav-dropdown { display: block; }
  .nav-item .nav-chevron { transition: transform .2s ease; }
  .nav-item:hover .nav-chevron, .nav-item:focus-within .nav-chevron { transform: none; }
  .nav-item.is-open .nav-chevron { transform: rotate(180deg); }
  .nav-item .nav-link.has-dropdown { justify-content: flex-start; gap: 10px; }
  .nav-item .nav-link.has-dropdown .nav-chevron { margin-left: auto; }
  .nav-dropdown-inner .mega-menu-title.is-spacer { display: none; }
  /* Fond plein : la page ne transparait plus sous les liens. */
  .nav-menu { background: var(--colors-bg, #FEFCF9); backdrop-filter: none; -webkit-backdrop-filter: none; }
}


/* ===================================================================
   Side contact panel ("On vous répond") — cf. contact-panel.js
   Onglet fixe bord droit + panneau glissant. Remplace la bulle WhatsApp.
   =================================================================== */
.scp-tab {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 1000;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 16px;
  border: 1px solid var(--colors-border);
  border-right: none;
  border-radius: 14px 0 0 14px;
  background: var(--colors-white);
  box-shadow: 0 6px 24px rgba(26, 23, 20, 0.14);
  font-family: var(--font-primary);
  cursor: pointer;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.3s ease;
}
.scp-tab:hover { transform: translateY(-50%) translateX(-3px); box-shadow: 0 10px 30px rgba(26, 23, 20, 0.2); }
.scp-open .scp-tab { transform: translateY(-50%) translateX(120%); }

.scp-tab-avatars { display: flex; flex-direction: column; align-items: center; }
.scp-tab-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--colors-white);
}
.scp-tab-avatar + .scp-tab-avatar { margin-top: -9px; }

.scp-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--colors-text);
  white-space: nowrap;
}
.scp-tab-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: scpPulse 2.4s ease-out infinite;
}
@keyframes scpPulse {
  70%  { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.scp-overlay {
  position: fixed;
  inset: 0;
  z-index: 1001;
  background: rgba(26, 23, 20, 0.42);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.scp-open .scp-overlay { opacity: 1; }

.scp-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1002;
  width: min(384px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px 28px;
  overflow-y: auto;
  background: var(--colors-bg);
  border-left: 1px solid var(--colors-border);
  box-shadow: -18px 0 48px rgba(26, 23, 20, 0.18);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease-out-expo);
}
.scp-open .scp-panel { transform: translateX(0); }

.scp-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--colors-border);
  border-radius: 50%;
  background: var(--colors-white);
  color: var(--colors-text-secondary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.scp-close:hover { background: var(--colors-surface); color: var(--colors-text); }

.scp-head { padding-top: 8px; }
.scp-avatars { display: flex; margin-bottom: 16px; }
.scp-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--colors-bg);
}
.scp-avatar + .scp-avatar { margin-left: -14px; }

.scp-title {
  margin: 0 0 8px;
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--colors-text);
}
.scp-sub {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--colors-text-secondary);
}

.scp-channels { display: flex; flex-direction: column; gap: 10px; }
.scp-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--colors-border);
  border-radius: 12px;
  background: var(--colors-white);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s var(--ease-out-expo), box-shadow 0.2s ease;
}
.scp-channel:hover {
  border-color: var(--colors-gold);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 23, 20, 0.08);
}
.scp-channel-icon {
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--colors-warm-white);
  color: var(--colors-gold);
}
.scp-channel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.scp-channel-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--colors-text-secondary);
}
.scp-channel-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--colors-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scp-channel-arrow { margin-left: auto; flex: none; color: var(--colors-text-secondary); }

.scp-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--colors-border);
  font-size: 12.5px;
  color: var(--colors-text-secondary);
}
.scp-foot-dot { width: 7px; height: 7px; border-radius: 50%; background: #25D366; flex: none; }

@media screen and (max-width: 767px) {
  /* Pile flottante bas-droite : onglet "On vous repond" AU-DESSUS du bouton
     WhatsApp, qui lui-meme degage la barre CTA. Evite le chevauchement.
     env() ajoute la marge d'encoche quand viewport-fit=cover (sinon = 0). */
  .scp-tab { top: auto; bottom: calc(148px + env(safe-area-inset-bottom)); transform: none; padding: 10px 12px; border-radius: 14px 0 0 14px; }
  .scp-tab:hover { transform: translateX(-3px); }
  .scp-open .scp-tab { transform: translateX(120%); }
  .scp-tab-label { writing-mode: horizontal-tb; transform: none; display: none; }
  .scp-panel { width: 100vw; padding: 28px 20px; }
  .wa-contact-fab, #waContactFab { bottom: calc(24px + env(safe-area-inset-bottom)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .scp-tab, .scp-panel, .scp-overlay, .scp-channel { transition: none; }
  .scp-tab-dot { animation: none; }
}

/* ===================================================================
   Biens similaires (bas de fiche) — cf. biens-similaires.js
   =================================================================== */
.similar-section {
  padding: 0 80px 90px;
  background: var(--colors-bg);
}
.similar-inner {
  max-width: 1439px;
  margin: 0 auto;
  padding-top: 56px;
  border-top: 1px solid var(--colors-border);
}
.similar-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.similar-title { margin: 0; text-align: left; }
.similar-sub { margin: 10px 0 0; max-width: 520px; text-align: left; }
.similar-all { flex: none; }
#similarGrid { margin-top: 36px; }
#similarGrid:empty { display: none; }

@media screen and (max-width: 991px) {
  .similar-section { padding: 0 5% 70px; }
  #similarGrid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 767px) {
  .similar-header { align-items: flex-start; }
  .similar-all { width: 100%; }
  #similarGrid { grid-template-columns: 1fr; }
}

/* ===================================================================
   Consentement cookies — CookieConsent v3 (vendor/cookieconsent.css)
   On ne surcharge que les variables du plugin : la mise a jour de la lib
   ne casse donc pas le branding.
   =================================================================== */
#cc-main {
  --cc-font-family: var(--font-primary);
  --cc-bg: var(--colors-bg);
  --cc-primary-color: var(--colors-text);
  --cc-secondary-color: var(--colors-text-secondary);
  --cc-link-color: var(--colors-gold);

  --cc-btn-border-radius: 10px;
  --cc-btn-primary-bg: var(--colors-gold);
  --cc-btn-primary-color: var(--colors-dark);
  --cc-btn-primary-border-color: var(--colors-gold);
  --cc-btn-primary-hover-bg: var(--colors-pale-gold);
  --cc-btn-primary-hover-color: var(--colors-dark);
  --cc-btn-primary-hover-border-color: var(--colors-pale-gold);

  --cc-btn-secondary-bg: var(--colors-surface);
  --cc-btn-secondary-color: var(--colors-text);
  --cc-btn-secondary-border-color: var(--colors-border);
  --cc-btn-secondary-hover-bg: #ECE7DF;
  --cc-btn-secondary-hover-color: var(--colors-text);
  --cc-btn-secondary-hover-border-color: var(--colors-gold);

  --cc-separator-border-color: var(--colors-border);
  --cc-section-category-border: var(--colors-border);
  --cc-cookie-category-block-bg: var(--colors-surface);
  --cc-cookie-category-block-border: var(--colors-border);
  --cc-cookie-category-block-hover-bg: #ECE7DF;
  --cc-cookie-category-block-hover-border: var(--colors-gold);
  --cc-cookie-category-expanded-block-bg: transparent;

  --cc-toggle-on-bg: var(--colors-gold);
  --cc-toggle-off-bg: #C7C0B6;
  --cc-toggle-readonly-bg: var(--colors-border);
  --cc-toggle-readonly-knob-bg: #FFF;
  --cc-toggle-readonly-knob-icon-color: var(--colors-text-secondary);
  --cc-toggle-enabled-icon-color: var(--colors-dark);

  --cc-footer-bg: var(--colors-surface);
  --cc-footer-color: var(--colors-text-secondary);
  --cc-footer-border-color: var(--colors-border);

  --cc-modal-border-radius: 16px;
  --cc-modal-transition-duration: 0.35s;
  --cc-overlay-bg: rgba(26, 23, 20, 0.5);

  /* Au-dessus du panneau de contact lateral (.scp-panel = 1002) */
  --cc-z-index: 1005;
}

/* Le bandeau est en bas a gauche : il ne croise ni l'onglet "On vous repond"
   (bord droit) ni la .mobile-cta-bar (bas, pleine largeur sur mobile). */
#cc-main .cm--box { box-shadow: 0 16px 48px rgba(26, 23, 20, 0.16); }
#cc-main .cm__title,
#cc-main .pm__title { font-weight: 500; }
#cc-main .pm__badge { background: var(--colors-warm-white); color: var(--colors-gold); }

@media screen and (max-width: 767px) {
  /* remonte au-dessus de la barre CTA mobile */
  #cc-main .cm-wrapper { margin-bottom: 60px; }
}

/* ===================================================================
   Bloc Financement — bande sous chaque fiche bien + section home
   =================================================================== */
.fin-band-section { padding-top: 10px; padding-bottom: 10px; }
.fin-band {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 30px; border-radius: 18px;
  background: linear-gradient(120deg, var(--colors-surface), #fbf4e3);
  border: 1px solid var(--colors-border);
  text-decoration: none; color: var(--colors-text);
  transition: box-shadow .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.fin-band:hover { box-shadow: 0 18px 44px -24px rgba(45,42,38,.42); transform: translateY(-2px); }
.fin-band-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--colors-gold); color: var(--colors-dark); }
.fin-band-text { flex: 1; min-width: 0; }
.fin-band-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--colors-gold-accent); margin-bottom: 4px; }
.fin-band-title { font-size: 20px; font-weight: 500; margin: 0 0 6px; line-height: 1.25; }
.fin-band-desc { font-size: 14.5px; line-height: 1.6; opacity: .82; margin: 0; max-width: 640px; }
.fin-band-cta { flex: none; }
.fin-band-cta .buton-primary { pointer-events: none; }
@media (max-width: 820px) {
  .fin-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .fin-band-cta { width: 100%; }
  .fin-band-cta .buton-primary { width: 100%; justify-content: center; }
}

/* Section home */
.fin-home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; }
.fin-home-item { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; background: var(--colors-surface); border: 1px solid var(--colors-border); border-radius: 14px; }
.fin-home-item svg { flex: none; width: 22px; height: 22px; color: var(--colors-gold-accent); margin-top: 2px; }
.fin-home-item strong { display: block; font-weight: 500; margin-bottom: 2px; }
.fin-home-item span { font-size: 14px; line-height: 1.55; opacity: .78; }
@media (max-width: 820px) { .fin-home-grid { grid-template-columns: 1fr; gap: 14px; } }

/* Section financement home : 2 colonnes image + contenu */
.fin-home-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; margin-top: 8px; }
.fin-home-media { position: relative; }
.fin-home-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(45,42,38,.4); display: block; }
.fin-home-content .pill-wrap { margin-bottom: 14px; }
.fin-home-content .h2-heading { text-align: left; }
.fin-home-content .paragpaph { margin: 12px 0 0; }
.fin-home-list { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 28px; }
@media (max-width: 860px) {
  .fin-home-split { grid-template-columns: 1fr; gap: 24px; }
  .fin-home-media { order: -1; }
  .fin-home-media img { aspect-ratio: 16 / 10; }
  .fin-home-content .h2-heading { text-align: center; }
  .fin-home-content .pill-wrap { justify-content: center; }
  .fin-home-content .paragpaph { text-align: center; }
}

/* Points forts (atouts) sur la fiche bien */
.detail-atouts { margin: 4px 0 8px; padding: 22px 24px; background: linear-gradient(120deg, var(--colors-surface), #fbf4e3); border: 1px solid var(--colors-border); border-radius: 16px; }
.detail-atouts h3 { font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--colors-gold-accent); margin: 0 0 14px; }
.atouts-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.atouts-item { display: flex; gap: 12px; align-items: flex-start; }
.atouts-item svg { flex: none; width: 20px; height: 20px; color: var(--colors-gold); margin-top: 2px; }
.atouts-item strong { display: block; font-weight: 600; font-size: 16px; }
.atouts-item span { display: block; font-size: 14.5px; line-height: 1.55; opacity: .78; margin-top: 2px; }

/* ===================================================================
   Reels vidéo (portrait 9:16) — clips Secundo placés dans les pages
   =================================================================== */
.reel { position: relative; width: 100%; max-width: 300px; margin: 0; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(45,42,38,.45); }
.reel-video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.video-spot { display: grid; grid-template-columns: 1fr minmax(240px, 300px); gap: 44px; align-items: center; max-width: 1000px; margin: 0 auto; }
.video-spot.reel-left { grid-template-columns: minmax(240px, 300px) 1fr; }
.video-spot .reel { justify-self: end; }
.video-spot.reel-left .reel { justify-self: start; }
/* Les sections video-spot n'utilisent pas .container : elles echappaient au rythme
   vertical et se collaient a la section voisine. On leur donne la demi-marge standard
   (deux voisines = un --section-gap complet), pour un espacement uniforme. */
.section:has(> .video-spot) { padding-block: var(--section-gap-half); }
/* inline-flex : le pill epouse son contenu (sinon, dans le bloc video-spot-body,
   un pill display:flex s'etire sur toute la largeur -> "cellule geante"). */
.video-spot-body .pill-wrap { display: inline-flex; margin-bottom: 14px; }
.video-spot-body .h2-heading { text-align: left; }
.video-spot-body .paragpaph { margin-top: 12px; }
@media (max-width: 820px) {
  .video-spot, .video-spot.reel-left { grid-template-columns: 1fr; gap: 22px; }
  .video-spot .reel, .video-spot.reel-left .reel { justify-self: center; order: -1; }
  .video-spot-body { text-align: center; }
  .video-spot-body .h2-heading, .video-spot-body .paragpaph { text-align: center; }
}
/* Galerie "En video" : plusieurs reels en paire symetrique sous un en-tete commun
   (remplace l'empilement de video-spot alternes, qui rendait un affichage decale). */
.video-gallery { max-width: 900px; margin: 0 auto; }
.video-gallery-head { text-align: center; margin-bottom: 44px; }
.video-gallery-head .pill-wrap { display: inline-flex; margin-bottom: 14px; }
.video-gallery-head .h2-heading { text-align: center; }
.video-gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 48px; justify-content: center; align-items: start; }
.video-card { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; }
.video-card .reel { width: 100%; }
.video-card-body { text-align: center; }
.video-card-title { font-size: 24px; font-weight: 600; line-height: 1.15; margin: 0 0 8px; }
.video-card-body .paragpaph { margin: 0; }

/* ===== Financement : exemple concret de simulation ===== */
.usecase { max-width: 920px; margin: 0 auto; }
.usecase-head { text-align: center; }
.usecase-disclaimer { text-align: center; font-size: 13px; color: var(--colors-text-secondary); margin: 10px auto 40px; max-width: 660px; line-height: 1.6; }
.usecase-block { margin-bottom: 44px; }
.usecase-block:last-child { margin-bottom: 0; }
.usecase-block h3 { font-size: 22px; font-weight: 600; margin: 0 0 16px; }
.usecase-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--colors-border); border-radius: 14px; overflow: hidden; }
.usecase-table th, .usecase-table td { padding: 13px 18px; text-align: left; font-size: 15px; border-bottom: 1px solid var(--colors-border); }
.usecase-table thead th { background: var(--colors-surface); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--colors-text-secondary); }
.usecase-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usecase-table .uc-poste { font-weight: 500; }
.usecase-table tbody tr:last-child td { border-bottom: none; }
.usecase-table tr.is-key td { background: rgba(220,175,39,.06); font-weight: 700; }
.usecase-table tr.is-hi td { background: rgba(220,175,39,.14); font-weight: 700; }
.usecase-insight { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--colors-surface); border: 1px solid var(--colors-gold-transparent); font-size: 15px; line-height: 1.6; }
.usecase-insight svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--colors-gold); margin-top: 1px; }
.usecase-subnote { margin-top: 14px; font-size: 14px; line-height: 1.65; color: var(--colors-text-secondary); }
.usecase-note { margin-top: 16px; padding: 18px 20px; border-left: 3px solid var(--colors-gold); background: var(--colors-surface); border-radius: 0 12px 12px 0; font-size: 14px; line-height: 1.65; }
.usecase-cta { text-align: center; margin-top: 36px; }
@media (max-width: 640px) {
  .usecase-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .usecase-table, .usecase-table tbody, .usecase-table tr, .usecase-table td { display: block; width: 100%; }
  .usecase-table tr { border-bottom: 1px solid var(--colors-border); padding: 8px 0; }
  .usecase-table tbody tr:last-child { border-bottom: none; }
  .usecase-table td { border: none; padding: 5px 16px; display: flex; justify-content: space-between; gap: 16px; text-align: right; }
  .usecase-table td.uc-poste { justify-content: flex-start; font-weight: 600; padding-top: 10px; }
  .usecase-table td[data-label]::before { content: attr(data-label); font-weight: 500; color: var(--colors-text-secondary); text-align: left; }
}
@media (max-width: 720px) {
  .video-gallery-head { margin-bottom: 32px; }
  .video-gallery-grid { grid-template-columns: minmax(0, 300px); gap: 40px; }
}

/* Carrousel de reels Secundo sur la fiche bien */
.bd-reels-section { padding-top: 8px; }
.bd-reels-wrap { position: relative; }
.bd-reels { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.bd-reels::-webkit-scrollbar { display: none; }
.bd-reel { flex: 0 0 auto; width: 220px; scroll-snap-align: start; }
.bd-reel .reel { position: relative; cursor: pointer; max-width: none; }
.bd-reel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.18); transition: opacity .25s ease; }
.bd-reel-play svg { width: 56px; height: 56px; color: #fff; filter: drop-shadow(0 2px 10px rgba(0,0,0,.45)); }
.bd-reel.playing .bd-reel-play { opacity: 0; pointer-events: none; }
.bd-reel-cap { margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: center; opacity: .82; }
.bd-reels-nav { position: absolute; top: 42%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--colors-border); background: var(--colors-bg); color: var(--colors-text); font-size: 24px; line-height: 1; cursor: pointer; z-index: 2; box-shadow: 0 6px 18px rgba(45,42,38,.14); display: none; align-items: center; justify-content: center; }
.bd-reels-prev { left: -14px; }
.bd-reels-next { right: -14px; }
.bd-reels-nav:hover { background: var(--colors-surface); }
@media (hover: hover) and (min-width: 900px) { .bd-reels-nav { display: flex; } .bd-reels { padding-inline: 8px; } }

/* CTA catalogue coupes en NL et EN tant que les PDF ne sont pas traduits (demande Gary, 30/09).
   Pour reactiver : supprimer ce bloc. La page /catalogue reste accessible en direct. */
html[lang^="nl"] a[href="catalogue"], html[lang^="en"] a[href="catalogue"],
html[lang^="nl"] section:has(> .catalogue-cta), html[lang^="en"] section:has(> .catalogue-cta) { display: none !important; }

/* Catalogue : les cartes hors ecran ne sont ni mises en page ni peintes (253 cartes, ~6000 noeuds). */
.catalog-grid .catalog-card { content-visibility: auto; contain-intrinsic-size: auto 560px; }
/* Apparition en cascade limitee aux 12 premieres cartes : au-dela, 250 transitions simultanees a chaque filtre. */
.catalog-grid.reveal-stagger > *:nth-child(n+13) { opacity: 1; transform: none; transition: none; }
/* Fiche : bloc « La commune » (texte ERP) et lien vers la page ville */
.detail-commune { margin-top: 8px; }
.detail-commune-link { color: var(--colors-gold); font-weight: 600; text-decoration: none; }
.detail-commune-link:hover { text-decoration: underline; }