/* ========================================================================== */
/* ETHNOS R612 — hubs communautaires : couche active de géométrie/UX.       */
/* Référence : Événements validé.                                             */
/* Hero bleu profond -> zone outils ardoise pleine largeur -> résultats deep. */
/* Les sélecteurs Pays gardent les drapeaux mais reprennent le pavé/chevron   */
/* standard déjà utilisé par les autres selects du site.                      */
/* ========================================================================== */

:root{
  --r612-deep:#061822;
  --r612-tools:#0a202b;
  --r612-control:#092535;
  --r612-control-pad:#0b3143;
  --r612-control-pad-end:#082536;
}

/* -------------------------------------------------------------------------- */
/* 1. PAYS — même bouton visuel que les selects standards, drapeau conservé. */
/* -------------------------------------------------------------------------- */
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelectButton,
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .realFlagSelectButton,
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed .realFlagSelectButton,
html body .bodyView-help.r562HelpHub .r562HelpFilters .realFlagSelectButton,
.bodyModal:has(.r508CommunityForm) .r508CommunityForm .realFlagSelectButton{
  background-color:var(--r612-control) !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,var(--r612-control-pad) 0%,var(--r612-control-pad-end) 100%) !important;
  background-repeat:no-repeat,no-repeat !important;
  background-position:right 14px center,right center !important;
  background-size:12px 8px,40px 100% !important;
  padding-right:42px !important;
}
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelectButton::after,
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .realFlagSelectButton::after,
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed .realFlagSelectButton::after,
html body .bodyView-help.r562HelpHub .r562HelpFilters .realFlagSelectButton::after,
.bodyModal:has(.r508CommunityForm) .r508CommunityForm .realFlagSelectButton::after{
  content:none !important;
  display:none !important;
}

/* Géométrie des contrôles déjà validée sur les hubs. */
html body .r554UniverseFeed .r554UniverseFilters .realFlagSelect,
html body .r555FamilyFeed .r554UniverseFilters .realFlagSelect{
  width:100% !important;
  min-width:0 !important;
}
html body .r554UniverseFeed .r554UniverseFilters .realFlagSelectButton,
html body .r555FamilyFeed .r554UniverseFilters .realFlagSelectButton{
  width:100% !important;
  height:34px !important;
  min-height:34px !important;
  padding-left:10px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:9px !important;
  color:#dfe9ea !important;
  font-size:10px !important;
}
html body .r554UniverseFeed .r554UniverseFilters .realFlagSelectButton img,
html body .r555FamilyFeed .r554UniverseFilters .realFlagSelectButton img{
  width:22px !important;
  height:15px !important;
}
html body .r554UniverseFeed .r554UniverseFilters .realFlagSelectMenu,
html body .r555FamilyFeed .r554UniverseFilters .realFlagSelectMenu{
  min-width:100% !important;
}
html body .r554UniverseFeed .r554UniverseFilters .realFlagSelectOption,
html body .r555FamilyFeed .r554UniverseFilters .realFlagSelectOption{
  min-height:34px !important;
  font-size:10px !important;
}

/* Événements : conserver le layout validé R608/R609. */
html body .bodyView-events.r561EventsHub .r608EventsControls{
  display:grid !important;
  grid-template-columns:max-content max-content max-content !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:clamp(28px,2.4vw,48px) !important;
  row-gap:12px !important;
}
html body .bodyView-events.r561EventsHub .r605EventsDiscovery{align-self:center !important}
html body .bodyView-events.r561EventsHub .r605EventsTitleLine{display:block !important;width:auto !important}
html body .bodyView-events.r561EventsHub .r608EventsPrimaryAction{
  display:flex !important;align-items:center !important;justify-content:center !important;align-self:center !important;
  min-width:0 !important;padding-inline:clamp(4px,.45vw,10px) !important;
}
html body .bodyView-events.r561EventsHub .r608EventsPrimaryAction > .ethnosActionOrange{
  min-height:40px !important;margin:0 !important;padding-inline:clamp(16px,1.2vw,24px) !important;white-space:nowrap !important;
}
html body .bodyView-events.r561EventsHub .r605EventsFilters{justify-self:start !important;align-self:center !important}
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelect{width:100% !important;min-width:0 !important}
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelectButton{
  width:100% !important;height:36px !important;min-height:36px !important;padding-left:9px !important;
  border-color:rgba(190,226,231,.14) !important;border-radius:9px !important;color:#d8e4e5 !important;font-size:9px !important;
}
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelectButton img{width:22px !important;height:15px !important}
html body .bodyView-events.r561EventsHub .r605EventsFilters .realFlagSelectOption{font-size:10px !important}
.bodyModal:has(.r508CommunityForm) .r508CommunityForm .realFlagSelect{width:100% !important;min-width:0 !important}
.bodyModal:has(.r508CommunityForm) .r508CommunityForm .realFlagSelectButton{
  min-height:38px !important;height:38px !important;border-color:rgba(190,226,231,.14) !important;color:#d8e4e5 !important;font-size:10px !important;
}

