/* ========================================================================== */
/* ETHNOS R191 — finition générale : crème, géométrie, cartes et relief 3D   */
/* Base stricte : R190.                                                       */
/* ========================================================================== */

:root{
  --r191-cream-top:var(--r190-cream-top,#fffdf9);
  --r191-cream-bottom:var(--r190-cream-bottom,#eee1d0);
  --r191-cream-line:var(--r190-cream-line,#d8c8b3);
  --r191-cream:linear-gradient(180deg,var(--r191-cream-top) 0%,var(--r191-cream-bottom) 100%);
}

/* -------------------------------------------------------------------------- */
/* 1. Bloc central : son bord gauche suit exactement le bord droit du Tchat. */
/*    Le volet Tchat garde sa largeur propre et le bord droit ne bouge pas.   */
/* -------------------------------------------------------------------------- */
@media (min-width:901px){
  html[data-ethnos-ui="discord-r111"] body.isEthnosHomeView .memberLayout{
    grid-template-columns:var(--r190-map-tab-width,var(--ethnos-context-width)) minmax(0,1fr) !important;
  }
  html[data-ethnos-ui="discord-r111"] body.isEthnosHomeView .memberWorkspace.hasBodyView > .bodyView-homeR180{
    padding-left:0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. Crème officiel : même teinte dans tous les volets explicitement visés. */
/* -------------------------------------------------------------------------- */
html body [data-member-drawer-panel="directory"],
html body [data-member-drawer-panel="reports"],
html body [data-member-drawer-panel="media"],
html body [data-member-drawer-panel="contacts"],
html body [data-member-drawer-panel="favorites"],
html body [data-member-drawer-panel="messages"],
html body [data-member-drawer-panel="trophies"],
html body .memberDirectoryShell,
html body .bodyDrawerShell.bodyReportsDrawer,
html body .bodyDrawerShell.bodyContactsDrawer,
html body .memberFavoritesShell,
html body .memberMediaShell,
html body .memberMessageCenter,
html body .memberMessageDashboard,
html body .memberMessageWorkspace,
html body .memberMessageWorkspaceHost,
html body .memberMessageView,
html body .memberMessageViewGrid,
html body .memberMessageSidebar,
html body .memberMessageMain{
  background-color:var(--r191-cream-top) !important;
  background-image:var(--r191-cream) !important;
}

/* Les enveloppes internes deviennent transparentes : aucun deuxième crème. */
html body .memberDirectoryHeader,
html body .memberDirectoryContent,
html body .memberDirectoryResults,
html body .memberDirectorySection,
html body .memberDirectoryNameForm,
html body .memberDirectoryLocationForm,
html body .bodyReportsDrawer > header,
html body .bodyReportsDrawer > section,
html body .bodyDrawerStats,
html body .bodyReportList,
html body .bodyModerationQueue,
html body .bodyContactsDrawer > header,
html body .bodyContactSearch,
html body .bodyContactGrid,
html body .memberFavoritesShell > header,
html body .memberFavoritesList,
html body .memberMediaShell > header,
html body .memberMediaScroll,
html body .memberMediaPhotosSection,
html body .memberMediaDocumentsSection,
html body .memberMessageDashboardHeader,
html body .memberMessageDashboardCounts,
html body .memberMessageDashboardActions,
html body .memberMessageDashboardSafety,
html body .memberMessageTabs,
html body .memberMessageBody,
html body .memberMessageScroll,
html body .memberMessageList,
html body .memberMessageSidebarHead,
html body .memberMessageMainHead,
html body .memberMessageFooter{
  background-color:transparent !important;
  background-image:none !important;
}

/* Messages / Invitations / Notifications : cartes sur la même référence. */
html body .memberMessageDashboardButton,
html body .memberMessageTab,
html body .memberMessageSubfilters button,
html body .memberInvitationRow,
html body .memberNotificationRow,
html body .memberMessageListItem,
html body .memberMessageEmptyState,
html body .memberMessageRequestNotice,
html body .memberMessageSafetyStrip,
html body .memberMessageSideSection,
html body .memberMessageSideProfile,
html body .memberMessageComposer,
html body .memberMessageNotificationMenu,
html body .memberMessageSecuritySection,
html body .memberMessageRetentionNote,
html body .memberFavoriteSalonRow,
html body .memberMediaBand,
html body .memberDirectoryResult,
html body .bodyContactReferenceBand,
html body .bodyReportList article,
html body .bodyModerationQueue article{
  background-color:var(--r191-cream-top) !important;
  background-image:var(--r191-cream) !important;
  border-color:var(--r191-cream-line) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Deux navigations : tous les boutons utilisent le crème officiel.       */
/* -------------------------------------------------------------------------- */
html body .memberTopNavButton,
html body .memberTopNavButton:nth-child(odd),
html body .memberTopNavButton:nth-child(even),
html body .memberTopNavButton.isActive,
html body #memberWorldDock button,
html body #memberWorldDock button:nth-child(odd),
html body #memberWorldDock button:nth-child(even),
html body #memberWorldDock button.isActive{
  background-color:var(--r191-cream-top) !important;
  background-image:var(--r191-cream) !important;
  border-color:transparent !important;
}
html body .memberTopNavButton:hover,
html body .memberTopNavButton:focus-visible,
html body #memberWorldDock button:hover,
html body #memberWorldDock button:focus-visible{
  background-color:var(--r191-cream-top) !important;
  background-image:var(--r191-cream) !important;
}

/* Libellés longs mieux distribués dans le dock inférieur. */
@media (min-width:901px){
  html body #memberWorldDock{
    grid-template-columns:
      minmax(78px,.72fr)
      minmax(82px,.76fr)
      minmax(165px,1.42fr)
      minmax(150px,1.30fr)
      minmax(84px,.78fr)
      minmax(96px,.88fr)
      minmax(92px,.84fr) !important;
  }
  html body #memberWorldDock button{
    padding-inline:clamp(5px,.55vw,10px) !important;
  }
  html body #memberWorldDock button span{
    white-space:nowrap !important;
    font-size:clamp(9px,.62vw,12px) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 4. Profil, Maps et Tchat : suppression du liseré bleu et relief 3D.       */
/* -------------------------------------------------------------------------- */
html body .memberProfileCompact:not(.isExpanded),
html body .memberMapCard,
html body .r185TchatToggle.r188TchatTabFixed{
  outline:0 !important;
  border-color:rgba(245,138,75,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 4px 0 rgba(1,12,19,.72),
    0 10px 22px rgba(0,0,0,.24) !important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease !important;
}
html body .memberProfileCompact:not(.isExpanded):hover,
html body .memberProfileCompact:not(.isExpanded):focus-visible,
html body .memberMapCard:hover,
html body .memberMapCard:focus-visible,
html body .r185TchatToggle.r188TchatTabFixed:hover,
html body .r185TchatToggle.r188TchatTabFixed:focus-visible{
  outline:0 !important;
  border-color:rgba(245,138,75,.34) !important;
  transform:translateY(-3px) !important;
  filter:brightness(1.045) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    0 7px 0 rgba(1,12,19,.76),
    0 17px 30px rgba(0,0,0,.32) !important;
}
html body .memberProfileCompact:not(.isExpanded):active,
html body .memberMapCard:active,
html body .r185TchatToggle.r188TchatTabFixed:active{
  transform:translateY(1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 2px 0 rgba(1,12,19,.78),
    0 7px 15px rgba(0,0,0,.26) !important;
}

/* Pseudonyme moins imposant dans l’onglet Profil uniquement. */
html body .memberProfileCompact:not(.isExpanded) .memberIdentity h2{
  font-size:clamp(17px,1.16vw,24px) !important;
  line-height:.96 !important;
}

/* -------------------------------------------------------------------------- */
/* 5. Cinq cartes basses : médias propres, fondu réduit, texte en bas gauche.*/
/* -------------------------------------------------------------------------- */
html body .r183MetricCard{
  box-sizing:border-box !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  overflow:hidden !important;
  background-clip:padding-box !important;
  padding:15px 16px 14px !important;
}
html body .r183MetricCard::after{
  background:
    linear-gradient(90deg,rgba(3,22,33,.76) 0%,rgba(3,24,35,.37) 58%,rgba(3,18,28,.39) 100%),
    linear-gradient(180deg,rgba(3,19,29,.01) 0%,rgba(3,19,29,.43) 100%) !important;
}
html body .r183MetricCard .r184MetricMedia{
  inset:1px !important;
  width:calc(100% - 2px) !important;
  height:calc(100% - 2px) !important;
  max-width:none !important;
  max-height:none !important;
  border-radius:10px !important;
  object-fit:cover !important;
  transform:scale(1.045) translateZ(0) !important;
  transform-origin:center !important;
  backface-visibility:hidden !important;
}
html body .r183MetricEvents .r184MetricMedia{object-position:46% 45% !important}
html body .r183MetricUniverses .r184MetricMedia{object-position:66% 47% !important}
html body .r183MetricEvents{background-position:46% 45% !important}
html body .r183MetricSolidarity{background-position:52% 40% !important}
html body .r183MetricUniverses{background-position:66% 47% !important}
html body .r183MetricLive{background-position:58% 42% !important}
html body .r185MetricStreaming{background-position:50% 46% !important}

html body .r183MetricCard span{
  margin:0 0 5px !important;
  font-size:clamp(9px,.64vw,12px) !important;
  line-height:1.05 !important;
}
html body .r183MetricCard strong{
  margin:0 0 5px !important;
  font-size:clamp(30px,2.1vw,43px) !important;
  line-height:.92 !important;
}
html body .r183MetricCard p{
  margin:0 !important;
  color:#eef4f3 !important;
  font-size:clamp(9px,.64vw,12px) !important;
  font-weight:600 !important;
  line-height:1.22 !important;
}
html body .r185MetricStreaming strong{
  margin:0 0 6px !important;
  font-size:clamp(16px,1.18vw,23px) !important;
  line-height:.98 !important;
}
html body .r185MetricStreaming small{
  margin:5px 0 0 !important;
  font-size:clamp(8px,.58vw,11px) !important;
  line-height:1.16 !important;
}

@media (max-height:820px) and (min-width:901px){
  html body .r183MetricCard{padding:10px 12px 9px !important}
  html body .r183MetricCard span{margin-bottom:3px !important;font-size:9px !important}
  html body .r183MetricCard strong{margin-bottom:3px !important;font-size:clamp(24px,1.75vw,34px) !important}
  html body .r183MetricCard p{font-size:9px !important}
  html body .r185MetricStreaming strong{font-size:clamp(14px,1vw,18px) !important}
  html body .r185MetricStreaming small{font-size:8px !important;margin-top:3px !important}
}

@media (prefers-reduced-motion:reduce){
  html body .memberProfileCompact:not(.isExpanded),
  html body .memberMapCard,
  html body .r185TchatToggle.r188TchatTabFixed,
  html body .r183MetricCard .r184MetricMedia{transition:none !important}
}