.elementor-5764 .elementor-element.elementor-element-7409ba8{--display:flex;}/* Start custom CSS for html, class: .elementor-element-388f4cf *//* Styles pour la police Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Gris clair de fond */
}

/* Conteneur de la carte pour la perspective 3D */
.card-container {
    perspective: 1000px;
}

/* La carte elle-même, gère la transition de retournement */
.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Classe ajoutée par JS pour retourner la carte */
.card-inner.is-flipped {
    transform: rotateY(180deg);
}

/* Styles pour les deux faces (recto et verso) */
.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem; /* 24px */
    text-align: center;
    border-radius: 0.5rem; /* 8px */
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Style du recto */
.card-front {
    background-color: white;
    color: #1f2937; /* Gris foncé */
}

/* Style du verso */
.card-back {
    /* Thème rouge */
    background-color: #dc2626; /* Rouge 600 */
    color: white;
    transform: rotateY(180deg); /* Caché au départ */
}/* End custom CSS */