/* ============================================================
   ARTAWEB — MODULE AGENDA (front)
   Chargé UNIQUEMENT sur une page d'agenda, une fiche d'événement, ou une page
   portant un composant de l'agenda (drapeau $pageHasEvents dans index.php).

   Règle du module : aucune couleur en dur hors de la palette de catégories
   ci-dessous. Tout passe par les tokens de base.css, donc la charte graphique
   et le mode sombre s'appliquent sans une seule règle supplémentaire.
   ============================================================ */

/* --- Palette des catégories -------------------------------------------------
   Ces teintes ne servent JAMAIS de fond de texte : elles colorent un filet
   vertical de 3 px à gauche de la ligne. Le contraste AA est donc garanti en
   clair comme en sombre sans calcul de luminance. */
.events-slot--red    { --ev-color: #c0392b; }
.events-slot--orange { --ev-color: #d35400; }
.events-slot--yellow { --ev-color: #b7950b; }
.events-slot--green  { --ev-color: #1e8449; }
.events-slot--teal   { --ev-color: #117a65; }
.events-slot--blue   { --ev-color: #1f618d; }
.events-slot--indigo { --ev-color: #4a3f9f; }
.events-slot--purple { --ev-color: #6c3483; }
.events-slot--pink   { --ev-color: #a93226; }
.events-slot--brown  { --ev-color: #6e4b3a; }
.events-slot--grey   { --ev-color: #566573; }

/* ============================================================
   PAGE D'AGENDA
   ============================================================ */

.section--events .events__head { margin-bottom: var(--space-lg); }
.events__title { margin: 0 0 var(--space-sm); }
.events__intro { color: var(--color-muted); max-width: 65ch; }

.events-layout { display: block; }

@media (min-width: 900px) {
    .events-layout--left,
    .events-layout--right {
        display: grid;
        grid-template-columns: 15rem minmax(0, 1fr);
        gap: var(--space-xl);
        align-items: start;
    }
    .events-layout--right { grid-template-columns: minmax(0, 1fr) 15rem; }
    .events-layout--right .events-side { order: 2; }
}

/* --- Duo : programmation à gauche, calendrier à droite --------------------- */
.events-split { display: block; }

/* `.section` (layout.css) porte `overflow: hidden` pour contenir les fonds de
   section. Or un overflow crée un conteneur de défilement, ce qui NEUTRALISE le
   `position: sticky` de tout descendant — le calendrier ne collerait jamais.
   `overflow: clip` confine exactement de la même façon SANS créer ce conteneur.
   Les navigateurs qui l'ignorent (Safari < 16) gardent `hidden` : ils perdent
   seulement le collage, rien d'autre. */
.section--events {
    overflow: hidden;   /* repli pour les navigateurs sans « clip » */
    overflow: clip;
}

/* Hauteur du header fixe une fois réduit au défilement — la même valeur que
   celle utilisée par layout.css pour dégager la première section. Le calendrier
   vient se caler juste dessous. */
.events-split { --events-header-h: 88px; }

@media (min-width: 900px) {
    .events-split {
        display: grid;
        /* Le calendrier est un accessoire de navigation : il reste étroit et
           laisse la programmation occuper la place. */
        grid-template-columns: minmax(0, 1fr) 17rem;
        gap: var(--space-xl);
        align-items: start;
    }

    /* Le calendrier suit le défilement et se bloque sous l'en-tête : il reste
       à portée de clic quelle que soit la longueur de la programmation. */
    .events-split__side {
        position: sticky;
        top: calc(var(--events-header-h) + var(--space-md));
        /* Filet : sur un écran bas, le calendrier défile dans sa propre colonne
           plutôt que de déborder hors de la fenêtre. */
        max-height: calc(100vh - var(--events-header-h) - var(--space-lg));
        overflow-y: auto;
        /* Marge intérieure pour que le contour de focus d'un jour ne soit pas
           rogné par le débordement. */
        padding: 2px;
        margin: -2px;
    }
}

/* Écran bas en paysage : le calendrier collant mangerait toute la hauteur. */
@media (min-width: 900px) and (max-height: 520px) {
    .events-split__side { position: static; max-height: none; overflow: visible; }
}

@media (max-width: 899px) {
    /* Sur petit écran, le calendrier passe AU-DESSUS de la liste : c'est
       l'outil de navigation, il doit rester à portée de pouce. */
    .events-split__side  { order: 1; margin-bottom: var(--space-lg); }
    .events-split__main  { order: 2; }
    .events-split { display: flex; flex-direction: column; }
}

/* --- Barre de contexte de la liste ---------------------------------------- */
.events-daybar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.events-daybar__title { margin: 0; font-size: var(--text-lg); }
.events-daybar__reset { font-size: var(--text-sm); }

/* --- Liste de films / de séances ------------------------------------------ */
.events-list { list-style: none; margin: 0; padding: 0; }

.events-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    /* Filet de catégorie : la couleur regroupe, elle n'informe jamais seule. */
    border-left: 3px solid var(--ev-color, transparent);
}
.events-item:hover { background: var(--color-surface); }

.events-item__thumb-link { flex: 0 0 auto; display: block; }

.events-thumb {
    display: block;
    width: 80px;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    /* Cadrage imposé : une affiche verticale et une image large occupent la
       même case, la liste ne bouge pas d'une ligne à l'autre. */
    aspect-ratio: 2 / 3;
}
.events-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.events-thumb--empty { display: block; }

.events-item__body { flex: 1 1 auto; min-width: 0; }

.events-item__time {
    margin: 0 0 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: var(--text-lg);
}
.events-item__title { margin: 0 0 2px; font-size: var(--text-base); }
.events-item__title a { color: inherit; text-decoration: none; }
.events-item__title a:hover { color: var(--color-accent); }

.events-item__subtitle {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    font-style: italic;
    color: var(--color-muted);
}

.events-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin: var(--space-xs) 0 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.events-item__meta > * + *::before { content: '·'; margin-right: var(--space-sm); }

.events-item__times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 0;
}
.events-time {
    display: inline-block;
    padding: 2px var(--space-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--text-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.events-item__count { font-size: var(--text-xs); color: var(--color-muted); }

.events-item__action { flex: 0 0 auto; margin-left: auto; align-self: center; }

.events-item--cancelled { opacity: .65; }
.events-item--cancelled .events-item__time,
.events-item--cancelled .events-item__title a { text-decoration: line-through; }

/* Pastilles de fiche : durée, âge légal… */
.events-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: var(--space-xs) 0 0;
    padding: 0;
}
.events-badge {
    padding: 1px var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

@media (max-width: 599px) {
    .events-item { gap: var(--space-sm); padding-left: var(--space-sm); }
    .events-thumb { width: 60px; }
    .events-item__action { width: 100%; margin: var(--space-sm) 0 0; align-self: flex-start; }
    .events-item { flex-wrap: wrap; }
}

/* --- Le programme, jour par jour ------------------------------------------ */
.events-agenda__day + .events-agenda__day { margin-top: var(--space-lg); }

.events-agenda__date {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-base);
    /* Pas de text-transform : le nom du jour arrive capitalisé de PHP et, en
       français, le mois s'écrit en minuscules (« Jeudi 3 septembre »). */
}
.events-agenda__date a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 2px;
}
.events-agenda__date a:hover { border-bottom-color: var(--color-accent); }

.events-agenda__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.events-slot {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    /* Filet de catégorie : la couleur ne porte jamais seule une information,
       elle ne fait que regrouper visuellement. */
    border-left: 3px solid var(--ev-color, transparent);
}
.events-slot:hover { background: var(--color-surface); }

.events-slot__time {
    flex: 0 0 auto;
    min-width: 3.5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.events-slot__body {
    flex: 1 1 auto;
    min-width: 0;
}
.events-slot__title {
    display: block;
    color: inherit;
    font-weight: 600;
    text-decoration: none;
}
.events-slot__title:hover { color: var(--color-accent); }

.events-slot__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    margin-top: 2px;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.events-slot__meta > * + *::before {
    content: '·';
    margin-right: var(--space-sm);
}

.events-slot__action {
    flex: 0 0 auto;
    margin-left: auto;
}

/* Statut : toujours écrit en toutes lettres (WCAG 1.4.1). La rature et
   l'opacité ne font que renforcer une information déjà textuelle. */
.events-slot__status,
.event-slot__status {
    display: inline-block;
    padding: 2px var(--space-sm);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
}
.events-slot--cancelled .events-slot__title,
.events-slot--cancelled .events-slot__time,
.event-slot--cancelled .event-slot__time { text-decoration: line-through; }
.events-slot--cancelled,
.event-slot--cancelled { opacity: .65; }

.events__empty,
.event__empty {
    padding: var(--space-lg);
    color: var(--color-muted);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    text-align: center;
}

/* ============================================================
   FICHE D'UN ÉVÉNEMENT
   ============================================================ */

.event__head { margin-bottom: var(--space-lg); }

@media (min-width: 700px) {
    .event__head {
        display: grid;
        grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
        gap: var(--space-xl);
        align-items: start;
    }
}

.event__poster { margin: 0 0 var(--space-md); }
.event__poster img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.event__cat {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.event__cat a { color: var(--color-muted); text-decoration: none; }
.event__cat a:hover { color: var(--color-accent); }

.event__title { margin: 0 0 var(--space-xs); }
.event__subtitle {
    margin: 0 0 var(--space-sm);
    color: var(--color-muted);
    font-style: italic;
}

.event__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
}
.event__badge {
    padding: 2px var(--space-sm);
    font-size: var(--text-xs);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
}

.event__infos {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--space-sm);
    margin: 0;
    font-size: var(--text-sm);
}
.event__infos dt { color: var(--color-muted); }
.event__infos dd { margin: 0; }

.event__body { margin-bottom: var(--space-lg); }

/* Boutons de liens externes (bande-annonce, site officiel…). Seuls les champs
   remplis en produisent un : la rangée disparaît entièrement si aucun ne l'est. */
.event__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: 0 0 var(--space-xl);
}

/* --- Les séances de la fiche ---------------------------------------------- */
.event__sessions,
.event__reg,
.event__details,
.event__venue {
    margin-bottom: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}
.event__sessions-title,
.event__reg-title,
.event__details-title,
.event__venue-title {
    margin: 0 0 var(--space-md);
    font-size: var(--text-xl);
}

.event-day + .event-day { margin-top: var(--space-md); }
.event-day.is-past { opacity: .55; }
.event-day__title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-base);
}
.event-day__list { list-style: none; margin: 0; padding: 0; }

.event-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}
.event-slot__time {
    flex: 0 0 auto;
    min-width: 5rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.event-slot__end { color: var(--color-muted); font-weight: 400; }
.event-slot__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.event-slot__meta > * + *::before { content: '·'; margin-right: var(--space-sm); }
.event-slot__action { margin-left: auto; }

/* --- Fiche technique et lieu ---------------------------------------------- */
.event__spec {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-xs) var(--space-md);
    margin: 0;
}
.event__spec dt { color: var(--color-muted); }
.event__spec dd { margin: 0; }

@media (max-width: 599px) {
    .event__spec,
    .event__infos { grid-template-columns: 1fr; }
    .event__spec dt,
    .event__infos dt { margin-top: var(--space-xs); }
}

.event__venue-name  { margin: 0 0 2px; }
.event__venue-addr,
.event__venue-access { margin: 0 0 var(--space-sm); color: var(--color-muted); }

/* --- Pied de fiche -------------------------------------------------------- */
.event__foot {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}
.event__back { text-decoration: none; }

.event__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: space-between;
    margin-top: var(--space-md);
}
.event__nav-link {
    flex: 1 1 14rem;
    padding: var(--space-sm) var(--space-md);
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border-radius: var(--radius-md);
}
.event__nav-link:hover { box-shadow: var(--shadow-sm); }
.event__nav-link--next { text-align: right; }
.event__nav-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.event__nav-title { display: block; font-weight: 600; }

/* --- Petits écrans -------------------------------------------------------- */
@media (max-width: 599px) {
    .events-slot,
    .event-slot { flex-wrap: wrap; }
    .events-slot__action,
    .event-slot__action {
        width: 100%;
        margin-left: 0;
        text-align: right;
    }
}

/* Aucune transition sur la navigation de mois pour qui la refuse. */
@media (prefers-reduced-motion: reduce) {
    .events-slot,
    .events-nav__arrow,
    .event__nav-link { transition: none; }
}

/* ============================================================
   SÉLECTEUR DE VUE
   ============================================================ */
.events-views {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}
.events-views__link {
    /* SC 2.5.8 Target Size : cible confortable au pouce. */
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    color: inherit;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
.events-views__link:hover { border-color: var(--color-border); }
.events-views__link.is-active {
    font-weight: 600;
    border-color: var(--color-accent);
    /* La sélection n'est pas portée par la seule couleur : le trait sous
       l'onglet et le gras la disent aussi. */
    box-shadow: inset 0 -3px 0 var(--color-accent);
}

/* ============================================================
   CALENDRIER COMPACT (colonne latérale)
   Un vrai <table> : les lecteurs d'écran annoncent « colonne Jeudi ».
   ============================================================ */
.events-cal-title {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-base);
}

.events-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}
.events-cal-nav__label {
    font-weight: 600;
    font-size: var(--text-sm);
}
.events-cal-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* SC 2.5.8 Target Size : 44 px de cible, même dans une colonne étroite. */
    min-width: 44px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.events-cal-nav__arrow:hover { background: var(--color-surface); }

.events-cal__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.events-cal__table th {
    padding: 2px 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-muted);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
}
.events-cal__table th abbr { text-decoration: none; border: 0; }

.events-cal__cell {
    padding: 1px;
    text-align: center;
    vertical-align: middle;
}

.events-cal__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    /* Cible tactile : la case fait 40 px de haut même dans 17 rem de large. */
    min-height: 40px;
    padding: 2px;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
}
a.events-cal__day:hover,
a.events-cal__day:focus-visible { background: var(--color-surface); }
.events-cal__day--empty { color: var(--color-muted); }
.is-out .events-cal__num { opacity: .35; }
.is-past .events-cal__day { opacity: .5; }

.events-cal__num {
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
/* Un jour qui a des séances est en gras : lisible sans distinguer les couleurs. */
.has-events .events-cal__num { font-weight: 700; }

/* Aujourd'hui : contour de cellule. Jour SÉLECTIONNÉ : pastille pleine.
   Deux marqueurs distincts, aucun ne reposant sur la seule teinte. */
.events-cal__cell.is-today { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-sm); }

.events-cal__cell.is-selected .events-cal__day { background: var(--color-accent); }
.events-cal__cell.is-selected .events-cal__num { color: var(--color-bg); font-weight: 700; }
.events-cal__cell.is-selected .events-cal__dot { background: var(--color-bg); }

.events-cal__dots { display: flex; gap: 2px; }
.events-cal__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ev-color, var(--color-accent));
}

