/* =========================================================
   Logements Amsterdam — Chasseurs d'appartements à Amsterdam
   Palette chaleureuse, typographie soignée, design accueillant
   ========================================================= */

/* ---------- Polices auto-hébergées (variable fonts, subset latin) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/inter-var.woff2') format('woff2');
}

/* ---------- Custom properties ---------- */
:root {
  /* Couleurs principales — chaleureuses, inspirées d'Amsterdam */
  --cream: #fbf6ef;
  --cream-warm: #f6ecdc;
  --cream-deep: #efe2cd;
  --terracotta: #d97757;
  --terracotta-dark: #b85f42;
  --terracotta-light: #f4d3c2;
  --ink: #2b2118;
  --ink-soft: #4a3a2c;
  --ink-muted: #7a6957;
  --line: #e8dcc8;
  --gold: #c8965a;
  --green-soft: #5a7d65;
  --white: #ffffff;

  /* Ombres douces */
  --shadow-sm: 0 2px 6px rgba(43, 33, 24, 0.06);
  --shadow-md: 0 8px 24px rgba(43, 33, 24, 0.08);
  --shadow-lg: 0 20px 50px rgba(43, 33, 24, 0.12);
  --shadow-card: 0 4px 14px rgba(43, 33, 24, 0.07);

  /* Typo */
  --serif: 'Fraunces', 'Georgia', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --max: 1200px;
  --gutter: clamp(1rem, 3vw, 2rem);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* `overflow-x: clip` sur la racine : le menu mobile fermé est poussé hors écran
   à droite et faisait défiler toute la page latéralement. `clip` plutôt que
   `hidden`, qui casserait le header en position sticky. */
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: clip; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Ceinture et bretelles contre le défilement latéral sur mobile : `clip`
     plutôt que `hidden`, qui casserait le header en position sticky. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--terracotta-dark); text-decoration: none; transition: color .2s; }
a:hover { color: var(--terracotta); }
button { font: inherit; cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  /* Répartit les mots sur des lignes de longueur voisine : un titre long
     ne finit plus sur un mot orphelin, et garde la même allure qu'un court. */
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 2.6vw + 1rem, 3rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 1.6vw + 0.85rem, 2.3rem); }
h3 { font-size: clamp(1.15rem, 0.6vw + 0.95rem, 1.4rem); }
h4 { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; color: var(--ink); }

/* « Logements Amsterdam » ne se coupe jamais en deux lignes, où qu'il apparaisse. */
.nowrap { white-space: nowrap; }

.accent {
  color: var(--terracotta);
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1.2rem;
}

.lead {
  font-size: clamp(1.05rem, 1.3vw, 1.18rem);
  color: var(--ink-soft);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: clamp(4rem, 8vw, 7rem) 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}
.section-head .lead { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border-radius: 100px;
  font-weight: 600;
  font-size: 0.97rem;
  font-family: var(--sans);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s;
  white-space: nowrap;
  text-align: center;
}
.btn-primary {
  background: var(--terracotta);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(217, 119, 87, 0.35);
}
.btn-primary:hover {
  background: var(--terracotta-dark);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(217, 119, 87, 0.45);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-2px);
}
.btn-sm { padding: 0.6rem 1.2rem; font-size: 0.9rem; }
.btn-block { display: flex; width: 100%; }

/* ---------- Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow .3s, padding .3s;
}
/* Fond flouté porté par un pseudo-élément. Posé sur .header, le backdrop-filter en
   faisait le bloc conteneur du menu mobile (position: fixed) : le menu se calait sur
   l'en-tête au lieu de l'écran et, ouvert en bas de page, restait hors de vue. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(251, 246, 239, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.header.scrolled {
  box-shadow: var(--shadow-sm);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Écart minimum entre le logo (insécable) et la navigation. */
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ink);
  font-weight: 600;
}
.logo:hover { color: var(--ink); }
.logo-icon { font-size: 1.8rem; }
.logo {
  flex: 0 0 auto;
}
.logo-text {
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.15;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
.logo-text small {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 1.8vw, 1.9rem);
}
.nav a {
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 0.97rem;
  white-space: nowrap;
}
.nav a:hover { color: var(--terracotta); }
.nav a.btn-primary { color: var(--white); }

/* Sélecteur de langue */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--cream-warm);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  padding: 0.35rem 0.75rem;
  border-radius: 100px;
  transition: background .2s, color .2s;
  line-height: 1;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.active {
  background: var(--ink);
  color: var(--cream);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .3s;
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--terracotta-light) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  position: relative;
  z-index: 1;
  padding-bottom: 5rem;
}
.hero-content h1 {
  margin-bottom: 1.5rem;
  max-width: 14ch;
}
.hero-content .lead {
  margin-bottom: 2rem;
  max-width: 540px;
}
.hero-cta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
  font-weight: 500;
}
.hero-trust span { font-size: 1.2rem; }

