/* ========================================================================== */
/* ETHNOS R119 — planète accueil, panneau Tchat pleine hauteur, fonds & typo  */
/* ========================================================================== */
/*
 * Base cumulative : R118.
 * - La barre haute R118 reste intacte, profil inclus (aucune retouche profil).
 * - Le logo rond du panneau gauche est remplacé par la planète animée V65.
 * - Le panneau Tchat utilise toute la hauteur disponible sur tous les formats.
 * - Le héros d'accueil reprend la fresque noir et blanc des silhouettes.
 * - Annuaire et Trophées adoptent la typographie officielle R118 (Inter).
 */

:root{
  --r119-silhouettes:url("../assets/images/rejoindre-visages-filigrane.jpg");
}

/* -------------------------------------------------------------------------- */
/* R1 — TF : planète rotative exacte de l'accueil commercial.                 */
/* -------------------------------------------------------------------------- */
html body .memberBrand{
  width:clamp(42px,2.9vw,54px) !important;
  height:clamp(42px,2.9vw,54px) !important;
  top:2px !important;
  border-radius:50% !important;
  filter:
    drop-shadow(0 7px 10px rgba(7,27,59,.22))
    drop-shadow(0 0 8px rgba(242,97,34,.14)) !important;
}

html body .memberBrand::before{
  display:none !important;
  content:none !important;
}

html body .memberBrand img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  border-radius:50% !important;
}

/* -------------------------------------------------------------------------- */
/* TF : le panneau Tchat occupe toute la longueur utile de la page.           */
/* -------------------------------------------------------------------------- */
html body .memberExplorerPanel{
  align-self:stretch !important;
  height:100% !important;
  min-height:0 !important;
}

html body .memberExplorerBody{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
}

html body .salonQuickSearch,
html body .salonDeepSearch{
  flex:0 0 auto !important;
}

html body .salonLivePromo{
  display:flex !important;
  flex:1 0 auto !important;
  flex-direction:column !important;
  min-height:0 !important;
}

html body .salonLiveVisual{
  flex:0 0 auto !important;
}

html body .salonLiveCopy{
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
}

html body .salonLiveCopy button{
  margin-top:auto !important;
}

/* -------------------------------------------------------------------------- */
/* TF : ancien fond noir et blanc des silhouettes, limité au grand héros.      */
/* -------------------------------------------------------------------------- */
html body .r111HomeHero{
  background-color:#061b29 !important;
  background-image:
    linear-gradient(112deg,rgba(2,18,29,.80),rgba(5,34,47,.62)),
    var(--r119-silhouettes) !important;
  background-position:center,center 43% !important;
  background-size:cover,cover !important;
  background-repeat:no-repeat !important;
  background-blend-mode:normal,multiply !important;
}

html body .r111HomeHero::after{
  background:
    radial-gradient(circle at 78% 48%,rgba(49,209,207,.13),transparent 26%),
    linear-gradient(90deg,rgba(2,15,24,.72),rgba(2,23,34,.18),rgba(2,15,24,.56)) !important;
}

/* -------------------------------------------------------------------------- */
/* Typographie officielle : Annuaire et Trophées.                             */
/* -------------------------------------------------------------------------- */
html body .memberDirectoryDrawer,
html body .memberTrophiesDrawer{
  --font-title:var(--ethnos-official-title) !important;
  --font-interface:var(--ethnos-official-title) !important;
  font-family:var(--ethnos-official-title) !important;
}

html body .memberDirectoryDrawer :where(
  h1,h2,h3,h4,p,span,small,strong,b,label,button,input,select,option
),
html body .memberTrophiesDrawer :where(
  h1,h2,h3,h4,p,span,small,strong,b,label,button,input,select,option
){
  font-family:var(--ethnos-official-title) !important;
}

/* Trophées : les carrés de sélection descendent de 4 px. */
html body .memberTrophyOption > span,
html body .memberChosenShieldStatus > span{
  transform:translateY(4px) !important;
}

/* -------------------------------------------------------------------------- */
/* Référence 1920 × 1080 : textes identifiés plus compacts et contenu remonté.*/
/* -------------------------------------------------------------------------- */
@media (min-width:1800px) and (max-width:2048px) and
       (min-height:980px) and (max-height:1150px){

  html body .memberExplorerHead{
    padding-top:6px !important;
    padding-bottom:12px !important;
  }

  html body .memberExplorerHead h2{
    font-size:28px !important;
    line-height:1 !important;
  }

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

  html body .salonQuickSearch > .salonExplorerLabel{
    font-size:20px !important;
    line-height:1.05 !important;
  }

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

  html body .salonDeepSearch .salonExplorerLabel{
    font-size:20px !important;
    line-height:1.05 !important;
  }

  html body .salonDeepSearchTagline{
    margin:5px auto 11px !important;
    font-size:13px !important;
    line-height:1.12 !important;
  }

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

  html body .salonContinentShortcuts button{
    min-height:35px !important;
    padding:5px 10px !important;
    font-size:11px !important;
  }

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

  html body .salonLiveVisual{
    aspect-ratio:1.78/1 !important;
  }

  html body .salonLiveCopy{
    padding-top:12px !important;
  }

  html body .salonLiveCopy h3{
    margin-top:6px !important;
    margin-bottom:7px !important;
  }

  html body .salonLiveCopy h3 strong{
    font-size:19px !important;
  }

  html body .salonLiveCopy h3 em{
    font-size:18px !important;
  }

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

  /* Demande ciblée 1920 × 1080 : remonter tous les éléments internes de 10 px. */
  html body .r111HomeHeroCopy,
  html body .r111HomeEarth{
    transform:translateY(-10px) !important;
  }
}

@media(max-width:1500px){
  html body .memberBrand{
    width:44px !important;
    height:44px !important;
    top:2px !important;
  }
}

@media(max-height:820px){
  html body .memberBrand{
    width:40px !important;
    height:40px !important;
    top:2px !important;
  }

  html body .salonLivePromo{
    flex:0 0 auto !important;
  }
}
