@charset "UTF-8";
/* =========================================================================
   Parc de Maisons-Laffitte — landing page
   Palette, typographie et atmosphère reprises du hero validé.
   Grille d'espacement : multiples de 4 / 8 / 16 / 24 / 32 / 48 / 64 px.
   ========================================================================= */

:root{
  /* couleurs — aucune valeur hexadécimale n'est écrite hors de ce bloc */
  --color-paper:#f2eee5;
  --color-ink:#24372c;
  --color-muted:#556155;
  --color-rule:#c7cdbe;
  --color-soft:#e4e5d8;
  --color-dark:#192b23;
  --color-dark-ink:#eeeadd;
  --color-dark-muted:#c2cab8;
  --color-dark-rule:#4b5e4f;
  --color-focus:#b19150;
  --color-shade:12 24 20;

  /* typographie */
  --font-serif:Georgia,"Times New Roman",serif;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;

  /* espacement */
  --gap-xs:8px;  --gap-sm:16px; --gap-md:24px;
  --gap-lg:32px; --gap-xl:48px; --gap-2xl:64px;
  --pad-section:96px;
  --gutter:6vw;

  color-scheme:light;
}

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

html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink);
  font:16px/1.65 var(--font-sans);
  -webkit-text-size-adjust:100%;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--font-serif);font-weight:400;letter-spacing:-.02em}
p{margin:0 0 var(--gap-sm)}
a{color:inherit}

/* ---------- utilitaires ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.skip{position:absolute;top:-64px;left:var(--gap-sm);z-index:100;background:var(--color-ink);color:var(--color-paper);padding:12px 16px;text-decoration:none}
.skip:focus{top:var(--gap-sm)}

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:3px;
}

.kicker{
  font:400 11px/1.5 var(--font-sans);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--color-muted);margin:0 0 var(--gap-sm);
}
.eyebrow{
  font:400 11px/1.5 var(--font-sans);
  letter-spacing:.18em;text-transform:uppercase;margin:0;
}
.note{font-size:13px;line-height:1.6;color:var(--color-muted);max-width:58ch}
.note--gap{margin-top:var(--gap-md)}
.note--rule{border-left:2px solid var(--color-rule);padding-left:var(--gap-sm);margin-top:var(--gap-lg)}
.rule{border-top:1px solid var(--color-rule);padding-top:var(--gap-sm);margin-top:var(--gap-md);font-size:14px}

.flag{
  font:400 11px/1 var(--font-sans);letter-spacing:.04em;
  color:var(--color-muted);text-decoration:none;
  border-bottom:1px dotted currentColor;white-space:nowrap;
  vertical-align:.15em;
}
.flag:hover{color:var(--color-ink)}

.btn{
  display:inline-flex;align-items:center;gap:var(--gap-xs);
  min-height:48px;padding:12px 20px;
  font:400 14px/1.4 var(--font-sans);text-decoration:none;
  border:1px solid currentColor;cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}
.btn--solid{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}
.btn--solid:hover{background:transparent;color:var(--color-ink)}
.btn--ghost{background:transparent;color:inherit}
.btn--ghost:hover{background:var(--color-ink);color:var(--color-paper)}
.btn--invert{background:var(--color-dark-ink);color:var(--color-dark);border-color:var(--color-dark-ink)}
.btn--invert:hover{background:transparent;color:var(--color-dark-ink)}
.btn--full{width:100%;justify-content:center}

/* Icône inline plutôt que le CDN Lucide : une seule icône sur la page ne
   justifie pas une requête réseau. Tracé issu du jeu Lucide. */
