/* Hallmark · macrostructure: Marquee Hero · tone: luxury éditorial provençal · anchor hue: teal 196°
 * theme: studied-DNA (source: image, référence Apex Arc) + custom brand (#4fbcbf · #000 · #f4f4f4)
 * nav: dropdowns départements · footer: Ft5 statement + maillage local · enrichment: vidéo hero différée
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 */

/* Tokens inlinés (copie de référence portable : tokens.css à la racine du thème).
 * L'@import est évité volontairement : pas de requête CSS chaînée render-blocking. */
:root {
  /* Couleurs (marque : #4fbcbf · #000000 · #f4f4f4) */
  --color-paper: oklch(96.4% 0 0);          /* #f4f4f4 */
  --color-paper-2: oklch(100% 0 0);
  --color-ink: oklch(15% 0.01 200);
  --color-ink-strong: oklch(0% 0 0);        /* #000000 */
  --color-muted: oklch(45% 0.01 200);
  --color-accent: oklch(73.5% 0.093 196.5); /* #4fbcbf */
  --color-accent-deep: oklch(52% 0.085 196.5);
  --color-accent-soft: oklch(93% 0.03 196.5);
  --color-line: oklch(85% 0 0);
  --color-focus: oklch(52% 0.085 196.5);
  --color-error: oklch(55% 0.19 25);
  --color-success: oklch(55% 0.12 155);

  /* Typographie */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-body: 1.0625rem;
  --text-sm: 0.875rem;
  --text-lg: 1.25rem;
  --text-2xl: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --text-display-s: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --text-display: clamp(2.2rem, 1.5rem + 3.4vw, 4rem);
  --text-stat: clamp(2.6rem, 2rem + 2.6vw, 4.2rem);

  /* Espacement (échelle 4 pt) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3.25rem;
  --space-2xl: clamp(4rem, 3rem + 4vw, 7rem);

  /* Forme et mouvement */
  --radius-pill: 999px;
  --radius-card: 14px;
  --radius-media: 10px;
  --rule-hair: 1px solid var(--color-line);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;

  --measure: 62ch;
  /* Largeur et retrait latéral uniques : header, hero, sections et footer alignés. */
  --wrap: 1360px;
  --gutter: var(--space-sm);
}

/* ——— Fonts auto-hébergées ——— */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 560;
  font-display: swap;
  src: url("../fonts/fraunces-560-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 520;
  font-display: swap;
  src: url("../fonts/fraunces-italic-520-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/outfit-latin.woff2") format("woff2");
}

/* ——— Base ——— */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  color: var(--color-ink-strong);
  overflow-wrap: anywhere;
  min-width: 0;
  margin: 0 0 var(--space-md);
}
h1 { font-size: var(--text-display); letter-spacing: -0.015em; }
h2 { font-size: var(--text-display-s); letter-spacing: -0.01em; }
h3 { font-size: var(--text-lg); }
p { margin: 0 0 var(--space-md); max-width: var(--measure); }
a { color: var(--color-accent-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-ink-strong); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--color-accent-soft); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-ink-strong); color: #fff; padding: var(--space-xs) var(--space-md);
}
.skip-link:focus { left: var(--space-md); }

