/* ==========================================================================
   G6M_DISCORD_V1010 (22/08/2026) — integration communautaire Discord

   PORTEE
   Trois blocs seulement : .discord-section (la bande), .discord-card (le
   contenu) et .discord-button (l action). Les composants PHP correspondants
   vivent dans app/Views/components/theme/discord/.

   PARTI PRIS GRAPHIQUE
   Le bleu Discord (#5865F2) n existe pas dans la palette du site. Plutot que
   de l imposer tel quel sur un fond Vice City, on l ANCRE : il ne sert qu au
   logo et au bouton, tandis que le cadre, le halo et les compteurs restent en
   violet et cyan maison. Le blurple se lit alors comme la signature de la
   marque invitee, pas comme une couleur etrangere posee sur la page.

   AUCUN !important : la feuille est chargee apres app.css et ses selecteurs
   sont propres a ce composant. Rien a forcer.
   ========================================================================== */

.discord-section {
    --discord-blurple: #5865f2;
    --discord-blurple-clair: #7982f7;
    --discord-vert: #3ddc84;

    padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   La carte
   -------------------------------------------------------------------------- */
.discord-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(141, 56, 255, 0.28);
    border-radius: 20px;
    background:
        linear-gradient(135deg, rgba(88, 101, 242, 0.14) 0%, rgba(141, 56, 255, 0.09) 45%, rgba(0, 215, 255, 0.07) 100%),
        var(--g6m-glass, rgba(22, 22, 22, 0.65));
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.03) inset,
        0 18px 48px rgba(0, 0, 0, 0.45);
    isolation: isolate;
}

/* Halo diffus, ancre en haut a droite comme le degrade du heros. Purement
   decoratif : il ne doit jamais intercepter un clic. */
.discord-card__halo {
    position: absolute;
    inset-block-start: -45%;
    inset-inline-end: -18%;
    z-index: -1;
    width: 32rem;
    max-width: 90%;
    aspect-ratio: 1;
    pointer-events: none;
    background: radial-gradient(circle, rgba(88, 101, 242, 0.34) 0%, rgba(141, 56, 255, 0.12) 45%, transparent 70%);
}

.discord-card__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: clamp(1.6rem, 1.1rem + 2vw, 2.75rem);
    text-align: center;
}

/* Au-dela de 900px la carte se deplie en rangee : logo, texte, bouton.
   En dessous elle reste centree, ce qui tient mieux sur un ecran etroit. */
@media (min-width: 900px) {
    .discord-card__inner {
        flex-direction: row;
        align-items: center;
        gap: 2.25rem;
        text-align: start;
    }
}

.discord-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.discord-card__eyebrow {
    margin: 0 0 0.35rem;
    font-family: Rajdhani, Orbitron, system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--g6m-cyan, #00d7ff);
}

.discord-card__title {
    margin: 0 0 0.5rem;
    font-family: Rajdhani, Orbitron, system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
    line-height: 1.15;
    letter-spacing: 0.005em;
    color: #fff;
    text-wrap: balance;
}

.discord-card__copy {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
    line-height: 1.6;
    color: var(--g6m-muted, #a0a0b0);
}

@media (max-width: 899px) {
    .discord-card__copy {
        margin-inline: auto;
    }
}

.discord-card__action {
    flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Le logo
   -------------------------------------------------------------------------- */
.discord-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(4rem, 3.2rem + 2.4vw, 5.25rem);
    aspect-ratio: 1;
    border-radius: 22%;
    background: linear-gradient(145deg, var(--discord-blurple-clair) 0%, var(--discord-blurple) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.14) inset,
        0 10px 26px rgba(88, 101, 242, 0.36);
}

.discord-icon__glyph {
    position: relative;
    z-index: 1;
    width: 55%;
    height: auto;
    color: #fff;
}

/* Anneau qui respire — une seule animation sur toute la section, et elle est
   lente : le compte a rebours du heros reste l element qui attire l oeil. */
.discord-icon__pulse {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.55);
    animation: g6m-discord-pulse 3.4s ease-out infinite;
}

@keyframes g6m-discord-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.5); }
    70%  { box-shadow: 0 0 0 0.85rem rgba(88, 101, 242, 0); }
    100% { box-shadow: 0 0 0 0 rgba(88, 101, 242, 0); }
}

/* --------------------------------------------------------------------------
   Les compteurs
   -------------------------------------------------------------------------- */
.discord-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1.1rem 0 0;
    justify-content: center;
}

@media (min-width: 900px) {
    .discord-stats { justify-content: flex-start; }
}

/* Chaque compteur est une paire <dt>/<dd> : on remet a plat la mise en page
   par defaut des listes de definitions. */
.discord-stats__item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.045);
}

.discord-stats__value {
    margin: 0;
    font-family: Rajdhani, Orbitron, system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #fff;
}

.discord-stats__label {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--g6m-muted, #a0a0b0);
}

.discord-stats__item--online .discord-stats__value { color: var(--discord-vert); }

.discord-stats__dot {
    align-self: center;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--discord-vert);
    box-shadow: 0 0 8px rgba(61, 220, 132, 0.7);
}

/* --------------------------------------------------------------------------
   Le bouton
   -------------------------------------------------------------------------- */
.discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: var(--touch-min, 44px);
    padding: 0.8rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--discord-blurple) 0%, var(--discord-blurple-clair) 100%);
    color: #fff;
    font-family: Rajdhani, Orbitron, system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(88, 101, 242, 0.3);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        filter 0.2s ease;
}

.discord-button--lg {
    padding: 0.95rem 2rem;
    font-size: 1rem;
}

.discord-button--ghost {
    background: rgba(88, 101, 242, 0.12);
    border-color: rgba(88, 101, 242, 0.45);
    box-shadow: none;
}

.discord-button__icon {
    display: inline-flex;
    flex: 0 0 auto;
}

.discord-button__glyph {
    width: 1.25em;
    height: 1.25em;
}

.discord-button:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 12px 30px rgba(88, 101, 242, 0.48);
    filter: brightness(1.06);
}

/* Le focus clavier doit etre visible SANS survol : anneau franc, decolle du
   bouton pour rester lisible sur le degrade. */
.discord-button:focus-visible {
    outline: 2px solid var(--g6m-cyan, #00d7ff);
    outline-offset: 3px;
    box-shadow: 0 12px 30px rgba(88, 101, 242, 0.45);
}

.discord-button:active {
    transform: translateY(0);
    filter: brightness(0.95);
    box-shadow: 0 5px 14px rgba(88, 101, 242, 0.34);
}

/* --------------------------------------------------------------------------
   Mouvement reduit : on coupe l anneau et les deplacements, on garde les
   changements de couleur, qui restent informatifs.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .discord-icon__pulse { animation: none; }

    .discord-button {
        transition: border-color 0.2s ease, filter 0.2s ease;
    }

    .discord-button:hover,
    .discord-button:active {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Etroit : sous 420px, le bouton prend toute la largeur disponible plutot que
   de forcer une ligne qui deborderait.
   -------------------------------------------------------------------------- */
@media (max-width: 419px) {
    .discord-card__action { width: 100%; }

    .discord-button {
        width: 100%;
        padding-inline: 1rem;
        letter-spacing: 0.06em;
    }

    .discord-stats__item { padding-inline: 0.7rem; }
}