/* Feuille de style des JOUEURS SUR LA CARTE et des CONVERSATIONS (v0.6.171).

   DEUX CONTRAINTES, les mêmes que community.css, auth.css et feedback.css :

   1. MODE LOCAL INTACT. Chaque sélecteur — y compris à l'intérieur d'un `@media` —
      descend d'un `#pl-*` ou d'une classe `.pl-*` que seul players.js crée, et
      players.js ne crée RIEN quand `/auth/state` rend `mode: "off"`. Ce fichier est donc
      chargé sur l'app de bureau, où il reste sans effet : pas un pixel ne bouge.
   2. TOKENS SEULEMENT (règle de conception 3). Aucune couleur littérale : les cinq
      thèmes commutent à chaud, et une valeur en dur deviendrait illisible dans quatre
      d'entre eux.

   Z-INDEX : 4070 pour le modal des conversations. Le choix se déduit, il ne se devine
   pas : au-dessus du menu utilisateur (4050) et du panneau Messages (4060), qu'il doit
   couvrir puisqu'il s'ouvre depuis le premier — mais SOUS confirm/prompt (4100,
   `deck.css`), parce que SUPPRIMER une conversation demande une confirmation qui doit se
   voir. C'est précisément là que `feedback.css` (4150) ne convenait pas comme modèle : ce
   volet-là n'appelle aucun dialogue.

   PAS DE `@keyframes` — même interdit qu'`events.css` : le détecteur de périmètre lit les
   blocs internes et prendrait `to{…}` pour un sélecteur hors périmètre. Toutes les
   animations sont des `transition`. */

/* ------------------------------------------------------------------ présence -- */
/* Le conteneur est fourni par `events.js` (colonne de GAUCHE du volet, jamais la colonne
   de carte : le formulaire d'événement y a déjà réduit la carte à 60 px une fois, et une
   carte de 60 px n'est plus cliquable). */
.pl-host{
  margin-top:10px;padding:10px 12px;
  background:var(--panel2);border:1px solid var(--line);border-radius:8px;
}
.pl-host[hidden]{display:none}

.pl-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.pl-title{font-size:14px;color:var(--txt)}
.pl-x{
  background:transparent;border:0;color:var(--mut);font-size:19px;line-height:1;
  cursor:pointer;padding:0 4px;
}
.pl-x:hover{color:var(--txt)}

/* LE CONSEIL DE VIE PRIVÉE. Il est en tête, avant le bouton de placement, et il est en
   `--txt2` plutôt qu'en `--mut` : un conseil qu'on n'a pas envie de lire n'est pas lu, et
   celui-ci est la moitié visible d'une protection dont l'autre moitié est l'arrondi
   serveur. */
.pl-lead{margin:0 0 6px;font-size:12.5px;color:var(--txt2);line-height:1.5}
.pl-note{margin:4px 0;font-size:11.5px;color:var(--mut)}
.pl-warn{margin:5px 0;font-size:11.5px;color:var(--warn)}
.pl-msg{
  margin:6px 0;padding:7px 9px;font-size:12.5px;border-radius:6px;
  color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-line);
}
.pl-msg:empty{display:none}
.pl-msg.ok{color:var(--ok);background:var(--panel);border-color:var(--line)}

.pl-sec{
  margin:14px 0 6px;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);
}
.pl-lbl{display:block;margin:12px 0 4px;font-size:12px;color:var(--txt2)}
.pl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0}
.pl-act{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}
/* LA BARRE D'ACTION DU CONTENEUR RESTE COLLÉE EN BAS. Signalé en usage : « l'ascenseur de
   la boîte ma présence ne permet pas d'enregistrer ». La cause première était une colonne
   qui débordait (corrigée dans `events.css`), mais le formulaire reste plus haut que sa
   fente sur un écran court — et alors « Enregistrer » n'existe qu'au bout d'un défilement
   qu'on ne devine pas. Collé, il est là quoi qu'il arrive.
   Le fond OPAQUE est indispensable : sans lui le texte défile SOUS les boutons et les rend
   illisibles. `.pl-host` porte `--panel2`, donc c'est cette teinte-là et pas une autre. */
.pl-host .pl-act{
  position:sticky;bottom:0;z-index:1;
  margin-top:12px;padding:8px 0 2px;
  background:var(--panel2);border-top:1px solid var(--line);
}
.pl-coord{font-size:12px;color:var(--mut)}
.pl-empty{font-size:12.5px;color:var(--mut);padding:8px 0;margin:0}

