/* Jenko — concept 2 «Prototype, juicy» (French site jenko2, from v19/proto): the prototype's blocks, one design layer richer.
   Tokens first; every size, colour and duration below comes from them. */

@font-face { font-family: "RF"; src: url("../../concepts/fonts/roboto-flex-latin-full.woff2") format("woff2"); font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* colour */
  --jaune: #ffcf2b;
  --jaune-deep: #f2bf12;
  --paper: #f1ede6;
  --paper-hi: #f8f6f1;
  --stone: #e2dcd1;
  --ink: #16181b;
  --ink-2: #454b52;
  --graphite: #1f2022;
  --graphite-2: #2b2d30;
  --on-graphite: #ece9e3;
  --on-graphite-2: #a9aaa6;
  --on-photo: #fff;
  --shade: 12 13 14;
  --rule: rgb(38 34 28 / 0.16);
  --rule-strong: rgb(38 34 28 / 0.55);
  --rule-dark: rgb(236 233 227 / 0.16);
  --rule-dark-strong: rgb(236 233 227 / 0.42);
  --err: #7a1708;
  --err-on-dark: #ffb4a2;

  /* type: six roles */
  --font: "RF", "Roboto Flex", "Helvetica Neue", Arial, sans-serif;
  --step-display: clamp(2.125rem, 0.2rem + 7.7vw, 7.25rem);
  --step-title: clamp(1.875rem, 1.05rem + 3.3vw, 4.5rem);
  --step-fig: clamp(1.875rem, 0.9rem + 3.2vw, 4.25rem);
  --step-sub: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  --step-body: clamp(1rem, 0.94rem + 0.22vw, 1.125rem);
  --step-small: 0.875rem;
  --w-head: 120%;   /* semi-expanded headings */
  --w-fig: 151%;    /* the wordmark's width, for figures */

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;
  --m: clamp(16px, 4vw, 64px);
  --g: clamp(12px, 1.6vw, 24px);
  --frame: clamp(6px, 0.7vw, 12px);
  --pad: clamp(48px, 5vw, 96px);
  --r-frame: 4px;
  --r-panel: 10px;
  --bar-h: 64px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
  --t-ui: 200ms;
  --t-move: 320ms;
  --t-reveal: 500ms;
}

@media (max-width: 600px) {
  :root { --step-display: clamp(2.125rem, 10vw - 1px, 3rem); }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); scroll-padding-top: var(--s-4); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--step-body); line-height: 1.5; font-weight: 400; font-stretch: 100%;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--stone); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.band :focus-visible, .hero :focus-visible, .menu :focus-visible, .lb :focus-visible, .top.is-solid :focus-visible, .rail :focus-visible, .req__card :focus-visible { outline-color: var(--jaune); }
.nw { white-space: nowrap; }
sub { font-size: 0.86em; line-height: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 1200; left: var(--s-4); top: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper-hi); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1920px; margin-inline: auto; padding-inline: var(--m); }

/* ————— type roles ————— */
.hero__title { font-size: var(--step-display); font-stretch: var(--w-head); font-weight: 640; line-height: 0.96; letter-spacing: -0.035em; text-wrap: balance; }
.title { font-size: var(--step-title); font-stretch: var(--w-head); font-weight: 620; line-height: 1; letter-spacing: -0.032em; text-wrap: balance; }
.fig { font-size: var(--step-fig); font-stretch: var(--w-fig); font-weight: 860; line-height: 0.95; letter-spacing: -0.012em; font-variant-numeric: lining-nums tabular-nums; }
.fig__pre { font-size: var(--step-sub); letter-spacing: 0; }
.sub { font-size: var(--step-sub); font-stretch: 110%; font-weight: 560; line-height: 1.15; letter-spacing: -0.015em; }
.small { font-size: var(--step-small); line-height: 1.45; }
.soft { color: var(--ink-2); }
.band .soft { color: var(--on-graphite-2); }

