/* ==========================================================================
   ENF — Gabarits de contenu (événements, villes)
   --------------------------------------------------------------------------
   Chargée uniquement sur les archives et les fiches des types de contenu,
   jamais sur la page d'accueil ni sur les pages classiques.
   ========================================================================== */

/* --------------------------------------------------------------------------
   En-tête d'archive
   -------------------------------------------------------------------------- */

.enf-archive__head h1 {
	margin: 0;
}

/* Le chapô est centré par défaut dans le reste du thème ; dans un en-tête
   d'archive il suit le titre, à gauche. */
.enf-archive__head .enf-section__lede {
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Fiche d'événement — informations pratiques
   -------------------------------------------------------------------------- */

.enf-evenement__resume {
	margin: 0;
	color: var(--enf-body);
	font-size: 1.125rem;
}

.enf-card--infos {
	gap: var(--enf-space-5);
}

.enf-infos {
	margin: 0;
}

.enf-infos__row + .enf-infos__row {
	margin-top: var(--enf-space-4);
	padding-top: var(--enf-space-4);
	border-top: 1px solid var(--enf-line-soft);
}

.enf-infos dt {
	margin: 0 0 var(--enf-space-1);
	color: var(--enf-muted);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

.enf-infos dd {
	margin: 0;
	color: var(--enf-body);
	line-height: var(--enf-lh-body);
}

.enf-notice {
	margin: 0;
	padding: var(--enf-space-3) var(--enf-space-4);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg-slate);
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

.enf-notice--full {
	background-color: var(--enf-orange-soft);
	color: var(--enf-body);
}

/* --------------------------------------------------------------------------
   Personnes — intervenants et référents
   -------------------------------------------------------------------------- */

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

.enf-people > li + li {
	margin-top: var(--enf-space-4);
}

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

.enf-person__photo {
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: var(--enf-radius-pill);
	object-fit: cover;
}

.enf-person__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.enf-person__name {
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-weight: var(--enf-fw-semibold);
}

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

.enf-people--grid {
	display: grid;
	gap: var(--enf-grid-gap);
}

.enf-people--grid > li + li {
	margin-top: 0;
}

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

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

/* --------------------------------------------------------------------------
   Divers
   -------------------------------------------------------------------------- */

.enf-ville__depuis {
	margin: 0;
	color: var(--enf-muted);
}

/* La colonne d'informations suit la lecture sur grand écran seulement. */
@media (min-width: 920px) {
	.enf-card--infos {
		position: sticky;
		top: calc(var(--enf-header-h) + var(--enf-space-5));
	}
}

/* ==========================================================================
   Annuaire des incubateurs
   --------------------------------------------------------------------------
   Barre de recherche et filtre par pays sur la page d'une zone, puis la fiche.
   Les puces de filtre (.enf-chip) vivent dans components.css : elles servent
   aussi ailleurs.
   ========================================================================== */

.enf-annuaire__barre {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-4);
	margin-bottom: var(--enf-space-4);
}

.enf-recherche {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2);
}

.enf-recherche input[type="search"] {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 10px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font: inherit;
}

.enf-recherche input[type="search"]:focus-visible {
	border-color: var(--enf-orange);
	outline: 2px solid var(--enf-orange);
	outline-offset: 1px;
}

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

.enf-chip__nombre {
	margin-left: 6px;
	color: var(--enf-muted);
	font-variant-numeric: tabular-nums;
}

.enf-chip.is-current .enf-chip__nombre {
	color: inherit;
}

.enf-card--incubateur .enf-card__meta--specs {
	color: var(--enf-muted);
	font-style: italic;
}

/* Le lien sortant d'une fiche : le nom de domaine suffit à l'œil, la mention
   complète reste lisible au lecteur d'écran. */
.enf-lien-externe {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	color: var(--enf-orange);
	font-size: var(--enf-fs-small);
	overflow-wrap: anywhere;
}

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

.enf-lien-externe::before {
	content: "↗";
	font-size: 0.9em;
	text-decoration: none;
}

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

.enf-incubateur__specs,
.enf-incubateur__source {
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

@media (min-width: 920px) {
	.enf-annuaire__barre {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.enf-recherche {
		flex: 0 1 24rem;
	}
}

/* --------------------------------------------------------------------------
   FAQ — page d'une thématique
   -------------------------------------------------------------------------- */

.enf-faq--archive .enf-recherche {
	margin-bottom: var(--enf-space-4);
}

/* Le lien d'ancre d'une question : discret, il n'entre pas en concurrence
   avec la réponse, mais reste atteignable au clavier. */
.enf-faq__ancre {
	margin-top: var(--enf-space-3);
	font-size: var(--enf-fs-small);
}

.enf-faq__ancre a {
	color: var(--enf-muted);
}

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

.enf-faq__retour {
	margin-top: var(--enf-space-8);
}

/* Une question ciblée par une ancre : on la repère sans l'entourer de couleur,
   qui serait le seul indice pour qui ne distingue pas les teintes. */
.enf-faq__item:target {
	outline: 2px solid var(--enf-orange);
	outline-offset: 4px;
}

/* ==========================================================================
   Formations — fiche et formulaires
   ========================================================================== */

/* Le chapô d'une fiche est aligné à gauche comme son titre : la règle
   générique le centre, ce qui décale le bloc de texte sous un h1 à gauche. */
.enf-formation .enf-section__lede {
	margin-inline: 0;
}

.enf-formation__resume {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--enf-space-2) var(--enf-space-5);
	margin: 0;
}

.enf-formation__resume .enf-formation__tarif {
	margin: 0;
	font-size: var(--enf-fs-h3);
}

.enf-formation__rythme,
.enf-formation__public {
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* La date de la prochaine session : c'est l'information qui décide, elle se
   lit donc comme le tarif et non comme une mention secondaire. */
.enf-formation__date {
	display: inline-flex;
	align-items: baseline;
	gap: var(--enf-space-2);
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
}

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

.enf-formation__fuseau {
	color: var(--enf-muted);
	font-family: var(--enf-font);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-medium);
}

/* Le programme : un tableau de modules ou de séquences. Sur mobile, il défile
   dans son cadre plutôt que d'écraser ses colonnes ou de déborder la page. */
.enf-formation__programme {
	overflow-x: auto;
	margin: var(--enf-space-4) 0 var(--enf-space-6);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	-webkit-overflow-scrolling: touch;
}

.enf-formation__programme table {
	display: table; /* .enf-prose table le passe en bloc ; le cadre défile déjà. */
	width: 100%;
	min-width: 32rem;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: var(--enf-fs-small);
}

.enf-formation__programme th,
.enf-formation__programme td {
	padding: var(--enf-space-3) var(--enf-space-4);
	border: 0;
	border-bottom: 1px solid var(--enf-line);
	text-align: left;
	vertical-align: top;
}

.enf-formation__programme thead th {
	background-color: var(--enf-bg-slate);
	color: var(--enf-ink);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-bold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

.enf-formation__programme tbody th {
	width: 7.5rem;
	color: var(--enf-orange);
	font-weight: var(--enf-fw-bold);
	white-space: nowrap;
}

.enf-formation__programme tbody tr:last-child > * {
	border-bottom: 0;
}

.enf-formation__programme td:last-child {
	color: var(--enf-ink);
}

/* --------------------------------------------------------------------------
   Formulaires de formation
   -------------------------------------------------------------------------- */

.enf-form {
	max-width: 40rem;
}

.enf-form__titre {
	margin: 0;
	font-size: var(--enf-fs-h3);
}

.enf-form__chapo {
	margin: var(--enf-space-2) 0 var(--enf-space-5);
	color: var(--enf-body);
}

.enf-form__form {
	margin: 0;
}

.enf-form__grille {
	display: grid;
	gap: var(--enf-space-4);
}

.enf-form__champ {
	margin: 0;
}

.enf-form__champ label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
	color: var(--enf-ink);
}

.enf-form__option {
	font-weight: 400;
	color: var(--enf-muted);
}

.enf-form__champ input[type="text"],
.enf-form__champ input[type="email"],
.enf-form__champ input[type="tel"],
.enf-form__champ textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font: inherit;
}

.enf-form__champ select {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font: inherit;
}

