/* =====================================================
   Holocron Pad – Mémos  |  holocron-memos.css
   Style rétro SF / HUD impérial Star Wars
   ===================================================== */

/* ── Bouton ────────────────────────────────────────── */
.hm-wrapper {
  display: inline-flex;
  align-items: center;
}

.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(120, 220, 255, .35);
  border-radius: 6px;
  background: rgba(10, 20, 30, .25);
  color: rgba(170, 240, 255, .9);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .82rem;
  cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
  font-family: inherit;
}

.hm-btn:hover {
  background: rgba(10, 20, 30, .45);
  border-color: rgba(120, 220, 255, .65);
  box-shadow: 0 0 8px rgba(120, 220, 255, .18);
}

.hm-btn:active {
  transform: translateY(1px);
}

/* ── Icônes (masque SVG monochromatique) ─────────────── */
.hm-ico {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-block;
  background-color: rgba(170, 240, 255, .92);
  filter: drop-shadow(0 0 6px rgba(120, 220, 255, .35));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* Armes */
.hm-ico-weapons {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17h7v2H3v-2Zm8.5-11 9 9-1.5 1.5-9-9L11.5 6Zm-2 2 1.5 1.5L6 14.5 4.5 13 9.5 8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 17h7v2H3v-2Zm8.5-11 9 9-1.5 1.5-9-9L11.5 6Zm-2 2 1.5 1.5L6 14.5 4.5 13 9.5 8Z'/%3E%3C/svg%3E");
}

/* Talents / Formation */
.hm-ico-training {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 7l11 5 9-4.1V17h2V7L12 2Zm-6 9.2V17c0 1.7 2.7 3 6 3s6-1.3 6-3v-5.8l-6 2.7-6-2.7Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 1 7l11 5 9-4.1V17h2V7L12 2Zm-6 9.2V17c0 1.7 2.7 3 6 3s6-1.3 6-3v-5.8l-6 2.7-6-2.7Z'/%3E%3C/svg%3E");
}

/* Combat */
.hm-ico-combat {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v4h-2V2Zm0 16h2v4h-2v-4ZM2 11h4v2H2v-2Zm16 0h4v2h-4v-2ZM6.3 6.3 7.7 4.9 10.5 7.7 9.1 9.1 6.3 6.3Zm7.2 7.2 1.4-1.4 2.8 2.8-1.4 1.4-2.8-2.8ZM6.3 17.7 9.1 14.9l1.4 1.4-2.8 2.8-1.4-1.4ZM13.5 10.5 16.3 7.7l1.4 1.4-2.8 2.8-1.4-1.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 2h2v4h-2V2Zm0 16h2v4h-2v-4ZM2 11h4v2H2v-2Zm16 0h4v2h-4v-2ZM6.3 6.3 7.7 4.9 10.5 7.7 9.1 9.1 6.3 6.3Zm7.2 7.2 1.4-1.4 2.8 2.8-1.4 1.4-2.8-2.8ZM6.3 17.7 9.1 14.9l1.4 1.4-2.8 2.8-1.4-1.4ZM13.5 10.5 16.3 7.7l1.4 1.4-2.8 2.8-1.4-1.4Z'/%3E%3C/svg%3E");
}

/* ── Overlay (fond sombre) ───────────────────────────── */
.hm-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .65);
  z-index: 99999;
  padding: 24px;
}

.hm-overlay.is-open {
  display: flex;
}

/* ── Popup ────────────────────────────────────────────── */
.hm-popup {
  position: relative;
  width: min(820px, 96vw);
  max-height: 88vh;
  overflow-y: auto;
  background: rgba(8, 14, 18, .96);
  border: 1px solid rgba(120, 220, 255, .3);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(120, 220, 255, .07) inset,
    0 14px 50px rgba(0, 0, 0, .65),
    0 0 40px rgba(0, 90, 140, .12);
  padding: 20px 24px 28px 24px;
  color: rgba(210, 250, 255, .9);
  /* Scanlines subtiles */
  background-image: repeating-linear-gradient(
    180deg,
    rgba(120, 220, 255, .025) 0,
    rgba(120, 220, 255, .025) 1px,
    transparent 2px,
    transparent 8px
  );
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 220, 255, .3) transparent;
}

.hm-popup::-webkit-scrollbar        { width: 6px; }
.hm-popup::-webkit-scrollbar-track  { background: transparent; }
.hm-popup::-webkit-scrollbar-thumb  { background: rgba(120, 220, 255, .3); border-radius: 3px; }

/* ── Bouton fermer ───────────────────────────────────── */
.hm-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(120, 220, 255, .25);
  background: rgba(10, 20, 30, .4);
  color: rgba(170, 240, 255, .9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-family: inherit;
}

.hm-close:hover {
  border-color: rgba(120, 220, 255, .55);
  background: rgba(10, 20, 30, .65);
}

/* ── Contenu du mémo ──────────────────────────────────── */
.hm-content {
  padding-top: 6px;
}

.hm-content h3 {
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(120, 220, 255, .18);
  color: #5df0ff;
  font-size: 1rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding-right: 44px; /* espace pour le bouton ✕ */
}

.hm-content dl {
  margin: 0;
}

.hm-content dt {
  margin-top: 1rem;
  font-weight: 700;
  color: #b3ff7a;
  letter-spacing: .04em;
  font-size: .88rem;
  text-transform: uppercase;
}

.hm-content dt:first-child {
  margin-top: 0;
}

.hm-content dd {
  margin: .25rem 0 .5rem 0;
  padding-left: 1rem;
  font-size: .87rem;
  line-height: 1.55;
  color: rgba(210, 250, 255, .85);
  border-left: 2px solid rgba(120, 220, 255, .15);
}

.hm-content dd em {
  color: rgba(170, 240, 255, .6);
  font-style: italic;
}

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 480px) {
  .hm-popup {
    padding: 14px 14px 20px 14px;
    border-radius: 8px;
  }
  .hm-btn {
    padding: 8px 12px;
    font-size: .78rem;
  }
}

/* Palier headers dans la popup talents (v1.1.0) */
.hm-palier {
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #00eaff;
  margin: 14px 0 6px;
  padding: 4px 8px;
  border-left: 3px solid #00eaff;
  background: rgba(39,211,255,.06);
}
.hm-palier:first-child { margin-top: 4px; }