/**
 * Catalogue et fiches, côté visiteur.
 *
 * Cette feuille ne décide d'aucune couleur, d'aucune police et d'aucun rayon.
 * Elle ne pose que de la structure, et lit l'apparence dans les variables que
 * publie ET Astra sur `:root` — c'est là que vivent les réglages du site.
 *
 * Chaque jeton suit la même chaîne : la variable d'ET Astra d'abord, celle du
 * thème enfant ensuite, et seulement en dernier recours une valeur littérale
 * neutre qui tienne aussi bien sur fond clair que sur fond sombre. Un catalogue
 * ne doit pas arriver avec ses propres couleurs sur un site qui a les siennes.
 *
 * Les deux familles de noms coexistent parce que les deux sources existent :
 * ET Astra émet `--wia-orange` et `--wia-txt`, le thème enfant `--wia-accent`
 * et `--wia-ink`. On lit les deux plutôt que d'en imposer une.
 */

.etf-catalogue,
.etf-fiche,
.etf-form,
.etf-hero,
.etf-widget,
.etf-sessions-liste {
	--etf-accent: var(--wia-orange, var(--wia-accent, #ff8800));
	--etf-accent-doux: rgba(var(--wia-accent-rgb, 255, 136, 0), .14);

	/*
	 * L'encre et le fond ne sont plus lus dans les jetons du thème.
	 *
	 * `--wia-surface` désigne la carte d'une ambiance sombre : sur une
	 * ambiance claire, il reste sombre et produisait un panneau noir posé sur
	 * une page blanche. Le texte, lui, était bon — il vient de la page.
	 *
	 * On repart donc de ce qui est toujours juste : la couleur héritée du
	 * texte, et le fond de la page. Les gris se déduisent de l'encre, à faible
	 * opacité : ils suivent l'ambiance sans avoir à la connaître.
	 */
	--etf-encre: inherit;
	--etf-fond: transparent;
	--etf-muet: var(--wia-muted, color-mix(in srgb, currentColor 62%, transparent));
	--etf-trait: var(--wia-line, color-mix(in srgb, currentColor 20%, transparent));
	--etf-doux: rgba(128, 128, 128, .09);
	--etf-doux: color-mix(in srgb, currentColor 5%, transparent);

	/*
	 * Le texte posé sur l'accent : blanc sur un accent assombri.
	 *
	 * `--wia-on-accent` convient à un bouton, où la surface est petite et le
	 * calcul d'ET Astra suffit. Sur un bandeau plein écran il donnait un titre
	 * sombre sur un vert moyen — lisible au sens strict, illisible en pratique.
	 * On assombrit donc l'accent et on écrit en blanc : le contraste ne dépend
	 * plus de la teinte choisie.
	 */
	--etf-sur-accent: #fff;

	/*
	 * Repli d'abord, `color-mix` ensuite : sans cette paire, un navigateur qui
	 * ignore la fonction se retrouvait avec un bandeau sans fond et un titre
	 * blanc sur blanc. La première déclaration tient toujours.
	 */
	--etf-accent-fonce: var(--wia-dark, #14100e);
	--etf-accent-fonce: color-mix(in srgb, var(--etf-accent) 76%, #000);

	--etf-rayon: var(--wia-radius, 6px);
	--etf-rayon-bouton: var(--wia-btn-radius, var(--etf-rayon));
	--etf-alerte: var(--wia-error, #e2564d);
}

/* ─────────── Filtres ─────────── */

.etf-filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.etf-filtres__champ {
	margin: 0;
	flex: 1 1 170px;
}

.etf-filtres__champ--recherche {
	flex: 2 1 260px;
}

.etf-filtres__champ--reset {
	flex: 0 0 auto;
}

.etf-filtres input[type="search"],
.etf-filtres select {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: .94rem;
	color: var(--etf-encre);
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

.etf-filtres input[type="search"]:focus,
.etf-filtres select:focus {
	outline: 2px solid var(--etf-accent);
	outline-offset: 1px;
}

.etf-reset {
	padding: 10px 14px;
	font: inherit;
	font-size: .9rem;
	color: var(--etf-muet);
	cursor: pointer;
	background: none;
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

.etf-reset:hover {
	color: var(--etf-accent);
	border-color: var(--etf-accent);
}

/* ─────────── Grille du catalogue ─────────── */

.etf-catalogue.is-chargement .etf-catalogue__resultats {
	opacity: .45;
	transition: opacity .15s ease;
}

.etf-grille {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: 22px;
}

.etf-carte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

.etf-carte__visuel {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--etf-doux);
}

.etf-carte__visuel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.etf-carte__corps {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px 20px;
}

.etf-carte__categorie {
	margin: 0;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--etf-accent);
}

.etf-carte__titre {
	margin: 0;
	font-size: 1.06rem;
	line-height: 1.3;
	text-wrap: balance;
}

.etf-carte__titre a {
	color: var(--etf-encre);
	text-decoration: none;
}

.etf-carte__titre a:hover {
	color: var(--etf-accent);
}

.etf-carte__extrait {
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	color: var(--etf-muet);
}

.etf-carte__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.etf-carte__meta li {
	padding: 3px 9px;
	font-size: .76rem;
	color: var(--etf-muet);
	background: var(--etf-doux);
	border-radius: 3px;
}

.etf-carte__pied {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	align-items: baseline;
	justify-content: space-between;
	margin: auto 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--etf-trait);
}

.etf-carte__tarif {
	font-weight: 600;
	color: var(--etf-encre);
}

.etf-carte__session {
	font-size: .8rem;
	color: var(--etf-muet);
}

.etf-vide {
	padding: 32px;
	text-align: center;
	color: var(--etf-muet);
	background: var(--etf-doux);
	border-radius: var(--etf-rayon);
}

/* ─────────── Sessions ─────────── */

.etf-sessions-liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
	overflow: hidden;
}

.etf-session {
	display: grid;
	grid-template-columns: 1.4fr 1fr .8fr auto;
	gap: 8px 16px;
	align-items: center;
	padding: 13px 18px;
	border-bottom: 1px solid var(--etf-trait);
}

.etf-session:last-child {
	border-bottom: none;
}

.etf-session.is-complete {
	color: var(--etf-muet);
	background: var(--etf-doux);
}

.etf-session__date {
	font-weight: 600;
	color: var(--etf-encre);
}

.etf-session.is-complete .etf-session__date {
	color: inherit;
}

.etf-session__lieu,
.etf-session__mode {
	font-size: .88rem;
	color: var(--etf-muet);
}

.etf-session__etat {
	font-size: .78rem;
	padding: 3px 10px;
	border-radius: 11px;
	background: var(--etf-accent-doux);
	color: var(--etf-accent);
	white-space: nowrap;
}

.etf-session.is-complete .etf-session__etat {
	/* Teinte neutre tirée de la couleur du texte : elle suit le fond du site. */
	background: rgba(128, 128, 128, .16);
	color: var(--etf-muet);
}

.etf-session__note {
	grid-column: 1 / -1;
	font-size: .82rem;
	color: var(--etf-muet);
}

.etf-sessions__vide {
	padding: 18px;
	color: var(--etf-muet);
	background: var(--etf-doux);
	border-radius: var(--etf-rayon);
}

/* ─────────── Questions fréquentes ─────────── */

.etf-faq-item {
	padding: 12px 0;
	border-bottom: 1px solid var(--etf-trait);
}

.etf-faq-item summary {
	font-weight: 600;
	cursor: pointer;
	list-style-position: outside;
}

.etf-faq-item summary:focus-visible {
	outline: 2px solid var(--etf-accent);
	outline-offset: 2px;
}

.etf-faq-item > div {
	padding-top: 6px;
	color: var(--etf-muet);
}

/* ─────────── Formulaires ─────────── */

.etf-form__titre {
	margin: 0 0 4px;
	font-size: 1.12rem;
}

.etf-form__intro {
	margin: 0 0 20px;
	color: var(--etf-muet);
	font-size: .92rem;
}

.etf-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}

.etf-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 16px;
}

.etf-form__grid .etf-field {
	margin: 0;
}

.etf-field label {
	font-size: .84rem;
	font-weight: 600;
	color: var(--etf-encre);
}

.etf-req {
	color: var(--etf-alerte);
}

.etf-field input,
.etf-field select,
.etf-field textarea {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: .94rem;
	color: var(--etf-encre);
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

.etf-field input:focus,
.etf-field select:focus,
.etf-field textarea:focus {
	outline: 2px solid var(--etf-accent);
	outline-offset: 1px;
	border-color: var(--etf-accent);
}

.etf-field .is-erreur {
	border-color: var(--etf-alerte);
}

.etf-erreur {
	font-size: .8rem;
	color: var(--etf-alerte);
}

/*
 * Le champ leurre est retiré du flux sans `display: none` : certains robots
 * ignorent les champs masqués de cette façon, ce qui annulerait le piège.
 */
.etf-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.etf-rgpd {
	margin: 18px 0;
	font-size: .8rem;
	line-height: 1.55;
	color: var(--etf-muet);
}

.etf-form__actions {
	margin: 0;
}

.etf-submit {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	padding: 13px 26px;
	font: inherit;
	font-size: .95rem;
	font-weight: 600;
	/* ET Astra calcule la couleur lisible sur son accent : on la lit. */
	color: var(--etf-sur-accent);
	cursor: pointer;
	background: var(--etf-accent);
	border: none;
	border-radius: var(--etf-rayon-bouton);
}

.etf-submit:hover:not(:disabled) {
	filter: brightness(1.12);
}

.etf-submit:disabled {
	opacity: .6;
	cursor: not-allowed;
}

.etf-spinner {
	display: none;
	width: 14px;
	height: 14px;
	/* `currentColor` suit la couleur du bouton, quel que soit l'accent. */
	border: 2px solid currentColor;
	border-top-color: transparent;
	opacity: .8;
	border-radius: 50%;
	animation: etf-tourne .7s linear infinite;
}

.etf-form.is-envoi .etf-spinner {
	display: block;
}

@keyframes etf-tourne {

	to {
		transform: rotate(360deg);
	}
}

.etf-form__message {
	margin-top: 16px;
	font-size: .92rem;
	line-height: 1.55;
}

.etf-form__message.is-succes {
	padding: 14px 16px;
	color: var(--etf-accent);
	background: var(--etf-accent-doux);
	border-radius: var(--etf-rayon);
}

.etf-form__message.is-echec {
	padding: 14px 16px;
	color: var(--etf-alerte);
	background: rgba(226, 86, 77, .14);
	background: color-mix(in srgb, var(--etf-alerte) 14%, transparent);
	border-radius: var(--etf-rayon);
}

@media (max-width: 640px) {

	.etf-session {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.etf-onglet-panneau {
		padding: 20px 16px;
		border-radius: var(--etf-rayon);
	}
}

@media (prefers-reduced-motion: reduce) {

	.etf-spinner {
		animation: none;
	}

	.etf-catalogue.is-chargement .etf-catalogue__resultats {
		transition: none;
	}
}

/* ════════════════════════════════════════════════════════════
   LA FICHE
   Le titre reste au thème : la fiche commence à la barre de
   repères. Huit présentations partagent ce socle et ne changent
   que ce qui les distingue, plus bas.
   ════════════════════════════════════════════════════════════ */

.etf-fiche {
	margin-top: 8px;
}

/* ─────────── Fil d'Ariane ─────────── */

.etf-ariane {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	font-size: .82rem;
	color: var(--etf-muet);
}

.etf-ariane a {
	color: inherit;
	text-decoration: none;
}

.etf-ariane a:hover {
	color: var(--etf-accent);
	text-decoration: underline;
}

/* ─────────── Boutons ─────────── */

.etf-bouton {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--etf-encre);
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon-bouton);
}

.etf-bouton:hover {
	border-color: var(--etf-accent);
	color: var(--etf-accent);
}

.etf-bouton--principal {
	color: var(--etf-sur-accent);
	background: var(--etf-accent);
	border-color: var(--etf-accent);
}

.etf-bouton--principal:hover {
	color: var(--etf-sur-accent);
	filter: brightness(1.12);
}

.etf-bouton--discret {
	border-color: transparent;
	color: var(--etf-muet);
}

.etf-bouton--petit {
	padding: 7px 14px;
	font-size: .82rem;
}

.etf-bouton--bloc {
	width: 100%;
}

/* ─────────── Corps ─────────── */

.etf-chapo {
	margin-bottom: 26px;
	font-size: 1.06rem;
	line-height: 1.65;
}

.etf-chapo p:last-child {
	margin-bottom: 0;
}

.etf-bloc {
	margin: 0 0 20px;
}

.etf-bloc > h2 {
	margin: 0 0 12px;
	font-size: 1.28rem;
	text-wrap: balance;
}

.etf-bloc__corps > :last-child {
	margin-bottom: 0;
}

/* ─────────── Sections repliables ─────────── */

.etf-bloc--pli {
	margin: 0;
	border-bottom: 1px solid var(--etf-trait);
}

.etf-bloc--pli:first-of-type {
	border-top: 1px solid var(--etf-trait);
}

.etf-bloc--pli > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 4px;
	font-size: 1.06rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.etf-bloc--pli > summary::-webkit-details-marker {
	display: none;
}

.etf-bloc--pli > summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1;
	color: var(--etf-accent);
}

