/* =================== Présentation ==================== */
.presentation {
    display: flex;
    height: 718px;
    padding: 70px 0 16px 0;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* Conteneur du slideshow */
.presentation .fond {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 65px;
    position: relative;
    overflow: hidden;
}

/*
 * Slideshow crossfade — 5 slides, chacune visible 20% du cycle (5s sur 25s).
 * Chaque slide est décalée de 5s via animation-delay.
 */
.presentation .fond .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: crossfade 25s infinite;
}

.presentation .fond .slide:nth-child(1) { background-image: url('/assets/img/slide1.png'); animation-delay: 0s;  }
.presentation .fond .slide:nth-child(2) { background-image: url('/assets/img/slide2.png'); animation-delay: 5s;  }
.presentation .fond .slide:nth-child(3) { background-image: url('/assets/img/slide3.png'); animation-delay: 10s; }
.presentation .fond .slide:nth-child(4) { background-image: url('/assets/img/slide4.png'); animation-delay: 15s; }
.presentation .fond .slide:nth-child(5) { background-image: url('/assets/img/slide5.png'); animation-delay: 20s; }

@keyframes crossfade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    20%  { opacity: 1; }
    24%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Contenu au-dessus du slideshow (logo) */
.presentation .fond > *:not(.slide) {
    position: relative;
    z-index: 1;
}

.presentation .logo {
    display: flex;
    width: 630px;
    height: auto;
    padding: 20px 13.333px 19px 13.333px;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    animation: douxZoom 3s ease-in-out infinite;
}

@keyframes douxZoom {
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1);   }
}


/* =================== Statistiques ==================== */
.stats {
    display: flex;
    padding-bottom: 15px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
}

.stats .title {
    display: flex;
    padding: 10px 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}

/* Grille 3 colonnes : joueurs en ligne | membres Discord | citoyens recensés */
.stats-content {
    display: inline-grid;
    padding: 0 25px;
    row-gap: 10px;
    column-gap: 50px;
    align-self: stretch;
    grid-template-rows: repeat(1, fit-content(100%));
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stats-content .stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    justify-self: stretch;
    padding: 20px 15px;
    align-self: stretch;

    border-radius: 15px;
    border: 0.5px solid var(--border-default);
    background: var(--surface-2);
}

.stats-content .stat .num {
    color: var(--text-primary);
    font-family: Baskervville;
    font-size: 64px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.stats-content .stat p {
    color: var(--text-secondary);
    text-align: center;
    font-family: Baskervville;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

/* Indicateur de statut en ligne */
.boxonline {
    display: flex;
    align-items: center;
    gap: 15px;
}

.boxonline .online {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-online);
    box-shadow: 0 0 4px 4px var(--color-online-glow);
}


/* =================== Patchnotes ==================== */
.patchnote {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch;
}

.patchnote .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}

/* Grille 3 colonnes de cards feature */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    grid-auto-rows: auto;
}

/* Alternance de fond pair/impair */
.features .feature {
    display: inline-grid;
    column-gap: 10px;
    grid-template-rows: repeat(2, fit-content(100%));
    grid-template-columns: repeat(1, minmax(0, 1fr));
    justify-self: stretch;

    border-radius: 20px;
    border: 0.5px solid var(--border-default);
    background: var(--surface-1);

    transition: background 0.3s ease-in-out;
}

.features .feature:nth-child(even) {
    background: var(--surface-2);
}

.features .feature:hover {
    background: var(--surface-hover);
}

.features .feature .image {
    height: 304.375px;
    border-radius: 20px 20px 0 0;
    grid-row: 1 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
    width: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.feature-content {
    display: flex;
    padding: 10px 25px 25px 25px;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    grid-row: 2 / span 1;
    grid-column: 1 / span 1;
    justify-self: stretch;
}

.feature-content .muted {
    color: var(--text-secondary);
    font-family: Baskervville;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.feature-content p {
    color: var(--text-primary);
    font-family: Baskervville;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-self: stretch;
}