/* =========================================
   Syrpa Agenda — Liste publique d'événements
   Refonte moderne : hero, grille, badges SYRPA / Hors SYRPA
   ========================================= */

.syrpa-agenda {
	--syrpa-brand: #ff5534;
	--syrpa-brand-dark: #e23d1f;
	--syrpa-ink: #0f172a;
	--syrpa-ink-soft: #334155;
	--syrpa-muted: #64748b;
	--syrpa-line: #e7eaf0;
	--syrpa-bg-soft: #f6f7f9;
	--syrpa-info: #2563eb;
	--syrpa-radius: 20px;
	--syrpa-radius-sm: 12px;
	--syrpa-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
	--syrpa-shadow-hover: 0 12px 40px rgba(15, 23, 42, .14);

	color: var(--syrpa-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;

	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}
.syrpa-agenda *,
.syrpa-agenda *::before,
.syrpa-agenda *::after {
	box-sizing: border-box;
}

/* ---------- Barre d'outils ---------- */
.syrpa-agenda__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}
.syrpa-agenda__filters,
.syrpa-agenda__types {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}
.syrpa-agenda__filters {
	padding: .3rem;
	background: var(--syrpa-bg-soft);
	border-radius: 999px;
}
.syrpa-agenda__filter {
	padding: .5rem 1.15rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--syrpa-ink-soft);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.syrpa-agenda__filter:hover {
	color: var(--syrpa-ink);
}
.syrpa-agenda__filter.is-active {
	background: #fff;
	color: var(--syrpa-ink);
	box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

/* Filtres par sujet (pilules outline) */
.syrpa-agenda__types {
	gap: .5rem;
}
.syrpa-agenda__type {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .45rem 1rem;
	border: 1px solid var(--syrpa-line);
	border-radius: 999px;
	font-weight: 600;
	font-size: .85rem;
	color: var(--syrpa-ink-soft);
	text-decoration: none;
	background: #fff;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.syrpa-agenda__type::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--syrpa-muted);
}
.syrpa-agenda__type.is-syrpa::before { background: var(--syrpa-brand); }
.syrpa-agenda__type.is-info::before  { background: var(--syrpa-info); }
.syrpa-agenda__type:hover {
	border-color: var(--syrpa-ink-soft);
	color: var(--syrpa-ink);
}
.syrpa-agenda__type.is-active {
	background: var(--syrpa-ink);
	border-color: var(--syrpa-ink);
	color: #fff;
}

/* ---------- État vide ---------- */
.syrpa-agenda__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .85rem;
	padding: 4rem 1.5rem;
	text-align: center;
	color: var(--syrpa-muted);
	background: var(--syrpa-bg-soft);
	border-radius: var(--syrpa-radius);
}
.syrpa-agenda__empty svg { color: var(--syrpa-line); }
.syrpa-agenda__empty p { margin: 0; font-size: 1rem; }

/* ---------- Sections (vue à venir + passés) ---------- */
.syrpa-agenda__section + .syrpa-agenda__section { margin-top: 3.5rem; }
.syrpa-agenda__section-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.syrpa-agenda__section-title {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--syrpa-ink);
	white-space: nowrap;
}
.syrpa-agenda__section-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--syrpa-line);
}
.syrpa-agenda__section--past { scroll-margin-top: 1.5rem; }
.syrpa-agenda__section--past .syrpa-agenda__section-title { color: var(--syrpa-ink-soft); }
.syrpa-agenda__note {
	margin: 0;
	padding: 1.75rem;
	text-align: center;
	color: var(--syrpa-muted);
	background: var(--syrpa-bg-soft);
	border-radius: var(--syrpa-radius);
}

/* ---------- Carte (base) ---------- */
.syrpa-agenda__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--syrpa-line);
	border-radius: var(--syrpa-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--syrpa-shadow);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.syrpa-agenda__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--syrpa-shadow-hover);
	border-color: transparent;
}
.syrpa-agenda__card:focus-visible {
	outline: 3px solid var(--syrpa-brand);
	outline-offset: 2px;
}

