en fait je reprends une page : 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link type="text/css" rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body id="Accueil">
    <div class="left">
        <header>
            <img class="logo" src="./assets/images/logo.svg" alt="logo"/>
            <nav>
                <ul>
                    <li>
                        <a href="" id="goToAccueil">
                            <svg width="17" height="19" viewBox="0 0 17 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M15.3978 5.78855C15.7212 5.97943 15.9196 6.32699 15.9196 6.70251V16.3985C15.9196 16.9847 15.4445 17.4598 14.8583 17.4598H12.7357C12.1496 17.4598 11.6744 16.9847 11.6744 16.3985V12.1532C11.6744 10.3948 10.2489 8.96928 8.49047 8.96928C6.73204 8.96928 5.30655 10.3948 5.30655 12.1532V16.3985C5.30655 16.9847 4.83138 17.4598 4.24524 17.4598H2.12262C1.53647 17.4598 1.06131 16.9847 1.06131 16.3985V6.70251C1.06131 6.32699 1.25975 5.97943 1.58313 5.78855L7.95098 2.02974L7.41149 1.11578L7.95098 2.02974C8.28381 1.83328 8.69713 1.83328 9.02996 2.02974L15.3978 5.78855Z" fill="currentColor" stroke="currentColor" stroke-width="2.12262" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            Accueil
                        </a>
                    </li>
                    <li>
                        <a href="" id="goToRecherche">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.2669 12.2669L19 19M7.6 14.2C11.2451 14.2 14.2 11.2451 14.2 7.6C14.2 3.95492 11.2451 1 7.6 1C3.95492 1 1 3.95492 1 7.6C1 11.2451 3.95492 14.2 7.6 14.2Z" stroke="currentColor" stroke-width="1.71429" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>                                
                            Rechercher
                        </a>
                    </li>
                    <li>
                        <a href="" id="goToPlaylists">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M1 3C1 1.89543 1.89543 1 3 1H4C5.10457 1 6 1.89543 6 3V4C6 5.10457 5.10457 6 4 6H3C1.89543 6 1 5.10457 1 4V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10 3C10 1.89543 10.8954 1 12 1H13C14.1046 1 15 1.89543 15 3V4C15 5.10457 14.1046 6 13 6H12C10.8954 6 10 5.10457 10 4V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M1 12C1 10.8954 1.89543 10 3 10H4C5.10457 10 6 10.8954 6 12V13C6 14.1046 5.10457 15 4 15H3C1.89543 15 1 14.1046 1 13V12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M10 12C10 10.8954 10.8954 10 12 10H13C14.1046 10 15 10.8954 15 12V13C15 14.1046 14.1046 15 13 15H12C10.8954 15 10 14.1046 10 13V12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>  
                            Mes playlists
                        </a>
                    </li>
                </ul>
                <div class="active-square" id="activeSquare"></div>
            </nav>
        </header>
        <div class="container-tabs">
            <main id="SectionAccueil" class="tab">
                <section class="content-block">
                    <header>
                        <h2>Écoutés récemment <img src="/assets/icons/star_1.svg"/></h2>
                        <a href="">Voir tout</a>
                    </header>
                    <section class="content">
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                    </section>
                </section>
                <section class="content-block">
                    <header>
                        <h2>Sorties récentes <img src="/assets/icons/star_2.svg"/></h2>
                        <a href="">Voir tout</a>
                    </header>
                    <div class="content">
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                        <div class="song-card">
                            <div class="background" aria-hidden></div>
                            <div class="container-image">
                                <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="bottom-content">
                                <div class="texts">
                                    <h4>Remontada</h4>
                                    <h5>So la lune</h5>
                                </div>
                                <img class="heart" src="/assets/icons/heart.svg"/>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <main id="SectionRecherche" class="tab">

                <section id="PageArtiste">
                    <button class="back-btn" type="button" id="goBackToRecherche">
                        <img src="./assets/icons/back-arrow.svg" alt="back-arrow">
                    </button>
                    <div class="infos-artiste">
                        <div class="card-artiste">
                            <div class="infos">
                                <div class="container-cover">
                                    <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                </div>
                                <div class="texts">
                                    <h2>So la lune</h2>
                                    <h4>7 800 000 auditeurs par mois</h4>
                                </div>
                            </div>
                            <img class="play-btn" src="/assets/icons/play.svg" alt="play">
                        </div>
                        <div class="buttons">
                            <!-- bouton x titres likés et partager -->
                            <button class="btn like">
                                <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="currentColor" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                    
                                5 titres likés
                            </button>
                            <button class="btn share">
                                <svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.7441 13.4211C12.5876 13.7477 12.5 14.1136 12.5 14.5C12.5 15.8807 13.6193 17 15 17C16.3807 17 17.5 15.8807 17.5 14.5C17.5 13.1193 16.3807 12 15 12C14.0057 12 13.1469 12.5805 12.7441 13.4211ZM12.7441 13.4211L5.75586 10.0789M12.7441 4.57889C13.1469 5.41949 14.0057 6 15 6C16.3807 6 17.5 4.88071 17.5 3.5C17.5 2.11929 16.3807 1 15 1C13.6193 1 12.5 2.11929 12.5 3.5C12.5 3.88637 12.5876 4.25226 12.7441 4.57889ZM12.7441 4.57889L5.75586 7.92111M5.75586 7.92111C5.35311 7.08051 4.49435 6.5 3.5 6.5C2.11929 6.5 1 7.61929 1 9C1 10.3807 2.11929 11.5 3.5 11.5C4.49435 11.5 5.35311 10.9195 5.75586 10.0789M5.75586 7.92111C5.91235 8.24774 6 8.61363 6 9C6 9.38637 5.91235 9.75226 5.75586 10.0789" stroke="#9747FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>                                    
                                Partager
                            </button>
                        </div>
                    </div>
                    <div class="main-content">
                        <!-- onglets avec le même nav qu'avant sauf que cette fois ci on a que le choix entre Top titres et Albums-->
                        <nav>
                            <ul>
                                <li>
                                    <a href="" id="goToTopTitres">
                                        <svg width="19" height="17" viewBox="0 0 19 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 14.5H18H9Z" fill="currentColor"/>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2.5H18H9Z" fill="currentColor"/>
                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M9 8.5H18H9Z" fill="currentColor"/>
                                            <path d="M9 14.5H18M1 10.5L1.94036 10.0298C2.57317 9.71342 3.33744 9.83744 3.83772 10.3377V10.3377C4.47963 10.9796 4.47963 12.0204 3.83772 12.6623L1 15.5H5M1.5 1H3V6M3 6H5M3 6H1M9 2.5H18M9 8.5H18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                        Top titres
                                    </a>
                                </li>
                                <li>
                                    <a href="" id="goToAlbums">
                                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>                                            
                                        Albums
                                    </a>
                                </li>
                            </ul>
                            <div class="active-square" id="activeSquareArtiste"></div>
                        </nav>
                        <div class="content-block">
                            <section  id="TopTitres">
                                <div class="artiste-wrapper">
                                    <div class="artiste-row glass with-dots">
                                        <div class="infos">
                                            <div class="container-cover">
                                                <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                            </div>
                                            <div class="texts">
                                                <h4>L'enfant de la pluie</h4>
                                                <h5>So la lune</h5>
                                            </div>
                                        </div>
                                        <div class="actions">
                                        <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                        </div>
                                    </div>
                                    <div class="menu">
                                        <ul>
                                            <li>
                                                <button>
                                                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Consulter l'artiste
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter l'album
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la playlist
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Liker ce titre
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="artiste-wrapper">
                                    <div class="artiste-row glass with-dots">
                                        <div class="infos">
                                            <div class="container-cover">
                                                <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                            </div>
                                            <div class="texts">
                                                <h4>L'enfant de la pluie</h4>
                                                <h5>So la lune</h5>
                                            </div>
                                        </div>
                                        <div class="actions">
                                        <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                        </div>
                                    </div>
                                    <div class="menu">
                                        <ul>
                                            <li>
                                                <button>
                                                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Consulter l'artiste
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter l'album
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la playlist
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Liker ce titre
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="artiste-wrapper">
                                    <div class="artiste-row glass with-dots">
                                        <div class="infos">
                                            <div class="container-cover">
                                                <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                            </div>
                                            <div class="texts">
                                                <h4>L'enfant de la pluie</h4>
                                                <h5>So la lune</h5>
                                            </div>
                                        </div>
                                        <div class="actions">
                                        <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                        </div>
                                    </div>
                                    <div class="menu">
                                        <ul>
                                            <li>
                                                <button>
                                                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Consulter l'artiste
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter l'album
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la playlist
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Liker ce titre
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="artiste-wrapper">
                                    <div class="artiste-row glass with-dots">
                                        <div class="infos">
                                            <div class="container-cover">
                                                <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                            </div>
                                            <div class="texts">
                                                <h4>L'enfant de la pluie</h4>
                                                <h5>So la lune</h5>
                                            </div>
                                        </div>
                                        <div class="actions">
                                        <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                        </div>
                                    </div>
                                    <div class="menu">
                                        <ul>
                                            <li>
                                                <button>
                                                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Consulter l'artiste
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter l'album
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la playlist
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Liker ce titre
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="artiste-wrapper">
                                    <div class="artiste-row glass with-dots">
                                        <div class="infos">
                                            <div class="container-cover">
                                                <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                            </div>
                                            <div class="texts">
                                                <h4>L'enfant de la pluie</h4>
                                                <h5>So la lune</h5>
                                            </div>
                                        </div>
                                        <div class="actions">
                                        <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                        </div>
                                    </div>
                                    <div class="menu">
                                        <ul>
                                            <li>
                                                <button>
                                                    <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Consulter l'artiste
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter l'album
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>    
                                                    Consulter la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la file d'attente
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Ajouter à la playlist
                                                </button>
                                            </li>
                                            <li>
                                                <button>
                                                    <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                    </svg>                                                        
                                                    Liker ce titre
                                                </button>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </section>
                            <section id="Albums">
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>

                            </section>
                        </div>
                    </div>
                </section>

                <div id="recherche" class="wrapper-recherche">
                    <div class="text-field">
                        <img src="./assets/icons/search.svg" alt="user"/>
                        <input type="text" placeholder="Ma recherche" value="">
                    </div>
                    <section class="resultat">
                        <!-- l'idée là c'est de montrer à gauche le résultat le plus
                            pertinent.
                            Exemple: si on tape ga: on s'attend à avoir gazo en truc le plus pertinent
                            puis du coup si on à un artiste à gauche: on met ses 3 titres les plus connus à droite.

                            Si le résultat le plus pertinent à gauche c'est un titre, on l'affiche à gauche
                            et à droite on va mettre d'autres résultats qui peuvent être intéressants 
                            en fonction de la recherche

                            si le résultat le plus pertinent à gauche c'est un album, on l'affiche à gauche
                            à droite on met les 3 titres de l'album les plus connus
                        -->
                        <!--
                            et en dessous on va faire un listing à l'horizontal de 5 albums/titres max qui peuvent correspondre à la recherche

                            En dessous on va faire un listing à l'horizontal de 5 artistes max qui peuvent correspondre à la recherche
                        -->
                        <section id="MainResults" class="results-section">
                            <h2>Meilleurs résultats <img src="/assets/icons/shape_1.svg"/></h2>
                            <div class="content">
                                <div id="bestResult" class="best-result glass">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="infos">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                        <img class="expand" src="/assets/icons/expand.svg"/>
                                    </div>
                                </div>
                                <div class="other-results">
                                    <div class="artiste-wrapper">
                                        <div class="artiste-row glass with-dots">
                                            <div class="infos">
                                                <div class="container-cover">
                                                    <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                                </div>
                                                <div class="texts">
                                                    <h4>L'enfant de la pluie</h4>
                                                    <h5>So la lune</h5>
                                                </div>
                                            </div>
                                            <div class="actions">
                                            <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                            </div>
                                        </div>
                                        <div class="menu">
                                            <ul>
                                                <li>
                                                    <button>
                                                        <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Consulter l'artiste
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter l'album
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la playlist
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Liker ce titre
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                
                                    <div class="artiste-wrapper">
                                        <div class="artiste-row glass with-dots">
                                            <div class="infos">
                                                <div class="container-cover">
                                                    <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                                </div>
                                                <div class="texts">
                                                    <h4>L'enfant de la pluie</h4>
                                                    <h5>So la lune</h5>
                                                </div>
                                            </div>
                                            <div class="actions">
                                            <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                            </div>
                                        </div>
                                        <div class="menu">
                                            <ul>
                                                <li>
                                                    <button>
                                                        <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Consulter l'artiste
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter l'album
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la playlist
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Liker ce titre
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="artiste-wrapper">
                                        <div class="artiste-row glass with-dots">
                                            <div class="infos">
                                                <div class="container-cover">
                                                    <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                                </div>
                                                <div class="texts">
                                                    <h4>L'enfant de la pluie</h4>
                                                    <h5>So la lune</h5>
                                                </div>
                                            </div>
                                            <div class="actions">
                                            <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                            </div>
                                        </div>
                                        <div class="menu">
                                            <ul>
                                                <li>
                                                    <button>
                                                        <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Consulter l'artiste
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter l'album
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>    
                                                        Consulter la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la file d'attente
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Ajouter à la playlist
                                                    </button>
                                                </li>
                                                <li>
                                                    <button>
                                                        <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                                        </svg>                                                        
                                                        Liker ce titre
                                                    </button>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </section>

                        <section id="OtherAlbums" class="results-section scrollable">
                            <h2>Autres albums <img src="/assets/icons/shape_2.svg"/></h2>
                            <div class="content">
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                                <div class="song-card">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                        <img src="/assets/icons/play.svg" alt="play" class="play"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>Remontada</h4>
                                            <h5>So la lune</h5>
                                        </div>
                                        <img class="heart" src="/assets/icons/heart.svg"/>
                                    </div>
                                </div>
                            </div>
                        </section>

                        <section id="OtherArtists" class="results-section scrollable">
                            <h2>Autres Artistes <img src="/assets/icons/shape_3.svg"/></h2>
                            <div class="content">
                                <div class="song-card artiste">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="song-card artiste">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="song-card artiste">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="song-card artiste">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="song-card artiste">
                                    <div class="background" aria-hidden></div>
                                    <div class="container-image">
                                        <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                                    </div>
                                    <div class="bottom-content">
                                        <div class="texts">
                                            <h4>So la lune</h4>
                                            <h5>Artiste</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </section>
                </div>
            </main>


            <main id="SectionPlaylists" class="tab">
                <div class="left-content">
                    <div class="actions">
                        <div class="buttons">
                            <button class="btn like" type="submit" id="MesFavoris">
                                <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="currentColor" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                                Mes favoris
                            </button>
                            <button class="btn playlist" type="submit" id="NouvellePlaylist">
                                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>  
                                Nouvelle playlist
                            </button>
                        </div>
                        <div class="text-field">
                            <img src="./assets/icons/search.svg" alt="user"/>
                            <input type="text" placeholder="Ma recherche" value="">
                        </div>
                    </div>
                    <div class="playlists">

                        <div class="artiste-wrapper">
                            <div id="btnPlaylist" class="artiste-row playlist glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>Super playlist</h4>
                                        <h5>So la lune, Luther, H JeuneCrack, AD Laurent, Sophie Anglade, AD Laurent, Sophie Anglade</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                   <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="menu">
                                <ul>
                                    <li>
                                        <button>
                                            <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="currentColor" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>                                                        
                                            Consulter l'artiste
                                        </button>
                                    </li>
                                    <li>
                                        <button>
                                            <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M6 13.5C6 14.8807 4.88071 16 3.5 16C2.11929 16 1 14.8807 1 13.5C1 12.1193 2.11929 11 3.5 11C4.88071 11 6 12.1193 6 13.5ZM6 13.5V2.91321C6 2.39601 6.39439 1.96415 6.90946 1.91732L15.9095 1.09914C16.4951 1.0459 17 1.507 17 2.09503V12.5M17 12.5C17 13.8807 15.8807 15 14.5 15C13.1193 15 12 13.8807 12 12.5C12 11.1193 13.1193 10 14.5 10C15.8807 10 17 11.1193 17 12.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>    
                                            Consulter l'album
                                        </button>
                                    </li>
                                    <li>
                                        <button>
                                            <svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 1H17M3.99994 6H13.9999M7.99994 11H9.99994" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>    
                                            Consulter la file d'attente
                                        </button>
                                    </li>
                                    <li>
                                        <button>
                                            <svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M1 4H9M13 4H19M16 7V1M4 9H13M8 14H10" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>                                                        
                                            Ajouter à la file d'attente
                                        </button>
                                    </li>
                                    <li>
                                        <button>
                                            <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>                                                        
                                            Ajouter à la playlist
                                        </button>
                                    </li>
                                    <li>
                                        <button>
                                            <svg width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="#FEFCE1" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>                                                        
                                            Liker ce titre
                                        </button>
                                    </li>
                                </ul>
                               </div>
                        </div>

                    </div>
                </div>
                <section class="current-display">

                    <div id="playlist" class="content-block">
                        <div class="playlist"></div>
                        <img src="/assets/icons/menu-dots.svg" alt="open menu" class="menu-dots"/>
                        <div class="top-content">
                            <div class="album-infos">
                                <div class="container-album">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h3>Super playlist</h3>
                                        <h4>Durée: x heures</h4>
                                    </div>
                                </div>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="buttons">
                                <button class="btn" type="button">
                                    <img src="/assets/icons/add.svg" alt="arrow">    
                                    Ajouter un titre
                                </button>
                                <button class="btn" type="button">
                                    <img src="/assets/icons/share.svg" alt="arrow">    
                                    Partager
                                </button>
                            </div>
                            <div class="border glass"></div>
                        </div>
                        <div class="songs">
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="favoris" class="content-block favoris">
                        <div class="top-content">
                            <div class="album-infos">
                                <div class="container-album">
                                    <svg class="heart" width="37" height="33" viewBox="0 0 37 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M18.4999 31.1667C18.4999 31.1667 6.20162 23.1767 2.83328 15.5C-1.67089 5.23832 12.6249 -4.08335 18.4999 6.92249C24.3749 -4.08335 38.6708 5.23832 34.1666 15.5C30.7983 23.1571 18.4999 31.1667 18.4999 31.1667Z" stroke="currentColor" stroke-width="2.84848" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>   
                                    <div class="texts">
                                        <h3>Mes favoris</h3>
                                        <h4>187 titres likés</h4>
                                    </div>
                                </div>
                                <img src="/assets/icons/play.svg" alt="play" class="play"/>
                            </div>
                            <div class="border glass"></div>
                        </div>
                        <div class="songs">
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass with-dots">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                            <div class="artiste-row glass">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img class="menu-dots" src="/assets/icons/menu-dots.svg" alt="open menu"/>
                                </div>
                            </div>
                        </div>
                    </div>


                </section>
            </main>
        
        
        </div>
    </div>

    <aside class="content-player">
        <div class="inner-content">
            <section class="top-content">
                 <div class="cover-container">
                     <img class="cover" src="/assets/images/cover_so_la_lune.png"/>
                 </div>
                 <div class="media-infos">
                     <div class="current-media">
                         <div class="texts">
                             <h3>Remontada</h3>
                             <h4>So la lune</h4>
                         </div>
                         <img class="heart" src="/assets/icons/heart.svg"/>
                     </div>
                     <div class="actions">
                         <div class="buttons">
                             <button id="random" class="side-button" type="button">
                                 <img src="/assets/icons/random.svg" alt="random"/>
                             </button>
                             <div class="main-buttons">
                                 <button class="main-button" id="back" type="button">
                                     <img src="/assets/icons/previous.svg" alt="previous"/>
                                 </button>
                                 <button id="playPause" type="button">
                                     <img src="/assets/icons/play-lg.svg" alt="play"/>
                                 </button>
                                 <button class="main-button" id="next" type="button">
                                     <img src="/assets/icons/next.svg" alt="next">
                                 </button>
                             </div>
                             <button id="repeat" class="side-button" type="button">
                                 <img src="/assets/icons/repeat.svg" alt="repeat"/>
                             </button>
                         </div>
                         <div class="progress">
                             <p>1:21</p>
                             <div class="bar">
                                 <div class="inner"></div>
                             </div>
                             <p>2:30</p>
                         </div>
                     </div>
                 </div>
             </section>
             <section class="file-attente">
                 <h4>A suivre</h4>
                 <div class="content">
                     <div class="artiste-row glass">
                         <div class="infos">
                             <div class="container-cover">
                                 <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                             </div>
                             <div class="texts">
                                 <h4>L'enfant de la pluie</h4>
                                 <h5>So la lune</h5>
                             </div>
                         </div>
                         <div class="actions">
                             <div class="edit-list">
                                 <img class="btn-file-attente" src="/assets/icons/down-arrow.svg" alt="down"/>
                                 <img class="btn-file-attente" src="/assets/icons/up-arrow.svg" alt="up"/>
                             </div>
                             <img class="btn-file-attente" src="/assets/icons/close.svg"/>
                         </div>
                     </div>
                     <div class="artiste-row glass">
                         <div class="infos">
                             <div class="container-cover">
                                 <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                             </div>
                             <div class="texts">
                                 <h4>L'enfant de la pluie</h4>
                                 <h5>So la lune</h5>
                             </div>
                         </div>
                         <div class="actions">
                             <div class="edit-list">
                                 <img src="/assets/icons/down-arrow.svg" alt="down"/>
                                 <img src="/assets/icons/up-arrow.svg" alt="up"/>
                             </div>
                             <img src="/assets/icons/close.svg"/>
                         </div>
                     </div>
                     <div class="artiste-row glass">
                         <div class="infos">
                             <div class="container-cover">
                                 <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                             </div>
                             <div class="texts">
                                 <h4>L'enfant de la pluie</h4>
                                 <h5>So la lune</h5>
                             </div>
                         </div>
                         <div class="actions">
                             <div class="edit-list">
                                 <img src="/assets/icons/down-arrow.svg" alt="down"/>
                                 <img src="/assets/icons/up-arrow.svg" alt="up"/>
                             </div>
                             <img src="/assets/icons/close.svg"/>
                         </div>
                     </div>
                 </div>
             </section>
        </div>
    </aside>

    <div class="pop-up-container" id="popUpContainer">
        <div class="new-playlist" id="popUpPlaylist">
            <header>
                <h2>Nouvelle playlist <img src="/assets/icons/shape_1.svg"/></h2>
                <button id="btnClosePopUp" type="button">
                    <img src="/assets/icons/close.svg" alt="close"/>
                </button>
            </header>
            <form>

                <div class="top-content">
                    <div class="container-cover">
                        <img src="/assets/images/cover_so_la_lune.png" alt="cover"/>
                    </div>
                    <div class="text-field">
                        <img src="./assets/icons/pencil.svg" alt="user"/>
                        <input type="text" placeholder="Playlist n°1" value="Playlist n°1">
                    </div>
                </div>
                <div class="bottom-content">
                    <div class="left-content">
                        <h3>Suggestions</h3>
                        <div class="suggestions">
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            <div class="artiste-row glass suggestion">
                                <div class="infos">
                                    <div class="container-cover">
                                        <img src="/assets/images/cover_so_la_lune.png" alt="cover">
                                    </div>
                                    <div class="texts">
                                        <h4>L'enfant de la pluie</h4>
                                        <h5>So la lune</h5>
                                    </div>
                                </div>
                                <div class="actions">
                                    <img src="/assets/icons/add-circle.svg"/>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <button class="btn playlist important">
                        <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.271 12.1915V16.1915M16.271 14.1915H12.271M13.271 7.19153H15.271C16.3756 7.19153 17.271 6.2961 17.271 5.19153V3.19153C17.271 2.08696 16.3756 1.19153 15.271 1.19153H13.271C12.1664 1.19153 11.271 2.08696 11.271 3.19153V5.19153C11.271 6.2961 12.1664 7.19153 13.271 7.19153ZM3.271 17.1915H5.271C6.37557 17.1915 7.271 16.2961 7.271 15.1915V13.1915C7.271 12.087 6.37557 11.1915 5.271 11.1915H3.271C2.16643 11.1915 1.271 12.087 1.271 13.1915V15.1915C1.271 16.2961 2.16643 17.1915 3.271 17.1915ZM3.271 7.19153H5.271C6.37557 7.19153 7.271 6.2961 7.271 5.19153V3.19153C7.271 2.08696 6.37557 1.19153 5.271 1.19153H3.271C2.16643 1.19153 1.271 2.08696 1.271 3.19153V5.19153C1.271 6.2961 2.16643 7.19153 3.271 7.19153Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>    
                        Ajouter la playlist
                    </button>
                </div>

            </form>
        </div>
    </div>

    <!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Flip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Observer.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollToPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/Draggable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/EaselPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/PixiPlugin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/TextPlugin.min.js"></script>


    <!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/EasePack.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/CustomEase.min.js"></script>
    
    <!-- Mon script -->
    <script src="./scripts/mainscript.js"></script>
