/* Taille dynamique du cube */

:root 
{
    --cube-size: clamp(70px, 100px, 140px); //Taille mini, normale, maxi
}

.cube-wrapper 
{
    width: var(--cube-size);
    height: var(--cube-size);
    margin-left: auto;
    margin-right: 30px;    
    margin-top: 85px;    
    perspective: 400px;
}

/* Cube */
.cube 
{
    width: var(--cube-size);
    height: var(--cube-size);
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 18s infinite linear;
}

/* Faces */
.face 
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*border: 2px solid #000000;*/
    background: #FFFFFF;
}

.face img 
{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: brightness(1.05) contrast(1.1);
    transition: opacity 0.5s ease;
    border: 2px solid #000000;
    overflow: hidden;
}

/* Position des faces avec profondeur dynamique */

.face1 { transform: translateZ(calc(var(--cube-size) / 2)); }
.face2 { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.face3 { transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face4 { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.face5 { transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.face6 { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

/* Animation */
@keyframes rotateCube 
{
    from { transform: rotateX(0deg) rotateY(0deg); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
}