/* Le volet de gauche (partials/simple_volet.php, volet.js) : ordinateur seulement. Icônes seules par défaut, ouvert avec les noms
   (html[data-volet="ouvert"]) ou fermé (html[data-volet="ferme"], une languette pour le rouvrir). Il passe par-dessus la page sans
   jamais la pousser (Mathieu, 2026-10-27) : 56 px, la marge de la page (space-10) ; il commence sous la barre grise du
   compte (collée en haut), dont volet.js donne la hauteur (--scb-h). Les onglets de Musique aussi. */
.svolet, .svolet-tab { display: none; }

@media (min-width: 1024px) {
  :root { --volet-w: 56px; }
  html[data-volet="ouvert"] { --volet-w: 208px; }

  .svolet { display: flex; flex-direction: column; justify-content: space-between; position: fixed; z-index: 30; inset: var(--scb-h, 53px) auto 0 0; width: var(--volet-w); padding: var(--space-4) 4px; background: var(--color-surface); border-right: 1px solid var(--color-border); overflow: hidden auto; transition: width 0.18s ease, box-shadow 0.18s ease; }
  html[data-volet="ouvert"] .svolet { box-shadow: var(--shadow-card); }
  html[data-volet="ferme"] .svolet { display: none; }
  .svolet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .svolet__a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 13px; border-radius: var(--radius-sm); color: var(--color-text-2); text-decoration: none; font-weight: 600; white-space: nowrap; }
  .svolet__a svg { flex: none; }
  .svolet__a:hover { background: var(--color-surface-2); color: var(--color-ink); }
  .svolet__a[aria-current] { background: var(--color-accent-soft); color: var(--color-accent-text); }
  .svolet__t { opacity: 0; transition: opacity 0.12s ease; }
  html[data-volet="ouvert"] .svolet__t { opacity: 1; }
  html:not([data-volet="ouvert"]) .svolet__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

  .svolet__ctl { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
  html[data-volet="ouvert"] .svolet__ctl { flex-direction: row; justify-content: space-between; }
  .svolet__btn { display: grid; place-items: center; width: 47px; height: 40px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); cursor: pointer; }
  .svolet__btn:hover { background: var(--color-surface-2); color: var(--color-ink); }
  html[data-volet="ouvert"] [data-volet-wide] svg { transform: rotate(180deg); }

  .svolet-tab { position: fixed; z-index: 30; top: calc(var(--scb-h, 53px) + var(--space-4)); left: 0; width: 36px; height: 40px; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface); color: var(--color-text-2); cursor: pointer; place-items: center; }
  html[data-volet="ferme"] .svolet-tab { display: grid; }
  .svolet-tab:hover { color: var(--color-accent-text); }
}

@media (prefers-reduced-motion: reduce) {
  .svolet, .svolet__t { transition: none; }
}

.smusic-tabs { display: flex; gap: 0; margin: 0 0 var(--space-4); border-bottom: 1px solid var(--color-border); }
.smusic-tabs a { padding: 10px 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--color-text-2); font-weight: 700; text-decoration: none; }
.smusic-tabs a:hover { color: var(--color-ink); }
.smusic-tabs a[aria-current] { color: var(--color-accent-text); border-bottom-color: var(--color-accent-text); }