/*==================================================
RESET
==================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#050505;

    color:#FFF;

    overflow-x:hidden;

    font-family:"Poppins",sans-serif;

}

img{

    display:block;

    max-width:100%;

}

button{

    cursor:pointer;

    font-family:inherit;

}

a{

    text-decoration:none;

}

/*==================================================
MUSIC PAGE
==================================================*/

.music-page{

    position:relative;

    width:100%;

    overflow:hidden;

}

/*==================================================
BACKGROUND
==================================================*/

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at center,

    rgba(243,197,90,.10),

    transparent 35%),

    radial-gradient(circle at 20% 80%,

    rgba(172,106,73,.08),

    transparent 45%),

    linear-gradient(

    180deg,

    #101010,

    #050505

    );

    z-index:-3;

}

.noise{

    position:fixed;

    inset:0;

    opacity:.04;

    background-image:url("https://www.transparenttextures.com/patterns/asfalt-dark.png");

    z-index:-2;

}

/*==================================================
PARTICULES
==================================================*/

.particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}

.particles span{

    position:absolute;

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFD978;

    box-shadow:

    0 0 10px #FFD978,

    0 0 25px rgba(243,197,90,.55);

    opacity:0;

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{

        transform:

        translateY(120vh)

        scale(.25);

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:.8;

    }

    100%{

        transform:

        translateY(-15vh)

        translateX(var(--x))

        scale(1.5);

        opacity:0;

    }

}

/*==================================================
HERO
==================================================*/

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:120px;

    width:min(1500px,90%);

    margin:auto;

}

.hero-left{

    flex:1;

    max-width:650px;

}

.small{

    color:#F3C55A;

    letter-spacing:5px;

    font-size:15px;

    margin-bottom:20px;

}

.hero h1{

    font-size:82px;

    font-weight:800;

    margin-bottom:30px;

    line-height:1;

}

.description{

    font-size:19px;

    line-height:1.9;

    opacity:.75;

    margin-bottom:50px;

}

.buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.buttons a{

    padding:18px 34px;

    border-radius:60px;

    border:1px solid rgba(243,197,90,.30);

    color:#F3C55A;

    transition:.35s;
    
    text-decoration:none;

}

.buttons a:hover{

    background:#F3C55A;

    color:#050505;

    transform:

    translateY(-4px);

    box-shadow:

    0 0 35px rgba(243,197,90,.30);

}

/*==================================================
PARTIE DROITE
==================================================*/

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
PLATINE
==================================================*/

.turntable{

    position:relative;

    width:560px;

    height:560px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*==================================================
HALO
==================================================*/

.vinyl-glow{

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(243,197,90,.18),

        transparent 72%

    );

    filter:blur(40px);

    opacity:.6;

    animation:glowPulse 4s ease-in-out infinite;

}

@keyframes glowPulse{

    0%,100%{

        transform:scale(.95);

        opacity:.45;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}

/*==================================================
VINYLE
==================================================*/

.vinyl{

    position:relative;

    width:430px;

    height:430px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:

    radial-gradient(

        circle,

        #2b2b2b 0%,

        #111 35%,

        #050505 70%,

        #000 100%

    );

    box-shadow:

    inset 0 0 60px rgba(255,255,255,.05),

    0 0 55px rgba(243,197,90,.10),

    0 25px 60px rgba(0,0,0,.55);

}

/*==================================================
RAINURES
==================================================*/

.vinyl-ring{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.05);

}

.ring1{

    width:370px;

    height:370px;

}

.ring2{

    width:320px;

    height:320px;

}

.ring3{

    width:270px;

    height:270px;

}

.ring4{

    width:220px;

    height:220px;

}

.ring5{

    width:170px;

    height:170px;

}

/*==================================================
OMBRE
==================================================*/

.vinyl-shadow{

    position:absolute;

    inset:0;

    border-radius:50%;

    box-shadow:

    inset 0 0 80px rgba(0,0,0,.8);

}

/*==================================================
LABEL
==================================================*/

