/*
 * Bloc : lg/listing-marques
 *
 * Grille de toutes les marques distribuées par le groupe.
 * Mobile-first — breakpoints : md (768px) tablette, lg (1024px) desktop.
 *
 * BEM :
 *   .lg-listing-marques
 *     __header
 *     __badge-wrap
 *     __badge
 *     __title
 *     __subtitle
 *     __liseret / __liseret-mobile / __liseret-tablet / __liseret-desktop
 *     __grid
 *     __card
 *       __card-logo-wrap
 *       __card-logo
 *       __card-name
 *     __empty
 */

/* ────────────────────────────────────────────────────────────────
   Variables locales au bloc
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques {
  --_card-logo-size:   5.625rem;             /* 90px */
  --_card-radius:      1.25rem;              /* 20px */
  --_card-logo-bg:     #f4f4f4;
  --_card-padding:     1.5rem;              /* 24px */
  --_card-inner-gap:   0.75rem;             /* 12px entre logo et nom */
  --_grid-gap:         1.75rem;             /* 28px */
  --_card-shadow:      0 4px 10px rgba(0, 0, 0, 0.2);
  --_card-border:      1px solid #d9d9d9;
  --_card-name-size:   1.5rem;              /* 24px */
  --_card-name-lh:     1.938rem;            /* 31px */
  --_title-color:      #141414;
}

/* ────────────────────────────────────────────────────────────────
   Section
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques {
  padding: 3rem 0;
}

@media (min-width: 768px) {
  .lg-listing-marques {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques {
    padding: 5rem 0;
  }
}

/* ────────────────────────────────────────────────────────────────
   En-tête
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__header {
  position: relative;
  padding-bottom: 2.87rem;
  padding-top: 2.87rem;
}

@media (min-width: 768px) {
  .lg-listing-marques__header {
    padding-bottom: 3.5rem;
    padding-top: 2.62rem; /* 46px — hauteur du liséret mobile */
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques__header {
    padding-bottom: 3.81rem;
    padding-top: 3.03rem;
  }
}

/* ────────────────────────────────────────────────────────────────
   Badge
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__badge-wrap {
  margin-bottom: 2.37rem;
}

@media (min-width: 768px) {
  .lg-listing-marques__badge-wrap {
    margin-bottom: 3.31rem;
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques__badge-wrap {
    margin-bottom: 3rem;
  }
}

/* ────────────────────────────────────────────────────────────────
   Titre
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__title {
  font-family: 'Inria Sans', system-ui, sans-serif;
  font-size: 1.875rem;  /* 30px */
  font-weight: 700;
  line-height: 2rem;    /* 32px */
  text-transform: uppercase;
  color: var(--_title-color);
  text-align: center;
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .lg-listing-marques__title {
    font-size: 2rem;      /* 32px */
    line-height: 2.25rem; /* 36px */
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques__title {
    font-size: 3.125rem;  /* 50px */
    line-height: 4.25rem; /* 68px */
  }
}

/* ────────────────────────────────────────────────────────────────
   Sous-titre
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__subtitle {
  font-family: 'Inria Sans', system-ui, sans-serif;
  font-size: 1.25rem;   /* 20px */
  font-weight: 400;
  line-height: 1.625rem; /* 26px */
  color: var(--_title-color);
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .lg-listing-marques__subtitle {
    font-size: 1.625rem;  /* 26px */
    line-height: 1.938rem; /* 31px */
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques__subtitle {
    font-size: 1.75rem;   /* 28px */
    line-height: 1.938rem; /* 31px */
  }
}

/* ────────────────────────────────────────────────────────────────
   Liséret rouge décoratif
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__liseret {
  overflow: visible;
  position: absolute;
  top: 0;
  right: -2rem;
}

.lg-listing-marques__liseret svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Affichage responsive des variantes */
.lg-listing-marques__liseret .lg-listing-marques__liseret-tablet,
.lg-listing-marques__liseret .lg-listing-marques__liseret-desktop {
  display: none;
}

@media (min-width: 768px) {
  .lg-listing-marques__liseret {
    right: auto;
  }
  .lg-listing-marques__liseret .lg-listing-marques__liseret-mobile  { display: none; }
  .lg-listing-marques__liseret .lg-listing-marques__liseret-tablet  { display: block; }
}

@media (min-width: 1024px) {
  .lg-listing-marques__liseret .lg-listing-marques__liseret-tablet  { display: none; }
  .lg-listing-marques__liseret .lg-listing-marques__liseret-desktop { display: block; }
}

/* ────────────────────────────────────────────────────────────────
   Grille — 1 col mobile, 3 col tablette, 4 col desktop
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--_grid-gap);
}

@media (min-width: 768px) {
  .lg-listing-marques__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .lg-listing-marques__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ────────────────────────────────────────────────────────────────
   Card — fond blanc, bordure, ombre, arrondie
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--_card-inner-gap);
  background-color: #fff;
  border: var(--_card-border);
  border-radius: var(--_card-radius);
  padding: var(--_card-padding);
  text-decoration: none;
  box-shadow: var(--_card-shadow);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lg-listing-marques__card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

/* ────────────────────────────────────────────────────────────────
   Logo wrapper — fond gris clair, arrondi
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__card-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_card-logo-size);
  height: var(--_card-logo-size);
  background-color: var(--_card-logo-bg);
  border-radius: var(--_card-radius);
  flex-shrink: 0;
}

.lg-listing-marques__card-logo {
  max-width: 75%;
  max-height: 75%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ────────────────────────────────────────────────────────────────
   Nom de la marque
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__card-name {
  font-family: 'Inria Sans', system-ui, sans-serif;
  font-size: var(--_card-name-size);
  font-weight: 700;
  line-height: var(--_card-name-lh);
  text-transform: uppercase;
  color: var(--_title-color);
  text-align: center;
  margin: 0;
}

/* ────────────────────────────────────────────────────────────────
   État vide (preview éditeur)
   ──────────────────────────────────────────────────────────────── */

.lg-listing-marques__empty {
  font-family: 'Inria Sans', system-ui, sans-serif;
  font-size: 0.875rem;
  color: #6b6b6b;
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}