/* ------------------------------------------------------------------
   Widget « Avant / Après AXEK » — 6LEX (https://6lex.co)

   Comparatif apparié : la colonne « après » est une carte blanche
   surélevée, la colonne « avant » reste à plat, en retrait. Les filets
   des deux colonnes sont alignés — c'est ce qui rend l'appariement
   lisible sans l'expliquer.

   En mobile, empiler les colonnes casserait cet appariement : chaque
   PAIRE devient donc sa propre carte (avant → flèche → après).

   Les défauts vivent ici ; les contrôles Elementor écrivent par-dessus
   via les variables --ba-*.
   ------------------------------------------------------------------ */

.axek-ba{
	--ba-colw: 44%;
	--ba-gut: 64px;
	--ba-pad-x: 28px;
	--ba-row-y: 20px;
	--ba-card-bg: #ffffff;
	--ba-card-radius: 22px;
	--ba-line: var(--ax-filet);
	--ba-line-card: var(--ax-filet-fin);
	--ba-arrow: var(--ax-texte-tenu);
	--ba-marker-b: var(--ax-filet);
	--ba-marker-a: var(--ax-terra);
	--ba-mob-bg: var(--ax-surface);
	--ba-mob-radius: 16px;
	--ba-pair-gap: 24px;
	--ba-head-gap: 44px;
	--ba-label-gap: 16px;
}

.axek-ba-in{ max-width: 100%; }

/* ---------- en-tête ---------- */
.axek-ba-eyebrow{
	display: inline-flex; align-items: center; gap: 12px;
	margin: 0 0 18px;
	font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform: uppercase;
	color: var(--ax-terra); line-height: 1.2;}
.axek-ba-eyebrow::before{
	content: ""; flex: none;
	width: var(--ax-sur-barre-w); height: var(--ax-sur-barre-h);
	border-radius: calc(var(--ax-sur-barre-w) / 2);
	background: currentColor;
	transform: rotate(var(--ax-sur-barre-a));
}

/* Double classe : bat la règle .elementor-kit-N h1..h6 du kit global. */
.axek-ba-title.axek-ba-title{
	margin: 0 0 14px;
	font-weight: 600; font-size: var(--ax-section); line-height: 1.12;
	letter-spacing: -.025em; text-wrap: balance;
	color: var(--ax-encre);
	/* Mesure typographique : une ligne trop longue devient pénible à lire.
	   Le contrôle « Longueur de ligne » écrase la valeur si besoin. */
	max-width: var(--ba-title-w, 19ch);
}
.axek-ba-intro{
	margin: 0;
	font-size: var(--ax-chapo); line-height: 1.55; color: var(--ax-encre);
	max-width: var(--ba-intro-w, 54ch); text-wrap: pretty; font-weight: 500;}

/* ---------- comparatif ---------- */
.axek-ba-cmp{
	position: relative;
	display: grid;
	grid-template-columns: var(--ba-colw) var(--ba-gut) auto;
	align-items: stretch;
	margin-top: var(--ba-head-gap);
}

/* Carte « après » : hors flux, donc indépendante du nombre de lignes. */
.axek-ba-card{
	position: absolute; z-index: 0;
	top: 0; bottom: 0; right: 0;
	left: calc(var(--ba-colw) + var(--ba-gut));
	background: var(--ba-card-bg);
	border-radius: var(--ba-card-radius);
}
.axek-ba--shadow .axek-ba-card{
	box-shadow: 0 1px 2px rgba(16, 20, 40, .04), 0 30px 60px -34px rgba(16, 20, 40, .26);
}

.axek-ba-cell{ position: relative; z-index: 1; }

.axek-ba-h{ font-weight: 500; font-size: var(--ax-meta); letter-spacing: 0; text-transform: uppercase; line-height: 1.2;}
.axek-ba-h--b{ align-self: end; padding: 0 0 var(--ba-label-gap); color: var(--ax-texte-tenu); }
.axek-ba-h--a{ padding: 24px var(--ba-pad-x) var(--ba-label-gap); color: var(--ax-terra); }

.axek-ba-b,
.axek-ba-a{ display: flex; gap: 13px; align-items: flex-start; font-size: var(--ax-corps); line-height: 1.6; font-weight: 500;}
.axek-ba-b{
	padding: var(--ba-row-y) 24px var(--ba-row-y) 0;
	color: var(--ax-texte-doux);
	border-top: 1px solid var(--ba-line);
}
.axek-ba-a{
	padding: var(--ba-row-y) var(--ba-pad-x);
	font-weight: 500; color: var(--ax-encre);
	border-top: 1px solid var(--ba-line-card);
}
/* Pas de filet juste sous les intitulés. */
.axek-ba-b--first,
.axek-ba-a--first{ border-top: 0; }
.axek-ba-a--last{ padding-bottom: calc(var(--ba-row-y) + 6px); }

.axek-ba-t{ flex: 1 1 0; min-width: 0; text-wrap: pretty; }

/* ---------- marqueurs & flèche ---------- */
.axek-ba-m{
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	width: 18px; height: 18px; margin-top: 2px;
}
.axek-ba-m svg{ width: 100%; height: 100%; display: block; }
.axek-ba-m i{ font-size: var(--ax-corps); line-height: 1.6; font-weight: 500;}
.axek-ba-m--b{ color: var(--ba-marker-b); }
.axek-ba-m--a{ color: var(--ba-marker-a); }

.axek-ba-g{
	display: flex; align-items: center; justify-content: center;
	color: var(--ba-arrow);
}
.axek-ba-g svg{ width: 18px; height: 18px; display: block; }
.axek-ba-g i{ font-size: var(--ax-corps); line-height: 1.6; font-weight: 500;}

/* ---------- mobile : une carte par PAIRE ---------- */
@media (max-width: 767px){

	.axek-ba-cmp{ grid-template-columns: 1fr; }
	.axek-ba-card,
	.axek-ba-h{ display: none; }

	.axek-ba-b,
	.axek-ba-a{ flex-wrap: wrap; border-top: 0; font-size: var(--ax-second); line-height: 1.55; font-weight: 500;}

	/* Étiquettes sur la 1re paire seulement : elle enseigne le motif,
	   les suivantes se lisent par analogie. */
	.axek-ba-b--first[data-label]::before,
	.axek-ba-a--first[data-label]::before{
		content: attr(data-label);
		flex: 0 0 100%;
		margin-bottom: 9px;
		font-size: var(--ax-meta); font-weight: 500; letter-spacing: 0; text-transform: uppercase; line-height: 1.2;}
	.axek-ba-b--first[data-label]::before{ color: var(--ax-texte-tenu); }
	.axek-ba-a--first[data-label]::before{ color: var(--ax-terra); }

	.axek-ba-b{
		padding: 17px 18px 15px;
		background: var(--ba-mob-bg);
		border-radius: var(--ba-mob-radius) var(--ba-mob-radius) 0 0;
	}
	.axek-ba-g{ background: var(--ba-mob-bg); padding: 0 0 11px; }
	.axek-ba-g svg,
	.axek-ba-g i{ transform: rotate(90deg); }

	.axek-ba-a{
		padding: 17px 18px 19px;
		margin-bottom: var(--ba-pair-gap);
		background: var(--ba-card-bg);
		border-radius: 0 0 var(--ba-mob-radius) var(--ba-mob-radius);
	}
	.axek-ba--shadow .axek-ba-a{
		box-shadow: 0 1px 2px rgba(16, 20, 40, .04), 0 16px 30px -22px rgba(16, 20, 40, .32);
	}
	.axek-ba-a--last{ margin-bottom: 0; padding-bottom: 19px; }
}