.label{

    position:relative;

    width:125px;

    height:125px;

    border-radius:50%;

    overflow:hidden;

    border:4px solid rgba(243,197,90,.45);

    box-shadow:

    0 0 25px rgba(243,197,90,.35);

    z-index:20;

}

.label img{

    width:100%;

    height:100% !important;

    object-fit:cover;

    border-radius:50%;

    animation:labelSpin 20s linear infinite;

}

/*==================================================
BRAS
==================================================*/

.arm{

    position:absolute;

    right:75px;

    top:70px;

    width:195px;

    height:12px;

    border-radius:40px;

    transform-origin:left center;

    transform:rotate(-35deg);

    background:

    linear-gradient(

        90deg,

        #4d4d4d,

        #d0d0d0

    );

    transition:

    transform 1.2s cubic-bezier(.22,1,.36,1);

    z-index:25;

}

.arm.playing{

    transform:rotate(-18deg);

}

.needle{

    position:absolute;

    right:-12px;

    top:-7px;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#F3C55A;

    box-shadow:

    0 0 18px rgba(243,197,90,.5);

}

/*==================================================
ROTATION
==================================================*/

.vinyl.playing{

    animation:vinylSpin 3.5s linear infinite;

}

@keyframes vinylSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
PLAYER
==================================================*/

.player-section{

    width:min(1400px,90%);
    margin:120px auto;

}

.player{

    position:relative;

    overflow:hidden;

    padding:50px;

    border-radius:35px;

    background:

    linear-gradient(

        145deg,

        rgba(30,30,30,.92),

        rgba(10,10,10,.92)

    );

    border:1px solid rgba(243,197,90,.18);

    backdrop-filter:blur(20px);

    box-shadow:

    0 30px 80px rgba(0,0,0,.45),

    0 0 60px rgba(243,197,90,.08);

}

/*==================================================
BACKGROUND PLAYER
==================================================*/

.player::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    url("https://www.ryan-roseau.fr/wp-content/uploads/2026/06/ChatGPT-Image-28-juin-2026-14_22_31.png");

    background-size:cover;

    background-position:center;

    filter:

    brightness(.22)

    blur(1px);

    transform:scale(1.08);

    z-index:-2;

}

.player::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,.40),

        rgba(0,0,0,.82)

    ),

    radial-gradient(

        circle at center,

        rgba(243,197,90,.10),

        transparent 70%

    );

    z-index:-1;

}

/*==================================================
INFOS
==================================================*/

.track-info{

    text-align:center;

    margin-bottom:45px;

}

.track-info h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:12px;

}

.track-info p{

    color:#F3C55A;

    letter-spacing:4px;

    opacity:.8;

    font-size:17px;

}

/*==================================================
BARRE
==================================================*/

.progress-container{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:50px;

}

.progress-container span{

    width:55px;

    text-align:center;

    color:#DDD;

    font-size:15px;

}

.progress{

    position:relative;

    flex:1;

    height:10px;

    border-radius:50px;

    background:#1d1d1d;

    cursor:pointer;

    overflow:hidden;

}

.progress::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(255,255,255,.05),

        transparent

    );

}

.progress-bar{

    width:0;

    height:100%;

    border-radius:50px;

    background:

    linear-gradient(

        90deg,

        #FFD978,

        #F3C55A,

        #AC6A49

    );

    box-shadow:

    0 0 20px rgba(243,197,90,.45);

}

/*==================================================
BOUTONS
==================================================*/

.controls{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-bottom:45px;

}

.controls button{

    width:70px;

    height:70px;

    border:none;

    border-radius:50%;

    background:

    linear-gradient(

        145deg,

        #222,

        #090909

    );

    color:#F3C55A;

    font-size:22px;

    transition:.35s;

    box-shadow:

    0 12px 30px rgba(0,0,0,.45);

}

.controls button:hover{

    transform:

    translateY(-4px)

    scale(1.08);

    color:white;

    box-shadow:

    0 0 35px rgba(243,197,90,.35);

}

#play{

    width:92px;

    height:92px;

    font-size:28px;

    color:#050505;

    background:

    linear-gradient(

        145deg,

        #FFD978,

        #AC6A49

    );

}

