@charset "UTF-8";

/**
 * Fichier : assets/css/rle-gp-base.css
 * Feuille de base du lecteur Galactique-Player.
 *
 * Cette feuille ne dessine pas le lecteur : elle fournit les mécanismes que
 * tout design suppose acquis, et rien de plus. Un design qui ne charge que ce
 * fichier obtient un lecteur sans apparence mais entièrement utilisable ; un
 * design qui l'étend n'a pas à réécrire ce qui suit.
 *
 * Quatre mécanismes :
 *
 *   - Le masquage accessible, qui retire un texte de l'écran en le laissant
 *     lisible par les technologies d'assistance.
 *   - La bascule des icônes selon l'état de lecture, pilotée par le seul
 *     attribut que le noyau met à jour.
 *   - Les variables de couleur, commutées par le mode choisi dans les réglages
 *     du design ou par les préférences du système.
 *   - Le respect des préférences de mouvement réduit et la garantie d'un focus
 *     visible.
 *
 * Variables posées par le rendu sur le conteneur :
 *
 *   --rle-gp-accent         couleur d'accent du design
 *   --rle-gp-accent-texte   couleur du texte posé sur l'accent
 *   --rle-gp-rayon          rayon des angles
 *   --rle-gp-progression    avancement de la lecture, de 0 à 1
 *
 * Accessibilité WCAG 2.1 niveau AA :
 *   - Le masquage employé conserve le texte dans l'arbre d'accessibilité, ce
 *     que display:none ne ferait pas.
 *   - Un contour de focus est garanti même si un design omet d'en définir un.
 *   - Les animations sont neutralisées lorsque le système le demande.
 */

/* -------------------------------------------------------------------------
   Masquage accessible
   ------------------------------------------------------------------------- */

.gp-visuellement-cache {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Un élément masqué qui reçoit le focus redevient visible : sans cette
   exception, la personne qui navigue au clavier perdrait la trace de sa
   position dans la page. */
.gp-visuellement-cache:focus,
.gp-visuellement-cache:focus-within {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* L'attribut hidden est parfois neutralisé par une règle de thème plus
   spécifique. Les panneaux du lecteur en dépendent. */
[data-rle-gp-lecteur] [hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Variables
   ------------------------------------------------------------------------- */

[data-rle-gp-lecteur] {
	--rle-gp-accent: #3b5bdb;
	--rle-gp-accent-texte: #ffffff;
	--rle-gp-rayon: 10px;
	--rle-gp-progression: 0;

	--rle-gp-fond: #ffffff;
	--rle-gp-fond-attenue: #f2f2f4;
	--rle-gp-texte: #1d2327;
	--rle-gp-texte-attenue: #50575e;
	--rle-gp-bordure: #c3c4c7;
}

[data-rle-gp-lecteur][data-rle-gp-mode="sombre"] {
	--rle-gp-fond: #16181d;
	--rle-gp-fond-attenue: #212430;
	--rle-gp-texte: #f0f0f1;
	--rle-gp-texte-attenue: #b8bcc4;
	--rle-gp-bordure: #3c4048;
}

@media (prefers-color-scheme: dark) {
	[data-rle-gp-lecteur][data-rle-gp-mode="auto"] {
		--rle-gp-fond: #16181d;
		--rle-gp-fond-attenue: #212430;
		--rle-gp-texte: #f0f0f1;
		--rle-gp-texte-attenue: #b8bcc4;
		--rle-gp-bordure: #3c4048;
	}
}

/* -------------------------------------------------------------------------
   Bascule des icônes
   ------------------------------------------------------------------------- */

/* Les trois icônes de la commande principale coexistent dans le balisage :
   le noyau ne fabrique aucun élément, il se contente de changer l'état du
   conteneur. */
[data-rle-gp-lecteur] [data-rle-gp-icone] {
	display: none;
}

[data-rle-gp-etat="inactif"] [data-rle-gp-icone="lecture"],
[data-rle-gp-etat="pause"] [data-rle-gp-icone="lecture"],
[data-rle-gp-etat="fin"] [data-rle-gp-icone="lecture"],
[data-rle-gp-etat="erreur"] [data-rle-gp-icone="lecture"],
[data-rle-gp-etat="lecture"] [data-rle-gp-icone="pause"],
[data-rle-gp-etat="chargement"] [data-rle-gp-icone="chargement"] {
	display: inline-flex;
}

/* La coupure du son se lit sur la commande elle-même, non sur l'état de
   lecture : les deux sont indépendants. */
[data-rle-gp-lecteur] [data-rle-gp-role="muet"] [data-rle-gp-icone="son"] {
	display: inline-flex;
}

[data-rle-gp-lecteur] [data-rle-gp-role="muet"][aria-pressed="true"] [data-rle-gp-icone="son"] {
	display: none;
}

[data-rle-gp-lecteur] [data-rle-gp-role="muet"][aria-pressed="true"] [data-rle-gp-icone="muet"] {
	display: inline-flex;
}

/* -------------------------------------------------------------------------
   Chargement
   ------------------------------------------------------------------------- */

[data-rle-gp-lecteur] [data-rle-gp-icone="chargement"] svg {
	animation: rle-gp-rotation 900ms linear infinite;
	transform-origin: 50% 50%;
}

@keyframes rle-gp-rotation {
	from {
		transform: rotate(0deg);
	}

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

/* -------------------------------------------------------------------------
   Média
   ------------------------------------------------------------------------- */

/* Un élément audio piloté n'a pas de contrôles natifs à montrer : ceux du
   design le remplacent. L'élément reste dans le document, seul moyen pour le
   navigateur de lire le son. */
[data-rle-gp-lecteur] audio[data-rle-gp-role="media"] {
	display: none;
}

[data-rle-gp-lecteur] video[data-rle-gp-role="media"] {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Les contrôles natifs du repli sans script sont montrés tels quels. */
[data-rle-gp-lecteur] audio[controls] {
	display: block;
	width: 100%;
}

/* -------------------------------------------------------------------------
   Commandes
   ------------------------------------------------------------------------- */

/* Une commande du lecteur reste une commande, quel que soit le thème du site :
   le curseur et la zone de clic ne dépendent pas du design. */
[data-rle-gp-lecteur] button[data-rle-gp-role],
[data-rle-gp-lecteur] a[data-rle-gp-role],
[data-rle-gp-lecteur] [data-rle-gp-seek] {
	cursor: pointer;
}

[data-rle-gp-lecteur] button[disabled],
[data-rle-gp-lecteur] [aria-disabled="true"] {
	cursor: default;
	opacity: 0.55;
}

/* Contour de focus garanti. Un design peut le remplacer, il ne peut pas le
   faire disparaitre sans le remplacer. */
[data-rle-gp-lecteur] :focus-visible {
	outline: 2px solid var(--rle-gp-accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Préférence de mouvement réduit
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[data-rle-gp-lecteur],
	[data-rle-gp-lecteur] * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
   Impression
   ------------------------------------------------------------------------- */

/* Un lecteur imprimé ne sert à rien : seul son titre garde du sens. */
@media print {
	[data-rle-gp-lecteur] [data-rle-gp-role="progression"],
	[data-rle-gp-lecteur] [data-rle-gp-role="volume"],
	[data-rle-gp-lecteur] button[data-rle-gp-role],
	[data-rle-gp-lecteur] select[data-rle-gp-role] {
		display: none !important;
	}
}