/* ================================================================
   SECTIONS DE LA PAGE D'ACCUEIL (sous le hero et "Rejoindre")
   - Par défaut : mise en page simple et lisible (mobile, "réduire les
     animations", sans JS).
   - html.znv-motion (ajoutée par public/js/home.js sur desktop) :
     mise en page "scène" plein écran pour les sections épinglées.
   ================================================================ */

/* Couleurs des modes, marges, .znv-eyebrow / .znv-section-title / .znv-section-lead :
   voir public/css/znv-ui.css (socle commun). */

/* Bootstrap active scroll-behavior: smooth sur :root ; ScrollTrigger et Lenis
   ont besoin d'un scroll instantané pour mesurer les positions correctement. */
html.znv-motion {
    scroll-behavior: auto !important;
}

/* ================================================================
   MANIFESTE
   ================================================================ */
.znv-manifesto {
    display: flex;
    align-items: center;
    min-height: 80vh;
    padding: 6rem var(--znv-gutter);
    background: #0f1014;
}

.znv-manifesto-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.znv-manifesto-text {
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 1rem + 3.2vw, 4.2rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.znv-word.is-accent {
    color: var(--znv-accent-2);
}

.znv-motion .znv-manifesto {
    height: 100vh;
    min-height: 0;
}

/* ================================================================
   CHIFFRES — bandeau coloré
   ================================================================ */
.znv-stats {
    padding: 3.5rem var(--znv-gutter);
    background: linear-gradient(100deg, var(--znv-accent-2) 0%, var(--znv-accent-3) 45%, #6b7bff 100%);
    color: #071419;
}

.znv-stats-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.znv-stat {
    display: grid;
    gap: .35rem;
}

.znv-stat-value {
    font-family: 'Paytone One', sans-serif;
    font-size: clamp(2.6rem, 1.8rem + 3vw, 4.8rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.znv-stat-label {
    font-size: .98rem;
    font-weight: 600;
    opacity: .8;
}

/* ================================================================
   MODES
   ================================================================ */
.znv-modes {
    padding: 6rem 0 4rem;
    background: var(--znv-bg);
}

.znv-modes-intro {
    max-width: 1200px;
    margin: 0 auto 2.5rem;
    padding: 0 var(--znv-gutter);
}

.znv-modes-stage {
    display: grid;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.znv-mode {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 600px;
    padding: 1.75rem;
    overflow: hidden;
    border-radius: 22px;
    background: #111;
}

.znv-mode-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.znv-mode-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Teinte de la couleur du mode + assombrissement pour le texte */
.znv-mode-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 9, 12, .25) 0%, rgba(8, 9, 12, .55) 45%, rgba(8, 9, 12, .95) 100%),
        linear-gradient(135deg, color-mix(in srgb, var(--mode-color) 35%, transparent), transparent 60%);
}

.znv-mode-giant {
    position: absolute;
    top: .75rem;
    left: 1rem;
    z-index: -2;
    margin: 0;
    color: color-mix(in srgb, var(--mode-color) 30%, transparent);
    font-family: 'Paytone One', sans-serif;
    font-size: clamp(3.5rem, 16vw, 9rem);
    line-height: .9;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}

.znv-mode-render {
    position: absolute;
    top: 8%;
    right: -4%;
    z-index: -1;
    width: auto;
    height: 52%;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .5));
}

.znv-mode-info {
    max-width: 32rem;
}

.znv-mode-index {
    margin: 0 0 .5rem;
    color: var(--mode-color) !important;
    font-family: 'Paytone One', sans-serif;
    font-size: 1rem;
}

.znv-mode-index span {
    color: var(--znv-text-dim);
}

.znv-mode-name {
    margin: 0 0 .75rem;
    font-size: clamp(2.2rem, 1.6rem + 2.5vw, 4rem);
    line-height: 1;
    text-transform: uppercase;
}

.znv-mode-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.znv-mode-tags li {
    padding: .2rem .7rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mode-color) 60%, transparent);
    color: var(--mode-color);
    font-size: .78rem;
    font-weight: 600;
}

.znv-mode-tagline {
    margin: 0 0 .4rem;
    color: #fff !important;
    font-size: 1.15rem;
    font-weight: 600;
}

