/* =====================================================================
   G6M_MASCOTTE_VICE_V1 (29/09/2026) — Vice, la mascotte de GTA6Modding.

   Vice est le visage de la COMMUNAUTE, pas celui du jeu : Jason et Lucia
   restent GTA VI. Il n'apparait donc jamais a cote d'un contenu, uniquement
   la ou le site s'adresse au visiteur (accueil, 404, etats vides, intros).

   Tout est porte par .g6m-mascot : aucune classe globale n'est touchee, la
   feuille peut etre retiree sans effet de bord ailleurs.

   Trois tailles :
     --xl  accueil et 404      (image jusqu'a 460 px de haut, deborde du bloc)
     --md  intro de page       (240 px)
     --sm  etat vide           (150 px)
   ===================================================================== */

.g6m-mascot {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    /* La mascotte peut deborder vers le haut : c'est ce qui donne la
       profondeur demandee. overflow reste visible, mais le bloc conserve une
       marge suffisante pour que rien ne soit rogne par la section suivante. */
    overflow: visible;
}

.g6m-mascot--gauche {
    grid-template-columns: auto minmax(0, 1fr);
}

.g6m-mascot--gauche .g6m-mascot__figure { order: -1; }

/* --- variante « section » : bloc autonome, cadre neon ---------------- */
.g6m-mascot--section {
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 1.25rem;
    border: 1px solid rgba(255, 11, 139, 0.28);
    background:
        radial-gradient(120% 140% at 88% 50%, rgba(255, 11, 139, 0.16) 0%, rgba(141, 56, 255, 0.10) 40%, transparent 72%),
        linear-gradient(135deg, rgba(18, 10, 32, 0.92), rgba(10, 8, 20, 0.94));
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.45);
}

/* --- variante « inline » : pose dans un bloc existant ---------------- */
.g6m-mascot--inline {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* --- textes ---------------------------------------------------------- */
.g6m-mascot__content { min-width: 0; }

.g6m-mascot__kicker {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00d7ff;
}

.g6m-mascot__title {
    margin: 0;
    font-family: Rajdhani, Orbitron, Inter, system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.1;
    font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    color: #fff;
}

.g6m-mascot__text {
    margin: 0.75rem 0 0;
    max-width: 46ch;
    color: #a0a0b0;
    line-height: 1.6;
}

.g6m-mascot__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* --- la mascotte ----------------------------------------------------- */
.g6m-mascot__figure {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Halo derriere la silhouette. Un radial-gradient plutot qu'un filtre :
   aucun cout de compositing, et la transparence du PNG reste intacte. */
.g6m-mascot__glow {
    position: absolute;
    inset: -12% -8% -6%;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(52% 46% at 50% 52%,
        rgba(255, 11, 139, 0.38) 0%,
        rgba(141, 56, 255, 0.22) 42%,
        transparent 72%);
    filter: blur(6px);
}

.g6m-mascot__picture { position: relative; z-index: 1; display: block; }

/* ⚠️ Les `!important` sur les dimensions ne sont pas decoratifs : app.css
   impose `img:not(.site-logo):not(.g6m-site-logo) { height: auto }`, dont la
   specificite (0,2,1) depasse celle de `.g6m-mascot--xl .g6m-mascot__image`
   (0,2,0) — et une autre regle y chaine trois `:not()`. Sans cela la mascotte
   s'affichait a sa taille naturelle, 1 090 px de haut. */
.g6m-mascot__image {
    display: block;
    width: auto !important;
    max-width: 100% !important;
    height: auto;
    /* Ombre portee douce au sol : donne du poids sans rectangle ni fond. */
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.55));
}

/* --- tailles --------------------------------------------------------- */
.g6m-mascot--xl .g6m-mascot__image { height: clamp(220px, 26vw, 460px) !important; }
.g6m-mascot--md .g6m-mascot__image { height: clamp(150px, 18vw, 240px) !important; }
.g6m-mascot--sm .g6m-mascot__image { height: clamp(110px, 14vw, 150px) !important; }

/* Le debord : uniquement en taille xl et sur grand ecran, sinon la
   mascotte mordrait sur la section precedente. */
@media (min-width: 1024px) {
    .g6m-mascot--xl.g6m-mascot--section { padding-block: 2rem; }
    .g6m-mascot--xl .g6m-mascot__figure { margin-block: -3.5rem -1.25rem; }
}

/* --- etat vide : la mascotte passe au-dessus du texte, centre --------- */
.g6m-mascot--sm {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 0.5rem;
}

.g6m-mascot--sm .g6m-mascot__figure { order: -1; }
.g6m-mascot--sm .g6m-mascot__text { max-width: 40ch; }
.g6m-mascot--sm .g6m-mascot__actions { justify-content: center; }

/* --- mobile ---------------------------------------------------------- */
@media (max-width: 767px) {
    .g6m-mascot,
    .g6m-mascot--gauche {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1.25rem;
    }

    /* Texte d'abord, mascotte ensuite : le message doit etre lu avant
       l'illustration sur un ecran etroit. */
    .g6m-mascot__figure,
    .g6m-mascot--gauche .g6m-mascot__figure { order: 2; margin: 0; }

    .g6m-mascot__text { margin-inline: auto; }
    .g6m-mascot__actions { justify-content: center; }
    .g6m-mascot--xl .g6m-mascot__image { height: clamp(200px, 52vw, 280px) !important; }
    .g6m-mascot--md .g6m-mascot__image { height: clamp(140px, 38vw, 200px) !important; }
}

/* --- apparition ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .g6m-mascot__picture {
        animation: g6m-mascot-arrivee 420ms ease-out both;
    }

    @keyframes g6m-mascot-arrivee {
        from { opacity: 0; transform: translateY(14px) scale(0.985); }
        to   { opacity: 1; transform: none; }
    }
}

/* --- page 404 : le chiffre passe en filigrane derriere la mascotte ---- */
.g6m-404-chiffre {
    /* Pas de chevauchement sous 1024 px : la colonne est unique, le chiffre
       viendrait mordre sur le sur-titre et le titre (constate en 390 px).
       Le filigrane derriere la mascotte n'a de sens qu'en deux colonnes. */
    margin: 0 0 0.25rem;
    line-height: 0.85;
    font-size: clamp(5rem, 16vw, 12rem);
    letter-spacing: 0.02em;
    text-align: center;
    user-select: none;
}

@media (min-width: 1024px) {
    .g6m-404-chiffre { margin-bottom: -4.5rem; text-align: left; }
}

/* --- bloc d'introduction de page -------------------------------------
   Respiration au-dessus et en dessous : ces sections s'intercalent entre le
   page-hero et le contenu, elles ne doivent ni coller au heros ni a la grille. */
.g6m-mascot-intro {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

@media (min-width: 1024px) {
    .g6m-mascot-intro { padding-top: 2rem; padding-bottom: 2rem; }
}