/* ══════════════════════════════════════════════════════════════
   Magalie Lala — maquette v1
   Charte extraite du logo : pétrole #004552 / or #DBB470
   ⚠ L'or ne sert JAMAIS de texte sur fond clair (1,95:1)
   ══════════════════════════════════════════════════════════════ */

:root{
  --petrole:#004552;
  --petrole-fonce:#003742;
  --petrole-clair:#0A5B6B;
  --or:#DBB470;
  --or-clair:#E8C67F;
  /* ⚠️ L'or de la marque est un DÉCOR, pas un texte : #DBB470 tombe à 1,81:1
     sur le crème et 1,95:1 sur le blanc. Cet or-ci est le SEUL admis pour du
     texte sur fond clair — 4,90:1 sur le crème, 5,27:1 sur le blanc, soit le
     même poids que l'or normal atteint sur le pétrole (5,46:1). Même teinte
     (38°), même saturation : seule la clarté descend. */
  --or-texte:#8B6523;
  --creme:#FAF6F0;
  --creme-2:#F2EBE0;
  --encre:#16282D;
  --gris:#4F6167;
  --blanc:#fff;
  --ligne:#E2D8CA;

  /* signature : les coins asymétriques du logo */
  --r-sig:16px 16px 52px 16px;
  --r-sig-lg:24px 24px 92px 24px;
  --r-btn:10px 10px 22px 10px;

  --wrap:1220px;
  --pas:clamp(64px,7vw,110px);
  --ombre:0 18px 50px -24px rgba(0,69,82,.38);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--blanc);color:var(--encre);
  font:400 17px/1.68 'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  /* ⚠️ Cormorant Garamond est livrée en chiffres ELZÉVIRIENS : le 1 est un
     petit « I » à empattements, et 3 4 5 7 9 descendent sous la ligne. En
     texte courant c'est élégant, mais dès qu'un chiffre porte l'information
     ça se lit faux : « 01 » devient « O I », « 19 » devient « I9 ». On force
     donc les chiffres alignés partout, en héritage. Sans effet sur Jost, qui
     n'embarque pas la fonction lnum (ses chiffres sont déjà alignés). */
  font-variant-numeric:lining-nums;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}   /* sinon inline → décalage de ligne de base dans les grilles */
a{color:inherit}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;line-height:1.12;margin:0;letter-spacing:.004em}
h1{font-size:clamp(2.6rem,5vw,4.2rem)}
h2{font-size:clamp(2rem,3.7vw,3.05rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.5rem)}
em{font-style:italic}
/* Le gras sert à ce qu'un lecteur qui survole retienne l'essentiel.
   500 et non 700 : la graisse maximale de Jost écraserait le reste. */
strong{font-weight:500;color:var(--encre)}
p{margin:0 0 1.05em}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* L'en-tête est collant : sans cette marge, une ancre amène la cible SOUS
   l'en-tête. Hauteurs MESUREES : 101 px sur ordinateur, 88 en mobile.
   ⚠️ À recalculer si la taille du logo change : c'est lui qui détermine
   la hauteur de l'en-tête. */
[id]{scroll-margin-top:116px}
@media (max-width:900px){ [id]{scroll-margin-top:100px} }

/* ⚠️ Mais les SECTIONS ont déjà une large marge intérieure haute (--pas :
   101 px sur ordinateur, 56 en mobile). Sans ce correctif, les deux se
   cumulent et on arrive avec 200 px de vide avant le sur-titre. On vise
   donc le haut du CONTENU, pas le haut de la boîte :
   marge = hauteur d'en-tête − marge intérieure + une respiration.        */
.sec[id],.cta[id],.pack[id],.secteur[id],.hero[id]{scroll-margin-top:14px}
@media (max-width:900px){
  .sec[id],.cta[id],.pack[id],.secteur[id],.hero[id]{scroll-margin-top:44px}
}

/* ⚠️ Les 14 px ci-dessus sont calculés pour une marge intérieure de section de
   ~101 px. Sur les pages intérieures elle est resserrée à ~62 px : sans ce
   correctif, l'ancre amène le sur-titre et le titre SOUS l'en-tête collant, et
   l'on atterrit au niveau du sous-titre (signalé par Patrice le 2026-08-13).
   marge d'ancre = hauteur d'en-tête − marge intérieure + une respiration. */
.page-texte .sec[id],.page-texte .cta[id],.page-texte .pack[id]{scroll-margin-top:54px}
@media (max-width:900px){
  .page-texte .sec[id],.page-texte .cta[id],.page-texte .pack[id]{scroll-margin-top:58px}
}

/* Les liens « Contact » visent le numéro de téléphone, suivi du formulaire,
   et non le haut de la section (qui explique d'abord l'estimation).
   ⚠️ Sur ordinateur, la section entière tient dans l'écran : la cible n'est
   alors plus le numéro mais le début de la section. Le CSS ne sachant pas
   changer de cible selon la largeur, c'est main.js qui s'en charge. */
#joindre{scroll-margin-top:100px}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.wrap--etroit{width:min(100% - 40px,820px)}
.center{text-align:center}
.hide-xs{display:inline}

