/**
 * GATARD Pro Pages v1.12.37
 * CMS 9 — "Pour tous vos événements"
 *
 * Corrige le vieux white-space:nowrap historique qui coupait le titre mobile.
 * Ciblage exclusif du heading de #gatard-events-types, pas de la galerie.
 */

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(28px, 1fr) minmax(0, 920px) minmax(28px, 1fr) !important;
  align-items: start !important;
  justify-items: stretch !important;
  gap: clamp(14px, 1.6vw, 26px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 auto clamp(26px, 2.2vw, 38px) !important;
  padding: 0 !important;
  text-align: center !important;
}

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > i {
  align-self: start !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 1px !important;
  margin-top: clamp(18px, 1.6vw, 25px) !important;
  background: linear-gradient(90deg, transparent, rgba(183,131,54,.50)) !important;
  opacity: 1 !important;
}

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > i:last-child {
  transform: scaleX(-1) !important;
}

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > div {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title h2 {
  display: block !important;
  width: 100% !important;
  max-width: 920px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: visible !important;
  color: #211b14 !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(30px, 2.35vw, 44px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  text-transform: uppercase !important;

  /* Neutralise les anciennes règles qui forçaient une seule ligne. */
  white-space: normal !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title p {
  display: block !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin: 10px auto 0 !important;
  padding: 0 !important;
  color: #84796d !important;
  font-family: "Poppins", Arial, Helvetica, sans-serif !important;
  font-size: clamp(12px, .76vw, 14px) !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  letter-spacing: .13em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow-wrap: anywhere !important;
}

/* Desktop : les cartes démarrent avec une respiration régulière. */
html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__cards--visual {
  margin-top: 0 !important;
}

/* TABLETTE */
@media (min-width: 768px) and (max-width: 1199.98px) {
  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title {
    grid-template-columns: minmax(24px, 1fr) minmax(0, 760px) minmax(24px, 1fr) !important;
    gap: clamp(11px, 2vw, 20px) !important;
    margin-bottom: 30px !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > i {
    margin-top: 20px !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title h2 {
    max-width: 720px !important;
    font-size: clamp(28px, 4.2vw, 38px) !important;
    line-height: 1.1 !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title p {
    width: min(100%, 650px) !important;
    margin-top: 9px !important;
    font-size: clamp(11.5px, 1.45vw, 13.5px) !important;
    line-height: 1.5 !important;
    letter-spacing: .10em !important;
  }
}

/* MOBILE — le titre peut enfin se répartir proprement sur 2 lignes. */
@media (max-width: 767.98px) {
  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 22px !important;
    padding: 0 2px !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > i {
    display: none !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title h2 {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    font-size: clamp(25px, 7.2vw, 31px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance !important;
    overflow: visible !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title p {
    width: min(100%, 350px) !important;
    max-width: 350px !important;
    margin: 9px auto 0 !important;
    font-size: clamp(10.5px, 3vw, 12px) !important;
    line-height: 1.48 !important;
    letter-spacing: .09em !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__cards--visual {
    width: 100% !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 390px) {
  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title {
    margin-bottom: 19px !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title h2 {
    width: min(100%, 340px) !important;
    max-width: 340px !important;
    font-size: clamp(23px, 7vw, 28px) !important;
  }

  html body.cms-id-9 #gatard-events #gatard-events-types > .gatard-events__section-title p {
    width: min(100%, 320px) !important;
    max-width: 320px !important;
    font-size: 10.5px !important;
    letter-spacing: .075em !important;
  }
}