.icon{
  width:16px;height:16px;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

/* --- téléphone dans la barre du haut --- */
.topbar__phone{
  min-height:40px;padding:8px 14px;
  background:transparent;color:inherit;border-color:currentColor;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.topbar__phone:hover{background:var(--color-paper);color:var(--color-dark);border-color:var(--color-paper)}
.topbar.is-solid .topbar__phone:hover{background:var(--color-ink);color:var(--color-paper);border-color:var(--color-ink)}

/* --- barre d'appel fixe, mobile uniquement --- */
.callbar{
  position:fixed;z-index:60;
  left:var(--gutter);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:none;align-items:center;gap:var(--gap-xs);
  min-height:48px;padding:12px 18px;
  font:400 15px/1 var(--font-sans);font-variant-numeric:tabular-nums;
  text-decoration:none;white-space:nowrap;
  background:var(--color-ink);color:var(--color-paper);
  border:1px solid var(--color-ink);
  box-shadow:0 6px 24px rgb(var(--color-shade)/.35);
  opacity:0;transform:translateY(12px);
  /* Invisible ET inerte : à opacité nulle elle recouvrirait les repères
     d'étape du hero, qui sont au même endroit de l'écran, et les rendrait
     incliquables. visibility la sort aussi de l'ordre de lecture. */
  visibility:hidden;pointer-events:none;
  transition:opacity .25s ease-out,transform .25s ease-out,visibility 0s linear .25s;
}
.callbar .icon{width:18px;height:18px}
.callbar.is-visible{
  opacity:1;transform:none;
  visibility:visible;pointer-events:auto;
  transition-delay:0s,0s,0s;
}

/* --- appel direct dans la section contact --- */
.calldirect{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--gap-xs) var(--gap-sm);
  margin:var(--gap-md) 0;
}
.calldirect__label{font-size:13px;color:var(--color-muted)}
.calldirect__number{
  display:inline-flex;align-items:center;gap:var(--gap-xs);
  font:400 26px var(--font-serif);font-variant-numeric:tabular-nums;
  text-decoration:none;border-bottom:1px solid var(--color-rule);
  padding-bottom:2px;
}
.calldirect__number .icon{width:20px;height:20px;stroke-width:1.6}
.calldirect__number:hover{border-bottom-color:currentColor}

/* ---------- barre persistante ---------- */
.topbar{
  position:fixed;inset:0 0 auto;z-index:50;
  display:flex;align-items:center;gap:var(--gap-md);
  padding:12px var(--gutter);
  background:rgb(var(--color-shade)/.72);
  color:var(--color-paper);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease;
}
.topbar.is-solid{
  background:var(--color-paper);
  color:var(--color-ink);
  border-bottom-color:var(--color-rule);
}
.topbar__brand{display:grid;text-decoration:none;line-height:1.3}
.topbar__brand strong{font:400 12px/1.3 var(--font-sans);letter-spacing:.16em}
.topbar__brand span{font-size:10px;letter-spacing:.1em;opacity:.75}
.topbar__nav{display:flex;gap:var(--gap-md);margin-left:auto;font-size:13px}
.topbar__nav a{text-decoration:none;padding:8px 0;border-bottom:1px solid transparent}
.topbar__nav a:hover{border-bottom-color:currentColor}
.topbar__price{margin:0;font:400 18px var(--font-serif);white-space:nowrap}
.topbar__cta{min-height:40px;padding:8px 16px;font-size:13px;background:transparent;color:inherit;border-color:currentColor}
.topbar__cta:hover{background:currentColor}
.topbar__cta:hover span,.topbar__cta:hover{color:var(--color-dark)}
.topbar.is-solid .topbar__cta:hover{color:var(--color-paper)}

/* =========================================================================
   HERO — séquence photographique, progression liée au scroll
   ========================================================================= */
/* Le hero occupe un écran et ne retient pas le scroll : la page descend
   normalement, et les étapes changent au clic sur les repères. */
.hero{position:relative;background:var(--color-dark)}
.hero__frame{
  position:relative;height:100svh;min-height:560px;
  overflow:hidden;isolation:isolate;
  color:var(--color-paper);
}
/* isolation: les z-index des photos et du voile doivent rester confinés ici,
   sinon ils passent au-dessus du texte et des repères d'étape, qui deviennent
   alors incliquables. */
.hero__stage{position:absolute;inset:0;background:var(--color-dark);isolation:isolate}

/* Les photos sont empilées dans l'ordre : la suivante passe au-dessus et se
   découvre par un masque directionnel, plutôt que par un fondu croisé qui
   laisserait voir les deux images superposées. */
.hero__shot{
  position:absolute;inset:0;margin:0;overflow:hidden;
  --r:0;
  -webkit-mask-image:linear-gradient(to top,#000 calc(var(--r) * 120% - 19%),transparent calc(var(--r) * 120% - 1%));
          mask-image:linear-gradient(to top,#000 calc(var(--r) * 120% - 19%),transparent calc(var(--r) * 120% - 1%));
}
/* z-index posé en JS : la photo qui arrive passe au sommet de la pile. */
.hero__shot{z-index:1}
/* À découvert complet, on retire le masque : pas de calque coûteux permanent. */
.hero__shot.is-open{-webkit-mask-image:none;mask-image:none}
.hero__shot.is-hidden{visibility:hidden}
.hero__shot img{
  position:absolute;left:0;top:0;
  max-width:none;transform-origin:0 0;
}
/* will-change réservé aux photos réellement en mouvement (piloté en JS). */
.hero__shot.is-live img{will-change:transform}

/* Au-dessus de toutes les photos : c'est ce dégradé qui rend
   le texte lisible, il ne doit jamais passer sous une image. */
.hero__shade{
  position:absolute;inset:0;pointer-events:none;z-index:100;
  background:
    linear-gradient(90deg,rgb(var(--color-shade)/.9) 0%,rgb(var(--color-shade)/.55) 42%,rgb(var(--color-shade)/.08) 78%),
    linear-gradient(0deg,rgb(var(--color-shade)/.6) 0%,transparent 34%);
}

.hero__topline{
  position:absolute;top:80px;left:var(--gutter);right:var(--gutter);
  display:flex;justify-content:space-between;gap:var(--gap-sm);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

.hero__copy{
  position:absolute;left:var(--gutter);bottom:96px;
  width:min(46%,520px);
}
/* Le conteneur reste visible le temps que ses lignes sortent, puis se retire. */
.hero__chapter{
  position:absolute;bottom:0;left:0;right:0;
  visibility:hidden;transition:visibility 0s linear .2s;
}
.hero__chapter.is-current{position:relative;visibility:visible;transition-delay:0s}

/* Entrée décalée ligne par ligne : kicker, titre, description, chiffre.
   Sortie plus rapide que l'entrée — on a déjà lu le texte qui s'en va. */
.hero__chapter > *{
  opacity:0;transform:translateY(16px);filter:blur(6px);
  transition:opacity .2s ease-in,transform .2s ease-in,filter .2s ease-in;
}
.hero__chapter.is-current > *{
  opacity:1;transform:none;filter:none;
  transition:opacity .4s ease-out,transform .4s ease-out,filter .4s ease-out;
}
.hero__chapter.is-current > :nth-child(2){transition-delay:.04s}
.hero__chapter.is-current > :nth-child(3){transition-delay:.08s}
.hero__chapter.is-current > :nth-child(4){transition-delay:.12s}
.hero__title{
  font:400 clamp(36px,5.2vw,64px)/1.04 var(--font-serif);
  letter-spacing:-.03em;margin:var(--gap-md) 0;
}
.hero__desc{font-size:15px;line-height:1.7;max-width:38ch;margin:0 0 var(--gap-md)}
.hero__fact{font:400 24px var(--font-serif);margin:0}
.hero__fact .flag{color:inherit;opacity:.8}
.hero__actions{
  display:flex;flex-wrap:wrap;gap:var(--gap-xs);
  margin:var(--gap-lg) 0 0;
}
.hero__copy .btn--solid{background:var(--color-paper);color:var(--color-dark);border-color:var(--color-paper)}
.hero__copy .btn--solid:hover{background:transparent;color:var(--color-paper)}
.hero__copy .btn--ghost{border-color:rgb(255 255 255/.5)}

.hero__rail{
  position:absolute;right:var(--gutter);bottom:96px;
  display:grid;gap:var(--gap-xs);
}
.hero__rail button{
  display:flex;align-items:baseline;gap:var(--gap-xs);
  min-height:44px;padding:8px 14px;
  font:400 12px/1.4 var(--font-sans);letter-spacing:.06em;
  color:var(--color-paper);background:rgb(var(--color-shade)/.45);
  border:1px solid rgb(255 255 255/.28);cursor:pointer;
  transition:background-color .25s ease,color .25s ease;
}
.hero__rail button span{font-family:var(--font-serif);font-size:14px;opacity:.7}
.hero__rail button[aria-current="true"]{background:var(--color-paper);color:var(--color-dark);border-color:var(--color-paper)}
.hero__rail button[aria-current="true"] span{opacity:1}

.hero__scrollhint{
  position:absolute;left:var(--gutter);bottom:40px;margin:0;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.75;
  transition:opacity .3s ease;
}
.hero__scrollhint.is-hidden{opacity:0}

/* =========================================================================
   BANDE DE FAITS
   ========================================================================= */
.facts{
  padding:var(--gap-lg) var(--gutter);
  background:var(--color-soft);
  border-bottom:1px solid var(--color-rule);
}
.facts dl{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--gap-md);margin:0;
}
.facts dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted)}
.facts dd{margin:var(--gap-xs) 0 0;font:400 22px var(--font-serif)}
.facts__note{display:block;font:400 11px var(--font-sans);letter-spacing:.1em;color:var(--color-muted)}

/* =========================================================================
   SECTIONS
   ========================================================================= */
.section{
  padding:var(--pad-section) var(--gutter);
  border-top:1px solid var(--color-rule);
}
.section h2{font-size:clamp(34px,4.6vw,56px);line-height:1.06;margin:0 0 var(--gap-md)}
.section h2 em{font-style:italic;color:var(--color-muted)}
.section h3{font-size:26px;line-height:1.2;margin:0 0 var(--gap-sm)}
.section p{max-width:62ch}

.section--dark{
  background:var(--color-dark);color:var(--color-dark-ink);
  border-top-color:var(--color-dark-rule);
}
.section--dark .kicker,
.section--dark .note,
.section--dark h2 em{color:var(--color-dark-muted)}
.section--dark .rule,
.section--dark .note--rule{border-color:var(--color-dark-rule)}

/* --- deux colonnes texte / images --- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-2xl);align-items:start}
.split--reverse .split__text{order:2}
/* La colonne de texte accompagne la colonne d'images plutôt que de laisser un vide. */
.split__text{position:sticky;top:96px}
.split__media{display:grid;gap:var(--gap-md)}

/* --- figures --- */
.shot{margin:0}
.shot img{width:100%;object-fit:cover;background:var(--color-soft)}
.shot--tall img{aspect-ratio:3/4}
.shot:not(.shot--tall):not(.shot--wide) img{aspect-ratio:3/2}
.shot--wide{margin-top:var(--gap-xl)}
.shot--wide img{aspect-ratio:21/9}
.shot figcaption{
  margin-top:var(--gap-xs);
  font-size:12px;line-height:1.5;color:var(--color-muted);
}
.section--dark .shot figcaption{color:var(--color-dark-muted)}

.gallery{display:grid;gap:var(--gap-md);margin-top:var(--gap-xl)}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--3{grid-template-columns:repeat(3,1fr)}

/* --- architecture --- */
.archi__head{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--gap-2xl);align-items:end}
.pull{
  margin:var(--gap-xl) 0 0;padding:0;
  font:400 clamp(22px,2.6vw,30px)/1.35 var(--font-serif);
  max-width:34ch;
}

