/* === Calculer un raid (6 oct. 2026) : à gauche les cibles du raid et le catalogue, à droite la comparaison des
   méthodes.
   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. === */

/* ═══ Calculer un raid, d'après le prototype (6 oct.) : à gauche les cibles du raid et le catalogue, à droite la
   comparaison des méthodes. Les cartes reprennent celles de la Fiche (fond brun, liseré doré, coins carrés). ═══ */
.rc {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}
.rc-card {
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  border-top: 3px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), 0.08) 0, transparent 120px),
    linear-gradient(180deg, #1c1813, #141110);
}
/* L'en-tête d'une carte : l'icône dans sa case, le titre et sa phrase, une action à droite */
.rc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  padding: 18px 20px 14px;
}
.rc-head__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  background: radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb), 0.22), rgba(20, 16, 12, 0.9) 75%);
  color: var(--gold);
  font-size: 1.15rem;
}
.rc-head__text {
  flex: 1 1 200px;
  min-width: 0;
}
.rc-head h3,
.rc-head h4 {
  margin: 0;
  color: var(--cream);
  font: 700 1.3rem "Roboto Condensed", sans-serif;
}
.rc-head h4 {
  font-size: 1.1rem;
}
.rc-head p {
  margin: 2px 0 0;
  color: var(--text-soft);
  font-size: 0.88rem;
}
.rc-head.is-sub .rc-head__ic {
  width: 36px;
  height: 36px;
  font-size: 1rem;
}
.rc-head .rd-search {
  flex: 0 1 260px;
}

