/* ========================================================================
 * Club Sport — Styles spécifiques aux pages CPT (club.css)
 *
 * Sections :
 *  1. Variables locales (font, couleurs)
 *  2. Surcharge des blocs Gutenberg du plugin
 *  3. Archive : disciplines, activités
 *  4. Single discipline : hero, contenu, section activités
 *  5. Single activité : layout 2 colonnes, hero, contenu, sidebar
 *  6. Cards (carte d'activité / discipline, fallback)
 *  7. Responsive
 * ======================================================================== */

/* ----------------------------------------------------------------------
 * 1. Variables locales
 *
 * Le plugin utilise ces noms ; on les remappe sur les tokens du thème pour
 * que les blocs s'adaptent au mode sombre automatiquement.
 * ---------------------------------------------------------------------- */

:root {
	--cspt-card-bg:           var(--cspt-bg-elevated);
	--cspt-card-shadow:       var(--cspt-shadow-sm);
	--cspt-card-shadow-hover: var(--cspt-shadow);
	--cspt-card-radius:       var(--cspt-radius-lg);
	--cspt-grid-gap:          var(--cspt-space-5);
}

/* ----------------------------------------------------------------------
 * 2. Surcharge des blocs Gutenberg du plugin
 * ---------------------------------------------------------------------- */

.cspt-disciplines-grid,
.cspt-activites-grid {
	display: grid;
	grid-template-columns: repeat(var(--cspt-grid-columns, 3), 1fr);
	gap: var(--cspt-grid-gap);
	margin: var(--cspt-space-5) 0;
}

.cspt-discipline-card,
.cspt-activite-card {
	background: var(--cspt-card-bg);
	border: 1px solid var(--cspt-border);
	border-radius: var(--cspt-card-radius);
	overflow: hidden;
	box-shadow: var(--cspt-card-shadow);
	transition: transform var(--cspt-trans), box-shadow var(--cspt-trans), border-color var(--cspt-trans);
}
.cspt-discipline-card:hover,
.cspt-activite-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--cspt-card-shadow-hover);
	border-color: var(--cspt-border-strong);
}

.cspt-discipline-card__link,
.cspt-activite-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cspt-discipline-card__media,
.cspt-activite-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--cspt-card-accent, var(--cspt-accent));
	overflow: hidden;
}

/* Toutes les grilles de disciplines : vignettes en quasi-portrait pour donner
   plus de présence à l'image (home en 5 colonnes, archive en 3 colonnes).
   Sélecteur à double classe pour passer devant la règle du plugin. */
.cspt-disciplines-grid .cspt-discipline-card__media {
	aspect-ratio: 9 / 10;
}

.cspt-discipline-card__media--placeholder,
.cspt-activite-card__media--placeholder {
	background-color: var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-discipline-card__image,
.cspt-activite-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Cadrage à gauche pour conserver les infos placées à gauche de l'image
	 * (sinon `object-fit: cover` recadre à partir du centre par défaut). */
	object-position: left center;
	display: block;
}

.cspt-discipline-card__body,
.cspt-activite-card__body {
	padding: var(--cspt-space-4);
	border-top: 4px solid var(--cspt-card-accent, var(--cspt-accent));
}

.cspt-discipline-card__title,
.cspt-activite-card__title {
	font-size: var(--cspt-text-lg);
	margin: 0 0 var(--cspt-space-2);
	line-height: 1.3;
	color: var(--cspt-text-primary);
}

.cspt-discipline-card__subtitle,
.cspt-activite-card__subtitle {
	margin: 0;
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-secondary);
	line-height: var(--cspt-line-normal);
}

.cspt-discipline-card__count {
	margin: var(--cspt-space-2) 0 0;
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	font-weight: 500;
}

.cspt-disciplines-grid--empty,
.cspt-activites-grid--empty {
	text-align: center;
	padding: var(--cspt-space-6);
	color: var(--cspt-text-tertiary);
}

/* ----------------------------------------------------------------------
 * 3. Archive : disciplines & activités
 * ---------------------------------------------------------------------- */

.cspt-archive__header {
	margin-bottom: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 1px solid var(--cspt-border);
}

.cspt-archive__title {
	margin-bottom: var(--cspt-space-3);
}

.cspt-archive__intro {
	max-width: 720px;
	font-size: var(--cspt-text-lg);
	color: var(--cspt-text-secondary);
	line-height: var(--cspt-line-relaxed);
}

/* Groupes (discipline → ses activités, sur archive-cspt_activite) */
.cspt-activites-group {
	margin-bottom: var(--cspt-space-7);
}

.cspt-activites-group__title {
	font-size: var(--cspt-text-2xl);
	margin-bottom: var(--cspt-space-4);
	padding-bottom: var(--cspt-space-2);
	border-bottom: 2px solid var(--cspt-section-accent, var(--cspt-accent));
}
.cspt-activites-group__title a {
	color: var(--cspt-text-primary);
	text-decoration: none;
}
.cspt-activites-group__title a:hover,
.cspt-activites-group__title a:focus {
	color: var(--cspt-section-accent, var(--cspt-accent));
}

/* ----------------------------------------------------------------------
 * 4. Single discipline
 * ---------------------------------------------------------------------- */

/* Bandeau de couleur en haut de la page d'une discipline.
 * Contient le titre + sous-titre. La couleur est injectée via
 * --cspt-page-accent par cspt_theme_inline_accent_style() (cf. inc/template-helpers.php).
 * Hauteur minimale 75px, peut s'agrandir selon la longueur du texte. */
.cspt-discipline__color-bar {
	width: 100%;
	min-height: 75px;
	background-color: var(--cspt-page-accent, var(--cspt-accent));
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: var(--cspt-space-4) 0;
	margin-bottom: var(--cspt-space-5);
}

/* Header de discipline désormais à l'intérieur du bandeau coloré :
 * pas de bordure inférieure, et texte blanc pour le contraste. */
.cspt-discipline__color-bar .cspt-discipline__header {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
	color: inherit;
}
.cspt-discipline__color-bar .cspt-discipline__title {
	color: inherit;
	margin-bottom: var(--cspt-space-2);
}
.cspt-discipline__color-bar .cspt-discipline__subtitle {
	color: inherit;
	opacity: 0.9;
	margin: 0;
}

.cspt-discipline__header {
	margin-bottom: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 4px solid var(--cspt-page-accent, var(--cspt-accent));
}

.cspt-discipline__title {
	margin-bottom: var(--cspt-space-3);
}

.cspt-discipline__subtitle {
	margin: 0;
	font-size: var(--cspt-text-xl);
	color: var(--cspt-text-secondary);
	font-weight: 400;
	line-height: var(--cspt-line-normal);
}

.cspt-discipline__content {
	max-width: 800px;
	font-size: var(--cspt-text-lg);
	line-height: var(--cspt-line-relaxed);
	margin-bottom: var(--cspt-space-7);
}

