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

<Meta title="Accessibilité/Kit de pré-audit/Outils/Introduction" />

<style>
  {`
    /* Styles de base */
    :root {
      --primary-color: #0C419A;
      --secondary-color: #006386;
      --accent-color: #00a5df;
      --dark-color: #111212;
      --light-color: #bbbcbd;
      --success-color: #004439;
      --warning-color: #60480e;
      --info-color: #0c419a;
      --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
      --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.16);
      --border-radius-sm: 4px;
      --border-radius-md: 8px;
      --border-radius-lg: 12px;
      --transition-fast: 0.2s ease;
      --transition-normal: 0.3s ease;
    }
    
    /* Header styles */
    .header-container {
      border-radius: var(--border-radius-lg);
      padding: 3rem;
      margin-bottom: 3rem;
      color: white;
      position: relative;
      overflow: hidden;
    }
    
    .header-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cpath d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/%3E%3C/svg%3E') repeat;
      opacity: 0.3;
    }

      h2 {
    font-weight: bold !important;
    color: #0c419a !important;
    font-size: 1.6rem !important;
  }
    
       
    
    /* Card styles */
    .tool-cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }
    
    .tool-card {
      background: white;
      border-radius: var(--border-radius-md);
      padding: 1.5rem;
      position: relative;
      overflow: hidden;
      border: 1px solid #ccc;
      border-radius: var(--border-radius-md);
    }
    
    .tool-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 0;
    }
    
    .tool-card:hover::before {
      opacity: 1;
    }
    
    .tool-card-content {
      position: relative;
      z-index: 1;
    }
    
    .tool-card-title {
      color: var(--primary-color);
      margin-top: 0;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      position: relative;
      padding-bottom: 0.75rem;
       font-weight: bold !important;
    }
    
    .tool-card-title::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 80px;
      height: 4px;
      
      border-radius: 3px;
    }

    .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 {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 120, 212, 0.1);
      border-radius: 50%;
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
    }
    
    .tool-card-description {
      margin-top: 1rem;
      line-height: 1.6;
      color: var(--dark-color);
    }
    
    .tool-card-link {
      display: inline-flex;
      align-items: center;
      margin-top: 1.5rem;
      color: var(--primary-color);
      text-decoration: none;
      font-weight: 500;
      position: relative;
       font-weight: bold;
    }
    
    .tool-card-link::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: var(--primary-color);
      transform: scaleX(0);
    }
    
    .tool-card-link:hover {
      color: var(--secondary-color);
    }
    
    .tool-card-link-icon {
      margin-left: 0.5rem;
      transition: transform var(--transition-fast);
    }
    
    /* Section styles */
    .section {
      margin: 3rem 0;
    }
    
    .section-title {
      font-size: 2rem;
      color: var(--dark-color);
      margin-bottom: 1.5rem;
      position: relative;
      padding-bottom: 0.75rem;
      display: inline-block;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 60px;
      height: 3px;
      
      border-radius: 1.5px;
    }
    
    .section-description {
      font-size: 1.1rem;
      line-height: 1.6;
      color: var(--dark-color);
      margin-bottom: 2rem;
    }
    
    /* Info box styles */
    .info-box {
      background-color: rgba(0, 120, 212, 0.05);
      border-left: 4px solid var(--info-color);
      padding: 1.5rem;
      margin: 2rem 0;
      border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    }
    
    .warning-box {
      background-color: rgba(216, 59, 1, 0.05);
      border-left: 4px solid var(--warning-color);
      padding: 1.5rem;
      margin: 2rem 0;
      border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    }
    
    /* List styles */
    .modern-list {
      list-style: none;
      padding: 0;
      margin: 2rem 0;
    }
    
    .modern-list-item {
      padding: 1rem 0;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }
    
    .modern-list-item:last-child {
      border-bottom: none;
    }
    
    .modern-list-icon {
      color: var(--primary-color);
      font-size: 1.2rem;
      flex-shrink: 0;
      margin-top: 0.2rem;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .header-container {
        padding: 2rem;
      }
      
      .header-title {
        font-size: 2.5rem;
      }
      
      .header-subtitle {
        max-width: 100%;
      }
      
      .tool-cards-container {
        grid-template-columns: 1fr;
      }
    }
    
    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      .tool-card,
      .tool-card::before,
      .tool-card-link::after,
      .tool-card-link-icon {
        transition: none;
      }
      
      .tool-card:hover {
        transform: none;
      }
      
      .tool-card-link:hover .tool-card-link-icon {
        transform: none;
      }
    }
  `}
</style>

<div className="header">
  <h1>Outils d'accessibilité</h1>
  <p>
    Découvrez les outils essentiels pour vérifier la conformité de vos interfaces aux normes d'accessibilité dans le cadre du pré-audit, de l'audit ou de la vérification continue. <br/> Ces outils vous aideront à identifier et corriger les problèmes d'accessibilité avant même de soumettre votre produit à un audit complet.
  </p>
</div>

<section className="section">
  <h2 className="section-title">Outil principal</h2>
  
  <div className="">
    <div className="tool-card-content">
      <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>
    </div>
  </div>
</section>

