/* ========================================================================== */
/* ETHNOS R560 — profil intégré à la barre haute + cadrages hubs              */
/* Base figée : R559.                                                         */
/* Périmètre strict : profil compact, volets droite, 3 cadrages demandés.     */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. PROFIL CONNECTÉ — l'ancienne carte devient une zone de la barre haute. */
/* La largeur historique de la colonne droite est conservée.                 */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded){
  position:fixed !important;
  inset:0 0 auto auto !important;
  z-index:121 !important;
  width:var(--ethnos-context-width) !important;
  min-width:var(--ethnos-context-width) !important;
  max-width:var(--ethnos-context-width) !important;
  height:var(--topbar) !important;
  min-height:var(--topbar) !important;
  max-height:var(--topbar) !important;
  margin:0 !important;
  padding:0 10px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#061c29 !important; /* --r287-slate, source active R287 */
  background-image:none !important;
  color:#fffaf3 !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:auto !important;
  transform:none !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded):hover,
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded):focus-visible{
  background:#082737 !important; /* --r287-slate-2, source active R287 */
  box-shadow:none !important;
  transform:none !important;
  outline:none !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)::before,
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)::after,
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberProfileBlueDecor{
  content:none !important;
  display:none !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentity{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:40px minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberAvatar{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  max-width:40px !important;
  max-height:40px !important;
  margin:0 !important;
  border-width:2px !important;
  box-shadow:0 0 0 3px rgba(245,138,75,.08) !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText > h2[data-member-name]{
  display:flex !important;
  flex-flow:row nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  /* R743: 12px de gap CSS - le +4px historique du pseudo donne 8px visibles avant le trophée. */
  gap:12px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  color:#fffaf3 !important;
  white-space:nowrap !important;
  overflow:visible !important;
  line-height:1 !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .r551MemberNameText{
  min-width:0 !important;
  max-width:none !important;
  color:#fffaf3 !important;
  white-space:nowrap !important;
  line-height:1 !important;
  letter-spacing:-.035em !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberProfileMetaRow{
  display:none !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .r552OfficialBadge{
  flex:0 0 22px !important;
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
}

/* -------------------------------------------------------------------------- */
/* 2. VOLETS DROITS — départ sous la barre haute, prolongement jusqu'en bas. */
/* Maps conserve sa place et reste au-dessus du volet comme avant.           */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified[data-ethnos-ui="discord-r111"] body .memberNavDrawerLayer,
html.ethnosConnectedUnified[data-ethnos-ui="discord-r111"] body.hasMessagesDrawerOpenR141 .memberNavDrawerLayer{
  top:var(--topbar) !important;
  bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
}
html.ethnosConnectedUnified .memberNavDrawer{
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
}

/* -------------------------------------------------------------------------- */
/* 3. CADRAGES — montrer la totalité utile sans changer les 4 cases égales.  */
/* Le fond cover remplit la case ; la même photo en contain affiche le recul.*/
/* -------------------------------------------------------------------------- */
html body .bodyView-familyDiscovery--solidarity.r556FamilyHub
.r555FamilyPhotoMosaic--solidarity .isOne,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
}

html body .bodyView-familyDiscovery--solidarity.r556FamilyHub
.r555FamilyPhotoMosaic--solidarity .isOne::after,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne::after,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
}
html body .bodyView-familyDiscovery--solidarity.r556FamilyHub
.r555FamilyPhotoMosaic--solidarity .isOne::after{
  background-image:url('../assets/images/home-r183/solidarity-hands.webp') !important;
  /* Source très panoramique : recul maximal utile sans créer de bande vide. */
  background-size:auto 72% !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne::after{
  background-image:url('../assets/images/r555-culture/traditional-fan.jpg') !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo::after{
  background-image:url('../assets/images/r555-culture/traditional-women.jpg') !important;
}

/* R559 avait augmenté uniquement le bandeau Culture jusqu'à 435 px pour     */
/* réduire le crop. R560 peut revenir au gabarit commun car le recul est      */
/* désormais assuré à l'intérieur de la case, comme demandé.                 */
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.bodyViewHeader.r556FamilyHero{
  min-height:clamp(225px,17vw,300px) !important;
}
@media (max-width:1707px){
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .bodyViewHeader.r556FamilyHero{min-height:235px !important}
}
@media (max-width:1366px){
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .bodyViewHeader.r556FamilyHero{min-height:205px !important}
}
@media (max-width:1180px){
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .bodyViewHeader.r556FamilyHero{min-height:190px !important}
}
@media (max-width:900px){
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .bodyViewHeader.r556FamilyHero{min-height:365px !important}
}

/* Barre haute plus compacte : conserver le même principe aux formats courts. */
@media (max-width:1700px), (max-height:900px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded){
    padding-inline:8px !important;
  }
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentity{
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:7px !important;
  }
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberAvatar{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
  }
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .r552OfficialBadge{
    flex-basis:20px !important;
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
  }
}