/* ==========================================================================
   ENF — Composants
   --------------------------------------------------------------------------
   Chaque bloc porte, en commentaire, la valeur relevée dans la maquette
   quand elle est mesurée plutôt que déduite.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Icônes au trait (enf_icon)
   base.css remplit tout SVG en currentColor : un pictogramme au trait y
   devient une silhouette pleine. Cette classe, posée par enf_icon() sur
   chaque icône, rend le trait. Un point plein dans une icône garde son
   fill="currentColor" posé sur le tracé lui-même.
   -------------------------------------------------------------------------- */

.enf-icone {
	fill: none;
	stroke: currentColor;
}

/* --------------------------------------------------------------------------
   Label de section — « 01 · NOTRE MISSION »
   -------------------------------------------------------------------------- */

.enf-label {
	display: inline-flex;
	align-items: center;
	gap: var(--enf-space-2);
	margin: 0;
	color: var(--enf-orange);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-bold);
	letter-spacing: var(--enf-ls-label);
	line-height: 1.4;
	text-transform: uppercase;
}

.enf-label__num {
	color: inherit;
	opacity: 0.75;
}

/* Le symbole de section du jeu ENF (grille 24), devant le numéro. Il prend
   la couleur du label. */
.enf-label__icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* --------------------------------------------------------------------------
   Boutons
   Relevé : 137 × 44 · padding 24/10 · rayon 4 · fond #FE6A34
            libellé Bold 16 / interligne 24 / couleur #FAF8FF
   -------------------------------------------------------------------------- */

.enf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--enf-space-1);
	/* Relevé : 44 de haut, remplissage 24/10. Le filet d'1 px est déduit du
	   remplissage pour que la hauteur totale tombe juste à 44. */
	min-height: 44px;
	padding: 9px 23px;
	border: 1px solid transparent;
	border-radius: var(--enf-radius-sm);
	font-family: var(--enf-font-display);
	font-size: 1rem;
	font-weight: var(--enf-fw-bold);
	letter-spacing: 0;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--enf-transition),
		border-color var(--enf-transition), color var(--enf-transition),
		transform var(--enf-transition);
}

.enf-btn:hover {
	transform: translateY(-1px);
}

.enf-btn__icon {
	flex: none;
	width: 12px;
	height: 12px;
	transition: transform var(--enf-transition);
}

.enf-btn:hover .enf-btn__icon {
	transform: translate(2px, -2px);
}

/* Un symbole du jeu ENF à la place de la flèche : plus grand, et il ne
   « part » pas en diagonale au survol, ce n'est pas une flèche. */
.enf-btn__icon--symbole {
	width: 18px;
	height: 18px;
}

.enf-btn:hover .enf-btn__icon--symbole {
	transform: none;
}

.enf-btn--primary {
	background-color: var(--enf-orange);
	color: var(--enf-on-dark);
}

.enf-btn--primary:hover {
	background-color: var(--enf-orange-2);
	color: var(--enf-on-dark);
}

.enf-btn--secondary {
	background-color: transparent;
	border-color: var(--enf-orange);
	color: var(--enf-orange);
}

.enf-btn--secondary:hover {
	background-color: var(--enf-orange);
	color: var(--enf-on-dark);
}

/* Sur photo ou fond sombre : contour clair. */
.enf-btn--on-dark {
	background-color: transparent;
	border-color: var(--enf-glass-line);
	color: var(--enf-on-dark);
}

.enf-btn--on-dark:hover {
	background-color: var(--enf-on-dark);
	border-color: var(--enf-on-dark);
	color: var(--enf-navy);
}

.enf-btn--ghost {
	padding-inline: 0;
	background: none;
	color: var(--enf-orange);
}

.enf-btn--ghost:hover {
	color: var(--enf-orange-2);
}

.enf-btn--block {
	width: 100%;
}

/* --------------------------------------------------------------------------
   Pilule translucide — « ● RÉSEAU INTERNATIONAL ↗ 15 PAYS »
   -------------------------------------------------------------------------- */

.enf-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--enf-space-2);
	padding: var(--enf-space-2) var(--enf-space-5);
	background-color: var(--enf-glass);
	border: 1px solid var(--enf-glass-line);
	border-radius: var(--enf-radius-pill);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}

