/*
 * LC Médical — Comptoir : layout primitives and shared components.
 * .lc-container .lc-grid .lc-stack .lc-cluster .lc-icon .lc-label .lc-chip .lc-drawer .lc-notice .lc-dialog .lc-eta
 * Logical properties only.
 */

/* ---------- Layout ---------- */
.lc-container {
	inline-size: min(100% - 2 * var(--lc-gutter), var(--lc-container));
	margin-inline: auto;
}

.lc-container--narrow {
	inline-size: min(100% - 2 * var(--lc-gutter), 880px);
	margin-inline: auto;
}

.lc-section {
	padding-block: var(--lc-section);
}

.lc-band {
	background: var(--lc-shelf-2);
}

.lc-band--lacquer {
	background: var(--lc-navy-800);
	color: #fff;
}

/* 12-column ruler. Children span the full row on mobile; use .lc-span-N from 1000px and .lc-mspan-N below it. */
.lc-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--lc-gap);
}

.lc-grid > * {
	grid-column: 1 / -1;
	min-inline-size: 0;
}

@media (max-width: 999.98px) {
	.lc-grid > .lc-mspan-6 { grid-column: span 6; }
	.lc-grid > .lc-mspan-4 { grid-column: span 4; }
	.lc-grid > .lc-mspan-3 { grid-column: span 3; }
	.lc-grid > .lc-mspan-12 { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
	.lc-grid > .lc-span-1 { grid-column: span 1; }
	.lc-grid > .lc-span-2 { grid-column: span 2; }
	.lc-grid > .lc-span-3 { grid-column: span 3; }
	.lc-grid > .lc-span-4 { grid-column: span 4; }
	.lc-grid > .lc-span-5 { grid-column: span 5; }
	.lc-grid > .lc-span-6 { grid-column: span 6; }
	.lc-grid > .lc-span-7 { grid-column: span 7; }
	.lc-grid > .lc-span-8 { grid-column: span 8; }
	.lc-grid > .lc-span-9 { grid-column: span 9; }
	.lc-grid > .lc-span-10 { grid-column: span 10; }
	.lc-grid > .lc-span-12 { grid-column: 1 / -1; }
}

/* Vertical rhythm: tight inside a group, generous between groups. */
.lc-stack {
	display: flex;
	flex-direction: column;
	gap: var(--lc-stack-gap, var(--lc-s-4));
}

.lc-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lc-cluster-gap, var(--lc-s-3));
}

