/**
 * Habillage de l'espace podcast — /radio, séries et épisodes.
 *
 * Feuille dédiée, mise en file sur les seuls gabarits du podcast. Tout est
 * porté par les trois identifiants de page (#lila-radio, #lila-serie,
 * #lila-episode) : le `style.css` du thème enfant impose au site entier un
 * système hérité — Open Sans, Poppins, bleu pétrole — qu'il faut neutraliser
 * ici sans poser un seul `!important` global qui déborderait sur le reste.
 *
 * Raleway n'est pas chargée par cette feuille : Divi la sert déjà sur toutes
 * les pages du site. En ajouter une copie ferait une requête de plus pour un
 * fichier déjà là.
 */

#lila-radio,
#lila-serie,
#lila-episode,
.lila-dock {
	--lila-encre: #232323;
	--lila-texte: #4f4f4f;
	--lila-discret: #777777;
	--lila-creme: #faf6ea;
	--lila-corail: #e73f25;

	/* Le corail de la marque plafonne à 4,09:1 sur blanc : il tient pour un aplat
	   ou un filet, pas pour un texte de moins de 18 px, où l'AA demande 4,5:1.
	   Cette variante assombrie atteint 5,29:1 sur blanc et 4,89:1 sur crème, et
	   reste le même corail à l'œil. Les textes courts la prennent, les aplats et
	   les bordures gardent la couleur de marque. */
	--lila-corail-texte: #c9331b;
	--lila-or: #e09900;
	--lila-lavande: #87a1d4;
	--lila-jaune: #efec7d;
	--lila-filet: #e6e4df;
	--lila-chiffre: #e2ded2;
}

/* La mise en forme reste sur les trois pages ; la palette, elle, doit aussi
   atteindre la barre de lecture, qui vit hors d'elles — ancrée au `body` pour
   survivre au remplacement du contenu. Déclarées sur les seuls identifiants de
   page, ses `var()` ne résolvaient rien : bouton et barres d'onde s'affichaient
   transparents, dans une barre par ailleurs bien en place. */
#lila-radio,
#lila-serie,
#lila-episode {
	background: #fff;
	color: var(--lila-encre);
	font-family: Raleway, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

/* Le système hérité du thème enfant impose Poppins sur les titres et une
   couleur de lien bleu pétrole : rétabli dans cette portée seulement. */
#lila-radio h1,
#lila-radio h2,
#lila-radio h3,
#lila-serie h1,
#lila-serie h2,
#lila-episode h1,
#lila-episode h2 {
	color: var(--lila-encre);
	font-family: inherit;
	margin: 0;
}

#lila-radio a,
#lila-serie a,
#lila-episode a {
	color: var(--lila-or);
	text-decoration: none;
	transition: color 150ms ease;
}

#lila-radio a:hover,
#lila-serie a:hover,
#lila-episode a:hover {
	color: var(--lila-encre);
}

#lila-radio a:focus-visible,
#lila-serie a:focus-visible,
#lila-episode a:focus-visible,
#lila-radio audio:focus-visible,
#lila-serie audio:focus-visible,
#lila-episode audio:focus-visible {
	outline: 3px solid var(--lila-corail);
	outline-offset: 2px;
}

#lila-radio p,
#lila-serie p,
#lila-episode p {
	margin: 0;
}

/* `max-width` est volontairement absent : porté par un sélecteur d'identifiant,
   il battrait toute classe par spécificité — le dessin du bandeau ne se serait
   jamais réduit sur téléphone. Le plafond est posé sur `.lila-cover` et sur le
   dessin, là où il a un sens. */
#lila-radio img,
#lila-serie img,
#lila-episode img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: auto;
	margin: 0;
}

/* Un élément replié par le script doit disparaître, quel que soit le `display`
   que sa classe lui donne. Sans cette règle, `.lila-capsule { display: flex }`
   l'emportait sur le `display: none` que le navigateur attache à `[hidden]`, et
   la pagination des capsules ne masquait rien : le bouton comptait des capsules
   qui restaient toutes à l'écran. */
#lila-radio [hidden],
#lila-serie [hidden],
#lila-episode [hidden] {
	display: none;
}