.enf-pill__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--enf-orange-vif);
}

/* --------------------------------------------------------------------------
   Cartes
   Relevé : fond #FFFFFF · filet 1px #C5C5D3 à 10 % · rayon 12
            padding 40 · gap interne 16 · largeur 394,67 en grille 3 colonnes
   -------------------------------------------------------------------------- */

.enf-card {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-4);
	height: 100%;
	padding: var(--enf-space-7);
	background-color: var(--enf-bg);
	border: 1px solid var(--enf-line-soft);
	border-radius: var(--enf-radius);
	transition: border-color var(--enf-transition), box-shadow var(--enf-transition),
		transform var(--enf-transition);
}

/* Élévation légère au survol (demandée au cahier des charges ;
   la maquette n'en comporte pas). */
.enf-card:hover {
	border-color: var(--enf-line);
	box-shadow: var(--enf-shadow-hover);
	transform: translateY(-2px);
}

.enf-card__icon {
	flex: none;
	width: 48px;
	height: 48px;
	color: var(--enf-blue);
}

/* Relevé : Plus Jakarta Sans SemiBold 24 / 33,6 / 0 / #1E3A8A */
.enf-card__title {
	margin: 0;
	color: var(--enf-blue);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h3);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: 0;
	line-height: var(--enf-lh-heading);
}

.enf-card__text {
	margin: 0;
	color: var(--enf-body);
}

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

/* Carte remplie — une sur six dans la grille des piliers. */
.enf-card--filled {
	background-color: var(--enf-blue);
	border-color: transparent;
	color: var(--enf-on-dark-muted);
}

.enf-card--filled:hover {
	border-color: transparent;
}

.enf-card--filled .enf-card__icon,
.enf-card--filled .enf-card__title {
	color: var(--enf-on-dark);
}

.enf-card--filled .enf-card__text {
	color: var(--enf-on-dark-muted);
}

/* Carte à visuel — cartes événement, article, formation. */
.enf-card--media {
	padding: 0;
	overflow: hidden;
}

.enf-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	background-color: var(--enf-bg-slate);
}

.enf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.enf-card--media .enf-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	flex: 1;
	padding: var(--enf-space-5);
}

/* Badge de date posé sur le visuel. */
.enf-badge {
	position: absolute;
	top: var(--enf-space-4);
	left: var(--enf-space-4);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 48px;
	padding: var(--enf-space-2) var(--enf-space-3);
	background-color: var(--enf-glass);
	border: 1px solid var(--enf-glass-line);
	border-radius: var(--enf-radius-sm);
	color: var(--enf-on-dark);
	line-height: 1.1;
	text-align: center;
	backdrop-filter: blur(10px);
}

/* Sans visuel derrière lui, le verre dépoli n'a plus de contraste : le badge
   repasse en fond plein. 17,47:1 au lieu de 1,03:1. */
.enf-card__media--vide .enf-badge {
	background-color: var(--enf-navy-deep);
	border-color: var(--enf-navy-deep);
	backdrop-filter: none;
}

.enf-badge__day {
	font-size: 1.125rem;
	font-weight: var(--enf-fw-bold);
}

.enf-badge__month {
	font-size: 0.625rem;
	font-weight: var(--enf-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.enf-card__meta {
	margin: 0;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Bandeau de statistiques
   -------------------------------------------------------------------------- */

.enf-stats {
	display: grid;
	gap: var(--enf-space-5);
	grid-template-columns: repeat(1, minmax(0, 1fr));
	text-align: center;
}

@media (min-width: 560px) {
	.enf-stats--2,
	.enf-stats--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.enf-stats--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.enf-stats--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 920px) {
	.enf-stats--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.enf-stat__value {
	display: block;
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-stat);
	font-weight: var(--enf-fw-bold);
	line-height: 1.1;
	letter-spacing: var(--enf-ls-h2);
}

.enf-stat__label {
	display: block;
	margin-top: var(--enf-space-2);
	color: var(--enf-muted);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

/* Variante posée sur le visuel du hero. */
.enf-stats--on-media .enf-stat__value {
	color: var(--enf-on-dark);
}

.enf-stats--on-media .enf-stat__label {
	color: var(--enf-on-dark-muted);
}

/* --------------------------------------------------------------------------
   En-tête du site
   Relevé : hauteur 81 · fond blanc · filet bas blanc à 5 %
   -------------------------------------------------------------------------- */

.enf-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--enf-bg);
	border-bottom: 1px solid var(--enf-hairline-on-dark);
	transition: box-shadow var(--enf-transition);
}

/* Ombre discrète dès que l'en-tête décolle du haut de page. */
.enf-site-header.is-stuck {
	box-shadow: var(--enf-shadow-header);
}

/* Relevé : barre pleine largeur — pas de conteneur à 1280 ici —
   marge latérale 64, marge verticale 16, trois groupes répartis
   (marque · liens · bouton) avec des écarts égaux. */
.enf-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enf-space-5);
	min-height: var(--enf-header-h);
	padding-block: var(--enf-space-4);
	padding-inline: var(--enf-header-x);
}

