/* ETHNOS R701 — Centre Contacts : avatars confinés, suppression symétrique et responsive durci. */
html body [data-member-drawer-panel="contacts-r588"]{
  background-color:#fffdf9 !important;
  background-image:linear-gradient(180deg,#fffdf9 0%,#eee1d0 100%) !important;
  overflow:hidden !important;
  container-type:inline-size !important;
  container-name:contactsR692 !important;
}
html body .ethnosContactsR588Shell{
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scrollbar-gutter:stable !important;
  color:#071a39 !important;
  font-family:var(--ethnos-official-title,Inter,"Segoe UI",Arial,sans-serif) !important;
}
html body .ethnosContactsR588Header{
  flex:0 0 auto !important;
  padding:20px 22px 16px !important;
  border-bottom:1px solid rgba(7,26,57,.14) !important;
  text-align:center !important;
  background:rgba(255,253,249,.46) !important;
}
html body .ethnosContactsR588Header>span{
  display:block !important;
  margin-bottom:4px !important;
  color:#f26a21 !important;
  font-size:10px !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
}
html body .ethnosContactsR588Header h2{
  margin:0 !important;
  font-size:clamp(24px,2vw,34px) !important;
  line-height:1.05 !important;
  font-weight:900 !important;
}
html body .ethnosContactsR588Header p{
  max-width:620px !important;
  margin:8px auto 0 !important;
  color:#61778b !important;
  font-size:clamp(11px,.82vw,14px) !important;
  line-height:1.35 !important;
}
html body .ethnosContactsR588Tabs{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:0 !important;
  margin:12px 14px !important;
  padding:4px !important;
  border:1px solid rgba(7,26,57,.14) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.52) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78) !important;
}
html body .ethnosContactsR588Tabs button{
  min-width:0 !important;
  min-height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#536b7e !important;
  font:850 12px/1.1 var(--ethnos-official-title,Inter,"Segoe UI",Arial,sans-serif) !important;
  cursor:pointer !important;
}
html body .ethnosContactsR588Tabs button+button{box-shadow:inset 1px 0 0 rgba(7,26,57,.09) !important}
html body .ethnosContactsR588Tabs button b{
  display:inline-grid !important;
  min-width:22px !important;
  height:22px !important;
  margin:0 !important;
  place-items:center !important;
  border-radius:999px !important;
  background:rgba(7,26,57,.08) !important;
  color:#071a39 !important;
  font-size:10px !important;
}
html body .ethnosContactsR588Tabs button.isActive{
  background:#071a39 !important;
  color:#fffaf3 !important;
  box-shadow:0 3px 9px rgba(7,26,57,.20) !important;
}
html body .ethnosContactsR588Tabs button.isActive b{background:#f26a21 !important;color:#fff !important}
html body .ethnosContactsR588Body{
  flex:0 0 auto !important;
  min-width:0 !important;
  min-height:180px !important;
  padding:0 !important;
}
html body .ethnosContactsR588List{display:grid !important;gap:1px !important;background:rgba(7,26,57,.10) !important}
html body .ethnosContactsR588Card{
  box-sizing:border-box !important;
  min-width:0 !important;
  padding:14px 16px !important;
  background:linear-gradient(180deg,rgba(255,253,249,.98),rgba(247,239,227,.98)) !important;
  color:#071a39 !important;
}
html body .ethnosContactsR588Card.isUnread{box-shadow:inset 4px 0 0 #f26a21 !important}
html body .ethnosContactsR588Card.isSelected{outline:2px solid rgba(242,106,33,.58) !important;outline-offset:-3px !important}
html body .ethnosContactsR588RequestTop{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:10px !important;
}
html body .ethnosContactsR588Identity{
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  color:#071a39 !important;
  text-align:left !important;
  cursor:pointer !important;
}
html body .ethnosContactsR588Identity>span:last-child{min-width:0 !important;display:block !important}
html body .ethnosContactsR588Identity strong{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:clamp(14px,1vw,18px) !important;
  font-weight:900 !important;
}
html body .ethnosContactsR588Identity small{
  display:block !important;
  margin-top:3px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  color:#61778b !important;
  font-size:11px !important;
  font-weight:700 !important;
}
html body .ethnosContactsR588Avatar{
  width:54px !important;
  height:54px !important;
  box-sizing:border-box !important;
  border-radius:12px !important;
  object-fit:cover !important;
  overflow:hidden !important;
  border:1px solid rgba(7,26,57,.16) !important;
  background:#fff !important;
}
/* R701 — l'avatar authentifié est injecté comme <img> dans le conteneur.
   Sans dimensions propres, l'image gardait sa taille intrinsèque et débordait
   sur toute la carte Contacts. */
html body .ethnosContactsR588Avatar>img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
}
html body .ethnosContactsR588Avatar.isInitials{
  display:grid !important;
  place-items:center !important;
  background:#071a39 !important;
  color:#fffaf3 !important;
  font-size:16px !important;
  font-weight:900 !important;
}
html body .ethnosContactsR588RequestStatus,
html body .ethnosContactsR588Status span{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:24px !important;
  padding:4px 8px !important;
  border-radius:999px !important;
  font-size:10px !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
html body .ethnosContactsR588RequestStatus.isPending{background:#fff1df !important;color:#a04d17 !important}
html body .ethnosContactsR588RequestStatus.isAccepted,
html body .ethnosContactsR588Status .isAccepted{background:#e6f5e8 !important;color:#256d35 !important}
html body .ethnosContactsR588RequestStatus.isRefused{background:#f8e7e7 !important;color:#8e3434 !important}
html body .ethnosContactsR588Card>p{
  margin:10px 0 4px !important;
  color:#435a6e !important;
  font-size:12px !important;
  line-height:1.35 !important;
  text-align:center !important;
}
html body .ethnosContactsR588Card>small{
  display:block !important;
  color:#73879a !important;
  font-size:10px !important;
  text-align:center !important;
}
html body .ethnosContactsR588Card footer{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:8px !important;
  margin-top:11px !important;
}
html body .ethnosContactsR588Card footer button{
  min-height:34px !important;
  padding:7px 12px !important;
  border:1px solid rgba(7,26,57,.18) !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#071a39 !important;
  font:800 11px/1 var(--ethnos-official-title,Inter,"Segoe UI",Arial,sans-serif) !important;
  cursor:pointer !important;
}
html body .ethnosContactsR588Card footer button.isPrimary{border-color:#f26a21 !important;background:#ff9862 !important;color:#071a39 !important}
html body .ethnosContactsR588Card footer button.isRefuse,
html body .ethnosContactsR588Card footer button.isDelete{color:#e65f1e !important}
html body .ethnosContactsR588Card footer button.isQuiet{font-size:10px !important;background:transparent !important;border-color:transparent !important}
html body .ethnosContactsR588Empty,
html body .ethnosContactsR588Loading{
  margin:18px 14px !important;
  padding:24px 16px !important;
  border:1px solid rgba(7,26,57,.13) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.48) !important;
  text-align:center !important;
  color:#61778b !important;
}
html body .ethnosContactsR588Empty strong{display:block !important;margin-bottom:5px !important;color:#071a39 !important}
html body .ethnosContactsR588Empty p{margin:0 !important;font-size:12px !important;line-height:1.4 !important}
html body .ethnosContactsR588Empty.isError{border-color:rgba(174,54,54,.25) !important}
html body .ethnosContactsR588Close{
  flex:0 0 auto !important;
  box-sizing:border-box !important;
  width:calc(100% - 28px) !important;
  min-height:42px !important;
  margin:34px 14px 14px !important;
  padding:0 14px !important;
  border:1px solid #071a39 !important;
  border-radius:10px !important;
  background:#071a39 !important;
  color:#fffaf3 !important;
  font-size:12px !important;
  font-weight:900 !important;
}
html body .memberTopNavButton[data-member-drawer="contacts-r588"]{position:relative !important}
html body .ethnosContactsR588Alert{
  position:absolute !important;
  right:6px !important;
  top:5px !important;
  z-index:3 !important;
  min-width:22px !important;
  height:18px !important;
  box-sizing:border-box !important;
  padding:0 5px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#f26a21 !important;
  color:#fff !important;
  box-shadow:0 2px 7px rgba(7,26,57,.24) !important;
  font:900 9px/1 var(--ethnos-official-title,Inter,"Segoe UI",Arial,sans-serif) !important;
  pointer-events:none !important;
}
html body .ethnosContactsR588Alert[hidden]{display:none !important}
@media (max-width:1600px) and (max-height:920px){
  html body .ethnosContactsR588Header{padding:14px 16px 11px !important}
  html body .ethnosContactsR588Header h2{font-size:24px !important}
  html body .ethnosContactsR588Tabs{padding:8px 10px !important;gap:6px !important}
  html body .ethnosContactsR588Tabs button{min-height:36px !important;font-size:10px !important}
  html body .ethnosContactsR588Card{padding:10px 12px !important}
  html body .ethnosContactsR588Identity{grid-template-columns:46px minmax(0,1fr) !important;gap:9px !important}
  html body .ethnosContactsR588Avatar{width:46px !important;height:46px !important}
  html body .ethnosContactsR588Close{margin-top:28px !important;min-height:38px !important}
}
@media (max-width:520px){
  html body .ethnosContactsR588RequestTop{grid-template-columns:minmax(0,1fr) !important}
  html body .ethnosContactsR588RequestStatus{justify-self:center !important}
}
@media (prefers-reduced-motion:reduce){
  html body .ethnosContactsR588Card *,html body .ethnosContactsR588Tabs button{transition:none !important}
}

/* R686 : aucune zone d'action artificielle quand une réponse envoyée est simplement informative. */
html body .ethnosContactsR588Card footer:empty{display:none !important;}


/* R692 — Carte contact : statut et action restent lisibles sans casser la colonne. */
html body .ethnosContactsR692ContactLine{
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
}
html body .ethnosContactsR692ContactLine .ethnosContactsR588Status{justify-self:end !important}
html body .ethnosContactsR692ContactActions{
  display:flex !important;
  justify-content:flex-end !important;
  margin-top:10px !important;
}
html body .ethnosContactsR692ContactActions button{
  min-height:32px !important;
  padding:7px 10px !important;
  border:1px solid rgba(179,69,69,.26) !important;
  border-radius:9px !important;
  background:#fff8f7 !important;
  color:#a43e38 !important;
  font-size:10px !important;
  font-weight:900 !important;
}

/* R692 — Responsive réel de la colonne Contacts (250–430 px suivant écran). */
@container contactsR692 (max-width:430px){
  html body .ethnosContactsR588Header{padding:16px 12px 12px !important}
  html body .ethnosContactsR588Header h2{font-size:clamp(26px,8.5vw,34px) !important}
  html body .ethnosContactsR588Header p{max-width:34ch !important;font-size:11px !important}
  html body .ethnosContactsR588Tabs{margin:10px 8px !important;padding:3px !important;border-radius:13px !important}
  html body .ethnosContactsR588Tabs button{min-height:42px !important;gap:4px !important;padding:6px 3px !important;font-size:clamp(9px,2.8vw,11px) !important}
  html body .ethnosContactsR588Tabs button b{min-width:20px !important;height:20px !important;font-size:9px !important}
  html body .ethnosContactsR588Card{padding:12px 10px !important}
  html body .ethnosContactsR588Identity{grid-template-columns:50px minmax(0,1fr) !important;gap:9px !important}
  html body .ethnosContactsR588Avatar{width:50px !important;height:50px !important}
  html body .ethnosContactsR588Identity strong{font-size:clamp(14px,4.6vw,18px) !important}
  html body .ethnosContactsR588Identity small{font-size:10px !important}
  html body .ethnosContactsR588NameLine>.ethnosMemberShieldR594{width:17px !important;height:17px !important}
  html body .ethnosContactsR588NameLine>.ethnosMemberOfficialR594{width:16px !important;height:16px !important}
  html body .ethnosContactsR692ContactLine{grid-template-columns:minmax(0,1fr) !important;gap:7px !important}
  html body .ethnosContactsR692ContactLine .ethnosContactsR588Status{justify-self:start !important;margin-left:59px !important}
  html body .ethnosContactsR692ContactActions{justify-content:flex-start !important;margin-left:59px !important}
  html body .ethnosContactsR588Close{width:calc(100% - 20px) !important;margin:24px 10px 10px !important}
}
@container contactsR692 (max-width:330px){
  html body .ethnosContactsR588Tabs button{font-size:9px !important}
  html body .ethnosContactsR588Tabs button b{min-width:18px !important;width:18px !important;height:18px !important;padding:0 !important}
  html body .ethnosContactsR588Identity{grid-template-columns:44px minmax(0,1fr) !important;gap:7px !important}
  html body .ethnosContactsR588Avatar{width:44px !important;height:44px !important}
  html body .ethnosContactsR692ContactLine .ethnosContactsR588Status,
  html body .ethnosContactsR692ContactActions{margin-left:51px !important}
  html body .ethnosContactsR692ContactActions button{width:100% !important;text-align:center !important}
}