/* 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); }
/* Cadillac et machines hybrides, sous la matrice des reformers : même liste réglée que les appareils */
.matrix-more { margin-top: clamp(40px, 5vw, 64px); }
.matrix-more-kind { display: block; margin-top: 2px; color: var(--ink-3); font-size: 0.92rem; font-weight: 450; }
.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; }
/* Trois photos verticales du Kairos Club, où se trouve le showroom ; le panneau se pose sur la troisième */
.showroom-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 0.8vw, 12px); }
.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); }
/* Partenaires business (Projet studio) : même grammaire que la mécanique des fiches, un lien sortant par partenaire */
.business { padding-block: var(--section); }
.business .section-lede { margin-top: 16px; }
.business-list { margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.business-list .tech-item { display: flex; flex-direction: column; padding-bottom: 24px; }
.business-list .link-arrow { margin-top: auto; padding-top: 14px; align-self: flex-start; }
/* Logos des partenaires business : monochromes à l'encre, posés sur une même ligne de base au-dessus des noms */
.business-logo { height: 56px; margin-bottom: 18px; display: flex; align-items: flex-end; }
.business-logo img { display: block; width: auto; height: calc(var(--h) * 1px); max-width: 100%; opacity: 0.84; }
@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 équipés : la preuve de l'en-tête, en photos (grande salle, studio, boutique), puis les noms */
.studios { padding-block: var(--section); border-block: 1px solid var(--line); }
.studios-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 16px clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.studios-head .h2 { margin: 0; max-width: 16ch; }
.studios-head .section-lede { margin: 0; max-width: 44ch; }
.studios-gallery { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 14px; margin: 0 0 clamp(24px, 3vw, 36px); padding: 0; list-style: none; }
.studio-tile { margin: 0; display: grid; gap: 10px; }
.studio-frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sail-2); }
.studio-frame img { width: 100%; height: 100%; object-fit: cover; }
.studio-tile figcaption { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; line-height: 1.1; text-transform: uppercase; }
.studios-more { margin: 0; color: var(--ink-2); max-width: 70ch; }
.studios-gallery:focus-visible { outline-offset: 6px; }
@media (max-width: 61.25em) {
  .studios-head { grid-template-columns: 1fr; }
  /* Sous 61.25em : un bandeau qui défile au doigt, une photo et demie visible */
  .studios-gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter); scroll-padding-inline: var(--gutter); }
  .studios-gallery::-webkit-scrollbar { display: none; }
  .studios-gallery > li { flex: 0 0 min(62vw, 280px); scroll-snap-align: start; }
}
}

/* ---------- 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-intro a[href^="tel:"] { white-space: nowrap; }
.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;
}
/* La question est un intertitre (lisible par les moteurs de réponse) qui garde le style du résumé */
.faq-q { font: inherit; text-wrap: pretty; }
.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; } }

/* ---------- Guide de choix ---------- */

