/* ==========================================================================
   Actualités & événements — la page d'ensemble (/actualites)
   --------------------------------------------------------------------------
   Reprise de l'ordonnance de l'ancien site, que l'association préférait :
   le prochain événement en grand, la file de ceux qui suivent, le
   calendrier du mois, les actualités (la première en une), les archives
   par année.

   Tout en jetons : la page suit le mode clair comme le reste du site.
   Chargée par cette page seule (cssExtra) ; la carte d'actualité qu'on
   retrouve ailleurs (.carte-actu) reste dans layout.css.
   ========================================================================== */

.ev-sommaire {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.ev-section { margin-top: 56px; scroll-margin-top: 96px; }
.ev-section--premiere { margin-top: 36px; }

/* Titre de section : un trait de part et d'autre, comme avant. */
.ev-titre {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 26px;
    font-size: 1.55rem;
    color: var(--texte);
}
.ev-titre::before,
.ev-titre::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--bord-violet), transparent);
}
.ev-titre--suite { margin-top: 40px; font-size: 1.3rem; }

/* État vide d'une section */
.ev-vide {
    padding: 48px 24px;
    text-align: center;
    color: var(--texte-3);
    background: var(--fond-carte);
    border: 1.5px dashed var(--bord-violet);
    border-radius: var(--r-lg);
}
.ev-vide i { display: block; margin-bottom: 12px; font-size: 2.4rem; color: var(--violet-pale); }
.ev-vide p { margin: 0; line-height: 1.6; }

/* --- Le prochain événement ------------------------------------------------ */

.ev-prochain {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px;
    align-items: center;
    padding: 40px;
    border: 1.5px solid var(--bord-violet);
    border-radius: var(--r-xl);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--violet) 14%, var(--fond-carte)),
        var(--fond-carte) 70%);
}
.ev-prochain--texte-seul { grid-template-columns: minmax(0, 1fr); }
.ev-prochain::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -15%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%);
    pointer-events: none;
}
.ev-prochain__texte { position: relative; z-index: 1; min-width: 0; }

.ev-prochain__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 18px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: var(--violet);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ev-compte {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
}
.ev-compte__nombre {
    font-family: var(--police-titre);
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: var(--violet-lien);
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .ev-compte__nombre {
        background: linear-gradient(135deg, var(--violet-lien), var(--violet));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}
.ev-compte__libelle { font-size: 1.25rem; font-weight: 600; color: var(--texte-2); }
.ev-compte__mot {
    font-family: var(--police-titre);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--violet-lien);
}

.ev-prochain__date { margin: 0 0 10px; color: var(--texte-2); font-weight: 600; }
.ev-prochain__date span { color: var(--texte-3); font-weight: 500; }
.ev-prochain__titre {
    margin: 0 0 14px;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
    text-wrap: balance;
}
.ev-prochain__extrait { margin: 0 0 18px; max-width: 58ch; color: var(--texte-2); line-height: 1.65; }
.ev-prochain__lieu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 24px;
    color: var(--texte-2);
    font-size: .95rem;
}
.ev-prochain__lieu i { color: var(--violet-lien); }

.ev-prochain__visuel {
    position: relative;
    z-index: 1;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--bord-carte);
    border-radius: var(--r-md);
}
.ev-prochain__visuel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Les événements qui suivent ------------------------------------------ */

.ev-liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ev-liste li { margin: 0; }
.ev-ligne {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 18px;
    background: var(--fond-carte);
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-md);
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.ev-ligne:hover {
    transform: translateX(6px);
    border-color: var(--violet);
    box-shadow: var(--ombre-carte);
    color: inherit;
}
.ev-ligne__date {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 58px;
    padding: 8px 0;
    text-align: center;
    line-height: 1;
    background: linear-gradient(135deg, var(--violet), var(--violet-clair));
    border-radius: var(--r-sm);
    color: #fff;
}
.ev-ligne__jour { font-family: var(--police-titre); font-size: 1.35rem; font-weight: 800; }
.ev-ligne__mois { margin-top: 3px; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; opacity: .9; }
.ev-ligne__corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-ligne__titre { font-family: var(--police-titre); font-weight: 800; font-size: 1.05rem; color: var(--texte); }
.ev-ligne__meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--texte-3); }
.ev-ligne__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ev-ligne__meta i { color: var(--violet-lien); font-size: .8rem; }
.ev-ligne__fleche { color: var(--texte-4); transition: transform var(--t-base), color var(--t-base); }
.ev-ligne:hover .ev-ligne__fleche { color: var(--violet-lien); transform: translateX(3px); }