.enf-site-branding,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
}

/* Le lockup ENF fait 301 × 95 : à 48 px de haut il tombe à 152 px de large,
   soit exactement 2× la source — net sur écran Retina. */
.enf-site-branding img,
.custom-logo-link img {
	width: auto;
	height: auto;
	max-height: 48px;
}

.enf-site-branding--mark img {
	max-height: 40px;
}

/* Sur très petit écran, on rétrécit la marque pour garder le bouton visible. */
@media (max-width: 559px) {
	.enf-site-branding img,
	.custom-logo-link img {
		max-height: 34px;
	}
}

/* --------------------------------------------------------------------------
   Navigation principale
   -------------------------------------------------------------------------- */

.enf-nav {
	display: flex;
	align-items: center;
	gap: var(--enf-space-7);
}

/* Sur grand écran, la nav occupe l'espace restant : la liste se centre,
   le bouton « Rejoindre » se cale à droite, comme dans la maquette.

   RELEVÉ DE RECETTE : la barre horizontale passe à 1320 px, pas à 920.
   Mesurée dans le navigateur, elle occupe au minimum 1294 px : marge (2 × 52)
   + marque (152) + les cinq liens (457) + leurs quatre écarts (4 × 32) + le
   lien de compte (97) + le bouton « Rejoindre » (138). En dessous elle
   débordait sur la droite sans que rien ne le montre, l'en-tête étant en
   position fixe — le défaut existait déjà avant le lien de compte, qui n'a
   fait que l'aggraver. 1320 px est donc une valeur mesurée, pas un des quatre
   points de rupture du projet ; en dessous, le menu déroulant prend le relais.
   Pour récupérer la barre sur un portable 1280, il faudrait raccourcir les
   libellés du menu ou en retirer un. */
@media (min-width: 1320px) {
	.enf-nav {
		flex: 1;
		justify-content: flex-end;
	}
}

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

/* Relevé : Inter Medium 16 / 24 / −1px / #64748B, sans remplissage vertical. */
.enf-nav__list a,
.enf-nav__placeholder > span {
	position: relative;
	display: inline-block;
	color: var(--enf-muted);
	font-family: var(--enf-font);
	font-size: var(--enf-fs-nav);
	font-weight: var(--enf-fw-medium);
	line-height: 1.5;
	letter-spacing: var(--enf-ls-ui);
	text-decoration: none;
	white-space: nowrap;
}

/* La cible tactile fait 44 px sans modifier les métriques du texte. */
.enf-nav__list a::before {
	content: "";
	position: absolute;
	inset: -10px -8px;
}

/* Survol et focus clavier : le lien passe en orange et le filet de l'item
   actif se dessine de gauche à droite. Rien ne bouge — le filet est en
   position absolue, il ne prend pas de place dans le flux.
   La maquette ne décrit aucun état de survol (c'est une image fixe) :
   ce comportement reprend le traitement de l'item actif, en plus léger. */
.enf-nav__list a::after {
	content: "";
	display: none;
	position: absolute;
	right: 0;
	bottom: -6px;
	left: 0;
	height: 2px;
	background-color: var(--enf-orange);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--enf-transition);
}

.enf-nav__list a:hover,
.enf-nav__list a:focus-visible {
	color: var(--enf-orange);
}

.enf-nav__list a:hover::after,
.enf-nav__list a:focus-visible::after {
	transform: scaleX(1);
}

