/* =====================================================================
   MDB - Immobilier & Travaux — Feuille de styles principale
   Organisation :
   01. Jetons (couleurs, typographie, ombres)   06. Hero & page-hero
   02. Base & réinitialisation                   07. Composants éditoriaux
   03. Typographie                               08. Méthode (schémas CSS)
   04. Utilitaires de mise en page               09. Formulaires & contact
   05. Boutons, liens, en-têtes de section       10. Pied de page, cookies
   11. Animations & responsive
   ===================================================================== */

/* 01. JETONS ---------------------------------------------------------- */
:root {
  --ink: #141312;
  --ink-soft: #24211e;
  --graphite: #3d3934;
  --paper: #fbfaf7;
  --paper-2: #f2eee7;
  --white: #ffffff;
  --stone: #e8e4dd;
  --stone-deep: #d7d0c4;
  --sand: #d9cbb4;
  --blue: #2f2a25;
  --blue-deep: #141312;
  --blue-soft: #ede7dd;
  --gold: #b78a49;
  --gold-deep: #876032;
  --gold-soft: #d1ad75;
  --muted: #69635b;
  --muted-2: #8b8379;
  --line: rgba(16, 20, 25, 0.11);
  --line-strong: rgba(16, 20, 25, 0.22);
  --line-light: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 8px 22px rgba(16, 20, 25, 0.055);
  --shadow: 0 18px 42px rgba(16, 20, 25, 0.09);
  --shadow-lg: 0 28px 72px rgba(16, 20, 25, 0.15);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 02. BASE ------------------------------------------------------------ */
* { box-sizing: border-box; }

/* L'attribut hidden l'emporte toujours, même sur un display auteur
   (ex. .button-row en flex) — indispensable au parcours de rendez-vous. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

::selection { background: rgba(184, 148, 93, 0.24); }

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 18px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  border-radius: 6px;
  font-size: 0.82rem;
}
.skip-link:focus { top: 18px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 03. TYPOGRAPHIE ----------------------------------------------------- */
h1, h2, h3, h4, p { margin-top: 0; }

h1, h2, h3 { text-wrap: balance; color: var(--ink); }

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.05;
}

h1 { font-size: clamp(2.7rem, 6vw, 5rem); margin-bottom: 0; }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: 20px; }

h3 {
  font-family: var(--sans);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: 10px;
}

p { color: var(--muted); }
p:last-child { margin-bottom: 0; }

.lead {
  max-width: 60ch;
  color: var(--graphite);
  font-size: clamp(1.08rem, 1.6vw, 1.3rem);
  line-height: 1.62;
}

.serif-accent { font-family: var(--serif); font-weight: 500; }

/* Inversions sur fonds sombres */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3 { color: var(--white); }
.on-dark p, .on-dark .lead { color: rgba(255, 255, 255, 0.74); }

/* Titres sur fonds sombres (hero de page, sections encre, panneaux CTA) */
.page-hero h1, .page-hero h2, .page-hero h3,
.bg-ink h1, .bg-ink h2, .bg-ink h3,
.cta-panel h1, .cta-panel h2, .cta-panel h3 { color: var(--white); }
.bg-ink p, .bg-ink .lead { color: rgba(255, 255, 255, 0.74); }

/* 04. UTILITAIRES ----------------------------------------------------- */
.container { width: min(1200px, calc(100% - 48px)); margin: 0 auto; }
.narrow { width: min(860px, calc(100% - 48px)); margin: 0 auto; }
.measure { max-width: 62ch; }

.section { padding: clamp(64px, 9vw, 116px) 0; }
.section--tight { padding: clamp(48px, 6vw, 76px) 0; }

.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-stone { background: var(--blue-soft); }
.bg-ink { background: var(--ink); color: var(--white); }

.center { text-align: center; }
.center .lead, .center .eyebrow { margin-left: auto; margin-right: auto; }

.stack-sm > * + * { margin-top: 14px; }
.mt-32 { margin-top: 32px; }
.mt-40 { margin-top: 40px; }

/* 05. EN-TÊTES DE SECTION, BOUTONS, LIENS ----------------------------- */
.eyebrow {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 20px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.eyebrow::before {
  width: 30px; height: 1px;
  background: currentColor;
  content: "";
}
.on-dark .eyebrow, .bg-ink .eyebrow { color: var(--gold-soft); }
.center .eyebrow::before { display: none; }

.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.center.section-head { margin-left: auto; margin-right: auto; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 34px;
}
.button-row--center { justify-content: center; }

.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--white);
  --btn-bd: transparent;
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 26px;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: transform 200ms var(--ease), background 200ms var(--ease),
    border-color 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:hover, .btn:focus-visible {
  background: var(--blue-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(14, 38, 56, 0.22);
}
/* Garde-fous : aucun état (clic, visite, focus) ne doit changer la couleur du texte */
.btn:active, .btn:focus, a.btn:visited { color: var(--btn-fg); }
.btn--outline:active, .btn--outline:focus, a.btn--outline:visited { color: var(--blue); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--ink-soft); box-shadow: var(--shadow-sm); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--blue); --btn-bd: rgba(23, 58, 82, 0.32); }
.btn--outline:hover, .btn--outline:focus-visible { background: rgba(23, 58, 82, 0.07); border-color: var(--blue); box-shadow: none; color: var(--blue-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); --btn-bd: rgba(255, 255, 255, 0.4); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: var(--white); box-shadow: none; }

