/* ============================================================
   hero-page.css — Style premium harmonisé (v12)
   Tailles réduites encore + textures riches (croisillons)
   ============================================================ */

/* HERO ------------------------------------------------------- */
.page-hero {
  min-height: 56vh;
  background-color: #0B0907;
  padding-top: 72px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 70% 55% at 70% 50%, rgba(212,160,23,0.04) 0%, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(212,160,23,0.035) 119px 120px),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(212,160,23,0.018) 79px 80px),
    linear-gradient(180deg, #0E0D0A 0%, #0A0907 100%);
  pointer-events: none;
}
.page-hero::after {
  content: '';
  position: absolute;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212,160,23,0.16) 25%, rgba(212,160,23,0.16) 75%, transparent);
  pointer-events: none;
  display: none;
}
@media (min-width: 1024px) { .page-hero::after { display: block; } }

.page-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5rem 32px 4.25rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.page-hero__eyebrow {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.62rem !important;
  text-transform: uppercase;
  letter-spacing: 0.24em !important;
  color: #B8860B !important;
  margin-bottom: 1.75rem !important;
  display: flex !important;
  align-items: center;
  gap: 1rem;
}
.page-hero__eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: #B8860B;
  flex-shrink: 0;
}

.page-hero__title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(2.25rem, 1.4rem + 2.7vw, 4.4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.018em !important;
  color: #F2EFE8 !important;
  margin: 0 0 2rem !important;
  max-width: 18ch !important;
}
.page-hero__title em {
  font-style: italic !important;
  color: #D4A017 !important;
  font-weight: 400 !important;
}

.page-hero__lede {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1rem, 0.88rem + 0.42vw, 1.2rem) !important;
  color: #B0A496 !important;
  max-width: 50ch !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  margin: 0 !important;
}

@media (max-width: 900px) {
  .page-hero__inner { padding: 3.5rem 20px 2.75rem; }
}

/* PAGE-CTA texturé ------------------------------------------- */
.page-cta {
  background-color: #0A0907 !important;
  background-image:
    radial-gradient(ellipse 70% 90% at 50% 0%, rgba(212,160,23,0.05) 0%, transparent 65%),
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(212,160,23,0.035) 159px 160px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(212,160,23,0.018) 119px 120px),
    linear-gradient(180deg, #0A0907 0%, #0C0B09 100%) !important;
  padding: clamp(4.5rem, 9vh, 6.5rem) 0 !important;
  border-top: 1px solid rgba(212,160,23,0.08);
  position: relative;
  overflow: hidden;
}
.page-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: #B8860B;
}
.page-cta::after {
  content: '';
  position: absolute;
  top: 1.5rem; left: 1.5rem; right: 1.5rem; bottom: 1.5rem;
  background:
    linear-gradient(to right, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) top left / 14px 1px no-repeat,
    linear-gradient(to bottom, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) top left / 1px 14px no-repeat,
    linear-gradient(to left, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) top right / 14px 1px no-repeat,
    linear-gradient(to bottom, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) top right / 1px 14px no-repeat,
    linear-gradient(to right, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) bottom left / 14px 1px no-repeat,
    linear-gradient(to top, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) bottom left / 1px 14px no-repeat,
    linear-gradient(to left, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) bottom right / 14px 1px no-repeat,
    linear-gradient(to top, rgba(184,134,11,0.3) 0, rgba(184,134,11,0.3) 14px, transparent 14px) bottom right / 1px 14px no-repeat;
  pointer-events: none;
}
.page-cta__inner {
  max-width: 1100px !important;
  position: relative;
  z-index: 2;
}
.page-cta p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  font-size: clamp(1.25rem, 0.95rem + 0.85vw, 1.7rem) !important;
  color: #E6DEC9 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.005em;
}

/* Sections noires génériques (portail-wrap, selection) ------- */
.portail-wrap, .selection {
  position: relative;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 159px, rgba(212,160,23,0.022) 159px 160px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(212,160,23,0.012) 119px 120px) !important;
}