.events-cal__legend {
    margin: var(--space-xs) 0 var(--space-md);
    font-size: var(--text-xs);
    color: var(--color-muted);
}

/* --- Filtres de la colonne latérale --------------------------------------- */
.events-filters--side {
    flex-direction: column;
    align-items: stretch;
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
}
.events-filters--side .events-filters__field select { width: 100%; }

/* ============================================================
   VUE AFFICHES — le mur
   ============================================================ */
.events-wall {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px)  { .events-wall--c3, .events-wall--c4, .events-wall--c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .events-wall--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
                             .events-wall--c5 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .events-wall--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.events-poster { min-width: 0; }
.events-poster__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.events-poster__frame {
    display: block;
    overflow: hidden;
    background: var(--color-surface);
    border-radius: var(--radius-md);
}
.events-poster__frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base) ease;
}
.events-poster__link:hover .events-poster__frame img { transform: scale(1.03); }

/* Formats réguliers : toutes les affiches au même gabarit. */
.events-wall--2-3  .events-poster__frame { aspect-ratio: 2 / 3; }
.events-wall--1-1  .events-poster__frame { aspect-ratio: 1 / 1; }
.events-wall--3-4  .events-poster__frame { aspect-ratio: 3 / 4; }
.events-wall--16-9 .events-poster__frame { aspect-ratio: 16 / 9; }