.hero-visual {
  position: relative;
  height: 520px;
}
.hero-card {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
}
.hero-card-1 {
  top: 30px;
  left: 0;
  width: 270px;
  display: flex;
  gap: 1rem;
  align-items: center;
  animation: float 6s ease-in-out infinite;
}
.hero-card-2 {
  top: 200px;
  right: 0;
  width: 280px;
  animation: float 7s ease-in-out infinite 1s;
}
.hero-card-3 {
  bottom: 30px;
  left: 50px;
  width: 260px;
  display: flex;
  gap: 1rem;
  align-items: center;
  animation: float 5.5s ease-in-out infinite 0.5s;
}
.hero-card-img {
  font-size: 2.2rem;
  background: var(--cream-warm);
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hero-card-text strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.hero-card-text small,
.hero-card-2 small {
  color: var(--ink-muted);
  font-size: 0.82rem;
}
.hero-card-2 p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  margin: 0.5rem 0;
  font-size: 1.05rem;
}
.hero-card-stars { color: var(--gold); font-size: 1rem; letter-spacing: 2px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero-bottom {
  background: var(--cream-warm);
  border-top: 1px solid var(--line);
  padding: 2rem 0;
}
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center;
}
.hero-stats div { display: flex; flex-direction: column; gap: 0.3rem; }
.hero-stats strong {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  color: var(--terracotta);
  font-weight: 500;
}
.hero-stats span {
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* ---------- About ---------- */
.about {
  background: var(--cream);
}
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.about-photo-wrapper {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--cream-deep);
  box-shadow: var(--shadow-lg);
}
.about-photo-wrapper picture { display: block; width: 100%; height: 100%; }
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--white);
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.about-badge span { font-size: 1.3rem; }
.about-badge small {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink);
}

.about-content h2 { margin-bottom: 1.2rem; }
.about-content p { margin-bottom: 1.1rem; }

.about-values {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.value {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.value-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  background: var(--cream-warm);
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.value strong {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.value p { margin: 0; font-size: 0.95rem; color: var(--ink-muted); }

/* ---------- Accompagnement (ex-Services) ---------- */
.services { background: var(--cream-warm); }
/* ---------- Méthode ---------- */
.method { background: var(--cream); position: relative; }
.steps {
  max-width: 850px;
  margin: 0 auto;
  position: relative;
  counter-reset: step;
}
.steps::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-light));
  border-radius: 2px;
}
.step {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  position: relative;
}
.step:last-child { margin-bottom: 0; }
.step-num {
  flex-shrink: 0;
  width: 58px;
  height: 58px;
  background: var(--terracotta);
  color: var(--white);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  box-shadow: 0 0 0 8px var(--cream), 0 6px 18px rgba(217, 119, 87, 0.35);
  position: relative;
  z-index: 1;
}
.step-body {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  flex: 1;
}
.step-body h3 { margin-bottom: 0.5rem; }

/* ---------- Why ---------- */
.why {
  background: linear-gradient(180deg, var(--cream-warm) 0%, var(--cream-deep) 100%);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.why-card {
  background: var(--white);
  padding: 2rem 1.7rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  transition: transform .3s;
}
.why-card:hover { transform: translateY(-4px); }
.why-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: var(--terracotta-light);
  border-radius: 14px;
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.why-card h3 { margin-bottom: 0.5rem; font-size: 1.2rem; }
.why-card p { font-size: 0.96rem; color: var(--ink-muted); margin: 0; }

/* ---------- Section "Derniers conseils" (home → blog) ---------- */
.home-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.home-blog-card {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--white);
  padding: 1.8rem 1.6rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  transition: transform .3s, box-shadow .3s;
  color: var(--ink);
}
.home-blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--ink); }
.home-blog-cat {
  align-self: flex-start;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  padding: 0.28rem 0.7rem;
  border-radius: 100px;
}
.home-blog-card h3 { font-size: 1.12rem; line-height: 1.35; margin: 0; font-family: var(--serif); }
.home-blog-more { margin-top: auto; font-weight: 600; color: var(--terracotta-dark); font-size: 0.9rem; }
.home-blog-all { text-align: center; margin-top: 2rem; }

@media (max-width: 980px) { .home-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  .home-blog-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 1rem; }
}

/* ---------- Testimonials ---------- */
.testimonials { background: var(--cream); }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.testimonial {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--line);
  position: relative;
}
.testimonial::before {
  content: '“';
  position: absolute;
  top: -10px;
  left: 24px;
  font-family: var(--serif);
  font-size: 5rem;
  color: var(--terracotta);
  line-height: 1;
  opacity: 0.3;
}
.testimonial-stars {
  color: var(--gold);
  letter-spacing: 3px;
  margin-bottom: 1rem;
  font-size: 1.05rem;
}
.testimonial blockquote {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.5rem;
  font-style: italic;
}
.testimonial figcaption {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.testimonial figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.95rem;
}
.testimonial figcaption small { color: var(--ink-muted); font-size: 0.85rem; }
.testimonials-note {
  margin-top: 1.75rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.82rem;
}

