/***********************/
/***** Navigation ******/
/***********************/

body>nav {
    position: relative;
    top: 0;
    z-index: 1;

    gap : clamp(var(--espace-petit), 2.5vw, var(--espace-moyen));

    background-color: var(--couleur-blanc);
}

body>nav img {
    height: 80px;
    padding: 0 var(--taille-grand) ;
}

body>nav * {
    color: var(--couleur-vert);
}

body>nav a,
.bouton-deroulant,
.billetterie {
    text-decoration: none;
	display: flex;
	align-items: center;
    
    text-transform: uppercase;
    border: 2px solid transparent;
    background-color: var(--couleur-blanc);
}

body>nav a,
.bouton-deroulant {
    font-size: clamp(var(--taille-moyen) , 4vw, var(--taille-grand));
}

.lien-accueil {
    display: none;
}

.billetterie {
    background-image: url("../img/img-general/fond-ticket-vert.svg");
    background-position: 10% 50%;
    background-size: 160px;
    background-repeat: no-repeat;
    
    width: 220px;
    margin-left: auto;
    padding-left: 26px;
    
    color: var(--couleur-blanc);
    font-size: var(--taille-moyen);
    text-align: center;
    letter-spacing: 1px;
}

.billetterie:hover {
    background-color: var(--couleur-blanc);
    background-image: url("../img/img-general/fond-ticket.svg");
    
    font-size: var(--taille-moyen);
}

/**************************/
/***** Menu déroulant *****/
/**************************/

body>nav a:hover, 
.menu-deroulant:hover ,
.bouton-deroulant:hover {
    color: var(--couleur-blanc);
    background-color: var(--couleur-vert);

    font-size: var(--taille-grand);
}

.menu-deroulant {
	display: flex;
	position: relative;
}

.menu-deroulant-contenu {
    display: flex;
    flex-direction: column;
    position: absolute;

    min-width: 300px;
	top: 100%;
    z-index: 1;
    
    box-shadow: 0px 8px 8px 0px rgb(0, 0, 0, 0.5);
}

.menu-deroulant-contenu>a {
    font-size: var(--taille-petit);
    padding: var(--espace-petit) var(--espace-moyen);

    background-color: var(--couleur-gris);
    color: var(--couleur-blanc);
}

.menu-deroulant-contenu>a:hover {
    font-size: var(--taille-petit);
}

.menu-deroulant:not(:hover) .menu-deroulant-contenu {
	 opacity: 0;
	 pointer-events: none;
}