/* ==========================================================================
   VALKYR2 -- v2 : neige partout, fiche, classes detaillees, catalogue, records
   ========================================================================== */
#neige { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 40; pointer-events: none; }

/* serveur : fiche + atouts */
.serveur-grille { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
.fiche { padding: 30px 26px; text-align: center; position: sticky; top: 96px; }
.fiche img { width: 110px; margin: 0 auto 10px; filter: drop-shadow(0 0 16px rgba(159, 211, 255, .3)); }
.fiche dl { text-align: left; margin: 18px 0 22px; }
.fiche dt { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--glace); margin-top: 12px; }
.fiche dd { color: var(--encre); font-weight: 700; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.atouts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.atout { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; background: rgba(18, 24, 34, .55); border: 1px solid var(--trait); border-left: 3px solid var(--or); transition: background .25s, transform .25s; }
.atout:hover { background: rgba(36, 30, 22, .7); transform: translateX(4px); }
.atout img { width: 40px; height: 40px; flex: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .8)); }
.atout h4, .systeme h4, .voie h4, .zodiaque-points h4, .etapes-defi h4, .records h4 { font-family: var(--titre); color: var(--or-clair); font-size: 16px; letter-spacing: .5px; }
.atout p { color: var(--doux); font-size: 14.5px; margin-top: 4px; }

/* classes */
.classes-onglets { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.classes-onglets button { display: flex; align-items: center; gap: 10px; padding: 8px 22px 8px 8px; background: rgba(0, 0, 0, .35); border: 1px solid var(--trait);
  color: var(--doux); font-family: var(--titre); font-size: 16px; letter-spacing: 1px; transition: .25s; }
.classes-onglets button img { width: 46px; filter: grayscale(.7); transition: .25s; }
.classes-onglets button.actif, .classes-onglets button:hover { color: var(--or-clair); border-color: var(--or); background: linear-gradient(180deg, rgba(227, 193, 120, .16), rgba(0, 0, 0, .4)); }
.classes-onglets button.actif img, .classes-onglets button:hover img { filter: none; }
.classe-detail { padding: 34px 38px; min-height: 420px; }
.classe-tete { display: flex; gap: 26px; align-items: center; padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid var(--trait); }
.classe-tete .classe-portraits { margin: 0; flex: none; }
.classe-tete p { color: var(--doux); font-size: 17px; }
h3.grand { font-size: 32px; }
.voies-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.voie { padding: 22px 24px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .06); border-top: 2px solid var(--glace-fonce); }
.voie-nom { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--glace); }
.voie h4 { font-size: 20px; margin: 4px 0 6px; }
.voie .liste-or { margin: 14px 0 0; }
.voie .liste-or li { font-size: 15px; }
.pour-tous { padding: 26px 34px; margin-top: 24px; }
.pour-tous .liste-or { margin: 14px 0 0; columns: 2; column-gap: 40px; }
.pour-tous .liste-or li { break-inside: avoid; }

/* defi */
.defi { display: block; }
.defi-haut { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; }
.defi-piste { grid-template-columns: repeat(9, 1fr); }
.palier b, .palier span { position: relative; }
.etapes-defi { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--trait); }
.etapes-defi li { position: relative; padding-left: 48px; }
.etapes-defi li > b { position: absolute; left: 2px; top: 2px; width: 30px; height: 30px; line-height: 30px; text-align: center; font-family: var(--titre); color: #1a1208; z-index: 0; }
.etapes-defi li > b:before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #f6dd9c, #b88634); transform: rotate(45deg); }
.etapes-defi p { color: var(--doux); font-size: 14px; margin-top: 4px; }

/* donjons v2 */
.donjon-corps { align-items: flex-start; }
.donjon-infos { flex: 1; }
.donjon-infos p { color: var(--doux); font-size: 14.5px; margin-bottom: 10px; }
.btn-records { padding: 8px 14px; font-size: 12px; flex: none; align-self: center; }
.btn-records img { width: 22px; height: 22px; }

/* zodiaque v2 */
.zodiaque-points { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; margin: 22px 0 24px; }
.zodiaque-points div { padding-left: 14px; border-left: 2px solid var(--or-fonce); }
.zodiaque-points p { color: var(--doux); font-size: 14px; margin-top: 2px; }

/* passe v2 */
.passe-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--trait); }
.passe-bas h3 { margin-bottom: 8px; }
.petit { color: var(--doux); font-size: 14px; margin-bottom: 10px; }
.table-mini td, .table-mini th { padding: 8px 12px; }

