/* Hallmark · Photographic · studied-DNA (Dribbble AutoDealer) · N5 · Ft5 · critique P5 H5 E4 S5 R4 V5 */

@font-face {
  font-family: "Mona Sans";
  src: url("/assets/fonts/mona-sans-v2.woff2") format("woff2");
  font-weight: 250 600;
  font-stretch: 100% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Mona Fallback";
  src: local("Arial");
  size-adjust: 104.81%;
  ascent-override: 104%;
  descent-override: 30.53%;
  line-gap-override: 0%;
}

/* Tokens */
:root {
  color-scheme: dark;
  --paper: oklch(15.5% 0.008 170);
  --surface-1: oklch(19% 0.009 170);
  --surface-2: oklch(23% 0.010 170);
  --rule: oklch(30% 0.010 170);
  --edge: oklch(60% 0.010 170);
  --ink: oklch(95% 0.006 170);
  --ink-muted: oklch(74% 0.010 170);
  --ink-faint: oklch(64% 0.010 170);
  --mist: oklch(93.5% 0.006 170);
  --mist-2: oklch(89.5% 0.007 170);
  --mist-rule: oklch(84% 0.008 170);
  --mist-edge: oklch(56% 0.010 170);
  --mist-ink: oklch(19% 0.010 170);
  --mist-muted: oklch(44% 0.010 170);
  --brand: oklch(34% 0.049 161);
  --brand-press: oklch(29% 0.045 161);
  --brand-lift: oklch(56% 0.08 158);
  --brand-muted: oklch(84% 0.025 161);
  --gold: oklch(78% 0.111 86);
  --accent-ink: oklch(22% 0.03 86);
  --signal-open: oklch(76% 0.16 150);
  --signal-open-mist: oklch(50% 0.13 150);
  --error: oklch(50% 0.13 40);
  --grid-line: oklch(70% 0.010 170 / .16);
  --glass: oklch(17% 0.010 170 / .66);
  --glass-solid: oklch(17% 0.010 170 / .88);
  --glass-edge: oklch(95% 0.006 170 / .16);
  --blade: oklch(95% 0.006 170 / .75);
  /* pre-mixed alphas: color-mix() needs Safari 16.2+ */
  --paper-92: oklch(15.5% 0.008 170 / .92);
  --paper-85: oklch(15.5% 0.008 170 / .85);
  --paper-82: oklch(15.5% 0.008 170 / .82);
  --paper-60: oklch(15.5% 0.008 170 / .60);
  --paper-55: oklch(15.5% 0.008 170 / .55);
  --paper-28: oklch(15.5% 0.008 170 / .28);
  --paper-18: oklch(15.5% 0.008 170 / .18);
  --ink-22: oklch(95% 0.006 170 / .22);
  /* language-switch flags: official colours; the edge keeps the white band visible on any surface */
  --flag-fr-blue: #002654; --flag-fr-white: #fff; --flag-fr-red: #ce1126;
  --flag-ma-red: #c1272d; --flag-ma-green: #006233;
  --flag-edge: oklch(50% 0.010 170 / .35);
  /* estimator error glyph (20 px grid, 1.5 stroke), drawn as a mask so it takes currentColor */
  --i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 3.5 17.5 16.5h-15Z'/%3E%3Cpath d='M10 8.5v3.5'/%3E%3Ccircle cx='10' cy='14.2' r='.4' fill='black'/%3E%3C/svg%3E");

  --font: "Mona Sans", "Mona Fallback", system-ui, sans-serif;
  --font-arabic: "Readex Arabic", "Readex Fallback"; /* the /ar/ face and its metric-matched fallback: both @font-face are in the Arabic block at the end */
  --fs-display: clamp(2.375rem, 1.6rem + 3.6vw, 5rem);
  --fs-title: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --fs-lead: clamp(1.1875rem, 1rem + 0.9vw, 1.625rem);
  --fs-body: 1rem;
  --fs-label: .8125rem;
  /* per-role line heights and weights: :lang(ar) re-maps them (Arabic needs more room, and thin weights read faint) */
  --lh-display: 1.04; --lh-title: 1.06; --lh-lead: 1.35; --lh-body: 1.55; --lh-label: 1.2; --lh-small: 1.45;
  --w-display: 300; --w-body: 380; --w-label: 560;
  --to-end: to right; --to-start: to left; /* gradient directions, swapped by [dir="rtl"] */

  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --r-1: 4px; --r-2: 10px; --r-3: 16px; --r-pill: 999px;
  --z-raised: 10; --z-sticky: 200; --z-sticky-nav: 300;
  --gutter: max(clamp(1rem, 4vw, 2.5rem), env(safe-area-inset-left), env(safe-area-inset-right));
  --wrap: min(100% - 2 * var(--gutter), 82.5rem);
  --header-h: calc(56px + env(safe-area-inset-top));
  --tap: 44px;
  --btn-h: 52px;
  --sq: 40px;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
  --ease-wipe: cubic-bezier(.4, 0, .2, 1); /* hero squeegee: sweeps from the first frame, still settles */
  --d-press: 120ms; --d-hover: 180ms; --d-hover-out: 150ms; --d-ui: 220ms; --d-exit: 160ms; --d-swap: 150ms; --d-wipe: 700ms;
  --dh: var(--d-hover-out); /* hover transitions: exits run at 150 ms; :hover (fine pointer) switches to 180 ms */

  /* surface semantics: dark by default, re-mapped by [data-surface] */
  --surface: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --fg-faint: var(--ink-faint);
  --line: var(--rule);
  --line-strong: var(--edge);
  --focus: var(--gold);
  --hover: var(--surface-2);
  --signal: var(--signal-open);
  --logo-drop: var(--brand-lift);
  --logo-arc: var(--gold);
}
[data-surface="mist"] {
  color-scheme: light;
  --surface: var(--mist);
  --fg: var(--mist-ink);
  --fg-muted: var(--mist-muted);
  --fg-faint: var(--mist-muted);
  --line: var(--mist-rule);
  --line-strong: var(--mist-edge);
  --focus: var(--brand);
  --hover: var(--mist-2);
  --signal: var(--signal-open-mist);
  --logo-drop: var(--brand);
  background: var(--surface);
  color: var(--fg);
  font-weight: 400;
}
[data-surface="brand"] {
  --surface: var(--brand);
  --fg: var(--ink);
  --fg-muted: var(--brand-muted);
  --fg-faint: var(--brand-muted);
  --line: var(--ink-22);
  --line-strong: var(--brand-muted);
  --focus: var(--gold);
  --hover: var(--brand-press);
  --logo-drop: var(--ink);
  background: var(--surface);
  color: var(--fg);
}
@media (min-width: 64rem) {
  :root { --header-h: calc(72px + env(safe-area-inset-top)); }
  html { scroll-padding-bottom: 0; } /* no booking bar on desktop */
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + var(--space-sm));
  scroll-padding-bottom: calc(56px + 2 * var(--space-sm) + env(safe-area-inset-bottom)); /* focus never hides under the booking bar */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, h4, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
b, strong { font-weight: 600; }
::selection { background: var(--gold); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.sr {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: var(--wrap); margin-inline: auto; }
.nowrap { white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; display: block; }
.mark { aspect-ratio: 413.7 / 549.8; width: auto; flex: none; display: block; }

/* type */
.h1, .h2, .statement { font-weight: var(--w-display); overflow-wrap: anywhere; min-width: 0; }
.h1 { font-size: var(--fs-display); letter-spacing: -.035em; line-height: var(--lh-display); }
.h2, .statement { font-size: var(--fs-title); letter-spacing: -.03em; line-height: var(--lh-title); }
.statement { text-wrap: wrap; } /* SplitText measures the lines itself */
.ln { display: block; width: fit-content; max-width: 100%; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.01em; }
[data-surface="mist"] .lead { font-weight: 420; }
.t-label {
  font-size: var(--fs-label); font-weight: var(--w-label); font-stretch: 112.5%;
  text-transform: uppercase; letter-spacing: .08em; line-height: var(--lh-label);
}
.t-small { font-size: var(--fs-label); line-height: var(--lh-small); }
.muted { color: var(--fg-muted); }
.prose { max-width: 60ch; }
.spec-num {
  font-size: var(--fs-title); font-weight: 250; font-stretch: 125%;
  letter-spacing: -.02em; line-height: 1; /* proportional figures: Mona Sans draws its tabular zero slashed */
}

/* skip link */
.skip {
  position: fixed; z-index: calc(var(--z-sticky-nav) + 1);
  top: calc(env(safe-area-inset-top) + var(--space-sm)); inset-inline-start: max(var(--space-sm), env(safe-area-inset-left), env(safe-area-inset-right));
  padding: var(--space-sm) var(--space-md);
  background: var(--gold); color: var(--accent-ink);
  border-radius: var(--r-2); font-weight: 560; text-decoration: none;
  transform: translateY(calc(-100% - var(--space-2xl)));
}
.skip:focus { transform: none; outline-color: var(--ink); }

/* Status */
.status { display: inline-flex; align-items: center; gap: var(--space-xs); line-height: 1.2; }
.status::before {
  content: ""; flex: none; width: var(--space-xs); height: var(--space-xs);
  border-radius: 50%; background: var(--fg-muted);
}
.status[data-state="open"]::before { background: var(--signal); }
.status[data-state="soon"]::before { background: var(--gold); }
.status[data-state="closed"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg-muted); }