/* --- chiffres --- */
.metrics{display:flex;flex-wrap:wrap;gap:var(--gap-lg);margin:var(--gap-md) 0 0}
.metrics strong{display:block;font:400 40px/1 var(--font-serif)}
.metrics span{font-size:12px;color:var(--color-muted)}

/* --- inventaire --- */
.inventory{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--gap-2xl);align-items:start}
/* Comme les autres sections en deux colonnes : le texte accompagne la liste
   plutôt que de laisser un vide sous lui. */
.inventory__intro{position:sticky;top:96px}

details{border-top:1px solid var(--color-rule);padding:var(--gap-sm) 0}
details:last-of-type{border-bottom:1px solid var(--color-rule)}
summary{
  display:flex;justify-content:space-between;align-items:center;gap:var(--gap-sm);
  min-height:32px;cursor:pointer;list-style:none;font-size:17px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 22px var(--font-serif);line-height:1}
details[open] summary::after{content:"−"}
details p{font-size:14px;margin:var(--gap-sm) 0 0;max-width:62ch}
.standalone{margin-top:var(--gap-lg)}

/* --- onglets scénarios --- */
.tabs{display:flex;border-bottom:1px solid var(--color-rule);margin:var(--gap-xl) 0 0}
.tabs button{
  flex:1;min-height:56px;padding:16px var(--gap-xs);
  font:400 18px var(--font-serif);
  color:var(--color-ink);background:transparent;
  border:0;border-bottom:3px solid transparent;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.tabs button[aria-selected="true"]{border-bottom-color:var(--color-ink);background:var(--color-soft)}
.tabs__panel{
  display:grid;grid-template-columns:auto 1fr;gap:var(--gap-xl);
  align-items:start;padding-top:var(--gap-lg);min-height:176px;
}
.tabs__index{font:400 88px/1 var(--font-serif);color:var(--color-rule);margin:0}

/* --- droits --- */
.rights{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);margin:var(--gap-xl) 0 0}
.rights__card{padding:var(--gap-lg);border:1px solid var(--color-rule)}
.rights__card--alt{background:var(--color-soft)}
.rights__number{font:400 40px var(--font-serif);margin:0 0 var(--gap-xs)}

