{% extends 'base.html.twig' %}

{% block title %}{{ 'mission.title'|trans }}{% endblock %}

{% block body %}
  <main id="contenu" class="content">
    <img src="/Logo.png" alt="Logo n-atypik" class="logo-central" />

    <h1>{{ 'mission.page_title'|trans }}</h1>

    <section class="content-section">
      <h2>{{ 'mission.why_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.why_1'|trans }}</li>
        <li>{{ 'mission.why_2'|trans }}</li>
        <li>{{ 'mission.why_3'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.human_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.human_1'|trans }}</li>
        <li>{{ 'mission.human_2'|trans }}</li>
        <li><strong>{{ 'mission.human_3'|trans }}</strong></li>
        <li><strong>{{ 'mission.human_4'|trans }}</strong></li>
        <li>{{ 'mission.human_5'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.kindness_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.kindness_1'|trans }}</li>
        <li>{{ 'mission.kindness_2'|trans }}</li>
        <li>{{ 'mission.kindness_3'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.identity_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.identity_1'|trans }}</li>
        <li>{{ 'mission.identity_2'|trans }}</li>
        <li>{{ 'mission.identity_3'|trans }}</li>
        <li>{{ 'mission.identity_4'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.gdpr_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.gdpr_1'|trans }}</li>
        <li>{{ 'mission.gdpr_2'|trans }}</li>
        <li>{{ 'mission.gdpr_3'|trans }}</li>
        <li>{{ 'mission.gdpr_4'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.paid_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.paid_1'|trans }}</li>
        <li>{{ 'mission.paid_2'|trans }}</li>
        <li>{{ 'mission.paid_3'|trans }}</li>
      </ul>
    </section>

    <section class="content-section">
      <h2>{{ 'mission.evolution_title'|trans }}</h2>
      <ul class="bullets">
        <li>{{ 'mission.evolution_1'|trans }}</li>
        <li>{{ 'mission.evolution_2'|trans }}</li>
      </ul>
    </section>
  </main>
{% endblock %}