/* ============================================================
   avatar/editeurJoueur/editeurJoueur.css
   ------------------------------------------------------------
   La mise en page de l'editeur d'avatar du JOUEUR : une seule
   page, quatre onglets (peau, visage, cheveux, tenue), un seul
   message d'etat et un seul bouton Enregistrer.

   Ce fichier ne decrit que la COQUILLE. L'apparence des grilles
   de vignettes, des cartes et des pastilles reste celle de
   avatar/clothingSystem/profileEditor.css, partagee par les
   quatre onglets : il n'y a donc qu'un seul endroit a toucher
   pour changer le style d'une vignette.
   ============================================================ */

/* La colonne de droite devient une colonne a trois etages :
   les onglets en haut, le contenu qui defile au milieu, la
   barre d'actions collee en bas. */
#avatar-editor-overlay .avatar-controls-section {
  justify-content: flex-start;
  gap: 0;
  padding: 14px;
  overflow: hidden;
}

/* ---------- etage 1 : les onglets principaux ---------- */
.editeur-onglets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 9px;
  background: #151a1f;
  flex: none;
}
.editeur-onglets button {
  border: 0;
  border-radius: 6px;
  padding: 9px 4px;
  color: #aeb8c1;
  background: transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.editeur-onglets button:hover:not(.active) { color: #e6edf3; background: #1f262d; }
.editeur-onglets button.active { color: #fff; background: #3178c6; }
.editeur-onglets button.modifie::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #ffb02e;
  vertical-align: middle;
}

/* ---------- etage 2 : le contenu de l'onglet ouvert ---------- */
.editeur-panneaux {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.editeur-panneau {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.editeur-panneau[hidden] { display: none; }

/* Chaque onglet livre sa propre <section class="clothing-editor-heading">.
   Dans la page a onglets, cette section doit occuper toute la hauteur
   disponible pour que sa grille puisse defiler seule. */
.editeur-panneau > .clothing-editor-heading {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.editeur-panneau .clothing-editor-heading > p {
  margin: 0 0 12px;
  color: #9da8b2;
  font-size: 12.5px;
  line-height: 1.45;
}
/* Le bouton Enregistrer et le statut propres a chaque onglet sont
   masques : la page n'en a plus qu'un seul, en bas. */
.editeur-panneau .clothing-editor-heading > .save-btn[hidden],
.editeur-panneau .clothing-editor-heading > [role="status"][hidden] { display: none; }

/* Les onglets internes (Haut/Bas, sourcils/yeux/nez/bouche) doivent se
   distinguer nettement des quatre onglets principaux : plus petits,
   plus sobres, et clairement en retrait. */
.editeur-panneau .clothing-tabs {
  background: transparent;
  padding: 0;
  gap: 5px;
  margin-bottom: 10px;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
}
.editeur-panneau .clothing-tabs button {
  border: 1px solid #343e47;
  border-radius: 999px;
  padding: 6px 4px;
  font-size: 12px;
  background: #1b2126;
}
.editeur-panneau .clothing-tabs button.active {
  border-color: #4ca1ff;
  color: #fff;
  background: #28527e;
}

/* Le selecteur de couleur d'un onglet. */
.editeur-panneau label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  color: #c3ccd4;
  font-size: 12.5px;
}
.editeur-panneau label input[type="color"] {
  flex: none;
  width: 56px;
  height: 30px;
  padding: 0;
  border: 1px solid #3c464f;
  border-radius: 6px;
  background: #2a3138;
  cursor: pointer;
}
.editeur-panneau label input[type="color"]:disabled { opacity: .4; cursor: default; }

/* ---------- etage 3 : le pied de page commun ---------- */
.editeur-pied {
  flex: none;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #2b333a;
}
.editeur-statut {
  min-height: 32px;
  margin: 0 0 9px;
  color: #9eabb6;
  font-size: 12px;
  line-height: 1.4;
}
.editeur-statut.error { color: #ff8585; }
.editeur-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
  margin: 0;
}
.editeur-actions button {
  border: 0;
  border-radius: 6px;
  padding: 10px 16px;
  color: #fff;
  font: inherit;
  font-weight: 600;
  background: #3a444d;
  cursor: pointer;
}
.editeur-actions button:disabled { opacity: .45; cursor: default; transform: none; }
.editeur-actions .save-btn { background: #1d9bf0; }

/* ---------- l'onglet Peau ---------- */
.peau-palette {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
}
.peau-ton {
  position: relative;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.peau-ton:hover { border-color: #6686a2; }
.peau-ton.selected { border-color: #4ca1ff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px rgba(76,161,255,.28); }
.peau-ton.selected::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(0, 0, 0, .62);
  font-size: 17px;
  font-weight: 800;
}
.peau-ton:disabled { opacity: .45; cursor: default; }
.peau-aide { margin: 0; color: #7f8b95; font-size: 11.5px; line-height: 1.5; }

/* ---------- telephone ---------- */
@media (max-width: 760px) {
  #avatar-editor-overlay .avatar-controls-section { overflow: visible; }
  .editeur-onglets button { padding: 9px 2px; font-size: 12px; }
  .editeur-panneaux { min-height: 360px; }
}