/* ==========================================================================
   Panonceau — feuille de style principale
   Direction artistique : panonceau ovale, plan cadastral, gravure, laiton.
   ========================================================================== */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-opsz-normal.woff2") format("woff2-variations"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0000-20AB, U+20AD-FFFF; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-opsz-italic.woff2") format("woff2-variations"); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-20AB, U+20AD-FFFF; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2-variations"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  /* Couleurs */
  --encre: #16202c;        /* encre bleu-noir : texte, fonds sombres */
  --encre-2: #222e3c;      /* fond sombre secondaire */
  --verge: #ecede6;        /* papier vergé : fond principal */
  --papier: #f7f7f3;       /* surfaces claires */
  --laiton: #9c7a3c;       /* laiton du panonceau : filets, accents */
  --laiton-clair: #c9a865; /* laiton sur fond sombre */
  --ardoise: #56606c;      /* texte secondaire */
  --cire: #7e2b25;         /* cire du sceau, usage minimal */
  --trait: rgba(22, 32, 44, .14);
  --trait-fort: rgba(22, 32, 44, .32);

  /* Typographie */
  --f-display: "Bodoni Moda", "Hanken Grotesk", "Didot", "Bodoni 72", Georgia, serif;
  --f-texte: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* Échelle (quarte juste sur grand écran) */
  --t-xs: .8125rem;
  --t-s: .9375rem;
  --t-m: 1.0625rem;
  --t-l: clamp(1.2rem, 1.05rem + .6vw, 1.42rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.2vw, 2.85rem);
  --t-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.1rem);
  --t-4xl: clamp(2.75rem, 1.4rem + 5.4vw, 5.9rem);

  /* Espacements (suite régulière) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4.5rem; --e-9: 7rem; --e-10: 10rem;
  --section: clamp(4.5rem, 3rem + 7vw, 10rem);

  --largeur: 1280px;
  --gouttiere: clamp(1rem, .5rem + 2.4vw, 2.5rem);
  --rayon: 3px;
  --ease: cubic-bezier(.22, .61, .21, 1);
  --header-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--verge);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* grain du papier */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .12 0 0 0 0 .17 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.site { position: relative; z-index: 1; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.08; letter-spacing: -.015em; font-optical-sizing: auto; }
h1 { font-size: var(--t-4xl); letter-spacing: -.025em; line-height: 1.02; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); line-height: 1.2; }
h4 { font-size: var(--t-l); line-height: 1.25; }
:focus-visible { outline: 2px solid var(--laiton); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--encre); color: var(--verge); }
.screen-reader-text, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 1rem; left: 1rem; z-index: 999; width: auto; height: auto; clip: auto; background: var(--encre); color: var(--papier); padding: .75rem 1rem; }

