/* =============================================================================
   agenda.css — Section « Agenda » de l'accueil (components/agenda.php).
   Liste d'évènements : pastille de date + titre, date complète, ville,
   et « En savoir plus » (balise <details>, sans JavaScript).
   ============================================================================= */

#agenda {
    padding: 2rem 0;
}

#agenda h2{
    font-size: 1.4rem;
    display: inline-block;
    background: radial-gradient(var(--green-dark), var(--green-dark));
    border-radius: var(--radius-m);
    padding: 0.8rem 2rem;
    color: var(--white-pure);
    margin-bottom: 1rem;
}

.agenda-list {
    display: grid;
    gap: 0.75rem;
    max-width: var(--content-max);
    margin: 0 var(--gutter);
    padding: 0;
    list-style: none;
    text-align: left;
}

.event {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--radius-m);
    background-color: var(--white-pure);
    box-shadow: var(--shadow-soft);
}

/* Pastille de date */
.event-date {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-s);
    background: linear-gradient(180deg, var(--green-dark), var(--green-dark-2));
    color: var(--white-pure);
    line-height: 1.1;
}

.event-day {
    font-size: 1.35rem;
    font-weight: 700;
}

.event-month {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-body {
    flex: 1;
    min-width: 0;
}

.event-title {
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.3;
    text-shadow: none;
}

.event-meta {
    margin-top: 0.25rem;
    font-size: 0.9rem;
    color: var(--grey-text);
}

.event-meta time::first-letter {
    text-transform: uppercase;
}

.event-city {
    font-weight: 700;
}

/* « En savoir plus » */
.event-more {
    margin-top: 0.5rem;
}

.event-more summary {
    display: inline-block;
    padding: 0.25rem 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--green-dark);
    cursor: pointer;
    list-style: none;
}

.event-more summary::-webkit-details-marker {
    display: none;
}

.event-more summary::after {
    content: ' ▾';
}

.event-more[open] summary::after {
    content: ' ▴';
}

.event-more summary:focus-visible {
    outline: 2px solid var(--green-light);
    outline-offset: 2px;
    border-radius: 4px;
}

.event-details {
    padding-top: 0.5rem;
    font-size: 0.95rem;
}

.event-details p {
    margin-bottom: 0.5rem;
}

.event-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.event-links a {
    font-weight: 700;
    color: var(--green-dark);
    text-decoration: underline;
}

/* Évènement passé : grisé, pastille « cochée » */
.event.is-past {
    opacity: 0.65;
}

.event.is-past .event-date {
    background: var(--grey-input);
    color: var(--grey-text);
}

.event-done {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--success-bg);
    color: var(--success-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.agenda-empty {
    max-width: var(--content-max);
    margin: 0 var(--gutter) 1rem;
}

.agenda-empty a {
    text-decoration: underline;
}

/* ---------- TABLETTE ET PLUS ---------- */

@media (min-width: 768px) {
    /* Agenda centré, jamais collé aux bords */
    .agenda-list,
    .agenda-empty{
        width: calc(100% - 2 * var(--gutter));
        margin-left: auto;
        margin-right: auto;
    }

    .event {
        padding: 1.25rem 1.5rem;
        gap: 1.5rem;
    }

    #agenda h2{
        padding: 0.8rem 2.8rem;
    }
}