:root {
  /* ============ COULEURS ============ */
  --ink: #14201c;
  --muted: #61706a;
  --line: #dce4df;
  --paper: #fbfaf7;
  --soft: #eef3ef;
  --white: #ffffff;
  --accent: #233f36;
  --accent-strong: #162b25;

  /* Doré : 3 nuances pour respecter WCAG AA selon le fond */
  --gold-dark: #9c8350;  /* Sur fond clair (eyebrow sur paper) : ratio 4.8:1 ✓ AA */
  --gold: #b79a62;        /* Sur fond moyen (accents, hovers) */
  --gold-light: #e2cfaa;  /* Sur fond sombre (eyebrow sur hero sombre) */

  --shadow: 0 24px 70px rgba(20, 32, 28, 0.12);
  --serif: "Cormorant Garamond", Georgia, serif;

  /* ============ FONT WEIGHTS ============ */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ============ BORDER RADIUS ============ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ============ SPACING (à utiliser progressivement) ============ */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

* {
  box-sizing: border-box;
}

html {
  /* scroll-behavior: smooth -- Lenis gère le smooth des ancres */
}

html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: clip;
}

body {
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Safe area iOS : pousse le contenu sous la status bar (notch) */
  padding: max(16px, env(safe-area-inset-top)) clamp(20px, 5vw, 64px) 16px;
  background: rgba(251, 250, 247, 0.62);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border-bottom: 1px solid rgba(31, 42, 36, 0.05);
  transform: translateY(0);
  transition:
    transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 450ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 450ms ease,
    padding 450ms ease,
    box-shadow 450ms ease,
    backdrop-filter 450ms ease;
}

/* Header caché quand on scrolle vers le bas (réapparaît en remontant) */
.site-header.header-hidden {
  transform: translateY(-100%);
}

/* En haut de page sur un hero sombre : header complètement transparent */
body.has-dark-hero .site-header:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  padding: 22px clamp(20px, 5vw, 64px);
}

/* Header glassmorphism quand on a scrollé (effet verre dépoli haut de gamme) */
.site-header.is-scrolled {
  background: rgba(251, 250, 247, 0.68);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border-bottom-color: rgba(31, 42, 36, 0.08);
  box-shadow: 0 8px 24px rgba(20, 32, 28, 0.04);
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Texte/liens en blanc quand le header est transparent sur un hero sombre */
body.has-dark-hero .site-header:not(.is-scrolled) .brand-text strong,
body.has-dark-hero .site-header:not(.is-scrolled) .brand-text small,
body.has-dark-hero .site-header:not(.is-scrolled) nav a {
  color: #fff;
}

body.has-dark-hero .site-header:not(.is-scrolled) .brand-text small {
  color: rgba(255, 255, 255, 0.72);
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-call {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-call:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-estimate {
  background: rgba(255, 255, 255, 0.92);
  color: #1f2a24;
  border-color: rgba(255, 255, 255, 0.92);
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-estimate:hover {
  background: #fff;
}

/* Burger en mode transparent : traits blancs */
body.has-dark-hero .site-header:not(.is-scrolled) .header-burger {
  border-color: rgba(255, 255, 255, 0.4);
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-burger span {
  background: #fff;
}

body.has-dark-hero .site-header:not(.is-scrolled) .header-burger:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.7);
}

/* Sur mobile, header 100% transparent (style Aman/Sotheby's).
   Aucun bandeau visible, l'image hero s'impose. Logo et burger restent
   parfaitement lisibles grâce à un text-shadow / drop-shadow doux.
   Au scroll, l'effet glassmorphism crème prend le relais via .is-scrolled. */
@media (max-width: 980px) {
  body.has-dark-hero .site-header:not(.is-scrolled) {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }

  /* Texte du logo lisible sur tout fond (sombre OU clair) grâce à
     un text-shadow noir doux qui se confond dans les images foncées
     et qui détache le blanc sur les images claires. */
  body.has-dark-hero .site-header:not(.is-scrolled) .brand-text strong,
  body.has-dark-hero .site-header:not(.is-scrolled) .brand-text small {
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 2px 16px rgba(0, 0, 0, 0.35);
  }

  /* Le burger garde un mini-glassmorphism (juste le bouton, pas le
     header entier) avec une ombre douce pour rester visible sur
     n'importe quel fond. */
  body.has-dark-hero .site-header:not(.is-scrolled) .header-burger {
    background: rgba(15, 22, 19, 0.22);
    backdrop-filter: blur(10px) saturate(1.4);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  }

  body.has-dark-hero .site-header:not(.is-scrolled) .header-burger span {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  }
}

/* Pour les sections hero (pas tronquées par le header fixed) */
.hero,
.sales-hero,
.recommend-hero,
.about-hero {
  margin-top: 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 190px;
}

.brand-text {
  display: grid;
  gap: 3px;
}

.brand-text strong {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.brand-text small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.5vw, 42px);
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

nav a:hover,
.site-footer a:hover {
  color: var(--accent);
}

nav a,
.site-footer a,
.header-call,
.header-estimate {
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

nav a:hover {
  transform: translateY(-1px);
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-call,
.header-estimate {
  padding: 11px 16px;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-weight: 700;
  background: var(--white);
}

.header-estimate {
  color: var(--white);
  background: #111614;
  border-color: #111614;
}

.header-call:hover,
.header-estimate:hover {
  transform: translateY(-1px);
}

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 64px) clamp(80px, 10vw, 120px);
  overflow: hidden;
  color: var(--white);
  --parallax-y: 0px;
}

@property --ken-burns-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

@keyframes ken-burns-hero {
  from { --ken-burns-scale: 1; }
  to   { --ken-burns-scale: 1.12; }
}

.hero {
  --ken-burns-scale: 1;
  animation: ken-burns-hero 18s ease-in-out infinite alternate;
}

.hero::before {
  position: absolute;
  inset: -8% 0 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.65), rgba(10, 16, 14, 0.38) 50%, rgba(10, 16, 14, 0.65)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.2), rgba(10, 16, 14, 0.6)),
    url("assets/annecy-nord-editorial.webp") center / cover no-repeat;
  transform: translate3d(0, var(--parallax-y), 0) scale(var(--ken-burns-scale));
  transform-origin: center center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

.hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10, 16, 14, 0.52));
}

/* Vidéo hero (desktop uniquement, mobile garde la photo Ken Burns) */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.55), rgba(10, 16, 14, 0.22) 50%, rgba(10, 16, 14, 0.55)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.20), rgba(10, 16, 14, 0.55));
}

@media (max-width: 980px) {
  .hero-video,
  .hero-video-overlay { display: none; }
}

/* Sur desktop la vidéo prend le relais : on neutralise le Ken Burns du ::before
   pour économiser le GPU (la vidéo s'occupe du mouvement) */
@media (min-width: 981px) {
  .hero { animation: none; }
}

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

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.hero-content .hero-subtitle,
.hero-content .lead {
  margin-left: auto;
  margin-right: auto;
}

.hero-content .hero-actions {
  justify-content: center;
}

.hero-content .trust-row {
  justify-content: center;
}

.hero-content .hero-proof {
  margin-left: auto;
  margin-right: auto;
}

.hero-content h1 .title-place {
  text-align: center;
}

.hero h1 .hero-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hero h1 .hero-line {
    white-space: normal;
  }
}

.eyebrow,
.panel-kicker {
  margin: 0 0 14px;
  color: var(--gold-dark); /* WCAG AA sur fond clair */
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Sur fonds sombres (hero), eyebrow en doré clair pour rester lisible */
.hero .eyebrow,
.commune-hero .eyebrow,
.article-hero .eyebrow,
.about-hero .eyebrow,
.recommend-hero .eyebrow,
.sales-hero .eyebrow,
.carnet-hero .eyebrow,
.final-cta .eyebrow {
  color: var(--gold-light);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 860px;
  margin-bottom: 44px;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.5vw, 5.8rem);
  line-height: 0.95;
  font-weight: 600;
  letter-spacing: -0.005em;
}

h1 .title-place {
  display: block;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.48em;
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.04em;
  font-style: italic;
}

h1 .title-kicker {
  display: block;
  margin-bottom: 10px;
  color: var(--gold-light);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.13em;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.title-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--gold-light);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-subtitle {
  max-width: 650px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.06rem, 1.5vw, 1.24rem);
  font-weight: 700;
  line-height: 1.48;
}

.recommendation-line {
  max-width: 620px;
  margin: 0 0 16px;
  color: var(--gold-light);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 800;
  line-height: 1.4;
}

.lead {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  line-height: 1.62;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 800;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(20, 32, 28, 0.1);
}

.button-primary {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--accent);
  isolation: isolate;
  /* La transition de couleur du texte se cale sur la durée du sweep */
  transition: transform 180ms ease, box-shadow 180ms ease,
              color 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Effet "gold sweep" : fond doré qui glisse de la gauche vers la droite
   au hover, avec un léger flou pour l'effet liquide. Texte du bouton
   transitionne vers le vert sombre pour rester lisible sur le doré clair. */
.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--gold-light) 0%,
    var(--gold) 100%
  );
  transform: translateX(-101%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
  will-change: transform;
}

.button-primary:hover {
  color: var(--accent-strong);
  background: var(--accent); /* maintien du fond sous le pseudo-element */
}

.button-primary:hover::before {
  transform: translateX(0);
}

/* Au focus clavier, même effet (accessibilité) */
.button-primary:focus-visible {
  color: var(--accent-strong);
}

.button-primary:focus-visible::before {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .button-primary::before { transition: none; }
}

.button-secondary {
  color: var(--accent);
  background: var(--white);
  border-color: var(--line);
}

.hero .button-secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
}

.button-wide {
  width: 100%;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.trust-row span {
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
}

.hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 760px;
  margin-top: 18px;
}

.proof-star {
  color: var(--gold-light);
}

.hero-proof div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 22px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.hero-proof strong {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
  color: var(--white);
  font-family: var(--serif);
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.count-up {
  font-variant-numeric: tabular-nums;
}

.proof-star {
  margin-left: 4px;
  color: var(--gold-light);
  font-size: 0.7em;
}

.hero-proof span {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.45;
}

.estimate-section {
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 64px) clamp(52px, 7vw, 84px);
  background: var(--paper);
}

.estimate-panel {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.7vw, 32px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.estimate-panel:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 78px rgba(20, 32, 28, 0.14);
}

.panel-heading h2 {
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.panel-heading p:last-child,
.form-note {
  color: var(--muted);
  line-height: 1.55;
}

.lead-form {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.lead-form label {
  display: grid;
  gap: 7px;
}

.lead-form .consent-field {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  background: #f7faf7;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.lead-form span {
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 800;
}

.consent-field input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--accent);
}

.consent-field span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.45;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

input,
select,
textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fdfdfb;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(35, 63, 54, 0.1);
}

.form-note {
  margin: 0;
  font-size: 0.8rem;
  text-align: center;
}

.form-success {
  display: none;
  gap: 4px;
  padding: 14px 16px;
  color: #173f32;
  background: #edf6f1;
  border: 1px solid #cfe6da;
  border-radius: var(--radius-sm);
  line-height: 1.45;
}

.form-success.is-visible {
  display: grid;
}

.form-success strong,
.form-success span {
  display: block;
}

.form-success strong {
  font-size: 0.95rem;
}

.form-success span {
  color: #49665b;
  font-size: 0.88rem;
}

.editorial-strip {
  display: grid;
  grid-template-columns: minmax(280px, 0.58fr) minmax(420px, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
  padding: clamp(44px, 7vw, 86px) clamp(20px, 5vw, 64px);
  background: #f4f2ed;
}

.editorial-copy {
  max-width: 560px;
}

.editorial-copy h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.05;
}

.editorial-copy p:last-child {
  color: var(--muted);
  line-height: 1.72;
}

.editorial-images {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.42fr);
  gap: 16px;
  align-items: end;
}

.editorial-image {
  margin: 0;
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(20, 32, 28, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 64px rgba(20, 32, 28, 0.12);
}

.editorial-image picture,
.editorial-image img {
  display: block;
  width: 100%;
  height: 100%;
}

.editorial-image img {
  object-fit: cover;
  transition: transform 700ms ease, filter 700ms ease;
}

.editorial-image:hover img {
  filter: saturate(1.04);
  transform: scale(1.025);
}

.editorial-image-large {
  aspect-ratio: 16 / 10;
}

.editorial-image-small {
  aspect-ratio: 4 / 5;
  transform: translateY(34px);
}

.intro-band {
  padding: 0 clamp(20px, 5vw, 64px) 42px;
}

.portrait-card {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 66px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(22px, 4vw, 46px);
  background: #eef3ef;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.portrait-card picture,
.portrait-card img {
  display: block;
  width: 100%;
}

.portrait-card img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-sm);
  filter: saturate(0.94);
  transition: transform 500ms ease, filter 500ms ease;
}