/* ————— buttons and links ————— */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 52px; padding: 0 var(--s-5); border: 0; border-radius: 0; white-space: nowrap;
  background: var(--jaune); color: var(--ink); text-decoration: none;
  font-size: var(--step-body); font-weight: 600; font-stretch: 105%; line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgb(22 24 27 / 0.14);
  transition: background-color var(--t-ui) var(--ease);
}
.btn span { display: inline-flex; align-items: center; gap: var(--s-3); }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--t-ui) var(--ease); }
.btn:hover { background: var(--jaune-deep); }
.btn:hover svg { transform: translateX(3px); }
.btn--wide { width: 100%; }
.btn--wide span { width: 100%; justify-content: space-between; }
.btn--sm { min-height: 48px; padding: 0 var(--s-5); }

.link { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; font-weight: 600; font-stretch: 105%; }
.link span { display: inline-flex; align-items: center; gap: var(--s-2); border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease); }
.link:hover svg { transform: translateX(3px); }

.sq { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.sq svg { width: 20px; height: 20px; }
.sq:hover:not(:disabled) { background: var(--ink); color: var(--paper-hi); }
.sq:disabled { opacity: 0.35; cursor: default; }

/* ————— top bar ————— */
.top {
  position: fixed; z-index: 40; top: var(--frame); left: var(--frame); right: var(--frame);
  display: flex; align-items: center; gap: var(--s-6);
  height: 96px; padding-inline: calc(var(--m) - var(--frame));
  color: var(--on-photo);
  transition: transform var(--t-move) var(--ease), background-color var(--t-move) var(--ease);
}
.top__brand { display: flex; align-items: center; flex: none; width: clamp(96px, 9vw, 136px); min-height: 44px; color: inherit; }
.top__brand svg { width: 100%; height: auto; }
.top__nav { position: relative; display: flex; gap: clamp(var(--s-4), 2vw, var(--s-6)); margin-inline: auto; }
.top__nav a { position: relative; display: flex; align-items: center; min-height: 44px; font-size: var(--step-small); font-weight: 600; font-stretch: 108%; text-decoration: none; letter-spacing: 0.005em; }
.top__bar { position: absolute; left: 0; bottom: 4px; width: 1px; height: 3px; background: var(--jaune); transform-origin: 0 50%; transform: translateX(var(--bx, 0)) scaleX(var(--bw, 0)); transition: transform var(--t-move) var(--ease), opacity var(--t-ui) var(--ease); opacity: 0; pointer-events: none; }
.top__bar.is-on { opacity: 1; }
.top__right { display: flex; align-items: center; gap: var(--s-5); flex: none; }
.top .top__devis-s { display: none; }
.top__menu { display: none; align-items: center; justify-content: center; gap: var(--s-3); min-height: 44px; min-width: 44px; padding: 0 var(--s-1); border: 0; background: transparent; font-size: var(--step-small); font-weight: 600; }
.top__menu i { position: relative; width: 22px; height: 10px; border-block: 1.8px solid currentColor; }

/* bar mode: phones and tablets held upright */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .top { top: 0; left: 0; right: 0; height: var(--bar-h); padding-inline: var(--m); padding-top: env(safe-area-inset-top); height: calc(var(--bar-h) + env(safe-area-inset-top)); gap: var(--s-3); }
  .top__nav { display: none; }
  .top__brand { width: clamp(84px, 24vw, 112px); margin-right: auto; }
  .top__right { gap: var(--s-3); }
  .top__menu { display: inline-flex; }
  .top.is-solid { background: var(--graphite); color: var(--on-graphite); box-shadow: 0 1px 0 var(--rule-dark); }
  .top.is-away { transform: translateY(-105%); }
  .top.is-solid.is-away { transform: translateY(-105%); }
}
@media (max-width: 600px) {
  .top .top__devis-l { display: none; }
  .top .top__devis-s { display: inline; }
  .top .btn--sm { padding: 0 var(--s-3); min-height: 44px; }
  .top, .top__right { gap: var(--s-2); }
}
@media (max-width: 430px) {
  .top__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* rail mode: laptops and monitors — the bar lives over the opening only, then the side tab */
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .top { position: absolute; }
  .top.is-away { transform: translateY(-110%); }
}
.rail { display: none; }
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .rail {
    position: fixed; z-index: 39; right: 0; top: 50%; display: flex; flex-direction: column;
    transform: translate(110%, -50%); visibility: hidden;
    transition: transform var(--t-move) var(--ease), visibility 0s linear var(--t-move);
  }
  .is-rail .rail { transform: translate(0, -50%); visibility: visible; transition-delay: 0s; }
  .rail__menu, .rail__devis {
    display: flex; align-items: center; justify-content: center; width: 44px; padding: var(--s-4) 0; border: 0;
    font-size: var(--step-small); font-weight: 650; font-stretch: 108%; text-decoration: none; writing-mode: vertical-rl;
  }
  .rail__menu span, .rail__devis span { transform: rotate(180deg); }
  .rail__menu { background: var(--ink); color: var(--paper-hi); border-radius: var(--r-frame) 0 0 0; box-shadow: inset 1px 1px 0 rgb(255 255 255 / 0.14); min-height: 96px; }
  .rail__devis { background: var(--jaune); color: var(--ink); border-radius: 0 0 0 var(--r-frame); min-height: 188px; transition: background-color var(--t-ui) var(--ease); }
  .rail__devis:hover { background: var(--jaune-deep); }
}