/* ---------- FAQ ---------- */
.faq { background: var(--cream-warm); }
.faq-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.faq-intro {
  position: sticky;
  top: 100px;
}
.faq-intro h2 { margin-bottom: 1rem; }
.faq-intro p { color: var(--ink-muted); }

.faq-list { display: flex; flex-direction: column; gap: 0.8rem; }
.faq-item {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: box-shadow .2s;
}
.faq-item:hover { box-shadow: var(--shadow-sm); }
.faq-item summary {
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 3rem;
  font-size: 1.02rem;
  font-family: var(--serif);
  font-weight: 500;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: var(--terracotta-light);
  color: var(--terracotta-dark);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  font-weight: 400;
  transition: transform .3s, background .3s;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  background: var(--terracotta);
  color: var(--white);
}
.faq-item p {
  padding: 0 1.5rem 1.5rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
  line-height: 1.7;
}

/* ---------- Contact ---------- */
.contact {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.contact::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(217, 119, 87, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}
.contact .eyebrow {
  background: rgba(217, 119, 87, 0.2);
  color: var(--terracotta-light);
}
.contact h2 { color: var(--cream); }
.contact .accent { color: var(--terracotta-light); }
.contact-intro .lead { color: rgba(251, 246, 239, 0.85); margin: 1rem 0 2.5rem; }
.contact-intro .lead strong { color: var(--cream); }

.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.contact-direct li {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.contact-icon {
  width: 48px;
  height: 48px;
  background: rgba(251, 246, 239, 0.1);
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}
.contact-direct small {
  display: block;
  font-size: 0.78rem;
  color: rgba(251, 246, 239, 0.6);
  margin-bottom: 0.15rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.contact-direct a, .contact-direct span {
  color: var(--cream);
  font-weight: 500;
  font-size: 1.05rem;
}
.contact-direct a:hover { color: var(--terracotta-light); }

.contact-socials {
  display: flex;
  gap: 1rem;
}
.contact-socials a {
  padding: 0.5rem 1.1rem;
  border: 1px solid rgba(251, 246, 239, 0.2);
  border-radius: 100px;
  color: var(--cream);
  font-size: 0.9rem;
  transition: background .2s, border-color .2s;
}
.contact-socials a:hover {
  background: rgba(251, 246, 239, 0.1);
  border-color: var(--terracotta-light);
  color: var(--cream);
}

/* Form */
.contact-form {
  background: var(--cream);
  color: var(--ink);
  padding: 2.2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.contact-form h3 { color: var(--ink); margin-bottom: 0.3rem; }
.form-sub { color: var(--ink-muted); font-size: 0.95rem; margin-bottom: 1.8rem; }
.contact-form label {
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  margin-top: 0.4rem;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.97rem;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px var(--terracotta-light);
}
.contact-form textarea { resize: vertical; min-height: 100px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-row label { margin-bottom: 0; }
.form-row + label { margin-top: 1rem; }

.checkbox {
  display: flex !important;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.85rem !important;
  color: var(--ink-muted) !important;
  font-weight: 400 !important;
  margin: 1.2rem 0 !important;
  cursor: pointer;
}
.checkbox input {
  width: auto !important;
  margin: 4px 0 0 !important;
  accent-color: var(--terracotta);
  flex-shrink: 0;
  padding: 0 !important;
}

.form-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
  min-height: 1.2em;
}
.form-status.success { color: var(--green-soft); font-weight: 500; }
.form-status.error { color: #c0392b; font-weight: 500; }

/* ---------- Footer ---------- */
.footer {
  background: var(--cream-deep);
  padding: 4rem 0 0;
  color: var(--ink-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}
.footer-brand strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0.5rem 0 0.8rem;
}
.footer-brand p { font-size: 0.92rem; max-width: 320px; color: var(--ink-muted); }
.footer-brand .logo-icon { font-size: 1.8rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-col h4 { margin-bottom: 0.4rem; }
.footer-col a, .footer-col span {
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.footer-col a:hover { color: var(--terracotta); }
.footer-bottom {
  padding: 1.5rem 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Rangée « ressources » du pied de page des pages engendrées (articles,
   quartiers, outils). La nav ne peut pas porter ces pages — elle déborde
   au-delà de quatre entrées et le hamburger n'arrive qu'à 1024 px — donc
   c'est ici que les pages de conversion reçoivent leurs liens internes. */
.footer-more {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.9;
}
/* Sur l'accueil, la rangée suit la grille du pied de page au lieu de l'ouvrir. */
.footer-grid + .footer-more { padding-top: 1.25rem; }

/* ---------- Pages légales ---------- */
.legal-page {
  background: var(--cream);
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 6vw, 6rem);
}
.legal-page .container { max-width: 800px; }
.legal-page .legal-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  background: var(--terracotta-light);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
  margin-bottom: 1rem;
}
.legal-page h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 0.6rem;
}
.legal-page .updated-on {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}
.legal-page h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  margin: 2.5rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.legal-page h2:first-of-type { border-top: none; padding-top: 0; }
.legal-page h3 {
  font-size: 1.1rem;
  margin: 1.5rem 0 0.6rem;
  color: var(--ink);
}
.legal-page p { margin-bottom: 1rem; line-height: 1.7; }
.legal-page ul, .legal-page ol {
  margin: 0 0 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-page ul li, .legal-page ol li {
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.65;
}
.legal-page ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--terracotta);
  border-radius: 50%;
}
.legal-page ol { counter-reset: legal; }
.legal-page ol li {
  counter-increment: legal;
}
.legal-page ol li::before {
  content: counter(legal) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terracotta);
  font-weight: 600;
}
.legal-page strong { color: var(--ink); }
.legal-page .legal-info {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  margin: 1.5rem 0 2rem;
  white-space: pre-line;
}
.legal-page .legal-info dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.7rem;
}
.legal-page .legal-info dt:first-child { margin-top: 0; }
.legal-page .legal-info dd {
  margin: 0.2rem 0 0.5rem;
  color: var(--ink-soft);
  white-space: pre-line;
}
.legal-page .back-home {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
  font-weight: 500;
}
.legal-page .back-home::before { content: '←'; }

/* Header simplifié pour pages légales : on cache la nav interne (ancres homepage) */
body.legal .nav a[href^="#"] { display: none; }
body.legal .nav .lang-toggle { display: none; }

/* ---------- Page Quartiers ---------- */
.quartiers-page { background: var(--cream); }
.quartiers-page .container { max-width: 900px; }
.quartiers-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
  background: var(--cream-warm);
  text-align: center;
}
.quartiers-hero h1 {
  font-size: clamp(1.85rem, 1.9vw + 1.05rem, 2.6rem);
  max-width: 28ch;
  margin: 0.5rem auto 1.2rem;
}
.quartiers-hero .lead {
  max-width: 720px;
  margin: 0 auto;
}

/* ---------- Quartiers : ordres de grandeur, bulles, fiches ---------- */

/* Paliers de loyer : une couleur d'accent par palier, héritée par les bulles
   comme par les fiches détaillées. */
[data-tier="doux"]   { --q-accent: #4d7159; --q-tint: rgba(90, 125, 101, 0.16); }
[data-tier="median"] { --q-accent: #a97a3c; --q-tint: rgba(200, 150, 90, 0.18); }
[data-tier="haut"]   { --q-accent: var(--terracotta-dark); --q-tint: rgba(217, 119, 87, 0.18); }

.quartiers-prices,
.quartiers-overview {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}
/* Les grilles de synthèse débordent la colonne de lecture des fiches (900 px). */
.quartiers-page .quartiers-prices .container,
.quartiers-page .quartiers-overview .container { max-width: 1140px; }
.quartiers-prices { background: var(--cream); }
.quartiers-overview h2,
.quartiers-prices h2 {
  font-size: clamp(1.45rem, 1.2vw + 1.05rem, 1.95rem);
  text-align: center;
  margin-bottom: 0.6rem;
}
.quartiers-sub {
  max-width: 640px;
  margin: 0 auto 2rem;
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.98rem;
  text-wrap: pretty;
}

/* --- Loyers par type de logement --- */
.price-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}
.price-type {
  flex: 1 1 170px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  padding: 1.5rem 1.1rem 1.3rem;
  border-radius: 26px;
  background: linear-gradient(165deg, var(--white) 0%, var(--cream-warm) 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.price-type-icon { font-size: 1.7rem; line-height: 1; }
.price-type-label {
  font-size: 0.8rem;
  text-wrap: balance;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}
.price-type-value {
  font-family: var(--serif);
  font-size: 1.24rem;
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

/* --- Légende des paliers --- */
.q-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  margin: 0 0 1.6rem;
  font-size: 0.85rem;
  color: var(--ink-muted);
}
.q-legend li { display: flex; align-items: center; gap: 0.45rem; }
.q-legend li::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--q-accent);
}

/* --- Bulles de synthèse --- */
.quartiers-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.q-bubble {
  flex: 1 1 190px;
  max-width: 250px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.4rem 1.4rem 1.25rem;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* Halo coloré : rappelle le palier de loyer sans alourdir la carte */
.q-bubble::before {
  content: '';
  position: absolute;
  top: -55px;
  right: -55px;
  width: 165px;
  height: 165px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 65%, var(--q-tint) 0%, transparent 72%);
  pointer-events: none;
}
.q-bubble:hover,
.q-bubble:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--q-accent);
  color: var(--ink-soft);
}
.q-bubble-name {
  position: relative;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.q-bubble-price {
  position: relative;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--q-accent);
  line-height: 1.15;
  white-space: nowrap;
}
.q-bubble-price small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.q-tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.q-tag {
  font-size: 0.74rem;
  line-height: 1.5;
  padding: 0.15rem 0.65rem;
  border-radius: 100px;
  background: var(--cream-warm);
  color: var(--ink-soft);
  white-space: nowrap;
}
.q-bubble-for {
  position: relative;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-muted);
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.quartiers-note {
  text-align: center;
  margin-top: 1.6rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* --- Fiches détaillées --- */
.quartiers-detail { padding: clamp(2rem, 4vw, 3rem) 0 clamp(3rem, 5vw, 5rem); }
.quartier-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border-radius: 28px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin-bottom: 1.6rem;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  scroll-margin-top: 100px;
}
/* Liseré du palier de loyer, à gauche de la fiche */
.quartier-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--q-accent);
}
.quartier-head { margin-bottom: 1.3rem; }
.quartier-card h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1vw + 1.15rem, 1.85rem);
}
.quartier-tagline {
  margin: 0.25rem 0 0;
  font-size: 0.98rem;
  color: var(--ink-muted);
}
.quartier-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}
.stat-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border-radius: 20px;
  background: var(--cream-warm);
}
.stat-bubble.price {
  background: var(--q-tint);
}
.stat-bubble.price .stat-value { color: var(--q-accent); }
.stat-icon { font-size: 1.05rem; line-height: 1; }
.stat-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.stat-value {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.quartier-intro {
  line-height: 1.7;
  margin-bottom: 1.2rem;
}
.quartier-forwho {
  padding: 1rem 1.25rem;
  border-radius: 20px;
  background: var(--cream);
  border: 1px dashed var(--line);
  margin-bottom: 1.3rem;
}
.quartier-forwho h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.35rem;
}
.quartier-forwho p { margin: 0; font-size: 0.96rem; line-height: 1.6; }

