/* ==========================================================================
   LEXORA AVOCATS — Metz
   Charte : Legora (papier crème, serif chuchoté, hairlines, zéro ombre)
   accordée aux couleurs du logo : marine profond + or.
   Voir DESIGN.md. Ne jamais introduire de #ffffff pur.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (relevées sur le logo) --- */
  --navy: #0f2547;          /* marine du lettrage LEXORA */
  --navy-deep: #091830;     /* marine assombri, fonds photographiques */
  --gold: #c69a46;          /* or de la balance et du filet AVOCATS */
  --gold-soft: #e3cfa4;     /* or désaturé, filets sur fond marine */

  /* --- Neutres --- */
  --parchment: #fefefc;     /* fond de page — ivoire chaud, jamais #fff */
  --parchment-2: #f7f6f1;   /* second fond, alternance de sections */
  --graphite: #0a0a0a;      /* corps de texte */
  --iron: #444444;          /* texte secondaire */
  --smoke: #6b6b6b;         /* légendes, eyebrows */
  --pewter: #98a7aa;        /* placeholders, états désactivés */
  --hairline: rgba(15, 37, 71, 0.16);
  --hairline-soft: rgba(15, 37, 71, 0.09);

  /* --- Typographie --- */
  --font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Échelle : 12 eyebrow · 13 mention · 14 chrome · 16 corps · 19 chapô */
  --text-eyebrow: 12px;
  --text-fine: 13px;
  --text-ui: 14px;
  --text-body: 16px;
  --text-lede: 19px;

  /* --- Espacement --- */
  --space-4: 4px;   --space-8: 8px;   --space-10: 10px; --space-12: 12px;
  --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px;
  --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
  --space-80: 80px;

  /* --- Layout --- */
  --page-max: 1200px;
  --measure: 62ch;
  --section-gap: 80px;

  /* --- Formes : le micro-rayon 2px est une signature, ne pas arrondir --- */
  --radius-button: 2px;
  --radius-card: 3px;
  --radius-input: 3px;

  --header-h: 88px;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--parchment);
  color: var(--graphite);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* --- Typographie ---------------------------------------------------------- */

.display, h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

h2, .heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--navy);
  text-wrap: balance;
}

h3, .heading-sm {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-lede);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--navy);
}

p { margin: 0; }

.lede {
  font-size: var(--text-lede);
  line-height: 1.5;
  color: var(--iron);
  max-width: 54ch;
}

.text-fine { font-size: var(--text-fine); line-height: 1.5; color: var(--smoke); }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-20); }
.prose a { color: var(--navy); text-underline-offset: 3px; }
.prose strong { color: var(--navy); font-weight: 500; }

/* Eyebrow — kicker éditorial, précédé d'un court filet or */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
  margin: 0 0 var(--space-16);
}
/* --rule-scale pilote le tracé des filets or (voir main.js). Il vaut 1 par
   défaut : sans JavaScript, les filets sont simplement là, entiers. */
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex: none;
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: left center;
}

.muted { color: var(--smoke); }

/* --- Layout --------------------------------------------------------------- */

.wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--space-24); }

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: 56px; }
.section--alt { background: var(--parchment-2); }

.section + .section:not(.section--alt) { border-top: 1px solid var(--hairline-soft); }

.rule { border: 0; border-top: 1px solid var(--hairline-soft); margin: 0; }
.rule--spaced { margin-block: var(--space-40); }

/* Retire le filet par défaut d'une liste imbriquée dans un bloc encadré */
.list-plain--bare { border-top: 0; }
.list-plain--bare > li:first-child { border-top: 1px solid var(--hairline-soft); }
.list-plain--bare > li:last-child { border-bottom: 0; }

.split {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-64);
  align-items: center;
}
.split--top { align-items: start; }

.stack-16 > * + * { margin-top: var(--space-16); }
.stack-24 > * + * { margin-top: var(--space-24); }

/* Les utilitaires d'espacement .mt-* sont regroupés en fin de feuille — voir
   le commentaire là-bas pour la raison. */

.measure-short { max-width: 18ch; }
.measure-mid { max-width: 22ch; }

