/* ── Menu déroulant custom partagé (.fa-cdrop) ───────────────────────────
   Le <select> natif reste la source de vérité (soumission de formulaire),
   masqué visuellement — voir assets/js/fa-cdrop.js pour l'interaction.
   Utilisé sur le champ "Pays" du checkout et les créneaux d'échantillon
   du panier (page + tiroir) — jamais de couleur/police locale ici, tout
   passe par les tokens globaux pour fonctionner dans n'importe quel
   contexte sans dépendre d'un wrapper de page particulier. */
.fa-cdrop { position: relative; }
.fa-cdrop-native {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.fa-cdrop-btn {
  width: 100%; height: 46px; border: 1px solid var(--color-bg-1); border-radius: 11px;
  padding: 0 13px; font-size: 14px; text-align: left;
  color: var(--color-text); background: var(--color-bg); cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  transition: all .18s ease;
}
.fa-cdrop-btn svg { color: var(--color-text-2); flex: none; transition: transform .18s ease; }
.fa-cdrop-btn[aria-expanded="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent); }
.fa-cdrop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fa-cdrop-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: 5px;
  background: var(--color-bg); border: 1px solid var(--color-bg-1); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(40,33,20,.05), 0 20px 40px -20px rgba(40,33,20,.34);
  max-height: 240px; overflow-y: auto;
}
.fa-cdrop-opt {
  padding: 11px 12px; border-radius: 8px; font-size: 14px;
  cursor: pointer; transition: background .15s ease;
}
.fa-cdrop-opt:hover,
.fa-cdrop-opt.active { background: var(--color-bg-2); }
.fa-cdrop-opt.sel { color: var(--color-accent); font-weight: 600; }