/* Ça tient — vitrine claire Nexus 5. Ne jamais restaurer un thème dark. */

:root {
  --room: #e4e8ec;
  --pearl: #f4f3ef;
  --chassis: #ecebe6;
  --panel: #e3e2dc;
  --ink: #1c242c;
  --muted: #4e5964;
  --label: #5a6570;
  --lcd: #7ed2f2;
  --lcd-hi: #b8e8fa;
  --lcd-ink: #0b2740;
  --lcd-dim: #1a4e6c;
  --lcd-soft: #2d6a88;
  --led: #2eb8ff;
  --led-red: #e02424;
  --ok: #0d7ab8;
  --amber: #f0a020;
  --mint: #22b88a;
  --violet: #7a6cff;
  --coral: #ef6a4c;
  --gold: #e8b020;
  --rose: #e86a9a;
  --lime: #6cbc2e;
  --display: "Teko", "Arial Narrow", Impact, sans-serif;
  --lcd-font: "Share Tech Mono", "IBM Plex Mono", ui-monospace, monospace;
  --ui: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --metal:
    repeating-linear-gradient(90deg, rgba(70,78,86,0.045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.35) 0 1px, transparent 1px 8px),
    linear-gradient(112deg,
      rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.12) 22%,
      rgba(160,168,176,0.06) 38%, rgba(255,255,255,0.34) 50%,
      rgba(160,168,176,0.05) 62%, rgba(0,0,0,0.03) 78%,
      rgba(0,0,0,0.06) 100%),
    linear-gradient(180deg, #fbfaf6 0%, #f2f1ec 28%, #eae9e3 62%, #e0dfd9 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: light only; }
html, body { background: var(--room); color: var(--ink); }
body {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse at 50% 0%, #f2f6f8 0%, #e4e8ec 46%, #d5dce2 100%);
}
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -48px;
  background: var(--lcd); color: var(--lcd-ink);
  padding: 8px 12px; z-index: 40;
  font-family: var(--lcd-font); font-size: 13px;
}
.skip:focus { top: 12px; }

/* —— LEDs —— */
.led {
  width: 8px; height: 8px; border-radius: 50%;
  background: #b8bec4;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.22);
  display: inline-block; flex-shrink: 0; vertical-align: middle;
}
.led.on {
  background: radial-gradient(circle at 35% 30%, #e8f8ff, #2eb8ff 52%, #0a6aaa);
  box-shadow: 0 0 7px #3ec8ff, 0 0 14px rgba(46,184,255,0.55), inset 0 0 2px #fff;
}
.led.red, .led.peak {
  background: radial-gradient(circle at 35% 30%, #ffb0b0, #e02424 55%, #8a0000);
  box-shadow: 0 0 7px #ff4a4a, 0 0 12px rgba(224,36,36,0.45), inset 0 0 2px #ffd8d8;
}
.led.amber.on {
  background: radial-gradient(circle at 35% 30%, #ffe8b0, #f0a020 55%, #a06000);
  box-shadow: 0 0 7px #ffc040, 0 0 12px rgba(240,160,32,0.45);
}
.led.mint.on {
  background: radial-gradient(circle at 35% 30%, #c8ffe8, #22b88a 55%, #087050);
  box-shadow: 0 0 7px #40e0a8, 0 0 12px rgba(34,184,138,0.45);
}
.led.violet.on {
  background: radial-gradient(circle at 35% 30%, #e0d8ff, #7a6cff 55%, #3a28b0);
  box-shadow: 0 0 7px #9a90ff, 0 0 12px rgba(122,108,255,0.45);
}
.led.pulse { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.4); } }

/* —— vis —— */
.screw {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #d0d4d8 44%, #8e949a 80%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 2px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.16);
  z-index: 3; pointer-events: none;
}
.screw::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 6px; height: 2px;
  background: rgba(40,48,56,0.4); border-radius: 1px; transform: rotate(-28deg);
}
.screw.tl { top: 12px; left: 12px; }
.screw.tr { top: 12px; right: 12px; }
.screw.bl { bottom: 12px; left: 12px; }
.screw.br { bottom: 12px; right: 12px; }

/* —— knobs argent —— */
.knob {
  width: 34px; height: 34px; border-radius: 50%; position: relative; display: inline-block;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,255,255,0.18) 0 6deg, rgba(0,0,0,0.04) 6deg 12deg),
    radial-gradient(circle at 32% 26%, #ffffff, #e4e6e6 48%, #b0b4b8 100%);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.85),
    inset 0 -2px 4px rgba(0,0,0,0.2),
    0 1px 0 rgba(255,255,255,0.7),
    0 3px 6px rgba(0,0,0,0.16);
  border: 1px solid rgba(70,76,82,0.22);
}
.knob::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #f8f8f6, #c8ccce);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.7);
}
.knob b {
  position: absolute; left: 50%; top: 4px; width: 2px; height: 10px;
  background: #1c242c; border-radius: 1px; z-index: 1;
  transform-origin: 50% 13px; transform: translateX(-50%) rotate(var(--rot, 0deg));
}

