/* ==========================================================
   sidebar-theme.css
   Habillage de la barre latérale (#sidebar) de PROF_MathsCPGE.

   - N'ajoute ni ne renomme aucune classe existante : il s'appuie sur
     .sidebar, .sidebar.open, .nav-item, .nav-item.active, .nav-label.
   - Tous les sélecteurs commencent par "#appScreen .sidebar", donc ils
     l'emportent sur le CSS de index.html quel que soit l'ordre de chargement.
   - Pour revenir en arrière : retirer la ligne <link> de ce fichier.
   ========================================================== */

/* ---------- Fond : dégradé + halo + quadrillage Seyès discret ---------- */
#appScreen .sidebar {
  position: relative;
  background:
    radial-gradient(260px 220px at 100% 100%, rgba(143, 134, 255, .35), transparent 70%),
    radial-gradient(240px 200px at 0% 0%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(180deg, #2B2478 0%, #3C3489 48%, #4A3FA6 100%);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}
#appScreen .sidebar::-webkit-scrollbar { display: none; }

#appScreen .sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(190, 184, 255, .10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(190, 184, 255, .10) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}
/* Les enfants passent au-dessus du quadrillage */
#appScreen .sidebar > * { position: relative; }

/* ---------- Entrée active : repère ambre ---------- */
#appScreen .sidebar .nav-item.active { font-weight: 600; }
#appScreen .sidebar .nav-item.active::before {
  content: "";
  position: absolute;
  left: -12px;               /* barre réduite : 64px - 40px = 12px de marge */
  top: 9px;
  bottom: 9px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #FFC857;
}
#appScreen .sidebar.open .nav-item.active::before { left: -14px; }  /* barre ouverte : 220px - 192px = 28 / 2 */

#appScreen .sidebar .nav-item:focus-visible,
#appScreen .sidebar .sb-progress:focus-visible,
#appScreen .sidebar .user-mini:focus-visible {
  outline: 2px solid #FFC857;
  outline-offset: 2px;
}

/* ---------- Titres de groupes ("Apprendre", "Mon compte") ---------- */
#appScreen .sidebar .nav-group-label {
  width: 192px;
  margin: 10px 0 2px;
  padding-left: 12px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Barre réduite : le titre devient un fin séparateur */
#appScreen .sidebar:not(.open) .nav-group-label {
  width: 24px;
  height: 1px;
  margin: 8px 0;
  padding: 0;
  font-size: 0;
  background: rgba(255, 255, 255, .18);
}
#appScreen .sidebar:not(.open) .nav-group-label.first { display: none; }

/* ---------- Pastille « jours d'essai » sur Abonnement ---------- */
#appScreen .sidebar .nav-pill {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 99px;
  background: #FFC857;
  color: #2B2478;
}
#appScreen .sidebar .nav-pill[hidden] { display: none; }
#appScreen .sidebar:not(.open) .nav-pill {
  position: absolute;
  top: 3px;
  right: 0;
  margin: 0;
  padding: 2px 5px;
  font-size: 10px;
}

/* ---------- Carte de progression (bas de la barre) ---------- */
#appScreen .sidebar .sb-progress {
  display: block;
  width: 192px;
  margin: 0 0 8px;
  padding: 12px;
  text-align: left;
  color: #fff;
  font-family: inherit;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .10);
  flex-shrink: 0;
  transition: background .15s;
}
#appScreen .sidebar .sb-progress:hover { background: rgba(255, 255, 255, .16); }

#appScreen .sidebar .sb-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
#appScreen .sidebar .sb-level { font-family: 'DM Serif Display', Georgia, serif; font-size: 17px; }
#appScreen .sidebar .sb-streak { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
#appScreen .sidebar .sb-track {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
  overflow: hidden;
}
#appScreen .sidebar .sb-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: #FFC857;
  transition: width .4s;
}
#appScreen .sidebar .sb-note { display: block; margin-top: 7px; font-size: 12px; color: rgba(255, 255, 255, .7); }
#appScreen .sidebar .sb-ring { display: none; }

/* Barre réduite : la carte devient un anneau avec le niveau */
#appScreen .sidebar:not(.open) .sb-progress {
  width: 44px;
  height: 44px;
  padding: 0;
  border-color: transparent;
  background: transparent;
}
#appScreen .sidebar:not(.open) .sb-top,
#appScreen .sidebar:not(.open) .sb-track,
#appScreen .sidebar:not(.open) .sb-note { display: none; }
#appScreen .sidebar:not(.open) .sb-ring { display: block; width: 44px; height: 44px; }

/* Écrans peu hauts : on masque la carte pour ne rien faire déborder */
@media (max-height: 680px) {
  #appScreen .sidebar .sb-progress { display: none; }
}

/* ---------- Infobulles quand la barre est réduite ---------- */
#appScreen .sidebar:not(.open) .nav-item[data-label]::after,
#appScreen .sidebar:not(.open) .sb-progress[data-label]::after {
  content: attr(data-label);
  position: fixed;
  left: 72px;
  top: var(--tt-top, 0);
  transform: translateY(-50%);
  z-index: 50;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1D1A3F;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
}
#appScreen .sidebar:not(.open) .nav-item[data-label]:hover::after,
#appScreen .sidebar:not(.open) .nav-item[data-label]:focus-visible::after,
#appScreen .sidebar:not(.open) .sb-progress[data-label]:hover::after,
#appScreen .sidebar:not(.open) .sb-progress[data-label]:focus-visible::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  #appScreen .sidebar .sb-fill,
  #appScreen .sidebar .sb-progress,
  #appScreen .sidebar .nav-item::after { transition: none; }
}