/* ===================================================
   KURO ARCANA — Pseudos et amis (classes .am-*, amis.js) : page Amis, bloc de la page Profil,
   fenêtre du pseudo, pastille des demandes en attente. Style du site : violet nuit et or.
   =================================================== */
.am-racine { width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; color: #f3e9ff; }
.am-bloc, .am-profil, .am-vide {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(255, 215, 0, 0.3); background: linear-gradient(180deg, rgba(58, 15, 74, 0.55), rgba(18, 6, 22, 0.75));
  box-shadow: inset 0 0 24px rgba(75, 0, 130, 0.35);
}
.am-profil { max-width: 760px; margin: 0 auto 16px; color: #f3e9ff; }
.am-profil[hidden] { display: none; }
.am-vide { align-items: center; text-align: center; padding: 28px 16px; }
.am-grand { margin: 0; font-size: 20px; font-weight: 800; color: var(--or-dore, #ffd700); }
.am-sous-titre { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--or-dore, #ffd700); }
.am-petit-titre { margin: 4px 0 0; font-size: 16px; color: #fff; }
.am-nombre { padding: 1px 10px; border-radius: 10px; font-size: 16px; color: #1a0820; background: var(--or-dore, #ffd700); }
.am-ligne, .am-titre, .am-label { margin: 0; font-size: 16px; }
.am-titre { color: var(--or-dore, #ffd700); font-style: italic; }
.am-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.am-joueur { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(10, 4, 14, 0.55); border: 1px solid rgba(153, 50, 204, 0.35); flex-wrap: wrap; }
.am-avatar {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  font-size: 18px; font-weight: 900; color: #fff; border: 2px solid rgba(255, 215, 0, 0.55);
  background: radial-gradient(circle at 35% 30%, #6b2a8a, #1a0820);
}
.am-palier-tete { border-color: var(--or-dore, #ffd700); box-shadow: 0 0 12px rgba(255, 215, 0, 0.5); }
.am-palier-exclusif { border-color: #dc143c; box-shadow: 0 0 12px rgba(220, 20, 60, 0.5); }
.am-joueur-infos { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.am-pseudo { margin: 0; font-size: 18px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.am-statut { font-size: 16px; font-weight: 600; color: #b9a8c9; }
.am-en-ligne { color: #3ddc6a; }
.am-compteurs { margin: 2px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.am-compteur { font-size: 16px; }
.am-compteur b { color: var(--or-dore, #ffd700); }
.am-actions, .am-actions-ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.am-actions-ligne { justify-content: center; }
.am-envoyee { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

.am-bouton {
  min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 12px; font: inherit; font-size: 16px; font-weight: 800; color: #fff; cursor: pointer;
  border: 1px solid rgba(255, 215, 0, 0.5); background: linear-gradient(180deg, #3a0f4a, #1a0820);
}
.am-bouton:disabled { opacity: 0.5; cursor: default; }
.am-principal { border-color: #fff3a0; background: linear-gradient(180deg, #b8860b, #6b4a00); }
.am-bouton:focus-visible, .am-champ:focus-visible { outline: 2px solid var(--or-dore, #ffd700); outline-offset: 2px; }
.am-recherche { display: flex; flex-direction: column; gap: 6px; }
.am-recherche-ligne { display: flex; gap: 8px; }
.am-champ {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 12px; font: inherit; font-size: 16px; color: #fff;
  border: 1px solid rgba(255, 215, 0, 0.45); background: rgba(10, 4, 14, 0.8);
}
.am-message { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 16px; }
.am-message[hidden] { display: none; }
.am-erreur { color: #ffb3bf; background: rgba(220, 20, 60, 0.18); }
.am-ok { color: #a8f5c0; background: rgba(61, 220, 106, 0.15); }
.am-info { color: #fff; background: rgba(153, 50, 204, 0.2); }

/* Fenêtre du pseudo (panneau du bas sur mobile) */
.am-calque { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
.am-fenetre {
  width: min(100%, 460px); display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; color: #f3e9ff;
  border: 2px solid var(--or-dore, #ffd700); background: linear-gradient(180deg, #24092e, #0d050d); box-shadow: 0 0 30px rgba(153, 50, 204, 0.5);
}
.am-fen-titre { margin: 0; font-size: 22px; color: var(--or-dore, #ffd700); }
.am-fen-form { display: flex; flex-direction: column; gap: 8px; }
.am-fen-form .am-actions-ligne .am-bouton { flex: 1; }

/* Pastille des demandes en attente */
.am-pastille {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 6px; padding: 0 5px; border-radius: 10px;
  font-size: 13px; font-weight: 900; line-height: 1; color: #fff; background: #dc143c; box-shadow: 0 0 8px rgba(220, 20, 60, 0.7); vertical-align: middle;
}
.am-pastille[hidden] { display: none; }
.mb-onglet-icone { position: relative; }
.mb-onglet-icone > .am-pastille { position: absolute; top: -6px; right: -14px; margin: 0; }

@media (max-width: 768px) {
  .am-calque { align-items: flex-end; padding: 0; }
  .am-fenetre { width: 100%; border-radius: 18px 18px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .am-recherche-ligne { flex-direction: column; }
  .am-actions .am-bouton { flex: 1; }
}

/* Menu des pages : 9 boutons avec « Amis », qui tiennent sur une ligne dès 1280 px */
@media (min-width: 769px) {
  .menu-navigation { gap: 6px; padding-left: 10px; padding-right: 10px; }
  .menu-navigation .bouton-menu { padding-left: 11px; padding-right: 11px; letter-spacing: 0.3px; }
}