/* Nova France — feuille de style
   Univers : documentation de chantier naval, au code couleur du client.
   Blanc et crème en fonds, encre noire pour les traits, érable pour le bois, gris acier pour l'aluminium,
   bronze clair pour la tension et les traits actifs, bronze foncé pour l'action (contraste AA avec le blanc).
   Photos : la machine sur le papier du catalogue, dans un cadre filet ; emplacement hachuré tant que la photo manque.
   Formes : angles vifs partout ; seuls les repères numérotés sont ronds. */

/* Archivo, police variable servie par le site (assets/fonts, licence OFL) : sous-ensemble latin, celui qui couvre le français. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 720;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  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 {
  /* Code couleur Nova France (site actuel) : blanc, noir, bronze #B38241 / #8D6530, crème #F7F0E3 */
  --sail: #ffffff;
  --sail-2: #f7f0e3;
  --sail-3: #efe4d0;
  --ink: #111111;
  --ink-2: #3b3a38;
  --ink-3: #66615a;
  --line: #e4ddd0;
  --line-strong: #a39b8d;
  /* Fonds photo : papier du catalogue, gris du studio (FORTUNA, scanner) */
  --paper: #f7f4ef;
  --studio: radial-gradient(ellipse 80% 72% at 50% 47%, #f4f4f7 0%, #ececf0 55%, #e4e4e9 100%);
  --steel: #8a8f96;
  --steel-tint: #e7e9ec;
  --maple: #b38241;
  --maple-tint: #f0e2c9;
  --pad: #d9d5cd;
  --signal: #8d6530;
  --signal-hover: #74521f;
  --signal-line: #b38241;
  --signal-text: #8d6530;
  --on-signal: #ffffff;
  --error: #a4262c;
  --draw: var(--ink);
  --field: #0b0b0b;
  --on-field: #f7f0e3;
  --on-field-2: #c8beab;

  --font: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --wide: 'wdth' 118;
  --cond: 'wdth' 68;

  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --wrap: min(1320px, 100% - 2 * var(--gutter));
  --header-h: 68px;
  --section: clamp(72px, 9vw, 136px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  color-scheme: light;
}

/* Variante sombre disponible mais non activée : le code couleur du client est clair.
   Pour l'activer : <html data-theme="dark">. */
:root[data-theme='dark'] {
  --sail: #0b0b0b;
  --sail-2: #161412;
  --sail-3: #201d19;
  --ink: #f7f0e3;
  --ink-2: #d8cfbf;
  --ink-3: #aaa192;
  --line: #2d2924;
  --line-strong: #5d554a;
  --steel: #9aa0a8;
  --steel-tint: #24272b;
  --maple: #c99a5b;
  --maple-tint: #3a2c1a;
  --pad: #36322b;
  --signal: #8d6530;
  --signal-hover: #a47639;
  --signal-line: #c99a5b;
  --signal-text: #d4a866;
  --error: #ff8a8f;
  --field: #161412;
  --on-field: #f7f0e3;
  --on-field-2: #c8beab;
  color-scheme: dark;
}

/* ---------- 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); -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--sail);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--signal);
}
@media (max-width: 40em) { body { font-size: 1rem; } }
img, svg { display: block; max-width: 100%; }
/* Icônes Phosphor Light : sprite en tête de page, chaque icône à la taille du texte (1em) et à sa couleur */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; flex: none; width: 1em; height: 1em; line-height: 1; vertical-align: -0.14em; }
.icon svg { width: 100%; height: 100%; fill: currentColor; }
sup { font-size: 0.7em; line-height: 0; vertical-align: 0.42em; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--signal-line); } }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.1; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
main:focus { outline: none; }

[hidden] { display: none !important; }
.visually-hidden {
  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: var(--gutter); top: -100px; z-index: 100;
  background: var(--ink); color: var(--sail); padding: 12px 16px; text-decoration: none;
}
.skip-link:focus { top: 8px; }

