/**
 * Douanes – Rubriques : styles du carrousel frontend.
 *
 * Toutes les classes sont préfixées « dr- » pour éviter toute collision avec
 * le thème. Les couleurs et rayons passent par des variables CSS : un thème
 * peut les redéfinir sans toucher à ce fichier.
 */

.dr-carousel {
	--dr-gap: 24px;
	--dr-per-view-desktop: 3;
	--dr-per-view-tablet: 2;
	--dr-per-view-mobile: 1;
	--dr-per-view: var(--dr-per-view-mobile);

	--dr-color-accent: #0b4a7a;
	--dr-color-accent-dark: #08375a;
	--dr-color-text: #1d2327;
	--dr-color-muted: #55606a;
	--dr-color-surface: #ffffff;
	--dr-color-border: #e2e6ea;
	--dr-radius: 10px;
	--dr-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);

	position: relative;
	box-sizing: border-box;
	margin: 0 0 2rem;
}

.dr-carousel *,
.dr-carousel *::before,
.dr-carousel *::after {
	box-sizing: inherit;
}

.dr-carousel__heading {
	margin: 0 0 1.25rem;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
	line-height: 1.2;
	color: var(--dr-color-text);
}

/* ---------------------------------------------------------------------------
 * Piste et défilement
 * ------------------------------------------------------------------------ */

.dr-carousel__viewport {
	overflow: hidden;
}

.dr-carousel__track {
	display: flex;
	gap: var(--dr-gap);
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.dr-carousel__track::-webkit-scrollbar {
	display: none;
}

.dr-carousel__slide {
	flex: 0 0 calc((100% - (var(--dr-per-view) - 1) * var(--dr-gap)) / var(--dr-per-view));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

/* Sans JavaScript, la piste reste une galerie horizontale utilisable au doigt :
   on masque seulement les contrôles, qui seraient inopérants. */
.dr-carousel--no-js .dr-carousel__controls {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Vignette
 * ------------------------------------------------------------------------ */

.dr-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--dr-color-surface);
	border: 1px solid var(--dr-color-border);
	border-radius: var(--dr-radius);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dr-card--linked:hover,
.dr-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--dr-shadow);
}

.dr-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #eef1f4;
	overflow: hidden;
}

.dr-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.dr-card--linked:hover .dr-card__image {
	transform: scale(1.04);
}

.dr-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, #f3f5f7 25%, transparent 25%) -20px 0,
		linear-gradient(225deg, #f3f5f7 25%, transparent 25%) -20px 0,
		linear-gradient(315deg, #f3f5f7 25%, transparent 25%),
		linear-gradient(45deg, #f3f5f7 25%, transparent 25%);
	background-size: 40px 40px;
	background-color: #e9edf1;
}

.dr-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.15rem 1.25rem 1.4rem;
	flex: 1 1 auto;
}

.dr-card__title {
	margin: 0;
	font-size: 1.1rem;
	line-height: 1.35;
	color: var(--dr-color-text);
}

.dr-card__link {
	color: inherit;
	text-decoration: none;
}

/* Le lien du titre couvre toute la vignette : la zone cliquable est large,
   tout en conservant un seul élément focusable au clavier. */
.dr-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.dr-card--linked {
	position: relative;
}

.dr-card__link:hover,
.dr-card__link:focus-visible {
	color: var(--dr-color-accent);
	text-decoration: underline;
}

.dr-card__description {
	margin: 0;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--dr-color-muted);
}