/* Une ligne d'aide sous un champ : plus petite, plus grise, jamais obligatoire à lire. */
.enf-form__aide {
	display: block;
	margin-top: 6px;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* Boutons radio : la question en légende, les réponses dessous, une par ligne. */
.enf-form__radios {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.enf-form__radios legend {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
	color: var(--enf-ink);
}

.enf-form__champ .enf-form__radio {
	display: flex;
	align-items: flex-start;
	gap: var(--enf-space-2);
	margin-bottom: 6px;
	font-weight: var(--enf-fw-regular);
	font-size: var(--enf-fs-body);
	color: var(--enf-body);
	cursor: pointer;
}

.enf-form__champ .enf-form__radio input {
	margin-top: 4px;
	accent-color: var(--enf-orange);
}

.enf-form__champ input:focus-visible,
.enf-form__champ select:focus-visible,
.enf-form__champ textarea:focus-visible {
	border-color: var(--enf-orange);
	outline: 2px solid var(--enf-orange);
	outline-offset: 1px;
}

/* Le consentement : la case et son intitulé sur la même ligne de base, avec
   une cible de clic qui couvre tout le texte. */
.enf-form__consentement {
	display: flex;
	align-items: flex-start;
	gap: var(--enf-space-3);
	margin-top: var(--enf-space-5);
}

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

.enf-form__consentement label {
	margin: 0;
	font-size: var(--enf-fs-small);
	font-weight: 400;
	color: var(--enf-body);
}

.enf-form__envoi {
	margin: var(--enf-space-5) 0 0;
}

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

/* Le pot de miel doit rester hors de l'écran sans être display:none : un
   robot ignore un champ masqué, il remplit un champ qu'il croit visible. */
.enf-form__retour {
	margin: 0 0 var(--enf-space-5);
	padding: var(--enf-space-4) var(--enf-space-5);
	border-left: 4px solid;
	border-radius: var(--enf-radius-sm);
}

.enf-form__retour:focus-visible {
	outline: 2px solid var(--enf-orange);
	outline-offset: 2px;
}

.enf-form__retour--succes {
	border-color: #15803d;
	background-color: #f0fdf4;
	color: #14532d;
}

.enf-form__retour--erreur {
	border-color: #b91c1c;
	background-color: #fef2f2;
	color: #7f1d1d;
}

/* Ni réussite ni erreur : la page de la charte ouverte sans lien, ou avec
   un lien déjà consommé. */
.enf-form__retour--info {
	border-color: #1d4ed8;
	background-color: #eff6ff;
	color: #1e3a8a;
}

.enf-charte__trace {
	display: block;
	margin: var(--enf-space-3) 0 var(--enf-space-5);
}

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

	.enf-form__champ--large {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   L'aimant : l'appel posé au bas des fiches de l'annuaire et de la FAQ
   --------------------------------------------------------------------------
   Une carte sombre, parce qu'elle doit se détacher d'une page de consultation
   sans lui voler la vedette : elle arrive après le contenu, pas avant.
   -------------------------------------------------------------------------- */

.enf-aimant-appel__carte {
	align-items: flex-start;
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--enf-space-8);
	background-color: var(--enf-navy-deep);
	border-color: var(--enf-hairline-on-dark-strong);
}

.enf-aimant-appel__sur {
	margin: 0;
	color: var(--enf-orange-vif);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

.enf-aimant-appel__texte {
	margin: 0;
	max-width: 46ch;
	color: var(--enf-on-dark-muted);
}

/* --------------------------------------------------------------------------
   Le formulaire de l'aimant
   --------------------------------------------------------------------------
   C'est la raison d'être de sa page, et la seule chose qu'on y demande : il
   prend la forme d'une carte posée sur la section, avec le filet et le rayon
   des autres cartes du site. Un formulaire nu, aligné à gauche sous le texte,
   se lit comme une formalité ; une carte se lit comme une porte.
   -------------------------------------------------------------------------- */

.enf-aimant__form {
	max-width: none;
	padding: var(--enf-space-7);
	background-color: var(--enf-bg);
	border: 1px solid var(--enf-line-soft);
	border-radius: var(--enf-radius);
	/* La même élévation que le survol des cartes : le formulaire est le point
	   d'arrivée de la page, il a le droit de se détacher un peu. */
	box-shadow: var(--enf-shadow-hover);
}

.enf-aimant__form .enf-form__titre {
	font-size: var(--enf-fs-h3);
	line-height: var(--enf-lh-heading);
}

.enf-aimant__form .enf-form__chapo {
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

/* Un seul champ par ligne : deux champs côte à côte dans une colonne de
   24 rem deviennent deux champs trop étroits. */
.enf-aimant__form .enf-form__grille {
	grid-template-columns: 1fr;
}

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

/* Sur la page de l'aimant, la carte se cale en haut de sa colonne et y reste
   pendant qu'on lit le sommaire — la demande ne disparaît pas au défilement. */
@media (min-width: 920px) {
	.enf-aimant__haut .enf-aimant__form {
		position: sticky;
		top: calc(var(--enf-header-h) + var(--enf-space-5));
	}
}

/* La page de l'aimant : le texte à gauche, la demande à droite, et rien
   d'autre au-dessus de la ligne de flottaison. */
.enf-aimant__haut {
	display: grid;
	gap: var(--enf-space-7);
}

/* Le chapô de section est centré par défaut — il est fait pour les en-têtes
   centrés. Dans une colonne alignée à gauche, sa marge automatique le décalait
   de 144 px et il flottait au milieu de nulle part. */
.enf-aimant__haut .enf-section__lede {
	margin-inline: 0;
}

/* Le document montré comme un livre : la couverture (première page du PDF),
   légèrement tournée, avec une tranche à gauche et une ombre portée. Au-dessus
   du texte sur écran étroit, à côté de lui quand la colonne le permet. */
.enf-aimant__presentation {
	display: grid;
	gap: var(--enf-space-6);
	align-items: center;
}

.enf-aimant__livre {
	width: 13rem;
	margin: var(--enf-space-2) 0 0;
	/* La rotation déborde un peu à droite : on se laisse la place. */
	padding-right: var(--enf-space-3);
}

.enf-aimant__couverture {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 724 / 1024;
	border-radius: 2px 8px 8px 2px;
	background-color: var(--enf-navy);
	/* Tranche à gauche (deux traits), pli de reliure, puis l'ombre au sol. */
	box-shadow:
		inset 4px 0 0 rgba(255, 255, 255, 0.12),
		inset 6px 0 0 rgba(0, 0, 0, 0.25),
		inset 12px 0 10px -8px rgba(0, 0, 0, 0.35),
		12px 18px 30px -12px rgba(16, 26, 51, 0.45),
		2px 4px 8px rgba(16, 26, 51, 0.18);
	transform: perspective(60rem) rotateY(-12deg);
	transform-origin: left center;
	object-fit: cover;
}

/* Sans image du PDF : un livre dessiné avec le titre, dans les couleurs du site. */
.enf-aimant__couverture--texte {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--enf-space-2);
	padding: var(--enf-space-5) var(--enf-space-4) var(--enf-space-5) var(--enf-space-5);
	color: var(--enf-on-dark);
	text-align: left;
}

.enf-aimant__couverture--texte span {
	color: var(--enf-orange);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.enf-aimant__couverture--texte strong {
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
	line-height: 1.25;
}

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

@media (prefers-reduced-motion: no-preference) {
	.enf-aimant__livre:hover .enf-aimant__couverture {
		transform: perspective(60rem) rotateY(-6deg);
		transition: transform 0.35s ease;
	}
}

@media (min-width: 1160px) {
	.enf-aimant__presentation {
		grid-template-columns: 15.5rem minmax(0, 1fr);
		gap: var(--enf-space-8);
	}

	.enf-aimant__livre {
		width: 15.5rem;
		margin-top: 0;
	}
}

/* Même cause, même remède sur les trois pages « Proposer » : le titre est à
   gauche, le chapô flottait à 112 px de lui. */
.enf-proposer .enf-section__lede {
	margin-inline: 0;
}

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

.enf-aimant__partie {
	gap: var(--enf-space-2);
}

.enf-aimant__lettre {
	margin: 0;
	color: var(--enf-orange);
	font-family: var(--enf-font-display);
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
}

.enf-aimant__partie-titre {
	margin: 0;
	color: var(--enf-ink);
	font-size: var(--enf-fs-h4);
	line-height: var(--enf-lh-heading);
}

.enf-aimant__nombre {
	margin: 0;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

/* --------------------------------------------------------------------------
   Rejoindre une communauté locale — bas des fiches de ville
   -------------------------------------------------------------------------- */

.enf-ville-rejoindre__grille {
	display: grid;
	gap: var(--enf-space-7);
	align-items: start;
}

.enf-ville-rejoindre__referent,
.enf-ville-rejoindre__mention {
	margin: 0;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

.enf-ville-rejoindre .enf-form {
	max-width: none;
	padding: var(--enf-space-6);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

/* --------------------------------------------------------------------------
   Page de contact
   --------------------------------------------------------------------------
   Quatre temps, chacun sa section et son fond, pour que la page se lise en
   blocs plutôt qu'en une longue colonne :
     en-tête (doux)   le titre, le délai, et l'e-mail et le téléphone en carte
                      sombre — la seule touche sombre de la page, elle attire
                      l'œil sur le contact direct ;
     01 (clair)       quatre cartes d'aiguillage ;
     02 (doux)        le formulaire, carte blanche en relief, et le siège ;
     03 (clair)       les villes, en cartes cliquables.
   -------------------------------------------------------------------------- */

.enf-contact__lede {
	margin-inline: 0;
	text-align: left;
}

/* ----- En-tête ----- */

.enf-contact__hero-grille {
	display: grid;
	gap: var(--enf-space-7);
	align-items: center;
}

.enf-contact__delai {
	display: inline-flex;
	align-items: center;
	gap: var(--enf-space-2);
	width: fit-content;
	margin: 0;
	padding: 6px var(--enf-space-4);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-bg);
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

/* Le point vert : « quelqu'un répond ». */
.enf-contact__pastille {
	width: 8px;
	height: 8px;
	border-radius: var(--enf-radius-pill);
	background-color: #15803d;
	box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.15);
}

.enf-contact__direct {
	padding: var(--enf-space-6);
	border-radius: var(--enf-radius);
	background-color: var(--enf-navy);
	color: var(--enf-on-dark);
}

.enf-contact__direct-titre {
	margin: 0 0 var(--enf-space-4);
	color: var(--enf-orange-vif);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-bold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

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

.enf-contact__canal {
	display: flex;
	align-items: center;
	gap: var(--enf-space-4);
	padding: var(--enf-space-4);
	border: 1px solid var(--enf-glass-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-glass);
	color: var(--enf-on-dark);
	text-decoration: none;
	transition: var(--enf-transition);
}

.enf-contact__canal:hover,
.enf-contact__canal:focus-visible {
	border-color: var(--enf-orange-vif);
	background-color: rgba(255, 255, 255, 0.14);
}

.enf-contact__canal:focus-visible {
	outline: 2px solid var(--enf-orange-vif);
	outline-offset: 2px;
}

.enf-contact__canal-icone {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-orange-vif);
	color: var(--enf-navy);
}

.enf-contact__canal-icone .enf-contact__svg {
	width: 22px;
	height: 22px;
}

.enf-contact__canal-type {
	display: block;
	color: var(--enf-on-dark-muted);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

/* Inter plutôt que la police des titres : ses chasses serrées collaient les
   groupes du numéro de téléphone, et l'adresse e-mail, trop large, se coupait
   sur sa dernière lettre. La coupure autorisée est juste après l'arobase. */
.enf-contact__canal-valeur {
	display: block;
	font-family: var(--enf-font);
	font-size: 1.0625rem;
	font-weight: var(--enf-fw-bold);
	letter-spacing: 0;
	line-height: 1.35;
}

/* Pictogrammes au trait : sans ces deux lignes, la règle générale des SVG
   les remplit et le trait disparaît dans la forme. */
.enf-contact__svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 3.25;
}

/* ----- 01 · Aiguillage ----- */

.enf-contact__route {
	gap: var(--enf-space-3);
	padding: var(--enf-space-6);
	border-color: var(--enf-line);
}

.enf-contact__route-icone {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: var(--enf-space-2);
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-orange-soft-solid);
	color: var(--enf-orange);
}

.enf-contact__route-icone .enf-contact__svg {
	width: 26px;
	height: 26px;
}

.enf-contact__route-titre {
	margin: 0;
	color: var(--enf-ink);
	font-size: var(--enf-fs-h4);
	line-height: var(--enf-lh-heading);
}

.enf-contact__route-texte {
	flex: 1;
	margin: 0;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
}

.enf-contact__route-liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2) var(--enf-space-4);
	margin: var(--enf-space-2) 0 0;
	padding: var(--enf-space-4) 0 0;
	border-top: 1px solid var(--enf-line);
	list-style: none;
}

.enf-contact__route-liens a {
	color: var(--enf-orange);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
	text-decoration: none;
}

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

/* ----- 02 · Le formulaire et le siège ----- */

.enf-contact__ecrire > .enf-container > .enf-label {
	margin-bottom: var(--enf-space-5);
}

.enf-contact__grille {
	display: grid;
	gap: var(--enf-space-6);
	align-items: start;
}

/* Le formulaire est la raison d'être de la page : carte blanche, en relief,
   posée sur le fond doux de sa section. */
.enf-contact__form .enf-form {
	max-width: none;
	padding: var(--enf-space-7);
	border: 1px solid var(--enf-line);
	border-top: 4px solid var(--enf-orange);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
	box-shadow: var(--enf-shadow-hover);
}

.enf-contact__aside {
	display: grid;
	gap: var(--enf-space-5);
}

.enf-contact__siege {
	gap: var(--enf-space-3);
	padding: var(--enf-space-6);
	border-color: var(--enf-line);
}

.enf-contact__siege:hover {
	box-shadow: none;
	transform: none;
}

.enf-contact__siege-titre {
	margin: 0;
	font-size: var(--enf-fs-h4);
}

.enf-contact__adresse {
	color: var(--enf-ink);
	font-style: normal;
	line-height: var(--enf-lh-body);
}

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

/* La carte vient sous l'adresse, dans la même carte. Tant qu'elle n'est pas
   chargée, sa hauteur suit son texte (sur mobile, un ratio fixe coupait le
   lien « Ouvrir dans Google Maps ») ; chargée, elle prend un format paysage. */
.enf-contact__siege .enf-carte {
	margin-top: var(--enf-space-3);
	aspect-ratio: auto;
}

.enf-contact__siege .enf-carte--chargee {
	aspect-ratio: 16 / 10;
}

.enf-contact__siege .enf-carte__voile {
	padding: var(--enf-space-5);
}

/* La carte, et son voile tant qu'on n'a pas demandé à la charger. */
.enf-carte {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
	aspect-ratio: 4 / 3;
}

.enf-carte__voile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--enf-space-2);
	height: 100%;
	padding: var(--enf-space-6);
	text-align: left;
}

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

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

.enf-carte__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enf-space-3) var(--enf-space-4);
	margin: var(--enf-space-3) 0 0;
}