/* Layout 2 colonnes pour la zone description : texte à gauche, sidebar à droite.
 * Même proportions que la page activité. */
.cspt-discipline__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: var(--cspt-space-6);
	align-items: start;
	margin-bottom: var(--cspt-space-6);
}

.cspt-discipline__main {
	min-width: 0;
}

.cspt-discipline__sidebar {
	position: sticky;
	top: calc(var(--cspt-header-height) + var(--cspt-space-4));
	align-self: start;
}

.cspt-discipline__activites {
	margin-top: var(--cspt-space-7);
	padding-top: var(--cspt-space-6);
	border-top: 1px solid var(--cspt-border);
}

.cspt-discipline__activites-title {
	margin-bottom: var(--cspt-space-5);
}

/* Activités embarquées dans une page discipline : rendues sous forme
 * d'onglets (cf. .cspt-tabs ci-dessous). Le header d'une activité embarquée
 * se distingue de celui d'une page activité : pas de gros liseré d'accent
 * sous le titre. */
.cspt-activite--embedded .cspt-activite__header {
	margin-bottom: var(--cspt-space-4);
	padding-bottom: 0;
	border-bottom: 0;
}

.cspt-activite--embedded .cspt-activite__title {
	font-size: var(--cspt-text-2xl);
}
.cspt-activite--embedded .cspt-activite__title a {
	color: inherit;
	text-decoration: none;
}
.cspt-activite--embedded .cspt-activite__title a:hover,
.cspt-activite--embedded .cspt-activite__title a:focus {
	color: var(--cspt-page-accent, var(--cspt-accent));
	text-decoration: underline;
}

/* Sticky désactivé quand l'activité est dans un onglet (sinon la sidebar
 * pourrait dépasser du panel en scrollant). */
.cspt-activite--embedded .cspt-activite__sidebar {
	position: static;
}

/* ---------- Onglets génériques (data-cspt-tabs) ---------- */

.cspt-tabs {
	margin-top: var(--cspt-space-4);
}

.cspt-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cspt-space-1, 4px);
	border-bottom: 2px solid var(--cspt-border);
	margin-bottom: var(--cspt-space-5);
	padding: 0;
}

.cspt-tabs__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px; /* chevauche le border-bottom de la liste */
	padding: var(--cspt-space-3) var(--cspt-space-4);
	font: inherit;
	font-weight: 500;
	font-size: var(--cspt-text-base);
	color: var(--cspt-text-secondary);
	cursor: pointer;
	transition: color var(--cspt-trans), border-color var(--cspt-trans), background-color var(--cspt-trans);
	border-top-left-radius: var(--cspt-radius);
	border-top-right-radius: var(--cspt-radius);
}

.cspt-tabs__tab:hover,
.cspt-tabs__tab:focus-visible {
	color: var(--cspt-text-primary);
	background-color: var(--cspt-bg-secondary);
	outline: none;
}

.cspt-tabs__tab[aria-selected="true"],
.cspt-tabs__tab.is-active {
	color: var(--cspt-page-accent, var(--cspt-accent));
	border-bottom-color: var(--cspt-page-accent, var(--cspt-accent));
	background-color: transparent;
}

.cspt-tabs__panel {
	/* Le `hidden` natif gère la visibilité. On ajoute une animation discrète
	 * à l'apparition pour adoucir le changement. */
	animation: cspt-tabs-fade-in 180ms ease-out;
}

@keyframes cspt-tabs-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.cspt-tabs__panel { animation: none; }
}

/* ----------------------------------------------------------------------
 * 5. Single activité : layout 2 colonnes
 * ---------------------------------------------------------------------- */

.cspt-activite__hero {
	position: relative;
	width: 100%;
	max-height: 320px;
	overflow: hidden;
	margin-bottom: var(--cspt-space-5);
}

.cspt-activite__hero-image {
	width: 100%;
	height: 100%;
	max-height: 320px;
	object-fit: cover;
	display: block;
}

.cspt-activite__hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 50%,
		rgba(0, 0, 0, 0.25) 100%
	);
	pointer-events: none;
}

.cspt-activite__header {
	margin-bottom: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 4px solid var(--cspt-page-accent, var(--cspt-accent));
}

.cspt-activite__title {
	margin-bottom: var(--cspt-space-3);
}

.cspt-activite__subtitle {
	margin: 0 0 var(--cspt-space-3);
	font-size: var(--cspt-text-xl);
	color: var(--cspt-text-secondary);
	font-weight: 400;
	line-height: var(--cspt-line-normal);
}

.cspt-activite__discipline {
	margin: 0;
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-tertiary);
}
.cspt-activite__discipline a {
	color: var(--cspt-page-accent, var(--cspt-accent));
	text-decoration: none;
	font-weight: 500;
}
.cspt-activite__discipline a:hover,
.cspt-activite__discipline a:focus {
	text-decoration: underline;
}

/* Layout principal : grid 2 colonnes en desktop, sidebar à GAUCHE.
 * L'ordre source reste main → sidebar (accessibilité : main lu en premier),
 * le placement explicite gère la position visuelle. */
.cspt-activite__layout {
	display: grid;
	grid-template-columns: 380px minmax(0, 1fr);
	gap: var(--cspt-space-6);
	align-items: start;
}

.cspt-activite__main {
	min-width: 0; /* permet aux enfants de wrap */
	grid-column: 2;
	grid-row: 1;
}

.cspt-activite__sidebar {
	grid-column: 1;
	grid-row: 1;
}

/* Cas "discipline sans activités" : pas de grille interne (la sidebar
 * événements reste à droite). Le média respecte la taille choisie et
 * flotte à gauche pour que le texte enrobe l'image plutôt que de s'empiler
 * dessous → impression de pleine largeur pour le texte. */
.cspt-discipline__media--solo {
	margin: 0 var(--cspt-space-5) var(--cspt-space-4) 0;
}
.cspt-discipline__media--solo-s    { float: left; width: 40%; }
.cspt-discipline__media--solo-m    { float: left; width: 60%; }
.cspt-discipline__media--solo-l    { float: left; width: 75%; }
.cspt-discipline__media--solo-full {
	float: none;
	width: 100%;
	margin-right: 0;
}

/* Le contenu doit clear après le bloc media (sinon les éléments suivants
 * — la sidebar — pourraient se positionner à côté du float). */
.cspt-discipline__content--solo::after {
	content: "";
	display: block;
	clear: both;
}

/* Mobile : on désactive le float pour empiler proprement. */
@media (max-width: 768px) {
	.cspt-discipline__media--solo-s,
	.cspt-discipline__media--solo-m,
	.cspt-discipline__media--solo-l {
		float: none;
		width: 100%;
		margin: 0 0 var(--cspt-space-4);
	}
}

