:root{
	--spide-blue:#0000FF;
	--spide-grey:#767676;
	--spide-light:#DCDCDC;
	--spide-header-h:90px;
}

.spide-header *,
.spide-header *::before,
.spide-header *::after{ box-sizing:border-box; }

.spide-header{
	position:sticky;
	top:0;
	z-index:1000;
	background:#fff;
	border-bottom:1px solid #F0F0F0;
}

.spide-header__inner{
	max-width:1600px;
	margin-inline:auto;
	min-height:var(--spide-header-h);
	padding-inline:clamp(24px,4vw,72px);
	display:flex;
	align-items:center;
	gap:32px;
}

/* ---- Logo ---- */
.spide-header__logo{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	line-height:0;
}
.spide-header__logo img{
	height:44px;
	width:auto;
	display:block;
}

/* ---- Collapse (nav + cta) ---- */
.spide-header__collapse{
	flex:1 1 auto;
	display:flex;
	align-items:center;
	gap:32px;
}

/* ---- Nav ---- */
.spide-header__nav{
	flex:1 1 auto;
	align-self:stretch;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:32px;
}
.spide-divider{
	flex:0 0 auto;
	width:1px;
	height:56px;
	background:var(--spide-light);
}
.spide-menu{
	margin:0;
	padding:0;
	list-style:none;
	height:var(--spide-header-h);
	display:flex;
	align-items:stretch;
	gap:36px;
}
.spide-menu li{
	position:relative;
	display:flex;
	align-items:center;
}
.spide-menu a{
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-family:"Montserrat",sans-serif;
	font-size:16px;
	font-weight:600;
	line-height:1;
	color:var(--spide-grey);
	text-decoration:none;
	white-space:nowrap;
	transition:color .15s ease;
}
.spide-menu a:hover{ color:var(--spide-blue); }
.spide-menu li.is-active > a{ color:var(--spide-blue); }
.spide-menu li.is-active::after{
	content:"";
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	height:3px;
	background:var(--spide-blue);
}
.spide-chevron{ display:block; width:10px; height:auto; }

/* ---- Sous-menu (dropdown desktop) ---- */
.spide-submenu{
	position:absolute;
	top:100%;
	left:-16px;
	margin:0;
	padding:8px 0;
	list-style:none;
	background:#fff;
	border:1px solid #F0F0F0;
	box-shadow:0 8px 24px rgba(0,0,0,.08);
	min-width:240px;
	opacity:0;
	visibility:hidden;
	transform:translateY(4px);
	transition:opacity .15s ease, transform .15s ease, visibility .15s;
	z-index:120;
}
.spide-menu li.has-sub:hover > .spide-submenu,
.spide-menu li.has-sub:focus-within > .spide-submenu,
.spide-menu li.has-sub.is-open > .spide-submenu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}
.spide-submenu li{
	display:block;
	height:auto;
}
.spide-submenu a{
	display:block;
	height:auto;
	padding:10px 20px;
	font-size:14px;
	font-weight:500;
	color:var(--spide-grey);
	white-space:nowrap;
}
.spide-submenu a:hover{
	color:var(--spide-blue);
	background:#F7F7FF;
}

/* ---- CTA ---- */
.spide-cta{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	height:55px;
	padding-inline:clamp(28px,3vw,54px);
	border:1.4px solid var(--spide-blue);
	color:var(--spide-blue);
	font-family:"Montserrat",sans-serif;
	font-size:14px;
	font-weight:600;
	letter-spacing:.02em;
	text-decoration:none;
	white-space:nowrap;
	transition:background-color .18s ease,color .18s ease;
}
.spide-cta:hover{
	background:var(--spide-blue);
	color:#fff;
}
.spide-cta__arrow{ display:block; }

/* ---- Burger ---- */
.spide-header__burger{
	display:none;
	flex:0 0 auto;
	margin-left:auto;
	width:44px;
	height:44px;
	padding:11px 9px;
	flex-direction:column;
	justify-content:space-between;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	-webkit-appearance:none;
	appearance:none;
	cursor:pointer;
}
.spide-header__burger span{
	display:block;
	width:100%;
	height:2px;
	background:#111;
	border-radius:2px;
	transition:transform .2s ease,opacity .2s ease;
}

/* ---- Responsive ---- */
@media (max-width:1024px){
	.spide-header__burger{ display:flex; }

	.spide-header__collapse{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		display:none;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:8px 0 20px;
		background:#fff;
		border-bottom:1px solid #F0F0F0;
		box-shadow:0 14px 28px rgba(0,0,0,.07);
	}
	.spide-header.is-open .spide-header__collapse{ display:flex; }

	.spide-header__nav{
		flex-direction:column;
		align-items:stretch;
		gap:0;
	}
	.spide-divider{ display:none; }

	.spide-menu{
		width:100%;
		height:auto;
		flex-direction:column;
		align-items:stretch;
		gap:0;
	}
	.spide-menu li{ display:block; }
	.spide-menu a{
		padding:15px clamp(24px,5vw,40px);
		font-size:16px;
	}
	.spide-menu li.is-active::after{ display:none; }

	/* En mobile, le sous-menu n'est plus en dropdown : il s'inscrit dans le flux */
	.spide-submenu{
		position:static;
		opacity:1;
		visibility:visible;
		transform:none;
		border:0;
		box-shadow:none;
		padding:0;
		background:transparent;
		display:none;
		min-width:0;
	}
	.spide-menu li.has-sub.is-open > .spide-submenu{
		display:block;
	}
	.spide-submenu a{
		padding:10px clamp(40px,7vw,56px);
		font-size:15px;
	}

	.spide-cta{
		height:52px;
		margin:14px clamp(24px,5vw,40px) 0;
	}

	.spide-header.is-open .spide-header__burger span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
	.spide-header.is-open .spide-header__burger span:nth-child(2){ opacity:0; }
	.spide-header.is-open .spide-header__burger span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }
}

@media (max-width:480px){
	.spide-header__logo img{ height:38px; }
	.spide-header__inner{ min-height:74px; }
}