.portrait-card:hover img {
  transform: scale(1.015);
  filter: saturate(1);
}

.portrait-card h2,
.section-heading h2,
.split h2,
.proof h2,
.final-cta h2 {
  margin-bottom: 14px;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.portrait-card p:last-child,
.section-heading,
.split,
.proof-copy p,
.final-cta p {
  color: var(--muted);
  line-height: 1.7;
}

.section {
  padding: clamp(58px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 34px;
}

.local-value {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(238, 243, 239, 0.72));
}

.local-grid,
.insight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.local-grid article,
.insight-grid article {
  padding: clamp(20px, 3vw, 30px);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.local-grid article:hover,
.insight-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(183, 154, 98, 0.42);
  box-shadow: 0 18px 46px rgba(20, 32, 28, 0.08);
}

.local-grid h3,
.insight-grid h3 {
  margin-bottom: 10px;
  font-size: 1.12rem;
}

.local-grid p,
.insight-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.steps article {
  padding: clamp(20px, 3vw, 30px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.steps article:hover,
.reviews-grid article:hover {
  transform: translateY(-3px);
  border-color: rgba(183, 154, 98, 0.45);
  box-shadow: 0 18px 46px rgba(20, 32, 28, 0.08);
}

.steps span {
  display: block;
  margin-bottom: 30px;
  color: var(--gold);
  font-weight: 800;
}

.steps h3 {
  margin-bottom: 10px;
  font-size: 1.18rem;
}

.steps p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.64fr) minmax(420px, 1fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
  background: var(--accent);
}

.split h2,
.split .eyebrow {
  color: var(--white);
}

.split p {
  color: rgba(255, 255, 255, 0.72);
}

.area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.area-list span {
  padding: 9px 11px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-pill);
  font-size: 0.86rem;
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.area-list span:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.48);
  transform: translateY(-1px);
}

.service-map {
  display: grid;
  gap: 14px;
}

.map-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 46%, rgba(255, 255, 255, 0.13), transparent 22%),
    radial-gradient(circle at 72% 58%, rgba(183, 154, 98, 0.12), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 28px 70px rgba(0, 0, 0, 0.14);
}

.map-card::before {
  position: absolute;
  inset: 22px;
  content: "";
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black, transparent 74%);
}

.map-zone,
.map-route,
.map-pin,
.map-sheen,
.map-pulse {
  position: absolute;
}

.map-sheen {
  inset: -40%;
  pointer-events: none;
  opacity: 0.48;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.1), transparent 62%);
  transform: translateX(-36%) rotate(2deg);
  animation: mapSheen 8s ease-in-out infinite;
}

.map-pulse {
  left: 34%;
  top: 48%;
  width: 230px;
  height: 82px;
  pointer-events: none;
  border: 1px solid rgba(255, 250, 240, 0.42);
  border-radius: var(--radius-pill);
  transform: translate(-50%, -50%);
  animation: mapPulse 3.8s ease-out infinite;
}

.map-zone {
  border: 1px solid rgba(214, 196, 159, 0.26);
  border-radius: 50%;
  background: rgba(214, 196, 159, 0.045);
  animation: mapZoneBreath 7s ease-in-out infinite;
}

.zone-north {
  animation-delay: 1.4s;
}

.zone-main {
  left: 17%;
  top: 20%;
  width: 38%;
  height: 45%;
}

.zone-north {
  right: 12%;
  top: 24%;
  width: 42%;
  height: 51%;
}

.map-route {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transform-origin: left center;
  overflow: hidden;
}

.map-route::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 250, 240, 0.72), transparent);
  transform: translateX(-100%);
  animation: routeTravel 5.8s ease-in-out infinite;
}

.route-two::after {
  animation-delay: 1.2s;
}

.route-three::after {
  animation-delay: 2.1s;
}

.route-one {
  left: 10%;
  top: 55%;
  width: 82%;
  transform: rotate(-12deg);
}

.route-two {
  left: 22%;
  top: 25%;
  width: 64%;
  transform: rotate(35deg);
}

.route-three {
  left: 45%;
  top: 16%;
  width: 48%;
  transform: rotate(82deg);
}