.znv-mode-desc {
    margin: 0 0 1.4rem;
    color: #d6d8de !important;
    line-height: 1.6;
}

.znv-mode-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .6rem 1.3rem;
    border-radius: 12px;
    background: var(--mode-color);
    color: #0a0b0e;
    font-weight: 700;
    transition: transform .2s, box-shadow .2s;
}

.znv-mode-cta:hover {
    color: #0a0b0e;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--mode-color) 40%, transparent);
}

.znv-mode-cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.znv-modes-progress {
    display: none;
}

/* --- Desktop animé : scène plein écran, les modes s'empilent --- */
.znv-motion .znv-modes {
    padding-bottom: 0;
}

.znv-motion .znv-modes-stage {
    position: relative;
    display: block;
    max-width: none;
    height: 100vh;
    padding: 0;
    overflow: hidden;
}

.znv-motion .znv-mode {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: 0;
    border-radius: 0;
}

.znv-motion .znv-mode-giant {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16.5vw;                 /* "SPEEDRUNS", le plus long, tient dans l'écran */
    color: color-mix(in srgb, var(--mode-color) 85%, #fff);
    opacity: .9;
}

.znv-motion .znv-mode-render {
    top: auto;
    right: 7vw;
    bottom: 0;
    height: 86vh;
    max-width: 46vw;
    z-index: -1;
    object-position: bottom;
}

.znv-motion .znv-mode-bg::after {
    background:
        linear-gradient(90deg, rgba(8, 9, 12, .92) 0%, rgba(8, 9, 12, .6) 38%, rgba(8, 9, 12, .15) 70%),
        linear-gradient(180deg, transparent 60%, rgba(8, 9, 12, .7) 100%),
        linear-gradient(135deg, color-mix(in srgb, var(--mode-color) 30%, transparent), transparent 55%);
}

.znv-motion .znv-mode-info {
    position: absolute;
    left: var(--znv-gutter);
    bottom: 11vh;
    max-width: 30rem;
}

.znv-motion .znv-modes-progress {
    position: absolute;
    left: var(--znv-gutter);
    right: var(--znv-gutter);
    bottom: 5vh;
    z-index: 5;
    display: block;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .15);
}

.znv-motion .znv-modes-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}

/* ================================================================
   MÉRILAC
   ================================================================ */
.znv-merilac {
    background: #0f1014;
}

.znv-merilac-stage {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: 90vh;
    overflow: hidden;
}

.znv-merilac-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.znv-merilac-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.znv-merilac-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 16, .15) 0%, rgba(10, 12, 16, .35) 40%, rgba(10, 12, 16, .92) 100%);
}

.znv-merilac-content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem var(--znv-gutter);
}

.znv-merilac-title {
    display: grid;
    margin: 0 0 2rem;
}

.znv-merilac-title .znv-eyebrow {
    margin-bottom: .4rem;
    color: #fff !important;
}

.znv-merilac-name {
    font-size: clamp(3.5rem, 1.5rem + 11vw, 12rem);
    line-height: .9;
    text-transform: uppercase;
    text-shadow: 0 8px 40px rgba(0, 0, 0, .35);
}

