/* ==========================================================================
   Minerva Immobilier — refonte visuelle (CroisierWeb, 2026-10-16)
   Chargée après style.css : ne remplace aucune règle métier ni aucun
   contenu CMS, affine l'identité visuelle d'après la maquette transmise par
   le client (Matthias Aerni) — rouge signature plus vif, noir profond,
   typographie Archivo (titres) + Inter (texte/UI), nav et boutons en
   pilule, cartes à coins arrondis. Tout est désactivable en retirant ce
   fichier (cf. includes/header.php).
   ========================================================================== */

:root {
  --color-red: #D7191F;
  --color-red-hover: #A90F14;
  --color-anthracite: #0E0E0E;
  --color-light-grey: #F6F4F2;
  --color-border: #E7E4E2;
  --font-heading: 'Inter', system-ui, Arial, sans-serif;
  --font-display: 'Archivo', system-ui, Arial, sans-serif;
  --font-body: 'Inter', system-ui, Arial, sans-serif;
  --font-mono: 'Archivo', system-ui, Arial, sans-serif;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(14, 14, 14, .06), 0 12px 32px -18px rgba(14, 14, 14, .35);
  --shadow-hover: 0 2px 4px rgba(14, 14, 14, .08), 0 22px 44px -20px rgba(14, 14, 14, .45);
  --mv-muted: #6B6B6B;
}

body { -webkit-font-smoothing: antialiased; }
h1, h2, h3 { letter-spacing: -.01em; }