/* Partition 5/7 de la FAQ : la question et sa réponse courte restent collées, le détail défile à côté. */
.guide { padding-block: var(--section); }
.guide.is-quiet { background: var(--sail-2); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.guide-q { position: sticky; top: calc(var(--header-h) + 32px); }
.guide-answer { margin: 20px 0 0; font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; max-width: 42ch; text-wrap: pretty; }
.guide-q .btn { margin-top: 28px; }
.guide-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.25px solid var(--ink); }
.guide-pair > div { padding: 24px 24px 8px 0; }
.guide-pair > div + div { padding-inline: 24px 0; border-left: 1px solid var(--line); }
.guide-pair-title { display: flex; align-items: center; gap: 10px; font-variation-settings: 'wdth' 110; font-size: 1.25rem; }
.guide-pair ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.guide-pair li { position: relative; padding-left: 20px; color: var(--ink-2); max-width: 46ch; }
.guide-pair li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1.25px; background: var(--ink); }
.guide-block { margin-top: clamp(40px, 5vw, 64px); }
.guide-block.is-first { margin-top: 0; }
.guide-block-title { font-variation-settings: 'wdth' 110; font-size: 1.25rem; margin-bottom: 16px; }
.guide-table { width: 100%; border-collapse: collapse; border-top: 1.25px solid var(--ink); font-size: 0.92rem; }
.guide-table th, .guide-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--line); }
.guide-table thead th { padding-block: 12px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--line-strong); white-space: nowrap; }
.guide-table thead .swatch { width: 10px; height: 10px; vertical-align: 0; }
.guide-table tbody th { font-weight: 500; }
.guide-table .num { font-size: 1.125rem; }
.guide-model { font-variation-settings: var(--cond); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.04em; line-height: 1.5; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .guide-model:hover { color: var(--signal-text); text-decoration: underline; text-underline-offset: 3px; } }
.guide-aside { color: var(--ink-3); font-size: 0.85rem; }
.guide-sub { display: block; margin-top: 2px; white-space: nowrap; color: var(--ink-3); font-size: 0.85rem; font-weight: 400; }
.guide-sub .swatch { width: 10px; height: 10px; vertical-align: 0; margin-right: 2px; }
.guide-note { margin: 16px 0 0; color: var(--ink-3); font-size: 0.92rem; max-width: 62ch; }
.guide-links { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
/* Définitions : liste réglée en trois colonnes, filets verticaux clairs, photo du catalogue sur son papier */
.guide-defs { list-style: none; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.25px solid var(--ink); }
.guide-def { padding: 28px 28px 8px; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.guide-def:first-child { padding-left: 0; border-left: 0; }
.guide-def:last-child { padding-right: 0; }
.guide-def .shot { margin-bottom: 22px; }
.guide-def-q { font-variation-settings: 'wdth' 110; font-size: 1.25rem; text-wrap: balance; }
.guide-def > p:not(.guide-links) { margin: 12px 0 0; color: var(--ink-2); max-width: 46ch; }
.guide-def .guide-links { margin-top: auto; padding-top: 20px; }
.product-learn { margin: 20px 0 0; }
@media (max-width: 60em) {
  .guide-defs { grid-template-columns: 1fr; }
  .guide-def, .guide-def:first-child { padding: 28px 0 24px; border-left: 0; }
  .guide-def + .guide-def { border-top: 1px solid var(--line); }
  .guide-def { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: clamp(20px, 4vw, 40px); align-items: start; }
  .guide-def .shot { grid-row: 1 / span 3; margin: 0; }
  .guide-def-q, .guide-def > p { grid-column: 2; }
  .guide-def .guide-links { margin-top: 0; }
}
@media (max-width: 40em) {
  .guide-def { display: flex; }
  .guide-def .shot { margin-bottom: 18px; }
}
.guide-draft { margin-top: 24px; max-width: 62ch; padding: 12px 16px; border: 1px dashed var(--ink-3); color: var(--ink-2); font-size: 0.92rem; }
@media (max-width: 53.75em) { .guide-grid { grid-template-columns: 1fr; } .guide-q { position: static; } }
@media (max-width: 40em) {
  .guide-pair { grid-template-columns: 1fr; }
  .guide-pair > div + div { padding-inline: 0; border-left: 0; border-top: 1px solid var(--line); }
  .guide-table th, .guide-table td { padding-right: 10px; }
  .guide-table thead th { white-space: normal; letter-spacing: 0.06em; }
}
@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; }
/* Texte agrandi sur petit écran : le libellé passe à la ligne plutôt que de sortir de l'écran */
@media (max-width: 35em) { .btn { max-width: 100%; } .btn > span:not(.btn-icon) { min-width: 0; white-space: normal; text-wrap: balance; } }
.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; } }

/* ---------- Signature de marque et page À propos (message du client, 20/10/2026) ---------- */

/* Trois phrases, une par ligne : accueil (section des engagements) et page À propos */
.signature-lines > span { display: block; }
.promises .h2:has(.signature-lines) { max-width: 32ch; }
.promises-more { margin-top: 28px; }
.footer-signature { color: var(--on-field); font-weight: 560; }
.footer-brand .footer-signature + p { margin-top: 10px; }

.about-intro .display.is-page { max-width: 24ch; }
.about-belief { padding-bottom: var(--section); }

/* Fondateurs : deux colonnes réglées ; portrait 4/5 à côté du nom (condensé, comme les noms de modèles) */
.about-founders-section { padding-block: var(--section); background: var(--sail-2); }
/* La photo des deux fondateurs (5) reste collée sous l'en-tête pendant que leurs deux fiches défilent à côté (7) */
.about-founders-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.about-founders-photo { margin: 0; position: sticky; top: calc(var(--header-h) + 32px); }
.about-founders-photo figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-3); }
.about-founders { border-top: 1.25px solid var(--ink); }
.founder { padding: clamp(24px, 3vw, 36px) 0 clamp(20px, 2.5vw, 28px); }
.founder + .founder { border-top: 1px solid var(--line); }
.founder-head { margin-bottom: 8px; }
.founder-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; text-transform: uppercase; }
.founder-role { margin: 10px 0 0; font-variation-settings: 'wdth' 108; font-weight: 600; font-size: 1.125rem; line-height: 1.3; text-wrap: balance; }
.founder-tel { margin-top: 14px; }
.founder-bio { margin: 14px 0 0; color: var(--ink-2); max-width: 58ch; }
.founder .about-proofs { margin-bottom: 8px; }

