/* =====================================================================
   G6M_HERO_SLIDES_V1400 — deux bannieres pour le heros d'accueil.
   28/09/2026, revision 2.

   Couche « mascotte » : la banniere GTA6Modding (crocodile rose, Vice City),
   fournie en 3840x960 — exactement 4:1. C'est elle qui s'affiche EN PREMIER.
   Couche « legacy »   : l'illustration GTA VI (Jason et Lucia) deja en place ;
   elle prend le relais au bout de 8 s. Son cadrage (V610 / V1010 / V700 /
   responsive-fixes) n'est pas touche : cette feuille n'agit que sur l'opacite.

   Pourquoi 4:1 : le cadre du heros mesure 476 px de haut (hauteur du contenu,
   voir g6m-hero-responsive-v610) pour une largeur egale a celle de la fenetre.
   Son rapport va donc de 2,67:1 en 1280 a 4,01:1 en 1920. Une source en 4:1
   est celle du cas le plus large : jusqu'a ~1900 px de large il n'y a AUCUN
   rognage vertical, uniquement du rognage horizontal, et la mascotte — qui
   occupe toute la hauteur de l'illustration — passe entiere.
   (La revision 1 utilisait une source en 2,5:1 : au-dela de 1190 px le
   crocodile etait coupe en haut et en bas, ce qui avait impose un repli
   « contain » + fond floute. Ce repli ne sert plus que sur les tres grands
   ecrans, cf. plus bas.)

   Principes :
     - fondu croise de 2 s pilote par [data-hero-active] pose sur la section
       par g6m-hero-slides.js ; SANS JavaScript l'attribut vaut 0 et c'est la
       mascotte qui reste affichee (etat par defaut) ;
     - les deux couches sont sous .g6m-sunset-layer et sous le contenu : le
       texte, le compteur et les boutons ne bougent jamais et ne sont jamais
       interceptes (pointer-events: none) ;
     - seules l'opacite et un zoom de 1,5 % sont animes (proprietes composees :
       aucun recalcul de mise en page, donc aucun CLS — mesure a 0) ;
     - prefers-reduced-motion : plus de zoom, fondu ramene a 300 ms (le script
       coupe aussi la rotation automatique).
   ===================================================================== */

/* --- couches ------------------------------------------------------- */
html body .g6m-home-hero__picture,
html body .g6m-hero-slide {
    transition: opacity 2000ms ease-in-out;
    will-change: opacity;
}

html body .g6m-hero-slide {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* ⚠️ Les `!important` ne sont pas decoratifs : la base Tailwind impose
   `img { height: auto }` et la gagnait, l'image debordait alors du cadre en
   gardant son rapport natif. theme.css protege deja .g6m-home-hero__img de la
   meme facon ; la couche mascotte a besoin du meme traitement. */
html body .g6m-hero-slide__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: block;
    object-fit: cover !important;
    /* Source 4:1, cadre au plus 4,01:1 : le rognage vertical est nul ou
       negligeable. Le cadrage vertical n'a donc plus d'effet sur grand ecran ;
       50 % est le reglage neutre. */
    object-position: 50% 50% !important;
    pointer-events: none;
}

/* --- ETAT PAR DEFAUT : la mascotte ---------------------------------
   Sans JavaScript, sans attribut, ou a [data-hero-active="0"], c'est la
   nouvelle banniere qui s'affiche. La banniere GTA VI prend le relais a
   [data-hero-active="1"].
   Ordre dans le DOM : legacy d'abord, mascotte ensuite — donc meme si cette
   feuille ne se chargeait pas, c'est encore la mascotte qui serait visible. */
html body .g6m-home-hero__picture {
    opacity: 0;
}

html body .g6m-hero-slide--mascotte {
    opacity: 1;
}

html body .g6m-home-hero[data-hero-active="1"] .g6m-home-hero__picture {
    opacity: 1;
}

html body .g6m-home-hero[data-hero-active="1"] .g6m-hero-slide--mascotte {
    opacity: 0;
}

