/* Écouter sa page comme un lecteur d'écran (outils/lib/pd/lecteur-ecran.php) */

.pdx-le-lecteur { padding: 1.1em; border-radius: 1em; background: #fff; border: 1px solid var(--trait); }

/* Commandes : Écouter, Pause, Arrêter, vitesse */
.pdx-le-commandes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em 0.8em; }
.pdx-le-btn {
	padding: 0.7em 1.1em;
	border: 1px solid var(--trait);
	border-radius: 3em;
	background: #fff;
	color: var(--encre);
	font: 600 1em/1.2 var(--texte);
	cursor: pointer;
}
.pdx-le-btn:hover:not(:disabled) { border-color: var(--encre); }
.pdx-le-btn:disabled, .pdx-le-jouer:disabled { opacity: 0.55; cursor: default; }
.pdx-le-commandes [hidden] { display: none; }
.pdx-le-jouer::after { content: "▶"; font-size: 0.8em; }
.pdx-le-vitesse { display: flex; align-items: center; gap: 0.5em; margin-left: auto; font-size: 0.92em; color: var(--gris); }
.pdx-le-vitesse[hidden] { display: none; }
.pdx-le-vitesse input { width: 8em; accent-color: var(--orange-texte); }
.pdx-le-vitesse output { min-width: 2.8em; font-family: var(--mono); color: var(--encre); }
.pdx-le-statut { margin: 0.7em 0 0; font-size: 0.86em; color: var(--gris); }

/* Filtres (comme la liste des éléments d'un lecteur d'écran) */
.pdx-le-filtres { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 1em 0 0.8em; }
.pdx-le-filtre {
	padding: 0.4em 0.8em;
	border: 1px solid var(--trait);
	border-radius: 3em;
	background: var(--grisé);
	color: var(--encre);
	font: 600 0.88em/1.2 var(--texte);
	cursor: pointer;
}
.pdx-le-filtre span { margin-left: 0.2em; font-family: var(--mono); font-weight: 400; color: var(--gris); }
.pdx-le-filtre[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #fff; }
.pdx-le-filtre[aria-pressed="true"] span { color: #ffffffcc; }

/* Transcription : boîte qui défile, élément en cours surligné */
.pdx-le-liste {
	position: relative;
	max-height: 34em;
	overflow-y: auto;
	margin: 0;
	padding: 0.3em 0;
	list-style: none;
	border-top: 1px solid var(--trait);
	border-bottom: 1px solid var(--trait);
	overscroll-behavior: contain;
}
.pdx-le-i {
	padding: 0.45em 0.6em;
	border-radius: 0.5em;
	line-height: 1.5;
	overflow-wrap: anywhere;
	cursor: pointer;
	transition: background .2s;
}
.pdx-le-i:hover { background: var(--grisé); }
.pdx-le-i.pdx-le-actif { background: var(--peche); box-shadow: inset 0.25em 0 0 var(--orange); }
.pdx-le-role {
	display: inline-block;
	margin-right: 0.3em;
	padding: 0.05em 0.5em;
	border-radius: 0.3em;
	background: var(--brume);
	font: 500 0.72em/1.5 var(--mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gris);
	vertical-align: 0.1em;
}
.pdx-le-puce::before { content: "•"; margin-right: 0.45em; color: var(--gris); }
.pdx-le-titre .pdx-le-contenu { font-family: var(--titre); font-weight: 700; color: var(--encre); }
.pdx-le-h1 .pdx-le-contenu { font-size: 1.25em; }
.pdx-le-h2 .pdx-le-contenu { font-size: 1.12em; }
.pdx-le-titre, .pdx-le-repere, .pdx-le-page { margin-top: 0.5em; }
.pdx-le-repere .pdx-le-role, .pdx-le-page .pdx-le-role { background: var(--peche); color: var(--orange-texte); }
.pdx-le-lien .pdx-le-contenu { text-decoration: underline; text-decoration-color: var(--trait); text-underline-offset: 0.2em; }
.pdx-le-etat { font-size: 0.9em; font-style: italic; color: var(--gris); }
.pdx-le-sans { font-size: 0.9em; font-style: italic; color: var(--err); }
.pdx-le-dest { font-family: var(--mono); font-size: 0.78em; color: var(--gris); }
.pdx-le-i .pastille { margin-left: 0.3em; vertical-align: 0.1em; }
.pdx-le-nb { font-weight: 400; color: var(--gris); }
.pdx-le-filtree .pdx-le-puce::before { content: none; }

@media (max-width: 40em) {
	.pdx-le-lecteur { padding: 0.9em 0.8em; }
	.pdx-le-commandes .bouton, .pdx-le-btn { flex: 1 1 auto; justify-content: center; }
	.pdx-le-vitesse { margin-left: 0; width: 100%; }
	.pdx-le-vitesse input { flex: 1; }
	.pdx-le-liste { max-height: 70vh; }
}
@media (prefers-reduced-motion: reduce) { .pdx-le-i { transition: none; } }