/* Deux expertises : texte en 5/7, critères de choix en liste réglée 3 × 2 */
.about-sourcing { padding-block: var(--section); }
.about-sourcing-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about-sourcing .section-lede { margin-top: 16px; }
.about-sourcing-text { margin: 0; color: var(--ink-2); max-width: 58ch; }
.about-criteria { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.25px solid var(--ink); }
.about-criteria li { padding: 16px 16px 18px 0; border-bottom: 1px solid var(--line); font-variation-settings: 'wdth' 110; font-weight: 600; font-size: 1.125rem; line-height: 1.25; }
.about-criteria li:not(:nth-child(3n + 1)) { padding-left: 16px; border-left: 1px solid var(--line); }
.about-pillars-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about-pillars-head .section-lede { margin: 0; }
.about-pillars-text { margin: 14px 0 0; color: var(--ink-2); max-width: 58ch; }
.about-belief-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); padding-top: 28px; border-top: 1.25px solid var(--ink); }
.about-belief-lead { margin: 0; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); line-height: 1.5; max-width: 40ch; }
.about-belief-text { margin: 0; color: var(--ink-2); max-width: 46ch; }

.about-pillars { padding-block: var(--section); background: var(--sail-2); }
.about-pillar-list { list-style: none; margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; border-top: 1.25px solid var(--ink); }
.about-pillar { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-block: clamp(28px, 4vw, 48px); }
.about-pillar + .about-pillar { border-top: 1px solid var(--line); }
.about-pillar-copy h3 { display: flex; align-items: center; gap: 12px; font-variation-settings: 'wdth' 110; font-size: 1.25rem; text-wrap: balance; }
.about-pillar-copy h3 .legend-n { width: 26px; height: 26px; }
.about-pillar-copy > p { margin: 14px 0 0; color: var(--ink-2); max-width: 54ch; }
.about-proofs { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.about-proofs li { position: relative; padding-left: 20px; font-size: 0.92rem; color: var(--ink-2); max-width: 58ch; }
.about-proofs li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1.25px; background: var(--ink); }

.about-difference { padding-block: var(--section); }
.about-difference-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.about-difference-copy .section-lede { margin: 16px 0 0; }
.about-difference-copy > p:not(.section-lede) { margin: 16px 0 0; color: var(--ink-2); max-width: 58ch; }
.spec-strip.about-figures { grid-template-columns: 1fr 1fr; margin-top: 32px; }
.spec-strip.about-figures > div { padding: 18px 16px 20px 0; border-left: 0 !important; border-top: 1px solid var(--line); }
.spec-strip.about-figures > div:nth-child(-n + 2) { border-top: 0; }
.spec-strip.about-figures > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line) !important; }
.about-figures .num { font-size: 1.125rem; }
.about-difference-photo { margin: 0; }
.about-difference-photo figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-3); }

.about-signature { padding-block: var(--section); background: var(--sail-2); }
.about-signature-title { font-variation-settings: var(--wide); font-weight: 600; font-size: clamp(1.9rem, 1rem + 2.4vw, 3.2rem); line-height: 1.06; letter-spacing: -0.025em; }
.about-signature-promise { margin: clamp(20px, 3vw, 32px) 0 0; font-size: clamp(1.06rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--ink-2); max-width: 52ch; }
.page-about .partners { border-top: 1px solid var(--line); }

@media (max-width: 53.75em) {
  .about-belief-grid, .about-pillar, .about-difference-grid, .about-sourcing-grid, .about-pillars-head, .about-founders-grid { grid-template-columns: 1fr; }
  .about-founders-photo { position: static; max-width: 480px; }
  .about-pillar-media { max-width: 560px; }
  .about-difference-photo { max-width: 480px; }
}
@media (max-width: 35em) {
  .about-criteria { grid-template-columns: 1fr 1fr; }
  .about-criteria li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .about-criteria li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
}