.link-arrow {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.link-arrow::after { content: "→"; transition: transform 200ms var(--ease); }
.link-arrow:hover::after, .link-arrow:focus-visible::after { transform: translateX(6px); }
.on-dark .link-arrow, .bg-ink .link-arrow { color: var(--gold-soft); }

/* 06a. EN-TÊTE / NAVIGATION ------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 248, 246, 0.92);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(16, 20, 25, 0.04);
}
.header-inner {
  display: flex;
  min-height: 72px;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; color: var(--ink); }
.brand-logo { display: block; width: auto; }
.brand-logo--full { height: 54px; }
.brand-logo--mark { height: 42px; display: none; }
.site-header .brand { padding: 6px 0; }

.site-nav { display: flex; gap: 20px; align-items: center; }
.site-nav a:not(.btn) {
  position: relative;
  padding: 8px 0;
  color: rgba(16, 20, 25, 0.62);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  transition: color 200ms var(--ease);
}
.site-nav a:not(.btn)::after {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  height: 1px;
  background: var(--gold-deep);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease);
}
/* La mise en évidence « page courante » ne concerne que les liens texte,
   jamais le bouton « Prendre rendez-vous » (son texte doit rester blanc). */
.site-nav a:not(.btn):hover, .site-nav a:not(.btn)[aria-current="page"] { color: var(--ink); }
.site-nav a:not(.btn):hover::after, .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .btn[aria-current="page"] { color: var(--btn-fg); }
.site-nav .btn { min-height: 44px; padding: 0 20px; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--ink);
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  display: block;
  width: 18px; height: 1.4px;
  margin: 4px auto;
  background: currentColor;
  content: "";
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.menu-open .nav-toggle span { opacity: 0; }
.menu-open .nav-toggle::before { transform: translateY(5.4px) rotate(45deg); }
.menu-open .nav-toggle::after { transform: translateY(-5.4px) rotate(-45deg); }

/* 06b. HERO (image immersive plein cadre, texte centré) --------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(90vh, 940px);
  overflow: hidden;
  background: var(--ink);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 78% at 50% 50%, rgba(12, 18, 24, 0.68) 0%, rgba(12, 18, 24, 0.38) 56%, rgba(12, 18, 24, 0.2) 100%),
    linear-gradient(0deg, rgba(12, 18, 24, 0.5) 0%, rgba(12, 18, 24, 0) 42%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-top: clamp(110px, 14vh, 168px);
  padding-bottom: clamp(64px, 10vh, 116px);
}
.hero-content {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.hero .eyebrow { justify-content: center; color: var(--gold-soft); }
.hero .eyebrow::before { display: none; }
.hero h1 { margin-bottom: 22px; color: var(--white); }
.hero .lead { color: rgba(255, 255, 255, 0.88); max-width: 60ch; margin-inline: auto; }
.hero .positioning {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  margin: 0 0 26px;
  color: var(--gold-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero .positioning span { display: inline-flex; align-items: center; gap: 18px; }
.hero .positioning span + span::before {
  width: 5px; height: 5px; margin-right: 8px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.45); content: "";
}
.hero .button-row { justify-content: center; }
.hero .btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--ink);
}
.hero .btn:hover, .hero .btn:focus-visible {
  background: var(--gold-soft);
  box-shadow: 0 12px 28px rgba(183, 138, 73, 0.24);
}
.hero .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  --btn-bd: rgba(255, 255, 255, 0.42);
}

/* Bandeau piliers sous le hero */
.pillars-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillar {
  padding: 26px 28px;
  border-right: 1px solid var(--line);
}
.pillar:first-child { padding-left: 0; }
.pillar:last-child { border-right: 0; padding-right: 0; }
.pillar strong { display: block; font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--ink); }
.pillar span { display: block; margin-top: 4px; font-size: 0.82rem; color: var(--muted); }

