/* ========================================================================== */
/* ETHNOS R183 — équilibre du tableau de bord                                 */
/* - Tchat compact et centré verticalement                                     */
/* - streaming séparé dans un onglet compact à droite                          */
/* - quatre repères centrés sous les trois portes                              */
/* - vue centrale centrée entre les deux navigations blanches                  */
/* - carte basse illustrée par la Terre inversée horizontalement               */
/* ========================================================================== */

:root{
  --r183-side-width:clamp(170px,10.2vw,200px);
  --ethnos-search-width:var(--r183-side-width);
  --ethnos-context-width:var(--r183-side-width);
  --ethnos-card-height:clamp(94px,10.4vh,112px);
}

/* Géométrie symétrique gauche / droite : le centre retrouve son axe. */
@media (min-width:901px){
  html[data-ethnos-ui="discord-r111"] body .memberLayout{
    grid-template-columns:var(--r183-side-width) minmax(0,1fr) !important;
    column-gap:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  html[data-ethnos-ui="discord-r111"] body.isEthnosHomeView .memberWorkspace.hasBodyView{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  html[data-ethnos-ui="discord-r111"] body.isEthnosHomeView .memberWorkspace.hasBodyView > .bodyView-homeR180{
    flex:0 0 auto !important;
    width:100% !important;
    margin:0 !important;
    padding:0 clamp(10px,1.1vw,20px) !important;
  }

  html[data-ethnos-ui="discord-r111"] body.isEthnosHomeView .r180HomeContent{
    margin:0 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Tchat gauche : moins large, moins haut, champs et action resserrés.         */
/* -------------------------------------------------------------------------- */
@media (min-width:901px){
  html body .memberExplorerPanel{
    align-self:center !important;
    justify-self:stretch !important;
    height:auto !important;
    min-height:0 !important;
    max-height:calc(100% - 54px) !important;
    margin:0 !important;
    padding:10px 8px 10px !important;
    border-radius:0 15px 15px 0 !important;
    overflow:hidden !important;
  }

  html body .memberExplorerHead{
    padding:3px 2px 7px !important;
    text-align:center !important;
  }
  html body .memberExplorerHead h2{
    font-size:clamp(22px,1.35vw,27px) !important;
  }
  html body .memberExplorerBody{
    --explorer-volume-space:8px !important;
    max-height:calc(100vh - var(--topbar) - var(--footer-legal) - var(--r110-dock-height) - 115px) !important;
    overflow-y:auto !important;
    padding:0 1px !important;
  }

  html body .salonQuickSearch{
    align-items:center !important;
    gap:5px !important;
    padding:7px 1px 9px !important;
  }
  html body .salonQuickSearch > .salonExplorerLabel,
  html body #salonDeepSearchTitle{
    display:block !important;
    width:92px !important;
    max-width:92px !important;
    margin:0 auto 2px !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    text-align:center !important;
    font-size:clamp(14px,.88vw,17px) !important;
    line-height:1.04 !important;
  }
  html body .salonQuickSearch > label{
    width:92% !important;
    margin-inline:auto !important;
    gap:3px !important;
  }
  html body .salonQuickSearch label > span{
    font-size:clamp(8px,.52vw,9.5px) !important;
  }
  html body .salonQuickSearch select,
  html body .salonQuickSearch input{
    width:100% !important;
    min-width:0 !important;
    min-inline-size:0 !important;
    height:29px !important;
    min-height:29px !important;
    padding-inline:8px !important;
    border-radius:8px !important;
    font-size:clamp(8px,.52vw,9.5px) !important;
  }
  html body .salonQuickSearch > button{
    align-self:center !important;
    width:72% !important;
    min-width:0 !important;
    height:31px !important;
    min-height:31px !important;
    margin:3px auto 0 !important;
    padding:0 8px !important;
    border-radius:8px !important;
    font-size:clamp(8.5px,.55vw,10px) !important;
  }

  html body .salonDeepSearch{
    padding:9px 1px 2px !important;
  }
  html body .salonDeepSearchTagline{
    max-width:115px !important;
    margin:4px auto 7px !important;
    font-size:clamp(9px,.58vw,11px) !important;
    line-height:1.12 !important;
  }
  html body .salonContinentShortcuts{
    gap:3px !important;
  }
  html body .salonContinentShortcuts button{
    width:92% !important;
    min-height:27px !important;
    margin-inline:auto !important;
    padding:3px 6px !important;
    border-radius:7px !important;
    font-size:clamp(8px,.52vw,9.5px) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Onglet streaming à droite, compact et centré verticalement.                 */
/* -------------------------------------------------------------------------- */
html body .r183StreamingTab{
  position:fixed !important;
  z-index:88 !important;
  top:50% !important;
  right:0 !important;
  width:var(--r183-side-width) !important;
  height:auto !important;
  max-height:min(365px,48vh) !important;
  margin:0 !important;
  padding:10px 10px 12px !important;
  overflow:hidden !important;
  transform:translateY(-50%) !important;
  border:1px solid rgba(149,205,218,.18) !important;
  border-right:0 !important;
  border-radius:15px 0 0 15px !important;
  background:linear-gradient(180deg,#082738 0%,#041722 100%) !important;
  box-shadow:-16px 18px 38px rgba(0,0,0,.26) !important;
  pointer-events:auto !important;
}
html body .r183StreamingTab::before{content:none !important;display:none !important}
html body .r183StreamingTab .salonLiveVisual{
  width:100% !important;
  aspect-ratio:1.72/1 !important;
  border-radius:9px !important;
}
html body .r183StreamingTab .salonLiveStatus{
  left:7px !important;
  bottom:7px !important;
  padding:4px 7px !important;
  gap:5px !important;
  font-size:6.5px !important;
  letter-spacing:.08em !important;
}
html body .r183StreamingTab .salonLiveStatus i{
  width:6px !important;
  height:6px !important;
  background:#f58a4b !important;
  box-shadow:0 0 0 3px rgba(245,138,75,.18),0 0 9px rgba(245,138,75,.55) !important;
  animation:none !important;
}
html body .r183StreamingTab .salonLiveCopy{
  padding:8px 1px 0 !important;
}
html body .r183StreamingTab .salonLiveCopy h3{
  margin:2px 0 6px !important;
  line-height:1.02 !important;
}
html body .r183StreamingTab #salonLiveTitle strong{
  font-size:clamp(13px,.86vw,16px) !important;
}
html body .r183StreamingTab #salonLiveTitle em{
  margin-top:2px !important;
  font-size:clamp(12px,.78vw,15px) !important;
}
html body .r183StreamingTab .salonLiveCopy p{
  margin:0 auto 8px !important;
  font-size:clamp(7px,.46vw,8.5px) !important;
  line-height:1.28 !important;
}
html body .r183StreamingTab .salonLiveCopy button{
  width:92% !important;
  min-height:31px !important;
  margin:0 auto !important;
  padding:0 7px !important;
  border-radius:8px !important;
  font-size:clamp(7px,.46vw,8.5px) !important;
  line-height:1.1 !important;
  pointer-events:none !important;
}

/* Profil et carte gardent les extrémités ; le streaming occupe le centre. */
html body .memberProfileCompact:not(.isExpanded),
html body .memberMapCard{
  width:var(--r183-side-width) !important;
}

/* Carte basse : image fournie, recadrée et inversée. Terre depuis la droite. */
html body .memberMapCard.r183MapCard{
  isolation:isolate !important;
  background-image:
    linear-gradient(90deg,rgba(3,20,31,.98) 0%,rgba(4,28,40,.88) 46%,rgba(3,18,28,.42) 100%),
    url('../assets/images/home-r183/map-tab-earth-right.webp') !important;
  background-position:left center,right center !important;
  background-size:cover,cover !important;
  background-repeat:no-repeat !important;
}
html body .memberMapCard.r183MapCard::after{content:none !important;display:none !important}
html body .memberMapCard.r183MapCard > *{position:relative !important;z-index:2 !important}
html body .memberMapCard.r183MapCard h2{
  max-width:88% !important;
  text-shadow:0 3px 14px rgba(0,0,0,.82) !important;
}
html body .memberMapCard.r183MapCard p,
html body .memberMapCard.r183MapCard small{
  text-shadow:0 2px 9px rgba(0,0,0,.86) !important;
}

/* -------------------------------------------------------------------------- */
/* Quatre repères sous les grandes portes, compacts, centrés et moins longs.  */
/* -------------------------------------------------------------------------- */
html body .r183MetricRow{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  width:min(78%,960px) !important;
  margin:12px auto 0 !important;
}
html body .r183MetricCard{
  position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;
  min-height:84px !important;
  padding:13px 15px !important;
  border:1px solid rgba(190,226,231,.16) !important;
  border-radius:11px !important;
  background:linear-gradient(180deg,#082d3d,#052130) !important;
  box-shadow:0 11px 24px rgba(0,0,0,.19) !important;
}
html body .r183MetricCard > *{position:relative !important;z-index:2 !important}
html body .r183MetricCard span{
  display:block !important;
  color:#31d1cf !important;
  font-size:clamp(6px,.4vw,8px) !important;
  font-weight:700 !important;
  letter-spacing:.11em !important;
}
html body .r183MetricCard strong{
  display:block !important;
  margin:6px 0 2px !important;
  color:#fff !important;
  font-family:var(--font-title,"Fraunces",Georgia,serif) !important;
  font-size:clamp(22px,1.55vw,31px) !important;
  font-weight:400 !important;
  line-height:1 !important;
}
html body .r183MetricCard p{
  margin:0 !important;
  color:#8da4ae !important;
  font-size:clamp(6px,.4vw,8px) !important;
  line-height:1.3 !important;
}
html body .r183MetricSolidarity{
  background-image:
    linear-gradient(90deg,rgba(3,23,34,.90),rgba(3,23,34,.56)),
    url('../assets/images/home-r183/solidarity-hands.webp') !important;
  background-position:center !important;
  background-size:cover !important;
}
html body .r183MetricSolidarity::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(180deg,rgba(3,19,29,.08),rgba(3,19,29,.65)) !important;
}
html body .r183MetricSolidarity p{color:#d8e4e2 !important}

/* L'ancien rail vertical ne doit jamais réapparaître. */
html body .r179MetricRail{display:none !important}

/* -------------------------------------------------------------------------- */
/* Formats intermédiaires et 1280×720.                                        */
/* -------------------------------------------------------------------------- */
@media (max-width:1500px) and (min-width:901px){
  :root{--r183-side-width:170px}
  html body .r183MetricRow{width:min(86%,860px) !important;gap:8px !important}
  html body .r183MetricCard{padding:11px 12px !important}
}

@media (max-height:820px) and (min-width:901px){
  :root{--ethnos-card-height:92px}
  html body .r180HomeHero{
    height:350px !important;
    min-height:350px !important;
    padding:17px 20px !important;
  }
  html body .r180HomeHero .r180HomeHeroCopy h1{
    margin-top:10px !important;
    font-size:clamp(31px,2.4vw,42px) !important;
  }
  html body .r180HomePromise{font-size:clamp(16px,1.18vw,21px) !important}
  html body .r180HomeIntro{margin-top:12px !important;font-size:clamp(7.5px,.54vw,9.5px) !important;line-height:1.38 !important}
  html body .r180MembersLine{margin-top:10px !important}
  html body .r180TrajectoryHead{margin-top:11px !important}
  html body .r180TrajectoryManifesto{font-size:clamp(13px,.94vw,17px) !important}
  html body .r180TrajectorySteps{margin-top:11px !important}
  html body .r180TrajectoryFoot{margin-top:9px !important}
  html body .r180Pillars{gap:8px !important}
  html body .r180Pillars > .r180Pillar{
    min-height:148px !important;
    padding:12px 14px 30px !important;
  }
  html body .r180Pillars > .r180Pillar > h3{font-size:clamp(17px,1.25vw,22px) !important}
  html body .r180Pillars > .r180Pillar > strong{font-size:clamp(8.5px,.62vw,11px) !important}
  html body .r180Pillars > .r180Pillar > p{font-size:clamp(6px,.44vw,8px) !important}
  html body .r180Pillars > .r180Pillar > b{left:14px !important;bottom:9px !important;font-size:7px !important}
  html body .r183MetricRow{margin-top:8px !important}
  html body .r183MetricCard{min-height:62px !important;padding:9px 11px !important}
  html body .r183MetricCard strong{margin-top:4px !important;font-size:clamp(18px,1.35vw,25px) !important}
  html body .r183StreamingTab{max-height:315px !important;padding:8px !important}
  html body .r183StreamingTab .salonLiveCopy p{display:none !important}
}

@media (max-height:740px) and (min-width:901px){
  html body .r180HomeHero{height:320px !important;min-height:320px !important}
  html body .r180Pillars > .r180Pillar{min-height:132px !important}
  html body .r183MetricCard{min-height:56px !important;padding-block:7px !important}
}

@media (max-width:900px){
  html body .r183StreamingTab{display:none !important}
  html body .r183MetricRow{width:100% !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}