/* ==========================================================================
   GRAVE & DÉCOUPE — Design system
   Atelier nocturne : graphite chaud, une seule couleur de signal (le faisceau),
   plaque couleur bois pour la matière. Voir DESIGN.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonte auto-hébergée (aucune requête tierce — contrainte RGPD)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-normal-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;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Repli sRGB */
  --bg: #0e0d0c;          --bg-2: #141311;
  --surface: #1a1917;     --surface-2: #22211e;   --surface-3: #2b2a26;
  --line: #34322e;        --line-soft: #26241f;   --line-strong: #4a4740;
  --ink: #f5f2ec;         --ink-2: #c9c4ba;       --muted: #9a948a;
  --laser: #ff6b2b;       --laser-ink: #1a0c04;   --laser-soft: #ff8a55;
  --plate: #d9b98c;       --plate-2: #b8925f;     --plate-dark: #6b4f2e;
  --studio: #f3f1ed;
  --ok: #8fd18a;          --ko: #f28b74;
}
@supports (color: oklch(0.5 0.1 50)) {
  :root {
    --bg: oklch(0.155 0.004 70);
    --bg-2: oklch(0.18 0.004 70);
    --surface: oklch(0.205 0.005 70);
    --surface-2: oklch(0.235 0.006 70);
    --surface-3: oklch(0.275 0.007 70);
    --line: oklch(0.32 0.008 70);
    --line-soft: oklch(0.26 0.007 70);
    --line-strong: oklch(0.42 0.01 70);
    --ink: oklch(0.965 0.006 80);
    --ink-2: oklch(0.83 0.012 80);
    --muted: oklch(0.69 0.014 75);
    --laser: oklch(0.71 0.19 43);
    --laser-soft: oklch(0.77 0.15 45);
    --laser-ink: oklch(0.18 0.04 45);
    --plate: oklch(0.8 0.07 75);
    --plate-2: oklch(0.68 0.09 70);
    --plate-dark: oklch(0.45 0.07 65);
    --studio: oklch(0.96 0.004 80);
    --ok: oklch(0.8 0.12 145);
    --ko: oklch(0.75 0.13 35);
  }
}

:root {
  --laser-rgb: 255 107 43;
  --bg-rgb: 14 13 12;

  --font: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --step--2: clamp(0.74rem, 0.72rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.86rem, 0.83rem + 0.12vw, 0.93rem);
  --step-0: clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1: clamp(1.2rem, 1.13rem + 0.34vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.36rem + 0.7vw, 1.95rem);
  --step-3: clamp(1.9rem, 1.62rem + 1.4vw, 2.85rem);
  --step-4: clamp(2.35rem, 1.85rem + 2.5vw, 4rem);
  --step-5: clamp(2.6rem, 1.8rem + 4vw, 5.4rem);

  --sp-3xs: 0.25rem; --sp-2xs: 0.5rem; --sp-xs: 0.75rem; --sp-s: 1rem;
  --sp-m: 1.5rem; --sp-l: 2.25rem; --sp-xl: 3.5rem;
  --sp-2xl: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wrap: 1240px;
  --wrap-narrow: 740px;
  --radius-s: 10px;
  --radius: 16px;
  --radius-l: 24px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 20px 40px -24px rgb(0 0 0 / 0.7);

  color-scheme: dark;
  accent-color: var(--laser);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
/* Trame de plateau laser, très discrète, en fondu vers le bas */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 0%, #000 20%, transparent 75%);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

a { color: var(--ink); text-decoration-color: rgb(var(--laser-rgb) / 0.55); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); }
a:hover { color: var(--laser-soft); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--laser); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-stretch: 112%;
}
h1 { font-size: var(--step-4); font-weight: 750; letter-spacing: -0.035em; }
h2 { font-size: var(--step-3); letter-spacing: -0.03em; }
h3 { font-size: var(--step-1); letter-spacing: -0.015em; }
p { text-wrap: pretty; }

.i { width: 1.1em; height: 1.1em; flex: none; }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-s); top: -4rem; z-index: 999; padding: 0.7rem 1rem; background: var(--laser); color: var(--laser-ink); font-weight: 700; border-radius: var(--radius-s); text-decoration: none; }
.skip-link:focus { top: var(--sp-s); }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gutter), var(--wrap-narrow)); }
.section { padding-block: var(--sp-2xl); }
.section--tight { padding-block: var(--sp-xl); }
.section + .section { padding-top: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--laser-soft);
}
.eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--laser); box-shadow: 0 0 0 4px rgb(var(--laser-rgb) / 0.18), 0 0 14px rgb(var(--laser-rgb) / 0.8); }
.section-head { display: grid; gap: var(--sp-xs); margin-bottom: var(--sp-l); max-width: 46rem; }
.section-head p:not(.eyebrow) { color: var(--ink-2); }
.section-head--row { max-width: none; grid-template-columns: 1fr auto; align-items: end; }
@media (max-width: 40rem) { .section-head--row { grid-template-columns: 1fr; justify-items: start; } }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-2); max-width: 44rem; }
.text-muted { color: var(--muted); }
.small { font-size: var(--step--1); }
.stack-s > * + * { margin-top: var(--sp-xs); }
.stack-m > * + * { margin-top: var(--sp-m); }

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --h: 3rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  min-height: var(--h); padding: 0 1.25rem;
  border-radius: 999px; border: 1px solid transparent;
  font-weight: 650; font-size: var(--step--1); letter-spacing: 0; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--sm { --h: 2.75rem; padding: 0 1rem; }