/* ---------- 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; }
.page-intro-note { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; color: var(--ink-2); }
.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); }
/* Cadillac et machines hybrides : second groupe de la gamme, sous les huit reformers */
.lineup-group { margin-top: clamp(40px, 5vw, 64px); }
.lineup-group[hidden] { display: none; }
.lineup-subhead { padding-bottom: 14px; border-bottom: 1.25px solid var(--ink); font-size: 1.25rem; font-weight: 620; letter-spacing: -0.01em; }
@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; }
/* Sept caractéristiques (HÉRO, avec son nombre de ressorts) : une colonne de plus sur grand écran */
.spec-strip:has(> :nth-child(7)) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 60em) {
  .spec-strip, .spec-strip:has(> :nth-child(7)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-strip > div:nth-child(3n + 1) { 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, .spec-strip:has(> :nth-child(7)) { 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); } }
/* Quatre blocs (avec les roulements japonais) : 2 × 2 aux largeurs intermédiaires, jamais trois plus un orphelin */
@media (min-width: 47.51em) and (max-width: 75em) {
  .tech-list:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tech-list:has(> :nth-child(4)) > :nth-child(3) { padding-left: 0; border-left: 0; }
  .tech-list:has(> :nth-child(4)) > :nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (min-width: 75.01em) { .tech-list:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.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-venue { font-weight: 600; color: var(--ink-2); }
.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, .guide-model, .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); }

/* 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-studio-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; color: var(--ink-2); font-size: 0.92rem; }
.explorer-studio-note[hidden] { display: none; }
.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-four { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: clamp(32px, 4vw, 56px); margin-bottom: 0; }
@media (max-width: 75em) { .feature-cols.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.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; }
.spec-table dt, .spec-table dd { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 35em) { .spec-table > div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
@media (max-width: 53.75em) {
  .feature-cols.is-four { 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 : 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 de l'accueil : un studio équipé, à fond perdu ---------- */
/* La photo occupe tout l'en-tête ; un voile d'encre monte du coin bas gauche, là où se pose la phrase-manifeste.
   Sous 47.5em, la photo garde la phrase et les détails passent dessous, sur le champ d'encre. */
.hero.hero-studio {
  position: relative; padding: 0; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto auto; min-height: clamp(560px, calc(100svh - var(--header-h)), 940px);
  background: var(--field); color: var(--on-field);
}
.hero-scene { grid-row: 1 / -1; grid-column: 1; position: relative; margin: 0; overflow: hidden; }
.hero-scene img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 58% 55%;
  animation: hero-settle 1800ms var(--ease-out) both;
}
.hero-scene::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    /* Paliers calés aussi en pixels sur la colonne de texte (chapeau ≈ 500px) : sur tablette, la vidéo fait passer
       des fonds crème sous le texte ; le voile le couvre toujours (≥ 4,5:1 mesuré image par image). */
    linear-gradient(90deg, rgb(11 11 11 / 0.8) 0%, rgb(11 11 11 / 0.68) max(30%, 520px), rgb(11 11 11 / 0.44) max(50%, 640px), rgb(11 11 11 / 0.12) max(66%, 760px), rgb(11 11 11 / 0) max(80%, 860px)),
    linear-gradient(0deg, rgb(11 11 11 / 0.5) 0%, rgb(11 11 11 / 0) 24%);
}
.hero-scene-caption {
  position: absolute; z-index: 1; right: var(--gutter); bottom: clamp(18px, 3vh, 32px);
  display: flex; align-items: center; gap: 14px;
  font-size: 0.85rem; color: var(--on-field);
}
/* Pastille d'encre sous la légende : la vidéo fait passer des fonds crème sous ce coin, sans voile (contraste ≥ 4,5:1) */
.hero-scene-caption > span { padding: 4px 8px; background: rgb(11 11 11 / 0.74); }
/* La vidéo des studios se pose sur la photo quand elle joue vraiment (fondu), sous le voile d'encre */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 450ms var(--ease-out);
}
.hero-scene.is-video .hero-video { opacity: 1; }
.hero-video-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; flex-shrink: 0;
  background: rgb(11 11 11 / 0.55); color: var(--on-field); border: 1.25px solid color-mix(in srgb, var(--on-field) 45%, transparent);
  font: inherit; font-weight: 560; cursor: pointer; touch-action: manipulation;
  transition: border-color 180ms ease, transform 160ms var(--ease-out);
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .hero-video-toggle:hover { border-color: var(--on-field); } }
@media (prefers-reduced-motion: reduce) { .hero-video { transition: none; } }
.hero-head { grid-row: 2; grid-column: 1; position: relative; z-index: 1; padding-top: clamp(32px, 6vh, 64px); }
.hero-details {
  grid-row: 3; grid-column: 1; position: relative; z-index: 1;
  display: grid; justify-items: start; gap: 22px; padding: 26px 0 clamp(40px, 8vh, 88px);
}
.hero-statement {
  /* Titre de 63 signes (20/10/2026) : colonne de 14,5ch, soit moins de 620px sur ordinateur, là où le voile garantit 3:1 */
  margin: 0; max-width: 14.5ch; color: var(--on-field);
  font-size: clamp(2.4rem, 0.9rem + 3vw, 3.7rem); font-weight: 620; line-height: 0.98; letter-spacing: -0.03em;
  font-variation-settings: 'wdth' 118; text-wrap: balance;
  animation: hero-rise 900ms var(--ease-out) 120ms both;
}
.hero-proof {
  display: block; margin-top: 0.4em; max-width: 36ch;
  font-size: 0.5em; font-weight: 450; line-height: 1.15; letter-spacing: -0.01em; font-variation-settings: 'wdth' 106;
  color: var(--on-field);
}
.hero-proof .num { font-weight: 650; font-variation-settings: 'wdth' 106; font-variant-numeric: tabular-nums lining-nums; }
.hero-details .lede { margin: 0; max-width: 46ch; color: var(--on-field); font-size: 1.0625rem; animation: hero-rise 900ms var(--ease-out) 260ms both; }
.hero-details .actions { animation: hero-rise 900ms var(--ease-out) 340ms both; }
.hero-plan { color: var(--on-field); animation: hero-rise 900ms var(--ease-out) 420ms both; }
.hero-studio :focus-visible { outline-color: var(--on-field); }
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 47.5em) {
  .hero.hero-studio { grid-template-rows: auto auto; min-height: 0; }
  .hero-scene { grid-row: 1; aspect-ratio: 4 / 5; max-height: 74svh; width: 100%; }
  .hero-scene img { object-position: 68% 60%; }
  /* Voile plus haut depuis « en 2026 » (preuve sur deux lignes, titre remonté) : titre ≥ 4,2:1 sur chaque image de la vidéo */
  .hero-scene::after { background: linear-gradient(0deg, rgb(11 11 11 / 0.86) 0%, rgb(11 11 11 / 0.62) 34%, rgb(11 11 11 / 0.5) 56%, rgb(11 11 11 / 0) 80%); }
  .hero-scene-caption { top: 14px; bottom: auto; right: var(--gutter); flex-direction: column; align-items: flex-end; gap: 8px; }
  .hero-head { grid-row: 1; align-self: end; padding: 0 0 22px; }
  .hero-statement { font-size: clamp(2rem, 0.9rem + 5.4vw, 3rem); }
  .hero-proof { font-size: 0.6em; }
  .hero-details { grid-row: 2; padding: 22px 0 36px; }
  .hero-details .actions { width: 100%; }
}