.wrap { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.wrap--etroit { max-width: 860px; }
.section { padding-block: var(--section); position: relative; }
.section--sombre { background: var(--encre); color: var(--verge); }
.section--papier { background: var(--papier); }
.chapeau { font-size: var(--t-l); line-height: 1.5; color: var(--ardoise); max-width: 38em; }
.section--sombre .chapeau { color: rgba(236, 237, 230, .72); }
.texte-sec { color: var(--ardoise); }

/* Titre de section : titre + texte côte à côte */
.entete { display: grid; gap: var(--e-5) var(--e-8); grid-template-columns: 1fr; margin-bottom: var(--e-8); align-items: end; }
@media (min-width: 900px) { .entete { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.entete h2 { max-width: 14em; }
.entete .chapeau { margin: 0; }

/* Filet double, comme le cadre d'un panonceau */
.filet { height: 5px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .35; }

/* ---------- Boutons ---------- */
.btn {
  --bg: var(--encre); --fg: var(--papier);
  position: relative; display: inline-flex; align-items: center; gap: .7em;
  padding: 1em 1.7em; border-radius: 999px; border: 1px solid var(--bg);
  background: var(--bg); color: var(--fg); font: 500 var(--t-s)/1 var(--f-texte); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--laiton);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); border-radius: inherit;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover { border-color: var(--laiton); }
.btn--clair { --bg: var(--verge); --fg: var(--encre); }
.btn--clair:hover { color: var(--encre); }
.btn--ligne { background: transparent; color: var(--encre); border-color: var(--trait-fort); }
.btn--ligne:hover { color: var(--papier); }
.section--sombre .btn--ligne { color: var(--verge); border-color: rgba(236,237,230,.35); }
.btn .ico { width: 1.05em; height: 1.05em; transition: transform .45s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.lien {
  display: inline-flex; align-items: center; gap: .55em; text-decoration: none; font-weight: 500; font-size: var(--t-s);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px; transition: background-size .5s var(--ease);
}
.lien:hover { background-size: 0 1px; background-position: 100% 100%; }
.lien .ico { width: 1em; height: 1em; transition: transform .4s var(--ease); }
.lien:hover .ico { transform: translateX(4px); }

/* ---------- En-tête ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  transition: background .4s var(--ease), height .4s var(--ease), box-shadow .4s var(--ease), transform .45s var(--ease);
}
.site-header.is-compact { --header-h: 68px; background: rgba(236, 237, 230, .9); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--trait); }
.site-header.is-cache { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: var(--e-6); }
.marque { display: flex; align-items: center; gap: .8rem; text-decoration: none; margin-right: auto; }
.marque__ovale { width: 30px; height: 40px; flex: none; color: var(--laiton); }
.marque__nom { font-family: var(--f-display); font-size: 1.32rem; line-height: 1; letter-spacing: -.01em; }
.marque__lieu { display: block; font-family: var(--f-texte); font-size: .74rem; color: var(--ardoise); letter-spacing: .02em; margin-top: .3rem; }
.custom-logo { max-height: 46px; width: auto; }

.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1rem, 2vw, 2.2rem); }
.nav-principale a { text-decoration: none; font-size: var(--t-s); position: relative; padding-block: .4rem; }
.nav-principale a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--laiton); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav-principale a:hover::after, .nav-principale .current-menu-item > a::after, .nav-principale .current_page_item > a::after { transform: scaleX(1); transform-origin: left; }
.header-actions { display: flex; align-items: center; gap: var(--e-5); }
.header-actions .lien-client { font-size: var(--t-s); text-decoration: none; display: inline-flex; gap: .45rem; align-items: center; }
.header-actions .lien-client svg { width: 16px; height: 16px; }
.header-actions .btn { padding: .8em 1.35em; }

.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--trait-fort); background: transparent; cursor: pointer; position: relative; color: var(--encre); }
.burger span { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
.burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 26px; }
.menu-ouvert .burger span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu-ouvert .burger span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1080px) {
  .nav-principale, .header-actions .lien-client { display: none; }
  .burger { display: block; }
}
@media (max-width: 560px) { .header-actions .btn { display: none; } }

/* Menu plein écran (mobile) */
.menu-mobile {
  position: fixed; inset: 0; z-index: 45; background: var(--encre); color: var(--verge);
  padding: calc(var(--header-h) + 2rem) var(--gouttiere) 2rem; display: flex; flex-direction: column; justify-content: space-between;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease); visibility: hidden;
}
.menu-ouvert .menu-mobile { clip-path: inset(0 0 0 0); visibility: visible; }
.menu-ouvert .site-header { background: transparent; box-shadow: none; color: var(--verge); backdrop-filter: none; }
.menu-ouvert .site-header .burger { color: var(--verge); border-color: rgba(236,237,230,.35); }
.menu-ouvert .marque__lieu { color: rgba(236,237,230,.6); }
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li { overflow: hidden; border-bottom: 1px solid rgba(236,237,230,.12); }
.menu-mobile a { display: block; font-family: var(--f-display); font-size: clamp(1.9rem, 7vw, 2.8rem); padding: .5rem 0; text-decoration: none; transform: translateY(105%); transition: transform .7s var(--ease); }
.menu-ouvert .menu-mobile a { transform: none; }
.menu-mobile li:nth-child(2) a { transition-delay: .05s; } .menu-mobile li:nth-child(3) a { transition-delay: .1s; }
.menu-mobile li:nth-child(4) a { transition-delay: .15s; } .menu-mobile li:nth-child(5) a { transition-delay: .2s; }
.menu-mobile li:nth-child(6) a { transition-delay: .25s; } .menu-mobile li:nth-child(7) a { transition-delay: .3s; }
.menu-mobile__pied { display: grid; gap: .5rem; font-size: var(--t-s); color: rgba(236,237,230,.7); }
.menu-mobile__pied a { color: var(--verge); }
body.menu-ouvert { overflow: hidden; }

/* ---------- Accueil : introduction ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem)); padding-bottom: var(--section); position: relative; overflow: hidden; }
.hero__grille { display: grid; gap: var(--e-7); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 980px) { .hero__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-8); } }
.hero h1 { font-size: clamp(2.5rem, 1rem + 3.6vw, 4.1rem); max-width: none; }
@media (min-width: 1100px) { .hero h1 .ligne { white-space: nowrap; } }
.hero h1 .ligne { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ligne > span { display: inline-block; }
.hero__texte { margin-top: var(--e-6); max-width: 34em; font-size: var(--t-l); line-height: 1.55; color: var(--ardoise); }
.hero__actions { margin-top: var(--e-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-5) var(--e-6); }
.hero__pratique { margin-top: var(--e-8); display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-7); font-size: var(--t-s); color: var(--ardoise); }
.hero__pratique strong { display: block; color: var(--encre); font-weight: 500; font-size: var(--t-m); }
.hero__pratique a { text-decoration: none; }

/* Le panonceau : ovale + plan cadastral */
.panonceau { position: relative; width: min(100%, 470px); margin-inline: auto; aspect-ratio: 400 / 540; }
.panonceau svg.plan { width: 100%; height: 100%; overflow: visible; }
.plan .cadre { fill: none; stroke: var(--laiton); }
.plan .fond { fill: var(--papier); }
.plan .parcelle { fill: none; stroke: var(--encre); stroke-width: 1; stroke-linejoin: round; }
.plan .rue { fill: none; stroke: var(--encre); stroke-width: .6; opacity: .45; }
.plan .bati { fill: rgba(22,32,44,.045); stroke: var(--encre); stroke-width: .6; }
.plan .cible { fill: url(#hachure); stroke: var(--laiton); stroke-width: 1.6; }
.plan text { font-family: var(--f-texte); font-size: 8px; fill: var(--ardoise); letter-spacing: .04em; }
.plan text.nom-rue { font-family: var(--f-display); font-style: italic; font-size: 10px; fill: var(--encre); opacity: .7; }
.plan .rose { fill: none; stroke: var(--encre); stroke-width: .7; }
.sceau { position: absolute; width: 31%; left: -6%; bottom: 7%; color: var(--cire); filter: drop-shadow(0 6px 10px rgba(126, 43, 37, .25)); }
.sceau text { font-family: var(--f-texte); font-size: 8.2px; fill: #f1dcd2; }
.panonceau__legende { position: absolute; right: 0; bottom: -2.2rem; font-size: var(--t-xs); color: var(--ardoise); font-style: italic; font-family: var(--f-display); }

/* ---------- Domaines (répertoire) ---------- */
.repertoire { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--trait-fort); }
.repertoire li { border-bottom: 1px solid var(--trait); }
.repertoire a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--e-2) var(--e-5); align-items: center;
  padding: var(--e-6) var(--e-2); text-decoration: none; position: relative; transition: padding .5s var(--ease);
}
@media (min-width: 900px) { .repertoire a { grid-template-columns: 64px minmax(0, 5fr) minmax(0, 5fr) 40px; } }
.repertoire a::before { content: ""; position: absolute; inset: 0; background: var(--papier); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--ease); z-index: -1; }
.repertoire li { position: relative; z-index: 0; }
.repertoire a:hover::before, .repertoire a:focus-visible::before { transform: scaleY(1); }
.repertoire a:hover { padding-left: var(--e-5); }
.repertoire__ico { width: 48px; height: 48px; color: var(--laiton); }
.repertoire__titre { font-family: var(--f-display); font-size: clamp(1.45rem, 1rem + 1.3vw, 2.15rem); line-height: 1.08; }
.repertoire__desc { grid-column: 2; color: var(--ardoise); font-size: var(--t-s); max-width: 34em; margin: 0; }
@media (min-width: 900px) { .repertoire__desc { grid-column: auto; } }
.repertoire__fleche { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait-fort); place-items: center; transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease); }
.repertoire__fleche svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .repertoire__fleche { display: grid; } }
.repertoire a:hover .repertoire__fleche { background: var(--encre); color: var(--papier); border-color: var(--encre); transform: rotate(-45deg); }
.domaines__grille { display: grid; gap: var(--e-7); }
@media (min-width: 1000px) {
  .domaines__grille { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-8); }
  .domaines__intro { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
}
.domaines__intro h2 { margin-bottom: var(--e-5); }