/* 06c. PAGE-HERO (pages intérieures) ---------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) 0 clamp(52px, 7vw, 86px);
  background: var(--ink);
  color: var(--white);
}
.page-hero .breadcrumb { margin-bottom: 26px; }
.page-hero h1 { max-width: 16ch; margin-bottom: 22px; font-size: clamp(2.6rem, 5.4vw, 4.6rem); }
.page-hero .lead { color: rgba(255, 255, 255, 0.76); }

.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb span[aria-current] { color: var(--gold-soft); }
.breadcrumb .sep { opacity: 0.5; }

/* 07. COMPOSANTS ÉDITORIAUX ------------------------------------------- */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.split--text-lead { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.split--reverse .split-media { order: -1; }

.figure {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; }
.figure--wide img { aspect-ratio: 3 / 2; }
.figure figcaption {
  position: absolute; left: 16px; bottom: 16px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(20, 22, 26, 0.8); color: var(--white);
  font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.stat-float {
  position: absolute; right: 18px; bottom: 18px;
  max-width: 230px; padding: 18px 20px;
  border-radius: 14px; background: rgba(20, 22, 26, 0.9); color: var(--white);
  backdrop-filter: blur(10px);
}
.stat-float strong { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--gold-soft); line-height: 1; }
.stat-float span { display: block; margin-top: 6px; font-size: 0.76rem; letter-spacing: 0; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

/* Grille de cartes */
.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: 0 1px 0 rgba(16, 20, 25, 0.03);
  transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(184, 148, 93, 0.6);
  box-shadow: var(--shadow-sm);
}
.card p { font-size: 0.95rem; }
.card .link-arrow { margin-top: auto; padding-top: 18px; }
.card--wide { grid-column: 1 / -1; }
.card--center {
  align-items: center;
  gap: 14px;
  text-align: center;
}
.card-media {
  margin: -30px -30px 22px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: none;
}
.card-media img {
  aspect-ratio: 4 / 3;
}
.bg-ink .card, .on-dark .card {
  border-color: var(--line-light);
  background: rgba(255, 255, 255, 0.04);
}
.bg-ink .card h3, .on-dark .card h3 { color: var(--white); }
.bg-ink .card:hover, .on-dark .card:hover { background: rgba(255, 255, 255, 0.07); }

.card-index {
  display: block;
  margin-bottom: 18px;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--blue);
  line-height: 1;
}
.bg-ink .card-index, .on-dark .card-index { color: var(--gold-soft); }
.card-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin-bottom: 20px;
  border: 1px solid rgba(184, 148, 93, 0.5);
  border-radius: 12px;
  color: var(--blue);
  font-family: var(--serif); font-size: 1.35rem; font-weight: 500;
}
.on-dark .card-icon, .bg-ink .card-icon { color: var(--gold-soft); border-color: rgba(203, 171, 119, 0.5); }

.tag {
  display: inline-flex; align-items: center;
  padding: 5px 12px; margin-bottom: 14px;
  border-radius: 999px; border: 1px solid rgba(184, 148, 93, 0.4);
  color: var(--blue);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase;
}
.tag--soft { border-style: dashed; }

/* Facettes de service (page Services) */
.svc-facets { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.svc-line { margin: 0; font-size: 0.88rem; color: var(--muted); }
.svc-line b { display: block; margin-bottom: 1px; color: var(--blue); font-size: 0.68rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }

/* Citation */
.pullquote {
  padding: 8px 0 8px 34px;
  border-left: 2px solid var(--gold);
}
.pullquote p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.28;
  color: var(--ink);
}
.on-dark .pullquote p, .bg-ink .pullquote p { color: var(--white); }
.pullquote cite { display: block; margin-top: 16px; font-family: var(--sans); font-size: 0.8rem; font-style: normal; letter-spacing: 0; text-transform: uppercase; color: var(--gold-deep); }
.on-dark .pullquote cite, .bg-ink .pullquote cite { color: var(--gold-soft); }

/* Panneau d'appel à l'action */
.cta-panel {
  display: grid;
  gap: 30px;
  align-items: center;
  padding: clamp(36px, 5vw, 64px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #1d1a16 0%, #2c2620 58%, #3a3125 100%);
  border: 1px solid rgba(183, 138, 73, 0.42);
  box-shadow: 0 24px 60px rgba(20, 19, 18, 0.16);
  color: var(--white);
  grid-template-columns: minmax(0, 1fr) auto;
}
.cta-panel .eyebrow { color: var(--gold-soft); }
.cta-panel h2 { color: var(--white); margin-bottom: 12px; max-width: 22ch; }
.cta-panel p { color: rgba(255, 255, 255, 0.74); max-width: 52ch; }
.cta-panel .button-row { margin-top: 0; }
.cta-panel--plain {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Liste de valeurs / différenciation */
.value-list { display: grid; gap: 0; }
.value-item {
  display: grid;
  gap: 8px 28px;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.value-item:last-child { border-bottom: 1px solid var(--line); }
.value-item h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; margin: 0; }
.value-item p { margin: 0; }

/* 08. MÉTHODE — SCHÉMAS CSS ------------------------------------------- */
/* 8a. Parcours horizontal (aperçu) */
.flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 10px;
  counter-reset: flow;
}
.flow-node {
  position: relative;
  padding: 22px 16px 20px;
  border-top: 2px solid var(--line-strong);
  counter-increment: flow;
}
.flow-node::before {
  position: absolute; top: -7px; left: 0;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); content: "";
}
.flow-node::after {
  content: counter(flow, decimal-leading-zero);
  display: block; margin-bottom: 8px;
  font-family: var(--serif); font-size: 1.1rem; color: var(--blue);
}
.flow-node strong { display: block; font-size: 0.98rem; letter-spacing: 0; }
.flow-node span { display: block; margin-top: 4px; font-size: 0.84rem; color: var(--muted); }
.on-dark .flow-node, .bg-ink .flow-node { border-top-color: rgba(255, 255, 255, 0.24); }
.on-dark .flow-node strong, .bg-ink .flow-node strong { color: var(--white); }
.on-dark .flow-node::after, .bg-ink .flow-node::after { color: var(--gold-soft); }

