/* === La base du Plan de bataille (née avec les premiers prototypes, 6 oct. 2026) : l’en-tête, le parcours en trois
   colonnes, les cinq étapes et leur pied. La refonte s’appuie dessus et vit dans plan-cadre.css, plan-etapes.css et
   plan-bilan.css. Relue le 26 oct. 2026 : chacune de ses classes sert encore au plan actuel, d’où son nouveau nom
   (c’était plan-prototype.css).
   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. === */

/* --- Plan de bataille, d'après les prototypes de TF Crazy : un cadre qui tient en un écran (l'en-tête ; à gauche le
   plan de raid, au centre l'étape, à droite ce qui l'accompagne ; en bas Retour, l'étape, Suivant), puis la vue
   d'ensemble d'un plan validé. Des panneaux sombres séparés par des filets, leurs titres en capitales avec une icône
   rouille, un liseré rouille sur les colonnes, le miel pour ce qu'on fait (bouton principal, étape en cours,
   avancement), le vert pour ce qui est fait, l'orange pour ce qu'il reste --- */
.rd-plan-view {
  /* Les matières du thème, comme le Marché : panneaux en dégradé, liserés dorés, champs creusés ; le fond de la page
     se voit autour du cadre et entre ses colonnes. Le vert ne dit que « fait », l'orange « il reste ». */
  --pl-panel: var(--panel-gradient);
  --pl-row: var(--row-gradient);
  --pl-line: var(--line-gold);
  --pl-edge: rgba(var(--gold-rgb), 0.45);
  --pl-rust: var(--red-text);
  --pl-honey: var(--gold);
  --pl-green: #6fae5f;
  --pl-orange: #e0912f;
  --pl-chosen: #3b2d1d;
}
.pl-app {
  border: 1px solid var(--pl-line);
  border-top: 2px solid var(--pl-honey);
  background: rgba(12, 10, 8, 0.55);
  box-shadow: 0 18px 40px rgba(var(--shadow-rgb), 0.45);
}
.pl-wiz[hidden],
.pl-ov[hidden],
.pl-ov__body[hidden] {
  display: none;
}

/* L'en-tête : « Préparer le raid », le nom, la cible, le jour, les participants ; les boutons à droite */
.pl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--pl-line);
}
.pl-head__title {
  display: grid;
  flex: 1 1 380px;
  gap: 2px;
  min-width: 0;
}
.pl-head__title > small {
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pl-head__name {
  min-width: 0;
  margin-left: -6px;
  padding: 0 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--cream);
  font: 700 2rem/1.2 "Roboto Condensed", sans-serif;
}
.pl-head__name:hover {
  border-color: var(--pl-line);
}
.pl-head__name:focus {
  border-color: var(--picked-edge);
  background: #0f0d0b;
  outline: none;
}
.pl-head__meta {
  display: flex;
  flex-wrap: wrap;
  margin: 6px 0 0;
  color: var(--cream);
  font: 400 1.05rem "Roboto Condensed", sans-serif;
}
.pl-head__meta span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-left: 1px solid var(--pl-line);
}
.pl-head__meta span:first-child {
  padding-left: 0;
  border-left: 0;
}
.pl-head__meta i {
  color: var(--pl-honey);
  font-size: 1.1rem;
}
.pl-head__meta .is-target i {
  color: var(--pl-rust);
}

.pl-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pl-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 8px;
  color: var(--cream);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pl-status i {
  color: var(--pl-green);
  font-size: 0.8rem;
}
.pl-status.is-error,
.pl-status.is-error i {
  color: var(--c-explosives);
}
/* Le bouton lui-même est commun aux six outils : packages/ui/css/tool-button.css. Ici, ce que seul le Plan
   connaît : celui de l'en-tête s'allume quand son panneau est ouvert. */
.pl-btn.is-head.is-on {
  border-color: var(--cream);
  background: var(--picked-bg);
}
.pl-history {
  margin: 0;
  padding: 10px 22px;
  border-bottom: 1px solid var(--pl-line);
  background: var(--pl-panel);
}