/* Ligne liste des activités + colonne média/contenu (en haut de la page
 * discipline). La liste est à GAUCHE, la vidéo/image + le contenu texte
 * de la discipline occupent la colonne de DROITE. La taille choisie dans
 * la metabox détermine la largeur de la colonne média : plus la vidéo est
 * grande, plus la liste à gauche est étroite. En "full", la liste passe
 * au-dessus (pleine largeur) puis la colonne média en-dessous. */
.cspt-discipline__media-row {
	display: grid;
	gap: var(--cspt-space-5);
	margin-bottom: var(--cspt-space-5);
	align-items: start;
}
.cspt-discipline__media-row--s    { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
.cspt-discipline__media-row--m    { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); }
.cspt-discipline__media-row--l    { grid-template-columns: minmax(0, 25fr) minmax(0, 75fr); }
.cspt-discipline__media-row--full { grid-template-columns: 1fr; }

.cspt-discipline__media-col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-4);
}

.cspt-discipline__media {
	min-width: 0;
}

/* Quand le contenu texte est dans la colonne média, on supprime sa marge
 * top (le flex gap gère l'espacement). */
.cspt-discipline__media-col .cspt-discipline__content {
	margin-top: 0;
}

.cspt-discipline__video {
	aspect-ratio: 16 / 9;
	background-color: var(--cspt-bg-secondary);
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
}
.cspt-discipline__video iframe,
.cspt-discipline__video video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.cspt-discipline__presentation-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
	background-color: var(--cspt-bg-secondary);
}
.cspt-discipline__presentation-image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Liste latérale des activités (à droite du média ou sous lui en "full"). */
.cspt-discipline__activites-list {
	min-width: 0;
}
.cspt-discipline__activites-list-title {
	margin: 0 0 var(--cspt-space-3);
	font-size: var(--cspt-text-lg);
	font-weight: 600;
	color: var(--cspt-text-primary);
	padding-left: var(--cspt-space-3);
	border-left: 3px solid var(--cspt-page-accent, var(--cspt-accent));
	line-height: 1.2;
}
.cspt-discipline__activites-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
/* Carte d'une activité : le <li> porte le visuel global (bordure, fond) ;
 * le <a> principal (nom + flèche) et la liste des villes sont des éléments
 * séparés cliquables individuellement à l'intérieur. */
.cspt-discipline__activites-list-item {
	background-color: var(--cspt-bg-secondary);
	border: 1px solid var(--cspt-border);
	border-left: 4px solid var(--cspt-page-accent, var(--cspt-accent));
	border-radius: var(--cspt-radius);
	padding: var(--cspt-space-2) var(--cspt-space-3);
	transition: background-color var(--cspt-trans), border-color var(--cspt-trans);
}
.cspt-discipline__activites-list-item:hover {
	background-color: var(--cspt-bg-elevated);
	border-color: var(--cspt-page-accent, var(--cspt-accent));
}
.cspt-discipline__activites-list-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cspt-space-2);
	color: var(--cspt-text-primary);
	text-decoration: none;
	font-weight: 500;
	font-size: var(--cspt-text-sm);
	line-height: 1.3;
}
.cspt-discipline__activites-list-name {
	font-weight: 500;
}
.cspt-discipline__activites-list-arrow {
	color: var(--cspt-page-accent, var(--cspt-accent));
	font-size: 1.4em;
	line-height: 1;
	flex-shrink: 0;
}

/* Liste des villes cliquables sous le nom de l'activité.
 * On force flex-direction:row pour ne pas hériter du `column` de la règle
 * plus générale `.cspt-discipline__activites-list ul`. */
.cspt-discipline__activites-list .cspt-discipline__activites-list-villes {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px;
}
.cspt-discipline__activites-list-villes li {
	margin: 0;
}
.cspt-discipline__activites-list-ville-link {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: var(--cspt-bg-elevated);
	color: var(--cspt-text-secondary);
	font-size: var(--cspt-text-xs);
	text-decoration: none;
	border: 1px solid var(--cspt-border);
	transition: background-color var(--cspt-trans), color var(--cspt-trans), border-color var(--cspt-trans);
}
.cspt-discipline__activites-list-ville-link:hover,
.cspt-discipline__activites-list-ville-link:focus-visible {
	background-color: var(--cspt-page-accent, var(--cspt-accent));
	color: #fff;
	border-color: var(--cspt-page-accent, var(--cspt-accent));
}

/* En "full" ou en liste seule, on garde une largeur raisonnable. */
.cspt-discipline__media-row--full .cspt-discipline__activites-list ul,
.cspt-discipline__activites-list--standalone ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--cspt-space-2);
}

.cspt-discipline__activites-list--standalone {
	margin-bottom: var(--cspt-space-5);
}

/* Mobile : on stacke média + liste. */
@media (max-width: 768px) {
	.cspt-discipline__media-row--s,
	.cspt-discipline__media-row--m,
	.cspt-discipline__media-row--l {
		grid-template-columns: 1fr;
	}
	.cspt-discipline__media-row .cspt-discipline__activites-list ul {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	}
}

.cspt-activite__content {
	font-size: var(--cspt-text-lg);
	line-height: var(--cspt-line-relaxed);
}

/* ----------------------------------------------------------------------
 * 5 bis. Sidebar
 * ---------------------------------------------------------------------- */

.cspt-activite__sidebar {
	position: sticky;
	top: calc(var(--cspt-header-height) + var(--cspt-space-4));
	align-self: start;
}

.cspt-sidebar {
	background-color: var(--cspt-bg-elevated);
	border: 1px solid var(--cspt-border);
	border-radius: var(--cspt-radius-lg);
	padding: var(--cspt-space-4);
}

.cspt-sidebar-section {
	margin-bottom: var(--cspt-space-5);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 1px solid var(--cspt-border);
}
.cspt-sidebar-section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.cspt-sidebar-section__title {
	font-size: var(--cspt-text-base);
	font-weight: 600;
	margin-bottom: var(--cspt-space-3);
	color: var(--cspt-text-primary);
	padding-left: var(--cspt-space-3);
	border-left: 3px solid var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	line-height: 1.3;
}

/* Titres « Tarifs » et « Horaires » dans la sidebar activité : encadrés
 * avec la couleur d'accent (similaire à l'encart d'alerte), pour les
 * mettre visuellement en avant. */
.cspt-sidebar-section--tarifs .cspt-sidebar-section__title,
.cspt-sidebar-section--horaires .cspt-sidebar-section__title {
	display: block;
	padding: var(--cspt-space-2) var(--cspt-space-4);
	border: 2px solid var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	border-left-width: 2px;
	border-radius: var(--cspt-radius);
	background-color: color-mix( in srgb, var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent))) 10%, transparent );
	color: var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
}

