/*
 * GATARD Pro Pages 1.9.38
 * Correctif structurel responsive CMS 6, 8, 9 et 10.
 *
 * Principes :
 * - aucun recalcul lie au scroll ou a la hauteur visible du navigateur ;
 * - le menu CCM est explicitement exclu des racines GATARD ;
 * - fonds pleine largeur, contenu avec gouttiere reelle de 15 px ;
 * - dimensions reservees pour les images chargees en lazy afin d'eviter les CLS.
 */

html body.cms-id-6 #content-wrapper,
html body.cms-id-6 #content,
html body.cms-id-6 .page-content,
html body.cms-id-8 #content-wrapper,
html body.cms-id-8 #content,
html body.cms-id-8 .page-content,
html body.cms-id-9 #content-wrapper,
html body.cms-id-9 #content,
html body.cms-id-9 .page-content,
html body.cms-id-10 #content-wrapper,
html body.cms-id-10 #content,
html body.cms-id-10 .page-content {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

html body.cms-id-6 #gatard-carte,
html body.cms-id-8 #gatard-locations,
html body.cms-id-9 #gatard-events,
html body.cms-id-10 #gatard-gallery {
  --gpp-page-gutter: 15px;
  --gpp-content-width: calc(100% - (var(--gpp-page-gutter) * 2));
  --gpp-quick-menu-height: 68px;
  --gpp-quick-menu-gap: 18px;
  --gpp-hero-safe-top: calc(var(--gpp-quick-menu-height) + var(--gpp-quick-menu-gap));
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  translate: none !important;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  overflow-anchor: none !important;
}

html body.cms-id-6 #gatard-carte *,
html body.cms-id-8 #gatard-locations *,
html body.cms-id-9 #gatard-events *,
html body.cms-id-10 #gatard-gallery * {
  box-sizing: border-box !important;
  min-width: 0;
}

html body.cms-id-6 #gatard-carte img,
html body.cms-id-8 #gatard-locations img,
html body.cms-id-9 #gatard-events img,
html body.cms-id-10 #gatard-gallery img {
  display: block !important;
  max-width: 100% !important;
}

/* Les anciens marqueurs CCM ne doivent plus transformer les pages. */
html body.cms-id-6 #gatard-carte [class*="ccm"][class*="hero"],
html body.cms-id-8 #gatard-locations [class*="ccm"][class*="hero"],
html body.cms-id-9 #gatard-events [class*="ccm"][class*="hero"],
html body.cms-id-10 #gatard-gallery [class*="ccm"][class*="hero"] {
  animation: none !important;
  transition: none !important;
}