/* ——— Boutons (8 états couverts : default/hover/focus/active/disabled + visuels) ——— */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-body);
  padding: 0.8em 1.7em; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.btn-pill {
  background: var(--color-ink-strong); color: #fff; border-radius: var(--radius-pill);
}
.btn-pill:hover { background: var(--color-accent-deep); color: #fff; }
.btn-pill:active { transform: translateY(1px); }
.btn-pill:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-ghost {
  background: transparent; color: #fff; border-color: oklch(100% 0 0 / 0.55);
  border-radius: var(--radius-pill);
}
.btn-ghost:hover { background: oklch(100% 0 0 / 0.14); color: #fff; }
.btn-light { background: #fff; color: var(--color-ink-strong); }
.btn-light:hover { background: var(--color-accent); color: var(--color-ink-strong); }

/* ——— Header ——— */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-paper-2);
  border-bottom: var(--rule-hair);
}
/* Alignement : même largeur et même retrait latéral que .hero-frame,
   pour que le logo s'aligne sur le bord gauche du hero et le CTA sur son bord droit. */
.header-inner {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding: var(--space-xs) var(--gutter);
}
.brand { display: inline-flex; }
.brand img { width: 112px; height: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav-list {
  display: flex; align-items: center; gap: var(--space-md);
  list-style: none; margin: 0; padding: 0;
}
.nav-list > li > a, .sub-toggle {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; padding: var(--space-xs) 0;
  display: inline-flex; align-items: center; gap: var(--space-2xs);
}
.nav-list > li > a:hover, .sub-toggle:hover { color: var(--color-accent-deep); }
.nav-list > li > a[aria-current="page"] { color: var(--color-accent-deep); }
.chev { transition: transform var(--dur-fast) var(--ease-out); }
.sub-toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Menu déroulant Constructeur de villas : vertical avec sous-menu villes en cascade.
   Largeur fixe, ouvre à droite du nom du département au survol. */
.has-cascade .sub-menu.cascade-menu {
  left: 0; translate: none; transform: translateY(6px);
  min-width: 260px; padding: var(--space-xs); list-style: none;
}
.cascade-item { position: relative; }
.cascade-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm); border-radius: 8px;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-ink-strong); text-decoration: none;
}
.cascade-head:hover, .cascade-item:hover > .cascade-head,
.cascade-item:focus-within > .cascade-head {
  background: var(--color-accent-soft); color: var(--color-accent-deep);
}
.cascade-side { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-muted); }
.cascade-code {
  font: 600 0.72rem var(--font-body); color: var(--color-accent-deep);
  background: var(--color-accent-soft); padding: 0.1em 0.55em; border-radius: var(--radius-pill);
}
.cascade-head:hover .cascade-code, .cascade-item:hover > .cascade-head .cascade-code,
.cascade-item:focus-within > .cascade-head .cascade-code { background: #fff; }

.cascade-cities {
  position: absolute; top: -8px; left: calc(100% + 4px);
  min-width: 220px; padding: var(--space-xs); list-style: none; margin: 0;
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.10);
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.cascade-item:hover > .cascade-cities,
.cascade-item:focus-within > .cascade-cities {
  opacity: 1; visibility: visible; transform: translateX(0);
}
.cascade-cities a {
  display: block; padding: var(--space-2xs) var(--space-sm); border-radius: 6px;
  font-size: var(--text-sm); color: var(--color-ink); text-decoration: none;
}
.cascade-cities a:hover { background: var(--color-accent-soft); color: var(--color-accent-deep); }

.has-sub { position: relative; }
.sub-menu {
  position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0;
  min-width: 230px; padding: var(--space-xs) 0; margin: 0; list-style: none;
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card);
  box-shadow: 0 18px 40px oklch(0% 0 0 / 0.10);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility var(--dur-fast);
}
.has-sub.open .sub-menu, .has-sub:focus-within .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu a {
  display: block; padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm); color: var(--color-ink); text-decoration: none;
}
.sub-menu a:hover { background: var(--color-accent-soft); color: var(--color-ink-strong); }
.sub-head a { font-weight: 600; color: var(--color-accent-deep); border-bottom: var(--rule-hair); margin-bottom: var(--space-2xs); padding-bottom: var(--space-sm); }
.nav-cta { display: flex; align-items: center; gap: var(--space-md); }
.tel-link { font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-strong); text-decoration: none; }
.tel-link:hover { color: var(--color-accent-deep); }
.nav-cta .btn { padding: 0.55em 1.3em; font-size: var(--text-sm); }

.nav-toggle { display: none; }

