/* Le mur du survivant — d'après la maquette « 02 · Tableau des missions » du futur
   menu du jeu. Une vieille carte du secteur punaisée dans un cadre de tôle, des
   étiquettes suspendues à des clous pour trier, et le fil rouge qui relie les
   avis (dessiné par mur-20260921.js, derrière le papier).
   Complète tole-20260921c.css ; chargée par l'accueil seulement. */

:root { --carte: url("/apocalypse/img/carte-secteur-20260921.webp"); }

.mur-cadre { padding-bottom: clamp(1.2rem, 2.4vw, 2rem); }

/* la plaque d'angle, comme sur la maquette */
.mur-devise {
  position: absolute; top: 1.1rem; right: 1.4rem; margin: 0;
  padding: .45rem .9rem; text-align: center;
  font-family: var(--feutre); font-size: .95rem; line-height: 1.1; color: rgba(233, 228, 214, .75);
  background: var(--grain), linear-gradient(180deg, #3b3f39, #262924);
  border: 2px solid #0f110d; transform: rotate(1.5deg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 2px 3px 0 rgba(0, 0, 0, .45);
}

/* ------------------------------------------------ le tableau : étiquettes + carte --- */
.mur-tableau {
  display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start;
}
.mur-tableau > * { min-width: 0; }   /* sinon la grille d'avis élargit la colonne au-delà de l'écran */

/* les étiquettes : du papier pendu à un clou par une ficelle */
.mur-onglets { position: sticky; top: 5.5rem; display: grid; gap: 1.1rem; padding-top: 1.4rem; }
.onglet-papier {
  position: relative; display: flex; align-items: center; gap: .6rem;
  padding: .75rem .9rem .7rem; cursor: pointer;
  font-family: var(--pochoir); font-weight: 800; font-size: 1.3rem; letter-spacing: .05em;
  text-transform: uppercase; text-align: left; color: #26221b;
  background: linear-gradient(176deg, #e6dbc0, #cbbd99);
  border: 0; box-shadow: 3px 4px 0 rgba(0, 0, 0, .45);
  transform: rotate(-1.2deg); transform-origin: 50% -1.2rem;
  transition: transform .18s ease, background .18s ease;
}
.onglet-papier:nth-child(2n) { transform: rotate(1deg); }
.onglet-papier svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* le clou et les deux brins de ficelle */
.onglet-papier::before {
  content: ""; position: absolute; left: 50%; top: -1.25rem; width: .7rem; height: .7rem; margin-left: -.35rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfcabd, #5e5b53 70%); box-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}
.onglet-papier::after {
  content: ""; position: absolute; left: 50%; top: -.95rem; width: 3.2rem; height: .95rem; margin-left: -1.6rem;
  border-top: 2px solid #8a7a5e; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  clip-path: polygon(50% 0, 100% 100%, 88% 100%, 50% 12%, 12% 100%, 0 100%);
}
.onglet-papier:hover { transform: rotate(0deg); }
.onglet-papier[aria-pressed="true"] {
  background: linear-gradient(176deg, #ffd84a, #e2b213); color: #17150f;
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .5), 0 0 0 2px rgba(0, 0, 0, .35);
}
.onglet-papier:focus-visible { outline: 3px solid var(--rubalise); outline-offset: 4px; }

/* une planche clouée sous les étiquettes, avec un mot griffonné */
.mur-griffon {
  margin: .8rem 0 0; padding: 1rem .9rem;
  font-family: var(--feutre); font-size: 1.05rem; line-height: 1.2; color: rgba(236, 228, 210, .78);
  background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, .35)), var(--palette) 0 -140px / 1024px 768px;
  border: 2px solid #120f0b; transform: rotate(-1deg);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .6);
}

/* la carte du secteur, au fond du tableau */
.mur-planche {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(20, 12, 5, .55) 100%),
    linear-gradient(rgba(38, 26, 12, .28), rgba(38, 26, 12, .28)),
    var(--carte) repeat;
  background-size: auto, auto, 900px 900px;
}

/* le fil rouge : derrière le papier, devant la carte */
.mur-fils { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.mur-fils path {
  fill: none; stroke: #a31f18; stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .55));
}
.mur-planche .avis-grille { z-index: 1; }
.avis[hidden] { display: none; }

@media (max-width: 60rem) {
  .mur-tableau { grid-template-columns: minmax(0, 1fr); }
  .mur-onglets { position: static; display: flex; flex-wrap: wrap; gap: 1.4rem .8rem; padding-top: 1.2rem; }
  .onglet-papier { font-size: 1.1rem; padding: .6rem .8rem; }
  .mur-griffon { display: none; }
  .mur-devise { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onglet-papier { transition: none; }
}