/* -------------------------------------------------------
   Abalone – Limitation de contenu
   Usage : ajouter limit-{px} comme classe CSS sur la
   colonne/section Divi, ex: limit-200 ou limit-500
   ------------------------------------------------------- */

/*
 * z-index: 0 crée un contexte d'empilement sur le conteneur.
 * Tous les z-index Divi internes sont ainsi relatifs à ce bloc,
 * et ne peuvent pas "fuiter" au-dessus de .abl-fade.
 */
[class*="limit-"] {
	position: relative;
	z-index: 0;
}

/*
 * .abl-clip  → overflow:hidden  (clip du texte)
 * z-index: 1 crée un contexte d'empilement :
 * les éléments Divi imbriqués restent confinés à l'intérieur.
 */
.abl-clip {
	position: relative;
	z-index: 1;
	overflow: hidden;
	/* max-height + transition appliqués en JS */
}

/*
 * .abl-fade  → dégradé overlay
 * z-index: 2 > z-index: 1 (.abl-clip) → toujours au-dessus.
 * transform: translateZ(0) force le rendu GPU sur iOS Safari.
 */
.abl-fade {
	position: absolute;
	left: 0;
	right: 0;
	height: 100px;
	/* top calculé en JS : limit - 100px */
	z-index: 2;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
	pointer-events: none;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: opacity 0.3s ease;
}

.abl-fade.is-hidden {
	opacity: 0;
}

/* Bouton — centré avec trait gauche/droite */
.abl-toggle-btn {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: 'Roboto Condensed', sans-serif;
	font-size: 0.85em;
	font-weight: 400;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: inherit;
	padding: 0;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	z-index: 2;
}

/* Traits gauche et droite */
.abl-toggle-btn::before,
.abl-toggle-btn::after {
	content: "";
	flex: 1;
	height: 1px;
	background: currentColor;
	opacity: 0.35;
}

.abl-toggle-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}