/* ==========================================================================
   ONGLETS ET MENU DÉROULANT
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Onglets
   --------------------------------------------------------------------------
   Ce sont de vrais liens : chaque onglet a sa propre adresse, donc il est
   partageable, et le bouton « retour » du navigateur fonctionne.
   L'onglet actif porte aria-current="page".
   -------------------------------------------------------------------------- */
.onglets {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--border);
  /* Sur un petit écran, les onglets défilent horizontalement plutôt que
     de passer à la ligne. */
  overflow-x: auto;
  scrollbar-width: none;
}

.onglets::-webkit-scrollbar {
  display: none;
}

.onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--cible-tactile);
  padding: var(--space-2) var(--space-3);
  /* Le trait est transparent au repos : la ligne ne saute pas quand on
     change d'onglet. */
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}

.onglet:hover {
  color: var(--text);
}

.onglet[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   2. Menu déroulant
   --------------------------------------------------------------------------
   Construit avec les balises <details> et <summary> du HTML : l'ouverture
   et la fermeture sont gérées par le navigateur, sans JavaScript. Le menu
   fonctionne donc au clavier et même si un script échoue.
   -------------------------------------------------------------------------- */
.menu {
  position: relative;
}

/* Enlève le petit triangle que les navigateurs ajoutent par défaut. */
.menu__declencheur {
  list-style: none;
  cursor: pointer;
}

.menu__declencheur::-webkit-details-marker {
  display: none;
}

.menu__declencheur {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  transition: background-color var(--transition), color var(--transition);
}

.menu__declencheur:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

.menu__chevron {
  margin-left: auto;
  transition: transform var(--transition);
}

.menu[open] .menu__chevron {
  transform: rotate(180deg);
}

.menu__panneau {
  position: absolute;
  z-index: 20;
  min-width: 220px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  background-color: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
}

/* Par défaut le panneau s'ouvre vers le bas. Dans la barre latérale, le
   menu utilisateur est en bas de l'écran : il s'ouvre donc vers le haut. */
.menu__panneau--vers-haut {
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: var(--space-1);
  margin-top: 0;
}

.menu__titre {
  padding: var(--space-1) var(--space-2) var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-subtle);
}

.menu__element {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--cible-tactile);
  padding: var(--space-2);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.menu__element:hover {
  background-color: var(--surface-2);
  color: var(--text);
}

/* L'option en cours (le thème choisi, par exemple). */
.menu__element[aria-pressed="true"],
.menu__element[aria-current="true"] {
  background-color: var(--accent-soft);
  color: var(--accent);
}

/* La coche à droite de l'option en cours. */
.menu__coche {
  margin-left: auto;
  color: var(--accent);
}

.menu__separateur {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-2) 0;
}

/* --------------------------------------------------------------------------
   3. Bloc utilisateur en bas de la barre latérale
   -------------------------------------------------------------------------- */
.bloc-utilisateur {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.bloc-utilisateur__textes {
  min-width: 0;
  flex: 1;
  text-align: left;
}

.bloc-utilisateur__nom {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bloc-utilisateur__email {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   4. Sélecteur de thème
   --------------------------------------------------------------------------
   Les trois choix côte à côte : Système, Clair, Sombre.

   Il vit ici, et non dans styleguide.css, parce qu'il sert sur de vraies
   pages : dans le menu utilisateur de la barre latérale, et en bas de la
   page de connexion.
   -------------------------------------------------------------------------- */
.selecteur-theme {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.selecteur-theme__option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.selecteur-theme__option:hover {
  color: var(--text);
}

.selecteur-theme__option[aria-pressed="true"] {
  background-color: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow-1);
}

/* Sur un écran étroit, on garde les icônes et on masque les mots. */
@media (max-width: 420px) {
  .selecteur-theme__option span {
    display: none;
  }
}