/* ——— Hero (DNA Apex Arc : média inset arrondi, titre dans l'image, pill en débord) ——— */
.hero { position: relative; }
.hero-frame { max-width: var(--wrap); margin: 0 auto; padding: var(--space-sm) var(--gutter) 0; }
.hero-media {
  position: relative; overflow: hidden;
  border-radius: 18px;
  min-height: min(78vh, 700px);
  display: flex; align-items: flex-end;
}
.hero-media > img, .hero-media video {
  width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
}
.hero-media > img { animation: hero-settle 1.6s var(--ease-out) both; }
.hero-video-slot { position: absolute; inset: 0; }
.hero-video-slot video { opacity: 0; transition: opacity 600ms var(--ease-in-out); }
.hero-video-slot video.is-ready { opacity: 1; }
.hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(12deg, oklch(0% 0 0 / 0.62) 8%, oklch(0% 0 0 / 0.18) 55%, oklch(0% 0 0 / 0.05) 100%);
}
.hero-text {
  position: relative; z-index: 2;
  padding: var(--space-2xl) var(--space-xl) calc(var(--space-2xl) + var(--space-md));
  max-width: 760px;
  animation: hero-rise 900ms var(--ease-out) 150ms both;
}
.hero-text h1 { color: #fff; margin-bottom: var(--space-sm); }
.hero-sub { color: oklch(100% 0 0 / 0.85); margin: 0; }
.crumbs { font-size: var(--text-sm); color: oklch(100% 0 0 / 0.75); margin-bottom: var(--space-sm); }
.crumbs a { color: oklch(100% 0 0 / 0.75); }
.crumbs a:hover { color: #fff; }

/* Encoche CTA (DNA Apex Arc) : bloc clair découpé dans le coin bas-gauche de l'image,
   coin haut-droit arrondi + congés concaves aux deux jonctions avec l'image. */
.hero-cta-notch {
  position: absolute; left: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: var(--space-sm);
  background: var(--color-paper);
  padding: var(--space-sm) var(--space-md) 0 0;
  border-top-right-radius: 26px;
  animation: hero-rise 900ms var(--ease-out) 350ms both;
}
.hero-cta-notch::before {
  content: ""; position: absolute; top: -26px; left: 0; width: 26px; height: 26px;
  background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--color-paper) 26px);
}
.hero-cta-notch::after {
  content: ""; position: absolute; right: -26px; bottom: 0; width: 26px; height: 26px;
  background: radial-gradient(circle at 100% 0, transparent 25.5px, var(--color-paper) 26px);
}
.btn-hero { font-size: var(--text-body); padding: 0.95em 1.9em; }
.btn-hero-tel {
  color: var(--color-ink-strong); border-radius: var(--radius-pill);
  border-color: var(--color-line); background: var(--color-paper-2);
}
.btn-hero-tel:hover { background: var(--color-accent-soft); color: var(--color-ink-strong); border-color: var(--color-accent); }
.hero-trust {
  font-size: var(--text-sm); color: var(--color-muted);
  margin: var(--space-sm) 0 0; padding: 0 var(--space-2xs);
}

@keyframes hero-settle {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ——— Sections communes ——— */
section { padding: var(--space-2xl) var(--gutter); max-width: var(--wrap); margin: 0 auto; }
.hero { max-width: none; padding: 0; }
.section-head { max-width: 700px; margin-bottom: var(--space-xl); }
.section-head p { color: var(--color-muted); }
.section-head h2::after {
  content: ""; display: block; width: 64px; height: 3px; margin-top: var(--space-sm);
  background: var(--color-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 700ms var(--ease-out) 200ms;
}
.reveal.in .section-head h2::after, .section-head.reveal.in h2::after { transform: scaleX(1); }

/* En-tête de section avec flèches (carrousel modèles, DNA Apex Arc) */
.section-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-lg); margin-bottom: var(--space-xl);
}
.section-head-row .section-head { margin-bottom: 0; }
.carousel-arrows { display: flex; gap: var(--space-xs); flex-shrink: 0; }
.arrow-btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: transparent; color: var(--color-ink-strong);
  border: 1px solid var(--color-ink-strong);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.arrow-btn:hover { background: var(--color-ink-strong); color: #fff; }
.arrow-btn:active { transform: scale(0.94); }
.arrow-btn.next { background: var(--color-ink-strong); color: #fff; }
.arrow-btn.next:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); }

/* ——— Animations de révélation au scroll ——— */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ——— À propos + stats ——— */
.about {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: start;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg); margin: 0;
}
.stat { display: flex; flex-direction: column-reverse; border-top: 2px solid var(--color-ink-strong); padding-top: var(--space-sm); }
.stat dd {
  margin: 0; font-family: var(--font-display); font-weight: 560;
  font-size: var(--text-stat); line-height: 1; color: var(--color-ink-strong);
}
.stat dd span { color: var(--color-accent); }
.stat dt { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2xs); }