#play:hover{

    transform:scale(1.12);

}

/*==================================================
VOLUME
==================================================*/

.volume{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

}

.volume i{

    color:#F3C55A;

    font-size:20px;

}

#volume{

    width:280px;

    appearance:none;

    height:6px;

    border-radius:30px;

    background:#222;

    outline:none;

}

#volume::-webkit-slider-thumb{

    appearance:none;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#FFD978;

    cursor:pointer;

    box-shadow:

    0 0 15px rgba(243,197,90,.45);

}

/*==================================================
VISUALIZER
==================================================*/

.visualizer{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:7px;

    height:110px;

    margin-top:55px;

}

.visualizer span{

    width:7px;

    height:10px;

    border-radius:20px;

    background:

    linear-gradient(

        180deg,

        #FFD978,

        #F3C55A,

        #AC6A49

    );

    box-shadow:

    0 0 12px rgba(243,197,90,.40);

}

/*==================================================
VINYL LIBRARY
==================================================*/

#vinyl-library{

    width:min(1600px,92%);
    margin:180px auto;

}

#vinyl-library .section-title{

    text-align:center;

    margin-bottom:70px;

}

#vinyl-library .section-title span{

    color:#F3C55A;

    letter-spacing:4px;

    font-size:14px;

}

#vinyl-library .section-title h2{

    font-size:60px;

    margin:20px 0;

}

#vinyl-library .section-title p{

    max-width:700px;

    margin:auto;

    opacity:.7;

    line-height:1.8;

}

/*==================================================
CONTAINER
==================================================*/

.library-container{

    position:relative;

    display:flex;

    align-items:center;

    gap:30px;

}

.library-track{

    flex:1;

    display:flex;

    gap:45px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding:70px 40px;

    scrollbar-width:none;

    cursor:grab;

}

.library-track::-webkit-scrollbar{

    display:none;

}

.library-track.dragging{

    cursor:grabbing;

}

/*==================================================
CARTE
==================================================*/

.vinyl-card{

    position:relative;

    width:230px;

    height:230px;

    flex:0 0 230px;

    transition:

        transform .45s,

        filter .45s,

        opacity .45s;

}

.vinyl-card:hover{

    transform:

        translateY(-18px);

}

/*==================================================
POCHETTE
==================================================*/

.vinyl-sleeve{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:18px;

    background:#111;

    box-shadow:

        0 25px 45px rgba(0,0,0,.45);

    z-index:5;

}

.album-cover{

    width:100%;

    height:170px;

    overflow:hidden;

}

.vinyl-card img{

    width:100%;

    height:250px !important;

    object-fit:cover;

    display:block;

}

/*==================================================
DISQUE
==================================================*/

.vinyl-disc{

    position:absolute;

    right:10px;

    top:10px;

    width:210px;

    height:210px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        #5a5a5a,

        #2b2b2b 10%,

        #121212 18%,

        #050505 35%,

        #000 100%

    );

    transition:

        transform .55s cubic-bezier(.22,1,.36,1);

    box-shadow:

        0 20px 45px rgba(0,0,0,.45);

    z-index:2;

}

.vinyl-disc::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

    repeating-radial-gradient(

        circle,

        transparent 0,

        transparent 3px,

        rgba(255,255,255,.03) 4px,

        transparent 5px

    );

}

/*==================================================
CENTRE
==================================================*/

.vinyl-center{

    position:absolute;

    width:88px;

    height:88px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    border:3px solid #F3C55A;

    box-shadow:

        0 0 20px rgba(243,197,90,.35);

}

.vinyl-center img{

    width:100%;

    height:120% !important;

    object-fit:cover;

}

/*==================================================
SURVOL
==================================================*/

.vinyl-card:hover .vinyl-disc{

    transform:

        translateX(90px)

        rotate(360deg);

}

.vinyl-card.active{

    transform:

        translateY(-25px)

        scale(1.08);

}

.vinyl-card.active .vinyl-disc{

    transform:

        translateX(120px)

        rotate(720deg);

}