.etf-bloc--pli[open] > summary::after {
	content: "–";
}

.etf-bloc--pli > summary:focus-visible {
	outline: 2px solid var(--etf-accent);
	outline-offset: -2px;
}

.etf-bloc--pli > .etf-bloc__corps {
	padding: 0 4px 20px;
}

.etf-repli {
	margin: 24px 0;
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

.etf-repli > summary {
	padding: 14px 18px;
	font-weight: 600;
	cursor: pointer;
}

.etf-repli__corps {
	padding: 0 18px 8px;
}

/* ─────────── Sommaire ancré ─────────── */

.etf-sommaire {
	padding: 16px 20px;
	margin-bottom: 26px;
	background: var(--etf-doux);
	border-radius: var(--etf-rayon);
}

.etf-sommaire__titre {
	margin: 0 0 8px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--etf-muet);
}

.etf-sommaire ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0 0 0 18px;
	font-size: .9rem;
}

.etf-sommaire a {
	color: inherit;
	text-decoration: none;
}

.etf-sommaire a:hover,
.etf-sommaire li.is-courant > a {
	color: var(--etf-accent);
	text-decoration: underline;
}

/* ─────────── Onglets de la fiche ─────────── */

.etf-fiche-onglets__barre {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--etf-trait);
}

.etf-fiche-onglet {
	padding: 12px 20px;
	margin-bottom: -1px;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	color: var(--etf-muet);
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
}

