/* ========================================================================== */
/* ETHNOS R118 — navigation commerciale + panneau Tchat allégé               */
/* ========================================================================== */
/*
 * Référence de largeur du sélecteur Pays :
 * un nom long courant tel que « République démocratique du Congo »
 * doit rester confortable dans le champ. Le panneau est donc resserré,
 * mais jamais comprimé sous 258 px sur les formats PC pris en charge.
 */

:root{
  --ethnos-search-width:clamp(258px,14.2vw,286px);
  --ethnos-official-title:"Inter","Segoe UI",Arial,sans-serif;

  /* Palette des blocs de l'accueil commercial V65. */
  --r118-commercial-navy:#071a39;
  --r118-commercial-cream:rgba(255,249,240,.97);
  --r118-commercial-cream-soft:rgba(255,252,247,.94);
  --r118-commercial-orange:#f26722;
  --r118-commercial-teal:#13b7b4;
  --r118-commercial-blue:#2f8fc4;
  --r118-commercial-green:#4eaf45;
  --r118-commercial-violet:#8062dc;
}

/* -------------------------------------------------------------------------- */
/* Barre haute uniquement : palette commerciale et relief 3D au survol.       */
/* L'onglet Profil, situé à droite, n'est pas modifié.                         */
/* -------------------------------------------------------------------------- */
html body .memberTopbar{
  background:
    linear-gradient(180deg,rgba(255,252,247,.98),rgba(255,249,240,.92)) !important;
  border-bottom:1px solid rgba(7,26,57,.18) !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 -1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter:blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.08) !important;
}

html body .memberTopNavigation{
  gap:clamp(3px,.34vw,7px) !important;
  padding:6px 0 7px !important;
  perspective:900px;
  overflow:visible !important;
}

html body .memberTopNavButton{
  --r118-nav-accent:var(--r118-commercial-teal);
  height:100% !important;
  min-height:40px;
  padding:3px clamp(5px,.56vw,11px) !important;
  border:1px solid rgba(7,26,57,.10) !important;
  border-radius:10px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,249,240,.30)) !important;
  color:var(--r118-commercial-navy) !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(9px,.66vw,12px) !important;
  font-weight:700 !important;
  letter-spacing:-.018em !important;
  text-align:center !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 2px 0 rgba(7,26,57,.10),
    0 5px 10px rgba(7,26,57,.05) !important;
  transform:translateZ(0);
  transform-origin:center bottom;
  transform-style:preserve-3d;
  transition:
    transform .22s cubic-bezier(.2,.75,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    color .22s ease !important;
}

html body .memberTopNavButton:nth-child(1){--r118-nav-accent:var(--r118-commercial-teal)}
html body .memberTopNavButton:nth-child(2){--r118-nav-accent:var(--r118-commercial-orange)}
html body .memberTopNavButton:nth-child(3){--r118-nav-accent:var(--r118-commercial-blue)}
html body .memberTopNavButton:nth-child(4){--r118-nav-accent:var(--r118-commercial-violet)}
html body .memberTopNavButton:nth-child(5){--r118-nav-accent:var(--r118-commercial-green)}
html body .memberTopNavButton:nth-child(6){--r118-nav-accent:var(--r118-commercial-orange)}
html body .memberTopNavButton:nth-child(7){--r118-nav-accent:var(--r118-commercial-teal)}

html body .memberTopNavButton:not(:first-child)::before{
  display:none !important;
  content:none !important;
}

html body .memberTopNavButton svg{
  color:var(--r118-nav-accent) !important;
  stroke:currentColor !important;
  opacity:1 !important;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7));
  transition:transform .22s ease,filter .22s ease !important;
}

html body .memberTopNavButton span{
  color:inherit !important;
  font-family:inherit !important;
}

