/* ═══════════════════════════════════════════════════════════════
   RESIDENCE.CSS — gabarit fiches habitat HKH
   Namespace .mp-* · Externalisé depuis residence-essence.html
   Squelette structurel uniquement — zéro craft, zéro reveal animé
   Le craft viendra après gate visuel Founder (Gate-1 → Gate-2)
   ═══════════════════════════════════════════════════════════════ */

/* ── Pass 4.5 — reveals data-reveal-item ─────────────────────── */
[data-reveal-item]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
[data-reveal-item].is-revealed{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  [data-reveal-item]{opacity:1;transform:none;transition:none}
}

/* ══════════════════════════════════════════════════════════════
   S1 — HERO « OBJET-HÉROS » b-stack évolué
   Zénith détouré GRAND centré, DOMINE le 1er écran.
   Sous l'objet : ESSENCE serif monumental + descripteur.
   Bas du viewport : prix dynamique + CTA above-fold <1s.
   Machinerie : mpMastPrice data-model, mpMastTerritory, i18n FR/EN.
   ══════════════════════════════════════════════════════════════ */
.mp-mast{
  /* Valeurs FIGÉES par le Founder via ?hero=1 (2026-06-09) */
  --hero-obj-h:58vh;
  --hero-obj-bottom:29vh;
  --hero-title-shift:-0.39em;
  --hero-title-size:9.3rem;
  position:relative;
  min-height:100dvh;
  background:var(--cream);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(var(--nav-h, 4.5rem) + 2rem) 2.5rem 0;
}
.mp-mast__inner{
  position:relative;
  max-width:1240px;
  width:100%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex:1;
  /* emblem centré + commercial ancré en bas — objet hors-flux (absolute) */
  justify-content:space-between;
  padding-bottom:2.8rem;
  min-height:calc(100dvh - var(--nav-h, 4.5rem) - 2rem);
}

/* Groupe emblème : objet + nom + descripteur
   justify-content:flex-end → pousse le groupe vers le bas (près du trait prix) */
.mp-mast__emblem{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  flex:1;
  justify-content:flex-end;
  padding-top:.4rem;
  padding-bottom:.4rem;
  /* Flex-item cross-axis (align-items:center) = shrink-to-fit par défaut :
     sans borne, le titre (mot long non-coupable) peut dépasser l'espace
     réellement disponible → clippé par .mp-mast{overflow:hidden}. max-width
     ancre le groupe à la largeur réelle de .mp-mast__inner (fix débordement
     mobile SIGNATURE/ESSENCE+, cf. assets/js/hero-title-fit.js). */
  max-width:100%;
  width:100%;
}

/* Zénith détouré — hors-flux (position:absolute), ancré par le BAS.
   Grandit vers le haut sans pousser les éléments flux → prix+CTA restent above-fold.
   z-index:1 → passe DERRIÈRE le titre (z-index:2).
   Piloté par --hero-obj-h et --hero-obj-bottom (outil ?hero=1, 4 sliders). */
.mp-mast__visual{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:var(--hero-obj-bottom,18vh);
  height:var(--hero-obj-h);
  width:auto;
  margin:0;
  pointer-events:none;
  filter:drop-shadow(0 24px 42px rgba(184,115,51,.16));
  z-index:1;
}
.mp-mast__visual picture{
  display:flex;
  height:100%;
  width:auto;
}
.mp-mast__visual img{
  height:100%;
  width:auto;
  display:block;
}

/* H1 ESSENCE — z-index:2 = DEVANT l'objet (qui est à z-index:1, hors-flux).
   --hero-title-shift : translateY piloté par l'outil ?hero=1.
   --hero-title-size  : font-size piloté par l'outil ?hero=1. */
.mp-mast__h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--hero-title-size,8.5rem);
  line-height:.82;
  letter-spacing:-.03em;
  color:var(--dark);
  margin:0;
  white-space:nowrap;
  max-width:100%;
  position:relative;
  z-index:2;
  transform:translateY(var(--hero-title-shift));
}

/* Eyebrow/descripteur — SOUS le nom */
/* Hero résidence centré : typo alignée au canon eyebrow (.66rem/.26em),
   mais centré & sans trait (contexte hero centré, pas masthead gauche). */
.mp-mast__eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--copper-text-light);
  font-weight:400;
}

/* Bloc prix + CTA — ancré en bas du viewport.
   z-index:2 → toujours AU-DESSUS de l'objet hors-flux (z-index:1) : sur mobile
   l'objet (absolute) recouvrait verticalement le prix → prix/CTA passent devant. */
.mp-mast__commercial{
  width:100%;
  position:relative;
  z-index:2;
  border-top:1px solid var(--copper);
  padding-top:1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  flex-wrap:wrap;
}
.mp-mast__price-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  text-align:left;            /* annule le center hérité du masthead — aligne mensualité (pleine largeur) sur le prix */
}
.mp-mast__price-prefix{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mid);
}
/* v2 (2026-09-16 soir) — eyebrow au-dessus de la mensualité : le
   territoire quitte la ligne du comptant (« 128 451 € · Guadeloupe » se
   lisait mal) pour un mot sans verbe, jamais accolé à un montant.
   Même grammaire que .mp-price__lbl, pour un seul motif appris une fois. */