/* --- Boutons : pilule, comme la maquette ----------------------------------- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
.btn-cta, .btn-outline { padding: 13px 26px; }
.btn-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(215, 25, 31, .55); }
.btn-outline { border-width: 2px; }
.btn-outline:hover { transform: translateY(-1px); }

/* --- En-tête : fine barre rouge/noir + nav en pilule ----------------------- */
.site-header { border-bottom: 1px solid var(--color-border); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); position: relative; }
.site-header::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-red) 0 70%, var(--color-anthracite) 70%);
}
.main-nav ul a { border-radius: 999px; padding: 10px 16px; font-weight: 500; transition: background .2s ease, color .2s ease; }
.main-nav ul a:hover { background: var(--color-light-grey); color: var(--color-anthracite); }
.main-nav ul a[aria-current="page"] { background: var(--color-anthracite); color: #fff; }
.nav-lang { padding: 3px; border: 1px solid var(--color-border); border-radius: 999px; background: #fff; }
.nav-lang a { border-radius: 999px; padding: 7px 11px; font: 600 .78rem var(--font-body); letter-spacing: .04em; color: var(--mv-muted); transition: background .2s ease, color .2s ease; }
.nav-lang a.active, .nav-lang a:hover { background: var(--color-red); color: #fff; }

/* --- Hero : carrousel photo des 3 sites réels + halo rouge (maquette client, 2026-10-16) --- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #0E0E0E 0%, #1B1B1B 55%, #262626 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(60% 80% at 82% 15%, rgba(215, 25, 31, .38), transparent 60%),
    radial-gradient(55% 75% at 8% 100%, rgba(215, 25, 31, .18), transparent 60%),
    linear-gradient(0deg, rgba(14, 14, 14, .88) 0%, rgba(14, 14, 14, .58) 45%, rgba(14, 14, 14, .72) 100%);
}
/* Carrousel : une photo pleine largeur par site, fondu enchaîné au changement
   (classe "on" posée/retirée par assets/js/main.js). Dégradé sombre déjà posé
   par .hero::before par-dessus : les photos restent lisibles sous le texte
   quel que soit leur contenu, sans retoucher chaque image individuellement. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero-img.on { opacity: 1; }
/* 2026-10-19 (retour client, "le visuel de la page d'accueil ne respecte toujours pas le visuel
   souhaité") : le hero retombait sur .hero-inner { max-width:800px; margin:0 auto; text-align:
   center } (style.css) — une boîte centrée pensée pour l'ANCIEN hero (photo fixe, sans carrousel),
   alors que la maquette HTML du client compose son hero en PLEINE LARGEUR, texte aligné à
   gauche, ancré en bas (section.hero{align-items:flex-end}). Reprise ici, sans toucher à
   .hero-inner ailleurs (classe utilisée uniquement par templates/accueil.php). */
.hero-inner {
  position: relative; z-index: 2; animation: mvRise .9s cubic-bezier(.2, .7, .2, 1) both;
  max-width: none; margin: 0; text-align: left;
}
.hero h1 {
  font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase;
  letter-spacing: -.01em; text-shadow: none;
  /* Même cause que ci-dessus, sur la taille cette fois : aucune des 2 feuilles de style ne fixait
     de font-size dédié au hero de l'accueil — le h1 retombait donc sur la règle générique
     "h1 { font-size: clamp(1.8rem, 3.2vw, 2.6rem) }" (style.css, pensée pour un simple titre de
     page intérieure), soit environ MOITIÉ de la taille spectaculaire voulue par le client
     (clamp(2.6rem, 6.4vw, 5.4rem) dans sa maquette HTML, <section class="hero"> h1). Repris ici
     à une échelle équivalente. */
  font-size: clamp(2.4rem, 6.2vw, 5.2rem);
  max-width: 16ch;
  margin: 16px 0 20px;
}
.hero-subtitle {
  text-shadow: none;
  /* Reprend .hero p { max-width:540px } de la maquette, au lieu du max-width:620px centré
     (margin:0 auto) de style.css, cohérent avec .hero-inner repassé à gauche ci-dessus. */
  max-width: 540px; margin: 0 0 1.6em; text-align: left;
}
.hero-actions { justify-content: flex-start; }
/* Hero composé en bas à gauche comme la maquette, au lieu du centrage vertical par défaut de
   .home-fold .hero (style.css, align-items:center) pensé avant l'actuel carrousel 3 sites. */
.home-fold .hero { align-items: flex-end; }
/* 2026-10-16 : petit texte au-dessus du titre (repris de la maquette HTML du client,
   span.eyebrow) — même principe que .home-services-eyebrow mais en blanc, pour rester
   lisible sur la photo du hero plutôt que sur un fond clair. */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; margin-bottom: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}
.hero-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--color-red); flex: none; }
/* 2026-10-17 (retour client, "Minerva est écrit en rouge") : reprend `.hero h1 em{color:var(--red)}`
   de la maquette HTML du client — voir hero_title_accent() dans includes/functions.php. */
