/* Méga menu de l'en-tête (mu-plugin bp-skeditions-mega-menu.php), organisé et animé comme celui de Weba :
   la carte naît du bouton « Menu », s'étire, puis son contenu monte en cascade. */
.sk-mega { display: none; }

@media (min-width: 992px) {
	.sk-entete { position: relative; z-index: 100; }
	.sk-mega { display: block; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; padding: 8px var(--sp-24) 0; pointer-events: none; }
	.sk-mega[hidden] { display: none; }
	/* Pont invisible entre le bouton et la carte : le survol ne se perd pas en chemin. */
	.sk-mega::before { content: ""; position: absolute; top: -21px; left: 0; right: 0; height: 29px; pointer-events: auto; }

	.sk-mega__carte { position: relative; width: 100%; max-width: 1280px; max-height: calc(100vh - 215px); margin-inline: auto; padding: var(--sp-24) 14px 14px; overflow-y: auto; border-radius: 22px; background: var(--color-white); box-shadow: 0 30px 70px -16px rgba(17, 20, 45, .35); pointer-events: auto; }
	.sk-mega__grille { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* autant de colonnes que d'entrées de premier niveau */
	.sk-mega__col { display: flex; flex-direction: column; padding-inline: 14px; }
	.sk-mega__col + .sk-mega__col { border-left: 1px solid var(--color-grey-2); }
	.sk-mega__col ul { margin: 0; padding: 0; list-style: none; }

	.sk-mega strong { display: block; font: 700 var(--fs-16)/1.3 var(--font-heading); color: var(--color-dark); }
	.sk-mega small { display: block; margin-top: 2px; font: 400 var(--fs-14)/1.35 var(--font-body); color: var(--color-text-muted); }

	/* en-tête de colonne */
	.sk-mega__tete { display: flex; align-items: center; gap: var(--sp-12); margin-bottom: 6px; padding: 0 12px 14px; border-bottom: 1px solid var(--color-grey-2); text-decoration: none; }
	.sk-mega__tete strong { font-size: var(--fs-18); }
	.sk-mega__tete:hover strong { color: var(--color-primary); }
	.sk-mega__icone { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary-soft); }
	.sk-mega__icone .sk-ic-1 { stroke: var(--color-primary); }
	.sk-mega__icone .sk-ic-2 { stroke: var(--color-accent); }

	/* liens */
	.sk-mega__lien { position: relative; display: block; padding: 5px 12px; border-radius: 12px; text-decoration: none; transition: background-color .15s; }
	.sk-mega__lien strong::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 6px; vertical-align: -2px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
	.sk-mega__lien:hover, .sk-mega__lien:focus-visible { background-color: var(--color-primary-soft); }
	.sk-mega__lien:hover strong, .sk-mega__lien:focus-visible strong, .sk-mega__lien--courant strong { color: var(--color-primary); }
	.sk-mega__lien:hover strong::after, .sk-mega__lien:focus-visible strong::after { opacity: 1; transform: none; }
	.sk-mega__groupe { padding: 12px 12px 3px; font: 700 var(--fs-12)/1.3 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }

	/* meilleure vente, au bas de la dernière colonne */
	.sk-mega__vente { display: flex; align-items: center; gap: var(--sp-12); margin-top: auto; padding: 10px 12px; border-radius: 12px; text-decoration: none; transition: background-color .15s; }
	.sk-mega__vente:hover { background-color: var(--color-primary-soft); }
	.sk-mega__vente img { flex: none; width: 54px; height: auto; border-radius: 6px; box-shadow: 0 6px 14px rgba(17, 20, 45, .2); }
	.sk-mega__vente em { display: block; margin-bottom: 2px; font: 700 var(--fs-12)/1.3 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--color-accent-text); }
	.sk-mega__vente strong { font-size: var(--fs-14); }
	.sk-mega__vente small { color: var(--color-primary); font-weight: 600; }

	/* bandeau du bas */
	.sk-mega__promo { display: flex; align-items: center; gap: var(--sp-16); margin-top: var(--sp-12); padding: 12px var(--sp-16); border-radius: 14px; background: var(--color-primary-soft); text-decoration: none; }
	.sk-mega__promo .sk-mega__icone { background: var(--color-white); }
	.sk-mega__promo-texte { flex: 1 1 auto; min-width: 0; }
	.sk-mega__promo-texte .woocommerce-Price-amount { font: inherit; color: inherit; }
	.sk-mega__promo-lien { flex: none; font: 700 var(--fs-16)/1 var(--font-heading); color: var(--color-primary); }
	.sk-mega__promo-lien::after { content: "→"; display: inline-block; margin-left: 8px; transition: transform .2s; }
	.sk-mega__promo:hover .sk-mega__promo-lien::after { transform: translateX(3px); }

	/* animation : la carte est découpée, pas déformée, son contenu reste net */
	.sk-mega--entre { animation: sk-mega-entre .7s both, sk-mega-fondu .12s both; }
	.sk-mega--sort { animation: sk-mega-sort .5s both; pointer-events: none; }
	.sk-mega--entre .sk-mega__bloc { animation: sk-mega-monte .45s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(140ms + var(--i, 0) * 55ms); }
	.sk-mega--sort .sk-mega__bloc { animation: sk-mega-descend .22s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc((var(--n, 1) - 1 - var(--i, 0)) * 35ms); }
}

