/* ================================
   JDR Projecteur – thème rétro-futuriste
   ================================ */
:root{
  --jp-bg:#0a0f14; --jp-panel:#0f141b; --jp-panel-2:#121a23;
  --jp-text:#d7e7ff; --jp-muted:#98a8c3;
  --jp-accent:#36e0ff; --jp-accent-2:#ffd166;
  --jp-sep:#1c2733; --jp-glow:0 0 14px rgba(54,224,255,.35);
  --jp-radius:16px; --jp-radius-sm:12px; --jp-gap:14px;
  --jp-border:1px solid var(--jp-sep);
  --jp-scanline:linear-gradient(to bottom,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,0) 2px,
    rgba(255,255,255,0) 100%
  );
}

/* Conteneur principal */
.jdr-projecteur{
  position:relative;
  background:var(--jp-panel);
  color:var(--jp-text);
  border:var(--jp-border);
  border-radius:var(--jp-radius);
  padding:18px;
  box-shadow: inset 0 0 0 1px rgba(54,224,255,.08), 0 12px 36px rgba(0,0,0,.35);
  overflow:hidden;
}
.jdr-projecteur::before{
  content:""; position:absolute; inset:0;
  background-image:var(--jp-scanline); background-size:100% 3px;
  opacity:.35; pointer-events:none; mix-blend-mode:screen;
}
.jdr-projecteur::after{
  content:""; position:absolute; inset:-1px;
  border-radius:inherit; box-shadow:var(--jp-glow); pointer-events:none;
}

/* Titre / texte */
.jdr-title{
  margin:0 0 10px; letter-spacing:.03em;
  text-transform:uppercase; color:var(--jp-accent);
  text-shadow:0 0 10px rgba(54,224,255,.35);
}
.jdr-text{ margin-bottom:10px; }
.jdr-text p{ margin:.4rem 0; line-height:1.5; }

/* Galerie */
.jdr-gallery{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--jp-gap); margin:12px 0;
}
@media (max-width:900px){ .jdr-gallery{ grid-template-columns:1fr; } }
.jdr-image{
  overflow:hidden; border-radius:var(--jp-radius-sm);
  border:1px solid rgba(54,224,255,.25);
  background:linear-gradient(180deg,var(--jp-panel) 0%,var(--jp-panel-2) 100%);
}
.jdr-image img{
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
}

/* Loot */
.jdr-loot-box{
  border:1px dashed rgba(54,224,255,.35);
  border-radius:var(--jp-radius-sm);
  padding:10px 12px;
  background:rgba(18,26,35,.55);
}
.jdr-loot-title{
  font-weight:600; color:var(--jp-accent-2);
  margin-bottom:6px; letter-spacing:.02em;
}
.jdr-loot-list{ margin:0; padding-left:1rem; }
.jdr-loot-list li{ margin:.25rem 0; }

/* Statut */
.jdr-status{ margin-top:10px; color:var(--jp-muted); font-size:.95rem; }

/* Timeline */
.jdr-timeline{
  margin-top:18px;
  border-top:1px solid rgba(54,224,255,.15);
  padding-top:12px;
}
.jdr-tl-title{
  margin:0 0 8px; color:var(--jp-accent);
  letter-spacing:.02em;
}
.jdr-history-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}
.jdr-history-item{ margin:0; padding:0; }
.jdr-history-link{
  width:100%; text-align:left; cursor:pointer;
  display:inline-block;
  background:rgba(18,26,35,.55);
  border:1px solid rgba(54,224,255,.25);
  border-radius:10px; padding:8px 10px; color:var(--jp-text);
  transition:border-color .2s, box-shadow .2s, transform .06s;
}
.jdr-history-link:hover{
  border-color:var(--jp-accent);
  box-shadow:0 0 10px rgba(54,224,255,.25);
  transform:translateY(-1px);
}
.jdr-history-title{ font-weight:600; }
.jdr-history-meta{ margin-left:.5rem; opacity:.75; font-size:.92em; }
.jdr-tl-empty{ opacity:.7; color:var(--jp-muted); }

/* Thème clair */
.jdr-projecteur.theme-light{
  --jp-panel:#f7fafc; --jp-panel-2:#ffffff; --jp-text:#0b1622; --jp-muted:#405168;
  --jp-accent:#008fb2; --jp-accent-2:#b26a00; --jp-sep:#d8e2ee; --jp-glow:0 0 10px rgba(0,143,178,.25);
  background:var(--jp-panel); color:var(--jp-text);
  box-shadow: inset 0 0 0 1px rgba(0,143,178,.1), 0 8px 26px rgba(0,0,0,.12);
}
.jdr-projecteur.theme-light .jdr-title{ color:var(--jp-accent); text-shadow:none; }
.jdr-projecteur.theme-light .jdr-image{ border-color:rgba(0,143,178,.25); }
.jdr-projecteur.theme-light .jdr-loot-box{
  background:rgba(255,255,255,.7);
  border-color:rgba(0,143,178,.25);
}
.jdr-projecteur.theme-light .jdr-loot-title{ color:#b26a00; }
.jdr-projecteur.theme-light .jdr-status{ color:#405168; }

/* ================================
   MODALE D’APERÇU (rétro-futuriste)
   ================================ */
.jdr-modal{position:fixed; inset:0; z-index:9999; display:none;}
.jdr-modal__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,20,30,.85) 0%, rgba(0,0,0,.92) 60%);
  backdrop-filter: blur(2px);
}
.jdr-modal__panel{
  position:relative;
  margin:5vh auto 0;
  max-width:1024px;
  background:
    linear-gradient(180deg, rgba(8,14,20,.98) 0%, rgba(12,18,26,.98) 100%),
    repeating-linear-gradient( to bottom, rgba(255,255,255,.03), rgba(255,255,255,.03) 2px, transparent 3px, transparent 6px );
  border:1px solid rgba(54,224,255,.35);
  border-radius:18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 18px rgba(54,224,255,.25);
  padding:20px 22px;
  color:var(--jp-text);
}
.jdr-modal__panel::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; box-shadow:0 0 18px rgba(54,224,255,.35); pointer-events:none;
}
.jdr-modal__close{
  position:absolute; top:10px; right:12px;
  font-size:22px; line-height:1;
  border:0; background:transparent; color:#9ee7ff; cursor:pointer;
  text-shadow:0 0 10px rgba(54,224,255,.35);
}
.jdr-modal__content .jdr-title{
  margin-top:0; margin-bottom:8px; color:var(--jp-accent);
}
.jdr-modal__content .jdr-gallery{
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:12px;
}
.jdr-modal__content .jdr-image{
  border:1px solid rgba(54,224,255,.35); border-radius:12px; overflow:hidden;
}
.jdr-modal__content .jdr-image img{ width:100%; height:auto; object-fit:contain; }
.jdr-modal__content .jdr-loot{ margin-top:10px; }
/* ============================
   JDR Table MJ – v1.4.0
   Layout compact 2 colonnes
   ============================ */

.jdr-tablemj {
  padding: .8rem;
  background: #0f141b;
  color: #e6f0ff;
  border-radius: 12px;
  border: 1px solid #1c2733;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  font-family: system-ui, sans-serif;
  font-size: .93rem;
}

.jdr-tablemj > h2 {
  margin: 0 0 .7rem;
  font-size: 1rem;
  color: #36e0ff;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* --- Layout 2 colonnes --- */
.jdr-tmj-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  align-items: start;
}
@media (max-width: 700px) {
  .jdr-tmj-grid { grid-template-columns: 1fr; }
}

.jdr-tmj-left  { display: flex; flex-direction: column; gap: .5rem; }
.jdr-tmj-right { display: flex; flex-direction: column; gap: .6rem; }

/* --- Labels --- */
.jdr-mj-form label {
  display: block;
  font-size: .8rem;
  color: rgba(180,220,255,.6);
  margin-bottom: .15rem;
}

/* --- Inputs / textarea / select --- */
.jdr-mj-form input[type="text"],
.jdr-mj-form textarea,
.jdr-mj-form select {
  width: 100%;
  background: #0d131a;
  border: 1px solid #1f2b38;
  border-radius: 8px;
  padding: .45rem .6rem;
  color: #e6f0ff;
  font-size: .9rem;
  box-sizing: border-box;
  transition: border-color .15s;
}
.jdr-mj-form input[type="text"]:focus,
.jdr-mj-form textarea:focus {
  outline: none;
  border-color: rgba(54,224,255,.5);
}
.jdr-mj-form textarea {
  resize: none;
  min-height: 52px;
  overflow: hidden;
  line-height: 1.45;
}

/* --- Images --- */
.jdr-mj-images { margin: .3rem 0; }
.jdr-mj-images-list {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.jdr-mj-images-list .jdr-img img {
  width: 60px; height: 60px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* --- Section repliable (Loot) --- */
.jdr-collapsible-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  user-select: none;
  color: rgba(180,220,255,.7);
  font-size: .85rem;
  padding: .3rem 0;
  border-bottom: 1px solid rgba(54,224,255,.12);
  margin-bottom: .1rem;
}
.jdr-collapsible-header .jdr-caret {
  transition: transform .2s;
  font-size: .75rem;
  line-height: 1;
}
.jdr-collapsible-header.open .jdr-caret { transform: rotate(90deg); }
.jdr-collapsible-body { display: none; padding-top: .4rem; }
.jdr-collapsible-body.open { display: block; }
.jdr-loot-controls { display: flex; gap: .4rem; flex-wrap: wrap; }
.jdr-mj-loot-list { margin-top: .4rem; display: flex; flex-direction: column; gap: .3rem; }

/* --- Boutons génériques --- */
.jdr-btn, .jdr-loot-btn {
  background: #1c2733;
  border: 1px solid rgba(54,224,255,.35);
  border-radius: 7px;
  color: #36e0ff;
  padding: .4rem .75rem;
  cursor: pointer;
  font-size: .88rem;
  transition: box-shadow .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.jdr-btn:hover, .jdr-loot-btn:hover {
  background: #223040;
  border-color: #36e0ff;
  box-shadow: 0 0 8px rgba(54,224,255,.2);
}
.jdr-btn.primary { background: #143345; border-color: #36e0ff; }
.jdr-btn.primary:hover { background: #164155; }

/* --- Barre d'actions --- */
.jdr-mj-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: .3rem;
}
.jdr-mj-actions select { width: auto; flex: 0 0 auto; }

/* --- Aperçu projecteur courant --- */
.jdr-tmj-section-label {
  font-size: .78rem;
  color: rgba(54,224,255,.6);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .3rem;
}
#jdr-current-view {
  border: 1px solid rgba(54,224,255,.3);
  border-radius: 8px;
  padding: .6rem .7rem;
  background: linear-gradient(180deg, rgba(18,26,35,.6), rgba(12,16,22,.6));
  min-height: 38px;
  font-size: .88rem;
}
#jdr-current-view .jdr-p-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: .25rem;
  color: #c8eeff;
}
#jdr-current-view .jdr-p-text { line-height: 1.45; }
#jdr-current-view img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
  margin: .3rem 0;
}

/* --- Historique --- */
#jdr-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(54,224,255,.2) transparent;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
#jdr-history-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  background: rgba(18,26,35,.55);
  border: 1px solid rgba(54,224,255,.18);
  border-radius: 7px;
  padding: .4rem .6rem;
}
.jdr-h-title {
  font-weight: 600;
  font-size: .87rem;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jdr-h-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.jdr-h-show, .jdr-h-del {
  background: #10161f;
  border: 1px solid rgba(54,224,255,.2);
  border-radius: 5px;
  padding: .25rem .5rem;
  cursor: pointer;
  color: #bfeeff;
  font-size: .82rem;
}
.jdr-h-show:hover { border-color: #36e0ff; }
.jdr-h-del { color: #ff8080; border-color: rgba(255,80,80,.25); }
.jdr-h-del:hover { border-color: #ff5050; }

/* --- Loot item --- */
.jdr-loot-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(18,26,35,.55);
  border: 1px solid rgba(54,224,255,.2);
  border-radius: 7px;
  padding: .35rem .5rem;
  font-size: .87rem;
}
.jdr-loot-item img { width: 38px; height: 38px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.jdr-loot-item .name { font-weight: 600; }