/* ════════════════════════════════════════════════════════
   NAV PREVIEW — photo au survol des liens du menu latéral
   Ordinateur uniquement (souris). Le panneau glisse depuis
   SOUS le bord arrondi du menu : chacun garde ses coins
   arrondis, le menu reste posé par-dessus la photo.
════════════════════════════════════════════════════════ */
.nav-preview {
    display: none;
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
    .nav-preview {
        --nav-preview-radius: 24px;
        display: block;
        position: fixed;
        top: 0;
        /* 480px = largeur du menu ; on recule du rayon pour passer sous sa courbe */
        left: calc(480px - var(--nav-preview-radius));
        width: clamp(340px, 30vw, 560px);
        height: 100vh;
        height: 100dvh;
        z-index: 1150; /* entre le voile flou (1100) et le menu (1200) */
        overflow: hidden;
        border-radius: 0 var(--nav-preview-radius) var(--nav-preview-radius) 0;
        background: #1B2744;
        pointer-events: none;
        visibility: hidden;
        /* Révélation de gauche à droite, comme si la photo sortait du menu */
        clip-path: inset(0 100% 0 0 round 0 var(--nav-preview-radius) var(--nav-preview-radius) 0);
        transition:
            clip-path  0.7s var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
            visibility 0s   linear 0.7s;
    }

    .nav-preview.is-visible {
        visibility: visible;
        clip-path: inset(0 0 0 0 round 0 var(--nav-preview-radius) var(--nav-preview-radius) 0);
        transition:
            clip-path  0.7s var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
            visibility 0s;
    }

    /* Photos empilées : fondu enchaîné d'un lien à l'autre + léger zoom lent */
    .nav-preview img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.06);
        transition:
            opacity   0.6s ease,
            transform 1.6s var(--motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    }

    .nav-preview img.is-active {
        opacity: 1;
        transform: scale(1);
    }
}