/* --- tres grands ecrans (> 2000 px) ---------------------------------
   Au-dela de 4 x 476 = 1904 px de large, le cadre redevient plus large que
   4:1 et le rognage vertical reprend : en 2560 il atteint 25 %. On repasse
   alors l'image en entier (contain), calee a gauche pour rester a l'ecart du
   texte, et on comble la droite avec la meme image floutee (variante 768, la
   plus legere : a ce niveau de flou le detail ne se voit pas).
   Le seuil est a 2000 px et non a 1904 pour qu'un ecran 1920 — le cas le plus
   courant, ou le rognage est de 0,2 % — garde le rendu plein cadre. */
@media (min-width: 2000px) {
    html body .g6m-hero-slide--mascotte .g6m-hero-slide__img {
        object-fit: contain !important;
        object-position: 0% 50% !important;
    }

    html body .g6m-hero-slide--mascotte::before {
        content: "";
        position: absolute;
        /* deborde de 6 % : le flou mange les bords, sans ca une bande claire
           apparait sur les quatre cotes. */
        inset: -6%;
        background-image: url("/site/public/assets/img/hero/gta6modding-hero-mascotte-768.webp");
        background-size: cover;
        background-position: 50% 50%;
        filter: blur(30px) saturate(1.1) brightness(0.72);
        pointer-events: none;
    }
}

/* --- voile de lisibilite propre a la mascotte ------------------------
   La banniere historique est sombre (nuit, ciel violet) : le voile commun
   .g6m-sunset-layer suffit. La mascotte, elle, est un aplat rose tres clair
   sur presque toute la hauteur ; releve au banc d'essai en 390x844, la ligne
   « MODS EXCLUSIFS · ACTUALITES · GLITCHS » et la legende du compteur
   passaient sous le seuil de lisibilite.
   Voile PROPRE A CETTE COUCHE (la banniere historique n'est pas touchee),
   plus soutenu sous 1024 px ou le texte couvre toute l'image. */
html body .g6m-hero-slide--mascotte::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom,
        rgba(8, 6, 14, 0.38) 0%,
        rgba(8, 6, 14, 0.20) 45%,
        rgba(8, 6, 14, 0.40) 100%);
}

@media (max-width: 1023px) {
    /* 28/09, revision 3 : la source mobile est desormais une vraie image
       portrait ou le crocodile occupe la MOITIE BASSE. Le voile precedent
       remontait a 0,62 en bas et l'y noyait, alors que c'est justement la
       zone ou le texte n'a pas besoin d'aide : les boutons Forum / Actus /
       Mods / Carte ont leur propre fond opaque. On garde donc le voile en
       haut (titre et accroche) et on le relache vers le bas. */
    html body .g6m-hero-slide--mascotte::after {
        background: linear-gradient(to bottom,
            rgba(8, 6, 14, 0.60) 0%,
            rgba(8, 6, 14, 0.42) 38%,
            rgba(8, 6, 14, 0.26) 70%,
            rgba(8, 6, 14, 0.22) 100%);
    }
}

/* --- zoom tres leger de la mascotte quand elle est affichee ---------
   Lie a l'etat 0, qui est maintenant celui de la mascotte. */
@keyframes g6m-hero-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.015); }
}

html body .g6m-home-hero:not([data-hero-active="1"]) .g6m-hero-slide--mascotte .g6m-hero-slide__img {
    animation: g6m-hero-zoom 10s ease-out forwards;
}

/* --- cadrage par palier -------------------------------------------- */
@media (max-width: 1023px) and (min-width: 640px) {
    html body .g6m-hero-slide__img {
        /* Tablette : le cadre se rapproche du carre, le rognage devient
           franchement HORIZONTAL. La mascotte occupe le tiers gauche de
           l'illustration : on y recentre, sinon elle sort du cadre. */
        object-position: 22% 50% !important;
    }
}