.quartier-balance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.9rem;
}
.quartier-panel {
  padding: 1.2rem 1.35rem;
  border-radius: 22px;
}
.quartier-panel.pros { background: rgba(90, 125, 101, 0.09); }
.quartier-panel.cons { background: rgba(200, 150, 90, 0.12); }
.quartier-panel h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.quartier-panel.pros h3 { color: #4d7159; }
.quartier-panel.cons h3 { color: #a06f2f; }
.quartier-panel ul {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.quartier-panel li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 0.94rem;
  line-height: 1.5;
}
.quartier-panel li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.quartier-panel.pros li::before { content: '✓'; color: #4d7159; }
.quartier-panel.cons li::before { content: '!'; color: #a06f2f; padding-left: 0.25rem; }

.quartier-more { margin: 1.4rem 0 0; }
.quartier-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 100px;
  background: var(--cream-warm);
  color: var(--terracotta-dark);
  font-weight: 600;
  font-size: 0.92rem;
  transition: background .2s, color .2s;
}
.quartier-more a:hover {
  background: var(--terracotta);
  color: var(--white);
}

/* Renvois de fin de page : trois paragraphes qui traînaient hors de toute
   section, donc sans gouttières. */
.quartiers-more {
  padding: 0 0 clamp(2rem, 4vw, 3rem);
}
.quartiers-more .container { max-width: 760px; }
.quartiers-more p { margin-bottom: 1rem; }
.quartiers-more p:last-child { margin-bottom: 0; }

/* « Dans quel quartier habiter ? » : la réponse par profil, avant les fiches.
   C'est la question que tapent les visiteurs (Search Console, 2026-09). */
.quartiers-profiles {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  background: var(--cream-warm);
}
.quartiers-page .quartiers-profiles .container { max-width: 1140px; }
.quartiers-profiles h2 {
  font-size: clamp(1.45rem, 1.2vw + 1.05rem, 1.95rem);
  text-align: center;
  margin-bottom: 0.6rem;
}
.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1rem;
}
.profile-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
}
.profile-card h3 {
  font-size: 1.12rem;
  margin-bottom: 0.5rem;
}
.profile-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.65;
}

