@layer components {
  .creations-page { position: relative; width: min(100%, var(--stage)); margin: -5rem auto 0; padding-bottom: 7rem; overflow: clip; }
  .creations-page__header { width: min(55.8125rem, calc(100% - 2 * var(--page-gutter))); margin-left: clamp(var(--page-gutter), calc(8.333% + 2.3125rem), 9.8125rem); text-align: center; }
  .creations-page__header h1 { display: inline-block; position: relative; margin: 0; font-family: var(--font-typewriter); font-size: var(--text-page-title); font-weight: 100; line-height: var(--line-height-tight); }
  .creations-page__header h1::after { content: ""; position: absolute; bottom: -1.15rem; left: 0; width: 7.6875rem; height: 1.1875rem; background: url("../images/grand-ziguigui.svg") center / 100% 100% no-repeat; }
  .creations-page__sections { width: min(34.9375rem, calc(100% - 2 * var(--page-gutter))); margin: var(--page-title-content-gap) 0 0 clamp(var(--page-gutter), calc(16.667% + 5.25rem), 20.25rem); }
  .creation-group + .creation-group { margin-top: 8rem; }
  .creation-group__title { display: table; margin: 0 auto 3.875rem; background-image: linear-gradient(transparent 68%, var(--section-marker) 68%, var(--section-marker) 92%, transparent 92%); font-family: var(--font-display); font-size: var(--text-section-title); font-weight: 400; line-height: var(--line-height-tight); }
  .creation-group.is-current { --section-marker: var(--color-yellow); }
  .creation-group.is-past { --section-marker: var(--color-green); }
  .creation-group__list { display: flex; flex-direction: column; gap: 3.875rem; }
  .creation-group__empty { text-align: center; }
  .creation-card, .single-show { --cartouche-padding: 0.5rem 1.0625rem; }
  .creation-card { position: relative; isolation: isolate; }
  .creation-card__link { display: block; position: relative; color: inherit; text-decoration: none; }
  .creation-card__frame { width: 100%; height: 24rem; padding: 1rem 0.9375rem; background: var(--color-light-gray); overflow: hidden; }
  .creation-card__image { width: 100%; height: 21.9375rem; object-fit: cover; transition: transform 300ms ease; }
  .creation-card__link:hover .creation-card__image { transform: scale(1.015); }
  .creation-card__caption { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: max-content; max-width: calc(100% - 3rem); margin: -2.03125rem 0 0 3.1875rem; }
  .creation-card__title { margin: 0; padding: var(--cartouche-padding); background: var(--color-yellow); font-family: var(--font-typewriter); font-size: var(--text-card-title); font-weight: 100; line-height: var(--line-height-card); }
  .creation-card__meta { max-width: 100%; margin: 0; padding: var(--cartouche-padding); background: var(--color-white); font-size: var(--text-meta); font-style: italic; line-height: var(--line-height-card); }
  .creation-group.is-current .creation-card:nth-child(1)::after, .creation-group.is-current .creation-card:nth-child(2)::after, .creation-group.is-past .creation-card:nth-child(1)::after, .creation-group.is-past .creation-card:nth-child(2)::after { content: ""; position: absolute; z-index: -1; background: center / contain no-repeat; pointer-events: none; }
  .creation-group.is-current .creation-card:nth-child(1)::after { right: -11rem; bottom: -5rem; width: 22rem; height: 22rem; background-image: url("../images/tache-verte.webp"); }
  .creation-group.is-current .creation-card:nth-child(2)::after { right: -7rem; bottom: -10rem; width: 20rem; height: 20rem; background-image: url("../images/tache-orange-2.webp"); }
  .creation-group.is-past .creation-card:nth-child(1)::after { right: -6rem; top: -2rem; width: 21rem; height: 21rem; background-image: url("../images/tache-orange-2.webp"); }
  .creation-group.is-past .creation-card:nth-child(2)::after { left: -7rem; bottom: -5rem; width: 20rem; height: 20rem; background-image: url("../images/tache-bleue.webp"); }
  .single-show { --single-show-content-width: 58.25rem; overflow: clip; }
  .single-show__stage { width: min(100%, var(--stage)); margin-inline: auto; padding: 0 0 8rem clamp(var(--page-gutter), 8.333vw, 7.5rem); }
  .single-show__header { width: min(67.1875rem, calc(100% - var(--page-gutter))); }
  .single-show__hero-frame { width: min(var(--single-show-content-width), 100%); padding: 1.875rem 2.5rem 2.5rem; background: var(--color-light-gray); }
  .single-show__hero { width: 100%; aspect-ratio: 814 / 414; object-fit: cover; }
  .single-show__identity { display: flex; width: min(var(--single-show-content-width), 100%); align-items: flex-start; justify-content: space-between; gap: var(--space-m); padding-top: 1.875rem; }
  .single-show__identity h1 { display: table; margin: 0 0 0.6875rem; padding: var(--cartouche-padding); background: var(--color-yellow); font-size: var(--text-card-title); font-weight: 400; line-height: var(--line-height-card); }
  .single-show__identity p { width: min(24rem, 100%); margin: 0; font-size: var(--text-meta); font-style: italic; line-height: var(--line-height-card); }
  .single-show__download { display: flex; max-width: 20rem; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: var(--text-meta); font-style: italic; text-align: center; }
  .single-show__download img { flex: 0 0 auto; width: 2.0625rem; height: 2.0625rem; }
  .single-show__body { display: grid; grid-template-columns: 29.125rem 26.5rem; gap: 2.625rem; align-items: start; margin-top: 4.25rem; }
  .single-show__content { padding: 0 2.5rem 0 0; }
  .single-show__content > :where(:not(.alignwide):not(.alignfull)) { max-width: none; }
  .single-show__content > :first-child { margin-top: 0; }
  .single-show__content > :last-child { margin-bottom: 0; }
  .single-show__gallery { display: flex; flex-direction: column; gap: 2.75rem; }
  .single-show__gallery-item { position: relative; isolation: isolate; margin: 0; }
  .single-show__gallery-image { width: 100%; height: auto; object-fit: cover; }
  .single-show__gallery-item:nth-child(1)::after, .single-show__gallery-item:nth-child(3)::after { content: ""; position: absolute; z-index: -1; width: 22rem; height: 22rem; background: center / contain no-repeat; pointer-events: none; }
  .single-show__gallery-item:nth-child(1)::after { right: -8rem; bottom: -3rem; background-image: url("../images/tache-jaune.webp"); }
  .single-show__gallery-item:nth-child(3)::after { right: -8rem; top: -2rem; background-image: url("../images/tache-orange-2.webp"); }
}