</body>
</html> 
avec ce style : 
@font-face {
    font-family: 'Kicker';
    src: url('./assets/fonts/kicker-black/KickerTrial-Black.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Kicker';
    src: url('./assets/fonts/kicker-black/KickerTrial-BlackItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Kicker';
    src: url('./assets/fonts/kicker-bold/KickerTrial-BlackSlanted.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* 
PPMori-Extralight
PPMori-ExtraLightItalic
PPMori-Regular
PPMori-RegularItalic
PPMori-SemiBold
PPMori-SemiBoldItalic
*/

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-ExtraLight.otf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-ExtraLightItalic.otf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-Regular.otf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-RegularItalic.otf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-SemiBold.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('./assets/fonts/pp-mori/PPMori-SemiBoldItalic.otf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --yellow: #E2FF08;
    --text-color: #FEFCE1;
    --text-color-secondary: #7F7E70;
    --text-color-tertiary: #56574E;
    --background-color: #000000;
    --background-secondary: #0E100F;
    --background-tertiary:#070808;
    --red: #ED1C24;
}

body{
    background-color: var(--background-color);
    position: relative;
    display: flex;
    justify-content: space-between;
    font-family: 'PP Mori', sans-serif;
    min-height: 100vh;
    max-height: 100vh;
    max-width: 100vw;
    overflow-x:hidden;
}

::-webkit-scrollbar {
    width: 5px; /* Largeur pour les barres de défilement horizontales */
    height: 4px; /* Hauteur pour les barres de défilement verticales */
}

/* Style pour le fond des barres de défilement */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 1rem;
}

/* Style pour les poignées de défilement */
::-webkit-scrollbar-thumb {
    background: var(--yellow);
    border-radius: 1rem;
}

/* Style pour les poignées de défilement au survol */
::-webkit-scrollbar-thumb:hover {
    filter: brightness(1.2);
}

.glass{
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.glass::before{
    content:"";
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #FFFFFF;
    border-radius: 50%;
    filter: blur(200px) opacity(0.5);
    z-index: -1;
}

body aside{
    z-index: 10;
    min-width: 40vw;
    width: 40%;
    max-width: 40vw;
    background-color: var(--yellow);
    max-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
}

body aside h2{
    white-space: nowrap;
    font-size: 9.375rem;
    position: relative;
    top: -2rem;
    text-wrap: nowrap;
    writing-mode: vertical-rl;
    font-family: 'Kicker';
    font-weight: 100;
}

body main{
    padding: 6rem 10rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:6rem;
}

body main .connection{
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

body main #inscription{
    opacity:0;
}

body main .container-connexion{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.logo{
    align-self: flex-start;
    height: 6rem;
}

body main form{
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    min-height: 100%;
    max-height: 100%;
    gap:2rem;
}

body main form legend{
    font-size: 3.125rem;
    font-family: "Kicker";
    font-weight: 100;
    color: var(--text-color);
}

body main form .top-content{
    display: flex;
    flex-direction: column;
    gap:3rem;
}

body main form .top-content .inputs{
    display: flex;
    flex-direction: column;
    gap:4rem;
}

body main form .bottom-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}

body main form .bottom-content button{
    border:none;
    cursor: pointer;
    background-color: transparent;
}

body main form .bottom-content .buttons{
    display: flex;
    gap: 1rem;
}

body main #connexion .bottom-content{
    flex-direction: row-reverse;
}

body main form .bottom-content .buttons button{
    cursor: pointer;
    display: flex;
    gap:1rem;
    background-color: var(--background-secondary);
    border: none;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    color:var(--yellow);
    font-family: 'PP Mori';
    font-weight: 400;
    min-width: 14rem;
    font-size: 1.1875rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
}

body main form .bottom-content .buttons button.secondary{
    color: var(--text-color);
    filter: brightness(0.8);
}

body main form .bottom-content .buttons button:hover{
    filter: brightness(0.8);
}


body main form .bottom-content .buttons button.secondary:hover{
    filter: brightness(0.6);
}

body main form .bottom-content .buttons img{
    height: 1rem;
    position: relative;
    bottom: 3%;
}

body main form .bottom-content .buttons button.secondary img{
    height: 1.5rem;
}

body main form .container-textfields{
    display: flex;
    gap: 2rem;
}

.text-field{
    width: 100%;
    display: flex;
    position: relative;
    padding: 1.625rem 1.875rem;
    color: var(--text-color-secondary);
}

.text-field img{
    height: 1.5rem;
}

.text-field input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-left: 6rem;
    background-color: transparent;
    border: none;
    border-bottom: 1.5px solid var(--text-color-secondary);
    outline: none;
    color: var(--text-color-secondary);
    font-family: 'PP Mori';
    font-weight: 300;
    font-size: 1.25rem;
    transition: all 0.2s ease-in-out;
}

.text-field.no-space input{
    padding-left: 1rem;
}

.text-field input:focus{
    border-bottom: 1.5px solid var(--yellow);
    transition: all 0.2s ease-in-out;
}

nav{
    position: relative;
    display: flex;
    background-color: var(--background-secondary);
    border-radius: 1rem;
    padding: 1rem;
    height: 5.1875rem;
    min-height: 5.1875rem;
    display: flex;
    align-self: flex-start;
}

nav ul{
    display: flex;
    gap: 0.85rem;
    height: 100%;
    list-style: none;
    z-index: 2;
}

nav ul li{
    list-style-type: none;
}

nav .active-square{
    position: absolute;
    width: 11.25rem;
    top:0.8rem;
    height: 3.5rem;
    z-index: 0;
    left: 1rem;
    background-color: var(--yellow);
    border-radius: 0.8rem;
}

nav ul li a {
    width: 11.25rem;
    text-decoration: none;
    color: var(--text-color);
    gap:0.7rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: 1rem;
}

nav ul li a svg{
    position: relative;
    bottom: 3%;
    height: 1.3rem;
}

body .left{
    padding: 3rem;
    width: 100%;
    display: flex;
    gap:2rem;
    flex-direction: column;
}


body .left header{
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4.7rem;
}

body .left header img{
    align-self: flex-start;
}

body .left .container-tabs{
    position: relative;
}

body .tab{
    position: absolute;
    padding:0;
    display: flex;
    flex-direction: column;
    gap:1.8rem;
    min-width: 65vw;
    height: 67vh;
    max-height: 67vh;
    overflow: auto;
    padding-right: 2rem;
    padding-bottom: 2rem;
}

#PageArtiste{
    position: absolute;
    opacity: 0;
    padding-right: 2rem;
    width: 100%;
    display: flex;
    gap: 1.15rem;
    height: 100%;
}

#PageArtiste .back-btn{
    align-self: flex-start;
    background-color: transparent;
    border: none;
    position: absolute;
    bottom:2rem;
    left:0;
    z-index: 100;
    cursor:pointer;
    transition: all 0.2s ease;
}

