/* ========================================================================== */
/* ETHNOS R788 — corrections ciblées Maps / Messages / Favoris / Trophées    */
/* 15 septembre 2026 — UI uniquement hors déplacement structurel du bouton   */
/* Messages. Aucune logique API ou métier modifiée.                          */
/* ========================================================================== */
:root{
  --r788-charcoal:#1f1f1f;
  --r788-white:#ffffff;
  --r788-cream:#fff8ee;
  --r788-blue:#071a39;
  --r788-orange:#f26722;
  --r788-muted:#c9d0d3;
  --r788-line:rgba(255,255,255,.14);
}

/* 1 — MAPS : le bloc titre conserve sa géométrie mais passe en angles droits. */
html.ethnosGuestDiscovery body.r190WorldViewOpen .bodyView-world > .bodyViewHeader.bodyViewHeader,
html.ethnosConnectedDiscoveryShell body.r190WorldViewOpen .bodyView-world > .bodyViewHeader.bodyViewHeader{
  border-radius:0 !important;
}

/* 2 — COMMUNICATIONS : le bouton Fermer est désormais structurellement après
   la cinquième carte (Mes événements) dans messages-r733.js. */
html body .ethnosMessagesR575Dashboard .ethnosMessagesR788CloseBottom{
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:116px !important;
  min-height:34px !important;
  margin:14px auto 24px !important;
  padding:0 22px !important;
  border:1px solid rgba(225,231,233,.78) !important;
  border-radius:999px !important;
  background:var(--r788-white) !important;
  color:var(--r788-blue) !important;
  box-shadow:none !important;
  font-weight:500 !important;
}

/* 3 — FAVORIS : tout le volet est anthracite ; seules les cartes de résultats
   restent crème. Le bouton Fermer conserve son standard blanc. */
html body #memberDrawer-favorites,
html body #memberDrawer-favorites .memberFavoritesShell,
html body #memberDrawer-favorites .memberFavoritesShell > header,
html body #memberDrawer-favorites .memberFavoritesList,
html body #memberDrawer-favorites .memberFavoritesSectionTitle,
html body #memberDrawer-favorites .memberFavoritesEmpty{
  background-color:var(--r788-charcoal) !important;
  background-image:none !important;
}
html body #memberDrawer-favorites .memberFavoritesShell > header,
html body #memberDrawer-favorites .memberFavoritesSectionTitle{
  border-color:var(--r788-line) !important;
}
html body #memberDrawer-favorites .memberFavoritesShell > header h2,
html body #memberDrawer-favorites .memberFavoritesSectionTitle{
  color:var(--r788-white) !important;
}
html body #memberDrawer-favorites .memberFavoritesShell > header p,
html body #memberDrawer-favorites .memberFavoritesEmpty{
  color:var(--r788-muted) !important;
}
html body #memberDrawer-favorites .memberFavoriteSalonRow{
  background:var(--r788-cream) !important;
  color:var(--r788-blue) !important;
}

/* 4 — TROPHÉES : toutes les surfaces du volet sont anthracite. */
html body #memberDrawer-trophies,
html body #memberDrawer-trophies .memberTrophiesShell,
html body #memberDrawer-trophies .memberTrophiesHeader,
html body #memberDrawer-trophies .memberChosenShield,
html body #memberDrawer-trophies .memberTrophiesSeparator,
html body #memberDrawer-trophies .memberTrophyPages,
html body #memberDrawer-trophies .memberTrophyPage,
html body #memberDrawer-trophies .memberTrophyCategory,
html body #memberDrawer-trophies .memberTrophyOptions{
  background-color:var(--r788-charcoal) !important;
  background-image:none !important;
  color:var(--r788-white) !important;
  border-color:var(--r788-line) !important;
}
/* drawers-r576.css impose encore une alternance crème avec :nth-child ;
   la même spécificité est reprise ici pour neutraliser cette alternance. */
html body #memberDrawer-trophies .memberTrophyPage > .memberTrophyCategory,
html body #memberDrawer-trophies .memberTrophyCategory:nth-child(odd),
html body #memberDrawer-trophies .memberTrophyCategory:nth-child(even){
  background:var(--r788-charcoal) !important;
  background-image:none !important;
  color:var(--r788-white) !important;
  border-color:var(--r788-line) !important;
}
html body #memberDrawer-trophies :is(.memberTrophiesHeader h2,.memberChosenShieldCopy h3,.memberTrophyCategory h3){
  color:var(--r788-white) !important;
}
html body #memberDrawer-trophies .memberChosenShieldStatus b{
  color:var(--r788-orange) !important;
}

/* Pagination : tous les carrés restent réellement blancs, y compris l'actif et
   les flèches. L'actif est distingué uniquement par son contour orange. */
html body #memberDrawer-trophies .memberTrophyPagination{
  background:var(--r788-charcoal) !important;
  border-color:var(--r788-line) !important;
}
html body #memberDrawer-trophies .memberTrophyPagination button,
html body #memberDrawer-trophies .memberTrophyPagination button:first-child,
html body #memberDrawer-trophies .memberTrophyPagination button:last-child,
html body #memberDrawer-trophies .memberTrophyPagination button.isActive{
  box-sizing:border-box !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  border:1px solid rgba(225,231,233,.78) !important;
  border-radius:0 !important;
  background:var(--r788-white) !important;
  color:var(--r788-blue) !important;
  font-size:12px !important;
  font-weight:800 !important;
  opacity:1 !important;
}
html body #memberDrawer-trophies .memberTrophyPagination button.isActive{
  border:2px solid var(--r788-orange) !important;
}
html body #memberDrawer-trophies .memberTrophyPagination button:first-child,
html body #memberDrawer-trophies .memberTrophyPagination button:last-child{
  color:var(--r788-orange) !important;
}
html body #memberDrawer-trophies .memberTrophyPagination button:disabled{
  opacity:1 !important;
  color:#8d8d8d !important;
  cursor:default !important;
}

@media (max-width:520px){
  html body #memberDrawer-trophies .memberTrophyPagination button,
  html body #memberDrawer-trophies .memberTrophyPagination button:first-child,
  html body #memberDrawer-trophies .memberTrophyPagination button:last-child,
  html body #memberDrawer-trophies .memberTrophyPagination button.isActive{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    font-size:11px !important;
  }
}