/* BY Energie | Correctifs responsive du 23 octobre 2026.
   Charge apres les styles compiles, sans modifier les interactions React. */

/* Le halo absolu de 600 px doit rester dans la section qui le decoupe.
   Sans ce contexte, il agrandit la zone defilable de la page sur mobile. */
.cinema {
  position: relative;
}

/* Une navigation ouverte doit rester utilisable en paysage et avec du zoom. */
.mobile-menu {
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 820px) {
  /* Le badge ne doit pas imposer sa largeur intrinseque a toute la colonne. */
  .hero-content {
    width: 100%;
    min-width: 0;
  }

  .eyebrow {
    max-width: 100%;
    white-space: normal;
  }

  .eyebrow > span {
    flex-shrink: 0;
  }

  /* Logo officiel dans l'espace entre Contact et le bouton telephone.
     Image decorative : le nom est deja porte par le logo de l'en-tete. */
  .mobile-menu::after {
    content: "";
    order: 1;
    flex: 1 0 100px;
    width: 220px;
    max-width: 75%;
    min-height: 100px;
    margin: 18px auto;
    background: url("/assets/images/logo-officiel.jpeg") center / contain no-repeat;
    mix-blend-mode: screen;
  }

  .mobile-menu > .menu-call {
    order: 2;
    flex-shrink: 0;
  }

  .mobile-menu > button {
    flex-shrink: 0;
  }
}