/* Styles pour le corps (body) de la page */
body {
    margin: 0; /* Supprime les marges */
    padding: 0; /* Supprime les espaces de remplissage */
    height: 100vh; /* Hauteur égale à 100% de la hauteur de la vue */
    display: flex; /* Utilise un affichage flexible */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    background-image: url("wallhaven-x1egel.jpg"); /* Définit une image de fond */
    background-repeat: no-repeat; /* Empêche la répétition de l'image de fond */
    background-size: cover; /* Assure que l'image de fond est entièrement visible sans distorsion */
    background-attachment: fixed; /* Fixe l'image de fond en place */
}

/* Styles pour le conteneur des cartes */
.card-container {
    display: flex; /* Utilise un affichage flexible */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    flex-wrap: wrap; /* Permet aux cartes de passer à la ligne lorsque l'espace est insuffisant */
}

/* Styles pour chaque carte individuelle */
.card {
    perspective: 1000px; /* Crée un effet 3D lors de la rotation de la carte */
    margin: 20px; /* Ajoute des marges autour de chaque carte */
    cursor: pointer; /* Change le curseur en une main pointant */
    width: 200px; /* Largeur de la carte */
    height: 300px; /* Hauteur de la carte */
    border-radius: 10px; /* Ajoute des coins arrondis aux cartes */
    -webkit-backface-visibility: hidden; /* Cache la face arrière dans certains navigateurs */
    backface-visibility: hidden; /* Cache la face arrière */
    transition: 1s ease-in-out; /* Ajoute une transition animée de 1 seconde avec un effet d'accélération et de décélération */
    -webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.6)); /* Ajoute un reflet en dessous de la carte */
}

/* Styles pour l'intérieur de chaque carte */
.card-inner {
    width: 100%;
    height: 100%;
    transition: transform 0.5s; /* Ajoute une transition animée de 0,5 seconde pour la transformation */
    transform-style: preserve-3d; /* Préserve le style 3D lors de la transformation */
}

/* Animation de rotation de la carte lorsqu'elle est survolée */
.card:hover .card-inner {
    transform: rotateY(180deg);
}

/* Styles pour les faces avant et arrière de chaque carte */
.card-front, .card-back {
    width: 100%;
    height: 100%;
    display: flex; /* Utilise un affichage flexible */
    border-radius: 10px; /* Ajoute des coins arrondis à l'avant et à l'arrière des cartes */
    justify-content: center; /* Centre le contenu horizontalement */
    align-items: center; /* Centre le contenu verticalement */
    position: absolute; /* Position absolue pour les faces avant et arrière */
    backface-visibility: hidden; /* Cache la face arrière */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Ajoute une ombre portée */
}

/* Styles pour les images à l'intérieur des cartes */
.card-front img, .card-back img {
    width: 100%;
    height: 100%;
    border-radius: 10px; /* Ajoute des coins arrondis aux images */
    object-fit: cover; /* Maintient le rapport hauteur-largeur et s'adapte à la carte sans distorsion */
}

/* Styles pour les liens à l'intérieur de la face arrière de chaque carte */
.card-back a {
    width: 100%;
    height: 100%;
    display: block; /* Fait du lien un élément de bloc pour occuper toute la carte */
}

/* Rotation de la face arrière de la carte */
.card-back {
    border-radius: 10px; /* Ajoute des coins arrondis */
    transform: rotateY(180deg); /* Rotation à 180 degrés pour afficher la face arrière */
}

/* Styles pour les cartes lorsque la largeur de l'écran est inférieure à 768 pixels */
@media (max-width: 768px) {
    .card {
        width: 150px; /* Réduit la largeur des cartes */
        height: 225px; /* Réduit la hauteur des cartes */
        margin: 10px; /* Réduit les marges des cartes */
    }
}