/*
 * AXEK Elements – Bouton AXEK (par 6LEX – https://6lex.co)
 * Bouton réutilisable : Principal (terracotta) · Secondaire (contour) · Lien texte.
 * Ambiance fond clair / sombre. Couleurs pilotées par variables --btn-*.
 * NB : classe « .axek-button » (et non -btn/-cta) pour échapper au forçage blanc de base.css ;
 *      règle de couleur en double-classe pour battre `[class*="axek-"] a{color:inherit}` (0,1,1).
 */
.axek-btnwrap{ line-height:0; }
.axek-button{
	--btn-bg:var(--ax-terra); --btn-ink:#fff; --btn-bd:transparent;
	--btn-bg-h:var(--btn-bg); --btn-ink-h:var(--btn-ink); --btn-bd-h:var(--btn-bd);
	display:inline-flex; align-items:center; justify-content:center; gap:9px;
	font-family:inherit; font-weight: 500; font-size: var(--ax-second); line-height: 1.55;
	text-decoration:none; white-space:nowrap; cursor:pointer; box-sizing:border-box;
	padding:var(--axk-btn-md-pad); border:var(--axk-btn-bw) solid transparent; border-radius:var(--axk-btn-radius);
	-webkit-tap-highlight-color:transparent;
	transition:filter var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease), background var(--axk-dur) var(--axk-ease), border-color var(--axk-dur) var(--axk-ease), color var(--axk-dur) var(--axk-ease);
}
.axek-button.axek-button{ background:var(--btn-bg); color:var(--btn-ink); border-color:var(--btn-bd); }
/* même verrou : le style Principal n'avait aucune règle de couleur au survol */
.axek-button.axek-button:hover,
.axek-button.axek-button:focus,
.axek-button.axek-button:active{ color:var(--btn-ink-h); }
.axek-button:focus-visible{ outline:2px solid var(--axk-btn-focus); outline-offset:2px; }
.axek-button:focus:not(:focus-visible){ outline:none; }
.axek-button:active{ transform:translateY(0) scale(var(--axk-btn-press)); }

/* ---- styles ---- */
.axek-button--primary{ --btn-bg:var(--axk-btn-terra); --btn-ink:#fff; --btn-bd:transparent; --btn-bg-h:var(--axk-btn-terra-h); box-shadow:0 10px 24px -12px rgba(171,64,20,.5); }
.axek-button--secondary{ --btn-bg:transparent; --btn-ink:var(--axk-btn-ink); --btn-bd:var(--axk-btn-ink); --btn-bg-h:transparent; --btn-bd-h:var(--axk-btn-terra); --btn-ink-h:var(--axk-btn-terra); }
.axek-button--link{ --btn-bg:transparent; --btn-ink:var(--ax-terra); --btn-bd:transparent; }
.axek-button.axek-button--link{ padding:6px 0; border:0; border-radius:0; }

/* Ambiance sombre : le principal RESTE terracotta (c'est le bouton du héros).
   Seul le sens du survol change : on éclaircit au lieu de foncer, pour que le
   bouton se détache du fond au lieu de s'y enfoncer. */
.axek-button--primary.axek-button--dark{ --btn-bg-h:var(--axk-btn-terra-hd); }

/* Ambiance TERRACOTTA : terracotta sur terracotta = contraste 1,00:1, donc
   invisible. Seul cas où le principal s'inverse (blanc plein, texte terracotta). */
.axek-button--primary.axek-button--terra{ --btn-bg:#fff; --btn-ink:var(--axk-btn-terra); --btn-bd:transparent; --btn-bg-h:#fff; --btn-ink-h:var(--axk-btn-terra); box-shadow:0 10px 24px -12px rgba(0,0,0,.32); }
.axek-button--primary.axek-button--terra:hover{ box-shadow:var(--axk-btn-lift-shadow); }
.axek-button--secondary.axek-button--terra,
.axek-button--link.axek-button--terra{ --btn-ink:#fff; --btn-bd:var(--axk-btn-light-bd); --btn-bg-h:var(--axk-btn-light-tint); --btn-bd-h:#fff; --btn-ink-h:#fff; }
.axek-button--secondary.axek-button--dark{ --btn-ink:#fff; --btn-bd:var(--axk-btn-light-bd); --btn-bg-h:var(--axk-btn-light-tint); --btn-bd-h:#fff; --btn-ink-h:#fff; }
.axek-button--link.axek-button--dark{ --btn-ink:#fff; --btn-ink-h:#fff; }

/* ---- tailles ---- */
.axek-button--sm{ font-size:var(--axk-btn-sm-fs); padding:var(--axk-btn-sm-pad); }
.axek-button--md{ font-size:var(--axk-btn-md-fs); padding:var(--axk-btn-md-pad); }
.axek-button--lg{ font-size:var(--axk-btn-lg-fs); padding:var(--axk-btn-lg-pad); }
.axek-button.axek-button--link{ padding:6px 0; }

/* pleine largeur */
.axek-button--full{ display:flex; width:100%; }

/* icône */
.axek-button-ico{ display:inline-flex; align-items:center; flex:none; }
.axek-button-ico svg{ width:1.05em; height:1.05em; display:block; }
.axek-button-ico i{ font-size:1em; line-height:1; }
.axek-button--icobefore .axek-button-ico{ order:-1; }

/* lien : soulignement animé */
.axek-button--link .axek-button-txt{ position:relative; }
.axek-button--link .axek-button-txt::after{ content:""; position:absolute; left:0; bottom:-3px; height:1.5px; width:0; background:currentColor; transition:width var(--axk-dur-mid) var(--axk-ease); }

/* ---- survol ---- */
@media (hover:hover){
	.axek-button.axek-button--primary:hover{ background:var(--btn-bg-h); }
	.axek-button--primary:hover{ transform:translateY(var(--axk-btn-lift)); }
	.axek-button--secondary:hover{ transform:translateY(var(--axk-btn-lift)); }
	.axek-button.axek-button--secondary:hover{ background:var(--btn-bg-h); border-color:var(--btn-bd-h); color:var(--btn-ink-h); }
	.axek-button.axek-button--link:hover{ color:var(--btn-ink-h); }
	.axek-button--link:hover .axek-button-txt::after{ width:100%; }
}

/* accessibilité */
@media (prefers-reduced-motion: reduce){
	.axek-button, .axek-button-txt::after{ transition:none; }
}