/* Hauteurs libres : vrai mur en briques, chaque image à sa proportion. */
.events-wall--free {
    display: block;
    column-gap: var(--space-md);
    columns: 2;
}
@media (min-width: 600px)  { .events-wall--free.events-wall--c3,
                             .events-wall--free.events-wall--c4,
                             .events-wall--free.events-wall--c5 { columns: 3; } }
@media (min-width: 900px)  { .events-wall--free.events-wall--c4 { columns: 4; } }
@media (min-width: 1200px) { .events-wall--free.events-wall--c5 { columns: 5; } }
.events-wall--free .events-poster {
    /* break-inside : sans cela une affiche se couperait entre deux colonnes. */
    break-inside: avoid;
    margin-bottom: var(--space-md);
}
.events-wall--free .events-poster__frame img { height: auto; }

.events-poster__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 10rem;
    padding: var(--space-md);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    text-align: center;
    color: var(--color-muted);
}

.events-poster__body { display: block; padding-top: var(--space-xs); }
.events-poster__title {
    display: block;
    font-weight: 600;
    line-height: 1.25;
}
.events-poster__link:hover .events-poster__title { color: var(--color-accent); }
.events-poster__next,
.events-poster__count {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
    .events-poster__frame img,
    .events-poster__link:hover .events-poster__frame img { transition: none; transform: none; }
}

