/* ============================================================
   Styles spécifiques au module Profil
   ============================================================
   Un seul composant, deux états (développé / compact). La bascule est
   entièrement orchestrée par JS (voir setProfilCollapsed() dans script.js) :
   le contenu complet s'efface avant que le bandeau ne commence à apparaître,
   jamais l'inverse ni les deux en même temps. Cette feuille ne fait
   qu'exprimer les transitions ; l'enchaînement exact (qui, quand) est décidé
   en JS pour garantir cette contrainte, un simple sélecteur CSS ne suffisant
   pas à l'assurer de façon fiable. */

#profil-panel {
  overflow: hidden;
}

.profil-compact {
  display: none;
  opacity: 0;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: opacity 150ms ease;
}
.profil-compact-avatar {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(212,165,212,.5);
}
.profil-compact-name {
  font-size: .85rem; font-weight: 600; color: white;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px;
}
.profil-compact-croks, .profil-compact-level {
  font-size: .78rem; color: rgba(255,255,255,.6); white-space: nowrap; flex-shrink: 0;
}

/* Chevron : icône SVG intégrée au bandeau (jamais un bouton indépendant).
   Repos = replié (pointe vers le bas) ; pivote de 180° en développé. */
.profil-chevron {
  flex-shrink: 0;
  color: rgba(255,255,255,.45);
  transform: rotate(180deg);
  transition: transform 200ms ease;
}
#profil-panel.profil-collapsed .profil-chevron {
  transform: rotate(0deg);
}
.profil-chevron-compact {
  margin-left: auto;
}
/* Le chevron du profil développé n'existe que sur mobile (voir media query
   plus bas) : sur desktop, le profil ne se replie jamais. */
.profil-chevron-full {
  display: none;
}

.profil-full {
  opacity: 1;
  transition: opacity 150ms ease;
}

/* Le repli n'existe que sur mobile — desktop reste strictement inchangé :
   la classe .profil-collapsed n'est même jamais appliquée par script.js sur
   un viewport large (voir setProfilCollapsed()). */
@media (max-width: 767px) {
  #profil-panel {
    transition: max-height 260ms var(--tcg-ease-out, ease);
  }
  #profil-header-full {
    cursor: pointer;
    width: 100%;
  }
  .profil-chevron-full {
    display: inline-flex;
    margin-left: auto;
    align-self: flex-start;
    margin-top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #profil-panel,
  .profil-full,
  .profil-compact,
  .profil-chevron {
    transition: none;
  }
}

/* Pulse discret sur une valeur qui vient de changer (voir refreshProfile() /
   setProfilText() dans script.js) — jamais sur un simple affichage initial. */
@keyframes profilPulse {
  0%   { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.profil-pulse {
  display: inline-block;
  animation: profilPulse 420ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .profil-pulse { animation: none; }
}