/* Média + placeholder anti-image-cassée */
.syrpa-agenda__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: var(--syrpa-bg-soft);
	background-size: cover;
	background-position: center;
}
.syrpa-agenda__media.is-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #fff1ed 0%, #ffe2d9 100%);
}
.syrpa-agenda__card.is-info .syrpa-agenda__media.is-placeholder {
	background: linear-gradient(135deg, #eef3ff 0%, #dde7ff 100%);
}
.syrpa-agenda__placeholder-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	color: var(--syrpa-brand);
}
.syrpa-agenda__card.is-info .syrpa-agenda__placeholder-date { color: var(--syrpa-info); }
.syrpa-agenda__placeholder-day {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -.03em;
}
.syrpa-agenda__placeholder-month {
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-top: .25rem;
}

/* Badge type (haut gauche) */
.syrpa-agenda__badge {
	position: absolute;
	top: .85rem;
	left: .85rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: .3rem .7rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}
.syrpa-agenda__badge--syrpa {
	background: var(--syrpa-brand);
	color: #fff;
}
.syrpa-agenda__badge--info {
	background: rgba(255, 255, 255, .92);
	color: var(--syrpa-info);
	box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .25);
}

/* Pastille date (haut droite, sur image) */
.syrpa-agenda__datechip {
	position: absolute;
	top: .85rem;
	right: .85rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	padding: .4rem .35rem;
	background: rgba(255, 255, 255, .95);
	border-radius: var(--syrpa-radius-sm);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
	line-height: 1;
}
.syrpa-agenda__datechip-day {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--syrpa-ink);
	letter-spacing: -.02em;
}
.syrpa-agenda__datechip-month {
	margin-top: .1rem;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--syrpa-brand);
}
.syrpa-agenda__card.is-info .syrpa-agenda__datechip-month { color: var(--syrpa-info); }
.syrpa-agenda__datechip-year {
	margin-top: .05rem;
	font-size: .58rem;
	font-weight: 600;
	color: var(--syrpa-muted);
}

/* Corps */
.syrpa-agenda__body {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.2rem 1.3rem 1.35rem;
	flex: 1;
}
.syrpa-agenda__title {
	margin: 0;
	font-size: 1.18rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--syrpa-ink);
	letter-spacing: -.01em;
}
.syrpa-agenda__meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	font-size: .87rem;
	color: var(--syrpa-muted);
}
.syrpa-agenda__meta-item {
	display: inline-flex;
	align-items: flex-start;
	gap: .45rem;
}
.syrpa-agenda__meta-item svg {
	flex-shrink: 0;
	margin-top: .12rem;
	color: var(--syrpa-brand);
	opacity: .85;
}
.syrpa-agenda__card.is-info .syrpa-agenda__meta-item svg { color: var(--syrpa-info); }
.syrpa-agenda__excerpt {
	margin: 0;
	color: var(--syrpa-ink-soft);
	font-size: .92rem;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.syrpa-agenda__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding-top: .35rem;
	font-weight: 700;
	font-size: .92rem;
	color: var(--syrpa-brand);
}
.syrpa-agenda__cta svg { transition: transform .18s ease; }
.syrpa-agenda__card:hover .syrpa-agenda__cta svg { transform: translateX(4px); }
.syrpa-agenda__cta--info    { color: var(--syrpa-info); }
.syrpa-agenda__cta--past,
.syrpa-agenda__cta--default  { color: var(--syrpa-ink-soft); }
/* CTA inscription : bouton plein, plus engageant */
.syrpa-agenda__cta--register {
	align-self: flex-start;
	padding: .55rem 1.1rem;
	border-radius: 999px;
	background: var(--syrpa-brand);
	color: #fff;
	transition: background .15s ease;
}
.syrpa-agenda__card:hover .syrpa-agenda__cta--register { background: var(--syrpa-brand-dark); }

