/*
 | Méga-menu visuel (partials/megamenu-visual), ordinateur seulement : une carte photo par famille,
 | ses sous-collections en vignettes rondes. Couleurs du site uniquement (var(--cz-*)) ; le texte
 | posé sur la photo est blanc sur un dégradé sombre, comme le visuel d'ouverture.
 |
 | Effets : les cartes montent l'une après l'autre à l'ouverture du panneau (.cz-megamenu.is-open),
 | la photo survolée s'agrandit lentement pendant que les autres s'éteignent. Rien de tout cela
 | quand le visiteur a demandé moins de mouvement.
 */
.cz-mmv {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 2.5rem 1.5rem;
    margin-bottom: .5rem;
}

.cz-mmv-family {
    min-width: 0;
}

.cz-mmv-card {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--cz-border-radius-lg, .75rem);
    background-color: color-mix(in srgb, var(--cz-primary) 14%, var(--cz-body-bg));
    text-decoration: none;
    isolation: isolate;
}

.cz-mmv-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), filter .45s ease;
}

.cz-mmv-card-fill {
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--cz-primary) 55%, var(--cz-body-bg)),
        var(--cz-primary));
}

/* Dégradé de lecture sous le libellé, plus dense au survol. */
.cz-mmv-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .18) 42%, rgba(0, 0, 0, 0) 65%);
    transition: opacity .45s ease;
    opacity: .9;
}

.cz-mmv-card-label {
    position: absolute;
    left: 1.1rem;
    right: 1.1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: #fff;
    font-family: var(--cz-headings-font-family, inherit);
    font-size: clamp(1rem, .6rem + .7vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: .01em;
}

.cz-mmv-card-arrow {
    flex-shrink: 0;
    font-size: 1.1em;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .35s ease, transform .35s ease;
}

.cz-mmv-card:hover .cz-mmv-card-img,
.cz-mmv-card:focus-visible .cz-mmv-card-img {
    transform: scale(1.08);
}

.cz-mmv-card:hover::after,
.cz-mmv-card:focus-visible::after {
    opacity: 1;
}

.cz-mmv-card:hover .cz-mmv-card-arrow,
.cz-mmv-card:focus-visible .cz-mmv-card-arrow {
    opacity: 1;
    transform: none;
}

/* Survol d'une famille : les autres photos s'éteignent pour la mettre en avant. */
.cz-mmv:has(.cz-mmv-family:hover) .cz-mmv-family:not(:hover) .cz-mmv-card-img {
    filter: saturate(.55) brightness(.82);
}

.cz-mmv-links {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: 1rem;
}

.cz-mmv .cz-mmv-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .3rem 0;
    color: var(--cz-heading-color);
    font-size: .9375rem;
    text-decoration: none;
    transition: color .2s ease, transform .25s ease;
}

.cz-mmv .cz-mmv-link:hover {
    color: var(--cz-primary);
    transform: translateX(4px);
}

.cz-mmv-thumb {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--cz-body-bg), 0 0 0 3px color-mix(in srgb, var(--cz-primary) 25%, transparent);
    transition: box-shadow .25s ease;
}

.cz-mmv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cz-mmv .cz-mmv-link:hover .cz-mmv-thumb {
    box-shadow: 0 0 0 2px var(--cz-body-bg), 0 0 0 3px var(--cz-primary);
}

/* Entrée en scène, carte après carte. */
@keyframes czMmvIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.cz-megamenu.is-open .cz-mmv-family {
    animation: czMmvIn .7s cubic-bezier(.2, .7, .2, 1) both;
}

.cz-megamenu.is-open .cz-mmv-family:nth-child(2) { animation-delay: .06s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(3) { animation-delay: .12s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(4) { animation-delay: .18s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(5) { animation-delay: .24s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(6) { animation-delay: .3s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(7) { animation-delay: .36s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(8) { animation-delay: .42s; }
.cz-megamenu.is-open .cz-mmv-family:nth-child(n+9) { animation-delay: .48s; }

@media (prefers-reduced-motion: reduce) {
    .cz-megamenu.is-open .cz-mmv-family {
        animation: none;
    }
    .cz-mmv-card-img,
    .cz-mmv-card-arrow,
    .cz-mmv .cz-mmv-link {
        transition: none;
    }
}