#PageArtiste .back-btn:hover{
    filter: opacity(0.4);
    transition: all 0.2s ease;
}

#PageArtiste .infos-artiste{
    display: flex;
    flex-direction: column;
    gap:1.375rem;
    width: 80%;
    position: sticky;
    bottom: 0;
}

#PageArtiste .infos-artiste .buttons{
    display: flex;
    gap:1rem;
}

#PageArtiste .infos-artiste .card-artiste{
    padding: 2rem;
    border-radius: 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    background-color: var(--background-tertiary);
}

#PageArtiste .infos-artiste .card-artiste .infos{
    display: flex;
    align-items: center;
    gap:2rem;
}

#PageArtiste .infos-artiste .card-artiste .infos .texts {
    color: var(--text-color);
    gap:0.5rem;
    display: flex;
    flex-direction: column;
}

#PageArtiste .infos-artiste .card-artiste .infos .texts h2{
    font-size: 2.5rem;
}

#PageArtiste .infos-artiste .card-artiste .infos .texts h4{
    filter: opacity(0.3);
    font-size: 0.9rem;
}

#PageArtiste .infos-artiste .card-artiste .container-cover{
    width: 10rem;
    min-width: 10rem;
    height: 10rem;
    min-height: 10rem;
    border-radius: 1rem;
    overflow: hidden;
}