/* ————— menu sheet ————— */
.menu {
  position: fixed; z-index: 1100; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto;
  gap: var(--s-6); padding: var(--s-4) var(--m) max(var(--s-6), env(safe-area-inset-bottom));
  background: var(--graphite); color: var(--on-graphite);
  visibility: hidden; opacity: 0; transform: translateY(-12px);
  transition: opacity var(--t-move) var(--ease), transform var(--t-move) var(--ease), visibility 0s linear var(--t-move);
  overflow-y: auto; overscroll-behavior: contain;
}
.menu.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.menu__head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.menu__brand { width: clamp(96px, 9vw, 136px); height: auto; color: var(--on-graphite); }
.menu__close { display: inline-flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-1); border: 0; background: none; font-size: var(--step-small); font-weight: 600; }
.menu__close svg { width: 22px; height: 22px; }
.menu__nav { display: flex; flex-direction: column; align-self: center; gap: var(--s-1); }
.menu__nav a { position: relative; align-self: start; padding: var(--s-2) 0 var(--s-3); font-size: var(--step-title); font-stretch: var(--w-head); font-weight: 620; letter-spacing: -0.03em; line-height: 1; text-decoration: none; color: var(--on-graphite-2); transition: color var(--t-ui) var(--ease); }
.menu__nav a:hover, .menu__nav a:focus-visible, .menu__nav a[aria-current] { color: var(--on-graphite); }
.menu__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--jaune); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-move) var(--ease); }
.menu__nav a[aria-current]::after { transform: scaleX(1); }
.menu__nav a:hover::after, .menu__nav a:focus-visible::after { transform: scaleX(1); }
.menu__peek { display: none; }
.menu__foot { display: grid; gap: var(--s-5); align-items: end; font-size: var(--step-small); color: var(--on-graphite-2); }
.menu__foot a:not(.btn) { color: var(--on-graphite); }
.menu__tel { white-space: nowrap; font-size: var(--step-sub); font-stretch: var(--w-fig); font-weight: 820; text-decoration: none; letter-spacing: -0.01em; }
@media (min-width: 901px) and (min-aspect-ratio: 1/1) {
  .menu { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: var(--s-8); padding-top: var(--s-5); }
  .menu__head { grid-column: 1 / -1; }
  .menu__nav { grid-column: 1; }
  .menu__peek { display: block; grid-column: 2; grid-row: 2 / 4; align-self: stretch; margin: 0; overflow: hidden; border-radius: var(--r-panel); background: var(--graphite-2); }
  .menu__peek img { width: 100%; height: 100%; object-fit: cover; }
  /* address, phone, button in a row; the button moves under them, still at the end, when the row is too short (French) */
  .menu__foot { grid-column: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-5); }
  .menu__foot .btn { margin-left: auto; }
}

