@layer pages {
  /* ---------- campus ---------- */
  .campus-panel { display: grid; gap: var(--space-6); }
  @media (min-width: 64em) { .campus-panel { grid-template-columns: 1fr 1fr; align-items: start; column-gap: var(--space-7); } }
  .deflist { display: grid; gap: .9rem; }
  .deflist dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; color: var(--c-gris); }
  .deflist dd { margin: 0; }
  .specs { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .spec { padding: var(--space-5); background: #fff; border: 1px solid var(--c-trait); border-radius: var(--radius-card); display: grid; gap: .6rem; align-content: start; border-top: 5px solid var(--c-roi); }
  .spec .icon { width: 2rem; height: 2rem; color: var(--c-roi); }
  .spec dl { display: grid; gap: .25rem; font-size: var(--fs-sm); }
  .spec dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--c-champ); padding-bottom: .25rem; }
  .spec dt { color: var(--c-gris); } .spec dd { font-weight: 600; text-align: right; }
  .gal-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-4); }
  .gal { list-style: none; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
  .gal li { position: relative; } .gal figure { margin: 0; position: relative; }
  .gal a { display: block; border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-ciel); }
  .gal img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-4) var(--ease-out); }
  .gal a:hover img { transform: scale(1.05); }
  .gal figcaption { position: absolute; inset: auto 0 0 0; padding: 1.5rem .8rem .6rem; color: #fff; font-size: var(--fs-sm); font-weight: 500; background: linear-gradient(to top, rgb(18 26 51 / .85), transparent); pointer-events: none; border-radius: 0 0 1rem 1rem; }
  dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; color: #fff; }
  dialog.lightbox::backdrop { background: rgb(10 14 36 / .92); }
  .lightbox__in { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 1rem; gap: .75rem; }
  .lightbox__top, .lightbox__bot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .lightbox figure { display: grid; place-items: center; min-height: 0; }
  .lightbox img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; border-radius: .75rem; touch-action: pan-y; }
  .lightbox .iconbtn { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .4); }
  .day { list-style: none; padding: 0; display: grid; gap: 0; border-left: 3px solid var(--c-corail); margin-left: .5rem; }
  .day li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-4); padding: .85rem 0 .85rem 1.25rem; position: relative; }
  .day li::before { content: ""; position: absolute; left: -.6rem; top: 1.2rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--c-soleil); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--c-corail); }
  .day time { font-family: var(--font-slab); font-weight: 700; font-size: 1.15rem; }
  .day p { color: var(--c-encre-2); }
  .clubs { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .club { padding: var(--space-5); border-radius: var(--radius-card); background: var(--c-craie); display: grid; gap: .5rem; align-content: start; }
  .club h3 { font-size: 1.15rem; }
  .club p { font-size: .95rem; color: var(--c-encre-2); }

}