@charset "UTF-8";

/**
 * Fichier : designs/cassette/assets/css/cassette.css
 * Apparence du design Cassette.
 *
 * Une cassette réinterprétée : deux bobines, et une bande qui passe de l'une
 * à l'autre au fil de l'écoute. La bande enroulée autour du moyeu va de 28 à
 * 92 pour cent du rayon : à gauche ce qui reste à écouter, à droite ce qui
 * est écouté. Le diamètre des bobines ne change jamais.
 *
 * Tout tient en pseudo-éléments et en arrière-plans : rien n'entre dans le
 * balisage ni dans l'arbre d'accessibilité. La barre de progression reste la
 * seule commande de position, les bobines en donnent une lecture d'ensemble.
 *
 * Aucun type de contenu n'est connu ici. La couleur arrive avec le contenu,
 * par --rle-gp-accent et --rle-gp-accent-texte, et la valeur de repli est
 * celle du design. L'état et le mode se lisent sur data-rle-gp-etat et
 * data-rle-gp-mode, en CSS seul.
 *
 * Variables consommées :
 *
 *   --rle-gp-accent          couleur d'accent, portée par le contenu
 *   --rle-gp-accent-texte    icône posée sur l'accent
 *   --rle-gp-rayon           rayon des angles
 *   --rle-gp-progression     avancement de la lecture, de 0 à 1
 *   --rle-gp-vitesse         vitesse de lecture, 1 par défaut
 *   --rle-gp-fond-plein      fond de la vidéo
 *
 * Accessibilité WCAG 2.1 niveau AA :
 *   - L'accent ne sert qu'aux éléments d'interface, jamais au texte posé sur
 *     le fond : il y tient le rapport de 3 pour 1.
 *   - Texte et texte atténué dépassent 4,5 pour 1, bordures des commandes et
 *     contour de focus dépassent 3 pour 1, dans les deux registres.
 *   - L'état de lecture reste porté par les icônes et les intitulés du
 *     lecteur : le mouvement des bobines n'en est jamais la seule indication.
 *   - Tout mouvement cesse lorsque le système demande un mouvement réduit.
 *   - Le contraste renforcé retire les halos et pose des traits pleins.
 */

/* Interpolation

   La progression est déclarée comme un nombre : le moteur l'interpole entre
   deux mises à jour du lecteur. L'angle des rayons et le souffle du ruban
   sont déclarés de même pour s'animer en CSS seul. */