#PageArtiste .infos-artiste .card-artiste .play-btn{
    align-self: flex-end;
}

#PageArtiste .main-content{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    gap:1.25rem;
    padding-bottom: 1.5rem;
}

#PageArtiste .main-content .content-block{
    height: 100%;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

#PageArtiste .main-content .content-block > section{
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
}

#PageArtiste .main-content .content-block #TopTitres{
    flex-direction: column;
    opacity: 0;
}

#PageArtiste .main-content .content-block #Albums{
    opacity: 0;
    flex-wrap: wrap;
    max-height: 100%;
    overflow-y:auto;
    padding-right: 1rem;
}

#PageArtiste .main-content .content-block #Albums .song-card{
    min-width: 0;
    max-width: 32%;
    padding: 1rem;
    min-height: 0;
    height: auto;
}

#PageArtiste .main-content .content-block #Albums .song-card .container-image{
    width: 100%;
    height: auto;
}

#PageArtiste .main-content .content-block #Albums .song-card .bottom-content{
    width: 100%;
}

body #SectionRecherche{
    gap:0;
    opacity: 0;
    overflow-x: hidden;
}

body #SectionRecherche .wrapper-recherche{
    display: flex;
    flex-direction: column;
    gap:2rem;
    max-width: 100%;
    position: absolute;
    padding-right: 2rem;
}