.skip{position:absolute;left:-9999px;top:0;background:var(--petrole);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
/* ⚠️ DEUX COULEURS IMBRIQUÉES, et c'est la condition pour qu'il tienne partout.
   Le contour doré SEUL tombait à 1,95:1 sur les sections claires : un bouton
   doré, posé sur du crème, cerné de doré — trois tons voisins, et le repère
   disparaissait. Sur pétrole il était au contraire excellent (5,46:1).
   L'anneau intérieur pétrole donne 10,6:1 sur fond clair ; sur fond pétrole il
   se fond, mais c'est alors le doré extérieur qui ressort. Quel que soit le
   fond, l'une des deux tient — WCAG 1.4.11 en demande 3:1.
   ⚠️ Le `box-shadow` REMPLACE celui de l'élément : tout élément focalisable qui
   porte déjà une ombre dans sa règle de base doit redéclarer les deux, sinon
   il la perd à la mise au point (cas de `.btn--ghost`, plus bas). */
:focus-visible{outline:3px solid var(--or);outline-offset:3px;box-shadow:0 0 0 3px var(--petrole)}

/* ── kicker : petit sur-titre à filet ── */
.kicker{
  display:flex;align-items:center;gap:13px;margin:0 0 18px;
  font-size:.9rem;letter-spacing:.17em;text-transform:uppercase;font-weight:500;color:var(--petrole);
}
.kicker__filet{width:38px;height:2px;background:var(--or);flex:none}
.kicker--clair{color:var(--or-clair)}

/* ── boutons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border:0;border-radius:var(--r-btn);cursor:pointer;
  font:500 .96rem/1 'Jost',sans-serif;letter-spacing:.03em;text-decoration:none;
  transition:transform .22s,background .22s,color .22s,box-shadow .22s;
}
.btn svg{width:1.05em;height:1.05em}
.btn--lg{padding:17px 32px;font-size:1.02rem}
.btn--bloc{width:100%}
.btn--or{background:var(--or);color:var(--encre)}
.btn--petrole{background:var(--petrole);color:#fff}
.btn--ghost{background:transparent;color:var(--petrole);box-shadow:inset 0 0 0 1.5px var(--petrole)}
/* ⚠️ Redéclare SES DEUX ombres. Sa règle de base est écrite après le contour
   global et à spécificité égale : sans cette ligne, c'est elle qui l'emporte
   et le bouton perdrait son anneau pétrole à la mise au point. */
.btn--ghost:focus-visible{box-shadow:inset 0 0 0 1.5px var(--petrole),0 0 0 3px var(--petrole)}

.nav__vide{pointer-events:none}

/* ── barre supérieure ── */
/* ⚠️ La barre est calée sur --petrole, la teinte EXACTE du logo (#004552),
   et non sur --petrole-fonce : elle surplombe le logo à 42 px, séparée par
   un vide crème, et l'œil compare les deux aplats. La teinte foncée reste
   réservée au pied de page et au secteur, où le logo est POSÉ dessus et où
   son cadre or fait la séparation. */
.topbar{background:var(--petrole);color:#DCE7E9;font-size:.86rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px}
.topbar__tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:500;color:#fff}
.topbar__tel svg{width:15px;height:15px;stroke:var(--or)}
.topbar__right{display:flex;align-items:center;gap:20px}
.topbar__note{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:#DCE7E9}
.topbar__note strong{color:#fff}
.topbar__link{text-decoration:none;color:#DCE7E9}
.stars{color:var(--or);letter-spacing:.08em;font-size:.82rem}

/* ── en-tête ── */
.hdr{position:sticky;top:0;z-index:100;background:var(--creme);transition:box-shadow .3s}
.hdr.is-collee{box-shadow:0 2px 22px -8px rgba(0,69,82,.3)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:9px 0}
.hdr__logo{display:flex;align-items:center;gap:15px;text-decoration:none}
.hdr__logo img{width:106px;height:auto}
/* Le slogan est repris en VRAI TEXTE à côté du logo : illisible à 130 px
   dans l'image, et c'est une phrase-clé qui mérite d'être lue par Google. */
.hdr__slogan{
  border-left:1px solid var(--ligne);padding-left:15px;line-height:1.35;
  font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;color:var(--petrole);
}
.hdr__slogan b{display:block;font-weight:500}
.hdr__slogan span{display:block;color:var(--gris);letter-spacing:.09em;font-size:.72rem}
.nav{display:flex;align-items:center;gap:clamp(16px,1.8vw,28px)}
/* Le menu sur DEUX RANGS, en grille de quatre colonnes : chaque colonne
   prend la largeur de son plus long libellé, donc « Estimation » tombe
   pile au-dessus de « Biens vendus », « Vendre » au-dessus de « Qui
   suis-je », etc. Deux listes côte à côte ne savent pas faire ça.
   ⚠️ Le menu est calé à GAUCHE, juste après le slogan : c'est `.nav`
   qui s'étire et pousse le bouton doré au bout. */
.nav{flex:1}
.nav__liste{
  /* ⚠️ Autant de colonnes que le plus long rang de $MENU (5 depuis
     l'arrivée d'« Avis »). Les rangs plus courts sont comblés côté PHP. */
  display:grid;grid-template-columns:repeat(5,auto);justify-content:start;
  column-gap:clamp(16px,2vw,30px);row-gap:6px;
  list-style:none;margin:0 auto 0 0;padding:0;
}
/* ⚠ Ne cibler QUE les liens de la liste : un `.nav a` général (0,1,1)
   l'emporte sur `.btn` (0,1,0) et écrase le padding du bouton. */
.nav a{text-decoration:none}
.nav ul a{
  font-size:.93rem;font-weight:400;padding:6px 0;position:relative;
  color:var(--encre);white-space:nowrap;
}
.nav ul a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--or);transition:right .28s;
}
/* Page courante : le même souligné or que le survol, mais posé en permanence.
   ⚠️ Le marquage existait dans le HTML (class is-active + aria-current) sans
   aucun style : invisible tant que le site n'avait qu'une page. */
.nav ul a.is-active{color:var(--petrole);font-weight:500}
.nav ul a.is-active::after{right:0}
@media (max-width:900px){
  /* Sur mobile le souligné est masqué : on marque par la couleur seule. */
  .nav ul a.is-active{color:var(--petrole)}
}
.nav__cta{white-space:nowrap;flex:none}  /* sinon flex-shrink rogne le libellé */
/* Entrées réservées au menu mobile : sur ordinateur le menu doit rester
   court, et « Accueil » / « Contact » sont déjà accessibles ailleurs. */
.nav__mobile{display:none}

/* z-index au-dessus du panneau de navigation : sinon le panneau, qui est
   en `position:fixed`, recouvre le bouton et la croix devient invisible. */
.burger{
  display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  padding:10px;position:relative;z-index:120;
}
.burger span{display:block;height:2px;background:var(--petrole);border-radius:2px;transition:transform .3s,opacity .2s;margin:5px 0}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── cadre signature ──
   ⚠ <picture> doit être étiré à 100 % de la hauteur : sinon il garde la
   hauteur naturelle de l'image, l'`img` en height:100% s'y réfère, et il
   reste une bande blanche en bas du cadre (le coin arrondi n'est alors
   plus couvert non plus). C'est la cause unique du blanc sous le portrait,
   du bas de pastille blanc et du coin bas-droit non arrondi. */
.cadre,.pastille,.compare__box,.bien figure{position:relative}
.cadre>picture,.pastille>picture,.compare__box>picture,.bien figure>picture{
  display:block;width:100%;height:100%;
}
.cadre{margin:0;border-radius:var(--r-sig-lg);overflow:hidden;box-shadow:var(--ombre)}
.cadre img{width:100%;height:100%;object-fit:cover}

/* ⚠️ `--libre` : la photo garde SA hauteur, elle n'est pas rognée dans un cadre
   à ratio imposé. Depuis le 2026-08-20 les photos ne sont plus recadrées au
   téléversement (décision de Patrice) : une image verticale doit donc s'afficher
   ENTIÈRE là où elle est montrée en grand, c'est-à-dire dans le corps d'un
   article. Les VIGNETTES des grilles, elles, gardent leur `aspect-ratio` et leur
   `object-fit:cover` : le recadrage y est un choix d'AFFICHAGE, qui garde les
   rangées régulières et laisse l'image entière à un clic. */
.cadre--libre,.cadre--libre>picture{height:auto}
.cadre--libre img{height:auto;object-fit:initial}

/* ── HERO ── */
.hero{background:var(--creme);padding:clamp(46px,5vw,76px) 0 clamp(64px,7vw,104px);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;right:-190px;top:-140px;width:520px;height:520px;
  border:1.5px solid rgba(219,180,112,.4);border-radius:50%;pointer-events:none;
}
/* ── Invitation à faire défiler ──
   Repris du site Chez Lulu (`.hero__scroll`), adapté au fond CRÈME de Magalie :
   là-bas le hero est une photo sombre, donc le filet était clair. Ici c'est
   l'inverse, filet or sur crème.
   Le filet s'étire du haut, puis se rétracte par le bas : l'œil suit un
   mouvement descendant, ce qu'une simple opacité ne donnerait pas.
   ⚠️ Masqué sous 900 px : sur mobile le pouce est déjà sur l'écran, et le
   premier écran ne prétend pas remplir la hauteur. */
.hero__suite{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  text-decoration:none;color:var(--gris);
  font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
}
.hero__suite::after{
  content:"";width:1px;height:34px;background:var(--or);
}
@media (prefers-reduced-motion:no-preference){
  .hero__suite::after{animation:filetDescend 1.9s ease-in-out infinite}
}
@keyframes filetDescend{
  0%  {transform:scaleY(.18);transform-origin:top}
  50% {transform:scaleY(1);  transform-origin:top}
  100%{transform:scaleY(.18);transform-origin:bottom}
}
@media (max-width:900px){ .hero__suite{display:none} }
/* En mode capture, l'animation fige au milieu de sa course. */
.snap .hero__suite::after{animation:none}

.hero__in{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,4vw,56px);align-items:center;position:relative}
.hero h1{margin:0 0 22px}
.hero h1 em{color:var(--petrole);display:inline-block}
.hero__chapo{font-size:1.12rem;color:var(--gris);max-width:34em;margin-bottom:30px}
.hero__chapo strong{color:var(--encre);font-weight:500}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero__mini{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:.93rem;color:var(--gris)}
.hero__mini li{display:flex;align-items:center;gap:10px}
.hero__mini svg{width:17px;height:17px;stroke:var(--petrole);flex:none}

/* La signature est posée SOUS l'image, sur le crème — jamais du texte
   sur une photo claire (c'est le défaut relevé sur l'ancien site). */
.hero__bas{display:contents}   /* sur ordinateur : conteneur neutre */
.hero__vis{position:relative;padding-bottom:72px}
.cadre--hero{aspect-ratio:3/2}
.pastille{
  position:absolute;left:-26px;bottom:0;width:148px;height:148px;margin:0;
  border-radius:50%;overflow:hidden;border:5px solid var(--creme);box-shadow:var(--ombre);
}
/* ⚠ Le 2e nombre n'a AUCUN effet ici : la source est en 3:2 (1200x800) et
   le cercle en 1:1, donc `cover` cale sur la hauteur — les 800 px sont déjà
   affichés en entier, il n'existe pas un pixel de marge verticale. Seul le
   cadrage horizontal est réglable (74 px de marge, soit 33 % de l'image).
   Pour descendre son portrait il faudra une photo avec du ciel au-dessus
   de la tête. */
.pastille img{width:100%;height:100%;object-fit:cover;object-position:77% 50%}
.hero__sign{
  position:absolute;left:142px;bottom:12px;margin:0;font-size:1.06rem;font-weight:500;
  color:var(--encre);line-height:1.34;
}
.hero__sign span{display:block;font-size:.88rem;font-weight:400;color:var(--gris);letter-spacing:.03em}

/* ── bandeau chiffres ── */
.chiffres{background:var(--petrole);color:#fff}
.chiffres__in{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding:clamp(34px,4vw,52px) 0}
.chiffre{display:flex;align-items:baseline;gap:14px}
.chiffre+.chiffre{border-left:1px solid rgba(219,180,112,.3);padding-left:26px}
/* ⚠️ « lining-nums » à redéclarer ici : font-variant-numeric remplace la
   valeur héritée au lieu de s'y ajouter. Sans lui, la bande repasse en
   chiffres elzéviriens et « 19 communes » se lit « I9 ». */
.chiffre b{font-family:'Cormorant Garamond',serif;font-size:3.1rem;font-weight:500;color:var(--or);line-height:.9;font-variant-numeric:lining-nums tabular-nums}
.chiffre>i{font-style:normal;font-size:1.6rem;color:var(--or);margin-left:-6px;align-self:flex-start;margin-top:.2em}
.chiffre span{font-size:.86rem;line-height:1.42;color:#D6E3E5}

/* ── sections ── */
.sec{padding:var(--pas) 0}

/* ── Cercles décoratifs ──
   La signature géométrique du logo, reprise en filigrane comme dans le hero
   et la section « pack » de l'accueil. Deux classes à poser sur n'importe
   quelle section : --cercle-d (à droite) ou --cercle-g (à gauche). Alterner
   les côtés d'une section à l'autre, sinon l'effet devient répétitif.

   ⚠️ `overflow:hidden` est OBLIGATOIRE et fait partie de la classe : sans lui,
   le cercle déborde de la page et provoque un DÉFILEMENT HORIZONTAL sur toute
   la hauteur du site, difficile à imputer après coup.
   ⚠️ Masqués sous 900 px : à cette largeur ils passent derrière le texte au
   lieu de l'accompagner (même parti pris que .hero::before). */
.sec--cercle-d,.sec--cercle-g{position:relative;overflow:hidden}
.sec--cercle-d::before,.sec--cercle-g::before{
  content:"";position:absolute;pointer-events:none;
  border:1.5px solid rgba(219,180,112,.34);border-radius:50%;
}
.sec--cercle-d::before{right:-215px;top:-155px;width:470px;height:470px}
.sec--cercle-g::before{left:-195px;bottom:-175px;width:410px;height:410px}
/* Sur fond pétrole, l'or doit être un peu plus discret pour rester un filigrane. */
.pack.sec--cercle-d::before,.pack.sec--cercle-g::before,
.secteur.sec--cercle-d::before,.secteur.sec--cercle-g::before{border-color:rgba(219,180,112,.24)}
@media (max-width:900px){
  .sec--cercle-d::before,.sec--cercle-g::before{display:none}
}
.sec--creme{background:var(--creme)}
.sec__head{max-width:640px;margin-bottom:clamp(34px,4vw,54px)}
.sec__head h2{margin-bottom:16px}
/* ⚠️ Les 640 px visent le PARAGRAPHE, où une ligne courte se lit mieux ; appliqués
   au bloc entier, ils brisent aussi les titres — jusqu'à couper « rendez-vous » sur
   son trait d'union. Sur les pages intérieures, le titre reprend donc la largeur
   disponible et seule l'introduction garde sa mesure.
   ⚠️ Restreint à .page-texte À DESSEIN : l'accueil, validé par Magalie, garde ses
   titres tels qu'elle les a vus. Modifier la règle globale les aurait tous
   recomposés sans qu'on le demande. */
.page-texte .sec__head{max-width:none}
.page-texte .sec__head .sec__intro,.page-texte .sec__head .kicker{max-width:640px}
.sec__intro{color:var(--gris);font-size:1.06rem;margin:0}
/* ⚠️ Deux .sec__intro qui se suivent étaient COLLÉS (margin:0), ce qui donnait
   un mur de texte, tandis que le vide s'accumulait autour. On rend un peu
   d'air DEDANS et on en retire AUTOUR : c'est l'inverse qu'il fallait faire. */
.sec__intro + .sec__intro,.sec__intro + ul,ul + .sec__intro{margin-top:1.05em}

/* Sections de texte long : la respiration prévue pour des sections illustrées
   y creuse des vides. Marges réduites d'un tiers. */
/* Pages intérieures : rythme resserré, posé UNE FOIS sur <body class="page-texte">
   plutôt que section par section — le tagage manuel en oubliait toujours une,
   ce qui donnait une page à l'espacement irrégulier (constaté le 2026-08-13).
   ⚠️ L'accueil n'a PAS cette classe : son rythme, validé par Magalie, ne bouge pas. */
.page-texte .sec,.page-texte .cta,.page-texte .pack{padding:clamp(42px,4.2vw,62px) 0}
.page-texte .sec__head{margin-bottom:clamp(20px,2.1vw,28px)}

/* ── duo de cartes ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.carte{
  position:relative;background:var(--creme);border-radius:var(--r-sig);padding:38px 34px 34px;
  border:1px solid var(--ligne);transition:transform .3s,box-shadow .3s;
}
.sec--creme .carte{background:#fff}
.carte__num{
  /* ⚠️ var(--or-texte), PAS var(--or) : la carte est sur crème ou sur blanc,
     et 1,5rem ne suffit pas à basculer au seuil « grand texte » si le
     visiteur réduit sa police de base. */
  font-family:'Cormorant Garamond',serif;font-size:1.5rem;color:var(--or-texte);
  display:block;margin-bottom:10px;letter-spacing:.05em;
}
.carte h3{margin-bottom:14px}
.carte h3 a{text-decoration:none}
.carte h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.carte p{color:var(--gris);font-size:1rem}
.liste{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.liste li{position:relative;padding-left:24px;font-size:.94rem;color:var(--encre)}
.liste li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:2px 2px 6px 2px;background:var(--or);
}
.lien-fleche{
  display:inline-flex;align-items:center;gap:9px;font-size:.93rem;font-weight:500;color:var(--petrole);
}
.lien-fleche svg{width:17px;height:17px;transition:transform .25s}

/* ── comparateur avant / après ── */
.compare{max-width:960px;margin:0 auto 46px}
.compare__box{
  --pos:50%;
  position:relative;aspect-ratio:3/2;border-radius:var(--r-sig-lg);overflow:hidden;box-shadow:var(--ombre);
  touch-action:pan-y;
}
.compare__box picture{position:absolute;inset:0;display:block}
.compare__box img{width:100%;height:100%;object-fit:cover}
.compare__ap{clip-path:inset(0 0 0 var(--pos))}
.compare__lab{
  position:absolute;top:16px;z-index:3;padding:6px 14px;border-radius:6px 6px 14px 6px;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;pointer-events:none;
}
.compare__lab--av{left:16px;background:rgba(22,40,45,.82);color:#fff}
.compare__lab--ap{right:16px;background:var(--or);color:var(--encre)}
.compare__bar{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--blanc);z-index:4;pointer-events:none}
.compare__bar i{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;background:var(--blanc);box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.compare__bar i::before,.compare__bar i::after{
  content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;
}
.compare__bar i::before{left:8px;transform:translateY(-50%);border-right-color:var(--petrole)}
.compare__bar i::after{right:8px;transform:translateY(-50%);border-left-color:var(--petrole)}
.compare__rng{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:5;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;
  touch-action:pan-y;  /* le doigt fait glisser le curseur, le défilement vertical reste possible */
}
.compare__rng::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100%}
.compare__rng::-moz-range-thumb{width:64px;height:100%;border:0;opacity:0}

.compare__cap{margin:16px 0 0;text-align:center;font-size:.9rem;color:var(--gris);letter-spacing:.02em}

/* ── le résultat chiffré : l'argument le plus fort de la page ── */
.resultat{
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,40px);
  flex-wrap:wrap;margin:44px auto 0;max-width:760px;
}
.resultat__c{text-align:center}
.resultat__c b{
  display:block;font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:500;line-height:1;color:var(--gris);
}
.resultat__c span{display:block;margin-top:6px;font-size:.87rem;color:var(--gris);letter-spacing:.03em}
.resultat__c--fort b{color:var(--petrole)}
.resultat__c--fort span{color:var(--encre)}
.resultat__c span strong{font-weight:500;color:var(--petrole)}
.resultat__fleche{width:38px;height:38px;stroke:var(--or);stroke-width:1.4;flex:none}

/* ⚠️ Le bloc a été dessiné pour la section CRÈME de l'accueil : ses couleurs
   (gris, pétrole, encre) disparaissent sur fond sombre. Constaté le 2026-08-13
   sur /vendre-avec-moi/, où « 3 semaines » était purement invisible.
   Sur fond pétrole, on inverse : clair pour le point de départ, OR pour le
   résultat, qui est l'information à retenir. */
.pack .resultat,.secteur .resultat{margin-left:0;margin-right:auto;justify-content:flex-start}
.pack .resultat__c b,.secteur .resultat__c b{color:#9FBAC0}
.pack .resultat__c span,.secteur .resultat__c span{color:#B7CBD0}
.pack .resultat__c--fort b,.secteur .resultat__c--fort b{color:var(--or)}
.pack .resultat__c--fort span,.secteur .resultat__c--fort span{color:#EAF2F3}
.pack .resultat__c span strong,.secteur .resultat__c span strong{color:var(--or-clair)}
.pack__cta{margin-top:38px;display:flex;align-items:center;gap:clamp(18px,3vw,34px);flex-wrap:wrap}
.lien-fleche--clair{color:var(--or-clair)}

/* ── relance vers la galerie complète ── */
.compare__suite{margin-top:40px;color:var(--gris);font-size:.98rem;line-height:2.6}

/* ── le pack ── */
.pack{background:var(--petrole);color:#fff;padding:var(--pas) 0;position:relative;overflow:hidden}
.pack::before{
  content:"";position:absolute;left:-160px;bottom:-200px;width:460px;height:460px;
  border:1.5px solid rgba(219,180,112,.26);border-radius:50%;
}
.pack__in{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,72px);align-items:center;position:relative}
.pack h2{margin-bottom:20px}
.pack h2 em{color:var(--or)}
.pack p{color:#CFDFE1}
/* ⚠ Toutes les sections à fond sombre doivent être listées ici : la règle
   globale `strong{color:var(--encre)}` y rendrait le gras illisible.
   À compléter si une nouvelle section sombre apparaît. */
.pack strong,.secteur strong,.encart-iad strong,.ft strong{color:#fff;font-weight:500}
.atout{
  display:flex;gap:16px;background:rgba(255,255,255,.07);border-left:3px solid var(--or);
  border-radius:0 var(--r-sig);padding:22px 24px;margin:26px 0;
}
.atout svg{width:30px;height:30px;stroke:var(--or);flex:none;margin-top:2px}
.atout p{margin:0;font-size:.97rem;color:#E4EEEF}
.pack__in{grid-template-columns:1fr 1.05fr}
.cadre--pack{aspect-ratio:3/2}

/* ── qui suis-je ── */
/* `start` et non `center` : le haut du portrait s'aligne ainsi sur le haut
   du logo, qui ouvre la colonne de texte. */
.magalie__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:start}
/* ⚠ Le recadrage est fait DANS l'image (prélèvement carré 760×760 pris à
   77 % vers la droite et calé en haut de la source), pas en CSS : la source
   est en 3:2 dans un cadre 1:1, donc `cover` cale sur la hauteur et
   `object-position` n'a aucun effet vertical. Resserrer le prélèvement est
   le seul moyen de faire descendre le visage dans le cadre — d'où le
   compromis : plus on resserre, plus le visage descend, mais plus il grossit.
   760 sur les 800 px disponibles = décalage à gauche conservé, zoom minime. */
.cadre--portrait{aspect-ratio:1/1;width:100%}
.cadre--portrait img{object-position:center}
/* Le logo en grand, lisible : le slogan « immobilier & home staging »
   ne se lit pas à la taille de l'en-tête. Placé en haut de la colonne
   de texte, où il reste de la place. */
.logo-grand{margin:0 0 30px;width:min(100%,260px)}
.logo-grand img{width:100%;height:auto}
.magalie__txt h2{margin-bottom:18px}
.lead{font-family:'Cormorant Garamond',serif;font-size:1.42rem;line-height:1.45;color:var(--petrole);font-style:italic}
.magalie__txt p:not(.lead):not(.kicker){color:var(--gris)}
.badges{list-style:none;margin:24px 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.badges li{
  background:var(--creme-2);border-radius:6px 6px 14px 6px;padding:7px 14px;
  font-size:.82rem;letter-spacing:.02em;color:var(--encre);
}

/* ── biens vendus ── */
.biens{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-bottom:44px}
.bien{position:relative;margin:0}
.bien figure{margin:0 0 16px;border-radius:var(--r-sig);overflow:hidden}
.bien img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s}
.bien__lieu{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--petrole);margin:0 0 6px}
.bien h3{margin-bottom:6px;font-size:1.3rem}
.bien h3 a{text-decoration:none}
.bien h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.bien__res{font-size:.92rem;color:var(--gris);margin:0}

/* Encart « biens en vente » — c'est la porte d'entrée des acquéreurs,
   il doit se voir : fond pétrole plutôt qu'une simple carte blanche. */
.encart-iad{
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
  background:var(--petrole);color:#fff;border-radius:var(--r-sig-lg);
  padding:38px 42px;box-shadow:var(--ombre);position:relative;overflow:hidden;
}
.encart-iad::after{
  content:"";position:absolute;right:-90px;top:-90px;width:250px;height:250px;
  border:1.5px solid rgba(219,180,112,.3);border-radius:50%;pointer-events:none;
}
.encart-iad>div{position:relative;max-width:60ch}
.encart-iad .kicker{color:var(--or-clair);margin-bottom:10px}
.encart-iad h3{margin-bottom:8px;font-size:clamp(1.5rem,2.2vw,1.9rem)}
.encart-iad p{margin:0;color:#CFDFE1;font-size:1rem}
.encart-iad .btn{position:relative;flex:none}
/* La flèche avance toute seule : sur mobile il n'y a pas de survol pour
   signaler que ce bouton mène ailleurs.
   ⚠️ `.btn--fleche` est le modificateur à poser sur un bouton isolé qui sort
   du site. Le sélecteur de l'encart d'accueil est laissé MOT POUR MOT : la
   page d'accueil est validée par Magalie, on lui ajoute un voisin, on ne la
   réécrit pas. */
@media (prefers-reduced-motion:no-preference){
  .encart-iad .btn svg,.btn--fleche svg{animation:avance 2.6s ease-in-out infinite}
}
@keyframes avance{
  0%,62%,100%{transform:translateX(0)}
  74%{transform:translateX(5px)}
  86%{transform:translateX(0)}
}

/* lien « voir tout » aligné à droite d'un titre de section */
.sec__head--rang{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.sec__head--rang>div{max-width:640px}

/* ── avis — carrousel à défilement ── */
.avis-zone{position:relative}
/* ⚠ Pas de minmax(0,…) ici : la borne min à 0 autorise la grille à
   comprimer les 6 cartes dans la largeur au lieu de déborder, et le
   défilement horizontal ne se déclenche jamais. Piste de taille fixe. */
.avis{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 52px)/3);
  gap:26px;margin-bottom:26px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:8px;scrollbar-width:none;
}
.avis::-webkit-scrollbar{display:none}
.avis__c{
  margin:0;background:var(--creme);border-radius:var(--r-sig);padding:30px 28px;border:1px solid var(--ligne);
  display:flex;flex-direction:column;scroll-snap-align:start;
}
.avis__c p{font-size:1rem;color:var(--encre);margin:14px 0 20px;flex:1}
.avis__c footer{border-top:1px solid var(--ligne);padding-top:14px;font-size:.87rem}
.avis__c footer b{display:block;font-weight:500}
.avis__c footer span{color:var(--gris);font-size:.82rem}
.avis__c .src{display:block;margin-top:5px;font-size:.74rem;color:var(--petrole);letter-spacing:.06em;text-transform:uppercase}

.avis-nav{display:flex;gap:10px;justify-content:center;margin-bottom:26px}
.avis-nav button{
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  background:transparent;color:var(--petrole);border:1.5px solid var(--petrole);
  border-radius:10px 10px 20px 10px;transition:background .22s,color .22s,opacity .22s;
}
/* Le coin marqué est inversé sur le bouton de gauche : les deux se
   répondent en miroir au lieu de pointer du même côté. */
.avis-nav button[data-prec]{border-radius:10px 10px 10px 20px}
.avis-nav button svg{width:19px;height:19px;stroke-width:2}
.avis-nav button[disabled]{opacity:.3;cursor:default}
.preuve-liens{font-size:.92rem;color:var(--gris)}
.preuve-liens a{color:var(--petrole);font-weight:500;text-underline-offset:4px}
.preuve-liens span{margin:0 10px;color:var(--or)}

/* ── secteur ──
   Photo en fond, mais recouverte d'un voile pétrole quasi opaque : le texte
   reste à un contraste AAA. Une image de fond ne doit jamais coûter de la
   lisibilité (c'est le défaut du carrousel de l'ancien site). */
/* ⚠ L'URL de l'image est écrite DIRECTEMENT ici, jamais via une variable
   CSS : une url() relative placée dans une custom property n'est pas
   résolue de la même façon selon les navigateurs (par rapport au document
   ou par rapport à la feuille de styles). C'est ce qui l'empêchait de
   s'afficher. Chemin relatif à ce fichier : assets/css/ -> ../img/ */
.secteur{
  color:#fff;padding:var(--pas) 0;position:relative;overflow:hidden;
  background:var(--petrole-fonce) url('../img/fond-secteur.webp') center/cover no-repeat;
}
.secteur::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,55,66,.96) 0%,rgba(0,55,66,.9) 42%,rgba(0,55,66,.66) 100%);
}
.secteur__in{
  position:relative;
  display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(34px,5vw,66px);align-items:center;
}
.secteur h2{margin-bottom:18px}
.secteur p{color:#CFDFE1;margin:0}
.communes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
/* Fond semi-opaque sur les pastilles : la photo reste visible derrière,
   mais les noms de communes gardent un contraste confortable. */
.communes li{
  border:1px solid rgba(219,180,112,.45);border-radius:6px 6px 14px 6px;
  padding:8px 15px;font-size:.87rem;color:#EAF2F3;
  background:rgba(0,55,66,.5);backdrop-filter:blur(2px);
}
/* ⚠️ Variante FOND CLAIR. La version ci-dessus est semi-opaque, dessinée
   pour le bandeau photo de l'accueil : posée telle quelle sur du blanc,
   elle vire au gris et le texte clair devient illisible. Même dessin, mais
   texte pétrole sur blanc (10,64:1). Constaté sur /home-staging/ le
   2026-08-14, en affichant les communes hors du bandeau sombre. */
/* ⚠️ FOND CRÈME-2, PAS BLANC (corrigé le 2026-08-20, signalé par Patrice).
   Le blanc ne marchait que dans une section déjà crème — `/estimation/` et
   `/les-biens-vendus/`. Sur les SIX autres pages qui affichent ces pastilles,
   la section est blanche : la pastille était blanche sur blanc, et seule sa
   bordure beige la dessinait. Le crème-2 se détache des deux fonds :
   écart (13,20,31) sur le blanc, (8,11,16) sur le crème — dans ce second cas
   davantage que le blanc n'en donnait. Une seule valeur suffit donc, et il
   n'y a aucune liste de sections claires à tenir à jour. */
.communes--clair li{color:var(--petrole);background:var(--creme-2);border-color:var(--ligne)}

/* Pastilles de quartiers — même forme que les communes, mais posées sur fond
   clair : bordure et texte pétrole au lieu du verre dépoli sur photo.
   ⚠️ LE FOND DOIT SUIVRE `.communes--clair li`, à l'identique. Les deux
   familles se côtoient sur `/estimation/`, à deux cents pixels l'une de
   l'autre et au même dessin : dès qu'elles divergent, ça se lit comme un
   défaut. C'est arrivé le 2026-08-20 — les communes sont passées en crème-2
   et les quartiers sont restés blancs. Toute retouche de l'une va sur l'autre.
   ℹ️ Sur les pages locales, les quartiers emploient `communes--clair` et non
   cette classe : elle ne sert donc QUE sur `/estimation/`. */
.quartiers{list-style:none;margin:24px 0 28px;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.quartiers li{
  border:1px solid var(--ligne);border-radius:6px 6px 14px 6px;
  padding:8px 15px;font-size:.87rem;color:var(--petrole);background:var(--creme-2);
}

/* ── Respiration : une façade ──
   La page n'alignait que des intérieurs. Bande purement visuelle, placée
   juste avant l'estimation : la dernière image avant le formulaire.
   ⚠️ La hauteur est portée par l'<img>, pas par le <picture> (cf. le piège
   du <picture> qui garde la hauteur naturelle de l'image). */
.bandeau{position:relative;overflow:hidden}
.bandeau>picture{display:block;width:100%}
.bandeau img{
  /* ⚠️ Hauteur calee sur le ratio 2,2:1 de l'image : une bande plus plate
     rognerait le toit et la terrasse, et il ne resterait qu'un pan de mur. */
  display:block;width:100%;height:clamp(230px,44vw,620px);
  object-fit:cover;object-position:center center;
}
/* voile pétrole en dégradé : le texte reste lisible à gauche,
   la brique reste visible à droite */
.bandeau::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(0,55,66,.86) 0%,rgba(0,55,66,.62) 38%,rgba(0,55,66,.06) 72%,rgba(0,55,66,0) 86%);
}
.bandeau__in{position:absolute;inset:0;z-index:1;display:flex;align-items:center}
.bandeau__in p{
  /* assez large pour que chaque phrase tienne sur UNE ligne, mais sans
     déborder de la zone où le voile est le plus dense (40 % de la largeur) */
  margin:0;max-width:min(54%,570px);color:#fff;
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.22;
}
.bandeau__in span{display:block;margin-top:.25em;color:var(--or);font-style:italic}
@media (max-width:900px){
  /* à l'étroit, le voile passe de gauche-droite à haut-bas */
  .bandeau::after{
    background:linear-gradient(180deg,
      rgba(0,55,66,.24) 0%,rgba(0,55,66,.58) 55%,rgba(0,55,66,.86) 100%);
  }
  .bandeau__in{align-items:flex-end;padding-bottom:26px}
  .bandeau__in p{max-width:none}
}

.cta__horaires{margin:6px 0 0;color:var(--gris);font-size:.92rem}
/* Mention du réseau : discrète, en fin de page, jamais accompagnée d'un logo. */
.reseau{
  margin:clamp(34px,4vw,54px) 0 0;padding-top:22px;border-top:1px solid var(--ligne);
  color:var(--gris);font-size:.92rem;
}
.reseau strong{color:var(--petrole);font-weight:500}

/* ── Formulaire : messages et anti-spam ── */
/* ⚠️ Marge d'ancre généreuse sur les deux cibles du formulaire : l'en-tête est
   collant, et il faut aussi laisser voir le titre « Demander mon estimation »
   au-dessus du message, sinon on atterrit sur un texte sans contexte. */
#merci,#formulaire{scroll-margin-top:150px}
@media (max-width:900px){ #merci,#formulaire{scroll-margin-top:120px} }
#merci:focus{outline:none}

/* ⚠️ Le piège ne doit pas être atteignable au clavier ni annoncé par un lecteur
   d'écran, sinon on gêne un humain pour attraper un robot. D'où la sortie de flux
   plutôt qu'un display:none, que certains robots savent justement repérer. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__ok{
  margin:0 0 18px;padding:14px 16px;border-radius:var(--r-btn);
  background:#EAF3EF;border:1px solid #BFDDD0;color:#1C4B39;font-size:.95rem;line-height:1.5;
}
.form__ok strong{color:#123A2B;font-weight:500}
.form__err{
  margin:0 0 18px;padding:12px 16px;border-radius:var(--r-btn);
  background:#FBEDEA;border:1px solid #EFC8BF;color:#7A2E1D;font-size:.92rem;
}
.form__err ul{margin:0;padding-left:18px}
.form__err li+li{margin-top:4px}

/* La question anti-robot : volontairement discrète, elle ne doit pas avoir l'air
   d'un obstacle au milieu des champs utiles. */
.champ--calcul input{max-width:9em}

/* ── Pages de texte long (mentions légales, confidentialité) ──
   Mesure de ligne volontairement courte et interlignage large : ces pages se
   lisent mal, autant ne pas y ajouter des lignes de 100 caractères. */
.legal{color:var(--gris);font-size:1.02rem;line-height:1.75}
.legal h2{
  font-size:clamp(1.5rem,2.4vw,1.9rem);color:var(--encre);
  margin:52px 0 14px;padding-top:26px;border-top:1px solid var(--ligne);
}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal h3{font-size:1.15rem;color:var(--petrole);margin:30px 0 10px}
.legal p{margin:0 0 1.1em}
.legal strong{color:var(--encre)}
.legal a{color:var(--petrole);text-underline-offset:3px}
/* Bloc d'identité d'un tiers : retrait et filet, pour qu'on voie d'un coup d'œil
   que ces informations ne concernent pas Magalie mais son réseau. */
.legal__bloc{
  border-left:3px solid var(--ligne);padding:4px 0 4px 18px;
  font-size:.96rem;background:transparent;
}
.legal__fort{
  background:var(--creme);border-radius:var(--r-btn);
  padding:16px 20px;border:1px solid var(--ligne);
}
.courriel{white-space:nowrap}
.legal__maj{margin-top:44px;font-size:.9rem;color:var(--gris);font-style:italic}
.legal .liste{margin:14px 0 1.3em}   /* sans marge basse, le paragraphe suivant colle a la liste */

/* Étapes présentées en pleine largeur (page vendre) : le texte y est plus long
   que dans la colonne du formulaire, on lui donne de l'air. */
.etapes--large li{gap:20px}
.etapes--large span{font-size:1.04rem}
@media (min-width:901px){ .etapes--large{max-width:56em} }

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--ligne);padding:4px 0}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 40px 19px 0;position:relative;
  font-size:1.08rem;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--petrole);border-bottom:2px solid var(--petrole);
  transform:translateY(-70%) rotate(45deg);transition:transform .28s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 20px;color:var(--gris);font-size:1rem;max-width:64ch}

