/* ==========================================================================
   HERO & FOND DE PAGE
   Section hero, images de fond fixes, carte info
   ========================================================================== */

/* ── Fonds d'écran fixes ── */
.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.page-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .9s ease;
}

.page-bg-layer.active { opacity: 1; }

.page-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,25,15,.38);
}

/* ── Section Hero ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* Overlay lisibilité texte */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10,25,15,.65) 0%, rgba(10,25,15,.3) 55%, rgba(10,25,15,.55) 100%);
  z-index: 0;
  pointer-events: none;
}

.hero .hero-content { position: relative; z-index: 1; }

/* Hero avec fond image */
.hero.has-bg-section {
  position: relative;
  overflow: hidden;
}

.hero.has-bg-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}

/* ── Contenu Hero ── */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 28px;
  padding-block: 80px 60px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

/* Accroche */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(111,207,66,.50);
  border: 1px solid rgba(111,207,66,.28);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero-eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent-lt);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .55; transform: scale(.85); }
}

.hero-eyebrow span {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent-lt);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* Titre */
.hero h1,
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(50px, 7vw, 88px);
  line-height: .95;
  letter-spacing: 2px;
  color: var(--white);
  margin-bottom: 22px;
  text-shadow: 0 4px 30px rgba(0,0,0,.65);
}

.hero h1 em { color: var(--color-accent-lt); font-style: normal; }

.hero-desc {
  font-size: 17px;
  color: rgba(255,255,255,.62);
  line-height: 1.75;
  max-width: 480px;
  margin-bottom: 34px;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Carte latérale Hero ── */
.hero-card {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(155,155,155,.51);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  transition: transform .35s ease, box-shadow .35s ease;
  position: relative;
  z-index: 2;
}

.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

/* Items d'info dans la carte */
.hero-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.hero-info-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(111,207,66,.12);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.hero-info-icon svg { width: 18px; height: 18px; }

.hero-info-question {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-lt) !important;
  margin-bottom: 3px;
  margin-top: 3px;
}

.hero-info-titre {
  font-size: 14px;
  font-weight: 800;
  color: #ffffff !important;
  line-height: 1.2;
  margin-bottom: 4px;
}

.hero-info-texte {
  font-size: 12px;
  color: #ffffff !important;
  opacity: .85;
  line-height: 1.6;
}

.hero-info-sep { height: 1px; background: rgba(255,255,255,.1); }

/* ── Prochaine sortie (bannière dans la carte) ── */
.next-run {
  background: linear-gradient(135deg, rgb(57 9 9 / 69%), rgba(172,21,21,.8));
  border: 2px solid #991313de;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.next-run-link {
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.next-run-link:hover {
  background: linear-gradient(135deg, rgba(161,9,9,.28), rgba(85,30,30,.18));
  border-color: rgba(111,50,50,.85);
}

.next-run-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(182,20,20,.22);
  border: 1.5px solid #991313de;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.next-run-icon svg  { width: 20px; height: 20px; }
.next-run-arrow     { flex-shrink: 0; opacity: .7; }
.next-run-info      { flex: 1; }
.next-run-info .nr-date  { font-size: 11px; font-weight: 700; color: var(--color-accent-lt); letter-spacing: .5px; }
.next-run-info .nr-title { font-size: 14px; font-weight: 700; color: #ffffff; margin-top: 2px; }
.next-run-info .nr-meta  { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }