/* Couvée — Événements
   Styles de base. La mise en grille et les couleurs sont générées depuis les
   réglages du plugin et injectées en style inline (voir includes/styles.php). */

.eap__event {
	overflow-wrap: break-word;
}

/* Le style issu des réglages cible `.eap__event` et est injecté après cette
   feuille : il faut deux classes pour l'emporter. */
.eap__event.eap__event--sans-image {
	display: block;
}

.eap__img img {
	display: block;
	width: 100%;
	height: auto;
}

.eap__title {
	line-height: 1.25;
}

.eap__meta {
	margin: 0 0 .6em;
	line-height: 1.7;
}

.eap__meta .dashicons {
	font-size: 1em;
	width: 1em;
	height: 1em;
	vertical-align: text-bottom;
}

.no-wrap {
	white-space: nowrap;
}

.eap__category {
	margin: 0 0 .4em;
	font-size: .875em;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.eap__add-info {
	margin: 0 0 .6em;
	font-style: italic;
}

.eap__more {
	margin: .6em 0 0;
}

.eap__empty {
	padding: 1em 0;
}

/* Repris du cœur de WordPress : masque un texte tout en le laissant lisible
   par les lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Filtre par type ---------------------------------------------------- */

.eap__filtre {
	margin: 0 0 1.4em;
}

.eap__filtre-liste,
.eap__pagination-liste {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.eap__filtre-lien {
	display: inline-block;
	padding: .35em .8em;
	border: 1px solid currentColor;
	border-radius: 2em;
	font-size: .9em;
	line-height: 1.4;
	text-decoration: none;
}

/* L'état actif se marque par l'épaisseur, pas par une couleur : le thème garde
   la main sur la palette, et le rendu reste lisible en clair comme en sombre. */
.eap__filtre-lien.is-active {
	font-weight: 600;
	box-shadow: inset 0 0 0 1px currentColor;
}

.eap__filtre-compte {
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

.eap__filtre-compte::before {
	content: " ";
}

/* --- Pagination --------------------------------------------------------- */

.eap__pagination {
	margin: 1.6em 0 0;
}

.eap__pagination-liste {
	justify-content: center;
}

.eap__pagination .page-numbers {
	display: inline-block;
	min-width: 2.4em;
	padding: .35em .6em;
	border: 1px solid currentColor;
	text-align: center;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.eap__pagination .page-numbers.current {
	font-weight: 600;
}

.eap__pagination .page-numbers.dots {
	border-color: transparent;
}

/* --- Dates sur la page d'un événement ----------------------------------- */

.eap__dates-bloc {
	margin: 0 0 1.4em;
}

.eap__dates-titre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .8em;
	margin: 0 0 .5em;
	font-size: .9em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .7;
}

/* En tête de bloc, le badge garde sa casse : « 8 € / 5 € réduit » en
   capitales serait illisible. */
.eap__dates-titre .eap__tarif {
	text-transform: none;
	letter-spacing: normal;
}

.eap__dates {
	margin: 0 0 .8em;
	padding: 0;
	list-style: none;
}

.eap__date-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5em .9em;
	margin: 0 0 .5em;
	padding: .6em .8em;
	/* Aucune couleur imposée : la bordure et le fond se déduisent de la
	   couleur du texte, donc de la palette du thème. */
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 6px;
}

.eap__date-item.is-prochaine {
	border-color: color-mix(in srgb, currentColor 55%, transparent);
	background: color-mix(in srgb, currentColor 5%, transparent);
}

.eap__date-item.is-passee {
	opacity: .5;
}

/* --- La pastille de calendrier ------------------------------------------ */

.eap__pastilles {
	display: flex;
	align-items: center;
	gap: .4em;
	flex: none;
}

.eap__pastille {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 3.4em;
	padding: .35em .2em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 5px;
	line-height: 1.05;
	text-align: center;
}

.eap__pastille-jour,
.eap__pastille-mois,
.eap__pastille-annee {
	font-size: .68em;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity: .75;
}

.eap__pastille-quantieme {
	font-size: 1.5em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.eap__pastille-lien {
	opacity: .5;
}

/* --- Le texte à droite de la pastille ----------------------------------- */

.eap__date-detail {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .2em .6em;
	/* Sous une dizaine de caractères de large, le détail passe sous les
	   pastilles plutôt que de se casser en trois lignes. */
	flex: 1 1 10em;
	min-width: 0;
}

.eap__date-horaire {
	font-weight: 600;
	font-size: 1.05em;
}

.eap__date-horaire--vide {
	font-weight: 400;
	font-style: italic;
	opacity: .7;
}

.eap__date-mention {
	padding: .1em .5em;
	border-radius: 2em;
	background: color-mix(in srgb, currentColor 12%, transparent);
	font-size: .8em;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* --- Le lieu ------------------------------------------------------------ */

.eap__lieu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4em .8em;
	margin: 0;
	padding: .6em .8em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 22%, transparent);
	border-radius: 6px;
}

.eap__lieu-repere {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 10%, transparent);
	opacity: .85;
}

.eap__lieu-detail {
	display: flex;
	flex-direction: column;
	flex: 1 1 8em;
	min-width: 0;
	line-height: 1.35;
}

.eap__lieu-adresse {
	font-weight: 600;
}

.eap__lieu-commune {
	font-size: .9em;
	opacity: .75;
}

.eap__lieu-carte {
	flex: none;
	padding: .35em .8em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 2em;
	font-size: .9em;
	text-decoration: none;
	white-space: nowrap;
}

.eap__lieu-carte:hover,
.eap__lieu-carte:focus {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Repli pour les navigateurs sans color-mix() : des gris neutres, qui restent
   corrects sur fond clair comme sur fond sombre. */
@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.eap__date-item,
	.eap__pastille,
	.eap__lieu {
		border-color: rgba(128, 128, 128, .35);
	}

	.eap__date-item.is-prochaine,
	.eap__lieu-carte {
		border-color: rgba(128, 128, 128, .8);
	}

	.eap__date-mention,
	.eap__lieu-repere {
		background: rgba(128, 128, 128, .2);
	}
}

/* --- Résumé date + lieu dans une carte ---------------------------------- */

.eap__resume {
	display: flex;
	/* Côte à côte quand la carte est assez large, empilé sinon : dans une
	   colonne étroite, coller le texte à droite des pastilles le hache. */
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .3em .7em;
	margin: 0 0 .6em;
}

.eap__resume-detail {
	display: flex;
	flex-direction: column;
	gap: .1em;
	flex: 1 1 11em;
	min-width: 0;
}

.eap__resume-quand,
.eap__resume-ou {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .1em .45em;
	margin: 0;
	line-height: 1.35;
}

.eap__resume-quand .eap__time {
	font-weight: 600;
}

/* Le lieu vient en appui de l'heure, pas à égalité : plus petit, plus clair.
   C'est l'heure qu'on cherche d'abord. */
.eap__resume-ou {
	/* Sans « nowrap », une adresse un peu longue passait à la ligne suivante
	   et laissait le repère seul sur la sienne. */
	flex-wrap: nowrap;
	align-items: flex-start;
	font-size: .9em;
	opacity: .7;
}

.eap__resume-ou .eap__location {
	flex: 1 1 auto;
	min-width: 0;
}

.eap__resume-ou .eap__lieu-repere {
	flex: none;
	width: auto;
	height: auto;
	margin-top: .12em;
	background: none;
}

.eap__resume-ou .eap__lieu-repere svg {
	width: 15px;
	height: 15px;
	vertical-align: -.2em;
}

.eap__autres-dates {
	white-space: nowrap;
	opacity: .75;
	font-size: .9em;
}

/* --- Colonne d'administration ------------------------------------------- */

.couvee-evt-compte-dates {
	opacity: .7;
}

/* --- Événements similaires, sous un événement --------------------------- */

.eap__similaires {
	margin: 2.5em 0 0;
	padding-top: 1.5em;
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 18%, transparent);
}