/* ————— opening ————— */
.hero { padding: var(--frame); }
.hero__panel { position: relative; overflow: hidden; min-height: calc(100svh - 2 * var(--frame)); border-radius: var(--r-panel); background: var(--graphite); color: var(--on-photo); display: flex; flex-direction: column; justify-content: flex-end; }
.hero__media, .hero__media video, .hero__shade { position: absolute; inset: 0; }
.hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { background:
  linear-gradient(to top, rgb(var(--shade) / 0.78) 0%, rgb(var(--shade) / 0.42) 38%, rgb(var(--shade) / 0) 64%),
  linear-gradient(to bottom, rgb(var(--shade) / 0.42) 0%, rgb(var(--shade) / 0) 22%); }
.hero__content { position: relative; padding: 120px calc(var(--m) - var(--frame)) clamp(var(--s-5), 3.4vw, var(--s-7)); }
.hero__title { max-width: 11.5em; }
.hero__foot { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto; align-items: end; gap: var(--s-5) var(--s-7); margin-top: clamp(var(--s-5), 3vw, var(--s-7)); padding-top: var(--s-5); border-top: 1px solid rgb(255 255 255 / 0.36); }
.hero__lead { max-width: 34em; font-size: var(--step-body); text-wrap: pretty; }
.hero__contact { display: grid; gap: var(--s-2); }
.hero__tel { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-size: var(--step-fig); font-stretch: var(--w-fig); font-weight: 860; letter-spacing: -0.015em; line-height: 1; text-decoration: none; font-variant-numeric: lining-nums; white-space: nowrap; }
.hero__status { display: flex; align-items: center; gap: var(--s-2); font-size: var(--step-small); color: rgb(255 255 255 / 0.9); }
.hero__status i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.hero__status.is-open i { background: #fff; border-color: #fff; }
.hero__down { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-small); font-weight: 600; text-decoration: none; }
.hero__down span { display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__down svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease); }
.hero__down:hover svg { transform: translateY(3px); }
@media (max-width: 900px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__lead { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .hero__content { padding-top: 96px; }
  .hero__foot { border-top: 0; padding-top: 0; gap: var(--s-3) var(--s-4); }
  .hero__contact { display: contents; }
  .hero__tel { grid-column: 1 / -1; margin-top: var(--s-2); }
  .hero__status { grid-column: 1; align-self: center; }
  .hero__down { grid-column: 2; }
}
@media (max-width: 440px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr); }
  .hero__down { grid-column: 1; }
  .hero__title { padding-bottom: var(--s-5); border-bottom: 1px solid rgb(255 255 255 / 0.36); }
}

/* ————— blocks ————— */
.blk { padding-block: var(--pad); }
.band { background: var(--graphite); color: var(--on-graphite); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s-4) var(--s-7); align-items: start; padding-top: var(--s-5); border-top: 1.5px solid var(--rule-strong); margin-bottom: clamp(var(--s-6), 3.4vw, var(--s-7)); }
.band .head { border-top-color: var(--rule-dark-strong); }
.head__side { display: grid; gap: var(--s-3); justify-items: start; padding-top: 0.4em; color: var(--ink-2); max-width: 36em; }
.band .head__side { color: var(--on-graphite); }
.head__side p { text-wrap: pretty; }
.head .link { color: var(--ink); }
@media (max-width: 760px) {
  .head { grid-template-columns: minmax(0, 1fr); }
  .head__side { padding-top: 0; }
}

/* reveal: photos enter behind a rising mask, once */
.motion .rv { clip-path: inset(100% 0 0 0); transition: clip-path var(--t-reveal) var(--ease) var(--d, 0ms); }
.motion .rv img { transform: scale(1.08); transition: transform 700ms var(--ease) var(--d, 0ms); }
.motion .rv.is-in { clip-path: inset(0 0 0 0); }
.motion .rv.is-in img { transform: none; }