<section className="section">
  <h2 className="section-title">Outils complémentaires</h2>
  <p className="section-description">
    Si vous souhaitez aller plus loin dans le pré-audit ou dans vos développements au quotidien, voici d'autres outils qui pourraient vous être utiles :
  </p>
  
  <div className="tool-cards-container">
    <div className="tool-card">
      <div className="tool-card-content">
        <h3 className="tool-card-title">
          <span className="tool-card-icon" role="img" aria-hidden="true">📄</span>
          PDF Accessibility Checker (PAC)
        </h3>
        <p className="tool-card-description">
          Logiciel Windows dédié à l'audit de l'accessibilité des documents PDF. Il vérifie la conformité aux normes WCAG et PDF/UA en analysant la structure du document (titres, balises, liens, tables, éléments multimédia).
        </p>
        <a href="https://pac.pdf-accessibility.org/en" className="tool-card-link" target="_blank" rel="noopener noreferrer">
          Accéder à l'outil
          <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
    
    <div className="tool-card">
      <div className="tool-card-content">
        <h3 className="tool-card-title">
          <span className="tool-card-icon" role="img" aria-hidden="true">🔊</span>
          NVDA (NonVisual Desktop Access)
        </h3>
        <p className="tool-card-description">
          Lecteur d'écran open-source pour Windows conçu pour les personnes malvoyantes ou aveugles. Il rend accessibles les interfaces graphiques en lisant à haute voix les éléments affichés à l'écran.
        </p>
        <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs" className="tool-card-link">
          Guide rapide de NVDA
          <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
    
    <div className="tool-card">
      <div className="tool-card-content">
        <h3 className="tool-card-title">
          <span className="tool-card-icon" role="img" aria-hidden="true">📱</span>
          TalkBack
        </h3>
        <p className="tool-card-description">
          Lecteur d'écran intégré aux appareils Android qui fournit des retours vocaux sur les éléments affichés. Essentiel pour tester l'accessibilité de vos applications mobiles.
        </p>
        <a href="/?path=/docs/accessibilité-kit-de-pré-audit-outils-lecteurs-d-écran--docs#talkback-android" className="tool-card-link">
          Guide rapide de TalkBack
          <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
        </a>
      </div>
    </div>
  </div>
</section>
<div className="tool-cards-container">
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">🧩</span>
        Assistant RGAA
      </h3>
      <p className="tool-card-description">
        Extension Firefox destinée à vérifier la conformité des sites web aux critères d'accessibilité définis par le RGAA. Permet d'effectuer des audits sur des sites en ligne pour identifier et corriger les problèmes.
      </p>
      <a href="https://addons.mozilla.org/fr/firefox/addon/assistant-rgaa/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Télécharger l'extension
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
  
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">🌊</span>
        WAVE
      </h3>
      <p className="tool-card-description">
        Outil d'évaluation de l'accessibilité qui analyse les pages pour identifier les erreurs et fournit des rapports détaillés afin d'aider les développeurs à corriger les problèmes de conformité.
      </p>
      <a href="https://addons.mozilla.org/fr/firefox/addon/wave-accessibility-tool/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Télécharger l'extension
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>

  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">🇭</span>
        HeadingsMap
      </h3>
      <p className="tool-card-description">
        Extension Firefox qui analyse la structure des titres (h1 à h6) d’une page web afin d’en vérifier la hiérarchie. Elle permet de s’assurer que l’organisation des contenus est compréhensible pour les technologies d’assistance.
      </p>
      <a href="https://addons.mozilla.org/fr/firefox/addon/headingsmap/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Télécharger l'extension
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
  
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">🎨</span>
        WCAG Contrast Checker
      </h3>
      <p className="tool-card-description">
        Outil qui vérifie si le contraste entre le texte et son arrière-plan respecte les exigences des WCAG. Garantit une lisibilité suffisante pour les utilisateurs malvoyants.
      </p>
      <a href="https://addons.mozilla.org/fr/firefox/addon/wcag-contrast-checker/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Télécharger l'extension
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
  
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">👁️</span>
        Colour Contrast Analyser
      </h3>
      <p className="tool-card-description">
        Outil permettant de tester le contraste des couleurs dans les interfaces numériques pour s'assurer qu'il respecte les normes d'accessibilité des WCAG.
      </p>
      <a href="https://www.tpgi.com/color-contrast-checker/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Accéder à l'outil
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
  
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">💎</span>
        Stark
      </h3>
      <p className="tool-card-description">
        Plugin pour Figma, Sketch et Adobe XD permettant de tester l'accessibilité des designs, en vérifiant la conformité du contraste des couleurs et en fournissant des suggestions d'amélioration.
      </p>
      <a href="https://www.getstark.co/" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Découvrir Stark
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
  
  <div className="tool-card">
    <div className="tool-card-content">
      <h3 className="tool-card-title">
        <span className="tool-card-icon" role="img" aria-hidden="true">✅</span>
        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.
      </p>
      <a href="https://design-accessible.fr/checklist" className="tool-card-link" target="_blank" rel="noopener noreferrer">
        Consulter la checklist
        <span className="tool-card-link-icon" role="img" aria-hidden="true">→</span>
      </a>
    </div>
  </div>
</div>

<section className="section">
  <div className="info-box">
    <h3 style={{ marginTop: 0 }}>Rappel important</h3>
    <p>
      Un audit d'accessibilité complet nécessite une combinaison d'outils automatisés et d'évaluations manuelles. Les outils présentés ici vous aideront à identifier de nombreux problèmes, mais certains aspects de l'accessibilité requièrent une expertise humaine et une compréhension approfondie des besoins des utilisateurs.
    </p>
    <p>
      Pour obtenir les meilleurs résultats, utilisez ces outils tout au long du processus de développement plutôt que d'attendre la fin du projet pour effectuer des tests d'accessibilité.
    </p>
  </div>
</section>