.btn--laser {
  background: var(--laser); color: var(--laser-ink);
  box-shadow: 0 0 0 0 rgb(var(--laser-rgb) / 0), 0 10px 30px -12px rgb(var(--laser-rgb) / 0.8);
}
.btn--laser:hover { color: var(--laser-ink); background: var(--laser-soft); box-shadow: 0 0 0 5px rgb(var(--laser-rgb) / 0.16), 0 12px 34px -10px rgb(var(--laser-rgb) / 0.9); }
.btn--ghost { background: rgb(255 255 255 / 0.03); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink-2); background: rgb(255 255 255 / 0.07); }
.btn .i { width: 1em; height: 1em; transition: transform var(--dur) var(--ease); }
.btn:hover .i { transform: translateX(2px); }
.flow-actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }

/* --------------------------------------------------------------------------
   5. En-tête
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
/* Le fond flouté vit sur un calque à part : un backdrop-filter posé sur
   .header en ferait le bloc conteneur du menu mobile (position: fixed),
   qui se retrouverait enfermé dans les 73 px de l'en-tête, sans fond. */
.header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgb(var(--bg-rgb) / 0.78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.header[data-scrolled='true']::before, .header:has(.nav[data-open='true'])::before { opacity: 1; }
.header[data-scrolled='true'], .header:has(.nav[data-open='true']) { border-bottom-color: var(--line-soft); }
.header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m); min-height: 4.5rem; }
.logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink); text-decoration: none; font-weight: 750; font-stretch: 118%; letter-spacing: -0.03em; font-size: 1.12rem; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo__mark { width: 30px; height: 30px; transition: transform var(--dur-slow) var(--ease-out); }
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.05); }
.logo__amp { color: var(--laser); font-weight: 600; }

