.site-header-banner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 10px 1em 6px;
}

.site-header-photo {
	flex: 0 0 auto;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	object-fit: cover;
	/* Cadre le visage : la photo d'origine est en portrait, le buste est en bas */
	object-position: center 10%;
	border: 2px solid #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* La photo et le titre forment un bloc, centré ensemble sur la page */
.site-header-titles {
	flex: 0 1 auto;
	min-width: 0;
	text-align: center;
}

.site-header-name {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: #222;
	font-family: Georgia, 'Times New Roman', serif;
}

.site-header-tagline {
	margin: 2px 0 0;
	font-size: 0.82rem;
	letter-spacing: 0.18em;
	color: #2929dd;
	text-transform: uppercase;
	font-weight: 500;
}

.navMenu{
	margin: 0;
	text-align: center;
}
.ulMenu{
	margin: 0;
	padding: 0;
}
.liMenu{
	display: inline-block; /* Affiche les éléments côte à côte */
	list-style: none; /* Enlève les puces */
}
.aMenu{
	text-decoration: none; /* Pas de soulignement */
	padding: 10px; /* Espacement interne */
	position: relative; /* Permet d'ajouter un effet avec ::after */
	transition: color 0.3s ease; /* Animation couleur au survol */
	margin: 0 15px; /* Espace horizontal entre les liens */
	color: black; /* Couleur du texte */
}

.aMenu::after {
	content: ''; /* Nécessaire pour créer un élément avec ::after */
	position: absolute; /* Positionnement absolu par rapport à .aMenu */
	bottom: 5px; /* Positionné à 5px du bas */
	left: 0; /* Aligné à gauche */
	width: 0; /* Largeur initiale à 0 pour l'animation */
	height: 2px; /* Hauteur de la ligne de soulignement */
	background-color: #000000; /* Couleur de la ligne de soulignement */
	transition: width 0.3s ease; /* Animation de la largeur au survol */
}

.aMenu:hover{
	color: #010407; /* Couleur plus foncée au survol */
}

.aMenu:hover::after {
	width: 100%; /* La ligne de soulignement prend toute la largeur au survol */
}

/* Bouton "Prendre un rendez-vous" — défini ici pour être stylé sur
   toutes les pages qui incluent le menu (et pas seulement l'accueil) */
.rdv-button {
	background: linear-gradient(90deg, #4A90E2 60%, #357ABD 100%);
	color: #fff;
	font-weight: 600;
	border: none;
	border-radius: 8px;
	padding: 12px 32px;
	min-width: 160px;
	font-size: 17px;
	box-shadow: 0 2px 8px rgba(74,144,226,0.08);
	cursor: pointer;
	transition: background 0.2s, box-shadow 0.2s;
	text-decoration: none; /* évite le soulignement par défaut du lien */
	display: inline-block;
	text-align: center;
}
.rdv-button:hover {
	box-shadow: 0 4px 16px rgba(74,144,226,0.12);
}

.liMenu.liMenu-rdv {
	display: none;
}

.rdv-menu-btn {
	flex-shrink: 0;
	/* Sorti du flux pour que le menu reste centré sur la page tout en
	   gardant le bouton aligné à droite */
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
}

.menu-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1em;
	min-height: 54px;
}

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
}
.hamburger span {
	width: 28px;
	height: 3px;
	background-color: #333;
	border-radius: 2px;
	transition: all 0.3s ease;
}
.hamburger.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
	opacity: 0;
}
.hamburger.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 768px) {
	.menu-wrapper {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.navMenu {
		display: none;
		width: 100%;
		text-align: right;
		border-top: 1px solid #eee;
		order: 3;
	}

	.navMenu.active {
		display: block;
	}

	.ulMenu {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1em;
		margin: 0;
		padding: 1em;
		list-style: none;
	}

	.liMenu {
		display: block;
	}

	.liMenu.liMenu-rdv {
		display: block;
	}

	.hamburger {
		display: flex;
	}

	.rdv-menu-btn {
		display: none;
	}
}

@media (max-width: 600px) {
	.site-header-banner {
		gap: 10px;
	}
	.site-header-photo {
		width: 46px;
		height: 46px;
	}
}

@media (max-width: 420px) {
	.site-header-tagline {
		letter-spacing: 0.12em;
	}
}