/* ══════════════════════════════════════════════════════
   COMPONENTS.CSS — Styles des composants modulaires
   Dépend des tokens de style.css (:root variables)
══════════════════════════════════════════════════════ */

/* ── Curseur : tous les éléments interactifs ────────── */
.osint-btn,.osint-tab,.gb-submit,.mshop-buy,
.contact-submit,.qr-tab,.reviews-arr,.rv-dot,
.theme-opt,.mg-close,.mg-btn,
.gb-input,.gb-textarea,.osint-input,
.contact-input,.contact-textarea { cursor: none; }

/* ── Hack overlay : curseur visible (system cursor) ── */
#hackOverlay,
#hackOverlay * { cursor: default !important; }
#hackOverlay button,
#hackOverlay .hack-close { cursor: pointer !important; }

/* ════════════════════════════════════════════════
   1. LIVE LOGS
════════════════════════════════════════════════ */
.logs-card .logs-body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: rgba(0,0,0,.5);
  border-radius: 10px;
  margin: 0 16px;
  padding: 12px;
  height: 192px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: thin;
  scrollbar-color: var(--pg) transparent;
}
.logs-body::-webkit-scrollbar { width: 3px; }
.logs-body::-webkit-scrollbar-thumb { background: var(--pg); border-radius: 2px; }

.log-line {
  display: flex; gap: 8px; align-items: baseline;
  opacity: 0; animation: logIn .25s forwards;
}
@keyframes logIn {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: none; }
}

.log-time { color: rgba(255,255,255,.22); font-size: 10px; flex-shrink: 0; min-width: 50px; }
.log-tag  {
  font-weight: 800; font-size: 9.5px;
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
  letter-spacing: .06em;
}
.log-tag.info  { background: rgba(0,212,255,.14); color: var(--cyan); }
.log-tag.ok    { background: rgba(61,255,160,.11); color: #3dffa0; }
.log-tag.warn  { background: rgba(255,201,60,.11); color: #ffc93c; }
.log-tag.err   { background: rgba(255,45,120,.11); color: var(--pink); }
.log-tag.sys   { background: rgba(165,53,255,.14); color: var(--pl); }

.log-msg       { color: rgba(238,234,255,.65); font-size: 11px; }

.logs-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 14px;
}
.logs-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--tx3);
  font-family: 'JetBrains Mono', monospace;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3dffa0;
  box-shadow: 0 0 7px #3dffa0;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { opacity: 1; transform: scale(1);   box-shadow: 0 0 7px #3dffa0; }
  50%      { opacity: .5; transform: scale(.75); box-shadow: 0 0 4px #3dffa0; }
}
.logs-count { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--tx3); }

/* ════════════════════════════════════════════════
   2. NETWORK GRAPH
════════════════════════════════════════════════ */
.network-card .net-wrap {
  padding: 0 16px 16px;
}
.net-canvas-wrap {
  border-radius: 12px; overflow: hidden;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-bd);
}
#netCanvas { display: block; width: 100%; height: 220px; }

.net-legend {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  padding: 10px 0 0;
}
.net-leg-item {
  display: flex; align-items: center; gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--tx3);
}
.net-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════════════════
   3. OSINT TOOL
════════════════════════════════════════════════ */
.osint-card .osint-inner { padding: 0 16px 16px; }

.osint-form { display: flex; gap: 8px; margin-bottom: 12px; }
.osint-input {
  flex: 1;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-bd);
  border-radius: 10px;
  color: var(--tx);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; padding: 9px 13px;
  outline: none; transition: border-color .2s;
}
.osint-input:focus { border-color: var(--pl); }
.osint-input::placeholder { color: var(--tx3); }

.osint-btn {
  background: var(--pb); border: 1px solid var(--pbh);
  color: var(--pll);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  padding: 9px 16px; border-radius: 10px;
  transition: background .2s, transform .12s;
  white-space: nowrap; letter-spacing: .06em;
}
.osint-btn:hover  { background: var(--pbh); }
.osint-btn:active { transform: scale(.96); }
.osint-btn:disabled { opacity: .45; pointer-events: none; }

.osint-results {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-bd);
  border-radius: 10px;
  padding: 12px 14px;
  display: none; flex-direction: column; gap: 9px;
}
.osint-results.visible { display: flex; }

.osint-scanning {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: var(--cyan);
}
.osint-scan-bar {
  flex: 1; height: 3px;
  background: rgba(255,255,255,.06);
  border-radius: 2px; overflow: hidden;
}
.osint-scan-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--p), var(--cyan));
  border-radius: 2px;
  box-shadow: 0 0 6px var(--pg);
}

