:root,
sonic-theme {
  --fs-html: 14px;/*calc(16px + (24 - 16) * ((100vw - 360px)) / 1500)*/;
  --sc-container-gutter-x: clamp(1rem, 5vw, 5rem);
  --sc-container-gutter-y: 2rem;
  --sc-header-gy: 1rem; /* prévoir un padding suffisament haut pour placer le badge "billetterie" sous le logo*/
  --sc-header-height: calc(4.5rem + var(--sc-header-gy) * 2);
  --sc-section-margin: 3rem;
}

@media (min-width: 1024px) {
  :root,
  sonic-theme {
    /* --fs-html: calc(14px + (32 - 14) * ((100vw - 1024px) / 2750)); */
    --fs-html: calc(14px + (32 - 14) * ((100vw - 1024px) / 5000));
    --sc-header-gy: 2rem; /* prévoir un padding suffisament haut pour placer le badge "billetterie" sous le logo*/
  }
}


.header-container {
  margin-bottom: 1.8rem;
}
@media (min-width: 1024px) {
  .header-container {
    margin-bottom: 2.25rem;
  }
}

html {
  font-family: sans-serif;
  font-size: var(--fs-html);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.holy-grail-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--sc-container-gutter-y) var(--sc-container-gutter-x);
}

.holy-grail-main-content {
  flex-grow: 1;
  margin-bottom: 2rem;
}

/* --- */
sonic-footer {
  margin-left: calc(var(--sc-container-gutter-x) * -1);
  margin-right: calc(var(--sc-container-gutter-x) * -1);
  border-radius: var(--sc-rounded-xl, 2.5rem) var(--sc-rounded-xl, 2.5rem) 0 0;
  background: var(--sc-base);
  padding: 3.5rem var(--sc-container-gutter-x) 1rem;
}
@media (min-width: 1024px) {
  sonic-footer {
    padding-top: 5rem;
  }
}

/* --- */
@media (hover: hover) {
  body::-webkit-scrollbar {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 0.25rem;
    background: transparent;
  }

  body::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 2rem 2rem var(--sc-base-400);
    border-radius: 0.25rem;
  }
}


/* --- */
.mt-section {
  margin-top: var(--sc-section-margin);
}
.mb-section {
  margin-bottom: var(--sc-section-margin);
}
.my-section {
  margin-top: var(--sc-section-margin);
  margin-bottom: var(--sc-section-margin);
}

/* --- */
sonic-quick-access-cards {
  margin: 0 clamp(1rem, 7vw, 3rem);
  display: block;
}
sonic-quick-access-cards {
  margin-top: var(--sc-section-margin);
  margin-bottom: var(--sc-section-margin);
}
sonic-jumbotron,
sonic-agenda-section-next,
sonic-agenda-section-featured {
  display: block;
  margin-top: var(--sc-section-margin);
}

.section-giftcards {
  margin-top: var(--sc-section-margin);
  margin-left: calc(var(--sc-container-gutter-x) * -1);
  margin-right: calc(var(--sc-container-gutter-x) * -1);
  background: var(--sc-base-50);
  padding: 4rem var(--sc-container-gutter-x) calc(4rem + var(--sc-section-margin));
  border-radius: var(--sc-rounded-lg, 2.5rem) var(--sc-rounded-lg, 2.5rem) 0 0 ;
  margin-bottom: -5rem;
}



/* --- */
.page-title {
  font-size: 3rem;
  line-height: 1.2;
  margin: 0 0 2rem;
  text-wrap: balance;
  font-family: var(--sc-headings-font-family);
  font-weight: var(--sc-headings-font-weight);
}
.page-title-error {
  font-size: 2.5rem;
}

.page-subtitle {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-top: -1rem;
}
/* Header layout */
.banner-desktop img,
.banner-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .banner-desktop {
    display: block;
    margin: calc(-1 * var(--sc-container-gutter-y)) calc(-1 * var(--sc-container-gutter-x)) 0 0;
  }
  .banner-desktop {
    display: block;
  }
  .banner-desktop img {
    width: 100%;
    display: block;
    max-height: 11rem;
    object-fit: cover;
    border-radius: 0 0 0 var(--sc-rounded-lg, 1.15rem);
  }
  .header-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* --- */
.flex {
  display: flex;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.block {
  display: block;
}