/* =========================
   Soluce — Styles complets
   ========================= */

/* Palette fixe (cohérente dark + violet) */
:root{
  --bg:#0E0A14;        /* noir violacé */
  --panel:#171024;     /* panneaux violet très sombre */
  --muted:#B1A7C7;     /* gris-lavande */
  --text:#F0ECFF;      /* blanc légèrement lavande */
  --accent:#f87bff;
  --accent2:#de8bfa;
  --border:#2F2540;    /* border violet sombre */
}

.soluce-main{ background:var(--bg); color:var(--text); }
.page-title{ color:var(--accent2); margin:26px 0 16px; }

.soluce-section{
  padding: 42px 0 6px;
  border-top:1px solid var(--border);
}
.soluce-section:first-of-type{ border-top:none; }

.section-title{
  color:var(--accent2);
  margin: 10px 0 12px;
  font-size:24px;
  letter-spacing:.3px;
}
.sub-title{
  color:#C4A0FF;
  margin: 14px 0 10px;
}

/* =========================
   Tables (True Ending steps, Armes, Runes)
   ========================= */
.table-wrap{ width:100%; overflow: visible; }

.nice-table{
  width:100%;
  border-collapse: separate;
  border-spacing:0;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
.nice-table thead th{
  text-align:center;
  padding:10px;
  background:#171024 ;
  color:#D9DDED;
  font-weight:700;
}
.nice-table tbody td{
  padding:10px;
  border-top:1px solid var(--border);
  color:#D5D8E6;
  vertical-align: top;
  text-align: center;
}
.nice-table tbody tr:nth-child(odd){ background: #19131f; }
.nice-table tbody tr:hover{ background:#423252 !important;}

/* Miniatures (aperçus) dans les tableaux */
.thumb-img{
  width: 80px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.thumb-img:hover{
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(109,40,217,0.3);
}

/* Tables → cartes en mobile (pas de scroll horizontal) */
@media (max-width: 760px){
  .nice-table thead{ display:none; }
  .nice-table, .nice-table tbody, .nice-table tr, .nice-table td{
    display:block; width:100%;
  }
  .nice-table tr{
    margin:10px 0;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
    background:#151922;
  }
  .nice-table tbody td{
    border-top:none;
    border-bottom:1px solid var(--border);
    text-align:left;
  }
  .nice-table tbody td:last-child{ border-bottom:none; }
  .nice-table tbody td::before{
    content: attr(data-label) " : ";
    display:inline-block;
    min-width:120px;
    color:#9FA5BD;
    font-weight:600;
  }
  .thumb-img{ width: 100%; max-width: 220px; display:block; margin: 6px 0; }
}

/* =========================
   Timeline (texte à gauche, image à droite)
   ========================= */
.timeline{
  display:grid;
  gap:14px;
}
.tl-item{
  display:grid;
  grid-template-columns: 1fr 1fr; /* gauche: texte, droite: image */
  gap:14px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  padding:12px;
}
.tl-text{
  background:#0F131B;
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  color:#D5D8E6;
  line-height:1.6;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.tl-media{
  background:#0F131B;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  display:grid;
  place-items:center;
  cursor:pointer;
}
.tl-media img{
  width:100%;
  height:100%;
  max-height:320px;
  object-fit:cover;
  display:block;
  transition: transform 0.25s ease;
}
.tl-media:hover img{ transform: scale(1.02); }

/* Mobile: image sous le texte */
@media (max-width: 860px){
  .tl-item{ grid-template-columns: 1fr; }
  .tl-text{ order:1; }
  .tl-media{ order:2; }
}

/* =========================
   Lightbox (image seule, fullscreen)
   ========================= */
.lightbox{
  position:fixed; inset:0; z-index:1000; display:none;
}
.lightbox.open{ display:block; }
.lb-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}
.lb-dialog{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:16px;
}
.lb-dialog img{
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0F131B;
  object-fit:contain;
}

/* Bouton fermer */
.lb-close{
  position:absolute;
  top:16px; right:20px;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#171024 ;
  color:#E6E8F0;
  font-size:22px;
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.lb-close:hover{
  color:#fff;
  border-color:#6D28D9;
  background:#222632;
}


/* =========================
   Tables (True Ending steps, Armes, Runes)
   ========================= */
.table-wrap {
  width: 100%;
  overflow: visible;
}

.nice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.nice-table thead th {
  text-align: center;
  padding: 12px 10px;
  background: #171024 ;
  color: #D9DDED;
  font-weight: 700;
  vertical-align: middle;
}

.nice-table tbody td {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  color: #D5D8E6;
  text-align: center;
  vertical-align: middle; /* ✅ centrage vertical ajouté */
  line-height: 1.5;
}

.nice-table tbody tr:nth-child(odd) {
  background: #19131f;
}

.nice-table tbody tr:hover {
  background: #1B1F29;
  transition: background 0.25s ease;
}


/* =========================
   Icônes d'armes
   ========================= */
.icon-cell {
  width: 36px;
  text-align: center;
  vertical-align: middle;
}

.weapon-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: inline-block;
  filter: drop-shadow(0 0 3px rgba(109, 40, 217, 0.3));
  transition: transform 0.25s ease;
}

.weapon-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(109, 40, 217, 0.5));
}




.soluce-main{ background:var(--bg); color:var(--text); }
.page-title{ color:var(--accent2); margin:26px 0 16px; }

.soluce-section{
  padding: 42px 0 6px;
  border-top:1px solid var(--border);
}
.soluce-section:first-of-type{ border-top:none; }

.section-title{
  color:var(--accent2);
  margin: 10px 0 12px;
  font-size:24px;
  letter-spacing:.3px;
}

/* =========================
   Tables (True Ending steps, Armes, Runes)
   ========================= */
.table-wrap {
  width: 100%;
  overflow: visible;
}

.nice-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.nice-table thead th {
  text-align: center;
  padding: 12px 10px;
  background: #171024 ;
  color: #D9DDED;
  font-weight: 700;
  vertical-align: middle;
}

.nice-table tbody td {
  padding: 12px 10px;
  border-top: 1px solid var(--border);
  color: #D5D8E6;
  text-align: center;
  vertical-align: middle; /* centrage vertical */
  line-height: 1.5;
}

.nice-table tbody tr:nth-child(odd) { background: #1E1A2E; }
.nice-table tbody tr:hover {
  background: #19131f;
  transition: background 0.25s ease;
}

/* Miniatures (aperçus) dans les tableaux */
.thumb-img{
  width: 80px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.thumb-img:hover{
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(109,40,217,0.3);
}

/* Icônes d'armes */
.icon-col { width: 50px; }
.icon-cell {
  width: 50px;
  text-align: center;
  vertical-align: middle;
}
.weapon-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: inline-block;
  filter: drop-shadow(0 0 3px rgba(109, 40, 217, 0.3));
  transition: transform 0.25s ease;
}
.weapon-icon:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgba(109, 40, 217, 0.5));
}

/* Tables → cartes en mobile (pas de scroll horizontal) */
@media (max-width: 760px){
  .nice-table thead{ display:none; }
  .nice-table, .nice-table tbody, .nice-table tr, .nice-table td{
    display:block; width:100%;
  }

  .nice-table tbody tr:nth-child(even) {
  background: #19131f;
}

  .nice-table{
    background: none;
    border: none;
  }

  .nice-table tr{
    margin:10px 0;
    border:1px solid var(--border);
    border-radius:12px;
    overflow:hidden;
  }
  .nice-table tbody td{
    border-top:none;
    border-bottom:1px solid var(--border);
    text-align:left;
  }
  .nice-table tbody td:last-child{ border-bottom:none; }
  .nice-table tbody td::before{
    content: attr(data-label) " : ";
    display:inline-block;
    min-width:120px;
    color:#9FA5BD;
    font-weight:600;
  }
  .thumb-img{ width: 100%; max-width: 220px; display:block; margin: 6px 0; }
}

/* =========================
   Lightbox (image seule, fullscreen)
   ========================= */
.lightbox{
  position:fixed; inset:0; z-index:1000; display:none;
}
.lightbox.open{ display:block; }
.lb-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter: blur(2px);
}
.lb-dialog{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:16px;
}
.lb-dialog img{
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  border-radius:12px;
  border:1px solid var(--border);
  background:#0F131B;
  object-fit:contain;
}

/* Bouton fermer */
.lb-close{
  position:absolute;
  top:16px; left:20px;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#171024 ;
  color:#E6E8F0;
  font-size:22px;
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.lb-close:hover{
  color:#fff;
  border-color:#6D28D9;
  background:#312232;
}

td, th, tr{
  text-align: left !important;
}

.dogbold{
  font-weight: bold !important;
}