/* ═══════════════════════════════════════════
   Sélecteur des pôles (Sites web · Neva · Studio), en haut à gauche.
   Chargé par toutes les pages, y compris /creation-de-sites/ et /neva/
   qui ont leurs propres styles : tout est donc préfixé .pswitch.
════════════════════════════════════════════ */

.pswitch {
  --poles-bg: #f1f5f9;
  --poles-line: #e2e8f0;
  --poles-ink: #475569;
  --poles-ink-hover: #0f172a;
  position: relative; display: inline-flex; align-items: center; flex-shrink: 0;
  padding: 3px; border-radius: 999px;
  background: var(--poles-bg); border: 1px solid var(--poles-line);
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
.pswitch-dark {
  --poles-bg: rgba(255,255,255,.06);
  --poles-line: rgba(255,255,255,.1);
  --poles-ink: rgba(255,255,255,.62);
  --poles-ink-hover: #fff;
}

.pswitch a {
  position: relative; z-index: 1; display: block;
  padding: 6px 13px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; letter-spacing: -.005em; line-height: 1.2;
  color: var(--poles-ink); text-decoration: none; white-space: nowrap;
  transition: color .3s;
}
.pswitch a:hover { color: var(--poles-ink-hover); background: none; }
.pswitch a.on { color: #fff; }
.pswitch a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.pswitch .pl-short { display: none; }

/* La pastille qui glisse sous le pôle actif */
.pswitch-pill {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0;
  border-radius: 999px; background: #2563eb; opacity: 0;
  box-shadow: 0 4px 14px -4px var(--pill-glow, rgba(37,99,235,.55));
  --ease-pill: cubic-bezier(.55,0,.2,1.15);
  transition: transform .6s var(--ease-pill), width .6s var(--ease-pill),
              background-color .6s var(--ease-pill), box-shadow .6s var(--ease-pill), opacity .3s ease;
}
.pswitch-pill.instant { transition: none; }
.pswitch-pill.sites  { background: #2563eb; --pill-glow: rgba(37,99,235,.55); }
.pswitch-pill.neva   { background: #7c3aed; --pill-glow: rgba(124,58,237,.6); }
.pswitch-pill.studio { background: #3b82f6; --pill-glow: rgba(59,130,246,.6); }

@media (max-width: 560px) {
  .pswitch a { padding: 6px 10px; font-size: .75rem; }
  .pswitch .pl-long { display: none; }
  .pswitch .pl-short { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .pswitch-pill { transition: opacity .2s ease; }
}