.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-wide { width: min(1520px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.num { font-variant-numeric: tabular-nums lining-nums; font-variation-settings: var(--cond); font-weight: 650; letter-spacing: 0.01em; }

/* ---------- Typographie ---------- */

.display {
  font-variation-settings: var(--wide);
  font-weight: 620;
  font-size: clamp(2.3rem, 1.1rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.032em;
}
.display.is-page { font-size: clamp(2.2rem, 1.2rem + 2.9vw, 3.9rem); max-width: 18ch; }
.h2 {
  font-variation-settings: var(--wide);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.05rem + 1.9vw, 2.85rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
}
.h3 { font-variation-settings: 'wdth' 110; font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.012em; }
.h4 { font-variation-settings: 'wdth' 108; font-weight: 600; font-size: 1.125rem; letter-spacing: -0.005em; }
.lede { font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 46ch; margin: 0; }
.section-lede { color: var(--ink-2); max-width: 58ch; font-size: 1.0625rem; }

.price { white-space: nowrap; }
.price-from { font-size: 0.82em; color: var(--ink-3); font-weight: 450; }
.price-num { font-variant-numeric: tabular-nums; font-variation-settings: var(--cond); font-weight: 680; font-size: 1.12em; }
.price-ht { font-size: 0.82em; color: var(--ink-3); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4em; font-weight: 560; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.link-arrow i { transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover i, a:hover > .link-arrow i { transform: translateX(3px); }
}

/* ---------- Boutons ---------- */

.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: var(--h); padding: 0 8px 0 22px;
  border: 1.25px solid transparent; border-radius: 0;
  font-weight: 600; font-size: 1rem; letter-spacing: 0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.btn:active { transform: scale(0.97); }
.btn:not(:has(.btn-icon)) { padding-right: 22px; }
.btn-icon {
  display: grid; place-items: center; width: 38px; height: 38px;
  background: color-mix(in srgb, currentColor 14%, transparent);
  transition: transform 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn-icon { transform: translateX(2px); }
}
.btn-primary { background: var(--signal); color: var(--on-signal); }
.btn-primary:active { background: var(--signal-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:active { background: var(--ink); color: var(--sail); }
.btn-ghost-light { background: transparent; color: var(--on-field); border-color: color-mix(in srgb, var(--on-field) 45%, transparent); padding-right: 22px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--signal-hover); }
  .btn-secondary:hover { background: var(--ink); color: var(--sail); }
  .btn-ghost-light:hover { border-color: var(--on-field); }
}
.btn-sm { --h: 42px; padding: 0 16px; font-size: 0.92rem; }
.btn-block { width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn i { font-size: 1.2em; }

/* ---------- En-tête ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--sail) 88%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand-mark { display: block; width: 40px; height: 40px; flex-shrink: 0; color: var(--signal-line); overflow: visible; }
.brand-word { font-variation-settings: 'wdth' 125; font-weight: 640; font-size: 1.02rem; letter-spacing: 0.14em; text-transform: uppercase; }
.main-nav { margin-left: auto; }
.main-nav ul { display: flex; gap: 4px; }
.main-nav a { position: relative; display: block; padding: 10px 12px; text-decoration: none; font-size: 0.92rem; font-weight: 500; color: var(--ink-2); transition: color 200ms ease; }
.main-nav a::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 1.5px; background: var(--signal-line);
  transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .main-nav a:hover { color: var(--ink); } .main-nav a:hover::after { transform: scaleX(1); } }
.main-nav a[aria-current='page']::after { transform: scaleX(1); }
.main-nav a[aria-current='page'] { color: var(--ink); }
.header-cta { position: relative; }
.basket-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 10px;
  background: var(--on-signal); color: var(--signal); font-size: 0.74rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.basket-count.is-bump { animation: bump 320ms var(--ease-out); }
@keyframes bump { from { transform: scale(0.8); } to { transform: scale(1); } }
.menu-btn { display: none; flex: none; width: 46px; height: 46px; margin: 0 -10px 0 0; background: none; border: 0; padding: 0; place-items: center; }
.menu-btn-lines { position: relative; width: 22px; height: 12px; display: block; }
.menu-btn-lines span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: var(--ink);
  transition: transform 280ms var(--ease-drawer), top 280ms var(--ease-drawer);
}
.menu-btn-lines span:first-child { top: 0; }
.menu-btn-lines span:last-child { top: 10px; }
.menu-btn[aria-expanded='true'] .menu-btn-lines span:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded='true'] .menu-btn-lines span:last-child { top: 5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 39;
  background: var(--sail); padding: 24px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu ul { display: grid; }
.mobile-menu li a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none;
  font-variation-settings: var(--wide); font-weight: 600; font-size: clamp(1.6rem, 6vw, 2.2rem); letter-spacing: -0.02em;
}
.mobile-menu li a[aria-current='page'] { color: var(--signal-text); }
.mobile-menu-foot { display: grid; gap: 16px; margin-top: 32px; }
.mobile-menu-tel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-2); }
.mobile-menu.is-open li, .mobile-menu.is-open .mobile-menu-foot { animation: menu-in 280ms var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes menu-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 68.75em) {
  .main-nav { display: none; }
  .menu-btn { display: grid; }
  .header-cta { margin-left: auto; }
}
.cta-short { display: none; }
@media (max-width: 32.5em) {
  .header-inner { gap: 12px; }
  .brand { gap: 10px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-word { font-size: 0.8rem; letter-spacing: 0.08em; }
  .header-cta .cta-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-cta .cta-short { display: inline; }
  .basket-count { margin-left: 6px; }
  .menu-btn { width: 44px; height: 44px; }
}
@media (max-width: 22.4375em) { .brand-word { display: none; } }

/* ---------- Accueil : ouverture ---------- */

.hero { padding-top: clamp(24px, 4.5vh, 56px); overflow: clip; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.legend-n {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.25px solid var(--ink); font-size: 0.74rem; font-weight: 650; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

@media (max-width: 35em) {
  .actions .btn { flex: 1 1 100%; justify-content: space-between; }
}

/* ---------- La mécanique ---------- */

.mechanics { padding-block: var(--section); }
.mechanics-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); }
.mechanics-sticky { position: sticky; top: calc(var(--header-h) + 8vh); display: grid; }
.stage-shot { grid-area: 1 / 1; transition: opacity 300ms var(--ease-out) 120ms, transform 300ms var(--ease-out) 120ms; }
.mechanics-stage[data-stage='galaxy'] .stage-shot[data-for='nebula'],
.mechanics-stage[data-stage='nebula'] .stage-shot[data-for='galaxy'] { opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 140ms var(--ease-out), transform 0ms linear 140ms; }
.stage-caption { margin: 0; font-size: 0.85rem; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.stage-foot { grid-area: 2 / 1; display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 16px; }
.mechanics-copy > .h2 { max-width: 15ch; }
.mechanics-copy > .section-lede { margin-top: 20px; }
.mech-entry { padding: clamp(32px, 6vh, 64px) 0; min-height: 40vh; display: flex; flex-direction: column; justify-content: center; }
.mech-entry:first-of-type { margin-top: clamp(32px, 6vh, 64px); }
.mech-entry h3 { font-variation-settings: 'wdth' 112; font-size: 1.25rem; }
.mech-entry p { color: var(--ink-2); max-width: 52ch; }
.mech-figure { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; color: var(--ink) !important; }
.mech-figure .num { font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); line-height: 1; font-weight: 700; letter-spacing: -0.01em; }
.mech-unit { font-size: 0.92rem; color: var(--ink-3); }
.mech-who { font-size: 0.92rem; color: var(--ink-3) !important; margin: 0; }
.mech-entry { border-top: 1.25px solid var(--line); transition: border-color 300ms ease; }
.mech-entry.is-current { border-top-color: var(--signal-line); }
.mech-entry .mech-figure .num { transition: color 300ms ease; }
.mech-entry.is-current .mech-figure .num { color: var(--signal-text); }
.mech-head { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: clamp(16px, 2vw, 24px); align-items: end; margin-bottom: 18px; }
.mech-photo { margin: 0; }
.mech-head .mech-figure .num { font-size: clamp(2rem, 1.2rem + 1.4vw, 2.7rem); }
.mech-photo.photo-slot .photo-slot-note { margin: 8px; padding: 8px 10px; font-size: 0.74rem; }
.mech-photo .photo-slot-subject { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mech-entry h3 { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.mech-entry h3 .legend-n { width: 26px; height: 26px; }
.mech-entry.is-current h3 .legend-n { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
@media (max-width: 35em) { .mech-head { grid-template-columns: 1fr; gap: 14px; } .mech-photo { aspect-ratio: 2 / 1 !important; } }

@media (max-width: 56.25em) {
  .mechanics-grid { grid-template-columns: 1fr; row-gap: 12px; }
  .mechanics-copy { display: contents; }
  .mechanics-copy > .h2 { order: 1; }
  .mechanics-copy > .section-lede { order: 2; margin-bottom: 8px; }
  .mechanics-stage { order: 3; }
  .mech-entry { order: 4; }
  .mech-entry:first-of-type { margin-top: 0; }
  .mechanics-sticky { top: var(--header-h); background: var(--sail); padding: 12px 0 8px; z-index: 2; border-bottom: 1px solid var(--line); }
  .mechanics-stage { position: sticky; top: var(--header-h); z-index: 2; }
  .stage-foot { margin-top: 8px; }
  .mech-entry { min-height: auto; }
}
@media (max-width: 56.25em) and (max-height: 35em) { .mechanics-stage, .mechanics-sticky { position: static; } }
.matrix-name, .lineup-name, .related-name, .app-name { transition: color 200ms ease; }

/* ---------- Matrice de la gamme ---------- */

.range { padding-block: var(--section); background: var(--sail-2); }
.range .h2 { max-width: 18ch; margin-bottom: clamp(32px, 5vw, 56px); }
.matrix { border-top: 1.25px solid var(--ink); }
.matrix-row { display: grid; grid-template-columns: minmax(180px, 1.1fr) repeat(3, minmax(0, 2fr)); border-bottom: 1px solid var(--line-strong); }
.matrix-head { border-bottom-color: var(--ink); }
.matrix-tier { padding: 16px 20px; border-left: 1px solid var(--line); font-size: 0.92rem; }
.matrix-corner { display: block; }
.matrix-tier .num { font-size: 1.5rem; }
.matrix-family { padding: 24px 20px 24px 0; display: grid; gap: 4px; align-content: start; }
.matrix-family strong { font-variation-settings: 'wdth' 112; font-size: 1.125rem; display: flex; align-items: center; gap: 10px; }
.matrix-family span:last-child { color: var(--ink-3); font-size: 0.92rem; }
.matrix-family .swatch { margin-bottom: 4px; }
.matrix-cell { border-left: 1px solid var(--line); padding: 20px; display: grid; gap: 16px; align-content: start; }
.matrix-cell-price { display: none; }
.matrix-model {
  display: grid; gap: 4px; text-decoration: none; padding: 12px; margin: -12px;
  transition: background-color 220ms ease;
}
.matrix-model .shot { margin-bottom: 10px; }
.matrix-name { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1; }
.matrix-line { font-size: 0.92rem; color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) {
  .matrix-model:hover { background: var(--sail); }
  .matrix-model:hover .matrix-name { color: var(--signal-text); }
}
.matrix-foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; color: var(--ink-3); font-size: 0.92rem; }
.matrix-foot .link-arrow { color: var(--ink); }
.swatch { display: inline-block; width: 14px; height: 14px; flex: none; border: 1px solid var(--line-strong); vertical-align: -2px; }
.swatch-bois { background: var(--maple-tint); border-color: var(--maple); }
.swatch-aluminium { background: var(--steel-tint); border-color: var(--steel); }

@media (max-width: 53.75em) {
  .matrix-head { display: none; }
  .matrix-row { grid-template-columns: 1fr; padding-bottom: 8px; }
  .matrix-family { padding: 22px 0 8px; }
  .matrix-cell { border-left: 0; padding: 12px 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
  .matrix-cell-price { display: block; font-size: 0.85rem; color: var(--ink-3); }
  .matrix-cell-price .num { font-size: 1.0625rem; color: var(--ink); }
  .matrix-model { margin: 0; padding: 0; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .matrix-model .shot { grid-row: span 2; margin: 0; }
}

/* ---------- Au-delà du reformer ---------- */

.beyond { padding-block: var(--section); }
.beyond-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.beyond-scan {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 32px; align-items: end;
  border: 1.25px solid var(--ink); padding: clamp(28px, 4vw, 56px); text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.beyond-scan-photo {
  align-self: stretch; display: grid; place-items: end center; min-height: 300px; padding: 24px 16px 0;
  background: var(--studio);
}
.beyond-scan-photo img { width: auto; height: auto; max-width: 100%; max-height: 380px; }
.beyond-scan:active { transform: scale(0.99); }
.beyond-scan p { color: var(--ink-2); }
.beyond-scan .h2 { margin-bottom: 16px; }
.beyond-price { color: var(--ink) !important; font-size: 1.125rem; }
.beyond-scan .link-arrow { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .beyond-scan:hover .link-arrow i { transform: translateX(3px); } }
.beyond-list { display: flex; flex-direction: column; gap: 20px; }
.beyond-list .h3 { padding-bottom: 14px; border-bottom: 1.25px solid var(--ink); }
.beyond-list ul { display: grid; }
.beyond-list li a {
  display: grid; grid-template-columns: 1fr auto 20px; gap: 16px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.beyond-name { font-weight: 560; }
.beyond-row-price { color: var(--ink-2); font-size: 0.92rem; }
.beyond-list li i { transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .beyond-list li a:hover i { transform: translateX(3px); color: var(--signal-text); } }
.beyond-list > .link-arrow { align-self: flex-start; margin-top: auto; }
@media (max-width: 61.25em) {
  .beyond-grid { grid-template-columns: 1fr; }
  .beyond-scan { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); }
}
@media (max-width: 35em) { .beyond-scan { grid-template-columns: 1fr; } .beyond-scan-photo { min-height: 0; } .beyond-scan-photo img { max-height: 300px; } }

/* ---------- Emplacements photo ---------- */

.photo-slot {
  position: relative; margin: 0; width: 100%;
  background-color: var(--sail-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--line-strong) 45%, transparent) 11px 12px);
  border: 1px solid var(--line);
  display: grid; place-items: end start; overflow: hidden;
}
.photo-slot-note {
  display: grid; gap: 2px; margin: 14px; padding: 10px 12px; max-width: min(36ch, calc(100% - 28px));
  background: var(--sail); border: 1px solid var(--line); font-size: 0.85rem; line-height: 1.4; color: var(--ink-2);
}
.photo-slot-kind { font-weight: 650; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.74rem; }
.photo-slot-size { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- Showroom (accueil) ---------- */

.showroom-teaser { padding-bottom: var(--section); }
.showroom-stage { position: relative; }
.showroom-photo { min-height: 360px; }
.showroom-panel {
  position: absolute; right: clamp(16px, 4vw, 64px); bottom: calc(-1 * clamp(24px, 4vw, 56px));
  width: min(480px, 100% - 32px); background: var(--sail); border: 1.25px solid var(--ink);
  padding: clamp(24px, 3vw, 40px);
}
.showroom-panel .h2 { margin-bottom: 14px; }
.showroom-panel p { color: var(--ink-2); }
@media (max-width: 47.5em) {
  .showroom-panel { position: static; width: 100%; border-top: 0; }
  .showroom-photo { min-height: 240px; }
}

/* ---------- Rail du processus ---------- */

.process { padding-block: var(--section); }
.process .h2 { max-width: 20ch; margin-bottom: clamp(40px, 6vw, 72px); }
.rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.rail::before { content: ''; position: absolute; left: 14px; right: 0; top: 13.5px; height: 1.25px; background: var(--ink-2); }
.js .rail::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s linear; }
.js .rail.is-in::before { transform: scaleX(1); }
.rail-stop { position: relative; padding-top: 52px; }
.rail-pulley {
  position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.25px solid var(--ink); background: var(--sail);
}
.rail-pulley::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--ink); }
.js .rail .rail-pulley { transition: background-color 300ms ease, border-color 300ms ease; transition-delay: calc(var(--i) * 490ms); }
.js .rail.is-in .rail-pulley { border-color: var(--signal); }
.rail-stop h3 { font-variation-settings: 'wdth' 110; font-size: 1.25rem; margin-bottom: 10px; }
.rail-stop p { color: var(--ink-2); max-width: 36ch; }
.process.is-quiet { background: var(--sail-2); }
@media (max-width: 47.5em) {
  .rail { grid-template-columns: 1fr; gap: 8px; }
  .rail::before { left: 13.5px; right: auto; top: 14px; bottom: 28px; width: 1.25px; height: auto; }
  .js .rail::before { transform: scaleY(0); transform-origin: top; }
  .js .rail.is-in::before { transform: scaleY(1); }
  .rail-stop { padding: 0 0 28px 52px; }
}

/* ---------- Studios équipés ---------- */

.studios { padding-block: clamp(48px, 6vw, 88px); border-block: 1px solid var(--line); }
.studios .h3 { color: var(--ink-3); font-size: 1rem; font-weight: 500; font-variation-settings: 'wdth' 100; margin-bottom: 22px; }
.studio-names { display: flex; flex-wrap: wrap; gap: 14px clamp(28px, 4vw, 64px); }
.studio-names li { font-variation-settings: var(--cond); font-weight: 650; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.4rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-2); line-height: 1.1; }

/* ---------- FAQ ---------- */

.faq { padding-block: var(--section); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-intro { position: sticky; top: calc(var(--header-h) + 32px); }
.faq-intro p { color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
.faq-list { border-top: 1.25px solid var(--ink); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-weight: 560; font-size: 1.0625rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { flex: none; font-size: 1.2rem; transition: transform 260ms var(--ease-out); }
.faq-item[open] summary i { transform: rotate(45deg); }
.faq-answer p { color: var(--ink-2); max-width: 62ch; padding-bottom: 22px; margin: 0; }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
@media (max-width: 53.75em) { .faq-grid { grid-template-columns: 1fr; } .faq-intro { position: static; } }

/* ---------- Bandeau devis ---------- */

.cta-band { background: var(--field); color: var(--on-field); padding-block: clamp(64px, 8vw, 120px); }
.cta-band-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.cta-band-title { font-variation-settings: var(--wide); font-weight: 600; font-size: clamp(1.9rem, 1rem + 2.4vw, 3.2rem); line-height: 1.04; letter-spacing: -0.025em; }
.cta-band-text { color: var(--on-field-2); margin: 0; max-width: 42ch; }
.cta-band-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.cta-band :focus-visible { outline-color: var(--on-field); }
@media (max-width: 53.75em) { .cta-band-inner { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */

.site-footer { background: var(--field); color: var(--on-field-2); border-top: 1px solid color-mix(in srgb, var(--on-field) 14%, transparent); padding-top: 64px; font-size: 0.92rem; }
.site-footer a { color: var(--on-field); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { text-decoration: underline; } }
.site-footer .brand-mark { width: 48px; height: 48px; }
.site-footer .brand-word { color: var(--on-field); }
.site-footer :focus-visible { outline-color: var(--on-field); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; }
.footer-brand p { margin-top: 18px; max-width: 32ch; }
.footer-title { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--on-field-2); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col address { line-height: 1.8; }
.footer-col address, .footer-col a, .footer-brand p { overflow-wrap: anywhere; }
.footer-social { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 22px 32px; border-top: 1px solid color-mix(in srgb, var(--on-field) 14%, transparent); font-size: 0.85rem; }
.footer-legal p { margin: 0; }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-legal a { color: var(--on-field-2); }
@media (max-width: 53.75em) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 32.5em) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Pages intérieures ---------- */

.page-intro { padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 80px); }
.page-intro.is-compact { padding-bottom: clamp(24px, 3vw, 40px); }
.page-intro .lede { margin-top: 22px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; color: var(--ink-3); margin-bottom: clamp(24px, 4vw, 44px); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { text-decoration: underline; } }
.crumbs [aria-current] { color: var(--ink); }
.crumbs.is-light, .crumbs.is-light a { color: var(--on-field-2); }
.crumbs.is-light [aria-current] { color: var(--on-field); }

/* Gamme à l'échelle */
.lineup { padding-bottom: var(--section); }
.lineup-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 32px; padding-bottom: 18px; border-bottom: 1.25px solid var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); background: transparent;
  font-size: 0.92rem; font-weight: 520; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--sail); border-color: var(--ink); }
.lineup-list { display: grid; }
.lineup-row[hidden] { display: none; }
.lineup-link {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 24px; gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(18px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.lineup-meta { display: grid; gap: 4px; }
.lineup-name { font-variation-settings: var(--cond); font-weight: 700; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: 0.04em; line-height: 1; }
.lineup-line { color: var(--ink-2); }
.lineup-spec { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 0.92rem; }
.lineup-price { margin-top: 6px; }
.lineup-arrow i { font-size: 1.3rem; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .lineup-link:hover .lineup-name { color: var(--signal-text); }
  .lineup-link:hover .lineup-arrow i { transform: translateX(4px); }
}
.lineup-empty { padding: 32px 0; color: var(--ink-3); }
@media (max-width: 42.5em) {
  .lineup-link { grid-template-columns: 1fr; gap: 12px; }
  .lineup-arrow { display: none; }
}

/* Comparatif */
.compare { padding-block: var(--section); background: var(--sail-2); }
.compare .h2 { margin-bottom: 32px; }
.cmp-scroll { position: relative; overflow-x: auto; overscroll-behavior-x: contain; border-top: 1.25px solid var(--ink); }
.cmp-scroll:focus-visible { outline-offset: 6px; }
.cmp { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 0.92rem; table-layout: fixed; }
.cmp thead td:first-child { width: 230px; position: sticky; left: 0; z-index: 2; background: var(--sail-2); }
.cmp th, .cmp td { padding: 12px 14px; text-align: left; vertical-align: top; }
.cmp thead th { padding-block: 18px; font-variation-settings: var(--cond); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; border-bottom: 1px solid var(--line-strong); }
.cmp thead th a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .cmp thead th a:hover { color: var(--signal-text); } }
.cmp tbody th { font-weight: 500; color: var(--ink-2); white-space: nowrap; position: sticky; left: 0; background: var(--sail-2); z-index: 1; }
.cmp tbody tr:nth-child(even) td, .cmp tbody tr:nth-child(even) th[scope='row'] { background: color-mix(in srgb, var(--sail) 55%, var(--sail-2)); }
.cmp .cmp-group th { padding-top: 28px; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; background: var(--sail-2) !important; border-bottom: 1px solid var(--line-strong); position: static; }
.cmp .cmp-group th > span { position: sticky; left: 14px; display: inline-block; }
@media (max-width: 37.5em) { .cmp { min-width: 760px; } .cmp thead td:first-child { width: 8.5rem; } .cmp tbody th { white-space: normal; } }
.cmp .is-price td { font-size: 1.0625rem; }
.cmp .num { font-size: 1.08em; }
.tick { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.tick i { font-size: 1.1rem; color: var(--ink); }
.tick.is-no { color: var(--ink-3); }

/* Fiche produit */
.product { padding-block: clamp(24px, 3vw, 40px) clamp(48px, 6vw, 88px); }
.product-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.product-panel { position: sticky; top: calc(var(--header-h) + 24px); }
.product-name { font-variation-settings: var(--cond); font-weight: 720; font-size: clamp(3rem, 2rem + 4vw, 5.6rem); letter-spacing: 0.02em; line-height: 0.92; }
.product-name.is-long { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.product-line { color: var(--ink-2); margin: 14px 0 0; max-width: 44ch; }
@media (max-width: 60em) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
  .product-panel { position: static; order: 2; }
  .product-visual { display: contents; }
  .product-visual > * { order: 1; }
}

/* Configurateur */
.configurator { margin-top: 28px; display: grid; gap: 22px; padding-top: 24px; border-top: 1.25px solid var(--ink); }
.config-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.config-group legend, .config-qty > label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 10px; padding: 0; display: block; }
.config-chosen { text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 560; margin-left: 6px; font-size: 0.92rem; }
.segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1.25px solid var(--ink); }
.segmented label { position: relative; display: grid; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: grid; gap: 2px; height: 100%; min-height: 54px; padding: 10px 14px; align-content: center; font-weight: 560; transition: background-color 200ms ease, color 200ms ease; }
.segmented label + label span { border-left: 1px solid var(--ink); }
.segmented small { font-weight: 450; font-size: 0.85rem; color: var(--ink-3); }
.segmented input:checked + span { background: var(--ink); color: var(--sail); }
.segmented input:checked + span small { color: color-mix(in srgb, var(--sail) 75%, transparent); }
.segmented input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: -4px; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch-pick { position: relative; cursor: pointer; }
.swatch-pick input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.swatch-pick span:first-of-type { display: block; width: 44px; height: 44px; background: var(--c); border: 1px solid var(--line-strong); box-shadow: 0 0 0 0 var(--ink); transition: box-shadow 200ms var(--ease-out); }
.swatch-pick input:checked + span { box-shadow: 0 0 0 2px var(--sail), 0 0 0 3.5px var(--ink); }
.swatch-pick input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 5px; }
.config-note { font-size: 0.85rem; color: var(--ink-3); margin: 10px 0 0; }
.stepper { display: inline-grid; grid-template-columns: 48px 64px 48px; border: 1.25px solid var(--ink); height: 50px; }
.stepper button { border: 0; background: transparent; display: grid; place-items: center; transition: background-color 160ms ease; }
.stepper button:active { background: var(--sail-2); }
@media (hover: hover) and (pointer: fine) { .stepper button:hover { background: var(--sail-2); } }
.stepper button:active i { transform: scale(0.85); }
.stepper button i { transition: transform 120ms var(--ease-out); }
.stepper input { border: 0; border-inline: 1px solid var(--line-strong); text-align: center; background: transparent; font-variant-numeric: tabular-nums; font-weight: 600; -moz-appearance: textfield; appearance: textfield; min-width: 0; }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper.is-small { grid-template-columns: 44px 52px 44px; height: 44px; }
.config-price { margin: 0; font-size: 1rem; }
.config-price .num { font-size: 2rem; }
.config-unit { color: var(--ink-3); font-size: 0.92rem; }
.config-after { display: inline-flex; align-items: center; gap: 8px; font-weight: 560; text-decoration: none; color: var(--ink); }
.config-after[hidden] { display: none; }
.config-after i:first-child { color: var(--signal-text); }
[data-add] [data-add-label] { transition: filter 120ms var(--ease-out), opacity 120ms var(--ease-out); }
[data-add].is-swapping [data-add-label] { filter: blur(2px); opacity: 0.6; }
.assurances { display: grid; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-2); }
.assurances li { display: flex; align-items: center; gap: 10px; }
.assurances i { font-size: 1.25rem; color: var(--ink); }

/* Specs et description */
.product-specs { padding-bottom: clamp(48px, 6vw, 88px); }
.spec-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border-block: 1.25px solid var(--ink); }
.spec-strip > div { padding: 18px 16px 20px; border-left: 1px solid var(--line); }
.spec-strip > div:first-child { border-left: 0; padding-left: 0; }
.spec-strip dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 6px; }
.spec-strip dd { margin: 0; font-weight: 560; font-variant-numeric: tabular-nums; }
@media (max-width: 60em) {
  .spec-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-strip > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .spec-strip > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 35em) {
  .spec-strip { grid-template-columns: 1fr 1fr; }
  .spec-strip > div { border-left: 0 !important; padding-left: 0; border-top: 1px solid var(--line); }
  .spec-strip > div:nth-child(-n + 2) { border-top: 0; }
  .spec-strip > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line) !important; }
}
.spec-note { font-size: 0.85rem; color: var(--ink-3); margin-top: 12px; }
.product-desc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); margin-top: clamp(32px, 4vw, 56px); }
.product-pitch { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; margin: 0; }
.product-acc h3 { margin-bottom: 14px; }
.product-acc ul { display: grid; gap: 10px; }
.product-acc li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-2); }
.product-acc i { color: var(--ink); transform: translateY(2px); }
@media (max-width: 53.75em) { .product-desc { grid-template-columns: 1fr; } }