/* Visually hidden, still announced. */
.lc-vh {
	position: absolute !important;
	inline-size: 1px !important;
	block-size: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---------- Icons: one drawn set, one stroke ---------- */
.lc-icon {
	inline-size: 1.25em;
	block-size: 1.25em;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -0.2em;
}

/* ---------- The paper label in its holder (signature element: drawer labels only) ----------
   <span class="lc-label"><span class="lc-label__paper">Orthopédie</span></span>
   Flat: an outline around white paper. No bevel, no inset, no shadow. The holder is bright medical blue on navy (4.19:1 on
   navy-800, 4.96:1 on navy-900, non-text) and navy-800 on a light ground (bright blue is 3.07:1 on grey and never used
   there). Bright blue frames labels on navy surfaces and the drawer pull bar.
   Phase 4: add <span class="lc-label__ar" lang="ar" dir="rtl">…</span> inside the paper. */
.lc-label {
	display: inline-flex;
	max-inline-size: 100%;
	padding: 2px;
	background: var(--lc-navy-800);
	border-radius: var(--lc-r-holder);
	color: var(--lc-ink);
	vertical-align: middle;
}

.lc-label--on-dark,
.lc-on-dark .lc-label,
.lc-drawer__front .lc-label,
.lc-archive__label.lc-label {
	background: var(--lc-accent);
}

.lc-label__paper {
	display: block;
	min-inline-size: 0;
	padding: 0.34em 0.75em 0.3em;
	background: var(--lc-paper);
	border-radius: var(--lc-r-label);
	font-family: var(--lc-font-label);
	font-size: var(--lc-fs-xs);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: var(--lc-track-label);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.lc-label--lg .lc-label__paper {
	padding: 0.5em 1em 0.45em;
	font-size: var(--lc-fs-sm);
}

/* Arabic slot: reserved, hidden until Phase 4 fills it. */
.lc-label__ar {
	display: none;
}

html[lang|='ar'] .lc-label__ar {
	display: block;
	font-family: var(--lc-font-label-ar);
	direction: rtl;
	letter-spacing: 0;
	text-transform: none;
}

/* ---------- Chip / pill ---------- */
.lc-chip,
.lc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.32em 0.85em;
	border: 1px solid var(--lc-line-strong);
	border-radius: var(--lc-r-pill);
	font-size: var(--lc-fs-sm);
	line-height: 1.3;
	color: var(--lc-ink);
	background: transparent;
}

.lc-on-dark .lc-chip,
.lc-on-dark .lc-pill {
	border-color: rgb(255 255 255 / 0.3);
	color: var(--lc-navy-100);
}

/* ---------- Drawer: a flat navy front in the wall; pulled forward on hover, focus or tap ----------
   <article class="lc-drawer">
     <a class="lc-drawer__front" href="…"><span class="lc-label"><span class="lc-label__paper">Mobilité</span></span>…</a>
     <div class="lc-drawer__pull">…sub-departments, products…</div>
   </article>
   Tap/keyboard: add a <button class="lc-drawer__toggle" data-lc-drawer-toggle aria-expanded="false"> (ui.js toggles .is-pulled).
   Honest material: a solid navy field. The only depth is the offset + blur shadow of a drawer that is pulled forward. */
.lc-drawer {
	position: relative;
	isolation: isolate;
}

.lc-drawer__front {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lc-s-5);
	min-block-size: var(--lc-drawer-h, 9.5rem);
	padding: var(--lc-s-4);
	background-color: var(--lc-navy-800);
	color: #fff;
	border-radius: var(--lc-r-drawer);
	text-decoration: none;
	transform: translate3d(0, 0, 0);
	transition: transform var(--lc-dur-drawer) var(--lc-ease-out), box-shadow var(--lc-dur-drawer) var(--lc-ease-out);
}

.lc-drawer:is(:focus-within, .is-pulled) .lc-drawer__front {
	transform: translate3d(0, -6px, 0);
	box-shadow: var(--lc-shadow-pulled);
	z-index: 2;
}

@media (hover: hover) {
	.lc-drawer:hover .lc-drawer__front {
		transform: translate3d(0, -6px, 0);
		box-shadow: var(--lc-shadow-pulled);
		z-index: 2;
	}
}

.lc-drawer__pull {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 2px);
	z-index: 3;
	padding: var(--lc-s-4);
	background: var(--lc-paper);
	color: var(--lc-ink);
	border-radius: var(--lc-r-drawer);
	box-shadow: var(--lc-shadow-panel);
	visibility: hidden;
	opacity: 0;
	clip-path: inset(0 -40px 100% -40px);
	transform: translate3d(0, -12px, 0);
	transition: transform var(--lc-dur-drawer) var(--lc-ease-out), clip-path var(--lc-dur-drawer) var(--lc-ease-out), opacity var(--lc-dur-med) linear, visibility 0s linear var(--lc-dur-drawer);
}

.lc-drawer:is(:focus-within, .is-pulled) .lc-drawer__pull {
	visibility: visible;
	opacity: 1;
	clip-path: inset(0 -40px -60px -40px);
	transform: none;
	transition-delay: 0s;
}

@media (hover: hover) {
	.lc-drawer:hover .lc-drawer__pull {
		visibility: visible;
		opacity: 1;
		clip-path: inset(0 -40px -60px -40px);
		transform: none;
		transition-delay: 0s;
	}
}

/* ---------- State messages (red only for errors) ---------- */
.lc-notice {
	padding: var(--lc-s-3) var(--lc-s-4);
	border: 1px solid var(--lc-navy-200);
	border-radius: var(--lc-r-field);
	background: var(--lc-blue-50);
	color: var(--lc-ink);
	font-size: var(--lc-fs-sm);
}

.lc-notice--ok {
	background: var(--lc-ok-bg);
	border-color: var(--lc-ok-line);
	color: var(--lc-ok-deep);
}

.lc-notice--warn {
	background: var(--lc-warn-bg);
	border-color: var(--lc-warn-line);
	color: var(--lc-warn);
}

