/* ========================================================================== */
/* ETHNOS R188 — Tchat réellement fixe, footer compact, volets crème         */
/* Base stricte : R187.                                                        */
/* ========================================================================== */

:root{
  --r188-cream:#fffaf2;
  --r188-cream-soft:#f6eee2;
  --r188-cream-deep:#eadcc9;
  --r188-ink:#0b2941;
  --r188-copy:#526873;
  --r188-line:#d8c8b3;
  --r188-orange:#f58a4b;
}

/* -------------------------------------------------------------------------- */
/* 1. Onglet Tchat physiquement séparé du volet.                              */
/*    L’onglet reste figé ; le panneau coulisse depuis le dessous et s’arrête */
/*    exactement au-dessus.                                                   */
/* -------------------------------------------------------------------------- */
@media (min-width:901px){
  html body .r185TchatToggle.r188TchatTabFixed{
    position:fixed !important;
    z-index:98 !important;
    left:0 !important;
    right:auto !important;
    top:auto !important;
    bottom:var(--footer-legal,22px) !important;
    width:var(--ethnos-search-width) !important;
    min-width:var(--ethnos-search-width) !important;
    max-width:var(--ethnos-search-width) !important;
    height:var(--ethnos-card-height) !important;
    min-height:var(--ethnos-card-height) !important;
    max-height:var(--ethnos-card-height) !important;
    margin:0 !important;
    padding:0 16px !important;
    border:0 !important;
    border-top:1px solid rgba(149,205,218,.20) !important;
    border-right:1px solid rgba(149,205,218,.20) !important;
    border-radius:0 15px 0 0 !important;
    transform:none !important;
    transition:filter .18s ease,box-shadow .18s ease !important;
    box-shadow:12px -14px 32px rgba(0,0,0,.24) !important;
  }
  html body .r185TchatToggle.r188TchatTabFixed:hover,
  html body .r185TchatToggle.r188TchatTabFixed:focus-visible{
    filter:brightness(1.06) !important;
    outline:none !important;
  }
  html body.isTchatDrawerOpen .r185TchatToggle.r188TchatTabFixed{
    left:0 !important;
    bottom:var(--footer-legal,22px) !important;
    width:var(--ethnos-search-width) !important;
    height:var(--ethnos-card-height) !important;
    min-height:var(--ethnos-card-height) !important;
    max-height:var(--ethnos-card-height) !important;
    border-radius:0 15px 0 0 !important;
    transform:none !important;
  }

  html body .memberExplorerPanel{
    position:fixed !important;
    z-index:94 !important;
    left:0 !important;
    right:auto !important;
    top:calc(var(--topbar,54px) + 10px) !important;
    bottom:calc(var(--footer-legal,22px) + var(--ethnos-card-height)) !important;
    width:var(--ethnos-search-width) !important;
    min-width:var(--ethnos-search-width) !important;
    max-width:var(--ethnos-search-width) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:flex !important;
    flex-direction:column !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(149,205,218,.24) !important;
    border-left:0 !important;
    border-bottom:0 !important;
    border-radius:0 15px 0 0 !important;
    background:linear-gradient(180deg,#0b3446 0%,#052130 100%) !important;
    box-shadow:16px 18px 42px rgba(0,0,0,.30) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(calc(100% + var(--ethnos-card-height) + 12px)) !important;
    transition:transform .34s cubic-bezier(.22,.72,.25,1),opacity .2s ease,visibility 0s linear .34s !important;
  }
  html body.isTchatDrawerOpen .memberExplorerPanel{
    top:calc(var(--topbar,54px) + 10px) !important;
    bottom:calc(var(--footer-legal,22px) + var(--ethnos-card-height)) !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
    transition:transform .34s cubic-bezier(.22,.72,.25,1),opacity .2s ease,visibility 0s !important;
  }
  html body:not(.isTchatDrawerOpen) .memberExplorerBody{
    display:flex !important;
  }
  html body .memberExplorerBody,
  html body.isTchatDrawerOpen .memberExplorerBody{
    position:relative !important;
    inset:auto !important;
    z-index:auto !important;
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    width:100% !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:relative !important;
    inset:auto !important;
    z-index:auto !important;
    flex:0 0 38px !important;
    width:72% !important;
    height:38px !important;
    min-height:38px !important;
    margin:10px auto 14px !important;
  }
}

@media (max-height:820px) and (min-width:901px){
  html body .memberExplorerPanel,
  html body.isTchatDrawerOpen .memberExplorerPanel{
    top:calc(var(--topbar,48px) + 8px) !important;
    bottom:calc(var(--footer-legal,34px) + var(--ethnos-card-height)) !important;
  }
  html body.isTchatDrawerOpen .r186TchatClose{
    flex-basis:33px !important;
    height:33px !important;
    min-height:33px !important;
    margin:7px auto 10px !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 2. Footer : liens resserrés et copyright déplacé hors de l’onglet Tchat.   */
/* -------------------------------------------------------------------------- */
@media (min-width:901px){
  html body .memberFooterLegal{
    padding-left:calc(var(--ethnos-search-width) + 16px) !important;
    padding-right:calc(var(--ethnos-context-width) + 12px) !important;
  }
  html body .memberFooterLegal nav{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 auto !important;
  }
  html body .memberFooterLegal nav>*{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    padding:0 clamp(10px,1.25vw,23px) !important;
  }
  html body .memberFooterLegal nav>*:not(:first-child)::before{
    top:28% !important;
    height:44% !important;
    background:rgba(197,225,230,.20) !important;
  }
  html body .memberVersionCompact strong,
  html body .memberVersionCompact small{
    color:#dce5e2 !important;
    font-size:clamp(7.5px,.52vw,9.5px) !important;
  }
  html body .memberFooterLegal nav a{
    font-size:clamp(7px,.48vw,8.5px) !important;
    white-space:nowrap !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 3. Volets salons : proposition claire blanc / crème, lisibilité renforcée. */
/* -------------------------------------------------------------------------- */
html body .salonDrawerStack{
  scrollbar-color:rgba(245,138,75,.58) transparent !important;
}
html body .salonDrawerStack::-webkit-scrollbar-thumb{
  background:rgba(245,138,75,.58) !important;
}
html body .salonDrawerPanel,
html body .salonDrawerPanel--final{
  color:var(--r188-ink) !important;
  border:1px solid var(--r188-line) !important;
  background:linear-gradient(180deg,var(--r188-cream) 0%,var(--r188-cream-soft) 100%) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.92) !important;
}
html body .salonDrawerPanel::before{
  content:"";
  position:absolute;
  top:0;
  left:18px;
  right:18px;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,transparent,var(--r188-orange),transparent);
  opacity:.86;
  pointer-events:none;
}
html body .salonDrawerHead,
html body .salonDrawerPanel--final .salonDrawerHead{
  padding:15px 14px 13px !important;
  border-bottom:1px solid var(--r188-line) !important;
  background:linear-gradient(180deg,#fffdf9 0%,#eee1d0 100%) !important;
}
html body .salonDrawerHead h2,
html body .salonDrawerPanel--final .salonDrawerHead h2{
  color:var(--r188-ink) !important;
  font-family:var(--font-title,Georgia,"Times New Roman",serif) !important;
  font-size:clamp(20px,1.35vw,27px) !important;
  font-weight:500 !important;
  line-height:1.05 !important;
  text-shadow:none !important;
}
html body .salonDrawerDescription,
html body .salonDrawerPanel--final .salonDrawerDescription{
  margin-top:8px !important;
  color:#536873 !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(9px,.58vw,11.5px) !important;
  font-weight:600 !important;
  line-height:1.42 !important;
  text-shadow:none !important;
}
html body .salonDrawerContext,
html body .salonDrawerPanel--final .salonDrawerContext{
  color:#c45f27 !important;
}
html body .salonDrawerClose,
html body .salonDrawerPanel--final .salonDrawerClose{
  width:30px !important;
  height:30px !important;
  border:1px solid #cdbda8 !important;
  background:#fffaf2 !important;
  color:#61727a !important;
  box-shadow:0 2px 8px rgba(32,39,43,.08) !important;
}
html body .salonDrawerClose:hover,
html body .salonDrawerClose:focus-visible{
  border-color:var(--r188-orange) !important;
  background:#fff1e5 !important;
  color:#9b4117 !important;
  outline:none !important;
}
html body .salonDrawerBody{
  background:linear-gradient(180deg,#fbf6ee 0%,#f4ebdf 100%) !important;
  scrollbar-color:rgba(196,95,39,.45) transparent !important;
}
html body .salonDrawerBody::-webkit-scrollbar-thumb{
  background:rgba(196,95,39,.45) !important;
}

html body .salonDrawerListButton{
  min-height:58px !important;
  margin-bottom:7px !important;
  padding:9px 10px !important;
  border:1px solid #d7c7b4 !important;
  border-radius:9px !important;
  background:linear-gradient(180deg,#fffefa 0%,#f8f0e5 100%) !important;
  color:var(--r188-ink) !important;
  box-shadow:0 3px 10px rgba(44,39,33,.06) !important;
  opacity:1 !important;
}
html body .salonDrawerListButton:hover:not(:disabled),
html body .salonDrawerListButton:focus-visible:not(:disabled){
  border-color:#e79661 !important;
  background:linear-gradient(180deg,#fff9f2 0%,#fce8d7 100%) !important;
  transform:translateY(-1px) !important;
  outline:none !important;
}
html body .salonDrawerListButton:disabled{
  opacity:.58 !important;
}
html body .salonDrawerListIcon{
  color:#197b80 !important;
  font-size:14px !important;
}
html body .salonDrawerListCopy strong{
  color:var(--r188-ink) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(11.5px,.75vw,14.5px) !important;
  font-weight:750 !important;
  line-height:1.18 !important;
  text-shadow:none !important;
}
html body .salonDrawerListCopy small{
  margin-top:4px !important;
  color:#5f737b !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(8.5px,.54vw,10.5px) !important;
  font-weight:550 !important;
  line-height:1.3 !important;
  text-shadow:none !important;
}
html body .salonDrawerListArrow{
  color:#d6672d !important;
  font-size:15px !important;
  font-weight:800 !important;
}

/* Premier volet Pays : identité claire et chevron identique au champ Tchat. */
html body .salonCountryAccordion{
  border-bottom:1px solid #d9cbb9 !important;
}
html body .salonCountryAccordionButton{
  min-height:52px !important;
  padding:7px 10px !important;
  border:0 !important;
  background:rgba(255,253,248,.66) !important;
  color:var(--r188-ink) !important;
}
html body .salonCountryAccordionButton:hover,
html body .salonCountryAccordionButton:focus-visible,
html body .salonCountryAccordion.isOpen>.salonCountryAccordionButton{
  background:#f9eadb !important;
  outline:none !important;
}
html body .salonCountryAccordionButton img{
  box-shadow:0 0 0 1px rgba(13,42,64,.18),0 2px 6px rgba(0,0,0,.08) !important;
}
html body .salonCountryAccordionButton strong{
  color:var(--r188-ink) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(14px,.95vw,18px) !important;
  font-weight:750 !important;
  text-shadow:none !important;
}
html body .salonCountryAccordionChevron{
  position:relative !important;
  width:22px !important;
  height:22px !important;
  display:grid !important;
  place-items:center !important;
  color:transparent !important;
  font-size:0 !important;
  transform:none !important;
}
html body .salonCountryAccordionChevron::before{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  border-right:2px solid #173a51 !important;
  border-bottom:2px solid #173a51 !important;
  transform:translateY(-2px) rotate(45deg) !important;
  transition:transform .2s ease,border-color .2s ease !important;
}
html body .salonCountryAccordion.isOpen .salonCountryAccordionChevron::before{
  border-color:#c95e28 !important;
  transform:translateY(2px) rotate(225deg) !important;
}
html body .salonCountryAccordionActions{
  gap:8px !important;
  padding:8px 10px 13px !important;
  background:#efe4d6 !important;
}
html body .salonCountryActionButton{
  min-height:42px !important;
  border:1px solid #cdbda8 !important;
  background:#fffaf2 !important;
  color:var(--r188-ink) !important;
  box-shadow:0 2px 7px rgba(42,38,32,.05) !important;
}
html body .salonCountryActionButton>span{
  color:var(--r188-ink) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(10px,.67vw,13px) !important;
  font-weight:700 !important;
}
html body .salonCountryActionButton>b{
  background:var(--r188-orange) !important;
  color:#092033 !important;
}
html body .salonCountryAccordionCitySelect,
html body .salonCountryCitySelect{
  min-height:42px !important;
  height:42px !important;
  padding:0 42px 0 12px !important;
  border:1px solid #cdbda8 !important;
  border-radius:8px !important;
  background-color:#fffaf2 !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25 11 1.25' fill='none' stroke='%23173a51' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 15px center !important;
  background-size:12px 8px !important;
  color:var(--r188-ink) !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-size:clamp(10px,.67vw,13px) !important;
  font-weight:650 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
html body .salonCountryAccordionCitySelect:focus,
html body .salonCountryCitySelect:focus{
  border-color:#3eaaa7 !important;
  box-shadow:0 0 0 3px rgba(49,209,207,.12) !important;
  outline:none !important;
}

/* Résultats, choix officiels et dernier volet : même famille crème. */
html body .salonOfficialThemeChoice,
html body .salonResultCard,
html body .salonNoResult,
html body .salonDrawerPanel--final .salonResultCard,
html body .salonDrawerPanel--final .salonNoResult{
  border:1px solid #d3c2ae !important;
  background:linear-gradient(180deg,#fffefa 0%,#f5eadc 100%) !important;
  color:var(--r188-ink) !important;
  box-shadow:0 3px 11px rgba(45,38,31,.06) !important;
}
html body .salonOfficialThemeChoice strong,
html body .salonResultCard h3,
html body .salonNoResult h3,
html body .salonDrawerPanel--final .salonResultCard h3,
html body .salonDrawerPanel--final .salonNoResult h3{
  color:var(--r188-ink) !important;
  text-shadow:none !important;
}
html body .salonNoResult p,
html body .salonResultLocation,
html body .salonResultMeta,
html body .salonResultMeta span{
  color:#526a74 !important;
}
html body .salonOfficialThemeChoice button,
html body .salonCreateButton,
html body .salonCreateButton--empty,
html body .salonDrawerPanel--final .salonCreateButton{
  border:1px solid #173a51 !important;
  background:#0a2b40 !important;
  color:#fffaf2 !important;
  font-family:var(--font-interface,Manrope,"Segoe UI",Arial,sans-serif) !important;
  font-weight:800 !important;
  box-shadow:0 5px 0 #061a28 !important;
}
html body .salonOfficialThemeChoice button:hover,
html body .salonCreateButton:hover{
  background:#123d55 !important;
}
html body .salonOfficialThemeChoice button.isSecondary{
  border-color:#c77745 !important;
  background:#fff4e8 !important;
  color:#9f481d !important;
  box-shadow:none !important;
}
html body .salonFavoriteButton{
  border-color:#cdbda8 !important;
  background:#fffaf2 !important;
  color:#c35e29 !important;
}

@media (max-width:1500px),(max-height:850px){
  html body .salonDrawerHead{padding:11px 11px 10px !important}
  html body .salonDrawerHead h2{font-size:19px !important}
  html body .salonDrawerDescription{font-size:8.8px !important}
  html body .salonDrawerListButton{min-height:48px !important;padding:7px 8px !important}
  html body .salonDrawerListCopy strong{font-size:11px !important}
  html body .salonDrawerListCopy small{font-size:8px !important}
  html body .memberFooterLegal nav>*{padding:0 clamp(7px,.8vw,12px) !important}
  html body .memberFooterLegal nav a{font-size:7px !important}
}

/* Dernier volet : aucune nappe orange pleine, uniquement l’accent des actions. */
html body .salonDrawerPanel{position:relative !important}
html body .salonDrawerPanel--final .salonDrawerBody{
  padding:14px !important;
  background:linear-gradient(180deg,#fbf6ee 0%,#f1e6d7 100%) !important;
  scrollbar-color:rgba(196,95,39,.45) transparent !important;
}