.product-tech { padding-block: var(--section); background: var(--sail-2); }
.product-tech .h2 { margin-bottom: clamp(28px, 4vw, 48px); }
.tech-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1.25px solid var(--ink); }
.tech-item { padding: 24px 28px 8px 0; }
.tech-item + .tech-item { padding-left: 28px; border-left: 1px solid var(--line); }
.tech-item h3 { font-variation-settings: 'wdth' 110; font-size: 1.25rem; margin-bottom: 4px; }
.tech-origin { color: var(--signal-text); font-weight: 560; font-size: 0.92rem; }
.tech-item p:last-child { color: var(--ink-2); }
@media (max-width: 47.5em) { .tech-item + .tech-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } }

.related { padding-block: clamp(56px, 7vw, 104px); }
.related .h3 { margin-bottom: 24px; }
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.25px solid var(--ink); margin-bottom: 28px; }
.related-list li + li { border-left: 1px solid var(--line); }
.related-list a { display: grid; gap: 4px; padding: 20px; text-decoration: none; height: 100%; }
.related-list li:first-child a { padding-left: 0; }
.related-list .shot { margin-bottom: 12px; }
.related-name { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1.05; }
.related-list.is-apps .related-name { font-variation-settings: 'wdth' 100; font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; }
.related-meta { color: var(--ink-3); font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) { .related-list a:hover .related-name { color: var(--signal-text); } }
@media (max-width: 47.5em) {
  .related-list { grid-template-columns: 1fr; }
  .related-list li + li { border-left: 0; border-top: 1px solid var(--line); }
  .related-list a { padding-left: 0; }
}