.burger { display: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.burger .i { width: 22px; height: 22px; }
.burger .i + .i, .burger[aria-expanded='true'] .i:first-of-type { display: none; }
.burger[aria-expanded='true'] .i + .i { display: block; }

.nav { display: flex; align-items: center; gap: var(--sp-m); }
.nav__list { display: flex; gap: 0.25rem; list-style: none; padding: 0; }
.nav__link { display: inline-flex; align-items: center; white-space: nowrap; min-height: 44px; padding: 0 0.85rem; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-size: var(--step--1); font-weight: 550; transition: color var(--dur-fast), background-color var(--dur-fast); }
.nav__link:hover { color: var(--ink); background: rgb(255 255 255 / 0.05); }
.nav__link[aria-current='page'] { color: var(--ink); background: rgb(255 255 255 / 0.07); }

@media (max-width: 71.99rem) {
  .has-js .burger { display: grid; }
  .has-js .nav {
    position: fixed; inset: 4.5rem 0 0 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
    flex-direction: column; align-items: stretch; gap: var(--sp-m);
    padding: var(--sp-m) var(--gutter) var(--sp-xl);
    background: var(--bg); border-top: 1px solid var(--line-soft);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .has-js .nav[data-open='true'] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__list { flex-direction: column; }
  .nav__link { font-size: var(--step-2); font-weight: 700; font-stretch: 112%; padding: 0.4rem 0; border-radius: 0; letter-spacing: -0.02em; }
  .nav__link:hover, .nav__link[aria-current='page'] { background: none; color: var(--laser-soft); }
  .nav__cta { align-self: flex-start; }
  html:not(.has-js) .nav { flex-wrap: wrap; }
  html:not(.has-js) .header__bar { flex-wrap: wrap; padding-block: var(--sp-xs); }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { position: relative; overflow-x: clip; padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) var(--sp-2xl); isolation: isolate; }
.hero::after {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 60vmax; height: 60vmax; right: -18vmax; top: -30vmax;
  background: radial-gradient(circle, rgb(var(--laser-rgb) / 0.2), transparent 62%);
  filter: blur(10px);
}
.hero__grid { display: grid; gap: var(--sp-xl); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
.hero__title { font-size: var(--step-5); font-weight: 800; font-stretch: 118%; letter-spacing: -0.045em; line-height: 0.98; max-width: 13ch; }
.hero__title em { font-style: normal; color: var(--laser); text-shadow: 0 0 40px rgb(var(--laser-rgb) / 0.45); }
.hero__copy { display: grid; gap: var(--sp-m); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.hero__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: var(--sp-m) var(--sp-l); margin-top: var(--sp-s); padding-top: var(--sp-m); border-top: 1px solid var(--line-soft); }
.hero__stats div { display: grid; gap: 0.1rem; }
.hero__stats dt { order: 2; font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--mono); }
.hero__stats dd { order: 1; font-size: var(--step-2); font-weight: 750; font-stretch: 112%; letter-spacing: -0.03em; }

.hero__art { position: relative; aspect-ratio: 5 / 4; border-radius: var(--radius-l); border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, var(--surface-2), var(--bg-2)); overflow: hidden; box-shadow: var(--shadow); }
.hero__art svg { width: 100%; height: 100%; }
.hero__art .ha-grid { stroke: rgb(255 255 255 / 0.05); stroke-width: 1; }
.hero__art .ha-plate { fill: var(--plate); }
.hero__art .ha-grain { fill: none; stroke: var(--plate-2); stroke-width: 1.2; opacity: 0.55; }
.hero__art .ha-rail { stroke: var(--line-strong); stroke-width: 10; stroke-linecap: round; }
.hero__art .ha-rail-hi { stroke: rgb(255 255 255 / 0.12); stroke-width: 2; }
.hero__art .ha-gantry { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1.5; }
.hero__art .ha-head { fill: var(--ink); }
.hero__art .ha-head-win { fill: var(--laser); opacity: 0.85; }
.hero__art .ha-burn { fill: none; stroke: var(--plate-dark); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero__art .ha-glow { fill: url(#haGlow); }
.hero__art .ha-spot { fill: #fff; }
.hero__art .ha-beam { stroke: var(--laser); stroke-width: 2.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgb(var(--laser-rgb) / 0.9)); }
.hero__art .ha-smoke { fill: rgb(255 255 255 / 0.18); }
.hero__art .ha-label { font-family: var(--mono); font-size: 11px; fill: var(--muted); letter-spacing: 0.08em; }
.hero__art .ha-val { font-family: var(--mono); font-size: 13px; fill: var(--ink); }
.hero__art .ha-hud { fill: rgb(var(--bg-rgb) / 0.72); stroke: var(--line); }
.hero__art .ha-dot { fill: var(--laser); }

@media (max-width: 63.99rem) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 36rem; }
}
@media (max-width: 40rem) {
  .hero__stats { grid-template-columns: repeat(2, auto); }
}

/* --------------------------------------------------------------------------
   7. Cartes, bento, spotlight
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow);
  isolation: isolate;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Halo qui suit le pointeur (variables posées par site.js) */
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -30%), rgb(var(--laser-rgb) / 0.11), transparent 60%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: var(--line); }
.card--link:hover { transform: translateY(-2px); }
/* Toute la carte cliquable, le lien reste le seul élément focalisable */
.card--link .stretched::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card--link .btn, .card--link .card__actions { position: relative; z-index: 2; }

