/* =====================================================================
   header-common.css  —  ANS Agency
   Header CLAIR commun à toutes les pages :
   - pleine largeur, collé en haut, sans coins arrondis
   - fond blanc, logo foncé et liens foncés (lisibles sur clair)
   - hauteur réduite, comportement sticky (.active-sticky-header)
   - soulignement du lien actif + style du menu mobile + titre d'intro
   Fichier additif, chargé APRÈS custom.css. Tout est surchargé proprement
   (sélecteurs scopés au header, spécificité alignée sur le template).
   ===================================================================== */

/* Collé en haut */
header.main-header{
	top: 0;
}

/* Pleine largeur, sans arrondi + fond blanc */
header.main-header .header-sticky,
header.main-header .header-sticky.active{
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 0;
	background: var(--white-color);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 1px solid var(--divider-color);
}

/* Hauteur du header réduite */
header.main-header .navbar{
	padding: 12px 0;
}

/* Logo foncé pour rester visible sur fond blanc */
header.main-header .navbar-brand img{
	filter: brightness(0) saturate(100%);
	opacity: 0.9;
}

/* Logo vectoriel commun : dimensions fiables malgré l'absence de width/height
   dans le fichier SVG source. */
header.main-header .navbar-brand img[src$="ansAGENCYlogo.svg"]{
	display: block;
	width: 140px;
	height: 52px;
	max-width: none;
	filter: none;
	opacity: 1;
}

.footer-logo img[src$="anslogowhite.svg"]{
	display: block;
	width: 140px;
	height: auto;
}

/* Liens foncés, survol en bleu */
header.main-header .main-menu ul li a{
	color: var(--primary-color);
}
header.main-header .main-menu ul li a:hover,
header.main-header .main-menu ul li a:focus{
	color: var(--accent-color);
}

/* ---------- Lien actif : petit soulignement bleu ------------------- */
header.main-header .main-menu ul li a.active{
	position: relative;
	color: var(--accent-color);
}
header.main-header .main-menu ul li a.active::after{
	content: '';
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 3px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent-color);
}

/* ---------- Mobile : hamburger en barres bleues, sans encadré ------ */
.slicknav_btn{
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.slicknav_icon .slicknav_icon-bar{
	background-color: var(--accent-color);
}

/* Menu ouvert : carte claire avec ombre */
.slicknav_menu{
	background: var(--white-color);
	border-radius: 12px;
	box-shadow: 0 16px 40px -12px rgba(3, 23, 29, 0.28);
	overflow: hidden;
	/* margin-top: 8px; */
}
.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	color: black;
}
.slicknav_nav a:hover,
.slicknav_nav a:focus,
.slicknav_nav .slicknav_row:hover{
	background-color: rgba(11, 190, 226, 0.10);
	color: var(--accent-color);
}
.slicknav_nav a.active{
	font-weight: 700;
}

/* Accueil : état sticky lisible au scroll */
header.main-header.header-prime .header-sticky.active{
	background: var(--white-color) !important;
	border-bottom-color: var(--divider-color);
}

header.main-header.header-prime .header-sticky.active .navbar-brand img{
	filter: brightness(0) saturate(100%);
	opacity: 0.9;
}

header.main-header.header-prime .header-sticky.active .main-menu ul li a{
	color: var(--primary-color) !important;
}

header.main-header.header-prime .header-sticky.active .main-menu ul li a:hover,
header.main-header.header-prime .header-sticky.active .main-menu ul li a:focus,
header.main-header.header-prime .header-sticky.active .main-menu ul li a.active{
	color: var(--accent-color) !important;
}

/* ---------- Titre d'intro de page (style commun, cf. Contact) ------- */
.page-intro-title{
	position: relative;
	padding-bottom: 28px;
}
.page-intro-title .intro-accent{
	color: var(--accent-color);
}
.page-intro-title::after{
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 64px;
	height: 3px;
	border-radius: 3px;
	background: var(--accent-color);
	transform: translateX(-50%) scaleX(0);
	transform-origin: center;
	animation: pageIntroUnderline 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.35s;
}
@keyframes pageIntroUnderline{
	to{ transform: translateX(-50%) scaleX(1); }
}