/* --- prix --- */
.price{text-align:center}
.price h2,.price p{margin-left:auto;margin-right:auto}
.price__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap-xs) var(--gap-md);
  list-style:none;padding:0;margin:var(--gap-lg) auto var(--gap-md);font-size:14px;
}
.price__list li{border:1px solid var(--color-dark-rule);padding:8px 16px}
.price__amount{
  font:400 clamp(44px,8vw,88px)/1 var(--font-serif);
  letter-spacing:-.03em;margin:var(--gap-lg) 0 var(--gap-sm);
}

/* --- cadre de la vente : avocat mandataire --- */
.mandate{background:var(--color-soft)}
.mandate__head{display:grid;grid-template-columns:minmax(0,62ch) minmax(0,496px);justify-content:space-between;gap:var(--gap-2xl);align-items:end}
.mandate__intro{max-width:62ch}
.lawyer{display:grid;grid-template-columns:200px 1fr;gap:var(--gap-md);align-items:end;margin:0}
.lawyer img{width:100%;aspect-ratio:864/1184;object-fit:cover}
.lawyer figcaption p{font-size:14px;color:var(--color-muted);margin:0}
.lawyer .lawyer__name{font:400 22px/1.2 var(--font-serif);color:var(--color-ink);margin-bottom:4px}
.lawyer .lawyer__role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--gap-sm)}
.mandate__list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap-lg);
  list-style:none;padding:0;margin:var(--gap-xl) 0 0;
}
.mandate__list li{padding-top:var(--gap-sm);border-top:1px solid var(--color-rule)}
.mandate__list h3{font-size:20px;margin:0 0 var(--gap-xs)}
.mandate__list p{font-size:14px;margin:0;color:var(--color-muted);max-width:none}

