/* The whole header is sticky but pinned --bh above the window: the promise strip scrolls away, the bar stays. Every
   offset of the site (scroll-padding, sticky scenes) therefore keeps using --hh, the bar alone. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: calc(-1 * var(--bh));
	z-index: 50;
}

@media (min-width: 601px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--bh));
	}
}

.entete {
	position: relative;
	background: var(--blanc);
	border-bottom: 1px solid var(--gris);
}

.entete-barre {
	height: var(--hh);
	display: flex;
	align-items: center;
	gap: 4px;
}

.entete-barre > * {
	margin: 0;
}

.lecture {
	position: absolute;
	z-index: 1;
	top: var(--bh);
	left: 0;
	right: 0;
	height: 3px;
	background: var(--cyan);
	transform-origin: 0 50%;
	transform: scaleX(var(--lu, 0));
}

@supports (animation-timeline: scroll()) {
	.lecture {
		transform: none;
		animation: lecture linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes lecture {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.logo {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 48px;
	margin-right: auto;
}

.logo img {
	width: 149px;
}

.entete-actions {
	order: 1;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.entete .bouton {
	padding: 0 16px;
}

.btn-tel {
	display: inline-grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 4px;
	color: var(--ardoise);
}

.burger {
	display: none;
}

.menu-principal a {
	text-decoration: none;
}

.menu-principal .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 48px;
	font: 600 calc(1 * var(--rem))/1.3 var(--f-titre);
}

.entete .menu-principal .wp-block-navigation .wp-block-navigation__submenu-container {
	color: inherit;
}

.menu-principal [aria-current="page"] {
	box-shadow: inset 0 -2px 0 var(--cyan);
}

/* « Conseils » sorts its ten links under three names (after-2, N-21). A submenu inside a submenu is a group: always
   open with its parent, never a fly-out; its name has no link and its toggle is gone, so Tab goes from link to link. */
.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-submenu__toggle {
	display: none;
}

.entete .menu-principal .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	position: static;
	visibility: inherit;
	opacity: inherit;
	width: auto;
	min-width: 0;
	height: auto;
	overflow: visible;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.menu-principal .wp-block-navigation .wp-block-navigation__submenu-container .has-child {
	flex-direction: column;
	align-items: stretch;
}

.menu-principal .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
	min-height: 0;
	padding-block: 16px 4px;
	font: 600 calc(.875 * var(--rem))/1.4 var(--f-titre);
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ardoise);
	cursor: default;
}

@media (max-width: 1279.98px) {
	html:not(.js) .entete-barre {
		flex-wrap: wrap;
	}

	.menu-principal {
		order: 3;
		flex-basis: 100%;
	}

	html:not(.js) .wp-site-blocks > header.wp-block-template-part {
		position: static;
	}

	html:not(.js) .entete {
		height: auto;
	}

	html.js .burger {
		order: 2;
		flex-shrink: 0;
		display: inline-grid;
		place-items: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 0;
		border-radius: 4px;
		background: none;
		color: var(--ardoise);
		cursor: pointer;
	}

	html.js .menu-principal {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100svh - var(--hh));
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px var(--g) 24px;
		background: var(--blanc);
		border-bottom: 1px solid var(--gris);
		box-shadow: 0 16px 32px -24px rgb(62 80 99 / .5);
	}

	html.js .menu-principal:not(.est-ouvert) {
		display: none;
	}

	.menu-principal .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.menu-principal .wp-block-navigation .wp-block-navigation-item {
		flex-direction: column;
		align-items: stretch;
		border-top: 1px solid var(--gris);
	}

	.menu-principal .wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item {
		border-top: 0;
	}

	.menu-principal .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		position: static;
		visibility: visible;
		opacity: 1;
		width: auto;
		min-width: 0;
		height: auto;
		overflow: visible;
		padding: 0 0 8px 16px;
		border: 0;
		background: none;
	}

	.menu-principal .wp-block-navigation-submenu__toggle {
		display: none;
	}

	.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font: 400 calc(1 * var(--rem))/1.3 var(--f-texte);
	}
}

@media (min-width: 900px) {
	.logo img {
		width: 186px;
	}
}

@media (min-width: 1280px) {
	.logo {
		margin-right: 0;
	}

	.menu-principal {
		margin-inline: auto;
	}

	.menu-principal .wp-block-navigation__container {
		gap: 24px;
	}

	.menu-principal .wp-block-navigation-submenu__toggle {
		min-width: 24px;
		min-height: 48px;
	}

	.entete .menu-principal .wp-block-navigation .wp-block-navigation__submenu-container {
		padding: 8px 0;
		border: 1px solid var(--gris);
		border-radius: 0 0 8px 8px;
		background: var(--blanc);
		box-shadow: 0 16px 32px -24px rgb(62 80 99 / .5);
	}

	.menu-principal .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0 16px;
		font: 400 calc(1 * var(--rem))/1.3 var(--f-texte);
		white-space: nowrap;
	}

	.entete .menu-principal .wp-block-navigation .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: repeat(3, max-content);
		align-items: start;
		left: auto;
		right: 0;
		padding: 0 0 16px;
	}

	.menu-principal .wp-block-navigation__submenu-container .has-child > .wp-block-navigation-item__content {
		padding: 16px 16px 4px;
	}
}