.lc-notice--err {
	background: var(--lc-err-bg);
	border-color: var(--lc-err-line);
	color: var(--lc-err);
}

/* ---------- Delivery promise line ---------- */
.lc-eta {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	font-size: var(--lc-fs-sm);
	font-weight: 500;
	color: var(--lc-ok-deep);
}

/* ---------- Backdrop ---------- */
.lc-backdrop {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgb(20 36 107 / 0.55);
}

.lc-backdrop[hidden] {
	display: none;
}

/* ---------- Dialog: a drawer pulled out toward the visitor ---------- */
.lc-dialog {
	inline-size: 100%;
	max-inline-size: min(580px, calc(100vw - 2 * var(--lc-gutter)));
	max-block-size: min(86dvh, 740px);
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--lc-r-sheet);
	background: var(--lc-paper);
	color: var(--lc-ink);
	box-shadow: var(--lc-shadow-panel);
}

.lc-dialog::backdrop {
	background: rgb(20 36 107 / 0.58);
}

.lc-dialog[open] {
	animation: lc-pull-in var(--lc-dur-drawer) var(--lc-ease-out) both;
}

.lc-dialog__box {
	display: flex;
	flex-direction: column;
	gap: var(--lc-s-3);
	max-block-size: inherit;
	padding: var(--lc-s-5);
}

.lc-dialog__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lc-s-4);
}

.lc-dialog__title {
	margin: 0;
	font-size: var(--lc-fs-h3);
}

.lc-dialog__hint {
	margin: 0;
	color: var(--lc-ink-muted);
}

.lc-dialog__close {
	display: inline-grid;
	place-items: center;
	flex: none;
	inline-size: var(--lc-tap);
	block-size: var(--lc-tap);
	margin: calc(-1 * var(--lc-s-2)) calc(-1 * var(--lc-s-2)) 0 0;
	padding: 0;
	border: 0;
	border-radius: var(--lc-r-field);
	background: transparent;
	color: var(--lc-ink);
	cursor: pointer;
}

.lc-dialog__close:hover {
	background: var(--lc-shelf-2);
}

@keyframes lc-pull-in {
	from {
		opacity: 0;
		transform: translate3d(0, 28px, 0) scale(0.985);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 689.98px) {
	.lc-dialog {
		inset-block-end: 0;
		margin-block-end: 0;
		max-inline-size: none;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
		padding-block-end: var(--lc-safe-bottom);
	}

	.lc-dialog[open] {
		animation-name: lc-sheet-in;
	}
}

@keyframes lc-sheet-in {
	from {
		transform: translate3d(0, 100%, 0);
	}

	to {
		transform: none;
	}
}

/* City list inside the dialog. */
.lc-dialog__filter {
	inline-size: 100%;
}

.lc-dialog__filter[hidden] {
	display: none;
}

.lc-dialog__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: var(--lc-s-2);
	max-block-size: 46dvh;
	margin: 0;
	padding: 4px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}

.lc-dialog__list > li[hidden] {
	display: none;
}

.lc-dialog__city {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lc-s-2);
	inline-size: 100%;
	min-block-size: 48px;
	padding: 0.5em 0.9em;
	border: 1.5px solid var(--lc-line-strong);
	border-radius: var(--lc-r-field);
	background: var(--lc-paper);
	color: var(--lc-ink);
	font: 500 1rem/1.2 var(--lc-font-text);
	text-align: start;
	cursor: pointer;
	transition: background-color var(--lc-dur-fast) linear, border-color var(--lc-dur-fast) linear;
}

.lc-dialog__city:hover {
	background: var(--lc-blue-50);
	border-color: var(--lc-action);
}

.lc-dialog__city .lc-icon {
	opacity: 0;
}

.lc-dialog__city[aria-pressed='true'] {
	background: var(--lc-action);
	border-color: var(--lc-action);
	color: #fff;
}

.lc-dialog__city[aria-pressed='true'] .lc-icon {
	opacity: 1;
}

/* ---------- Motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
	.lc-dialog[open] {
		animation: none;
	}

	.lc-drawer__front,
	.lc-drawer__pull {
		transition-duration: 0.01ms;
	}
}