/**
 * Fold Content – Voir plus / Voir moins.
 *
 * Le JavaScript (léger, partagé entre toutes les instances) ajoute :
 * - .lwfc--overflow sur le wrapper si le texte déborde des N lignes
 *   (sinon le bouton reste masqué) ;
 * - .lwfc--open à l'ouverture, avec --lwfc-max = hauteur réelle du texte,
 *   ce qui permet d'animer max-height sur tous les navigateurs.
 *
 * Le nombre de lignes repliées est garanti par max-height: calc(N * 1lh)
 * (l'unité lh = hauteur d'une ligne, quelle que soit la police/taille).
 */

.lwfc {
	--lwfc-lines: 3;
	--lwfc-duration: 0.4s;
	--lwfc-fade-color: #fff;
}

/* ------------------------------------------------------------------ */
/* Texte replié / déplié                                               */
/* ------------------------------------------------------------------ */

.lwfc__text {
	position: relative;
	overflow: hidden;
	/* N lignes garanties quoi qu'il arrive, via l'unité lh. */
	max-height: calc(var(--lwfc-lines) * 1lh);
	transition: max-height var(--lwfc-duration) ease;
}

/* Neutralise les marges externes du contenu WYSIWYG : elles fausseraient
   la fenêtre de N lignes et la détection de débordement. */
.lwfc__text > :first-child {
	margin-top: 0;
}

.lwfc__text > :last-child {
	margin-bottom: 0;
}

/* Variante « … » : line-clamp ajoute les points de suspension. */
.lwfc--ellipsis .lwfc__text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lwfc-lines);
	line-clamp: var(--lwfc-lines);
}

/* Variante « dégradé » : fondu vers la couleur de fond, seulement si le
   texte déborde réellement. */
.lwfc--fade .lwfc__text::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1.5lh;
	background: linear-gradient(to bottom, transparent, var(--lwfc-fade-color));
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--lwfc-duration) ease;
}

.lwfc--fade.lwfc--overflow:not(.lwfc--open) .lwfc__text::after {
	opacity: 1;
}

/* État ouvert : --lwfc-max est la hauteur mesurée par le JS, donc la
   transition de max-height fonctionne sur tous les navigateurs. */
.lwfc--open .lwfc__text {
	-webkit-line-clamp: none;
	line-clamp: none;
	max-height: var(--lwfc-max, none);
}

/* Fermeture animée (option « Animer la fermeture ») : on suspend le
   line-clamp le temps de la transition, sinon il retronque le texte
   instantanément et la hauteur saute au lieu de glisser. Le JS retire
   .lwfc--closing à la fin de la transition, ce qui réapplique le clamp
   et fait réapparaître les points de suspension. */
.lwfc--anim-close.lwfc--closing .lwfc__text {
	-webkit-line-clamp: none;
	line-clamp: none;
}

/* ------------------------------------------------------------------ */
/* Bouton                                                              */
/* ------------------------------------------------------------------ */

/* Masqué par défaut : n'apparaît que si le texte déborde. */
.lwfc__actions {
	display: none;
	opacity: 0;
	margin-top: 8px;
	transition:
		opacity var(--lwfc-duration) ease,
		display var(--lwfc-duration) allow-discrete;
}

.lwfc--overflow .lwfc__actions,
.lwfc--open .lwfc__actions {
	display: block;
	opacity: 1;
}

@starting-style {
	.lwfc--overflow .lwfc__actions,
	.lwfc--open .lwfc__actions {
		opacity: 0;
	}
}

/* Option « masquer le bouton une fois ouvert ». */
.lwfc--no-less.lwfc--open .lwfc__actions {
	display: none;
	opacity: 0;
}

/* Apparence par défaut : bouton « nu » (lien). Fond, bordure, padding…
   sont personnalisables via les contrôles Elementor du widget. */
.lwfc__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.lwfc__btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Les deux libellés occupent la même cellule : le fondu croisé se fait
   sur place au lieu d'afficher les deux textes côte à côte. */
.lwfc__labels {
	display: inline-grid;
}

.lwfc__labels > .lwfc__label {
	grid-area: 1 / 1;
	justify-self: start;
}

/* Bascule animée des libellés : display anime via allow-discrete. */
.lwfc__label {
	transition:
		opacity var(--lwfc-duration) ease,
		display var(--lwfc-duration) allow-discrete;
}

.lwfc__label--less {
	display: none;
	opacity: 0;
}

.lwfc--open .lwfc__label--more {
	display: none;
	opacity: 0;
}

.lwfc--open .lwfc__label--less {
	display: inline-block;
	opacity: 1;
}

@starting-style {
	.lwfc--open .lwfc__label--less {
		opacity: 0;
	}

	.lwfc:not(.lwfc--open) .lwfc__label--more {
		opacity: 0;
	}
}

/* Chevron : rotation à l'ouverture. */
.lwfc__chevron {
	flex: none;
	transition: rotate var(--lwfc-duration) ease;
}

.lwfc--open .lwfc__chevron {
	rotate: 180deg;
}

/* ------------------------------------------------------------------ */
/* Accessibilité                                                       */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.lwfc__text,
	.lwfc__text::after,
	.lwfc__actions,
	.lwfc__label,
	.lwfc__chevron {
		transition-duration: 0.01s !important;
	}
}