/* ==========================================================================
   G6M_HERO_RESPONSIVE_V610
   Héros de la page d'accueil — rendu responsive (mobile et tablette).

   PROBLÈME CORRIGÉ
   .g6m-home-hero__frame imposait une hauteur FIXE — 420px, clamp(280px,
   42vw, 420px) sous 1024px, clamp(240px, 52vw, 320px) sous 768px — et
   .g6m-home-hero__content était en position:absolute; inset:0. Le contenu
   ne pouvait donc pas repousser la section, et .g6m-home-hero, qui porte
   overflow:hidden, le rognait purement et simplement.

   Mesures relevées avant correction :
       375px de large : 240px disponibles pour 409px de contenu
                        « Forum » coupé de 36px, « Actus » de 100px,
                        « Mods » entièrement invisible.
       768px de large : 322px disponibles pour 451px de contenu.

   PRINCIPE
   Sous 1024px, l'illustration devient une couche de fond en position
   absolue et le contenu reprend le flux normal : c'est lui qui donne sa
   hauteur à la section. min-height reprend exactement les anciennes
   hauteurs, donc l'aspect ne change pas tant que le contenu tient ;
   la section s'agrandit au lieu de couper quand il ne tient pas.

   PORTÉE
   Rien ne s'applique au-dessus de 1023px : le rendu desktop reste
   strictement celui d'origine.
   ========================================================================== */

@media (max-width: 1023px) {

    html body .g6m-home-hero {
        position: relative;
        overflow: hidden;
        max-width: 100%;
    }

    /* 1. L'illustration passe en couche de fond et épouse la hauteur réelle. */
    html body .g6m-home-hero__frame,
    html body .g6m-home-hero__frame.hero-banner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }

    /* 2. Le contenu reprend le flux et porte la hauteur de référence. */
    html body .g6m-home-hero__content {
        position: relative;
        inset: auto;
        z-index: 10;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: clamp(280px, 42vw, 420px);
        padding: 1rem 0 1.25rem;
    }

    html body .g6m-home-hero__main {
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    html body .g6m-home-hero__content {
        min-height: clamp(240px, 52vw, 320px);
        padding: 1.1rem 0 1.4rem;
    }
}

/* --------------------------------------------------------------------------
   3. Boutons — une rangée centrée qui se replie proprement, au lieu de la
      colonne de trois qui débordait. Au-dessus de 640px le balisage passe
      déjà en rangée : rien n'est touché.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    html body .g6m-home-hero__main > div:last-child {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
    }

    html body .g6m-home-hero__main > div:last-child > a {
        flex: 0 1 auto;
        min-width: 0;
        padding-left: 1rem;
        padding-right: 1rem;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }
}

@media (max-width: 359px) {
    html body .g6m-home-hero__main > div:last-child {
        gap: 0.45rem;
    }

    html body .g6m-home-hero__main > div:last-child > a {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        font-size: 0.82rem;
    }
}

/* --------------------------------------------------------------------------
   4. Compteur — marge de sécurité sur les très petits écrans.
   -------------------------------------------------------------------------- */
@media (max-width: 340px) {
    html body .g6m-home-hero .g6m-release-countdown__row {
        gap: 0.28rem;
    }

    html body .g6m-home-hero .g6m-release-countdown__unit {
        min-width: 3.25rem !important;
        padding-left: 0.35rem !important;
        padding-right: 0.35rem !important;
    }
}