/* PTL Accessibilité : lecteur « Écouter cette page ». Hérite des couleurs et
   de la police du thème (currentColor) pour s'intégrer sans réglage. */
.ptl-ecoute {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
	margin: 1rem 0 1.5rem; padding: .375rem .875rem .375rem .375rem;
	width: fit-content; max-width: 100%;
	border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
	border-radius: 999px;
	font-size: .9375rem; line-height: 1.3;
}
.ptl-ecoute button {
	font: inherit; color: inherit; background: none; cursor: pointer;
	min-height: 44px; border-radius: 999px;
}
.ptl-ecoute__jouer {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: 0 1rem 0 .75rem; border: 1px solid currentColor; font-weight: 600;
}
.ptl-ecoute__jouer svg { flex: none; }
.ptl-ecoute__duree { opacity: .8; }
.ptl-ecoute__duree[hidden] { display: none; }
.ptl-ecoute__suite { display: inline-flex; align-items: center; gap: .625rem; }
.ptl-ecoute__suite[hidden] { display: none; }
.ptl-ecoute input[type="range"] { width: clamp(6rem, 22vw, 14rem); accent-color: currentColor; margin: 0; }
.ptl-ecoute__temps { font-variant-numeric: tabular-nums; opacity: .85; white-space: nowrap; }
.ptl-ecoute__vitesse { min-width: 44px; padding: 0 .5rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); font-variant-numeric: tabular-nums; }
.ptl-ecoute button:focus-visible, .ptl-ecoute input:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

/* Pendant l'écoute, hors de l'écran : en bas de la fenêtre. Fond et texte
   système (Canvas / CanvasText) : lisible quel que soit le thème. */
.ptl-ecoute--flottant {
	/* left/right à 0 + marges auto : centré sans limiter sa largeur à la
	   moitié de l'écran (ce que fait left: 50%). */
	position: fixed; z-index: 99990; left: 0; right: 0; bottom: max(1rem, env(safe-area-inset-bottom));
	margin: 0 auto; max-width: calc(100vw - 2rem); flex-wrap: nowrap;
	background: Canvas; color: CanvasText;
	box-shadow: 0 6px 24px rgb(0 0 0 / .22);
}
/* Téléphone : une seule ligne (le curseur prend la place du minutage), et
   le lecteur flottant laisse libre le bouton du panneau d'accessibilité. */
@media (max-width: 600px) {
	.ptl-ecoute { flex-wrap: nowrap; width: 100%; }
	.ptl-ecoute__temps { display: none; }
	.ptl-ecoute__suite { flex: 1; min-width: 0; }
	.ptl-ecoute input[type="range"] { flex: 1; width: auto; min-width: 3rem; }
	.ptl-ecoute__jouer { padding: 0 .875rem 0 .625rem; }
	.ptl-ecoute--flottant { width: auto; max-width: none; }
	body:has(.ptl-rgaa-racine--droite) .ptl-ecoute--flottant { left: .75rem; right: calc(54px + 1.75rem); }
	body:has(.ptl-rgaa-racine--gauche) .ptl-ecoute--flottant { right: .75rem; left: calc(54px + 1.75rem); }
}

/* Paragraphe en cours de lecture ; cliquer sur un paragraphe y fait sauter. */
.ptl-lu {
	background-color: rgb(255 210 0 / .24);
	box-shadow: 0 0 0 .3em rgb(255 210 0 / .24);
	border-radius: 3px;
	transition: background-color .25s, box-shadow .25s;
}
.ptl-ecoute-active [data-ptl-piste]:not(.ptl-lu):hover { cursor: pointer; background-color: rgb(255 210 0 / .1); }
@media (prefers-reduced-motion: reduce) { .ptl-lu { transition: none; } }
@media (forced-colors: active) {
	.ptl-lu { outline: 2px solid Highlight; background: none; box-shadow: none; }
}
@media print { .ptl-ecoute, .ptl-ecoute-ancre { display: none !important; } }