import {Meta} from '@storybook/blocks';
import '../styles/shared.css';

<Meta title="Accessibilité/Introduction"/>

<style>
{
  /* Styles globaux pour améliorer l'apparence */
  `
    
    
    .key-element {
      background-color: #f8f9fa;
      border-left: 4px solid #0c419a;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .key-element:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .key-element h3 {
      color: #0c419a;
      margin-top: 0;
    }
    
    .info-section {
      margin: 3rem 0 2rem;
      padding: 1.5rem;
      background-color: #fff;
      border-radius: 8px;
      border: none;
    }
    
    .info-section h2 {
      padding-bottom: 0.5rem;
      margin-top: 0;
    }

    .accessibility-header-approche {
      position: relative;
      padding-bottom: 0.75rem;
      display: inline-block;
    }
    
    .accessibility-header-approche::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 80px;
      height: 4px;
      
      border-radius: 3px;
    }
    
    .contact-card {
      background-color: #f0f7ff;
      border-radius: 8px;
      padding: 1.5rem;
      margin: 2rem 0;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    .contact-icon {
      font-size: 2rem;
      color: #0c419a;
    }
    
    .resources-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }
    
    .resource-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 1.5rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
    }
    
    .resource-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    .resource-card h3 {
      margin-top: 0;
      color: #0c419a;
      font-weight: bold;
    }
    
    .resource-card a {
      margin-top: auto;
      text-decoration: none;
      font-weight: 500;
      color: #0c419a;
    }
    
    .resource-card a:hover {
      text-decoration: underline;
    }
    
    .alert {
      background-color: #e3e8f2;
      border-left: 4px solid #0c419a;
      padding: 1rem 1.5rem;
      margin: 1.5rem 0;
      border-radius: 4px;
    }
    
    .alert-title {
      color: #0c419a;
      font-weight: bold !important;
      margin: 0 0 0.5rem 0;
    }
    
    .process-steps {
      counter-reset: step;
      margin: 2rem 0;
    }
    
    .process-step {
      position: relative;
      padding-left: 3rem;
      margin-bottom: 1.5rem;
    }

    .process-step h4 {
      color: #0c419a;
      font-weight: bold;
    }
    
    .process-step::before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: 0;
      top: 0;
      width: 2rem;
      height: 2rem;
      background-color: #0c419a;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }

    h2 {
      color: #0c419a !important;
      font-weight: bold !important;
      font-size: 1.5rem !important;
    }
  `
}
</style>

<div className="header">
  <h1>Accessibilité numérique</h1>
  <p>Construire des interfaces inclusives et conformes aux normes réglementaires</p>
</div>

<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, le Studio Design propose une offre accessibilité numérique basée sur trois éléments clés :

<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="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="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">
  <h2 className="accessibility-header-approche">Notre démarche</h2>
  
  <p>Face à l'ampleur du parc numérique de la Cnam et pour atteindre puis maintenir dans la durée la conformité requise par la DINUM, nous pensons que la prise de conscience des enjeux de l'accessibilité numérique doit être partagée entre tous les acteurs, de la conception à la fabrication des produits numériques.</p>
  
  <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. 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">
      <h4>Anticipation des erreurs</h4>
      <p>L'objectif est d'anticiper les erreurs et diluer l'effort de mise en conformité tout au long du processus de fabrication afin de ne pas attendre le résultat de l'audit pour réécrire le produit. Un temps de corrections doit être prévu par l'équipe produit entre la phase pré-audit et la phase audit.</p>
    </div>
    
    <div className="process-step">
      <h4>Audit et recommandations</h4>
      <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 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>
  
  <div className="alert">
    <h4 className="alert-title">À noter</h4>
    <p>Conscient que tous les produits ne peuvent pas utiliser dans l'immédiat le Design System thème Cnam ou thème Portail Agent, nous avons conçu le kit de pré-audit pour qu'il puisse fonctionner en autonomie.</p>
  </div>

  <div className="image-container">
    <img
      src={"/etapes-accompagnement-accessibilite.png"}
      aria-labelledby="etapes-accompagnement-accessibilite-alt"
    />
  </div>
</div>

<div className="contact-card">
  <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>
    <p>Pour toute remontée de problème liée à l'accessibilité, veuillez <a href="/?path=/docs/démarrer-signaler-une-anomalie--docs">signaler un problème d'accessibilité</a>.</p>
  </div>
</div>

<h2 className="accessibility-header-approche">Ressources disponibles</h2>

<div className="resources-grid">
  <div className="resource-card">
    <h3>Aculturation</h3>
    <p>Sensibilisation à l'accessibilité numérique et bonnes pratiques pour la conception de produits accessibles.</p>
    <a href="/?path=/docs/accessibilité-aculturation-audit-du-design-system--docs">Découvrir →</a>
  </div>
  
  <div className="resource-card">
    <h3>Kit du Pré-Audit</h3>
    <p>Outils et méthodologies pour préparer votre produit à l'audit d'accessibilité.</p>
    <a href="/?path=/docs/accessibilité-kit-de-pré-audit-introduction--docs">Explorer →</a>
  </div>
  
  <div className="resource-card">
    <h3>Audit RGAA</h3>
    <p>Informations sur le processus d'audit et les critères d'évaluation selon le RGAA.</p>
    <a href="/?path=/docs/accessibilité-audit-rgaa--docs">Consulter →</a>
  </div>
</div>

<div className="info-section">
  <h2 className="accessibility-header-approche">Audit du Design System</h2>
  <p>Le Design System Synapse réalise un audit de conformité au <abbr title="Référentiel Général d'Amélioration de l'Accessibilité">RGAA</abbr> facilitant la prise en compte de l'accessibilité dans vos produits.</p>
  <p>Pour en savoir plus, vous pouvez consulter <a href="/docs/accessibilité-aculturation-audit-du-design-system--docs">la page dédiée à l'audit d'accessibilité du Design System</a>.</p>
</div>