@keyframes sk-mega-entre {
	0% { clip-path: inset(var(--sk-h) var(--sk-d) var(--sk-b) var(--sk-g) round var(--sk-r0)); transform: translateY(calc(-1 * var(--sk-dy))); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
	78% { clip-path: inset(0 0 0 0 round var(--sk-r1)); transform: none; animation-timing-function: linear; }
	100% { clip-path: inset(-60px -60px -100px -60px round var(--sk-r1)); transform: none; }
}
@keyframes sk-mega-fondu { 0% { opacity: 0; } }
@keyframes sk-mega-sort {
	0% { clip-path: inset(-60px -60px -100px -60px round var(--sk-r1)); transform: none; opacity: 1; animation-timing-function: linear; }
	18% { clip-path: inset(0 0 0 0 round var(--sk-r1)); transform: none; opacity: 1; animation-timing-function: cubic-bezier(.64, 0, .78, 0); }
	78% { opacity: 1; }
	100% { clip-path: inset(var(--sk-h) var(--sk-d) var(--sk-b) var(--sk-g) round var(--sk-r0)); transform: translateY(calc(-1 * var(--sk-dy))); opacity: 0; }
}
@keyframes sk-mega-monte { 0% { opacity: 0; transform: translateY(10px); } }
@keyframes sk-mega-descend { 100% { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
	.sk-mega--entre, .sk-mega--sort, .sk-mega--entre .sk-mega__bloc, .sk-mega--sort .sk-mega__bloc { animation: none; }
}

/* ---------- Menu burger (moins de 992 px) : la carte de Weba, sur le menu mobile de Bricks ----------
   Une carte blanche arrondie qui tombe sous la ligne du logo, à 12 px des bords, au lieu du tiroir latéral ; voile
   sombre sur la page ; entrées de 52 px avec l'icône de la colonne (bp-skeditions-mega-menu.php) ; sous-menus en
   accordéon ; appel à l'action en pied de carte (menu.js). Le bouton est une pastille de 44 px comme le reste de
   l'en-tête, ses traits se croisent à l'ouverture. menu.js place la carte (--sk-menu-haut) sous le bouton. */
.sk-menu .bricks-nav-menu .sk-menu-icone { display: none; }
@media (max-width: 991px) {
	.sk-entete__haut > :first-child { margin-left: 56px; }
	.sk-nav-recherche > .sk-menu { height: 48px; top: 28px; } /* centré sur les boutons de 56 px de l'en-tête (haut à 24 px) */
	.sk-menu .bricks-mobile-menu-toggle { width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary-soft); color: var(--color-primary); transition: background-color .18s; }
	.sk-menu .bricks-mobile-menu-toggle:hover { background: #F0E1E3; }
	.sk-menu .bricks-mobile-menu-toggle span { left: 14px; right: auto; width: 20px !important; min-width: 0; height: 2px; border-radius: 2px; transition: transform .25s cubic-bezier(.2, .7, .2, 1), top .25s cubic-bezier(.2, .7, .2, 1), opacity .15s; }
	.sk-menu .bricks-mobile-menu-toggle .bar-top { top: 17px; }
	.sk-menu .bricks-mobile-menu-toggle .bar-center { top: 23px; }
	.sk-menu .bricks-mobile-menu-toggle .bar-bottom { top: 29px; }
	.sk-menu.show-mobile-menu .bricks-mobile-menu-toggle { position: relative; width: 48px; min-width: 48px; z-index: 1001; background: var(--color-white); color: var(--color-dark); }
	.sk-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-top { top: 23px; transform: rotate(45deg); }
	.sk-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-center { opacity: 0; }
	.sk-menu.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom { top: 23px; transform: rotate(-45deg); }

	.sk-menu .bricks-mobile-menu-overlay { background: rgba(17, 20, 45, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity .25s, visibility .25s; }

	.sk-menu .bricks-mobile-menu-wrapper, .sk-menu .bricks-mobile-menu-wrapper.left {
		top: var(--sk-menu-haut, 84px); bottom: auto; left: 12px; right: 12px; width: auto; max-width: none; height: auto;
		max-height: calc(100dvh - var(--sk-menu-haut, 84px) - 12px); padding: 8px; overflow-y: auto; overscroll-behavior: contain;
		border-radius: 22px; background: var(--color-white); box-shadow: 0 30px 70px -16px rgba(17, 20, 45, .45);
		opacity: 0; transform: none; visibility: hidden; pointer-events: none;
		transition: opacity .2s ease, visibility 0s linear .2s;
	}
	.sk-menu.show-mobile-menu .bricks-mobile-menu-wrapper, .sk-menu.show-mobile-menu .bricks-mobile-menu-wrapper.left { opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; transition: opacity .2s ease, visibility 0s; }
	.sk-menu .bricks-mobile-menu-wrapper::before { content: none; }

	/* entrées de premier niveau */
	.sk-menu .bricks-mobile-menu { margin: 0; padding: 0; }
	.sk-menu .bricks-mobile-menu > li { border: 0; border-radius: 14px; transition: background-color .15s; }
	.sk-menu .bricks-mobile-menu > li + li:not(.sk-menu-cta) { margin-top: 2px; }
	.sk-menu .bricks-mobile-menu > li > .brx-submenu-toggle, .sk-menu .bricks-mobile-menu > li > a { display: flex; align-items: center; min-height: 56px; padding: 0 6px 0 8px; border-radius: 14px; }
	.sk-menu .bricks-mobile-menu > li > .brx-submenu-toggle:hover, .sk-menu .bricks-mobile-menu > li.open > .brx-submenu-toggle { background: var(--color-primary-soft); }
	.sk-menu .bricks-mobile-menu > li > .brx-submenu-toggle > a, .sk-menu .bricks-mobile-menu > li > a { display: flex; flex: 1; align-items: center; gap: 12px; padding: 0; line-height: 1.25; font: 700 var(--fs-16)/1.25 var(--font-heading); color: var(--color-dark); }
	.sk-menu .sk-menu-icone { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); }
	.sk-menu .sk-menu-icone svg { width: 24px; height: 24px; }
	.sk-menu .sk-menu-icone .sk-ic-1 { stroke: var(--color-primary); }
	.sk-menu .sk-menu-icone .sk-ic-2 { stroke: var(--color-accent); }
	.sk-menu .bricks-mobile-menu > li.open .sk-menu-icone { background: var(--color-white); }
	.sk-menu .bricks-mobile-menu .brx-submenu-toggle button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 10px; color: var(--color-text-muted); }
	.sk-menu .bricks-mobile-menu .brx-submenu-toggle button svg { width: 14px; height: 14px; transition: transform .2s ease; }
	.sk-menu .bricks-mobile-menu li.open > .brx-submenu-toggle button { color: var(--color-primary); }
	.sk-menu .bricks-mobile-menu li.open > .brx-submenu-toggle button svg { transform: rotate(180deg); }

	/* sous-menus : alignés sur le texte de l'entrée (icône 40 px + 12 px). La rubrique se déplie en douceur (hauteur et
	   fondu) au lieu d'apparaître d'un coup, et se replie de même ; ses liens arrivent un à un en glissant depuis la gauche. */
	.sk-menu .bricks-mobile-menu-wrapper .sub-menu { display: block !important; max-height: 0; margin: 0; padding: 0 0 0 60px; overflow: hidden; opacity: 0; visibility: hidden; line-height: 1.3;
		transition: max-height .38s cubic-bezier(.2, .7, .2, 1), opacity .25s ease, padding .38s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .38s; }
	.sk-menu .bricks-mobile-menu-wrapper li.open > .sub-menu { max-height: 720px; padding: 4px 0 10px 60px; opacity: 1; visibility: visible;
		transition: max-height .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease .05s, padding .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
	.sk-menu .bricks-mobile-menu .sub-menu li > a, .sk-menu .bricks-mobile-menu .sub-menu li > .brx-submenu-toggle > * { padding: 9px 12px; }
	.sk-menu .bricks-mobile-menu .sub-menu a { display: block; border-radius: 10px; font: 600 15px/1.3 var(--font-body); color: var(--color-dark); transition: background-color .15s, color .15s; }
	.sk-menu .bricks-mobile-menu .sub-menu a:hover, .sk-menu .bricks-mobile-menu .sub-menu .current-menu-item > a { background: var(--color-primary-soft); color: var(--color-primary); }
	.sk-menu .bricks-mobile-menu li.open > .sub-menu > li { animation: sk-menu-glisse .4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.06s + var(--sk-rang, 0) * .035s); }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(2) { --sk-rang: 1; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(3) { --sk-rang: 2; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(4) { --sk-rang: 3; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(5) { --sk-rang: 4; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(6) { --sk-rang: 5; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(7) { --sk-rang: 6; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(8) { --sk-rang: 7; }
	.sk-menu .bricks-mobile-menu .sub-menu > li:nth-child(n+9) { --sk-rang: 8; }
	/* l'icône de la rubrique ouverte fait un petit rebond */
	.sk-menu .bricks-mobile-menu > li > .brx-submenu-toggle { transition: background-color .2s; }
	.sk-menu .sk-menu-icone { transition: background-color .2s; }
	.sk-menu .bricks-mobile-menu > li.open .sk-menu-icone svg { animation: sk-menu-rebond .45s cubic-bezier(.3, 1.6, .5, 1) both; }

	/* à l'ouverture, les entrées montent en cascade */
	.sk-menu.show-mobile-menu .bricks-mobile-menu > li { animation: sk-menu-cascade .32s cubic-bezier(.2, .7, .2, 1) both; }
	.sk-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(2) { animation-delay: .04s; }
	.sk-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(3) { animation-delay: .08s; }
	.sk-menu.show-mobile-menu .bricks-mobile-menu > li:nth-child(n+4) { animation-delay: .12s; }

	/* appel à l'action en pied de carte (ajouté par menu.js) */
	.sk-menu .bricks-mobile-menu > li.sk-menu-cta { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-grey-2); border-radius: 0; }
	.sk-menu .bricks-mobile-menu > li.sk-menu-cta > a { justify-content: center; min-height: 52px; border-radius: 14px; background: var(--color-primary); color: var(--color-white); font: 700 var(--fs-16)/1.2 var(--font-heading); }
	.sk-menu .bricks-mobile-menu > li.sk-menu-cta > a:hover { background: var(--color-primary-hover); color: var(--color-white); }
}
@media (max-width: 767px) { .sk-nav-recherche > .sk-menu { top: 12px; } } /* boutons de 48 px, haut à 12 px */
@keyframes sk-menu-cascade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes sk-menu-glisse { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes sk-menu-rebond { 0% { transform: scale(1); } 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.sk-menu .bricks-mobile-menu-wrapper, .sk-menu .bricks-mobile-menu-toggle span { transition: none !important; }
	.sk-menu .bricks-mobile-menu li, .sk-menu .sk-menu-icone svg { animation: none !important; }
	.sk-menu .bricks-mobile-menu-wrapper .sub-menu { transition: none !important; }
}

/* Ouverture « morphing », comme Weba (menu.js) : la carte naît d'une pastille de la taille du bouton, juste dessous, et
   s'étire jusqu'à sa taille ; elle est découpée (clip-path), pas déformée, donc son contenu reste net. À la fermeture,
   les entrées redescendent en cascade inverse puis la carte se résorbe dans le bouton (sk-fermeture la garde affichée). */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
	.sk-menu .bricks-mobile-menu-wrapper.sk-morph-in { animation: sk-morph-in .62s both, sk-morph-fondu .12s both; }
	.sk-menu.sk-fermeture .bricks-mobile-menu-wrapper { opacity: 1 !important; visibility: visible !important; pointer-events: none; }
	.sk-menu .bricks-mobile-menu-wrapper.sk-morph-out { animation: sk-morph-out .46s both; }
	.sk-menu .bricks-mobile-menu-wrapper.sk-morph-out .bricks-mobile-menu > li { animation: sk-morph-descend .2s cubic-bezier(.5, 0, .75, 0) both; animation-delay: calc((var(--sk-n, 4) - 1 - var(--sk-i, 0)) * 30ms); }
	.sk-menu.sk-fermeture .bricks-mobile-menu-overlay { opacity: 1; visibility: visible; transition: opacity .3s ease .16s; }
}
@keyframes sk-morph-in {
	0% { clip-path: inset(0 var(--sk-d, 0px) var(--sk-b, 0px) var(--sk-g, 0px) round var(--sk-r0, 14px)); transform: translateY(calc(-1 * var(--sk-dy, 0px))); animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
	78% { clip-path: inset(0 0 0 0 round 22px); transform: none; animation-timing-function: linear; }
	100% { clip-path: inset(-60px -60px -100px -60px round 22px); transform: none; }
}
@keyframes sk-morph-fondu { from { opacity: 0; } }
@keyframes sk-morph-out {
	0% { clip-path: inset(-60px -60px -100px -60px round 22px); transform: none; opacity: 1; animation-timing-function: linear; }
	18% { clip-path: inset(0 0 0 0 round 22px); transform: none; opacity: 1; animation-timing-function: cubic-bezier(.64, 0, .78, 0); }
	78% { opacity: 1; }
	100% { clip-path: inset(0 var(--sk-d, 0px) var(--sk-b, 0px) var(--sk-g, 0px) round var(--sk-r0, 14px)); transform: translateY(calc(-1 * var(--sk-dy, 0px))); opacity: 0; }
}
@keyframes sk-morph-descend { to { opacity: 0; transform: translateY(10px); } }
/* « Tout voir » en tête de chaque rubrique du burger (menu.js) : le lien de la rubrique, que le titre ne porte plus. */
@media (max-width: 991px) {
	.sk-menu .bricks-mobile-menu > li.menu-item-has-children > .brx-submenu-toggle { cursor: pointer; }
	.sk-menu .bricks-mobile-menu > li.menu-item-has-children > .brx-submenu-toggle > a[tabindex="-1"] { outline: none; } /* le titre ne fait que dérouler ; au clavier, la flèche garde son contour */
	.sk-menu .bricks-mobile-menu .sub-menu > li.sk-menu-tout > a { display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 700; }
	.sk-menu .bricks-mobile-menu .sub-menu > li.sk-menu-tout > a::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s; }
	.sk-menu .bricks-mobile-menu .sub-menu > li.sk-menu-tout > a:hover::after { transform: translateX(3px); }
}