/* ============================================================
 * SPIDE — Système de boutons (source unique de vérité)
 * ------------------------------------------------------------
 * Chargé EN DERNIER (après header/hero/footer/besoin) pour
 * gagner la cascade et neutraliser le reset rose #c36 de
 * Hello Elementor.
 *
 * Les flèches sont des SVG stroke="currentColor" : elles
 * suivent automatiquement la couleur du texte au hover.
 *
 * Les classes existantes sont mappées sur 3 variantes :
 *   .btn-primary-blue  → .spide-cta, .spide-btn-contact, .spide-cta-band__btn
 *   .btn-primary-blanc → .spide-btn-outline
 *   .btn-secondary     → .spide-btn-dark, .spide-besoin-hero__cta, .spide-contact__submit
 *
 * Pour changer un effet hover : un seul endroit, ici.
 * ============================================================ */

:root{
	--spide-blue:#0000FF;
	--spide-black:#2D2D2D;
	--spide-white:#F1F1F1;
	--spide-btn-transition:background-color .2s ease, color .2s ease, outline-color .2s ease, border-color .2s ease;
}

/* ============================================================
 * 1. btn-primary-blue
 *    base  : transparent + liseré bleu + texte bleu
 *    hover : fond bleu plein + texte blanc
 * ============================================================ */
.spide-cta,
.spide-btn-contact,
.spide-cta-band__btn{
	background:transparent;
	border:1.4px solid var(--spide-blue);
	color:var(--spide-blue) !important;
	transition:var(--spide-btn-transition);
}
.spide-cta:hover,
.spide-cta:focus,
.spide-cta:active,
.spide-btn-contact:hover,
.spide-btn-contact:focus,
.spide-btn-contact:active,
.spide-besoin a.spide-cta-band__btn:hover,
.spide-besoin a.spide-cta-band__btn:focus,
.spide-besoin a.spide-cta-band__btn:active,
.spide-cta-band__btn:hover,
.spide-cta-band__btn:focus,
.spide-cta-band__btn:active{
	background:var(--spide-blue) !important;
	border-color:var(--spide-blue);
	color:var(--spide-white) !important;
}

/* ============================================================
 * 2. btn-primary-blanc  (sur fond bleu)
 *    base  : transparent + liseré blanc + texte blanc
 *    hover : fond blanc + texte bleu
 * ============================================================ */
.spide-btn-outline{
	background:transparent;
	border:1.4px solid var(--spide-white);
	color:var(--spide-white) !important;
	transition:var(--spide-btn-transition);
}
.spide-btn-outline:hover,
.spide-btn-outline:focus,
.spide-btn-outline:active{
	background:var(--spide-white) !important;
	border-color:var(--spide-white);
	color:var(--spide-blue) !important;
}

/* ============================================================
 * 3. btn-secondary
 *    base  : fond noir plein + texte blanc
 *    hover : fond blanc + fin liseré gris + texte noir
 * ============================================================ */
.spide-btn-dark,
.spide-besoin a.spide-besoin-hero__cta,
.spide-besoin-hero__cta,
.spide-contact__submit{
	background:var(--spide-black);
	border:0;
	color:var(--spide-white) !important;
	outline:1px solid transparent;
	outline-offset:-1px;
	transition:var(--spide-btn-transition);
}
.spide-btn-dark:hover,
.spide-btn-dark:focus,
.spide-btn-dark:active,
.spide-besoin a.spide-besoin-hero__cta:hover,
.spide-besoin a.spide-besoin-hero__cta:focus,
.spide-besoin a.spide-besoin-hero__cta:active,
.spide-besoin-hero__cta:hover,
.spide-besoin-hero__cta:focus,
.spide-besoin-hero__cta:active,
.spide-contact__submit:hover,
.spide-contact__submit:focus,
.spide-contact__submit:active{
	background:var(--spide-white) !important;
	color:var(--spide-black) !important;
	outline:1px solid rgba(68,68,68,.46);
	outline-offset:-1px;
	transform:none;
}