/* ---------- Grands comptes partenaires, sous l'en-tête de l'accueil ---------- */
/* Un bandeau réglé : libellé discret à gauche, logos monochromes à l'encre (même teinte pour tous, comme une liste
   du catalogue), hauteur réglée logo par logo (--h, en px) pour un poids visuel égal. */
.partners { padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); background: var(--sail); }
.partners-inner { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: center; gap: 22px clamp(24px, 4vw, 64px); }
.partners-title { margin: 0; max-width: 14ch; color: var(--ink-3); font-size: 0.92rem; font-weight: 560; line-height: 1.3; }
.partners-list { --logo-k: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px clamp(28px, 4vw, 56px); margin: 0; padding: 0; list-style: none; }
.partners-list img { display: block; width: auto; height: calc(var(--h) * var(--logo-k) * 1px); max-width: 100%; opacity: 0.84; }
/* un grand compte qui a un site : son logo y mène */
.partners-list a { display: block; }
@media (hover: hover) and (pointer: fine) { .partners-list a:hover img { opacity: 1; } }
@media (max-width: 64em) { .partners-inner { grid-template-columns: minmax(0, 1fr); } .partners-title { max-width: none; } }
@media (max-width: 47.5em) {
  .partners-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .partners-title { max-width: none; }
  .partners-list { --logo-k: 0.78; justify-content: center; gap: 24px 30px; }
}