.bento { display: grid; gap: var(--sp-s); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bento > * { grid-column: span 2; min-width: 0; }
.bento > .span-3 { grid-column: span 3; }
.bento > .span-4 { grid-column: span 4; }
.bento > .span-6 { grid-column: span 6; }
.bento > .row-2 { grid-row: span 2; }
@media (max-width: 63.99rem) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > * { grid-column: span 1; }
  .bento > .span-4, .bento > .span-6 { grid-column: span 2; }
  .bento > .pick--row { grid-column: span 2; }
  .bento > .row-2 { grid-row: auto; }
}
@media (max-width: 40rem) {
  .bento { grid-template-columns: 1fr; }
  .bento > *, .bento > .span-3, .bento > .span-4, .bento > .span-6 { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   8. Visuels machines
   -------------------------------------------------------------------------- */
.visual { position: relative; display: grid; place-items: center; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: radial-gradient(90% 90% at 50% 20%, var(--surface-3), var(--surface)); border: 1px solid var(--line-soft); }
.visual--photo { background: radial-gradient(100% 80% at 50% 30%, #fff, var(--studio)); border-color: transparent; }
.visual--photo img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .visual--photo img { transform: scale(1.04); }
.visual--sm { aspect-ratio: 1; border-radius: var(--radius-s); }
.visual--sm img { width: 90%; height: 90%; }
.visual--xl { aspect-ratio: 1; border-radius: var(--radius-l); }
.machine { width: 100%; height: 100%; }
.m-body { fill: var(--surface-3); stroke: var(--line-strong); stroke-width: 1.5; }
.m-lid { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.5; }
.m-window { fill: rgb(var(--laser-rgb) / 0.2); stroke: rgb(var(--laser-rgb) / 0.55); stroke-width: 1.2; }
.visual--co2 .m-window { fill: rgb(255 255 255 / 0.08); stroke: var(--line-strong); }
.m-rail, .m-railside { stroke: var(--line-strong); stroke-width: 5; stroke-linecap: round; }
.m-frame { stroke: var(--ink-2); stroke-width: 6; stroke-linecap: round; opacity: 0.7; }
.m-head { fill: var(--ink); }
.m-head--galvo { fill: var(--surface-3); stroke: var(--ink-2); stroke-width: 1.5; }
.m-seam { stroke: var(--line); stroke-width: 1; }
.m-slot { fill: var(--bg); }
.m-led { fill: var(--laser); }
.m-foot { fill: var(--line); }
.m-plate { fill: var(--plate); }
.m-engrave { fill: none; stroke: var(--plate-dark); stroke-width: 4; stroke-linecap: round; }
.m-beam { stroke: var(--laser); stroke-width: 2.4; stroke-linecap: round; }
.m-spot { fill: #fff; }
.m-cone { fill: rgb(var(--laser-rgb) / 0.1); stroke: rgb(var(--laser-rgb) / 0.4); stroke-dasharray: 4 5; }
.m-scan { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 4; }
.m-shadow { fill: rgb(0 0 0 / 0.35); }
.m-label { font-family: var(--mono); font-size: 12px; fill: var(--muted); letter-spacing: 0.1em; }

/* --------------------------------------------------------------------------
   9. Sélection (accueil) et cartes machine
   -------------------------------------------------------------------------- */
.pick { display: grid; gap: var(--sp-s); padding: var(--sp-s); align-content: start; }
.pick__top { display: flex; justify-content: space-between; gap: var(--sp-xs); align-items: center; }
.tag {
  display: inline-flex; align-items: center; gap: 0.45em;
  padding: 0.3rem 0.7rem; border-radius: 999px;
  font-size: var(--step--2); font-weight: 650; letter-spacing: 0.02em;
  background: rgb(var(--laser-rgb) / 0.12); color: var(--laser-soft); border: 1px solid rgb(var(--laser-rgb) / 0.28);
}
.tag--muted { background: rgb(255 255 255 / 0.04); color: var(--ink-2); border-color: var(--line); }
.pick__title { font-size: var(--step-2); }
.pick__title a { text-decoration: none; }
.pick--hero .pick__title { font-size: var(--step-3); }
.pick__price { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--step-1); font-weight: 700; font-stretch: 110%; }
.pick__price small { font-size: var(--step--2); color: var(--muted); font-weight: 450; font-stretch: 100%; }
.pick__why { color: var(--ink-2); font-size: var(--step--1); }
.pick__body { display: grid; gap: var(--sp-xs); padding: 0 var(--sp-2xs) var(--sp-2xs); }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2xs); margin-top: var(--sp-2xs); }
.pick--hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: var(--sp-l); padding: var(--sp-m); }
.pick--hero .visual { aspect-ratio: 16 / 11; }
.pick--hero .pick__why { font-size: var(--step-0); }
.pick--row { grid-template-columns: minmax(8rem, 38%) 1fr; align-items: center; }
.pick--row .visual { aspect-ratio: 1; }
.pick--row .pick__body { padding: var(--sp-2xs) var(--sp-2xs) var(--sp-2xs) 0; }
@media (max-width: 52rem) {
  .pick--hero { grid-template-columns: 1fr; gap: var(--sp-s); padding: var(--sp-s); }
}
@media (max-width: 30rem) {
  .pick--row { grid-template-columns: 1fr; }
  .pick--row .visual { aspect-ratio: 4 / 3; }
  .pick--row .pick__body { padding: 0 var(--sp-2xs) var(--sp-2xs); }
}

.chips-spec { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; }
.chips-spec li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border-radius: 8px; background: rgb(255 255 255 / 0.04); border: 1px solid var(--line-soft); font-family: var(--mono); font-size: var(--step--2); color: var(--ink-2); }
.chips-spec .i { width: 0.95em; height: 0.95em; color: var(--laser-soft); }

.machines { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.mcard { display: grid; gap: var(--sp-s); padding: var(--sp-xs); align-content: start; }
.mcard .visual { aspect-ratio: 4 / 3; }
.mcard__body { display: grid; gap: var(--sp-2xs); padding: 0 var(--sp-2xs) var(--sp-2xs); }
.mcard__brand { font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.mcard h2, .mcard h3 { font-size: var(--step-1); }
.mcard h2 a, .mcard h3 a { text-decoration: none; }
.mcard__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-xs); margin-top: var(--sp-2xs); padding-top: var(--sp-xs); border-top: 1px solid var(--line-soft); }
.mcard__price { font-weight: 700; font-stretch: 108%; }
.mcard__more { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--laser-soft); font-size: var(--step--1); font-weight: 600; }
.score-pill { font-family: var(--mono); font-size: var(--step--2); padding: 0.2rem 0.5rem; border-radius: 6px; background: var(--surface-3); color: var(--ink); }

/* --------------------------------------------------------------------------
   10. Profils et technologies
   -------------------------------------------------------------------------- */
