/* cartes.css */

/* Conteneur pour centrer les cartes */
.cards-container {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: flex-end; /* Aligne les cartes en bas */
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    gap: 20px; /* Espacement entre les cartes */
    min-height: 90vh; /* Prend toute la hauteur de l’écran */
    position: fixed;
    z-index: 5;
    padding-bottom: 10px; /* Ajoute un espace en bas pour éviter que les cartes soient collées au bord */
	left: 50%;
    transform: translateX(-50%);
	
}

/* Ajustements pour mobile */
@media (max-width: 768px) {
    .cards-container {
        flex-direction: column; /* Aligne les cartes en colonne */
        align-items: center; /* Centre verticalement sur mobile */
        gap: 10px; /* Réduit l’espacement */
        padding: 10px; /* Ajoute un peu de marge */
    }

    .crypto-card {
        width: 120px; /* Réduit la largeur sur mobile */
    }
}

.crypto-card {
    padding: 4px;
    border-radius: 4px;
    text-align: center;
    color: #fff; /* Texte blanc */
    width: 160px; /* Largeur fixe */
    transition: transform 1.1s ease, box-shadow 0s ease; 
    opacity: 0.3;
}

/* Supprimer les positions fixes */
.btc, .eth, .usd, .eur {
    /* Plus besoin de top/left */
}

/* Styles existants inchangés */
.crypto-card:hover {
    transform: scale(1.05); /* Légère augmentation au survol */
    box-shadow: 0 0 3px white; /* Ombre douce */
    opacity: 1; /* Opacité survol carte */
}

.crypto-card .logo-container {
    position: relative;
    width: 80px;
    height: 80px; /* Hauteur fixe pour l’effet flip */
    margin: 0 auto 2px; /* Centrage et espacement */
    perspective: 100px; /* Pour l’effet 3D */
}

.crypto-card img {
    width: 100%;
    height: 100%;
    transition: opacity 1.2s ease; /* Transition pour l’opacité */
    position: absolute;
    top: 0;
    left: 0;
}

.crypto-card .logo-container:hover img {
    animation: flip 1.2s ease-in-out; /* Animation de flip */
}

/* Animation de flip (retournement) */
@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

.crypto-card p {
    margin: 0px 0; /* Espacement entre les lignes */
    font-size: 16px;
}

.crypto-card .percent { 
    color: white; 
}