/* ========================================================================== */
/* ETHNOS R556 — finitions hubs : mosaïques 4 cases, structure famille, scroll */
/* Base figée : R555. Périmètre : profil compact + houses/solidarity/culture.  */
/* ========================================================================== */

/* 1. Profil compact : décaler uniquement le pseudonyme de +4 px. */
html.ethnosConnectedUnified .memberProfileCompact:not(.isExpanded) .r551MemberNameText{
  transform:translateX(4px) !important;
  margin-right:0 !important;
}

/* 2. Bandeaux : quatre cases strictement identiques sur les trois hubs. */
.r554UniversePhotoMosaic,
.r555FamilyPhotoMosaic,
.r556FamilyPhotoMosaic{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.r554UniversePhotoMosaic figure,
.r555FamilyPhotoMosaic figure,
.r556FamilyPhotoMosaic figure{
  min-width:0 !important;
  min-height:0 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
/* Première photo Créateurs : même case que les autres, sans bandes vides. */
.r554UniversePhotoMosaic .isOrigin{
  background-image:url('../assets/images/r555-creators/creator-origin-crop.webp') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-color:#061822 !important;
}

/* 3. Les trois hubs gardent un bandeau harmonieux qui se réduit ensemble. */
html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero,
html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero{
  min-height:clamp(225px,17vw,300px) !important;
}
@media (max-width:1707px){
  html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero,
  html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero{
    min-height:235px !important;
  }
}
@media (max-width:1366px){
  html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero,
  html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero{
    min-height:205px !important;
  }
}
@media (max-width:1180px){
  html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero,
  html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero{
    min-height:190px !important;
  }
}
@media (max-width:900px){
  html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero,
  html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero{
    min-height:365px !important;
  }
  html body .bodyView-houses.r554UniverseHub .bodyViewHeader.r554UniverseHero > div:first-child,
  html body .bodyView-familyDiscovery.r556FamilyHub .bodyViewHeader.r556FamilyHero > div:first-child{
    min-height:195px !important;
  }
  .r553UniverseHeroAside,.r554UniverseHeroAside,.r556FamilyHeroAside,
  .r553UniversePhotoMosaic,.r554UniversePhotoMosaic,.r556FamilyPhotoMosaic{
    min-height:170px !important;
  }
}

/* 4. Cartes Univers : tout le contenu principal est réellement collé en haut. */
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody,
html body .r556FamilyFeed .r554UniverseCard .r551UniverseCardBody{
  justify-content:flex-start !important;
}
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody header,
html body .r556FamilyFeed .r554UniverseCard .r551UniverseCardBody header{
  align-items:start !important;
  align-content:start !important;
  margin:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r494UniverseCardIdentity,
html body .r556FamilyFeed .r554UniverseCard .r494UniverseCardIdentity{
  padding-top:0 !important;
  margin:0 !important;
  align-self:start !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseLogo,
html body .r556FamilyFeed .r554UniverseCard .r492UniverseLogo{
  align-self:start !important;
  margin-top:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseDescription,
html body .r556FamilyFeed .r554UniverseCard .r492UniverseDescription{
  margin-top:4px !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseThemes,
html body .r556FamilyFeed .r554UniverseCard .r492UniverseThemes{
  margin-top:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody footer,
html body .r556FamilyFeed .r554UniverseCard .r551UniverseCardBody footer{
  margin-top:auto !important;
  border-top:0 !important;
}

/* 5. Solidarité / Cultures : même architecture intérieure que Créateurs. */
.r556FamilyLayout{
  display:grid !important;
  grid-template-columns:clamp(220px,16vw,285px) minmax(0,1fr) !important;
  background:#061822 !important;
}
.r556FamilyFeed{
  min-width:0 !important;
  background:#081c27 !important;
}
.r556FamilyFeed [data-r556-family-section][hidden]{
  display:none !important;
}
.r556FamilyFeed [data-r556-family-section]{
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.r556FamilyFeed .r497FamilyOfficialSection,
.r556FamilyFeed .r556FamilySalonSection{
  padding:clamp(20px,1.8vw,30px) clamp(18px,2vw,36px) clamp(25px,2.1vw,38px) !important;
  background:#081c27 !important;
}
.r556FamilyFeed .r497FamilyOfficialSection.isNewest,
.r556FamilyFeed .r556FamilySalonSection{
  border-top:0 !important;
  background:#0a202b !important;
}
.r556FamilyRailNav{
  margin-top:14px !important;
}
.r556FamilyRailNav a.isActive{
  border-color:rgba(64,208,207,.42) !important;
  background:rgba(64,208,207,.11) !important;
  color:#fff !important;
  box-shadow:inset 3px 0 0 #40d0cf !important;
}
.r556FamilyRailNav a.isActive b{color:#ff9b61 !important}

/* Les filtres gardent le même ordre/format compact : Thème → Pays → Ville. */
html body .r556FamilyFeed .r554UniverseFilters{
  grid-template-columns:minmax(220px,280px) minmax(165px,190px) minmax(180px,220px) !important;
  justify-content:start !important;
  width:max-content !important;
  max-width:100% !important;
  gap:10px !important;
}

/* 6. Scroll : le dernier contenu doit pouvoir remonter au-dessus du dock bas. */
html.ethnosConnectedUnified body.isR553UniverseView .memberWorkspace.hasBodyView[data-body-view="houses"],
html.ethnosConnectedUnified body.isR555DiscoveryHub .memberWorkspace.hasBodyView[data-body-view="solidarity"],
html.ethnosConnectedUnified body.isR555DiscoveryHub .memberWorkspace.hasBodyView[data-body-view="culture"]{
  overflow-y:auto !important;
  overscroll-behavior:contain !important;
  scroll-padding-bottom:84px !important;
}
html body .bodyView-houses.r554UniverseHub,
html body .bodyView-familyDiscovery.r556FamilyHub{
  box-sizing:border-box !important;
  padding-bottom:84px !important;
  background:#061822 !important;
}

@media (max-width:1366px){
  .r556FamilyLayout{grid-template-columns:205px minmax(0,1fr) !important}
  html body .r556FamilyFeed .r497FamilyOfficialSection,
  html body .r556FamilyFeed .r556FamilySalonSection{padding:18px 18px 24px !important}
}
@media (max-width:1180px){
  .r556FamilyLayout{grid-template-columns:190px minmax(0,1fr) !important}
  html body .r556FamilyFeed .r554UniverseFilters{
    grid-template-columns:minmax(205px,260px) minmax(160px,180px) minmax(170px,205px) !important;
  }
}
@media (max-width:900px){
  .r556FamilyLayout{grid-template-columns:1fr !important}
  .r556FamilyRail{border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
  .r556FamilyRailPhoto,.r556FamilyRailNote{display:none !important}
  .r556FamilyRailNav{display:flex !important;overflow-x:auto !important}
  .r556FamilyRailNav a{min-width:150px !important}
  html body .r556FamilyFeed .r554UniverseFilters{grid-template-columns:1fr !important;width:100% !important}
  html body .bodyView-houses.r554UniverseHub,
  html body .bodyView-familyDiscovery.r556FamilyHub{padding-bottom:72px !important}
}