.pl-btn{
  font:inherit;font-size:12.5px;padding:6px 12px;border-radius:6px;cursor:pointer;
  background:var(--input);color:var(--txt);border:1px solid var(--line);
  transition:border-color .12s ease;
}
.pl-btn:hover{border-color:var(--acc)}
.pl-btn:disabled{opacity:.55;cursor:default}
.pl-btn.prim{background:var(--acc);color:var(--on-acc);border-color:var(--acc);font-weight:600}
/* Placement ARMÉ. Il faut que ça se voie sans lire : sinon on clique la carte sans savoir
   si le bouton écoute — le défaut exact corrigé sur le formulaire d'événement en
   v0.6.161, où il fallait DEUX clics pour réarmer. */
.pl-btn.on{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.pl-link{
  background:transparent;border:0;padding:2px 0;
  color:var(--txt2);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;
}
.pl-link:hover{color:var(--acc)}

/* `width` explicite : la feuille de recherche pose `select, input{width:100%}` en global,
   et un sélecteur de 305 px de large dans une colonne étroite a déjà été mesuré une fois
   (interrupteur du panneau de maintenance, v0.6.164). */
.pl-sel{
  width:100%;box-sizing:border-box;padding:6px 8px;font:inherit;font-size:12.5px;
  background:var(--input);color:var(--txt);border:1px solid var(--line);border-radius:6px;
}
.pl-num{
  width:5.5em;box-sizing:border-box;padding:6px 8px;font:inherit;font-size:12.5px;
  background:var(--input);color:var(--txt);border:1px solid var(--line);border-radius:6px;
}
.pl-unit{font-size:12px;color:var(--mut)}
.pl-sel:focus,.pl-num:focus,.pl-in:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--focus);
}
.pl-check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt);margin:3px 0}
.pl-check input{width:15px;height:15px;flex:0 0 auto;accent-color:var(--acc)}
/* La classe porte AUSSI sa propre règle, et pas seulement `.pl-check input` : le
   croisement CSS ↔ DOM lit les noms posés par le JS, et un crochet sans règle est un
   crochet dont personne ne garantit qu'il atteint quelque chose (défaut le plus coûteux du
   chantier Événements — 84 classes posées sur 111 sans aucune règle). */
.pl-comm-in{accent-color:var(--acc)}

/* Les trois champs et le bouton d'envoi sont interrogés par leur ID depuis le JS : ils
   reçoivent ici la seule chose qui se décide au niveau de l'ID — leur largeur dans la
   colonne, que la classe partagée ne peut pas connaître. */
#pl-vis{max-width:100%}
#pl-rad{max-width:8em}
#pl-send{min-width:7em}
#pl-cx{margin-left:auto}

/* ------------------------------------------------- grille de disponibilités -- */
/* 7 colonnes × 3 tranches. Un TABLEAU et non une grille CSS : ce sont des données à deux
   entrées, les en-têtes de ligne et de colonne portent le sens, et un lecteur d'écran sait
   lire « mercredi soir » d'un `<th scope>` — pas d'une pile de `<div>`. */
.pl-avail{border-collapse:collapse;width:100%;font-size:11px}
.pl-avail th{font-weight:500;color:var(--mut);padding:2px;text-align:center}
.pl-avail th[scope="row"]{text-align:left;padding-right:6px;white-space:nowrap}
.pl-avail td{padding:2px;text-align:center}
.pl-slot-in{width:15px;height:15px;flex:0 0 auto;accent-color:var(--acc)}
/* Lecture SEULE (fiche d'un autre joueur) : une pastille, pas une case à cocher désactivée
   — une case grisée invite à cliquer et ne répond pas. */
.pl-slot{
  display:inline-block;width:13px;height:13px;border-radius:3px;
  background:var(--input);border:1px solid var(--line);
}
.pl-slot.on{background:var(--acc);border-color:var(--acc)}

