/* Synaxis Mega Menu — couleurs de la charte : vert #12271d, crème #fffdf5, sauge #bfc0ac, gris-vert #707767 */
:root {
	--sx-green: #12271d;
	--sx-cream: #fffdf5;
	--sx-sage: #bfc0ac;
	--sx-grey: #707767;
	--sx-ease: cubic-bezier(.25, 1, .5, 1);
}

@media (min-width: 981px) {
	/* L'ancien menu déroulant Divi est masqué quand le mega menu est actif */
	html.sx-mega-ready .et-l--header .et-menu .sub-menu { display: none !important; }

	/* Header au-dessus du voile, et passe en crème quand le panneau est ouvert */

	html.sx-mega-open .et-l--header { position: relative; z-index: 100000; }
	html.sx-mega-open .et-l--header .et_pb_section { background-color: var(--sx-cream) !important; }
	html.sx-mega-open .et-l--header .et-menu > li > a { color: var(--sx-green) !important; opacity: 1 !important; }
	html.sx-mega-open .et-l--header .et_pb_menu__logo img { filter: brightness(53%) !important; }
	html.sx-mega-ready .et-l--header .et-menu > li > a { position: relative; }
	html.sx-mega-ready .et-l--header .et-menu > li > a::before {
		content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: currentColor;
		transform: scaleX(0); transform-origin: left; transition: transform .35s var(--sx-ease);
	}
	html.sx-mega-ready .et-l--header .et-menu > li.sx-active > a::before,
	html.sx-mega-ready .et-l--header .et-menu > li > a:hover::before { transform: scaleX(1); }
}

/* Voile sur la page */
.sx-mega-overlay {
	position: fixed; left: 0; right: 0; bottom: 0; top: 80px; z-index: 99990; background: rgba(18, 39, 29, .35);
	opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.sx-mega-overlay.is-open { opacity: 1; visibility: visible; }

/* Panneau */
.sx-mega { position: fixed; left: 0; right: 0; top: 80px; z-index: 99995; pointer-events: none; }
.sx-mega.is-open { pointer-events: auto; }
.sx-mega__bg {
	position: absolute; inset: 0; background: var(--sx-cream); transform: scaleY(0); transform-origin: top;
	transition: transform .45s var(--sx-ease); box-shadow: 0 30px 60px rgba(18, 39, 29, .15);
	border-top: 1px solid rgba(18, 39, 29, .08);
}
.sx-mega.is-open .sx-mega__bg { transform: scaleY(1); }
.sx-mega__inner { position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 26px 0 34px; }
.sx-mega:not(.is-open) .sx-mega__inner { visibility: hidden; transition: visibility 0s .3s; }
.sx-mega__panel { display: none; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.sx-mega__panel.is-shown { display: grid; }

/* Cartes */
.sx-card {
	position: relative; display: block; height: clamp(200px, 30vh, 290px); border-radius: 14px; overflow: hidden;
	background: var(--sx-green); color: var(--sx-cream) !important; text-decoration: none;
	opacity: 0; transform: translateY(26px) rotate(2deg);
	transition: opacity .5s ease, transform .7s var(--sx-ease);
	transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}
.sx-mega.is-open .is-active .sx-card { opacity: 1; transform: none; }
/* Apparition de l'image : dévoilement de bas en haut (rideau) + léger dézoom, en cascade */
.sx-card__img {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	clip-path: inset(100% 0 0 0); transform: scale(1.3);
	transition: clip-path 1s cubic-bezier(.77, 0, .18, 1), transform 1.4s var(--sx-ease);
	transition-delay: calc(var(--i, 0) * 90ms + 150ms);
}
.sx-mega.is-open .is-active .sx-card__img { clip-path: inset(0 0 0 0); transform: scale(1.02); }
.sx-mega.is-open .is-active .sx-card:hover .sx-card__img,
.sx-mega.is-open .is-active .sx-card:focus-visible .sx-card__img { transition: transform .9s var(--sx-ease); transition-delay: 0s; }
/* Titre et pied de carte arrivent juste après l'image */
.sx-card__title, .sx-card__foot { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--sx-ease); transition-delay: calc(var(--i, 0) * 90ms + 550ms); }
.sx-mega.is-open .is-active .sx-card__title, .sx-mega.is-open .is-active .sx-card__foot { opacity: 1; transform: none; }
.sx-card:not(.sx-card--intro)::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(18, 39, 29, .55) 0%, rgba(18, 39, 29, 0) 42%, rgba(18, 39, 29, 0) 55%, rgba(18, 39, 29, .65) 100%);
}
.sx-mega.is-open .is-active .sx-card:hover .sx-card__img, .sx-mega.is-open .is-active .sx-card:focus-visible .sx-card__img { transform: scale(1.08); }
.sx-card__title {
	position: absolute; z-index: 2; top: 18px; left: 18px; right: 18px;
	font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 22px; line-height: 1.15; letter-spacing: -.01em;
}
.sx-card__foot {
	position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 16px; padding-top: 10px;
	display: flex; justify-content: space-between; align-items: center;
	font-family: 'Rubik', sans-serif; font-size: 14px; font-weight: 400;
	border-top: 1px solid rgba(255, 253, 245, .45);
}
.sx-card__arrow { transition: transform .35s var(--sx-ease); }
.sx-card:hover .sx-card__arrow { transform: translateX(5px); }
.sx-card:focus-visible { outline: 2px solid var(--sx-sage); outline-offset: 3px; }

/* Carte logo (lien avec la classe « sx-logo ») : logo entier, centré entre le titre et le pied */
.sx-card--logo .sx-card__img { inset: 54px 18px 52px; background-size: contain; background-repeat: no-repeat; }
.sx-card--logo::after { background: linear-gradient(180deg, rgba(18, 39, 29, .28) 0%, rgba(18, 39, 29, 0) 26%, rgba(18, 39, 29, 0) 74%, rgba(18, 39, 29, .32) 100%) !important; }
.sx-mega.is-open .is-active .sx-card--logo:hover .sx-card__img,
.sx-mega.is-open .is-active .sx-card--logo:focus-visible .sx-card__img { transform: scale(1.05); }

/* Carte d'intro (texte) */
.sx-card--intro {
	background: #efede3; color: var(--sx-green) !important; padding: 20px 20px 18px;
	display: flex; flex-direction: column;
}
.sx-card__eyebrow { font-family: 'Rubik', sans-serif; font-weight: 200; font-size: 28px; line-height: 1.1; margin: 0 0 10px; padding: 0; color: var(--sx-green); }
.sx-card__desc { font-family: 'Rubik', sans-serif; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--sx-grey); margin: 0; padding: 0; }
.sx-card__link {
	margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(18, 39, 29, .25);
	font-family: 'Rubik', sans-serif; font-size: 14px; color: var(--sx-green) !important; text-decoration: none;
	display: flex; justify-content: space-between;
}
.sx-card__link:hover { color: var(--sx-grey) !important; }
.sx-card--plain { background: var(--sx-green); }

@media (max-width: 980px) {
	.sx-mega, .sx-mega-overlay { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-card, .sx-mega__bg, .sx-card__img, .sx-card__title, .sx-card__foot { transition: none !important; }
}