/* ==========================================================================
   Sooatek Scroll World — Système de boutons « fibre optique »
   Surcharge les styles du moteur (scrub-engine.js, @layer sw) et l'override
   inline de index.html (.sw-topcta,.sw-btn--primary { background !important }).
   → Sélecteurs qualifiés par élément (a.sw-topcta = 0-1-1) + !important sur le
     fond pour gagner sur l'override 0-1-0 !important, quel que soit l'ordre.
   Les classes .is-hover / .is-focus / .is-active sont des hooks de démo
   (variantes statiques) — inoffensives en production.
   Charger APRÈS le <style> inline de index.html (fin de <head> ou de <body>).
   ========================================================================== */

:root {
  --swb-accent:        #3B82F6;
  --swb-accent-deep:   #123071;  /* bleu profond, départ du dégradé */
  --swb-accent-mid:    #2563EB;
  --swb-accent-soft:   #93C5FD;
  --swb-glow:          rgba(59, 130, 246, .45);
  --swb-glow-strong:   rgba(59, 130, 246, .70);
  --swb-ease:          cubic-bezier(.33, 1, .68, 1); /* ease-out doux */
}

/* --------------------------------------------------------------------------
   Socle commun — même langage pour les 4 boutons
   -------------------------------------------------------------------------- */
a.sw-topcta,
a.sw-btn--primary,
a.sw-btn--ghost,
button.lang-toggle {
  position: relative;
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform        .22s var(--swb-ease),
    box-shadow       .26s var(--swb-ease),
    border-color     .26s var(--swb-ease),
    color            .22s var(--swb-ease),
    background-color .26s var(--swb-ease);
}

/* Anneau de focus clavier — distinct du hover (net, sans glow diffus) */
a.sw-topcta:focus-visible,
a.sw-btn--primary:focus-visible,
a.sw-btn--ghost:focus-visible,
button.lang-toggle:focus-visible,
a.sw-topcta.is-focus,
a.sw-btn--primary.is-focus,
a.sw-btn--ghost.is-focus,
button.lang-toggle.is-focus {
  outline: 2px solid var(--swb-accent-soft);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   CTA primaire — .sw-topcta (header) & .sw-btn--primary (finale)
   Impulsion lumineuse dans une fibre : dégradé profond → #3B82F6,
   fine bordure lumineuse, balayage de lumière au hover.
   -------------------------------------------------------------------------- */
a.sw-topcta,
a.sw-btn--primary {
  overflow: hidden;
  isolation: isolate;             /* le balayage (z-index:-1) reste sous le texte */
  color: #fff;
  background:
    linear-gradient(135deg,
      #0E2452               0%,
      var(--swb-accent-deep) 34%,
      #1D4ED8               72%,
      var(--swb-accent)      100%) !important;
  border: 1px solid rgba(147, 197, 253, .40);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),   /* liseré lumineux haut */
    inset 0 -8px 14px rgba(7, 10, 24, .40),   /* profondeur basse */
    0 2px 14px rgba(59, 130, 246, .20);
  text-shadow: 0 1px 8px rgba(10, 10, 20, .35);
}

/* L'impulsion : bande de lumière inclinée qui traverse la fibre */
a.sw-topcta::before,
a.sw-btn--primary::before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 46%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(191, 219, 254, .16) 30%,
    rgba(219, 234, 254, .55) 50%,
    rgba(191, 219, 254, .16) 70%,
    transparent 100%);
  filter: blur(2.5px);
  transform: translateX(-140%) skewX(-16deg);
}

@keyframes swb-sweep {
  from { transform: translateX(-140%) skewX(-16deg); }
  to   { transform: translateX(340%)  skewX(-16deg); }
}

a.sw-topcta:hover,
a.sw-btn--primary:hover,
a.sw-topcta.is-hover,
a.sw-btn--primary.is-hover {
  transform: translateY(-2px);
  border-color: rgba(191, 219, 254, .75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .30),
    inset 0 -6px 12px rgba(10, 10, 25, .28),
    0 4px 22px var(--swb-glow),
    0 0 44px rgba(59, 130, 246, .28);
}

a.sw-topcta:hover::before,
a.sw-btn--primary:hover::before {
  animation: swb-sweep .65s var(--swb-ease);
}

/* Variante statique de démo : impulsion figée au milieu du bouton */
a.sw-topcta.is-hover::before,
a.sw-btn--primary.is-hover::before {
  transform: translateX(60%) skewX(-16deg);
}

/* Clic : compression rapide + flash bref du glow */
a.sw-topcta:active,
a.sw-btn--primary:active,
a.sw-topcta.is-active,
a.sw-btn--primary.is-active {
  transform: translateY(0) scale(.97);
  transition-duration: .09s;
  border-color: rgba(219, 234, 254, .95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 0 0 1px rgba(147, 197, 253, .35),
    0 2px 30px var(--swb-glow-strong),
    0 0 60px rgba(59, 130, 246, .40);
}

/* --------------------------------------------------------------------------
   Bouton ghost — contact@sooatek.com
   Verre discret ; au hover la bordure « s'allume » en bleu, texte blanc pur.
   -------------------------------------------------------------------------- */
a.sw-btn--ghost {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(6px);
}

a.sw-btn--ghost:hover,
a.sw-btn--ghost.is-hover {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, .85);
  background: rgba(59, 130, 246, .08);
  box-shadow:
    0 0 16px rgba(59, 130, 246, .30),
    inset 0 0 14px rgba(59, 130, 246, .12);
}

a.sw-btn--ghost:active,
a.sw-btn--ghost.is-active {
  transform: translateY(0) scale(.97);
  transition-duration: .09s;
  border-color: var(--swb-accent-soft);
  box-shadow:
    0 0 24px rgba(59, 130, 246, .45),
    inset 0 0 18px rgba(59, 130, 246, .18);
}

/* --------------------------------------------------------------------------
   .lang-toggle — harmonisé au même langage
   -------------------------------------------------------------------------- */
button.lang-toggle {
  background: rgba(17, 24, 39, .70);
  color: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .20);
  backdrop-filter: blur(8px);
}

button.lang-toggle:hover,
button.lang-toggle.is-hover {
  color: #fff;
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, .85);
  background: rgba(30, 41, 66, .78);
  box-shadow: 0 0 12px rgba(59, 130, 246, .30);
}

button.lang-toggle:active,
button.lang-toggle.is-active {
  transform: translateY(0) scale(.96);
  transition-duration: .09s;
  border-color: var(--swb-accent-soft);
  box-shadow: 0 0 18px rgba(59, 130, 246, .45);
}

/* --------------------------------------------------------------------------
   prefers-reduced-motion : plus de balayage ni d'élévation/compression,
   on conserve les changements de couleur, bordure et glow.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  a.sw-topcta::before,
  a.sw-btn--primary::before {
    display: none;
  }
  a.sw-topcta,
  a.sw-btn--primary,
  a.sw-btn--ghost,
  button.lang-toggle,
  a.sw-topcta:hover,
  a.sw-btn--primary:hover,
  a.sw-btn--ghost:hover,
  button.lang-toggle:hover,
  a.sw-topcta:active,
  a.sw-btn--primary:active,
  a.sw-btn--ghost:active,
  button.lang-toggle:active {
    transform: none;
    transition-property: color, background-color, border-color, box-shadow;
  }
}