feat(ui): pivot de la direction artistique vers une DA festive et animée

DECISIONS.md

@@ -30,6 +30,32 @@ Entrées **antéchronologiques** (la plus récente en haut). La date au format `
 
 ---
 
+## 2026-06-17 — Pivot de la direction artistique vers une DA festive et animée
+
+- **Contexte** : la DA « atelier / artisan » (papier, cuivre, teal, sobre,
+  quasi sans animation) devait laisser place à une ambiance joviale, festive,
+  plus moderne et vivante, sur tout le front.
+- **Décision** : refonte des tokens `--cc-*` dans `styles.scss` (palette
+  framboise `#D81B60` / violet `#7C3AED` / mandarine, dégradés `--cc-gradient-*`,
+  rayons plus généreux + `--cc-radius-pill`, ombres expressives teintées +
+  `--cc-shadow-glow`, tokens de mouvement `--cc-dur-*` / `--cc-ease-*` /
+  `--cc-transition-*` / `--cc-stagger`, keyframes globales `cc-rise`/`cc-pop`).
+  Animations CSS pures : entrée de page sur chaque feature, micro-interactions
+  rebondies au survol, et apparition en cascade des grilles via une **utilitaire
+  globale `.cc-stagger`** (classe posée sur le conteneur, anime les enfants
+  directs).
+- **Options écartées** : (1) dupliquer la cascade par composant via `@for`
+  (rejeté — faisait dépasser le budget SCSS de `phase-guide` ET inopérant sur
+  les hubs en `<ul>/<li>`, la carte n'étant pas enfant direct de la grille) ;
+  (2) une librairie d'animation tierce (rejeté — aucune dépendance nouvelle,
+  CSS/Angular suffit) ; (3) texte de héros en dégradé `background-clip` (rejeté —
+  risque de contraste, on garde un texte plein).
+- **Pourquoi** : moderniser l'app sans casser l'architecture par tokens ni
+  l'accessibilité — `prefers-reduced-motion` neutralise toutes les nouvelles
+  animations, contrastes vérifiés AA, `:focus-visible` et indices non chromatiques
+  préservés. La centralisation de la cascade évite la duplication et les budgets.
+- **Trace** : branche `feat/festive-design-system` (session du 2026-06-17).
+
 ## 2026-06-17 — Commandes /retro (feedback persisté) et /sync (amorce de contexte)
 
 - **Contexte** : deux frictions récurrentes dans la collaboration dev ↔ Claude —

frontend/src/app/app.component.scss

@@ -35,6 +35,12 @@
 
   mat-icon {
     color: var(--cc-primary);
+    transition: transform var(--cc-transition-bounce);
+  }
+
+  // L'outil « pétille » quand on survole la marque.
+  &:hover mat-icon {
+    transform: rotate(-12deg) scale(1.12);
   }
 }
 
@@ -56,18 +62,23 @@
   font-size: var(--cc-fs-small);
   font-weight: 600;
   white-space: nowrap;
-  transition: background var(--cc-transition), color var(--cc-transition),
-    box-shadow var(--cc-transition);
+  transition:
+    background var(--cc-transition),
+    color var(--cc-transition),
+    box-shadow var(--cc-transition),
+    transform var(--cc-transition-bounce);
 
   &:hover {
     background: var(--cc-surface-2);
     color: var(--cc-ink);
+    transform: translateY(-1px);
   }
 
-  // Page courante : couleur + fond + soulignement (indices non basés sur la
-  // seule couleur), en plus de aria-current="page".
+  // Page courante : texte + fond + soulignement (indices non basés sur la
+  // seule couleur), en plus de aria-current="page". Texte foncé (primary-hover)
+  // pour garder le contraste AA sur la teinte festive.
   &--active {
-    color: var(--cc-primary);
+    color: var(--cc-primary-hover);
     background: var(--cc-primary-tint);
     box-shadow: inset 0 -2px 0 var(--cc-primary);
   }

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

@@ -11,16 +11,16 @@ <h1>Les bonnes pratiques de la Code Review</h1>
 <!-- Hero : le ton et le « pourquoi » -->
 <section class="hero">
   <p class="hero__lead">
-    Une bonne revue ne traque pas les fautes : elle fait grandir le code et
-    ceux qui l'écrivent.
+    Une bonne revue ne traque pas les fautes : elle fait grandir le code et ceux
+    qui l'écrivent.
   </p>
   <p class="hero__body">
     La code review est bien plus qu'un dernier filet de sécurité avant la
