/* Les deux onglets « roster » : les equipes, et les personnages d'un membre
   avec leur modale de detail.

   Sortie du <style> d'index.html. L'ordre de chargement est fixe par
   index.html et verifie par tests/css-ordre.test.js. */

/* ---------- Roster ---------- */
.roster-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:20px 0 26px
}
.roster-count{
  font-size:13px;color:var(--muted);margin-right:auto;
  letter-spacing:.04em
}
.roster-count b{color:var(--gold-bright);font-family:var(--display)}
/* LE SELECTEUR DE JOUEUR tient sur UNE ligne, libelle compris.

   `.wiki-field` empile son libelle au-dessus du champ, ce qui convient a une
   grille de filtres mais pas a une barre d outils : le bloc faisait 64 px de
   haut la ou le decompte en fait 20, et ce dernier se centrait 10 px trop
   haut. En ligne, tout retombe sur la meme hauteur que le select. */
.roster-toolbar #rosterOwnerField{flex-direction:row;align-items:center;gap:8px}
.roster-toolbar #rosterOwnerField>span{white-space:nowrap}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}

.team{
  position:relative;background:
    linear-gradient(180deg,var(--panel),var(--obsidian-2));
  border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:var(--shadow);
  /* Colonne flex : le bas de carte est poussé vers le bas, si bien que les
     actions tombent à la même hauteur d'une carte à l'autre — même quand des
     héros portent une note et d'autres pas. */
  display:flex;flex-direction:column;
}
.team::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(217,164,65,.14);
  border-radius:9px;pointer-events:none
}
.team-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative}
.seal{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%, #3a2c15, #17110a);
  border:1px solid var(--gold-deep);color:var(--gold-bright);
  font-family:var(--display);font-weight:700;font-size:16px;
  box-shadow:inset 0 0 10px rgba(217,164,65,.3)
}
.team-who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.team-pseudo{
  font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.03em;
  color:var(--parchment);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* Avec un nom, il prend la vedette et le pseudo devient secondaire. */
.team-name{
  font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.03em;
  color:var(--gold-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.team-name + .team-pseudo{font-size:12.5px;font-weight:500;color:var(--muted)}
.team-date{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}

.team-heroes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mini{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.mini-portrait{
  width:100%;aspect-ratio:1/1;border-radius:9px;overflow:hidden;
  background:var(--vignette-fond,#0b0910) center/cover no-repeat;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted-2);font-size:20px
}
.mini-portrait img{width:100%;height:100%;object-fit:cover}
.mini-name{font-size:11px;color:var(--parchment);line-height:1.15;min-height:26px;
  display:flex;align-items:center;justify-content:center}
.mini-name.empty{color:var(--muted-2)}
.mini-gear{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;
  align-items:flex-start;align-content:flex-start}
.icn{
  flex:none;box-sizing:border-box;
  width:22px;height:22px;border-radius:5px;background:var(--vignette-fond,#0b0910) center/contain no-repeat;
  border:1px solid var(--line-soft);
}
.icn.weapon{border-color:var(--gold-deep)}
.icn.jewel{border-color:rgba(161,44,44,.55)}
.icn.empty{opacity:.28}
.mini-note{
  font-size:10.5px;color:var(--muted);font-style:italic;line-height:1.25;
  margin-top:2px;word-break:break-word
}
/* `margin-top:auto` porté ici depuis l'ancien bouton « Voir l'équipement » :
   c'est lui qui poussait le bas de carte vers le bas. Sans ce report, les
   actions remonteraient dès qu'un héros porte une note et pas son voisin. */
.team-actions{display:flex;gap:8px;margin-top:auto;padding-top:16px;position:relative}
.team-actions .btn{padding:8px 14px;font-size:13px;flex:1;justify-content:center}
/* La bande de héros est un <button> : sans ces remises à zéro, le navigateur
   lui applique son propre fond, sa bordure et sa police. */
.team-heroes.clickable{
  cursor:pointer;border-radius:10px;transition:.16s;padding:4px;margin:-4px;
  width:calc(100% + 8px);appearance:none;border:0;background:none;
  font:inherit;color:inherit;text-align:inherit
}
.team-heroes.clickable:hover{background:rgba(217,164,65,.06)}

/* Modal détail d'équipe */
/* ---------- Roster des membres ---------- */
.member-roster-toolbar{
  display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:22px 0 14px;
  padding:14px;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);min-width:0
}
.member-roster-modes{display:flex;gap:8px;flex-wrap:wrap}
.member-roster-owner-field{min-width:min(250px,100%)}
.member-roster-owner-field span,
.member-roster-field-label{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}
.member-roster-owner-field select{
  min-width:220px;max-width:100%;font-family:var(--ui);font-size:14px;
  color:var(--parchment);background:var(--obsidian-2);border:1px solid var(--line);
  border-radius:8px;padding:10px 34px 10px 12px
}
.member-roster-toolbar #memberRosterAdd{margin-left:auto}
.member-roster-filters{
  display:flex;flex-direction:column;gap:10px;margin-bottom:14px;min-width:0
}
.member-roster-filter-fields{
  display:grid;gap:10px;min-width:0;
  grid-template-columns:repeat(auto-fit,minmax(min(168px,100%),1fr))
}
.member-roster-filter-field{
  display:flex;flex-direction:column;gap:5px;min-width:0
}
.member-roster-filter-field span{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)
}
.member-roster-filter-field select{
  width:100%;min-width:0;cursor:pointer;font-family:var(--ui);font-size:13.5px;
  color:var(--parchment);background:var(--obsidian-2);border:1px solid var(--line);
  border-radius:8px;padding:9px 30px 9px 11px;transition:.16s
}
.member-roster-filter-field select:hover{border-color:var(--gold-deep)}
.member-roster-filter-field select.on{
  border-color:var(--gold-bright);color:var(--gold-bright);
  background:linear-gradient(180deg,rgba(217,164,65,.12),var(--obsidian-2))
}
.member-roster-filter-actions{display:flex;justify-content:flex-end}
.member-roster-count{font-size:12px;color:var(--muted);margin:3px 0 12px}
.member-roster-count b{font-family:var(--display);color:var(--gold-bright)}
.member-roster-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
  gap:16px
}
.member-roster-card{
  min-width:0;position:relative;overflow:hidden;padding:15px;
  background:linear-gradient(165deg,var(--panel),var(--obsidian-2));
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)
}
.member-roster-card.clickable{cursor:pointer;transition:.16s}
.member-roster-card.clickable:hover{border-color:var(--gold-deep)}
.member-roster-detail-btn{
  width:100%;justify-content:center;margin-top:12px;font-size:12px;padding:8px
}
.member-roster-card::after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(217,164,65,.12);
  border-radius:9px;pointer-events:none
}
.member-roster-card-head{
  display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;
  position:relative;z-index:1
}
.member-roster-portrait{
  width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--vignette-fond,#0b0910);
  border:1px solid var(--gold-deep)
}
.member-roster-portrait img{width:100%;height:100%;object-fit:cover}
.member-roster-summary{min-width:0}
.member-roster-name{
  margin:0 0 4px;font-family:var(--display);font-size:18px;color:var(--parchment);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.member-roster-potential{
  display:inline-flex;border:1px solid var(--gold-deep);border-radius:999px;
  padding:2px 9px;font-size:11px;font-weight:700;color:var(--gold-bright)
}
.member-roster-builds{
  display:flex;gap:6px;flex-wrap:wrap;margin:13px 0 0;position:relative;z-index:1
}
.member-roster-build-tag{
  padding:5px 8px;border:1px solid var(--line-soft);border-radius:7px;
  color:var(--muted-2);font-size:10px
}
.member-roster-build-tag.saved{border-color:var(--gold-deep);color:var(--parchment)}
.member-roster-build-tag.favorite{
  border-color:var(--gold);color:var(--gold-bright);
  box-shadow:inset 0 0 0 1px rgba(217,164,65,.12)
}
.member-roster-card-actions{
  display:flex;gap:8px;margin-top:14px;position:relative;z-index:1
}
.member-roster-card-actions .btn{flex:1;justify-content:center;padding:8px 10px;font-size:12px}
.member-roster-modal{width:min(920px,100%);max-height:92vh}
.member-roster-editor{padding:18px;overflow-y:auto;overflow-x:hidden;min-width:0}
.member-roster-editor-hero{
  display:flex;align-items:center;gap:13px;margin-bottom:16px
}
.member-roster-editor-hero .member-roster-portrait{width:64px;height:64px}
.member-roster-editor-hero h2{
  margin:0;font-family:var(--display);font-size:20px;color:var(--parchment)
}
.member-roster-editor-section{margin-top:15px;min-width:0}
.member-roster-editor-section > .member-roster-field-label{display:block;margin-bottom:7px}
.member-roster-potential-list,
.member-roster-weapon-tabs{
  display:flex;gap:6px;overflow-x:auto;padding:2px 1px 8px;scrollbar-width:thin
}
.member-roster-potential-list .chip,
.member-roster-weapon-tabs .chip{flex:none}
.member-roster-weapon-tabs{
  border-bottom:1px solid var(--line);margin-bottom:14px
}
.member-roster-build-panel{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:16px;
  min-width:0
}
.member-roster-build-panel .gear{align-content:start}
.member-roster-note{min-height:120px}
.member-roster-editor-actions{
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--line)
}
.member-roster-build-empty{
  color:var(--muted);font-size:12px;margin:0 0 10px;line-height:1.4
}
.member-roster-note-column .btn{width:100%;justify-content:center;margin-top:9px}
.member-roster-favorite[aria-pressed="true"]{
  border-color:var(--gold);color:var(--gold-bright);
  background:rgba(217,164,65,.09)
}

.modal.teammodal{width:min(1240px,96vw)}
/* Modal détail : tout doit tenir sans scroll -> compact + haute */
.modal.teammodal{position:relative;max-height:96vh}
.modal.teammodal .picker-head{
  position:absolute;top:0;left:0;right:0;z-index:3;border-bottom:0;padding:11px 18px;
  background:linear-gradient(180deg, var(--panel) 62%, rgba(27,25,34,0))
}
.team-detail{
  padding:60px 18px 20px;overflow-y:auto;overflow-x:hidden;display:grid;gap:14px;
  grid-template-columns:repeat(4,1fr);scrollbar-width:none
}
.team-detail::-webkit-scrollbar{width:0;height:0}
.hdetail{
  min-width:0;
  background:var(--obsidian-2);border:1px solid var(--line-soft);border-radius:11px;
  padding:14px 13px;display:flex;flex-direction:column;gap:9px
}
.hd-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.hd-portrait{
  width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--vignette-fond,#0b0910) center/cover no-repeat;display:grid;place-items:center;color:var(--muted-2)
}
.hd-portrait img{width:100%;height:100%;object-fit:cover}
.hd-name{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--parchment)}
.hd-name.empty{color:var(--muted-2);font-style:italic}
.hd-pot{
  align-self:center;font-size:11px;font-weight:600;color:var(--gold-bright);
  border:1px solid var(--gold-deep);border-radius:999px;padding:2px 11px;margin-top:1px
}
.hd-gear{display:flex;flex-direction:column;gap:2px}
.hd-group-t{
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
  margin:9px 0 3px
}
.eq-line{display:flex;align-items:center;gap:9px;padding:4px 0}
.eq-thumb{
  width:32px;height:32px;flex:none;border-radius:6px;border:1px solid var(--line-soft);
  background:var(--vignette-fond,#0b0910) center/contain no-repeat
}
.eq-thumb.weapon{border-color:var(--gold-deep)}
.eq-thumb.jewel{border-color:rgba(161,44,44,.55)}
.eq-thumb.empty{opacity:.3}
/* La même vignette, en tête de la modale d'apport : plus grande, puisque
   c'est là qu'on identifie la pièce qu'on est en train de lire. */
.piece-detail-thumb{width:44px;height:44px;border-radius:8px}
.piece-detail-thumb[hidden]{display:none}
.eq-txt{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.2}
.eq-slot{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.eq-name{font-size:12.5px;color:var(--parchment);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eq-line.empty .eq-name{color:var(--muted-2)}

/* La ligne d'une pièce équipée ouvre l'apport de cette pièce. Un vrai
   <button> plutôt qu'un div cliquable : atteignable au clavier sans tabindex
   artificiel, et annonçable par un lecteur d'écran. Le chevron reste visible
   en permanence — la majorité des membres consultent sur téléphone, où le
   survol n'existe pas. */
.eq-line[type="button"]{
  width:100%;background:none;border:0;text-align:left;
  font:inherit;color:inherit;cursor:pointer
}
.eq-line[type="button"]:hover,
.eq-line[type="button"]:focus-visible{background:rgba(255,255,255,.05)}
.eq-chevron{margin-left:auto;color:var(--gold);flex:none}
@media(pointer:coarse){
  .eq-line[type="button"]{min-height:44px}
}
.hd-note{
  font-size:12px;font-style:italic;color:var(--muted);line-height:1.3;
  border-top:1px solid var(--line-soft);padding-top:9px;margin-top:3px
}
.hd-roster-import{
  width:100%;justify-content:center;margin-top:auto;font-size:11px;padding:8px 9px
}
@media(max-width:720px){ .team-detail{grid-template-columns:repeat(2,1fr)} .modal.teammodal{max-height:92vh} .team-detail{overflow-y:auto;overflow-x:hidden;scrollbar-width:none} }
@media(max-width:440px){ .team-detail{grid-template-columns:1fr} }

/* Modal détail d'un personnage consulté chez un autre membre */
.modal.rostermodal{
  width:min(520px,96vw);max-height:92vh;display:flex;flex-direction:column
}
.roster-detail-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 18px;border-bottom:1px solid var(--line-soft);flex:none
}
.roster-detail-position{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)
}
.roster-detail-body{padding:15px 18px 20px;overflow-y:auto;overflow-x:hidden;min-height:0}
.roster-detail-weapons{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap
}
.roster-detail-weapon{
  appearance:none;cursor:pointer;display:grid;place-items:center;
  min-width:40px;min-height:40px;padding:5px;background:transparent;
  border:1px solid var(--line);border-radius:11px;transition:.16s
}
.roster-detail-weapon:hover:not(:disabled){border-color:var(--gold-deep)}
.roster-detail-weapon[aria-pressed="true"]{
  border-color:var(--gold-bright);background:rgba(217,164,65,.12)
}
.roster-detail-weapon:disabled{cursor:default;opacity:.34}
.roster-detail-hint{
  font-size:11.5px;font-style:italic;color:var(--muted-2);text-align:center;margin-top:2px
}

.empty-state{
  text-align:center;padding:64px 20px;border:1px dashed var(--line);
  border-radius:14px;color:var(--muted)
}
.empty-state .big{font-family:var(--display);font-size:20px;color:var(--parchment);margin:0 0 8px}

/* Badge d'élément partagé par les sections de l'Analyse. */
.elem-badge{--ec:var(--gold);display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--ec) 55%, var(--line));
  background:color-mix(in srgb, var(--ec) 14%, var(--obsidian-2));color:var(--parchment)}