/* --- Boutons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: var(--radius-button);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Un seul bouton plein par écran */
.btn--solid { background: var(--navy); color: var(--parchment); border-color: var(--navy); }
.btn--solid:hover { background: transparent; color: var(--navy); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--navy); }

.on-dark .btn--solid { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.on-dark .btn--solid:hover { background: transparent; color: var(--gold); }
.on-dark .btn--ghost { color: var(--parchment); border-color: rgba(254, 254, 252, 0.4); }
.on-dark .btn--ghost:hover { border-color: var(--parchment); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* --- Header --------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--parchment);
  border-bottom: 1px solid var(--hairline-soft);
}

.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

/* Le fichier logo comporte une marge blanche interne : la hauteur affichée doit
   être généreuse pour que la ligne « AVOCATS » reste lisible. */
/* Sur desktop le logo est le seul chemin vers l'accueil : il lui faut donc un
   état de survol, sans quoi rien ne signale qu'il est cliquable. */
.wordmark { display: block; text-decoration: none; transition: opacity 0.18s ease; }
.wordmark:hover { opacity: 0.72; }
.wordmark img { height: 52px; width: auto; }

.nav { display: flex; align-items: center; gap: var(--space-32); }

/* Le logo ramène déjà à l'accueil : le lien fait doublon dans la barre.
   On le rétablit dans le menu mobile (voir plus bas), où l'on parcourt une
   liste fermée et où le repère du logo est moins immédiat. */
.nav__home { display: none; }

.nav a {
  font-size: var(--text-ui);
  text-decoration: none;
  color: var(--iron);
  padding-block: var(--space-4);
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav a:hover { color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }

/* Le CTA est un bouton, pas un lien de nav : la règle de page courante
   ci-dessus le repeindrait en marine sur marine et le rendrait illisible. */
.nav a.btn--solid,
.nav a.btn--solid[aria-current="page"] {
  color: var(--parchment);
  border-bottom-color: var(--navy);
}
.nav a.btn--solid:hover { color: var(--navy); border-bottom-color: var(--navy); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-button);
  padding: 9px 15px;
  font-family: var(--font-body);
  font-size: var(--text-fine);
  color: var(--navy);
  cursor: pointer;
}

/* --- Hero ----------------------------------------------------------------- */

/* Un seul bloc photographique sombre par page */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: var(--parchment);
  padding-block: 148px 96px;
  overflow: hidden;
}

/* Le calque déborde de 20 % en haut et en bas : c'est la réserve dans laquelle
   le parallaxe se déplace. Attention, yPercent est relatif à la hauteur du
   calque, pas à celle du hero : à 20 % de réserve, le calque fait 140 % du hero,
   donc un yPercent de 12 déplace 16,8 % de la hauteur du hero. Il reste 3 points
   de marge. Descendre la réserve à 15 % découvrait une bande en haut. */
.hero__media {
  position: absolute;
  inset: -20% 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.3;
  will-change: transform;
}
/* Voile marine : sans lui, la photo tire vers le brun et jure avec le logo */
.hero__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9,24,48,.62) 0%, rgba(9,24,48,.78) 100%);
}

.hero .wrap { position: relative; }
.hero h1 { color: var(--parchment); max-width: 15ch; }
.hero .eyebrow { color: rgba(254, 254, 252, 0.66); }
.hero .eyebrow::before { background: var(--gold); }

.hero__lede {
  color: rgba(254, 254, 252, 0.74);
  max-width: 48ch;
  font-size: var(--text-lede);
  line-height: 1.5;
  margin-top: var(--space-24);
}

.hero__actions { margin-top: var(--space-40); }

/* En-tête des pages intérieures — sobre, sans photo */
.page-head { padding-block: 88px 56px; border-bottom: 1px solid var(--hairline-soft); }
.page-head h1 { max-width: 16ch; }
.page-head .lede { margin-top: var(--space-24); }

/* --- Barre de réassurance ------------------------------------------------- */

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); }

/* Le filet est un pseudo-élément et non un border-top : une bordure ne se
   laisse pas tracer par scaleX. */
