/* ============================================================
   AGENCE IMMOBILIÈRE PARIS 15 — feuille de style
   Palette : blanc cassé / beige pierre / noir encre / taupe / laiton
   ============================================================ */
:root{
  --blanc:#FCFBF8;
  --beige:#EFE9DF;
  --beige-fonce:#E4DACA;
  --encre:#141312;
  --taupe:#8A847A;
  --laiton:#A8854B;
  --laiton-clair:#C9A96B;
  --display:'Fraunces', Georgia, serif;
  --texte:'Inter', -apple-system, sans-serif;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  --rad:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--texte);
  background:var(--blanc);
  color:var(--encre);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ---------- Typo ---------- */
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;letter-spacing:-0.01em}
h1{font-size:clamp(2.2rem,5.2vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin-bottom:1rem}
h3{font-size:1.25rem;font-weight:600}
.eyebrow{
  font-size:.78rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--laiton);margin-bottom:1.1rem;display:block;
}
.lead{font-size:1.12rem;color:var(--taupe);max-width:46ch}
em{font-style:italic;font-family:var(--display)}

/* ---------- Boutons ---------- */
.btn{
  display:inline-block;padding:15px 30px;border-radius:999px;
  font-weight:600;font-size:.98rem;text-decoration:none;text-align:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
  cursor:pointer;border:1.5px solid transparent;min-height:48px;
}
.btn-primaire{background:var(--encre);color:var(--blanc)}
.btn-primaire:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,19,18,.18)}
.btn-secondaire{border-color:var(--encre);color:var(--encre);background:transparent}
.btn-secondaire:hover{background:var(--encre);color:var(--blanc)}
.btn-clair{background:var(--blanc);color:var(--encre)}
.btn-clair:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25)}
.btn:focus-visible{outline:3px solid var(--laiton);outline-offset:3px}
a:focus-visible{outline:3px solid var(--laiton);outline-offset:3px;border-radius:4px}

/* ---------- Header ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(252,251,248,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(20,19,18,.06);
  transition:transform .4s var(--ease);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:72px}
.nav .logo{flex:0 0 auto;font-size:1.08rem}
.nav > .btn-primaire{flex:0 0 auto;padding:11px 20px;font-size:.86rem;white-space:nowrap}
.logo{font-family:var(--display);font-size:1.15rem;font-weight:600;text-decoration:none;letter-spacing:-.01em}
.logo span{color:var(--laiton)}
.nav-liens{display:flex;gap:22px;align-items:center;list-style:none;flex-wrap:nowrap;white-space:nowrap}
.nav-liens a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--encre);opacity:.82;transition:opacity .25s;white-space:nowrap}
.nav-liens a:hover{opacity:1}
.nav .btn{padding:11px 22px;font-size:.88rem}
.burger{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative}
.burger span{display:block;width:22px;height:2px;background:var(--encre);margin:5px auto;transition:.3s var(--ease)}

/* ---------- Hero ---------- */
.hero{
  min-height:100svh;display:flex;align-items:center;
  padding:140px 0 80px;position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(201,169,107,.16), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(228,218,202,.55), transparent 60%),
    var(--blanc);
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero h1{margin:0 0 1.2rem}
.hero h1 em{color:var(--laiton)}
.hero .lead{margin-bottom:2rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:1.6rem}
.hero-reassurance{font-size:.85rem;color:var(--taupe);display:flex;flex-wrap:wrap;gap:8px 20px}
.hero-reassurance li{list-style:none;display:flex;align-items:center;gap:7px}
.hero-reassurance li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--laiton)}
.hero-visuel{
  aspect-ratio:4/5;border-radius:24px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#E9E1D3 0%, #D8CBB4 45%, #B9A581 100%);
  box-shadow:0 30px 80px rgba(20,19,18,.14);
}
/* Remplacer .hero-visuel par une photo : façade haussmannienne du 15e, balcon, lumière du soir */
.hero-visuel::after{
  content:"Photo : appartement à vendre, Paris 15";
  position:absolute;inset:auto 16px 16px auto;font-size:.72rem;color:rgba(20,19,18,.55);
  background:rgba(252,251,248,.7);padding:6px 12px;border-radius:999px;backdrop-filter:blur(6px);
}
.hero-carte-prix{
  position:absolute;left:-30px;bottom:34px;background:var(--blanc);border-radius:16px;
  padding:16px 20px;box-shadow:0 16px 40px rgba(20,19,18,.16);max-width:230px;z-index:2;
}
.hero-visuel{overflow:visible}
.hero-visuel img{border-radius:inherit}
.hero-carte-prix .label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.hero-carte-prix .valeur{font-family:var(--display);font-size:1.5rem;font-weight:600}
.hero-carte-prix .valeur span{color:var(--laiton)}

/* ---------- Sections génériques ---------- */
section{padding:120px 0}
.section-beige{background:var(--beige)}
.entete-section{max-width:640px;margin-bottom:56px}
.entete-section.centre{margin-left:auto;margin-right:auto;text-align:center}
.deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.lien-fleche{
  font-weight:600;color:var(--encre);text-decoration:none;font-size:.98rem;
  border-bottom:1.5px solid var(--laiton);padding-bottom:2px;transition:color .25s;
}
.lien-fleche:hover{color:var(--laiton)}
.visuel-cadre{
  aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;
  background:linear-gradient(150deg,#E4DACA,#CDBD9F);
  box-shadow:0 24px 60px rgba(20,19,18,.10);
  display:flex;align-items:flex-end;padding:18px;
}
.visuel-cadre p{font-size:.75rem;color:rgba(20,19,18,.5);background:rgba(252,251,248,.7);padding:5px 12px;border-radius:999px}

/* ---------- Reveal au scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
.reveal.visible{opacity:1;transform:none}
.reveal-delai-1{transition-delay:.08s}
.reveal-delai-2{transition-delay:.16s}
.reveal-delai-3{transition-delay:.24s}

/* ---------- Section méthode (sticky — signature) ---------- */
.methode-wrap{height:420vh;position:relative;background:var(--encre);color:var(--blanc)}
.methode-sticky{
  position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;
}
.methode-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center;width:100%}
.methode-gauche .eyebrow{color:var(--laiton-clair)}
.methode-gauche h2{color:var(--blanc);max-width:14ch}
.methode-gauche p{color:rgba(252,251,248,.65);max-width:42ch;margin-top:1rem}
.methode-progress{width:2px;background:rgba(252,251,248,.15);height:60vh;max-height:480px;position:relative;border-radius:2px}
.methode-progress-fill{position:absolute;top:0;left:0;width:100%;background:var(--laiton-clair);border-radius:2px;height:0%}
.methode-droite{display:flex;gap:36px;align-items:center}
.methode-etapes{flex:1;position:relative;min-height:300px}
.etape{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  opacity:0;transform:translateY(36px);transition:opacity .55s var(--ease), transform .55s var(--ease);
  pointer-events:none;
}
.etape.active{opacity:1;transform:none;pointer-events:auto}
/* fallback : si aucune étape active (JS non chargé), montrer la première */
.methode-etapes:not(:has(.etape.active)) .etape:first-child{opacity:1;transform:none;pointer-events:auto}
.etape .numero{
  font-family:var(--display);font-size:3.2rem;font-weight:500;color:var(--laiton-clair);
  line-height:1;font-style:italic;
}
.etape h3{font-size:1.7rem;color:var(--blanc);margin-bottom:.7rem}
.etape p{color:rgba(252,251,248,.7);max-width:46ch}
.methode-compteur{font-size:.85rem;color:rgba(252,251,248,.5);letter-spacing:.15em;margin-top:1.6rem}
.methode-cta{margin-top:2rem}

/* Fallback sans JS / reduced motion : étapes en liste */
.methode-liste-statique{display:none}

/* ---------- Section vidéos (sticky horizontal) ---------- */

/* ---------- Quartiers ---------- */
.grille-quartiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.carte-quartier{
  background:var(--blanc);border-radius:var(--rad);padding:30px 28px;text-decoration:none;
  border:1px solid rgba(20,19,18,.07);transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  display:block;
}
.carte-quartier:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(20,19,18,.10)}
.carte-quartier h3{margin-bottom:.4rem}
.carte-quartier h3 span{color:var(--laiton);font-style:italic}
.carte-quartier p{font-size:.9rem;color:var(--taupe)}
.carte-quartier .faux-lien{display:inline-block;margin-top:14px;font-size:.85rem;font-weight:600;border-bottom:1.5px solid var(--laiton);padding-bottom:1px}