.znv-merilac-points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.znv-merilac-points li {
    display: grid;
    gap: .35rem;
    padding: 1.25rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(10, 12, 16, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.znv-merilac-points .bi {
    color: var(--znv-accent-2);
    font-size: 1.3rem;
}

.znv-merilac-points strong {
    color: #fff;
}

.znv-merilac-points span {
    color: #cfd2d8;
    font-size: .92rem;
    line-height: 1.55;
}

.znv-merilac-gallery {
    display: grid;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}

.znv-merilac-shot {
    margin: 0;
}

.znv-merilac-shot img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.znv-merilac-shot figcaption {
    margin-top: .6rem;
    color: var(--znv-text-dim);
    font-size: .88rem;
}

@media (min-width: 1024px) {
    /* 2 colonnes décalées : la colonne de droite descend d'un cran */
    .znv-merilac-gallery {
        grid-template-columns: repeat(2, 1fr);
        align-items: start;
        gap: 2.5rem 3rem;
        max-width: 1400px;
        padding: 4rem var(--znv-gutter) 9rem;
    }

    /* margin et non transform : la parallaxe (JS) anime déjà transform */
    .znv-merilac-shot:nth-child(even) {
        margin-top: 8rem;
    }
}

/* --- Desktop animé --- */
.znv-motion .znv-merilac-stage {
    align-items: center;
    height: 100vh;
    min-height: 0;
}

.znv-motion .znv-merilac-content {
    text-align: center;
}

.znv-motion .znv-merilac-title {
    justify-items: center;
}

.znv-motion .znv-merilac-media::after {
    background: radial-gradient(ellipse at center, rgba(10, 12, 16, .35) 0%, rgba(10, 12, 16, .75) 100%);
}

.znv-motion .znv-merilac-points {
    text-align: left;
}

/* ================================================================
   PLUS QU'UN SERVEUR
   ================================================================ */
.znv-extras {
    overflow: hidden;
    background: var(--znv-bg);
}

.znv-extras-track {
    display: grid;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 1rem;
}

.znv-extras-intro {
    padding: 0 calc(var(--znv-gutter) - 1rem) 1rem;
}

.znv-extra {
    position: relative;
    display: grid;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid color-mix(in srgb, var(--extra-color) 35%, transparent);
    background:
        radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--extra-color) 28%, transparent), transparent 60%),
        #15161b;
}

.znv-extra-badge {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--extra-color) 20%, transparent);
    color: var(--extra-color) !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.znv-extra-title {
    margin: 0 0 .9rem;
    font-size: clamp(2rem, 1.5rem + 2vw, 3.4rem);
    line-height: 1;
    text-transform: uppercase;
}

.znv-extra-text p:not(.znv-extra-badge) {
    max-width: 30rem;
    margin: 0 0 1.5rem;
    color: #d0d3d9 !important;
    line-height: 1.65;
}

.znv-extra-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.25rem;
}

.znv-extra-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .6rem 1.25rem;
    border-radius: 12px;
    background: var(--extra-color);
    color: #0a0b0e;
    font-weight: 700;
    transition: transform .2s;
}

.znv-extra-cta:hover {
    color: #0a0b0e;
    transform: translateY(-2px);
}

.znv-extra-link {
    color: var(--znv-text);
    font-weight: 500;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

.znv-extra-link:hover {
    color: #fff;
}

.znv-extra-cta:focus-visible,
.znv-extra-link:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

.znv-extra-visual {
    justify-self: center;
    width: auto;
    max-width: 100%;
    max-height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45));
}

.znv-extra-visual.is-ui,
.znv-extra-visual.is-pixel {
    image-rendering: pixelated;
}

/* Étoile du Nether : texture 16 px agrandie net, halo doré, flottaison façon objet au sol */
.znv-extra-visual.is-star {
    width: clamp(160px, 22vw, 280px);
    height: auto;
    max-height: none;
    filter:
        drop-shadow(0 0 18px rgba(250, 255, 160, .55))
        drop-shadow(0 0 60px color-mix(in srgb, var(--extra-color) 45%, transparent));
    animation: znv-star-float 3.2s ease-in-out infinite;
}

@keyframes znv-star-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .znv-extra-visual.is-star {
        animation: none;
    }
}

.znv-extra-visual.is-ui {
    width: 100%;
    max-width: 340px;
    height: auto;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .znv-extra {
        grid-template-columns: 1.1fr .9fr;
        align-items: center;
        padding: 3rem;
    }
}

/* --- Desktop animé : piste horizontale --- */
.znv-motion .znv-extras-track {
    display: flex;
    align-items: center;
    gap: 3vw;
    width: max-content;
    max-width: none;
    height: 100vh;
    margin: 0;
    padding: 0 var(--znv-gutter);
}

.znv-motion .znv-extras-intro {
    flex: none;
    width: 30vw;
    padding: 0;
}

.znv-motion .znv-extra {
    flex: none;
    width: min(64vw, 1000px);
    height: min(68vh, 620px);
    padding: 3.5rem;
}

.znv-motion .znv-extra-visual {
    max-height: 48vh;
}

/* ================================================================
   BANDEAU DÉFILANT (décoratif)
   ================================================================ */
.znv-marquee {
    padding: 3rem 0;
    overflow: hidden;
    background: var(--znv-bg);
    pointer-events: none;
    user-select: none;
}

