/* ==========================================================================
   SELFIE BOX — Design system « Chambre noire »
   Feuille unique, mobile-first. Ordre : fontes, tokens, base, layout,
   composants, pages, utilitaires. Documentation : docs/DESIGN-SYSTEM.md
   ========================================================================== */

/* ---------- 1. Fontes (OFL, auto-hébergées, sous-ensemble latin/français) */
@font-face {
  font-family: "Bricolage";
  src: url("/assets/fonts/bricolage-grotesque-var.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
/* Fallbacks métriquement ajustés pour limiter le décalage au chargement */
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Liberation Serif");
  font-style: italic; size-adjust: 86%; ascent-override: 100%; descent-override: 26%;
}
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 102%; ascent-override: 92%; descent-override: 24%;
}

/* ---------- 2. Tokens */
:root {
  /* Couleurs — papier & encre */
  --paper: #F3EFE6;
  --paper-2: #EAE4D7;
  --surface: #FBF9F4;
  --ink: #121310;
  --ink-2: #2A2B26;
  --muted: #5B574E;
  --line: rgba(18, 19, 16, .14);
  --line-strong: rgba(18, 19, 16, .32);
  /* Parcours : location = lumière inactinique ; achat = bain fixateur */
  --rent: #E2462A;
  --rent-ink: #A42F18;      /* texte rouge accessible sur papier */
  --rent-tint: #F6DDD3;
  --buy: #1F3B34;
  --buy-2: #2D5A4E;
  --buy-tint: #DCE7E2;
  --tbc: #8A5A00;
  --tbc-bg: #FFF1C9;
  --danger: #A42F18;
  --focus: #C2381D;

  /* Thème appliqué (redéfini par [data-theme="dark"]) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --border: var(--line);

  /* Typographie */
  --font-sans: "Bricolage", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --step--1: clamp(.8125rem, .79rem + .1vw, .875rem);
  --step-0: clamp(1rem, .96rem + .18vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + .3vw, 1.3125rem);
  --step-2: clamp(1.375rem, 1.24rem + .6vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --step-4: clamp(2.125rem, 1.7rem + 2vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.85rem + 3.2vw, 5rem);
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.6;

  /* Espacements (échelle 4px) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem;
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);

  /* Grille */
  --max: 1360px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* Formes */
  --r-1: 6px; --r-2: 12px; --r-3: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(18,19,16,.06), 0 6px 20px -8px rgba(18,19,16,.18);

  /* Mouvement */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .2s;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: #B9B3A6;
  --border: rgba(243, 239, 230, .16);
  --focus: #F4A08B;
  color-scheme: dark;
}

/* ---------- 3. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--step-0); line-height: var(--lh-body);
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; line-height: var(--lh-head); letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
strong { font-weight: 660; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
::selection { background: var(--rent); color: var(--ink); }
code { font-family: var(--font-mono); font-size: .9em; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--paper); border-radius: var(--r-1); }
.skip-link:focus { top: 12px; }

/* ---------- 4. Layout */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.section--flush-top { padding-top: var(--s-5); }
.section--tint { --bg: var(--paper-2); }
.section--narrow .container { max-width: 920px; }
.section--faq { padding-block: var(--s-6); }
.section--faq + .section--faq { padding-top: 0; }
[data-theme="dark"] { background: var(--bg); color: var(--fg); }
.section--darkroom { position: relative; }
.section--darkroom::before { /* perforations de pellicule */
  content: ""; position: absolute; inset: 14px 0 auto; height: 8px; opacity: .5;
  background: radial-gradient(circle at 4px 4px, rgba(243,239,230,.35) 2.5px, transparent 3px) 0 0 / 22px 8px repeat-x;
}

.split { display: grid; gap: var(--s-6); }
.split--center { align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
}

.section-head { max-width: 60ch; margin-bottom: var(--s-6); }
.section-title { font-size: var(--step-3); }
.section-title--sm { font-size: var(--step-2); margin-bottom: var(--s-5); }
.section-intro, .section-intro-p { margin-top: var(--s-4); color: var(--fg-muted); font-size: var(--step-1); line-height: 1.5; }
.section-intro p { margin-bottom: var(--s-3); }
.section-more, .section-cta { margin-top: var(--s-6); }

/* Eyebrow : légende de planche-contact */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.eyebrow__num { color: var(--rent-ink); font-weight: 700; }
[data-theme="dark"] .eyebrow__num { color: #F4A08B; }

/* ---------- 5. Composants */

/* Icônes */
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* Boutons */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75em 1.25em; border: 1.5px solid var(--btn-bd); border-radius: var(--r-pill);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: var(--step-0); line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn .icon { transition: transform var(--dur) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--rent { --btn-bg: var(--rent); --btn-fg: var(--ink); --btn-bd: var(--rent); }
.btn--rent:hover { --btn-bg: #EA5B40; }
.btn--buy { --btn-bg: var(--buy); --btn-fg: var(--paper); --btn-bd: var(--buy); }
.btn--buy:hover { --btn-bg: var(--buy-2); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--line-strong); }
[data-theme="dark"] .btn--ghost { --btn-bd: rgba(243,239,230,.4); }
[data-theme="dark"] .btn--buy { --btn-bd: rgba(243,239,230,.35); }
.btn--ink { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn--sm { min-height: 40px; padding: .5em 1em; font-size: var(--step--1); }
.btn--lg { min-height: 56px; padding: .9em 1.6em; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.is-loading { pointer-events: none; opacity: .75; }
.cta-pair { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.cta-pair > .btn { flex: 1 1 auto; }
@media (min-width: 480px) { .cta-pair > .btn { flex: 0 1 auto; } }
.cta-pair--stack { flex-direction: column; align-items: stretch; }
@media (min-width: 640px) { .cta-pair--stack { flex-direction: row; } }

.link-arrow { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link-arrow:hover .icon { transform: translateX(3px); }
.link-arrow .icon { transition: transform var(--dur) var(--ease); }

/* Pastille « À confirmer » (doit disparaître avant publication) */
.tbc { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35em; padding: .05em .5em; border-radius: var(--r-1); background: var(--tbc-bg); color: #4A3300; font-size: .86em; line-height: 1.45; vertical-align: baseline; }
.tbc__k { font-family: var(--font-mono); font-size: .82em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--tbc); }

/* Notices (démo, brouillon, formulaire) */
.notice { margin-block: var(--s-5); padding: var(--s-4) var(--s-5); border: 1.5px dashed var(--line-strong); border-radius: var(--r-2); background: var(--surface); color: var(--ink); font-size: var(--step--1); }
.notice__title { margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--step--1); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.notice--draft { border-color: var(--tbc); background: var(--tbc-bg); }
.notice--draft .notice__title { color: var(--tbc); }
.notice--demo .notice__title, .notice--form .notice__title { color: var(--rent-ink); }
.notice a { font-weight: 600; }

/* Cadre photo : repères de coupe aux coins (signature graphique) */
.frame { position: relative; isolation: isolate; }
.frame::before, .frame::after { content: ""; position: absolute; z-index: 2; width: 18px; height: 18px; pointer-events: none; border-color: var(--paper); border-style: solid; opacity: .9; }
.frame::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; }
.frame::after { right: 10px; bottom: 10px; border-width: 0 1.5px 1.5px 0; }
.media { display: block; overflow: hidden; border-radius: var(--r-2); background: #2A2520; }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(243,239,230,.94); border-bottom: 1px solid var(--line); }
@supports (backdrop-filter: blur(8px)) { .site-header { background: rgba(243,239,230,.82); backdrop-filter: saturate(1.4) blur(10px); } }
.site-header__bar { display: flex; align-items: center; gap: var(--s-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); margin-right: auto; min-height: 44px; }
.brand__mark { width: 30px; height: 30px; }
.brand__name { font-size: 1.25rem; font-weight: 720; letter-spacing: -.035em; }
.brand__name span { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; margin-left: .12em; }
.menu-link, .menu-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .9rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; font-weight: 600; text-decoration: none; cursor: pointer; }
.menu-toggle .i-close { display: none; }
.menu-toggle[aria-expanded="true"] .i-open { display: none; }
.menu-toggle[aria-expanded="true"] .i-close { display: block; }
.js .menu-link { display: none; }
.no-js .menu-toggle { display: none; }
.site-header__cta { display: none; }
@media (min-width: 560px) { .site-header__cta { display: block; } }

.site-nav { display: none; }
.site-nav a { text-decoration: none; }
.site-header.is-open .site-nav {
  display: flex; flex-direction: column; gap: var(--s-5);
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s-5) var(--gutter) var(--s-7); background: var(--paper);
  animation: drawer-in .22s var(--ease);
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.site-nav__primary li a { display: flex; align-items: center; min-height: 52px; font-size: var(--step-3); font-weight: 620; letter-spacing: -.03em; border-bottom: 1px solid var(--line); }
.site-nav__secondary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-nav__secondary a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-weight: 560; }
.site-nav a[aria-current="page"] { color: var(--rent-ink); }
.site-nav__ctas { display: grid; gap: var(--s-3); }
.site-nav__contact { display: grid; gap: var(--s-2); font-size: var(--step--1); }
.site-nav__contact a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
body.nav-open { overflow: hidden; }

@media (min-width: 1100px) {
  .menu-link, .menu-toggle, .js .menu-toggle { display: none !important; }
  .site-nav, .site-header.is-open .site-nav { display: block; position: static; padding: 0; background: none; animation: none; overflow: visible; }
  .site-nav__secondary, .site-nav__ctas, .site-nav__contact { display: none; }
  .site-nav__primary { display: flex; gap: .2rem; }
  .site-nav__primary li a { min-height: 44px; padding: 0 .8rem; font-size: .95rem; font-weight: 560; letter-spacing: -.01em; border: 0; border-radius: var(--r-pill); }
  .site-nav__primary li a:hover { background: var(--paper-2); }
  .site-nav__primary li a[aria-current="page"] { background: var(--ink); color: var(--paper); }
  .site-header__cta { margin-left: var(--s-3); }
}

/* Fil d'Ariane */
.breadcrumbs { padding-top: var(--s-4); font-size: var(--step--1); color: var(--muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; gap: .25rem .5rem; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; min-height: 32px; }
.breadcrumbs li + li::before { content: "/"; opacity: .5; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ink); overflow-wrap: anywhere; }

/* Héros de page */
.page-hero { padding-block: var(--s-6) var(--s-7); }
.page-hero__grid { display: grid; gap: var(--s-6); align-items: center; }
.page-hero__title { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: -.04em; overflow-wrap: break-word; hyphens: auto; }
.page-hero__lead { margin-top: var(--s-5); max-width: 58ch; font-size: var(--step-1); color: var(--muted); }
.page-hero__text > .cta-pair, .page-hero__text > .btn { margin-top: var(--s-6); }
.page-hero__media .media { aspect-ratio: 5 / 4; }
@media (min-width: 1024px) {
  .page-hero { padding-block: var(--s-7) var(--s-8); }
  .page-hero--media .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .page-hero__media .media { aspect-ratio: 3 / 2; }
}

/* Héros d'accueil */
.home-hero { padding-block: var(--s-5) var(--s-8); }
.home-hero__grid { display: grid; gap: var(--s-7); }
.home-hero__title { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: -.045em; font-weight: 680; }
.home-hero__title em { color: var(--rent-ink); font-size: 1.08em; }
.home-hero__lead { margin: var(--s-5) 0 var(--s-6); max-width: 52ch; font-size: var(--step-1); color: var(--muted); }
.hero-strip { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
.hero-strip__main .media { aspect-ratio: 4 / 3; }
.hero-strip__side { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); align-items: start; }
.hero-strip__thumb .media { aspect-ratio: 1; }
.hero-strip__caption { grid-column: 1 / -1; font-family: var(--font-serif); font-style: italic; font-size: var(--step-2); line-height: 1.2; }
@media (min-width: 1024px) {
  .home-hero { padding-top: var(--s-7); }
  .home-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .hero-strip { grid-template-columns: minmax(0, 3fr) minmax(0, 1.1fr); align-items: end; position: sticky; top: calc(var(--header-h) + 24px); }
  .hero-strip__main .media { aspect-ratio: 4 / 5; }
  .hero-strip__side { grid-template-columns: 1fr; }
  .hero-strip__caption { font-size: var(--step-1); }
}

/* Parcours location / achat */
.journeys { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .journeys { grid-template-columns: 1fr 1fr; } }
.journey { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); border: 1.5px solid; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.journey:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); }
.journey--rent { background: var(--rent-tint); border-color: rgba(164,47,24,.35); }
.journey--buy { background: var(--buy-tint); border-color: rgba(31,59,52,.35); }
.journey__kicker { display: flex; align-items: center; gap: .6rem; margin: 0; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.journey__kicker span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: .75rem; }
.journey--rent .journey__kicker { color: var(--rent-ink); }
.journey--buy .journey__kicker { color: var(--buy); }
.journey__title { margin-top: var(--s-2); font-size: var(--step-2); }
.journey__title a { text-decoration: none; }
.journey__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* carte entièrement cliquable */
.journey__text { margin-top: var(--s-2); color: var(--ink-2); }
.journey__more { display: flex; align-items: center; gap: .4rem; margin: var(--s-3) 0 0; font-weight: 600; font-size: var(--step--1); }
.journey__cta { position: relative; z-index: 1; margin-top: auto; }
.journey__cta .btn { width: 100%; }
.journey__media .media { aspect-ratio: 4 / 3; }

/* Cartes produit */
.product-grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.product-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.product-card__media .media { aspect-ratio: 3 / 4; transition: transform .5s var(--ease); }
.product-card__media { overflow: hidden; border-radius: var(--r-2); }
.product-card:hover .product-card__media .media { transform: scale(1.025); }
.product-card__num { position: absolute; z-index: 3; top: 12px; right: 14px; padding: .2rem .55rem; border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; }
.product-card__title { font-size: var(--step-2); }
.product-card__title a { text-decoration: none; }
.product-card__title a::after { content: ""; position: absolute; inset: 0; }
.product-card__tag { margin: var(--s-2) 0 var(--s-3); color: var(--fg-muted); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; }
.chips li { display: inline-flex; }
.chips li { padding: .35rem .8rem; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: var(--step--1); line-height: 1.3; }
.chips li:has(a) { padding: 0; border: 0; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem; border: 1.5px solid var(--fg); border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.chips a:hover { background: var(--fg); color: var(--bg); }
.chips--sm li { font-size: .78rem; padding: .2rem .6rem; }
.chips--lg li { font-size: var(--step-0); padding: .5rem 1rem; }
.chips--lg li:has(a) { padding: 0; }

/* Fonctionnalités */
.features { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 640px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .features { grid-template-columns: repeat(3, minmax(0, 1fr)); } .features:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature { padding-top: var(--s-4); border-top: 1.5px solid var(--fg); }
.features--media .feature { padding-top: 0; border-top: 0; }
.feature__media { margin-bottom: var(--s-4); }
.feature__media .media { aspect-ratio: 1; }
.feature__num { display: block; margin-bottom: var(--s-3); font-family: var(--font-mono); font-size: var(--step--1); color: var(--fg-muted); }
.feature__title { margin-bottom: var(--s-3); font-size: var(--step-1); }
.feature p { color: var(--fg-muted); }

/* Étapes : cadres de pellicule numérotés */
.steps { display: grid; gap: var(--s-4); list-style: none; counter-reset: none; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; padding: var(--s-5); border: 1.5px solid var(--border); border-radius: var(--r-2); background: color-mix(in srgb, var(--bg) 92%, var(--fg)); }
.step__num { display: block; margin-bottom: var(--s-5); font-size: var(--step-4); font-weight: 300; line-height: 1; letter-spacing: -.05em; color: var(--rent-ink); }
[data-theme="dark"] .step__num { color: #F4A08B; }
.step__title { margin-bottom: var(--s-2); font-size: var(--step-1); }
.step p { color: var(--fg-muted); }

/* Ce qui est inclus */
.included { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .included { grid-template-columns: 1fr 1fr; } }
.included__t { margin-bottom: var(--s-4); font-size: var(--step-1); }
.checklist { display: grid; gap: var(--s-3); list-style: none; }
.checklist li { display: flex; gap: var(--s-3); align-items: flex-start; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.checklist .icon { margin-top: .2em; color: var(--rent); }
[data-theme="dark"] .checklist .icon { color: #F4A08B; }

/* Fiche technique */
.specs { margin: 0; border-top: 1.5px solid var(--fg); }
.specs__row { display: grid; gap: var(--s-1) var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
@media (min-width: 560px) { .specs__row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.specs dt { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-muted); }
.specs dd { margin: 0; font-weight: 560; }
.specs__note { display: block; margin-top: var(--s-1); font-weight: 400; font-size: var(--step--1); color: var(--fg-muted); }

/* Tableaux */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--surface); -webkit-overflow-scrolling: touch; }
.compare, .data-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.compare { min-width: 640px; }
.compare th, .compare td, .data-table th, .data-table td { padding: var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { font-size: var(--step-0); background: var(--paper-2); }
.compare thead th a { text-decoration: none; }
.compare tbody th, .data-table tbody th { font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .78rem; color: var(--muted); }
.compare td .icon { display: inline; vertical-align: -.2em; color: var(--buy); }
.compare tr:last-child > *, .data-table tr:last-child > * { border-bottom: 0; }
.data-table thead th { background: var(--paper-2); }

/* FAQ (details natifs : fonctionne sans JS) */
.faq { border-top: 1.5px solid var(--fg); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: var(--s-4) 0; font-weight: 600; font-size: var(--step-1); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; flex: none; width: 28px; height: 28px; border: 1.5px solid currentColor; border-radius: 50%; }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); }
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq__item summary:hover span:first-child { text-decoration: underline; text-underline-offset: .2em; }
.faq__a { padding: 0 0 var(--s-5); max-width: 70ch; color: var(--fg-muted); }
.faq-nav { margin-top: var(--s-5); }

/* Cartes taxonomie */
.taxo-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .taxo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .taxo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .taxo-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.taxo-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); }
.taxo-card__media .media { aspect-ratio: 4 / 3; }
.taxo-card__title { font-size: var(--step-2); }
.taxo-card__title a { text-decoration: none; }
.taxo-card__title a::after { content: ""; position: absolute; inset: 0; }
.taxo-card p { color: var(--fg-muted); }
.taxo-card--planned { padding: var(--s-5); border: 1.5px dashed var(--line-strong); border-radius: var(--r-2); }
.taxo-card--planned .taxo-card__title { font-size: var(--step-1); }
.taxo-card__status { margin-top: auto; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }

/* Zones */
.zones-card { display: grid; gap: var(--s-1); padding: var(--s-6); border-radius: var(--r-3); background: var(--ink); color: var(--paper); }
.zones-card__k { display: flex; align-items: center; gap: .5rem; margin: var(--s-3) 0 0; font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: #B9B3A6; }
.zones-card__v { margin: 0 0 var(--s-3); font-size: var(--step-3); font-weight: 620; letter-spacing: -.03em; }
.zones-card .link-arrow { margin-top: var(--s-4); }

/* Média + texte */
.media-text { display: grid; gap: var(--s-6); align-items: center; }
.media-text__media .media { aspect-ratio: 4 / 3; }
.media-text__body .section-title { margin-bottom: var(--s-5); }
.media-text__body p { color: var(--fg-muted); font-size: var(--step-1); }
@media (min-width: 1024px) { .media-text { grid-template-columns: 1fr 1fr; gap: var(--s-8); } .media-text--reverse .media-text__media { order: 2; } }

/* Bande CTA */
.cta-band { padding-block: var(--section-y); background: var(--bg); color: var(--fg); }
.cta-band__inner { display: grid; gap: var(--s-6); align-items: end; }
.cta-band__title { font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: -.04em; max-width: 18ch; }
.cta-band__text { margin-top: var(--s-4); color: var(--fg-muted); font-size: var(--step-1); max-width: 48ch; }
@media (min-width: 900px) { .cta-band__inner { grid-template-columns: 1fr auto; } }

/* Fiche machine */
.product-hero { padding-block: var(--s-5) var(--s-7); }
.product-hero__grid { display: grid; gap: var(--s-6); }
.product-hero__media { overflow: hidden; border-radius: var(--r-2); }
.product-hero__media .media { aspect-ratio: 3 / 4; max-height: 78vh; }
.product-hero__tag { margin-top: var(--s-4); font-family: var(--font-serif); font-style: italic; font-size: var(--step-2); line-height: 1.25; }
@media (min-width: 1024px) { .product-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-8); align-items: center; } }
.avail { display: grid; gap: var(--s-2); margin: var(--s-6) 0; list-style: none; }
@media (min-width: 480px) { .avail { grid-template-columns: 1fr 1fr; } }
.avail__item { padding: var(--s-3) var(--s-4); border-radius: var(--r-2); }
.avail__item--rent { background: var(--rent-tint); }
.avail__item--buy { background: var(--buy-tint); }
.avail__k { display: block; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.avail__v { font-weight: 600; }

/* Blog */
.posts { display: grid; gap: var(--s-7) var(--s-5); }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .post-card--feature { grid-column: 1 / -1; display: grid; grid-template-columns: 3fr 2fr; gap: var(--s-7); align-items: center; } }
.post-card { position: relative; display: flex; flex-direction: column; gap: var(--s-4); }
.post-card__media .media { aspect-ratio: 16 / 9; }
.post-card__meta { margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.post-card__title { font-size: var(--step-2); margin-bottom: var(--s-3); }
.post-card--feature .post-card__title { font-size: var(--step-3); }
.post-card__title a { text-decoration: none; }
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card p { color: var(--muted); }

.post-header { padding-block: var(--s-6) var(--s-6); }
.post-header__title { font-size: var(--step-4); line-height: var(--lh-tight); letter-spacing: -.035em; max-width: 22ch; }
.post-header__lead { margin-top: var(--s-5); font-size: var(--step-1); color: var(--muted); max-width: 60ch; }
.post-header__meta { margin-top: var(--s-4); font-size: var(--step--1); color: var(--muted); display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.post-header__cover { margin-top: var(--s-6); }
.post-header__cover .media { aspect-ratio: 16 / 9; }
.post-layout { display: grid; gap: var(--s-6); padding-bottom: var(--section-y); }
@media (min-width: 1024px) { .post-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); } .post-toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }
.post-toc { padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); font-size: var(--step--1); }
.post-toc__t { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-bottom: var(--s-3); }
.post-toc ol { padding-left: 1.2em; display: grid; gap: var(--s-2); }
.prose { max-width: 70ch; font-size: var(--step-1); line-height: 1.7; }
.prose h2 { margin: var(--s-7) 0 var(--s-4); font-size: var(--step-3); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--s-5); }
.prose a:not(.btn) { color: var(--rent-ink); font-weight: 560; }
.post-cta { margin-top: var(--s-7); padding: var(--s-6); border-radius: var(--r-3); background: var(--ink); color: var(--paper); }
.post-cta__t { font-size: var(--step-2); font-weight: 640; margin-bottom: var(--s-4); }
.legal-list { display: grid; gap: var(--s-3); padding-left: 1.2em; }

/* Galerie + visionneuse */
.gallery-filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-5); }
.filter { min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: transparent; font-weight: 600; cursor: pointer; transition: background-color var(--dur) var(--ease); }
.filter:hover { background: var(--paper-2); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); list-style: none; }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); } }
@media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery__item[hidden] { display: none; }
.gallery__link { position: relative; display: block; border-radius: var(--r-2); overflow: hidden; }
.gallery__link .media { aspect-ratio: 4 / 5; border-radius: 0; transition: transform .5s var(--ease); }
.gallery__link:hover .media { transform: scale(1.03); }
.gallery__cat { position: absolute; left: 10px; bottom: 10px; padding: .15rem .55rem; border-radius: var(--r-pill); background: var(--paper); font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; }
.lightbox { width: min(100vw - 24px, 1100px); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: var(--r-3); background: var(--ink); color: var(--paper); }
.lightbox::backdrop { background: rgba(10, 10, 9, .82); }
.lightbox__inner { position: relative; display: grid; padding: var(--s-6) var(--s-4) var(--s-4); }
.lightbox__figure { margin: 0; }
.lightbox__img .media { max-height: calc(100dvh - 160px); border-radius: var(--r-2); background: #000; }
.lightbox__img img { object-fit: contain; max-height: calc(100dvh - 160px); }
.lightbox__cap { margin-top: var(--s-3); font-size: var(--step--1); color: #B9B3A6; }
.lightbox__close, .lightbox__nav { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid rgba(243,239,230,.4); border-radius: 50%; background: var(--ink); color: var(--paper); cursor: pointer; }
.lightbox__close { position: absolute; top: 8px; right: 8px; z-index: 2; }
.lightbox__nav { position: absolute; top: 50%; z-index: 2; }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

/* Études de cas */
.case-blocks { display: grid; gap: var(--s-6); }
@media (min-width: 768px) { .case-blocks { grid-template-columns: 1fr 1fr; } }
.case-block { padding-top: var(--s-4); border-top: 1.5px solid var(--ink); }
.case-block__t { font-size: var(--step-2); margin-bottom: var(--s-3); }

/* Formulaires */
.form-layout { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .form-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } .form-aside { position: sticky; top: calc(var(--header-h) + 24px); } }
.form-aside { display: grid; gap: var(--s-3); }
.quote-form { display: grid; gap: var(--s-6); }
.quote-form .notice { margin: 0; }
.form-group, .intent { margin: 0; padding: 0; border: 0; min-width: 0; }
.form-legend { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-4); padding: 0; font-size: var(--step-2); font-weight: 640; letter-spacing: -.02em; }
.form-legend__hint { font-size: var(--step--1); font-weight: 400; color: var(--muted); }
.js .form-legend__hint { display: none; }
.form-step { font-family: var(--font-mono); font-size: var(--step--1); color: var(--rent-ink); font-weight: 700; }
.fields { display: grid; gap: var(--s-4) var(--s-5); }
@media (min-width: 640px) { .fields { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field__req { color: var(--rent-ink); font-weight: 700; }
.field__opt { font-weight: 400; color: var(--muted); font-size: .9em; }
.field__hint { margin: 0; font-size: .8125rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .75rem .9rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-2);
  background: var(--surface); font-size: 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--focus); }
