/* ========================================================================== */
/* ETHNOS R150 — Messages, Annuaire et Favoris : géométrie finale             */
/* Base : R149. Corrections cumulées du 4 août 2026.                          */
/* ========================================================================== */

/* 1 — Messages : largeur demandée sans perdre le centrage structurel. */
@media (max-width:1536px){
  html body .memberMessagesDrawer .memberMessageSearch{
    width:calc(100% - 98px) !important;
    max-width:calc(100% - 98px) !important;
  }
}
@media (max-width:1366px){
  html body .memberMessagesDrawer .memberMessageSearch{
    width:calc(100% - 78px) !important;
    max-width:calc(100% - 78px) !important;
  }
}

/* 2 — Annuaire : aucun volume vide avant le titre, axes réellement centrés. */
html body .memberDirectoryShell{
  box-sizing:border-box !important;
  width:100% !important;
  padding:0 !important;
  grid-template-rows:auto minmax(0,1fr) !important;
  align-content:start !important;
}
html body .memberDirectoryHeader{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:0 !important;
  padding:10px 18px 10px !important;
  text-align:center !important;
}
html body .memberDirectoryHeader h2{
  width:100% !important;
  max-width:100% !important;
  margin:0 auto !important;
  font-size:30px !important;
  line-height:1.02 !important;
  text-align:center !important;
  text-wrap:balance;
}
html body .memberDirectoryHeader h2 small{
  font-size:.44em !important;
}
html body .memberDirectoryHeader p{
  width:100% !important;
  max-width:36em !important;
  margin:6px auto 0 !important;
  font-size:11px !important;
  line-height:1.34 !important;
  text-align:center !important;
}
html body .memberDirectoryContent{
  box-sizing:border-box !important;
  width:100% !important;
  padding:12px 14px 4px !important;
}
html body .memberDirectorySection h3,
html body .memberDirectoryNameForm>label,
html body .memberDirectoryNameForm>p{
  width:100% !important;
  max-width:100% !important;
  text-align:center !important;
}
html body .memberDirectorySection h3{
  font-size:20px !important;
  line-height:1.08 !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:normal !important;
  text-wrap:balance;
}
html body .memberDirectoryLocationSection h3{
  white-space:normal !important;
}
html body .memberDirectoryLetterSection{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
  border-bottom:0 !important;
}

