/* « Écouter l'article » : une ligne à plat en tête du texte, aux couleurs du thème (clair ou sombre). */
.ds-prose .dsc-ecoute { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 2em; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--c-surface, #F2F2F4); font-size: .9375rem; line-height: 1.2; }
.ds-prose .dsc-ecoute[hidden] { display: none; }
.dsc-ecoute__bouton { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 18px 0 6px; border: 0; border-radius: 999px; background: var(--c-marque, #000); color: var(--c-sur-marque, #fff); font: inherit; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.dsc-ecoute__bouton:hover { opacity: .88; }
.dsc-ecoute__bouton:focus-visible, .dsc-ecoute__vitesse:focus-visible { outline: 2px solid var(--c-titre, #000); outline-offset: 2px; }
.dsc-ecoute__bouton svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--c-sur-marque, #fff); color: var(--c-marque, #000); box-sizing: border-box; }
.dsc-ecoute__pause, .dsc-ecoute.est-lecture .dsc-ecoute__lire { display: none; }
.dsc-ecoute.est-lecture .dsc-ecoute__pause { display: block; }
.dsc-ecoute__duree { color: var(--c-gris, #6B6F7B); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dsc-ecoute__barre { flex: 1 1 80px; height: 3px; min-width: 60px; border-radius: 3px; overflow: hidden; background: var(--c-filet, #E2E4EA); }
.dsc-ecoute__barre i { display: block; width: 0; height: 100%; background: var(--c-titre, #000); transition: width .25s linear; }
.dsc-ecoute__vitesse { min-width: 44px; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--c-titre, #000); font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.dsc-ecoute__vitesse:hover { background: var(--c-fond, #fff); }
/* Le paragraphe en cours de lecture : un fond léger, sans décaler le texte. */
.ds-prose .dsc-en-lecture { border-radius: 6px; background: color-mix(in srgb, var(--c-titre, #000) 7%, transparent); transition: background-color .3s; }
@media (prefers-reduced-motion: reduce) { .dsc-ecoute__barre i, .ds-prose .dsc-en-lecture { transition: none; } }
@media (max-width: 600px) { .ds-prose .dsc-ecoute { border-radius: 22px; } .dsc-ecoute__barre { order: 5; flex-basis: 100%; } }