.mp-mast__price-eyebrow{
  display:block;
  font-family:var(--sans);
  font-size:.64rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mid-dk);
  margin-bottom:.45rem;
}
.mp-mast__price-eyebrow .tbtn{color:var(--copper-text-light)}
.mp-mast__price-eyebrow .sep{opacity:.5;margin:0 .12em}
.mp-mast__price-line{
  display:flex;
  align-items:baseline;
  gap:.5rem;
  flex-wrap:wrap;
}
.mp-mast__price-amount{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  color:var(--dark);
  letter-spacing:-.02em;
  transition:opacity .25s ease,transform .25s ease;
}
.mp-mast__price-amount.is-switching{
  opacity:0;
  transform:translateY(-4px);
}
.mp-mast__price-star{
  font-family:var(--sans);
  font-size:.7rem;
  color:var(--copper-text-light);
  vertical-align:super;
  line-height:1;
}
/* Note astérisque — dessous du prix */
.mp-mast__price-note{
  font-family:var(--sans);
  font-size:.62rem;
  color:var(--mid);
  line-height:1.5;
  margin-top:.25rem;
  font-weight:300;
}

/* Méta specs techniques */
.mp-mast__meta-line{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.06em;
  color:var(--mid);
  opacity:.95;
  max-width:16.5rem;       /* ne dépasse jamais la largeur du bouton devis */
  text-align:center;
}

/* CTA devis */
.mp-mast__btn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:1rem 2rem;
  background:var(--dark);
  color:var(--white);
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:400;
  text-decoration:none;
  transition:background .3s ease,padding .3s cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}
.mp-mast__btn::after{
  content:'→';
  color:var(--copper);
  font-size:.95rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .mp-mast__btn:hover{background:var(--mid-dk);padding-right:2.4rem}
  .mp-mast__btn:hover::after{color:var(--white);transform:translateX(.4rem)}
}

/* CTA « Demander un devis » — soulignement copper animé au survol,
   cloné du bouton de contact.html (.ct-submit) : appliqué au héros (S1),
   au prix S6 et à la clôture S7. Cohérence site-wide des CTA devis. */
.mp-mast__btn,.mp-price__btn,.mp-cloture__btn{position:relative}
.mp-mast__btn::before,.mp-price__btn::before,.mp-cloture__btn::before{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;
  background:var(--copper-text-light);transform:scaleX(0);transform-origin:left;
  transition:transform 600ms cubic-bezier(.16,1,.3,1);pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
  .mp-mast__btn:hover::before,.mp-price__btn:hover::before,.mp-cloture__btn:hover::before{transform:scaleX(1)}
}

/* Closure rule animée copper — unique de la page.
   Placée DANS le bloc prix, à gauche : sépare la mensualité (ligne de tête)
   du comptant. Le wrap force sa propre ligne (flex-basis:100%) sans étirer
   le trait, qui reste 64px calé à gauche sous la mensualité. */
.mp-mast__rule-wrap{
  flex-basis:100%;
  display:block;
  margin:.1rem 0 .35rem;
}
.mp-mast__rule{
  display:block;
  width:64px;
  height:1px;
  background:var(--copper);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .7s cubic-bezier(.16,1,.3,1) .25s;
}
.mp-mast__commercial.is-revealed .mp-mast__rule{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .mp-mast__rule{transform:scaleX(1);transition:none}
}

/* ── Responsive largeur ── */
@media(max-width:899px){
  .mp-mast{padding-top:calc(var(--nav-h, 4.5rem) + 1rem)}
  .mp-mast__h1{white-space:normal}
  .mp-mast{--hero-title-size:clamp(3.8rem,18vw,7rem)}
  /* MOBILE/TABLETTE — objet EN FLUX (piloté en LARGEUR). On abandonne le
     position:absolute du desktop (qui, faute de hauteur dispo, laissait trop
     d'espace AU-DESSUS de l'objet et le faisait chevaucher TROP le titre).
     Le groupe objet+titre est CENTRÉ verticalement dans l'espace dispo
     (sous la nav → avant le trait du prix), pas collé en haut. */
  .mp-mast__visual{position:static;width:78vw;max-width:520px;height:auto;margin:0 auto;
    left:auto;bottom:auto;transform:none}
  .mp-mast__visual picture{height:auto;width:100%;display:block}
  .mp-mast__visual img{width:100%;height:auto}
  .mp-mast__emblem{justify-content:center;padding-top:0;padding-bottom:0}
  /* Écart uniforme titre/habitat (Founder 2026-07-14) : rem fixe = MÊME écart px
     sur les 6 modèles (rendus assombris → titre descendu sous l'habitat, lisible). */
  .mp-mast__h1{margin-top:1.6rem;transform:none}
  .mp-mast__commercial{flex-direction:column;align-items:flex-start;gap:1.4rem}
}
@media(max-width:600px){
  .mp-mast{padding-left:1.5rem;padding-right:1.5rem;--hero-title-size:clamp(3rem,19vw,5.2rem)}
  .mp-mast__visual{width:84vw}
  .mp-mast__commercial{padding-top:1.2rem}
}
/* Écrans COURTS (laptops 13–14") : objet se compacte pour garder
   prix + CTA above-fold (règle dure < 1 s). N'affecte pas les grands écrans.
   L'objet étant hors-flux (absolute), on réduit --hero-obj-h sans risque de push. */
@media(max-height:820px) and (min-width:601px){
  .mp-mast{padding-top:calc(var(--nav-h, 4.5rem) + .5rem);--hero-obj-h:54vh;--hero-obj-bottom:16vh;--hero-title-size:clamp(3.6rem,9.5vw,6.4rem)}
  .mp-mast__inner{padding-bottom:1.4rem}
  .mp-mast__emblem{padding-top:0;padding-bottom:.2rem}
}
@media(max-height:680px) and (min-width:601px){
  .mp-mast{--hero-obj-h:42vh;--hero-obj-bottom:12vh;--hero-title-size:clamp(3.1rem,7.5vw,5.2rem)}
  .mp-mast__inner{padding-bottom:1rem}
}

