/* H2B V90 — chevauchements, ceintures/barrettes, responsive */

/* La zone de grade doit toujours pouvoir respirer. */
.member-name-line,.member-name-grade-row{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important;min-width:0!important}
.member-name-line>strong,.member-name-grade-row>strong{min-width:0;overflow-wrap:anywhere}
.member-grade-title,.grade-title-badge{max-width:100%;white-space:normal!important;line-height:1.15!important;overflow-wrap:anywhere}
.member-cell,.member-cell-with-photo{min-width:0!important}
.member-cell>div:last-child{min-width:0!important}
.row-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center!important}
.row-actions .btn{max-width:100%}
.admin-doc-gauge{min-width:0!important;max-width:100%!important}

/* Ceinture : panneau de barrettes plus large + 1 à 4 barrettes blanches fines. */
.member-belt-band{position:relative!important;overflow:hidden!important;min-height:9px!important}
.member-mini-avatar .member-belt-band{height:10px!important}
.member-belt-band.grade-white,.belt-band-static.grade-white,.belt-band-host.grade-white::after{background:linear-gradient(90deg,#f4f4f4 0 61%,#151515 61% 95%,#f4f4f4 95% 100%)!important}
.member-belt-band.grade-grey,.belt-band-static.grade-grey,.belt-band-host.grade-grey::after{background:linear-gradient(90deg,#9aa4b2 0 61%,#151515 61% 95%,#9aa4b2 95% 100%)!important}
.member-belt-band.grade-yellow,.belt-band-static.grade-yellow,.belt-band-host.grade-yellow::after{background:linear-gradient(90deg,#ffd84d 0 61%,#151515 61% 95%,#ffd84d 95% 100%)!important}
.member-belt-band.grade-orange,.belt-band-static.grade-orange,.belt-band-host.grade-orange::after{background:linear-gradient(90deg,#ff9b3d 0 61%,#151515 61% 95%,#ff9b3d 95% 100%)!important}
.member-belt-band.grade-green,.belt-band-static.grade-green,.belt-band-host.grade-green::after{background:linear-gradient(90deg,#2fc66d 0 61%,#151515 61% 95%,#2fc66d 95% 100%)!important}
.member-belt-band.grade-blue,.belt-band-static.grade-blue,.belt-band-host.grade-blue::after{background:linear-gradient(90deg,#2788ff 0 61%,#151515 61% 95%,#2788ff 95% 100%)!important}
.member-belt-band.grade-purple,.belt-band-static.grade-purple,.belt-band-host.grade-purple::after{background:linear-gradient(90deg,#9b48cf 0 61%,#151515 61% 95%,#9b48cf 95% 100%)!important}
.member-belt-band.grade-brown,.belt-band-static.grade-brown,.belt-band-host.grade-brown::after{background:linear-gradient(90deg,#a96546 0 61%,#151515 61% 95%,#a96546 95% 100%)!important}
.member-belt-band.grade-black,.belt-band-static.grade-black,.belt-band-host.grade-black::after{background:linear-gradient(90deg,#151515 0 61%,#ef3f36 61% 95%,#151515 95% 100%)!important}
.member-belt-band.grade-other,.belt-band-static.grade-other,.belt-band-host.grade-other::after{background:linear-gradient(90deg,#718299 0 61%,#151515 61% 95%,#718299 95% 100%)!important}
.belt-stripes{position:absolute;z-index:2;left:63.5%;right:7%;top:1px;bottom:1px;display:flex;align-items:stretch;justify-content:flex-start;gap:2px;pointer-events:none}
.belt-stripes i{display:block;width:2px;min-width:2px;background:#fff;border-radius:2px;box-shadow:0 0 1px rgba(0,0,0,.45)}
.grade-black .belt-stripes i{background:#fff}

/* Table admin : évite les chevauchements à largeur intermédiaire. */
.members-table td{vertical-align:top}
.members-table td[data-label="Actions"]{min-width:190px}
@media(max-width:1180px){
  .members-table td[data-label="Actions"]{min-width:0}
  .members-table .row-actions{justify-content:flex-start}
}
@media(max-width:760px){
  .member-mini-avatar{flex:0 0 48px!important;width:48px!important}
  .member-mini-avatar-face{width:48px!important;height:48px!important}
  .member-name-line{align-items:flex-start!important}
  .member-grade-title{font-size:9px!important;padding:4px 6px!important}
  .belt-stripes{gap:1.5px}
}

.member-family-item.is-indicative{border-style:dashed!important;align-items:center!important}
.family-indicative-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;border:1px solid #555;background:#090909;color:#ddd;font-size:10px;font-weight:800;white-space:nowrap}

/* ============================================================
   H2B V91 — barrettes strictement dans le panneau de grade
   ============================================================ */
/* La bande est le repère de position : jamais l'avatar/photo. */
.member-mini-avatar .member-belt-band,
.member-belt-band{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate;
}
/* 1 à 4 traits très fins, uniquement dans la zone noire/rouge de grade. */
.member-belt-band .belt-stripes{
  position:absolute!important;
  z-index:3!important;
  left:64%!important;
  right:auto!important;
  top:2px!important;
  bottom:auto!important;
  width:25%!important;
  height:6px!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:2px!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.member-belt-band .belt-stripes i{
  display:block!important;
  flex:0 0 1px!important;
  width:1px!important;
  min-width:1px!important;
  max-width:1px!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  .member-belt-band .belt-stripes{
    left:64%!important;
    width:25%!important;
    top:2px!important;
    height:5px!important;
    gap:1.5px!important;
  }
  .member-belt-band .belt-stripes i{flex-basis:1px!important;width:1px!important;min-width:1px!important}
}

/* ============================================================
   H2B V92 — alignement définitif avatar + ceinture + barrettes
   ============================================================ */
/* Chaque avatar réserve réellement la place de la photo ET de la ceinture.
   La ceinture reste donc attachée à son propre adhérent et ne déborde plus
   visuellement sur la ligne suivante. */
.member-cell-with-photo{
  display:flex!important;
  align-items:flex-start!important;
  gap:12px!important;
  min-height:58px!important;
}
.member-mini-avatar{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:auto!important;
  min-height:56px!important;
  flex:0 0 48px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  align-self:flex-start!important;
}
.member-mini-avatar-face{
  position:relative!important;
  order:1!important;
  display:grid!important;
  place-items:center!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:48px!important;
  min-height:48px!important;
  max-height:48px!important;
  flex:0 0 48px!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:12px 12px 10px 10px!important;
}
.member-mini-avatar-face img{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:0!important;
}
.member-mini-avatar .member-belt-band{
  position:relative!important;
  order:2!important;
  inset:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  display:block!important;
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  height:8px!important;
  min-height:8px!important;
  max-height:8px!important;
  flex:0 0 8px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:0 0 3px 3px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.12)!important;
  transform:none!important;
}
/* Barrettes : centrées verticalement dans le panneau noir/rouge, jamais sur la photo. */
.member-mini-avatar .member-belt-band .belt-stripes{
  position:absolute!important;
  left:64%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  width:25%!important;
  height:4px!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:2px!important;
  overflow:hidden!important;
  margin:0!important;
  padding:0!important;
  z-index:2!important;
}
.member-mini-avatar .member-belt-band .belt-stripes i{
  display:block!important;
  flex:0 0 1px!important;
  width:1px!important;
  min-width:1px!important;
  max-width:1px!important;
  height:4px!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.members-table tbody tr{height:auto!important}
.members-table td[data-label="Adhérent"]{overflow:visible!important;padding-top:14px!important;padding-bottom:14px!important}
@media(max-width:760px){
  .member-cell-with-photo{gap:11px!important;min-height:56px!important}
  .member-mini-avatar{width:48px!important;min-width:48px!important;max-width:48px!important;min-height:56px!important;flex-basis:48px!important}
  .member-mini-avatar-face{width:48px!important;min-width:48px!important;max-width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;flex-basis:48px!important}
  .member-mini-avatar .member-belt-band{width:48px!important;min-width:48px!important;max-width:48px!important;height:8px!important;min-height:8px!important;max-height:8px!important;flex-basis:8px!important}
  .member-mini-avatar .member-belt-band .belt-stripes{left:64%!important;width:25%!important;height:4px!important;gap:2px!important}
  .member-mini-avatar .member-belt-band .belt-stripes i{height:4px!important}
}


/* ============================================================
   H2B V93 — barrettes uniformes, pleine hauteur du panneau noir
   ============================================================ */
/* Important : on évite le centrage par transform qui créait des sous-pixels
   et donnait l'impression que certaines barrettes étaient plus épaisses ou
   plus courtes que d'autres. */
.member-belt-band .belt-stripes,
.member-mini-avatar .member-belt-band .belt-stripes{
  position:absolute!important;
  left:64%!important;
  right:auto!important;
  top:1px!important;
  bottom:1px!important;
  width:12px!important;
  height:auto!important;
  transform:none!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:1px!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:3!important;
  pointer-events:none!important;
}
.member-belt-band .belt-stripes i,
.member-mini-avatar .member-belt-band .belt-stripes i{
  display:block!important;
  flex:0 0 2px!important;
  width:2px!important;
  min-width:2px!important;
  max-width:2px!important;
  height:auto!important;
  align-self:stretch!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  border:0!important;
  border-radius:1px!important;
  box-shadow:none!important;
}
@media(max-width:760px){
  .member-belt-band .belt-stripes,
  .member-mini-avatar .member-belt-band .belt-stripes{
    left:64%!important;
    top:1px!important;
    bottom:1px!important;
    width:12px!important;
    height:auto!important;
    gap:1px!important;
  }
  .member-belt-band .belt-stripes i,
  .member-mini-avatar .member-belt-band .belt-stripes i{
    flex-basis:2px!important;
    width:2px!important;
    min-width:2px!important;
    max-width:2px!important;
    height:auto!important;
  }
}


/* ============================================================
   H2B V95 — centrage uniforme des photos adhérents
   ============================================================ */
/* Tous les visuels adhérents utilisent le même cadrage carré et
   restent centrés dans leur fenêtre sans étirement. */
.member-mini-avatar-face,
.admin-member-photo-frame,
.h2b-member-preview-avatar,
.h2b-quick-payment-photo,
.h2b-profile-top3-photo{
  overflow:hidden!important;
}
.member-mini-avatar-face img,
.admin-member-photo-frame img,
.h2b-member-preview-avatar img,
.h2b-quick-payment-photo img,
.h2b-profile-top3-photo img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:50% 50%!important;
  margin:0!important;
  transform:none!important;
}
/* Empêche une taille intrinsèque ou un ancien style inline de décentrer l'image. */
.member-mini-avatar-face img[style],
.admin-member-photo-frame img[style],
.h2b-member-preview-avatar img[style],
.h2b-quick-payment-photo img[style],
.h2b-profile-top3-photo img[style]{
  object-position:50% 50%!important;
}