/* ══════════════════════════════════════════════════════════════════════
   Menu utilisateur du header (avatar + panneau déroulant) — feuille PARTAGÉE.

   Extrait des 12 pages d'accueil le 2026-09-05 (une seule source au lieu de
   12 copies inline), puis redessiné le même jour d'après les maquettes
   validées par Ruben (canevas « Menu compte et Atelier IA »), sur le
   DESIGN.md « light violet affiné » :
   - blanc plat, un seul filet par groupe, ombre navy --shadow-md, radius 12
   - le violet est la SEULE couleur interactive : survol, montée en gamme
   - icônes 16 px monochromes, sans boîte
   - usage = une ligne clé-valeur, chiffres tabulaires, barre 4 px
   - montée en gamme = ligne bordée --primary-50, jamais un dégradé
   - trois tailles de texte seulement : 15 / 13 / 12 (app-tokens.css)

   Aucun hex propre au menu : tout trace vers les tokens :root de la page
   hôte (--primary, --primary-light, --primary-50, --surface, --surface-2,
   --border, --border-2, --text, --text-muted, --text-light, --radius-sm,
   --radius, --shadow-sm, --shadow-md, --warn, --error, --error-bg,
   --transition), déclarés par chaque index.html. Les fallbacks après la
   virgule ne servent qu'à une page qui n'aurait pas ce token.
   Propriétés logiques : la page arabe (dir="rtl") n'a pas de surcharge.
   Le JS qui produit ce DOM : public/js/user-menu.js.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Bouton du header : avatar + nom + chevron, pill 36 px ─────────── */
.user-menu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 8px 0 4px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(50,50,93,.06));
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition, 200ms ease), box-shadow var(--transition, 200ms ease);
}
.user-menu:hover,
.user-menu.open {
  border-color: var(--border-2, #cbd5e1);
  box-shadow: var(--shadow, 0 4px 12px -2px rgba(50,50,93,.10));
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }

.user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #0f172a);
  white-space: nowrap;
}

.user-chevron {
  color: var(--text-muted, #475569);
  transition: transform var(--transition, 200ms ease);
}
.user-menu.open .user-chevron { transform: rotate(180deg); }

/* ── Panneau ───────────────────────────────────────────────────────── */
.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  width: 304px;
  background: var(--bg, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius, 12px);
  box-shadow: var(--shadow-md, 0 12px 24px -6px rgba(50,50,93,.14), 0 4px 8px -4px rgba(0,0,0,.06));
  z-index: 999;
  overflow: hidden;
  cursor: default;
  text-align: start;
  animation: dkDropIn 200ms cubic-bezier(.22,1,.36,1);
}
@keyframes dkDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .user-dropdown { animation: none; }
}
.user-menu.open .user-dropdown { display: block; }

/* ── Identité ──────────────────────────────────────────────────────── */
.dd-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 14px;
}
.dd-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-light, #ede9fe);
  color: var(--primary, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.dd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dd-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.dd-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text, #0f172a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-email { font-size: 13px; line-height: 1.4; color: var(--text-muted, #475569); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pastille de plan : bordée, jamais un aplat. Payant = teinte violette. */
.dd-plan {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--bg, #ffffff);
  color: var(--text-muted, #475569);
  flex-shrink: 0;
  white-space: nowrap;
}
.dd-plan.is-paid {
  color: var(--primary, #7c3aed);
  background: var(--primary-50, #f5f3ff);
  border-color: var(--primary-200, #c4b5fd);
}

/* ── Usage : une ligne clé-valeur + barre 4 px + pied ──────────────── */
.dd-usage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border, #e2e8f0);
}
.dd-usage-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.dd-usage-label { font-size: 13px; font-weight: 500; color: var(--text-muted, #475569); }
/* direction: ltr — en RTL, une fraction « 2 / 5 » sans caractère fort adjacent peut se
   réordonner en « 5 / 2 » (bidi Unicode). Règle reprise de l'ancienne page arabe. */
.dd-usage-val { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; white-space: nowrap; direction: ltr; }
.dd-usage-val .muted { font-weight: 500; color: var(--text-light, #5e6a7d); }
.dd-bar {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2, #f1f5f9);
  overflow: hidden;
}
.dd-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--primary, #7c3aed);
  transition: width 550ms cubic-bezier(.22,1,.36,1);
}
.dd-bar > span.warn { background: var(--warn, #f59e0b); }
.dd-bar > span.danger { background: var(--error, #ef4444); }
.dd-reset { font-size: 12px; line-height: 1.4; color: var(--text-light, #5e6a7d); }

/* ── Montée en gamme : ligne bordée, pas de dégradé, pas de chiffre ─── */
.dd-upgrade-wrap { padding: 8px 6px 2px; border-top: 1px solid var(--border, #e2e8f0); }
.dd-upgrade {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: var(--radius-sm, 8px);
  background: var(--primary-50, #f5f3ff);
  border: 1px solid var(--primary-200, #c4b5fd);
  color: var(--primary, #7c3aed);
  text-decoration: none;
  transition: background var(--transition, 200ms ease);
}
.dd-upgrade:hover { background: var(--primary-light, #ede9fe); }
.dd-upgrade svg { flex-shrink: 0; color: var(--primary, #7c3aed); }
.dd-upgrade-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.dd-upgrade-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--primary, #7c3aed); }
.dd-upgrade-sub { font-size: 12px; line-height: 1.4; color: var(--text-muted, #475569); }

/* ── Groupes de navigation ─────────────────────────────────────────── */
.dd-section { display: flex; flex-direction: column; padding: 6px; }
.dd-section + .dd-section,
.dd-upgrade-wrap + .dd-section { border-top: 1px solid var(--border, #e2e8f0); }
.dd-usage + .dd-section { border-top: 1px solid var(--border, #e2e8f0); }

.dd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border-radius: var(--radius-sm, 8px);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--text, #0f172a);
  text-align: start;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  transition: background var(--transition, 200ms ease), color var(--transition, 200ms ease);
}
.dd-item:hover { background: var(--surface-2, #f1f5f9); }
.dd-ico {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #475569);
  flex-shrink: 0;
}
.dd-item:hover .dd-ico { color: var(--text, #0f172a); }
.dd-item-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-item-value { font-size: 13px; font-weight: 600; color: var(--text, #0f172a); font-variant-numeric: tabular-nums; direction: ltr; }
.dd-item-chev { color: var(--text-light, #5e6a7d); flex-shrink: 0; }

/* Déconnexion : gris au repos, rouge seulement au survol. */
.dd-item.danger { color: var(--text-muted, #475569); }
.dd-item.danger:hover { color: var(--error, #ef4444); background: var(--error-bg, #fef2f2); }
.dd-item.danger:hover .dd-ico { color: var(--error, #ef4444); }

/* ── Mobile ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .user-menu { padding: 0 4px; gap: 0; border-color: transparent; box-shadow: none; }
  .user-name, .user-chevron { display: none; }
  .user-avatar { width: 32px; height: 32px; font-size: 13px; }
}
@media (max-width: 480px) {
  .user-dropdown { width: 288px; }
}

/* RTL : le chevron « suivant » pointe vers la gauche (page arabe, dir="rtl"). */
[dir="rtl"] .dd-item-chev { transform: scaleX(-1); }