.out-knob {
  width: 28px; height: 28px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 32% 28%, #fff, #d8dadd 50%, #9aa0a6 100%);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.8), inset 0 -2px 3px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.14);
  border: 1px solid rgba(70,76,82,0.2);
}
.out-knob i {
  position: absolute; left: 50%; top: 4px; width: 2px; height: 8px; margin: 0;
  background: #1c242c; border-radius: 1px;
  transform: translateX(-50%) rotate(42deg); transform-origin: 50% 10px;
}

/* —— châssis —— */
.deck {
  min-height: 100vh; max-width: 1440px; margin: 0 auto; position: relative;
  background: var(--metal);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    inset 0 2px 3px rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 22px 56px rgba(60,72,84,0.18);
  border-left: 1px solid #c8ccd0;
  border-right: 1px solid #c8ccd0;
}
.deck::before {
  content: ""; position: absolute; inset: 6px; pointer-events: none; z-index: 0;
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 0 0 1px rgba(0,0,0,0.04);
}

.par-banner {
  background: var(--lcd); color: var(--lcd-ink); text-align: center;
  padding: 10px 16px; font-family: var(--lcd-font); font-size: 14px;
  border-bottom: 1px solid rgba(20,80,110,0.2);
  box-shadow: inset 0 0 28px rgba(40,140,180,0.18);
}

