{# media-press-logos.html — Bandeau "Vu dans" : label + logos presse en N&B (filter grayscale, hover couleur).
   Slots :
   {{LABEL}}            — "Vu dans" / "As featured in"
   {{LOGOS_HTML}}       — répéter <img class="mpl__logo" src="…" alt="Nom presse" loading="lazy">
#}

<section class="mpl">
  <div class="mpl__inner">
    <span class="mpl__label">{{LABEL}}</span>
    <div class="mpl__row">
      {{LOGOS_HTML}}
    </div>
  </div>
</section>

<style>
  .mpl {
    background: var(--color-bg, #fff); color: var(--color-fg, #111);
    font-family: var(--font-body, system-ui, sans-serif);
    border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  }
  .mpl__inner { max-width: 80rem; margin: 0 auto; padding: 2.5rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
  .mpl__label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; font-weight: 700; opacity: 0.6; }
  .mpl__row { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; justify-content: center; }
  .mpl__logo { height: 1.75rem; width: auto; filter: grayscale(1) opacity(0.65); transition: filter .25s; }
  .mpl__logo:hover { filter: grayscale(0) opacity(1); }
  @media (max-width: 600px) { .mpl__row { gap: 1.5rem; } .mpl__logo { height: 1.4rem; } }
</style>