/*
Theme Name: Qafilo Site
Theme URI: https://qafilo.fulldo.fr/
Author: FullDo
Author URI: https://fulldo.fr/
Description: Site de présentation de Qafilo, l'extension WordPress de réservation Omra et Hajj. Français, anglais, arabe.
Version: 0.3.8
Requires at least: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: qafilo-site
*/

/* ---------- Ground ---------- */
:root {
	--qs-night: #0f1f1a;
	--qs-night-deep: #0b1713;
	--qs-night-2: #17302a;
	--qs-sand: #efebe3;
	--qs-sand-2: #e4ddcf;
	--qs-brass: #b8955a;
	--qs-brass-light: #d2b27a;
	--qs-brass-ink: #7a5c2b;
	--qs-muted-dark: #a9b4ae;
	--qs-muted-light: #5b6b63;
	--qs-gutter: clamp(1rem, 4vw, 3rem);
	--qs-wide: 78rem;
	--qs-edge: max(var(--qs-gutter), calc((100vw - var(--qs-wide)) / 2));
	--qs-display: "Alexandria", "Instrument Sans", system-ui, sans-serif;
	--qs-text: "Instrument Sans", system-ui, sans-serif;
}

html[lang^="ar"] {
	--qs-display: "Alexandria", "Noto Naskh Arabic", sans-serif;
	--qs-text: "Noto Naskh Arabic", "Instrument Sans", sans-serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; font-family: var(--qs-text); -webkit-font-smoothing: antialiased; }