/*
pour rendre le header de la recherche sticky
body #SectionRecherche .wrapper-recherche .text-field{
    position: sticky;
    top:0;
    background-color: var(--background-color);
    z-index: 100;
} */

body #SectionPlaylists{
    display: flex;
    flex-direction: row;
    opacity: 0;
    padding-bottom: 2rem;
}

body #SectionPlaylists .left-content{
    display: flex;
    flex-direction: column;
    gap:2rem;
    max-width: 40%;
    width: 40%;
    position: sticky;
    top:0;
    z-index: 10;
}

body #SectionPlaylists .left-content .actions{
    display: flex;
    flex-direction: column;
    gap:1.5625rem;
}

body #SectionPlaylists .buttons{
    display: flex;
    gap:0.5rem;
}

.btn{
    cursor: pointer;
    display: flex;
    gap:1rem;
    background-color: var(--background-secondary);
    border: none;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    color:var(--text-color);
    font-family: 'PP Mori';
    font-weight: 400;
    font-size: 1rem;
    display: flex;
    min-width: 13rem;
    gap: 0.7rem;
    align-items: center;
    transition: all 0.2s ease-in-out;
}

.btn:hover{
    filter: opacity(0.8);
    transition: all 0.2s ease-in-out;
}

.btn.like svg{
    color: var(--red);
    fill: var(--red);
    width: 1.5rem;
}

.btn.playlist svg{
    color: var(--yellow);
    height: 1rem;
}

.btn.share svg{
    height: 1rem;
}

.btn.important{
    color: var(--yellow);
    padding: 1.2rem 1rem;
}

body .content-block{
    display: flex;
    flex-direction: column;
    background-color: var(--background-secondary);
    border-radius: 1rem;
    padding: 1.9rem 2.4rem;
    width: 100%;
    gap:2rem;
}

body .content-block > header{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    max-width: 100%;
    justify-content: space-between;
}

body .content-block h2, .results-section h2, .pop-up-container h2{
    display: flex;
    font-size: 3rem;
    align-items: center;
    gap:1.5rem;
    color: var(--text-color);
    white-space: nowrap;
    text-wrap: nowrap;
}

h2 img{
    height: 2.5rem;
}

body .content-block > header a{
    text-decoration: none;
    color: var(--text-color-secondary);
    font-size: 1.25rem;
    white-space: nowrap;
    text-wrap: nowrap;
}

body .content-block .content{
    display: flex;
    gap:1rem;
    overflow-x: auto;
    padding-bottom: 1.5rem;
}

