/* ── DP – Slider ───────────────────────────────────────────────────────
 *
 * Le défilement est celui du navigateur : .dp-sl__viewport est un conteneur
 * scrollable en scroll-snap. Le script ne fait que lire la position et piloter
 * scrollLeft ; la fluidité vient de scroll-behavior, ce qui rend le respect de
 * prefers-reduced-motion automatique (voir tout en bas).
 */

.dp-sl {
	--dp-sl-accent: var(--dp-color-primary, #1a86a2);
	--dp-sl-header-title: var(--dp-color-text, #3c3c3b);
	--dp-sl-title: var(--dp-color-text, #3c3c3b);
	--dp-sl-text: var(--dp-color-text-muted, #6b7280);
	--dp-sl-card-bg: var(--dp-color-surface, #ffffff);
	--dp-sl-border: var(--dp-color-border, #e5e7eb);
	--dp-sl-nav-bg: var(--dp-color-surface, #ffffff);
	--dp-sl-nav-icon: var(--dp-color-text, #3c3c3b);
	--dp-sl-dot: var(--dp-color-border, #d5dbe3);
	--dp-sl-dot-active: var(--dp-color-primary, #1a86a2);
	--dp-sl-overlay-text: #ffffff;
	--dp-sl-overlay-opacity: 0.62;

	--dp-sl-height: 520px;
	--dp-sl-gap: 20px;
	--dp-sl-per-view: 1;
	--dp-sl-peek: 0px;
	--dp-sl-content-padding: 40px;
	--dp-sl-content-max: 560px;
	/* Éléments posés sur le visuel : retrait depuis le bord, et gouttière que le
	   contenu leur laisse (retrait + taille du groupe + air). */
	--dp-sl-arrow-inset: 16px;
	--dp-sl-arrow-gutter: 74px;
	--dp-sl-dots-inset: 18px;
	--dp-sl-dots-gutter: 46px;

	display: block;
	box-sizing: border-box;
	font-family: var(--dp-font-base, inherit);
	font-weight: var(--dp-font-base-weight, 400);
}

.dp-sl *,
.dp-sl *::before,
.dp-sl *::after {
	box-sizing: border-box;
}

/* ── En-tête du bloc ── */
.dp-sl__header {
	max-width: 720px;
	margin-bottom: 26px;
}

.dp-sl--header-center .dp-sl__header {
	margin-inline: auto;
	text-align: center;
}

.dp-sl__header-eyebrow {
	margin: 0 0 8px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dp-sl-accent);
	line-height: 1.3;
}

.dp-sl__header-title {
	margin: 0;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--dp-sl-header-title);
	font-family: var(--dp-font-heading, inherit);
}

.dp-sl__header-text {
	margin: 12px 0 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--dp-sl-text);
}

/* ── Piste ── */
.dp-sl__stage {
	position: relative;
}

.dp-sl__viewport {
	display: flex;
	gap: var(--dp-sl-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	/* Les puces suffisent à situer la position : on masque la barre système
	   plutôt que de laisser deux indicateurs concurrents. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dp-sl__viewport::-webkit-scrollbar {
	display: none;
}

.dp-sl__slide {
	position: relative;
	flex: 0 0 calc((100% - (var(--dp-sl-per-view) - 1) * var(--dp-sl-gap) - var(--dp-sl-peek)) / var(--dp-sl-per-view));
	min-width: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
	border-radius: var(--dp-sl-slide-radius, var(--dp-radius-lg, 20px));
}

/* Accent effectif de la slide : résolu ici, sur l'élément qui porte l'override
   inline, sinon la chaîne serait figée avant que la variable n'existe. */
.dp-sl__slide {
	--dp-sl-item: var(--dp-sl-slide-accent, var(--dp-sl-accent));
}

.dp-sl__media {
	position: relative;
	overflow: hidden;
	background: var(--dp-color-surface-alt, #fafafa);
}

.dp-sl__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dp-sl__content {
	display: flex;
	min-width: 0;
}

.dp-sl__content-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	max-width: var(--dp-sl-content-max);
	padding: var(--dp-sl-content-padding);
}

.dp-sl--align-center .dp-sl__content-inner {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.dp-sl--align-right .dp-sl__content-inner {
	align-items: flex-end;
	text-align: right;
	margin-inline-start: auto;
}

/* ── Éléments de contenu ── */
.dp-sl__badge {
	padding: 4px 12px;
	border-radius: var(--dp-radius-pill, 999px);
	background: var(--dp-sl-item);
	color: #ffffff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
}

.dp-sl__eyebrow {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dp-sl-item);
	line-height: 1.3;
}

.dp-sl__title {
	margin: 0;
	font-size: clamp(1.35rem, 1rem + 1.4vw, 2.4rem);
	font-weight: var(--dp-font-heading-weight, 700);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--dp-sl-title);
	font-family: var(--dp-font-heading, inherit);
}

.dp-sl__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--dp-sl-text);
}

.dp-sl__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 4px 0 0;
}

.dp-sl__author-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--dp-sl-title);
}

.dp-sl__author-role {
	font-size: 0.85rem;
	color: var(--dp-sl-text);
}

/* ── Boutons ── */
.dp-sl__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 6px;
}

.dp-sl__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: var(--dp-radius-md, 16px);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dp-sl__button--primary {
	background: var(--dp-sl-item);
	border-color: var(--dp-sl-item);
	color: #ffffff;
}

.dp-sl__button--primary:hover,
.dp-sl__button--primary:focus-visible {
	background: var(--dp-color-primary-dark, #14707f);
	border-color: var(--dp-color-primary-dark, #14707f);
	color: #ffffff;
	text-decoration: none;
}

.dp-sl__button--secondary {
	background: transparent;
	border-color: var(--dp-sl-border);
	color: var(--dp-sl-title);
}

.dp-sl__button--secondary:hover,
.dp-sl__button--secondary:focus-visible {
	border-color: var(--dp-sl-item);
	color: var(--dp-sl-item);
	text-decoration: none;
}

/* ── Design « cover » ── */
.dp-sl--cover .dp-sl__slide {
	height: var(--dp-sl-height);
	background: var(--dp-color-surface-alt, #fafafa);
}

.dp-sl--cover .dp-sl__media {
	position: absolute;
	inset: 0;
}

.dp-sl__overlay {
	position: absolute;
	inset: 0;
	/* Voile orienté vers le bas : le texte reste lisible sans assombrir tout
	   le visuel. */
	background: linear-gradient(
		to top,
		rgba(12, 24, 34, var(--dp-sl-overlay-opacity)) 0%,
		rgba(12, 24, 34, calc(var(--dp-sl-overlay-opacity) * 0.55)) 45%,
		rgba(12, 24, 34, 0) 100%
	);
}

.dp-sl--cover .dp-sl__content {
	position: relative;
	height: 100%;
	width: 100%;
}

.dp-sl--cover .dp-sl__title,
.dp-sl--cover .dp-sl__text,
.dp-sl--cover .dp-sl__author-name,
.dp-sl--cover .dp-sl__author-role {
	color: var(--dp-sl-overlay-text);
}

.dp-sl--cover .dp-sl__eyebrow {
	color: var(--dp-sl-overlay-text);
	opacity: 0.85;
}

.dp-sl--cover .dp-sl__button--secondary {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--dp-sl-overlay-text);
}

.dp-sl--cover .dp-sl__button--secondary:hover,
.dp-sl--cover .dp-sl__button--secondary:focus-visible {
	border-color: var(--dp-sl-overlay-text);
	background: rgba(255, 255, 255, 0.14);
	color: var(--dp-sl-overlay-text);
}

.dp-sl--cover.dp-sl--valign-top .dp-sl__content { align-items: flex-start; }
.dp-sl--cover.dp-sl--valign-center .dp-sl__content { align-items: center; }
.dp-sl--cover.dp-sl--valign-bottom .dp-sl__content { align-items: flex-end; }

/* Sans image, le voile n'a rien à assombrir : on garde un texte foncé. */
.dp-sl--cover .dp-sl__slide--no-image .dp-sl__title,
.dp-sl--cover .dp-sl__slide--no-image .dp-sl__author-name {
	color: var(--dp-sl-title);
}

.dp-sl--cover .dp-sl__slide--no-image .dp-sl__text,
.dp-sl--cover .dp-sl__slide--no-image .dp-sl__author-role {
	color: var(--dp-sl-text);
}

.dp-sl--cover .dp-sl__slide--no-image .dp-sl__eyebrow {
	color: var(--dp-sl-item);
	opacity: 1;
}

/* ── Design « split » ── */
.dp-sl--split .dp-sl__slide {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: var(--dp-sl-height);
	background: var(--dp-sl-card-bg);
	border: 1px solid var(--dp-sl-border);
}

.dp-sl--split .dp-sl__media {
	height: 100%;
}

.dp-sl--split .dp-sl__content {
	align-items: center;
}

.dp-sl--split .dp-sl__slide--reverse .dp-sl__media { order: 2; }
.dp-sl--split .dp-sl__slide--reverse .dp-sl__content { order: 1; }

.dp-sl--split .dp-sl__slide--no-image {
	grid-template-columns: 1fr;
}

/* ── Design « cards » ── */
.dp-sl--cards .dp-sl__slide {
	display: flex;
	flex-direction: column;
	background: var(--dp-sl-card-bg);
	border: 1px solid var(--dp-sl-border);
	border-radius: var(--dp-sl-card-radius, var(--dp-radius-lg, 20px));
	transition: box-shadow 0.25s ease;
}

.dp-sl--cards .dp-sl__slide:hover {
	box-shadow: 0 14px 32px rgba(16, 51, 96, 0.12);
}

.dp-sl--cards .dp-sl__media {
	aspect-ratio: 16 / 10;
	flex: 0 0 auto;
}

.dp-sl--cards .dp-sl__content {
	flex: 1;
}

.dp-sl--cards .dp-sl__content-inner {
	max-width: none;
	padding: 24px;
}

.dp-sl--cards .dp-sl__title {
	font-size: 1.15rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.dp-sl--cards .dp-sl__text {
	font-size: 0.92rem;
}

.dp-sl--cards .dp-sl__buttons {
	margin-top: auto;
	padding-top: 8px;
}

.dp-sl--cards .dp-sl__button {
	padding: 10px 18px;
	font-size: 0.88rem;
}

/* ── Design « quote » ──
 * Le médaillon de l'auteur reste dans le flux, empilé au-dessus du verbatim.
 * Le positionner en absolu obligerait à décaler le texte d'une hauteur calculée
 * à partir de --dp-sl-content-padding, qui vient d'un contrôle DIMENSIONS et
 * vaut donc quatre valeurs : un calc() dessus serait invalide et la règle
 * entière serait ignorée. */
.dp-sl--quote .dp-sl__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--dp-color-primary-soft, #f0f6f8);
	border-radius: var(--dp-sl-slide-radius, var(--dp-radius-lg, 20px));
}

.dp-sl--quote .dp-sl__content {
	justify-content: center;
	width: 100%;
}

.dp-sl--quote .dp-sl__content-inner {
	align-items: center;
	text-align: center;
	max-width: 760px;
	margin-inline: auto;
}

/* La photo de l'auteur passe en médaillon : une image plein cadre écraserait
   le verbatim, qui est le sujet de ce design. */
.dp-sl--quote .dp-sl__media {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	margin-block-start: 32px;
	border-radius: 50%;
	border: 3px solid var(--dp-color-surface, #ffffff);
}

/* Le médaillon apporte déjà l'air du haut : sans lui, c'est au contenu de le
   fournir. */
.dp-sl--quote .dp-sl__slide:not(.dp-sl__slide--no-image) .dp-sl__content-inner {
	padding-block-start: 18px;
}

.dp-sl__quote-mark {
	display: block;
	font-family: var(--dp-font-heading, inherit);
	font-size: 4rem;
	font-weight: 700;
	line-height: 0.6;
	color: var(--dp-sl-item);
	opacity: 0.35;
}

.dp-sl--quote .dp-sl__text {
	font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.5rem);
	line-height: 1.5;
	font-weight: 500;
	color: var(--dp-sl-title);
	border: 0;
	padding: 0;
	quotes: none;
}

/* ── Contrôles ── */
.dp-sl__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 18px;
	min-height: 40px;
}

.dp-sl__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dp-sl__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 2px;
	background: none;
	border: 0;
	cursor: pointer;
	appearance: none;
}

/* Le script masque les puces sans position atteignable (plusieurs cartes
   visibles : les dernières slides ne peuvent pas se placer en tête de piste).
   La règle est indispensable : un display posé par la feuille de style prime
   sur le display:none que le navigateur associe à l'attribut hidden. */
.dp-sl__dot[hidden] {
	display: none;
}

.dp-sl__dot > span {
	display: block;
	background: var(--dp-sl-dot);
	transition: background-color 0.2s ease, width 0.25s ease;
}

.dp-sl__dot[aria-current="true"] > span {
	background: var(--dp-sl-dot-active);
}

.dp-sl__dot:focus-visible {
	outline: 2px solid var(--dp-sl-accent);
	outline-offset: 2px;
	border-radius: var(--dp-radius-sm, 10px);
}

.dp-sl--dots-dot .dp-sl__dot > span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

.dp-sl--dots-bar .dp-sl__dot > span {
	width: 22px;
	height: 4px;
	border-radius: var(--dp-radius-pill, 999px);
}

.dp-sl--dots-bar .dp-sl__dot[aria-current="true"] > span {
	width: 40px;
}

.dp-sl--dots-line .dp-sl__dots {
	flex: 1;
	gap: 0;
}

.dp-sl--dots-line .dp-sl__dot {
	flex: 1;
	padding-block: 8px;
}

.dp-sl--dots-line .dp-sl__dot > span {
	width: 100%;
	height: 3px;
}

.dp-sl__counter {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--dp-sl-text);
	white-space: nowrap;
}

.dp-sl__counter-sep {
	opacity: 0.5;
	margin-inline: 2px;
}

.dp-sl__arrows {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dp-sl__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--dp-sl-nav-bg);
	color: var(--dp-sl-nav-icon);
	border: 1px solid var(--dp-sl-border);
	border-radius: var(--dp-radius-pill, 999px);
	cursor: pointer;
	appearance: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dp-sl__arrow:hover:not([disabled]) {
	background: var(--dp-sl-accent);
	border-color: var(--dp-sl-accent);
	color: #ffffff;
}

.dp-sl__arrow:focus-visible {
	outline: 2px solid var(--dp-sl-accent);
	outline-offset: 2px;
}

/* Bout de piste atteint sans bouclage : la flèche reste dans le flux pour ne
   pas décaler les autres contrôles, mais devient inopérante. */
.dp-sl__arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ── Emplacement des flèches et des puces ──────────────────────────────
 *
 * Dans la barre, chaque groupe se place indépendamment : les marges auto se
 * partagent l'espace libre, et `order` décide de qui vient avant qui. Le
 * compteur garde une place centrale par défaut.
 *
 * Sur le visuel, les groupes sortent du flux et se calent sur la hauteur connue
 * de la slide (--dp-sl-height). Le PHP n'autorise ces positions que sur les
 * designs cover et split, seuls à avoir une hauteur réglée. */

.dp-sl__counter { order: 3; }

.dp-sl--arrows-bar-left .dp-sl__arrows { order: 1; margin-inline-end: auto; }
.dp-sl--arrows-bar-center .dp-sl__arrows { order: 4; margin-inline: auto; }
.dp-sl--arrows-bar-right .dp-sl__arrows { order: 6; margin-inline-start: auto; }

.dp-sl--dotspos-bar-left .dp-sl__dots { order: 2; margin-inline-end: auto; }
.dp-sl--dotspos-bar-center .dp-sl__dots { order: 5; margin-inline: auto; }
.dp-sl--dotspos-bar-right .dp-sl__dots { order: 7; margin-inline-start: auto; }

/* Flèches posées de part et d'autre du visuel. */
.dp-sl--arrows-sides .dp-sl__arrows {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--dp-sl-height);
	margin: 0;
	padding-inline: var(--dp-sl-arrow-inset);
	justify-content: space-between;
	pointer-events: none;
}

