/* ------------------------------------------------------------------
   Widget « Étapes en bande AXEK » — 6LEX (https://6lex.co)

   Des colonnes séparées par des filets, la description en haut et le
   grand signe en bas. Il se pose à nu sur la page : ni fond, ni arrondi,
   ni marge intérieure — ce sont des réglages, pas des défauts, parce que
   ce bloc EST la page, il n'y est pas posé dedans.

   Le VIDE entre le texte et le signe est le sujet :
   c'est lui qui donne à chaque lettre sa présence. Réduire la hauteur
   des colonnes, c'est tuer l'effet.

   Le filet court à GAUCHE DE CHAQUE colonne, la première comprise :
   c'est ce qui rend la grille juste quel que soit le nombre de
   colonnes et de rangées. Un filet posé « entre » les colonnes
   obligerait à connaître l'index de grille, que le CSS ignore.

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

.axek-bd, .axek-bd *, .axek-bd *::before, .axek-bd *::after{ box-sizing: border-box; }

.axek-bd{
	--bd-cols: 5;
	--bd-h: 260px;
	--bd-gap-y: 34px;
	--bd-pad-col: 20px;

	--bd-radius: 0;
	--bd-pad: 0;

	--bd-filet: var(--ax-filet);
	--bd-filet-w: 1px;

	--bd-intro-gap: 46px;

	/* Taille de la lettre : deux bornes SANS UNITÉ, pour que le calcul
	   fluide ci-dessous puisse les soustraire l'une de l'autre. */
	--bd-l-min: 64;
	--bd-l-max: 124;
	--bd-lettre: var(--ax-terra);
	--bd-l-graisse: 500;
	--bd-fondu-haut: 8%;
	--bd-fondu-bas: 100%;

	/* Aucun fond par défaut : le bloc prend celui de la section qui
	   l'accueille. Le contrôle Elementor écrit par-dessus si on veut
	   vraiment en faire une carte. */
	background: transparent;
	padding: var(--bd-pad);
	border-radius: var(--bd-radius);
}

.axek-bd-intro{
	margin: 0 0 var(--bd-intro-gap);
	font-size: var(--ax-chapo); font-weight: 500; line-height: 1.55;
	color: var(--ax-encre); text-wrap: pretty;
}

.axek-bd-cols{
	display: grid;
	grid-template-columns: repeat(var(--bd-cols), minmax(0, 1fr));
	gap: var(--bd-gap-y) 0;
}

.axek-bd-col{
	display: flex; flex-direction: column;
	min-height: var(--bd-h);
	padding: 0 var(--bd-pad-col);
	border-left: var(--bd-filet-w) solid var(--bd-filet);
	text-decoration: none; color: inherit;
}

.axek-bd-desc{
	margin: 0;
	font-size: var(--ax-corps); font-weight: 500; line-height: 1.6;
	color: var(--ax-texte-doux); text-wrap: pretty;
}

/* Une marge automatique pousse le bas de colonne : les lettres
   s'alignent donc entre elles quelle que soit la longueur du texte. */
.axek-bd-bas{ margin-top: auto; padding-top: 34px; }

.axek-bd-lettre{
	display: block;
	font-weight: var(--bd-l-graisse);
	line-height: .86; letter-spacing: -.035em;
	color: var(--bd-lettre);
	/* FLUIDE, sans palier : la taille glisse d'une borne à l'autre entre
	   375 px et 1440 px de large. Les bornes sont sans unité, on les
	   remet en pixels ici. */
	font-size: clamp(
		calc(var(--bd-l-min) * 1px),
		calc(var(--bd-l-min) * 1px + (var(--bd-l-max) - var(--bd-l-min)) * ((100vw - 375px) / 1065)),
		calc(var(--bd-l-max) * 1px)
	);
}

/* Le fondu : plein en haut, effacé vers le bas. Sans le support du
   découpage dans le texte, la lettre garde sa couleur pleine — jamais
   une lettre invisible. */
@supports ((background-clip: text) or (-webkit-background-clip: text)){
	.axek-bd--fondu .axek-bd-lettre{
		background-image: linear-gradient(to bottom,
			var(--bd-lettre) var(--bd-fondu-haut),
			transparent var(--bd-fondu-bas));
		-webkit-background-clip: text;
		        background-clip: text;
		color: transparent;
	}
}

.axek-bd-titre.axek-bd-titre{
	display: block; margin: 12px 0 0;
	font-size: var(--ax-bloc); font-weight: 600; line-height: 1.2;
	letter-spacing: -.02em; color: var(--ax-encre);
}

/* Une colonne cliquable : rien ne bouge, seule la lettre s'affirme. */
a.axek-bd-col:hover .axek-bd-lettre{ --bd-fondu-bas: 130%; }
a.axek-bd-col:focus-visible{ outline: 2px solid var(--axk-btn-focus); outline-offset: 3px; }

/* ---------- responsive ----------
   Les tailles passent par les contrôles « par appareil ». Le bloc
   ci-dessous ne touche qu'à la marge intérieure des colonnes, qu'aucun
   contrôle n'écrit : collé à son filet, le texte étoufferait. */
@media (max-width: 560px){
	.axek-bd-col{ padding-left: 16px; }
}