/* 8b. Chronologie verticale détaillée */
.timeline { display: grid; gap: 0; counter-reset: tl; margin: 0; padding: 0; }
.timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px 32px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  counter-increment: tl;
}
.timeline-step:last-child { border-bottom: 1px solid var(--line); }
.timeline-step::before {
  content: counter(tl, decimal-leading-zero);
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--gold);
  line-height: 0.9;
}
.timeline-step h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 500; margin-bottom: 8px; }
.timeline-step p { max-width: 64ch; margin: 0; }
.timeline-step .kicker {
  display: inline-block; margin-bottom: 10px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--blue);
}

/* 8c. Dimensions analysées (grille) */
.dimension {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.dimension .num { font-family: var(--serif); color: var(--blue); font-size: 1.1rem; }
.dimension h3 { margin: 10px 0 6px; font-size: 1rem; }
.dimension p { font-size: 0.9rem; margin: 0; }

/* 09. TABLEAU COMPARATIF (Pourquoi MDB) ------------------------------- */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.compare-col {
  padding: 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
}
.compare-col--mdb { background: var(--ink); color: var(--white); border-color: transparent; }
.compare-col h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: 4px; }
.compare-col--mdb h3 { color: var(--white); }
.compare-col .role { font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; color: var(--muted); margin-bottom: 22px; }
.compare-col--mdb .role { color: var(--gold-soft); }
.compare-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.compare-list li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 0.95rem; color: var(--muted);
}
.compare-col--mdb .compare-list li { border-top-color: var(--line-light); color: rgba(255, 255, 255, 0.82); }
.compare-list li::before { content: "–"; color: var(--muted-2); }
.compare-col--mdb .compare-list li::before { content: "✓"; color: var(--gold-soft); font-weight: 700; }

/* 10a. PROJETS -------------------------------------------------------- */
.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  padding: clamp(28px, 4vw, 40px) 0;
  border-top: 1px solid var(--line);
}
.case-steps { display: grid; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.case-steps li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: 0.92rem; color: var(--muted); }
.case-steps li b { color: var(--gold-deep); font-family: var(--serif); font-weight: 500; }
.case-title {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
}
.case-strong { color: var(--ink); }
.empty-state {
  padding: clamp(40px, 6vw, 72px);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper-2);
  text-align: center;
}
.empty-state .card-icon { margin: 0 auto 20px; }

/* 10b. OPPORTUNITÉS --------------------------------------------------- */
.opp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.opp {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: transform 220ms var(--ease), border-color 220ms var(--ease);
}
.opp:hover { transform: translateY(-3px); border-color: rgba(184, 148, 93, 0.6); }
.opp .num { font-family: var(--serif); color: var(--blue); font-size: 1rem; }
.opp h3 { margin: 8px 0 6px; font-size: 1rem; }
.opp p { font-size: 0.88rem; margin: 0; }

.audience-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.audience {
  padding: 28px;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
}
.audience h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }

/* 11. CONTACT & FORMULAIRE -------------------------------------------- */
.contact-layout {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
.contact-aside { display: grid; gap: 18px; }
.contact-card {
  padding: 30px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
}
.contact-card h3 { color: var(--white); }
.contact-card a { color: var(--white); }
.contact-card .contact-line { display: grid; gap: 4px; margin-bottom: 18px; }
.contact-card .contact-line span { font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; color: var(--gold-soft); }
.contact-card .contact-line a, .contact-card .contact-line p { font-size: 1.08rem; color: var(--white); margin: 0; }

.paths { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.path-chip {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.path-chip:hover { border-color: rgba(184, 148, 93, 0.6); }
.path-chip input { margin-top: 2px; accent-color: var(--gold-deep); }
.path-chip.is-selected { border-color: var(--gold); background: rgba(184, 148, 93, 0.08); }

.form-card {
  padding: clamp(26px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
.field { display: grid; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.path-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 6px;
}
.form-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.form-grid--spaced { margin-top: 20px; }
.form-actions { margin-top: 8px; }
.form-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 22px;
}
.summary-chip {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--graphite);
  font-size: 0.84rem;
  line-height: 1.35;
}
.field label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; color: var(--ink); }
.field .req { color: var(--gold-deep); }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--paper);
  outline: none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.field input, .field select { min-height: 52px; padding: 0 14px; }
.field textarea { min-height: 140px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 148, 93, 0.18);
}
.check-field { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; font-size: 0.86rem; color: var(--muted); }
.check-field input { margin-top: 3px; accent-color: var(--gold-deep); }
.check-field a { color: var(--gold-deep); text-decoration: underline; }
.bot-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 22px; margin-top: 12px; font-size: 0.9rem; color: var(--gold-deep); }
.form-note { margin-top: 14px; font-size: 0.82rem; color: var(--muted); }
.form-note--spaced,
.legal-update { margin-top: 34px; }
.form-note--dark { color: rgba(255, 255, 255, 0.62); }
.text-on-dark { color: var(--white); }
.self-center { align-self: center; }
.lead--center { margin-inline: auto; }
.lead--spaced { margin-top: 34px; max-width: 70ch; }
.note-spaced { margin-top: 20px; }