/* ══════════════════════════════════════════════════════════════
   S2 — USAGES .mp-usages · S2·③ Linteau (direction Founder 2026-06-09)
   Plein-bleed photo · contenu ancré en bas SUR l'image
   Dégradé-nuit bas 45-55% (lisibilité) · filet copper structurant
   ZÉRO scrim noir · ZÉRO backdrop-filter · textes seuls se révèlent
   ══════════════════════════════════════════════════════════════ */
.mp-usages{
  position:relative;
  /* Photo AGRANDIE (Founder passe 8) : plus de hauteur = photo immersive en haut
     + vraie place pour la zone sombre franche du bas où vit le texte. */
  min-height:94vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Photo R0 — fond couvrant, object-fit:cover, aucun reveal */
.mp-usages__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.mp-usages__bg picture,
.mp-usages__bg img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 40%;
}

/* Overlay — ancré en bas, porte le contenu + dégradé */
/* DÉGRADÉ SOMBRE FRANC au niveau de la SECTION (Founder passe 8, 6ᵉ tour) :
   couvre le BAS de l'image — photo immersive en haut → s'assombrit NETTEMENT
   vers le bas où vit TOUT le texte (titre + usages) = lisible (contraste mesuré).
   Teinte dark warm profonde rgba(16,14,11) — JAMAIS #000, progressif (pas un rectangle). */
.mp-usages::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(16,14,11,.96)  0%,
    rgba(16,14,11,.93) 24%,
    rgba(16,14,11,.87) 40%,
    rgba(16,14,11,.62) 52%,
    rgba(16,14,11,.30) 64%,
    rgba(16,14,11,.08) 76%,
    rgba(16,14,11,0)   88%);
}

/* Bloc contenu — AU-DESSUS du dégradé section (z-2), ancré en bas */
.mp-usages__overlay{
  position:relative;
  z-index:2;
  width:100%;
}

/* Linteau : filet copper structurant ENTRE la zone claire et le bloc contenu */
.mp-usages__linteau{
  max-width:1240px;
  margin:0 auto;
  width:100%;
  padding:3.2rem 2.5rem 5rem;
  /* filet copper structurant en haut du bloc contenu — ligne de cote charte */
  border-top:1px solid rgba(184,115,51,.65);
}

/* Eyebrow — copper warm, trait+dot, au-dessus du filet */
.mp-usages__eyebrow{margin-bottom:1.4rem;}

/* H2 — serif weight 400, clamp, cream, text-shadow léger, em italic copper
   SUR le dégradé → lisible sur la zone gradient (titre JAMAIS sur zone claire nue) */
.mp-usages__h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,5vw,3.8rem);
  color:var(--cream, #F4EFE6);
  line-height:1.06;
  letter-spacing:-.025em;
  margin:0 0 2.4rem;
  text-shadow:0 1px 12px rgba(28,24,18,.45);
}
.mp-usages__h2 em{
  font-style:italic;
  color:var(--copper-lt, #C98A4B);
}

/* Grille 3 usages — lisibles dans la zone gradient */
.mp-usages__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2.4rem;
}
.mp-usage{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  position:relative;
  padding-top:1.1rem;
}
/* Marqueur cuivre court — 3 cartes PARALLÈLES (pas une suite : aucun numéro).
   Le filet signale des alternatives de même rang. Founder 2026-06-11. */
.mp-usage::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:1.8rem;height:1px;
  background:rgba(184,115,51,.55);
}
.mp-usage__title{
  font-family:var(--sans);
  font-weight:400;
  font-size:1.18rem;
  color:#EDE7DC;
  margin:0;
  line-height:1.28;
}
.mp-usage__desc{
  font-family:var(--sans);
  font-weight:300;
  font-size:.94rem;
  color:rgba(237,231,220,.85);
  line-height:1.62;
  margin:0;
}

@media(max-width:900px){
  /* MOBILE/TABLETTE — on DISSOCIE photo et texte (fini le compromis dégradé qui
     soit noyait le texte, soit effaçait la photo · Founder 2026-06-11) :
     la photo reste PROPRE en bandeau haut, le contenu passe sur un panneau
     dark PLEIN dessous → photo visible ET texte 100 % lisible. */
  .mp-usages{min-height:0;display:block;background:#100E0B}
  .mp-usages__bg{position:relative;height:46vh;z-index:0}
  /* dégradé réduit au fondu BAS du bandeau photo vers le panneau dark (couture nette) */
  .mp-usages::after{
    inset:0 0 auto 0;height:46vh;
    background:linear-gradient(to bottom,
      rgba(16,14,11,0)  56%,
      rgba(16,14,11,.5) 82%,
      #100E0B          100%);
  }
  .mp-usages__overlay{background:#100E0B}
  .mp-usages__grid{grid-template-columns:1fr;gap:1.8rem}
  .mp-usages__linteau{padding:2.6rem 1.5rem 3.6rem}
}
@media(max-width:600px){
  .mp-usages__bg{height:40vh}
  .mp-usages::after{height:40vh}
  .mp-usages__linteau{padding:2.4rem 1.5rem 3.2rem}
  .mp-usages__h2{font-size:clamp(2rem,8vw,3rem)}
}

/* ══════════════════════════════════════════════════════════════
   S4 — EXPLORATEUR PLAN↔PHOTO SYNCHRONISÉ .mp-plan
   Fond var(--paper) clair · 2 colonnes : plan gauche, photo droite
   POI plan ↔ grande photo ↔ miniatures : état partagé
   Bouton 360 → pano-integration.js via #mpVisitOpen
   ══════════════════════════════════════════════════════════════ */
.mp-plan{
  padding:7rem 2.5rem;
  background:var(--paper);
  position:relative;
}
.mp-plan__inner{
  max-width:1240px;
  margin:0 auto;
}
.mp-plan__head{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:5rem;
  align-items:end;
  margin-bottom:4.5rem;
}
.mp-plan__col-text{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}
.mp-plan__lbl{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--copper-text-light);
  border-top:1px solid rgba(184,115,51,.3);
  padding-top:1.1rem;
  align-self:flex-start;
  margin:0;
}
.mp-plan__head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.4rem,4.4vw,3.6rem);
  color:var(--dark);
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0;
}
.mp-plan__head h2 em{
  font-style:italic;
  color:var(--copper-text-light);
}
.mp-plan__sub{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1rem,1.4vw,1.15rem);
  color:var(--mid);
  line-height:1.65;
  max-width:42ch;
  margin:0;
}