.etf-fiche-onglet.is-active {
	color: var(--etf-accent);
	border-bottom-color: var(--etf-accent);
}

.etf-fiche-onglet:focus-visible {
	outline: 2px solid var(--etf-accent);
	outline-offset: -4px;
}

/* ════════════════════════════════════════════════════════════
   LES HUIT PRÉSENTATIONS
   Seul ce qui les distingue figure ici.
   ════════════════════════════════════════════════════════════ */

/* --- Encadré latéral : deux colonnes --- */

@media (min-width: 900px) {

	.etf-structure--ancres.etf-collant .etf-sommaire {
		position: sticky;
		top: calc(var(--wia-header-h, 72px) + 12px);
		z-index: 2;
	}
}

/* --- Dates en tête --- */

.etf-bloc--sessions-tete {
	margin-bottom: 30px;
}

/* --- Brochure : plus d'air, titres plus forts --- */

.etf-densite--genereuse .etf-chapo {
	margin-bottom: 38px;
	font-size: 1.18rem;
	line-height: 1.75;
}

.etf-densite--genereuse .etf-bloc {
	margin-bottom: 44px;
}

.etf-densite--genereuse .etf-bloc > h2 {
	margin-bottom: 18px;
	font-size: 1.6rem;
}

.etf-densite--genereuse .etf-bloc__corps {
	font-size: 1.02rem;
	line-height: 1.75;
}
.etf-densite--genereuse .etf-prix {
	font-size: 2.1rem;
}

