j'ai un fichier php : 
<?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="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.22816 1.73682L2.00009 7.96489M2.00009 7.96489L8.22816 14.193M2.00009 7.96489H24.4211" stroke="currentColor" stroke-width="2.49123" 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="currentColor" 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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Artistes
                    </a>
                </li>
                <li>
                    <a href="" id="goToSons">
                        <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="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        Sons
                    </a>
                </li>
                <li>
                    <a href="" id="goToGenres">
                        <svg width="23" height="20" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.29175 7.04183H15.8751M1.29175 1.2085H15.8751M1.29175 12.8752H10.0417M15.8751 12.8752V18.7085L21.7084 15.7918L15.8751 12.8752Z" stroke="currentColor" 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="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>
                        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="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>
                        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="currentColor" 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>

<div class="right">
    <!-- barre de recherche -->
    <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>
    </div>

    <div class="container-tabs">
        <main>
            <section id="pagePrincipale" class="page">
                <header>
                    <h2>Menu principal</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
                <div class="menu">
                    <button class="admin-content">
                        <svg width="29" height="29" 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>
                        <div class="textes">
                            <h3>Artistes</h3>
                            <p>Les artistes de l'application</p>
                        </div>
                    </button>
                    <button class="admin-content">
                        <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>
                        <div class="textes">
                            <h3>Sons</h3>
                            <p>Les sons de l'application</p>
                        </div>
                    </butt>
                    <button class="admin-content">
                        <svg width="29" height="29" viewBox="0 0 23 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1.29175 7.04183H15.8751M1.29175 1.2085H15.8751M1.29175 12.8752H10.0417M15.8751 12.8752V18.7085L21.7084 15.7918L15.8751 12.8752Z" stroke="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Genres</h3>
                            <p>Les genres de l'application</p>
                        </div>
                    </button>
                    <button class="admin-content">
                        <svg width="29" height="29" 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="#FEFCE1" 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="#FEFCE1" stroke-width="2.83544" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Utilisateurs</h3>
                            <p>Les utilisateurs de l'application</p>
                        </div>
                    </button>
                    <button class="admin-content">
                        <svg width="29" height="29" 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>
                        <div class="textes">
                            <h3>Playlists</h3>
                            <p>Les playlists de l'application</p>
                        </div>
                    </button>
                    <button class="admin-content">
                        <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="#FEFCE1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        <div class="textes">
                            <h3>Albums</h3>
                            <p>Les albums de l'application</p>
                        </div>
                    </button>
                </div>
            </section>

            <section id="pageArtistes" class="page">
                <header>
                    <h2>Artistes</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
            <section id="pageSons" class="page">
                <header>
                    <h2>Sons</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
            <section id="pageGenres" class="page">
                <header>
                    <h2>Genres</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
            <section id="pageUtilisateurs" class="page">
                <header>
                    <h2>Utilisateurs</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
            <section id="pagePlaylists" class="page">
                <header>
                    <h2>Playlists</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
            <section id="pageAlbums" class="page">
                <header>
                    <h2>Albums</h2>
                    <svg width="29" height="29" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M37.6118 9.82166L27.9072 14.9928C32.319 9.33028 28.353 1.28109 19.1767 0V9.98935C15.8932 3.95635 6.60488 3.25634 0.923272 9.82361L10.2961 14.8173C2.99181 14.4254 -2.30948 21.4977 1.01413 29.3226L10.8413 24.0871C6.34922 29.619 9.45097 38.5008 19.1746 39V28.1059C21.8685 34.7941 32.0717 37.0091 37.5188 29.3226L27.2966 23.8766C34.9199 25.066 42.0996 18.019 37.6118 9.82361V9.82166Z" fill="#E2FF08"/>
                    </svg>
                </header>
            </section>
        </main>
    </div>
</div>
 
un fichier css : 
@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:hidden;
    margin: 0;
    padding: 0;
}

nav {
    position: relative;
    display: flex;
    background-color: var(--background-secondary);
    border-radius: 1rem;
    padding: 1rem;
    min-height: 100%;
}

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

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

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


