/* Module « Lire plus » — repli des textes longs sur mobile uniquement.
 *
 * Sur desktop : aucune règle ne s'applique, le texte s'affiche entier.
 * Sur mobile : le texte est coupé à N lignes, avec dégradé et bouton.
 */

@media (max-width: 767px) {

	/* Conteneur du texte replié. La hauteur est pilotée par le JS pour
	   permettre une transition fluide à l'ouverture. */
	.vlp-lire-plus .vlp-clamp {
		position: relative;
		overflow: hidden;
		transition: max-height .55s cubic-bezier( .33, 1, .68, 1 );
	}

	/* Nombre de lignes affichées quand c'est replié.
	   --vlp-lines est posé par le JS d'après la classe vlp-lignes-N. */
	.vlp-lire-plus.is-collapsed .vlp-clamp {
		max-height: calc( var( --vlp-lines, 6 ) * var( --vlp-line-height, 1.75em ) );
	}

	/* Dégradé de fondu en bas du texte coupé. La couleur suit le fond
	   du bloc : réglable via --vlp-fade-color (blanc par défaut). */
	.vlp-lire-plus .vlp-fade {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 4.5em;
		pointer-events: none;
		opacity: 0;
		transition: opacity .35s ease;
		background: linear-gradient(
			to bottom,
			rgba( 255, 255, 255, 0 ),
			var( --vlp-fade-color, #ffffff )
		);
	}

	.vlp-lire-plus.is-collapsed .vlp-fade {
		opacity: 1;
	}

	/* Bouton « Lire plus / Lire moins » */
	.vlp-lire-plus .vlp-toggle {
		display: inline-block;
		margin-top: 14px;
		padding: 0 !important;
		background: none !important;
		background-color: transparent !important;
		border: none !important;
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: 1px solid var( --vlp-btn-border, #cfc4a8 ) !important;
		border-radius: 0 !important;
		outline: none !important;
		font-family: inherit;
		font-size: 13px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var( --vlp-btn-color, #8a7d5f );
		cursor: pointer;
		line-height: 1.6;
		box-shadow: none;
		-webkit-appearance: none;
		appearance: none;
		transition: color .2s ease, border-color .2s ease;
	}

	.vlp-lire-plus .vlp-toggle:hover,
	.vlp-lire-plus .vlp-toggle:focus,
	.vlp-lire-plus .vlp-toggle:active {
		background: none !important;
		background-color: transparent !important;
		box-shadow: none !important;
		color: var( --vlp-btn-color-hover, #1d1d1b ) !important;
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom-color: var( --vlp-btn-color-hover, #1d1d1b ) !important;
	}

	.vlp-lire-plus .vlp-toggle:focus-visible {
		outline: 2px solid currentColor !important;
		outline-offset: 3px;
	}

	/* Variantes de nombre de lignes (classe additionnelle sur l'élément) */
	.vlp-lire-plus.vlp-lignes-3  { --vlp-lines: 3; }
	.vlp-lire-plus.vlp-lignes-4  { --vlp-lines: 4; }
	.vlp-lire-plus.vlp-lignes-5  { --vlp-lines: 5; }
	.vlp-lire-plus.vlp-lignes-6  { --vlp-lines: 6; }
	.vlp-lire-plus.vlp-lignes-8  { --vlp-lines: 8; }
	.vlp-lire-plus.vlp-lignes-10 { --vlp-lines: 10; }
}