@cnamts/synapse 1.0.24 → 1.0.26

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>

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

@@ -14,15 +14,12 @@ import '../../styles/shared.css';
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     border-radius: 4px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .section-container {
-    margin: 2rem 0;
     padding: 1.5rem;
     background-color: #fff;
     border-radius: 8px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
   }
   
   .section-container h2 {
@@ -43,48 +40,25 @@ import '../../styles/shared.css';
     
     border-radius: 3px;
   }
-  
-  .pages-list {
-    background-color: #f0f7ff;
-    border-radius: 8px;
-    padding: 1.5rem;
-    margin: 1.5rem 0;
-  }
-  
-  .pages-list h3 {
-    margin-top: 0;
-    color: #0c419a;
-    position: relative;
-    padding-bottom: 0.75rem;
-  }
-  
-  .pages-list h3::after {
-    content: '';
-    position: absolute;
-    bottom: -10px;
-    left: 0;
-    width: 80px;
-    height: 4px;
-    
-    border-radius: 3px;
-  }
+
   
   .pages-list ul {
-    padding-left: 1.5rem;
-    margin-bottom: 0;
+    list-style: none;
+    padding: 0;
+    margin: 0;
   }
   
   .pages-list li {
-    margin-bottom: 0.5rem;
-    position: relative;
+    padding: 0.4rem 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
+    line-height: 1.5;
+    list-style: none;
   }
-  
-  .exemption-card {
-    background-color: #f8f9fa;
-    border-left: 4px solid #0c419a;
-    padding: 1.5rem;
-    margin: 1.5rem 0;
-    border-radius: 4px;
+
+  .pages-list li strong {
+    font-size: 0.95rem;
+    margin-right: 0.25rem;
   }
   
   .exemption-item {
@@ -97,7 +71,8 @@ import '../../styles/shared.css';
     background-color: #e3e8f2;
     border-left: 4px solid #0c419a;
     padding: 1rem 1.5rem;
-    margin: 1.5rem 0;
+    margin-bottom:1.5rem;
+    margin-top:0.5rem;
     border-radius: 4px;
   }
   
@@ -108,39 +83,117 @@ import '../../styles/shared.css';
     font-weight: 500;
   }
   
+  .exemption-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
+
+  .exemption-card {
+    background-color: #fff;
+    border-radius: 8px;
+    border: 1px solid #eaeaea;
+    padding: 1.25rem 1.5rem;
+  }
+
+  .exemption-card strong {
+    display: block;
+    color: #0c419a;
+    margin-bottom: 0.4rem;
+    font-size: 0.95rem;
+  }
+
+  .exemption-card p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
+  }
+
   .derogation-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin-top: 1.5rem;
   }
-  
+
+  .derogation-card--full {
+    grid-column: 1 / -1;
+  }
+
   .derogation-card {
-    background-color: white;
+    background-color: #fff;
     border-radius: 8px;
-    padding: 1.5rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+    border: 1px solid #eaeaea;
+    padding: 1.25rem 1.5rem;
   }