/* --- Compact : tout se resserre --- */

.etf-densite--compacte .etf-chapo {
	margin-bottom: 18px;
	font-size: .98rem;
	line-height: 1.55;
}

.etf-densite--compacte .etf-bloc {
	margin-bottom: 14px;
}

.etf-densite--compacte .etf-bloc > h2 {
	margin-bottom: 6px;
	font-size: 1.08rem;
}

.etf-densite--compacte .etf-bloc__corps {
	font-size: .92rem;
	line-height: 1.5;
}

.etf-densite--compacte .etf-repere {
	padding: 8px 14px;
}
/* Report d'une session choisie dans le tableau : l'éclat dit où regarder. */

.etf-field select.is-reporte {
	border-color: var(--etf-accent);
	box-shadow: 0 0 0 3px var(--etf-accent-doux);
}

/* ─────────── Écrans étroits ─────────── */

@media (max-width: 782px) {

	.etf-hero__dedans {
		padding: 44px 18px;
	}

	.etf-hero__meta li {
		padding: 0 12px;
		font-size: .84rem;
	}

	.etf-repere {
		flex-basis: 50%;
		border-bottom: 1px solid var(--etf-trait);
	}

	.etf-sommaire ol {
		flex-direction: column;
	}
}

/* ─────────── Impression ─────────── */

@media print {

	.etf-bloc--demande,
	.etf-sommaire,
	.etf-sessions__filtre,
	.etf-ariane {
		display: none;
	}

	/* Un accordéon fermé ne doit pas imprimer une fiche à trous. */
	.etf-bloc--pli > .etf-bloc__corps,
	.etf-repli__corps,
	.etf-fiche-panneau {
		display: block !important;
	}

	.etf-fiche-onglets__barre {
		display: none;
	}
}

/* ─────────── Écrans étroits ─────────── */

@media (max-width: 782px) {

	.etf-repere {
		flex-basis: 50%;
		border-bottom: 1px solid var(--etf-trait);
	}

	.etf-sommaire ol {
		flex-direction: column;
	}
}

/* ─────────── Impression ─────────── */

@media print {

	.etf-bloc--demande,
	.etf-sommaire,
	.etf-sessions__filtre,
	.etf-ariane {
		display: none;
	}

	/* Un accordéon fermé ne doit pas imprimer une fiche à trous. */
	.etf-bloc--pli > .etf-bloc__corps,
	.etf-repli__corps,
	.etf-fiche-panneau {
		display: block !important;
	}

	.etf-fiche-onglets__barre {
		display: none;
	}
}

/* ─────────── Grille des trois tarifs ─────────── */
/* ════════════════════════════════════════════════════════════
   DATES & LIEUX
   Toutes les couleurs viennent d'ET Astra : la bande et les
   pastilles dérivent de l'accent du site, elles n'en inventent
   aucune. Un catalogue ne doit pas imposer sa teinte.
   ════════════════════════════════════════════════════════════ */

.etf-dates {
	margin: 0 0 34px;
}

.etf-dates__titre {
	margin: 0 0 6px;
	font-size: 1.5rem;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--etf-accent);
	text-wrap: balance;
}

.etf-dates__intro {
	margin: 0 0 12px;
	text-align: center;
	color: var(--etf-muet);
}