/* —— header —— */
.mast {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 10px 34px 10px 36px;
  background: var(--metal); color: var(--ink);
  border-bottom: 1px solid #d0d2d4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 8px 20px rgba(60,72,84,0.08);
}
.mark { text-decoration: none; display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.orb {
  width: 34px; height: 34px; position: relative; flex-shrink: 0;
}
.orb i {
  position: absolute; inset: 1px; border-radius: 50%;
  border: 2px solid #6a90b0;
  box-shadow: 0 0 6px rgba(46,184,255,0.25);
}
.orb i:first-child { transform: rotateX(68deg) rotateZ(-18deg); }
.orb i:last-child { transform: rotateX(68deg) rotateZ(52deg); border-color: #2eb8ff; }
.mark-text { display: flex; align-items: baseline; gap: 10px; }
.mark-name {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #1c242c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8), 0 -1px 0 rgba(0,0,0,0.08);
}
.mark-plate { font-family: var(--lcd-font); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #6a7480; }
.patch {
  display: none; flex-direction: column; justify-content: center;
  min-width: 220px; padding: 5px 12px;
  background: var(--lcd);
  border: 1px solid rgba(20,90,120,0.22);
  box-shadow: inset 0 0 16px rgba(20,110,150,0.14);
  font-family: var(--lcd-font);
}
.patch .k { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lcd-soft); }
.patch .v { font-size: 13px; color: var(--lcd-ink); }
.mast-nav {
  display: flex; align-items: center; gap: 18px;
  font-size: 16px; font-weight: 500; margin-left: auto; position: relative; z-index: 1;
}
.mast-nav a { text-decoration: none; color: #3a4650; }
.mast-nav a:hover { color: var(--ok); }
.mast-nav .live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--lcd-font); font-size: 12px; color: var(--ok);
}
.mast-end { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.power {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #6a7480;
}

/* —— hero LCD —— */
.hero {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: 18px 16px 10px;
}
.side-col { display: none; flex-direction: column; gap: 8px; justify-content: center; }
.side-btn {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: #3a4650;
  padding: 9px 10px; border-radius: 3px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #f6f6f2, #d8dad8 70%, #c6c8c6);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.12), 1px 2px 4px rgba(0,0,0,0.08);
}
.side-btn.is-on { color: #0a3a58; }
.side-btn.is-on .led { background: radial-gradient(circle at 35% 30%, #e8f8ff, #2eb8ff 52%, #0a6aaa); box-shadow: 0 0 6px #3ec8ff; }

.lcd-well {
  position: relative; padding: 14px; border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.04) 0 2px, transparent 2px),
    linear-gradient(180deg, #cfd2d4 0%, #f2f1ec 42%, #d8dad8 100%);
  box-shadow:
    inset 0 4px 12px rgba(40,50,60,0.16),
    inset 0 1px 0 rgba(0,0,0,0.08),
    inset 0 -1px 0 rgba(255,255,255,0.65),
    0 0 0 1px #c0c4c8,
    0 1px 0 rgba(255,255,255,0.6);
}
.lcd-well::before, .lcd-well::after {
  content: ""; position: absolute; top: 8px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #d0d4d8 44%, #8e949a 80%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.14);
  z-index: 3;
}
.lcd-well::before { left: 8px; }
.lcd-well::after { right: 8px; }
.lcd {
  position: relative; overflow: hidden; border-radius: 5px;
  padding: 22px 20px 58px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.38), transparent 30%, rgba(12,70,110,0.08)),
    var(--lcd);
  box-shadow: inset 0 0 48px rgba(16,90,140,0.16), 0 0 28px rgba(90,200,240,0.4);
  color: var(--lcd-ink);
}
.lcd::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    repeating-linear-gradient(180deg, rgba(12,70,110,0.05) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(255,255,255,0.22), transparent 26%, transparent 74%, rgba(12,70,110,0.1));
}
.scan {
  position: absolute; left: 0; right: 0; height: 22px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.28), transparent);
  animation: scan 4.8s linear infinite; pointer-events: none; z-index: 5;
}
@keyframes scan { from { top: -8%; } to { top: 92%; } }

.eyebrow {
  font-family: var(--lcd-font); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lcd-dim);
  margin-bottom: 10px; position: relative; z-index: 2;
}
.eyebrow.ink { color: var(--ok); }
.hero h1 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 6.2vw, 68px); line-height: 1.02; letter-spacing: 0.01em;
  color: var(--lcd-ink); max-width: 18ch; margin-bottom: 2px; position: relative; z-index: 2;
}
.punch {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(26px, 5vw, 48px); line-height: 1.05; color: #084068;
  margin-bottom: 14px; position: relative; z-index: 2;
}
.lead {
  max-width: 44em; font-size: clamp(15px, 1.7vw, 17px); line-height: 1.5;
  color: var(--lcd-dim); margin-bottom: 20px; position: relative; z-index: 2;
}