/* L'item actif porte déjà son propre filet : pas de doublon. */
.enf-nav__list .current-menu-item > a::after,
.enf-nav__list .current-menu-ancestor > a::after,
.enf-nav__list .current_page_item > a::after,
.enf-nav__list .current_page_parent > a::after,
.enf-nav__list .is-current > a::after {
	content: none;
}

/* Item actif — relevé : Plus Jakarta Sans Bold 14 / 16,8 / +0,7px,
   remplissage bas 4, filet bas 2 px orange. Ce changement de police et de
   corps vient de l'export HTML ; il est reproduit tel quel. */
.enf-nav__list .current-menu-item > a,
.enf-nav__list .current-menu-ancestor > a,
.enf-nav__list .current_page_item > a,
.enf-nav__list .current_page_parent > a,
.enf-nav__list .is-current > a {
	padding-bottom: var(--enf-space-1);
	border-bottom: 2px solid var(--enf-orange);
	color: var(--enf-orange);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-nav-active);
	font-weight: var(--enf-fw-bold);
	line-height: 1.2;
	letter-spacing: var(--enf-ls-nav-active);
}

/* Élément neutre affiché tant qu'aucun menu n'est rattaché à l'emplacement. */
.enf-nav__placeholder > span {
	border-bottom: 1px dashed var(--enf-line);
	cursor: help;
}

.enf-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	color: var(--enf-ink);
}

.enf-nav__toggle:hover {
	border-color: var(--enf-orange);
	color: var(--enf-orange);
}

.enf-nav__toggle-icon,
.enf-nav__toggle-icon::before,
.enf-nav__toggle-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background-color: currentColor;
	border-radius: 2px;
	transition: transform var(--enf-transition), opacity var(--enf-transition);
}

.enf-nav__toggle-icon::before,
.enf-nav__toggle-icon::after {
	content: "";
	position: relative;
}

.enf-nav__toggle-icon::before {
	top: -6px;
}

.enf-nav__toggle-icon::after {
	top: 4px;
}

.enf-nav__toggle[aria-expanded="true"] .enf-nav__toggle-icon {
	background-color: transparent;
}

.enf-nav__toggle[aria-expanded="true"] .enf-nav__toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.enf-nav__toggle[aria-expanded="true"] .enf-nav__toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Panneau mobile. */
.enf-nav__panel {
	position: fixed;
	inset: var(--enf-header-h) 0 auto;
	z-index: 99;
	max-height: calc(100dvh - var(--enf-header-h));
	padding: var(--enf-space-5) var(--enf-header-x) var(--enf-space-8);
	overflow-y: auto;
	background-color: var(--enf-bg);
	border-bottom: 1px solid var(--enf-line);
	box-shadow: var(--enf-shadow-header);
}

/* Le rustine .enf-nav__panel[hidden] a été retirée : la règle générale
   [hidden] de base.css couvre désormais tous les composants. */

.enf-nav__panel .enf-nav__list {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-2);
	margin-bottom: var(--enf-space-5);
}

.enf-nav__panel .enf-nav__list a {
	display: block;
	padding: var(--enf-space-3) 0;
	font-size: 1.125rem;
	border-bottom: 1px solid var(--enf-line);
}

/* Dans le panneau mobile, le survol et l'appui colorent la ligne entière. */
.enf-nav__panel .enf-nav__list a:hover,
.enf-nav__panel .enf-nav__list a:focus-visible,
.enf-nav__panel .enf-nav__list a:active {
	border-bottom-color: var(--enf-orange);
	color: var(--enf-orange);
}

.enf-nav__panel .enf-btn {
	width: 100%;
}

