feat(layout): begin add header

angular/src/app/app.component.html

+<app-header></app-header>
 <main id="content">
   <router-outlet></router-outlet>
 </main>

angular/src/app/app.component.ts

 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './layouts/header/header.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, HeaderComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

angular/src/app/layouts/header/header.component.html

+<header role="banner" class="fr-header">
+  <div class="fr-header__body">
+    <div class="fr-container">
+      <div class="fr-header__body-row">
+        <div class="fr-header__brand fr-enlarge-link">
+          <div class="fr-header__brand-top">
+            <div class="fr-header__brand-top">
+              <div class="fr-header__logo">
+                <p class="fr-logo">
+                  Ministère
+                  <br />de l'Intérieur
+                </p>
+              </div>
+            </div>
+            <div class="fr-header__service">
+              <a
+                href="/"
+                title="Accueil - [À MODIFIER - Nom du site / service] - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+              >
+                <p class="fr-header__service-title">Démocratie Participative</p>
+              </a>
+              <p class="fr-header__service-tagline">democratie-participative.gouv.fr</p>
+            </div>
+            <div class="fr-header__navbar">
+              <button
+                class="fr-btn--menu fr-btn"
+                data-fr-opened="false"
+                aria-controls="modal-491"
+                aria-haspopup="menu"
+                id="button-492"
+                title="Menu"
+              >
+                Menu
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="fr-header__tools">
+          <div class="fr-header__tools-links">
+            <ul class="fr-btns-group">
+<!--              @if (isAuthenticated()) {-->
+
+<!--                <li>-->
+<!--                  <a-->
+<!--                    class="fr-btn fr-icon-logout-box-r-line"-->
+<!--                    href="/redirect_uri?logout="-->
+<!--                    rel="nofollow"-->
+<!--                  >-->
+<!--                    Se déconnecter-->
+<!--                  </a>-->
+<!--                </li>-->
+<!--                <li>-->
+<!--                  <a class="fr-btn fr-icon-account-line" href="/account">-->
+<!--                    {{ userName }}-->
+<!--                  </a>-->
+<!--                </li>-->
+<!--              } @else {-->
+                <li>
+                  <a
+                    class="fr-btn fr-icon-lock-line"
+                    href="/login"
+                    rel="nofollow"
+                  >
+                    Se connecter
+                  </a>
+                </li>
+                <li>
+                  <a class="fr-btn fr-icon-account-line" href="#">
+                    S’enregistrer
+                  </a>
+                </li>
+<!--              }-->
+<!--              <li>-->
+<!--                <a class="fr-btn fr-icon-shopping-cart-2-line" href="/basket">-->
+<!--                  Panier {{ basketSize() }}-->
+<!--                </a>-->
+<!--              </li>-->
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="fr-header__menu fr-modal"
+    id="modal-491"
+    aria-labelledby="button-492"
+  >
+    <div class="fr-container">
+      <button
+        class="fr-btn--close fr-btn"
+        aria-controls="modal-491"
+        title="Fermer"
+      >
+        Fermer
+      </button>
+      <div class="fr-header__menu-links"></div>
+      <nav
+        class="fr-nav"
+        id="navigation-494"
+        role="navigation"
+        aria-label="Menu principal"
+      >
+        <ul class="fr-nav__list">
+          <li class="fr-nav__item">
+            <a class="fr-nav__link" href="/home" target="_self">Accueil</a>
+          </li>
+<!--          @if (isAuthenticated()) {-->
+
+<!--            <li class="fr-nav__item">-->
+<!--              <a class="fr-nav__link" href="/account" target="_self"-->
+<!--              >Mon compte</a-->
+<!--              >-->
+<!--            </li>-->
+<!--          }-->
+        </ul>
+      </nav>
+    </div>
+  </div>
+</header>

angular/src/app/layouts/header/header.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeaderComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

angular/src/app/layouts/header/header.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  imports: [],
+  templateUrl: './header.component.html',
+  styleUrl: './header.component.scss'
+})
+export class HeaderComponent {
+
+}