.etf-dates__periode {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

.etf-dates__periode input {
	flex: 1 1 200px;
	padding: 11px 13px;
	font: inherit;
	font-size: .92rem;
	color: var(--etf-encre);
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

/* ─────────── Bande de navigation ─────────── */

.etf-dates__barre {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--etf-accent);
	border-radius: var(--etf-rayon) var(--etf-rayon) 0 0;
}

.etf-dates__barre select,
.etf-mois-prec,
.etf-mois-suiv {
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	color: var(--etf-sur-accent);
	cursor: pointer;
	background: rgba(255, 255, 255, .18);
	background: color-mix(in srgb, var(--etf-sur-accent) 18%, transparent);
	border: none;
	border-radius: 4px;
}

.etf-dates__barre select {
	padding: 8px 12px;
}

.etf-mois-prec,
.etf-mois-suiv {
	width: 34px;
	height: 34px;
	font-size: 1.1rem;
	line-height: 1;
}

.etf-mois-prec:hover:not(:disabled),
.etf-mois-suiv:hover:not(:disabled),
.etf-dates__barre select:hover {
	background: rgba(255, 255, 255, .3);
	background: color-mix(in srgb, var(--etf-sur-accent) 30%, transparent);
}

.etf-mois-prec:disabled,
.etf-mois-suiv:disabled {
	opacity: .35;
	cursor: default;
}

.etf-dates__compte {
	flex: 1 0 100%;
	margin: 0;
	font-size: .86rem;
	text-align: center;
	color: var(--etf-sur-accent);
	opacity: .9;
}

/* ─────────── Filtres ─────────── */

.etf-dates__filtres {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-items: center;
	padding: 12px 16px;
	background: var(--etf-doux);
	border: 1px solid var(--etf-trait);
	border-top: none;
}

.etf-dates__filtre {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0;
	font-size: .86rem;
	color: var(--etf-muet);
}

.etf-dates__filtre select {
	padding: 7px 11px;
	font: inherit;
	font-size: .86rem;
	color: var(--etf-encre);
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: var(--etf-rayon);
}

/* ─────────── Lignes ─────────── */

.etf-dates__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--etf-trait);
	border-top: none;
	border-radius: 0 0 var(--etf-rayon) var(--etf-rayon);
	overflow: hidden;
}

.etf-date {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) 150px 120px auto;
	gap: 18px;
	align-items: center;
	padding: 14px 18px;
	border-bottom: 1px solid var(--etf-trait);
}

.etf-date:last-child {
	border-bottom: none;
}

/*
 * Alternance tirée de l'accent, à très faible opacité : la teinte suit le
 * site, et le contraste du texte n'en est pas affecté.
 */
.etf-date:nth-child(odd) {
	background: rgba(128, 128, 128, .06);
	background: color-mix(in srgb, var(--etf-accent) 6%, transparent);
}

.etf-date.is-complete {
	color: var(--etf-muet);
}

/* ─────────── Vignette de date ─────────── */

.etf-vignette {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
	background: var(--etf-fond);
	border: 1px solid var(--etf-trait);
	border-radius: 4px;
	line-height: 1.1;
}

.etf-vignette__mois {
	width: 100%;
	padding: 3px 0;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
	text-transform: uppercase;
	color: var(--etf-sur-accent);
	background: var(--etf-accent);
}

.etf-vignette__jour {
	padding: 4px 0 1px;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--etf-encre);
	font-variant-numeric: tabular-nums;
}

.etf-vignette__sem {
	font-size: .55rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--etf-muet);
}

.etf-vignette__an {
	padding-bottom: 4px;
	font-size: .55rem;
	color: var(--etf-muet);
	font-variant-numeric: tabular-nums;
}

/* ─────────── Contenu d'une ligne ─────────── */