@media (min-width: 1320px) {
	/* Le panneau disparaît en tant que boîte : ses enfants deviennent
	   directement des éléments flexibles de la nav. Un seul rendu du menu
	   dans le HTML, donc aucun identifiant dupliqué. */
	.enf-nav__panel {
		display: contents !important;
		position: static;
		padding: 0;
		overflow: visible;
		background: none;
		border: 0;
		box-shadow: none;
	}

	/* Relevé : écart de 80 px entre les liens. */
	.enf-nav__list {
		display: flex;
		align-items: center;
		gap: var(--enf-nav-gap);
	}

	/* Cette règle doit avoir la même spécificité que la règle mobile
	   « .enf-nav__panel .enf-nav__list », sinon l'écart de 8 px l'emporte. */
	.enf-nav__panel .enf-nav__list {
		flex-direction: row;
		gap: var(--enf-nav-gap);
		margin-bottom: 0;
	}

	.enf-nav__panel .enf-nav__list a {
		padding: 0;
		font-size: var(--enf-fs-nav);
		border-bottom: 0;
	}

	/* Le filet de survol ne sert que sur la barre horizontale. */
	.enf-nav__list a::after {
		display: block;
	}

	.enf-nav__panel .enf-nav__list .current-menu-item > a,
	.enf-nav__panel .enf-nav__list .current-menu-ancestor > a,
	.enf-nav__panel .enf-nav__list .current_page_item > a,
	.enf-nav__panel .enf-nav__list .current_page_parent > a,
	.enf-nav__panel .enf-nav__list .is-current > a {
		padding-bottom: var(--enf-space-1);
		border-bottom: 2px solid var(--enf-orange);
		font-size: var(--enf-fs-nav-active);
	}

	.enf-nav__panel .enf-btn {
		width: auto;
	}

	.enf-nav__toggle {
		display: none;
	}
}

/* Bloc de droite : le ou les liens de compte, puis le bouton « Rejoindre ».
   En colonne dans le panneau mobile, en ligne sur la barre. */
.enf-nav__cta {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
}

/* Relevé sur les liens du menu : même graisse, même couleur, même orange au
   survol — un lien de compte n'est pas un bouton. */
.enf-nav__compte {
	color: var(--enf-muted);
	font-family: var(--enf-font);
	font-size: var(--enf-fs-nav);
	font-weight: var(--enf-fw-medium);
	line-height: 1.5;
	letter-spacing: var(--enf-ls-ui);
	text-decoration: none;
	white-space: nowrap;
}

.enf-nav__compte:hover,
.enf-nav__compte:focus-visible {
	color: var(--enf-orange);
}

/* Dans le panneau mobile, la ligne entière est cliquable, comme les autres. */
@media (max-width: 1319px) {
	.enf-nav__compte {
		display: block;
		padding: var(--enf-space-3) 0;
		margin-bottom: var(--enf-space-2);
		font-size: 1.125rem;
		border-bottom: 1px solid var(--enf-line);
	}
}

@media (min-width: 1320px) {
	.enf-nav__cta {
		flex-direction: row;
		align-items: center;
		gap: var(--enf-space-5);
	}
}

/* --------------------------------------------------------------------------
   Pied de page
   --------------------------------------------------------------------------
   Structure reprise du site actuel : fond sombre, trois colonnes
   (Ressources · Communauté · Suivez-nous), puis une barre de mentions.
   -------------------------------------------------------------------------- */

.enf-site-footer {
	/* Aucun remplissage en tête : c'est la bande newsletter qui ouvre le pied
	   de page et qui porte son propre espacement. Cumuler les deux laissait
	   150 px de vide entre l'appel à l'action et le premier titre. */
	padding-top: 0;
	/* Un ton plus sombre que les sections navy, pour que le pied de page
	   se détache du bandeau d'appel à l'action qui le précède souvent. */
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark-muted);
}

.enf-site-footer__grid {
	padding-top: var(--enf-space-9);
	padding-bottom: var(--enf-space-10);
}

.enf-site-footer__title {
	margin: 0 0 var(--enf-space-5);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: 0;
}

.enf-site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-site-footer__list li + li {
	margin-top: var(--enf-space-3);
}

.enf-site-footer__list a {
	color: var(--enf-on-dark-muted);
	text-decoration: none;
}

.enf-site-footer__list a:hover,
.enf-site-footer__list a:focus-visible {
	color: var(--enf-orange-vif);
}

/* Lien « Devenir ambassadeur » ajouté sous la liste quand le menu ne le
   porte pas : même rythme et même couleur que les autres liens. */
.enf-site-footer__appel {
	margin: var(--enf-space-3) 0 0;
}

.enf-site-footer__appel a {
	color: var(--enf-on-dark-muted);
	text-decoration: none;
}

