{{-- ✂️ Layout --}}
@extends("layouts.master", ["viewName" => "aboutPage"])


{{-- ⚙️ Scripts relatifs à la view --}}
@section("js")
{{-- <script src="./test.js"></script> --}}
@stop


{{-- 🎨 Style relatifs à la view ---}}
@section("css")
{{-- <script src="./test.js"></script> --}}
@stop


{{-- 🔥 Content --}}
@section("content")

  {{-- Banner Section --}}
  <section class="banner banner--overlap" role="banner">
    <div class="banner__img">
      <img class="banner__img__src" src="{{ asset('img/banner-group.jpg') }}" alt="Alt Text goes here">
    </div>
    <div class="banner__content">
      <h1 class="banner__maintitle">Le groupe</h1>
    </div>
  </section>

  {{-- Page Body --}}
  <div class="wrapper ">

    {{-- Main --}}
    <section class="mainContent banner--overlap">

      {{-- <button class="js-showpopup btn" data-target="devis">Show Devis</button> --}}

      {{-- {{ Présentation du groupe }} --}}
      <section class="sectionLayout sectionLayout--indent">
        <div class="row">
          <div class="col-xs-12 col-lg-4 col-md-4 center-xs mb-mob">
            <div class="aboutGroup__logo">
              <img src="{{ asset('img/logo-sergic.png') }}" alt="">
            </div>
          </div>
          <div class="col-xs-12 col-lg-8 col-md-8 center-xs top-sm">
            <div class="aboutGroup__content">
              <div data-editable data-name="{!! $contents['aboutGroup__text']['id'] ?? '' !!}">
                  {!! $contents['aboutGroup__text']['value'] ?? '' !!}
              </div>
            </div>
          </div>
        </div>
      </section>
      {{-- {{ End Présentation du groupe }} --}}

      {{-- Boxes Informations Groupe --}}

      <section class="sectionLayout">

          <div class="rowbox">

            <div class="box">
              <img class="fw box__picture" src="{{ asset('img/clients-geres.jpg') }}" alt="">
                <div class="box__content">
                  <svg class="icon box__icon">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-clients') }}">
                    </use>
                  </svg>
                  <p class="box__infos box__infos--white">
                    <span class="box__infos box__infos--numbers box__infos--white">+ 12 000</span>
                      CLIENTS GÉRÉS
                  </p>
                </div>
            </div>

            <div class="box box--grow order">
              <div class="box__content box__content__text">
                <h2 class="box__title">Nos convictions</h2>
                <p class="box__text">Pour Sergic, l'immobilier va bien au delà des métiers de la location, la gestion, la transaction ou de syndic de copropriété. Sergic a conscience qu'un lieu de vie sans liens entre les habitants est en réalité un lieu sans vie.</p> &nbsp;
                <p class="box__text">C'est pourquoi Sergic mène de front cette mission de créateur de liens entre les habitants d'un immeuble, d'un quartier et d'une ville, pour l'épanouissement de chacun.</p>
              </div>
            </div>

            <div class="box">
              <img class="fw box__picture" src="{{ asset('img/immeuble-geres.jpg') }}" alt="">
                <div class="box__content">
                  <svg class="icon box__icon">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-immeubles') }}">
                    </use>
                  </svg>
                  <p class="box__infos box__infos--white">
                    <span class="box__infos box__infos--numbers box__infos--white">110 000</span>
                      immeubles gérés
                  </p>
                </div>
            </div>

          </div>

          <div class="rowbox">

            {{-- <div class="box order">
              <div class="box__content box__content__text">
                <h2 class="box__title">Une solution moderne & performante dédiée aux petits et grands immeubles</h2>
                <p class="box__text">Bénéficiez d’une gestion par un syndic professionnel reconnu. Plus qu’un prix attractif, Sergic offre des solutions de gestion innovantes spécialement conçues pour les petits et grands immeubles.</p>
              </div>
            </div> --}}

            <div class="box">
              <img class="fw box__picture" src="{{ asset('img/agences.jpg') }}" alt="">
                <div class="box__content">
                  <svg class="icon box__icon">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-agences') }}">
                    </use>
                  </svg>
                  <p class="box__infos box__infos--white">
                    <span class="box__infos box__infos--numbers box__infos--white">37</span>
                      agences
                  </p>
                </div>
            </div>

            <div class="box box--grow">
              <img class="fw box__picture" src="{{ asset('img/equipe-competente.jpg') }}" alt="">
                <div class="box__content">
                  <svg class="icon box__icon">
                    <use xlink:href="{{ asset('img/sprite.svg#icon-clients') }}">
                    </use>
                  </svg>
                  <p class="box__infos box__infos--white">
                    750 professionnelles et experts à votre service
                  </p>
                </div>
            </div>

            <div class="box margin">
                <div class="box__content">
                <img src="{{ asset('img/picto_france.png') }}" alt="france" class="box__picture--relative">
                  <p class="box__title">
                    4ème acteur de l'immobilier en france
                  </p>
                </div>
            </div>

          </div>

      </section>

      {{-- End Boxes Informations Groupe --}}


      {{-- Video groupe --}}
      {{-- <div class="sectionLayout videoCompoSection">

        <h2 class="sectionTitle">Découvrez le groupe Sergic en vidéo</h2>

        <div class="row middle-md">
          <div class="col-xs-12 col-md-6 middle-md">
            

            <div href="#" class="videoComp">
              <a data-fslightbox href="https://www.youtube.com/watch?v=wGSRPk805_E" class="videoComp__btn"></a>

              <div class="videoComp__content">
                <svg class="icon videoComp__icon">
                  <use xlink:href="http://localhost:8088/img/sprite.svg#icon-play">
                  </use>
                </svg>
                <span class="btn">Notre groupe en vidéo</span>
              </div>


              <img class="videoComp__placeholder" src="{{ asset('img/banner-group.jpg') }}" alt="">
            </div>

          </div> 
          <div class="col-xs-12 col-md-6 middle-md">
            <div class="videoCompoText middle-md">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
          </div>
        </div>

      </div> --}}
      {{-- End Video groupe --}}





      {{-- Les 3 offres Sergic  --}}
      <section class="card__section">
        <h2 class="sectionTitle">Les 3 offres syndic Sergic</h2>
          <div class="card__container">
            <div class="card">
              <a href="/syndicone" class="card__link">
                <div class="card__picture__container">
                  <img class="card__picture" src="{{ asset('img/logo_syndicone_xl.png') }}" alt="">
                </div>
                <div class="card__content">
                    <div data-editable data-name="{!! $contents['card__title_so']['id'] ?? '' !!}">
                        {!! $contents['card__title_so']['value'] ?? '' !!}
                    </div>
                    <div data-editable data-name="{!! $contents['card__text_so']['id'] ?? '' !!}">
                        {!! $contents['card__text_so']['value'] ?? '' !!}
                    </div>
                  <span class="btn btn--green card__button">Découvrir l'offre</span>
                </div>
              </a>
            </div>

            <div class="card">
              <a class="card__link" href="/vivasyndic">
                <div class="card__picture__container">
                  <img class="card__picture" src="{{ asset('img/logo_vivasyndic_xl.png') }}" alt="">
                </div>
                <div class="card__content">
                    <div data-editable data-name="{!! $contents['card__title_vs']['id'] ?? '' !!}">
                        {!! $contents['card__title_vs']['value'] ?? '' !!}
                    </div>
                    <div data-editable data-name="{!! $contents['card__text_so']['id'] ?? '' !!}">
                        {!! $contents['card__text_vs']['value'] ?? '' !!}
                    </div>
                  <span class="btn btn--red card__button">Découvrir l'offre</span>
                </div>
              </a>
            </div>

            <div class="card">
              <a class="card__link" href="/eseissyndic">
                <div class="card__picture__container">
                  <img class="card__picture" src="{{ asset('img/logo_eseis_xl.png') }}" alt="">
                </div>
                <div class="card__content">
                    <div data-editable data-name="{!! $contents['card__title_es']['id'] ?? '' !!}">
                        {!! $contents['card__title_es']['value'] ?? '' !!}
                    </div>
                    <div data-editable data-name="{!! $contents['card__text_es']['id'] ?? '' !!}">
                        {!! $contents['card__text_es']['value'] ?? '' !!}
                    </div>
                  <span class="btn btn--blue card__button">Découvrir l'offre</span>
                </div>
              </a>
            </div>
          </div>

          <div class="card__offers pt-desk mt-mob">
            <a href="/" class="btn btn--outline card__offers--button">Découvrez les 3 offres de Sergic</a>
          </div>

      </section>


      {{-- End Les 3 offres Sergic  --}}

      {{-- L'engagement --}}
      <section class="sectionLayout">
        <h2 class="sectionTitle">L’engagement sergic</h2>
        <div class="row">
          <div class="col-xs-12 col-lg-5 col-md-6">

          {{-- Egagement Sergic Loop --}}
          <div class="iconTextBoxes pt-desk pb-desk">

            {{-- Engagement Sergic Item --}}
            <div class="iconTextBox">
              <div class="iconTextBox__content">
                <h3 class="iconTextBox__title">Des offres claires et transparentes</h3>
                <p class="iconTextBox__text">Sergic vous propose trois offres de syndic qui s’adapte en toute transparence aux besoins de votre copropriété.</p>
              </div>
              <div class="iconTextBox__img">
                <svg class="icon iconTextBox__img__svg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-main-maison') }}">
                  </use>
                </svg>
              </div>
            </div>
            {{-- End Engagement Sergic Item --}}

            {{-- Engagement Sergic Item --}}
            <div class="iconTextBox">
              <div class="iconTextBox__content">
                <h3 class="iconTextBox__title">Des valeurs fortes</h3>
                <p class="iconTextBox__text">Depuis 1963, Sergic bâtit sa réputation sur des valeurs de performance, d’ouverture, de simplicité et d’innovation.</p>
              </div>
              <div class="iconTextBox__img">
                <svg class="icon iconTextBox__img__svg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-mains-coeur') }}">
                  </use>
                </svg>
              </div>
            </div>
            {{-- End Engagement Sergic Item --}}

            {{-- Engagement Sergic Item --}}
            <div class="iconTextBox">
              <div class="iconTextBox__content">
                <h3 class="iconTextBox__title">Des experts à votre écoute</h3>
                <p class="iconTextBox__text">Dans votre copropriété, dans nos 40 agences, à distance ou en ligne, nos experts sont disponibles pour répondre à vos questions.</p>
              </div>
              <div class="iconTextBox__img">
                <svg class="icon iconTextBox__img__svg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-experts-ecoute') }}">
                  </use>
                </svg>
              </div>
            </div>
            {{-- End Engagement Sergic Item --}}

            {{-- Engagement Sergic Item --}}
            <div class="iconTextBox">
              <div class="iconTextBox__content">
                <h3 class="iconTextBox__title">Des applications mobiles pour vous</h3>
                <p class="iconTextBox__text">Que ce soit chez vous depuis votre ordinateur ou en mobilité avec nos applications, votre espace client est toujours accessible.</p>
              </div>
              <div class="iconTextBox__img">
                <svg class="icon iconTextBox__img__svg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-applications') }}">
                  </use>
                </svg>
              </div>
            </div>
            {{-- End Engagement Sergic Item --}}

          </div>
          {{-- End Engagement Sergic Loop --}}

          </div>
          <div class="col-lg-7 col-md-6 col-xs-12">

            {{-- 2 images presentation --}}
            <section class="imagesDisplay">
              <img class="imagesDisplay__item imagesDisplay__item--tl" src="{{ asset('img/engagement-01.jpg') }}" alt="alt texte image">
              <img class="imagesDisplay__item imagesDisplay__item--br" src="{{ asset('img/engagement-02.jpg') }}" alt="alt texte image">
            </section>
            {{-- end 2 Images presentation --}}

          </div>
        </div>
      </section>
      {{-- End L'engagement --}}


      {{-- Avis des utilisateurs  --}}
      <section class="sectionLayout">
        <div class="row">
          <div class="col-xs-12">
            <ul class="users__reviews__listing">

              {{-- Avis 1  --}}
              <li class="users__reviews__item users__reviews__item--desktop">
                <a href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow"  class="users__reviews__link">
                  <img class="users__reviews__img" src="{{ asset('img/logo_immodvisor.png') }}" alt="">
                </a>
                <div class="users__reviewsAll--all">
                  <a  href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow"  class="users__reviews__link--all">Voir tous les avis</a>
                </div>
                <div class="users__reviews__content users__reviews__content--big">
                  <div class="users__reviews__content--desktop">
                    <h2 class="users__reviews__note">
                      <span class="users__reviews__note users__reviews__note--big">4</span>
                      / 5
                    </h2>
                    <div class="users__reviews__stars">
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#half-star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                    </div>
                  </div>
                  <p class="users__reviews__text">Réalisé par un organisme indépendant</p>
                </div>
              </li>

              {{-- Avis 2  --}}
              <li class="users__reviews__item">
                <div class="users__reviews__content">
                  <div class="users__reviews__stars">
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use  fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                  </div>
                  <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                  <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                </div>
              </li>

              {{-- Avis 3 --}}
              <li class="users__reviews__item">
                <div class="users__reviews__content">
                  <div class="users__reviews__stars">
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                    <svg class="icon users__reviews__icon">
                      <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                      </use>
                    </svg>
                  </div>
                  <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                  <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                </div>
              </li>

              {{-- Avis 4 --}}
              <li class="users__reviews__item">
                <a href="https://www.immodvisor.com/pro/sergic-lille-59000-23175.html" target="_blank" rel="noopener, noreferrer, nofollow"  class="users__reviewsAll">
                  <div class="users__reviews__content">
                    <div class="users__reviews__stars">
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use  fill="#019ae1" xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                      <svg class="icon users__reviews__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#star') }}">
                        </use>
                      </svg>
                    </div>
                    <h3 class="users__reviews__title">« Très bonne expérience personnelle, très agréable et à l’écoute. </h3>
                    <p class="users__reviews__text">Prestation réalisée en Juin 2019 </p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </section>
      {{-- End Avis des utilisateurs  --}}


      {{-- Faq - plus d'infos --}}
      <section class="sectionLayout sectionLayout__smallBgContainer">
        <div class="sectionLayout__smallBg">&nbsp;</div>
        <div class="row">
          <div class="col-xs-12 col-md-6 top-md">
            <section class="plusInfoBox">
              <div class="plusInfoBox__top">
                <svg class="icon  plusInfoBox__img">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-more-infos') }}">
                  </use>
                </svg>
                <h2 class="plusInfoBox__title">Vous avez besoin de plus d’informations ?</h2>
              </div>
              <p class="plusInfoBox__desc">Souscription, aide, accompagnement... Nos équipes répondent à toutes vos questions !</p>
              {{--
              <a href="tel:0600000000" class="btn btn--outline btn--icon">
                <svg class="icon btn--iconImg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-telephone') }}">
                  </use>
                </svg>
                <span class="plusInfoBox__tel--mob">Par téléphone</span>
                <span class="plusInfoBox__tel--desk">06 00 00 00 00</span>
              </a>
              --}}
              <button class="btn btn--outline btn--icon js-showpopup js-datalayer-contact" data-eventname="contact email" data-actionname="clic" data-position="page" data-target="contact">
                <svg class="icon btn--iconImg">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-messagerie') }}">
                  </use>
                </svg>
                <span>Par email</span>
              </button>
            </section>
          </div>
          <div class="col-md-6">
            <div class="faqBox js-faqAccordion js-showMoreQuestion">
              <div class="faqBox__header">
                <svg class="icon  faqBox__img">
                  <use xlink:href="{{ asset('img/sprite.svg#icon-FAQ') }}">
                  </use>
                </svg>
                <h2 class="faqBox__title">Foire Aux Questions</h2>
              </div>
              <ul class="faqBox__listing ">
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Comment changer de syndic ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Comment se passe la passation ? </h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>2 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">4. Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>

                  </div>
                </li>
                <li class="faqBox__question">
                  <div class="faqBox__question__head">
                    <h3 class="faqBox__question__title">Quelle est la différence entre le syndic en ligne et le synidc traditionnel ?</h3>
                    <button class="faqBox__question__btn">
                      <svg class="icon faqBox__question__btn__icon">
                        <use xlink:href="{{ asset('img/sprite.svg#angledown') }}">
                        </use>
                      </svg>
                    </button>
                  </div>
                  <div class="faqBox__question__body">
                    <p>4 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur ipsam exercitationem illo facere saepe nihil fugiat ipsum officiis ducimus commodi quos, distinctio odit soluta quia harum laboriosam perferendis. Optio, necessitatibus.</p>
                  </div>
                </li>
              </ul>

              {{-- Show button only if (questions length >= 4) --}}
              <button class="faqBox__btn btn btn--outline js-showMoreFaq">Voir plus de questions</button>
            </div>
          </div>
        </div>
      </section>
      {{-- End - Faq - plus d'infos --}}

    </section>
    {{-- End Main --}}
  </div>


    {{-- Popup devis --}}
    @include('partials.popupdevis', ["productName" => ""])

    {{-- Popup contact --}}
    @include('partials.popupcontact')


@stop