@media (max-width: 1199px) {
  html body.cms-id-6 #gatard-carte,
  html body.cms-id-8 #gatard-locations,
  html body.cms-id-9 #gatard-events,
  html body.cms-id-10 #gatard-gallery {
    --gpp-page-gutter: 15px;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__hero,
  html body.cms-id-6 #gatard-carte .gatard-carte__hero-inner,
  html body.cms-id-6 #gatard-carte .gatard-carte__shell,
  html body.cms-id-8 #gatard-locations .gatard-locations__hero,
  html body.cms-id-8 #gatard-locations .gatard-locations__hero-inner,
  html body.cms-id-8 #gatard-locations .gatard-locations__shell,
  html body.cms-id-8 #gatard-locations .gatard-locations__toolbar,
  html body.cms-id-9 #gatard-events .gatard-events__inner,
  html body.cms-id-9 #gatard-events .gatard-events__hero,
  html body.cms-id-9 #gatard-events .gatard-events__hero-media,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__hero,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__hero-inner,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__shell,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__tabs,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__shell-inner {
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    translate: none !important;
  }

  /* CMS 6 — La carte */
  html body.cms-id-6 #gatard-carte .gatard-carte__hero {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.cms-id-6 #gatard-carte .gatard-carte__hero-inner {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: var(--gpp-hero-safe-top) 0 40px !important;
  }
  html body.cms-id-6 #gatard-carte .gatard-carte__shell {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 28px 0 52px !important;
  }

  /* CMS 8 — Emplacements */
  html body.cms-id-8 #gatard-locations .gatard-locations__hero {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__hero-inner {
    width: var(--gpp-content-width) !important;
    max-width: 920px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: var(--gpp-hero-safe-top) 0 42px !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__shell {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 20px 0 54px !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__toolbar,
  html body.cms-id-8 #gatard-locations .gatard-locations__list,
  html body.cms-id-8 #gatard-locations .gatard-location-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card {
    overflow: hidden !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card__photo {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card__map {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card__photo > img,
  html body.cms-id-8 #gatard-locations .gatard-location-card__map > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* CMS 9 — Événement / privatisation */
  html body.cms-id-9 #gatard-events .gatard-events__inner {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    margin: 0 auto !important;
    padding: 0 0 56px !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "media" "copy" !important;
    gap: 22px !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: var(--gpp-hero-safe-top) 0 0 !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    grid-area: media !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy {
    grid-area: copy !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__features,
  html body.cms-id-9 #gatard-events .gatard-events__cards,
  html body.cms-id-9 #gatard-events .gatard-events__commitment,
  html body.cms-id-9 #gatard-events .gatard-events__project,
  html body.cms-id-9 #gatard-events .gatard-events__gallery {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
  html body.cms-id-9 #gatard-events .gatard-event-card figure,
  html body.cms-id-9 #gatard-events .gatard-events__project figure,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-item,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-open {
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
  }
  html body.cms-id-9 #gatard-events .gatard-event-card figure > img,
  html body.cms-id-9 #gatard-events .gatard-events__project figure > img,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-open > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* CMS 10 — Galerie */
  html body.cms-id-10 #gatard-gallery.gatard-gallery--reference {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__hero {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__hero-inner {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: var(--gpp-hero-safe-top) 0 46px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 0 54px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__tabs,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__shell-inner {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    margin-inline: auto !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__tabs {
    margin-top: 16px !important;
    margin-bottom: 34px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-slider,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section {
    margin: 0 0 42px !important;
    padding: 0 !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-slider {
    position: relative !important;
    overflow: hidden !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    display: flex !important;
    gap: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid::-webkit-scrollbar {
    display: none !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    scroll-snap-align: start !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    display: grid !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > figcaption {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    transform: none !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow {
    top: 50% !important;
    z-index: 5 !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow--prev { left: 8px !important; }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow--next { right: 8px !important; }
}

@media (max-width: 767px) {
  html body.cms-id-8 #gatard-locations .gatard-locations__toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 14px !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__filters {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 0 4px !important;
    scrollbar-width: none !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__filters::-webkit-scrollbar { display: none !important; }
  html body.cms-id-8 #gatard-locations .gatard-locations__filter { flex: 0 0 auto !important; min-height: 44px !important; }
  html body.cms-id-8 #gatard-locations .gatard-locations__actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__period,
  html body.cms-id-8 #gatard-locations .gatard-locations__search {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card,
  html body.cms-id-8 #gatard-locations .gatard-location-card:nth-child(even) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "photo" "content" "map" !important;
    gap: 0 !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-location-card__photo { grid-area: photo !important; }
  html body.cms-id-8 #gatard-locations .gatard-location-card__content { grid-area: content !important; }
  html body.cms-id-8 #gatard-locations .gatard-location-card__map { grid-area: map !important; }

  html body.cms-id-9 #gatard-events .gatard-events__features {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__feature {
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) !important;
    align-items: center !important;
    justify-items: start !important;
    gap: 12px !important;
    min-height: 68px !important;
    padding: 10px 14px !important;
    text-align: left !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__cards,
  html body.cms-id-9 #gatard-events .gatard-events__commitment-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__project {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__tab {
    width: 100% !important;
    min-height: 62px !important;
    padding: 9px 10px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 15px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__show-all {
    white-space: nowrap !important;
    font-size: 10px !important;
    padding-inline: 10px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    max-height: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.cms-id-8 #gatard-locations .gatard-locations__toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 20px !important;
  }
  html body.cms-id-8 #gatard-locations .gatard-locations__actions {
    display: grid !important;
    grid-template-columns: minmax(210px, .75fr) minmax(260px, 1.25fr) !important;
    gap: 12px !important;
    width: 100% !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__features {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  html body.cms-id-9 #gatard-events .gatard-events__cards,
  html body.cms-id-9 #gatard-events .gatard-events__commitment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
  html body.cms-id-10 #gatard-gallery .gatard-gallery__tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

@media (min-width: 1200px) {
  html body.cms-id-6 #gatard-carte,
  html body.cms-id-8 #gatard-locations,
  html body.cms-id-9 #gatard-events,
  html body.cms-id-10 #gatard-gallery {
    --gpp-quick-menu-height: 0px;
    --gpp-quick-menu-gap: 0px;
  }
}


/* 1.9.38 — neutralisation des cibles que CCM essaie de déplacer au scroll. */
@media (max-width: 1199px) {
  html body.cms-id-6 #gatard-carte [data-gatard-no-ccm],
  html body.cms-id-8 #gatard-locations [data-gatard-no-ccm],
  html body.cms-id-9 #gatard-events [data-gatard-no-ccm],
  html body.cms-id-10 #gatard-gallery [data-gatard-no-ccm] {
    scroll-margin-top: 86px;
  }

  html body.cms-id-6 #gatard-carte [data-ccm-original-hero-margin-top],
  html body.cms-id-6 #gatard-carte [data-ccm-hero-pull-amount],
  html body.cms-id-8 #gatard-locations [data-ccm-original-hero-margin-top],
  html body.cms-id-8 #gatard-locations [data-ccm-hero-pull-amount],
  html body.cms-id-9 #gatard-events [data-ccm-original-hero-margin-top],
  html body.cms-id-9 #gatard-events [data-ccm-hero-pull-amount],
  html body.cms-id-10 #gatard-gallery [data-ccm-original-hero-margin-top],
  html body.cms-id-10 #gatard-gallery [data-ccm-hero-pull-amount],
  html body.cms-id-6 #gatard-carte .ccm-page-hero-overlay-section,
  html body.cms-id-8 #gatard-locations .ccm-page-hero-overlay-section,
  html body.cms-id-9 #gatard-events .ccm-page-hero-overlay-section,
  html body.cms-id-10 #gatard-gallery .ccm-page-hero-overlay-section,
  html body.cms-id-6 #gatard-carte .ccmm-page-hero-overlay-section,
  html body.cms-id-8 #gatard-locations .ccmm-page-hero-overlay-section,
  html body.cms-id-9 #gatard-events .ccmm-page-hero-overlay-section,
  html body.cms-id-10 #gatard-gallery .ccmm-page-hero-overlay-section {
    animation: none !important;
    transition: none !important;
  }

  /* Les contenus normaux ne dépendent jamais de vh/dvh : la barre d'adresse
     mobile peut donc apparaître/disparaître sans redimensionner les images. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

/*
 * 1.9.39 — finition visuelle mobile/tablette.
 * La protection CCM/scroll de la 1.9.38 reste inchangée : cette couche ne
 * contient aucun JavaScript et ne recalcule aucune position au défilement.
 */

@media (max-width: 1199px) {
  /* Les images occupent réellement leurs cadres sur Carte, Emplacements,
     Événement et Galerie. Les dimensions des cadres restent fixes afin de
     préserver la stabilité obtenue en 1.9.38. */
  html body.cms-id-6 #gatard-carte .gatard-carte__hero-image,
  html body.cms-id-6 #gatard-carte .gatard-carte__food-media,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-media,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature-media,
  html body.cms-id-6 #gatard-carte .gatard-carte__contact-media,
  html body.cms-id-8 #gatard-locations .gatard-location-card__photo,
  html body.cms-id-8 #gatard-locations .gatard-location-card__map,
  html body.cms-id-9 #gatard-events .gatard-events__hero-media,
  html body.cms-id-9 #gatard-events .gatard-event-card figure,
  html body.cms-id-9 #gatard-events .gatard-events__project figure,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-open,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    overflow: hidden !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__hero-image > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__food-media > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-media > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature-media > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__contact-media > img,
  html body.cms-id-8 #gatard-locations .gatard-location-card__photo > img,
  html body.cms-id-8 #gatard-locations .gatard-location-card__map > img,
  html body.cms-id-9 #gatard-events .gatard-events__hero-media > img,
  html body.cms-id-9 #gatard-events .gatard-event-card figure > img,
  html body.cms-id-9 #gatard-events .gatard-events__project figure > img,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-open > img,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__contact-media > img {
    min-height: 100% !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
    object-position: center 45% !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid .gatard-gallery__photo {
    display: block !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    height: 100% !important;
    background: #fffaf2 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
  }
}

@media (max-width: 767px) {
  /* Hero Événement centré uniquement sur mobile. */
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__eyebrow {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__eyebrow > span,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 > span,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 > em,
  html body.cms-id-9 #gatard-events .gatard-events__script,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy > p {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 {
    display: block !important;
    text-wrap: balance !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__script {
    display: block !important;
  }

  /* Deux photos visibles dans chaque rangée, puis défilement horizontal. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
    scroll-padding-inline: 0 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid--mosaic .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid--cards .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid--team .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid--event .gatard-gallery__photo {
    display: block !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    scroll-snap-align: start !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption {
    min-height: 64px !important;
    padding: 9px 10px !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption strong,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption small {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* CTA centrés sur mobile. Les filtres, onglets et flèches restent exclus. */
  html body.cms-id-6 #gatard-carte .gatard-carte__button,
  html body.cms-id-8 #gatard-locations .gatard-locations__hero-btn,
  html body.cms-id-8 #gatard-locations .gatard-location-card__route,
  html body.cms-id-9 #gatard-events .gatard-events__btn,
  html body.cms-id-9 #gatard-events .gatard-events__small-btn,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__moments-copy > a,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__btn {
    display: inline-flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__card-inner,
  html body.cms-id-8 #gatard-locations .gatard-locations__hero-inner,
  html body.cms-id-9 #gatard-events .gatard-events__project-copy,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__moments-copy {
    text-align: center !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__bottom {
    align-items: center !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__route {
    min-width: min(100%, 210px) !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero .gatard-events__btn,
  html body.cms-id-9 #gatard-events .gatard-events__project-copy .gatard-events__small-btn {
    min-width: min(100%, 250px) !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-actions {
    text-align: center !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__show-all,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__back {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* Trois photos visibles sur tablette, le reste reste défilable. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    gap: 14px !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid .gatard-gallery__photo {
    display: block !important;
    flex: 0 0 calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    aspect-ratio: 4 / 3 !important;
  }
}

/*
 * 1.9.40 — optimisation mobile/tablette sans régression de stabilité.
 *
 * - neutralise définitivement le débordement horizontal hérité des anciens
 *   full-bleed en 100vw ;
 * - conserve la protection CCM/scroll de la 1.9.38 ;
 * - affiche les visuels produits de la Carte sans recadrage ;
 * - réduit les médias trop hauts sur mobile/tablette ;
 * - garde deux photos visibles dans la Galerie sur mobile, puis défilement
 *   interne uniquement (jamais de déplacement horizontal de la page).
 */

/* 1.12.53 — confinement horizontal UNIQUEMENT dans les racines GATARD.
 * Anciennes versions : body / #page / #wrapper / main étaient clippés ici.
 * Cela pouvait perturber le retour de scroll du header mobile. */
body.cms-id-6 #gatard-carte,
body.cms-id-8 #gatard-locations,
body.cms-id-9 #gatard-events,
body.cms-id-10 #gatard-gallery {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

@supports (overflow: clip) {
  body.cms-id-6 #gatard-carte,
  body.cms-id-8 #gatard-locations,
  body.cms-id-9 #gatard-events,
  body.cms-id-10 #gatard-gallery {
    overflow-x: clip !important;
  }
}

@media (max-width: 1199px) {
  /* Écrase les anciens full-bleed 100vw / left:50% sans toucher au header. */
  html body.cms-id-6 #gatard-carte :is(
    .gatard-carte__hero,
    .gatard-carte__hero-inner,
    .gatard-carte__shell,
    .gatard-carte__cards,
    .gatard-carte__card,
    .gatard-carte__card-inner,
    .gatard-carte__contact
  ),
  html body.cms-id-8 #gatard-locations :is(
    .gatard-locations__hero,
    .gatard-locations__hero-inner,
    .gatard-locations__shell,
    .gatard-locations__toolbar,
    .gatard-locations__list,
    .gatard-location-card
  ),
  html body.cms-id-9 #gatard-events :is(
    .gatard-events__inner,
    .gatard-events__hero,
    .gatard-events__features,
    .gatard-events__cards,
    .gatard-events__commitment,
    .gatard-events__project,
    .gatard-events__gallery
  ),
  html body.cms-id-10 #gatard-gallery :is(
    .gatard-gallery__hero,
    .gatard-gallery__hero-inner,
    .gatard-gallery__shell,
    .gatard-gallery__tabs,
    .gatard-gallery__shell-inner,
    .gatard-gallery__section,
    .gatard-gallery__section-slider,
    .gatard-gallery__duo,
    .gatard-gallery__moments
  ) {
    left: auto !important;
    right: auto !important;
    translate: none !important;
    transform: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.cms-id-6 #gatard-carte,
  html body.cms-id-8 #gatard-locations,
  html body.cms-id-9 #gatard-events,
  html body.cms-id-10 #gatard-gallery {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ----------------------------------------------------------------------
   * CMS 6 — Carte : visuels produits complets, plus petits et lisibles.
   * ------------------------------------------------------------------- */
  html body.cms-id-6 #gatard-carte .gatard-carte__cards {
    width: var(--gpp-content-width) !important;
    max-width: 1800px !important;
    margin-inline: auto !important;
    align-items: start !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__card,
  html body.cms-id-6 #gatard-carte .gatard-carte__card-inner {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__food-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__food-tile,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-item,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__food-media {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    padding: 6px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .68) !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__food-media > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-media > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature-media > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 3px !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 0 !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__list-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 78px !important;
    padding: 8px 0 !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__list-media {
    display: block !important;
    width: 72px !important;
    height: 60px !important;
    max-width: 72px !important;
    max-height: 60px !important;
    aspect-ratio: auto !important;
    padding: 3px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, .62) !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__list-item > div,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-item strong,
  html body.cms-id-6 #gatard-carte .gatard-carte__list-item small {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__feature > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature-media {
    width: 100% !important;
    height: auto !important;
    max-height: 190px !important;
    aspect-ratio: 16 / 9 !important;
    background: rgba(255, 255, 255, .62) !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__contact-media > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ----------------------------------------------------------------------
   * CMS 8 — Emplacements : cartes et médias bornés à la largeur utile.
   * ------------------------------------------------------------------- */
  html body.cms-id-8 #gatard-locations .gatard-locations__filters,
  html body.cms-id-8 #gatard-locations .gatard-locations__actions {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__photo,
  html body.cms-id-8 #gatard-locations .gatard-location-card__map {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__photo {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 260px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__map {
    height: auto !important;
    aspect-ratio: 16 / 8 !important;
    max-height: 180px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__photo > img,
  html body.cms-id-8 #gatard-locations .gatard-location-card__map > img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ----------------------------------------------------------------------
   * CMS 9 — Événement : photos moins hautes et structure sans débordement.
   * ------------------------------------------------------------------- */
  html body.cms-id-9 #gatard-events .gatard-events__hero-media,
  html body.cms-id-9 #gatard-events .gatard-event-card figure,
  html body.cms-id-9 #gatard-events .gatard-events__project figure,
  html body.cms-id-9 #gatard-events .gatard-events__gallery-open {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 360px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card figure {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 250px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__project figure {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    max-height: 320px !important;
  }

  html body.cms-id-9 #gatard-events :is(
    .gatard-events__hero-media,
    .gatard-event-card figure,
    .gatard-events__project figure,
    .gatard-events__gallery-open
  ) > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* ----------------------------------------------------------------------
   * CMS 10 — Galerie : défilement interne, jamais de scroll horizontal page.
   * ------------------------------------------------------------------- */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-slider {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid::-webkit-scrollbar {
    display: none !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    display: grid !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow {
    max-width: 42px !important;
    transform: translateY(-50%) !important;
    z-index: 4 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow--prev {
    left: 4px !important;
    right: auto !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__row-arrow--next {
    right: 4px !important;
    left: auto !important;
  }
}

@media (max-width: 767px) {
  html body.cms-id-6 #gatard-carte .gatard-carte__shell,
  html body.cms-id-8 #gatard-locations .gatard-locations__shell,
  html body.cms-id-9 #gatard-events .gatard-events__inner,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__shell-inner {
    width: calc(100% - 30px) !important;
    max-width: calc(100% - 30px) !important;
    margin-inline: auto !important;
  }

  /* Carte : une carte par ligne, visuels compacts et entiers. */
  html body.cms-id-6 #gatard-carte .gatard-carte__cards {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__card-inner {
    padding: 20px 14px !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__food-media {
    aspect-ratio: 4 / 3 !important;
    max-height: 126px !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__feature > img,
  html body.cms-id-6 #gatard-carte .gatard-carte__feature-media {
    max-height: 150px !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__contact {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Emplacements : une carte par ligne et filtres qui reviennent à la ligne. */
  html body.cms-id-8 #gatard-locations .gatard-locations__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-locations__filters {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__photo {
    max-height: 220px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-location-card__map {
    max-height: 145px !important;
  }

  /* Événement : une colonne, images raisonnables et centrage conservé. */
  html body.cms-id-9 #gatard-events .gatard-events__hero,
  html body.cms-id-9 #gatard-events .gatard-events__features,
  html body.cms-id-9 #gatard-events .gatard-events__cards,
  html body.cms-id-9 #gatard-events .gatard-events__commitment-grid,
  html body.cms-id-9 #gatard-events .gatard-events__project {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    max-height: 245px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-event-card figure {
    max-height: 205px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__project figure {
    max-height: 225px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy,
  html body.cms-id-9 #gatard-events .gatard-events__eyebrow,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1,
  html body.cms-id-9 #gatard-events .gatard-events__script,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy > p {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Galerie : exactement deux cartes visibles, puis glissement interne. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    display: flex !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid > .gatard-gallery__photo {
    display: block !important;
    flex: 0 0 calc((100% - 10px) / 2) !important;
    width: calc((100% - 10px) / 2) !important;
    min-width: calc((100% - 10px) / 2) !important;
    max-width: calc((100% - 10px) / 2) !important;
    height: auto !important;
    scroll-snap-align: start !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption {
    min-height: 58px !important;
    padding: 8px !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption strong {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption small {
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  /* Les boutons restent centrés sans pouvoir élargir la page. */
  html body.cms-id-6 #gatard-carte a,
  html body.cms-id-8 #gatard-locations a,
  html body.cms-id-9 #gatard-events a,
  html body.cms-id-10 #gatard-gallery a,
  html body.cms-id-10 #gatard-gallery button {
    max-width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.cms-id-6 #gatard-carte .gatard-carte__cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__card--private {
    grid-column: 1 / -1 !important;
  }

  html body.cms-id-6 #gatard-carte .gatard-carte__card--private .gatard-carte__list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 20px !important;
  }

  html body.cms-id-8 #gatard-locations .gatard-locations__list,
  html body.cms-id-9 #gatard-events .gatard-events__cards,
  html body.cms-id-9 #gatard-events .gatard-events__commitment-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    max-height: 320px !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    display: flex !important;
    gap: 14px !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid > .gatard-gallery__photo {
    flex: 0 0 calc((100% - 28px) / 3) !important;
    width: calc((100% - 28px) / 3) !important;
    min-width: calc((100% - 28px) / 3) !important;
    max-width: calc((100% - 28px) / 3) !important;
    height: auto !important;
    scroll-snap-align: start !important;
  }
}

/*
 * 1.9.41 — finition mobile/tablette lisible, sans toucher à la stabilité CCM.
 * - hero Événement au ratio naturel, sans découpe ;
 * - eyebrow, titre, script, description et projet centrés sur mobile ;
 * - Galerie : deux vraies vignettes lisibles sur mobile, puis défilement interne ;
 * - aucun nouveau calcul JavaScript, aucune règle liée au scroll.
 */

@media (max-width: 1199px) {
  /* Le visuel du hero garde désormais son ratio complet. */
  html body.cms-id-9 #gatard-events .gatard-events__hero-media {
    aspect-ratio: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Galerie plus lisible : le rail reste strictement interne à la page. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid::-webkit-scrollbar {
    display: none !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo,
  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open {
    display: grid !important;
    grid-template-rows: auto minmax(56px, auto) !important;
    align-content: start !important;
    overflow: hidden !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(145px, 24vw, 220px) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > figcaption {
    display: flex !important;
    min-width: 0 !important;
    min-height: 56px !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 10px 11px !important;
  }
}

@media (max-width: 767px) {
  /* Hero Événement : centrage optique réel. */
  html body.cms-id-9 #gatard-events .gatard-events__hero {
    gap: 18px !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy {
    display: flex !important;
    width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-inline: 2px !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__eyebrow {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    margin: 0 auto 13px !important;
    padding: 0 !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__eyebrow > span {
    display: block !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* L'unique trait historique décalait visuellement l'eyebrow. */
  html body.cms-id-9 #gatard-events .gatard-events__eyebrow > i {
    display: none !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto 10px !important;
    font-size: clamp(31px, 8.5vw, 39px) !important;
    line-height: 1.02 !important;
    text-align: center !important;
    text-wrap: balance !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 > span,
  html body.cms-id-9 #gatard-events .gatard-events__hero-copy h1 > em {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__script {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto 12px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__hero-copy > p {
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto 19px !important;
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__btn,
  html body.cms-id-9 #gatard-events .gatard-events__small-btn {
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Bloc projet entièrement centré sur mobile. */
  html body.cms-id-9 #gatard-events .gatard-events__project-copy {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px 17px !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__project-copy :is(h2, p) {
    width: 100% !important;
    max-width: 390px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__project-copy h2 {
    margin-bottom: 10px !important;
    font-size: clamp(27px, 7.7vw, 34px) !important;
    line-height: 1.08 !important;
  }

  html body.cms-id-9 #gatard-events .gatard-events__project-copy p {
    margin-bottom: 18px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
  }

  /* Deux photos réellement lisibles, puis défilement du reste. */
  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    grid-auto-columns: calc((100% - 12px) / 2) !important;
    column-gap: 12px !important;
    padding: 0 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo {
    scroll-snap-align: start !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__open > img {
    height: clamp(150px, 40vw, 178px) !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption strong {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__photo figcaption small {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__section-head h2 {
    font-size: clamp(22px, 6.2vw, 27px) !important;
    line-height: 1.12 !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  html body.cms-id-9 #gatard-events .gatard-events__hero-media > img {
    max-width: 820px !important;
    margin-inline: auto !important;
  }

  html body.cms-id-10 #gatard-gallery .gatard-gallery__grid {
    grid-auto-columns: calc((100% - 28px) / 3) !important;
    column-gap: 14px !important;
  }
}