{% trans_default_domain 'pourquoi_sommes_nous' %}
{% set route = app.request.get('_route') %}

{% extends "base.html.twig" %}
{% block meta %}
    <meta name="description"
          content=" Nos enjeux : soutenir l’activité des artisans, permettre au communes de bénéficier d’un service boulangerie artisanale, offrir aux consommateurs des produits toujours plus frais ">
    <meta property="og:title" content="Pourquoi sommes-nous là ?"/>
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://qualidistrib.com/pourquoi-nous"/>
    <meta property="og:image" content="{{ asset('build/images/cooperation.jpg') }}"/>
    <meta property="og:description"
          content=" Nos enjeux : soutenir l’activité des artisans, permettre au communes de bénéficier d’un service boulangerie artisanale, offrir aux consommateurs des produits toujours plus frais ">
{% endblock %}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('build/pourquoiSN.css') }}" />{% endblock %}
{% block body %}
    <div class="container-m">

        <h1 id="fadeIn" class="title-body">{{ 'pknous.titleTitre'|trans }}</h1>


        <section id="repondre" class="coop border-bottom">
            <img src="{{ asset('build/images/cooperation.jpeg') }}" alt="personnes en reflexion autour d'une table"
                 class="section-img-right">
            <div class="section-body">
                <h4 class="section-title user-select-none">{{ 'pknous.contraintes'|trans }}</h4>
                <p class="section-text user-select-none">
                    {{ 'pknous.contraintesTexte'|trans|raw }}</p>
            </div>
        </section>
        <section id="service" class="newlife border-bottom">
            <img src="{{ asset('build/images/village.jpg') }}" alt="Village" class="section-img-left">
            <div class="section-body">
                <h4 class="section-title user-select-none centre">{{ 'pknous.redonneVie'|trans }}</h4>
                <p class="section-text user-select-none centre">{{ 'pknous.redonneVieTexte'|trans|raw }}</p>
            </div>
        </section>
        <h2 id="titleTwo" class="title-body">{{ 'pknous.apportons'|trans }}</h2>

        <div class="part2">

            <section id="confiance" class="trest border-bottom">
                <div>
                    <img src="{{ asset('build/images/confiance.jpg') }}" alt="poignée de main" class="section-img">
                </div>

                <div class="section-body">
                    <h4 class="section-title user-select-none">{{ 'pknous.confiance'|trans }}</h4>
                    <p class="section-text user-select-none">
                        {{ 'pknous.confianceTexte'|trans|raw }}</p>
                </div>
            </section>
            <section id="flexibilite" class="listen border-bottom">
                <img src="{{ asset('build/images/service-adapte.jpg') }}" alt="évolution de l'homme et des services"
                     class="section-img">
                <div class="section-body">
                    <h4 class="section-title user-select-none">{{ 'pknous.flexibilite'|trans }}</h4>
                    <p class="section-text user-select-none">
                        {{ 'pknous.flexibiliteTexte'|trans|raw }}</p>
                </div>
            </section>


            <section id="ethique" class="artisan border-bottom">
                <img src="{{ asset('build/images/artisan.jpg') }}" alt="artisan" class="section-img">
                <div class="section-body">
                    <h4 class="section-title user-select-none">{{ 'pknous.ethique'|trans }}</h4>
                    --
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill=" #EDCD59"
                         class="bi bi-star-fill"
                         viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill=" #EDCD59"
                         class="bi bi-star-fill"
                         viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill=" #EDCD59"
                         class="bi bi-star-fill"
                         viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill=" #EDCD59"
                         class="bi bi-star-fill"
                         viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill=" #EDCD59"
                         class="bi bi-star-fill"
                         viewBox="0 0 16 16">
                        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                    </svg>
                    --

                    <p class="section-text user-select-none">{{ 'pknous.ambition'|trans|raw }}</p>
                </div>
            </section>
        </div>
        <h2 id="titleThree" class="title-body">{{ 'pknous.parallele'|trans }}</h2>
        <section id="soutien" class="enfant border-enfant">
            <div class="section-body">
                <h4 class="section-title">{{ 'pknous.paralleleTitre'|trans }}</h4>
                <div id="enfant" class="soutien border-soutien">

                    <img src="{{ asset('build/images/EnfantBleu_Logo.jpg') }}" alt="logo enfant bleu"
                         class="section-img-soutien">

                    <div>

                        <p class="section-text">
                            {{ 'pknous.paralleleTexte'|trans|raw }}</p>
                    </div>
                </div>
                <div class="icone ">

                    <img id="jouet1" src="{{ asset('build/images/voiture.jpg') }}" alt="icone jouet voiture"
                         class="voiture enfant-img">
                    <img id="jouet2" src="{{ asset('build/images/cheval.jpg') }} " alt="icone chevale en bois"
                         class="enfant-img">

                    <img id="jouet3" src="{{ asset('build/images/musique.jpg') }}" alt="icone xylophone"
                         class="enfant-img">
                    <img id="jouet4" src="{{ asset('build/images/peluche.jpg') }}" alt="icone peluche"
                         class="enfant-img">


                </div>
            </div>
        </section>

        <section id="implique" class="soutien border-enfant">
            <div class="section-body">
                <p class="section-text">
                    {{ 'pknous.assoTexte'|trans|raw }}<a href="https://enfantbleu.org" target="_blank">https://enfantbleu.org</a>.</p>


            </div>
        </section>
    </div>
{{ encore_entry_script_tags('pourquoiSNjs') }}
    <script defer type="application/ld+json">
        {
            "@context": "https://qualidistrib.com",
            "@type": "BreadcrumbList",
            "itemListElement": [
                {
                    "@type": "ListItem",
                    "position": 1,
                    "name": "Pourquoi sommes-nous ?",
                    "item": "https://qualidistrib.com/pourquoi-nous"
                }
            ]
        }
    </script>
{% endblock %}