/* Hero style Ligue 1+ : ~648px + léger débord sous « En direct maintenant » */

/* Scroll libre hors player — un seul root (html), body ne scroll pas */
html {
  overflow-x: hidden;
  overflow-y: scroll;
}
body:not(.empire-match-immersive):not(.empire-match-rv):not(.lmds-welcome-open) {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
}

.l1-featured-hero {
  --l1-fh-nav: 68px;
  --l1-fh-h: 648px;
  --l1-fh-bleed: 200px;
  position: relative;
  display: block !important;
  width: 100%;
  height: var(--l1-fh-h) !important;
  min-height: var(--l1-fh-h) !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  /* Monte sous la nav, déborde un peu en bas, pas de reflet latéral */
  clip-path: inset(
    calc(-1 * var(--l1-fh-nav)) 0 calc(-1 * var(--l1-fh-bleed)) 0
  );
  -webkit-clip-path: inset(
    calc(-1 * var(--l1-fh-nav)) 0 calc(-1 * var(--l1-fh-bleed)) 0
  );
  background: transparent;
  color: #fff;
  /* Ne capte pas les clics sous le débord (sinon En direct / À venir bloqués) */
  pointer-events: none !important;
  z-index: 1;
}

.l1-featured-hero[hidden] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.l1-fh__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s ease;
  pointer-events: none;
  overflow: visible;
}

.l1-fh__slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  z-index: 1;
}

/* Seuls les contrôles hero restent cliquables */
.l1-fh__cta,
.l1-fh__nav,
.l1-fh__dots,
.l1-fh__dot,
.l1-fh__pause {
  pointer-events: auto !important;
}

/* Calque média : sous la nav + déborde sous le hero (sans reflet) */
.l1-fh__media {
  position: absolute;
  top: calc(-1 * var(--l1-fh-nav));
  left: 50%;
  width: 100vw;
  height: calc(100% + var(--l1-fh-nav) + var(--l1-fh-bleed));
  margin-left: -50vw;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.l1-fh__bg {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-color: #0a0a0a;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transition: opacity 0.35s ease;
  z-index: 2;
  pointer-events: none;
  will-change: opacity;
}

.l1-fh__slide.is-active .l1-fh__bg.is-zooming {
  /* Zoom désactivé — pas d’animation Ken Burns */
  transform: scale(1.02);
  filter: blur(4px);
  -webkit-filter: blur(4px);
  transition: opacity 0.35s ease;
}

/* Reste au-dessus pendant le fade → crossfade propre, pas de trou noir */
.l1-fh__bg.is-dim {
  opacity: 0;
  pointer-events: none;
}

.l1-fh__stream-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
  z-index: 1;
  pointer-events: none;
  filter: none;
  transform: none;
  background: transparent;
}

.l1-fh__stream-wrap.is-loading {
  opacity: 1;
  visibility: visible;
}

.l1-fh__stream-wrap.is-on {
  opacity: 1;
  visibility: visible;
}

/* Flux hero : zoom cover (coupe les bandes noires latérales du 16:9) */
.l1-fh__stream-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  filter: blur(2.5px);
  -webkit-filter: blur(2.5px);
  transform: translate(-50%, -50%) scale(1.35);
  transform-origin: center center;
  background: #000;
}

.l1-fh__stream-wrap.is-on::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

.l1-fh__stream {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1 !important;
  visibility: visible !important;
  background: #000;
}

.l1-fh__stream-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  pointer-events: none !important;
  display: block;
  transform-origin: center center;
}

.l1-fh__stream-iframe[hidden] {
  display: none !important;
}

.l1-fh__stream-iframe.is-on {
  display: block !important;
}

/* Masque bas doux sur le débord (fondu vers le noir des cartes) */
.l1-fh__media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--l1-fh-bleed) + 48px);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.35) 45%,
    #000 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* Anti-seam fin — ne coupe pas le débord */