/* Appareils */
.apps { padding-bottom: var(--section); }
.app-list { border-top: 1.25px solid var(--ink); }
.app-row a {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center;
  padding: clamp(28px, 4vw, 48px) 0; border-bottom: 1px solid var(--line); text-decoration: none;
}
.app-visual { max-width: 440px; }
.app-name { font-variation-settings: var(--wide); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); letter-spacing: -0.02em; margin-bottom: 12px; }
.app-meta p { color: var(--ink-2); max-width: 52ch; }
.app-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); max-width: 52ch; }
.app-dims { color: var(--ink-3); font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) { .app-row a:hover .app-name { color: var(--signal-text); } }
@media (max-width: 47.5em) { .app-row a { grid-template-columns: 1fr; } .app-visual { max-width: 320px; } }

/* Nova Scan 3D */
.scan-hero {
  --draw: var(--on-field);
  background: var(--field); color: var(--on-field); padding-block: clamp(24px, 3vw, 40px) clamp(56px, 7vw, 104px);
}
.scan-hero .product-line, .scan-hero .config-note, .scan-hero .config-unit, .scan-hero .price-from { color: var(--on-field-2); }
.scan-hero .configurator, .scan-hero .assurances { border-color: color-mix(in srgb, var(--on-field) 30%, transparent); }
.scan-hero .config-group legend, .scan-hero .config-qty > label { color: var(--on-field-2); }
.scan-hero .config-chosen, .scan-hero .assurances, .scan-hero .assurances i, .scan-hero .config-after { color: var(--on-field); }
.scan-hero .stepper { border-color: var(--on-field); }
.scan-hero .stepper input { border-color: color-mix(in srgb, var(--on-field) 30%, transparent); }
@media (hover: hover) and (pointer: fine) { .scan-hero .stepper button:hover { background: color-mix(in srgb, var(--on-field) 10%, transparent); } }
.scan-hero .swatch-pick input:checked + span { box-shadow: 0 0 0 2px var(--field), 0 0 0 3.5px var(--on-field); }
.scan-hero :focus-visible { outline-color: var(--on-field); }
.scan-hero .photo-slot { background-color: color-mix(in srgb, var(--on-field) 6%, transparent); border-color: color-mix(in srgb, var(--on-field) 20%, transparent); background-image: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--on-field) 14%, transparent) 11px 12px); }
.scan-hero .photo-slot-note { background: var(--field); border-color: color-mix(in srgb, var(--on-field) 25%, transparent); color: var(--on-field-2); }
.scan-hero .photo-slot-kind { color: var(--on-field); }
.scan-hero .photo-slot-size { color: var(--on-field-2); }
.scan-features { padding-block: var(--section); }
.scan-features .h2 { max-width: 20ch; margin-bottom: clamp(32px, 4vw, 56px); }
.feature-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(40px, 5vw, 72px); }
.feature-cols h3 { font-variation-settings: 'wdth' 110; font-size: 1.25rem; margin-bottom: 10px; padding-top: 18px; border-top: 1.25px solid var(--ink); }
.feature-cols p { color: var(--ink-2); }
@media (max-width: 53.75em) { .feature-cols { grid-template-columns: 1fr; } }

/* Projet studio : plan de salle interactif (80 cm entre deux machines) */
.fleet { padding-bottom: var(--section); }
.fleet .section-lede { margin: 16px 0 clamp(28px, 4vw, 48px); max-width: 64ch; }
.fleet-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.fleet-controls { display: grid; gap: clamp(28px, 3vw, 40px); }
.fleet-block { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; }
.fleet-step { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-weight: 600; font-size: 1.0625rem; }
.fleet-step span { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.25px solid var(--ink); font-size: 0.74rem; font-variant-numeric: tabular-nums; }

