/* =========================================================
   UJA ÉVÈNEMENTS — PARTIE PUBLIQUE
   Les couleurs reprennent la palette du thème UJA Essentiel
   lorsqu'elle existe, avec des valeurs de repli.
   ========================================================= */

.uja-ev,
.uja-ev-voile {
	--uja-bleu: var(--wp--preset--color--accent-1, #0071ff);
	--uja-bleu-2: var(--wp--preset--color--accent-3, #315fc4);
	--uja-orange: var(--wp--preset--color--accent-2, #D45635);
	--uja-orange-fonce: var(--wp--preset--color--orange-fonce, #bd4b2f);
	--uja-texte: var(--wp--preset--color--contrast, #212529);
	--uja-gris: var(--wp--preset--color--accent-4, #6c757d);
	--uja-gris-clair: #9aa0a6;
	--uja-trait: var(--wp--preset--color--accent-6, #e5e5e5);
	--uja-carte: var(--wp--preset--color--base, #ffffff);
	--uja-puce: #f2f3f5;
	--uja-bleu-fond: #dbe5f7;
	--uja-vert: #2e9d4f;
	--uja-vert-fond: #e8f4ea;
	--uja-vert-texte: #397447;
	--uja-violet-fond: #eee8f8;
	--uja-violet-texte: #7250a3;
	--uja-or-fond: #f7efd9;
	--uja-or-texte: #806b45;
	--uja-alerte: #c97824;
	--uja-alerte-fond: #fff0e6;
	--uja-ombre: 0 3px 12px rgba(0, 0, 0, .08);
	color: var(--uja-texte);
	font-family: inherit;
}

.uja-ev *,
.uja-ev *::before,
.uja-ev *::after,
.uja-ev-voile *,
.uja-ev-voile *::before,
.uja-ev-voile *::after {
	box-sizing: border-box;
}

.uja-ev-liste {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.uja-ev-vide {
	color: var(--uja-gris);
}

/* ---------- Carte ---------- */

.uja-ev-carte {
	position: relative;
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 0 32px;
	padding: 28px 200px 28px 28px;
	background: var(--uja-carte);
	border-radius: 12px;
	box-shadow: var(--uja-ombre);
	scroll-margin-top: 24px;
}

.uja-ev-date {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	background: var(--uja-puce);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--uja-bleu);
	line-height: 1.05;
	align-self: start;
}

.uja-ev-jour { font-size: 2.1rem; font-weight: 600; }
.uja-ev-mois { font-size: .8rem; font-weight: 600; }
.uja-ev-annee { font-size: .7rem; color: var(--uja-gris); margin-top: 2px; }

.uja-ev .uja-ev-titre {
	margin: 2px 0 6px;
	color: var(--uja-bleu);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.uja-ev .uja-ev-horaire { margin: 0 0 2px; color: var(--uja-gris); font-size: .95rem; }
.uja-ev .uja-ev-lieu { margin: 0 0 12px; color: var(--uja-gris-clair); font-size: .8rem; }

.uja-ev .uja-ev-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.uja-ev .uja-ev-puce {
	margin: 0;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: .8rem;
	line-height: 1.5;
	background: var(--uja-puce);
	color: var(--uja-texte);
}

.uja-ev .uja-ev-puce-presentiel { background: var(--uja-vert-fond); color: var(--uja-vert-texte); }
.uja-ev .uja-ev-puce-distanciel { background: var(--uja-violet-fond); color: var(--uja-violet-texte); }
.uja-ev .uja-ev-puce-fc { background: var(--uja-or-fond); color: var(--uja-or-texte); }
.uja-ev .uja-ev-puce-limite { color: var(--uja-gris); }

/* Rubans à droite */

.uja-ev-rubans {
	position: absolute;
	top: 24px;
	right: -12px;
	width: 160px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.uja-ev-ruban {
	padding: 6px 12px;
	border-radius: 4px 0 0 4px;
	background: var(--uja-bleu);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.3;
}

.uja-ev-type-colloque { background: var(--uja-bleu-fond); color: var(--uja-bleu-2); }
.uja-ev-type-evenement { background: var(--uja-orange); }

.uja-ev-places {
	margin-top: 4px;
	padding-right: 24px;
	text-align: right;
	font-size: .8rem;
	color: var(--uja-gris);
}

.uja-ev-places strong {
	display: block;
	font-size: 1.6rem;
	line-height: 1.1;
	font-weight: 600;
	color: var(--uja-texte);
}

.uja-ev-places.uja-ev-peu strong { color: var(--uja-orange); }
.uja-ev-places.uja-ev-complet strong { font-size: 1rem; color: var(--uja-gris); }

/* Boutons */

.uja-ev-actions {
	grid-column: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.uja-ev .uja-ev-btn,
.uja-ev-voile .uja-ev-btn {
	margin: 0;
	padding: 10px 22px;
	border: 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
	box-shadow: none;
	transition: background .2s ease;
}

.uja-ev .uja-ev-btn-inscrire,
.uja-ev-voile .uja-ev-btn-inscrire {
	background: var(--uja-orange);
	color: #fff;
}

.uja-ev .uja-ev-btn-inscrire:hover,
.uja-ev-voile .uja-ev-btn-inscrire:hover {
	background: var(--uja-orange-fonce);
	color: #fff;
}

.uja-ev .uja-ev-btn-inscrire:disabled {
	background: var(--uja-puce);
	color: var(--uja-gris);
	cursor: not-allowed;
}

/* Bouton « Partager » : discret, en gris clair */
.uja-ev .uja-ev-btn-partager {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--uja-puce);
	color: var(--uja-texte);
	font-size: .9rem;
	font-weight: 500;
}

.uja-ev .uja-ev-btn-partager:hover {
	background: var(--uja-trait);
	color: var(--uja-texte);
}

.uja-ev .uja-ev-btn-partager svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.uja-ev .uja-ev-btn-partager.uja-ev-copie {
	background: var(--uja-vert-fond);
	color: var(--uja-vert-texte);
}

.uja-ev .uja-ev-btn-infos {
	background: transparent;
	color: var(--uja-bleu);
	padding: 10px 6px;
	font-size: .9rem;
	font-weight: 500;
}

.uja-ev .uja-ev-btn-infos:hover {
	background: transparent;
	color: var(--uja-bleu);
	text-decoration: underline;
}

.uja-ev-chevron {
	display: inline-block;
	margin-left: 4px;
	transition: transform .25s ease;
}

.uja-ev-ouvert .uja-ev-chevron { transform: rotate(180deg); }

.uja-ev .uja-ev-btn:focus-visible,
.uja-ev-voile .uja-ev-btn:focus-visible,
.uja-ev-voile input:focus-visible,
.uja-ev-voile .uja-ev-lien-annuler:focus-visible,
.uja-ev .uja-ev-lien-annuler:focus-visible {
	outline: 3px solid var(--uja-bleu);
	outline-offset: 2px;
}

/* Détails dépliables */

.uja-ev-details {
	grid-column: 1 / -1;
	margin-right: -172px;
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.uja-ev-ouvert .uja-ev-details { grid-template-rows: 1fr; }
.uja-ev-details > div { overflow: hidden; }

.uja-ev-details-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	gap: 32px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--uja-trait);
}

.uja-ev .uja-ev-details h3 {
	margin: 0 0 10px;
	color: var(--uja-bleu);
	font-size: 1rem;
	font-weight: 600;
}

.uja-ev .uja-ev-details p { margin: 0 0 1rem; }
.uja-ev .uja-ev-description img { max-width: 100%; height: auto; border-radius: 8px; }

.uja-ev .uja-ev-intervenants { list-style: none; margin: 0 0 1rem; padding: 0; }
.uja-ev .uja-ev-intervenants li { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--uja-trait); font-size: .9rem; }
.uja-ev .uja-ev-intervenants li:last-child { border-bottom: 0; }
.uja-ev .uja-ev-intervenants span { display: block; color: var(--uja-gris); font-size: .8rem; }
.uja-ev .uja-ev-pratique p { font-size: .9rem; }

/* Message en tête de liste (évènement passé ou introuvable) */
.uja-ev .uja-ev-message {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 8px;
	background: var(--uja-bleu-fond);
	color: var(--uja-bleu-2);
	font-size: .9rem;
}

/* ---------- Aperçu en fondu et lien de suite ---------- */

.uja-ev .uja-ev-apercu {
	max-height: 130px;
	overflow-x: visible;
	overflow-y: clip;
	box-shadow: none;
	border-radius: 12px 12px 0 0;
	pointer-events: none;
	user-select: none;
}

.uja-ev .uja-ev-apercu .uja-ev-titre {
	margin: 2px 0 6px;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

/* Le dégradé se fond dans la couleur de fond de la page (variable --uja-ev-fond-page modifiable). */
.uja-ev .uja-ev-apercu::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: -1px;
	left: -24px;
	right: -24px;
	background: linear-gradient(to bottom, transparent 0%, var(--uja-ev-fond-page, var(--wp--preset--color--accent-5, #f5f5f5)) 80%);
}

.uja-ev .uja-ev-suite {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 4px;
	padding: 10px;
	color: var(--uja-bleu);
	font-weight: 600;
	text-decoration: none;
}

.uja-ev-points {
	display: inline-flex;
	gap: 7px;
}

.uja-ev-points span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--uja-bleu);
	transition: transform .2s ease;
}

.uja-ev .uja-ev-suite:hover .uja-ev-suite-texte { text-decoration: underline; }
.uja-ev .uja-ev-suite:hover .uja-ev-points span { transform: translateY(-2px); }
.uja-ev .uja-ev-suite:hover .uja-ev-points span:nth-child(2) { transition-delay: .05s; }
.uja-ev .uja-ev-suite:hover .uja-ev-points span:nth-child(3) { transition-delay: .1s; }

/* ---------- Pop-up ---------- */

.uja-ev-voile {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}

.uja-ev-voile.uja-ev-visible { opacity: 1; pointer-events: auto; }

.uja-ev-popup {
	width: 100%;
	max-width: 520px;
	max-height: 100%;
	overflow-y: auto;
	padding: 36px;
	background: var(--uja-carte);
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
	transform: translateY(10px);
	transition: transform .2s ease;
	font-size: 1rem;
	line-height: 1.5;
}

.uja-ev-visible .uja-ev-popup { transform: none; }

.uja-ev-popup h2 {
	margin: 0 0 4px;
	color: var(--uja-bleu);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.uja-ev-popup .uja-ev-sous-titre { margin: 0 0 24px; color: var(--uja-gris); font-size: .875rem; }

.uja-ev-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.uja-ev-champ { margin-bottom: 16px; }

.uja-ev-champ label {
	display: block;
	margin-bottom: 6px;
	font-size: .875rem;
	font-weight: 600;
}

.uja-ev-champ input {
	width: 100%;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--uja-trait);
	border-radius: 6px;
	background: var(--uja-carte);
	color: var(--uja-texte);
	font-family: inherit;
	font-size: 1rem;
}

.uja-ev-champ input[aria-invalid="true"] { border-color: var(--uja-orange); }
.uja-ev-champ .uja-ev-erreur { display: none; margin-top: 4px; color: var(--uja-orange); font-size: .8rem; }
.uja-ev-champ input[aria-invalid="true"] + .uja-ev-erreur { display: block; }

.uja-ev-piege { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.uja-ev-message-erreur { margin: 0 0 16px; color: var(--uja-orange); font-size: .875rem; }

.uja-ev-popup-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 16px;
	margin-top: 8px;
}

.uja-ev-lien-annuler {
	padding: 8px;
	border: 0;
	background: none;
	color: var(--uja-gris);
	font-family: inherit;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
}

.uja-ev-lien-annuler:hover { text-decoration: underline; color: var(--uja-gris); background: none; }

.uja-ev-etat { text-align: center; padding: 16px 0 8px; }
.uja-ev-etat h2 { margin-top: 18px; }
.uja-ev-etat p { margin: 6px 0 0; color: var(--uja-gris); font-size: .9rem; }
.uja-ev-etat-attention h2 { color: var(--uja-alerte); }

.uja-ev-coche { display: block; width: 110px; height: 110px; margin: 0 auto; }
.uja-ev-coche circle { fill: var(--uja-vert-fond); stroke: var(--uja-vert); stroke-width: 4; }
.uja-ev-coche path {
	fill: none;
	stroke: var(--uja-vert);
	stroke-width: 8;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 80;
	stroke-dashoffset: 80;
	animation: uja-ev-trace .45s .15s ease forwards;
}

@keyframes uja-ev-trace { to { stroke-dashoffset: 0; } }

.uja-ev-attention { display: block; width: 96px; height: 96px; margin: 0 auto; }
.uja-ev-attention path { fill: var(--uja-alerte-fond); stroke: var(--uja-alerte); stroke-width: 4; stroke-linejoin: round; }
.uja-ev-attention line,
.uja-ev-attention circle { stroke: var(--uja-alerte); fill: var(--uja-alerte); }

/* ---------- Page d'annulation ---------- */

.uja-ev-page-annulation { margin: 0; background: #f5f5f5; }

.uja-ev-annul {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.uja-ev-annul-carte {
	width: 100%;
	max-width: 560px;
	padding: 40px;
	background: var(--uja-carte);
	border-radius: 12px;
	box-shadow: var(--uja-ombre);
	line-height: 1.5;
}

.uja-ev-annul-carte h1 {
	margin: 0 0 20px;
	color: var(--uja-bleu);
	font-size: calc(1.275rem + .3vw);
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

.uja-ev-annul-carte .uja-ev-coche { margin: 0 0 20px; }
.uja-ev-annul-ev { padding: 16px 20px; background: #f5f5f5; border-radius: 8px; }
.uja-ev-annul-form { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.uja-ev-annul-retour { margin: 24px 0 0; font-size: .9rem; }
.uja-ev-annul-retour a { color: var(--uja-bleu); }

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
	.uja-ev-coche path { animation: none; stroke-dashoffset: 0; }
	.uja-ev-details,
	.uja-ev-voile,
	.uja-ev-popup,
	.uja-ev-chevron,
	.uja-ev-points span { transition: none; }
	.uja-ev .uja-ev-suite:hover .uja-ev-points span { transform: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 760px) {
	.uja-ev-carte {
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.uja-ev-date {
		width: auto;
		height: auto;
		flex-direction: row;
		gap: 6px;
		align-self: flex-start;
		margin-bottom: 12px;
		padding: 6px 12px;
		border-radius: 8px;
	}

	.uja-ev-jour { font-size: 1rem; }
	.uja-ev-mois,
	.uja-ev-annee { margin: 0; font-size: .85rem; color: var(--uja-bleu); }

	.uja-ev-rubans {
		position: static;
		order: -1;
		width: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		margin-bottom: 12px;
	}

	.uja-ev-ruban { border-radius: 4px; }
	.uja-ev-places { margin: 0; padding: 0; text-align: left; }
	.uja-ev-places strong { display: inline; margin-right: 4px; font-size: 1rem; }
	.uja-ev-actions .uja-ev-btn-inscrire { flex: 1; }
	.uja-ev-details { margin-right: 0; }
	.uja-ev-details-inner { grid-template-columns: 1fr; gap: 8px; }
	.uja-ev-ligne { grid-template-columns: 1fr; gap: 0; }
	.uja-ev-popup { padding: 24px; }
	.uja-ev-annul-carte { padding: 24px; }
}