/**
 * En-tête et tiroir mobiles (inc/woocommerce/mobile-menu.php, assets/js/mobile-menu.js).
 * Toutes les règles s'appliquent sous 1024 px ; en fin de fichier, la seule règle pour
 * l'ordinateur. Les vignettes et pastilles reprennent les classes du méga-menu
 * (.ks-mega__tiles, .ks-mega__chips, mega-menu.css), adaptées à l'écran étroit.
 */
@media (width < 64rem) {
.ks-mnav {
	--ks-m-ink: #2a2230;
	--ks-m-soft: #5d5463;
	--ks-m-muted: #8c8391;
	--ks-m-line: #eee4d8;
	--ks-m-cream: #fff8f0;
	--ks-m-peach: #fff0e0;
	--ks-m-lilac: #f6ecfb;
	--ks-m-orange: #ff8000;
	--ks-m-orange-dark: #e56f00;
	--ks-m-purple: #a2257c;
	--ks-m-display: "Fraunces", Georgia, "Times New Roman", serif;
	--ks-m-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
	color: var(--ks-m-ink);
}

/* Le conteneur <nav> du tiroir (header-content.php) cède sa marge et son défilement aux écrans. */
.ks-drawer__panel nav:has(> .ks-mnav) {
	display: flex;
	padding: 0;
	overflow: hidden;
}

/* Le téléphone est repris dans le bas du menu. */
.ks-drawer__panel:has(.ks-mnav) > a[href^="tel:"] {
	display: none;
}

/* Écrans */
.ks-mnav__panel {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* La barre de navigation du bas (mobile-bar.php) reste visible par-dessus le tiroir. */
	padding: 1rem 1rem calc(var(--ks-mobilebar-h, 4rem) + env(safe-area-inset-bottom) + 1.5rem);
	background: #fff;
	transform: translateX(0);
	transition:
		transform 0.28s var(--ks-m-ease),
		opacity 0.28s ease;
}

.ks-mnav__panel[hidden] {
	display: none;
}

.ks-mnav__panel.is-from-right {
	transform: translateX(100%);
	transition: none;
}

.ks-mnav__panel.is-from-left {
	opacity: 0;
	transform: translateX(-30%);
	transition: none;
}

.ks-mnav__panel.is-out-left {
	opacity: 0;
	transform: translateX(-30%);
}

.ks-mnav__panel.is-out-right {
	transform: translateX(100%);
}

/* Intertitres */
.ks-mnav__label {
	margin: 1.25rem 0 0.5rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ks-m-purple);
}

.ks-mnav__panel > .ks-mnav__label:first-child {
	margin-top: 0;
}


/* Lignes de rubriques */
.ks-mnav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mnav__list > li {
	margin: 0;
	border-bottom: 1px solid var(--ks-m-line);
}

.ks-mnav__row {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	min-height: 4.25rem;
	padding: 0.5rem 0;
	color: var(--ks-m-ink);
	text-align: left;
}

.ks-mnav__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 16px;
	background: var(--ks-m-cream);
	box-shadow: inset 0 0 0 1.5px var(--ks-m-line);
	transition:
		background-color 0.15s,
		transform 0.2s var(--ks-m-ease);
}

.ks-mnav__list > li:nth-child(4n + 2) .ks-mnav__icon {
	background: var(--ks-m-lilac);
}

.ks-mnav__list > li:nth-child(4n + 3) .ks-mnav__icon {
	background: #e5f6f2;
}

.ks-mnav__list > li:nth-child(4n + 4) .ks-mnav__icon {
	background: #fff6d6;
}

.ks-mnav__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.125rem;
	min-width: 0;
}

.ks-mnav__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.ks-mnav__hint {
	overflow: hidden;
	font-size: 0.8125rem;
	line-height: 1.35;
	color: var(--ks-m-muted);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.ks-mnav__chev {
	flex: none;
	color: var(--ks-m-muted);
	transition: transform 0.2s var(--ks-m-ease);
}

.ks-mnav__row:active .ks-mnav__icon {
	transform: scale(0.94);
}

.ks-mnav__row:hover .ks-mnav__chev,
.ks-mnav__row:focus-visible .ks-mnav__chev {
	color: var(--ks-m-orange-dark);
	transform: translateX(2px);
}

.ks-mnav__row.is-current .ks-mnav__name {
	color: var(--ks-m-orange-dark);
}

.ks-mnav__row:focus-visible,
.ks-mnav__back:focus-visible,
.ks-mnav__all:focus-visible {
	outline: 2px solid var(--ks-m-orange);
	outline-offset: 2px;
	border-radius: 12px;
}

/* Familles de héros : lignes sans icône, compteur en pastille */
.ks-mnav__list--plain .ks-mnav__row {
	min-height: 3.75rem;
}

.ks-mnav__badge {
	flex: none;
	min-width: 1.75rem;
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: var(--ks-m-cream);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--ks-m-muted);
	text-align: center;
}

/* En-tête d'un écran secondaire (reste visible au défilement) */
.ks-mnav__bar {
	position: sticky;
	top: -1rem;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: -1rem -1rem 0.75rem;
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--ks-m-line);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
}

