/* HBCHM V5 - accueil immersif sur smartphone uniquement. */
@media (max-width: 767px) {
  body:has(.hb-banner-animated) { overflow-x: clip; }
  body:has(.hb-banner-animated) .top { position: relative; z-index: 100; }
  .hb-banner-animated { height: calc(100svh - var(--hb-mobile-header-height, 70px)) !important; min-height: 480px !important; max-height: none !important; overflow: hidden !important; position: relative; background: #071b2e !important; }
  .hb-banner-animated .hb-hero-frame { height: 100% !important; width: 100% !important; aspect-ratio: auto !important; position: relative; overflow: hidden; background: #071b2e; }
  .hb-hero-frame .hb-bg { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center center; }
  .hb-hero-frame .hb-player-woman { left: -12% !important; right: auto !important; top: 32% !important; width: 67% !important; max-width: none !important; }
  .hb-hero-frame .hb-player:not(.hb-player-woman) { right: -12% !important; left: auto !important; top: 30% !important; width: 72% !important; max-width: none !important; }
  .hb-hero-frame .hb-logo { left: 14% !important; top: 9% !important; width: 72% !important; height: auto !important; }
  .hb-hero-frame .hb-slogan { right: 10% !important; bottom: 18% !important; width: 80% !important; height: auto !important; }
  .hb-hero-frame .hb-baseline { left: 5% !important; bottom: 12% !important; width: 90% !important; font-size: clamp(9px, 2.7vw, 14px) !important; letter-spacing: .4px !important; white-space: normal !important; }
  .hb-hero-links { position: absolute !important; left: 0; right: 0; bottom: 1%; z-index: 8; padding: 5px 10px !important; }
  .hb-hero-links a, .hb-hero-links button { padding: 8px 11px !important; font-size: 10px !important; }
  .hb-mobile-scroll-cue { position: absolute; bottom: 57px; left: 50%; transform: translateX(-50%); z-index: 9; color: white; text-decoration: none; font: 700 10px/1.4 system-ui,sans-serif; letter-spacing: 1.2px; text-align: center; text-shadow: 0 2px 5px #0009; }
  .hb-mobile-scroll-cue::after { content: '⌄'; display: block; font-size: 25px; line-height: 1; }
}
@media (max-width: 767px) and (orientation: landscape) { .hb-banner-animated { min-height: 320px !important; } .hb-hero-frame .hb-logo { top: 2% !important; width: 35% !important; left: 32% !important; } .hb-hero-frame .hb-player-woman { width: 35% !important; top: 8% !important; left: 0 !important; } .hb-hero-frame .hb-player:not(.hb-player-woman) { width: 37% !important; top: 7% !important; right: 0 !important; } .hb-hero-frame .hb-slogan { width: 42% !important; right: 29% !important; bottom: 18% !important; } }

/* Ajustement mobile : slogan plus discret, invitation plus basse. */
@media (max-width: 767px) and (orientation: portrait) {
  .hb-banner-animated .hb-hero-frame .hb-slogan {
    width: 44% !important;
    right: 28% !important;
    bottom: 19% !important;
  }
  .hb-banner-animated .hb-mobile-scroll-cue {
    bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Logo du club remonté sur l’accueil mobile en portrait. */
@media (max-width: 767px) and (orientation: portrait) {
  .hb-banner-animated .hb-hero-frame .hb-logo { top: 3% !important; }
}

/* Sur mobile, la première vue est entièrement consacrée à l'animation.
   La navigation arrive immédiatement après, au premier défilement. */
@media (max-width: 767px) {
  body:has(.hb-banner-animated) .hb-banner-animated {
    height: 100svh !important;
    min-height: 0 !important;
  }
  body:has(.hb-banner-animated) > header.top {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    z-index: 100 !important;
  }
  body:has(.hb-banner-animated) .hb-mobile-scroll-cue {
    bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Invitation au défilement visible uniquement sur l’accueil mobile. */
.hb-mobile-scroll-cue{display:none}
@media(max-width:767px){.hb-banner-animated .hb-mobile-scroll-cue{display:block!important;position:absolute!important;left:50%!important;bottom:max(18px,env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%)!important;z-index:50!important;white-space:nowrap!important;pointer-events:auto!important}}