/* --- formulaire --- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-2xl);align-items:start}
.contact > div:first-child{position:sticky;top:96px}
#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-md)}
.field{display:grid;gap:var(--gap-xs);margin:0}
.field--wide{grid-column:1/-1}
.field label{font-size:12px;letter-spacing:.06em;color:var(--color-muted)}
.field__opt{letter-spacing:0}
.field input,.field select,.field textarea{
  width:100%;min-width:0;padding:10px 0;
  font:16px/1.5 var(--font-sans);color:var(--color-ink);
  background:transparent;border:0;border-bottom:1px solid var(--color-rule);border-radius:0;
}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--color-muted)}
.field textarea{resize:vertical}
.field__error{font-size:12px;color:var(--color-focus)}
.field.has-error input,.field.has-error select{border-bottom-color:var(--color-focus)}
.form-status{
  grid-column:1/-1;margin:0;padding:var(--gap-sm);
  font-size:13px;line-height:1.6;color:var(--color-muted);
  background:var(--color-soft);border-left:2px solid var(--color-rule);
}
/* Information obligatoire au moment de la collecte : lisible, jamais masquée.
   display:block est indispensable — .field met ses enfants en grille, ce qui
   renvoyait chaque <strong> et chaque lien sur sa propre ligne et hachait le
   paragraphe en fragments illisibles. */
