/* ------------------------------------------------------------------
   Widget « Grille de cellules AXEK » — 6LEX (https://6lex.co)

   Un titre centré, puis une grille de libellés encadrés. Chaque cellule
   ne porte qu'un mot ou un groupe de mots : c'est l'ACCUMULATION qui
   fait le propos, pas le contenu de chaque case.

   AUCUNE ANIMATION — c'est une demande explicite, pas un oubli.
   Ne pas ajouter de `transition`, d'`animation` ni de `@keyframes` ici :
   le survol change d'état instantanément, à dessein. Une grille qui
   scintille au passage de la souris détourne l'œil de la liste, qui est
   le seul message de la section.

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

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

.axek-pi{
	--pi-cols: 3;
	--pi-gap: 16px;
	--pi-head-gap: 56px;

	--pi-cell-h: 80px;
	--pi-cell-pad: 24px;
	--pi-cell-bg: #ffffff;
	--pi-cell-bd: var(--ax-filet);
	--pi-cell-bw: 1px;
	--pi-cell-radius: 12px;

	--pi-cell-bd-h: var(--ax-terra);
	--pi-cell-color-h: var(--ax-terra);
}

/* ---------- en-tête ---------- */
.axek-pi-head{ text-align: center; }
.axek-pi--left .axek-pi-head{ text-align: left; }

.axek-pi-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; line-height: 1.2;
	color: var(--ax-terra);
}
.axek-pi-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-pi-title.axek-pi-title{
	margin: 0;
	font-weight: 600; font-size: var(--ax-section); line-height: 1.12;
	letter-spacing: -.025em; text-wrap: balance;
	color: var(--ax-encre);
	max-width: var(--pi-title-w, 24ch);
	margin-left: auto; margin-right: auto;
}
.axek-pi-intro{
	margin: 16px auto 0;
	font-size: var(--ax-chapo); font-weight: 500; line-height: 1.55;
	color: var(--ax-encre); text-wrap: pretty;
	max-width: var(--pi-intro-w, 62ch);
}
.axek-pi--left .axek-pi-title.axek-pi-title,
.axek-pi--left .axek-pi-intro{ margin-left: 0; margin-right: 0; }

/* ---------- grille ---------- */
.axek-pi-grille{
	display: grid;
	grid-template-columns: repeat(var(--pi-cols), minmax(0, 1fr));
	gap: var(--pi-gap);
	margin-top: var(--pi-head-gap);
}

.axek-pi-cell{
	display: flex; align-items: center;
	min-height: var(--pi-cell-h);
	padding: var(--pi-cell-pad);
	background: var(--pi-cell-bg);
	border: var(--pi-cell-bw) solid var(--pi-cell-bd);
	border-radius: var(--pi-cell-radius);
	color: var(--ax-encre);
	text-decoration: none;
	/* La cellule porte un LIBELLÉ, pas un titre : graisse de texte, pas de
	   graisse de titre — c'est ce qui la distingue d'une carte.

	   Taille FLUIDE : en mobile la grille reste à deux colonnes, donc une
	   cellule ne fait plus qu'une demi-largeur de téléphone. À 24 px fixes,
	   « Les relations stratégiques » n'y tient pas. Le plafond reste le rôle
	   « Titre de bloc » — on ne descend que quand la place manque. */
	font-size: clamp(16px, 4.3vw, var(--ax-bloc));
	font-weight: 500; line-height: 1.2;
	letter-spacing: -.02em; text-wrap: pretty;
	/* Filet de sécurité sur les très petits écrans : un mot plus large que
	   sa cellule est coupé plutôt que de faire déborder la page. */
	overflow-wrap: anywhere;
}

/* Seule une cellule CLIQUABLE réagit : une cellule sans lien ne doit
   rien promettre au survol. Changement instantané, sans transition. */
a.axek-pi-cell:hover,
a.axek-pi-cell:focus-visible{
	color: var(--pi-cell-color-h);
	border-color: var(--pi-cell-bd-h);
}
a.axek-pi-cell:focus-visible{ outline: 2px solid var(--axk-btn-focus); outline-offset: 2px; }

/* ---------- responsive ----------
   Rien ici, et c'est voulu. Le responsive passe par les contrôles
   « par appareil » (3 / 2 / 2 colonnes, écart, hauteur) : ils écrivent
   sur `{{WRAPPER}} .axek-pi`, de spécificité supérieure à cette feuille.
   Une @media posée ici serait donc MORTE dès qu'un réglage existe —
   et un réglage existe toujours, puisque les contrôles ont un défaut
   pour chaque appareil. Mieux vaut une seule source que deux dont une
   ne s'applique jamais. */