.map-pin {
  --pin-scale: 1;
  --pin-y: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 170px;
  min-height: 38px;
  padding: 8px 12px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(19, 34, 29, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  font-size: clamp(0.72rem, 1.2vw, 0.92rem);
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(14px);
  opacity: 0;
  transform: translate(-50%, calc(-50% + var(--pin-y))) scale(var(--pin-scale));
  transition:
    opacity 120ms linear,
    transform 120ms linear,
    background 220ms ease,
    border-color 220ms ease;
}

.map-pin:hover {
  z-index: 2;
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(214, 196, 159, 0.9);
  color: var(--accent);
  transform: translate(-50%, calc(-50% + var(--pin-y))) scale(calc(var(--pin-scale) + 0.04));
}

.map-pin.is-visible {
  animation: pinSettle 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.pin-main {
  left: 34%;
  top: 48%;
  min-width: 210px;
  min-height: 48px;
  color: var(--accent);
  background: rgba(255, 250, 240, 0.96);
  border-color: rgba(214, 196, 159, 0.72);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16), 0 0 0 8px rgba(255, 250, 240, 0.06);
}

.pin-main strong {
  display: block;
}

.pin-sillingy {
  left: 22%;
  top: 64%;
}

.pin-epagny {
  left: 62%;
  top: 58%;
}

.pin-poisy {
  left: 48%;
  top: 72%;
}

.pin-choisy {
  left: 18%;
  top: 30%;
}

.pin-ferrieres {
  left: 24%;
  top: 42%;
}

.pin-pringy {
  left: 76%;
  top: 39%;
}

.pin-argonay {
  left: 84%;
  top: 25%;
}

.pin-annecy {
  left: 72%;
  top: 76%;
}

.proof {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(520px, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.proof-copy {
  max-width: 720px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  perspective: 1200px;
}

.reviews-grid article {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 210px;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.review-card.reveal,
.review-card.reveal-delay,
.review-card.reveal-delay-more {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(18px) scale(0.98);
  transition:
    opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 760ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    box-shadow 220ms ease;
  transition-delay: 0ms;
}

.review-card.reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.reviews-grid h3 {
  margin-bottom: 8px;
  font-size: 1.05rem;
}

.reviews-grid p {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.55;
}

.reviews-grid span {
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 800;
}

.stars {
  margin-bottom: 10px;
  color: var(--gold);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
}

.insights {
  background: #f4f6f3;
}

.insight-grid span {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 10px;
  color: var(--accent);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 800;
}

.faq {
  background: var(--paper);
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 980px;
}

.faq-list details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.faq-list details[open] {
  border-color: rgba(183, 154, 98, 0.45);
  box-shadow: 0 18px 46px rgba(20, 32, 28, 0.07);
}

.faq-list summary {
  cursor: pointer;
  padding: 20px 22px;
  color: var(--ink);
  font-weight: 800;
}

.faq-list p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--muted);
  line-height: 1.65;
}

.final-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin: 0 clamp(20px, 5vw, 64px) clamp(52px, 7vw, 84px);
  padding: clamp(28px, 5vw, 54px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.final-cta div {
  max-width: 740px;
}

/* --- Footer pro 3 colonnes (Identité / Navigation / Contact) --- */
.site-footer {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 84px) clamp(20px, 5vw, 64px) clamp(24px, 3vw, 36px);
  color: #4a5450;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 1.2fr;
  gap: clamp(28px, 4vw, 60px);
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: clamp(40px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}

.footer-col h2 {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  font-weight: 600;
  color: #1f2a24;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.footer-col h3 {
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1f2a24;
  margin: 0 0 20px;
}

.footer-tagline {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  color: #8b6f47;
  margin: 0 0 16px;
  font-weight: 500;
}

.footer-desc {
  font-family: Manrope, sans-serif;
  font-size: 0.88rem;
  line-height: 1.7;
  color: #4a5450;
  margin: 0;
  max-width: 380px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.footer-nav ul li a {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: #4a5450;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-nav ul li a:hover {
  color: #8b6f47;
}

.footer-contact ul li {
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #1f2a24;
}

.footer-label {
  font-family: Manrope, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b6f47;
}

.footer-contact ul li a {
  font-family: Manrope, sans-serif;
  font-weight: 600;
  color: #1f2a24;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-contact ul li a:hover {
  color: #8b6f47;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  margin-top: 24px;
  padding: 12px 22px;
  background: #1f2a24;
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background 200ms ease, transform 200ms ease;
}

.footer-cta:hover {
  background: #8b6f47;
  transform: translateY(-1px);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: clamp(24px, 3vw, 36px);
}

.footer-copyright {
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  color: #6b7570;
  margin: 0;
  line-height: 1.6;
}

.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
}

.footer-legal a {
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: #6b7570;
  text-decoration: none;
  transition: color 200ms ease;
}

.footer-legal a:hover {
  color: #1f2a24;
}

@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-identity {
    grid-column: 1 / -1;
    max-width: 580px;
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-legal {
    flex-wrap: wrap;
    gap: 16px;
  }
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

.reveal-delay {
  transition-delay: 110ms;
}

.reveal-delay-more {
  transition-delay: 200ms;
}

.scroll-linked-motion .reveal,
.scroll-linked-motion .review-card.reveal,
.scroll-linked-motion .review-card.reveal-delay,
.scroll-linked-motion .review-card.reveal-delay-more {
  transition:
    opacity 90ms linear,
    transform 90ms linear,
    filter 90ms linear,
    border-color 220ms ease,
    box-shadow 220ms ease;
  transition-delay: 0ms;
  will-change: opacity, transform, filter;
}

/* --- Burger button (visible uniquement en mobile/tablet) --- */
.header-burger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  transition: background 200ms ease, border-color 200ms ease;
}

.header-burger:hover {
  background: rgba(31, 42, 36, 0.04);
  border-color: #8b6f47;
}

.header-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: #1f2a24;
  border-radius: 2px;
  transition: transform 280ms ease, opacity 280ms ease;
}

.header-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.header-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.header-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Menu mobile (drawer plein écran) --- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(31, 42, 36, 0.92);
  backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
}

.mobile-nav.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav[aria-hidden="false"] {
  pointer-events: auto;
}

.mobile-nav-inner {
  width: min(420px, 100%);
  background: var(--paper);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mobile-nav.is-open .mobile-nav-inner {
  transform: translateX(0);
}

.mobile-nav-close {
  align-self: flex-end;
  width: 40px;
  height: 40px;
  padding: 0;
  background: rgba(31, 42, 36, 0.06);
  border: none;
  border-radius: var(--radius-pill);
  color: #1f2a24;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}

.mobile-nav-close:hover {
  background: rgba(139, 111, 71, 0.15);
  transform: scale(1.08);
}

.mobile-nav-brand {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 600;
  color: #1f2a24;
  margin: 12px 0 4px;
}

.mobile-nav-tagline {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  color: #8b6f47;
  margin: 0 0 14px;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mobile-nav-links a {
  font-family: Manrope, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: #1f2a24;
  padding: 10px 0;
  text-decoration: none;
  transition: color 200ms ease, padding-left 200ms ease;
  border-bottom: 1px solid transparent;
}

.mobile-nav-links a:hover,
.mobile-nav-links a[aria-current="page"] {
  color: #8b6f47;
  padding-left: 8px;
}

.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
}

.mobile-nav-actions .button {
  width: 100%;
  text-decoration: none;
}

@media (max-width: 980px) {
  .site-header {
    align-items: flex-start;
  }

  nav {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .header-burger {
    display: inline-flex;
  }

  .hero,
  .editorial-strip,
  .portrait-card,
  .split,
  .proof {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 0;
    gap: 32px;
  }

  .estimate-panel {
    align-self: auto;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .local-grid,
  .insight-grid,
  .reviews-grid {
    grid-template-columns: 1fr;
  }

  .editorial-images {
    grid-template-columns: 1fr 0.62fr;
  }

  .final-cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .map-card {
    min-height: 360px;
  }
}

@media (max-width: 620px) {
  .site-header {
    position: static;
    padding: max(16px, env(safe-area-inset-top)) 16px 12px;
    gap: 12px;
  }

  /* Pages à hero sombre (accueil, carnet, recommander, à propos,
     biens vendus, communes) : header en overlay transparent sur
     l'image hero (style Coldwell). Le logo et le burger se posent
     directement sur l'image qui monte jusqu'en haut de l'écran.
     Les pages SANS hero sombre (mentions légales, articles) gardent
     le header static (pas de risque de contenu masqué en haut). */
  body.has-dark-hero .site-header {
    position: fixed;
  }

  /* about-hero a un padding-top faible (80px) : on l'augmente pour que
     son contenu ne passe pas sous le header fixe en overlay. */
  body.has-dark-hero .about-hero {
    padding-top: max(108px, calc(env(safe-area-inset-top) + 84px));
  }

  .brand {
    min-width: 0;
  }

  .brand-text small {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  .header-estimate {
    display: none;
  }

  .header-call {
    padding: 10px 12px;
    font-size: 0.9rem;
  }

  .hero-content,
  .section-heading {
    max-width: 100%;
  }

  .hero {
    /* Padding-top généreux pour que le contenu (eyebrow, nom, H1)
       passe sous le header fixe en overlay, sans être masqué. */
    padding: clamp(108px, 17vh, 140px) 16px 44px;
  }

  h1 {
    font-size: 2.25rem;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .hero-proof {
    grid-template-columns: 1fr;
  }

  .trust-row span,
  .area-list span {
    max-width: 100%;
    white-space: normal;
  }

  .map-card {
    min-height: 420px;
  }

  .map-pin {
    max-width: 138px;
    min-height: 34px;
    padding: 7px 9px;
    font-size: 0.72rem;
  }

  .pin-main {
    left: 48%;
    top: 21%;
    min-width: 190px;
  }

  .pin-choisy {
    left: 25%;
    top: 40%;
  }

  .pin-ferrieres {
    left: 34%;
    top: 48%;
  }

  .pin-sillingy {
    left: 30%;
    top: 56%;
  }

  .pin-epagny {
    left: 64%;
    top: 48%;
  }

  .pin-poisy {
    left: 52%;
    top: 66%;
  }

  .pin-pringy {
    left: 75%;
    top: 33%;
  }

  .pin-argonay {
    left: 73%;
    top: 78%;
  }

  .pin-annecy {
    left: 43%;
    top: 88%;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .intro-band,
  .editorial-strip,
  .section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .editorial-images {
    grid-template-columns: 1fr;
  }

  .editorial-image-small {
    aspect-ratio: 16 / 10;
    transform: none;
  }

  .portrait-card {
    padding: 16px;
  }

  .final-cta {
    margin-left: 16px;
    margin-right: 16px;
    padding: 24px;
  }

.site-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 16px;
  }
}

@keyframes mapSheen {
  0%,
  22% {
    transform: translateX(-42%) rotate(2deg);
    opacity: 0;
  }

  44% {
    opacity: 0.5;
  }

  72%,
  100% {
    transform: translateX(34%) rotate(2deg);
    opacity: 0;
  }
}

@keyframes mapPulse {
  0% {
    opacity: 0.34;
    transform: translate(-50%, -50%) scale(0.86);
  }

  70%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.38);
  }
}

@keyframes mapZoneBreath {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.025);
  }
}

@keyframes routeTravel {
  0%,
  28% {
    transform: translateX(-100%);
    opacity: 0;
  }

  42% {
    opacity: 1;
  }

  70%,
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes pinSettle {
  0% {
    filter: blur(4px);
  }

  100% {
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================
   ENHANCEMENTS VISUELS : effets, hover, animations
   ===================================================== */

/* --- H1 mot par mot (apparition floutée) --- */
.hero h1 .hero-word {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(14px);
  transition: opacity 800ms ease, filter 800ms ease, transform 800ms ease;
}

.hero h1 .hero-word.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.hero h1 .hero-word.title-place {
  display: block;
}

/* --- Hero proof cascade (les 3 cartes apparaissent en séquence) --- */
.hero-proof div {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease 300ms, transform 700ms ease 300ms;
}

.hero-proof.is-visible div:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 600ms;
}

.hero-proof.is-visible div:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 800ms;
}

.hero-proof.is-visible div:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1000ms;
}

/* --- Trait doré qui se dessine sous les H2 narratifs --- */
.section-heading h2,
.editorial-copy h2,
.proof-copy h2,
.intro-band .portrait-card h2 {
  position: relative;
  padding-bottom: 18px;
}

.section-heading h2::after,
.editorial-copy h2::after,
.proof-copy h2::after,
.intro-band .portrait-card h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, var(--gold-light), rgba(226, 207, 170, 0));
  transition: width 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.section-heading.is-visible h2::after,
.editorial-copy.is-visible h2::after,
.proof-copy.is-visible h2::after,
.intro-band .portrait-card.is-visible h2::after {
  width: 80px;
}

/* --- Photos qui zooment doucement au survol --- */
.editorial-image,
.portrait-card picture {
  overflow: hidden;
}

.editorial-image img,
.portrait-card picture img {
  transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.editorial-image:hover img,
.portrait-card:hover picture img {
  transform: scale(1.04);
}

/* --- Cartes d'avis qui s'élèvent au survol --- */
.review-card {
  transition: transform 400ms ease, box-shadow 400ms ease, border-color 400ms ease;
}

.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(31, 42, 36, 0.08);
}

/* --- Drop cap "95 %" intégré au paragraphe portrait --- */
.intro-band .portrait-card h2 + p .lead-figure {
  float: left;
  margin: -0.08em 0.6em 0.05em 0;
  font-family: var(--serif);
  font-size: 2.8em;
  font-weight: 600;
  line-height: 1;
  color: #8b6f47;
  letter-spacing: -0.02em;
}

/* --- Effet hover sur les cartes "méthode" et "local-value" --- */
.steps article,
.local-grid article {
  transition: transform 400ms ease, box-shadow 400ms ease;
}

.steps article:hover,
.local-grid article:hover {
  transform: translateY(-4px);
}

/* --- Boutons : transition plus douce --- */
.button {
  transition: transform 250ms ease, background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

/* --- Liens du footer : couleur soulignée au survol --- */
.footer-links a {
  position: relative;
  text-decoration: none;
}

.footer-links a::after {
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transition: width 300ms ease;
}

.footer-links a:hover::after {
  width: 100%;
}

/* --- Empêche le parallax de la photo de fond en mobile (perfs) --- */
@media (max-width: 768px) {
  .hero {
    --parallax-y: 0px !important;
  }
}

/* --- Section "Biens vendus" (style Sotheby's épuré) --- */
.section.sales {
  background: var(--white);
  padding-bottom: clamp(80px, 10vw, 120px);
}

.section.sales .section-heading {
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.sales-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  max-width: 1280px;
  margin: 56px auto 0;
}

.sale-card {
  position: relative;
  cursor: pointer;
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sale-card:hover {
  transform: translateY(-4px);
}

.sale-card .sale-image {
  position: relative;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(139, 111, 71, 0.12), rgba(31, 42, 36, 0.08)),
    linear-gradient(180deg, #eef3ef, #d9d4c4);
  overflow: hidden;
  margin-bottom: 18px;
}

/* Photos réelles : occupent tout le container avec zoom léger au hover */
.sale-card .sale-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sale-card:hover .sale-image img {
  transform: scale(1.05);
}

/* Overlay "Voir les détails" au survol */
.sale-card .sale-image::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(31, 42, 36, 0.15) 0%, rgba(31, 42, 36, 0.55) 100%);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  content: "Voir les détails  →";
  opacity: 0;
  transition: opacity 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}

.sale-card:hover .sale-image::after,
.sale-card:focus-visible .sale-image::after {
  opacity: 1;
}

/* Placeholder SVG (utilisé quand il n'y a pas d'image, sinon caché par .sale-image img) */
.sale-card .sale-image:not(:has(img))::before {
  position: absolute;
  inset: 0;
  content: "";
  background-repeat: no-repeat;
  background-position: center 58%;
  background-size: 38% auto;
  opacity: 0.45;
  filter: brightness(0) saturate(100%) invert(15%) sepia(8%) saturate(800%) hue-rotate(120deg);
}

.sale-card[data-type="maison"] .sale-image::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 8L8 28v28h16V40h16v16h16V28L32 8z' fill='none' stroke='%231f2a24' stroke-width='2' stroke-linejoin='round'/></svg>");
}

.sale-card[data-type="appartement"] .sale-image::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='14' y='8' width='36' height='48' fill='none' stroke='%231f2a24' stroke-width='2'/><rect x='20' y='14' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='36' y='14' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='20' y='28' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='36' y='28' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='28' y='42' width='8' height='14' fill='none' stroke='%231f2a24' stroke-width='1.5'/></svg>");
}

.sale-card[data-type="bien"] .sale-image::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M10 30L32 12l22 18v22H10V30z' fill='none' stroke='%231f2a24' stroke-width='2' stroke-linejoin='round'/><rect x='26' y='38' width='12' height='14' fill='none' stroke='%231f2a24' stroke-width='1.5'/></svg>");
}

/* Badge "VENDU" en overlay style Sotheby's */
.sale-card .sale-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 7px 14px;
  background: rgba(31, 42, 36, 0.92);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  z-index: 2;
}

.sale-card .sale-content {
  padding: 0 4px;
}

.sale-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 600;
  line-height: 1.25;
  color: #1f2a24;
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.sale-card .sale-meta {
  font-family: Manrope, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7570;
  margin: 0;
  letter-spacing: 0.01em;
}

/* Sous-titre caractéristiques (T3 · 62 m²) façon Sotheby's */
.sale-card .sale-specs {
  font-family: Manrope, sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #8b6f47;
  margin: 6px 0 0;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sales-footnote {
  max-width: 700px;
  margin: clamp(44px, 5vw, 64px) auto 0;
  font-family: Manrope, sans-serif;
  font-size: 0.82rem;
  color: #6b7570;
  line-height: 1.6;
  text-align: center;
  font-style: italic;
}

/* --- Section "Secteur" : carte interactive Leaflet --- */
.sector-section {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.sector-heading {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}

.sector-heading h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: #1f2a24;
  margin: 0 0 16px;
  position: relative;
  padding-bottom: 18px;
}

.sector-heading h2::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.sector-heading p {
  color: #4a5450;
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 600px;
}

.sector-map-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  gap: 28px;
}

.sector-map-container {
  position: relative;
}

.sector-map {
  width: 100%;
  height: clamp(480px, 64vh, 620px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(31, 42, 36, 0.12);
  border: 1px solid var(--line);
  background: #f0f3ef;
}

/* Légende des zones d'intervention en overlay */
.sector-legend {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 500;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(31, 42, 36, 0.08);
  backdrop-filter: blur(8px);
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  color: #1f2a24;
  max-width: 220px;
}

.sector-legend-title {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7570;
}

.sector-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sector-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1f2a24;
  line-height: 1.3;
}

.legend-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid #8b6f47;
}

.legend-dot-core {
  background: rgba(139, 111, 71, 0.6);
}

.legend-dot-extended {
  background: rgba(139, 111, 71, 0.3);
}

.legend-dot-occasional {
  background: rgba(139, 111, 71, 0.12);
  border-style: dashed;
}

@media (max-width: 640px) {
  .sector-legend {
    top: 12px;
    right: 12px;
    padding: 12px 14px;
    max-width: 180px;
  }
  .sector-legend-title {
    font-size: 0.62rem;
  }
  .sector-legend li {
    font-size: 0.74rem;
  }
}

/* Style Leaflet : épuration */
.sector-map .leaflet-control-attribution {
  font-size: 0.62rem;
  background: rgba(255, 255, 255, 0.85);
  color: #6b7570;
  padding: 2px 6px;
}

.sector-map .leaflet-control-zoom a {
  color: #1f2a24;
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--line);
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
}

.sector-map .leaflet-control-zoom a:hover {
  background: #fff;
  color: #8b6f47;
}

/* Pins custom doré avec animation pulse */
.sector-pin-icon {
  position: relative;
}

.sector-pin-icon .pin-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #8b6f47;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(139, 111, 71, 0.4);
  z-index: 2;
}

.sector-pin-icon .pin-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(139, 111, 71, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pin-pulse 2200ms ease-out infinite;
  z-index: 1;
}