/* ——— Savoir-faire + TF1 (bande noire pleine largeur, contenu sur la grille) ——— */
.savoir-faire {
  max-width: none; padding: 0;
  background: var(--color-ink-strong); color: oklch(92% 0 0);
}
.sf-inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--space-2xl) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-2xl); align-items: center;
}
.sf-kicker {
  display: inline-block; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-accent); border: 1px solid oklch(73.5% 0.093 196.5 / 0.45);
  border-radius: var(--radius-pill); padding: 0.25em 0.9em;
  margin-bottom: var(--space-md);
}
.savoir-faire h2 { color: #fff; }
.savoir-faire p { color: oklch(80% 0 0); }
.sf-press { font-style: italic; font-family: var(--font-display); font-weight: 520; color: var(--color-accent); margin-bottom: 0; }
.video-facade {
  position: relative; display: block; width: 100%; border: 0; padding: 0; cursor: pointer;
  border-radius: var(--radius-media); overflow: hidden; background: var(--color-ink-strong);
}
.video-facade img { width: 100%; }
.play-badge {
  position: absolute; inset: 0; display: grid; place-items: center;
}
.play-badge svg {
  width: 64px; height: 64px; padding: 18px; box-sizing: content-box;
  background: oklch(100% 0 0 / 0.92); color: var(--color-ink-strong);
  border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.video-facade:hover .play-badge svg { transform: scale(1.06); background: var(--color-accent); }
.sf-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-media); }

/* ——— Modèles : carrousel de cards numérotées avec flèches (DNA Apex Arc) ——— */
.modeles-track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--space-lg)) / 3);
  gap: var(--space-lg);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: var(--space-xs);
  scrollbar-width: none;
}
.modeles-track::-webkit-scrollbar { display: none; }
.modele-card { scroll-snap-align: start; }
.modele-card figure { position: relative; margin: 0 0 var(--space-md); border-radius: var(--radius-media); overflow: hidden; }
.modele-card img { aspect-ratio: 16 / 10; object-fit: cover; transition: transform var(--dur-med) var(--ease-out); }
.modele-card:hover img { transform: scale(1.03); }
.card-num {
  position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2;
  font-family: var(--font-display); font-weight: 560; font-size: var(--text-sm);
  background: oklch(100% 0 0 / 0.92); color: var(--color-ink-strong);
  padding: 0.25em 0.7em; border-radius: var(--radius-pill);
}
.modele-card h3 { margin-bottom: var(--space-xs); }
.modele-card p { font-size: var(--text-sm); color: var(--color-muted); }
.card-link {
  font-weight: 600; font-size: var(--text-sm); text-decoration: none;
  color: var(--color-accent-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.card-link:hover { color: var(--color-ink-strong); }

/* ——— Réalisations : masonry + label pill (DNA Apex Arc) ——— */
.real-grid { columns: 3 280px; column-gap: var(--space-md); }
.real-item {
  position: relative; margin: 0 0 var(--space-md); break-inside: avoid;
  border-radius: var(--radius-media); overflow: hidden;
}
.real-item img { display: block; width: 100%; height: auto; }
.real-label {
  position: absolute; bottom: var(--space-sm); left: var(--space-sm);
  background: oklch(100% 0 0 / 0.92); color: var(--color-ink-strong);
  font-size: var(--text-sm); font-weight: 600;
  padding: 0.3em 0.9em; border-radius: var(--radius-pill);
  max-width: calc(100% - var(--space-md) * 2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.real-cta { text-align: center; margin: var(--space-lg) 0 0; max-width: none; }

/* ——— Différenciateurs ——— */
.diff-list {
  list-style: none; counter-reset: diff; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2xl);
}
.diff-item {
  counter-increment: diff; position: relative;
  padding: var(--space-lg) 0 var(--space-lg) 4rem; border-top: var(--rule-hair);
}
.diff-item::before {
  content: counter(diff, decimal-leading-zero);
  position: absolute; left: 0; top: var(--space-lg);
  font-family: var(--font-display); font-weight: 560; font-size: var(--text-lg);
  color: var(--color-accent);
}
.diff-item h3 { margin-bottom: var(--space-xs); font-size: var(--text-body); font-family: var(--font-body); font-weight: 600; }
.diff-item p { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* ——— Zones (maillage interne) ——— */
.zones { background: var(--color-paper-2); max-width: none; }
.zones > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.zones-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); }
.zone-col h3 { font-size: var(--text-body); }
.zone-col h3 a { color: var(--color-ink-strong); text-decoration: none; }
.zone-col h3 a:hover { color: var(--color-accent-deep); }
.zone-code {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  color: var(--color-accent-deep); background: var(--color-accent-soft);
  padding: 0.1em 0.55em; border-radius: var(--radius-pill); margin-left: var(--space-2xs);
}
.zone-col ul { list-style: none; margin: 0; padding: 0; }
.zone-col li { padding: var(--space-2xs) 0; border-bottom: var(--rule-hair); font-size: var(--text-sm); }
.zone-col a { text-decoration: none; color: var(--color-ink); }
.zone-col a:hover { color: var(--color-accent-deep); }
.zone-col [aria-current="page"] { font-weight: 600; color: var(--color-accent-deep); }

/* ——— Avis Google ——— */
.avis-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
.avis-card {
  margin: 0; padding: var(--space-lg);
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: var(--space-sm);
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.avis-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.avis-g { flex-shrink: 0; }
.avis-card blockquote { margin: 0; flex-grow: 1; }
.avis-card blockquote p { font-size: var(--text-sm); color: var(--color-ink); margin: 0; }
.avis-card figcaption { display: grid; gap: 2px; border-top: var(--rule-hair); padding-top: var(--space-sm); }
.avis-card figcaption span { font-size: 0.8rem; color: var(--color-muted); }

/* ——— Carte de zone ——— */
.map-zone {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-2xl); align-items: center;
}
.map-points { list-style: none; margin: 0 0 var(--space-lg); padding: 0; display: grid; gap: var(--space-xs); }
.map-points li { position: relative; padding-left: 1.4em; font-size: var(--text-sm); color: var(--color-muted); }
.map-points li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); }
.map-embed {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-accent-soft); min-height: 420px;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-muted); margin: 0; }

