/* ============================================================
   Hero Parallax — 4 couches "La Lutte est Belle"
   UD CGT 2A
   ============================================================ */

.hero-parallax {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 940px;
  overflow: hidden;
  background: transparent;
}

/* ---- Couches ---- */
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  will-change: transform;
  pointer-events: none;
}

/* ---- Illustration principale ---- */
.layer-main {
  background-position: center center;
  background-size: cover;
  opacity: 1;
  animation: mainIn 1.4s 0.2s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes mainIn {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Overlay dégradé ---- */
.hero-parallax__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(10,10,10,.82) 0%,
    rgba(10,10,10,.50) 52%,
    rgba(10,10,10,.10) 100%
  );
  z-index: 10;
  pointer-events: none;
}

/* ---- Contenu texte ---- */
.hero-parallax__content {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
  z-index: 20;
  color: #fff;
  max-width: 680px;
}

/* ---- Animation titre ligne par ligne ---- */
@keyframes titleLineIn {
  from { opacity: 0; transform: translateY(60px) skewY(2deg); }
  to   { opacity: 1; transform: translateY(0)    skewY(0deg); }
}

.title-line {
  display: block;
  animation: titleLineIn .7s cubic-bezier(.16,1,.3,1) both;
}
.title-line:nth-child(1) { animation-delay: .25s; }
.title-line:nth-child(2) { animation-delay: .5s;  }

.title-line--accent {
  color: #F5B800;
  white-space: nowrap;
  font-size: 0.78em;
}

/* ---- Animation éléments suivants ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-anim {
  animation: heroFadeUp .6s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--anim-delay, 1s);
}

.hero-parallax__logo {
  width: clamp(80px, 10vw, 130px);
  margin-bottom: 1.5rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.5));
}

.hero-parallax__badge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.hero-parallax__title {
  font-family: var(--font-head);
  font-size: clamp(2.6rem, 5.2vw, 4.8rem);
  font-weight: 700;
  line-height: 1.08;
  text-shadow: 0 2px 8px rgba(0,0,0,.9), 0 6px 32px rgba(0,0,0,.65);
  margin-bottom: 1.25rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.hero-parallax__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: rgba(255,255,255,.95);
  line-height: 1.55;
  margin-bottom: .6rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

.hero-parallax__subtitle {
  font-size: clamp(.85rem, 1.3vw, .95rem);
  color: rgba(255,255,255,.65);
  font-family: var(--font-quote);
  font-style: italic;
  margin-bottom: 2rem;
  line-height: 1.7;
}

.hero-parallax__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---- Newsletter overlay ---- */
.hero-nl-btn:hover { background: #F5B800 !important; }

@media (max-width: 768px) {
  .hero-nl-wrap { display: none; }
}

/* ---- Scroll indicator ---- */
.hero-parallax__scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  color: rgba(255,255,255,.55);
  font-family: var(--font-head);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  animation: scrollPulse 2.5s 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { transform: translateX(-50%) translateY(0); opacity: .55; }
  50%     { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .layer-main { background-size: 80% auto; background-position: 70% center; }
}

@media (max-width: 600px) {
  .hero-parallax { max-height: 700px; }

  .layer-main {
    background-size: cover;
    background-position: 65% center;
    opacity: 1;
  }

  .hero-parallax__content {
    left: 50%;
    top: auto;
    bottom: 7rem;
    transform: translateX(-50%);
    text-align: center;
    width: 88%;
  }
  .hero-parallax__actions { justify-content: center; }
  .hero-parallax__title { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .title-line--accent { white-space: normal; font-size: 1em; }
}