/**
 * @file
 * Styles pour les tabs d'authentification Drupal (user/login, user/register, user/password)
 * À intégrer dans votre thème via libraries.yml
 */

/* === TABS DRUPAL === */

/* Container des tabs - Sélecteurs génériques */
.tabs,
.tabs--primary {
  margin-bottom: 2rem !important;
  border-bottom: none !important;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}

/* Liste des tabs */
.tabs__tab,
.tabs--primary .tabs__tab {
  display: inline-block;
  margin: 0 0.25rem -2px 0;
}

/* Liens des tabs */
.tabs a,
.tabs--primary a {
  display: inline-block !important;
  padding: 0.75rem 1.5rem !important;
  color: #6c757d !important;
  background-color: transparent !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  font-size: 0.95rem !important;
}

/* Tab hover */
.tabs a:hover,
.tabs--primary a:hover {
  color: #0d75a3 !important;
  background-color: rgba(13, 117, 163, 0.05) !important;
}

/* Tab actif */
.tabs a.is-active,
.tabs--primary a.is-active {
  color: #0d75a3 !important;
  border-bottom-color: #0d75a3 !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}
/* Tab actif */
.tabs a.is-active,
.tabs--primary a.is-active {
  color: #0d75a3 !important;
  border-bottom-color: #0d75a3 !important;
  font-weight: 600 !important;
  background-color: transparent !important;
}

/* Tab focus (accessibilité) */
.tabs a:focus,
.tabs--primary a:focus {
  outline: 2px solid #0d75a3 !important;
  outline-offset: 2px;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
  .tabs a,
  .tabs--primary a {
    padding: 0.6rem 1rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .tabs a,
  .tabs--primary a {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.85rem !important;
  }
}