/* Le parcours : trois colonnes et le pied ; tient en un écran, la colonne du centre et celle de droite défilent */
.pl-wiz {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "rail main aside" "foot foot foot";
  height: max(640px, calc(100vh - var(--head) - var(--banner, 0px) - 40px));
}
.pl-wiz__rail {
  grid-area: rail;
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--pl-line);
  background: rgba(var(--shadow-rgb), 0.22);
}
.pl-wiz__main {
  display: grid;
  align-content: start;
  gap: 14px;
  grid-area: main;
  min-width: 0;
  min-height: 0;
  margin: 10px 0 0 10px;
  padding: 16px 18px 20px;
  overflow-y: auto;
  border-top: 2px solid var(--pl-rust);
  background: var(--pl-panel);
}

.pl-wiz__foot {
  grid-area: foot;
  border-top: 1px solid var(--pl-line);
}

/* Le plan de raid : les étapes sur un fil, ce qu'elles disent du plan ; l'avancement ; la liste de contrôle */

.pl-meter {
  display: block;
  height: 8px;
  overflow: hidden;
  background: #2c251e;
}
.pl-meter i {
  display: block;
  height: 100%;
  background: var(--pl-honey);
}

/* L'étape : sa question, ses outils */

.pl-iam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--pl-edge);
  background: var(--pl-row);
  color: var(--text-soft);
  font: 400 0.88rem "Roboto Condensed", sans-serif;
}
.pl-iam select {
  padding: 7px 4px;
  border: 0;
  background: transparent;
  color: var(--cream);
  font: 700 0.9rem "Roboto Condensed", sans-serif;
}
.pl-iam select option {
  background: var(--pl-row);
}

/* Les champs : le libellé au-dessus, une case pleine et nette */
.pl-fields {
  display: grid;
  gap: 12px;
}
.pl-fields.is-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pl-lab {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}
.pl-lab > span {
  color: var(--cream);
  font: 500 0.92rem "Roboto Condensed", sans-serif;
}
.pl-lab .pl-in,
.pl-pane .pl-in {
  width: 100%;
}
.pl-app .pl-in {
  padding: 9px 12px;
  border: 1px solid var(--pl-line);
  background: var(--well);
  box-shadow: var(--well-shadow);
  color: var(--cream);
  font: 400 0.95rem Roboto, sans-serif;
}
.pl-app .pl-in:focus {
  border-color: var(--pl-honey);
  outline: none;
}
.pl-app .pl-in.is-grid {
  font-weight: 700;
  text-transform: uppercase;
}
.pl-app .pl-in.is-qty {
  width: 52px;
  padding: 3px 6px;
  text-align: right;
}
.pl-app select.pl-in,
.pl-app input[type="datetime-local"].pl-in,
.pl-app input[type="time"].pl-in {
  color-scheme: dark;
}

/* Étape 1 : la capture de la base, et son carré sur la grille */

.pl-cover {
  position: relative;
  display: grid;
  margin: 0;
  min-height: 200px;
  overflow: hidden;
  border: 1px solid var(--pl-line);
  background: var(--well);
}
.pl-cover img {
  width: 100% !important;
  height: 100% !important;
  max-height: 320px;
  object-fit: cover;
}
.pl-cover figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
}
.pl-cover figcaption .pl-mini {
  background: #0f0d0be0;
}
.pl-cover.is-blank {
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 16px;
  border-style: dashed;
  color: var(--text-soft);
  text-align: center;
}
.pl-cover.is-blank > i {
  color: var(--pl-honey);
  font-size: 1.6rem;
}
.pl-cover.is-blank b {
  color: var(--text);
  font-weight: 500;
}
.pl-cover.is-blank small {
  font-size: 0.8rem;
}
.pl-cover.is-drop {
  cursor: pointer;
}
.pl-cover.is-drop:hover,
.pl-cover.is-drop:focus-within {
  border-color: var(--pl-honey);
  color: var(--cream);
}
.pl-upload.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Le plan du terrain : la grille de la carte, la cible, le trajet numéroté */
.pl-terrain {
  display: grid;
  gap: 6px;
  margin: 0;
}
.pl-terrain svg {
  display: block;
  width: 100%;
  max-height: 360px;
}
.pl-terrain.is-pick svg {
  cursor: crosshair;
}
.pl-terrain__hint {
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pl-terrain__pt.is-spot circle {
  fill: none;
  stroke-width: 2.5;
}
.pl-terrain__pt.is-spot .pl-terrain__dot {
  fill: var(--c);
  stroke: none;
}
.pl-terrain__cells rect {
  fill: none;
  stroke: rgba(15, 12, 9, 0.3);
  stroke-width: 1;
}
/* Le nom de chaque case, comme en jeu : gris foncé, discret, dans le coin haut gauche (sur le schéma sans carte, clair) */
.pl-terrain__labels text {
  fill: rgba(16, 18, 14, 0.6);
  font: 500 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.02em;
}
.pl-terrain:not(.has-map) .pl-terrain__labels text {
  fill: #a39684;
}
.pl-terrain__goal {
  fill: #c8553a33;
  stroke: var(--pl-rust);
  stroke-width: 2;
}
.pl-terrain polyline {
  fill: none;
  stroke: var(--pl-rust);
  stroke-width: 2.5;
  stroke-dasharray: 6 5;
}
.pl-terrain__pt circle {
  fill: #15110d;
  stroke: var(--c);
  stroke-width: 2.5;
}
.pl-terrain__pt text {
  fill: var(--cream);
  font: 800 0.8rem "Roboto Condensed", sans-serif;
  text-anchor: middle;
}
.pl-terrain__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
  font-size: 0.8rem;
  counter-reset: way;
}
.pl-terrain__legend li {
  counter-increment: way;
}
.pl-terrain__legend li::before {
  margin-right: 6px;
  color: var(--c);
  font-weight: 800;
  content: counter(way) ".";
}
.pl-terrain__legend b {
  margin-right: 5px;
  color: var(--cream);
}
.pl-terrain.is-blank {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
  border: 1px dashed var(--pl-line);
  color: var(--text-soft);
  font-size: 0.84rem;
}
.pl-terrain.is-blank i {
  color: var(--pl-honey);
  font-size: 1.3rem;
}

