/* ============================================================
   Recherche de groupe — feuille de style du module (maquette).
   Toutes les classes sont prefixees .lfg- pour ne rien toucher
   d'existant. Les couleurs suivent --theme-accent de la fiche.
   ============================================================ */

/* Le bouton tient la tete de la colonne de droite, au gabarit exact de
   l encart de soutien (220 px, 12 px du bord, sous le bouton Tipeee) :
   c est un element de la colonne, pas une pastille posee par-dessus.
   L encart descend derriere lui, cale par calerSupport(). */
.lfg-toggle{position:fixed;top:112px;right:12px;z-index:1300;box-sizing:border-box;width:220px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 13px;border-radius:12px;cursor:pointer;border:1px solid rgba(var(--theme-accent-rgb),.45);
  background:rgba(var(--theme-accent-rgb),.16);color:var(--theme-text);font:600 11.5px/1 system-ui,sans-serif;
  white-space:nowrap}
.lfg-toggle i{width:8px;height:8px;border-radius:50%;background:#475569}
.lfg-toggle.is-on i{background:#22c55e;box-shadow:0 0 8px #22c55e}

.lfg-panel{position:fixed;top:158px;right:12px;z-index:9;width:266px;display:none;flex-direction:column;
  border:1px solid rgba(var(--theme-accent-rgb),.34);border-radius:14px;overflow:hidden;
  background:linear-gradient(145deg,rgba(17,24,39,.97),rgba(8,12,20,.95));
  box-shadow:0 14px 36px rgba(0,0,0,.45),0 0 22px rgba(var(--theme-accent-rgb),.08);
  color:var(--theme-text);backdrop-filter:blur(8px)}
.lfg-panel.is-on{display:flex}
.lfg-panel::before{content:'';position:absolute;top:0;left:24px;right:24px;height:2px;border-radius:0 0 2px 2px;
  background:var(--theme-accent);box-shadow:0 0 12px rgba(var(--theme-accent-rgb),.65)}

.lfg-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.lfg-title{font:700 11px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--theme-accent)}
.lfg-timer{font:600 10px/1 system-ui,sans-serif;color:#64748b;white-space:nowrap}

.lfg-body{padding:12px 14px;overflow-y:auto;max-height:min(38vh,320px);
  scrollbar-width:thin;scrollbar-color:rgba(var(--theme-accent-rgb),.4) transparent}
.lfg-body::-webkit-scrollbar{width:7px}
.lfg-body::-webkit-scrollbar-thumb{background:rgba(var(--theme-accent-rgb),.35);border-radius:9px}

.lfg-label{font:600 9.5px/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#64748b;margin:0 0 7px}
.lfg-label span{color:#334155}
.lfg-field{margin-bottom:12px}
.lfg-field:last-child{margin-bottom:0}

.lfg-chips{display:flex;flex-wrap:wrap;gap:5px}
.lfg-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;
  font:600 11px/1 system-ui,sans-serif;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);color:#e2e8f0}
.lfg-chip b{font-weight:600;color:#64748b}
.lfg-chip .lfg-kill{cursor:pointer;color:#64748b;margin-left:2px}
.lfg-chip .lfg-kill:hover{color:#f87171}
.lfg-chip.is-add{padding:5px 10px;border-style:dashed;color:#64748b;cursor:pointer}
.lfg-chip.is-add:hover{color:#e2e8f0;border-color:rgba(var(--theme-accent-rgb),.6)}
.lfg-chip.is-pick{cursor:pointer}
.lfg-chip.is-pick:hover{border-color:rgba(var(--theme-accent-rgb),.6)}

/* Grille de choix de classe : les visages seuls, sans nom ni pastille.
   Le nom reste en title et en alt, pour le survol et les lecteurs
   d ecran. Dix-huit pastilles nommees debordaient du panneau. */
.lfg-faces{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lfg-pick{display:flex;align-items:center;justify-content:center;padding:2px;
  border-radius:50%;cursor:pointer;border:1px solid transparent;transition:border-color .12s,transform .12s}
.lfg-pick:hover{border-color:rgba(var(--theme-accent-rgb),.75);transform:translateY(-1px)}
.lfg-pick .lfg-face{width:28px;height:28px}
.lfg-face{width:20px;height:20px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16)}

.lfg-input{width:100%;box-sizing:border-box;padding:7px 9px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.35);color:var(--theme-text);
  font:500 12px/1.3 system-ui,sans-serif}
.lfg-input::placeholder{color:#475569}
.lfg-input:focus{outline:0;border-color:rgba(var(--theme-accent-rgb),.6)}
textarea.lfg-input{resize:none;height:48px}

/* Les trois serveurs ont chacun leur couleur : on les distingue d un
   coup d oeil, sans lire. Au repos la teinte reste sourde ; le serveur
   choisi la porte franchement. La couleur prime ici sur l accent de la
   fiche, sinon les trois boutons redeviendraient identiques. */
.lfg-serv{display:flex;gap:5px}
.lfg-serv button{flex:1;padding:6px 0;border-radius:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.3);color:#94a3b8;
  font:600 10.5px/1 system-ui,sans-serif;transition:background .12s,border-color .12s,color .12s}

.lfg-serv button.is-pandora{--sv:59,90,190}    /* bleu fonce */
.lfg-serv button.is-ogrest {--sv:34,160,80}    /* vert */
.lfg-serv button.is-rubilax{--sv:200,50,50}    /* rouge */

.lfg-serv button{border-color:rgba(var(--sv),.34);background:rgba(var(--sv),.12)}
.lfg-serv button:hover{border-color:rgba(var(--sv),.6);color:#e2e8f0}
.lfg-serv button.is-on{border-color:rgb(var(--sv));color:#fff;
  background:rgba(var(--sv),.5);box-shadow:0 0 10px rgba(var(--sv),.35)}

.lfg-djs{display:flex;flex-direction:column;gap:4px}
.lfg-dj{display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;
  background:rgba(255,255,255,.035);font:500 11.5px/1.2 system-ui,sans-serif;color:#cbd5e1}
.lfg-dj-icone{width:20px;height:20px;flex:0 0 auto;object-fit:contain}
.lfg-dj-nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lfg-dj b{margin-left:auto;font:600 10px/1 system-ui,sans-serif;color:#64748b}
.lfg-dj .lfg-kill{cursor:pointer;color:#64748b;font-size:14px;line-height:1}
.lfg-dj .lfg-kill:hover{color:#f87171}

.lfg-hint{font:500 10.5px/1.35 system-ui,sans-serif;color:#475569;margin:6px 0 0}

.lfg-foot{padding:10px 14px 13px;border-top:1px solid rgba(255,255,255,.07);
  display:flex;flex-direction:column;gap:7px}
.lfg-btn{width:100%;padding:9px 0;border-radius:9px;cursor:pointer;border:0;
  font:700 12px/1 system-ui,sans-serif;background:var(--theme-accent);color:#0b1020}
.lfg-btn:disabled{opacity:.45;cursor:not-allowed}
.lfg-btn.is-ghost{background:transparent;border:1px solid rgba(255,255,255,.14);color:#94a3b8;
  font-weight:600;padding:7px 0}

/* pastilles rouges */
.lfg-badge{display:inline-block;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;
  border-radius:999px;background:#dc2626;color:#fff;border:1.5px solid #0b1020;
  font:700 10px/14px system-ui,sans-serif;text-align:center;pointer-events:none}
.lfg-tranche-badge{position:absolute;left:50%;transform:translateX(-50%);top:calc(100% - 3px);z-index:12}

/* drapeau « Je cherche ici », a gauche de l'illustration du donjon */
.lfg-flag{flex:0 0 auto;display:inline-grid;place-items:center;width:22px;height:22px;margin-right:2px;
  border-radius:7px;cursor:pointer;font-size:12px;line-height:1;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#64748b;
  transition:background .12s,color .12s,border-color .12s}
.lfg-flag:hover{color:#fecaca;border-color:rgba(220,38,38,.55);background:rgba(220,38,38,.14)}
.lfg-flag.is-on{color:#fff;border-color:#dc2626;background:#dc2626;
  box-shadow:0 0 10px rgba(220,38,38,.55)}
.lfg-flag.is-static{cursor:default;width:18px;height:18px;font-size:10px;box-shadow:none}
/* compteur du donjon, juste apres le drapeau */
.lfg-dj-count{flex:0 0 auto;margin-right:4px}

/* bouton d'appel sous le titre de la fiche */
.lfg-cta-wrap{text-align:center}
.lfg-cta{display:inline-flex;align-items:center;gap:8px;margin:14px auto 0;padding:9px 16px;
  border-radius:999px;cursor:pointer;border:1px solid rgba(220,38,38,.5);
  background:rgba(220,38,38,.12);color:#fecaca;font:700 12.5px/1 system-ui,sans-serif}
.lfg-cta:hover{background:rgba(220,38,38,.2)}
.lfg-cta.is-vide{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#64748b}

/* modale */
.lfg-ov{position:fixed;inset:0;z-index:2000;background:rgba(4,7,14,.76);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:24px}
.lfg-ov.is-on{display:flex}
.lfg-modal{width:min(900px,94vw);max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(var(--theme-accent-rgb),.3);border-radius:18px;
  background:linear-gradient(145deg,rgba(17,24,39,.98),rgba(8,12,20,.97));
  box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--theme-text)}
.lfg-mhead{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;gap:12px}
.lfg-mhead h3{margin:0;font:700 19px/1.2 system-ui,sans-serif}
.lfg-mhead .lfg-timer{margin-left:auto;font-size:11.5px}
.lfg-mhead .lfg-x{cursor:pointer;color:#64748b;font-size:20px;line-height:1}
.lfg-mlist{overflow-y:auto;padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px}
.lfg-mlist .lfg-face{width:26px;height:26px}
.lfg-mlist .lfg-chip{font-size:12px;padding:3px 11px 3px 3px}
.lfg-card{border:1px solid rgba(255,255,255,.08);border-radius:13px;
  background:rgba(255,255,255,.028);overflow:hidden}
.lfg-row{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer}
.lfg-row:hover{background:rgba(255,255,255,.02)}
.lfg-av{width:40px;height:40px;border-radius:9px;flex:0 0 auto;object-fit:cover;background:#0b1020;
  border:1px solid rgba(255,255,255,.18)}
.lfg-who{font:700 14.5px/1.2 system-ui,sans-serif}
.lfg-who span{color:#64748b;font-weight:600;font-size:11px}
.lfg-meta{font:500 11.5px/1.2 system-ui,sans-serif;color:#64748b;margin-top:3px}
.lfg-row .lfg-chips{margin-left:auto}
.lfg-caret{color:#475569;font-size:13px}
.lfg-open{padding:0 16px 16px;border-top:1px solid rgba(255,255,255,.06);display:none}
.lfg-card.is-open .lfg-open{display:block}
.lfg-msg{font:500 13.5px/1.55 system-ui,sans-serif;color:#cbd5e1;margin:12px 0 0;padding-left:11px;
  border-left:2px solid rgba(var(--theme-accent-rgb),.5)}
.lfg-msg.is-vide{color:#475569;font-style:italic;border-left-color:rgba(255,255,255,.08)}
.lfg-act{display:flex;align-items:center;gap:10px;margin-top:13px}
.lfg-act .lfg-input{flex:1;font-size:13px;padding:9px 11px}
.lfg-act .lfg-btn{width:auto;padding:10px 18px;flex:0 0 auto;font-size:12.5px}
.lfg-done{margin-top:13px;padding:11px 13px;border-radius:10px;border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.1);color:#bbf7d0;font-size:12.5px}
.lfg-done b{color:#fff}
.lfg-empty{padding:34px 20px;text-align:center;color:#64748b;font-size:13px}

/* cloche */
.lfg-bell{position:fixed;top:12px;right:142px;z-index:99998;width:38px;height:38px;border-radius:11px;
  cursor:pointer;font-size:16px;border:1px solid #2b4a66;background:rgba(12,20,34,.92);color:#cfe3f5;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.lfg-bell .lfg-badge{position:absolute;top:-6px;right:-6px}
.lfg-memos{position:fixed;top:58px;right:142px;z-index:99999;width:300px;display:none;padding:10px;
  border:1px solid #2b4a66;border-radius:12px;background:#0d1426;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.lfg-memos.is-on{display:block}
.lfg-memo{padding:10px 11px;border-radius:9px;background:rgba(255,255,255,.035);margin-bottom:7px;
  font:500 12.5px/1.45 system-ui,sans-serif;color:#cbd5e1}
.lfg-memo b{color:#fff}
.lfg-memo em{display:block;color:#64748b;font-style:normal;font-size:11px;margin-top:3px}

/* filet : rien sous 1100 px, comme convenu */
@media (max-width:1100px){
  .lfg-toggle,.lfg-panel,.lfg-bell,.lfg-memos,.lfg-cta-wrap,.lfg-tranche-badge{display:none!important}
}