/* ========================================================================== */
/* ETHNOS R135 — Profil conservé ouvert + éditeur aminci + grande palette     */
/* Base : R134. Correctifs ciblés demandés le 3 août 2026.                    */
/* ========================================================================== */

/* Le volet Profil reste au premier plan et demeure ouvert pendant l'édition. */
html body .memberNavDrawerLayer{
  z-index:81 !important;
}
html body .memberProfileDrawer{
  z-index:2 !important;
}
html body .memberProfileEditorDrawer{
  --profile-editor-right:var(--ethnos-context-width,430px);
  z-index:80 !important;
}
html body .memberProfileEditorPanel{
  right:var(--profile-editor-right) !important;
  max-width:none !important;
  border-right:1px solid rgba(49,209,207,.22) !important;
  box-shadow:-20px 0 58px rgba(0,0,0,.28),18px 0 44px rgba(0,0,0,.12) !important;
}

/* Le fond assombri reste sous Profil : la fiche demeure lisible et cliquable. */
html body .memberProfileEditorBackdrop{
  z-index:0 !important;
}
html body .memberProfileEditorPanel{
  z-index:1 !important;
}

/* L'éditeur est désormais moins large : mise en page souple et compacte. */
html body .memberProfileEditorHeader{
  padding:20px clamp(22px,2.2vw,42px) 18px !important;
}
html body .memberProfileEditorScroll{
  padding:18px clamp(20px,2vw,38px) 26px !important;
}
html body .memberProfileEditCard{
  padding:18px !important;
}
html body .memberProfileEditGridIdentity{
  grid-template-columns:minmax(138px,.27fr) minmax(0,1fr) !important;
}

/* Palette visible, riche et contrôlée : plus de 3 fois les 48 choix de R134. */
.memberProfileEmojiPicker{
  display:grid;
  gap:8px;
  margin-top:3px;
}
.memberProfileEmojiPickerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#355367;
}
.memberProfileEmojiPickerHeader>span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.memberProfileEmojiPickerHeader small{
  font-size:10px;
  color:#6b7f89;
}
.memberProfileEmojiPickerHeader small b{
  color:#f26722;
}
html body .memberProfileEmojiBar{
  display:block !important;
  max-height:230px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px 10px 12px !important;
  border:1.5px solid rgba(7,26,57,.30) !important;
  border-radius:12px !important;
  background:#f8fcfa !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(7,26,57,.28) transparent;
}
.memberProfileEmojiGroup+ .memberProfileEmojiGroup{
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid rgba(7,26,57,.10);
}
.memberProfileEmojiGroup h4{
  margin:0 0 7px;
  color:#355367;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.memberProfileEmojiChoices{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(31px,1fr));
  gap:5px;
}
html body .memberProfileEmojiChoices button{
  width:100% !important;
  min-width:31px;
  height:31px !important;
  margin:0 !important;
  border:1px solid rgba(7,26,57,.14) !important;
  border-radius:8px !important;
  background:#fffdf9 !important;
  font-size:17px !important;
  cursor:pointer;
}
html body .memberProfileEmojiChoices button:hover,
html body .memberProfileEmojiChoices button:focus-visible{
  border-color:#13b7b4 !important;
  background:#effbf9 !important;
  transform:translateY(-1px);
  outline:none;
}

/* Ajustement structurel quand la largeur réellement disponible se réduit. */
@container (max-width:780px){
  .memberProfileEditGrid,
  .memberProfileEditGridIdentity{
    grid-template-columns:1fr !important;
  }
  .memberProfilePhotoField{
    grid-template-columns:auto minmax(0,1fr);
  }
}
html body .memberProfileEditorPanel{
  container-type:inline-size;
}

@media(max-width:1200px){
  html body .memberProfileEditorHeader h2{
    font-size:clamp(28px,3.4vw,40px) !important;
  }
  html body .memberProfileEditGrid,
  html body .memberProfileEditGridIdentity{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:900px){
  html body .memberProfileEditorPanel{
    right:0 !important;
  }
  html body .memberProfileEditorDrawer{
    z-index:190 !important;
  }
  html body .memberProfileEmojiBar{
    max-height:200px;
  }
}