/* ————— six families ————— */
.fam__list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-6) var(--g); }
.fam__list > li, .fam__a { min-width: 0; }
.fam__a { display: grid; grid-template-rows: auto auto 1fr; height: 100%; text-decoration: none; color: var(--ink); }
.fam__ph { position: relative; display: block; overflow: hidden; aspect-ratio: 9 / 19; min-height: 0; border-radius: var(--r-frame); background: var(--stone); }
.fam__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.motion .fam__ph.is-in img, .fam__ph img { transition: transform 450ms var(--ease) var(--d, 0ms); }
.fam__name {
  position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-2);
  margin-top: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); border-top: 1.5px solid var(--rule-strong);
  font-size: var(--step-body); font-weight: 640; font-stretch: 108%; line-height: 1.2; letter-spacing: -0.01em;
}
.fam__name::before { content: ""; position: absolute; z-index: -1; inset: -1.5px 0 0; background: var(--jaune); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-move) var(--ease); }
.fam__name svg { width: 20px; height: 20px; flex: none; margin-top: 1px; transition: transform var(--t-ui) var(--ease); }
.fam__line { padding: var(--s-1) var(--s-2) 0; font-size: var(--step-small); color: var(--ink-2); text-wrap: pretty; }
.fam__a:hover .fam__name::before, .fam__a:focus-visible .fam__name::before { transform: scaleX(1); }
.fam__a:hover .fam__name svg, .fam__a:focus-visible .fam__name svg { transform: translateX(3px); }
@media (hover: hover) {
  .fam__a:hover .fam__ph img, .motion .fam__a:hover .fam__ph.is-in img { transform: scale(1.045); }
}
.fam__a:focus-visible { outline-offset: 6px; }
@media (max-width: 1099px) {
  .fam__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fam__ph { aspect-ratio: 4 / 5; }
}
@media (max-width: 699px) {
  .fam__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-3); }
  .fam__ph { aspect-ratio: 3 / 4; }
  .fam__name { font-size: var(--step-small); font-weight: 680; padding-inline: var(--s-1); }
  .fam__name svg { width: 16px; height: 16px; }
  .fam__line { padding-inline: var(--s-1); }
}

/* ————— the cabinet (graphite band) ————— */
.cab__host { position: relative; }
.cab__fallback { margin: 0; }
.cab__photo { overflow: hidden; border-radius: var(--r-panel); background: var(--graphite-2); }
.cab__photo img { width: 100%; height: auto; }
.cab__cap { margin-top: var(--s-3); font-size: var(--step-small); color: var(--on-graphite-2); }
/* the shared explorer, set in this page's type roles and rectangular controls */
.cab__host .jcab { font-family: var(--font); }
.cab__host .jcab__seg, .cab__host .jcab__btn, .cab__host .jcab__num { border-radius: 0; font-size: var(--step-small); font-weight: 620; font-stretch: 108%; }
.cab__host .jcab__views { border-radius: 0; }
.cab__host .jcab__item { font-size: var(--step-body); font-stretch: 104%; }
.cab__host .jcab__ptitle { font-size: var(--step-sub); font-stretch: 110%; font-weight: 600; letter-spacing: -0.015em; }
.cab__host .jcab__ptext { font-size: var(--step-body); }
.cab__host .jcab__pnum { font-size: var(--step-small); font-stretch: var(--w-fig); font-weight: 860; }
.cab__host .jcab__close { font-size: var(--step-sub); border-radius: 0; }
.cab__host .jcab__hint, .cab__host .jcab__edge { font-size: var(--step-small); }
.cab__host .jcab__ptitle:focus { outline: none; }
.cab__host .jcab__spot:focus-visible, .cab__host .jcab__edge:focus-visible { outline: 2px solid var(--jaune); outline-offset: 3px; }