/* ---------- Avantages ---------- */
.grille-avantages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.carte-avantage{background:var(--beige);border-radius:var(--rad);padding:34px 30px}
.carte-avantage .picto{
  width:44px;height:44px;border-radius:12px;background:var(--encre);color:var(--laiton-clair);
  display:flex;align-items:center;justify-content:center;font-family:var(--display);
  font-style:italic;font-size:1.2rem;margin-bottom:18px;
}
/* Icône Pourquoi nous : lisible sur le picto encre */
.carte-avantage .picto .ico{stroke:#FCFBF8;stroke-width:2.4}
.carte-avantage .picto .ico .accent{stroke:var(--laiton-clair,#C9A96B)}
.carte-avantage .picto .ico .accent[r],
.carte-avantage .picto .ico circle.accent{fill:var(--laiton-clair,#C9A96B);stroke:none}
.carte-avantage .picto .ico path.accent[d*="Z"]{fill:rgba(201,169,107,.25);stroke:var(--laiton-clair,#C9A96B)}

.carte-avantage > *{position:relative;z-index:2}
.carte-avantage h3{margin-bottom:.5rem;font-size:1.12rem}
.carte-avantage p{font-size:.93rem;color:var(--taupe)}

/* ---------- Témoignages ---------- */
.piste-temoignages{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:none}
.piste-temoignages::-webkit-scrollbar{display:none}
.temoignage{
  flex:0 0 380px;scroll-snap-align:start;background:var(--blanc);border-radius:var(--rad);
  padding:34px 32px;border:1px solid rgba(20,19,18,.07);
}
.temoignage blockquote{font-family:var(--display);font-size:1.12rem;font-style:italic;line-height:1.5;margin-bottom:18px}
.temoignage cite{font-style:normal;font-size:.86rem;color:var(--taupe)}
.temoignage .etoiles{color:var(--laiton);letter-spacing:3px;margin-bottom:14px;font-size:.9rem}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq details{border-bottom:1px solid rgba(20,19,18,.1)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-family:var(--display);font-size:1.15rem;font-weight:500;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:1.5rem;color:var(--laiton);font-family:var(--texte);font-weight:400;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .reponse{padding:0 0 26px;color:var(--taupe);max-width:62ch}

/* ---------- CTA final ---------- */
.cta-final{background:var(--encre);color:var(--blanc);text-align:center}
.cta-final h2{color:var(--blanc);max-width:18ch;margin:0 auto 1.2rem}
.cta-final h2 em{color:var(--laiton-clair)}
.cta-final p{color:rgba(252,251,248,.65);max-width:54ch;margin:0 auto 2.4rem}
.cta-final .hero-ctas{justify-content:center}

/* ---------- Footer ---------- */
footer{background:var(--encre);color:rgba(252,251,248,.7);padding:70px 0 40px;border-top:1px solid rgba(252,251,248,.08)}
.footer-grid{display:grid;grid-template-columns:1.3fr 2fr;gap:48px;margin-bottom:40px;align-items:start}
.footer-marque .logo-cachet{margin-bottom:14px}
.footer-desc{font-size:.9rem;line-height:1.55;max-width:38ch;margin-bottom:18px;color:rgba(252,251,248,.62)}
.footer-contact{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-contact li{display:flex;align-items:center;gap:10px;margin:0;font-size:.9rem}
.footer-contact .ico{width:17px;height:17px;flex:0 0 auto;stroke:var(--laiton-clair,#C9A96B);stroke-width:2.2}
.footer-contact a{color:rgba(252,251,248,.85)}
.footer-contact span{color:rgba(252,251,248,.7)}
.footer-liens{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:32px}
.footer-quartiers-liste{columns:2;column-gap:20px}
.footer-quartiers-liste li{break-inside:avoid}
footer h4{color:var(--blanc);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;font-weight:600}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{text-decoration:none;font-size:.92rem;transition:color .25s}
footer a:hover{color:var(--laiton-clair)}
.footer-bas{border-top:1px solid rgba(252,251,248,.1);padding-top:28px;font-size:.8rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- Barre CTA mobile ---------- */
.cta-mobile{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:90;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(252,251,248,.92);backdrop-filter:blur(12px);
  border-top:1px solid rgba(20,19,18,.08);
}
.cta-mobile .btn{display:block;width:100%}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  section{padding:80px 0}
  .hero-grid,.deux-colonnes,.methode-grid{grid-template-columns:1fr;gap:44px}
  .hero-visuel{aspect-ratio:16/11;max-height:380px}
  .grille-quartiers,.grille-avantages{grid-template-columns:1fr 1fr}
  .nav-liens{
    position:fixed;inset:72px 0 0 0;background:var(--blanc);flex-direction:column;
    justify-content:center;gap:34px;transform:translateX(100%);transition:transform .45s var(--ease);
  }
  .nav-liens.ouvert{transform:none}
  .nav-liens a{font-size:1.3rem;font-family:var(--display)}
  .burger{display:block}
  .nav > .btn{display:none}
  /* Méthode : sticky conservé mais layout vertical compact */
  .methode-wrap{height:520vh}
  .methode-gauche p{display:none}
  .methode-progress{display:none}
  .etape .numero{font-size:2.4rem}
  /* Vidéos : carrousel natif au lieu du sticky */
  .videos-sticky{position:static;height:auto;padding:0 0 20px}
  .videos-piste{overflow-x:auto;scroll-snap-type:x mandatory;padding:0 24px 16px;scrollbar-width:none}
  .videos-piste::-webkit-scrollbar{display:none}
  .carte-video{scroll-snap-align:center;width:272px}
  .mockup{width:272px}
  .cta-mobile{display:block}
  footer{padding-bottom:110px}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .footer-liens{grid-template-columns:1fr 1fr}
  .footer-quartiers{grid-column:1 / -1}
}
@media (max-width:560px){
  .grille-quartiers,.grille-avantages{grid-template-columns:1fr}
  .temoignage{flex-basis:300px}
  .hero-ctas .btn{width:100%}
}

/* ---------- Accessibilité : reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
  .methode-wrap{height:auto}
  .methode-sticky{position:static;height:auto;padding:100px 0}
  .methode-etapes{display:none}
  .methode-liste-statique{display:block;color:rgba(252,251,248,.8)}
  .methode-liste-statique li{margin-bottom:18px}
  .methode-liste-statique strong{color:var(--blanc)}
  .videos-sticky{position:static;height:auto}
  .videos-piste{overflow-x:auto}
}

/* ============================================================
   Pages internes (estimation, vendre, services, quartiers…)
   ============================================================ */
.hero-interne{
  padding:170px 0 90px;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(201,169,107,.16), transparent 60%),
    var(--blanc);
}
.hero-interne h1{max-width:22ch;margin:0 0 1.1rem}
.hero-interne h1 em{color:var(--laiton)}
.hero-interne .lead{max-width:58ch;margin-bottom:2rem}
.fil-ariane{font-size:.82rem;color:var(--taupe);margin-bottom:1.6rem}
.fil-ariane a{color:var(--taupe);text-decoration:none}
.fil-ariane a:hover{color:var(--laiton)}
.fil-ariane span{margin:0 8px;color:var(--beige-fonce)}

/* Bloc argument : texte long en deux temps */
.bloc-argument{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:64px;align-items:start}
.bloc-argument h2{position:sticky;top:110px}
.bloc-argument .corps p+p{margin-top:16px}

/* Grille des critères d'estimation */
.grille-criteres{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:48px}
.critere{
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:14px;
  padding:20px 18px;font-size:.92rem;position:relative;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.critere::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(168,133,75,.16),transparent 60%);
  opacity:0;transition:opacity .35s var(--ease)}
.critere:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 22px 48px rgba(20,19,18,.12);border-color:rgba(168,133,75,.4);z-index:2}
.critere:hover::after{opacity:1}
.critere > *{position:relative;z-index:1}
/* icône qui se "dessine" au survol */
.critere .ico-coin .ico{transition:stroke .35s var(--ease)}
.critere:hover .ico-coin .ico{stroke:var(--laiton)}
.critere .ico-coin .ico *{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--ease)}
.critere:hover .ico-coin .ico *{animation:critere-dessin .9s var(--ease)}
@keyframes critere-dessin{0%{stroke-dashoffset:1}100%{stroke-dashoffset:0}}
.critere strong{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;margin-bottom:4px}
.critere span{color:var(--taupe);font-size:.85rem;line-height:1.45;display:block}

/* Blocs estimation par quartier */
.grille-quartiers-estim{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quartier-estim{
  background:var(--blanc);border-radius:var(--rad);padding:28px;border:1px solid rgba(20,19,18,.07);
  display:flex;flex-direction:column;transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.quartier-estim:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,19,18,.09)}
.quartier-estim h3{margin-bottom:.5rem;font-size:1.15rem}
.quartier-estim p{font-size:.9rem;color:var(--taupe);flex:1}
.quartier-estim .lien-fleche{font-size:.88rem;margin-top:16px;align-self:flex-start}

/* Bandeau intermédiaire CTA */
.bandeau-cta{
  background:var(--encre);color:var(--blanc);border-radius:24px;
  padding:54px 48px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.bandeau-cta h2{color:var(--blanc);font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0;max-width:24ch}
.bandeau-cta h2 em{color:var(--laiton-clair)}
.bandeau-cta p{color:rgba(252,251,248,.6);font-size:.95rem;margin-top:8px;max-width:46ch}

@media (max-width:980px){
  .hero-interne{padding:130px 0 60px}
  .bloc-argument{grid-template-columns:1fr;gap:24px}
  .bloc-argument h2{position:static}
  .grille-criteres{grid-template-columns:1fr 1fr}
  .grille-quartiers-estim{grid-template-columns:1fr 1fr}
  .bandeau-cta{padding:38px 28px}
}
@media (max-width:560px){
  .grille-criteres,.grille-quartiers-estim{grid-template-columns:1fr}
}

/* ============================================================
   Lot 2 : biens à vendre, prix m², off market, quartiers
   ============================================================ */
/* --- Filtres biens --- */
.barre-filtres{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:16px;
  padding:16px 18px;margin-bottom:36px;position:sticky;top:84px;z-index:40;
  box-shadow:0 8px 30px rgba(20,19,18,.06);
}
.barre-filtres select{
  appearance:none;border:1px solid rgba(20,19,18,.15);border-radius:999px;
  padding:10px 36px 10px 16px;font:inherit;font-size:.88rem;background:var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141312' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;
  color:var(--encre);cursor:pointer;
}
.barre-filtres select:focus-visible{outline:3px solid var(--laiton);outline-offset:2px}
.compteur-biens{margin-left:auto;font-size:.85rem;color:var(--taupe)}

/* --- Grille biens --- */
.grille-biens{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fiche-bien{
  background:var(--blanc);border-radius:var(--rad);overflow:hidden;
  border:1px solid rgba(20,19,18,.08);display:flex;flex-direction:column;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.fiche-bien:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(20,19,18,.11)}
.fiche-photo{aspect-ratio:4/3;position:relative;background:linear-gradient(150deg,#E4DACA,#C2B190);display:flex;align-items:flex-end;padding:14px}
.fiche-photo small{font-size:.7rem;color:rgba(20,19,18,.5);background:rgba(252,251,248,.75);padding:4px 10px;border-radius:999px}
.badge-statut{
  position:absolute;top:14px;left:14px;font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;
}
.badge-disponible{background:var(--laiton);color:var(--blanc)}
.badge-sous-offre{background:var(--taupe);color:var(--blanc)}
.badge-vendu{background:var(--encre);color:var(--blanc)}
.badge-offmarket{background:var(--beige-fonce);color:var(--encre)}
.fiche-corps{padding:22px;display:flex;flex-direction:column;flex:1}
.fiche-corps h3{font-size:1.08rem;margin-bottom:2px}
.fiche-quartier{font-size:.82rem;color:var(--laiton);font-weight:600;margin-bottom:10px}
.fiche-specs{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.85rem;color:var(--taupe);margin-bottom:12px}
.fiche-prix{font-family:var(--display);font-size:1.35rem;font-weight:600}
.fiche-prix span{font-family:var(--texte);font-size:.8rem;color:var(--taupe);font-weight:400;margin-left:8px}
.fiche-atouts{font-size:.84rem;color:var(--taupe);margin:10px 0 16px;flex:1}
.fiche-actions{display:flex;gap:10px}
.fiche-actions .btn{padding:10px 16px;font-size:.82rem;flex:1}
.fiche-vendeur{
  background:var(--encre);color:var(--blanc);border:none;
  display:flex;flex-direction:column;justify-content:center;padding:34px 30px;
}
.fiche-vendeur h3{color:var(--blanc);font-size:1.35rem;margin-bottom:.6rem}
.fiche-vendeur h3 em{color:var(--laiton-clair)}
.fiche-vendeur p{color:rgba(252,251,248,.65);font-size:.92rem;margin-bottom:20px}
.fiche-bien.masque{display:none}

/* --- Tableau prix quartiers --- */
.tableau-prix{width:100%;border-collapse:collapse;background:var(--blanc);border-radius:var(--rad);overflow:hidden;border:1px solid rgba(20,19,18,.08)}
.tableau-prix th,.tableau-prix td{padding:18px 20px;text-align:left;font-size:.92rem;border-bottom:1px solid rgba(20,19,18,.07)}
.tableau-prix th{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe);font-weight:600;background:var(--beige)}
.tableau-prix tr:last-child td{border-bottom:none}
.tableau-prix td a{font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--laiton)}
.tableau-prix td a:hover{color:var(--laiton)}
.tableau-prix .prix-cell{font-family:var(--display);font-weight:600;white-space:nowrap}
.tableau-prix .prix-cell small{display:block;font-family:var(--texte);font-weight:400;font-size:.74rem;color:var(--taupe)}
.scroll-table{overflow-x:auto;border-radius:var(--rad)}

/* --- Sections sombres (off market) --- */
.section-encre{background:var(--encre);color:var(--blanc)}
.section-encre h2,.section-encre h3{color:var(--blanc)}
.section-encre p{color:rgba(252,251,248,.72)}
.section-encre .eyebrow{color:var(--laiton-clair)}
.timeline{position:relative;max-width:680px;margin-top:40px}
.timeline::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:1.5px;background:rgba(252,251,248,.18)}
.timeline-item{position:relative;padding:0 0 36px 68px}
.timeline-item:last-child{padding-bottom:0}
.timeline-item .num{
  position:absolute;left:0;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--encre);border:1.5px solid var(--laiton-clair);color:var(--laiton-clair);
  font-family:var(--display);font-style:italic;display:flex;align-items:center;justify-content:center;
}
.timeline-item h3{font-size:1.12rem;margin-bottom:6px}
.timeline-item p{font-size:.94rem}
.deux-listes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.carte-liste{border-radius:var(--rad);padding:32px}
.carte-liste.avantages{background:var(--blanc);color:var(--encre)}
.carte-liste.avantages h3{color:var(--encre)}
.carte-liste.limites{background:rgba(252,251,248,.06);border:1px solid rgba(252,251,248,.14)}
.carte-liste ul{list-style:none;margin-top:14px}
.carte-liste li{padding:9px 0 9px 26px;position:relative;font-size:.93rem;border-bottom:1px solid rgba(20,19,18,.06)}
.carte-liste.limites li{border-color:rgba(252,251,248,.08);color:rgba(252,251,248,.72)}
.carte-liste.avantages li{color:var(--taupe)}
.carte-liste li:last-child{border:none}
.carte-liste li::before{content:"";position:absolute;left:2px;top:16px;width:7px;height:7px;border-radius:50%}
.carte-liste.avantages li::before{background:var(--laiton)}
.carte-liste.limites li::before{background:rgba(252,251,248,.35)}
.encadre-honnete{
  border-left:3px solid var(--laiton-clair);padding:18px 24px;margin-top:36px;
  background:rgba(252,251,248,.05);border-radius:0 14px 14px 0;font-size:.96rem;
  font-family:var(--display);font-style:italic;color:rgba(252,251,248,.85);max-width:64ch;
}

/* --- Formulaire --- */
.formulaire{background:var(--blanc);border-radius:24px;padding:44px;border:1px solid rgba(20,19,18,.08);box-shadow:0 24px 60px rgba(20,19,18,.08);color:var(--encre)}
.formulaire .grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.champ{display:flex;flex-direction:column;gap:6px}
.champ.pleine-largeur{grid-column:1/-1}
.champ label{font-size:.84rem;font-weight:600}
.champ label span{color:var(--laiton)}
.champ input,.champ select,.champ textarea{
  border:1px solid rgba(20,19,18,.16);border-radius:12px;padding:13px 15px;
  font:inherit;font-size:.95rem;background:var(--blanc);color:var(--encre);
}
.champ input:focus-visible,.champ select:focus-visible,.champ textarea:focus-visible{outline:3px solid var(--laiton);outline-offset:1px;border-color:var(--laiton)}
.champ textarea{min-height:110px;resize:vertical}
.note-confidentielle{font-size:.82rem;color:var(--taupe);margin-top:16px;max-width:60ch}

/* --- Sommaire chips quartiers --- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chips a{
  text-decoration:none;font-size:.86rem;font-weight:500;padding:9px 18px;border-radius:999px;
  border:1px solid rgba(20,19,18,.16);transition:background .3s,color .3s,border-color .3s;
}
.chips a:hover{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.section-quartier-detail{padding:64px 0;border-bottom:1px solid rgba(20,19,18,.07)}
.section-quartier-detail:last-of-type{border-bottom:none}
.section-quartier-detail .grille-infos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
.info-pastille{background:var(--beige);border-radius:12px;padding:16px 18px;font-size:.86rem}
.info-pastille strong{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--laiton);margin-bottom:5px}
.grille-secteurs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.carte-secteur{background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:14px;padding:22px}
.carte-secteur h3{font-size:1rem;margin-bottom:6px}
.carte-secteur p{font-size:.86rem;color:var(--taupe)}
.carte-secteur a{font-size:.84rem}

@media (max-width:980px){
  .grille-biens{grid-template-columns:1fr 1fr}
  .barre-filtres{position:static}
  .deux-listes{grid-template-columns:1fr}
  .formulaire{padding:28px 22px}
  .formulaire .grille-champs{grid-template-columns:1fr}
  .section-quartier-detail .grille-infos,.grille-secteurs{grid-template-columns:1fr}
}
@media (max-width:560px){
  .grille-biens{grid-template-columns:1fr}
}

/* ============================================================
   Carte réaliste de Paris 15 (base cartographique réelle)
   ============================================================ */
.panneau-carte{
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:24px;
  padding:26px 22px 20px;position:relative;box-shadow:0 24px 60px rgba(20,19,18,.07);
  overflow:hidden;
}
.carte-15{width:100%;height:auto;display:block}
.carte-15 text{font-family:var(--texte);pointer-events:none}

/* Fond et géographie */
.carte-15 .eau{fill:#E3DFD2}
.carte-15 .ile{stroke:#FAF6EC;stroke-width:7;stroke-linecap:round;fill:none}
.carte-15 .nom-seine{font-family:var(--display);font-style:italic;font-size:17px;fill:#9A937F;letter-spacing:.12em}
.carte-15 .arr-voisin{fill:#F2EDE2;stroke:#FCFBF8;stroke-width:2}
.carte-15 .socle-15{fill:#D7CCB6}
.carte-15 .arr-15{fill:#FAF6EC;stroke:#141312;stroke-width:1.6}
.carte-15 .pont{stroke:#FCFBF8;stroke-width:6;stroke-linecap:round}

/* Trame urbaine */
.carte-15 .ilots rect{fill:#ECE4D4;opacity:.85}
.carte-15 .rues-majeures path{fill:none;stroke:#FCFBF8;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.carte-15 .rues-secondaires path{fill:none;stroke:#FCFBF8;stroke-width:2.4;stroke-linecap:round;opacity:.9}
.carte-15 .parc{fill:#E4E5D3;stroke:#FCFBF8;stroke-width:2}

/* Repères 3D */
.carte-15 .repere .ombre{fill:#141312;opacity:.10}
.carte-15 .volume-haut{fill:#FCFBF8;stroke:#C9BFA9;stroke-width:.8}
.carte-15 .volume-cote{fill:#D9CFBA}
.carte-15 .volume-fonce{fill:#B7AB91}
.carte-15 .repere-label{font-size:11px;fill:var(--taupe);font-style:italic;font-family:var(--display)}

/* Quartiers interactifs */
.carte-15 .zone{cursor:pointer;outline:none}
.carte-15 .q-hit{fill:transparent;pointer-events:all}
.carte-15 .q-halo{fill:var(--laiton);opacity:0;filter:blur(0);transition:opacity .35s var(--ease)}
.carte-15 .q-point{fill:var(--laiton);opacity:.85}
.carte-15 .q-nom{
  font-family:var(--display);font-weight:600;font-size:17px;fill:var(--encre);
  paint-order:stroke;stroke:#FAF6EC;stroke-width:4px;stroke-linejoin:round;
  transition:fill .3s var(--ease);
}
.carte-15 .zone:hover .q-halo,.carte-15 .zone:focus-visible .q-halo,.carte-15 .zone.actif .q-halo{opacity:.16}
.carte-15 .zone:hover .q-nom,.carte-15 .zone:focus-visible .q-nom,.carte-15 .zone.actif .q-nom{fill:var(--laiton)}
.carte-15 .marqueur{cursor:pointer;outline:none}
.carte-15 .marqueur circle{fill:var(--laiton);stroke:#FAF6EC;stroke-width:2;transition:r .3s var(--ease)}
.carte-15 .marqueur text{
  font-size:11.5px;font-weight:600;fill:#6E6859;letter-spacing:.05em;
  paint-order:stroke;stroke:#FAF6EC;stroke-width:3px;stroke-linejoin:round;
}
.carte-15 .marqueur:hover circle,.carte-15 .marqueur:focus-visible circle,.carte-15 .marqueur.actif circle{r:6.5}

/* Encart Paris */
.carte-15 .encart-fond{fill:rgba(252,251,248,.88);stroke:rgba(20,19,18,.10)}
.carte-15 .mini-arr{fill:#EDE7DA;stroke:#FCFBF8;stroke-width:1}
.carte-15 .mini-15{fill:var(--laiton);opacity:.8}
.carte-15 .encart-label{font-size:11px;fill:var(--taupe);letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* Info-bulle */
.infobulle-carte{
  position:absolute;z-index:30;width:250px;background:var(--encre);color:var(--blanc);
  border-radius:14px;padding:16px 18px;box-shadow:0 18px 44px rgba(20,19,18,.28);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.infobulle-carte.visible{opacity:1;transform:none;pointer-events:auto}
.infobulle-carte h3{font-size:1.02rem;color:var(--blanc);margin-bottom:4px}
.infobulle-carte p{font-size:.8rem;color:rgba(252,251,248,.7);line-height:1.5;margin-bottom:12px}
.infobulle-carte .actions{display:flex;gap:8px;flex-wrap:wrap}
.infobulle-carte a{font-size:.76rem;font-weight:600;text-decoration:none;padding:7px 12px;border-radius:999px}
.infobulle-carte a.principal{background:var(--laiton-clair);color:var(--encre)}
.infobulle-carte a.secondaire{border:1px solid rgba(252,251,248,.35);color:var(--blanc)}

/* Légende */
.legende-carte{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:16px;font-size:.78rem;color:var(--taupe)}
.legende-carte span{display:flex;align-items:center;gap:7px}
.legende-carte i{font-style:normal}
.legende-carte i.rond-q{width:16px;height:11px;border-radius:50%;background:rgba(168,133,75,.18);border:1px solid var(--laiton)}
.legende-carte i.point{width:9px;height:9px;border-radius:50%;background:var(--laiton)}
.legende-carte i.trait{width:18px;height:4px;border-radius:2px;background:#FCFBF8;border:1px solid #D8CFBC}

@media (max-width:980px){
  .panneau-carte{padding:14px 10px 12px}
  .carte-15 .q-nom{font-size:21px}
  .carte-15 .marqueur text{font-size:14px}
  .carte-15 .encart{display:none}
  .infobulle-carte{width:min(250px,78vw)}
}
@media (prefers-reduced-motion: reduce){
  .carte-15 .q-halo,.carte-15 .q-nom,.carte-15 .marqueur circle{transition:none}
}

/* ============================================================
   Intégration des photos (hero, sections, bandeaux)
   ============================================================ */
.hero-visuel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1s var(--ease);
}
.hero-visuel.avec-image::after{display:none}
.hero-visuel:hover img{transform:scale(1.025)}
.visuel-cadre{position:relative}
.visuel-cadre img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  transition:transform .9s var(--ease);
}
.visuel-cadre:hover img{transform:scale(1.03)}
.bande-image{
  margin:0;border-radius:24px;overflow:hidden;position:relative;
  height:clamp(280px, 42vw, 440px);box-shadow:0 24px 60px rgba(20,19,18,.10);
}
.bande-image img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bande-image:hover img{transform:scale(1.025)}
.bande-image figcaption{
  position:absolute;left:18px;bottom:18px;background:rgba(20,19,18,.55);color:var(--blanc);
  backdrop-filter:blur(8px);padding:8px 16px;border-radius:999px;font-size:.8rem;
}
.bande-image.haute{height:clamp(340px, 52vw, 520px)}
@media (max-width:980px){
  .bande-image{border-radius:18px}
}
@media (prefers-reduced-motion: reduce){
  .hero-visuel img,.visuel-cadre img,.bande-image img{transition:none}
  .hero-visuel:hover img,.visuel-cadre:hover img,.bande-image:hover img{transform:none}
}

/* ============================================================
   Cartouche hero : estimation animée
   ============================================================ */
a.hero-carte-prix{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
a.hero-carte-prix:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(20,19,18,.20)}
.hero-carte-prix .valeur{
  position:relative;display:block;min-width:11ch;min-height:1.3em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hero-carte-prix .compteur,
.hero-carte-prix .final{
  display:block;transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.hero-carte-prix .compteur{color:var(--encre)}
.hero-carte-prix .final{
  position:absolute;inset:0;opacity:0;transform:translateY(8px);
}
.hero-carte-prix .final span{color:var(--laiton)}
.hero-carte-prix.fin .compteur{opacity:0;transform:translateY(-8px)}
.hero-carte-prix.fin .final{opacity:1;transform:none}
.hero-carte-prix .sous-texte{
  font-size:.78rem;color:var(--taupe);margin-top:4px;
  transition:opacity .4s var(--ease);max-width:21ch;
}
/* Reduced motion : pas de compteur, état final directement */
@media (prefers-reduced-motion: reduce){
  .hero-carte-prix .compteur{opacity:0}
  .hero-carte-prix .final{opacity:1;transform:none}
}

/* ============================================================
   Pages Vendre / Services / Contact
   ============================================================ */
.liste-etapes{max-width:820px}
.etape-vente{
  display:grid;grid-template-columns:86px 1fr 96px;gap:26px;align-items:center;
  padding:34px 0;border-bottom:1px solid rgba(20,19,18,.08);
}
.etape-vente:last-child{border-bottom:none}
.etape-vente .num{
  font-family:var(--display);font-style:italic;font-weight:500;font-size:2.6rem;
  color:var(--laiton);line-height:1;padding-top:4px;
}
.etape-vente h2{font-size:1.35rem;margin-bottom:.5rem}
.etape-vente p{color:var(--taupe);max-width:62ch}
/* Vecteur animé à droite de chaque étape */
.etape-vecteur{display:flex;align-items:center;justify-content:center;width:96px;height:96px;justify-self:end}
.ico-etape-grand{width:64px;height:64px;fill:none;stroke:var(--encre);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.ico-etape-grand .accent{stroke:var(--laiton)}
.ico-etape-grand .accent[r],.ico-etape-grand circle.accent{fill:var(--laiton);stroke:none}
.ico-etape-grand path.accent[d*="Z"]{fill:rgba(168,133,75,.16);stroke:var(--laiton)}
/* révélation au scroll : balayage vertical (clip) + fondu — fiable partout */
.etape-vecteur .ico-etape-grand{
  opacity:0;transform:translateX(16px);
  clip-path:inset(0 0 100% 0);
  transition:opacity .7s var(--ease), transform .35s var(--ease), clip-path 1s var(--ease);
}
.etape-vente.visible .etape-vecteur .ico-etape-grand{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
/* survol d'une étape : la ligne s'illumine sur la longueur + grossit légèrement */
.etape-vente{position:relative;border-radius:14px;padding-left:18px;padding-right:18px;
  transition:transform .4s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease)}
.etape-vente::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;
  background:var(--laiton);transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.etape-vente:hover{transform:scale(1.025);
  background:linear-gradient(90deg, rgba(168,133,75,.1) 0%, rgba(168,133,75,.03) 50%, transparent 100%);
  box-shadow:0 14px 36px rgba(20,19,18,.08)}
.etape-vente:hover::before{transform:scaleY(1)}
.etape-vente:hover .num{color:var(--laiton-clair,#C9A96B)}
.etape-vente:hover .ico-etape-grand{stroke:var(--laiton);opacity:1;transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){
  .etape-vecteur .ico-etape-grand{opacity:1;transform:none;clip-path:none;transition:none}
  .etape-vente:hover{transform:none}
}
@media (max-width:760px){
  .etape-vente{grid-template-columns:56px 1fr;gap:16px}
  .etape-vecteur{display:none}
}

.aside-contact{display:flex;flex-direction:column;gap:22px}
.carte-coordonnees{background:var(--beige);border-radius:var(--rad);padding:28px}
.carte-coordonnees h3{font-size:1.05rem;margin-bottom:12px}
.carte-coordonnees p{font-size:.92rem;color:var(--taupe);margin-bottom:8px}
.carte-coordonnees a{color:var(--encre);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--laiton)}
.photo-aside{border-radius:var(--rad);overflow:hidden;aspect-ratio:4/3;position:relative}
.photo-aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.interlocuteur{display:flex;gap:16px;align-items:center;background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:var(--rad);padding:18px 20px}
.interlocuteur img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:50% 18%}
.interlocuteur strong{display:block;font-family:var(--display);font-size:1.02rem}
.interlocuteur span{font-size:.82rem;color:var(--taupe)}
.grille-contact{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;align-items:start}
@media (max-width:980px){
  .etape-vente{grid-template-columns:56px 1fr;gap:16px;padding:26px 0}
  .etape-vente .num{font-size:2rem}
  .grille-contact{grid-template-columns:1fr}
}

/* ============================================================
   Page Prix au m² — v2 (16 quartiers, facteurs, tableau-cartes)
   ============================================================ */
.chips-facteurs{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.chips-facteurs span{
  background:var(--blanc);border:1px solid rgba(20,19,18,.12);border-radius:999px;
  padding:8px 16px;font-size:.85rem;color:var(--encre);
}
.grille-prix-quartiers{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:40px}
.bloc-prix-quartier{
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:var(--rad);
  padding:30px;display:flex;flex-direction:column;gap:12px;
}
.bloc-prix-quartier h3{font-size:1.25rem}
.bloc-prix-quartier .infos{font-size:.88rem;color:var(--taupe)}
.bloc-prix-quartier .infos strong{color:var(--encre);font-weight:600}
.bloc-prix-quartier .fourchette{
  background:var(--beige);border-radius:12px;padding:12px 16px;font-size:.9rem;
  display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
}
.bloc-prix-quartier .fourchette b{font-family:var(--display);font-size:1.02rem;color:var(--laiton)}
.table-prix16{width:100%;border-collapse:collapse;margin-top:34px;font-size:.92rem}
.table-prix16 th{
  text-align:left;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);
  padding:14px 16px;border-bottom:2px solid var(--encre);
}
.table-prix16 td{padding:16px;border-bottom:1px solid rgba(20,19,18,.08);vertical-align:top}
.table-prix16 td:first-child{font-weight:600;font-family:var(--display);font-size:1rem}
@media (max-width:760px){
  .grille-prix-quartiers{grid-template-columns:1fr}
  .table-prix16 thead{display:none}
  .table-prix16, .table-prix16 tbody, .table-prix16 tr, .table-prix16 td{display:block;width:100%}
  .table-prix16 tr{background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:16px;margin-bottom:14px;padding:8px 0}
  .table-prix16 td{border:none;padding:8px 18px}
  .table-prix16 td::before{content:attr(data-label);display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--taupe);margin-bottom:2px}
  .table-prix16 td:first-child::before{display:none}
}

/* ============================================================
   Scène "Le prix au m² ne suffit pas" — section signature
   ============================================================ */
.scene-prix{position:relative;background:linear-gradient(180deg,var(--blanc) 0%,var(--beige) 18%,var(--beige) 82%,var(--blanc) 100%)}
.scene-prix::before,.scene-prix::after{
  content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;
}
.scene-prix::before{width:520px;height:520px;left:-160px;top:12%;background:rgba(168,133,75,.07)}
.scene-prix::after{width:440px;height:440px;right:-140px;bottom:10%;background:rgba(20,19,18,.05)}
.scene-prix .colle{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
  max-width:1180px;margin:0 auto;padding:90px 24px;min-height:100vh}
.scene-prix .narration{position:relative;z-index:2}
.scene-prix .narration h2{font-size:clamp(1.8rem,3.6vw,2.8rem);max-width:15ch}
.scene-prix .fil-progression{
  width:2px;height:120px;background:rgba(20,19,18,.1);border-radius:2px;margin:28px 0 26px;position:relative;overflow:hidden;
}
.scene-prix .fil-progression i{position:absolute;inset:0;background:var(--laiton);transform-origin:top;transform:scaleY(0)}
.scene-prix .transition-cta{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.scene-prix.fin .transition-cta{opacity:1;transform:none}
.scene-prix .pile-groupes{position:relative;min-height:480px;z-index:2}
.groupe-prix{
  background:rgba(252,251,248,.82);backdrop-filter:blur(6px);
  border:1px solid rgba(20,19,18,.07);border-radius:24px;padding:38px 40px;
  box-shadow:0 30px 70px rgba(20,19,18,.08);
}
.groupe-prix .num-groupe{font-family:var(--display);font-style:italic;font-size:1rem;color:var(--laiton);letter-spacing:.06em}
.groupe-prix h3{font-size:1.7rem;margin:6px 0 4px}
.groupe-prix .sous-groupe{font-size:.92rem;color:var(--taupe);margin-bottom:22px}
.groupe-prix ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0}
.groupe-prix li{
  background:var(--blanc);border:1px solid rgba(20,19,18,.12);border-radius:999px;
  padding:9px 18px;font-size:.88rem;color:var(--encre);
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.groupe-prix li:hover{transform:translateY(-2px);border-color:var(--laiton);box-shadow:0 8px 20px rgba(168,133,75,.16)}
.groupe-prix li.fort{border-color:rgba(168,133,75,.55);background:linear-gradient(135deg,#FCFBF8,#F4ECDD);font-weight:600}

/* Mode scène (desktop + JS) */
.js-scene .scene-prix{height:430vh}
.js-scene .scene-prix .colle{position:sticky;top:0;height:100vh;padding:0 24px}
.js-scene .groupe-prix{
  position:absolute;inset:auto 0 auto 0;top:50%;
  opacity:0;transform:translateY(60px) scale(.96);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  will-change:transform,opacity;
}
.js-scene .groupe-prix.actif{opacity:1;transform:translateY(-50%) scale(1)}
.js-scene .groupe-prix.passe{opacity:0;transform:translateY(calc(-50% - 46px)) scale(.97)}
.js-scene .groupe-prix li{opacity:0;transform:translateY(14px)}
.js-scene .groupe-prix.actif li{opacity:1;transform:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.js-scene .groupe-prix.actif li:nth-child(1){transition-delay:.10s}
.js-scene .groupe-prix.actif li:nth-child(2){transition-delay:.17s}
.js-scene .groupe-prix.actif li:nth-child(3){transition-delay:.24s}
.js-scene .groupe-prix.actif li:nth-child(4){transition-delay:.31s}
.js-scene .groupe-prix.actif li:nth-child(5){transition-delay:.38s}
.js-scene .groupe-prix.actif li:nth-child(6){transition-delay:.45s}
.js-scene .groupe-prix.actif li:nth-child(7){transition-delay:.52s}
.js-scene .groupe-prix.actif li:nth-child(8){transition-delay:.59s}

/* Mobile & sans JS : séquence verticale, cartes empilées */
@media (max-width:980px){
  .js-scene .scene-prix{height:auto}
  .js-scene .scene-prix .colle{position:relative;height:auto;padding:70px 24px}
  .scene-prix .colle{grid-template-columns:1fr;gap:34px;min-height:0}
  .js-scene .groupe-prix{position:relative;top:auto;opacity:1;transform:none;margin-bottom:18px}
  .js-scene .groupe-prix li{opacity:1;transform:none}
  .groupe-prix{padding:28px 24px}
  .scene-prix .pile-groupes{min-height:0}
  .scene-prix .transition-cta{opacity:1;transform:none}
  .scene-prix .fil-progression{display:none}
}
@media (prefers-reduced-motion: reduce){
  .js-scene .scene-prix{height:auto}
  .js-scene .scene-prix .colle{position:relative;height:auto}
  .js-scene .groupe-prix{position:relative;top:auto;opacity:1;transform:none;margin-bottom:18px}
  .js-scene .groupe-prix li{opacity:1;transform:none}
  .scene-prix .transition-cta{opacity:1;transform:none}
}

/* ============================================================
   Explorateur de quartiers — Prix au m² (sélecteur + panneau)
   ============================================================ */
.explorateur-quartiers{display:grid;grid-template-columns:300px 1fr;gap:34px;margin-top:44px;align-items:start}
.selecteur-quartiers{display:flex;flex-direction:column;gap:4px;max-height:560px;overflow:auto;padding-right:6px;scrollbar-width:thin}
.selecteur-quartiers a{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-decoration:none;
  padding:13px 18px;border-radius:14px;color:var(--encre);border:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);position:relative;
}
.selecteur-quartiers a .nom{font-weight:600;font-size:.95rem}
.selecteur-quartiers a .mini-prix{font-size:.74rem;color:var(--taupe);white-space:nowrap}
.selecteur-quartiers a:hover{background:rgba(252,251,248,.9)}
.selecteur-quartiers a.actif{background:var(--blanc);border-color:rgba(20,19,18,.1);box-shadow:0 10px 26px rgba(20,19,18,.07)}
.selecteur-quartiers a.actif::before{
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--laiton);
}
.panneaux-quartiers{position:relative}
.panneau-quartier{
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:24px;
  padding:44px 48px;box-shadow:0 30px 70px rgba(20,19,18,.08);
}
.panneau-quartier + .panneau-quartier{margin-top:22px}
.panneau-quartier .entete-panneau{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start;margin-bottom:18px}
.panneau-quartier h3{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.panneau-quartier .etiquette-prix{text-align:right}
.panneau-quartier .etiquette-prix small{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe);margin-bottom:4px}
.panneau-quartier .prix-moyen{
  font-family:var(--display);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.5rem);
  color:var(--laiton);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.panneau-quartier .prix-moyen .unite{font-size:.55em;color:var(--taupe)}
.panneau-quartier .resume{color:var(--taupe);max-width:58ch}
.panneau-quartier .facteurs-cles{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:20px 0 26px}
.panneau-quartier .facteurs-cles li{
  background:var(--beige);border-radius:999px;padding:7px 15px;font-size:.82rem;color:var(--encre);
}
.panneau-quartier .actions-panneau{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* Mode onglets (JS actif) */
.js-tabs .panneau-quartier{display:none;margin-top:0}
.js-tabs .panneau-quartier.actif{display:block;animation:panneauEntre .45s var(--ease)}
@keyframes panneauEntre{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:980px){
  .explorateur-quartiers{grid-template-columns:1fr;gap:18px}
  .selecteur-quartiers{
    flex-direction:row;max-height:none;overflow-x:auto;padding:4px 2px 12px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .selecteur-quartiers a{flex:0 0 auto;scroll-snap-align:start;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 16px;background:var(--blanc);border-color:rgba(20,19,18,.08)}
  .selecteur-quartiers a.actif::before{left:14px;right:14px;top:auto;bottom:6px;width:auto;height:3px}
  .panneau-quartier{padding:28px 24px}
  .panneau-quartier .etiquette-prix{text-align:left}
}
@media (prefers-reduced-motion: reduce){
  .js-tabs .panneau-quartier.actif{animation:none}
}

/* ============================================================
   Décors d'arrière-plan — "le calque d'architecte"
   ============================================================ */
section{position:relative}
.decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
section>.container{position:relative;z-index:1}
.hero>.container{position:relative;z-index:1}
.decor svg{position:absolute}
/* Décors parisiens — rendu relief premium (léger 3D, ombres douces, profondeur) */
/* Décors dessinables — tracé fin parisien + fondu latéral */
.decor .fantome{overflow:visible}
.decor .trace{fill:none;stroke:#2a2722;stroke-width:1.6;opacity:.32;stroke-linecap:round;stroke-linejoin:round}
.decor .trace-fin{fill:none;stroke:#2a2722;stroke-width:1.1;opacity:.24;stroke-linecap:round;stroke-linejoin:round}
.decor .trace-or{fill:none;stroke:var(--laiton);stroke-width:1.7;opacity:.5;stroke-linecap:round;stroke-linejoin:round}
.decor .aplat{fill:var(--beige);opacity:.4;stroke:none}
.decor .lueur{fill:var(--laiton);opacity:.55}
.decor .fantome.clair-svg .trace{stroke:#FCFBF8;opacity:.26}
.decor .fantome.clair-svg .trace-fin{stroke:#FCFBF8;opacity:.18}
.decor .fantome.clair-svg .trace-or{stroke:var(--laiton-clair,#C9A96B);opacity:.5}
.decor .fantome.clair-svg .aplat{fill:#FCFBF8;opacity:.06}
/* Fondu des illustrations vers les bords (gauche/droite) */
.decor .fantome.cote-g{-webkit-mask:linear-gradient(to right, transparent 0%, #000 55%, #000 100%);mask:linear-gradient(to right, transparent 0%, #000 55%, #000 100%)}
.decor .fantome.cote-d{-webkit-mask:linear-gradient(to left, transparent 0%, #000 55%, #000 100%);mask:linear-gradient(to left, transparent 0%, #000 55%, #000 100%)}
.decor .fantome.fondu-tour{-webkit-mask:radial-gradient(130% 100% at 50% 50%, #000 45%, transparent 88%);mask:radial-gradient(130% 100% at 50% 50%, #000 45%, transparent 88%)}
/* Halos lumineux dérivants */
.halo{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.halo-beige{background:rgba(214,196,162,.30)}
.halo-laiton{background:rgba(168,133,75,.15)}
.halo-encre{background:rgba(20,19,18,.05)}
.halo-clair{background:rgba(252,251,248,.5)}
@keyframes derive{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(16px,-14px)}
}
.halo{animation:derive 16s ease-in-out infinite}
.halo:nth-of-type(2){animation-duration:21s;animation-direction:reverse}
/* Dessin progressif des traits (déclenché par l'observer .reveal existant) */
.decor.reveal{opacity:1;transform:none;transition:none}
.decor.reveal [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s var(--ease)}
.decor.reveal.visible [pathLength]{stroke-dashoffset:0}


.decor.reveal [pathLength]:nth-of-type(2){transition-delay:.25s}
.decor.reveal [pathLength]:nth-of-type(3){transition-delay:.5s}
.decor.reveal [pathLength]:nth-of-type(4){transition-delay:.75s}
.decor.reveal [pathLength]:nth-of-type(5){transition-delay:1s}
.decor.reveal [pathLength]:nth-of-type(6){transition-delay:1.2s}
.decor.reveal [pathLength]:nth-of-type(7){transition-delay:1.4s}
.decor.reveal [pathLength]:nth-of-type(8){transition-delay:1.6s}
/* Liseré laiton de section clé */
.filet-haut::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(160px,30%);height:2px;background:linear-gradient(90deg,transparent,var(--laiton),transparent);
  opacity:.6;z-index:1;
}
/* Fond feutré off market */
.fond-feutre{
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(168,133,75,.10), transparent 60%),
    radial-gradient(700px 600px at -10% 110%, rgba(252,251,248,.05), transparent 60%),
    #141312;
}
/* Ligne-guide du formulaire contact */
.guide-formulaire{position:absolute;left:50%;top:-46px;width:2px;height:46px;
  background:linear-gradient(180deg,transparent,var(--laiton));opacity:.5}
@media (max-width:760px){
  .decor svg{opacity:.9}
  .decor svg[style*="width:min"]{height:120px}
  .halo{filter:blur(60px)}
}
@media (prefers-reduced-motion: reduce){
  .halo{animation:none}
  .decor.reveal [pathLength]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* ============================================================
   Calque transports sur les cartes (stations métro / tram / RER)
   ============================================================ */
.couche-transports{transition:opacity .45s var(--ease)}
.panneau-carte.transports-masques .couche-transports{opacity:0;pointer-events:none}
.station{cursor:pointer;outline:none}
.station .st-pt{transition:stroke .25s var(--ease), stroke-width .25s var(--ease)}
.station:hover .st-pt,
.station:focus-visible .st-pt,
.station.actif .st-pt{stroke:var(--laiton);stroke-width:2.6}
.station .st-detail{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.station:hover .st-detail,
.station:focus-visible .st-detail,
.station.actif .st-detail{opacity:1}
.toggle-transports{
  background:var(--blanc);border:1px solid rgba(20,19,18,.14);border-radius:999px;
  padding:7px 16px;font-size:.78rem;color:var(--encre);cursor:pointer;font-family:var(--texte);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.toggle-transports:hover{border-color:var(--laiton)}
.toggle-transports[aria-pressed="false"]{background:var(--beige);color:var(--taupe)}
.note-transports{margin:10px auto 0;font-size:.8rem;line-height:1.5;color:var(--taupe);max-width:820px;text-align:center}
@media (prefers-reduced-motion: reduce){
  .couche-transports,.station .st-pt,.station .st-detail{transition:none}
}

/* ============================================================
   Liquid Glass — touches de verre (parcimonie)
   ============================================================ */
/* Recette de base */
.hero-carte-prix,
.carte-avantage,
.carte-quartier,
.panneau-quartier,
.groupe-prix,
.formulaire{
  position:relative;
  background:rgba(252,251,248,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);
  backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(252,251,248,.75);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 24px 60px rgba(20,19,18,.10);
}
/* Reflet supérieur fixe */
.hero-carte-prix::before,
.carte-avantage::before,
.carte-quartier::before,
.panneau-quartier::before,
.groupe-prix::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(165deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 28%);
  opacity:.7;
}
/* Brillance localisée qui suit le curseur (par carte, contenue) */
.carte-avantage,.carte-quartier,.panneau-quartier{overflow:hidden}
.carte-avantage::after,
.carte-quartier::after,
.panneau-quartier::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.5), rgba(255,255,255,0) 60%);
  opacity:0;transition:opacity .35s var(--ease);
}
.carte-avantage.brille::after,
.carte-quartier.brille::after,
.panneau-quartier.brille::after{opacity:1}
.carte-avantage:hover,
.carte-quartier:hover{
  border-color:rgba(168,133,75,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px rgba(20,19,18,.14), 0 0 0 1px rgba(168,133,75,.12);
}
/* Info-bulle de la carte : verre sombre */
.infobulle-carte{
  background:rgba(20,19,18,.82) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(252,251,248,.14);
}
/* Sélecteur de quartiers actif */
.selecteur-quartiers a.actif{
  background:rgba(252,251,248,.7);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* Header verre au scroll */
header{transition:background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease)}
header .nav{transition:padding .4s var(--ease)}
header.scrolle{
  background:rgba(252,251,248,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(20,19,18,.07);
  box-shadow:0 8px 30px rgba(20,19,18,.06);
}
header.scrolle .nav{padding-top:12px;padding-bottom:12px}
/* Fallback sans backdrop-filter */
@supports not (backdrop-filter: blur(1px)){
  .hero-carte-prix,.carte-avantage,.carte-quartier,.panneau-quartier,.groupe-prix,.formulaire{background:rgba(252,251,248,.94)}
  header.scrolle{background:rgba(252,251,248,.96)}
}
@media (max-width:760px){
  .hero-carte-prix,.carte-avantage,.carte-quartier,.panneau-quartier,.groupe-prix,.formulaire{
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  }
  .carte-avantage::after,.carte-quartier::after,.panneau-quartier::after{display:none}
}


/* ============================================================
   Porte cochère — animation de clic sur les CTA principaux
   ============================================================ */
.porte-scene{
  position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(20,19,18,0);pointer-events:none;transition:background .3s var(--ease);
}
.porte-scene.visible{background:rgba(20,19,18,.18)}
.porte-cadre{width:130px;height:150px;perspective:700px;position:relative;
  filter:drop-shadow(0 18px 40px rgba(20,19,18,.3));
  opacity:0;transform:scale(.85);transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.porte-scene.visible .porte-cadre{opacity:1;transform:scale(1)}
.porte-lumiere{
  position:absolute;left:14%;right:14%;top:18%;bottom:6%;
  background:radial-gradient(ellipse at 50% 60%, rgba(201,169,107,.95), rgba(168,133,75,.35) 70%, transparent);
  opacity:0;transition:opacity .4s var(--ease) .15s;border-radius:46% 46% 4px 4px;
}
.porte-scene.visible .porte-lumiere{opacity:1}
.porte-battant{
  position:absolute;top:19%;bottom:6%;width:36%;
  background:#FCFBF8;border:1.5px solid #141312;
  transition:transform .45s cubic-bezier(.6,.05,.3,1) .12s;
}
.porte-battant::before,.porte-battant::after{
  content:"";position:absolute;left:18%;right:18%;border:1px solid rgba(20,19,18,.55);
}
.porte-battant::before{top:12%;height:30%}
.porte-battant::after{bottom:10%;height:34%}
.porte-battant.gauche{left:14%;transform-origin:left center;border-right-width:.75px}
.porte-battant.droite{right:14%;transform-origin:right center;border-left-width:.75px}
.porte-scene.ouverte .porte-battant.gauche{transform:rotateY(-78deg)}
.porte-scene.ouverte .porte-battant.droite{transform:rotateY(78deg)}
@media (prefers-reduced-motion: reduce){
  .porte-scene{display:none}
}

/* Variante de trait pour fonds sombres + fantômes */
.decor .trait-clair{fill:none;stroke:#FCFBF8;stroke-width:1.5;opacity:.18}
.decor .fantome{opacity:.8}

/* ============================================================
   Système iconographique « Trait de Paris »
   ============================================================ */
.ico{
  width:24px;height:24px;display:block;
  fill:none;stroke:var(--encre);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .35s var(--ease);
}
.ico .accent{stroke:var(--laiton)}
.ico .accent[r], .ico circle.accent{fill:var(--laiton);stroke:none}
.ico path.accent[d*="Z"]{fill:rgba(168,133,75,.18);stroke:var(--laiton)}
.ico-s{width:18px;height:18px;stroke-width:3}
.ico-l{width:30px;height:30px;stroke-width:2.3}
/* Conteneurs */
.picto .ico{margin:auto}
.picto{display:flex;align-items:center;justify-content:center}
.carte-avantage:hover .picto .ico,
.carte-quartier:hover .ico-coin .ico{transform:rotate(-5deg) scale(1.1)}
.ico-cartouche{
  width:54px;height:54px;border-radius:16px;margin-bottom:16px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(252,251,248,.75);border:1px solid rgba(20,19,18,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 12px 28px rgba(20,19,18,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:flotter 7s ease-in-out infinite;
}
.cta-final .ico-cartouche{background:rgba(252,251,248,.1);border-color:rgba(252,251,248,.18)}
.cta-final .ico-cartouche .ico{stroke:var(--blanc)}
@keyframes flotter{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.ico-coin{
  width:42px;height:42px;border-radius:12px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--beige);
}
.ligne-coord{display:flex;align-items:center;gap:10px}
.ligne-coord .ico-s{stroke:var(--taupe);flex:0 0 auto}
@media (max-width:760px){
  .ico-cartouche{width:46px;height:46px;animation:none}
  .ico-cartouche .ico{width:22px;height:22px}
}
@media (prefers-reduced-motion: reduce){
  .ico-cartouche{animation:none}
  .ico{transition:none}
}


/* Cartouche hero : à cheval sur le coin bas-gauche de la photo */
.hero-visuel{overflow:visible}
.hero-visuel img{border-radius:inherit}
.hero-carte-prix{left:-30px;bottom:34px}
@media (max-width:980px){
  .hero-carte-prix{left:14px;bottom:14px}
}

@media (max-width:760px){
  .hero-carte-prix{left:-10px;bottom:14px;padding:12px 16px}
}

/* Tracé piloté par le scroll (desktop pointeur fin) */
html.scrub-decors .decor.reveal [pathLength]{
  stroke-dasharray:1;stroke-dashoffset:1;transition:none;
}
html.scrub-decors .decor.reveal.visible [pathLength]{transition:none}

/* Pictogrammes tracés des étapes de la méthode (fond noir) */
.etape-tete{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.etape-ico{display:flex;align-items:center;justify-content:center;width:56px;height:56px;flex:0 0 auto;border-radius:14px;background:rgba(252,251,248,.06);border:1px solid rgba(252,251,248,.12)}
.ico-trace{width:32px;height:32px;fill:none;stroke:rgba(252,251,248,.92);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ico-trace .accent{stroke:var(--laiton-clair, #C9A96B)}
.ico-trace circle.accent{fill:var(--laiton);stroke:none}
.ico-trace [pathLength]{stroke-dasharray:1;stroke-dashoffset:1}
.etape.active .ico-trace [pathLength]{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1s var(--ease);
}
.etape.active .ico-trace [pathLength]:nth-child(2){transition-delay:.18s}
.etape.active .ico-trace [pathLength]:nth-child(3){transition-delay:.36s}
.etape.active .ico-trace [pathLength]:nth-child(4){transition-delay:.5s}
.etape.active .ico-trace [pathLength]:nth-child(5){transition-delay:.62s}
.etape.active .ico-trace circle[pathLength]{transition:opacity .4s var(--ease) .7s;opacity:0;stroke-dashoffset:0}
.etape.active .ico-trace circle[pathLength]{opacity:1}
.etape:not(.active) .ico-trace circle[pathLength]{opacity:0}
@media (prefers-reduced-motion: reduce){
  .ico-trace [pathLength]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .etape .ico-trace circle[pathLength]{opacity:1}
}

/* ============================================================
   Navigation déroulante premium + méga-menu quartiers
   ============================================================ */
.nav-liens{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav-liens > li{position:relative}
.nav-liens > li > a,
.nav-bouton{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--texte);font-size:.93rem;color:var(--encre);
  text-decoration:none;background:none;border:0;cursor:pointer;
  padding:9px 14px;border-radius:10px;line-height:1;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav-liens > li > a:hover,.nav-bouton:hover,
.nav-liens > li.ouvert .nav-bouton{background:rgba(20,19,18,.05)}
.nav-liens a[aria-current="page"]{color:var(--laiton)}
.nav-fleche{width:9px;height:6px;transition:transform .3s var(--ease)}
.nav-liens > li.ouvert .nav-fleche{transform:rotate(180deg)}
/* Sous-menus */
.sous-menu{
  position:absolute;top:calc(100% + 10px);left:0;min-width:248px;
  background:rgba(252,251,248,.985);-webkit-backdrop-filter:blur(20px) saturate(1.1);backdrop-filter:blur(20px) saturate(1.1);
  border:1px solid rgba(20,19,18,.08);border-radius:16px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 30px 64px rgba(20,19,18,.18);
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);
  transform-origin:top left;transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index:60;
}
.nav-liens > li.ouvert .sous-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sous-menu a{
  display:block;padding:10px 14px;border-radius:10px;
  font-size:.9rem;color:var(--encre);opacity:.92;text-decoration:none;white-space:nowrap;
  transition:background .2s var(--ease), padding-left .2s var(--ease);
}
.sous-menu a:hover{background:rgba(168,133,75,.1);padding-left:18px;color:var(--laiton-fonce, #8A6A38)}
.sous-menu a[aria-current="page"]{color:var(--laiton)}
/* Méga-menu */
.sous-mega{left:50%;transform:translateX(-50%) translateY(-8px) scale(.98);transform-origin:top center;padding:24px;width:min(92vw,880px);box-sizing:border-box}
.nav-liens > li.ouvert .sous-mega{transform:translateX(-50%) translateY(0) scale(1)}
.mega-quartiers{display:grid;grid-template-columns:repeat(3, minmax(0,1fr)) minmax(230px,250px);gap:22px;width:100%;box-sizing:border-box}
/* Méga-menu : colonnes robustes, aucun débordement */
.mega-col{min-width:0}
.mega-col li a{overflow-wrap:break-word}
.mega-cta{min-width:0}
.mega-encart{box-sizing:border-box;width:100%}

.mega-col h4{
  font-family:var(--texte);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 10px;font-weight:600;
}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li a{display:block;padding:6px 10px;border-radius:8px;font-size:.9rem;color:var(--encre);text-decoration:none;transition:background .2s var(--ease), padding-left .2s var(--ease)}
.mega-col li a:hover{background:rgba(168,133,75,.1);padding-left:14px}
/* Encart CTA du méga-menu — hiérarchie claire */
.mega-cta{display:flex;flex-direction:column;gap:14px}
.mega-encart{padding:18px;border-radius:14px;background:rgba(239,233,223,.6);border:1px solid rgba(20,19,18,.07);
  display:flex;flex-direction:column;gap:10px}
.mega-encart-vendeur{background:rgba(168,133,75,.08);border-color:rgba(168,133,75,.2)}
.mega-encart-titre{display:block;font-family:var(--display);font-size:1rem;font-weight:600;color:var(--encre);line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip}
.mega-encart-texte{font-size:.82rem;line-height:1.5;color:var(--taupe);margin:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.mega-encart-actions{display:flex;flex-direction:column;gap:8px;margin-top:2px}
.mega-encart-actions .btn{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;white-space:normal;line-height:1.2}

/* Boutons des encarts méga-menu : contraste garanti */
.mega-encart-actions .btn{padding:11px 14px;font-size:.84rem;min-height:42px;border-radius:10px;width:100%;box-sizing:border-box}
.mega-encart-actions .btn-clair{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.mega-encart-actions .btn-clair:hover{background:#2a2722;color:var(--blanc)}
.mega-encart-actions .btn-primaire{background:var(--laiton);color:var(--blanc);border-color:var(--laiton)}
.mega-encart-actions .btn-primaire:hover{background:#8a6a38}
.mega-encart-vendeur .mega-encart-actions .btn-primaire{background:var(--encre);border-color:var(--encre)}
.mega-encart-vendeur .mega-encart-actions .btn-primaire:hover{background:#2a2722}

.btn-petit{padding:9px 14px;font-size:.82rem}
/* Header verre permanent quand un menu est ouvert */
header.menu-actif{background:rgba(252,251,248,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}

/* ---------- Mobile ---------- */
@media (max-width:1040px){
  .burger{display:flex}
  nav[aria-label="Navigation principale"]{
    position:fixed;inset:64px 0 0;background:var(--blanc);
    transform:translateX(100%);transition:transform .4s var(--ease);
    overflow-y:auto;z-index:55;padding:8px 0 40px;
  }
  body.menu-ouvert nav[aria-label="Navigation principale"]{transform:translateX(0)}
  body.menu-ouvert{overflow:hidden}
  .nav-liens{flex-direction:column;align-items:stretch;gap:0;padding:8px 18px}
  .nav-liens > li{border-bottom:1px solid rgba(20,19,18,.06)}
  .nav-liens > li > a,.nav-bouton{
    width:100%;justify-content:space-between;padding:16px 8px;font-size:1.05rem;border-radius:0;
  }
  .sous-menu,.sous-mega{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
    padding:0 0 10px;min-width:0;max-height:0;overflow:hidden;transition:max-height .35s var(--ease);
  }
  .nav-liens > li.ouvert .sous-menu,.nav-liens > li.ouvert .sous-mega{max-height:1200px}
  .sous-menu a{padding:11px 18px;font-size:.96rem}
  .sous-mega{padding:0}
  .mega-quartiers{grid-template-columns:1fr 1fr;gap:8px;padding:4px 8px}
  .mega-col h4{margin-top:12px}
  .mega-cta{grid-column:1 / -1;margin-top:6px}
  .mega-encart{grid-column:1 / -1}
  .mega-encart-actions .btn{font-size:.9rem}
  header .btn-primaire{display:none}
  body.menu-ouvert nav .btn-primaire,
  nav .nav-cta-mobile{display:flex}
  .nav-cta-mobile{margin:18px 18px 0;flex-direction:column;gap:10px}
  .nav-cta-mobile .btn{width:100%;justify-content:center}
}
@media (min-width:1041px){
  .nav-cta-mobile{display:none}
}

/* Méga-menu Types de biens (2 colonnes + CTA) */
.mega-types{display:grid;grid-template-columns:repeat(2, minmax(0,1fr)) minmax(230px,250px);gap:22px;width:100%;box-sizing:border-box}
.sous-mega-types{left:auto;right:0;transform:translateX(0) translateY(-8px) scale(.98);transform-origin:top right;width:min(92vw,700px);box-sizing:border-box}
.nav-liens > li.ouvert .sous-mega-types{transform:translateX(0) translateY(0) scale(1)}
@media (max-width:1040px){
  .mega-types{grid-template-columns:1fr 1fr;gap:8px;min-width:0;padding:4px 8px}
  .mega-types .mega-cta{grid-column:1 / -1}
  .sous-mega-types{right:auto}
}

/* ============================================================
   Pages quartiers & types de biens — classes utilitaires
   ============================================================ */
.hero-interne-texte{max-width:760px}
.hero-interne-sous{font-size:1.12rem;line-height:1.7;color:var(--encre);margin:18px 0 26px;max-width:62ch;opacity:.92}
.micro-reassurance{font-size:.86rem;color:var(--taupe);margin-top:16px}
.contenu-texte p{font-size:1.04rem;line-height:1.8;max-width:72ch;color:var(--encre);opacity:.92;margin-bottom:16px}
.contenu-texte .lien-fleche{font-size:1rem}
.faq-rep{padding:4px 18px 18px}
.faq-rep p{margin:0;color:var(--encre);opacity:.88;line-height:1.7}
.liste-maillage{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px 28px}
.liste-maillage li a{display:inline-block;padding:6px 0}
.hero-interne .ico-cartouche{margin-bottom:18px}
.grille-avantages .carte-avantage .picto .ico{width:30px;height:30px}

/* ============================================================
   Pop-up de contact contextuel (Alexis Feyfant)
   ============================================================ */
.popup-contact, .popup-pastille{position:fixed;z-index:9000;font-family:var(--texte)}
.popup-contact{
  right:24px;bottom:24px;width:340px;max-width:calc(100vw - 32px);
  background:rgba(252,251,248,.82);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(252,251,248,.7);border-radius:20px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 30px 70px rgba(20,19,18,.22);
  padding:20px;opacity:0;transform:translateY(16px) scale(.98);pointer-events:none;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.popup-contact.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.popup-entete{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.popup-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:2px solid rgba(168,133,75,.4);box-shadow:0 6px 16px rgba(20,19,18,.16)}
.popup-agent strong{display:block;font-size:.95rem;color:var(--encre);line-height:1.2}
.popup-agent span{font-size:.78rem;color:var(--taupe)}
.popup-fermer{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;
  background:rgba(20,19,18,.05);color:var(--encre);cursor:pointer;font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease)}
.popup-fermer:hover{background:rgba(20,19,18,.12)}
.popup-bulle{
  position:relative;background:var(--blanc);border:1px solid rgba(20,19,18,.07);border-radius:14px;
  padding:13px 15px;margin-bottom:12px;box-shadow:0 6px 18px rgba(20,19,18,.06);
  animation:bulle-pop .55s var(--ease) both;
}
.popup-bulle::before{content:"";position:absolute;top:-7px;left:22px;width:14px;height:14px;
  background:var(--blanc);border-left:1px solid rgba(20,19,18,.07);border-top:1px solid rgba(20,19,18,.07);transform:rotate(45deg)}
.popup-bulle strong{display:block;font-size:.98rem;color:var(--encre);margin-bottom:6px;font-family:var(--titre)}
.popup-bulle p{margin:0;font-size:.86rem;line-height:1.55;color:var(--taupe)}
@keyframes bulle-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.popup-cta{display:block;text-align:center;padding:12px;border-radius:12px;background:var(--encre);color:var(--blanc);
  text-decoration:none;font-size:.92rem;font-weight:500;margin-bottom:10px;transition:background .25s var(--ease)}
.popup-cta:hover{background:var(--laiton)}
.popup-liens{display:flex;gap:8px}
.popup-liens a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;border-radius:11px;
  background:rgba(20,19,18,.04);color:var(--encre);text-decoration:none;font-size:.84rem;transition:background .2s var(--ease)}
.popup-liens a:hover{background:rgba(168,133,75,.12)}
.popup-liens .ico-s{stroke:var(--taupe);flex:0 0 auto}
/* Pastille flottante */
.popup-pastille{
  right:24px;bottom:24px;display:flex;align-items:center;gap:10px;
  background:var(--encre);color:var(--blanc);border:0;border-radius:999px;cursor:pointer;
  padding:12px 18px 12px 12px;box-shadow:0 16px 40px rgba(20,19,18,.28);
  opacity:0;transform:translateY(16px) scale(.96);pointer-events:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);font-family:var(--texte);font-size:.9rem;
}
.popup-pastille.visible{opacity:1;transform:none;pointer-events:auto}
.popup-pastille img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid rgba(201,169,107,.6)}
.popup-pastille:hover{background:#211f1c}
.popup-pastille .pastille-pulse{position:absolute;top:10px;left:38px;width:9px;height:9px;border-radius:50%;background:var(--laiton-clair, #C9A96B);box-shadow:0 0 0 0 rgba(201,169,107,.6);animation:pastille-ping 2.4s ease-out infinite}
@keyframes pastille-ping{0%{box-shadow:0 0 0 0 rgba(201,169,107,.5)}70%,100%{box-shadow:0 0 0 8px rgba(201,169,107,0)}}
@media (max-width:560px){
  .popup-contact{right:10px;left:10px;bottom:10px;width:auto;padding:16px}
  .popup-pastille{right:12px;bottom:12px}
}
@media (prefers-reduced-motion: reduce){
  .popup-contact,.popup-pastille{transition:opacity .2s linear}
  .popup-bulle{animation:none}
  .pastille-pulse{animation:none}
}

/* ============================================================
   Avis Google — cartes premium
   ============================================================ */
.avis-google{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.avis-carte{
  position:relative;background:rgba(252,251,248,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid rgba(252,251,248,.75);border-radius:18px;padding:24px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px rgba(20,19,18,.08);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  display:flex;flex-direction:column;
}
.avis-carte:hover{transform:translateY(-4px);border-color:rgba(168,133,75,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 26px 60px rgba(20,19,18,.13)}
.avis-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.avis-etoiles{color:var(--laiton);letter-spacing:2px;font-size:.95rem}
.avis-g{width:22px;height:22px;flex:0 0 auto;opacity:.9}
.avis-texte{font-family:var(--display, var(--titre));font-size:1.02rem;font-style:italic;line-height:1.6;
  color:var(--encre);margin:0 0 18px;flex:1}
.avis-bas{display:flex;align-items:center;gap:11px;margin-top:auto}
.avis-pastille{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--beige);color:var(--encre);font-family:var(--titre);font-weight:600;font-size:1rem;flex:0 0 auto}
.avis-meta strong{display:block;font-size:.92rem;color:var(--encre);line-height:1.2}
.avis-meta span{font-size:.78rem;color:var(--taupe)}
.avis-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:34px}
.avis-note-globale{display:inline-flex;align-items:center;gap:10px;justify-content:center;margin-top:8px;
  font-size:.9rem;color:var(--taupe)}
.avis-note-globale b{color:var(--encre);font-size:1.05rem}
/* version compacte (Estimation / Vendre / Contact) */
.avis-bloc-compact{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:10px}
.avis-compact{background:rgba(252,251,248,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(20,19,18,.07);border-radius:14px;padding:18px}
.avis-compact .avis-etoiles{font-size:.85rem;margin-bottom:8px;display:block}
.avis-compact p{font-style:italic;font-size:.95rem;line-height:1.55;margin:0 0 12px;color:var(--encre)}
.avis-compact cite{font-style:normal;font-size:.82rem;color:var(--taupe)}
.avis-contact{margin-top:24px;padding:18px;border-radius:14px;background:rgba(168,133,75,.07);border:1px solid rgba(168,133,75,.18)}
.avis-contact .avis-etoiles{font-size:.85rem}
.avis-contact p{font-style:italic;margin:8px 0 6px;color:var(--encre)}
.avis-contact cite{font-style:normal;font-size:.82rem;color:var(--taupe)}
@media (max-width:760px){
  .avis-google{grid-template-columns:1fr;gap:16px}
}



/* ============================================================
   Scènes vidéo « plein cadre » v2 — fenêtre haussmannienne + scroll 3D + points
   ============================================================ */
.scene-video{
  position:relative;display:flex;align-items:center;overflow:clip;
  padding:clamp(60px,9vh,120px) 0;
  background:radial-gradient(120% 90% at 50% 0%, #1c1916 0%, #141312 55%, #100e0c 100%);
  color:var(--blanc);isolation:isolate;
}
.scene-video.claire{
  background:radial-gradient(120% 90% at 50% 0%, #FCFBF8 0%, #F3EEE4 60%, #EFE9DF 100%);
  color:var(--encre);
}
/* --- Fond : canvas points interactif + halos + lignes --- */
.scene-fond{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.scene-points{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.scene-halo{position:absolute;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none}
.scene-halo.or{background:rgba(168,133,75,.26)}
.scene-halo.clair{background:rgba(252,251,248,.10)}
.scene-fond svg.scene-lignes{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(1100px,118%);height:auto;opacity:.5}
.scene-fond .trait{fill:none;stroke:currentColor;stroke-width:1.1;opacity:.09}
.scene-fond .trait-laiton{fill:none;stroke:var(--laiton-clair,#C9A96B);stroke-width:1.1;opacity:.3}
/* --- Grille de contenu --- */
.scene-inner{position:relative;z-index:2;width:100%;max-width:1180px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.12fr .88fr;gap:60px;align-items:center}
.scene-video.inverse .scene-inner{grid-template-columns:.88fr 1.12fr}
.scene-video.inverse .scene-texte{order:2}
.scene-eyebrow{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;opacity:.62;margin-bottom:22px;
  display:inline-flex;align-items:center;gap:10px}
.scene-eyebrow::before{content:"";width:30px;height:1px;background:var(--laiton)}
/* Question signature — POLICE DU LOGO (Fraunces / --display) */
.scene-question{
  font-family:var(--display);font-weight:500;line-height:1.05;letter-spacing:-.015em;
  font-size:clamp(2.1rem,4.6vw,3.7rem);margin:0 0 26px;
}
.scene-question .surligne{color:var(--laiton-clair,#C9A96B);font-style:italic}
.scene-video.claire .scene-question .surligne{color:var(--laiton)}
.scene-texte p{font-size:1.06rem;line-height:1.7;opacity:.82;max-width:46ch;margin-bottom:30px}
/* CTA lisible sur fond sombre ET clair */
.scene-cta{display:inline-flex;background:var(--blanc);color:var(--encre);border:1px solid transparent}
.scene-cta:hover{background:var(--laiton);color:var(--blanc)}
.scene-video.claire .scene-cta{background:var(--encre);color:var(--blanc)}
.scene-video.claire .scene-cta:hover{background:var(--laiton)}

/* --- Cadre vidéo + fenêtre haussmannienne --- */
.scene-cadre-col{position:relative;display:flex;justify-content:center;perspective:1500px}
.scene-fenetre{position:relative;width:100%;max-width:320px;aspect-ratio:9/16}
/* la vidéo : plate au début, inclinée à la fin (piloté par --tilt via JS) */
.scene-cadre{
  position:relative;width:100%;height:100%;border-radius:16px;transform-style:preserve-3d;
  --tilt:0;
  transform:rotateY(calc(var(--tilt) * -10deg)) rotateX(calc(var(--tilt) * 3deg)) scale(calc(1 - var(--tilt) * .02));
  transition:transform .15s linear;
}
.scene-video.inverse .scene-cadre{transform:rotateY(calc(var(--tilt) * 10deg)) rotateX(calc(var(--tilt) * 3deg)) scale(calc(1 - var(--tilt) * .02))}
.scene-cadre-inner{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 calc(20px + var(--tilt,0)*30px) calc(40px + var(--tilt,0)*50px) rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.18) inset}
.scene-video.claire .scene-cadre-inner{border-color:rgba(20,19,18,.12);box-shadow:0 calc(20px + var(--tilt,0)*30px) calc(40px + var(--tilt,0)*50px) rgba(20,19,18,.2), 0 1px 0 rgba(255,255,255,.6) inset}
.scene-cadre-inner video{width:100%;height:100%;object-fit:cover;display:block;background:#0d0b0a}
.scene-cadre-inner::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 30%, transparent 70%, rgba(255,255,255,.07) 100%)}
/* Fenêtre haussmannienne (volets/battants) qui s'ouvrent au scroll */
.hauss{position:absolute;inset:-22px -22px -14px -22px;z-index:3;pointer-events:none;--ouv:0}
.hauss-cote{position:absolute;top:0;bottom:0;width:50%;}
.hauss-cote.g{left:0;transform-origin:left center;transform:perspective(1200px) rotateY(calc(var(--ouv) * -82deg))}
.hauss-cote.d{right:0;transform-origin:right center;transform:perspective(1200px) rotateY(calc(var(--ouv) * 82deg))}
.hauss-cote svg{width:100%;height:100%;display:block}
.hauss .montant{fill:none;stroke:var(--laiton-clair,#C9A96B);stroke-width:1.4;opacity:.55}
.hauss .verre{fill:rgba(252,251,248,.05);stroke:rgba(252,251,248,.35);stroke-width:.8}
.scene-video.claire .hauss .montant{stroke:var(--laiton);opacity:.5}
.scene-video.claire .hauss .verre{fill:rgba(20,19,18,.03);stroke:rgba(20,19,18,.2)}
/* linteau + appui (fixes) */
.hauss-linteau{position:absolute;left:-26px;right:-26px;top:-30px;height:14px;z-index:3;pointer-events:none;
  border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--laiton-clair,#C9A96B),var(--laiton));opacity:.5}
.hauss-appui{position:absolute;left:-30px;right:-30px;bottom:-18px;height:10px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,var(--laiton),transparent);opacity:.4;border-radius:0 0 3px 3px}
/* play + badge */
.scene-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(252,251,248,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 14px 36px rgba(0,0,0,.45);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.scene-play::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--encre)}
.scene-play:hover{transform:translate(-50%,-50%) scale(1.08)}
.scene-cadre-inner.lecture .scene-play{opacity:0;pointer-events:none}
.scene-badge{position:absolute;left:14px;bottom:14px;z-index:4;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;opacity:.85;display:flex;align-items:center;gap:7px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.scene-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#C9A96B;box-shadow:0 0 8px #C9A96B}
/* Entrée au scroll */
.scene-texte > *{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.scene-on .scene-texte > *{opacity:1;transform:none}
.scene-on .scene-texte > *:nth-child(2){transition-delay:.08s}
.scene-on .scene-texte > *:nth-child(3){transition-delay:.18s}
.scene-on .scene-texte > *:nth-child(4){transition-delay:.3s}
.scene-fenetre{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.scene-on .scene-fenetre{opacity:1;transform:none}
/* Mobile */
@media (max-width:860px){
  .scene-inner,.scene-video.inverse .scene-inner{grid-template-columns:1fr;gap:30px;padding:8px 22px}
  .scene-video.inverse .scene-texte{order:0}
  .scene-fenetre{max-width:248px}
  .scene-cadre{transform:none!important}
  .hauss{display:none}
  .scene-points{opacity:.5}
}
@media (prefers-reduced-motion: reduce){
  .scene-texte > *,.scene-fenetre{opacity:1;transform:none;transition:none}
  .scene-cadre{transform:none!important}
  .hauss-cote{transform:none!important}
}


/* ============================================================
   Éléments décoratifs premium — dessinables au scroll
   (séparateur, ornement de titre, puces, coins)
   ============================================================ */
.deco-trace{fill:none;stroke-linecap:round;stroke-linejoin:round}
.deco-trace .ligne{stroke:var(--encre);stroke-width:1.4;opacity:.5}
.deco-trace .or{stroke:var(--laiton);stroke-width:1.5;opacity:.85}
.deco-trace .pt{fill:none;stroke:var(--laiton);stroke-width:1.5}
/* dessin au scroll : caché tant que pas .visible, se dessine ensuite */
.deco-trace [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease)}
.deco-trace.visible [pathLength]{stroke-dashoffset:0}
.deco-trace.visible [pathLength]:nth-child(2){transition-delay:.18s}
.deco-trace.visible [pathLength]:nth-child(3){transition-delay:.34s}
.deco-trace.visible [pathLength]:nth-child(4){transition-delay:.5s}
html.scrub-decors .deco-trace [pathLength]{transition:stroke-dashoffset .1s linear}

/* 1. Séparateur de section */
.separateur-section{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto;padding:8px 0;max-width:560px}
.separateur-section svg{width:100%;height:18px;display:block;overflow:visible}

/* 2. Ornement de titre (sous un eyebrow / titre) */
.ornement-titre{display:block;margin:6px 0 2px;width:84px;height:10px;overflow:visible}
.ornement-titre.centre{margin-left:auto;margin-right:auto}

/* 3. Puces premium (listes) */
ul.puces-premium{list-style:none;margin:1rem 0;padding:0}
ul.puces-premium li{position:relative;padding-left:34px;margin-bottom:14px;line-height:1.6}
ul.puces-premium li .puce{position:absolute;left:0;top:2px;width:20px;height:20px;overflow:visible}

/* 4. Coins décoratifs (cadre d'un bloc) */
.cadre-coins{position:relative}
.cadre-coins > .coin{position:absolute;width:42px;height:42px;pointer-events:none;overflow:visible;z-index:2}
.cadre-coins > .coin.hg{top:12px;left:12px}
.cadre-coins > .coin.hd{top:12px;right:12px;transform:scaleX(-1)}
.cadre-coins > .coin.bg{bottom:12px;left:12px;transform:scaleY(-1)}
.cadre-coins > .coin.bd{bottom:12px;right:12px;transform:scale(-1)}

@media (prefers-reduced-motion: reduce){
  .deco-trace [pathLength]{stroke-dashoffset:0;transition:none}
}

/* ============================================================
   Curseur personnalisé — mini Tour Eiffel penchée (desktop only)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.curseur-eiffel, html.curseur-eiffel *{cursor:none !important}
  /* on garde le curseur natif sur les champs de saisie pour l'UX */
  html.curseur-eiffel input,
  html.curseur-eiffel textarea,
  html.curseur-eiffel select{cursor:text !important}
  html.curseur-eiffel input[type=range]{cursor:pointer !important}

  #curseur-eiffel{
    position:fixed;top:0;left:0;width:22px;height:22px;z-index:9999;pointer-events:none;
    will-change:transform;
    transition:width .2s var(--ease), height .2s var(--ease);
  }
  #curseur-eiffel svg{width:100%;height:100%;display:block;overflow:visible;
    transition:transform .3s var(--ease)}
  #curseur-eiffel .ce-fleche{fill:var(--encre);stroke:var(--blanc);stroke-width:1.2;
    stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(20,19,18,.25));transition:fill .3s var(--ease)}
  /* halo de mise en lumière (clic) */
  #curseur-eiffel .ce-halo{
    fill:url(#ce-grad-halo);opacity:0;transform-origin:5px 5px;transform:scale(.4);
  }
  /* États contextuels (hover) */
  html.ce-sur-bouton #curseur-eiffel{width:26px;height:26px}
  html.ce-sur-bouton #curseur-eiffel .ce-fleche{fill:var(--laiton)}
  html.ce-sur-lien #curseur-eiffel svg{transform:scale(1.1)}
  html.ce-sur-carte #curseur-eiffel svg{transform:scale(1.06)}

  /* Illumination au clic (~1,3 s) */
  @keyframes ce-illumine{
    0%{opacity:0;transform:scale(.4)}
    18%{opacity:.85;transform:scale(1)}
    100%{opacity:0;transform:scale(1.5)}
  }
  @keyframes ce-monte-lumiere{
    0%{fill:var(--encre)}
    14%{fill:var(--laiton-clair,#C9A96B)}
    100%{fill:var(--encre)}
  }
  @keyframes ce-sommet-brille{
    0%,100%{opacity:0}
    14%{opacity:1}
    60%{opacity:.6}
  }
  @keyframes ce-scintille{
    0%,100%{opacity:0}
    20%{opacity:.9}
    40%{opacity:.3}
    60%{opacity:.7}
  }
  html.ce-clic #curseur-eiffel .ce-halo{animation:ce-illumine 1.3s var(--ease) forwards}
  html.ce-clic #curseur-eiffel .ce-fleche{animation:ce-monte-lumiere 1.3s var(--ease) forwards}

  @media (prefers-reduced-motion: reduce){
    #curseur-eiffel svg,#curseur-eiffel .ce-fleche,#curseur-eiffel .ce-halo{transition:none;animation:none !important}
  }
}

/* ============================================================
   Logo « cachet XV » (sceau + texte)
   ============================================================ */
.logo-cachet{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo-cachet .cachet{width:32px;height:32px;flex:0 0 auto;color:var(--encre);display:block}
.logo-cachet .logo-texte{font-family:var(--display);font-size:1.08rem;font-weight:600;letter-spacing:-.01em;color:inherit;line-height:1;white-space:nowrap}
.logo-cachet .logo-texte span{color:var(--laiton)}
/* footer : sceau en blanc cassé sur fond encre */
footer .logo-cachet .cachet{color:var(--blanc)}
footer .logo-cachet{color:var(--blanc)}
/* header compact au scroll */
header.scrolle .logo-cachet .cachet{width:29px;height:29px}
@media (max-width:1040px){
  .logo-cachet .cachet{width:29px;height:29px}
  .logo-cachet .logo-texte{font-size:1rem}
}
@media (max-width:380px){
  .logo-cachet .logo-texte{font-size:.92rem}
  .logo-cachet{gap:8px}
}

/* Coins décoratifs : dessin au survol de la carte, rétraction au mouseleave */
.cadre-coins > .coin.deco-trace [pathLength]{stroke-dashoffset:1;transition:stroke-dashoffset .5s var(--ease)}
.cadre-coins:hover > .coin.deco-trace [pathLength]{stroke-dashoffset:0}
.cadre-coins:hover > .coin.deco-trace [pathLength]:nth-child(2){transition-delay:.1s}
/* annule l'état "visible" permanent de l'observer pour les coins (priorité au hover) */
.cadre-coins > .coin.deco-trace.visible [pathLength]{stroke-dashoffset:1}
.cadre-coins:hover > .coin.deco-trace.visible [pathLength]{stroke-dashoffset:0}

/* ============================================================
   Hero — bandeau marque (grand logo + carte du 15e)
   ============================================================ */
.hero-marque{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.hero-logo-grand{display:inline-flex;align-items:center;gap:16px}
.hero-logo-grand .cachet{width:60px;height:60px;color:var(--encre);flex:0 0 auto}
.hero-logo-texte{font-family:var(--display);font-size:1.7rem;font-weight:600;letter-spacing:-.01em;line-height:1.05;color:var(--encre)}
.hero-logo-texte span{color:var(--laiton)}
@media (max-width:760px){
  .hero-marque{gap:16px}
  .hero-logo-grand .cachet{width:48px;height:48px}
  .hero-logo-texte{font-size:1.35rem}
  }

/* ============================================================
   Compteur calendrier animé (délai de vente 365 → 48 jours)
   ============================================================ */
.compteur-delai{margin-top:32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.compteur-cadre{display:flex;align-items:center;gap:18px;padding:22px 28px;border-radius:18px;
  background:var(--blanc);border:1px solid rgba(20,19,18,.08);box-shadow:0 18px 44px rgba(20,19,18,.06)}
.compteur-cal{width:46px;height:46px;color:var(--laiton);flex:0 0 auto}
.compteur-chiffre{display:flex;flex-direction:column;line-height:1}
.compteur-valeur{font-family:var(--display);font-size:3.2rem;font-weight:600;color:var(--encre);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.compteur-unite{font-size:.9rem;color:var(--taupe);text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.compteur-legende{font-size:.96rem;color:var(--taupe);max-width:30ch;margin:0}
.compteur-legende strong{color:var(--laiton)}
@media (max-width:560px){.compteur-valeur{font-size:2.6rem}}

/* ============================================================
   Fresque poignée de main (arrière-plan section avis)
   ============================================================ */
#avis{position:relative;overflow:hidden}
.fresque-poignee{position:absolute;inset:0;pointer-events:none;z-index:0}
.fresque-poignee .fantome{position:absolute}
.fresque-poignee .trace{stroke:var(--encre);opacity:.16}
.fresque-poignee .trace-fin{stroke:var(--encre);opacity:.12}
.fresque-poignee .trace-or{stroke:var(--laiton);opacity:.32}
.fresque-poignee .lueur{fill:var(--laiton);opacity:.4}
#avis > .container{position:relative;z-index:1}
@media (max-width:860px){.fresque-poignee{opacity:.5}}

/* ============================================================
   Mots animés au scroll (page estimation)
   ============================================================ */
/* "fiable" : brille au scroll */
.mot-brille{position:relative;color:var(--laiton);font-style:italic;display:inline-block}
.mot-brille::after{content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none}
.mot-brille.brille-go::after{animation:mot-eclat 1.2s var(--ease) forwards}
@keyframes mot-eclat{0%{left:-30%;opacity:0}20%{opacity:1}100%{left:120%;opacity:0}}
.mot-brille.brille-go{text-shadow:0 0 18px rgba(168,133,75,.5);transition:text-shadow .4s var(--ease)}

/* "mauvaise" : tombe en restant sur sa ligne (rebond vertical) */
/* "mauvaise" : normal au départ, puis tombe (et reste tombé) au scroll */
.mot-tombe{display:inline-block;transform-origin:left bottom;transition:none}
.mot-tombe.tombe-go{animation:mot-chute 1s cubic-bezier(.5,1.4,.55,1) forwards}
@keyframes mot-chute{
  0%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(.1em) rotate(-4deg)}
  70%{transform:translateY(.32em) rotate(3deg)}
  100%{transform:translateY(.28em) rotate(2deg)}
}
@media (prefers-reduced-motion:reduce){
  .mot-tombe{transform:none;animation:none}
  .mot-brille.brille-go::after{animation:none}
}

/* ============================================================
   Champ graphique d'arrière-plan (points + accents)
   ============================================================ */
.champ-graphique{position:absolute;top:0;bottom:0;width:42%;max-width:380px;pointer-events:none;z-index:0;opacity:.9}
.champ-graphique.champ-d{right:0;-webkit-mask:linear-gradient(to left,#000,transparent);mask:linear-gradient(to left,#000,transparent)}
.champ-graphique.champ-g{left:0;-webkit-mask:linear-gradient(to right,#000,transparent);mask:linear-gradient(to right,#000,transparent)}
.champ-graphique svg{width:100%;height:100%;display:block}
.champ-graphique .cg-cercle,.champ-graphique .cg-courbe{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease)}
.reveal.visible .champ-graphique .cg-cercle,.reveal.visible .champ-graphique .cg-courbe,
.decor.visible .cg-cercle,.decor.visible .cg-courbe{stroke-dashoffset:0}
/* le contenu reste au-dessus */
section{position:relative}
section > .container{position:relative;z-index:1}
@media (max-width:760px){.champ-graphique{opacity:.4;width:55%}}

/* ============================================================
   Champ de prix + loupe glissante (méthode estimation)
   ============================================================ */
#methode-estimation{position:relative;overflow:hidden}
.champ-prix{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.prix-fantome{position:absolute;font-family:var(--display);font-size:1.05rem;font-weight:600;
  color:var(--encre);opacity:.08;white-space:nowrap;transition:opacity .5s var(--ease), transform .5s var(--ease)}
.prix-fantome[data-cible]{color:var(--laiton)}
/* prix mis en surbrillance par la loupe */
.prix-fantome.zoome{opacity:.95;transform:scale(1.5);text-shadow:0 6px 20px rgba(168,133,75,.4);z-index:2}
/* à la fin : le prix grossit davantage */
.prix-fantome.zoome.grossit{transform:scale(2.1);text-shadow:0 10px 30px rgba(168,133,75,.55)}
/* loupe */
.loupe-glisse{position:absolute;top:15%;left:100%;width:80px;height:80px;opacity:0;
  filter:drop-shadow(0 10px 24px rgba(20,19,18,.18))}
.loupe-glisse svg{width:100%;height:100%}
#methode-estimation.loupe-go .loupe-glisse{animation:loupe-trajet 2.8s var(--ease) forwards}
@keyframes loupe-trajet{
  0%{opacity:0;left:100%;top:8%;transform:scale(.8)}
  15%{opacity:1}
  /* la loupe vient se centrer sur le prix choisi (left:62%,top:15%) */
  55%{opacity:1;left:calc(62% + 11px);top:calc(15% - 21px);transform:scale(1)}
  78%{left:calc(62% + 11px);top:calc(15% - 21px);transform:scale(1.05)}
  100%{opacity:1;left:calc(62% + 11px);top:calc(15% - 21px);transform:scale(1.5)}
}
#methode-estimation > .container{position:relative;z-index:1}
@media (max-width:760px){.champ-prix,.loupe-glisse{display:none}}
@media (prefers-reduced-motion:reduce){
  .loupe-glisse{display:none}.prix-fantome[data-cible]{opacity:.5}
}

/* ============================================================
   Animation shutter photo (section Mise en valeur)
   ============================================================ */
.cadre-shutter{position:relative;overflow:hidden}
.shutter-photo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:3}
.shutter-photo svg{width:100%;height:100%}
.shutter-lames .lame{fill:#141312;transform-origin:100px 100px;transition:transform 0s}
.shutter-anneau{stroke:var(--laiton);stroke-width:3;opacity:0}
.shutter-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
/* fermé par défaut (lames couvrent) ; à l'apparition -> ouverture en diaphragme */
.cadre-shutter.declic .shutter-lames .lame{
  animation:shutter-ouvre 1s var(--ease) forwards}
.cadre-shutter.declic .shutter-anneau{animation:shutter-anneau 1.1s var(--ease) forwards}
.cadre-shutter.declic .shutter-flash{animation:shutter-flash .5s var(--ease) .55s forwards}
@keyframes shutter-ouvre{
  0%{transform:scale(1) rotate(0)}
  100%{transform:scale(0) rotate(40deg)}
}
@keyframes shutter-anneau{0%{opacity:.9}60%{opacity:.9}100%{opacity:0}}
@keyframes shutter-flash{0%{opacity:0}40%{opacity:.7}100%{opacity:0}}
/* avant déclic : lames bien fermées */
.cadre-shutter:not(.declic) .shutter-lames .lame{transform:scale(1)}

/* ============================================================
   Dossier glissant (section Suivi de commercialisation)
   ============================================================ */
.cadre-dossier{position:relative;overflow:visible}
.dossier-glisse{position:absolute;right:-70px;top:50%;width:210px;height:158px;
  transform:translate(-40%,-50%);opacity:0;pointer-events:none;z-index:-1;
  filter:drop-shadow(0 16px 30px rgba(20,19,18,.22))}
.dossier-glisse svg{width:100%;height:100%}
.dossier-fond{fill:var(--laiton)}
.dossier-rabat{fill:var(--laiton-clair,#C9A96B)}
.dossier-feuille{stroke:#fff;stroke-width:2.4;stroke-linecap:round;opacity:.85;fill:none}
.cadre-dossier.glisse-go .dossier-glisse{animation:dossier-traverse 1.4s var(--ease) forwards}
@keyframes dossier-traverse{
  0%{transform:translate(-90%,-50%) rotate(-8deg);opacity:0}
  20%{opacity:1}
  100%{transform:translate(34%,-50%) rotate(3deg);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .shutter-photo{display:none}
  .dossier-glisse{opacity:1;transform:translate(34%,-50%) rotate(3deg);animation:none}
}

/* ============================================================
   Prix au m² par rue (page prix m²)
   ============================================================ */
.grille-rues{display:flex;gap:24px;width:max-content;will-change:transform}
.grille-rues.glisse-actif{cursor:grabbing}
.grille-rues .bloc-rues{flex:0 0 300px;scroll-snap-align:start}
.bloc-rues{background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:16px;padding:24px 22px}
.bloc-rues h3{font-family:var(--display);font-size:1.05rem;font-weight:600;margin-bottom:14px;color:var(--encre);
  padding-bottom:12px;border-bottom:1px solid rgba(168,133,75,.25)}
.liste-rues{list-style:none;margin:0;padding:0}
.liste-rues li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid rgba(20,19,18,.05);font-size:.92rem}
.liste-rues li:last-child{border-bottom:none}
.liste-rues a{color:var(--encre);text-decoration:none;transition:color .25s}
.liste-rues a:hover{color:var(--laiton)}
.prix-rue-val{font-size:.78rem;color:var(--taupe);font-style:italic;white-space:nowrap;flex:0 0 auto}

/* ============================================================
   Points d'intérêt + filtres de la carte
   ============================================================ */
/* POI à icônes visibles */
.poi{cursor:pointer;outline:none;transition:opacity .4s var(--ease)}
.poi-fond{transition:fill .3s var(--ease), stroke .3s var(--ease), r .3s var(--ease)}
.poi-glyphe{transition:stroke .3s var(--ease)}
.poi-lbl{transition:opacity .3s var(--ease);pointer-events:none}
/* hover / focus : pastille laiton + label */
.poi:hover .poi-fond,.poi:focus-visible .poi-fond{fill:var(--laiton);stroke:var(--laiton);r:13}
.poi:hover .poi-glyphe,.poi:focus-visible .poi-glyphe{stroke:#FCFBF8}
.poi:hover .poi-lbl,.poi:focus-visible .poi-lbl{opacity:1;fill:var(--encre)}
/* catégories masquées par filtre */
.poi-couche.masque-metros .poi-metros,
.poi-couche.masque-monuments .poi-monuments,
.poi-couche.masque-parcs .poi-parcs,
.poi-couche.masque-culture .poi-culture,
.poi-couche.masque-education .poi-education,
.poi-couche.masque-sante .poi-sante,
.poi-couche.masque-ponts .poi-ponts{display:none}
/* quartiers masquables */
.panneau-carte.masque-quartiers .zone,
.panneau-carte.masque-quartiers .marqueur,
.panneau-carte.masque-quartiers .station{opacity:.12;pointer-events:none}

/* Barre de filtres */
.filtres-carte{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto 22px;max-width:760px}
.filtre-carte{font-family:var(--texte);font-size:.82rem;font-weight:500;color:var(--taupe);
  background:var(--blanc);border:1px solid rgba(20,19,18,.12);border-radius:999px;
  padding:7px 16px;cursor:pointer;transition:all .25s var(--ease);line-height:1}
.filtre-carte:hover{border-color:var(--laiton);color:var(--encre)}
.filtre-carte.actif{background:var(--encre);color:var(--blanc);border-color:var(--encre)}
.filtre-carte.actif:hover{background:#2a2722;color:var(--blanc)}
@media (max-width:560px){
  .filtre-carte{font-size:.76rem;padding:6px 12px}
}
/* apparition progressive des POI au scroll */
.poi-couche .poi{opacity:0;animation:poi-apparait .6s var(--ease) forwards}
.panneau-carte.vue .poi-couche .poi{opacity:1}
@keyframes poi-apparait{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.poi-couche .poi{opacity:1;animation:none}}

/* ============================================================
   Texte SEO sous la carte + légende POI
   ============================================================ */
.carte-seo-texte{max-width:820px;margin:12px auto 0;text-align:center}
.carte-seo-texte p{font-size:.74rem;line-height:1.42;color:var(--taupe);margin-bottom:5px;text-align:center}
.carte-seo-texte a{color:var(--encre);text-decoration:none;border-bottom:1px solid rgba(168,133,75,.35);transition:color .25s}
.carte-seo-texte a:hover{color:var(--laiton)}
.legende-carte .point-poi{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--taupe);margin-right:7px;vertical-align:middle}

/* ============================================================
   FAQ accordéon (page prix m² et autres avec .faq-item)
   ============================================================ */
.faq-liste{max-width:820px;margin:40px auto 0;display:flex;flex-direction:column;gap:14px}
.faq-item{background:var(--blanc);border:1px solid rgba(20,19,18,.1);border-radius:14px;
  overflow:hidden;transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.faq-item:hover{border-color:rgba(168,133,75,.4);box-shadow:0 8px 24px rgba(20,19,18,.05)}
.faq-item[open]{border-color:rgba(168,133,75,.5);box-shadow:0 12px 32px rgba(20,19,18,.07)}
.faq-item summary{display:flex;align-items:center;gap:14px;padding:20px 22px;cursor:pointer;
  list-style:none;user-select:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .ico-s{flex:0 0 auto;width:22px;height:22px;stroke:var(--laiton);margin:0}
.faq-item summary h3{flex:1;margin:0;font-family:var(--display);font-size:1.06rem;font-weight:600;
  color:var(--encre);line-height:1.35}
/* indicateur +/− clair */
.faq-plus{flex:0 0 auto;position:relative;width:20px;height:20px;margin-left:8px}
.faq-plus::before,.faq-plus::after{content:"";position:absolute;background:var(--laiton);
  border-radius:2px;transition:transform .3s var(--ease), opacity .3s var(--ease)}
.faq-plus::before{top:9px;left:2px;width:16px;height:2px}
.faq-plus::after{top:2px;left:9px;width:2px;height:16px}
.faq-item[open] .faq-plus::after{transform:rotate(90deg);opacity:0}
.faq-item[open] .faq-plus::before{background:var(--encre)}
/* réponse : révélation douce */
.faq-reponse{padding:0 22px 22px 58px}
.faq-reponse p{margin:0;color:var(--taupe);font-size:.95rem;line-height:1.65}
.faq-item[open] .faq-reponse{animation:faq-ouvre .4s var(--ease)}
@keyframes faq-ouvre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faq-item summary:hover h3{color:var(--laiton)}
@media (max-width:560px){
  .faq-item summary{padding:16px 18px;gap:10px}
  .faq-item summary h3{font-size:.98rem}
  .faq-reponse{padding:0 18px 18px 44px}
}

/* ============================================================
   Grilles d'avis (pages meilleure agence / agent / avis)
   ============================================================ */
.grille-avis{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.grille-avis-pleine{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:40px}
.grille-avis .avis-compact{background:rgba(252,251,248,.06);border:1px solid rgba(252,251,248,.12);border-radius:16px;padding:24px}
.grille-avis .avis-compact p{color:rgba(252,251,248,.9)}
.grille-avis .avis-compact cite{color:var(--laiton-clair)}
.avis-carte{background:var(--blanc);border:1px solid rgba(20,19,18,.08);border-radius:16px;padding:26px;
  box-shadow:0 12px 32px rgba(20,19,18,.05);transition:transform .35s var(--ease), box-shadow .35s var(--ease)}
.avis-carte:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(20,19,18,.1)}
.avis-carte .avis-etoiles{color:var(--laiton);font-size:1.05rem;letter-spacing:2px}
.avis-carte p{margin:14px 0 16px;line-height:1.6;color:var(--encre);font-size:.97rem}
.avis-carte cite{font-style:normal;font-size:.85rem;color:var(--taupe)}

/* ============================================================
   Bande de statistiques animées (résultats vérifiables)
   ============================================================ */
.bande-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;max-width:920px;margin:0 auto}
.bande-stats.stats-encre{color:var(--blanc)}
.stat-bloc{text-align:center;position:relative;padding:10px}
.stat-bloc:not(:last-child)::after{content:"";position:absolute;right:-15px;top:18%;height:64%;width:1px;
  background:rgba(168,133,75,.3)}
.stat-ico{width:40px;height:40px;margin:0 auto 14px;color:var(--laiton);display:block}
.stat-chiffre{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.4rem);font-weight:600;
  line-height:1;letter-spacing:-.02em;color:var(--encre);font-variant-numeric:tabular-nums}
.stats-encre .stat-chiffre{color:var(--blanc)}
.stats-encre .stat-chiffre .stat-valeur{color:var(--laiton-clair,#C9A96B)}
.stat-libelle{margin-top:10px;font-size:.92rem;color:var(--taupe);line-height:1.4}
.stats-encre .stat-libelle{color:rgba(252,251,248,.7)}
@media (max-width:640px){
  .bande-stats{grid-template-columns:1fr;gap:24px}
  .stat-bloc:not(:last-child)::after{display:none}
  .stat-bloc:not(:last-child){border-bottom:1px solid rgba(168,133,75,.2);padding-bottom:24px}
}

/* ============================================================
   Grille d'honoraires (mandat simple / exclusif, 3 niveaux)
   ============================================================ */
.bascule-mandat-centre{text-align:center;margin:36px 0 0}
.bascule-mandat{display:inline-flex;gap:6px;background:var(--beige);border-radius:999px;padding:6px;max-width:100%}
.opt-mandat{font-family:var(--texte);font-size:.92rem;font-weight:600;color:var(--taupe);background:transparent;
  border:none;border-radius:999px;padding:10px 24px;cursor:pointer;transition:all .3s var(--ease);white-space:nowrap}
.opt-mandat.actif{background:var(--encre);color:var(--blanc)}
.grille-honoraires{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:32px;align-items:start}
/* on n'affiche que le mandat actif */
.grille-honoraires[data-mandat-actif="exclusif"] .mandat-simple{display:none}
.grille-honoraires[data-mandat-actif="simple"] .mandat-exclusif{display:none}
.carte-hono{background:var(--blanc);border:1px solid rgba(20,19,18,.1);border-radius:18px;padding:28px 24px;
  position:relative;transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.carte-hono:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(20,19,18,.1);border-color:rgba(168,133,75,.35)}
.carte-hono.populaire{border-color:var(--laiton);box-shadow:0 18px 44px rgba(168,133,75,.14)}
.hono-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--laiton);color:var(--blanc);
  font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.hono-tete{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid rgba(20,19,18,.08)}
.hono-niveau{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--encre)}
.hono-taux{font-family:var(--display);font-size:2.4rem;font-weight:600;color:var(--laiton);line-height:1;font-variant-numeric:tabular-nums}
.hono-liste{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.hono-liste li{position:relative;padding-left:26px;font-size:.9rem;color:var(--taupe);line-height:1.4}
.hono-liste li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(168,133,75,.15);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 L7 11 L12 5' fill='none' stroke='%23A8854B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hono-liste li.hono-inclus{font-weight:600;color:var(--encre);padding-left:26px}
.hono-liste li.hono-inclus::before{background:var(--laiton);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 L7 11 L12 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.hono-cta{width:100%;justify-content:center;text-align:center;display:flex}
.carte-hono{animation:hono-apparait .5s var(--ease)}
@keyframes hono-apparait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){.grille-honoraires{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* ============================================================
   Consentement RGPD + confirmation formulaire
   ============================================================ */
.champ-consentement{display:flex;align-items:flex-start;gap:10px;margin-top:20px;font-size:.86rem;color:var(--taupe);line-height:1.5}
.champ-consentement input[type="checkbox"]{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--laiton);cursor:pointer}
.champ-consentement a{color:var(--encre);text-decoration:underline}
.champ-consentement .oblig{color:var(--laiton)}
.form-confirmation{display:flex;align-items:center;gap:18px;margin-top:24px;padding:24px;border-radius:16px;
  background:rgba(168,133,75,.08);border:1px solid rgba(168,133,75,.3);color:var(--laiton)}
.form-confirmation svg{width:48px;height:48px;flex:0 0 auto}
.form-confirmation strong{display:block;font-family:var(--display);font-size:1.15rem;color:var(--encre);margin-bottom:4px}
.form-confirmation p{margin:0;font-size:.92rem;color:var(--taupe)}

/* ============================================================
   Pages légales
   ============================================================ */
.page-legale{max-width:780px}
.page-legale h2{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--encre);margin:36px 0 12px;
  padding-bottom:10px;border-bottom:1px solid rgba(168,133,75,.25)}
.page-legale h2:first-of-type{margin-top:0}
.page-legale p{color:var(--encre);line-height:1.7;margin-bottom:14px;font-size:.96rem}
.page-legale a{color:var(--laiton);text-decoration:underline}
.page-legale .liste-puces{margin:0 0 16px;padding-left:22px;color:var(--encre);line-height:1.7}
.page-legale .liste-puces li{margin-bottom:6px}
.encadre-todo{background:rgba(168,133,75,.1);border:1px dashed rgba(168,133,75,.5);border-radius:12px;
  padding:16px 18px;margin-bottom:32px;font-size:.88rem;color:#8a6a38}
.legale-maj{margin-top:36px;font-style:italic;color:var(--taupe);font-size:.88rem}

/* ============================================================
   Bandeau cookies (consentement RGPD)
   ============================================================ */
.bandeau-cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:9998;max-width:680px;margin:0 auto;
  background:var(--encre);color:var(--blanc);border-radius:16px;padding:22px 24px;
  box-shadow:0 20px 60px rgba(20,19,18,.3);display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  transform:translateY(120%);transition:transform .5s var(--ease)}
.bandeau-cookies.visible{transform:none}
.bandeau-cookies p{margin:0;flex:1;min-width:240px;font-size:.88rem;line-height:1.55;color:rgba(252,251,248,.85)}
.bandeau-cookies a{color:var(--laiton-clair,#C9A96B);text-decoration:underline}
.bandeau-cookies-actions{display:flex;gap:10px;flex-wrap:wrap}
.bandeau-cookies .btn{padding:10px 20px;font-size:.85rem;min-height:auto}
.cookie-refuser{background:transparent;border:1.5px solid rgba(252,251,248,.4);color:var(--blanc);border-radius:999px;
  padding:10px 20px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease)}
.cookie-refuser:hover{border-color:var(--blanc)}
.cookie-accepter{background:var(--laiton);border:1.5px solid var(--laiton);color:var(--blanc);border-radius:999px;
  padding:10px 20px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease)}
.cookie-accepter:hover{background:#8a6a38;border-color:#8a6a38}
@media (max-width:560px){.bandeau-cookies{padding:18px}}

/* ============================================================
   Page guides vendeur
   ============================================================ */
.grille-guides-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guide-tuile{display:flex;flex-direction:column;gap:6px;padding:24px;background:var(--blanc);
  border:1px solid rgba(20,19,18,.1);border-radius:16px;text-decoration:none;transition:all .3s var(--ease)}
.guide-tuile:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,19,18,.08);border-color:rgba(168,133,75,.4)}
.guide-ico{width:38px;height:38px;color:var(--laiton);margin-bottom:6px}
.guide-tuile strong{font-family:var(--display);font-size:1.1rem;color:var(--encre)}
.guide-tuile span:last-child{font-size:.86rem;color:var(--taupe)}
.liste-puces-or{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.liste-puces-or li{position:relative;padding-left:28px;color:var(--encre);line-height:1.5}
.liste-puces-or li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--laiton);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5 L7 11 L12 5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.encadre-info{background:rgba(168,133,75,.08);border-left:3px solid var(--laiton);border-radius:8px;padding:18px 20px;margin:20px 0}
.encadre-info strong{display:block;font-family:var(--display);color:var(--encre);margin-bottom:6px}
.encadre-info p{margin:0;color:var(--taupe);font-size:.92rem;line-height:1.6}
.etapes-guide{list-style:none;margin:40px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;max-width:760px}
.etapes-guide li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid rgba(20,19,18,.07)}
.etapes-guide li:last-child{border-bottom:none}
.etape-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--encre);color:var(--blanc);
  font-family:var(--display);font-size:1.2rem;font-weight:600;display:flex;align-items:center;justify-content:center}
.etapes-guide strong{font-family:var(--display);font-size:1.1rem;color:var(--encre);display:block;margin-bottom:4px}
.etapes-guide p{margin:0;color:var(--taupe);font-size:.93rem;line-height:1.55}
@media (max-width:760px){.grille-guides-nav{grid-template-columns:1fr}}

/* ============================================================
   Prise de rendez-vous en ligne
   ============================================================ */
.bloc-rdv{max-width:760px;margin:36px auto 0}
.rdv-placeholder{background:var(--blanc);border:1px dashed rgba(168,133,75,.4);border-radius:18px;
  padding:44px 32px;text-align:center;color:var(--taupe)}
.rdv-placeholder svg{width:54px;height:54px;color:var(--laiton);margin:0 auto 16px;display:block}
.rdv-placeholder strong{display:block;font-family:var(--display);font-size:1.3rem;color:var(--encre);margin-bottom:8px}
.rdv-placeholder p{max-width:48ch;margin:0 auto;font-size:.92rem;line-height:1.6}

/* ============================================================
   Page contact — coordonnées (sans formulaire)
   ============================================================ */
.grille-contact-coords{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.bloc-coords-principal{max-width:560px}
.interlocuteur-contact{display:flex;align-items:center;gap:20px;margin-bottom:32px}
.interlocuteur-contact img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto;
  border:2px solid var(--laiton-clair,#C9A96B)}
.interlocuteur-contact .eyebrow{display:block;margin-bottom:4px}
.interlocuteur-contact strong{display:block;font-family:var(--display);font-size:1.4rem;color:var(--encre);line-height:1.1}
.role-contact{display:block;font-size:.9rem;color:var(--taupe);margin-top:6px;line-height:1.4}
.coords-liste{display:flex;flex-direction:column;gap:2px}
.coord-ligne{display:flex;align-items:center;gap:16px;padding:16px 4px;text-decoration:none;
  border-bottom:1px solid rgba(20,19,18,.07);transition:padding-left .25s var(--ease)}
.coord-ligne:last-child{border-bottom:none}
a.coord-ligne:hover{padding-left:10px}
.coord-ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:rgba(168,133,75,.1);
  display:flex;align-items:center;justify-content:center}
.coord-ico .ico-s{stroke:var(--laiton);width:20px;height:20px}
.coord-txt{display:flex;flex-direction:column;gap:2px}
.coord-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--taupe)}
.coord-valeur{font-size:1.05rem;color:var(--encre);font-weight:500}
a.coord-ligne .coord-valeur{color:var(--encre)}
a.coord-ligne:hover .coord-valeur{color:var(--laiton)}
.contact-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.contact-ctas .btn{flex:1;min-width:200px;justify-content:center;text-align:center;display:flex}
.bloc-coords-cote .photo-aside{margin:0 0 22px}
.bloc-coords-cote .photo-aside img{width:100%;border-radius:18px;display:block}
/* repli Calendly */
.rdv-repli{margin-top:16px;text-align:center;font-size:.88rem;color:var(--taupe)}
.rdv-repli a{color:var(--laiton);text-decoration:underline}
@media (max-width:860px){
  .grille-contact-coords{grid-template-columns:1fr;gap:36px}
  .bloc-coords-cote{order:-1}
}

/* ============================================================
   Mètre ruban animé (section prix au m² "base utile")
   ============================================================ */
.section-metre .container{position:relative;z-index:2}
.metre-fond{position:absolute;left:0;right:0;bottom:0;
  width:100%;height:130px;opacity:.18;pointer-events:none;z-index:1}
.metre-fond svg{width:100%;height:100%}
.metre-ruban{fill:var(--laiton-clair,#C9A96B);fill-opacity:.25;stroke:var(--laiton);stroke-width:1.5}
.metre-grads line{opacity:0}
.section-metre.metre-go .metre-grads line{animation:metre-grad-app .5s ease forwards}
.metre-labels{opacity:0}
.section-metre.metre-go .metre-labels{animation:metre-grad-app .6s ease .4s forwards}
.metre-curseur{animation:metre-boucle 5s ease-in-out infinite}
@keyframes metre-grad-app{to{opacity:1}}
@keyframes metre-boucle{
  0%{transform:translateX(0)}
  50%{transform:translateX(760px)}
  100%{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .metre-grads line,.metre-labels{opacity:1;animation:none}
  .metre-curseur{animation:none;transform:translateX(380px)}
}



/* ============================================================
   Illustrations vectorielles détaillées par quartier (premier plan, à droite)
   ============================================================ */
.container.contenu-illustre{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:54px;align-items:center;
  max-width:1180px}
.illu-texte{min-width:0}
.illu-quartier{position:relative}
.illu-cadre{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(160deg, var(--blanc) 0%, var(--beige) 100%);
  border:1px solid rgba(168,133,75,.25);box-shadow:0 24px 60px rgba(20,19,18,.1);
  aspect-ratio:13/15}
.illu-svg{display:block;width:100%;height:100%}
/* couleurs des illustrations */
.illu-svg .il-ciel{fill:transparent}
.illu-svg .il-fond{fill:var(--taupe)}
.illu-svg .il-eau{fill:var(--laiton-clair,#C9A96B);opacity:.16}
.illu-svg .il-bati{fill:var(--blanc);opacity:.5}
.illu-svg .il-trait{fill:none;stroke:var(--encre);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.illu-svg .il-or{fill:none;stroke:var(--laiton);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.illu-svg .il-fin{fill:none;stroke:var(--taupe);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.illu-svg .il-lueur{fill:var(--laiton)}
/* animation de dessin au scroll : les contours se tracent */
.illu-quartier .illu-svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2.6s var(--ease)}
.illu-quartier.visible .illu-svg [pathLength]{stroke-dashoffset:0}
.illu-quartier .illu-svg .il-bati,.illu-quartier .illu-svg .il-fond,
.illu-quartier .illu-svg .il-eau,.illu-quartier .illu-svg .il-lueur{opacity:0;transition:opacity 1s var(--ease) .5s}
.illu-quartier.visible .illu-svg .il-bati{opacity:.5}
.illu-quartier.visible .illu-svg .il-fond{opacity:1}
.illu-quartier.visible .illu-svg .il-eau{opacity:.16}
.illu-quartier.visible .illu-svg .il-lueur{opacity:1}
/* responsive : illustration sous le texte sur mobile/tablette */
@media (max-width:900px){
  .container.contenu-illustre{grid-template-columns:1fr;gap:32px}
  .illu-quartier{max-width:420px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .illu-quartier .illu-svg [pathLength]{stroke-dashoffset:0;transition:none}
  .illu-quartier .illu-svg .il-bati,.illu-quartier .illu-svg .il-fond,
  .illu-quartier .illu-svg .il-eau,.illu-quartier .illu-svg .il-lueur{opacity:1;transition:none}
  .illu-quartier.visible .illu-svg .il-bati{opacity:.5}
}

/* ============================================================
   Illustration morphante derrière la bulle (scene-prix)
   ============================================================ */
.bulle-illu{position:relative;left:auto;right:auto;top:auto;transform:none;
  width:230px;height:200px;margin:16px auto 4px;opacity:.92;
  pointer-events:none;z-index:1}
.bulle-illu svg{width:100%;height:100%}
.bulle-illu .bi-bati{fill:var(--blanc);opacity:.5}
.bulle-illu .bi-trait{fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bulle-illu .bi-trait2{fill:none;stroke:var(--encre);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bulle-illu .bi-fin{fill:none;stroke:var(--taupe);stroke-width:1.1}
.bulle-illu .bi-or{fill:none;stroke:var(--laiton);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bulle-illu .bi-or-fill{fill:var(--laiton);opacity:.12;stroke:var(--laiton);stroke-width:1.5}
.bulle-illu .bi-lueur{fill:var(--laiton)}
.bulle-illu .bi-tag{font-family:var(--texte);font-size:11px;fill:var(--taupe);font-weight:600;
  opacity:0;transition:opacity .5s var(--ease)}
/* les calques : masqués par défaut, révélés quand leur groupe est actif */
.bulle-illu .bi-calque{opacity:0;transform:translateY(6px);transition:opacity .55s var(--ease), transform .55s var(--ease)}
.bulle-illu .bi-calque [stroke],.bulle-illu .bi-calque [fill]{}
/* le texte place la narration au-dessus de l'illustration */
.narration .eyebrow,.narration h2,.narration p,.narration .transition-cta,.narration .fil-progression{position:relative;z-index:1}
/* synchronisation : data-actif sur la scène pilote le calque visible */
.scene-prix[data-actif="0"] .bi-calque[data-c="0"],
.scene-prix[data-actif="1"] .bi-calque[data-c="1"],
.scene-prix[data-actif="2"] .bi-calque[data-c="2"],
.scene-prix[data-actif="3"] .bi-calque[data-c="3"],
.scene-prix[data-actif="4"] .bi-calque[data-c="4"]{opacity:1;transform:none}
.scene-prix[data-actif="0"] .bi-calque[data-c="0"] .bi-tag,
.scene-prix[data-actif="1"] .bi-calque[data-c="1"] .bi-tag,
.scene-prix[data-actif="2"] .bi-calque[data-c="2"] .bi-tag,
.scene-prix[data-actif="3"] .bi-calque[data-c="3"] .bi-tag,
.scene-prix[data-actif="4"] .bi-calque[data-c="4"] .bi-tag{opacity:1}
/* dessin progressif des traits or de chaque calque à son apparition */
.bulle-illu .bi-calque .bi-or,.bulle-illu .bi-calque .bi-trait2{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1s var(--ease)}
.scene-prix[data-actif="0"] .bi-calque[data-c="0"] .bi-or,.scene-prix[data-actif="0"] .bi-calque[data-c="0"] .bi-trait2,
.scene-prix[data-actif="1"] .bi-calque[data-c="1"] .bi-or,.scene-prix[data-actif="1"] .bi-calque[data-c="1"] .bi-trait2,
.scene-prix[data-actif="2"] .bi-calque[data-c="2"] .bi-or,.scene-prix[data-actif="2"] .bi-calque[data-c="2"] .bi-trait2,
.scene-prix[data-actif="3"] .bi-calque[data-c="3"] .bi-or,.scene-prix[data-actif="3"] .bi-calque[data-c="3"] .bi-trait2,
.scene-prix[data-actif="4"] .bi-calque[data-c="4"] .bi-or,.scene-prix[data-actif="4"] .bi-calque[data-c="4"] .bi-trait2{stroke-dashoffset:0}
@media (max-width:980px){.bulle-illu{position:relative;top:0;right:0;margin:0 auto 20px;width:200px;height:180px}
  .bulle-illu .bi-calque[data-c="0"]{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bulle-illu .bi-calque{transition:none}.bulle-illu .bi-calque[data-c="0"]{opacity:1}}

/* ============================================================
   Grille des quartiers 3x3 (sous le titre, carrés qui s'illuminent en boucle)
   ============================================================ */
.carte-quartiers-grille{max-width:400px;margin:28px auto 0}
.carte-quartiers-grille svg{width:100%;height:auto;display:block}
.carte-quartiers-grille .cq-forme{fill:var(--beige);stroke:var(--taupe);stroke-width:1.4;stroke-opacity:.4}
.carte-quartiers-grille .cq-nom{font-family:var(--display);font-size:19px;font-weight:600;fill:var(--taupe);opacity:.6}
.carte-quartiers-grille .cq-zone .cq-forme{animation:cqg-pulse 6s ease-in-out infinite;animation-delay:var(--d)}
.carte-quartiers-grille .cq-zone .cq-nom{animation:cqg-nom-pulse 6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes cqg-pulse{
  0%,100%{fill:var(--beige);stroke-opacity:.4}
  7%{fill:var(--laiton-clair,#C9A96B);fill-opacity:.6;stroke:var(--laiton);stroke-opacity:1}
  14%{fill:var(--beige);stroke-opacity:.4}
}
@keyframes cqg-nom-pulse{
  0%,100%{fill:var(--taupe);opacity:.6}
  7%{fill:var(--encre);opacity:1}
  14%{fill:var(--taupe);opacity:.6}
}
@media (prefers-reduced-motion:reduce){
  .carte-quartiers-grille .cq-zone .cq-forme,.carte-quartiers-grille .cq-zone .cq-nom{animation:none}
}
@media (max-width:560px){.carte-quartiers-grille .cq-nom{font-size:15px}}

/* ============================================================
   Jauge de prix (sous le titre) — aiguille : trop bas -> trop haut -> juste
   ============================================================ */
.jauge-bloc{max-width:400px;margin:28px auto 0;text-align:center}
.jauge-bloc svg{width:100%;height:auto;display:block;overflow:visible}
.jauge-bloc .jauge-arc{stroke-width:16;stroke-linecap:round}
.jauge-bloc .jauge-bas{stroke:var(--taupe);stroke-opacity:.35}
.jauge-bloc .jauge-bon{stroke:var(--laiton);stroke-opacity:.6}
.jauge-bloc .jauge-haut{stroke:var(--taupe);stroke-opacity:.35}
.jauge-bloc .jauge-grads line{stroke:var(--taupe);stroke-width:2;stroke-opacity:.5}
.jauge-bloc .jauge-lbl{font-family:var(--texte);font-size:19px;fill:var(--taupe);font-weight:600;
  transition:none}
.jauge-bloc .jauge-lbl-bon{fill:var(--laiton);font-weight:700;font-size:26px}
.jauge-bloc .jauge-aiguille{transform-origin:260px 250px;transform:rotate(0deg)}
.jauge-bloc .jauge-aiguille line{stroke:var(--encre);stroke-width:4}
.jauge-bloc .jauge-aiguille circle{fill:var(--encre)}
.jauge-legende{margin-top:14px;font-size:.9rem;color:var(--taupe);font-style:italic}
/* animation EN BOUCLE : bas -> haut -> juste (pause prolongée) */
.section-jauge.jauge-go .jauge-aiguille{animation:jauge-boucle 8s ease-in-out infinite}
@keyframes jauge-boucle{
  0%{transform:rotate(0deg)}
  10%{transform:rotate(-58deg)}    /* trop bas */
  20%{transform:rotate(-58deg)}
  35%{transform:rotate(58deg)}     /* trop haut */
  45%{transform:rotate(58deg)}
  58%{transform:rotate(0deg)}      /* juste prix */
  92%{transform:rotate(0deg)}      /* pause prolongée à juste prix */
  100%{transform:rotate(0deg)}
}
/* les labels grossissent quand l'aiguille pointe dessus (synchro avec la boucle) */
.jauge-bloc .jauge-lbl{transform-box:fill-box;transform-origin:center}
.section-jauge.jauge-go .jauge-lbl-bas{animation:lbl-bas 8s ease-in-out infinite}
.section-jauge.jauge-go .jauge-lbl-haut{animation:lbl-haut 8s ease-in-out infinite}
.section-jauge.jauge-go .jauge-lbl-bon{animation:lbl-bon 8s ease-in-out infinite}
@keyframes lbl-bas{0%,6%{transform:scale(1);fill-opacity:.6}13%{transform:scale(1.5);fill-opacity:1}24%,100%{transform:scale(1);fill-opacity:.6}}
@keyframes lbl-haut{0%,28%{transform:scale(1);fill-opacity:.6}38%{transform:scale(1.5);fill-opacity:1}49%,100%{transform:scale(1);fill-opacity:.6}}
@keyframes lbl-bon{0%,50%{transform:scale(1)}60%{transform:scale(1.6)}90%{transform:scale(1.6)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .jauge-bloc .jauge-aiguille,.jauge-bloc .jauge-lbl{animation:none!important;transform:rotate(0deg)}
}

/* ============================================================
   Photos de quartier (images fournies) — pleine bulle, zoom au survol, nom fondu
   ============================================================ */
.illu-cadre-photo{position:relative;margin:0;border-radius:20px;overflow:hidden;
  border:1px solid rgba(168,133,75,.25);box-shadow:0 24px 60px rgba(20,19,18,.14);
  background:var(--beige);aspect-ratio:1/1}
.illu-pinceau{position:absolute;inset:0;overflow:hidden}
/* image pleine, couvre toute la bulle */
.illu-img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform 1.1s var(--ease)}
/* zoom au survol */
.illu-cadre-photo:hover{box-shadow:0 30px 70px rgba(20,19,18,.22)}
.illu-cadre-photo:hover .illu-img{transform:scale(1.09)}
/* apparition douce au scroll (fondu simple, sans pinceau) */
.illu-photo .illu-cadre-photo{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease), transform .8s var(--ease)}
.illu-photo.visible .illu-cadre-photo{opacity:1;transform:none}
/* nom du quartier — intégré dans l'image avec un grand fondu */
.illu-nom-quartier{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:2;
  padding:90px 28px 26px;pointer-events:none;
  background:linear-gradient(to top, rgba(20,19,18,.78) 0%, rgba(20,19,18,.5) 38%, rgba(20,19,18,.18) 68%, transparent 100%)}
.illu-nom-quartier span{display:block;font-family:var(--display);font-weight:600;color:var(--blanc);
  font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.01em;line-height:1.05;
  text-shadow:0 2px 18px rgba(20,19,18,.4);
  opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease) .35s, transform .8s var(--ease) .35s}
.illu-photo.visible .illu-nom-quartier span{opacity:1;transform:none}
/* petit filet laiton sous le nom */
.illu-nom-quartier span::after{content:"";display:block;width:46px;height:2px;background:var(--laiton-clair,#C9A96B);
  margin-top:12px;border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--ease) .7s}
.illu-photo.visible .illu-nom-quartier span::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  .illu-img{transform:none}
  .illu-cadre-photo:hover .illu-img{transform:scale(1.04)}
  .illu-photo .illu-cadre-photo{opacity:1;transform:none;transition:none}
  .illu-nom-quartier span,.illu-nom-quartier span::after{opacity:1;transform:none;transition:none}
}


/* ============================================================
   Puzzle qui se rassemble au scroll (Services — Mise en valeur)
   ============================================================ */
.section-puzzle .container{position:relative;z-index:2}
/* puzzle placé à droite du titre, centré (plus au bord du site) */
.hero-titre-puzzle{display:flex;align-items:center;gap:40px;max-width:1000px;flex-wrap:wrap}
.hero-titre-puzzle h1{margin:0;flex:1 1 320px}
.puzzle-fond{position:static;flex:0 0 auto;width:230px;height:230px;opacity:1;
  pointer-events:auto;z-index:2}
.puzzle-fond svg{width:100%;height:100%;overflow:visible}
.pz-forme{fill:var(--beige);stroke:var(--taupe);stroke-width:1.6;stroke-opacity:.6;
  transition:fill .4s var(--ease), fill-opacity .4s var(--ease)}
.pz-mot{font-family:var(--display);font-size:15px;font-weight:600;fill:var(--encre);
  opacity:.62;pointer-events:none;transition:fill .4s var(--ease), opacity .4s var(--ease)}
.pz-coins{stroke:var(--laiton);stroke-width:2.6;fill:none;opacity:0;
  transition:opacity .3s var(--ease)}
/* animation EN BOUCLE : désintégration -> intégration -> ... */
.puzzle-piece{transform-box:fill-box;transform-origin:center;
  animation:puzzle-cycle 6s ease-in-out infinite}
.puzzle-piece[data-p="0"]{--dx:-46px;--dy:-40px;--dr:-10deg}
.puzzle-piece[data-p="1"]{--dx:46px;--dy:-40px;--dr:8deg;animation-delay:.12s}
.puzzle-piece[data-p="2"]{--dx:-46px;--dy:40px;--dr:9deg;animation-delay:.24s}
.puzzle-piece[data-p="3"]{--dx:46px;--dy:40px;--dr:-8deg;animation-delay:.36s}
@keyframes puzzle-cycle{
  0%,14%{transform:translate(0,0) rotate(0)}          /* emboîté */
  46%,58%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}  /* désintégré (écarté, toujours visible) */
  90%,100%{transform:translate(0,0) rotate(0)}        /* réintégré */
}
/* au survol d'une pièce : afficher ses coins laiton + teinter la pièce */
.puzzle-piece:hover .pz-coins{opacity:1}
.puzzle-piece:hover .pz-forme{fill:var(--laiton-clair,#C9A96B);fill-opacity:.3}
.puzzle-piece:hover .pz-mot{fill:var(--laiton);opacity:1}
@media (prefers-reduced-motion:reduce){
  .puzzle-piece{transform:none!important;opacity:1;animation:none}
}
@media (max-width:900px){.puzzle-fond{display:none}.hero-titre-puzzle{max-width:none}}

/* ============================================================
   Billets qui tombent dans un wallet (hero estimation)
   ============================================================ */
.section-immeuble .container{position:relative;z-index:2}
.section-immeuble .container > *{max-width:600px}
/* titre + immeuble côte à côte, centrés verticalement */
.section-immeuble .hero-titre-immeuble{display:flex;align-items:center;gap:40px;max-width:1000px}
.hero-titre-immeuble h1{margin:0;flex:1 1 auto}
.immeuble-euros{position:static;flex:0 0 auto;
  width:330px;max-width:42%;height:auto;opacity:.92;pointer-events:none;z-index:1}
.immeuble-euros svg{width:100%;height:100%;overflow:visible}
.imm-bati{fill:var(--blanc);opacity:.55}
.imm-trait{fill:none;stroke:var(--encre);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.imm-toit{fill:var(--encre);fill-opacity:.1}
.imm-fin{fill:none;stroke:var(--taupe);stroke-width:1.2}
.imm-or{fill:none;stroke:var(--laiton);stroke-width:2.2;stroke-linecap:round}
/* euros qui s'envolent de l'immeuble */
.euro-vole{font-family:var(--display);font-weight:700;font-size:30px;fill:var(--laiton);opacity:0;
  text-anchor:middle}
.section-immeuble.immeuble-go .euro-1{animation:euro-monte 2.8s var(--ease) .2s infinite}
.section-immeuble.immeuble-go .euro-2{animation:euro-monte 2.8s var(--ease) 1.1s infinite}
.section-immeuble.immeuble-go .euro-3{animation:euro-monte 2.8s var(--ease) 2s infinite}
@keyframes euro-monte{
  0%{opacity:0;transform:translateY(6px)}
  20%{opacity:1;transform:translateY(-6px)}
  100%{opacity:0;transform:translateY(-135px)}
}
@media (prefers-reduced-motion:reduce){.euro-vole{animation:none!important;opacity:.7}.euro-2,.euro-3{opacity:.4}}
@media (max-width:980px){.immeuble-euros{display:none}.section-immeuble .container > *{max-width:none}.hero-titre-immeuble{max-width:none}}
/* ============================================================
   Zone de points qui grossit sous le curseur (estimation — Pourquoi une estimation fiable)
   ============================================================ */
.section-points{position:relative}
.section-points .container{position:relative;z-index:2}
.points-fond{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;
  background-image:radial-gradient(circle, var(--laiton) 1.5px, transparent 1.8px);
  background-size:26px 26px;background-position:center;opacity:.22}
/* couche de gros points révélée uniquement autour du curseur */
.points-fond::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle, var(--laiton) 3px, transparent 3.4px);
  background-size:26px 26px;background-position:center;
  opacity:0;transition:opacity .3s var(--ease);
  filter:drop-shadow(0 0 4px rgba(168,133,75,.55));
  -webkit-mask:radial-gradient(circle 95px at var(--mx,-300px) var(--my,-300px), #000 0%, rgba(0,0,0,.5) 55%, transparent 78%);
  mask:radial-gradient(circle 95px at var(--mx,-300px) var(--my,-300px), #000 0%, rgba(0,0,0,.5) 55%, transparent 78%)}
.section-points:hover .points-fond::after{opacity:.9}
@media (prefers-reduced-motion:reduce){.points-fond::after{transition:none}}

/* ============================================================
   Fond à rayures qui s'illuminent sous le curseur (estimation — Ce qu'une mauvaise estimation coûte)
   ============================================================ */
.section-rayures{position:relative}
.section-rayures .container{position:relative;z-index:2}
.rayures-fond{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(45deg, rgba(168,133,75,.07) 0 12px, transparent 12px 24px);
  opacity:.9}
/* couche de rayures lumineuses, révélée uniquement autour du curseur */
.rayures-fond::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg, rgba(168,133,75,.55) 0 12px, transparent 12px 24px);
  opacity:0;transition:opacity .3s var(--ease);
  -webkit-mask:radial-gradient(circle 110px at var(--mx,-300px) var(--my,-300px), #000 0%, rgba(0,0,0,.4) 60%, transparent 80%);
  mask:radial-gradient(circle 110px at var(--mx,-300px) var(--my,-300px), #000 0%, rgba(0,0,0,.4) 60%, transparent 80%)}
.section-rayures:hover .rayures-fond::after{opacity:1}
@media (prefers-reduced-motion:reduce){.rayures-fond::after{transition:none}}

/* ============================================================
   Legos de quartiers qui se désintègrent au scroll (estimation — Quartier par quartier)
   ============================================================ */
.section-legos .container{position:relative;z-index:2}
/* legos placés à droite du titre, centrés verticalement */
.titre-avec-legos{display:flex;align-items:center;gap:30px;max-width:1080px}
.titre-avec-legos h2{margin:0;flex:1 1 auto}
.legos-fond{position:static;flex:0 0 auto;width:250px;height:auto;margin-left:24px;
  opacity:.95;pointer-events:none}
.legos-fond svg{width:100%;height:auto;overflow:visible}
.lego rect{fill:var(--laiton-clair,#C9A96B);fill-opacity:.32;stroke:var(--laiton);stroke-width:1.6}
.lego circle{fill:var(--laiton);fill-opacity:.4;stroke:var(--laiton);stroke-width:1}
.lego text{font-family:var(--display);font-size:15px;font-weight:600;fill:var(--encre);opacity:.55}
.lego[data-l="0"] rect{fill:var(--taupe);fill-opacity:.22}
.lego[data-l="2"] rect{fill:var(--taupe);fill-opacity:.22}
.lego[data-l="4"] rect{fill:var(--laiton);fill-opacity:.2}
/* animation EN BOUCLE : désintégration -> réintégration -> ... */
.lego{transform-box:fill-box;transform-origin:center;
  animation:lego-cycle 6s ease-in-out infinite}
.lego[data-l="0"]{--dx:-52px;--dy:34px;--dr:-14deg}
.lego[data-l="1"]{--dx:58px;--dy:14px;--dr:11deg;animation-delay:.1s}
.lego[data-l="2"]{--dx:-44px;--dy:-18px;--dr:-9deg;animation-delay:.2s}
.lego[data-l="3"]{--dx:54px;--dy:-30px;--dr:13deg;animation-delay:.3s}
.lego[data-l="4"]{--dx:-30px;--dy:-56px;--dr:-16deg;animation-delay:.4s}
@keyframes lego-cycle{
  0%,14%{transform:translate(0,0) rotate(0)}        /* assemblé */
  46%,58%{transform:translate(var(--dx),var(--dy)) rotate(var(--dr))}  /* désintégré (écarté, toujours visible) */
  90%,100%{transform:translate(0,0) rotate(0)}      /* réassemblé */
}
@media (prefers-reduced-motion:reduce){.lego{animation:none;opacity:1;transform:none}}
@media (max-width:900px){.legos-fond{display:none}.titre-avec-legos{max-width:none}}

/* ============================================================
   Panneau "Paris 15" qui se plante incliné au scroll (estimation — Une estimation locale)
   ============================================================ */
.section-panneau .entete-section{position:relative;max-width:820px}
.titre-avec-panneau{display:flex;align-items:center;gap:28px}
.titre-avec-panneau h2{margin:0;flex:1 1 auto}
.panneau-paris15{display:inline-block;flex:0 0 auto;width:154px;height:166px;margin:-30px 0;
  transform:translateY(-4px)}
.panneau-paris15 svg{width:100%;height:100%;overflow:visible}
.panneau-poteau{stroke:var(--taupe);stroke-width:5;stroke-linecap:round}
.panneau-plaque rect{fill:var(--encre)}
.panneau-plaque .panneau-bord{fill:none;stroke:var(--laiton-clair,#C9A96B);stroke-width:1.6}
.panneau-plaque text{font-family:var(--display);font-size:22px;font-weight:600;fill:var(--blanc)}
/* la plaque s'ancre (plante) au scroll avec rebond de l'impact */
.panneau-plaque{transform-origin:70px 60px;transform:rotate(0deg);opacity:0}
.panneau-poteau{stroke-dasharray:1;stroke-dashoffset:1}
.section-panneau.panneau-go .panneau-plaque{animation:panneau-ancre 1.2s var(--ease) forwards}
.section-panneau.panneau-go .panneau-poteau{animation:panneau-poteau-dessine .7s var(--ease) .15s forwards}
@keyframes panneau-ancre{
  0%{transform:translateY(-56px) rotate(-3deg);opacity:0}
  30%{opacity:1}
  52%{transform:translateY(8px) rotate(2deg)}    /* impact : enfoncement */
  66%{transform:translateY(-3px) rotate(-4deg)}  /* léger rebond */
  82%{transform:translateY(2px) rotate(-6deg)}
  100%{transform:translateY(0) rotate(-7deg);opacity:1}  /* ancré, incliné */
}
@keyframes panneau-poteau-dessine{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .panneau-plaque{opacity:1;transform:rotate(-7deg);animation:none}
  .panneau-poteau{stroke-dashoffset:0;animation:none}
}
@media (max-width:760px){
  .section-panneau .entete-section{max-width:none}
  .titre-avec-panneau{flex-wrap:wrap}
  .panneau-paris15{margin:8px 0 0}
}

/* ============================================================
   Contrat + signature qui s'effectue au scroll (sections Avis clients)
   ============================================================ */
.section-avis-contrat .container{position:relative;z-index:2}
.contrat-fond{position:absolute;left:56%;right:auto;top:30px;transform:none;
  width:min(22%,230px);height:280px;opacity:.9;pointer-events:none;z-index:1}
.contrat-fond svg{width:100%;height:100%}
.contrat-feuille{fill:var(--blanc);stroke:var(--encre);stroke-width:2;
  filter:drop-shadow(0 14px 28px rgba(20,19,18,.12))}
.contrat-titre{stroke:var(--encre);stroke-width:4;stroke-linecap:round}
.contrat-ligne{stroke:var(--taupe);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.contrat-case{fill:none;stroke:var(--encre);stroke-width:1.8}
.contrat-check{fill:none;stroke:var(--laiton);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
.contrat-baseline{stroke:var(--taupe);stroke-width:1.4;stroke-dasharray:3 3;opacity:.6}
.contrat-signature{fill:none;stroke:var(--laiton);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1}
/* au scroll : la case se coche puis la signature se trace */
.section-avis-contrat.contrat-go .contrat-check{animation:contrat-coche .5s var(--ease) .3s forwards}
.section-avis-contrat.contrat-go .contrat-signature{animation:contrat-signe 1.8s var(--ease) .9s forwards}
@keyframes contrat-coche{to{stroke-dashoffset:0}}
@keyframes contrat-signe{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .contrat-check,.contrat-signature{stroke-dashoffset:0;animation:none}
}
@media (max-width:980px){.contrat-fond{display:none}}

/* ============================================================
   Mètre ruban d'intro qui se déroule sous le titre (hero prix m²)
   ============================================================ */
.metre-intro{max-width:520px;margin:8px 0 22px;overflow:hidden}
.metre-intro svg{width:100%;height:auto;display:block;overflow:visible}
.mi-ruban rect{fill:var(--laiton-clair,#C9A96B);fill-opacity:.3;stroke:var(--laiton);stroke-width:1.5}
.mi-grads line{stroke:var(--laiton);stroke-width:1.4}
.mi-boitier rect{fill:var(--encre);fill-opacity:.9}
.mi-boitier circle{fill:none;stroke:var(--laiton-clair,#C9A96B);stroke-width:2}
/* le ruban se déroule : on le révèle via un clip qui s'élargit de droite à gauche */
.mi-ruban{transform-origin:right center;transform:scaleX(0)}
.reveal.visible ~ .metre-intro .mi-ruban,
.metre-intro.visible .mi-ruban{animation:metre-deroule 1.4s var(--ease) .4s forwards}
/* déclenché simplement au chargement du hero */
.metre-intro .mi-ruban{animation:metre-deroule 1.4s var(--ease) .5s forwards}
@keyframes metre-deroule{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.mi-boitier{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){.mi-ruban{transform:scaleX(1);animation:none}}
@media (max-width:600px){.metre-intro{margin:4px 0 16px}}

/* ============================================================
   Plan de rues qui s'illuminent en boucle (prix m² — Rue par rue)
   ============================================================ */
.rues-illu{max-width:760px;margin:8px auto 6px;opacity:.9}
.rues-illu svg{width:100%;height:auto;display:block}
.rues-illu .ri-fond path{stroke:var(--taupe);stroke-width:1;stroke-opacity:.18}
.rues-illu .ri-rue{stroke:var(--laiton);stroke-width:2.6;stroke-linecap:round;opacity:0;
  animation:rue-brille 6s ease-in-out infinite;animation-delay:calc(var(--i) * 0.7s)}
.rues-illu .ri-pt{fill:var(--laiton);opacity:0;
  animation:rue-pt 6s ease-in-out infinite;animation-delay:calc(var(--i) * 0.7s)}
@keyframes rue-brille{0%,100%{opacity:0}6%{opacity:.9}14%{opacity:0}}
@keyframes rue-pt{0%,100%{opacity:0;r:3}6%{opacity:1;r:6}14%{opacity:0;r:3}}
.rues-hint{text-align:center;font-size:.85rem;color:var(--taupe);font-style:italic;margin:0 0 6px}
@media (prefers-reduced-motion:reduce){.rues-illu .ri-rue,.rues-illu .ri-pt{animation:none;opacity:.3}}
@media (min-width:1100px){.rues-hint{display:none}}

/* ============================================================
   Bulles like + satisfaction — élément séparé, à gauche du contrat (estimation — Avis clients)
   ============================================================ */
.avis-bulles{position:absolute;left:calc(56% + min(22%, 230px) + 14px);top:150px;
  width:92px;height:auto;z-index:3;pointer-events:none}
.avis-bulles svg{width:100%;height:auto;overflow:visible}
.contrat-bulle .bulle-corps{fill:var(--blanc);stroke:var(--encre);stroke-width:1.8;
  filter:drop-shadow(0 6px 14px rgba(20,19,18,.16))}
.bulle-like .bulle-ico{fill:var(--laiton);stroke:none}
.bulle-smile-tete{fill:none;stroke:var(--laiton);stroke-width:2}
.bulle-smile-oeil{fill:var(--laiton)}
.bulle-smile-bouche{fill:none;stroke:var(--laiton);stroke-width:2;stroke-linecap:round}
/* pop-in après la signature, au scroll (chaque bulle depuis son propre centre) */
.contrat-bulle{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .5s var(--ease), transform .6s cubic-bezier(.34,1.56,.64,1)}
.section-avis-contrat.contrat-go .bulle-like{opacity:1;transform:scale(1);transition-delay:2.3s}
.section-avis-contrat.contrat-go .bulle-smile{opacity:1;transform:scale(1);transition-delay:2.6s}
@media (prefers-reduced-motion:reduce){.contrat-bulle{opacity:1;transform:scale(1);transition:none}}
@media (max-width:980px){.avis-bulles{display:none}}

/* ============================================================
   Corps en deux colonnes pour compacter (prix m² — sections quartiers / fixer le prix)
   ============================================================ */
.corps-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px 40px;
  max-width:1000px;margin:28px auto 0;text-align:left;align-items:start}
.corps-2col > p{margin:0}
/* les boutons (div) s'étendent sur toute la largeur, sous les deux colonnes */
.corps-2col > div{grid-column:1 / -1;margin-top:8px}
@media (max-width:760px){
  .corps-2col{grid-template-columns:1fr;gap:14px;max-width:70ch}
}

/* ============================================================
   Deux bulles noire/blanche côte à côte, même format (prix m² — quartiers / fixer le prix)
   ============================================================ */
.bulles-paire{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;
  grid-column:1 / -1;max-width:none;margin:28px 0 0}
.bulle-texte{position:relative;border-radius:20px;padding:26px 28px;
  display:flex;flex-direction:column;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease)}
.bulle-pastille{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;margin-bottom:14px;
  transition:transform .45s var(--ease)}
.bulle-pastille .ico{width:26px;height:26px;fill:none;stroke-width:1.7}
.bulle-texte p{margin:0;line-height:1.6;font-size:1rem}
/* tail de bulle (petit triangle vers le bas) */
.bulle-texte::after{content:"";position:absolute;bottom:-9px;left:44px;width:20px;height:20px;
  transform:rotate(45deg)}
/* bulle noire */
.bulle-noire{background:var(--encre);color:var(--blanc)}
.bulle-noire p{color:rgba(252,251,248,.88)}
.bulle-noire .bulle-pastille{background:rgba(201,169,107,.22)}
.bulle-noire .bulle-pastille .ico{stroke:var(--laiton-clair,#C9A96B)}
.bulle-noire .lien-fleche{color:var(--laiton-clair,#C9A96B)}
.bulle-noire::after{background:var(--encre)}
/* bulle blanche */
.bulle-blanche{background:var(--blanc);color:var(--encre);border:1px solid rgba(20,19,18,.1)}
.bulle-blanche .bulle-pastille{background:var(--beige)}
.bulle-blanche .bulle-pastille .ico{stroke:var(--laiton)}
.bulle-blanche::after{background:var(--blanc);
  border-right:1px solid rgba(20,19,18,.1);border-bottom:1px solid rgba(20,19,18,.1)}
/* survol : soulèvement + ombre + pastille qui réagit */
.bulle-texte:hover{transform:translateY(-7px) scale(1.02)}
.bulle-noire:hover{box-shadow:0 24px 54px rgba(20,19,18,.32)}
.bulle-blanche:hover{box-shadow:0 24px 54px rgba(20,19,18,.13)}
.bulle-texte:hover .bulle-pastille{transform:scale(1.12) rotate(-4deg)}
/* boutons sous les bulles */
.bulles-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:28px}
@media (prefers-reduced-motion:reduce){
  .bulle-texte,.bulle-pastille{transition:none}
  .bulle-texte:hover{transform:none}.bulle-texte:hover .bulle-pastille{transform:none}
}
@media (max-width:760px){.bulles-paire{grid-template-columns:1fr;gap:18px;max-width:70ch}}

/* Remonter un peu les sections "Pourquoi une estimation fiable" et "Ce qu'une mauvaise estimation coûte" */
.section-points,.section-rayures{padding-top:78px}
@media (max-width:680px){.section-points,.section-rayures{padding-top:56px}}

/* Réduire l'espace avant la section "Une estimation locale" (depuis Avis) et sous son titre (panneau agrandi) */
.section-panneau{padding-top:72px}
.section-panneau .entete-section{margin-bottom:22px}
@media (max-width:760px){.section-panneau .panneau-paris15{margin:8px 0 0}}

/* Remonter les séparateurs vectoriels (ornement-titre) tout près de l'intitulé */
.eyebrow + .ornement-titre{margin-top:-13px}

/* Ces deux sections (prix m²) sont un empilement centré, pas une grille 2 colonnes :
   le titre, la grille/jauge se centrent et les bulles occupent toute la largeur */
.section-carte-q .bloc-argument,
.section-jauge .bloc-argument{display:block}
.section-carte-q .entete-section,
.section-jauge .entete-section{max-width:none}

/* ============================================================
   Page Off-market entièrement sombre
   ============================================================ */
.page-sombre{background:var(--encre)}
.page-sombre section{background:transparent;color:var(--blanc)}
.page-sombre section.section-beige{background:transparent}
.page-sombre h2,.page-sombre h3,.page-sombre h4{color:var(--blanc)}
.page-sombre p,.page-sombre li{color:rgba(252,251,248,.74)}
.page-sombre .eyebrow{color:var(--laiton-clair,#C9A96B)}
.page-sombre .lien-fleche{color:var(--laiton-clair,#C9A96B);border-bottom-color:var(--laiton-clair,#C9A96B)}
.page-sombre .lien-fleche:hover{color:#E6D2A2}
.page-sombre .lead{color:rgba(252,251,248,.8)}
.page-sombre .ornement-titre .ligne{stroke:rgba(252,251,248,.5)}
.page-sombre .ornement-titre .pt{fill:rgba(252,251,248,.6)}
/* cartes en sombre */
.page-sombre .carte-avantage{background:rgba(252,251,248,.05);border:1px solid rgba(252,251,248,.12)}
.page-sombre .carte-avantage h3{color:var(--blanc)}
.page-sombre .carte-avantage p{color:rgba(252,251,248,.72)}
/* FAQ en sombre */
.page-sombre .faq-item{background:rgba(252,251,248,.04);border-color:rgba(252,251,248,.12)}
.page-sombre .faq-item:hover{border-color:rgba(201,169,107,.4)}
.page-sombre .faq-item[open]{border-color:rgba(201,169,107,.5)}
.page-sombre .faq-item summary{color:var(--blanc)}
.page-sombre .faq-rep p{color:rgba(252,251,248,.72)}
/* fantômes décoratifs visibles sur fond sombre */
.page-sombre .fantome .trace{stroke:#FCFBF8;opacity:.2}
.page-sombre .fantome .trace-fin{stroke:#FCFBF8;opacity:.14}
.page-sombre .fantome .trace-or{stroke:var(--laiton-clair,#C9A96B);opacity:.5}
.page-sombre .fantome .aplat{fill:#FCFBF8;opacity:.05}

/* Coordonnées mises en avant (remplacement du formulaire) */
.om-contact-direct{max-width:600px;margin:10px auto 0;display:flex;flex-direction:column;
  gap:16px;align-items:center;text-align:center}
.om-coord{display:flex;align-items:center;gap:18px;width:100%;max-width:500px;text-decoration:none;
  background:rgba(252,251,248,.05);border:1px solid rgba(252,251,248,.14);border-radius:16px;
  padding:18px 24px;transition:transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease)}
.om-coord:hover{background:rgba(252,251,248,.09);border-color:rgba(201,169,107,.5);transform:translateY(-2px)}
.om-coord-ico{flex:0 0 auto;width:50px;height:50px;border-radius:14px;background:rgba(201,169,107,.18);
  display:inline-flex;align-items:center;justify-content:center}
.om-coord-ico .ico{width:24px;height:24px;fill:none;stroke:var(--laiton-clair,#C9A96B);stroke-width:1.7}
.om-coord-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.om-coord-txt small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--laiton-clair,#C9A96B)}
.om-coord-txt strong{font-family:var(--display);font-size:1.2rem;color:var(--blanc);font-weight:600;line-height:1.2}
.om-contact-btn{margin-top:8px}
.om-contact-direct .note-confidentielle{margin-top:10px;color:rgba(252,251,248,.55)}
@media (max-width:560px){.om-coord{flex-direction:column;text-align:center;gap:12px}.om-coord-txt{align-items:center}}

/* Bande "valeur / honoraires compétitifs" (page honoraires) */
.hono-valeur{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:44px 0 80px}
.hono-valeur-item{background:var(--beige);border-radius:var(--rad,18px);padding:30px 26px;text-align:center;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.hono-valeur-item:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,19,18,.08)}
.hono-valeur-ico{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;
  border-radius:15px;background:var(--blanc);margin-bottom:14px}
.hono-valeur-ico .ico{width:26px;height:26px;fill:none;stroke:var(--laiton);stroke-width:1.7}
.hono-valeur-item h3{margin:0 0 8px;font-size:1.08rem;color:var(--encre)}
.hono-valeur-item p{margin:0;color:var(--taupe);font-size:.95rem;line-height:1.6}
@media (max-width:820px){.hono-valeur{grid-template-columns:1fr;gap:16px;max-width:560px;margin-left:auto;margin-right:auto}}

/* ============================================================
   Prix au m² par rue : section épinglée (pin) — les colonnes
   glissent horizontalement pendant que la page est figée
   ============================================================ */
.rues-pin-track{position:relative}
.rues-pin-sticky{position:sticky;top:0;height:auto;overflow:hidden;
  display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:0 0 30px}
.rues-pin-sticky .grille-rues{margin:0}
/* Repli (mobile / animations réduites) : défilement horizontal classique, pas de pin */
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .rues-pin-track{height:auto!important}
  .rues-pin-sticky{position:static;height:auto;overflow-x:auto;display:block;
    padding-bottom:16px;scrollbar-width:thin;scrollbar-color:var(--laiton) var(--beige);
    -webkit-overflow-scrolling:touch}
  .rues-pin-sticky::-webkit-scrollbar{height:8px}
  .rues-pin-sticky::-webkit-scrollbar-track{background:var(--beige);border-radius:4px}
  .rues-pin-sticky::-webkit-scrollbar-thumb{background:var(--laiton);border-radius:4px}
  .rues-pin-sticky .grille-rues{margin-top:20px;transform:none!important}
}

/* Contrôles + entête dans la zone épinglée (réduit l'espace vertical) */
.rues-pin-sticky{gap:14px}
.rues-pin-sticky .entete-section{margin-bottom:0;max-width:760px}
.rues-pin-sticky .entete-section p{margin-top:10px}
.rues-controles{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
.rues-controles .rues-hint{margin:0}
.rues-controles-btns{display:flex;gap:10px;flex:0 0 auto}
.rue-nav{width:48px;height:48px;border-radius:50%;border:1px solid var(--laiton);
  background:var(--blanc);color:var(--encre);font-size:1.6rem;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),color .25s var(--ease),opacity .25s var(--ease),border-color .25s var(--ease)}
.rue-nav:hover:not(:disabled){background:var(--laiton);color:var(--blanc)}
.rue-nav:active:not(:disabled){transform:translateY(1px)}
.rue-nav:disabled{opacity:.3;cursor:default;border-color:rgba(168,133,75,.4)}
@media (max-width:760px){
  .rues-controles{flex-direction:column-reverse;align-items:flex-start;gap:12px}
}

/* Illustration des rues : séparateur pleine largeur au-dessus des colonnes (bien plus grande) */
.rues-pin-sticky .rues-illu{max-width:none;width:100%;margin:0 0 14px;opacity:.9}

/* ============================================================
   ILLUSTRATIONS DE FOND — révélation "pinceau" au scroll
   Remplace les anciens SVG .fantome. Pilotées par .decor.visible
   ============================================================ */
.decor .illu-wrap{
  position:absolute;
  pointer-events:none;
  overflow:hidden;
  /* fondu latéral : fond l'illustration dans la page */
  -webkit-mask:linear-gradient(to right,transparent 0%,#000 55%,#000 100%);
          mask:linear-gradient(to right,transparent 0%,#000 55%,#000 100%);
}
.decor .illu-wrap.cote-d{
  -webkit-mask:linear-gradient(to left,transparent 0%,#000 55%,#000 100%);
          mask:linear-gradient(to left,transparent 0%,#000 55%,#000 100%);
}
.decor .illu-wrap .illu-fond{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  -webkit-user-drag:none;
  opacity:.5;
  filter:saturate(.85);
  /* balayage diagonal qui dévoile l'image */
  -webkit-mask-image:linear-gradient(115deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
          mask-image:linear-gradient(115deg,#000 0%,#000 40%,transparent 60%,transparent 100%);
  -webkit-mask-size:250% 100%;
          mask-size:250% 100%;
  -webkit-mask-position:100% 0;
          mask-position:100% 0;
  /* ANIMATION PLUS LENTE + RETARDÉE pour bien voir le balayage */
  transition:-webkit-mask-position 2.8s var(--ease) .35s,
                     mask-position 2.8s var(--ease) .35s,
             opacity 2.2s var(--ease) .35s;
}
.decor .illu-wrap.cote-g .illu-fond{
  -webkit-mask-image:linear-gradient(115deg,transparent 0%,transparent 40%,#000 60%,#000 100%);
          mask-image:linear-gradient(115deg,transparent 0%,transparent 40%,#000 60%,#000 100%);
  -webkit-mask-position:0 0;
          mask-position:0 0;
}
/* déclenchement au scroll (réutilise .decor.visible existant) */
.decor.visible .illu-wrap .illu-fond{ -webkit-mask-position:0 0; mask-position:0 0; }
.decor.visible .illu-wrap.cote-g .illu-fond{ -webkit-mask-position:100% 0; mask-position:100% 0; }
/* variante claire pour fonds sombres/feutrés */
.decor .illu-wrap .illu-fond.clair-illu{ opacity:.34; filter:brightness(1.7) saturate(.4); }

@media (max-width:760px){
  .decor .illu-wrap .illu-fond{ opacity:.3; }
}
@media (prefers-reduced-motion:reduce){
  .decor .illu-wrap .illu-fond{
    transition:none;
    -webkit-mask-image:none !important; mask-image:none !important;
  }
}

/* ============================================================
   Photo portrait de l'agent (page Votre Agent) — cadrage correct
   ============================================================ */
.visuel-cadre--portrait{
  aspect-ratio:4/5;          /* ratio portrait adapté à la photo 900x1100 */
}
.visuel-cadre--portrait img{
  object-fit:cover;
  object-position:50% 22%;   /* cadre sur le visage, pas coupé en haut */
}
@media (max-width:760px){
  .visuel-cadre--portrait{ aspect-ratio:4/5; }
}

/* Centrage homogène de tous les paragraphes liés à la carte (toutes pages) */
.carte-seo-texte, .carte-seo-texte p,
.note-transports,
.panneau-carte .note-transports,
.panneau-carte p{ text-align:center; }
.carte-seo-texte{ margin-left:auto; margin-right:auto; }

/* ============================================================
   Surlignage OR animé + nom de quartier en blanc (hero pages quartiers)
   ============================================================ */
.hero-interne h1 .quartier-surligne{
  position:relative;
  display:inline-block;
  color:var(--blanc);            /* texte du nom en blanc */
  font-weight:600;
  padding:0 .12em;
  z-index:0;
  white-space:nowrap;
}
/* la barre de surlignage dorée, derrière le texte */
.hero-interne h1 .quartier-surligne::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:8%; bottom:8%;
  background:linear-gradient(100deg, #C9A24B 0%, #A8854B 55%, #BE9648 100%);
  border-radius:4px;
  z-index:-1;
  transform-origin:left center;
  transform:scaleX(0);
  animation:surlignage-quartier 1s cubic-bezier(.2,.7,.2,1) .45s forwards;
  box-shadow:0 6px 18px rgba(168,133,75,.28);
}
@keyframes surlignage-quartier{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
/* le texte blanc apparaît progressivement pendant le surlignage */
.hero-interne h1 .quartier-surligne{
  animation:nom-quartier-blanc .9s ease .55s both;
}
@keyframes nom-quartier-blanc{
  from{ color:var(--encre); }
  to{ color:var(--blanc); }
}
@media (prefers-reduced-motion:reduce){
  .hero-interne h1 .quartier-surligne::before{ animation:none; transform:scaleX(1); }
  .hero-interne h1 .quartier-surligne{ animation:none; color:var(--blanc); }
}

/* ============================================================
   Logo cachet XV à droite du titre (pages quartiers)
   disposition flex : titre à gauche, logo à droite, centré verticalement
   ============================================================ */
.titre-logo-ligne{
  display:flex;
  align-items:center;
  gap:clamp(28px, 4vw, 64px);
}
.titre-logo-ligne h1{
  flex:1 1 auto;
  margin:0;
}
.hero-interne .hero-cachet-bg{
  flex:0 0 auto;
  height:clamp(140px, 15vw, 210px);   /* ~ hauteur du titre */
  width:auto;
  opacity:1;
  cursor:pointer;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 14px 32px rgba(20,19,18,.20));
  animation:cachet-entree 1.5s cubic-bezier(.2,.7,.2,1) .2s both;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
@keyframes cachet-entree{
  0%{ opacity:0; transform:scale(.85); }
  100%{ opacity:1; transform:scale(1); }
}
.hero-interne .hero-cachet-bg:hover{
  transform:scale(1.08);
  filter:drop-shadow(0 0 20px rgba(201,162,75,.8)) drop-shadow(0 14px 36px rgba(20,19,18,.26)) brightness(1.08);
}

/* sur écrans étroits, le logo passe sous le titre ou disparait ; ici on le masque dès que c'est serré */
@media (max-width:900px){
  .hero-interne .hero-cachet-bg{ display:none; }
  .titre-logo-ligne{ display:block; }
}
@media (prefers-reduced-motion:reduce){
  .hero-interne .hero-cachet-bg{ animation:none; opacity:1; transform:scale(1); }
  .hero-interne .hero-cachet-bg:hover{ transform:scale(1.05); }
}
/* le contenu du hero passe au-dessus du logo */
.hero-interne > .container,
.hero-interne > *:not(.hero-cachet-bg):not(.decor){ position:relative; z-index:1; }

@media (max-width:900px){
  .hero-interne .hero-cachet-bg{ width:60vw; right:-100px; }
}
@media (prefers-reduced-motion:reduce){
  .hero-interne .hero-cachet-bg{ animation:none; opacity:.10; transform:translateY(-50%) scale(1); }
}

/* Élargir la colonne du hero quartier pour loger le titre + le logo à droite */
.hero-interne .hero-interne-texte:has(.titre-logo-ligne){ max-width:1000px; }
/* le sous-titre et les CTA gardent une largeur de lecture confortable */
.hero-interne-texte:has(.titre-logo-ligne) .hero-interne-sous,
.hero-interne-texte:has(.titre-logo-ligne) .hero-cta,
.hero-interne-texte:has(.titre-logo-ligne) .hero-note{ max-width:620px; }

/* ============================================================
   Animation clé discrète (page vendre-appartement)
   clé fine, descend doucement puis tourne sur son axe vertical
   ============================================================ */
.hero-anim{
  flex:0 0 auto;
  align-self:stretch;
  display:flex;
  align-items:center;
  perspective:800px;           /* pour la rotation 3D sur l'axe vertical */
}
.hero-anim-cle{
  width:clamp(40px, 5vw, 64px);
}
.hero-anim-cle svg{
  height:clamp(150px, 18vw, 240px);
  width:auto;
  display:block;
  overflow:visible;
}
/* descente douce, puis rotation complète sur l'axe vertical (Y) */
.hero-anim-cle .cle-douce{
  transform-box:fill-box;
  transform-origin:center;
  animation:cle-boucle 6.5s ease-in-out .3s infinite;
}
/* cycle : descend (doux) -> pause -> tourne -> pause -> remonte (doux) -> recommence */
@keyframes cle-boucle{
  0%{   opacity:0; transform:translateY(-30px) rotateY(0deg); }
  3%{   opacity:0; transform:translateY(-30px) rotateY(0deg); }
  18%{  opacity:1; transform:translateY(0) rotateY(0deg); }       /* fin descente (longue et douce) */
  32%{  opacity:1; transform:translateY(0) rotateY(0deg); }       /* pause */
  54%{  opacity:1; transform:translateY(0) rotateY(360deg); }     /* rotation complète */
  68%{  opacity:1; transform:translateY(0) rotateY(360deg); }     /* pause */
  85%{  opacity:1; transform:translateY(-30px) rotateY(360deg); } /* remontée (longue et douce) */
  97%{  opacity:0; transform:translateY(-30px) rotateY(360deg); }
  100%{ opacity:0; transform:translateY(-30px) rotateY(360deg); } /* boucle */
}

@media (max-width:900px){
  .hero-anim{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-cle .cle-douce{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   Animation telephone epure (page contact)
   plus large, incline, clavier visible, compose le numero
   ============================================================ */
.hero-anim-tel{
  width:clamp(120px, 15vw, 180px);
  margin-left:-145px;
}
.hero-anim-tel svg{
  height:clamp(165px, 20vw, 270px);
  width:auto;
  display:block;
  overflow:visible;
}
.hero-anim-tel .tel-soft{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(-26px) rotate(-8deg);
  animation:tel-descente 1.6s cubic-bezier(.25,.6,.3,1) .3s forwards;
}
@keyframes tel-descente{
  0%{ opacity:0; transform:translateY(-26px) rotate(-8deg); }
  100%{ opacity:1; transform:translateY(0) rotate(-8deg); }
}
.hero-anim-tel .d, .hero-anim-tel .sep{ opacity:0; }
.hero-anim-tel .d1{ animation:tel-chiffre .01s ease 1.5s forwards; }
.hero-anim-tel .d2{ animation:tel-chiffre .01s ease 1.7s forwards; }
.hero-anim-tel .s1{ animation:tel-chiffre .01s ease 1.8s forwards; }
.hero-anim-tel .d3{ animation:tel-chiffre .01s ease 1.9s forwards; }
.hero-anim-tel .d4{ animation:tel-chiffre .01s ease 2.1s forwards; }
.hero-anim-tel .s2{ animation:tel-chiffre .01s ease 2.2s forwards; }
.hero-anim-tel .d5{ animation:tel-chiffre .01s ease 2.3s forwards; }
.hero-anim-tel .d6{ animation:tel-chiffre .01s ease 2.5s forwards; }
.hero-anim-tel .s3{ animation:tel-chiffre .01s ease 2.6s forwards; }
.hero-anim-tel .d7{ animation:tel-chiffre .01s ease 2.7s forwards; }
.hero-anim-tel .d8{ animation:tel-chiffre .01s ease 2.9s forwards; }
.hero-anim-tel .s4{ animation:tel-chiffre .01s ease 3.0s forwards; }
.hero-anim-tel .d9{ animation:tel-chiffre .01s ease 3.1s forwards; }
.hero-anim-tel .d10{ animation:tel-chiffre .01s ease 3.3s forwards; }
@keyframes tel-chiffre{ to{ opacity:1; } }
.hero-anim-tel .k{ transition:none; }
.hero-anim-tel .k0{ animation:touche-on .4s ease 1.5s; }
.hero-anim-tel .k6{ animation:touche-on .4s ease 1.7s; }
.hero-anim-tel .k1{ animation:touche-on .4s ease 1.9s; }
.hero-anim-tel .k4{ animation:touche-on .4s ease 2.1s; }
.hero-anim-tel .k5{ animation:touche-on .4s ease 2.5s; }
.hero-anim-tel .k3{ animation:touche-on .4s ease 3.1s; }
@keyframes touche-on{
  0%{ stroke:#141312; }
  40%{ stroke:#C9A24B; stroke-width:2; }
  100%{ stroke:#141312; }
}
.hero-anim-tel .tel-appel{
  transform-box:fill-box; transform-origin:center;
  animation:tel-appel-pulse 1.1s ease 3.5s infinite;
}
@keyframes tel-appel-pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

@media (max-width:900px){
  .hero-anim{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-tel *{ animation:none !important; opacity:1 !important; transform:rotate(-8deg) !important; }
}


/* ============================================================
   Animation podium qui monte + logo qui tombe (page meilleure-agence)
   ============================================================ */
.hero-anim-podium{
  width:clamp(150px, 17vw, 220px);
}
.hero-anim-podium svg{
  height:clamp(160px, 19vw, 240px);
  width:auto;
  display:block;
  overflow:visible;
}
/* les marches montent depuis le bas, en séquence */
.hero-anim-podium .marche{
  transform-box:fill-box;
  transform-origin:bottom;
  transform:scaleY(0);
  opacity:0;
}
.hero-anim-podium .m2{ animation:marche-monte .6s cubic-bezier(.3,.8,.4,1) .4s forwards; }
.hero-anim-podium .m3{ animation:marche-monte .6s cubic-bezier(.3,.8,.4,1) .7s forwards; }
.hero-anim-podium .m1{ animation:marche-monte .7s cubic-bezier(.3,.8,.4,1) 1.0s forwards; }
@keyframes marche-monte{
  0%{ transform:scaleY(0); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:scaleY(1); opacity:1; }
}
/* le logo tombe sur la 1ère place après que les marches soient montées */
.hero-anim-podium .podium-logo{
  transform-box:fill-box;
  transform-origin:center;
  transform:translateY(-90px);
  opacity:0;
}
.hero-anim-podium .podium-logo{
  animation:podium-logo-chute 1s cubic-bezier(.5,0,.6,1) 1.8s forwards;
}
@keyframes podium-logo-chute{
  0%{ transform:translateY(-90px) scale(.8); opacity:0; }
  20%{ opacity:1; }
  70%{ transform:translateY(0) scale(1); }
  82%{ transform:translateY(-10px) scale(1.03); }   /* petit rebond */
  92%{ transform:translateY(0) scale(1); }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

@media (max-width:900px){
  .hero-anim-podium{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-podium .marche,.hero-anim-podium .podium-logo{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   Animation médaille qui tombe et entoure le logo (page meilleur-agent)
   ============================================================ */
.hero-anim-medaille{
  width:clamp(140px, 16vw, 200px);
}
.hero-anim-medaille svg{
  height:clamp(165px, 20vw, 260px);
  width:auto;
  display:block;
  overflow:visible;
}
/* le logo apparaît en premier (fondu léger) */
.hero-anim-medaille .med-logo{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  transform:scale(.9);
  animation:med-logo-apparait .7s cubic-bezier(.3,.7,.4,1) .3s forwards;
}
@keyframes med-logo-apparait{
  to{ opacity:1; transform:scale(1); }
}
/* le ruban + la médaille tombent du haut et se posent (le logo "porte" la médaille) */
.hero-anim-medaille .med-ruban,
.hero-anim-medaille .med-pendentif{
  transform-box:fill-box;
  transform-origin:top center;
  opacity:0;
  transform:translateY(-70px);
}
.hero-anim-medaille .med-ruban{
  animation:med-tombe 1.1s cubic-bezier(.45,0,.55,1) 1.0s forwards;
}
.hero-anim-medaille .med-pendentif{
  animation:med-tombe 1.1s cubic-bezier(.45,0,.55,1) 1.05s forwards;
}
@keyframes med-tombe{
  0%{ opacity:0; transform:translateY(-70px); }
  25%{ opacity:1; }
  70%{ transform:translateY(0); }
  82%{ transform:translateY(-7px); }     /* petit rebond du ruban */
  92%{ transform:translateY(0); }
  100%{ opacity:1; transform:translateY(0); }
}
/* l'étoile de la médaille brille à la fin */
.hero-anim-medaille .med-etoile{
  transform-box:fill-box;
  transform-origin:center;
  animation:med-brille 1.2s ease 2.2s;
}
@keyframes med-brille{
  0%,100%{ opacity:1; filter:none; }
  50%{ filter:drop-shadow(0 0 5px rgba(252,251,248,.9)); }
}

@media (max-width:900px){
  .hero-anim-medaille{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-medaille .med-logo,.hero-anim-medaille .med-ruban,.hero-anim-medaille .med-pendentif{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   Animation livre qui s'ouvre en boucle (page guides)
   ============================================================ */
.hero-anim-livre{
  width:clamp(150px, 18vw, 230px);
  margin-left:-80px;          /* rapproché du titre */
  perspective:600px;
}
.hero-anim-livre svg{
  height:clamp(140px, 17vw, 200px);
  width:auto;
  display:block;
  overflow:visible;
}
/* les deux pages s'ouvrent depuis la reliure centrale, en boucle */
.hero-anim-livre .livre-page-g{
  transform-box:fill-box;
  transform-origin:right center;   /* charnière = reliure */
  animation:livre-ouvre-g 4.5s ease-in-out .3s infinite;
}
.hero-anim-livre .livre-page-d{
  transform-box:fill-box;
  transform-origin:left center;
  animation:livre-ouvre-d 4.5s ease-in-out .3s infinite;
}
@keyframes livre-ouvre-g{
  0%{   transform:rotateY(-78deg); }   /* fermé */
  35%{  transform:rotateY(0deg); }     /* ouvert */
  70%{  transform:rotateY(0deg); }     /* reste ouvert */
  100%{ transform:rotateY(-78deg); }   /* se referme -> boucle */
}
@keyframes livre-ouvre-d{
  0%{   transform:rotateY(78deg); }
  35%{  transform:rotateY(0deg); }
  70%{  transform:rotateY(0deg); }
  100%{ transform:rotateY(78deg); }
}
/* les lignes de texte apparaissent quand le livre est ouvert */
.hero-anim-livre .livre-lignes-g,
.hero-anim-livre .livre-lignes-d{
  animation:livre-texte 4.5s ease-in-out .3s infinite;
}
@keyframes livre-texte{
  0%,25%{ opacity:0; }
  40%,68%{ opacity:.5; }
  85%,100%{ opacity:0; }
}

@media (max-width:900px){
  .hero-anim-livre{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-livre .livre-page-g,.hero-anim-livre .livre-page-d{ animation:none; transform:none; }
}

/* ============================================================
   Animation pouce en l'air en boucle (page avis clients)
   ============================================================ */
.hero-anim-pouce{
  width:clamp(130px, 15vw, 200px);
}
.hero-anim-pouce svg{
  height:clamp(155px, 19vw, 240px);
  width:auto;
  display:block;
  overflow:visible;
}
/* la main monte d'un coup puis redescend, en boucle */
.hero-anim-pouce .pouce-main{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:pouce-monte 2.6s cubic-bezier(.3,.7,.4,1) .3s infinite;
}
@keyframes pouce-monte{
  0%{   transform:translateY(14px) scale(.96); }   /* bas */
  20%{  transform:translateY(0) scale(1.03); }      /* monte avec léger sursaut */
  30%{  transform:translateY(0) scale(1); }
  70%{  transform:translateY(0) scale(1); }         /* reste en haut */
  100%{ transform:translateY(14px) scale(.96); }    /* redescend -> boucle */
}
/* les éclats apparaissent au moment où le pouce arrive en haut */
.hero-anim-pouce .pouce-eclat{
  transform-box:fill-box;
  transform-origin:center;
  animation:pouce-eclat 2.6s ease .3s infinite;
}
@keyframes pouce-eclat{
  0%,12%{ opacity:0; transform:scale(.5); }
  22%{ opacity:1; transform:scale(1); }
  40%{ opacity:0; transform:scale(1.2); }
  100%{ opacity:0; }
}

@media (max-width:900px){
  .hero-anim-pouce{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-pouce .pouce-main,.hero-anim-pouce .pouce-eclat{ animation:none; transform:none; opacity:1; }
}

/* ============================================================
   Animation % tres gros + blanc qui retrecit en or (page honoraires)
   ============================================================ */
.hero-anim-sous{
  width:clamp(140px, 16vw, 200px);
}
.hero-anim-sous svg{
  height:clamp(160px, 19vw, 240px);
  width:auto;
  display:block;
  overflow:visible;
}
/* le % demarre tres gros + blanc, retrecit en devenant or, puis boucle */
.hero-anim-sous .signe-pourcent{
  transform-box:fill-box;
  transform-origin:center;
  animation:pourcent-retrecit-or 4.5s ease-in-out .3s infinite;
}
@keyframes pourcent-retrecit-or{
  0%{   transform:scale(1.6); stroke:#FCFBF8; }   /* tres gros + blanc */
  10%{  transform:scale(1.6); stroke:#FCFBF8; }
  55%{  transform:scale(1);   stroke:#C9A24B; }   /* retreci + or */
  85%{  transform:scale(1);   stroke:#C9A24B; }   /* reste */
  100%{ transform:scale(1.6); stroke:#FCFBF8; }   /* revient tres gros + blanc -> boucle */
}
/* la jauge se remplit a mesure que le % retrecit (honoraires maitrises) */
.hero-anim-sous .jauge-niveau{
  transform-box:fill-box;
  transform-origin:bottom;
  animation:jauge-remplit 4.5s ease-in-out .3s infinite;
}
@keyframes jauge-remplit{
  0%{   transform:scaleY(1); }      /* haute au depart (gros %) */
  10%{  transform:scaleY(1); }
  55%{  transform:scaleY(.25); }    /* descend quand le % retrecit */
  85%{  transform:scaleY(.25); }
  100%{ transform:scaleY(1); }      /* boucle */
}

@media (max-width:900px){
  .hero-anim-sous{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-sous .signe-pourcent{ animation:none; transform:scale(1); stroke:#C9A24B; }
  .hero-anim-sous .jauge-niveau{ animation:none; transform:scaleY(1); }
}


/* ============================================================
   PAGES DÉTAILLÉES DES BIENS (annonces)
   ============================================================ */
.bien-hero-prix{
  font-family:var(--display);
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:600;
  color:var(--laiton);
  margin-top:8px;
}
.bien-hero-specs{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  font-size:.95rem; color:var(--blanc); opacity:.85; margin-top:10px;
}
.bien-hero-specs span{ position:relative; }
.bien-hero-specs span:not(:last-child)::after{
  content:"·"; position:absolute; right:-12px; opacity:.5;
}

/* galerie */
.bien-galerie-section{ padding:40px 0; background:var(--blanc); }
.bien-galerie{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.bien-galerie .bien-gal-item{
  border:none; padding:0; cursor:pointer; background:none;
  aspect-ratio:4/3; overflow:hidden; border-radius:8px; position:relative;
}
.bien-galerie .bien-gal-item img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .4s ease;
}
.bien-galerie .bien-gal-item:hover img{ transform:scale(1.06); }
/* première photo plus grande */
.bien-galerie .bien-gal-item[data-index="0"]{
  grid-column:span 2; grid-row:span 2;
}

/* contenu détaillé */
.bien-contenu{
  display:grid; grid-template-columns:1fr 340px; gap:48px; align-items:start;
}
.bien-description h2{ margin-bottom:18px; }
.bien-description h3{ margin:28px 0 14px; font-size:1.15rem; }
.bien-description p{ margin-bottom:14px; line-height:1.7; color:var(--encre); }
.bien-details-liste{
  list-style:none; padding:0; display:flex; flex-direction:column; gap:12px;
}
.bien-details-liste li{
  padding-left:22px; position:relative; line-height:1.6; color:var(--encre);
}
.bien-details-liste li::before{
  content:""; position:absolute; left:0; top:9px;
  width:8px; height:8px; border-radius:50%; background:var(--laiton);
}

/* encadré sticky */
.bien-encadre{ position:sticky; top:100px; }
.bien-encadre-carte{
  background:var(--blanc); border:1px solid var(--beige-fonce);
  border-radius:14px; padding:26px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 12px 40px rgba(20,19,18,.08);
}
.bien-encadre-prix{
  font-family:var(--display); font-size:1.7rem; font-weight:600; color:var(--encre);
}
.bien-meta{ display:flex; flex-direction:column; gap:10px; padding:12px 0; border-top:1px solid var(--beige-fonce); border-bottom:1px solid var(--beige-fonce); }
.bien-meta > div{ display:flex; justify-content:space-between; font-size:.9rem; }
.bien-meta-label{ color:var(--taupe); }
.bien-meta-val{ font-weight:600; color:var(--encre); }
.bien-encadre-carte .btn{ width:100%; text-align:center; justify-content:center; }
.bien-encadre-note{ font-size:.78rem; color:var(--taupe); line-height:1.5; margin-top:4px; }

.bien-retour-section{ padding:40px 0 70px; background:var(--blanc); text-align:center; }

/* lightbox */
.bien-lightbox{
  position:fixed; inset:0; background:rgba(20,19,18,.94); z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.bien-lightbox.actif{ display:flex; }
.bien-lightbox-img{ max-width:90vw; max-height:86vh; object-fit:contain; border-radius:6px; }
.bien-lightbox-fermer{
  position:absolute; top:24px; right:28px; font-size:2.4rem; color:var(--blanc);
  background:none; border:none; cursor:pointer; line-height:1;
}
.bien-lightbox-prec,.bien-lightbox-suiv{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:3rem; color:var(--blanc); background:none; border:none; cursor:pointer;
  padding:0 24px; opacity:.8; transition:opacity .2s;
}
.bien-lightbox-prec:hover,.bien-lightbox-suiv:hover{ opacity:1; }
.bien-lightbox-prec{ left:12px; }
.bien-lightbox-suiv{ right:12px; }

/* photos dans les cartes de la grille biens */
.fiche-photo{ overflow:hidden; padding:0 !important; }
.fiche-photo img.fiche-img{
  width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0;
}
.fiche-photo .badge-statut{ z-index:2; }

@media (max-width:900px){
  .bien-galerie{ grid-template-columns:repeat(2, 1fr); }
  .bien-galerie .bien-gal-item[data-index="0"]{ grid-column:span 2; grid-row:auto; }
  .bien-contenu{ grid-template-columns:1fr; gap:32px; }
  .bien-encadre{ position:static; }
}

/* ============================================================
   Cartes de biens — liens, CTA, biens vendus
   ============================================================ */
.fiche-lien{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
}
.fiche-lien:hover .fiche-img{ transform:scale(1.05); }
.fiche-lien:hover h3{ color:var(--laiton); }
.fiche-photo .fiche-img{ transition:transform .5s ease; }
.fiche-cta{
  margin-top:auto; padding-top:12px;
  font-size:.88rem; font-weight:600; color:var(--laiton);
  transition:gap .2s;
}
.fiche-atouts{
  font-size:.85rem; color:var(--taupe); line-height:1.55; margin-bottom:10px;
}
/* biens vendus : vignette sobre */
.fiche-vendu{ opacity:.92; }
.fiche-photo-vide{
  aspect-ratio:4/3; position:relative;
  background:linear-gradient(150deg,#D9CFBF,#A99B86);
  display:flex; align-items:center; justify-content:center;
}
.fiche-photo-vide .vignette-logo-xv{
  width:64px; height:64px;
  color:rgba(252,251,248,.55);
}
.fiche-prix-vendu{
  font-size:.9rem; color:var(--taupe); font-style:italic; font-weight:500;
}

/* ============================================================
   Panneau "À vendre" planté au sol (page biens à vendre) — flex, sans boucle, hauteur maîtrisée
   ============================================================ */
.hero-anim-panneau{
  flex:0 0 auto;
  width:clamp(150px, 17vw, 220px);
  height:clamp(74px, 8vw, 100px);   /* hauteur dans le flux ~ titre, pour ne pas étirer la ligne */
  position:relative;
  align-self:center;
}
.hero-anim-panneau svg{
  /* le SVG est plus grand que son conteneur et déborde (overflow visible) sans pousser la ligne */
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-70%, -30%);   /* plus à gauche (-70%) et plus bas (-30%) */
  width:clamp(150px, 17vw, 220px);
  height:clamp(180px, 22vw, 280px);
  overflow:visible;
}
/* le panneau tombe et se plante UNE SEULE FOIS (pas de boucle) */
.hero-anim-panneau .panneau-bloc{
  transform-box:fill-box;
  transform-origin:center bottom;
  animation:panneau-plante 1.6s cubic-bezier(.34,1.15,.5,1) .4s both;
}
@keyframes panneau-plante{
  0%{   transform:translateY(-150px); }
  70%{  transform:translateY(0); }
  82%{  transform:translateY(-10px) scaleY(.98); }
  92%{  transform:translateY(0) scaleY(1); }
  100%{ transform:translateY(0); }
}
.hero-anim-panneau .panneau-impact{
  transform-box:fill-box;
  transform-origin:center;
  opacity:0;
  animation:panneau-impact 1.6s ease .4s both;
}
@keyframes panneau-impact{
  0%,58%{ opacity:0; transform:scale(.4); }
  70%{ opacity:1; transform:scale(1); }
  86%,100%{ opacity:0; transform:scale(1.3); }
}

@media (max-width:900px){
  .hero-anim-panneau{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-panneau .panneau-bloc{ animation:none; transform:none; }
  .hero-anim-panneau .panneau-impact{ display:none; }
}

/* ============================================================
   15e arrondissement : forme + point central + lignes (page quartiers) — agrandi, sans boucle
   ============================================================ */
.hero-anim-arr{
  width:clamp(180px, 22vw, 280px);   /* agrandi */
}
.hero-anim-arr svg{
  width:100%; height:auto; display:block; overflow:visible;
}
/* la forme se dessine UNE SEULE FOIS */
.hero-anim-arr .arr-forme{
  stroke-dasharray:780;
  stroke-dashoffset:780;
  animation:arr-trace 2s ease-in-out .4s forwards;
}
@keyframes arr-trace{
  to{ stroke-dashoffset:0; }
}
/* les lignes prolongeant les coins se déploient depuis le centre, une seule fois */
.hero-anim-arr .arr-lignes line{
  stroke-dasharray:200;
  stroke-dashoffset:200;
  animation:arr-ligne 1.1s ease-out forwards;
}
.hero-anim-arr .arr-lignes line:nth-child(1){ animation-delay:1.6s; }
.hero-anim-arr .arr-lignes line:nth-child(2){ animation-delay:1.7s; }
.hero-anim-arr .arr-lignes line:nth-child(3){ animation-delay:1.8s; }
.hero-anim-arr .arr-lignes line:nth-child(4){ animation-delay:1.9s; }
.hero-anim-arr .arr-lignes line:nth-child(5){ animation-delay:2.0s; }
.hero-anim-arr .arr-lignes line:nth-child(6){ animation-delay:2.1s; }
.hero-anim-arr .arr-lignes line:nth-child(7){ animation-delay:2.2s; }
.hero-anim-arr .arr-lignes line:nth-child(8){ animation-delay:2.3s; }
.hero-anim-arr .arr-lignes line:nth-child(9){ animation-delay:2.4s; }
@keyframes arr-ligne{
  to{ stroke-dashoffset:0; }
}
/* le point central apparaît, une seule fois */
.hero-anim-arr .arr-point{
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
  animation:arr-point .5s cubic-bezier(.34,1.4,.5,1) 1.4s forwards;
}
@keyframes arr-point{
  to{ transform:scale(1); }
}

@media (max-width:1100px){
  .hero-anim-arr{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-anim-arr .arr-forme{ animation:none; stroke-dashoffset:0; }
  .hero-anim-arr .arr-lignes line{ animation:none; stroke-dashoffset:0; }
  .hero-anim-arr .arr-point{ animation:none; transform:scale(1); }
}