/* Explorateur 2 colonnes : plan gauche 1fr · viewer droite 1fr (équilibre) */
.mp-plan__explorer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  /* start (et NON stretch) : la colonne plan garde le ratio NATUREL de l'image du plan.
     stretch l'étirait → l'image (object-fit) et le SVG overlay se désalignaient
     (SVG centré dans une colonne trop haute) → hotspots faux, surtout en mobile. */
  align-items:start;
}
/* min-width:0 → empêche le contenu (filmstrip miniatures) de gonfler la colonne
   (grid blowout) : colonnes vraiment 50/50 (équilibre plan↔photo) + les miniatures
   DÉBORDENT leur colonne → scroll horizontal réel + fade. */
.mp-plan__explorer > *{min-width:0}
.mp-plan__svg-wrap{
  width:100%;
}

/* Plan SVG interactif — fond blanc (vit directement sur le fond paper de la section) */
.mp-plan__svg-wrap{
  position:relative;
  background:transparent;
  overflow:hidden;
  border:none;
}
.mp-plan__svg-wrap picture,
.mp-plan__svg-wrap img{
  display:block;
  width:100%;
  height:auto;
  opacity:.75;
}
.mp-plan__svg-wrap svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* Zones interactives — contour copper sur fond clair */
.rz{
  fill:rgba(184,115,51,.0);
  stroke:rgba(184,115,51,.35);
  stroke-width:1;
  stroke-dasharray:3 3;
  cursor:pointer;
  transition:fill .3s ease,stroke .3s ease,stroke-width .3s ease,stroke-dasharray .3s ease;
}
@media(hover:hover) and (pointer:fine){
  .rz:hover{fill:rgba(184,115,51,.12);stroke:rgba(184,115,51,.72);stroke-width:1.2;stroke-dasharray:none}
}
.rz.is-active{fill:rgba(184,115,51,.18);stroke:var(--copper);stroke-width:1.6;stroke-dasharray:none}
/* Retire l'anneau de focus UA bleu/violet au CLIC souris ; indicateur copper
   réservé à la navigation CLAVIER (focus-visible) pour l'accessibilité. */
.rz:focus{outline:none}
.rz:focus-visible{outline:none;fill:rgba(184,115,51,.18);stroke:var(--copper);stroke-width:1.8;stroke-dasharray:none}
/* ── Mode CALIBRAGE hotspots (gated ?calibrate=1) — invisible aux visiteurs ── */
.mp-plan__svg-wrap.is-calibrating .rz{fill:rgba(224,168,103,.14);stroke:#E0A867;stroke-width:1.6;stroke-dasharray:none;cursor:move}
.rz-handle{fill:#E0A867;stroke:#161512;stroke-width:1.2;cursor:nwse-resize}
.rz-calib-panel{position:fixed;bottom:1rem;left:1rem;z-index:99999;background:rgba(22,21,18,.96);color:#EDE7DC;padding:.9rem 1.1rem;border:1px solid #4a443a;border-radius:6px;font:12px/1.7 ui-monospace,monospace;max-width:92vw;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.rz-calib-read{margin-bottom:.7rem;white-space:nowrap}
.rz-calib-copy{background:#E0A867;color:#161512;border:none;padding:.5rem 1rem;border-radius:3px;cursor:pointer;font:inherit;font-weight:600}
.rz-calib-hint{opacity:.7;margin-top:.5rem;font-size:11px}
.rz-lbl{
  font-family:'Jost',sans-serif;
  font-size:7px;
  fill:rgba(44,44,40,.45);
  pointer-events:none;
  text-anchor:middle;
  dominant-baseline:middle;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:400;
}
.rz-lbl.is-active{fill:var(--copper);font-weight:600}

/* Viewer droite — colonne photo + miniatures + bouton */
.mp-plan__viewer{
  display:flex;
  flex-direction:column;
  gap:1rem;
}

/* Grande photo pleine largeur — photo-row = simple wrapper, chevrons absolus dans wrap */
.mp-plan__photo-row{
  position:relative;
  width:100%;
}

/* Grande photo active — prend TOUTE la largeur de la colonne droite.
   Chevrons en position:absolute inside → photo non rognée. */
.mp-plan__photo-wrap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--cream-dk);
  cursor:pointer;
}
.mp-plan__photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
}
.mp-plan__photo.is-active{display:block}
.mp-plan__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:opacity .3s ease;
}