#SectionPlaylists .current-display{
    width: 100%;
    position: relative;
}

#SectionPlaylists .play{
    height: 3rem;
}

#SectionPlaylists .content-block{
    background-color: var(--background-tertiary);
    width: 100%;
    position: absolute;
    gap:3rem;
    z-index: 1;
}

#SectionPlaylists .content-block.favoris{
    padding-top: 6rem;
    opacity: 0;
    z-index: -1;
}

#SectionPlaylists .current-display::after{
    content: "";
    height: 2rem;
    width: 1px;
    position: block;
    z-index: 100;
}

#SectionPlaylists .content-block .top-content{
    display: flex;
    flex-direction: column;
    gap: 2.375rem;
    width: 100%;
    position: relative;
}

#SectionPlaylists .content-block.favoris .top-content{
    padding-bottom: 1rem;
}

#SectionPlaylists .content-block .top-content .border{
    width: 100%;
    height: 2px;
    position: absolute;
    bottom: -1.5rem;
    left: 0;
    border-radius: 1rem;
}

#SectionPlaylists .content-block .top-content .border::before{
    filter: blur(10px) opacity(1);
}

#SectionPlaylists .content-block .top-content .album-infos{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    
}

#SectionPlaylists .content-block .top-content .album-infos .container-album{
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

#SectionPlaylists .content-block .top-content .album-infos .container-album .heart{
    color: var(--red);
    fill: var(--red);
    width: 4rem;
    height: 3rem;
}

#SectionPlaylists .content-block .top-content .album-infos .container-cover{
    overflow: hidden;
    height: 10rem;
    width: 10rem;
    border-radius: 1rem;
}

#SectionPlaylists .content-block .top-content .album-infos .texts{
    display: flex;
    flex-direction: column;
    color: var(--text-color);
    gap: 0.3rem;
}

#SectionPlaylists .content-block .top-content .album-infos .texts h3{
    font-size: 3rem;
}

#SectionPlaylists .content-block .top-content .album-infos .texts h4{
    filter: opacity(0.7);
    font-weight: 200;
}

#SectionPlaylists .content-block > .menu-dots{
    position: absolute;
    right: 1.5rem;
    top:1.5rem;
}

#SectionPlaylists .content-block .buttons{
    gap:1rem;
}

#SectionPlaylists .content-block .buttons button{
    padding: 1.3rem 1.5rem;
    color: var(--text-color-secondary);
}

#SectionPlaylists .content-block .songs{
    display: flex;
    flex-direction: column;
    gap:0.7rem;
}

.song-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:0.75rem;
    height:18rem;
    min-height: 18rem;
    border-radius: 0.625rem;
    min-width: 15rem;
    padding:1.25rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    position: relative;
}

.song-card.artiste{
    gap:1.5rem;
}

.song-card .background{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(255, 255, 255, 0.6);
    opacity: 0;
    border-radius: 50%;
    filter: blur(400px);
}

.song-card .container-image{
    height: 12.5rem;
    width: 12.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.3rem;
    display: flex;
    overflow: hidden;
    position: relative;
}

.song-card.artiste .container-image{
    height: 10rem;
    width: 10rem;
}

.song-card .container-image .cover{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.song-card .container-image .play{
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    height: 4rem;
    transform: translateY(5rem);
}

.song-card .bottom-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 12.5rem;
}

.song-card .bottom-content .texts{
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap:0.1rem;
}

.song-card .bottom-content h4{
    font-size: 1.25rem;
}

.song-card .bottom-content h5{
    filter: opacity(0.7);
    font-size: 0.9rem;
    font-weight: 100;
}

.song-card .bottom-content .heart{
    height: 1.2rem;
}

body .content-player{
    background-color: var(--background-secondary);
    min-width: 30vw;
    width: 30vw;
    max-width: 30vw;
    border-top-left-radius: 1rem;
    border-bottom-left-radius: 1rem;
}

body .content-player .inner-content{
    min-height: 100%;
    overflow-y: auto;
    gap:2.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 3rem 1.5rem;
}

body .content-player .cover-container{
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 1rem;
}

body .content-player .cover-container .cover{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

body .content-player .top-content{
    display: flex;
    flex-direction: column;
    gap:1rem;
}

body .content-player .media-infos{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body .content-player .media-infos .current-media{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}

body .content-player .media-infos .current-media .heart{
    height: 2rem;
}

body .content-player .media-infos .current-media .texts{
    display: flex;
    flex-direction: column;
    color: var(--text-color);
}

body .content-player .media-infos .current-media .texts h3{
    font-weight: 300;
    font-size: 2rem;
}

body .content-player .media-infos .current-media .texts h4{
    font-weight: 100;
    filter: opacity(0.7);
    font-size: 1.5rem;
}

body .content-player .media-infos .actions{
    display: flex;
    flex-direction: column;
    gap:1.6875rem;
}

body .content-player .media-infos .actions .buttons{
    display: flex;
    gap: 2rem;
    justify-content: center;
}

body .content-player .media-infos .actions .buttons button{
    background-color: transparent;
    border: none;
}

body .content-player .media-infos .actions .buttons #random img{
    height: 1rem;
}

body .content-player .media-infos .actions .buttons #repeat img
{
    height: 0.7rem;
}

body .content-player .media-infos .actions .buttons .main-button img {
    height: 1.5rem;
}

body .content-player .media-infos .actions .buttons #playPause img{
    height: 4rem;
}

body .content-player .media-infos .actions .buttons .main-buttons{
    display: flex;
    gap: 1rem;
}

body .content-player .media-infos .actions .progress{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap:1rem;
    color: var(--text-color-secondary);
    align-items: center;
}

body .content-player .media-infos .actions .progress .bar{
    border-radius: 0.7rem;
    width: 100%;
    height: 5px;
    background-color: var(--text-color-tertiary);
}

body .content-player .media-infos .actions .progress .bar .inner{
    border-radius: inherit;
    width: 60%;
    height: 5px;
    background-color: var(--text-color);
}