.etf-date__libelle {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.etf-date__libelle strong {
	font-size: .96rem;
	text-transform: capitalize;
}

.etf-date__libelle em {
	font-size: .8rem;
	font-style: normal;
	color: var(--etf-muet);
}

.etf-date__lieu {
	font-weight: 600;
}

.etf-pastille {
	display: inline-block;
	padding: 4px 12px;
	font-size: .76rem;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 12px;
}

.etf-pastille--libre {
	color: var(--etf-sur-accent);
	background: var(--etf-accent);
}

.etf-pastille--tension {
	color: var(--etf-alerte);
	background: rgba(226, 86, 77, .16);
	background: color-mix(in srgb, var(--etf-alerte) 16%, transparent);
}

.etf-pastille--complet {
	color: var(--etf-muet);
	background: rgba(128, 128, 128, .18);
}

.etf-date__action .etf-bouton {
	white-space: nowrap;
	text-transform: uppercase;
	font-size: .78rem;
	letter-spacing: .03em;
}

.etf-dates__aucune,
.etf-dates__vide {
	padding: 22px;
	margin: 0;
	text-align: center;
	color: var(--etf-muet);
	background: var(--etf-doux);
	border-radius: var(--etf-rayon);
}

.etf-dates__aucune {
	border-radius: 0 0 var(--etf-rayon) var(--etf-rayon);
}

/* ─────────── Écrans étroits ─────────── */

@media (max-width: 860px) {

	.etf-date {
		grid-template-columns: 58px minmax(0, 1fr);
		gap: 6px 14px;
	}

	.etf-vignette {
		grid-row: span 3;
	}

	.etf-date__lieu,
	.etf-date__statut,
	.etf-date__action {
		grid-column: 2;
	}

	.etf-date__action .etf-bouton {
		width: 100%;
	}
}

@media print {

	.etf-dates__periode,
	.etf-dates__barre,
	.etf-dates__filtres,
	.etf-date__action,
	.etf-aparte {
		display: none;
	}
}

/* ════════════════════════════════════════════════════════════
   BANDEAU DE LA FICHE
   Pleine largeur, hors du conteneur de contenu : le gabarit de
   l'extension le rend avant lui.
   ════════════════════════════════════════════════════════════ */

/*
 * Contenu centre verticalement, et non colle en bas.
 *
 * En `flex-end`, tout l'ecart entre la hauteur du contenu et la hauteur
 * minimale s'accumulait au-dessus : une centaine de pixels sur le surtitre
 * contre les seuls 52 px de marge sous la ligne de reperes. Le bandeau
 * paraissait mal cale, alors que ses marges etaient justes — c'est leur
 * repartition qui ne l'etait pas.
 *
 * Centre, l'ecart se partage a parts egales, quelle que soit la hauteur
 * reglee dans ET Astra et quelle que soit la longueur du titre.
 */
.etf-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--etf-hero-h, 380px);
	margin: 0;
	overflow: hidden;
	background: var(--etf-accent-fonce);
	isolation: isolate;
}

.etf-hero__fond {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
}

/*
 * Une iframe ne connait pas `object-fit` : on la dimensionne pour qu'elle
 * couvre le bandeau dans les deux sens, puis on la recentre. Le format 16/9
 * des deux plateformes donne les deux termes du `max`.
 *
 * `pointer-events: none` : c'est un fond, pas un lecteur. Sans cela, un clic
 * sur le titre ouvrirait la video.
 */
.etf-hero .etf-hero__fond--embed {
	inset: auto;
	top: 50%;
	left: 50%;
	width: max(100%, calc(var(--etf-hero-h, 380px) * 16 / 9));
	height: max(100%, calc(100vw * 9 / 16));
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/*
 * Le voile teinte le média à la couleur du site plutôt que de le noircir : le
 * bandeau reste identifiable comme une page du site, pas comme une photo
 * d'illustration quelconque.
 */
.etf-hero__voile {
	position: relative;
	z-index: 1;
	width: 100%;
}

.etf-hero:not(.etf-hero--couleur) .etf-hero__voile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--etf-accent-fonce);
	background: linear-gradient(
		100deg,
		var(--etf-accent-fonce) 0%,
		color-mix(in srgb, var(--etf-accent-fonce) var(--etf-voile, 78%), transparent) 100%
	);
}

/*
 * Mêmes bornes que `.wia-wrap` du thème : même largeur maximale, mêmes
 * gouttières. Le titre du bandeau s'aligne ainsi exactement sur le texte
 * qui le suit, au pixel près, quelle que soit la largeur réglée dans ET Astra.
 */
.etf-hero__dedans {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: var(--wia-maxw, 1180px);
	margin: 0 auto;
	padding: 56px 24px;
	text-align: center;
}

.etf-hero .etf-hero__badge {
	align-self: center;
	margin: 0;
	padding: 5px 14px;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--etf-accent-fonce);
	background: var(--etf-sur-accent);
	border-radius: 3px;
}

.etf-hero .etf-hero__eyebrow {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--etf-sur-accent);
}

/*
 * Sélecteur doublé, et non simple.
 *
 * Le thème colore ses titres par `.wia h1, .wia h2, .wia h3`, de spécificité
 * (0,1,1). Une classe seule, à (0,1,0), perdait : le titre du bandeau sortait
 * en encre sombre sur l'accent sombre, donc invisible. Le sous-titre et la
 * ligne de repères, eux, passaient — d'où un bandeau à moitié lisible.
 */
.etf-hero .etf-hero__dedans .etf-hero__titre {
	margin: 0;

	/*
	 * Aucune limite de mesure ici.
	 *
	 * Un `max-width: 20ch` enfermait le titre dans quelque 420 px et le
	 * cassait en trois lignes courtes, au milieu d'un bandeau qui en fait
	 * 1130. Il paraissait donc bien plus etroit que le texte juste en dessous,
	 * alors que leurs conteneurs ont exactement les memes bornes.
	 *
	 * `text-wrap: balance` suffit a repartir les lignes d'un titre long sans
	 * lui imposer une largeur.
	 */
	max-width: none;
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	line-height: 1.12;
	color: var(--etf-sur-accent);
	text-wrap: balance;
}

