/* ========================================================================== */
/* ETHNOS R561 — Événements bord à bord + finitions profil/culture           */
/* Base figée : R560. Périmètre strict : Events, badge profil, Culture 1-2.  */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. PROFIL BARRE HAUTE — corrections responsives demandées.                */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)
.memberIdentityText > h2[data-member-name]{
  transform:none !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)
.r552OfficialBadge{
  align-self:center !important;
  vertical-align:middle !important;
}
html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)
.r552OfficialBadgeIcon{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

/* 1920×1080 et grands écrans : descendre la ligne pseudo + icônes de 3 px. */
@media (min-width:1900px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded)
  .memberIdentityText > h2[data-member-name]{
    transform:translateY(3px) !important;
  }
}

/* Le badge officiel suit désormais réellement la réduction du pseudo. */
@media (max-width:1707px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText > h2[data-member-name] > .r484OfficialBadge.r552OfficialBadge{
    flex-basis:18px !important;
    width:18px !important;height:18px !important;
    min-width:18px !important;min-height:18px !important;
    max-width:18px !important;max-height:18px !important;
  }
}
@media (max-width:1536px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText > h2[data-member-name] > .r484OfficialBadge.r552OfficialBadge{
    flex-basis:15px !important;
    width:15px !important;height:15px !important;
    min-width:15px !important;min-height:15px !important;
    max-width:15px !important;max-height:15px !important;
  }
}
@media (max-width:1366px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText > h2[data-member-name] > .r484OfficialBadge.r552OfficialBadge{
    flex-basis:13px !important;
    width:13px !important;height:13px !important;
    min-width:13px !important;min-height:13px !important;
    max-width:13px !important;max-height:13px !important;
  }
}
@media (max-width:1280px){
  html.ethnosConnectedUnified .memberRightRail > .memberProfileCompact:not(.isExpanded) .memberIdentityText > h2[data-member-name] > .r484OfficialBadge.r552OfficialBadge{
    flex-basis:12px !important;
    width:12px !important;height:12px !important;
    min-width:12px !important;min-height:12px !important;
    max-width:12px !important;max-height:12px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. CULTURES & PEUPLES — exception validée pour les deux portraits.        */
/* Même hauteur que le bandeau ; largeur réduite ; aucune photo rognée.      */
/* -------------------------------------------------------------------------- */
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture{
  display:flex !important;
  grid-template-columns:none !important;
  align-items:stretch !important;
  gap:3px !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne::after,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo::after{
  display:none !important;
  content:none !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo{
  height:100% !important;
  min-height:0 !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-color:#061822 !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isOne{
  flex:0 0 18.5% !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isTwo{
  flex:0 0 22% !important;
}
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isThree,
html body .bodyView-familyDiscovery--culture.r556FamilyHub
.r555FamilyPhotoMosaic--culture .isFour{
  flex:1 1 0 !important;
  min-width:0 !important;
  height:100% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
/* R559/R560 avaient augmenté la hauteur pour tenter de simuler le dézoom.   */
/* R561 revient au gabarit commun : l'exception porte désormais sur largeur. */
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}
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .r555FamilyPhotoMosaic--culture .isOne{flex-basis:19.5% !important}
  html body .bodyView-familyDiscovery--culture.r556FamilyHub
  .r555FamilyPhotoMosaic--culture .isTwo{flex-basis:23.5% !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}
}

/* -------------------------------------------------------------------------- */
/* 3. PAGE ÉVÉNEMENTS — surface bord à bord comme les nouveaux hubs.          */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified body.isR561EventsView .memberLayout{
  grid-template-columns:minmax(0,1fr) !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
}
html.ethnosConnectedUnified body.isR561EventsView
.memberWorkspace.hasBodyView[data-body-view="events"]{
  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;
  overscroll-behavior:contain !important;
  scroll-padding-bottom:84px !important;
  background:#061822 !important;
  box-shadow:none !important;
}
html body .bodyView-events.r561EventsHub{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 0 84px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#061822 !important;
}

/* Bandeau Événements : même structure/typo que les hubs validés. */
html body .memberWorkspace.hasBodyView .bodyView-events.r561EventsHub
.bodyViewHeader.r561EventsHero,
html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero{
  position:relative !important;
  isolation:isolate !important;
  display:grid !important;
  grid-template-columns:minmax(390px,.78fr) minmax(720px,1.22fr) !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  min-height:clamp(225px,17vw,300px) !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-events.r561EventsHub .bodyViewHeader.r561EventsHero::before,
html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero::after{
  display:none !important;
  content:none !important;
}
html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero > div:first-child{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:stretch !important;
  min-width:0 !important;
  max-width:none !important;
  padding:clamp(26px,2.7vw,50px) clamp(28px,3.7vw,68px) !important;
  background:linear-gradient(180deg,#071f2d 0%,#061822 100%) !important;
}
html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero > div:first-child > span{
  display:none !important;
}
html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero h1{
  max-width:680px !important;
  margin:0 !important;
  color:#fff9f2 !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(32px,2.45vw,54px) !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-events.r561EventsHub .bodyViewHeader.r561EventsHero p{
  max-width:650px !important;
  margin:clamp(11px,1vw,17px) 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;
}
.r561EventsHeroAside{
  position:relative !important;
  min-width:0 !important;
  min-height:100% !important;
  background:#061822 !important;
}
.r561EventsPhotoMosaic{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:3px !important;
  background:#061822 !important;
}
.r561EventsPhotoMosaic figure{
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(.96) contrast(1.025) !important;
}
.r561EventsPhotoMosaic .isOne{background-image:url('../assets/images/r561-events/event-01-convention.jpg') !important;background-position:center center !important}
.r561EventsPhotoMosaic .isTwo{background-image:url('../assets/images/r561-events/event-02-megaphone.jpg') !important;background-position:center center !important}
.r561EventsPhotoMosaic .isThree{background-image:url('../assets/images/r561-events/event-03-march.jpg') !important;background-position:center 42% !important}
.r561EventsPhotoMosaic .isFour{background-image:url('../assets/images/r561-events/event-04-concert.jpg') !important;background-position:center center !important}
.r561EventsPhotoMosaic .isFive{background-image:url('../assets/images/r561-events/event-05-festival.jpg') !important;background-position:center 48% !important}

/* Contenu intérieur : fond continu pleine largeur, marges internes seulement. */
html body .bodyView-events.r561EventsHub > .bodyViewContent.r561EventsContent{
  display:grid !important;
  gap:14px !important;
  align-content:start !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:clamp(18px,1.8vw,30px) clamp(18px,2vw,36px) clamp(28px,2.4vw,42px) !important;
  box-sizing:border-box !important;
  background:#081c27 !important;
}
.r561EventsCount{
  display:block !important;
  margin-top:7px !important;
  color:#748e97 !important;
  font:600 10px/1.25 Inter,"Segoe UI",Arial,sans-serif !important;
}
.r561EventsCount b{color:#40d0cf !important;font-weight:850 !important}

/* Flèches de select : reprendre la vraie flèche du volet Tchat actif. */
html body .bodyView-events.r561EventsHub .r561EventsFilters select,
.bodyModal:has(.r508CommunityForm) .r508CommunityForm select{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:42px !important;
  background-color:#092535 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23f7f2e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(180deg,#0b3143 0%,#082536 100%) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:right 14px center,right center !important;
  background-size:12px 8px,40px 100% !important;
}

@media (max-width:1707px){
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero{min-height:235px !important}
}
@media (max-width:1366px){
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero{
    grid-template-columns:minmax(330px,.76fr) minmax(610px,1.24fr) !important;
    min-height:205px !important;
  }
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero h1{font-size:clamp(28px,2.7vw,38px) !important}
  html body .bodyView-events.r561EventsHub > .bodyViewContent.r561EventsContent{padding:18px !important}
}
@media (max-width:1180px){
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero{
    grid-template-columns:minmax(300px,.72fr) minmax(530px,1.28fr) !important;
    min-height:190px !important;
  }
}
@media (max-width:900px){
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 150px !important;
    min-height:0 !important;
  }
  html body .bodyView-events.r561EventsHub .bodyViewHeader.r561EventsHero > div:first-child{
    min-height:175px !important;
    padding:24px 22px !important;
  }
  .r561EventsHeroAside{min-height:150px !important}
  html body .bodyView-events.r561EventsHub{padding-bottom:72px !important}
}

/* ========================================================================== */
/* 4. R562 — ENTRAIDE : même gabarit de hub que la page Événements R561.     */
/* ========================================================================== */
html.ethnosConnectedUnified body.isR562HelpView .memberLayout{
  grid-template-columns:minmax(0,1fr) !important;
  column-gap:0 !important;
  row-gap:0 !important;
  padding:0 !important;
}
html.ethnosConnectedUnified body.isR562HelpView
.memberWorkspace.hasBodyView[data-body-view="help"]{
  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;
  overscroll-behavior:contain !important;
  scroll-padding-bottom:84px !important;
  background:#061822 !important;
  box-shadow:none !important;
}
html body .bodyView-help.r562HelpHub{
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 0 84px !important;
  border:0 !important;
  border-radius:0 !important;
  background:#061822 !important;
}

html body .memberWorkspace.hasBodyView .bodyView-help.r562HelpHub
.bodyViewHeader.r562HelpHero,
html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero{
  position:relative !important;
  isolation:isolate !important;
  display:grid !important;
  grid-template-columns:minmax(390px,.78fr) minmax(720px,1.22fr) !important;
  align-items:stretch !important;
  gap:0 !important;
  width:100% !important;
  min-height:clamp(225px,17vw,300px) !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-help.r562HelpHub .bodyViewHeader.r562HelpHero::before,
html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero::after{
  display:none !important;
  content:none !important;
}
html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero > div:first-child{
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-self:stretch !important;
  min-width:0 !important;
  max-width:none !important;
  padding:clamp(26px,2.7vw,50px) clamp(28px,3.7vw,68px) !important;
  background:linear-gradient(180deg,#071f2d 0%,#061822 100%) !important;
}
html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero > div:first-child > span{
  display:none !important;
}
html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero h1{
  max-width:680px !important;
  margin:0 !important;
  color:#fff9f2 !important;
  font-family:Inter,"Segoe UI",Arial,sans-serif !important;
  font-size:clamp(32px,2.45vw,54px) !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-help.r562HelpHub .bodyViewHeader.r562HelpHero p{
  max-width:650px !important;
  margin:clamp(11px,1vw,17px) 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;
}
.r562HelpHeroAside{
  position:relative !important;
  min-width:0 !important;
  min-height:100% !important;
  background:#061822 !important;
}
.r562HelpPhotoMosaic{
  position:absolute !important;
  inset:0 !important;
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:3px !important;
  background:#061822 !important;
}
.r562HelpPhotoMosaic figure{
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  filter:saturate(.96) contrast(1.025) !important;
}
.r562HelpPhotoMosaic .isOne{background-image:url('../assets/images/r562-help/help-01-painting.webp') !important;background-position:center 45% !important}
.r562HelpPhotoMosaic .isTwo{background-image:url('../assets/images/r562-help/help-02-garden.webp') !important;background-position:center center !important}
.r562HelpPhotoMosaic .isThree{background-image:url('../assets/images/r562-help/help-03-computer.webp') !important;background-position:center center !important}
.r562HelpPhotoMosaic .isFour{background-image:url('../assets/images/r562-help/help-04-moving.webp') !important;background-position:center center !important}
.r562HelpPhotoMosaic .isFive{background-image:url('../assets/images/r562-help/help-05-paperwork.webp') !important;background-position:center 46% !important}

html body .bodyView-help.r562HelpHub > .bodyViewContent.r562HelpContent{
  display:grid !important;
  gap:14px !important;
  align-content:start !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:clamp(18px,1.8vw,30px) clamp(18px,2vw,36px) clamp(28px,2.4vw,42px) !important;
  box-sizing:border-box !important;
  background:#081c27 !important;
}
.r562HelpCount{
  display:block !important;
  margin-top:7px !important;
  color:#748e97 !important;
  font:600 10px/1.25 Inter,"Segoe UI",Arial,sans-serif !important;
}
.r562HelpCount b{color:#40d0cf !important;font-weight:850 !important}

/* Vraie flèche standard reprise de la source active du volet Tchat. */
html body .bodyView-help.r562HelpHub .r562HelpFilters select{
  -webkit-appearance:none !important;
  appearance:none !important;
  padding-right:42px !important;
  background-color:#092535 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23f7f2e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),linear-gradient(180deg,#0b3143 0%,#082536 100%) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:right 14px center,right center !important;
  background-size:12px 8px,40px 100% !important;
}

@media (max-width:1707px){
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero{min-height:235px !important}
}
@media (max-width:1366px){
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero{
    grid-template-columns:minmax(330px,.76fr) minmax(610px,1.24fr) !important;
    min-height:205px !important;
  }
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero h1{font-size:clamp(28px,2.7vw,38px) !important}
  html body .bodyView-help.r562HelpHub > .bodyViewContent.r562HelpContent{padding:18px !important}
}
@media (max-width:1180px){
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero{
    grid-template-columns:minmax(300px,.72fr) minmax(530px,1.28fr) !important;
    min-height:190px !important;
  }
}
@media (max-width:900px){
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 150px !important;
    min-height:0 !important;
  }
  html body .bodyView-help.r562HelpHub .bodyViewHeader.r562HelpHero > div:first-child{
    min-height:175px !important;
    padding:24px 22px !important;
  }
  .r562HelpHeroAside{min-height:150px !important}
  html body .bodyView-help.r562HelpHub{padding-bottom:72px !important}
}