html[lang^="ar"] body { line-height: 1.85; }
.qs-landing { margin: 0; }
.qs-landing > * { margin-block: 0; }
.qs-landing img { display: block; max-width: 100%; height: auto; }
.qs-landing :where(h1, h2, h3) { font-family: var(--qs-display); font-weight: 400; line-height: 1.18; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
html[lang^="ar"] .qs-landing :where(h1, h2, h3) { line-height: 1.45; letter-spacing: 0; }
.qs-landing p { margin: 0; }
.qs-landing code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
a:focus-visible, .wp-block-button__link:focus-visible { outline: 2px solid var(--qs-brass-light); outline-offset: 3px; }

/* Section frame: full-bleed colour, content aligned on the wide column. */
.qs-landing > section {
	padding-block: clamp(4rem, 2rem + 7vw, 9rem);
	padding-inline: var(--qs-edge);
}

/* Screenshots sit on a brass plate, offset toward the reading end. */
.qs-shot { margin: 0; }
.qs-shot img { box-shadow: 1.1rem 1.1rem 0 var(--qs-brass); }
[dir="rtl"] .qs-shot img { box-shadow: -1.1rem 1.1rem 0 var(--qs-brass); }
.qs-shot figcaption { margin-block-start: 2.25rem; font-size: .88rem; opacity: .8; }

/* Buttons. */
.qs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.qs-btn .wp-block-button__link {
	display: inline-block;
	border-radius: 0;
	font-family: var(--qs-text);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: .01em;
	text-decoration: none;
	line-height: 1.2;
	min-block-size: 48px;
	box-sizing: border-box;
}
.qs-btn--brass .wp-block-button__link { background: var(--qs-brass-light); color: var(--qs-night); padding: 1rem 1.75rem; }
.qs-btn--brass .wp-block-button__link:hover { background: var(--qs-sand); }
.qs-btn--line .wp-block-button__link { background: none; color: inherit; padding: 1rem 0; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.qs-btn--line .wp-block-button__link:hover { color: var(--qs-brass-light); }

/* ---------- Header and footer ---------- */
.qs-header, .qs-footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.5rem var(--qs-edge);
	background: var(--qs-night);
	color: var(--qs-sand);
	margin: 0 !important;
}
.qs-header p, .qs-footer p { margin: 0; }
.qs-wordmark { display: inline-flex; align-items: baseline; gap: .7rem; color: inherit; text-decoration: none; }
.qs-wordmark__latin { font-family: "Alexandria", sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: -.02em; }
.qs-wordmark__arabic { font-family: "Noto Naskh Arabic", serif; font-size: 1.15rem; color: var(--qs-brass-light); }
.qs-langs ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.qs-langs a { color: var(--qs-muted-dark); text-decoration: none; padding-block: .75rem; display: inline-block; }
.qs-langs a[aria-current="page"] { color: var(--qs-sand); text-decoration: underline; text-underline-offset: .4em; }
.qs-langs a:hover { color: var(--qs-brass-light); }
.qs-langs a[lang="ar"] { font-family: "Noto Naskh Arabic", serif; font-size: 1.05rem; }
.qs-footer { padding-block: 3rem; font-size: .9rem; }
.qs-footer__by { color: var(--qs-muted-dark); }
.qs-footer a { color: inherit; }

/* ---------- Opening ---------- */
.qs-open {
	background: var(--qs-night);
	color: var(--qs-sand);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 4rem;
	padding-block: clamp(3rem, 1rem + 6vw, 7rem) clamp(4rem, 2rem + 6vw, 8rem) !important;
	padding-inline-end: 0 !important;
	overflow: hidden;
}
.qs-open__title { font-size: var(--wp--preset--font-size--display, 4.5rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 500 !important; }
.qs-open__lede { font-size: 1.2rem; line-height: 1.6; color: var(--qs-muted-dark); max-inline-size: 34rem; margin-block: 2rem 2.5rem !important; }
.qs-facts { list-style: none; padding: 0; margin: 3rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 2.25rem; font-size: .85rem; color: var(--qs-muted-dark); }
.qs-facts li { margin: 0; }
.qs-open__shot { margin-inline-end: calc(-1 * 6rem); }


/* In-page navigation, kept in view. */
.qs-toc {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: .25rem 2.5rem;
	overflow-x: auto;
	list-style: none;
	margin: 0 !important;
	padding: 0 var(--qs-edge);
	background: var(--qs-night-2);
	scrollbar-width: none;
}
.admin-bar .qs-toc { top: 32px; }
.qs-toc li { margin: 0; flex: none; }
.qs-toc a {
	display: inline-block;
	padding-block: 1.15rem;
	color: var(--qs-muted-dark);
	text-decoration: none;
	font-size: .95rem;
}
.qs-toc a:hover, .qs-toc a:focus-visible { color: var(--qs-brass-light); }

/* ---------- The case ---------- */
.qs-case { background: var(--qs-sand); color: var(--qs-night); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 5rem; }
.qs-case__title { grid-column: 1; }
.qs-case__title { font-size: clamp(1.8rem, 1.1rem + 1.9vw, 2.6rem); line-height: 1.15; }
.qs-case__list { grid-column: 2; grid-row: 1 / span 3; list-style: none; padding: 0; margin: 0; display: grid; gap: 2.5rem; align-self: start; }
.qs-case__list li { margin: 0; font-size: 1.08rem; color: var(--qs-muted-light); }
.qs-case__list strong { display: block; color: var(--qs-night); font-weight: 600; font-size: 1.15rem; margin-block-end: .35rem; }
.qs-case__close { grid-column: 1 / -1; margin-block-start: 5rem !important; font-family: var(--qs-display); font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); line-height: 1.3; max-inline-size: 42rem; color: var(--qs-brass-ink); }

/* ---------- The route ---------- */
.qs-route { background: var(--qs-night-2); color: var(--qs-sand); }
.qs-route__title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); max-inline-size: 40rem; }
.qs-route__title em { color: var(--qs-brass-light); }
.qs-route__stations {
	position: relative;
	list-style: none;
	padding: 0;
	margin: 5rem 0 6rem !important;
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	counter-reset: station;
}
/* The caravan line joining the stations. */
.qs-route__stations::before {
	content: "";
	position: absolute;
	inset-inline: .45rem 0;
	top: .45rem;
	block-size: 0;
	border-block-start: 1px dashed var(--qs-brass);
}
.qs-route__stations li { position: relative; counter-increment: station; margin: 0; padding-block-start: 2.5rem; font-size: .92rem; line-height: 1.55; color: var(--qs-muted-dark); }
.qs-route__stations li::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	inline-size: .9rem;
	block-size: .9rem;
	border-radius: 50%;
	background: var(--qs-brass-light);
	box-shadow: 0 0 0 .4rem var(--qs-night-2);
}
.qs-route__stations li:first-child::before, .qs-route__stations li:last-child::before { background: var(--qs-sand); }
.qs-route__stations strong { display: block; font-family: var(--qs-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--qs-sand); margin-block-end: .6rem; }
.qs-route__stations strong::before { content: counter(station) " "; color: var(--qs-brass-light); font-size: .8em; margin-inline-end: .25rem; }
.qs-route__shots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: end; gap: 3.5rem; }
.qs-shot--phone img { border-radius: 1.4rem; }

/* ---------- Family and team ---------- */
.qs-sides { display: grid; grid-template-columns: 1fr 1fr; padding: 0 !important; }
.qs-side { padding: clamp(4rem, 2rem + 6vw, 8rem) var(--qs-gutter); padding-inline-start: max(var(--qs-gutter), calc((100vw - var(--qs-wide)) / 2)); }
.qs-side--team { padding-inline-start: clamp(2rem, 1rem + 4vw, 5rem); padding-inline-end: max(var(--qs-gutter), calc((100vw - var(--qs-wide)) / 2)); background: var(--qs-night); color: var(--qs-sand); }
.qs-side--family { background: var(--qs-sand-2); color: var(--qs-night); padding-inline-end: clamp(2rem, 1rem + 4vw, 5rem); }
.qs-side__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); line-height: 1.12; margin-block-end: 3rem !important; max-inline-size: 30rem; }
.qs-lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; }
.qs-lines li { margin: 0; color: var(--qs-muted-light); }
.qs-side--team .qs-lines li, .qs-code .qs-lines li { color: var(--qs-muted-dark); }
.qs-lines strong { display: block; font-weight: 600; font-size: 1.08rem; color: var(--qs-night); margin-block-end: .25rem; }
.qs-side--team .qs-lines strong, .qs-code .qs-lines strong { color: var(--qs-sand); }
.qs-lines--tight { gap: 1.25rem; }
.qs-side__shot { max-inline-size: 17rem; margin-block-start: 4rem !important; }

