/* ==========================================================================
   ETHNOS R287 V1.4 — REPARATION STRUCTURELLE PROPRE
   Base : R286 validée. Aucune couche R287 V1/V1.1/V1.2/V1.3 n'est chargée.

   A MODIFIER
   - Tchat multi-onglets (6 max) ;
   - accès par vrai chemin historique et Favoris ;
   - salon central arrêté AVANT la colonne droite ;
   - membres intégrés entre Profil et Maps ;
   - onglets persistants pendant la session ;
   - F5 = Accueil intact ;
   - ancien fond de parcours Tchat supprimé ;
   - bouton "Entrer dans le salon" orange standard ;
   - charte crème/ardoise validée ;
   - messages petits et blancs, titres crème.

   A NE PAS TOUCHER
   - Annuaire ;
   - Photos/Documents ;
   - Profil/Ville R286 ;
   - Maps ;
   - navigation générale ;
   - chevauchement gauche explicitement validé.
   ========================================================================== */

:root{
  --r287-cream:#f3ead9;
  --r287-cream-2:#eadfcd;
  --r287-slate:#061c29;
  --r287-slate-2:#082737;
  --r287-orange:#f28a45;
  --r287-line:rgba(243,234,217,.16);
  --r287-right-gap:14px;
}

/* --------------------------------------------------------------------------
   SECURITE LIFECYCLE
   Rien de R287 n'est visible hors d'un salon effectivement actif.
   -------------------------------------------------------------------------- */
.r287v14Left,
.r287v14Chat,
.r287v14Online{
  display:none !important;
}

body.r287v14Active .r287v14Left,
body.r287v14Active .r287v14Chat{
  display:flex !important;
}

body.r287v14Active .r287v14Online{
  display:flex !important;
}

/* Le volet Tchat historique reste totalement visible tant qu'aucun salon
   R287 n'est ouvert. */
body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel > .memberExplorerHead{
  display:flex !important;
}
body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel > .memberExplorerBody{
  display:flex !important;
}
body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel > .r186TchatClose{
  display:flex !important;
}

/* --------------------------------------------------------------------------
   PARCOURS HISTORIQUE TCHAT : même chemin, sans vieux fond graphique.
   -------------------------------------------------------------------------- */
html body.isTchatDrawerOpen:not(.r287v14Active)
.memberWorkspace.hasSalonContent:not(.isSalonOpen){
  background-color:var(--r287-slate) !important;
  background-image:none !important;
}

/* Bouton final du parcours : standard orange lisible. */
html body.isTchatDrawerOpen .salonOpenButton{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:34px !important;
  padding:0 16px !important;
  border:1px solid rgba(6,28,41,.16) !important;
  border-radius:10px !important;
  background:var(--r287-orange) !important;
  color:var(--r287-slate) !important;
  box-shadow:0 3px 0 rgba(6,28,41,.26) !important;
  font-weight:800 !important;
  text-decoration:none !important;
  opacity:1 !important;
}

/* --------------------------------------------------------------------------
   LARGEUR DU SALON : arrêt avant la colonne droite existante.
   Aucun changement de moteur global de .memberLayout.
   -------------------------------------------------------------------------- */
body.r287v14Active .memberWorkspace{
  margin-right:calc(var(--ethnos-context-width) + var(--r287-right-gap)) !important;
  min-width:0 !important;
  overflow:hidden !important;
}

/* R185 masque les enfants du workspace en mode Tchat :
   whitelist locale du seul shell R287 actif. */
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  visibility:visible !important;
  pointer-events:auto !important;
}

/* --------------------------------------------------------------------------
   VOLET GAUCHE CONTEXTUEL — crème validé
   -------------------------------------------------------------------------- */
