/*
 * Navigation cours — composant transverse unique.
 * Utilisé sans variante par Pointage, Réservation et Historique.
 * Aucune règle de navigation ne doit être redéfinie dans les CSS de mode.
 */
.nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center;
  gap:12px;
  margin:14px 0 18px;
}
.nav #prevCourse{justify-self:start;}
.nav #todayCourse{justify-self:center;}
.nav #nextCourse{justify-self:end;}
.nav .course-nav-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:0;
  height:40px;
  min-height:40px;
  padding:0 14px;
  border:1px solid #D2B48C;
  border-radius:8px;
  background:#FFFFFF;
  color:#5A3E2B;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  font-weight:500;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,transform .06s ease;
}
.nav .course-nav-btn:hover:not(.course-nav-disabled){
  background:#FAF7F2;
  border-color:#C69F72;
  color:#5A3E2B;
}
.nav .course-nav-btn:active:not(.course-nav-disabled){
  background:#6E4A2F;
  border-color:#6E4A2F;
  color:#FFFFFF;
  transform:translateY(1px);
}
.nav .course-nav-icon{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.nav .course-nav-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav .course-nav-disabled{
  opacity:1;
  pointer-events:none;
  background:#FFFFFF;
  border-color:#D7D7D7;
  color:#C4C4C4;
}
.nav .course-nav-btn:focus-visible{
  outline:2px solid rgba(90,62,43,.22);
  outline-offset:2px;
}
@media(max-width:700px){
  .nav{gap:8px;}
  .nav .course-nav-btn{
    height:40px;
    min-height:40px;
    font-size:12px;
    padding:0 8px;
    gap:5px;
  }
  .nav .course-nav-icon,
  .nav .course-nav-icon svg{
    width:18px;
    height:18px;
  }
  .nav .course-nav-icon{flex-basis:18px;}
}
@media(max-width:390px){
  .nav .course-nav-btn{
    font-size:11px;
    padding:0 6px;
  }
}