/* ————— the workshop ribbon ————— */
.shop__nav { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-2); }
.shop__count { min-width: 4.5ch; text-align: center; font-size: var(--step-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.shop__list {
  display: flex; gap: var(--g); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding-inline: var(--m); scroll-padding-inline: var(--m); scroll-snap-type: x proximity; scroll-behavior: smooth;
}
.shop__list::-webkit-scrollbar { display: none; }
.shop__item { flex: 0 0 min(46vw, 820px); scroll-snap-align: start; }
.shop__frame { position: relative; overflow: hidden; border-radius: var(--r-frame); background: var(--stone); }
.shop__ph { display: block; width: 100%; padding: 0; border: 0; background: none; aspect-ratio: 16 / 10; cursor: zoom-in; }
.shop__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 450ms var(--ease); }
@media (hover: hover) {
  .shop__ph:hover img, .motion .rv.is-in .shop__ph:hover img { transform: scale(1.04); }
}
.shop__zoom { position: absolute; right: var(--s-3); top: var(--s-3); display: grid; place-items: center; width: 44px; height: 44px; background: rgb(var(--shade) / 0.62); color: var(--on-photo); transition: background-color var(--t-ui) var(--ease); }
.shop__zoom svg { width: 20px; height: 20px; }
.shop__ph:hover .shop__zoom { background: rgb(var(--shade) / 0.85); }
.shop__film { position: absolute; left: var(--s-3); top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4) 0 var(--s-3); border: 0; background: rgb(var(--shade) / 0.72); color: var(--on-photo); font-size: var(--step-small); font-weight: 600; transition: background-color var(--t-ui) var(--ease); }
.shop__film svg { width: 16px; height: 16px; }
.shop__film:hover { background: rgb(var(--shade) / 0.9); }
.shop__cap { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1.5px solid var(--rule-strong); }
.shop__cap .fig--word { font-stretch: 125%; }
.shop__t { max-width: 30em; color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 760px) {
  .shop__item { flex-basis: 84vw; }
  .shop__ph { aspect-ratio: 4 / 5; }
  .shop .head__side { grid-template-columns: minmax(0, 1fr); }
}