.room-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.room-field { display: grid; gap: 6px; font-weight: 560; font-size: 0.92rem; }
.field-unit { display: flex; align-items: center; border: 1px solid var(--ink-3); background: var(--sail); transition: border-color 160ms ease, box-shadow 160ms ease; }
.field-unit:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field-unit:has(input[aria-invalid='true']) { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field-unit input { width: 5.2ch; min-height: 48px; padding: 10px 4px 10px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.field-unit input:focus { outline: none; }
.field-unit > span { padding-right: 14px; color: var(--ink-3); }
.room-times { padding-bottom: 13px; color: var(--ink-3); }
.room-area { margin: 0 0 0 auto; display: grid; gap: 2px; text-align: right; }
.room-area > span { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.room-area strong { font-weight: 500; }
.room-area .num { font-size: 1.6rem; }
.field-help { margin: 0; font-size: 0.85rem; color: var(--ink-3); }

.fill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.select { position: relative; flex: 1 1 200px; display: flex; }
.select select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 48px; padding: 10px 40px 10px 14px; border: 1px solid var(--ink-3); border-radius: 0; background: var(--sail); color: var(--ink); font: inherit; cursor: pointer; }
.select select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.select::after { content: ''; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }

.fleet-list { border-top: 1.25px solid var(--ink); }
.fleet-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fleet-row.is-on .fleet-name strong { color: var(--signal-text); }
.fleet-name { display: flex; gap: 12px; align-items: center; min-width: 0; }
.fleet-name > span:last-child { display: grid; }
.fleet-name strong { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; line-height: 1.1; transition: color 200ms ease; }
.fleet-name small { color: var(--ink-3); font-size: 0.85rem; }

.fleet-summary { position: sticky; top: calc(var(--header-h) + 24px); border: 1.25px solid var(--ink); padding: clamp(16px, 2vw, 24px); background: var(--sail); display: grid; gap: 14px; }
.fleet-plan { position: relative; min-height: 220px; display: grid; place-items: center; background: var(--sail-2); border: 1px solid var(--line); }
.fleet-plan-empty { max-width: 28ch; text-align: center; color: var(--ink-3); font-size: 0.92rem; margin: 0; padding: 24px; }
.room-plan { display: block; width: 100%; height: auto; max-height: min(62vh, 640px); -webkit-user-select: none; user-select: none; }
.rp-floor { fill: var(--sail); }
.rp-grid { fill: none; stroke: color-mix(in srgb, var(--ink) 9%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-wall { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.rp-dim { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rp-dim-label { font-size: calc(var(--fs) * 1px); fill: var(--ink-2); text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--sail-2); stroke-width: calc(var(--fs) * 0.6px); }
.rp-empty { font-size: calc(var(--fs) * 1.1px); fill: var(--ink-3); text-anchor: middle; dominant-baseline: central; }
.rp-m { cursor: grab; touch-action: none; outline: none; transition: transform 220ms var(--ease-out); }
.rp-m.is-drag { cursor: grabbing; transition: none; }
.rp-halo { fill: color-mix(in srgb, var(--signal-line) 5%, transparent); stroke: color-mix(in srgb, var(--signal-line) 60%, transparent); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; transition: fill 160ms ease, stroke 160ms ease; }
.rp-body { stroke: var(--draw); stroke-width: 1.25; vector-effect: non-scaling-stroke; transition: stroke 160ms ease; }
.rp-body.p-wood { fill: var(--maple-tint); }
.rp-body.p-alu { fill: var(--steel-tint); }
.rp-pad { fill: var(--pad); stroke: var(--draw); stroke-width: 0.75; vector-effect: non-scaling-stroke; }
.rp-bar { fill: none; stroke: var(--draw); stroke-width: 2; vector-effect: non-scaling-stroke; }
.rp-label { font-size: calc(var(--fs) * 1px); font-weight: 650; letter-spacing: 0.04em; fill: var(--ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; paint-order: stroke; stroke: var(--sail); stroke-width: calc(var(--fs) * 0.35px); }
.rp-m.is-sel .rp-body, .rp-m:focus-visible .rp-body { stroke: var(--signal); stroke-width: 2.5; }
.rp-m.is-sel .rp-halo, .rp-m:focus-visible .rp-halo { stroke: var(--signal-line); stroke-dasharray: none; fill: color-mix(in srgb, var(--signal-line) 11%, transparent); }
.rp-m:focus-visible .rp-halo { stroke-width: 2; }
.rp-m.is-bad .rp-halo { fill: color-mix(in srgb, var(--error) 12%, transparent); stroke: var(--error); stroke-dasharray: none; }
.rp-m.is-bad .rp-body { stroke: var(--error); }
@media (hover: hover) and (pointer: fine) { .rp-m:hover .rp-halo { stroke-dasharray: none; } }

.fleet-tools { display: grid; gap: 10px; }
.fleet-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; background: var(--sail-2); border-left: 2px solid var(--signal-line); }
.fleet-sel[hidden] { display: none; }
.fleet-sel-name { margin-right: auto; font-weight: 600; }
.fleet-hint { margin: 0; font-size: 0.85rem; color: var(--ink-3); }
.fleet-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fleet-status { margin: 0; min-height: 1.45em; font-size: 0.92rem; color: var(--ink-2); }
.fleet-undo { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fleet-dock { display: grid; gap: 16px; }
.fleet-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--line); }
.fleet-totals > div { padding: 12px 12px 12px 0; min-width: 0; }
.fleet-totals > div + div { padding-left: 12px; border-left: 1px solid var(--line); }
.fleet-totals dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.fleet-totals dd { margin: 4px 0 0; }
.fleet-totals .num { font-size: 1.6rem; }
.fleet-totals small { display: block; color: var(--ink-3); font-size: 0.85rem; }
.fleet-note { font-size: 0.85rem; color: var(--ink-3); margin: 0; }
.basket-room { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.basket-room a { color: var(--ink); }

/* Mobile : salle, remplissage, plan, modèles ; totaux et envoi gardés à portée en bas d'écran */
@media (max-width: 60em) {
  .fleet-grid { display: flex; flex-direction: column; gap: 24px; }
  .fleet-controls, .fleet-summary { display: contents; }
  .fleet-controls > :nth-child(1) { order: 1; }
  .fleet-controls > :nth-child(2) { order: 2; }
  .fleet-plan { order: 3; }
  .fleet-tools { order: 4; }
  .fleet-status { order: 5; }
  .fleet-controls > :nth-child(3) { order: 6; }
  .fleet-dock { order: 7; position: sticky; bottom: 0; z-index: 3; gap: 10px; background: var(--sail); border-top: 1.25px solid var(--ink); padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); }
  .fleet-dock .fleet-note { display: none; }
  .fleet-totals .num { font-size: 1.25rem; }
  .fleet-totals > div { padding-block: 8px; }
  .room-plan { max-height: 56vh; }
}
@media (max-width: 26.25em) {
  .room-area { margin-left: 0; text-align: left; flex-basis: 100%; }
  .fleet-totals dt { font-size: 0.74rem; letter-spacing: 0.04em; }
  .fleet-totals > div + div { padding-left: 8px; }
}

/* Showroom */
.visit { padding-bottom: var(--section); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.visit-media { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: end; }
.visit-copy .h2 { margin-bottom: 24px; }
.visit-list { display: grid; border-top: 1.25px solid var(--ink); }
.visit-list li { padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.visit-list strong { color: var(--ink); font-weight: 600; }
.visit-address { display: grid; gap: 6px; margin-top: 32px; padding: 20px; border: 1.25px solid var(--ink); }
.visit-address-label { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.visit-address strong { font-size: 1.125rem; font-weight: 600; }
.visit-address .link-arrow { justify-self: start; margin-block: 4px; }
.visit-address > span:last-child { color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 60em) { .visit-grid { grid-template-columns: 1fr; } }

/* Formulaires */
.form-section { padding-block: var(--section); background: var(--sail-2); }
.form-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.form-intro p { color: var(--ink-2); margin-top: 16px; max-width: 34ch; }
.form-wrap > .form-success { grid-column: 2; }
@media (max-width: 53.75em) { .form-wrap { grid-template-columns: 1fr; } .form-wrap > .form-success { grid-column: 1; } }
.lead-form { display: grid; gap: 32px; min-width: 0; }
.form-block { border: 0; padding: 0; margin: 0; min-width: 0; }
.form-block legend { padding: 0 0 14px; width: 100%; border-bottom: 1.25px solid var(--ink); margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 20px; }
.field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.field.is-full { grid-column: 1 / -1; }
.field label, .field-label { font-weight: 560; font-size: 0.92rem; }
.req { color: var(--error); }
.opt { color: var(--ink-3); font-weight: 400; font-size: 0.85rem; }
.field-hint { margin: 0; font-size: 0.85rem; color: var(--ink-3); }
.field input:not([type='checkbox']):not([type='radio']), .field textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--ink-3); border-radius: 0;
  background: var(--sail); color: var(--ink); font-size: 1rem;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field.has-error input, .field.has-error textarea { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); }
.field-error { margin: 0; color: var(--error); font-size: 0.85rem; font-weight: 520; display: flex; gap: 6px; align-items: baseline; }
.field-error[hidden] { display: none; }
.field-error::before { content: ''; flex: none; width: 6px; height: 6px; background: currentColor; transform: translateY(-2px); }
@media (max-width: 37.5em) { .form-grid { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 450 !important; font-size: 0.92rem !important; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ink); }
.radio-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-cards label { position: relative; cursor: pointer; }
.radio-cards input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-cards span { display: block; min-height: 46px; padding: 11px 16px; border: 1px solid var(--ink-3); font-weight: 520; font-size: 0.92rem; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out); }
.radio-cards label:active span { transform: scale(0.97); }
.radio-cards input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--sail); }
.radio-cards input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.has-error .radio-cards span { border-color: var(--error); }
.error-summary { border: 1.25px solid var(--error); padding: 18px 20px; background: var(--sail); }
.error-summary h2 { font-size: 1rem; margin-bottom: 8px; color: var(--error); }
.error-summary ul { display: grid; gap: 4px; list-style: disc; padding-left: 20px; }
.error-summary a { color: var(--error); }
.lead-form > .btn { justify-self: start; }
.lead-form .btn.is-loading { pointer-events: none; }
.lead-form .btn.is-loading .btn-icon i { animation: spin 700ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-success { border: 1.25px solid var(--ink); padding: clamp(24px, 4vw, 48px); background: var(--sail); display: grid; gap: 12px; justify-items: start; }
.form-success p { color: var(--ink-2); max-width: 46ch; margin: 0; }
.form-success-mark { display: grid; place-items: center; width: 48px; height: 48px; background: var(--ink); color: var(--sail); font-size: 1.5rem; }
.form-success:not([hidden]) { animation: menu-in 480ms var(--ease-out) both; }
.form-success[hidden] { display: none; }

/* Devis */
.quote { padding-bottom: var(--section); }
.quote-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.quote-grid > .form-success, .quote-grid > .lead-form { grid-column: 1; grid-row: 1; }
.quote-grid > .basket { grid-column: 2; grid-row: 1; }
.basket { position: sticky; top: calc(var(--header-h) + 24px); }
.basket-inner { border: 1.25px solid var(--ink); padding: clamp(18px, 2.4vw, 28px); display: grid; gap: 16px; background: var(--sail); }
.basket-inner .h4 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.basket-list { display: grid; }
.basket-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.basket-item-name { font-weight: 600; }
.basket-item-opts { grid-column: 1; font-size: 0.85rem; color: var(--ink-3); }
.basket-item-price { grid-column: 2; grid-row: 1; text-align: right; font-size: 0.92rem; }
.basket-item-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
.basket-remove { background: none; border: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-3); padding: 8px 0; min-height: 44px; }
.basket-remove:active { color: var(--error); }
@media (hover: hover) and (pointer: fine) { .basket-remove:hover { color: var(--error); } }
.basket-empty p { color: var(--ink-2); font-size: 0.92rem; }
.basket-empty[hidden], .basket-total[hidden], .basket-note[hidden] { display: none; }
.basket-total { margin: 0; }
.basket-total > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; }
.basket-total dt { font-weight: 560; }
.basket-total dd { margin: 0; }
.basket-total .num { font-size: 1.8rem; }
.basket-note { font-size: 0.85rem; color: var(--ink-3); margin: 0; }
.basket-item.is-leaving { overflow: hidden; animation: leave 200ms var(--ease-out) forwards, collapse 180ms var(--ease-out) 140ms forwards; }
@keyframes collapse { to { block-size: 0; padding-block: 0; border-bottom-width: 0; } }
@keyframes leave { to { opacity: 0; transform: translateX(12px); } }
@media (max-width: 60em) {
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .quote-grid > .lead-form, .quote-grid > .basket, .quote-grid > .form-success { grid-column: auto; grid-row: auto; }
  .basket { position: static; }
  .basket:has(.basket-empty:not([hidden])) { order: 1; }
}

/* ---------- Apparition au défilement ---------- */

.js [data-reveal] { opacity: 0; translate: 0 18px; filter: blur(4px); transition: opacity 800ms var(--ease-out), translate 800ms var(--ease-out), filter 800ms var(--ease-out), transform 160ms var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; translate: none; filter: none; }
.js .rail[data-reveal] { filter: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { translate: none; filter: none; }
}

/* Photos livrées par le client */
.photo { margin: 0; width: 100%; overflow: hidden; background: var(--sail-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }


/* ---------- Tactile ---------- */

a, button, summary, label, [data-target] { touch-action: manipulation; }
.chip, .stepper button, .menu-btn, .segmented span, .radio-cards span, .swatch-pick, .faq-item summary, .basket-remove {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.menu-btn:active, .faq-item summary:active { opacity: 0.6; }
.mobile-menu li a:active, .lineup-link:active, .app-row a:active, .related-list a:active, .beyond-list li a:active { color: var(--signal-text); }
.matrix-model:active { background: var(--sail); }
@media (pointer: coarse) {
  .chip, .btn-sm { min-height: 44px; }
  .footer-col ul { gap: 0; }
  .footer-legal ul { row-gap: 0; }
  .footer-col a, .footer-legal a, .crumbs a, .cmp thead th a, .mobile-menu-tel, .footer-social { display: inline-flex; align-items: center; min-height: 44px; }
}


/* Gamme : les lignes réapparaissent en fondu après un filtre (opacité seule) */
.lineup.is-filtering .lineup-row { transition: opacity 160ms var(--ease-out); }
@starting-style { .lineup.is-filtering .lineup-row { opacity: 0; } }

/* Devis envoyé : la corde court jusqu'à la poulie suivante */
.next-steps { display: grid; margin: 4px 0 8px; }
.next-step { position: relative; display: grid; gap: 2px; min-height: 28px; padding: 3px 0 22px 44px; }
.next-step:last-child { padding-bottom: 0; }
.next-step .rail-pulley { position: absolute; left: 0; top: 0; }
.next-step > span:not(.rail-pulley) { color: var(--ink-2); font-size: 0.92rem; }
.next-step::after { content: ''; position: absolute; left: 13.4px; top: 28px; bottom: 0; width: 1.25px; background: var(--line-strong); }
.next-step:last-child::after { content: none; }
.next-step.is-done .rail-pulley { border-color: var(--signal); }
.next-step.is-done .rail-pulley::after { background: var(--signal); }
.next-step.is-done::after { background: var(--signal-line); transform-origin: top; }
.form-success:not([hidden]) .next-step.is-done::after { animation: rope-run 900ms var(--ease-in-out) 420ms both; }
.form-success:not([hidden]) .next-step.is-next .rail-pulley { animation: pulley-on 240ms var(--ease-out) 1320ms both; }
@keyframes rope-run { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes pulley-on { from { border-color: var(--ink); } to { border-color: var(--signal); } }
.form-sent { font-size: 0.92rem; color: var(--ink-3); }
.demo-note { font-size: 0.85rem; color: var(--ink-3); border-left: 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* Petits téléphones : l'en-tête tient avec un compteur à 2 ou 3 chiffres */
@media (max-width: 25em) { .brand-word { font-size: 0.7rem; letter-spacing: 0.04em; } .btn.header-cta { padding-inline: 12px; } }

/* Sélection du devis repliable sur mobile */
.basket-toggle { justify-self: start; background: none; border: 0; border-bottom: 1px solid currentColor; padding: 6px 0; font: inherit; font-weight: 560; cursor: pointer; }
.basket.is-collapsed .basket-list, .basket.is-collapsed .basket-note:not([data-cap-note]) { display: none; }

/* ---------- Explorateur 3D ---------- */

.stage-3d { position: relative; grid-area: 1 / 1; aspect-ratio: 4 / 3; }
.mechanics.has-3d .stage-shot { display: none; }
@keyframes annot-in { from { opacity: 0; } to { opacity: 1; } }
.mechanics.has-3d .stage-3d { animation: annot-in 600ms var(--ease-out) both; }
.r3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.r3d-hotspots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.r3d-hotspot {
  position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; pointer-events: auto;
  background: var(--sail); color: var(--ink); border: 1.25px solid var(--ink);
  font-weight: 650; font-size: 0.85rem; font-variant-numeric: tabular-nums;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.r3d-hotspot::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.r3d-hotspot.is-static { pointer-events: none; width: 26px; height: 26px; font-size: 0.74rem; }
.r3d-hotspot.is-on { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
@media (hover: hover) and (pointer: fine) { button.r3d-hotspot:hover { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } }
@media (max-width: 56.25em) { .stage-3d { aspect-ratio: auto; height: min(42svh, 340px); } }

.explorer {
  position: fixed; inset: 0; z-index: 60; overscroll-behavior: contain;
  background: radial-gradient(ellipse 70% 60% at 52% 52%, #ffffff 0%, var(--sail-2) 78%);
}
.explorer.is-open { animation: annot-in 280ms var(--ease-out) both; }
.explorer-stage { position: absolute; inset: 0; }
.explorer .r3d-canvas { touch-action: none; cursor: grab; }
.explorer .r3d-canvas:active { cursor: grabbing; }
.explorer-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) var(--gutter) 16px;
}
.explorer-bar > * { pointer-events: auto; }
.explorer-title { margin: 0; display: grid; gap: 2px; }
.explorer-title strong { font-variation-settings: var(--wide); font-weight: 620; font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.5rem); letter-spacing: -0.015em; }
.explorer-title span { font-size: 0.85rem; color: var(--ink-3); }
.explorer-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.explorer-toggle { display: inline-grid; grid-auto-flow: column; border: 1.25px solid var(--ink); background: var(--sail); }
.explorer-toggle button { min-height: 40px; padding: 0 14px; border: 0; background: none; font-weight: 560; font-size: 0.92rem; transition: background-color 180ms ease, color 180ms ease; }
.explorer-toggle button + button { border-left: 1px solid var(--ink); }
.explorer-toggle button[aria-pressed='true'] { background: var(--ink); color: var(--sail); }
.explorer-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1.25px solid var(--ink); background: var(--sail); font-weight: 560; font-size: 0.92rem;
  transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out);
}
.explorer-btn:active, .explorer-toggle button:active { transform: scale(0.97); }
.explorer-btn.is-close { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 1.2rem; }
@media (hover: hover) and (pointer: fine) { .explorer-btn:hover { background: var(--ink); color: var(--sail); } }
.explorer-panel {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
  width: min(410px, 100% - 2 * var(--gutter)); max-height: calc(100% - 140px); overflow-y: auto;
  background: var(--sail); border: 1.25px solid var(--ink); padding: 22px 24px;
}
.explorer-kicker-free { margin: 0 0 8px; color: var(--ink-2); }
.explorer-list { display: grid; }
.explorer-list button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--line); background: none; font-weight: 560; text-align: left;
}
.explorer-list li:last-child button { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .explorer-list button:hover { color: var(--signal-text); } }
.explorer-panel .mech-figure .num { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); color: var(--signal-text); }
.explorer-panel h2 { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; }
.explorer-panel h2 .legend-n { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.explorer-panel p { color: var(--ink-2); }
.explorer-swatches { margin: 4px 0 6px; }
.swatch-btn { padding: 0; border: 0; background: none; }
.swatch-btn span:first-child { display: block; width: 40px; height: 40px; background: var(--c); border: 1px solid var(--line-strong); transition: box-shadow 200ms var(--ease-out); }
.swatch-btn[aria-pressed='true'] span:first-child { box-shadow: 0 0 0 2px var(--sail), 0 0 0 3.5px var(--ink); }
.explorer-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; }
.explorer-hint { position: absolute; right: var(--gutter); bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px)); margin: 0; font-size: 0.85rem; color: var(--ink-3); }
@media (max-width: 47.5em) {
  .explorer-bar { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 0; }
  .explorer-title span { display: none; }
  .explorer-tools { justify-content: flex-start; }
  .explorer-btn.is-close { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: var(--gutter); }
  .explorer-btn span { display: none; }
  .explorer-panel { left: 12px; right: 12px; width: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-height: 46svh; padding: 16px 18px; }
  .explorer-hint { display: none; }
}

