/* ============================================================
   ZONECORE — CSS DE STABILITÉ COMPLET
   ============================================================ */

/* 1. STABILITÉ GLOBALE */

html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: auto !important;
}

body {
    scroll-behavior: auto !important;
}

/* Désactive les transitions entre pages */
@view-transition {
    navigation: none;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none !important;
}

/* Aucun mouvement global au chargement */
html,
body,
main {
    animation: none !important;
}

/* 2. HEADER FIXE */

.zc-header {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    transform: none !important;
    transition: none !important;
    animation: none !important;
}

/* Garde les éléments du header alignés */
.zc-header-inner {
    transition: none !important;
    animation: none !important;
}

/* 3. BARRE VERTICALE ROUGE */

/*
   On conserve la barre verticale existante.
   Ne pas masquer les pseudo-éléments du header
   ni ceux du conteneur des boutons.
*/

/* 4. BOUTONS DU HEADER */

/* Empêche les déplacements au survol */
.zc-header .zc-discord-btn,
.zc-header .zc-login-btn,
.zc-header .zc-user-button {
    transition: filter 160ms ease !important;
    transform: none !important;
    animation: none !important;
}

.zc-header .zc-discord-btn:hover,
.zc-header .zc-login-btn:hover,
.zc-header .zc-user-button:hover {
    transform: none !important;
}

/* Images des boutons : pas de mouvement */
.zc-header .zc-discord-btn img,
.zc-header .zc-login-btn img {
    transition: filter 160ms ease !important;
    animation: none !important;
}

/* 5. NAVIGATION */

/* Empêche les onglets de bouger */
.zc-header .zc-nav,
.zc-header .zc-nav-link {
    animation: none !important;
}

/* 6. HERO — AUCUNE ANIMATION AU CHARGEMENT */

.hero,
.zc-hero,
main > section:first-child {
    animation: none !important;
}

.hero h1,
.hero h2,
.hero p,
.zc-hero h1,
.zc-hero h2,
.zc-hero p {
    animation: none !important;
}

/* Images du hero */
.hero-art img,
.cta-illustration,
.feature-visual img {
    animation: none !important;
}

/* 7. ANIMATIONS AU SCROLL CONSERVÉES */

.zc-reveal {
    opacity: 0;
    transform: translateY(16px);

    transition:
        opacity 450ms cubic-bezier(.16, 1, .3, 1),
        transform 450ms cubic-bezier(.16, 1, .3, 1);
}

.zc-reveal.zc-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 8. HOVER DES CARTES CONSERVÉ */

.feature-card,
.card,
.zc-card {
    transition:
        transform 200ms ease,
        filter 200ms ease,
        box-shadow 200ms ease,
        border-color 200ms ease;
}

.feature-card:hover,
.card:hover,
.zc-card:hover {
    transform: translateY(-4px);
    filter: brightness(1.04);
}

/* 9. HOVER DES BOUTONS HORS HEADER */

button,
.btn,
.btn-image,
.zc-btn {
    transition:
        transform 160ms ease,
        filter 160ms ease,
        opacity 160ms ease;
}

button:hover,
.btn:hover,
.btn-image:hover,
.zc-btn:hover {
    transform: translateY(-2px);
}

/* Les boutons du header restent immobiles */
.zc-header button:hover,
.zc-header .zc-discord-btn:hover,
.zc-header .zc-login-btn:hover,
.zc-header .zc-user-button:hover {
    transform: none !important;
}

/* 10. MENUS DÉROULANTS */

.zc-support-menu.open,
.zc-user-menu.open {
    animation: zc-menu-open 160ms ease-out both;
}

@keyframes zc-menu-open {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 11. ACCESSIBILITÉ */

@media (prefers-reduced-motion: reduce) {
    .zc-reveal,
    .feature-card,
    .card,
    .zc-card,
    button,
    .btn {
        animation: none !important;
        transition: none !important;
    }

    .zc-reveal {
        opacity: 1;
        transform: none;
    }
}