/* ============================================
   OVERRIDES v6zd — fix hero tronqué + gaps noirs au scroll
   Charge APRÈS overrides-v6zc.css
   ============================================ */

/* ============================================
   PART 1 — HERO TITLE OVERFLOW VIEWPORT
   ============================================ */

html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

.hero, .hero-frame, .hero-center {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

.hero h1,
.hero .hero-type,
.hero-type,
.hero-type-fill {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
  hyphens: none !important;
  text-align: center !important;
  transform: none !important;
  transform-origin: center !important;
}

.hero-type, .hero h1 {
  letter-spacing: -0.01em !important;
}

/* Desktop (>=1024px) — borne haute serrée pour 10 chars ANIM SHACK */
@media (min-width: 1024px) {
  .hero-type, .hero h1 {
    font-size: clamp(80px, 10.5vw, 180px) !important;
    line-height: 0.95 !important;
  }
}

/* Tablet (768-1023) */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-type, .hero h1 {
    font-size: clamp(64px, 10vw, 130px) !important;
    line-height: 1 !important;
  }
}

/* Mobile (<768) */
@media (max-width: 767px) {
  .hero-type, .hero h1 {
    font-size: clamp(48px, 13vw, 96px) !important;
    line-height: 1.02 !important;
  }
}

/* Petit mobile (<390) */
@media (max-width: 390px) {
  .hero-type, .hero h1 {
    font-size: clamp(40px, 12vw, 72px) !important;
  }
}

/* ============================================
   PART 2 — GROS GAPS NOIRS AU SCROLL
   ============================================ */

/* Sections : padding cohérent, plus de min-height fantôme */
section:not(.hero) {
  min-height: auto !important;
  padding-top: clamp(60px, 8vw, 120px) !important;
  padding-bottom: clamp(60px, 8vw, 120px) !important;
}

/* Hero garde sa hauteur full viewport */
.hero, #hero, section.hero {
  min-height: 100vh !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Pinned sections (manifeste, rz) : doivent rester sticky-able mais sans
   imposer un trou vide si le pin se relâche */
.manifeste-pin, .rz-pin {
  min-height: 100vh !important;
}

/* Anti GSAP/ScrollTrigger qui laisse les éléments cachés */
.gsap-reveal, [data-reveal], .reveal,
.pillar, .practices-list li,
.manifeste h2, .manifeste .lead, .m-line, .manifeste-lines,
.manifeste-foot, .manifeste-stats,
.contact h2, .contact .lead, .contact-grid,
.rz-content, .rz-eyebrow, .rz-tag, .rz-meta {
  opacity: 1 !important;
  visibility: visible !important;
}

/* WebGL canvas plein écran : doit rester fixed et ne pas créer de vide */
#webgl, canvas#webgl {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Vidéo R&Z : éviter qu'elle laisse une zone noire si pas chargée */
.rz-video, #rz-video {
  background: #0a0a0a !important;
  max-height: 100vh !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Container sections : pas de margin verticale orpheline */
.manifeste, .practices, .rz, .contact, #manifeste, #serie, #contact {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Body : positionnement net */
body {
  background: var(--bg-deep, #0A0A0A);
}
main, .page, #app {
  background: transparent;
}

/* Filets blancs/noirs résiduels entre sections : zéro espace flottant */
section + section {
  margin-top: 0 !important;
  border-top: 0 !important;
}

/* ============================================
   PART 3 — KILL SCROLL-JACKING SUR MANIFESTE + R&Z
   Sections parents 2.5-3x viewport pour pin sticky
   qui n'animait rien → 3000px de NOIR MORT
   ============================================ */

/* Sections : collapse à hauteur du contenu réel */
#manifeste, .manifeste,
#serie, .rz {
  height: auto !important;
  min-height: auto !important;
}

/* Pins : kill le sticky, retour à flux normal */
.manifeste-pin, .rz-pin {
  position: relative !important;
  top: auto !important;
  min-height: auto !important;
  height: auto !important;
}

/* Eviter le débordement du contenu */
.manifeste-stage, .rz-content {
  height: auto !important;
  min-height: auto !important;
}

/* Vidéo R&Z : si elle ne charge pas, ne pas réserver 100vh de noir */
.rz, #serie {
  padding-top: clamp(60px, 8vw, 120px) !important;
  padding-bottom: clamp(60px, 8vw, 120px) !important;
}
.rz-video, #rz-video {
  position: relative !important;
  height: clamp(280px, 56vw, 720px) !important;
  width: 100% !important;
  display: block !important;
  background: linear-gradient(135deg, #1a0a05, #0a0a0a) !important;
}
.rz-mask, .rz-gradient {
  pointer-events: none !important;
}