.ks-mnav__back {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.25rem;
	min-height: 2.5rem;
	padding: 0 0.875rem 0 0.5rem;
	border-radius: 999px;
	background: var(--ks-m-cream);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--ks-m-ink);
}

.ks-mnav__title {
	overflow: hidden;
	margin: 0;
	font-family: var(--ks-m-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* « Tout voir » */
.ks-mnav__all {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	padding: 0.875rem 1rem;
	border-radius: 14px;
	background: var(--ks-m-peach);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ks-m-orange-dark);
}

.ks-mnav__all > span:first-child {
	flex: 1 1 auto;
}

.ks-mnav__count {
	flex: none;
	white-space: nowrap;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ks-m-soft);
}

.ks-mnav__all .ks-mnav__chev {
	color: var(--ks-m-orange-dark);
}

/* Vignettes du méga-menu, adaptées au tiroir */
.ks-mnav .ks-mega__tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}

.ks-mnav .ks-mega-tile {
	padding: 0.375rem 0.375rem 0.625rem;
	border-radius: 14px;
}

.ks-mnav .ks-mega-tile:hover {
	box-shadow: none;
	transform: none;
}

.ks-mnav .ks-mega-tile__name {
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.ks-mnav .ks-mega-tile__count {
	font-size: 0.75rem;
}

.ks-mnav .ks-mega__tiles--round {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 0.5rem;
}

.ks-mnav .ks-mega__tiles--round .ks-mega-tile {
	padding: 0;
}

.ks-mnav .ks-mega__tiles--round .ks-mega-tile__media {
	width: min(100%, 4.5rem);
}

.ks-mnav .ks-mega__tiles--round .ks-mega-tile__name {
	font-size: 0.8125rem;
	line-height: 1.25;
}

.ks-mnav .ks-mega__chips {
	gap: 0.5rem;
}

.ks-mnav .ks-mega__chips a {
	padding: 0.5rem 0.875rem;
	border-color: var(--ks-m-line);
	font-size: 0.8125rem;
}

/* Aide et infos */
.ks-mnav__links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ks-mnav__links li {
	margin: 0;
	border-bottom: 1px solid var(--ks-m-line);
}

.ks-mnav__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ks-m-soft);
}

/* Contact et livraison offerte */
.ks-mnav__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.25rem;
	padding: 1rem;
	border-radius: 16px;
	background: var(--ks-m-cream);
}

.ks-mnav__perk {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
}

.ks-mnav__perk svg {
	flex: none;
}

.ks-mnav__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.875rem;
	border-radius: 999px;
	background: var(--ks-m-lilac);
	font-weight: 700;
	color: var(--ks-m-purple);
}

.ks-mnav__phone svg {
	width: 1.25rem;
	height: 1.25rem;
}

.ks-mnav__hours {
	text-wrap: balance;
	margin: 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--ks-m-muted);
	text-align: center;
}

/*
 * En-tête mobile (template-parts/layout/header-content.php) : menu à gauche, logo centré,
 * compte et panier à droite ; recherche toujours visible en dessous, dans l'en-tête collant.
 */
.ks-header__bar {
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
}

/* Le bloc « menu + logo » de l'ordinateur se répartit sur les colonnes 1 et 2. */
.ks-header__start {
	display: contents;
}

.ks-header__start > [data-ks-drawer-open] {
	grid-column: 1;
	justify-self: start;
}

.ks-header__start > a[rel="home"] {
	grid-column: 2;
	justify-self: center;
}

.ks-header__bar > :last-child {
	grid-column: 3;
	justify-self: end;
	gap: 0;
}

/* « Compte » est déjà dans la barre du bas : l'en-tête garde menu, logo et panier. */
.ks-header__bar > :last-child > a:not([data-ks-cart-open]) {
	display: none;
}

#page .ks-header__bar .ks-logo-img {
	height: 2.625rem;
}

/* Recherche */
.ks-header .ks-search--mobile {
	margin: 0 0.75rem 0.625rem;
}

.ks-header .ks-search--mobile .ks-search__input {
	height: 2.75rem;
	padding-left: 1rem;
	/* 16 px : en dessous, iOS zoome sur le champ à la saisie. */
	font-size: 1rem;
}

.ks-header .ks-search--mobile .ks-search__btn {
	top: 0.25rem;
	right: 0.25rem;
	width: 2.25rem;
	height: 2.25rem;
}

.ks-header .ks-search--mobile .ks-search__btn svg {
	width: 1.125rem;
	height: 1.125rem;
}

@media (prefers-reduced-motion: reduce) {
	.ks-mnav__panel,
	.ks-mnav__icon,
	.ks-mnav__chev {
		transition: none;
	}
}
}

/* Ordinateur : la recherche mobile (toujours visible sous 1024 px) est masquée ; header.css
   affiche toute recherche .ks-search sans classe hidden. */
@media (width >= 64rem) {
	.ks-header .ks-search--mobile {
		display: none;
	}
}