/* Page /mes-avatars - la collection d'avatars.
   Complète page-categorie.css (#app, .hero, .section, .quick-links, .cta-portail). */

.av-compte {
  display: inline-block;
  margin-left: 10px;
  padding: 1px 10px;
  border-radius: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--texte-doux);
  vertical-align: middle;
}

.av-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 14px;
}

.av-carte {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* Aucun padding en haut ni sur les côtés : l'image part du bord supérieur et va d'un
     bord à l'autre, c'est elle qu'on vient regarder. Seuls le nom et le prix sont
     rentrés, chacun par son propre padding. */
  padding: 0 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-forte);
  border-radius: 12px;
  color: var(--texte);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  /* align-items centre la BOÎTE, pas le texte qu'elle contient : sans text-align, un nom
     sur deux lignes comme « Princesse guerrière » se collait à gauche.
     height + margin-top auto plus bas : les prix restent alignés d'une carte à l'autre,
     même quand un nom prend une ligne de plus. */
  text-align: center;
  height: 100%;
}

.av-carte:hover { border-color: var(--texte-faible); transform: translateY(-2px); }

/* --- Description : bulle au survol sur PC, carte retournée au doigt --- */

/* perspective : sans elle, la rotation du haut de carte serait plate et illisible.
   position relative : c'est la carte qui sert de repère à la bulle et au dos. */
.av-carte-recto-verso { perspective: 700px; }

.av-flip {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform-style: preserve-3d;
  transition: transform 0.45s;
}
.av-carte-retournee .av-flip { transform: rotateY(180deg); }

/* La face avant reste dans le flux : c'est elle qui donne sa hauteur au bloc, et le dos
   s'y cale exactement. Sans ça, une carte se serait effondrée pendant la rotation. */
.av-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  backface-visibility: hidden;
}

.av-dos {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  /* Mêmes coins hauts que l'image qu'il remplace, pour que la carte retournée garde
     exactement la silhouette de la carte à l'endroit. */
  border-radius: 11px 11px 8px 8px;
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.av-dos p {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.35;
  color: var(--texte-doux);
}

/* Bulle : masquée par défaut, et sans pointer-events pour ne jamais voler un clic.
   Elle s'ouvre SOUS la carte, jamais au-dessus : au-dessus, elle recouvrait le titre de
   la section et surtout le solde en points, c'est-à-dire l'information dont on a besoin
   pour décider d'un achat. En dessous, elle ne masque au pire qu'une carte de la rangée
   suivante, sur laquelle le pointeur n'est pas. */
.av-bulle {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: 6px;
  z-index: 3;
  width: max-content;
  max-width: 210px;
  transform: translateX(-50%);
  padding: 7px 11px;
  border-radius: 10px;
  background: var(--surface-1);
  border: 1px solid var(--line-forte);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--texte);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Souris seulement. Un écran tactile déclenche un faux survol au tap, qui laisserait la
   bulle collée à l'écran jusqu'au clic suivant - d'où le test sur le pointeur. */
@media (hover: hover) and (pointer: fine) {
  /* Aucune transition ni délai : la description doit apparaître à l'instant du survol.
     Elle suit le survol du haut de carte, pas celui du bouton d'achat, qu'elle
     recouvrirait. :focus-within la rend accessible à qui navigue au clavier. */
  .av-flip:hover ~ .av-bulle,
  .av-carte > img:hover ~ .av-bulle,
  .av-carte:focus-within .av-bulle {
    opacity: 1;
    visibility: visible;
  }
}

/* Tactile : le retournement remplace la bulle, qui n'y a pas de déclencheur. */
@media (hover: none) {
  .av-carte-recto-verso { cursor: pointer; }
}

/* L'image occupe toute la largeur de la carte et épouse ses deux coins hauts.
   Le rayon vaut celui de la carte moins son trait de bordure (12 - 1), faute de quoi un
   liseré de fond apparaît dans l'angle. On ne peut pas régler ça par overflow: hidden
   sur la carte : ça rognerait la bulle de description, qui déborde volontairement.
   Coins arrondis et non cercle : le badge des 1 000 premiers a une banderole et des
   lauriers qui touchent les bords, qu'un masque rond trancherait. */
.av-carte img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 11px 11px 0 0;
  object-fit: cover;
  background: var(--surface-1);
}

.av-nom { font-size: 0.9rem; font-weight: 600; padding: 0 8px; }

