/* =====================================================================
   G6M_HERO_FONDU_V1 (19/09/2026) — fondu entre le heros et le fond commun
   V1.1 : le masque ne descend plus a zero (35 % conserves) et le voile bas
   remonte a 92 % d'opacite : les palmiers ne transparaissent plus a travers
   le bas du heros, le fondu va vers un quasi-noir puis vers le fond commun.

   Constat : le heros (image + calque « sunset ») reposait sur un aplat opaque
   #090909 (section, .hero-banner et le degrade bas « from-g6m-bg ») alors que
   le corps de page porte la scene de palmiers (g6m-fond-forum-v1000.css).
   Resultat : une coupure nette, une bande noire, puis la barre Breaking News
   posee sur une autre image.

   Recette :
     1. plus d'aplat sous le heros : le fond commun passe dessous ;
     2. le cadre image est masque en douceur sur ses ~220 px du bas
        (140 px sur mobile) : l'image se dissout dans les palmiers, il n'y a
        plus de bord ;
     3. le degrade bas devient un simple voile translucide (plus d'opaque) ;
     4. une bande de transition douce, teintee neon tres discrete, relie le
        heros a la barre Breaking News.

   Charge apres g6m-hero-decalage-v1010.css ; aucune classe Tailwind inedite.
   ===================================================================== */

html body .g6m-home-hero,
html body .g6m-home-hero .hero-banner,
html body .g6m-home-hero .g6m-home-hero__frame {
    background-color: transparent !important;
}

/* 2. dissolution du bord bas de l'image (et de ses calques) */
html body .g6m-home-hero .g6m-home-hero__frame {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 200px), rgba(0, 0, 0, 0.75) calc(100% - 90px), rgba(0, 0, 0, 0.35) 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 200px), rgba(0, 0, 0, 0.75) calc(100% - 90px), rgba(0, 0, 0, 0.35) 100%);
}

/* 3. l'ancien voile opaque (from-g6m-bg) devient translucide : il ne fait
      plus qu'assombrir legerement le bas pour la lisibilite des boutons. */
html body .g6m-home-hero .g6m-home-hero__frame > .bg-gradient-to-t {
    height: 11rem !important;
    background-image: linear-gradient(to top, rgba(10, 10, 11, 0.92) 0%, rgba(10, 10, 11, 0.55) 45%, transparent 100%) !important;
}

/* 4. bande de transition vers Breaking News : lueur neon tres discrete,
      centree, qui s'eteint avant la barre. */
html body .g6m-home-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 9rem;
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 60% 100% at 50% 100%, rgba(255, 11, 139, 0.08) 0%, rgba(141, 56, 255, 0.05) 45%, transparent 75%),
        linear-gradient(to bottom, transparent 0%, rgba(10, 10, 11, 0.55) 55%, rgba(10, 10, 11, 0.9) 100%);
}

/* La barre Breaking News respire un peu plus et recoit un halo doux au-dessus. */
html body .g6m-breaking-news--home {
    margin-top: 0.35rem !important;
}

html body .g6m-breaking-news--home::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -2.25rem;
    width: min(70rem, 90%);
    height: 2.25rem;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse 50% 100% at 50% 100%, rgba(0, 215, 255, 0.10) 0%, transparent 70%);
}

@media (max-width: 639px) {
    html body .g6m-home-hero .g6m-home-hero__frame {
        -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 130px), rgba(0, 0, 0, 0.75) calc(100% - 60px), rgba(0, 0, 0, 0.35) 100%);
        mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 130px), rgba(0, 0, 0, 0.75) calc(100% - 60px), rgba(0, 0, 0, 0.35) 100%);
    }

    html body .g6m-home-hero .g6m-home-hero__frame > .bg-gradient-to-t {
        height: 7rem !important;
    }

    html body .g6m-home-hero::after {
        height: 6rem;
    }
}