/* Les pièces des pages d'outils : la recherche à suggestions, le choix de catégorie, le compteur de quantité et le
   bouton « Ajouter ». Elles portent le préfixe `rd-` (raid) parce qu'elles sont nées sur la page Raid, mais cinq
   pages s'en servent — Raid, Arbre, Craft, Recycleur, Électricité — et elles vivaient dans les feuilles du Raid
   (24 oct. 2026 : remontées ici, le texte des règles repris mot pour mot). Pour le choix de catégorie et le
   compteur, les deux couches de `raid-fiche.css` (le socle, puis les dégradés du 6 oct.) sont fondues en une.
   Une page règle la largeur ou la hauteur chez elle ; elle ne redessine pas la pièce.

   La recherche : <div class="rd-search"><i …></i><input …><ul class="rd-suggest" hidden>…</ul></div>
   Le choix : <div class="rd-catpick"><i …></i><select>…</select><i class="rd-catpick__arrow"></i></div>
   Le compteur : <div class="rd-stepper"><button>−</button><b>1</b><button>+</button></div>
   « Ajouter » : <button class="rd-add">Ajouter <b>3</b></button> */

/* --- La recherche d'un objet, et ses suggestions sous le champ --- */
.rd-search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(320px, 100%);
}
.rd-search > i {
  position: absolute;
  left: 11px;
  color: var(--text-soft);
  font-size: 0.85rem;
  pointer-events: none;
}
.rd-search input {
  width: 100%;
  padding: 8px 10px 8px 32px;
  border: 1px solid var(--edge-strong);
  background: #0f0d0b;
  color: var(--cream);
  font: 500 0.92rem Roboto, sans-serif;
}
.rd-search input:focus {
  border-color: var(--cream);
  outline: none;
}
.rd-suggest {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: max(100%, 320px);
  margin: 0;
  padding: 4px;
  border: 1px solid var(--edge-strong);
  background: #17130f;
  box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.6);
  list-style: none;
}
.rd-suggest[hidden] {
  display: none;
}
.rd-suggest button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 8px;
  border: 0;
  background: none;
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.rd-suggest button:hover,
.rd-suggest button:focus-visible {
  background: rgba(var(--sheen-rgb), 0.06);
  outline: none;
}
.rd-suggest b {
  display: block;
  font-weight: 500;
}
.rd-suggest small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rd-suggest .rd-empty {
  padding: 8px;
}

/* --- Le choix d'une catégorie : un <select> habillé, sa flèche dessinée --- */
.rd-catpick {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-width: 210px;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: linear-gradient(180deg, #120f0c, #17130f);
}
.rd-catpick > i:first-child {
  position: absolute;
  left: 14px;
  color: var(--gold);
  font-size: 1.05rem;
  pointer-events: none;
}
.rd-catpick select {
  width: 100%;
  min-height: 44px;
  padding: 0 40px 0 46px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: 700 1rem Roboto, sans-serif;
  appearance: none;
  cursor: pointer;
}
.rd-catpick select option {
  background: #1d1914;
}
.rd-catpick__arrow {
  position: absolute;
  right: 14px;
  color: var(--text-soft);
  pointer-events: none;
}
.rd-catpick:focus-within {
  border-color: var(--gold);
}

/* --- Le compteur de quantité --- */
.rd-stepper {
  display: grid;
  grid-template-columns: 42px 54px 42px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: linear-gradient(180deg, #120f0c, #17130f);
}
.rd-stepper button {
  min-height: 42px;
  border: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
}
.rd-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}
.rd-stepper b {
  display: grid;
  place-items: center;
  border-left: 1px solid var(--edge);
  border-right: 1px solid var(--edge);
  color: var(--cream);
  font: 700 1.05rem "Roboto Condensed", sans-serif;
}

/* --- Le bouton « Ajouter », miel plein, avec son compte --- */
.rd-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  background: var(--honey);
  color: #17120c;
  font: 800 0.95rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 3px 0 #7a5420;
  cursor: pointer;
}
.rd-add:hover,
.rd-add:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
.rd-add:active {
  box-shadow: none;
  transform: translateY(2px);
}
.rd-add b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  background: #17120c;
  color: var(--honey);
}

/* --- La barre d'onglets d'un outil (le Raid, l'Arbre) : le cadre doré, l'outil ouvert en miel plein.
   La page pose la grille (`.rd-tabs` chez elle), parce qu'elle seule sait combien d'onglets elle a. --- */