.quartiers-cta {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(3rem, 5vw, 4rem) 0;
  text-align: center;
}
.quartiers-cta h2 {
  color: var(--cream);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}
.quartiers-cta .lead {
  color: rgba(251, 246, 239, 0.85);
  max-width: 600px;
  margin: 0 auto 2rem;
}

/* Pot de miel anti-spam : hors écran, invisible aux lecteurs d'écran, jamais tabulable. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Ce que contient la brochure, à côté du formulaire */
.contact-brochure {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 2rem;
}
.contact-brochure li {
  position: relative;
  padding-left: 1.8rem;
  font-size: 0.96rem;
}
.contact-brochure li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-weight: 700;
}
/* La section contact est sur fond sombre : le corail clair y reste lisible. */
.contact .contact-brochure { color: rgba(251, 246, 239, 0.85); }
.contact .contact-brochure li::before { color: var(--terracotta-light); }

.why-link { margin-top: 0.8rem; font-size: 0.88rem; }
.why-link a { color: var(--terracotta-dark); text-decoration: underline; text-underline-offset: 2px; }

/* Renvoi d'un article vers sa page pilier */
.blog-pillar-link {
  margin: 0 0 1.6rem;
  padding: 0.9rem 1.2rem;
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--cream-warm);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ---------- Outils gratuits (calculateur, sélecteur de quartier) ---------- */
.fees-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}
.tools { background: var(--cream-warm); }
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
}
.tool-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.8rem clamp(1.4rem, 3vw, 2rem) 1.6rem;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink-soft);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tool-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 65%, var(--terracotta-light) 0%, transparent 72%);
  opacity: 0.75;
  pointer-events: none;
}
.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--terracotta);
  color: var(--ink-soft);
}
.tool-icon { position: relative; font-size: 1.9rem; line-height: 1; }
.tool-card h3 { position: relative; margin: 0; }
.tool-card p {
  position: relative;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
  margin: 0;
}
.tool-cta {
  position: relative;
  margin-top: auto;
  padding-top: 0.9rem;
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--terracotta-dark);
}
.tool-cta::after { content: ' \2192'; }

