/* Shared by the three concept demos: reset, the "Projet concept" badge, the demo notice. Each demo's look lives in its own style.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-inline-size: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:lang(ar) * { letter-spacing: 0 !important; } /* spacing breaks joined Arabic letters */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }

.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 100; padding: 10px 14px; border-radius: 6px; background: #111; color: #fff; }
.skip:focus { inset-block-start: 12px; }

/* A drawn illustration or, once provided, a photo: same box either way. */
.pic { position: relative; overflow: hidden; }
.pic > img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Honesty: every demo says it is a fictional concept by Atelier Lanterne. Hidden only in `npm run shots`. */
.concept {
	position: fixed;
	z-index: 90;
	inset-block-end: 14px;
	inset-inline-start: 50%;
	translate: -50% 0;
	display: flex;
	align-items: center;
	gap: 10px;
	max-inline-size: calc(100vw - 24px);
	padding: 7px 14px 7px 8px;
	border-radius: 999px;
	background: rgb(13 19 32 / 0.9);
	backdrop-filter: blur(8px);
	color: #e7e3dc;
	font: 400 12px/1.3 "Hanken Grotesk", "IBM Plex Sans Arabic", system-ui, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 6px 24px rgb(0 0 0 / 0.18);
}
[dir="rtl"] .concept { translate: 50% 0; padding: 7px 8px 7px 14px; }
.concept b { padding: 4px 8px; border-radius: 999px; background: #c99a48; color: #0d1320; font-weight: 600; white-space: nowrap; }
.concept:hover span, .concept:focus-visible span { text-decoration: underline; }
/* Phones: no room for a floating badge that never covers text, so it becomes a strip at the top of the page
   (first in the markup), in the flow: the first thing a visitor sees, and it scrolls away with the page. */
@media (max-width: 760px) {
	.concept,
	[dir="rtl"] .concept {
		position: static;
		translate: none;
		justify-content: center;
		box-sizing: border-box;
		block-size: 40px; /* one line; the demo header below moves down by exactly this */
		max-inline-size: none;
		padding: 0 12px;
		border-radius: 0;
		background: #0d1320;
		backdrop-filter: none;
		box-shadow: none;
	}
	/* Each demo's header is absolute at the top of the page, over its hero: keep it under the strip. */
	.concept ~ .nav { inset-block-start: 40px; }
}

/* Shown after a demo form is sent: nothing leaves the page. */
.demo-note { display: none; margin-block-start: 14px; font-size: 0.9em; }
form.is-sent .demo-note { display: block; }