/* ---- Ligne du site : 95 %, plafonnée à 1266 px ---- */

.lila-row {
	margin: 0 auto;
	max-width: 1266px;
	width: 95%;
}

/* L'archive du podcast tient sur la même colonne de 980 px que la page d'une
   série. Posée sur la ligne plutôt que section par section, elle aligne d'un
   coup le bandeau, la une, la liste et les capsules : sans cela le bandeau
   partait plus large que le contenu et les blocs paraissaient décalés. */
#lila-radio .lila-row,
#lila-episode .lila-row {
	max-width: 980px;
}

/* ---- Bandeau crème ---- */

.lila-hero {
	background: var(--lila-creme);
	border-bottom: 3px solid var(--lila-corail);
}

/* Le bandeau de l'accueil du podcast se passe de son filet : le crème s'arrête
   déjà nettement sur le blanc, la barre orange ne séparait rien qui ne le fût. */
#lila-radio .lila-hero {
	border-bottom: 0;
}

.lila-hero__inner {
	align-items: center;
	display: grid;
	gap: 48px;
	grid-template-columns: 340px minmax(0, 1fr);
	padding: 48px 0;
}

.lila-hero--compact .lila-hero__inner {
	padding: 36px 0;
}

.lila-hero__drawing {
	/* Le dessin est un JPEG sur fond blanc : le fondu en produit le détourage
	   sur le crème, en attendant la source vectorielle. */
	max-width: 100%;
	mix-blend-mode: multiply;
	width: 100%;
}

.lila-hero__title {
	font-size: clamp( 44px, 6vw, 76px );
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 0.95;
}

.lila-hero__lead {
	color: #3c3c3c;
	font-size: 20px;
	line-height: 1.55;
	max-width: 40ch;
	margin-top: 16px !important;
}

.lila-hero__text {
	display: flex;
	flex-direction: column;
}

/* ---- Étiquettes et repères ---- */

.lila-eyebrow {
	align-self: flex-start;
	background: var(--lila-corail);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	padding: 6px 12px;
	text-transform: uppercase;
}

.lila-eyebrow--plain {
	background: none;
	color: var(--lila-corail-texte);
	letter-spacing: 0.16em;
	padding: 0;
}

.lila-eyebrow--plain a {
	color: var(--lila-corail-texte);
}

.lila-section-title {
	color: var(--lila-discret);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2em;
	margin-bottom: 8px !important;
	text-transform: uppercase;
}

.lila-count {
	color: var(--lila-discret);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.lila-underline {
	align-self: flex-start;
	box-shadow: inset 0 -2px 0 var(--lila-or);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

#lila-radio a.lila-underline,
#lila-serie a.lila-underline,
#lila-episode a.lila-underline {
	color: var(--lila-encre);
}

.lila-back {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

#lila-serie a.lila-back {
	color: var(--lila-corail-texte);
}

/* ---- Couvertures ---- */

.lila-cover {
	aspect-ratio: 1;
	max-width: 100%;
	object-fit: cover;
	width: 100%;
}

/* ---- Pastille de série ----------------------------------------------

   La couleur d'une série ne court plus sous les images : elle tient dans une
   pastille devant son nom. Un soulignement du titre serait entré en concurrence
   avec le trait doré des liens et avec le survol ; la pastille se lit partout —
   liste, bandeau, série à la une — et ne coûte pas une balise de plus, portée
   par un pseudo-élément.

   Dimensionnée en `em` : douze pixels devant un nom de série, dix-huit devant le
   grand titre de la une, sans qu'aucune valeur ne soit à tenir à jour.

   Décorative, elle échappe aux exigences de contraste que la plupart de ces
   teintes ne tiendraient pas en texte — d'où `aria-hidden` implicite du
   pseudo-élément, qu'aucun lecteur d'écran n'annonce.
------------------------------------------------------------------------- */

.lila-featured__title::before,
.lila-series__name::before,
.lila-serie__title::before {
	background: var(--lila-serie-couleur, var(--lila-corail));
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 0.4em;
	margin-right: 0.36em;
	vertical-align: middle;
	width: 0.4em;
}

/* Faute de pochette, l'aplat prend la couleur de la série — la même que celle
   qui la repère dans l'administration — avec son initiale en filigrane. */
.lila-cover--empty {
	align-items: center;
	background: var(--lila-serie-couleur, var(--lila-lavande));
	color: rgba( 255, 255, 255, 0.62 );
	display: flex;
	font-size: clamp( 28px, 5vw, 56px );
	font-weight: 800;
	justify-content: center;
	line-height: 1;
}

/* ---- Série à la une ---- */

/* Resserrée sur la même colonne de 980 px que la liste en dessous : à pleine
   largeur, le texte plafonné à 58 caractères laissait deux cents pixels de vide
   avant la couverture, et les deux blocs paraissaient sans rapport. */
.lila-featured {
	align-items: start;
	border-bottom: 1px solid var(--lila-filet);
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) 260px;
	padding: 64px 0 56px;
}