/* -------------------------------------------------------------------------- */
/* 2. UNIVERS — la bande ardoise appartient à la SECTION entière.            */
/*    Le strip retrouve sa hauteur naturelle : aucune carte n'est étirée.     */
/* -------------------------------------------------------------------------- */
html body .bodyView-houses.r554UniverseHub,
html body .bodyView-houses.r554UniverseHub > .bodyViewContent,
html body .bodyView-houses.r554UniverseHub .r554UniverseLayout,
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed{
  background:var(--r612-deep) !important;
  background-image:none !important;
}
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .r492UniverseSection{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--r612-tools) !important;
  box-shadow:none !important;
}
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .r492UniverseSection > header{
  margin:0 !important;
  padding:clamp(20px,1.8vw,30px) clamp(18px,2vw,36px) 12px !important;
  background:transparent !important;
  border:0 !important;
}
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .r492UniverseSection > .r554UniverseFilters{
  margin:0 clamp(18px,2vw,36px) clamp(18px,1.55vw,26px) !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
html body .bodyView-houses.r554UniverseHub .r554UniverseFeed .r492UniverseSection > .r492UniverseStrip{
  margin:0 !important;
  padding:clamp(18px,1.6vw,26px) clamp(18px,2vw,36px) clamp(26px,2vw,38px) !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  align-items:start !important;
  align-content:start !important;
  background:var(--r612-deep) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. CULTURES & PEUPLES + SOLIDARITÉ — même règle, sans toucher aux cartes. */
/* -------------------------------------------------------------------------- */
html body .bodyView-familyDiscovery.r556FamilyHub,
html body .bodyView-familyDiscovery.r556FamilyHub > .bodyViewContent,
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyLayout,
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed{
  background:var(--r612-deep) !important;
  background-image:none !important;
}
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > [data-r556-family-section]{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--r612-tools) !important;
  box-shadow:none !important;
}
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > [data-r556-family-section] > header{
  margin:0 !important;
  padding:clamp(20px,1.8vw,30px) clamp(18px,2vw,36px) 12px !important;
  background:transparent !important;
  border:0 !important;
}
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > [data-r556-family-section] > .r554UniverseFilters{
  margin:0 clamp(18px,2vw,36px) clamp(18px,1.55vw,26px) !important;
  padding:0 !important;
  box-sizing:border-box !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
}
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > [data-r556-family-section] > .r492UniverseStrip,
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > [data-r556-family-section] > .r497FamilySalonGrid{
  margin:0 !important;
  padding:clamp(18px,1.6vw,26px) clamp(18px,2vw,36px) clamp(26px,2vw,38px) !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  align-items:start !important;
  align-content:start !important;
  background:var(--r612-deep) !important;
}
html body .bodyView-familyDiscovery.r556FamilyHub .r556FamilyFeed > .r556FamilySalonSection > .r495UniverseMore{
  margin:0 !important;
  padding:0 clamp(18px,2vw,36px) 120px !important;
  background:var(--r612-deep) !important;
}
html body .r608DiscoveryDivider{display:none !important}

/* Solidarité est déjà une famille : catégorie canonique, puis pays / ville. */
html body .bodyView-familyDiscovery--solidarity .r608SolidarityUniverseFilters{
  grid-template-columns:minmax(165px,190px) minmax(180px,220px) !important;
}
html body .bodyView-familyDiscovery--solidarity .r555FamilySalonFilters{
  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;
}

/* -------------------------------------------------------------------------- */
/* 4. ENTRAIDE — outils ardoise pleine largeur, demandes sur bleu profond.    */
/* -------------------------------------------------------------------------- */
html.ethnosConnectedUnified body .memberWorkspace.hasBodyView[data-body-view="help"],
html body .bodyView-help.r562HelpHub,
html body .bodyView-help.r562HelpHub > .bodyViewContent.r562HelpContent{
  background:var(--r612-deep) !important;
  background-image:none !important;
}
html body .bodyView-help.r562HelpHub > .bodyViewContent.r562HelpContent{
  display:block !important;
  min-height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
html body .bodyView-help.r562HelpHub .r508HelpGrid{
  margin:0 !important;
  padding:clamp(18px,1.6vw,28px) clamp(18px,2vw,36px) 120px !important;
  box-sizing:border-box !important;
  min-height:0 !important;
  align-items:start !important;
  align-content:start !important;
  background:var(--r612-deep) !important;
}

/* -------------------------------------------------------------------------- */
/* 5. Formats Ethnos — conserver la logique R608 déjà validée sur Événements. */
/* -------------------------------------------------------------------------- */
@media (max-width:1707px){
  html body .bodyView-events.r561EventsHub .r608EventsControls{column-gap:24px !important}
  html body .bodyView-events.r561EventsHub .r608EventsPrimaryAction > .ethnosActionOrange{padding-inline:16px !important}
}
@media (max-width:1366px){
  html body .bodyView-events.r561EventsHub .r608EventsControls{column-gap:18px !important}
  html body .bodyView-events.r561EventsHub .r608EventsPrimaryAction{padding-inline:2px !important}
}
@media (max-width:1180px){
  html body .bodyView-events.r561EventsHub .r608EventsControls{grid-template-columns:max-content max-content !important;align-items:center !important}
  html body .bodyView-events.r561EventsHub .r605EventsFilters{grid-column:1 / -1 !important;width:100% !important}
}
@media (max-width:760px){
  html body .bodyView-events.r561EventsHub .r608EventsControls{grid-template-columns:1fr !important;align-items:start !important}
  html body .bodyView-events.r561EventsHub .r608EventsPrimaryAction{justify-content:flex-start !important;padding:0 !important}
  html body .bodyView-familyDiscovery--solidarity .r608SolidarityUniverseFilters,
  html body .bodyView-familyDiscovery--solidarity .r555FamilySalonFilters{grid-template-columns:1fr !important;width:100% !important}
}


/* ========================================================================== */
/* 6. R612 — ENTRAIDE : même logique compacte que la page Événements.        */
/* ========================================================================== */
html body .bodyView-help.r562HelpHub .r612HelpControls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) max-content !important;
  align-items:center !important;
  justify-content:stretch !important;
  column-gap:clamp(18px,2vw,34px) !important;
  row-gap:16px !important;
  width:100% !important;
  margin:0 !important;
  padding:clamp(18px,1.7vw,28px) clamp(18px,2vw,36px) !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:0 !important;
  background:var(--r612-tools) !important;
  box-shadow:none !important;
}
html body .bodyView-help.r562HelpHub .r612HelpDiscovery{
  min-width:0 !important;
  align-self:center !important;
}
html body .bodyView-help.r562HelpHub .r612HelpDiscovery > strong{
  display:block !important;
  margin:0 !important;
  color:#fff9f2 !important;
  font-family:Fraunces,Georgia,serif !important;
  font-size:clamp(25px,1.65vw,34px) !important;
  font-weight:500 !important;
  line-height:1.08 !important;
}
html body .bodyView-help.r562HelpHub .r612HelpDiscovery > p{
  max-width:620px !important;
  margin:7px 0 0 !important;
  color:#8198a0 !important;
  font:500 clamp(10px,.7vw,12px)/1.45 Inter,"Segoe UI",Arial,sans-serif !important;
}
html body .bodyView-help.r562HelpHub .r612HelpPrimaryAction{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:center !important;
  min-width:0 !important;
}
html body .bodyView-help.r562HelpHub .r612HelpPrimaryAction > .ethnosActionOrange{
  min-height:42px !important;
  margin:0 !important;
  padding:0 clamp(16px,1.15vw,24px) !important;
  white-space:nowrap !important;
  font-size:11px !important;
}
html body .bodyView-help.r562HelpHub .r612HelpFilters{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
  justify-content:stretch !important;
  align-items:end !important;
  justify-self:stretch !important;
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body .bodyView-help.r562HelpHub .r612HelpFilters label{
  min-width:0 !important;
  width:100% !important;
}
html body .bodyView-help.r562HelpHub .r612HelpFilters :is(input,select,.realFlagSelectButton){
  width:100% !important;
  min-width:0 !important;
  min-height:36px !important;
  height:36px !important;
  font-size:10px !important;
}
html body .bodyView-help.r562HelpHub .r612HelpFilters .realFlagSelect{
  width:100% !important;
  min-width:0 !important;
}
html body .bodyView-help.r562HelpHub .r508HelpGrid{
  width:100% !important;
  min-height:clamp(280px,46vh,720px) !important;
  background:var(--r612-deep) !important;
}
/* R717 — une demande unique reste calée à gauche. Dès qu'il y en a
   plusieurs, la grille historique reprend exactement son fonctionnement. */
html body .bodyView-help.r562HelpHub .r508HelpGrid.r717HelpSingle > .r508HelpCard{
  grid-column:1 / 2 !important;
  justify-self:start !important;
}
@media (max-width:760px){
  html body .bodyView-help.r562HelpHub .r508HelpGrid.r717HelpSingle > .r508HelpCard{
    grid-column:auto !important;
    width:100% !important;
  }
}

/* R717 — la localisation utile doit se lire avant les détails de la carte. */
html body .bodyView-help.r562HelpHub .r717HelpLocation{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  flex-wrap:wrap !important;
}
html body .bodyView-help.r562HelpHub .r717HelpLocationLabel{
  color:#78919a !important;
  font-size:9px !important;
  font-weight:600 !important;
}
html body .bodyView-help.r562HelpHub .r717HelpLocationValue{
  color:#fff !important;
  font-size:clamp(12px,.72vw,15px) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
}

/* Le créateur est une information communautaire de premier rang. */
html body .bodyView-help.r562HelpHub .bodySolidarityCard .r569CommunityCreatorLink{
  display:inline-block !important;
  max-width:100% !important;
  color:#f7f1e8 !important;
  font-family:Fraunces,Georgia,serif !important;
  font-size:22px !important;
  font-weight:600 !important;
  line-height:1.12 !important;
  overflow-wrap:anywhere !important;
}
html body .bodyView-help.r562HelpHub .bodySolidarityCard .r508HelpMeta{
  align-items:center !important;
  gap:8px 12px !important;
}

/* ========================================================================== */
/* 7. R612 — VOLET SALONS FINAL : bandes bord à bord comme les niveaux avant. */
/* ========================================================================== */
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonDrawerBody{
  padding:0 !important;
  background:#f8f0e4 !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultList{
  display:grid !important;
  gap:0 !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultCard{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  padding:14px 12px !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  border-bottom:1px solid rgba(7,26,57,.13) !important;
  border-radius:0 !important;
  background:#fff8ee !important;
  color:#071a39 !important;
  box-shadow:none !important;
  transform:none !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultCard:nth-child(even){
  background:#f3e7d6 !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultCard:hover,
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultCard:focus-visible{
  background:#f9dfc9 !important;
  outline:none !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultCard h3{
  color:#071a39 !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultLocation{
  color:#536879 !important;
}
html body.isTchatDrawerOpen .memberWorkspace > .salonDrawerStage .salonDrawerPanel--final .salonResultMeta{
  color:#5f7480 !important;
}

/* ========================================================================== */
/* 8. R612 — transition Profil -> Messages atomique, aucun volet fantôme.     */
/* ========================================================================== */
html body.ethnosDrawerSwitchInstantR612 :is(
  .memberNavDrawer,
  .memberNavDrawerLayer,
  .memberProfileEditorDrawer,
  .memberProfileEditorPanel,
  [data-member-drawer-panel]
){
  transition:none !important;
  animation:none !important;
}

/* ========================================================================== */
/* 9. Responsive : les commandes restent compactes et à gauche.              */
/* ========================================================================== */
@media (max-width:1707px){
  html body .bodyView-help.r562HelpHub .r612HelpControls{
    grid-template-columns:minmax(0,1fr) max-content !important;
    column-gap:24px !important;
  }
  html body .bodyView-help.r562HelpHub .r612HelpFilters{
    grid-column:1 / -1 !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }
}
@media (max-width:1180px){
  html body .bodyView-help.r562HelpHub .r612HelpControls{
    grid-template-columns:1fr max-content !important;
  }
  html body .bodyView-help.r562HelpHub .r612HelpFilters{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100% !important;
  }
  html body .bodyView-help.r562HelpHub .r612HelpFilters .isSearch{grid-column:span 2 !important}
}
@media (max-width:760px){
  html body .bodyView-help.r562HelpHub .r612HelpControls{grid-template-columns:1fr !important}
  html body .bodyView-help.r562HelpHub .r612HelpPrimaryAction{justify-content:flex-start !important}
  html body .bodyView-help.r562HelpHub .r612HelpFilters{grid-template-columns:1fr !important;width:100% !important}
  html body .bodyView-help.r562HelpHub .r612HelpFilters .isSearch{grid-column:auto !important}
}