/* ---------- Compliance ---------- */
.qs-law { background: var(--qs-night); color: var(--qs-sand); }
.qs-law__title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); max-inline-size: 46rem; }
.qs-law__list { list-style: none; padding: 0; margin: 5rem 0 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem 6rem; }
.qs-law__list li { margin: 0; color: var(--qs-muted-dark); display: flex; flex-direction: column; gap: .8rem; }
.qs-law__list strong { font-family: var(--qs-display); font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.15; color: var(--qs-sand); }
.qs-law__list em { font-style: normal; font-size: .88rem; color: var(--qs-brass-light); }
.qs-law__note { margin-block-start: 5rem !important; max-inline-size: 38rem; font-size: .92rem; color: var(--qs-muted-dark); }

/* ---------- Webmaster ---------- */
.qs-build { background: var(--qs-sand); color: var(--qs-night); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; }
.qs-build__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); line-height: 1.12; margin-block-end: 1.5rem !important; }
.qs-build__intro p { color: var(--qs-muted-light); }
.qs-steps { padding-inline-start: 1.4rem; margin: 0; display: grid; gap: 1.75rem; align-self: end; }
.qs-steps li { margin: 0; padding-inline-start: .5rem; color: var(--qs-muted-light); }
.qs-steps li::marker { color: var(--qs-brass-ink); font-weight: 600; }
.qs-steps strong { display: block; color: var(--qs-night); font-weight: 600; font-size: 1.08rem; margin-block-end: .25rem; }
.qs-build__shot { grid-column: 1 / -1; margin-block-start: 3rem !important; }

/* ---------- Developer ---------- */
.qs-code { background: var(--qs-night-deep); color: var(--qs-sand); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; }
.qs-code__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); line-height: 1.12; margin-block-end: 2.5rem !important; }
.qs-code__sample {
	margin: 0;
	padding: 2rem 2.25rem;
	background: var(--qs-night-2);
	color: var(--qs-sand);
	font-size: .88rem;
	line-height: 1.7;
	overflow-x: auto;
	border: 0;
	border-radius: 0;
	direction: ltr;
	text-align: left;
}
.qs-code__sample code { font-size: inherit; }

/* ---------- Pricing ---------- */
.qs-price { background: var(--qs-sand); color: var(--qs-night); }
.qs-price__title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); max-inline-size: 40rem; }
.qs-price__lede { max-inline-size: 42rem; margin-block: 1.75rem 4rem !important; color: var(--qs-muted-light); font-size: 1.08rem; }
.qs-price__table { margin: 0; overflow-x: auto; }
.qs-price__table table { border-collapse: collapse; inline-size: 100%; min-inline-size: 46rem; font-size: .95rem; }
.qs-price__table table, .qs-price__table table :is(th, td), .qs-price__table table thead { border: 0; }
.qs-price__table table :is(th, td) { padding: 1.1rem 1.25rem; text-align: start; vertical-align: top; }
.qs-price__table thead th { font-family: var(--qs-display); font-weight: 400; font-size: 1.45rem; padding-block: 1.5rem; }
.qs-price__table tbody th { font-weight: 500; inline-size: 34%; }
.qs-price__table tbody tr:nth-child(odd) { background: var(--qs-sand-2); }
/* The free column is the offer: a solid night column. */
.qs-price__table :where(th, td):nth-child(2) { background: var(--qs-night); color: var(--qs-sand); }
.qs-price__table tbody tr:nth-child(odd) :where(td):nth-child(2) { background: var(--qs-night-2); }
.qs-price__table td { color: var(--qs-muted-light); }
.qs-price__table td:nth-child(2) { color: var(--qs-sand); font-weight: 600; }
.qs-price__table--two table { min-inline-size: 36rem; }
.qs-price__table--two tbody th { inline-size: 40%; }
.qs-price__table--two :where(th, td):nth-child(3) { inline-size: 36%; }
.qs-price__table--two thead th:nth-child(3) { color: var(--qs-brass-ink); }
.qs-price__table--two td:nth-child(3) { color: var(--qs-night); }
@media (max-width: 782px) {
	.qs-price__table--two table { min-inline-size: 0; font-size: .88rem; }
	.qs-price__table--two table :is(th, td) { padding: .85rem .6rem; }
	.qs-price__table--two tbody th { inline-size: 38%; }
	.qs-price__table--two thead th { font-size: 1.1rem; }
}
.qs-price__next { margin-block-start: 1.5rem !important; max-inline-size: 46rem; color: var(--qs-muted-light); font-size: .95rem; }
.qs-price__note { margin-block-start: 1rem !important; max-inline-size: 46rem; color: var(--qs-muted-light); }
.qs-price__go { display: inline-block; margin-inline-start: .35rem; color: var(--qs-night); font-weight: 600; text-underline-offset: .35em; }
.qs-price__go:hover { color: var(--qs-brass-ink); }

