/* ═════════════════════════════════════════════════════════════════════
   Hero immersif partagé (classes r5h-*) — home « Horizon » et pages à
   hero cyclique (projets neufs...). Extrait de home.css le 13/08/2026
   pour réutilisation sans duplication (règle d'or n°6).
   ═════════════════════════════════════════════════════════════════════ */
/* ═════════════════════════════════════════════════════════════════════
   Hero « Horizon » — validé le 12/08/2026 (prototype work/hero-lab.html).
   Classes r5h-* : pas de collision avec l'ancien CSS `.hero` extrait.
   ═════════════════════════════════════════════════════════════════════ */
.r5-hero {
  position: relative; height: 100svh; min-height: 640px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--green-800);
}
.r5h-media {
  position: absolute; inset: 0;
  animation: r5h-settle 9s cubic-bezier(0.22, 0.6, 0.2, 1) both;
  will-change: transform;
}
.r5h-layer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
}
.r5h-layer.is-active { opacity: 1; }
@keyframes r5h-settle { from { transform: scale(1.07); } to { transform: scale(1); } }

.r5h-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(2,6,16,0.82) 0%, rgba(2,6,16,0.38) 34%, rgba(2,6,16,0.10) 60%, transparent 78%),
    linear-gradient(105deg, rgba(2,6,16,0.55) 0%, rgba(2,6,16,0.18) 42%, transparent 68%);
}

.r5h-inner {
  position: relative; z-index: 2; width: 100%;
  padding: 0 max(24px, calc((100% - 1280px) / 2)) 128px;
}
.r5h-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  animation: r5h-rise 1.1s .15s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-kicker::before { content: ''; width: 44px; height: 1px; background: var(--gold-light); }

.r5-hero h1 { font-family: var(--font); font-weight: 400; color: var(--white); margin: 26px 0 0; }
.r5h-title-top {
  display: block; font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: 0.01em; color: rgba(255,255,255,0.86); font-family: var(--font);
  animation: r5h-rise 1.1s .3s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-title-main {
  display: block; font-size: clamp(48px, 8.6vw, 124px);
  line-height: 1.02; letter-spacing: -0.028em; margin-top: 10px; font-family: var(--font);
  animation: r5h-rise 1.2s .42s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-title-main em { font-style: italic; }
.r5h-dot { color: var(--gold-light); }

.r5h-sub {
  font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.75;
  color: rgba(255,255,255,0.78); max-width: 520px; margin-top: 26px;
  animation: r5h-rise 1.1s .58s cubic-bezier(0.19,1,0.22,1) both;
}

.r5h-cta-row {
  display: flex; align-items: flex-start; flex-direction: column; gap: 22px; margin-top: 40px;
  animation: r5h-rise 1.1s .72s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-cta-primary {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white); background: var(--gold); border-radius: 50px; padding: 19px 44px;
  transition: transform .35s cubic-bezier(0.19,1,0.22,1), box-shadow .35s, background .35s;
}
.r5h-cta-primary:hover {
  background: var(--gold-light); transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
}
.r5h-cta-ghost {
  font-size: 13px; color: rgba(255,255,255,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 3px;
  transition: border-color .3s, color .3s; min-height: 44px; display: inline-flex; align-items: center;
}
.r5h-cta-ghost:hover { color: var(--gold-light); border-color: var(--gold-light); }

.r5h-market-line {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px max(24px, calc((100% - 1280px) / 2));
  border-top: 1px solid rgba(255,255,255,0.14);
  animation: r5h-fade 1.4s 1.05s ease both;
}
.r5h-market-live { display: inline-flex; align-items: center; gap: 10px; font-size: 11.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.66); }
.r5h-market-dot { width: 6px; height: 6px; border-radius: 50%; background: #4a80de; flex-shrink: 0; animation: r5h-pulse 3.2s ease-in-out infinite; }
.r5h-market-link { font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-light); white-space: nowrap; }

.r5h-scroll-cue {
  position: absolute; right: 56px; bottom: 74px; z-index: 3;
  display: none; flex-direction: column; align-items: center; gap: 12px;
  animation: r5h-fade 1.4s 1.2s ease both;
}
.r5h-scroll-cue span { font-size: 9.5px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.45); writing-mode: vertical-rl; }
.r5h-scroll-line { width: 1px; height: 52px; background: rgba(255,255,255,0.22); overflow: hidden; position: relative; }
.r5h-scroll-line::after {
  content: ''; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%; background: var(--gold-light);
  animation: r5h-descend 2.6s cubic-bezier(0.65,0,0.35,1) infinite;
}

@keyframes r5h-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes r5h-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes r5h-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(74,128,222,0.45); } 50% { box-shadow: 0 0 0 7px rgba(74,128,222,0); } }
@keyframes r5h-descend { 0% { top: -50%; } 60%, 100% { top: 110%; } }

@media (prefers-reduced-motion: reduce) {
  .r5h-media img, .r5h-kicker, .r5h-title-top, .r5h-title-main, .r5h-sub,
  .r5h-cta-row, .r5h-market-line, .r5h-scroll-cue,
  .r5h-scroll-line::after, .r5h-market-dot { animation: none; }
}

@media (min-width: 768px) {
  .r5h-inner { padding: 0 max(48px, calc((100% - 1280px) / 2)) 118px; }
  .r5h-market-line { padding: 20px max(48px, calc((100% - 1280px) / 2)); }
  .r5h-cta-row { flex-direction: row; align-items: center; gap: 34px; }
}
@media (min-width: 900px) {
  .r5h-scroll-cue { display: flex; }
}