.burger-trait,
.burger-trait::before,
.burger-trait::after {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.burger-trait {
	position: relative;
}

.burger-trait::before,
.burger-trait::after {
	content: "";
	position: absolute;
	left: 0;
}

.burger-trait::before {
	top: -7px;
}

.burger-trait::after {
	top: 7px;
}

.burger[aria-expanded="true"] .burger-trait {
	background: transparent;
}

.burger[aria-expanded="true"] .burger-trait::before {
	top: 0;
	transform: rotate(45deg);
}

.burger[aria-expanded="true"] .burger-trait::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.burger-trait {
		transition: background-color .2s var(--ease);
	}

	.burger-trait::before,
	.burger-trait::after {
		transition: top .25s var(--ease), transform .25s var(--ease);
	}
}

.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: var(--pied-marge, 72px);
}

.vague {
	position: relative;
	z-index: 1;
	background: var(--vague-fond, transparent);
	line-height: 0;
}

.vague img {
	width: 100%;
	height: clamp(48px, 5vw + 28px, 96px);
}

.pied {
	position: relative;
	z-index: 1;
	margin-top: -1px;
	padding-block: 56px 32px;
	background: var(--ardoise);
	color: var(--gris);
}

.pied .is-layout-flow > *,
.pied p,
.pied ul {
	margin-block: 0;
}

.pied ul {
	list-style: none;
	padding: 0;
}

.pied a {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	color: var(--blanc);
}

.pied .wp-block-navigation a,
.pied-compte-liens a {
	text-decoration: none;
}

.pied-compte-liens a {
	display: flex;
	width: fit-content;
}

.pied .wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
}

/* Link lists: the text sits in the middle of each 48 px target; pulling the list up by the extra half height puts the
   first link's text as close to its heading as the address is to its own, so the four columns start level. */
.pied .pied-liens > .wp-block-navigation,
.pied .pied-compte > .pied-compte-liens {
	margin-top: calc((1lh - 48px) / 2);
}

/* A link inside a line of text keeps a tall tap area through its padding, which leaves the line box alone. */
.pied .pied-contact a {
	display: inline;
	min-height: 0;
	padding-block: 12px;
}

.pied .pied-contact li + li {
	margin-top: 20px;
}

.pied .pied-coord > .pied-contact {
	margin-top: 16px;
}

.pied .pied-compte > .recherche {
	margin-top: 16px;
}

.pied .wp-block-navigation a:hover,
.pied-compte-liens a:hover {
	text-decoration: underline;
}

.pied .logotype {
	width: 180px;
}

.pied .pied-marque p {
	margin-top: 16px;
}

.pied .pied-marque .pied-reseaux {
	display: flex;
	flex-wrap: wrap;
	column-gap: 24px;
	margin-top: 8px;
}

.pied-reseaux a {
	gap: 8px;
	text-decoration: none;
}

.pied-reseaux a:hover {
	text-decoration: underline;
}

.pied-reseaux svg {
	flex: none;
	width: 22px;
	height: 22px;
}

.pied .rond-since {
	display: block;
	width: 96px;
	height: auto;
	margin-top: 24px;
}