@media (min-width: 64.0625rem) and (max-width: 76.25rem) {
  .single-show__stage { padding-right: calc(var(--nav-clearance) + var(--space-m)); padding-left: var(--page-gutter); }
  .single-show__header { width: 100%; }
  .single-show__body { grid-template-columns: 1fr; gap: var(--space-l); }
  .single-show__content { padding-inline: 0; }
  .single-show__gallery { width: min(26.5rem, 100%); }
}

@media (max-width: 64rem) {
  .creations-page { margin-top: 0; padding-inline: var(--page-gutter); overflow: hidden; }
  .creations-page__header { width: 100%; margin: 0; text-align: left; }
  .creations-page__sections { width: 100%; margin: var(--page-title-content-gap) 0 0; }
  .creation-group + .creation-group { margin-top: var(--space-l); }
  .creation-group__title { margin-bottom: var(--space-l); }
  .creation-group__list { gap: var(--space-l); }
  .creation-card__frame { height: auto; padding: clamp(0.75rem, 3vw, 1rem); }
  .creation-card__image { height: auto; aspect-ratio: 529 / 351; }
  .creation-card__caption { max-width: calc(100% - 1.5rem); margin-left: clamp(1.25rem, 8vw, 3.1875rem); }
  .single-show__stage { padding-inline: var(--page-gutter); }
  .single-show__header { width: 100%; }
  .single-show__hero-frame { padding: clamp(0.75rem, 3vw, 1.5rem); }
  .single-show__identity { flex-direction: column; }
  .single-show__body { grid-template-columns: 1fr; gap: var(--space-l); margin-top: var(--space-l); }
  .single-show__content { padding-inline: 0; }
  .single-show__gallery { gap: var(--space-m); }
}