.fact { position: relative; padding-top: var(--space-20); }
.fact::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: left center;
}
.fact__value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.1;
  color: var(--navy);
}
.fact__label { font-size: var(--text-fine); color: var(--smoke); margin-top: var(--space-8); }

/* --- Cartes ---------------------------------------------------------------
   Plus de washes pastel : surface papier, filet or en tête, hairline autour.
   Aucune ombre — la charte sépare par filets, jamais par élévation.
   ------------------------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }

.card {
  position: relative;
  background: var(--parchment);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-card);
  padding: var(--space-32);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Filet or en tête de carte : le seul accent chromatique */
.card::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  opacity: 0.75;
  transition: opacity 0.2s ease;
  transform: scaleX(var(--rule-scale, 1));
  transform-origin: left center;
}
.card:hover { border-color: var(--hairline); background: var(--parchment-2); }
.card:hover::before { opacity: 1; }

.card__index {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.card h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.card p { font-size: var(--text-body); line-height: 1.55; color: var(--iron); }

.card ul {
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
  color: var(--iron);
}
.card ul li { padding-block: 9px; border-top: 1px solid var(--hairline-soft); }

/* Carte sur fond marine, pour un bloc d'accentuation */
.card--navy {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--parchment);
}
.card--navy h3, .card--navy p { color: var(--parchment); }
.card--navy p { color: rgba(254, 254, 252, 0.76); }
.card--navy .card__index { color: var(--gold-soft); }
.card--navy ul { color: rgba(254, 254, 252, 0.76); }
.card--navy ul li { border-top-color: rgba(254, 254, 252, 0.16); }
.card--navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); }

/* Liste numérotée sur filets */
.list-plain { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-soft); }
.list-plain li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-24);
  padding-block: var(--space-24);
  border-bottom: 1px solid var(--hairline-soft);
}
.list-plain .num {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 5px;
}
.list-plain h3 { margin-bottom: var(--space-8); }
.list-plain p { color: var(--iron); font-size: var(--text-body); max-width: 60ch; }

/* --- Panneau marine (CTA) ------------------------------------------------- */

.panel-dark { background: var(--navy); color: var(--parchment); padding-block: 96px; }
.panel-dark h2 { color: var(--parchment); max-width: 18ch; }
.panel-dark p { color: rgba(254, 254, 252, 0.74); max-width: 50ch; }
.panel-dark .eyebrow { color: rgba(254, 254, 252, 0.66); }

/* --- Formulaire ----------------------------------------------------------- */

.form { display: grid; gap: var(--space-20); }

.field { display: grid; gap: var(--space-8); }
.field label { font-size: var(--text-fine); font-weight: 500; color: var(--navy); }
.field .hint { font-size: var(--text-fine); color: var(--smoke); font-weight: 400; }

/* 16px minimum : en dessous, iOS zoome à la mise au point */
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--graphite);
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-input);
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--pewter); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(198, 154, 70, 0.22);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }

.consent {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: var(--space-12);
  align-items: start;
  font-size: var(--text-fine);
  font-weight: 400;
  color: var(--iron);
  line-height: 1.5;
}
.consent input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); }

/* --- Bloc coordonnées ----------------------------------------------------- */

.contact-block {
  background: var(--parchment-2);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-card);
  padding: var(--space-32);
}
.contact-block p { font-size: var(--text-body); line-height: 1.55; color: var(--iron); }
.contact-block dl { margin: 0; }
.contact-block dt {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  margin-top: var(--space-24);
}
.contact-block dt:first-child { margin-top: 0; }
.contact-block dd { margin: var(--space-4) 0 0; font-size: var(--text-body); line-height: 1.5; }
.contact-block dd a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.contact-block dd a:hover { color: var(--navy); }

.contact-block--navy { background: var(--navy); border-color: var(--navy); color: var(--parchment); }
.contact-block--navy p { color: rgba(254, 254, 252, 0.78); }
.contact-block--navy .eyebrow { color: rgba(254, 254, 252, 0.66); }
.contact-block--plain { background: var(--parchment); }

/* --- Plan d'accès --------------------------------------------------------- */