.osint-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.osint-key { color: var(--tx3); font-size: 10.5px; }
.osint-val { color: var(--tx); font-size: 11.5px; font-weight: 700; }
.osint-val.ok   { color: #3dffa0; }
.osint-val.warn { color: #ffc93c; }
.osint-val.err  { color: var(--pink); }
.osint-sep { border: none; border-top: 1px solid rgba(255,255,255,.05); }

.osint-header-row {
  display: flex; align-items: center; gap: 8px;
  color: var(--cyan); font-size: 11px; font-weight: 700;
}
.osint-header-row i { font-size: 12px; }

/* ════════════════════════════════════════════════
   4. REVIEWS / AVIS CLIENTS
════════════════════════════════════════════════ */
.reviews-card .reviews-inner { padding: 0 16px 14px; }

.reviews-track-wrap { overflow: hidden; }
.reviews-track {
  display: flex; gap: 10px;
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}

.review-item {
  flex-shrink: 0; width: 100%;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--glass-bd);
  border-radius: 14px; padding: 14px 15px;
}
.review-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.review-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--pb); border: 1px solid var(--pbh);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--pll); flex-shrink: 0;
}
.review-name  { font-weight: 700; font-size: 13px; color: var(--tx); }
.review-stars { font-size: 11px; color: #ffc93c; letter-spacing: 1px; }
.review-date  { font-size: 10px; color: var(--tx3); margin-left: auto; }
.review-text  { font-size: 12.5px; color: var(--tx2); line-height: 1.55; }
.review-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 8px;
  background: rgba(61,255,160,.09); color: #3dffa0;
  border: 1px solid rgba(61,255,160,.2);
  border-radius: 20px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; font-family: 'JetBrains Mono', monospace;
}

.reviews-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding-top: 12px;
}
.rv-dots { display: flex; gap: 5px; }
.rv-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tx3);
  transition: background .2s, transform .2s;
}
.rv-dot.active { background: var(--pl); transform: scale(1.4); }
.reviews-arr {
  background: var(--glass-bg); border: 1px solid var(--glass-bd);
  color: var(--tx2); width: 28px; height: 28px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background .2s, color .2s;
}
.reviews-arr:hover { background: var(--pb); color: var(--pll); }

/* ════════════════════════════════════════════════
   5. GUESTBOOK
════════════════════════════════════════════════ */
.guestbook-card .gb-inner { padding: 0 16px 16px; }

.gb-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.gb-input,.gb-textarea {
  background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-bd);
  border-radius: 10px; color: var(--tx);
  font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 9px 13px; outline: none; transition: border-color .2s;
  resize: none;
}
.gb-input:focus,.gb-textarea:focus { border-color: var(--pl); }
.gb-input::placeholder,.gb-textarea::placeholder { color: var(--tx3); }
.gb-textarea { height: 64px; }
.gb-form-row { display: flex; gap: 8px; align-items: flex-end; }
.gb-form-row .gb-input { flex: 1; }
.gb-submit {
  background: var(--pb); border: 1px solid var(--pbh);
  color: var(--pll); font-size: 12.5px; font-weight: 600;
  padding: 9px 16px; border-radius: 10px;
  display: flex; align-items: center; gap: 6px;
  transition: background .2s, transform .12s;
  white-space: nowrap;
}
.gb-submit:hover  { background: var(--pbh); }
.gb-submit:active { transform: scale(.97); }

.gb-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 250px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--pg) transparent;
}
.gb-list::-webkit-scrollbar { width: 3px; }
.gb-list::-webkit-scrollbar-thumb { background: var(--pg); border-radius: 2px; }