/* ——— FAQ : deux colonnes pleine largeur, alignées sur la grille des sections ——— */
.faq-list {
  columns: 2 380px; column-gap: var(--space-2xl);
  border-top: var(--rule-hair);
}
.faq-item { break-inside: avoid; border-bottom: var(--rule-hair); }
.faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  font-weight: 600; padding: var(--space-md) var(--space-xl) var(--space-md) 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: var(--space-2xs); top: 50%; translate: 0 -50%;
  font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent-deep);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--color-muted); padding-bottom: var(--space-md); margin: 0; }

/* ——— Contact ——— */
.contact {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-2xl); align-items: start;
}
.contact-people { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-md); }
.contact-people li {
  display: grid; gap: 2px; padding: var(--space-md);
  background: var(--color-paper-2); border-radius: var(--radius-card); border: var(--rule-hair);
}
.people-zone { font-size: var(--text-sm); color: var(--color-muted); }
.contact-people a { font-weight: 600; text-decoration: none; }
.people-mail { font-weight: 400 !important; font-size: var(--text-sm); }

.contact-form-wrap {
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card);
  padding: var(--space-xl);
}
.contact-form label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2xs); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; color: var(--color-ink);
  padding: 0.65em 0.9em; border: 1px solid var(--color-line); border-radius: 8px;
  background: var(--color-paper); transition: border-color var(--dur-fast) var(--ease-out);
}
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: var(--color-muted); }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible {
  outline: 2px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-focus);
}
.contact-form input:user-invalid { border-color: var(--color-error); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form-row p, .contact-form p { margin-bottom: var(--space-md); max-width: none; }
.req { color: var(--color-error); }
.btn-submit { width: 100%; justify-content: center; }
.form-rgpd { font-size: 0.8rem; color: var(--color-muted); margin: var(--space-xs) 0 0; }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-success { padding: var(--space-md) 0; }
.form-success h3 { color: var(--color-success); }
.form-error { color: var(--color-error); font-weight: 600; }

/* ——— Intro locale (pages ville/département) ——— */
.local-intro {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: start;
}
.local-intro-text p:first-child {
  font-size: var(--text-lg); font-family: var(--font-display); font-weight: 520; font-style: italic;
  color: var(--color-ink-strong);
}
.local-aside {
  background: var(--color-paper-2); border: var(--rule-hair); border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-card); padding: var(--space-lg);
}
.aside-title { font-size: var(--text-lg); font-family: var(--font-display); font-weight: 560; margin: 0 0 var(--space-md); }
.steps { margin: 0 0 var(--space-lg); padding-left: 1.2em; display: grid; gap: var(--space-sm); font-size: var(--text-sm); }
.steps::marker { color: var(--color-accent-deep); }

