/* ============================================================
   Header — luxe sobre, sticky, accents gold
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--c-bg);
	transition: box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
	border-bottom: 1px solid var(--c-line);
}
.site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(20px);
	box-shadow: 0 4px 24px rgba(10, 10, 10, 0.04);
}

/* === Mode transparent : header SUPERPOSÉ au hero photo === */
/* La classe .has-transparent-header est ajoutée au body via JS quand un .hero existe. */

/* Le hero remonte SOUS le header. Calc = topbar (~38px) + header-main (--header-h). */
body.has-transparent-header .site-main {
	margin-top: calc(-1 * (var(--header-h) + 38px));
}
body.has-transparent-header .hero {
	padding-top: calc(var(--header-h) + 38px + clamp(0.5rem, 2vw, 1.5rem));
	min-height: calc(76vh + var(--header-h) + 38px);
}

body.has-transparent-header .site-header:not(.is-scrolled) {
	background: transparent !important;
	border-bottom-color: transparent !important;
}
body.has-transparent-header .site-header:not(.is-scrolled) .topbar {
	background: rgba(10, 10, 10, 0.4);
	backdrop-filter: blur(8px);
	border-bottom-color: transparent;
}
body.has-transparent-header .site-header:not(.is-scrolled) .header-main {
	border-bottom: 0;
}
/* Liens nav blancs sur transparent */
body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu a,
body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu--fallback a {
	color: rgba(255, 255, 255, 0.92);
}
body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu a:hover,
body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu--fallback a:hover {
	color: #fff;
}
/* Toggle mobile blanc */
body.has-transparent-header .site-header:not(.is-scrolled) .nav-toggle span {
	background: #fff;
}
/* Switch logo light/dark */
.autocentro-logo__img--dark { display: none; }
body.has-transparent-header .site-header:not(.is-scrolled) .autocentro-logo__img--light {
	display: none;
}
body.has-transparent-header .site-header:not(.is-scrolled) .autocentro-logo__img--dark {
	display: block;
}

/* Topbar */
.topbar {
	background: var(--c-ink);
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.8125rem;
	border-bottom: 1px solid rgba(227, 6, 19, 0.2);
}
.topbar__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 38px;
	gap: var(--space-4);
}
.topbar__contact { display: flex; gap: var(--space-5); align-items: center; }
.topbar__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.7);
	transition: color var(--t-fast);
	font-weight: 400;
}
.topbar__item:hover { color: var(--c-gold); }
.topbar__icon { display: inline-flex; color: var(--c-gold); opacity: 0.85; }
.topbar__lang { display: flex; align-items: center; gap: var(--space-3); }
.topbar__lang ul { display: flex; gap: 0; }
.topbar__lang ul li a {
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	padding: 4px 12px;
	transition: color var(--t-fast);
}
.topbar__lang ul li.current-lang a,
.topbar__lang ul li a:hover { color: var(--c-gold); }
.topbar__lang ul li + li { border-left: 1px solid rgba(255, 255, 255, 0.15); }

@media (max-width: 640px) {
	.topbar__item--hide-mobile { display: none; }
	.topbar__contact { gap: var(--space-3); }
}

/* Header principal — grid 3 colonnes : logo / nav centrée / socials */
.header-main { background: transparent; }
.header-main__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: var(--header-h);
	gap: var(--space-5);
}
.header-main__brand   { justify-self: start; }
.primary-nav          { justify-self: center; }
.header-main__socials { justify-self: end; }

.autocentro-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.autocentro-logo img,
.autocentro-logo__img {
	max-height: 56px;
	width: auto;
}