.map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--hairline-soft);
  background: var(--parchment-2);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Fiche professionnelle ------------------------------------------------ */
/* Mentions réglementées et repères de crédibilité : serment, toque, formation.
   Volontairement en petit corps — c'est de la donnée de vérification, pas du
   discours commercial. */

.person__meta {
  margin: var(--space-16) 0 0;
  padding-top: var(--space-12);
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--text-fine);
  line-height: 1.5;
  color: var(--smoke);
}
.person__meta div + div { margin-top: var(--space-4); }
.person__meta strong { color: var(--iron); font-weight: 500; }

.fiche {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);
  margin: 0;
}
.fiche dt {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
  padding-top: var(--space-16);
  border-top: 1px solid var(--gold);
}
.fiche dd {
  margin: var(--space-8) 0 0;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--iron);
}

@media (max-width: 900px) {
  .fiche { grid-template-columns: 1fr 1fr; gap: var(--space-24); }
}
@media (max-width: 560px) {
  .fiche { grid-template-columns: 1fr; }
}

/* --- Tableau honoraires --------------------------------------------------- */

.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--text-body); min-width: 540px; }
.table th, .table td {
  text-align: left;
  padding: var(--space-16) var(--space-16) var(--space-16) 0;
  border-bottom: 1px solid var(--hairline-soft);
  vertical-align: top;
}
.table thead th { border-bottom: 1px solid var(--navy); }
.table th {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--smoke);
}
.table td:last-child { white-space: nowrap; color: var(--navy); font-weight: 500; }

/* --- Équipe --------------------------------------------------------------- */

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-32); }

.person__portrait {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
  border-radius: var(--radius-card);
  background: var(--parchment-2);
  margin-bottom: var(--space-20);
  filter: grayscale(1) contrast(1.02);
  transition: filter 0.3s ease;
}
.person:hover .person__portrait { filter: grayscale(0); }

.person h3 { font-family: var(--font-display); font-weight: 300; font-size: 26px; color: var(--navy); }
.person .role {
  font-size: var(--text-fine);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-4);
}
.person p { color: var(--iron); font-size: var(--text-body); margin-top: var(--space-16); }

/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--hairline-soft); }
.faq details { border-bottom: 1px solid var(--hairline-soft); }
.faq summary {
  cursor: pointer;
  padding-block: var(--space-20);
  font-size: var(--text-lede);
  font-weight: 500;
  color: var(--navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; color: var(--gold); font-size: 24px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--space-24); color: var(--iron); max-width: 66ch; }

/* --- Footer --------------------------------------------------------------- */

/* Marine assombri : sans cet écart, le pied de page se confond avec le CTA
   qui le précède, et le bas de page devient un seul aplat de 400 px. */
.site-footer {
  background: var(--navy-deep);
  color: rgba(254, 254, 252, 0.76);
  padding-block: var(--space-64) var(--space-32);
  font-size: var(--text-ui);
}
.site-footer .wordmark img { height: 58px; filter: brightness(0) invert(1) opacity(0.92); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-40); }

.footer-blurb { margin-top: var(--space-20); max-width: 34ch; color: rgba(254, 254, 252, 0.6); }

.site-footer h4 {
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 var(--space-16);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-10); }
.site-footer a { color: rgba(254, 254, 252, 0.76); text-decoration: none; }
.site-footer a:hover { color: var(--parchment); }

.footer-bottom {
  margin-top: var(--space-56);
  padding-top: var(--space-24);
  border-top: 1px solid rgba(254, 254, 252, 0.16);
  display: flex;
  justify-content: space-between;
  gap: var(--space-24);
  flex-wrap: wrap;
  font-size: var(--text-fine);
  color: rgba(254, 254, 252, 0.55);
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1000px) {
  .team { grid-template-columns: repeat(2, 1fr); gap: var(--space-40); }
}