.eap__similaires-titre {
	margin: 0 0 1em;
	font-size: 1.15em;
}

/* La grille suit la largeur réellement disponible, pas celle de l'écran : avec
   une barre latérale, une media query sur le viewport donnerait trois colonnes
   dans un espace qui n'en tient qu'une. `auto-fit` s'en charge sans arbitraire. */
/* Les deux classes sont nécessaires : le style issu des réglages cible
   `.eap__list` et est injecté après cette feuille — à spécificité égale, il
   l'emporterait.

   `auto-fill` et non `auto-fit` : `auto-fit` supprime les colonnes vides, si
   bien qu'un événement seul s'étirait sur toute la largeur. `auto-fill` garde
   la grille en place, et une carte unique reste à la taille des autres. */
.eap__list.eap__list--similaires {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.4em;
}

/* La disposition « image à gauche » des listes n'a pas de sens dans une
   colonne étroite : on repasse en vertical. */
.eap__list--similaires .eap__event {
	display: block;
}

/* --- Liste compacte, barre latérale ------------------------------------- */

.eap__compacte-entete {
	margin: 0 0 .6em;
	font-size: 1.05em;
}

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

.eap__compacte-item + .eap__compacte-item {
	margin-top: .5em;
	padding-top: .5em;
	border-top: 1px solid;
	border-top-color: color-mix(in srgb, currentColor 14%, transparent);
}

