/* ============================================================
   SHUFFLE DRUMMER — Landings SEO "machine vide"
   ------------------------------------------------------------
   Feuille partagée par toutes les pages annexes (mpc-online.html,
   drum-kits.html, guides/...). Reprend les couleurs du skin sombre
   (styles/skin-dark.css, défaut prod) et la police Share Tech Mono.

   Principe : la page est un chassis SHUFFLE DRUMMER vide.
   - .edge   : en-tête (logo + chat + boutons)
   - .top    : écran LCD (titre) + gros PLAY + 3 LEDs
   - .comp   : barre d'onglets (chaque onglet LANCE l'app sur cet
               onglet, cf. main.js _boot ?tab=) + .pane = l'article
   - .mfoot  : footer avec les liens entre landings (maillage interne)
   Tout ce qui ressemble à la machine lance la machine, au bon endroit.
   Le corps de l'article reste en Segoe (lisibilité d'un texte long),
   titres / labels en Share Tech Mono comme l'app.
   ============================================================ */
:root {
  --accent:#ff7a1a; --accent-bright:#ff9440; --accent-light:#ffb066; --accent-deep:#e8650f;
  --accent-dim:#ff7a1a66; --led-shadow:rgba(255,122,26,0.6);
  --surface-mid:#2a2b30; --surface-mid2:#232428; --surface-light:#3e3f45; --surface-light2:#34353b;
  --chassis-mid:#393a40; --border-color:#52545c; --metal-dark:#3a3b3f;
  --text-primary:#eeede8; --text-knob:#e2e0da; --text-deep:#cfccc5; --text-muted:#9c968e;
  --btn-light:#6e727b; --btn-shadow:#16171b;
  --mono:'Share Tech Mono','OCR B','Courier New',monospace;
  --sans:"Segoe UI",system-ui,-apple-system,sans-serif;
}
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { background:#a0a09a; }
body {
  min-height:100vh; background:#a0a09a; padding:10px 6px 22px;
  font-family:var(--mono); color:var(--text-primary);
  -webkit-text-size-adjust:100%;
}

/* ── Chassis ─────────────────────────────────────────────── */
.machine {
  width:100%; max-width:940px; margin:0 auto;
  background:linear-gradient(180deg,var(--surface-light) 0%,var(--chassis-mid) 8%,var(--surface-light2) 100%);
  border:1px solid var(--border-color); border-radius:16px; padding:7px 12px 16px;
  box-shadow:0 26px 70px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── En-tête ─────────────────────────────────────────────── */
.edge { display:flex; justify-content:space-between; align-items:center; font-size:11px; letter-spacing:0.2em; padding-bottom:6px; margin-bottom:8px; flex-wrap:wrap; gap:6px; }
.edge-title { font-size:24px; font-weight:300; letter-spacing:0.28em; display:inline-block; transform:translateY(7px); text-decoration:none; color:var(--text-primary); white-space:nowrap; }
.edge-title .s { font-weight:200; letter-spacing:0.18em; color:var(--accent); }
.edge-title .d { margin-left:0.3em; font-weight:600; letter-spacing:0.15em; }
.edge-cat { height:34px; width:auto; vertical-align:middle; margin:0 5px 0 -10px; }
.edge-right { display:flex; align-items:center; gap:6px; transform:translateY(7px); flex-wrap:wrap; }

/* Touches (même recette que .pact-btn / #theme-btn de l'app) */
.pact { padding:4px 9px; font-size:11px; line-height:15px; white-space:nowrap; letter-spacing:0.14em; font-weight:700; font-family:var(--mono); cursor:pointer; border-radius:3px; text-decoration:none; display:inline-block; transition:all .12s; }
.pact.key { background:linear-gradient(180deg,var(--btn-light),var(--surface-mid)); border:1px solid var(--border-color); color:var(--text-knob); box-shadow:0 2px 0 var(--btn-shadow); }
.pact.key:hover { filter:brightness(1.1); }
.pact.orange { background:var(--accent); color:#fff; border:1px solid var(--accent-deep); }
.pact.orange:hover { background:var(--accent-deep); }
.pact.ghost { background:var(--metal-dark); border:1px solid var(--accent-dim); color:var(--accent-bright); }
.pact.ghost:hover { background:#ff7a1a22; border-color:var(--accent); }

/* ── Panneau du haut : LCD + PLAY + LEDs ─────────────────── */
.top { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:stretch; background:var(--surface-mid); border:1px solid var(--border-color); border-radius:12px; padding:8px; margin-bottom:10px; }
.screen { display:flex; flex-direction:column; justify-content:space-between; width:100%; max-width:300px; min-height:150px; background:#150900; border:2px solid #0d0e10; border-radius:6px; padding:8px 8px 12px; box-shadow:inset 0 2px 8px rgba(0,0,0,0.8); text-decoration:none; }
.screen:hover .screen-h { text-shadow:0 0 14px var(--led-shadow), 0 0 4px var(--accent); }
.screen-h { color:var(--accent); font-size:22px; font-weight:700; text-shadow:0 0 9px var(--led-shadow); letter-spacing:0.06em; line-height:1.15; }
.screen-st { color:var(--accent-light); font-size:10px; margin-top:6px; letter-spacing:0.08em; line-height:1.6; }
.screen-meta { color:#7a4aaa; font-size:9px; margin-top:4px; letter-spacing:0.06em; }
.wheel-col { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:0 12px; }
.wheel { width:96px; height:96px; border-radius:50%; background:radial-gradient(circle at 50% 38%,#4a4b50,#1d1e22 70%); border:2px solid #111; box-shadow:0 8px 22px rgba(0,0,0,0.6), 0 0 18px rgba(255,122,26,0.35); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--accent); font-size:14px; font-weight:700; letter-spacing:0.14em; text-shadow:0 0 8px var(--led-shadow); animation:ld-glow 2.4s ease-in-out infinite; }
.wheel:hover { box-shadow:0 8px 22px rgba(0,0,0,0.6), 0 0 30px rgba(255,122,26,0.6); animation:none; }
.wheel-lbl { font-size:9px; letter-spacing:0.2em; color:var(--text-knob); }
@keyframes ld-glow {
  0%,100% { box-shadow:0 8px 22px rgba(0,0,0,0.6), 0 0 14px rgba(255,122,26,0.25); }
  50% { box-shadow:0 8px 22px rgba(0,0,0,0.6), 0 0 26px rgba(255,122,26,0.5); }
}
@media (prefers-reduced-motion: reduce) { .wheel { animation:none; } }
.top-right { display:flex; flex-direction:column; justify-content:center; gap:5px; font-size:10px; letter-spacing:0.12em; color:var(--text-knob); padding-left:8px; }
.top-right .led { display:inline-block; width:7px; height:7px; border-radius:50%; background:#3fbf6a; box-shadow:0 0 6px #3fbf6a; margin-right:6px; vertical-align:middle; }
.top-right .langs { margin-top:6px; color:var(--text-muted); }
.top-right .langs a { color:var(--text-muted); text-decoration:none; }
.top-right .langs a:hover, .top-right .langs b { color:var(--accent-light); font-weight:400; }

/* ── Bloc du bas : onglets + pane ────────────────────────── */
.comp { background:var(--surface-mid2); border:1px solid var(--border-color); border-radius:12px; margin-bottom:10px; overflow:hidden; display:flex; flex-direction:column; }
.tabs { display:flex; border-bottom:1px solid #141518; overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:1; padding:7px 6px; font-size:12px; letter-spacing:0.18em; font-weight:700; font-family:var(--mono); cursor:pointer; background:none; border:none; color:var(--text-knob); border-bottom:2px solid transparent; text-align:center; white-space:nowrap; text-decoration:none; display:flex; align-items:center; justify-content:center; }
.tab:hover { color:var(--accent-light); background:rgba(0,0,0,0.12); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); text-shadow:0 1px 3px rgba(0,0,0,0.8); background:rgba(0,0,0,0.18); }

.pane { padding:18px 22px 26px; font-family:var(--sans); font-size:15px; line-height:1.65; color:var(--text-primary); }
.pane h1 { font-family:var(--mono); font-size:21px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-primary); margin:0 0 12px; line-height:1.3; }
.pane h2 { font-family:var(--mono); font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--accent); margin:26px 0 8px; padding-bottom:4px; border-bottom:1px solid var(--border-color); }
.pane h3 { font-family:var(--mono); font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent-light); margin:18px 0 6px; }
.pane p { margin-bottom:12px; }
.pane ul, .pane ol { margin:0 0 12px 22px; }
.pane li { margin-bottom:5px; }
.pane a { color:var(--accent-light); }
.pane a:hover { color:var(--accent); }
.pane strong { color:#fff; }
.pane em { color:var(--accent-light); font-style:normal; }
.pane .sub { font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:var(--text-muted); }
.pane .cta { display:inline-block; font-family:var(--mono); background:var(--accent); color:#fff; font-weight:700; letter-spacing:0.14em; font-size:13px; padding:11px 22px; border-radius:4px; text-decoration:none; border:1px solid var(--accent-deep); box-shadow:0 3px 0 #a3460a, 0 6px 16px rgba(255,122,26,0.35); margin:8px 0 6px; }
.pane .cta:hover { background:var(--accent-deep); color:#fff; }
.pane figure { margin:14px 0 14px; }
.pane .shot { width:100%; height:auto; display:block; border-radius:6px; border:2px solid #0d0e10; box-shadow:inset 0 2px 8px rgba(0,0,0,0.8), 0 4px 14px rgba(0,0,0,0.45); background:#150900; padding:6px; }
.pane a.shot-link { display:block; }
.pane figcaption { font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--text-muted); margin-top:6px; text-transform:uppercase; }
.pane .faq dt { font-weight:700; margin-top:14px; color:var(--accent-light); }
.pane .faq dd { margin:0; }
.pane .mini { font-size:12.5px; color:var(--text-muted); }
.pane .recipe { background:#17181c; border:1px solid #34363d; border-radius:9px; padding:12px 16px; margin:0 0 12px; }
/* Tableaux de texte (comparatifs, réglages) */
.pane table { border-collapse:collapse; width:100%; margin:0 0 16px; font-size:14px; }
.pane th, .pane td { border:1px solid #34363d; padding:6px 10px; text-align:left; vertical-align:top; }
.pane th { background:#17181c; color:var(--accent-light); font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; font-weight:400; }
/* Grilles 16 pas des guides = look du step sequencer de l'app */
.pane .gridwrap { overflow-x:auto; }
.pane table.grid { width:auto; font-family:var(--mono); font-size:11px; margin:10px 0 12px; background:#1d1e22; }
.pane .grid th, .pane .grid td { padding:3px 5px; text-align:center; min-width:22px; color:var(--text-deep); vertical-align:middle; }
.pane .grid th { background:#17181c; color:var(--text-muted); font-size:10px; letter-spacing:0; text-transform:none; }
.pane .grid td.lbl { text-align:left; background:#17181c; color:var(--text-primary); font-weight:700; white-space:nowrap; }
.pane .grid td.on { background:var(--accent); color:#fff; box-shadow:inset 0 0 6px rgba(255,180,100,.45); }
.pane .grid td.acc { background:#ffc07a; color:#1a1200; font-weight:700; }
.pane .grid td.ghost { background:rgba(255,122,26,.28); color:var(--accent-light); }
.pane .grid td.s1 { background:#6c8cff; color:#fff; font-weight:700; }
.pane .grid td.s2 { background:#4caf50; color:#fff; font-weight:700; }
.pane .legend, .pane .set { font-size:13px; color:var(--text-muted); margin:0 0 14px; }
/* Encadrés */
.pane .tip { background:#17181c; border-left:3px solid var(--accent); border-radius:0 8px 8px 0; padding:10px 14px; margin:0 0 14px; }
.pane .toc { background:#17181c; border:1px solid #34363d; border-radius:9px; padding:12px 18px 12px 34px; margin:0 0 18px; font-size:14px; }
.pane .try { border:1px solid var(--accent); border-radius:9px; padding:14px 18px; margin:22px 0; background:rgba(255,122,26,.08); }
.pane .try strong { color:var(--accent-light); }
.pane .byline { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-muted); margin-bottom:18px; }
.pane .legal { font-size:12.5px; color:var(--text-muted); }
.pane .crumbs { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--text-muted); margin-bottom:10px; text-transform:uppercase; }
.pane .crumbs a { color:var(--text-muted); text-decoration:none; }
.pane .crumbs a:hover { color:var(--accent-light); }

/* Vidéo YouTube (façade, iframe au clic) */
.yt-lite { position:relative; display:block; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000; border:2px solid #0d0e10; margin:14px 0 6px; cursor:pointer; }
.yt-lite img { width:100%; height:100%; object-fit:cover; display:block; }
.yt-lite .yt-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:76px; height:54px; border-radius:14px; background:rgba(232,101,15,0.92); color:#fff; font-size:26px; line-height:54px; text-align:center; box-shadow:0 4px 18px rgba(0,0,0,0.45); }
.yt-lite:hover .yt-play { background:var(--accent); }
.yt-lite iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Cartes de kits : miroir des cartes du panneau DRUMS BANK (drum-panel.css) */
.kits { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:14px 0 10px; }
.kit { background:#17181c; border:1px solid #34363d; border-radius:9px; overflow:hidden; text-decoration:none; color:var(--text-primary); display:flex; flex-direction:column; transition:border-color .15s, box-shadow .15s; font-family:var(--mono); }
.kit:hover { border-color:#4a4d56; box-shadow:0 0 0 1px rgba(255,122,26,.25), 0 0 18px rgba(255,122,26,.15); }
.kit.soon { filter:grayscale(.85); opacity:.6; }
.kit .cover { position:relative; height:118px; background:#2a221a; overflow:hidden; }
.kit .cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.kit:hover .cover img { transform:scale(1.03); }
/* Les pochettes ont leur titre DESSINÉ (DA rétro) : pas de nom ni de voile par-dessus,
   comme .dp-titled dans le panneau DRUMS BANK. Le nom reste dans l'alt de l'image. */
.kit .tag { position:absolute; left:9px; top:9px; z-index:2; font-size:9px; font-weight:700; letter-spacing:0.12em; padding:2px 7px; border-radius:3px; }
.kit .tag.free { background:var(--accent); color:#fff; }
.kit .tag.pro { background:#3fbf6a; color:#0a1a0e; }
.kit .tag.soon { background:#555; color:#ddd; }
.kit .name { display:none; }
.kit .desc { font-family:var(--sans); font-size:13px; line-height:1.45; color:var(--text-deep); padding:10px 12px 10px; }
.kit .sum { font-size:9px; letter-spacing:0.1em; color:var(--text-muted); padding:4px 12px 8px; }
.kit .open { display:block; margin:auto 10px 10px; padding:7px; text-align:center; font-size:10px; letter-spacing:0.14em; font-weight:700; color:var(--accent-bright); background:var(--metal-dark); border:1px solid var(--accent-dim); border-radius:4px; }
.kit:hover .open { background:#ff7a1a22; border-color:var(--accent); }

/* Cartes des guides (hub /guides/) */
.card { display:block; background:#17181c; border:1px solid #34363d; border-radius:9px; padding:14px 16px; margin:0 0 12px; text-decoration:none; color:var(--text-primary); }
.card:hover { border-color:var(--accent); }
.card h2 { margin:0 0 6px; border:none; padding:0; font-size:13px; }
.card p { margin:0; color:var(--text-deep); font-size:14px; }
.card .meta { display:block; margin-top:6px; font-family:var(--mono); font-size:10px; letter-spacing:0.1em; color:var(--text-muted); }

/* ── Footer ──────────────────────────────────────────────── */
.mfoot { margin-top:8px; display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:11px; letter-spacing:0.22em; color:var(--text-deep); flex-wrap:wrap; }
.mfoot .v { color:var(--accent); letter-spacing:0.08em; font-weight:700; }
.mfoot .links { line-height:2; }
.mfoot a { color:var(--text-muted); text-decoration:none; letter-spacing:0.06em; margin-left:4px; }
.mfoot a:hover { color:var(--accent-light); }
.mfoot .copy { font-size:9px; letter-spacing:0.1em; color:var(--text-muted); width:100%; }

/* ── Mobile (360 px) : chassis plein écran, LCD au-dessus du PLAY ── */
@media (max-width:700px) {
  body { padding:6px 4px 16px; }
  .machine { padding:6px 8px 12px; border-radius:12px; }
  .edge { flex-direction:column; align-items:flex-start; }
  .edge-title { font-size:20px; transform:none; }
  .edge-cat { height:28px; }
  .edge-right { transform:none; }
  /* DRUM KITS / GUIDES… sont dans le footer : l'en-tête garde OPEN + TUTO sur une ligne */
  .edge-right .pact.key { display:none; }
  .top { grid-template-columns:1fr; }
  .screen { max-width:none; min-height:0; }
  .wheel-col { flex-direction:row; justify-content:center; gap:14px; padding:6px 0; }
  .wheel { width:76px; height:76px; font-size:12px; }
  .top-right { padding-left:4px; }
  .tab { flex:0 0 auto; padding:8px 10px; font-size:11px; letter-spacing:0.12em; }
  /* fondu à droite = indice que la barre d'onglets défile */
  .tabs { -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent); }
  .pane { padding:14px 14px 20px; font-size:14.5px; }
  .pane h1 { font-size:17px; letter-spacing:0.08em; }
  .mfoot { flex-direction:column; align-items:flex-start; gap:8px; }
}