/*
 * AXEK Elements – Bande CTA (par 6LEX – https://6lex.co)
 * Variantes « bleu » / « terracotta » (classe sur le wrapper) + anneaux + grain.
 */
.axek-cta{
	position: relative; isolation: isolate; overflow: hidden;
	text-align: center; color: #fff;
	padding: 112px 24px;
	background: var(--ax-nuit-fond);
}
.axek-cta, .axek-cta * { box-sizing: border-box; }

.axek-cta--bleu .axek-cta{
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-nuit-halo), var(--ax-nuit) 45%, var(--ax-nuit-fond) 100%);
}
.axek-cta--terra .axek-cta{
	background: radial-gradient(120% 130% at 50% 0%, var(--ax-terra-halo), var(--ax-terra) 45%, var(--ax-terra-fond) 100%);
}

/* halo */
.axek-cta::before{
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: radial-gradient(60% 60% at 50% 0%, rgba(126,96,255,.32), transparent 62%);
}
.axek-cta--terra .axek-cta::before{
	background: radial-gradient(60% 60% at 50% 0%, rgba(255,158,92,.30), transparent 62%);
}
/* grain */
.axek-cta::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-cta-rings{
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
}
.axek-cta-rings circle{ fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1.4; }

.axek-cta-in{ position: relative; z-index: 3; max-width: 760px; margin: 0 auto; }
.axek-cta-title.axek-cta-title{
	font-size: var(--ax-section); font-weight: 600; letter-spacing: -.025em;
	line-height: 1.12; margin: 0 auto 16px;
}
.axek-cta-text{
	font-size: var(--ax-chapo); line-height: 1.55; max-width: 560px; margin: 0 auto 34px;
	color: rgba(255,255,255,.82); font-weight: 500;}
/* Rangée d'actions : elle accueille un bouton comme deux, et les empile
   sur téléphone plutôt que de les laisser se serrer. */
.axek-cta-actions{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Les deux boutons partagent la même boîte. Le CONTOUR TRANSPARENT du
   principal n'est pas décoratif : sans lui, le bouton fantôme serait plus
   haut de l'épaisseur de son trait et la rangée cesserait d'être droite. */
.axek-cta-btn,
.axek-cta-btn2{
	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; white-space: nowrap;
	transition: background var(--axk-btn-dur) var(--axk-ease), transform var(--axk-btn-dur) var(--axk-ease), border-color var(--axk-btn-dur) var(--axk-ease), filter var(--axk-btn-dur) var(--axk-ease);
}

/* bouton PRINCIPAL = terracotta (cohérent avec le bouton principal du héros) */
.axek-cta-btn{
	background: var(--axk-btn-terra); color: #fff;
	box-shadow: 0 12px 26px -10px rgba(171,64,20,.55);
}

/* Bouton SECONDAIRE = « secondaire sombre » du système. La bande est
   toujours une surface colorée : contour et texte blancs, jamais d'encre. */
.axek-cta-btn2{
	background: transparent;
	border-color: var(--axk-btn-light-bd);
	color: #fff;
}
.axek-cta-btn2:hover{
	border-color: #fff;
	background: var(--axk-btn-light-tint);
	transform: translateY(var(--axk-btn-lift));
}
.axek-cta-btn:hover{ background: var(--axk-btn-terra-h); transform: translateY(var(--axk-btn-lift)); }
/* ambiance bleu nuit : fond sombre → le bouton s'éclaircit pour se détacher */
.axek-cta--bleu .axek-cta-btn:hover{ background: var(--axk-btn-terra-hd); }
/* Ambiance terracotta : terracotta-sur-terracotta serait invisible → 4e état du
   système (blanc plein, texte terracotta). Le survol assombrit le blanc, comme
   le « principal sur fond sombre » du widget Bouton. */
.axek-cta--terra .axek-cta-btn{ background: #fff; box-shadow: 0 12px 26px -12px rgba(0,0,0,.3); }
.axek-cta--terra .axek-cta-btn:hover{ background: #fff; box-shadow: var(--axk-btn-lift-shadow); transform: translateY(var(--axk-btn-lift)); }
/* out-spécifier base.css `[class*="axek-"] a[class*="-cta"]{color:#fff}` (0,2,1) pour le texte terracotta du bouton blanc */
.axek-cta--terra a.axek-cta-btn,
.axek-cta--terra a.axek-cta-btn:hover,
.axek-cta--terra a.axek-cta-btn:focus{ color: var(--ax-terra); }

@media (max-width: 640px){
	.axek-cta{ padding: 78px 20px; }
	/* Deux boutons côte à côte sur un téléphone se réduisent à deux moignons :
	   ils s'empilent et prennent la même largeur. */
	.axek-cta-actions{ flex-direction: column; align-items: stretch; margin: 0 auto; max-width: 340px; }
	.axek-cta-btn,
	.axek-cta-btn2{ justify-content: center; }
}