.info-note {
  margin-top: 26px; padding: 22px 24px;
  border: 1px solid rgba(184, 148, 93, 0.4);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.info-note h3 { font-size: 0.98rem; }
.info-note p { font-size: 0.9rem; margin: 0; }
.info-note strong { color: var(--ink); }

/* Liste compacte (accompagnement) */
.mini-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.mini-list li {
  position: relative;
  padding-left: 16px;
  font-size: 0.86rem;
  color: var(--muted);
}
.mini-list li::before {
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  content: "—";
}
@media (max-width: 420px) { .mini-list { grid-template-columns: 1fr; } }

/* Contenu légal */
.legal-content { color: var(--muted); }
.legal-content h2 { margin-top: 46px; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: 28px; }
.legal-content p, .legal-content li { color: var(--muted); }
.legal-content ul { padding-left: 20px; }
.legal-content li { margin-bottom: 6px; }
.placeholder-flag {
  display: inline-block;
  padding: 2px 8px; margin: 0 2px;
  border-radius: 4px;
  background: rgba(184, 148, 93, 0.18);
  color: var(--gold-deep);
  font-size: 0.82em; font-weight: 700;
}

/* Barème d'honoraires — tableau réglementaire (arrêté du 10 janvier 2017).
   Le conteneur scrolle horizontalement plutôt que de pousser la page :
   sur un écran étroit, deux colonnes de chiffres débordent vite. */
.legal-content .bareme {
  display: block; overflow-x: auto;
  width: 100%; margin: 28px 0 10px;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal-content .bareme caption {
  caption-side: top; text-align: left;
  padding: 0 0 12px; color: var(--muted-2);
  font-size: 0.9rem; letter-spacing: 0.02em;
}
.legal-content .bareme th,
.legal-content .bareme td {
  padding: 14px 18px; text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.legal-content .bareme thead th {
  color: var(--ink); font-family: var(--sans);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: var(--paper-2);
}
.legal-content .bareme tbody td { color: var(--muted); }
.legal-content .bareme tbody td strong { color: var(--ink); font-size: 1.05rem; }
.legal-content .bareme tbody tr:last-child td { border-bottom: 0; }
.bareme-note { margin-top: 0; color: var(--muted-2); font-size: 0.92rem; font-style: italic; }

/* 12. PIED DE PAGE ---------------------------------------------------- */
.site-footer { padding: clamp(48px, 6vw, 72px) 0 26px; background: var(--stone); color: var(--ink); border-top: 1px solid var(--line); }
.site-footer .brand-logo--full { display: block; height: 62px; }
.site-footer .brand-logo--mark { display: none; }
.footer-top {
  display: grid;
  gap: 34px;
  grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.footer-top p { color: var(--muted); font-size: 0.92rem; }
.footer-brand-note { margin-top: 18px; max-width: 34ch; }
.footer h3 { color: var(--gold-deep); font-size: 0.72rem; letter-spacing: 0; text-transform: uppercase; margin-bottom: 16px; }
.footer-links { display: grid; gap: 10px; }
/* overflow-wrap : l'identifiant Instagram est un mot insécable qui occupe
   toute la largeur de colonne. Sans ce filet, une police de repli ou un
   zoom navigateur le ferait déborder du pied de page. */
.footer-links a, .footer-links span { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; transition: color 180ms var(--ease); }
.footer-links a:hover { color: var(--ink); }
.footer-exp { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); }
.footer-exp .exp-logo { height: 26px; width: auto; }
.footer-exp small { font-size: 0.74rem; line-height: 1.4; color: var(--muted-2); }

.footer-legal {
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, 1fr);
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 0.76rem;
  line-height: 1.6;
}
.footer-legal strong { color: var(--ink); font-weight: 600; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between;
  padding-top: 22px;
  color: var(--muted-2); font-size: 0.78rem;
}
.footer-bottom a:hover { color: var(--ink); }

/* Plaque claire pour logos partenaires sur fond sombre (eXp sur section encre) */
.logo-plate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 22px; border-radius: 12px; background: var(--white);
}
.logo-plate .exp-logo { display: block; height: 34px; width: auto; }
.exp-context { color: var(--white); }
.exp-card h3 { color: var(--white); }

/* Bandeau de réassurance / conversion */
.trust-strip {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
}
.trust-item {
  padding: 24px;
  background: var(--white);
}
.trust-item strong {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.15;
}
.trust-item span {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
}

/* 13. BANDEAU COOKIES ------------------------------------------------- */
.cookie-banner {
  position: fixed;
  right: 14px; bottom: 14px;
  z-index: 200;
  display: none;
  width: min(420px, calc(100% - 28px));
  padding: 18px;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  background: rgba(20, 22, 26, 0.98);
  box-shadow: var(--shadow-lg);
  color: var(--white);
}
.cookie-banner.is-visible { display: block; }
.cookie-banner h2 { color: var(--white); font-family: var(--sans); font-size: 0.86rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; margin-bottom: 6px; }
.cookie-banner p { color: rgba(255, 255, 255, 0.72); font-size: 0.8rem; line-height: 1.48; margin-bottom: 12px; }
.cookie-banner a { color: var(--gold-soft); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie-actions .btn { min-height: 40px; padding: 0 16px; font-size: 0.68rem; }

/* 14. ANIMATIONS ------------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 90ms; }
.reveal[data-delay="2"] { transition-delay: 180ms; }
.reveal[data-delay="3"] { transition-delay: 270ms; }

/* Passage d'une page à l'autre : fondu continu plutôt qu'un à-coup blanc.
   Transitions natives du navigateur (Chrome, Edge, Safari) ; l'en-tête et le
   pied de page sont nommés pour rester en place pendant que le contenu se
   renouvelle. Les navigateurs sans cette prise en charge (Firefox) reçoivent
   un simple fondu d'entrée — jamais de page blanche. */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: mdbPageOut 220ms var(--ease) both;
}
::view-transition-new(root) {
  animation: mdbPageIn 380ms var(--ease) both;
}
@keyframes mdbPageOut {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes mdbPageIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* L'en-tête et le pied de page traversent la transition sans bouger */
.site-header { view-transition-name: mdb-header; }
.site-footer { view-transition-name: mdb-footer; }
::view-transition-group(mdb-header),
::view-transition-group(mdb-footer) { animation-duration: 260ms; }

/* Repli pour les navigateurs sans transitions de page */
@supports not (view-transition-name: none) {
  body { animation: mdbPageIn 320ms var(--ease) both; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  /* Aucun mouvement de page : la transition devient un simple remplacement */
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .site-header, .site-footer { view-transition-name: none; }
}

/* 15. RESPONSIVE ------------------------------------------------------ */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .opp-grid { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
  /* Resserre la navigation pour conserver l'appel à l'action visible */
  .site-nav { gap: 15px; }
  .site-nav a:not(.btn) { font-size: 0.68rem; letter-spacing: 0; }
  .site-nav .btn { padding: 0 16px; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  /* Retire le backdrop-filter en mobile : sinon l'en-tête devient le bloc
     conteneur du menu en position: fixed et l'empêche de couvrir l'écran. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 248, 244, 0.98); }
  .site-nav {
    position: fixed;
    inset: 73px 0 0 0; /* 72px de min-height d'en-tête + 1px de bordure */
    display: grid;
    align-content: start;
    gap: 0;
    padding: 20px 24px 40px;
    background: rgba(250, 248, 244, 0.99);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 200ms var(--ease), transform 200ms var(--ease);
    overflow-y: auto;
  }
  .menu-open .site-nav { opacity: 1; pointer-events: auto; transform: none; }
  .site-nav a:not(.btn) { padding: 17px 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
  .site-nav .btn { margin-top: 22px; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-media { max-width: 460px; }
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar:nth-child(2) { border-right: 0; }
  .pillar { border-bottom: 1px solid var(--line); }

  .split, .split--text-lead, .contact-layout, .compare, .case { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .case { gap: 24px; }
  .value-item { grid-template-columns: 1fr; gap: 6px; }
  .cta-panel { grid-template-columns: 1fr; }
  .form-summary { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .audience-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :first-child { grid-column: 1 / -1; }
  .footer-legal { grid-template-columns: 1fr; }
  .timeline-step { grid-template-columns: 64px 1fr; gap: 8px 20px; }
}

@media (max-width: 560px) {
  .container, .narrow { width: min(100% - 32px, 1200px); }
  /* En-tête compact : bascule sur l'emblème quand le logo horizontal serait trop petit */
  .site-header .brand-logo--full { display: none; }
  .site-header .brand-logo--mark { display: block; }
  .grid--2, .grid--3, .grid--4, .opp-grid, .form-grid, .paths, .flow, .pillars-grid { grid-template-columns: 1fr; }
  .pillar { border-right: 0; padding: 20px 0; }
  .pillar:first-child { padding-top: 0; }
  .button-row { align-items: stretch; flex-direction: column; }
  .button-row .btn { width: 100%; }
  .hero-media { max-width: none; }
  .timeline-step { grid-template-columns: 1fr; gap: 6px; }
  .timeline-step::before { font-size: 2rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .cookie-banner {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    padding: 15px;
  }
  .cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cookie-actions .btn { width: 100%; }
}

/* 14. FONDS IMAGE DES SECTIONS SOMBRES -------------------------------- */
/* L'image du hero de l'accueil habille toutes les zones sombres du site,
   sous un voile encre appuyé : elle apporte de la profondeur sans jamais
   gêner la lecture. `background-attachment: fixed` la fait « suivre » le
   défilement ; repli en défilement normal sur mobile et écrans tactiles. */
.page-hero,
.bg-ink {
  background-color: var(--ink);
  /* Exactement le même voile que le hero de la page d'accueil (.hero-scrim) :
     vignette radiale centrée écran + dégradé du bas, image bien visible. */
  background-image:
    radial-gradient(88% 78% at 50% 50%, rgba(12, 18, 24, 0.68) 0%, rgba(12, 18, 24, 0.38) 56%, rgba(12, 18, 24, 0.2) 100%),
    linear-gradient(0deg, rgba(12, 18, 24, 0.5) 0%, rgba(12, 18, 24, 0) 42%),
    url("../images/generated/hero-mdb-premium-provence.jpg");
  background-size: cover;
  background-position: center, center, center 40%;
  background-attachment: fixed;
}
/* L'image étant plus présente, une ombre douce garantit la lisibilité du texte. */
.page-hero .container,
.bg-ink .container {
  text-shadow: 0 1px 2px rgba(12, 18, 24, 0.5), 0 4px 26px rgba(12, 18, 24, 0.55);
}
.page-hero .btn, .bg-ink .btn { text-shadow: none; }
@media (max-width: 900px), (hover: none) {
  .page-hero, .bg-ink { background-attachment: scroll; }
}

/* 15. FENÊTRES MODALES (études de cas, récit « Mon histoire ») -------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 240ms var(--ease);
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 14, 12, 0.66);
  backdrop-filter: blur(5px);
}
.modal-box {
  position: relative;
  width: min(880px, 100%);
  max-height: min(90vh, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 40px 90px rgba(12, 10, 8, 0.4);
  transform: translateY(16px) scale(0.985);
  transition: transform 240ms var(--ease);
}
.modal.is-open .modal-box { transform: none; }
.modal-bar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  padding: 12px 12px 0;
}
.modal-close {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(184, 148, 93, 0.5);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.modal-close:hover, .modal-close:focus-visible { background: var(--gold); color: var(--white); }
.modal-body { padding: clamp(20px, 4vw, 44px); padding-top: 4px; }
.modal-body .eyebrow { margin-bottom: 12px; }
.modal-body h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 10px; }
.modal-lead { color: var(--muted); margin-bottom: 22px; }
body.modal-open { overflow: hidden; }

/* Trame d'une étude de cas dans la modale */
.case-facts { display: grid; gap: 14px; margin-top: 26px; }
.case-fact { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.case-fact b {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Parcours guidé du formulaire (page Contact) */
.step-chip {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.45;
}
.step-chip b {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-deep);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.step-fieldset { margin: 26px 0 0; padding: 0; border: 0; }
.step-label {
  display: block;
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.slot-section {
  margin-top: 26px;
  padding: 18px;
  border: 1px solid rgba(184, 148, 93, 0.35);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.slot-section .step-label { margin-bottom: 10px; }
.form-note--ok { color: var(--gold-deep); font-weight: 600; }
.form-reassurance {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(184, 148, 93, 0.07);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  color: var(--muted);
}

/* Récapitulatif d'envoi du formulaire (page Contact) */
.form-fallback {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid rgba(184, 148, 93, 0.45);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.form-fallback h3 { margin-bottom: 8px; font-size: 1.05rem; }
.form-fallback p { margin-bottom: 14px; font-size: 0.92rem; color: var(--muted); }
.form-fallback textarea {
  width: 100%;
  min-height: 150px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}
.form-fallback .button-row { margin-top: 0; }
.form-fallback .btn { min-height: 46px; padding: 0 20px; }

/* Mot personnel (page À propos) */
.temoignage { margin: 20px 0 6px; padding-left: 20px; border-left: 2px solid var(--gold); }
.temoignage p { margin-bottom: 12px; }
.temoignage p:last-child { margin-bottom: 0; }

/* Récit « Mon histoire » */
.story h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 36px 0 14px;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}
.story h3::before { content: ""; width: 26px; height: 1px; background: var(--gold); flex: none; }
.story p { margin-bottom: 14px; }
.story .story-key {
  margin: 22px 0;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 500;
  color: var(--gold-deep);
}

/* 16. GALERIES DE PROJET (photos chronologiques) ---------------------- */
.gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: #17150f; }
.gallery-frame { position: relative; aspect-ratio: 4 / 3; }
.gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 220ms var(--ease);
}
.gallery-slide.is-active { opacity: 1; }
.gallery-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 19, 18, 0.55);
  color: var(--white);
  font-size: 1.05rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.gallery-nav:hover, .gallery-nav:focus-visible { background: rgba(183, 138, 73, 0.88); border-color: transparent; }
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
.gallery-count {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(20, 19, 18, 0.7);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* Cartes de projet cliquables (le vrai bouton est « Voir le projet ») */
.case-card { cursor: pointer; }
button.link-arrow {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}

@media (max-width: 560px) {
  .modal { padding: 10px; }
  /* Cibles tactiles : jamais sous 44px */
  .gallery-nav { width: 44px; height: 44px; }
  .modal-close { width: 44px; height: 44px; }
}

/* 17. PRISE DE RENDEZ-VOUS (parcours de la page Contact) -------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Les trois types de rendez-vous */
.paths--rdv { grid-template-columns: 1fr; gap: 12px; }
.rdv-card { align-items: center; gap: 14px; padding: 16px 18px; }
.rdv-card:focus-within { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.rdv-ico {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(184, 148, 93, 0.12);
  font-size: 1.3rem;
  transition: background 200ms var(--ease);
}
.rdv-card.is-selected .rdv-ico { background: rgba(184, 148, 93, 0.32); }
.rdv-body { display: grid; gap: 3px; }
.rdv-body b { font-size: 0.95rem; color: var(--ink); }
.rdv-body span { font-size: 0.84rem; color: var(--muted); line-height: 1.5; }

/* Calendrier MDB */
.mdb-cal { margin-top: 4px; }
.mdb-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mdb-cal-month {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  text-transform: capitalize;
}
.mdb-cal-nav {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-size: 1.2rem;
  line-height: 1;
  transition: background 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease);
}
.mdb-cal-nav:hover:not(:disabled), .mdb-cal-nav:focus-visible { background: var(--gold); color: var(--white); }
.mdb-cal-nav:disabled { opacity: 0.35; cursor: default; }
.mdb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.mdb-cal-dow {
  padding: 6px 0;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.mdb-cal-day {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted-2);
  font-size: 0.92rem;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.mdb-cal-day:disabled { opacity: 0.45; cursor: default; }
.mdb-cal-day:not(:disabled) {
  border-color: var(--line);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}
.mdb-cal-day:not(:disabled):hover { border-color: var(--gold); }
.mdb-cal-day.is-today:not(.is-selected) { border-color: var(--gold-deep); }
.mdb-cal-day.is-selected { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Horaires du jour choisi */
.mdb-slots-wrap { margin-top: 16px; }
.mdb-slots-title { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); }
.mdb-slots-title b { color: var(--ink); }
.mdb-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.mdb-slot {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  transition: background 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.mdb-slot:hover { border-color: var(--gold); }
/* Sélection en encre (comme les jours) : contraste AA garanti, blanc sur or ne l'est pas */
.mdb-slot.is-selected { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Court récapitulatif avant confirmation */
.slot-adresse { margin-bottom: 18px; }
.rdv-recap {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(184, 148, 93, 0.5);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.rdv-recap-title {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
}
.rdv-recap-lines { display: grid; gap: 8px; margin: 0 0 16px; }
.rdv-recap-lines div { display: flex; gap: 12px; align-items: baseline; }
.rdv-recap-lines dt {
  flex: none;
  width: 64px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.rdv-recap-lines dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.rdv-recap .form-note { margin-top: 12px; }

/* Les défilements programmés ne cachent jamais le titre d'étape
   sous l'en-tête sticky (~73 px). */
.slot-section, .rdv-recap, .final-confirm { scroll-margin-top: 90px; }
.final-confirm:focus { outline: none; }

/* Page de remerciement : créneau réservé et alerte d'envoi */
.merci-creneau {
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 18px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(20, 19, 18, 0.35);
  color: var(--white);
  font-weight: 600;
}
.merci-alerte {
  max-width: 62ch;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 2px solid var(--gold);
  background: rgba(20, 19, 18, 0.42);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--white);
  font-size: 0.92rem;
}
.merci-alerte a { color: var(--gold-soft); text-decoration: underline; }
.merci-agenda { margin: 26px 0 22px; }
.merci-agenda-label {
  margin: 0 0 10px;
  color: var(--gold-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.merci-agenda .button-row { margin-top: 0; }
/* Sur mobile la pastille passe sur deux lignes : angles adoucis plutôt que ovale */
@media (max-width: 560px) {
  .merci-creneau { border-radius: var(--radius-lg); }
}

/* Confirmation finale MDB (remplace le formulaire) */
.final-confirm { padding: clamp(10px, 3vw, 30px); text-align: center; }
.final-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  font-size: 1.5rem;
}
.final-confirm h3 {
  margin-bottom: 12px;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
}
.final-msg { max-width: 52ch; margin: 0 auto; color: var(--muted); }

/* Apparition douce des étapes révélées */
@keyframes mdbStepIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.step-appear { animation: mdbStepIn 320ms var(--ease); }

@media (max-width: 560px) {
  .rdv-card { align-items: flex-start; }
  .mdb-cal-grid { gap: 3px; }
  .mdb-slot { flex: 1 0 calc(25% - 8px); padding: 0 10px; text-align: center; justify-content: center; display: inline-flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .step-appear { animation: none; }
  .rdv-ico, .mdb-cal-day, .mdb-slot, .mdb-cal-nav { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal-box, .gallery-slide { transition: none; }
  .page-hero, .bg-ink { background-attachment: scroll; }
}