/* margin-top: auto pousse l'état en bas de la carte : les pastilles « Porté », les prix
   et les boutons d'achat restent ainsi sur une même ligne dans toute la grille. */
.av-etat,
.av-acheter {
  margin-top: auto;
}

.av-etat {
  font-size: 0.74rem;
  color: var(--texte-faible);
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--surface-1);
}

/* Celui qu'on porte : liseré franc, pour qu'on le repère sans lire les étiquettes. */
.av-carte-actif {
  border-color: var(--color-btn1);
  box-shadow: 0 0 0 1px var(--color-btn1);
}
.av-carte-actif .av-etat {
  background: var(--color-btn1);
  color: #fff;
  font-weight: 600;
}

/* Non possédés : la carte ne réagit pas au survol, mais l'AVATAR RESTE EN COULEUR.
   C'est lui l'argument de vente - le griser éteignait justement ce qui donne envie, et
   il éteignait aussi l'anneau doré des avatars rares, leur seul signe distinctif.
   C'est le PRIX qui porte l'information « pas encore pour toi » (.av-etat-trop-cher). */
.av-carte-verrou {
  cursor: default;
}
.av-carte-verrou:hover { border-color: var(--line-forte); transform: none; }

.av-message {
  min-height: 1.2em;
  margin-top: 14px;
  text-align: center;
  font-size: 0.86rem;
}
.av-message-ok { color: #4ade80; }
.av-message-erreur { color: #f87171; }

.av-note { font-size: 0.86rem; color: var(--texte-doux); margin-bottom: 14px; }

/* --- Boutique --- */

.av-solde {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 20px;
  background: rgba(210, 151, 58, 0.14);
  border: 1px solid rgba(210, 151, 58, 0.4);
  font-size: 0.78rem;
  font-weight: 700;
  color: #d2973a;
  vertical-align: middle;
}

/* Un avatar qu'on peut s'offrir se distingue par son cadre, qui s'anime au survol et
   reprend la couleur du bouton d'achat. Tous les avatars étant désormais montrés en
   couleur, c'est le seul écart qui reste entre « à portée » et « pas encore ». */
.av-carte-abordable:hover { border-color: var(--color-btn1); transform: translateY(-2px); }

.av-acheter {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--color-btn1);
  background: var(--color-btn1);
  color: #fff;
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}
.av-acheter:hover:not(:disabled) { background: var(--color-btn2); }
.av-acheter:disabled { opacity: 0.5; cursor: default; }

/* Prix hors budget : gris et discret, là où un prix atteignable est un bouton bleu.
   C'est le seul endroit où se lit « pas encore pour toi ». */
.av-etat-trop-cher {
  color: var(--texte-faible);
  background: transparent;
}

/* --- Séries --- */

.av-serie { margin-bottom: 26px; }
.av-serie:last-child { margin-bottom: 0; }

.av-serie-entete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

/* Le titre reprend la couleur de l'anneau de sa série, éclairci pour rester lisible sur
   le fond sombre : le code couleur se comprend alors sans qu'on ait à l'expliquer.
   La teinte arrive en variable, posée sur .av-serie par le PHP. */
.av-serie-nom {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--av-serie-teinte, var(--accent-reseau)) 72%, #ffffff);
}

/* Badge de rareté, sous le nom. Il reprend la couleur de l'anneau composé dans l'image,
   passée en variable par le PHP : le lien entre le cerclage jaune et le mot « Rare » se
   fait alors tout seul, sans légende. */
.av-rarete {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: 20px;
  color: var(--av-rarete-teinte, #eab308);
  border: 1px solid color-mix(in srgb, var(--av-rarete-teinte, #eab308) 55%, transparent);
  background: color-mix(in srgb, var(--av-rarete-teinte, #eab308) 14%, transparent);
}

.av-serie-badge {
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 20px;
  background: rgba(148, 163, 184, 0.18);
  color: var(--texte-doux);
}

.av-serie-resume {
  font-size: 0.82rem;
  color: var(--texte-faible);
  margin: 0 0 12px;
}

/* Vignette d'une série annoncée : présente mais visiblement pas encore là. */
.av-carte-mystere { opacity: 0.4; }
.av-carte-mystere .av-nom { font-size: 1.1rem; color: var(--texte-faible); }

.av-cta-compte { text-align: center; }

@media (max-width: 520px) {
  .av-grille { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .av-carte { padding: 0 0 10px; }
  .av-nom { font-size: 0.82rem; padding: 0 6px; }
}