/* ───────── News section: featured layout, whole posters on a blurred backdrop, "Nouveau" badge,
   cards that rise in sequence, and a "Lire" bubble that follows the mouse. Loaded after home.css.
   To undo all of it: remove the two includes in home.html (and the extra markup is harmless). ───────── */

.hm-newssec { --ease: cubic-bezier(.2, .7, .2, 1); }

/* ── the poster is shown whole, floating over a blurred, enlarged copy of itself ── */
.hm-post-img > .hm-post-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); filter: blur(26px) saturate(1.3) brightness(.82); }
.hm-post-img > .hm-post-pic { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; object-position: center; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .38)); transition: transform .9s var(--ease); }
.hm-post-img > .hm-post-bg { transition: transform .9s var(--ease); }
.hm-tag { z-index: 2; }

/* ── "Nouveau" on posts from the last 7 days ── */
.hm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; }
.hm-new { display: inline-flex; align-items: center; gap: .4rem; padding: .16rem .62rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .78rem; font-weight: 700; }
.hm-new i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: hm-pulse 1.8s ease-out infinite; }
@keyframes hm-pulse { 0% { box-shadow: 0 0 0 0 rgba(11, 28, 51, .5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(11, 28, 51, 0); } }

/* ── entrance: the cards wait below (news.js adds .is-armed), then rise one after another ── */
.hm-post { transition: translate .9s var(--ease) calc(var(--i, 0) * .14s), opacity .9s ease calc(var(--i, 0) * .14s), transform .35s var(--ease), box-shadow .35s; }
.hm-newssec.is-armed .hm-post:not(.is-in) { opacity: 0; translate: 0 70px; }
.hm-newssec.is-armed .gs-head:not(.is-in) { opacity: 0; translate: 0 28px; }
.hm-newssec .gs-head { transition: translate .9s var(--ease), opacity .9s ease; }

/* ── a poster that has been hovered grows slightly ── */
@media (hover: hover) {
    .hm-post:hover .hm-post-pic { transform: scale(1.04); }
    .hm-post:hover .hm-post-bg { transform: scale(1.45); }
}

/* ── wide screens: the latest post is the big one ── */
@media (min-width: 992px) {
    .hm-news { max-width: none; gap: 1.6rem; }
    .hm-news-n1 { grid-template-columns: minmax(0, 1fr); }
    .hm-news-n2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
    .hm-news-n3 { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; }
    .hm-news > :nth-child(3):last-child { grid-column: auto; }

    .hm-news-n1 .hm-post { flex-direction: row; }
    .hm-news-n1 .hm-post-img { flex: 0 0 58%; aspect-ratio: auto; min-height: 440px; }
    .hm-news-n1 .hm-post-body { justify-content: center; padding: 2.4rem; }

    .hm-news-n2 .is-featured .hm-post-img, .hm-news-n3 .is-featured .hm-post-img { aspect-ratio: 16 / 11; }
    .hm-news .is-featured h3 { font-size: 1.8rem; }
    .hm-news .is-featured .hm-post-body { padding: 1.9rem 2rem 2rem; }
    .hm-news-n3 .is-featured { grid-row: 1 / span 2; }
    /* beside the big card, the second one lets its picture take the spare height instead of leaving a gap */
    .hm-news-n2 .hm-post:not(.is-featured) .hm-post-img { flex: 1 1 auto; aspect-ratio: auto; min-height: 300px; }
    .hm-news-n2 .hm-post:not(.is-featured) .hm-post-body { flex: 0 0 auto; }

    /* the two smaller posts sit side by side with their picture, stacked on the right */
    .hm-news-n3 .hm-post:not(.is-featured) { flex-direction: row; }
    .hm-news-n3 .hm-post:not(.is-featured) .hm-post-img { flex: 0 0 42%; aspect-ratio: auto; min-height: 210px; }
    .hm-news-n3 .hm-post:not(.is-featured) .hm-post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: .92rem; }
    .hm-news-n3 .hm-post:not(.is-featured) h3 { font-size: 1.2rem; }
    .hm-news-n3 .hm-post:not(.is-featured) .hm-post-body { justify-content: center; padding: 1.3rem 1.4rem; }
}

/* ── the "Lire" bubble that follows the mouse (news.js; mouse users only) ── */
.hm-cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 88px; height: 88px; margin: -44px 0 0 -44px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--ink); font: 700 .98rem var(--display); letter-spacing: .02em; pointer-events: none; opacity: 0; scale: .4; transition: opacity .25s ease, scale .4s var(--ease); will-change: transform; }
.hm-cursor.is-on { opacity: 1; scale: 1; }
.hm-post.has-bubble { cursor: none; }

@media (prefers-reduced-motion: reduce) {
    .hm-post, .hm-newssec .gs-head, .hm-post-pic, .hm-post-bg { transition: none; }
    .hm-new i { animation: none; }
}