/* ------------------------------------------------------------ conversations -- */
.pl-modal{
  position:fixed;inset:0;z-index:4070;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:var(--overlay);
}
.pl-modal[hidden]{display:none}
.pl-box{
  width:100%;max-width:560px;max-height:84vh;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 48px var(--shadow);
}
.pl-chead{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.pl-ctitle{margin:0;font-size:16px;color:var(--txt)}
.pl-cmsg{margin:10px 14px 0;font-size:12.5px;color:var(--bad)}
.pl-cmsg:empty{display:none}
.pl-cbody{padding:10px 14px 14px;overflow:auto;display:flex;flex-direction:column}

.pl-convs{list-style:none;margin:0;padding:0}
.pl-conv{display:flex;align-items:stretch;gap:6px;margin-bottom:6px}
.pl-conv-b{
  flex:1 1 auto;display:grid;grid-template-columns:1fr auto;gap:2px 8px;
  text-align:left;font:inherit;cursor:pointer;padding:8px 10px;border-radius:8px;
  background:var(--panel2);color:var(--txt);border:1px solid var(--line);
}
.pl-conv-b:hover{border-color:var(--acc)}
.pl-conv-nm{font-weight:600;font-size:13px}
.pl-conv-n{
  justify-self:end;align-self:center;
  padding:0 6px;border-radius:999px;font-size:10.5px;font-weight:600;
  color:var(--on-acc);background:var(--acc);
}
/* Le dernier message est un APERÇU : une seule ligne, tronquée. Le laisser s'étendre
   ferait sauter la hauteur des lignes d'une conversation à l'autre. */
.pl-conv-last{
  grid-column:1;font-size:12px;color:var(--txt2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pl-conv-ts{grid-column:2;font-size:10.5px;color:var(--mut);align-self:end}
.pl-conv.neuve .pl-conv-b{border-color:var(--acc)}
.pl-conv-del{
  flex:0 0 auto;background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--mut);cursor:pointer;font-size:14px;padding:0 8px;
}
.pl-conv-del:hover{color:var(--bad);border-color:var(--bad-line)}

.pl-flux{max-height:44vh;overflow:auto;padding:2px 0;margin:8px 0}
.pl-m{max-width:82%;margin-bottom:7px;padding:7px 9px;border-radius:9px;
      background:var(--panel2);border:1px solid var(--line)}
/* MES messages à droite, en teinte d'accent : c'est le seul repère qui dise qui parle
   sans écrire un nom à chaque ligne. */
.pl-m.mine{margin-left:auto;background:var(--acc);border-color:var(--acc)}
.pl-m.mine .pl-m-txt{color:var(--on-acc)}
.pl-m.mine .pl-m-ts{color:var(--on-acc);opacity:.8}
/* `pre-wrap` : les retours à la ligne de l'auteur sont significatifs, et les garder évite
   de fabriquer le moindre `<br>` — donc une balise de moins à introduire dans du texte
   d'inconnu. `overflow-wrap:anywhere` : une URL de 300 caractères n'élargit pas le modal. */
.pl-m-txt{font-size:13px;color:var(--txt);line-height:1.45;
          white-space:pre-wrap;overflow-wrap:anywhere}
.pl-m-ts{font-size:10px;color:var(--mut);margin-top:3px;text-align:right}
.pl-in{
  display:block;width:100%;box-sizing:border-box;
  padding:8px 10px;font:inherit;font-size:13px;
  background:var(--input);color:var(--txt);
  border:1px solid var(--line);border-radius:6px;resize:vertical;
}

/* ------------------------------------------- liste des communautés gérées -- */
/* LE CHEMIN QUI MANQUAIT (v0.6.173). Le seul accès à l'écran de placement était le clic
   sur une ÉPINGLE — et `GET /communities/places` ne rend que les communautés DÉJÀ
   posées, donc une communauté jamais placée n'avait pas d'épingle, donc aucun moyen
   d'être placée. Cette liste est l'entrée qui casse le cercle. */
.pl-places{list-style:none;margin:0;padding:0}
.pl-place{margin-bottom:6px}
.pl-place-b{
  width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  text-align:left;font:inherit;cursor:pointer;padding:8px 10px;border-radius:8px;
  background:var(--panel);color:var(--txt);border:1px solid var(--line);
}
.pl-place-b:hover{border-color:var(--acc)}
.pl-place-nm{font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* L'état se lit SANS cliquer : c'est la question qu'on se pose en ouvrant la liste.
   `--mut` pour « pas encore », `--ok` pour « posée » — jamais `--bad` : ne pas être sur
   la carte n'est pas une erreur, c'est le défaut. */
.pl-place-st{flex:0 0 auto;font-size:11px;color:var(--mut);white-space:nowrap}
.pl-place-st.on{color:var(--ok)}
/* La description partage l'aspect des autres saisies (`.pl-in`) ; l'ID ne porte que ce
   qui se décide au niveau de l'ID — sa hauteur minimale dans une fente étroite. */
#pl-desc{min-height:56px}

/* Mobile : couche AJOUTÉE en fin de fichier et uniquement sous requête média, comme les
   dix feuilles précédentes. Au-dessus de 560 px, pas une règle ne s'applique. */
@media (max-width:560px){
  .pl-modal{padding:0;align-items:flex-end}
  .pl-box{max-width:none;max-height:92dvh;border-radius:12px 12px 0 0}
  /* 16 px : sous ce seuil, iOS zoome sur le champ focalisé et décadre la page. */
  .pl-in,.pl-sel,.pl-num{font-size:16px}
  /* La grille de 7 colonnes ne tient pas : on la laisse défiler DANS son cadre plutôt que
     de la rétrécir jusqu'à l'illisible ou d'élargir le volet. */
  .pl-avail{display:block;overflow-x:auto}
}
@media (hover:none){
  .pl-btn{min-height:40px}
  .pl-x{min-width:40px;min-height:40px}
  .pl-conv-del{min-width:40px}
  .pl-slot-in,.pl-check input{width:18px;height:18px}
}