.znv-marquee-row {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    width: max-content;
    color: #fff;
    font-family: 'Paytone One', sans-serif;
    font-size: clamp(3rem, 2rem + 6vw, 8.5rem);
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
}

.znv-marquee-row i {
    color: var(--znv-accent-2);
    font-size: .5em;
    font-style: normal;
}

.znv-marquee-row.is-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .35);
}

.znv-marquee-row.is-outline i {
    -webkit-text-stroke: 0;
    color: var(--znv-mode-speedrun);
}

/* ================================================================
   ACTUS (en-tête ajouté ; le reste garde ses styles existants)
   ================================================================ */
/* Titre à gauche, lien "Toutes les actus" à droite (dessous sur mobile) */
.znv-news-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-bottom: 2.5rem;
}

.znv-news-header .znv-section-title {
    margin-bottom: 0;
}

.znv-news-all {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .6rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    font-weight: 600;
    transition: border-color .2s, background-color .2s;
}

.znv-news-all .bi {
    transition: transform .2s;
}

.znv-news-all:hover {
    color: #fff;
    border-color: var(--znv-accent);
    background: rgba(56, 193, 233, .1);
}

.znv-news-all:hover .bi {
    transform: translateX(3px);
}

.znv-news-all:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 3px;
}

/* Arrondis alignés sur les nouvelles sections */
#actus .znv-news-featured-cover,
#actus .znv-news-card {
    border-radius: 18px;
}

/* style.css met une couleur fixe sur tous les <p> : on garde le gris des extraits */
#actus .znv-news-featured-excerpt,
#actus .znv-news-card-excerpt {
    color: #c8c9d4 !important;
}

.znv-news-card:focus-visible,
.znv-news-featured:focus-visible {
    outline: 2px solid var(--znv-accent);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .znv-news-all:hover .bi {
        transform: none;
    }
}

/* ================================================================
   FINALE
   ================================================================ */
.znv-finale {
    --hero-shade: 10, 12, 16;          /* réutilise les boutons du hero */
    --hero-live: #3ddc84;
    --hero-radius: 12px;
    --hero-glass: rgba(var(--hero-shade), .5);
    --hero-glass-line: rgba(255, 255, 255, .14);

    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: 92vh;
    padding: 6rem var(--znv-gutter);
    overflow: hidden;
    text-align: center;
}

.znv-finale-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.znv-finale-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.znv-finale-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, var(--znv-bg) 0%, rgba(10, 12, 16, .35) 30%, rgba(10, 12, 16, .55) 70%, rgba(10, 12, 16, .9) 100%);
}

.znv-finale-inner {
    display: grid;
    justify-items: center;
}

.znv-finale-title {
    display: grid;
    margin: 0 0 1.25rem;
    font-size: clamp(3.2rem, 1.5rem + 9vw, 10rem);
    line-height: .92;
    text-transform: uppercase;
}

/* Chaque ligne masque son contenu pour l'effet de montée */
.znv-finale-line {
    display: block;
    overflow: hidden;
    padding-bottom: .05em;
}

.znv-finale-line > span {
    display: inline-block;
}

.znv-finale-title em {
    font-style: normal;
    background: linear-gradient(90deg, var(--znv-accent-2), var(--znv-accent-3));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.znv-finale-lead {
    margin: 0 0 2rem;
    color: #eef0f4 !important;
    font-size: 1.15rem;
}

.znv-finale-actions {
    justify-content: center;
}

/* ================================================================
   Mobile : ajustements
   ================================================================ */
@media (max-width: 768px) {
    .znv-manifesto {
        min-height: 0;
        padding: 4.5rem 1.25rem;
    }

    .znv-stats-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .znv-modes {
        padding-top: 4rem;
    }

    .znv-mode {
        min-height: 540px;
        padding: 1.25rem;
    }

    .znv-mode-render {
        height: 46%;
    }

    .znv-merilac-stage {
        min-height: 0;
        padding-top: 45vh;
    }

    .znv-merilac-content {
        padding: 2rem 1rem;
    }

    .znv-marquee {
        padding: 2rem 0;
    }

    .znv-finale {
        min-height: 80vh;
        padding: 5rem 1rem;
    }
}