.profiles { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.profile { display: grid; gap: var(--sp-2xs); padding: var(--sp-m); align-content: start; }
.profile h3 { font-size: var(--step-1); }
.profile h3 a { text-decoration: none; }
.profile p { color: var(--ink-2); font-size: var(--step--1); }
.profile__n { font-family: var(--mono); font-size: var(--step--2); color: var(--laser-soft); letter-spacing: 0.1em; }
.profile__link { display: inline-flex; gap: 0.35rem; align-items: center; margin-top: var(--sp-2xs); color: var(--laser-soft); font-weight: 600; font-size: var(--step--1); }

.techs { display: grid; gap: var(--sp-s); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 52rem) { .techs { grid-template-columns: 1fr; } }
.tech { display: grid; gap: var(--sp-xs); padding: var(--sp-m); align-content: start; }
.tech__wave { font-family: var(--mono); font-size: var(--step--2); color: var(--muted); }
.tech h3 { font-size: var(--step-2); }
.tech__bar { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--c1), var(--c2)); box-shadow: 0 0 18px var(--c1); }
.tech--diode { --c1: oklch(0.62 0.2 265); --c2: oklch(0.72 0.14 240); }
.tech--co2 { --c1: var(--laser); --c2: oklch(0.8 0.15 70); }
.tech--fibre { --c1: oklch(0.6 0.2 25); --c2: oklch(0.55 0.12 350); }
.tech ul { padding-left: 1.1rem; color: var(--ink-2); font-size: var(--step--1); display: grid; gap: 0.3rem; }
.tech__price { margin-top: auto; padding-top: var(--sp-xs); border-top: 1px solid var(--line-soft); font-size: var(--step--1); color: var(--ink-2); }
.tech__price strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   11. Tableaux
   -------------------------------------------------------------------------- */
.table-scroll, .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-2); }
table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
caption { caption-side: bottom; text-align: left; padding: var(--sp-xs) var(--sp-s); color: var(--muted); font-size: var(--step--2); }
th, td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
thead th { position: sticky; top: 0; background: var(--surface); font-family: var(--mono); font-size: var(--step--2); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
tbody tr { transition: background-color var(--dur-fast) var(--ease); }
tbody tr:hover { background: rgb(255 255 255 / 0.025); }
tbody tr:last-child > * { border-bottom: 0; }
td[data-num], .ctable td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sortable { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; min-height: 32px; }
.sortable .i { opacity: 0.5; }
th[aria-sort='ascending'] .sortable, th[aria-sort='descending'] .sortable { color: var(--laser-soft); }
th[aria-sort='ascending'] .sortable .i, th[aria-sort='descending'] .sortable .i { opacity: 1; }

.cell-model { display: flex; align-items: center; gap: 0.8rem; min-width: 14rem; }
.cell-model .visual { width: 56px; flex: none; aspect-ratio: 1; }
.cell-model strong { display: block; font-weight: 650; }
.cell-model a { text-decoration: none; }
.cell-model .meta { display: block; font-size: var(--step--2); color: var(--muted); font-family: var(--mono); }
.badge-f { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: var(--step--2); font-weight: 600; background: rgb(255 255 255 / 0.05); border: 1px solid var(--line); white-space: nowrap; }
.badge-f--ferme { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 40%, transparent); }
.badge-f--ouvert { color: var(--ko); border-color: color-mix(in oklab, var(--ko) 40%, transparent); }
.badge-f--portable { color: var(--plate); border-color: color-mix(in oklab, var(--plate) 40%, transparent); }

/* Tableaux empilés en fiches sur petit écran */
@media (max-width: 47.99rem) {
  .ctable thead, .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td,
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap th, .table-wrap td { display: block; }
  .ctable tr, .table-wrap tr { padding: var(--sp-s); border-bottom: 1px solid var(--line-soft); }
  .ctable th, .ctable td, .table-wrap th, .table-wrap td { padding: 0.3rem 0; border: 0; }
  .ctable td[data-label], .table-wrap td[data-label] { display: flex; justify-content: space-between; gap: var(--sp-s); }
  .ctable td[data-label]::before, .table-wrap td[data-label]::before { content: attr(data-label); color: var(--muted); font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.06em; }
  .ctable th[scope='row'], .table-wrap th[scope='row'] { margin-bottom: var(--sp-2xs); font-size: var(--step-0); }
  .ctable caption, .table-wrap caption { display: block; width: auto; }
}
/* L'attribut hidden doit gagner sur les display des tableaux empilés */
tr[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   12. Comparateur
   -------------------------------------------------------------------------- */
.filters { display: grid; gap: var(--sp-m); padding: clamp(1rem, 0.6rem + 1.5vw, 1.5rem); margin-bottom: var(--sp-m); border-radius: var(--radius-l); }
.filters__row { display: grid; gap: var(--sp-m); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.filters__group { display: grid; gap: var(--sp-2xs); align-content: start; min-width: 0; }
.label { font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  min-height: 44px; padding: 0 0.9rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgb(255 255 255 / 0.02); color: var(--ink-2);
  font-size: var(--step--1); font-weight: 550;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed='true'] { background: rgb(var(--laser-rgb) / 0.14); border-color: rgb(var(--laser-rgb) / 0.6); color: var(--ink); }
.chip[aria-pressed='true']::before { content: '●'; color: var(--laser); margin-right: 0.45em; font-size: 0.6em; vertical-align: 0.2em; }
html:not(.has-js) .filters { display: none; }
.filters__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-s); padding-top: var(--sp-s); border-top: 1px solid var(--line-soft); }
.filters__count { color: var(--ink-2); font-size: var(--step--1); }
.filters__count b { color: var(--ink); font-family: var(--mono); font-size: var(--step-1); }
.filters__tri { display: flex; flex-wrap: wrap; gap: var(--sp-xs); align-items: center; }
.sort-mobile { display: none; align-items: center; gap: 0.6rem; }
.sort-mobile select { min-height: 44px; padding: 0 0.8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 47.99rem) { .sort-mobile { display: inline-flex; } }
.empty-state { display: none; padding: var(--sp-xl) var(--sp-m); text-align: center; border: 1px dashed var(--line); border-radius: var(--radius); margin-top: var(--sp-s); }
[data-comparator].is-empty .empty-state { display: block; }
[data-comparator].is-empty .table-scroll { display: none; }

