.nemotel {
    display: none;
}

.containeralbum {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;    /* Centre verticalement */
}

.cerclevinyl {
    background-color: rgb(201, 201, 201);
    height: 1.2vh;
    width: 1.2vh;
    border-radius: 50%; /* Correction de la valeur */
    position: absolute;
}

.album {
    --album-size: 50vh; /* Base size */
    --vinyl-size: 48vh; /* Base vinyl size */
    --border-radius: 3px; /* Border radius */
    --cover-translate: -40%; /* Translation for hover */
    --cover-rotate: -2deg; /* Rotation for hover */
    --vinyl-translate: 40%; /* Vinyl translation for hover */
    --vinyl-rotate: 380deg; /* Vinyl rotation for hover */

    position: relative;
    width: var(--album-size);
    height: var(--album-size);
    margin: 1rem;
}

.album .cover {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    z-index: 2;
    transition: transform 0.5s ease-in-out;
}

.album .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.album .cover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1%, transparent 50%);
    pointer-events: none;
    z-index: 3;
}

.album .cover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 4%),
        linear-gradient(45deg, 
            rgba(14, 14, 14, 0.7),
            rgba(0, 0, 0, 0.5) 0%, 
            rgba(0, 0, 0, 0.2) 4%,
            rgba(14, 14, 14, 0.2) 6%,
            rgba(255, 255, 255, 0.3) 7%,
            rgba(218, 218, 218, 0.4) 7%,
            transparent 8%);
    pointer-events: none;
    z-index: 3;
}

.album .vinyl {
    position: absolute;
    top: 10px;
    right: 0;
    width: var(--vinyl-size);
    height: var(--vinyl-size);
    border-radius: 50%;
    background: 
        conic-gradient(from 50deg at 50% 50%, 
            transparent 46%, 
            rgba(255, 255, 255, 0.1) 48%, 
            rgba(255, 255, 255, 0.15) 51%, 
            transparent 56%),
        conic-gradient(from 225deg at 50% 50%, 
            transparent 46%, 
            rgba(255, 255, 255, 0.1) 48%, 
            rgba(255, 255, 255, 0.15) 51%, 
            transparent 56%),
        repeating-radial-gradient(circle, 
            rgba(120, 120, 120, 0.1) 0%, 
            rgba(192, 192, 192, 0.01) 1px, 
            transparent 1px, 
            transparent 4px),
        rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateX(0) rotate(270deg);
    transition: transform 0.5s ease-in-out;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.album .vinyl .vinyl-cover {
    width: calc(var(--vinyl-size) / 2.8);
    height: calc(var(--vinyl-size) / 2.8);
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    box-shadow: 0 0 0 5px black;
}

.album:hover .cover {
    transform: translateX(var(--cover-translate)) rotate(var(--cover-rotate));
}

.album:hover .vinyl {
    transform: translateX(var(--vinyl-translate)) rotate(var(--vinyl-rotate));
}

.album.small {
    margin-right: 70px;
    --album-size: 50vh; /* Reduced size */
    --vinyl-size: 50vh; /* Reduced vinyl size */
    --border-radius: 2px; /* Adjusted border radius */
    --cover-translate: -5px; /* Adjusted translation for hover */
    --cover-rotate: -1deg; /* Adjusted rotation for hover */
    --vinyl-translate: 50%; /* Adjusted vinyl translation for hover */
    --vinyl-rotate: 360deg; /* Same vinyl rotation */
}

.album.open .cover {
    transform: translateX(var(--cover-translate)) rotate(var(--cover-rotate));
}

.album.open .vinyl {
    transform: translateX(var(--vinyl-translate)) rotate(var(--vinyl-rotate));
}

@media (max-width: 768px) {
    .containeralbum {
        display: none;
    }

    .nemotel {
        display: flex;
    }
}