/**
 * A.C.T.I.F. Brief — le bouton et sa fenêtre.
 *
 * Le préfixe est `axek-br-` : `axek-bf-` appartient déjà au module
 * « article à la une ».
 */

.axek-br, .axek-br *{ box-sizing: border-box; }
.axek-br{ --br-accent: var(--ax-terra); }

/* ---------- le bouton qui ouvre ---------- */
.axek-br-ouvrir{ display: flex; }
.axek-br-decl{
	display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
	font-family: inherit; font-weight: 600; font-size: var(--axk-btn-lg-fs);
	padding: var(--axk-btn-lg-pad); border-radius: var(--axk-btn-radius);
	background: var(--br-accent); color: #fff;
	transition: background var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease);
}
.axek-br-decl:hover{ background: var(--axk-btn-terra-h); transform: translateY(var(--axk-btn-lift)); }
.axek-br-decl:active{ transform: scale(.96); }

/* ---------- la fenêtre ----------
   `position: fixed` et non `absolute` : le widget peut vivre dans le pied de
   page, la fenêtre doit couvrir l'écran, pas son conteneur. */
.axek-br-mod{
	position: fixed; inset: 0; z-index: 9999;
	display: grid; place-items: center; padding: 24px;
}
.axek-br-mod[hidden]{ display: none; }

.axek-br-voile{
	position: absolute; inset: 0; background: rgba(24,30,21,.55);
	backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
	animation: axek-br-voile var(--axk-dur) var(--axk-ease) both;
}
@keyframes axek-br-voile{ from{ opacity: 0 } to{ opacity: 1 } }

.axek-br-carte{
	position: relative; width: min(var(--br-larg, 452px), 100%);
	max-height: calc(100vh - 48px); overflow-y: auto;
	background: #fff; border-radius: 24px; padding: 34px 32px 28px; text-align: left;
	box-shadow: 0 1px 2px rgba(24,30,21,.06), 0 12px 28px -6px rgba(24,30,21,.16),
	            0 40px 80px -20px rgba(24,30,21,.22);
	animation: axek-br-carte var(--axk-dur-mid) var(--axk-ease) both;
}
@keyframes axek-br-carte{
	from{ opacity: 0; transform: translateY(10px) scale(.985) }
	to{ opacity: 1; transform: none }
}

/* Fermer : 40×40 de zone utile pour une croix de 14. */
.axek-br-x{
	position: absolute; top: 14px; right: 14px; width: 40px; height: 40px;
	border: 0; padding: 0; background: none; cursor: pointer; border-radius: 12px;
	color: var(--ax-texte-doux); display: grid; place-items: center;
	transition: background var(--axk-dur) var(--axk-ease), color var(--axk-dur) var(--axk-ease);
}
.axek-br-x:hover{ background: var(--ax-surface); color: var(--ax-encre); }
.axek-br-x svg{ width: 14px; height: 14px; }

/* Sur-titre : rôle Légende, plus la barre penchée de la charte. */
.axek-br-sur{
	display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
	font-size: var(--ax-meta); font-weight: 500; letter-spacing: 0;
	text-transform: uppercase; color: var(--br-accent); line-height: 1.2;
}
.axek-br-sur::before{
	content: ""; flex: 0 0 auto;
	width: var(--ax-sur-barre-w); height: var(--ax-sur-barre-h);
	background: currentColor; border-radius: calc(var(--ax-sur-barre-w) / 2);
	transform: rotate(var(--ax-sur-barre-a));
}

.axek-br-h{
	margin: 0 0 8px; font-size: var(--ax-bloc); font-weight: 600; line-height: 1.2;
	letter-spacing: -.01em; text-wrap: balance; color: var(--ax-encre);
}
/* Corps secondaire. La variable est `--ax-second` : j'avais écrit
   `--ax-secondaire`, qui n'existe pas — la taille n'était donc jamais posée
   et le paragraphe héritait de son parent (16 px mesurés au lieu de 15). */
.axek-br-p{
	margin: 0 0 22px; font-size: var(--ax-second); font-weight: 500;
	line-height: 1.6; color: var(--ax-encre); text-wrap: pretty;
}

/* ---------- les champs ---------- */
.axek-br-form{ display: grid; gap: 10px; }
/* Relevés sur le formulaire de la page Contact : rayon 14, filet 1 px,
   Corps secondaire. Deux formulaires sur le site, une seule facture.

   CLASSE DOUBLÉE : le thème pose
   `input[type="email"]{ border: 1px solid #666; border-radius: 3px; padding: .5rem 1rem }`
   en (0,1,1), qui bat une classe seule — mesuré, le filet sortait en gris
   foncé au lieu du filet clair. Seul l'arrondi tenait, parce qu'un contrôle
   Elementor l'écrit en (0,4,0). */
