import { Story, Meta } from '@storybook/blocks';
import * as FauxPositifsStories from './FauxPositifs.stories';
import '../../../../styles/shared.css';

<Meta of={FauxPositifsStories} />

<style>
  {`
    /* Variables CSS */
    :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;
    }

    /* Styles globaux */
    .tanaguru-page {
      font-family: 'Roboto', sans-serif;
      color: #333;
      line-height: 1.6;
      max-width: 1200px;
      margin: 0 auto;
    }

       

    /* Responsive */
    @media (max-width: 768px) {
      .tanaguru-header {
        padding: 1.5rem;
      }

      .tanaguru-header h1 {
        font-size: 2rem;
      }
    }
  `}
</style>

<div className="tanaguru-page">
  <div className="header">
    <h1>Faux positifs de Tanaguru</h1>
    <p>Au cours de nos analyses avec l’outil Tanaguru, nous avons constaté que certains résultats signalés comme des erreurs étaient en réalité des faux positifs. Cette page a pour objectif de présenter ces cas et de clarifier pourquoi ils ne constituent pas de réels problèmes d’accessibilité.</p>
  </div>

  <h2 className="section-title">Faux positifs</h2>

  <div className="components-table-container">
    <div className="components-table">
      <Story of={FauxPositifsStories.FauxPositifsCards} />
    </div>
  </div>
</div>