@cnamts/synapse 1.0.25 → 1.0.27

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,18 +83,62 @@ 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 {
@@ -127,6 +146,34 @@ import '../../styles/shared.css';
     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>
@@ -137,17 +184,16 @@ import '../../styles/shared.css';
 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>
@@ -160,43 +206,87 @@ Si vous êtes au démarrage de votre projet, il est difficile d'établir l'écha
       <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>
   
@@ -211,9 +301,9 @@ Si vous êtes au démarrage de votre projet, il est difficile d'établir l'écha
       <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

@@ -42,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;
   }
@@ -141,6 +141,13 @@ import '../../styles/shared.css';
     height: 3px;
     border-radius: 3px;
   }
+
+  h2 {
+    margin-top: 2rem;
+    color: #0c419a !important;
+    font-weight: bold !important;
+    font-size: 1.5rem !important;
+  }
 `
 }
 </style>
@@ -151,7 +158,7 @@ import '../../styles/shared.css';
 </div>
 
 <div className="info-section">
-  <h2>🌟 Objectif</h2>
+  <h2>Objectif</h2>
 
 <p>Le kit de pré-audit peut être utilisé de deux façons :</p>
 
@@ -235,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>

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

@@ -68,6 +68,8 @@ import '../../../styles/shared.css';
       padding: 1.5rem;
       position: relative;
       overflow: hidden;
+      border: 1px solid #ccc;
+      border-radius: var(--border-radius-md);
     }
     
     .tool-card::before {
@@ -113,9 +115,50 @@ import '../../../styles/shared.css';
       border-radius: 3px;
     }
 
-    .tool-card-title-tanaguru p {
-      font-size: 1.2rem !important;
-      font-weight: bold !important;
+    .tool-card-title-tanaguru {
+      color: #0c419a;
+      font-size: 1.15rem;
+      font-weight: 700;
+      margin-top: 0;
+      margin-bottom: 0.75rem;
+    }
+
+    .tanaguru-layout {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 1.5rem;
+      align-items: start;
+    }
+
+    .tanaguru-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 0.75rem;
+    }
+
+    .tanaguru-chip {
+      background-color: #eef3fb;
+      color: #0c419a;
+      font-size: 0.8rem;
+      font-weight: 500;
+      padding: 0.3rem 0.75rem;
+      border-radius: 20px;
+      border: 1px solid #c7d8f5;
+    }
+
+    .tanaguru-note {
+      background-color: #fff8ee;
+      border-left: 3px solid #b45309;
+      padding: 0.85rem 1rem;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      color: #3d3d3d;
+      line-height: 1.5;
+    }
+
+    .tanaguru-note strong {
+      color: #b45309;
     }
     
     .tool-card-icon {
@@ -290,49 +333,27 @@ import '../../../styles/shared.css';
 <section className="section">
   <h2 className="section-title">Outil principal</h2>
   
-  <div className="tool-card">
+  <div className="">
     <div className="tool-card-content">
-      <h3 className="tool-card-title-tanaguru">
-        Tanaguru webext RGAA
-      </h3>
-      
-      <p className="tool-card-description">
-        Extension Firefox conçue pour faciliter l'audit d'accessibilité des sites web selon le <strong>Référentiel Général d'Amélioration de l'Accessibilité (RGAA)</strong>. Elle permet de vérifier, directement depuis votre navigateur, la conformité de pages web aux critères d'accessibilité.
-      </p>
-      
-      <div className="info-box">
-        <p>
-          <strong>Fonctionnalités principales :</strong>
-        </p>
-        <ul className="modern-list">
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Évaluation rapide des problèmes d'accessibilité (contrastes, alternatives textuelles, structure HTML)</span>
-          </li>
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Affichage direct des erreurs avec suggestions d'amélioration</span>
-          </li>
-          <li className="modern-list-item">
-            <span className="modern-list-icon" role="img" aria-hidden="true">✓</span>
-            <span>Audit instantané pour développeurs et testeurs d'accessibilité</span>
-          </li>
-        </ul>
-      </div>
-      
-      <div className="warning-box">
-        <p>
-          <strong>Attention :</strong> Ce service ne permet pas d'évaluer l'ensemble des 106 critères du RGAA, uniquement ceux qui sont automatisables. Un audit d'accessibilité ne peut pas se reposer uniquement sur des outils automatisés car ces derniers ne détectent qu'un nombre limité de problèmes techniques.
-        </p>
-        <p>
-          De nombreux critères d'accessibilité nécessitent une évaluation manuelle, tenant compte de la perception humaine et du contexte d'utilisation. Sur les 258 tests du RGAA, Tanaguru estime qu'environ 100 tests ne sont pas automatisés.
-        </p>
+      <h3 className="tool-card-title-tanaguru">Tanaguru webext RGAA</h3>
+
+      <div className="tanaguru-layout">
+        <div>
+          <p className="tool-card-description">Extension Firefox pour vérifier la conformité de vos pages aux critères du <strong>RGAA</strong>, directement depuis le navigateur.</p>
+          <div className="tanaguru-chips">
+            <span className="tanaguru-chip">Contrastes</span>
+            <span className="tanaguru-chip">Alternatives textuelles</span>
+            <span className="tanaguru-chip">Structure HTML</span>
+            <span className="tanaguru-chip">158 tests sur 258</span>
+          </div>
+          <a href="/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs" className="tool-card-link" style={{marginTop: '1.25rem'}}>
+            Guide d'utilisation →
+          </a>
+        </div>
+        <div className="tanaguru-note">
+          <strong>Limite :</strong> Tanaguru couvre uniquement les critères automatisables. Les critères restants nécessitent une vérification manuelle — un audit ne peut pas reposer uniquement sur des outils automatisés.
+        </div>
       </div>
-      
-      <a href="/docs/accessibilité-kit-de-pré-audit-outils-tanaguru--docs" className="tool-card-link">
-        Guide d'utilisation de Tanaguru
-        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
-      </a>
     </div>
   </div>
 </section>
@@ -494,7 +515,7 @@ import '../../../styles/shared.css';
     <div className="tool-card-content">
       <h3 className="tool-card-title">
         <span className="tool-card-icon" role="img" aria-hidden="true">✅</span>
-        Check-list du designer
+        rapport de pre-audit du designer
       </h3>
       <p className="tool-card-description">
         Checklist d'accessibilité disponible sur le site Design Accessible. Propose une liste de critères à vérifier pour garantir l'accessibilité des sites web.