-    fusion. C'est le moment où la connaissance circule, où la qualité se
-    négocie collectivement et où la confiance se construit. Bien menée, elle
-    attrape les problèmes tôt, diffuse les bonnes pratiques et transforme un
-    travail individuel en réussite d'équipe. Voici comment en tirer le meilleur,
-    étape par étape.
+    fusion. C'est le moment où la connaissance circule, où la qualité se négocie
+    collectivement et où la confiance se construit. Bien menée, elle attrape les
+    problèmes tôt, diffuse les bonnes pratiques et transforme un travail
+    individuel en réussite d'équipe. Voici comment en tirer le meilleur, étape
+    par étape.
   </p>
 </section>
 
@@ -41,38 +41,58 @@ <h2>{{ section.titre }}</h2>
     <!-- Lien vers la page-support (phases 1, 2, 3, 4 et 6 uniquement) -->
     @switch (section.numero) {
       @case (1) {
-        <a mat-stroked-button class="support-link" routerLink="/bonnes-pratiques/pendant-le-developpement">
+        <a
+          mat-stroked-button
+          class="support-link"
+          routerLink="/bonnes-pratiques/pendant-le-developpement"
+        >
           <mat-icon>checklist</mat-icon>
           Ouvrir comme support
         </a>
       }
       @case (2) {
-        <a mat-stroked-button class="support-link" routerLink="/bonnes-pratiques/apres-le-developpement">
+        <a
+          mat-stroked-button
+          class="support-link"
+          routerLink="/bonnes-pratiques/apres-le-developpement"
+        >
           <mat-icon>checklist</mat-icon>
           Ouvrir comme support
         </a>
       }
       @case (3) {
-        <a mat-stroked-button class="support-link" routerLink="/bonnes-pratiques/avant-la-relecture">
+        <a
+          mat-stroked-button
+          class="support-link"
+          routerLink="/bonnes-pratiques/avant-la-relecture"
+        >
           <mat-icon>checklist</mat-icon>
           Ouvrir comme support
         </a>
       }
       @case (4) {
-        <a mat-stroked-button class="support-link" routerLink="/bonnes-pratiques/pendant-la-relecture">
+        <a
+          mat-stroked-button
+          class="support-link"
+          routerLink="/bonnes-pratiques/pendant-la-relecture"
+        >
           <mat-icon>checklist</mat-icon>
           Ouvrir comme support
         </a>
       }
       @case (6) {
-        <a mat-stroked-button class="support-link" routerLink="/bonnes-pratiques/apres-la-relecture-relecteur">
+        <a
+          mat-stroked-button
+          class="support-link"
+          routerLink="/bonnes-pratiques/apres-la-relecture-relecteur"
+        >
           <mat-icon>checklist</mat-icon>
           Ouvrir comme support
         </a>
       }
     }
 
-    <div class="cards">
+    <div class="cards cc-stagger">
       @for (pratique of section.pratiques; track pratique.titre) {
         <mat-card class="practice" appearance="outlined">
           <mat-card-content>

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

@@ -3,6 +3,8 @@
   max-width: 960px;
   margin: 0 auto;
   padding: var(--cc-space-5) var(--cc-space-4) var(--cc-space-8);
+  // Entrée de page : apparition fluide à chaque navigation.
+  animation: cc-rise var(--cc-dur) var(--cc-ease-smooth) both;
 }
 
 .bp-header {
@@ -24,9 +26,9 @@
   }
 }
 
-/* Hero — donne le ton (établi cuivré) */
+/* Hero — donne le ton festif (framboise → violet) */
 .hero {
-  background: linear-gradient(135deg, var(--cc-primary) 0%, var(--cc-primary-hover) 100%);
+  background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);
   padding: var(--cc-space-6);
@@ -82,11 +84,12 @@
     justify-content: center;
     width: 2rem;
     height: 2rem;
-    border-radius: 50%;
-    background: var(--cc-primary-tint);
-    color: var(--cc-primary);
+    border-radius: var(--cc-radius-pill);
+    background: var(--cc-gradient-festive);
+    color: var(--cc-on-primary);
     font-weight: 700;
     flex-shrink: 0;