/* ---------- Questions ---------- */
.qs-faq { background: var(--qs-sand-2); color: var(--qs-night); }
.qs-faq__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); max-inline-size: 36rem; }
.qs-faq__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 3.5rem 4.5rem; margin-block-start: 4rem !important; }
.qs-qa h3 { font-size: 1.35rem; line-height: 1.25; margin-block-end: .9rem; }
.qs-qa p { color: var(--qs-muted-light); }
.qs-qa a { color: var(--qs-brass-ink); }

/* ---------- Closing ---------- */
.qs-close { background: var(--qs-night); color: var(--qs-sand); padding-block-end: clamp(3rem, 2rem + 4vw, 6rem) !important; }
.qs-close__title { font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4.5rem); line-height: 1.05; max-inline-size: 52rem; margin-block-end: 3rem !important; }
.qs-close__title em { color: var(--qs-brass-light); }

/* ---------- Plain pages ---------- */
.qs-main { padding-block: 4rem 6rem; }
.qs-main { padding-inline: var(--qs-gutter); }
.qs-page-title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); max-inline-size: 44rem; margin-inline: auto !important; }
.qs-legal { max-inline-size: 44rem; margin-inline: auto; }
.qs-legal h2 { font-family: var(--qs-display); font-weight: 400; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin-block: 3rem .9rem !important; }
.qs-legal p { margin-block: 0 1rem !important; color: #3d4a44; }
.qs-legal a { color: var(--qs-brass-ink); }
.qs-legal h3 { font-family: var(--qs-display); font-weight: 500; font-size: 1.15rem; margin-block: 1.75rem .5rem !important; }
.qs-legal ul, .qs-legal ol { margin-block: 0 1.25rem; padding-inline-start: 1.3rem; color: #3d4a44; }
.qs-legal li { margin-block-end: .45rem; }
.qs-legal li::marker { color: var(--qs-brass-ink); }
.qs-legal strong { color: var(--qs-night); }
.qs-legal table { border-collapse: collapse; inline-size: 100%; margin-block: 0 1.5rem; font-size: .95rem; }
.qs-legal th, .qs-legal td { text-align: start; padding: .6rem .75rem; border: 0 !important; }
.qs-legal .wp-block-table { margin: 0 0 1.5rem; }
.qs-legal .wp-block-table table, .qs-legal .wp-block-table thead { border: 0 !important; }
.qs-legal thead th { background: var(--qs-night); color: var(--qs-sand); font-weight: 500; }
.qs-legal tbody tr:nth-child(odd) { background: var(--qs-sand-2); }
.qs-brief { background: var(--qs-sand-2); padding: 1.4rem 1.6rem; margin-block: 1.5rem 2.5rem; }
.qs-brief p { margin: 0 !important; color: var(--qs-night) !important; font-size: 1.08rem; }
.qs-legal .qs-qa { margin-block-end: 1.5rem; }

/* ---------- Guides ---------- */
.qs-header { gap: 1rem 2.5rem; }
.qs-header .qs-nav { color: var(--qs-sand); text-decoration: none; margin-inline-start: auto; font-size: .95rem; padding-block: .75rem; }
.qs-header .qs-nav:hover, .qs-header .qs-nav:focus-visible { color: var(--qs-brass-light); }
.qs-guides { list-style: none; padding: 0; margin: 2rem auto 0; max-inline-size: 44rem; display: grid; gap: 2.5rem; }
.qs-guides__item { margin: 0; display: grid; gap: .35rem; }
.qs-guides__title { font-family: var(--qs-display); font-size: clamp(1.3rem, 1rem + .9vw, 1.7rem); line-height: 1.25; color: var(--qs-night); text-decoration: none; }
.qs-guides__title:hover { color: var(--qs-brass-ink); }
.qs-guides__date { font-size: .85rem; color: var(--qs-muted-light); }
.qs-guides__excerpt { margin: 0; color: #3d4a44; }
.qs-guides__empty { max-inline-size: 44rem; margin-inline: auto !important; color: var(--qs-muted-light); }
.qs-article__date { max-inline-size: 44rem; margin-inline: auto !important; color: var(--qs-muted-light); font-size: .9rem; }
.qs-guide-end { max-inline-size: 44rem; margin: 4rem auto 0; padding-block-start: 2rem; background: var(--qs-night); color: var(--qs-sand); padding: 2rem 2.25rem; }
.qs-guide-end p { margin: 0 0 1rem; }
.qs-guide-end a { color: var(--qs-brass-light); margin-inline-end: 1.5rem; }

/* ---------- Set up for you ---------- */
.qs-service { background: var(--qs-night-2); color: var(--qs-sand); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem 5rem; align-items: start; overflow: hidden; }
.qs-service__title { font-size: clamp(1.8rem, 1.1rem + 2vw, 2.75rem); line-height: 1.15; margin-block-end: 1.5rem !important; }
.qs-service__intro p { color: var(--qs-muted-dark); margin-block-end: 2.25rem !important; }
.qs-service__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2.25rem; }
.qs-service__list li { margin: 0; color: var(--qs-muted-dark); }
.qs-service__list strong { display: block; font-family: var(--qs-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + .8vw, 1.7rem); color: var(--qs-brass-light); margin-block-end: .5rem; }
.qs-service::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(assets/img/motifs/lattice.svg) 0 0 / 120px 120px repeat;
	opacity: .05;
	mask-image: linear-gradient(to left, #000, transparent 60%);
	pointer-events: none;
}
[dir="rtl"] .qs-service::after { mask-image: linear-gradient(to right, #000, transparent 60%); }

/* ---------- Two ways to start ---------- */
.qs-landing > .qs-paths { background: var(--qs-sand-2); color: var(--qs-night); }
.qs-kicker { display: flex; align-items: center; gap: 1rem; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--qs-brass-ink); margin: 0 0 1.25rem !important; }
.qs-kicker::before { content: ""; inline-size: 2.5rem; block-size: 1px; background: currentColor; }
html[lang^="ar"] .qs-kicker { letter-spacing: 0; font-size: .95rem; }
.qs-paths__head { max-inline-size: 44rem; margin-block-end: 3.5rem; }
.qs-paths__title { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.4rem); }
.qs-paths__lede { margin-block-start: 1.5rem !important; font-size: 1.1rem; color: var(--qs-muted-light); }
.qs-paths__table { overflow-x: auto; }
.qs-paths__table table { border-collapse: collapse; inline-size: 100%; min-inline-size: 44rem; font-size: 1rem; line-height: 1.55; }
.qs-paths__table :is(th, td) { border: 0; padding: 1.15rem 1.5rem; text-align: start; vertical-align: top; }
.qs-paths__table thead th { font-family: var(--qs-display); font-weight: 400; font-size: clamp(1.3rem, 1rem + .9vw, 1.75rem); padding-block: 1.75rem 1.25rem; }
.qs-paths__table tbody th { inline-size: 22%; font-weight: 600; font-size: .95rem; }
.qs-paths__table td { color: #3c4a43; }
/* The service column is the one to read: a solid night column, from its title to its button. */
.qs-paths__table :is(th, td):nth-child(3) { background: var(--qs-night); color: var(--qs-sand); inline-size: 39%; }
.qs-paths__table tbody tr:nth-child(odd) :is(th, td):not(:nth-child(3)) { background: var(--qs-sand); }
.qs-paths__table tbody tr:nth-child(odd) td:nth-child(3) { background: var(--qs-night-2); }
.qs-paths__table tbody tr:last-child td { font-weight: 600; }
.qs-paths__table tbody tr:last-child td:nth-child(3) { color: var(--qs-brass-light); }
.qs-paths__table tfoot td { padding-block: 1.75rem 2rem; }
.qs-paths__go { display: inline-block; min-block-size: 48px; box-sizing: border-box; padding: 1rem 1.75rem; background: var(--qs-brass-light); color: var(--qs-night); font-weight: 600; text-decoration: none; }
.qs-paths__go:hover { background: var(--qs-sand); }
.qs-paths__go--line { background: none; padding-inline: 0; color: var(--qs-night); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
.qs-paths__go--line:hover { background: none; color: var(--qs-brass-ink); }

/* ---------- Setup request ---------- */
.qs-lead { display: grid; gap: 1.5rem; }
.qs-lead__form { display: grid; gap: 1.1rem; background: var(--qs-night); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.qs-lead__title { font-size: 1.6rem; color: var(--qs-sand); }
.qs-lead__lede, .qs-lead__privacy { color: var(--qs-muted-dark); font-size: .92rem; margin: 0 !important; }
.qs-lead__form p { margin: 0 !important; }
.qs-lead__form label, .qs-lead__sites legend { display: block; font-size: .9rem; font-weight: 600; color: var(--qs-sand); margin-block-end: .45rem; }
.qs-lead__form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
	inline-size: 100%; box-sizing: border-box; min-block-size: 48px; padding: .75rem .9rem;
	font: inherit; font-size: 1rem; color: var(--qs-night); background: var(--qs-sand); border: 0; border-radius: 0;
}
.qs-lead__form :is(input, select, textarea):focus-visible { outline: 2px solid var(--qs-brass-light); outline-offset: 2px; }
.qs-lead__pair { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1rem; }
.qs-lead__sites { border: 0; margin: 0; padding: 0; display: grid; gap: .35rem; }
.qs-lead__form .qs-lead__choice { display: flex; align-items: center; gap: .7rem; font-weight: 400; color: var(--qs-muted-dark); margin: 0; min-block-size: 36px; }
.qs-lead__choice input { inline-size: 1.15rem; block-size: 1.15rem; accent-color: var(--qs-brass-light); margin: 0; }
.qs-lead__send button { min-block-size: 52px; padding: 1rem 1.75rem; border: 0; border-radius: 0; background: var(--qs-brass-light); color: var(--qs-night); font: inherit; font-weight: 600; cursor: pointer; }
.qs-lead__send button:hover { background: var(--qs-sand); }
.qs-lead__trap { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.qs-lead__or { color: var(--qs-muted-dark); margin: 0 !important; }
.qs-lead__wa { color: var(--qs-brass-light); font-weight: 600; text-underline-offset: .3em; }
.qs-service .qs-lead .qs-lead__notice { background: var(--qs-sand); color: var(--qs-night); padding: 1rem 1.25rem; font-weight: 600; margin: 0 !important; }
.qs-service .qs-lead .qs-lead__notice--ok { background: var(--qs-brass-light); color: var(--qs-night); }

/* ---------- The example agency site ---------- */
.qs-service__intro { grid-row: span 2; }
.qs-show { grid-column: 2; margin: 1rem 0 0; }
.qs-show .qs-kicker { color: var(--qs-brass-light); }
.qs-show__frame { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; margin-block-start: 2rem; }
.qs-show__frame img { display: block; inline-size: 100%; block-size: auto; }
.qs-show__home { grid-column: 1 / span 8; grid-row: 1; box-shadow: 1.1rem 1.1rem 0 var(--qs-brass); }
.qs-show__package { grid-column: 6 / span 6; grid-row: 1; margin-block-start: 34%; box-shadow: 1.1rem 1.1rem 0 var(--qs-night); position: relative; }
.qs-show__phone { grid-column: 11 / span 2; grid-row: 1; margin-block-start: 58%; position: relative; box-shadow: .7rem .7rem 0 var(--qs-brass); }
[dir="rtl"] .qs-show__home, [dir="rtl"] .qs-show__phone { box-shadow: -1.1rem 1.1rem 0 var(--qs-brass); }
[dir="rtl"] .qs-show__package { box-shadow: -1.1rem 1.1rem 0 var(--qs-night); }
.qs-show figcaption { margin-block-start: 2.5rem; max-inline-size: 40rem; color: var(--qs-muted-dark); font-size: .95rem; }
.qs-show figcaption small { display: block; margin-block-start: .6rem; font-size: .78rem; opacity: .75; }
@media (max-width: 1100px) {
	.qs-service__intro { grid-row: auto; }
	.qs-show { grid-column: 1 / -1; }
}
@media (max-width: 782px) {
	/* On a phone, each row reads top to bottom: the question, then the two answers, labelled. */
	.qs-paths__table table { min-inline-size: 0; }
	.qs-paths__table :is(table, tbody, tfoot, tr, th, td) { display: block; }
	.qs-paths__table thead { display: none; }
	.qs-paths__table tbody tr { margin-block-end: 1.25rem; background: var(--qs-sand); }
	.qs-paths__table tbody th { inline-size: auto; padding-block: 1.1rem .4rem; font-family: var(--qs-display); font-weight: 400; font-size: 1.2rem; }
	.qs-paths__table tbody tr:nth-child(odd) :is(th, td):not(:nth-child(3)) { background: none; }
	.qs-paths__table :is(th, td):nth-child(3) { inline-size: auto; }
	.qs-paths__table tbody td { padding-block: .6rem 1rem; }
	.qs-paths__table tbody td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-block-end: .3rem; opacity: .7; }
	html[lang^="ar"] .qs-paths__table tbody td::before { letter-spacing: 0; font-size: .9rem; }
	.qs-paths__table tfoot td:first-child { display: none; }
	.qs-paths__table tfoot td { padding: .5rem 0; }
	.qs-paths__table tfoot td:nth-child(3) { background: none; }
	.qs-show__frame { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.5rem; }
	.qs-show__home { grid-column: 1 / -1; }
	.qs-show__package { grid-column: 1 / span 4; grid-row: 2; margin-block-start: 0; }
	.qs-show__phone { grid-column: 5 / span 2; grid-row: 2; margin-block-start: 20%; }
	.qs-lead__pair { grid-template-columns: 1fr; }
}

/* ---------- Motifs: sky, lanterns, Makkah, caravan, star ---------- */
.qs-landing > section { position: relative; }
.qs-landing > section > * { position: relative; z-index: 1; }
.qs-landing > section > .qs-sky, .qs-landing > section > .qs-rosette, .qs-landing > section > .qs-caravan { z-index: 0; }

/* The night sky of the opening: a slow lattice, stars, the crescent, three lanterns and the city. */
.qs-landing > .qs-open { padding-block-end: clamp(13rem, 7rem + 15vw, 22rem) !important; }
.qs-open { background: radial-gradient(90% 70% at 80% 38%, #1a372e 0%, var(--qs-night) 60%, var(--qs-night-deep) 100%); }
.qs-sky { position: absolute !important; inset: 0; overflow: hidden; pointer-events: none; }
.qs-sky::before {
	content: "";
	position: absolute;
	inset: -120px;
	background: url(assets/img/motifs/lattice.svg) 0 0 / 120px 120px repeat;
	opacity: .07;
	mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 45%, transparent 80%);
	animation: qs-drift 90s linear infinite;
}
.qs-sky__stars {
	position: absolute;
	inset: 0 0 35% 0;
	background-image:
		radial-gradient(1.2px 1.2px at 12% 18%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 28% 8%, #f3e3bd 60%, transparent),
		radial-gradient(1.4px 1.4px at 46% 22%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 61% 12%, #f3e3bd 60%, transparent),
		radial-gradient(1.2px 1.2px at 74% 30%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 88% 16%, #f3e3bd 60%, transparent),
		radial-gradient(1.3px 1.3px at 93% 40%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 36% 38%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 55% 44%, #f3e3bd 60%, transparent),
		radial-gradient(1.1px 1.1px at 6% 46%, #f3e3bd 60%, transparent);
	animation: qs-twinkle 6s ease-in-out infinite alternate;
}
.qs-sky__stars::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(1px 1px at 18% 30%, #f3e3bd 60%, transparent),
		radial-gradient(1.2px 1.2px at 40% 14%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 67% 26%, #f3e3bd 60%, transparent),
		radial-gradient(1.2px 1.2px at 82% 8%, #f3e3bd 60%, transparent),
		radial-gradient(1px 1px at 50% 34%, #f3e3bd 60%, transparent);
	animation: qs-twinkle 4.5s ease-in-out 1.5s infinite alternate-reverse;
}
.qs-sky__moon {
	position: absolute;
	top: 9%;
	inset-inline-end: 9%;
	inline-size: 64px;
	block-size: 64px;
	border-radius: 50%;
	box-shadow: -14px 8px 0 0 var(--qs-brass-light);
	transform: rotate(-18deg);
	filter: drop-shadow(0 0 18px rgba(210, 178, 122, .45));
	opacity: .9;
}
[dir="rtl"] .qs-sky__moon { box-shadow: 14px 8px 0 0 var(--qs-brass-light); transform: rotate(18deg); }
.qs-sky .qs-lantern { position: absolute; top: -40px; inline-size: auto; transform-origin: 50% 0; animation: qs-sway 7s ease-in-out infinite alternate; opacity: .85; }
.qs-sky .qs-lantern--1 { inset-inline-start: 46%; block-size: 210px; }
.qs-sky .qs-lantern--2 { inset-inline-start: 51.5%; block-size: 150px; animation-duration: 8.5s; animation-delay: -3s; opacity: .6; }
.qs-sky .qs-lantern--3 { inset-inline-start: 41%; block-size: 130px; animation-duration: 9.5s; animation-delay: -5s; opacity: .45; }
.qs-sky .qs-lantern { max-inline-size: none; }
.qs-sky .qs-city {
	position: absolute;
	inset-inline: 0;
	margin-inline: auto;
	bottom: -6px;
	inline-size: clamp(640px, 82vw, 1180px);
	max-inline-size: none !important;
	block-size: auto;
	opacity: .42;
	will-change: transform;
}
.qs-open .qs-city { mask-image: linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%); }
.qs-open__shot { z-index: 2 !important; }

/* The closing section: the same city, lower and quieter, under the last call. */
.qs-close { overflow: hidden; padding-block-end: clamp(9rem, 6rem + 12vw, 16rem) !important; }
.qs-sky--close .qs-city { opacity: .22; }
.qs-sky--close::before { mask-image: radial-gradient(60% 70% at 80% 30%, #000 10%, transparent 70%); opacity: .05; }

/* The caravan walks the booking route with the reader. */
.qs-route { overflow: hidden; }
.qs-caravan {
	position: absolute !important;
	inset-inline-start: var(--qs-edge);
	top: 0;
	inline-size: 210px;
	pointer-events: none;
	transition: transform .25s linear;
}
.qs-caravan img { display: block; inline-size: 100%; block-size: auto; opacity: .9; }
[dir="rtl"] .qs-caravan img { transform: scaleX(-1); }
.qs-caravan.is-walking img { animation: qs-walk .9s ease-in-out infinite; }
html:not(.qs-js) .qs-caravan { display: none; }

/* A large eight-point star turns very slowly behind the obligations. */
.qs-law { overflow: hidden; }
.qs-rosette {
	position: absolute !important;
	inset-inline-end: -14rem;
	top: -10rem;
	inline-size: 44rem;
	block-size: 44rem;
	background: url(assets/img/motifs/lattice.svg) center / 100% 100% no-repeat;
	opacity: .07;
	animation: qs-turn 240s linear infinite;
	pointer-events: none;
}

/* The sand sections carry the lattice faintly in a corner. */
.qs-case::after, .qs-price::after {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: min(46rem, 60%);
	block-size: 100%;
	background: url(assets/img/motifs/lattice.svg) 0 0 / 96px 96px repeat;
	opacity: .09;
	filter: brightness(.55) sepia(.4);
	mask-image: radial-gradient(80% 70% at 100% 0%, #000 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

/* Blocks rise once into view (only with JavaScript and motion allowed). */
.qs-js .qs-rise { opacity: 0; transform: translateY(22px); transition: opacity .8s ease var(--qs-delay, 0ms), transform .8s cubic-bezier(.2, .7, .2, 1) var(--qs-delay, 0ms); }
.qs-js .qs-rise.is-in { opacity: 1; transform: none; }

@keyframes qs-drift { to { transform: translate(120px, 120px); } }
@keyframes qs-twinkle { from { opacity: .35; } to { opacity: 1; } }
@keyframes qs-sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes qs-turn { to { transform: rotate(360deg); } }
@keyframes qs-walk { 50% { transform: translateY(-2px); } }
[dir="rtl"] .qs-caravan.is-walking img { animation-name: qs-walk-rtl; }
@keyframes qs-walk-rtl { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-2px); } }

@media (prefers-reduced-motion: reduce) {
	.qs-sky::before, .qs-sky__stars, .qs-sky__stars::after, .qs-lantern, .qs-rosette, .qs-caravan img { animation: none !important; }
	.qs-caravan { display: none; }
}

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
	.qs-route__stations { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 3rem; }
	.qs-route__stations::before { display: none; }
}
@media (max-width: 900px) {
	.qs-sky .qs-lantern--2, .qs-sky .qs-lantern--3 { display: none; }
	.qs-sky .qs-lantern--1 { inset-inline-start: auto; inset-inline-end: 6%; block-size: 130px; opacity: .5; }
	.qs-sky__moon { inline-size: 34px; block-size: 34px; top: 10px; inset-inline-end: 30%; }
	.qs-caravan { inline-size: 120px; }
	.qs-open { grid-template-columns: 1fr; padding-inline-end: var(--qs-edge) !important; gap: 3.5rem; }
	.qs-open__shot { margin-inline-end: 0; }
	.qs-case, .qs-build, .qs-code, .qs-service { grid-template-columns: 1fr; }
	.qs-case__list { grid-column: 1; grid-row: auto; margin-block-start: 3rem; }
	.qs-sides { grid-template-columns: 1fr; }
	.qs-side, .qs-side--team, .qs-side--family { padding-inline: var(--qs-gutter); }
	.qs-law__list { grid-template-columns: 1fr; gap: 3rem; }
	.qs-route__shots { grid-template-columns: minmax(0, 1fr); }
	.qs-route__shots .qs-shot--phone { max-inline-size: 16rem; }
}
@media (max-width: 600px) {
	.qs-route__stations { grid-template-columns: 1fr 1fr; }
	.qs-shot img { box-shadow: .6rem .6rem 0 var(--qs-brass); }
	[dir="rtl"] .qs-shot img { box-shadow: -.6rem .6rem 0 var(--qs-brass); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Demonstration film: a projection in the route, poster until the visitor asks for the player. */
.qs-film { margin: clamp(3rem, 7vw, 5.5rem) 0 0; display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: clamp(1.5rem, 3.5vw, 3.5rem); align-items: end; }
.qs-film__screen, .qs-film__frame { display: block; inline-size: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: var(--qs-night-deep); position: relative; cursor: pointer; overflow: hidden; box-shadow: 0 2.5rem 5rem -2rem rgba(0, 0, 0, .55); }
.qs-film__screen img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.82); transition: filter .5s ease, transform 1.2s ease; }
.qs-film__screen:hover img, .qs-film__screen:focus-visible img { filter: saturate(1) brightness(.95); transform: scale(1.015); }
.qs-film__disc { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: clamp(4.5rem, 9vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--qs-brass); translate: -50% -50%; transition: background .3s ease, scale .3s ease; }
[dir="rtl"] .qs-film__disc { translate: 50% -50%; }
.qs-film__disc::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 0; block-size: 0; border-block: .8rem solid transparent; border-inline-start: 1.3rem solid var(--qs-night); translate: 12% 0; }
[dir="rtl"] .qs-film__disc::after { border-inline-start: 0; border-inline-end: 1.3rem solid var(--qs-night); translate: -12% 0; }
.qs-film__screen:hover .qs-film__disc, .qs-film__screen:focus-visible .qs-film__disc { background: var(--qs-brass-light); scale: 1.06; }
.qs-film__screen:focus-visible { outline: 2px solid var(--qs-brass-light); outline-offset: 6px; }
.qs-film__caption { color: var(--qs-muted-dark); font-size: .95rem; line-height: 1.55; margin: 0; }
.qs-film__caption strong { display: block; font-family: var(--qs-display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--qs-sand); margin-block-end: .7rem; }
@media (max-width: 52rem) {
	.qs-film { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
	.qs-film__screen img, .qs-film__disc { transition: none; }
}