/**
 * GATARD Pro Pages v1.12.41
 * CMS 9 — petits traits décoratifs autour des titres.
 *
 * Harmonisation desktop / tablette / mobile :
 * - Pour tous vos événements
 * - Pourquoi choisir Cheesy & Crousty ?
 * - Une ambiance, des souvenirs
 * - Votre événement, votre formule
 * - ÉVÉNEMENT / PRIVATISATION
 */

/* =========================================================
   SECTION TITLES : événements + galerie
   ========================================================= */
html body.cms-id-9 #gatard-events
.gatard-events__section-title,
html body.cms-id-9 #gatard-events
.gatard-events__section-title.gatard-events__section-title--gallery {
  display: grid !important;
  grid-template-columns: minmax(42px, 1fr) minmax(0, 980px) minmax(42px, 1fr) !important;
  align-items: start !important;
  gap: clamp(14px, 1.4vw, 24px) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  text-align: center !important;
}

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

html body.cms-id-9 #gatard-events
.gatard-events__section-title > i {
  display: block !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: 100% !important;
  max-width: 92px !important;
  min-width: 0 !important;
  height: 1.5px !important;
  margin-top: clamp(17px, 1.45vw, 23px) !important;
  border-radius: 99px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(183,131,54,.72) 52%,
    #c99749 100%
  ) !important;
  opacity: .92 !important;
}

html body.cms-id-9 #gatard-events
.gatard-events__section-title > i:first-child {
  justify-self: end !important;
}

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

/* =========================================================
   VALUES TITLE : Pourquoi choisir...
   ========================================================= */
html body.cms-id-9 #gatard-events
.gatard-events__commitment-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(13px, 1.35vw, 22px) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html body.cms-id-9 #gatard-events
.gatard-events__commitment-title > i {
  display: block !important;
  width: clamp(46px, 4.5vw, 82px) !important;
  min-width: 0 !important;
  height: 1.5px !important;
  flex: 0 1 82px !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, rgba(216,167,72,.82)) !important;
  opacity: .9 !important;
}

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

html body.cms-id-9 #gatard-events
.gatard-events__commitment-title > h2 {
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  text-wrap: balance !important;
}

/* =========================================================
   PROJECT EYEBROW : traits symétriques
   ========================================================= */
html body.cms-id-9 #gatard-events
.gatard-project-v3__eyebrow {
  display: inline-grid !important;
  grid-template-columns: 34px auto 34px !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 11px !important;
  width: auto !important;
}

html body.cms-id-9 #gatard-events
.gatard-project-v3__eyebrow::before,
html body.cms-id-9 #gatard-events
.gatard-project-v3__eyebrow::after {
  content: "" !important;
  display: block !important;
  width: 34px !important;
  height: 1.5px !important;
  margin: 0 !important;
  border-radius: 99px !important;
  background: linear-gradient(90deg, transparent, currentColor) !important;
  opacity: .78 !important;
}

html body.cms-id-9 #gatard-events
.gatard-project-v3__eyebrow::after {
  transform: scaleX(-1) !important;
}

/* =========================================================
   HERO EYEBROW
   ========================================================= */
/* Desktop: guarantee symmetric line geometry around the label. */
@media (min-width: 1200px) {
  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow {
    display: grid !important;
    grid-template-columns: 58px 17px auto 58px !important;
    align-items: center !important;
    justify-content: start !important;
    column-gap: 12px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > .gatard-events__eyebrow-line {
    width: 58px !important;
    max-width: 58px !important;
    height: 1.5px !important;
    margin: 0 !important;
  }
}

/* =========================================================
   TABLETTE
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {

  html body.cms-id-9 #gatard-events
  .gatard-events__section-title,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery {
    grid-template-columns: minmax(34px, 1fr) minmax(0, 780px) minmax(34px, 1fr) !important;
    gap: 14px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__section-title > i {
    max-width: 58px !important;
    height: 1.5px !important;
    margin-top: 19px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title {
    gap: 13px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title > i {
    width: clamp(36px, 5vw, 56px) !important;
    flex-basis: 56px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow {
    grid-template-columns: 28px auto 28px !important;
    column-gap: 9px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow::before,
  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow::after {
    width: 28px !important;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767.98px) {

  /* Re-enable small ornaments that previous responsive rules hid. */
  html body.cms-id-9 #gatard-events
  #gatard-events-types > .gatard-events__section-title,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) 22px !important;
    align-items: start !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  html body.cms-id-9 #gatard-events
  #gatard-events-types > .gatard-events__section-title > i,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery > i {
    display: block !important;
    width: 22px !important;
    max-width: 22px !important;
    min-width: 22px !important;
    height: 1.5px !important;
    margin-top: 15px !important;
    background: linear-gradient(90deg, transparent, #c99749) !important;
    opacity: .9 !important;
  }

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

  html body.cms-id-9 #gatard-events
  #gatard-events-types > .gatard-events__section-title h2,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery h2 {
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    white-space: normal !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  /* Values */
  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title > i {
    display: block !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 1.5px !important;
    margin: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(216,167,72,.86)) !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title > h2 {
    width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  /* Project eyebrow */
  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow {
    grid-template-columns: 22px auto 22px !important;
    column-gap: 8px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow::before,
  html body.cms-id-9 #gatard-events
  .gatard-project-v3__eyebrow::after {
    width: 22px !important;
    height: 1.5px !important;
  }

  /* Hero eyebrow: bring back two tiny symmetric lines, keep pin hidden. */
  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow {
    display: grid !important;
    grid-template-columns: 22px minmax(0, auto) 22px !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 8px !important;
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > .gatard-icon {
    display: none !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > .gatard-events__eyebrow-line {
    display: block !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 1.5px !important;
    margin: 0 !important;
    background: linear-gradient(90deg, transparent, #d9ad67) !important;
    opacity: .86 !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > .gatard-events__eyebrow-line:last-child {
    transform: scaleX(-1) !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > strong {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* Very small phones: keep ornaments visible but compact. */
@media (max-width: 390px) {
  html body.cms-id-9 #gatard-events
  #gatard-events-types > .gatard-events__section-title,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery {
    grid-template-columns: 18px minmax(0, 1fr) 18px !important;
    gap: 7px !important;
  }

  html body.cms-id-9 #gatard-events
  #gatard-events-types > .gatard-events__section-title > i,
  html body.cms-id-9 #gatard-events
  .gatard-events__section-title.gatard-events__section-title--gallery > i {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title {
    grid-template-columns: 18px minmax(0,1fr) 18px !important;
    gap: 7px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__commitment-title > i {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow {
    grid-template-columns: 18px minmax(0, auto) 18px !important;
    column-gap: 7px !important;
  }

  html body.cms-id-9 #gatard-events
  .gatard-events__hero-inner > .gatard-events__eyebrow
  > .gatard-events__eyebrow-line {
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
  }
}