.voile.prg-grades-voile { z-index: 120; place-items: start center; padding: var(--e-6) var(--e-4); overflow-y: auto; }
.fenetre.prg-grades-fen { max-width: 1040px; max-height: calc(100vh - var(--e-6) * 2); }
.prg-grades-fen .fenetre-titre { font-size: var(--fs-section); }
.prg-grades-rang { color: var(--texte-2); }
.prg-grades-fen .fenetre-corps { display: flex; flex-direction: column; gap: var(--e-5); padding-bottom: var(--e-6); }

body:has(.prg-grades-voile) .sogr-hote { display: none; }

.prg-grades-xp { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--e-8); padding: var(--e-4) var(--e-5); background: var(--creme); border-radius: var(--r-md); }
.prg-grades-vers { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.prg-grades-bornes { display: flex; justify-content: space-between; gap: var(--e-4); font-family: var(--font-donnee); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.prg-grades-bornes { flex-wrap: wrap; row-gap: var(--e-1); }
.prg-grades-bornes > span { white-space: nowrap; }
.prg-grades-bornes .suiv { margin-left: auto; color: var(--texte); text-align: right; }

.prg-grades-fen .prg-grades-liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-4); margin: 0; padding: 0; list-style: none; }

.prg-grades-fen .prg-grade-ligne { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-8) var(--e-4) var(--e-4); border-radius: var(--r-lg); text-align: center; }
.prg-grades-fen .prg-grade-ligne.choisie { padding: calc(var(--e-8) - 1px) calc(var(--e-4) - 1px) calc(var(--e-4) - 1px); background: var(--or-pale); border-color: var(--or); }
.prg-grades-fen .prg-grade-ligne.avenir { background: var(--creme); border-color: var(--creme); }
.prg-grades-fen .prg-grade-ligne .no { position: absolute; top: var(--e-3); left: var(--e-3); display: block; min-width: 0; height: auto; padding: 0; background: none; border-radius: 0; font-family: var(--font-donnee); font-size: var(--fs-meta); line-height: var(--lh-serre); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.prg-grades-fen .prg-grade-ligne.choisie .no { top: calc(var(--e-3) - 1px); left: calc(var(--e-3) - 1px); background: none; color: var(--texte-2); }
.prg-grades-fen .prg-grade-ligne .gl { width: 100%; max-width: 112px; height: auto; }  
.prg-grades-fen .prg-grade-ligne .gl svg { width: 100%; height: auto; border-radius: 0; }

.prg-grades-fen .prg-grade-ligne.passe .gl { opacity: 1; }
.prg-grades-fen .prg-grade-ligne .tx { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--e-2); margin-top: var(--e-1); }
.prg-grades-fen .prg-grade-ligne .tx b { font-family: var(--font-titre); font-weight: 400; font-size: var(--fs-ui); line-height: var(--lh-bloc); color: var(--texte); }
.prg-grades-fen .prg-grade-ligne.passe .tx b { color: var(--texte); }
.prg-grades-fen .prg-grade-ligne.avenir .tx b { color: var(--texte-2); }
.prg-grades-fen .prg-grade-ligne .tx .d { margin: 0; font-family: var(--font-donnee); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.prg-grades-fen .prg-grade-ligne.choisie .tx .d { color: var(--texte-2); }
.prg-grades-fen .prg-grade-ligne .etiquette { margin-top: calc(var(--e-1) * -1); background: var(--or); color: var(--marine); }

@media (max-width: 899.98px) {
  .prg-grades-fen .prg-grades-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 719.98px) {
  .prg-grades-fen .prg-grades-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639.98px) {
  .voile.prg-grades-voile { place-items: end stretch; padding: 0; overflow: hidden; }
  .fenetre.prg-grades-fen { max-width: none; max-height: calc(100dvh - var(--e-8)); border-radius: var(--r-lg) var(--r-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .prg-grades-fen .fenetre-tete { padding: var(--e-4) var(--e-3) var(--e-2) var(--e-4); }
  .prg-grades-fen .fenetre-titre { font-size: var(--fs-bloc); line-height: var(--lh-bloc); }
  .prg-grades-fen .fenetre-corps { gap: var(--e-4); padding: 0 var(--e-4) var(--e-5); }
  .prg-grades-xp { grid-template-columns: minmax(0, 1fr); gap: var(--e-3); padding: var(--e-3) var(--e-4); }
  .prg-grades-fen .prg-grades-liste { gap: var(--e-2); }
  .prg-grades-fen .prg-grade-ligne { gap: var(--e-1-5); padding: var(--e-6) var(--e-2) var(--e-3); border-radius: var(--r-sm); }
  .prg-grades-fen .prg-grade-ligne.choisie { padding: calc(var(--e-6) - 1px) calc(var(--e-2) - 1px) calc(var(--e-3) - 1px); }
  .prg-grades-fen .prg-grade-ligne .no { top: var(--e-2); left: var(--e-2); }
  .prg-grades-fen .prg-grade-ligne.choisie .no { top: calc(var(--e-2) - 1px); left: calc(var(--e-2) - 1px); }
  .prg-grades-fen .prg-grade-ligne .tx { gap: var(--e-1); margin-top: 0; }
  .prg-grades-fen .prg-grade-ligne .tx b { font-size: var(--fs-dense); line-height: var(--lh-dense); overflow-wrap: anywhere; hyphens: auto; }
  .prg-grades-fen .prg-grade-ligne .etiquette { margin-top: 0; padding: 0 var(--e-1-5); }
}