.lila-featured__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lila-featured__title {
	font-size: clamp( 32px, 4vw, 46px );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.lila-featured__description {
	color: var(--lila-texte);
	font-size: 18px;
	line-height: 1.6;
	max-width: 58ch;
}

.lila-featured__cover .lila-cover {
	aspect-ratio: 1;
}

/* Le même socle coloré que les couvertures de la liste et les photos
   d'épisode : c'est ce qui fait tenir les trois écrans ensemble. */
.lila-featured__cover {
	display: block;
}

.lila-featured__cover a {
	display: block;
}

/* ---- Encadrés d'écoute ---- */

.lila-cue {
	background: var(--lila-creme);
	border-left: 4px solid var(--lila-corail);
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
	padding: 18px 20px;
}

.lila-cue__label {
	color: var(--lila-corail-texte);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lila-listen {
	background: #fff;
	border: 2px solid var(--lila-corail);
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 6px;
	max-width: 640px;
	padding: 18px 20px;
}

.lila-listen__label {
	color: var(--lila-corail-texte);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ---- Lecteur ----------------------------------------------------------

   Les contrôles natifs restent en place tant que le script n'a pas monté sa
   façade : `.lila-player` sans `.is-enhanced` est un lecteur de navigateur
   ordinaire, et l'épisode s'écoute quand même.

   La progression est peinte par un voile de la couleur du fond, posé sur la
   part non lue de l'onde : les barres sont corail d'un bout à l'autre, et ce
   qui reste à écouter s'efface. D'où `--lila-player-veil`, à redéfinir dans
   tout contexte dont le fond n'est pas crème.
------------------------------------------------------------------------- */

.lila-player {
	--lila-player-veil: var(--lila-creme);

	background: var(--lila-creme);
	border-left: 4px solid var(--lila-corail);
	padding: 12px 14px;
}

.lila-cue .lila-player,
.lila-listen .lila-player {
	background: none;
	border-left: 0;
	padding: 0;
}

.lila-listen .lila-player {
	--lila-player-veil: #fff;
}

.lila-player__audio {
	display: block;
	height: 40px;
	width: 100%;
}

.lila-player.is-enhanced .lila-player__audio {
	display: none;
}

.lila-player__shell {
	align-items: center;
	display: flex;
	gap: 14px;
}

/* ---- Bouton ---- */

.lila-player__button {
	align-items: center;
	background: var(--lila-corail);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex: none;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: transform 150ms ease, background-color 150ms ease;
	width: 44px;
}

.lila-player__button:hover {
	background: #c9331b;
	transform: scale( 1.06 );
}

.lila-player__button:focus-visible {
	outline: 3px solid var(--lila-encre);
	outline-offset: 2px;
}

/* Triangle de lecture, en bordures : pas d'image, pas de police d'icônes. */
.lila-player__icon {
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	display: block;
	margin-left: 3px;
}

.is-playing .lila-player__icon {
	border-color: #fff;
	border-width: 0 4px;
	height: 15px;
	margin-left: 0;
	width: 13px;
}

/* ---- Onde ---- */

.lila-player__wave {
	--lila-progress: 0%;

	align-items: center;
	cursor: pointer;
	display: flex;
	flex: 1 1 auto;
	gap: 2px;
	height: 42px;
	justify-content: space-between;
	position: relative;
	touch-action: manipulation;
}

.lila-player__wave:focus-visible {
	outline: 3px solid var(--lila-corail);
	outline-offset: 4px;
}

/* Largeur figée : c'est le nombre de barres qui suit la largeur offerte, calculé
   par le script. L'inverse — quarante-quatre barres étirées ou comprimées —
   donnait un peigne épais sur la colonne d'une page de série, et un débordement
   hors de la carte dans les capsules. */
.lila-player__bar {
	background: var(--lila-corail);
	border-radius: 1px;
	flex: 0 0 3px;
}

.lila-player__wave::after {
	background: var(--lila-player-veil);
	bottom: 0;
	content: "";
	left: var(--lila-progress);
	opacity: 0.56;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	transition: left 120ms linear;
}

/* ---- Compteur ---- */

.lila-player__time {
	color: var(--lila-texte);
	flex: none;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- Volume ----------------------------------------------------------

   Replié, le volume n'est qu'une enceinte de vingt pixels. Déplié, la glissière
   se pose *au-dessus* du lecteur plutôt qu'à côté : dans une carte de capsule,
   une glissière prise dans la rangée aurait repris la place que le compteur
   vient tout juste de retrouver.
------------------------------------------------------------------------- */

.lila-player__volume {
	flex: none;
	position: relative;
}

.lila-player__speaker {
	align-items: center;
	background: none;
	border: 0;
	color: var(--lila-texte);
	cursor: pointer;
	display: flex;
	height: 28px;
	justify-content: center;
	padding: 0;
	transition: color 150ms ease;
	width: 24px;
}

.lila-player__speaker:hover,
.lila-player__speaker[aria-expanded="true"] {
	color: var(--lila-corail);
}

.lila-player__speaker:focus-visible {
	outline: 2px solid var(--lila-corail);
	outline-offset: 2px;
}

/* L'enceinte en deux morceaux de bordure, comme le triangle de lecture : ni
   image à charger, ni police d'icônes. */
.lila-player__speaker-icon {
	background: currentColor;
	display: block;
	height: 8px;
	position: relative;
	width: 5px;
}

.lila-player__speaker-icon::before {
	border-bottom: 7px solid transparent;
	border-right: 7px solid currentColor;
	border-top: 7px solid transparent;
	content: "";
	position: absolute;
	right: -1px;
	top: -3px;
}

.lila-player.is-muted .lila-player__speaker {
	color: var(--lila-discret);
}

.lila-player__slider {
	accent-color: var(--lila-corail);
	background: #fff;
	border: 1px solid var(--lila-filet);
	bottom: calc( 100% + 8px );
	cursor: pointer;
	padding: 6px 8px;
	position: absolute;
	right: -6px;
	width: 116px;
	z-index: 3;
}

/* ---- Liste des séries ---- */

/* La liste reprend la grille de la page d'une série : même colonne de 980 px,
   même vignette de 160 px, même socle coloré. Le compteur d'épisodes est passé
   en surligne au-dessus du nom — accroché à droite d'une ligne de mille pixels,
   il laissait deux cent cinquante pixels de vide au milieu de chaque ligne. */
.lila-series {
	padding: 64px 0 96px;
}

.lila-series__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lila-series__item {
	border-bottom: 1px solid var(--lila-filet);
	display: grid;
	gap: 28px;
	grid-template-columns: 160px minmax(0, 1fr);
	padding: 28px 0;
}

/* `align-self` sans quoi le lien s'étire sur toute la hauteur de la ligne et son
   socle coloré flotte loin sous l'image — le défaut déjà rencontré sur la page
   d'une série. */
.lila-series__cover {
	align-self: start;
	display: block;
}

.lila-series__text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.lila-series__name {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

#lila-radio a.lila-series__name {
	color: var(--lila-encre);
}

#lila-radio a.lila-series__name:hover {
	color: var(--lila-corail);
}

.lila-series__description {
	color: var(--lila-texte);
	font-size: 16px;
	line-height: 1.6;
	max-width: 62ch;
}

/* ---- Textes coupés, et de quoi les rouvrir ---------------------------

   Trois lignes visibles, soit environ 180 signes : de quoi accrocher sans que
   la liste avance par à-coups selon qu'une série est longuement décrite ou pas
   du tout. Le texte entier est dans la page ; c'est la mise en page qui le
   coupe, et la flèche qui le rend. Le bouton n'est posé par le script que là où
   quelque chose est réellement caché.
------------------------------------------------------------------------- */

.lila-clampable {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.lila-clampable.is-open {
	display: block;
	-webkit-line-clamp: unset;
	overflow: visible;
}

.lila-unfold {
	align-items: center;
	align-self: flex-start;
	background: none;
	border: 0;
	color: var(--lila-corail-texte);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	gap: 6px;
	letter-spacing: 0.06em;
	margin-top: 6px;
	padding: 2px 0;
	text-transform: uppercase;
}

.lila-unfold:hover .lila-unfold__label {
	box-shadow: inset 0 -2px 0 var(--lila-or);
}

.lila-unfold:focus-visible {
	outline: 2px solid var(--lila-corail);
	outline-offset: 2px;
}

/* Chevron en deux bordures, comme le triangle de lecture et l'enceinte du
   volume : ni image, ni police d'icônes. */
.lila-unfold__arrow {
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	display: block;
	height: 6px;
	margin-top: -3px;
	transform: rotate( 45deg );
	transition: transform 150ms ease;
	width: 6px;
}

.lila-unfold[aria-expanded="true"] .lila-unfold__arrow {
	margin-top: 2px;
	transform: rotate( -135deg );
}

.lila-more {
	background: none;
	border: 2px solid var(--lila-corail);
	color: var(--lila-corail-texte);
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 32px auto 0;
	padding: 12px 28px;
	text-transform: uppercase;
	transition: background-color 150ms ease, color 150ms ease;
}

.lila-more:hover {
	background: var(--lila-corail);
	color: #fff;
}

.lila-more:focus-visible {
	outline: 2px solid var(--lila-corail);
	outline-offset: 3px;
}

/* ---- Capsules ---- */

.lila-capsules {
	background: var(--lila-creme);
	padding: 64px 0;
}

.lila-capsules__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 32px;
}

.lila-capsules__title {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.lila-capsules__lead {
	color: var(--lila-texte);
	font-size: 16px;
}

.lila-capsules__grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat( 3, minmax(0, 1fr) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.lila-capsule {
	background: #fff;
	display: flex;
	flex-direction: column;
}

.lila-capsule__cover {
	background: rgba( 231, 63, 37, 0.16 );
	display: block;
}

.lila-capsule__cover .lila-cover {
	aspect-ratio: 16 / 9;
}

.lila-capsule__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px 20px;
}

.lila-capsule__title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

#lila-radio a.lila-capsule__title {
	color: var(--lila-encre);
}

#lila-radio a.lila-capsule__title:hover {
	color: var(--lila-corail);
}

/* ---- Page d'une série ---- */

/* Même colonne que la liste en dessous, et une couverture de la largeur des
   photos d'épisode : le bandeau et la liste s'alignent au pixel au lieu de
   paraître deux blocs posés côte à côte. */
.lila-hero__inner--serie {
	gap: 28px;
	grid-template-columns: 160px minmax(0, 1fr);
	max-width: 980px;
}

.lila-serie__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.lila-serie__title {
	font-size: clamp( 30px, 4vw, 42px );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.lila-serie__description {
	color: #3c3c3c;
	font-size: 16px;
	line-height: 1.6;
	max-width: 60ch;
}

/* Même socle coloré que les photos d'épisode : le bandeau et la liste se
   répondent au lieu de paraître deux blocs sans rapport. */
.lila-serie__cover {
	display: block;
}

/* ---- Épisodes d'une série : la ligne-portrait -------------------------

   La liste est resserrée à 980 px : à pleine largeur, un prénom de cinq
   lettres et une durée aux deux bouts laissaient mille pixels de vide au
   milieu. C'est ce vide qui donnait à la page son air maigre, pas la palette.

   Chaque ligne porte la photo de l'épisode, sa surligne, son titre, le début
   de son résumé et son lecteur. Le gros chiffre décoratif a disparu : le rang
   a rejoint la surligne, et c'est la photo qui donne le rythme.
------------------------------------------------------------------------- */

.lila-episodes {
	list-style: none;
	margin: 0 auto;
	max-width: 980px;
	padding: 44px 0 88px;
}

.lila-episodes__item {
	border-bottom: 1px solid var(--lila-filet);
	display: grid;
	gap: 28px;
	grid-template-columns: 160px minmax(0, 1fr);
	padding: 28px 0;
}

/*
 * Pas de `content-visibility: auto` ici, malgré l'économie qu'il promet sur une
 * série de vingt-quatre lignes : constaté en local, il fait sauter la peinture
 * des photos — chargées, dimensionnées, mais jamais dessinées. `loading="lazy"`
 * sur les images suffit à ne pas les télécharger toutes d'un coup, et le lecteur
 * ne demande plus rien au réseau avant le premier clic.
 */

.lila-episodes__cover {
	/* Sans cela, le lien s'étire sur toute la hauteur de la ligne et la photo se
	   retrouve centrée verticalement dans une ligne bien plus haute qu'elle. */
	align-self: start;
	display: block;
}

.lila-episodes__body {
	display: flex;
	flex-direction: column;
}

.lila-episodes__kicker {
	color: var(--lila-texte);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lila-episodes__title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
	margin-top: 4px !important;
}

#lila-serie a.lila-episodes__title {
	color: var(--lila-encre);
}

#lila-serie a.lila-episodes__title:hover {
	color: var(--lila-corail-texte);
}

.lila-episodes__summary {
	color: var(--lila-texte);
	font-size: 15px;
	line-height: 1.6;
	margin-top: 6px !important;
	max-width: 62ch;
}

.lila-episodes__item .lila-player {
	margin-top: 14px;
}

.lila-episodes__soon {
	color: var(--lila-discret);
	font-size: 13px;
	font-style: italic;
	margin-top: 12px !important;
}

.lila-empty {
	color: var(--lila-texte);
	padding: 48px 0 80px;
}

/* ---- Page d'un épisode et d'une capsule ------------------------------

   Le bandeau reprend la composition de la page d'une série : l'illustration à
   gauche, la fiche à droite. Elle existe pour presque tous les épisodes et pour
   toutes les capsules, et ne paraissait nulle part sur leur propre page, qui
   s'ouvrait sur un titre posé dans du vide. Sans illustration, la fiche reprend
   toute la ligne plutôt que de laisser une colonne creuse.
------------------------------------------------------------------------- */

.lila-hero__inner--episode {
	align-items: start;
	gap: 32px;
	grid-template-columns: 220px minmax(0, 1fr);
}

.lila-hero__inner--nue {
	grid-template-columns: minmax(0, 1fr);
}

.lila-episode__cover {
	display: block;
}

.lila-episode__header {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

#lila-episode a.lila-back {
	color: var(--lila-corail-texte);
}

.lila-episode__title {
	font-size: clamp( 30px, 4.5vw, 44px );
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
}

.lila-episode__meta {
	color: var(--lila-discret);
	display: flex;
	font-size: 14px;
	gap: 18px;
}

.lila-episode__duration {
	font-variant-numeric: tabular-nums;
}

.lila-episode__content {
	font-size: 17px;
	line-height: 1.75;
	max-width: 680px;
	padding: 36px 0 0;
}

.lila-episode__content p {
	margin: 0 0 18px !important;
}

.lila-episode__content blockquote {
	border-left: 4px solid var(--lila-jaune);
	font-size: 20px;
	font-style: italic;
	line-height: 1.55;
	margin: 0 0 28px;
	padding-left: 20px;
}

.lila-episode__nav {
	border-top: 1px solid var(--lila-filet);
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	margin: 24px 0 80px;
	max-width: 680px;
	padding-top: 24px;
}

.lila-episode__nav .lila-underline {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

/* ---- Tablette ---- */

@media (max-width: 980px) {
	.lila-hero__inner,
	.lila-featured {
		gap: 32px;
		grid-template-columns: minmax(0, 1fr);
	}

	#lila-radio .lila-hero__drawing {
		margin: 0 auto;
		max-width: 320px;
	}

	.lila-hero__inner--serie {
		grid-template-columns: 120px minmax(0, 1fr);
	}

	.lila-featured__cover {
		max-width: 300px;
	}

	.lila-capsules__grid {
		grid-template-columns: repeat( 2, minmax(0, 1fr) );
	}

	.lila-series {
		padding: 48px 0 64px;
	}
}

/* ---- Téléphone ---- */

@media (max-width: 640px) {
	.lila-hero__inner {
		padding: 24px 0;
	}

	#lila-radio .lila-hero__drawing {
		max-width: 62%;
	}

	.lila-featured {
		padding: 40px 0 40px;
	}

	.lila-series__item {
		gap: 16px;
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.lila-series__name {
		font-size: 19px;
	}

	.lila-series__description {
		display: none;
	}

	.lila-capsules__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photo et titre côte à côte, résumé et lecteur en pleine largeur dessous :
	   le lecteur récupère toute la colonne au lieu d'être coincé à droite d'une
	   vignette. C'est la grille qu'emploie déjà la liste des séries sur /radio. */
	.lila-episodes {
		padding: 28px 0 56px;
	}

	.lila-episodes__item {
		gap: 12px 16px;
		grid-template-columns: 96px minmax(0, 1fr);
		padding: 20px 0;
	}

	.lila-episodes__body {
		display: contents;
	}

	.lila-episodes__kicker {
		font-size: 11px;
		grid-column: 2;
	}

	.lila-episodes__title {
		font-size: 18px;
		grid-column: 2;
		margin-top: 2px !important;
	}

	.lila-episodes__summary,
	.lila-episodes__item .lila-player,
	.lila-episodes__soon {
		grid-column: 1 / -1;
	}

	.lila-episodes__item .lila-player {
		margin-top: 4px;
	}

	.lila-episode__nav {
		flex-direction: column;
		gap: 12px;
	}
}

/* ---- À écouter ensuite -----------------------------------------------

   Au pied d'une série, trois voisines prises à la suite dans le catalogue. Sans
   elles, la page se terminait sur le dernier épisode et le seul chemin restant
   était le retour en haut.
------------------------------------------------------------------------- */

.lila-more-series {
	background: var(--lila-creme);
	padding: 48px 0 64px;
}

.lila-more-series__grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat( 3, minmax(0, 1fr) );
	list-style: none;
	margin: 0;
	padding: 0;
}

