/**
 * STYLES UNIFIÉS POUR LA GRILLE D'ÉVÉNEMENTS
 * Ce fichier regroupe tous les styles nécessaires pour l'affichage des événements
 * sur la page d'accueil du site ElectroLibre.
 */

/*
  events-grid-front.css
  Styles des grilles d'événements pour l'accueil/front, desktop et responsive.
  Factorisation, optimisation, documentation complète.
*/

/* ===============================================
    STRUCTURE DE BASE DES GRILLES
    =============================================== */

/* Définition des variables de couleur utilisées dans les animations */
:root {
    --green: #83D95B;
    --orange: #D9815B;
}
/* Centrage et style des titres de groupe mois/année */
.event-group-heading {
    text-align: center;
    font-family: var(--font-heading-h1) !important;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-purple);
    margin: 40px auto 24px auto;
    letter-spacing: 0.04em;
    text-shadow: 0 2px 8px rgba(91,99,217,0.08);
    width: 100%;
    max-width: 820px;
    position: relative;
    animation: glitch-blink 1.2s infinite steps(2, end);
}

@keyframes glitch-blink {
    0%,
    10% {
        opacity: 1;
        text-shadow:
            2px 0 var(--green),
            -2px 0 var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
    20% {
        opacity: 0.7;
        text-shadow:
            2px 2px var(--green),
            -2px -2px var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
    40% {
        opacity: 0.5;
        text-shadow:
            4px 0 var(--green),
            -4px 0 var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
    60% {
        opacity: 0.7;
        text-shadow:
            2px -2px var(--green),
            -2px 2px var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
    80% {
        opacity: 1;
        text-shadow:
            0 0 var(--green),
            0 0 var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
    90%,
    100% {
        opacity: 1;
        text-shadow:
            2px 0 var(--green),
            -2px 0 var(--orange),
            0 2px 8px rgba(91,99,217,0.08);
    }
}
    
/* Structure pour la grille d'événements */
.bloc-events-grid-accueil {
    border-radius: 25px;
    width: 100%;
    max-width: 1190px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Container pour la grille d'événements */
.contener-events-grid {
    border-radius: 25px;
    width: 100%;
    max-width: 1190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}

/* Grille d'événements - adapté aux classes générées par le JavaScript */
.events-grid {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre les fiches horizontalement */
    gap: 20px;
    width: 100%;
}

/* =======================
   Responsive
   ======================= */
@media (max-width: 900px) {
    .bloc-events-grid-accueil{
        width: 100%;
    }
    .contener-events-grid {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
    .events-grid {
        gap: 14px;
        width: 100%;
    }
    .fiche-event,
    .fiche-event-home,
    .contener-display-event-card {
        max-width: 100%;
        padding: 25px;
    }
}