/* Vignette ovale qui suit le curseur */
.vignette-curseur {
  position: fixed; left: 0; top: 0; z-index: 40; width: 150px; height: 200px; pointer-events: none;
  border-radius: 50%; background: var(--encre); color: var(--laiton-clair);
  display: grid; place-items: center; opacity: 0; transform: translate(-50%, -50%) scale(.6);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  box-shadow: inset 0 0 0 6px var(--encre), inset 0 0 0 7px var(--laiton-clair), inset 0 0 0 10px var(--encre), inset 0 0 0 11px rgba(201,168,101,.5);
}
.vignette-curseur.visible { opacity: 1; }
.vignette-curseur svg { width: 64px; height: 64px; }
@media (hover: none), (max-width: 899px) { .vignette-curseur { display: none; } }

/* ---------- Étapes (défilement horizontal) ---------- */
.etapes { overflow: hidden; }
.etapes__piste { display: grid; gap: var(--e-6); }
.etape { position: relative; padding-top: var(--e-7); }
.etape__num { font-family: var(--f-display); font-style: normal; font-size: clamp(3.5rem, 2rem + 4vw, 6rem); line-height: .8; color: var(--laiton-clair); display: block; margin-bottom: var(--e-5); font-weight: 400; }
.etape h3 { margin-bottom: var(--e-4); }
.etape p { color: rgba(236,237,230,.72); max-width: 26em; margin: 0; }
.etape__duree { display: inline-block; margin-top: var(--e-5); font-size: var(--t-xs); color: var(--laiton-clair); border: 1px solid rgba(201,168,101,.4); border-radius: 999px; padding: .35em .9em; }
.etapes__ligne { display: none; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(236,237,230,.16); }
.etapes__ligne i { position: absolute; inset: 0; background: var(--laiton-clair); transform-origin: left; transform: scaleX(var(--p, 0)); }
.etape::before { content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--encre); border: 1px solid var(--laiton-clair); }
@media (max-width: 899px) { .etape { border-top: 1px solid rgba(236,237,230,.16); } }
@media (min-width: 900px) {
  .etapes__ligne { display: block; }
  .etapes__cadre { position: relative; }
  .etapes__piste { display: flex; gap: 0; width: max-content; position: relative; }
  .etape { width: clamp(320px, 30vw, 420px); padding-right: var(--e-8); }
}