.enf-carte__lien {
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

.enf-carte__cadre {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.enf-carte--chargee {
	background-color: var(--enf-bg);
}

/* ----- 03 · Les villes ----- */

.enf-contact__villes-titre {
	margin: 0 0 var(--enf-space-4);
	color: var(--enf-ink);
	font-size: var(--enf-fs-h4);
	line-height: var(--enf-lh-heading);
}

.enf-contact__villes + .enf-contact__villes-titre {
	margin-top: var(--enf-space-7);
}

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

.enf-contact__ville {
	display: flex;
	align-items: center;
	gap: var(--enf-space-5);
	height: 100%;
	padding: var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	text-decoration: none;
	transition: var(--enf-transition);
}

.enf-contact__ville:hover,
.enf-contact__ville:focus-visible {
	border-color: var(--enf-orange);
	box-shadow: var(--enf-shadow-hover);
	transform: translateY(-2px);
}

.enf-contact__ville:focus-visible,
.enf-contact__prochaine:focus-visible {
	outline: 2px solid var(--enf-orange);
	outline-offset: 2px;
}

.enf-contact__ville-photo {
	display: block;
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg-slate);
	object-fit: cover;
}

.enf-contact__ville-texte {
	display: grid;
	flex: 1;
	min-width: 0;
	gap: 2px;
}

.enf-contact__ville-nom {
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h3);
	font-weight: var(--enf-fw-bold);
	line-height: 1.2;
}

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

