/* pages : fin — fin de partie (fn-), scores (sc-), tutoriel (tu-) */

/* ---------------------------------------------------------------- fin de partie */
.fn-fin, .fn-an { padding: 4px 6px 2px; }
/* .modal.acc hérite de la classe utilitaire .acc (texte orange) : on rétablit la couleur du texte */
.fn-fin, .fn-an, .sc-fen, .fn-partage { color: var(--txt); }
.fn-raison { font-size: 15px; margin-bottom: 4px; }
.fn-record-t { display: inline-block; background: var(--ambre); color: #0a0a0a; font: 700 12px var(--mono);
  letter-spacing: .06em; padding: 2px 8px; border-radius: 3px; margin: 6px 0 4px; }
.fn-record { color: var(--ambre); font-weight: 700; margin: 2px 0; }
.fn-abattre { font-weight: 600; margin: 6px 0 2px; }
.fn-titre { font-size: 34px; line-height: 1.1; margin: 6px 0 2px; font-weight: 700; }
.fn-place { font: 700 28px var(--police); color: var(--ambre); margin: 2px 0; }
.fn-obj { margin: 2px 0; }
.fn-clt { font-size: 17px; font-weight: 700; color: var(--ambre); margin: 2px 0; }
.fn-comm { color: #d4d4d4; font-size: 15px; margin: 8px 0 12px; max-width: 820px; }
.fn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fn-stat { background: var(--panneau2); border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px; }
.fn-stat small { display: block; font-size: 11px; text-transform: uppercase; font-family: var(--etroite); letter-spacing: .08em; color: var(--mut);
  font-weight: 600; }
.fn-stat b { font-size: 20px; }
.fn-h { font-size: 15px; margin: 16px 0 4px; color: var(--txt); text-transform: none; letter-spacing: 0; }
.fn-h.ok { color: var(--vert); } .fn-h.ko { color: var(--rouge); } .fn-h.warn { color: var(--ambre); }
.fn-det { margin-top: 10px; max-width: 860px; }
.fn-q { margin-top: 10px; }
.fn-qg { font-size: 15px; }
.fn-br { margin-top: 12px; }
.fn-frise { width: 100%; height: 76px; display: block; margin-top: 8px; background: var(--panneau2); border-radius: 6px; }
.fn-frise .ax { fill: var(--mut); font: 10px var(--mono); }
.fn-frise .fn-acc { fill: var(--acc); font-weight: 700; }
.fn-frise .fn-amb { fill: var(--ambre); font-weight: 700; }
.fn-cl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 440px)); column-gap: 28px; }
.fn-cl-l { display: flex; align-items: center; gap: 6px; padding: 2px 0; border-bottom: 1px solid #151515; }
.fn-cl-l i { font-style: normal; }
.fn-cl-n { width: 24px; color: var(--mut); font-weight: 700; text-align: right; }
.fn-cl-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fn-cl-l.moi .fn-cl-nom { font-weight: 700; color: var(--acc); }
.fn-cl-l.off .fn-cl-nom { color: var(--discret); }
.fn-cl-l b { font-size: 13px; white-space: nowrap; }
.fn-btns { margin-top: 20px; }

/* analyse */
.fn-sur { font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.fn-verdict { color: #e5e5e5; font-size: 15px; margin: 4px 0 8px; max-width: 860px; }
.fn-an .graphe { height: 220px; }
.fn-fact { background: var(--panneau2); border-left: 3px solid var(--vert); border-radius: 4px; padding: 8px 12px; margin: 4px 0; }
.fn-fact.ko { border-left-color: var(--rouge); }
.fn-fact b { color: var(--txt); }
.fn-fact p { color: #cfcfcf; font-size: 13px; margin-top: 2px; }
.fn-moments { display: grid; gap: 6px; }
.fn-mo { display: grid; grid-template-columns: 70px 120px 1fr; gap: 10px; align-items: start; font-size: 13px; color: #d4d4d4; }
.fn-genre { background: var(--panneau2); border-radius: 3px; font-size: 11px; font-weight: 700; text-align: center;
  padding: 1px 4px; text-transform: uppercase; font-family: var(--etroite); letter-spacing: .04em; }
.fn-conseil { color: #e5e5e5; margin: 3px 0; }

/* partage */
.fn-partage h2 { font-size: 20px; margin-bottom: 4px; }
.fn-resume { width: 100%; min-height: 170px; margin-top: 8px; resize: vertical; background: var(--panneau2); color: var(--txt);
  border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px; font: 14px/1.5 var(--police); }
.fn-resume:focus { outline: none; border-color: var(--acc); }

@media (max-width: 640px) {
  .fn-mo { grid-template-columns: 60px 1fr; }
  .fn-mo > span:last-child { grid-column: 1 / -1; }
  .fn-titre { font-size: 26px; }
}

/* ---------------------------------------------------------------- scores et statistiques */
.sc-titre { font-size: 22px; }
.sc-tete { margin: 12px 0; display: grid; gap: 8px; justify-items: start; }
.sc-filtres { display: flex; flex-wrap: wrap; gap: 12px; }
.sc-kpis { margin-bottom: 12px; }
.sc-zone { margin-bottom: 0; }
.sc-vide { padding: 18px 0; }
.sc-tab td { vertical-align: top; }
.sc-tags { font-size: 11px; color: var(--mut); }
.sc-note { margin-top: 10px; }
.sc-note0 { margin-bottom: 8px; }
.sc-bas { margin-top: 16px; }
.sc-esp { flex: 1; }
.sc-secteurs { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 8px; }
.sc-sect { background: var(--panneau-v); border: 1px solid var(--bord); border-radius: 6px; padding: 10px 12px; }
.sc-sect-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.sc-med { font: 700 10px var(--mono); color: #0a0a0a; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.sc-med.vide { background: var(--panneau2); color: var(--discret); }
.sc-mult { font-size: 24px; font-weight: 700; margin-top: 4px; }
.sc-sect-l { display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; font-size: 12px; margin-top: 6px; }
.sc-sect-l b { text-align: right; }
.sc-nbmed { margin-top: 10px; }
.sc-q-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 8px; }
.sc-rang { font-size: 20px; }
.sc-q-suiv { margin-left: auto; }
.sc-quetes { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 8px; margin-top: 12px; }
.sc-q { background: var(--panneau2); border: 1px solid var(--bord); border-radius: 6px; padding: 8px 12px; }
.sc-q.fait { border-color: #4a3d0a; }
.sc-q-h { display: flex; align-items: center; gap: 8px; }
.sc-q-h b { flex: 1; color: #bdbdbd; }
.sc-q.fait .sc-q-h b { color: var(--txt); }
.sc-q-pt { width: 9px; height: 9px; border-radius: 50%; background: var(--discret); flex: none; }
.sc-q.fait .sc-q-pt { background: var(--ambre); }
.sc-q p { margin-top: 2px; }
.sc-q .barre { margin-top: 6px; }

/* ---------------------------------------------------------------- tutoriel */
.tu-cadre { display: flex; align-items: center; gap: 12px; background: #150d06; border: 1px solid #3a2414;
  border-left: 4px solid var(--ambre); border-radius: 8px; padding: 10px 12px 10px 14px; margin: 0 0 12px; }
.tu-corps { flex: 1; min-width: 0; }
.tu-haut { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.tu-num { font: 700 11px var(--mono); color: var(--ambre); letter-spacing: .05em; }
.tu-titre { font-size: 15px; }
.tu-texte { color: #d4d4d4; margin-top: 2px; }
.tu-btns { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 150px; }
.tu-tour { text-align: center; padding: 4px 0; }
@media (max-width: 700px) {
  .tu-cadre { flex-direction: column; align-items: stretch; }
  .tu-btns { flex-direction: row; flex-wrap: wrap; }
}
.sc-tab th { white-space: nowrap; }
.sc-tab td:nth-child(2) b, .sc-tab td:nth-child(6), .sc-tab td:nth-child(5) { white-space: nowrap; }

/* ---------------------------------------------------------------- classement en ligne */
.el-fin { margin-top: 14px; padding: 12px 14px; background: var(--panneau2); border: 1px solid var(--bord); border-radius: 6px; }
.el-fin p { margin: 4px 0; }
.el-ligne { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.el-ligne input { flex: 1 1 180px; min-width: 0; }
.el-filtres { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.el-tab { max-height: 60vh; overflow: auto; }
.el-tab tr.el-moi td { background: #24160c; }
.el-attente { padding: 24px 0; }
.accueil-d { display: flex; gap: 8px; }
/* les onglets de l'en-tête de l'accueil : bleu foncé (orange pour le classement), opaques à 80 % */
.accueil-d .btn.sec { background: var(--onglet); border-color: var(--onglet-bord); }
.accueil-d .btn.pri { background: var(--onglet-on); border-color: transparent; }

/* ---------------------------------------------------------------- compte en ligne */
.cp-puce.on { color: var(--vert); }
.cp-fen .sc-titre { margin-bottom: 2px; }
.cp-onglets { margin: 12px 0 4px; }
.cp-champ { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.cp-champ span { font-size: 12px; font-weight: 700; color: var(--mut, #8c8c8c); }
.cp-champ input { width: 100%; font: 14px var(--police); background: var(--panneau2); color: var(--txt);
  border: 1px solid var(--bord); border-radius: var(--r); padding: 8px 10px; }
.cp-champ input:focus { outline: none; border-color: var(--acc); }
.cp-st { min-height: 20px; margin: 12px 0 0; font-weight: 700; }
.cp-st.mut { color: #8c8c8c; }
.cp-sync { color: #d4d4d4; margin: 10px 0 0; }
.cp-auto { margin-top: 12px; }
.cp-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.cp-esp { flex: 1; }
.cp-note { color: #6a6a6a; margin-top: 12px; }
.el-fen .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.el-tab tr.el-moi td:nth-child(2) b { color: var(--acc); }
.el-fen .el-tab + p { margin-top: 8px; }
@media (max-width: 700px) {
  .accueil-tete { grid-template-columns: 1fr; }
  .accueil-d { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------- la cote : badges des paliers */
.cb { position: relative; display: inline-block; flex: none; vertical-align: middle; line-height: 0; }
.cb svg, .cb img { position: absolute; inset: 0; width: 100%; height: 100%; }
.cb svg text { font-family: var(--police); }
.cb img { object-fit: contain; }
.cb.cb-ok svg { display: none; }
.cp-tete { display: flex; align-items: center; gap: 20px; margin: 2px 0 6px; }
.cp-infos { flex: 1; min-width: 0; }
.cp-pseudo { margin: 0; font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.cp-palier { font-size: 20px; font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.cp-cote { font-weight: 700; font-size: 14px; margin-top: 4px; }
.cp-prog { height: 8px; max-width: 260px; background: #26262c; border-radius: 4px; overflow: hidden; margin: 8px 0 3px; }
.cp-prog b { display: block; height: 100%; border-radius: 4px; }
.cp-top { margin-top: 6px; }
.cp-mail { margin-top: 12px; }
.el-vues { margin: 10px 0 2px; }
.el-cote { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.el-cote-t { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.el-cote-t b:first-child { font-size: 17px; }
.el-cote-p { flex: 1 1 260px; min-width: 0; }
.el-tab-cote td { vertical-align: middle; }
.el-tab-cote td.el-cb { width: 52px; padding-top: 3px; padding-bottom: 3px; }
.el-tab-cote .el-ps { font-size: 15px; }
.el-tab-cote .el-cv { font-size: 16px; }
.el-tab-cote tr.el-moi td:nth-child(3) b { color: var(--acc); }
@media (max-width: 700px) {
  .cp-tete { gap: 14px; }
  .cp-tete .cb { width: 104px !important; height: 104px !important; }
  .el-tab-cote th:nth-child(4), .el-tab-cote td:nth-child(4),
  .el-tab-cote th:nth-child(6), .el-tab-cote td:nth-child(6) { display: none; }
}
.el-reessai { margin-bottom: 12px; }