/* ==========================================================================
   SPA — système de vues
   - Toutes les vues sont empilées en absolute dans la stage
   - .view--active rend la vue visible
   - Slide horizontal entre vues (forward = arrive de la droite)
   ========================================================================== */

.stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Cachée par défaut, hors écran à droite */
    transform: translateX(0);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    will-change: transform, opacity;
    transition:
        transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
        opacity   0.4s ease;
}

/* Vue active : visible, en place */
.view--active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

/* Vue qui ARRIVE par la droite (forward) */
.view--enter-right {
    transform: translateX(100%);
    opacity: 0;
}

/* Vue qui ARRIVE par la gauche (backward) */
.view--enter-left {
    transform: translateX(-100%);
    opacity: 0;
}

/* Vue qui SORT vers la gauche (forward) */
.view--exit-left {
    transform: translateX(-100%);
    opacity: 0;
}

/* Vue qui SORT vers la droite (backward) */
.view--exit-right {
    transform: translateX(100%);
    opacity: 0;
}