.enf-contact__ville-statut {
	margin-top: var(--enf-space-1);
	color: #15803d;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
}

.enf-contact__ville-action {
	flex: none;
	padding: 8px var(--enf-space-4);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-orange);
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
	white-space: nowrap;
}

/* Les villes en préparation : des pastilles, plus discrètes. */
.enf-contact__prochaines {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-contact__prochaine {
	display: inline-flex;
	align-items: baseline;
	gap: var(--enf-space-2);
	padding: 10px var(--enf-space-5);
	border: 1px dashed var(--enf-line);
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-bg);
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	text-decoration: none;
	transition: var(--enf-transition);
}

.enf-contact__prochaine-pays {
	color: var(--enf-muted);
	font-weight: 400;
}

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

@media (prefers-reduced-motion: reduce) {
	.enf-contact__ville:hover,
	.enf-contact__ville:focus-visible {
		transform: none;
	}
}

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

/* Sur mobile, le bouton « Écrire » passe sous le texte. */
@media (max-width: 559px) {
	.enf-contact__ville {
		flex-wrap: wrap;
	}

	.enf-contact__ville-photo {
		width: 64px;
		height: 64px;
	}

	.enf-contact__ville-action {
		flex-basis: 100%;
		text-align: center;
	}
}

@media (min-width: 920px) {

	.enf-ville-rejoindre__grille {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: var(--enf-space-9);
	}

	.enf-contact__hero-grille {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--enf-space-9);
	}

	.enf-contact__grille {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--enf-space-8);
	}

	/* Le siège suit le défilement du formulaire, plus long que lui. */
	.enf-contact__aside {
		position: sticky;
		top: calc(var(--enf-header-h, 72px) + var(--enf-space-5));
	}
}

