/* ===================================================================
   En-tête et menu (menu.php)
   Chargé APRÈS style.css : il complète et surcharge les règles du
   header sans qu'il soit nécessaire de modifier style.css.
   =================================================================== */

/* -------------------------------------------------------------------
   Correctif : dans style.css, .topbar et .main-nav ont un point-virgule
   manquant après "background: #333", ce qui annule la déclaration.
   On les redéfinit proprement ici.
   ------------------------------------------------------------------- */

.topbar{
	background: #0b0b0d;
	border-bottom: 1px solid var(--border);
}

.main-nav{
	background: rgba(18,18,20,.94);
	border-bottom: 1px solid var(--border);
}

/* -------------------------------------------------------------------
   Bandeau logo : logo | recherche | contact direct
   ------------------------------------------------------------------- */

.header-main-inner{ gap: 28px; }

.search-form{ flex: 1; max-width: 480px; }
.search-form input{ padding: 13px 16px; }
.search-form button{ padding: 0 20px; }
.search-form button:hover{ background: #3a70ee; }

.mi{
	width: 20px;
	height: 20px;
	fill: currentColor;
	flex-shrink: 0;
}

.header-contact{
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}

.header-phone{
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}

.header-phone-icon{
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f1f1f3;
	color: #121214;
	transition: background .15s ease, color .15s ease;
}
.header-phone:hover .header-phone-icon{ background: #121214; color: #fff; }

.header-phone-text{
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.header-phone-text small{
	font-size: .78rem;
	color: #5c5c63;
}
.header-phone-text strong{
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	color: #121214;
}

.header-whatsapp{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	background: #0e7d42;
	color: #fff;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--radius);
	transition: background .15s ease;
}
.header-whatsapp:hover{ background: #0b6a37; }

/* -------------------------------------------------------------------
   Navigation : soulignement ambre + page active + bouton devis
   ------------------------------------------------------------------- */

.nav-menu{ align-items: center; gap: 4px; }

.nav-menu li a{
	position: relative;
	padding: 12px 16px;
	letter-spacing: .03em;
}

.nav-menu li a::after{
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 5px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .2s ease;
}

.nav-menu li a:hover{
	color: #fff;
	background: none;
}
.nav-menu li a:hover::after,
.nav-menu li a.active::after{ transform: scaleX(1); }
.nav-menu li a.active{ color: #fff; }

.nav-menu li.nav-cta{ margin-left: 14px; }
.nav-menu li.nav-cta a{
	padding: 10px 20px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	transition: background .15s ease;
}
.nav-menu li.nav-cta a::after{ display: none; }
.nav-menu li.nav-cta a:hover{
	background: #ffc450;
	color: var(--accent-ink);
}

/* Éléments réservés au mobile : masqués sur ordinateur */
.nav-quick,
.header-devis{ display: none; }

/* -------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------- */

@media (max-width: 780px){

	/* Barre du haut : le slogan était masqué, la barre paraissait vide.
	   On le réaffiche en petit, à côté des réseaux sociaux. */
	.topbar-inner{ gap: 12px; padding: 7px 24px; }
	.topbar-social{ gap: 10px; }
	.topbar-social .ic{ width: 24px; height: 22px; }
	.topbar-slogan{
		display: block;
		font-size: .76rem;
		line-height: 1.3;
		text-align: right;
		color: rgba(255,255,255,.85);
	}

	/* Bandeau logo : logo plus compact + bouton devis à droite, recherche dessous */
	.header-main-inner{ padding: 12px 24px 14px; gap: 12px; }
	.brand-logo{ height: 64px; }

	.header-contact{ display: none; }

	.header-devis{
		display: inline-flex;
		align-items: center;
		order: 1;
		margin-left: auto;
		padding: 11px 16px;
		background: var(--accent);
		color: var(--accent-ink);
		font-size: .88rem;
		font-weight: 600;
		text-decoration: none;
		border-radius: var(--radius);
		transition: background .15s ease;
	}
	.header-devis:hover{ background: #ffc450; }

	.search-form{ flex: 0 0 100%; max-width: none; order: 3; }
	.search-form input{ padding: 12px 14px; font-size: .9rem; }

	/* Barre sticky : Appeler et WhatsApp avec leur libellé, toujours accessibles */
	.nav-quick{
		display: flex;
		gap: 8px;
		margin-right: auto;
	}
	.nav-quick-btn{
		height: 40px;
		padding: 0 14px;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		background: #333;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		color: #fff;
		font-size: .88rem;
		font-weight: 600;
		text-decoration: none;
	}
	.nav-quick-btn.wa{
		background: #0e7d42;
		border-color: transparent;
	}

	/* Tiroir du menu */
	.nav-menu li a::after{ display: none; }
	.nav-menu li a.active{ box-shadow: inset 3px 0 0 var(--accent); }

	.nav-menu li.nav-cta{ margin: 20px 0 0; }
	.nav-menu li.nav-cta a{
		display: block;
		padding: 14px 12px;
		text-align: center;
		border-bottom: none;
		border-radius: var(--radius);
	}
}

/* Très petits écrans : icônes seules pour ne pas déborder */
@media (max-width: 359px){
	.nav-quick-btn{ width: 40px; padding: 0; justify-content: center; }
	.nav-quick-btn span{ display: none; }
	.header-devis{ padding: 10px 12px; font-size: .82rem; }
}