.elem-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--ec);flex:none;box-shadow:0 0 6px var(--ec)}

/* Classement de puissance dans la fiche de héros. Le chiffre compare des
   builds entre eux ; la note qui l'accompagne dit ce qu'il n'est pas. */
.hd-puissance{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
.hd-puissance-note{font-size:12px;color:var(--muted);margin:4px 0 10px}
.hd-puissance-ligne{
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:start;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--line-soft)
}
.hd-puissance-ligne:last-child{border-bottom:0}
.hd-puissance-valeur{font-variant-numeric:tabular-nums;color:var(--gold-bright)}
.hd-puissance-mesures{display:grid;gap:4px;text-align:right;font-size:13px}
.hd-puissance-valeur.secondaire{color:var(--muted)}
.hd-puissance-detail{grid-column:1/-1;min-width:0;font-size:12px}
/* `display:flex` atteignait bien les 44 px, mais supprimait le triangle natif
   du <summary> : plus rien n'annoncait que la ligne s'ouvre. `list-item` le
   conserve, et le remplissage vertical porte seul la cible tactile. */
.hd-puissance-detail summary{
  cursor:pointer;color:var(--gold-bright);
  display:list-item;list-style-position:inside;
  box-sizing:border-box;padding:13px 0;min-height:44px
}
.hd-puissance-groupe{margin-top:8px;color:var(--muted)}
.hd-puissance-rotation{margin:4px 0 0;padding-left:20px;overflow-wrap:anywhere}
.hd-puissance-temps{font-variant-numeric:tabular-nums}
/* L'écran « Membres ». Il vit dans cette feuille et non dans la sienne : une
   feuille de plus imposerait une entrée dans FEUILLES (tests/css-ordre.test.js)
   et dans CORE_ASSETS, pour trois règles. */
.admin-table{width:100%;border-collapse:collapse}
.admin-table th{
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:8px 10px
}
.admin-table td{
  padding:8px 10px;border-bottom:1px solid var(--line-soft);
  vertical-align:middle
}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-etat{color:var(--muted)}