.cards-3d{
    padding: 50px 0 50px 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;

}
.card-3d{

    /* Variable Parramettrable */
    --border-radius-card:25px;
    /* Ajuste la largeur de la carte pour qu'elle varie de 250px sur ordinateur à 150px sur smartphone */
    --width-card: clamp(
        150px,            /* Taille minimale de la carte pour les petits écrans (ex. smartphone) */
        10vw + 100px,     /* Taille flexible qui ajuste la carte en fonction de la largeur de l'écran */
        300px             /* Taille maximale de la carte pour les grands écrans (ex. ordinateur) */
    );
    --height-card: calc(var(--width-card)*1.37);


    /* Variable NON-Parramettrable */
    --rc-x:0;
    --rc-y:0;
    --rc-z:0;
    --rc-deg:20deg;

    --rotate3d-card:rotate3d(var(--rc-x),var(--rc-y),var(--rc-z),var(--rc-deg));

    --rotateY-front-card:rotateY(0deg);
    --rotateY-back-card:rotateY(180deg);


    margin: 50px 3% 50px 3%;
    height: var(--height-card);
    width: var(--width-card);
    perspective: 2000px;
    perspective-origin: center;
    position: relative;
    text-align: center;
    cursor: pointer;
    overflow: visible;
}
.card-3d-front{
    /* Variable Parramettrable */
    --background-color-front:rgba(183, 128, 255, 1);
    --background-image-front:none;

    --boxshadow-color-1-front:#000000;
    --boxshadow-color-2-front:#b780ff80;



    position: absolute;
    backface-visibility: hidden;
    height: var(--height-card);
    width: var(--width-card);
    border-radius: var(--border-radius-card);
    background-color:  var(--background-color-front);
    background-image: var(--background-image-front);
    perspective: 1000px;
    background-position: center;
    background-size: contain;
    transform-origin: center;

    box-shadow:var(--boxshadow-color-1-front) calc(var(--rc-x) * (-20px))  calc(var(--rc-y) * (-20px)) 20px,var(--boxshadow-color-2-front) calc(var(--rc-x) * (10px))  calc(var(--rc-y) * (10px)) 20px;

    transform: var(--rotate3d-card) var(--rotateY-front-card);
    transition: 0.3s ease;

}

.card-3d-texture{
    --texture-card: none;

    background-image: var(--texture-card);
    background-position: center;
    background-size: contain;
    border-radius: var(--border-radius-card);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: luminosity;
    opacity: 50%;
}
.card-3d-text{
    --shadow-Text-Posx:0px;
    --shadow-Text-Posy:0px;

    --shagow-Text-Glob:10px;
    --shagow-Text-Color-1:black;
    --shagow-Text-Color-2:rgba(255, 255, 255, 0.5);


    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;

    font-size: 25px;
    color: rgb(255, 255, 255);
    text-shadow: var(--shadow-Text-Posx) var(--shadow-Text-Posy) var(--shagow-Text-Glob) var(--shagow-Text-Color-1), 0 0 var(--shagow-Text-Glob) var(--shagow-Text-Color-2) ;
}
.card-3d-text img{
    display: block;
    width: 100%;
    filter: drop-shadow( var(--shadow-Text-Posx) var(--shadow-Text-Posy) var(--shagow-Text-Glob) var(--shagow-Text-Color-1));
}
.card-3d-text img.star{
    display: block;
    position: absolute;
    width: 50%;
    left: 50%;
    top:50%;
    transform: translate(-50% ,-50%);
    filter: drop-shadow( var(--shadow-Text-Posx) var(--shadow-Text-Posy) var(--shagow-Text-Glob) var(--shagow-Text-Color-1));
}
.card-3d-text span.star-text{
    display: block;
    position: absolute;
    width: 100%;
    top: 50%;
    font-family: "Gravity";
    z-index: 2;
    transform: translate(0% , -50%);
    text-align: center;
    text-shadow: none;
}

.card-3d-text .card-3d-text-1{
    width: 80%;
    height: 20%;
    /* padding: 5% 0; */
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-3d-text .card-3d-text-2{
    width: 80%;
    height: 50%;
    margin: 0 auto;
}
.card-3d-text .card-3d-text-2 p{ 
    white-space: pre-line;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
}
.card-3d-text .card-3d-text-2 img{
    max-height: 100%;
    max-width: max-content;
    filter: drop-shadow( var(--shadow-Text-Posx) var(--shadow-Text-Posy) var(--shagow-Text-Glob) var(--shagow-Text-Color-1));
}

.card-3d-text .card-3d-text-3{
    width: 80%;
    height: 30%;
    margin: 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-line; 
    word-break: normal;
}

.card-3d-back{

    --background-color-back:rgba(111, 0, 255, 1);
    --background-image-back:none;

    --boxshadow-color-1-back:#000000;
    --boxshadow-color-2-back:#b780ff80;

    position: absolute;
    backface-visibility: hidden;
    height: var(--height-card);
    width: var(--width-card);
    border-radius: var(--border-radius-card);
    background-color:  var(--background-color-back);
    background-image: var(--background-image-back);
    background-position: center;
    background-size: contain;
    transform-origin: center;

    box-shadow:var(--boxshadow-color-1-back) calc(var(--rc-x) * (-20px))  calc(var(--rc-y) * (-20px)) 20px,var(--boxshadow-color-2-back) calc(var(--rc-x) * (10px))  calc(var(--rc-y) * (10px)) 20px;



    transform: var(--rotate3d-card) var(--rotateY-back-card);
    transition: 0.3s ease;
}

.card-3d-glair{

    --mx:1;


    mix-blend-mode: luminosity;
    border-radius: var(--border-radius-card);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    filter: brightness(0.9) contrast(1.75);
    background:-moz-radial-gradient(farthest-corner circle, rgba(255,255,255,1) 0%, rgba(255, 255, 255, 0.66) 50%, rgba(255,255,255,0.33) 66%, rgba(255,255,255,0) 120%);
    background: radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,1) 0%, rgba(255, 255, 255, 0.66) 10%, rgba(255,255,255,0) 66%, rgba(255,255,255,0) 100%);
    opacity: 100%;
    transition: ease-in-out 1s;
}