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

<Meta title="Accessibilité/Kit de pré-audit/Échantillonnage"/>

<style>
{
`
      
  
  .info-card {
    background-color: #f8f9fa;
    border-left: 4px solid #0c419a;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
  }
  
  .section-container {
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 8px;
  }
  
  .section-container h2 {
    border-bottom: 2px solid #eaeaea;
    padding-bottom: 0.5rem;
    margin-top: 0;
    color: #0c419a;
    position: relative;
  }
  
  .section-container h2::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 80px;
    height: 4px;
    
    border-radius: 3px;
  }

  
  .pages-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .pages-list li {
    padding: 0.4rem 0;
    font-size: 0.9rem;
    color: #3d3d3d;
    line-height: 1.5;
    list-style: none;
  }

  .pages-list li strong {
    font-size: 0.95rem;
    margin-right: 0.25rem;
  }
  
  .exemption-item {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
  }
  
  .note-box {
    background-color: #e3e8f2;
    border-left: 4px solid #0c419a;
    padding: 1rem 1.5rem;
    margin-bottom:1.5rem;
    margin-top:0.5rem;
    border-radius: 4px;
  }
  
  .highlight {
    background-color: rgba(0, 120, 212, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    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: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
  }

  .derogation-card--full {
    grid-column: 1 / -1;
  }

  .derogation-card {
    background-color: #fff;
    border-radius: 8px;
    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 {
    font-weight: bold !important;
    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>

<div className="header">
  <h1>Échantillonnage</h1>
  <p>Définir un périmètre représentatif pour votre audit d'accessibilité.
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="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 obligatoires à auditer</h2>
  
  <div className="pages-list">
    <ul>
      <li><strong>Accueil</strong> - Point d'entrée principal du service</li>
      <li><strong>Contact</strong> - Informations permettant de contacter l'organisme</li>
      <li><strong>Mentions légales</strong> - Informations juridiques obligatoires</li>
      <li><strong>Page "accessibilité"</strong> - Comprenant la déclaration d'accessibilité</li>
      <li><strong>Plan du site</strong> - Si présent</li>
      <li><strong>Aide</strong> - Assistance aux utilisateurs</li>
      <li><strong>Authentification</strong> - Processus de connexion</li>
      <li><strong>Pages de service</strong> - Au moins 1 page pertinente pour chaque type de service fourni (ex: rubriques de 1er niveau), y compris la fonctionnalité de recherche et ses pages de résultat</li>
      <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="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>
  <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>
  
  <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>
  
  <div className="derogation-grid">
    <div className="derogation-card">
      <h4>ℹ️ Définition</h4>
      <p>Permet de déroger à certaines règles d'accessibilité lorsque leur mise en œuvre engendre une charge excessive pour l'organisation (contraintes techniques, financières ou temporelles).</p>
    </div>
    
    <div className="derogation-card">
      <h4>⚠️ Attention</h4>
      <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 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 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>
</div>