.field [aria-invalid="true"] { border-color: var(--danger); background: #FFF6F3; }
.field__error { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--danger); }
.intent__options { display: grid; gap: var(--s-3); }
@media (min-width: 560px) { .intent__options { grid-template-columns: 1fr 1fr; } }
.intent__opt { position: relative; cursor: pointer; }
.intent__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.intent__box { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5) var(--s-4) 3.2rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-2); background: var(--surface); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.intent__box::before { content: ""; position: absolute; left: 1.1rem; top: 1.15rem; width: 20px; height: 20px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); }
.intent__t { font-weight: 660; font-size: var(--step-1); }
.intent__d { font-size: var(--step--1); color: var(--muted); }
.intent__opt--rent input:checked + .intent__box { border-color: var(--rent-ink); background: var(--rent-tint); }
.intent__opt--buy input:checked + .intent__box { border-color: var(--buy); background: var(--buy-tint); }
.intent__opt input:checked + .intent__box::before { box-shadow: inset 0 0 0 4px var(--surface); background: var(--ink); }
.intent__opt input:focus-visible + .intent__box { outline: 3px solid var(--focus); outline-offset: 2px; }
.radios { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.radio, .check { display: inline-flex; align-items: flex-start; gap: .6rem; min-height: 44px; padding: .6rem .9rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; }
.check { border-radius: var(--r-2); align-items: flex-start; max-width: 70ch; }
.radio input, .check input { width: 20px; height: 20px; margin: .1rem 0 0; accent-color: var(--ink); flex: none; }
.radio:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.form-group--consent .check { font-size: var(--step--1); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.form-actions__note { margin: 0; font-size: var(--step--1); color: var(--muted); }
.form-errors { padding: var(--s-4) var(--s-5); border: 1.5px solid var(--danger); border-radius: var(--r-2); background: #FFF6F3; color: var(--danger); }
.form-errors p { font-weight: 700; margin-bottom: var(--s-2); }
.form-errors ul { padding-left: 1.2em; }
.form-errors a { color: var(--danger); }
.form-result { padding: var(--s-5); border: 1.5px dashed var(--ink); border-radius: var(--r-2); background: var(--surface); }
.form-result__t { font-weight: 700; margin-bottom: var(--s-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.js [data-when][hidden] { display: none; }

/* Contact */
.contact-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact-card { padding: var(--s-4) var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r-2); background: var(--surface); }
.contact-card--rent { background: var(--rent-tint); border-color: rgba(164,47,24,.3); }
.contact-card--buy { background: var(--buy-tint); border-color: rgba(31,59,52,.3); }
.contact-card__k { margin: 0; font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.contact-card__v { margin: var(--s-1) 0 0; font-size: var(--step-1); font-weight: 640; }
.contact-card__v a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.contact-card--lg { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); }
.contact-card__t { font-size: var(--step-3); }
.contact-card--lg .btn { margin-top: auto; align-self: flex-start; }
.inline-list { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; }
.inline-list a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 600; }
.small-note { font-size: var(--step--1); color: var(--fg-muted); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: var(--s-3); }

/* 404 */
.nf { padding-block: var(--s-8) var(--section-y); }
.nf__inner { max-width: 860px; }
.nf__code { margin: 0 0 var(--s-4); font-size: clamp(5rem, 3rem + 12vw, 12rem); font-weight: 200; line-height: .9; letter-spacing: -.06em; color: var(--rent); }
.nf__links { display: grid; gap: var(--s-2); margin: var(--s-6) 0; list-style: none; }
.nf__links a { font-size: var(--step-1); font-weight: 600; }

/* Footer */
.site-footer { padding-block: var(--s-8) var(--s-6); }
.site-footer__top { display: grid; gap: var(--s-6); align-items: end; }
.site-footer__statement { margin: 0; font-size: var(--step-3); line-height: var(--lh-tight); letter-spacing: -.04em; font-weight: 640; max-width: 18ch; }
.site-footer__statement em { color: #F4A08B; }
@media (min-width: 1024px) { .site-footer__top { grid-template-columns: 1fr auto; } }
.perforation { height: 10px; margin: var(--s-7) 0; opacity: .45; background: radial-gradient(circle at 5px 5px, rgba(243,239,230,.5) 3px, transparent 3.5px) 0 0 / 26px 10px repeat-x; }
.site-footer__grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); } }
.footer-col--contact { grid-column: 1 / -1; }
@media (min-width: 1024px) { .footer-col--contact { grid-column: auto; } }
.footer-col__title { margin-bottom: var(--s-4); font-family: var(--font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); }
.footer-col ul { display: grid; gap: var(--s-1); list-style: none; }
.footer-col a, .footer-plain { display: inline-flex; align-items: flex-start; gap: .55rem; min-height: 40px; padding-block: .45rem; text-decoration: none; color: var(--paper); font-size: var(--step--1); }
.footer-col a:hover { text-decoration: underline; }
.footer-col .icon { margin-top: .1em; opacity: .7; }
.footer-social { display: flex !important; flex-wrap: wrap; gap: var(--s-4) !important; margin-top: var(--s-4); }
.site-footer__bottom { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--border); font-size: .8125rem; color: var(--fg-muted); }
.site-footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; }
.site-footer__bottom a { display: inline-flex; min-height: 40px; align-items: center; color: var(--fg-muted); }
.site-footer__proto { margin: 0 0 0 auto; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }

/* ---------- 6. Mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- 7. Impression */
@media print {
  .site-header, .site-footer, .cta-band, .skip-link, .breadcrumbs { display: none !important; }
  [data-theme="dark"] { background: #fff !important; color: #000 !important; }
}

/* ---------- 8. Ajustements de recette (QA 18/10) */
.site-nav ul, .site-footer ul, .breadcrumbs ol, .gallery, .chips, .steps, .checklist, .avail, .nf__links, .inline-list { list-style: none; }
.product-grid--2 .product-card__media .media { aspect-ratio: 4 / 3; }
@media (max-width: 639px) { .product-card__media .media { aspect-ratio: 4 / 3; } }
.site-footer { border-top: 1px solid var(--border); }
.cta-band + .site-footer { padding-top: var(--s-6); }
.footer-tel { display: grid; }
.footer-tel > span { font-size: .75rem; color: var(--fg-muted); padding-top: .4rem; }
.footer-tel a { padding-top: 0; }
.site-nav__contact > span { color: var(--muted); margin-top: var(--s-2); }
/* backdrop-filter crée un bloc conteneur pour position:fixed : on le retire menu ouvert */
.site-header.is-open { backdrop-filter: none; background: var(--paper); }