/* Buttons & links */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  min-height: var(--btn-h);
  padding-inline: var(--space-lg) var(--space-xs);
  border: 1px solid transparent; border-radius: var(--r-2);
  font-size: var(--fs-body); font-weight: 520; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), border-color var(--dh) var(--ease-out), background-color var(--dh) var(--ease-out);
}
.btn__sq {
  width: var(--sq); height: var(--sq); flex: none;
  display: grid; place-items: center; border-radius: var(--r-1);
}
.btn__sq .i { transition: transform var(--dh) var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--solid { background: var(--fg); color: var(--surface); }
.btn--solid .btn__sq { background: var(--surface); color: var(--fg); }
.btn--solid:focus-visible { outline-color: var(--focus); }
.btn--outline { border-color: var(--line-strong); color: var(--fg); }
.btn--outline .btn__sq { background: var(--fg); color: var(--surface); }
.btn--brand { background: var(--brand); color: var(--mist); }
.btn--brand .btn__sq { background: var(--gold); color: var(--accent-ink); }
.btn--full { width: 100%; }
/* icon buttons: centred label with a leading glyph, no square; hover = squeegee fill */
.btn--icon { justify-content: center; gap: var(--space-xs); padding-inline: var(--space-md); }
.btn--icon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hover); clip-path: inset(0 100% 0 0);
  transition: clip-path 150ms var(--ease-out);
}
@media (max-width: 22.49rem) { .btn--icon .i { display: none; } }
.tlink {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  min-height: var(--tap);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
  transition: text-decoration-color var(--dh) var(--ease-out);
}
.tlink .i { width: 18px; height: 18px; transition: transform var(--dh) var(--ease-out); }
.tlink:active { opacity: .7; }
.inline-link {
  position: relative;
  white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-color var(--dh) var(--ease-out);
}
/* inline links: 44px hit area, line box unchanged */
.inline-link::after, .foot__info a::after { content: ""; position: absolute; inset: calc((100% - var(--tap)) / 2) calc(-1 * var(--space-2xs)); }
/* in-sentence links (WCAG 2.5.8 exempt): stay inside their own line box, or a wrapped neighbour steals the tap */
.inline-link::after { inset-block: calc((100% - 1lh) / 2); }
@media (hover: hover) and (pointer: fine) {
  :is(.btn, .tlink, .inline-link, .brand, .tel, .foot__info a, .mpill__menu, .mpill__tarifs, .pill--nav a, .pill--phone, .pill--wa, .menu__close, .menu__links a, .lang__alt, .seg__opt, .row, .step-btn, .input, .foot__links a):hover { --dh: var(--d-hover); }
  .btn:hover .i--go, .tlink:hover .i--go { transform: translate(2px, -2px); }
  .btn:hover .i--down, .tlink:hover .i--down { transform: translateY(2px); }
  .btn--outline:not(.btn--icon):has(.btn__sq .i:not(.i--go, .i--down)):hover { border-color: var(--fg); }
  .btn--icon:hover::before { clip-path: inset(0); transition-duration: 200ms; }
  .tlink:hover { text-decoration-color: currentColor; }
  .inline-link:hover { text-decoration-color: var(--focus); }
  .brand:hover, .tel:hover, .foot__info a:hover { opacity: .75; }
}
/* small text links: press feedback (hover lives in the fine-pointer block above) */
.brand, .tel, .foot__info a { transition: opacity var(--dh) var(--ease-out); }
.brand:active, .tel:active, .foot__info a:active, .inline-link:active { opacity: .6; }

/* Glass */
.glass {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-3);
  padding: var(--space-lg);
}
@media (min-width: 64rem) {
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .glass { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
  }
}

/* Hairline grid (hero at all widths, dark sections from 64rem) */
.gridlines {
  position: absolute; inset: 0; margin-inline: auto;
  width: var(--wrap); pointer-events: none;
  border-inline: 1px solid var(--grid-line);
}
@media (min-width: 64rem) {
  .gridlines {
    background:
      linear-gradient(var(--grid-line) 0 0) 25% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line) 0 0) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line) 0 0) 75% 0 / 1px 100% no-repeat;
  }
  .lined { position: relative; isolation: isolate; }
  .lined::before {
    content: ""; position: absolute; inset: 0; margin-inline: auto; z-index: -1;
    width: var(--wrap); pointer-events: none;
    border-inline: 1px solid var(--grid-line);
    background:
      linear-gradient(var(--grid-line) 0 0) 25% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line) 0 0) 50% 0 / 1px 100% no-repeat,
      linear-gradient(var(--grid-line) 0 0) 75% 0 / 1px 100% no-repeat;
    /* lines fade in at the top of each section instead of starting mid-darkness */
    -webkit-mask-image: linear-gradient(transparent, var(--ink) var(--space-3xl)); mask-image: linear-gradient(transparent, var(--ink) var(--space-3xl));
  }
}

/* Header (N5 floating pills) */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky-nav);
  padding-top: env(safe-area-inset-top);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--paper); /* opaque on phones: no blur there, so any alpha only ghosts text through */
  border-bottom: 1px solid var(--rule);
  opacity: 0; transition: opacity var(--d-exit) var(--ease-out);
}
.site-header.is-solid::before { opacity: 1; transition-duration: 200ms; }
.header__in {
  position: relative; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: var(--tap); text-decoration: none; white-space: nowrap;
  font-size: var(--fs-body); font-weight: 560; font-stretch: 112%; line-height: 1;
}
.brand .mark { height: 24px; }
@media (max-width: 22.49rem) { .site-header .brand__name { font-size: .9375rem; } }
.site-header .brand { min-width: 0; }
.site-header .brand__name { overflow: hidden; text-overflow: ellipsis; } /* only under user text-spacing overrides */
.mpill { display: flex; height: var(--tap); }
.mpill__menu {
  width: var(--tap); padding: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--glass-solid); border: 1px solid var(--glass-edge); border-inline-end: 0;
  border-radius: 0; border-start-start-radius: var(--r-2); border-end-start-radius: var(--r-2);
  transition: transform var(--d-press) var(--ease-out), background-color var(--dh) var(--ease-out);
}
.mpill__tarifs {
  display: flex; align-items: center; padding-inline: var(--space-md);
  background: var(--ink); color: var(--paper); border-radius: 0; border-start-end-radius: var(--r-2); border-end-end-radius: var(--r-2);
  font-weight: 520; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: transform var(--d-press) var(--ease-out), background-color var(--dh) var(--ease-out);
}
.mpill__menu:active, .mpill__tarifs:active { transform: scale(.97); }
.pills { display: none; }
@media (hover: hover) and (pointer: fine) {
  .mpill__menu:hover { background: var(--surface-2); }
  .mpill__tarifs:hover { background: var(--mist-2); }
}
@media (min-width: 64rem) {
  .site-header::before { background: var(--paper-92); }
  .header__in { height: 72px; }
  .brand .mark { height: 28px; }
  .mpill { display: none; }
  .pills {
    display: flex; align-items: stretch; height: calc(var(--tap) + 2px);
    background: var(--glass-solid); border: 1px solid var(--glass-edge); border-radius: var(--r-2);
    transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pills { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); }
  }
  .is-solid .pills { background: var(--surface-1); border-color: var(--rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pills > * + * { border-inline-start: 1px solid var(--glass-edge); }
  .is-solid .pills > * + * { border-inline-start-color: var(--rule); }
  .pill { display: flex; align-items: center; gap: var(--space-xs); padding-inline: var(--space-md); white-space: nowrap; line-height: 1; }
  .pill--status { font-size: var(--fs-label); color: var(--fg-muted); }
  .site-header:not(.is-solid) .pill--status { display: none; } /* over the hero the glass card already shows it */
  .pill--nav { padding-inline: var(--space-2xs); gap: 0; }
  .pill--nav a {
    display: flex; align-items: center; height: 100%; padding-inline: var(--space-sm);
    text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
    transition: text-decoration-color var(--dh) var(--ease-out);
  }
  .pill--nav a:focus-visible, .pill--phone:focus-visible, .pill--lang a:focus-visible { outline-offset: -4px; border-radius: var(--r-2); }
  .pill--phone { padding-inline: var(--space-sm); text-decoration: none; transition: background-color var(--dh) var(--ease-out); }
  .pill__num { display: none; }
  .pill--wa {
    background: var(--ink); color: var(--paper); border-radius: 0; border-start-end-radius: calc(var(--r-2) - 1px); border-end-end-radius: calc(var(--r-2) - 1px);
    text-decoration: none; font-weight: 520;
    transition: transform var(--d-press) var(--ease-out), background-color var(--dh) var(--ease-out);
  }
  .pill--wa:active { transform: scale(.97); }
  .pill--wa:focus-visible { outline-color: var(--gold); outline-offset: 3px; }
  .pill--wa .i { width: 18px; height: 18px; }
  .pill--lang { align-items: stretch; gap: 0; padding-inline: 0; }
  .pill--lang .lang__cur { display: none; } /* « FR » from 80rem, with the phone number */
}
@media (min-width: 80rem) { .pill__num { display: inline; } .pill--lang .lang__cur { display: flex; } }
/* 64–80rem: room for the language segment beside the longest status (« Ouvert · ferme dans 20 min ») */
@media (min-width: 64rem) and (max-width: 79.99rem) { .pill--nav { padding-inline: 0; } .pill--status { padding-inline: var(--space-sm); } }
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .pill--nav a:hover { text-decoration-color: currentColor; }
  .pill--phone:hover { background: var(--surface-2); }
  .pill--wa:hover { background: var(--mist-2); }
}
@media (min-width: 64rem) {
  .pill--nav a:active, .pill--phone:active { opacity: .7; }
}

