/* ========================================================================== */
/* ETHNOS R789 — finitions ciblées Contacts / Signalements / Annuaire         */
/* 15 septembre 2026 — CSS uniquement. Aucune logique métier/API modifiée.    */
/* ========================================================================== */
:root{
  --r789-charcoal:#1f1f1f;
  --r789-white:#fffaf3;
  --r789-muted:#c9d0d3;
  --r789-blue:#071a39;
  --r789-orange:#f26722;
  --r789-directory-search:#f6f0e4;
  --r789-cream:#fff8ee;
  --r789-line:rgba(255,255,255,.14);
}

/* -------------------------------------------------------------------------- */
/* 1 — CONTACTS : la carte d'un contact accepté va réellement bord à bord.    */
/* Le contenu interne reste inchangé. Le gutter permanent de scrollbar, qui   */
/* créait une bande vide à droite même sans scroll, est supprimé.              */
/* -------------------------------------------------------------------------- */
html body #memberDrawer-contacts-r588 .ethnosContactsR588Shell{
  scrollbar-gutter:auto !important;
  overflow-x:hidden !important;
}
html body #memberDrawer-contacts-r588 .ethnosContactsR588Body,
html body #memberDrawer-contacts-r588 .ethnosContactsR588List{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
html body #memberDrawer-contacts-r588 .ethnosContactsR588Card.isContact{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
}
/* L'ancienne réduction au survol recréait visuellement des marges. */
html body #memberDrawer-contacts-r588 .ethnosContactsR588Card.isContact:hover,
html body #memberDrawer-contacts-r588 .ethnosContactsR588Card.isContact:focus-within{
  transform:translateY(-2px) !important;
}

/* -------------------------------------------------------------------------- */
/* 2 — SIGNALEMENTS : toute la coque est anthracite ; les trois sections      */
/* fonctionnelles restent crème, sans recoloration de leur contenu.           */
/* -------------------------------------------------------------------------- */
html body #memberDrawer-reports,
html body #memberDrawer-reports > .bodyReportsDrawer.r305ReportsDrawer,
html body #memberDrawer-reports .r590ReportsBody{
  background-color:var(--r789-charcoal) !important;
  background-image:none !important;
  color:var(--r789-white) !important;
}
html body #memberDrawer-reports > .bodyReportsDrawer.r305ReportsDrawer > header{
  background-color:var(--r789-charcoal) !important;
  background-image:none !important;
  color:var(--r789-white) !important;
  border-color:var(--r789-line) !important;
}
html body #memberDrawer-reports > .bodyReportsDrawer.r305ReportsDrawer > header h2,
html body #memberDrawer-reports > .bodyReportsDrawer.r305ReportsDrawer > header p{
  color:var(--r789-white) !important;
}
html body #memberDrawer-reports > .bodyReportsDrawer.r305ReportsDrawer > header > span{
  color:var(--r789-orange) !important;
}
html body #memberDrawer-reports .r590ReportsBody > .r590ReportsSection{
  background-color:var(--r789-cream) !important;
  background-image:none !important;
  color:var(--r789-blue) !important;
  border-top-color:var(--r789-charcoal) !important;
}

/* -------------------------------------------------------------------------- */
/* 3 — ANNUAIRE : toute la coque passe en anthracite. Le premier bloc         */
/* « Rechercher un membre » conserve EXACTEMENT sa teinte claire actuelle,    */
/* mais son fond s'étend visuellement de bord à bord sans déplacer ses champs. */
/* -------------------------------------------------------------------------- */
html body #memberDrawer-directory,
html body #memberDrawer-directory .memberDirectoryShell,
html body #memberDrawer-directory .memberDirectoryHeader,
html body #memberDrawer-directory .memberDirectoryContent,
html body #memberDrawer-directory .memberDirectoryBottomActions,
html body #memberDrawer-directory .memberDirectoryResults{
  background-color:var(--r789-charcoal) !important;
  background-image:none !important;
  color:var(--r789-white) !important;
}
html body #memberDrawer-directory{
  overflow-x:hidden !important;
}
html body #memberDrawer-directory .memberDirectoryHeader{
  border-bottom-color:var(--r789-line) !important;
}
html body #memberDrawer-directory .memberDirectoryHeader h2{
  color:var(--r789-white) !important;
}
html body #memberDrawer-directory .memberDirectoryHeader p{
  color:var(--r789-muted) !important;
}
html body #memberDrawer-directory .memberDirectoryHeader h2 small{
  color:var(--r789-orange) !important;
}

/* Les deux autres sections appartiennent au fond général gris. */
html body #memberDrawer-directory .memberDirectoryContent > .memberDirectorySection:not(:first-child){
  background-color:var(--r789-charcoal) !important;
  background-image:none !important;
  color:var(--r789-white) !important;
}
html body #memberDrawer-directory .memberDirectoryContent > .memberDirectorySection:not(:first-child) > h3{
  color:var(--r789-white) !important;
}

/* Bloc « Rechercher un membre » : teinte inchangée (#f6f0e4 mesurée en R788).
   Le grand spread est limité verticalement par clip-path ; il remplit ainsi le
   gutter horizontal du parent sans changer les dimensions ni la position des
   champs et du bouton. */
html body #memberDrawer-directory .memberDirectoryContent > .memberDirectorySection:first-child{
  position:relative !important;
  background-color:var(--r789-directory-search) !important;
  background-image:none !important;
  color:var(--r789-blue) !important;
  box-shadow:0 0 0 100vmax var(--r789-directory-search) !important;
  clip-path:inset(0 -100vmax) !important;
}
html body #memberDrawer-directory .memberDirectoryContent > .memberDirectorySection:first-child > h3{
  color:var(--r789-blue) !important;
}