/* Micro-interactions au toucher (mobile) et au clic. Le survol (souris) reste géré dans chaque feuille de style.
   Sont activées par js/micro.js : .is-tap (clic ou toucher), .is-seen (élément vu à l'écran), .is-press (ondulation). */

@keyframes mi-pop {0% {transform: scale(1);} 40% {transform: scale(.95);} 100% {transform: scale(1);}}
@keyframes mi-fleur {0% {transform: rotate(0) scale(1); color: var(--v2-primary);} 50% {transform: rotate(180deg) scale(1.3); color: var(--v2-accent-strong);} 100% {transform: rotate(360deg) scale(1); color: var(--v2-primary);}}
@keyframes mi-fleur-simple {0% {transform: rotate(0) scale(1);} 50% {transform: rotate(180deg) scale(1.4);} 100% {transform: rotate(360deg) scale(1);}}
@keyframes mi-wiggle {0%, 100% {transform: none;} 25% {transform: rotate(-16deg) scale(1.15);} 60% {transform: rotate(10deg) scale(1.15);}}
@keyframes mi-saut {0% {transform: scale(1);} 35% {transform: scale(1.25) rotate(-10deg);} 70% {transform: scale(.95) rotate(6deg);} 100% {transform: scale(1);}}
@keyframes mi-penche {0% {transform: none;} 35% {transform: rotate(-1.6deg) scale(1.02);} 70% {transform: rotate(1deg) scale(1.01);} 100% {transform: none;}}
@keyframes mi-onde {from {transform: scale(0); opacity: .45;} to {transform: scale(1); opacity: 0;}}

/* ----- clic / toucher : les cartes et leurs fleurs réagissent ----- */
.ap-repere.is-tap, .v2-review.is-tap {animation: mi-pop .5s ease;}
.ap-repere.is-tap .ap-badge-fleur {animation: mi-fleur .9s cubic-bezier(.3,.7,.2,1);}
.ap-repere.is-tap .ap-badge > svg:not(.ap-badge-fleur) {animation: mi-wiggle .7s ease;}
.v2-review.is-tap .v2-pastille .v2-fleur {animation: mi-fleur .9s cubic-bezier(.3,.7,.2,1);}
.v2-review.is-tap .v2-pastille-q {animation: mi-saut .6s ease;}
.p2-spec.is-tap .p2-spec-fleur {animation: mi-fleur-simple .9s cubic-bezier(.3,.7,.2,1);}
.ap-etapes li.is-tap .ap-etape-n {animation: mi-saut .6s ease;}
.ap-expo figure.is-tap {animation: mi-penche .6s ease;}
.v2-stamp.is-tap {animation: mi-penche .6s ease;}

/* ----- ondulation sous le doigt : boutons et entrées du menu ----- */
.v2-btn, .mm-nav a, .mm-cta {position: relative; overflow: hidden;}
.v2-btn::after, .mm-nav a::after, .mm-cta::after {content: ""; position: absolute; left: var(--rx, 50%); top: var(--ry, 50%); width: 220%; aspect-ratio: 1; margin: -110% 0 0 -110%; border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0); pointer-events: none;}
.v2-btn.is-press::after, .mm-nav a.is-press::after, .mm-cta.is-press::after {animation: mi-onde .6s ease-out;}

/* ----- écrans tactiles : pas de survol, donc retour visuel à l'appui et petite animation à l'arrivée ----- */
@media (hover: none) {
    .v2-card, .v2-collection, .v2-btn, .lg-card, .ap-repere, .v2-review {-webkit-tap-highlight-color: transparent;}
    .v2-card-img, .v2-collection, .lg-img {transition: transform .2s ease;}
    .v2-card:active .v2-card-img, .v2-collection:active, .lg-card:active .lg-img {transform: scale(.975);}
    .v2-card:active .v2-card-alt, .lg-card:active .lg-alt {opacity: 1;}
    .v2-card:active .v2-card-img img {transform: scale(1.06);}
    .v2-collection:active img, .v2-collection:active video {transform: scale(1.06);}
    .v2-collection:active .v2-arrow {transform: rotate(-45deg);}
    .v2-btn:active {transform: scale(.96);}
    .v2-link-more:active svg {transform: translateX(.35rem);}

    /* les fleurs font un tour sur elles-mêmes quand leur bloc entre à l'écran */
    .ap-repere.is-seen .ap-badge-fleur {animation: mi-fleur 1.1s cubic-bezier(.3,.7,.2,1) calc(var(--d, 0s) + .25s) both;}
    .ap-repere.is-seen .ap-badge > svg:not(.ap-badge-fleur) {animation: mi-wiggle .8s ease calc(var(--d, 0s) + .9s) both;}
    .v2-review.is-seen .v2-pastille .v2-fleur {animation: mi-fleur 1.1s cubic-bezier(.3,.7,.2,1) .2s both;}
    .p2-specs.is-seen .p2-spec-fleur {animation: mi-fleur-simple 1s cubic-bezier(.3,.7,.2,1) both;}
    .p2-specs.is-seen .p2-spec:nth-child(2) .p2-spec-fleur {animation-delay: .12s;}
    .p2-specs.is-seen .p2-spec:nth-child(3) .p2-spec-fleur {animation-delay: .24s;}
    .p2-specs.is-seen .p2-spec:nth-child(4) .p2-spec-fleur {animation-delay: .36s;}
    /* le clic doit pouvoir rejouer l'animation par-dessus celle d'arrivée */
    .ap-repere.is-tap .ap-badge-fleur {animation: mi-fleur .9s cubic-bezier(.3,.7,.2,1);}
    .v2-review.is-tap .v2-pastille .v2-fleur {animation: mi-fleur .9s cubic-bezier(.3,.7,.2,1);}
    .p2-specs .p2-spec.is-tap .p2-spec-fleur {animation: mi-fleur-simple .9s cubic-bezier(.3,.7,.2,1);}
}

@media (prefers-reduced-motion: reduce) {
    .is-tap, .is-tap *, .is-seen *, .is-press::after {animation: none !important;}
    .v2-card-img, .v2-collection, .lg-img {transition: none;}
}