/* Overlay play ▶ — centré, pointer-events:none (clic passe au wrap) */
.mp-plan__play-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  z-index:2;
  transition:opacity .25s ease;
}
.mp-plan__play-circle{
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(22,21,18,.55);
  border:1px solid rgba(184,115,51,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease,transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease;
  /* léger décalage optique du triangle ▶ vers la droite */
  padding-left:2px;
}
@media(hover:hover) and (pointer:fine){
  .mp-plan__photo-wrap:hover .mp-plan__play-circle{
    background:rgba(22,21,18,.72);
    border-color:var(--copper);
    transform:scale(1.03);
  }
}

/* Miniatures — wrapper relatif pour le fade affordance */
.mp-plan__thumbs-wrap{
  position:relative;
  overflow:hidden;
}
/* Fade droit (et gauche conditionnel via JS .has-scroll-left) — signale le débordement */
.mp-plan__thumbs-wrap::after{
  content:'';
  position:absolute;
  top:0;right:0;bottom:0;
  width:3rem;
  background:linear-gradient(to right, transparent, var(--paper));
  pointer-events:none;
  z-index:2;
  transition:opacity .3s ease;
}
.mp-plan__thumbs-wrap.is-scrolled-end::after{opacity:0}
.mp-plan__thumbs-wrap::before{
  content:'';
  position:absolute;
  top:0;left:0;bottom:0;
  width:3rem;
  background:linear-gradient(to left, transparent, var(--paper));
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .3s ease;
}
.mp-plan__thumbs-wrap.has-scroll-left::before{opacity:1}

/* Miniatures — filmstrip scroll horizontal, 1 seule ligne (scalable N images).
   Miniatures 180px × 5 ≈ 932px > colonne 596px (grille équilibrée, min-width:0)
   → débordement garanti → vrai scroll + fade latéral. Scrollbar fine copper.
   PAS de scroll-snap : il re-snappe et ANNULE le recentrage programmatique
   (centerThumb) + les assignations scrollLeft (molette). */
.mp-plan__thumbs{
  display:flex;
  flex-wrap:nowrap;
  gap:.5rem;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  /* scrollbar discrète : fine + copper sur track sombre */
  scrollbar-width:thin;
  scrollbar-color:rgba(184,115,51,.45) rgba(22,21,18,.18);
  padding-bottom:3px;
}
.mp-plan__thumbs::-webkit-scrollbar{height:3px}
.mp-plan__thumbs::-webkit-scrollbar-track{background:rgba(22,21,18,.15);border-radius:2px}
.mp-plan__thumbs::-webkit-scrollbar-thumb{background:rgba(184,115,51,.4);border-radius:2px}
.mp-plan__thumb{
  position:relative;
  /* Largeur fixe : 5 × 180 + gaps ≈ 932px > colonne 872px → DÉBORDE → filmstrip
     qui DÉFILE (scalable pour les modèles à beaucoup d'images) → fade + scroll actifs. */
  flex:0 0 180px;
  aspect-ratio:3/2;
  overflow:hidden;
  border:1px solid transparent;
  background:var(--cream-dk);
  cursor:pointer;
  padding:0;
  transition:border-color .22s ease,opacity .22s ease,box-shadow .22s ease;
  opacity:.55;
}
/* État actif renforcé : border 2px copper + ring extérieur copper + opacité pleine
   → sélection très visible même à côté des inactifs à .55 */
.mp-plan__thumb.is-active{
  border:2px solid var(--copper);
  box-shadow:0 0 0 2px rgba(184,115,51,.3);
  opacity:1;
}
@media(hover:hover) and (pointer:fine){
  .mp-plan__thumb:hover{border-color:rgba(184,115,51,.55);opacity:.88}
}
.mp-plan__thumb picture,
.mp-plan__thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Bandeau pièce — plus sobre, trait copper fin, fond sombre dense */
.mp-plan__thumb-lbl{
  position:absolute;
  bottom:0;left:0;right:0;
  background:rgba(22,21,18,.82);
  border-top:1px solid rgba(184,115,51,.35);
  color:rgba(237,231,220,.9);
  font-family:var(--sans);
  font-size:.5rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:.28rem .5rem;
  text-align:left;
}
.mp-plan__thumb.is-active .mp-plan__thumb-lbl{
  border-top-color:var(--copper);
  color:#EDE7DC;
}
.mp-plan__thumb:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px var(--copper);
}

/* Chevrons prev/next — position:absolute dans .mp-plan__photo-wrap
   Verticalement centrés, flanquant la photo côté gauche et droit.
   Style chevron fin minimaliste : SVG stroke, fond très discret, hover copper.
   Stopproppagation dans le JS → le clic chevron ne déclenche PAS le tour 360. */
.mp-plan__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:44px;
  background:rgba(22,21,18,.28);
  border:none;
  color:rgba(237,231,220,.82);
  cursor:pointer;
  padding:0;
  transition:color .22s ease,background .22s ease,transform .22s ease;
}
.mp-plan__nav--prev{ left:.6rem; }
.mp-plan__nav--next{ right:.6rem; }
.mp-plan__nav svg{ display:block; flex-shrink:0; }
@media(hover:hover) and (pointer:fine){
  .mp-plan__nav:hover{
    color:var(--copper);
    background:rgba(22,21,18,.52);
    transform:translateY(-50%) scale(1.02);
  }
}
.mp-plan__nav:focus-visible{outline:none;box-shadow:0 0 0 2px var(--copper)}

/* CTA visite 360° — sobre, charte copper/dark, z-index explicite */
.mp-plan__cta-wrap{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:1.6rem;
  flex-wrap:wrap;
  position:relative;
  z-index:4;
  pointer-events:auto;
  margin-top:2rem;
  border-top:1px solid rgba(184,115,51,.2);
  padding-top:1.4rem;
}
/* Bouton ghost gravé cuivre — cloné du CTA signature de visite-virtuelle.html
   (.vv-rallume__cta) pour cohérence site-wide : transparent, bordure cuivre,
   texte dark gravé, remplissage dark par le bas au hover, flèche copper. */
.mp-plan__cta{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.8rem;
  font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dark);background:transparent;border:1.5px solid var(--copper-text-light);
  cursor:pointer;text-decoration:none;padding:.95rem 1.9rem;
  transition:color .3s ease,border-color .3s ease;
  z-index:4;pointer-events:auto;
}
.mp-plan__cta::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--dark);transform:scaleY(0);transform-origin:bottom;
  transition:transform .42s cubic-bezier(.16,1,.3,1);
}
/* A · Lecteur gravé — play ▶ dans un cercle gravé fin (remplace la flèche →).
   Écho au play de la grande photo : même triangle, deux densités. */
