/* Effet organique sur l'ouverture du dropdown :
   le menu apparaît avec un léger glissement vers le haut et un zoom progressif */
.navbar-nav .dropdown-menu {
    opacity: 0; /* invisible au départ */
    transition: all 320ms cubic-bezier(0.25, 1.4, 0.4, 1); /* animation douce avec léger rebond */
    display: block; /* nécessaire pour que la transition fonctionne */
    visibility: hidden; /* empêche le clic quand fermé */
}

/* Lorsque le dropdown a la classe "open", on révèle le menu progressivement */
.navbar-nav li.dropdown.open > .dropdown-menu {
    opacity: 1; /* visible */
    visibility: visible; /* interaction réactivée */
}


/*animation de la liste de tarif*/
/* Container: aide le navigateur à mieux gérer le layout/paint */

.sortable > .ligneTarif {
    will-change: transform;
    transform: translateZ(0);
}

/* TRANSFORM = long / OPACITY = court */
.sortable.is-animating > .ligneTarif {
    transition: transform 520ms cubic-bezier(.14, .88, .28, 1);
}

/* état en mouvement */
.sortable.is-animating > .ligneTarif.is-moving {
    position: relative;
    z-index: 2;
}


/* accessibilité */
@media (prefers-reduced-motion: reduce) {
    .sortable.is-animating > .ligneTarif {
        transition: none !important;
    }
}

.jumbotron .btn.btn-secondary-black i {
    display: inline-block; /* indispensable pour transform */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--space-8);
}

/* au hover : 3 vibrations */
.jumbotron .btn.btn-secondary-black:hover i {
    animation: shake 0.4s ease-in-out 1;
}

@keyframes shake {
    0% { transform: translate(-0px, -50%); }
    25% { transform: translate(-2px, -50%); }
    50% { transform: translate(2px, -50%); }
    75% { transform: translate(-1px, -50%); }
    100% { transform: translate(0px, -50%); }
}

/* animation */
@keyframes rocket-takeoff {

    /* repos */
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    /* petit recul */
    15% {
        transform: translate3d(-4px, 3px, 0) rotate(4deg);
    }

    /* ignition */
    30% {
        transform: translate3d(-2px, 1px, 0) rotate(2deg);
    }

    /* départ */
    45% {
        transform: translate3d(10px, -20px, 0) rotate(-12deg);
    }

    /* accélération */
    70% {
        transform: translate3d(80px, -120px, 0) rotate(-25deg);
    }

    /* hors écran */
    100% {
        transform: translate3d(200vw, -200vh, 0) rotate(-35deg);
    }
}

@keyframes rocket-ln {

    /* repos */
    0% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    /* recul */
    10% {
        transform: translate3d(-4px, 3px, 0) rotate(4deg);
    }

    /* démarrage lent */
    20% {
        transform: translate3d(2px, -4px, 0) rotate(-2deg);
    }

    /* ln(x) commence à monter */
    35% {
        transform: translate3d(12px, -18px, 0) rotate(-8deg);
    }

    /* accélération */
    55% {
        transform: translate3d(40px, -60px, 0) rotate(-16deg);
    }

    /* croissance forte */
    75% {
        transform: translate3d(90px, -140px, 0) rotate(-24deg);
    }

    /* explosion logarithmique */
    100% {
        transform: translate3d(220vw, -160vh, 0) rotate(-34deg);
    }
}

@keyframes rocket-flatten {

    /* repos */
    0% {
        transform: translate3d(0vw, 0vh, 0) rotate(0deg);
    }

    /* recul */
    10% {
        transform: translate3d(-0.4vw, 0.5vh, 0) rotate(-6deg);
    }

    /* départ très vertical (~50°) */
    22% {
        transform: translate3d(1.0vw, -1.8vh, 0) rotate(16deg);
    }

    /* encore bien incliné (~40°) */
    35% {
        transform: translate3d(3.8vw, -3.2vh, 0) rotate(22deg);
    }

    /* transition vers ~25° */
    50% {
        transform: translate3d(7.5vw, -4.4vh, 0) rotate(24deg);
    }

    /* aplatissement */
    70% {
        transform: translate3d(12.5vw, -5.2vh, 0) rotate(22deg);
    }

    /* quasi horizontal */
    85% {
        transform: translate3d(18vw, -5.4vh, 0) rotate(18deg);
    }

    /* sortie */
    100% {
        transform: translate3d(120vw, -5.4vh, 0) rotate(6deg);
    }
}