/* =====================================================================
   LE PARCOURS D'ÉQUIPE v5 — pièces communes à /e/<slug>, Mon équipe, l'invitation, la porte.
   Sur pierre claire : des pièces noires en relief, une plaque de pierre pleine pour le texte.

   .q5-liste / .q5      les POSTES : un rang par joueur — numéro en filet, portrait (ou initiale)
                        à angle franc, pseudo en fonte large, rôle, état (point + mot).
   .q5-etat             l'état d'un poste ou d'une équipe : un point et un mot, jamais la couleur seule.
   .x5                  une pièce noire en relief (double bord, grain de roche, un angle franc).
   .x5--pierre          la même en pierre pleine, pour du texte noir.
   .x5-titre            le titre d'une section : fonte large, filet noir, relevé à droite.
   .nba                 LA prochaine action : habillée par skld-prochaine-v5.css (paquet du site).
   ===================================================================== */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ------------------------------------------------ les pièces */
.x5{position:relative;isolation:isolate;padding:clamp(18px,2.2vw,30px);border-radius:28px 28px 28px 8px;color:#f1f1ec;
  background:url("/static/players/roche.webp") center/520px,linear-gradient(180deg,#191919,#070707);background-blend-mode:soft-light,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.13),0 0 0 5px rgba(10,10,10,.06),0 50px 76px -50px rgba(0,0,0,.8)}
.x5--inv{border-radius:28px 8px 28px 28px}
.x5--pierre{color:#0a0a0a;background:#e2e4e1;box-shadow:inset 0 0 0 1px rgba(10,10,10,.07),inset 0 1px 0 rgba(255,255,255,.7),0 34px 44px -36px rgba(0,0,0,.4)}
.x5__k{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--f-mono);font-weight:700;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.62)}
.x5--pierre .x5__k{color:rgba(10,10,10,.62)}
.x5__p{margin:14px 0 0;max-width:62ch;font-size:14.5px;line-height:1.55;color:rgba(241,241,236,.72)}
.x5--pierre .x5__p{color:rgba(10,10,10,.72)}
.x5__p b{color:#f1f1ec}
.x5--pierre .x5__p b{color:#0a0a0a}
.x5-titre{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:16px;border-bottom:1.5px solid #0a0a0a}
.x5-titre h2{margin:0;font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(30px,4.4vw,64px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;color:#0a0a0a}
.x5-titre .v5-rel{padding-bottom:4px;color:rgba(10,10,10,.62)}
.x5-titre .v5-rel b{color:#0a0a0a}

/* ------------------------------------------------ l'état : un point et un mot */
.q5-etat{display:inline-flex;align-items:center;gap:8px;min-height:28px;padding:5px 11px;border-radius:9px;white-space:nowrap;
  font-family:var(--f-mono);font-weight:700;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:#f1f1ec;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.q5-etat::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:rgba(241,241,236,.42)}
.q5-etat--ok::before{background:var(--v5-lime);box-shadow:0 0 0 3px rgba(137,244,33,.2)}
.q5-etat--manque{color:#ffd0d0;box-shadow:inset 0 0 0 1px rgba(229,38,43,.6)}
.q5-etat--manque::before{background:#e5262b}
.q5-etat--libre{color:rgba(241,241,236,.7);background:none;box-shadow:inset 0 0 0 1px rgba(241,241,236,.24);border:0}
.q5-etat--libre::before{background:none;box-shadow:inset 0 0 0 1.5px rgba(241,241,236,.6)}
/* sur la pierre : la même pastille, en noir */
.sur-clair > .q5-etat,.q5-etat--clair{color:#f1f1ec;background:#0a0a0a;box-shadow:none}

/* ------------------------------------------------ les postes */
.q5-liste{list-style:none;margin:0;padding:0;counter-reset:poste}
.q5{counter-increment:poste;position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,1.6vw,22px);padding:14px 4px}
.q5 + .q5{border-top:1px solid rgba(241,241,236,.12)}
.q5::before{content:counter(poste,decimal-leading-zero);width:1.3em;font-family:var(--f-chiffre);font-weight:800;font-size:clamp(34px,3.4vw,48px);line-height:.8;
  color:transparent;-webkit-text-stroke:1.2px rgba(241,241,236,.46);transition:color 400ms var(--v5-masse),-webkit-text-stroke-color 400ms var(--v5-masse)}
.q5:hover::before,.q5--moi::before{color:#f1f1ec;-webkit-text-stroke-color:transparent}
.q5__ph{position:relative;display:grid;place-items:center;flex:none;width:clamp(56px,5.4vw,72px);aspect-ratio:1;border-radius:20px 20px 20px 6px;overflow:hidden;background:#0c0c0c;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.04em;color:#f1f1ec}
.q5__ph img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter 500ms var(--v5-masse),transform 900ms var(--v5-sortie)}
.q5:hover .q5__ph img,.q5--moi .q5__ph img{filter:none}
.q5:hover .q5__ph img{transform:scale(1.08)}
.q5__id{display:grid;gap:7px;min-width:0}
.q5__nom{font-family:var(--f-mega);font-weight:900;font-stretch:125%;font-size:clamp(19px,2.1vw,30px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q5__role{display:flex;flex-wrap:wrap;gap:6px 12px;font-family:var(--f-mono);font-weight:600;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(241,241,236,.58)}
.q5__role b{font-weight:700;color:#f1f1ec}
.q5__role .moi{padding:1px 7px;border-radius:5px;font-weight:700;color:#050505;background:var(--v5-lime)}
.q5__fin{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.q5__fin form{margin:0}
/* un poste vide : le portrait est un contour, le nom s'efface */
.q5--libre .q5__ph{background:none;box-shadow:inset 0 0 0 1.5px rgba(241,241,236,.3);color:rgba(241,241,236,.4);
  background-image:repeating-linear-gradient(135deg,rgba(241,241,236,.1) 0 2px,transparent 2px 9px)}
.q5--libre .q5__nom{color:rgba(241,241,236,.5)}
.q5__kick{height:30px;padding:0 11px;border:0;border-radius:9px;cursor:pointer;color:rgba(241,241,236,.72);background:none;box-shadow:inset 0 0 0 1px rgba(241,241,236,.22);
  font-family:var(--f-mono);font-weight:700;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;transition:color 240ms linear,box-shadow 240ms linear}
.q5__kick:hover{color:#ffd0d0;box-shadow:inset 0 0 0 1px rgba(229,38,43,.7)}

/* LA prochaine action (.nba) : son habillage est dans static/skld-prochaine-v5.css, feuille du paquet. */

@media (max-width:700px){
  .q5{grid-template-columns:auto auto minmax(0,1fr);row-gap:10px}
  .q5__fin{grid-column:2 / -1;justify-content:flex-start}
  .q5__nom{white-space:normal;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){ .q5__ph img{transition:none} }