@cnamts/synapse 1.0.7 → 1.0.9

package/src/stories/Accessibilite/KitDePreAudit/Outils/Introduction.mdx

@@ -1,4 +1,5 @@
 import { Meta } from '@storybook/blocks';
+import '../../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Introduction" />
 
@@ -32,7 +33,6 @@ import { Meta } from '@storybook/blocks';
       color: white;
       position: relative;
       overflow: hidden;
-      box-shadow: var(--shadow-lg);
     }
     
     .header-container::before {
@@ -46,32 +46,7 @@ import { Meta } from '@storybook/blocks';
       opacity: 0.3;
     }
     
-    .header-title {
-      font-size: 3.5rem;
-      font-weight: 800;
-      margin: 0;
-      line-height: 1.1;
-      position: relative;
-      display: inline-block;
-    }
-    
-    .header-title::after {
-      content: '';
-      position: absolute;
-      bottom: -10px;
-      left: 0;
-      width: 80px;
-      height: 4px;
-    border-radius: 3px;
-    }
-    
-    .header-subtitle {
-      font-size: 1.2rem;
-      margin-top: 1.5rem;
-      max-width: 80%;
-      line-height: 1.6;
-      opacity: 0.9;
-    }
+       
     
     /* Card styles */
     .tool-cards-container {
@@ -84,18 +59,11 @@ import { Meta } from '@storybook/blocks';
     .tool-card {
       background: white;
       border-radius: var(--border-radius-md);
-      box-shadow: var(--shadow-sm);
       padding: 1.5rem;
-      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
       position: relative;
       overflow: hidden;
     }
     
-    .tool-card:hover {
-      transform: translateY(-5px);
-      box-shadow: var(--shadow-md);
-    }
-    
     .tool-card::before {
       content: '';
       position: absolute;
@@ -104,7 +72,6 @@ import { Meta } from '@storybook/blocks';
       width: 100%;
       height: 100%;
       opacity: 0;
-      transition: opacity var(--transition-normal);
       z-index: 0;
     }
     
@@ -163,7 +130,6 @@ import { Meta } from '@storybook/blocks';
       color: var(--primary-color);
       text-decoration: none;
       font-weight: 500;
-      transition: color var(--transition-fast);
       position: relative;
     }
     
@@ -176,28 +142,17 @@ import { Meta } from '@storybook/blocks';
       height: 2px;
       background-color: var(--primary-color);
       transform: scaleX(0);
-      transform-origin: right;
-      transition: transform var(--transition-normal);
     }
     
     .tool-card-link:hover {
       color: var(--secondary-color);
     }
     
-    .tool-card-link:hover::after {
-      transform: scaleX(1);
-      transform-origin: left;
-    }
-    
     .tool-card-link-icon {
       margin-left: 0.5rem;
       transition: transform var(--transition-fast);
     }
     