+
+  .derogation-card h4 {
+    color: #0c419a;
+    margin-top: 0;
+    margin-bottom: 0.4rem;
+    font-size: 0.95rem;
+  }
+
+  .derogation-card p {
+    margin: 0;
+    font-size: 0.9rem;
+    color: #3d3d3d;
+  }
+
+  h2 {
+    font-weight: bold !important;
+    color: #0c419a !important;
+    font-size: 1.6rem !important;
+  }
+
+      .alert {
+      background-color: #e3e8f2;
+      border-left: 4px solid #0c419a;
+      padding: 1rem 1.5rem;
+      margin: 1.5rem 0;
+      border-radius: 4px;
+    }
+.official-doc-box {
+  background-color: #fff8e5;
+  padding: 1rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 4px;
+}
+
+.official-doc-box p {
+  margin: 0.5rem 0;
+  color: #3d3d3d;
+  font-size: 0.95rem;
+}
+
+.official-doc-box a {
+  color: #0c419a;
+  font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
 `
 }
 </style>
 
 <div className="header">
   <h1>Échantillonnage</h1>
-  <p>Définir un périmètre représentatif pour votre audit d'accessibilité</p>
+  <p>Définir un périmètre représentatif pour votre audit d'accessibilité.
+Si vous êtes au démarrage de votre projet, il est difficile d'établir l'échantillonnage. Utilisez donc le kit de pré-audit de manière systématique sur chaque nouveau développement afin d'éviter une dette d'accessibilité lors de l'échantillonnage. </p>
 </div>
 
-<div className="info-card">
+<div className="alert">
   <p><span className="highlight">Le <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></span> exige que l'audit d'accessibilité soit effectué sur un ensemble représentatif de pages et des fonctionnalités de votre service. Il serait difficile et très chronophage de tester l'intégralité des contenus. La définition d'un périmètre est un compromis pertinent pour auditer efficacement un service et respecter les exigences légales.</p>
   
   <p><strong>L'objectif est donc que vous déterminiez quelles pages seront concernées par l'audit (et ce pré-audit).</strong></p>
 </div>
 
 <div className="section-container">
-  <h2>📝 Pages à auditer</h2>
+  <h2>Pages obligatoires à auditer</h2>
   
   <div className="pages-list">
-    <h3>Pages obligatoires</h3>
     <ul>
       <li><strong>Accueil</strong> - Point d'entrée principal du service</li>
       <li><strong>Contact</strong> - Informations permettant de contacter l'organisme</li>
@@ -153,43 +206,87 @@ import '../../styles/shared.css';
       <li><strong>Documents téléchargeables</strong> - Au moins 1 document pertinent</li>
       <li><strong>Processus complets</strong> - L'ensemble des pages constituant un processus (ex: un formulaire sur plusieurs pages)</li>
       <li><strong>Pages distinctes</strong> - Des exemples de pages ayant un aspect sensiblement distinct ou présentant un type de contenu différent (ex : page contenant des tableaux de données, des éléments multimédias, des illustrations, des formulaires, etc.)</li>
+      <li><strong>Enfin, s’ajoutent des pages sélectionnées au hasard représentant au moins 10 % des pages de l’échantillon</strong>.</li>
     </ul>
   </div>
 </div>
+<div className="note-box">
+  <p><strong>Conseil d'échantillonnage :</strong> Le nombre de visiteurs par page ainsi que l'importance metier peuvent être pris en compte lors de la constitution des 10 %  des pages sélectionnées au hasard de l'échantillon.</p>
+</div>
 
-<div className="section-container">
-  <h2>🚫 Exemptions</h2>
-  
-  <div className="exemption-card">
-    <p><strong>Contenus exemptés de l'obligation d'accessibilité :</strong></p>
-    
-    <div className="exemption-item"><strong>Fichiers bureautiques anciens</strong> - Formats publiés avant le 23 septembre 2018, sauf s'ils sont nécessaires à l'accomplissement d'une démarche administrative.</div>
-    
-    <div className="exemption-item"><strong>Contenus audio/vidéo préenregistrés</strong> - Y compris ceux comprenant des composants interactifs, publiés avant le 23 septembre 2020.</div>
-    
-    <div className="exemption-item"><strong>Contenus audio/vidéo en direct</strong> - Y compris ceux comprenant des composants interactifs.</div>
-    
-    <div className="exemption-item"><strong>Cartes et services de cartographie</strong> - Sous réserve que les informations essentielles soient fournies sous une forme numérique accessible pour les cartes de localisation ou d'itinéraire.</div>
-    
-    <div className="exemption-item"><strong>Contenus de tiers</strong> - Qui ne sont ni financés ni développés par l'organisme concerné et qui ne sont pas sous son contrôle.</div>
-    
-    <div className="exemption-item"><strong>Collections patrimoniales</strong> - Qui ne peuvent être rendues totalement accessibles en raison :</div>
-    <div className="exemption-item" style={{paddingLeft: '2.5rem'}}>• De l'incompatibilité des exigences avec la préservation ou l'authenticité de la reproduction.</div>
-    <div className="exemption-item" style={{paddingLeft: '2.5rem'}}>• De l'indisponibilité de solutions automatisées et économiques pour la transcription.</div>
-    
-    <div className="exemption-item"><strong>Intranets et extranets anciens</strong> - Publiés avant le 23 septembre 2019, jusqu'à révision en profondeur.</div>
-    
-    <div className="exemption-item"><strong>Contenus non essentiels ou archivés</strong> - Sites et applications qui ne sont ni nécessaires à l'accomplissement d'une démarche administrative active ni mis à jour après le 23 septembre 2019.</div>
-  </div>
+<div className="official-doc-box">
+  <p>
+    <strong>Référence officielle :</strong> les contenus exemptés de l'obligation
+    d'accessibilité et les dérogations pour charge disproportionnée sont définis
+    dans le champ d'application du RGAA.
+  </p>
+
+  <p>
+    Les éléments présentés ci-dessous sont fournis à titre d'exemples et d'aide
+    à l'analyse dans le cadre du pré-audit. Ils ne remplacent pas la documentation
+    officielle, qui reste la source de référence.
+  </p>
+
+  <p>
+    Consulter la documentation officielle :{' '}
+    <a
+      href="https://accessibilite.numerique.gouv.fr/obligations/champ-application/"
+      target="_blank"
+      rel="noreferrer"
+    >
+      Champ d'application du RGAA — contenus exemptés et dérogations
+    </a>
+  </p>
 </div>
 
-<div className="note-box">
-  <p>💡 <strong>Conseil d'échantillonnage :</strong> Le nombre de visiteurs par page peut être pris en compte lors de la constitution de l'échantillon.</p>
-  <p>Ajoutez à votre sélection des pages choisies au hasard représentant <span className="highlight">au moins 10% de l'échantillon total</span>.</p>
+<div>
+  <h2>Contenus exemptés de l'obligation d'accessibilité :</h2>
+  
+  <div className="exemption-grid">
+    <div className="exemption-card">
+      <strong>📄 Fichiers bureautiques anciens</strong>
+      <p>Formats publiés avant le 23 septembre 2018, sauf s'ils sont nécessaires à l'accomplissement d'une démarche administrative.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🎬 Contenus audio/vidéo préenregistrés</strong>
+      <p>Y compris ceux comprenant des composants interactifs, publiés avant le 23 septembre 2020.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>📡 Contenus audio/vidéo en direct</strong>
+      <p>Y compris ceux comprenant des composants interactifs.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🗺️ Cartes et services de cartographie</strong>
+      <p>Sous réserve que les informations essentielles soient fournies sous une forme numérique accessible pour les cartes de localisation ou d'itinéraire.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🤝 Contenus de tiers</strong>
+      <p>Qui ne sont ni financés ni développés par l'organisme concerné et qui ne sont pas sous son contrôle.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🏛️ Collections patrimoniales</strong>
+      <p>Qui ne peuvent être rendues totalement accessibles en raison de l'incompatibilité des exigences avec la préservation ou l'authenticité de la reproduction, ou de l'indisponibilité de solutions automatisées et économiques pour la transcription.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>🏢 Intranets et extranets anciens</strong>
+      <p>Publiés avant le 23 septembre 2019, jusqu'à révision en profondeur.</p>
+    </div>
+
+    <div className="exemption-card">
+      <strong>📦 Contenus non essentiels ou archivés</strong>
+      <p>Sites et applications qui ne sont ni nécessaires à l'accomplissement d'une démarche administrative active ni mis à jour après le 23 septembre 2019.</p>
+    </div>
+  </div>
 </div>
 
 <div className="section-container">
-  <h2>⚖️ Dérogations</h2>
+  <h2>Dérogations</h2>
   
   <p>Il existe un système de dérogation dans la mise en conformité d'un service numérique : <span className="highlight">la charge disproportionnée</span>.</p>
   
@@ -204,9 +301,9 @@ import '../../styles/shared.css';
       <p>L'absence de priorité, le manque de temps ou de connaissance <strong>ne sont pas</strong> des circonstances légitimes de dérogations.</p>
     </div>
     
-    <div className="derogation-card">
+    <div className="derogation-card derogation-card--full">
       <h4>✅ Procédure</h4>
-      <p>Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de l'accessibilité numérique (en attendant sa création, c'est la Filière Digital qui en a le mandat).</p>
+      <p>Cette dérogation doit être justifiée, documentée et nécessite un accord auprès du comité de gouvernance de l'accessibilité numérique (en attendant sa création, c'est le Studio Design qui en a le mandat).</p>
       <p>Des solutions alternatives doivent être proposées pour garantir un accès maximal aux utilisateurs en situation de handicap.</p>
     </div>
   </div>

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

@@ -26,7 +26,6 @@ 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 {
@@ -43,7 +42,7 @@ import '../../styles/shared.css';
   
   .resources-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
     margin: 2rem 0;
   }
@@ -107,7 +106,6 @@ import '../../styles/shared.css';
       left: 0;
       width: 80px;
       height: 4px;
-      
       border-radius: 3px;
     }
 
@@ -121,32 +119,82 @@ import '../../styles/shared.css';
       
       border-radius: 3px;
     }
+
+      .info-section h2 {
+    position: relative;
+    padding-bottom: 0.75rem;
+    margin-top: 0;
+    color: #0c419a;
+    font-weight: 700;
+    font-size: 1.6rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+  
+  .info-section h2::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 60px;
+    height: 3px;
+    border-radius: 3px;
+  }
+
+  h2 {
+    margin-top: 2rem;
+    color: #0c419a !important;
+    font-weight: bold !important;
+    font-size: 1.5rem !important;
+  }
 `
 }
 </style>
 
 <div className="header">
