/*----------------ENTÊTE----------------*/

header {
	width: 100%; /*largeur*/
    height: 60px; /*hauteur*/
}


/*----------------LOGO----------------*/

nav .logo {
	position: absolute; /*type de positionnement*/ 
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	text-decoration: none; /*texte decoration*/
	list-style: none; /*marqueur style*/
	top: 50%; /*position en partant du haut*/
    left: 12px; /*position en partant de la gauche*/
	transform:  translateY(-50%); /*transforme*/
	color: var(--couleur-blanc); /*police couleur*/
}

nav .logo svg {
	width: 60px; /*largeur*/
	height: 100%; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
}


/*----------------MENU DE NAVIGATION----------------*/

nav {
	width: 100%; /*largeur*/
	height: inherit; /*hauteur*/
	margin: auto; /*marge extérieur*/
	position : fixed; /*type de positionnement*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/
	align-items: center; /*centre verticalement le contenu*/
	background-color: var(--couleur-menu); /*couleur du fond*/
	z-index: 1; /*position au dessus ou au dessous*/
}

nav > ul {
	margin: auto; /*marge extérieur*/
	list-style: none; /*marqueur style*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/
	align-items: center; /*centre verticalement le contenu*/
	gap: 25px; /*espace entre les éléments*/
}

nav li {
	margin: auto; /*marge extérieur*/
	list-style: none; /*marqueur style*/
}

nav .separation {
	width: 3px; /*largeur*/
	height: 30px; /*hauteur*/
	margin: auto; /*marge extérieur*/
	background-color: var(--couleur-blanc); /*couleur du fond*/
}

nav .titre-menu {
	margin: auto; /*marge extérieur*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	font-family: var(--police-sous-titre); /*police type*/
	font-size: var(--taille-police-18); /*police taille*/
	text-align: center; /*texte alignement*/
	text-transform: uppercase; /*texte transformer*/
	text-decoration: none; /*texte decoration*/ 
	letter-spacing: 1.2pt; /*espace entre lettre*/
	transition: color 0.5s; /*transiton*/
	color: var(--couleur-blanc); /*police couleur*/
}

nav .titre-menu:hover {
	color: var(--couleur-survol); /*police couleur*/
}

nav li svg {
	width: 14px; /*largeur*/
	height: 100%; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	margin-left: 6px; /*marge extérieur gauche*/
	transition: transform 0.25s; /*transiton*/  
}

nav ul li:hover svg {
	transform: rotate(180deg); /*transforme*/
}


/*----------------MENU CARD----------------*/

.sous-menu {
    width: auto; /*largeur maximum*/
	margin: 20px 0px; /*marge extérieur*/
	padding: 30px 40px; /*marge intérieur*/
	position: absolute; /*type de positionnement*/       
    top: 60px; /*position en partant du haut*/
    left: 50%; /*position en partant de la gauche*/
    transform: translateX(-50%); /*transforme*/
	border-radius: 30px; /*bordure arrondi*/
	border: 1px solid var(--couleur-gris-150); /*bordure tout en un*/
    background-color: var(--couleur-blanc); /*couleur du fond*/
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2); /*bordure ombre*/
	list-style: none; /*marqueur style*/
	opacity: 0; /*opacité*/
    visibility: hidden; /*visibilité*/
    transition: opacity 0.3s ease, visibility 0.3s ease; /*transiton*/

	width: 65%; /*largeur maximum*/
	columns: auto; /*nombre de colonne*/
    column-width: 250px; /*largeur minimal*/
	column-gap: 1.5rem; /*espace entre colonne*/

	/*max-width: calc(4 * 275px + 3 * 20px); /*largeur maximum*/
	/*display: grid; /*apparition des balises*/
	/*grid-template-columns: repeat(auto-fit, 275px); /*colonnes égales et s'ajuste automatiquement*/
	/*gap: 8px 20px; /*espace entre les éléments*/
}

.sous-menu::before {
	content: ""; /*remplace un élément avec une valeur générée*/
	position: absolute; /*position au dessus ou au dessous*/
	top: -30px; /*position en partant du haut*/
	bottom: -15px; /*position en partant du bas*/
	left: -40px; /*position en partant de la gauche*/
	right: -40px; /*position en partant de la droite*/
	background: transparent; /*image de fond tout en un*/
	z-index: -1; /*position au dessus ou au dessous*/
}

.sous-menu li {
	width: 100%; /*largeur maximum*/
	margin: auto; /*marge extérieur*/
	list-style: none; /*marqueur style*/
}

.sous-menu li a {
	margin: auto; /*marge extérieur*/
	padding: 5px; /*marge intérieur*/
   	padding-left: 10px; /*marge intérieur gauche*/
    border-radius: 10px; /*bordure arrondi*/
	border: 1px solid transparent; /*bordure tout en un*/ 
    display: block; /*apparition des balises*/
	font-family: var(--police-texte); /*police type*/
	font-size: var(--taille-police-14); /*police taille*/
	text-align: left; /*texte alignement*/
	text-transform: capitalize; /*texte transformer*/
	text-decoration: none; /*texte decoration*/ 
	color: var(--couleur-noir); /*police couleur*/
}

.sous-menu a:hover {
    border-color: var(--couleur-gris-150); /*bordure couleur*/
}

nav ul li:hover .sous-menu, nav ul li:focus-within .sous-menu {
	opacity: 1;/*opacité*/
    visibility: visible; /*visibilité*/
}


/*----------------MENU BURGER----------------*/

.menu-burger {
	width: 20px; /*largeur*/
	height: 20px; /*hauteur*/
	position : absolute; /*type de positionnement*/
	right: 30px; /*position en partant de la droite*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	text-decoration: none; /*texte decoration*/
	list-style: none; /*marqueur style*/
	cursor: pointer; /*type de curseur*/
	z-index: 0; /*position au dessus ou au dessous*/

	display: none; /*apparition des balises*/
}

.menu-burger svg {
	width: 100%; /*largeur*/
	height: 100%; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	transition: color 0.5s; /*transiton*/
	color: var(--couleur-blanc); /*couleur*/
}

.fermer {
	width: 40px; /*largeur*/
	height: 40px; /*hauteur*/
	position : absolute; /*type de positionnement*/
	top: 16px;
	right: 10px; /*position en partant de la droite*/
	display: flex; /*apparition des balises*/
	justify-content: center; /*centre horizontalement le contenu*/ 
	align-items: center; /*centre verticalement le contenu*/
	cursor: pointer; /*type de curseur*/
	background: transparent; /*image de fond tout en un*/

	display: none; /*apparition des balises*/
}

.croix-fermer {
	width: 20px; /*largeur*/
	height: 100%; /*hauteur*/
	margin: 0; /*marge extérieur*/
	padding: 0; /*marge intérieur*/
	color: red; /*couleur*/
}