.sector-pin-icon.sector-pin-main .pin-dot {
  width: 20px;
  height: 20px;
  background: #1f2a24;
  border: 3px solid var(--gold-light);
  box-shadow: 0 4px 14px rgba(31, 42, 36, 0.4);
}

.sector-pin-icon.sector-pin-main .pin-ring {
  width: 20px;
  height: 20px;
  background: rgba(226, 207, 170, 0.5);
}

@keyframes pin-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: translate(-50%, -50%) scale(3.5);
    opacity: 0;
  }
}

/* Tooltips Leaflet customisés */
.sector-map .leaflet-tooltip.sector-tooltip {
  background: #1f2a24;
  border: none;
  color: #fff;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-family: Manrope, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  box-shadow: 0 12px 30px rgba(31, 42, 36, 0.25);
  white-space: nowrap;
}

.sector-map .leaflet-tooltip.sector-tooltip strong {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-light);
  display: block;
  margin-bottom: 4px;
}

.sector-map .leaflet-tooltip.sector-tooltip .tooltip-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.82);
  font-style: italic;
}

.sector-map .leaflet-tooltip-top.sector-tooltip::before {
  border-top-color: #1f2a24;
}

/* Liste des communes sous la carte */
.sector-map-wrap .area-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sector-map-wrap .area-list span {
  padding: 8px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-family: Manrope, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1f2a24;
  transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sector-map-wrap .area-list span:hover {
  background: #8b6f47;
  border-color: #8b6f47;
  color: #fff;
  cursor: default;
}

/* Lien vers une page commune dédiée (style "actif" subtil) */
.sector-map-wrap .area-list .area-link {
  padding: 8px 16px;
  background: #8b6f47;
  border: 1px solid #8b6f47;
  border-radius: var(--radius-pill);
  font-family: Manrope, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: background 200ms ease, transform 200ms ease;
}

.sector-map-wrap .area-list .area-link::after {
  content: " →";
  margin-left: 2px;
  transition: transform 250ms ease;
  display: inline-block;
}

.sector-map-wrap .area-list .area-link:hover {
  background: #1f2a24;
  border-color: #1f2a24;
  transform: translateY(-2px);
}

.sector-map-wrap .area-list .area-link:hover::after {
  transform: translateX(3px);
}

/* CTA rassurant sous la carte pour ne pas exclure les visiteurs hors liste */
.sector-cta {
  max-width: 680px;
  margin: 28px auto 0;
  padding: 22px 28px;
  background: rgba(139, 111, 71, 0.06);
  border: 1px solid rgba(139, 111, 71, 0.18);
  border-radius: 14px;
  text-align: center;
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4a5450;
}

.sector-cta-link {
  display: inline-block;
  margin-top: 8px;
  font-weight: 700;
  color: #8b6f47;
  text-decoration: none;
  border-bottom: 1px solid rgba(139, 111, 71, 0.4);
  transition: color 200ms ease, border-color 200ms ease;
}

.sector-cta-link:hover {
  color: #1f2a24;
  border-color: #1f2a24;
}

@media (max-width: 640px) {
  .sector-map {
    height: 380px;
    border-radius: 12px;
  }
}

/* --- Modale "détail d'un bien vendu" --- */
.sale-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.sale-modal[hidden] {
  display: none;
}

.sale-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 28, 0.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 280ms ease;
  cursor: pointer;
}

.sale-modal.is-open .sale-modal-overlay {
  opacity: 1;
}

.sale-modal-content {
  position: relative;
  background: var(--white);
  border-radius: 18px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 40px 90px rgba(20, 32, 28, 0.35);
  opacity: 0;
  transform: translateY(28px) scale(0.97);
  transition: opacity 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sale-modal.is-open .sale-modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.sale-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #1f2a24;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  transition: background 180ms ease, transform 180ms ease;
  box-shadow: 0 4px 12px rgba(20, 32, 28, 0.18);
}

.sale-modal-close:hover {
  background: #fff;
  transform: scale(1.08);
}

.sale-modal-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, rgba(139, 111, 71, 0.12), rgba(31, 42, 36, 0.08)),
    linear-gradient(180deg, #eef3ef, #d9d4c4);
  overflow: hidden;
}

.sale-modal-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.sale-modal-image:has(img)::before {
  display: none;
}

.sale-modal-image::before {
  position: absolute;
  inset: 0;
  content: "";
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: 28% auto;
  opacity: 0.45;
}

.sale-modal-image[data-type="maison"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 8L8 28v28h16V40h16v16h16V28L32 8z' fill='none' stroke='%231f2a24' stroke-width='2' stroke-linejoin='round'/></svg>");
}

.sale-modal-image[data-type="appartement"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='14' y='8' width='36' height='48' fill='none' stroke='%231f2a24' stroke-width='2'/><rect x='20' y='14' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='36' y='14' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='20' y='28' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='36' y='28' width='8' height='8' fill='none' stroke='%231f2a24' stroke-width='1.5'/><rect x='28' y='42' width='8' height='14' fill='none' stroke='%231f2a24' stroke-width='1.5'/></svg>");
}

.sale-modal-image[data-type="bien"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M10 30L32 12l22 18v22H10V30z' fill='none' stroke='%231f2a24' stroke-width='2' stroke-linejoin='round'/><rect x='26' y='38' width='12' height='14' fill='none' stroke='%231f2a24' stroke-width='1.5'/></svg>");
}

.sale-modal-image .sale-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  padding: 8px 16px;
  background: rgba(31, 42, 36, 0.92);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.sale-modal-body {
  padding: 28px 32px 32px;
}

.sale-modal-type {
  margin: 0 0 6px;
  font-family: Manrope, sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b6f47;
}

.sale-modal-content h3 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: #1f2a24;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.sale-modal-details {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin: 0 0 22px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.sale-modal-details > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sale-modal-details dt {
  font-family: Manrope, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b7570;
}

.sale-modal-details dd {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1f2a24;
}

.sale-modal-note {
  margin: 0 0 22px;
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  line-height: 1.65;
  color: #4a5450;
}

.sale-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.sale-modal-actions .button {
  flex: 1;
  min-width: 180px;
}

@media (max-width: 540px) {
  .sale-modal {
    padding: 12px;
  }
  .sale-modal-body {
    padding: 22px 22px 26px;
  }
  .sale-modal-details {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* Indication visuelle "cliquable" sur les sale-card */
.sale-card {
  cursor: pointer;
}

.sale-card:focus-visible {
  outline: 2px solid #8b6f47;
  outline-offset: 4px;
}

/* Variante teaser sur la home : grille 3 colonnes + bouton */
.section.sales-teaser {
  background: var(--white);
  padding-bottom: clamp(60px, 8vw, 90px);
}

.section.sales-teaser .section-heading {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.sales-grid-teaser {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1180px;
}

.sales-teaser-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(40px, 5vw, 56px);
}

@media (max-width: 900px) {
  .sales-grid-teaser {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .sales-grid-teaser {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sales-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .sales-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* --- Section teaser "Programme Recommandation" sur la home --- */
.recommend-teaser {
  background: linear-gradient(135deg, rgba(139, 111, 71, 0.06), rgba(226, 207, 170, 0.1));
  border-top: 1px solid rgba(139, 111, 71, 0.16);
  border-bottom: 1px solid rgba(139, 111, 71, 0.16);
}

.recommend-teaser-inner {
  display: grid;
  gap: 28px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .recommend-teaser-inner {
    grid-template-columns: 1.4fr auto;
    gap: 56px;
  }
}

.recommend-teaser h2 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  margin: 10px 0 12px;
  color: #1f2a24;
}

.recommend-teaser p {
  color: #4a5450;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}

.recommend-teaser .eyebrow {
  color: #8b6f47;
}

/* =====================================================
   HERO ÉPURÉ : tagline + bandeau proof + section intro
   ===================================================== */

/* Signature "Elric Simonet" entre eyebrow et H1 */
.hero-signature {
  display: inline-block;
  margin: 0 auto 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 2vw, 1.95rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--gold-light);
  letter-spacing: 0.01em;
  position: relative;
  padding: 0 32px;
}

.hero-signature::before,
.hero-signature::after {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 1px;
  background: rgba(226, 207, 170, 0.45);
  content: "";
}

.hero-signature::before {
  left: 0;
}

.hero-signature::after {
  right: 0;
}

/* Tagline sous le H1 (la phrase clé du 95 %) */
.hero-tagline {
  max-width: 760px;
  margin: 0 auto 56px;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.005em;
}

/* Bandeau de preuves entre hero et intro */
.hero-proof-band {
  background: var(--paper);
  padding: clamp(64px, 8vw, 110px) clamp(20px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.hero-proof-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 72px);
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.hero-proof-band .proof-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.hero-proof-band.is-visible .proof-item:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}

.hero-proof-band.is-visible .proof-item:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 400ms;
}

.hero-proof-band.is-visible .proof-item:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 600ms;
}

.hero-proof-inner .proof-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(8px, 2vw, 24px);
  position: relative;
}

.hero-proof-inner .proof-item:not(:last-child)::after {
  position: absolute;
  right: 0;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--line);
  opacity: 0.55;
  content: "";
}

.hero-proof-inner .proof-eyebrow {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #8b6f47;
  line-height: 1;
  margin: 0;
}

.hero-proof-inner .proof-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: var(--serif);
  font-size: clamp(3.8rem, 6vw, 6.4rem);
  font-weight: 500;
  line-height: 1;
  color: #1f2a24;
  letter-spacing: -0.015em;
  margin: 0;
}

.hero-proof-inner .proof-value .count-up {
  font-family: var(--serif);
  font-weight: 500;
}

.hero-proof-inner .proof-value .proof-sep {
  margin: 0 0.08em;
  color: #c8b48f;
  font-weight: 400;
}

.hero-proof-inner .proof-value .proof-unit {
  font-size: 0.62em;
  margin-left: 0.08em;
  color: #6b7570;
  font-weight: 400;
}

.hero-proof-inner .proof-value .proof-star {
  margin-left: 0.18em;
  color: #c8b48f;
  font-size: 0.42em;
  transform: translateY(-0.85em);
  letter-spacing: 0;
}

.hero-proof-inner .proof-caption {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 0.86rem;
  font-weight: 400;
  color: #6b7570;
  line-height: 1.55;
  max-width: 240px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-proof-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .hero-proof-inner .proof-item:not(:last-child)::after {
    right: 25%;
    left: 25%;
    top: auto;
    bottom: -24px;
    width: auto;
    height: 1px;
  }
}

/* Section intro juste après le bandeau */
.hero-intro {
  padding: clamp(70px, 9vw, 110px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.hero-intro-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.hero-intro .eyebrow {
  color: #8b6f47;
  margin-bottom: 18px;
}

.hero-intro h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  line-height: 1.15;
  color: #1f2a24;
  margin-bottom: 24px;
}

.hero-intro p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #4a5450;
  max-width: 640px;
  margin: 0 auto;
}

/* =====================================================
   PAGE À PROPOS
   ===================================================== */

.about-hero {
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 64px) clamp(60px, 9vw, 100px);
  background: var(--accent-strong);
  color: var(--white);
  text-align: center;
}

.about-hero-inner {
  max-width: 760px;
  margin: 0 auto;
}

.about-hero .eyebrow {
  color: var(--gold-light);
  margin-bottom: 28px;
}

.about-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  margin-bottom: 20px;
  line-height: 1.05;
  color: var(--white);
  max-width: 100%;
}

.about-hero-sub {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-style: italic;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.4;
  margin: 0;
}

.about-portrait {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(52px, 8vw, 100px) clamp(20px, 5vw, 64px);
}

.about-portrait-photo {
  overflow: hidden;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.about-portrait-photo picture,
.about-portrait-photo img {
  display: block;
  width: 100%;
}

.about-portrait-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.94);
  transition: transform 600ms ease, filter 600ms ease;
}

.about-portrait-photo:hover img {
  transform: scale(1.03);
  filter: saturate(1);
}

.about-portrait-text h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 20px;
  color: var(--ink);
}

.about-portrait-text p {
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 16px;
}

.about-portrait-text p:last-child {
  margin-bottom: 0;
}

.about-trigger {
  background: #f4f2ed;
  padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 64px);
}

.about-trigger-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.about-trigger .eyebrow {
  color: #8b6f47;
  margin-bottom: 24px;
}

.about-quote {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
  quotes: none;
  position: relative;
  padding-top: 16px;
}