-  <h1>Pré-audit à l'accessibilité</h1>
-  <p>Vérifiez la conformité de votre service web avant l'audit officiel</p>
+  <h1>Pré-audit à l'accessibilité.</h1>
+  <p>Vérifiez la conformité de votre service web avant l'audit officiel ou pendant les phases de développement.</p>
 </div>
 
 <div className="info-section">
-  <h2>🌟 Objectif</h2>
-  <p>L'objectif du pré-audit est d'<b>obtenir un premier avis sur le taux de conformité de votre service web, avant de convenir d'un réel audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr></b>, sans viser l'exhaustivité ni un score parfait. La procédure se fait <b>en autonomie par l'équipe de développement du produit</b>. Le relevé des non-conformités relève de la responsabilité de l’équipe de développement, ce kit étant conçu pour guider l’auto-évaluation.</p>
-
-  <p>La restitution consiste à s'assurer que toutes les exigences du pré-audit sont remplies et que vous ayez un minimum d'erreur en lançant les tests automatisés avec Tanaguru.</p>
-
-  <p>Les résultats observés par le pré-audit sont souvent partiels et doivent être considérés comme un point de départ et non comme une évaluation finale. Lors d'un audit suivi du pré-audit, nous observons un taux minimum compris entre 30% et 50%. Un contre-audit pourra être proposé après application des correctifs relevés par l'audit.</p>
-
-  <p>L'enjeu est d'identifier un maximum de non conformités en phase pré-audit afin de réduire le nombre de correctifs en phase audit. Ce kit met aussi à disposition <b>des outils et des tutoriels pour vous accompagner dans cette démarche</b>.</p>
+  <h2>Objectif</h2>
+
+<p>Le kit de pré-audit peut être utilisé de deux façons :</p>
+
+<ul>
+  <li>
+    <strong>Préparer un audit :</strong> en identifiant en amont un maximum de non-conformités. Il permet d’obtenir un premier niveau d’évaluation de l’accessibilité de votre service web avant la réalisation d’un audit <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr>, sans viser l’exhaustivité ni un score final de conformité.
+  </li>
+  <li>
+    <strong>Vérifier en continu :</strong> s'assurer tout au long du développement, qu’un niveau intermédiaire d’accessibilité est bien respecté, réduisant ainsi le risque de non-conformité lors de l'audit officiel.
+  </li>
+</ul>
+
+  <p>
+    La démarche est réalisée <b>en autonomie par l’équipe de développement</b>. Le kit guide l’auto-évaluation et permet d'identifier les anomalies. La correction doit être effectuée par l'équipe.
+  </p>
+
+  <p>
+    Une fois les corrections apportées, l'équipe doit restituer la bonne conformité dans le rapport de pré-audit. Le rapport de pré-audit ne détermine pas de score puisque seul l'audit peut le faire. Néanmoins, par hypothèse, nous estimons qu'un projet peut atteindre le seuil de conformité partielle du RGAA {'>'}50%.
+  </p>
+
+  <p>
+    Dans le cadre d'un objectif de conformité totale (100%) du RGAA, un processus d'audit peut être engagé. Le Kit de pré-audit ne permet pas seul d'atteindre le 100%.
+  </p>
+  <p>
+    L’enjeu est d’identifier le plus tôt possible un maximum de non-conformités afin de réduire le volume de correctifs à traiter lors de l’audit. Le kit met également à disposition <b>des outils et des tutoriels pour vous accompagner dans cette démarche</b>.
+  </p>
 
   <div className="alert">