/* ---------- Catalogue 2026 : nouveautés, signatures, visuels produits ---------- */

.tag-new {
  display: inline-block; vertical-align: middle; margin-left: 8px; padding: 1px 8px;
  border: 1px solid var(--ink); color: var(--ink);
  font-variation-settings: 'wdth' 100; font-size: 0.74rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6;
}
.product-tagline { margin: 12px 0 0; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.product-new { margin: 10px 0 0; }
.product-new .tag-new { margin-left: 0; }
.config-finish { margin: 0; display: grid; gap: 4px; font-weight: 560; }
.config-finish span { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.photo.is-product { background: var(--paper); border: 1px solid var(--line); }
.photo.is-product img { object-fit: contain; }
.product-side { display: grid; gap: 28px; align-content: start; }
.tbc { color: var(--ink-3); font-size: 0.86em; font-style: italic; }
.visit-people { color: var(--ink-2); font-size: 0.92rem; line-height: 1.7; }

.promises { padding-block: var(--section); }
.promises .h2 { max-width: 22ch; }
.promises .section-lede { margin: 16px 0 clamp(28px, 4vw, 48px); }
.promise-strip dt { color: var(--ink); font-size: 0.92rem; letter-spacing: 0; text-transform: none; font-weight: 650; font-variation-settings: 'wdth' 110; }
.promise-strip dd { font-weight: 450; color: var(--ink-2); font-size: 0.92rem; }

/* Nova Scan 3D */
.scan-visuals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.scan-hero .photo.is-scan-photo { aspect-ratio: auto; height: 100%; min-height: 320px; background: #f2efe9; border-color: transparent; }
.feature-cols.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 56px); margin-bottom: 0; }
.scan-posture { padding-block: var(--section); background: var(--sail-2); }
.scan-posture-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.scan-posture .section-lede { margin-top: 16px; }
.posture-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1.25px solid var(--ink); }
.posture-list li { display: flex; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); font-weight: 560; }
.scan-specs { padding-block: var(--section); }
.scan-specs .h2 { margin-bottom: clamp(24px, 3vw, 40px); }
.spec-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin: 0; border-top: 1.25px solid var(--ink); }
.spec-table > div { display: grid; grid-template-columns: minmax(120px, 0.6fr) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec-table dt { color: var(--ink-3); font-size: 0.92rem; }
.spec-table dd { margin: 0; font-weight: 500; }
@media (max-width: 53.75em) {
  .feature-cols.is-six { grid-template-columns: 1fr; }
  .scan-posture-grid, .spec-table { grid-template-columns: 1fr; }
  .posture-list { grid-template-columns: 1fr; }
}
@media (max-width: 35em) { .scan-visuals { grid-template-columns: 1fr; } .scan-hero .photo.is-scan-photo { min-height: 0; aspect-ratio: 3 / 4; } }

/* ---------- Nova Scan 3D : démonstration pas à pas ---------- */

.scan-live {
  --hair: color-mix(in srgb, var(--on-field) 16%, transparent);
  background: var(--field); color: var(--on-field);
  padding-block: clamp(56px, 7vw, 104px) var(--section);
  border-top: 1px solid var(--hair);
}
.scan-live :focus-visible { outline-color: var(--on-field); }
.scan-live .h2 { max-width: 17ch; }
.scan-live .section-lede { color: var(--on-field-2); margin-top: 16px; max-width: 54ch; }
.scan-live-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 4vw, 56px); }