/* --- Le calendrier -------------------------------------------------------- */

.ev-calendrier {
    max-width: 860px;
    margin: 0 auto;
    padding: 22px;
    background: var(--fond-carte);
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-lg);
}
.ev-calendrier__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ev-calendrier__nav { display: flex; gap: 6px; }
.ev-calendrier__bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 14px;
    border: 1.5px solid var(--bord-violet);
    border-radius: var(--r-pill);
    background: var(--fond-carte-2);
    color: var(--violet-lien);
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
}
.ev-calendrier__bouton:hover {
    background: var(--fond-violet-2);
    border-color: var(--violet);
    color: var(--violet-lien-hover);
}
.ev-calendrier__mois { margin: 0; font-size: 1.2rem; text-transform: capitalize; }

.ev-grille {
    width: calc(100% + 8px);
    margin: 0 -4px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
}
.ev-grille th {
    padding: 4px 0 8px;
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--texte-3);
    text-align: center;
}
.ev-grille abbr { text-decoration: none; }

.ev-jour {
    height: 88px;
    padding: 6px;
    vertical-align: top;
    background: var(--fond-carte-2);
    border: 1px solid var(--bord-doux);
    border-radius: var(--r-xs);
}
.ev-jour__num {
    display: block;
    text-align: right;
    font-size: .82rem;
    font-weight: 700;
    color: var(--texte-2);
}
/* Les jours des mois voisins : présents pour que les semaines soient entières,
   mais en retrait. Seul le numéro pâlit — un titre d'événement doit rester lisible. */
.ev-jour--hors { background: transparent; border-style: dashed; }
.ev-jour--hors .ev-jour__num { color: var(--texte-4); font-weight: 500; }
.ev-jour--aujourdhui { background: var(--fond-violet); border-color: var(--violet); }
.ev-jour--aujourdhui .ev-jour__num { color: var(--violet-lien); }