/* ————— clients ————— */
.refs__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--g); align-items: stretch; }
.refs__main { display: contents; }
.refs__main li { position: relative; display: grid; place-items: center; min-height: clamp(260px, 30vw, 440px); padding: var(--s-7) var(--s-6); border-radius: var(--r-frame); background: var(--paper-hi); box-shadow: inset 0 0 0 1px var(--rule); }
.refs__main img { width: min(78%, 300px); height: auto; }
.refs__main span { position: absolute; left: var(--s-4); top: var(--s-4); font-size: var(--step-small); font-weight: 600; color: var(--ink-2); }
.refs__avis { display: grid; align-content: start; gap: var(--s-5); padding: var(--s-5) 0 0 var(--s-2); border-top: 1.5px solid var(--rule-strong); }
.refs__note { font-size: var(--step-small); color: var(--ink-2); text-wrap: pretty; }
.stub { display: inline-block; margin-right: var(--s-2); padding: 1px var(--s-2); border: 1.5px solid var(--ink); color: var(--ink); font-weight: 650; }
.refs__avis blockquote { font-size: var(--step-sub); font-stretch: 110%; font-weight: 480; line-height: 1.2; letter-spacing: -0.015em; text-wrap: pretty; }
.refs__avis figcaption { display: flex; align-items: center; gap: var(--s-4); font-size: var(--step-small); color: var(--ink-2); }
.refs__avis figcaption img { width: 64px; height: 80px; object-fit: cover; border-radius: var(--r-frame); }
.refs__group { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); align-items: center; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.refs__group + .refs__group { margin-top: var(--s-3); }
.refs__label { font-size: var(--step-small); font-weight: 650; color: var(--ink-2); }
.marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marq ul { display: flex; width: max-content; }
.marq li { display: grid; place-items: center; flex: none; height: 76px; padding-inline: clamp(var(--s-5), 2.6vw, var(--s-7)); }
.marq img { width: auto; height: calc(26px * var(--k, 1)); max-width: none; }
.motion .marq ul { animation: marq var(--dur, 40s) linear infinite; }
.motion .marq--rev ul { animation-direction: reverse; }
.motion .marq:hover ul, .motion .marq:focus-within ul, .motion .marq.is-held ul { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
.marq [data-clone] { visibility: visible; }
html:not(.motion) .marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html:not(.motion) .marq [data-clone] { display: none; }
@media (max-width: 900px) {
  .refs__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .refs__avis { grid-column: 1 / -1; }
  .refs__main li { min-height: 0; aspect-ratio: 1 / 1; padding: var(--s-6) var(--s-4); }
}
@media (max-width: 600px) {
  .refs__main li { aspect-ratio: 4 / 5; }
  .refs__main span { left: var(--s-3); top: var(--s-3); }
  .refs__group { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .marq li { height: 64px; }
  .marq img { height: calc(22px * var(--k, 1)); }
}

/* ————— the request ————— */
.req__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: var(--s-6) var(--g); }
.req__ph { grid-row: 1 / 3; position: relative; overflow: hidden; border-radius: var(--r-frame); background: var(--graphite-2); min-height: 100%; }
.req__ph img { width: 100%; height: 100%; object-fit: cover; }
.req__ph figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-7) var(--s-4) var(--s-4); background: linear-gradient(to top, rgb(var(--shade) / 0.72), rgb(var(--shade) / 0)); color: var(--on-photo); font-size: var(--step-small); }
.req__card { display: grid; gap: var(--s-5); padding: clamp(var(--s-5), 2.4vw, var(--s-6)); border-radius: 6px; background: var(--graphite); color: var(--on-graphite); }
.req__intro { font-size: var(--step-body); max-width: 36em; text-wrap: pretty; }
.form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4) var(--s-5); }
.form .btn { grid-column: 1 / -1; margin-top: var(--s-2); }
.field { display: grid; gap: var(--s-2); align-content: start; }
.field label { font-size: var(--step-small); font-weight: 600; color: var(--on-graphite-2); }
.field input { height: 52px; padding: 0 var(--s-3); border: 1px solid rgb(236 233 227 / 0.38); border-radius: 0; background: rgb(236 233 227 / 0.07); color: var(--on-graphite); font-size: max(16px, var(--step-body)); transition: border-color var(--t-ui) var(--ease); }
.field input:hover { border-color: rgb(236 233 227 / 0.62); }
.field input:focus { outline: 2px solid var(--jaune); outline-offset: 0; border-color: var(--on-graphite); }
.field input[aria-invalid="true"] { border-color: var(--err-on-dark); box-shadow: 0 0 0 1px var(--err-on-dark); }
.field__err { font-size: var(--step-small); color: var(--err-on-dark); }
.field__err:empty { display: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__done { grid-column: 1 / -1; display: none; gap: var(--s-2); }
.form__done.is-on { display: grid; }
.form__done .t { font-size: var(--step-sub); font-stretch: 110%; font-weight: 600; }
.form__done .n { font-size: var(--step-small); color: var(--on-graphite-2); }
.form.is-sent .field, .form.is-sent .btn { display: none; }
.req__call { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--rule-dark); font-size: var(--step-small); color: var(--on-graphite-2); }
.req__call a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-sub); font-stretch: var(--w-fig); font-weight: 820; letter-spacing: -0.01em; color: var(--on-graphite); text-decoration: none; white-space: nowrap; }
.steps { align-self: end; }
.steps__h { padding-bottom: var(--s-3); font-size: var(--step-small); font-weight: 650; color: var(--ink-2); }
.steps ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); counter-reset: none; }
.steps li { display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-4); border-top: 1.5px solid var(--rule-strong); }
.steps__n { font-size: var(--step-fig); font-stretch: var(--w-fig); font-weight: 860; line-height: 0.9; letter-spacing: -0.01em; }
.steps__name { margin-top: var(--s-2); font-size: var(--step-body); font-weight: 650; font-stretch: 108%; }
.steps__t { font-size: var(--step-small); color: var(--ink-2); text-wrap: pretty; }
@media (max-width: 1099px) {
  .req__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .req__ph { grid-row: auto; order: 3; aspect-ratio: 16 / 10; min-height: 0; }
  .steps { align-self: start; }
}
@media (max-width: 600px) {
  .form { grid-template-columns: minmax(0, 1fr); }
  .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .req__ph { display: none; }
}

