/* === Le dossier d’une cible : le plan ouvert rappelé sur la fiche et le calcul, les blocs du dossier (titre,
   texte, image annotée, carte du wipe), les outils d’annotation, la galerie et la vue en grand.
   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. === */

/* Le plan ouvert, rappelé sur la fiche et le calcul */
.rd-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--picked-edge);
  background: var(--picked-bg);
  color: var(--text);
  font-size: 0.9rem;
}
.rd-context[hidden] {
  display: none;
}
.rd-context > i {
  color: var(--honey);
}
.rd-context > span {
  flex: 1 1 260px;
}
.rd-context b {
  color: var(--cream);
}
.rd-to-plan {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-right: 6px;
}
.rd-plan-pick,
.rd-plan-pick {
  border-color: var(--edge-strong);
}
/* Sans plan ouvert : à quoi ça sert, les cinq étapes en tuiles, créer ; Mes plans en cartes (capture de la base,
   cible, jour, joueurs, état). Les matières du thème, comme le Marché. */
.pl-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pl-status i {
  font-size: 0.8rem;
}
.pl-status.is-live i {
  color: var(--c-guns);
}
.pl-history {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
}
.pl-history ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}
.pl-history li + li {
  border-top: 1px solid var(--edge);
}
.pl-history b {
  display: block;
  color: var(--text);
  font-weight: 500;
}
.pl-history small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
/* Les choix à boutons collés (je suis, présence, murs, certitude) : l'état choisi en brun, souligné */
.pl-seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--edge-strong);
}
.pl-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 500 0.88rem Roboto, sans-serif;
  cursor: pointer;
}
.pl-seg button + button {
  border-left: 1px solid var(--edge);
}
.pl-seg button:hover {
  color: var(--cream);
}
.pl-seg button.is-on {
  background: var(--picked-bg);
  box-shadow: inset 0 -3px 0 var(--honey);
  color: var(--cream);
}
.pl-seg.is-sm button {
  padding: 3px 9px;
  font-size: 0.8rem;
}
.pl-seg.is-xs button {
  padding: 3px 7px;
  font-size: 0.8rem;
}
.pl-seg.is-sure .is-sure.is-on { box-shadow: inset 0 -3px 0 #7fa37a; }
.pl-seg.is-sure .is-likely.is-on { box-shadow: inset 0 -3px 0 #c9a45a; }
.pl-seg.is-sure .is-maybe.is-on { box-shadow: inset 0 -3px 0 #8a8178; }
/* Une partie : un cadre, le liseré et l'icône de sa couleur */

.pl-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 5px 10px;
  border: 1px dashed var(--edge-strong);
  background: none;
  color: var(--text-soft);
  font: 500 0.84rem Roboto, sans-serif;
  cursor: pointer;
}
.pl-add:hover,
.pl-add:focus-visible {
  border-style: solid;
  color: var(--cream);
}
/* La cible : des blocs sans bordure, un fond à peine plus clair */

.pl-box {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px 14px;
  background: #181410;
}
.pl-box h4 {
  margin: 0;
  color: var(--text-soft);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pl-box h4 i {
  margin-right: 7px;
  color: #d0644e;
}
.pl-box.is-unknown {
  border: 1px dashed #4a3f33;
  background: transparent;
}
.pl-box.is-unknown h4 i {
  color: #e0b050;
}
.pl-box.is-entry {
  grid-column: span 2;
  border-left: 3px solid #e08a3c;
  background: linear-gradient(90deg, #e08a3c1c, #181410 70%);
}
.pl-box.is-entry h4 i {
  color: #e08a3c;
}
.pl-rows {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2px 6px;
  padding: 3px 4px;
  background: #201a15;
}
.pl-rows .pl-loot {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.pl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.pl-chips button {
  padding: 3px 9px;
  border: 1px solid var(--edge-strong);
  background: none;
  color: var(--text-soft);
  font: 500 0.82rem Roboto, sans-serif;
  cursor: pointer;
}
.pl-chips button:hover {
  color: var(--cream);
}
.pl-chips button.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
  box-shadow: inset 0 -2px 0 #d0644e;
  color: var(--cream);
}

.pl-mini {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border: 1px solid #8a7038;
  background: none;
  color: var(--cream);
  font: 600 0.8rem Roboto, sans-serif;
  cursor: pointer;
}

.pl-kits {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Les éléments partagés avec le dossier : numéro, titre, bouton retirer */
.rd-layer__n {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  background: var(--c-explosives);
  color: #140f0b;
  font: 900 0.95rem "Roboto Condensed", sans-serif;
  font-style: normal;
}
.rd-layer__name {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream);
  font: 800 1.05rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.rd-layer__name:hover {
  border-color: var(--edge);
}
.rd-layer__name:focus {
  border-color: var(--picked-edge);
  background: #0f0d0b;
  outline: none;
}
.rd-layer__name::placeholder {
  color: var(--text-soft);
  font-weight: 500;
}
.rd-layer__remove {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  color: var(--text-soft);
  cursor: pointer;
}
.rd-layer__remove:hover,
.rd-layer__remove:focus-visible {
  color: var(--c-explosives);
}

/* 3. Le dossier : des blocs (titre, texte, image annotée ou carte) */
label.rd-share {
  cursor: pointer;
}
label.rd-share.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.rd-share:focus-within {
  border-color: var(--cream);
}
.pl-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--c-explosives);
  font-size: 0.88rem;
}

.pl-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px 14px 14px;
  border-left: 3px solid #6c5f86;
  background: #181410;
}

.pl-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-layer__n.is-block {
  background: #a995cf;
}
.pl-block__actions {
  display: flex;
  flex: none;
}
.pl-block__actions button:disabled {
  opacity: 0.3;
  cursor: default;
}
.pl-block__text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--edge);
  background: #0f0d0b;
  color: var(--text);
  font: 400 0.92rem/1.45 Roboto, sans-serif;
  resize: vertical;
}
.pl-block__text:focus {
  border-color: var(--picked-edge);
  outline: none;
}
.pl-block__add,
.pl-anno__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pl-anno__foot a.rd-share {
  text-decoration: none;
}
/* L'annotation : les outils, la couleur, l'image et ses repères */
.pl-anno {
  display: grid;
  gap: 8px;
}
.pl-anno__tools,
.pl-anno__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.pl-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--edge);
  background: #0f0d0b;
  color: var(--text);
  font: 600 0.82rem Roboto, sans-serif;
  cursor: pointer;
}
.pl-tool:hover,
.pl-tool:focus-visible {
  border-color: var(--picked-edge);
}
.pl-tool.is-on {
  border-color: var(--picked-edge);
  background: var(--picked-bg);
  box-shadow: inset 0 -3px 0 var(--c-explosives);
  color: var(--cream);
}
.pl-tool.is-icon {
  padding: 5px 8px;
  font-size: 0.8rem;
}
.pl-anno__colors {
  display: inline-flex;
  gap: 4px;
  margin-left: 8px;
}
.pl-swatch {
  width: 24px;
  height: 24px;
  border: 2px solid #0f0d0b;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--edge-strong);
  cursor: pointer;
}
.pl-swatch.is-on {
  box-shadow: 0 0 0 2px var(--cream);
}
.pl-anno__text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.pl-anno__text input,
.pl-marks input,
.pl-mapblock__link input {
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--edge);
  background: #0f0d0b;
  color: var(--text);
  font: 400 0.9rem Roboto, sans-serif;
}
.pl-anno__text input:focus,
.pl-marks input:focus,
.pl-mapblock__link input:focus {
  border-color: var(--picked-edge);
  outline: none;
}
.pl-anno__hint {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pl-stage {
  position: relative;
  justify-self: start;
  max-width: 100%;
  line-height: 0;
  user-select: none;
}
/* L'image entière (la règle des icônes du cadre la réduirait à 30 px) */
.pl-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  border: 1px solid var(--edge);
}
.pl-stage.is-drawing {
  cursor: crosshair;
  touch-action: none;
}
.pl-stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pl-pin,
.pl-note {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  line-height: 1;
}
.pl-pin {
  display: grid;
  justify-items: center;
  gap: 3px;
}
.pl-pin i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 2px solid var(--c);
  border-radius: 50%;
  background: rgba(15, 13, 11, 0.85);
  color: var(--c);
  font-size: 0.9rem;
}
.pl-pin b,
.pl-note {
  padding: 2px 6px;
  background: rgba(15, 13, 11, 0.85);
  color: var(--c);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
}
.pl-note {
  border-left: 3px solid var(--c);
  font-size: 0.9rem;
}
.pl-marks {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-marks li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.pl-marks__kind {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--c);
  color: var(--c);
  font-size: 0.8rem;
}
/* Une carte du wipe : une petite fenêtre du visualiseur, et le lien de son dessin */
.pl-mapblock {
  display: grid;
  gap: 8px;
}
.pl-map__frame {
  width: 100%;
  height: min(70vh, 560px);
  border: 1px solid var(--edge);
  background: #0f0d0b;
}
.pl-mapblock__steps {
  margin: 0;
  padding-left: 20px;
  color: var(--text-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}
.pl-mapblock__steps b {
  color: var(--text);
}
.pl-mapblock__link {
  display: flex;
  gap: 6px;
}
.pl-mapblock__link input {
  flex: 1;
}
.pl-mapblock__state {
  margin: 0;
  color: var(--text-soft);
  font-size: 0.85rem;
}
.pl-mapblock__state code {
  color: var(--cream);
}
.pl-linkbtn {
  margin-left: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Petits écrans --- */
@media (max-width: 1100px) {
  
  .pl-box.is-entry {
    grid-column: auto;
  }
}
@media (max-width: 900px) {
  .rd-tabs {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .rd-method + .rd-method {
    border-left: 0;
  }
  .rd-answer__side,
  .rd-answer__noweak {
    margin-left: 0;
  }
  .rd-sides {
    justify-items: start;
  }
  .rd-sides small,
  .rd-answer__noweak {
    text-align: left;
  }
}
@media (max-width: 600px) {
  .rd-search {
    width: 100%;
  }
  .pl-tool span {
    display: none;
  }
  .pl-tool.is-icon span {
    display: inline;
  }
  .pl-anno__colors {
    margin-left: 0;
  }
  .pl-map__frame {
    height: 60vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rd-tile {
    transition: none;
  }
  .rd-tile:hover {
    transform: none;
  }
}

.pl-muted {
  margin: 0;
  color: #7d7469;
  font-size: 0.86rem;
  font-style: italic;
}

/* Le dossier en galerie */

.pl-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #120f0c;
}
.pl-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}
.pl-thumb.is-map {
  gap: 4px;
  align-content: center;
  color: #a995cf;
  font-size: 1.8rem;
}
.pl-thumb.is-map small {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pl-thumb.is-note {
  place-items: start;
  padding: 10px 12px;
  background: #1d1914;
}
.pl-thumb.is-note span {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  white-space: pre-line;
}
.pl-thumb__count {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 1px 7px;
  background: #0f0d0bdd;
  color: var(--cream);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
}

/* La vue en grand : l'image ou la carte au centre, le bloc à côté, les autres en bande */
.pl-viewer-open,
.pl-viewer-open body {
  overflow: hidden;
}
/* La lueur de la page l'isole (isolation) : ouverte, la vue en grand doit passer au-dessus de l'en-tête et du bandeau. */
.pl-viewer-open .ambient-glow {
  isolation: auto;
}
.pl-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b0907;
}
.pl-viewer[hidden] {
  display: none;
}
.pl-viewer__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #3a3346;
}
.pl-viewer__title {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  color: var(--cream);
  font: 900 1.15rem "Roboto Condensed", sans-serif;
}
.pl-viewer__title i {
  color: #a995cf;
}
.pl-viewer__title small {
  color: var(--text-soft);
  font: 400 0.82rem Roboto, sans-serif;
}
.pl-viewer__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--edge-strong);
  background: none;
  color: var(--cream);
  cursor: pointer;
}
.pl-viewer__btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.pl-viewer__btn.is-close {
  margin-left: 8px;
}
.pl-viewer__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  min-height: 0;
  padding: 14px 16px;
}
.pl-viewer__media {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.pl-viewer__media .pl-anno__tools {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-bottom: 6px;
  background: #0b0907;
}
.pl-viewer__media .pl-stage img {
  max-height: calc(100vh - 290px);
}
.pl-viewer__media .pl-map__frame {
  height: calc(100vh - 330px);
}
.pl-viewer__side {
  align-content: start;
  overflow: auto;
}
.pl-viewer__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 14px;
  border-top: 1px solid #3a3346;
}
.pl-strip__item {
  flex: none;
  display: grid;
  gap: 4px;
  width: 140px;
  padding: 4px;
  border: 1px solid #3a3346;
  background: #181410;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.pl-strip__item .pl-thumb {
  aspect-ratio: 16 / 9;
  font-size: 1.2rem;
}
.pl-strip__item b {
  overflow: hidden;
  color: var(--text);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pl-strip__item.is-on {
  border-color: #a995cf;
  background: #241f2e;
}
@media (max-width: 900px) {
  .pl-viewer__body {
    grid-template-columns: minmax(0, 1fr);
    overflow: auto;
  }
}