/* =========================================================================
   VYRA — RÈGLE GLOBALE DE SÉLECTION DE TEXTE (#ff6f6f)
   =========================================================================
   Couleur officielle de la marque Vyra : #ff6f6f
   Texte blanc contrasté conforme accessibilité : #ffffff
   S'applique universellement à tous les éléments sur l'ensemble du SaaS.
   ========================================================================= */

::selection {
  background-color: #ff6f6f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

::-moz-selection {
  background-color: #ff6f6f !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================================
   VYRA — SOUS-NAVIGATION DES STORES & APPS (FIX ONGLETS CONCATÉNÉS)
   ========================================================================= */
.section-subnav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  margin-bottom: 24px !important;
  width: fit-content !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.section-subnav .subnav-links {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.subnav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #6e6e73 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  background: transparent !important;
}

.subnav-link:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #121214 !important;
}

.subnav-link.is-active,
.subnav-link.active {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #121214 !important;
  font-weight: 600 !important;
}

.subnav-link svg {
  flex-shrink: 0 !important;
  color: inherit !important;
}

.subnav-link.is-active svg,
.subnav-link.active svg {
  color: #ff6f6f !important;
}

body.dark-mode .section-subnav,
.dark .section-subnav {
  background: #18181b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .subnav-link,
.dark .subnav-link {
  color: #a1a1aa !important;
}

body.dark-mode .subnav-link:hover,
.dark .subnav-link:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

body.dark-mode .subnav-link.is-active,
.dark .subnav-link.is-active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}