/* Flèches groupées en haut à droite du visuel. */
.dp-sl--arrows-over-top .dp-sl__arrows {
	position: absolute;
	inset-block-start: var(--dp-sl-arrow-inset);
	inset-inline-end: var(--dp-sl-arrow-inset);
	margin: 0;
	pointer-events: none;
}

.dp-sl--arrows-sides .dp-sl__arrow,
.dp-sl--arrows-over-top .dp-sl__arrow {
	pointer-events: auto;
	box-shadow: 0 4px 14px rgba(12, 24, 34, 0.18);
}

/* Puces posées en bas du visuel : même repère de hauteur, ancrage en bas. */
.dp-sl--dotspos-over-left .dp-sl__dots,
.dp-sl--dotspos-over-center .dp-sl__dots {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: var(--dp-sl-height);
	margin: 0;
	padding: 0 var(--dp-sl-arrow-inset) var(--dp-sl-dots-inset);
	align-items: flex-end;
}

.dp-sl--dotspos-over-left .dp-sl__dots { justify-content: flex-start; }
.dp-sl--dotspos-over-center .dp-sl__dots { justify-content: center; }

/* Sur une image, une puce grise se perd : on la passe en blanc translucide. */
.dp-sl--dotspos-over-left .dp-sl__dot > span,
.dp-sl--dotspos-over-center .dp-sl__dot > span {
	background: rgba(255, 255, 255, 0.55);
}