.dr-card__button {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	margin-top: auto;
	padding: 0.55rem 1.1rem;
	background: var(--dr-color-accent);
	color: #fff;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.dr-card__button:hover,
.dr-card__button:focus-visible {
	background: var(--dr-color-accent-dark);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Contrôles (générés par le JavaScript)
 * ------------------------------------------------------------------------ */

.dr-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* Le JavaScript masque les contrôles via l'attribut [hidden] lorsque toutes les
   vignettes tiennent dans une seule vue. Sans cette règle, le « display: flex »
   ci-dessus l'emporterait sur le display:none par défaut du navigateur et des
   contrôles inutiles resteraient visibles. */
.dr-carousel__controls[hidden] {
	display: none;
}

.dr-carousel__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: var(--dr-color-surface);
	border: 1px solid var(--dr-color-border);
	border-radius: 50%;
	color: var(--dr-color-accent);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.dr-carousel__nav:hover:not(:disabled) {
	background: var(--dr-color-accent);
	border-color: var(--dr-color-accent);
	color: #fff;
}

.dr-carousel__nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.dr-carousel__nav svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.dr-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dr-carousel__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	background: #c7ced5;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.dr-carousel__dot[aria-current="true"] {
	background: var(--dr-color-accent);
	transform: scale(1.35);
}

.dr-carousel__nav:focus-visible,
.dr-carousel__dot:focus-visible,
.dr-card__link:focus-visible,
.dr-card__button:focus-visible {
	outline: 2px solid var(--dr-color-accent);
	outline-offset: 3px;
}

/* Utilitaire d'accessibilité, repris de WordPress pour les thèmes qui ne le
   définiraient pas eux-mêmes. */
.dr-carousel .screen-reader-text {
	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;
}

/* ---------------------------------------------------------------------------
 * Points de rupture
 * ------------------------------------------------------------------------ */

@media (min-width: 768px) {
	.dr-carousel {
		--dr-per-view: var(--dr-per-view-tablet);
	}
}

@media (min-width: 1024px) {
	.dr-carousel {
		--dr-per-view: var(--dr-per-view-desktop);
	}
}

/* ---------------------------------------------------------------------------
 * Préférences utilisateur
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.dr-carousel__track {
		scroll-behavior: auto;
	}

	.dr-card,
	.dr-card__image {
		transition: none;
	}

	.dr-card--linked:hover {
		transform: none;
	}

	.dr-card--linked:hover .dr-card__image {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
 * Variante grille (layout="grid")
 *
 * Aucun second moteur : on neutralise le défilement et les contrôles, la piste
 * devient une grille. Le JavaScript s'arrête de lui-même sur cette classe.
 * ------------------------------------------------------------------------ */

.dr-carousel--grid .dr-carousel__track {
	display: grid;
	grid-template-columns: repeat(var(--dr-per-view), minmax(0, 1fr));
	overflow-x: visible;
	scroll-snap-type: none;
}

.dr-carousel--grid .dr-carousel__slide {
	flex: none;
	scroll-snap-align: none;
}

.dr-carousel--grid .dr-carousel__controls {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Date de publication (sources dynamiques)
 * ------------------------------------------------------------------------ */

.dr-card__date {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--dr-color-accent);
}

/* ---------------------------------------------------------------------------
 * Vignette vidéo
 * ------------------------------------------------------------------------ */

.dr-card--video .dr-card__media {
	position: relative;
}

.dr-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 74, 122, 0.25);
	transition: background-color 0.25s ease;
}

.dr-card__play::before {
	content: "";
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 4px 16px rgba(16, 24, 40, 0.25);
}

.dr-card__play::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 9px 0 9px 15px;
	border-color: transparent transparent transparent var(--dr-color-accent);
	transform: translateX(2px);
}

.dr-card--video:hover .dr-card__play {
	background: rgba(11, 74, 122, 0.1);
}