/* --------------------------------------------------------------------------
   Articles et dossiers
   -------------------------------------------------------------------------- */

.enf-article__categorie {
	margin: 0;
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-label);
	font-weight: var(--enf-fw-bold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.enf-article__categorie a {
	color: var(--enf-orange);
	text-decoration: none;
}

.enf-article__categorie a:hover,
.enf-article__categorie a:focus-visible {
	text-decoration: underline;
}

.enf-article__chapo {
	margin-inline: 0;
	text-align: left;
}

.enf-article__reperes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-2);
	margin: 0;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* Le pas suivant du dossier, en bas de chapitre. */
.enf-article__suite-titre {
	margin: 0 0 var(--enf-space-5);
	font-size: var(--enf-fs-h3);
}

.enf-article__suite-grille {
	display: grid;
	gap: var(--enf-space-4);
	margin-bottom: var(--enf-space-5);
}

.enf-article__etape {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--enf-space-5);
	text-decoration: none;
}

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

.enf-article__etape-label {
	color: var(--enf-muted);
	font-size: 0.6875rem;
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-label);
	text-transform: uppercase;
}

.enf-article__etape-titre {
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-weight: var(--enf-fw-bold);
	line-height: var(--enf-lh-heading);
}

.enf-article__etape--suivant {
	text-align: right;
}