/* Carte passée : atténuée */
.syrpa-agenda__card.is-past { opacity: .82; }
.syrpa-agenda__card.is-past:hover { opacity: 1; }
.syrpa-agenda__card.is-past .syrpa-agenda__media { filter: grayscale(.35); }

/* ---------- Événement à la une ---------- */
.syrpa-agenda__featured {
	margin-bottom: 2.5rem;
}
.syrpa-agenda__featured-label {
	display: inline-block;
	margin-bottom: .75rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--syrpa-brand);
}
.syrpa-agenda__card.is-featured {
	flex-direction: row;
	align-items: stretch;
}
.syrpa-agenda__card.is-featured .syrpa-agenda__media {
	flex: 0 0 46%;
	aspect-ratio: auto;
	min-height: 320px;
}
.syrpa-agenda__card.is-featured .syrpa-agenda__body {
	justify-content: center;
	gap: 1rem;
	padding: 2rem 2.25rem;
}
.syrpa-agenda__card.is-featured .syrpa-agenda__title { font-size: 1.7rem; }
.syrpa-agenda__card.is-featured .syrpa-agenda__meta { font-size: .95rem; }
.syrpa-agenda__card.is-featured .syrpa-agenda__excerpt {
	-webkit-line-clamp: 3;
	font-size: 1rem;
}

/* ---------- Liste / grille ---------- */
.syrpa-agenda__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
}
.syrpa-agenda__item { display: flex; }

/* ---------- Pagination ---------- */
.syrpa-agenda__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: 2.75rem;
}
.syrpa-agenda__page a,
.syrpa-agenda__page span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 .9rem;
	background: #fff;
	border: 1px solid var(--syrpa-line);
	border-radius: var(--syrpa-radius-sm);
	font-weight: 600;
	font-size: .9rem;
	color: var(--syrpa-ink-soft);
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.syrpa-agenda__page a:hover {
	border-color: var(--syrpa-brand);
	color: var(--syrpa-brand);
}
.syrpa-agenda__page .current {
	background: var(--syrpa-ink);
	border-color: var(--syrpa-ink);
	color: #fff;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.syrpa-agenda__card.is-featured { flex-direction: column; }
	.syrpa-agenda__card.is-featured .syrpa-agenda__media {
		flex: none;
		aspect-ratio: 16 / 9;
		min-height: 0;
	}
	.syrpa-agenda__card.is-featured .syrpa-agenda__body { padding: 1.5rem 1.4rem; }
	.syrpa-agenda__card.is-featured .syrpa-agenda__title { font-size: 1.4rem; }
}
@media (max-width: 640px) {
	.syrpa-agenda__toolbar {
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
	}
	.syrpa-agenda__filters { justify-content: center; }
	.syrpa-agenda__types { justify-content: center; }
	.syrpa-agenda__list {
		grid-template-columns: 1fr;
		gap: 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.syrpa-agenda__card,
	.syrpa-agenda__cta svg { transition: none; }
	.syrpa-agenda__card:hover { transform: none; }
}

/* =========================================
   Page d'un événement (single syrpa_rdv)
   ========================================= */
.syrpa-event {
	--syrpa-brand: #ff5534;
	--syrpa-brand-dark: #e23d1f;
	--syrpa-ink: #0f172a;
	--syrpa-ink-soft: #334155;
	--syrpa-muted: #64748b;
	--syrpa-line: #e7eaf0;
	--syrpa-bg-soft: #f6f7f9;
	--syrpa-info: #2563eb;
	--syrpa-info-dark: #1d4ed8;
	--syrpa-radius: 20px;

	color: var(--syrpa-ink);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.syrpa-event *,
.syrpa-event *::before,
.syrpa-event *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */
.syrpa-event__hero {
	position: relative;
	background-color: var(--syrpa-bg-soft);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.syrpa-event__hero.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 23, 42, .25) 0%, rgba(15, 23, 42, .8) 100%);
}
.syrpa-event__hero.is-placeholder {
	background: linear-gradient(135deg, var(--syrpa-brand) 0%, var(--syrpa-brand-dark) 100%);
}
.syrpa-event.is-info .syrpa-event__hero.is-placeholder {
	background: linear-gradient(135deg, #3b82f6 0%, var(--syrpa-info-dark) 100%);
}
.syrpa-event__hero-inner {
	position: relative;
	z-index: 1;
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 4.5rem) 1.5rem clamp(2rem, 5vw, 3.5rem);
}
.syrpa-event__back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-bottom: 1.75rem;
	padding: .45rem .95rem .45rem .7rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .18);
	color: #fff;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	backdrop-filter: blur(4px);
	transition: background .15s ease;
}
.syrpa-event__back:hover { background: rgba(255, 255, 255, .3); color: #fff; }
.syrpa-event__badge {
	display: inline-flex;
	align-items: center;
	padding: .35rem .8rem;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: rgba(255, 255, 255, .92);
	color: var(--syrpa-brand);
}
.syrpa-event.is-info .syrpa-event__badge { color: var(--syrpa-info); }
.syrpa-event__title {
	margin: 1rem 0 1.25rem;
	font-size: clamp(1.9rem, 5vw, 3rem);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: -.02em;
	color: #fff;
}
.syrpa-event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.75rem;
	font-size: 1rem;
	font-weight: 500;
}
.syrpa-event__meta-item { display: inline-flex; align-items: center; gap: .5rem; }
.syrpa-event__meta-item svg { flex-shrink: 0; opacity: .9; }