.l1-featured-hero::after {
  display: none;
}

.l1-fh__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.28) 0%,
      rgba(0, 0, 0, 0.1) 22%,
      rgba(0, 0, 0, 0.22) 55%,
      rgba(0, 0, 0, 0.7) 88%,
      #000 100%
    ),
    linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, transparent 40%, transparent 60%, rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  z-index: 1;
}

.l1-fh__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0;
  /* Légèrement plus bas dans le hero */
  padding: 72px 24px 40px;
  box-sizing: border-box;
  transform: translateY(28px);
}

.l1-fh__eyebrow,
.l1-fh__live-tag,
.l1-fh__brand,
.l1-fh__logo {
  display: none !important;
}

.l1-fh__title {
  margin: 0 0 32px;
  max-width: 920px;
  color: #fff;
  font-family: resident-primary-font, Roboto-Bold, Arial, Helvetica, sans-serif;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.l1-fh__meta {
  display: none !important;
}

.l1-fh__desc {
  margin: 0 0 44px;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.92);
  font-family: resident-secondary-font, Roboto-Regular, Arial, sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.65;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

.l1-fh__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 14px 28px;
  background: #085fff;
  color: #fff !important;
  border: none;
  border-radius: 2px;
  font-family: resident-primary-font, Roboto-Bold, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none !important;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.l1-fh__cta:hover {
  background: #2772ff;
  transform: translateY(-1px);
}

.l1-fh__nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.l1-fh__nav:hover {
  background: rgba(255, 255, 255, 0.18);
}

.l1-fh__nav--prev {
  left: 12px;
}

.l1-fh__nav--next {
  right: 12px;
}

.l1-fh__nav svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.l1-fh__dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.l1-fh__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
}

.l1-fh__dot.is-active {
  background: #085fff;
}

.l1-fh__pause {
  width: 18px;
  height: 18px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  opacity: 0.85;
}

.l1-fh__pause svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Accueil : plus de padding body — hero démarre à 0, fond passe sous la nav fixe */
.page--home body,
body:has(.page--home),
body:has(#l1-featured-hero),
.page--home {
  /* body padding géré ci-dessous */
}

html:has(.page--home) body,
body:has(.page--home #l1-featured-hero),
body:has(#l1-featured-hero) {
  padding-top: 0 !important;
}

.page--home #main-content-wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

.page--home .section-wrapper,
.page--home .section-wrapper.view,
.page--home .app-container {
  overflow: visible !important;
}

.page--home .section-wrapper,
.page--home .section-wrapper.view {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.page--home #l1-featured-hero {
  margin-top: 0 !important;
  width: 100% !important;
}

/* Espace sous le hero pour le live (comme L1+ après slides 648) */
.page--home #l1-featured-hero + .section-wrapper,
.page--home #l1-featured-hero ~ .section-wrapper {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
  background: transparent;
}

@media (max-width: 860px) {
  .l1-featured-hero {
    --l1-fh-nav: 64px;
    --l1-fh-h: 520px;
    --l1-fh-bleed: 140px;
  }

  .l1-fh__content {
    padding: 48px 16px 28px;
    transform: translateY(18px);
  }

  .l1-fh__title {
    font-size: clamp(1.7rem, 7.2vw, 2.6rem);
  }

  .l1-fh__eyebrow {
    gap: 12px;
    margin-bottom: 28px;
  }

  .l1-fh__logo {
    height: 34px;
    max-width: 132px;
  }

  .l1-fh__title {
    margin-bottom: 22px;
  }

  .l1-fh__meta {
    margin-bottom: 22px;
  }

  .l1-fh__desc {
    margin-bottom: 32px;
  }

  .l1-fh__nav {
    width: 34px;
    height: 34px;
  }

  .l1-fh__nav--prev {
    left: 6px;
  }

  .l1-fh__nav--next {
    right: 6px;
  }
}