/* ========================================================================== */
/* ETHNOS R555 — finitions Univers + hubs Solidarité / Cultures & peuples    */
/* Base figée : R554. Périmètre : houses, solidarity, culture uniquement.    */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Univers des créateurs — première photo non rognée + contenu carte haut. */
/* -------------------------------------------------------------------------- */
.r554UniversePhotoMosaic .isOrigin{
  background-image:url('../assets/images/r555-creators/creator-origin-crop.webp') !important;
  background-position:center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-color:#061822 !important;
}

/* R495/R496 imposaient encore un padding-top hérité à l'identité de carte.   */
html body .r554UniverseFeed .r554UniverseCard .r494UniverseCardIdentity{
  padding-top:0 !important;
  margin:0 !important;
  align-self:start !important;
}
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody{
  justify-content:flex-start !important;
}
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody header{
  align-items:start !important;
  margin:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseLogo{
  align-self:start !important;
  margin-top:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseDescription{
  margin-top:4px !important;
}
html body .r554UniverseFeed .r554UniverseCard .r492UniverseThemes{
  margin-top:0 !important;
}
html body .r554UniverseFeed .r554UniverseCard .r551UniverseCardBody footer{
  margin-top:auto !important;
}

/* Sur petits formats, on réduit le bandeau plutôt que d'augmenter le crop. */
@media (max-width:1366px){
  html body .bodyView-houses.r553UniverseHub .bodyViewHeader.r553UniverseHero{
    min-height:210px !important;
  }
}
@media (max-width:1180px){
  html body .bodyView-houses.r553UniverseHub .bodyViewHeader.r553UniverseHero{
    min-height:195px !important;
  }
}
@media (max-width:900px){
  html body .bodyView-houses.r553UniverseHub .bodyViewHeader.r553UniverseHero{
    min-height:390px !important;
  }
  html body .bodyView-houses.r553UniverseHub .bodyViewHeader.r553UniverseHero > div:first-child{
    min-height:205px !important;
  }
  .r553UniverseHeroAside,
  .r553UniversePhotoMosaic{
    min-height:185px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. Solidarité / Cultures & peuples — pleine surface, comme Univers.        */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified body.isR555DiscoveryHub .memberLayout{
  grid-template-columns:minmax(0,1fr) !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
}
html.ethnosConnectedUnified body.isR555DiscoveryHub .memberWorkspace.hasBodyView[data-body-view="solidarity"],
html.ethnosConnectedUnified body.isR555DiscoveryHub .memberWorkspace.hasBodyView[data-body-view="culture"]{
  grid-column:1 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  background:#061822 !important;
  box-shadow:none !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub{
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#061822 !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub > .bodyViewContent{
  margin:0 !important;
  padding:0 !important;
  background:#061822 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Bandeau famille — même typo commerciale + quatre photos, aucun fond.    */
/* -------------------------------------------------------------------------- */
html body .memberWorkspace.hasBodyView .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero,
html body .memberWorkspace.hasSalonContent.hasBodyView .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero,
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero{
  position:relative !important;
  isolation:isolate !important;
  display:grid !important;
  grid-template-columns:minmax(430px,.82fr) minmax(650px,1.18fr) !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  min-height:clamp(235px,18.5vw,318px) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:#061822 !important;
  background-image:none !important;
  box-shadow:none !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero::before,
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero::after{
  display:none !important;
  content:none !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero > div:first-child{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:stretch !important;
  max-width:none !important;
  padding:clamp(28px,3vw,54px) clamp(28px,4vw,72px) !important;
  background:linear-gradient(180deg,#071f2d 0%,#061822 100%) !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero > div:first-child > span{
  display:none !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero h1{
  max-width:760px !important;
  margin:0 !important;
  color:#fff9f2 !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(34px,2.7vw,58px) !important;
  font-weight:850 !important;
  line-height:1.02 !important;
  letter-spacing:-.045em !important;
  text-wrap:balance !important;
  text-shadow:none !important;
}
html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero p{
  max-width:690px !important;
  margin:clamp(12px,1.1vw,18px) 0 0 !important;
  color:#b9c9cd !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(11px,.82vw,15px) !important;
  font-weight:500 !important;
  line-height:1.45 !important;
  text-shadow:none !important;
}
.r555FamilyHeroAside{
  position:relative !important;
  z-index:1 !important;
  min-width:0 !important;
  min-height:100% !important;
  background:#061822 !important;
}
.r555FamilyPhotoMosaic{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:3px !important;
  background:#061822 !important;
}
.r555FamilyPhotoMosaic figure{
  display:block !important;
  min-width:0 !important;
  margin:0 !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  filter:saturate(.96) contrast(1.025) !important;
}

/* Solidarité — ordre demandé : mains / femme rouge / colis / forêt. */
.r555FamilyPhotoMosaic--solidarity .isOne{
  background-image:url('../assets/images/home-r183/solidarity-hands-r507.webp') !important;
  background-position:center center !important;
}
.r555FamilyPhotoMosaic--solidarity .isTwo{
  background-image:url('../assets/images/r555-solidarity/woman-red.jpg') !important;
  background-position:center 48% !important;
}
.r555FamilyPhotoMosaic--solidarity .isThree{
  background-image:url('../assets/images/r555-solidarity/donation-sorting.jpg') !important;
  background-position:center 55% !important;
}
.r555FamilyPhotoMosaic--solidarity .isFour{
  background-image:url('../assets/images/r555-solidarity/forest-volunteers.jpg') !important;
  background-position:center 52% !important;
}

/* Cultures & peuples — ordre demandé : éventail / duo / olivier / groupe. */
.r555FamilyPhotoMosaic--culture .isOne{
  background-image:url('../assets/images/r555-culture/traditional-fan.jpg') !important;
  background-position:center 42% !important;
}
.r555FamilyPhotoMosaic--culture .isTwo{
  background-image:url('../assets/images/r555-culture/traditional-women.jpg') !important;
  background-position:center 42% !important;
}
.r555FamilyPhotoMosaic--culture .isThree{
  background-image:url('../assets/images/r555-culture/olive-girl.jpg') !important;
  background-position:center center !important;
}
.r555FamilyPhotoMosaic--culture .isFour{
  background-image:url('../assets/images/r555-culture/friends-group.jpg') !important;
  background-position:center center !important;
}

/* -------------------------------------------------------------------------- */
/* 4. Rail vertical famille — recherche + image dédiée.                       */
/* -------------------------------------------------------------------------- */
.r555FamilyLayout{
  display:grid !important;
  grid-template-columns:clamp(220px,16vw,285px) minmax(0,1fr) !important;
  min-height:calc(100% - clamp(235px,18.5vw,318px)) !important;
  background:#061822 !important;
}
.r555FamilyRail{
  position:relative !important;
  min-width:0 !important;
  padding:clamp(20px,1.8vw,32px) clamp(15px,1.45vw,24px) !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg,#071f2d 0%,#061822 100%) !important;
  color:#eaf0ef !important;
}
.r555FamilyRailHead > span{
  color:#40d0cf !important;
  font:850 8px/1 Inter,"Segoe UI",Arial,sans-serif !important;
  letter-spacing:.14em !important;
}
.r555FamilyRailHead h2{
  margin:8px 0 8px !important;
  color:#fff9f2 !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(23px,1.55vw,31px) !important;
  font-weight:800 !important;
  line-height:1.02 !important;
  letter-spacing:-.035em !important;
}
.r555FamilyRailHead p{
  margin:0 !important;
  color:#9fb3b8 !important;
  font-size:10px !important;
  line-height:1.45 !important;
}
.r555FamilyRailSearch{margin-top:20px !important}
.r555FamilyRailPhoto{
  width:100% !important;
  height:clamp(150px,14vw,235px) !important;
  margin:16px 0 0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  overflow:hidden !important;
}
.r555FamilyRailPhoto--solidarity{
  background-image:url('../assets/images/r555-solidarity/aid-truck.jpg') !important;
  background-position:center center !important;
}
.r555FamilyRailPhoto--culture{
  background-image:url('../assets/images/r555-culture/hands-linked.jpg') !important;
  background-position:center 58% !important;
}
.r555FamilyRailNote{
  margin-top:0 !important;
  border-left-color:#f08b50 !important;
  color:#9fb3b8 !important;
}

/* -------------------------------------------------------------------------- */
/* 5. Zone centrale famille — sombre, dense, même logique de cartes/filtres.  */
/* -------------------------------------------------------------------------- */
.r555FamilyFeed{
  min-width:0 !important;
  background:#081c27 !important;
  color:#edf4f4 !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection,
html body .r555FamilyFeed .r555FamilySalonSection{
  margin:0 !important;
  padding:clamp(20px,1.8vw,30px) clamp(18px,2vw,36px) clamp(25px,2.1vw,38px) !important;
  border:0 !important;
  border-radius:0 !important;
  background:#081c27 !important;
  color:#edf4f4 !important;
  box-shadow:none !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection.isNewest,
html body .r555FamilyFeed .r555FamilySalonSection{
  border-top:1px solid rgba(255,255,255,.075) !important;
  background:#0a202b !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection > header,
html body .r555FamilyFeed .r555FamilySalonSection > header{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:14px !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection > header span,
html body .r555FamilyFeed .r555FamilySalonSection > header span{
  color:#46d0cf !important;
  font-size:9px !important;
  font-weight:850 !important;
  letter-spacing:.14em !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection.isNewest > header span,
html body .r555FamilyFeed .r555FamilySalonSection > header span{
  color:#f08b50 !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection > header h2,
html body .r555FamilyFeed .r555FamilySalonSection > header h2{
  margin:5px 0 0 !important;
  color:#fff9f2 !important;
  font-size:clamp(25px,1.7vw,34px) !important;
  letter-spacing:-.025em !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection > header p,
html body .r555FamilyFeed .r555FamilySalonSection > header p{
  margin:3px 0 0 !important;
  color:#92a8ae !important;
  font-size:clamp(10px,.68vw,12px) !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection > header > strong,
html body .r555FamilyFeed .r555FamilySalonSection > header > strong{
  color:#8fa6ad !important;
  font-size:10px !important;
}
html body .r555FamilyFeed .r492UniverseFilters{
  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;
  margin-bottom:13px !important;
}
html body .r555FamilyFeed .r492UniverseFilters label{
  min-width:0 !important;
  width:100% !important;
}
html body .r555FamilyFeed .r492UniverseFilters label > span{
  color:#839ba2 !important;
  font-size:8px !important;
}
html body .r555FamilyFeed .r492UniverseFilters select{
  width:100% !important;
  height:34px !important;
  padding-inline:10px 28px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:9px !important;
  background:#0d2834 !important;
  color:#dfe9ea !important;
  font-size:10px !important;
}
html body .r555FamilyFeed .r492UniverseFilters select:focus{
  border-color:rgba(64,208,207,.45) !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(64,208,207,.08) !important;
}
.r555FamilyDivider{
  height:1px !important;
  margin:0 !important;
  background:rgba(255,255,255,.06) !important;
}
.r555FamilyDivider span{display:none !important}

/* Neutralise les vieux décalages de cartes R497 et réutilise la géométrie R554. */
html body .r555FamilyFeed .r497FamilyOfficialSection .r494UniverseCardIdentity{
  padding-top:0 !important;
  margin:0 !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection .r492UniverseCardBody header{
  margin-top:0 !important;
  align-items:start !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection .r492UniverseCardBanner{
  height:100% !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection .r492UniverseCardBody{
  padding:8px 10px 9px !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection .r492UniverseDescription{
  min-height:0 !important;
  margin:5px 0 5px !important;
}
html body .r555FamilyFeed .r497FamilyOfficialSection .r492UniverseCardBody footer{
  margin-top:auto !important;
  padding-top:6px !important;
  border-top:0 !important;
}

/* Les salons restent leur composant réel, mais leur surface suit le hub sombre. */
html body .r555FamilyFeed .r497FamilySalonGrid{
  gap:10px !important;
}
html body .r555FamilyFeed .r497FamilySalonCard{
  border-color:rgba(255,255,255,.09) !important;
  background:#0d2834 !important;
  color:#dfe9ea !important;
  box-shadow:0 4px 12px rgba(0,0,0,.14) !important;
}

/* -------------------------------------------------------------------------- */
/* 6. Responsive ciblé.                                                       */
/* -------------------------------------------------------------------------- */
@media (max-width:1707px){
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero{
    grid-template-columns:minmax(400px,.82fr) minmax(570px,1.18fr) !important;
    min-height:250px !important;
  }
  .r555FamilyLayout{grid-template-columns:220px minmax(0,1fr) !important}
  html body .r555FamilyFeed .r497FamilyOfficialSection,
  html body .r555FamilyFeed .r555FamilySalonSection{padding:20px 22px 26px !important}
}
@media (max-width:1366px){
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero{
    grid-template-columns:minmax(390px,.84fr) minmax(520px,1.16fr) !important;
    min-height:210px !important;
  }
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero > div:first-child{padding:24px 30px !important}
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero h1{font-size:34px !important}
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero p{font-size:11px !important}
  .r555FamilyLayout{grid-template-columns:205px minmax(0,1fr) !important}
  .r555FamilyRail{padding:18px 13px !important}
  .r555FamilyRailPhoto{height:130px !important}
  html body .r555FamilyFeed .r497FamilyOfficialSection,
  html body .r555FamilyFeed .r555FamilySalonSection{padding:18px 18px 24px !important}
}
@media (max-width:1180px){
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero{
    grid-template-columns:1fr 1.25fr !important;
    min-height:195px !important;
  }
  .r555FamilyLayout{grid-template-columns:190px minmax(0,1fr) !important}
}
@media (max-width:900px){
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero{
    grid-template-columns:1fr !important;
    min-height:390px !important;
  }
  html body .bodyView-familyDiscovery.r555FamilyHub .bodyViewHeader.r555FamilyHero > div:first-child{
    min-height:205px !important;
    padding:25px 22px !important;
  }
  .r555FamilyHeroAside{min-height:185px !important}
  .r555FamilyPhotoMosaic{position:relative !important;min-height:185px !important}
  .r555FamilyLayout{grid-template-columns:1fr !important}
  .r555FamilyRail{border-right:0 !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
  .r555FamilyRailPhoto,.r555FamilyRailNote{display:none !important}
  html body .r555FamilyFeed .r492UniverseFilters{grid-template-columns:1fr !important;width:100% !important}
  html body .r555FamilyFeed .r497FamilyOfficialSection > header,
  html body .r555FamilyFeed .r555FamilySalonSection > header{align-items:flex-start !important;flex-direction:column !important}
}