/* --- Navigation sans rechargement ------------------------------------------
   Pendant la requête, la zone s'estompe légèrement : le visiteur voit qu'il se
   passe quelque chose, sans que le contenu disparaisse ni que la page saute. */
.events-split.is-loading {
    opacity: .55;
    /* Les clics sont neutralisés le temps du chargement : on évite d'empiler
       trois requêtes en tapotant sur le calendrier. */
    pointer-events: none;
    transition: opacity var(--transition-fast) ease;
}

@media (prefers-reduced-motion: reduce) {
    .events-split.is-loading { transition: none; }
}

/* Le titre reçoit le focus après une navigation : il ne doit pas afficher de
   contour permanent, mais rester visible au clavier. */
.events-daybar__title:focus { outline: none; }
.events-daybar__title:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

/* ============================================================
   COMPOSANTS D'AGENDA (posables dans n'importe quelle page)
   Ils réutilisent les briques de la page d'agenda — liste, vignettes,
   pastilles, mur, calendrier — et n'ajoutent que leur enveloppe.
   ============================================================ */
.events-block__title {
    margin: 0 0 var(--space-md);
}

.events-block__more {
    margin: var(--space-md) 0 0;
}

/* Dans une page ordinaire, la liste n'a pas de filet de catégorie à gauche :
   ce repère n'a de sens que dans l'agenda complet, où plusieurs rubriques se
   côtoient. */