.mp-plan__cta-play{
  width:26px;height:26px;flex-shrink:0;padding-left:1px;
  border:1.2px solid var(--copper-text-light);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .3s ease;
}
.mp-plan__cta-play svg polygon{fill:var(--copper);transition:fill .3s ease}
.mp-plan__cta:active{transform:translateY(1px)}
@media(hover:hover) and (pointer:fine){
  .mp-plan__cta:hover{color:var(--paper);border-color:var(--dark)}
  .mp-plan__cta:hover::before{transform:scaleY(1)}
  .mp-plan__cta:hover .mp-plan__cta-play{border-color:var(--paper)}
  .mp-plan__cta:hover .mp-plan__cta-play svg polygon{fill:var(--paper)}
}
.mp-plan__cta:focus-visible{outline:none;box-shadow:0 0 0 2px var(--copper)}
.mp-plan__scene-count{
  font-family:var(--serif);
  font-style:italic;
  font-size:.78rem;
  color:var(--mid);
}


@media(max-width:1024px){
  .mp-plan__head{grid-template-columns:1fr;gap:1.4rem}
  .mp-plan__explorer{grid-template-columns:1fr;gap:2rem}
}
@media(max-width:600px){
  .mp-plan{padding:5rem 1.5rem}
  /* thumbs mobile : légèrement plus étroites, scroll reste fonctionnel */
  .mp-plan__thumb{flex:0 0 120px}
  /* chevrons mobile : légèrement plus étroits, toujours centrés verticalement */
  .mp-plan__nav{width:26px;height:36px}
}

/* ══════════════════════════════════════════════════════════════
   LIGHTBOX 360° .mp-player (Pannellum)
   ══════════════════════════════════════════════════════════════ */
.mp-player{
  position:fixed;
  inset:0;
  z-index:9999;
  background:radial-gradient(ellipse at center,#0A0A09 0%,var(--dark) 70%);
  opacity:0;
  visibility:hidden;
  transition:opacity .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s;
  display:flex;
  flex-direction:column;
  padding:5rem 4rem 4rem;
}
.mp-player.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .32s cubic-bezier(.16,1,.3,1);
}
.mp-player__overlay{position:absolute;inset:0;cursor:pointer;z-index:0}
.mp-player__head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.8rem;
  gap:2rem;
}
.mp-player__title-wrap{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.mp-player__lbl{
  font-family:var(--sans);
  font-size:.6rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  display:inline-flex;
  align-items:center;
  gap:.9rem;
}
.mp-player__lbl::before{content:'';width:1.4rem;height:1px;background:var(--copper)}
.mp-player__title{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  color:var(--white);
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mp-player__title em{color:var(--copper);font-style:italic}
.mp-player__close{
  flex-shrink:0;
  width:44px;height:44px;
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color:var(--white);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
  font-family:var(--sans);
  font-size:1.4rem;
  line-height:1;
  padding:0;
}
@media(hover:hover) and (pointer:fine){
  .mp-player__close:hover{border-color:var(--copper);background:rgba(184,115,51,.08);transform:rotate(90deg)}
}
.mp-player__close:focus-visible{outline:1px solid var(--copper);outline-offset:3px}
.mp-player__stage{
  position:relative;
  z-index:2;
  flex:1;
  min-height:0;
  background:var(--dark);
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
  transform:scale(.96);
  opacity:0;
  transition:transform .42s cubic-bezier(.16,1,.3,1) .08s,opacity .42s ease-out .08s;
}
.mp-player.is-open .mp-player__stage{transform:scale(1);opacity:1}
.mp-player__foot{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.6rem;
  gap:2rem;
  flex-wrap:wrap;
}
.mp-player__cta{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  font-weight:400;
  padding:.7rem 0;
  transition:color .25s ease,gap .25s ease;
}
.mp-player__cta::after{content:'→';color:var(--copper);transition:transform .3s cubic-bezier(.16,1,.3,1)}
@media(hover:hover) and (pointer:fine){
  .mp-player__cta:hover{color:var(--white);gap:1.4rem}
  .mp-player__cta:hover::after{transform:translateX(.4rem)}
}
.mp-player__hint{
  font-family:var(--serif);
  font-style:italic;
  font-size:.78rem;
  color:rgba(255,255,255,.42);
}
body.mp-player-locked{overflow:hidden}

/* ── Repli plein écran CSS (iOS ne permet pas l'API Fullscreen) ──────────
   .mp-player est déjà fixed/inset:0, mais chromé (padding, titre, pied) :
   le repli étend le stage à tout le viewport et éclipse ce chrome, sauf
   le bouton fermer (déplacé à gauche pour ne pas chevaucher les contrôles
   Pannellum, ancrés à droite). Sortie : même bouton, Échap, ou ce bouton
   fermer — cf. assets/js/pano-immersive.js. */
.mp-player--immersive{padding:0}
.mp-player--immersive .mp-player__stage{
  position:fixed;inset:0;z-index:3;border:0;transform:none;opacity:1;
}
.mp-player--immersive .mp-player__head{
  position:fixed;top:0;left:0;right:auto;z-index:4;
  margin:0;padding:1rem 1.2rem;justify-content:flex-start;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent);
}
.mp-player--immersive .mp-player__title-wrap,
.mp-player--immersive .mp-player__hint{display:none}
.mp-player--immersive .mp-player__foot{display:none}

body.hkh-tour-immersive-lock{overflow:hidden}

@media(max-width:900px){
  .mp-player{padding:3rem 1.4rem 2rem}
  .mp-player__head{flex-direction:row;gap:1rem;margin-bottom:1rem}
  .mp-player__title{font-size:1.2rem}
  .mp-player__foot{flex-direction:column;align-items:flex-start;gap:.8rem;margin-top:1rem}
  .mp-player__hint{display:none}
}
@media(max-width:560px){
  .mp-player{padding:2.5rem .9rem 1.4rem}
  .mp-player__lbl{font-size:.52rem}
}
/* Cadre lightbox mobile — le vrai levier contre le fisheye n'est pas l'optique
   (cf. pano-fov-guard.js) mais le RATIO du cadre : le rembourrage latéral
   hérité du desktop rendait le stage étroit/vertical, ce qui empêchait le
   plafond hfov (~50°, jamais plus bas — en dessous, rendu téléobjectif,
   contraire au but d'une visite d'habitat) d'atteindre la cible de confort.
   On supprime le rembourrage latéral (le stage va bord à bord) ; le
   rembourrage revient sur le header/footer pour ne pas coller leur contenu
   à l'écran. Mesuré : 390×844 ouvert passe de ratio 0.54 (vfov capé 81.6°)
   à ratio ≈0.73 (vfov capé sous 75°) — cf. commentaire d'exception plus bas
   pour le cas immersif portrait, qui reste hors d'atteinte (géométrie pure). */
@media(max-width:600px){
  .mp-player{padding:2.2rem 0 1.4rem}
  .mp-player__head{padding:0 .9rem}
  .mp-player__foot{padding:0 .9rem}
}

/* ══════════════════════════════════════════════════════════════
   S5 — INCLUS .mp-inclus · S5·c diptyque valeur
   Fond dark (#201F1B) — rupture dark S5 entre S4 (paper clair) et S6 (cream-dk)
   Rythme global : S1 cream → S2 dark → S4 paper → S5 dark → S6 cream-dk → S7 dark+photo
   Textes cream/copper sur fond sombre.
   ══════════════════════════════════════════════════════════════ */
.mp-inclus{
  padding:7rem 2.5rem;
  background:#201F1B;
  position:relative;
}
.mp-inclus__inner{
  max-width:1240px;
  margin:0 auto;
}

/* Diptyque : col message (gauche) + col relevé (droite) */
.mp-inclus__diptyque{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:4.5rem;
  align-items:start;
}
.mp-inclus__col-msg{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  padding-top:0;
}
.mp-inclus__lbl{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(224,168,103,.85);
  border-top:1px solid rgba(184,115,51,.35);
  padding-top:1.1rem;
  display:inline-block;
  margin:0;
}
.mp-inclus__col-msg h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem,4vw,3.2rem);
  color:#EDE7DC;
  line-height:1.04;
  letter-spacing:-.025em;
  margin:0;
}
.mp-inclus__col-msg h2 em{font-style:italic;color:var(--copper)}
.mp-inclus__intro{
  font-family:var(--sans);
  font-weight:300;
  font-size:.9rem;
  color:rgba(237,231,220,.65);
  line-height:1.7;
  max-width:30ch;
  margin:0;
}

