<header class="modern-header">
  <div class="header-content">
    
    <!-- Section Gauche -->
    <div class="header-left">
      <!-- Logo ESTAIR -->
      <div class="logo-container">
        <div class="logo-icon">
          <div class="logo-arrows">
            <div class="arrow-top"></div>
            <div class="arrow-bottom"></div>
          </div>
          <span class="logo-text">ESTAIR</span>
        </div>
      </div>
      
      <!-- Breadcrumb -->
      <nav class="breadcrumb-nav" *ngIf="breadcrumb.length > 0">
        <div class="breadcrumb-container">
          <ng-container *ngFor="let item of breadcrumb; let last = last">
            <a [routerLink]="item.route" 
               class="breadcrumb-item"
               [class.active]="item.active">
              <i class="material-icons">{{ item.icon }}</i>
              <span>{{ item.label }}</span>
            </a>
            <i *ngIf="!last" class="material-icons breadcrumb-separator">chevron_right</i>
          </ng-container>
        </div>
      </nav>
    </div>
    
    <!-- Section Droite -->
    <div class="header-right">
      
      <!-- Recherche -->
      <div class="search-container">
        <i class="material-icons search-icon">search</i>
        <input type="text" 
               placeholder="Recherche globale..."
               [(ngModel)]="searchValue"
               (input)="onSearchChange($any($event.target).value)"
               class="search-input">
      </div>
      
      <!-- Actions -->
      <div class="header-actions">

        <!-- Notifications -->
        <button class="action-btn">
          <i class="material-icons">notifications</i>
          <span class="badge">3</span>
        </button>

        <!-- FAQ Button - Accessible à tous, avant le user-menu -->
        <button class="faq-button" (click)="toggleFaqPanel()" title="Centre d'aide">
          <i class="material-icons">help_outline</i>
          <span class="btn-text">FAQ</span>
        </button>

        <!-- Menu Utilisateur -->
        <div class="user-menu" (click)="toggleUserMenu()">
          <div class="user-avatar">{{ currentUser?.avatar || 'U' }}</div>
          <span class="user-name">{{ currentUser?.name || 'Utilisateur' }}</span>
          <i class="material-icons">expand_more</i>

          <!-- Dropdown -->
          <div class="user-dropdown" *ngIf="showUserMenu">
            <!-- Profil - Au-dessus de la déconnexion -->
            <button (click)="showUserProfile()">
              <i class="material-icons">account_circle</i>
              Mon profil
            </button>
            <div class="dropdown-divider"></div>
            <button (click)="onLogout()">
              <i class="material-icons">logout</i>
              Déconnexion
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>