-    <p><strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques à résoudre les non-conformités, relevées par Tanaguru en phase automatique ou par l'équipe en phase manuelle.</p>
+    <p>
+      <strong>Note :</strong> Vous pouvez nous solliciter pour un accompagnement si vous rencontrez des difficultés techniques dans la résolution des non-conformités relevées, que ce soit par Tanaguru lors des tests automatiques ou par l’équipe lors des vérifications manuelles.
+    </p>
   </div>
 </div>
 
 <div className="section-container">
-  <h2>Environnement de test</h2>
+  <h2>Environnement de test (pré-audit, audit, contre-audit)</h2>
   <p>Il est important de tester votre service dans un environnement similaire à celui utilisé par les utilisateurs finaux. <b>L'environnement de test sera le même pour chacune des phases (pré-audit, audit, contre-audit) et devra être stable. Aucune nouvelle fonctionnalité ne doit être développée entre chaque phase.</b> Seules les corrections liées aux écarts d’accessibilité identifiés doivent être réalisées, afin de garantir la cohérence et la comparabilité des résultats.</p>
 
   <p>Le produit devra mettre à disposition un environnement adéquat pour l'audit qui, selon le public ciblé par le produit, pourra être un environnement de bureau ou mobile.</p>
@@ -194,10 +242,10 @@ import '../../styles/shared.css';
       <h3>Résultat du pré-audit manuel</h3>
       <p>Complété avec un onglet par page.</p>
     </div>
-  </div>
 
-  <div className="info-section">
-    <h3>Annexes</h3>
-      <p>Pour chaque page testée, il sera demandé de restituer un rapport Tanaguru complet.</p>
+    <div className="resource-card">
+      <h3>Annexes</h3>
+      <p>Pour chaque page testée, il sera demandé de constituer un rapport des non conformitees.</p>
+    </div>
   </div>
 </div>