/* Image plein écran affichée par-dessus la home à chaque nouvelle session, réglable via le Customizer */
.splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    cursor: pointer;
    /* le swipe vertical est géré en JS : on empêche le navigateur de le capter (rebond, pull-to-refresh) */
    touch-action: none;
    background-color: #000;
    transition: opacity 0.4s ease;
}

.splash-overlay img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.splash-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}



/* menu catégories filtrantes */
.front-category-filter {
    font-size: var(--large-txt);

    width: var(--col-9);
    position: sticky;
    top: var(--margin-big);
    height: var(--big-height);

    display: flex;
    justify-content: space-between;
    align-content: start;
    align-items: start;
    flex-wrap: wrap;
    column-gap: 1em;
}

.front-category-filter-button {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.front-category-filter-button:last-child {
    width: var(--col-3);
}


.front-category-filter-button.is-muted {
    opacity: 0.35;
    filter: grayscale(1);
}

.front-category-filter-button::after {
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    flex-shrink: 0;
    transform: translateY(0.15em);
    margin-left: 0.5em;
    visibility: hidden;
}

.front-category-filter-button.is-active::after {
    background-image: var(--filter-close-icon);
    visibility: visible;
}

/* -----------------------
LISTE D'ARTICLES 
------------------------*/

.front-articles-list {
    display: grid;
    grid-template-columns: repeat(3, var(--col-3));
}

/* pas assez de place pour 3 colonnes de 300px min : on passe à 2 colonnes qui occupent toute la largeur */


.front-article-item {
    height: var(--big-height);
    padding-right: 2rem;
}

.front-article-item.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.front-article-thumb {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    height: auto;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.front-article-thumb--portrait {
    width: var(--col-3);
    aspect-ratio: 4 / 5;
}

.front-article-thumb--landscape {
    width: var(--col-4);
    aspect-ratio: 5 / 4;
}

.front-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.front-article-item h2:hover+.front-article-thumb,
.front-article-item h2:has(a:focus-visible)+.front-article-thumb {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1362px) {
    .front-category-filter-button:last-child {
        width: auto;
    }
}

@media (max-width: 1270px) {
    .front-articles-list {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 1190px) {
    .front-category-filter {
        justify-content: left;
    }
}

@media (max-width: 782px) {
    .front-article-thumb {
        display: none;
    }
}

@media (max-width: 750px) {

    .front-category-filter {
        width: 100%;
        position: relative;
        top: 0;
        height: auto;

        flex-direction: column;
        line-height: 1;
        margin-bottom: var(--medium-height);
    }

    .front-articles-list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
    }

    .front-article-item {
        height: auto;
        padding-right: 0;
    }

    .front-article-item.is-hidden {
        display: none;
    }

    .splash-active .site-header {
        background-color: transparent;
    }
}