@media (prefers-reduced-motion: reduce) {
	.dr-card__play {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Variante « superposée » (variant="overlay")
 *
 * Reproduit à l'identique le slider « À la Une » du site : image de fond en
 * plein cadre, et un pavé teinté posé en bas à gauche qui contient le texte.
 *
 * Contrairement à ce qu'on pourrait croire en regardant une capture, il n'y a
 * AUCUNE teinte sur l'ensemble de l'image : la couleur ne couvre que le pavé
 * de contenu, qui épouse sa propre hauteur.
 *
 * Toutes les valeurs proviennent du CSS du site et sont exposées en variables,
 * pour être ajustées depuis le thème sans modifier le plugin.
 *
 * Ajout pur : aucune règle ci-dessus n'est modifiée, le rendu par défaut
 * (variant="card") est inchangé, et le moteur, la piste, les contrôles et le
 * JavaScript sont identiques dans les deux variantes.
 * ------------------------------------------------------------------------ */

.dr-carousel--overlay {
	--dr-ov-tint: #00829599;
	--dr-ov-height: 560px;
	--dr-ov-height-mobile: 400px;
	--dr-ov-inset-left: 4vw;
	--dr-ov-inset-bottom: 15px;
	--dr-ov-padding: 28px 24px;
	--dr-ov-radius: 8px;
	--dr-ov-max-width: 87%;
	--dr-ov-font: "Lexend", sans-serif;
	--dr-ov-title-size: 17px;
	--dr-ov-text-size: 16px;
	--dr-ov-color: #ffffff;
	--dr-ov-button-hover-bg: #fcfcfc;
	--dr-ov-button-hover-color: #0698f1;

	/* Fleches et puces. La palette generale du plugin est bleue
	   (--dr-color-accent: #0b4a7a) ; posee sur une photo aux tons turquoise du
	   site, elle jurait au survol. La variante superposee a donc ses propres
	   jetons, alignes sur la teinte du pave. */
	/* Le pave doit avoir la meme taille d'une diapositive a l'autre, quelle que
	   soit la longueur du titre ou l'absence de chapeau. Sans cela il epouse son
	   contenu : large et haut sur un article fourni, minuscule sur un article
	   sans description. */
	--dr-ov-body-min-height: 240px;
	--dr-ov-title-lines: 2;
	--dr-ov-text-lines: 2;

	--dr-ov-nav-bg: transparent;
	/* Rien derriere la fleche : ni disque, ni bordure, ni ombre. Le jeton
	   reste expose pour retablir une ombre portee si, sur une photo tres
	   claire, la fleche blanche devenait illisible. */
	--dr-ov-nav-shadow: none;
	/* Position verticale des fleches. Sur mobile, le pave de texte occupe
	   pres de la moitie basse de la diapositive : centrees, les fleches
	   mordaient dessus. On les remonte dans le tiers superieur. */
	--dr-ov-nav-top: 50%;
	--dr-ov-nav-top-mobile: 26%;
	--dr-ov-nav-color: #ffffff;
	--dr-ov-nav-hover-bg: transparent;
	--dr-ov-nav-hover-color: #ffffff;
	--dr-ov-focus: #ffffff;
}

.dr-card--overlay {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	min-height: var(--dr-ov-height-mobile);
	padding: 0;
	border: 0;
	border-radius: 0;
	background: #bbbbbb;
	overflow: hidden;
}

@media (min-width: 768px) {
	.dr-card--overlay {
		min-height: var(--dr-ov-height);
	}
}

/* L'image occupe tout le cadre, derrière le pavé. */
.dr-card--overlay .dr-card__media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	background: none;
}

/* Beaucoup de thèmes imposent « height: auto » aux images de contenu, parfois
   en !important. Sans cette contre-mesure, l'image conserve son rapport
   d'origine et ne remplit pas la diapositive. Constaté sur le thème du site.
   Portée volontairement étroite : la variante superposée uniquement. */
.dr-card--overlay .dr-card__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

.dr-card--overlay .dr-card__placeholder {
	position: absolute;
	inset: 0;
}

/* Le pavé teinté : c'est lui, et lui seul, qui porte la couleur. */
.dr-card--overlay .dr-card__body {
	position: relative;
	z-index: 10;
	flex: 0 0 auto;
	gap: 0;
	/* « width » et non le seul « max-width » : sinon le pave se contente de la
	   place que reclame son texte et change de largeur a chaque diapositive. */
	width: var(--dr-ov-max-width);
	min-height: var(--dr-ov-body-min-height);
	max-width: var(--dr-ov-max-width);
	margin: 0 0 var(--dr-ov-inset-bottom) var(--dr-ov-inset-left);
	padding: var(--dr-ov-padding);
	background-color: var(--dr-ov-tint);
	border-radius: var(--dr-ov-radius);
	text-align: left;
	font-family: var(--dr-ov-font);
	color: var(--dr-ov-color);
}

.dr-card--overlay .dr-card__date {
	margin: 0 0 8px;
	color: var(--dr-ov-color);
	opacity: 0.9;
}

.dr-card--overlay .dr-card__title {
	margin: 0 0 16px;
	color: var(--dr-ov-color);
	font-family: var(--dr-ov-font);
	font-size: var(--dr-ov-title-size);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
}

.dr-card--overlay .dr-card__link {
	color: var(--dr-ov-color);
}

.dr-card--overlay .dr-card__link:hover,
.dr-card--overlay .dr-card__link:focus-visible {
	color: var(--dr-ov-color);
	text-decoration: underline;
}

.dr-card--overlay .dr-card__description {
	margin: 0 0 16px;
	color: var(--dr-ov-color);
	font-family: var(--dr-ov-font);
	font-size: var(--dr-ov-text-size);
	font-weight: 500;
	line-height: 1.3;
}

.dr-card--overlay .dr-card__button {
	align-self: flex-start;
	margin: auto 0 0;
	padding: 0.55rem 1.25rem;
	background: transparent;
	border: 1px solid var(--dr-ov-color);
	border-radius: 3px;
	color: var(--dr-ov-color);
	font-family: var(--dr-ov-font);
	font-size: 0.9rem;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dr-card--overlay .dr-card__button:hover,
.dr-card--overlay .dr-card__button:focus-visible {
	background: var(--dr-ov-button-hover-bg);
	color: var(--dr-ov-button-hover-color);
}

/* Titre et chapeau sont bornes en nombre de lignes : conjugue au min-height
   ci-dessus, cela donne un pave de gabarit constant d'une diapositive a
   l'autre, ce que demande la maquette du site. Les deux valeurs sont des
   variables : un titre systematiquement plus long se rattrape en passant
   --dr-ov-title-lines a 3, sans toucher au plugin. */
.dr-card--overlay .dr-card__title,
.dr-card--overlay .dr-card__description {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Le bornage seul ne suffit pas : un titre sur une ligne laissait le pave
   plus court qu'un titre sur deux. On reserve donc la hauteur des lignes,
   occupees ou non. Conjugue au bornage, la hauteur naturelle du pave devient
   constante, quelle que soit la longueur du texte et quelle que soit la
   largeur de la colonne. */
.dr-card--overlay .dr-card__title {
	-webkit-line-clamp: var(--dr-ov-title-lines);
	min-height: calc(var(--dr-ov-title-lines) * 1.3em);
}

.dr-card--overlay .dr-card__description {
	-webkit-line-clamp: var(--dr-ov-text-lines);
	min-height: calc(var(--dr-ov-text-lines) * 1.3em);
}

/* Le pavé ne se soulève pas au survol : seule l'image réagit, sinon le texte
   se décalerait avec elle. */
.dr-carousel--overlay .dr-card--linked:hover,
.dr-carousel--overlay .dr-card:focus-within {
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Contrôles posés sur l'image (variante superposée)
 *
 * Le slider du site place ses flèches et ses puces à l'intérieur du visuel.
 * On reproduit ce placement ici, sans toucher au comportement : ce sont les
 * mêmes boutons, générés par le même JavaScript.
 * ------------------------------------------------------------------------ */

.dr-carousel--overlay .dr-carousel__controls {
	position: absolute;
	inset: 0;
	margin: 0;
	z-index: 20;
	/* Le conteneur ne doit pas intercepter les clics destinés à la vignette :
	   seuls les boutons eux-mêmes restent cliquables. */
	pointer-events: none;
}

.dr-carousel--overlay .dr-carousel__nav {
	position: absolute;
	top: var(--dr-ov-nav-top-mobile);
	transform: translateY(-50%);
	pointer-events: auto;
	background: var(--dr-ov-nav-bg);
	border: 0;
	border-radius: 0;
	color: var(--dr-ov-nav-color);
	opacity: 0.9;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.dr-carousel--overlay .dr-carousel__nav svg {
	filter: var(--dr-ov-nav-shadow);
}

/* La regle generale colorait le fond en --dr-color-accent au survol, un bleu
   fonce etranger a la charte du site. On la neutralise pour cette variante :
   le cercle devient simplement opaque, la fleche garde sa teinte. */
.dr-carousel--overlay .dr-carousel__nav:hover:not(:disabled),
.dr-carousel--overlay .dr-carousel__nav:focus-visible:not(:disabled) {
	background: var(--dr-ov-nav-hover-bg);
	border: 0;
	color: var(--dr-ov-nav-hover-color);
	opacity: 1;
	transform: translateY(-50%) scale(1.12);
}

/* Le lisere de focus reste indispensable pour la navigation au clavier, mais
   un bleu fonce est illisible sur une photo : on le passe en blanc. */
.dr-carousel--overlay .dr-carousel__nav:focus-visible,
.dr-carousel--overlay .dr-carousel__dot:focus-visible,
.dr-carousel--overlay .dr-card__link:focus-visible,
.dr-carousel--overlay .dr-card__button:focus-visible {
	outline-color: var(--dr-ov-focus);
}

@media (min-width: 768px) {
	.dr-carousel--overlay .dr-carousel__nav {
		top: var(--dr-ov-nav-top);
	}
}

.dr-carousel--overlay .dr-carousel__nav--prev {
	left: 14px;
}

.dr-carousel--overlay .dr-carousel__nav--next {
	right: 14px;
}

.dr-carousel--overlay .dr-carousel__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	pointer-events: auto;
}

.dr-carousel--overlay .dr-carousel__dot {
	background: rgba(255, 255, 255, 0.55);
}

.dr-carousel--overlay .dr-carousel__dot[aria-current="true"] {
	background: #ffffff;
}

/* ---------------------------------------------------------------------------
 * Hauteur : le carrousel epouse celle de sa colonne
 *
 * Poses cote a cote, le carrousel et le bloc voisin doivent se terminer au
 * meme niveau. Jusqu'ici la diapositive imposait une hauteur fixe
 * (--dr-ov-height) : des que le voisin changeait de contenu, les deux bas se
 * desalignaient, et il fallait recalculer la valeur a la main dans le CSS
 * du site. La hauteur est desormais deduite du conteneur.
 *
 * --dr-ov-height et --dr-ov-height-mobile restent en place comme PLANCHER.
 * Quand le parent n'impose aucune hauteur -- une page classique, une colonne
 * seule, l'empilement mobile -- height: 100% ne peut pas se resoudre et le
 * navigateur retombe sur ce plancher : le rendu est alors exactement celui
 * d'avant. Aucune regression possible, dans le pire des cas rien ne change.
 * ------------------------------------------------------------------------ */

.dr-carousel--overlay {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dr-carousel--overlay .dr-carousel__viewport {
	flex: 1 1 auto;
	min-height: 0;
}

/* Les 4 px de marge basse de la piste menagent l'ombre portee des vignettes.
   La variante superposee n'en a pas, et ils suffisaient a decaler le bas du
   carrousel par rapport a son voisin. */
.dr-carousel--overlay .dr-carousel__track {
	height: 100%;
	padding-bottom: 0;
}

.dr-carousel--overlay .dr-carousel__slide {
	height: 100%;
}

.dr-card--overlay {
	height: 100%;
}

/* ---------------------------------------------------------------------------
 * Variante « galerie » (variant="tile")
 *
 * Image 16/9 et titre discret, sans cadre, date, extrait ni bouton : le rendu
 * des pages de médias (Douane TV). La vignette entière est un seul lien.
 * ------------------------------------------------------------------------ */

.dr-card--tile {
	background: none;
	border: 0;
	border-radius: 0;
	overflow: visible;
}

/* Pas de soulèvement ni d'ombre : c'est l'image qui réagit au survol. */
.dr-card--tile.dr-card--linked:hover,
.dr-card--tile:focus-within {
	transform: none;
	box-shadow: none;
}

.dr-card__tile {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.dr-card__tile:focus-visible {
	outline: 2px solid var(--dr-color-accent);
	outline-offset: 3px;
}

.dr-card--tile .dr-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 2px;
}

/* Même contre-mesure que la variante superposée : le thème du site impose
   « height: auto » aux images, qui ne rempliraient plus le cadre 16/9. */
.dr-card--tile .dr-card__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.dr-card--tile .dr-card__placeholder {
	position: absolute;
	inset: 0;
}

/* La piste est une <ul> : le thème du site donne aux listes sa propre police
   (police système). La galerie reprend celle de la page, comme les onglets. */
.dr-carousel--tile .dr-carousel__track {
	font-family: inherit;
}

.dr-card--tile .dr-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--dr-tile-caption-color, #666666);
}

.dr-card__tile:hover .dr-card__title,
.dr-card__tile:focus-visible .dr-card__title {
	color: var(--dr-color-text);
}

/* Légende hors du lien (vidéo lue sur place) : elle reste sous le lecteur.
   Le lien n'enveloppe alors que l'image et ne doit pas occuper toute la
   hauteur de la cellule, sinon la légende serait repoussée plus bas que sous
   un lecteur. */
.dr-card--tile > .dr-card__title {
	margin: 0.5rem 0 0;
}

.dr-card--tile > .dr-card__tile[data-dr-play] {
	height: auto;
}

/* Lecteur substitué à l'image au clic, dans le même cadre 16/9. */
.dr-card__player {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 2px;
	overflow: hidden;
	background: #000000;
}

.dr-card__player iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border: 0;
}

/* Icône de lecture : disque noir et triangle blanc, sans voile sur l'image. */
.dr-card--tile .dr-card__play,
.dr-card--tile.dr-card--video:hover .dr-card__play {
	background: none;
}

.dr-card--tile .dr-card__play::before {
	width: 48px;
	height: 48px;
	background: rgba(0, 0, 0, 0.85);
	box-shadow: none;
	transition: transform 0.25s ease;
}

.dr-card--tile .dr-card__play::after {
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #ffffff;
}

.dr-card__tile:hover .dr-card__play::before,
.dr-card__tile:focus-visible .dr-card__play::before {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.dr-card--tile .dr-card__play::before {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Onglets de filtre (attribut filters, grille uniquement)
 * ------------------------------------------------------------------------ */

.dr-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.85rem;
	margin: 0 0 1rem;
}

/* Sans JavaScript, les onglets ne feraient rien : on ne les montre pas. */
.dr-carousel--no-js .dr-filters {
	display: none;
}

/* Les thèmes stylent tous les <button> avec des sélecteurs plus forts que
   le nôtre — constaté sur le site : le kit Elementor (fond et couleur de
   marque) et Twenty Twenty-One (« button:not(:hover):not(:active)… »). Les
   onglets doivent rester du texte simple : ces propriétés sont donc
   verrouillées, et uniquement sur ce bouton-ci. */
.dr-carousel .dr-filters__button,
.dr-carousel .dr-filters__button:hover,
.dr-carousel .dr-filters__button:focus,
.dr-carousel .dr-filters__button:active {
	margin: 0 !important;
	padding: 0.2rem 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--dr-filters-color, #777777) !important;
	font-family: inherit !important;
	font-size: 0.875rem !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

/* Survol et onglet actif : à peine plus foncés, sans soulignement, comme sur
   le modèle. L'état actif est exposé aux lecteurs d'écran par aria-pressed. */
.dr-carousel .dr-filters__button:hover,
.dr-carousel .dr-filters__button[aria-pressed="true"] {
	color: var(--dr-filters-color-active, #555555) !important;
}

.dr-carousel .dr-filters__button:focus-visible {
	outline: 2px solid var(--dr-color-accent);
	outline-offset: 2px;
}

/* Le thème encadre les boutons au focus, clic souris compris : le contour est
   réservé à la navigation clavier. */
.dr-carousel .dr-filters__button:focus:not(:focus-visible) {
	outline: none;
}

/* Diapositive écartée par un filtre. Le thème peut redéfinir « display » sur
   les éléments de liste : l'attribut hidden seul ne suffirait pas. */
.dr-carousel__slide[hidden] {
	display: none !important;
}