/* Horaires : un cadre par VILLE (trait fin couleur d'accent), contenant
 * une ou plusieurs sous-sections de lieux, chacune avec son nom et ses
 * créneaux. */
.cspt-horaires-groupe {
	margin-bottom: var(--cspt-space-3);
	padding: var(--cspt-space-3) var(--cspt-space-4);
	border: 1px solid var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	border-radius: var(--cspt-radius);
}
.cspt-horaires-groupe:last-child {
	margin-bottom: 0;
}
.cspt-horaires-groupe__ville-header {
	margin-bottom: var(--cspt-space-3);
	padding-bottom: var(--cspt-space-2);
	border-bottom: 1px solid var(--cspt-border);
	/* Compensation du header sticky pour qu'un scrollIntoView() depuis la liste
	 * activités atterrisse bien sur le titre, pas dessous. */
	scroll-margin-top: calc(var(--cspt-header-height) + var(--cspt-space-4));
}
.cspt-horaires-groupe__ville {
	color: var(--cspt-text-primary);
	font-weight: 700;
	font-size: 1.15em;
}

/* Sous-section : un lieu à l'intérieur d'un cadre ville. */
.cspt-horaires-lieu {
	margin-top: var(--cspt-space-3);
}
.cspt-horaires-lieu:first-child {
	margin-top: 0;
}
.cspt-horaires-lieu__nom {
	font-size: var(--cspt-text-sm);
	font-weight: 600;
	margin-bottom: var(--cspt-space-2);
}
.cspt-horaires-lieu__nom a {
	color: var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	text-decoration: none;
}
.cspt-horaires-lieu__nom a:hover,
.cspt-horaires-lieu__nom a:focus {
	text-decoration: underline;
}

.cspt-horaires-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
.cspt-horaires-list__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--cspt-space-2);
	align-items: baseline;
	font-size: var(--cspt-text-sm);
	padding: var(--cspt-space-2) 0;
	border-bottom: 1px dashed var(--cspt-border);
}
.cspt-horaires-list__item:last-child {
	border-bottom: 0;
}
.cspt-horaires-list__jour {
	font-weight: 500;
	color: var(--cspt-text-primary);
}
.cspt-horaires-list__heures {
	color: var(--cspt-text-secondary);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cspt-horaires-list__public {
	grid-column: 1 / -1;
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	margin-top: 2px;
}

/* Tarifs */
.cspt-tarifs-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
.cspt-tarifs-list__item {
	padding: var(--cspt-space-2) 0;
	border-bottom: 1px dashed var(--cspt-border);
}
.cspt-tarifs-list__item:last-child {
	border-bottom: 0;
}
.cspt-tarifs-list__row {
	display: flex;
	justify-content: space-between;
	gap: var(--cspt-space-2);
	font-size: var(--cspt-text-sm);
	align-items: baseline;
}
.cspt-tarifs-list__label {
	color: var(--cspt-text-primary);
	font-weight: 500;
}
.cspt-tarifs-list__prix {
	color: var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.cspt-tarifs-list__desc {
	margin: var(--cspt-space-1) 0 0;
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	line-height: 1.4;
}

/* Événements avec miniature (sidebar discipline) */
.cspt-evenements-thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-3);
}
.cspt-evenement-thumb {
	display: flex;
	align-items: stretch;
	border-radius: var(--cspt-radius);
}
.cspt-evenement-thumb__link {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--cspt-space-3);
	align-items: start;
	padding: var(--cspt-space-2);
	border-radius: var(--cspt-radius);
	text-decoration: none;
	color: inherit;
	transition: background-color var(--cspt-trans);
	flex: 1;
	min-width: 0;
}
.cspt-evenement-thumb__link:hover,
.cspt-evenement-thumb__link:focus {
	background-color: var(--cspt-bg-secondary);
}
.cspt-evenement-thumb__media {
	width: 64px;
	height: 64px;
	border-radius: var(--cspt-radius);
	overflow: hidden;
	background-color: var(--cspt-bg-secondary);
	flex-shrink: 0;
}
.cspt-evenement-thumb__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cspt-evenement-thumb__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg,
			var(--cspt-bg-secondary) 0%,
			var(--cspt-bg-elevated) 100%);
}
.cspt-evenement-thumb__title {
	font-size: var(--cspt-text-sm);
	font-weight: 600;
	color: var(--cspt-text-primary);
	line-height: 1.3;
	margin-bottom: 2px;
}
.cspt-evenement-thumb__date {
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-secondary);
	font-variant-numeric: tabular-nums;
}
.cspt-evenement-thumb__lieu {
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	margin-top: 2px;
}

/* Icône de téléchargement du formulaire d'inscription, à droite du contenu. */
.cspt-evenement-thumb__formulaire {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 0 var(--cspt-space-3);
	color: var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	text-decoration: none;
	border-radius: var(--cspt-radius);
	transition: background-color var(--cspt-trans);
}
.cspt-evenement-thumb__formulaire:hover,
.cspt-evenement-thumb__formulaire:focus {
	background-color: var(--cspt-bg-secondary);
}
.cspt-evenement-thumb__formulaire svg {
	width: 20px;
	height: 20px;
	display: block;
}


/* Widgets (zone WordPress) */
.cspt-widget {
	font-size: var(--cspt-text-sm);
}
.cspt-widget__title {
	font-size: var(--cspt-text-base);
	font-weight: 600;
	margin-bottom: var(--cspt-space-3);
	color: var(--cspt-text-primary);
	padding-left: var(--cspt-space-3);
	border-left: 3px solid var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
}

/* ----------------------------------------------------------------------
 * 6. Bloc 'horaires-activite' du plugin : aligne le style sidebar avec le rendu sur la page
 * ---------------------------------------------------------------------- */

/* Le bloc horaires-activite du plugin a son propre rendu ; les variables
 * --cspt-* du thème lui suffisent. Rien à surcharger en plus pour le moment. */

/* ----------------------------------------------------------------------
 * 7. Responsive
 * ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cspt-activite__layout,
	.cspt-discipline__layout {
		grid-template-columns: 1fr;
		gap: var(--cspt-space-5);
	}
	.cspt-activite__sidebar,
	.cspt-discipline__sidebar {
		position: static; /* annule sticky sur mobile */
	}
	/* En mobile, on rétablit l'ordre source (main d'abord, sidebar dessous). */
	.cspt-activite__main,
	.cspt-activite__sidebar {
		grid-column: auto;
		grid-row: auto;
	}
	/* La règle responsive pour .cspt-front-page__sidebar est définie
	 * près de son layout flex (plus haut dans le fichier). */

	.cspt-disciplines-grid,
	.cspt-activites-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.cspt-disciplines-grid,
	.cspt-activites-grid {
		grid-template-columns: 1fr;
	}

	.cspt-activite__hero {
		max-height: 200px;
	}

	.cspt-discipline__color-bar {
		min-height: 50px; /* bandeau plus discret sur petits écrans */
		padding: var(--cspt-space-3) 0;
	}

	.cspt-discipline__title,
	.cspt-activite__title {
		font-size: var(--cspt-text-3xl);
	}

	.cspt-discipline__subtitle,
	.cspt-activite__subtitle {
		font-size: var(--cspt-text-lg);
	}

	.cspt-sidebar {
		padding: var(--cspt-space-3);
	}
}

