/* KYMO pour Elementor — widget Description (lire plus).
   Repli en hauteur + fondu dégradé + bouton Lire plus/Lire moins.
   Les valeurs (hauteur repliée, durée, fondu, style du bouton) sont pilotées
   par les contrôles du widget ; ce fichier ne pose que la mécanique. */

.kymoel-lireplus-enveloppe {
	position: relative;
}

.kymoel-lireplus-texte {
	overflow: hidden;
	max-height: 260px; /* repli de secours, surchargé par le contrôle « Hauteur repliée » */
	transition-property: max-height;
	transition-duration: 450ms;
	transition-timing-function: ease;
}

.kymoel-lireplus-texte > :first-child {
	margin-top: 0;
}

.kymoel-lireplus-fondu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(180deg, transparent, #fff);
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.kymoel-lireplus.est-ouvert .kymoel-lireplus-fondu {
	opacity: 0;
}

/* Texte assez court : ni fondu ni bouton (classe posée par le JS). */
.kymoel-lireplus--court .kymoel-lireplus-fondu,
.kymoel-lireplus--court .kymoel-lireplus-action {
	display: none;
}

.kymoel-lireplus-action {
	display: flex;
	justify-content: flex-start;
	margin-top: 12px;
}

.kymoel-lireplus-bouton {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	background: none;
	border: 0 solid currentColor;
	padding: 0.35em 0;
	font: inherit;
	color: inherit;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.kymoel-lireplus-bouton:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.kymoel-lireplus-chevron {
	width: 0.65em;
	height: auto;
	flex: none;
	transition: transform 0.3s ease;
}

.kymoel-lireplus.est-ouvert .kymoel-lireplus-chevron {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.kymoel-lireplus-texte,
	.kymoel-lireplus-fondu,
	.kymoel-lireplus-chevron {
		transition: none;
	}
}