/* ============================================================
   R310 — Tchat central : correction visuelle exacte.
   Cible réelle auditée : moteur r287v14.
   Aucun changement fonctionnel.
   ============================================================ */

/* Onglets : plus aucun vide au-dessus. */
html body.r287v14Active .r287v14Tabs{
  height:28px !important;
  padding:0 5px !important;
  align-items:start !important;
  background:var(--r287-slate) !important;
}

/* Tous les onglets utilisent la palette crème officielle R287. */
html body.r287v14Active .r287v14Tab{
  height:28px !important;
  margin:0 !important;
  border:1px solid rgba(6,28,41,.18) !important;
  border-bottom:0 !important;
  border-radius:7px 7px 0 0 !important;
  background:var(--r287-cream-2) !important;
  color:var(--r287-slate) !important;
  font:700 9px/1 Inter,Arial,sans-serif !important;
}

/* Onglet actif = crème officiel clair. */
html body.r287v14Active .r287v14Tab.isActive{
  background:var(--r287-cream) !important;
  color:var(--r287-slate) !important;
  border-color:rgba(6,28,41,.18) !important;
}

/* Onglets non actifs = crème officiel plus foncé. */
html body.r287v14Active .r287v14Tab:not(.isActive){
  background:var(--r287-cream-2) !important;
  color:rgba(6,28,41,.88) !important;
}

/* Le bloc salon commence immédiatement sous les onglets. */
html body.r287v14Active .r287v14Room{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Textes des messages : plus petits et blancs. */
html body.r287v14Active .r287v14Text{
  color:#fff !important;
  font-size:7.5px !important;
  line-height:1.34 !important;
}

html body.r287v14Active .r287v14Meta strong{
  color:#fff !important;
  font-size:8.5px !important;
}

html body.r287v14Active .r287v14Meta time{
  color:rgba(255,255,255,.66) !important;
  font-size:6.5px !important;
}

html body.r287v14Active .r287v14Actions button{
  font-size:6.5px !important;
}

/* Bouton Envoyer : copie exacte de la référence officielle
   "Modifier mon profil" (R208), appliquée au composant du salon. */
html[data-ethnos-ui] body.r287v14Active
.r287v14ComposerRow > button.ethnosR310SendOfficial.memberEdit.ethnosActionOrange{
  appearance:none !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:32px !important;
  min-height:32px !important;
  max-height:32px !important;
  padding:0 12px !important;
  border:1px solid rgba(255,188,139,.78) !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#ff9655 0%,#f47f3c 100%) !important;
  color:#071826 !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:10px !important;
  font-weight:500 !important;
  font-style:normal !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:none !important;
  text-shadow:none !important;
  white-space:nowrap !important;
  box-shadow:0 3px 0 #cf5d25,0 6px 10px rgba(0,0,0,.20) !important;
}

html[data-ethnos-ui] body.r287v14Active
.r287v14ComposerRow > button.ethnosR310SendOfficial.memberEdit.ethnosActionOrange:hover,
html[data-ethnos-ui] body.r287v14Active
.r287v14ComposerRow > button.ethnosR310SendOfficial.memberEdit.ethnosActionOrange:focus-visible{
  filter:brightness(1.06) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}

html[data-ethnos-ui] body.r287v14Active
.r287v14ComposerRow > button.ethnosR310SendOfficial.memberEdit.ethnosActionOrange:active{
  transform:translateY(1px) !important;
  box-shadow:0 1px 0 #cf5d25,0 3px 5px rgba(0,0,0,.14) !important;
}

/* Sécurité tailles étroites : onglets sans débordement. */
@media (max-width:900px){
  html body.r287v14Active .r287v14Tabs{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    height:auto !important;
  }
  html body.r287v14Active .r287v14Tab{
    min-width:0 !important;
  }
}


/* ============================================================
   R311 — suppression du grand vide au-dessus des onglets Tchat.
   Cible réelle : workspace + shell central r287v14.
   Aucun autre composant n'est modifié.
   ============================================================ */

/* Le workspace Tchat ne réserve plus d'espace haut avant le shell central. */
html body.isTchatDrawerOpen.r287v14Active .memberWorkspace{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* Le shell central commence exactement en haut du workspace. */
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  top:0 !important;
  inset-block-start:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
}

/* Les onglets restent collés au sommet du shell. */
html body.r287v14Active .r287v14Tabs{
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:stretch !important;
}

/* Aucun espace intermédiaire entre onglets et salle. */
html body.r287v14Active .r287v14Room{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Sécurité formats étroits : même comportement, sans recréer de vide. */
@media (max-width:1200px){
  html body.isTchatDrawerOpen.r287v14Active .memberWorkspace,
  html body.isTchatDrawerOpen.r287v14Active
  .memberWorkspace > .r287v14Chat{
    padding-top:0 !important;
    margin-top:0 !important;
    top:0 !important;
    transform:none !important;
  }
}


/* ============================================================
   R312 — équilibre typographique du salon uniquement.
   Comparaison vérifiée avec R305.
   ============================================================ */

/* Texte principal : compromis demandé entre R305 (8.5px) et R310/R311 (7.5px). */
html body.r287v14Active .r287v14Text{
  font-size:8px !important;
  line-height:1.38 !important;
  color:#fff !important;
}

/* Restaurer les tailles R305 des éléments secondaires :
   leur réduction simultanée amplifiait artificiellement l'impression de miniaturisation. */
html body.r287v14Active .r287v14Meta strong{
  font-size:9.5px !important;
  color:#fff !important;
}

html body.r287v14Active .r287v14Meta time{
  font-size:7px !important;
  color:rgba(255,255,255,.52) !important;
}

html body.r287v14Active .r287v14Actions button{
  font-size:inherit !important;
}


/* ============================================================
   R313 — Ajustement complet demandé du salon central.
   1) texte du Tchat plus grand
   2) boutons d'action plus petits
   3) onglets positionnés juste sous la barre de navigation
   ============================================================ */

/* 1) TEXTE DU TCHAT
   R305 était 8.5px et restait visuellement trop petit.
   On augmente le texte principal sans grossir les contrôles. */
html body.r287v14Active .r287v14Text{
  font-size:11px !important;
  line-height:1.42 !important;
  color:#fff !important;
}

/* Auteur et heure restent compacts, mais proportionnés au texte. */
html body.r287v14Active .r287v14Meta strong{
  font-size:10px !important;
  line-height:1.15 !important;
  color:#fff !important;
}

html body.r287v14Active .r287v14Meta time{
  font-size:7px !important;
  line-height:1 !important;
  color:rgba(255,255,255,.58) !important;
}

/* 2) BOUTONS SOUS LES MESSAGES
   Ils étaient devenus visuellement trop gros.
   Réduction locale stricte : Répondre / réaction / Épingler / Modifier / Supprimer. */
html body.r287v14Active .r287v14Actions{
  gap:4px !important;
  margin-top:4px !important;
}

html body.r287v14Active .r287v14Actions button{
  min-height:20px !important;
  height:20px !important;
  padding:0 7px !important;
  border-radius:6px !important;
  font:700 7px/1 Inter,Arial,sans-serif !important;
  line-height:1 !important;
}

/* 3) POSITION SOUS LA BARRE DE NAVIGATION
   Ne jamais passer sous la barre.
   On rétablit le point de départ vertical du moteur R287 sur la hauteur
   officielle prévue par le layout, au lieu de top:0. */
html[data-ethnos-ui="discord-r111"] body.r287v14Active .r287v14Chat,
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  top:var(--ethnos-card-height) !important;
  inset-block-start:var(--ethnos-card-height) !important;
}

/* Le shell reste collé à ce point, sans vide additionnel. */
html body.r287v14Active .r287v14Tabs{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Annule explicitement le forçage R311 qui plaçait le salon tout en haut. */
html body.isTchatDrawerOpen.r287v14Active .memberWorkspace,
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
}

/* Formats étroits : même ancrage sous la navigation. */
@media (max-width:1200px){
  html[data-ethnos-ui="discord-r111"] body.r287v14Active .r287v14Chat,
  html body.isTchatDrawerOpen.r287v14Active
  .memberWorkspace > .r287v14Chat{
    top:var(--ethnos-card-height) !important;
    inset-block-start:var(--ethnos-card-height) !important;
  }
}


/* ============================================================
   R314 — Correction complète Tchat : navigation + épinglés.
   Texte du Tchat R313 conservé tel quel.
   ============================================================ */

/* ------------------------------------------------------------
   1. ONGLETS JUSTE SOUS LA BARRE DE NAVIGATION
   Audit : la barre réelle est .memberTopbar et sa hauteur officielle
   est --topbar (56px dans le layout actif).
   --ethnos-card-height concerne les cartes latérales (132–168px) :
   l'utiliser en R313 créait précisément le grand vide observé.
   ------------------------------------------------------------ */
html[data-ethnos-ui="discord-r111"] body.r287v14Active .r287v14Chat,
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  top:var(--topbar) !important;
  inset-block-start:var(--topbar) !important;
  margin-top:0 !important;
  padding-top:0 !important;
  transform:none !important;
}

/* Les onglets commencent au premier pixel disponible sous la navigation. */
html body.r287v14Active .r287v14Tabs{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* ------------------------------------------------------------
   2. EPINGLES : un élément par message, cliquable.
   ------------------------------------------------------------ */
html body.r287v14Active .r287v14Pinned{
  padding:7px 9px !important;
}

html body.r287v14Active .r314PinnedList{
  display:grid !important;
  gap:5px !important;
  width:100% !important;
}

html body.r287v14Active .r314PinnedItem{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:6px 8px !important;
  border:1px solid rgba(243,234,217,.14) !important;
  border-radius:7px !important;
  background:rgba(243,234,217,.045) !important;
  color:#fff !important;
  cursor:pointer !important;
  text-align:left !important;
  font-family:Inter,Arial,sans-serif !important;
}

html body.r287v14Active .r314PinnedItem:hover,
html body.r287v14Active .r314PinnedItem:focus-visible{
  background:rgba(243,234,217,.10) !important;
  border-color:rgba(243,234,217,.26) !important;
  outline:none !important;
}

html body.r287v14Active .r314PinnedItem strong{
  color:var(--r287-cream) !important;
  font-size:8px !important;
  white-space:nowrap !important;
}

html body.r287v14Active .r314PinnedItem span{
  min-width:0 !important;
  color:#fff !important;
  font-size:8px !important;
  line-height:1.3 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body.r287v14Active .r314PinnedItem small{
  color:rgba(255,255,255,.58) !important;
  font-size:6.5px !important;
  white-space:nowrap !important;
}

html body.r287v14Active .r314PinnedEmpty{
  margin:0 !important;
  color:rgba(243,234,217,.72) !important;
  font-size:8px !important;
}

/* Retour visuel bref sur le message rejoint. */
html body.r287v14Active .r287v14Message.r314PinnedTarget{
  background:rgba(242,138,69,.16) !important;
  box-shadow:inset 3px 0 0 var(--r287-orange) !important;
}

/* Formats étroits : le texte épinglé revient à la ligne sans se mélanger. */
@media (max-width:900px){
  html body.r287v14Active .r314PinnedItem{
    grid-template-columns:1fr auto !important;
  }
  html body.r287v14Active .r314PinnedItem strong{
    grid-column:1 !important;
  }
  html body.r287v14Active .r314PinnedItem small{
    grid-column:2 !important;
    grid-row:1 !important;
  }
  html body.r287v14Active .r314PinnedItem span{
    grid-column:1 / -1 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
}


/* ============================================================
   R315 — onglets Tchat : crème officiel / actif plus foncé.
   Aucun autre composant n'est modifié.
   ============================================================ */

/* Tous les onglets = crème officiel clair. */
html body.r287v14Active .r287v14Tab{
  background:var(--r287-cream) !important;
  color:var(--r287-slate) !important;
  border-color:rgba(6,28,41,.18) !important;
}

/* Onglet sélectionné = crème officiel plus foncé. */
html body.r287v14Active .r287v14Tab.isActive{
  background:var(--r287-cream-2) !important;
  color:var(--r287-slate) !important;
  border-color:rgba(6,28,41,.24) !important;
}

/* Fermeture et libellé gardent la même encre. */
html body.r287v14Active .r287v14TabLabel,
html body.r287v14Active .r287v14TabClose{
  color:inherit !important;
}


/* ============================================================
   R316 — alignement du bord haut des onglets avec le volet Tchat/Salon.
   Aucun changement fonctionnel.
   ============================================================ */

/* Le shell central reste ancré juste sous la navigation. */
html[data-ethnos-ui="discord-r111"] body.r287v14Active .r287v14Chat,
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  top:var(--topbar) !important;
  inset-block-start:var(--topbar) !important;
}

/* Le conteneur d'onglets commence exactement au bord haut du shell. */
html body.r287v14Active .r287v14Tabs{
  position:relative !important;
  top:0 !important;
  margin-top:0 !important;
  padding-top:0 !important;
  align-self:stretch !important;
}

/* Aucun onglet individuel ne descend sous la ligne supérieure. */
html body.r287v14Active .r287v14Tab{
  margin-top:0 !important;
  transform:none !important;
  align-self:start !important;
}

/* Même comportement sur formats étroits. */
@media (max-width:1200px){
  html body.r287v14Active .r287v14Tabs,
  html body.r287v14Active .r287v14Tab{
    top:0 !important;
    margin-top:0 !important;
    transform:none !important;
  }
}


/* ============================================================
   R317 — correction finale des onglets Tchat.
   - crème clair explicite
   - sélectionné crème plus foncé explicite
   - alignement bord haut avec le volet Salon/Tchat visible
   ============================================================ */

/* Le shell reste juste sous la barre de navigation. */
html[data-ethnos-ui="discord-r111"] body.r287v14Active .r287v14Chat,
html body.isTchatDrawerOpen.r287v14Active
.memberWorkspace > .r287v14Chat{
  top:var(--topbar) !important;
  inset-block-start:var(--topbar) !important;
}

/* Le bandeau d'onglets descend de 14px pour s'aligner avec le bord haut
   du volet Salon/Tchat visible à gauche. */
html body.r287v14Active .r287v14Tabs{
  position:relative !important;
  top:14px !important;
  margin-top:0 !important;
  padding:0 5px !important;
  height:28px !important;
  align-items:start !important;
}

/* Tous les onglets = crème officiel clair, valeur explicite. */
html body.r287v14Active .r287v14Tab{
  margin:0 !important;
  transform:none !important;
  height:28px !important;
  background:#F6EDDE !important;
  color:#071A39 !important;
  border:1px solid rgba(7,26,57,.16) !important;
  border-bottom:0 !important;
  border-radius:7px 7px 0 0 !important;
}

/* Onglet sélectionné = crème officiel nettement plus foncé. */
html body.r287v14Active .r287v14Tab.isActive{
  background:#E7D7BF !important;
  color:#071A39 !important;
  border-color:rgba(7,26,57,.26) !important;
  box-shadow:inset 0 -2px 0 rgba(7,26,57,.08) !important;
}

/* Libellé et croix gardent l'encre officielle. */
html body.r287v14Active .r287v14TabLabel,
html body.r287v14Active .r287v14TabClose{
  color:inherit !important;
}

/* Le contenu du salon suit le bandeau abaissé, sans chevauchement. */
html body.r287v14Active .r287v14Room{
  padding-top:14px !important;
}

/* Même géométrie sur formats étroits. */
@media (max-width:1200px){
  html body.r287v14Active .r287v14Tabs{
    top:14px !important;
  }
  html body.r287v14Active .r287v14Room{
    padding-top:14px !important;
  }
}


/* ============================================================
   R318 — MEDIA / EMOJIS / GIFS / GIFTS
   ETHNOS_LOCK:EMOJI_CATALOG:001
   ============================================================ */

html body.r287v14Active .r287v14Unread,
html body.r287v14Active .r287v14UnreadState{
  display:none !important;
}

html body.r287v14Active .r318MediaPopover{
  position:absolute !important;
  right:10px !important;
  bottom:58px !important;
  z-index:40 !important;
  width:min(560px,calc(100vw - 32px)) !important;
  max-height:min(560px,70vh) !important;
  overflow:auto !important;
  padding:12px !important;
  border:1px solid rgba(7,26,57,.18) !important;
  border-radius:16px !important;
  background:#F6EDDE !important;
  color:#071A39 !important;
  box-shadow:0 16px 38px rgba(0,0,0,.28) !important;
}
html body.r287v14Active .r318MediaPopover[hidden]{display:none !important}

html body.r287v14Active .r318PopoverHead{
  display:flex !important; align-items:center !important;
  justify-content:space-between !important; gap:12px !important;
  margin-bottom:10px !important;
}
html body.r287v14Active .r318PopoverHead strong{font-size:15px !important}
html body.r287v14Active .r318PopoverHead button{
  width:34px !important;height:34px !important;border-radius:10px !important;
}
html body.r287v14Active .r318MediaPopover input{
  width:100% !important; min-height:38px !important;
  border:1px solid rgba(7,26,57,.20) !important;
  border-radius:10px !important; padding:8px 10px !important;
  background:#fff !important; color:#071A39 !important;
}
html body.r287v14Active .r318EmojiGrid{margin-top:10px !important}
html body.r287v14Active .r318EmojiGrid section{margin:0 0 12px !important}
html body.r287v14Active .r318EmojiGrid h4{margin:0 0 6px !important;font-size:12px !important}
html body.r287v14Active .r318EmojiItems{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(38px,1fr)) !important;
  gap:4px !important;
}
html body.r287v14Active .r318Emoji{
  min-width:38px !important;height:38px !important;
  padding:0 !important;border-radius:8px !important;
  background:#fff !important;border:1px solid rgba(7,26,57,.10) !important;
  font-size:21px !important;
}
html body.r287v14Active .r318GifSearch{
  display:grid !important;grid-template-columns:1fr auto !important;gap:8px !important;
}
html body.r287v14Active .r318GifGrid{
  display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;margin-top:8px !important;
}
html body.r287v14Active .r318GifItem{
  overflow:hidden !important;padding:0 !important;border-radius:10px !important;
  background:#fff !important;border:1px solid rgba(7,26,57,.12) !important;
  color:#071A39 !important;
}
html body.r287v14Active .r318GifItem img{
  display:block !important;width:100% !important;height:110px !important;object-fit:cover !important;
}
html body.r287v14Active .r318GifItem span{
  display:block !important;padding:5px 7px !important;font-size:9px !important;
  overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
html body.r287v14Active .r318MediaStatus{font-size:10px !important;margin:8px 0 !important}
html body.r287v14Active .r318GiftCopy{
  margin:0 !important;padding:4px 2px 2px !important;
  font-size:14px !important;line-height:1.55 !important;text-align:left !important;
}
@media(max-width:720px){
  html body.r287v14Active .r318MediaPopover{
    left:8px !important;right:8px !important;width:auto !important;
  }
  html body.r287v14Active .r318GifGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}


/* ============================================================
   R319 — finition commerciale / boutons officiels / GIF
   ============================================================ */

/* Onglet actif : contraste plus marqué, sans modifier les onglets inactifs. */
html body.r287v14Active .r287v14Tab.isActive{
  background:#CDB48F !important;
  color:#071A39 !important;
  border-color:rgba(7,26,57,.30) !important;
}

/* Boutons de fermeture des popovers :
   aucune nouvelle peau. On laisse la référence .r287v14OnlineClose gagner. */
html body.r287v14Active .r318PopoverHead > .r287v14OnlineClose{
  flex:0 0 auto !important;
}

/* GIF : navigation rapide façon picker moderne, source ouverte conservée. */
html body.r287v14Active .r319GifQuick{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:8px 0 2px !important;
}
html body.r287v14Active .r319GifQuickButton{
  min-height:30px !important;
  padding:0 10px !important;
  border:1px solid rgba(7,26,57,.14) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#071A39 !important;
  font-size:10px !important;
  font-weight:700 !important;
}
html body.r287v14Active .r319GifSource{
  margin:8px 0 0 !important;
  color:#526775 !important;
  font-size:9px !important;
}

/* Gifts : vrai bloc commercial lisible. */
html body.r287v14Active .r319GiftCommercial{
  display:grid !important;
  gap:12px !important;
  padding:2px 2px 4px !important;
}
html body.r287v14Active .r319GiftComing{
  display:block !important;
  color:#F47F3C !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(22px,2vw,34px) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-.02em !important;
}
html body.r287v14Active .r319GiftTarget{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:max-content !important;
  max-width:100% !important;
  padding:9px 12px !important;
  border:1px solid rgba(7,26,57,.14) !important;
  border-radius:12px !important;
  background:#FFF7EA !important;
  color:#071A39 !important;
  font-size:13px !important;
  font-weight:800 !important;
}
html body.r287v14Active .r319GiftTarget > span:first-child{
  font-size:22px !important;
}
html body.r287v14Active .r318GiftCopy{
  margin:0 !important;
  color:#071A39 !important;
  opacity:1 !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:15px !important;
  font-weight:600 !important;
  line-height:1.55 !important;
  text-align:left !important;
}


/* ============================================================
   R320 — GIF picker façon Discord, fournisseur inchangé.
   ============================================================ */

html body.r287v14Active .r318MediaPopover.r320GifPopover{
  width:min(720px,calc(100vw - 32px)) !important;
  max-height:min(650px,78vh) !important;
  padding:14px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto auto auto auto minmax(180px,1fr) auto !important;
  gap:10px !important;
}

html body.r287v14Active .r320GifHead{
  margin:0 !important;
}

html body.r287v14Active .r320GifHeadCopy{
  display:grid !important;
  gap:2px !important;
}

html body.r287v14Active .r320GifHeadCopy > strong{
  font-size:17px !important;
  line-height:1 !important;
}

html body.r287v14Active .r320GifHeadCopy > span{
  color:#6A7880 !important;
  font-size:9px !important;
  font-weight:600 !important;
}

html body.r287v14Active .r320GifSearchWrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
}

html body.r287v14Active .r320GifSearchIcon{
  position:absolute !important;
  left:12px !important;
  z-index:1 !important;
  color:#61717A !important;
  font-size:18px !important;
  line-height:1 !important;
  pointer-events:none !important;
}

html body.r287v14Active .r320GifSearchInput{
  height:42px !important;
  min-height:42px !important;
  padding:0 12px 0 38px !important;
  border:1px solid rgba(7,26,57,.16) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#071A39 !important;
  font-size:12px !important;
  font-weight:600 !important;
  box-shadow:inset 0 1px 2px rgba(7,26,57,.04) !important;
}

html body.r287v14Active .r320GifCategories{
  display:flex !important;
  gap:6px !important;
  overflow-x:auto !important;
  padding:1px 1px 4px !important;
  scrollbar-width:thin !important;
}

html body.r287v14Active .r320GifCategory{
  flex:0 0 auto !important;
  min-height:30px !important;
  padding:0 10px !important;
  border:1px solid rgba(7,26,57,.13) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#071A39 !important;
  font-size:9px !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

html body.r287v14Active .r320GifCategory.isActive{
  background:#CDB48F !important;
  border-color:rgba(7,26,57,.24) !important;
}

html body.r287v14Active .r320GifStatus{
  min-height:14px !important;
  margin:0 !important;
  color:#5C6D76 !important;
  font-size:9px !important;
}

html body.r287v14Active .r320GifStatus.isLoading::before{
  content:"";
  display:inline-block !important;
  width:8px !important;
  height:8px !important;
  margin-right:5px !important;
  border:1px solid rgba(7,26,57,.18) !important;
  border-top-color:#F47F3C !important;
  border-radius:50% !important;
  animation:r320GifSpin .7s linear infinite !important;
}

@keyframes r320GifSpin{
  to{transform:rotate(360deg)}
}

html body.r287v14Active .r320GifGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  grid-auto-rows:116px !important;
  gap:6px !important;
  margin:0 !important;
  padding-right:3px !important;
  overflow-y:auto !important;
  min-height:180px !important;
  align-content:start !important;
}

html body.r287v14Active .r320GifCard{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:116px !important;
  overflow:hidden !important;
  padding:0 !important;
  border:0 !important;
  border-radius:9px !important;
  background:#D9CFBF !important;
  box-shadow:none !important;
}

html body.r287v14Active .r320GifImageWrap{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
}

html body.r287v14Active .r320GifCard img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .16s ease,filter .16s ease !important;
}

html body.r287v14Active .r320GifCardOverlay{
  position:absolute !important;
  inset:auto 6px 6px auto !important;
  padding:4px 6px !important;
  border-radius:6px !important;
  background:rgba(7,26,57,.82) !important;
  color:#fff !important;
  font-size:8px !important;
  font-weight:800 !important;
  opacity:0 !important;
  transform:translateY(3px) !important;
  transition:opacity .15s ease,transform .15s ease !important;
}

html body.r287v14Active .r320GifCard:hover img,
html body.r287v14Active .r320GifCard:focus-visible img{
  transform:scale(1.035) !important;
  filter:brightness(.90) !important;
}

html body.r287v14Active .r320GifCard:hover .r320GifCardOverlay,
html body.r287v14Active .r320GifCard:focus-visible .r320GifCardOverlay{
  opacity:1 !important;
  transform:none !important;
}

html body.r287v14Active .r320GifPreview{
  position:absolute !important;
  left:16px !important;
  bottom:48px !important;
  z-index:5 !important;
  width:220px !important;
  overflow:hidden !important;
  border:1px solid rgba(7,26,57,.18) !important;
  border-radius:12px !important;
  background:#fff !important;
  box-shadow:0 14px 34px rgba(0,0,0,.24) !important;
  pointer-events:none !important;
}

html body.r287v14Active .r320GifPreview[hidden]{
  display:none !important;
}

html body.r287v14Active .r320GifPreview img{
  display:block !important;
  width:100% !important;
  max-height:180px !important;
  object-fit:contain !important;
  background:#071A39 !important;
}

html body.r287v14Active .r320GifPreviewMeta{
  display:grid !important;
  gap:2px !important;
  padding:8px 9px !important;
}

html body.r287v14Active .r320GifPreviewMeta strong{
  overflow:hidden !important;
  color:#071A39 !important;
  font-size:9px !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

html body.r287v14Active .r320GifPreviewMeta span{
  color:#697981 !important;
  font-size:8px !important;
}

html body.r287v14Active .r320GifSource{
  margin:0 !important;
  color:#708087 !important;
  font-size:8px !important;
  text-align:right !important;
}

@media(max-width:900px){
  html body.r287v14Active .r320GifGrid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:108px !important;
  }
  html body.r287v14Active .r320GifCard{
    height:108px !important;
  }
}

@media(max-width:620px){
  html body.r287v14Active .r318MediaPopover.r320GifPopover{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-height:75vh !important;
  }
  html body.r287v14Active .r320GifGrid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:104px !important;
  }
  html body.r287v14Active .r320GifCard{
    height:104px !important;
  }
  html body.r287v14Active .r320GifPreview{
    display:none !important;
  }
}


/* ============================================================
   R321 — KLIPY + correctifs GIF
   ============================================================ */
html body.r287v14Active .r318MediaPopover.r321GifPopover[hidden],
html body.r287v14Active .r318MediaPopover.r320GifPopover[hidden]{
  display:none !important;
}
html body.r287v14Active .r318MediaPopover.r321GifPopover{
  width:min(720px,calc(100vw - 32px)) !important;
  max-height:min(650px,78vh) !important;
  padding:14px !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-rows:auto auto auto auto minmax(180px,1fr) auto !important;
  gap:10px !important;
}
html body.r287v14Active
.r318MediaPopover.r321GifPopover
input.r320GifSearchInput{
  box-sizing:border-box !important;
  width:100% !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 12px 0 46px !important;
  text-indent:0 !important;
  border:1px solid rgba(7,26,57,.16) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:#071A39 !important;
  font-size:12px !important;
  font-weight:600 !important;
}
html body.r287v14Active .r321GifPopover .r320GifSearchIcon{
  left:14px !important;
  width:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none !important;
}
html body.r287v14Active .r321MessageGif{
  display:block !important;
  width:min(420px,72vw) !important;
  margin:7px 0 2px !important;
  overflow:hidden !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.12) !important;
}
html body.r287v14Active .r321MessageGif img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:360px !important;
  object-fit:contain !important;
}
html body.r287v14Active .r321MessageGif figcaption{
  padding:4px 7px !important;
  color:rgba(255,255,255,.54) !important;
  font-size:7px !important;
}
html body.r287v14Active .r320GifStatus.isConfigRequired{
  padding:10px !important;
  border:1px solid rgba(244,127,60,.28) !important;
  border-radius:9px !important;
  background:#FFF7EA !important;
  color:#071A39 !important;
  font-size:10px !important;
  font-weight:700 !important;
}
@media(max-width:620px){
  html body.r287v14Active .r318MediaPopover.r321GifPopover{
    left:8px !important;
    right:8px !important;
    width:auto !important;
    max-height:75vh !important;
  }
  html body.r287v14Active .r321MessageGif{
    width:min(100%,320px) !important;
  }
}


/* ============================================================
   R322 — upload image + GIF/Stickers
   ============================================================ */

html body.r287v14Active .r322MediaTabs{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
  padding:2px !important;
  border-radius:11px !important;
  background:rgba(7,26,57,.06) !important;
}
html body.r287v14Active .r322MediaTab{
  min-height:34px !important;
  border:1px solid transparent !important;
  border-radius:9px !important;
  background:transparent !important;
  color:#071A39 !important;
  font-size:10px !important;
  font-weight:800 !important;
}
html body.r287v14Active .r322MediaTab.isActive{
  background:#CDB48F !important;
  border-color:rgba(7,26,57,.18) !important;
}
html body.r287v14Active .r322UploadedImage{
  display:block !important;
  width:min(440px,72vw) !important;
  margin:7px 0 2px !important;
  overflow:hidden !important;
  border-radius:10px !important;
  background:rgba(0,0,0,.10) !important;
}
html body.r287v14Active .r322UploadedImage img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:420px !important;
  object-fit:contain !important;
}
html body.r287v14Active .r287v14Hint.isFileReady{
  color:rgba(255,255,255,.72) !important;
}


/* ============================================================
   R323 — picker compact + visionneuse image
   ============================================================ */

/* Supprime la grande réserve verticale créée par R320/R321. */
html body.r287v14Active .r318MediaPopover.r321GifPopover.r322MediaPicker{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
  overflow:hidden !important;
}

html body.r287v14Active .r322MediaPicker .r320GifGrid{
  flex:1 1 auto !important;
  min-height:180px !important;
  margin-top:0 !important;
  align-content:start !important;
}

html body.r287v14Active .r322MediaPicker .r320GifStatus{
  flex:0 0 auto !important;
  margin-bottom:0 !important;
}

/* Image dans le message = bouton neutre, image inchangée. */
html body.r287v14Active .r323ImageZoom{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  background:transparent !important;
  cursor:zoom-in !important;
}

html body.r287v14Active .r323ImageZoom img{
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:420px !important;
  object-fit:contain !important;
}

/* Visionneuse */
.r323ImageViewer{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  background:rgba(4,18,27,.88) !important;
}

.r323ImageViewerPanel{
  display:grid !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  width:min(1200px,96vw) !important;
  height:min(860px,94vh) !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  background:#F6EDDE !important;
  box-shadow:0 24px 80px rgba(0,0,0,.44) !important;
}

.r323ImageViewerHead{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  padding:12px 14px !important;
  border-bottom:1px solid rgba(7,26,57,.12) !important;
  color:#071A39 !important;
}

.r323ImageViewerHead > strong{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
}

.r323ImageViewerControls{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
}

.r323ImageDownload{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:0 14px !important;
  border:1px solid rgba(7,26,57,.18) !important;
  border-radius:10px !important;
  background:#F47F3C !important;
  color:#071A39 !important;
  text-decoration:none !important;
  font-size:11px !important;
  font-weight:800 !important;
}

.r323ImageViewerCanvas{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:0 !important;
  padding:16px !important;
  overflow:auto !important;
  background:#0B2C3A !important;
}

.r323ImageViewerCanvas img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
}

@media(max-width:700px){
  .r323ImageViewer{
    padding:8px !important;
  }
  .r323ImageViewerPanel{
    width:100% !important;
    height:92vh !important;
  }
  .r323ImageViewerHead{
    padding:9px 10px !important;
  }
  .r323ImageDownload{
    min-height:34px !important;
    padding:0 10px !important;
    font-size:10px !important;
  }
}

/* ============================================================
   R325 — finitions locales du composeur Tchat
   - bouton + : géométrie historique 32px, seul le glyphe + est agrandi
   - Traduction : même popover que Gifts, contrôles compacts
   Aucun autre composant n'est ciblé.
   ============================================================ */
html[data-ethnos-ui] body.r287v14Active .r287v14ComposerRow{
  grid-template-columns:32px minmax(0,1fr) auto 62px;
}

html[data-ethnos-ui] body.r287v14Active .r287v14ComposerRow > button:first-child{
  width:auto;
  min-width:0;
  height:32px;
  min-height:32px;
  max-height:32px;
  padding:0;
  font-size:24px;
  line-height:1;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationPanel{
  display:grid;
  gap:10px;
  padding:2px 0 0;
  color:#071A39;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationToggle{
  display:inline-flex;
  align-items:center;
  justify-self:start;
  gap:7px;
  color:#071A39;
  font:700 10px/1.3 Inter,Arial,sans-serif;
  cursor:pointer;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationToggle input{
  appearance:auto !important;
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  min-height:16px !important;
  margin:0 !important;
  padding:0 !important;
  accent-color:#F47F3C;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationLanguage{
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:6px;
  color:#071A39;
  font:700 10px/1.3 Inter,Arial,sans-serif;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationSelectWrap{
  position:relative;
  width:100%;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationLanguage select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:38px;
  box-sizing:border-box;
  border:1px solid rgba(7,26,57,.20);
  border-radius:10px;
  background:#fff;
  color:#071A39;
  padding:8px 36px 8px 10px;
  font:600 10px/1.3 Inter,Arial,sans-serif;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationSelectArrow{
  position:absolute;
  right:12px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid #071A39;
  border-bottom:2px solid #071A39;
  transform:translateY(-65%) rotate(45deg);
  pointer-events:none;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationLanguage select:disabled{
  opacity:.52;
  cursor:not-allowed;
}

html[data-ethnos-ui] body.r287v14Active .r324TranslationStatus{
  margin:0;
  color:rgba(7,26,57,.58);
  font:600 9px/1.35 Inter,Arial,sans-serif;
}


/* ============================================================
   R326 — fonctions supplémentaires du Tchat
   Intégration locale au moteur R287/R325 existant.
   ============================================================ */

/* Aide contextuelle du compositeur : mentions @ et commandes /. */
html[data-ethnos-ui] body.r287v14Active .r326ComposerAssist{
  position:absolute;
  right:82px;
  bottom:58px;
  z-index:42;
  width:min(320px,calc(100vw - 36px));
  max-height:240px;
  overflow:auto;
  padding:8px;
  border:1px solid rgba(7,26,57,.18);
  border-radius:12px;
  background:#F6EDDE;
  color:#071A39;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}
html[data-ethnos-ui] body.r287v14Active .r326ComposerAssist[hidden]{display:none}
html[data-ethnos-ui] body.r287v14Active .r326ComposerAssist > strong{
  display:block;
  margin:1px 4px 6px;
  font:800 10px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326AssistItem{
  display:flex;
  width:100%;
  min-height:32px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:2px 0;
  padding:6px 8px;
  border:1px solid rgba(7,26,57,.10);
  border-radius:8px;
  background:#fff;
  color:#071A39;
  text-align:left;
  cursor:pointer;
  font:700 9px/1.25 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326AssistItem:hover{
  background:#E7D7BF;
}
html[data-ethnos-ui] body.r287v14Active .r326AssistItem small{
  color:rgba(7,26,57,.58);
  font-size:8px;
  font-weight:600;
}

/* Mentions, Markdown et spoilers dans les messages. */
html[data-ethnos-ui] body.r287v14Active .r326Mention{
  display:inline-block;
  padding:1px 4px;
  border-radius:4px;
  background:rgba(244,127,60,.20);
  color:#ffd7bd;
  font-weight:800;
}
html[data-ethnos-ui] body.r287v14Active .r287v14Text code{
  padding:1px 4px;
  border-radius:4px;
  background:rgba(0,0,0,.28);
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
html[data-ethnos-ui] body.r287v14Active .r326Spoiler{
  display:inline-block;
  width:auto;
  height:auto;
  min-height:0;
  padding:1px 5px;
  border:0;
  border-radius:4px;
  background:#061720;
  color:transparent;
  cursor:pointer;
  font:inherit;
}
html[data-ethnos-ui] body.r287v14Active .r326Spoiler.isRevealed{
  color:#fff;
  background:rgba(243,234,217,.10);
}

/* Message vocal. */
html[data-ethnos-ui] body.r287v14Active .r287v14ComposerTools button.isActive[title="Message vocal"]{
  background:#F47F3C;
  color:#071A39;
}
html[data-ethnos-ui] body.r287v14Active .r326VoiceMessage{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  max-width:420px;
}
html[data-ethnos-ui] body.r287v14Active .r326VoiceMessage audio{
  width:min(330px,60vw);
  height:34px;
}
html[data-ethnos-ui] body.r287v14Active .r326VoiceMessage small{
  color:rgba(255,255,255,.54);
  font:600 7px/1.2 Inter,Arial,sans-serif;
}

/* Transfert. */
html[data-ethnos-ui] body.r287v14Active .r326Forwarded{
  margin-bottom:3px;
  color:rgba(255,255,255,.50);
  font:700 7px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ForwardMenu select{
  min-height:24px;
  border:1px solid rgba(243,234,217,.16);
  border-radius:8px;
  background:#102d3d;
  color:#fff;
  padding:2px 24px 2px 7px;
  font:700 7px/1.1 Inter,Arial,sans-serif;
}

/* Fil de discussion : panneau local inséré au-dessus du compositeur. */
html[data-ethnos-ui] body.r287v14Active .r326ThreadPanel{
  flex:0 0 auto;
  max-height:260px;
  display:grid;
  grid-template-rows:auto auto minmax(60px,1fr) auto;
  gap:7px;
  padding:9px;
  border-top:1px solid var(--r287-line);
  background:#0d2735;
  color:#fff;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadHead strong{
  font:800 10px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadSource{
  margin:0;
  padding:6px 8px;
  border-left:2px solid #F47F3C;
  background:rgba(243,234,217,.05);
  color:rgba(255,255,255,.68);
  font:600 8px/1.3 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadList{
  min-height:0;
  overflow:auto;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadEmpty{
  margin:4px 0;
  color:rgba(255,255,255,.45);
  font:600 8px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadReply{
  padding:5px 0;
  border-bottom:1px solid rgba(243,234,217,.08);
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadReply strong{
  display:block;
  color:#F6EDDE;
  font:800 8px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadReply p{
  margin:2px 0 0;
  color:rgba(255,255,255,.76);
  font:500 8px/1.35 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadComposer{
  display:grid;
  grid-template-columns:minmax(0,1fr) 62px;
  gap:5px;
}
html[data-ethnos-ui] body.r287v14Active .r326ThreadComposer textarea{
  min-height:34px;
  resize:none;
  box-sizing:border-box;
  border:1px solid rgba(243,234,217,.16);
  border-radius:8px;
  background:#102d3d;
  color:#fff;
  padding:7px 8px;
  font:500 8px/1.3 Inter,Arial,sans-serif;
}

/* Mode lent : même popover que les autres outils du composeur. */
html[data-ethnos-ui] body.r287v14Active .r326SlowPanel{
  display:grid;
  gap:8px;
  color:#071A39;
}
html[data-ethnos-ui] body.r287v14Active .r326SlowPanel label{
  display:grid;
  gap:5px;
  font:800 10px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326SlowPanel select{
  min-height:38px;
  border:1px solid rgba(7,26,57,.20);
  border-radius:10px;
  background:#fff;
  color:#071A39;
  padding:8px 10px;
  font:600 10px/1.2 Inter,Arial,sans-serif;
}
html[data-ethnos-ui] body.r287v14Active .r326SlowPanel p{
  margin:0;
  color:rgba(7,26,57,.58);
  font:600 9px/1.35 Inter,Arial,sans-serif;
}

@media(max-width:720px){
  html[data-ethnos-ui] body.r287v14Active .r326ComposerAssist{
    left:8px;
    right:8px;
    width:auto;
  }
  html[data-ethnos-ui] body.r287v14Active .r326ThreadPanel{
    max-height:220px;
  }
}


/* ============================================================
   R327 — barre d'actions contextuelle au survol des messages
   Correction locale : présentation des actions déjà disponibles.
   Aucun moteur global ni changement du layout du salon.
   ============================================================ */
html body.r287v14Active .r287v14Message{
  position:relative !important;
}

html body.r287v14Active .r327MessageToolbar{
  position:absolute !important;
  top:-12px !important;
  right:8px !important;
  z-index:8 !important;
  display:flex !important;
  align-items:center !important;
  gap:2px !important;
  min-height:30px !important;
  padding:3px !important;
  border:1px solid rgba(243,234,217,.14) !important;
  border-radius:9px !important;
  background:#173543 !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(3px) !important;
  transition:opacity .12s ease,transform .12s ease,visibility .12s ease !important;
}

html body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

html body.r287v14Active .r327MessageToolbar > button,
html body.r287v14Active .r327MoreWrap > button{
  width:28px !important;
  min-width:28px !important;
  height:26px !important;
  min-height:26px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#F6EDDE !important;
  font:700 14px/1 Arial,sans-serif !important;
  cursor:pointer !important;
}

html body.r287v14Active .r327MessageToolbar > button:hover,
html body.r287v14Active .r327MoreWrap > button:hover,
html body.r287v14Active .r327MessageToolbar > button.isActive{
  background:rgba(246,237,222,.10) !important;
}

html body.r287v14Active .r327QuickReaction{
  font-size:16px !important;
}

html body.r287v14Active .r327MoreWrap{
  position:relative !important;
  display:flex !important;
}

html body.r287v14Active .r327ReactionPicker,
html body.r287v14Active .r327MoreMenu{
  position:absolute !important;
  z-index:12 !important;
  right:0 !important;
  top:34px !important;
  padding:5px !important;
  border:1px solid rgba(243,234,217,.14) !important;
  border-radius:9px !important;
  background:#173543 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.32) !important;
}

html body.r287v14Active .r327ReactionPicker[hidden],
html body.r287v14Active .r327MoreMenu[hidden]{
  display:none !important;
}

html body.r287v14Active .r327ReactionPicker{
  display:grid !important;
  grid-template-columns:repeat(4,30px) !important;
  gap:3px !important;
}

html body.r287v14Active .r327ReactionPicker button{
  width:30px !important;
  height:28px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  font-size:16px !important;
  cursor:pointer !important;
}

html body.r287v14Active .r327ReactionPicker button:hover{
  background:rgba(246,237,222,.10) !important;
}

html body.r287v14Active .r327MoreMenu{
  display:flex !important;
  flex-direction:column !important;
  min-width:130px !important;
  gap:2px !important;
}

html body.r287v14Active .r327MoreMenu button{
  min-height:28px !important;
  padding:0 9px !important;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:#F6EDDE !important;
  text-align:left !important;
  font:700 8px/1 Inter,Arial,sans-serif !important;
  cursor:pointer !important;
}

html body.r287v14Active .r327MoreMenu button:hover{
  background:rgba(246,237,222,.10) !important;
}

html body.r287v14Active .r327MoreMenu button.isDanger{
  color:#ffb7ad !important;
}

html body.r287v14Active .r327ReactionBar{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:4px !important;
  min-height:24px !important;
  margin-top:5px !important;
}

html body.r287v14Active .r327ReactionChip,
html body.r287v14Active .r327ReactionAdd{
  min-width:28px !important;
  height:24px !important;
  min-height:24px !important;
  padding:0 7px !important;
  border:1px solid rgba(243,234,217,.13) !important;
  border-radius:7px !important;
  background:rgba(243,234,217,.06) !important;
  color:#F6EDDE !important;
  font:700 9px/1 Inter,Arial,sans-serif !important;
  cursor:pointer !important;
}

html body.r287v14Active .r327ReactionChip.isActive{
  border-color:rgba(244,127,60,.65) !important;
  background:rgba(244,127,60,.18) !important;
}

html body.r287v14Active .r327ReactionAdd{
  width:28px !important;
  padding:0 !important;
  font-size:13px !important;
}

@media (hover:none){
  html body.r287v14Active .r327MessageToolbar{
    position:static !important;
    width:max-content !important;
    margin:4px 0 0 auto !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    box-shadow:none !important;
  }
}


/* ============================================================
   R328 — volet gauche Tchat
   1) Accueil Tchat : fond crème.
   2) Salon ouvert : volet contextuel crème existant + Récents repliable.
   3) Aucun changement de largeur, de layout global ni de navigation.
   ============================================================ */

/* Accueil / volet Tchat historique : même géométrie, nouvelle teinte crème. */
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel{
  background:#F6EDDE !important;
  background-image:none !important;
  color:#071A39 !important;
}

html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel > .memberExplorerHead,
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel > .memberExplorerBody{
  background:transparent !important;
  color:#071A39 !important;
}

/* Adaptation locale des textes qui étaient explicitement blancs sur l'ancien fond sombre. */
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel .memberExplorerHead h2,
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel .salonExplorerLabel,
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel .salonQuickSearch label > span,
html body.isTchatDrawerOpen:not(.r287v14Active) .memberExplorerPanel .salonDeepSearchTagline{
  color:#071A39 !important;
  text-shadow:none !important;
}

/* Salon ouvert : Récents compact et repliable. */
html body.r287v14Active .r328RecentBlock{
  margin:9px 0 0 !important;
  border-top:1px solid rgba(6,28,41,.12) !important;
  padding-top:7px !important;
}

html body.r287v14Active .r328RecentToggle{
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto 14px !important;
  align-items:center !important;
  gap:7px !important;
  width:100% !important;
  min-height:31px !important;
  padding:0 8px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#776A5D !important;
  text-align:left !important;
  font:800 9px/1.2 Inter,Arial,sans-serif !important;
  letter-spacing:.11em !important;
  text-transform:uppercase !important;
  cursor:pointer !important;
}

html body.r287v14Active .r328RecentToggle:hover{
  background:rgba(6,28,41,.06) !important;
}

html body.r287v14Active .r328RecentCount{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:18px !important;
  height:18px !important;
  padding:0 5px !important;
  border-radius:9px !important;
  background:rgba(6,28,41,.08) !important;
  color:#263C48 !important;
  font:800 8px/1 Inter,Arial,sans-serif !important;
  letter-spacing:0 !important;
}

html body.r287v14Active .r328RecentArrow{
  width:7px !important;
  height:7px !important;
  justify-self:center !important;
  border-right:2px solid #776A5D !important;
  border-bottom:2px solid #776A5D !important;
  transform:rotate(45deg) translate(-1px,-1px) !important;
  transition:transform .12s ease !important;
}

html body.r287v14Active .r328RecentToggle.isOpen .r328RecentArrow{
  transform:rotate(225deg) translate(-1px,-1px) !important;
}

html body.r287v14Active .r328RecentList[hidden]{
  display:none !important;
}

html body.r287v14Active .r328RecentList{
  padding:3px 0 0 !important;
}


/* ============================================================
   R329 — navigation du volet gauche Tchat
   - Salon ouvert : Contexte -> Explorer -> Récents.
   - Explorer réutilise le vrai volet Tchat historique.
   - Une seule croix bleue commune aux deux états.
   ============================================================ */

/* Ordre local exact du volet salon ouvert. */
html body.r287v14Active .r287v14ContextList > .r287v14Explore{
  width:calc(100% - 10px) !important;
  margin:8px 5px 5px !important;
  min-height:34px !important;
  padding:0 14px !important;
  border:1px solid rgba(6,28,41,.16) !important;
  border-radius:9px !important;
  background:#F47F3C !important;
  color:#071A39 !important;
  box-shadow:0 3px 0 rgba(6,28,41,.20) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer !important;
}

/* Le vieux mini-explorateur R287 reste dans le DOM mais n'est plus utilisé. */
html body.r287v14Active .r287v14Explorer{
  display:none !important;
}

/* Croix unique : visible sur le volet Tchat d'accueil et sur sa version coulissante. */
/* En salon, le contenu historique conserve sa géométrie native et coulisse au-dessus du contexte. */
html body.r287v14Active .memberExplorerPanel > .memberExplorerHead,
html body.r287v14Active .memberExplorerPanel > .memberExplorerBody{
  position:relative !important;
  z-index:70 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  background:#F6EDDE !important;
  color:#071A39 !important;
  transform:translateX(-104%) !important;
  transition:transform .22s ease !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* L'état ouvert réaffiche le vrai volet historique avec son flux flex existant. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerHead,
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerBody{
  display:flex !important;
  transform:translateX(0) !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerHead{
  flex:0 0 auto !important;
  z-index:72 !important;
}

html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerBody{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
}

/* Le panneau contextuel reste dessous et ne reçoit pas de clic pendant l'exploration. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .r287v14Left{
  pointer-events:none !important;
}

/* La croix reste au-dessus du panneau coulissant. */
/* ============================================================
   R330 — correctif volet Tchat réutilisé depuis un salon
   Cause prouvée : les titres historiques étaient explicitement blancs
   (R118) et devenaient invisibles sur le fond crème ; le bouton Rechercher
   n'était pas forcé dans l'état r329HomeTchatOpen.
   ============================================================ */

/* Croix : même esprit bleu clair que le volet salon, mais plus petite. */
/* Le vrai titre Tchat du volet historique doit rester visible sur crème. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerHead{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  min-height:42px !important;
  padding:6px 32px 8px 8px !important;
  border-bottom:1px solid rgba(7,26,57,.10) !important;
  background:#F6EDDE !important;
}

html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerHead h2{
  display:block !important;
  margin:0 !important;
  color:#071A39 !important;
  text-shadow:none !important;
}

/* Les titres Recherche rapide / approfondie et la baseline étaient blancs. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen
:is(.salonExplorerLabel,.salonQuickSearch label > span,.salonDeepSearchTagline){
  display:block !important;
  color:#071A39 !important;
  text-shadow:none !important;
}

/* Le vrai bouton Recherche du volet d'origine reste présent et au standard. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen
.salonQuickSearch > button.ethnosActionOrange{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:72% !important;
  min-width:0 !important;
  min-height:32px !important;
  height:32px !important;
  margin:2px auto 0 !important;
  padding:0 12px !important;
  border:1px solid rgba(255,188,139,.78) !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#ff9655 0%,#f47f3c 100%) !important;
  color:#071826 !important;
  box-shadow:0 3px 0 #cf5d25,0 6px 10px rgba(0,0,0,.14) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:10px !important;
  font-weight:600 !important;
}

/* Corps historique : conserver ses sections et son flux entier. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerBody{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  min-height:0 !important;
  padding:8px 10px 10px !important;
  background:#F6EDDE !important;
  color:#071A39 !important;
  overflow-y:auto !important;
}


/* ============================================================
   R331 — raccord recherche Tchat depuis un salon
   Cause démontrée :
   - .r287v14Chat = z-index 80
   - .salonDrawerStage historique = z-index 4/12
   - .salonCentralResultsWindow = z-index 12
   Les clics fonctionnaient, mais les volets étaient rendus derrière le Tchat.
   ============================================================ */

/* Croix demandée : standard bleu foncé historique, simplement réduite. */
/* Uniquement lorsque le vrai volet Tchat est ouvert depuis un salon :
   faire passer les volets historiques AU-DESSUS du moteur R287 (z=80). */
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonDrawerStage{
  z-index:120 !important;
  visibility:visible !important;
}

html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonCentralResultsWindow{
  z-index:130 !important;
  visibility:visible !important;
}

/* Les panneaux de recherche doivent recevoir les clics, pas le Tchat dessous. */
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonDrawerStage .salonDrawerStack,
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonCentralResultsWindow{
  pointer-events:auto !important;
}


/* ============================================================
   R332 — fermeture des volets Tchat
   - aucune petite croix ajoutée ;
   - réutilisation du bouton historique "Fermer".
   ============================================================ */

/* Le titre n'a plus à réserver de place pour une croix. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .memberExplorerHead{
  padding:6px 8px 8px !important;
}

/* Le bouton historique Fermer redevient visible dans le volet Tchat salon. */
html body.r287v14Active .memberExplorerPanel.r329HomeTchatOpen > .r186TchatClose{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  justify-content:center !important;
  width:calc(100% - 28px) !important;
  min-width:0 !important;
  min-height:38px !important;
  margin:10px 14px 14px !important;
  padding:0 14px !important;
  border:1px solid rgba(255,211,183,.92) !important;
  border-radius:10px !important;
  background:linear-gradient(180deg,#ffad7a 0%,#ee8d55 100%) !important;
  color:#071826 !important;
  box-shadow:0 1px 0 #c96d3d,0 3px 5px rgba(0,0,0,.11) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-weight:700 !important;
  cursor:pointer !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Sur le volet Tchat d'origine, on garde également uniquement ce bouton existant. */
html body.isTchatDrawerOpen:not(.r287v14Active)
.memberExplorerPanel > .r186TchatClose{
  display:flex !important;
}


/* ============================================================
   R333 — affichage réel des volets de recherche depuis Tchat salon
   Diagnostic final :
   - le moteur historique crée bien .salonDrawerStage / .salonCentralResultsWindow ;
   - ces éléments vivent dans .memberWorkspace en même temps que .r287v14Chat ;
   - le simple relèvement de z-index R331 ne suffit pas contre les contextes
     d'empilement actifs du shell Tchat.
   Correction locale : le shell R287 est masqué UNIQUEMENT tant qu'un vrai
   volet historique de recherche existe. Aucun moteur de recherche dupliqué.
   ============================================================ */

/* Un niveau de recherche historique existe : il devient la vue centrale active. */
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace:has(> .salonDrawerStage) > .r287v14Chat,
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace:has(> .salonCentralResultsWindow) > .r287v14Chat{
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Le vrai volet historique prend alors la main dans le workspace. */
html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonDrawerStage{
  z-index:200 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonDrawerStage > .salonDrawerStack{
  z-index:201 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

html body.r331HomeTchatSearchOpen.r287v14Active
.memberWorkspace > .salonCentralResultsWindow{
  z-index:210 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Quand le dernier volet est fermé, :has() devient faux :
   le shell Tchat réapparaît automatiquement, sans observer le DOM. */


/* ============================================================
   R336 — finitions responsive ciblées
   Base fonctionnelle : R333.
   Formats : 1280×720, 1336/1366×768, 1536×864, 1707×1067, 1920×1080.
   Aucun changement de moteur.
   ============================================================ */

/* ------------------------------------------------------------
   1920×1080 : barre d'actions messages cachée par défaut.
   Le fallback tactile @media(hover:none) de R327 pouvait la rendre visible.
   Sur ce format desktop, on restaure explicitement le comportement souris.
   ------------------------------------------------------------ */
@media (min-width:1850px) and (max-width:1950px) and
       (min-height:1020px) and (max-height:1120px){
  html body.r287v14Active .r327MessageToolbar{
    position:absolute !important;
    width:auto !important;
    margin:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(3px) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
  }

  html body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
  html body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
  }
}

/* ------------------------------------------------------------
   Formats compacts communs :
   1280×720 / 1336-1366×768 / 1536×864
   ------------------------------------------------------------ */
@media (min-width:1240px) and (max-width:1580px) and
       (min-height:690px) and (max-height:900px){

  /* Profil compact : pseudonyme réellement plus petit.
     Valeur prioritaire précédente : jusqu'à 18px. */
  html[data-ethnos-ui="discord-r111"] body
  .memberRightRail .memberProfile.memberProfileCompact:not(.isExpanded)
  .memberIdentityText > h2[data-member-name],
  html body .memberRightRail .memberProfileCompact
  .memberIdentity h2[data-member-name]{
    font-size:12px !important;
    line-height:.98 !important;
    letter-spacing:-.01em !important;
  }

  /* Gifts + Emojis uniquement.
     Base : 560px × max 560px.
     Cible : largeur -25% = 420px ; hauteur /2 = 280px. */
  html body.r287v14Active .r318MediaPopover[data-mode="gifts"],
  html body.r287v14Active .r318MediaPopover[data-mode="emoji"]{
    width:min(420px,calc(100vw - 32px)) !important;
    max-height:280px !important;
    padding:9px !important;
    border-radius:12px !important;
    overflow:auto !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318PopoverHead,
  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318PopoverHead{
    margin-bottom:6px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318PopoverHead strong,
  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318PopoverHead strong{
    font-size:12px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftCommercial{
    gap:7px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftComing{
    font-size:18px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftTarget{
    padding:6px 9px !important;
    font-size:10px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftTarget > span:first-child{
    font-size:16px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318GiftCopy{
    font-size:10px !important;
    line-height:1.35 !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] input{
    min-height:30px !important;
    height:30px !important;
    padding:5px 8px !important;
    font-size:10px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid{
    margin-top:6px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid section{
    margin-bottom:7px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid h4{
    margin-bottom:4px !important;
    font-size:9px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiItems{
    grid-template-columns:repeat(auto-fill,minmax(30px,1fr)) !important;
    gap:3px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318Emoji{
    min-width:30px !important;
    height:30px !important;
    font-size:17px !important;
  }

  /* Volets Afrique → pays → thèmes → catégories :
     ciblage par TYPE, pas par position DOM, pour ne pas reproduire R334. */
  html body.isTchatDrawerOpen .salonDrawerPanel--continent,
  html body.isTchatDrawerOpen .salonDrawerPanel--countries{
    flex:0 0 190px !important;
    width:190px !important;
    max-width:190px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerPanel--themes,
  html body.isTchatDrawerOpen .salonDrawerPanel--topics,
  html body.isTchatDrawerOpen .salonDrawerPanel--detail{
    flex:0 0 210px !important;
    width:210px !important;
    max-width:210px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerPanel--final{
    flex:0 0 210px !important;
    width:210px !important;
    max-width:210px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerHead{
    padding:10px 10px 8px !important;
  }

  html body.isTchatDrawerOpen .salonDrawerHead h2{
    font-size:15px !important;
    line-height:1.05 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerDescription{
    margin-top:4px !important;
    font-size:8.5px !important;
    line-height:1.32 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerPanel
  .salonDrawerListButton strong{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerPanel
  .salonDrawerListButton small{
    font-size:7.5px !important;
    line-height:1.15 !important;
  }
}

/* ------------------------------------------------------------
   1707×1067 : ouvrir le Tchat depuis l'Accueil ne doit pas
   effacer le contenu central R204.
   R185 masque génériquement tous les enfants du workspace quand
   isTchatDrawerOpen est actif. On restitue UNIQUEMENT bodyView-home.
   ------------------------------------------------------------ */
@media (min-width:1685px) and (max-width:1725px) and
       (min-height:1040px) and (max-height:1090px){
  html body.isEthnosHomeView.isTchatDrawerOpen:not(.r287v14Active)
  .memberWorkspace > .bodyView-home{
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
  }
}


/* ============================================================
   R337 — bouton historique Fermer réellement intégré au Tchat salon
   Cause : R332 forçait son affichage comme enfant direct du panneau,
   mais le corps coulissant occupait toute la hauteur disponible.
   Le bouton restait donc hors du flux visible.
   R337 déplace LE MÊME bouton dans .memberExplorerBody pendant l'ouverture.
   ============================================================ */

html body.r287v14Active
.memberExplorerPanel.r329HomeTchatOpen
.memberExplorerBody > .r186TchatClose.r337TchatCloseInBody{
  position:sticky !important;
  z-index:76 !important;
  left:auto !important;
  right:auto !important;
  bottom:0 !important;
  display:flex !important;
  flex:0 0 38px !important;
  align-items:center !important;
  justify-content:center !important;
  width:calc(100% - 8px) !important;
  min-width:0 !important;
  height:38px !important;
  min-height:38px !important;
  max-height:38px !important;
  margin:12px 4px 4px !important;
  padding:0 14px !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* En dehors du mode coulissant, aucun changement au bouton historique. */


/* ============================================================
   R338 — audit responsive corrigé
   IMPORTANT : les règles utilisent la LARGEUR CSS uniquement.
   Les hauteurs écran 720/768/864 ne sont pas des hauteurs viewport fiables.
   ============================================================ */

/* ------------------------------------------------------------
   Desktop souris : les actions message ne sont JAMAIS visibles au repos.
   Corrige le fallback @media(hover:none) qui peut être déclenché à tort
   sur certains environnements desktop / écrans tactiles hybrides.
   ------------------------------------------------------------ */
@media (pointer:fine){
  html body.r287v14Active .r327MessageToolbar{
    position:absolute !important;
    width:auto !important;
    margin:0 !important;
    opacity:0 !important;
    visibility:hidden !important;
    transform:translateY(3px) !important;
    box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
  }

  html body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
  html body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateY(0) !important;
  }
}

/* ------------------------------------------------------------
   1280 / 1336-1366 / 1536 : plage commune basée sur largeur seule.
   ------------------------------------------------------------ */
@media (min-width:1200px) and (max-width:1580px){

  /* Pseudonymes : profil compact + liste des membres en ligne du salon. */
  html body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
  html body .memberProfileCompact:not(.isExpanded) .memberIdentity h2[data-member-name]{
    font-size:12px !important;
    line-height:.98 !important;
  }

  html body.r287v14Active .r287v14MemberCopy strong{
    font-size:10px !important;
    line-height:1.15 !important;
  }

  html body.r287v14Active .r287v14MemberCopy small{
    font-size:8px !important;
    line-height:1.15 !important;
  }

  /* Gifts / Emojis : largeur -25 % et hauteur cible divisée par 2.
     La base active est 560 px, cible 420 × 280. */
  html body.r287v14Active .r318MediaPopover[data-mode="gifts"],
  html body.r287v14Active .r318MediaPopover[data-mode="emoji"]{
    width:min(420px,calc(100vw - 24px)) !important;
    max-width:420px !important;
    height:min(280px,calc(100vh - 90px)) !important;
    max-height:280px !important;
    min-height:0 !important;
    padding:8px !important;
    overflow:auto !important;
    border-radius:12px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318PopoverHead,
  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318PopoverHead{
    margin-bottom:5px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318PopoverHead strong,
  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318PopoverHead strong{
    font-size:11px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftCommercial{
    gap:6px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftComing{
    font-size:16px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftTarget{
    padding:5px 8px !important;
    font-size:9px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r319GiftTarget > span:first-child{
    font-size:15px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="gifts"] .r318GiftCopy{
    font-size:9px !important;
    line-height:1.28 !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] input{
    min-height:28px !important;
    height:28px !important;
    padding:4px 7px !important;
    font-size:9px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid{
    margin-top:5px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid section{
    margin-bottom:5px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiGrid h4{
    margin-bottom:3px !important;
    font-size:8px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318EmojiItems{
    grid-template-columns:repeat(auto-fill,minmax(27px,1fr)) !important;
    gap:2px !important;
  }

  html body.r287v14Active
  .r318MediaPopover[data-mode="emoji"] .r318Emoji{
    min-width:27px !important;
    width:auto !important;
    height:27px !important;
    min-height:27px !important;
    font-size:15px !important;
  }

  /* Volets Afrique / pays / thèmes / catégories :
     ciblage sémantique uniquement, jamais first/last-child. */
  html body.isTchatDrawerOpen
  :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries){
    flex:0 0 180px !important;
    width:180px !important;
    max-width:180px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen
  :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail){
    flex:0 0 198px !important;
    width:198px !important;
    max-width:198px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerPanel--final{
    flex:0 0 200px !important;
    width:200px !important;
    max-width:200px !important;
    min-width:0 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerHead{
    padding:8px 8px 7px !important;
  }

  html body.isTchatDrawerOpen .salonDrawerHead h2{
    font-size:14px !important;
    line-height:1.04 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerDescription{
    margin-top:3px !important;
    font-size:7.5px !important;
    line-height:1.28 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerListButton{
    min-height:40px !important;
    padding:5px 6px !important;
  }

  html body.isTchatDrawerOpen .salonDrawerListCopy strong,
  html body.isTchatDrawerOpen .salonDrawerPanel .salonDrawerListButton strong{
    font-size:9px !important;
    line-height:1.12 !important;
  }

  html body.isTchatDrawerOpen .salonDrawerListCopy small,
  html body.isTchatDrawerOpen .salonDrawerPanel .salonDrawerListButton small{
    font-size:7px !important;
    line-height:1.12 !important;
  }
}

/* ------------------------------------------------------------
   1707 : la largeur seule suffit ; ne pas dépendre de la hauteur CSS.
   ------------------------------------------------------------ */
@media (min-width:1685px) and (max-width:1725px){
  html body.isEthnosHomeView.isTchatDrawerOpen:not(.r287v14Active)
  .memberWorkspace > .bodyView-home{
    display:block !important;
    visibility:visible !important;
    pointer-events:auto !important;
    opacity:1 !important;
  }
}


/* ============================================================
   R339 — responsive piloté par les formats physiques du projet
   Audit : les @media viewport R336/R338 pouvaient ne pas matcher
   la résolution écran réellement testée (zoom / scaling / barres navigateur).
   R339 réutilise les marqueurs data-ethnos-format-* déjà prévus par Ethnos.
   ============================================================ */

/* ---------- 1280 / 1336 / 1366 / 1536 : PSEUDONYMES ---------- */
html[data-ethnos-format-1280="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
html[data-ethnos-r234-1280="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
html[data-ethnos-format-1336="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
html[data-ethnos-format-1366="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
html[data-ethnos-r234-1366="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2,
html[data-ethnos-format-1536="1"] body .memberProfileCompact:not(.isExpanded) .memberIdentity h2{
  font-size:12px !important;
  line-height:.98 !important;
}

html[data-ethnos-format-1280="1"] body.r287v14Active .r287v14MemberCopy strong,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r287v14MemberCopy strong,
html[data-ethnos-format-1336="1"] body.r287v14Active .r287v14MemberCopy strong,
html[data-ethnos-format-1366="1"] body.r287v14Active .r287v14MemberCopy strong,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r287v14MemberCopy strong,
html[data-ethnos-format-1536="1"] body.r287v14Active .r287v14MemberCopy strong{
  font-size:10px !important;
  line-height:1.14 !important;
}

html[data-ethnos-format-1280="1"] body.r287v14Active .r287v14MemberCopy small,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r287v14MemberCopy small,
html[data-ethnos-format-1336="1"] body.r287v14Active .r287v14MemberCopy small,
html[data-ethnos-format-1366="1"] body.r287v14Active .r287v14MemberCopy small,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r287v14MemberCopy small,
html[data-ethnos-format-1536="1"] body.r287v14Active .r287v14MemberCopy small{
  font-size:7.5px !important;
}

/* ---------- 1280 / 1336 / 1366 / 1536 : GIF + GIFTS + EMOJIS ---------- */
/* GIF réel observé sur capture : R320/R321 = 720 × 650.
   Cible demandée : largeur -25 %, hauteur /2 => 540 × 325. */
html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"],
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"],
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"],
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"],
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"],
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"]{
  left:auto !important;
  right:8px !important;
  width:min(540px,calc(100vw - 24px)) !important;
  max-width:540px !important;
  height:min(325px,calc(100vh - 90px)) !important;
  max-height:325px !important;
  min-height:0 !important;
  padding:9px !important;
  overflow:hidden !important;
  gap:6px !important;
}

/* Gifts/Emoji base = 560 × 560 => 420 × 280. */
html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="gifts"],
html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"],
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"],
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"],
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"],
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"],
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"]{
  left:auto !important;
  right:8px !important;
  width:min(420px,calc(100vw - 24px)) !important;
  max-width:420px !important;
  height:min(280px,calc(100vh - 90px)) !important;
  max-height:280px !important;
  min-height:0 !important;
  padding:8px !important;
  overflow:auto !important;
}

/* GIF : compacter aussi le contenu interne pour que la moitié de hauteur soit utile. */
html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput,
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput,
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput,
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifSearchInput{
  height:32px !important;
  min-height:32px !important;
  font-size:9px !important;
}

html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid,
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid,
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid,
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifGrid{
  gap:5px !important;
  overflow:auto !important;
}

html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img,
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img,
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img,
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="gif"] .r320GifCard img{
  max-height:86px !important;
}

/* Emoji compact. */
html[data-ethnos-format-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji,
html[data-ethnos-format-1336="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji,
html[data-ethnos-format-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji,
html[data-ethnos-format-1536="1"] body.r287v14Active .r318MediaPopover[data-mode="emoji"] .r318Emoji{
  min-width:27px !important;
  height:27px !important;
  min-height:27px !important;
  font-size:15px !important;
}

/* ---------- 1280 / 1336 / 1366 / 1536 : VOLETS RECHERCHE ---------- */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-format-1336="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-format-1366="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-r234-1366="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-format-1536="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--continent,.salonDrawerPanel--countries){
  flex:0 0 180px !important;
  width:180px !important;
  max-width:180px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-format-1336="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-format-1366="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-r234-1366="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-format-1536="1"] body.isTchatDrawerOpen :is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail){
  flex:0 0 198px !important;
  width:198px !important;
  max-width:198px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-format-1336="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-format-1366="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-r234-1366="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-format-1536="1"] body.isTchatDrawerOpen .salonDrawerPanel--final{
  flex:0 0 200px !important;
  width:200px !important;
  max-width:200px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen .salonDrawerHead h2,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen .salonDrawerHead h2,
html[data-ethnos-format-1336="1"] body.isTchatDrawerOpen .salonDrawerHead h2,
html[data-ethnos-format-1366="1"] body.isTchatDrawerOpen .salonDrawerHead h2,
html[data-ethnos-r234-1366="1"] body.isTchatDrawerOpen .salonDrawerHead h2,
html[data-ethnos-format-1536="1"] body.isTchatDrawerOpen .salonDrawerHead h2{
  font-size:14px !important;
  line-height:1.04 !important;
}

html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen .salonDrawerDescription,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen .salonDrawerDescription,
html[data-ethnos-format-1336="1"] body.isTchatDrawerOpen .salonDrawerDescription,
html[data-ethnos-format-1366="1"] body.isTchatDrawerOpen .salonDrawerDescription,
html[data-ethnos-r234-1366="1"] body.isTchatDrawerOpen .salonDrawerDescription,
html[data-ethnos-format-1536="1"] body.isTchatDrawerOpen .salonDrawerDescription{
  font-size:7.5px !important;
  line-height:1.28 !important;
}

/* ---------- TOOLBAR MESSAGES : cachée au repos sur formats desktop testés ---------- */
html[data-ethnos-format-1280="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-format-1336="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-format-1366="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-format-1536="1"] body.r287v14Active .r327MessageToolbar,
html[data-ethnos-format-1920="1"] body.r287v14Active .r327MessageToolbar{
  position:absolute !important;
  width:auto !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:hidden !important;
  transform:translateY(3px) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.28) !important;
}

html[data-ethnos-format-1280="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-format-1336="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-format-1366="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-format-1536="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-format-1920="1"] body.r287v14Active .r287v14Message:hover .r327MessageToolbar,
html[data-ethnos-format-1280="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-r234-1280="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-format-1336="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-format-1366="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-r234-1366="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-format-1536="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar,
html[data-ethnos-format-1920="1"] body.r287v14Active .r287v14Message:focus-within .r327MessageToolbar{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) !important;
}

/* ---------- 1707 : accueil central ne disparaît plus ---------- */
html[data-ethnos-format-1707="1"] body.isEthnosHomeView.isTchatDrawerOpen:not(.r287v14Active)
.memberWorkspace > .bodyView-home,
html[data-ethnos-r234-1707="1"] body.isEthnosHomeView.isTchatDrawerOpen:not(.r287v14Active)
.memberWorkspace > .bodyView-home{
  display:block !important;
  visibility:visible !important;
  pointer-events:auto !important;
  opacity:1 !important;
}

/* ---------- R347 : largeurs 1707x1067 ----------
   Modification directe du moteur responsive déjà chargé.
   continent : 172 -> 120.400px (-30 %)
   Europe/pays : 307.26 -> 215.082px (-30 %)
   final : 290.19 -> 174.114px (-40 %)
   thèmes/topics/detail : inchangés.
*/
html[data-ethnos-format-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--continent,
html[data-ethnos-r234-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--continent{
  flex:0 0 120.400px !important;
  width:120.400px !important;
  max-width:120.400px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--countries,
html[data-ethnos-r234-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--countries{
  flex:0 0 215.082px !important;
  width:215.082px !important;
  max-width:215.082px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-r234-1707="1"] body.isTchatDrawerOpen .salonDrawerPanel--final{
  flex:0 0 174.114px !important;
  width:174.114px !important;
  max-width:174.114px !important;
  min-width:0 !important;
}

/* ---------- 1920 : premier + dernier volets plus étroits, titre final réduit ---------- */
html[data-ethnos-format-1920="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--continent,.salonDrawerPanel--countries){
  flex:0 0 210px !important;
  width:210px !important;
  max-width:210px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1920="1"] body.isTchatDrawerOpen .salonDrawerPanel--final{
  flex:0 0 215px !important;
  width:215px !important;
  max-width:215px !important;
  min-width:0 !important;
}

html[data-ethnos-format-1920="1"] body.isTchatDrawerOpen
.salonDrawerPanel--final .salonDrawerHead h2{
  font-size:17px !important;
  line-height:1.04 !important;
}


/* ============================================================
   R341 — 1280x720 uniquement — correction stricte de R340
   Base : R339.
   Seuls changements autorisés :
   1) largeur premier volet ;
   2) largeur intermédiaires ;
   3) largeur dernier volet ;
   4) texte des 3 contrôles pays uniquement.
   AUCUNE autre typographie modifiée.
   ============================================================ */

/* Premier volet : R339 = 180px -> R341 = 158px. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--continent,.salonDrawerPanel--countries),
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--continent,.salonDrawerPanel--countries){
  flex:0 0 158px !important;
  width:158px !important;
  max-width:158px !important;
  min-width:0 !important;
}

/* Intermédiaires : R339 = 198px -> R341 = 184px.
   AUCUN font-size, line-height ou padding texte ici. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail){
  flex:0 0 184px !important;
  width:184px !important;
  max-width:184px !important;
  min-width:0 !important;
}

/* Dernier volet : R339 = 200px -> R341 = 170px. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final{
  flex:0 0 170px !important;
  width:170px !important;
  max-width:170px !important;
  min-width:0 !important;
}

/* SEULS TEXTES réduits dans R341 :
   - Salons nationaux
   - Nos créateurs
   Les deux sont les <span> de .salonCountryActionButton. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryActionButton > span,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryActionButton > span{
  font-size:8px !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  white-space:nowrap !important;
}

/* Explorer par ville est un <select>, pas un bouton/list-copy. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryAccordionCitySelect,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryAccordionCitySelect{
  font-size:8px !important;
  line-height:1.08 !important;
}

/* Aucun autre texte n'est modifié par R341. */


/* ============================================================
   R342 — 1280x720 uniquement
   - finition contrôles pays ;
   - tous les autres volets du parcours : -10 %.
   ============================================================ */

/* Intermédiaires : R341 184px -> R342 166px (~ -10 %).
   AUCUNE typographie modifiée. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail),
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
:is(.salonDrawerPanel--themes,.salonDrawerPanel--topics,.salonDrawerPanel--detail){
  flex:0 0 166px !important;
  width:166px !important;
  max-width:166px !important;
  min-width:0 !important;
}

/* Dernier volet : R341 170px -> R342 153px (-10 %).
   AUCUNE typographie modifiée. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen .salonDrawerPanel--final{
  flex:0 0 153px !important;
  width:153px !important;
  max-width:153px !important;
  min-width:0 !important;
}

/* Deux actions pays : texte réellement centré dans la zone blanche. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryActionButton > span,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryActionButton > span{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-width:0 !important;
  padding:0 2px !important;
  margin:0 !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
  text-align:center !important;
  font-size:7px !important;
  line-height:1 !important;
  letter-spacing:-.015em !important;
}

/* Le select affiche désormais "Par ville" et reste compact. */
html[data-ethnos-format-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryAccordionCitySelect,
html[data-ethnos-r234-1280="1"] body.isTchatDrawerOpen
.salonDrawerPanel--countries .salonCountryAccordionCitySelect{
  font-size:8px !important;
  line-height:1.08 !important;
  text-align:center !important;
  text-align-last:center !important;
  padding-left:6px !important;
  padding-right:28px !important;
}