.axek-br-champ.axek-br-champ{
	width: 100%; height: 48px; padding: 0 16px; border-radius: 14px; font-family: inherit;
	border: 1px solid var(--ax-filet); background: #fff; color: var(--ax-encre);
	font-size: var(--ax-second); font-weight: 500; outline: 0;
	transition: border-color var(--axk-dur) var(--axk-ease);
}
.axek-br-champ.axek-br-champ::placeholder{ color: var(--ax-texte-tenu); }
/* Pas de halo : la couleur du filet dit déjà où on est. */
.axek-br-champ.axek-br-champ:focus{ border-color: var(--br-accent); }
.axek-br-champ.axek-br-champ[aria-invalid="true"]{ border-color: var(--ax-erreur); }

/* Le leurre ne doit ni se voir, ni se tabuler, ni être lu à voix haute —
   mais rester remplissable : `display:none` le ferait ignorer des robots.
   Il est ancré en haut à gauche de la carte : sans point d'ancrage il se
   posait à sa position statique, un champ de la largeur par défaut d'un
   input, et débordait de 31 px — la carte gagnait une barre de défilement. */
/* Classe doublée : le thème pose `input{ width: 100% }` en (0,1,1), qui bat
   une classe seule — mesuré, le leurre faisait 445 px au lieu de 1. */
.axek-br-leurre.axek-br-leurre{
	position: absolute; left: 0; top: 0;
	width: 1px; height: 1px; min-width: 0; margin: 0; padding: 0; border: 0;
	opacity: 0; pointer-events: none; overflow: hidden; clip-path: inset(50%);
}

.axek-br-envoi{
	height: 52px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; cursor: pointer; font-family: inherit; font-weight: 600;
	font-size: var(--axk-btn-lg-fs); border-radius: var(--axk-btn-radius);
	background: var(--br-accent); color: #fff;
	transition: background var(--axk-dur) var(--axk-ease), transform var(--axk-dur) var(--axk-ease);
}
/* Même recette que .axek-sb-btn et .axek-cta-btn : fond assombri ET remontée. */
.axek-br-envoi:hover{ background: var(--axk-btn-terra-h); transform: translateY(var(--axk-btn-lift)); }
.axek-br-envoi:active{ transform: scale(.96); }
.axek-br-envoi[disabled]{ cursor: default; opacity: 1; background: var(--ax-texte-tenu); transform: none; }

.axek-br-err{
	margin: 8px 0 0; font-size: var(--ax-meta); font-weight: 500; color: var(--ax-erreur); line-height: 1.5;
}
.axek-br-err[hidden]{ display: none; }

/* Légende. */
.axek-br-legal{
	margin: 14px 0 0; font-size: var(--ax-meta); font-weight: 500; line-height: 1.5;
	color: var(--ax-texte-tenu);
}
/* Deux classes plus la balise : `base.css` pose `[class*="axek-"] a{ color:
   inherit }` en (0,1,1), qui battrait la classe seule. */
.axek-br .axek-br-legal a{
	color: var(--ax-texte-doux); text-underline-offset: 2px;
	transition: color var(--axk-dur) var(--axk-ease);
}
.axek-br .axek-br-legal a:hover{ color: var(--ax-encre); }

/* ---------- une fois inscrit ---------- */
.axek-br-ok{ text-align: center; padding: 6px 0 4px; }
.axek-br-ok[hidden]{ display: none; }
.axek-br-rond{
	width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%;
	background: rgba(171,64,20,.1);
	background: color-mix(in srgb, var(--br-accent) 10%, transparent);
	color: var(--br-accent); display: grid; place-items: center;
	animation: axek-br-pop var(--axk-dur-mid) var(--axk-ease) both;
}
@keyframes axek-br-pop{
	from{ opacity: 0; transform: scale(.25); filter: blur(4px) }
	to{ opacity: 1; transform: none; filter: blur(0) }
}
.axek-br-rond svg{ width: 26px; height: 26px; }
.axek-br-ok .axek-br-h{ margin-bottom: 8px; }
.axek-br-ok .axek-br-p{ margin-bottom: 0; }

/* Le verrou de défilement est celui du menu : une seule mécanique pour
   une même question, sinon les deux se marchent dessus. */

@media (prefers-reduced-motion: reduce){
	.axek-br-voile, .axek-br-carte, .axek-br-rond{ animation: none; }
	.axek-br-decl, .axek-br-envoi, .axek-br-x{ transition: none; }
}

/* Cette @media est vivante : aucun contrôle n'écrit la marge de la fenêtre.
   Celle de la CARTE, elle, appartient au contrôle « Marge intérieure » et à
   son défaut mobile — une règle ici serait battue sans condition. */
@media (max-width: 480px){
	.axek-br-mod{ padding: 14px; }
}