/* Encart d'appel vers un outil, posé au fil d'une page de contenu */
.tool-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  margin: 1.8rem 0;
  padding: 1.2rem 1.4rem;
  border-radius: 22px;
  background: var(--cream-warm);
  border: 1px solid var(--line);
}
.tool-inline .tool-icon { font-size: 1.6rem; }
.tool-inline p { flex: 1 1 260px; margin: 0; font-size: 0.95rem; line-height: 1.55; }
.tool-inline .btn { flex: 0 0 auto; }

.fees-calc {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: 46rem;
}
.fees-calc a { color: var(--terracotta-dark); text-decoration: underline; text-underline-offset: 2px; }

.hero-cta-note {
  margin-bottom: 2.2rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* ---------- Appel à l'action en fin de section « Accompagnement » ---------- */
.services-cta { text-align: center; margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.services-employers {
  margin: 1.2rem auto 0;
  max-width: 46rem;
  font-size: 0.92rem;
  color: var(--ink-muted);
}
.services-employers a { color: var(--terracotta-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Frais d'agence (home) ---------- */
.fees-teaser { background: var(--cream-warm); }
.fees-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.fees-points {
  display: grid;
  gap: 1.1rem;
  margin: 1.6rem 0 2rem;
}
.fees-points li {
  position: relative;
  padding-left: 1.9rem;
  font-size: 0.98rem;
}
.fees-points li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--terracotta);
  font-weight: 700;
}
.fees-points strong { color: var(--ink); }
.fees-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-card);
}
.fees-card h3 { font-size: 1.2rem; margin-bottom: 1.2rem; }
.fees-card dt {
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: 0.3rem;
}
.fees-card dd { font-size: 0.94rem; margin-bottom: 1.2rem; }
.fees-card dd:last-child { margin-bottom: 0; }

/* ---------- Page « Comment ça marche » (guide long format) ---------- */
.guide-page { background: var(--cream); }
.guide-page .container { max-width: 860px; }

.guide-hero {
  padding: clamp(3rem, 5vw, 5rem) 0 clamp(2rem, 3vw, 3rem);
  background: var(--cream-warm);
  text-align: center;
}
.guide-hero h1 {
  font-size: clamp(1.85rem, 1.9vw + 1.05rem, 2.6rem);
  max-width: 28ch;
  margin: 0.5rem auto 1.2rem;
}
.guide-hero .lead { max-width: 720px; margin: 0 auto; }
.guide-hero .guide-meta {
  margin-top: 1.6rem;
  font-size: 0.88rem;
  color: var(--ink-muted);
}

/* Sommaire ancré */
.guide-toc {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.6rem clamp(1.2rem, 3vw, 2rem);
  box-shadow: var(--shadow-card);
}
.guide-toc h2 {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
  margin-bottom: 1rem;
}
.guide-toc ol {
  list-style: none;
  counter-reset: toc;
  display: grid;
  gap: 0.55rem;
}
.guide-toc li { counter-increment: toc; }
.guide-toc a {
  display: flex;
  gap: 0.8rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.98rem;
  padding: 0.25rem 0;
  border-radius: 6px;
}
.guide-toc a::before {
  content: counter(toc);
  flex: none;
  width: 1.6rem;
  font-family: var(--serif);
  color: var(--terracotta);
  font-weight: 600;
}
.guide-toc a:hover { color: var(--terracotta-dark); }

/* Corps de l'article */
.guide-body { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 5vw, 5rem); }
.guide-section {
  scroll-margin-top: 100px;
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.guide-section + .guide-section {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.guide-section > h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  margin-bottom: 1rem;
}
.guide-section h3 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin: 2rem 0 0.7rem;
}
.guide-section p { margin-bottom: 1rem; }
.guide-section > ul, .guide-section > ol,
.guide-section .guide-prose ul, .guide-section .guide-prose ol {
  margin: 0 0 1.2rem 0;
  padding-left: 1.3rem;
  display: grid;
  gap: 0.5rem;
}
.guide-section li { padding-left: 0.2rem; }
.guide-section li::marker { color: var(--terracotta); }

/* Encadré d'appui */
.guide-callout {
  background: var(--cream-warm);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.3rem clamp(1.2rem, 3vw, 1.8rem);
  margin: 1.6rem 0;
}
.guide-callout h3 { margin-top: 0; font-size: 1.05rem; }
.guide-callout p:last-child, .guide-callout ul:last-child { margin-bottom: 0; }
.guide-callout.warn {
  background: #fdf1ec;
  border-left-color: var(--terracotta-dark);
}
.guide-callout.ok {
  background: #eef3ef;
  border-left-color: var(--green-soft);
}

