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

   Quatre étages qui se lisent de haut en bas :
     en-tête → colonnes → connecteur → bouton → bloc de marque.

   Le CONNECTEUR est ce qui fait tenir l'ensemble : il montre que les
   convictions ne sont pas une liste mais convergent vers une même
   approche — celle du bouton et du bloc qui suivent. Sans lui, la
   section redevient trois paragraphes côte à côte.

   Sa largeur vaut exactement l'écart entre le centre de la première
   colonne et celui de la dernière, écart de gouttière compris :
   c'est la seule valeur qui aligne les pastilles sur les colonnes.

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

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

.axek-cv{
	--cv-cols: 3;
	--cv-gap-x: 24px;
	--cv-gap-y: 40px;
	--cv-head-gap: 56px;
	--cv-texte-w: 34ch;

	--cv-trait: var(--ax-encre);
	--cv-trait-op: .22;
	--cv-pastille: #ffffff;
	--cv-pastille-bd: var(--ax-filet);

	--cv-liaison-gap: 0px;
	--cv-btn-gap: 6px;

	--cv-bloc-w: 384px;
	--cv-bloc-gap: 26px;
	--cv-bloc-radius: 16px;
	--cv-bloc-pad: 34px 30px 30px;
}

/* ---------- en-tête ---------- */
.axek-cv-head{ text-align: center; }
.axek-cv-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-cv-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));
}
.axek-cv--left .axek-cv-head{ text-align: left; }

/* Double classe : bat la règle .elementor-kit-N h1..h6 du kit global. */
.axek-cv-title.axek-cv-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(--cv-title-w, 24ch);
	margin-left: auto; margin-right: auto;
}
.axek-cv--left .axek-cv-title.axek-cv-title{ margin-left: 0; margin-right: 0; }

/* ---------- colonnes ---------- */
.axek-cv-grille{
	display: grid;
	grid-template-columns: repeat(var(--cv-cols), minmax(0, 1fr));
	gap: var(--cv-gap-y) var(--cv-gap-x);
	margin-top: var(--cv-head-gap);
	text-align: center;
}
.axek-cv--left .axek-cv-grille{ text-align: left; }

.axek-cv-h.axek-cv-h{
	margin: 0 0 14px;
	font-weight: 600; font-size: var(--ax-bloc); line-height: 1.2;
	letter-spacing: -.02em; text-wrap: balance;
	color: var(--ax-encre);
}
.axek-cv-p{
	margin: 0 auto;
	font-size: var(--ax-corps); font-weight: 500; line-height: 1.6;
	color: var(--ax-encre); text-wrap: pretty;
	/* Mesure typographique : au-delà, l'œil perd la ligne suivante. */
	max-width: var(--cv-texte-w);
}
.axek-cv--left .axek-cv-p{ margin-left: 0; }

/* ---------- connecteur ---------- */
/* Le connecteur part du bas des colonnes. Sans respiration, il touche
   la dernière ligne de texte et se lit comme un soulignement au lieu
   d'un trait qui descend. */
.axek-cv-liaison{ display: block; margin: var(--cv-liaison-gap) auto 0; }
.axek-cv-liaison svg{
	display: block; width: 100%; height: auto;
	/* le contour des pastilles déborde du viewBox, à dessein */
	overflow: visible;
}
.axek-cv-liaison .cv-trait{ stroke: var(--cv-trait); opacity: var(--cv-trait-op); }
.axek-cv-liaison .cv-pastille{ fill: var(--cv-pastille); stroke: var(--cv-pastille-bd); }

/* ---------- bouton ---------- */
.axek-cv-bouton{ display: flex; justify-content: center; margin-top: var(--cv-btn-gap); }
.axek-cv--left .axek-cv-bouton{ justify-content: flex-start; }

