/**
 * VisionOrbe - Styles personnalisés
 * Cabinet de Consultation Géopolitique
 */

/* ==========================================================================
   Base
   ========================================================================== */

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Flip Cards
   ========================================================================== */

.flip-card {
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s ease-in-out;
    transform-style: preserve-3d;
}

/* Hover uniquement sur desktop (écrans avec souris) */
@media (hover: hover) and (pointer: fine) {
    .flip-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

/* État flipped pour le tap sur mobile */
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1rem;
    overflow: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

/* ==========================================================================
   Flip Cards - Texte d'indication adaptatif
   ========================================================================== */

.flip-hint-hover {
    display: inline;
}

.flip-hint-tap {
    display: none;
}

/* Sur écrans tactiles sans hover */
@media (hover: none) and (pointer: coarse) {
    .flip-hint-hover {
        display: none;
    }
    
    .flip-hint-tap {
        display: inline;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-bounce {
    animation: bounce 1s infinite;
}