nav ul li a {
    text-decoration: none;
    color: var(--text-color);
    gap: 0.7rem;
    height: 3.5rem;
    max-height: 3.5rem;
    display: flex;
    width: 15.5rem;
    align-items: center;
    white-space: nowrap;
    font-size: 1rem;
    padding: 1rem;
}

nav ul li a svg {
    position: relative;
}

body .left{
    position: relative;
    width: 15rem;
    height: 100%;
    display: flex;
    gap: 5rem;
    flex-direction: column;
    background-color: var(--background-secondary); 
}

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

.actions {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1rem;
}

.actions a {
    text-decoration: none;
    font-size: 1rem;
    margin-left: 1rem;
}


.btn-retour {
    cursor: pointer;
    display: flex;
    gap:1rem;
    background-color: var(--background-secondary);
    border: none;
    padding: 1.5rem 1rem;
    border-radius: 1rem;
    color:var(--yellow);
    font-family: 'PP Mori';
    font-weight: 300;
    width: 13rem;
    height: 4.4375rem;
    font-size: 0.95rem;
    display: flex;
    gap: 0.7rem;
    align-items: center;
    text-decoration: none;
    background-color: #0E100F;
    margin: 1rem 1rem;
}

.btn-retour a:hover{
    filter: brightness(0.8);
}

.right {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#recherche {
    background-color: #070808;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    margin-left: 0.7rem;
    z-index: 2;
}

.text-field{
    width: 100%;
    display: flex;
    position: relative;
    padding: 1.625rem 1.875rem;
    background-color: #070808;
    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;
}

h2 {
    font-family: 'PP Mori', sans-serif;
    font-size: 3rem;
    font-weight: 300;
    color: var(--text-color);
    margin: 3rem 1rem;
}

header {
    display: flex;
    align-items: center;
    padding-left: 1.5rem
}

.menu {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1.5rem;
}

.admin-content {
    margin-top: 1rem;
    background-color: #070808;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24vw;
    height: 25vh;
    margin-left: 2rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
}

.textes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 4.5rem;
}

.textes h3 {
    margin-top: 1rem;
    font-family: "PP Mori";
    font-weight: 300;
    color: #FEFCE1;
    font-size: 2rem;
    opacity: 50%;
}

.textes p {
    font-family: "PP Mori";
    font-size: 0.875rem;
    color: #FEFCE1;
    opacity: 30%;
    margin-top: 0.5rem;
}

.admin-content svg {
    width: 5rem;
    height: 4.5rem;
}

#pagePrincipale {
    opacity: 1;
    display: block;
}

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


et un fichier js : 
const activeSquare = document.querySelector("#activeSquare");
const goToMenuPrincipal = document.querySelector("#goToMenuPrincipal");
const goToArtistes = document.querySelector("#goToArtistes");
const goToSons = document.querySelector("#goToSons");
const goToGenres = document.querySelector("#goToGenres");
const goToUtilisateurs = document.querySelector("#goToUtilisateurs");
const goToPlaylists = document.querySelector("#goToPlaylists");
const goToAlbums = document.querySelector("#goToAlbums");

const sectionMenuPrincipal = document.querySelector("#pagePrincipale");
const sectionMenuArtistes = document.querySelector("#pageArtistes");
const sectionMenuSons = document.querySelector("#pageSons");
const sectionMenuGenres = document.querySelector("#pageGenres");
const sectionMenuUtilisateurs = document.querySelector("#pageUtilisateurs");
const sectionMenuPlaylists = document.querySelector("#pagePlaylists");
const sectionMenuAlbums = document.querySelector("#pageAlbums");