/* « Plus de détails » : replié, ce que les prototypes ne montrent pas */
.pl-more__body {
  display: grid;
  gap: 12px;
  padding-bottom: 6px;
}

/* Les panneaux : à droite, et dans l'étape (« Répartition des rôles », « Note pour l'équipe ») */
.pl-pane {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--pl-line);
}
.pl-pane h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--cream);
  font: 700 0.9rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pl-pane h4 i {
  color: var(--pl-rust);
}
.pl-pane h5 {
  margin: 4px 0 0;
  color: var(--text-soft);
  font: 700 0.8rem "Roboto Condensed", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pl-pane__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Étape 2 : l'équipe en tableau */

.pl-steamrow {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--pl-line);
}
.pl-steamrow > i {
  color: #8fb6dd;
  font-size: 1.2rem;
}
.pl-steamrow .pl-in {
  flex: 1 1 260px;
}
.pl-steamrow small {
  flex-basis: 100%;
  color: var(--text-soft);
  font-size: 0.8rem;
}
.pl-error-text {
  color: #e08a7a;
}
/* La présence : « Je viens » en vert plein quand c'est choisi */
.pl-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--pl-orange);
  font: 700 0.95rem "Roboto Condensed", sans-serif;
  white-space: nowrap;
  cursor: pointer;
}
.pl-state i {
  font-size: 1.05rem;
}
.pl-state.is-on {
  color: #9fd197;
}

/* L'avatar : l'avatar Steam, ou l'initiale dans un hexagone à la couleur du rôle */
.pl-av {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 38px;
  background: var(--c);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  color: #17120c;
  font: 900 1rem "Roboto Condensed", sans-serif;
}
.pl-av.is-photo {
  height: 34px;
  border: 1px solid var(--pl-edge);
  clip-path: none;
  object-fit: cover;
}
.pl-av.is-xs {
  width: 18px;
  height: 20px;
  font-size: 0.8rem;
}
.pl-av.is-xs.is-photo {
  height: 18px;
}
.pl-av.is-sm {
  width: 24px;
  height: 27px;
  font-size: 0.8rem;
}
.pl-av.is-sm.is-photo {
  height: 24px;
}
.pl-av.is-lg {
  width: 52px;
  height: 58px;
  font-size: 1.45rem;
}
.pl-av.is-lg.is-photo {
  height: 52px;
}

/* Étape 3 : le déroulé, une ligne par étape sur un fil */

/* Étape 4 : les sacs, une colonne par joueur */
.pl-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pl-filters button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 86px;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid var(--pl-line);
  background: var(--pl-row);
  color: var(--cream);
  font: 500 0.92rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.pl-filters button.is-on {
  border-color: var(--pl-honey);
  background: var(--pl-chosen);
}
.pl-filters i {
  color: var(--text-soft);
}

