/*
 * GATARD Pro Pages 1.9.45 — accueil mobile, correction ciblée.
 * Ne modifie ni le header, ni le menu rapide, ni le slider,
 * ni les autres pages CMS, ni la protection de stabilité CCM.
 */

@media (max-width: 767px) {
  /*
   * Histoire : deux lignes réelles et stables.
   * 1. titre principal ; 2. accent. La taille reste généreuse mais
   * s'adapte à la largeur disponible afin d'éviter quatre retours.
   */
  html body.page-index #gatard-home .gatard-home__story-copy > .gatard-home__section-eyebrow {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  html body.page-index #gatard-home #gatard-home-story-title.gatard-home__section-title {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px !important;
    padding: 0 !important;
    font-size: clamp(20px, 6.1vw, 26.5px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    text-align: center !important;
    text-wrap: nowrap !important;
  }

  html body.page-index #gatard-home #gatard-home-story-title > .gatard-home__section-title-main,
  html body.page-index #gatard-home #gatard-home-story-title > strong {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  html body.page-index #gatard-home #gatard-home-story-title > strong {
    margin-top: 3px !important;
  }

  /*
   * Événement : l'ancien height en vw du média occupait inutilement
   * près de 310 px sur 430 px. Le ratio 16:9 libère la place et permet
   * au contenu texte d'être visuellement au centre de son bloc.
   */
  html body.page-index #gatard-home .gatard-home__event-card {
    display: flex !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  html body.page-index #gatard-home .gatard-home__event-media {
    order: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
  }

  html body.page-index #gatard-home .gatard-home__event-media > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy {
    order: 2 !important;
    display: flex !important;
    width: 100% !important;
    min-height: clamp(210px, 52vw, 230px) !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 18px 16px !important;
    text-align: center !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy > * {
    flex: 0 0 auto !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy .gatard-home__section-eyebrow,
  html body.page-index #gatard-home .gatard-home__event-copy .gatard-home__section-title,
  html body.page-index #gatard-home .gatard-home__event-copy > p {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy .gatard-home__section-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 7px !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy .gatard-home__section-title {
    max-width: 360px !important;
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy > p {
    max-width: 345px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy .gatard-home__button {
    align-self: center !important;
    margin: 0 auto !important;
  }
}

@media (max-width: 359px) {
  html body.page-index #gatard-home #gatard-home-story-title.gatard-home__section-title {
    font-size: clamp(19px, 5.9vw, 21px) !important;
    letter-spacing: -.045em !important;
  }

  html body.page-index #gatard-home .gatard-home__event-copy {
    min-height: 205px !important;
    padding-inline: 14px !important;
  }
}