/* =====================================================================
   Page Événements v2 (8 nov. 2026) : refonte « agenda ». Chargée seulement par evenements.php. Préfixe .csb-ag-
   Parti pris : une page d'agenda, pas une liste de cartes. Le rendez-vous à venir est traité comme une page d'agenda
   (grand chiffre du jour, jour de la semaine, compte à rebours) ; les événements passés forment un registre daté,
   lu de haut en bas, avec une petite vignette. Grammaire de l'accueil : trait jaune, titres noirs, filets fins.
   ===================================================================== */
.csb-ag-page {
	--ag-foret: #004540; --ag-encre: #16231A; --ag-noir: #111; --ag-vegetal: #23734A; --ag-mil: #FFE06A;
	--ag-craie: #F8F7F0; --ag-trait: rgba(0, 69, 64, .12); --ag-doux: rgba(22, 35, 26, .72);
	--ag-section: clamp(64px, 36px + 4vw, 112px);
}
.csb-ag p, .csb-ag li, .csb-ag dd { text-align: left; -webkit-hyphens: manual; hyphens: manual; }
body.csb-ag-page .csb-ag p:not(#csb) { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--ag-encre); }
.csb-ag a:focus-visible, .csb-ag button:focus-visible { outline: 2px solid var(--ag-foret); outline-offset: 3px; border-radius: 4px; }

/* --- En-tête --- */
.csb-ag-tete { padding: clamp(28px, 3vw, 44px) 0 clamp(40px, 4vw, 64px); border-bottom: 1px solid var(--ag-trait); background: #fff; }
.csb-ag-fil { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0 0 clamp(32px, 4vw, 56px); padding: 0; list-style: none; font-size: 14px; color: var(--ag-doux); }
.csb-ag-fil li + li::before { content: "/"; margin: 0 10px; color: rgba(0, 69, 64, .35); }
.csb-ag-fil a { color: var(--ag-foret); text-decoration: underline; text-decoration-color: rgba(0, 69, 64, .3); text-underline-offset: 4px; }
.csb-ag-tete-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
body.csb-ag-page p.csb-ag-sur:not(#csb) { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ag-vegetal); }
.csb-ag-sur::before { content: ""; flex: none; width: 28px; height: 4px; border-radius: 2px; background: var(--ag-mil); }
body.csb-ag-page .csb-ag-tete h1:not(#csb) { margin: 0; font-family: var(--csb-font-titre); font-size: clamp(34px, 24px + 2vw, 54px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; color: var(--ag-noir); text-wrap: balance; }
body.csb-ag-page p.csb-ag-intro:not(#csb) { margin: 0; max-width: 46ch; font-size: 17px; color: var(--ag-doux); }

/* Titres de section */
body.csb-ag-page h2.csb-ag-h2:not(#csb) { margin: 0 0 clamp(24px, 3vw, 36px); font-family: var(--csb-font-texte); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ag-vegetal); }

/* Méta (statut, catégorie, lieu), séparées par des filets verticaux */
body.csb-ag-page p.csb-ag-meta:not(#csb) { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; margin: 0 0 12px; font-size: 13.5px; font-weight: 600; color: var(--ag-foret); }
.csb-ag-meta > span + span { padding-left: 12px; margin-left: 12px; border-left: 1px solid var(--ag-trait); }
.csb-ag-statut { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 100px; font-size: 12px; font-weight: 700; }
.csb-ag-statut.is-a-venir, .csb-ag-statut.is-en-cours { background: var(--ag-mil); color: var(--ag-foret); }
.csb-ag-statut.is-passe { padding: 0; color: var(--ag-doux); }
body.csb-ag-page .csb-ag-titre:not(#csb) { margin: 0 0 12px; font-family: var(--csb-font-titre); font-weight: 600; line-height: 1.18; letter-spacing: -.01em; color: var(--ag-noir); text-wrap: balance; }

/* Liens */
.csb-ag-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 20px; }
.csb-ag-lien { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ag-foret); text-decoration: underline; text-decoration-color: var(--ag-mil); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s ease; }
.csb-ag-lien:hover { color: var(--ag-foret); text-decoration-color: var(--ag-foret); }

/* --- Grille de cartes (12 nov. 2026) : 3 colonnes sur ordinateur, 2 sur tablette, 1 sur téléphone --- */
.csb-ag-avenir { padding: var(--ag-section) 0; background: var(--ag-craie); }
.csb-ag-archives { padding: var(--ag-section) 0; background: #fff; }
.csb-ag-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.2vw, 32px); align-items: stretch; }
.csb-ag-grille:empty { display: none; }
.csb-ag-vide:not([hidden]) + .csb-ag-grille { margin-top: 24px; }

.csb-ag-carte { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ag-trait); border-radius: 10px; background: #fff; overflow: hidden; scroll-margin-top: 120px; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease; }
.csb-ag-carte.is-avenir { border-top: 4px solid var(--ag-foret); }
.csb-ag-carte:target { outline: 3px solid var(--ag-mil); outline-offset: 3px; }

.csb-ag-carte-photo { position: relative; margin: 0; }
.csb-ag-carte-photo a { display: block; overflow: hidden; }
.csb-ag-carte-photo img:not(#csb) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
body.csb-ag-page .csb-ag-carte-photo figcaption:not(#csb) { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 16px); margin: 0; padding: 3px 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); font-size: 11.5px; line-height: 1.3; color: #fff; }
/* Pavé de date posé sur la photo */
body.csb-ag-page p.csb-ag-pave:not(#csb) { position: absolute; left: 14px; bottom: -22px; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 8px; background: var(--ag-foret); color: #fff; box-shadow: 0 8px 18px -10px rgba(0, 40, 36, .6); }
.csb-ag-pave-jour { font-family: var(--csb-font-titre); font-size: 34px; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.csb-ag-pave-mois { padding-left: 10px; border-left: 2px solid var(--ag-mil); font-size: 13px; font-weight: 700; line-height: 1.25; text-transform: capitalize; }
.csb-ag-pave-mois.is-seul { padding: 4px 0; border-left: 0; font-size: 15px; }

.csb-ag-carte-corps { display: flex; flex-direction: column; flex: 1; padding: 38px clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px); }
body.csb-ag-page .csb-ag-carte .csb-ag-titre:not(#csb) { font-size: clamp(19px, 17px + .4vw, 22px); }
/* Fiche Date / Lieu / Programme : libellé à gauche, valeur à droite (le thème grossit dt : spécificité renforcée) */
body.csb-ag-page .csb-ag-carte dl.csb-ag-infos:not(#csb) { margin: 2px 0 14px; border-top: 1px solid var(--ag-trait); }
body.csb-ag-page .csb-ag-carte .csb-ag-infos > div:not(#csb) { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ag-trait); }
body.csb-ag-page .csb-ag-carte .csb-ag-infos dt:not(#csb) { margin: 0; font-family: var(--csb-font-texte); font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .02em; color: var(--ag-doux); }
body.csb-ag-page .csb-ag-carte .csb-ag-infos dd:not(#csb) { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--ag-encre); }
body.csb-ag-page .csb-ag-carte-corps > p:not(.csb-ag-meta):not(#csb) { font-size: 15px; line-height: 1.6; }
.csb-ag-carte-pied { margin-top: auto; }
body.csb-ag-page .csb-ag-carte p.csb-ag-rebours:not(#csb) { display: inline-block; margin: 8px 0 0; padding-top: 10px; border-top: 3px solid var(--ag-mil); font-size: 14px; font-weight: 700; color: var(--ag-foret); }
.csb-ag-carte .csb-ag-liens { margin-top: 14px; gap: 8px 20px; }
/* Une carte « à venir » devenue passée (déplacée par le script) : plus de bouton ni de compte à rebours */
[data-csb-ev-liste="passes"] .csb-ag-carte [data-csb-ev-actif], [data-csb-ev-liste="passes"] .csb-ag-rebours { display: none !important; }
[data-csb-ev-liste="passes"] .csb-ag-carte.is-avenir { border-top-width: 1px; border-top-color: var(--ag-trait); }

@media (hover: hover) {
	.csb-ag-carte:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -22px rgba(0, 40, 36, .45); }
	.csb-ag-carte:hover .csb-ag-carte-photo img { transform: scale(1.03); }
}
@media (max-width: 1199px) { .csb-ag-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .csb-ag-grille { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
	.csb-ag-carte, .csb-ag-carte-photo img { transition: none; }
	.csb-ag-carte:hover, .csb-ag-carte:hover .csb-ag-carte-photo img { transform: none; }
}

/* --- Suivre --- */
.csb-ag-suivre { padding: clamp(56px, 6vw, 88px) 0; background: var(--ag-foret); }
.csb-ag-suivre-grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) auto; gap: 20px clamp(24px, 4vw, 64px); align-items: center; }
body.csb-ag-page .csb-ag-suivre h2:not(#csb) { margin: 0; font-family: var(--csb-font-titre); font-size: clamp(26px, 21px + .8vw, 31px); font-weight: 600; line-height: 1.2; color: #fff; text-wrap: balance; }
body.csb-ag-page .csb-ag-suivre p:not(#csb) { margin: 0; color: rgba(255, 255, 255, .82); }
.csb-ag-suivre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.csb-ag-lien.is-clair { color: #fff; }
.csb-ag-lien.is-clair:hover { color: #fff; text-decoration-color: #fff; }
.csb-ag-suivre a:focus-visible { outline-color: var(--ag-mil); }

/* --- Responsive --- */
@media (max-width: 1199px) {
	.csb-ag-suivre-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.csb-ag-suivre-actions { grid-column: 1 / -1; }
}
@media (max-width: 991px) {
	.csb-ag-tete-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
	.csb-ag-suivre-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.csb-ag-lien { transition: none; }
}

/* --- Hauteurs égales, sans blanc (12 nov. 2026) : 5 rangées partagées par les cartes d'une ligne (photo, métas, titre, fiche + texte, pied).
   Le texte est limité à 3 lignes : tous les textes ont la même hauteur, « Lire la suite » déplie la carte. --- */
.csb-ag-carte-texte > p:last-child { margin-bottom: 0; }
body.csb-ag-page .csb-ag-carte .csb-ag-rebours:not(#csb) { margin: 0 0 0 12px; padding-left: 12px; border-left: 1px solid var(--ag-trait); font-size: 13.5px; font-weight: 700; color: var(--ag-vegetal); }
/* Cartes à venir : un seul bouton (le premier lien), pour garder les pieds de cartes identiques */
.csb-ag-carte.is-avenir .csb-ag-lien { display: none; }
@supports (grid-template-rows: subgrid) {
	.csb-ag-grille { row-gap: 0; }
	.csb-ag-carte { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; margin-bottom: clamp(20px, 2.2vw, 32px); }
	.csb-ag-carte-corps { display: contents; }
	.csb-ag-carte-photo { grid-row: 1; }
	.csb-ag-carte .csb-ag-meta { grid-row: 2; padding: 38px clamp(18px, 1.6vw, 24px) 0; margin: 0; }
	.csb-ag-carte .csb-ag-titre { grid-row: 3; padding: 12px clamp(18px, 1.6vw, 24px) 0; margin: 0; }
	.csb-ag-carte-fiche { grid-row: 4; align-self: start; padding: 14px clamp(18px, 1.6vw, 24px) 0; }
	body.csb-ag-page .csb-ag-carte dl.csb-ag-infos:not(#csb) { margin: 0 0 12px; }
	.csb-ag-carte-pied { grid-row: 5; align-self: end; padding: 14px clamp(18px, 1.6vw, 24px) clamp(18px, 1.6vw, 24px); margin-top: 0; }
}

/* Information non communiquée : toutes les cartes affichent Date, Lieu et Programme (12 nov. 2026) */
.csb-ag-a-preciser { font-weight: 500; font-style: italic; color: var(--ag-doux); }

/* Description : même longueur partout, 3 lignes exactement (12 nov. 2026). Les textes plus longs sont coupés (« Lire la suite »), les plus courts gardent la place de 3 lignes. */
body.csb-ag-page .csb-ag-carte-texte > p:not(#csb) { line-height: 1.65; }
body.csb-ag-page .csb-ag-carte-texte > p:last-child:not(#csb) { margin-bottom: 0; }

/* « Lire la suite » retiré (12 nov. 2026) : le texte des cartes s'affiche en entier ; les cartes d'une même ligne gardent la même hauteur (subgrid), 3 lignes au minimum. */
.csb-ag-carte-texte { min-height: calc(3 * 1.65 * 16px); }