/* ——— Cards villes (page département) ——— */
.dept-cities-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.dept-city-card {
  display: grid; gap: var(--space-2xs); padding: var(--space-lg);
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card);
  text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.dept-city-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }
.dept-city-kicker { font-size: var(--text-sm); color: var(--color-muted); }
.dept-city-name { font-family: var(--font-display); font-weight: 560; font-size: var(--text-lg); color: var(--color-ink-strong); }
.dept-city-arrow { color: var(--color-accent-deep); }

/* ——— Vente de terrain · catalogue ——— */
.terrains-intro {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-2xl); align-items: end;
}
.ti-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.ti-stats li { border-top: 2px solid var(--color-ink-strong); padding-top: var(--space-sm); }
.ti-stats strong { font-family: var(--font-display); font-weight: 560; font-size: var(--text-2xl); display: block; line-height: 1; }
.ti-stats span { font-size: var(--text-sm); color: var(--color-muted); display: block; margin-top: var(--space-2xs); }

.terrains-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.filter-pill { font-size: var(--text-sm); color: var(--color-muted); border: var(--rule-hair); padding: 0.3em 0.8em; border-radius: var(--radius-pill); }

.terrains-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }

.terrain-card {
  display: flex; flex-direction: column;
  background: var(--color-paper-2); border: var(--rule-hair); border-radius: var(--radius-card); overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.terrain-card:hover { transform: translateY(-3px); border-color: var(--color-accent); }

/* Carrousel Airbnb-style : snap horizontal + flèches + dots + prix overlay */
.tc-carousel {
  position: relative; aspect-ratio: 4 / 3; background: var(--color-accent-soft);
  overflow: hidden;
}
.tc-track {
  display: flex; height: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tc-track::-webkit-scrollbar { display: none; }
.tc-track img {
  flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover;
  scroll-snap-align: center;
}
.tc-arrow {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 32px; height: 32px; border-radius: 50%;
  background: oklch(100% 0 0 / 0.96); color: var(--color-ink-strong);
  border: 0; cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 2px 8px oklch(0% 0 0 / 0.18);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tc-arrow:hover { transform: translate(0, -50%) scale(1.08); }
.tc-prev { left: var(--space-xs); }
.tc-next { right: var(--space-xs); }
.tc-carousel:hover .tc-arrow,
.tc-carousel:focus-within .tc-arrow { opacity: 1; }
.tc-dots {
  position: absolute; bottom: var(--space-xs); left: 50%; translate: -50% 0;
  display: flex; gap: 4px;
}
.tc-dots span {
  width: 5px; height: 5px; border-radius: 50%; background: oklch(100% 0 0 / 0.55);
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.tc-dots span.on { background: #fff; transform: scale(1.4); }
.tc-price {
  position: absolute; bottom: var(--space-sm); right: var(--space-sm);
  background: var(--color-ink-strong); color: #fff;
  font-family: var(--font-display); font-weight: 560; font-size: var(--text-body);
  padding: 0.35em 0.9em; border-radius: var(--radius-pill);
}

.tc-body { padding: var(--space-md) var(--space-md) var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.tc-loc { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.tc-loc span { color: var(--color-ink-strong); font-weight: 600; }
.tc-title { font-family: var(--font-display); font-weight: 560; font-size: var(--text-lg); margin: 0; color: var(--color-ink-strong); }
.tc-specs {
  list-style: none; margin: var(--space-2xs) 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs);
  border-top: var(--rule-hair); border-bottom: var(--rule-hair); padding: var(--space-sm) 0;
}
.tc-specs li { font-size: var(--text-sm); color: var(--color-ink); display: flex; flex-direction: column; }
.tc-specs li span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 2px; }
.tc-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.tc-feats li {
  font-size: 0.72rem; padding: 0.2em 0.7em; border-radius: var(--radius-pill);
  background: var(--color-accent-soft); color: var(--color-accent-deep);
}
.tc-desc {
  font-size: var(--text-sm); color: var(--color-muted); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  max-width: none;
}
.tc-cta {
  margin-top: auto; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-strong);
  text-decoration: none; border-top: var(--rule-hair); padding-top: var(--space-sm);
}
.tc-cta:hover { color: var(--color-accent-deep); }

/* ——— Pages standard ——— */
.page-content { max-width: 800px; margin: 0 auto; padding: var(--space-2xl) var(--space-md); }
.page-body h2 { font-size: var(--text-lg); margin-top: var(--space-xl); }

/* ——— Footer ——— */
.site-footer { background: var(--color-ink-strong); color: oklch(80% 0 0); }
.footer-banner {
  background-size: cover; background-position: center;
  position: relative; min-height: 320px; display: grid; place-items: center;
}
.footer-banner::before { content: ""; position: absolute; inset: 0; background: oklch(0% 0 0 / 0.45); }
.footer-banner-inner { position: relative; text-align: center; padding: var(--space-2xl) var(--space-md); }
.footer-claim {
  font-family: var(--font-display); font-weight: 560; font-size: var(--text-display-s);
  color: #fff; margin-bottom: var(--space-lg); max-width: none;
}
.footer-main {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr));
  gap: var(--space-xl) var(--space-lg); padding: var(--space-2xl) var(--gutter);
}
.footer-brand img { margin-bottom: var(--space-md); }
.footer-agencies { display: grid; gap: var(--space-md); margin-top: var(--space-md); }
.footer-agency { font-style: normal; font-size: var(--text-sm); line-height: 1.55; color: oklch(75% 0 0); }
.footer-agency strong { display: block; color: #fff; font-family: var(--font-display); font-weight: 560; font-size: var(--text-body); margin-bottom: var(--space-2xs); }
.footer-agency-kicker { display: block; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-2xs); }
.footer-agency a { color: var(--color-accent); text-decoration: none; }
.footer-agency a:hover { color: #fff; }

/* Contact : adresse + agence sur les cartes contact-people. */
.contact-people address { font-style: normal; font-size: var(--text-sm); color: var(--color-muted); margin: var(--space-2xs) 0; }
.people-agency { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-deep); }
.footer-brand p { font-size: var(--text-sm); }
.footer-address a { color: var(--color-accent); }
.footer-title { font-family: var(--font-display); font-weight: 560; margin-bottom: var(--space-sm); }
.footer-title a { color: #fff; text-decoration: none; }
.footer-title a:hover { color: var(--color-accent); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer-col li a { color: oklch(72% 0 0); text-decoration: none; font-size: var(--text-sm); }
.footer-col li a:hover { color: var(--color-accent); }
.footer-legal {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-md) var(--gutter); border-top: 1px solid oklch(25% 0 0);
  font-size: var(--text-sm);
}
.footer-legal p { margin: 0; }
.footer-legal a { color: oklch(72% 0 0); margin-left: var(--space-md); }
.footer-legal a:hover { color: var(--color-accent); }

/* ——— Barre d'appel mobile (conversion Google Ads) ——— */
.mobile-callbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
}

/* ——— Responsive ——— */
@media (max-width: 1023px) {
  .modeles-track { grid-auto-columns: calc((100% - var(--space-lg)) / 2); }
  .avis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terrains-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terrains-intro { grid-template-columns: minmax(0, 1fr); }
  .map-zone { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .map-embed { min-height: 340px; }
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

@media (max-width: 767px) {
  .about, .contact, .local-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .diff-list, .dept-cities-grid, .form-row { grid-template-columns: minmax(0, 1fr); }
  .modeles-track { grid-auto-columns: 86%; }
  .terrains-grid { grid-template-columns: minmax(0, 1fr); }
  .ti-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .has-cascade .sub-menu.cascade-menu { min-width: 0; width: 100%; padding: 0; }
  .cascade-item { border-bottom: var(--rule-hair); }
  .cascade-item:last-child { border-bottom: 0; }
  .cascade-head { padding: var(--space-sm) var(--space-md); border-radius: 0; }
  .cascade-side svg { display: none; }
  .cascade-cities {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-top: var(--rule-hair); border-radius: 0;
    padding: var(--space-xs) var(--space-md) var(--space-sm) calc(var(--space-md) + var(--space-md));
    background: var(--color-paper);
  }

  /* Avis Google : carrousel scroll-snap horizontal, une carte à la fois. */
  .avis-grid {
    display: flex; grid-template-columns: none; gap: var(--space-sm);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .avis-grid::-webkit-scrollbar { display: none; }
  .avis-card { flex: 0 0 86%; scroll-snap-align: center; }

  /* Réalisations : carrousel scroll-snap, une card visible à la fois,
     badge plus petit et discret pour ne pas masquer la photo. */
  .real-grid {
    columns: auto; column-gap: 0;
    display: flex; gap: var(--space-sm);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    padding-bottom: var(--space-sm);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .real-grid::-webkit-scrollbar { display: none; }
  .real-item {
    flex: 0 0 84%; margin: 0;
    scroll-snap-align: center;
    aspect-ratio: 4 / 3;
  }
  .real-item img { width: 100%; height: 100%; object-fit: cover; }
  .real-label {
    bottom: var(--space-xs); left: var(--space-xs);
    font-size: 0.78rem; padding: 0.25em 0.7em;
    background: oklch(100% 0 0 / 0.96);
    max-width: calc(100% - var(--space-md));
  }
  .hero-frame { padding: var(--space-xs) var(--gutter) 0; }
  .hero-media { min-height: 72vh; border-radius: 14px; }
  .hero-text { padding: var(--space-xl) var(--space-md) calc(var(--space-xl) + var(--space-xl)); }
  /* Sur mobile, l'encoche ne garde que le CTA principal : la barre d'appel sticky couvre le téléphone. */
  .hero-cta-notch { padding: var(--space-xs) var(--space-sm) 0 0; border-top-right-radius: 20px; }
  .hero-cta-notch .btn-hero-tel { display: none; }
  .btn-hero { font-size: var(--text-sm); padding: 0.9em 1.5em; }
  .brand img { width: 96px; }
  .section-head-row { flex-direction: column; align-items: flex-start; }

  /* Nav mobile */
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    background: none; border: var(--rule-hair); border-radius: var(--radius-pill);
    padding: 0.45em 1em; font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
  }
  .nav-toggle-bar {
    width: 16px; height: 2px; background: currentColor; position: relative; display: inline-block;
  }
  .nav-toggle-bar::before, .nav-toggle-bar::after {
    content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor;
  }
  .nav-toggle-bar::before { top: -5px; }
  .nav-toggle-bar::after { top: 5px; }

  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--color-paper-2); border-bottom: var(--rule-hair);
    padding: var(--space-md); flex-direction: column; align-items: stretch; gap: var(--space-md);
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .site-nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: var(--rule-hair); }
  .nav-list > li > a, .sub-toggle { display: flex; width: 100%; justify-content: space-between; padding: var(--space-sm) 0; }
  .sub-menu {
    position: static; translate: none; transform: none; opacity: 1; visibility: hidden;
    display: none; box-shadow: none; border: 0; padding: 0 0 var(--space-sm) var(--space-md); min-width: 0;
  }
  .has-sub.open .sub-menu { display: block; visibility: visible; }
  .has-sub:focus-within .sub-menu { visibility: visible; }
  .nav-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .nav-cta .btn { justify-content: center; }

  .mobile-callbar { display: grid; grid-template-columns: 1.4fr 1fr; }
  .mobile-callbar a {
    text-align: center; padding: var(--space-sm); font-weight: 600; font-size: var(--text-sm);
    text-decoration: none;
  }
  .callbar-tel { background: var(--color-ink-strong); color: #fff; }
  .callbar-devis { background: var(--color-accent); color: var(--color-ink-strong); }
  body { padding-bottom: 48px; } /* espace pour la barre d'appel */

  .footer-main { grid-template-columns: minmax(0, 1fr); }
}

/* ——— Mouvement réduit ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-video-slot { display: none; }
}

/* ——— Impression ——— */
@media print {
  .site-header, .site-footer, .mobile-callbar, .hero-media { display: none; }
}