/* Menu latéral : module > séquence > séance > cours.
   Trois modes (voir applySidebarMode dans app/ui/dom.js) :
   - accueil, grand écran : colonne fixe de la mise en page, toujours visible ;
   - lecture, grand écran (#app.reading) : panneau FLOTTANT au-dessus du
     contenu, replié hors de l'écran ; le bord gauche ou ☰ le rappellent ;
   - mobile (responsive.css) : tiroir plein écran avec voile. */

#sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--panel-2);
  border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden;
  transition: margin-left .3s var(--ease);
}
/* Grand écran, accueil : ☰ replie la colonne en marge négative. (Sur mobile,
   responsive.css transforme le menu en tiroir et reprend la main.)
   « not all and (max-width) » plutôt que « min-width: 901px » : c'est le
   complément EXACT du point de bascule, sans trou entre 900 et 901 px. */
@media not all and (max-width: 900px) {
  #app:not(.reading) #sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }
}

/* Lecture, grand écran : panneau flottant détaché, sous la barre du haut. */
#sidebar-hotzone { display: none; }
@media not all and (max-width: 900px) {
  #app.reading #sidebar {
    position: fixed; z-index: 720; left: 12px; top: 72px; bottom: 12px;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    transform: translateX(calc(-100% - 28px));
    transition: transform .28s var(--ease);
  }
  #app.reading #sidebar:not(.collapsed) { transform: none; }
  #app.reading #sidebar-hotzone {
    display: block; position: fixed; left: 0; top: 60px; bottom: 0; width: 14px; z-index: 710;
  }
}

.sidebar-header { padding: 18px 16px 12px; }
.sidebar-title {
  display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16.5px; color: var(--text);
  background: none; border: none; cursor: pointer; padding: 7px 8px; margin: -7px -8px; border-radius: var(--r-xs);
  text-align: left; width: calc(100% + 16px); transition: background .15s; font-family: inherit;
}
.sidebar-title:hover { background: var(--panel); }
.sidebar-title .logo {
  font-size: 18px; width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--card); box-shadow: inset 0 0 0 1px var(--border);
}
.sidebar-sub { font-size: 12px; color: var(--text-faint); margin-top: 7px; padding-left: 2px; }

.module-select-wrap { padding: 12px 12px 4px; }
.module-select-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-faint); margin-bottom: 6px; padding-left: 4px; font-weight: 700; }
#module-select {
  width: 100%; padding: 10px 12px; border-radius: var(--r-xs); background: var(--card); color: var(--text);
  border: 1px solid var(--border); font-size: 14px; cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239c988e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

#nav-tree { flex: 1; overflow-y: auto; padding: 6px 8px 30px; }
#nav-tree::-webkit-scrollbar { width: 8px; }
#nav-tree::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.niveau-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); padding: 15px 8px 6px; font-weight: 700; }

details.nav-seq, details.nav-seance { border-radius: var(--r-xs); }
details.nav-seq > summary, details.nav-seance > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 8px;
  border-radius: var(--r-xs); font-size: 14px; user-select: none; transition: background .15s; color: var(--text);
}
details.nav-seq > summary::-webkit-details-marker, details.nav-seance > summary::-webkit-details-marker { display: none; }
details.nav-seq > summary:hover, details.nav-seance > summary:hover { background: var(--panel); }
.nav-chevron { flex: none; width: 13px; height: 13px; transition: transform .2s var(--ease); color: var(--text-faint); }
details[open] > summary .nav-chevron { transform: rotate(90deg); }
details.nav-seq > summary { font-weight: 600; }
.nav-seq-title { flex: 1; }
.nav-seq-body { padding-left: 13px; }
details.nav-seance > summary { font-size: 13.5px; color: var(--text-dim); }
.nav-seance-body { padding-left: 19px; display: flex; flex-direction: column; gap: 1px; padding-bottom: 4px; }

.nav-cours {
  display: flex; align-items: center; gap: 8px; text-align: left; background: none; border: none; color: var(--text-dim);
  cursor: pointer; padding: 8px 11px; border-radius: 8px; font-size: 13.5px; line-height: 1.4;
  transition: background .15s, color .15s; width: 100%;
}
.nav-cours:hover { background: var(--panel); color: var(--text); }
.nav-cours.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-cours.nav-direct::before { content: '·'; color: var(--text-faint); font-weight: 700; }

/* Cours pas encore marqué « Activités prêtes » : visible mais non consultable. */
.nav-cours.nav-soon { color: var(--text-faint); cursor: default; }
.nav-cours.nav-soon:hover { background: none; color: var(--text-faint); }
.nav-cours .soon-tag {
  margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 20px; background: var(--panel); color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
/* Séquence ou séance dont aucun cours n'est encore prêt. */
details.nav-seq.all-soon > summary, details.nav-seance.all-soon > summary { color: var(--text-faint); }

.badge { flex: none; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; letter-spacing: .02em; }
.badge-niveau1 { background: var(--accent-soft); color: var(--accent); }
.badge-niveau2 { background: var(--violet-soft); color: var(--violet); }

.nav-empty { color: var(--text-faint); font-size: 13px; padding: 18px 12px; text-align: center; line-height: 1.6; }
#sidebar-backdrop { display: none; }