<template>
  <main class="entry-page">
    <h1>{{ $t('pages.ay11.title') }}</h1>
    <p>{{ $t('pages.ay11.date') }}</p>
    <p>
      {{ $t('pages.ay11.introduction') }}
    </p>
    <h2>{{ $t('pages.ay11.subtitle_conformity') }}</h2>
    <p>
      {{ $t('pages.ay11.conformity_text') }}
      <abbr title="Référentiel général d’amélioration de l’accessibilité"
        >RGAA.</abbr
      >. <span>{{ $t('pages.ay11.conformity_text2') }}</span>
    </p>
    <h2>{{ $t('pages.ay11.subtitle_conformity2') }}</h2>
    <h2>{{ $t('pages.ay11.subtitle_increase') }}</h2>
    <p>
      {{ $t('pages.ay11.increase_text') }}
    </p>
    <ul class="basic-information feedback h-card">
      <li>{{ $t('pages.ay11.phone') }}</li>
      <li>
        {{ $t('pages.ay11.email_text') }}
        <a
          href="mailto:camille.salou@ign.frpanoramax@panoramax.frsignalement.ign@panoramax.fr"
          >{{ $t('pages.ay11.email') }}</a
        >
      </li>

      <li>{{ $t('pages.ay11.address') }}</li>
    </ul>
    <p>{{ $t('pages.ay11.increase_info') }}</p>
    <h2>{{ $t('pages.ay11.subtitle_to_do') }}</h2>
    <p>
      {{ $t('pages.ay11.subtitle_to_do') }}
    </p>
    <ul>
      <li>
        {{ $t('pages.ay11.write_message') }}
        <a href="https://formulaire.defenseurdesdroits.fr/">{{
          $t('pages.ay11.defenseur_droits')
        }}</a>
      </li>
      <li>
        {{ $t('pages.ay11.contact') }}
        <a href="https://www.defenseurdesdroits.fr/saisir/delegues">{{
          $t('pages.ay11.contact_text')
        }}</a>
      </li>
      <li>
        {{ $t('pages.ay11.send_letter') }}
      </li>
    </ul>
    <hr />
    <p>
      {{ $t('pages.ay11.end') }}
      <a
        href="https://betagouv.github.io/a11y-generateur-declaration/#create"
        >{{ $t('pages.ay11.generator_betagouv') }}</a
      >
    </p>
  </main>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.entry-page {
  padding: toRem(5) toRem(2);
  @include text(m-r-regular);
  color: var(--grey-dark);
}
h1 {
  @include text(h1);
  color: var(--blue-dark);
}
h2 {
  @include text(h1);
  color: var(--blue-dark);
}
@media (max-width: toRem(50)) {
  .entry-page {
    padding-top: toRem(15);
  }
}
</style>