.hero-title-accent { color: var(--color-red); }
@keyframes mvRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Étiquette du site affiché (coin supérieur) + points de navigation (bas). */
.hero-tag {
  position: absolute; z-index: 2; top: 28px; left: 28px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(14, 14, 14, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  padding: 7px 16px 7px 12px; color: #fff; font-size: .78rem; font-weight: 600; letter-spacing: .03em;
}
.hero-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-red); display: inline-block; flex: none; }
.hero-nav {
  position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 5px; background: rgba(14, 14, 14, .45); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
}
.hero-dot {
  appearance: none; border: none; cursor: pointer; border-radius: 999px; padding: 8px 16px;
  font-family: var(--font-body); font-size: .76rem; font-weight: 600; letter-spacing: .03em;
  background: transparent; color: rgba(255, 255, 255, .72); transition: background .2s ease, color .2s ease;
}
.hero-dot:hover { color: #fff; }
.hero-dot.on { background: var(--color-red); color: #fff; }
@media (max-width: 640px) {
  .hero-tag { left: 16px; top: 16px; font-size: .72rem; }
  .hero-nav { bottom: 16px; }
  .hero-dot { padding: 7px 11px; }
}

/* --- Bandeau chiffres : fond noir comme la maquette ------------------------ */
.stats-band { background: var(--color-anthracite); }
.stats-band-value { font-family: var(--font-display); font-weight: 800; font-style: italic; }
.stats-band-eyebrow { color: var(--color-red); letter-spacing: .16em; }
.home-trust-band { background: var(--color-light-grey); }
.home-trust-band .stats-band-eyebrow { color: var(--color-red); }
.home-trust-band .stats-band-value { color: var(--color-anthracite); }

/* --- Sections : liseré rouge sous les titres -------------------------------- */
.section-grey { background: var(--color-light-grey); }
.section h2, .section-grey h2, .page-services h1, .page-about .history-timeline-section h2,
.page-about .history-values-section h2, .page-about .history-coverage-section h2,
.page-about .history-group-today h2 {
  position: relative; padding-bottom: 14px; font-family: var(--font-display);
}
.section h2::after, .section-grey h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; background: var(--color-red);
}
.section-cta-center h2::after { left: 50%; transform: translateX(-50%); }

/* --- Cartes de biens --------------------------------------------------------- */
.listing-card { border-radius: var(--radius); border-color: var(--color-border); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; }
.listing-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.listing-card-media img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.listing-card:hover .listing-card-media img { transform: scale(1.045); }
.listing-badge { border-radius: 999px; backdrop-filter: blur(6px); font-family: var(--font-body); }
.listing-card-body h2, .listing-card-body h3 { font-family: var(--font-display); font-size: 1.28rem; }

/* Statut "disponible"/"en projet" : pastille pilule (comme les badges),
   inchangée en position. "Loué" : ruban diagonal dans le coin (comme la
   maquette), posé sur .listing-card-media dont .listing-card parent a déjà
   overflow:hidden — le ruban est donc proprement rogné à l'angle de la
   carte, sans aucun changement de balisage PHP (templates/biens.php,
   templates/accueil.php restent inchangés, seul le statut CSS change). */
.listing-status-flag { border-radius: 999px; font-family: var(--font-body); }
.listing-status-flag-loue {
  top: 20px; right: -42px; left: auto; bottom: auto; width: 160px;
  transform: rotate(45deg); transform-origin: center;
  text-align: center; border-radius: 0; border: none;
  background: var(--color-anthracite); color: #fff;
  font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 0; box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

/* --- Filtres biens : champs en pilule, bloc en carte arrondie -------------- */
.listing-filters { border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.filter-field select, .filter-field input[type="text"] {
  border-radius: 999px; padding: 10px 18px; font-family: var(--font-body);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.filter-field select:hover, .filter-field input[type="text"]:hover { border-color: var(--color-red); }
.filter-field select:focus, .filter-field input[type="text"]:focus { border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(215, 25, 31, .12); }

/* --- Services : icônes carrées arrondies, accent rouge au survol ----------- */
.services-index-item { border-radius: 999px; transition: transform .2s ease; }
.services-index-item:hover { transform: translateY(-1px); }
.service-detail { border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; padding: 28px; }
.service-detail:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.service-detail-icon { border-radius: 12px; transition: background .25s ease, color .25s ease; }
.service-detail:hover .service-detail-icon { background: var(--color-red); color: #fff; }
.service-detail.is-secondary:hover .service-detail-icon { background: var(--color-bronze-hover); color: #fff; }
.service-detail-body h2 { font-family: var(--font-display); font-style: italic; }
.services-group-feature { border-radius: var(--radius); overflow: hidden; }
.services-group-feature-media img { border-radius: 0; }

/* --- Notre histoire : accents rouge, cartes valeurs ------------------------- */
.history-hero-text h1 { font-family: var(--font-display); font-weight: 800; font-style: italic; }
.history-motto { color: var(--color-red); }
.history-timeline-icon { background: var(--color-light-grey); color: var(--color-red); border-radius: 12px; }
.history-timeline-year { font-family: var(--font-display); font-weight: 800; font-style: italic; color: var(--color-red); }
.value-card, .team-card, .why-card {
  border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; padding: 28px;
}
.value-card:hover, .team-card:hover, .why-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.value-icon { color: var(--color-red); }
.history-group-photo img { border-radius: var(--radius); }
.history-divider-ring { stroke: var(--color-red); }
.history-coverage-link-path { stroke: var(--color-red); }

/* --- Rénovation -------------------------------------------------------------- */
.renovation-photo-grid img { border-radius: 10px; }
.renovation-project { border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }

/* --- Pied de page : noir profond, libellés en petites majuscules ----------- */
.site-footer { background: var(--color-anthracite); }
.footer-col h2 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.footer-col a { transition: color .2s ease; }
.footer-col a:hover, .footer-group-link a:hover { color: var(--color-red) !important; }
.footer-social a:hover { background: var(--color-red); border-color: var(--color-red); }

/* --- Fiche bien (détail) : finitions pilule/carte, cohérentes avec le reste
   de la refonte (2026-10-16). Les tokens (--radius, --shadow, --color-red,
   polices) sont déjà repris automatiquement par style.css via les variables
   CSS redéfinies en :root plus haut dans ce fichier — cette section ne fait
   que polir les quelques détails qui restent en dur (rayons fixes, absence
   d'ombre) pour que la fiche détail ait le même fini "carte + pilule" que
   les cartes de biens et les sections de l'accueil. --------------------- */
.breadcrumb a { color: var(--mv-muted); font-weight: 600; transition: color .2s ease; }
.breadcrumb a:hover { color: var(--color-red); }
.listing-detail-head h1 { font-family: var(--font-display); }
.listing-detail-surface-badge { border-radius: 999px; font-family: var(--font-display); font-style: italic; }
.listing-status-pill { border-radius: 999px; font-family: var(--font-body); letter-spacing: .02em; }
.gallery-main { box-shadow: var(--shadow); }
.gallery-nav, .gallery-expand { backdrop-filter: blur(6px); transition: transform .18s ease, background .18s ease; }
.gallery-nav:hover, .gallery-expand:hover { transform: translateY(-50%) scale(1.06); }
.gallery-expand:hover { transform: scale(1.06); }
.gallery-counter { backdrop-filter: blur(6px); font-family: var(--font-body); font-weight: 600; }
.gallery-thumb { border-radius: 10px; transition: border-color .2s ease, transform .2s ease; }
.gallery-thumb:hover { transform: translateY(-2px); }
.listing-facts li { border-bottom-color: var(--color-border); }
.listing-facts li strong { font-family: var(--font-heading); }
.listing-contact-box {
  border: 1px solid var(--color-border); box-shadow: var(--shadow);
  background: var(--color-light-grey);
}
.listing-contact-box h2 { font-family: var(--font-display); font-size: 1.2rem; }
.listing-description h2, .listing-detail-side h2 { font-family: var(--font-display); }

/* --- Formulaire de contact --------------------------------------------------- */
.form-field input, .form-field textarea { border-radius: 10px; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--color-red); box-shadow: 0 0 0 3px rgba(215, 25, 31, .12); }

/* ==========================================================================
   Nouvelles sections accueil — reprises de la maquette client (2026-10-16)
   Classes propres à ces 4 sections (aucun équivalent dans style.css) : tout
   le CSS nécessaire vit donc ici plutôt que de surcharger une règle de base.
   Contenu (texte, photos) : voir templates/accueil.php et la migration
   migrate_2026_10_16_accueil_mockup_sections.php.
   ========================================================================== */
.home-services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 44px; flex-wrap: wrap; }
.home-services-head h2 { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 800; margin-top: 10px; max-width: 18ch; }
.home-services-head .section-subtitle { max-width: 420px; color: var(--mv-muted); margin: 0; }
.home-services-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body);
  font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-red);
}
.home-services-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--color-red); }