@media (max-width: 639px) {
    html body .g6m-hero-slide__img {
        /* Mobile : source PORTRAIT dediee, 1080x1920 (9:16), fournie telle
           quelle — plus aucune composition ni fond floute depuis le 28/09.
           Le cadre mobile est en ~0,62 contre 0,5625 pour l'image : le
           rognage vertical est de l'ordre de 9 %. Sur les telephones les plus
           etroits le cadre devient PLUS haut que l'image et le rognage passe
           a l'horizontale : 35 % garde le crocodile, qui occupe le tiers
           gauche ; 55 % privilegie le bas, ou il se trouve. */
        object-position: 35% 55% !important;
    }
}

/* --- indicateurs ---------------------------------------------------- */
.g6m-hero-dots {
    position: absolute;
    /* Centrees en bas, sur demande de l'exploitant (28/09).
       ⚠️ Mesure en 1920 : la rangee de boutons se termine a y=554 et le heros
       a y=586 — 32 px seulement. Des pastilles calees en bas venaient donc
       toucher les boutons. On leur reserve une bande propre en ajoutant une
       marge sous .g6m-hero-actions (ci-dessous), sinon le centrage horizontal
       est correct mais le rendu reste serre. */
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* ⚠️ Au-dessus de .g6m-home-hero__content, qui est en position:relative,
       z-index:10 et occupe TOUTE la section : a z-index 3 les pastilles etaient
       visibles mais aucun clic ne les atteignait (elementFromPoint renvoyait
       le conteneur de contenu). Verifie au navigateur. */
    z-index: 12;
    padding: 0.32rem 0.5rem;
    border-radius: 999px;
    background: rgba(8, 6, 14, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* La bande reservee aux pastilles : sans elle, elles se posent sur la rangee
   de boutons. 1,7 rem = leur hauteur plus le jeu au-dessus et en dessous. */
html body .g6m-home-hero .g6m-hero-actions {
    margin-bottom: 1.7rem !important;
}

/* Pastilles (28/09, revision 2) — l'ancien dessin etait un rond de 9 px cerne
   d'un halo rose de 10 px de flou : a l'ecran, un point net entoure d'une tache
   floue. On garde le repere mais en le rendant net : la pastille ACTIVE devient
   une petite barre coloree, les inactives de simples points pleins, sans
   bordure ni ombre portee. La zone cliquable est etendue a 24 px par un
   pseudo-element transparent — la cible tactile recommandee — sans agrandir le
   dessin. */
.g6m-hero-dots__dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.32);
    cursor: pointer;
    transition: width 260ms ease, background-color 260ms ease, opacity 260ms ease;
}

/* Cible tactile invisible, centree sur le point. Mesure a 390 px : le point
   fait 7 px, donc -9 px de debord de chaque cote = 25 px de zone cliquable,
   juste au-dessus du minimum recommande de 24 px (a -8 px on tombait a 23). */
.g6m-hero-dots__dot::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: inherit;
}

.g6m-hero-dots__dot:hover {
    background: rgba(255, 255, 255, 0.62);
}

.g6m-hero-dots__dot[aria-pressed="true"] {
    width: 22px;
    background: linear-gradient(90deg, #ff0b8b, #8d38ff);
}

.g6m-hero-dots__dot:focus-visible {
    outline: 2px solid #00d9ff;
    outline-offset: 3px;
}

@media (max-width: 639px) {
    .g6m-hero-dots { bottom: 0.55rem; }
    .g6m-hero-dots__dot { width: 7px; height: 7px; }
    .g6m-hero-dots__dot[aria-pressed="true"] { width: 20px; }
}

/* --- mouvement reduit ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html body .g6m-home-hero__picture,
    html body .g6m-hero-slide {
        transition-duration: 300ms;
    }

    html body .g6m-home-hero:not([data-hero-active="1"]) .g6m-hero-slide--mascotte .g6m-hero-slide__img {
        animation: none;
    }

    .g6m-hero-dots__dot { transition: none; }
}