/* ========================================================================
 * 8. Événements
 * ======================================================================== */

/* Badges */
.cspt-badge {
	display: inline-block;
	padding: 2px var(--cspt-space-2);
	font-size: var(--cspt-text-xs);
	font-weight: 500;
	border-radius: var(--cspt-radius-full);
	vertical-align: middle;
	margin-left: var(--cspt-space-2);
	line-height: 1.5;
}
.cspt-badge--recurring {
	background-color: var(--cspt-bg-tertiary);
	color: var(--cspt-text-secondary);
}

/* Pills d'activité (couleur d'accent par activité) */
.cspt-pill {
	display: inline-block;
	padding: 2px var(--cspt-space-3);
	font-size: var(--cspt-text-xs);
	font-weight: 500;
	border-radius: var(--cspt-radius-full);
	background-color: color-mix(in srgb, var(--cspt-pill-color, var(--cspt-accent)) 12%, transparent);
	color: var(--cspt-pill-color, var(--cspt-accent));
	border: 1px solid color-mix(in srgb, var(--cspt-pill-color, var(--cspt-accent)) 30%, transparent);
	text-decoration: none;
	line-height: 1.6;
}
a.cspt-pill:hover,
a.cspt-pill:focus {
	background-color: color-mix(in srgb, var(--cspt-pill-color, var(--cspt-accent)) 22%, transparent);
	color: var(--cspt-pill-color, var(--cspt-accent));
}

/* Mode sombre : on inverse pour garder la lisibilité */
[data-theme="dark"] .cspt-pill {
	background-color: color-mix(in srgb, var(--cspt-pill-color, var(--cspt-accent)) 25%, transparent);
	color: var(--cspt-text-primary);
	border-color: color-mix(in srgb, var(--cspt-pill-color, var(--cspt-accent)) 50%, transparent);
}

/* ----- Archive événements : agenda chronologique ----- */

.cspt-agenda {
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-6);
}

.cspt-agenda-month {
	border-top: 1px solid var(--cspt-border);
	padding-top: var(--cspt-space-4);
}

.cspt-agenda-month__title {
	font-size: var(--cspt-text-xl);
	font-weight: 500;
	color: var(--cspt-text-tertiary);
	margin-bottom: var(--cspt-space-4);
	letter-spacing: 0.5px;
}

.cspt-agenda-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}

.cspt-agenda-item__link {
	display: grid;
	grid-template-columns: 72px 1fr;
	gap: var(--cspt-space-4);
	padding: var(--cspt-space-3);
	border-radius: var(--cspt-radius);
	background-color: var(--cspt-bg-elevated);
	border: 1px solid var(--cspt-border);
	text-decoration: none;
	color: inherit;
	transition: transform var(--cspt-trans), border-color var(--cspt-trans), box-shadow var(--cspt-trans);
}
.cspt-agenda-item__link:hover,
.cspt-agenda-item__link:focus {
	transform: translateX(2px);
	border-color: var(--cspt-border-strong);
	box-shadow: var(--cspt-shadow-sm);
}

.cspt-agenda-item__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--cspt-bg-secondary);
	border-radius: var(--cspt-radius);
	padding: var(--cspt-space-2);
	min-height: 64px;
}
.cspt-agenda-item__day {
	font-size: var(--cspt-text-2xl);
	font-weight: 700;
	color: var(--cspt-text-primary);
	line-height: 1;
}
.cspt-agenda-item__weekday {
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	text-transform: uppercase;
	margin-top: var(--cspt-space-1);
}

.cspt-agenda-item__body {
	min-width: 0;
}
.cspt-agenda-item__title {
	font-size: var(--cspt-text-lg);
	margin: 0 0 var(--cspt-space-2);
	color: var(--cspt-text-primary);
	font-weight: 600;
	line-height: 1.3;
}
.cspt-agenda-item__meta {
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-secondary);
	margin-bottom: var(--cspt-space-2);
}
.cspt-agenda-item__lieu {
	color: var(--cspt-text-tertiary);
}
.cspt-agenda-item__activites {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cspt-space-1);
}

/* ----- Single événement ----- */

.cspt-evenement__header {
	display: flex;
	gap: var(--cspt-space-5);
	align-items: flex-start;
	margin-bottom: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 4px solid var(--cspt-page-accent, var(--cspt-accent));
}

.cspt-evenement__date-block {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: var(--cspt-page-accent, var(--cspt-accent));
	color: var(--cspt-accent-fg);
	border-radius: var(--cspt-radius-lg);
	padding: var(--cspt-space-3) var(--cspt-space-4);
	min-width: 80px;
	line-height: 1.1;
}
.cspt-evenement__date-day {
	font-size: var(--cspt-text-4xl);
	font-weight: 700;
}
.cspt-evenement__date-month {
	font-size: var(--cspt-text-sm);
	text-transform: uppercase;
	font-weight: 500;
	margin-top: 2px;
}
.cspt-evenement__date-year {
	font-size: var(--cspt-text-xs);
	opacity: 0.9;
	margin-top: 2px;
}

.cspt-evenement__header-text {
	flex: 1;
	min-width: 0;
}

.cspt-evenement__title {
	margin-bottom: var(--cspt-space-2);
}

.cspt-evenement__when {
	font-size: var(--cspt-text-base);
	color: var(--cspt-text-secondary);
	margin: 0;
}
.cspt-evenement__when-sep {
	margin: 0 var(--cspt-space-2);
	color: var(--cspt-text-tertiary);
}

.cspt-evenement__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--cspt-space-6);
	align-items: start;
}

.cspt-evenement__main {
	min-width: 0;
}

.cspt-evenement__hero {
	margin-bottom: var(--cspt-space-5);
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
}
.cspt-evenement__hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.cspt-evenement__content {
	font-size: var(--cspt-text-lg);
	line-height: var(--cspt-line-relaxed);
	margin-bottom: var(--cspt-space-5);
}

.cspt-evenement__external {
	margin: var(--cspt-space-5) 0;
}

.cspt-evenement__occurrences {
	margin-top: var(--cspt-space-6);
	padding-top: var(--cspt-space-5);
	border-top: 1px solid var(--cspt-border);
}
.cspt-evenement__occurrences h2 {
	font-size: var(--cspt-text-xl);
	margin-bottom: var(--cspt-space-3);
}

