/* ===========================================================
   SBB BUTTONS — Framework Buttons for Theme Enfant SBB
   -----------------------------------------------------------
   - Compatibilité totale Divi / WPML
   - Animations directionnelles (Top / Bottom / Left / Right)
   - Variantes visuelles réutilisables
   - Palette et typographies via sbb-vars.css
   - Radius utilitaires (6px et 35px)
   =========================================================== */


/* ============================
   WRAPPER & ALIGNEMENTS
   ============================ */

.sb-btn-wrapper {
  display: flex !important;
  gap: 0.2rem !important;
  flex-wrap: wrap !important;
}

.sb-btn-left {
  justify-content: flex-start !important;
}

.sb-btn-center {
  justify-content: center !important;
}

.sb-btn-right {
  justify-content: flex-end !important;
}


/* ============================
   BASE BUTTON
   ============================ */

.sb-btn {
  position: relative !important;
  display: inline-block !important;

  padding: 0.55rem 1.1rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;

  text-transform: uppercase !important;
  text-decoration: none !important;
  overflow: hidden !important;
  z-index: 0 !important;

  transition: color 0.4s ease !important;
  border-radius: 6px !important; /* radius par défaut */
}

.sb-btn:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px !important;
}


/* ============================
   OVERLAY (ANIMATION)
   ============================ */

.sb-btn::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;

  z-index: -1 !important;
  transition: transform 0.4s ease !important;
}


/* ============================
   ANIMATIONS DIRECTIONNELLES
   ============================ */

/* Bas → Haut */
.sb-anim-bottom::before {
  transform: scaleY(0) !important;
  transform-origin: center bottom !important;
}
.sb-anim-bottom:hover::before {
  transform: scaleY(1) !important;
}

/* Haut → Bas */
.sb-anim-top::before {
  transform: scaleY(0) !important;
  transform-origin: center top !important;
}
.sb-anim-top:hover::before {
  transform: scaleY(1) !important;
}

/* Gauche → Droite */
.sb-anim-left::before {
  transform: scaleX(0) !important;
  transform-origin: left center !important;
}
.sb-anim-left:hover::before {
  transform: scaleX(1) !important;
}

/* Droite → Gauche */
.sb-anim-right::before {
  transform: scaleX(0) !important;
  transform-origin: right center !important;
}
.sb-anim-right:hover::before {
  transform: scaleX(1) !important;
}


/* ============================
   VARIANTES VISUELLES
   ============================ */

/* Filled primary */
.sb-filled-primary {
  background: var(--sbb-color-primary) !important;
  color: var(--sbb-color-light) !important;
  border: none !important;
}
.sb-filled-primary::before {
  background: var(--sbb-color-dark) !important;
}
.sb-filled-primary:hover {
  color: var(--sbb-color-light) !important;
}


/* Filled primary ALT (hover blanc) */
.sb-filled-primary-alt {
  background: var(--sbb-color-primary) !important;
  color: var(--sbb-color-light) !important;
  border: none !important;
}
.sb-filled-primary-alt::before {
  background: var(--sbb-color-light) !important;
}
.sb-filled-primary-alt:hover {
  color: var(--sbb-color-dark) !important;
}


/* Outline primary */
.sb-outline-primary {
  background: transparent !important;
  color: var(--sbb-color-primary) !important;
  border: 1.6px solid var(--sbb-color-primary) !important;
}
.sb-outline-primary::before {
  background: var(--sbb-color-primary) !important;
}
.sb-outline-primary:hover {
  color: var(--sbb-color-light) !important;
}


/* Outline secondary (blanc) */
.sb-outline-secondary {
  background: transparent !important;
  color: var(--sbb-color-light) !important;
  border: 1.6px solid var(--sbb-color-light) !important;
}
.sb-outline-secondary::before {
  background: var(--sbb-color-primary) !important;
}
.sb-outline-secondary:hover {
  color: var(--sbb-color-light) !important;
  border-color: var(--sbb-color-primary) !important;
}


/* Ghost secondary (noir) */
.sb-ghost-secondary {
  background: transparent !important;
  color: var(--sbb-color-dark) !important;
  border: none !important;
}
.sb-ghost-secondary::before {
  background: var(--sbb-color-dark) !important;
}
.sb-ghost-secondary:hover {
  color: var(--sbb-color-light) !important;
}


/* ============================
 UTILITAIRES
   ============================ */
   /* ===== Utilitaires ===== */
.sb-pad-normal {
  padding: clamp(0.75em, 0.8em, 0.85em) clamp(1.9em, 2em, 2.1em) !important;
}

.sb-pad-compact {
  padding: clamp(0.75em, 0.8em, 0.85em) clamp(1.1em, 1.2em, 1.3em) !important;
}

.sb-pad-large {
  padding: clamp(0.75em, 0.8em, 0.85em) clamp(2.3em, 2.5em, 2.7em) !important;
}


.sb-radius-s {
  border-radius: 6px !important;
}

.sb-radius-l {
  border-radius: 35px !important;
}