.about-quote::before {
  display: block;
  margin-bottom: 12px;
  content: "\201C";
  font-family: var(--serif);
  font-size: 3.8em;
  font-style: normal;
  line-height: 0.8;
  color: var(--gold);
}

.about-trigger-inner p {
  color: var(--muted);
  line-height: 1.68;
  margin-bottom: 16px;
  text-align: left;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.about-trigger-inner p:last-child {
  margin-bottom: 0;
}

.about-values {
  background: var(--paper);
}

.about-personal {
  background: #eef3ef;
  padding: clamp(52px, 8vw, 96px) clamp(20px, 5vw, 64px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-personal-inner {
  max-width: 760px;
  margin: 0 auto;
}

.about-personal .eyebrow {
  color: var(--accent);
  margin-bottom: 18px;
}

.about-personal h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  margin-bottom: 22px;
  color: var(--ink);
}

.about-personal p {
  color: var(--muted);
  line-height: 1.72;
  margin-bottom: 16px;
  max-width: 680px;
}

.about-personal p:last-child {
  margin-bottom: 0;
}

@media (max-width: 860px) {
  .about-portrait {
    grid-template-columns: 1fr;
    max-width: 520px;
  }

  /* Sur mobile, contenir la photo dans une largeur raisonnable
     pour ne pas qu'elle écrase la mise en page. */
  .about-portrait-photo {
    max-width: 340px;
    margin: 0 auto;
  }

  .about-portrait-photo img {
    aspect-ratio: 4 / 5;
    object-position: center top;
  }
}

/* =====================================================
   TIMELINE "ÉTAPES DE LA VENTE"
   ===================================================== */

.sale-timeline {
  background: var(--white);
}

.timeline {
  position: relative;
  max-width: 760px;
  padding-left: 56px;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 22px;
  bottom: 52px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(183, 154, 98, 0.12) 100%);
}

.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  padding-bottom: 48px;
  align-items: start;
}

.timeline-step:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -56px;
  top: 2px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--gold);
  flex-shrink: 0;
  transition: background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}

.timeline-step:hover .timeline-marker {
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(183, 154, 98, 0.12);
}

.timeline-marker span {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--gold);
  transition: color 280ms ease;
}

.timeline-step:hover .timeline-marker span {
  color: var(--white);
}

.timeline-content {
  padding-top: 4px;
}

.timeline-content h3 {
  margin-bottom: 8px;
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  transition: color 220ms ease;
}

.timeline-step:hover .timeline-content h3 {
  color: var(--accent);
}

.timeline-content p {
  margin-bottom: 12px;
  color: var(--muted);
  line-height: 1.65;
}

.timeline-tag {
  display: inline-flex;
  padding: 5px 11px;
  background: rgba(183, 154, 98, 0.07);
  border: 1px solid rgba(183, 154, 98, 0.22);
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 700;
  color: #8b6f47;
  letter-spacing: 0.02em;
  transition: background 220ms ease, border-color 220ms ease;
}

.timeline-step:hover .timeline-tag {
  background: rgba(183, 154, 98, 0.13);
  border-color: rgba(183, 154, 98, 0.38);
}

@media (max-width: 620px) {
  .timeline {
    padding-left: 46px;
  }

  .timeline-marker {
    left: -46px;
    width: 30px;
    height: 30px;
  }

  .timeline::before {
    left: 14px;
  }

  .timeline-content h3 {
    font-size: 1.05rem;
  }
}

/* =====================================================
   LE CARNET D'ELRIC : page liste + article
   ===================================================== */

/* --- Hero de la page liste --- */
.carnet-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(380px, 55vh, 520px);
  padding: clamp(110px, 13vw, 168px) clamp(20px, 5vw, 64px) clamp(48px, 7vw, 84px);
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.72), rgba(10, 16, 14, 0.42) 50%, rgba(10, 16, 14, 0.72)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.18), rgba(10, 16, 14, 0.6)),
    url("assets/annecy-nord-editorial.webp") center / cover no-repeat;
}

.carnet-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.carnet-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
  line-height: 1;
  font-weight: 600;
  margin: 10px 0 20px;
  letter-spacing: -0.01em;
}

.carnet-hero-sub {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.55;
  font-family: var(--serif);
  font-style: italic;
}

/* Sur mobile, centrer verticalement le contenu des hero dark
   (carnet et pages communes : par défaut le contenu est collé en bas
   pour un effet luxe sur grand écran, mais sur mobile l'écran est plus
   carré et ça déséquilibre la mise en page) */
@media (max-width: 768px) {
  .carnet-hero,
  .commune-hero {
    align-items: center;
    padding-top: clamp(120px, 22vw, 160px);
    padding-bottom: clamp(60px, 14vw, 100px);
  }
}

/* --- Liste des articles --- */
.carnet-list {
  padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--white);
}

.carnet-list-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.carnet-card {
  margin-bottom: clamp(40px, 5vw, 64px);
  background: var(--white);
  transition: transform 450ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.carnet-card:hover {
  transform: translateY(-4px);
}

.carnet-card-link {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .carnet-card-link {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.carnet-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(139, 111, 71, 0.18), rgba(31, 42, 36, 0.1)),
    linear-gradient(180deg, #eef3ef, #d9d4c4);
  background-image:
    linear-gradient(180deg, rgba(31, 42, 36, 0.15) 0%, rgba(31, 42, 36, 0.45) 100%),
    url("assets/annecy-nord-editorial.webp");
  background-size: cover;
  background-position: center;
}

/* Modifiers par article : image de vignette personnalisée */
.carnet-card-image--mandat {
  background-image:
    linear-gradient(180deg, rgba(31, 42, 36, 0.15) 0%, rgba(31, 42, 36, 0.45) 100%),
    url("assets/mandat.png");
}
.carnet-card-image--erreur {
  background-image:
    linear-gradient(180deg, rgba(31, 42, 36, 0.15) 0%, rgba(31, 42, 36, 0.45) 100%),
    url("assets/erreur.png");
}
.carnet-card-image--balme {
  background-image:
    linear-gradient(180deg, rgba(31, 42, 36, 0.15) 0%, rgba(31, 42, 36, 0.45) 100%),
    url("assets/la-balme-drone.png");
}

.carnet-card-tag {
  position: absolute;
  bottom: 14px;
  left: 14px;
  padding: 7px 14px;
  background: rgba(31, 42, 36, 0.92);
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
}

.carnet-card-content {
  padding: 0 4px;
}

.carnet-card-meta {
  margin: 0 0 14px;
  font-family: Manrope, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8b6f47;
}

.carnet-card-dot {
  margin: 0 0.6em;
  color: #c8b48f;
}

.carnet-card h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  line-height: 1.18;
  color: #1f2a24;
  letter-spacing: -0.005em;
  transition: color 250ms ease;
}

.carnet-card:hover h2 {
  color: #8b6f47;
}

.carnet-card-excerpt {
  margin: 0 0 22px;
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: #4a5450;
}

.carnet-card-cta {
  display: inline-block;
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b6f47;
  transition: transform 250ms ease;
}

.carnet-card:hover .carnet-card-cta {
  transform: translateX(4px);
}

/* Encadré "Bientôt" sous la liste */
.carnet-soon {
  margin-top: clamp(40px, 5vw, 60px);
  padding: clamp(28px, 4vw, 44px);
  background: var(--paper);
  border-left: 3px solid #c8b48f;
  text-align: left;
}

.carnet-soon .eyebrow {
  margin-bottom: 10px;
}

.carnet-soon p {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #4a5450;
}

/* =====================================================
   PAGE ARTICLE INDIVIDUEL
   ===================================================== */

.article-hero {
  position: relative;
  padding: clamp(140px, 16vw, 200px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 76px);
  background: var(--paper);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.article-hero-inner {
  max-width: 800px;
  margin: 0 auto;
}

.article-hero .eyebrow {
  color: #8b6f47;
}

.article-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.12;
  font-weight: 600;
  color: #1f2a24;
  margin: 14px 0 24px;
  letter-spacing: -0.01em;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.article-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6b7570;
}

.article-meta-sep {
  width: 18px;
  height: 1px;
  background: #c8b48f;
}

.article-body {
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 64px) clamp(70px, 9vw, 110px);
  background: var(--white);
}

.article-body-inner {
  max-width: 720px;
  margin: 0 auto;
  font-family: Manrope, sans-serif;
  color: #2a342f;
  font-size: 1.05rem;
  line-height: 1.72;
}

.article-body-inner p {
  margin: 0 0 22px;
}

.article-body-inner .article-lead {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.55;
  font-style: italic;
  color: #1f2a24;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.article-body-inner h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  color: #1f2a24;
  margin: 56px 0 18px;
  letter-spacing: -0.005em;
}

.article-body-inner h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  color: #1f2a24;
  margin: 36px 0 12px;
}

.article-body-inner ul,
.article-body-inner ol {
  padding-left: 22px;
  margin: 0 0 26px;
}

.article-body-inner li {
  margin-bottom: 10px;
}

.article-body-inner strong {
  color: #1f2a24;
  font-weight: 700;
}

.article-body-inner em {
  color: #8b6f47;
  font-style: italic;
}

.article-body-inner blockquote {
  margin: 36px 0;
  padding: 22px 28px;
  border-left: 3px solid #c8b48f;
  background: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.18rem;
  line-height: 1.55;
  color: #1f2a24;
}

.article-body-inner a {
  color: #8b6f47;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body-inner a:hover {
  color: #1f2a24;
}

/* Tableau de chiffres dans l'article */
.article-table-wrap {
  margin: 32px 0;
  overflow-x: auto;
}

.article-source {
  margin: -8px 0 32px !important;
  font-family: Manrope, sans-serif;
  font-size: 0.85rem !important;
  font-style: italic;
  line-height: 1.55;
  color: #6b7570 !important;
  padding: 12px 16px;
  background: rgba(139, 111, 71, 0.06);
  border-left: 2px solid #c8b48f;
}

.article-source a {
  color: #8b6f47;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.article-body-inner table {
  width: 100%;
  border-collapse: collapse;
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
}

.article-body-inner th,
.article-body-inner td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.article-body-inner th {
  font-weight: 700;
  color: #1f2a24;
  background: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-body-inner td {
  color: #2a342f;
}

/* Encadré "À retenir" */
.article-takeaway {
  margin: 44px 0;
  padding: 32px 36px;
  background: linear-gradient(135deg, rgba(139, 111, 71, 0.08), rgba(200, 180, 143, 0.05));
  border: 1px solid rgba(139, 111, 71, 0.2);
}

.article-takeaway p.eyebrow {
  margin-bottom: 14px;
}

.article-takeaway h3 {
  margin-top: 0 !important;
  font-family: var(--serif);
  font-size: 1.35rem;
}

.article-takeaway ul {
  margin: 0;
}

/* Signature de fin d'article */
.article-signature {
  margin: 60px 0 40px;
  padding-top: 36px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 22px;
}

.article-signature-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.article-signature-text strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.18rem;
  color: #1f2a24;
  font-weight: 600;
}

.article-signature-text span {
  font-family: Manrope, sans-serif;
  font-size: 0.86rem;
  color: #6b7570;
}

/* CTA en fin d'article */
.article-cta-band {
  padding: clamp(60px, 7vw, 96px) clamp(20px, 5vw, 64px);
  background: var(--paper);
  text-align: center;
  border-top: 1px solid var(--line);
}

.article-cta-band-inner {
  max-width: 680px;
  margin: 0 auto;
}

.article-cta-band h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 600;
  color: #1f2a24;
  margin: 12px 0 18px;
}

.article-cta-band p {
  font-family: Manrope, sans-serif;
  color: #4a5450;
  margin-bottom: 30px;
  font-size: 1rem;
  line-height: 1.65;
}

.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* =====================================================
   PAGE RÉCUPÉRATION D'ESTIMATION (/estimation/?id=XXX)
   ===================================================== */

.estim-page {
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 64px) clamp(80px, 9vw, 120px);
  background: var(--paper);
  min-height: 70vh;
}

.estim-page-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.estim-block {
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
  background: var(--white);
  border: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 60px);
}

.estim-block .eyebrow {
  color: #8b6f47;
  margin-bottom: 16px;
}

.estim-block h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 600;
  line-height: 1.15;
  color: #1f2a24;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.estim-lead {
  font-family: Manrope, sans-serif;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #4a5450;
  max-width: 520px;
  margin: 0 auto 36px;
}

.estim-note {
  margin: 18px 0 0;
  font-family: Manrope, sans-serif;
  font-size: 0.82rem;
  color: #6b7570;
  line-height: 1.5;
  font-style: italic;
}