.etf-hero .etf-hero__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 0;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	color: var(--etf-sur-accent);
}

.etf-hero .etf-hero__meta li {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 0 20px;
	font-size: .94rem;
	color: var(--etf-sur-accent);
	border-left: 1px solid rgba(255, 255, 255, .4);
	border-left-color: color-mix(in srgb, var(--etf-sur-accent) 40%, transparent);
}

.etf-hero .etf-hero__meta svg {
	flex: 0 0 auto;
	opacity: .9;
}

.etf-hero__meta li:first-child {
	padding-left: 0;
	border-left: none;
}

.etf-hero .etf-hero__meta span {
	opacity: .88;
}

/* ─────────── Avis ─────────── */

.etf-hero .etf-hero__avis {
	gap: 10px;
}

.etf-etoiles {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.etf-etoiles__vide {
	opacity: .35;
}

/*
 * La rangée pleine est rognée à la largeur de la note : une demi-étoile est
 * donc exacte, sans avoir à découper de glyphe ni à en dessiner un second.
 */
.etf-etoiles__plein {
	position: absolute;
	inset: 0;
	overflow: hidden;
	width: var(--etf-note, 0%);
}

.etf-hero__avis strong {
	font-weight: 700;
}

.etf-hero__avis span {
	opacity: .88;
}

/* ════════════════════════════════════════════════════════════
   WIDGET DE DEMANDE
   Carte pleine sur l'accent, texte clair.
   Un encadré transparent se fondait dans la page et ses libellés
   gris pâle devenaient illisibles : ce bloc doit se détacher, il
   porte la décision.
   ════════════════════════════════════════════════════════════ */

.etf-widget {
	--etf-w-encre: #fff;

	/*
	 * 88 % et non 72 %.
	 *
	 * Les libellés doivent s'effacer devant les valeurs, pas devenir illisibles.
	 * À 72 % sur un fond soutenu, la référence et les modalités passaient sous
	 * le seuil de lecture confortable — l'écart de hiérarchie tient très bien
	 * à 88 %, et le texte reste franc.
	 */
	--etf-w-doux: rgba(255, 255, 255, .88);
	--etf-w-trait: rgba(255, 255, 255, .3);

	overflow: hidden;
	color: var(--etf-w-encre);
	background: var(--etf-accent-fonce);
	border-radius: var(--etf-rayon);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .14);
}

/* ─────────── Onglets ─────────── */

.etf-widget .etf-widget__onglets {
	display: flex;
	background: rgba(0, 0, 0, .18);
}

.etf-w-onglet {
	flex: 1 1 0;
	min-width: 0;
	padding: 14px 6px;
	font: inherit;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--etf-w-doux);
	cursor: pointer;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
}

.etf-w-onglet:hover {
	color: var(--etf-w-encre);
	background: rgba(255, 255, 255, .08);
}

/*
 * L'onglet actif passe en pleine lumière : texte franc, fond de la carte,
 * filet sous le libellé. Trois signaux plutôt qu'un seul changement de teinte
 * — c'est ce qui manquait, et l'onglet actif se lisait moins bien que les
 * autres.
 */
.etf-w-onglet.is-active {
	color: var(--etf-w-encre);
	background: transparent;
	border-bottom-color: var(--etf-w-encre);
}

.etf-w-onglet:focus-visible {
	outline: 2px solid var(--etf-w-encre);
	outline-offset: -4px;
}

/* ─────────── Corps ─────────── */

.etf-widget__panneau {
	padding: 22px;
}

/*
 * Les modalites en pastilles plutot qu'en legende.
 *
 * Une ligne de texte a 72 % d'opacite se lisait comme une note de bas de page
 * alors qu'elle porte une information de choix : presentiel ou distance. Le
 * contour lui rend son statut, et le contraste monte a plein.
 */
.etf-widget .etf-widget__modes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

/*
 * Sélecteurs doublés dans tout ce bloc.
 *
 * Le thème colore et décore les listes du contenu par des règles descendantes
 * comme `.wia ul li`, de spécificité (0,1,2). Une classe seule perdait : les
 * pastilles héritaient d'un gris de contenu et se voyaient même affublées de
 * la puce du thème.
 */
.etf-widget .etf-widget__modes li {
	padding: 5px 12px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--etf-w-encre);
	background: rgba(255, 255, 255, .1);
	border: 1px solid var(--etf-w-trait);
	border-radius: 20px;
}

.etf-widget .etf-widget__modes li::before,
.etf-widget .etf-widget__modes li::marker,
.etf-hero .etf-hero__meta li::before,
.etf-hero .etf-hero__meta li::marker {
	content: none;
}

.etf-widget__lignes {
	display: flex;
	flex-direction: column;
	margin: 0 0 22px;
	border-top: 1px solid var(--etf-w-trait);
}