/* --- Nos services (grille de 6) --------------------------------------------- */
.home-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-service-card {
  position: relative; padding: 30px 26px 26px; border: 1px solid var(--color-border); border-radius: var(--radius);
  background: #fff; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
.home-service-card::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0; background: var(--color-red); transition: width .35s ease; }
.home-service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.home-service-card:hover::before { width: 100%; }
.home-service-card h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; margin: 0 36px 8px 0; }
.home-service-card p { color: var(--mv-muted); font-size: .94rem; margin: 0; }
.home-service-num {
  position: absolute; right: 22px; top: 20px; font-family: var(--font-display); font-weight: 800; font-style: italic;
  color: var(--color-border); font-size: 1.5rem;
}
/* 2026-10-17 (retour client, "il y a des SVG dans la section 'des surfaces pour chaque
   activité' [...] garde le style voulu par le client") : icône carrée reprise telle quelle de
   la maquette HTML du client (.svc .ico), fond --soft devenu --color-light-grey (même valeur
   #F6F4F2) et bascule rouge au survol de la carte (cf. home_service_icon_svg() côté PHP). */
.home-service-ico {
  width: 52px; height: 52px; border-radius: 12px; background: var(--color-light-grey);
  display: grid; place-items: center; margin-bottom: 22px; color: var(--color-anthracite);
  transition: background .3s ease, color .3s ease;
}
.home-service-ico svg { width: 24px; height: 24px; }
.home-service-card:hover .home-service-ico { background: var(--color-red); color: #fff; }

/* --- Le bâtiment (teaser histoire, photo + liste) --------------------------- */
.home-history-teaser-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.home-history-teaser-photo { position: relative; }
.home-history-teaser-photo img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.home-history-teaser-badge {
  position: absolute; right: -16px; bottom: -20px; background: var(--color-red); color: #fff;
  padding: 18px 20px; border-radius: 12px; font-family: var(--font-display); box-shadow: 0 18px 40px rgba(215, 25, 31, .35);
}
.home-history-teaser-badge b { display: block; font-size: 1.5rem; font-style: italic; font-weight: 800; line-height: 1; }
.home-history-teaser-badge small { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.home-history-teaser-text h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 10px 0 16px; }
.home-history-teaser-checks { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 13px; }
.home-history-teaser-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: .96rem; }
.home-history-teaser-checks li::before {
  content: ""; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; 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.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* --- Nos sites (3 cartes photo plein cadre) --------------------------------- */
.home-sites-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.home-site-card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-anthracite); }
.home-site-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.home-site-card:hover img { transform: scale(1.045); }
.home-site-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(14, 14, 14, .85)); }
.home-site-card-info {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1;
  display: flex; align-items: center; gap: 12px; color: #fff;
}
.home-site-card-info .listing-country-flag-inline { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); flex: none; }
.home-site-card-info b { display: block; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 1.08rem; line-height: 1.15; }
.home-site-card-info small { opacity: .82; font-size: .82rem; }
.home-site-card-go {
  margin-left: auto; width: 38px; height: 38px; border-radius: 50%; background: var(--color-red); color: #fff;
  display: grid; place-items: center; font-weight: 700; flex: 0 0 38px; transition: background .2s ease, color .2s ease;
}
.home-site-card:hover .home-site-card-go { background: #fff; color: var(--color-red); }

/* --- Comment ça marche (3 étapes numérotées) -------------------------------- */
.home-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.home-step { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.home-step-num {
  display: block; margin-bottom: 16px; font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 2.6rem; line-height: 1; color: var(--color-red);
}
.home-step-num::before { content: "0"; }
.home-step h3 { font-size: 1.18rem; margin: 0 0 8px; }
.home-step p { color: var(--mv-muted); font-size: .94rem; margin: 0; }

/* --- Bandeau CTA final (rouge plein) ----------------------------------------- */
.section-cta-band { background: var(--color-red); color: #fff; position: relative; overflow: hidden; padding: 64px 20px; }
.section-cta-band .section-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.section-cta-band h2 { font-family: var(--font-display); font-weight: 800; font-style: italic; text-transform: uppercase; max-width: 20ch; margin: 0; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.section-cta-band .btn-cta { background: var(--color-anthracite); }
.section-cta-band .btn-cta:hover { background: #000; }
.section-cta-band .btn-outline { border-color: rgba(255, 255, 255, .75); color: #fff; }
.section-cta-band .btn-outline:hover { background: rgba(255, 255, 255, .15); border-color: #fff; }

/* --- Bandeau diagonal "Loué" sur les cartes de biens (2026-10-16, retour client :
   "le bandeau bien loué n'a pas été récupéré") -------------------------------------
   Repris de la maquette HTML transmise par le client (classe .ribbon, voir
   minerva-site.html) : un bandeau rouge plein travers la photo, bien plus visible que
   la pastille .listing-status-flag utilisée jusqu'ici — gardée pour les autres statuts
   (sous offre, en projet), voir templates/accueil.php et templates/biens.php. */
.listing-ribbon {
  position: absolute; left: 50%; top: 50%; width: 150%;
  transform: translate(-50%, -50%) rotate(-24deg);
  background: var(--color-red); color: #fff; text-align: center;
  padding: 7px 0; font-family: var(--font-display); font-weight: 800; font-style: italic;
  font-size: 0.92rem; letter-spacing: .22em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25); z-index: 2; pointer-events: none;
}
.listing-ribbon::before, .listing-ribbon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(255, 255, 255, .55);
}
.listing-ribbon::before { top: 3px; }
.listing-ribbon::after { bottom: 3px; }
/* 2026-10-16 (suite) : même bandeau pour "en projet" — reprend le bronze déjà utilisé pour ce
   statut ailleurs sur le site (.listing-card-status-en_projet, var(--color-bronze)) plutôt que
   le rouge, pour rester distinct du bandeau "Loué" ci-dessus. */
.listing-ribbon-en_projet { background: var(--color-bronze); }

@media (max-width: 860px) {
  .home-history-teaser-split { grid-template-columns: 1fr; gap: 40px; }
  .home-history-teaser-badge { right: 10px; }
}
@media (max-width: 760px) {
  .home-services-grid, .home-sites-grid, .home-steps-grid { grid-template-columns: 1fr; }
}

/* --- Apparition douce au défilement (sans dépendance JS), comme hz-refresh -- */
@supports (animation-timeline: view()) {
  .listing-card, .service-detail, .value-card, .history-timeline-item, .renovation-project,
  .home-service-card, .home-site-card, .home-step {
    animation: mvRise both linear; animation-timeline: view(); animation-range: entry 0% cover 22%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- Pages "site" (2026-10-16, une page dédiée par site — templates/site.php) ----------- */
.page-site-subtitle {
  color: var(--color-text-muted, #666); font-weight: 600; margin-top: -8px;
}
.site-loc-grid { align-items: start; }
.site-photo-card {
  margin-bottom: 20px; border-radius: var(--radius); overflow: hidden;
}
.site-photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.site-zones {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 56px;
}
.site-zones h2 { font-size: 1.1rem; margin-bottom: 8px; }
/* 2026-10-17 (retour client, "aperçu des biens disponible à cet adresse") : même grille
   .listing-grid que le catalogue (templates/biens.php) et "Biens à la une" (accueil), juste
   avec un peu d'espace au-dessus pour la détacher du bloc carte/coordonnées qui précède. */
.site-listings-preview { margin-top: 56px; }
.site-listings-preview h2 { font-size: 1.3rem; margin-bottom: 4px; }
.site-other-links { margin-top: 56px; border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 32px; }
.site-other-links h2 { font-size: 1.1rem; margin-bottom: 16px; }
.site-other-links ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0; }

@media (max-width: 900px) {
  .site-zones { grid-template-columns: 1fr; gap: 24px; }
}