/* styles.css */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

:root {
    --navbr-select-color: darkgoldenrod;

    --page-header-color: darksalmon;
    --page-body-color: #bb93bb;
    --page-footer-color: yellow;
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

nav {
    background-color: #333;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu > li {
    position: relative; /* Nécessaire pour positionner le sous-menu */
    padding-left: 2px;  /* Espace pour l'icône */
}

.menu > li::after {
    content: "gg"; /* Par défaut, rien n'est affiché */
    position: absolute;
    color:white;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.3s ease; /* Animation fluide */
  }
  
  .menu > li:hover::after2 {
    content: "toto"; /* Chemin de l'icône */
    opacity: 1; /* Affiche l'icône au survol */
    content: "\f206"; /* Unicode d'une icône utilisateur */
    font-family: "Font Awesome 5 Free"; /* Nom de la police */
    font-weight: 900; /* Poids nécessaire pour l'icône */
  }

.menu > li > a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 15px 15px;
    margin-top: 2px;
    transition: background 1s;
}

.menu > li > a:hover {
    background-color: #575757;
    color: red;
}

/* Style des sous-menus */
.submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%; /* Positionné juste sous le parent */
    left: 0;
    background-color: #444;
    display: none; /* Caché par défaut */
    min-width: 150px;
}

.submenu li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    transition: background 0.3s;
}

.submenu li a:hover {
    background-color: red; /*  #575757; */
}

/* Afficher le sous-menu au survol */
.menu > li:hover .submenu {
    display: block;
}

.logo {
    height: 100%;
    display: flex;
    align-items: stretch;
    font-size:  clamp(1.5rem, 5vw, 3rem);
    padding-left: 5px;
}

.logo a {
    transition: color 0.5s;
}

.logo a:hover {
    color: var(--navbr-select-color);

}