/* ========================================================================== */
/* ETHNOS R697 — accueil partagé : trajectoire retirée + accès Jeux           */
/* Périmètre : vue Accueil uniquement, découverte commerciale et connecté.    */
/* ========================================================================== */

@media (min-width:901px){
  /* La place libérée par la trajectoire reste respirante : le titre conserve
     son identité et se recentre légèrement dans une zone plus courte. */
  html body.isEthnosHomeView .r697HomeHero{
    box-sizing:border-box !important;
    min-height:clamp(145px,18.5vh,240px) !important;
    height:auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    margin:0 !important;
    padding:clamp(8px,1.1vh,16px) clamp(14px,1.6vw,32px) !important;
  }
  html body.isEthnosHomeView .r697HomeHero .r530HomeHeadline{
    margin:0 auto !important;
  }
  html body.isEthnosHomeView .r697HomeHero .r530HomeHeadline h1{
    margin:0 !important;
  }
}

/* Carte Jeux : réutilisation stricte de la photo rétro déjà active dans le
   moteur Jeux. Aucun média nouveau n'est ajouté. */
html body.isEthnosHomeView .r697MetricGames{
  cursor:pointer !important;
  background-image:
    linear-gradient(90deg,rgba(3,23,34,.91) 0%,rgba(3,23,34,.69) 46%,rgba(3,23,34,.24) 100%),
    url('../games/assets/retro-console.jpg') !important;
  background-position:center 48% !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  transition:filter .16s ease,box-shadow .16s ease !important;
}
html body.isEthnosHomeView .r697MetricGames::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  background:linear-gradient(180deg,rgba(3,19,29,.04),rgba(3,19,29,.52)) !important;
  pointer-events:none !important;
}
html body.isEthnosHomeView .r697MetricGames > *{
  position:relative !important;
  z-index:2 !important;
}
html body.isEthnosHomeView .r697MetricGames > p{
  color:#f2f6f4 !important;
}
html body.isEthnosHomeView .r697MetricGames:hover{
  filter:brightness(1.07) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.24) !important;
}
html body.isEthnosHomeView .r697MetricGames:focus-visible{
  outline:2px solid rgba(67,212,211,.92) !important;
  outline-offset:3px !important;
}

/* Les formats cibles les plus bas gardent un titre respirant sans repousser
   les portes ni les repères hors de la zone utile. */
@media (width:1280px) and (height:720px){
  html body.isEthnosHomeView .r697HomeHero{min-height:145px !important}
}
@media (width:1366px) and (height:768px){
  html body.isEthnosHomeView .r697HomeHero{min-height:150px !important}
}
@media (width:1536px) and (height:864px){
  html body.isEthnosHomeView .r697HomeHero{min-height:165px !important}
}
@media (width:1707px) and (height:1067px){
  html body.isEthnosHomeView .r697HomeHero{min-height:195px !important}
}
@media (width:1920px) and (height:1080px){
  html body.isEthnosHomeView .r697HomeHero{min-height:200px !important}
}
@media (width:2560px) and (height:1440px){
  html body.isEthnosHomeView .r697HomeHero{min-height:240px !important}
}


/* ========================================================================== */
/* R697 — DA popups + typographie officielle                                  */
/* Source prouvée : titre actif de la page Solidarité (R555)                  */
/* font-family: Inter,"Segoe UI",Arial,sans-serif.                             */
/* ========================================================================== */
:root{
  --ethnos-font-official:Inter,"Segoe UI",Arial,sans-serif;
}

/* Les chiffres/valeurs des repères du bas reprennent la typographie officielle.
   La carte Jeux n'est pas un compteur : son libellé JOUER conserve sa hiérarchie. */
html body.isEthnosHomeView .r537MetricRow > .r183MetricCard:not(.r697MetricGames) > strong{
  font-family:var(--ethnos-font-official) !important;
  font-weight:800 !important;
  letter-spacing:-.045em !important;
}

/* Dialogue visiteur : même DA bleu nuit que les modales Body déjà validées. */
html body .guestMemberDialog{
  border:1px solid rgba(190,226,231,.22) !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(245,138,75,.13),transparent 35%),
    linear-gradient(145deg,#082b3d,#041722) !important;
  color:#f4f7f5 !important;
  box-shadow:0 40px 120px rgba(0,0,0,.55) !important;
  font-family:var(--ethnos-font-official) !important;
}
html body .guestMemberDialog h2{
  margin:0 0 clamp(12px,1.1vw,18px) !important;
  color:#fff9f2 !important;
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(28px,2vw,40px) !important;
  font-weight:800 !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
}
html body .guestMemberDialog p{
  margin:0 0 clamp(10px,.75vw,14px) !important;
  color:#c5d4d7 !important;
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(15px,.92vw,18px) !important;
  font-weight:500 !important;
  line-height:1.55 !important;
}
html body .guestMemberActions a,
html body .guestMemberActions button{
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(13px,.74vw,15px) !important;
  font-weight:700 !important;
}
html body .guestMemberActions [data-guest-close]{
  border-color:rgba(190,226,231,.18) !important;
  background:rgba(255,255,255,.035) !important;
  color:#d8e5e7 !important;
}
html body .guestMemberActions [data-guest-close]:hover,
html body .guestMemberActions [data-guest-close]:focus-visible{
  background:rgba(255,255,255,.075) !important;
}

/* Popup Jeux côté membre connecté : typographie officielle + texte lisible. */
html body .bodyModalPanel:has(.r697GameInfo){
  font-family:var(--ethnos-font-official) !important;
}
html body .bodyModalPanel:has(.r697GameInfo) > h2{
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(28px,2vw,40px) !important;
  font-weight:800 !important;
  line-height:1.04 !important;
  letter-spacing:-.045em !important;
}
html body .bodyModalPanel:has(.r697GameInfo) .bodyModalContent,
html body .bodyModalPanel:has(.r697GameInfo) .r697GameInfo{
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(15px,.92vw,18px) !important;
  font-weight:500 !important;
  line-height:1.55 !important;
}
html body .bodyModalPanel:has(.r697GameInfo) .bodyModalActions button{
  font-family:var(--ethnos-font-official) !important;
  font-size:clamp(13px,.74vw,15px) !important;
  font-weight:700 !important;
}

/* Les six formats de validation gardent une modale contenue et lisible. */
@media (width:1280px) and (height:720px),
       (width:1366px) and (height:768px){
  html body .guestMemberDialog,
  html body .bodyModalPanel:has(.r697GameInfo){
    width:min(620px,90vw) !important;
    max-height:84vh !important;
    padding:24px !important;
  }
}
@media (width:1536px) and (height:864px),
       (width:1707px) and (height:1067px){
  html body .guestMemberDialog,
  html body .bodyModalPanel:has(.r697GameInfo){
    width:min(650px,90vw) !important;
    padding:28px !important;
  }
}
@media (width:1920px) and (height:1080px),
       (width:2560px) and (height:1440px){
  html body .guestMemberDialog,
  html body .bodyModalPanel:has(.r697GameInfo){
    width:min(700px,90vw) !important;
    padding:32px !important;
  }
}

/* R773 — 1920×1080 : titres des repères bas légèrement réduits à la demande. */
@media (width:1920px) and (height:1080px){
  html body.isEthnosHomeView .r537MetricRow > .r183MetricCard > span{
    font-size:13px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
  }
}