.rd-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 8px 16px;
  border: 1px solid var(--line-gold);
  /* Opaque : collés en haut, les onglets passent au-dessus de l'outil. */
  background: var(--panel-gradient), #19140f;
  color: var(--cream);
  text-align: left;
}
button.rd-tab {
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
button.rd-tab:hover,
button.rd-tab:focus-visible {
  border-color: var(--gold);
  background: var(--picked-bg);
  outline: none;
}
.rd-tab__ic {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  color: var(--gold);
  font-size: 1.25rem;
}
.rd-tab__text {
  display: grid;
  min-width: 0;
}
.rd-tab b {
  display: block;
  color: var(--cream);
  font: 700 1.1rem "Roboto Condensed", sans-serif;
}
.rd-tab small {
  display: block;
  overflow: hidden;
  color: var(--text-soft);
  font-size: 0.82rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- La carte d'option des outils (une icône, un nom, une note, l'interrupteur) : la carte entière se clique.
   L'interrupteur est celui de la ruche (`switch.css`, `.switch-host` + `.switch__track`) ; la carte choisie prend
   le brun éclairci et le liseré, comme tout ce qui est choisi. --- */
.rd-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 12px 6px 6px;
  border: 1px solid #3a3128;
  background: var(--surface-1);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.rd-switch b {
  display: block;
  color: var(--cream);
}
.rd-switch small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.rd-switch.is-on,
.rd-switch:has(input:checked) {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
}
.rd-switch .switch__track {
  margin-left: auto;
}

/* --- Le compteur en ligne (moins / nombre / plus), plus discret que `.rd-stepper` --- */
.rd-qty {
  display: flex;
  flex: none;
  border: 1px solid var(--edge-strong);
  background: #0f0d0b;
}
.rd-qty button {
  width: 30px;
  border: 0;
  background: none;
  color: var(--cream);
  cursor: pointer;
}
.rd-qty button:hover {
  background: rgba(var(--sheen-rgb), 0.08);
}
.rd-qty b {
  min-width: 34px;
  padding: 5px 0;
  color: var(--cream);
  font: 800 1rem "Roboto Condensed", sans-serif;
  text-align: center;
}

/* --- La case d'un objet (l'icône sur fond sombre) et l'encadré vide, nés avec l'ancien Craft (6 oct. 2026) --- */
.cf-slot {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(var(--sheen-rgb), 0.1);
  background: radial-gradient(circle at 50% 35%, #3a3128, #100d0a 80%);
}
.cf-slot img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}
.cf-slot.is-xl {
  width: 84px;
  height: 84px;
}
.cf-empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed rgba(var(--sheen-rgb), 0.1);
  color: var(--text-soft);
  text-align: center;
}

/* --- Le lien d'action d'un outil, en miel, sans cadre --- */
.pl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: 500 0.84rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.pl-link:hover,
.pl-link:focus-visible {
  color: var(--cream);
  text-decoration: underline;
}
.pl-link:disabled {
  opacity: 0.45;
  cursor: default;
}

/* --- La croix qui retire une ligne, et le bouton rouge qui retire une cible --- */
.pl-x {
  width: 26px;
  height: 26px;
  border: 0;
  background: none;
  color: #7d7469;
  cursor: pointer;
}
.pl-x:hover,
.pl-x:focus-visible {
  color: var(--c-explosives);
}
.rc-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: none;
  color: #c8503c;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.rc-remove:hover,
.rc-remove:focus-visible {
  border-color: rgba(200, 80, 60, 0.5);
  background: rgba(200, 80, 60, 0.12);
}
.rc-remove::after {
  right: 0;
  left: auto;
  transform: translateY(4px) scale(0);
}
.rc-remove:is(:hover, :focus-visible)::after {
  transform: none;
}
.rc-warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid var(--gold);
  background: rgba(var(--gold-rgb), 0.07);
  color: var(--text);
  font-size: 0.86rem;
  line-height: 1.4;
}
.rc-warn i {
  margin-top: 3px;
  color: var(--gold);
}

