/* Sélecteurs volontairement préfixés/spécifiques (html body nav.sss-nav-bar) pour s'imposer
   sur n'importe quel thème actif, sans dépendre de ses propres classes ni de sa cascade.
   Reproduit fidèlement l'apparence "pilule flottante + méga-menu" du thème the-edit
   (nav.te-desktop-only / .te-mega-panel / .te-mega-cta), limité au rendu du menu lui-même —
   logo, icônes compte/panier et bouton CTA restent gérés ailleurs (thème / bouton panier flottant). */
html body nav.sss-nav-bar {
	all: initial;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	position: sticky;
	top: 20px;
	z-index: 90;
	width: calc(100% - 56px);
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 14px 14px 32px;
	gap: 16px;
	background: rgba(244,244,241,0.8); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,0.4); border-radius: 2px;
	box-shadow: 0 4px 20px rgba(34,21,22,0.1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-sizing: border-box;
}
html body nav.sss-nav-bar *, html body nav.sss-nav-bar *::before, html body nav.sss-nav-bar *::after { box-sizing: border-box; }
html body nav.sss-nav-bar .sss-nav-side { display: flex; align-items: center; gap: 22px; }
html body nav.sss-nav-bar .sss-nav-side.sss-nav-right { justify-content: flex-end; flex-wrap: wrap; }
html body nav.sss-nav-bar .sss-nav-logo { display: flex; justify-content: center; }
html body a.sss-nav-logo-link { text-decoration: none; display: flex; align-items: center; }
html body img.sss-nav-logo-img { height: 34px; width: auto; object-fit: contain; display: block; }
html body a.sss-nav-logo-text { font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 19px; color: #221516; letter-spacing: 0.04em; }
html body ul.sss-nav-menu {
	display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
	list-style: none; margin: 0; padding: 0;
}
html body ul.sss-nav-menu li.sss-nav-item { position: relative; margin: 0; padding-bottom: 18px; margin-bottom: -18px; list-style: none; }
html body ul.sss-nav-menu a.sss-nav-link {
	position: relative; display: inline-block; font-size: 14px; letter-spacing: 0.04em;
	color: #221516; text-decoration: none; padding-bottom: 2px;
}
html body ul.sss-nav-menu a.sss-nav-link::after {
	content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; height: 1px; background: #3B0510;
	transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.22,.61,.36,1);
}
html body ul.sss-nav-menu a.sss-nav-link:hover { color: #3B0510; font-weight: 700; }
html body ul.sss-nav-menu a.sss-nav-link:hover::after { transform: scaleX(1); }

/* Panneau méga-menu : mêmes proportions que le thème (620px, 2 colonnes de tuiles + bloc CTA
   180px à droite), ouvert au survol (desktop) ou au clic (tactile, via nav.js). */
html body .sss-megamenu-panel {
	position: absolute; top: 100%; left: 0; margin-top: 18px;
	width: 620px; max-width: 90vw; background: #F4F4F1; border: 1px solid rgba(255,255,255,0.6);
	border-radius: 2px; box-shadow: 0 20px 50px rgba(43,38,32,0.18);
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(4px);
	transition: opacity .2s ease, transform .2s ease; z-index: 95;
}
html body .sss-megamenu-panel::before { content: ''; position: absolute; top: -18px; left: 0; right: 0; height: 18px; }
html body li.sss-nav-item-mega:hover .sss-megamenu-panel,
html body li.sss-nav-item-mega:focus-within .sss-megamenu-panel,
html body li.sss-nav-item-mega.sss-nav-open .sss-megamenu-panel {
	opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
html body .sss-megamenu-panel-inner { display: flex; gap: 24px; padding: 28px; }
html body .sss-megamenu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; flex: 1 1 auto; }
html body a.sss-megamenu-card { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
html body a.sss-megamenu-card img, html body a.sss-megamenu-card video {
	width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center center; border-radius: 2px; display: block;
}
html body .sss-megamenu-card-placeholder { width: 100%; aspect-ratio: 4/3; border-radius: 2px; background: repeating-linear-gradient(135deg, #E1DBD7, #E1DBD7 8px, #F4F4F1 8px, #F4F4F1 16px); }

/* Boutique uniquement (Perruques/Extensions) : les tuiles remplissent toute la hauteur du
   panneau (même hauteur que l'encart "Nouveautés" à côté) au lieu d'un ratio fixe qui laissait
   un vide en dessous. Les autres méga-menus (ex. Services) gardent leur ratio 4/3 d'origine. */
html body .sss-megamenu-grid-product_cat { grid-template-rows: 1fr; }
html body .sss-megamenu-grid-product_cat a.sss-megamenu-card { height: 100%; }
html body .sss-megamenu-grid-product_cat a.sss-megamenu-card img,
html body .sss-megamenu-grid-product_cat a.sss-megamenu-card video {
	aspect-ratio: auto; flex: 1 1 auto; min-height: 0;
}
html body a.sss-megamenu-card span { font-size: 13px; font-weight: 600; color: #221516; letter-spacing: 0.02em; }

html body .sss-megamenu-cta {
	flex: 0 0 180px; background: #221516; color: #F4F4F1; border-radius: 2px; padding: 20px;
	display: flex; flex-direction: column; justify-content: center;
}
html body .sss-megamenu-cta .sss-nav-eyebrow { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: #F4F4F1; }
html body .sss-megamenu-cta p { font-size: 13px; line-height: 1.5; color: #E5DEDA; margin: 0 0 16px; }
html body a.sss-megamenu-cta-btn {
	background: #F4F4F1; color: #221516; text-align: center; font-size: 13px; padding: 11px 18px;
	border-radius: 2px; text-decoration: none; font-weight: 600;
}

html body .sss-nav-icons { display: flex; align-items: center; gap: 14px; }
html body .sss-nav-icon { position: relative; width: 22px; height: 22px; padding: 0; border: none; background: transparent; color: #221516; cursor: pointer; display: flex; align-items: center; justify-content: center; text-decoration: none; }
html body .sss-nav-icon-inert { cursor: default; opacity: 0.35; }
html body .sss-nav-icons .sss-cart-badge { position: absolute; top: -7px; right: -8px; }
html body a.sss-nav-cta-btn {
	background: #221516; color: #F4F4F1; padding: 12px 26px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	border-radius: 2px; white-space: nowrap; text-decoration: none; font-weight: 600; transition: background .2s;
}
html body a.sss-nav-cta-btn:hover { background: #3B0510; }

html body .sss-mobile-menu-toggle { display: none; border: none; background: transparent; padding: 0; width: 24px; height: 24px; cursor: pointer; color: #221516; align-items: center; justify-content: center; }

@media (max-width: 1100px) { html body .sss-megamenu-panel { width: 480px; } }
@media (max-width: 860px) {
	/* État fermé : barre compacte — burger à gauche, logo centré, seule l'icône panier reste visible
	   à droite (compte/wishlist/CTA passent dans le panneau plein écran, pour ne pas surcharger
	   une barre déjà étroite sur mobile). */
	html body nav.sss-nav-bar { grid-template-columns: auto 1fr auto; width: calc(100% - 24px); padding: 12px 16px; top: 12px; border-radius: 2px; align-items: center; }
	html body .sss-mobile-menu-toggle { display: flex; order: 0; }
	html body nav.sss-nav-bar .sss-nav-logo { order: 1; }
	html body nav.sss-nav-bar .sss-nav-side.sss-nav-left { display: none; }
	html body nav.sss-nav-bar .sss-nav-side.sss-nav-right { order: 2; display: flex; }
	html body nav.sss-nav-bar .sss-nav-side.sss-nav-right ul.sss-nav-menu,
	html body nav.sss-nav-bar .sss-nav-side.sss-nav-right a.sss-nav-cta-btn,
	html body nav.sss-nav-bar .sss-nav-side.sss-nav-right .sss-nav-icon:not(.sss-cart-trigger) { display: none; }

	/* État ouvert : la barre devient un panneau plein écran, tout empilé verticalement. */
	html body nav.sss-nav-bar.sss-mobile-open {
		position: fixed; inset: 0; width: 100%; max-width: none; margin: 0; border-radius: 0;
		grid-template-columns: auto 1fr auto; align-content: flex-start;
		padding: 20px 24px; overflow-y: auto; background: #F4F4F1; backdrop-filter: none;
	}
	html body nav.sss-mobile-open .sss-nav-side.sss-nav-left,
	html body nav.sss-mobile-open .sss-nav-side.sss-nav-right {
		display: flex !important; grid-column: 1 / -1; flex-direction: column; align-items: flex-start;
		gap: 22px; width: 100%; margin-top: 36px;
	}
	html body nav.sss-mobile-open .sss-nav-side.sss-nav-left { order: 3; }
	html body nav.sss-mobile-open .sss-nav-side.sss-nav-right { order: 4; margin-top: 8px; }
	/* Le logo n'avait pas de règle dédiée à l'état ouvert : il restait un item de grille "auto" au
	   lieu de passer en pleine largeur, ce qui le coinçait dans la même ligne que le bouton
	   burger (rogné visuellement) et laissait un vide entre les deux listes de liens à l'endroit
	   où il aurait dû apparaître en haut du panneau. */
	html body nav.sss-mobile-open .sss-nav-logo {
		order: 2; grid-column: 1 / -1; width: 100%; justify-content: center;
		margin: 28px 0 4px; padding: 0;
	}
	html body nav.sss-mobile-open .sss-nav-logo-img { height: 30px; }
	html body nav.sss-mobile-open ul.sss-nav-menu { display: flex !important; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
	html body nav.sss-mobile-open .sss-nav-link { font-size: 20px; font-family: 'Bodoni Moda', 'Playfair Display', Georgia, serif; }
	html body nav.sss-mobile-open .sss-nav-icons { display: flex !important; gap: 22px; margin-top: 8px; }
	html body nav.sss-mobile-open .sss-nav-icons .sss-nav-icon { display: flex !important; width: 26px; height: 26px; }
	html body nav.sss-mobile-open a.sss-nav-cta-btn { display: inline-flex !important; width: 100%; margin-top: 8px; padding: 16px; }

	/* Le panneau au survol (position fixe, apparition au hover) n'a pas de sens en plein écran
	   mobile — mais le supprimer sans rien proposer à la place rendait "Boutique" muet au tap
	   (aucune façon d'atteindre Perruques/Extensions). Il devient ici une liste dépliable
	   normale, intégrée au flux du panneau, ouverte/fermée par le même clic que sur desktop
	   (voir nav.js — .sss-nav-open). */
	html body nav.sss-mobile-open .sss-nav-item-mega { width: 100%; }
	html body nav.sss-mobile-open .sss-megamenu-panel {
		display: none; position: static; opacity: 1; visibility: visible; pointer-events: auto;
		transform: none; box-shadow: none; background: transparent; border: none; padding: 0;
		width: 100%; max-height: none; overflow: visible; margin: 14px 0 0;
	}
	html body nav.sss-mobile-open .sss-megamenu-panel::before { content: none; }
	html body nav.sss-mobile-open li.sss-nav-item-mega.sss-nav-open .sss-megamenu-panel { display: block; }
	html body nav.sss-mobile-open .sss-megamenu-panel-inner { flex-direction: column; gap: 16px; padding: 0; }
	html body nav.sss-mobile-open .sss-megamenu-grid { grid-template-columns: repeat(2, 1fr); }
	html body nav.sss-mobile-open .sss-megamenu-cta { flex: none; }

	html body .sss-megamenu-panel { position: fixed; left: 16px; right: 16px; top: auto; width: auto; max-height: 70vh; overflow-y: auto; }
	html body .sss-megamenu-panel-inner { flex-direction: column; }
}
html body.sss-mobile-menu-open { overflow: hidden; }