/* catalogue */
#ongletsCategories button { width: 150px; }
#ongletsCategories small { display: block; font-family: var(--texte); font-size: 11px; color: var(--muet); letter-spacing: 0; margin-top: 2px; }
.catalogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.systeme { display: flex; gap: 16px; padding: 20px 22px; align-items: flex-start; }
.systeme .ico-jeu { margin: 0; flex: none; width: 56px; height: 56px; }
.systeme .ico-jeu img { width: 42px; height: 42px; }
.systeme h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.systeme p { color: var(--doux); font-size: 14.5px; margin-top: 6px; }
.systeme .touche { font-size: 11px; padding: 1px 6px; }
.raccourcis { margin-top: 40px; padding: 28px 34px; }
.raccourcis-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 30px; margin-top: 16px; }
.raccourcis-liste div { display: flex; align-items: center; gap: 12px; color: var(--doux); font-size: 14.5px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.raccourcis-liste .touche { margin: 0; min-width: 120px; flex: none; }

/* records */
.classement { max-width: 1240px; }
.bandeau-exemple { text-align: center; padding: 8px 14px; margin-bottom: 14px; font-size: 13px; color: #ffd28a; border: 1px dashed rgba(240, 180, 60, .5); background: rgba(240, 180, 60, .08); }
.records { display: grid; grid-template-columns: 280px 1fr; min-height: 560px; }
.records-donjons { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-right: 1px solid var(--trait); background: rgba(0, 0, 0, .25); }
.records-donjons button { position: relative; height: 48px; border: 1px solid rgba(255, 255, 255, .08); background-size: cover; background-position: right center;
  text-align: left; padding: 0 12px; color: var(--encre); font-family: var(--titre); font-size: 13px; overflow: hidden; transition: .2s; filter: saturate(.6) brightness(.75); }
.records-donjons button:before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 8, 6, .95) 30%, rgba(10, 8, 6, .2)); }
.records-donjons button span { position: relative; }
.records-donjons button:hover, .records-donjons button.actif { filter: none; border-color: var(--or); }
.records-donjons button.actif { box-shadow: 0 0 0 1px var(--or) inset, 0 0 20px rgba(227, 193, 120, .2); }
.records-corps { padding: 22px 26px; }
.records-ban { aspect-ratio: 475 / 81; background-size: cover; border: 1px solid var(--trait); }
.paliers-onglets { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; margin: 16px 0; }
.paliers-onglets button { padding: 8px 0; background: rgba(0, 0, 0, .35); border: 1px solid var(--trait); color: var(--doux); font-family: var(--titre); font-weight: 700; }
.paliers-onglets button.actif { color: #1a1208; background: linear-gradient(180deg, #f6dd9c, #c99a46); border-color: #f3dca2; }
.records-titre { margin-bottom: 8px; }
.table td.temps { color: var(--glace); font-variant-numeric: tabular-nums; font-weight: 700; }
.vide-petit { color: var(--doux); padding: 26px 0; text-align: center; }
.records-cote { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 26px; }
.records-cote ol { list-style: none; counter-reset: r; margin-top: 8px; }
.records-cote li { counter-increment: r; display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); color: var(--encre); font-size: 14px; }
.records-cote li span:before { content: counter(r); display: inline-block; width: 22px; color: var(--muet); font-family: var(--titre); }
.records-cote li img { width: 24px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.records-cote li b { color: var(--or-clair); font-variant-numeric: tabular-nums; }

@media (max-width: 1020px) {
  .serveur-grille, .voies-detail, .defi-haut, .passe-bas, .records-cote { grid-template-columns: 1fr; }
  .fiche { position: static; }
  .catalogue, .raccourcis-liste { grid-template-columns: repeat(2, 1fr); }
  .etapes-defi { grid-template-columns: repeat(2, 1fr); }
  .records { grid-template-columns: 1fr; }
  .records-donjons { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--trait); }
  .records-donjons button { min-width: 190px; }
  .pour-tous .liste-or { columns: 1; }
}
@media (max-width: 640px) {
  .atouts, .catalogue, .raccourcis-liste, .etapes-defi, .zodiaque-points { grid-template-columns: 1fr; }
  .classe-detail { padding: 22px 18px; } .classe-tete { flex-direction: column; text-align: center; }
  .donjon-corps { flex-wrap: wrap; } .btn-records { width: 100%; justify-content: center; }
  .records-corps { padding: 16px 12px; } .paliers-onglets { grid-template-columns: repeat(5, 1fr); }
}

