:root {
    --atelier-color: #781f1e;
    --atelier-arch-color: #574359;
    --cafe-arch-color: #BF045B;
    --concert-color: #007566;
    --conference-color: #B8860B;
    --conference-jc-color: #6C2B00;
    --exposition-color:  #BF1B1E;
    --projection-color: #F27405;
    --promenade-color: #13678A;
    --rencontre-color: #764C50;
    --vin-arch-color: #7B1FA2;
    --visite-color: #1E88E5;
}

body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.agenda-title {
    font-size: 1.8rem;
    text-align: center;
}

.agenda-mini-title {
    font-size: 1.6rem;
    text-align: center;
}

.event-link {
    text-decoration: underline;
    color: #FFF;
}

.event-link:hover{
    color: #000;
}

.container {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.event {
    width: 90%;
    color: #FFF;
    padding: 0.3vh;
}

.event.hide {
    transform: translateY(20px); /* Initial downward offset */
    transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transition */
}

.event-tag {
    color: #FFF;
    position: relative;
    padding-left: 1.2vh; /* To shift text to the right of the icon */
    text-transform: uppercase;
    z-index: 999;
    padding-bottom: 2%;
}

.event-tag::before {
    display: inline-block;
    position: absolute;
    width: 1.2vh;
    height: 1.2vh;
    top: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translateY(-50%); /* To center the icon exactly */
    transition: all 0.3s ease; /* Transition for animations */
    left: 0;
    content: "";
}

.event-tag::after {
    font-weight: bold;
    transition: opacity 0.3s ease; /* Text appearance animation */
}

.event-date {
    text-transform: uppercase;
}

.event-title {
    text-transform: uppercase;
    font-weight: bolder;
    font-size: 1.4rem;
}

.event-txt, .more-text {
    text-align: justify;
}

.more-text {
    display: none;
}

.more-button {
    text-transform: uppercase;
    border: 0.08rem solid #FFF;
    padding: 2%;
    background-color: transparent;
    font-weight: bold;
    cursor: pointer;
    margin: 1% 0 2% 0;
    color: #FFF;
}

.more-button:hover {
    background-color: #FFF;
    color: #000;
    border: 0.08rem solid #000;
}

.event-poster {
    width: 60%;
    margin: 0.4vh 0vh;
}

.event-detail {
    font-size: 1.1rem;
    font-style: italic;
}

.category-filters {
    text-align: center;
    margin: 1vh 0.2vh 1vh 0vh;
}

.filter-btn {
    text-transform: uppercase;
    border: 0.08rem solid #000;
    padding: 2%;
    background-color: transparent;
    font-weight: bold;
    cursor: pointer;
    margin: 1% 1% 2% 2%;
    color: #FFF;
}

.filter-btn:hover {
    background-color: #FFF;
    color: #000;
    border: 0.08rem solid #000;
}

.filter-btn.active {
    background-color: #FFF;
    color: #000;

}

.all-tag {
    background-color: #000;
    color: #FFF;
}

/* Styles for different categories */
.atelier {
    background-color: var(--atelier-color);
}

.event-tag.atelier::before {
    background-image: url("media/icone-atelier.png");
}

.event-tag.atelier::after {
    content: "Atelier";
}

.atelier-arch {
    background-color: var(--atelier-arch-color);
}

.event-tag.atelier-arch::before {
    background-image: url("media/icone-atelier-arch.png");
}

.event-tag.atelier-arch::after {
    content: "Atelier Archives";
}

.cafe-arch {
    background-color: var(--cafe-arch-color);
}

.event-tag.cafe-arch::before {
    background-image: url("media/icone-cafe-arch.png");
}

.event-tag.cafe-arch::after {
    content: "Cafés-Archives";
}

.concert {
    background-color: var(--concert-color);
}

.event-tag.concert::before {
    background-image: url("media/icone-concert.png");
}

.event-tag.concert::after {
    content: "Concert";
}

.conference {
    background-color: var(--conference-color);
}

.event-tag.conference::before {
    background-image: url("media/icone-conference.png");
}

.event-tag.conference::after {
    content: "Conférence";
}

.conference-jc {
    background-color: var(--conference-jc-color);
}

.event-tag.conference-jc::before {
    background-image: url("media/icone-conference-jc.png");
}

.event-tag.conference-jc::after {
    content: "Conférence jeunes chercheurs";
}

.exposition {
    background-color: var(--exposition-color);
}

.event-tag.exposition::before {
    background-image: url("media/icone-exposition.png");
}

.event-tag.exposition::after {
    content: "Exposition";
}

.projection {
    background-color: var(--projection-color);
}

.event-tag.projection::before {
    background-image: url("media/icone-projection.png");
}

.event-tag.projection::after {
    content: "Projection";
}

.promenade {
    background-color: var(--promenade-color);
}

.event-tag.promenade::before {
    background-image: url("media/icone-promenade.png");
}

.event-tag.promenade::after {
    content: "Promenade";
}

.rencontre {
    background-color: var(--rencontre-color);
}

.event-tag.rencontre::before {
    background-image: url("media/icone-rencontre.png");
}

.event-tag.rencontre::after {
    content: "Rencontre";
}

.vin-arch {
    background-color: var(--vin-arch-color);
}

.event-tag.vin-arch::before {
    background-image: url("media/icone-vin-arch.png");
}

.event-tag.vin-arch::after {
    content: "Archives en vin";
}

.visite {
    background-color: var(--visite-color);
}

.event-tag.visite::before {
    background-image: url("media/icone-visite.png");
}

.event-tag.visite::after {
    content: "Visite";
}

.copyright-fontawesome {
    font-size: 0.6rem;
    padding-top: 3rem;
}

/* Media Queries for middle and large screens */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* Blocks go online */
        flex-wrap: wrap; /* Returns to line if content overflows */
        justify-content: center;
    }

    .event {
        flex: 0 1 calc(48% - 0.6rem); /* 2 blocks per row */
        box-sizing: border-box; /* Padding and borders includes */
        margin: 0.2rem;
        padding: 1rem;
    }

    .filter-btn {
        padding: 0.8rem;
    }
}

@media (min-width: 1080px) {
    .event {
        flex: 0 1 calc(28% - 0.1rem); /* 3 blocks per row */
    }

    .filter-btn {
        padding: 0.7rem;
    }
}