feat(ui): confettis festifs animés sur les héros des hubs

frontend/src/app/features/best-practices/best-practices.component.html

@@ -10,6 +10,7 @@ <h1>Les bonnes pratiques de la Code Review</h1>
 
 <!-- Hero : le ton et le « pourquoi » -->
 <section class="hero">
+  <app-confetti tone="dark" />
   <p class="hero__lead">
     Une bonne revue ne traque pas les fautes : elle fait grandir le code et ceux
     qui l'écrivent.

frontend/src/app/features/best-practices/best-practices.component.scss

@@ -28,6 +28,9 @@
 
 /* Hero — donne le ton festif (framboise → violet) */
 .hero {
+  position: relative;
+  z-index: 0; // contexte d'empilement pour les confettis décoratifs
+  overflow: hidden;
   background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);

frontend/src/app/features/best-practices/best-practices.component.ts

@@ -10,6 +10,7 @@ import {
   BreadcrumbComponent,
   BreadcrumbItem,
 } from '../../shared/components/breadcrumb/breadcrumb.component';
+import { ConfettiComponent } from '../../shared/components/confetti/confetti.component';
 
 /**
  * Page pédagogique « Les bonnes pratiques de la Code Review ».
@@ -23,6 +24,7 @@ import {
   imports: [
     RouterLink,
     BreadcrumbComponent,
+    ConfettiComponent,
     MatCardModule,
     MatIconModule,
     MatButtonModule,

frontend/src/app/features/claude-code-setup/claude-code-setup.component.html

@@ -11,6 +11,7 @@ <h1>Mettre en place Claude Code</h1>
 
 <!-- Hero : le ton et le « pourquoi » -->
 <section class="hero">
+  <app-confetti tone="dark" />
   <p class="hero__lead">
     Bien configuré, Claude Code connaît ton projet, respecte tes conventions et
     automatise le répétitif.

frontend/src/app/features/claude-code-setup/claude-code-setup.component.scss

@@ -28,6 +28,9 @@
 
 /* Hero — donne le ton festif (framboise → violet) */
 .hero {
+  position: relative;
+  z-index: 0; // contexte d'empilement pour les confettis décoratifs
+  overflow: hidden;
   background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);

frontend/src/app/features/claude-code-setup/claude-code-setup.component.ts

@@ -9,6 +9,7 @@ import {
   BreadcrumbComponent,
   BreadcrumbItem,
 } from '../../shared/components/breadcrumb/breadcrumb.component';
+import { ConfettiComponent } from '../../shared/components/confetti/confetti.component';
 
 /**
  * Page pédagogique « Mettre en place Claude Code ».
@@ -20,7 +21,13 @@ import {
  */
 @Component({
   selector: 'app-claude-code-setup',
-  imports: [RouterLink, BreadcrumbComponent, MatCardModule, MatIconModule],
+  imports: [
+    RouterLink,
+    BreadcrumbComponent,
+    ConfettiComponent,
+    MatCardModule,
+    MatIconModule,
+  ],
   templateUrl: './claude-code-setup.component.html',
   styleUrl: './claude-code-setup.component.scss',
 })

frontend/src/app/features/design-patterns/design-patterns.component.html

@@ -11,6 +11,7 @@ <h1>Les Design Patterns</h1>
 
 <!-- Hero : le ton et le « pourquoi » -->
 <section class="hero">
+  <app-confetti tone="dark" />
   <p class="hero__lead">
     Un design pattern n'est pas un bout de code à copier : c'est un vocabulaire
     partagé pour résoudre un problème de conception.

frontend/src/app/features/design-patterns/design-patterns.component.scss

@@ -28,6 +28,9 @@
 
 /* Hero — donne le ton festif (framboise → violet) */
 .hero {
+  position: relative;
+  z-index: 0; // contexte d'empilement pour les confettis décoratifs
+  overflow: hidden;
   background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);

frontend/src/app/features/design-patterns/design-patterns.component.ts

@@ -12,6 +12,7 @@ import {
   BreadcrumbComponent,
   BreadcrumbItem,
 } from '../../shared/components/breadcrumb/breadcrumb.component';