/* La scène : papier millimétré qui s'efface vers les bords, repères de visée */
.scan-stage-inner {
  position: sticky; top: calc(var(--header-h) + 3vh); height: calc(100svh - var(--header-h) - 6vh); min-height: 460px; max-height: 900px;
  border: 1px solid var(--hair); overflow: hidden;
  background:
    radial-gradient(ellipse 46% 34% at 50% 78%, color-mix(in srgb, var(--signal-line) 14%, transparent), transparent 70%),
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 40px 40px;
  background-color: var(--field);
}
.scan-stage-inner::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 40%, var(--field) 100%);
}
.scan-live.has-3d .scan-stage-inner > canvas { animation: annot-in 700ms var(--ease-out) both; }
.scan-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-field-2); font-variant-numeric: tabular-nums; }
.hud-corner { position: absolute; width: 18px; height: 18px; border: 0 solid color-mix(in srgb, var(--on-field) 55%, transparent); }
.hud-corner.is-tl { top: 14px; left: 14px; border-top-width: 1.25px; border-left-width: 1.25px; }
.hud-corner.is-tr { top: 14px; right: 14px; border-top-width: 1.25px; border-right-width: 1.25px; }
.hud-corner.is-bl { bottom: 14px; left: 14px; border-bottom-width: 1.25px; border-left-width: 1.25px; }
.hud-corner.is-br { bottom: 14px; right: 14px; border-bottom-width: 1.25px; border-right-width: 1.25px; }
.hud-tag, .hud-count, .hud-step, .hud-ticks { position: absolute; }
.hud-tag { top: 22px; left: 42px; display: flex; align-items: center; gap: 8px; }
.hud-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-line); animation: hud-blink 1.6s ease-in-out infinite; }
@keyframes hud-blink { 50% { opacity: 0.25; } }
.hud-count { top: 22px; right: 42px; }
.hud-count b { color: var(--on-field); font-weight: 600; }
.hud-step { bottom: 22px; left: 42px; color: var(--on-field); }
.hud-ticks { bottom: 26px; right: 42px; display: flex; gap: 5px; }
.hud-ticks i { width: 18px; height: 2px; background: color-mix(in srgb, var(--on-field) 25%, transparent); transition: background-color 300ms ease; }
.hud-ticks i.is-on { background: var(--signal-line); }

/* Étiquettes des mensurations, projetées depuis la scène */
.scan-labels { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.scan-label { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 240ms var(--ease-out); }
.scan-label.is-on { opacity: 1; }
.scan-label::before { content: ''; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--signal-line); }
.scan-label > span {
  position: absolute; top: 0; left: 0; translate: 14px -50%; white-space: nowrap;
  padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--signal-line) 70%, transparent); background: color-mix(in srgb, var(--field) 82%, transparent);
  font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-field);
}
.scan-label[data-side="l"] > span { translate: calc(-100% - 14px) -50%; }

/* Les étapes */
.scan-steps { list-style: none; margin: 0; padding: 0; }
.scan-step {
  min-height: 74vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 7vh, 72px) 0;
  border-top: 1.25px solid var(--hair); transition: border-color 300ms ease;
}
.scan-step:first-child { min-height: 60vh; }
.scan-step.is-current { border-top-color: var(--signal-line); }
.scan-step h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-variation-settings: "wdth" 112; font-size: 1.25rem; }
.scan-step-n { font-size: 0.85rem; letter-spacing: 0.08em; color: var(--on-field-2); font-variant-numeric: tabular-nums; }
.scan-step p { color: var(--on-field-2); max-width: 46ch; margin: 0; }
.scan-step .scan-step-more { margin-top: 16px; }
.scan-step-more a { color: var(--on-field); }
.scan-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 20px 0 0; padding: 0; }
.scan-chips li {
  padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--on-field) 26%, transparent); font-size: 0.85rem; color: var(--on-field-2);
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.scan-chips li.is-lit { border-color: var(--signal-line); color: var(--on-field); background: color-mix(in srgb, var(--signal-line) 14%, transparent); }

/* Curseur d'objectif */
.scan-goal { margin-top: 24px; max-width: 360px; }
.scan-goal label { display: block; font-weight: 560; margin-bottom: 4px; }
.scan-goal label span { font-weight: 400; color: var(--on-field-2); }
.scan-goal input {
  --p: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: manipulation;
}
.scan-goal input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--signal-line) var(--p), color-mix(in srgb, var(--on-field) 30%, transparent) var(--p)); }
.scan-goal input::-moz-range-track { height: 2px; background: color-mix(in srgb, var(--on-field) 30%, transparent); }
.scan-goal input::-moz-range-progress { height: 2px; background: var(--signal-line); }
.scan-goal input::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 26px; margin-top: -12px; background: var(--on-field); border: 0; transition: transform 160ms var(--ease-out); }
.scan-goal input::-moz-range-thumb { width: 10px; height: 26px; background: var(--on-field); border: 0; border-radius: 0; }
.scan-goal input:active::-webkit-slider-thumb { transform: scaleY(1.12); }
.scan-goal input:focus-visible { outline: 2px solid var(--on-field); outline-offset: 2px; }
.scan-goal-scale { display: flex; justify-content: space-between; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-field-2); }
.scan-live-note { margin: clamp(24px, 3vw, 40px) 0 0; font-size: 0.85rem; color: var(--on-field-2); max-width: 70ch; }

/* Sans WebGL ou sans JavaScript : les étapes, en colonnes */
.scan-live.no-3d .scan-live-grid, :root:not(.js) .scan-live-grid { grid-template-columns: 1fr; }
.scan-live.no-3d .scan-stage, :root:not(.js) .scan-stage, .scan-live.no-3d .scan-goal, :root:not(.js) .scan-goal { display: none; }
.scan-live.no-3d .scan-steps, :root:not(.js) .scan-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: clamp(24px, 3vw, 48px); }
.scan-live.no-3d .scan-step, :root:not(.js) .scan-step { min-height: 0; justify-content: flex-start; padding-block: 24px; }

