/*****************************************************************************************************
Style du Header

Structure du fichier:
    I. Général
    II. Logo (mise en page du logo)
    III. Header de la page
        a. Titre
        b. Recherche
        c. Menu
            1.  Notification
            2.  Utilisateur
    IV. Mobile        
    V. Media queries

version: 1.0
date: 07.12.23
Créé par: Michaël Fiechter
*****************************************************************************************************/
/* -------I Général------- */
.header_navbar {
	/*border : 1px solid red;*/
	display: flex;
	/*justify-content: space-between;*/
}
/* -------II Logo------- */
.header_logo {
	width: 240px !important;
	/*box-shadow: -2px 0px 4px 10px rgba(0, 0, 0, .05);*/
	/* padding-top: 20px; */
	/*float: left;*/
	/* il y a un problème lorsque le parent "header_navbar" est en flex. le logo n'accepte pas la width
                et lorsque l'on resize la fenêtre il change la width, pour une raison inconnue. J'ai donc enlevé
                le flex et donc j'ai mis "header_logo" en float, le resultat est le même, mais sans l'erreur */
}

.header_logo a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	/* pour que la hauteur du "header_logo" corresponde à la hauteur du "header_page" */
}

.logo {
	height: 46px;
	margin: 0 10px;
}

.header_logo .logo .text {
	fill: #000;
}

.Header_logo .logo .tick {
	fill: #08a045;
}

/* -------III Header de la page------- */
.header_page {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	/*padding-top: 20px;*/
	padding-left: 40px;

}

.burger_menu_mobile {
	display: none;
}

/* a. Titre */
.header_title {
	margin-left: 20px;
	white-space: nowrap;
	cursor: default;
}

.header_title h1 {
	font-size: 22px;
	font-weight: 600;
}

/* b. searchbar */
.header_searchbar {
	height: max-content;
	min-width: 175px;
	width: 33vw;
	max-width: 520px;
	display: flex;
	margin: 0 20px;
	position: relative;
}

.header_searchbar input {
	min-width: 175px;
	outline: 1px solid var(--primary-900);
	border: none;
	border-radius: 2em;
	padding: 1rem;
	width: 33vw;
	color: var(--blue-gray-900);
	font-size: 1rem;
	height: 40px;
	min-height: unset;
	margin: 0;
}

.header_searchbar input:focus {
	outline: 2px solid var(--primary-900);
	box-shadow: 4px 6px 18px 0px rgba(96, 125, 139, 0.34);
}

.header_searchbar button {
	position: absolute;
	right: -1px;
	top: 0;
	color: var(--white);
	border: 1px solid var(--primary-900);
	border-radius: 20px;
	padding: 0 1rem;
	background-color: var(--primary-900);
	height: 100%;
	width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header_searchbar button:hover {
	transform: scale(1.1);
}

/* c. menu */
.header_menu {
	/*justify-self: flex-end;*/
	display: flex;
	align-items: center;
	margin-right: 20px;
}

/*.header_menu>div {
	margin-left: 20px;
	position: relative*/
		/* pour que les deux dropdowns s'alignent aux boutons respectifs */
/*}*/

h2.titre_dropdown {
	font-size: 1.1rem;
	line-height: 1.1rem;
	font-weight: 600;
	margin: 18px 20px 10px 20px;
}


/* -------1. Notifications------- */

.header_notif {
	padding: 17px;
	/* ce padding rajoute une marge d'erreur 
  pour l'utilisateur lorsqu'il "mouseover"
  le bouton "user-profile" et veut aller
  dans le dropdown */
}

/* bouton et compteur (counter) */
.button_notif {
	position: relative;
	/* permet au Counter(enfant) de s'aligner correctement */
}

.button_notif img {
	min-width: 30px;
}

.notif_counter {
	display: none;
	position: absolute;
	top: -12px;
	right: -7px;
	height: 22px;
	width: 22px;
	background-color: var(--primary-900);
	color: white;
	border: 2px solid white;
	border-radius: 11px;
	padding-top: 2px;
	font-size: 10px;
	font-weight: 800;
	text-align: center;
	box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.15);
}

/* Dropdown */
.notif_dropdown {
	display: none;
	position: absolute;
	width: 460px;
	top: 60px;
	right: 17px;
	/*pour annuler le padding mise au parent et aligner au bord du bloc*/
	max-height: 65vh;
	overflow-y: auto;
	background-color: white;
	color: var(--Primary-Variant);
	font-weight: 500;
	z-index: 2;
	box-shadow: 0px 8px 16px 5px rgba(0, 0, 0, 0.15);
	border-radius: 10px;
}

