diff --git a/DECISIONS.md b/DECISIONS.md
index f6ab667..4bbd6d6 100644
--- a/DECISIONS.md
+++ b/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 —
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 1957ceb..db746a9 100644
--- a/frontend/src/app/app.component.scss
+++ b/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);
   }
diff --git a/frontend/src/app/features/best-practices/best-practices.component.html b/frontend/src/app/features/best-practices/best-practices.component.html
index ae282db..44d35b5 100644
--- a/frontend/src/app/features/best-practices/best-practices.component.html
+++ b/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>
diff --git a/frontend/src/app/features/best-practices/best-practices.component.scss b/frontend/src/app/features/best-practices/best-practices.component.scss
index b746387..5f247df 100644
--- a/frontend/src/app/features/best-practices/best-practices.component.scss
+++ b/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 {
diff --git a/frontend/src/app/features/claude-code-setup-detail/claude-code-setup-detail.component.scss b/frontend/src/app/features/claude-code-setup-detail/claude-code-setup-detail.component.scss
index bdd2ebe..adb7f93 100644
--- a/frontend/src/app/features/claude-code-setup-detail/claude-code-setup-detail.component.scss
+++ b/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 {
diff --git a/frontend/src/app/features/claude-code-setup/claude-code-setup.component.html b/frontend/src/app/features/claude-code-setup/claude-code-setup.component.html
index 6833097..9275680 100644
--- a/frontend/src/app/features/claude-code-setup/claude-code-setup.component.html
+++ b/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]">
diff --git a/frontend/src/app/features/claude-code-setup/claude-code-setup.component.scss b/frontend/src/app/features/claude-code-setup/claude-code-setup.component.scss
index f0e1213..7528d47 100644
--- a/frontend/src/app/features/claude-code-setup/claude-code-setup.component.scss
+++ b/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 {
diff --git a/frontend/src/app/features/code-review/code-review.component.scss b/frontend/src/app/features/code-review/code-review.component.scss
index c14660a..e755bc7 100644
--- a/frontend/src/app/features/code-review/code-review.component.scss
+++ b/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 {
diff --git a/frontend/src/app/features/design-pattern-detail/design-pattern-detail.component.scss b/frontend/src/app/features/design-pattern-detail/design-pattern-detail.component.scss
index 70b842b..02f647d 100644
--- a/frontend/src/app/features/design-pattern-detail/design-pattern-detail.component.scss
+++ b/frontend/src/app/features/design-pattern-detail/design-pattern-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;
 }
 
 .dpd-header {
@@ -19,8 +21,9 @@
     height: 3rem;
     flex-shrink: 0;
     border-radius: var(--cc-radius-md);
-    background: var(--cc-primary);
+    background: var(--cc-gradient-festive);
     color: var(--cc-on-primary);
+    box-shadow: var(--cc-shadow-glow);
   }
 
   h1 {
@@ -104,7 +107,8 @@
   border: 1px solid var(--cc-border);
   border-radius: var(--cc-radius-sm);
   color: var(--cc-ink);
-  font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Courier New", monospace;
+  font-family:
+    'SFMono-Regular', 'Cascadia Code', Consolas, 'Courier New', monospace;
   font-size: 0.82rem;
   line-height: 1.55;
   overflow-x: auto;
@@ -135,12 +139,16 @@
   background: var(--cc-surface);
   color: var(--cc-ink);
   text-decoration: none;
-  transition: border-color var(--cc-transition), box-shadow var(--cc-transition);
+  transition:
+    border-color 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 {
diff --git a/frontend/src/app/features/design-patterns/design-patterns.component.html b/frontend/src/app/features/design-patterns/design-patterns.component.html
index 62a0e4b..88d262b 100644
--- a/frontend/src/app/features/design-patterns/design-patterns.component.html
+++ b/frontend/src/app/features/design-patterns/design-patterns.component.html
@@ -27,7 +27,7 @@ <h1>Les Design Patterns</h1>
 @for (group of groups; track group.categorie) {
   <section class="dp-group">
     <h2 class="dp-group__title">{{ group.categorie }}s</h2>
-    <ul class="patterns">
+    <ul class="patterns cc-stagger">
       @for (pattern of group.patterns; track pattern.slug) {
         <li>
           <a
@@ -37,7 +37,9 @@ <h2 class="dp-group__title">{{ group.categorie }}s</h2>
             <mat-card appearance="outlined" class="pattern-card__inner">
               <mat-card-content>
                 <div class="pattern-card__top">
-                  <mat-icon class="pattern-card__icon" aria-hidden="true">{{ pattern.icon }}</mat-icon>
+                  <mat-icon class="pattern-card__icon" aria-hidden="true">{{
+                    pattern.icon
+                  }}</mat-icon>
                   <span class="pattern-card__cat">{{ pattern.categorie }}</span>
                 </div>
                 <h3 class="pattern-card__title">{{ pattern.nom }}</h3>
diff --git a/frontend/src/app/features/design-patterns/design-patterns.component.scss b/frontend/src/app/features/design-patterns/design-patterns.component.scss
index 93527a2..21a6fad 100644
--- a/frontend/src/app/features/design-patterns/design-patterns.component.scss
+++ b/frontend/src/app/features/design-patterns/design-patterns.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;
 }
 
 .dp-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);
@@ -69,6 +71,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).
 }
 
 .pattern-card {
@@ -81,17 +85,25 @@
   &__inner {
     height: 100%;
     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),
       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);
   }
 
+  // L'icône du patron « pétille » au survol.
+  &:hover &__icon,
+  &:focus-visible &__icon {
+    transform: rotate(-6deg) scale(1.08);
+  }
+
   &__top {
     display: flex;
     align-items: center;
@@ -106,9 +118,11 @@
     width: 2.75rem;
     height: 2.75rem;
     border-radius: var(--cc-radius-md);
-    background: var(--cc-primary);
+    background: var(--cc-gradient-festive);
     color: var(--cc-on-primary);
     font-size: 1.5rem;
+    box-shadow: var(--cc-shadow-glow);
+    transition: transform var(--cc-transition-bounce);
   }
 
   &__cat {
diff --git a/frontend/src/app/features/home/home.component.html b/frontend/src/app/features/home/home.component.html
index 22e5227..70f018d 100644
--- a/frontend/src/app/features/home/home.component.html
+++ b/frontend/src/app/features/home/home.component.html
@@ -12,7 +12,7 @@ <h1>Vos outils de développeur, au même endroit</h1>
     <p>Impossible de charger les outils. Vérifie que l'API est démarrée.</p>
   </div>
 } @else {
-  <div class="tools-grid">
+  <div class="tools-grid cc-stagger">
     @for (tool of tools(); track tool._id) {
       <app-tool-card [tool]="tool"></app-tool-card>
     }
diff --git a/frontend/src/app/features/home/home.component.scss b/frontend/src/app/features/home/home.component.scss
index 45874de..808f2c5 100644
--- a/frontend/src/app/features/home/home.component.scss
+++ b/frontend/src/app/features/home/home.component.scss
@@ -8,6 +8,12 @@
 .hero {
   text-align: center;
   margin-bottom: var(--cc-space-7);
+  padding: var(--cc-space-7) var(--cc-space-5);
+  background: var(--cc-gradient-soft);
+  border: 1px solid var(--cc-border);
+  border-radius: var(--cc-radius-lg);
+  // Apparition festive au montage (neutralisée par prefers-reduced-motion).
+  animation: cc-rise var(--cc-dur-slow) var(--cc-ease-smooth) both;
 
   h1 {
     font-size: var(--cc-fs-h1);
@@ -15,7 +21,7 @@
     line-height: var(--cc-lh-tight);
     letter-spacing: -0.015em;
     margin: 0 0 var(--cc-space-3);
-    color: var(--cc-ink);
+    color: var(--cc-ink); // texte plein → contraste AA garanti
   }
 
   p {
@@ -30,6 +36,8 @@
   display: grid;
   gap: var(--cc-space-5);
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  // Apparition en cascade : voir l'utilitaire `.cc-stagger` (styles.scss),
+  // posé sur ce conteneur dans le template.
 }
 
 .state {
diff --git a/frontend/src/app/features/phase-guide/phase-guide.component.html b/frontend/src/app/features/phase-guide/phase-guide.component.html
index c41cd29..94c8913 100644
--- a/frontend/src/app/features/phase-guide/phase-guide.component.html
+++ b/frontend/src/app/features/phase-guide/phase-guide.component.html
@@ -5,7 +5,9 @@
     <div class="pg-header__title">
       <mat-icon class="pg-header__icon">{{ phase.icon }}</mat-icon>
       <h1>{{ phase.titre }}</h1>
-      <span class="badge" [class]="'badge--' + phase.roleKey">{{ phase.role }}</span>
+      <span class="badge" [class]="'badge--' + phase.roleKey">{{
+        phase.role
+      }}</span>
     </div>
     <p class="subtitle">
       Lisez chaque pratique et cochez ce qui est fait — votre progression est
@@ -16,17 +18,27 @@ <h1>{{ phase.titre }}</h1>
   <!-- Compteur de progression -->
   <div class="progress-panel">
     <div class="progress-panel__top">
-      <span class="progress-panel__count">{{ checkedCount() }}/{{ total() }} cochés</span>
-      <button mat-button color="warn" (click)="reset()" [disabled]="checkedCount() === 0">
+      <span class="progress-panel__count"
+        >{{ checkedCount() }}/{{ total() }} cochés</span
+      >
+      <button
+        mat-button
+        color="warn"
+        (click)="reset()"
+        [disabled]="checkedCount() === 0"
+      >
         <mat-icon>restart_alt</mat-icon>
         Réinitialiser
       </button>
     </div>
-    <mat-progress-bar mode="determinate" [value]="progress()"></mat-progress-bar>
+    <mat-progress-bar
+      mode="determinate"
+      [value]="progress()"
+    ></mat-progress-bar>
   </div>
 
   <!-- Pratiques : lecture + case à cocher -->
-  <div class="cards">
+  <div class="cards cc-stagger">
     @for (pratique of phase.pratiques; track pratique.id) {
       <mat-card
         class="practice"
diff --git a/frontend/src/app/features/phase-guide/phase-guide.component.scss b/frontend/src/app/features/phase-guide/phase-guide.component.scss
index f988450..c0be521 100644
--- a/frontend/src/app/features/phase-guide/phase-guide.component.scss
+++ b/frontend/src/app/features/phase-guide/phase-guide.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;
 }
 
 .pg-header {
@@ -39,7 +41,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;
@@ -97,16 +99,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 {
@@ -190,13 +196,16 @@
   background: var(--cc-surface);
   color: var(--cc-ink);
   text-decoration: none;
-  transition: border-color var(--cc-transition), box-shadow var(--cc-transition),
-    transform var(--cc-transition);
+  transition:
+    border-color 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);
   }
 
   // Le suivant reste collé à droite même quand le précédent est absent.
diff --git a/frontend/src/app/features/solid-detail/solid-detail.component.scss b/frontend/src/app/features/solid-detail/solid-detail.component.scss
index 6f60ebf..7a5ad66 100644
--- a/frontend/src/app/features/solid-detail/solid-detail.component.scss
+++ b/frontend/src/app/features/solid-detail/solid-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;
 }
 
 .sd-header {
@@ -19,10 +21,11 @@
     height: 3rem;
     flex-shrink: 0;
     border-radius: var(--cc-radius-md);
-    background: var(--cc-primary);
+    background: var(--cc-gradient-festive);
     color: var(--cc-on-primary);
     font-size: 1.6rem;
     font-weight: 700;
+    box-shadow: var(--cc-shadow-glow);
   }
 
   &__title {
@@ -149,7 +152,8 @@
   border: 1px solid var(--cc-border);
   border-radius: var(--cc-radius-sm);
   color: var(--cc-ink);
-  font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Courier New", monospace;
+  font-family:
+    'SFMono-Regular', 'Cascadia Code', Consolas, 'Courier New', monospace;
   font-size: 0.82rem;
   line-height: 1.55;
   overflow-x: auto;
@@ -180,12 +184,16 @@
   background: var(--cc-surface);
   color: var(--cc-ink);
   text-decoration: none;
-  transition: border-color var(--cc-transition), box-shadow var(--cc-transition);
+  transition:
+    border-color 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 {
diff --git a/frontend/src/app/features/solid/solid.component.html b/frontend/src/app/features/solid/solid.component.html
index 5758c45..3f3b81d 100644
--- a/frontend/src/app/features/solid/solid.component.html
+++ b/frontend/src/app/features/solid/solid.component.html
@@ -15,23 +15,27 @@ <h1>Les principes SOLID</h1>
     changement.
   </p>
   <p class="hero__body">
-    Popularisés par Robert C. Martin, ces cinq principes guident la façon dont on
-    découpe les responsabilités et organise les dépendances. Choisissez un
+    Popularisés par Robert C. Martin, ces cinq principes guident la façon dont
+    on découpe les responsabilités et organise les dépendances. Choisissez un
     principe ci-dessous pour le découvrir en détail : définition, problème
     résolu, exemples de code à éviter puis à préférer, et comment l'appliquer.
   </p>
 </section>
 
 <!-- Hub : une carte cliquable par principe -->
-<ul class="principles">
+<ul class="principles cc-stagger">
   @for (principle of principles; track principle.slug) {
     <li>
       <a class="principle-card" [routerLink]="['/solid', principle.slug]">
         <mat-card appearance="outlined" class="principle-card__inner">
           <mat-card-content>
             <div class="principle-card__top">
-              <span class="principle-card__letter" aria-hidden="true">{{ principle.lettre }}</span>
-              <mat-icon class="principle-card__icon" aria-hidden="true">{{ principle.icon }}</mat-icon>
+              <span class="principle-card__letter" aria-hidden="true">{{
+                principle.lettre
+              }}</span>
+              <mat-icon class="principle-card__icon" aria-hidden="true">{{
+                principle.icon
+              }}</mat-icon>
             </div>
             <h2 class="principle-card__title">{{ principle.nomFr }}</h2>
             <p class="principle-card__en">{{ principle.nomEn }}</p>
diff --git a/frontend/src/app/features/solid/solid.component.scss b/frontend/src/app/features/solid/solid.component.scss
index 82d49a3..051ec75 100644
--- a/frontend/src/app/features/solid/solid.component.scss
+++ b/frontend/src/app/features/solid/solid.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;
 }
 
 .solid-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);
@@ -56,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).
 }
 
 .principle-card {
@@ -68,17 +72,25 @@
   &__inner {
     height: 100%;
     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),
       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);
   }
 
+  // La lettre du principe « pétille » au survol.
+  &:hover &__letter,
+  &:focus-visible &__letter {
+    transform: rotate(-6deg) scale(1.08);
+  }
+
   &__top {
     display: flex;
     align-items: center;
@@ -93,10 +105,12 @@
     width: 2.75rem;
     height: 2.75rem;
     border-radius: var(--cc-radius-md);
-    background: var(--cc-primary);
+    background: var(--cc-gradient-festive);
     color: var(--cc-on-primary);
     font-size: 1.5rem;
     font-weight: 700;
+    box-shadow: var(--cc-shadow-glow);
+    transition: transform var(--cc-transition-bounce);
   }
 
   &__icon {
diff --git a/frontend/src/app/shared/components/tool-card/tool-card.component.scss b/frontend/src/app/shared/components/tool-card/tool-card.component.scss
index a1690e8..52e9fba 100644
--- a/frontend/src/app/shared/components/tool-card/tool-card.component.scss
+++ b/frontend/src/app/shared/components/tool-card/tool-card.component.scss
@@ -3,7 +3,9 @@
   display: flex;
   flex-direction: column;
   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),
     border-color var(--cc-transition);
 
   mat-card-content {
@@ -11,16 +13,22 @@
   }
 }
 