/* --- L'onglet ouvert d'un outil, son survol et son infobulle (le socle de l'onglet est plus haut) --- */
.rd-tab b {
  font-size: 1.15rem;
}
button.rd-tab:hover,
button.rd-tab:focus-visible {
  border-color: var(--gold);
  background: linear-gradient(110deg, rgba(66, 52, 34, 0.95), rgba(30, 25, 19, 0.97)), #19140f;
}
.rd-tab.is-on,
button.rd-tab.is-on:hover,
button.rd-tab.is-on:focus-visible {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: var(--fill-shadow);
}
.rd-tab.is-on b,
.rd-tab.is-on .rd-tab__ic {
  color: var(--honey-ink);
}
.rd-tab.is-on small {
  color: #3d2a10;
}
.rd-tab[data-tip]::after {
  top: calc(100% + 8px);
  bottom: auto;
}
@media (max-width: 600px) {
  .rd-tab small {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rd-tab {
    transition: none;
  }
  button.rd-tab:hover {
    transform: none;
  }
}

/* --- Le bouton-icône : une icône seule, sans cadre ; `.is-danger` au survol, `.is-key` et `.is-ok` en miel --- */
.pl-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}
.pl-icon:hover,
.pl-icon:focus-visible {
  color: var(--cream);
}
.pl-icon.is-danger:hover {
  color: var(--red-text);
}
.pl-icon.is-key,
.pl-icon.is-ok {
  color: var(--gold);
}

/* --- Le champ de saisie d'un outil (`.pl-in`), et ses sortes --- */
.pl-in {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: #0f0d0b;
  color: var(--text);
  font: 400 0.9rem Roboto, sans-serif;
}
.pl-in:hover {
  border-color: var(--edge);
}
.pl-in:focus {
  border-color: var(--picked-edge);
  outline: none;
}
.pl-in::placeholder {
  color: #7d7469;
}
.pl-in.is-area {
  width: 100%;
  resize: vertical;
  line-height: 1.4;
}
.pl-in.is-strong {
  color: var(--cream);
  font-weight: 500;
}
.pl-in.is-note {
  grid-column: 1 / -1;
  padding: 2px 8px;
  background: transparent;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pl-in.is-tag {
  width: 9em;
  color: var(--text);
  font-size: 0.8rem;
}
.pl-in.is-grid {
  width: 100%;
  color: var(--cream);
  font: 900 1.6rem "Roboto Condensed", sans-serif;
  text-align: center;
  text-transform: uppercase;
}
.pl-in.is-time {
  color: var(--cream);
  font: 800 1rem "Roboto Condensed", sans-serif;
  color-scheme: dark;
}

/* --- Le titre de rubrique, la ligne « rien ici » et les étapes repliées : nés au Craft, repris par l'Électricité
   (et le Recycleur, qui charge la feuille du Craft). --- */
.ck-empty {
  margin: 0;
  padding: 18px 0;
  color: var(--text-soft);
}
.ck-h {
  margin: 16px 0 6px;
  color: var(--gold);
  font: 700 0.82rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Les étapes de fabrication : repliées ; dans l'ordre, le plus profond d'abord */
.ck-steps {
  margin-top: 14px;
  border-top: 1px solid var(--ck-soft, rgba(var(--sheen-rgb), 0.05));
}
.ck-steps summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0 4px;
  color: var(--gold);
  font: 600 0.94rem Roboto, sans-serif;
  list-style: none;
  cursor: pointer;
}
.ck-steps summary::-webkit-details-marker {
  display: none;
}
.ck-steps summary i {
  font-size: 0.8rem;
  transition: transform 0.15s;
}
.ck-steps[open] summary i {
  transform: rotate(90deg);
}
.ck-steps summary small {
  margin-left: auto;
  color: var(--text-soft);
  font-size: 0.82rem;
}
.ck-steps summary:hover span {
  color: var(--cream);
}
.ck-steps ol {
  display: grid;
  gap: 2px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: ck-step;
}
.ck-steps ol li {
  display: grid;
  grid-template-columns: 22px 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  counter-increment: ck-step;
}
.ck-steps ol li::before {
  content: counter(ck-step);
  color: var(--gold);
  font: 800 0.9rem "Roboto Condensed", sans-serif;
  text-align: center;
}
.ck-steps ol b {
  display: block;
  color: var(--cream);
  font: 600 0.92rem Roboto, sans-serif;
}
.ck-steps ol small {
  color: var(--text-soft);
  font-size: 0.8rem;
}