.cspt-evenement-occurrences-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
.cspt-evenement-occurrences-list li {
	padding: var(--cspt-space-2) var(--cspt-space-3);
	background-color: var(--cspt-bg-secondary);
	border-radius: var(--cspt-radius);
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-secondary);
}

.cspt-evenement__sidebar {
	position: sticky;
	top: calc(var(--cspt-header-height) + var(--cspt-space-4));
	align-self: start;
}

.cspt-evenement-lieu {
	margin: 0;
	font-size: var(--cspt-text-sm);
	line-height: var(--cspt-line-normal);
}
.cspt-evenement-lieu a {
	text-decoration: none;
	color: var(--cspt-text-primary);
}
.cspt-evenement-lieu a:hover,
.cspt-evenement-lieu a:focus {
	color: var(--cspt-accent);
}
.cspt-evenement-lieu__address {
	color: var(--cspt-text-tertiary);
	font-size: var(--cspt-text-xs);
}

.cspt-evenement-activites {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cspt-space-2);
}

/* ========================================================================
 * 9. Lieux
 * ======================================================================== */

/* Carte (commune single + mini-map) */
.cspt-lieu__map,
.cspt-mini-map,
.cspt-lieux-map {
	width: 100%;
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
	background-color: var(--cspt-bg-secondary);
	border: 1px solid var(--cspt-border);
	margin-bottom: var(--cspt-space-4);
}

.cspt-lieu__map {
	height: 400px;
}
.cspt-lieux-map {
	height: 480px;
	margin-bottom: var(--cspt-space-6);
}
.cspt-mini-map {
	height: 180px;
	margin-top: var(--cspt-space-3);
	margin-bottom: 0;
}

/* Forcer la lisibilité des contrôles Leaflet en mode sombre */
[data-theme="dark"] .leaflet-control-container .leaflet-control {
	filter: invert(0.85) hue-rotate(180deg);
}
[data-theme="dark"] .leaflet-tile-pane {
	/* On laisse les tuiles colorées d'origine ; un filter invert ici donne un rendu illisible */
}
[data-theme="dark"] .leaflet-popup-content-wrapper,
[data-theme="dark"] .leaflet-popup-tip {
	background: var(--cspt-bg-elevated);
	color: var(--cspt-text-primary);
}
[data-theme="dark"] .leaflet-popup-content-wrapper a {
	color: var(--cspt-accent);
}

/* ----- Archive lieux : grille de cartes ----- */

.cspt-lieux-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--cspt-space-4);
}

/* Grille regroupée par ville : format compact, une ligne par ville.
 * - La ville prend une zone fixe à gauche, mise en avant.
 * - Les lieux sont des pastilles cliquables qui s'enroulent à droite.
 * - L'adresse n'est pas affichée (gain de place) mais reste dispo en tooltip. */
.cspt-villes-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
.cspt-ville-card {
	display: grid;
	grid-template-columns: 160px 1fr;
	align-items: center;
	gap: var(--cspt-space-3);
	padding: var(--cspt-space-2) var(--cspt-space-3);
	background-color: var(--cspt-bg-elevated);
	border: 1px solid var(--cspt-border);
	border-radius: var(--cspt-radius);
	border-left: 4px solid var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
}
.cspt-ville-card__title {
	margin: 0;
	font-size: var(--cspt-text-base);
	font-weight: 700;
	color: var(--cspt-text-primary);
	line-height: 1.2;
	padding: 0;
	border: 0;
}
.cspt-ville-card__lieux {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--cspt-space-2);
}
.cspt-ville-card__lieu {
	margin: 0;
}
.cspt-ville-card__lieu-link {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background-color: var(--cspt-bg-secondary);
	color: var(--cspt-text-primary);
	font-size: var(--cspt-text-sm);
	text-decoration: none;
	transition: background-color var(--cspt-trans), color var(--cspt-trans);
}
.cspt-ville-card__lieu-link:hover,
.cspt-ville-card__lieu-link:focus-visible {
	background-color: var(--cspt-sidebar-accent, var(--cspt-page-accent, var(--cspt-accent)));
	color: #fff;
}
.cspt-ville-card__lieu-name {
	font-weight: 500;
}
/* L'adresse n'est plus visible mais on garde le markup au cas où on veuille
 * la ré-afficher plus tard. */
.cspt-ville-card__lieu-address {
	display: none;
}

/* Responsive : empile ville / liste sur les petits écrans. */
@media (max-width: 540px) {
	.cspt-ville-card {
		grid-template-columns: 1fr;
		gap: var(--cspt-space-2);
	}
}

.cspt-lieu-card {
	background-color: var(--cspt-bg-elevated);
	border: 1px solid var(--cspt-border);
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
	transition: transform var(--cspt-trans), border-color var(--cspt-trans), box-shadow var(--cspt-trans);
}
.cspt-lieu-card:hover,
.cspt-lieu-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--cspt-border-strong);
	box-shadow: var(--cspt-shadow);
}

.cspt-lieu-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cspt-lieu-card__media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.cspt-lieu-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cspt-lieu-card__body {
	padding: var(--cspt-space-3) var(--cspt-space-4);
}
.cspt-lieu-card__title {
	font-size: var(--cspt-text-base);
	margin: 0 0 var(--cspt-space-1);
	color: var(--cspt-text-primary);
}
.cspt-lieu-card__address {
	margin: 0;
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-tertiary);
	line-height: var(--cspt-line-normal);
}

/* ----- Single lieu ----- */

.cspt-lieu__header {
	margin-bottom: var(--cspt-space-5);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 1px solid var(--cspt-border);
}

.cspt-lieu__title {
	margin-bottom: var(--cspt-space-2);
}

.cspt-lieu__address {
	font-style: normal;
	font-size: var(--cspt-text-lg);
	color: var(--cspt-text-secondary);
	line-height: var(--cspt-line-normal);
}
.cspt-lieu__street {
	display: inline;
}
.cspt-lieu__city {
	color: var(--cspt-text-tertiary);
	font-size: var(--cspt-text-base);
}

.cspt-lieu__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: var(--cspt-space-6);
	align-items: start;
}

.cspt-lieu__main {
	min-width: 0;
}

.cspt-lieu__hero {
	margin-bottom: var(--cspt-space-5);
	border-radius: var(--cspt-radius-lg);
	overflow: hidden;
}
.cspt-lieu__hero img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
}

.cspt-lieu__content {
	font-size: var(--cspt-text-lg);
	line-height: var(--cspt-line-relaxed);
}

.cspt-lieu__directions {
	margin-bottom: var(--cspt-space-5);
}

