@layer components {
  .agenda-page { position: relative; width: min(100%, var(--stage)); margin: -5rem auto 0; padding: 0 var(--page-gutter) 10rem; overflow: clip; }
  .agenda-page::before, .agenda-page::after { content: ""; position: absolute; z-index: -1; background: center / contain no-repeat; pointer-events: none; }
  .agenda-page::before { top: 19rem; right: 0; width: 22rem; height: 22rem; background-image: url("../images/tache-rose.webp"); }
  .agenda-page::after { bottom: 0; left: 0; width: 20rem; height: 20rem; background-image: url("../images/tache-jaune.webp"); }
  .agenda-page__header { width: min(60.8125rem, 100%); text-align: center; }
  .agenda-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); }
  .agenda-page__header h1::after { content: ""; position: absolute; bottom: -1.15rem; left: 50%; width: 7.6875rem; height: 1.1875rem; background: url("../images/grand-ziguigui.svg") center / 100% 100% no-repeat; transform: translateX(-50%); }
  .agenda-page__intro { width: min(60.8125rem, 100%); margin-top: var(--page-title-content-gap); text-align: center; }
  .agenda-page__intro > :where(:not(.alignwide):not(.alignfull)) { max-width: none; margin-inline: 0; }
  .agenda-page__intro > :first-child { margin-top: 0; }
  .agenda-page__intro > :last-child { margin-bottom: 0; }
  .agenda-list { position: relative; z-index: 1; display: flex; width: min(47.6875rem, 100%); flex-direction: column; gap: 1.75rem; margin: 2.75rem 0 0 clamp(0rem, 5.5vw, 5rem); padding: 0 var(--space-m) var(--space-m); background: var(--color-white); }
  .agenda-page__header + .agenda-list { margin-top: var(--page-title-content-gap); }
  .agenda-item { position: relative; display: grid; grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem; gap: 2.375rem; align-items: center; min-height: 4rem; padding-bottom: 0.75rem; }
  .agenda-item::after { content: ""; position: absolute; bottom: 0; left: 0; width: min(26.5625rem, calc(100% - 5rem)); height: 1px; background: #aaa; }
  .agenda-item:last-child::after { content: none; }
  .agenda-item__date { display: flex; width: 4.75rem; height: 4rem; flex-direction: column; align-items: center; justify-content: center; background: var(--color-light-gray); font-style: italic; line-height: var(--line-height-ui); }
  .agenda-item__month { font-size: var(--text-meta); }
  .agenda-item__day { font-size: var(--text-card-title); font-weight: 700; }
  .agenda-item__detail, .agenda-item__title { margin: 0; font-size: var(--text-meta); line-height: var(--line-height-card); }
  .agenda-item__title { font-weight: 400; }
  .agenda-item__external { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: var(--radius-pill); transition: background-color var(--transition-fast); }
  .agenda-item__external:hover { background: var(--color-light-gray); }
  .agenda-item__external img { width: 1.5625rem; height: 1.5625rem; }
  .agenda-list__empty { text-align: center; }
  .agenda-pagination { width: min(47.6875rem, 100%); margin: var(--space-m) 0 0 clamp(0rem, 5.5vw, 5rem); }
  .agenda-pagination .page-numbers { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; font-size: var(--text-meta); }
  .agenda-pagination a, .agenda-pagination .current { display: inline-block; padding: 0.125rem; color: var(--color-black); background: transparent; text-decoration: none; }
  .agenda-pagination .current, .agenda-pagination a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
}

@media (max-width: 64rem) {
  .agenda-page { margin-top: 0; padding-bottom: 7rem; overflow: hidden; }
  .agenda-page::before { top: 15rem; right: -9rem; }
  .agenda-page__header { text-align: left; }
  .agenda-page__header h1::after { left: 0; transform: none; }
  .agenda-page__intro { text-align: left; }
  .agenda-list { margin: var(--space-l) 0 0; }
  .agenda-pagination { margin: var(--space-m) 0 0; }
  .agenda-item { grid-template-columns: 4.75rem minmax(0, 1fr) 2.75rem; gap: var(--space-s); }
  .agenda-item::after { width: 100%; }
}

@media (max-width: 32rem) {
  .agenda-item { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .agenda-item__external { grid-column: 2; justify-self: end; margin-top: -0.5rem; }
}