/* touches du clavier, images du jeu (x2) */
.touches { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; vertical-align: middle; flex: none; }
.touches img { height: 27px; width: auto; image-rendering: pixelated; }
.touches i { font-style: normal; color: var(--or); font-weight: 700; margin: 0 2px; }
.systeme .touches img { height: 22px; }
.raccourcis-liste .touches { margin: 0; min-width: 150px; }

/* logo texte en haut a gauche (21/10) */
.nav-marque .nav-embleme { width: 40px; }
.nav-marque .nav-titre { width: auto; height: 40px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .8)) drop-shadow(0 0 10px rgba(159, 211, 255, .25)); }
@media (max-width: 640px) { .nav-marque .nav-titre { height: 26px; } }

/* inscription & vote (21/10) */
.inscription { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }
.formulaire { padding: 30px 32px; display: grid; gap: 14px; }
.formulaire label { display: grid; gap: 6px; font-family: var(--titre); font-size: 13px; letter-spacing: 1px; color: var(--or); }
.formulaire input:not([type=checkbox]), #formVote input { font: inherit; font-family: var(--texte); font-size: 15px; letter-spacing: 0; color: var(--encre); padding: 11px 14px;
  background: rgba(0, 0, 0, .45); border: 1px solid var(--trait); outline: none; transition: border-color .2s, box-shadow .2s; }