.gb-entry {
  background: rgba(0,0,0,.35); border: 1px solid var(--glass-bd);
  border-radius: 12px; padding: 10px 13px;
  animation: entryIn .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes entryIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.gb-entry-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.gb-pseudo { font-weight: 700; font-size: 12px; color: var(--pll); }
.gb-time   { font-size: 10px; color: var(--tx3); margin-left: auto; }
.gb-msg    { font-size: 12.5px; color: var(--tx2); line-height: 1.5; }
.gb-empty  { color: var(--tx3); font-size: 12px; text-align: center; padding: 20px 0; }

/* ════════════════════════════════════════════════
   6. MINI SHOP
════════════════════════════════════════════════ */
.mini-shop-card .mshop-inner { padding: 0 16px 16px; }

.mshop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.mshop-item {
  background: rgba(0,0,0,.35); border: 1px solid var(--glass-bd);
  border-radius: 14px; padding: 14px 13px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .25s, transform .25s;
}
.mshop-item:hover { border-color: var(--pbh); transform: translateY(-2px); }

.mshop-ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--pb); display: flex; align-items: center;
  justify-content: center; font-size: 16px; color: var(--pll);
}
.mshop-name { font-weight: 700; font-size: 13px; color: var(--tx); }
.mshop-desc { font-size: 11.5px; color: var(--tx2); line-height: 1.45; flex: 1; }
.mshop-foot {
  display: flex; align-items: center;
  justify-content: space-between; margin-top: 4px;
}
.mshop-price {
  font-size: 13px; font-weight: 800; color: var(--pll);
  font-family: 'JetBrains Mono', monospace;
}
.mshop-buy {
  background: var(--pb); border: 1px solid var(--pbh);
  color: var(--pll); font-size: 11px; font-weight: 700;
  padding: 5px 11px; border-radius: 8px; letter-spacing: .04em;
  transition: background .2s, transform .12s;
}
.mshop-buy:hover  { background: var(--pbh); }
.mshop-buy:active { transform: scale(.96); }

.mshop-note {
  font-size: 10.5px; color: var(--tx3);
  text-align: center; padding-top: 10px;
  font-family: 'JetBrains Mono', monospace;
}

/* ════════════════════════════════════════════════
   7. QR CODE
════════════════════════════════════════════════ */
.qr-card .qr-inner { padding: 0 16px 16px; }

.qr-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.qr-tab {
  flex: 1; padding: 8px 6px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid var(--glass-bd);
  color: var(--tx2); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all .2s;
}
.qr-tab:hover  { border-color: var(--glass-bdhov); }
.qr-tab.active { background: var(--pb); border-color: var(--pbh); color: var(--pll); }
.qr-tab i { font-size: 12px; }

.qr-display-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.qr-frame {
  width: 140px; height: 140px;
  background: white; border-radius: 12px;
  padding: 8px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
}
.qr-frame img { width: 100%; height: 100%; image-rendering: pixelated; }
.qr-label {
  font-size: 11px; color: var(--tx3);
  font-family: 'JetBrains Mono', monospace;
  text-align: center; max-width: 200px; word-break: break-all;
}

/* ════════════════════════════════════════════════
   8. QUICK CONTACT
════════════════════════════════════════════════ */
.contact-card .contact-inner { padding: 0 16px 16px; }

.contact-form { display: flex; flex-direction: column; gap: 8px; }
.contact-input,.contact-textarea {
  background: rgba(0,0,0,.45);
  border: 1px solid var(--glass-bd);
  border-radius: 10px; color: var(--tx);
  font-family: 'Inter', sans-serif; font-size: 13px;
  padding: 9px 13px; outline: none; transition: border-color .2s;
  resize: none;
}
.contact-input:focus,.contact-textarea:focus { border-color: var(--pl); }
.contact-input::placeholder,.contact-textarea::placeholder { color: var(--tx3); }
.contact-textarea { height: 80px; }
.contact-row { display: flex; gap: 8px; }
.contact-row .contact-input { flex: 1; }
.contact-or-wrap { display: flex; align-items: center; gap: 8px; flex: 1; }
.contact-or-wrap .contact-input { flex: 1; min-width: 0; }
.contact-or {
  flex-shrink: 0; font-size: 11px; font-weight: 600;
  color: var(--tx3); text-transform: uppercase; letter-spacing: .08em;
  padding: 0 2px;
}

.contact-missing {
  border-color: #f87171 !important;
  animation: contactShake .35s ease;
}
@keyframes contactShake {
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px)}
  60%{transform:translateX(5px)}
  80%{transform:translateX(-3px)}
}