/* Le sommaire d'un dossier : une liste numérotée, pas une grille de cartes.
   Neuf chapitres à lire dans l'ordre se lisent comme un sommaire de livre. */
.enf-dossier {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--enf-line);
}

.enf-dossier__item {
	border-bottom: 1px solid var(--enf-line);
}

.enf-dossier__lien {
	display: grid;
	grid-template-columns: 3rem minmax(0, 1fr);
	gap: var(--enf-space-4);
	align-items: start;
	padding: var(--enf-space-5) var(--enf-space-2);
	text-decoration: none;
	transition: var(--enf-transition);
}

.enf-dossier__lien:hover,
.enf-dossier__lien:focus-visible {
	background-color: var(--enf-bg-soft);
}

.enf-dossier__numero {
	font-family: var(--enf-font-display);
	font-size: 1.75rem;
	font-weight: var(--enf-fw-bold);
	line-height: 1;
	color: var(--enf-orange);
}

.enf-dossier__texte {
	display: block;
}

.enf-dossier__titre {
	display: block;
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
	line-height: var(--enf-lh-heading);
}

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

.enf-dossier__extrait {
	display: block;
	margin-top: 6px;
	max-width: 68ch;
	color: var(--enf-body);
	font-size: var(--enf-fs-small);
	line-height: var(--enf-lh-body);
}

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