/* La liste : un tableau en grille (la même grille pour l'en-tête et les lignes, les colonnes restent alignées) */
#rc-list {
  padding: 0 20px 16px;
}
.rc-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1.5fr) minmax(0, 1fr) 118px 102px 34px;
  align-items: center;
  gap: 10px;
}
.rc-row--head {
  padding: 0 10px 8px;
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.06);
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rc-rows {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.rc-rows > .rc-row {
  min-height: 60px;
  padding: 7px 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: linear-gradient(180deg, rgba(42, 35, 28, 0.9), rgba(24, 20, 16, 0.95));
}
.rc-n {
  color: var(--text-soft);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
  text-align: center;
}
.rc-target {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rc-target > span {
  display: grid;
  min-width: 0;
}
.rc-target b {
  overflow: hidden;
  color: var(--cream);
  font: 700 0.95rem Roboto, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-target small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rc-target:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rc-mat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--g, var(--text));
  font: 600 0.9rem Roboto, sans-serif;
}
.rc-mat img {
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.rc-none {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-row .rd-line-side button {
  padding: 6px 12px;
}
.rc-row .rd-qty {
  justify-self: start;
}
/* Le catalogue : sous la liste, séparé par un filet ; la catégorie, le matériau, les tuiles */
.rc-catalog {
  border-top: 1px solid rgba(var(--gold-rgb), 0.16);
  padding-bottom: 20px;
}
.rc-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 0 20px 14px;
}
.rc-catalog #rd-pick {
  padding: 0 20px;
}
.rc-catalog .rd-grades__label {
  margin: 0 0 8px;
  color: var(--cream);
  font: 700 0.95rem Roboto, sans-serif;
}
.rc-catalog .rd-grades {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}
.rc-catalog .rd-grades button {
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  background: linear-gradient(180deg, #221c16, #17130f);
}
.rc-catalog .rd-grades button.is-on {
  border-color: var(--g);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 55%, var(--honey-ink)), color-mix(in srgb, var(--g) 30%, #120d08));
  color: #fff8e8;
  box-shadow: inset 0 -3px 0 var(--g);
}
.rc-catalog .rd-tiles {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 6px;
}
.rc-catalog .rd-tile {
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  background: linear-gradient(180deg, #221c16 0%, #16120e 100%);
}
.rc-catalog .rd-tile:hover {
  border-color: rgba(var(--gold-rgb), 0.45);
}
.rc-catalog .rd-tile.is-in {
  border-color: rgba(var(--gold-rgb), 0.75);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--gold-rgb), 0.12), rgba(48, 36, 22, 0.45) 60%, #1a140e 100%);
}

/* La comparaison : les onglets (le sélecteur des modes du tableau), puis la réponse de l'onglet */
.rc-compare #rd-side {
  padding: 0 20px 20px;
}
.rc-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 16px;
}
.rc-tabs button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 11px 10px;
}
.rc-tabs button.is-explosives { --mc: var(--c-explosives); }
.rc-panel.is-explosives,
.rc-best.is-explosives { --tone: var(--c-explosives); }
.rc-panel.is-melee,
.rc-best.is-melee { --tone: var(--c-melee); }
.rc-panel.is-guns,
.rc-best.is-guns { --tone: var(--c-guns); }
/* Le bandeau d'une réponse : liseré de la couleur du moyen, le chiffre fort à droite */
.rc-best {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 18px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  border-left: 3px solid var(--tone);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone) 16%, #1b1610), #15110d 80%);
}
.rc-best > div:first-child {
  flex: 1 1 200px;
  min-width: 0;
}
.rc-kicker {
  margin: 0 0 2px;
  color: var(--tone);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rc-best h4 {
  margin: 0;
  color: var(--cream);
  font: 700 1.25rem "Roboto Condensed", sans-serif;
}
.rc-note {
  margin: 4px 0 0;
  line-height: 1.4;
}
.rc-big {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: rgba(var(--shadow-rgb), 0.25);
}
.rc-big > img,
.rc-big > i {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  color: var(--tone);
  font-size: 1.6rem;
  line-height: 34px;
  text-align: center;
  object-fit: contain;
}
.rc-big b {
  color: var(--cream);
  font: 700 1.9rem/1 "Roboto Condensed", sans-serif;
}
.rc-big small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
/* Les lignes d'une réponse : l'objet, ce qu'il fait, le chiffre à droite */
.rc-parts {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.rc-parts li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: linear-gradient(180deg, rgba(42, 35, 28, 0.9), rgba(24, 20, 16, 0.95));
}
.rc-parts li > span {
  display: grid;
  min-width: 0;
}
.rc-parts b {
  color: var(--cream);
  font: 700 0.98rem Roboto, sans-serif;
}
.rc-parts b em {
  color: var(--tone);
  font: 700 1.3rem "Roboto Condensed", sans-serif;
  font-style: normal;
}
.rc-parts small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-count {
  justify-items: end;
}
.rc-count b {
  color: var(--tone);
  font: 700 1.15rem "Roboto Condensed", sans-serif;
}
.rc-h {
  margin: 18px 0 8px;
  color: var(--cream);
  font: 700 0.95rem Roboto, sans-serif;
}
.rc-h small {
  margin-left: 8px;
  color: var(--text-soft);
  font: 400 0.8rem Roboto, sans-serif;
}
/* À fabriquer : les étapes d'atelier, un liseré miel pour les distinguer des ressources à récolter */
.rc-res.is-crafted span {
  border-left: 2px solid rgba(var(--gold-rgb), 0.55);
}
/* Le coût en ressources : une case par ressource (icône, quantité, nom) */
.rc-res {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 4px;
}
.rc-res span {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: rgba(var(--shadow-rgb), 0.22);
}
.rc-res img {
  grid-row: span 2;
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.rc-res b {
  color: var(--cream);
  font: 700 1rem "Roboto Condensed", sans-serif;
}
.rc-res small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Le choix de l'explosif : la liste à droite, comme la catégorie */
.rc-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  background: linear-gradient(180deg, #221c16, #17130f);
}
.rc-pick > i {
  width: 22px;
  color: var(--gold);
  text-align: center;
}
.rc-pick > span:first-of-type {
  display: grid;
  flex: 1 1 160px;
}
.rc-pick b {
  color: var(--cream);
}
.rc-pick small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rc-pick .rd-catpick {
  flex: 1 1 280px;
}
.rc-pick .rd-catpick select {
  padding-left: 14px;
  font-size: 0.92rem;
  text-align: left;
}
.rc-panel > .rc-best,
.rc-panel > .rd-more {
  margin-top: 16px;
}
.rc-panel > :first-child {
  margin-top: 0;
}
/* La comparaison rapide : les deux autres méthodes en vraies unités, un clic ouvre leur onglet */
.rc-quickwrap {
  margin-top: 6px;
}
.rc-quick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.rc-quick__item {
  --tone: var(--c-explosives);
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--sheen-rgb), 0.07);
  border-left: 3px solid var(--tone);
  background: linear-gradient(180deg, rgba(42, 35, 28, 0.9), rgba(24, 20, 16, 0.95));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.rc-quick__item.is-melee { --tone: var(--c-melee); }
.rc-quick__item.is-guns { --tone: var(--c-guns); }
.rc-quick__item:hover {
  border-color: color-mix(in srgb, var(--tone) 60%, transparent);
  transform: translateY(-1px);
}
.rc-quick__item > i {
  grid-row: span 2;
  color: var(--tone);
  font-size: 1.2rem;
}
.rc-quick__item > span {
  grid-row: span 2;
  color: var(--cream);
  font: 700 0.95rem Roboto, sans-serif;
}
.rc-quick__item > b {
  justify-self: end;
  color: var(--cream);
  font: 700 1.1rem "Roboto Condensed", sans-serif;
}
.rc-quick__item > small {
  justify-self: end;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rc-quick__left {
  display: block;
  color: var(--gold);
  font: 500 0.8rem Roboto, sans-serif;
  font-style: normal;
}
/* Le détail par cible : replié ; une ligne par cible, une colonne par méthode */
.rc-compare .rd-more[data-more="detail"] {
  margin-top: 16px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.06);
}
.rc-compare .rd-more[data-more="detail"] > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding-top: 14px;
  color: var(--cream);
  font: 700 0.95rem Roboto, sans-serif;
}
.rc-compare .rd-more[data-more="detail"] > summary i {
  color: var(--gold);
}
.rc-compare .rd-more[data-more="detail"] > summary small {
  color: var(--text-soft);
  font: 400 0.82rem Roboto, sans-serif;
}
.rc-detail {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.rc-detail li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(var(--sheen-rgb), 0.05);
  background: rgba(var(--shadow-rgb), 0.18);
}
.rc-detail li.rc-detail__head {
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.rc-detail__head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rc-detail__head .is-explosives i { color: var(--c-explosives); }
.rc-detail__head .is-melee i { color: var(--c-melee); }
.rc-detail__head .is-guns i { color: var(--c-guns); }
.rc-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.rc-cell > span {
  display: grid;
  min-width: 0;
}
.rc-cell b {
  overflow: hidden;
  color: var(--cream);
  font: 600 0.84rem Roboto, sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-cell small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rc-cell.is-none {
  justify-content: center;
  color: var(--text-soft);
}
.rc-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(var(--sheen-rgb), 0.1);
  color: var(--text-soft);
  text-align: center;
}
/* Les engins de siège, dans l'onglet explosifs */
.rc-panel .rd-siege-block {
  margin-top: 16px;
}
@media (prefers-reduced-motion: no-preference) {
  .rc-panel > * {
    animation: rise-in 0.28s ease both;
  }
}
@media (max-width: 1100px) {
  .rc {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Petits écrans : une ligne de la liste sur trois rangs (la cible, son matériau, puis côté et quantité) */
@media (max-width: 640px) {
  .rc-head,
  #rc-list,
  .rc-filters,
  .rc-catalog #rd-pick,
  .rc-compare #rd-side {
    padding-right: 14px;
    padding-left: 14px;
  }
  .rc-row--head {
    display: none;
  }
  .rc-rows > .rc-row {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas: "n target remove" "mat mat mat" "side side qty";
    row-gap: 8px;
  }
  .rc-rows > .rc-row > .rc-n { grid-area: n; }
  .rc-rows > .rc-row > .rc-target { grid-area: target; }
  .rc-rows > .rc-row > .rc-remove {
    grid-area: remove;
    justify-self: end;
  }
  .rc-rows > .rc-row > .rc-mat { grid-area: mat; }
  .rc-rows > .rc-row > .rc-target b {
    white-space: normal;
  }
  /* Sans matériau (une porte, un coffre) : pas de rang vide */
  .rc-rows > .rc-row > .rc-target + .rc-none {
    display: none;
  }
  .rc-rows > .rc-row > .rd-line-side,
  .rc-rows > .rc-row > .rc-mat + .rc-none,
  .rc-rows > .rc-row > .rc-none + .rc-none { grid-area: side; }
  .rc-rows > .rc-row > .rd-qty {
    grid-area: qty;
    justify-self: end;
  }
  .rc-head .rd-search {
    flex-basis: 100%;
  }
  .rc-quick {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc-detail li {
    grid-template-columns: minmax(0, 1fr);
  }
  .rc-detail li.rc-detail__head {
    display: none;
  }
}

/* Le raid partagé qui ne se lit pas : au-dessus de l'onglet Raid (raid-view.js). Écrite dans la feuille de la
   Génétique jusqu'au 24 oct. 2026, là où personne ne l'aurait cherchée. */
.rc-share-failed {
  margin-bottom: 12px;
}