/*
 * AXEK Elements – Héro de page (par 6LEX – https://6lex.co)
 * Héro compact « bleu nuit » pour pages internes. Couleurs réglables dans Elementor.
 */
.axek-phero{
	position: relative; isolation: isolate; overflow: hidden;
	text-align: center; color: #fff;
	padding: 92px 24px 84px; background: var(--ax-nuit-fond);
}
.axek-phero, .axek-phero * { box-sizing: border-box; }

.axek-phero::before{
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 60% at 50% 0%, rgba(126,96,255,.28), transparent 62%);
}
.axek-phero::after{
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	opacity: .5; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
.axek-phero-rings{
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
	-webkit-mask: radial-gradient(circle at 50% 30%, #000 22%, transparent 70%);
	        mask: radial-gradient(circle at 50% 30%, #000 22%, transparent 70%);
}
.axek-phero-rings circle{ fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1; }

.axek-phero-in{ position: relative; z-index: 3; max-width: 900px; margin: 0 auto; }
.axek-phero-tag{
	display: inline-flex; align-items: center; gap: 8px;
	background: rgba(255,255,255,.12); border: 1px solid var(--ax-filet-sombre); border-radius: 100px;
	padding: 6px 15px 6px 15px;
	font-size: var(--ax-meta); font-weight: 500; text-transform: uppercase;
	letter-spacing: 0;
	margin-bottom: 20px;
}
.axek-phero-title.axek-phero-title{ font-size: var(--ax-page); font-weight: 600; letter-spacing: -.03em; line-height: 1.06; max-width: 820px; margin: 0 auto 18px; text-wrap: balance; }
/* `pretty` évite le mot seul en dernière ligne, `balance` au-dessus répartit
   les lignes du titre. Le reste du plugin s'en sert déjà sur 14 modules. */
/* Corps, pas Chapô : le sous-titre d'un héros de page reste une phrase de
   lecture, pas une accroche. */
.axek-phero-sub{ font-size: var(--ax-corps); line-height: 1.55; max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.82); font-weight: 500; text-wrap: pretty;}
.axek-phero-actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.axek-phero-btn{
	display: inline-flex; align-items: center; gap: 9px; 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); border: var(--axk-btn-bw) solid transparent; text-decoration: none;
	transition: transform var(--axk-dur) var(--axk-ease), filter var(--axk-dur) var(--axk-ease), background var(--axk-dur) var(--axk-ease), border-color var(--axk-dur) var(--axk-ease);
}
.axek-phero-btn.is-primary{ background: var(--ax-terra); color: #fff; }
.axek-phero-btn.is-primary:hover{ background: var(--axk-btn-terra-hd); transform: translateY(var(--axk-btn-lift)); }
.axek-phero-btn.is-ghost{ background: transparent; border-color: var(--axk-btn-light-bd); color: #fff; }
.axek-phero-btn.is-ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); }

@media (prefers-reduced-motion: no-preference){
	/* Apparition UNIFORME : tous les éléments ensemble, un seul retard.
	   L'ancienne cascade à quatre paliers attirait l'œil sur l'animation
	   plutôt que sur le message. */
	.axek-phero-tag,
	.axek-phero-title.axek-phero-title,
	.axek-phero-sub,
	.axek-phero-actions{ animation: axpIn var(--axk-dur-mid) var(--axk-ease) both var(--axk-dur-fast); }
	@keyframes axpIn{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
}

@media (max-width: 640px){ .axek-phero{ padding: 70px 20px 62px; } }