/* === La Fiche d’une cible, d’après le prototype de TF Crazy (6 oct. 2026) : des cartes au fond brun, liseré
   doré, coins carrés.
   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. === */

/* === La Fiche d'une cible, d'après le prototype de TF Crazy (6 oct.) =====================================
   Les onglets collés au cadre (l'onglet ouvert en texte miel souligné) ; une barre (recherche, catégorie, engins de
   siège, partager) ; à gauche le matériau et les cibles de la catégorie, à droite la fiche (la cible et son côté, le
   bandeau de l'option économique, trois colonnes) ; en bas le plan ouvert, la quantité, « Ajouter au raid ». */
/* Les onglets : le socle est dans tools/raid.css ; ce qui est propre à la Fiche vient plus bas. */
.rd-tabs + .tools-panel,
.rd-tabs + .rd-context + .tools-panel {
  margin-top: 0;
}

/* La barre : la recherche (large), la catégorie, les engins de siège, partager */

/* La fiche : la colonne des cibles, la fiche à droite */
.rd-sheet {
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  margin: 0 -26px;
  border-bottom: 1px solid var(--edge);
}
.rd-sheet__pick {
  padding: 20px 20px 22px 26px;
  border-right: 1px solid var(--edge);
}
.rd-sheet__pick .rd-grades__label {
  margin: 0 0 10px;
  color: var(--cream);
  font: 700 1rem Roboto, sans-serif;
}
.rd-sheet__pick .rd-grades {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 16px;
}
.rd-sheet__pick .rd-grades button {
  justify-content: center;
  padding: 9px 6px;
}
.rd-sheet__pick .rd-grades button.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: #17120c;
}
.rd-sheet__pick .rd-tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.rd-sheet__pick .rd-tile {
  min-height: 128px;
  padding: 16px 6px 12px;
  border-color: var(--edge-strong);
  background: #17130f;
}
.rd-sheet__pick .rd-tile span {
  color: var(--cream);
  font-weight: 700;
}
.rd-sheet__pick .rd-tile.is-on {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.1);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.rd-sheet .rd-detail {
  min-width: 0;
  margin: 0;
  padding: 20px 26px 22px 22px;
}
.rd-sheet .rd-answer {
  border: 0;
  background: none;
}
.rd-sheet .rd-answer__head {
  padding: 0 0 16px;
  border: 0;
  background: none;
}
.rd-sheet .rd-answer__title h4 {
  font-size: 2rem;
  text-transform: none;
}
.rd-sheet .rd-answer__title h4 span {
  color: var(--cream);
}
.rd-sheet .rd-answer__hp {
  font-size: 1.1rem;
}
.rd-sheet .rd-answer__head {
  flex-wrap: nowrap;
}
.rd-sheet .rd-answer__title {
  flex: 1 1 auto;
}
.rd-sheet .rd-answer__side {
  flex: 0 1 470px;
  margin-left: 0;
}
.rd-sheet .rd-sides {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 18px;
  max-width: none;
}
.rd-sheet .rd-sides small {
  text-align: left;
}
.rd-sheet .rd-toggle-2 button {
  padding: 10px 16px;
}
.rd-sheet .rd-toggle-2 button.is-on {
  border-color: var(--gold);
  background: var(--gold);
  color: #17120c;
}

/* Les trois colonnes : des cartes, le liseré et le titre de leur couleur, un nombre fort et son unité */
.rd-sheet .rd-method {
  padding: 0 0 12px;
  border: 1px solid var(--edge);
  border-top: 3px solid var(--mc);
  background: #15120e;
}
.rd-sheet .rd-method + .rd-method {
  border-left: 1px solid var(--edge);
}
.rd-sheet .rd-method > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 10px;
}
.rd-sheet .rd-method > header > i {
  padding-top: 2px;
  color: var(--mc);
  font-size: 1.35rem;
}
.rd-sheet .rd-method h4 {
  margin: 0 0 4px;
}
.rd-sheet .rd-method__hint {
  margin: 0;
}
.rd-sheet .rd-method li {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--edge);
  background: none;
}
.rd-sheet .rd-method li .rd-slot {
  --size: 48px;
}
.rd-method__name {
  display: grid;
  min-width: 0;
}
.rd-method__name b {
  color: var(--cream);
  font: 500 0.98rem Roboto, sans-serif;
}
.rd-method__count {
  display: grid;
  justify-items: end;
}
.rd-method__count b {
  color: var(--mc);
  font: 700 1.5rem "Roboto Condensed", sans-serif;
  line-height: 1;
}
.rd-method__count small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rd-sheet .rd-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 16px 0;
  color: var(--text);
}

