@if (collapsed()) {
  <!-- Barre repliée : fine, rouvrable à tout moment -->
  <div class="sticky top-16 left-0 right-0 z-40 flex w-full items-center gap-2 border-b border-slate-700/60 bg-slate-800/60 px-3 py-1 backdrop-blur-sm">
    <span class="text-xs font-medium text-slate-400">{{ 'themes.title' | t : 'Thèmes' }}</span>
    @if (activeThemeLabel(); as label) {
      <span class="rounded-full border border-red-500/60 bg-slate-100/10 px-2 py-0.5 text-xs text-white">{{ label }}</span>
    }
    <button type="button" (click)="toggleCollapsed()" [attr.aria-expanded]="false" aria-controls="themes-bar"
            [title]="'themes.show' | t : 'Afficher la bande des thèmes'"
            class="ml-auto inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold text-slate-300 transition hover:bg-slate-700 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500">
      <span>{{ 'themes.show' | t : 'Afficher' }}</span>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
    </button>
  </div>
} @else {
<nav id="themes-bar" class="sticky top-16 left-0 right-0 z-40 w-full relative"
     [ngClass]="{
       'bg-slate-800 border-b border-slate-700': isDarkTheme(),
       'bg-slate-900 border-b border-slate-800': isBlackTheme(),
       'bg-slate-700 border-b border-slate-600': isBlueTheme()
     }">
  <!-- Left scroll button -->
  <button type="button" (click)="scrollBy(-320)" aria-label="Scroll left"
          class="hidden md:flex items-center justify-center absolute left-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full shadow z-10"
          [ngClass]="{
            'bg-white/90 border border-slate-300 text-slate-700 hover:bg-slate-100': isLightTheme(),
            'bg-slate-800/90 border border-slate-700 text-slate-200 hover:bg-slate-700': isDarkTheme() || isBlackTheme() || isBlueTheme()
          }">
    «
  </button>

  <!-- Right scroll button -->
  <button type="button" (click)="scrollBy(320)" aria-label="Scroll right"
          class="hidden md:flex items-center justify-center absolute right-2 top-1/2 -translate-y-1/2 h-9 w-9 rounded-full shadow z-10"
          [ngClass]="{
            'bg-white/90 border border-slate-300 text-slate-700 hover:bg-slate-100': isLightTheme(),
            'bg-slate-800/90 border border-slate-700 text-slate-200 hover:bg-slate-700': isDarkTheme() || isBlackTheme() || isBlueTheme()
          }">
    »
  </button>

  <!-- Replier la bande -->
  <button type="button" (click)="toggleCollapsed()" [attr.aria-expanded]="true" aria-controls="themes-bar"
          [title]="'themes.hide' | t : 'Masquer la bande des thèmes'"
          class="absolute right-12 top-1/2 z-10 hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-full shadow transition focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 md:flex"
          [ngClass]="{
            'bg-white/90 border border-slate-300 text-slate-700 hover:bg-slate-100': isLightTheme(),
            'bg-slate-800/90 border border-slate-700 text-slate-200 hover:bg-slate-700': isDarkTheme() || isBlackTheme() || isBlueTheme()
          }"
          aria-label="Masquer la bande des thèmes">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" /></svg>
  </button>

  <div class="w-full overflow-x-auto no-scrollbar" #scroll (wheel)="onWheel($event)">
    <ul role="tablist" aria-label="Themes" class="flex gap-2 px-12 py-2 min-w-max items-center">
      <li *ngFor="let t of displayedThemes(); let i = index" class="shrink-0">
        <button
          #pill
          role="tab"
          type="button"
          class="px-3 py-1.5 rounded-full text-sm font-medium border transition-colors whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-red-500"
          [class.bg-slate-100/10]="activeSlug() === t.slug"
          [class.text-white]="activeSlug() === t.slug"
          [class.border-red-500]="activeSlug() === t.slug"
          [class.text-slate-300]="activeSlug() !== t.slug"
          [class.border-slate-700]="activeSlug() !== t.slug"
          [attr.aria-selected]="activeSlug() === t.slug"
          (click)="goToTheme(t.slug)"
          (keydown)="onKeydown($event, i)"
        >
          <span class="mr-1 select-none">{{ t.emoji }}</span>
          <span>{{ themesSvc.i18nLabel(t) }}</span>
        </button>
      </li>
      <li class="shrink-0 md:hidden">
        <button type="button" (click)="toggleCollapsed()"
                class="px-3 py-1.5 rounded-full text-xs font-semibold text-slate-400 border border-slate-700 whitespace-nowrap">
          {{ 'themes.hide' | t : 'Masquer' }}
        </button>
      </li>
    </ul>
  </div>
</nav>
}