/* Fermer suit maintenant réellement le bouton « Chercher avec cette lettre ». */
html body .memberDirectoryContent>.memberDirectoryInlineClose{
  box-sizing:border-box !important;
  width:calc(100% - 28px) !important;
  min-width:0 !important;
  min-height:44px !important;
  margin:10px 14px 14px !important;
  padding:0 14px !important;
  border:1px solid #071a39 !important;
  border-radius:10px !important;
  background:#071a39 !important;
  color:#fffaf3 !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:14px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:0 8px 18px rgba(7,26,57,.12) !important;
  cursor:pointer !important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
html body .memberDirectoryContent>.memberDirectoryInlineClose:hover,
html body .memberDirectoryContent>.memberDirectoryInlineClose:focus-visible{
  filter:brightness(1.08) !important;
  transform:translateY(-2px) !important;
  box-shadow:0 12px 24px rgba(7,26,57,.18) !important;
  outline:none !important;
}

/* 1920 × 1080 : dernière consigne, Fermer à 10 px du bouton de lettre. */
@media (width:1920px) and (height:1080px){
  html body .memberDirectoryContent>.memberDirectoryInlineClose{
    margin-top:10px !important;
  }
}
/* 1536 × 864 : Fermer à 20 px. */
@media (width:1536px) and (height:864px){
  html body .memberDirectoryContent>.memberDirectoryInlineClose{
    margin-top:20px !important;
  }
}
/* 1366 × 768 : Fermer à 5 px. */
@media (width:1366px) and (height:768px){
  html body .memberDirectoryContent>.memberDirectoryInlineClose{
    margin-top:5px !important;
  }
}

/* 1920 et moins : conserver la version compacte de R149, mieux centrée. */
@media (max-width:1920px) and (max-height:1080px){
  html body .memberDirectoryHeader{
    padding:8px 16px 9px !important;
  }
  html body .memberDirectoryHeader h2{
    font-size:25px !important;
  }
  html body .memberDirectoryHeader p{
    margin-top:5px !important;
    font-size:9.5px !important;
  }
  html body .memberDirectoryContent{
    padding:10px 12px 3px !important;
  }
  html body .memberDirectorySection h3{
    font-size:16px !important;
  }
}

/* 1536 × 864 et moins : titres et respirations réduits sans troncature. */
@media (max-width:1600px) and (max-height:920px){
  html body .memberDirectoryHeader{
    padding:6px 11px 7px !important;
  }
  html body .memberDirectoryHeader h2{
    font-size:21px !important;
    line-height:1.01 !important;
  }
  html body .memberDirectoryHeader p{
    margin-top:3px !important;
    font-size:8px !important;
    line-height:1.24 !important;
  }
  html body .memberDirectoryContent{
    padding:7px 10px 2px !important;
  }
  html body .memberDirectorySection{
    padding-bottom:8px !important;
    margin-bottom:8px !important;
  }
  html body .memberDirectoryLetterSection{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
  html body .memberDirectorySection h3{
    margin-bottom:5px !important;
    font-size:13.5px !important;
  }
  html body .memberDirectoryDrawer label{
    margin-bottom:3px !important;
    font-size:7.5px !important;
  }
  html body .memberDirectoryNameForm>p{
    margin-top:3px !important;
    font-size:6.8px !important;
  }
  html body .memberDirectoryContent>.memberDirectoryInlineClose{
    min-height:40px !important;
    font-size:11px !important;
  }
}

/* 3 — Résultats Annuaire : bandeaux bord à bord, cliquables et en relief. */
html body .memberDirectoryShell.isResultsMode .memberDirectoryContent{
  padding-left:0 !important;
  padding-right:0 !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryResults{
  width:100% !important;
  gap:7px !important;
  padding:0 !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryResult{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  cursor:pointer !important;
  transform:translateZ(0) !important;
  box-shadow:0 5px 13px rgba(7,26,57,.08),inset 0 1px 0 rgba(255,255,255,.72) !important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryResult:hover,
html body .memberDirectoryShell.isResultsMode .memberDirectoryResult:focus-visible{
  transform:translateY(-2px) scale(.992) !important;
  box-shadow:0 12px 24px rgba(7,26,57,.16),inset 0 1px 0 rgba(255,255,255,.88) !important;
  filter:brightness(1.015) !important;
  outline:none !important;
}
html body .memberDirectoryShell.isResultsMode .memberDirectoryInlineClose{
  margin-left:14px !important;
  margin-right:14px !important;
}

/* 4 — Favoris : chaque salon devient un bandeau bord à bord, sans bouton. */
html body .memberFavoritesList{
  box-sizing:border-box !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  gap:7px !important;
}
html body .memberFavoriteSalonRow{
  box-sizing:border-box !important;
  width:100% !important;
  max-width:none !important;
  min-height:58px !important;
  margin:0 !important;
  padding:10px 16px !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  border-left:0 !important;
  border-right:0 !important;
  border-radius:0 !important;
  cursor:pointer !important;
  transform:translateZ(0) !important;
  box-shadow:0 5px 13px rgba(7,26,57,.08),inset 0 1px 0 rgba(255,255,255,.72) !important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease !important;
}
html body .memberFavoriteSalonRow:hover,
html body .memberFavoriteSalonRow:focus-visible{
  transform:translateY(-2px) scale(.992) !important;
  box-shadow:0 12px 24px rgba(7,26,57,.16),inset 0 1px 0 rgba(255,255,255,.88) !important;
  filter:brightness(1.015) !important;
  outline:none !important;
}
html body .memberFavoriteSalonAction{
  align-self:center !important;
  color:#f26722 !important;
  font-family:var(--ethnos-official-title) !important;
  font-size:clamp(10px,.72vw,13px) !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

@media (prefers-reduced-motion:reduce){
  html body .memberDirectoryResult,
  html body .memberFavoriteSalonRow,
  html body .memberDirectoryInlineClose{
    transition:none !important;
  }
  html body .memberDirectoryResult:hover,
  html body .memberDirectoryResult:focus-visible,
  html body .memberFavoriteSalonRow:hover,
  html body .memberFavoriteSalonRow:focus-visible,
  html body .memberDirectoryInlineClose:hover,
  html body .memberDirectoryInlineClose:focus-visible{
    transform:none !important;
  }
}