-    .tool-card-link:hover .tool-card-link-icon {
-      transform: translateX(3px);
-    }
-    
     /* Section styles */
     .section {
       margin: 3rem 0;
@@ -311,9 +266,9 @@ import { Meta } from '@storybook/blocks';
   `}
 </style>
 
-<div className="header-container">
-  <h1 className="header-title">Outils d'accessibilité</h1>
-  <p className="header-subtitle">
+<div className="header">
+  <h1>Outils d'accessibilité</h1>
+  <p>
     Découvrez les outils essentiels pour vérifier la conformité de vos interfaces aux normes d'accessibilité dans le cadre du pré-audit et de l'audit.
   </p>
 </div>

package/src/stories/Accessibilite/KitDePreAudit/Outils/LecteursDEcran.mdx

@@ -1,4 +1,5 @@
 import {Meta} from '@storybook/blocks';
+import '../../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Lecteurs d'écran"/>
 
@@ -33,44 +34,7 @@ import {Meta} from '@storybook/blocks';
       margin: 0 auto;
     }
     
-    /* Header avec effet glassmorphism */
-    .screen-reader-header {
-      border-radius: var(--border-radius-lg);
-      padding: 2rem;
-      margin-bottom: 2rem;
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--shadow-lg);
-    }
-    
-    .screen-reader-header::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgzMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSI+PC9yZWN0Pjwvc3ZnPg==');
-      opacity: 0.1;
-      z-index: 0;
-    }
-    
-    .screen-reader-header h1 {
-      font-size: 3rem;
-      margin: 0;
-      position: relative;
-      z-index: 1;
-      font-weight: 700;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    
-    .screen-reader-header p {
-      font-size: 1.2rem;
-      margin-top: 1rem;
-      position: relative;
-      z-index: 1;
-      max-width: 800px;
-    }
+          
     
     /* Sections */
     .screen-reader-section {
@@ -79,11 +43,9 @@ import {Meta} from '@storybook/blocks';
       border-radius: var(--border-radius-lg);
       padding: 2rem;
       box-shadow: var(--shadow-md);
-      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
     }
     
     .screen-reader-section:hover {
-      transform: translateY(-5px);
       box-shadow: var(--shadow-lg);
     }
     
@@ -157,7 +119,6 @@ import {Meta} from '@storybook/blocks';
       text-decoration: none;
       font-weight: 500;
       position: relative;
-      transition: color var(--transition-normal);
     }
     
     .screen-reader-link::after {
@@ -170,7 +131,6 @@ import {Meta} from '@storybook/blocks';
       background: linear-gradient(90deg, var(--primary-color), transparent);
       transform: scaleX(0);
       transform-origin: left;
-      transition: transform var(--transition-normal);
     }
     
     .screen-reader-link:hover {
@@ -194,13 +154,11 @@ import {Meta} from '@storybook/blocks';
       border-radius: var(--border-radius-md);
       overflow: hidden;
       box-shadow: var(--shadow-sm);
-      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
       display: flex;
       flex-direction: column;
     }
     
     .screen-reader-card:hover {
-      transform: translateY(-5px);
       box-shadow: var(--shadow-md);
     }
     
@@ -240,7 +198,6 @@ import {Meta} from '@storybook/blocks';
       margin-bottom: 0.75rem;
       padding: 0.5rem;
       border-radius: var(--border-radius-sm);
-      transition: background-color var(--transition-fast);
     }
     
     .shortcut-item:hover {
@@ -300,7 +257,7 @@ import {Meta} from '@storybook/blocks';
 </style>
 
 <div className="screen-reader-page">
-  <div className="screen-reader-header">
+  <div className="header">
     <h1>Guide lecteurs d'écran</h1>
     <p>Comprendre et utiliser les lecteurs d'écran pour tester l'accessibilité de vos interfaces</p>
   </div>

package/src/stories/Accessibilite/KitDePreAudit/Outils/Tanaguru/FauxPositifs.mdx

@@ -1,5 +1,6 @@
 import { Story, Meta } from '@storybook/blocks';
 import * as FauxPositifsStories from './FauxPositifs.stories';
+import '../../../../styles/shared.css';
 
 <Meta of={FauxPositifsStories} />
 
@@ -34,44 +35,7 @@ import * as FauxPositifsStories from './FauxPositifs.stories';
       margin: 0 auto;
     }
 
-    /* Header avec effet glassmorphism */
-    .tanaguru-header {
-      border-radius: var(--border-radius-lg);
-      padding: 2rem;
-      margin-bottom: 2rem;
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--shadow-lg);
-    }
-
-    .tanaguru-header::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgzMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSI+PC9yZWN0Pjwvc3ZnPg==');
-      opacity: 0.1;
-      z-index: 0;
-    }
-
-    .tanaguru-header h1 {
-      font-size: 3rem;
-      margin: 0;
-      position: relative;
-      z-index: 1;
-      font-weight: 700;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-
-    .tanaguru-header p {
-      font-size: 1.2rem;
-      margin-top: 1rem;
-      position: relative;
-      z-index: 1;
-      max-width: 800px;
-    }
+       
 
     /* Responsive */
     @media (max-width: 768px) {
@@ -87,7 +51,7 @@ import * as FauxPositifsStories from './FauxPositifs.stories';
 </style>
 
 <div className="tanaguru-page">
-  <div className="tanaguru-header">
+  <div className="header">
     <h1>Faux positifs de Tanaguru</h1>
     <p>Au cours de nos analyses avec l’outil Tanaguru, nous avons constaté que certains résultats signalés comme des erreurs étaient en réalité des faux positifs. Cette page a pour objectif de présenter ces cas et de clarifier pourquoi ils ne constituent pas de réels problèmes d’accessibilité.</p>
   </div>

package/src/stories/Accessibilite/KitDePreAudit/Outils/Tanaguru/Utilisation.mdx

@@ -1,4 +1,5 @@
 import {Meta} from '@storybook/blocks';
+import '../../../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Outils/Tanaguru/Utilisation"/>
 
@@ -33,44 +34,7 @@ import {Meta} from '@storybook/blocks';
       margin: 0 auto;
     }
     
-    /* Header avec effet glassmorphism */
-    .tanaguru-header {
-      border-radius: var(--border-radius-lg);
-      padding: 2rem;
-      margin-bottom: 2rem;
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--shadow-lg);
-    }
-    
-    .tanaguru-header::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSgzMCkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSI+PC9yZWN0PjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSI+PC9yZWN0Pjwvc3ZnPg==');
-      opacity: 0.1;
-      z-index: 0;
-    }
-    
-    .tanaguru-header h1 {
-      font-size: 3rem;
-      margin: 0;
-      position: relative;
-      z-index: 1;
-      font-weight: 700;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    }
-    
-    .tanaguru-header p {
-      font-size: 1.2rem;
-      margin-top: 1rem;
-      position: relative;
-      z-index: 1;
-      max-width: 800px;
-    }
+       
     
     /* Sections */
     .tanaguru-section {
@@ -78,14 +42,8 @@ import {Meta} from '@storybook/blocks';
       background: white;
       border-radius: var(--border-radius-lg);
       padding: 2rem;
-      box-shadow: var(--shadow-md);
-      transition: transform var(--transition-normal), box-shadow var(--transition-normal);
-    }
-    
-    .tanaguru-section:hover {
-      transform: translateY(-5px);
-      box-shadow: var(--shadow-lg);
     }
+  
     
     .tanaguru-section h2 {
       color: var(--primary-color);
@@ -113,21 +71,14 @@ import {Meta} from '@storybook/blocks';
       border-radius: var(--border-radius-md);
       overflow: hidden;
       margin: 1.5rem 0;
-      box-shadow: var(--shadow-md);
-      transition: transform var(--transition-normal);
       max-width: 100%;
     }
     
-    .tanaguru-image:hover {
-      transform: scale(1.02);
-    }
-    
     .tanaguru-image img {
       width: 100%;
       display: block;
       padding: 0 !important;
       border: none !important;
-      box-shadow: none !important;
     }
     
     /* Étapes */
@@ -151,7 +102,6 @@ import {Meta} from '@storybook/blocks';
       justify-content: center;
       font-weight: bold;
       font-size: 1.2rem;
-      box-shadow: var(--shadow-sm);
     }
     
     .tanaguru-step h3 {
@@ -252,7 +202,7 @@ import {Meta} from '@storybook/blocks';
 </style>
 
 <div className="tanaguru-page">
-  <div className="tanaguru-header">
+  <div className="header">
     <h1>Tanaguru</h1>
     <p>Un outil d'audit d'accessibilité puissant pour évaluer la conformité RGAA de vos sites web</p>
   </div>

package/src/stories/Accessibilite/KitDePreAudit/Preaudit.mdx

@@ -1,4 +1,5 @@
 import {Meta} from '@storybook/blocks';
+import '../../styles/shared.css';
 
 <Meta title="Accessibilité/Kit de pré-audit/Pré-audit"/>
 
@@ -29,45 +30,7 @@ import {Meta} from '@storybook/blocks';
     --transition: all 0.3s ease;
   }
 
-  .preaudit-header {
-    color: white;
-    padding: 2.5rem;
-    border-radius: var(--radius-lg);
-    margin-bottom: 2.5rem;
-    box-shadow: var(--shadow-lg);
-    position: relative;
-    overflow: hidden;
-  }
-  
-  .preaudit-header::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 100%;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 50%;
-    z-index: 0;
-  }
-  
-  .preaudit-header h1 {
-    margin-top: 0;
-    font-size: 2.75rem;
-    font-weight: 800;
-    letter-spacing: -0.5px;
-    position: relative;
-    z-index: 1;
-  }
-  
-  .preaudit-header p {
-    font-size: 1.2rem;
-    margin-bottom: 0;
-    opacity: 0.9;
-    position: relative;
-    z-index: 1;
-    font-weight: 300;
-  }
+        
   
   .info-section {
     margin: 2.5rem 0;
@@ -79,11 +42,6 @@ import {Meta} from '@storybook/blocks';
     border: 1px solid var(--neutral-300);
   }
   
-  .info-section:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-  }
-  
   .info-section h2 {
     position: relative;
     padding-bottom: 0.75rem;
@@ -130,11 +88,6 @@ import {Meta} from '@storybook/blocks';
     position: relative;
   }
   
-  .verification-card:hover {
-    box-shadow: var(--shadow-md);
-    transform: translateY(-2px);
-  }
-  
   .verification-card::before {
     content: '';
     position: absolute;
@@ -232,8 +185,8 @@ import {Meta} from '@storybook/blocks';
 }
 </style>
 
-<div className="preaudit-header">
-  <h1>📝 Pré-audit d'accessibilité</h1>
+<div className="header">
+  <h1>Pré-audit d'accessibilité</h1>
   <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
 </div>
 

package/src/stories/Accessibilite/Vuetify/Vuetify.mdx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/addon-docs';
 import * as AccessStories from './Vuetify.stories';
+import '../../styles/shared.css';
 
 <Meta of={AccessStories} />
 
@@ -30,16 +31,7 @@ import * as AccessStories from './Vuetify.stories';
       padding: 0 1rem;
     }
     
-    /* Header avec effet glassmorphism */
-    .vuetify-header {
-      padding: 2rem;
-      border-radius: var(--border-radius);
-      margin-bottom: 2rem;
-      position: relative;
-      overflow: hidden;
-      box-shadow: var(--card-shadow);
-    }
-    
+       
     .section-title {
       color: var(--primary-color);
       font-size: 1.5rem;
@@ -128,7 +120,7 @@ import * as AccessStories from './Vuetify.stories';
 </style>
 
 <div className="vuetify-container">
-  <div className="vuetify-header">
+  <div className="header">
     <h1>Audit d'accessibilité des composants Vuetify</h1>
     <p>Tableau de bord de l'état d'accessibilité des composants Vuetify</p>
   </div>

package/src/stories/Accessibilite/Vuetify/Vuetify.stories.ts

@@ -92,7 +92,7 @@ export const VuetifyPanel: StoryObj = {
 
 				// Détermine l'icône du composant selon son statut
 				const getComponentIcon = (item) => {
-					return getComponentStatus(item) === 'conform' ? checkIcon : iconAlert
+					return getComponentStatus(item) === 'conform' || getComponentStatus(item) === 'alternative' ? checkIcon : iconAlert
 				}
 
 				// Filtrage des composants par conformité
@@ -213,7 +213,7 @@ export const VuetifyPanel: StoryObj = {
 								Composant natif non conforme
 							</VChip>
 							<VChip class="mr-2 mb-2" color="#a05bb6" variant="outlined">
-								<VIcon size="small" class="mr-1" :icon="iconAlert"></VIcon>
+								<VIcon size="small" class="mr-1" :icon="checkIcon"></VIcon>
 								Composant alternatif conforme
 							</VChip>
 						</div>

package/src/stories/Accessibilite/Vuetify/VuetifyItems.ts

@@ -163,9 +163,12 @@ export const VuetifyItems = [
 				errorIndeterminated: [
 
 				],
-				solution: [{
-					name: 'En étude',
-				}],
+				solution: [
+					{
+						name: 'SyTabs',
+						href: '/?path=/docs/composants-navigation-sytabs--docs',
+					},
+				],
 			},
 			{
 				name: 'Textarea',

package/src/stories/Components/Components.stories.ts

@@ -10,7 +10,7 @@ export const Header: StoryObj = {
 		return {
 			template: `
         <div class="mb-8">
-          <h1 class="mb-4">Composants</h1>
+          <h1 class="text-h4 title font-weight-bold mb-4">Composants</h1>
           <p class="text-body-1">Découvrez notre collection de composants réutilisables conçus pour créer des interfaces utilisateur cohérentes et accessibles.</p>
         </div>
       `,

package/src/stories/Demarrer/CreerUneIssue.mdx

@@ -1,9 +1,12 @@
 import {Meta, Story} from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './components.stories.ts';
+import '../styles/shared.css';
 
 <Meta of={ComponentStories}/>
 
-# Créer une issue
+<div className="header">
+    <h1>Créer une issue</h1>
+</div>
 
 ## Introduction
 

package/src/stories/Demarrer/PolitiqueDeConfidentialite.mdx

@@ -3,7 +3,5 @@ import * as PolitiqueDeConfidentialiteStories from './PolitiqueDeConfidentialite
 
 <Meta of={PolitiqueDeConfidentialiteStories} />
 
-# Politique de confidentialité
-
 <Story of={PolitiqueDeConfidentialiteStories.Default}  />
 

package/src/stories/Demarrer/PolitiqueDeConfidentialite.stories.ts

@@ -10,6 +10,9 @@ export const Default: StoryObj = {
 		return {
 			components: { VCard },
 			template: `
+			    <div class="d-flex justify-space-between align-center">
+                  <h1 class="title font-weight-medium mb-5">Politique de confidentialité</h1>
+              </div>
                <VCard class="mt-4 pa-2">
                 <iframe src="https://assurancemaladiesec.github.io/abuse/reporting/" width="100%" height="800px" frameBorder="0"></iframe>
                </VCard>

package/src/stories/Demarrer/Releases.mdx

@@ -3,6 +3,4 @@ import * as ReleasesStories from './Releases.stories.ts';
 
 <Meta of={ReleasesStories}/>
 
-# Releases
-
 <Story of={ReleasesStories.List}/>

package/src/stories/Demarrer/Releases.stories.ts

@@ -46,6 +46,9 @@ export const List = {
 				}
 			},
 			template: `
+			   <div class="d-flex justify-space-between align-center">
+                  <h1 class="title font-weight-medium mb-5">Releases</h1>
+              </div>
 				<div class="releases">
 					<SyAlert type="info" variant="tonal" :closable="false">
 						<template #default>Nous faisons des nouvelles release (correction de bugs ou nouvelles fonctionnalités) régulièrement. Vous pouvez retrouver la liste des dernières releases ci-dessous.</template>

package/src/stories/DesignTokens/Arrondis.mdx

@@ -1,8 +1,14 @@
 import { Meta } from "@storybook/blocks";
+import '../styles/shared.css';
 
 <Meta title="Design Tokens/Arrondis" />
 
-# Arrondis
+
+
+<div className="header">
+  <h1>Les arrondis</h1>
+  <p>Les arrondis disponibles dans notre Design System.</p>
+</div>
 
 Les angles des éléments permettent de créer du contraste entre les formes et de suggérer l’utilisation des composants
 

package/src/stories/DesignTokens/Colors.mdx

@@ -1,9 +1,15 @@
 import { Story, Meta } from '@storybook/blocks';
 import * as ColorsStories from './colors.stories';
+import '../styles/shared.css';
 
 <Meta title="Design Tokens/Couleurs" />
 
-# Couleurs
+
+<div className="header">
+  <h1>Couleurs</h1>
+  <p>Les couleurs disponibles dans notre Design System.</p>
+</div>
+
 <Story of={ColorsStories.Theme} />
 
 <Story of={ColorsStories.ColorIntegration} />

package/src/stories/DesignTokens/Conteneurs.mdx

@@ -1,9 +1,14 @@
 import { Meta, Story } from "@storybook/blocks";
 import * as ConteneursStories from './Conteneurs.stories';
+import '../styles/shared.css';
 
 <Meta title="Design Tokens/Conteneurs de page" />
 
-# Conteneurs de page
+
+<div className="header">
+  <h1>Conteneurs de page</h1>
+  <p>Les conteneurs de page disponibles dans notre Design System.</p>
+</div>
 
 ## Desktop
 

package/src/stories/DesignTokens/Elevations.mdx

@@ -1,8 +1,14 @@
 import { Meta } from "@storybook/blocks";
+import '../styles/shared.css';
 
 <Meta title="Design Tokens/Elévations" />
 
-# Elévations
+
+
+<div className="header">
+  <h1>Les élévations</h1>
+  <p>Les élévations disponibles dans notre Design System.</p>
+</div>
 
 <b>Les plateformes de l’Assurance Maladie n’utilisent pas d’élévations à but esthétiques.</b><br/>
 L’élévation est à utiliser pour représenter des interactions avec superposition, comme un élément fixe se positionnant au-dessus d’un élément scrollable, un bouton flottant...