/* ==========================================================================
   Minerva Immobilier — couche finale "noir / rouge" (CroisierWeb, 2026-10-19)
   --------------------------------------------------------------------------
   Chargée APRÈS style.css et mv-refresh.css (cf. includes/header.php).
   Direction : celle de la maquette HTML du client (minerva-site.html) —
   noir profond + rouge Minerva comme couleurs principales, Archivo grasse
   pour les titres, Inter pour le texte, bandeaux noirs avec croix suisse,
   bandeau d'appel rouge, cartes à coins arrondis.
   Écarts volontaires par rapport à la maquette (retour CroisierWeb du 19.10,
   "la navigation fait automobile") : titres en casse normale et jamais en
   italique, navigation textuelle soulignée au lieu des pilules noires,
   pas de liseré rouge/noir façon livrée en haut de page.
   ========================================================================== */

:root {
  --color-red: #D7191F;
  --color-red-hover: #A90F14;
  --color-anthracite: #0E0E0E;
  --color-light-grey: #F6F4F2;
  --color-border: #E7E4E2;
  --mv-ink: #1B1B1B;
  --mv-muted: #6B6B6B;
  --mv-wrap: 1200px;
  --font-display: 'Archivo', system-ui, Arial, sans-serif;
  --font-heading: 'Inter', system-ui, Arial, sans-serif;
  --font-body: 'Inter', system-ui, Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(14, 14, 14, .05), 0 14px 34px -20px rgba(14, 14, 14, .35);
  --shadow-hover: 0 2px 4px rgba(14, 14, 14, .06), 0 22px 44px -22px rgba(14, 14, 14, .45);
  /* Compat. : anciennes variables bronze de style.css → noir/rouge. */
  --color-bronze: #0E0E0E;
  --color-bronze-hover: #D7191F;
  --color-bronze-text: #0E0E0E;
  --color-bronze-on-dark: #D7191F;
}
body { color: var(--mv-ink); }

/* --- Typographie ------------------------------------------------------------ */
h1, h2, h3,
.hero h1, .history-hero-text h1, .listing-detail-head h1, .home-services-head h2,
.home-history-teaser-text h2, .section-cta-band h2, .listing-card-body h2, .listing-card-body h3,
.home-service-card h3, .home-step h3, .service-detail-body h2, .listing-contact-box h2,
.listing-description h2, .listing-detail-side h2 {
  font-family: var(--font-display); font-style: normal; text-transform: none;
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
}
.stats-band-value, .home-service-num, .home-step-num, .home-site-card-info b, .history-timeline-year,
.home-history-teaser-badge b, .listing-detail-surface-badge, .listing-ribbon, .history-hero-text h1 {
  font-style: normal !important;
}
.footer-col h2 { font-family: var(--font-display); font-size: .78rem; letter-spacing: .16em; }

/* Sur-titres : rouge + trait, comme la maquette (.eyebrow). */
.home-services-eyebrow, .home-featured-eyebrow, .page-hero-eyebrow, .stats-band-eyebrow,
.home-trust-band .stats-band-eyebrow, .services-group-label {
  display: inline-flex; align-items: center; gap: 10px; color: var(--color-red);
  font: 600 .76rem var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.home-services-eyebrow::before, .home-featured-eyebrow::before, .page-hero-eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--color-red); flex: none;
}
.section h2::after, .section-grey h2::after { width: 44px; height: 3px; background: var(--color-red); }
.home-services-head h2::after, .home-history-teaser-text h2::after { content: none; }

