/**
 * GATARD Pro Pages v1.12.31
 * CMS 9 — Event cards clean/proportionate.
 *
 * Le rendu 3 grandes + 5 petites de v1.12.30 est supprimé.
 * 8 catégories = 4x2 desktop, 2 colonnes tablette, 1 colonne mobile.
 */

html body.cms-id-9 #gatard-events #gatard-events-types {
  width: min(1480px, 100%) !important;
  max-width: 1480px !important;
  margin-inline: auto !important;
}

html body.cms-id-9 #gatard-events .gatard-events__cards--visual {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 26px 0 0 !important;
}

/* Neutralise absolument tous les anciens nth-child. */
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3),
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4),
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-last-child(2):nth-child(3n + 1),
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:last-child:nth-child(3n + 2) {
  grid-column: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1.36 / 1 !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(91, 70, 43, .22) !important;
  border-radius: 10px !important;
  background: #15110c !important;
  box-shadow: 0 8px 22px rgba(42,31,17,.09) !important;
  transform: translateZ(0) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(199,151,73,.38) !important;
  box-shadow: 0 16px 34px rgba(42,31,17,.14) !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__media {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__media > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: scale(1.001) !important;
  filter: saturate(.98) contrast(1.02) brightness(.96) !important;
  transition: transform .5s ease, filter .35s ease !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual:hover > .gatard-event-card__media > img {
  transform: scale(1.035) !important;
  filter: saturate(1.02) contrast(1.03) brightness(.99) !important;
}

/* Overlay plus doux et plus proche de la référence. */
html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__veil {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg,
      rgba(8,6,4,.01) 0%,
      rgba(8,6,4,.03) 37%,
      rgba(8,6,4,.22) 58%,
      rgba(8,6,4,.76) 82%,
      rgba(8,6,4,.94) 100%) !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual::after {
  display: none !important;
}

/* Texte en bas à gauche, taille homogène. */
html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__body,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3) > .gatard-event-card__body,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4) > .gatard-event-card__body {
  position: absolute !important;
  z-index: 3 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  padding: 18px 52px 17px 17px !important;
  background: transparent !important;
  text-align: left !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual h3,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3) h3,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4) h3 {
  margin: 0 0 5px !important;
  color: #fffdf8 !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(17px, 1vw, 20px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
  text-align: left !important;
  text-wrap: balance !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.34) !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card--visual p,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3) p,
html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4) p {
  display: -webkit-box !important;
  margin: 0 !important;
  max-width: 31em !important;
  overflow: hidden !important;
  color: rgba(255,253,248,.91) !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(11.5px, .67vw, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 3 !important;
  text-shadow: 0 1px 7px rgba(0,0,0,.32) !important;
}

/* Badge discret */
html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__badge {
  top: 11px !important;
  left: 11px !important;
  min-height: 25px !important;
  padding: 5px 10px !important;
  border-radius: 7px !important;
  font-size: 8px !important;
}

/* Flèche propre : petite, nette, alignée au bloc texte. */
html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__arrow {
  right: 15px !important;
  bottom: 18px !important;
  width: 28px !important;
  height: 16px !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card__arrow-line {
  top: 7px !important;
  width: 22px !important;
  height: 1.5px !important;
}

html body.cms-id-9 #gatard-events .gatard-event-card__arrow-tip {
  right: 1px !important;
  top: 3px !important;
  width: 8px !important;
  height: 8px !important;
  border-top-width: 1.5px !important;
  border-right-width: 1.5px !important;
}

/* TABLETTE */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual,
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-last-child(2):nth-child(3n + 1),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:last-child:nth-child(3n + 2) {
    grid-column: auto !important;
    width: 100% !important;
    aspect-ratio: 1.42 / 1 !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual h3 {
    font-size: clamp(18px, 2.25vw, 21px) !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual p {
    font-size: clamp(12px, 1.45vw, 13.5px) !important;
    -webkit-line-clamp: 3 !important;
  }
}

/* MOBILE */
@media (max-width: 767.98px) {
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin-top: 18px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual,
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(-n + 3),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-child(n + 4),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:nth-last-child(2):nth-child(3n + 1),
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual:last-child:nth-child(3n + 2) {
    grid-column: 1 !important;
    width: 100% !important;
    aspect-ratio: 1.28 / 1 !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual:hover {
    transform: none !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__body {
    padding: 17px 46px 16px 15px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual h3 {
    font-size: clamp(18px, 5vw, 21px) !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual p {
    font-size: clamp(12px, 3.5vw, 13.5px) !important;
    line-height: 1.4 !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card--visual > .gatard-event-card__arrow {
    right: 13px !important;
    bottom: 16px !important;
  }
}

@media (max-width: 380px) {
  html body.cms-id-9 #gatard-events .gatard-events__cards--visual > .gatard-event-card--visual {
    aspect-ratio: 1.16 / 1 !important;
  }
}