/* === Le Raid (raid-view.js) : les trois outils en onglets, la barre (engins de siège, aide, partage), les cibles
   en tuiles et le choix du matériau, la recherche et ses suggestions, la réponse en trois colonnes, les
   engins de siège à part et le tableau de référence replié.
   Vient du découpage de tools.css (21 oct. 2026), qui faisait 9 464 lignes à lui seul. Les tranches se chargent
   dans l’ordre d’avant, aucun style n’a changé d’effet. === */

/* --- Les trois outils, en onglets comme ceux du Marché : l'outil ouvert en miel plein ; ils défilent avec la page
   (pas collés en haut de l'écran, demandé le 6 oct.) --- */
.rd-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 14px;
}
.rd-tabs + .tools-panel {
  margin-top: 0;
}
.rd-view[hidden] {
  display: none;
}

/* --- La barre d'outils : les engins de siège, l'aide, le partage --- */
.rd-check[hidden] {
  display: none;
}
.rd-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
}
.rd-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rd-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--edge-strong);
  background: none;
  color: var(--text);
  font: 600 0.9rem Roboto, sans-serif;
  cursor: pointer;
}
.rd-share:hover,
.rd-share:focus-visible {
  border-color: var(--cream);
  color: var(--cream);
  outline: none;
}

/* --- Les cibles en tuiles, et le choix du matériau --- */
.rd-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.rd-grades button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 5px;
  border: 1px solid #3a3128;
  background: var(--surface-2);
  color: var(--text);
  font: 500 0.92rem Roboto, sans-serif;
  cursor: pointer;
}
.rd-grades button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.rd-grades button:hover {
  border-color: #7a6650;
}
.rd-grades button.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
  color: var(--cream);
  font-weight: 700;
}
.rd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.rd-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid var(--edge);
  background: var(--surface-2);
  color: var(--text);
  font: 500 0.9rem/1.2 Roboto, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.rd-tile small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rd-tile:hover,
.rd-tile:focus-visible {
  border-color: #7a6650;
  outline: none;
  transform: translateY(-2px);
}
.rd-tile.is-on,
.rd-tile.is-in {
  border-color: #3a3128;
  background: var(--picked-bg);
  box-shadow: inset 0 -3px 0 var(--honey);
}
.rd-tile__count,
.rd-tile__plus {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font: 900 0.8rem "Roboto Condensed", sans-serif;
}
.rd-tile__count {
  background: var(--honey);
  color: #17120c;
}
.rd-tile__plus {
  border: 1px solid var(--edge-strong);
  color: var(--text-soft);
  opacity: 0;
  transition: opacity 0.15s;
}
.rd-tile:hover .rd-tile__plus {
  opacity: 1;
}

/* --- La recherche et ses suggestions --- */

/* --- La réponse : la cible et la phrase, puis trois colonnes de couleur --- */
.rd-detail {
  scroll-margin-top: calc(var(--head) + var(--banner, 0px) + 16px);
}
.rd-answer {
  border: 1px solid var(--edge);
  background: var(--surface-2);
}
.rd-answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--edge);
  background: linear-gradient(90deg, #241e17, var(--surface-2));
}
.rd-answer__title {
  flex: 1 1 320px;
  min-width: 0;
}
.rd-answer__title h4 {
  margin: 0;
  color: var(--cream);
  font: 900 1.6rem "Roboto Condensed", sans-serif;
  text-transform: uppercase;
}
.rd-answer__title h4 span {
  color: var(--text-soft);
}
.rd-answer__hp {
  margin: 0;
  color: var(--text-soft);
}
.rd-answer__hp b {
  color: var(--cream);
  font-size: 1.15rem;
}
.rd-answer__side {
  margin-left: auto;
}
.rd-answer__noweak {
  margin: 0 0 0 auto;
  max-width: 240px;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: right;
}
.rd-sides {
  display: grid;
  justify-items: end;
  gap: 6px;
  max-width: 300px;
}
.rd-sides small {
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: right;
}
.rd-toggle-2 {
  display: inline-flex;
  border: 1px solid var(--edge-strong);
}
.rd-toggle-2 button {
  padding: 7px 12px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 500 0.88rem Roboto, sans-serif;
  cursor: pointer;
}
.rd-toggle-2 button:hover {
  color: var(--cream);
}
.rd-toggle-2 button.is-on {
  background: var(--picked-bg);
  box-shadow: inset 0 0 0 1px var(--picked-edge);
  color: var(--cream);
  font-weight: 700;
}
.rd-answer__variants {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 20px 0;
}
.rd-answer__variants .rd-grades {
  margin: 0;
}
/* Le module renforcé d'un établi : un interrupteur */
.rd-method {
  --mc: var(--c-explosives);
  padding: 16px 18px 18px;
  border-top: 3px solid var(--mc);
}
.rd-method.is-melee { --mc: var(--c-melee); }
.rd-method.is-guns { --mc: var(--c-guns); }
.rd-method + .rd-method {
  border-left: 1px solid var(--edge);
}
.rd-method h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--mc);
  font: 800 1rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rd-method__hint {
  margin: 0 0 12px;
  color: var(--text-soft);
  font-size: 0.84rem;
}
.rd-method ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rd-method li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.04);
}
.rd-method li > span {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.25;
}
.rd-method li small {
  display: block;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rd-method li > b {
  color: var(--cream);
  font: 900 1.15rem "Roboto Condensed", sans-serif;
  text-align: right;
}
.rd-method li.is-best {
  margin: 0 -8px;
  padding: 9px 8px;
  border-top: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 16%, transparent), transparent);
}
.rd-method li.is-best > b {
  color: var(--mc);
  font-size: 1.5rem;
}
.rd-more-link {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rd-more-link:hover {
  color: var(--cream);
}

/* --- Les engins de siège : à part, avec leur coût (pierres, fragments) --- */
.rd-siege-block {
  margin: 0 20px;
  padding: 14px 0 4px;
  border-top: 3px solid var(--c-siege);
}
.rd-siege-block h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  color: var(--c-siege);
  font: 800 1rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rd-line-side {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--edge-strong);
}
.rd-line-side button {
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 500 0.8rem Roboto, sans-serif;
  cursor: pointer;
}
.rd-line-side button:hover {
  color: var(--cream);
}
.rd-line-side button.is-on {
  background: var(--picked-bg);
  box-shadow: inset 0 0 0 1px var(--picked-edge);
  color: var(--cream);
}
.rd-res {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rd-res span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 4px;
  background: #0f0d0b;
  color: var(--parchment);
  font: 700 0.88rem "Roboto Condensed", sans-serif;
}
/* Les parties secondaires, repliées */
.rd-more {
  margin-top: 10px;
}
.rd-more summary {
  padding: 6px 0;
  color: var(--text-soft);
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}
.rd-more summary::-webkit-details-marker {
  display: none;
}
.rd-more summary::before {
  content: "+ ";
}
.rd-more[open] summary::before {
  content: "− ";
}
.rd-more summary:hover {
  color: var(--cream);
}