/* --- Boutons (maquette : pilule, rouge / noir / contour) -------------------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: 0; }
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(215, 25, 31, .6); }
.btn-outline { border-width: 2px; border-color: var(--color-anthracite); color: var(--color-anthracite); }
.btn-outline:hover { background: var(--color-anthracite); border-color: var(--color-anthracite); color: #fff; transform: none; }

/* --- En-tête --------------------------------------------------------------- */
.site-header { box-shadow: 0 2px 12px rgba(0, 0, 0, .06); border-bottom: 1px solid var(--color-border); }
.site-header::before { content: none; }
.header-topbar { background: var(--color-anthracite); color: rgba(255, 255, 255, .78); font-size: .8rem; border-bottom: 2px solid var(--color-red); }
.header-topbar-inner, .header-inner { max-width: var(--mv-wrap); margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.header-topbar-inner { padding-top: 7px; padding-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.header-topbar-contact { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.header-topbar-contact a { color: rgba(255, 255, 255, .88); }
.header-topbar-contact a:hover { color: #fff; text-decoration: none; }
.header-topbar-lang { display: flex; gap: 2px; }
.header-topbar-lang a { color: rgba(255, 255, 255, .6); font-weight: 600; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.header-topbar-lang a:hover { color: #fff; text-decoration: none; }
.header-topbar-lang a.active { color: #fff; background: var(--color-red); }

.header-inner { padding-top: 12px; padding-bottom: 12px; }
.main-nav .nav-lang { display: none; }
.main-nav ul { gap: 4px; }
.main-nav ul a {
  border-radius: 0; padding: 8px 12px; font-weight: 500; font-size: .95rem; color: var(--mv-ink);
  background: none; border-bottom: 2px solid transparent;
}
.main-nav ul a:hover { background: none; color: var(--color-anthracite); border-bottom-color: var(--color-border); text-decoration: none; }
.main-nav ul a[aria-current="page"] { background: none; color: var(--color-anthracite); font-weight: 600; border-bottom-color: var(--color-red); }
.nav-cta { padding: 11px 22px; font-size: .9rem; }

@media (max-width: 960px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow); max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .main-nav.open { max-height: 560px; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 8px 20px; }
  .main-nav ul a { display: block; padding: 13px 0; border-bottom: 1px solid var(--color-border); }
  .main-nav ul a[aria-current="page"] { border-bottom-color: var(--color-border); color: var(--color-red); }
  .nav-cta { margin: 14px 20px 18px; text-align: center; }
  .header-topbar-address { display: none; }
}
@media (max-width: 560px) {
  .header-topbar-contact li:nth-child(2) { display: none; }
  .header-topbar-inner { padding: 6px 16px; }
}

/* --- Hero accueil : texte aligné sur la grille du site (plus collé au bord) - */
.home-fold .hero, .hero { padding: 0; }
.hero::before {
  background:
    linear-gradient(90deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, .15) 55%, rgba(14, 14, 14, 0) 100%),
    linear-gradient(180deg, rgba(14, 14, 14, .18) 0%, rgba(14, 14, 14, .38) 40%, rgba(14, 14, 14, .9) 100%);
}
.hero-inner {
  width: 100%; max-width: var(--mv-wrap); margin: 0 auto; padding: 120px 20px 96px;
}
.hero h1 {
  font-weight: 900; font-size: clamp(2.5rem, 5.6vw, 4.8rem); line-height: 1.02; max-width: 15ch;
  margin: 16px 0 20px; color: #fff;
}
.hero-title-accent { color: var(--color-red); }
.hero-eyebrow { font-size: .76rem; letter-spacing: .16em; color: #fff; text-shadow: none; }
.hero-eyebrow::before { background: var(--color-red); width: 22px; }
.hero-subtitle { font-size: 1.1rem; line-height: 1.6; color: rgba(255, 255, 255, .9); max-width: 540px; }
.hero .btn-outline { border-color: #fff; color: #fff; }
.hero .btn-outline:hover { background: #fff; color: var(--color-anthracite); }
/* Étiquette du site affiché : carte blanche en haut à droite (maquette). */
.hero-tag {
  top: 28px; right: max(20px, calc((100% - var(--mv-wrap)) / 2 + 20px)); left: auto;
  background: #fff; color: var(--color-anthracite); border: 0; border-radius: 12px; backdrop-filter: none;
  padding: 12px 16px; font-size: .85rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
}
.hero-tag i { width: 10px; height: 10px; background: var(--color-red); box-shadow: 0 0 0 4px rgba(215, 25, 31, .2); }
/* Choix du site : barres de progression en bas à droite (maquette). */
.hero-nav {
  left: auto; transform: none; bottom: 30px; right: max(20px, calc((100% - var(--mv-wrap)) / 2 + 20px));
  background: none; border: 0; backdrop-filter: none; padding: 0; gap: 14px; border-radius: 0;
}
.hero-dot {
  position: relative; width: 120px; text-align: left; border-radius: 0; padding: 12px 0 0;
  background: none; color: #fff; opacity: .6; font-size: .78rem;
}
.hero-dot::before, .hero-dot::after { content: ""; position: absolute; left: 0; top: 0; height: 3px; border-radius: 3px; }
.hero-dot::before { right: 0; background: rgba(255, 255, 255, .35); }
.hero-dot::after { width: 0; background: var(--color-red); }
.hero-dot.on { opacity: 1; background: none; color: #fff; }
.hero-dot.on::after { animation: mvProgress 6s linear forwards; }
.hero.is-manual .hero-dot.on::after { animation: none; width: 100%; }
@keyframes mvProgress { to { width: 100%; } }
@media (max-width: 760px) {
  .hero-inner { padding: 90px 16px 110px; }
  .hero-tag { display: none; }
  .hero-nav { left: 16px; right: 16px; bottom: 24px; }
  .hero-dot { flex: 1; width: auto; font-size: .72rem; }
}

/* --- Bandeau chiffres : noir (maquette) ------------------------------------- */
.home-trust-band, .stats-band { background: var(--color-anthracite); border: 0; }
.home-trust-band .stats-band-value, .stats-band-value { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.home-trust-band .stats-band-value.is-accent, .stats-band-value.is-accent { color: var(--color-red); }
.home-trust-band .stats-band-label, .stats-band-label { color: #a8a8a8; }
.home-trust-band .stats-band-item, .stats-band-item { border-left-color: #2a2a2a; }
.home-trust-band .stats-band-eyebrow { color: var(--color-red); }

/* --- Sections de l'accueil -------------------------------------------------- */
.section-grey { background: var(--color-light-grey); }
.section-grey > .section-inner { max-width: 1140px; }
.home-services-head h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); max-width: 16ch; }
.home-service-card { border-radius: var(--radius); padding: 32px 28px 28px; }
.home-service-card::before { content: ""; background: var(--color-red); }
.home-service-card h3 { font-size: 1.3rem; }
.home-service-num { font-family: var(--font-display); font-weight: 800; color: var(--color-border); font-size: 1.6rem; }
.home-service-ico { background: var(--color-light-grey); color: var(--color-anthracite); border-radius: 12px; }
.home-service-card:hover .home-service-ico { background: var(--color-red); color: #fff; }

/* Le bâtiment : cadre rouge décalé + badge rouge (maquette .photo-frame). */
.home-history-teaser-photo { isolation: isolate; }
.home-history-teaser-photo::before {
  content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 2px solid var(--color-red);
  border-radius: var(--radius); z-index: -1;
}
.home-history-teaser-badge { background: var(--color-red); border-radius: 12px; padding: 20px 24px; box-shadow: 0 18px 40px rgba(215, 25, 31, .35); }
.home-history-teaser-badge b { font-family: var(--font-display); font-weight: 900; font-size: 1.8rem; }
.home-history-teaser-text h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); }
.home-history-teaser-checks li::before { background-color: var(--color-red); border-radius: 6px; }
.home-history-teaser-text .btn-cta { background: var(--color-anthracite); border-color: var(--color-anthracite); }
.home-history-teaser-text .btn-cta:hover { background: #333; border-color: #333; box-shadow: none; }

.home-site-card-go { background: var(--color-red); color: #fff; }
.home-site-card:hover .home-site-card-go { background: #fff; color: var(--color-red); }
.home-step { border-radius: var(--radius); }
.home-step-num { color: var(--color-red); font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; }

/* --- Bandeau d'appel final : rouge + croix suisse en filigrane (maquette .cta) */
.section-cta-band { background: var(--color-red); color: #fff; border: 0; position: relative; overflow: hidden; padding: 70px 20px; }
.section-cta-band::after {
  content: ""; position: absolute; right: -60px; top: 50%; width: 300px; height: 300px; transform: translateY(-50%);
  background: linear-gradient(#fff, #fff) center / 34% 100% no-repeat, linear-gradient(#fff, #fff) center / 100% 34% no-repeat;
  opacity: .1; pointer-events: none;
}
.section-cta-band .section-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.section-cta-band h2 { color: #fff; font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.6rem); max-width: 20ch; }
.section-cta-band .btn-cta { background: var(--color-anthracite); border-color: var(--color-anthracite); color: #fff; }
.section-cta-band .btn-cta:hover { background: #333; border-color: #333; box-shadow: none; }
.section-cta-band .btn-outline { border-color: #fff; color: #fff; }
.section-cta-band .btn-outline:hover { background: #fff; color: var(--color-red); border-color: #fff; }

/* --- Bandeau de tête des pages intérieures (maquette .page-hero) ----------- */
.page-hero { background: var(--color-anthracite); color: #fff; position: relative; overflow: hidden; padding: 84px 20px 64px; }
.page-hero::after {
  content: ""; position: absolute; right: 6%; bottom: -40px; width: 180px; height: 180px; background: var(--color-red); opacity: .9;
  clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}
.page-hero-inner { max-width: 1160px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-weight: 900; font-size: clamp(2.3rem, 5vw, 4rem); margin: 14px 0 14px; max-width: 18ch; }
.page-hero h1::after { content: none; }
.page-hero-eyebrow { color: #fff; }
.page-hero-subtitle { color: #fff; font-weight: 600; margin: -4px 0 10px; }
.page-hero-intro { color: #bdbdbd; max-width: 620px; margin: 0; font-size: 1.05rem; }
.page-hero-back { margin: 0 0 18px; font-size: .88rem; }
.page-hero-back a { color: #bdbdbd; font-weight: 600; }
.page-hero-back a:hover { color: #fff; text-decoration: none; }
.page-hero + .section { padding-top: 64px; }
@media (max-width: 760px) {
  .page-hero { padding: 60px 16px 48px; }
  .page-hero::after { width: 90px; height: 90px; right: 16px; bottom: -20px; opacity: .6; }
}

/* --- Notre histoire : en-tête noir avec sceau ------------------------------ */
.page-about .history-hero {
  background: var(--color-anthracite); color: #fff; border-radius: var(--radius); padding: 40px; position: relative; overflow: hidden;
}
.page-about .history-hero h1 { color: #fff; font-weight: 900; }
.page-about .history-lead { color: #cfcfcf; }
.page-about .history-motto { color: #fff; border-left: 3px solid var(--color-red); padding-left: 14px; font-style: normal; font-weight: 600; }
.page-about .history-hero-media svg circle:first-child { fill: #fff; }
.history-timeline-year { color: var(--color-red); font-family: var(--font-display); font-weight: 900; }
.history-timeline-icon { background: var(--color-light-grey); color: var(--color-red); }
.value-icon { color: var(--color-red); }

/* --- Services ---------------------------------------------------------------- */
.page-services .services-index { margin-top: 0; }
.services-index-item { border-radius: 999px; }
.services-index-item.is-primary { border-color: var(--color-red); color: var(--color-red); }
.services-index-item.is-secondary { border-color: var(--color-anthracite); color: var(--color-anthracite); }
.services-index-item.is-secondary:hover { background: var(--color-anthracite); color: #fff; }
.services-group-label::before { background: var(--color-red) !important; }
.service-detail { background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-red); }
.service-detail.is-secondary { border-left-color: var(--color-anthracite); }
.service-detail-icon { background: var(--color-anthracite); color: #fff; border-radius: 12px; }
.service-detail:hover .service-detail-icon, .service-detail.is-secondary:hover .service-detail-icon { background: var(--color-red); color: #fff; }
.service-detail-body h2 { color: var(--color-anthracite); font-style: normal; }
.service-detail-body li::marker { color: var(--color-red); }

/* --- Cartes de biens --------------------------------------------------------- */
.listing-card { border-radius: var(--radius); }
.listing-card-body h2 a, .listing-card-body h3 a { color: var(--color-anthracite); }
.listing-badge { border-radius: 999px; }
.listing-badge-location { background: var(--color-anthracite); }
.listing-card-surface-icon { color: var(--color-red); }
.listing-status-flag, .listing-status-pill { border-radius: 999px; }
.listing-detail-surface-badge { background: var(--color-anthracite); font-family: var(--font-display); font-weight: 800; border-radius: 999px; }
.listing-filters { border-radius: var(--radius); }
.filter-field select, .filter-field input[type="text"] { border-radius: 999px; }
.gallery-thumb { border-radius: 8px; }
.gallery-thumb.active { border-color: var(--color-red); }
.listing-ribbon {
  left: auto; top: 26px; right: -52px; width: 200px; transform: rotate(45deg);
  font-family: var(--font-display); font-weight: 800; font-size: .74rem; letter-spacing: .16em;
  padding: 7px 0; background: var(--color-red); box-shadow: 0 6px 14px rgba(215, 25, 31, .3);
}
.listing-ribbon::before, .listing-ribbon::after { content: none; }
.listing-ribbon-en_projet { background: var(--color-anthracite); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); }
.listing-card-status-en_projet { border-top-color: var(--color-anthracite); }

/* --- Page Biens : rappel des 3 sites ---------------------------------------- */
.listings-section-sites { margin-bottom: 8px; }
.listings-sites-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: 22px; }
.listings-sites-head h2 { margin: 0; }
.listings-sites-head p { margin: 0; max-width: 560px; color: var(--mv-muted); }
.home-sites-grid-compact .home-site-card { aspect-ratio: 16 / 10; }
.home-sites-grid-compact .home-site-card-info b { font-size: 1.02rem; }
@media (max-width: 900px) {
  .home-sites-grid-compact { grid-template-columns: 1fr; }
  .home-sites-grid-compact .home-site-card { aspect-ratio: 21 / 9; }
}

/* --- Pages site + contact : carte d'adresse noire (maquette .addr) --------- */
.page-site .site-loc-grid > aside, .page-contact .contact-info-col {
  background: var(--color-anthracite); color: #fff; border-radius: var(--radius); padding: 30px 28px;
}
.page-site .site-loc-grid > aside h2, .page-contact .contact-info-col h2 { color: #fff; }
.page-site .site-loc-grid > aside h2::after, .page-contact .contact-info-col h2::after { background: var(--color-red); }
.page-site .site-loc-grid > aside a:not(.btn), .page-contact .contact-info-col a:not(.btn) { color: #fff; }
.page-site .site-loc-grid > aside a:not(.btn):hover, .page-contact .contact-info-col a:not(.btn):hover { color: var(--color-red); }
.page-site .site-loc-grid > aside strong, .page-contact .contact-info-col strong { color: #9a9a9a; font-weight: 600; }
.page-site .site-loc-grid > aside .btn-outline, .page-contact .contact-info-col .btn-outline { border-color: #fff; color: #fff; }
.page-site .site-loc-grid > aside .btn-outline:hover { background: #fff; color: var(--color-anthracite); }
.page-contact .contact-info-col p { color: #cfcfcf; }
.page-contact .contact-watermark { display: none; }
.site-photo-card { border-radius: 10px; }
.page-site .hero-eyebrow { color: var(--color-red); }

/* --- Carte Google en deux clics (nLPD) -------------------------------------- */
.map-consent {
  position: relative; width: 100%; aspect-ratio: 7 / 4; border-radius: var(--radius); overflow: hidden;
  background-color: #F3F1EF;
  background-image: linear-gradient(#e6e2de 1px, transparent 1px), linear-gradient(90deg, #e6e2de 1px, transparent 1px);
  background-size: 44px 44px; border: 1px solid var(--color-border); display: grid; place-items: center;
}
.map-consent-inner { max-width: 420px; padding: 24px; text-align: center; background: rgba(255, 255, 255, .92); border-radius: 12px; margin: 16px; box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.map-consent-icon { color: var(--color-red); margin-bottom: 6px; }
.map-consent-address { font-family: var(--font-display); font-weight: 800; margin: 0 0 6px; color: var(--color-anthracite); }
.map-consent-text { font-size: .84rem; color: var(--mv-muted); margin: 0 0 14px; line-height: 1.5; }
.map-consent-text a { color: var(--color-red); }
.map-consent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.map-consent-actions .btn { padding: 9px 16px; font-size: .88rem; }
.map-consent-remember { display: inline-flex; gap: 6px; align-items: center; margin-top: 12px; font-size: .8rem; color: var(--mv-muted); cursor: pointer; }
.map-consent.is-loaded { background: none; display: block; }
.map-consent-frame { border: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 560px) { .map-consent { aspect-ratio: auto; min-height: 320px; } }

/* --- Demande de visite (fiche bien) ------------------------------------------ */
.listing-contact-box { background: var(--color-light-grey); border: 1px solid var(--color-border); border-top: 4px solid var(--color-red); border-radius: var(--radius); }
.visit-box { scroll-margin-top: 120px; }
.visit-intro { font-size: .9rem; color: var(--mv-muted); margin: 0 0 14px; }
.visit-form .form-field { margin-bottom: 12px; }
.visit-form label { font-size: .85rem; }
.visit-form input, .visit-form select, .visit-form textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; font: inherit; font-size: .92rem; background: #fff;
}
.visit-form input:focus, .visit-form select:focus, .visit-form textarea:focus { outline: none; border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(215, 25, 31, .12); }
.visit-when { display: grid; grid-template-columns: 1fr; gap: 0; }
.visit-note { font-size: .76rem; color: var(--mv-muted); margin: 10px 0 0; }
.visit-note a { color: var(--color-red); }
.visit-alt { margin: 12px 0 0; font-size: .88rem; text-align: center; }
.visit-alt a { color: var(--color-anthracite); font-weight: 700; }

/* --- Pied de page ---------------------------------------------------------- */
.site-footer { background: var(--color-anthracite); }
.footer-col a:hover { color: var(--color-red) !important; }

/* Alignement bandeau ↔ contenu : le texte du bandeau noir démarre exactement au bord gauche du
   contenu de la page. Pages "catalogue" (biens, sites, contact) élargies à la grille de l'accueil. */
.page-hero-inner { max-width: 940px; }
.page-listings.section-narrow, .page-site.section-narrow, .page-contact.section-narrow { max-width: 1180px; }
.page-hero:has(+ .page-listings) .page-hero-inner,
.page-hero:has(+ .page-site) .page-hero-inner,
.page-hero:has(+ .page-contact) .page-hero-inner { max-width: 1140px; }
.listing-card-body h2::after, .listing-card-body h3::after, .listing-contact-box h2::after { content: none; }
.listing-card-body h2, .listing-card-body h3 { padding-bottom: 0; }

/* --- Bandeaux de titre avec photo (2026-10-19) ------------------------------
   Chaque page intérieure a sa photo (render_page_hero(…, $photo) → --hero-photo).
   Voile noir dégradé de gauche à droite : le texte reste lisible, la photo se lit à droite. */
.page-hero.has-photo {
  background:
    linear-gradient(90deg, rgba(14, 14, 14, .92) 0%, rgba(14, 14, 14, .78) 38%, rgba(14, 14, 14, .35) 100%),
    linear-gradient(0deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, 0) 40%),
    var(--hero-photo) center 45% / cover no-repeat,
    var(--color-anthracite);
  padding: 120px 20px 96px;
  min-height: 420px; display: flex; align-items: flex-end;
}
.page-hero.has-photo .page-hero-inner { width: 100%; }
.page-hero.has-photo .page-hero-intro { color: #dcdcdc; }
.page-hero.has-photo::after { opacity: .85; }
/* Liseré rouge en pied de bandeau, rappel de la barre d'en-tête. */
.page-hero.has-photo::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--color-red) 0 70%, transparent 70%); z-index: 2;
}
@media (max-width: 760px) {
  .page-hero.has-photo { padding: 80px 16px 56px; min-height: 320px; }
  .page-hero.has-photo { background:
    linear-gradient(0deg, rgba(14, 14, 14, .92) 0%, rgba(14, 14, 14, .6) 100%),
    var(--hero-photo) center / cover no-repeat, var(--color-anthracite); }
}

/* Notre histoire : la carte noire prend la photo de l'immeuble historique. */
.page-about .history-hero {
  background:
    linear-gradient(90deg, rgba(14, 14, 14, .9) 0%, rgba(14, 14, 14, .72) 55%, rgba(14, 14, 14, .45) 100%),
    url("../uploads/listings/allee-soupirs-2-batiment.jpg") center 30% / cover no-repeat,
    var(--color-anthracite);
  padding: 56px 44px;
}

/* Accueil : la 6e carte "Accompagnement" est un service (pas un type de surface) → carte noire
   cliquable vers la page Services, pour la distinguer des 5 types de surfaces. */
.home-service-card--service {
  display: flex; flex-direction: column; background: var(--color-anthracite); border-color: var(--color-anthracite);
  color: #fff; text-decoration: none;
}
.home-service-card--service:hover { text-decoration: none; color: #fff; box-shadow: 0 22px 44px -20px rgba(14, 14, 14, .6); }
.home-service-card--service h3 { color: #fff; }
.home-service-card--service p { color: #bdbdbd; }
.home-service-card--service .home-service-num { color: #2e2e2e; }
.home-service-card--service .home-service-ico { background: var(--color-red); color: #fff; }
.home-service-card--service:hover .home-service-ico { background: #fff; color: var(--color-red); }
.home-service-more { margin-top: auto; padding-top: 16px; font-weight: 600; font-size: .92rem; color: var(--color-red); display: inline-flex; gap: 8px; }
.home-service-card--service:hover .home-service-more { color: #fff; }
.home-service-card--service:hover .home-service-more span { transform: translateX(3px); }
.home-service-more span { transition: transform .2s ease; }

/* =====================================================================
   2026-10-20 — En-têtes de section, v2 (retour CroisierWeb : texte d'intro
   encore "mal intégré" quand il flotte à droite du titre). Modèle unique,
   empilé, aligné à gauche : sur-titre rouge → titre → texte d'intro juste
   dessous, dans la même colonne de lecture (max. ~62 caractères), puis le
   contenu. Plus de colonne de droite détachée du titre.
   ===================================================================== */
.home-services-head, .listings-sites-head {
  display: block; margin: 0 0 36px; max-width: 760px;
}
.home-services-head > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.home-services-head h2, .listings-sites-head h2 { margin: 0; max-width: 22ch; }
.home-services-head .section-subtitle, .listings-sites-head p {
  max-width: 62ch; margin: 16px 0 0; padding: 0; border: 0;
  color: var(--mv-text-soft); font-size: 1.06rem; line-height: 1.7;
}
.listings-sites-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.listings-sites-head h2::after { content: none; }
@media (max-width: 760px) {
  .home-services-head, .listings-sites-head { margin-bottom: 26px; }
}

/* Page Biens : sous-titres de section au même gabarit que le reste du site. */
.listings-section > h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.35rem, 2vw, 1.6rem); margin-bottom: 18px;
}

/* À propos : sections centrées → filet rouge et texte centrés sous le titre. */
.page-about .history-values-section h2, .page-about .history-coverage-section h2,
.page-about .history-group-today h2 { text-align: center; }
.page-about .history-values-section h2::after, .page-about .history-coverage-section h2::after,
.page-about .history-group-today h2::after { left: 50%; transform: translateX(-50%); }
.page-about .history-coverage-section > p, .page-about .history-group-today > p {
  text-align: center; max-width: 660px; margin: 14px auto 26px;
  color: #3d3d3d; font-size: 1.06rem; line-height: 1.75;
}

/* Services : titre et texte de chaque service plus lisibles. */
.service-detail-body h2 { font-size: 1.45rem; margin-bottom: 10px; }
.service-detail-body > p { color: #3d3d3d; font-size: 1.02rem; line-height: 1.7; max-width: 68ch; }
.service-detail.is-secondary .service-detail-body h2 { font-size: 1.25rem; }

/* Rénovation : le texte du projet passe avant la galerie, en vraie intro. */
.renovation-project-single { display: flex; flex-direction: column; }
.renovation-project-single .renovation-project-body { order: -1; margin: 0 0 28px; padding: 0; }
.renovation-project-body h2 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15; margin: 0 0 16px; padding-bottom: 14px;
}
.renovation-project-body p { color: #3d3d3d; line-height: 1.75; white-space: normal; margin: 0 0 14px; }
.renovation-project-body .renovation-lead {
  font-size: 1.14rem; line-height: 1.7; color: var(--color-anthracite); max-width: 72ch;
  padding-left: 22px; border-left: 3px solid var(--color-red); margin-bottom: 26px;
}
.renovation-text-cols { column-count: 2; column-gap: 48px; }
.renovation-text-cols p { break-inside: avoid; font-size: 1rem; }
@media (max-width: 760px) { .renovation-text-cols { column-count: 1; } }

/* Pages site : les 3 blocs "Accès / Stationnement / Quartier" en cartes. */
.site-zones { gap: 20px; }
.site-zones > section {
  background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-red);
  border-radius: var(--radius); padding: 24px 24px 26px; box-shadow: var(--shadow);
}
.site-zones h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.18rem; letter-spacing: -.01em; margin: 0 0 10px; padding-bottom: 0; }
.site-zones h2::after { content: none; }
.site-zones p { color: #3d3d3d; line-height: 1.7; margin: 0; }

/* =====================================================================
   2026-10-20 — Palette "pierre" : moins de noir sur tout le site
   (retour CroisierWeb : "le noir n'est pas idéal pour une agence
   immobilière"). Le rouge Minerva reste la couleur forte ; les aplats
   noirs (bandeau du haut, chiffres clés, pied de page, cartes adresse,
   bandeaux de titre, pastilles) passent sur un beige pierre chaud,
   rappel de la pierre calcaire des façades de Porrentruy. Le texte
   reste foncé (brun très sombre, plus doux que le noir pur). Les seules
   zones sombres restantes sont les voiles posés sur les photos, pour la
   lisibilité du texte blanc.
   ===================================================================== */
:root {
  --color-stone: #F5F1EA;
  --color-stone-2: #EAE2D6;
  --color-stone-line: #DCD2C3;
  --color-taupe: #6E6156;
  --color-ink: #221E1B;
  --mv-ink: #2B2622;
  --mv-text-soft: #5A514A;
  --mv-muted: #776B61;
  --color-border: #E6DFD5;
  --color-light-grey: #F5F1EA;
  --shadow: 0 1px 2px rgba(34, 30, 27, .05), 0 14px 34px -20px rgba(34, 30, 27, .32);
  --shadow-hover: 0 2px 4px rgba(34, 30, 27, .06), 0 22px 44px -22px rgba(34, 30, 27, .42);
}
h1, h2, h3, .service-detail-body h2 { color: var(--color-ink); }
.listing-card-body h2 a, .listing-card-body h3 a { color: var(--color-ink); }

/* Bandeau du haut : rouge Minerva (au lieu du noir). */
.header-topbar { background: var(--color-red); color: rgba(255, 255, 255, .9); border-bottom: 0; }
.header-topbar-contact a { color: #fff; }
.header-topbar-lang a { color: rgba(255, 255, 255, .78); }
.header-topbar-lang a.active { background: #fff; color: var(--color-red); }

/* Boutons : plus de bouton noir. */
.btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.btn-outline:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.home-history-teaser-text .btn-cta { background: var(--color-red); border-color: var(--color-red); }
.home-history-teaser-text .btn-cta:hover { background: var(--color-red-hover); border-color: var(--color-red-hover); }
.section-cta-band .btn-cta { background: #fff; border-color: #fff; color: var(--color-red); }
.section-cta-band .btn-cta:hover { background: var(--color-stone); border-color: var(--color-stone); color: var(--color-red-hover); }

/* Chiffres clés : fond pierre, chiffres foncés, accent rouge. */
.home-trust-band, .stats-band { background: var(--color-stone); border: 0; }
.stats-band { border-top: 1px solid var(--color-stone-line); }
.home-trust-band .stats-band-value, .stats-band-value { color: var(--color-ink); }
.home-trust-band .stats-band-value.is-accent, .stats-band-value.is-accent { color: var(--color-red); }
.stats-band-value small { font-size: .5em; font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.home-trust-band .stats-band-label, .stats-band-label { color: var(--mv-muted); }
.home-trust-band .stats-band-item, .stats-band-item { border-left-color: var(--color-stone-line); }

/* Pied de page : pierre claire, liseré rouge, logo couleur. */
.site-footer { background: var(--color-stone); color: var(--mv-text-soft); border-top: 1px solid var(--color-stone-line); }
.stats-band + .site-footer { border-top-color: var(--color-stone-line); }
.site-footer p, .site-footer li { color: var(--mv-text-soft); }
.footer-col h2 { color: var(--color-red); }
.footer-col a, .site-footer a { color: var(--color-ink); }
.footer-col a:hover, .site-footer a:hover { color: var(--color-red) !important; }
.footer-contact strong { color: var(--color-ink); }
.footer-bottom { border-top: 1px solid var(--color-stone-line); }
.footer-bottom p { color: var(--mv-muted); }
.footer-social a { border-color: var(--color-stone-line); color: var(--color-ink); }

/* Accueil : carte "Accompagnement" en rouge (service, pas un type de surface). */
.home-service-card--service { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.home-service-card--service:hover { background: var(--color-red-hover); border-color: var(--color-red-hover); box-shadow: 0 22px 44px -20px rgba(215, 25, 31, .55); }
.home-service-card--service::before { content: none; }
.home-service-card--service p { color: rgba(255, 255, 255, .9); }
.home-service-card--service .home-service-num { color: rgba(255, 255, 255, .28); }
.home-service-card--service .home-service-ico, .home-service-card--service:hover .home-service-ico { background: #fff; color: var(--color-red); }
.home-service-card--service .home-service-more, .home-service-card--service:hover .home-service-more { color: #fff; }
.home-service-ico { background: var(--color-stone); color: var(--color-ink); }

/* Cartes adresse (pages site + contact) : pierre + liseré rouge. */
.page-site .site-loc-grid > aside, .page-contact .contact-info-col {
  background: var(--color-stone); color: var(--mv-ink); border: 1px solid var(--color-stone-line); border-top: 4px solid var(--color-red);
}
.page-site .site-loc-grid > aside h2, .page-contact .contact-info-col h2 { color: var(--color-ink); }
.page-site .site-loc-grid > aside a:not(.btn), .page-contact .contact-info-col a:not(.btn) { color: var(--color-ink); }
.page-site .site-loc-grid > aside strong, .page-contact .contact-info-col strong { color: var(--mv-muted); }
.page-site .site-loc-grid > aside .btn-outline, .page-contact .contact-info-col .btn-outline { border-color: var(--color-ink); color: var(--color-ink); }
.page-site .site-loc-grid > aside .btn-outline:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.page-contact .contact-info-col p { color: var(--mv-text-soft); }

/* Services : pastilles et icônes sans noir. */
.services-index-item.is-secondary { border-color: var(--color-stone-line); color: var(--color-ink); }
.services-index-item.is-secondary:hover { background: var(--color-red); border-color: var(--color-red); color: #fff; }
.service-detail.is-secondary { border-left-color: var(--color-stone-line); }
.service-detail-icon { background: #FCEBEC; color: var(--color-red); }

/* Biens : pastilles claires, "en projet" en taupe. */
.listing-badge-location { background: rgba(255, 255, 255, .94); color: var(--color-ink); }
.listing-detail-surface-badge { background: var(--color-red); }
.listing-ribbon-en_projet { background: var(--color-taupe); box-shadow: 0 6px 14px rgba(34, 30, 27, .25); }
.listing-card-status-en_projet { border-top-color: var(--color-taupe); }
.home-site-card { background: var(--color-stone-2); }

/* =====================================================================
   Bandeaux de titre des pages intérieures, v3 (2026-10-20) : la grande
   croix rouge est retirée. Mise en page "pierre + photo" : texte foncé sur
   fond pierre à gauche, photo de la page à droite, liseré rouge sous le
   sur-titre et en pied de bandeau. Plus de voile noir sur la photo.
   ===================================================================== */
.page-hero { background: var(--color-stone); color: var(--mv-ink); padding: 72px 20px 64px; border-bottom: 1px solid var(--color-stone-line); }
.page-hero::after { content: none; }
.page-hero h1 { color: var(--color-ink); }
.page-hero-eyebrow { color: var(--color-red); }
.page-hero-subtitle { color: var(--color-ink); }
.page-hero-intro { color: var(--mv-text-soft); font-size: 1.08rem; line-height: 1.7; }
.page-hero-back a { color: var(--mv-muted); }
.page-hero-back a:hover { color: var(--color-red); }

.page-hero.has-photo {
  background: var(--color-stone); min-height: 440px; padding: 80px 20px 72px;
  display: flex; align-items: center;
}
.page-hero.has-photo .page-hero-inner { width: 100%; }
.page-hero.has-photo .page-hero-inner > * { max-width: min(520px, 46%); }
.page-hero.has-photo .page-hero-intro { color: var(--mv-text-soft); }
.page-hero.has-photo::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 50%; height: auto;
  background: var(--hero-photo) center 45% / cover no-repeat; opacity: 1; clip-path: none; transform: none;
  border-bottom-left-radius: 120px;
}
.page-hero.has-photo::before {
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 50%; right: auto;
  background: var(--color-red); z-index: 2;
}
@media (max-width: 860px) {
  .page-hero.has-photo { flex-direction: column; align-items: stretch; min-height: 0; padding: 0 16px 44px; background: var(--color-stone); }
  .page-hero.has-photo::after {
    position: static; order: -1; display: block; width: auto; height: 230px; margin: 0 -16px 32px;
    border-bottom-left-radius: 0;
  }
  .page-hero.has-photo .page-hero-inner > * { max-width: none; }
  .page-hero.has-photo::before { width: 100%; }
}

/* Notre histoire : carte de tête pierre + photo de l'immeuble à droite. */
.page-about .history-hero {
  background: var(--color-stone); color: var(--mv-ink); border: 1px solid var(--color-stone-line);
  padding: 56px 44px; position: relative; overflow: hidden;
}
.page-about .history-hero::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%;
  background: url("../uploads/listings/allee-soupirs-2-batiment.jpg") center 30% / cover no-repeat;
  border-bottom-left-radius: 90px;
}
.page-about .history-hero > * { position: relative; z-index: 1; }
.page-about .history-hero { padding-right: calc(30% + 44px); }
.page-about .history-hero-text { max-width: none; }
.page-about .history-hero h1 { color: var(--color-ink); }
.page-about .history-lead { color: var(--mv-text-soft); }
.page-about .history-motto { color: var(--color-ink); }
.page-about .history-hero-media svg circle:first-child { fill: #fff; }
@media (max-width: 860px) {
  .page-about .history-hero { padding: 0 24px 32px; }
  .page-about .history-hero { padding-right: 24px; }
  .page-about .history-hero::after { position: relative; display: block; width: auto; height: 220px; margin: 0 -24px 24px; border-bottom-left-radius: 0; order: -1; }
  .page-about .history-hero-text { max-width: none; }
}

/* Fiche bien (2026-10-20) : bouton PDF + autres biens disponibles à la même adresse. */
.listing-pdf-btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 22px; }
.listing-facts a { color: var(--color-red); text-decoration: underline; text-underline-offset: 3px; }
.listing-same-site { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--color-border); }
.listing-same-site .home-services-head { margin-bottom: 28px; }
.listing-same-site .home-services-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.listing-same-site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- Images optimisées (2026-10-20) : <picture> transparent pour la mise en page --------------- */
picture { display: contents; }
@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
  .page-hero.has-photo[style*="--hero-photo-set"]::after { background-image: var(--hero-photo-set); }
}

/* =====================================================================
   Page Rénovation, v2 (2026-10-20) — le projet raconté en 4 temps.
   ===================================================================== */
.page-renovation .section-inner { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.reno-intro {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: start;
  padding-top: 72px; padding-bottom: 72px;
}
.reno-intro-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 12px 0 22px; padding-bottom: 0; }
.reno-intro-text h2::after { content: none; }
.reno-lead { font-size: 1.16rem; line-height: 1.75; color: var(--mv-ink); margin: 0; }
.reno-facts {
  background: var(--color-stone); border: 1px solid var(--color-stone-line); border-top: 4px solid var(--color-red);
  border-radius: var(--radius); padding: 26px 28px;
}
.reno-facts h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 16px; }
.reno-facts dl { margin: 0; display: grid; gap: 14px; }
.reno-facts dl > div { display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid var(--color-stone-line); }
.reno-facts dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.reno-facts dt { font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-muted); }
.reno-facts dd { margin: 0; font-weight: 600; color: var(--color-ink); line-height: 1.5; }
.reno-facts dd a { color: var(--color-red); text-decoration: underline; text-underline-offset: 3px; }

.reno-chapters { padding-top: 24px; padding-bottom: 40px; }
.reno-chapter {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center;
  padding: 36px 0;
}
.reno-chapter + .reno-chapter { border-top: 1px solid var(--color-border); }
.reno-chapter.is-reversed .reno-chapter-media { order: 2; }
.reno-chapter-media { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); background: var(--color-stone-2); }
.reno-chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reno-chapter-tag {
  position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--color-ink);
  font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
}
.reno-chapter-num { display: block; font-family: var(--font-display); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--color-red); margin-bottom: 10px; }
.reno-chapter-body h3 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin: 0 0 14px; }
.reno-chapter-body p { color: var(--mv-text-soft); font-size: 1.05rem; line-height: 1.75; margin: 0; }

.reno-gallery-section { background: var(--color-stone); padding: 80px 0; margin-top: 40px; }
.reno-mosaic { columns: 3 260px; column-gap: 14px; }
.reno-mosaic-item { position: relative; display: block; margin: 0 0 14px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: var(--color-stone-2); }
.reno-mosaic-item img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.reno-mosaic-item:hover img { transform: scale(1.04); }
.reno-mosaic-zoom {
  position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: var(--color-red); display: grid; place-items: center; opacity: 0; transition: opacity .2s ease;
}
.reno-mosaic-item:hover .reno-mosaic-zoom, .reno-mosaic-item:focus-visible .reno-mosaic-zoom { opacity: 1; }

.reno-today { padding-top: 80px; padding-bottom: 80px; }
.reno-cta { margin-top: 0; }
.reno-cta .section-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.reno-cta h2 { margin: 0; padding: 0; }
.reno-cta h2::after { content: none; }
.lightbox-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 600; font-size: .9rem; letter-spacing: .06em; }
@media (max-width: 860px) {
  .reno-intro { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; }
  .reno-chapter { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .reno-chapter.is-reversed .reno-chapter-media { order: 0; }
  .reno-chapter-num { font-size: 2.4rem; }
  .reno-gallery-section { padding: 56px 0; }
  .reno-mosaic { columns: 2 140px; column-gap: 10px; }
  .reno-mosaic-item { margin-bottom: 10px; }
  .reno-today { padding-top: 56px; padding-bottom: 56px; }
}

/* =====================================================================
   Page Services, v2 (2026-10-20) — sommaire latéral collant + cartes.
   ===================================================================== */
.page-services.section-narrow { max-width: 1180px; }
.services-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; }
.page-services .services-index {
  position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; margin: 0;
  background: var(--color-stone); border: 1px solid var(--color-stone-line); border-radius: var(--radius); padding: 18px 14px;
}
.services-index-group {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mv-muted);
  padding: 10px 10px 6px;
}
.services-index-group:first-child { padding-top: 2px; }
.page-services .services-index-item,
.page-services .services-index-item.is-primary,
.page-services .services-index-item.is-secondary {
  display: flex; align-items: center; gap: 12px; border: 0; border-radius: 10px; background: none;
  padding: 10px 12px; color: var(--color-ink); font-weight: 600; font-size: .96rem; text-decoration: none;
  border-left: 3px solid transparent; transition: background .2s ease, color .2s ease;
}
.page-services .services-index-item:hover { background: #fff; color: var(--color-red); }
.page-services .services-index-item.is-active { background: #fff; color: var(--color-red); border-left-color: var(--color-red); box-shadow: 0 1px 2px rgba(34, 30, 27, .06); }
.page-services .services-index-icon { width: 20px; height: 20px; color: var(--color-red); }
.page-services .services-index-icon svg { width: 20px; height: 20px; }
.services-index-cta { margin-top: 14px; text-align: center; }

.page-services .services-detail { display: flex; flex-direction: column; gap: 22px; }
.page-services .services-group-label { margin: 6px 0 -6px; }
.page-services .services-group-label:not(:first-child) { margin-top: 28px; }
.page-services .service-detail,
.page-services .service-detail.is-secondary {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 24px; padding: 34px 36px;
  background: #fff; border: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow); scroll-margin-top: 24px; position: relative;
}
.page-services .service-detail::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 4px; background: var(--color-red); border-radius: 0 4px 4px 0; }
.page-services .service-detail.is-secondary::before { background: var(--color-stone-line); }
.service-detail-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.page-services .service-detail-icon,
.page-services .service-detail.is-secondary .service-detail-icon { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin: 0; background: #FCEBEC; color: var(--color-red); }
.service-detail-num { font-family: var(--font-display); font-weight: 900; color: var(--color-stone-line); font-size: 1.3rem; }
.page-services .service-detail-body h2,
.page-services .service-detail.is-secondary .service-detail-body h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); color: var(--color-ink); margin: 4px 0 10px; padding-bottom: 0; }
.page-services .service-detail-body h2::after { content: none; }
.page-services .service-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 18px 0 24px; }
.page-services .service-detail-list li { padding-left: 28px; color: var(--mv-ink); font-size: .96rem; line-height: 1.5; }
.page-services .service-detail-list li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.page-services .service-detail.is-secondary .service-detail-list li::before { background-color: var(--color-taupe); }
.service-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.page-services .services-group-feature { margin-top: 64px; }

@media (max-width: 960px) {
  .services-layout { grid-template-columns: 1fr; gap: 18px; }
  .page-services .services-index {
    top: 0; z-index: 20; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding: 10px 12px; margin: 0 -16px;
    border-radius: 0; border-left: 0; border-right: 0; scrollbar-width: none;
  }
  .page-services .services-index::-webkit-scrollbar { display: none; }
  .services-index-group, .services-index-cta { display: none; }
  .page-services .services-index-item { flex: none; border-left: 0; border: 1px solid var(--color-stone-line); border-radius: 999px; padding: 8px 14px; background: #fff; font-size: .9rem; }
  .page-services .services-index-item.is-active { background: var(--color-red); color: #fff; border-color: var(--color-red); }
  .page-services .services-index-item.is-active .services-index-icon { color: #fff; }
  .page-services .service-detail, .page-services .service-detail.is-secondary { grid-template-columns: 1fr; padding: 26px 22px; gap: 14px; scroll-margin-top: 70px; }
  .service-detail-head { flex-direction: row; justify-content: space-between; }
  .page-services .service-detail-list { grid-template-columns: 1fr; }
}

/* --- Pages site : galerie photo (2026-10-20) ------------------------------------------------ */
.site-gallery { margin-top: 64px; }
.site-gallery-grid { display: grid; gap: 12px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; }
.site-gallery-item { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--color-stone-2); }
.site-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.site-gallery-item:hover img { transform: scale(1.04); }
.site-gallery-item:first-child { grid-row: span 2; }
.site-gallery-item.is-extra { display: none; }
.site-gallery-count-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 380px; }
.site-gallery-count-2 .site-gallery-item:first-child { grid-row: auto; }
.site-gallery-count-3 { grid-template-columns: 2fr 1fr; }
.site-gallery-count-4 .site-gallery-item:nth-child(4) { grid-column: span 2; }
.site-gallery-more {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(34, 30, 27, .55);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem;
}
@media (max-width: 760px) {
  .site-gallery { margin-top: 44px; }
  .site-gallery-grid, .site-gallery-count-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 230px; grid-auto-rows: 130px; gap: 8px; }
  .site-gallery-item:first-child { grid-row: auto; grid-column: span 2; }
  .site-gallery-count-2 { grid-template-rows: 230px 160px; }
  .site-gallery-count-4 .site-gallery-item:nth-child(4) { grid-column: span 2; }
}

/* Rénovation — avant / après par point (2026-10-20) */
.reno-chapter { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
.reno-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reno-compare-item { position: relative; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--color-stone-2); box-shadow: var(--shadow); }
.reno-compare-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.reno-compare-item:hover img { transform: scale(1.04); }
.reno-compare-item.is-before img { filter: saturate(.85); }
.reno-compare-tag {
  position: absolute; left: 12px; top: 12px; padding: 5px 12px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255, 255, 255, .94); color: var(--color-ink);
}
.reno-compare-item.is-after .reno-compare-tag { background: var(--color-red); color: #fff; }
.reno-compare-item.is-after::after {
  content: ""; position: absolute; left: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D7191F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 2px 8px rgba(34, 30, 27, .2); z-index: 2;
}
.reno-compare-item.is-after { overflow: visible; }
.reno-compare-item.is-after img { border-radius: 12px; }
@media (max-width: 860px) {
  .reno-chapter { grid-template-columns: 1fr; }
  .reno-compare { gap: 8px; }
  .reno-compare-tag { font-size: .66rem; padding: 4px 9px; left: 8px; top: 8px; }
}

/* Accueil — types de surface cliquables (2026-10-20) : au survol, la carte se transforme en
   "Voir les biens" (voile rouge, icône + titre + appel). Sur écran tactile : ligne d'appel fixe. */
.home-service-card--link { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-decoration: none; }
.home-service-card--link:hover, .home-service-card--link:focus-visible { text-decoration: none; color: inherit; }
.home-service-hover {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 10px; padding: 28px; background: var(--color-red); color: #fff;
  opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
}
.home-service-hover-ico { width: 46px; height: 46px; border-radius: 12px; background: #fff; color: var(--color-red); display: grid; place-items: center; }
.home-service-hover-ico svg { width: 24px; height: 24px; }
.home-service-hover-title { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1.15; }
.home-service-hover-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; border-bottom: 2px solid rgba(255, 255, 255, .6); padding-bottom: 2px; }
.home-service-hover-cta span { transition: transform .2s ease; }
.home-service-card--link:hover .home-service-hover,
.home-service-card--link:focus-visible .home-service-hover { opacity: 1; transform: none; }
.home-service-card--link:hover .home-service-hover-cta span { transform: translateX(4px); }
.home-service-card--link:focus-visible { outline: 3px solid var(--color-red); outline-offset: 3px; }
.home-service-more--mobile { display: none; }
@media (hover: none) {
  .home-service-hover { display: none; }
  .home-service-more--mobile { display: inline-flex; }
}
.listing-empty-usage { background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--color-red); border-radius: var(--radius); padding: 24px 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.listing-empty-usage p { flex: 1 1 100%; margin: 0 0 6px; color: var(--mv-ink); font-size: 1.04rem; }
#listings-filter-heading { scroll-margin-top: 24px; }

/* Accueil — carte "Accompagnement" élargie sur 2 colonnes (2026-10-20, "Places de parc" retirée).
   Façade de l'Allée des Soupirs 2 en filigrane blanc à droite pour habiller la largeur. */
.home-service-card--wide { grid-column: span 2; padding-right: 42%; min-height: 100%; }
.home-service-card--service.home-service-card--wide {
  background:
    linear-gradient(rgba(215, 25, 31, .84), rgba(215, 25, 31, .84)),
    url("../img/ambiance/facade-soupirs-blanc.svg") right -30px bottom -6px / 62% auto no-repeat,
    var(--color-red);
}
.home-service-card--service.home-service-card--wide:hover {
  background:
    linear-gradient(rgba(169, 15, 20, .86), rgba(169, 15, 20, .86)),
    url("../img/ambiance/facade-soupirs-blanc.svg") right -30px bottom -6px / 62% auto no-repeat,
    var(--color-red-hover);
}
.home-service-card--wide h3 { font-size: 1.55rem; }
.home-service-card--wide p { font-size: 1.02rem; max-width: 42ch; }
.home-service-card--wide .home-service-num { position: absolute; right: 28px; top: 24px; }
@media (max-width: 760px) {
  .home-service-card--wide { grid-column: auto; padding-right: 28px; }
  .home-service-card--service.home-service-card--wide { background-size: auto, 90% auto, auto; }
}

/* --- Fiche bien : galerie à gauche, caractéristiques + demande de visite à droite (2026-10-20) --- */
.page-listing-detail.section-narrow { max-width: 1180px; }
.page-hero:has(+ .page-listing-detail) .page-hero-inner { max-width: 1140px; }
.listing-detail-grid--gallery {
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "gallery side" "desc side"; grid-template-rows: auto 1fr;
  column-gap: 40px; row-gap: 0; align-items: start; margin-top: 24px;
}
.listing-detail-grid--gallery .listing-gallery { grid-area: gallery; margin: 0 0 36px; min-width: 0; }
.listing-detail-grid--gallery .listing-detail-main { grid-area: desc; min-width: 0; }
.listing-detail-grid--gallery .listing-detail-side { grid-area: side; }
.listing-detail-grid--gallery .listing-detail-side > h2,
.listing-detail-grid--gallery .listing-detail-main > h2 { margin-top: 0; }
.listing-detail-grid--gallery .listing-facts { margin-bottom: 16px; }
.listing-detail-grid--gallery .listing-facts li { padding: 8px 0; }
.listing-detail-grid--gallery .listing-pdf-btn { margin-bottom: 18px; }
.listing-detail-grid--gallery .visit-when { grid-template-columns: 1fr 1fr; gap: 0 10px; }
@media (max-width: 1024px) {
  .listing-detail-grid--gallery { grid-template-columns: 1fr; grid-template-areas: "gallery" "side" "desc"; grid-template-rows: auto; }
  .listing-detail-grid--gallery .listing-detail-side { margin-bottom: 36px; }
}
@media (max-width: 420px) {
  .listing-detail-grid--gallery .visit-when { grid-template-columns: 1fr; }
}

/* =====================================================================
   Page Notre histoire, v2 (2026-10-20) — en-tête standard, devise + valeurs,
   histoire en chapitres illustrés reliés aux sites, cartes des sites, CTA.
   ===================================================================== */
.page-about .section-inner { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.page-about h2::after { content: none; }

.about-manifest {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: center;
  padding-top: 72px; padding-bottom: 64px;
}
.about-seal svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 24px rgba(60, 40, 20, .12)); }
.about-motto { margin: 0 0 34px; padding: 0 0 0 22px; border-left: 4px solid var(--color-red); }
.about-motto p { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.45rem, 2.6vw, 2.05rem); line-height: 1.25; color: var(--color-ink); margin: 0; }
.about-values-title {
  font-size: .78rem !important; font-family: var(--font-body, inherit); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mv-muted); margin: 0 0 14px; padding: 0;
}
.about-values { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--color-border); }
.about-values li { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 4px 0; }
.about-values li + li { padding-left: 20px; border-left: 1px solid var(--color-border); }
.about-value-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--color-red); display: grid; place-items: center; box-shadow: var(--shadow); }
.about-value-icon svg { width: 20px; height: 20px; }
.about-values h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 2px 0 4px; }
.about-values p { font-size: .92rem; line-height: 1.55; color: var(--mv-text-soft); margin: 0; }

.about-story { padding-top: 40px; padding-bottom: 24px; }
.about-story .home-services-head { margin-bottom: 8px; }
.about-chapter {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 40px 0;
}
.about-chapter + .about-chapter { border-top: 1px solid var(--color-border); }
.about-chapter.is-reversed .about-chapter-media { order: 2; }
.about-chapter-media { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); background: var(--color-stone-2); }
.about-chapter-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-chapter-tag {
  position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--color-ink); border-radius: 12px; padding: 8px 14px;
  font-weight: 700; font-size: .92rem; line-height: 1.2; box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.about-chapter-tag small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mv-muted); margin-top: 2px; }
.about-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.about-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px; background: var(--color-stone-line, #e0d4c2); }
.about-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding-bottom: 26px; }
.about-step:last-child { padding-bottom: 0; }
.about-step-icon {
  position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 12px; background: var(--color-stone, #EFE6D8);
  border: 1px solid var(--color-stone-line, #e0d4c2); color: var(--color-red); display: grid; place-items: center;
}
.about-step-icon svg { width: 22px; height: 22px; }
.about-step-year { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; line-height: 1.1; color: var(--color-red); }
.about-step h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 4px 0 6px; }
.about-step p { color: var(--mv-text-soft); font-size: 1rem; line-height: 1.65; margin: 0; }
.about-chapter-link {
  display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0 62px; font-weight: 700; color: var(--color-red);
  text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.about-chapter-link:hover span { transform: translateX(3px); }
.about-chapter-link span { transition: transform .2s ease; }

.about-sites { padding-top: 24px; padding-bottom: 80px; }
.about-sites .home-services-head { margin-bottom: 28px; }

.about-group { background: var(--color-stone, #EFE6D8); padding: 80px 0; }
.about-group-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.about-group-text h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 16px; padding: 0; }
.about-group-text p { color: var(--mv-text-soft); font-size: 1.05rem; line-height: 1.7; margin: 0 0 26px; }
.about-group-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-group-photo { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: var(--color-stone-2); aspect-ratio: 16 / 10; }
.about-group-photo--main { grid-column: 1 / -1; aspect-ratio: 16 / 8; }
.about-group-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-group-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; font-size: .78rem; color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent);
}
.about-cta .section-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.about-cta h2 { margin: 0; padding: 0; }
.page-about .ambiance-band { margin-top: 32px; margin-bottom: 56px; }

@media (max-width: 960px) {
  .about-values { grid-template-columns: 1fr; }
  .about-values li, .about-values li + li { padding: 16px 0; border-left: 0; }
  .about-values li + li { border-top: 1px solid var(--color-border); }
}
@media (max-width: 860px) {
  .about-manifest { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; padding-bottom: 40px; }
  .about-seal { width: 160px; }
  .about-chapter { grid-template-columns: 1fr; gap: 24px; padding: 28px 0; }
  .about-chapter.is-reversed .about-chapter-media { order: 0; }
  .about-chapter-link { margin-left: 0; }
  .about-group { padding: 56px 0; }
  .about-group-inner { grid-template-columns: 1fr; gap: 28px; }
  .about-sites { padding-bottom: 56px; }
}

/* =====================================================================
   Menu principal v2 (2026-10-20) — "Nos surfaces" (par type / par site) et
   "L'agence" (Services, Notre histoire) en sous-menus ; Contact = bouton rouge.
   ===================================================================== */
.main-nav-list { align-items: center; }
.nav-item { position: relative; }
.main-nav .nav-parent {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-weight: 500; font-size: .95rem; color: var(--mv-ink);
  background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; text-decoration: none; border-radius: 0;
}
.main-nav .nav-parent:hover { color: var(--color-anthracite); border-bottom-color: var(--color-border); }
.main-nav .nav-parent[aria-current="page"], .main-nav .nav-parent[data-current] { font-weight: 600; color: var(--color-anthracite); border-bottom-color: var(--color-red); }
.nav-caret { width: 12px; height: 12px; transition: transform .2s ease; }
.nav-sub {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60; min-width: 280px;
  background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--color-red); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(40, 30, 20, .14); padding: 10px;
  opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* pont de survol */
.nav-item.has-sub:hover > .nav-sub, .nav-item.has-sub:focus-within > .nav-sub, .nav-item.is-open > .nav-sub {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
}
.nav-item.has-sub:hover .nav-caret, .nav-item.is-open .nav-caret { transform: rotate(180deg); }
.main-nav .nav-sub a {
  display: block; padding: 9px 12px; border: 0; border-radius: 9px; font-size: .93rem; font-weight: 600; color: var(--color-ink); white-space: nowrap;
}
.main-nav .nav-sub a small { display: block; font-size: .78rem; font-weight: 400; color: var(--mv-muted); margin-top: 1px; }
.main-nav .nav-sub a:hover, .main-nav .nav-sub a:focus-visible { background: var(--color-stone, #F5F1EA); color: var(--color-red); border: 0; text-decoration: none; }
.main-nav .nav-sub a[aria-current="page"] { background: var(--color-stone, #F5F1EA); color: var(--color-red); border: 0; }
.nav-sub--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; min-width: 470px; }
.nav-sub-col { display: flex; flex-direction: column; }
.nav-sub-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mv-muted); padding: 8px 12px 4px; }
.main-nav .nav-sub-all {
  grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--color-border) !important; border-radius: 0 0 9px 9px;
  color: var(--color-red); padding-top: 12px;
}

@media (max-width: 960px) {
  .main-nav.open { max-height: calc(100vh - 120px); overflow-y: auto; }
  .main-nav-list { align-items: stretch; }
  .main-nav .nav-parent { display: flex; width: 100%; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--color-border); font-weight: 700; }
  .main-nav .nav-parent[aria-current="page"], .main-nav .nav-parent[data-current] { color: var(--color-red); border-bottom-color: var(--color-border); }
  .nav-caret { display: none; }
  .nav-sub, .nav-sub--wide {
    position: static; opacity: 1; visibility: visible; transform: none; transition: none; min-width: 0;
    border: 0; box-shadow: none; border-radius: 0; padding: 4px 0 10px; display: block; background: none;
  }
  .nav-sub::before { content: none; }
  .nav-sub-col { margin-bottom: 4px; }
  .nav-sub-title { padding: 8px 0 2px; }
  .main-nav .nav-sub a { padding: 8px 0 8px 12px; border-bottom: 0; white-space: normal; }
  .main-nav .nav-sub a small { display: none; }
  .main-nav .nav-sub-all { border-top: 0 !important; padding-left: 12px; }
}

/* =====================================================================
   Accueil — "Louer en trois étapes", v2 (2026-10-20) : en-tête + contact direct
   à gauche, étapes reliées par un fil à droite.
   ===================================================================== */
.home-steps-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.home-steps-aside { position: sticky; top: 32px; }
.home-steps-aside h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 10px 0 18px; padding: 0; max-width: 12ch; }
.home-steps-aside h2::after { content: none; }
.home-steps-intro { color: var(--mv-text-soft); font-size: 1.06rem; line-height: 1.7; margin: 0 0 28px; max-width: 42ch; }
.home-steps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.home-steps-phone {
  display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--color-ink); text-decoration: none;
  padding: 10px 0; border-bottom: 2px solid var(--color-red);
}
.home-steps-phone svg { color: var(--color-red); }
.home-steps-phone:hover { color: var(--color-red); text-decoration: none; }
.home-steps-status { margin: 18px 0 0; font-size: .88rem; color: var(--mv-muted); display: flex; align-items: center; gap: 9px; }
.home-steps-status:empty { display: none; }
.home-steps-status::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #B8AA98; }
.home-steps-status.is-open { color: #1F7A45; font-weight: 600; }
.home-steps-status.is-open::before { background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46, 158, 91, .18); animation: mv-open-pulse 2.4s ease-in-out infinite; }
@keyframes mv-open-pulse { 50% { box-shadow: 0 0 0 7px rgba(46, 158, 91, .06); } }
@media (prefers-reduced-motion: reduce) { .home-steps-status.is-open::before { animation: none; } }

.home-steps-track { list-style: none; margin: 0; padding: 0; position: relative; counter-reset: none; }
.home-steps-track::before {
  content: ""; position: absolute; left: 31px; top: 40px; bottom: 40px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--color-red) 0 6px, transparent 6px 12px); opacity: .55;
}
.home-step-v2 { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: center; }
.home-step-v2 + .home-step-v2 { margin-top: 18px; }
.home-step-marker {
  position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--color-red);
  display: grid; place-items: center; border: 2px solid var(--color-red); box-shadow: 0 0 0 6px var(--color-light-grey, #F3EBDF);
}
.ambiance .home-step-marker { box-shadow: 0 0 0 6px #F3EBDF; }
.home-step-marker svg { width: 28px; height: 28px; }
.home-step-v2:last-child .home-step-marker { background: var(--color-red); color: #fff; }
.home-step-card {
  background: #fff; border-radius: var(--radius); padding: 22px 26px; box-shadow: var(--shadow);
  border: 1px solid var(--color-border); transition: transform .25s ease, box-shadow .25s ease;
}
.home-step-v2:hover .home-step-card { transform: translateX(4px); box-shadow: 0 14px 32px rgba(40, 30, 20, .12); }
.home-step-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-red); margin-bottom: 4px; }
.home-step-card h3 { font-family: var(--font-display); font-size: 1.22rem; margin: 0 0 6px; }
.home-step-card p { color: var(--mv-text-soft); font-size: .97rem; line-height: 1.6; margin: 0; }

@media (max-width: 900px) {
  .home-steps-layout { grid-template-columns: 1fr; gap: 36px; }
  .home-steps-aside { position: static; }
  .home-steps-aside h2 { max-width: none; }
}
@media (max-width: 520px) {
  .home-step-v2 { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .home-step-marker { width: 48px; height: 48px; }
  .home-step-marker svg { width: 22px; height: 22px; }
  .home-steps-track::before { left: 23px; }
  .home-step-card { padding: 18px 18px; }
}

/* 2026-10-20 : bloc "Afficher la carte" — dans une colonne étroite (page Contact), le contenu
   dépassait le format 7:4 et le bouton était coupé. Tant que la carte n'est pas chargée, le bloc
   s'agrandit selon son contenu (aspect-ratio = hauteur minimale seulement). */
.map-consent:not(.is-loaded) { overflow: visible; aspect-ratio: auto; min-height: 260px; }
.map-consent:not(.is-loaded) .map-consent-inner { margin: 18px; }

/* 2026-10-22 : titres longs à côté de la photo (ex. « Rénovation et aménagement ») — taille un peu
   réduite et coupure possible des mots très longs, pour ne jamais déborder sur l'image. */
.page-hero.has-photo h1 { font-size: clamp(2.1rem, 3.4vw, 3.4rem); overflow-wrap: break-word; hyphens: auto; }

/* 2026-10-22 : plans des biens (page du bien) — images sur fond blanc, entières (contain), PDF en boutons. */
.listing-plans { margin-top: 36px; }
.listing-plans h2 { margin-bottom: 14px; }
.listing-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.listing-plan { display: block; background: #fff; border: 1px solid var(--color-border, #e4dfd3); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s; }
.listing-plan:hover, .listing-plan:focus-visible { box-shadow: 0 6px 18px rgba(0,0,0,.12); transform: translateY(-2px); }
.listing-plan img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; padding: 8px; }
.listing-plan-label { display: block; padding: 8px 12px 10px; font-size: .9rem; font-weight: 600; border-top: 1px solid var(--color-border, #e4dfd3); }
.listing-plans-pdf { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.listing-plans-pdf small { opacity: .7; font-weight: 400; }
.lightbox--plan .lightbox-image { background: #fff; padding: 12px; border-radius: 4px; }
.lightbox--plan .lightbox-counter { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: .9rem; }