@cnamts/synapse 1.0.24 → 1.0.26

package/src/designTokens/tokens/pa/paSemantic.ts

@@ -14,7 +14,7 @@ export const paSemanticTokens = {
 			info: paColorsTokens.blue.lighten80,
 			infoSubdued: paColorsTokens.blue.lighten90,
 			infoContrasted: paColorsTokens.blue.base,
-			success: paColorsTokens.orange.darken40,
+			success: paColorsTokens.turquoise.lighten80,
 			successSubdued: paColorsTokens.turquoise.lighten90,
 			successContrasted: paColorsTokens.green.base,
 			warning: paColorsTokens.yellow.lighten80,
@@ -87,7 +87,7 @@ export const paSemanticTokens = {
 			selectionPressed: paColorsTokens.blue.lighten80,
 			selectionSelected: paColorsTokens.blue.lighten90,
 			selectionHoverOnSelected: paColorsTokens.blue.lighten80,
-			selectionselectedAccent: paColorsTokens.blue.base,
+			selectionSelectedAccent: paColorsTokens.blue.base,
 			selectionHoverOnSelectedAccent: paColorsTokens.blue.lighten20,
 			selectionDisabled: paColorsTokens.white.base,
 		},

package/src/designTokens/utils/buildColorClassMap.ts

@@ -0,0 +1,34 @@
+function toKebabCase(value: string): string {
+	return value
+		.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+		.replace(/([a-zA-Z])(\d)/g, '$1-$2')
+		.replace(/_/g, '-')
+		.toLowerCase()
+}
+
+/**
+ * Generates a flat class-name → hex value map from a color token object.
+ *
+ * Example:
+ *   { apBlue: { base: '#0C419A', darken1: '#00749C' } }
+ *   →
+ *   { 'ap-blue': '#0c419a', 'ap-blue-darken-1': '#00749c' }
+ *
+ * The 'base' variation is dropped from the class name (e.g. apBlue.base → ap-blue).
+ * Numeric suffixes in variation names are separated with a dash (darken1 → darken-1).
+ */
+export function buildColorClassMap<T extends Record<string, Record<string, string>>>(tokens: T): Record<string, string> {
+	const map: Record<string, string> = {}
+
+	for (const [colorName, colorValues] of Object.entries(tokens)) {
+		for (const [variationName, colorValue] of Object.entries(colorValues)) {
+			const rawClass = `${colorName}-${variationName}`
+				.replace(/(\d+)/, '-$1')
+				.replace('-base', '')
+
+			map[toKebabCase(rawClass)] = colorValue.toLowerCase()
+		}
+	}
+
+	return map
+}

package/src/designTokens/utils/convertSemanticsToken.ts

@@ -14,19 +14,16 @@ type ThemeVariables = {
 export const generateThemeVariables = (tokens: Tokens): ThemeVariables => {
 	const themeVariables: ThemeVariables = {}
 
-	// Parcourir les catégories de couleurs
-	for (const category in tokens.colors) {
-		if (Object.prototype.hasOwnProperty.call(tokens.colors, category)) {
-			const categoryTokens = tokens.colors[category]
-
-			// Parcourir les tokens de chaque catégorie
-			for (const token in categoryTokens) {
-				if (Object.prototype.hasOwnProperty.call(categoryTokens, token)) {
-					const variableName = `on${category.charAt(0).toUpperCase() + category.slice(1)}${token.charAt(0).toUpperCase() + token.slice(1)}`
-					themeVariables[variableName] = categoryTokens[token]!
-				}
+	for (const [category, categoryTokens] of Object.entries(tokens.colors)) {
+		for (const [token, tokenValue] of Object.entries(categoryTokens)) {
+			if (tokenValue === undefined) {
+				throw new Error(`Missing semantic token "${token}" in category "${category}"`)
 			}
+
+			const variableName = `on${category.charAt(0).toUpperCase() + category.slice(1)}${token.charAt(0).toUpperCase() + token.slice(1)}`
+			themeVariables[variableName] = tokenValue
 		}
 	}
+
 	return themeVariables
 }

package/src/designTokens/utils/createFlattenTheme.ts

@@ -1,19 +1,27 @@
 type Theme = { [key: string]: string | number | Theme }
 
-export const createFlattenTheme = (theme: Theme) => {
-	const result: { [key: string]: string | number } = {}
+const isThemeBranch = (value: string | number | Theme): value is Theme =>
+	typeof value === 'object' && value !== null
+
+export const createFlattenTheme = (theme: Theme): Record<string, string | number> => {
+	const result: Record<string, string | number> = {}
 	const flatten = (obj: Theme, prefix = '') => {
-		for (const key in obj) {
-			const value = obj[key]
+		for (const [key, value] of Object.entries(obj)) {
 			const newKey: string = prefix ? `${prefix}-${key}` : key
-			if (typeof value === 'object' && value !== null) {
-				flatten(value as Theme, newKey)
+
+			if (value === undefined) {
+				throw new Error(`Missing theme value for key "${newKey}"`)
+			}
+
+			if (isThemeBranch(value)) {
+				flatten(value, newKey)
 			}
 			else {
-				result[newKey] = value!
+				result[newKey] = value
 			}
 		}
 	}
+
 	flatten(theme)
 	return result
 }

package/src/designTokens/utils/index.ts

@@ -1,5 +1,5 @@
 import { createFlattenTheme } from './createFlattenTheme'
-import { convertGaps } from './convertGaps'
 import { createFontVariables } from './createFontVariables'
+import { buildColorClassMap } from './buildColorClassMap'
 
-export { createFlattenTheme, convertGaps, createFontVariables }
+export { createFlattenTheme, createFontVariables, buildColorClassMap }

package/src/stories/Accessibilite/Aculturation/SensibilisationAccessibilite.mdx

@@ -21,9 +21,6 @@ import '../../styles/shared.css';
     --neutral-600: #6e6e6e;
     --neutral-700: #3d3d3d;
     --neutral-800: #1f1f1f;
-    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
-    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
     --radius-sm: 6px;
     --radius-md: 8px;
     --radius-lg: 12px;
@@ -33,13 +30,9 @@ import '../../styles/shared.css';
       
   
   .section {
-    margin: 2.5rem 0;
-    padding: 2rem;
+    padding: 1rem;
     background-color: var(--neutral-100);
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
     transition: var(--transition);
-    border: 1px solid var(--neutral-300);
   }
   
   .section h2 {
@@ -48,6 +41,7 @@ import '../../styles/shared.css';
     margin-top: 0;
     color: var(--primary);
     font-weight: 700;
+    font-size: 1.5rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -60,9 +54,16 @@ import '../../styles/shared.css';
     left: 0;
     width: 60px;
     height: 3px;
-    
     border-radius: 3px;
   }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--primary);
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
   
   .alert {
     background-color: var(--secondary-light);
@@ -87,7 +88,7 @@ import '../../styles/shared.css';
   
   .highlight {
     background-color: var(--primary-light);
-    padding: 0.2rem 0.5rem;
+    padding: 2rem 0.7rem;
     border-radius: 4px;
     font-weight: 500;
     color: var(--primary-dark);
@@ -141,6 +142,7 @@ import '../../styles/shared.css';
     color: var(--primary);
     margin-top: 0;
     font-size: 1.2rem;
+    font-weight: bold;
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -210,38 +212,66 @@ import '../../styles/shared.css';
   }
   
   .cta-box {
-    background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0, 99, 134, 0.1) 100%);
     border-radius: var(--radius-md);
-    padding: 1.75rem;
+    padding: 2rem 2.5rem;
     margin: 2rem 0;
-    border: 1px solid var(--primary-light);
-    text-align: center;
+    text-align: left;
   }
   
   .cta-box h3 {
     margin-top: 0;
+    margin-bottom: 1rem;
     color: var(--primary);
+    font-size: 1.2rem;
+  }
+
+  .cta-box > p {
+    margin-bottom: 1.5rem;
+    color: #3d3d3d;
   }
   
   .cta-box .button {
     display: inline-block;
     background-color: var(--primary);
-    color: white;
-    padding: 0.75rem 1.5rem;
+    color: white !important;
+    padding: 0.75rem 2rem;
     border-radius: var(--radius-sm);
-    font-weight: 500;
-    margin-top: 1rem;
+    font-weight: 600;
+    margin-top: 1.5rem;
+    text-decoration: none;
     transition: var(--transition);
   }
 
+  .cta-box .button:hover {
+    background-color: #093080;
+    text-decoration: none;
+  }
+
   .cta-list {
-    text-align: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    counter-reset: step-counter;
   }
   
   .cta-list li {
-    text-align: center;
-    display: block;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
     margin-bottom: 0.75rem;
+    font-size: 0.95rem;
+    color: #3d3d3d;
+    padding: 0.6rem 1rem;
+    background-color: #fff;
+    border-radius: 6px;
+  }
+
+  h3 {
+    font-size: 1.25rem;
+    font-weight: bold !important;
+    color: var(--primary) !important;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
   }
 `
 }
@@ -253,7 +283,7 @@ import '../../styles/shared.css';
 </div>
 
 <div className="section">
-  <h2>👥 L'accessibilité concerne tout le monde</h2>
+  <h2>L'accessibilité concerne tout le monde</h2>
   
   <div className="info-box">
     <p><strong>La CNAM doit respecter le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></strong></p>
@@ -266,22 +296,22 @@ import '../../styles/shared.css';
   
   <div className="disability-types">
     <div className="feature-card">
-      <strong>👁️ Handicaps visuels</strong>
+      <strong>Handicaps visuels</strong>
       <p>Personnes aveugles ou malvoyantes qui utilisent des lecteurs d'écran ou des paramètres d'affichage spécifiques.</p>
     </div>
     
     <div className="feature-card">
-      <strong>👂 Handicaps auditifs</strong>
+      <strong>Handicaps auditifs</strong>
       <p>Personnes sourdes ou malentendantes qui ont besoin de sous-titres ou d'alternatives textuelles pour les contenus audio.</p>
     </div>
     
     <div className="feature-card">
-      <strong>🦶 Handicaps moteurs</strong>
+      <strong>Handicaps moteurs</strong>
       <p>Personnes ayant des difficultés à se mouvoir qui utilisent des dispositifs d'assistance ou la navigation au clavier.</p>
     </div>
     
     <div className="feature-card">
-      <strong>🧠 Handicaps cognitifs</strong>
+      <strong>Handicaps cognitifs</strong>
       <p>Personnes avec des troubles de l'apprentissage ou des troubles psychiques qui bénéficient d'interfaces simplifiées.</p>
     </div>
   </div>
@@ -290,7 +320,7 @@ import '../../styles/shared.css';
 </div>
 
 <div className="section">
-  <h2>👨‍👩‍👧‍👦 Nos utilisateurs sont concernés</h2>
+  <h2>Nos utilisateurs sont concernés</h2>
   
   <p>Nos outils s'adressent à tous (assurés, agents, professionnels de santé), une partie significative de nos utilisateurs sont donc concernés par les enjeux d'accessibilité.</p>
   
@@ -302,86 +332,26 @@ import '../../styles/shared.css';
   
   <div className="feature-list">
     <div className="feature-card">
-      <h3>♿ Situation contextuelle</h3>
+      <h3>Situation contextuelle</h3>
       <p>Une personne en fauteuil roulant n'est pas en situation de handicap dans un environnement pleinement accessible.</p>
     </div>
     
     <div className="feature-card">
-      <h3>👨‍👩‍👧 Handicap invisible</h3>
+      <h3>Handicap invisible</h3>
       <p>Certaines personnes peuvent ne pas se considérer comme handicapées même si elles rencontrent des difficultés.</p>
     </div>
     
     <div className="feature-card">
-      <h3>🕐 Handicap temporaire</h3>
+      <h3>Handicap temporaire</h3>
       <p>Tous nos utilisateurs peuvent être concernés par des situations de handicap temporaires (bras cassé, fatigue visuelle...).</p>
     </div>
   </div>
 
   <div className="resource-links">
-    <h3>👀 Tester la navigation du point de vue des utilisateurs en situation de handicap</h3>
+    <h3>Tester la navigation du point de vue des utilisateurs en situation de handicap</h3>
     <ul>
       <li><a href="https://www.atalan.fr/agissons/fr/daltonisme.html" target="_blank">Atalan Simulateur</a> - Simulateur de daltonisme</li>
       <li><a href="https://simulation-accessibilite.inria.fr/public/fr/daltonisme.html" target="_blank">Inria Simulateur de vision sur une interface</a> - Outil de simulation visuelle</li>
     </ul>
   </div>
 </div>
-
-<div className="section">
-  <h2>💪 Comment mettre en place l'accessibilité ?</h2>
-  
-  <p>On dit souvent que l'accessibilité n'est pas adaptée pour tel ou tel service car cela serait trop long, coûteux ou encore qu'on n'a pas l'expertise. Pourtant de nombreuses actions sont faciles et à portée de main pour initier une démarche d'accessibilité.</p>
-  
-  <div className="image-container">
-    <img className="process-image" alt="Processus d'accessibilité" src={"/processusAccessibilite.jpg"} />
-    <div className="image-caption">
-      Processus d'intégration de l'accessibilité dans le cycle de développement
-    </div>
-  </div>
-  
-  <h3>💼 L'accessibilité s'intègre tout au long de votre processus de conception</h3>
-  
-  <p>Etre accessible est un travail en continu qui s'intègre à plusieurs niveaux de votre processus de conception. C'est un travail de collaboration qui mêle plusieurs expertises :</p>
-  
-  <div className="feature-list">
-    <div className="feature-card">
-      <h3>💼 Chef de projet</h3>
-      <p>Intègre l'accessibilité dans la planification et les exigences du projet dès le départ.</p>
-    </div>
-    
-    <div className="feature-card">
-      <h3>🎨 Designer</h3>
-      <p>Conçoit des interfaces accessibles en tenant compte des contrastes, de la typographie et de l'expérience utilisateur.</p>
-    </div>
-    
-    <div className="feature-card">
-      <h3>💻 Développeur</h3>
-      <p>Implémente le code en respectant les standards d'accessibilité et en testant avec des outils spécialisés.</p>
-    </div>
-  </div>
-  
-  <div className="info-box">
-    <h3>🔍 Vous pouvez pré-auditer un service</h3>
-    
-    <p>Un pré-audit est une évaluation préparatoire réalisée par les équipes-produits pour vérifier la conformité d'un produit aux critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
-    
-    <p>À l'aide d'outils et de méthodologies, ces équipes peuvent identifier la moitié des critères requis avant un audit complet. L'objectif premier du pré-audit est de réduire la quantité de correctifs relevés par l'audit complet en donnant un meilleur contrôle aux produits sur leur gestion de projet.</p>
-    
-    <p><a href="/docs/accessibilité-kit-de-pré-audit-pré-audit--docs" className="button">Consulter le guide du pré-audit</a></p>
-  </div>
-  
-  <div className="cta-box">
-    <h3>📝 Prêt pour soumettre une demande d'audit ?</h3>
-    
-    <p>Une fois le pré-audit effectué, un audit complet est réalisé par une équipe dédiée à la Filière Digital sur la totalité des critères évalués sur les pages retenues.</p>
-    
-    <ol className="cta-list">
-      <li>1. Complétez <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank">ce fichier</a> de pré-audit</li>
-      <li>2. Soumettez-le à <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a></li>
-      <li>3. Attendez la validation de votre demande basée sur l'effort engagé</li>
-      <li>4. Recevez les résultats de l'audit avec les correctifs à apporter</li>
-      <li>5. Implémentez les correctifs et publiez votre déclaration d'accessibilité</li>
-    </ol>
-    
-    <a href="/documents/Checklist_pre-audit_CNAM_NOM_DU_PRODUIT.xlsx" target="_blank" className="button">Télécharger le fichier de pré-audit</a>
-  </div>
-</div>

package/src/stories/Accessibilite/AuditDesignSystem.mdx

@@ -42,13 +42,10 @@ import '../styles/shared.css';
   }
   
   .section {
-    margin: 2.5rem 0;
     padding: 2rem;
     background-color: var(--neutral-100);
     border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
     transition: var(--transition);
-    border: 1px solid var(--neutral-300);
   }
   
   .section h2 {
@@ -177,7 +174,7 @@ import '../styles/shared.css';
 </div>
 
 <div className="section">
-  <h2>🌟 Objectifs</h2>
+  <h2>Objectifs</h2>
   
   <p>Le Design System Synapse offre de nombreux avantages en matière d'accessibilité pour les services qui l'adoptent. En veillant à ce que les composants respectent les normes d'accessibilité, il assure une conformité optimale avec les critères du <abbr title="Référentiel Général d’Amélioration de l’Accessibilité">RGAA</abbr> pour les produits.</p>
   
@@ -188,12 +185,12 @@ import '../styles/shared.css';
     </div>
     
     <div className="feature-card">
-      <h3>🚫 Réduction des erreurs</h3>
+      <h3>Réduction des erreurs</h3>
       <p>Diminue les risques d'erreurs humaines lors de l'implémentation des bonnes pratiques d'accessibilité.</p>
     </div>
     
     <div className="feature-card">
-      <h3>😍 Expérience améliorée</h3>
+      <h3>Expérience améliorée</h3>
       <p>Améliore l'expérience utilisateur pour tous, et pas seulement pour les personnes en situation de handicap.</p>
     </div>
   </div>
@@ -204,7 +201,7 @@ import '../styles/shared.css';
 </div>
 
 <div className="section">
-  <h2>📊 Couverture des critères</h2>
+  <h2>Couverture des critères</h2>
   
   <p>Le Design System ne garantit pas à lui seul l'accessibilité des services qui l'implémentent, car il ne couvre pas l'ensemble des critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>.</p>
   
@@ -233,7 +230,7 @@ import '../styles/shared.css';
 </div>
 
 <div className="section">
-  <h2>📑 Documentation et rapports</h2>
+  <h2>Documentation et rapports</h2>
   
   <p>Chaque composant possède une page "Accessibilité" qui vous renseignera sur les critères du <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> remontées par l'audit Tanaguru ainsi qu'un rapport complet d'un audit manuel.</p>
   
@@ -244,15 +241,4 @@ import '../styles/shared.css';
     <li>Comprendre les bonnes pratiques à suivre</li>
     <li>Appliquer les recommandations dans vos projets</li>
   </ul>
-  
-  <div className="image-container">
-    <img
-      src={"/capture-page-accessibilite-composant.png"}
-      aria-labelledby="capture-page-accessibilite-alt"
-    />
-    <div className="image-caption" id="capture-page-accessibilite-alt">
-      Capture d'écran de la page Accessibilité du composant NotificationBar.<br/>
-      Celle-ci donne des éléments sur les audits Tanaguru et manuels.
-    </div>
-  </div>
 </div>

package/src/stories/Accessibilite/AuditEtContreAudit/Exemptions-derogations.mdx

@@ -89,7 +89,7 @@ import '../../styles/shared.css';
   </div>
 
   <div className="info-box">
-    <h3>🔍 Contexte</h3>
+    <h3>Contexte</h3>
     <p>
       Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> fixe les
       obligations d'accessibilité des sites et services en ligne des organismes publics et de

package/src/stories/Accessibilite/AuditEtContreAudit/Introduction.mdx

@@ -26,12 +26,12 @@ import '../../styles/shared.css';
     margin: 2rem 0;
     padding: 1.5rem;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .info-section h2 {
     padding-bottom: 0.5rem;
     margin-top: 0;
+    color: #0c419a !important;
   }
   
   .contact-card {
@@ -118,9 +118,12 @@ import '../../styles/shared.css';
       left: 0;
       width: 80px;
       height: 4px;
-      
       border-radius: 3px;
     }
+
+    h2 {
+      color: #0c419a !important;
+    }
 `
 }
 </style>
@@ -131,8 +134,8 @@ import '../../styles/shared.css';
 </div>
 
 <div className="info-section">
-  <h2>🌟 Objectif</h2>
-  <p>Une fois la phase pré-audit réalisée et que le niveau de conformité est jugé suffisant, <b>l'équipe produit peut solliciter la Filière Digital pour un audit de conformité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> sur le même échantillon de pages</b>.</p>
+  <h2>Objectif</h2>
+  <p>Une fois la phase pré-audit réalisée et que le niveau de conformité est jugé suffisant, <b>l'équipe produit peut solliciter le Studio Design pour un audit de conformité <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> sur le même échantillon de pages</b>.</p>
 
   <p>L'objectif de l'audit est d'évaluer la conformité d'un produit aux critères d'accessibilités définis par le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>. L'expert identifie les non-conformités et fournit des recommandations pour améliorer l'accessibilité du produit.</p>
 
@@ -147,7 +150,7 @@ import '../../styles/shared.css';
 
   <div className="environment-grid">
     <div className="resource-card">
-      <h3>💻 Environnement principal</h3>
+      <h3>Environnement principal</h3>
       <p>Si l'outil cible un public utilisant des terminaux de bureau :</p>
       <ul>
         <li>Système d'exploitation : Windows</li>
@@ -157,7 +160,7 @@ import '../../styles/shared.css';
     </div>
 
     <div className="resource-card">
-      <h3>📱 Environnement mobile</h3>
+      <h3>Environnement mobile</h3>
       <p>Si l'outil cible un public utilisant des terminaux mobile :</p>
       <ul>
         <li>Système d'exploitation : Android</li>
@@ -176,12 +179,12 @@ import '../../styles/shared.css';
   <div className="environment-grid">
     <div className="resource-card">
       <h3>Grille d'évaluation RGAA</h3>
-      <p>La Filière Digital remet la grille officielle RGAA avec les non-conformités et les recommandations techniques.</p>
+      <p>le Studio Design remet la grille officielle RGAA avec les non-conformités et les recommandations techniques.</p>
     </div>
 
     <div className="resource-card">
       <h3>Déclaration d'accessibilité</h3>
-      <p>L'équipe produit devra réaliser <a href="https://accessibilite.numerique.gouv.fr/ressources/modele-de-declaration/" target="_blank">la déclaration d'accessibilité en suivant le modèle officiel</a>. La Filière Digital pourra accompagner l'équipe pour sa réalisation.</p>
+      <p>L'équipe produit devra réaliser <a href="https://accessibilite.numerique.gouv.fr/ressources/modele-de-declaration/" target="_blank">la déclaration d'accessibilité en suivant le modèle officiel</a>. le Studio Design pourra accompagner l'équipe pour sa réalisation.</p>
     </div>
   </div>
 

package/src/stories/Accessibilite/AuditEtContreAudit/RGAA.mdx

@@ -45,7 +45,6 @@ import '../../styles/shared.css';
       border-radius: var(--border-radius);
       padding: 1.5rem;
       margin: 1.5rem 0;
-      box-shadow: var(--card-shadow);
     }
     
     .info-box h3 {
@@ -127,6 +126,10 @@ import '../../styles/shared.css';
     .link-buttons {
         margin-bottom: 1rem;
     }
+
+  h2 {
+    margin-top: 2rem !important;
+  }
   `
 }
 </style>
@@ -138,32 +141,28 @@ import '../../styles/shared.css';
   </div>
   
   <div className="info-box">
-    <h3>📋 Présentation</h3>
+    <h3>Présentation</h3>
     <p>Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...).</p>
     <p>Basé sur les travaux du W3C Web Accessibility Initiative (WAI), il vise à garantir quatre indices de performance :</p>
   </div>
   
   <div className="principles-container">
     <div className="principle-card">
-      <div className="principle-icon">👁️</div>
       <h4>Perceptibilité</h4>
       <p>La bonne perceptibilité de l'information et des composants de l'interface utilisateur</p>
     </div>
     
     <div className="principle-card">
-      <div className="principle-icon">🖱️</div>
       <h4>Utilisabilité</h4>
       <p>Une manipulation efficiente dans la navigation et les interactions</p>
     </div>
     
     <div className="principle-card">
-      <div className="principle-icon">🧠</div>
       <h4>Compréhension</h4>
       <p>Une bonne compréhension des informations et du fonctionnement de l'interface</p>
     </div>
     
     <div className="principle-card">
-      <div className="principle-icon">🛡️</div>
       <h4>Robustesse</h4>
       <p>Une robustesse efficace dans l'usage des produits numériques</p>
     </div>
@@ -200,7 +199,7 @@ import '../../styles/shared.css';
   <h2 className="section-title">Avantages du Design System CNAM</h2>
   
   <div className="info-box">
-    <h3>💡 Conformité intégrée</h3>
+    <h3>Conformité intégrée</h3>
     <p>L'usage sans modification de notre Design System vous assure :</p>
     <ul>
       <li>Un gain de temps significatif dans le développement</li>