/* --- Le tableau de référence (replié) --- */
.rd-ref {
  margin-top: 30px;
  border: 1px solid var(--edge);
  background: var(--surface-2);
}
.rd-ref summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 16px 20px;
  list-style: none;
  cursor: pointer;
}
.rd-ref summary::-webkit-details-marker {
  display: none;
}
.rd-ref summary span {
  color: var(--cream);
  font: 800 1.05rem "Roboto Condensed", sans-serif;
}
.rd-ref summary span::before {
  content: "+ ";
  color: var(--text-soft);
}
.rd-ref[open] summary span::before {
  content: "− ";
}
.rd-ref summary small {
  color: var(--text-soft);
  font-size: var(--fs-small);
}
#rd-ref-body {
  padding: 0 20px 20px;
}
.rd-ref__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 12px;
}
.rd-ref__note {
  margin-bottom: 12px;
}
.rd-modes {
  display: flex;
  gap: 18px;
}
.rd-modes button {
  --mc: var(--c-explosives);
  padding: 4px 0;
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--text-soft);
  font: 700 0.95rem Roboto, sans-serif;
  cursor: pointer;
}
.rd-modes button.is-melee { --mc: var(--c-melee); }
.rd-modes button.is-guns { --mc: var(--c-guns); }
.rd-modes button:hover {
  color: var(--cream);
}
.rd-modes button.is-on {
  border-bottom-color: var(--mc);
  color: var(--cream);
}
.rd-select {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
}
.rd-select select {
  padding: 6px 10px;
  border: 1px solid var(--edge-strong);
  background: #0f0d0b;
  color: var(--cream);
  font: 500 0.92rem Roboto, sans-serif;
}
.rd-table-wrap {
  overflow-x: auto;
}
.rd-table {
  --mc: var(--c-explosives);
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.rd-table.is-melee { --mc: var(--c-melee); }
.rd-table.is-guns { --mc: var(--c-guns); }
.rd-table thead th {
  padding: 8px 6px;
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  text-transform: uppercase;
  vertical-align: bottom;
}
.rd-table thead th .rd-slot {
  display: grid;
  margin: 0 auto 6px;
}
.rd-table tbody th {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 0;
  color: var(--cream);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.rd-table tbody th small {
  color: var(--text-soft);
}
.rd-table td {
  padding: 5px 4px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.04);
  text-align: center;
}
.rd-cell {
  display: inline-block;
  min-width: 44px;
  padding: 4px 6px;
  background: color-mix(in srgb, var(--mc) calc(8% + var(--heat) * 40%), transparent);
  color: var(--parchment);
  font: 800 0.95rem "Roboto Condensed", sans-serif;
  cursor: help;
}
.rd-cell.is-best {
  outline: 2px solid var(--mc);
  color: var(--cream);
}
.rd-none {
  color: #5b5246;
}
.rd-assume {
  margin-top: 18px;
}
.rd-share.is-team { border-color: #8a7038; }