.ev-jour__liste {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ev-jour__liste li { margin: 0; min-width: 0; }
.ev-puce {
    display: block;
    padding: 2px 6px;
    border-radius: var(--r-mini);
    background: var(--violet);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
.ev-puce:hover,
.ev-puce:focus-visible { background: var(--violet-fonce); color: #fff; }
.ev-puce--plus { background: var(--fond-violet-2); color: var(--violet-lien); text-align: center; }

/* La liste du mois, sous la grille */
.ev-mois {
    list-style: none;
    margin: 18px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--bord-doux);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ev-mois li { margin: 0; }
.ev-mois a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 8px 10px;
    border-radius: var(--r-xs);
    color: inherit;
    text-decoration: none;
}
.ev-mois a:hover { background: var(--fond-survol); color: inherit; }
.ev-mois time { flex-shrink: 0; min-width: 64px; font-size: .9rem; font-weight: 700; color: var(--violet-lien); }
.ev-mois__titre { font-weight: 700; }
.ev-mois__lieu { font-size: .88rem; color: var(--texte-3); }
.ev-calendrier__vide {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--bord-doux);
    text-align: center;
    font-size: .92rem;
    color: var(--texte-3);
}

/* --- Les actualités ------------------------------------------------------- */

.ev-actus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.ev-actu { display: flex; min-width: 0; }
.ev-actu[hidden] { display: none; }
.ev-actu__lien {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    background: var(--fond-carte);
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-lg);
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.ev-actu__lien:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: var(--ombre-carte);
    color: inherit;
}
.ev-actu__image { height: 200px; overflow: hidden; }
.ev-actu__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}
.ev-actu__lien:hover .ev-actu__image img { transform: scale(1.04); }
.ev-actu__corps {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px 22px;
}
.ev-actu__date { font-size: .82rem; font-weight: 600; color: var(--texte-3); }
.ev-actu__titre { margin: 0; font-size: 1.12rem; line-height: 1.35; }
.ev-actu__extrait {
    margin: 0;
    font-size: .93rem;
    line-height: 1.6;
    color: var(--texte-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ev-actu__lire {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 6px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--violet-lien);
}

/* La première actualité, en une : sur toute la largeur, l'image à gauche. */
.ev-actu--une { grid-column: 1 / -1; }
.ev-actu--une.ev-actu--illustree .ev-actu__lien {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.ev-actu--une.ev-actu--illustree .ev-actu__image { height: 100%; min-height: 280px; }
.ev-actu--une .ev-actu__corps { justify-content: center; padding: 32px; }
.ev-actu--une .ev-actu__titre { font-size: 1.5rem; }
.ev-actu--une .ev-actu__extrait { -webkit-line-clamp: 4; }

.ev-actus__plus { margin: 22px 0 0; text-align: center; }
/* .btn impose son display : « hidden » seul ne suffirait pas. */
[data-ev-voir-plus][hidden] { display: none; }

/* --- Les archives --------------------------------------------------------- */

.ev-annees {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 26px;
}
.ev-annee {
    padding: 8px 22px;
    border: 1.5px solid var(--bord-violet);
    border-radius: var(--r-pill);
    background: var(--fond-carte);
    color: var(--texte-2);
    font-weight: 600;
    text-decoration: none;
}
.ev-annee:hover { border-color: var(--violet); color: var(--violet-lien); }
.ev-annee.is-active { background: var(--violet); border-color: var(--violet); color: #fff; }

.ev-archives { max-width: 860px; margin: 0 auto; }
.ev-archives[hidden] { display: none; }
.ev-archives__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ev-archives__liste li { margin: 0; }
.ev-archive {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 12px 18px;
    background: var(--fond-carte);
    border: 1.5px solid var(--bord-carte);
    border-radius: var(--r-sm);
    color: inherit;
    text-decoration: none;
    transition: transform var(--t-base), border-color var(--t-base);
}
.ev-archive:hover { transform: translateX(4px); border-color: var(--violet); color: inherit; }
.ev-archive__date { font-size: .88rem; font-weight: 700; color: var(--texte-3); font-variant-numeric: tabular-nums; }
.ev-archive__titre { font-weight: 700; }
.ev-archive__lieu { font-size: .85rem; color: var(--texte-3); }

/* --- Petits écrans -------------------------------------------------------- */

@media (max-width: 1080px) {
    .ev-prochain { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
    .ev-prochain__visuel { order: -1; aspect-ratio: 16 / 9; }
    .ev-actu--une.ev-actu--illustree .ev-actu__lien { grid-template-columns: minmax(0, 1fr); }
    .ev-actu--une.ev-actu--illustree .ev-actu__image { min-height: 0; height: 220px; }
}

@media (max-width: 860px) {
    .ev-titre { font-size: 1.3rem; }
    .ev-prochain { padding: 22px; border-radius: var(--r-lg); }
    .ev-compte__nombre { font-size: 3rem; }
    .ev-actus { grid-template-columns: minmax(0, 1fr); }
    .ev-actu--une .ev-actu__corps { padding: 22px; }
    .ev-actu--une .ev-actu__titre { font-size: 1.2rem; }

    /* Les cases n'ont plus la place d'un titre : un point par événement,
       la liste du mois, juste dessous, dit le reste. */
    .ev-jour { height: 52px; padding: 4px; }
    .ev-jour__liste { flex-direction: row; flex-wrap: wrap; gap: 3px; }
    .ev-puce {
        width: 8px;
        height: 8px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        line-height: 0;
    }

    .ev-archive { grid-template-columns: 56px minmax(0, 1fr); }
    .ev-archive__lieu { grid-column: 2; }
}

@media (max-width: 560px) {
    .ev-calendrier { padding: 14px; }
    .ev-grille th { font-size: .66rem; letter-spacing: 0; }
    .ev-ligne { gap: 12px; padding: 12px 14px; }
    .ev-ligne__fleche { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .ev-ligne, .ev-ligne__fleche, .ev-actu__lien, .ev-actu__image img, .ev-archive { transition: none; }
    .ev-ligne:hover, .ev-actu__lien:hover, .ev-archive:hover { transform: none; }
    .ev-ligne:hover .ev-ligne__fleche, .ev-actu__lien:hover .ev-actu__image img { transform: none; }
}