/* Liste des activités sur place (sidebar) */
.cspt-lieu-activites-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}
.cspt-lieu-activite-link {
	display: flex;
	align-items: center;
	gap: var(--cspt-space-3);
	padding: var(--cspt-space-2);
	border-radius: var(--cspt-radius);
	text-decoration: none;
	color: inherit;
	border-left: 3px solid var(--cspt-activite-color, var(--cspt-border));
	transition: background-color var(--cspt-trans), border-color var(--cspt-trans);
}
.cspt-lieu-activite-link:hover,
.cspt-lieu-activite-link:focus {
	background-color: var(--cspt-bg-secondary);
}
.cspt-lieu-activite-link__media {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	border-radius: var(--cspt-radius);
	overflow: hidden;
}
.cspt-lieu-activite-link__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cspt-lieu-activite-link__media--placeholder {
	background-color: var(--cspt-activite-color, var(--cspt-accent));
}
.cspt-lieu-activite-link__name {
	font-weight: 500;
	color: var(--cspt-text-primary);
	font-size: var(--cspt-text-sm);
}

/* ========================================================================
 * 10. Responsive (overrides spécifiques 5C)
 * ======================================================================== */

@media (max-width: 1024px) {
	.cspt-evenement__layout,
	.cspt-lieu__layout {
		grid-template-columns: 1fr;
	}
	.cspt-evenement__sidebar,
	.cspt-lieu__sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.cspt-evenement__header {
		flex-direction: column;
		gap: var(--cspt-space-3);
	}
	.cspt-evenement__date-block {
		flex-direction: row;
		gap: var(--cspt-space-2);
		min-width: 0;
		align-self: flex-start;
		padding: var(--cspt-space-2) var(--cspt-space-3);
	}
	.cspt-evenement__date-day {
		font-size: var(--cspt-text-2xl);
	}
	.cspt-evenement__date-month {
		font-size: var(--cspt-text-base);
		text-transform: uppercase;
	}
	.cspt-evenement__date-year {
		display: none;
	}

	.cspt-lieu__map {
		height: 280px;
	}
	.cspt-lieux-map {
		height: 360px;
	}

	.cspt-agenda-item__link {
		grid-template-columns: 56px 1fr;
		gap: var(--cspt-space-3);
	}
	.cspt-agenda-item__day {
		font-size: var(--cspt-text-xl);
	}
}

/* ========================================================================
 * 11. Page d'accueil (front-page.php)
 * ======================================================================== */

.cspt-front-page {
	/* Le contenu Gutenberg gère son propre rythme vertical. On retire le
	 * padding du <main> ici pour que le hero soit vraiment pleine largeur. */
}

.cspt-main:has(.cspt-front-page) {
	padding-top: 0;
}

.cspt-front-hero {
	position: relative;
	width: 100%;
	min-height: 280px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--cspt-bg-secondary);
}

.cspt-front-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.cspt-front-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay sombre pour la lisibilité du texte */
.cspt-front-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.1) 0%,
		rgba(0, 0, 0, 0.55) 100%
	);
	z-index: 1;
	pointer-events: none;
}

.cspt-front-hero__inner {
	position: relative;
	z-index: 2;
	padding-top: var(--cspt-space-7);
	padding-bottom: var(--cspt-space-7);
	color: #ffffff;
}

.cspt-front-hero__title {
	font-size: var(--cspt-text-5xl);
	font-weight: 700;
	color: #ffffff;
	margin-bottom: var(--cspt-space-4);
	line-height: 1.1;
	max-width: 800px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.cspt-front-hero__lead {
	font-size: var(--cspt-text-xl);
	color: #ffffff;
	margin: 0;
	max-width: 720px;
	line-height: var(--cspt-line-normal);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Layout flex-wrap générique : la sidebar bascule en dessous du main dès que
 * la largeur disponible ne suffit plus pour avoir main + sidebar côte à côte.
 * Pas de @media query : le re-flow est intrinsèque au flex-basis.
 *
 * Utilisé par : front-page, pages WP standard, articles uniques, liste d'articles.
 * (.cspt-front-page__* conservés en alias pour rétrocompatibilité.) */
.cspt-with-sidebar__layout,
.cspt-front-page__layout {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cspt-space-6);
	align-items: flex-start;
	padding-top: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-6);
}

.cspt-with-sidebar__main,
.cspt-front-page__main {
	flex: 1 1 600px; /* prend toute la place dispo, mais minimum 600px sinon wrap */
	min-width: 0;
}

.cspt-with-sidebar__sidebar,
.cspt-front-page__sidebar {
	flex: 1 1 320px; /* idéal 320–380px, peut s'étirer pleine largeur quand seul sur sa ligne */
	max-width: 380px;
	position: sticky;
	top: calc(var(--cspt-header-height) + var(--cspt-space-4));
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-4);
}

/* Encart d'alerte (haut de sidebar — front-page et page discipline).
 * Visuel volontairement marqué : rouge, majuscules, bordure. */
.cspt-sidebar-alerte {
	background-color: #fee;
	color: #b00020;
	border: 2px solid #b00020;
	border-radius: var(--cspt-radius);
	padding: var(--cspt-space-3) var(--cspt-space-4);
	margin-bottom: var(--cspt-space-4);
	text-align: center;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: var(--cspt-text-sm);
	line-height: 1.4;
}

.cspt-sidebar-alerte__text {
	display: inline-block;
}

/* Encart "dernier article" sous la sidebar événements */
.cspt-sidebar--dernier-article .cspt-sidebar-section {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.cspt-dernier-article {
	margin: 0;
}
.cspt-dernier-article__link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--cspt-radius);
	overflow: hidden;
	transition: background-color var(--cspt-trans);
}
.cspt-dernier-article__link:hover,
.cspt-dernier-article__link:focus {
	background-color: var(--cspt-bg-secondary);
}
.cspt-dernier-article__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-color: var(--cspt-bg-secondary);
	overflow: hidden;
	margin-bottom: var(--cspt-space-2);
}
.cspt-dernier-article__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cspt-dernier-article__body {
	padding: var(--cspt-space-2);
}
.cspt-dernier-article__title {
	font-size: var(--cspt-text-base);
	font-weight: 600;
	margin: 0 0 4px;
	line-height: 1.3;
	color: var(--cspt-text-primary);
}
.cspt-dernier-article__date {
	font-size: var(--cspt-text-xs);
	color: var(--cspt-text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* Quand la sidebar bascule sous le main (pas assez de place), elle prend toute
 * la largeur disponible : on annule la limite max-width et le sticky. */
@media (max-width: 1024px) {
	.cspt-with-sidebar__sidebar,
	.cspt-front-page__sidebar {
		max-width: none;
		flex-basis: 100%;
		position: static;
	}
}

/* Page vide : message d'aide à l'admin pour configurer l'accueil */
.cspt-front-empty {
	max-width: 720px;
	margin: var(--cspt-space-7) auto;
	padding: var(--cspt-space-6);
	background-color: var(--cspt-bg-secondary);
	border-radius: var(--cspt-radius-lg);
}
.cspt-front-empty h1 {
	margin-bottom: var(--cspt-space-4);
}
.cspt-front-empty ol {
	margin: var(--cspt-space-4) 0;
	padding-left: var(--cspt-space-6);
}
.cspt-front-empty ol li {
	margin-bottom: var(--cspt-space-3);
}

/* ========================================================================
 * 12. Recherche
 * ======================================================================== */

.cspt-search__header {
	margin-bottom: var(--cspt-space-6);
	padding-bottom: var(--cspt-space-4);
	border-bottom: 1px solid var(--cspt-border);
}

.cspt-search__title {
	margin-bottom: var(--cspt-space-4);
}
.cspt-search__title em {
	font-style: normal;
	color: var(--cspt-accent);
}

.cspt-search__form .search-form {
	margin: 0;
	max-width: none;
}

.cspt-search-group {
	margin-bottom: var(--cspt-space-6);
}

.cspt-search-group__title {
	font-size: var(--cspt-text-xl);
	margin-bottom: var(--cspt-space-4);
	padding-bottom: var(--cspt-space-2);
	border-bottom: 2px solid var(--cspt-accent);
	display: flex;
	align-items: baseline;
	gap: var(--cspt-space-2);
}
.cspt-search-group__count {
	color: var(--cspt-text-tertiary);
	font-weight: 400;
	font-size: var(--cspt-text-base);
}

.cspt-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--cspt-space-2);
}