.enf-site-footer__appel a:hover,
.enf-site-footer__appel a:focus-visible {
	color: var(--enf-orange-vif);
}

/* --------------------------------------------------------------------------
   Réseaux sociaux
   Libellés en toutes lettres : les pictogrammes des plateformes sont des
   logos de marque, à intégrer via un jeu d'icônes sous licence.
   -------------------------------------------------------------------------- */

.enf-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2);
	margin: 0 0 var(--enf-space-6);
	padding: 0;
	list-style: none;
}

.enf-social a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 var(--enf-space-4);
	border: 1px solid var(--enf-glass-line);
	border-radius: var(--enf-radius-pill);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-medium);
	text-decoration: none;
	transition: background-color var(--enf-transition),
		border-color var(--enf-transition), color var(--enf-transition);
}

.enf-social a:hover,
.enf-social a:focus-visible {
	background-color: var(--enf-orange);
	border-color: var(--enf-orange);
	color: var(--enf-on-dark);
}

/* --------------------------------------------------------------------------
   Barre de mentions
   -------------------------------------------------------------------------- */

.enf-site-footer__bottom {
	border-top: 1px solid var(--enf-hairline-on-dark-strong);
}

.enf-site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enf-space-4);
	padding-block: var(--enf-space-5);
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-small);
}

.enf-site-footer__bottom-inner p {
	margin: 0;
	max-width: none;
}

/* Dans la barre basse, les mentions s'alignent horizontalement. */
.enf-site-footer__bottom-inner .enf-site-footer__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2) var(--enf-space-5);
}

.enf-site-footer__bottom-inner .enf-site-footer__list li + li {
	margin-top: 0;
}

.enf-site-footer__bottom-inner .enf-site-footer__list a {
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Bande newsletter
   --------------------------------------------------------------------------
   Elle ouvre le pied de page sur toute la largeur : le texte à gauche, la
   demande à droite. C'est le seul formulaire présent sur toutes les pages du
   site ; il mérite mieux qu'un tiers de colonne sous une liste de liens.
   -------------------------------------------------------------------------- */

.enf-newsletter {
	border-bottom: 1px solid var(--enf-hairline-on-dark-strong);
}

.enf-newsletter__inner {
	display: grid;
	gap: var(--enf-space-5);
	padding-block: var(--enf-space-9);
}

@media (min-width: 920px) {
	.enf-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 28rem);
		align-items: center;
		gap: var(--enf-space-9);
	}
}

.enf-newsletter__titre {
	margin: 0 0 var(--enf-space-2);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-h3);
	line-height: var(--enf-lh-heading);
}

.enf-newsletter__chapo {
	max-width: 46ch;
	margin: 0;
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-small);
}

.enf-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enf-space-3);
}

.enf-newsletter__field {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 44px;
	padding: 9px var(--enf-space-4);
	background-color: var(--enf-glass);
	border: 1px solid var(--enf-glass-line);
	border-radius: var(--enf-radius-sm);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-small);
}

.enf-newsletter__field::placeholder {
	color: var(--enf-on-dark-muted);
}

.enf-newsletter__field:focus-visible {
	border-color: var(--enf-orange-vif);
}

.enf-newsletter__submit {
	flex: none;
	min-height: 44px;
}

/* Sur petit écran, le champ et le bouton s'empilent en pleine largeur plutôt
   que de se partager une ligne de 300 px. */
@media (max-width: 559px) {
	.enf-newsletter__field,
	.enf-newsletter__submit {
		flex-basis: 100%;
		width: 100%;
	}

	.enf-newsletter__submit {
		justify-content: center;
	}
}

.enf-newsletter__note {
	margin: var(--enf-space-3) 0 0;
	max-width: 46ch;
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-small);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Formulaire de recherche
   -------------------------------------------------------------------------- */

.enf-search {
	display: flex;
	gap: var(--enf-space-3);
	max-width: 480px;
}

.enf-search__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px var(--enf-space-4);
	background-color: var(--enf-bg);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	color: var(--enf-ink);
}

.enf-search__field:focus-visible {
	border-color: var(--enf-blue);
}

/* --------------------------------------------------------------------------
   Contenu éditorial (pages et articles)
   -------------------------------------------------------------------------- */