@media (max-width: 900px) {
  :root { --section-gap: 56px; }

  .nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--parchment);
    border-bottom: 1px solid var(--hairline);
    padding: var(--space-8) var(--space-24) var(--space-24);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: var(--space-16); border-bottom: 1px solid var(--hairline-soft); }
  .nav .btn { margin-top: var(--space-16); }
  .nav__home { display: block; }

  .site-header { position: relative; }
  .nav-toggle { display: block; }

  .split { grid-template-columns: 1fr; gap: var(--space-32); }
  .cards { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-32); }
  .hero { padding-block: 88px 64px; }
  .page-head { padding-block: 56px 40px; }
}

@media (max-width: 560px) {
  .team { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .list-plain li { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Utilitaires d'espacement --------------------------------------------
   Placés en dernier volontairement. Plusieurs composants remettent leur marge
   à zéro (.fiche, .list-plain, .rule…) ; à spécificité égale, c'est la règle
   la plus tardive qui gagne. Déclarés plus haut, ces utilitaires étaient
   silencieusement écrasés — un `mt-48` calculait 0 px sans qu'aucune erreur
   ne le signale. Ne pas les remonter dans le fichier.
   ------------------------------------------------------------------------- */

.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mt-20 { margin-top: var(--space-20); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-40 { margin-top: var(--space-40); }
.mt-48 { margin-top: var(--space-48); }
.mt-56 { margin-top: var(--space-56); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ── Bandeau de démonstration ─────────────────────────────────────
   Ajouté par alexcolas.com. Fixé en haut de l'écran et jamais masqué :
   quelle que soit la page d'arrivée ou la position de défilement, le
   visiteur doit savoir que ce commerce n'existe pas.
   L'en-tête du site est décalé d'autant — il est en position fixe et
   se serait superposé au bandeau. */
:root{ --demo-flag-h:2.75rem; }
@media (max-width:760px){ :root{ --demo-flag-h:3.9rem; } }

.demo-flag{
  position:fixed;top:0;left:0;right:0;z-index:99999;
  min-height:var(--demo-flag-h);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:.15rem 1rem;
  padding:.45rem 1.1rem;
  background:#17150f;color:#f2ece1;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.8rem;line-height:1.4;text-align:center;
  border-bottom:1px solid rgba(242,236,225,.2);
}
.demo-flag p{margin:0}
.demo-flag strong{color:#fff;font-weight:600}
.demo-flag__dot{width:.45rem;height:.45rem;border-radius:50%;background:#e0ac6f;flex:none}
.demo-flag a{color:#e0ac6f;text-decoration:underline;text-underline-offset:.2em;white-space:nowrap}
.demo-flag a:hover{color:#fff}
@media (max-width:760px){ .demo-flag{font-size:.75rem} }

body{ padding-top:var(--demo-flag-h); }

.site-header{ top:var(--demo-flag-h); }

/* <picture> est inline par défaut : sans cette règle, le portrait ne
   remplirait pas la carte. */
/* Les portraits sont enveloppés dans un <picture> pour servir du WebP.
   <picture> est inline par défaut : sans display:block, il ne remplirait
   pas la carte.
   height:auto est indispensable : l'attribut height="750" de l'image
   s'applique comme hauteur CSS, et aspect-ratio ne peut pas la contredire.
   Sans cette ligne, les portraits s'affichent en 264 × 750 au lieu de
   264 × 330. */
.person picture{display:block}
.person__portrait{height:auto}

/* Monogramme conservé comme repli : plus utilisé depuis que les portraits
   sont des visages générés, donc sans personne réelle derrière. Il avait
   remplacé des photos de banques d'images montrant de vraies personnes
   sous des identités d'avocats inventées — impubliable en l'état. */
.person__portrait--vide{
  aspect-ratio:4/5;width:100%;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-card);
  margin-bottom:var(--space-20);
  background:var(--navy);color:var(--gold);
  font-family:var(--font-display);font-weight:300;font-size:56px;
  letter-spacing:.06em;
}

/* Emplacement du plan, retiré pour la démonstration (voir contact.html). */
.map--absente{
  display:flex;align-items:center;justify-content:center;
  min-height:220px;padding:var(--space-20);
  border:1px dashed var(--gold);border-radius:var(--radius-card);
  background:var(--parchment-2);
}
.map--absente p{
  margin:0;text-align:center;
  font-size:var(--text-14);color:var(--ink-700);font-style:italic;
}