.cspt-search-item__link {
	display: flex;
	gap: var(--cspt-space-4);
	padding: var(--cspt-space-3);
	border-radius: var(--cspt-radius);
	background-color: var(--cspt-bg-elevated);
	border: 1px solid var(--cspt-border);
	text-decoration: none;
	color: inherit;
	transition: transform var(--cspt-trans), border-color var(--cspt-trans);
}
.cspt-search-item__link:hover,
.cspt-search-item__link:focus {
	transform: translateX(2px);
	border-color: var(--cspt-border-strong);
}

.cspt-search-item__media {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: var(--cspt-radius);
	overflow: hidden;
	background-color: var(--cspt-bg-secondary);
}
.cspt-search-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cspt-search-item__body {
	flex: 1;
	min-width: 0;
}
.cspt-search-item__title {
	font-size: var(--cspt-text-lg);
	margin: 0 0 var(--cspt-space-2);
	color: var(--cspt-text-primary);
	line-height: 1.3;
}
.cspt-search-item__excerpt {
	margin: 0;
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-secondary);
	line-height: var(--cspt-line-normal);
}

.cspt-search__empty {
	text-align: center;
	padding: var(--cspt-space-7) 0;
	color: var(--cspt-text-secondary);
}

/* ========================================================================
 * 13. Commentaires
 * ======================================================================== */

.cspt-comments {
	margin-top: var(--cspt-space-7);
	padding-top: var(--cspt-space-6);
	border-top: 1px solid var(--cspt-border);
}

.cspt-comments__title {
	font-size: var(--cspt-text-xl);
	margin-bottom: var(--cspt-space-5);
}
.cspt-comments__title span {
	color: var(--cspt-text-secondary);
	font-weight: 400;
}

.cspt-comments__list {
	list-style: none;
	margin: 0 0 var(--cspt-space-6);
	padding: 0;
}

.cspt-comments__list .comment {
	margin-bottom: var(--cspt-space-4);
	padding: var(--cspt-space-4);
	background-color: var(--cspt-bg-secondary);
	border-radius: var(--cspt-radius-lg);
}

.cspt-comments__list .comment .children {
	list-style: none;
	margin-top: var(--cspt-space-3);
	padding-left: var(--cspt-space-5);
	border-left: 2px solid var(--cspt-border);
}

.cspt-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--cspt-space-3);
	margin-bottom: var(--cspt-space-2);
}
.cspt-comments__list .comment-author img {
	width: 48px;
	height: 48px;
	border-radius: var(--cspt-radius-full);
}
.cspt-comments__list .fn {
	font-weight: 600;
	color: var(--cspt-text-primary);
	font-style: normal;
}
.cspt-comments__list .comment-metadata {
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-tertiary);
	margin-bottom: var(--cspt-space-3);
}
.cspt-comments__list .comment-content {
	font-size: var(--cspt-text-base);
	line-height: var(--cspt-line-relaxed);
	color: var(--cspt-text-primary);
}
.cspt-comments__list .reply {
	margin-top: var(--cspt-space-3);
	font-size: var(--cspt-text-sm);
}
.cspt-comments__list .reply a {
	color: var(--cspt-accent);
	text-decoration: none;
	font-weight: 500;
}
.cspt-comments__list .reply a:hover,
.cspt-comments__list .reply a:focus {
	text-decoration: underline;
}

.cspt-comments__closed {
	color: var(--cspt-text-tertiary);
	font-style: italic;
	margin: var(--cspt-space-5) 0;
}

/* Formulaire de commentaire */
.cspt-comment-form {
	max-width: 760px;
}
.cspt-comment-form .comment-form-comment textarea,
.cspt-comment-form input[type="text"],
.cspt-comment-form input[type="email"],
.cspt-comment-form input[type="url"] {
	width: 100%;
	padding: var(--cspt-space-3);
	border: 1px solid var(--cspt-border);
	border-radius: var(--cspt-radius);
	background-color: var(--cspt-bg);
	color: var(--cspt-text-primary);
	font-family: inherit;
	font-size: var(--cspt-text-base);
}
.cspt-comment-form .comment-form-comment textarea:focus,
.cspt-comment-form input:focus {
	outline: 2px solid var(--cspt-accent);
	outline-offset: 1px;
	border-color: var(--cspt-accent);
}
.cspt-comment-form .comment-form-author,
.cspt-comment-form .comment-form-email,
.cspt-comment-form .comment-form-url {
	margin-bottom: var(--cspt-space-3);
}
.cspt-comment-form label {
	display: block;
	margin-bottom: var(--cspt-space-2);
	font-weight: 500;
	color: var(--cspt-text-primary);
	font-size: var(--cspt-text-sm);
}
.cspt-comment-form .comment-notes,
.cspt-comment-form .comment-form-cookies-consent {
	font-size: var(--cspt-text-sm);
	color: var(--cspt-text-tertiary);
	margin-bottom: var(--cspt-space-3);
}
.cspt-comment-form .form-submit {
	margin-top: var(--cspt-space-3);
}

/* Responsive search */
@media (max-width: 640px) {
	.cspt-search-item__link {
		flex-direction: column;
		gap: var(--cspt-space-3);
	}
	.cspt-search-item__media {
		width: 100%;
		height: 160px;
	}

	.cspt-front-hero {
		min-height: 220px;
	}
	.cspt-front-hero__title {
		font-size: var(--cspt-text-3xl);
	}
	.cspt-front-hero__lead {
		font-size: var(--cspt-text-base);
	}
}