/* Navigation */
.primary-nav {
	display: flex;
	align-items: center;
	gap: var(--space-7);
}
.primary-nav .nav-menu,
.primary-nav .nav-menu--fallback {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}
.primary-nav .nav-menu a,
.primary-nav .nav-menu--fallback a {
	display: inline-block;
	padding: 0.625rem 0;
	font-family: var(--ff-body);
	font-weight: 500;
	color: var(--c-ink-2);
	font-size: 0.9375rem;
	letter-spacing: 0;
	text-transform: none;
	position: relative;
	transition: color var(--t-fast);
}
.primary-nav .nav-menu a::after,
.primary-nav .nav-menu--fallback a::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t-base);
}
.primary-nav .nav-menu a:hover,
.primary-nav .nav-menu .current-menu-item > a,
.primary-nav .nav-menu--fallback a:hover,
.primary-nav .nav-menu--fallback a[aria-current="page"] {
	color: var(--c-ink);
}
.primary-nav .nav-menu a:hover::after,
.primary-nav .nav-menu .current-menu-item > a::after,
.primary-nav .nav-menu--fallback a:hover::after,
.primary-nav .nav-menu--fallback a[aria-current="page"]::after {
	transform: scaleX(1);
}

.nav-cta { margin-left: var(--space-3); }

/* Icônes sociales à droite du header */
.header-main__socials {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.header-main__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-ink-2);
	transition: color var(--t-fast), transform var(--t-fast);
	width: 32px;
	height: 32px;
}
.header-main__socials a:hover {
	color: var(--c-red);
	transform: translateY(-1px);
}
/* En mode transparent (sur photo) : icônes blanches */
body.has-transparent-header .site-header:not(.is-scrolled) .header-main__socials a {
	color: rgba(255, 255, 255, 0.92);
}
body.has-transparent-header .site-header:not(.is-scrolled) .header-main__socials a:hover {
	color: #fff;
}

/* Toggle mobile */
.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	border-radius: var(--radius-sm);
}
.nav-toggle span {
	width: 22px; height: 1.5px;
	background: var(--c-ink);
	transition: transform var(--t-base), opacity var(--t-fast);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
	.nav-toggle { display: flex; justify-self: end; }
	.header-main__inner {
		grid-template-columns: 1fr auto;
	}
	.header-main__socials { display: none; }
	.primary-nav {
		position: absolute;
		top: 100%; left: 0; right: 0;
		/* Sans ça, le menu est coincé dans la colonne centrale de la grille du
		   header (panneau étroit au milieu). On le fait couvrir toute la largeur. */
		grid-column: 1 / -1;
		justify-self: stretch;
		background: var(--c-bg);
		flex-direction: column;
		align-items: stretch;
		padding: 0 var(--space-5);
		gap: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--t-slow);
	}
	/* Bordure + ombre seulement quand le menu est OUVERT (sinon une fine ligne
	   blanche reste visible quand il est replié). */
	.primary-nav.is-open {
		max-height: 80vh;
		overflow: auto;
		padding-block: var(--space-5);
		border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-md);
	}
	/* Le menu mobile est un panneau BLANC déroulant : on force le texte foncé,
	   même quand le header est transparent (sinon texte blanc invisible). */
	body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu a,
	body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu--fallback a {
		color: var(--c-ink-2);
	}
	body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu a:hover,
	body.has-transparent-header .site-header:not(.is-scrolled) .primary-nav .nav-menu .current-menu-item > a {
		color: var(--c-ink);
	}
	.primary-nav .nav-menu,
	.primary-nav .nav-menu--fallback {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.primary-nav .nav-menu li,
	.primary-nav .nav-menu--fallback li {
		border-bottom: 1px solid var(--c-line);
	}
	.primary-nav .nav-menu a,
	.primary-nav .nav-menu--fallback a {
		padding: 1.125rem 0;
		font-size: 0.9375rem;
	}
	.nav-cta {
		margin-left: 0;
		text-align: center;
		margin-top: var(--space-4);
	}
}

/* Floating WhatsApp */
.floating-wa {
	position: fixed;
	right: 24px; bottom: 24px;
	width: 60px; height: 60px;
	background: #25D366;
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.4);
	z-index: 90;
	transition: transform var(--t-base);
}
.floating-wa:hover { transform: scale(1.06); color: #fff; }