/**************************************************************
 Osteo Bordeaux Sud (www.osteo-bordeaux-sud.fr)
 Copyright 2026-2026 Develop'it
 
 Version : 1.0.0
 Date    : 10/03/2026
 Fichier : css/Entete.css
**************************************************************/

/*************************** Entete ***************************/
#Entete {
	display:block;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0;
	z-index: 2001;
	height:100px;
	/* pointer-events: none; */
	padding: 0px;
	/* background-color:rgba( 229,   0 ,125, 1.0); */
	/* background-color:rgba( 250, 253, 254, 1.0); */
	border-bottom: 1px solid hsl(var(--clr-neutral) / 0.2);
	background-color:hsl(var(--clr-background) / 1.0);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}
#Entete .ZonePhoto {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
#Entete .Photo {
	pointer-events: auto;
	width: 80px;
	height: 80px;
	border-radius: 10em;
	border: 3px solid hsl(var(--clr-background));
	transition: all 0.3s ease;
}
#Entete .ZonePhoto .Nom {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.0em;
	color: hsl(var(--clr-primary));
}
#Entete .ZonePhoto .Profession {
	font-size: 14px;
	font-style: italic;
	color: hsl(var(--clr-neutral));
}

#Entete .ZoneMenuHaut {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

#Entete .ZoneBouton {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap:3px;
}
#Entete .Telephone {
	font-size: 13px;
	font-weight: 600;
	color:hsl(var(--clr-primary));
	display: inline-flex;
	align-items: center;
	gap:5px;
}
#Entete .Telephone svg {
	width: 1em;
	height: 1em;
	fill:currentColor;
}
#Entete .btPrimary {
	font-size: 14px;
	padding: .5em 1em;
}






#Entete.EnHaut {
	height:70px;
	/* padding: 3px; */

	/* background-color:rgba( 229,   0 ,125, 0.8); */
	/* background-color:rgba( 250, 253, 254, 0.8); */
	background-color:hsl(var(--clr-background) / 0.8);
}
#Entete.EnHaut .Photo {
	width: 65px;
	height: 65px;
}

@media only screen and (min-width:1024px) { /* large */
}

@media only screen and (max-width:1023px) { /* medium */
	#Entete {
		/* position: fixed; */
		height: 70px;
	}
	#Entete.EnHaut .Photo {
		/* margin-top: 5px;
		margin-left: 5px; */
	}
	#Entete .Photo {
		width: 80px;
		height: 80px;
		/* margin-top: 10px;
		margin-left: 10px; */
	}
}

@media only screen and (max-width:639px) { /* small */
	#Entete, #Entete.EnHaut {
		position: fixed;
		height: 60px;
	}
	#Entete .ZonePhoto {
		gap: 0px;
	}
	
	#Entete.EnHaut .Photo,
	#Entete .Photo {
		width: 50px;
		height: 50px;
		/* margin-top: 5px;
		margin-left: 5px; */
	}
}