.events-block--list .events-item {
    border-left: 0;
    padding-left: 0;
}

/* Le calendrier en composant est autonome : il ne colle pas et reste à la
   largeur que lui laisse sa colonne. */
.events-block--cal {
    max-width: 22rem;
}
.events-block--cal .events-cal-nav {
    justify-content: center;
}

/* Aligné par « Mise en forme » : le composant suit, pas seulement son titre. */
.block-fx--align-center .events-block--cal { margin-inline: auto; }
.block-fx--align-right  .events-block--cal { margin-inline-start: auto; }


/* ============================================================
   INSCRIPTION EN LIGNE
   ============================================================
   Une séance = un dépliant. Fermé par défaut : la page d'un film
   qui affiche vingt séances ne doit pas dérouler vingt
   formulaires. L'ancre « #inscription-501 » posée par le bouton
   de la liste des séances amène au bon dépliant : les navigateurs
   récents ouvrent d'eux-mêmes un <details> ciblé par l'ancre ;
   ailleurs, la bordure d'accent le désigne et un clic l'ouvre.
   scroll-margin-top le dégage de l'en-tête flottant. */

.event-reg__slot {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--color-surface);
    scroll-margin-top: var(--space-2xl);
}
.event-reg__slot > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    /* 44 px de haut : cible tactile confortable (WCAG 2.5.8). */
    min-height: 44px;
    padding: var(--space-sm) var(--space-md);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md);
}
.event-reg__slot > summary::-webkit-details-marker { display: none; }
.event-reg__slot > summary::marker { content: ''; }
/* Chevron : purement décoratif, l'état est déjà porté par <details>. */
.event-reg__slot > summary::after {
    content: '';
    margin-left: auto;
    width: .55em;
    height: .55em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transform-origin: center;
    opacity: .6;
}
.event-reg__slot[open] > summary::after { transform: rotate(-135deg); }
.event-reg__slot > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.event-reg__slot[open] > summary { border-bottom: 1px solid var(--color-border); }
/* La cible de l'ancre s'ouvre même si le visiteur n'a pas de JavaScript. */
.event-reg__slot:target { border-color: var(--color-accent); }