.formulaire input:focus, #formVote input:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(227, 193, 120, .15); }
.formulaire .deux { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulaire .case { display: flex; align-items: center; gap: 10px; font-family: var(--texte); font-size: 14px; color: var(--doux); letter-spacing: 0; }
.formulaire .case input { width: 18px; height: 18px; accent-color: #c99a46; }
.formulaire .btn { justify-content: center; margin-top: 6px; }
.retour { min-height: 22px; font-size: 14px; }
.retour.ok { color: #8fd07a; } .retour.erreur { color: #ff8a7a; }
.conseils-compte { padding: 28px 30px; }
.conseils-compte .liste-or { margin: 14px 0 22px; }
.vote { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.vote-carte { padding: 32px; text-align: center; }
.vote-logo { width: 72px; margin: 0 auto 12px; filter: drop-shadow(0 0 16px rgba(227, 193, 120, .4)); }
#formVote { display: grid; gap: 12px; margin: 18px 0 10px; text-align: left; }
#formVote label { display: grid; gap: 6px; font-family: var(--titre); font-size: 13px; color: var(--or); }
#formVote .btn { justify-content: center; }
.vote-podium { padding: 28px 30px; }
.podium { list-style: none; margin-top: 14px; }
.podium li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.podium li span { font-family: var(--titre); font-weight: 900; color: var(--muet); text-align: center; }
.podium li b { color: var(--encre); }
.podium li i { font-style: normal; color: var(--or-clair); font-variant-numeric: tabular-nums; }
.podium li.rang1 { background: linear-gradient(90deg, rgba(243, 207, 106, .18), transparent); } .podium li.rang1 span { color: #f3cf6a; font-size: 20px; }
.podium li.rang2 { background: linear-gradient(90deg, rgba(207, 214, 224, .12), transparent); } .podium li.rang2 span { color: #cfd6e0; font-size: 18px; }
.podium li.rang3 { background: linear-gradient(90deg, rgba(208, 143, 90, .12), transparent); } .podium li.rang3 span { color: #d08f5a; font-size: 17px; }
@media (max-width: 1020px) { .inscription, .vote { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .formulaire .deux { grid-template-columns: 1fr; } .formulaire, .vote-carte { padding: 22px 18px; } }

/* compte connecte (21/10) */
.form-vote { display: grid; gap: 12px; margin: 18px 0 10px; text-align: left; }
.form-vote label { display: grid; gap: 6px; font-family: var(--titre); font-size: 13px; color: var(--or); }
.form-vote input { font: inherit; font-family: var(--texte); font-size: 15px; color: var(--encre); padding: 11px 14px; background: rgba(0, 0, 0, .45);
  border: 1px solid var(--trait); outline: none; }
.form-vote input:focus { border-color: var(--or); box-shadow: 0 0 0 3px rgba(227, 193, 120, .15); }
.form-vote .btn { justify-content: center; }
.form-vote a, .petit a { color: var(--glace); }
.connecte { text-align: center; color: var(--doux); }
.nav-actions .nav-compte.connecte { color: #8fd07a; border-color: rgba(143, 208, 122, .5); }
.nav-actions .nav-compte.connecte:before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8fd07a; box-shadow: 0 0 8px #8fd07a; }

.form-vote[hidden], #formConnexion[hidden] { display: none; }
.nav-marque { flex: none; }
.nav-liens a { white-space: nowrap; }

/* voteurs de la semaine (21/10) */
.vote-reset { margin: 8px 0 14px; padding: 8px 12px; background: rgba(0, 0, 0, .35); border: 1px solid var(--trait); color: var(--doux); font-size: 14px; text-align: center; }
.vote-reset b { color: var(--or-clair); font-family: var(--titre); font-variant-numeric: tabular-nums; }
.vote-reset span { color: var(--muet); font-size: 12px; }
.vote-lots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vote-lots div { text-align: center; padding: 10px 6px; border: 1px solid var(--trait); background: radial-gradient(circle at 50% 30%, rgba(227, 193, 120, .16), rgba(0, 0, 0, .4) 70%); }
.vote-lots img { width: 40px; height: 40px; margin: 0 auto 4px; filter: drop-shadow(0 0 10px rgba(227, 193, 120, .4)); }
.vote-lots b { display: block; font-family: var(--titre); color: var(--or-clair); font-size: 18px; }
.vote-lots span { font-size: 12.5px; color: var(--doux); }
.lots-note { margin: 10px 0 4px; text-align: center; }
.gagnants-titre { margin-top: 16px; font-size: 14px; }

/* evenements & mini-jeux (21/10) */
.bloc-evenements { background: linear-gradient(180deg, rgba(40, 18, 60, .35), rgba(7, 9, 13, 0) 70%); }
.minijeux { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; }
.minijeu { display: flex; gap: 18px; padding: 20px 22px; align-items: flex-start; transition: transform .25s, box-shadow .25s; }
.minijeu img { width: 56px; height: 56px; flex: none; filter: drop-shadow(0 0 10px rgba(227, 193, 120, .25)); }
.minijeu h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.minijeu p { margin: 0; color: var(--doux); }
/* 27/10 : emblemes de courage */
.emblemes { max-width: 1240px; margin: 18px auto 0; padding: 22px 24px; }
.emblemes-tete { display: flex; gap: 18px; align-items: flex-start; }
.emblemes-tete img { width: 64px; height: 64px; flex: none; filter: drop-shadow(0 0 12px rgba(227,193,120,.35)); }
.emblemes-tete h3 { margin: 0 0 6px; }
.emblemes-tete p { margin: 0; color: var(--doux); }
.emblemes-grille { display: grid; grid-template-columns: 1fr 1.4fr; gap: 22px; margin-top: 18px; align-items: start; }
.emblemes-bareme { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.emblemes-bareme div { border: 1px solid var(--trait); padding: 12px; text-align: center; background: rgba(0,0,0,.25); }
.emblemes-bareme b { display: block; font-family: var(--titre, Cinzel, serif); color: var(--or); font-size: 20px; }
.emblemes-bareme span { color: var(--doux); font-size: 13px; }
@media (max-width: 800px) { .emblemes-grille { grid-template-columns: 1fr; } .emblemes-tete { flex-direction: column; } }
/* 27/10 : evenements de saison */
.saisons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1240px; margin: 18px auto 0; }
.saison img { width: 84px; height: 84px; }
.saison .saison-dates { margin-top: 8px; color: var(--or-clair); font-size: 13px; }
@media (max-width: 800px) { .saisons { grid-template-columns: 1fr; } }
.minijeu.en-cours { border-color: var(--or); box-shadow: 0 0 0 1px var(--or), 0 0 30px rgba(227, 193, 120, .18); }
.minijeu:hover { transform: translateY(-3px); }
.badge { font-family: var(--texte); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border: 1px solid var(--trait); color: var(--muet); }
.badge.actif { color: #0b0d12; background: var(--or); border-color: var(--or); font-weight: 700; }
.quotidiens { max-width: 1240px; margin: 22px auto 0; padding: 20px 22px; }
.quotidiens h3 { margin: 0 0 12px; }
.quotidiens-liste { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.quotidien { padding: 10px 8px; text-align: center; border: 1px solid var(--trait); background: rgba(0, 0, 0, .3); }
.quotidien b { display: block; font-family: var(--titre); color: var(--or); font-size: 13px; margin-bottom: 4px; }
.quotidien span { font-size: 12.5px; color: var(--doux); }
.quotidien.aujourdhui { border-color: var(--or); background: rgba(227, 193, 120, .12); }

/* reglement & mentions (21/10) */
.reglement { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; max-width: 1240px; margin: 0 auto; }
.reglement > div { padding: 24px 26px; }
.regles { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 10px; color: var(--doux); }
.regles b, .mentions b { color: var(--encre); }
.mentions p { color: var(--doux); margin: 0 0 10px; font-size: 14.5px; }
.case a { color: var(--glace); }

/* pastille : joueurs en ligne (21/10) */
.etat.vivant .point { background: #4cd07d; box-shadow: 0 0 10px #4cd07d; }

@media (max-width: 1020px) { .minijeux, .reglement { grid-template-columns: 1fr; } .quotidiens-liste { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .quotidiens-liste { grid-template-columns: repeat(2, 1fr); } .minijeu { padding: 16px; } }


/* prochain mini-jeu (26/10) */
.prochain-jeu { max-width: 1240px; margin: 16px auto 0; display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 10px 16px; border: 1px dashed var(--trait); color: var(--doux); background: rgba(0, 0, 0, .25); }
.prochain-jeu img { width: 32px; height: 32px; }
.prochain-jeu b { color: var(--or-clair); }

/* guide du debutant (26/10) */
.guide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; }
.palier { display: flex; gap: 18px; padding: 20px 22px; align-items: flex-start; }
.palier-niv { flex: none; width: 78px; text-align: center; }
.palier-niv b { display: block; width: 52px; height: 52px; margin: 0 auto 6px; border-radius: 50%; line-height: 52px; font-family: var(--titre);
  font-size: 24px; color: #0b0d12; background: radial-gradient(circle at 35% 30%, var(--or-clair), var(--or-fonce)); }
.palier-niv span { font-size: 12px; color: var(--doux); }
.palier h3 { margin: 0 0 6px; }
.guide-dj { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.guide-dj span { width: 210px; height: 36px; font-size: 12px; padding: 0; border: 1px solid var(--trait); background-size: cover; background-position: center;
  color: #fff; text-shadow: 0 1px 3px #000; min-width: 140px; }
.guide-dj i { color: var(--or-clair); font-style: normal; }
.astuces { max-width: 1240px; margin: 20px auto 0; padding: 20px 24px; }

/* communaute / Discord (26/10) */
.bloc-communaute { background: linear-gradient(180deg, rgba(88, 101, 242, .12), rgba(7, 9, 13, 0) 70%); }
.communaute { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; max-width: 1240px; margin: 0 auto; }
.communaute > div { padding: 24px 26px; }
.discord-tete { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.discord-tete svg { width: 54px; height: 54px; fill: #fff; background: #5865f2; border-radius: 14px; padding: 10px; flex: none; }
.discord-tete h3 { margin: 0; }
.discord-tete p { margin: 2px 0 0; color: var(--doux); }
.salons { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.salons li { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; background: rgba(0, 0, 0, .3); border-left: 3px solid #5865f2; }
.salons b { color: var(--encre); white-space: nowrap; }
.salons span { color: var(--doux); font-size: 14px; }
.discord-widget { margin-top: 16px; }
.reseaux { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

@media (max-width: 1020px) { .guide, .communaute { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .palier { flex-direction: column; } .palier-niv { width: auto; display: flex; align-items: center; gap: 10px; } .palier-niv b { margin: 0; } }

/* ------------------------------------------------------------ EVENT PVE (09/11) */
.bloc-pve { background: radial-gradient(ellipse at 70% 30%, rgba(180, 32, 42, .18), transparent 60%), radial-gradient(ellipse at 20% 80%, rgba(61, 127, 179, .12), transparent 55%); }
.pve { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; padding: 40px 44px; align-items: center; overflow: hidden; }
.pve:after { box-shadow: none; }
.pve-texte h2 { margin: 10px 0 14px; }
.pve-texte p { color: var(--doux); font-size: 16.5px; }
.pve-texte .liste-or { margin-top: 18px; }
.pve-compte { text-align: center; padding: 22px 18px; border: 1px solid rgba(227, 193, 120, .35); background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(40, 12, 14, .55)); }
.pve-etat { display: block; font-family: var(--titre); letter-spacing: 4px; text-transform: uppercase; font-size: 12px; color: var(--glace); margin-bottom: 12px; }
.pve-compte.en-cours { border-color: #e2504f; box-shadow: 0 0 30px rgba(226, 80, 79, .35) inset, 0 0 24px rgba(226, 80, 79, .25); }
.pve-compte.en-cours .pve-etat { color: #ff8a7a; animation: pouls 1.6s infinite; }
.pve-cases { display: flex; justify-content: center; gap: 12px; }
.pve-cases div { min-width: 64px; padding: 10px 6px; background: rgba(0, 0, 0, .4); border: 1px solid var(--trait); }
.pve-cases b { display: block; font-family: var(--titre); font-weight: 900; font-size: 32px; line-height: 1; color: var(--or-clair); text-shadow: 0 0 14px rgba(227, 193, 120, .35); }
.pve-cases span { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--doux); }
.pve-arenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0 14px; }
.pve-arenes div { padding: 12px 14px; border: 1px solid var(--trait); border-left: 3px solid #b4202a; background: rgba(18, 24, 34, .55); transition: transform .25s, background .25s; }
.pve-arenes div:hover { transform: translateY(-3px); background: rgba(60, 20, 22, .55); }
.pve-arenes b { display: block; font-family: var(--titre); color: var(--or-clair); font-size: 18px; }
.pve-arenes span { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--glace); }
.pve-cote .icones-ligne { justify-content: center; }
@media (max-width: 900px) {
  .pve { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; }
  .pve-cases div { min-width: 56px; }
  .pve-cases b { font-size: 26px; }
}
.pve > * { min-width: 0; }
.bloc-pve { overflow-x: hidden; }
@media (max-width: 900px) { .pve .surtitre { letter-spacing: 3px; font-size: 11px; } .pve .surtitre:before, .pve .surtitre:after { width: 20px; } .pve-cases { gap: 8px; } .pve-cases div { min-width: 0; flex: 1; } }

/* 09/11 : mobile -- le bloc Defi et la piste de passe elargissaient toute la page */
html, body { overflow-x: hidden; }
@media (max-width: 900px) {
  .defi-haut { grid-template-columns: 1fr; gap: 22px; }
  .defi-piste { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .defi-haut > *, .passe > *, .passe-bas > * { min-width: 0; }
  .passe-piste { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .etapes-defi { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .etapes-defi { grid-template-columns: 1fr; } }

/* ===================================================== 13/11 : dates, videos, visionneuse */
.hero-dates { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 18px auto 6px; }
.hero-dates div { display: flex; flex-direction: column; align-items: center; padding: 10px 22px; min-width: 220px;
  background: rgba(10, 16, 26, .62); border: 1px solid rgba(159, 211, 255, .28); border-radius: 10px; backdrop-filter: blur(4px); }
.hero-dates b { font-family: var(--titre); color: var(--or-clair); font-size: 20px; letter-spacing: 1px; }
.hero-dates span { color: var(--doux); font-size: 13.5px; }

.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; max-width: 1240px; margin: 0 auto; }
.video-carte { padding: 12px 12px 16px; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.video-carte:hover { transform: translateY(-4px); border-color: rgba(159, 211, 255, .55); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(159, 211, 255, .15); }
.video-cadre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: #05080d; }
.video-fond { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); max-width: none; object-fit: cover; filter: blur(16px) brightness(.45); }
.video-cadre video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.video-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(7, 12, 20, .72); border: 2px solid var(--or); box-shadow: 0 0 18px rgba(227, 193, 120, .35); transition: opacity .25s, transform .25s; }
.video-play:after { content: ""; position: absolute; left: 22px; top: 16px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--or-clair); }
.video-carte.joue .video-play { opacity: 0; transform: scale(.8); }
.video-carte h4 { font-family: var(--titre); color: var(--or-clair); font-size: 16px; margin: 12px 4px 2px; }
.video-carte p { color: var(--doux); font-size: 14px; margin: 0 4px; line-height: 1.5; }

.voir-video { margin-top: 10px; background: none; border: 1px solid rgba(159, 211, 255, .45); color: var(--glace); font: inherit; font-size: 13px;
  padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.voir-video:hover { background: rgba(159, 211, 255, .12); color: #fff; }

.visionneuse { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: rgba(3, 6, 10, .88); backdrop-filter: blur(6px); }
.visionneuse[hidden] { display: none; }
.visionneuse figure { max-width: min(1100px, 100%); width: 100%; }
.visionneuse video { width: 100%; max-height: 78vh; background: #000; border: 1px solid var(--trait); border-radius: 10px; box-shadow: var(--ombre); }
.visionneuse figcaption { text-align: center; font-family: var(--titre); color: var(--or-clair); font-size: 20px; margin-top: 12px; }
.visionneuse-fermer { position: absolute; top: 14px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--trait);
  background: rgba(18, 24, 34, .9); color: var(--encre); font-size: 30px; line-height: 1; cursor: pointer; }
.visionneuse-fermer:hover { color: var(--or-clair); border-color: var(--or); }
body.sans-defilement { overflow: hidden; }

.vote-garde { margin: 16px 0 6px; padding: 14px 16px; border-radius: 10px; border: 1px solid rgba(159, 211, 255, .35);
  background: linear-gradient(160deg, rgba(20, 40, 64, .55), rgba(10, 18, 30, .6)); }
.vote-garde b:first-child { display: block; font-family: var(--titre); color: var(--glace); font-size: 15px; margin-bottom: 4px; }
.vote-garde p { color: var(--doux); font-size: 14px; line-height: 1.55; margin: 0; }
@media (max-width: 560px) { .hero-dates div { min-width: 0; width: 100%; } .videos { grid-template-columns: 1fr; } }
/* 13/11 : un lien de plus (Videos) -> la nav se resserre plus tot */
@media (max-width: 1500px) { .nav { gap: 18px; padding: 0 22px; } .nav-liens { gap: 15px; } .nav-liens a { font-size: 12px; letter-spacing: 1px; } }
@media (max-width: 1280px) { .nav-liens { gap: 11px; } .nav-liens a { font-size: 11.5px; letter-spacing: .5px; } .nav-actions .btn { padding-left: 14px; padding-right: 14px; } }

/* 13/11 : surnom de voteur */
.form-pseudo { margin: 10px 0 4px; text-align: left; }
.form-pseudo label { display: block; font-size: 14px; color: var(--doux); }
.pseudo-ligne { display: flex; gap: 8px; margin-top: 6px; }
.pseudo-ligne input { flex: 1; min-width: 0; }
.pseudo-ligne .btn { padding: 8px 14px; white-space: nowrap; }

.pseudo-fixe { margin: 8px 0 2px; color: var(--doux); font-size: 14px; } .pseudo-fixe b { color: var(--glace); }

/* 13/11 : connecte -> pas d'inscription */
body.connecte #inscription, body.connecte .si-deconnecte { display: none !important; }
body:not(.connecte) .si-connecte { display: none !important; }

.solde-dc { margin: 6px 0 2px; color: var(--doux); font-size: 14px; } .solde-dc b { color: var(--or-clair); font-family: var(--titre); font-size: 18px; }

/* 13/11 : chiffres en direct (hero) */
.chiffres-direct { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 16px auto 4px; }
.chiffres-direct div { min-width: 170px; padding: 10px 18px; text-align: center; border-radius: 10px;
  background: rgba(10, 16, 26, .62); border: 1px solid rgba(227, 193, 120, .3); backdrop-filter: blur(4px); }
.chiffres-direct b { display: block; font-family: var(--titre); font-size: 28px; color: var(--or-clair); line-height: 1.1; }
.chiffres-direct span { font-size: 13px; color: var(--doux); letter-spacing: .5px; }
.chiffres-direct .vivant b { color: #7ee2a0; }
.chiffres-direct .vivant span:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4cd07d; box-shadow: 0 0 8px #4cd07d; vertical-align: 1px; }
@media (max-width: 560px) { .chiffres-direct div { min-width: 0; flex: 1 1 30%; padding: 8px 6px; } .chiffres-direct b { font-size: 22px; } }

/* 13/11 (2) : six compteurs sur une ligne (deux lignes de 3 sur petit ecran) */
.chiffres-direct { max-width: 1060px; gap: 10px; }
.chiffres-direct div { min-width: 0; flex: 1 1 0; padding: 10px 8px; }
.chiffres-direct b { font-size: 26px; }
.chiffres-direct span { font-size: 12.5px; white-space: nowrap; }
@media (max-width: 900px) { .chiffres-direct div { flex: 1 1 30%; } }
.chiffres-direct { max-width: 1180px; } .chiffres-direct div { padding: 10px 14px; }

/* 13/11 (3) : compteurs sur DEUX lignes de trois -- en direct / communaute */
.chiffres-direct { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 760px; width: 100%; margin: 18px auto 6px; }
.chiffres-direct div { position: relative; flex: none; min-width: 0; padding: 14px 12px 12px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(170deg, rgba(20, 34, 54, .78), rgba(8, 13, 22, .82)); border: 1px solid rgba(227, 193, 120, .28);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35); backdrop-filter: blur(5px); }
.chiffres-direct div:before { content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(227, 193, 120, .85), transparent); }
.chiffres-direct div:nth-child(-n+3) { border-color: rgba(159, 211, 255, .32); }
.chiffres-direct div:nth-child(-n+3):before { background: linear-gradient(90deg, transparent, rgba(159, 211, 255, .9), transparent); }
.chiffres-direct b { font-size: 30px; line-height: 1.1; letter-spacing: 1px; }
.chiffres-direct span { display: block; margin-top: 4px; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; color: var(--doux); }
.chiffres-direct .vivant span:before { vertical-align: 0; }
@media (max-width: 560px) {
  .chiffres-direct { gap: 8px; }
  .chiffres-direct div { padding: 10px 4px 9px; }
  .chiffres-direct b { font-size: 22px; }
  .chiffres-direct span { font-size: 10px; letter-spacing: .3px; white-space: normal; }
}

/* 14/11 : recharge de DC (Dedipass) */
.recharge { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.recharge-carte { padding: 28px; }
.recharge-carte h3 { margin-top: 0; }
.recharge-paliers { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.recharge-paliers th { text-align: left; color: var(--doux); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 6px 8px; border-bottom: 1px solid rgba(159, 211, 255, .25); }
.recharge-paliers td { padding: 8px; border-bottom: 1px solid rgba(159, 211, 255, .12); }
.recharge-paliers td b { color: var(--or-clair); font-family: var(--titre); }
.recharge-paliers .bonus { font-size: 12px; color: var(--glace); margin-left: 6px; }
.form-code { margin-top: 18px; text-align: left; }
.recharge-histo { list-style: none; padding: 0; margin: 4px 0 0; font-size: 14px; color: var(--doux); }
.recharge-histo li { padding: 4px 0; border-bottom: 1px solid rgba(159, 211, 255, .1); }
.recharge-histo b { color: var(--or-clair); }
.lien-recharge { margin: 10px 0 0; }
#dedipassBoite { min-height: 40px; }
@media (max-width: 1020px) { .recharge { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .recharge-carte { padding: 22px 18px; } }
#recharge[hidden], #rechargeModule[hidden], .lien-recharge[hidden] { display: none; }

/* 14/11 : parrainage (bloc compact dans la carte de vote) */
.parrainage { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(227, 193, 120, .3); background: rgba(10, 18, 30, .45); text-align: left; }
.parrainage p { margin: 4px 0; font-size: 14px; color: var(--doux); }
.parrainage b { color: var(--or-clair); font-family: var(--titre); }
.parrain-lien { display: flex; gap: 8px; }
.parrain-lien input { flex: 1; min-width: 0; font-size: 13px; }
.parrainage[hidden] { display: none; }

/* 14/11 : lien de langue (FR / EN), discret, a gauche du bouton Connexion */
.nav-langue { font-family: var(--titre); font-size: 13px; letter-spacing: .08em; color: var(--doux); text-decoration: none; padding: 6px 8px; border: 1px solid rgba(159, 211, 255, .25); border-radius: 6px; }
.nav-langue:hover { color: var(--glace); border-color: var(--glace); }

/* classement : menus defilables au doigt (mobile) */
.records > *, .records-corps { min-width: 0; }
.records-donjons { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: thin; }
.records-donjons button { flex: none; }
.classement-onglets button { white-space: nowrap; }
@media (max-width: 1300px) {
  .classement-onglets { justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .classement-onglets::-webkit-scrollbar { display: none; }
  .classement-onglets button { flex: none; padding: 10px 18px; letter-spacing: 1px; white-space: nowrap; }
}