/* notification */
.notification {
	padding: 0px 20px;
	height: 120px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.notification:hover {
	background-color: var(--primary-050);
}

.notification:hover span {
	color: var(--primary-900);
}

.notification:hover svg {
	stroke: var(--primary-900);
}

/* boutton fermer */
.notification_close {
	position: relative;
}

.notification_close button {
	position: absolute;
	top: 20px;
	right: 0px;
	padding: 0px;
	background-color: transparent;
	border: none;
	font-size: 20px;
}

.notification_close button svg {
	width: 13px;
	height: auto;
	stroke: black;
	margin: 0px;
}

/* contenu de la notification */
.notification_content {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 20px;
}

.notification_content a {
	background-color: #FDE18D;
	color: var(--primary-900, #2F40CD);
	font-style: normal;
	font-weight: 700;
	font-size: var(--font-size-400);
	text-decoration: none;
	border: 3px solid var(--primary-900);
	border-radius: 30px;
	height: 43px;
	width: 43px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.notification_content_description {
	max-width: 300px;
	font-size: 0.9em;
}

/* indication de temps */
.notification_time {
	position: relative;
}

.notification_time span {
	position: absolute;
	top: -30px;
	right: 0px;
	font-size: 0.8em;
}

/* 2. Utilisateur */
.header_user_menu {
	padding: 10px;
	/* ce padding rajoute une marge d'erreur 
  pour l'utilisateur lors qu'il "mouseover"
  le bouton "user-profile" et veut aller
  dans le dropdown */
}

/* Dropdown menu user */
.header_user_menu ul {
	position: absolute;
	top: 60px;
	right: 10px;
	/* pour annuler le padding mis au parent et aligner au bord du bloc */
	display: none;
	padding: 0;
	margin: 0;
	z-index: 1;
	list-style: none;
	white-space: nowrap;
	border-radius: 10px;
	background: var(--white, #FFF);
	box-shadow: 0px 8px 16px 5px rgba(0, 0, 0, 0.15);
}

.header_user_menu ul.is_visible {
	display: block;
	visibility: visible;
}

.header_user_menu ul>:last-child:hover {
	border-radius: 0px 0px 10px 10px;
}

.header_user_menu ul li a {
	display: flex;
	align-items: center;
	font-weight: 500;
	padding: 20px 20px;
}

.header_user_menu ul li a:hover {
	background-color: var(--primary-050);
	overflow: inherit;
}

.header_user_menu ul li a img,
.header_user_menu ul li a svg {
	max-width: none;
	/* permet de respecter le padding-right venant du bloc parent */
	margin-right: 10px;
}

.is_visible {
	display: block;
	visibility: visible;
}

.searchbar {
	display: block;
}

/****************************Masquer Form recherche header ********************************/
/* .header_searchbar {
	display: none;
} */
/* ------- M E D I A   Q U E R I E S ------- */
/* ex-600px */
@media only screen and (max-width: 1023px) {
	.header_page {
		padding-top: 0;
	}
	.header_navbar {
		display: flex;
		justify-content: center;
		align-items: center;
		/*position: absolute;*/
		top: 0;
		left: 0;
		width: 100vw;
		height: 55px;
		/*margin-top: 55px;*/
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	}
	.header_menu {
		position: absolute;
		right: 0;
		margin-right: 0;
	}
	.header_menu>div {
		margin-left: 0;
	}
	.header_title {
		display: none;
	}
	.header_notif {
		margin-right: 20px;
		padding: 0;
	}
	.logo {
		width: auto;
		height: 40px;
		margin: 0;
	}
	.header_logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding-top: 0;
		box-shadow: none;
		/* z-index: -10; */
	}
	.header_logo a {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		display: block;
		height: auto;
	}
	.burger_menu_mobile {
		display: block;
		margin-left: 20px;
	}
	.header_user_menu {
		padding: 0;
		margin: 0px 20px;
	}
	.button_notif{
		display: flex;
		align-items: center;
		height: 55px;
	}
	.button_notif svg {
		width: 18px;
		height: 18px;
	}
	.button_notif svg path {
		fill: var(--black);
	}
	.notif_counter {
		top: 4px;
 		right: -11px;
		background-color: var(--black);
	}
	.header_searchbar {
		position: initial;
	}
	.header_searchbar button{
		position: absolute;
		top: 10px;
		right: 20px;
		width: 30px;
		height: 30px;
		padding: 0;
		background-color: var(--white);
		border: none;
		border-radius: 30px;
		
	}
	.searchbar {
		display: none;
		position: fixed;
		top: 123px;
		right: 20px;
		/* voir fichier header.js pour la gestion de l'apparition de la searchbar en version mobile*/
	}
	.search-icon-background {
		display: none;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 63px;
		right: 0;
		width: 57px;
		height: 57px;
		background-color: var(--white);
	}
	.notif_dropdown {
		width: calc(100vw - 85px);
		top: 55px;
		right: 2px;
	}
	.notification_close button {
		top: 0;
	}
	.notification_content a {
		width: 25px;
		height: 25px;
		font-size: 10px;
		border: 2px solid var(--primary-900);
	}
	.header_user_menu ul {
		top: 40px;
		right: 0;
	}
}