/* ───────── "La vie à l'école": a memory wall of printed photos, a full-screen viewer, a sliding strip, a slow-zoom single photo ─────────
   Loaded after home.css. To undo all of it: remove the two includes in home.html. */

@property --hover { syntax: "<number>"; inherits: true; initial-value: 0; }

.hm-gallery { --ease: cubic-bezier(.2, .7, .2, 1); --straight: 0; overflow-x: clip; }
.hm-gallery .gs-head { transition: translate .9s var(--ease), opacity .9s ease; }

/* ── the wall: photos keep their own shape (nothing is cropped), tilted and overlapping ── */
.hm-wall { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 1rem 0 2rem; }
.hm-photo { position: relative; margin: 0 -8px 14px; transition: opacity .9s ease calc(var(--i, 0) * .12s), scale .9s var(--ease) calc(var(--i, 0) * .12s); }
.hm-photo:nth-child(even) { margin-top: 2.4rem; }
.hm-photo:hover { z-index: 4; }

.hm-photo-card {
    position: relative; display: block; padding: 10px 10px 42px; background: #fff; border-radius: 6px; color: var(--ink); text-decoration: none;
    box-shadow: 0 18px 34px -18px rgba(11, 28, 51, .55), 0 2px 6px rgba(11, 28, 51, .12);
    /* tilted at rest, straight when the section is centred in the window (--straight, set by gallery.js) or hovered (--hover) */
    rotate: calc(var(--tilt, 0deg) * (1 - var(--straight)) * (1 - var(--hover)));
    transition: --hover .6s var(--ease), transform .6s var(--ease), box-shadow .6s ease, opacity .5s ease, filter .5s ease;
}
.hm-photo-img { display: block; height: clamp(200px, 24vw, 320px); width: auto; min-width: 140px; max-width: min(78vw, 520px); object-fit: contain; background: var(--sky); }
.hm-photo-cap { position: absolute; left: 10px; right: 10px; bottom: 11px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; font: 600 .86rem var(--display); color: var(--muted); }

/* ── hover: the photo lifts and straightens, the others step back ── */
@media (hover: hover) {
    .hm-photo-card:hover, .hm-photo-card:focus-visible { --hover: 1; transform: translateY(-12px) scale(1.07); box-shadow: 0 34px 50px -22px rgba(11, 28, 51, .7); }
    .hm-wall:hover .hm-photo:not(:hover) .hm-photo-card { opacity: .6; filter: saturate(.75); }
}

/* ── entrance: the photos appear one after another (gallery.js adds .is-armed) ── */
.hm-gallery.is-armed .hm-photo:not(.is-in) { opacity: 0; scale: .86; }
.hm-gallery.is-armed .gs-head:not(.is-in) { opacity: 0; translate: 0 28px; }

/* ── a single photo: a wide frame, whole photo over a blurred copy, slowly zooming ── */
.hm-gal-n1 .hm-wall { display: block; padding: 0; }
.hm-gal-n1 .hm-photo, .hm-gal-n1 .hm-photo:nth-child(even) { margin: 0; }
.hm-gal-n1 .hm-photo-card { height: clamp(300px, 46vw, 560px); padding: 0; overflow: hidden; border-radius: 28px; background: var(--navy); rotate: none; box-shadow: var(--shadow); }
.hm-gal-n1 .hm-photo-card:hover, .hm-gal-n1 .hm-photo-card:focus-visible { transform: none; }
.hm-gal-n1 .hm-photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); filter: blur(28px) saturate(1.3) brightness(.8); }
.hm-gal-n1 .hm-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; background: none; animation: hm-kb 22s ease-in-out infinite alternate; }
@keyframes hm-kb { to { transform: scale(1.07) translate(-1.2%, -.8%); } }
.hm-gal-n1 .hm-photo-cap { left: 1.3rem; right: auto; bottom: 1.3rem; padding: .45rem 1rem; overflow: visible; border-radius: 999px; background: rgba(11, 28, 51, .78); color: #fff; backdrop-filter: blur(6px); transition: translate .8s var(--ease) .5s, opacity .8s ease .5s; }
.hm-gallery.is-armed.hm-gal-n1 .hm-photo:not(.is-in) .hm-photo-cap { opacity: 0; translate: 0 20px; }

/* ── six photos or more: a strip that slides sideways by itself and stops under the mouse ── */
.hm-gal-strip .hm-wall { flex-wrap: nowrap; justify-content: flex-start; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: 1.5rem; overflow-x: auto; scrollbar-width: none; }
.hm-gal-strip .hm-wall::-webkit-scrollbar { display: none; }
.hm-gal-strip .hm-photo { flex: none; }
.hm-gal-strip .hm-wall.is-running { overflow: hidden; padding-inline: 0; }
.hm-track { display: flex; flex: none; align-items: center; width: max-content; animation: hm-marquee calc(var(--count) * 6s) linear infinite; }
.hm-wall:hover .hm-track { animation-play-state: paused; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* ── the full-screen viewer (gallery.js) ── */
.hm-lb { --ease: cubic-bezier(.2, .7, .2, 1); position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 3.5rem 5rem; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.hm-lb.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.hm-lb-bg { position: absolute; inset: 0; background: rgba(6, 14, 28, .93); backdrop-filter: blur(6px); }
.hm-lb-fig { position: relative; display: flex; flex-direction: column; align-items: center; gap: .9rem; max-width: 100%; margin: 0; scale: .96; transition: scale .45s var(--ease); }
.hm-lb.is-open .hm-lb-fig { scale: 1; }
.hm-lb-fig img { max-width: 100%; max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); transition: opacity .25s ease; }
.hm-lb-fig img.is-swap { opacity: 0; }
.hm-lb-fig figcaption { color: #fff; font-weight: 600; text-align: center; }
.hm-lb-close, .hm-lb-nav { position: absolute; z-index: 2; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.hm-lb-close:hover, .hm-lb-nav:hover { background: var(--yellow); color: var(--ink); }
.hm-lb-close:focus-visible, .hm-lb-nav:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.hm-lb-close .gs-ic, .hm-lb-nav .gs-ic { width: 24px; height: 24px; stroke-width: 2.4; }
.hm-lb-close { top: 1.2rem; right: 1.2rem; }
.hm-lb-prev { left: 1.2rem; top: 50%; margin-top: -26px; }
.hm-lb-prev .gs-ic { transform: rotate(180deg); }
.hm-lb-next { right: 1.2rem; top: 50%; margin-top: -26px; }
.hm-lb-count { position: absolute; left: 0; right: 0; bottom: 1.3rem; z-index: 2; text-align: center; color: rgba(255, 255, 255, .8); font-size: .92rem; font-feature-settings: "tnum"; }
.hm-lb.is-single .hm-lb-nav, .hm-lb.is-single .hm-lb-count { display: none; }
body.hm-lb-lock { overflow: hidden; }
@media (max-width: 640px) {
    .hm-lb { padding: 4rem .6rem 4.8rem; }
    .hm-lb-prev, .hm-lb-next { top: auto; bottom: .9rem; margin-top: 0; }
    .hm-lb-prev { left: 1rem; }
    .hm-lb-next { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-photo, .hm-photo-card, .hm-gallery .gs-head, .hm-lb, .hm-lb-fig { transition: none; }
    .hm-gal-n1 .hm-photo-img { animation: none; }
}