/* Deux colonnes « ce qui est inclus / exclu » */
.guide-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}
.guide-col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.guide-col h3 { margin: 0 0 0.9rem; font-size: 1.05rem; }
.guide-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.guide-col li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}
.guide-col li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.guide-col.yes li::before { content: '✓'; color: var(--green-soft); }
.guide-col.no li::before { content: '×'; color: var(--terracotta-dark); font-size: 1.1rem; line-height: 1.2; }

/* Les appellations néerlandaises (makelaar, aanhuurmakelaar…) */
.guide-roles {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0;
  display: grid;
  gap: 0.7rem;
}
.guide-roles li {
  background: var(--cream-warm);
  border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.85rem 1.2rem;
  font-size: 0.96rem;
  line-height: 1.55;
}
.guide-roles strong { color: var(--ink); }
.guide-col h3 span[lang="nl"] {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  margin-top: 0.15rem;
}

/* Étapes numérotées de la méthode */
.guide-steps { list-style: none; counter-reset: gs; padding: 0; display: grid; gap: 1rem; margin: 1.6rem 0; }
.guide-steps > li {
  counter-increment: gs;
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem 1.3rem 4.2rem;
  box-shadow: var(--shadow-sm);
}
.guide-steps > li::before {
  content: counter(gs);
  position: absolute;
  left: 1.4rem;
  top: 1.3rem;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--cream-warm);
  font-family: var(--serif);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-steps h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.guide-steps p { margin: 0 0 0.5rem; font-size: 0.96rem; }
.guide-steps p:last-child { margin-bottom: 0; }

/* Chiffres clés */
.guide-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 1.6rem 0;
}
.guide-stat {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.2rem 1.3rem;
}
.guide-stat strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--terracotta);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.guide-stat span { font-size: 0.88rem; color: var(--ink-muted); }

/* Bandeau d'appel à l'action en fin de page */
.guide-cta {
  background: var(--cream-warm);
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  text-align: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.guide-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.8rem; }
.guide-cta .lead { max-width: 560px; margin: 0 auto 1.6rem; }

/* Renvois vers le blog */
.guide-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
}
.guide-related a {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.35;
  box-shadow: var(--shadow-sm);
}
.guide-related a:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; padding-bottom: 3rem; }
  .hero-visual { height: 380px; margin-top: 2rem; }
  .hero-card-1 { left: 0; top: 0; }
  .hero-card-2 { right: 0; top: 140px; }
  .hero-card-3 { left: 20%; bottom: 0; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }

  .about-grid { grid-template-columns: 1fr; }
  .about-photo-wrapper { max-width: 380px; margin: 0 auto; }

  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }

  .faq-grid { grid-template-columns: 1fr; }
  .faq-intro { position: static; }

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

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

@media (max-width: 1060px) {
  /* ----- Menu hamburger. Seuil calé sur la mesure : logo insécable (283 px) plus
     les quatre onglets, le sélecteur de langue et le bouton (650 px) demandent
     957 px de contenu, soit 1021 px de fenêtre. 1060 laisse une marge. ----- */
  .nav {
    position: fixed;
    top: 70px;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 70px);
    height: calc(100dvh - 70px);
    background: var(--cream);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1.5rem 3rem;
    transform: translateX(100%);
    /* Fermé, le menu est hors écran à droite. Sans `visibility`, ses liens
       restent atteignables au clavier et aux lecteurs d'écran. */
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    z-index: 45;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -10px 0 30px rgba(43, 33, 24, 0.08);
  }
  .nav a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
    white-space: normal;
  }
  .nav.open { transform: translateX(0); visibility: visible; transition: transform .3s ease; }
  .nav .lang-toggle {
    width: auto;
    margin: 1.5rem auto 0.5rem;
    align-self: center;
  }
  .nav .lang-btn { padding: 0.5rem 1rem; font-size: 0.85rem; }
  .nav-toggle { display: flex; z-index: 60; position: relative; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  /* Header reste opaque quand le menu est ouvert pour bien cacher le contenu */
  body.nav-open .header::before { background: var(--cream); }
}