.event-reg__venue {
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.event-reg { padding: var(--space-md); }
.event-reg__left,
.event-slot__left {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
}
.event-reg__left { margin: 0 0 var(--space-sm); }
.event-slot__left { display: block; margin-top: 2px; }

.event-reg__closed {
    margin: 0;
    padding: var(--space-md);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

@media (max-width: 700px) {
    .event-reg__slot > summary { padding: var(--space-sm); }
    .event-reg { padding: var(--space-sm); }
}

/* Refus d'une inscription (séance devenue complète, envoi forgé…). Le rôle
   « alert » le fait annoncer immédiatement par les lecteurs d'écran.
   #c0392b est le rouge d'erreur déjà employé par les formulaires
   (components.css) ; il ne sert ici qu'au filet et à une teinte à 7 %, le
   texte restant en --color-text — contraste garanti en clair comme en
   sombre. */
.event-reg__error {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid #c0392b;
    border-left-width: 4px;
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: color-mix(in srgb, #c0392b 7%, transparent);
    font-size: var(--text-sm);
}

/* Confirmation d'inscription. Même grammaire que le refus, mais à l'accent de
   la charte — c'est la convention des formulaires (.mp-form__success), et le
   succès suit ainsi la couleur du site plutôt qu'un vert plaqué. */
.event-reg__success {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-accent);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-accent) 15%, var(--color-bg));
    color: var(--color-text);
}
.event-reg__success p { margin: 0; }
.event-reg__success p + p { margin-top: var(--space-xs); }
.event-reg__success-slot { font-size: var(--text-sm); }

/* Séance qui déborde de son jour : « Toute la journée · jusqu'au 15 décembre ».
   L'information est écrite, jamais portée par une seule couleur. */
.event-slot__span,
.events-item__span {
    font-size: var(--text-xs);
    color: var(--color-muted);
    white-space: nowrap;
}
.event-slot__span::before,
.events-item__span::before { content: '· '; }

/* Organisateur tiers : une ligne discrète, présente seulement quand
   l'événement n'est pas organisé par le site lui-même. */
.event__organizer {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.event__organizer-label { font-weight: 600; }

/* « Ajouter à mon calendrier » : proposé sous les dates, jamais au milieu. */
.event__ics { margin: calc(var(--space-md) * -1) 0 var(--space-xl); }

/* Récurrence résumée en une phrase, au-dessus de la liste des dates. */
.event__recurrence {
    margin: calc(var(--space-md) * -1) 0 var(--space-md);
    font-size: var(--text-base);
    font-weight: 600;
}
/* La liste complète, repliée quand la phrase suffit. */
.event__dates-fold > summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) 0;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-muted);
}
.event__dates-fold > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
.event__dates-fold[open] > summary { margin-bottom: var(--space-sm); }