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

{% block title %} {{ canal.metaTitle }} {% endblock %}
{% block description %} {{ canal.metaDescription }} {% endblock %}


{% block schema_org %}
    {{ parent() }}
    {# VideoObject Schema for video SEO #}
    {% import "macros/schema_org.html.twig" as schema %}
    {% set videoUrl = absolute_url(asset('front/images/videontateamsaassagesagadir.mp4')) %}
    {% set thumbnailUrl = absolute_url(asset('front/images/video-natea.jpg')) %}
    {{ schema.video_schema(
            'Natea Les Massages d\'Agadir - Présentation des massages',
            'Découvrez nos services de massages à Agadir. Une expérience de bien-être et de relaxation dans notre centre de massages professionnel. Natea Les Massages d\'Agadir est un centre de massages professionnel situé à Agadir, Maroc. Nous offrons une large gamme de massages pour satisfaire vos besoins de bien-être et de relaxation.',
            thumbnailUrl,
            videoUrl,
            'now'|date('Y-m-d\\TH:i:s\\Z'),
            'PT2M30S',
            {
                'name': 'Natea Les Massages d\'Agadir',
                'logo': absolute_url(asset('front/images/logo.png'))
            }
        ) }}
{% endblock %}

{% block body %}  

{% include "front/inc/slider.html.twig"  with 
    {
        'sliders': sliders,
    }  
%}


<div class="page-accueil">
    <section class="container acc_section_1">
        <div class="block_content">
            <div class="text_discr">
                <p class="litle_title">{{ 'index_title_1'|trans }}</p>
                <h1 class="larg_title">
                    {{ 'index_title_2'|trans }}
                </h1>
                <div>
                    <p class="dis">
                        {{ 'index_desc_1'|trans|raw }}
                    </p>
                </div>
            </div>
            <div class="video">
                <div class="video_pres">
                    <div class="video-container">
                        <div id="myButtonSurface" class="center-button">
                            <div id="myPlayButton" class="play-button">
                                <img class="iconply_video" width="80" height="80" src="{{ asset('front/images/icon_play.png') }}" decoding="async" loading="lazy" alt="video natea play" />
                            </div>
                        </div>
                        <img id="img_bg" class="img_bg" width="696" height="379" src="{{ asset('front/images/video-natea.jpg') }}" decoding="async" loading="lazy" alt="video natea" />
                        <video id="myVideo" width="696" height="379" controls>
                            <source src="{{ asset('front/images/videontateamsaassagesagadir.mp4') }}" type="video/mp4"/>
                            <track kind="captions"
                                   srclang="{{ app.request.locale }}"
                                   src="{{ asset('front/captions/videontateamsaassagesagadir-' ~ app.request.locale ~ '.vtt') }}"
                                   label="{{ app.request.locale == 'en' ? 'English captions' : 'Sous-titres' }}" />
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {% set massagesSlug = '' %}
    <section class="section2_container">
        <div class="slider_section2">
            <div class="text_slider">
                <div class="texte_">
                    <h2 class="larg_title">{{ 'index.massages'|trans }}</h2>
                    <p class="dis">
                        {{ categorie.textCategorie|raw }}
                    </p>
                </div>
               <div class="btn-voir-toute">
               {% if produits|length > 0 %}
                    {% for item in produits  %}
                        {% if item.typeProduit == 0 %}
                            {% set massagesSlug = item.categorie.slug %}
                        {% endif %}
                    {% endfor %}
                {% endif %}
            <div>
                <a href="{{ path('app_categorie', {_locale: app.request.locale , categorie: massagesSlug }) }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="45" fill="" viewBox="0 0 44 44">
                        <g clip-path="">
                            <path fill="currentcolor" d="M36.827 7.173A20.9 20.9 0 0 0 22 1.031 20.9 20.9 0 0 0 7.173 7.173 20.9 20.9 0 0 0 1.031 22a20.9 20.9 0 0 0 6.142 14.827A20.9 20.9 0 0 0 22 42.969a20.9 20.9 0 0 0 14.827-6.142A20.9 20.9 0 0 0 42.969 22a20.9 20.9 0 0 0-6.142-14.827ZM22 0a21.93 21.93 0 0 1 15.556 6.444A21.931 21.931 0 0 1 44 22a21.93 21.93 0 0 1-6.444 15.556A21.931 21.931 0 0 1 22 44a21.93 21.93 0 0 1-15.556-6.444A21.931 21.931 0 0 1 0 22 21.93 21.93 0 0 1 6.444 6.444 21.931 21.931 0 0 1 22 0Z"></path>
                            <path fill="" d="M8.58 21.818a.513.513 0 1 0 0 1.027l26.84-.001a.513.513 0 0 0 0-1.027H8.58Z"></path>
                            <path fill="" d="M26.39 31.037a.514.514 0 0 0 .745.71l8.63-9.034a.517.517 0 0 0 .022-.744l-8.64-9.703a.516.516 0 0 0-.77.685l8.342 9.367-8.33 8.72Z"></path>
                        </g>
                        <defs>
                            <clipPath id="a">
                                <path fill="#fff" d="M0 0h44v44H0z" transform="rotate(-90 22 22)"></path>
                            </clipPath>
                        </defs>
                    </svg>
                    <p> {{ 'touteslesmassages'|trans }} </p>
                </a>
            </div>
        </div>
            </div>
            <div class="slider-container">
                <div class="slider-wrapper">
                    {% if produits|length > 0 %}
                        {% for item in produits %}
                            {% if item.typeProduit == 0 %}
                            <a class="slider-item" href="{{ path('fiche_massage', {_locale: app.request.locale , categorie: item.categorie.slug, slug : item.slugProduits }) }}">
                                <div>
                                    {# <span class="miniature-icon-promo">
                                     <svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M28.4784 2.83953C30.7359 1.00279 33.5574 0 36.4677 0C39.3781 0 42.1995 1.00279 44.4571 2.83953L45.3028 3.52667L46.3705 3.35224C49.2443 2.89052 52.1894 3.43319 54.7099 4.88887C57.2304 6.34455 59.1723 8.62431 60.2085 11.3442L60.5944 12.3538L61.604 12.7397C64.3239 13.7759 66.6036 15.7178 68.0593 18.2383C69.515 20.7588 70.0577 23.7039 69.5959 26.5777L69.4215 27.6507L70.1087 28.4911L68.3062 29.9552L70.1034 28.4911C73.8932 33.1425 73.8932 39.8131 70.1034 44.4698L69.4215 45.3102L69.5959 46.378C70.0577 49.2517 69.515 52.1969 68.0593 54.7173C66.6036 57.2378 64.3239 59.1797 61.604 60.216L60.5944 60.6018L60.2085 61.6167C59.1713 64.3356 57.2291 66.6142 54.7087 68.0689C52.1883 69.5235 49.2437 70.0655 46.3705 69.6034L45.2975 69.4342L44.4571 70.1161C42.1995 71.9528 39.3781 72.9556 36.4677 72.9556C33.5574 72.9556 30.7359 71.9528 28.4784 70.1161L27.6379 69.429L26.5702 69.6034C23.6971 70.0655 20.7525 69.5235 18.2321 68.0689C15.7117 66.6142 13.7694 64.3356 12.7322 61.6167L12.3464 60.6018L11.3315 60.216C8.61355 59.1778 6.33613 57.2352 4.88248 54.7149C3.42883 52.1946 2.88768 49.2505 3.35009 46.378L3.52452 45.3102L2.83738 44.4645C1.00198 42.2074 0 39.387 0 36.4778C0 33.5686 1.00198 30.7482 2.83738 28.4911L3.52452 27.6454L3.35009 26.5777C2.88768 23.7052 3.42883 20.7611 4.88248 18.2408C6.33613 15.7205 8.61355 13.7778 11.3315 12.7397L12.3464 12.3538L12.7322 11.3442C13.7685 8.62431 15.7104 6.34455 18.2308 4.88887C20.7513 3.43319 23.6964 2.89052 26.5702 3.35224L27.6379 3.52667L28.4784 2.83953Z" fill="#EB001B"/>
                                        </svg>
                                        <span class="miniature-icon-promo-price">-10%</span>
                                    </span> #}

                                    <div class="with-bg">
                                        <img src="{{ sonata_path(item.imageProduits, 'massage') }}" alt="{{item.nomProduits}}" height="289" width="415" loading="lazy" />
                                        <span class="zoom-icon"></span>
                                    </div>
                                    <div class="info">
                                        <div class="product_title">
                                            <h3 class="title"> {{item.nomProduits}}</h3>
                                        </div>
                                        <div class="product_prix">
                                            <p> {{ (item.prixProduits|length > 1) ? 'index.apartir'|trans : '' }}
                                                <span>
                                                    {% set lowestPrice = item.prixProduits[0].prixParPersonne %}
                                                    {% for horaire in item.prixProduits %}
                                                        {% if horaire.prixParPersonne < lowestPrice %}
                                                            {% set lowestPrice = horaire.prixParPersonne %}
                                                        {% endif %}
                                                    {% endfor %}
                                                    {{ lowestPrice|number_format(0, '.', ' ') }}DH
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="temps">
                                        {% set combinedDuration = '' %}
                                        {% for horaire in item.prixProduits %}
                                            {% set combinedDuration = combinedDuration ~ horaire.duree.intitule ~ '/' %}
                                        {% endfor %}
                                        <div class="horaire_slide">
                                            <p>
                                                <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="none" viewBox="0 0 19 19">
                                                    <g clip-path="url(#a)">
                                                        <path
                                                            fill="#000"
                                                            d="M9.5 0A9.5 9.5 0 0 1 19 9.5 9.5 9.5 0 0 1 9.5 19 9.5 9.5 0 0 1 0 9.5 9.5 9.5 0 0 1 9.5 0Zm0 1.325a8.175 8.175 0 1 0 0 16.35 8.175 8.175 0 0 0 0-16.35Zm-.883 3.977c.365 0 .662.297.662.663v4.64h4.64a.663.663 0 0 1 0 1.325H8.615a.663.663 0 0 1-.663-.663V5.966c0-.367.297-.664.663-.664Z"
                                                        />
                                                    </g>
                                                    <defs>
                                                        <clipPath id="a">
                                                            <path fill="#fff" d="M0 0h19v19H0z" />
                                                        </clipPath>
                                                    </defs>
                                                </svg>
                                                <span>
                                                    {% set combinedDuration = combinedDuration|trim('/') %}
                                                    {{ combinedDuration }}
                                                </span>
                                            </p>
                                        </div>
                                        <div class="reserver">
                                            <button class="reserver-btn button--ujarak button1">
                                                {{ 'index.découvrir'|trans }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {% endif %}
                        {% endfor %}
                    {% endif %}
                    
                    
                </div>
            </div>
            <div class="slider_btn">
                <a class="slider-btn prev-btn" data-dir="prev"></a>
                <a class="slider-btn next-btn" data-dir="next"></a>
            </div>
        </div>
    </section>
    {% set formuleSlug = '' %}
    <section class="slider_section3">
        <div class="title_"><h2 class="larg_title"> {{ 'index.formules'|trans }} </h2></div>
        <div class="slider-wrapper">
            <div data-slider data-ctrlpos="bottom" data-loop="false" data-slideby="1" data-autoplay="true" data-drag="true" data-ctrl="true" data-breakpoints="992-576-0" data-items="3-3-1">
                {% if produits|length > 0 %}
                    {% for item in produits %}
                        {% if item.typeProduit == 1 %}
                        
                            {% set formuleSlug = item.categorie.slug %}

                            
                            {% set formulesProduits = item.prixProduits[0].formulesProduits %}
                            {% set lowestPrice      = item.prixProduits[0].prixParPersonne %}

                            {% set total = 0 %}
                            {% for it in formulesProduits %}
                                {% set total = total + it.prixProduitParPersonne %}
                            {% endfor %}

                            {% set discountPercentage = ((total - lowestPrice) / total ) * 100 %}
                                
                            <div>
                                <a href="{{ path('fiche_massage', {_locale: app.request.locale , categorie: item.categorie.slug, slug : item.slugProduits }) }}">
                                    <div class="image-container">

                                        {% if discountPercentage > 0 %}
                                            <span class="miniature-icon-promo">
                                                <svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M28.4784 2.83953C30.7359 1.00279 33.5574 0 36.4677 0C39.3781 0 42.1995 1.00279 44.4571 2.83953L45.3028 3.52667L46.3705 3.35224C49.2443 2.89052 52.1894 3.43319 54.7099 4.88887C57.2304 6.34455 59.1723 8.62431 60.2085 11.3442L60.5944 12.3538L61.604 12.7397C64.3239 13.7759 66.6036 15.7178 68.0593 18.2383C69.515 20.7588 70.0577 23.7039 69.5959 26.5777L69.4215 27.6507L70.1087 28.4911L68.3062 29.9552L70.1034 28.4911C73.8932 33.1425 73.8932 39.8131 70.1034 44.4698L69.4215 45.3102L69.5959 46.378C70.0577 49.2517 69.515 52.1969 68.0593 54.7173C66.6036 57.2378 64.3239 59.1797 61.604 60.216L60.5944 60.6018L60.2085 61.6167C59.1713 64.3356 57.2291 66.6142 54.7087 68.0689C52.1883 69.5235 49.2437 70.0655 46.3705 69.6034L45.2975 69.4342L44.4571 70.1161C42.1995 71.9528 39.3781 72.9556 36.4677 72.9556C33.5574 72.9556 30.7359 71.9528 28.4784 70.1161L27.6379 69.429L26.5702 69.6034C23.6971 70.0655 20.7525 69.5235 18.2321 68.0689C15.7117 66.6142 13.7694 64.3356 12.7322 61.6167L12.3464 60.6018L11.3315 60.216C8.61355 59.1778 6.33613 57.2352 4.88248 54.7149C3.42883 52.1946 2.88768 49.2505 3.35009 46.378L3.52452 45.3102L2.83738 44.4645C1.00198 42.2074 0 39.387 0 36.4778C0 33.5686 1.00198 30.7482 2.83738 28.4911L3.52452 27.6454L3.35009 26.5777C2.88768 23.7052 3.42883 20.7611 4.88248 18.2408C6.33613 15.7205 8.61355 13.7778 11.3315 12.7397L12.3464 12.3538L12.7322 11.3442C13.7685 8.62431 15.7104 6.34455 18.2308 4.88887C20.7513 3.43319 23.6964 2.89052 26.5702 3.35224L27.6379 3.52667L28.4784 2.83953Z" fill="#EB001B"/>
                                                </svg>
                                                <span class="miniature-icon-promo-price">-{{discountPercentage|number_format(0, '.', '')}}%</span>
                                            </span>
                                        {% endif %}
                                        
                                        <img src="{{ sonata_path(item.imageProduits, 'formule') }}" alt="{{item.nomProduits}}" width="424" height="289" loading="lazy" />
                                        <div class="image-caption">
                                            <h3 class="product_title">{{ item.nomProduits}}</h3>
                                            <p class="dis">
                                               {{ item.introProduits|raw}}
                                            </p>
                                            <div class="info-image">
                                                {% set lowestPrice = item.prixProduits[0].prixParPersonne %}
                                                {% for horaire in item.prixProduits %}
                                                    {% if horaire.prixParPersonne < lowestPrice %}
                                                        {% set lowestPrice = horaire.prixParPersonne %}
                                                    {% endif %}
                                                {% endfor %}

                                                <div class="price">
                                                    <p>
                                                        {{ (item.prixProduits|length > 1) ? 'index.apartir'|trans : '' }}
                                                        {% if discountPercentage %}
                                                            <span class="original">{{ total }}DH</span>
                                                        {% endif %}
                                                            <span>{{ lowestPrice|number_format(0, '.', ' ') }}DH</span>
                                                    </p>
                                                </div>
                                                <div class="reserver">
                                                    <button class="reserver-btn button--ujarak button1">
                                                        {{ 'index.découvrir'|trans }}
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
        <div class="btn-voir-toute">
            <div>
                <a href="{{ formuleSlug ? path('app_categorie', {_locale: app.request.locale , categorie: formuleSlug }) : '#' }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="44" height="45" fill="" viewBox="0 0 44 44">
                        <g clip-path="">
                            <path
                                fill="currentcolor"
                                d="M36.827 7.173A20.9 20.9 0 0 0 22 1.031 20.9 20.9 0 0 0 7.173 7.173 20.9 20.9 0 0 0 1.031 22a20.9 20.9 0 0 0 6.142 14.827A20.9 20.9 0 0 0 22 42.969a20.9 20.9 0 0 0 14.827-6.142A20.9 20.9 0 0 0 42.969 22a20.9 20.9 0 0 0-6.142-14.827ZM22 0a21.93 21.93 0 0 1 15.556 6.444A21.931 21.931 0 0 1 44 22a21.93 21.93 0 0 1-6.444 15.556A21.931 21.931 0 0 1 22 44a21.93 21.93 0 0 1-15.556-6.444A21.931 21.931 0 0 1 0 22 21.93 21.93 0 0 1 6.444 6.444 21.931 21.931 0 0 1 22 0Z"
                            />
                            <path fill="" d="M8.58 21.818a.513.513 0 1 0 0 1.027l26.84-.001a.513.513 0 0 0 0-1.027H8.58Z" />
                            <path fill="" d="M26.39 31.037a.514.514 0 0 0 .745.71l8.63-9.034a.517.517 0 0 0 .022-.744l-8.64-9.703a.516.516 0 0 0-.77.685l8.342 9.367-8.33 8.72Z" />
                        </g>
                        <defs>
                            <clipPath id="a">
                                <path fill="#fff" d="M0 0h44v44H0z" transform="rotate(-90 22 22)" />
                            </clipPath>
                        </defs>
                    </svg>
                    <p> {{ 'index.voirtoutesnosformules'|trans }} </p>
                </a>
            </div>
        </div>
    </section>
</div>
<section class="gallery_block">
    <div class="image-container">
        <div class="images">
            <img src="{{ asset('front/images/gallery1.jpg') }}" 
                 srcset="{{ asset('front/images/gallery1.jpg') }} 120w,
                         {{ asset('front/images/gallery1.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery1" width="217" height="198" decoding="async" loading="lazy" />
            <img src="{{ asset('front/images/gallery2.jpg') }}" 
                 srcset="{{ asset('front/images/gallery2.jpg') }} 120w,
                         {{ asset('front/images/gallery2.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery2" width="217" height="198" decoding="async" loading="lazy" />
            <img src="{{ asset('front/images/gallery3.jpg') }}" 
                 srcset="{{ asset('front/images/gallery3.jpg') }} 120w,
                         {{ asset('front/images/gallery3.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery3" width="217" height="198" decoding="async" loading="lazy" />
            <img src="{{ asset('front/images/gallery4.jpg') }}" 
                 srcset="{{ asset('front/images/gallery4.jpg') }} 120w,
                         {{ asset('front/images/gallery4.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery4" width="217" height="198" decoding="async" loading="lazy" />
            <img src="{{ asset('front/images/gallery5.jpg') }}" 
                 srcset="{{ asset('front/images/gallery5.jpg') }} 120w,
                         {{ asset('front/images/gallery5.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery5" width="217" height="198" decoding="async" loading="lazy" />
            <img src="{{ asset('front/images/gallery6.jpg') }}" 
                 srcset="{{ asset('front/images/gallery6.jpg') }} 120w,
                         {{ asset('front/images/gallery6.jpg') }} 217w"
                 sizes="(max-width: 700px) 120px, 217px"
                 alt="gallery6" width="217" height="198" decoding="async" loading="lazy" />
        </div>
    </div>
    <div class="image-caption">
        <h4 class="title-gallery">{{'index.gallery_title'|trans|raw }}</h4>
        <p class="dis">
            {{'index.gallery_desc'|trans|raw }}
        </p>
        <a href="{{ path('gallery_' ~ app.request.locale, {_locale: app.request.locale }) }}" class="button1 button--ujarak">
            {{ 'footer.galeriephotos'|trans }}
        </a>
    </div>
</section>
<section class="satisfy-block">
    <div class="title_">
        <h5 class="larg_title"> {{ 'index.apprecete'|trans }} ...</h5>
    </div>
    <div class="items">
        <div class="item">
            <div class="facebook">
                <a href="{{ 'index.urlfacebook'|trans }}" target="_blank">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" fill="none" viewBox="0 0 44 44">
                            <path
                                fill="#EE7D00"
                                d="M25.667 24.75h4.583l1.833-7.333h-6.416V13.75c0-1.888 0-3.667 3.666-3.667h2.75v-6.16c-.597-.079-2.854-.256-5.237-.256-4.978 0-8.513 3.037-8.513 8.616v5.134h-5.5v7.333h5.5v15.583h7.334V24.75Z"
                            />
                        </svg>
                    </span>
                    <p>{{ 'index.avisfacebook'|trans }}</p>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="google">
                <a href="{{ 'index.urlgoogle'|trans }}" target="_blank">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" fill="none" viewBox="0 0 56 56">
                            <path
                                fill="#EE7D00"
                                d="M48.098 25.725c-.017-1.477-.022-2.964-.028-4.446h-4.418c-.017 1.477-.028 2.959-.039 4.446a543.94 543.94 0 0 0-4.44.033v4.424c1.476.016 2.964.027 4.44.044.017 1.476.017 2.958.028 4.435h4.424c.005-1.477.016-2.959.027-4.446 1.488-.017 2.964-.022 4.44-.038v-4.425c-1.47-.01-2.958-.01-4.434-.027Zm-28.985.022c-.005 1.766 0 3.538.006 5.305 2.964.098 5.933.054 8.897.098-1.307 6.579-10.248 8.712-14.978 4.413-4.868-3.768-4.638-12.031.42-15.531 3.539-2.822 8.565-2.127 12.103.317 1.389-1.285 2.69-2.663 3.943-4.085-2.942-2.346-6.552-4.02-10.39-3.845-8.018-.267-15.384 6.754-15.516 14.777-.514 6.557 3.796 12.983 9.877 15.302 6.06 2.335 13.83.743 17.702-4.703 2.554-3.44 3.107-7.87 2.806-12.032-4.96-.038-9.915-.033-14.87-.016Z"
                            />
                        </svg>
                    </span>
                    <p>{{ 'index.avisgoogle'|trans }}</p>
                </a>
            </div>
        </div>
        <div class="item">
            <div class="hubspot">
                <a href="{{ 'index.urlsiteweb'|trans }}" target="_blank">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
                            <g clip-path="url(#a)">
                                <path fill="#EE7D00" d="M20 40c11.046 0 20-8.954 20-20S31.046 0 20 0 0 8.954 0 20s8.954 20 20 20Z" />
                                <path
                                    fill="#fff"
                                    d="m32.353 16.098 2.414-2.625h-5.352A16.614 16.614 0 0 0 20 10.576a16.575 16.575 0 0 0-9.397 2.897H5.238l2.413 2.625a7.377 7.377 0 1 0 9.984 10.863L20 29.535l2.364-2.572a7.38 7.38 0 1 0 9.989-10.865Zm-19.73 10.445a4.992 4.992 0 1 1 4.992-4.992 4.992 4.992 0 0 1-4.992 4.992Zm7.38-5.137c0-3.285-2.39-6.105-5.543-7.31A14.327 14.327 0 0 1 20 12.988c1.964 0 3.837.395 5.542 1.108-3.15 1.207-5.54 4.025-5.54 7.31Zm7.376 5.137a4.992 4.992 0 1 1 4.992-4.992 4.992 4.992 0 0 1-4.992 4.992Zm0-7.611a2.616 2.616 0 1 0 0 5.234 2.616 2.616 0 1 0 0-5.234ZM15.24 21.55a2.616 2.616 0 1 1-5.233 0 2.616 2.616 0 1 1 5.233 0Z"
                                />
                            </g>
                            <defs>
                                <clipPath id="a">
                                    <path fill="#fff" d="M0 0h40v40H0z"/>
                                </clipPath>
                            </defs>
                        </svg>
                    </span>
                    <p>{{ 'index.avissiteweb'|trans }}</p>
                </a>
            </div>
        </div>
    </div>
</section>
<section class="block_etaps">
    <div class="title_">
        <h5 class="larg_title"> {{ 'index.reservez'|trans }} </h5>
    </div>
    <div class="items">
        <div class="flex-item" data-slider data-ctrlpos="bottom" data-loop="false" data-slideby="1" data-nav="true" data-autoplay="true" data-drag="true" data-breakpoints="992-576-0" data-items="3-3-1">
            <div>
                <div class="item">
                    <div>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
                                <circle cx="20" cy="20" r="20" fill="#EE7D00" />
                                <path fill="#fff" d="m16.42 17.64 3.36-.88V28h2.78V13.76l-6.14 1.3v2.58Z" />
                            </svg>
                        </span>
                        <h6>{{ 'index.acheter'|trans }} </h6>
                        <p class="dis">
                            {{ 'index.soins_dist'|trans }}
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <div class="item">
                    <div>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
                                <circle cx="20" cy="20" r="20" fill="#EE7D00" />
                                <path
                                    fill="#fff"
                                    d="M14.4 27h11.26v-2.62H19.8l3.64-3.44a6.902 6.902 0 0 0 1.42-1.78c.36-.653.54-1.353.54-2.1a3.89 3.89 0 0 0-.32-1.52 3.916 3.916 0 0 0-.94-1.38c-.413-.427-.94-.767-1.58-1.02-.627-.267-1.36-.4-2.2-.4-1.133 0-2.093.24-2.88.72a4.562 4.562 0 0 0-1.76 1.9c-.4.8-.6 1.7-.6 2.7h2.8c0-.56.093-1.053.28-1.48.2-.427.473-.753.82-.98.36-.24.787-.36 1.28-.36.347 0 .653.06.92.18.267.107.493.253.68.44.187.187.327.4.42.64.093.24.14.487.14.74 0 .36-.067.707-.2 1.04a4.304 4.304 0 0 1-.58 1c-.253.333-.56.693-.92 1.08L14.4 27Z"
                                />
                            </svg>
                        </span>
                        <h6> {{ 'index.acheter1'|trans }}</h6>
                        <p>
                            {{ 'index.soins_dist1'|trans }}
                        </p>
                    </div>
                </div>
            </div>
            <div>
                <div class="item">
                    <div>
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40">
                                <circle cx="20" cy="20" r="20" fill="#EE7D00" />
                                <path
                                    fill="#fff"
                                    d="M19.36 20.18c1.053 0 1.993-.14 2.82-.42.827-.28 1.48-.687 1.96-1.22.48-.547.72-1.2.72-1.96 0-.707-.18-1.347-.54-1.92-.36-.573-.887-1.033-1.58-1.38-.68-.347-1.507-.52-2.48-.52-.92 0-1.727.18-2.42.54-.693.36-1.24.853-1.64 1.48-.387.613-.58 1.32-.58 2.12h2.66c0-.52.187-.947.56-1.28.387-.347.86-.52 1.42-.52.4 0 .727.067.98.2s.447.327.58.58c.133.253.2.547.2.88 0 .267-.067.527-.2.78-.12.24-.293.46-.52.66a2.508 2.508 0 0 1-.84.44c-.32.107-.687.16-1.1.16v1.38Zm.78 7.1c1.04 0 1.94-.167 2.7-.5.773-.347 1.367-.827 1.78-1.44.427-.613.64-1.32.64-2.12 0-.707-.147-1.307-.44-1.8a3.453 3.453 0 0 0-1.24-1.24c-.533-.333-1.16-.573-1.88-.72a11.534 11.534 0 0 0-2.34-.22v1.52c.493 0 .927.053 1.3.16.387.093.707.233.96.42.267.187.467.42.6.7.133.267.2.56.2.88 0 .44-.093.807-.28 1.1a1.85 1.85 0 0 1-.78.68c-.32.147-.7.22-1.14.22-.427 0-.82-.08-1.18-.24a2.113 2.113 0 0 1-.86-.74c-.213-.32-.32-.707-.32-1.16h-2.84c0 .6.12 1.173.36 1.72.24.533.58 1.013 1.02 1.44.44.413.973.74 1.6.98.627.24 1.34.36 2.14.36Z"
                                />
                            </svg>
                        </span>
                        <h6> {{ 'index.acheter2'|trans }} </h6>
                        <p> {{ 'index.soins_dist2'|trans }} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="download_fiche">
    <div class="carte-soine">
        <div><img src="{{ asset('front/images/pdf_image.jpg') }}" alt="carte-soine" decoding="async" loading="lazy" /></div>
        <div class="pdf">
            <p> {{ 'index.telecharger'|trans }} </p>
            <a href="{{ asset('front/images/carte-de-soins-natea.pdf') }}" target="_blank">
                {{ 'index.consultez_pdf'|trans }}
            </a>
        </div>
    </div>
</section>
{% endblock %}