.pied .pied-titre {
	margin-bottom: 8px;
	color: var(--blanc);
	font: 600 calc(.875 * var(--rem))/1.4 var(--f-titre);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.pied-grille {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.pied .wp-block-navigation__container {
	gap: 0;
}

.recherche {
	margin-top: 16px;
}

.recherche label {
	display: block;
	margin-bottom: 8px;
	color: var(--blanc);
}

.recherche-champ {
	display: flex;
	gap: 8px;
}

.recherche input {
	flex: 1;
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 0 12px;
	border: 1px solid var(--gris-bleu);
	border-radius: 4px;
	background: var(--blanc);
	color: var(--ardoise);
	font: inherit;
}

.recherche button {
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid var(--blanc);
	border-radius: 4px;
	background: none;
	color: var(--blanc);
	font: 600 calc(1 * var(--rem))/1.2 var(--f-titre);
	cursor: pointer;
}

.pied .legal {
	margin-top: 40px;
	padding-top: 16px;
	border-top: 1px solid var(--bleu);
	align-items: center;
	column-gap: 24px;
	row-gap: 0;
}

@media (min-width: 600px) {
	.pied-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}
}

@media (min-width: 1100px) {
	.pied-grille {
		grid-template-columns: 1fr 1.25fr 1fr 1.25fr;
		gap: 48px;
	}
}

/* The open burger's ring stays inside the 56 px bar instead of touching the top edge at 768 px. */
.burger:focus-visible {
	outline-offset: -4px;
}


/* Promise strip (design system § 6.1): slate, light grey text, white links, never sticky, always ONE line of --bh so
   the header height is known to the CSS. Delivery always (short wording, long from 720 px); GSM from 480 px, both
   numbers from 600 px; store from 1 200 px; payment from 2 400 px: each threshold is where the line still fits since
   the delivery line names France and its relay point (decision of Alexis, 24/10, 17 h 54). The dealer line is in the
   reassurance band, never here. */
.bandeau-promesses {
	height: var(--bh);
	overflow: clip visible;
	background: var(--ardoise);
	color: var(--gris);
	font: 400 calc(.875 * var(--rem))/20px var(--f-texte);
}

.bandeau-promesses ul {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}

.bandeau-promesses li {
	margin: 0;
	height: 20px;
}

.bandeau-promesses li:not(.bandeau-tel, .bandeau-livraison) {
	display: none;
}

.bandeau-promesses a {
	color: var(--blanc);
	text-underline-offset: .2em;
}

.bandeau-promesses a:hover {
	text-decoration-color: var(--cyan);
	text-decoration-thickness: 2px;
}

.bandeau-promesses a:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: -2px;
}

.bandeau-livraison-long {
	display: none;
}

/* Phone: short delivery line and the GSM only (the separator and the landline are hidden with the text node). The GSM
   comes last, at the right end of the strip from 480 px: its tap area then reaches down over the bar's phone button,
   which calls the same number, and never over « La boutique ». */
.bandeau-tel {
	font-size: 0;
}

.bandeau-tel a {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: calc(.875 * var(--rem));
	line-height: 20px;
}

/* A 20 px line is too small to tap (after-2, N-17): the link takes the whole strip height and 12 px of the bar below,
   44 px in all, without making the strip taller. The bar's own controls stay above it. */
.bandeau-tel a::after {
	content: "";
	position: absolute;
	inset: calc(-1 * (var(--bh) - 20px) / 2) 0 calc(-1 * (var(--bh) - 20px) / 2 - 12px);
}

.entete-barre :is(.logo, .bouton, .burger) {
	position: relative;
	z-index: 1;
}

.bandeau-tel a:not(:last-child) {
	display: none;
}

/* The bar keeps its phone button: on phones under 480 px the strip carries the delivery line alone. */
@media (max-width: 479.98px) {
	.bandeau-tel {
		display: none;
	}
}

@media (min-width: 480px) {
	.bandeau-promesses ul {
		justify-content: space-between;
	}
}

@media (min-width: 600px) {
	.bandeau-tel {
		font-size: inherit;
	}

	.bandeau-tel a:not(:last-child) {
		display: inline;
	}
}

@media (min-width: 720px) {
	.bandeau-livraison-long {
		display: inline;
	}

	.bandeau-livraison-court {
		display: none;
	}
}

@media (min-width: 1200px) {
	.bandeau-promesses li:has(a[href="/magasin/"]) {
		display: block;
	}
}

@media (min-width: 2400px) {
	.bandeau-promesses li:nth-child(2 of :not(.bandeau-tel, .bandeau-livraison, :has(a))) {
		display: block;
	}
}


/* Reassurance band (design system § 6.6): four facts, four columns from 960 px, two from 520 px, one below. The band
   is opaque and above the sticky home photo, which used to slide over it on phones and tablets (after-1, N-1). */
.reassurance {
	position: relative;
	z-index: 1;
	padding: 48px var(--g);
	background: var(--blanc);
	color: var(--ardoise);
}

.reassurance ul {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px 32px;
	width: min(100%, var(--largeur));
	margin: 0 auto;
	padding: 24px 0;
	border-block: 1px solid var(--gris-bleu);
	list-style: none;
}

.reassurance li {
	margin: 0;
	font-size: calc(.9375 * var(--rem));
	line-height: 1.45;
}

.reassurance br {
	display: none;
}

.reassurance strong {
	display: block;
	margin-bottom: 2px;
	font: 600 calc(1 * var(--rem))/1.4 var(--f-titre);
}

.reassurance a {
	color: inherit;
}

@media (max-width: 519.98px) {
	.reassurance {
		padding-block: 32px;
	}

	.reassurance ul {
		padding-block: 16px;
	}
}

@media (min-width: 520px) {
	.reassurance ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.reassurance {
		padding-block: 72px;
	}

	.reassurance ul {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}