/* ========================================================================== */
/* ETHNOS R184 — restauration colonne droite + médias du tableau de bord      */
/* Base stricte : R183. Référence géométrique Profil / Maps / volets : R170. */
/* ========================================================================== */

/* La largeur compacte de gauche reste indépendante. La colonne droite reprend
   exactement la cote historique validée jusqu'à R170. */
:root{
  --ethnos-context-width:clamp(250px,17.2vw,330px);
}

@media (max-width:1700px), (max-height:900px){
  :root{
    --ethnos-context-width:clamp(220px,18vw,280px);
  }
}

/* R183 avait forcé Profil et Maps sur la largeur compacte du Tchat. */
html body .memberProfileCompact:not(.isExpanded),
html body .memberMapCard{
  width:var(--ethnos-context-width) !important;
  min-width:var(--ethnos-context-width) !important;
  max-width:var(--ethnos-context-width) !important;
}

/* Le volet complet de profil conserve lui aussi la largeur historique. */
html body .memberProfileCompact.isExpanded{
  width:var(--ethnos-context-width) !important;
  min-width:var(--ethnos-context-width) !important;
  max-width:var(--ethnos-context-width) !important;
}

/* Géométrie exacte de R170 : les volets suivent la variable de contexte et
   conservent l'encoche historique à gauche. */
html[data-ethnos-ui="discord-r111"] body .memberNavDrawerLayer{
  width:calc(var(--ethnos-context-width) - var(--ethnos-drawer-inset,36px)) !important;
}
html body .memberTodaySearchDrawer{
  width:calc(var(--ethnos-context-width) - var(--ethnos-drawer-inset,36px)) !important;
}

/* -------------------------------------------------------------------------- */
/* Médias des quatre repères : même gabarit, même voile bleu nuit.             */
/* -------------------------------------------------------------------------- */
html body .r183MetricCard{
  background-color:#052130 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
}
html body .r183MetricCard::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(3,22,33,.93) 0%,rgba(3,24,35,.74) 54%,rgba(3,18,28,.58) 100%),
    linear-gradient(180deg,rgba(3,19,29,.06) 0%,rgba(3,19,29,.72) 100%) !important;
}
html body .r183MetricCard > *{
  position:relative !important;
  z-index:2 !important;
}
html body .r184MetricMedia{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border:0 !important;
  opacity:.92 !important;
  pointer-events:none !important;
}

html body .r183MetricEvents{
  background-image:url('../assets/images/home-r184/events-poster.webp') !important;
}
html body .r183MetricUniverses{
  background-image:url('../assets/images/home-r184/universes-poster.webp') !important;
}
html body .r183MetricLive{
  background-image:url('../assets/images/home-r184/live-community.webp') !important;
  background-position:58% 42% !important;
}
html body .r183MetricSolidarity{
  background-image:url('../assets/images/home-r183/solidarity-hands.webp') !important;
  background-position:center !important;
}
html body .r183MetricCard p{
  color:#d7e3e3 !important;
  text-shadow:0 2px 8px rgba(0,0,0,.92) !important;
}
html body .r183MetricCard span,
html body .r183MetricCard strong{
  text-shadow:0 2px 10px rgba(0,0,0,.92) !important;
}

@media (prefers-reduced-motion:reduce){
  html body .r184MetricMedia{display:none !important}
}

@media (max-width:900px){
  html body .memberProfileCompact:not(.isExpanded),
  html body .memberMapCard{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
  html[data-ethnos-ui="discord-r111"] body .memberNavDrawerLayer,
  html body .memberTodaySearchDrawer{
    width:auto !important;
  }
}

/* Un volet ouvert doit rester parfaitement lisible : le module streaming
   central droit se retire pendant l'ouverture des panneaux descendants. */
html body:has(.memberNavDrawer.isOpen) .r183StreamingTab,
html body:has(.memberNavDrawer[aria-hidden="false"]) .r183StreamingTab,
html body:has(.memberTodaySearchDrawer.isOpen) .r183StreamingTab{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(105%,-50%) !important;
}