@cnamts/synapse 1.0.25 → 1.0.26

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>
   

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>

package/src/stories/Accessibilite/Introduction.mdx

@@ -34,7 +34,6 @@ import '../styles/shared.css';
       padding: 1.5rem;
       background-color: #fff;
       border-radius: 8px;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
       border: none;
     }
     
@@ -100,6 +99,7 @@ import '../styles/shared.css';
     .resource-card h3 {
       margin-top: 0;
       color: #0c419a;
+      font-weight: bold;
     }
     
     .resource-card a {
@@ -123,7 +123,7 @@ import '../styles/shared.css';
     
     .alert-title {
       color: #0c419a;
-      font-weight: 600;
+      font-weight: bold !important;
       margin: 0 0 0.5rem 0;
     }
     
@@ -137,6 +137,11 @@ import '../styles/shared.css';
       padding-left: 3rem;
       margin-bottom: 1.5rem;
     }
+
+    .process-step h4 {
+      color: #0c419a;
+      font-weight: bold;
+    }
     
     .process-step::before {
       counter-increment: step;
@@ -154,6 +159,12 @@ import '../styles/shared.css';
       justify-content: center;
       font-weight: bold;
     }
+
+    h2 {
+      color: #0c419a !important;
+      font-weight: bold !important;
+      font-size: 1.5rem !important;
+    }
   `
 }
 </style>
@@ -165,21 +176,23 @@ import '../styles/shared.css';
 
 <h2 className="accessibility-header-approche">Notre approche de l'accessibilité</h2>
 
-Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs avec les normes réglementaires de l'accessibilité numérique, la Filière Digital propose une offre accessibilité numérique basée sur trois éléments clés :
+Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs avec les normes réglementaires de l'accessibilité numérique, le Studio Design propose une offre accessibilité numérique basée sur trois éléments clés :
 
-<div className="key-element">
-  <h3>🧩 Design System accessible</h3>
-  <p>Mise à disposition d'un Design System performant pour des produits web embarquant déjà les bonnes pratiques d'accessibilité.</p>
-</div>
+<div className="resources-grid">
+  <div className="resource-card">
+    <h3>Design System accessible</h3>
+    <p>Mise à disposition d'un Design System performant pour des produits web embarquant déjà les bonnes pratiques d'accessibilité.</p>
+  </div>
 
-<div className="key-element">
-  <h3>📚 Documentation d'aide</h3>
-  <p>Documentation spécifique d'aide à la conception comportant des outils d'autocontrôle pour faciliter la mise en conformité.</p>
-</div>
+  <div className="resource-card">
+    <h3>Documentation d'aide</h3>
+    <p>Documentation spécifique d'aide à la conception comportant des outils d'autocontrôle pour faciliter la mise en conformité.</p>
+  </div>
 
-<div className="key-element" style={{ marginBottom: '3rem', borderBottom: 'none' }}>
-  <h3>👥 Accompagnement</h3>
-  <p>Accompagnement personnalisé des équipes-produits sur le sujet de l'accessibilité numérique et réalisations d'audits.</p>
+  <div className="resource-card">
+    <h3>Accompagnement</h3>
+    <p>Accompagnement personnalisé des équipes-produits sur le sujet de l'accessibilité numérique et réalisations d'audits.</p>
+  </div>
 </div>
 
 <div className="info-section">
@@ -190,7 +203,7 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
   <div className="process-steps">
     <div className="process-step">
       <h4>Validation des critères d'éligibilité</h4>
-      <p>Toute nouvelle demande d'audit d'accessibilité numérique sera soumise à la validation de critères d'éligibilité définis dans le kit de pré-audit, sauf exception motivée.</p>
+      <p>Toute nouvelle demande d'audit d'accessibilité numérique sera soumise à la validation de critères d'éligibilité définis dans le kit de pré-audit, sauf exception motivée. La sélection des produits concernée par la réalisation d'un audit est mentionné dans le schéma pluriannuel de l'accessibilité de la CNAM.</p>
     </div>
     
     <div className="process-step">
@@ -200,12 +213,12 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
     
     <div className="process-step">
       <h4>Audit et recommandations</h4>
-      <p>Une fois le produit éligible, l'équipe experte de la Filière Digital réalise un audit et communique à l'équipe-produit un rapport comportant des recommandations. Il pourra être demandé un contre-audit après une phase de corrections pilotée par l'équipe produit.</p>
+      <p>Si le projet est mentionné dans la feuille de route du schéma pluriannuel de l'accessibilité numérique (ou arbitrage gouvernance accessibilité), l'équipe experte du Studio Design peut réaliser un audit et communique à l'équipe-produit un rapport comportant des recommandations. La demande d'un audit ne peut être réalisée qu'après avoir respecter les exigences du kit de pré-audit. Il pourra être demandé un contre-audit après une phase de corrections pilotée par l'équipe produit.</p>
     </div>
     
     <div className="process-step">
       <h4>Corrections et mise en conformité</h4>
-      <p>Si le produit utilise le DS CNAM et que des problèmes sont identifiés associés à ce dernier, les évolutions seront portées directement par la Filière Digital. Dans le cas contraire, il est demandé à l'équipe-produit de corriger les anomalies et de mettre à jour en autonomie le rapport d'audit pour atteindre la pleine conformité.</p>
+      <p>Si le produit utilise le DS CNAM et que des problèmes sont identifiés associés à ce dernier, les évolutions seront portées directement par le Studio Design. Dans le cas contraire, il est demandé à l'équipe-produit de corriger les anomalies et de mettre à jour en autonomie le rapport d'audit pour atteindre le niveau de conformité visé.</p>
     </div>
   </div>
   
@@ -219,23 +232,10 @@ Pour répondre aux objectifs de mise en conformité des interfaces utilisateurs
       src={"/etapes-accompagnement-accessibilite.png"}
       aria-labelledby="etapes-accompagnement-accessibilite-alt"
     />
-    <div className="image-caption" id="etapes-accompagnement-accessibilite-alt">
-      Les étapes de l'accompagnement accessibilité sont :
-      <ol>
-        <li><b>Échantillonage :</b> Sélection des pages représentatives en atelier avec la Filière Digital.</li>
-        <li><b>Pré-audit en autonomie :</b> L'équipe produit réalise une vérification automatisée et manuelle sur l'échantillon (<a href="/?path=/docs/accessibilité-kit-de-pré-audit-introduction--docs">voir la page "Introduction" du Kit de pré-audit</a>).</li>
-        <li><b>Corrections du pré-audit :</b> L'équipe produit implémente des correctifs issus des non conformités détectées en pré-audit (autonomie). La Filière Digital apporte son aide sur les solutions techniques.</li>
-        <li><b>Audit RGAA :</b> La Filière Digital réalise un audit RGAA sur le même échantillon et communique les non-conformités  (<a href="/?path=/docs/accessibilité-audit-et-contre-audit-introduction--docs">voir la page "Introduction" de l'Audit et Contre-audit</a>).</li>
-        <li><b>Corrections de l'audit :</b> L'équipe produit implémente des correctifs issus des non-conformités détectées en audit. La Filière Digital apporte son aide sur les solutions techniques.</li>
-        <li><b>Contre-audit RGAA :</b> Si besoin, la Filière Digital réalise un contre-audit RGAA suite aux corrections, en se concentrant sur les non conformités relevées en audit (<a href="/?path=/docs/accessibilité-audit-et-contre-audit-introduction--docs">voir la page "Introduction" de l'Audit et Contre-audit</a>).</li>
-        <li><b>Déclaration d'accessibilité :</b> La Filière Digital aide pour la publication de la déclaration d'accessibilité, comportant le niveau de conformités, des moyens de recours et le schéma pluriannuel.</li>
-      </ol>
-    </div>
   </div>
 </div>
 
 <div className="contact-card">
-  <div className="contact-icon">📧</div>
   <div>
     <h3>Besoin d'accompagnement ?</h3>
     <p>Si vous avez besoin d'un accompagnement sur le sujet, merci de prendre contact avec <a href="mailto:valentin.becquet@assurance-maladie.fr">valentin.becquet@assurance-maladie.fr</a>.</p>