/* ---------- 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); }
/* un numéro en image (non relevé par les robots), à la taille du texte courant */
.legal-inline-img { display: inline-block; width: auto; height: 1.65em; vertical-align: -0.58em; }
.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; }

/* ---------- Nova Scan 3D : simulateur de rentabilité ---------- */
/* À gauche les quatre saisies, à droite le calcul posé comme une fiche : lignes réglées, chiffres condensés,
   le délai final en bronze (le seul chiffre sous tension). */
.scan-sim, .studio-sim { padding-block: var(--section); background: var(--sail-2); }
/* Projet studio : le plan de salle peut remplir le simulateur */
.sim-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; padding: 12px 14px; border: 1.25px solid var(--ink); background: var(--sail); }
.sim-plan[hidden] { display: none; }
.sim-plan p { margin: 0; }
.studio-sim .select { max-width: 340px; }
.sim-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.sim-copy .h2 { max-width: 16ch; }
.sim-copy .section-lede { margin: 18px 0 clamp(24px, 3vw, 36px); max-width: 48ch; }
.sim-fields { display: grid; gap: 22px; padding-top: 24px; border-top: 1.25px solid var(--ink); }
.sim-field label { display: block; margin-bottom: 8px; font-weight: 560; }
.sim-input { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sim-unit { font-size: 0.92rem; color: var(--ink-3); }
.sim-help { margin: 8px 0 0; max-width: 44ch; font-size: 0.85rem; color: var(--ink-3); }
.scan-sim .stepper, .studio-sim .stepper { background: var(--sail); }
.stepper.is-wide { grid-template-columns: 48px 96px 48px; }
.sim-sheet { position: sticky; top: calc(var(--header-h) + 24px); }
.sim-ledger { margin: 0; border-top: 1.25px solid var(--ink); }
.sim-ledger > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.sim-ledger dt { color: var(--ink-2); }
.sim-ledger dd { margin: 0; text-align: right; white-space: nowrap; }
.sim-ledger output { font-size: 1.25rem; }
.sim-tax { font-size: 0.85rem; color: var(--ink-3); }
.sim-ledger > .sim-result { flex-wrap: wrap; padding-top: 22px; border-bottom: 1.25px solid var(--ink); }
.sim-result dt { font-weight: 600; color: var(--ink); }
.sim-result dd { white-space: normal; }
.sim-result output { font-size: clamp(2rem, 1.2rem + 1.4vw, 2.7rem); font-weight: 700; line-height: 1; font-variant-numeric: lining-nums proportional-nums; color: var(--signal-text); }
.sim-note { margin: 14px 0 0; max-width: 60ch; font-size: 0.85rem; color: var(--ink-3); }
:root:not(.js) .sim-fields { display: none; }
@media (max-width: 61.25em) {
  .sim-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-sheet { position: static; }
  /* Pendant la saisie, le délai reste lisible en bas de l’écran (collé au bas de la colonne des saisies) */
  .sim-echo {
    position: sticky; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin: 24px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: var(--field); color: var(--on-field);
  }
  .sim-echo span { font-size: 0.92rem; color: var(--on-field-2); }
  .sim-echo b { font-size: 1.25rem; font-weight: 700; color: var(--on-field); }
}
.sim-echo { display: none; }
@media (max-width: 61.25em) { :root.js .sim-echo { display: flex; } }

/* ---------- Texte très agrandi ---------- */
/* Les requêtes en em suivent la taille de texte du navigateur : 22em vaut 352 px à la taille normale (petits
   téléphones) et 704 px quand le texte est agrandi à 200 %. Les longs mots passent à la ligne, les bandeaux de
   caractéristiques se replient sur une colonne, rien ne sort de l'écran. */
@media (max-width: 22em) {
  body { overflow-wrap: anywhere; hyphens: auto; }
  .price, .sim-ledger dd { white-space: normal; }
  .spec-strip, .spec-strip:has(> :nth-child(7)) { grid-template-columns: minmax(0, 1fr); }
  .spec-strip > div, .spec-strip > div:nth-child(n) { padding-left: 0; border-left: 0 !important; border-top: 1px solid var(--line); }
  .spec-strip > div:first-child { border-top: 0; }
  .sim-ledger > div { flex-wrap: wrap; }
  .sim-ledger dd { text-align: left; }
  .beyond-list li a { grid-template-columns: minmax(0, 1fr) 20px; }
  .beyond-row-price { grid-column: 1; }
}