/* Veillée — objets du wiki : cartes, pastilles, cadre personnage, étiquettes, bloc Secret.
   Thème clair uniquement, avec les variables de style existantes (--surface, --line, --ink, --muted, --green, --copper…).
   Aucun style inline : tout passe par ces classes (le style inline est interdit par la liste blanche). */
.vo {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  vertical-align: middle; box-sizing: border-box; cursor: pointer;
  color: var(--ink, #292d27); text-decoration: none;
}
.vo:focus-visible { outline: 3px solid #b07947; outline-offset: 2px; }
.vo__icone { flex: none; width: 1.1em; height: 1.1em; color: var(--green, #466b55); }
.vo__nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vo__resume { font-size: .8em; color: var(--muted, #70756b); white-space: nowrap; }
.vo__libelle { font-size: .8em; color: var(--muted, #70756b); }

/* Carte : encadré qui se lit comme un petit bouton. */
.vo--carte {
  padding: 3px 9px; border: 1px solid var(--line, #dedfd5); border-radius: 8px;
  background: var(--surface, #fffefb);
}
.vo--carte:hover { border-color: var(--green, #466b55); background: var(--green-soft, #e7eee4); }
.vo--carte:active { transform: translateY(1px); }

/* Nom : texte seul, souligné comme un lien. */
.vo--nom { padding: 0; border: 0; background: none; color: var(--green, #466b55); text-decoration: underline dotted; text-underline-offset: 3px; }
.vo--nom:hover { text-decoration-style: solid; }

/* Pastille : petite capsule avec portrait rond (@). */
.vo--pastille {
  padding: 1px 8px 1px 3px; border-radius: 999px; font-size: .92em;
  background: var(--green-soft, #e7eee4); color: var(--green, #466b55);
}
.vo--pastille:hover { background: var(--copper-soft, #f6e9df); color: var(--copper, #9d5738); }
.vo__photo { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; background: var(--paper, #f6f4ed); }

/* Lieu : l'image fait la carte, le nom en légende. */
figure.vo { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 4px 0; padding: 4px; }
figure.vo--location { width: 180px; }
figure.vo--location img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--paper, #f6f4ed); }
figure.vo--location svg.vo__icone { width: 100%; height: 72px; padding: 14px 0; box-sizing: border-box; background: var(--paper, #f6f4ed); border-radius: 5px; }
figure.vo figcaption { font-size: .9em; text-align: center; }

/* Cadre personnage : nom + photo + informations dans un petit cadre. */
figure.vo__cadre { width: 190px; align-items: center; text-align: center; }
figure.vo__cadre img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 50%; background: var(--paper, #f6f4ed); }
figure.vo__cadre svg.vo__icone { width: 56px; height: 56px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--paper, #f6f4ed); }
.vo__infos { align-self: stretch; margin: 2px 0 0; padding: 4px 0 0; list-style: none; border-top: 1px solid var(--line, #dedfd5); font-size: .82em; color: var(--muted, #70756b); text-align: left; }
.vo__infos li { padding: 1px 0; }

/* États. */
.vo--introuvable { opacity: .6; border-style: dashed; }
.vo--joueur-bloque { cursor: default; }
.vo--joueur-bloque:hover { border-color: var(--line, #dedfd5); background: var(--surface, #fffefb); }

/* Panneau par défaut d'un objet sans panneau propre. */
.vo__panneau { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line, #dedfd5); border-radius: 10px; background: var(--surface, #fffefb); }
.vo__panneau .vo__icone { width: 28px; height: 28px; }

/* Étiquette # : créée à la volée, cliquable. */
[data-vt] {
  display: inline-block; padding: 0 7px; border-radius: 999px; font-size: .88em; cursor: pointer;
  background: var(--copper-soft, #f6e9df); color: var(--copper, #9d5738);
}
[data-vt]:hover { background: var(--copper, #9d5738); color: var(--surface, #fffefb); }

/* Bloc Secret : visible du meneur et des destinataires seulement ; le bandeau n'est pas stocké. */
aside[data-vs="secret"] {
  position: relative; margin: 10px 0; padding: 28px 14px 10px; border: 1px dashed var(--copper, #9d5738);
  border-left: 4px solid var(--copper, #9d5738); border-radius: 8px; background: var(--copper-soft, #f6e9df);
}
aside[data-vs="secret"]::before {
  content: "Secret"; position: absolute; top: 6px; left: 14px;
  font-size: .72em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper, #9d5738);
}
.vo-secret__bandeau { position: absolute; top: 4px; right: 10px; font-size: .78em; color: var(--muted, #70756b); }
aside[data-vs="secret"] > :first-child { margin-top: 0; }
aside[data-vs="secret"] > :last-child { margin-bottom: 0; }