.dp-sl--dotspos-over-left .dp-sl__dot[aria-current="true"] > span,
.dp-sl--dotspos-over-center .dp-sl__dot[aria-current="true"] > span {
	background: #ffffff;
}

/* Gouttières réservées aux éléments posés sur le visuel : sans elles, un
   sur-titre ou un bouton passe dessous et devient illisible. Elles s'ajoutent au
   padding du contenu, qui vient d'un contrôle DIMENSIONS et ne peut donc pas
   entrer dans un calcul. Inutiles en dessous de 641 px, où tout revient dans la
   barre. */
@media (min-width: 641px) {
	.dp-sl--arrows-sides .dp-sl__content {
		padding-inline: var(--dp-sl-arrow-gutter);
	}

	.dp-sl--arrows-over-top .dp-sl__content {
		padding-block-start: var(--dp-sl-arrow-gutter);
	}

	.dp-sl--dotspos-over-left .dp-sl__content,
	.dp-sl--dotspos-over-center .dp-sl__content {
		padding-block-end: var(--dp-sl-dots-gutter);
	}
}

/* ── Repli tablette / mobile ── */
@media (max-width: 1024px) {
	.dp-sl--split .dp-sl__slide {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.dp-sl--split .dp-sl__media {
		height: 260px;
		order: 1;
	}

	.dp-sl--split .dp-sl__content {
		order: 2;
	}

	.dp-sl--split .dp-sl__slide--reverse .dp-sl__media { order: 1; }
	.dp-sl--split .dp-sl__slide--reverse .dp-sl__content { order: 2; }

	/* Le split passe sur une colonne : sa hauteur n'est plus celle réglée, les
	   éléments posés sur le visuel n'ont plus de repère et reviennent dans la
	   barre. */
	.dp-sl--split[class*="dp-sl--arrows-sides"] .dp-sl__arrows,
	.dp-sl--split[class*="dp-sl--arrows-over"] .dp-sl__arrows,
	.dp-sl--split[class*="dp-sl--dotspos-over"] .dp-sl__dots {
		position: static;
		height: auto;
		padding: 0;
		margin-inline-start: auto;
		justify-content: flex-end;
		align-items: center;
	}

	.dp-sl--split[class*="dp-sl--arrows-sides"] .dp-sl__content,
	.dp-sl--split[class*="dp-sl--arrows-over"] .dp-sl__content,
	.dp-sl--split[class*="dp-sl--dotspos-over"] .dp-sl__content {
		padding: var(--dp-sl-content-padding);
	}
}

@media (max-width: 640px) {
	.dp-sl {
		--dp-sl-content-padding: 24px;
		/* Une carte partiellement visible suggère le geste de balayage. */
		--dp-sl-peek: 38px;
	}

	.dp-sl--cards {
		--dp-sl-per-view: 1;
	}

	/* Le débord ne concerne que le design « cards », où il suggère qu'il reste
	   des cartes à balayer. Ailleurs il rétrécit la slide sous la largeur du
	   conteneur : la dernière ne peut alors plus se caler en tête de piste, et
	   un slider de deux slides se retrouve bloqué sur la première. */
	.dp-sl--cover,
	.dp-sl--split,
	.dp-sl--quote {
		--dp-sl-peek: 0px;
	}

	.dp-sl--cover .dp-sl__slide {
		height: auto;
		min-height: 420px;
	}

	/* Trop étroit pour une gouttière : tout ce qui était posé sur le visuel
	   redescend dans la barre. */
	[class*="dp-sl--arrows-sides"] .dp-sl__arrows,
	[class*="dp-sl--arrows-over"] .dp-sl__arrows,
	[class*="dp-sl--dotspos-over"] .dp-sl__dots {
		position: static;
		height: auto;
		padding: 0;
		margin-inline-start: auto;
		justify-content: flex-end;
		align-items: center;
	}

	/* Puces redevenues grises sur fond clair : le blanc translucide réservé au
	   visuel ne serait plus lisible. */
	[class*="dp-sl--dotspos-over"] .dp-sl__dot > span {
		background: var(--dp-sl-dot);
	}

	[class*="dp-sl--dotspos-over"] .dp-sl__dot[aria-current="true"] > span {
		background: var(--dp-sl-dot-active);
	}

	.dp-sl__controls {
		margin-top: 14px;
	}

	.dp-sl--quote .dp-sl__media {
		width: 60px;
		height: 60px;
		margin-block-start: 24px;
	}
}

/* Le confort de lecture prime : plus de défilement animé, et le script coupe
   l'automatique en lisant la même préférence. */
@media (prefers-reduced-motion: reduce) {
	.dp-sl__viewport {
		scroll-behavior: auto;
	}

	.dp-sl__slide,
	.dp-sl__button,
	.dp-sl__arrow,
	.dp-sl__dot > span {
		transition: none;
	}
}