/* Didatec — site header (announcement bar, main bar, primary nav). */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white);
}

.admin-bar .site-header { top: 32px; }

@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

/* Announcement bar ------------------------------------------------------- */

.topbar {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 32px;
	padding: 8px 20px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
}

.topbar__text { color: var(--wp--preset--color--white-80); }
.topbar__phone a { text-decoration-line: underline; text-decoration-color: transparent; }
.topbar__phone a:hover { text-decoration-color: currentColor; }

@media (max-width: 599px) {
	.topbar__text-muted { display: none; }
}

/* Main bar --------------------------------------------------------------- */

.header-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Figma 12078:1749 : la navigation suit le logo sur la même ligne. */
	gap: 32px;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 12px 24px;
}

.site-logo {
	flex: none;
	line-height: 0;
	text-decoration: none;
}

.site-logo img {
	width: 192px;
	height: auto;
}

.site-logo--light img { width: 85px; }

.header-burger {
	display: none;
	width: 40px;
	height: 40px;
	padding: 12px;
	border: 0;
	background: none;
	cursor: pointer;
}

.header-burger .icon { width: 16px; height: 16px; }

.header-search { flex: 1 1 auto; min-width: 0; }

/* Figma 12078:3023 : 43px de haut, le padding vertical du champ générique
   le poussait à 46. */
.header-search .field {
	height: 43px;
	padding-block: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-sep {
	width: 1px;
	height: 14px;
	background-color: var(--wp--preset--color--black-20);
}

/* Quote CTA -------------------------------------------------------------- */

/* Figma 12078:2896 : 160x33, plus compact que le bouton standard. */
.header-quote {
	flex: none;
	padding: 8px 20px 9px;
	white-space: nowrap;
}
.header-quote__icon { display: none; }
.header-quote .screen-reader-text { position: static !important; }

/* Account / selection ---------------------------------------------------- */

.header-action {
	display: inline-flex;
	align-items: center;
	flex: none;
	border: 0;
	background: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

/* Figma 12078:1749 : compte et sélection sont des pictos seuls, dans une boîte
   de 40x40 ; leur nom accessible vient du .screen-reader-text. */
.header-action {
	/* Sans cette remise à zéro, le <button> de la sélection est plus large que
	   le lien du compte, à cause du padding par défaut du navigateur. */
	padding: 0;
	transition: color 0.2s ease;
}

.header-action:hover,
.header-action:focus-visible { color: var(--wp--preset--color--blue); }

.header-action__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 5px;
	transition: background-color 0.2s ease;
}

.header-action:hover .header-action__icon,
.header-action:focus-visible .header-action__icon {
	background-color: var(--wp--preset--color--field);
}

.header-action__icon .icon { width: 16px; height: 16px; }

.header-action .screen-reader-text { position: absolute !important; }

.header-selection__count {
	position: absolute;
	top: 6px;
	left: 27px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--red);
}

/* Primary navigation ----------------------------------------------------- */

.site-nav { flex: none; }

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list > li > a {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.01em;
	text-decoration-line: underline;
	text-decoration-color: transparent;
}

.site-nav__list > li > a:hover { text-decoration-color: currentColor; }

.site-nav__list > .current-menu-item > a,
.site-nav__list > .current-menu-parent > a,
.site-nav__list > .current-menu-ancestor > a,
.site-nav__list > .current_page_item > a {
	color: var(--wp--preset--color--blue);
	font-weight: 600;
}

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

@media (max-width: 1023px) {
	.header-main {
		flex-wrap: wrap;
		gap: 0;
		padding: 12px 16px 8px;
	}

	/* Flatten the actions wrapper so its children join the header flex row. */
	.header-actions { display: contents; }

	.site-header .header-main .header-burger { display: block; order: 1; }
	.header-main .header-account { order: 2; }
	.header-main .site-logo { order: 3; margin-inline: auto; }
	.header-main .header-quote { order: 4; }
	.header-main .header-selection { order: 5; }

	.header-search {
		order: 6;
		flex: 0 0 100%;
		width: min(353px, calc(100% - 22px));
		margin-inline: auto;
		padding-block-start: 8px;
	}

	.header-actions .lang-switch,
	.header-main .site-nav,
	.header-sep { display: none; }

	.header-main .site-logo img { width: 143px; }

	.header-main .header-quote {
		width: 40px;
		height: 40px;
		padding: 0;
		gap: 0;
	}

	.header-main .header-quote__label { display: none; }

	.header-quote__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.header-quote__icon .icon { width: 17px; height: 17px; }

	.header-quote .screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.header-main .header-selection,
	.header-main .header-account { padding: 0; }

	.header-main .header-quote + .header-selection { margin-inline-start: 5px; }
}

/* Search form ------------------------------------------------------------ */

.search-form { position: relative; }

.search-form__input {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: -0.01em;
}

.search-form__input::-webkit-search-cancel-button { display: none; }

.search-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* Off-canvas navigation ---------------------------------------------------
   ax-offcanvas-nav ships its own trigger and panel skin; we keep the library
   behaviour (ARIA, focus, swipe) and re-skin it with the design system. */

.site-header .header-main .header-burger.hc-nav-trigger {
	position: static;
	top: auto;
	display: none;
	width: 40px;
	min-height: 40px;
	height: 40px;
	padding: 12px;
	color: var(--wp--preset--color--black);
}

@media (max-width: 1023px) {
	.site-header .header-main .header-burger.hc-nav-trigger { display: block; }
}

.header-burger.hc-nav-trigger span,
.header-burger.hc-nav-trigger span::before,
.header-burger.hc-nav-trigger span::after { display: none; }

.hc-offcanvas-nav .nav-container {
	background-color: var(--wp--preset--color--black);
	font-family: var(--wp--preset--font-family--headline);
}

.hc-offcanvas-nav .nav-wrapper,
.hc-offcanvas-nav .nav-content { background-color: var(--wp--preset--color--black); }

.hc-offcanvas-nav .nav-title {
	padding: 20px var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--h-4);
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--white);
}

.hc-offcanvas-nav li.nav-item > .nav-item-wrapper > a,
.hc-offcanvas-nav li.nav-item > a {
	padding: 16px var(--wp--preset--spacing--50);
	border-block-end: 1px solid var(--wp--preset--color--white-20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--white);
	transition: background-color 0.2s ease;
}

.hc-offcanvas-nav li.nav-item > .nav-item-wrapper > a:hover,
.hc-offcanvas-nav li.nav-item > a:hover { background-color: var(--wp--preset--color--white-20); }

.hc-offcanvas-nav .nav-close-button,
.hc-offcanvas-nav .nav-back a { color: var(--wp--preset--color--white); }

.hc-offcanvas-nav .nav-close-button::before,
.hc-offcanvas-nav .nav-close-button::after { background-color: var(--wp--preset--color--white); }