.pl-bag__more {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--text-soft);
  font: 500 0.82rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.pl-bag__more:hover {
  color: var(--pl-honey);
}
.pl-bag__add {
  display: grid;
  gap: 6px;
}
/* Avant le départ : coché quand c'est réparti, en orange ce qui manque */

.pl-need-search {
  margin-top: 6px;
}

/* Étape 5 : le plan relu, la validation finale */

.pl-tick {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
}
.pl-tick input {
  position: absolute;
  opacity: 0;
}
.pl-tick span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #6a5a44;
  color: transparent;
  font-size: 0.8rem;
}
.pl-tick input:checked + span {
  border-color: var(--pl-green);
  background: var(--pl-green);
  color: #10200e;
}
.pl-tick input:focus-visible + span {
  outline: 2px solid var(--pl-honey);
  outline-offset: 2px;
}

/* À droite : l'équipe, les repères, le lien */

.pl-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pl-thumbs button {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--pl-line);
  background: none;
  cursor: pointer;
}
.pl-thumbs button:hover,
.pl-thumbs button:focus-visible {
  border-color: var(--pl-honey);
}
.pl-thumbs .pl-thumb__count {
  display: none;
}
.pl-pane .pl-in.is-area {
  border-color: var(--pl-line);
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Le pied : Retour, l'étape, la suite (miel plein) */
.pl-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 20px;
  padding: 14px 16px;
}
.pl-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 26px;
  border: 1px solid #5a4c3d;
  background: none;
  color: var(--cream);
  font: 500 1.05rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.pl-back:disabled {
  opacity: 0.35;
  cursor: default;
}
.pl-next {
  display: inline-grid;
  justify-items: center;
  gap: 2px;
  min-width: 180px;
  padding: 11px 24px;
  border: 0;
  background: var(--pl-honey);
  color: #1a1206;
  font: 700 1.1rem "Roboto Condensed", sans-serif;
  cursor: pointer;
}
.pl-next:not(.is-validate),
.pl-next > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.pl-next:hover,
.pl-next:focus-visible {
  background: #f2b453;
  outline: none;
}
.pl-next:disabled {
  background: var(--pl-edge);
  color: #a39684;
  cursor: default;
}

/* La vue d'ensemble : des onglets, trois chiffres, des cartes */
.pl-ov {
  display: grid;
  gap: 12px;
  padding: 0 14px 16px;
}
.pl-ov,
.pl-ov__body {
  grid-template-columns: minmax(0, 1fr);
}
.pl-ov__body {
  display: grid;
  gap: 12px;
}

/* --- Sur un écran moins large : la colonne de droite passe sous l'étape, puis tout s'empile --- */
@media (max-width: 1280px) {
  .pl-wiz {
    grid-template-columns: 200px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "rail main" "rail aside" "foot foot";
    height: auto;
  }
  .pl-wiz__main {
    overflow: visible;
  }
  
  
  
  
  
  
  
  
}
@media (max-width: 900px) {
  .pl-wiz {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "main" "aside" "foot";
  }
  .pl-wiz__rail {
    border-right: 0;
    border-bottom: 1px solid var(--pl-line);
  }
  .pl-wiz__main {
    margin: 10px 8px 0;
  }
  
  
  
  
  
  .pl-fields.is-2 {
    grid-template-columns: minmax(0, 1fr);
  }
  
  
  .pl-head__name {
    font-size: 1.5rem;
  }
  .pl-head__meta span {
    padding: 0 10px 0 0;
    border-left: 0;
  }
  .pl-foot {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .pl-next {
    justify-self: end;
    min-width: 0;
  }
  
  
}

/* 6 oct. : une image d'objet absente ne montre pas l'image cassée ; l'exemple de la position sans capitales ; une
   note ouverte en grand au centre (titre et texte), pas un écran vide */
.pl-app img.is-broken,
.pl-viewer img.is-broken {
  visibility: hidden;
}
.pl-app .pl-in.is-grid::placeholder {
  font-weight: 400;
  text-transform: none;
}

.pl-viewer.is-note .pl-viewer__body {
  grid-template-columns: minmax(0, 760px);
  justify-content: center;
  align-content: start;
}
.pl-viewer.is-note .pl-viewer__side {
  order: -1;
}
.pl-viewer.is-note .pl-block__text {
  min-height: 46vh;
  font-size: 1rem;
  line-height: 1.55;
}