.contact-submit {
  background: linear-gradient(135deg, var(--p), var(--pl));
  border: none; color: #fff;
  font-size: 13px; font-weight: 700;
  padding: 11px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .2s, transform .12s;
}
.contact-submit:hover  { opacity: .88; }
.contact-submit:active { transform: scale(.98); }
.contact-missing { border-color: #ff2d78 !important; animation: shakeMissing .3s ease; }
@keyframes shakeMissing { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.contact-success {
  display: none; text-align: center; padding: 24px 0;
  animation: entryIn .4s both;
}
.contact-success i {
  font-size: 36px; color: #3dffa0;
  margin-bottom: 10px; display: block;
}
.contact-success p { font-size: 13px; color: var(--tx2); }
.contact-success small { font-size: 11px; color: var(--tx3); margin-top: 4px; display: block; }

/* ════════════════════════════════════════════════
   9. HACK MODE OVERLAY
════════════════════════════════════════════════ */
#hackOverlay {
  position: fixed; inset: 0; z-index: 99998;
  background: #000;
  display: none; flex-direction: column;
  font-family: 'JetBrains Mono', monospace;
  overflow: hidden;
}
#hackOverlay.active { display: flex; }

.hack-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0,200,83,.2);
  flex-shrink: 0;
}
.hack-title {
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: #00c853;
}
.hack-title span { color: rgba(0,200,83,.4); }
.hack-close {
  background: none; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5); padding: 4px 14px;
  border-radius: 6px; font-size: 11px; font-weight: 600;
  font-family: 'JetBrains Mono', monospace; letter-spacing: .08em;
  transition: color .2s, border-color .2s;
}
.hack-close:hover { color: #fff; border-color: rgba(255,255,255,.35); }

.hack-body {
  flex: 1; padding: 10px 18px;
  overflow: hidden; display: flex; flex-direction: column;
  gap: 2px; position: relative;
}
.hack-log {
  font-size: 11px; line-height: 1.6;
  white-space: nowrap; overflow: hidden;
  animation: hackIn .1s both;
}
@keyframes hackIn { from { opacity: 0; } to { opacity: 1; } }
.hack-log.green  { color: #00c853; }
.hack-log.cyan   { color: #00e5ff; }
.hack-log.red    { color: #ff5252; }
.hack-log.yellow { color: #ffd740; }
.hack-log.white  { color: rgba(255,255,255,.6); }
.hack-log.dim    { color: rgba(0,200,83,.3); }

.hack-progress {
  flex-shrink: 0;
  padding: 10px 18px 14px;
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid rgba(0,200,83,.12);
}
.hack-prog-bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(0,200,83,.12);
  overflow: hidden;
}
.hack-prog-fill {
  height: 100%; width: 0%;
  background: #00c853;
  box-shadow: 0 0 8px #00c853;
  transition: width .06s linear;
}
.hack-prog-label {
  font-size: 11px; color: rgba(0,200,83,.6); min-width: 36px; text-align: right;
}

.hack-glitch-text {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(28px,7vw,64px); font-weight: 900;
  letter-spacing: .18em; color: #00c853;
  text-shadow: 0 0 24px rgba(0,200,83,.5), 2px 0 #ff0, -2px 0 #f0f;
  display: none; text-align: center;
  animation: hackGlitch .15s infinite;
  pointer-events: none;
}
@keyframes hackGlitch {
  0%,100% { text-shadow: 0 0 24px rgba(0,200,83,.5), 2px 0 #ff0, -2px 0 #f0f; }
  33%     { text-shadow: 0 0 24px rgba(0,200,83,.5), -3px 0 #f0f, 3px 0 #ff0; clip-path: inset(20% 0 60% 0); }
  66%     { text-shadow: 0 0 24px rgba(0,200,83,.5), 4px 0 #0ff, -4px 0 #ff0; }
}

/* Hack FAB */
.fab.f-hack {
  background: rgba(0,200,83,.12);
  border-color: rgba(0,200,83,.3);
  color: #00c853;
}
.fab.f-hack:hover { background: rgba(0,200,83,.22); color: #69ff47; }

/* ════════════════════════════════════════════════
   10. THEME SWITCHER (dans colorPopup)
════════════════════════════════════════════════ */
.theme-section-title {
  font-size: 11px; font-weight: 600; color: var(--tx3);
  letter-spacing: .06em; text-transform: uppercase;
  margin-bottom: 8px;
}
.theme-options { display: flex; gap: 7px; margin-bottom: 16px; }
.theme-opt {
  flex: 1; padding: 9px 4px; border-radius: 10px;
  border: 1.5px solid var(--glass-bd);
  background: rgba(0,0,0,.3);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; color: var(--tx2);
  transition: border-color .2s, background .2s, color .2s;
}
.theme-opt:hover  { border-color: var(--glass-bdhov); }
.theme-opt.active { border-color: var(--pl); background: var(--pdim); color: var(--pll); }

.theme-preview {
  width: 40px; height: 22px; border-radius: 6px;
  overflow: hidden; display: flex;
  border: 1px solid rgba(255,255,255,.08);
}
.tp-s { flex: 1; }

/* ════════════════════════════════════════════════
   11. MINI GAME OVERLAY
════════════════════════════════════════════════ */
#miniGameOverlay {
  position: fixed; inset: 0; z-index: 99997;
  background: rgba(0,0,0,.96);
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
}
#miniGameOverlay.active { display: flex; }

.mg-topbar {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}
.mg-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 800; letter-spacing: .1em;
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.mg-close {
  background: none; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.5); padding: 5px 14px; border-radius: 7px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  transition: color .2s, border-color .2s;
}
.mg-close:hover { color: #fff; border-color: rgba(255,255,255,.35); }

.mg-score-wrap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--tx2);
  display: flex; gap: 20px; align-items: center;
}
.mg-score-val { font-size: 18px; font-weight: 800; color: var(--pll); }
.mg-best-val  { font-size: 14px; font-weight: 700; color: var(--tx3); }

#mgCanvas {
  border: 1px solid var(--glass-bd); border-radius: 14px;
  background: rgba(0,0,0,.6);
  touch-action: none;
  max-width: min(480px, 92vw);
  max-height: min(320px, 55vh);
  width: min(480px, 92vw);
  height: min(320px, 55vh);
}

.mg-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--tx3); text-align: center;
}

/* ════════════════════════════════════════════════
   12. GLITCH EFFECT — classe réutilisable
════════════════════════════════════════════════ */
/* .glitch est déjà sur profNameEl — les keyframes sont dans style.css */
/* Classe additionnelle pour hover-glitch sur n'importe quel élément */
.glitch-hover { position: relative; }
.glitch-hover::before,.glitch-hover::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0; transition: opacity .1s;
  pointer-events: none;
  font: inherit; color: inherit;
}
.glitch-hover::before { color: var(--cyan);  left: 2px; }
.glitch-hover::after  { color: var(--pink); left: -2px; }
.glitch-hover:hover::before,
.glitch-hover:hover::after  { opacity: 1; }
.glitch-hover:hover { animation: glitchShake .2s infinite; }
@keyframes glitchShake {
  0%,100% { transform: none; }
  25%     { transform: skewX(-.5deg) translateX(1px); }
  75%     { transform: skewX(.5deg)  translateX(-1px); }
}

/* ════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .mshop-grid { grid-template-columns: 1fr; }
  .theme-options { gap: 5px; }
  .theme-opt { font-size: 9.5px; }
}

/* ── FAB 5e bouton — espace vertical OK ──────────── */
/* Sur mobile, si la colonne de FABs est trop haute, on réduit le gap */
@media (max-height: 600px) {
  .fabs { gap: 6px !important; }
  .fab  { width: 38px !important; height: 38px !important; }
}

/* ════════════════════════════════════════════════
   CREDIT CARD COMPACT (col-left)
════════════════════════════════════════════════ */
.cc-compact { padding: 0 !important; overflow: hidden; }
.cc-compact .cc-wrap { max-width: 300px; margin: 0 auto; }

/* ════════════════════════════════════════════════
   MUSIC WIDGET — TRACKLIST
════════════════════════════════════════════════ */
.mw-tracklist {
  display: none;
  flex-direction: column;
  position: fixed;
  /* left / top / bottom / width set entirely by JS */
  background: rgba(6,0,14,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--pb);
  border-radius: var(--r);
  max-height: 260px;
  overflow: hidden;
  z-index: 800;
}
.mw-tracklist.open { display: flex; }
.mw-tl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; color: var(--tx3);
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.mw-tl-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}
.mw-tl-list::-webkit-scrollbar { width: 2px; }
.mw-tl-list::-webkit-scrollbar-thumb { background: var(--pb); border-radius: 2px; }
.mw-tl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s;
  border-radius: 0;
}
.mw-tl-item:hover { background: rgba(255,255,255,.07); }
.mw-tl-item.active { background: var(--pdim); }
.mw-tl-item.active .mw-tl-n { color: var(--pl); }
.mw-tl-idx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; color: var(--tx3);
  width: 16px; flex-shrink: 0; text-align: right;
}
.mw-tl-n {
  font-size: 12px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.mw-tl-a {
  font-size: 10.5px; color: var(--tx3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 80px;
}
.mw-tl-ico {
  font-size: 9px; color: var(--pl);
  width: 14px; flex-shrink: 0;
}