body .content-player .file-attente{
    background-color: var(--background-tertiary);
    width: 100%;
    max-height: 50vh;
    border-radius: 1rem;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

body .content-player .file-attente .content{
    display: flex;
    flex-direction: column;
    gap:0.625rem;
    padding-right: 0.6rem;
}

.artiste-row{
    display: flex;
    position: relative;
    justify-content: space-between;
    padding: 0.5rem 1.5rem 0.5rem 0.5rem;
    border-radius: 1rem;
    min-height: 4rem;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.artiste-row:hover{
    filter: brightness(0.6);
    transition: all 0.2s ease-in-out;
}

.artiste-row.with-dots{
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}

.artiste-row .menu-dots{
    padding: 0.5rem;
    height: 1.5rem;
}

.artiste-row .infos{
    display: flex;
    align-items: center;
    gap:1rem;
}

.artiste-row .infos .texts{
    display: flex;
    gap:0.3rem;
    flex-direction: column;
    color:var(--text-color)
}

.artiste-row .infos .texts h4{
    font-size: 1rem;
    font-weight: 300;
}

.artiste-row .infos .texts h5{
    filter: opacity(0.7);
    font-size: 0.875rem;
    font-weight: 200;
}

.artiste-row.playlist .texts{
    gap: 0.6rem
}

.artiste-row.playlist .texts h5{
    font-size: 0.8rem;
    max-width: 15vw;
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artiste-row .infos .container-cover{
    height: 3.5rem;
    width: 3.5rem;
    min-width: 3.5rem;
    overflow: hidden;
    border-radius: 0.8rem;
}

.artiste-row.playlist .infos .container-cover{
    height: 5rem;
    width: 5rem;
}

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

body .content-player .file-attente .content .artiste-row .actions, .pop-up-container .artiste-row .actions{
    display: flex;
    align-items: center;
    gap:2rem;
}

body .content-player .file-attente .content .artiste-row .actions .btn-file-attente{
    height: 1rem;
}

.artiste-wrapper{
    position: relative;
}

.artiste-wrapper .menu{
    position: absolute;
    top:2rem;
    right: 1rem;
    background-color: #212121;
    filter: opacity(1);
    z-index: 10;
    padding: 1rem;
    display: none;
    border-radius: 1rem;
}

.artiste-wrapper .menu ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:0.2rem;
}

.artiste-wrapper .menu ul li{
    width: 100%;
}

.artiste-wrapper .menu ul li button{
    display: flex;
    align-items: center;
    background-color: transparent;
    border: none;
    color: var(--text-color);
    font-family: 'PP Mori';
    width: 100%;
    justify-content: flex-start;
    font-size: 1rem;
    gap:1rem;
    padding: 1rem 1rem;
    cursor: pointer;
    border-radius: 1rem;
    transition: all 0.2s ease-in-out;
}

.artiste-wrapper .menu ul li button:hover{
    background-color: #353535;
    transition: all 0.2s ease-in-out;
}

.artiste-wrapper .menu ul li button svg{
    width: 1rem;
    height: 1rem;
}

body .content-player .file-attente .content .artiste-row .actions .edit-list{
    display: flex;
    gap:1.25rem;
}

/* recherche */

#SectionRecherche{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

#SectionRecherche .resultat h2 img{
    align-self: flex-start;
}

#SectionRecherche .resultat {
    padding-bottom: 2rem;
    max-height: 100%;
    overflow-x:hidden;
    display: flex;
    flex-direction: column;
    gap:3.75rem
}

#SectionRecherche .resultat .results-section{
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

#SectionRecherche .resultat .results-section.scrollable .content{
   overflow-x: auto;
   padding-bottom: 1rem;
}

#SectionRecherche .resultat .results-section .content{
    display: flex;
    gap: 1.5rem;
}

#SectionRecherche .resultat .results-section .content .best-result{
    display: flex;
    flex-direction: column;
    gap:1.5rem;
    padding: 1.5rem;
    min-width: 40%;
    max-width: 40%;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#SectionRecherche .resultat .results-section .content .best-result .expand{
    height: 2rem;
}

#SectionRecherche .resultat .results-section .content .best-result:hover{
    filter: brightness(0.7);
    transition: all 0.2s ease-in-out;
}

#SectionRecherche .resultat .results-section .content .best-result::before{
    filter: blur(300px) opacity(0.5);
}

#SectionRecherche .resultat .results-section .content .best-result .container-cover{
    width: 8rem;
    height: 8rem;
    overflow: hidden;
    border-radius: 0.8rem;
}

#SectionRecherche .resultat .results-section .content .best-result .container-cover img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#SectionRecherche .resultat .results-section .content .best-result .infos{
    display: flex;
    justify-content: space-between;
}

#SectionRecherche .resultat .results-section .content .best-result .infos .texts{
    display: flex;
    flex-direction: column;
    gap:0.3rem;
    color: var(--text-color);
}

#SectionRecherche .resultat .results-section .content .best-result .infos .texts h4 {
    font-size: 1.25rem;
    font-weight: 300;
}

#SectionRecherche .resultat .results-section .content .best-result .infos .texts h5{
    filter: opacity(0.7);
    font-size: 0.875rem;
    font-weight: 200;
}

#SectionRecherche .resultat .results-section .content .other-results{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#SectionRecherche .resultat .results-section .content .other-results .artiste-row{
    cursor: pointer;
}

/* pop up */

.pop-up-container{
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    display: none;
}

.pop-up-container .new-playlist{
    background-color: var(--background-tertiary);
    padding: 2.5rem;
    border-radius: 1rem;
    min-width: 50vw;
    display: flex;
    flex-direction: column;
    gap:1.75rem;
}

.pop-up-container .new-playlist header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pop-up-container .new-playlist header #btnClosePopUp{
    background:transparent;
    border:none;
    cursor: pointer;
    padding: 0.5rem;
}

.pop-up-container .new-playlist header #btnClosePopUp img{
    width: 1.25rem;
    height: 1.25rem;
}

.pop-up-container .new-playlist form{
    display: flex;
    flex-direction: column;
    gap:2.625rem;
}

.pop-up-container .new-playlist form .top-content{
    display: flex;
    align-items: flex-end;
    gap:1.75rem;
}

.pop-up-container .new-playlist form .top-content > .container-cover{
    width: 9rem;
    min-width: 9rem;
    height: 9rem;
    min-height: 9rem;
    border-radius: 1rem;
    overflow: hidden;
}

.pop-up-container .new-playlist form .bottom-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem
}

.pop-up-container .new-playlist form .bottom-content .left-content{
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    width: 100%;
}

.pop-up-container .new-playlist form .bottom-content h3{
    font-size: 1.25rem;
    color: var(--text-color-secondary);
}

.pop-up-container .new-playlist form .suggestions{
    display: flex;
    gap:0.8rem;
    max-height: 30vh;
    overflow-y: auto;
    flex-direction: column;
    padding-right: 1rem;
}

@media (max-width: 1600px) {
    html {
      font-size: 14px;
    }

    .artiste-row .actions .edit-list{
        display: none !important;
    }

  }

/* Point de rupture pour les écrans LG */
@media (max-width: 1199px) {
    html {
      font-size: 14px;
    }

    .content-player{
        display: none;
    }

    body aside{
        display: none;
    }
  }
  
  /* Point de rupture pour les écrans MD */
  @media (max-width: 991px) {
    html {
      font-size: 12px;
    }
  }
  
  /* Point de rupture pour les écrans SM */
  @media (max-width: 767px) {
    html {
      font-size: 10px;
    }
  }
  
  /* Point de rupture pour les écrans XS */
  @media (max-width: 576px) {
    html {
      font-size: 8px;
    }
  }
  
  @media (max-width: 450px) {
    html {
      font-size: 8px;
    }
  } 
et j'aimerais tout réadapter pour obtenir la même navbar mais verticalement pour cette page :
 <?php

use DB\DataBaseManager;
$manager = new DataBaseManager();

$artistDB = $manager->getArtistDB();
$liste_artistes = $artistDB->findAll();

$pageSize = 10;
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$offset = ($page - 1) * $pageSize;

$sonDB = $manager->getSonDB();
$liste_sons = $sonDB->findAll($offset, $pageSize);

$genreDB = $manager->getGenreDB();
$liste_genres = $genreDB->findAll();

$utilisateurDB = $manager->getUtilisateurDB();
$liste_utilisateurs = $utilisateurDB->findAll();

$playlistDB = $manager->getPlaylistDB();
$liste_playlists = $playlistDB->findAll();

$albumDB = $manager->getAlbumDB();
$liste_albums = $albumDB->findAll();

?>