.eap__compacte-lien {
	display: flex;
	/* En haut, pas au centre : un titre qui se replie sur trois lignes ferait
	   flotter la pastille au milieu de nulle part. */
	align-items: flex-start;
	gap: .7em;
	text-decoration: none;
}

.eap__pastille--petite {
	min-width: 2.9em;
	padding: .25em .2em;
	line-height: 1.1;
}

.eap__pastille--petite .eap__pastille-quantieme {
	font-size: 1.25em;
}

.eap__pastille--petite .eap__pastille-jour,
.eap__pastille--petite .eap__pastille-mois,
.eap__pastille--petite .eap__pastille-annee {
	font-size: .62em;
}

.eap__compacte-detail {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}

.eap__compacte-titre {
	font-weight: 600;
}

.eap__compacte-lien:hover .eap__compacte-titre,
.eap__compacte-lien:focus .eap__compacte-titre {
	text-decoration: underline;
}

.eap__compacte-date {
	font-size: .85em;
	opacity: .75;
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.eap__similaires,
	.eap__compacte-item + .eap__compacte-item {
		border-color: rgba(128, 128, 128, .3);
	}
}

/* --- Badge de tarif ------------------------------------------------------ */

.eap__tarif {
	display: inline-block;
	/* Dans une carte, le conteneur est une colonne : sans cela, le badge
	   s'étirerait sur toute la largeur. Le cadre de la date, lui, est une
	   ligne et redemande un centrage — voir `--page` plus bas. */
	align-self: flex-start;
	padding: .12em .6em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 35%, transparent);
	border-radius: 2em;
	font-size: .85em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

/* Dans une carte, le badge suit l'horaire : il ne doit pas peser plus que lui. */
.eap__tarif--carte {
	margin: .15em 0;
	font-weight: 500;
	opacity: .85;
}

/* Sur la page de l'événement, le badge est dans le cadre de la date, poussé
   contre son bord droit. Il revient sous l'horaire quand la ligne est trop
   étroite pour les tenir côte à côte. */
.eap__tarif--page {
	align-self: center;
	margin-left: auto;
	padding: .25em .8em;
	font-size: .9em;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

.eap__date-item.is-passee .eap__tarif--page {
	/* Sur une date passée, tout le cadre est déjà estompé : inutile d'en
	   rajouter, le badge suivrait deux fois. */
	background: none;
}

/* Dans la barre latérale, la place manque : le badge s'efface au maximum. */
.eap__tarif--compacte {
	margin-top: .15em;
	padding: .05em .45em;
	font-size: .78em;
	font-weight: 500;
	opacity: .8;
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.eap__tarif {
		border-color: rgba(128, 128, 128, .5);
	}

	.eap__tarif--page {
		background: rgba(128, 128, 128, .12);
	}
}

/* --- Statut : annulé, reporté, complet ----------------------------------- */

.eap__statut {
	display: inline-block;
	align-self: flex-start;
	padding: .12em .7em;
	border: 1px solid currentColor;
	border-radius: 2em;
	font-size: .85em;
	font-weight: 700;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: .04em;
	white-space: nowrap;
}

/* Sur la page, le statut est un bandeau : il doit se voir avant les dates. */
.eap__statut--page {
	display: block;
	align-self: stretch;
	margin: 0 0 .8em;
	padding: .5em .9em;
	border-radius: 6px;
	font-size: 1em;
	text-align: center;
}

.eap__statut--carte {
	margin: .15em 0;
}

.eap__statut--compacte {
	margin-top: .15em;
	padding: .05em .5em;
	font-size: .75em;
}

/* Chaque statut a sa couleur, pour être reconnu d'un coup d'œil. La couleur
   ne porte jamais l'information à elle seule : le mot est toujours écrit, en
   capitales et en gras. Les contrastes texte/fond ont été mesurés — 7,8 pour
   « reporté », 8,1 pour « annulé », 7,8 pour « complet » — tous au-delà du
   seuil AAA des recommandations d'accessibilité. */

.eap__statut--annule {
	color: #8a1c11;
	background: #fdecea;
	border-color: #d64530;
}

.eap__statut--reporte {
	color: #6e4205;
	background: #fdf3e0;
	border-color: #d38b12;
}

.eap__statut--complet {
	color: #1c4a80;
	background: #e9f0fb;
	border-color: #3f7bc4;
}

/* Sur un thème sombre, des fonds clairs éblouiraient : les rôles s'inversent,
   teintes sourdes et texte clair, contrastes revérifiés. */
@media (prefers-color-scheme: dark) {
	.eap__statut--annule {
		color: #ffb4a8;
		background: #4a1410;
		border-color: #e0705c;
	}

	.eap__statut--reporte {
		color: #f5cd7f;
		background: #3d2a08;
		border-color: #c9922c;
	}

	.eap__statut--complet {
		color: #a8c8f0;
		background: #132b47;
		border-color: #5b8fc9;
	}
}

/* --- Inscription et agenda ---------------------------------------------- */

/* Les deux actions sur une même ligne quand la place le permet. */
.eap__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6em 1.2em;
	margin-top: .8em;
}