/* ---------- Simulateur ---------- */
.simu { display: grid; gap: var(--e-7); align-items: start; }
@media (min-width: 980px) { .simu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); } }
.simu__carte { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: clamp(1.5rem, 3vw, 2.75rem); position: relative; }
.simu__carte::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--trait); pointer-events: none; border-radius: 2px; }
.champ { display: grid; gap: .5rem; margin-bottom: var(--e-6); }
.champ > label, .champ legend { font-size: var(--t-s); font-weight: 500; padding: 0; }
.champ fieldset { border: 0; padding: 0; margin: 0; }
.champ__prix { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--trait-fort); transition: border-color .3s; }
.champ__prix:focus-within { border-color: var(--laiton); }
.champ__prix input { border: 0; background: transparent; font: 400 var(--t-2xl)/1.2 var(--f-display); color: var(--encre); width: 100%; padding: .2rem 0; font-variant-numeric: lining-nums tabular-nums; }
.champ__prix input:focus { outline: none; }
.champ__prix span { font-family: var(--f-display); font-size: var(--t-xl); color: var(--ardoise); }
input[type="range"] { width: 100%; accent-color: var(--laiton); }
.segments { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--trait-fort); position: relative; flex-wrap: wrap; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label { padding: .55em 1.15em; border-radius: 999px; cursor: pointer; font-size: var(--t-s); transition: background .35s var(--ease), color .35s var(--ease); }
.segments input:checked + label { background: var(--encre); color: var(--papier); }
.segments input:focus-visible + label { outline: 2px solid var(--laiton); outline-offset: 2px; }
.simu__total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; border-top: 1px solid var(--trait-fort); padding-top: var(--e-5); }
.simu__total p { margin: 0; font-size: var(--t-s); color: var(--ardoise); }
.simu__montant { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.simu__barre { display: flex; height: 10px; border-radius: 999px; overflow: hidden; margin: var(--e-5) 0 var(--e-4); background: var(--trait); }
.simu__barre i { display: block; height: 100%; transition: flex-grow .7s var(--ease); flex-basis: 0; }
.simu__barre i:nth-child(1) { background: var(--encre); }
.simu__barre i:nth-child(2) { background: var(--laiton); }
.simu__barre i:nth-child(3) { background: #a9b0b8; }
.simu__detail { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: var(--t-s); }
.simu__detail li { display: flex; align-items: center; gap: .6rem; }
.simu__detail li span:last-child { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: .5rem; }
.simu__detail .pastille { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.simu__note { margin: var(--e-5) 0 0; font-size: var(--t-xs); color: var(--ardoise); }
.simu__taux { font-size: var(--t-s); }
.simu__taux select { font: inherit; padding: .55rem .8rem; border: 1px solid var(--trait-fort); border-radius: var(--rayon); background: var(--papier); color: var(--encre); width: 100%; }

/* ---------- Équipe ---------- */
.equipe { display: grid; gap: var(--e-7) var(--e-6); grid-template-columns: repeat(auto-fill, minmax(min(42%, 230px), 1fr)); }
@media (max-width: 600px) { .equipe { gap: var(--e-6) var(--e-4); } .membre h3 { font-size: var(--t-l); } }
.membre { text-decoration: none; display: block; }
.membre__ovale { position: relative; aspect-ratio: 3 / 4; border-radius: 50%; overflow: hidden; background: var(--encre-2); margin-bottom: var(--e-5); isolation: isolate; }
.membre__ovale img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.02); transition: transform 1.1s var(--ease), filter .6s; }
.membre:hover .membre__ovale img { transform: scale(1.05); filter: none; }
.membre__ovale svg.cadre-ovale { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.cadre-ovale ellipse { fill: none; stroke: var(--laiton-clair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.membre__initiales { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-size: clamp(3rem, 6vw, 4.5rem); color: var(--laiton-clair); }
.membre h3 { font-size: var(--t-xl); }
.membre p { margin: .35rem 0 0; color: var(--ardoise); font-size: var(--t-s); }

/* ---------- Biens ---------- */
.biens { display: grid; gap: var(--e-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.bien { text-decoration: none; display: flex; flex-direction: column; background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; transition: border-color .4s; }
.bien:hover { border-color: var(--trait-fort); }
.bien__visuel { aspect-ratio: 4 / 3; overflow: hidden; background: #e2e3db; position: relative; }
.bien__visuel img, .bien__visuel svg { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.bien:hover .bien__visuel img, .bien:hover .bien__visuel svg { transform: scale(1.04); }
.bien__type { position: absolute; left: 1rem; top: 1rem; background: var(--papier); padding: .35em .85em; border-radius: 999px; font-size: var(--t-xs); }
.bien__corps { padding: var(--e-5); display: grid; gap: .4rem; flex: 1; }
.bien__prix { font-family: var(--f-display); font-size: var(--t-xl); font-variant-numeric: lining-nums; }
.bien__titre { font-size: var(--t-m); font-weight: 500; margin: 0; font-family: var(--f-texte); letter-spacing: 0; line-height: 1.35; }
.bien__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; font-size: var(--t-s); color: var(--ardoise); margin-top: auto; padding-top: .6rem; }
.dpe { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 3px; color: #fff; font-weight: 600; font-size: .8rem; }
.dpe--A { background: #2e7d4f; } .dpe--B { background: #4e9a45; } .dpe--C { background: #9cba3a; } .dpe--D { background: #e2c02f; color: var(--encre); }
.dpe--E { background: #e79a2f; } .dpe--F { background: #d8642c; } .dpe--G { background: #c03a2b; }

/* ---------- Espace client ---------- */
.client { display: grid; gap: var(--e-8); align-items: center; }
@media (min-width: 980px) { .client { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.telephone { width: min(100%, 330px); margin-inline: auto; aspect-ratio: 9 / 18.5; border-radius: 44px; background: var(--encre); padding: 12px; box-shadow: 0 40px 80px -30px rgba(22,32,44,.45); }
.telephone__ecran { height: 100%; border-radius: 34px; background: var(--papier); padding: 2.2rem 1.2rem 1.2rem; display: flex; flex-direction: column; gap: 1rem; overflow: hidden; color: var(--encre); }
.telephone__ecran h4 { font-size: 1.35rem; }
.telephone__ecran small { color: var(--ardoise); font-size: .72rem; display: block; }
.suivi { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.suivi li { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; font-size: .8rem; padding: .55rem 0; position: relative; }
.suivi li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--trait-fort); margin-top: 2px; background: var(--papier); z-index: 1; }
.suivi li::after { content: ""; position: absolute; left: 6.5px; top: 1.3rem; bottom: -.6rem; width: 1px; background: var(--trait); }
.suivi li:last-child::after { display: none; }
.suivi li.fait::before { background: var(--encre); border-color: var(--encre); box-shadow: inset 0 0 0 3px var(--papier); }
.suivi li.encours::before { border-color: var(--laiton); background: var(--laiton); animation: pouls 2.4s infinite; }
.suivi li span { display: block; color: var(--ardoise); font-size: .72rem; }
@keyframes pouls { 0% { box-shadow: 0 0 0 0 rgba(156,122,60,.45); } 70% { box-shadow: 0 0 0 9px rgba(156,122,60,0); } 100% { box-shadow: 0 0 0 0 rgba(156,122,60,0); } }
.progression { height: 4px; background: var(--trait); border-radius: 4px; overflow: hidden; }
.progression i { display: block; height: 100%; width: 0; background: var(--laiton); transition: width 1.6s var(--ease); }
.notif { margin-top: auto; background: var(--encre); color: var(--verge); border-radius: 14px; padding: .8rem .9rem; font-size: .74rem; display: grid; grid-template-columns: 26px 1fr; gap: .6rem; transform: translateY(20px); opacity: 0; transition: transform .7s var(--ease) .6s, opacity .7s var(--ease) .6s; }
.notif svg { width: 26px; height: 26px; }
.is-vu .notif { transform: none; opacity: 1; }
.engagements { list-style: none; padding: 0; margin: var(--e-6) 0; display: grid; gap: var(--e-5); }
.engagements li { display: grid; grid-template-columns: 28px 1fr; gap: var(--e-4); }
.engagements svg { width: 26px; height: 26px; color: var(--laiton); }
.engagements strong { display: block; font-weight: 500; margin-bottom: .15rem; }
.engagements span { color: var(--ardoise); font-size: var(--t-s); }

/* ---------- Actualités ---------- */
.actus { display: grid; gap: var(--e-6); }
@media (min-width: 900px) { .actus { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .actus__cote { display: grid; gap: var(--e-6); align-content: start; } }
.actu { text-decoration: none; display: grid; gap: var(--e-4); }
.actu__visuel { overflow: hidden; border-radius: var(--rayon); aspect-ratio: 16 / 10; background: var(--encre); position: relative; }
.actu__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.actu:hover .actu__visuel img { transform: scale(1.04); }
.actu__visuel .motif { position: absolute; inset: 0; color: var(--laiton-clair); opacity: .7; }
.actu__date { font-size: var(--t-xs); color: var(--ardoise); }
.actu h3 { transition: color .3s; }
.actu:hover h3 { color: var(--laiton); }
.actu--petite { grid-template-columns: 140px 1fr; align-items: start; }
.actu--petite .actu__visuel { aspect-ratio: 1; }
.actu--petite h3 { font-size: var(--t-l); }
.actu p { color: var(--ardoise); margin: 0; font-size: var(--t-s); }

/* ---------- Bandeau contact ---------- */
.contact-bandeau { display: grid; gap: var(--e-7); }
@media (min-width: 900px) { .contact-bandeau { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.contact-bandeau h2 { font-size: var(--t-4xl); }
.coordonnees { display: grid; gap: var(--e-5); font-size: var(--t-s); }
.coordonnees div { border-top: 1px solid rgba(236,237,230,.18); padding-top: var(--e-4); display: grid; grid-template-columns: 7rem 1fr; gap: var(--e-4); }
.coordonnees dt { color: rgba(236,237,230,.6); }
.coordonnees dd { margin: 0; }
.coordonnees a { text-decoration: none; }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--encre); color: rgba(236,237,230,.75); font-size: var(--t-s); padding-top: var(--e-8); position: relative; z-index: 1; }
.site-footer a { text-decoration: none; color: var(--verge); }
.site-footer a:hover { color: var(--laiton-clair); }
.pied__haut { display: grid; gap: var(--e-7); padding-bottom: var(--e-8); border-bottom: 1px solid rgba(236,237,230,.12); }
@media (min-width: 900px) { .pied__haut { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); } }
.pied__haut h4 { font-family: var(--f-texte); font-size: var(--t-s); font-weight: 500; color: var(--verge); margin-bottom: var(--e-4); letter-spacing: 0; }
.pied__haut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pied__marque .marque__nom { color: var(--verge); font-size: 1.6rem; }
.pied__marque p { max-width: 30em; margin-top: var(--e-5); }
.pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-5); font-size: var(--t-xs); }
.pied__bas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e-5); }
.pied__geant { font-family: var(--f-display); font-size: clamp(3rem, 9.5vw, 10.5rem); line-height: .8; color: rgba(236,237,230,.06); letter-spacing: -.04em; white-space: nowrap; overflow: hidden; padding-top: var(--e-6); user-select: none; }

/* ---------- WhatsApp ---------- */
.wa {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem); z-index: 60;
  display: flex; align-items: center; gap: .65rem; height: 58px; padding: 0 1.3rem 0 .45rem;
  background: var(--encre); color: var(--verge); border-radius: 999px; text-decoration: none; font-size: var(--t-s);
  box-shadow: 0 18px 40px -16px rgba(22,32,44,.6); transition: padding .5s var(--ease), gap .5s var(--ease), transform .4s var(--ease);
}
.wa:hover { transform: translateY(-3px); }
.wa__ico { width: 46px; height: 46px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; flex: none; position: relative; }
.wa__ico svg { width: 24px; height: 24px; }
.wa__ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: wa-pouls 10s infinite; }
@keyframes wa-pouls { 0%, 88% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 96% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.wa__txt { white-space: nowrap; overflow: hidden; max-width: 14rem; transition: max-width .5s var(--ease), opacity .4s; }
.wa.is-reduit { padding: 0 .45rem; gap: 0; }
.wa.is-reduit .wa__txt { max-width: 0; opacity: 0; }

/* ---------- Pages intérieures ---------- */
.page-entete { padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem)); padding-bottom: var(--e-8); position: relative; overflow: hidden; border-bottom: 1px solid var(--trait); }
.page-entete h1 { font-size: var(--t-3xl); max-width: 16em; }
.page-entete .chapeau { margin-top: var(--e-5); }
.page-entete__motif { position: absolute; right: -4%; top: 50%; width: min(38vw, 420px); transform: translateY(-40%); opacity: .55; color: var(--laiton); pointer-events: none; }
@media (max-width: 800px) { .page-entete__motif { display: none; } }
.fil { font-size: var(--t-xs); color: var(--ardoise); margin-bottom: var(--e-5); display: flex; flex-wrap: wrap; gap: .4rem; }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }

.contenu { font-size: var(--t-m); line-height: 1.7; }
.contenu > * { max-width: 68ch; }
.contenu > .alignwide, .contenu > .alignfull, .contenu > figure, .contenu > .wp-block-columns, .contenu > .wp-block-table { max-width: none; }
.contenu h2 { font-size: var(--t-2xl); margin: 2.2em 0 .6em; }
.contenu h3 { font-size: var(--t-xl); margin: 1.8em 0 .5em; }
.contenu ul, .contenu ol { padding-left: 1.2em; }
.contenu li { margin-bottom: .45em; }
.contenu li::marker { color: var(--laiton); }
.contenu blockquote { margin: 2em 0; padding: 0 0 0 1.5em; border-left: 1px solid var(--laiton); font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.35; }
.contenu table { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.contenu th, .contenu td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--trait); }
.contenu img { border-radius: var(--rayon); }
.contenu a { color: var(--encre); text-decoration-color: var(--laiton); }

.deux-col { display: grid; gap: var(--e-8); }
@media (min-width: 1000px) { .deux-col { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .deux-col aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.encadre { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: var(--e-6); }
.encadre h3 { font-size: var(--t-l); margin-bottom: var(--e-4); }
.encadre ul { margin: 0 0 var(--e-5); padding-left: 1.1em; font-size: var(--t-s); }
.encadre li { margin-bottom: .4rem; }
.encadre li::marker { color: var(--laiton); }

/* Formulaire de contact */
.formulaire { display: grid; gap: var(--e-5); grid-template-columns: 1fr 1fr; }
.formulaire .plein { grid-column: 1 / -1; }
@media (max-width: 640px) { .formulaire { grid-template-columns: 1fr; } }
.formulaire label { display: block; font-size: var(--t-s); font-weight: 500; margin-bottom: .4rem; }
.formulaire input, .formulaire select, .formulaire textarea {
  width: 100%; font: inherit; color: var(--encre); background: var(--papier); border: 1px solid var(--trait-fort); border-radius: var(--rayon);
  padding: .85rem 1rem; transition: border-color .3s, box-shadow .3s;
}
.formulaire input:focus, .formulaire select:focus, .formulaire textarea:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 3px rgba(156,122,60,.18); }
.formulaire .consent { display: flex; gap: .7rem; font-size: var(--t-xs); color: var(--ardoise); align-items: start; }
.formulaire .consent input { width: auto; margin-top: .25rem; }
.formulaire .piege { position: absolute; left: -9999px; }
.message-form { padding: 1rem 1.2rem; border-radius: var(--rayon); margin-bottom: var(--e-5); font-size: var(--t-s); }
.message-form--ok { background: #e3ecdf; border: 1px solid #9fb994; }
.message-form--err { background: #f3e1de; border: 1px solid #d3a29b; }

/* Fiche bien */
.fiche { display: grid; gap: var(--e-7); }
@media (min-width: 1000px) { .fiche { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.galerie { display: grid; gap: var(--e-3); grid-template-columns: repeat(3, 1fr); }
.galerie > :first-child { grid-column: 1 / -1; }
.galerie img, .galerie svg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.caracteristiques { margin: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--trait); }
.caracteristiques div { padding: .9rem 0; border-bottom: 1px solid var(--trait); }
.caracteristiques dt { font-size: var(--t-xs); color: var(--ardoise); }
.caracteristiques dd { margin: .15rem 0 0; font-weight: 500; }

/* Filtres */
.filtres { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--e-7); }
.filtres a { text-decoration: none; padding: .55em 1.1em; border: 1px solid var(--trait-fort); border-radius: 999px; font-size: var(--t-s); transition: background .3s, color .3s; }
.filtres a:hover { border-color: var(--encre); }
.filtres a.actif { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* Pagination */
.pagination { margin-top: var(--e-8); display: flex; gap: .4rem; flex-wrap: wrap; }
.pagination .page-numbers { min-width: 44px; height: 44px; padding: 0 .9rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--trait-fort); text-decoration: none; font-size: var(--t-s); }
.pagination .current { background: var(--encre); color: var(--papier); border-color: var(--encre); }

/* Liste d'articles */
.liste-actus { display: grid; gap: var(--e-7) var(--e-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

/* Vide / 404 */
.vide { text-align: center; padding-block: var(--section); }
.vide svg { width: 160px; margin: 0 auto var(--e-6); color: var(--laiton); }
.vide h1 { font-size: var(--t-3xl); margin-bottom: var(--e-5); }
.vide p { color: var(--ardoise); max-width: 32em; margin-inline: auto; }

/* ---------- Mouvements ---------- */
.js .revele { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revele { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .wa { padding: 0 .45rem; gap: 0; height: 54px; }
  .wa .wa__txt { max-width: 0; opacity: 0; }
  .hero h1 { font-size: clamp(2.2rem, 1.2rem + 4.2vw, 2.6rem); }
}

/* Prise de rendez-vous (page Contact) */
.bloc-rdv { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: clamp(1.25rem, 3vw, 2.25rem); margin-bottom: var(--e-8); }
.bloc-rdv h2 { font-size: var(--t-2xl); margin-bottom: var(--e-3); }
.bloc-rdv > .texte-sec { margin-bottom: var(--e-6); }
.titre-ou { font-size: var(--t-xl); margin-bottom: var(--e-5); }