/* Language switch « FR | ع »: the current language (text) + a link to the other page, each with its flag.
   One markup in three places: header pills (.pill--lang), mobile pill (.mpill__lang), menu (.menu__lang).
   Flags are decorative (the labels and aria names carry the language) and never mirror. */
.lang { display: flex; align-items: stretch; white-space: nowrap; line-height: 1; }
.lang > * { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap); padding-inline: var(--space-sm); }
.lang__cur { position: relative; color: var(--fg-muted); }
.lang__cur::after { content: ""; position: absolute; inset-inline-end: 0; top: calc(50% - .5em); height: 1em; border-inline-end: 1px solid var(--line-strong); }
.lang__alt {
  font-weight: 520;
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dh) var(--ease-out);
}
.lang__alt:active { opacity: .7; }
/* a lone « ع » at 16 px is about the Latin x-height: scaled up, it reads as large as the « FR » caps (both pages) */
.lang__txt:lang(ar) { font-size: 1.25em; line-height: 1; }
/* /ar/ draws it in Readex, whose « ع » hangs ~.4em under the « FR » centre (Arial's on / about .15em): lifted to match */
.lang__cur .lang__txt:lang(ar) { translate: 0 -.25em; }
/* 3:2; an outline, not an inset shadow: the SVG paints over its own box shadow */
.flag { width: 21px; height: 14px; flex: none; display: block; border-radius: 2px; outline: 1px solid var(--flag-edge); outline-offset: -1px; }
.lang__alt .flag { opacity: .8; transition: opacity var(--dh) var(--ease-out); }
.lang__alt:focus-visible .flag { opacity: 1; }
.mpill__lang .lang__cur { display: none; } /* the header keeps only the link to the other page */
.mpill__lang .lang__alt { padding-inline: var(--space-sm); background: var(--glass-solid); border: 1px solid var(--glass-edge); border-inline-end: 0; }
/* flag only where the label does not fit (the link keeps its aria-label): mobile header 360–399 (one 44 px
   square), desktop header 64–80rem (beside the longest status) */
@media (max-width: 24.99rem) {
  .mpill__lang .lang__alt { width: var(--tap); padding: 0; }
  .mpill__lang .lang__txt { display: none; }
}
@media (min-width: 64rem) and (max-width: 79.99rem) { .pill--lang .lang__txt { display: none; } }
@media (max-width: 22.49rem) { .mpill__lang { display: none; } } /* 320: no room beside the wordmark; the menu has it */
.menu__lang { align-self: flex-start; border: 1px solid var(--line-strong); border-radius: var(--r-2); }
.menu__lang > * { min-height: var(--tap); }
@media (hover: hover) and (pointer: fine) {
  .lang__alt:hover { text-decoration-color: currentColor; }
  .lang__alt:hover .flag { opacity: 1; }
}
/* no colours to show: the label stands in for the flag */
@media (forced-colors: active) {
  .flag { display: none; }
  .mpill__lang .lang__txt, .pill--lang .lang__txt { display: inline; }
}

/* Menu (dialog) */
.menu {
  position: fixed; inset: 0 0 auto; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; max-height: 100svh; overflow-y: auto;
  background: var(--surface-1); color: var(--fg);
  border-radius: 0 0 var(--r-3) var(--r-3);
  opacity: 0; transform: translateY(-12px);
  transition: opacity var(--d-exit) var(--ease-out), transform var(--d-exit) var(--ease-out), overlay var(--d-exit) allow-discrete, display var(--d-exit) allow-discrete;
}
.menu[open] {
  opacity: 1; transform: none;
  transition-duration: 240ms; transition-timing-function: var(--ease-drawer);
}
@starting-style { .menu[open] { opacity: 0; transform: translateY(-12px); } }
.menu::backdrop {
  background: var(--paper-60);
  opacity: 0;
  transition: opacity var(--d-exit) var(--ease-out), overlay var(--d-exit) allow-discrete, display var(--d-exit) allow-discrete;
}
.menu[open]::backdrop { opacity: 1; transition-duration: 240ms; }
@starting-style { .menu[open]::backdrop { opacity: 0; } }
.menu__sheet {
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: var(--space-md);
}
.menu__top { height: 56px; display: flex; align-items: center; justify-content: space-between; }
.menu__close {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  height: var(--tap); padding-inline: var(--space-sm) var(--space-md);
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-2);
  font-weight: 520; line-height: 1; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), background-color var(--dh) var(--ease-out);
}
.menu__close:active { transform: scale(.97); }
.menu__links { border-top: 1px solid var(--line); }
.menu__links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: var(--fs-lead); line-height: 1.2;
  transition: background-color var(--dh) var(--ease-out);
}
.menu__links a:active { background: var(--surface-2); }
.menu__links .i { color: var(--fg-faint); }
.menu__status { color: var(--fg-muted); }
.menu__addr { color: var(--fg-muted); }
/* short phones (SE1, 568 px): five links, both booking buttons and the language switch on one screen */
@media (max-height: 37.5rem) and (orientation: portrait) { .menu__sheet { gap: var(--space-sm); } .menu__links a { min-height: 48px; } }
@media (hover: hover) and (pointer: fine) {
  .menu__close:hover { background: var(--surface-2); }
  .menu__links a:hover { background: var(--surface-2); }
}