.lila-more-series__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.lila-more-series__cover {
	display: block;
}

.lila-more-series__name {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

#lila-serie a.lila-more-series__name {
	color: var(--lila-encre);
}

#lila-serie a.lila-more-series__name:hover {
	color: var(--lila-corail-texte);
}

.lila-more-series__name::before {
	background: var(--lila-serie-couleur, var(--lila-corail));
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 0.4em;
	margin-right: 0.36em;
	vertical-align: middle;
	width: 0.4em;
}

@media (max-width: 980px) {
	.lila-hero__inner--episode {
		grid-template-columns: 160px minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.lila-hero__inner--episode {
		grid-template-columns: minmax(0, 1fr);
	}

	.lila-episode__cover {
		max-width: 220px;
	}

	.lila-more-series__grid {
		gap: 20px;
		grid-template-columns: minmax(0, 1fr);
	}

	.lila-more-series__item {
		display: grid;
		gap: 4px 16px;
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.lila-more-series__cover {
		grid-row: span 2;
	}

	.lila-more-series__name {
		font-size: 18px;
	}
}

/* ---- La barre de lecture ---------------------------------------------

   Ancrée en bas de l'écran, hors du contenu que la navigation remplace : c'est
   cette position, et elle seule, qui fait survivre une écoute au passage d'une
   série à l'autre. Elle n'apparaît qu'à la première lecture et se ferme d'une
   croix.

   La portée `.lila-dock` reprend la neutralisation du système hérité que les
   trois identifiants de page appliquent plus haut : la barre vit hors d'eux,
   elle hériterait sinon de Poppins et du bleu pétrole du thème enfant.
------------------------------------------------------------------------- */

.lila-dock {
	background: #fff;
	border-top: 1px solid var(--lila-filet);
	bottom: 0;
	box-shadow: 0 -6px 24px rgba( 0, 0, 0, 0.1 );
	color: var(--lila-encre);
	font-family: Raleway, "Helvetica Neue", Arial, sans-serif;
	left: 0;
	position: fixed;
	right: 0;
	z-index: 9000;
}

.lila-dock p,
.lila-dock a {
	margin: 0;
}

.lila-dock a {
	color: var(--lila-encre);
	text-decoration: none;
}

.lila-dock img {
	border-radius: 0;
	box-shadow: none;
	display: block;
	height: auto;
	margin: 0;
}

/* Le pied de page reste atteignable : sans cette réserve, la barre recouvre ses
   dernières lignes. */
body.lila-has-dock {
	padding-bottom: 92px;
}

.lila-dock__inner {
	align-items: center;
	display: flex;
	gap: 16px;
	margin: 0 auto;
	max-width: 980px;
	padding: 12px 0;
	width: 95%;
}

.lila-dock__cover {
	flex: none;
	width: 52px;
}

.lila-dock__cover img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.lila-dock__meta {
	flex: 0 1 200px;
	min-width: 0;
}

.lila-dock__title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lila-dock__title:hover {
	color: var(--lila-corail-texte);
}

.lila-dock__serie {
	color: var(--lila-discret);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Dans la barre, le lecteur perd l'encadré crème et le filet corail qui le
   détachent au fil d'une page : ici c'est la barre elle-même qui fait le fond,
   et l'encadré s'y répétait en doublon. */
.lila-player--dock {
	/* Le voile qui efface la part non lue de l'onde prend la couleur du fond :
	   blanc ici, sans quoi il laisse une bande crème en travers de la barre. */
	--lila-player-veil: #fff;

	background: none;
	border-left: 0;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
}

.lila-dock__close {
	background: none;
	border: 0;
	color: var(--lila-discret);
	cursor: pointer;
	flex: none;
	height: 32px;
	padding: 0;
	position: relative;
	width: 32px;
}

.lila-dock__close:hover {
	color: var(--lila-corail);
}

.lila-dock__close:focus-visible {
	outline: 2px solid var(--lila-corail);
	outline-offset: 2px;
}

/* La croix en deux traits, comme le reste des icônes de l'espace : ni image, ni
   police d'icônes. */
.lila-dock__close span,
.lila-dock__close span::before {
	background: currentColor;
	content: "";
	height: 2px;
	left: 50%;
	position: absolute;
	top: 50%;
	width: 14px;
}

.lila-dock__close span {
	margin: -1px 0 0 -7px;
	transform: rotate( 45deg );
}

.lila-dock__close span::before {
	left: 0;
	margin: -1px 0 0;
	transform: rotate( -90deg );
}

/* La façade dont la barre joue l'épisode : son bouton reste plein, pour qu'on
   retrouve d'un coup d'œil, dans une liste de vingt-quatre lignes, celle qui
   parle. */
.lila-player.is-active .lila-player__button {
	box-shadow: 0 0 0 3px rgba( 231, 63, 37, 0.24 );
}

@media (max-width: 780px) {
	.lila-dock__meta {
		flex: 1 1 auto;
	}

	/* Sur un téléphone, l'onde n'a plus la place d'être lisible : le bouton, le
	   titre et le compteur suffisent à savoir ce qui joue et à l'arrêter. */
	.lila-player--dock .lila-player__wave {
		display: none;
	}

	.lila-player--dock {
		flex: none;
	}

	.lila-dock__cover {
		width: 40px;
	}

	body.lila-has-dock {
		padding-bottom: 80px;
	}
}

@media (prefers-reduced-motion: reduce) {
	#lila-radio a,
	#lila-serie a,
	#lila-episode a,
	.lila-player__button,
	.lila-player__wave::after {
		transition: none;
	}

	.lila-player__button:hover {
		transform: none;
	}
}