/* ==========================================================================
   Séries — épisodes et portraits
   Chargée uniquement sur la liste, les fiches et les pages de format, plus la
   fiche d'une ville quand elle affiche des portraits. Le reste du site ne la
   télécharge pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Barre de formats
   -------------------------------------------------------------------------- */

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

.enf-serie-nav__lien {
	display: inline-flex;
	align-items: center;
	padding: 10px 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);
	text-decoration: none;
	transition: var(--enf-transition);
}

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

.enf-serie-nav__lien--actif {
	background-color: var(--enf-navy-deep);
	border-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
}

/* --------------------------------------------------------------------------
   La vidéo, chargée au clic

   Le panneau d'annonce n'est pas posé par-dessus l'affiche : il occupe une
   bande pleine sous elle. Du texte clair sur une image quelconque, même
   assombrie, donne un contraste qu'on ne peut pas garantir — ici, c'est
   toujours de l'encre claire sur l'ardoise profonde, soit le même couple que
   le pied de page.
   -------------------------------------------------------------------------- */

.enf-video {
	overflow: hidden;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
}

.enf-video__affiche {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.enf-video__panneau {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-2);
	padding: var(--enf-space-5);
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
}

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

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

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

.enf-video__lien {
	color: var(--enf-on-dark);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	text-decoration: underline;
}

a.enf-video__lien:hover,
a.enf-video__lien:focus-visible {
	color: var(--enf-on-dark);
	text-decoration-thickness: 2px;
}

.enf-video__cadre {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

.enf-video--chargee {
	background-color: var(--enf-navy-deep);
}

/* --------------------------------------------------------------------------
   Cartes
   -------------------------------------------------------------------------- */

.enf-card--serie {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.enf-card--serie .enf-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-2);
}

.enf-serie-vignette {
	position: relative;
	overflow: hidden;
	background-color: var(--enf-bg-slate);
	aspect-ratio: 16 / 9;
}

.enf-serie-vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sans image de couverture, la case reste une surface calme plutôt qu'un trou
   blanc : la carte garde sa hauteur et la grille son alignement. */
.enf-serie-vignette--vide {
	background-image: linear-gradient(135deg, var(--enf-bg-slate), var(--enf-line));
}

.enf-serie-vignette__video {
	position: absolute;
	inset-block-end: var(--enf-space-3);
	inset-inline-start: var(--enf-space-3);
	padding: 4px 10px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
	font-size: 0.75rem;
	font-weight: var(--enf-fw-semibold);
	letter-spacing: var(--enf-ls-ui);
}

.enf-serie-format {
	margin: 0;
	color: var(--enf-orange);
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------------------
   Fiche
   -------------------------------------------------------------------------- */

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

/* Le chapô d'une fiche est aligné à gauche : centré, il se lit mal sur une
   colonne étroite et se désaccorde du titre juste au-dessus. */
.enf-serie__haut .enf-section__lede {
	margin-inline: 0;
	text-align: left;
}

.enf-serie-retenir {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-serie-retenir__item {
	position: relative;
	padding-left: var(--enf-space-5);
	color: var(--enf-body);
}

.enf-serie-retenir__item::before {
	content: "";
	position: absolute;
	inset-block-start: 0.55em;
	inset-inline-start: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--enf-orange);
}

.enf-serie-personne {
	display: flex;
	flex-direction: column;
	gap: var(--enf-space-3);
	padding: var(--enf-space-6);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
}

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

.enf-serie-personne__ville,
.enf-serie-personne__lien {
	margin: 0;
}

/* --------------------------------------------------------------------------
   Transcription
   --------------------------------------------------------------------------
   Le marqueur natif du <summary> varie d'un navigateur à l'autre ; on le
   remplace par un chevron dessiné, et on garde la zone de clic à 44 px.
   -------------------------------------------------------------------------- */

.enf-transcription {
	margin-top: var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg-slate);
}

.enf-transcription__titre {
	display: flex;
	align-items: center;
	gap: var(--enf-space-3);
	min-height: 44px;
	padding: var(--enf-space-3) var(--enf-space-5);
	color: var(--enf-ink);
	cursor: pointer;
	font-weight: var(--enf-fw-semibold);
	list-style: none;
}

.enf-transcription__titre::-webkit-details-marker {
	display: none;
}

.enf-transcription__titre::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--enf-orange);
	border-bottom: 2px solid var(--enf-orange);
	transform: rotate(-45deg);
	transition: transform 150ms ease;
}

.enf-transcription[open] .enf-transcription__titre::before {
	transform: rotate(45deg);
}

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

.enf-transcription__corps {
	padding: 0 var(--enf-space-5) var(--enf-space-5);
	color: var(--enf-body);
}

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

	.enf-transcription__titre::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Portraits sur la fiche d'une ville
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {

	.enf-video__panneau {
		padding: var(--enf-space-4);
	}

	.enf-video__actions {
		align-items: stretch;
		flex-direction: column;
	}

	.enf-video__lien {
		text-align: center;
	}
}