@media (min-width: 768px) {

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

	.enf-dossier__lien {
		grid-template-columns: 4rem minmax(0, 1fr);
		padding-inline: var(--enf-space-4);
	}

	.enf-dossier__numero {
		font-size: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Mon abonnement
   --------------------------------------------------------------------------
   Une carte sobre : c'est une page de gestion, pas une page de vente.
   -------------------------------------------------------------------------- */

.enf-abonnement {
	margin-top: var(--enf-space-7);
	padding: var(--enf-space-7);
}

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

.enf-abonnement__etat {
	font-size: var(--enf-fs-h4);
	color: var(--enf-ink);
}

.enf-abonnement__note {
	padding-top: var(--enf-space-5);
	border-top: 1px solid var(--enf-line);
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Ma fiche — la fiche du membre, remplie par lui
   --------------------------------------------------------------------------
   Une carte comme celle de la connexion, plus large : le formulaire a deux
   colonnes. Les champs reprennent les règles des formulaires ci-dessus ; on
   ajoute seulement ce qu'ils n'avaient pas — liste déroulante, adresse web,
   fichier — et le portrait rond, le même que sur la page Équipe.
   -------------------------------------------------------------------------- */

.enf-fiche__carte {
	max-width: 44rem;
	margin-inline: auto;
	padding: var(--enf-space-7);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-fiche__carte h1 {
	margin: 0 0 var(--enf-space-5);
	font-size: var(--enf-fs-h3);
}

.enf-fiche__carte .enf-prose {
	margin-bottom: var(--enf-space-6);
}

.enf-form--fiche {
	max-width: none;
}

.enf-fiche__groupe {
	margin: 0 0 var(--enf-space-6);
	padding: 0;
	border: 0;
	min-width: 0;
}

.enf-fiche__groupe legend {
	margin-bottom: var(--enf-space-4);
	padding: 0;
	color: var(--enf-ink);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h4);
	font-weight: var(--enf-fw-bold);
}

.enf-fiche__note {
	margin: calc(-1 * var(--enf-space-2)) 0 var(--enf-space-4);
}

/* Le portrait et son champ côte à côte ; l'un sous l'autre sur petit écran. */
.enf-fiche__portrait {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enf-space-5);
}

.enf-fiche__portrait .enf-form__champ {
	flex: 1 1 16rem;
}

.enf-fiche__photo {
	flex: none;
	width: 128px;
	height: 128px;
	border-radius: var(--enf-radius-pill);
	object-fit: cover;
	box-shadow: 0 0 0 4px var(--enf-bg), 0 0 0 6px var(--enf-bg-slate);
}

.enf-fiche__photo--vide {
	display: block;
	background-color: var(--enf-bg-slate);
}

.enf-form__champ select,
.enf-form__champ input[type="url"] {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg);
	color: var(--enf-body);
	font: inherit;
}

.enf-form__champ select:focus-visible,
.enf-form__champ input[type="url"]:focus-visible {
	border-color: var(--enf-orange);
	outline: 2px solid var(--enf-orange);
	outline-offset: 1px;
}

.enf-form__champ input[type="file"] {
	width: 100%;
	padding: 8px 0;
	color: var(--enf-body);
	font: inherit;
	font-size: var(--enf-fs-small);
}

.enf-form__champ input[type="file"]::file-selector-button {
	margin-right: var(--enf-space-3);
	padding: 8px 14px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-bg-slate);
	color: var(--enf-ink);
	font: inherit;
	font-weight: var(--enf-fw-bold);
	cursor: pointer;
}

.enf-form__champ input[type="file"]:focus-visible {
	outline: 2px solid var(--enf-orange);
	outline-offset: 2px;
}

.enf-form__champ .enf-form__mention {
	display: block;
}

/* --------------------------------------------------------------------------
   Devenir ambassadeur, charte des ambassadeurs
   -------------------------------------------------------------------------- */

/* En-tête aligné à gauche, comme Contact et Proposer : le chapô n'est pas
   centré dans la colonne étroite. */
.enf-ambassadeur .enf-section__lede,
.enf-charte .enf-section__lede {
	margin-inline: 0;
}

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

/* --------------------------------------------------------------------------
   Portrait : la page de réponse
   -------------------------------------------------------------------------- */

.enf-portrait-repondre .enf-section__lede {
	margin-inline: 0;
}

.enf-portrait__groupe {
	margin: var(--enf-space-6) 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.enf-portrait__legende {
	margin: 0 0 var(--enf-space-4);
	padding: 0;
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-h3);
	font-weight: var(--enf-fw-semibold);
	color: var(--enf-blue);
}

/* La question est l'étiquette ; l'aide se lit avant de répondre, d'où sa
   place entre la question et la zone de texte. */
.enf-portrait__question + .enf-portrait__question {
	margin-top: var(--enf-space-5);
}

.enf-portrait__question label {
	display: flex;
	gap: var(--enf-space-3);
	align-items: baseline;
	font-size: var(--enf-fs-body);
}

.enf-portrait__numero {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--enf-blue);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-bold);
}

.enf-portrait__aide {
	display: block;
	margin: var(--enf-space-1) 0 var(--enf-space-3) calc(28px + var(--enf-space-3));
}

.enf-portrait__question textarea {
	min-height: 11rem;
}

.enf-portrait__mots {
	display: block;
	text-align: right;
}

.enf-portrait__envoi {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enf-space-3);
}

.enf-form__champ input[type="file"] + input[type="file"] {
	border-top: 1px solid var(--enf-line);
}