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

<Meta title="Accessibilité/Aculturation/Sensibilisation à l’accessibilité numérique"/>

<style>
{
`
  :root {
    --primary: #0c419a;
    --primary-light: rgba(0, 120, 212, 0.1);
    --primary-dark: #005a9e;
    --secondary: #0c419a;
    --secondary-light: #e3e8f2;
    --secondary-dark: #0c419a;
    --neutral-100: #ffffff;
    --neutral-200: #f8f9fa;
    --neutral-300: #eaeaea;
    --neutral-400: #d1d1d1;
    --neutral-500: #a0a0a0;
    --neutral-600: #6e6e6e;
    --neutral-700: #3d3d3d;
    --neutral-800: #1f1f1f;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
  }

      
  
  .section {
    padding: 1rem;
    background-color: var(--neutral-100);
    transition: var(--transition);
  }
  
  .section h2 {
    position: relative;
    padding-bottom: 0.75rem;
    margin-top: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  .section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    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);
    border-left: 4px solid var(--secondary);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--radius-sm);
    position: relative;
  }
  
  .alert strong {
    color: var(--secondary-dark);
  }
  
  .info-box {
    background-color: var(--primary-light);
    border-left: 4px solid var(--primary);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
    border-radius: var(--radius-sm);
  }
  
  .highlight {
    background-color: var(--primary-light);
    padding: 2rem 0.7rem;
    border-radius: 4px;
    font-weight: 500;
    color: var(--primary-dark);
  }
  
  .image-container {
    margin: 2rem 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-300);
    transition: var(--transition);
  }
  
  .image-container img {
    width: 100%;
    display: block;
  }
  
  .image-caption {
    background-color: var(--neutral-200);
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--neutral-700);
    border-top: 1px solid var(--neutral-300);
  }
  
  abbr {
    text-decoration: none;
    border-bottom: 1px dotted var(--primary);
    cursor: help;
  }
  
  .feature-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
  }
  
  .feature-card {
    background-color: var(--neutral-100);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--neutral-300);
    transition: var(--transition);
  }
  
  .feature-card h3 {
    color: var(--primary);
    margin-top: 0;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  
  a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
  }
  
  a:hover {
    color: var(--primary-dark);
    border-bottom: 1px solid var(--primary);
  }
  
  .disability-types {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
  }
  
  .disability-card {
    background-color: var(--neutral-200);
    border-radius: var(--radius-sm);
    padding: 1rem;
    border: 1px solid var(--primary);
    transition: var(--transition);
  }
  
  .disability-card strong {
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .resource-links {
    background-color: var(--neutral-200);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  .resource-links h3 {
    margin-top: 0;
    color: var(--primary);
    font-size: 1.1rem;
  }
  
  .resource-links ul {
    margin: 0;
    padding-left: 1.5rem;
  }
  
  .resource-links li {
    margin-bottom: 0.5rem;
  }
  
  .process-image {
    max-width: 100%;
    margin: 1.5rem 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
  }
  
  .cta-box {
    border-radius: var(--radius-md);
    padding: 2rem 2.5rem;
    margin: 2rem 0;
    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 !important;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-sm);
    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 {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step-counter;
  }
  
  .cta-list li {
    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;
  }
`
}
</style>

<div className="header">
  <h1>Sensibilisation à l'accessibilité numérique</h1>
  <p>Comprendre les enjeux et mettre en place une démarche d'accessibilité inclusive</p>
</div>

<div className="section">
  <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>
    <p>En tant que personne morale de droit public, nous avons l'obligation légale de concevoir les composants de notre Design System en respectant les enjeux d'accessibilité. En conformité avec la Direction Interministérielle du Numérique (DINUM), il est demandé de respecter le Référentiel Général d'Amélioration de l'Accessibilité (RGAA) pour le desktop et Référentiel d'Accessibilité des Applications Mobiles (RAAM) pour le mobile.</p>
  </div>
  
  <h3>Une diversité de handicaps</h3>
  
  <p>Bien que l'accessibilité concerne tout le monde, elle est particulièrement pertinente pour l'inclusion des personnes en situation de handicap.</p>
  
  <div className="disability-types">
    <div className="feature-card">
      <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>
      <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>
      <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>
      <p>Personnes avec des troubles de l'apprentissage ou des troubles psychiques qui bénéficient d'interfaces simplifiées.</p>
    </div>
  </div>
  
  <p className="highlight">L'enjeu de l'accessibilité est de s'assurer que les sites web, les applications et autres outils numériques soient faciles à utiliser pour tout le monde, peu importe leurs capacités.</p>
</div>

<div className="section">
  <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>
  
  <div className="alert">
    <p><strong>Saviez-vous que</strong> en France, 14% de la population, soit 7,6 millions de personnes de 15 ans ou plus, sont en situation de handicap ?</p>
  </div>
  
  <p>Cependant, l'accessibilité ne concerne pas seulement ces personnes. Toute situation où l'environnement n'est pas adapté aux capacités d'une personne peut créer un handicap.</p>
  
  <div className="feature-list">
    <div className="feature-card">
      <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>
      <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>
      <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>
    <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>