.privacy{
  display:block;
  font-size:12px;line-height:1.65;color:var(--color-muted);
  padding-top:var(--gap-xs);border-top:1px solid var(--color-rule);
}
.privacy strong{color:var(--color-ink)}
.privacy a{text-decoration:underline}

/* --- fiche technique --- */
.techsheet{background:var(--color-soft)}
.techsheet__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-xl);margin-top:var(--gap-lg)}
.techsheet dl{margin:0}
.techsheet dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-muted);margin-top:var(--gap-md)}
.techsheet dl > dt:first-child{margin-top:0}
.techsheet dd{margin:var(--gap-xs) 0 0;font-size:15px}
.techsheet__risks{
  margin-top:var(--gap-xl);padding-top:var(--gap-md);
  border-top:1px solid var(--color-rule);
}
.techsheet__risks h3{font-size:20px}
.techsheet__risks p{font-size:13px;line-height:1.7;color:var(--color-muted);max-width:78ch}

/* --- pied de page --- */
.sitefoot{
  padding:var(--gap-lg) var(--gutter);
  border-top:1px solid var(--color-rule);
  font-size:12px;line-height:1.7;color:var(--color-muted);
}
.sitefoot p{margin:0 0 var(--gap-xs);max-width:80ch}
.sitefoot__links{display:flex;flex-wrap:wrap;gap:var(--gap-sm);margin-bottom:var(--gap-sm)}
.sitefoot__links a{color:var(--color-ink)}

/* =========================================================================
   PAGE MENTIONS LÉGALES
   ========================================================================= */
/* La barre du haut n'est pas fixe sur cette page : pas de retrait à compenser. */
.legal{
  max-width:88ch;
  padding:var(--gap-2xl) var(--gutter) var(--pad-section);
}
.legal h1{font-size:clamp(34px,4.6vw,52px);line-height:1.08;margin:0 0 var(--gap-lg)}
.legal h1 em{font-style:italic;color:var(--color-muted)}
.legal h2{
  font:400 26px/1.2 var(--font-serif);
  margin:var(--gap-xl) 0 var(--gap-sm);
  padding-top:var(--gap-md);border-top:1px solid var(--color-rule);
}
.legal h3{font:400 17px/1.4 var(--font-sans);letter-spacing:.02em;margin:var(--gap-md) 0 var(--gap-xs)}
.legal p{max-width:78ch;font-size:15px}
.legal__lead{font:400 19px/1.6 var(--font-serif);max-width:66ch}
.legal__warning{
  margin:var(--gap-lg) 0;padding:var(--gap-sm) var(--gap-md);
  background:var(--color-soft);border-left:3px solid var(--color-focus);
}
.legal__warning p{margin:0;font-size:14px}
.legal__dl{display:grid;grid-template-columns:auto 1fr;gap:var(--gap-xs) var(--gap-md);margin:0}
.legal__dl dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);padding-top:2px}
.legal__dl dd{margin:0;font-size:15px}
.legal__back{margin-top:var(--gap-2xl)}
.page-legal .topbar{position:static}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .topbar__nav{display:none}
}