html body .memberTopNavButton:hover,
html body .memberTopNavButton:focus-visible,
html body .memberTopNavButton.isActive{
  z-index:3;
  border-color:color-mix(in srgb,var(--r118-nav-accent) 48%,transparent) !important;
  background:
    linear-gradient(180deg,#fff,var(--r118-commercial-cream-soft)) !important;
  color:var(--r118-commercial-navy) !important;
  outline:none !important;
  transform:translateY(-3px) rotateX(7deg) scale(1.012);
  box-shadow:
    inset 0 1px 0 #fff,
    0 3px 0 color-mix(in srgb,var(--r118-nav-accent) 65%,#071a39),
    0 12px 22px rgba(7,26,57,.24) !important;
}

html body .memberTopNavButton:hover svg,
html body .memberTopNavButton:focus-visible svg,
html body .memberTopNavButton.isActive svg{
  transform:translateY(-1px) scale(1.08);
  filter:drop-shadow(0 3px 4px color-mix(in srgb,var(--r118-nav-accent) 35%,transparent));
}

html body .memberTopNavButton.isActive::after{
  left:20% !important;
  right:20% !important;
  bottom:3px !important;
  height:2px !important;
  border-radius:999px;
  background:var(--r118-nav-accent) !important;
  box-shadow:0 0 8px color-mix(in srgb,var(--r118-nav-accent) 50%,transparent);
}

/* -------------------------------------------------------------------------- */
/* Panneau gauche : plus fin, intitulé Tchat et disparition des Maisons.       */
/* -------------------------------------------------------------------------- */
html body .memberLayout{
  grid-template-columns:var(--ethnos-search-width) minmax(0,1fr) !important;
}

html body .memberExplorerPanel{
  padding:clamp(10px,1vw,16px) clamp(10px,.95vw,15px) 12px !important;
}

html body .memberExplorerHead{
  padding:8px 4px 15px !important;
}

html body .memberExplorerHead h2{
  margin:0 !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(25px,1.75vw,32px) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
  line-height:1 !important;
  color:#fff9ef !important;
  text-shadow:0 8px 24px rgba(0,0,0,.22);
}

html body .memberExplorerBody{
  --explorer-volume-space:clamp(17px,1.85vh,25px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-right:2px !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(49,209,207,.24) transparent;
}
html body .memberExplorerBody::-webkit-scrollbar{width:4px}
html body .memberExplorerBody::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(49,209,207,.24);
}

html body .salonQuickSearch{
  gap:10px !important;
  padding:16px 5px var(--explorer-volume-space) !important;
}

html body .salonQuickSearch>.salonExplorerLabel,
html body .salonDeepSearch .salonExplorerLabel{
  font-family:var(--ethnos-official-title) !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  color:#f8f4ea !important;
}

html body .salonQuickSearch>.salonExplorerLabel{
  font-size:clamp(19px,1.35vw,25px) !important;
  line-height:1.05 !important;
}

html body .salonQuickSearch label>span{
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(10px,.72vw,12px) !important;
  font-weight:700 !important;
  color:#d9dedb !important;
}

html body .salonQuickSearch select,
html body .salonQuickSearch input{
  width:100% !important;
  min-width:0 !important;
  height:clamp(38px,2.7vw,45px) !important;
  padding-inline:12px !important;
  border-radius:10px !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(10px,.72vw,12px) !important;
}

html body .salonQuickSearch select{
  /* 32 caractères de référence + respiration pour le drapeau et la flèche. */
  min-inline-size:32ch;
}

html body .salonQuickSearch>button{
  height:clamp(39px,2.8vw,46px) !important;
  min-height:clamp(39px,2.8vw,46px) !important;
  border-radius:9px !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(11px,.78vw,13px) !important;
  font-weight:700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    0 4px 0 rgba(137,55,13,.62),
    0 10px 18px rgba(0,0,0,.18) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

html body .salonQuickSearch>button:hover,
html body .salonQuickSearch>button:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    0 5px 0 rgba(137,55,13,.62),
    0 14px 22px rgba(0,0,0,.24) !important;
}

html body .salonDeepSearch{
  padding-inline:5px !important;
  text-align:center;
}

html body .salonDeepSearch .salonExplorerLabel{
  font-size:clamp(19px,1.34vw,24px) !important;
  line-height:1.07 !important;
}

html body .salonDeepSearchTagline{
  margin:7px auto 15px !important;
  color:#f2f2ed !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(13px,.92vw,16px) !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  letter-spacing:-.025em;
}

html body .salonContinentShortcuts{
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}

html body .salonContinentShortcuts button{
  width:100% !important;
  min-height:clamp(37px,2.7vw,44px) !important;
  padding:7px 12px !important;
  border-radius:9px !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(11px,.77vw,13px) !important;
  font-weight:600 !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease !important;
}

html body .salonContinentShortcuts button:hover:not(:disabled){
  transform:translateX(3px);
}

/* Ordre visuel demandé : Afrique, Amérique du Sud, Europe,
   Amérique du Nord, Asie, Océanie. */
html body .salonContinentShortcuts button:nth-child(1){order:1}
html body .salonContinentShortcuts button:nth-child(2){order:4}
html body .salonContinentShortcuts button:nth-child(3){order:2}
html body .salonContinentShortcuts button:nth-child(4){order:5}
html body .salonContinentShortcuts button:nth-child(5){order:3}
html body .salonContinentShortcuts button:nth-child(6){order:6}

/* -------------------------------------------------------------------------- */
/* Nouvelle zone basse : streaming mondial / ON AIR.                          */
/* -------------------------------------------------------------------------- */
html body .salonLivePromo{
  padding:var(--explorer-volume-space) 5px 14px !important;
}

html body .salonLivePromo::before{
  left:5% !important;
  right:5% !important;
}

html body .salonLiveVisual{
  position:relative;
  aspect-ratio:1.52/1;
  overflow:hidden;
  border:1px solid rgba(133,205,221,.22);
  border-radius:13px;
  background:#102d48;
  box-shadow:
    0 18px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.10);
  isolation:isolate;
}

html body .salonLiveVisual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 36%;
  filter:saturate(.92) contrast(1.03) brightness(.88);
  transform:scale(1.02);
}

html body .salonLiveVisualShade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,14,24,.03) 28%,rgba(3,17,28,.42) 72%,rgba(3,17,28,.82)),
    radial-gradient(circle at 75% 20%,rgba(49,209,207,.14),transparent 36%);
  pointer-events:none;
}