/* Relevé colonne droite — 12 postes empilés, fond dark */
.mp-inclus__releve{
  border-top:1px solid rgba(237,231,220,.1);
}
.inc-row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:1.2rem;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(237,231,220,.08);
  align-items:baseline;
}
.inc-row__cat{
  font-family:var(--sans);
  font-size:.58rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(224,168,103,.75);
  font-weight:400;
}
.inc-row__val{
  font-family:var(--sans);
  font-weight:300;
  font-size:.9rem;
  color:rgba(237,231,220,.88);
  line-height:1.55;
}

@media(max-width:900px){
  .mp-inclus__diptyque{grid-template-columns:1fr;gap:3rem}
  .mp-inclus__intro{max-width:none}
}
@media(max-width:600px){
  .mp-inclus{padding:5rem 1.5rem}
  .inc-row{grid-template-columns:100px 1fr}
}

/* ══════════════════════════════════════════════════════════════
   S6 — PRIX .mp-price · S6·a comptoir prix monument
   Fond cream-dk (≠ paper S5 — coupe la platitude paper/paper)
   Folio « 20 » filigrane · prix monument serif · rule copper
   Garde id="modelPrice" data-model="essence" pour prices.js
   ══════════════════════════════════════════════════════════════ */
.mp-price{
  padding:7rem 2.5rem;
  background:var(--cream-dk);
  position:relative;
  overflow:hidden;
}
.mp-price__inner{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:3rem;
}

/* Folio filigrane architectural */
.mp-price__folio{
  position:absolute;
  right:0;
  top:-1.5rem;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(6rem,18vw,14rem);
  color:transparent;
  -webkit-text-stroke:1px rgba(44,44,40,.1);
  line-height:.8;
  letter-spacing:-.02em;
  user-select:none;
  pointer-events:none;
}

.mp-price__head{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  max-width:640px;
}
.mp-price__lbl{
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mid-dk);
  border-top:1px solid rgba(184,115,51,.3);
  padding-top:1.1rem;
  align-self:flex-start;
  margin:0;
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.55em;
}
.mp-price__lbl-dot{opacity:.5}
/* La connective (« Tarification · ») s'efface en --mid-dk : 5,56:1 sur
   --cream-dk — mesuré 2026-09-16. Le nom, seul cliquable, reste détaché :
   --copper-text-light (hérité) y tombait à 4,04:1, sous AA, d'où --dark
   (10,40:1) sur le bouton lui-même. */
.mp-price .tbtn{color:var(--dark)}
.mp-price .tbtn::after{background:var(--copper)}
.mp-price__head h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.2rem,4vw,3.2rem);
  color:var(--dark);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:0;
}
.mp-price__head h2 em{font-style:italic;color:var(--copper-text-light)}

