/* Amis, messagerie et clans : ce qui s'ajoute aux pop-ups du panneau
   (panneau.css). Memes couleurs, memes traits fins. */

/* Pop-ups a listes : une largeur stable, qui ne saute pas au chargement. */
.pn-pop-corps.pa-large { width: min(360px, calc(100vw - 110px)); }
.pn-pop-corps.pc-conv { width: min(380px, calc(100vw - 110px)); }

.pa-sections { display: grid; gap: 14px; }
.pa-section { display: grid; gap: 7px; }
.pa-liste { display: grid; gap: 4px; }
.pa-defile { max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.pa-vide { margin: 2px 0; font-size: 11px; line-height: 1.6; color: #6b7488; }

/* Une ligne : pastille, nom (et sous-titre), boutons a droite. */
.pa-ligne {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 5px 7px;
  border-radius: 9px;
  background: #ffffff06;
  border: 1px solid transparent;
}
.pa-ligne:hover { border-color: #ffffff14; }
button.pa-choix {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.pa-choix:hover, button.pa-choix:focus-visible {
  border-color: var(--orange, #f07a25);
  background: #f07a2514;
  outline: none;
}
.pa-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #ffffff26;
}
.pa-initiale {
  display: grid;
  place-items: center;
  background: #1a2230;
  font-family: var(--display, 'Archivo Black', system-ui, sans-serif);
  font-size: 12px;
  color: #cfd6e2;
}
/* Tag de clan a la place d'une image : un ecusson carre. */
.pc-tag { border-radius: 8px; font-size: 9px; letter-spacing: .02em; }
.pa-nom { font-size: 12px; color: var(--ink, #e8edf4); overflow-wrap: anywhere; }
.pa-texte { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pa-ligne > .pa-nom { flex: 1; min-width: 0; }
.pa-sous { font-size: 10px; letter-spacing: .04em; color: #6b7488; }
.pa-desc { font-size: 10.5px; line-height: 1.5; color: #9aa3b5; overflow-wrap: anywhere; }
.pa-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; flex: 0 1 auto; }
.pa-actions .pp-bouton { padding: 5px 9px; font-size: 10px; }
.pp-bouton:disabled { opacity: .5; cursor: default; }
.pp-bouton.arme { border-color: #ff8f7a; color: #ffb3a6; }

/* Rang dans le clan. */
.pa-rang { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: #6b7488; }
.pa-rang.chef { color: var(--orange, #f07a25); }
.pa-rang.officier { color: #8fb6ff; }

/* Formulaires : fonder un clan, reglages. */
.pa-form { display: grid; gap: 8px; }
.pa-form[hidden] { display: none; }
.pa-tag { flex: 0 0 76px; text-transform: uppercase; letter-spacing: .08em; }
.pa-zone { resize: vertical; min-height: 44px; font-family: inherit; line-height: 1.5; }
.pa-case { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #b8c2d2; cursor: pointer; }
.pa-case input { accent-color: var(--orange, #f07a25); }

/* Gestion du clan. */
.pg-tete { display: flex; gap: 12px; align-items: flex-start; }
.pg-tete .pp-titre-pop { margin: 0 30px 0 0; }
.pg-ecusson {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid #ffffff26;
  font-size: 13px;
}
.pg-fin { justify-content: space-between; padding-top: 4px; border-top: 1px solid #ffffff14; }
.pp-rang[hidden] { display: none; }

/* Conversation. */
.pc-tete { display: flex; align-items: center; gap: 10px; }
.pc-tete .pp-titre-pop { margin: 0 30px 0 0; }
.pc-fil {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: min(46vh, 380px);
  overflow-y: auto;
  padding: 8px 4px 8px 0;
  border-top: 1px solid #ffffff14;
  border-bottom: 1px solid #ffffff14;
  scrollbar-width: thin;
}
.pc-msg { display: grid; gap: 2px; max-width: 82%; }
.pc-msg.moi { align-self: flex-end; justify-items: end; }
.pc-msg.lui { align-self: flex-start; justify-items: start; }
.pc-auteur { font-size: 9.5px; letter-spacing: .06em; color: #8fb6ff; margin: 4px 0 0 4px; }
.pc-bulle {
  margin: 0;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pc-msg.moi .pc-bulle { background: #f07a2533; border: 1px solid #f07a2566; border-bottom-right-radius: 4px; color: #fff; }
.pc-msg.lui .pc-bulle { background: #ffffff0d; border: 1px solid #ffffff1a; border-bottom-left-radius: 4px; }
.pc-quand { font-size: 9px; color: #5c6477; padding: 0 4px; }
.pc-annonce { align-self: center; margin: 4px 0; font-size: 10px; font-style: italic; color: #6b7488; text-align: center; }

/* Colonne : conversations, pastilles. */
.pn-icone { position: relative; }
.pn-conv { padding: 0; overflow: visible; }
.pn-conv-img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  font-size: 13px;
}
span.pn-conv-img { display: grid; place-items: center; }
.pn-conv-clan .pn-conv-img { font-size: 9px; }
.pn-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #e5484d;
  border: 2px solid #070b12;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

/* Pastille des nouvelles, panneau ferme : discrete, en haut a gauche. */
.pn-alerte {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 39;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 2px solid #070b12;
  background: #e5484d;
  box-shadow: 0 4px 14px #0008;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  animation: pn-alerte 2.4s ease-in-out infinite;
}
.pn-alerte[hidden] { display: none; }
@keyframes pn-alerte {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.pg-boutons > .pp-bouton:first-child { flex: 1; }
.pa-section.pa-form[hidden] { display: none; }

/* Couleur du clan : apercu de la voiture, pastilles, couleur libre. */
.cc-bloc { display: flex; align-items: center; gap: 12px; }
.cc-apercu { width: 44px; height: auto; flex: none; filter: drop-shadow(0 4px 8px #000a); }
.cc-texte { display: grid; gap: 6px; min-width: 0; }
.cc-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.cc-pastille, .cc-libre {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #ffffff26;
  cursor: pointer;
}
.cc-libre { background: conic-gradient(#e5484d, #facc15, #22c55e, #06b6d4, #8b5cf6, #ec4899, #e5484d); }
.cc-libre::-webkit-color-swatch-wrapper { padding: 0; opacity: 0; }
.cc-aucune { background: none; color: #8a93a6; font-size: 12px; line-height: 1; }
.cc-pastille:hover, .cc-libre:hover { border-color: #ffffff88; }
.cc-pastille.choisie, .cc-libre.choisie { border-color: #fff; box-shadow: 0 0 0 2px var(--orange, #f07a25); }

/* ------------------------------------------------ groupe et amis --- */

.pn-zone { width: 100%; display: grid; justify-items: center; gap: 10px; }
.pn-zone[hidden] { display: none; }
/* Avatar de la colonne : l'image, la pastille d'etat, la couronne. */
.pn-ami-img { position: relative; width: 100%; height: 100%; display: block; }
.pn-etat {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid #070b12;
  background: #4b5263;
}
.pn-etat.menu { background: #3ddc84; }
.pn-etat.solo { background: #3ddc84; box-shadow: inset 0 0 0 2px #1d7a48; }
.pn-etat.partie { background: var(--orange, #f07a25); }
.pn-couronne {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1;
  color: #ffd166;
  text-shadow: 0 1px 3px #000;
}
.pn-icone.pn-hors .pn-conv-img { filter: grayscale(1) brightness(.6); }

/* Fiche d'un ami et groupe. */
.pg-actions { display: grid; gap: 8px; }
.pg-actions .pp-bouton { text-align: left; }
.pg-statut::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #4b5263;
  vertical-align: 1px;
}
.pg-statut.menu::before, .pg-statut.solo::before { background: #3ddc84; }
.pg-statut.partie::before { background: var(--orange, #f07a25); }

/* ------------------------------------------------- notifications --- */

.tt-pile {
  position: absolute;
  top: 14px;
  /* A droite de la colonne du panneau : elle ne cache aucune icone. */
  left: calc(clamp(52px, 4.2vw, 64px) + 14px);
  z-index: 45;
  display: grid;
  gap: 8px;
  width: min(300px, calc(100vw - 28px));
  pointer-events: none;
}
.tt-carte {
  pointer-events: auto;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #ffffff1f;
  border-left: 3px solid #3ddc84;
  background: #0a0f17f5;
  box-shadow: 0 12px 30px #000b;
  font-family: var(--mono, 'Space Mono', monospace);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink, #e8edf4);
  animation: pn-entre .16s ease-out;
}
.tt-carte.ko { border-left-color: #ff8f7a; }
.tt-invit { display: grid; gap: 9px; border-left-color: var(--orange, #f07a25); }
.tt-haut { display: flex; align-items: center; gap: 10px; }
.tt-haut strong { font-size: 12.5px; }

/* Actions sur un ami, sous l'en-tete de sa conversation ; et celles de la
   fiche d'un joueur. */
.pg-rang { display: flex; flex-wrap: wrap; gap: 6px; }
.pg-rang .pa-vide { margin: 0; align-self: center; }

/* Recherche d'un joueur : sa fiche. */
.pr-haut { display: flex; }
.pr-haut:empty { display: none; }
.pr-fiche { display: grid; gap: 14px; }
.pr-tete { display: flex; align-items: center; gap: 12px; }
.pr-tete .pp-titre-pop { margin: 0 30px 2px 0; }
.pr-avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff26;
}
.pr-avatar.pa-initiale { display: grid; place-items: center; font-size: 22px; }
.pr-infos { display: grid; gap: 10px; }
.pr-clan { display: inline-flex; align-items: center; gap: 6px; }
.pr-ecusson { width: 20px; height: 20px; object-fit: contain; }

/* Ami en partie en ligne, qu'on peut rejoindre : un liseré orange. */
.pn-icone.pn-rejoignable .pn-conv-img { box-shadow: 0 0 0 2px var(--orange, #f07a25); }