{% extends 'marketing/base.html' %}

{% block title %}{{ title }}{% endblock %}
{% block description %}{{ description }}{% endblock %}

{% block head_extra %}
<style>
  /* Card hover/lift uniquement pour les cartes légales (sobre, accessible). */
  .legal-card {
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  }
  .legal-card:hover {
    transform: translateY(-2px);
  }
  .legal-card:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
  }
  /* Icône circulaire avec dégradé de marque, contraste suffisant. */
  .legal-card-icon {
    background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(6,182,212,0.10));
    color: #7c3aed;
  }
  .legal-card.is-external .legal-card-icon {
    background: linear-gradient(135deg, rgba(168,85,247,0.12), rgba(6,182,212,0.12));
  }
  /* Print : pas de bouton CTA, pas d'animations. */
  @media print {
    .legal-card { box-shadow: none !important; transform: none !important; }
  }
</style>
{% endblock %}

{% block content %}
<a href="#main-content"
   class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-brand-navy focus:text-white focus:rounded-none focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2">
  Aller au contenu principal
</a>

<section class="bg-brand-bg pt-12 pb-20 px-4" aria-labelledby="legal-index-title">
  <div id="main-content" class="max-w-[1100px] mx-auto">

    {# Hero #}
    <header class="text-center max-w-3xl mx-auto mb-12">
      <p class="eyebrow text-brand-navy/60 mb-3">DictIA Inc.</p>
      <h1 id="legal-index-title" class="text-4xl md:text-5xl font-black text-brand-navy mb-4 tracking-tight">
        Documents <span class="grad-text">légaux</span> DictIA
      </h1>
      <p class="text-base md:text-lg text-brand-navy/70 leading-relaxed mb-5">
        Transparence totale conforme à la {{ 'Loi&nbsp;25' | safe }} du Québec : tous nos documents juridiques,
        notre code source et notre politique de confidentialité sont publics et indexables.
      </p>
      <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white border border-brand-border text-xs font-semibold text-brand-navy/80">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <circle cx="12" cy="12" r="10"/>
          <polyline points="12 6 12 12 16 14"/>
        </svg>
        <span>Version {{ legal_version }} · dernière mise à jour {{ legal_version }}</span>
      </span>
    </header>

    {# Grille 6 cartes — 5 internes + 1 externe AGPL #}
    <ul class="grid sm:grid-cols-2 gap-4 md:gap-5" role="list">
      {% for page in pages %}
      <li>
        {% if page.external %}
          <a href="{{ page.url }}"
             target="_blank"
             rel="noopener noreferrer"
             class="legal-card is-external group block h-full p-5 md:p-6 bg-white border border-brand-border rounded hover:border-brand-b1 hover:shadow-cta focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 relative">
        {% else %}
          <a href="{{ url_for('legal.legal_page', page=page.slug) }}"
             class="legal-card group block h-full p-5 md:p-6 bg-white border border-brand-border rounded hover:border-brand-b1 hover:shadow-cta focus-visible:outline-2 focus-visible:outline-brand-b1 focus-visible:outline-offset-2 relative">
        {% endif %}
          <div class="flex items-start gap-4">
            <div class="legal-card-icon shrink-0 inline-flex items-center justify-center w-12 h-12 rounded-none">
              {{ page.icon | safe }}
            </div>
            <div class="flex-1 min-w-0">
              <h2 class="text-base md:text-lg font-bold text-brand-navy mb-1.5 group-hover:grad-text transition-colors">
                {{ page.title }}{% if page.external %}<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block w-4 h-4 ml-1.5 text-brand-b1 align-text-top" aria-hidden="true"><path d="M7 17l9.2-9.2M17 17V8h-9"/></svg>{% endif %}
              </h2>
              <p class="text-sm text-brand-navy/70 leading-relaxed">{{ page.description }}</p>
              {% if page.external %}
              <p class="mt-2 inline-flex items-center gap-1.5 text-xs text-brand-navy/50 font-medium">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3.5 h-3.5" aria-hidden="true"><path d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
                <span>{{ page.url }}</span>
                <span class="sr-only">(s'ouvre dans un nouvel onglet)</span>
              </p>
              {% endif %}
            </div>
          </div>
        </a>
      </li>
      {% endfor %}
    </ul>

    {# Bloc info pied — signature, contact, sous-processeurs #}
    <aside class="mt-12 max-w-3xl mx-auto bg-white border border-brand-border rounded p-6 md:p-7"
           aria-label="Informations complémentaires sur les documents légaux">
      <p class="text-sm text-brand-navy/80 leading-relaxed mb-3">
        Documents signés numériquement par <strong class="text-brand-navy">Allison Rioux</strong>,
        présidente et responsable de la protection des renseignements personnels (RPRP) —
        version&nbsp;{{ legal_version }}.
      </p>
      <p class="text-sm text-brand-navy/80 leading-relaxed mb-3">
        Pour toute question, demande d'accès, rectification ou plainte&nbsp;:
        <a href="mailto:rprp@dictia.ca" class="grad-text font-semibold underline">rprp@dictia.ca</a>.
      </p>
      <p class="text-xs text-brand-navy/60 leading-relaxed">
        <strong>5&nbsp;sous-processeurs</strong> : OVH (Beauharnois,&nbsp;QC) ·
        Google Cloud (Toronto, Ontario) · Cloudflare (US) · HubSpot (US) · Stripe (US) —
        détails dans la <a href="{{ url_for('legal.legal_page', page='confidentialite') }}" class="grad-text font-semibold">Politique de confidentialité</a>.
      </p>
    </aside>
  </div>
</section>
{% endblock %}