/* Le pied : le plan ouvert, la quantité, « Ajouter au raid » */
.rd-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: 500 0.92rem Roboto, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rd-link:hover {
  color: var(--cream);
}
.rd-sheet__qty {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}
.rd-sheet ~ .rd-ref {
  margin-top: 12px;
}

@media (max-width: 1100px) {
  .rd-sheet {
    grid-template-columns: minmax(0, 1fr);
  }
  .rd-sheet__pick {
    border-right: 0;
    border-bottom: 1px solid var(--edge);
  }
  .rd-sheet__pick .rd-tiles {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}
@media (max-width: 600px) {
  .rd-sheet {
    margin: 0 -16px;
  }
  .rd-sheet__pick,
  .rd-sheet .rd-detail {
    padding: 16px;
  }
  .rd-catpick {
    flex: 1 1 100%;
    max-width: none;
  }
  .rd-sheet .rd-answer__head {
    flex-wrap: wrap;
  }
  .rd-sheet .rd-sides {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* La Fiche : les dégradés et les effets de couleur du prototype (6 oct.) : le cadre sombre un peu transparent sur le
   décor, l'onglet ouvert éclairé par le bas, les tuiles en dégradé (la choisie rougeoie en brun doré), le bandeau miel
   en dégradé, chaque colonne teintée de sa couleur en haut, le bouton miel en relief. */
.rd-sheet__pick .rd-grades button {
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  background: linear-gradient(180deg, #221c16, #17130f);
}
.rd-sheet__pick .rd-grades button.is-on,
.rd-sheet .rd-toggle-2 button.is-on {
  border-color: #e9b14e;
  background: linear-gradient(180deg, #ebb24f, #c98d2e);
  color: var(--honey-ink);
  box-shadow: inset 0 1px 0 rgba(var(--sheen-rgb), 0.3);
}
.rd-sheet__pick .rd-tile {
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  background: linear-gradient(180deg, #221c16 0%, #16120e 100%);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.rd-sheet__pick .rd-tile:hover {
  border-color: rgba(var(--gold-rgb), 0.45);
  background: linear-gradient(180deg, #2a2219 0%, #18140f 100%);
}
.rd-sheet__pick .rd-tile.is-on {
  border-color: var(--gold);
  background: radial-gradient(120% 90% at 50% 0%, rgba(var(--gold-rgb), 0.12), rgba(48, 36, 22, 0.45) 60%, #1a140e 100%);
  border-color: rgba(var(--gold-rgb), 0.75);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.3);
}
.rd-sheet .rd-method {
  border-color: rgba(var(--sheen-rgb), 0.06);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mc) 16%, transparent) 0, transparent 92px),
    linear-gradient(180deg, #1c1813, #141110);
}
.rd-sheet .rd-method li {
  border-top-color: rgba(var(--sheen-rgb), 0.05);
}
.rd-sheet .rd-method li .rd-slot {
  border: 1px solid rgba(var(--sheen-rgb), 0.07);
  background: linear-gradient(160deg, #2a241d, #0f0d0b);
}
.rd-sheet ~ .rd-ref {
  border-color: rgba(var(--gold-rgb), 0.2);
  background: linear-gradient(180deg, rgba(28, 23, 18, 0.94), rgba(17, 14, 11, 0.95));
}

/* --- Retours du 6 oct. sur la Fiche --- */

/* Les onglets des outils, comme ceux du Marché : des boutons encadrés d'un liseré doré (le socle est dans
   tools/raid.css), l'outil ouvert en miel plein */
.rd-tabs {
  margin-bottom: 12px;
}
.tools-page .tools-panel {
  border-top: 1px solid rgba(var(--gold-rgb), 0.22);
}

/* La couleur du matériau sur la silhouette du bloc : paille, bois brun, pierre grise, métal argenté, blindé argent et
   or. Un masque CSS peint l'icône (servie par le site). */
.rd-tint {
  display: block;
  width: 82%;
  height: 82%;
  background: linear-gradient(160deg, #d8d2c4, #8f887a);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* La colonne des cibles reste à l'écran pendant qu'on lit la fiche (sous l'en-tête du site) */
@media (min-width: 1101px) {
  .rd-sheet__pick {
    position: sticky;
    top: calc(var(--head) + var(--banner, 0px) + 12px);
    align-self: start;
    border-right: 0;
  }
  .rd-sheet .rd-detail {
    border-left: 1px solid var(--edge);
  }
}

/* Une colonne vide (« Aucune arme à feu ne l'abîme ») : alignée sur le titre, en italique sourd */
.rd-sheet .rd-method > .rd-empty {
  padding: 14px 16px 6px 52px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.05);
  color: var(--text-soft);
  font-style: italic;
}

/* Les engins de siège : une carte comme les trois colonnes (bronze), ses munitions sur deux colonnes */
.rd-sheet .rd-siege-block,
.rd-siege-block.rd-method {
  --mc: var(--c-siege);
  margin: 12px 0 0;
  padding: 0 0 8px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  border-top: 3px solid var(--mc);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--mc) 16%, transparent) 0, transparent 92px),
    linear-gradient(180deg, #1c1813, #141110);
}
.rd-siege-block > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px 16px 10px;
}
.rd-siege-block > header > i {
  padding-top: 2px;
  color: var(--mc);
  font-size: 1.35rem;
}
.rd-siege-block h4 {
  margin: 0 0 4px;
  color: var(--mc);
}
.rd-siege-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.rd-siege-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.05);
}
.rd-siege-list li:nth-child(even) {
  border-left: 1px solid rgba(var(--sheen-rgb), 0.05);
}
.rd-siege-list .rd-slot {
  --size: 48px;
  border: 1px solid rgba(var(--sheen-rgb), 0.07);
  background: linear-gradient(160deg, #2a241d, #0f0d0b);
}
.rd-siege-list .rd-res {
  gap: 4px;
  margin-top: 4px;
}
.rd-siege-list .rd-res span {
  padding: 2px 7px 2px 3px;
  background: rgba(var(--shadow-rgb), 0.35);
  font-size: 0.8rem;
}
.rd-siege-list .rd-res img {
  width: 18px;
  height: 18px;
}
.rd-siege-list .rd-badge {
  justify-self: start;
  margin-top: 4px;
}

/* Les animations : les tuiles et la fiche entrent en cascade quand on change de catégorie, de matériau, de cible ou
   de côté (rien au simple ajout) ; un survol vivant ; rien avec « moins d'animations » */
@media (prefers-reduced-motion: no-preference) {
  #tg-pick.is-entering .rd-tile,
#rd-detail.is-entering .rd-answer__head,
#rd-detail.is-entering .rd-method,
#rd-detail.is-entering .rd-method li {
    animation: rise-in 0.32s ease both;
    animation-delay: calc(var(--i, 0) * 22ms);
  }
  .rd-sheet__pick .rd-tile:hover {
    transform: translateY(-2px);
  }
  .rd-sheet .rd-method li {
    transition: background 0.2s;
  }
  .rd-sheet .rd-method li:hover {
    background: rgba(var(--sheen-rgb), 0.025);
  }
  @keyframes rd-star {
    50% {
      transform: scale(1.12) rotate(8deg);
      filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.6));
    }
  }
}
@media (max-width: 900px) {
  .rd-siege-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .rd-siege-list li:nth-child(even) {
    border-left: 0;
  }
}

