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

[class*="limit-"] {
	position: relative;
}

/* Wrapper interne créé par le JS */
[class*="limit-"] > .abl-inner {
	overflow: hidden;
	transition: max-height 0.4s ease;
	/* Masque CSS : le contenu s'efface sur les 100 derniers px, sans z-index */
	-webkit-mask-image: linear-gradient(to bottom, black 0%, black calc(100% - 100px), transparent 100%);
	mask-image:         linear-gradient(to bottom, black 0%, black calc(100% - 100px), transparent 100%);
	transition: max-height 0.4s ease, -webkit-mask-image 0.3s ease, mask-image 0.3s ease;
}

/* Quand déplié, on retire le masque */
[class*="limit-"].abl-expanded > .abl-inner {
	-webkit-mask-image: none;
	mask-image: none;
}

/* 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;
}

/* 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;
}