/*
 * AXEK Elements – Héro immersif (par 6LEX – https://6lex.co)
 * Fond, couleurs et typo se règlent dans Elementor ; défauts « bleu nuit ».
 */
.axek-hero{
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 118px 24px 104px;
	background-color: var(--ax-nuit-fond);
}
.axek-hero, .axek-hero * { box-sizing: border-box; }

/* halo + grain (activés par le switch → .axhero-grain-yes) */
.axhero-grain-yes .axek-hero::before{
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(58% 52% at 50% 4%, rgba(126,96,255,.32), transparent 60%);
}
.axhero-grain-yes .axek-hero::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.55'/%3E%3C/svg%3E");
}

/* anneaux concentriques */
.axek-hero-rings{
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
	pointer-events: none;
	-webkit-mask: radial-gradient(circle at 50% 42%, #000 24%, transparent 72%);
	mask: radial-gradient(circle at 50% 42%, #000 24%, transparent 72%);
	transition: transform var(--axk-dur-slow) var(--axk-ease);
}
.axek-hero-rings circle{ fill: none; stroke: rgba(255,255,255,.09); stroke-width: 1; }

/* contenu */
.axek-hero-in{
	position: relative; z-index: 3;
	width: 100%; max-width: 100%; margin: 0 auto;
	display: flex; flex-direction: column;
	text-align: center; align-items: center;
}
.axek-hero-badge{
	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: 24px;
}
.axek-hero-title.axek-hero-title{
	font-size: var(--ax-display); font-weight: 700; letter-spacing: -.03em;
	line-height: 1.02; max-width: 16ch; margin: 0 0 20px;
}
.axek-hero-sub{
	font-size: var(--ax-chapo); line-height: 1.55; max-width: 600px; margin: 0 0 34px;
	color: rgba(255,255,255,.82); font-weight: 500;}
.axek-hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.axek-hero-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; cursor: pointer; white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	transition: filter var(--axk-dur) var(--axk-ease), background var(--axk-dur) var(--axk-ease), border-color var(--axk-dur) var(--axk-ease);
}
.axek-hero-btn.is-primary{ background: var(--ax-terra); color: #fff; box-shadow: 0 12px 26px -10px rgba(171,64,20,.6); }
.axek-hero-btn.is-primary:hover{ background: var(--axk-btn-terra-hd); transform: translateY(var(--axk-btn-lift)); }
.axek-hero-btn.is-ghost{ background: transparent; border-color: var(--axk-btn-light-bd); color: #fff; }
.axek-hero-btn.is-ghost:hover{ border-color: #fff; background: rgba(255,255,255,.08); }

/* alignement gauche : contenu calé à gauche */
.axek-hero-in[style*="left"] .axek-hero-actions{ justify-content: flex-start; }

/* révélation à l'ouverture (sans JS, coupée si reduced-motion) */
@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-hero-badge,
	.axek-hero-title.axek-hero-title,
	.axek-hero-sub,
	.axek-hero-actions{ animation: axhIn var(--axk-dur-mid) var(--axk-ease) both var(--axk-dur-fast); }
	@keyframes axhIn{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: none; } }
}

@media (max-width: 640px){
	.axek-hero{ padding: 90px 20px 74px; }
	.axek-hero-actions{ flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
	.axek-hero-btn{ justify-content: center; }
}