-// Survol & focus clavier (focus-within) : même retour visuel, cuivre.
+// Survol & focus clavier (focus-within) : lift joueur + halo festif, cuivre→rose.
 .tool-card:not(.tool-card--disabled):hover,
 .tool-card:not(.tool-card--disabled):focus-within {
-  transform: translateY(-4px);
+  transform: translateY(-6px) scale(1.015);
   box-shadow: var(--cc-shadow-2);
   border-color: var(--cc-primary);
 }
 
+// L'avatar « pétille » quand la carte est survolée/focalisée.
+.tool-card:not(.tool-card--disabled):hover .tool-card__avatar,
+.tool-card:not(.tool-card--disabled):focus-within .tool-card__avatar {
+  transform: rotate(-6deg) scale(1.08);
+}
+
 .tool-card:not(.tool-card--disabled):active {
-  transform: translateY(-1px);
+  transform: translateY(-2px) scale(1);
 }
 
 .tool-card--disabled {
@@ -31,8 +39,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--cc-primary);
+  background: var(--cc-gradient-festive);
   color: var(--cc-on-primary);
+  box-shadow: var(--cc-shadow-glow);
+  transition: transform var(--cc-transition-bounce);
 
   mat-icon {
     color: var(--cc-on-primary);
@@ -48,6 +58,6 @@
   font-size: 0.72rem;
   font-weight: 600;
   padding: var(--cc-space-1) var(--cc-space-3);
-  border-radius: 999px;
+  border-radius: var(--cc-radius-pill);
   white-space: nowrap;
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index eed62f0..6a65f65 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,42 +1,58 @@
 /* =============================================================================
-   CraftCode — Design system (atelier / artisan du code)
+   CraftCode — Design system (festif / convivial / vivant)
    Source unique de vérité : tokens CSS + thème Material personnalisé + bases.
    Aucune couleur en dur ailleurs : tout passe par les variables --cc-* / --mat-sys-*.
+   Les seules valeurs littérales (#hex, px, rgba, ms, cubic-bezier) vivent ICI,
+   dans la définition des tokens. Partout ailleurs : var(--cc-*).
    ========================================================================== */
 
 :root {
-  /* ---- Couleurs de marque (établi / cuivre / papier) -------------------- */
-  --cc-bg: #FAF9F7;
-  --cc-surface: #FFFFFF;
-  --cc-surface-2: #F4F1EC;
-  --cc-border: #E7E2DB;
-  --cc-ink: #1C1917;
-  --cc-ink-soft: #57534E;
-
-  --cc-primary: #B45309;
-  --cc-primary-hover: #92400E;
-  --cc-on-primary: #FFFFFF;
-
-  --cc-accent: #0F766E;        /* patine — actions secondaires */
-  --cc-success: #15803D;
-  --cc-warn: #B91C1C;
+  /* ---- Couleurs de marque (fête : framboise, violet, mandarine) --------- */
+  --cc-bg: #fff8fb; /* blanc chaud légèrement rosé */
+  --cc-surface: #ffffff;
+  --cc-surface-2: #fdeff6; /* surface festive douce */
+  --cc-border: #f3dce8;
+  --cc-ink: #2a1422; /* prune très sombre — contraste AA élevé */
+  --cc-ink-soft: #6b5160;
+
+  --cc-primary: #d81b60; /* framboise vive — blanc dessus = AA (~4.6:1) */
+  --cc-primary-hover: #ad1457;
+  --cc-on-primary: #ffffff;
+
+  --cc-accent: #7c3aed; /* violet festif — actions secondaires */
+  --cc-success: #16a34a;
+  --cc-warn: #dc2626;
 
   /* Teintes douces dérivées (conteneurs, surfaces actives) */
-  --cc-primary-tint: #FBEEDD;  /* fond cuivre très clair */
-  --cc-accent-tint: #E2F1EF;   /* fond patine très clair */
+  --cc-primary-tint: #fce1ec; /* fond framboise très clair */
+  --cc-accent-tint: #ece3fd; /* fond violet très clair */
+  --cc-festive-tint: #ffebd6; /* fond mandarine très clair (dégradés joyeux) */
+
+  /* Dégradés festifs (composés à partir des tokens de couleur) */
+  --cc-gradient-festive: linear-gradient(
+    120deg,
+    var(--cc-primary),
+    var(--cc-accent)
+  );
+  --cc-gradient-soft: linear-gradient(
+    120deg,
+    var(--cc-primary-tint),
+    var(--cc-festive-tint) 55%,
+    var(--cc-accent-tint)
+  );
 
   /* ---- Badges de rôle (texte + teinte, jamais la couleur seule) --------- */
-  --cc-role-equipe: #475569;       /* ardoise */
-  --cc-role-auteur: #B45309;
-  --cc-role-relecteur: #0F766E;
-  --cc-role-mixte: #7C3AED;
-  --cc-role-equipe-tint: #EEF1F5;
-  --cc-role-auteur-tint: #FBEEDD;
-  --cc-role-relecteur-tint: #E2F1EF;
-  --cc-role-mixte-tint: #F1ECFC;
+  --cc-role-equipe: #475569; /* ardoise (neutre, distinct) */
+  --cc-role-auteur: #c2410c; /* mandarine */
+  --cc-role-relecteur: #0d9488; /* turquoise */
+  --cc-role-mixte: #7c3aed; /* violet */
+  --cc-role-equipe-tint: #eef1f5;
+  --cc-role-auteur-tint: #ffe7d6;
+  --cc-role-relecteur-tint: #d7f4ef;
+  --cc-role-mixte-tint: #ece3fd;
 
   /* ---- Typographie ------------------------------------------------------ */
-  --cc-font: Roboto, "Helvetica Neue", system-ui, -apple-system, sans-serif;
+  --cc-font: Roboto, 'Helvetica Neue', system-ui, -apple-system, sans-serif;
   --cc-fs-h1: clamp(1.8rem, 4vw, 2.6rem);
   --cc-fs-h2: 1.4rem;
   --cc-fs-h3: 1.1rem;
@@ -44,7 +60,7 @@
   --cc-fs-small: 0.875rem;
   --cc-lh-body: 1.6;
   --cc-lh-tight: 1.3;
-  --cc-measure: 70ch;          /* largeur de lecture max pour la prose */
+  --cc-measure: 70ch; /* largeur de lecture max pour la prose */
 
   /* ---- Espacement (base 4px) ------------------------------------------- */
   --cc-space-1: 4px;
@@ -56,17 +72,28 @@
   --cc-space-7: 48px;
   --cc-space-8: 64px;
 
-  /* ---- Rayons ----------------------------------------------------------- */
-  --cc-radius-sm: 8px;
-  --cc-radius-md: 14px;
-  --cc-radius-lg: 22px;
+  /* ---- Rayons (généreux, joyeux) --------------------------------------- */
+  --cc-radius-sm: 10px;
+  --cc-radius-md: 18px;
+  --cc-radius-lg: 28px;
+  --cc-radius-pill: 999px;
 
-  /* ---- Ombres (douces, diffuses) --------------------------------------- */
-  --cc-shadow-1: 0 1px 2px rgba(28, 25, 23, 0.05), 0 2px 8px rgba(28, 25, 23, 0.06);
-  --cc-shadow-2: 0 10px 30px rgba(28, 25, 23, 0.12);
+  /* ---- Ombres (expressives, teintées de marque) ----------------------- */
+  --cc-shadow-1:
+    0 1px 2px rgba(42, 20, 34, 0.06), 0 4px 14px rgba(42, 20, 34, 0.08);
+  --cc-shadow-2: 0 16px 40px rgba(216, 27, 96, 0.22); /* lift framboise */
+  --cc-shadow-glow: 0 10px 30px rgba(124, 58, 237, 0.28); /* halo violet */
 
   /* ---- Mouvement -------------------------------------------------------- */
-  --cc-transition: 160ms ease;
+  --cc-dur-fast: 130ms;
+  --cc-dur: 220ms;
+  --cc-dur-slow: 460ms;
+  --cc-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1); /* sortie fluide */
+  --cc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* rebond joueur */
+  --cc-transition: var(--cc-dur) var(--cc-ease-smooth); /* composite défaut */
+  --cc-transition-fast: var(--cc-dur-fast) var(--cc-ease-smooth);
+  --cc-transition-bounce: var(--cc-dur) var(--cc-ease-bounce);
+  --cc-stagger: 70ms; /* pas de décalage pour l'apparition en cascade */
 
   /* ---- Layout ----------------------------------------------------------- */
   --cc-toolbar-h: 64px;
@@ -80,20 +107,20 @@
   --mat-sys-primary: var(--cc-primary);
   --mat-sys-on-primary: var(--cc-on-primary);
   --mat-sys-primary-container: var(--cc-primary-tint);
-  --mat-sys-on-primary-container: #6B3000;
+  --mat-sys-on-primary-container: #6a0033;
 
   --mat-sys-secondary: var(--cc-accent);
-  --mat-sys-on-secondary: #FFFFFF;
+  --mat-sys-on-secondary: #ffffff;
   --mat-sys-secondary-container: var(--cc-accent-tint);
-  --mat-sys-on-secondary-container: #06403B;
+  --mat-sys-on-secondary-container: #3a0b7a;
 
   --mat-sys-tertiary: var(--cc-accent);
-  --mat-sys-on-tertiary: #FFFFFF;
+  --mat-sys-on-tertiary: #ffffff;
   --mat-sys-tertiary-container: var(--cc-accent-tint);
-  --mat-sys-on-tertiary-container: #06403B;
+  --mat-sys-on-tertiary-container: #06403b;
 
   --mat-sys-error: var(--cc-warn);
-  --mat-sys-on-error: #FFFFFF;
+  --mat-sys-on-error: #ffffff;
 
   --mat-sys-background: var(--cc-bg);
   --mat-sys-on-background: var(--cc-ink);
@@ -162,12 +189,54 @@ body {
   top: var(--cc-space-3);
 }
 
-/* Respect des préférences de mouvement réduit. */
+/* ====================== Animations réutilisables ========================
+   Keyframes globales (non scopées) consommées par les composants via
+   `animation: cc-rise …`. Neutralisées par le bloc reduced-motion ci-dessous. */
+
+/* Apparition en fondu + translation (montage des grilles, héros). */
+@keyframes cc-rise {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* Petit « pop » joueur (avatars, pastilles). */
+@keyframes cc-pop {
+  from {
+    transform: scale(0.6);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+/* Apparition en cascade : à poser sur un conteneur de grille (`cc-stagger`).
+   Chaque enfant direct monte en fondu avec un décalage croissant. Centralisé
+   ici (plutôt que dupliqué par composant) pour rester sobre côté budgets SCSS.
+   Couvre jusqu'à 12 éléments (la plus grande famille de patrons GoF). */
+.cc-stagger > * {
+  animation: cc-rise var(--cc-dur-slow) var(--cc-ease-smooth) both;
+}
+
+@for $i from 1 through 12 {
+  .cc-stagger > *:nth-child(#{$i}) {
+    animation-delay: calc(var(--cc-stagger) * #{$i - 1});
+  }
+}
+
+/* Respect des préférences de mouvement réduit — neutralise TOUTE animation
+   (y compris les nouvelles : apparitions, rebonds, décalages en cascade). */
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
     animation-duration: 0.01ms !important;
+    animation-delay: 0ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
     scroll-behavior: auto !important;