/* ==========================================================================
   Bloc enf/formations-grid
   --------------------------------------------------------------------------
   La grille reprend la carte standard ; seule la formation mise en avant
   change de fond.
   ========================================================================== */

.enf-formations__head {
	margin-bottom: var(--enf-space-8);
}

.enf-formations__head > * + * {
	margin-top: var(--enf-space-3);
}

/* --------------------------------------------------------------------------
   Cartes de formation
   --------------------------------------------------------------------------
   Ces règles servent au bloc, à l'archive et à la fiche. Elles vivent donc
   dans la feuille du bloc, que l'archive et la fiche demandent explicitement
   — plutôt que d'être dupliquées dans content.css.
   -------------------------------------------------------------------------- */

.enf-card--formation .enf-card__body {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.enf-card--formation .enf-card__footer {
	margin-top: auto;
	padding-top: var(--enf-space-4);
}

.enf-formation__tarif {
	margin: var(--enf-space-2) 0 0;
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
	color: var(--enf-ink);
}

/* La formation mise en avant : fond de marque, texte clair. Le contraste est
   assuré par le fond, pas par la couleur d'accent — qui ne tient pas l'AA. */
.enf-card--formation-avant {
	background: linear-gradient(140deg, var(--enf-blue-deep), var(--enf-navy-deep));
	border-color: transparent;
	color: var(--enf-on-dark);
}

.enf-card--formation-avant .enf-card__title a,
.enf-card--formation-avant .enf-formation__tarif {
	color: var(--enf-on-dark);
}

.enf-card--formation-avant .enf-card__text {
	color: var(--enf-on-dark);
}

.enf-card--formation-avant .enf-card__meta {
	color: var(--enf-on-dark-muted);
}


/* Date de la prochaine session dans la carte : elle se distingue du rythme,
   qu'elle remplace, parce que c'est elle qui fait agir. */
.enf-card__date {
	color: var(--enf-ink);
	font-weight: var(--enf-fw-semibold);
}

.enf-card__date time::first-letter {
	text-transform: uppercase;
}

.enf-card--formation-avant .enf-card__date {
	color: var(--enf-on-dark);
}

/* --------------------------------------------------------------------------
   Section sombre (réglage « Fond : Sombre » du bloc) — la section qui doit
   trancher sur la page, aujourd'hui les ateliers présentiels. Dégradé bleu
   nuit, cartes blanches en relief avec un filet orange en tête, titres des
   cartes remis en bleu (la règle des sections sombres les passait en blanc,
   blanc sur blanc).
   -------------------------------------------------------------------------- */
.enf-section--dark.enf-formations {
	background:
		radial-gradient(60rem 30rem at 85% 0%, rgba(30, 58, 138, 0.55), transparent 70%),
		linear-gradient(160deg, var(--enf-navy) 0%, var(--enf-navy-deep) 100%);
}

.enf-section--dark.enf-formations .enf-section__lede {
	color: var(--enf-on-dark-muted);
}

.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) {
	border: 0;
	border-top: 4px solid var(--enf-orange-vif);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7);
}

.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant):hover {
	box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.8);
}

.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) .enf-card__title a {
	color: var(--enf-blue);
}

.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) .enf-card__title a:hover,
.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) .enf-card__title a:focus-visible {
	color: var(--enf-orange);
}

.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) .enf-formation__tarif,
.enf-section--dark .enf-card--formation:not(.enf-card--formation-avant) .enf-card__date {
	color: var(--enf-ink);
}

/* Le bouton plein garde son libellé clair : la règle « a » des sections
   sombres ne doit pas le recolorer au survol. */
.enf-section--dark .enf-card--formation .enf-btn--primary,
.enf-section--dark .enf-card--formation .enf-btn--primary:hover {
	color: var(--enf-on-dark);
}

/* Le bandeau « prochaine date des afterworks », sous les cartes, sur toute la
   largeur du conteneur : fond bleu nuit dégradé (celui de la carte mise en
   avant), texte à gauche, formulaire dans une carte blanche à droite. Les
   champs gardent les styles des autres formulaires (content.css). */
.enf-formations__inscription {
	display: grid;
	gap: var(--enf-space-6);
	margin-top: var(--enf-space-8);
	padding: var(--enf-space-6);
	border-radius: var(--enf-radius);
	background: linear-gradient(135deg, var(--enf-blue) 0%, var(--enf-navy) 65%);
	color: var(--enf-on-dark);
}

.enf-formations__inscription .enf-label {
	color: var(--enf-orange-vif);
}

.enf-formations__inscription-titre {
	margin: var(--enf-space-3) 0 var(--enf-space-4);
	color: var(--enf-on-dark);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.15;
}

.enf-formations__inscription-chapo {
	max-width: 34rem;
	margin: 0 0 var(--enf-space-5);
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-body);
}

.enf-formations__inscription-points {
	display: grid;
	gap: var(--enf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-formations__inscription-points li {
	position: relative;
	padding-left: var(--enf-space-6);
	color: var(--enf-on-dark);
	font-weight: var(--enf-fw-semibold);
}

/* La coche : un rond orange vif et un trait blanc, dessinés en CSS. */
.enf-formations__inscription-points li::before {
	content: "";
	position: absolute;
	top: 0.15em;
	left: 0;
	width: 20px;
	height: 20px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-orange-vif);
}

.enf-formations__inscription-points li::after {
	content: "";
	position: absolute;
	top: calc(0.15em + 5px);
	left: 7px;
	width: 5px;
	height: 9px;
	border: solid var(--enf-navy);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.enf-formations__inscription-form .enf-form {
	max-width: none;
	padding: var(--enf-space-6);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.45);
}

.enf-formations__inscription-form .enf-form__titre {
	margin-bottom: var(--enf-space-4);
	color: var(--enf-ink);
	font-size: var(--enf-fs-h4);
}

.enf-formations__inscription-form .enf-form__envoi .enf-btn {
	width: 100%;
	justify-content: center;
}

@media (min-width: 920px) {
	.enf-formations__inscription {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
		gap: var(--enf-space-8);
		padding: var(--enf-space-9);
	}
}