/* ==========================================================================
   La veille — podcasts, livres, newsletters
   Chargée uniquement sur les trois annuaires, leurs fiches et les pages de
   domaine. Le reste du site ne la télécharge pas.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bandeau de navigation entre les trois annuaires
   -------------------------------------------------------------------------- */

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

.enf-veille-nav__lien {
	display: inline-flex;
	align-items: center;
	gap: var(--enf-space-2);
	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-veille-nav__lien:hover,
a.enf-veille-nav__lien:focus-visible {
	border-color: var(--enf-orange);
	color: var(--enf-orange);
}

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

.enf-veille-nav__compte {
	display: inline-block;
	min-width: 1.5em;
	padding: 1px 6px;
	border-radius: var(--enf-radius-pill);
	background-color: var(--enf-bg-slate);

	/* Gris de texte secondaire sur l'ardoise claire : 4,34:1, sous le seuil AA
	   pour un corps de 12 px. L'encre pleine le remonte à 13,4:1. */
	color: var(--enf-ink);
	font-size: 0.75rem;
	font-weight: var(--enf-fw-semibold);
	text-align: center;
}

.enf-veille-nav__lien--actif .enf-veille-nav__compte {
	background-color: rgb(255 255 255 / 0.16);
	color: var(--enf-on-dark);
}

/* --------------------------------------------------------------------------
   Méthode de la sélection, dépliable
   -------------------------------------------------------------------------- */

.enf-methodo {
	max-width: var(--enf-content);
	padding: var(--enf-space-4) var(--enf-space-5);
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius);
	background-color: var(--enf-bg);
}

.enf-methodo > summary {
	cursor: pointer;
	font-size: var(--enf-fs-small);
	font-weight: var(--enf-fw-semibold);
	color: var(--enf-ink);
}

.enf-methodo > summary:focus-visible {
	outline: var(--enf-focus);
	outline-offset: var(--enf-focus-offset);
}

.enf-methodo__contenu p {
	margin: var(--enf-space-3) 0 0;
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
	line-height: var(--enf-lh-body);
}

/* --------------------------------------------------------------------------
   Grilles
   -------------------------------------------------------------------------- */

/* La sélection des podcasts est une liste ordonnée : on lui retire ses puces
   sans lui retirer sa sémantique, et l'élément de liste devient la cellule. */
ol.enf-veille-grille,
ul.enf-veille-grille {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enf-veille-grille__item {
	display: flex;
}

.enf-veille-grille__item > .enf-card {
	width: 100%;
}

.enf-card--veille {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   Pochettes et couvertures
   -------------------------------------------------------------------------- */

.enf-veille-pochette {
	aspect-ratio: 1 / 1;
}

.enf-veille-couverture {
	aspect-ratio: 3 / 4;
}

.enf-veille-couverture img {
	object-fit: contain;
	background-color: var(--enf-bg-slate);
}

.enf-veille-pochette--vide,
.enf-veille-couverture--vide {
	display: flex;
	align-items: center;
	justify-content: center;
}

.enf-veille-pochette__repli,
.enf-veille-couverture__repli {
	font-size: 2.5rem;
	line-height: 1;
	opacity: 0.55;
}

/* Le rang est posé sur la pochette. Fond plein plutôt que verre dépoli :
   il doit rester lisible sur une pochette claire comme sur une pochette
   sombre, et sur la tuile de repli qui n'a pas d'image du tout. */
.enf-veille-rang {
	position: absolute;
	top: var(--enf-space-3);
	left: var(--enf-space-3);
	margin: 0;
	min-width: 40px;
	padding: 4px 10px;
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: 1rem;
	font-weight: var(--enf-fw-bold);
	line-height: 1.2;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Repères : rythme, durée, éditeur, langue…
   -------------------------------------------------------------------------- */

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

.enf-veille-reperes__item {
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
}

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

.enf-veille-reperes--fiche {
	gap: var(--enf-space-3) var(--enf-space-6);
	padding-top: var(--enf-space-2);
	border-top: 1px solid var(--enf-line-soft);
}

/* --------------------------------------------------------------------------
   Points clés d'un livre
   -------------------------------------------------------------------------- */

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

.enf-veille-points__item {
	padding: 3px 10px;
	border: 1px solid var(--enf-line);
	border-radius: var(--enf-radius-pill);
	color: var(--enf-muted);
	font-size: 0.75rem;
}

.enf-veille-points--fiche {
	margin-top: var(--enf-space-3);
}

.enf-veille-points--fiche .enf-veille-points__item {
	background-color: var(--enf-bg);
	color: var(--enf-ink);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Initiale des newsletters, qui n'ont pas de visuel
   -------------------------------------------------------------------------- */

.enf-veille-initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0;
	border-radius: var(--enf-radius-sm);
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: 1.375rem;
	font-weight: var(--enf-fw-bold);
	line-height: 1;
}

/* Les étiquettes de domaine vivaient ici. La fiche d'une série les affiche
   aussi, et la feuille de la veille ne s'y charge pas : elles sont passées
   dans components.css, avec les autres étiquettes. */

/* --------------------------------------------------------------------------
   Haut de fiche : visuel à gauche, texte à droite
   -------------------------------------------------------------------------- */

.enf-veille-fiche__haut {
	display: grid;
	gap: var(--enf-space-6);
}

.enf-veille-fiche__media {
	max-width: 240px;
}

.enf-veille-fiche__pochette,
.enf-veille-fiche__couverture,
.enf-veille-fiche__logo {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--enf-radius);
	box-shadow: var(--enf-shadow-hover);
}

.enf-veille-fiche__pochette--vide,
.enf-veille-fiche__couverture--vide,
.enf-veille-fiche__logo--initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background-color: var(--enf-navy-deep);
	color: var(--enf-on-dark);
	font-family: var(--enf-font-display);
	font-size: 3rem;
	font-weight: var(--enf-fw-bold);
	box-shadow: none;
}

.enf-veille-fiche__couverture--vide {
	aspect-ratio: 3 / 4;
}

/* Le chapô est centré par défaut, pour les en-têtes de section. Dans une fiche
   il vit dans une colonne alignée à gauche, sous le titre. */
.enf-veille-fiche__haut .enf-section__lede {
	margin-inline: 0;
	text-align: left;
}

.enf-veille-fiche__auteur {
	margin: 0;
	color: var(--enf-muted);
	font-size: 1.0625rem;
}

.enf-veille-fiche__source {
	margin-top: var(--enf-space-6);
	padding-top: var(--enf-space-4);
	border-top: 1px solid var(--enf-line-soft);
	color: var(--enf-muted);
	font-size: var(--enf-fs-small);
}

/* --------------------------------------------------------------------------
   Bas de fiche d'un livre : pourquoi + points clés
   -------------------------------------------------------------------------- */

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

.enf-veille-pourquoi,
.enf-veille-cles {
	padding: var(--enf-space-6);
}

.enf-veille-pourquoi__titre,
.enf-veille-cles__titre {
	margin: 0 0 var(--enf-space-3);
	font-size: var(--enf-fs-h4);
}

.enf-veille-pourquoi p {
	margin: 0 0 var(--enf-space-3);
	color: var(--enf-body);
}

.enf-veille-pourquoi p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Points d'arrêt
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.enf-veille-fiche__haut {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: start;
	}

	.enf-veille-fiche__bas {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}