/* Monument prix */
.mp-price__monument{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding-top:1.2rem;
}
.mp-price__prefix{
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mid);
}
.mp-price__amount{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(3.4rem,8vw,5.6rem);
  color:var(--dark);
  line-height:1;
  letter-spacing:-.025em;
  transition:opacity .25s ease,transform .25s ease;
  transform-origin:left center;
}
.mp-price__amount.is-switching{
  opacity:0;
  transform:translateY(-4px);
}
.mp-price__star{
  font-family:var(--sans);
  font-size:.7rem;
  color:var(--copper-text-light);
  vertical-align:super;
  line-height:1;
}
.mp-price__note{
  font-family:var(--sans);
  font-weight:300;
  font-size:.82rem;
  color:var(--mid-dk);
  line-height:1.7;
  margin:.2rem 0 0;
}
/* Note astérisque sous le prix — i18n FR/EN */
.mp-price__asterisk-note{
  font-family:var(--sans);
  font-weight:300;
  font-size:.72rem;
  color:var(--mid);
  line-height:1.55;
  margin:.4rem 0 0;
  max-width:58ch;
}

/* Trait copper entre prix et CTAs */
.mp-price__ctas{
  display:flex;
  gap:2rem;
  align-items:center;
  padding-top:2rem;
  flex-wrap:wrap;
  border-top:1px solid rgba(184,115,51,.35);
}
.mp-price__btn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:1.1rem 2rem;
  background:var(--dark);
  color:var(--white);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:400;
  text-decoration:none;
  transition:background .3s ease,padding .3s cubic-bezier(.16,1,.3,1);
}
.mp-price__btn::after{
  content:'→';
  color:var(--copper);
  font-size:.95rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .mp-price__btn:hover{background:var(--mid-dk);padding-right:2.4rem}
  .mp-price__btn:hover::after{color:var(--white);transform:translateX(.4rem)}
}
.mp-price__link{
  display:inline-flex;
  align-items:center;
  gap:1rem;
  font-family:var(--sans);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dark);
  text-decoration:none;
  font-weight:400;
  opacity:.7;
  border-bottom:1px solid rgba(44,44,40,.28);
  padding-bottom:1px;
}
@media(hover:hover) and (pointer:fine){
  .mp-price__link:hover{opacity:1;border-color:var(--copper-text-light)}
}

@media(max-width:768px){
  .mp-price__ctas{flex-direction:column;align-items:flex-start;gap:1.4rem}
}
@media(max-width:600px){
  .mp-price{padding:5rem 1.5rem}
}

/* ══════════════════════════════════════════════════════════════
   S7 — CLÔTURE .mp-cloture · S7·a closing crépuscule dark
   Photo bg R0 (substitut honnête — R7 crépuscule à venir)
   Gradient latéral 90deg (lisibilité texte gauche) · devis dominant
   Pont investir discret · 0 fiscal
   ══════════════════════════════════════════════════════════════ */
.mp-cloture{
  position:relative;
  padding:8rem 2.5rem;
  background:#201F1B;
  overflow:hidden;
  min-height:70vh;
  display:flex;
  align-items:center;
}
.mp-cloture__bg{
  position:absolute;
  inset:0;
  z-index:0;
}
.mp-cloture__bg picture,
.mp-cloture__bg img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:.38;
}
/* Gradient centré — lisibilité texte central */
.mp-cloture__grad{
  position:absolute;
  inset:0;
  z-index:1;
  background:radial-gradient(ellipse 80% 90% at 50% 60%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 60%, rgba(0,0,0,0) 100%);
}
.mp-cloture__inner{
  max-width:680px;
  margin:0 auto;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:2.8rem;
  width:100%;
}
.mp-cloture__h2{text-align:center}
.mp-cloture__actions{align-items:center}
.mp-cloture__eyebrow{}
.mp-cloture__h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2rem,3.8vw,3.2rem);
  color:var(--white);
  line-height:1.1;
  letter-spacing:-.025em;
  margin:0;
}
.mp-cloture__h2 em{
  font-style:italic;
  color:var(--copper-text-light);
  display:block;
}
.mp-cloture__actions{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  align-items:center;   /* bouton + bridge centrés comme l'eyebrow/h2 (section entièrement centrée) */
}
.mp-cloture__btn{
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  padding:1.15rem 2.4rem;
  background:var(--copper);
  color:var(--white);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:400;
  text-decoration:none;
  transition:background .3s ease,padding .3s cubic-bezier(.16,1,.3,1);
}
.mp-cloture__btn::after{
  content:'→';
  font-size:.95rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
@media(hover:hover) and (pointer:fine){
  .mp-cloture__btn:hover{background:var(--mid);padding-right:2.8rem}
  .mp-cloture__btn:hover::after{transform:translateX(.4rem)}
}
.mp-cloture__btn:focus-visible{outline:2px solid var(--copper);outline-offset:4px}
/* Pont investir — discret, Jost, pas un bouton */
.mp-cloture__bridge{
  font-family:var(--sans);
  font-size:.98rem;
  color:rgba(255,255,255,.64);
  letter-spacing:.04em;
  line-height:1.55;
}
.mp-cloture__bridge a{
  color:rgba(200,140,80,.92);
  text-decoration:none;
  border-bottom:1px solid rgba(184,115,51,.42);
  transition:color .25s ease,border-color .25s ease;
}
@media(hover:hover) and (pointer:fine){
  .mp-cloture__bridge a:hover{color:var(--copper-text-light);border-color:var(--copper-text-light)}
}

@media(max-width:600px){
  .mp-cloture{padding:6rem 1.5rem}
}