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

{% block title %}  {{ 'footer.contactmetatitle'|trans }} {% endblock %}
{% block description %} {{ 'footer.contactmetadesc'|trans }}  {% endblock %}

{% block body %}

  {% include "front/inc/breadcrumb.html.twig"
  with { 'content_title': 'footer.noustrouver'|trans , 'current_page': 'footer.noustrouver'|trans , 'image' : null} %}

  <div class="page-contact">
    <section class="intro-">
        <p>{{ 'contact.intro.text.1'|trans|raw }}</p>
    </section>
    <section class="map-info-located">
        <div class="map" id="map"></div>
        <div class="info-located">
            <ul>
                <li class="title-located"> {{ 'footer.noustrouver'|trans }} </li>
                <li class="adress">
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="none" viewBox="0 0 48 48">
                            <path
                                fill="#7E2110"
                                d="M24.091 3.75a.938.938 0 1 0-.013 1.877.938.938 0 0 0 .014-1.877Zm-.041 5.625a6.57 6.57 0 0 0-6.612 6.514A6.57 6.57 0 0 0 23.95 22.5H24a6.57 6.57 0 0 0 6.561-6.513 6.57 6.57 0 0 0-6.513-6.612ZM24 20.625h-.036a4.693 4.693 0 0 1-4.652-4.722 4.693 4.693 0 0 1 4.722-4.653 4.693 4.693 0 0 1 4.653 4.723A4.693 4.693 0 0 1 24 20.625Zm4.09-16.164a.938.938 0 0 0-.626 1.768 10.301 10.301 0 0 1 6.849 9.786.938.938 0 0 0 .93.945h.008a.938.938 0 0 0 .937-.93A12.177 12.177 0 0 0 28.09 4.46Z"
                            />
                            <path
                                fill="#7E2110"
                                d="M29.753 35.291c6.235-8.026 10.132-12.211 10.185-19.234C40.004 7.222 32.833 0 23.998 0 15.269 0 8.13 7.071 8.064 15.818 8.01 23.031 11.98 27.211 18.258 35.29c-6.246.934-10.194 3.279-10.194 6.148 0 1.921 1.776 3.645 5.002 4.855C16 47.393 19.884 48 24 48c4.117 0 8-.606 10.936-1.707 3.225-1.21 5.002-2.934 5.002-4.855 0-2.868-3.945-5.212-10.185-6.147ZM9.938 15.832c.058-7.718 6.356-13.957 14.061-13.957 7.796 0 14.122 6.374 14.064 14.168-.05 6.67-4.183 10.779-10.78 19.38a184.038 184.038 0 0 0-3.281 4.401 177.666 177.666 0 0 0-3.274-4.402c-6.87-8.96-10.84-12.76-10.79-19.59ZM24 46.125c-8.048 0-14.062-2.475-14.062-4.687 0-1.641 3.595-3.714 9.64-4.432a167.286 167.286 0 0 1 3.657 4.972.938.938 0 0 0 1.53.001 173.622 173.622 0 0 1 3.667-4.972c6.039.718 9.63 2.79 9.63 4.43 0 2.213-6.013 4.688-14.062 4.688Z"
                            />
                        </svg>
                    </div>
                    <p>{{ 'natea_address'|trans }}</p>
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" width="47" height="47" fill="none" viewBox="0 0 47 47">
                        <g clip-path="url(#a)">
                            <path fill="#7E2110" d="M42.5 11.017a.918.918 0 1 1-1.836 0 .918.918 0 0 1 1.836 0Zm-5.508 0a.918.918 0 1 1-1.836 0 .918.918 0 0 1 1.836 0Zm-5.508 0a.918.918 0 1 1-1.837 0 .918.918 0 0 1 1.837 0Z" />
                            <path
                                fill="#7E2110"
                                d="M36.073 0C30 0 25.057 4.942 25.057 11.017c0 2.202.649 4.315 1.882 6.14l-1.835 5.504a.919.919 0 0 0 1.281 1.111l5.311-2.655c1.395.608 2.865.916 4.377.916 6.075 0 11.017-4.942 11.017-11.016C47.09 4.942 42.148 0 36.073 0Zm0 20.197a9.088 9.088 0 0 1-3.993-.924.92.92 0 0 0-.811.005l-3.722 1.86 1.28-3.841a.918.918 0 0 0-.132-.837 9.09 9.09 0 0 1-1.802-5.443c0-5.062 4.118-9.18 9.18-9.18 5.063 0 9.18 4.118 9.18 9.18 0 5.062-4.117 9.18-9.18 9.18Zm-17.809 9.364a.918.918 0 1 1-1.837 0 .918.918 0 0 1 1.837 0Z"
                            />
                            <path
                                fill="#7E2110"
                                d="M31.938 28.973a.918.918 0 0 0-1.299 0l-4.4 4.4c-.625.625-1.589.752-2.293.303a34.838 34.838 0 0 1-2.935-2.098.918.918 0 0 0-1.144 1.437 36.747 36.747 0 0 0 3.091 2.208c1.425.91 3.351.677 4.58-.553l3.75-3.75 8.622 8.62-3.397 3.396c-2.192 2.193-5.49 2.842-8.205 1.615-14.44-6.526-21.954-17.589-25.714-25.72-1.292-2.793-.672-6.157 1.543-8.37l3.346-3.347 8.62 8.62-3.75 3.751c-1.23 1.23-1.461 3.156-.551 4.58a36.79 36.79 0 0 0 2.102 2.958.917.917 0 1 0 1.442-1.137 34.982 34.982 0 0 1-1.997-2.81c-.45-.703-.323-1.667.302-2.292l4.4-4.4a.918.918 0 0 0 0-1.299l-9.92-9.919a.919.919 0 0 0-1.298 0L2.838 9.162C.082 11.918-.686 16.113.928 19.602c5.353 11.577 14.427 21.11 26.624 26.622 3.427 1.55 7.547.724 10.26-1.99l4.045-4.044a.918.918 0 0 0 0-1.299l-9.92-9.918Z"
                            />
                        </g>
                        <defs>
                            <clipPath id="a">
                                <path fill="#fff" d="M0 0h47v47H0z" />
                            </clipPath>
                        </defs>
                    </svg>
                    <a class="tel" href="tel: {{ 'contact.tel1'|trans }}">
                        {{ 'contact.tel1'|trans }}
                    </a>
                    /
                    <a class="tel" href="tel:{{ 'contact.tel2'|trans }}">
                        {{ 'contact.tel2'|trans }}
                    </a>
                </li>
                <li>
                    <svg xmlns="http://www.w3.org/2000/svg" width="49" height="49" fill="none" viewBox="0 0 49 49">
                        <path
                            fill="#7E2110"
                            d="M14.7 14.7a1.225 1.225 0 0 1 1.226-1.225h7.35a1.225 1.225 0 0 1 0 2.45h-7.35A1.225 1.225 0 0 1 14.7 14.7Zm1.226 3.675a1.225 1.225 0 0 0 0 2.45h4.9a1.225 1.225 0 0 0 0-2.45h-4.9ZM19.6 2.45A14.7 14.7 0 0 0 6.688 24.186l-1.74 6.1a1.225 1.225 0 0 0 1.564 1.5l5.728-1.908A14.7 14.7 0 1 0 19.6 2.45ZM7.35 17.15a12.25 12.25 0 1 1 5.696 10.351 1.224 1.224 0 0 0-1.044-.127L7.94 28.729l1.25-4.364a1.225 1.225 0 0 0-.128-.963A12.186 12.186 0 0 1 7.35 17.15Zm22.726 19.47-5.885-2.94a17.221 17.221 0 0 0 3.094-1.195l3.34 1.67 11.024-5.512V26.95a2.45 2.45 0 0 0-2.45-2.45h-4.1c.374-.784.688-1.605.94-2.45h3.16a4.9 4.9 0 0 1 4.9 4.9V39.2a4.9 4.9 0 0 1-4.9 4.9H22.05a4.9 4.9 0 0 1-4.9-4.9v-5.072c.802.113 1.617.172 2.45.172v4.9a2.45 2.45 0 0 0 2.45 2.45H39.2a2.45 2.45 0 0 0 2.45-2.45v-7.818L31.175 36.62a1.226 1.226 0 0 1-1.097 0Z"
                        />
                    </svg>
                    <a class="mail" href="mailto:{{ 'contact.email'|trans }}">
                        {{ 'contact.email'|trans }}
                    </a>
                </li>
            </ul>
        </div>
    </section>
    <section class="form-contact">
         <div id="response"></div>
        <p> {{ 'contact.nousecrire'|trans  }} </p>
        <form method="POST" id="sendEmail">
            <div class="group">
                <select name="civilite" class="form-control" id="selectCtrl" required >
                    <option disabled> {{ 'confirmation.civilite'|trans }} *</option>
                    <option value="Mr">Mr</option>
                    <option value="Mme">Mme</option>
                </select>
            </div>
            <div class="group"><input type="text" name="fullname" required/> <span class="highlight"></span> <span class="bar"></span> <label> {{ 'confirmation.text3'|trans }} *</label></div>
            <div class="group"><input type="tel"  name="telephone" required/> <span class="highlight"></span> <span class="bar"></span> <label> {{ 'confirmation.text5'|trans }} </label></div>
            <div class="group"><input type="email" name="email"  required/> <span class="highlight"></span> <span class="bar"></span> <label> {{ 'confirmation.text4'|trans }} *</label></div>
            <div class="group textarea"><textarea name="message" required></textarea> <span class="highlight"></span> <span class="bar"></span> <label> {{ 'message'|trans }} </label></div>
            <div class="text-obliga">
                <p>*{{ 'champsobligatoires'|trans }} </p>
            </div>
            <div class="g-recaptcha" data-sitekey="6Le2F8cpAAAAAIvDNkCuHycUWMXpRKmbR6uPQjwi"></div>
            <div class="btn-contact-form">
                <input type="hidden" name="langue" value="{{app.request.locale}}"/>
                <button type="submit" class="button--ujarak sendEmail"> {{ 'envoyer'|trans }} </button>
            </div>
           
        </form>
        
    </section>
</div>

{% endblock %}
{% block javascripts %}
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock %}