/* ========================================================================== */
/* ETHNOS R187 — onglet Tchat fixe et continents illustrés                    */
/* Base stricte : R186.                                                        */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. L’onglet Tchat reste exactement à sa place pendant l’ouverture.         */
/*    Le volet se déploie au-dessus : le titre du volet reste donc porté      */
/*    uniquement par l’onglet inférieur.                                      */
/* -------------------------------------------------------------------------- */
@media (min-width:901px){
  html body.isTchatDrawerOpen .memberExplorerPanel{
    position:fixed !important;
    display:block !important;
    bottom:var(--footer-legal,22px) !important;
    overflow:hidden !important;
    padding:0 !important;
  }

  html body.isTchatDrawerOpen .r185TchatToggle{
    position:absolute !important;
    z-index:6 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    top:auto !important;
    width:100% !important;
    height:var(--ethnos-card-height) !important;
    min-height:var(--ethnos-card-height) !important;
    max-height:var(--ethnos-card-height) !important;
    margin:0 !important;
    border:0 !important;
    border-top:1px solid rgba(149,205,218,.20) !important;
    border-radius:0 15px 0 0 !important;
  }

  html body.isTchatDrawerOpen .memberExplorerBody{
    position:absolute !important;
    z-index:2 !important;
    top:0 !important;
    right:0 !important;
    bottom:calc(var(--ethnos-card-height) + 62px) !important;
    left:0 !important;
    display:flex !important;
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding:8px 10px 10px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
  }

  html body.isTchatDrawerOpen .r186TchatClose{
    position:absolute !important;
    z-index:5 !important;
    left:14% !important;
    bottom:calc(var(--ethnos-card-height) + 13px) !important;
    width:72% !important;
    margin:0 !important;
  }
}

@media (max-height:820px) and (min-width:901px){
  html body.isTchatDrawerOpen .r185TchatToggle{
    height:var(--ethnos-card-height) !important;
    min-height:var(--ethnos-card-height) !important;
    max-height:var(--ethnos-card-height) !important;
  }
  html body.isTchatDrawerOpen .memberExplorerBody{
    bottom:calc(var(--ethnos-card-height) + 52px) !important;
  }
  html body.isTchatDrawerOpen .r186TchatClose{
    bottom:calc(var(--ethnos-card-height) + 10px) !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. Photos de continents : URLs explicites pour éviter toute perte de       */
/*    variable CSS lors de la génération dynamique des boutons.               */
/* -------------------------------------------------------------------------- */
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="afrique"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(1){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-afrique.webp') !important;
  background-position:center 56% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="amerique-sud"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(2){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-amerique-sud.webp') !important;
  background-position:center 54% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="europe"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(3){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-europe.webp') !important;
  background-position:center 46% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="amerique-nord"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(4){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-amerique-nord.webp') !important;
  background-position:54% 48% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="asie"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(5){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-asie.webp') !important;
  background-position:center 62% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="moyen-orient"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(6){
  background-image:linear-gradient(90deg,rgba(3,22,33,.83),rgba(3,22,33,.35),rgba(3,22,33,.77)),url('../assets/images/home-r185/continent-moyen-orient.webp') !important;
  background-position:center 48% !important;
}
html body.isTchatDrawerOpen .salonContinentShortcuts button[data-continent="oceanie"],
html body.isTchatDrawerOpen .salonContinentShortcuts button:nth-child(7){
  background-image:linear-gradient(90deg,rgba(3,22,33,.86),rgba(3,22,33,.43),rgba(3,22,33,.80)),url('../assets/images/home-r185/continent-oceanie.webp') !important;
  background-position:center 56% !important;
}

html body.isTchatDrawerOpen .salonContinentShortcuts button{
  background-repeat:no-repeat !important;
  background-size:cover !important;
}