/* Hero */
.hero {
  position: relative; isolation: isolate;
  min-height: min(100svh, 64rem); /* ponytail: cap so tall-viewport renderers (Googlebot ~412x12140) keep a screen-sized hero */
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: calc(var(--header-h) + var(--space-md)) var(--space-3xl);
}
.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* phones: solid under the text, clear toward the top */
  background:
    linear-gradient(to top, var(--paper-92) 35%, transparent 85%),
    linear-gradient(to bottom, var(--paper-55), transparent 9rem),
    linear-gradient(var(--paper-18), var(--paper-18));
}
.hero .gridlines { z-index: -1; }
.hero__in { position: relative; display: flex; flex-direction: column; gap: var(--space-md); }
/* one header-height above the hero text: the header turns solid before text slides under it */
.hero__sentinel { position: absolute; inset-inline: 0; top: calc(-1 * var(--header-h) - 1px); height: 1px; pointer-events: none; }
.chip {
  align-self: flex-start; height: 32px; padding-inline: var(--space-sm);
  background: var(--glass-solid); border: 1px solid var(--glass-edge); border-radius: var(--r-pill);
  font-size: var(--fs-label);
}
.hero__title .ln { position: relative; }
.hero__title .ln--2 { margin-inline-start: 1.2em; }
.hero__lede { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.hero__lede p { max-width: 34ch; }
.hero__lede .tlink { display: none; }
.spec {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm);
  margin-top: var(--space-xs);
}
.spec__item { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.spec__item .t-small { color: var(--fg-muted); }
.spec__unit { font-size: var(--fs-label); font-weight: 560; font-stretch: 112.5%; letter-spacing: .08em; }
@media (max-width: 22.49rem) { .spec .spec-num { font-stretch: 112%; } }
/* « dès » / « من » before the hero price: inline from 25rem; on narrower phones it sits just above « 40 DH »,
   in the row gap, so the price keeps its third of the row (no height change) */
@media (max-width: 24.99rem) {
  .spec__item { position: relative; }
  .spec__from { position: absolute; transform: translateY(-100%); line-height: 1.2; }
}
.hero__side { display: flex; flex-direction: column; gap: var(--space-xs); margin-top: var(--space-xs); }
.hero__card { display: none; }
.hero__cta { width: 100%; }
.hero__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.hero__card .status { display: flex; margin-block: var(--space-md) var(--space-2xs); color: var(--fg-muted); }
/* the card column is ~236 px at 1024–1136: even lines, not « à 9h » alone on the second */
.hero__card .status span, .hero__card .lead { text-wrap: balance; }
.hero__city { color: var(--fg-muted); }
.hero__addr { display: flex; align-items: center; gap: var(--space-2xs); color: var(--fg-muted); }
.hero__addr .i { width: 1rem; height: 1rem; flex: none; }
@media (max-width: 22.49rem), (min-width: 64rem), (max-height: 30rem) { .hero__addr { display: none; } } /* desktop has the hero card; at 320px and on short screens (landscape phones, SE1) the line would push the CTA or Call / Directions below the fold */

/* hero entrance: "coup de raclette" (CSS, first paint) */
@media (prefers-reduced-motion: no-preference) {
  /* negative clip insets keep accents and descenders */
  .hero__title .ln__txt {
    display: block;
    animation: wipe-txt var(--d-wipe) var(--ease-wipe) backwards;
    animation-delay: calc(80ms + var(--n, 0) * 90ms);
  }
  .hero__title .ln::after {
    content: ""; position: absolute; inset: -.12em 0 -.18em; pointer-events: none;
    border-inline-start: 2px solid var(--blade); opacity: 0;
    animation: blade-move var(--d-wipe) var(--ease-wipe), blade-fade var(--d-wipe) linear;
    animation-delay: calc(80ms + var(--n, 0) * 90ms);
  }
  /* supporting facts land after the promise: line 3 is ~80% drawn at 620 ms */
  .rise { animation: rise 400ms var(--ease-out) backwards; animation-delay: calc(620ms + var(--n, 0) * 50ms); }
}
@keyframes wipe-txt { from { clip-path: inset(-.2em 100% -.25em -.05em); } to { clip-path: inset(-.2em -.05em -.25em -.05em); } }
@keyframes blade-move { from { transform: translateX(0); } to { transform: translateX(100%); } }
/* the blade only exists while it moves: no parked bar reading as a text caret */
@keyframes blade-fade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }
/* .01, not 0: opacity 0 is not an LCP candidate */
@keyframes rise { from { opacity: .01; transform: translateY(8px); } }

