/**
 * Dahlia Bricks Kit — « Lire la suite / Lire moins »
 *
 * Repli au line-clamp plutôt qu'au max-height + dégradé : indépendant de la
 * couleur de fond, et l'ellipsis tombe proprement en fin de dernière ligne.
 *
 * Structure construite par le JS, de façon que le bouton reste un DESCENDANT
 * de l'élément Bricks — c'est ce qui permet de le styler depuis le builder,
 * dont les sélecteurs sont toujours de la forme « #brxe-id … » :
 *
 *   <div id="brxe-xxx" class="brxe-text dbk-clamp">
 *     <div class="dbk-clamp__content"> … </div>
 *     <button class="dbk-clamp__toggle"> … </button>
 *   </div>
 *
 * Variables (posées par les contrôles Bricks, surchargeables à la main) :
 *   --dbk-clamp-lines    lignes visibles repliées   (défaut 8)
 *   --dbk-clamp-speed    durée du dépliage en ms    (défaut 350)
 *   --dbk-clamp-easing   courbe                     (défaut cubic-bezier douce)
 */

/* data-dbk-clamped n'est posé que si le contenu déborde réellement : un texte
   court garde son rendu normal, sans bouton orphelin.

   Le repli est suspendu pendant l'animation (:not([data-dbk-animating])) :
   sinon, en refermant, le texte serait tronqué d'un coup avant même que la
   boîte ait commencé à se réduire. */
.dbk-clamp[data-dbk-clamped='true']:not([data-dbk-open='true']):not([data-dbk-animating='true']) .dbk-clamp__content {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--dbk-clamp-lines, 8);
	line-clamp: var(--dbk-clamp-lines, 8);
	overflow: hidden;
}

/* L'animation porte sur max-height : height:auto n'est pas encore interpolable
   partout (interpolate-size n'est pas assez répandu). Le JS pose les deux
   bornes en pixels, puis rend la main à la hauteur naturelle. */
.dbk-clamp__content {
	/* Le contrôle Bricks écrit un nombre nu (350, pas 350ms) : sans le calc,
	   la durée serait invalide et le raccourci transition tomberait en entier. */
	transition: max-height calc(var(--dbk-clamp-speed, 350) * 1ms) var(--dbk-clamp-easing, cubic-bezier(0.22, 1, 0.36, 1));
}

.dbk-clamp[data-dbk-animating='true'] .dbk-clamp__content {
	overflow: hidden;
}

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

/* La marge basse du dernier enfant fausserait la mesure du dépassement. */
.dbk-clamp__content > :last-child {
	margin-bottom: 0;
}

.dbk-clamp__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	margin-top: 0.8rem;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	/* Repli en cascade : --dbk-clamp-color posée une fois (sur :root, une
	   section, un conteneur…) colore tous les boutons dessous. Le contrôle
	   « Couleur » de l'élément écrit, lui, sur #brxe-id .dbk-clamp__toggle et
	   l'emporte donc là où on veut une exception. Sans l'un ni l'autre, on
	   hérite de la couleur du texte. */
	color: var(--dbk-clamp-color, currentColor);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Bricks pose un display sur ses éléments : sans !important, [hidden] perdrait. */
.dbk-clamp__toggle[hidden] {
	display: none !important;
}

.dbk-clamp__toggle::after {
	content: '';
	width: 0.42em;
	height: 0.42em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
	transition: transform 0.2s ease;
}

.dbk-clamp__toggle[aria-expanded='true']::after {
	transform: translateY(0.05em) rotate(-135deg);
}

.dbk-clamp--no-chevron .dbk-clamp__toggle::after {
	display: none;
}

.dbk-clamp__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.dbk-clamp__toggle::after {
		transition: none;
	}
}