/* --------------------------------------------------------------------------
   13. Fiche machine
   -------------------------------------------------------------------------- */
.crumbs { padding-top: var(--sp-m); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0; font-size: var(--step--2); font-family: var(--mono); color: var(--muted); }
.crumbs li + li::before { content: '/'; margin-right: 0.4rem; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }

.review-hero { display: grid; gap: var(--sp-xl); grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; padding-block: var(--sp-l) var(--sp-xl); }
@media (max-width: 63.99rem) { .review-hero { grid-template-columns: 1fr; } }
.review-hero__media { position: sticky; top: 6rem; display: grid; gap: var(--sp-xs); }
@media (max-width: 63.99rem) { .review-hero__media { position: static; order: -1; max-width: 32rem; } }
.review-hero h1 { font-size: var(--step-4); }
.credit { font-size: var(--step--2); color: var(--muted); text-align: center; }

.keyspecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.keyspecs > div { display: grid; gap: 0.2rem; padding: var(--sp-s); background: var(--bg-2); }
.keyspecs dt { font-family: var(--mono); font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.35rem; }
.keyspecs dt .i { color: var(--laser-soft); }
.keyspecs dd { font-size: var(--step-1); font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
.keyspecs dd small { font-size: var(--step--2); color: var(--muted); font-weight: 450; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0 var(--sp-l); }
.specs > div { display: flex; justify-content: space-between; gap: var(--sp-s); padding: 0.8rem 0; border-bottom: 1px solid var(--line-soft); }
.specs dt { color: var(--muted); }
.specs dd { text-align: right; font-weight: 600; }

.verdict { display: grid; gap: var(--sp-s); padding: var(--sp-m); }
.verdict__score { display: flex; align-items: baseline; gap: 0.4rem; }
.verdict__score b { font-size: var(--step-5); font-weight: 800; font-stretch: 115%; letter-spacing: -0.05em; line-height: 0.9; color: var(--ink); }
.verdict__score span { color: var(--muted); font-family: var(--mono); }
.scores { display: grid; gap: 0.7rem; }
.score { display: grid; gap: 0.3rem; }
.score dt { display: flex; justify-content: space-between; font-size: var(--step--1); color: var(--ink-2); }
.score dt b { font-family: var(--mono); color: var(--ink); font-weight: 500; }
.score dd { height: 6px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.score dd span { display: block; height: 100%; width: var(--v); border-radius: inherit; background: linear-gradient(90deg, var(--plate-2), var(--laser)); transform-origin: left; }
.has-js [data-reveal] .score dd span { transform: scaleX(0); transition: transform 900ms var(--ease-out) 200ms; }
.has-js [data-reveal].is-in .score dd span { transform: none; }

.pros-cons { display: grid; gap: var(--sp-s); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 47.99rem) { .pros-cons { grid-template-columns: 1fr; } }
.pros-cons > div { padding: var(--sp-m); }
.pros-cons h3 { font-size: var(--step-0); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: var(--sp-s); }
.pros, .cons { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.pros li, .cons li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-2); }
.pros .i { color: var(--ok); margin-top: 0.25em; }
.cons .i { color: var(--ko); margin-top: 0.25em; }
.pros-cons > div:first-child h3 { color: var(--ok); }
.pros-cons > div:last-child h3 { color: var(--ko); }

.fit { display: grid; gap: var(--sp-s); padding: var(--sp-l); background: radial-gradient(120% 140% at 0% 0%, rgb(var(--laser-rgb) / 0.13), transparent 55%), linear-gradient(180deg, var(--surface), var(--bg-2)); }
.fit p:not(.eyebrow) { font-size: var(--step-1); line-height: 1.45; max-width: 52rem; }

/* --------------------------------------------------------------------------
   14. Prose, en bref, sommaire
   -------------------------------------------------------------------------- */
.tldr { position: relative; padding: var(--sp-m); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-soft); overflow: hidden; }
/* Filet de faisceau sur l'arête haute, qui s'éteint vers la droite */
.tldr::before { content: ''; position: absolute; left: 0; right: 30%; top: 0; height: 1px; background: linear-gradient(90deg, var(--laser), transparent); box-shadow: 0 0 12px rgb(var(--laser-rgb) / 0.7); }
.tldr h2 { font-size: var(--step--1); font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--laser-soft); margin-bottom: var(--sp-2xs); font-stretch: 100%; }
.tldr p + p { margin-top: var(--sp-xs); }
.tldr p { color: var(--ink-2); }
.tldr strong { color: var(--ink); }