@media (min-width: 48rem) {
  .hero__media img { object-position: 55% 50%; }
  .hero__lede .tlink { display: inline-flex; }
  .hero__lede p { max-width: 44ch; }
  .hero__side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .hero__cta { width: auto; }
  .hero__duo { display: flex; }
}
@media (min-width: 48rem) and (orientation: portrait) {
  .hero__media img { object-position: 45% 50%; } /* upright tablets: the 3:2 photo is height-bound, keep the washer in frame */
}
@media (min-width: 64rem) {
  .hero {
    min-height: clamp(40rem, 100svh, 90rem);
    padding-block: var(--space-3xl) var(--space-4xl);
  }
  .hero::before {
    background:
      linear-gradient(to top, var(--paper-92), transparent 70%),
      linear-gradient(var(--to-end), var(--paper-82), transparent 60%),
      linear-gradient(to bottom, var(--paper-55), transparent 50%), /* down to the title: the top band stays dark behind it */
      linear-gradient(var(--paper-28), var(--paper-28));
  }
  .hero__in {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "title title title ." ". lede lede side" "spec spec spec side";
    row-gap: var(--space-xl); column-gap: 0; align-items: end; /* gutters come from padding, so items land on the hairlines */
  }
  .chip { display: none; }
  .hero__title { grid-area: title; }
  .hero__title .ln--2 { margin-inline-start: calc(100% / 3); }
  .hero__lede { grid-area: lede; padding-inline-end: var(--space-lg); }
  .spec { grid-area: spec; gap: 0; margin: 0; }
  .spec__item { padding-inline-end: var(--space-lg); }
  .hero__side { grid-area: side; flex-direction: column; align-items: stretch; gap: var(--space-sm); margin: 0; }
  .hero__card { display: block; }
  .hero__cta { width: 100%; }
  .hero__duo { display: none; }
}
/* narrow columns: the long label is for screen readers only */
@media (min-width: 64rem) and (max-width: 79.99rem), (max-height: 30rem) and (orientation: landscape) and (max-width: 39.99rem) {
  .cta__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Section rhythm */
.sec-head { display: flex; flex-direction: column; gap: var(--space-md); }
.sec-head .lede { color: var(--fg-muted); max-width: 52ch; }
@media (min-width: 64rem) {
  .h2 .ln--2 { margin-inline-start: calc(100% / 3); }
  /* a short lede breaks the column hairline instead of being crossed by it (first px clear: the frame edge stays) */
  .sec-head .lede { width: fit-content; background: linear-gradient(var(--to-end), transparent 1px, var(--surface) 0); padding-inline-end: var(--space-xs); }
  .sec-head--span3 { grid-column: 1 / span 3; }
}

/* Tarifs */
.tarifs { padding-block: var(--space-2xl) var(--space-3xl); }
.tarifs__grid { display: grid; gap: var(--space-lg); }
.tarifs__aside { display: flex; flex-direction: column; gap: var(--space-xl); }
.tarifs__aside .lede { color: var(--fg-muted); max-width: 46ch; }
.veh-photo { display: none; }
.sheet {
  --pad: var(--space-md);
  border-radius: var(--r-3);
  padding: var(--space-lg) var(--pad);
  min-width: 0;
}
@media (max-width: 22.49rem) { .sheet { --pad: var(--space-sm); margin-inline: calc(-1 * var(--space-xs)); } }
.veh { border: 0; margin: 0; padding: 0; min-width: 0; }
.veh legend { padding: 0; margin-bottom: var(--space-sm); color: var(--fg-muted); }
.seg {
  --i: 0; --seg-pad: var(--space-2xs);
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 48px; padding: var(--seg-pad);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
}
.seg:has(#veh-formules:checked) { --i: 1; }
.seg:has(#veh-tapis:checked) { --i: 2; }
.seg__thumb {
  position: absolute; top: var(--seg-pad); bottom: var(--seg-pad); inset-inline-start: var(--seg-pad);
  width: calc((100% - 2 * var(--seg-pad)) / 3);
  border-radius: calc(var(--r-2) - var(--seg-pad));
  background: var(--mist-ink);
  transform: translateX(calc(var(--i) * 100%));
  transition: transform var(--d-ui) var(--ease-out);
}
.seg__opt {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; min-width: 0;
  border-radius: calc(var(--r-2) - var(--space-2xs));
  font-weight: 520; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: color var(--d-swap) var(--ease-out), background-color var(--dh) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.seg__opt::after { content: ""; position: absolute; inset: calc(-1 * var(--seg-pad) - 1px) 0; } /* 48px hit area */
.seg__opt input { appearance: none; width: 0; height: 0; margin: 0; opacity: 0; }
.seg__opt:has(:checked) { color: var(--mist); }
.seg__opt:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg__opt:active span { transform: scale(.97); }
.seg__opt span { transition: transform var(--d-press) var(--ease-out); }
@media (max-width: 24.99rem) {
  .seg { --seg-pad: var(--space-3xs); }
  .seg__opt { font-size: .9375rem; letter-spacing: -.01em; }
}

.panels { margin-top: var(--space-md); }
/* only the active panel is in flow; instant swap, the price roll is the transition */
.panel { display: none; min-width: 0; }
.sheet:has(#veh-vehicules:checked) .panel--vehicules,
.sheet:has(#veh-formules:checked) .panel--formules,
.sheet:has(#veh-tapis:checked) .panel--tapis { display: block; }
@supports not selector(:has(*)) {
  .seg { display: none; }
  .panel { display: block; margin-bottom: var(--space-lg); }
  .panel h3 { position: static !important; width: auto; height: auto; margin: 0 0 var(--space-xs); clip-path: none; }
}
.rows { margin-inline: calc(-1 * var(--pad)); border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "name price" "desc go";
  column-gap: var(--space-md); row-gap: var(--space-2xs);
  min-height: 72px; padding: var(--space-md) var(--pad);
  border-bottom: 1px solid var(--line);
  color: var(--fg); text-decoration: none;
  transition: background-color var(--dh) var(--ease-out), transform var(--d-press) var(--ease-out);
}
.row:active { transform: scale(.985); background: var(--hover); }
.row:focus-visible { outline-offset: -3px; border-radius: var(--r-2); }
.row__name { grid-area: name; font-weight: 600; align-self: baseline; }
.row__desc { grid-area: desc; color: var(--fg-muted); align-self: start; }
.row__price { grid-area: price; justify-self: end; align-self: baseline; white-space: nowrap; }
.row__go {
  grid-area: go; justify-self: end; align-self: end;
  width: var(--sq); height: var(--sq); display: grid; place-items: center;
  border-radius: var(--r-1); background: var(--brand); color: var(--mist);
}
.row__go .i { width: 18px; height: 18px; }
/* phones: a row without a description (moto) on one line; at 320 the name wraps beside the price */
@media (max-width: 47.99rem) {
  .row:not(:has(.row__desc)) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name price go"; align-items: center; }
  .row:not(:has(.row__desc)) > * { align-self: center; }
}
.num-mask { display: inline-block; clip-path: inset(0); vertical-align: baseline; }
.num {
  display: inline-block;
  font-size: var(--fs-lead); font-weight: 300; font-stretch: 125%;
  line-height: 1.15; letter-spacing: -.01em;
}
.unit { font-size: var(--fs-label); font-weight: 560; font-stretch: 112.5%; letter-spacing: .08em; color: var(--fg-muted); }
.unit__per { text-transform: none; letter-spacing: 0; }
.sheet__note { margin-top: var(--space-lg); color: var(--fg-muted); }
.sheet__note a { color: var(--fg); }
@media (hover: hover) and (pointer: fine) {
  .row:hover { background: var(--hover); }
  .seg__opt:not(:has(:checked)):hover { background: var(--hover); }
}

/* estimator */
.est { margin-top: var(--space-lg); display: grid; gap: var(--space-md); }
.est[hidden] { display: none; }
.est__title { font-size: var(--fs-lead); font-weight: 420; line-height: 1.2; letter-spacing: -.01em; }
.est__fields { display: grid; gap: var(--space-md); }
.field__label { display: block; margin-bottom: var(--space-xs); color: var(--fg-muted); }
.stepper { display: grid; grid-template-columns: var(--btn-h) minmax(0, 1fr) var(--btn-h); gap: var(--space-xs); }
.step-btn {
  height: var(--btn-h); padding: 0; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-2);
  transition: transform var(--d-press) var(--ease-out), background-color var(--dh) var(--ease-out);
}
.step-btn:active { transform: scale(.97); background: var(--hover); }
.step-btn[aria-disabled="true"] { cursor: not-allowed; }
.step-btn[aria-disabled="true"] .i { opacity: .55; } /* dim the glyph, not the button: the focus ring keeps its 3:1 */
.step-btn[aria-disabled="true"]:active { transform: none; background: transparent; }
.input-wrap { position: relative; min-width: 0; }
.input {
  width: 100%; height: var(--btn-h);
  padding-block: 0; padding-inline: var(--space-md) calc(var(--space-md) + var(--space-lg));
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line-strong); border-radius: var(--r-2);
  outline: 2px solid transparent; outline-offset: 1px;
  font: inherit; font-size: max(16px, var(--fs-body)); font-weight: 420;
  transition: background-color var(--dh) var(--ease-out), border-color var(--dh) var(--ease-out);
}
.input:focus-visible { outline-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input__unit { position: absolute; inset-inline-end: var(--space-md); top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.est__out {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-sm);
  padding-block: var(--space-md); border-block: 1px solid var(--line);
}
.est__calc { display: flex; flex-direction: column; gap: var(--space-2xs); color: var(--fg-muted); }
.est__calc .t-label { color: var(--fg); }
.est__total { white-space: nowrap; }
.est__total .spec-num { font-size: var(--fs-title); }
.est__msg { min-height: calc(var(--lh-small) * 1em); color: var(--fg-muted); } /* 1 line of .t-small; not 1lh (Safari 16.4+) */
/* helper: 2 lines on phones, errors 1: reserve 2 so the CTA never jumps */
@media (max-width: 47.99rem) {
  .est__msg { min-height: calc(2em * var(--lh-small)); }
  /* the total sits above the fields, so it stays in view above the keyboard while typing */
  .est__title { order: -2; }
  .est__out { order: -1; }
}
.est__msg[data-error] { color: var(--error); }
.est__msg[data-error]::before {
  content: ""; display: inline-block; width: 1.25em; height: 1.25em; margin-inline-end: var(--space-2xs); vertical-align: -.3em;
  background: currentColor;
  -webkit-mask: var(--i-alert) center / contain no-repeat; mask: var(--i-alert) center / contain no-repeat;
}
@media (hover: hover) and (pointer: fine) {
  .step-btn:hover:not([aria-disabled="true"]) { background: var(--hover); }
  .input:hover { background: var(--hover); }
}

/* rental agencies: a brand band under the sheet, whatever the tab */
.agence { display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-md); border-radius: var(--r-3); min-width: 0; }
@media (max-width: 22.49rem) { .agence { padding-inline: var(--space-sm); margin-inline: calc(-1 * var(--space-xs)); } }
.agence__title { font-size: var(--fs-lead); font-weight: 420; line-height: var(--lh-lead); letter-spacing: -.01em; }
.agence__lead { margin-top: var(--space-2xs); color: var(--fg-muted); }
.agence__go { display: grid; gap: var(--space-xs); }

@media (min-width: 48rem) {
  .agence { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-xl); padding: var(--space-xl); }
  .sheet { --pad: var(--space-xl); padding: var(--space-xl); }
  .seg { max-width: 30rem; }
  .row {
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto 2.5rem;
    grid-template-areas: "name desc price go";
    align-items: center; padding-block: var(--space-lg);
  }
  .row__name, .row__desc, .row__price { align-self: center; }
  .row__go { align-self: center; }
  .est__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .est .btn { justify-self: start; }
}
@media (min-width: 64rem) {
  .tarifs__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "title title title ." "aside sheet sheet sheet" ". agence agence agence";
    column-gap: 0; row-gap: var(--space-xl);
  }
  .tarifs__title { grid-area: title; }
  .tarifs__aside { grid-area: aside; padding-inline-end: var(--space-lg); }
  .sheet { grid-area: sheet; align-self: start; }
  .agence { grid-area: agence; }
  .veh-photo {
    display: grid; aspect-ratio: 3 / 4; border-radius: var(--r-3); overflow: hidden; overflow: clip;
    background: var(--surface-1);
  }
  .veh-photo picture { grid-area: 1 / 1; }
  /* only the incoming photo fades, over a still outgoing one */
  .veh-photo img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 0s linear var(--d-ui);
  }
  .tarifs:has(#veh-vehicules:checked) [data-veh-img="vehicules"],
  .tarifs:has(#veh-formules:checked) [data-veh-img="formules"],
  .tarifs:has(#veh-tapis:checked) [data-veh-img="tapis"] { z-index: 1; }
  .tarifs:has(#veh-vehicules:checked) [data-veh-img="vehicules"] img,
  .tarifs:has(#veh-formules:checked) [data-veh-img="formules"] img,
  .tarifs:has(#veh-tapis:checked) [data-veh-img="tapis"] img { opacity: 1; transition: opacity var(--d-ui) var(--ease-out); }
}

/* Services (bento over photo band) */
.services {
  display: grid;
  grid-template-columns: [full-start] minmax(var(--gutter), 1fr) [content-start] minmax(0, 82.5rem) [content-end] minmax(var(--gutter), 1fr) [full-end];
  padding-bottom: var(--space-2xl);
}
@media (min-width: 48rem) { .services { padding-bottom: var(--space-3xl); } }
.services > *, .services__head > * { grid-column: content; min-width: 0; }
.services__band { grid-column: full; grid-row: 1; position: relative; aspect-ratio: 4 / 5; }
.services__band img { width: 100%; height: 100%; object-fit: cover; }
.services__band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--paper-85), transparent 50%),
    linear-gradient(to top, var(--paper), transparent 30%);
}
/* 320: a longer top scrim, so the thin title sits on the dark bay, not on the foam */
@media (max-width: 22.49rem) {
  .services__band::after { background: linear-gradient(to bottom, var(--paper-85), transparent 62%), linear-gradient(to top, var(--paper), transparent 30%); }
}
.services__head { display: contents; }
.services__head .h2 { grid-row: 1; align-self: start; padding-top: var(--space-xl); position: relative; }
.services__sub { grid-row: 3; margin-top: var(--space-lg); color: var(--fg-muted); max-width: 46ch; position: relative; }
.services__glass { grid-row: 2; margin-top: calc(-2 * var(--space-xl)); position: relative; z-index: var(--z-raised); }
.services__glass p, .card__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.01em; }
.services__glass p { color: var(--fg-muted); }
.services__glass b, .card__lead b { color: var(--fg); }
.bento { grid-row: 4; margin-top: var(--space-lg); display: grid; gap: var(--space-3xs); position: relative; z-index: var(--z-raised); }
.card {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-lg);
  padding: var(--space-lg); border-radius: var(--r-3); min-width: 0;
}
.card__lead { color: var(--fg-muted); }
.card .tlink { align-self: flex-start; color: var(--fg); font-weight: 520; }
.card .t-small { color: var(--fg-muted); max-width: 40ch; }
@media (min-width: 48rem) {
  .services__band { aspect-ratio: 16 / 9; }
  .services__band img { object-position: 30% 0%; }
  .services__glass { justify-self: end; width: 50%; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card--wide { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  /* the band spans two rows: sub-line in the first, glass card at the foot of the second, so a longer text
     (Arabic at 1024–1240) grows the band instead of running under the card */
  .services__band { grid-row: 1 / 3; aspect-ratio: auto; min-height: clamp(34rem, 46vw, 42rem); }
  .services__band::after {
    background:
      linear-gradient(to bottom, var(--paper-85), transparent 60%),
      linear-gradient(to top, var(--paper), transparent 35%),
      linear-gradient(var(--to-end), var(--paper-55), transparent 50%),
      linear-gradient(var(--to-start), var(--paper-82) 42%, transparent 72%); /* under the sub-line: its last lines reach the foamed mirror (≥ 3:1 on the brightest pixels, 1024–1440) */
  }
  /* the heading sits on the dark bay, not the foam; out of flow, so the photo's 3:2 never sizes the rows */
  .services__band img { position: absolute; inset: 0; object-position: 30% 0%; }
  .services__head .h2 { width: 50%; padding: var(--space-3xl) 0 0; padding-inline-end: var(--space-lg); }
  .services__sub { grid-row: 1; align-self: start; justify-self: end; width: 50%; margin: 0; padding-top: var(--space-3xl); }
  .services__glass { grid-row: 2; align-self: end; margin: var(--space-lg) 0 calc(var(--space-3xl) + var(--space-xl)); }
  .bento { grid-row: 3; margin-top: calc(-1 * var(--space-3xl)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card { min-height: 15rem; }
  .card--wide { grid-column: span 2; }
  .card--wide .t-small { align-self: flex-end; max-width: 50%; }
  /* quarter-width cards: body size (lead size there broke into 5–6 short lines) */
  .card:not(.card--wide) .card__lead { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; }
}

/* Le lavage (process) */
.lavage { padding-block: var(--space-xl) var(--space-2xl); }
@media (min-width: 48rem) { .lavage { padding-top: var(--space-2xl); } }
.lavage .sec-head { margin-bottom: var(--space-xl); }
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-md);
  padding-block: var(--space-md); border-bottom: 1px solid var(--line); align-items: start;
}
.step__media { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-2); overflow: hidden; overflow: clip; background: var(--surface-1); }
.step__mask, .step__inner { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.step__inner img { width: 100%; height: 100%; object-fit: cover; }
.step__blade {
  position: absolute; inset-block: 0; inset-inline-end: 0; width: 2px;
  background: var(--blade); opacity: 0; visibility: hidden;
}
.step__body { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-2xs); }
.step__idx { color: var(--fg-faint); }
.step__txt { color: var(--fg-muted); }
.step__txt b { color: var(--fg); }
@media (max-width: 22.49rem) { .step { grid-template-columns: 104px minmax(0, 1fr); } }
@media (min-width: 48rem) {
  .steps { border-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); row-gap: var(--space-xl); }
  .step { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-md); padding: 0; border: 0; }
  .step:nth-child(even) { margin-top: var(--space-xl); }
  .step__media { border-radius: var(--r-3); }
  .step__txt { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.01em; }
}
@media (min-width: 64rem) {
  .lavage { padding-block: var(--space-3xl) var(--space-2xl); }
  .contact { padding-block: var(--space-3xl) var(--space-4xl); }
  .contact .sec-head { width: 75%; } /* 3 of 4 columns, so line 2 lands on column 2 */
  .lavage__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .step { padding-inline-end: var(--space-lg); margin-top: calc(var(--i, 0) * var(--space-xl)) !important; }
  .step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; } .step:nth-child(4) { --i: 3; }
  /* quarter-width columns: body size, so each step reads in 2–3 full lines */
  .step__txt { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0; }
}

/* result frame */
.result { margin-top: var(--space-xl); }
@media (min-width: 48rem) { .result { margin-top: var(--space-2xl); } }
.result__frame { position: relative; }
.result__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; overflow: clip; background: var(--surface-1); }
.result__media img { width: 100%; height: 100%; object-fit: cover; }
/* fades the asphalt shadows; the wheels (~76% down) stay clear */
.result__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--paper-82), transparent 30%); }
/* the card hugs its text, at the end side over the asphalt */
.result__card {
  position: relative; z-index: var(--z-raised);
  width: fit-content; max-width: calc(100% - 2 * var(--space-sm));
  margin: calc(-1 * var(--space-xl)) 0 0; margin-inline: auto var(--space-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md);
}
.result__card p { font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: -.01em; color: var(--fg-muted); max-width: 30ch; }
.result__card b { color: var(--fg); }
.result figcaption { margin-top: var(--space-sm); color: var(--fg-faint); }
@media (min-width: 64rem) {
  /* contact-card geometry: columns 3-4, on the hairlines */
  .result { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .result__frame { display: contents; }
  .result__media { grid-column: 1 / -1; grid-row: 1; }
  .result__card { grid-column: 3 / -1; grid-row: 2; width: auto; max-width: none; margin: calc(-1 * var(--space-3xl)) 0 0; }
  .result figcaption { grid-column: 1 / 3; grid-row: 2; }
}

/* Questions (FAQ): visible text, hairline rows. From 64rem each row splits on the hairlines:
   the question on columns 1–2 (start), the answer on 3–4 (end), first baselines aligned. The rows are opaque,
   so the column hairlines land on the list's top rule instead of running through body text */
.faq { padding-block: var(--space-xl) var(--space-lg); }
@media (min-width: 48rem) { .faq { padding-top: var(--space-2xl); } }
.faq .sec-head { margin-bottom: var(--space-xl); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-bottom: 1px solid var(--line); }
.faq__q { font-size: var(--fs-lead); font-weight: 420; line-height: var(--lh-lead); letter-spacing: -.01em; }
.faq__a { color: var(--fg-muted); max-width: 60ch; }
.faq__a a { color: var(--fg); }
@media (min-width: 64rem) {
  .faq { padding-block: var(--space-3xl) 0; } /* the last row's rule meets the contact section, whose hairlines fade in */
  .faq .sec-head { width: 75%; } /* 3 of 4 columns, so line 2 lands on column 2 */
  .faq__item { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; align-items: baseline; padding-block: var(--space-xl); background: var(--surface); }
  .faq__q { grid-column: 1 / 3; padding-inline-end: var(--space-xl); }
  .faq__a { grid-column: 3 / -1; padding-inline-end: var(--space-lg); }
}

/* Contact */
.contact { padding-block: var(--space-xl) var(--space-3xl); }
@media (min-width: 48rem) { .contact { padding-top: var(--space-2xl); } }
.contact .sec-head { margin-bottom: var(--space-xl); }
.contact__grid { --overlap: var(--space-xl); }
.map {
  --pin-x: 50%;
  position: relative; display: grid; padding-bottom: var(--overlap);
  border-radius: var(--r-3); overflow: hidden; overflow: clip; background: var(--surface-1);
}
.map::before { content: ""; aspect-ratio: 4 / 3; }
.map__img { position: absolute; inset: 0; }
.map__img img { width: 100%; height: 100%; object-fit: cover; }
.map__pin {
  position: absolute; left: var(--pin-x); top: 50%; height: 36px; /* physical: the plan is never mirrored, see [dir="rtl"] .map */
  transform: translate(-50%, -50%); pointer-events: none;
  --logo-drop: var(--ink); --logo-arc: var(--gold);
}
.map__btn {
  position: absolute; inset-inline-start: var(--space-sm); bottom: calc(var(--overlap) + var(--space-sm));
  min-height: 48px; background: var(--glass-solid); border-color: var(--edge);
}
.map__credit {
  position: absolute; top: var(--space-sm); inset-inline-end: var(--space-sm);
  padding: var(--space-2xs) var(--space-xs); border-radius: var(--r-1);
  background: var(--glass-solid); color: var(--ink-muted); line-height: 1.3;
}
.map__frame { position: absolute; inset: 0 0 var(--overlap) 0; width: 100%; height: calc(100% - var(--overlap)); border: 0; background: var(--surface-1); }
.map.is-live .map__btn, .map.is-live .map__pin, .map.is-live .map__credit { display: none; }
.contact__card {
  position: relative; z-index: var(--z-raised);
  margin-top: calc(-1 * var(--overlap));
  border-radius: var(--r-3); padding: var(--space-lg) var(--space-md);
  display: flex; flex-direction: column; gap: var(--space-lg);
}
.info { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.info dt { color: var(--fg-muted); }
.info dd:not(.status) { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -.01em; }
.info .status { color: var(--fg-muted); }
.info .btn { margin-top: var(--space-xs); }
.tel { display: inline-flex; align-items: center; min-height: var(--tap); text-decoration: none; white-space: nowrap; }
.contact__go { align-self: flex-start; margin-top: calc(-1 * var(--space-sm)); }
.contact__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); }
.contact__card > .tlink { align-self: flex-start; margin-top: calc(-1 * var(--space-xs)); }
@media (min-width: 48rem) {
  .contact__grid { --overlap: var(--space-2xl); }
  .map::before { aspect-ratio: 16 / 9; }
  .contact__card { padding: var(--space-xl); }
}
/* tablet portrait: the card in two columns, no empty half */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .contact__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); grid-auto-flow: column; column-gap: var(--space-xl); align-items: start; }
  .contact__go, .contact__card > .tlink { justify-self: start; }
}
@media (min-width: 64rem) {
  .contact__grid { --overlap: 0px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .map { --pin-x: 25%; grid-area: 1 / 1 / 2 / 5; height: 34rem; align-self: start; padding: 0; }
  .map::before { display: none; }
  /* centre the plan on the visible half (25%) */
  .map__img { inset-inline: -50% auto; width: 150%; }
  .map__frame { inset-block: 0; inset-inline: 0 auto; width: 50%; height: 100%; }
  .map.is-live .map__credit { display: block; }
  .contact__card { grid-area: 1 / 3 / 2 / 5; width: auto; margin: var(--space-2xl) 0 0; align-self: start; }
}

/* Footer (Ft5 statement on Ft1 mast) */
.foot {
  /* the booking bar is hidden from #contact on */
  padding-block: var(--space-3xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
}
.foot__in { display: grid; gap: var(--space-xl); }
.statement { max-width: 18ch; }
.foot__brand { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--fs-lead); font-weight: 420; line-height: 1.2; }
.foot__brand .mark { height: 40px; }
.foot__info { color: var(--fg-muted); max-width: 52ch; }
.foot__info a { position: relative; text-decoration: none; white-space: nowrap; }
.foot__links { display: flex; flex-wrap: wrap; column-gap: var(--space-lg); }
.foot__links a {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); white-space: nowrap;
  text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent);
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dh) var(--ease-out);
}
.foot__links a:active { opacity: .7; }
.foot__links a[lang="ar"] { font-size: 1.125em; } /* « النسخة العربية » on the French page (system Arabic face) reads as large as the Latin links */
.foot__legal { color: var(--fg-muted); border-top: 1px solid var(--line); padding-top: var(--space-lg); }
/* below 64rem the items stack: a wrapped line never ends on a dangling separator */
@media (max-width: 63.99rem) { .foot__item { display: block; } .foot__sep { display: none; } }
@media (hover: hover) and (pointer: fine) { .foot__links a:hover { text-decoration-color: currentColor; } }
@media (min-width: 64rem) {
  .foot { padding-block: var(--space-3xl) var(--space-2xl); }
  .foot__in {
    grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; row-gap: var(--space-xl);
    grid-template-areas: "stmt stmt stmt links" "brand info info info" "legal legal legal legal";
  }
  .statement { grid-area: stmt; max-width: none; }
  .foot__brand { grid-area: brand; align-self: start; }
  .foot__info { grid-area: info; max-width: none; padding-inline-start: var(--space-lg); }
  .foot__in > nav { grid-area: links; }
  .foot__links { flex-direction: column; align-items: flex-start; margin-top: calc(-1 * var(--space-sm)); }
  .foot__legal { grid-area: legal; }
}