@property --rle-gp-progression {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --cassette-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --cassette-souffle {
	syntax: "<number>";
	inherits: false;
	initial-value: 12;
}

/* Mesures et registre clair

   Le registre clair est celui par défaut. Les espacements, les rayons et les
   dimensions des commandes sont posés ici, une fois pour toutes. */

[data-rle-gp-design="cassette"] {
	--cassette-teinte: var(--rle-gp-accent, #7c4dea);
	--cassette-teinte-texte: var(--rle-gp-accent-texte, #ffffff);
	--cassette-police: var(--discovery-font-active, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);

	--cassette-espace-fin: 0.125rem;
	--cassette-espace-1: 0.25rem;
	--cassette-espace-2: 0.5rem;
	--cassette-espace-3: 0.75rem;
	--cassette-espace-4: 1rem;
	--cassette-espace-5: 1.25rem;
	--cassette-espace-6: 1.5rem;
	--cassette-espace-8: 2rem;

	--cassette-rayon: var(--rle-gp-rayon, 16px);
	--cassette-rayon-fin: 4px;
	--cassette-rayon-petit: calc(var(--cassette-rayon, 16px) * 0.5);
	--cassette-rayon-moyen: calc(var(--cassette-rayon, 16px) * 0.75);
	--cassette-rayon-grand: calc(var(--cassette-rayon, 16px) * 1.25);
	--cassette-rayon-cadre: calc(var(--cassette-rayon, 16px) * 1.5);
	--cassette-rayon-scene: calc(var(--cassette-rayon, 16px) * 2);
	--cassette-rayon-pilule: 999px;
	--cassette-rayon-cercle: 50%;

	--cassette-commande: 3rem;
	--cassette-principale: 4.75rem;
	--cassette-principale-complet: 3.5rem;
	--cassette-mini: 3rem;
	--cassette-bobine: clamp(5.5rem, 3rem + 10vw, 10.5rem);
	--cassette-piste: 4px;
	--cassette-poignee: 1rem;
	--cassette-chevron: 0.35rem;

	--rle-gp-fond: #f7f6fa;
	--rle-gp-fond-attenue: #eeecf3;
	--rle-gp-texte: #15131a;
	--rle-gp-texte-attenue: #58535f;
	--rle-gp-bordure: #857f8f;

	--cassette-page-fond: #f3f2f6;
	--cassette-verre: #ffffff;
	--cassette-verre-bord: #e2dfe8;
	--cassette-corps: #f5f3f8;
	--cassette-structure: #dcd7e3;
	--cassette-moyeu: #d8d3df;
	--cassette-moyeu-centre: #ffffff;
	--cassette-moyeu-metal: #aea6b9;
	--cassette-rayons: #bdb6c7;
	--cassette-bande-a: #d4cddd;
	--cassette-bande-b: #c6bed1;
	--cassette-bande-vide: #d8d4df;
	--cassette-lumiere: var(--cassette-teinte, #7c4dea);
	--cassette-ruban-intensite: 0.35;
	--cassette-halo: transparent;
	--cassette-lecture-fond: var(--cassette-teinte, #7c4dea);
	--cassette-lecture-icone: var(--cassette-teinte-texte, #ffffff);
	--cassette-focus: #a95200;
	--cassette-voile: rgba(21, 19, 26, 0.45);
	--cassette-ombre: 0 1px 2px rgba(21, 19, 26, 0.06), 0 8px 24px rgba(21, 19, 26, 0.06);
	--cassette-ombre-couverture: 0 10px 30px rgba(21, 19, 26, 0.25);

	font-family: var(--cassette-police, sans-serif);
	color: var(--rle-gp-texte, #15131a);
	line-height: 1.5;
}

/* Registre sombre

   La nuance lumineuse des liserés et du ruban se calcule à partir de la
   couleur d'accent fournie : elle suit donc la couleur du contenu. */

[data-rle-gp-design="cassette"][data-rle-gp-mode="sombre"] {
	--rle-gp-fond: #0b0a10;
	--rle-gp-fond-attenue: #17151e;
	--rle-gp-texte: #f4f2f8;
	--rle-gp-texte-attenue: #aaa5b6;
	--rle-gp-bordure: #6e697b;

	--cassette-page-fond: #050408;
	--cassette-verre: #100e16;
	--cassette-verre-bord: #262330;
	--cassette-corps: #121017;
	--cassette-structure: #2a2733;
	--cassette-moyeu: #2a2732;
	--cassette-moyeu-centre: #0b0a10;
	--cassette-moyeu-metal: #4c4858;
	--cassette-rayons: #3d3947;
	--cassette-bande-a: #2d2834;
	--cassette-bande-b: #1d1a23;
	--cassette-bande-vide: #2a2733;
	--cassette-lumiere: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 72%, var(--rle-gp-texte, #f4f2f8));
	--cassette-ruban-intensite: 1;
	--cassette-halo: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 24%, transparent);
	--cassette-lecture-fond: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 14%, transparent);
	--cassette-lecture-icone: var(--rle-gp-texte, #f4f2f8);
	--cassette-focus: #ffb454;
	--cassette-voile: rgba(0, 0, 0, 0.6);
	--cassette-ombre: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 40px rgba(0, 0, 0, 0.45);
	--cassette-ombre-couverture: 0 10px 30px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
	[data-rle-gp-design="cassette"][data-rle-gp-mode="auto"] {
		--rle-gp-fond: #0b0a10;
		--rle-gp-fond-attenue: #17151e;
		--rle-gp-texte: #f4f2f8;
		--rle-gp-texte-attenue: #aaa5b6;
		--rle-gp-bordure: #6e697b;

		--cassette-page-fond: #050408;
		--cassette-verre: #100e16;
		--cassette-verre-bord: #262330;
		--cassette-corps: #121017;
		--cassette-structure: #2a2733;
		--cassette-moyeu: #2a2732;
		--cassette-moyeu-centre: #0b0a10;
		--cassette-moyeu-metal: #4c4858;
		--cassette-rayons: #3d3947;
		--cassette-bande-a: #2d2834;
		--cassette-bande-b: #1d1a23;
		--cassette-bande-vide: #2a2733;
		--cassette-lumiere: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 72%, var(--rle-gp-texte, #f4f2f8));
		--cassette-ruban-intensite: 1;
		--cassette-halo: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 24%, transparent);
		--cassette-lecture-fond: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 14%, transparent);
		--cassette-lecture-icone: var(--rle-gp-texte, #f4f2f8);
		--cassette-focus: #ffb454;
		--cassette-voile: rgba(0, 0, 0, 0.6);
		--cassette-ombre: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 12px 40px rgba(0, 0, 0, 0.45);
		--cassette-ombre-couverture: 0 10px 30px rgba(0, 0, 0, 0.45);
	}
}

/* Focus

   Le contour reprend la couleur de focus du registre, plus épais que celui
   de la feuille de base. */

[data-rle-gp-design="cassette"] :focus-visible,
[data-rle-gp-design="cassette"]:focus-visible {
	outline: 3px solid var(--cassette-focus, #a95200);
	outline-offset: 2px;
}

/* Page du lecteur

   La page dédiée prend le fond du registre du lecteur qu'elle accueille. */

.rle-gp-page-lecteur:has([data-rle-gp-design="cassette"]) {
	--cassette-page-fond: #f3f2f6;
	margin: 0;
	background: var(--cassette-page-fond, #f3f2f6);
}

.rle-gp-page-lecteur:has([data-rle-gp-design="cassette"][data-rle-gp-mode="sombre"]) {
	--cassette-page-fond: #050408;
}

@media (prefers-color-scheme: dark) {
	.rle-gp-page-lecteur:has([data-rle-gp-design="cassette"][data-rle-gp-mode="auto"]) {
		--cassette-page-fond: #050408;
	}
}

.rle-gp-page-lecteur:has([data-rle-gp-design="cassette"]) .rle-gp-page-lecteur__contenu {
	max-width: 76rem;
	margin: 0 auto;
	padding: var(--cassette-espace-6, 1.5rem) var(--cassette-espace-4, 1rem);
}

/* Bobine

   Un pseudo-élément, six couches, de haut en bas : le moyeu, la sortie de
   bande, le liseré lumineux, le corps et ses cercles de structure, la bande
   enroulée, les rayons. Seule la couche des rayons tourne, par l'angle
   enregistré. */

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::before,
[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::after,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::before,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::after,
[data-rle-gp-design="cassette"] .gp-complet__progression::before,
[data-rle-gp-design="cassette"] .gp-complet__progression::after,
[data-rle-gp-design="cassette"] .gp-bouton__declencheur::before {
	content: "";
	box-sizing: border-box;
	aspect-ratio: 1;
	border-radius: var(--cassette-rayon-cercle, 50%);
	background:
		radial-gradient(closest-side, var(--cassette-moyeu-centre, #ffffff) 0 4.5%, var(--cassette-moyeu-metal, #aea6b9) 5% 10.5%, var(--cassette-corps, #f5f3f8) 11% 12%, var(--cassette-moyeu, #d8d3df) 12.5% 13.5%, transparent 14%),
		linear-gradient(var(--cassette-sortie-direction, to right), transparent calc(50% + var(--cassette-pile, 60%) / 2), var(--cassette-sortie, transparent) calc(50% + var(--cassette-pile, 60%) / 2)) no-repeat center / 100% 3px,
		radial-gradient(closest-side, transparent calc(var(--cassette-pile, 60%) - 1%), var(--cassette-lumiere, #7c4dea) calc(var(--cassette-pile, 60%) - 1%) var(--cassette-pile, 60%), color-mix(in srgb, var(--cassette-teinte, #7c4dea) 20%, transparent) var(--cassette-pile, 60%), transparent calc(var(--cassette-pile, 60%) + 3.5%)),
		radial-gradient(closest-side, transparent 0 var(--cassette-pile, 60%), var(--cassette-corps, #f5f3f8) var(--cassette-pile, 60%) 94%, var(--cassette-structure, #dcd7e3) 94% 95%, var(--cassette-corps, #f5f3f8) 95% 97.5%, var(--cassette-structure, #dcd7e3) 97.5% 98.5%, var(--cassette-corps, #f5f3f8) 98.5%),
		radial-gradient(closest-side, transparent 0 26%, var(--cassette-bande-a, #d4cddd) 26.0% 27.4%, var(--cassette-bande-b, #c6bed1) 27.4% 28.4%, var(--cassette-bande-a, #d4cddd) 28.4% 29.8%, var(--cassette-bande-b, #c6bed1) 29.8% 30.8%, var(--cassette-bande-a, #d4cddd) 30.8% 32.2%, var(--cassette-bande-b, #c6bed1) 32.2% 33.2%, var(--cassette-bande-a, #d4cddd) 33.2% 34.6%, var(--cassette-bande-b, #c6bed1) 34.6% 35.6%, var(--cassette-bande-a, #d4cddd) 35.6% 37.0%, var(--cassette-bande-b, #c6bed1) 37.0% 38.0%, var(--cassette-bande-a, #d4cddd) 38.0% 39.4%, var(--cassette-bande-b, #c6bed1) 39.4% 40.4%, var(--cassette-bande-a, #d4cddd) 40.4% 41.8%, var(--cassette-bande-b, #c6bed1) 41.8% 42.8%, var(--cassette-bande-a, #d4cddd) 42.8% 44.2%, var(--cassette-bande-b, #c6bed1) 44.2% 45.2%, var(--cassette-bande-a, #d4cddd) 45.2% 46.6%, var(--cassette-bande-b, #c6bed1) 46.6% 47.6%, var(--cassette-bande-a, #d4cddd) 47.6% 49.0%, var(--cassette-bande-b, #c6bed1) 49.0% 50.0%, var(--cassette-bande-a, #d4cddd) 50.0% 51.4%, var(--cassette-bande-b, #c6bed1) 51.4% 52.4%, var(--cassette-bande-a, #d4cddd) 52.4% 53.8%, var(--cassette-bande-b, #c6bed1) 53.8% 54.8%, var(--cassette-bande-a, #d4cddd) 54.8% 56.2%, var(--cassette-bande-b, #c6bed1) 56.2% 57.2%, var(--cassette-bande-a, #d4cddd) 57.2% 58.6%, var(--cassette-bande-b, #c6bed1) 58.6% 59.6%, var(--cassette-bande-a, #d4cddd) 59.6% 61.0%, var(--cassette-bande-b, #c6bed1) 61.0% 62.0%, var(--cassette-bande-a, #d4cddd) 62.0% 63.4%, var(--cassette-bande-b, #c6bed1) 63.4% 64.4%, var(--cassette-bande-a, #d4cddd) 64.4% 65.8%, var(--cassette-bande-b, #c6bed1) 65.8% 66.8%, var(--cassette-bande-a, #d4cddd) 66.8% 68.2%, var(--cassette-bande-b, #c6bed1) 68.2% 69.2%, var(--cassette-bande-a, #d4cddd) 69.2% 70.6%, var(--cassette-bande-b, #c6bed1) 70.6% 71.6%, var(--cassette-bande-a, #d4cddd) 71.6% 73.0%, var(--cassette-bande-b, #c6bed1) 73.0% 74.0%, var(--cassette-bande-a, #d4cddd) 74.0% 75.4%, var(--cassette-bande-b, #c6bed1) 75.4% 76.4%, var(--cassette-bande-a, #d4cddd) 76.4% 77.8%, var(--cassette-bande-b, #c6bed1) 77.8% 78.8%, var(--cassette-bande-a, #d4cddd) 78.8% 80.2%, var(--cassette-bande-b, #c6bed1) 80.2% 81.2%, var(--cassette-bande-a, #d4cddd) 81.2% 82.6%, var(--cassette-bande-b, #c6bed1) 82.6% 83.6%, var(--cassette-bande-a, #d4cddd) 83.6% 85.0%, var(--cassette-bande-b, #c6bed1) 85.0% 86.0%, var(--cassette-bande-a, #d4cddd) 86.0% 87.4%, var(--cassette-bande-b, #c6bed1) 87.4% 88.4%, var(--cassette-bande-a, #d4cddd) 88.4% 89.8%, var(--cassette-bande-b, #c6bed1) 89.8% 90.8%, var(--cassette-bande-a, #d4cddd) 90.8% 92.0%, transparent 92%),
		repeating-conic-gradient(from var(--cassette-angle, 0deg), var(--cassette-rayons, #bdb6c7) 0 2.5deg, var(--cassette-corps, #f5f3f8) 2.5deg 120deg);
	animation: cassette-rotation calc(10s / var(--rle-gp-vitesse, 1)) linear infinite;
	animation-play-state: paused;
	pointer-events: none;
}

/* Bobine de gauche : ce qui reste à écouter. Bobine de droite, et bobine
   unique du profil bouton : ce qui est écouté. */

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::before,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::before,
[data-rle-gp-design="cassette"] .gp-complet__progression::before {
	--cassette-pile: calc(28% + (1 - var(--rle-gp-progression, 0)) * 64%);
	--cassette-sortie-direction: to right;
}

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::after,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::after,
[data-rle-gp-design="cassette"] .gp-complet__progression::after,
[data-rle-gp-design="cassette"] .gp-bouton__declencheur::before {
	--cassette-pile: calc(28% + var(--rle-gp-progression, 0) * 64%);
	--cassette-sortie-direction: to left;
}

/* La bande ne sort des bobines que dans la scène sonore du plein écran. */
[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::before,
[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::after {
	--cassette-sortie: var(--cassette-lumiere, #7c4dea);
}

/* Les mini bobines portent une bande pleine : à leur taille, les sillons se
   brouillent. */
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::before,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::after,
[data-rle-gp-design="cassette"] .gp-complet__progression::before,
[data-rle-gp-design="cassette"] .gp-complet__progression::after,
[data-rle-gp-design="cassette"] .gp-bouton__declencheur::before {
	--cassette-bande-b: var(--cassette-bande-a, #d4cddd);
}

[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__scene::before,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__scene::after,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__progression::before,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__progression::after,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-complet__progression::before,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-complet__progression::after,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-bouton__declencheur::before {
	animation-play-state: running;
	filter: drop-shadow(0 0 0.5rem var(--cassette-halo, transparent));
}

/* Commandes

   Rondes et discrètes. Les icônes gardent l'affichage que la feuille de base
   leur donne selon l'état. */

[data-rle-gp-design="cassette"] .gp-plein__commande,
[data-rle-gp-design="cassette"] .gp-complet__commande {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cassette-commande, 3rem);
	min-height: var(--cassette-commande, 3rem);
	padding: 0;
	background: transparent;
	color: var(--rle-gp-texte, #15131a);
	border: 0;
	border-radius: var(--cassette-rayon-cercle, 50%);
	font: inherit;
	text-decoration: none;
	transition: background-color 160ms ease-out, transform 120ms ease-out;
}

[data-rle-gp-design="cassette"] .gp-plein__commande:hover,
[data-rle-gp-design="cassette"] .gp-complet__commande:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

[data-rle-gp-design="cassette"] .gp-plein__commande:active,
[data-rle-gp-design="cassette"] .gp-complet__commande:active {
	transform: scale(0.94);
}

[data-rle-gp-design="cassette"] .gp-plein__icone,
[data-rle-gp-design="cassette"] .gp-complet__icone {
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* La touche principale porte la teinte : cerclée et lumineuse en sombre,
   pleine en clair. */
[data-rle-gp-design="cassette"] .gp-plein__commande--principale,
[data-rle-gp-design="cassette"] .gp-complet__commande--principale {
	background: var(--cassette-lecture-fond, #7c4dea);
	color: var(--cassette-lecture-icone, #ffffff);
	box-shadow: inset 0 0 0 2px var(--cassette-teinte, #7c4dea), 0 0 1.25rem var(--cassette-halo, transparent);
}

[data-rle-gp-design="cassette"] .gp-plein__commande--principale {
	width: var(--cassette-principale, 4.75rem);
	height: var(--cassette-principale, 4.75rem);
	margin-inline: var(--cassette-espace-2, 0.5rem);
}

[data-rle-gp-design="cassette"] .gp-complet__commande--principale {
	width: var(--cassette-principale-complet, 3.5rem);
	height: var(--cassette-principale-complet, 3.5rem);
}

[data-rle-gp-design="cassette"] .gp-plein__commande--principale:hover,
[data-rle-gp-design="cassette"] .gp-complet__commande--principale:hover {
	background: var(--cassette-lecture-fond, #7c4dea);
	filter: brightness(1.08);
}

[data-rle-gp-design="cassette"] .gp-plein__transport,
[data-rle-gp-design="cassette"] .gp-complet__transport {
	--cassette-ecart-transport: var(--cassette-espace-2, 0.5rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cassette-espace-1, 0.25rem) var(--cassette-ecart-transport, 0.5rem);
}

/* Profil complet : deux rangées. La première, centrée, porte la lecture et
   les sauts. La seconde reprend, dans l'ordre du balisage, le volume, la
   vitesse et les commandes de fenêtre. Le passage à la ligne est un
   pseudo-élément placé entre les deux : l'ordre du clavier ne change pas. */
[data-rle-gp-design="cassette"] .gp-complet__transport {
	row-gap: var(--cassette-espace-2, 0.5rem);
}

[data-rle-gp-design="cassette"] .gp-complet__transport::before {
	content: "";
	flex-basis: 100%;
	height: 0;
	order: 1;
}

[data-rle-gp-design="cassette"] .gp-complet__transport > .gp-complet__commande:has(+ .gp-visuellement-cache + .gp-complet__volume),
[data-rle-gp-design="cassette"] .gp-complet__transport > .gp-complet__commande:has(+ .gp-visuellement-cache + .gp-complet__volume) ~ * {
	order: 2;
}

/* La vitesse, seule liste de la rangée, devient une pilule compacte. Son
   intitulé visible est l'option choisie, le libellé reste accessible. */
[data-rle-gp-design="cassette"] .gp-complet__transport .gp-complet__selecteur {
	min-height: 2.75rem;
	padding-block: 0;
	padding-inline: var(--cassette-espace-4, 1rem) calc(var(--cassette-espace-3, 0.75rem) + var(--cassette-chevron, 0.35rem) * 2 + var(--cassette-espace-2, 0.5rem));
	background:
		linear-gradient(45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right calc(var(--cassette-espace-3, 0.75rem) + var(--cassette-chevron, 0.35rem)) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem),
		linear-gradient(-45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right var(--cassette-espace-3, 0.75rem) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem),
		var(--rle-gp-fond-attenue, #eeecf3);
	appearance: none;
	-webkit-appearance: none;
}

/* Curseurs

   La piste parcourue prend la teinte, la poignée est un disque de la
   teinte. */

[data-rle-gp-design="cassette"] input[type="range"] {
	--cassette-remplissage: var(--rle-gp-progression, 0);
	width: 100%;
	height: 1.75rem;
	margin: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] input[type="range"]::-webkit-slider-runnable-track {
	height: var(--cassette-piste, 4px);
	border-radius: var(--cassette-rayon-pilule, 999px);
	background: linear-gradient(to right, var(--cassette-teinte, #7c4dea) calc(var(--cassette-remplissage, 0) * 100%), var(--cassette-bande-vide, #d8d4df) 0);
}

[data-rle-gp-design="cassette"] input[type="range"]::-moz-range-track {
	height: var(--cassette-piste, 4px);
	border-radius: var(--cassette-rayon-pilule, 999px);
	background: linear-gradient(to right, var(--cassette-teinte, #7c4dea) calc(var(--cassette-remplissage, 0) * 100%), var(--cassette-bande-vide, #d8d4df) 0);
}

[data-rle-gp-design="cassette"] input[type="range"]::-webkit-slider-thumb {
	box-sizing: border-box;
	width: var(--cassette-poignee, 1rem);
	height: var(--cassette-poignee, 1rem);
	margin-top: calc((var(--cassette-piste, 4px) - var(--cassette-poignee, 1rem)) / 2);
	background: var(--cassette-teinte, #7c4dea);
	border: 3px solid var(--rle-gp-fond, #f7f6fa);
	border-radius: var(--cassette-rayon-cercle, 50%);
	box-shadow: 0 0 0 1px var(--cassette-teinte, #7c4dea), 0 0 0.75rem var(--cassette-halo, transparent);
	appearance: none;
	-webkit-appearance: none;
}

[data-rle-gp-design="cassette"] input[type="range"]::-moz-range-thumb {
	box-sizing: border-box;
	width: var(--cassette-poignee, 1rem);
	height: var(--cassette-poignee, 1rem);
	background: var(--cassette-teinte, #7c4dea);
	border: 3px solid var(--rle-gp-fond, #f7f6fa);
	border-radius: var(--cassette-rayon-cercle, 50%);
	box-shadow: 0 0 0 1px var(--cassette-teinte, #7c4dea), 0 0 0.75rem var(--cassette-halo, transparent);
}

/* Volume : une pilule compacte qui englobe l'icône du haut-parleur, placée
   juste avant le curseur dans le balisage. L'ordre du clavier ne change pas.
   La piste reste neutre : elle ne se confond pas avec la progression. */
[data-rle-gp-design="cassette"] input.gp-plein__volume,
[data-rle-gp-design="cassette"] input.gp-complet__volume {
	--cassette-remplissage: 0;
	--cassette-teinte: var(--rle-gp-texte-attenue, #58535f);
	--cassette-halo: transparent;
	box-sizing: content-box;
	width: 4.5rem;
	height: 2.75rem;
	margin-inline-start: calc(-1 * (var(--cassette-commande, 3rem) + var(--cassette-ecart-transport, 0.5rem)));
	padding-block: 0;
	padding-inline: calc(var(--cassette-commande, 3rem) - var(--cassette-espace-1, 0.25rem)) var(--cassette-espace-3, 0.75rem);
	background-color: var(--rle-gp-fond-attenue, #eeecf3);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-pilule, 999px);
}

/* Sélecteurs et bascules, communs aux deux profils. */
[data-rle-gp-design="cassette"] .gp-complet__selecteur,
[data-rle-gp-design="cassette"] .gp-complet__bascule,
[data-rle-gp-design="cassette"] .gp-plein__bascule {
	width: auto;
	max-width: 100%;
	min-height: 2.5rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem);
	background: var(--rle-gp-fond-attenue, #eeecf3);
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-pilule, 999px);
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-complet__bascule[aria-pressed="true"],
[data-rle-gp-design="cassette"] .gp-plein__bascule[aria-pressed="true"] {
	border-color: var(--cassette-teinte, #7c4dea);
	box-shadow: inset 0 0 0 1px var(--cassette-teinte, #7c4dea);
	font-weight: 600;
}

/* Profil plein écran */

[data-rle-gp-design="cassette"].gp-plein {
	display: grid;
	gap: var(--cassette-espace-5, 1.25rem) var(--cassette-espace-8, 2rem);
	padding: clamp(var(--cassette-espace-4, 1rem), calc(var(--cassette-espace-2, 0.5rem) + 2vw), var(--cassette-espace-8, 2rem));
	background:
		radial-gradient(60rem 30rem at 10% -10%, color-mix(in srgb, var(--cassette-teinte, #7c4dea) 10%, transparent), transparent 70%),
		var(--rle-gp-fond, #f7f6fa);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-cadre, 24px);
}

[data-rle-gp-design="cassette"] .gp-plein__entete {
	display: grid;
	grid-template-columns: 2.75rem 1fr 2.75rem;
	align-items: start;
	gap: var(--cassette-espace-3, 0.75rem);
	text-align: center;
}

[data-rle-gp-design="cassette"] .gp-plein__identite {
	grid-column: 2;
}

[data-rle-gp-design="cassette"] .gp-plein__titre {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
}

[data-rle-gp-design="cassette"] .gp-plein__sous-titre {
	margin: var(--cassette-espace-1, 0.25rem) 0 0;
	color: var(--rle-gp-texte-attenue, #58535f);
}

[data-rle-gp-design="cassette"] .gp-plein__fermer {
	grid-column: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--rle-gp-texte, #15131a);
	border-radius: var(--cassette-rayon-cercle, 50%);
}

[data-rle-gp-design="cassette"] .gp-plein__fermer:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

/* Scène sonore : un panneau vitré, les deux bobines, et le ruban qui passe
   sous l'illustration. En clair, le corps du ruban et son halo sont
   atténués : posés sur un fond lumineux, ils pèsent plus qu'en sombre. Le
   ruban respire pendant la lecture. */
[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene {
	position: relative;
	display: grid;
	place-items: center;
	min-height: calc(var(--cassette-bobine, 10.5rem) + 3rem);
	background:
		linear-gradient(var(--cassette-lumiere, #7c4dea), var(--cassette-lumiere, #7c4dea)) no-repeat center / 64% 3px,
		linear-gradient(to bottom, color-mix(in srgb, var(--cassette-bande-b, #c6bed1) calc(var(--cassette-ruban-intensite, 1) * 100%), transparent), color-mix(in srgb, var(--cassette-bande-a, #d4cddd) calc(var(--cassette-ruban-intensite, 1) * 100%), transparent) 50%, color-mix(in srgb, var(--cassette-bande-b, #c6bed1) calc(var(--cassette-ruban-intensite, 1) * 100%), transparent)) no-repeat center / 64% 8px,
		radial-gradient(closest-side, color-mix(in srgb, var(--cassette-teinte, #7c4dea) calc(var(--cassette-souffle, 12) * var(--cassette-ruban-intensite, 1) * 1%), transparent), transparent) no-repeat center / 64% 1.75rem,
		var(--cassette-verre, #ffffff);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-scene, 32px);
	box-shadow: var(--cassette-ombre, none);
	animation: cassette-respiration 2.6s ease-in-out infinite alternate;
	animation-play-state: paused;
}

[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"].gp-plein--audio .gp-plein__scene {
	animation-play-state: running;
}

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::before,
[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::after {
	position: absolute;
	top: 50%;
	width: var(--cassette-bobine, 10.5rem);
	translate: -50% -50%;
}

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::before {
	left: 19%;
}

[data-rle-gp-design="cassette"].gp-plein--audio .gp-plein__scene::after {
	left: 81%;
}

[data-rle-gp-design="cassette"] .gp-plein__illustration {
	position: relative;
	z-index: 1;
	width: calc(var(--cassette-bobine, 10.5rem) * 0.82);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--cassette-rayon-moyen, 12px);
	box-shadow: 0 0 0 1px var(--cassette-verre-bord, #e2dfe8), var(--cassette-ombre-couverture, none);
}

/* Vidéo : l'image est le contenu, aucune bobine ne la recouvre. La scène
   devient un cadre. */
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__scene,
[data-rle-gp-design="cassette"].gp-complet--video .gp-complet__scene {
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--rle-gp-fond-plein, #000000);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-grand, 20px);
	box-shadow: var(--cassette-ombre, none);
}

/* Cadre vidéo au format du fichier. La largeur se déduit de la hauteur
   maximale et du rapport que le lecteur déclare, bornée par la largeur
   disponible : le cadre a exactement les proportions de l'image. */
[data-rle-gp-design="cassette"].gp-plein--video[data-rle-gp-orientation] .gp-plein__scene,
[data-rle-gp-design="cassette"].gp-complet--video[data-rle-gp-orientation] .gp-complet__scene {
	width: min(100%, calc(var(--rle-gp-video-hauteur, 60vh) * (var(--rle-gp-video-rapport, 16 / 9))));
	max-width: 100%;
	aspect-ratio: var(--rle-gp-video-rapport, 16 / 9);
	margin-inline: auto;
}

[data-rle-gp-design="cassette"].gp-plein--video[data-rle-gp-orientation] video.gp-plein__media,
[data-rle-gp-design="cassette"].gp-complet--video[data-rle-gp-orientation] video.gp-complet__media {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
}

[data-rle-gp-design="cassette"] video.gp-plein__media,
[data-rle-gp-design="cassette"] video.gp-complet__media {
	border-radius: var(--cassette-rayon-petit, 8px);
}

[data-rle-gp-design="cassette"] .gp-plein__media--repli,
[data-rle-gp-design="cassette"] .gp-complet__media--repli,
[data-rle-gp-design="cassette"] .gp-bouton__media--repli {
	width: 100%;
}

/* Plein cadre : un écran de projection horizontal et stable sur toute la
   largeur. La vidéo s'y inscrit entière, quel que soit son format, sans
   jamais être recadrée : une image verticale garde des bandes latérales.
   Dessous, les commandes exploitent la largeur et restent compactes. */
[data-rle-gp-design="cassette"].gp-complet:fullscreen,
[data-rle-gp-design="cassette"].gp-plein:fullscreen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	grid-auto-rows: auto;
	align-content: stretch;
	gap: var(--cassette-espace-3, 0.75rem);
	padding: var(--cassette-espace-4, 1rem) var(--cassette-espace-6, 1.5rem) var(--cassette-espace-4, 1rem);
	overflow: auto;
	background: var(--rle-gp-fond, #0b0a10);
	border: 0;
	border-radius: 0;
}

[data-rle-gp-design="cassette"].gp-complet:fullscreen > :not(.gp-complet__scene),
[data-rle-gp-design="cassette"].gp-plein:fullscreen > :not(.gp-plein__scene) {
	width: min(100%, 72rem);
	justify-self: center;
}

[data-rle-gp-design="cassette"].gp-complet:fullscreen .gp-complet__scene,
[data-rle-gp-design="cassette"].gp-plein:fullscreen .gp-plein__scene {
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: 100%;
	aspect-ratio: auto;
	margin-inline: 0;
	border: 0;
	box-shadow: none;
}

[data-rle-gp-design="cassette"].gp-complet:fullscreen video.gp-complet__media,
[data-rle-gp-design="cassette"].gp-plein:fullscreen video.gp-plein__media {
	width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
	object-fit: contain;
}

/* Une seule rangée de commandes : lecture et sauts, puis volume, vitesse et
   commandes de fenêtre, séparés par un espace plus large. */
[data-rle-gp-design="cassette"].gp-complet:fullscreen .gp-complet__transport::before {
	display: none;
}

[data-rle-gp-design="cassette"].gp-complet:fullscreen .gp-complet__transport > .gp-complet__commande:has(+ .gp-visuellement-cache + .gp-complet__volume) {
	margin-inline-start: var(--cassette-espace-8, 2rem);
}

/* Les options restent dessous, dans un bandeau étroit. */
[data-rle-gp-design="cassette"].gp-complet:fullscreen > .gp-complet__options {
	width: min(100%, 22rem);
}

/* Barre de progression du plein écran sonore : les temps de part et d'autre,
   le chapitre en cours dessous. */
[data-rle-gp-design="cassette"] .gp-plein__progression {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem);
}

[data-rle-gp-design="cassette"] .gp-plein__temps {
	display: contents;
}

[data-rle-gp-design="cassette"] .gp-plein__temps > span {
	display: none;
}

[data-rle-gp-design="cassette"] .gp-plein__temps-courant {
	grid-row: 1;
	grid-column: 1;
}

[data-rle-gp-design="cassette"] .gp-plein__curseur {
	grid-row: 1;
	grid-column: 2;
}

[data-rle-gp-design="cassette"] .gp-plein__duree {
	grid-row: 1;
	grid-column: 3;
}

[data-rle-gp-design="cassette"] .gp-plein__temps-courant,
[data-rle-gp-design="cassette"] .gp-plein__duree,
[data-rle-gp-design="cassette"] .gp-complet__temps-courant,
[data-rle-gp-design="cassette"] .gp-complet__duree {
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

[data-rle-gp-design="cassette"] .gp-plein__chapitre-courant {
	grid-column: 1 / -1;
	margin: 0;
	text-align: center;
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
}

/* Fenêtre de bande. En vidéo, et dans le profil complet, les deux mini
   bobines et la barre partagent un même boîtier encastré, et la bande relie
   chaque bobine à la piste : l'ensemble se lit comme un mécanisme, jamais
   comme deux commandes de part et d'autre de la barre. */
[data-rle-gp-design="cassette"] .gp-complet__progression,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression {
	display: grid;
	grid-template-columns: var(--cassette-mini, 3rem) minmax(0, 1fr) var(--cassette-mini, 3rem);
	grid-template-rows: var(--cassette-mini, 3rem) auto;
	align-items: center;
	column-gap: var(--cassette-espace-4, 1rem);
	row-gap: 0;
	padding: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-3, 0.75rem) var(--cassette-espace-1, 0.25rem);
	background:
		linear-gradient(color-mix(in srgb, var(--cassette-lumiere, #7c4dea) 55%, transparent), color-mix(in srgb, var(--cassette-lumiere, #7c4dea) 55%, transparent)) no-repeat calc(var(--cassette-mini, 3rem) / 2) calc(var(--cassette-mini, 3rem) / 2 - 1px) / calc(100% - var(--cassette-mini, 3rem)) 2px,
		var(--cassette-fenetre-fond, #f7f6fa);
	background-origin: content-box;
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-grand, 20px);
}

[data-rle-gp-design="cassette"] .gp-complet__progression {
	--cassette-fenetre-fond: var(--rle-gp-fond, #f7f6fa);
}

[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression {
	--cassette-fenetre-fond: var(--cassette-verre, #ffffff);
}

[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::before,
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::after,
[data-rle-gp-design="cassette"] .gp-complet__progression::before,
[data-rle-gp-design="cassette"] .gp-complet__progression::after {
	width: var(--cassette-mini, 3rem);
	grid-row: 1;
}

[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::before,
[data-rle-gp-design="cassette"] .gp-complet__progression::before {
	grid-column: 1;
}

[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__progression::after,
[data-rle-gp-design="cassette"] .gp-complet__progression::after {
	grid-column: 3;
}

/* En vidéo, les temps passent sous la barre : rien ne s'interpose entre les
   bobines et la piste. */
[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__temps-courant {
	grid-row: 2;
	grid-column: 2;
	justify-self: start;
}

[data-rle-gp-design="cassette"].gp-plein--video .gp-plein__duree {
	grid-row: 2;
	grid-column: 2;
	justify-self: end;
}

/* Options : un bandeau vitré de la même matière que la scène. L'écart d'un
   pixel entre les options laisse paraître le fond du bandeau et dessine les
   séparations, y compris quand la rangée passe à la ligne. */
[data-rle-gp-design="cassette"] .gp-plein__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 1px;
	overflow: hidden;
	background: var(--cassette-verre-bord, #e2dfe8);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-grand, 20px);
	box-shadow: var(--cassette-ombre, none);
}

[data-rle-gp-design="cassette"] .gp-plein__option {
	display: grid;
	align-content: center;
	gap: var(--cassette-espace-fin, 0.125rem);
	padding: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-4, 1rem);
	background: var(--cassette-verre, #ffffff);
}

[data-rle-gp-design="cassette"] .gp-plein__option label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rle-gp-texte-attenue, #58535f);
}

[data-rle-gp-design="cassette"] .gp-plein__selecteur {
	width: 100%;
	min-height: 2.25rem;
	padding: 0 var(--cassette-espace-6, 1.5rem) 0 0;
	background:
		linear-gradient(45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right calc(var(--cassette-espace-fin, 0.125rem) + var(--cassette-chevron, 0.35rem)) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem),
		linear-gradient(-45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right var(--cassette-espace-fin, 0.125rem) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem);
	color: var(--rle-gp-texte, #15131a);
	border: 0;
	border-radius: 0;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__option:hover,
[data-rle-gp-design="cassette"] .gp-plein__option:focus-within {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

/* Actions : téléchargement et partage. */
[data-rle-gp-design="cassette"] .gp-plein__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-3, 0.75rem);
}

[data-rle-gp-design="cassette"] .gp-plein__action {
	display: inline-flex;
	align-items: center;
	gap: var(--cassette-espace-2, 0.5rem);
	min-height: 2.75rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem);
	background: var(--cassette-verre, #ffffff);
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-pilule, 999px);
	font: inherit;
	font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__action:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

[data-rle-gp-design="cassette"] .gp-plein__taille,
[data-rle-gp-design="cassette"] .gp-plein__lien-partage {
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
}

[data-rle-gp-design="cassette"] .gp-plein__lien-partage {
	flex-basis: 100%;
	margin: 0;
	text-align: center;
	word-break: break-all;
}

[data-rle-gp-design="cassette"] .gp-plein__lien-partage a {
	color: inherit;
}

/* Panneaux et onglets */

[data-rle-gp-design="cassette"] .gp-plein__panneaux {
	display: grid;
	gap: var(--cassette-espace-3, 0.75rem);
}

[data-rle-gp-design="cassette"] .gp-plein__onglets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cassette-espace-1, 0.25rem);
	border-bottom: 1px solid var(--cassette-verre-bord, #e2dfe8);
}

[data-rle-gp-design="cassette"] .gp-plein__onglet {
	min-height: 2.75rem;
	padding: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-4, 1rem);
	background: transparent;
	color: var(--rle-gp-texte-attenue, #58535f);
	border: 0;
	border-bottom: 3px solid transparent;
	font: inherit;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__onglet[aria-selected="true"] {
	color: var(--rle-gp-texte, #15131a);
	border-bottom-color: var(--cassette-teinte, #7c4dea);
	font-weight: 600;
}

/* Listes : épisodes, pistes et chapitres, sur une carte vitrée. */
[data-rle-gp-design="cassette"] .gp-plein__liste,
[data-rle-gp-design="cassette"] .gp-plein__panneau {
	padding: var(--cassette-espace-4, 1rem);
	background: var(--cassette-verre, #ffffff);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon, 16px);
}

[data-rle-gp-design="cassette"] .gp-complet__liste {
	display: grid;
	gap: var(--cassette-espace-2, 0.5rem);
	padding-top: var(--cassette-espace-3, 0.75rem);
	border-top: 1px solid var(--cassette-verre-bord, #e2dfe8);
}

[data-rle-gp-design="cassette"] .gp-plein__liste-titre,
[data-rle-gp-design="cassette"] .gp-complet__liste-titre {
	margin: 0 0 var(--cassette-espace-2, 0.5rem);
	font-size: 1.0625rem;
	font-weight: 600;
}

[data-rle-gp-design="cassette"] .gp-plein__pistes,
[data-rle-gp-design="cassette"] .gp-complet__pistes,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres {
	display: grid;
	gap: var(--cassette-espace-fin, 0.125rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

[data-rle-gp-design="cassette"] .gp-plein__piste,
[data-rle-gp-design="cassette"] .gp-complet__piste,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres__entree {
	display: flex;
	align-items: center;
	gap: var(--cassette-espace-1, 0.25rem);
}

[data-rle-gp-design="cassette"] .gp-plein__piste-commande,
[data-rle-gp-design="cassette"] .gp-complet__piste-commande,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres__commande {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--cassette-espace-3, 0.75rem);
	min-height: 2.75rem;
	padding: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-3, 0.75rem);
	background: transparent;
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid transparent;
	border-radius: var(--cassette-rayon-moyen, 12px);
	font: inherit;
	font-size: 0.9375rem;
	text-align: left;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__piste-commande:hover,
[data-rle-gp-design="cassette"] .gp-complet__piste-commande:hover,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres__commande:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

[data-rle-gp-design="cassette"] .gp-plein__piste-nom,
[data-rle-gp-design="cassette"] .gp-complet__piste-nom,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres__titre {
	flex: 1;
}

[data-rle-gp-design="cassette"] .gp-plein__piste-duree,
[data-rle-gp-design="cassette"] .gp-complet__piste-duree,
[data-rle-gp-design="cassette"] .gp-panneau-chapitres__debut {
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

[data-rle-gp-design="cassette"] .gp-plein__piste-fichier,
[data-rle-gp-design="cassette"] .gp-complet__piste-fichier {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	color: var(--rle-gp-texte-attenue, #58535f);
	border-radius: var(--cassette-rayon-cercle, 50%);
}

[data-rle-gp-design="cassette"] .gp-plein__piste-fichier:hover,
[data-rle-gp-design="cassette"] .gp-complet__piste-fichier:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
	color: var(--rle-gp-texte, #15131a);
}

/* Élément en cours : fond teinté, bordure, graisse et petit vumètre. Le
   vumètre ne bat que pendant la lecture. */
[data-rle-gp-design="cassette"] .gp-plein__piste-commande[aria-current="true"],
[data-rle-gp-design="cassette"] .gp-complet__piste-commande[aria-current="true"] {
	background: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 14%, transparent);
	border-color: color-mix(in srgb, var(--cassette-teinte, #7c4dea) 55%, transparent);
	font-weight: 600;
}

[data-rle-gp-design="cassette"] .gp-plein__piste-commande[aria-current="true"]::before,
[data-rle-gp-design="cassette"] .gp-complet__piste-commande[aria-current="true"]::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background:
		linear-gradient(var(--cassette-teinte, #7c4dea), var(--cassette-teinte, #7c4dea)) no-repeat 0 50% / 2px 40%,
		linear-gradient(var(--cassette-teinte, #7c4dea), var(--cassette-teinte, #7c4dea)) no-repeat 33% 50% / 2px 90%,
		linear-gradient(var(--cassette-teinte, #7c4dea), var(--cassette-teinte, #7c4dea)) no-repeat 66% 50% / 2px 60%,
		linear-gradient(var(--cassette-teinte, #7c4dea), var(--cassette-teinte, #7c4dea)) no-repeat 100% 50% / 2px 30%;
}

[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__piste-commande[aria-current="true"]::before,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-complet__piste-commande[aria-current="true"]::before {
	animation: cassette-vumetre 900ms ease-in-out infinite alternate;
}

/* Archive intégrale et son dialogue */

[data-rle-gp-design="cassette"] .gp-plein__archive,
[data-rle-gp-design="cassette"] .gp-complet__archive {
	margin: var(--cassette-espace-3, 0.75rem) 0 0;
}

[data-rle-gp-design="cassette"] .gp-plein__archive-commande,
[data-rle-gp-design="cassette"] .gp-complet__archive-commande,
[data-rle-gp-design="cassette"] .gp-plein__dialogue-fermer,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-fermer {
	min-height: 2.75rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem);
	background: transparent;
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-pilule, 999px);
	font: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__archive-commande:hover,
[data-rle-gp-design="cassette"] .gp-complet__archive-commande:hover,
[data-rle-gp-design="cassette"] .gp-plein__dialogue-fermer:hover,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-fermer:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue,
[data-rle-gp-design="cassette"] .gp-complet__dialogue {
	width: min(28rem, calc(100% - var(--cassette-espace-8, 2rem)));
	padding: var(--cassette-espace-6, 1.5rem);
	background: var(--cassette-verre, #ffffff);
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-cadre, 24px);
	box-shadow: var(--cassette-ombre, none);
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue::backdrop,
[data-rle-gp-design="cassette"] .gp-complet__dialogue::backdrop {
	background: var(--cassette-voile, rgba(0, 0, 0, 0.6));
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue-titre,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-titre {
	margin: 0 0 var(--cassette-espace-3, 0.75rem);
	font-size: 1.25rem;
	font-weight: 600;
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue-etat,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-etat {
	margin: 0 0 var(--cassette-espace-2, 0.5rem);
	color: var(--rle-gp-texte-attenue, #58535f);
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue-jauge,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-jauge {
	width: 100%;
	accent-color: var(--cassette-teinte, #7c4dea);
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue-actions,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--cassette-espace-2, 0.5rem);
	margin: var(--cassette-espace-4, 1rem) 0 0;
}

[data-rle-gp-design="cassette"] .gp-plein__dialogue-lien,
[data-rle-gp-design="cassette"] .gp-complet__dialogue-lien {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem);
	background: var(--cassette-teinte, #7c4dea);
	color: var(--cassette-teinte-texte, #ffffff);
	border-radius: var(--cassette-rayon-pilule, 999px);
	font-weight: 600;
	text-decoration: none;
}

/* Flux permanent : l'état en direct, ce qui est diffusé et l'audience. La
   pastille accompagne la mention écrite, elle ne la remplace pas. */
[data-rle-gp-design="cassette"] .gp-plein__direct,
[data-rle-gp-design="cassette"] .gp-complet__direct {
	display: grid;
	gap: var(--cassette-espace-1, 0.25rem);
	text-align: center;
}

[data-rle-gp-design="cassette"] .gp-complet__direct {
	text-align: left;
}

[data-rle-gp-design="cassette"] .gp-plein__direct-etat,
[data-rle-gp-design="cassette"] .gp-complet__direct-etat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cassette-espace-2, 0.5rem);
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

[data-rle-gp-design="cassette"] .gp-complet__direct-etat {
	justify-content: flex-start;
}

[data-rle-gp-design="cassette"] .gp-plein__direct-pastille,
[data-rle-gp-design="cassette"] .gp-complet__direct-pastille {
	width: 0.6rem;
	height: 0.6rem;
	background: var(--cassette-teinte, #7c4dea);
	border-radius: var(--cassette-rayon-cercle, 50%);
	box-shadow: 0 0 0 0 var(--cassette-halo, transparent);
}

[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-plein__direct-pastille,
[data-rle-gp-design="cassette"][data-rle-gp-etat="lecture"] .gp-complet__direct-pastille {
	animation: cassette-direct 1.6s ease-out infinite;
}

[data-rle-gp-design="cassette"] .gp-plein__direct-titre,
[data-rle-gp-design="cassette"] .gp-complet__direct-titre {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

[data-rle-gp-design="cassette"] .gp-plein__direct-auditeurs,
[data-rle-gp-design="cassette"] .gp-complet__direct-auditeurs {
	margin: 0;
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
}

/* Raccourcis clavier */

[data-rle-gp-design="cassette"] .gp-plein__raccourcis summary {
	min-height: 2.75rem;
	padding: var(--cassette-espace-2, 0.5rem) 0;
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-plein__raccourcis dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-4, 1rem);
	margin: var(--cassette-espace-2, 0.5rem) 0 0;
	font-size: 0.875rem;
}

[data-rle-gp-design="cassette"] .gp-plein__raccourcis dd {
	margin: 0;
	color: var(--rle-gp-texte-attenue, #58535f);
}

[data-rle-gp-design="cassette"] .gp-plein__raccourcis kbd {
	padding: var(--cassette-espace-fin, 0.125rem) var(--cassette-espace-2, 0.5rem);
	background: var(--rle-gp-fond-attenue, #eeecf3);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-fin, 4px);
	font-family: var(--discovery-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 0.8125rem;
}

/* Grand écran : le lecteur à gauche, la liste à droite, quand il y en a
   une. */
@media (min-width: 64rem) {
	[data-rle-gp-design="cassette"].gp-plein:has(> .gp-plein__liste) {
		grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
		align-items: start;
	}

	[data-rle-gp-design="cassette"].gp-plein:has(> .gp-plein__liste) > * {
		grid-column: 1;
	}

	[data-rle-gp-design="cassette"].gp-plein:has(> .gp-plein__liste) > .gp-plein__liste {
		grid-column: 2;
		grid-row: 1 / span 5;
	}
}

/* Profil complet */

[data-rle-gp-design="cassette"].gp-complet {
	display: grid;
	gap: var(--cassette-espace-3, 0.75rem);
	padding: var(--cassette-espace-4, 1rem) var(--cassette-espace-4, 1rem);
	background: var(--cassette-verre, #ffffff);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon, 16px);
	box-shadow: var(--cassette-ombre, none);
}

[data-rle-gp-design="cassette"] .gp-complet__entete {
	display: flex;
	align-items: center;
	gap: var(--cassette-espace-3, 0.75rem);
}

/* En audio, l'en-tête garde la hauteur de l'illustration, qu'elle soit
   présente ou non. */
[data-rle-gp-design="cassette"].gp-complet--audio .gp-complet__entete {
	min-height: 3.5rem;
}

[data-rle-gp-design="cassette"] .gp-complet__illustration {
	width: 3.5rem;
	height: 3.5rem;
	object-fit: cover;
	border-radius: var(--cassette-rayon-petit, 8px);
}

[data-rle-gp-design="cassette"] .gp-complet__identite {
	min-width: 0;
}

[data-rle-gp-design="cassette"] .gp-complet__titre {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
}

[data-rle-gp-design="cassette"] .gp-complet__sous-titre {
	margin: 0;
	color: var(--rle-gp-texte-attenue, #58535f);
	font-size: 0.875rem;
}

[data-rle-gp-design="cassette"] .gp-complet__scene {
	overflow: hidden;
}

[data-rle-gp-design="cassette"] .gp-complet__curseur {
	grid-row: 1;
	grid-column: 2;
}

[data-rle-gp-design="cassette"] .gp-complet__temps {
	grid-row: 2;
	grid-column: 2;
	display: flex;
	justify-content: space-between;
	margin: 0;
}

[data-rle-gp-design="cassette"] .gp-complet__temps > span {
	display: none;
}

/* Options du profil complet : le même bandeau que le plein écran. L'écart
   d'un pixel laisse paraître le fond du bandeau et dessine les séparations. */
[data-rle-gp-design="cassette"] .gp-complet__options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
	gap: 1px;
	overflow: hidden;
	background: var(--cassette-verre-bord, #e2dfe8);
	border: 1px solid var(--cassette-verre-bord, #e2dfe8);
	border-radius: var(--cassette-rayon-grand, 20px);
}

[data-rle-gp-design="cassette"] .gp-complet__option {
	display: grid;
	align-content: center;
	gap: var(--cassette-espace-fin, 0.125rem);
	padding: var(--cassette-espace-2, 0.5rem) var(--cassette-espace-4, 1rem);
	background: var(--rle-gp-fond, #f7f6fa);
}

[data-rle-gp-design="cassette"] .gp-complet__option label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rle-gp-texte-attenue, #58535f);
}

[data-rle-gp-design="cassette"] .gp-complet__option .gp-complet__selecteur {
	width: 100%;
	min-height: 2.25rem;
	padding: 0 var(--cassette-espace-6, 1.5rem) 0 0;
	background:
		linear-gradient(45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right calc(var(--cassette-espace-fin, 0.125rem) + var(--cassette-chevron, 0.35rem)) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem),
		linear-gradient(-45deg, transparent 50%, var(--cassette-teinte, #7c4dea) 50%) no-repeat right var(--cassette-espace-fin, 0.125rem) center / var(--cassette-chevron, 0.35rem) var(--cassette-chevron, 0.35rem);
	border: 0;
	border-radius: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	appearance: none;
	-webkit-appearance: none;
}

[data-rle-gp-design="cassette"] .gp-complet__option .gp-complet__bascule {
	justify-self: start;
}

[data-rle-gp-design="cassette"] .gp-complet__option:hover,
[data-rle-gp-design="cassette"] .gp-complet__option:focus-within {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

/* Profil bouton : une pilule, une mini bobine dont la bande s'épaissit au
   fil de l'extrait, l'icône dans la teinte. */

[data-rle-gp-design="cassette"].gp-bouton {
	display: inline-block;
	max-width: 100%;
}

/* Le son se lit sur place, la vidéo ouvre la page du lecteur : les deux
   variantes gardent la même pilule et s'alignent sur le texte voisin. */
[data-rle-gp-design="cassette"].gp-bouton--audio,
[data-rle-gp-design="cassette"].gp-bouton--video,
[data-rle-gp-design="cassette"].gp-bouton--lecture,
[data-rle-gp-design="cassette"].gp-bouton--plein-ecran {
	vertical-align: middle;
}

/* Élément média et intitulé réservé aux technologies d'assistance : aucune
   place dans la mise en page. */
[data-rle-gp-design="cassette"] .gp-bouton__media,
[data-rle-gp-design="cassette"] .gp-bouton__titre {
	max-width: 100%;
}

[data-rle-gp-design="cassette"] .gp-bouton__declencheur {
	display: inline-flex;
	align-items: center;
	gap: var(--cassette-espace-2, 0.5rem);
	min-height: 3.25rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-5, 1.25rem) var(--cassette-espace-1, 0.25rem) var(--cassette-espace-2, 0.5rem);
	background: var(--cassette-verre, #ffffff);
	color: var(--rle-gp-texte, #15131a);
	border: 1px solid var(--rle-gp-bordure, #857f8f);
	border-radius: var(--cassette-rayon-pilule, 999px);
	box-shadow: var(--cassette-ombre, none);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

[data-rle-gp-design="cassette"] .gp-bouton__declencheur:hover {
	background: var(--rle-gp-fond-attenue, #eeecf3);
}

[data-rle-gp-design="cassette"] .gp-bouton__declencheur::before {
	width: 2.4rem;
	flex: none;
}

[data-rle-gp-design="cassette"] .gp-bouton__icone {
	color: var(--cassette-teinte, #7c4dea);
	line-height: 0;
}

[data-rle-gp-design="cassette"] .gp-bouton__libelle {
	line-height: 1.2;
}

/* Sans libellé visible, la pilule se resserre autour de la bobine et de
   l'icône. */
[data-rle-gp-design="cassette"] .gp-bouton__declencheur:has(.gp-bouton__libelle.gp-visuellement-cache) {
	padding-inline-end: var(--cassette-espace-3, 0.75rem);
}

/* Profil lien. Aucun lecteur, aucun état, aucun mode : le lien se pose dans
   la page du site et en reprend la couleur du texte. La cassette n'en garde
   qu'une pastille d'accent autour de l'icône, ronde pour le son, carrée aux
   angles adoucis pour la vidéo. Aucun comportement ne s'y attache. */
[data-rle-gp-design="cassette"].gp-lien {
	display: inline-flex;
	align-items: center;
	gap: var(--cassette-espace-3, 0.75rem);
	min-height: 2.75rem;
	padding: var(--cassette-espace-1, 0.25rem) var(--cassette-espace-4, 1rem) var(--cassette-espace-1, 0.25rem) var(--cassette-espace-1, 0.25rem);
	color: inherit;
	font-family: var(--cassette-police, sans-serif);
	text-decoration: none;
	border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	border-radius: var(--cassette-rayon-pilule, 999px);
}

[data-rle-gp-design="cassette"].gp-lien:hover {
	background: color-mix(in srgb, currentColor 6%, transparent);
}

[data-rle-gp-design="cassette"] .gp-lien__icone {
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: var(--rle-gp-accent-texte, #ffffff);
	background: var(--rle-gp-accent, #7c4dea);
	border-radius: var(--cassette-rayon-cercle, 50%);
}

[data-rle-gp-design="cassette"].gp-lien--video .gp-lien__icone {
	border-radius: var(--cassette-rayon-fin, 4px);
}

[data-rle-gp-design="cassette"].gp-lien--audio .gp-lien__icone {
	border-radius: var(--cassette-rayon-cercle, 50%);
}

[data-rle-gp-design="cassette"] .gp-lien__libelle {
	font-weight: 600;
}

[data-rle-gp-design="cassette"] .gp-lien__duree {
	padding-inline-start: var(--cassette-espace-3, 0.75rem);
	border-inline-start: 1px solid color-mix(in srgb, currentColor 24%, transparent);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

/* Mouvements */

@keyframes cassette-rotation {
	to {
		--cassette-angle: 360deg;
	}
}

@keyframes cassette-respiration {
	to {
		--cassette-souffle: 34;
	}
}

@keyframes cassette-vumetre {
	to {
		background-size: 2px 85%, 2px 35%, 2px 95%, 2px 55%;
	}
}

@keyframes cassette-direct {
	from {
		box-shadow: 0 0 0 0 var(--cassette-teinte, #7c4dea);
	}

	to {
		box-shadow: 0 0 0 0.5rem transparent;
	}
}

/* Contraste renforcé : pas de halo, traits pleins, contour de focus plus
   épais. */
@media (prefers-contrast: more) {
	[data-rle-gp-design="cassette"] {
		--rle-gp-bordure: var(--rle-gp-texte, #15131a);
		--rle-gp-texte-attenue: var(--rle-gp-texte, #15131a);
		--cassette-verre-bord: var(--rle-gp-texte, #15131a);
		--cassette-structure: var(--rle-gp-texte, #15131a);
		--cassette-lumiere: var(--rle-gp-texte, #15131a);
		--cassette-halo: transparent;
		--cassette-bande-vide: var(--rle-gp-texte-attenue, #58535f);
		--cassette-ombre: none;
	}

	[data-rle-gp-design="cassette"] :focus-visible,
	[data-rle-gp-design="cassette"]:focus-visible {
		outline-width: 4px;
	}

	[data-rle-gp-design="cassette"].gp-lien,
	[data-rle-gp-design="cassette"] .gp-lien__duree {
		border-color: currentColor;
	}

	[data-rle-gp-design="cassette"] .gp-lien__libelle {
		text-decoration: underline;
	}
}

/* Mouvement réduit : rien ne tourne, ne respire ni ne bat. L'épaisseur de
   bande enroulée continue d'indiquer où en est l'écoute. */
@media (prefers-reduced-motion: reduce) {
	[data-rle-gp-design="cassette"],
	[data-rle-gp-design="cassette"] *,
	[data-rle-gp-design="cassette"] *::before,
	[data-rle-gp-design="cassette"] *::after {
		animation: none !important;
		transition: none !important;
	}
}

/* Écrans étroits : commandes resserrées, le volume suit leur taille. */
@media (max-width: 30rem) {
	[data-rle-gp-design="cassette"] {
		--cassette-commande: 2.75rem;
		--cassette-principale: 4rem;
	}

	[data-rle-gp-design="cassette"] .gp-plein__commande--principale {
		margin-inline: var(--cassette-espace-1, 0.25rem);
	}

	[data-rle-gp-design="cassette"] input.gp-plein__volume,
	[data-rle-gp-design="cassette"] input.gp-complet__volume {
		width: 3.5rem;
	}
}