.prose { color: var(--ink-2); font-size: var(--step-0); line-height: 1.72; max-width: 44rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { color: var(--ink); font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { color: var(--ink); font-size: var(--step-1); margin-top: 1.8em; }
.prose strong { color: var(--ink); font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: 0.45em; }
.prose li::marker { color: var(--laser); }
.prose .table-wrap { max-width: none; margin-block: 1.6em; }
.prose table { font-size: var(--step--1); }
.prose td, .prose th { color: var(--ink-2); }
.prose tbody th { color: var(--ink); font-weight: 600; }
.prose blockquote { padding-left: var(--sp-s); border-left: 1px solid var(--line-strong); color: var(--ink); font-style: italic; }
.prose .callout { padding: var(--sp-s) var(--sp-m); border-radius: var(--radius); background: rgb(var(--laser-rgb) / 0.08); border: 1px solid rgb(var(--laser-rgb) / 0.3); color: var(--ink); }

.toc { padding: var(--sp-m); border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--bg-2); }
.toc ol { margin-top: var(--sp-2xs); padding-left: 1.2rem; display: grid; gap: 0.35rem; font-size: var(--step--1); counter-reset: none; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--laser-soft); }
.toc li::marker { color: var(--muted); font-family: var(--mono); }

.article-grid { display: grid; gap: var(--sp-xl); grid-template-columns: minmax(0, 1fr) 17rem; align-items: start; }
.article-grid aside { position: sticky; top: 6rem; }
@media (max-width: 63.99rem) { .article-grid { grid-template-columns: 1fr; } .article-grid aside { position: static; } }

.aff-note { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--step--2); color: var(--muted); max-width: 48rem; }
.aff-note .i { margin-top: 0.15em; color: var(--laser-soft); }
.aff-note a { color: var(--ink-2); }

.post__meta { font-family: var(--mono); font-size: var(--step--2); color: var(--muted); letter-spacing: 0.02em; }
.post__meta a { color: var(--ink-2); }

.sources { display: grid; gap: var(--sp-xs); padding: var(--sp-m); border-radius: var(--radius); border: 1px dashed var(--line); color: var(--muted); font-size: var(--step--1); }

/* --------------------------------------------------------------------------
   15. Articles : couvertures générées et cartes
   -------------------------------------------------------------------------- */
.posts { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18.5rem), 1fr)); }
.post { display: grid; gap: var(--sp-s); padding: var(--sp-xs); align-content: start; }
.post__body { display: grid; gap: var(--sp-2xs); padding: 0 var(--sp-2xs) var(--sp-2xs); }
.post h2, .post h3 { font-size: var(--step-1); }
.post h2 a, .post h3 a { text-decoration: none; }
.post p { color: var(--ink-2); font-size: var(--step--1); }

.cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, var(--plate) 0%, var(--plate-2) 100%); }
.cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover .c-line { fill: none; stroke: var(--plate-dark); stroke-width: 1.6; opacity: 0.55; }
.cover .c-dot { fill: var(--plate-dark); opacity: 0.8; }
.cover .c-kerf { fill: none; stroke: var(--plate-dark); stroke-width: 5; stroke-linejoin: round; opacity: 0.85; }
.cover .c-hot { stroke: var(--laser); fill: none; opacity: 1; stroke-width: 2.6; filter: drop-shadow(0 0 5px rgb(var(--laser-rgb) / 0.9)); }
.cover .c-dot.c-hot { fill: var(--laser); stroke: none; }
.cover .c-kerf-hot { stroke-width: 2.2; stroke-dasharray: 60 900; }
.cover__label { position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 8px; background: rgb(var(--bg-rgb) / 0.82); color: var(--ink); font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cover--hero { aspect-ratio: 21 / 9; border-radius: var(--radius-l); }
.card:hover .cover .c-kerf-hot { animation: kerf 1.6s linear infinite; }
@keyframes kerf { to { stroke-dashoffset: -960; } }

/* --------------------------------------------------------------------------
   16. Bande d'appel, citations
   -------------------------------------------------------------------------- */
.cta-band { position: relative; display: grid; gap: var(--sp-m); padding: clamp(2rem, 1rem + 4vw, 4rem); border-radius: var(--radius-l); overflow: hidden; isolation: isolate; background: var(--surface); border: 1px solid var(--line-soft); }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 120% at 100% 100%, rgb(var(--laser-rgb) / 0.3), transparent 60%), repeating-linear-gradient(135deg, transparent 0 22px, rgb(255 255 255 / 0.025) 22px 23px); }
.cta-band h2 { max-width: 20ch; font-size: var(--step-4); }
.cta-band p { color: var(--ink-2); max-width: 40rem; }