/* --- La Fiche, au plus près du prototype (6 oct.) : chaque ligne d'une colonne est une petite carte (fond, bord, un
   espace entre elles), l'icône dans une case encadrée. (Le grain est posé sur toute la page : base.css.) */
.rd-sheet .rd-method ul,
.rd-siege-list {
  display: grid;
  gap: 6px;
  padding: 0 10px;
}
.rd-sheet .rd-method li,
.rd-siege-list li {
  grid-template-columns: 54px minmax(0, 1fr) auto;
  padding: 9px 12px 9px 9px;
  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));
}
.rd-sheet .rd-method li.is-best {
  border-color: color-mix(in srgb, var(--mc) 35%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 20%, #221c16), rgba(24, 20, 16, 0.95));
}
.rd-sheet .rd-method li .rd-slot,
.rd-siege-list .rd-slot {
  --size: 54px;
  border: 1px solid rgba(var(--sheen-rgb), 0.1);
  background: radial-gradient(circle at 50% 35%, #3a3128, #100d0a 80%);
  box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), 0.5);
}
.rd-sheet .rd-method__name b {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}
.rd-sheet .rd-method > .rd-empty {
  margin: 0 10px;
  padding: 14px 12px;
  border: 1px dashed rgba(var(--sheen-rgb), 0.08);
}
.rd-sheet .rd-more-link {
  margin: 12px 12px 0;
}
/* « Voir les N » / « Moins » : le lien d'action du site (.text-link, buttons.css) : miel, capitales, la flèche dans
   un petit carré qui glisse au survol (la flèche est l'icône du bouton : à droite pour ouvrir, en haut pour replier). */
