/* Hallmark · shape: Ledger (custom order kept: offer, form, démarches, adresses, FAQ) · genre: editorial · theme: Loom (deal 1/3, seed private-paid-service-alerts-7568·92d6442d·2026-11-10·r0) · redesign: full
 * hero: Split, headline left, the price sheet right · nav: edge-aligned wordmark and one action · footer: colophon, legal links over one rule · imagery: none (no real photographs supplied) · signature: the ruled price sheet, official appointment free beside our 29 € booking, 10 days or refunded · loom: ecru
 * axes: light/roman-serif/cool · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · waive 23 · one .band used once for the form · Loom names one indigo band per page as its committed posture */
/* Hallmark · waive 79 · hero centred in a capped first screen · the space frames the headline and price sheet, nothing is missing */
/* Hallmark · waive 44c · hero min-height capped at 680px · tall screens keep calm air rather than a stretched head */
/* Hallmark · dropped #commande-card · the form sits on the band, no card inside */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R2 V3 · weakest: R, no photographs exist for this service, so the theme's ruled rows carry every section instead of stock pictures */
@import url("./tokens.css");
@import url("./base.css");

/* chrome */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: var(--rule-ink) solid var(--color-rule-ink); }
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.wordmark { font-family: var(--font-display); font-size: var(--text-lg); text-decoration: none; color: var(--color-ink); }
.nav-links { display: flex; gap: var(--space-lg); align-items: center; }
.nav-links a:not(.btn) { font-size: var(--text-sm); font-weight: 500; text-decoration: none; color: var(--color-ink-2); }
.nav-links a:not(.btn):hover { color: var(--color-accent); }
@media (max-width: 48rem) { .nav-links a:not(.btn) { display: none; } }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: var(--space-md) var(--space-lg); border: 0; border-radius: var(--radius-pill); font: 500 var(--text-md)/1 var(--font-body); background: var(--color-accent); color: var(--color-accent-ink); text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); cursor: not-allowed; transform: none; }
.btn--sm { min-height: 40px; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); }
.link { font-weight: 500; text-decoration: none; padding-block: var(--space-3xs); border-bottom: 2px solid currentColor; transition: border-color var(--dur-short) var(--ease-out); }
.link:hover { border-color: var(--color-accent); }
.link:active { color: var(--color-accent); }

/* hero */
.hero { min-height: min(calc(100svh - 66px), 680px); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.hero h1 { font-size: clamp(2.75rem, 6vw, 5.25rem); max-width: 14ch; }
.hero h1 { margin-bottom: var(--space-lg); }
.hero .lead { color: var(--color-muted); margin-bottom: var(--space-xl); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); align-items: center; }
@media (max-width: 56rem) { .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* the price sheet (signature) */
.sheet { background: var(--color-paper-2); padding: var(--space-lg); }
.sheet h2 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); margin-bottom: var(--space-sm); letter-spacing: 0; }
.rows { margin: 0; border-top: var(--rule-ink) solid var(--color-rule-ink); }
.rows > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-md); align-items: baseline; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.rows dd { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); }
.rows .big dd { font-size: var(--text-3xl); line-height: 1; }
.sheet .note { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }

/* sections */
.section { padding-block: var(--section-gap-s); }
.section--well { background: var(--color-paper-2); }
.section-head { margin-bottom: var(--space-xl); }
.section-head p { margin-top: var(--space-sm); color: var(--color-muted); }

/* form on the indigo band */
.band { background: var(--color-accent); color: var(--color-accent-ink); }
.band .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: start; }
.band .section-head p { color: color-mix(in oklab, var(--color-accent-ink) 80%, transparent); }
.band a { color: var(--color-accent-ink); }
.band :focus-visible { outline-color: var(--color-accent-ink); }
@media (max-width: 56rem) { .band .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }
.form label { display: block; font-size: var(--text-sm); font-weight: 500; margin: var(--space-md) 0 var(--space-2xs); }
.form input, .form select { width: 100%; min-height: 48px; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); transition: border-color var(--dur-short) var(--ease-out); }
.form input:hover, .form select:hover { border-color: var(--color-muted); }
.form input:focus-visible, .form select:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.form input:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.form .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--space-md); }
@media (max-width: 36rem) { .form .grid2 { grid-template-columns: minmax(0, 1fr); } }
.form .check { display: flex; gap: var(--space-sm); align-items: flex-start; font-weight: 400; margin-top: var(--space-lg); }
.form .check input { width: 20px; min-height: 20px; height: 20px; margin-top: var(--space-3xs); flex: none; accent-color: var(--color-paper); }
.form .btn { width: 100%; margin-top: var(--space-lg); background: var(--color-paper); color: var(--color-accent); }
.form .btn:hover { background: var(--color-paper-2); }
.form .btn:disabled { background: var(--color-paper-3); color: var(--color-muted); }
#msg { margin-top: var(--space-md); font-weight: 500; min-height: 1.5em; }
#msg.ok { color: var(--color-accent-ink); }
#msg.err { color: var(--color-paper-3); }

/* ruled lists: démarches, adresses, faq */
.ruled { border-top: var(--rule-ink) solid var(--color-rule-ink); }
.ruled > * { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-xl); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.ruled h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--text-title); }
.ruled p { color: var(--color-ink-2); }
.ruled p + p { margin-top: var(--space-xs); }
@media (max-width: 48rem) { .ruled > * { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }
.small { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-md); }

/* footer */
.footer { padding-block: var(--space-2xl); border-top: var(--rule-ink) solid var(--color-rule-ink); }
.footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: baseline; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.footer a { font-size: var(--text-sm); color: var(--color-ink-2); }
.footer p { font-size: var(--text-sm); color: var(--color-muted); }
.ruled .link, .check a { white-space: nowrap; }
.form .fixed { margin-top: var(--space-xs); font-weight: 500; }
.form .warn { margin-top: var(--space-md); padding: var(--space-sm) var(--space-md); border-left: var(--rule-ink) solid var(--color-accent-ink); font-size: var(--text-sm); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang { display: flex; gap: var(--space-md); justify-content: flex-end; padding-block: 0 var(--space-xs); font-size: var(--text-sm); }
.lang a { color: var(--color-muted); text-decoration: none; }
.lang a:hover { color: var(--color-accent); }
html[lang="fr"] .lang a[lang="fr"], html[lang="en"] .lang a[lang="en"], html[lang="ar"] .lang a[lang="ar"] { color: var(--color-ink); font-weight: 500; }
:root:lang(ar) { --font-display: "Noto Naskh Arabic", "Libre Caslon Display", serif; --font-body: "Noto Naskh Arabic", "Hanken Grotesk", system-ui, sans-serif; --tracking-display: 0; }
:lang(ar) h1, :lang(ar) h2 { line-height: 1.35; font-weight: 500; }
:lang(ar) body, :lang(ar) p { line-height: 1.8; }
.form .warn { border-left: 0; border-inline-start: var(--rule-ink) solid var(--color-accent-ink); }
:lang(ar) .rows dd { unicode-bidi: plaintext; }