.estim-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Bouton large mais avec largeur fixe (plus pro qu'un button-wide full) */
.button-wide-fixed {
  display: inline-block;
  min-width: 280px;
  text-align: center;
}

/* Section recommandation sous la zone principale */
.estim-recommend {
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 48px);
  background: var(--white);
  border-left: 3px solid #c8b48f;
  text-align: left;
  margin-bottom: clamp(36px, 4vw, 56px);
}

.estim-recommend .eyebrow {
  color: #8b6f47;
  margin-bottom: 12px;
}

.estim-recommend h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  font-weight: 600;
  line-height: 1.25;
  color: #1f2a24;
  margin: 0 0 16px;
}

.estim-recommend p {
  font-family: Manrope, sans-serif;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5450;
  margin: 0 0 24px;
}

/* Section contact */
.estim-contact {
  padding: clamp(28px, 3vw, 40px) 0;
  text-align: center;
}

.estim-contact .eyebrow {
  color: #8b6f47;
  margin-bottom: 10px;
}

.estim-contact h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  font-weight: 600;
  color: #1f2a24;
  margin: 0 0 28px;
}

.estim-contact-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .estim-contact-actions {
    grid-template-columns: 1fr;
  }
}

.estim-contact-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform 250ms ease, border-color 250ms ease;
}

.estim-contact-link:hover {
  transform: translateY(-2px);
  border-color: #c8b48f;
}

.estim-contact-label {
  font-family: Manrope, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b6f47;
  margin-bottom: 8px;
}

.estim-contact-value {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: #1f2a24;
  font-weight: 500;
}

/* =====================================================
   PAGE COMMUNE (immobilier-la-balme-de-sillingy.html)
   ===================================================== */

/* Hero commune */
.commune-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(440px, 60vh, 580px);
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 64px) clamp(60px, 8vw, 96px);
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.75), rgba(10, 16, 14, 0.4) 50%, rgba(10, 16, 14, 0.75)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.18), rgba(10, 16, 14, 0.62)),
    url("assets/annecy-nord-editorial.webp") center / cover no-repeat;
}

.commune-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.commune-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
  font-weight: 600;
  line-height: 1.05;
  margin: 16px 0 26px;
  letter-spacing: -0.01em;
}

.commune-hero-sub {
  max-width: 640px;
  margin: 0 auto 32px;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.55;
}

.commune-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* Breadcrumb */
.breadcrumb {
  margin-bottom: 18px;
  font-family: Manrope, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 250ms ease;
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.breadcrumb span[aria-hidden] {
  margin: 0 0.6em;
  color: #c8b48f;
}

/* Sections commune (alternance blanc/paper) */
.commune-section {
  padding: clamp(70px, 9vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--white);
}

.commune-section-alt {
  background: var(--paper);
}

.commune-section-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.commune-section .eyebrow {
  color: #8b6f47;
}

.commune-section h2 {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.18;
  color: #1f2a24;
  margin: 12px 0 26px;
  letter-spacing: -0.005em;
  max-width: 760px;
}

.commune-lead {
  font-family: Manrope, sans-serif;
  font-size: 1.08rem;
  line-height: 1.65;
  color: #4a5450;
  max-width: 760px;
  margin: 0 0 40px;
}

.commune-section p {
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: #2a342f;
  max-width: 760px;
  margin: 0 0 18px;
}

/* Piliers (mon ancrage) : 3 colonnes */
.commune-pillars,
.commune-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  margin-top: clamp(36px, 4vw, 56px);
}

.commune-services {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 880px) {
  .commune-pillars,
  .commune-services {
    grid-template-columns: 1fr;
  }
}

.commune-pillar,
.commune-service {
  padding: 28px 24px;
  background: var(--white);
  border-top: 2px solid #c8b48f;
}

.commune-section-alt .commune-pillar,
.commune-section-alt .commune-service {
  background: var(--paper);
  border-top-color: #8b6f47;
}

.commune-pillar .eyebrow,
.commune-service .eyebrow {
  margin-bottom: 10px;
}

.commune-pillar h3,
.commune-service h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: #1f2a24;
  margin: 0 0 12px;
  line-height: 1.25;
}

.commune-pillar p,
.commune-service p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5450;
  margin: 0;
}

/* Bloc stats marché */
.commune-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  margin: 36px 0 40px;
  padding: 28px clamp(20px, 4vw, 40px);
  background: rgba(139, 111, 71, 0.06);
  border-left: 3px solid #c8b48f;
}

@media (max-width: 768px) {
  .commune-stats {
    grid-template-columns: 1fr;
  }
}

.commune-stat {
  text-align: center;
}

.commune-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  color: #1f2a24;
  line-height: 1.1;
  margin-bottom: 8px;
}

.commune-stat span {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 0.82rem;
  color: #6b7570;
  line-height: 1.4;
}

/* Mention de source discrète sous les chiffres */
.commune-source {
  margin: 8px 0 28px !important;
  font-family: Manrope, sans-serif;
  font-size: 0.78rem !important;
  font-style: italic;
  line-height: 1.55;
  color: #6b7570 !important;
  max-width: 760px;
}

.commune-source a {
  color: #8b6f47;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.commune-source a:hover {
  color: #1f2a24;
}

/* Lien vers article carnet */
.commune-link {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #8b6f47;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 250ms ease;
}

.commune-link:hover {
  color: #1f2a24;
}

/* Quartiers / secteurs */
.commune-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin-top: clamp(28px, 3vw, 40px);
}

@media (max-width: 768px) {
  .commune-areas {
    grid-template-columns: 1fr;
  }
}

.commune-area {
  padding: 26px 28px;
  background: var(--paper);
  border-left: 2px solid #c8b48f;
}

.commune-section-alt .commune-area {
  background: var(--white);
}

.commune-area h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: #1f2a24;
  margin: 0 0 10px;
}

.commune-area p {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #4a5450;
  margin: 0;
}

/* FAQ commune : reprend le style global details/summary du site */
.commune-section details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

.commune-section details summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.18rem;
  font-weight: 600;
  color: #1f2a24;
  list-style: none;
  position: relative;
  padding-right: 36px;
}

.commune-section details summary::-webkit-details-marker {
  display: none;
}

.commune-section details summary::after {
  position: absolute;
  right: 0;
  top: 4px;
  content: "+";
  font-family: Manrope, sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  color: #8b6f47;
  transition: transform 250ms ease;
}

.commune-section details[open] summary::after {
  transform: rotate(45deg);
}

.commune-section details p {
  margin-top: 14px;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #4a5450;
}

/* =====================================================
   SECTION OUTILS DE VALORISATION (home #outils)
   ===================================================== */

.tools-section {
  padding: clamp(80px, 10vw, 140px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.tools-heading {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

.tools-heading .eyebrow {
  color: #8b6f47;
  margin-bottom: 14px;
}

.tools-heading h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 600;
  line-height: 1.18;
  color: #1f2a24;
  margin: 0 0 22px;
  letter-spacing: -0.005em;
}

.tools-heading p {
  font-family: Manrope, sans-serif;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #4a5450;
  margin: 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3vw, 44px);
  max-width: 1200px;
  margin: 0 auto;
}

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

@media (max-width: 600px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
}

.tool-card {
  position: relative;
  padding: 38px 32px 32px;
  background: var(--white);
  border-top: 2px solid #c8b48f;
  transition: transform 350ms cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 350ms ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(31, 42, 36, 0.25);
}

.tool-number {
  display: block;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: 500;
  color: #8b6f47;
  line-height: 1;
  letter-spacing: 0.02em;
}

.tool-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  color: #1f2a24;
  margin: 0 0 14px;
  letter-spacing: -0.005em;
}

.tool-card p {
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a5450;
  margin: 0;
}

.tools-note {
  max-width: 700px;
  margin: clamp(36px, 4vw, 56px) auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #6b7570;
}


/* ============ SPLITTING : animation lettre par lettre des titres ============
   Active une apparition élégante en stagger sur les H1 hero (sauf home, déjà animée).
   Caractères qui montent avec un fondu + déflouté, en cascade.
   Ne s'applique qu'après init JS (.is-splitting-ready) pour éviter le FOUC.
============================================================================== */

[data-splitting] {
  /* Évite le FOUC avant que Splitting ait découpé les caractères */
  visibility: hidden;
}
[data-splitting].splitting {
  visibility: visible;
}

/* Empêche la coupure au milieu d'un mot : Splitting découpe chaque
   lettre en inline-block, ce qui autorisait des retours à la ligne
   entre n'importe quelles lettres ("o / n vend"). On garde chaque
   mot insécable ; les retours ne se font plus qu'entre les mots. */
.splitting .word {
  display: inline-block;
  white-space: nowrap;
}

.splitting .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(6px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--char-index, 0) * 22ms);
  will-change: opacity, transform, filter;
}

.splitting.is-splitting-ready .char {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-splitting] { visibility: visible; }
  .splitting .char {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* ============================================================================
   IMAGE REVEAL AU SCROLL
   Effet rideau : l'image est masquée par clip-path, se révèle quand elle entre
   dans le viewport. Style Sotheby's/Coldwell, très luxe minimal.
   ============================================================================ */

.reveal-image {
  position: relative;
  overflow: hidden;
}

.reveal-image img,
.reveal-image picture,
.reveal-image > video {
  display: block;
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition:
    clip-path 1.3s cubic-bezier(0.7, 0, 0.3, 1),
    transform 1.6s cubic-bezier(0.7, 0, 0.3, 1);
  will-change: clip-path, transform;
}

.reveal-image.is-revealed img,
.reveal-image.is-revealed picture,
.reveal-image.is-revealed > video {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-image img,
  .reveal-image picture,
  .reveal-image > video {
    clip-path: none;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   STAGGER SUR GRILLES
   Les enfants d'une grille apparaissent un par un avec un délai croissant.
   Délai contrôlé par --stagger-index défini par JS sur chaque enfant.
   ============================================================================ */

.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  /* Délai croissant pour les 7 premiers, puis cap pour éviter les cascades
     trop longues sur les grilles >8 items (ex: 29 biens vendus). */
  transition-delay: calc(min(var(--stagger-index, 0), 7) * 50ms);
  will-change: opacity, transform;
}

.stagger-children.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   SALE-CARD : pas d'animation au scroll
   29 items + Lenis = jank. On affiche les cards directement, sans transition
   d'apparition. La grille reste visible dès le load.
   ============================================================================ */
.sale-card.reveal {
  opacity: 1;
  transform: none;
}

/* ============================================================================
   SCROLL PROGRESS BAR
   Fine ligne dorée en haut de page qui se remplit au scroll.
   Style Medium/NYTimes : très discret, signature pro.
   ============================================================================ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 100;
  pointer-events: none;
  will-change: transform;
  transition: transform 80ms linear;
}

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

/* ============================================================================
   SECTION DIVIDERS sur articles du carnet
   Trait doré qui se dessine sous les H2 des articles quand ils entrent
   dans le viewport. Étend le système existant aux articles.
   ============================================================================ */
.article-body-inner h2 {
  position: relative;
  padding-bottom: 14px;
}

.article-body-inner h2::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--gold), rgba(183, 154, 98, 0));
  transition: width 1100ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.article-body-inner h2.is-divided::after {
  width: 64px;
}

@media (prefers-reduced-motion: reduce) {
  .article-body-inner h2.is-divided::after { width: 64px; transition: none; }
}

/* ============================================================================
   BACK TO TOP : bouton flottant doré
   Apparaît après ~1 écran de scroll. Click → scroll smooth vers le haut.
   Solution universelle pour remonter rapidement, surtout sur mobile.
   ============================================================================ */
.back-to-top {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--gold-light);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 24px rgba(20, 32, 28, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 90;
  opacity: 0;
  transform: translateY(20px) scale(0.85);
  pointer-events: none;
  transition:
    opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.back-to-top:hover {
  background: var(--accent-strong);
  transform: translateY(-2px) scale(1);
}

.back-to-top:active {
  transform: translateY(0) scale(0.96);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease; transform: none !important; }
}

/* ============================================================================
   TIMELINE MÉTHODE : remplissage au scroll
   Quand une étape entre dans le viewport, son marker se remplit en doré
   (même style qu'au hover). Effet de "validation séquentielle" au scroll.
   ============================================================================ */
.timeline-step.is-revealed .timeline-marker {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(183, 154, 98, 0.12);
}