.rd-sheet .rd-more-link {
  gap: 10px;
  color: #edaa4d;
  font: 800 0.8rem/1.2 Roboto, sans-serif;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.rd-sheet .rd-more-link i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #a56c2e;
  font-size: 0.8rem;
  transition: transform 0.2s, background-color 0.2s, border-color 0.2s;
}
.rd-sheet .rd-more-link:hover,
.rd-sheet .rd-more-link:focus-visible {
  color: #ffc56b;
}
.rd-sheet .rd-more-link:hover i,
.rd-sheet .rd-more-link:focus-visible i {
  border-color: #edaa4d;
  background-color: #edaa4d22;
  transform: translateX(4px);
}
/* Les engins de siège : leur carte bien à part, sous les trois colonnes */
.rd-sheet .rd-siege-block {
  margin-top: 16px;
  padding-bottom: 10px;
}
.rd-siege-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .rd-siege-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Les matériaux, aux couleurs du jeu (6 oct., d'après les captures de Rust) : paille jaune sèche, bois brun gris
   délavé, pierre beige grise, tôle rouillée orange brun, blindé gris acier. Reprise par la silhouette d'un bloc, les
   boutons de matériau et les lignes du tableau. */
.is-twigs { --g: var(--g-twigs); }
.is-wood { --g: var(--g-wood); }
.is-stone { --g: var(--g-stone); }
.is-metal { --g: var(--g-metal); }
.is-toptier { --g: var(--g-toptier); }
.rd-tint.is-twigs { background: linear-gradient(160deg, #f6e08a, #b8952f); }
.rd-tint.is-wood { background: linear-gradient(160deg, #c98e5e, #6e4224); }
.rd-tint.is-stone { background: linear-gradient(160deg, #f0eee9, #9a978f); }
.rd-tint.is-metal { background: linear-gradient(160deg, #f08a5e, #c2502c 55%, #7e2f18); }
.rd-tint.is-toptier { background: linear-gradient(160deg, #8f959c, #5a6067 55%, #34383d); }
/* Les boutons de matériau : un liseré bas de la couleur du matériau ; choisi, un fond teinté de sa couleur */
.rd-grades button {
  box-shadow: inset 0 -3px 0 var(--g, transparent);
}
.rd-sheet__pick .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), 0 0 12px color-mix(in srgb, var(--g) 30%, transparent);
}

/* --- Le tableau de référence, ouvert d'office, comme une carte de la Fiche --- */
.rd-ref {
  margin-top: 16px;
  border: 1px solid rgba(var(--sheen-rgb), 0.06);
  border-top: 3px solid var(--gold);
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), 0.1) 0, transparent 110px),
    linear-gradient(180deg, #1c1813, #141110);
}
.rd-ref summary {
  padding: 16px 22px 12px;
}
.rd-ref summary span {
  color: var(--gold);
  font: 700 1.1rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rd-ref summary span::before {
  content: "\25B8\00A0";
  display: inline-block;
  transition: transform 0.2s;
}
.rd-ref[open] summary span::before {
  content: "\25B8\00A0";
  transform: rotate(90deg);
}
#rd-ref-body {
  padding: 0 22px 22px;
}
/* Les modes : un sélecteur à trois cases, la case choisie à la couleur de son moyen */
.rd-modes {
  gap: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
}
.rd-modes button {
  padding: 8px 18px;
  border: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, #221c16, #17130f);
  color: var(--text);
  font: 600 0.92rem "Roboto Condensed", sans-serif;
}
.rd-modes button + button {
  border-left: 1px solid rgba(var(--gold-rgb), 0.16);
}
.rd-modes button.is-on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 55%, var(--honey-ink)), color-mix(in srgb, var(--mc) 30%, #120d08));
  color: #fff8e8;
  box-shadow: inset 0 -3px 0 var(--mc);
}
.rd-select select {
  min-height: 38px;
  border-color: rgba(var(--gold-rgb), 0.22);
  background: linear-gradient(180deg, #120f0c, #17130f);
}
/* Le tableau : en-têtes en cases d'objet, la première colonne collée, une ligne par matériau à sa couleur, les
   cases en petites pastilles carrées teintées selon la valeur ; la meilleure de la ligne en miel. */
.rd-table-wrap {
  border: 1px solid rgba(var(--sheen-rgb), 0.05);
  background: rgba(var(--shadow-rgb), 0.18);
}
.rd-table {
  border-collapse: separate;
  border-spacing: 0;
}
.rd-table thead th {
  padding: 12px 6px 10px;
  border-bottom: 1px solid rgba(var(--sheen-rgb), 0.06);
  background: rgba(var(--shadow-rgb), 0.2);
  color: var(--text);
  font: 700 0.8rem/1.2 "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.rd-table thead th {
  vertical-align: top;
}
/* Une colonne d'arme garde de quoi lire son nom (téléphone : « Munition explosive de calibre 5,56 » s'empilait sur cinq
   lignes dans 61 px) ; le tableau défile de côté (.rd-table-wrap) */
.rd-table thead th:not(:first-child) {
  min-width: 96px;
}
.rd-table thead th .rd-slot {
  --size: 46px;
  border: 1px solid rgba(var(--sheen-rgb), 0.1);
  background: radial-gradient(circle at 50% 35%, #3a3128, #100d0a 80%);
}
.rd-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 190px;
  padding: 8px 14px 8px 12px;
  border-left: 3px solid var(--g, transparent);
  background: linear-gradient(90deg, #1e1914, #19150f);
  font: 600 0.95rem Roboto, sans-serif;
}
.rd-table tbody th small {
  color: var(--g, var(--text-soft));
  font-weight: 700;
}
.rd-table tbody tr:nth-child(even) td {
  background: rgba(var(--sheen-rgb), 0.018);
}
.rd-table tbody tr:hover td,
.rd-table tbody tr:hover th {
  background: rgba(var(--gold-rgb), 0.06);
}
.rd-table td {
  padding: 7px 4px;
  border-top: 1px solid rgba(var(--sheen-rgb), 0.04);
}
.rd-cell {
  min-width: 52px;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--mc) calc(10% + var(--heat) * 35%), transparent);
  background: color-mix(in srgb, var(--mc) calc(6% + var(--heat) * 30%), #15110d);
  color: var(--parchment);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
  transition: transform 0.15s, border-color 0.15s;
}
.rd-cell:hover {
  border-color: var(--mc);
  transform: translateY(-1px);
}
.rd-cell.is-best {
  outline: 0;
  border-color: var(--value-strong);
  background: linear-gradient(180deg, #ebb24f, #c98d2e);
  color: var(--honey-ink);
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  #rd-ref-body.is-entering tbody tr {
    animation: rise-in 0.3s ease both;
    animation-delay: calc(var(--i, 0) * 30ms);
  }
}

/* --- Les infobulles de la page Raid : celles du site ([data-tip], base.css). Seul leur placement change près d'un
   bord : alignées à gauche (premier bouton d'une rangée) ou à droite (dernier bouton, nombres d'une colonne, dernières
   colonnes du tableau), ou dessous (onglets des outils, en-tête du tableau : le cadre du tableau rogne ce qui dépasse
   en haut). Deux lignes (le nom, puis le détail) pour l'en-tête et les cases du tableau. --- */
.rd-grades button:first-child::after,
.rd-modes button:first-child::after,
.rd-sheet__qty span::after {
  left: 0;
  transform: translateY(4px) scale(0);
}
.rd-grades button:last-child::after,
.rd-modes button:last-child::after,
.rd-method__count::after,
.rd-table thead th:last-child::after,
.rd-table td:nth-last-child(-n + 2) .rd-cell::after {
  right: 0;
  left: auto;
  transform: translateY(4px) scale(0);
}
.rd-grades button:is(:first-child, :last-child):is(:hover, :focus-visible)::after,
.rd-sheet__qty span:is(:hover, :focus-visible)::after,
.rd-modes button:is(:first-child, :last-child):is(:hover, :focus-visible)::after,
.rd-method__count:is(:hover, :focus-visible)::after,
.rd-table thead th:last-child:is(:hover, :focus-visible)::after,
.rd-table td:nth-last-child(-n + 2) .rd-cell:is(:hover, :focus-visible)::after {
  transform: none;
}
/* La quantité : alignée à gauche, assez étroite pour tenir sur mobile (le mot est au milieu de l'écran) */
.rd-sheet__qty span::after {
  max-width: 220px;
}
/* Le compte de « Ajouter au raid » : à droite, plus étroite (le bouton est à gauche de l'écran sur mobile) */
.rd-add b::after {
  right: 0;
  left: auto;
  max-width: 200px;
  transform: translateY(4px) scale(0);
}
.rd-add b:hover::after {
  transform: none;
}
.rd-table thead th[data-tip]::after {
  top: calc(100% + 8px);
  bottom: auto;
}
.rd-table thead th[data-tip]::after,
.rd-cell::after {
  white-space: pre-line;
}
.rd-cell:is(:hover, :focus-visible) {
  z-index: 2; /* devant la première colonne, collée */
}
.rd-answer__hp[data-tip],
.rd-method__count[data-tip],
.rd-sheet__qty [data-tip],
.rd-badge[data-tip],
.rd-table thead th[data-tip] {
  cursor: help;
}
:is(.rd-answer__hp, .rd-method__count, .rd-sheet__qty span, .rd-badge, .rd-cell, .rd-table thead th):focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}

/* --- Les notes de la page (côté faible, engins de siège, tableau de référence, hypothèses) : lisibles, pas en
   gris effacé ; les notes du tableau et les hypothèses avec un liseré miel pour qu'on les voie. */
.rd-sheet .rd-sides small,
.rd-sides small,
.rd-method__hint {
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.45;
}

/* --- Les trois colonnes, alignées (6 oct.) : la phrase du titre sur deux lignes réservées, chaque ligne de la même
   hauteur (nom sur deux lignes au plus, une ligne par détail, coupée proprement), le chiffre dans une colonne de
   largeur fixe, et « Voir les N » en bas de sa carte, à la même hauteur d'une colonne à l'autre. */
.rd-sheet .rd-method {
  display: flex;
  flex-direction: column;
}
.rd-sheet .rd-method__hint {
  min-height: calc(2 * 1.45em);
}
.rd-sheet .rd-method li {
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 8px 10px 8px 8px;
}
.rd-sheet .rd-method li .rd-slot {
  --size: 44px;
}
.rd-sheet .rd-method__count b {
  font-size: 1.3rem;
}
.rd-sheet .rd-method__name {
  gap: 2px;
}
.rd-sheet .rd-method__name b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.rd-sheet .rd-method__name small {
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rd-sheet .rd-method__name small + small {
  color: color-mix(in srgb, var(--text-soft) 75%, transparent);
}
.rd-sheet .rd-method__count {
  min-width: 3.2em;
}
.rd-sheet .rd-method > .rd-more-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
}

/* --- Quatre éléments retravaillés (6 oct.) --- */
/* Les engins de siège : un interrupteur (comme le module renforcé), l'icône, le titre et la liste des engins */
.rd-siege-switch {
  min-height: 46px;
  padding: 6px 12px;
  border-color: rgba(var(--gold-rgb), 0.2);
  background: linear-gradient(180deg, #221c16, #17130f);
}
.rd-siege-switch > .fa-chess-rook {
  color: var(--c-siege);
  font-size: 1.15rem;
}
.rd-siege-switch b {
  font: 700 0.92rem "Roboto Condensed", sans-serif;
}
.rd-siege-switch small {
  font-size: 0.8rem;
}
.rd-siege-switch:hover {
  border-color: rgba(var(--gold-rgb), 0.45);
}
.rd-siege-switch:has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
/* Le côté faible : une ligne courte et son icône ; l'explication au survol */
.rd-sheet .rd-sides small.rd-sides__tip,
.rd-sides small.rd-sides__tip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.85rem;
  cursor: help;
}
.rd-sides__tip i {
  color: var(--gold);
}
/* Les engins de siège : deux repères courts */
.rd-sheet .rd-method__hint.rd-siege-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.rd-siege-tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rd-siege-tags i {
  color: var(--mc);
  font-size: 0.8rem;
}
/* Le tableau : la phrase courte, et la légende de la case en miel à droite */
.rd-ref summary small {
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}
.rd-ref__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.85rem;
  font-style: normal;
  cursor: help;
}
.rd-ref__legend i {
  width: 18px;
  height: 14px;
  border: 1px solid var(--value-strong);
  background: linear-gradient(180deg, #ebb24f, #c98d2e);
}
/* La légende du tableau est au bord droit : son infobulle s'aligne à droite */
.rd-ref__legend::after {
  right: 0;
  left: auto;
  max-width: 260px;
  transform: translateY(4px) scale(0);
}
.rd-ref__legend:is(:hover, :focus-visible)::after {
  transform: none;
}

/* À quoi sert « Ajouter au raid » : une ligne à gauche du pied, et le lien vers le raid une fois des cibles ajoutées */
.rd-sheet__why {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  margin: 0;
  color: var(--text-soft);
  font-size: 0.88rem;
  line-height: 1.45;
}
.rd-sheet__why > i {
  margin-top: 3px;
  color: var(--gold);
}
.rd-sheet__why b {
  color: var(--cream);
}
.rd-sheet__why .rd-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  color: var(--gold);
  font-weight: 700;
}
/* « Voir les N » : comme le lien d'action de l'accueil, un trait fin se trace sous le texte au survol */
.rd-sheet .rd-more-link {
  position: relative;
}
.rd-sheet .rd-more-link::before {
  content: "";
  position: absolute;
  left: 0;
  right: 32px;
  bottom: -4px;
  height: 1px;
  background: #edaa4d;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}
.rd-sheet .rd-more-link:hover::before,
.rd-sheet .rd-more-link:focus-visible::before {
  transform: scaleX(1);
}
/* Les boutons de matériau : le nom sur une seule ligne, dans toutes les langues */
.rd-grades button {
  white-space: nowrap;
}
/* Les boutons de matériau de la Fiche : quatre sur une ligne, le nom tient dans le bouton dans toutes les langues
   (icône et espaces resserrés) */
.rd-sheet__pick .rd-grades button {
  gap: 5px;
  min-width: 0;
  padding: 9px 4px;
  font-size: 0.86rem;
}
.rd-sheet__pick .rd-grades button img {
  flex: none;
  width: 20px;
  height: 20px;
}
/* À quoi sert « Ajouter au raid » : sur le liseré miel, comme les notes du tableau */
.rd-sheet__why {
  padding: 8px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
  color: var(--text);
}
.rd-sheet__pick .rd-grades button {
  flex-direction: column;
  gap: 4px;
  padding: 8px 4px 9px;
  line-height: 1.1;
}
.rd-sheet__pick .rd-grades button img {
  width: 24px;
  height: 24px;
}

/* Les infobulles de la page Raid : deux lignes au plus, coupées là où le texte le dit (« \n ») */
.tools-page [data-tip]::after {
  white-space: pre-line;
}

/* Le côté faible : son infobulle assez large pour garder ses deux lignes */
.rd-sides__tip::after {
  width: max-content;
  max-width: min(360px, 90vw);
}