/* Booking bar (mobile) */
.book-bar {
  position: fixed; z-index: var(--z-sticky);
  left: max(var(--space-sm), env(safe-area-inset-left));
  right: max(var(--space-sm), env(safe-area-inset-right));
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: var(--space-xs);
  max-width: 34rem; margin-inline: auto; /* tablets: label and its square stay together */
  transform: translateY(calc(100% + var(--space-lg) + env(safe-area-inset-bottom)));
  transition: transform var(--d-exit) var(--ease-out);
}
.book-bar.is-shown { transform: none; transition: transform 240ms var(--ease-drawer); }
.bar__main {
  display: flex; align-items: center; gap: var(--space-sm); min-width: 0;
  height: 56px; padding-inline: var(--space-md) var(--space-xs);
  background: var(--surface-1); border: 1px solid var(--edge); border-radius: var(--r-2);
  text-decoration: none; transition: transform var(--d-press) var(--ease-out);
}
.bar__txt { display: flex; flex-direction: column; gap: var(--space-3xs); min-width: 0; flex: 1; }
.bar__label { font-weight: 560; line-height: 1.1; white-space: nowrap; }
.bar__status { display: block; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.bar__status::before { display: inline-block; margin-inline-end: var(--space-xs); vertical-align: .08em; } /* block box, so a long caption ends in "…" */
.bar__sq { width: var(--sq); height: var(--sq); flex: none; display: grid; place-items: center; border-radius: var(--r-1); background: var(--ink); color: var(--paper); }
.bar__call {
  display: grid; place-items: center; height: 56px;
  background: var(--surface-1); border: 1px solid var(--edge); border-radius: var(--r-2);
  transition: transform var(--d-press) var(--ease-out);
}
.bar__main:active, .bar__call:active { transform: scale(.97); }
body:has(dialog[open]) .book-bar { transform: translateY(calc(100% + var(--space-lg) + env(safe-area-inset-bottom))); }
/* 320: room for « Ferme dans 20 min »; call square stays ≥44px */
@media (max-width: 22.49rem) {
  .book-bar { grid-template-columns: minmax(0, 1fr) 48px; }
  .bar__main { gap: var(--space-xs); padding-inline-start: var(--space-sm); }
}
@media (max-width: 24.99rem) { .bar__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (min-width: 64rem) { .book-bar { display: none; } }

/* Short viewports */
/* landscape phones: no booking bar, two-column hero, shorter photo band and map */
@media (max-height: 30rem) and (orientation: landscape) {
  :root { --fs-display: clamp(2rem, 6svh + 1rem, 2.75rem); }
  html { scroll-padding-bottom: 0; }
  .book-bar { display: none; }
  .hero { min-height: auto; padding-bottom: var(--space-xl); }
  /* the text covers the photo: a veil, plus an end-side layer under the spec labels */
  .hero::before { background: linear-gradient(to top, var(--paper-92), transparent 70%), linear-gradient(var(--to-start), var(--paper-55), transparent 60%), linear-gradient(var(--paper-60), var(--paper-60)); }
  .services__band { aspect-ratio: 16 / 9; }
  .map::before { aspect-ratio: 21 / 9; }
  .menu__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
  .menu__links a { min-height: 48px; }
}
@media (max-height: 30rem) and (orientation: landscape) and (max-width: 63.99rem) {
  .hero__in {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); row-gap: var(--space-sm);
    grid-template-areas: "chip ." "title spec" "lede side"; align-items: end;
  }
  .chip { grid-area: chip; justify-self: start; }
  .hero__title { grid-area: title; }
  .hero__lede { grid-area: lede; align-self: start; }
  .spec { grid-area: spec; margin: 0; }
  .spec .spec-num { font-size: var(--fs-lead); }
  .hero__side { grid-area: side; margin: 0; align-self: start; }
  .contact__grid { --overlap: var(--space-xl); } /* map + overlap stay under one screen */
}
/* short portrait (SE1 Safari, 320x454 visible): the hero tightens so the CTA clears the fold, in both languages */
@media (max-height: 30rem) and (orientation: portrait) {
  .hero .chip { display: none; } /* the status is in the booking bar and the menu */
  .hero__in { gap: var(--space-sm); }
  .spec, .hero__side { margin-top: 0; }
}

/* RTL (/ar/ is <html lang="ar" dir="rtl">). The logical properties above mirror the layout on their own
   (line-2 indents, grids, cards, pills, booking bar, menu, inputs); these mirror what they cannot express. */
[dir="rtl"] { --to-end: to left; --to-start: to right; } /* photo scrims and the lede's clear first px follow the text */
/* ↗ becomes ↖ (↓, phone and WhatsApp glyphs stay). `scale` applies after the hover `transform`, so the
   translate(2px, -2px) nudge mirrors with the glyph */
[dir="rtl"] .i--go { scale: -1 1; }
/* estimator fields hold Latin numbers: ordered as such, so a half-typed « 2, » no longer shows as « ,2 »; still start-aligned */
[dir="rtl"] .input { unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] .seg__thumb { transform: translateX(calc(var(--i) * -100%)); } /* the tab thumb travels from the right */
:where([dir="rtl"]) .btn--icon::before { clip-path: inset(0 0 0 100%); } /* hover fill sweeps from the start side; :where keeps :hover stronger */
@media (prefers-reduced-motion: no-preference) {
  /* coup de raclette right to left: the text clears from the right edge, the blade travels leftwards */
  [dir="rtl"] .hero__title .ln__txt { animation-name: wipe-txt-rtl; }
  [dir="rtl"] .hero__title .ln::after { animation-name: blade-move-rtl, blade-fade; }
}
/* -.3em on top: Arabic hamzas and marks rise higher than Latin accents; -.35em below: the tails of « في أسكجور. »
   at the tightest line height (1.1, landscape) */
@keyframes wipe-txt-rtl { from { clip-path: inset(-.3em -.05em -.35em 100%); } to { clip-path: inset(-.3em -.05em -.35em -.05em); } }
@keyframes blade-move-rtl { from { transform: translateX(0); } to { transform: translateX(-100%); } }
/* the services band is the one mirrored photo (no text in it): the title and the sub-line move to the other half,
   and unflipped the sub-line would sit on the white foam instead of the dark wall */
[dir="rtl"] .services__band img { scale: -1 1; }
/* the plan is never mirrored: the card covers the left half in RTL, so pin and plan centre sit at 75% */
@media (min-width: 64rem) { [dir="rtl"] .map { --pin-x: 75%; } }
/* the GSAP process wipe flips its xPercent signs in main.js (document.dir) */

/* Arabic (:lang(ar)): inert on the French page, which never requests the face (only :root:lang(ar) names it).
   Readex Pro (OFL), Arabic-only subset. wght is pre-mapped to Mona Sans strokes: CSS 300/380/520/560/600 draw
   Readex 250/335/440/475/500, so the French font-weight values carry over. « » stay out of the range: Mona draws them. */
@font-face {
  font-family: "Readex Arabic";
  src: url("/assets/fonts/readex-pro-arabic-v1.woff2") format("woff2");
  font-weight: 250 600;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0656, U+0660-0671, U+06A1, U+06A4, U+06BA, U+FD3E-FD3F;
}
/* until Readex arrives, local Arial draws the Arabic at Readex's advance widths (measured on this page's text:
   ×1.26 at weight 300, ×1.30 at 380, ×1.33 at 520) and vertical metrics, so lines do not rewrap on the swap (CLS).
   ponytail: Arial only exists on Windows and macOS; elsewhere system-ui draws the fallback, as before */
@font-face {
  font-family: "Readex Fallback";
  src: local("Arial");
  size-adjust: 130%;
  ascent-override: 77%; descent-override: 19%; line-gap-override: 0%; /* Readex 1000/250/0 per 1000, ÷ 1.30 */
  unicode-range: U+060C, U+061B, U+061F, U+0621-063A, U+0640-0656, U+0660-0671, U+06A1, U+06A4, U+06BA, U+FD3E-FD3F;
}
:root:lang(ar) {
  /* Mona Sans first: Latin digits, the brand and units stay in it; Arabic glyphs fall through to Readex
     (which must come before "Mona Fallback": local Arial has Arabic and would draw it) */
  --font: "Mona Sans", var(--font-arabic), "Mona Fallback", system-ui, sans-serif;
  --lh-display: 1.3; --lh-title: 1.3; --lh-lead: 1.6; --lh-body: 1.8; --lh-label: 1.5; --lh-small: 1.7;
  --fs-label: .875rem; /* no uppercase or tracking left to carry 13 px labels */
}
/* where the hero is height-bound, its three short display lines tighten: desktop (laptop windows 1280x720 and
   1366x768 keep the CTA and the spec row in view, as in French), landscape phones (Call / Directions above the fold)
   and short portrait phones (SE1 Safari: the CTA above the fold). The wipe's clip insets (wipe-txt-rtl) still clear the marks */
@media (min-width: 64rem) { :root:lang(ar) { --lh-display: 1.12; } :lang(ar) .hero { --lh-lead: 1.45; --lh-body: 1.6; --lh-small: 1.5; } }
@media (max-height: 30rem) { :root:lang(ar) { --lh-display: 1.1; } :lang(ar) .hero { --lh-lead: 1.4; } }
@media (max-height: 30rem) and (orientation: portrait) { :lang(ar) .hero { --lh-small: 1.4; } }
/* joined letters: tracking breaks them; Arabic has no case */
:lang(ar) { letter-spacing: 0 !important; text-transform: none !important; }
:lang(ar) .info dd:not(.status) { line-height: 1.6; }
:lang(ar) .est__title { line-height: 1.45; }
/* clipped boxes: room for marks above and tails below, layout unchanged */
:lang(ar) .bar__status { padding-block: .25em; margin-block: -.25em; }
/* SplitText line masks (built at run time: mask > line), so the footer reveal never clips marks */
:lang(ar) [data-split] > *, :lang(ar) [data-split] > * > * { padding-block: .3em; margin-block: -.3em; }
:lang(ar) [data-split] > * + * { margin-top: -.6em; } /* sibling margins collapse to the larger one, not their sum */
@media (max-width: 24.99rem) { :lang(ar) .seg__opt { font-size: .875rem; } }
/* 360–374: « الأسعار » is wider than « Tarifs »: a tighter pill keeps the wordmark whole beside the FR square */
@media (max-width: 23.4rem) { :lang(ar) .mpill__tarifs { padding-inline: var(--space-sm); } }

/* Preferences */
@media (prefers-reduced-motion: reduce) {
  .btn, .row, .step-btn, .mpill__menu, .mpill__tarifs, .pill--wa, .bar__main, .bar__call, .menu__close, .seg__opt span { transition: none; }
  .btn:active, .row:active, .step-btn:active, .mpill__menu:active, .mpill__tarifs:active, .pill--wa:active, .bar__main:active, .bar__call:active, .menu__close:active, .seg__opt:active span { transform: none; }
  .btn__sq .i, .tlink .i, .btn--icon::before, .seg__thumb { transition: none; }
  .menu, .menu[open] { transform: none; transition: opacity 120ms linear, overlay 120ms allow-discrete, display 120ms allow-discrete; }
  @starting-style { .menu[open] { transform: none; } }
  .book-bar, .book-bar.is-shown, body:has(dialog[open]) .book-bar { transform: none; transition: opacity 120ms linear; }
  .book-bar { opacity: 0; }
  .book-bar.is-shown { opacity: 1; }
  body:has(dialog[open]) .book-bar { opacity: 0; }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .pills { background: var(--glass-solid) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (forced-colors: active) {
  .btn, .row, .seg, .step-btn, .input, .bar__main, .bar__call, .mpill__menu, .pills { border: 1px solid ButtonText; }
  .seg__thumb { background: Highlight; }
  .seg__opt:has(:checked) { color: HighlightText; forced-color-adjust: none; }
  .status::before { forced-color-adjust: none; background: CanvasText; }
}