html body .salonLiveStatus{
  position:absolute;
  z-index:2;
  left:11px;
  bottom:10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(7,26,57,.78);
  color:#fff;
  font-family:var(--ethnos-official-title) !important;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
  box-shadow:0 8px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(8px);
}

html body .salonLiveStatus i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff4c3f;
  box-shadow:0 0 0 4px rgba(255,76,63,.18),0 0 12px rgba(255,76,63,.72);
  animation:r118-live-pulse 1.7s ease-in-out infinite;
}

@keyframes r118-live-pulse{
  0%,100%{transform:scale(.88);opacity:.74}
  50%{transform:scale(1.12);opacity:1}
}

html body .salonLiveCopy{
  padding:16px 4px 2px;
  text-align:center;
}

html body .salonLiveEyebrow{
  display:block;
  color:var(--r118-commercial-teal);
  font-family:var(--ethnos-official-title) !important;
  font-size:8px;
  font-weight:800;
  letter-spacing:.17em;
}

html body .salonLiveCopy h3{
  margin:8px 0 9px !important;
  font-family:var(--ethnos-official-title) !important;
  line-height:.98 !important;
  letter-spacing:-.05em !important;
}

html body .salonLiveCopy h3 strong,
html body .salonLiveCopy h3 em{
  display:block;
  font-family:inherit !important;
  font-style:normal;
}

html body .salonLiveCopy h3 strong{
  color:#fffaf1;
  font-size:clamp(19px,1.36vw,25px);
  font-weight:800;
}

html body .salonLiveCopy h3 em{
  margin-top:4px;
  color:#ff9f62;
  font-size:clamp(18px,1.29vw,23px);
  font-weight:700;
}

html body .salonLiveCopy p{
  max-width:230px;
  margin:0 auto 13px !important;
  color:#9fb4bd !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(9px,.63vw,11px) !important;
  line-height:1.48 !important;
}

html body .salonLiveCopy button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:39px;
  padding:0 14px;
  border:1px solid rgba(242,103,34,.72) !important;
  border-radius:10px !important;
  background:
    linear-gradient(135deg,rgba(242,120,37,.98),rgba(244,93,22,.98)) !important;
  color:#fff !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:11px !important;
  font-weight:800 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 4px 0 rgba(125,43,10,.68),
    0 12px 20px rgba(0,0,0,.22) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important;
}

html body .salonLiveCopy button span{
  font-family:inherit !important;
  font-size:16px;
  line-height:1;
}

html body .salonLiveCopy button:hover,
html body .salonLiveCopy button:focus-visible{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 5px 0 rgba(125,43,10,.68),
    0 16px 25px rgba(0,0,0,.28) !important;
}

/* Les anciennes zones supprimées ne doivent jamais réapparaître par héritage. */
html body .salonOfficialSearch,
html body .salonTodaySearches{
  display:none !important;
}

/* -------------------------------------------------------------------------- */
/* Ajustements formats PC plus compacts.                                      */
/* -------------------------------------------------------------------------- */
@media(max-width:1500px){
  :root{--ethnos-search-width:258px}

  html body .memberTopNavigation{
    gap:2px !important;
    padding-block:7px !important;
  }

  html body .memberTopNavButton{
    min-height:38px;
    padding-inline:5px !important;
    font-size:9px !important;
    gap:4px !important;
  }

  html body .memberTopNavButton svg{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
  }

  html body .memberExplorerHead h2{font-size:25px !important}
  html body .salonQuickSearch>.salonExplorerLabel{font-size:19px !important}
  html body .salonDeepSearch .salonExplorerLabel{font-size:19px !important}
  html body .salonLiveCopy h3 strong{font-size:19px}
  html body .salonLiveCopy h3 em{font-size:18px}
}

@media(max-height:820px){
  html body .memberExplorerBody{
    overflow-y:auto !important;
    scrollbar-width:thin;
  }

  html body .salonQuickSearch{
    gap:7px !important;
    padding-top:10px !important;
  }

  html body .salonQuickSearch select,
  html body .salonQuickSearch input{
    height:34px !important;
  }

  html body .salonQuickSearch>button{
    height:35px !important;
    min-height:35px !important;
  }

  html body .salonExplorerSection{
    padding-top:15px !important;
    padding-bottom:15px !important;
  }

  html body .salonContinentShortcuts{
    gap:5px !important;
  }

  html body .salonContinentShortcuts button{
    min-height:31px !important;
  }

  html body .salonLiveVisual{
    aspect-ratio:1.72/1;
  }

  html body .salonLiveCopy{
    padding-top:11px;
  }

  html body .salonLiveCopy p{
    margin-bottom:10px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html body .memberTopNavButton,
  html body .memberTopNavButton svg,
  html body .salonQuickSearch>button,
  html body .salonContinentShortcuts button,
  html body .salonLiveCopy button{
    transition:none !important;
  }
  html body .memberTopNavButton:hover,
  html body .memberTopNavButton:focus-visible,
  html body .memberTopNavButton.isActive{
    transform:none !important;
  }
  html body .salonLiveStatus i{animation:none !important}
}