.enf-prose {
	/* Un nom propre ou une adresse sans espace ne doit pas élargir la page :
	   sur un écran de 375 px, « PharmaCommerce » en fin de ligne suffisait à
	   faire apparaître une barre de défilement horizontale. */
	overflow-wrap: break-word;
}

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

.enf-prose h2 {
	margin-top: var(--enf-space-9);
}

.enf-prose h3 {
	margin-top: var(--enf-space-7);
}

.enf-prose ul,
.enf-prose ol {
	padding-left: var(--enf-space-5);
}

.enf-prose li + li {
	margin-top: var(--enf-space-2);
}

/* Contenus venus de l'ancien éditeur. Les légendes qu'il produit portent un
   style en ligne « width: 1024px » ; sans ce garde-fou, un article importé
   déborde de la page sur mobile et fait apparaître une barre de défilement
   horizontale. D'où le !important : on ne peut battre un style en ligne
   autrement, et retoucher onze articles à la main ne protégerait pas le
   douzième. */
.enf-prose img,
.enf-prose video,
.enf-prose iframe {
	max-width: 100%;
	height: auto;
}

.enf-prose figure,
.enf-prose .wp-caption {
	max-width: 100% !important;
	width: auto !important;
	margin-inline: 0;
}

.enf-prose figcaption,
.enf-prose .wp-caption-text {
	margin-top: var(--enf-space-2);
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
	line-height: var(--enf-lh-body);
}

/* Un tableau large défile dans son propre cadre plutôt que d'élargir la page. */
.enf-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.enf-prose img {
	border-radius: var(--enf-radius-sm);
}

/* Liste à coches du bloc « split ». */
.enf-checklist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-checklist li {
	position: relative;
	padding-left: var(--enf-space-7);
	color: var(--enf-body);
}

.enf-checklist li + li {
	margin-top: var(--enf-space-3);
}

.enf-checklist li::before {
	content: "";
	position: absolute;
	top: 0.32em;
	left: 0;
	width: 18px;
	height: 18px;
	background-color: var(--enf-orange-soft);
	border-radius: 50%;
}

.enf-checklist li::after {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 5px;
	width: 8px;
	height: 4px;
	border-left: 2px solid var(--enf-orange);
	border-bottom: 2px solid var(--enf-orange);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Page 404 et états vides
   -------------------------------------------------------------------------- */

.enf-empty {
	max-width: 560px;
	margin-inline: auto;
	padding-block: var(--enf-space-11);
	text-align: center;
}

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

.enf-empty .enf-search {
	margin-inline: auto;
}

/* ==========================================================================
   Marqueurs « à compléter »
   --------------------------------------------------------------------------
   Servent partout : blocs, cartes, fiches. Une donnée manquante se voit,
   elle n'est jamais remplacée par une valeur plausible.
   ========================================================================== */

.enf-todo {
	color: var(--enf-muted);
	font-style: italic;
	font-weight: var(--enf-fw-regular);
}

.enf-todo--note {
	margin: 0;
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Carte d'événement (liste, grille, bloc)
   -------------------------------------------------------------------------- */

.enf-card__sep {
	margin-inline: var(--enf-space-2);
}

.enf-card__meta--count {
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* Un événement passé reste lisible, mais recule d'un cran. */
.enf-card--past .enf-card__media img {
	filter: grayscale(1);
	opacity: 0.75;
}

.enf-card--past:hover .enf-card__media img {
	filter: none;
	opacity: 1;
}

/* Pastille « Complet » posée sur le visuel, à l'opposé du badge de date. */
.enf-pill--complet {
	position: absolute;
	top: var(--enf-space-4);
	right: var(--enf-space-4);
	background-color: var(--enf-navy);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-label);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

/* Liste vide affichée à l'intérieur d'une section (bloc ou gabarit). */
.enf-empty__inline {
	max-width: none; /* neutralise la mesure de lecture de 70ch des paragraphes */
	margin: 0;
	padding: var(--enf-space-7);
	border: 1px dashed var(--enf-line);
	border-radius: var(--enf-radius);
	color: var(--enf-muted);
	text-align: center;
}

/* En-tête de section avec un lien aligné à droite (agenda, listes). */
.enf-events__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--enf-space-4);
	max-width: none;
	text-align: left;
}

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

/* ==========================================================================
   Fil d'Ariane
   --------------------------------------------------------------------------
   Posé juste sous l'en-tête, sur fond blanc, discret : il sert à se repérer,
   pas à attirer l'œil. Il défile horizontalement sur mobile plutôt que de
   passer à la ligne ou de déborder.
   ========================================================================== */

.enf-breadcrumb {
	padding-block: var(--enf-space-4);
	background-color: var(--enf-bg);
	font-size: var(--enf-fs-small);
}

.enf-breadcrumb__list {
	display: flex;
	align-items: center;
	gap: var(--enf-space-2);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	white-space: nowrap;
}

.enf-breadcrumb__list::-webkit-scrollbar {
	display: none;
}

.enf-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: var(--enf-space-2);
}