.hero-row { display: flex; flex-wrap: wrap; gap: 12px; position: relative; z-index: 6; }
.jump {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #fff 0%, #ecece8 40%, #d4d6d4 100%);
  color: #1c242c; padding: 10px 18px 10px 16px; min-height: 54px; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.85), inset -1px -1px 0 rgba(0,0,0,0.12), 2px 3px 8px rgba(0,0,0,0.12);
  font-weight: 600; font-size: 16px;
}
.jump:hover { filter: brightness(1.04); color: #084068; }
.jump-count { font-family: var(--display); font-size: 32px; line-height: 1; color: #084068; }
.jump-label { font-size: 15px; color: #3a4650; }
.jump-ghost {
  background:
    repeating-linear-gradient(135deg, rgba(80,180,220,0.1) 0 2px, transparent 2px),
    linear-gradient(145deg, #e8f4fa, #c8dce8 70%, #b4d0e0);
  color: #084068;
}

.lcd-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46px; z-index: 5;
  display: grid; grid-template-columns: 1.25fr 0.95fr 1fr 1.15fr; gap: 1px;
  background: rgba(12,70,110,0.1); border-top: 1px solid rgba(12,80,120,0.16);
  font-family: var(--lcd-font);
}
.lcd-cell { padding: 6px 12px 5px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.lcd-cell .k { color: var(--lcd-soft); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.lcd-cell .v { color: var(--lcd-ink); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* —— modules —— */
.modules {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;
  margin: 4px 16px 6px; padding: 6px 4px 8px;
}
.mod {
  padding: 10px 8px 8px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(0,0,0,0.02)), #e6e5df;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 0 0 1px rgba(0,0,0,0.06), 1px 2px 5px rgba(0,0,0,0.06);
  text-align: center;
}
.mod.tint-cyan { background: linear-gradient(180deg, rgba(180,230,250,0.35), rgba(255,255,255,0.2)), #e6eef2; }
.mod.tint-amber { background: linear-gradient(180deg, rgba(255,220,150,0.32), rgba(255,255,255,0.2)), #f2eee4; }
.mod.tint-mint { background: linear-gradient(180deg, rgba(160,240,210,0.3), rgba(255,255,255,0.2)), #e6f2ec; }
.mod.tint-violet { background: linear-gradient(180deg, rgba(200,190,255,0.3), rgba(255,255,255,0.2)), #eceaf4; }
.mod.tint-out { background: linear-gradient(180deg, rgba(180,230,250,0.28), rgba(255,255,255,0.2)), #e8eef2; }
.mod-head, .mod-foot {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #4a5460;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.mod-foot { margin-top: 6px; color: #6a7480; font-size: 10px; display: block; }
.knobs { display: flex; justify-content: center; gap: 10px; margin: 8px 0 2px; }
.meter { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 40px; margin: 6px 0 2px; }
.meter i {
  display: block; width: 6px; border-radius: 1px;
  background: linear-gradient(180deg, #6ae0ff, #1490d8);
  box-shadow: 0 0 5px rgba(46,184,255,0.45);
}
.meter i:nth-child(1) { height: 8px; opacity: 0.4; }
.meter i:nth-child(2) { height: 14px; opacity: 0.55; }
.meter i:nth-child(3) { height: 20px; opacity: 0.7; }
.meter i:nth-child(4) { height: 26px; }
.meter i:nth-child(5) { height: 30px; }
.meter i:nth-child(6) { height: 34px; }
.meter i:nth-child(7) { height: 38px; }
.meter i.peak { height: 40px; background: linear-gradient(180deg, #ff9a8a, #e02424); box-shadow: 0 0 6px rgba(224,36,36,0.4); }

/* —— catalogue librarian —— */
.catalog {
  position: relative; z-index: 1;
  padding: 34px 16px 48px; margin: 8px 12px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.35), transparent 18%), var(--metal);
  border-radius: 12px;
  box-shadow: inset 0 2px 12px rgba(40,50,60,0.06), inset 0 1px 0 rgba(255,255,255,0.55), 0 0 0 1px #d0d2d4;
}
.catalog::before, .catalog::after {
  content: ""; position: absolute; top: 12px; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #d0d4d8 44%, #8e949a 80%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.14);
}
.catalog::before { left: 12px; }
.catalog::after { right: 12px; }
.catalog-head { display: grid; gap: 14px; margin-bottom: 22px; }
.catalog h2, .ask h2, .thanks h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 5.4vw, 56px); line-height: 1.02; color: #1c242c;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.catalog-aside { max-width: 38em; font-size: 16px; line-height: 1.5; color: var(--muted); }

.toolbar { display: grid; gap: 10px; margin-bottom: 14px; align-items: end; }
.search-wrap input {
  width: 100%; background: var(--lcd);
  border: 1px solid rgba(20,90,120,0.22);
  padding: 13px 14px; outline: none; border-radius: 4px;
  font-family: var(--lcd-font); font-size: 16px; color: var(--lcd-ink);
  caret-color: var(--lcd-dim);
  box-shadow: inset 0 0 20px rgba(16,100,150,0.12), inset 0 2px 6px rgba(12,70,110,0.08);
}
.search-wrap input::placeholder { color: var(--lcd-soft); }
.search-wrap input:focus {
  border-color: rgba(20,120,170,0.45);
  box-shadow: inset 0 0 20px rgba(16,100,150,0.12), 0 0 14px rgba(80,190,230,0.28);
}
.counter { font-family: var(--lcd-font); font-size: 13px; color: var(--ok); text-align: right; }

.filter-kicker {
  font-family: var(--lcd-font); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ok); margin: 2px 0 0;
}
.filters {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 4px 0 10px; margin-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
#subfilters { padding-bottom: 14px; margin-bottom: 4px; }
.filter {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; border: 0;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #f6f6f2, #deded8 100%);
  padding: 8px 13px 8px 11px; font-size: 15px; font-weight: 500; cursor: pointer;
  color: #3a4650; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.1), 1px 2px 4px rgba(0,0,0,0.08);
}
.filter::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #b8bec4; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}
.filter:hover { color: #1c242c; }
.filter.is-on {
  color: #084068;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.3) 0 2px, transparent 2px),
    linear-gradient(145deg, #dff2fb, #b8dcec);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75), 0 0 12px rgba(46,184,255,0.2);
}
.filter.is-on::before {
  background: radial-gradient(circle at 35% 30%, #e8f8ff, #2eb8ff 55%, #0a6aaa);
  box-shadow: 0 0 6px #3ec8ff;
}

.status { padding: 16px 4px 12px; color: var(--muted); font-size: 15px; }
.status.is-load { color: var(--ok); }

.grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.card {
  display: block; width: 100%; text-align: left; position: relative;
  background: linear-gradient(180deg, #f7fbfd, #eaf3f8);
  border: 1px solid rgba(20,90,120,0.14);
  padding: 14px 16px 16px; cursor: pointer; border-radius: 4px;
  box-shadow: inset 0 0 16px rgba(80,170,200,0.07), inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.04);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.card:hover, .card:focus-visible {
  background: linear-gradient(180deg, #eaf6fc, #d4ecf6);
  border-color: rgba(20,130,190,0.4);
  box-shadow: inset 0 0 18px rgba(80,190,230,0.14), 0 0 16px rgba(80,190,230,0.18);
  outline: none;
}
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.card-tag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 18px; padding: 0 6px;
  font-family: var(--lcd-font); font-size: 11px; letter-spacing: 0.04em;
  border-radius: 2px; background: #c8e6f4; color: #084068;
}
.card[data-tint="gold"] .card-tag { background: #ffe08a; color: #5a3a00; }
.card[data-tint="coral"] .card-tag { background: #ffc4b0; color: #6a1808; }
.card[data-tint="violet"] .card-tag { background: #d8d0ff; color: #2a1870; }
.card[data-tint="amber"] .card-tag { background: #ffd8a0; color: #5a3200; }
.card[data-tint="mint"] .card-tag { background: #b8f0d8; color: #084830; }
.card[data-tint="sky"] .card-tag { background: #b8e0ff; color: #084068; }
.card[data-tint="rose"] .card-tag { background: #ffc8dc; color: #681030; }
.card[data-tint="lime"] .card-tag { background: #d4f08a; color: #2a4808; }
.card[data-tint="slate"] .card-tag { background: #d0d8e0; color: #243040; }
.card[data-tint="cyan"] .card-tag { background: #b0ecf8; color: #084058; }
.card-dots { display: flex; gap: 4px; }
.card-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #2eb8ff;
  box-shadow: 0 0 5px rgba(46,184,255,0.45);
}
.card-dots i:nth-child(2) { background: #f0a020; box-shadow: 0 0 5px rgba(240,160,32,0.4); }
.card-dots i:nth-child(3) { background: #22b88a; box-shadow: 0 0 5px rgba(34,184,138,0.4); }
.card-cat {
  font-family: var(--lcd-font); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ok); margin-bottom: 6px; position: relative; z-index: 1;
}
.card-title {
  font-size: 17px; line-height: 1.28; font-weight: 500;
  color: #1c242c; position: relative; z-index: 1;
}
.card:hover .card-title, .card:focus-visible .card-title { color: #084068; }

.more-wrap { margin-top: 20px; }
.more {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 1px, transparent 1px 3px),
    linear-gradient(145deg, #f6f6f2, #deded8);
  border: 0; padding: 13px 18px; cursor: pointer; color: #1c242c;
  font-weight: 600; font-size: 16px; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.8), inset -1px -1px 0 rgba(0,0,0,0.1), 2px 3px 6px rgba(0,0,0,0.08);
}
.more:hover { filter: brightness(1.04); color: #084068; }

/* —— demande —— */
.ask { position: relative; z-index: 1; padding: 44px 16px 64px; }
.ask-grid { display: grid; gap: 28px; }
.ask-copy p { color: var(--muted); margin-top: 14px; max-width: 36em; font-size: 16px; line-height: 1.5; }
.protocol { list-style: none; margin-top: 24px; display: grid; gap: 8px; }
.protocol li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; background: linear-gradient(180deg, #f2f8fb, #e4eef4);
  border: 1px solid rgba(20,90,120,0.12); font-size: 15px; color: #243440;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
.protocol li::before {
  content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 35% 30%, #e8f8ff, #2eb8ff 55%, #0a6aaa);
  box-shadow: 0 0 6px #3ec8ff;
}

.form {
  position: relative; padding: 26px 20px 24px;
  background: var(--metal); border-radius: 10px;
  box-shadow: inset 0 2px 8px rgba(40,50,60,0.06), inset 0 1px 0 rgba(255,255,255,0.65), 0 0 0 1px #d0d2d4, 0 14px 28px rgba(60,72,84,0.1);
}
.form::before, .form::after {
  content: ""; position: absolute; top: 12px; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff, #d0d4d8 44%, #8e949a 80%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.9);
}
.form::before { left: 12px; }
.form::after { right: 12px; }
.form-plate {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: -6px -4px 18px; padding: 8px 10px;
  background: var(--lcd); border: 1px solid rgba(20,90,120,0.2);
  font-family: var(--lcd-font); font-size: 12px; color: var(--lcd-ink);
  box-shadow: inset 0 0 16px rgba(16,100,150,0.12);
}
.form label {
  display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--label); margin: 16px 0 7px;
}
.form label:first-of-type { margin-top: 0; }
.form input, .form textarea {
  width: 100%; background: var(--lcd);
  border: 1px solid rgba(20,90,120,0.2);
  padding: 11px 12px; outline: none; border-radius: 4px;
  font-size: 16px; color: var(--lcd-ink); caret-color: var(--lcd-dim);
  box-shadow: inset 0 0 14px rgba(16,100,150,0.1), inset 0 2px 4px rgba(12,70,110,0.07);
}
.form input::placeholder, .form textarea::placeholder { color: var(--lcd-soft); }
.form input:focus, .form textarea:focus {
  border-color: rgba(20,120,170,0.45);
  box-shadow: inset 0 0 14px rgba(16,100,150,0.1), 0 0 12px rgba(80,190,230,0.22);
}
.form textarea { min-height: 128px; resize: vertical; }
.form-row { display: grid; gap: 0; }
.form button[type="submit"] {
  margin-top: 24px; width: 100%; border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.28) 0 2px, transparent 2px),
    linear-gradient(145deg, #e4f4fb, #b8dcec 40%, #8ec8e4);
  color: #084068; padding: 15px 18px; cursor: pointer;
  font-weight: 700; font-size: 17px; border-radius: 3px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75), 0 0 16px rgba(46,184,255,0.18), 3px 4px 10px rgba(0,0,0,0.08);
}
.form button[type="submit"]:hover { filter: brightness(1.05); }
.fine { margin-top: 12px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.referrer {
  margin-top: 16px; padding: 12px 14px; background: var(--lcd);
  border: 1px solid rgba(20,90,120,0.22); font-family: var(--lcd-font); font-size: 14px; color: var(--lcd-ink);
}
.thanks {
  background: var(--lcd); border: 1px solid rgba(20,120,170,0.28); padding: 32px 24px;
  box-shadow: inset 0 0 32px rgba(16,100,150,0.12), 0 0 20px rgba(80,190,230,0.18);
}
.thanks h2 { color: var(--lcd-ink); }
.thanks p { color: var(--lcd-dim); margin-top: 8px; }

.foot {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 20px 36px; border-top: 1px solid #d0d2d4;
  color: #6a7480; font-size: 13px;
  background: linear-gradient(180deg, #ecebe6, #e2e1db);
  position: relative; z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.foot span:first-child {
  font-family: var(--display); color: #1c242c; font-size: 22px; letter-spacing: 0.12em; text-transform: uppercase;
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .mast { padding: 10px 14px 10px 20px; }
  .mark-plate, .power, .out-knob, .orb { display: none; }
  .mast-nav { gap: 12px; font-size: 15px; }
  .mast-nav .live { font-size: 11px; }
  .lcd { padding: 18px 14px 110px; }
  .lcd-strip { grid-template-columns: 1fr 1fr; height: auto; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 40px); max-width: none; }
  .punch { font-size: clamp(24px, 6.6vw, 32px); }
  .lead { font-size: 15px; }
  .catalog { margin: 6px 8px 0; padding: 28px 12px 40px; }
  .card-title { font-size: 16px; }
  .ask { padding: 36px 14px 56px; }
  .modules { grid-template-columns: 1fr 1fr; margin: 4px 8px; }
  .mod:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .mark-name { font-size: 22px; letter-spacing: 0.1em; }
}
@media (min-width: 640px) {
  .mast, .hero, .ask, .foot { padding-left: 28px; padding-right: 28px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr 1fr; gap: 18px; }
  .more { width: auto; min-width: 220px; }
  .patch { display: flex; }
}
@media (min-width: 900px) {
  .mast { padding-left: 40px; padding-right: 40px; }
  .hero, .ask, .foot { padding-left: 40px; padding-right: 40px; }
  .hero {
    grid-template-columns: 88px 1fr 88px;
    padding-top: 20px; padding-bottom: 6px;
  }
  .side-col { display: flex; }
  .modules { margin-left: 28px; margin-right: 28px; }
  .catalog { margin-left: 22px; margin-right: 22px; padding: 40px 32px 56px; }
  .catalog-head { grid-template-columns: 1fr 1fr; align-items: end; }
  .toolbar { grid-template-columns: 1fr auto; }
  .grid { grid-template-columns: 1fr 1fr 1fr; }
  .ask-grid { grid-template-columns: 0.92fr 1.08fr; align-items: start; gap: 44px; }
  .foot { flex-direction: row; justify-content: space-between; align-items: baseline; }
}
@media (min-width: 1200px) {
  .hero h1 { max-width: 16ch; }
  .lcd { padding: 26px 32px 58px; }
  .modules { margin-left: 40px; margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan, .led.pulse { animation: none; }
  html { scroll-behavior: auto; }
}
@media (prefers-color-scheme: dark) {
  /* Interdit : on reste clair. Stéphane a demandé la peau perle, jamais le bunker. */
  html, body { color-scheme: light only; background: var(--room); color: var(--ink); }
}