/* ————— footer (graphite band) ————— */
.foot { padding-block: var(--pad) max(var(--s-6), env(safe-area-inset-bottom)); }
.foot__call { display: grid; gap: var(--s-3); padding-top: var(--s-5); border-top: 1.5px solid var(--rule-dark-strong); }
.foot__q { font-size: var(--step-sub); font-stretch: 110%; font-weight: 560; color: var(--on-graphite); }
.foot__tel { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-size: var(--step-title); color: var(--on-graphite); text-decoration: none; white-space: nowrap; }
.foot__info { font-size: var(--step-small); color: var(--on-graphite-2); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: var(--s-6) var(--g); margin-top: var(--s-8); }
.foot__brand { display: grid; gap: var(--s-4); align-content: start; }
.foot__brand svg { width: min(100%, 260px); height: auto; color: var(--on-graphite); }
.foot__brand p { max-width: 26em; font-size: var(--step-small); color: var(--on-graphite-2); }
.foot__col { display: grid; align-content: start; gap: 0; font-size: var(--step-small); color: var(--on-graphite-2); }
.foot__col h2 { margin-bottom: var(--s-1); font-size: var(--step-small); font-weight: 650; color: var(--on-graphite); }
.foot__col a { display: flex; align-items: center; min-height: 44px; color: var(--on-graphite); text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-6); margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--rule-dark); font-size: var(--step-small); color: var(--on-graphite-2); }
.foot__legal p { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); align-items: center; }
.foot__legal p a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-graphite); }
.foot__up { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--s-4); border: 1.5px solid var(--on-graphite); color: var(--on-graphite); text-decoration: none; font-weight: 600; transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease); }
.foot__up span { display: inline-flex; align-items: center; gap: var(--s-2); }
.foot__up svg { width: 18px; height: 18px; }
.foot__up:hover { background: var(--on-graphite); color: var(--graphite); }
@media (max-width: 900px) {
  .foot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .foot__tel { font-size: var(--step-fig); }
}

/* ————— lightbox ————— */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--s-7) var(--m) var(--s-5); border: 0; background: rgb(var(--shade) / 0.95); color: var(--on-photo); }
.lb::backdrop { background: rgb(var(--shade) / 0.6); }
.lb[open] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); }
.lb__fig { grid-column: 2; display: grid; gap: var(--s-4); justify-items: center; margin: 0; max-height: 100%; }
.lb__fig [hidden] { display: none; }
.lb__fig img, .lb__fig video { max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; object-fit: contain; border-radius: var(--r-frame); }
.lb__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); width: 100%; }
.lb__n { font-size: var(--step-sub); font-stretch: var(--w-fig); font-weight: 820; }
.lb__t { font-size: var(--step-small); color: rgb(255 255 255 / 0.82); }
.lb__count { margin-left: auto; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.lb__btn { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1.5px solid rgb(255 255 255 / 0.6); background: transparent; color: var(--on-photo); }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn:hover { background: rgb(255 255 255 / 0.12); }
.lb__prev { grid-column: 1; grid-row: 1; }
.lb__next { grid-column: 3; grid-row: 1; }
.lb__close { position: absolute; top: var(--s-4); right: var(--m); }
@media (max-width: 600px) {
  .lb[open] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; align-content: center; }
  .lb__fig { grid-column: 1 / -1; grid-row: 1; }
  .lb__prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lb__next { grid-column: 2; grid-row: 2; justify-self: end; }
}

/* ————— toast ————— */
.toast { position: fixed; z-index: 1150; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 30em); padding: var(--s-3) var(--s-4); background: var(--ink); color: var(--paper-hi); font-size: var(--step-small); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ————— less motion: final states at once ————— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .shop__list { scroll-behavior: auto; }
}

/* ————— narrow phones (French runs long): the four steps in one column ————— */
@media (max-width: 359px) {
  .steps ol { grid-template-columns: minmax(0, 1fr); }
}