+import { ConfettiComponent } from '../../shared/components/confetti/confetti.component';
 
 /** Une famille de patrons et ses cartes, pour l'affichage groupé du hub. */
 interface PatternGroup {
@@ -36,7 +37,13 @@ const CATEGORY_ORDER: DesignPatternCategory[] = [
  */
 @Component({
   selector: 'app-design-patterns',
-  imports: [RouterLink, BreadcrumbComponent, MatCardModule, MatIconModule],
+  imports: [
+    RouterLink,
+    BreadcrumbComponent,
+    ConfettiComponent,
+    MatCardModule,
+    MatIconModule,
+  ],
   templateUrl: './design-patterns.component.html',
   styleUrl: './design-patterns.component.scss',
 })

frontend/src/app/features/home/home.component.html

@@ -1,4 +1,5 @@
 <section class="hero">
+  <app-confetti />
   <h1>Vos outils de développeur, au même endroit</h1>
   <p>Des outils pédagogiques pour écrire et relire du meilleur code.</p>
 </section>

frontend/src/app/features/home/home.component.scss

@@ -6,6 +6,9 @@
 }
 
 .hero {
+  position: relative;
+  z-index: 0; // contexte d'empilement : confettis (z-index négatif) derrière
+  overflow: hidden; // clippe les confettis dans le panneau arrondi
   text-align: center;
   margin-bottom: var(--cc-space-7);
   padding: var(--cc-space-7) var(--cc-space-5);

frontend/src/app/features/home/home.component.ts

@@ -4,11 +4,12 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ToolService } from '../../core/services/tool.service';
 import { Tool } from '../../core/models/tool.model';
 import { ToolCardComponent } from '../../shared/components/tool-card/tool-card.component';
+import { ConfettiComponent } from '../../shared/components/confetti/confetti.component';
 
 /** Page d'accueil : liste les outils du site récupérés via GET /api/tools. */
 @Component({
   selector: 'app-home',
-  imports: [MatProgressSpinnerModule, ToolCardComponent],
+  imports: [MatProgressSpinnerModule, ToolCardComponent, ConfettiComponent],
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss',
 })

frontend/src/app/features/solid/solid.component.html

@@ -10,6 +10,7 @@ <h1>Les principes SOLID</h1>
 
 <!-- Hero : le ton et le « pourquoi » -->
 <section class="hero">
+  <app-confetti tone="dark" />
   <p class="hero__lead">
     SOLID n'est pas un dogme : c'est une boussole pour limiter le coût du
     changement.

frontend/src/app/features/solid/solid.component.scss

@@ -28,6 +28,9 @@
 
 /* Hero — donne le ton festif (framboise → violet) */
 .hero {
+  position: relative;
+  z-index: 0; // contexte d'empilement pour les confettis décoratifs
+  overflow: hidden;
   background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);

frontend/src/app/features/solid/solid.component.ts

@@ -9,6 +9,7 @@ import {
   BreadcrumbComponent,
   BreadcrumbItem,
 } from '../../shared/components/breadcrumb/breadcrumb.component';
+import { ConfettiComponent } from '../../shared/components/confetti/confetti.component';
 
 /**
  * Page pédagogique « Principes SOLID ».
@@ -19,7 +20,13 @@ import {
  */
 @Component({
   selector: 'app-solid',
-  imports: [RouterLink, BreadcrumbComponent, MatCardModule, MatIconModule],
+  imports: [
+    RouterLink,
+    BreadcrumbComponent,
+    ConfettiComponent,
+    MatCardModule,
+    MatIconModule,
+  ],
   templateUrl: './solid.component.html',
   styleUrl: './solid.component.scss',
 })

frontend/src/app/shared/components/confetti/confetti.component.html

@@ -0,0 +1,30 @@
+<svg
+  class="confetti__svg"
+  viewBox="0 0 400 200"
+  preserveAspectRatio="none"
+  aria-hidden="true"
+  focusable="false"
+>
+  <circle class="confetti__bit confetti__bit--1" cx="36" cy="40" r="11" />
+  <path class="confetti__bit confetti__bit--2" d="M24 132 H44 L34 110 Z" />
+  <rect
+    class="confetti__bit confetti__bit--3"
+    x="62"
+    y="150"
+    width="16"
+    height="16"
+    rx="4"
+  />
+  <circle class="confetti__bit confetti__bit--4" cx="108" cy="22" r="6" />
+  <circle class="confetti__bit confetti__bit--5" cx="362" cy="44" r="9" />
+  <path class="confetti__bit confetti__bit--6" d="M362 120 H384 L373 98 Z" />
+  <rect
+    class="confetti__bit confetti__bit--7"
+    x="346"
+    y="142"
+    width="18"
+    height="18"
+    rx="5"
+  />
+  <circle class="confetti__bit confetti__bit--8" cx="300" cy="178" r="7" />
+</svg>

frontend/src/app/shared/components/confetti/confetti.component.scss

@@ -0,0 +1,76 @@
+// Calque positionné derrière le contenu du héros (qui doit être un contexte
+// d'empilement : `position: relative; z-index: 0`).
+:host {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  display: block;
+  pointer-events: none;
+}
+
+.confetti__svg {
+  width: 100%;
+  height: 100%;
+}
+
+// Apparition en cascade : un « pop » (scale, sans toucher l'opacité — on
+// préserve ainsi la translucidité de la variante sombre). Décalage croissant.
+.confetti__bit {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: cc-pop var(--cc-dur) var(--cc-ease-bounce) both;
+}
+
+@for $i from 1 through 8 {
+  .confetti__bit--#{$i} {
+    animation-delay: calc(var(--cc-stagger) * #{$i - 1});
+  }
+}
+
+// Variante claire (accueil, fond doux) : multicolore de marque.
+.confetti__bit--1 {
+  fill: var(--cc-primary);
+}
+.confetti__bit--2 {
+  fill: var(--cc-role-auteur);
+}
+.confetti__bit--3 {
+  fill: var(--cc-accent);
+}
+.confetti__bit--4 {
+  fill: var(--cc-accent);
+}
+.confetti__bit--5 {
+  fill: var(--cc-role-relecteur);
+}
+.confetti__bit--6 {
+  fill: var(--cc-primary);
+}
+.confetti__bit--7 {
+  fill: var(--cc-success);
+}
+.confetti__bit--8 {
+  fill: var(--cc-role-auteur);
+}
+
+// Variante sombre (héros des hubs, dégradé festif) : confettis clairs et
+// translucides, lisibles sur le dégradé sans voler la vedette au texte.
+:host(.confetti--dark) {
+  .confetti__bit {
+    fill: var(--cc-on-primary);
+  }
+  .confetti__bit--1,
+  .confetti__bit--6 {
+    opacity: 0.8;
+  }
+  .confetti__bit--2,
+  .confetti__bit--5,
+  .confetti__bit--8 {
+    opacity: 0.55;
+  }
+  .confetti__bit--3,
+  .confetti__bit--4,
+  .confetti__bit--7 {
+    opacity: 0.4;
+  }
+}

frontend/src/app/shared/components/confetti/confetti.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+
+/** Adapte la palette des confettis au fond du bandeau qui les accueille. */
+export type ConfettiTone = 'light' | 'dark';
+
+/**
+ * Calque décoratif de confettis (SVG inline tokenisé), à poser dans un bandeau
+ * héros (`position: relative; z-index: 0; overflow: hidden`). Purement
+ * décoratif (`aria-hidden`), positionné en absolu derrière le contenu.
+ *
+ * `tone` adapte la palette au fond :
+ * - `light` (défaut) : multicolore de marque, sur fond clair (accueil) ;
+ * - `dark` : confettis clairs et translucides, sur le dégradé festif des hubs.
+ *
+ * Les pièces apparaissent en cascade (keyframe globale `cc-pop`, décalage
+ * `--cc-stagger`) — neutralisée par `prefers-reduced-motion`.
+ */
+@Component({
+  selector: 'app-confetti',
+  templateUrl: './confetti.component.html',
+  styleUrl: './confetti.component.scss',
+  host: {
+    class: 'confetti',
+    '[class.confetti--dark]': "tone === 'dark'",
+    'aria-hidden': 'true',
+  },
+})
+export class ConfettiComponent {
+  @Input() tone: ConfettiTone = 'light';
+}