body.r287v14Active .memberExplorerPanel{
  background:linear-gradient(180deg,#f6edde,#eadfcd) !important;
  color:var(--r287-slate) !important;
  overflow:visible !important;
}

body.r287v14Active .memberExplorerPanel > .memberExplorerHead,
body.r287v14Active .memberExplorerPanel > .memberExplorerBody,
body.r287v14Active .memberExplorerPanel > .r186TchatClose{
  display:none !important;
}

.r287v14Left{
  position:absolute;
  inset:0;
  z-index:20;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:inherit;
  background:linear-gradient(180deg,#f6edde,#eadfcd);
  color:var(--r287-slate);
}

.r287v14ContextHead{
  flex:none;
  padding:14px 14px 11px;
  border-bottom:1px solid rgba(6,28,41,.13);
}

.r287v14Eyebrow{
  display:block;
  color:var(--r287-orange);
  font:800 9px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.r287v14ContextHead h2{
  margin:4px 0 0 !important;
  color:var(--r287-slate) !important;
  font:800 17px/1.1 Inter,Arial,sans-serif !important;
}

.r287v14ContextHead p{
  margin:4px 0 0 !important;
  color:#75695c !important;
  font:600 10px/1.25 Inter,Arial,sans-serif !important;
}

.r287v14ContextList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:9px;
}

.r287v14SectionTitle{
  margin:8px 5px 5px;
  color:#776a5d;
  font:800 9px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.r287v14Channel{
  width:100%;
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  margin:2px 0;
  padding:8px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#263c48;
  cursor:pointer;
  text-align:left;
  font:700 10px/1.2 Inter,Arial,sans-serif;
}

.r287v14Channel:hover{
  background:rgba(6,28,41,.07);
}

.r287v14Channel.isActive{
  background:var(--r287-slate);
  color:var(--r287-cream);
}

.r287v14Badge{
  min-width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border-radius:9px;
  background:var(--r287-orange);
  color:#fff;
  font:800 8px/1 Inter,Arial,sans-serif;
}

.r287v14Explore{
  flex:none;
  margin:8px 10px 10px;
  min-height:32px;
  border:1px solid rgba(6,28,41,.18);
  border-radius:9px;
  background:var(--r287-slate);
  color:var(--r287-cream);
  cursor:pointer;
  font:800 10px/1 Inter,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   EXPLORATEUR GLOBAL COULISSANT
   -------------------------------------------------------------------------- */
.r287v14Explorer{
  position:absolute;
  z-index:40;
  inset:0;
  display:flex;
  flex-direction:column;
  transform:translateX(-102%);
  transition:transform .2s ease;
  border-radius:inherit;
  background:var(--r287-cream);
  color:var(--r287-slate);
  box-shadow:16px 0 38px rgba(0,0,0,.26);
}

.r287v14Explorer.isOpen{transform:translateX(0)}

.r287v14ExplorerHead{
  flex:none;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  border-bottom:1px solid rgba(6,28,41,.14);
}

.r287v14ExplorerHead strong{
  flex:1;
  font:800 13px/1.2 Inter,Arial,sans-serif;
}

.r287v14ExplorerClose{
  width:28px;
  height:28px;
  border:0;
  border-radius:8px;
  background:var(--r287-slate);
  color:var(--r287-cream);
  cursor:pointer;
}

.r287v14Search{
  margin:10px 12px 6px;
  height:34px;
  border:1px solid rgba(6,28,41,.2);
  border-radius:9px;
  background:#fffaf2;
  color:var(--r287-slate);
  padding:0 10px;
  font:600 10px/1 Inter,Arial,sans-serif;
}

.r287v14Filters{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:0 12px 8px;
}

.r287v14Filters button{
  border:1px solid rgba(6,28,41,.18);
  border-radius:14px;
  background:transparent;
  color:var(--r287-slate);
  padding:5px 8px;
  cursor:pointer;
  font:700 9px/1 Inter,Arial,sans-serif;
}

.r287v14Filters button.isActive{
  background:var(--r287-slate);
  color:var(--r287-cream);
}

.r287v14Results{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:6px 10px 12px;
}

.r287v14Result{
  width:100%;
  margin:4px 0;
  padding:8px 9px;
  border:1px solid rgba(6,28,41,.12);
  border-radius:8px;
  background:rgba(255,255,255,.32);
  color:var(--r287-slate);
  cursor:pointer;
  text-align:left;
}

.r287v14Result strong,
.r287v14Result small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.r287v14Result strong{font:800 10px/1.2 Inter,Arial,sans-serif}
.r287v14Result small{margin-top:3px;opacity:.66;font:600 8.5px/1.2 Inter,Arial,sans-serif}

/* --------------------------------------------------------------------------
   CHAT CENTRAL
   -------------------------------------------------------------------------- */
.r287v14Chat{
  position:absolute;
  inset:0;
  z-index:80;
  flex-direction:column;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:var(--r287-slate-2);
  color:white;
}

.r287v14Tabs{
  flex:none;
  height:36px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:3px;
  padding:4px 5px 0;
  border-bottom:1px solid var(--r287-line);
  background:var(--r287-slate);
}

.r287v14Tab{
  min-width:0;
  height:28px;
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid transparent;
  border-radius:7px 7px 0 0;
  padding:0 6px;
  background:rgba(243,234,217,.05);
  color:rgba(243,234,217,.68);
  cursor:pointer;
  font:700 9px/1 Inter,Arial,sans-serif;
}

.r287v14Tab.isActive{
  border-color:rgba(243,234,217,.16);
  border-bottom-color:var(--r287-slate-2);
  background:var(--r287-slate-2);
  color:var(--r287-cream);
}

.r287v14TabLabel{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.r287v14TabClose{
  width:15px;
  height:15px;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:0;
}

.r287v14Room{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.r287v14RoomHead{
  flex:none;
  min-height:43px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 11px;
  border-bottom:1px solid var(--r287-line);
  background:var(--r287-slate-2);
}

.r287v14RoomTitle{
  flex:1;
  min-width:0;
}

.r287v14RoomTitle strong{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:var(--r287-cream);
  font:800 12px/1.15 Inter,Arial,sans-serif;
}

.r287v14RoomTitle small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  color:rgba(243,234,217,.65);
  font:600 8px/1.2 Inter,Arial,sans-serif;
}

.r287v14Tools{
  flex:none;
  display:flex;
  gap:4px;
}

.r287v14Tool{
  width:30px;
  height:29px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(243,234,217,.14);
  border-radius:7px;
  background:rgba(243,234,217,.05);
  color:var(--r287-cream);
  cursor:pointer;
  font-size:12px;
}

.r287v14Tool.isActive,
.r287v14Tool:hover{
  background:var(--r287-cream);
  color:var(--r287-slate);
}

.r287v14Unread{
  flex:none;
  width:100%;
  min-height:27px;
  border:0;
  border-bottom:1px solid rgba(6,28,41,.15);
  background:var(--r287-orange);
  color:var(--r287-slate);
  cursor:pointer;
  padding:0 12px;
  text-align:right;
  font:800 8.5px/1 Inter,Arial,sans-serif;
}
.r287v14Unread[hidden]{display:none !important}

.r287v14SearchBar{
  flex:none;
  display:none;
  gap:6px;
  padding:6px 9px;
  border-bottom:1px solid var(--r287-line);
  background:#0a2230;
}
.r287v14SearchBar.isOpen{display:flex}
.r287v14SearchBar input{
  flex:1;
  min-width:0;
  height:29px;
  border:1px solid rgba(243,234,217,.18);
  border-radius:7px;
  background:#fffaf2;
  color:var(--r287-slate);
  padding:0 8px;
  font:600 9px/1 Inter,Arial,sans-serif;
}
.r287v14SearchBar span{
  align-self:center;
  color:rgba(243,234,217,.62);
  font:700 8px/1 Inter,Arial,sans-serif;
}

.r287v14Pinned{
  flex:none;
  display:none;
  padding:6px 9px;
  border-bottom:1px solid var(--r287-line);
  background:#102f3f;
  color:var(--r287-cream);
  font:700 8.5px/1.3 Inter,Arial,sans-serif;
}
.r287v14Pinned.isOpen{display:block}

.r287v14Messages{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:9px 12px 7px;
  scrollbar-width:thin;
}

.r287v14Day{
  display:flex;
  align-items:center;
  gap:8px;
  margin:3px 0 10px;
  color:rgba(243,234,217,.66);
  font:700 8px/1 Inter,Arial,sans-serif;
}
.r287v14Day::before,.r287v14Day::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--r287-line);
}

.r287v14Message{
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:8px;
  margin:0 0 6px;
  padding:4px 5px;
  border-radius:8px;
}
.r287v14Message:hover{background:rgba(243,234,217,.035)}
.r287v14Message.isSearchMiss{display:none}

.r287v14Avatar{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:50%;
  background:var(--r287-cream);
  color:var(--r287-slate);
  font:800 9px/1 Inter,Arial,sans-serif;
}
.r287v14Avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.r287v14MessageBody{min-width:0}
.r287v14Meta{
  display:flex;
  align-items:baseline;
  gap:6px;
  margin-bottom:2px;
}
.r287v14Meta strong{
  color:var(--r287-cream);
  font:800 9.5px/1 Inter,Arial,sans-serif;
}
.r287v14Meta time{
  color:rgba(255,255,255,.52);
  font:600 7px/1 Inter,Arial,sans-serif;
}

.r287v14ReplyRef{
  margin:0 0 3px;
  padding-left:6px;
  border-left:2px solid var(--r287-orange);
  color:rgba(255,255,255,.64);
  font:600 7.5px/1.25 Inter,Arial,sans-serif;
}

.r287v14Text{
  margin:0;
  color:#fff;
  font:500 9px/1.38 Inter,Arial,sans-serif;
  overflow-wrap:anywhere;
}

.r287v14Attachment{
  display:inline-flex;
  margin-top:5px;
  max-width:100%;
  padding:5px 7px;
  border:1px solid var(--r287-line);
  border-radius:7px;
  color:var(--r287-cream);
  font:700 8px/1 Inter,Arial,sans-serif;
}

.r287v14Actions{
  display:flex;
  flex-wrap:wrap;
  gap:3px;
  margin-top:4px;
}

.r287v14Actions button{
  border:1px solid rgba(243,234,217,.12);
  border-radius:11px;
  padding:3px 6px;
  background:rgba(243,234,217,.04);
  color:rgba(255,255,255,.64);
  cursor:pointer;
  font:700 7px/1 Inter,Arial,sans-serif;
}
.r287v14Actions button:hover,
.r287v14Actions button.isActive{
  background:var(--r287-cream);
  color:var(--r287-slate);
}

/* Compositeur */
.r287v14Composer{
  flex:none;
  padding:7px 9px 8px;
  border-top:1px solid var(--r287-line);
  background:var(--r287-slate);
}

.r287v14ReplyDraft{
  display:none;
  align-items:center;
  gap:7px;
  margin-bottom:5px;
  padding:5px 7px;
  border-radius:6px;
  background:rgba(243,234,217,.06);
  color:rgba(243,234,217,.68);
  font:600 8px/1.2 Inter,Arial,sans-serif;
}
.r287v14ReplyDraft.isOpen{display:flex}
.r287v14ReplyDraft span{
  flex:1;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.r287v14ReplyDraft button{
  border:0;
  background:transparent;
  color:var(--r287-cream);
  cursor:pointer;
}

.r287v14ComposerRow{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto 62px;
  gap:5px;
  align-items:center;
}

.r287v14ComposerRow textarea{
  min-width:0;
  width:100%;
  min-height:34px;
  max-height:74px;
  box-sizing:border-box;
  resize:vertical;
  border:1px solid rgba(243,234,217,.16);
  border-radius:8px;
  background:#102d3d;
  color:#fff;
  padding:8px 9px;
  outline:none;
  font:500 9px/1.35 Inter,Arial,sans-serif;
}

.r287v14ComposerRow > button,
.r287v14ComposerTools button{
  height:32px;
  border:1px solid rgba(243,234,217,.14);
  border-radius:7px;
  background:rgba(243,234,217,.05);
  color:var(--r287-cream);
  cursor:pointer;
  font:800 8px/1 Inter,Arial,sans-serif;
}

.r287v14ComposerTools{
  display:flex;
  align-items:center;
  gap:3px;
}

.r287v14ComposerTools button{
  min-width:29px;
  padding:0 5px;
}

.r287v14Send{
  background:var(--r287-cream) !important;
  color:var(--r287-slate) !important;
}

.r287v14Hint{
  margin-top:4px;
  color:rgba(243,234,217,.52);
  font:600 7px/1.2 Inter,Arial,sans-serif;
}

/* --------------------------------------------------------------------------
   COLONNE DROITE : Profil / Membres / Maps
   On utilise la colonne fixe historique ; on ne change son positionnement.
   -------------------------------------------------------------------------- */
body.r287v14Active .memberRightRail{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) auto !important;
  align-content:stretch !important;
  gap:8px !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

body.r287v14Active .memberRightRail > .memberProfileCompact{
  grid-row:1 !important;
  pointer-events:auto !important;
}
body.r287v14Active .memberRightRail > .r287v14Online{
  grid-row:2 !important;
  pointer-events:auto !important;
}
body.r287v14Active .memberRightRail > .memberMapCard{
  grid-row:3 !important;
  pointer-events:auto !important;
}

.r287v14Online{
  min-height:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(6,28,41,.12);
  border-radius:12px;
  background:linear-gradient(180deg,#f5ecdc,#eadfcd);
  color:var(--r287-slate);
}

.r287v14Online.isUserHidden{display:none !important}

.r287v14OnlineHead{
  flex:none;
  padding:9px 10px 7px;
  border-bottom:1px solid rgba(6,28,41,.12);
}
.r287v14OnlineHead span{
  display:block;
  color:#786b5d;
  font:800 8px/1 Inter,Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.r287v14OnlineHead strong{
  display:block;
  margin-top:3px;
  font:800 11px/1.15 Inter,Arial,sans-serif;
}

.r287v14OnlineList{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:6px;
}

.r287v14Member{
  width:100%;
  display:grid;
  grid-template-columns:8px 27px minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:5px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--r287-slate);
  cursor:pointer;
  text-align:left;
}
.r287v14Member:hover{background:rgba(6,28,41,.06)}

.r287v14Presence{
  width:7px;height:7px;border-radius:50%;background:#65927a;
}
.r287v14MemberAvatar{
  width:27px;height:27px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--r287-slate);color:var(--r287-cream);
  font:800 8px/1 Inter,Arial,sans-serif;
}
.r287v14MemberCopy{min-width:0}
.r287v14MemberCopy strong,.r287v14MemberCopy small{
  display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.r287v14MemberCopy strong{font:800 8.5px/1.2 Inter,Arial,sans-serif}
.r287v14MemberCopy small{margin-top:2px;opacity:.6;font:600 7px/1.2 Inter,Arial,sans-serif}

/* --------------------------------------------------------------------------
   Onglets ouverts accessibles depuis le vrai volet Tchat
   -------------------------------------------------------------------------- */
.r287v14Resume{
  margin:0 0 10px;
  padding:8px;
  border:1px solid rgba(6,28,41,.16);
  border-radius:9px;
  background:rgba(243,234,217,.94);
}
.r287v14ResumeTitle{
  margin-bottom:5px;
  color:var(--r287-slate);
  font:800 9px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.r287v14ResumeButtons{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
}
.r287v14ResumeButtons button{
  border:1px solid rgba(6,28,41,.14);
  border-radius:12px;
  background:#fffaf2;
  color:var(--r287-slate);
  padding:5px 7px;
  cursor:pointer;
  font:700 8px/1 Inter,Arial,sans-serif;
}

/* Toast limite / fonctions à venir */
.r287v14Toast{
  position:absolute;
  z-index:120;
  left:50%;
  bottom:54px;
  transform:translateX(-50%);
  max-width:min(90%,420px);
  padding:8px 11px;
  border-radius:8px;
  background:var(--r287-cream);
  color:var(--r287-slate);
  box-shadow:0 10px 26px rgba(0,0,0,.28);
  font:800 9px/1.3 Inter,Arial,sans-serif;
}

@media (width:1280px) and (height:720px){
  body.r287v14Active .memberWorkspace{
    margin-right:calc(var(--ethnos-context-width) + 10px) !important;
  }
  .r287v14Tabs{height:34px}
  .r287v14Tab{height:26px;font-size:8px}
  .r287v14RoomHead{min-height:40px}
  .r287v14Messages{padding:7px 9px 5px}
  .r287v14Text{font-size:8.5px}
  .r287v14Composer{padding:5px 7px 6px}
  .r287v14ComposerTools button{min-width:27px;padding:0 4px}
  .r287v14Hint{display:none}
}