/* =====================================================================
   Correctifs d'interface GTA6Modding — v900
   CSS pur : la source Tailwind (assets/css/app.css) n'est pas modifiée,
   aucune recompilation n'est donc nécessaire. Le jeton de cache de ce
   fichier est dérivé de son contenu (voir tools/bump-css-token.sh).
   ===================================================================== */

/* --- Pseudo du header ------------------------------------------------
   Le déclencheur plafonnait le pseudo à 8rem (128 px). Les décorations de
   rôle (étincelles des styles admin/modérateur) consomment cette largeur
   avant le texte, qui se retrouvait coupé à « Kr… ». On élargit par
   paliers pour ne pas encombrer le header sur les écrans étroits. */
.g6m-user-nav__username {
    max-width: 10rem !important;
}

@media (min-width: 1024px) {
    .g6m-user-nav__username {
        max-width: 14rem !important;
    }
}

.btn-outline-violet {
    border-radius: 1rem;
    border: 2px solid rgba(141, 56, 255, 0.6);
    /* Hauteur alignée sur les boutons voisins (52 px) : le logo, plus haut
       qu'une ligne de texte, agrandissait la boîte de 8 px. */
    padding: 0.75rem 2rem;
    line-height: 1.5;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b98cff;
    background: rgba(9, 9, 9, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(141, 56, 255, 0.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-outline-violet:hover {
    background: rgba(141, 56, 255, 0.12);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 0 28px rgba(141, 56, 255, 0.45);
}

/* Le logo garde ses couleurs propres quel que soit l'état du bouton. */
.btn-outline-violet .g6m-btn-discord-icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    fill: currentColor;
}

/* Respect des préférences système : pas de mouvement imposé. */
@media (prefers-reduced-motion: reduce) {
    .btn-outline-violet { transition: none; }
    .btn-outline-violet:hover { transform: none; }
}

/* --- Responsive ------------------------------------------------------
   Le quatrième bouton fait déborder la rangée sur les petites tablettes :
   on autorise le retour à la ligne, et on aligne les largeurs en colonne. */
.g6m-hero-actions {
    flex-wrap: wrap;
}

@media (max-width: 639px) {
    .g6m-hero-actions > a {
        width: 100%;
        max-width: 20rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* En rangée, les quatre boutons partagent la même largeur. « Discord » et son
   logo mesurent naturellement 157 px contre 93 à 101 px pour les trois autres :
   sans cette règle, le dernier bouton dépasse visiblement du lot. */
@media (min-width: 640px) {
    /* 11rem : le contenu naturel du bouton Discord (logo + libellé) mesure
       168 px, donc un plancher à 10rem = 160 px le laissait dépasser ses
       voisins. Au-delà de son contenu, tous les boutons s'égalisent. */
    .g6m-hero-actions > a {
        min-width: 11rem;
    }
}

/* Hauteur commune à toute la rangée : le bouton Discord mesurait 2 px de
   moins que ses voisins en pile verticale, ce qui se voyait. 52 px couvre
   aussi largement la cible tactile recommandée (44 px). */
.g6m-hero-actions > a {
    min-height: 52px;
}

/* --- Icônes sociales du footer --------------------------------------
   Deux pastilles sous la marque. Les logos X et Discord sont des formes
   PLEINES : le helper $icon du footer impose fill="none", d'où un
   remplissage propre porté par le glyphe lui-même. */
.g6m-vc-social {
    display: flex;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.g6m-vc-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px : cible tactile minimale recommandée, respectée dès le mobile. */
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(9, 9, 9, 0.72);
    color: rgba(235, 235, 245, 0.9);
    transition: transform 0.25s ease, box-shadow 0.25s ease,
        background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.g6m-vc-social__icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Chaque réseau reprend sa couleur au survol : reconnaissable sans texte. */
.g6m-vc-social__link--discord:hover {
    color: #fff;
    border-color: rgba(88, 101, 242, 0.75);
    background: rgba(88, 101, 242, 0.16);
    box-shadow: 0 0 22px rgba(88, 101, 242, 0.45);
}

.g6m-vc-social__link--x:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 22px rgba(255, 255, 255, 0.28);
}

.g6m-vc-social__link:hover {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .g6m-vc-social__link { transition: none; }
    .g6m-vc-social__link:hover { transform: none; }
}

/* --- Correctifs de footer, à spécificité renforcée --------------------
   `g6m-footer-vicecity-v700.css` a été réécrit le 19/08 et a repris ses
   valeurs d'origine : ne plus le modifier, il est régénéré. On surcharge
   depuis ici avec `html body`, qui l'emporte sur ses règles `!important`
   de spécificité inférieure. */

/* 208px ne laissait aucune marge à « Statut des services » : le libellé
   se tronquait dès que le rendu de police variait d'une machine à l'autre. */
html body .g6m-site-footer.g6m-vc .g6m-vc-link {
    max-width: 232px !important;
}

html body .g6m-site-footer.g6m-vc .g6m-vc-social {
    display: flex !important;
    gap: 0.625rem !important;
    margin: 1rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .g6m-site-footer.g6m-vc .g6m-vc-social > li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html body .g6m-site-footer.g6m-vc .g6m-vc-social__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(9, 9, 9, 0.72) !important;
    color: rgba(235, 235, 245, 0.9) !important;
}

html body .g6m-site-footer.g6m-vc .g6m-vc-social__icon {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}