.vinyl-card.active .vinyl-sleeve{

    box-shadow:

        0 0 35px rgba(243,197,90,.35),

        0 25px 45px rgba(0,0,0,.45);

}

/*==================================================
FLÈCHES
==================================================*/

.library-arrow{

    width:65px;

    height:65px;

    border:none;

    border-radius:50%;

    background:#F3C55A;

    color:#111;

    font-size:22px;

    flex-shrink:0;

    transition:.35s;

}

.library-arrow:hover{

    transform:scale(1.12);

    box-shadow:

        0 0 35px rgba(243,197,90,.45);

}

/*==================================================
DISQUE VOLANT
==================================================*/

#moving-vinyl{

    position:fixed;

    left:0;

    top:0;

    width:220px;

    height:220px;

    display:none;

    pointer-events:none;

    z-index:999999;

}

.moving-disc{

    position:relative;

    width:100%;

    height:100%;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        #666,

        #2d2d2d 10%,

        #121212 18%,

        #050505 35%,

        #000 100%

    );

    animation:

        flyingSpin .45s linear infinite;

}

.moving-disc::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:

    repeating-radial-gradient(

        circle,

        transparent 0,

        transparent 3px,

        rgba(255,255,255,.03) 4px,

        transparent 5px

    );

}

.moving-center{

    position:absolute;

    left:50%;

    top:50%;

    width:88px;

    height:88px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    overflow:hidden;

    border:3px solid #F3C55A;

}

.moving-center img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==================================================
ANIMATIONS
==================================================*/

@keyframes flyingSpin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
PLAYLIST
==================================================*/

.playlist{

    width:min(1500px,92%);
    margin:180px auto;

}

.playlist .section-title{

    text-align:center;

    margin-bottom:70px;

}

.playlist .section-title span{

    color:#F3C55A;

    letter-spacing:4px;

    font-size:14px;

}

.playlist .section-title h2{

    font-size:58px;

    margin:20px 0;

}

.playlist .section-title p{

    max-width:700px;

    margin:auto;

    line-height:1.8;

    opacity:.7;

}

/*==================================================
PLAYLIST BOX
==================================================*/

.playlist-box{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================================
SONG
==================================================*/

.song{

    display:grid;

    grid-template-columns:

    90px

    1fr

    120px

    90px;

    align-items:center;

    gap:25px;

    padding:22px 28px;

    border-radius:24px;

    background:

    linear-gradient(

        145deg,

        rgba(24,24,24,.92),

        rgba(10,10,10,.92)

    );

    border:1px solid rgba(243,197,90,.10);

    transition:.35s;

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

.song::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(243,197,90,.04),

        transparent

    );

    transform:translateX(-100%);

    transition:.8s;

}

.song:hover::before{

    transform:translateX(100%);

}

.song:hover{

    transform:

        translateX(12px);

    border-color:

        rgba(243,197,90,.35);

    box-shadow:

        0 15px 40px rgba(0,0,0,.35),

        0 0 35px rgba(243,197,90,.08);

}

/*==================================================
ACTIVE
==================================================*/

.song.active{

    border-color:

        rgba(243,197,90,.5);

    background:

    linear-gradient(

        145deg,

        rgba(243,197,90,.12),

        rgba(172,106,73,.12)

    );

}

/*==================================================
COVER
==================================================*/

.song-cover{

    position:relative;

    width:70px;

    height:70px;

    border-radius:16px;

    overflow:hidden;

}

.song-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.song-play{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(5px);

    opacity:0;

    transition:.3s;

}

.song:hover .song-play{

    opacity:1;

}

.song-play i{

    color:#FFF;

    font-size:20px;

}

/*==================================================
DETAILS
==================================================*/

.song-details h3{

    font-size:22px;

    margin-bottom:8px;

    font-weight:700;

}

.song-details p{

    color:#F3C55A;

    opacity:.8;

    font-size:15px;

}

/*==================================================
EQUALIZER
==================================================*/

.song-equalizer{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:5px;

    height:36px;

}

