/*
 * LC Médical — Comptoir : "Tous les rayons".
 * Desktop: a panel pulled down from under the header (clip-path reveal, exponential ease-out).
 * Below 1000px: the same panel is a bottom sheet pulled up from the tab bar.
 * JS toggles .is-open on [data-lc-mega-panel] (assets/js/mega-menu.js).
 */

.lc-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 90;
	pointer-events: none;
}

.lc-mega__panel {
	pointer-events: auto;
	max-block-size: calc(100dvh - var(--lc-hd-h) - var(--lc-s-5));
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--lc-paper);
	border-block-end: 1px solid var(--lc-line, rgb(20 36 107 / 0.14));
	box-shadow: var(--lc-shadow-panel);
	visibility: hidden;
	opacity: 0;
	clip-path: inset(0 -60px 100% -60px);
	transform: translate3d(0, -14px, 0);
	transition: clip-path var(--lc-dur-drawer) var(--lc-ease-out), transform var(--lc-dur-drawer) var(--lc-ease-out), opacity var(--lc-dur-med) linear, visibility 0s linear var(--lc-dur-drawer);
}

.lc-mega__panel.is-open {
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 -60px -90px -60px);
	transform: none;
	transition-delay: 0s;
}

.lc-mega__head {
	display: none;
}

.lc-mega__cols {
	column-width: 15rem;
	column-gap: var(--lc-s-6);
	padding-block: var(--lc-s-6) var(--lc-s-4);
}

.lc-mega__col {
	break-inside: avoid;
	margin-block-end: var(--lc-s-5);
}

.lc-mega__title {
	display: flex;
	align-items: center;
	gap: var(--lc-s-3);
	padding-block-end: 0.4rem;
	margin-block-end: 0.35rem;
	border-block-end: 1px solid var(--lc-line, rgb(20 36 107 / 0.14));
	color: var(--lc-ink);
	font: 700 1.1875rem/1.2 var(--lc-font-label);
	text-decoration: none;
}

.lc-mega__title:hover {
	color: var(--lc-link-hover);
}

/* Department icon: the same branded set and disc as the home Catégories, smaller. */
.lc-mega__disc {
	--lc-icon-accent: var(--lc-blue-500);

	display: grid;
	flex: none;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: 50%;
	background: var(--lc-navy-50);
	color: var(--lc-navy-800);
	transition: box-shadow var(--lc-dur-med) var(--lc-ease-out);
}

.lc-mega__icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	stroke-width: 1.6;
}

.lc-mega__title:hover .lc-mega__disc {
	box-shadow: 0 0 0 2px var(--lc-accent);
}

.lc-mega__name {
	min-inline-size: 0;
}

.lc-mega__list {
	margin: 0;
	padding: 0;
	padding-inline-start: calc(2.5rem + var(--lc-s-3)); /* under the name, not the icon */
	list-style: none;
}

.lc-mega__link {
	display: block;
	padding-block: 0.32rem;
	color: var(--lc-ink-2);
	font-size: var(--lc-fs-sm);
	text-decoration: none;
}

.lc-mega__link:hover {
	color: var(--lc-link-hover);
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.lc-mega__extra {
	background: var(--lc-shelf);
	border-block-start: 1px solid var(--lc-line);
}

.lc-mega__extra-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-s-3) var(--lc-s-6);
	padding-block: var(--lc-s-3);
}

.lc-mega__svc .lc-svc__menu a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--lc-tap);
	color: var(--lc-ink);
	font: 600 1.0625rem/1 var(--lc-font-label);
	text-decoration: none;
}

.lc-mega__svc .lc-svc__menu a:hover {
	color: var(--lc-link-hover);
}

.lc-mega__contact {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	min-block-size: var(--lc-tap);
	color: var(--lc-ink);
	font-size: var(--lc-fs-sm);
	font-weight: 700;
	text-decoration: none;
}

.lc-mega__contact:hover {
	color: var(--lc-link-hover);
}

.lc-mega__contact .lc-icon {
	color: var(--lc-accent);
}

.lc-mega__contact--wa .lc-icon {
	color: var(--lc-ok);
}

.lc-mega__contact:first-of-type {
	margin-inline-start: auto;
}

@media (min-width: 1000px) {
	.lc-mega__account {
		display: none;
	}
}

/* ---------- Bottom sheet (mobile and tablet) ---------- */
@media (max-width: 999.98px) {
	.lc-mega {
		position: fixed;
		inset: 0;
		z-index: 130;
	}

	.lc-mega__panel {
		position: absolute;
		inset-inline: 0;
		inset-block-end: 0;
		max-block-size: 88dvh;
		padding-block-end: var(--lc-safe-bottom);
		border-block-end: 0;
		border-start-start-radius: var(--lc-r-sheet);
		border-start-end-radius: var(--lc-r-sheet);
		opacity: 1;
		clip-path: none;
		transform: translate3d(0, 100%, 0);
		transition: transform var(--lc-dur-drawer) var(--lc-ease-out), visibility 0s linear var(--lc-dur-drawer);
	}

	.lc-mega__panel.is-open {
		clip-path: none;
		transform: none;
	}

	.lc-mega__head {
		position: sticky;
		inset-block-start: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--lc-s-2) var(--lc-s-2) var(--lc-s-2) var(--lc-gutter);
		background: var(--lc-paper);
		border-block-end: 1px solid var(--lc-line, rgb(20 36 107 / 0.14));
	}

	.lc-mega__heading {
		font: 700 1.375rem/1.1 var(--lc-font-label);
		color: var(--lc-ink);
	}

	.lc-mega__close {
		display: inline-grid;
		place-items: center;
		inline-size: var(--lc-tap);
		block-size: var(--lc-tap);
		padding: 0;
		border: 0;
		border-radius: var(--lc-r-field);
		background: transparent;
		color: var(--lc-ink);
		cursor: pointer;
	}

	.lc-mega__cols {
		column-width: auto;
		column-count: 1;
		padding-block-start: var(--lc-s-4);
	}

	.lc-mega__link {
		min-block-size: var(--lc-tap);
		display: flex;
		align-items: center;
		font-size: 1rem;
	}

	.lc-mega__title {
		min-block-size: var(--lc-tap);
		display: flex;
		align-items: center;
		font-size: 1.25rem;
	}

	.lc-mega__contact:first-of-type {
		margin-inline-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lc-mega__panel {
		transform: none;
	}
}