.timeline-step.is-revealed .timeline-marker span {
  color: var(--white);
}

.timeline-step.is-revealed .timeline-content h3 {
  color: var(--accent);
}

.timeline-step.is-revealed .timeline-tag {
  background: rgba(183, 154, 98, 0.13);
  border-color: rgba(183, 154, 98, 0.38);
}

/* ============================================================================
   EFFETS VIGNETTES CARNET : zoom + lift au hover
   Sur les cards d'articles du carnet, l'image zoom légèrement et la card
   se soulève au hover. Effet premium type Sotheby's.
   ============================================================================ */
.carnet-card-image {
  transition:
    background-size 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.4s ease;
  background-size: cover;
}

/* Zoom au survol UNIQUEMENT sur appareils à vrai pointeur (desktop).
   Sur mobile/tactile, le :hover restait collé après un tap et la
   transition background-size cover->112% saccadait (effet "zoom
   bizarre qui bugge"). On le désactive donc sur tactile. */
@media (hover: hover) and (pointer: fine) {
  .carnet-card-link:hover .carnet-card-image,
  .carnet-card-link:focus-visible .carnet-card-image {
    background-size: 112% auto;
    filter: brightness(1.04) saturate(1.05);
  }
}

.carnet-card {
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s ease;
}

.carnet-card:hover {
  transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
  .carnet-card,
  .carnet-card-image {
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================================
   GOLD UNDERLINE ANIMÉ sur les liens du nav header
   Au hover : trait doré 1px se dessine de gauche à droite.
   À l'unhover : se rétracte de gauche à droite (effet éditorial magazine).
   Astuce CSS : transform-origin bascule de "right" (état normal) à "left"
   (hover) → scaleX s'anime depuis la gauche en entrée, depuis la droite
   en sortie.
   ============================================================================ */
.site-header nav a {
  position: relative;
  padding-bottom: 6px;
}

.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Sur hero sombre, trait en doré clair pour rester lisible sur fond foncé */
body.has-dark-hero .site-header:not(.is-scrolled) nav a::after {
  background: var(--gold-light);
}

/* On désactive le translateY -1px existant sur les liens nav pour ne pas
   doubler les effets (l'underline doré suffit, c'est plus pro). */
.site-header nav a:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header nav a::after { transition: none; }
}

/* ============================================================================
   TOOLS BENTO : refonte visuelle de la section outils en showcase visuel
   Chaque card devient un bento haut avec image en background, texte en bas
   sur gradient sombre. Au hover : zoom subtil + overlay s'allège (révèle
   l'image). Infrastructure prête pour intégrer des vidéos plus tard.
   ============================================================================ */
.tools-bento {
  gap: clamp(20px, 2vw, 28px);
}

.tools-bento .tool-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  padding: 0;
  background: var(--ink);
  border-top: none;
  border-radius: var(--radius-md);
  isolation: isolate;
  cursor: pointer;
}

.tool-card-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.6s ease;
  will-change: transform, filter;
}

.tool-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 32, 28, 0.05) 0%,
    rgba(20, 32, 28, 0.28) 45%,
    rgba(20, 32, 28, 0.85) 100%
  );
  transition: background 0.5s ease;
  pointer-events: none;
}

.tool-card-content {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 34px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  color: var(--white);
}

.tools-bento .tool-card .tool-number {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1;
  letter-spacing: 0.04em;
}

.tools-bento .tool-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.8vw, 1.55rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 10px;
}

.tools-bento .tool-card p {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

/* Annule le hover lift hérité du style original (.tool-card:hover translateY -4px) */
.tools-bento .tool-card:hover {
  transform: none;
  box-shadow: 0 22px 50px -20px rgba(31, 42, 36, 0.4);
}

/* Au hover : zoom subtil + overlay légèrement plus clair pour révéler l'image */
.tools-bento .tool-card:hover .tool-card-media,
.tools-bento .tool-card:focus-within .tool-card-media {
  transform: scale(1.08);
  filter: brightness(1.06);
}

.tools-bento .tool-card:hover .tool-card-overlay,
.tools-bento .tool-card:focus-within .tool-card-overlay {
  background: linear-gradient(
    180deg,
    rgba(20, 32, 28, 0.05) 0%,
    rgba(20, 32, 28, 0.18) 45%,
    rgba(20, 32, 28, 0.72) 100%
  );
}

/* Infrastructure vidéo : quand une <video> est ajoutée dans la card, elle
   est cachée par défaut et apparaît au play. À toi d'ajouter les vidéos
   plus tard avec le pattern : <video src="..." muted loop playsinline></video> */
.tools-bento .tool-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tools-bento .tool-card.is-playing video {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .tool-card-media,
  .tool-card-overlay { transition: none; }
  .tools-bento .tool-card:hover .tool-card-media { transform: none; }
}

/* ============================================================================
   TOOLS BENTO : carte avec vidéo YouTube (lightbox au click)
   La card avec data-youtube affiche une icône Play et est cliquable.
   Au click, une modale lightbox s'ouvre avec l'iframe YouTube en autoplay.
   ============================================================================ */
.tool-card--has-video {
  cursor: pointer;
}

.tool-card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 36px rgba(20, 32, 28, 0.32);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease;
  pointer-events: none;
}

.tool-card-play svg {
  width: 26px;
  height: 26px;
  fill: var(--accent);
  margin-left: 4px; /* compensation visuelle pour centrer le triangle */
}

.tool-card--has-video:hover .tool-card-play,
.tool-card--has-video:focus-visible .tool-card-play {
  transform: translate(-50%, -50%) scale(1.06);
  background: var(--white);
}

/* ============================================================================
   VIDEO LIGHTBOX (modale YouTube)
   ============================================================================ */
.video-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 16, 14, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease;
  padding: clamp(20px, 4vw, 60px);
}

.video-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.video-lightbox-frame {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.video-lightbox.is-open .video-lightbox-frame {
  transform: scale(1);
}

.video-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-lightbox-close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}

.video-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .video-lightbox,
  .video-lightbox-frame,
  .tool-card-play { transition: none; }
}

/* ============================================================================
   TOOLS BENTO : slideshow auto sur la card 01 (Photos HDR)
   Les 6 photos HDR s'enchaînent en fondu toutes les 4 secondes (24s total).
   Chaque image visible ~3.3s avec ~0.7s de crossfade.
   ============================================================================ */
.tool-card--slideshow {
  position: relative;
}

.tool-card--slideshow .slideshow-frame {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: slideshow-fade 24s infinite;
  will-change: opacity;
}

/* Chaque image démarre son cycle 4s après la précédente */
.tool-card--slideshow .slideshow-frame:nth-child(1) { animation-delay: 0s; }
.tool-card--slideshow .slideshow-frame:nth-child(2) { animation-delay: 4s; }
.tool-card--slideshow .slideshow-frame:nth-child(3) { animation-delay: 8s; }
.tool-card--slideshow .slideshow-frame:nth-child(4) { animation-delay: 12s; }
.tool-card--slideshow .slideshow-frame:nth-child(5) { animation-delay: 16s; }
.tool-card--slideshow .slideshow-frame:nth-child(6) { animation-delay: 20s; }

@keyframes slideshow-fade {
  /* Visible 0 → 16.6% du cycle (≈4s), avec fondu entrée/sortie */
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  16%  { opacity: 1; }
  19%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Au hover de la card, on désactive le zoom hérité du système (les
   photos défilent déjà, pas besoin de zoom en plus) */
.tool-card--slideshow:hover .slideshow-frame {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .tool-card--slideshow .slideshow-frame {
    animation: none;
    opacity: 0;
  }
  .tool-card--slideshow .slideshow-frame:nth-child(1) {
    opacity: 1; /* fallback : juste la première image visible */
  }
}

/* ============================================================================
   TOOLS BENTO : carte before/after pour le home staging
   Un wipe automatique passe de gauche à droite, révélant la version
   "après" sur la version "avant". Un trait doré suit le wipe.
   Cycle 8s en boucle (pause sur chaque état, transition douce entre).
   ============================================================================ */
.tool-card--before-after {
  position: relative;
}

/* "Avant" = couche de fond, toujours visible */
.tool-card--before-after .ba-before {
  position: absolute;
  inset: 0;
}

/* "Après" = couche par-dessus, révélée par clip-path animé */
.tool-card--before-after .ba-after {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0); /* invisible au début (cropped à 0% de largeur) */
  animation: ba-wipe 9s ease-in-out infinite;
  will-change: clip-path;
}

@keyframes ba-wipe {
  0%, 8%    { clip-path: inset(0 100% 0 0); } /* on voit "avant" pendant ~0.7s */
  42%, 58%  { clip-path: inset(0 0% 0 0); }   /* "après" pleinement visible ~1.5s */
  92%, 100% { clip-path: inset(0 100% 0 0); } /* retour à "avant" */
}

/* Divider vertical doré qui suit la ligne du wipe */
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(226, 207, 170, 0) 0%,
    rgba(226, 207, 170, 0.9) 20%,
    rgba(226, 207, 170, 0.9) 80%,
    rgba(226, 207, 170, 0) 100%
  );
  left: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(226, 207, 170, 0.5);
  animation: ba-divider-slide 9s ease-in-out infinite;
  will-change: left;
}

@keyframes ba-divider-slide {
  0%, 8%    { left: 0%; opacity: 0; }
  12%       { opacity: 1; }
  42%, 58%  { left: 100%; opacity: 1; }
  88%       { opacity: 1; }
  92%, 100% { left: 0%; opacity: 0; }
}

/* Labels "Avant" / "Après" en overlay coin haut */
.ba-label {
  position: absolute;
  top: 14px;
  z-index: 2;
  padding: 5px 10px;
  background: rgba(20, 32, 28, 0.78);
  color: var(--gold-light);
  font-family: Manrope, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 3px;
  pointer-events: none;
}

.ba-label--before { left: 14px; }
.ba-label--after { right: 14px; }

/* Au hover sur la card, on pause l'animation pour laisser le visiteur observer */
.tool-card--before-after:hover .ba-after,
.tool-card--before-after:hover .ba-divider {
  animation-play-state: paused;
}

/* Annule le hover zoom hérité (pas pertinent ici) */
.tool-card--before-after:hover .ba-before,
.tool-card--before-after:hover .ba-after {
  transform: none;
  filter: none;
}

@media (prefers-reduced-motion: reduce) {
  .tool-card--before-after .ba-after,
  .ba-divider {
    animation: none;
  }
  .tool-card--before-after .ba-after {
    clip-path: inset(0 50% 0 0); /* statique : moitié avant / moitié après */
  }
  .ba-divider { left: 50%; opacity: 1; }
}

/* ============================================================================
   iOS SAFE AREA : fond sombre sur html
   Sur mobile, la zone safe-area top (status bar iOS) montre l'élément
   html en arrière du body. On force html en sombre pour que cette zone
   soit cohérente avec les heros sombres dominants du site. Le body
   garde son background paper qui couvre tout le contenu visible normal.
   ============================================================================ */
@media (max-width: 980px) {
  html {
    background-color: var(--ink);
  }
  /* Fond sombre UNIQUEMENT derrière le hero (filet de sécurité pendant
     le chargement de l'image). Le body reste clair (paper) pour que les
     sections suivantes (avis, etc.) gardent leur fond clair d'origine. */
  body.has-dark-hero .hero {
    background-color: var(--ink);
  }
}

/* ============================================================================
   UPGRADE PREMIUM #1 : DROP CAPS ÉDITORIAUX
   Première lettre des paragraphes intro en serif doré oversize, qui
   descend sur 3 lignes. Signature visuelle absolue de la presse luxe
   (Vogue, AD, Elle Décoration). Pur CSS, zéro JS, zéro impact perf.
   Cible : paragraphes intro des articles + 1er paragraphe À propos.
   ============================================================================ */
.article-lead::first-letter,
.about-editorial-col p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: clamp(4.4rem, 7.5vw, 6.2rem);
  line-height: 0.86;
  font-weight: 600;
  color: #8b6f47;
  margin: 6px 14px -4px 0;
  padding: 0;
}

/* Sur mobile très étroit (<480px), on réduit le drop cap pour qu'il
   garde de l'élégance sans dominer la lecture. */
@media (max-width: 480px) {
  .article-lead::first-letter,
  .about-editorial-col p:first-of-type::first-letter {
    font-size: 3.4rem;
    margin-right: 10px;
  }
}