@media (max-width: 720px) {
  /* ----- Tailles réduites pour mobile ----- */
  body { font-size: 16px; }

  /* Bulles quartiers et loyers : pleine largeur plutôt qu'une carte étroite
     centrée au milieu de l'écran. */
  .q-bubble { max-width: none; flex-basis: 100%; }
  /* Deux cartes par rangée : le montant en `nowrap` fixe la largeur minimale,
     il faut donc resserrer padding et corps pour que deux tiennent. */
  .price-type { max-width: none; flex-basis: 44%; padding: 1.2rem 0.6rem 1.1rem; }
  .price-type-value { font-size: 1.05rem; }
  .price-type-label { font-size: 0.74rem; }
  .quartiers-hero h1, .guide-hero h1 { max-width: none; }
  .hero-content h1 { max-width: none; }
  section { padding: 3rem 0; }
  h1 { font-size: 1.9rem; line-height: 1.2; }
  h2 { font-size: 1.55rem; }
  h3 { font-size: 1.15rem; }
  .lead { font-size: 1rem; line-height: 1.55; }
  .eyebrow { font-size: 0.72rem; padding: 0.3rem 0.75rem; margin-bottom: 0.9rem; }

  /* Hero plus compact */
  .hero { padding-top: 1.5rem; }
  .hero-grid { padding-bottom: 2rem; gap: 1.5rem; }
  .hero-content h1 { font-size: 2rem; margin-bottom: 1rem; }
  .hero-content .lead { font-size: 1rem; margin-bottom: 1.5rem; }
  .hero-cta { gap: 0.7rem; margin-bottom: 1.8rem; flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-trust { gap: 0.6rem 1.5rem; }
  .hero-trust li { font-size: 0.85rem; }
  .hero-visual { height: 320px; margin-top: 1rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .hero-stats strong { font-size: 1.4rem; }
  .hero-stats span { font-size: 0.78rem; }

  /* About plus compact */
  .about-photo-wrapper { max-width: 320px; }

  /* Section heads */
  .section-head { margin-bottom: 2rem; }

  /* Service cards : padding réduit */

  /* Steps method */
  .step { gap: 1rem; margin-bottom: 1.8rem; }
  .step-num { width: 48px; height: 48px; font-size: 1.3rem; box-shadow: 0 0 0 6px var(--cream), 0 6px 18px rgba(217, 119, 87, 0.35); }
  .step-body { padding: 1.2rem 1.3rem; }
  .steps::before { left: 23px; }

  /* Why cards */
  .why-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; gap: 1rem; }
  .why-card { padding: 1.5rem 1.3rem; }

  /* Services / Testimonials / FAQ / Contact / Footer */
  .testimonial { padding: 1.5rem 1.3rem; }
  .faq-item summary { font-size: 0.97rem; padding: 1rem 1.2rem; padding-right: 3rem; }
  .faq-item summary::after { right: 1.2rem; width: 24px; height: 24px; font-size: 1.15rem; }
  .faq-item p { padding: 0 1.2rem 1.3rem; }
  .contact-form { padding: 1.5rem 1.3rem; }
  .footer-grid { grid-template-columns: 1fr; padding-bottom: 2rem; }
  .footer { padding-top: 2.5rem; }

  .form-row { grid-template-columns: 1fr; }
  .logo-text small { display: none; }
  .logo-text { font-size: 1.05rem; }
  .hero-card-1, .hero-card-2, .hero-card-3 { width: 230px; padding: 0.9rem 1rem; }
  .hero-card-1 { top: 0; }
  .hero-card-2 { top: 120px; right: 0; width: 240px; }
  .hero-card-3 { bottom: 0; left: 0; }
  .footer-bottom .container { justify-content: center; text-align: center; }
}

/* ---------- Animations on scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Guide gratuit : encart de capture d'e-mail ---------- */
.guide-offer {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
  background: var(--cream-warm);
}
.guide-box {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  background: linear-gradient(135deg, var(--terracotta-light) 0%, var(--cream-warm) 75%);
  border: 1px solid rgba(217, 119, 87, 0.35);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.guide-cover {
  width: 130px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(43, 33, 24, 0.25);
  transform: rotate(-3deg);
}
.guide-eyebrow {
  display: inline-block;
  margin-bottom: .6rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
}
.guide-box h2 {
  margin: 0 0 .7rem;
  padding: 0;
  border: 0;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
}
.guide-box .guide-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .35rem;
}
.guide-box .guide-points li {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  color: var(--ink-soft);
}
.guide-box .guide-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--terracotta-dark);
  font-weight: 700;
  background: none;
  width: auto;
  height: auto;
}
.guide-label {
  display: block;
  margin-bottom: .45rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.guide-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.guide-row input {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 48px;
  padding: .75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font: inherit;
}
.guide-row input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.guide-row .btn { flex: 0 0 auto; min-height: 48px; }
.guide-consent { margin: .7rem 0 0; font-size: .82rem; color: var(--ink-muted); }
.guide-consent a { color: var(--terracotta-dark); }
.guide-form .form-status { margin-top: .6rem; text-align: left; }

/* Encart au milieu d'un article ou d'une fiche : la colonne est étroite. */
.guide-offer-inline { margin: 2.5rem 0; }
.guide-inline { grid-template-columns: auto minmax(0, 1fr); }
.guide-inline .guide-form { grid-column: 1 / -1; }

@media (max-width: 860px) {
  .guide-box { grid-template-columns: auto minmax(0, 1fr); }
  .guide-box .guide-form { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .guide-box, .guide-inline { grid-template-columns: 1fr; }
  .guide-cover { width: 96px; margin: 0 auto .25rem; }
  .guide-row .btn { flex: 1 1 100%; }
}