/* ============================================
   OVERRIDES v6zd3 - fix mobile portrait 390px critique
   Charge APRES overrides-v6zd.css
   ============================================ */

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

/* ============================================
   PART 1 - HERO mobile portrait : titre tronque "ANIM SHAC"
   ============================================ */
@media (max-width: 767px) {
  .hero-type, .hero h1, .hero-title, .hero .typo-massive,
  #hero-type, .hero-type-fill {
    font-size: clamp(38px, 11vw, 72px) !important;
    letter-spacing: -0.04em !important;
    line-height: 0.95 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    transform: none !important;
  }

  .hero, .hero-inner, .hero-content, .hero-frame, .hero-center {
    max-width: 100vw !important;
    overflow-x: clip !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 430px) {
  .hero-type, .hero h1, .hero-title, #hero-type {
    font-size: clamp(32px, 10vw, 60px) !important;
    letter-spacing: -0.05em !important;
  }
}

@media (max-width: 390px) {
  .hero-type, .hero h1, .hero-title, #hero-type {
    font-size: clamp(30px, 9.5vw, 56px) !important;
  }
}

/* ============================================
   PART 2 - R&Z superposition : 
   .rz-content position:absolute inset:0 overlaye sur la video
   et chevauche les rz-corner. Sur mobile, retour au flow normal.
   ============================================ */
@media (max-width: 767px) {
  .rz, #serie {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    overflow: hidden !important;
  }

  .rz-pin {
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }

  /* Video : passe en haut du flow, dimensions limitees */
  .rz-video, #rz-video, .rz video {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    max-height: 240px !important;
    object-fit: cover !important;
    display: block !important;
    background: linear-gradient(135deg, #1a0f0a 0%, #2a1810 50%, #0a0506 100%) !important;
  }

  /* rz-content : sort du position:absolute, devient bloc normal */
  .rz-content, .rz-pin .rz-content {
    position: relative !important;
    inset: auto !important;
    top: auto !important; left: auto !important;
    right: auto !important; bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Title centre, contraint, bornes mobile serrees */
  .rz-title, #rz-title {
    font-size: clamp(40px, 11vw, 72px) !important;
    line-height: 0.95 !important;
    margin: 0 !important;
    gap: 0.18em !important;
  }

  /* Tag visible avec espace */
  .rz-tag {
    margin-top: 14px !important;
    font-size: 11px !important;
    max-width: 90% !important;
  }

  /* Meta : 2x2 propre */
  .rz-meta {
    margin-top: 18px !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px 18px !important;
    padding: 0 8px !important;
  }

  .rz-cta {
    margin-top: 18px !important;
  }

  /* Eyebrow plus tassee */
  .rz-eyebrow {
    margin-bottom: 16px !important;
  }

  /* rz-corner : masques absolutes qui chevauchent le contenu sur mobile */
  .rz-corner, .rz-corner.tl, .rz-corner.tr,
  .rz-corner.bl, .rz-corner.br {
    display: none !important;
  }

  /* Mask + gradient overlay : kill sur mobile */
  .rz-mask, .rz-gradient {
    display: none !important;
  }

  /* Anti-IO reveal stuck-at-0 : force visible */
  #rz-title, .rz-title,
  .rz-eyebrow, .rz-meta, .rz-tag, .rz-cta {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition: none !important;
  }
}

/* ============================================
   PART 3 - Petits ecrans iPhone Mini etc.
   ============================================ */
@media (max-width: 390px) {
  .rz-title, #rz-title {
    font-size: clamp(34px, 9.5vw, 60px) !important;
  }
  .rz-video, #rz-video, .rz video {
    max-height: 200px !important;
  }
}

/* v6zd4 — vidéo R&Z pleine largeur */
#rz-teaser, .rz-video, .serie video, .serie-video, video.rz, [data-rz-video] {
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: none !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
#serie, .serie, .rz-section { overflow: visible !important; }
@media (min-width: 1024px) {
  #rz-teaser, .rz-video, .serie video { max-height: 70vh !important; }
}

/* === v6zd5 — fix email HELLO@ANIMSHACK.COM tronqué (M sur ligne suivante) === */
.contact a[href^="mailto"],
.contact .email,
.contact-email,
a[href*="@animshack"],
a[href*="HELLO@"] {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  display: inline-block !important;
  max-width: 100% !important;
}
@media (max-width: 767px) {
  .contact a[href^="mailto"],
  .contact .email,
  .contact-email,
  a[href*="@animshack"],
  a[href*="HELLO@"] {
    font-size: clamp(16px, 5vw, 22px) !important;
    letter-spacing: -0.01em !important;
  }
  .contact h2 { font-size: clamp(40px, 11vw, 64px) !important; }
}
@media (max-width: 390px) {
  .contact a[href^="mailto"],
  .contact .email,
  .contact-email,
  a[href*="@animshack"],
  a[href*="HELLO@"] {
    font-size: clamp(14px, 4.5vw, 18px) !important;
  }
}
footer, .footer, .site-footer { overflow: visible !important; }
footer dt, footer dd, .footer-item, .signal-status {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  font-size: clamp(11px, 3.2vw, 14px) !important;
}
@media (max-width: 767px) {
  .hero h1, .hero .typo-massive, .hero-type, #hero-type {
    word-break: break-word !important;
  }
}