/* ── CTA final ── */
.cta{background:var(--creme);padding:var(--pas) 0}
.cta__in{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(36px,5vw,68px);align-items:center}
.cta h2{margin-bottom:18px}
.cta__lead{color:var(--gris);font-size:1.06rem;max-width:40em}
.cta__lead strong{color:var(--encre);font-weight:500}

/* les 3 étapes de l'estimation */
.etapes{list-style:none;margin:26px 0 30px;padding:0;display:flex;flex-direction:column;gap:16px}
.etapes li{display:flex;gap:16px;align-items:flex-start}
.etapes b{
  flex:none;width:34px;height:34px;display:grid;place-items:center;
  background:var(--petrole);color:#fff;border-radius:8px 8px 16px 8px;
  font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;
}
.etapes span{font-size:.97rem;color:var(--gris);line-height:1.6}
.etapes strong{color:var(--encre);font-weight:500}
.tel-gros{
  display:inline-flex;align-items:center;gap:13px;text-decoration:none;margin-top:10px;
  font-family:'Cormorant Garamond',serif;font-size:2.15rem;color:var(--petrole);
}
.tel-gros svg{width:26px;height:26px;stroke:var(--or)}

.form{background:#fff;border:1px solid var(--ligne);border-radius:var(--r-sig-lg);padding:34px 32px;box-shadow:var(--ombre)}
.form__t{font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin:0 0 4px}
.form__sub{font-size:.87rem;color:var(--gris);margin:0 0 20px}
.champ{margin-bottom:15px}
.champ label{display:block;font-size:.82rem;color:var(--gris);margin-bottom:6px;letter-spacing:.03em}
.champ input,.champ textarea{
  width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:8px 8px 16px 8px;
  font:400 .98rem 'Jost',sans-serif;color:var(--encre);background:var(--creme);
}
.champ input:focus,.champ textarea:focus{outline:2px solid var(--petrole);outline-offset:1px;background:#fff}
.champ textarea{resize:vertical;min-height:80px}
.form__note{font-size:.78rem;color:var(--gris);text-align:center;margin:12px 0 0}

/* ── pied de page ── */
.ft{background:var(--petrole-fonce);color:#C6D8DB;padding:clamp(52px,6vw,80px) 0 0;font-size:.93rem}
.ft__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px}
.ft__col h2{font-family:'Jost',sans-serif;font-size:.79rem;letter-spacing:.18em;text-transform:uppercase;color:var(--or);margin:0 0 16px;font-weight:500}
.ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft__col a{text-decoration:none}
.ft__col--marque img{width:205px;height:auto;margin-bottom:18px}
.ft__col--marque p{color:#9FBCC1;font-size:.9rem;line-height:1.6}
.ft__rs{display:flex;gap:11px;margin-top:18px}
.ft__rs a{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid rgba(219,180,112,.4);border-radius:8px 8px 16px 8px;
}
.ft__rs svg{width:17px;height:17px;stroke:var(--or)}
.ft__coord{color:#9FBCC1;line-height:1.6}
.ft__coord b{color:#EAF2F3;font-weight:500}
.ft__contact{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  border:1px solid rgba(219,180,112,.5);border-radius:8px 8px 16px 8px;
  color:var(--or-clair);font-weight:500;transition:background .25s,color .25s;
}
.ft__bas{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:.82rem;color:#8FAAB0;
}
.ft__bas p{margin:0}
.ft__legal a{text-decoration:none}
.ft__legal span{margin:0 8px;color:var(--or)}
.ft__credit a{color:#C6D8DB}
/* Engrenage d'accès à la console : présent pour Magalie, invisible pour qui
   ne le cherche pas. Discret au repos, il ne s'anime qu'au survol. */
.ft__admin{
  display:inline-flex;vertical-align:-3px;margin-right:9px;
  opacity:.42;transition:opacity .25s,transform .5s;
}
.ft__admin svg{
  width:15px;height:15px;fill:none;stroke:#C6D8DB;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.ft__admin:focus-visible{opacity:1;outline:2px solid var(--or);outline-offset:3px;border-radius:4px}

/* ── retour en haut ── */
.haut{
  position:fixed;right:18px;bottom:18px;z-index:90;width:46px;height:46px;
  display:grid;place-items:center;background:var(--petrole);color:#fff;
  border-radius:10px 10px 20px 10px;box-shadow:var(--ombre);text-decoration:none;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s,transform .3s,visibility .3s;
}
.haut.is-visible{opacity:1;visibility:visible;transform:none}
.haut svg{width:20px;height:20px;stroke-width:2}

/* ── apparition au défilement (jamais sur le hero) ── */
.reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.2,.7,.3,1),transform .75s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.reveal--g{transform:translateX(-34px)}
.reveal--d{transform:translateX(34px)}
.reveal--zoom{transform:scale(.955);transition-duration:.9s}
.reveal.is-in{opacity:1;transform:none}

/* Léger glissement de l'image dans son cadre, piloté par le défilement.
   ⚠ Zoom volontairement faible (1.04) : au-delà, le cadrage se perd.
   ⚠ Jamais sur le hero : c'est l'image LCP, elle ne doit rien animer. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .cadre--pack img,.cadre--portrait img{
      animation:derive linear both;animation-timeline:view();animation-range:entry 0% exit 100%;
    }
    @keyframes derive{from{transform:scale(1.04) translateY(1.4%)}to{transform:scale(1.04) translateY(-1.4%)}}
  }
}

/* filet doré qui se déploie sous les titres de section */
.sec__head h2,.pack h2,.secteur h2,.cta h2{position:relative}
.sec__head h2::after,.pack h2::after,.secteur h2::after,.cta h2::after{
  content:"";position:absolute;left:0;bottom:-14px;height:2px;width:0;background:var(--or);
  transition:width 1s cubic-bezier(.2,.7,.3,1) .25s;
}
.is-in h2::after,.reveal.is-in>h2::after{width:64px}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .avis{scroll-behavior:auto}
}

/* Mode capture : ?snap=1 fige tout (états finaux, zéro animation) pour
   que les copies d'écran de relecture ne saisissent pas un fondu à mi-course. */
.snap .reveal{opacity:1!important;transform:none!important;transition:none!important}
.snap .is-in h2::after,.snap .sec__head h2::after,.snap .pack h2::after,
.snap .secteur h2::after,.snap .cta h2::after{width:64px;transition:none}
.snap *,.snap *::before,.snap *::after{animation:none!important}

/* ══ SURVOL — pointeur uniquement (anti double-tap mobile) ══ */
/* ══ Visionneuse avant / après ═════════════════════════════════
   La vignette de galerie ouvre le comparateur en grand. Le bouton
   recouvre toute la carte, comme le faisait le lien étiré : même
   confort tactile, mais vers une vraie action au lieu d'une ancre
   qui ne menait nulle part (remarque de Patrice, 2026-08-14).
   ⚠️ Pas de balayage horizontal pour changer de photo : ce geste
   appartient déjà au curseur du comparateur, qui est justement ce
   qu'on vient voir. Navigation par flèches et par clavier. */
.bien__zoom{
  position:absolute;inset:0;z-index:2;
  border:0;padding:0;background:none;cursor:zoom-in;
}
.bien__zoom:focus-visible{outline:2px solid var(--or);outline-offset:5px;border-radius:var(--r-sig)}
.bien__loupe{
  position:absolute;left:12px;bottom:12px;z-index:1;
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:8px 8px 16px 8px;
  background:rgba(0,69,82,.88);color:#fff;
  font:500 .7rem/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;
  opacity:1;transform:none;transition:opacity .28s,transform .28s;
}
.bien__loupe svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.bien figure{position:relative}

.lb{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(14px,4vw,48px);
  background:rgba(4,26,31,.93);
}
.lb[hidden]{display:none}
body.lb-ouvert{overflow:hidden}
/* ⚠️ La largeur est aussi bornée par la HAUTEUR disponible. Le comparateur
   a un ratio 3/2 fixe : dimensionné à la seule largeur, il déborde dès que
   la fenêtre est basse (constaté à 800x455 : le haut de l'image sortait de
   l'écran et la légende passait dessous). Le retrait couvre les marges
   intérieures et la légende. */
.lb__in{margin:0;width:min(1000px,100%,calc((100vh - 190px) * 1.5))}
@supports (height:100dvh){
  .lb__in{width:min(1000px,100%,calc((100dvh - 190px) * 1.5))}
}
.lb .compare{max-width:none;margin:0}
.lb .compare__box{box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.lb__cap{margin:16px 2px 0;text-align:center}
.lb__bien{display:block;color:#DCE7E9;font-size:.95rem}
.lb__aide{
  display:block;margin-top:5px;color:#8FAAB0;font-size:.83rem;
}
.lb__fermer,.lb__nav{
  position:absolute;z-index:2;
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.3);border-radius:10px 10px 20px 10px;
  background:rgba(0,69,82,.72);cursor:pointer;
  transition:background .22s,border-color .22s;
}
.lb__fermer svg,.lb__nav svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lb__fermer{top:clamp(12px,3vw,26px);right:clamp(12px,3vw,26px)}
.lb__nav--prec{left:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__nav--suiv{right:clamp(8px,2vw,26px);top:50%;transform:translateY(-50%)}
.lb__fermer:focus-visible,.lb__nav:focus-visible{outline:2px solid var(--or);outline-offset:3px}
@media (max-width:760px){
  .lb__nav{top:auto;bottom:clamp(12px,4vw,26px);transform:none}
  .lb__cap{margin-bottom:56px}
  /* Les flèches passent en bas : il leur faut leur place en plus. */
  .lb__in{width:min(100%,calc((100vh - 260px) * 1.5))}
}
@supports (height:100dvh){
  @media (max-width:760px){ .lb__in{width:min(100%,calc((100dvh - 260px) * 1.5))} }
}

/* ══ Galerie avant / après ═════════════════════════════════════
   Deux vignettes CÔTE À CÔTE, cliquables, plutôt que le comparateur à
   glissière de /home-staging/ : on voit les deux états d'un coup, sans
   rien manipuler, et la page se parcourt d'un regard. Le geste de
   glissement reste donc libre, ce qui rend le balayage possible dans la
   visionneuse (choix de Patrice, 2026-08-14). */
.gal{margin:0 0 clamp(40px,4.4vw,64px)}
.gal__t{font-size:1.22rem;margin:0 0 3px}
.gal__t span{
  display:block;margin-top:5px;
  font:500 .72rem/1 'Jost',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--petrole);
}
.gal__duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.2vw,16px);margin:14px 0 12px}
.gal__vue{
  position:relative;display:block;padding:0;border:0;background:none;cursor:zoom-in;
  border-radius:var(--r-sig);overflow:hidden;line-height:0;
}
.gal__vue img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .55s}
.gal__vue:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.gal__etat{
  position:absolute;left:10px;top:10px;
  padding:4px 11px;border-radius:6px 6px 12px 6px;
  background:rgba(0,69,82,.88);color:#fff;
  font:500 .68rem/1 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.gal__etat--ap{background:rgba(219,180,112,.94);color:var(--encre)}
.gal__res{margin:0;font-size:.94rem;color:var(--gris)}
.gal__res strong{color:var(--encre);font-weight:500}

/* ⚠️ Sur mobile, la marge standard de 20 px de chaque côté ampute des
   vignettes déjà réduites de moitié. Sur CETTE page seulement, elle tombe
   à 10 px : chaque photo y gagne une dizaine de pixels, ce qui compte
   quand elle en fait 170 (demande de Patrice, 2026-08-14). Les autres
   pages, dont l'accueil validée, gardent leur rythme. */
@media (max-width:640px){
  .galerie .wrap{width:min(100% - 20px,var(--wrap))}
  .gal__duo{gap:7px}
  .gal__etat{left:6px;top:6px;padding:3px 8px;font-size:.62rem;letter-spacing:.08em}
  .gal__t{font-size:1.1rem}
}

/* La visionneuse simple partage l'habillage de .lb, mais montre une photo
   entière au lieu d'un comparateur. */
.lb__photo{display:block;line-height:0}
.lb__photo img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-sig-lg);box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.lb__in{touch-action:pan-y}

@media (hover:hover){
  .btn:hover{transform:translateY(-2px)}
  .btn--or:hover{background:var(--or-clair);box-shadow:0 10px 26px -12px rgba(219,180,112,.9)}
  .btn--petrole:hover{background:var(--petrole-clair)}
  .btn--ghost:hover{background:var(--petrole);color:#fff}
  .nav ul a:hover::after{right:0}
  .topbar__tel:hover,.topbar__link:hover,.topbar__note:hover{color:var(--or-clair)}
  .carte:hover{transform:translateY(-4px);box-shadow:var(--ombre)}
  .carte:hover .lien-fleche svg{transform:translateX(5px)}
  .bien:hover>figure>picture{transform:scale(1.05)}
  .gal__vue:hover img{transform:scale(1.05)}
  .bien__loupe{opacity:0;transform:translateY(5px)}
  .bien:hover .bien__loupe,.bien__zoom:focus-visible+.bien__loupe{opacity:1;transform:none}
  .lb__fermer:hover,.lb__nav:hover{background:var(--petrole-clair);border-color:rgba(255,255,255,.55)}
  .bien:hover h3{color:var(--petrole)}
  .ft__col a:hover,.ft__legal a:hover,.ft__credit a:hover{color:var(--or-clair)}
  .ft__admin:hover{opacity:1;transform:rotate(90deg)}
  .ft__admin:hover svg{stroke:var(--or)}
  .ft__contact:hover{background:var(--or);color:var(--petrole-fonce)}
  .ft__rs a:hover{background:var(--or)}
  .ft__rs a:hover svg{stroke:var(--petrole-fonce)}
  .communes li:hover{background:rgba(219,180,112,.14);transform:translateY(-2px)}
  /* ⚠️ Le survol ci-dessus REMPLACE le fond, il ne s'y superpose pas : posé sur
     une section blanche il ÉCLAIRCISSAIT la pastille crème-2 au lieu de
     l'assombrir, et le survol partait à l'envers. D'où une valeur opaque et
     indépendante de la section — c'est l'or à 22 % composé sur le crème-2. */
  .communes--clair li:hover{background:#EDDFC7}
  .tel-gros:hover{color:var(--petrole-clair)}
  .haut:hover{background:var(--petrole-clair)}
  .lien-fleche:hover svg{transform:translateX(5px)}
  .avis-nav button:not([disabled]):hover{background:var(--petrole);color:#fff}
  .avis__c:hover{border-color:var(--or)}
  .cadre:hover>picture{transform:scale(1.042)}
  .hdr__logo:hover img{transform:scale(1.03)}
}
.communes li{transition:background .25s,transform .25s}
  .quartiers li{transition:border-color .25s,transform .25s}
  .quartiers li:hover{border-color:var(--or);transform:translateY(-2px)}
.avis__c{transition:border-color .3s}
/* ⚠ Le survol agit sur le <picture>, pas sur l'<img> : la dérive au
   défilement occupe déjà le `transform` de l'image, et une animation
   l'emporte sur un survol dans la cascade. Deux éléments = deux
   transformations qui se composent au lieu de s'annuler. */
/* ⚠ La découpe par `overflow:hidden` sur des coins arrondis est
   ANTIALIASÉE : le pixel du bord mélange l'image et ce qu'il y a derrière,
   ce qui laisse un filet clair d'un pixel, visible surtout là où la photo
   est sombre (mesuré : 251,245,211 entre l'orange de la photo et le crème).
   On agrandit l'image de 0,6 % pour que ce pixel de transition tombe DANS
   l'image et non sur sa frontière. */
.cadre>picture,.bien figure>picture{transform:scale(1.006)}
.cadre>picture,.bien figure>picture,.hdr__logo img{
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1080px){
  .hero__in,.pack__in,.magalie__in,.secteur__in,.cta__in{grid-template-columns:1fr}
  .chiffres__in{grid-template-columns:repeat(2,1fr);gap:22px 30px}
  .chiffre:nth-child(3){border-left:0;padding-left:0}
  .biens{grid-template-columns:1fr 1fr}
  .biens .bien:last-child{grid-column:1/-1}
  .avis{grid-auto-columns:calc((100% - 26px)/2)}
  .ft__in{grid-template-columns:1fr 1fr}
  .sec__head--rang{flex-direction:column;align-items:flex-start}
}

@media (max-width:1080px){
  .magalie__in{grid-template-columns:1fr}
  .magalie__vis{max-width:420px}
  .logo-grand{width:min(60%,220px)}
}

@media (max-width:900px){
  .hdr__logo img{width:90px}
  .hdr__slogan{padding-left:12px;font-size:.7rem;letter-spacing:.09em}
  .hdr__slogan span{font-size:.64rem}
  .burger{display:block;order:3}
  .nav__mobile{display:block}
  .nav{
    position:fixed;inset:0 0 0 auto;z-index:110;width:min(84vw,340px);background:var(--creme);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;
    padding:88px 30px 30px;transform:translateX(100%);transition:transform .34s ease;
    box-shadow:-14px 0 40px -20px rgba(0,69,82,.5);overflow-y:auto;
  }
  .nav.is-ouvert{transform:none}
  .nav__liste{grid-template-columns:1fr;row-gap:0;width:100%;margin:0}
  /* ⚠️ En colonne unique, la cellule de comblement ferait une ligne vide
     bordée comme une entrée de menu. */
  .nav__vide{display:none}
  .nav ul li{border-bottom:1px solid var(--ligne)}
  /* Espacement resserré (15 → 11 px) : le menu compte une entrée de plus
     depuis l'arrivée de « Contact », et il ne doit pas demander à défiler. */
  .nav ul a{display:block;padding:11px 0;font-size:1.02rem}
  .nav ul a::after{display:none}
  .nav__cta{margin-top:24px;width:100%}
  body.menu-ouvert{overflow:hidden}
}

@media (max-width:760px){
  body{font-size:16px}
  :root{--pas:56px}
  .duo{grid-template-columns:1fr}

  /* Biens et avis en défilement horizontal : on garde tous les éléments
     accessibles sans empiler des blocs pleine hauteur (page mobile plus
     courte, et la carte tronquée à droite signale qu'on peut faire défiler). */
  .biens,.avis{
    grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;
    gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;padding-bottom:10px;
  }
  .bien,.avis__c{scroll-snap-align:start}
  .biens .bien:last-child{grid-column:auto}
  .bien img{aspect-ratio:16/10}
  .magalie__vis{max-width:none}
  .logo-grand{width:min(62%,220px)}
  .encart-iad{padding:30px 26px}
  .encart-iad .btn{width:100%}
  .hero::before{display:none}
  .hero__cta .btn{width:100%}
  /* ⚠️ En position absolue, un libellé un peu long débordait sur la photo
     (constaté sur iPhone 15 Pro). Sous 760 px, la pastille et la signature
     repassent en FLUX NORMAL sous l'image : la longueur du texte ne peut
     plus empiéter, quelle qu'elle soit. `align-items:flex-end` cale le
     texte sur le bas de la pastille, donc sous le bord de l'image. */
  .hero__vis{padding-bottom:0}
  .hero__bas{
    display:flex;align-items:flex-end;gap:14px;
    margin-top:-42px;padding-left:4px;position:relative;
  }
  .pastille{
    position:relative;left:auto;bottom:auto;flex:none;
    width:104px;height:104px;margin:0;
  }
  .hero__sign{
    position:static;margin:0 0 6px;font-size:1rem;line-height:1.35;
  }
  .hero__sign span{font-size:.82rem}
  .chiffres__in{grid-template-columns:1fr;gap:20px}
  .chiffre+.chiffre{border-left:0;padding-left:0;border-top:1px solid rgba(219,180,112,.24);padding-top:20px}
  .encart-iad{flex-direction:column;align-items:flex-start}
  .encart-iad .btn{width:100%}
  /* Les deux colonnes de liens côte à côte : elles sont courtes, les
     empiler allongeait le pied de page pour rien. */
  .ft__in{grid-template-columns:1fr 1fr;gap:30px 24px}
  .ft__col--marque{grid-column:1/-1}
  .ft__in>.ft__col:last-child{grid-column:1/-1}
  .ft__bas{flex-direction:column;text-align:center}
  .tel-gros{font-size:1.75rem}
  .compare__box,.cadre--hero{aspect-ratio:4/3}
}

@media (max-width:420px){
  .hide-xs{display:none}
  .topbar__right{gap:12px}
  .carte{padding:30px 24px 28px}
  .form{padding:26px 22px}
}


/* ══════════════════════════════════════════════════════════════
   /qui-suis-je/ — sa page de présentation
   ══════════════════════════════════════════════════════════════ */

/* ⚠️ Sur cette page, le PORTRAIT EST LE HERO : il n'y a pas de pastille de
   portrait par-dessus, donc pas de place à lui réserver. Sans cette règle,
   le cadre traîne 72 px de vide en dessous. Posée sur la classe de page,
   comme le veut la règle : un réglage qui vaut pour toute une page ne se
   met pas section par section. */
.page-parcours .hero__vis{padding-bottom:0}

/* Sa signature, sous son texte. */
.signature{
  margin:26px 0 0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.55rem;color:var(--petrole);
}

/* Deux photos côte à côte, chacune avec sa légende.
   ⚠️ La légende est SŒUR du `.cadre`, jamais dedans : `.cadre` porte
   `overflow:hidden` pour découper l'image aux coins arrondis du logo, et
   rognerait la légende sans le moindre signe (défaut vécu ici même). */
.photo-duo{margin:0}
.photo-duo figcaption{margin-top:12px;font-size:.9rem;color:var(--gris)}

/* Carte entièrement cliquable vers une page pilier. La flèche est un <span>
   à l'intérieur du lien : un lien dans un lien serait invalide, et une seule
   cible par carte vaut mieux qu'un lien dupliqué (cible tactile + SEO). */
.carte-lien{
  display:block;padding:26px;border-radius:var(--r-sig);text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--ligne);transition:border-color .25s,box-shadow .25s;
}
.carte-lien h3{margin:0 0 8px;font-size:1.22rem;color:var(--petrole)}
.carte-lien p{margin:0 0 14px;color:var(--gris);font-size:.96rem}
.carte-lien .lien-fleche{pointer-events:none}
/* ⚠️ `.center` ne porte QUE `text-align`, pas de marge : un bouton ou un
   lien placé sous une grille `.duo` collait au bas des cartes (0 px d'écart
   mesuré). Règle générale, employée par /qui-suis-je/ et /vendre-avec-moi/. */
.duo + .center{margin:34px 0 0}

@media (hover:hover){
  .carte-lien:hover{border-color:var(--petrole);box-shadow:var(--ombre)}
  .carte-lien:hover .lien-fleche svg{transform:translateX(4px)}
}


/* ══════════════════════════════════════════════════════════════
   /les-biens-vendus/ — la rubrique et ses fiches
   ══════════════════════════════════════════════════════════════ */

/* Un hero court : ces pages n'ont pas de photo d'ouverture, la matière
   est en dessous. Pas de pastille non plus, donc rien à réserver. */
.hero--court{padding-block:clamp(38px,5vw,64px) 0;min-height:0}
.hero--court h1{margin-bottom:14px}
.hero--court .hero__chapo{max-width:60ch}
/* Le libellé qui introduit les pastilles de communes : sans lui, on lirait
   « j'ai vendu dans chacune de ces communes », ce qui serait faux. */
.hero__ou{margin:26px 0 12px;font-size:.9rem;color:var(--gris)}

/* La page contact ouvre SUR le formulaire : le bloc de conversion y tient
   lieu de hero, il lui faut donc la respiration d'un haut de page. */
.cta--haut{padding-top:clamp(38px,5vw,64px)}
.cta--haut h1{margin:0 0 14px}
/* ⚠️ `.cta__in` centre ses deux colonnes verticalement, ce qui convient
   à un bloc de fin de page. En HAUT de page, le titre se retrouvait
   300 px plus bas que le formulaire, dans un grand vide. */
.cta--haut .cta__in{align-items:start}
.contact__mail{margin:18px 0 0;font-size:.95rem;color:var(--gris)}

/* La carte de visite : portrait + nom + lien vers son parcours. Elle occupe
   le bas de la colonne de gauche, qui restait vide sous les coordonnées. */
.contact__carte{display:flex;align-items:center;gap:24px;margin:38px 0 0}
.contact__carte .cadre{flex:none;width:240px;margin:0}
.contact__carte .cadre img{width:100%;height:auto}
.contact__nom{
  margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:var(--petrole);
}
.contact__role{margin:4px 0 14px;font-size:.94rem;color:var(--gris);line-height:1.45}

@media (max-width:520px){
  .contact__carte{gap:18px}
  .contact__carte .cadre{width:130px}
}
/* Le libellé qui introduit les pastilles de communes. */
.hero__ou{margin:26px 0 12px;font-size:.9rem;color:var(--gris)}

/* La page contact ouvre SUR le formulaire : le bloc de conversion y tient
   lieu de hero, il lui faut donc la respiration d'un haut de page. */
.cta--haut{padding-top:clamp(38px,5vw,64px)}
.cta--haut h1{margin:0 0 14px}
/* ⚠️ `.cta__in` centre ses deux colonnes verticalement, ce qui convient
   à un bloc de fin de page. En HAUT de page, le titre se retrouvait
   300 px plus bas que le formulaire, dans un grand vide. */
.cta--haut .cta__in{align-items:start}
.contact__mail{margin:18px 0 0;font-size:.95rem;color:var(--gris)}

/* La carte de visite : portrait + nom + lien vers son parcours. Elle occupe
   le bas de la colonne de gauche, qui restait vide sous les coordonnées. */
.contact__carte{display:flex;align-items:center;gap:24px;margin:38px 0 0}
.contact__carte .cadre{flex:none;width:240px;margin:0}
.contact__carte .cadre img{width:100%;height:auto}
.contact__nom{
  margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:var(--petrole);
}
.contact__role{margin:4px 0 14px;font-size:.94rem;color:var(--gris);line-height:1.45}

@media (max-width:520px){
  .contact__carte{gap:18px}
  .contact__carte .cadre{width:130px}
}

/* Fil d'Ariane */
.fil{margin:0 0 18px;font-size:.9rem;color:var(--gris)}
.fil a{color:var(--petrole)}
.fil span{margin:0 6px;color:var(--or)}

/* Le délai, seul chiffre mis en avant : le prix, lui, ne s'affiche pas. */
.bien__cle{
  display:inline-block;margin:6px 0 0;padding:9px 16px;border-radius:var(--r-btn);
  background:var(--creme-2);font-size:.95rem;
}
.bien__cle strong{color:var(--petrole)}

/* La liste des biens vendus.
   ⚠️ ELLE NE S'APPELLE PLUS `.biens`, ET C'EST LA CORRECTION D'UN VRAI BOGUE.
   `.biens` désigne déjà le carrousel de l'accueil, qui devient sur téléphone un
   DÉFILEMENT HORIZONTAL (`grid-auto-flow:column; grid-auto-columns:82%`).
   Croire qu'il suffisait de redéclarer `grid-template-columns` sous
   `.page-texte` était faux : les deux autres propriétés continuaient de
   s'appliquer, et la rubrique s'affichait en deux colonnes bancales qui
   débordaient de l'écran. Un nom distinct vaut mieux qu'une surcharge. */
.biens-vendus{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,32px);overflow:visible;
}
.bienc{margin:0}
.bienc__lien{display:block;text-decoration:none;color:inherit}
.bienc__lien .cadre{margin:0 0 14px;aspect-ratio:3/2}
.bienc__lien .cadre img{width:100%;height:100%;object-fit:cover}
.bienc__lieu{
  margin:0;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--petrole);
}
.bienc__lieu span{color:var(--gris);letter-spacing:.04em;text-transform:none;font-size:.86rem}
.bienc__titre{margin:5px 0 0;font-size:1.14rem;line-height:1.25}
.bienc__delai{margin:8px 0 0;font-size:.95rem;color:var(--gris)}
.bienc__delai strong{color:var(--petrole)}

/* Les photos d'une fiche : même visionneuse que la galerie avant/après,
   balayage compris (aucun comparateur ici pour se disputer le geste). */
.galgrille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(8px,1.2vw,16px);
}
.galgrille .gal__vue{width:100%}

/* Crédit photo et liste vide. ⚠️ Ces deux paragraphes portaient des classes
   d'ADMIN (`adm-note`, `adm-vide`), qui n'existent que dans admin.css :
   sur le site public elles ne stylaient rien du tout. */
.credit{margin:26px 0 0;font-size:.88rem;color:var(--gris)}
.credit a{color:var(--petrole)}
.vide{color:var(--gris);font-style:italic}

@media (max-width:640px){
  .biens-vendus{grid-template-columns:1fr}
  .galgrille{grid-template-columns:1fr 1fr;gap:7px}
}

@media (hover:hover){
  .bienc__lien:hover .bienc__titre{color:var(--petrole)}
  .bienc__lien:hover .cadre{box-shadow:0 22px 60px -26px rgba(0,69,82,.5)}
}


/* ══════════════════════════════════════════════════════════════
   /actualites/ — le carnet et ses articles
   ══════════════════════════════════════════════════════════════ */

/* Deux sections qui se suivent (image d'ouverture puis texte) ne doivent pas
   cumuler leurs marges : celle-ci les resserre. */
.sec--serre{padding-block:clamp(26px,3vw,44px)}

/* ⚠ Resserrer ne suffisait pas : quand les deux sections s enchainent pour
   de bon, leurs marges s ADDITIONNENT quand meme, soit jusqu a 88 px sous
   l image d ouverture. L adjacence ne joue que la ou le cas se presente,
   c est-a-dire sur les articles : locale.php et secteur.php n ont qu une
   seule section de ce type et ne bougent pas. */
.sec--serre + .sec--serre{padding-top:0}

/* La liste des articles. ⚠️ Nom PROPRE à cette rubrique : réemployer un nom
   déjà pris ferait hériter de règles qu'on ne redéclare pas (cf. le bogue
   `.biens` du 17/08). */
.actus{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(20px,2.4vw,32px);
}
.actuc{margin:0}
.actuc__lien{display:block;text-decoration:none;color:inherit}
.actuc__lien .cadre{margin:0 0 14px;aspect-ratio:3/2}
.actuc__lien .cadre img{width:100%;height:100%;object-fit:cover}
.actuc__date{
  margin:0;font-size:.78rem;letter-spacing:.11em;text-transform:uppercase;color:var(--petrole);
}
.actuc__titre{margin:5px 0 8px;font-size:1.16rem;line-height:1.28}
.actuc__chapo{margin:0 0 12px;font-size:.95rem;color:var(--gris)}

/* Le corps d'un article : c'est du texte long, il a droit à sa respiration. */
.article h2{margin:38px 0 14px;font-size:1.5rem}
.article h3{margin:28px 0 10px;font-size:1.2rem}
.article p{margin:0 0 17px;font-size:1.02rem;line-height:1.75;color:var(--encre)}
.article ul{margin:0 0 20px;padding-left:22px;color:var(--encre)}
.article li{margin:0 0 7px;line-height:1.6}
.article a{color:var(--petrole)}
.article .cadre{margin:30px 0}
.article .credit{margin-top:26px}
.article__signe{
  margin:30px 0 0;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:1.35rem;color:var(--petrole);
}

@media (max-width:640px){
  .actus{grid-template-columns:1fr}
}

@media (hover:hover){
  .actuc__lien:hover .actuc__titre{color:var(--petrole)}
  .actuc__lien:hover .cadre{box-shadow:0 22px 60px -26px rgba(0,69,82,.5)}
  .actuc__lien:hover .lien-fleche svg{transform:translateX(4px)}
}

/* ── page « Ils en parlent » ───────────────────────────────────────────────
   ⚠️ Le mur s'appelle `.mur-avis` et NON `.avis` : cette dernière porte le
   carrousel de l'accueil, qui devient un défilement horizontal sur téléphone
   (`grid-auto-flow:column`). Une surcharge ne neutralise que ce qu'elle nomme,
   d'où un nom neuf. Seule la CARTE `.avis__c` est réutilisée : c'est une
   feuille, elle ne porte aucune mise en page. */
.preuve-chiffres{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;
  list-style:none;margin:30px 0 0;padding:0;
}
.preuve-chiffres li{text-align:center}
.preuve-chiffres b{display:block;font:400 1.7rem/1 'Cormorant Garamond',serif;color:var(--petrole)}
.preuve-chiffres span{font-size:.83rem;color:var(--gris)}

.mur-avis{
  columns:3 300px;column-gap:24px;
}
/* `break-inside` évite qu'une carte soit coupée entre deux colonnes ; le
   `inline-block` est le repli qui rend la règle effective sur WebKit. */
.mur-avis .avis__c{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:inline-block;width:100%;margin:0 0 24px;
}

.temoins{display:grid;gap:clamp(30px,4vw,54px)}
.temoin{display:grid;grid-template-columns:380px 1fr;gap:clamp(24px,3vw,44px);align-items:start}
/* Une ligne sur deux part de l'autre côté : sans ça, neuf blocs identiques
   empilés donnent une colonne de photos monotone.
   ⚠️ `order` NE SUFFIT PAS et casse tout : les colonnes restent `380px 1fr`,
   donc la photo déplacée à droite hérite de la colonne LARGE et le texte se
   retrouve serré dans les 380 px. Il faut inverser les COLONNES et placer
   chaque élément explicitement. */
.temoin:nth-child(even){grid-template-columns:1fr 380px}
.temoin:nth-child(even) .cadre{grid-column:2;grid-row:1}
.temoin:nth-child(even) .temoin__txt{grid-column:1;grid-row:1}
.temoin__txt h3{margin:0 0 4px;font-size:clamp(1.2rem,1.9vw,1.45rem)}
.temoin__lieu{margin:0 0 14px;font-size:.85rem;color:var(--gris)}
.temoin__txt blockquote{margin:0;padding:0;border:0}
.temoin__txt blockquote p{margin:0;font-size:1rem;line-height:1.75}
.temoin__sig{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--ligne);font-size:.87rem}
.temoin__sig b{font-weight:500}
.temoin__sig span::before{content:" · ";color:var(--gris)}
.temoin__sig span{color:var(--gris);font-size:.82rem}

@media (max-width:820px){
  .mur-avis{columns:1}
  /* ⚠️ `order` doit être NEUTRALISÉ en une colonne : sinon une ligne sur deux
     affiche son texte AVANT sa photo, et la photo se retrouve orpheline sous
     le témoignage suivant. */
  .temoin,.temoin:nth-child(even){grid-template-columns:1fr;gap:18px}
  /* ⚠️ Le placement explicite doit être ANNULÉ en colonne unique, sinon le
     texte et la photo se superposent dans la même cellule. */
  .temoin:nth-child(even) .cadre,
  .temoin:nth-child(even) .temoin__txt{grid-column:1;grid-row:auto}
}

/* Repli « lire les autres avis » — sans JavaScript, donc le contenu reste
   dans le HTML : indexable, et atteignable au clavier. */
.depli{margin-top:6px}
.depli summary{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  padding:13px 26px;border-radius:var(--r-btn);background:var(--petrole);color:#fff;
  font:500 .93rem/1 'Jost',sans-serif;letter-spacing:.03em;
}
.depli summary::-webkit-details-marker{display:none}
.depli summary::after{content:"▾";font-size:.8em;transition:transform .25s}
.depli[open] summary::after{transform:rotate(180deg)}
.depli[open] summary{margin-bottom:26px}
.depli>.mur-avis{margin-top:0}
/* Le résumé est un bouton : on le centre comme les autres appels à l'action. */
.depli{text-align:center}
.depli>.mur-avis{text-align:left}

/* ── hero de la page des avis : texte + portrait rond ──────────────────────
   ⚠️ Le rond n'est PAS `.pastille` (absolue, faite pour chevaucher une photo).
   ⚠️ La légende est SŒUR du cercle : `overflow:hidden` la rognerait dedans. */
.hero-avis{display:grid;grid-template-columns:1fr auto;gap:clamp(28px,4vw,64px);align-items:center}
.hero-portrait{margin:0;text-align:center}
.hero-portrait .rond{
  width:clamp(170px,20vw,250px);aspect-ratio:1;margin:0 auto;
  border-radius:50%;overflow:hidden;border:6px solid var(--creme);box-shadow:var(--ombre);
}
.hero-portrait .rond>picture{display:block;width:100%;height:100%}
.hero-portrait img{width:100%;height:100%;object-fit:cover}
.hero-portrait figcaption{margin-top:14px;font-size:.87rem;line-height:1.5}
.hero-portrait figcaption b{display:block;font-weight:500;color:var(--petrole)}
.hero-portrait figcaption span{color:var(--gris);font-size:.81rem}

@media (max-width:820px){
  /* Le portrait passe AU-DESSUS du titre : sur téléphone il ouvre la page au
     lieu de flotter à côté d'un texte qui prend toute la largeur. */
  .hero-avis{grid-template-columns:1fr;gap:22px}
  .hero-portrait{order:-1}
  /* ⚠️ En `flex-wrap`, le libellé le plus long (« Google home staging, 6 avis »)
     impose sa largeur et casse le rang : une note seule, puis deux, puis une.
     Une grille à deux colonnes les range par paires, quelle que soit la
     longueur des libellés. */
  .preuve-chiffres{display:grid;grid-template-columns:1fr 1fr;gap:20px 12px}
}

/* ── page « Mon secteur » ──────────────────────────────────────────────────
   ⚠️ `.carte-secteur` et pas `.carte` : cette dernière est la carte-encart des
   sections `.duo`. Un composant nouveau prend un nom nouveau. */
.carte-secteur{margin:0}
.carte-secteur .cadre{border-radius:var(--r-sig-lg)}
.carte-secteur img{width:100%;height:auto;display:block}
.carte-secteur figcaption{
  margin-top:14px;text-align:center;font-size:.9rem;color:var(--gris);
}
/* La mention de source est imposée par la Licence Ouverte de l'IGN : discrète,
   mais jamais absente. */
.carte-secteur figcaption span{display:block;margin-top:4px;font-size:.76rem;color:#8B9A9C}

.sec__note{max-width:64ch;margin:26px auto 0;color:var(--gris);font-size:.97rem;line-height:1.75}

.ventes-lieu{list-style:none;margin:0 0 30px;padding:0}
.ventes-lieu li{
  display:grid;grid-template-columns:190px 1fr;gap:18px;align-items:baseline;
  padding:14px 0;border-top:1px solid var(--ligne);
}
.ventes-lieu li:last-child{border-bottom:1px solid var(--ligne)}
.ventes-lieu b{font-weight:500;color:var(--petrole)}
.ventes-lieu span{font-size:.95rem;color:var(--gris)}
/* Un bien par ligne : en énumération, plusieurs titres se lisaient comme une
   phrase et l'on ne voyait plus où commençait chaque lien. */
.ventes-lieu a{display:block;color:var(--encre);text-decoration:none;width:fit-content}
.ventes-lieu a+a{margin-top:6px}
.ventes-lieu a{border-bottom:1px solid var(--or)}

@media (max-width:640px){
  .ventes-lieu li{grid-template-columns:1fr;gap:4px}
}

/* ── le mur d'avis : relief et survol ──────────────────────────────────────
   ⚠️ La carte d'avis est en crème. Sur l'accueil sa section est BLANCHE, donc
   elle se détache ; sur /ils-en-parlent/ la section est crème, et les cartes
   disparaissaient dans le fond — « un peu plat, un peu trop monocouleur »
   (Patrice, 2026-08-18). Le site réglait déjà le cas pour `.carte`, jamais
   pour `.avis__c`. Même remède, même sélecteur.
   ⚠️ Portée `.sec--creme` et non `.avis__c` tout court : la section de
   l'accueil est `.sec`, donc la page validée par Magalie ne bouge pas. */
.sec--creme .avis__c{background:#fff}

@media (hover:hover){
  /* ⚠️ Survol porté par `.mur-avis`, jamais par `.avis__c` seul : cette carte
     sert aussi le carrousel de l'accueil, qui garde son survol d'origine.
     ⚠️ Et rien de doré en TEXTE : l'or sur blanc tombe à 1,95:1. Il reste
     ici une couleur de bordure et d'étoiles, jamais d'encre. */
  .mur-avis .avis__c{
    transition:border-color .3s,box-shadow .3s,transform .3s,background .3s;
  }
  .mur-avis .avis__c:hover{
    border-color:var(--or);
    background:linear-gradient(#fff,#FFFCF6);
    box-shadow:0 16px 36px -20px rgba(0,69,82,.42);
    transform:translateY(-3px);
  }
  /* Les étoiles se réchauffent : c'est le seul élément déjà doré, donc le
     seul qui puisse gagner en intensité sans faute de contraste. */
  .mur-avis .avis__c .stars{transition:color .3s}
  .mur-avis .avis__c:hover .stars{color:var(--or-clair)}
}

/* ── pages locales : les prix réels (DVF) ─────────────────────────────────
   ⚠️ Le nombre de ventes est aussi lisible que le prix : c'est lui qui rend
   le chiffre vérifiable, et qui prévient qu'une petite commune bouge d'une
   année sur l'autre par l'échantillon, pas par le marché. */
.prix-dvf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:10px 0 26px}
.prix-dvf__c{
  background:#fff;border:1px solid var(--ligne);border-radius:var(--r-sig);
  padding:26px 24px;text-align:center;
}
.prix-dvf__t{
  margin:0 0 10px;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);
}
.prix-dvf__m2{margin:0;font:400 1rem/1 'Jost',sans-serif;color:var(--gris)}
.prix-dvf__m2 b{
  display:inline-block;font:400 2.1rem/1 'Cormorant Garamond',serif;color:var(--petrole);
  margin-right:4px;
}
.prix-dvf__d{margin:14px 0 0;font-size:.95rem;color:var(--encre)}
.prix-dvf__n{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--ligne);
  font-size:.79rem;color:var(--gris);
}
.apres-faq{margin-top:26px}

/* Une pastille de commune qui mène à sa page locale.
   ⚠️ AUCUNE marque au repos, et c'est délibéré (Patrice, 2026-08-19) : un
   soulignement permanent sur les seules communes ayant une page laissait
   croire que LES AUTRES NE SONT PAS DANS LE SECTEUR. Le contresens coûtait
   plus cher que l'indice ne rapportait — les dix-neuf sont sur un pied
   d'égalité, seules quelques-unes ont une page en plus.
   Le trait n'apparaît donc qu'au survol, et à la mise au point clavier pour
   que la navigation sans souris garde un repère. */
.communes a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color .25s;
}
/* ⚠️ PLUS DE `outline:none` ICI (2026-08-20). L'intention du commentaire
   ci-dessus était juste — garder un repère au clavier — mais un souligné doré
   sur fond clair mesure 1,95:1 : il n'y avait, en fait, aucun repère visible.
   Le contour global s'applique donc de nouveau, et le trait doré reste en plus. */
.communes a:focus-visible{border-bottom-color:var(--or)}
@media (hover:hover){ .communes a:hover{border-bottom-color:var(--or)} }