.eap__inscription {
	margin: 0;
}

.eap__inscription-lien {
	display: inline-block;
	padding: .5em 1.2em;
	border: 2px solid currentColor;
	border-radius: 2em;
	font-weight: 600;
	text-decoration: none;
}

.eap__inscription-lien:hover,
.eap__inscription-lien:focus {
	background: color-mix(in srgb, currentColor 10%, transparent);
}

.eap__agenda {
	margin: 0;
	font-size: .9em;
}

.eap__agenda-lien {
	opacity: .8;
}



/* Le lien d'ajout à l'agenda propre à une date, dans son cadre. */
.eap__agenda-lien--date {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	flex: none;
	margin-left: auto;
	padding: .2em .7em;
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 2em;
	font-size: .85em;
	text-decoration: none;
	white-space: nowrap;
}

.eap__agenda-lien--date:hover,
.eap__agenda-lien--date:focus {
	border-color: currentColor;
	background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Avec un tarif à droite, le lien passe à la ligne plutôt que de le serrer. */
.eap__date-item .eap__tarif--page + .eap__agenda-lien--date {
	margin-left: .5em;
}

@supports not (color: color-mix(in srgb, currentColor 20%, transparent)) {
	.eap__agenda-lien--date { border-color: rgba(128, 128, 128, .45); }
}

.eap__icone-plus {
	flex: none;
	/* Le trait du « + » est plus fin que celui du texte : à graisse égale il
	   paraîtrait plus lourd que les lettres à côté. */
	opacity: .85;
}

.eap__intervenant {
	margin: 0 0 .6em;
	font-size: 1.05em;
}

/* --- Entête des pages d'événement ---------------------------------------
   Ces règles visent l'élément d'entête de GeneratePress (« Entête
   événements »), dont le balisage vient du thème : `.page-hero` et
   `.page_title` ne sont pas des classes du plugin. Si le thème change, elles
   cessent simplement de s'appliquer, sans rien casser.

   Le lien est ciblé par sa position dans le bloc et non par sa classe : il
   garde ainsi son allure discrète que le balisage porte encore les classes de
   bouton du thème ou la classe dédiée `couvee-retour`. */

.single-eap_event .page-hero .page_title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9em;
	padding-top: 1.6em;
	text-align: center;
}

.single-eap_event .page-hero .page_title h1 {
	margin: 0;
}

/* Un lien de retour n'est pas une action principale : il s'annonce, il ne
   s'impose pas. On neutralise donc l'habillage de bouton du thème — fond,
   bordure, rembourrage — pour ne garder qu'un lien. */
.single-eap_event .page-hero .page_title a {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: .85em;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: .01em;
	text-decoration: none;
	opacity: .7;
}

.single-eap_event .page-hero .page_title a:hover,
.single-eap_event .page-hero .page_title a:focus {
	background: none;
	color: inherit;
	opacity: 1;
	text-decoration: underline;
	text-underline-offset: .25em;
}

/* La flèche pointe vers la gauche : elle dit le retour en arrière, pas le
   départ vers ailleurs.

   C'est un masque plutôt qu'un caractère : un « ← » écrit en CSS est annoncé
   par certains lecteurs d'écran alors qu'il est décoratif, et une police
   d'icônes serait un téléchargement de plus. */
.single-eap_event .page-hero .page_title a::before {
	content: "";
	flex: none;
	width: .85em;
	height: .85em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M19%2012H5M11%2018l-6-6%206-6'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.5'%20stroke-linecap='round'%20stroke-linejoin='round'><path%20d='M19%2012H5M11%2018l-6-6%206-6'/></svg>") center / contain no-repeat;
}

/* Sans prise en charge des masques, le lien s'affiche sans flèche plutôt
   qu'avec un carré noir. */
@supports not ((mask: url("")) or (-webkit-mask: url(""))) {
	.single-eap_event .page-hero .page_title a::before {
		display: none;
	}
}