.song-equalizer span{

    width:5px;

    height:10px;

    border-radius:20px;

    background:

    linear-gradient(

        180deg,

        #FFD978,

        #F3C55A,

        #AC6A49

    );

    animation:

        equalizer 1s infinite ease-in-out;

    opacity:.35;

}

.song.active .song-equalizer span{

    opacity:1;

}

.song-equalizer span:nth-child(2){

    animation-delay:.15s;

}

.song-equalizer span:nth-child(3){

    animation-delay:.30s;

}

.song-equalizer span:nth-child(4){

    animation-delay:.45s;

}

@keyframes equalizer{

    0%,100%{

        height:10px;

    }

    50%{

        height:34px;

    }

}

/*==================================================
DURATION
==================================================*/

.song-duration{

    text-align:right;

    color:#F3C55A;

    font-weight:600;

    font-size:15px;

}

/*==================================================
TOP 3
==================================================*/

.top3-section{

    width:min(1500px,92%);
    margin:180px auto;

}

.top3-section .section-title{

    text-align:center;
    margin-bottom:70px;

}

.top3-section .section-title span{

    color:#F3C55A;
    letter-spacing:4px;
    font-size:14px;

}

.top3-section .section-title h2{

    font-size:58px;
    margin:20px 0;

}

.top3-section .section-title p{

    max-width:700px;
    margin:auto;
    line-height:1.8;
    opacity:.7;

}

/*==================================================
PODIUM
==================================================*/

.podium{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:40px;

}

.podium-card{

    width:320px;

    transition:.4s;

    cursor:pointer;

}

.podium-card:hover{

    transform:

    translateY(-18px);

}

.podium-cover{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    box-shadow:

    0 25px 45px rgba(0,0,0,.45);

}

.podium-cover img{

    width:100%;

    height:200px;

    object-fit:cover;

    transition:.45s;

}

.podium-card:hover img{

    transform:scale(1.08);

}

.podium-overlay{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.45);

    backdrop-filter:blur(5px);

    opacity:0;

    transition:.35s;

}

.podium-card:hover .podium-overlay{

    opacity:1;

}

.podium-overlay i{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#F3C55A;

    color:#111;

    font-size:26px;

}

.podium-info{

    text-align:center;

    margin:20px 0;

}

.medal{

    font-size:34px;

    display:block;

    margin-bottom:12px;

}

.podium-info h3{

    font-size:24px;

    margin-bottom:8px;

}

.podium-info p{

    opacity:.7;

}

.podium-step{

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:60px;

    font-weight:800;

    color:#111;

    background:

    linear-gradient(

        180deg,

        #FFD978,

        #AC6A49

    );

    border-radius:25px 25px 0 0;

    box-shadow:

    0 25px 45px rgba(0,0,0,.45);

}

.first-step{

    height:260px;

}

.second-step{

    height:190px;

}

.third-step{

    height:150px;

}

/*==================================================
WALL OF FAME
==================================================*/

#wall-of-fame{

    width:min(1500px,92%);

    margin:180px auto;

}

.wall-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));

    gap:28px;

}

.wall-item{

    overflow:hidden;

    border-radius:22px;

    transition:.4s;

    cursor:pointer;

    box-shadow:

    0 20px 45px rgba(0,0,0,.45);

}

.wall-item img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    transition:.45s;

}

.wall-item:hover{

    transform:

    translateY(-12px);

}

.wall-item:hover img{

    transform:

    scale(1.08);

}

/*==================================================
COLLECTION
==================================================*/

#vinyl-collection{

    width:min(1500px,92%);

    margin:180px auto;

}

.collection-grid{

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(180px,1fr));

    gap:25px;

}

.collection-item{

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 15px 35px rgba(0,0,0,.35);

}

.collection-item img{

    width:100%;

    aspect-ratio:1;

    object-fit:cover;

    transition:.35s;

}

.collection-item:hover{

    transform:

    scale(1.05)

    rotate(-2deg);

}

.collection-item:hover img{

    transform:scale(1.08);

}