.etf-widget__lignes > div {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 0;
	border-bottom: 1px solid var(--etf-w-trait);
}

.etf-widget .etf-widget__lignes dt {
	display: flex;
	gap: 9px;
	align-items: center;
	font-size: .88rem;
	color: var(--etf-w-doux);
}

.etf-w-icone {
	flex: 0 0 auto;
	opacity: .85;
}

.etf-widget__lignes dd {
	margin: 0;
	text-align: right;
}

.etf-widget__lignes dd strong {
	display: block;
	font-size: 1rem;
	line-height: 1.25;
	color: var(--etf-w-encre);
}

/* Le prix est la donnée qu'on vient chercher : il se lit de plus loin. */
.etf-widget__ligne--prix {
	padding: 16px 0;
}

.etf-widget__ligne--prix dd strong {
	font-size: 1.45rem;
	letter-spacing: -.01em;
}

.etf-widget__lignes dd span {
	display: block;
	margin-top: 2px;
	font-size: .76rem;
	color: var(--etf-w-doux);
}

/* ─────────── Boutons du widget ─────────── */

/*
 * Le bouton principal s'inverse : blanc sur la carte sombre. C'est le plus
 * fort contraste disponible sans introduire une seconde couleur de marque,
 * et il désigne sans ambiguïté l'action attendue.
 */
.etf-widget .etf-bouton--principal {
	color: var(--etf-accent-fonce);
	background: var(--etf-w-encre);
	border-color: var(--etf-w-encre);
}

.etf-widget .etf-bouton--principal:hover {
	color: var(--etf-accent-fonce);
	background: var(--etf-w-doux);
	border-color: var(--etf-w-doux);
	filter: none;
}

.etf-widget .etf-bouton--fantome {
	color: var(--etf-w-encre);
	background: transparent;
	border-color: var(--etf-w-trait);
}

.etf-widget .etf-bouton--fantome:hover {
	color: var(--etf-w-encre);
	border-color: var(--etf-w-encre);
	background: rgba(255, 255, 255, .08);
}

.etf-widget__panneau .etf-bouton + .etf-bouton,
.etf-widget__panneau .etf-bouton + .etf-widget .etf-widget__form {
	margin-top: 10px;
}

/* ─────────── Formulaire déplié ─────────── */

/*
 * Le formulaire revient sur fond clair : vingt champs en blanc sur sombre
 * fatiguent, et les champs natifs du navigateur restent clairs de toute façon
 * — le mélange serait pire que le contraste.
 */
.etf-widget__form {
	margin: 20px -22px -22px;
	padding: 20px 22px;
	color: var(--etf-encre);
	background: var(--wia-bg, #fff);
}

.etf-widget__form .etf-form__grid {
	grid-template-columns: 1fr;
}

.etf-widget__form .etf-form__titre {
	font-size: 1rem;
}

.etf-widget__form .etf-bouton--principal,
.etf-widget__form .etf-submit {
	color: var(--etf-sur-accent);
	background: var(--etf-accent);
	border-color: var(--etf-accent);
}

.etf-widget .etf-widget__ref {
	margin: 0;
	padding: 11px;
	font-size: .74rem;
	letter-spacing: .04em;
	text-align: center;
	color: var(--etf-w-doux);
	background: rgba(0, 0, 0, .18);
}

/* ─────────── Colonne de droite ─────────── */

@media (min-width: 960px) {

	.etf-fiche__corps {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 44px;
		align-items: start;
	}

	/*
	 * Pas de hauteur maximale, donc pas de barre de défilement dans la
	 * colonne : un panneau qui défile dans un panneau qui défile est
	 * désorientant, et masquait le bouton d'action.
	 */
	.etf-collant .etf-aparte {
		position: sticky;
		top: calc(var(--wia-header-h, 72px) + 20px);
	}
}

@media (max-width: 959px) {

	/* Sur mobile, le widget passe avant le programme : c'est lui qui convertit. */
	.etf-fiche__corps {
		display: flex;
		flex-direction: column;
	}

	.etf-aparte {
		order: -1;
		margin-bottom: 28px;
	}
}

@media print {

	.etf-widget,
	.etf-hero__badge {
		display: none;
	}

	.etf-hero {
		background: none;
	}

	.etf-hero__voile {
		padding: 0;
		background: none;
	}

	.etf-hero__eyebrow,
	.etf-hero__titre,
	.etf-hero__meta {
		color: var(--etf-encre);
	}
}

/* ─────────── Jonction bandeau / contenu ─────────── */

/*
 * Le gabarit place le bandeau juste avant la première section. Celle-ci porte
 * par défaut un filet supérieur et 88 px de marge : le bandeau s'en trouvait
 * décollé par une bande vide barrée d'un trait, qui donnait l'impression de
 * deux en-têtes empilés.
 */
.etf-section {
	border-top: none;
	padding-top: 48px;
}