/* ---------- Corps : contenu + récap ---------- */
.syrpa-event__body {
	max-width: 960px;
	margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) 1.5rem 4rem;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 2.5rem;
	align-items: start;
}
.syrpa-event__content { font-size: 1.05rem; color: var(--syrpa-ink-soft); }
.syrpa-event__content > :first-child { margin-top: 0; }
.syrpa-event__content a { color: var(--syrpa-brand); word-break: break-word; }
.syrpa-event.is-info .syrpa-event__content a { color: var(--syrpa-info); }

.syrpa-event__aside { position: sticky; top: 1.5rem; }
.syrpa-event__card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--syrpa-line);
	border-radius: var(--syrpa-radius);
	box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}
.syrpa-event__datebig { display: flex; flex-direction: column; line-height: 1; }
.syrpa-event__datebig-day {
	font-size: 2.6rem;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--syrpa-ink);
}
.syrpa-event__datebig-month {
	margin-top: .3rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--syrpa-brand);
}
.syrpa-event.is-info .syrpa-event__datebig-month { color: var(--syrpa-info); }
.syrpa-event__aside-lieu { margin: 0; color: var(--syrpa-muted); font-size: .92rem; }
.syrpa-event__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.2rem;
	border-radius: 999px;
	background: var(--syrpa-brand);
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.syrpa-event.is-info .syrpa-event__cta { background: var(--syrpa-info); }
.syrpa-event__cta:hover { background: var(--syrpa-brand-dark); color: #fff; }
.syrpa-event.is-info .syrpa-event__cta:hover { background: var(--syrpa-info-dark); }
.syrpa-event__cta--ghost {
	background: transparent;
	color: var(--syrpa-ink-soft);
	border: 1px solid var(--syrpa-line);
}
.syrpa-event__cta--ghost:hover {
	background: var(--syrpa-bg-soft);
	color: var(--syrpa-ink);
	border-color: var(--syrpa-ink-soft);
}

@media (max-width: 800px) {
	.syrpa-event__body { grid-template-columns: 1fr; gap: 2rem; }
	.syrpa-event__aside { position: static; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
	.syrpa-event__back,
	.syrpa-event__cta { transition: none; }
}