function changeCurrentMenu(e, index) {
    e?.preventDefault();

    function clearActiveSections() {
        if (sectionMenuPrincipal.classList != null)
            sectionMenuPrincipal.classList.remove("active-section");
        if (sectionMenuArtistes.classList != null)
            sectionMenuArtistes.classList.remove("active-section");
        if (sectionMenuSons.classList != null)
            sectionMenuSons.classList.remove("active-section");
        if (sectionMenuGenres.classList != null)
            sectionMenuGenres.classList.remove("active-section");
        if (sectionMenuUtilisateurs.classList != null)
            sectionMenuUtilisateurs.classList.remove("active-section");
        if (sectionMenuPlaylists.classList != null)
            sectionMenuPlaylists.classList.remove("active-section");
        if (sectionMenuAlbums.classList != null)
            sectionMenuAlbums.classList.remove("active-section");
    }

    const curSection = document.querySelector(".active-section");
    let curIndex = -1;
    if (e) {
        const curSectionName = curSection.id.split("page")[1];

        curIndex = curSectionName == "Principale" ? 0 : curSectionName == "Artistes" ? 1 : curSectionName == "Sons" ? 2 : curSectionName == "Genres" ? 3 : curSectionName == "Utilisateurs" ? 4 : curSectionName == "Playlists" ? 5 : 6;
        if (e.target.id.split("goTo")[1] == curSectionName) return;
    }

    const menuItemHeight = 3.5;

    const menuItemMargin = 0.85;

    const startPosition = 1;

    const position = startPosition + index * (menuItemHeight + menuItemMargin);

    gsap.to(activeSquare, { top: `${position}rem`, duration: 0.6, ease: "power4.out" });

    const menuItems = [goToMenuPrincipal, goToArtistes, goToSons, goToGenres, goToUtilisateurs, goToPlaylists, goToAlbums];
    menuItems.forEach((menuItem, i) => {
        gsap.to(menuItem, { color: i === index ? "#0E100F" : "#FEFCE1", duration: 0.6, ease: "power4.out" });
    });
    

    switch(index) {
        case 0:
            gsap.to(goToMenuPrincipal, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuPrincipal, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});
            clearActiveSections();
            sectionMenuPrincipal.classList.add("active-section");
            break;

        case 1:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuArtistes, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuArtistes.classList.add("active-section");
            break;

        case 2:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuSons, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuSons.classList.add("active-section");
            break;

        case 3:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuGenres, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuGenres.classList.add("active-section");
            break;

        case 4:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuUtilisateurs, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuUtilisateurs.classList.add("active-section");
            break;
        case 5:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#0E100F", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuPlaylists, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuPlaylists.classList.add("active-section");
            break;
        case 6:
            gsap.to(goToMenuPrincipal, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToArtistes, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToSons, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToGenres, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToUtilisateurs, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToPlaylists, {color: "#FEFCE1", duration: 0.6, ease:"power4.out"});
            gsap.to(goToAlbums, {color: "#0E100F", duration: 0.6, ease:"power4.out"});

            gsap.fromTo(sectionMenuAlbums, {opacity: 0, y: index < curIndex ? "100vw" : "-100vw"}, {opacity: 1, y: 0, duration: 0.6, zIndex: 1, ease:"power4.out"});
            gsap.to(curSection, {opacity:0, y: index < curIndex ? "-100vw" : "100vw", duration:0.6, zIndex: -1, ease: "power4.out"});

            clearActiveSections();
            sectionMenuAlbums.classList.add("active-section");
            break;
    }
}

changeCurrentMenu(null, 0);

goToMenuPrincipal.addEventListener('click', (e) => changeCurrentMenu(e,0));
goToArtistes.addEventListener('click', (e) => changeCurrentMenu(e,1));
goToSons.addEventListener('click', (e) => changeCurrentMenu(e,2));
goToGenres.addEventListener('click', (e) => changeCurrentMenu(e,3));
goToUtilisateurs.addEventListener('click', (e) => changeCurrentMenu(e,4));
goToPlaylists.addEventListener('click', (e) => changeCurrentMenu(e,5));
goToAlbums.addEventListener('click', (e) => changeCurrentMenu(e,6));

je ne sais pas utiliser gsap, mais j'aimerais apprendre à l'utiliser. tu vois j'ai des boutons dans le menu principal de ma page, qui est une page admin d'une application spotify. J'aimerais qu'en cliquant sur un élément, le bouton s'enfonce et ensuite la page s'ouvre en partant du bouton, jusqu'à arriver à la taille initiale, comment faire ?