.quote { font-size: var(--step-3); font-weight: 700; font-stretch: 112%; letter-spacing: -0.03em; line-height: 1.12; max-width: 28ch; text-wrap: balance; }
.quote em { font-style: normal; color: var(--laser); }

/* --------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--sp-2xs); max-width: 52rem; }
.faq details { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-2); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.faq details[open] { background: var(--surface); border-color: var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-s); min-height: 44px; padding: var(--sp-s) var(--sp-m); cursor: pointer; list-style: none; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: var(--laser-soft); transition: transform var(--dur) var(--ease); }
.faq__icon::after { transform: rotate(90deg); }
.faq details[open] .faq__icon::after { transform: rotate(0); }
.faq__body { padding: 0 var(--sp-m) var(--sp-m); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   18. Pied de page
   -------------------------------------------------------------------------- */
.footer { margin-top: var(--sp-2xl); padding-block: var(--sp-xl) var(--sp-l); border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.footer__grid { display: grid; gap: var(--sp-l); grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 63.99rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 30rem) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand p { margin-top: var(--sp-s); color: var(--muted); font-size: var(--step--1); max-width: 22rem; }
.footer h2 { font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; color: var(--muted); margin-bottom: var(--sp-s); font-stretch: 100%; }
.footer ul { list-style: none; padding: 0; display: grid; gap: 0.15rem; }
.footer li a { display: inline-block; padding: 0.3rem 0; color: var(--ink-2); text-decoration: none; font-size: var(--step--1); }
.footer li a:hover { color: var(--laser-soft); }
.footer__legal { margin-top: var(--sp-xl); padding-top: var(--sp-m); border-top: 1px solid var(--line-soft); display: grid; gap: var(--sp-2xs); color: var(--muted); font-size: var(--step--2); }

/* --------------------------------------------------------------------------
   18b. Accessoires et bloc sécurité
   -------------------------------------------------------------------------- */
.accs { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); }
.acc { display: grid; gap: var(--sp-s); padding: var(--sp-xs); align-content: start; scroll-margin-top: 6rem; }
.acc:target { border-color: rgb(var(--laser-rgb) / 0.7); box-shadow: 0 0 0 4px rgb(var(--laser-rgb) / 0.15), var(--shadow); }
.visual--acc { aspect-ratio: 4 / 3; }
.acc__body { display: grid; gap: var(--sp-2xs); padding: 0 var(--sp-2xs) var(--sp-2xs); }
.acc h3 { font-size: var(--step-0); font-stretch: 105%; letter-spacing: -0.01em; }
.acc__prix { font-weight: 700; font-stretch: 108%; font-size: var(--step-1); }
.acc__points { list-style: none; padding: 0; display: grid; gap: 0.3rem; font-size: var(--step--1); color: var(--ink-2); }
.acc__points li { position: relative; padding-left: 0.95rem; }
.acc__points li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--laser); }
.acc__compat { font-size: var(--step--2); color: var(--ink-2); display: grid; gap: 0.2rem; }
.acc__key { color: var(--laser-soft); }
a.chip { display: inline-flex; align-items: center; text-decoration: none; }

.safety { list-style: none; margin: 0; padding: var(--sp-xs) var(--sp-m); display: grid; }
.safety li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--sp-s); padding: var(--sp-s) 0; border-bottom: 1px solid var(--line-soft); color: var(--ink-2); font-size: var(--step--1); }
.safety li:last-child { border-bottom: 0; }
.safety__k { font-family: var(--mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--laser-soft); padding-top: 0.15em; }
@media (max-width: 40rem) { .safety li { grid-template-columns: 1fr; gap: var(--sp-3xs); } }

/* --------------------------------------------------------------------------
   19. Apparition au défilement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .has-js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .has-js [data-reveal].is-in { opacity: 1; transform: none; }
  .has-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
  .has-js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
  .hero__copy > * { animation: rise 800ms var(--ease-out) both; }
  .hero__copy > *:nth-child(2) { animation-delay: 80ms; }
  .hero__copy > *:nth-child(3) { animation-delay: 160ms; }
  .hero__copy > *:nth-child(4) { animation-delay: 240ms; }
  .hero__copy > *:nth-child(5) { animation-delay: 320ms; }
  .hero__art { animation: rise 1000ms var(--ease-out) 200ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* --------------------------------------------------------------------------
   20. Impression
   -------------------------------------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  body::before, .header, .footer, .filters, .flow-actions, .card__actions { display: none !important; }
  .card, .tldr { border-color: #ccc; background: none; box-shadow: none; }
}