@media (min-width: 1100px) {
  .r5h-inner { padding-left: max(80px, calc((100% - 1280px) / 2)); padding-right: max(80px, calc((100% - 1280px) / 2)); }
  .r5h-market-line { padding-left: max(80px, calc((100% - 1280px) / 2)); padding-right: max(80px, calc((100% - 1280px) / 2)); }
}


/* ─────────────────────────────────────────────────────────────────────
   Normalisation de colonne (12/08/2026) — audit d'alignement : toutes
   les sections partagent le même bord de contenu (24/48/80px selon la
   largeur, contenu max 1280px). Les surcharges ci-dessous ramènent les
   retardataires du CSS extrait (stats à 88px, bloc SEO communes en
   flex) dans le rang. Déclarées en fin de fichier pour gagner la
   cascade sur les règles extraites.
   ───────────────────────────────────────────────────────────────────── */
#page-home .stats-section,
#page-home .estimation,
#page-home .recherches,
#page-home .ventes,
#page-home #r5-communes-strip,
#page-home .proprietes,
#page-home .team-section,
#page-home .buyer,
#page-home .pourquoi,
#page-home .reviews-section,
#page-home .home-est-shortcut,
#page-home .confier,
#page-home .connaissances,
#page-home .cta-final,
#page-home .geo-about,
#page-home .communes-seo-block {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* Les conteneurs internes partagent tous la même largeur de contenu. */
#page-home .team-inner,
#page-home .geo-about-inner { max-width: 1280px; }

#page-home .communes-seo-block { display: block !important; }
#page-home .communes-seo-inner { width: auto; max-width: 1280px; margin: 0 auto; }
#page-home .communes-seo-links { width: auto; }

@media (min-width: 768px) {
  #page-home .stats-section,
  #page-home .estimation,
  #page-home .recherches,
  #page-home .ventes,
  #page-home #r5-communes-strip,
  #page-home .proprietes,
  #page-home .team-section,
  #page-home .buyer,
  #page-home .pourquoi,
  #page-home .reviews-section,
  #page-home .home-est-shortcut,
  #page-home .confier,
  #page-home .connaissances,
  #page-home .cta-final,
  #page-home .geo-about,
  #page-home .communes-seo-block {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}
@media (min-width: 1100px) {
  #page-home .stats-section,
  #page-home .estimation,
  #page-home .recherches,
  #page-home .ventes,
  #page-home #r5-communes-strip,
  #page-home .proprietes,
  #page-home .team-section,
  #page-home .buyer,
  #page-home .pourquoi,
  #page-home .reviews-section,
  #page-home .home-est-shortcut,
  #page-home .confier,
  #page-home .connaissances,
  #page-home .cta-final,
  #page-home .geo-about,
  #page-home .communes-seo-block {
    padding-left: 80px !important;
    padding-right: 80px !important;
  }
}

/* Le hero est pleine largeur par conception — neutralise un padding de
   20px hérité d'une règle générique du CSS extrait (repéré à l'audit
   mobile : kicker à 44px au lieu de 24px). */
#page-home .r5-hero { padding: 0 !important; }

/* Amorce éditoriale entre le titre et le paragraphe (page projets
   neufs) — la phrase signature, un ton au-dessus du sous-texte. */
.r5h-lead {
  font-family: var(--font);
  font-size: clamp(16px, 1.5vw, 20px);
  font-style: italic;
  color: var(--gold-light);
  margin-top: 26px;
  animation: r5h-rise 1.1s .52s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-lead + .r5h-sub { margin-top: 12px; }

/* Le déclencheur d'avant-premières est un <button> (ouvre la modale
   lead) : même habit que le lien fantôme. */
button.r5h-cta-ghost { background: none; border-top: none; border-left: none; border-right: none; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  .r5h-lead { animation: none; }
}

/* ── Accès rapides mobile (Acheter / Vendre / Estimer) ──────────────
   Réintégrés le 13/08 (présents dans la version précédente du hero,
   perdus au passage à Horizon). Sur mobile ils remplacent la rangée
   CTA ; le desktop garde bouton or + lien fantôme. */
.r5h-mobile-intents {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 36px;
  animation: r5h-rise 1.1s .72s cubic-bezier(0.19,1,0.22,1) both;
}
.r5h-intent {
  flex: 1 1 auto; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 22px;
  font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.32); border-radius: 50px;
}
.r5h-intent--primary { background: var(--gold); border-color: var(--gold); }

@media (max-width: 767px) {
  /* Seulement quand les accès rapides existent (la home) : ils
     remplacent la rangée CTA. Les pages sans accès rapides (projets
     neufs...) gardent leurs boutons — régression corrigée le 13/08. */
  .r5h-mobile-intents + .r5h-cta-row { display: none; }
}
@media (min-width: 768px) {
  .r5h-mobile-intents { display: none; }
}

/* ── Premier écran sur téléphone (Gary, 04/09/2026) ──────────────────
   Trois défauts mesurés : (1) calé sur la PETITE hauteur d'écran (svh),
   le bandeau laissait remonter le bloc suivant dès que Safari repliait
   sa barre ; (2) le bloc « Marché actif », absolu au pied, chevauchait
   les boutons de 2 px à 375 px (boutons sur deux lignes) ; (3) le
   troisième bouton retombait seul à la ligne. Ici : hauteur réellement
   visible (dvh, repli svh), bloc marché dans le flux sous les boutons
   avec un écart garanti, et une grille de boutons assumée sous 400 px. */
@media (max-width: 767px) {
  .r5-hero {
    height: auto; min-height: 100svh; min-height: 100dvh;
    flex-direction: column; justify-content: flex-end; align-items: stretch;
  }
  .r5h-inner { padding-bottom: 28px; }
  .r5h-market-line { position: static; }
}
@media (max-width: 400px) {
  .r5h-mobile-intents { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .r5h-intent--primary { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .r5h-mobile-intents { animation: none; }
}