.enf-breadcrumb__item a {
	color: var(--enf-muted);
	text-decoration: none;
}

.enf-breadcrumb__item a:hover,
.enf-breadcrumb__item a:focus-visible {
	color: var(--enf-orange);
	text-decoration: underline;
}

.enf-breadcrumb__item [aria-current="page"] {
	color: var(--enf-body);
	font-weight: var(--enf-fw-medium);
}

/* Le filet #E2E8F0 tombait à 1,23:1 : invisible. Le gris secondaire tient
   4,76:1 tout en restant discret. */
.enf-breadcrumb__sep {
	color: var(--enf-muted);
}

/* Étiquette d'état, posée en ligne dans une méta de carte. */
.enf-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-orange-soft-solid);
	color: var(--enf-orange);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Liste d'étiquettes de domaine
   Servent à la veille et à la fiche d'une série : elles vivent donc ici, et
   non dans la feuille de la veille, qui ne se charge pas sur les séries.
   -------------------------------------------------------------------------- */

.enf-veille-domaines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Le fond orangé pâle de .enf-tag se distingue mal d'une section claire, et le
   soulignement du lien fait lire une étiquette comme un lien de texte. Un
   liseré la referme, et le soulignement revient au survol. */
.enf-veille-domaines .enf-tag {
	border: 1px solid currentcolor;
	text-decoration: none;
}

.enf-veille-domaines a.enf-tag:hover,
.enf-veille-domaines a.enf-tag:focus-visible {
	background-color: var(--enf-orange);
	border-color: var(--enf-orange);
	color: var(--enf-on-dark);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Filtres — pastilles
   Servent à l'archive des événements et au bloc Membres : elles vivent donc
   ici, et non dans la feuille des gabarits de contenu.
   Même géométrie que la pilule du hero : rayon plein, 44 px de zone tactile.
   -------------------------------------------------------------------------- */

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

.enf-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--enf-transition), border-color var(--enf-transition), color var(--enf-transition);
}

.enf-chip:hover,
.enf-chip:focus-visible {
	border-color: var(--enf-orange);
	color: var(--enf-orange);
}

.enf-chip.is-current {
	border-color: var(--enf-orange);
	background-color: var(--enf-orange);
	color: #fff;
}

/* Retour et consentement de la lettre du pied de page. Les couleurs de message
   sont celles des formulaires de formation : un seul vocabulaire visuel pour
   « c'est parti » et « il manque quelque chose », où qu'on se trouve. */
.enf-newsletter__retour {
	margin: 0 0 var(--enf-space-3);
	padding: var(--enf-space-3) var(--enf-space-4);
	border-left: 3px solid;
	border-radius: var(--enf-radius-sm);
	font-size: var(--enf-fs-small);
}

.enf-newsletter__retour--succes {
	border-color: #86efac;
	background-color: rgba(134, 239, 172, 0.12);
	color: #dcfce7;
}

.enf-newsletter__retour--erreur {
	border-color: #fca5a5;
	background-color: rgba(252, 165, 165, 0.12);
	color: #fee2e2;
}

.enf-newsletter__consentement {
	display: flex;
	align-items: flex-start;
	gap: var(--enf-space-2);
	width: 100%;
	margin: var(--enf-space-3) 0 0;
}

.enf-newsletter__consentement input {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--enf-orange-vif);
}

.enf-newsletter__consentement label {
	margin: 0;
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-small);
}

.enf-newsletter__consentement a {
	color: var(--enf-on-dark);
}