@media (max-width:860px){
  :root{--pad-section:64px;--gutter:24px}
  html{scroll-padding-top:72px}

  .topbar{gap:var(--gap-sm);padding:8px var(--gutter)}
  .topbar__brand span{display:none}
  /* Le numéro passe dans la barre d'appel fixe : la barre du haut est trop
     étroite pour porter le prix, le téléphone et le CTA. */
  .topbar__phone{display:none}
  .callbar{display:inline-flex}
  .topbar__price{margin-left:auto;font-size:16px}
  .topbar__cta{padding:8px 12px}
  .topbar__cta span{display:none}

  /* La barre persistante porte déjà la localisation : on évite le doublon. */
  .hero__topline{display:none}

  .hero__copy{left:var(--gutter);right:var(--gutter);bottom:180px;width:auto}
  .hero__title{font-size:clamp(30px,9vw,42px)}
  .hero__desc{font-size:14px}
  /* Pas de flou sur mobile : coûteux en GPU pour un gain invisible. */
  .hero__chapter > *,.hero__chapter.is-current > *{filter:none}
  .hero__shade{background:
    linear-gradient(0deg,rgb(var(--color-shade)/.92) 18%,rgb(var(--color-shade)/.4) 62%,rgb(var(--color-shade)/.25) 100%)}
  .hero__topline{top:64px;font-size:10px}
  .hero__rail{
    right:var(--gutter);left:var(--gutter);bottom:32px;
    grid-template-columns:repeat(4,1fr);
  }
  .hero__rail button{flex-direction:column;align-items:flex-start;gap:0;padding:8px 10px;font-size:10px}
  .hero__scrollhint{display:none}

  .split,.archi__head,.inventory,.contact,.rights,.tabs__panel,.techsheet__grid{
    grid-template-columns:1fr;gap:var(--gap-lg);
  }
  .split--reverse .split__text{order:0}
  /* En colonne unique, le texte précède les images : plus rien à accompagner. */
  .split__text,.contact > div:first-child,.inventory__intro{position:static}
  .shot--wide img{aspect-ratio:3/2}
  .gallery--2,.gallery--3,.mandate__list,.mandate__head{grid-template-columns:1fr}
  .mandate__head{gap:var(--gap-lg)}
  .lawyer{grid-template-columns:40% 1fr;align-items:start}
  .legal__dl{grid-template-columns:1fr;gap:2px var(--gap-sm)}
  .legal__dl dd{margin-bottom:var(--gap-sm)}
  .legal{padding-top:var(--gap-lg)}
  .tabs__index{display:none}
  .tabs button{font-size:15px}
  #contact-form{grid-template-columns:1fr}
  .field--wide{grid-column:1}
  .metrics{gap:var(--gap-md)}
  .metrics strong{font-size:32px}
}

@media (max-width:420px){
  .hero__rail button span{display:none}
}

/* =========================================================================
   MOUVEMENT RÉDUIT
   Le hero redevient une photographie fixe et les quatre chapitres
   passent dans le flux : aucun contenu n'est masqué derrière une animation.
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }

  .hero__frame{position:static;height:auto;min-height:0;padding:120px 0 var(--gap-xl)}
  .hero__stage{position:relative;inset:auto;height:56vh;min-height:320px}
  .hero__shot img{position:absolute;width:100%;height:100%;object-fit:cover;transform:none}
  .hero__shot:not([data-shot="0"]){display:none}
  /* Ni masque, ni voile, ni flou : la photo est simplement fixe. */
  .hero__shot,.hero__shot.is-hidden{-webkit-mask-image:none;mask-image:none;visibility:visible}
  /* Le texte n'est plus posé sur la photo : l'assombrir n'a plus lieu d'être. */
  .hero__shade{display:none}
  .hero__topline{position:static;padding:0 var(--gutter);margin-bottom:var(--gap-md)}
  .hero__copy{position:static;width:auto;padding:var(--gap-xl) var(--gutter) 0}
  .hero__chapter{
    position:static;visibility:visible;
    padding-bottom:var(--gap-xl);
  }
  .hero__chapter > *{opacity:1;transform:none;filter:none;transition:none}
  .hero__chapter + .hero__chapter{border-top:1px solid var(--color-dark-rule);padding-top:var(--gap-xl)}
  .hero__rail{display:none}
  .hero__scrollhint{display:none}
}

@media print{
  .topbar,.hero__rail,.hero__scrollhint,.callbar,#contact-form{display:none !important}
  .hero__frame{position:static;height:auto}
}