/* ============================================================================
   UPGRADE PREMIUM #2 : PULL QUOTE ÉDITORIAL (avis vedette)
   Citation client mise en scène plein largeur avec guillemets oversize
   dorés. Style Monocle / Vogue mise en page double-page. À placer dans
   la section #avis, juste avant la grille des review-cards.
   ============================================================================ */
.pull-quote {
  position: relative;
  max-width: 980px;
  margin: clamp(48px, 7vw, 88px) auto clamp(56px, 8vw, 96px);
  padding: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
  text-align: center;
}

.pull-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(-12px, -1vw, 0px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: clamp(8rem, 14vw, 13rem);
  line-height: 1;
  color: rgba(139, 111, 71, 0.18);
  pointer-events: none;
  user-select: none;
}

.pull-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--accent-strong, #1f2a24);
}

.pull-quote cite {
  display: block;
  margin-top: clamp(20px, 3vw, 32px);
  font-family: Manrope, sans-serif;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8b6f47;
}

.pull-quote-divider {
  display: block;
  width: 56px;
  height: 1px;
  margin: clamp(18px, 2vw, 24px) auto 0;
  background: linear-gradient(90deg, transparent, #c8a96a, transparent);
}

/* ============================================================================
   UPGRADE PREMIUM #3 : 95% en TYPOGRAPHIE MONUMENTALE (premier item)
   Le 95% est le chiffre signature d'Elric. On le met encore plus en
   avant : italique serif déclaratif et amplitude max. Les deux autres
   chiffres restent en romain pour créer un contraste éditorial.
   (La taille de base a déjà été augmentée plus haut : 3.8 -> 6.4rem.)
   ============================================================================ */
.hero-proof-inner .proof-item:first-child .proof-value {
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(4.6rem, 8vw, 8rem);
}

/* Grille des avis : si la dernière carte est seule sur sa ligne
   (nombre impair de cartes en 2 colonnes), elle prend toute la
   largeur pour ne pas paraître orpheline. */
.reviews-grid .review-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* ============================================
   HERO CINÉMATIQUE SCROLL-DRIVEN
   ============================================ */

.hero-cine {
  position: relative;
  width: 100%;
  height: 350vh;
  background: var(--ink, #0a100e);
  margin-top: 0;
}

.hero-cine-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--ink, #0a100e);
}

.hero-cine-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-cine-welcome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1);
  background: linear-gradient(180deg, rgba(10,16,14,0) 0%, rgba(10,16,14,0.45) 100%);
  padding: 0 24px;
}

.hero-cine-welcome.is-visible {
  opacity: 1;
}

.hero-cine-welcome-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  font-size: clamp(2.6rem, 7vw, 6rem);
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 32px rgba(0,0,0,0.55);
  margin: 0;
  transform: translateY(24px);
  transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  line-height: 1.1;
}

.hero-cine-welcome.is-visible .hero-cine-welcome-text {
  transform: translateY(0);
}

/* Petit indice de scroll en bas, visible au tout début */
.hero-cine-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  opacity: 1;
  transition: opacity 400ms ease-out;
  animation: heroCineHintBounce 2.4s ease-in-out infinite;
}

.hero-cine.is-scrolling .hero-cine-scroll-hint {
  opacity: 0;
}

@keyframes heroCineHintBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* Fondu vers le hero classique qui suit */
.hero-cine + .hero {
  margin-top: -100vh;
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 900ms ease-out;
}

.hero-cine.is-finished + .hero {
  opacity: 1;
}

/* Tablette et mobile (< 1024px) : on masque le hero cinématique
   et on restaure le hero classique en affichage normal */
@media (max-width: 1023px) {
  .hero-cine {
    display: none;
  }
  .hero-cine + .hero {
    margin-top: 0;
    opacity: 1;
    position: static;
    z-index: auto;
  }
}

/* Préférence accessibilité : pas d'animations, masquage du cinématique */
@media (prefers-reduced-motion: reduce) {
  .hero-cine {
    display: none;
  }
  .hero-cine + .hero {
    margin-top: 0;
    opacity: 1;
    position: static;
    z-index: auto;
  }
}

/* =====================================================
   PAGE ESTIMATION (refonte premium éditoriale)
   ===================================================== */

/* Force le respect de l'attribut HTML "hidden" même quand
   les sections ont un "display" explicite (sinon hidden est ignoré) */
.estim-hero[hidden],
.estim-invalid[hidden],
#estim-content-wrap[hidden] { display: none !important; }

/* === Hero plein écran === */
.estim-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 64px) clamp(80px, 10vw, 120px);
  overflow: hidden;
  color: var(--white);
}

.estim-hero::before {
  position: absolute;
  inset: -8% 0 0;
  z-index: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(10, 16, 14, 0.65), rgba(10, 16, 14, 0.40) 50%, rgba(10, 16, 14, 0.65)),
    linear-gradient(180deg, rgba(10, 16, 14, 0.25), rgba(10, 16, 14, 0.62)),
    url("../assets/annecy-nord-editorial.webp") center / cover no-repeat;
  animation: ken-burns-hero 22s ease-in-out infinite alternate;
  transform-origin: center center;
}

.estim-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10, 16, 14, 0.58));
}

.estim-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.estim-hero-eyebrow {
  color: var(--gold-light) !important;
  margin-bottom: 18px;
}

.estim-hero-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: var(--gold-light);
  font-weight: 500;
  letter-spacing: 0.04em;
  margin: 0 0 28px;
  display: inline-block;
  position: relative;
  padding: 0 38px;
}

.estim-hero-signature::before,
.estim-hero-signature::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 26px;
  height: 1px;
  background: var(--gold-light);
  opacity: 0.6;
}

.estim-hero-signature::before { left: 0; }
.estim-hero-signature::after { right: 0; }

.estim-hero-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.6vw, 5rem);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 36px;
  color: var(--white);
  letter-spacing: -0.01em;
}

.estim-hero-line {
  display: block;
}

.estim-hero-line em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}

.estim-hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.45vw, 1.22rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  max-width: 620px;
  margin: 0 auto 44px;
}

.estim-hero-cta {
  min-width: 320px;
  font-size: 1rem;
  padding: 18px 36px;
}

.estim-hero-note {
  margin: 22px 0 0;
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  font-style: italic;
}

.estim-hero-scroll-hint {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65);
  font-family: Manrope, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: scroll-hint-bounce 2.4s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.65; }
  50%      { transform: translate(-50%, 6px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .estim-hero::before { animation: none; }
  .estim-hero-scroll-hint { animation: none; }
}

/* === État invalide === */
.estim-invalid {
  padding: clamp(120px, 14vw, 180px) clamp(20px, 5vw, 64px) clamp(80px, 10vw, 120px);
  background: var(--paper);
  min-height: 70vh;
  display: grid;
  place-items: center;
}

.estim-invalid-inner {
  max-width: 580px;
  text-align: center;
  padding: clamp(40px, 5vw, 64px);
  background: var(--white);
  border: 1px solid var(--line);
}

.estim-invalid h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 18px;
}

/* === Section "Ce que contient votre estimation" === */
.estim-pillars {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.estim-pillars-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.estim-section-eyebrow {
  color: var(--gold-dark) !important;
  margin-bottom: 18px;
}

.estim-section-h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 56px;
  letter-spacing: -0.01em;
}

.estim-section-h2 em {
  font-style: italic;
  color: var(--accent);
}

.estim-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
  text-align: left;
}

.estim-pillar {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 350ms cubic-bezier(.22,.61,.36,1), border-color 350ms ease, box-shadow 350ms ease;
}

.estim-pillar:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 14px 40px -22px rgba(10, 16, 14, 0.18);
}

.estim-pillar-num {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--gold-dark);
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.estim-pillar h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  line-height: 1.3;
}

.estim-pillar p {
  font-family: Manrope, sans-serif;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
}

/* === Pull quote éditoriale === */
.estim-pullquote {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--ink);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.estim-pullquote-inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
}

.estim-pullquote-mark {
  display: block;
  font-family: var(--serif);
  font-size: clamp(8rem, 16vw, 14rem);
  line-height: 0.7;
  color: var(--gold);
  opacity: 0.18;
  font-style: italic;
  margin-bottom: -30px;
  font-weight: 500;
  user-select: none;
}

.estim-pullquote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.05rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--white);
  margin: 0 0 32px;
  letter-spacing: -0.005em;
}

.estim-pullquote-author {
  font-family: Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.estim-pullquote-trait {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--gold-light);
  opacity: 0.7;
}

/* === Section "Et maintenant ?" === */
.estim-steps {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.estim-steps-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.estim-steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 28px;
  text-align: left;
}

.estim-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: transform 350ms cubic-bezier(.22,.61,.36,1), border-color 350ms ease;
}

.estim-step:hover {
  border-color: var(--gold);
  transform: translateX(4px);
}

.estim-step-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--gold);
  font-weight: 500;
  min-width: 52px;
  text-align: center;
}

.estim-step-content h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 10px;
  line-height: 1.3;
}

.estim-step-content p {
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 560px) {
  .estim-step {
    padding: 22px 22px;
    gap: 20px;
  }
  .estim-step-num {
    min-width: 44px;
  }
}

/* === Recommandation premium (bento) === */
.estim-recommend-premium {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--ink);
  color: var(--white);
}

.estim-recommend-premium .estim-section-h2 {
  color: var(--white);
  text-align: center;
}

.estim-recommend-premium .estim-section-eyebrow {
  color: var(--gold-light) !important;
}

.estim-recommend-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.estim-recommend-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  text-align: left;
  margin-top: 28px;
  padding: clamp(40px, 5vw, 64px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(226, 207, 170, 0.18);
}

@media (max-width: 760px) {
  .estim-recommend-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.estim-recommend-figure {
  text-align: center;
  padding: 20px 0;
  border-right: 1px solid rgba(226, 207, 170, 0.18);
  padding-right: clamp(20px, 4vw, 60px);
}

@media (max-width: 760px) {
  .estim-recommend-figure {
    border-right: none;
    border-bottom: 1px solid rgba(226, 207, 170, 0.18);
    padding: 0 0 32px;
  }
}

.estim-recommend-overline {
  font-family: Manrope, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin: 0 0 14px;
}

.estim-recommend-value {
  font-family: var(--serif);
  font-size: clamp(4.4rem, 9vw, 7.5rem);
  font-weight: 500;
  line-height: 1;
  color: var(--gold-light);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
}

.estim-recommend-value em {
  font-style: italic;
}

.estim-recommend-value span {
  font-family: var(--serif);
  font-style: normal;
  font-size: 0.45em;
  font-weight: 400;
  color: var(--gold-light);
  vertical-align: top;
  margin-left: 4px;
}

.estim-recommend-caption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

.estim-recommend-text p {
  font-family: Manrope, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 20px;
}

.estim-recommend-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
}

.estim-recommend-list li {
  position: relative;
  padding-left: 24px;
  font-family: Manrope, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.estim-recommend-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 14px;
  height: 1px;
  background: var(--gold);
}

.estim-recommend-list strong {
  color: var(--gold-light);
  font-weight: 600;
}

.estim-recommend-bonus {
  font-style: italic;
  font-size: 0.88rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 24px !important;
}

/* === Contact premium (avec portrait) === */
.estim-contact-premium {
  padding: clamp(80px, 10vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--paper);
}

.estim-contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 760px) {
  .estim-contact-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.estim-contact-portrait {
  position: relative;
}

.estim-contact-portrait::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  right: -16px;
  bottom: -16px;
  border: 1px solid var(--gold);
  z-index: 0;
}

.estim-contact-portrait img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 760px) {
  .estim-contact-portrait {
    max-width: 280px;
    margin: 0 auto;
  }
}

.estim-contact-body .estim-section-h2 {
  margin-bottom: 22px;
}

.estim-contact-message {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 36px;
}

.estim-contact-actions-premium {
  display: grid;
  gap: 16px;
}

.estim-contact-link-premium {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform 350ms cubic-bezier(.22,.61,.36,1), border-color 350ms ease, box-shadow 350ms ease;
}

.estim-contact-link-premium:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 14px 40px -22px rgba(10, 16, 14, 0.18);
}

.estim-contact-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--gold-dark);
  flex-shrink: 0;
}

.estim-contact-link-premium .estim-contact-label {
  display: block;
  font-family: Manrope, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 4px;
}

.estim-contact-link-premium .estim-contact-value {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 480px) {
  .estim-hero-cta { min-width: 100%; }
  .estim-contact-link-premium { padding: 18px 20px; gap: 14px; }
}