/* ==========================================================================
   Dropdown (.dropdown) — Menu déroulant accessible

   Structure BEM :
   - .dropdown               → Bloc racine (conteneur principal)
   - .dropdown__trigger      → Élément déclencheur (bouton/liens)
   - .dropdown__menu         → Élément menu déroulant (310 px)
   - .dropdown__item         → Élément item du menu
   - .dropdown__link         → Lien dans l'item (48 px, 15 px regular)
   - .dropdown__link-hint    → Complément à droite (« 4 nouvelles »)
   - .dropdown__divider      → Séparateur entre items
   - .dropdown__header       → En-tête du menu (pastille + nom + e-mail)
   - .dropdown--open         → Modificateur état ouvert
   - .dropdown__menu--left   → Alignement à gauche (droite par défaut)
   - .dropdown--top          → Menu vers le haut

   Usage (menu du compte) :
   <div class="dropdown">
     <button class="dropdown__trigger" aria-haspopup="true" aria-expanded="false" aria-controls="menu-compte">…</button>
     <ul class="dropdown__menu" id="menu-compte" role="menu">
       <li role="none" class="dropdown__header">…</li>
       <li role="none"><a href="#historique" class="dropdown__link is-active" role="menuitem">Historique <span class="dropdown__link-hint">4 nouvelles</span></a></li>
       <li role="none"><a href="#notifications" class="dropdown__link" role="menuitem">Notifications</a></li>
       <li role="separator" class="dropdown__divider"></li>
       <li role="none"><button class="dropdown__link" role="menuitem">Se déconnecter</button></li>
     </ul>
   </div>

   Accessibilité :
   - aria-haspopup="true" sur le trigger
   - aria-expanded pour état ouvert/fermé
   - role="menu" et role="menuitem" pour la structure
   - Navigation clavier : flèches haut/bas, Entrée, Échap
   - Focus trap quand ouvert (optionnel)

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon » (menu du compte de la maquette) : surface, filet line
   1 px, rayon 16, marge 8 px, lignes de 48 px à rayon 10, élément courant sur
   fond bg ; seule ombre du style (--shadow-float), comme la maquette. Sur
   téléphone le menu reste ancré sous le déclencheur (la feuille montante est
   le rôle de .modal--sheet). Le déclencheur n'a plus de flèche : celui de
   l'application porte son propre pictogramme ☰. Réécrite sans imbrication
   CSS (cible iOS 16.4) et sans bloc sombre propre.
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */
.dropdown {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start; /* jamais étiré par un parent flex : le menu s'ancre sous le déclencheur */
  z-index: var(--z-dropdown);
}

/* --------------------------------------------------------------------------
   TRIGGER
   -------------------------------------------------------------------------- */
/* :where() = spécificité nulle : un déclencheur qui porte aussi .btn (pastille du
   compte) garde le filet et le fond du bouton, chargé avant ce fichier */
:where(.dropdown__trigger) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font: inherit;
  color: var(--color-text-primary);
  background: none;
  border: none;
  cursor: pointer;
}

.dropdown__trigger:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   MENU
   -------------------------------------------------------------------------- */
.dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 310px;
  max-width: calc(100vw - 2 * var(--space-md));
  padding: var(--space-xs);
  margin: 0;
  list-style: none;

  background-color: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-fast) var(--ease-default),
    visibility var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.dropdown--open .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown__menu--left {
  right: auto;
  left: 0;
}

.dropdown--top .dropdown__menu {
  top: auto;
  bottom: calc(100% + 6px);
}

.dropdown__item {
  display: list-item;
}

/* --------------------------------------------------------------------------
   LINK
   -------------------------------------------------------------------------- */
.dropdown__link {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--control-height);
  padding: 0 10px;
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  text-decoration: none;
  text-align: left;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-default);
}

.dropdown__link:hover {
  background-color: var(--color-surface-hover);
}

.dropdown__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: -2px;
}

.dropdown__link.is-active,
.dropdown__link[aria-current="page"],
.dropdown__link[aria-selected="true"] {
  background-color: var(--color-bg);
}

.dropdown__link[disabled],
.dropdown__link.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.dropdown__link-hint {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.dropdown__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   DIVIDER / HEADER
   -------------------------------------------------------------------------- */
.dropdown__divider {
  height: 1px;
  margin: 6px 0;
  background-color: var(--color-border);
  border: none;
}

.dropdown__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px 10px 14px;
  margin-bottom: 6px;
  border-bottom: var(--border-hair) solid var(--color-border);
  font-size: var(--font-size-base);
}

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
  .dropdown__menu {
    display: none;
  }
}