/* ============================================================
   Postfast — zone « Connexion / profil » en haut à droite.
   AUTONOME : ne dépend d'aucune classe de page. Les pages secondaires n'ont
   pas `.btn` ; l'accueil oui. Tout est donc redéfini ici, une seule fois.
   ⚠️ Les pages ne déclarent pas TOUTES les mêmes tokens : --violet-600 et les
   --dark-* sont partout, mais --violet-700 et --violet-500 manquent sur
   certaines pages secondaires. Chaque usage porte donc un repli hexadécimal.
   ============================================================ */
.nav-auth { display: flex; align-items: center; margin-left: auto; flex-shrink: 0; }

/* Déconnecté : LE bouton d'action de la nav — un avatar vide, « Connexion »,
   et « App web » dessous : il mène à l'app web, pas à un téléchargement. Même
   forme de pilule que la puce connectée, pour qu'on reconnaisse la même place. */
.nav-connexion-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 18px 5px 5px; border-radius: 999px;
  color: white; white-space: nowrap; text-decoration: none;
  background: linear-gradient(135deg, var(--violet-600, #7c3aed), var(--violet-700, #6d28d9));
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.28);
  transition: transform .2s, box-shadow .2s;
}
.nav-connexion-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.nav-connexion-avatar svg { width: 17px; height: 17px; display: block; }
.nav-connexion-texte { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.nav-connexion-titre { font-size: 14px; font-weight: 700; }
.nav-connexion-sous { font-size: 11px; font-weight: 500; opacity: .82; letter-spacing: .02em; }
.nav-connexion-btn:focus-visible { outline: 2px solid var(--violet-300, #c4b5fd); outline-offset: 3px; }
.nav-connexion-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4); text-decoration: none; color: white; }

/* Connecté : une puce avatar + nom, menu au clic. */
.nav-compte { position: relative; }
.nav-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 6px; border-radius: 999px; cursor: pointer;
  background: var(--dark-800, #18181b); border: 1px solid var(--dark-700, #27272a);
  color: white; font-family: inherit; font-size: 14px; font-weight: 600;
  transition: border-color .2s, background .2s;
}
.nav-chip:hover, .nav-compte.ouvert .nav-chip { border-color: var(--violet-500, #8b5cf6); background: var(--dark-700, #27272a); }
.nav-chip-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--violet-600, #7c3aed), var(--violet-700, #6d28d9));
  font-size: 15px; line-height: 1;
}
.nav-chip-nom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-chip-chevron { font-size: 10px; color: var(--dark-400, #71717a); }

.nav-menu {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 240px;
  background: var(--dark-900, #0f0f14); border: 1px solid var(--dark-700, #27272a); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55); padding: 6px;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .15s, transform .15s; z-index: 200;
}
.nav-compte.ouvert .nav-menu { opacity: 1; transform: none; pointer-events: auto; }
.nav-menu-email {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px 12px; border-bottom: 1px solid var(--dark-800, #18181b); margin-bottom: 6px;
  font-size: 13px; color: var(--dark-200, #d4d4d8); word-break: break-all;
}
.nav-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--dark-500, #52525b); }
.nav-menu-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--dark-200, #d4d4d8);
  background: none; border: none; cursor: pointer;
}
.nav-menu-item:hover { background: var(--dark-800, #18181b); color: white; text-decoration: none; }
.nav-menu-sortir { color: #f87171; }
.nav-menu-sortir:hover { background: rgba(248, 113, 113, .1); color: #fca5a5; }

/* Téléphone : la puce garde l'avatar, lâche le nom. La zone reste visible
   SANS ouvrir le menu burger — c'est ce qui la rend « comme sur les vrais
   sites ». Et sur les 26 pages secondaires, qui n'ont AUCUNE règle mobile :
   le tiret disparaît et « Retour au site » ne garde que sa flèche — sinon le
   libellé se cassait sur deux lignes à côté de la puce. */
@media (max-width: 560px) {
  .nav-chip-nom, .nav-chip-chevron { display: none; }
  .nav-chip { padding: 5px; }
  .nav-connexion-btn { padding: 4px 14px 4px 4px; gap: 8px; }
  .nav-connexion-avatar { width: 30px; height: 30px; }
  .nav-connexion-sous { display: none; }
  .nav .logo + span { display: none; }
  .nav a.back { font-size: 0; gap: 0; }
  .nav a.back svg { width: 22px; height: 22px; }
}

/* Très petit écran : l'avatar seul. Le libellé reste dans l'aria-label. */
@media (max-width: 380px) {
  .nav-connexion-texte { display: none; }
  .nav-connexion-btn { padding: 4px; }
}