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

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

main {
    padding: 20px calc(var(--marge) * 2);
    color: var(--page-color);
    display: flex;
    gap: var(--marge);
}

aside {
    flex: 1;
}

article {
    flex: 3;
}

@media (max-width: 500px) {
    main {
        flex-direction: column;
    }
}

/* header page */
header.page {
    box-sizing: border-box;
    padding: 20px calc(var(--marge) * 2) 0px calc(var(--marge) * 2);
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    line-height: 1;
}

.titre_page {
    font-family: var(--display_lucky);
}


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

.telechargements .bouton {
    flex: unset;
}

.bouton_agenda {
    display: none;
}

/* aside */
aside {
    display: flex;
    flex-flow: column nowrap;
    gap: calc(var(--marge) * 1.5);
}

.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));
}

/* contenu */
.images img {
    width: 100%;
}

/* agenda */
.agenda {
    position: relative;
    /* width: 100%; */
}

.agenda p {
    margin-top: 0;
}

.titre_agenda {
    display: inline-block;
    text-transform: uppercase;
    transform: translate(calc(var(--marge) * -0.5), calc(var(--marge) * -1)) rotate(-3deg);
    padding: 6px 12px;
    background: var(--page-color);
    color: var(--blanc);
    border: var(--border-width) solid var(--page-color);
    border-radius: 100vmax;
    font-size: 1.25rem;
    font-family: var(--semibold_lucky);
    line-height: 1;
}

.titre_agenda .fleche {
    display: inline-block;
    font-family: var(--NRpictos);
    transform: rotate(-91deg);
    margin-left: 2px;
}


/* boutons filtres */
.tri_evenement {
    margin-bottom: 20px;
    gap: 20px;
}

.agenda .bouton {
    border-radius: var(--forme);
    /* background: var(--btn-color);
    color: var(--blanc); */
}

.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;
}


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

.vignette>div {
    position: absolute;
}

.fl {
    z-index: 999;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    background-color: rgba(255, 255, 255, .7);
    padding: 6px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--hover-delay) var(--cubic-bezier);
}

.fl:hover {
    background: #fff;
}

.prev {
    transform: rotate(180deg) translate(1px, 50%);
    left: 10px;
}

.next {
    transform: translate(1px, -50%);
    right: 10px;
}

.vignette .pts {
    z-index: 999;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.point {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, .7);
    transition: background var(--hover-delay) var(--cubic-bezier);
}

.point:hover {
    background-color: #fff;
}

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

.vignette .image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity var(--hover-delay) var(--cubic-bezier);
}

.vignette .image.actif {
    opacity: 1;
}

.vignette .imgs,
.vignette .imgs div:first-child {
    position: static;
}

/* bouton inscription vignette */
.inscription {
    --translate: translate(calc(var(--padding-droit)* .6), calc(var(--padding-droit)* .6));

    content: "s'inscrire";
    z-index: 2;
    padding: 2px 12px;
    transform: var(--translate) rotate(3deg);
    /* transform-origin: var(--marge) var(--marge); */
    border-radius: 999px;

    position: absolute;
    bottom: 0;
    right: 0;
    text-transform: uppercase;
    background: #fff;
    color: var(--page-color);
    border: var(--border-width) solid var(--page-color);
    opacity: 0;
    transition: all var(--hover-delay) var(--cubic-bezier);
}

.bloc:hover .inscription {
    opacity: 1;
}

.bloc:hover .inscription:hover {
    transform: var(--translate) rotate(-3deg);
    background: var(--page-color);
    color: var(--blanc);
    border: var(--border-width) solid var(--page-color);
}


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

.bloc.over:hover .inscription {
    opacity: 0;
}

@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;
    }
}