/*==================================================
LAPTOP
==================================================*/

@media(max-width:1400px){

.hero{

    gap:70px;

}

.hero h1{

    font-size:68px;

}

.turntable{

    transform:scale(.88);

}

.library-track{

    gap:35px;

}

}

/*==================================================
TABLETTE
==================================================*/

@media(max-width:1100px){

.hero{

    flex-direction:column;

    justify-content:center;

    text-align:center;

    padding:120px 0 40px;

    gap:60px;

}

.hero-left{

    max-width:900px;

}

.buttons{

    justify-content:center;

}

.turntable{

    transform:scale(.78);

}

.player{

    padding:40px;

}

.track-info h2{

    font-size:34px;

}

.library-track{

    padding:50px 15px;

}

.vinyl-card{

    width:200px;

    height:200px;

    flex:0 0 200px;

}

.vinyl-disc{

    width:180px;

    height:180px;

}

.podium{

    gap:18px;

}

.podium-card{

    width:31%;

}

}

/*==================================================
MOBILE
==================================================*/

@media(max-width:768px){

.hero{

    min-height:auto;

    padding:120px 20px 60px;

}

.hero h1{

    font-size:48px;

}

.description{

    font-size:16px;

    line-height:1.8;

}

.buttons{

    flex-direction:column;

    align-items:center;

}

.buttons a{

    width:240px;

    text-align:center;

}

.turntable{

    width:320px;

    height:320px;

    transform:none;

}

.vinyl{

    width:250px;

    height:250px;

}

.vinyl-glow{

    width:300px;

    height:300px;

}

.arm{

    width:120px;

    right:35px;

    top:45px;

}

.label{

    width:82px;

    height:82px;

}

.player{

    padding:25px;

    border-radius:25px;

}

.track-info h2{

    font-size:28px;

}

.track-info p{

    font-size:15px;

}

.progress-container{

    gap:10px;

}

.progress-container span{

    width:45px;

    font-size:13px;

}

.controls{

    gap:12px;

    flex-wrap:wrap;

}

.controls button{

    width:58px;

    height:58px;

    font-size:18px;

}

#play{

    width:75px;

    height:75px;

    font-size:24px;

}

#volume{

    width:170px;

}

.visualizer{

    transform:scale(.8);

    margin-top:35px;

}

.library-container{

    gap:10px;

}

.library-arrow{

    display:none;

}

.library-track{

    gap:18px;

    padding:35px 5px;

}

.vinyl-card{

    width:150px;

    height:150px;

    flex:0 0 150px;

}

.vinyl-card img {
    width: 100%;
    height: 150px !important; 
    object-fit: cover;
    display: block;
}


.vinyl-disc{

    width:135px;

    height:135px;

}

.vinyl-center{

    width:58px;

    height:58px;

}

.song{

    grid-template-columns:

    65px

    1fr;

    gap:15px;

}

.song-duration,

.song-equalizer{

    display:none;

}

.song-details h3{

    font-size:17px;

}

.song-details p{

    font-size:13px;

}

.podium{

    gap:8px;

}

.podium-card{

    width:32%;

}

.podium-cover img{

    height:95px;

}

.podium-overlay i{

    width:38px;

    height:38px;

    font-size:15px;

}

.medal{

    font-size:22px;

}

.podium-info h3{

    font-size:12px;

}

.podium-info p{

    display:none;

}

.first-step{

    height:115px;

}

.second-step{

    height:85px;

}

.third-step{

    height:65px;

}

.podium-step{

    font-size:28px;

}

.wall-grid{

    grid-template-columns:

    repeat(2,1fr);

}

.collection-grid{

    grid-template-columns:

    repeat(2,1fr);

}

}

/*==================================================
PETITS MOBILES
==================================================*/

@media(max-width:480px){

.hero h1{

    font-size:40px;

}

.turntable{

    transform:scale(.9);

}

.player{

    padding:20px;

}

.track-info h2{

    font-size:24px;

}

#play{

    width:68px;

    height:68px;

}

.controls button{

    width:52px;

    height:52px;

}

}