+    box-shadow: var(--cc-shadow-glow);
   }
 
   &__icon {
@@ -98,7 +101,7 @@
 .badge {
   display: inline-block;
   padding: var(--cc-space-1) var(--cc-space-3);
-  border-radius: 999px;
+  border-radius: var(--cc-radius-pill);
   font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.02em;
@@ -135,16 +138,20 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--cc-space-4);
+  // Apparition en cascade : utilitaire `.cc-stagger` (styles.scss), posé sur
+  // ce conteneur dans le template.
 }
 
 .practice {
   border-radius: var(--cc-radius-md);
-  transition: transform var(--cc-transition), box-shadow var(--cc-transition);
+  transition:
+    transform var(--cc-transition-bounce),
+    box-shadow var(--cc-transition);
 
   &:hover,
   &:focus-within {
-    transform: translateY(-2px);
-    box-shadow: var(--cc-shadow-1);
+    transform: translateY(-6px) scale(1.015);
+    box-shadow: var(--cc-shadow-2);
   }
 
   &__top {

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

@@ -3,6 +3,8 @@
   max-width: 960px;
   margin: 0 auto;
   padding: var(--cc-space-5) var(--cc-space-4) var(--cc-space-8);
+  // Entrée de page : apparition fluide à chaque navigation.
+  animation: cc-rise var(--cc-dur) var(--cc-ease-smooth) both;
 }
 
 .ccd-header {
@@ -130,12 +132,14 @@
   text-decoration: none;
   transition:
     border-color var(--cc-transition),
-    box-shadow var(--cc-transition);
+    box-shadow var(--cc-transition),
+    transform var(--cc-transition-bounce);
 
   &:hover,
   &:focus-visible {
     border-color: var(--cc-primary);
-    box-shadow: var(--cc-shadow-1);
+    box-shadow: var(--cc-shadow-2);
+    transform: translateY(-3px);
   }
 
   &--next {

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

@@ -24,7 +24,7 @@ <h1>Mettre en place Claude Code</h1>
 </section>
 
 <!-- Hub : une carte cliquable par sujet -->
-<ul class="topics">
+<ul class="topics cc-stagger">
   @for (topic of topics; track topic.slug) {
     <li>
       <a class="topic-card" [routerLink]="['/claude-code-setup', topic.slug]">

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

@@ -3,6 +3,8 @@
   max-width: 960px;
   margin: 0 auto;
   padding: var(--cc-space-5) var(--cc-space-4) var(--cc-space-8);
+  // Entrée de page : apparition fluide à chaque navigation.
+  animation: cc-rise var(--cc-dur) var(--cc-ease-smooth) both;
 }
 
 .cc-setup-header {
@@ -24,13 +26,9 @@
   }
 }
 
-/* Hero — donne le ton (établi cuivré) */
+/* Hero — donne le ton festif (framboise → violet) */
 .hero {
-  background: linear-gradient(
-    135deg,
-    var(--cc-primary) 0%,
-    var(--cc-primary-hover) 100%
-  );
+  background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
   border-radius: var(--cc-radius-lg);
   padding: var(--cc-space-6);
@@ -60,6 +58,8 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--cc-space-4);
+  // Apparition en cascade : utilitaire `.cc-stagger` (styles.scss), posé sur
+  // ce conteneur dans le template (cible les `<li>`, enfants directs).
 }
 
 .topic-card {
@@ -73,21 +73,28 @@
     height: 100%;
     border-radius: var(--cc-radius-md);
     transition:
-      transform var(--cc-transition),
+      transform var(--cc-transition-bounce),
       box-shadow var(--cc-transition),
       border-color var(--cc-transition);
   }
 
   &:hover &__inner,
   &:focus-visible &__inner {
-    transform: translateY(-2px);
-    box-shadow: var(--cc-shadow-1);
+    transform: translateY(-6px) scale(1.015);
+    box-shadow: var(--cc-shadow-2);
     border-color: var(--cc-primary);
   }
 
   &__icon {
     color: var(--cc-accent);
     margin-bottom: var(--cc-space-3);
+    transition: transform var(--cc-transition-bounce);
+  }
+
+  // L'icône du sujet « pétille » au survol.
+  &:hover &__icon,
+  &:focus-visible &__icon {
+    transform: rotate(-6deg) scale(1.12);
   }
 
   &__title {

frontend/src/app/features/code-review/code-review.component.scss

@@ -3,6 +3,8 @@
   max-width: 860px;
   margin: 0 auto;
   padding: var(--cc-space-5) var(--cc-space-4) var(--cc-space-8);
+  // Entrée de page : apparition fluide à chaque navigation.
+  animation: cc-rise var(--cc-dur) var(--cc-ease-smooth) both;
 }
 
 .cr-header {
@@ -51,6 +53,15 @@
 .category-card {
   border-radius: var(--cc-radius-md);
   margin-bottom: var(--cc-space-4);
+  transition:
+    transform var(--cc-transition-bounce),
+    box-shadow var(--cc-transition);
+
+  &:hover,
+  &:focus-within {
+    transform: translateY(-3px);
+    box-shadow: var(--cc-shadow-2);
+  }
 }
 
 .check-item {