<aside>
    <div class="left">
        
        <a href="index.php?action=accueil" class="btn-retour">
            <svg width="45" height="39" viewBox="0 0 45 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M19.5 3L3 19.5M3 19.5L19.5 36M3 19.5H41.5" stroke="#FEFCE1" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            Retour application
        </a>
        <nav>
            <ul>
                <li>
                    <a href="" id="goToMenuPrincipal">
                        <svg width="27" height="17" viewBox="0 0 27 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.83325 1.2085H25.1666M1.83325 8.50016H25.1666M1.83325 15.7918H25.1666" stroke="#010101" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Menu principal
                    </a>
                </li>
                <li>
                    <a href="" id="goToArtistes">
                        <svg width="30" height="23" viewBox="0 0 30 23" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M23.9866 21.7082H26.1667C27.7775 21.7082 29.1809 20.3606 28.6692 18.8332C27.8893 16.5055 25.9706 15.0979 22.5977 14.6103M18.146 9.84388C18.5703 9.97801 19.0564 10.0415 19.6042 10.0415C22.0347 10.0415 23.25 8.7915 23.25 5.6665C23.25 2.5415 22.0347 1.2915 19.6042 1.2915C19.0564 1.2915 18.5703 1.355 18.146 1.48913M10.8542 14.4165C16.6277 14.4165 19.4474 16.1838 20.1527 19.7183C20.3689 20.8015 19.4379 21.7082 18.3333 21.7082H3.375C2.27043 21.7082 1.33943 20.8015 1.5556 19.7183C2.26098 16.1838 5.08064 14.4165 10.8542 14.4165ZM10.8542 10.0415C13.2847 10.0415 14.5 8.7915 14.5 5.6665C14.5 2.5415 13.2847 1.2915 10.8542 1.2915C8.42361 1.2915 7.20833 2.5415 7.20833 5.6665C7.20833 8.7915 8.42361 10.0415 10.8542 10.0415Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Artistes
                    </a>
                </li>
                <li>
                    <a href="" id="goToSons">
                        Sons
                    </a>
                </li>
                <li>
                    <a href="" id="goToGenres">
                        <svg width="29" height="29" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M5.75 14.5C5.75 11.2613 7.50962 8.43351 10.125 6.92059M23.25 14.2123C23.25 17.451 21.4904 20.2788 18.875 21.7917M27.625 14.5C27.625 21.7487 21.7487 27.625 14.5 27.625C7.25126 27.625 1.375 21.7487 1.375 14.5C1.375 7.25126 7.25126 1.375 14.5 1.375C21.7487 1.375 27.625 7.25126 27.625 14.5ZM17.4167 14.5C17.4167 16.1108 16.1108 17.4167 14.5 17.4167C12.8892 17.4167 11.5833 16.1108 11.5833 14.5C11.5833 12.8892 12.8892 11.5833 14.5 11.5833C16.1108 11.5833 17.4167 12.8892 17.4167 14.5Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Genres
                    </a>
                </li>
                <li>
                    <a href="" id="goToUtilisateurs">
                        <svg width="23" height="27" viewBox="0 0 23 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18.2405 24.7722C19.8065 24.7722 21.1404 23.4819 20.7854 21.9567C19.9025 18.1628 16.9499 16.2658 11.1519 16.2658C5.35387 16.2658 2.40129 18.1628 1.51836 21.9567C1.16341 23.4819 2.49732 24.7722 4.06329 24.7722H18.2405Z" stroke="#7F7E70" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.1519 12.0127C13.9873 12.0127 15.4051 10.5949 15.4051 7.05063C15.4051 3.50633 13.9873 2.08861 11.1519 2.08861C8.31645 2.08861 6.89873 3.50633 6.89873 7.05063C6.89873 10.5949 8.31645 12.0127 11.1519 12.0127Z" stroke="#7F7E70" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Utilisateurs
                    </a>
                </li>
                <li>
                    <a href="" id="goToPlaylists">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 3C1 1.89543 1.89543 1 3 1H4C5.10457 1 6 1.89543 6 3V4C6 5.10457 5.10457 6 4 6H3C1.89543 6 1 5.10457 1 4V3Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 3C10 1.89543 10.8954 1 12 1H13C14.1046 1 15 1.89543 15 3V4C15 5.10457 14.1046 6 13 6H12C10.8954 6 10 5.10457 10 4V3Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M1 12C1 10.8954 1.89543 10 3 10H4C5.10457 10 6 10.8954 6 12V13C6 14.1046 5.10457 15 4 15H3C1.89543 15 1 14.1046 1 13V12Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M10 12C10 10.8954 10.8954 10 12 10H13C14.1046 10 15 10.8954 15 12V13C15 14.1046 14.1046 15 13 15H12C10.8954 15 10 14.1046 10 13V12Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Playlists
                    </a>
                </li>
                <li>
                    <a href="" id="goToAlbums">
                        <svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.8125 21.8333C8.8125 24.1345 7.06361 26 4.90625 26C2.74889 26 1 24.1345 1 21.8333C1 19.5321 2.74889 17.6667 4.90625 17.6667C7.06361 17.6667 8.8125 19.5321 8.8125 21.8333ZM8.8125 21.8333V3.57439C8.8125 3.05949 9.20349 2.62875 9.71598 2.57906L24.9035 1.10633C25.4912 1.04934 26 1.51124 26 2.10166V20.1667M26 20.1667C26 22.4679 24.2511 24.3333 22.0938 24.3333C19.9364 24.3333 18.1875 22.4679 18.1875 20.1667C18.1875 17.8655 19.9364 16 22.0938 16C24.2511 16 26 17.8655 26 20.1667Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Albums
                    </a>
                </li>
            </ul>
            <div class="active-square" id="activeSquare"></div>
        </nav>

        <div class="actions">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 6V14M14 10H6M10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1C5.02944 1 1 5.02944 1 10C1 14.9706 5.02944 19 10 19Z" stroke="#E2FF08" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
    </div>
</aside> 
@font-face {
    font-family: 'Kicker';
    src: url('../fonts/kicker-black/KickerTrial-Black.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Kicker';
    src: url('../fonts/kicker-black/KickerTrial-BlackItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Kicker';
    src: url('../fonts/kicker-bold/KickerTrial-BlackSlanted.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-ExtraLight.otf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-ExtraLightItalic.otf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-Regular.otf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-RegularItalic.otf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-SemiBold.otf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'PP Mori';
    src: url('../fonts/pp-mori/PPMori-SemiBoldItalic.otf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --yellow: #E2FF08;
    --text-color: #FEFCE1;
    --text-color-secondary: #7F7E70;
    --background-color: #000000;
    --background-secondary: #070808;
}

body{
    background-color: var(--background-color);
    position: relative;
    display: flex;
    justify-content: space-between;
    font-family: 'PP Mori', sans-serif;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x:hidden;
}

nav{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--background-secondary);
    border-radius: 1rem;
    padding: 1rem;
    height: 5.1875rem;
    min-height: 5.1875rem;
    align-self: flex-start;
}

nav ul{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    height: 100%;
    list-style: none;
    z-index: 2;
}

nav ul li{
    list-style-type: none;
}

nav .active-square{
    position: absolute;
    width: 11.25rem;
    top:0.8rem;
    height: 3.5rem;
    z-index: 0;
    left: 1rem;
    background-color: var(--yellow);
    border-radius: 0.8rem;
}

nav ul li a {
    width: 11.25rem;
    text-decoration: none;
    color: var(--text-color);
    gap:0.7rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-wrap: nowrap;
    font-size: 1rem;
}

nav ul li a svg{
    position: relative;
    bottom: 3%;
    height: 1.3rem;
}

body .left{
    width: 100%;
    display: flex;
    gap:2rem;
    flex-direction: column;
}

body .left nav{
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4.7rem;
}

body .left img{
    align-self: flex-start;
}