.axek-cv-btn{
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--ax-terra); color: #fff;
	font-weight: 600; font-size: var(--axk-btn-lg-fs); line-height: 1;
	padding: var(--axk-btn-lg-pad); border-radius: var(--axk-btn-radius);
	text-decoration: none; white-space: nowrap;
	transition: background-color var(--axk-dur) var(--axk-ease),
	            transform var(--axk-dur) var(--axk-ease);
}
.axek-cv-btn.axek-cv-btn:hover{
	background: var(--axk-btn-terra-h);
	transform: translateY(var(--axk-btn-lift));
}
.axek-cv-btn:active{ transform: scale(var(--axk-btn-press)); }
.axek-cv-btn:focus-visible{ outline: 2px solid var(--axk-btn-focus); outline-offset: 3px; }
.axek-cv-btn i, .axek-cv-btn svg{ width: 1em; height: 1em; font-size: 1em; }

/* Variante contour : même boîte, aucun aplat. */
.axek-cv-btn--ghost{
	background: transparent; color: var(--ax-encre);
	border: var(--axk-btn-bw) solid currentColor;
	padding: calc(16px - var(--axk-btn-bw)) calc(32px - var(--axk-btn-bw));
}
.axek-cv-btn--ghost.axek-cv-btn--ghost:hover{
	background: var(--axk-btn-ink-tint); color: var(--ax-encre);
}

/* ---------- bloc de marque ---------- */
.axek-cv-bloc{
	width: 100%; max-width: var(--cv-bloc-w);
	margin: var(--cv-bloc-gap) auto 0;
	padding: var(--cv-bloc-pad);
	border-radius: var(--cv-bloc-radius);
	text-align: center; color: #fff;
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-nuit-halo), var(--ax-nuit) 45%, var(--ax-nuit-fond) 100%);
}
.axek-cv--left .axek-cv-bloc{ margin-left: 0; }

/* Le bouton et le bloc de marque suivent le texte par défaut. Ces deux
   classes les en détachent : un en-tête à gauche peut garder un bouton
   centré, et l'inverse. Elles arrivent APRÈS les règles --left, donc
   elles l'emportent. */
.axek-cv--pied-centre .axek-cv-bouton{ justify-content: center; }
.axek-cv--pied-centre .axek-cv-bloc{ margin-left: auto; margin-right: auto; }
.axek-cv--pied-gauche .axek-cv-bouton{ justify-content: flex-start; }
.axek-cv--pied-gauche .axek-cv-bloc{ margin-left: 0; margin-right: auto; }

.axek-cv-marque{
	display: flex; align-items: baseline; justify-content: center; gap: 7px;
	font-size: var(--ax-bloc); line-height: 1.2; letter-spacing: -.02em;
}
.axek-cv-marque b{ font-weight: 600; color: #fff; }
.axek-cv-marque span{ font-weight: 500; color: var(--ax-terra-vif); }
/* Logo en image : il remplace le lockup texte. Hauteur plafonnée pour
   qu'un fichier trop grand ne fasse pas exploser le bloc, et centré comme
   le texte qu'il remplace. */
.axek-cv-logo{
	display: block; margin: 0 auto;
	max-width: 100%; max-height: var(--cv-logo-h, 40px);
	width: auto; height: auto;
}
.axek-cv--left .axek-cv-logo,
.axek-cv--pied-gauche .axek-cv-logo{ margin-left: 0; }
.axek-cv--pied-centre .axek-cv-logo{ margin-left: auto; margin-right: auto; }

.axek-cv-bloc p{
	margin: 14px 0 0;
	font-size: var(--ax-second); font-weight: 500; line-height: 1.55;
	color: rgba(255,255,255,.78);
}

/* ---------- mobile ---------- */
/* Le connecteur relie des colonnes CÔTE À CÔTE : empilées, il ne relie
   plus rien et se lit comme un trait décoratif. On le retire. */
@media (max-width: 900px){
	.axek-cv-liaison{ display: none; }
	.axek-cv-bouton{ margin-top: 34px; }
}