/* ========================================================================== */
/* ETHNOS R163 — médias compacts identiques sur tous les formats              */
/* Base : R162. La vignette et les actions restent sur la première ligne ;    */
/* le nom et l'information du fichier restent sous la vignette, alignés à     */
/* gauche. Aucun recentrage de type carte sur les grands écrans.              */
/* ========================================================================== */

html body .memberMediaBand{
  grid-template-columns:minmax(106px,1fr) auto !important;
  grid-template-rows:auto auto !important;
  grid-template-areas:
    "visual actions"
    "copy ." !important;
  column-gap:12px !important;
  row-gap:6px !important;
  align-items:start !important;
}

/* Les deux éléments internes participent directement à la grille du bandeau. */
html body .memberMediaBandFile{
  display:contents !important;
}

html body .memberMediaBandVisual{
  grid-area:visual !important;
  justify-self:start !important;
  align-self:center !important;
}

html body .memberMediaBandCopy{
  grid-area:copy !important;
  justify-self:start !important;
  align-self:start !important;
  width:min(100%,170px) !important;
  min-width:0 !important;
  margin:0 !important;
  overflow:visible !important;
  text-align:left !important;
}

html body .memberMediaBandCopy strong,
html body .memberMediaBandCopy small{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-align:left !important;
}

html body .memberMediaBandCopy small{
  margin-top:4px !important;
}

html body .memberMediaBandActions{
  grid-area:actions !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
}

/* Neutralise les anciens placements responsives qui repoussaient les boutons. */
@media (max-width:1600px) and (max-height:920px){
  html body .memberMediaBand{
    grid-template-columns:minmax(98px,1fr) auto !important;
    grid-template-areas:
      "visual actions"
      "copy ." !important;
    column-gap:9px !important;
    row-gap:5px !important;
  }
  html body .memberMediaBandCopy{width:min(100%,150px) !important}
}

@media (max-width:520px){
  html body .memberMediaBand{
    grid-template-columns:minmax(86px,1fr) auto !important;
    grid-template-areas:
      "visual actions"
      "copy ." !important;
    column-gap:7px !important;
  }
  html body .memberMediaBandActions{
    grid-column:auto !important;
    justify-content:flex-end !important;
  }
  html body .memberMediaBandCopy{width:min(100%,132px) !important}
}