@media (prefers-reduced-motion: reduce) { .hud-tag i { animation: none; } }
@media (max-width: 56.25em) {
  .scan-live-grid { grid-template-columns: 1fr; row-gap: 0; }
  .scan-stage { position: sticky; top: var(--header-h); z-index: 2; background: var(--field); padding-bottom: 8px; }
  .scan-stage-inner { position: relative; top: 0; height: min(50svh, 440px); min-height: 300px; }
  .scan-step, .scan-step:first-child { min-height: 52svh; justify-content: flex-start; padding-block: 28px 40px; }
  .hud-corner { width: 12px; height: 12px; }
  .hud-tag, .hud-step { left: 30px; }
  .hud-count, .hud-ticks { right: 30px; }
}
@media (max-width: 56.25em) and (max-height: 35em) { .scan-stage { position: static; } }
@media (min-width: 56.3125em) { .scan-steps { padding-bottom: 14vh; } }

/* ---------- Nova Scan 3D : maquette 360° ---------- */

.scan-visuals.has-views { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.scan-view-bar { display: flex; }
.scan-view-bar[hidden] { display: none; }
.explorer-toggle.is-dark { border-color: color-mix(in srgb, var(--on-field) 45%, transparent); background: transparent; }
.explorer-toggle.is-dark button { color: var(--on-field-2); cursor: pointer; }
.explorer-toggle.is-dark button + button { border-left-color: color-mix(in srgb, var(--on-field) 30%, transparent); }
.explorer-toggle.is-dark button[aria-pressed="true"] { background: var(--on-field); color: var(--field); }
@media (hover: hover) and (pointer: fine) { .explorer-toggle.is-dark button[aria-pressed="false"]:hover { color: var(--on-field); } }
.has-views > [data-view-panel] { height: clamp(380px, 66svh, 640px); min-height: 0; }
.has-views > .photo.is-scan-photo img { object-fit: contain; }

.scan-360 { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.scan-360-stage {
  position: relative; overflow: hidden; cursor: grab;
  border: 1px solid color-mix(in srgb, var(--on-field) 16%, transparent);
  background: radial-gradient(ellipse 70% 55% at 50% 72%, color-mix(in srgb, var(--on-field) 7%, transparent), transparent 75%);
}
.scan-360-stage:active { cursor: grabbing; }
.scan-360-stage:focus-visible { outline: 2px solid var(--on-field); outline-offset: 3px; }
.scan-360-stage .r3d-canvas { opacity: 0; transition: opacity 600ms var(--ease-out); }
.scan-360-stage.is-ready .r3d-canvas { opacity: 1; }
.scan-360-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--on-field-2); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.scan-360-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.scan-360-hint { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--on-field-2); }
.scan-360-hint i { font-size: 1.1rem; flex-shrink: 0; }
.scan-360-pause {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; flex-shrink: 0;
  background: transparent; color: var(--on-field); border: 1.25px solid color-mix(in srgb, var(--on-field) 45%, transparent);
  font: inherit; font-weight: 560; font-size: 0.92rem; cursor: pointer; touch-action: manipulation;
  transition: border-color 180ms ease, transform 160ms var(--ease-out);
}
.scan-360-pause:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .scan-360-pause:hover { border-color: var(--on-field); } }
@media (prefers-reduced-motion: reduce) { .scan-360-stage .r3d-canvas { transition: none; } }
@media (max-width: 35em) { .has-views > [data-view-panel] { height: clamp(340px, 58svh, 520px); } }

/* Nova Scan 3D : photo détourée, posée directement sur le fond nuit */
.scan-hero .photo.is-scan-photo.is-cutout { background: transparent; border-color: transparent; padding: clamp(8px, 2vw, 24px); }
.scan-hero .photo.is-cutout img { object-fit: contain; }
.scan-hero .scan-visuals.has-views > [data-view-panel] { height: clamp(380px, 66svh, 640px); min-height: 0; }
@media (max-width: 35em) { .scan-hero .scan-visuals.has-views > [data-view-panel] { height: clamp(340px, 58svh, 520px); } }
.rp-guide { fill: none; stroke: var(--signal-line); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; pointer-events: none; }

/* ---------- En-tête photo de l'accueil ---------- */
.hero.hero-photo { padding: 0; overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); min-height: min(calc(100svh - var(--header-h)), 900px); }
.hero-text {
  display: flex; flex-direction: column; justify-content: center; gap: 22px; min-width: 0;
  padding: clamp(32px, 6vh, 88px) clamp(24px, 3vw, 48px) clamp(32px, 6vh, 88px) max(var(--gutter), calc((100vw - 1320px) / 2));
}
.hero-text h1 { margin: 0; font-size: clamp(2.3rem, 1rem + 2.3vw, 3.15rem); font-variation-settings: 'wdth' 112; text-wrap: balance; }
.hero-text .lede { margin: 0; max-width: 42ch; font-size: 1.0625rem; }
.hero-text .actions { margin-top: 6px; }
/* Le panneau reprend le fond de studio de la photo : elle s'y fond sans cadre ni raccord. */
.hero-visual { position: relative; margin: 0; display: grid; min-width: 0; }
.hero-stage {
  display: grid; place-items: center; overflow: hidden;
  background: var(--studio);
}
.hero-stage img {
  width: min(110%, 1040px); max-width: none; height: auto;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 50% at 50% 50%, #000 78%, transparent 100%);
}
.hero-caption {
  position: absolute; left: clamp(20px, 3vw, 40px); right: clamp(20px, 3vw, 40px); bottom: clamp(18px, 3vh, 32px);
  display: flex; justify-content: space-between; align-items: baseline; gap: 6px 24px; flex-wrap: wrap;
  padding-top: 12px; border-top: 1.25px solid var(--ink);
}
.hero-caption a { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; color: var(--ink); text-decoration: none; }
.hero-caption strong { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; text-transform: uppercase; transition: color 200ms ease; }
.hero-caption a span { color: var(--ink-2); font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) { .hero-caption a:hover strong { color: var(--signal-text); } }
.hero-caption-price { font-size: 0.92rem; color: var(--ink-3); }
@media (max-width: 61.25em) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-text { padding: clamp(28px, 6vw, 48px) var(--gutter) 28px; }
  .hero-stage { aspect-ratio: 3 / 2; }
  .hero-stage img { width: 104%; }
  .hero-caption { position: static; margin: 14px var(--gutter) 0; }
}

/* ---------- Photos produit (passe photo, octobre 2026) ---------- */

/* Photo du catalogue : la machine entière, posée sur le papier du catalogue. Les fonds d’origine varient
   de quelques tons d’une photo à l’autre : les bords de l’image sont fondus dans le cadre, sans couture. */
.shot { position: relative; margin: 0; width: 100%; background: var(--paper); border: 1px solid var(--line); overflow: hidden; }
.shot img {
  position: absolute; inset: 5%; margin: auto; width: auto; height: auto; max-width: 90%; max-height: 90%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent), linear-gradient(180deg, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
.shot.is-mini img { inset: 4%; max-width: 92%; max-height: 92%; }
.lineup-link .shot { align-self: center; max-width: 560px; }
.gallery-view .shot { border: 0; }

/* Galerie de la fiche produit */
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.gallery-main { position: relative; display: grid; overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.gallery-view { grid-area: 1 / 1; min-width: 0; min-height: 0; opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.gallery-view[data-on] { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-out), visibility 0s; }
.gallery-view > figure { width: 100%; height: 100%; margin: 0; }
.gallery-view .photo img { object-fit: cover; }
.gallery-view .photo-slot { border: 0; }
.gallery-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.gallery-caption { margin: 0; display: flex; align-items: baseline; min-width: 0; font-size: 0.92rem; color: var(--ink-2); }
.gallery-caption .num { font-weight: 600; color: var(--ink); }
.gallery-of { margin-right: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gallery-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery-thumb {
  position: relative; width: 72px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); transition: border-color 160ms ease, transform 160ms var(--ease-out);
}
.gallery-thumb img { width: 100%; height: 100%; padding: 6%; object-fit: contain; }
.gallery-thumb img.is-full { padding: 0; object-fit: cover; }
.gallery-thumb[aria-pressed='true'] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gallery-thumb:active { transform: scale(0.97); }
.gallery-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.gallery-thumb-slot {
  display: grid; place-items: center; width: 100%; height: 100%; color: var(--ink-3); font-size: 1.125rem;
  background-color: var(--sail-2);
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--line-strong) 45%, transparent) 7px 8px);
}
@media (hover: hover) and (pointer: fine) { .gallery-thumb:hover { border-color: var(--ink-3); } }
@media (prefers-reduced-motion: reduce) { .gallery-view, .gallery-view[data-on] { transition: none; } }
@media (max-width: 35em) {
  .gallery-bar { align-items: stretch; }
  .gallery-thumbs { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 3px; margin: -3px; }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumb { flex: none; width: 64px; scroll-snap-align: start; }
}

/* ---------- Pages légales, page 404 ---------- */

.legal { padding-bottom: var(--section); }
.legal-text { max-width: 68ch; border-top: 1.25px solid var(--ink); padding-top: clamp(24px, 3vw, 40px); }
.legal-text h2 { font-variation-settings: 'wdth' 110; font-size: 1.25rem; margin: 2em 0 0.6em; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text h3 { font-size: 1.0625rem; margin: 1.6em 0 0.4em; }
.legal-text p, .legal-text li { color: var(--ink-2); }
.legal-text ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 6px; }
.not-found { padding-block: clamp(48px, 10vw, 140px); }
.not-found .lede { max-width: 52ch; }
.not-found-links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 28px; }