/* ---------- LAYOUT---------- */
main {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#header-page {
    grid-column: 1/-1;
}

.rubrique+.rubrique {
    margin-top: var(--marge);
}

.rubrique:not(.description):nth-of-type(3n+1) {
    /* décalage des rubriques */
    grid-column-start: 2;
}

.rubrique.description {
    grid-column-start: 1;
}

.content {
    grid-column: 2/-1;
}

@media (max-width : 900px) {
    main {
        grid-template-columns: repeat(3, 1fr);
    }

    .rubrique {
        grid-column-start: auto;
    }

    .rubrique:not(.description):nth-of-type(3n+1) {
        grid-column-start: auto;
    }

    /* contenu */
    .description,
    .content {
        grid-column: 1/-1;
    }
}


@media (max-width : 500px) {
    main {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* ---------- STYLE ---------- */

/* general */
:root {
    --page-color: var(--tracterie);
    --btn-color: var(--tracterie);
    --link-color: var(--tracterie);
    scroll-behavior: smooth;
}

html,
body {
    color: var(--page-color);
}


/* telechargements */
.telechargements {
    margin: 20px 0 0 0;
    justify-content: center;
}

.telechargements .bouton {
    flex: unset;
}

.bouton_agenda {
    display: none;
}

.reseaux::after {
    content: "Réseaux sociaux";
    --rotate: rotate(-3deg);
}

.reseaux {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.reseaux svg {
    width: 26px;
    --icon-color: #fff;
}

.reseaux svg:hover {
    --icon-color: #ffffffbe;
}

.reseauxTop {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.reseauxTop svg {
    --icon-color: var(--page-color);
}

.reseauxTop svg:hover {
    --icon-color: color-mix(in oklab, var(--page-color) var(--mix-percent), var(--mix-color));
}

/* agenda */
.agenda {
    position: relative;
}

/* boutons filtres */
.tri_evenement {
    margin-bottom: 20px;
    padding-top: 40px;
}

.agenda .bouton {
    border-radius: var(--forme);
}

.agenda .bouton:hover {
    background: var(--blanc);
    color: var(--btn-color);
}

.agenda .bouton.first,
.agenda .bouton.actif,
.agenda .bouton.actif:focus {
    background: var(--btn-color);
    color: var(--blanc);
}

/* .bloc .image::after {
    mix-blend-mode: color;
} */

/* bloc event */
.bloc-title {
    text-transform: uppercase;
    font-family: var(--display_lucky);
}


/* carousel */
.carousel {
    position: relative;
    margin-bottom: 15px;
}

.thumbnails {
    position: relative;
}

.thumbnails picture {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    opacity: 0;
    transition: opacity var(--hover-delay) var(--cubic-bezier);
}

.thumbnails picture.actif {
    position: static;
    height: auto;
    width: 100%;
    z-index: 1;
    opacity: 1;
    aspect-ratio: 14/9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bloc[data-over="0"] picture {
    filter: none;
}


/* points & arrows */
.arrow {
    --stroke: var(--blanc);
    position: absolute;
    top: 50%;
    z-index: 1;
    cursor: pointer;
    transition: all var(--hover-delay) var(--cubic-bezier);
}

.arrow:hover {
    --stroke: var(--page-color);
}

.arrow[data-move="-1"] {
    transform: rotate(180deg) translate(1px, 50%);
    left: 10px;
}

.arrow[data-move="1"] {
    transform: translate(1px, -50%);
    right: 10px;
}


/* points */
.points {
    position: absolute;
    top: 10px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.point {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    cursor: pointer;
    background: var(--blanc);
    transition: all var(--hover-delay) var(--cubic-bezier);
}

.point button :hover {
    transform: scale(110%);
}

.point.actif,
.point.actif:hover {
    background-color: var(--page-color);
}

/* bouton inscription */
.bloc[data-over="0"] .inscription::after {
    content: "S'inscrire";
    transform: scale(80%) translate(0px, -1px);
}

.bloc[data-over="1"] .inscription::after {
    content: "Terminé !";

}

.inscription {
    --translate: translate(calc(var(--padding-droit)* .6), calc(var(--padding-droit)* .6));
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    z-index: 2;
    text-transform: uppercase;
    background: #fff;
    color: var(--page-color);
    border: var(--border-width) solid var(--page-color);
    padding: 2px 12px;
    transform: var(--translate) rotate(3deg);
    border-radius: 999px;
    transition: all var(--hover-delay) var(--cubic-bezier);
}

.bloc[data-over="0"]:hover .inscription {
    opacity: 1;
}

.bloc[data-over="0"]:hover .inscription:hover {
    transform: var(--translate) rotate(-3deg);
    background: var(--page-color);
    color: var(--blanc);
    border: var(--border-width) solid var(--page-color);
    opacity: 1;
}

/* évènement terminé */
.bloc[data-over="1"] .inscription {
    opacity: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: unset;
    right: unset;
    transform: translate(-50%, -50%) rotate(-5deg);
    transition: opacity var(--hover-delay) var(--cubic-bezier);
}

.bloc[data-over="1"]:hover .inscription,
.bloc[data-over="1"]:hover .inscription:hover {
    opacity: 0;
}




/* bloc over */
.bloc.over {
    --over: #474747;
    --page-color: var(--over);
    --color: var(--over);
    --btn-color: var(--over);
    color: var(--color);
}


@media (max-width : 600px) {
    #header-page {
        padding: 20px;
    }

    .telechargements {
        flex-direction: column;
    }

    main {
        padding: 20px;
    }

    .bloc,
    .tri_evenement,
    main {
        flex-direction: column;
    }

    .liste {
        grid-template-columns: repeat(1, 1fr);
    }

    .bouton_agenda {
        display: block;
    }
}