<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Témoignages - Notre Entreprise</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" />
    <link rel="stylesheet" href="css/all.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>    
    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
    <link rel="stylesheet" href="css/templatemo-style.css" />
  </head>

  <body id="servicesPage">
    <div class="parallax-window" data-parallax="scroll" data-image-src="img/bg-01.jpg">
      <div class="container-fluid">
        <div class="row tm-brand-row">
          <div class="col-lg-4 col-11">
            <div class="tm-brand-container tm-bg-white-transparent">
              <i class="fas fa-2x fa-pen tm-brand-icon"></i>
              <div class="tm-brand-texts">
                <h1 class="text-uppercase tm-brand-name">Notre Entreprise</h1>
                <p class="small">Solutions innovantes pour votre succès</p>
              </div>
            </div>
          </div>
          <div class="col-lg-8 col-1">
            <div class="tm-nav">
              <nav class="navbar navbar-expand-lg navbar-light tm-bg-white-transparent tm-navbar">
                <button
                  class="navbar-toggler"
                  type="button"
                  data-toggle="collapse"
                  data-target="#navbarNav"
                  aria-controls="navbarNav"
                  aria-expanded="false"
                  aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                  <ul class="navbar-nav">
                    <!-- ACCUEIL -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="index.php">Accueil</a>
                    </li>

                    <!-- À PROPOS -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="about.php">À propos</a>
                    </li>

                    <!-- SERVICES (MENU DÉROULANT) -->
                    <li class="nav-item dropdown">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                        Services
                      </a>
                      <div class="dropdown-menu" aria-labelledby="servicesDropdown">
                        <a class="dropdown-item" href="#">Conseil en stratégie</a>
                        <a class="dropdown-item" href="#">Audit et conformité</a>
                        <a class="dropdown-item" href="#">Support technique 24/7</a>
                        <a class="dropdown-item" href="#">Maintenance applicative</a>
                      </div>
                    </li>

                    <!-- SOLUTIONS (MENU DÉROULANT) -->
                    <li class="nav-item dropdown">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link dropdown-toggle" href="#" id="solutionsDropdown" role="button" data-toggle="dropdown" aria-expanded="false">
                        Solutions
                      </a>
                      <div class="dropdown-menu" aria-labelledby="solutionsDropdown">
                        <a class="dropdown-item" href="#">Solution CRM</a>
                        <a class="dropdown-item" href="#">Solution ERP</a>
                        <a class="dropdown-item" href="#">Infrastructure Cloud</a>
                        <a class="dropdown-item" href="#">Intelligence Artificielle</a>
                        <a class="dropdown-item" href="#">Cybersécurité</a>
                      </div>
                    </li>

                    <!-- FORMATION -->
                    <li class="nav-item">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="#">Formation</a>
                    </li>

                    <!-- CONTACT -->
                    <li class="nav-item green-highlight active">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="contact.php">Contact</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>

        <!-- Testimonials header -->
        <section class="row" id="tmServices">
          <div class="col-12">
            <div class="parallax-window tm-services-parallax-header tm-testimonials-parallax-header"
                 data-parallax="scroll"
                 data-z-index="101"
                 data-image-src="img/ice-mountain.jpg">

                 <div class="tm-bg-black-transparent text-center tm-services-header tm-testimonials-header">
                    <h2 class="text-uppercase tm-services-page-title tm-testimonials-page-title">Ils nous font confiance</h2>
                    <p class="tm-services-description mb-0 small">
                        Découvrez les témoignages de nos clients satisfaits.
                    </p>
                </div>
            </div>
          </div>   
        </section>

        <section class="row tm-testimonials-section">
            <div class="col-12 tm-carousel">              
                <div class="tm-bg-black-transparent tm-testimonial-box text-center">                    
                  <div class="tm-person-img-container">
                    <img src="img/person-1.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Marie Dupont</h3>
                  <p class="tm-about-description">
                    "Une équipe professionnelle et réactive. Leur accompagnement nous a permis de transformer complètement notre système d'information."
                  </p>
                </div>

                <div class="tm-bg-black-transparent tm-testimonial-box text-center">
                  <div class="tm-person-img-container">
                    <img src="img/person-2.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Jean Martin</h3>
                  <p class="tm-about-description">
                    "Je recommande vivement leurs services. Une expertise technique remarquable et un suivi personnalisé de qualité."
                  </p>
                </div>

                <div class="tm-bg-black-transparent tm-testimonial-box text-center">
                  <div class="tm-person-img-container">
                    <img src="img/person-3.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Sophie Bernard</h3>
                  <p class="tm-about-description">
                    "Un partenaire de confiance qui a su comprendre nos besoins et nous proposer des solutions adaptées."
                  </p>
                </div>

                <div class="tm-bg-black-transparent tm-testimonial-box text-center">
                  <div class="tm-person-img-container">
                    <img src="img/person-1.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Thomas Dubois</h3>
                  <p class="tm-about-description">
                    "Excellente prestation ! Leur support technique est très réactif et compétent."
                  </p>
                </div>    
                <div class="tm-bg-black-transparent tm-testimonial-box text-center">
                  <div class="tm-person-img-container">
                    <img src="img/person-2.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Isabelle Lefèvre</h3>
                  <p class="tm-about-description">
                    "Un vrai professionnalisme et des résultats à la hauteur de nos attentes. Merci à toute l'équipe !"
                  </p>
                </div>

                <div class="tm-bg-black-transparent tm-testimonial-box text-center">
                  <div class="tm-person-img-container">
                    <img src="img/person-3.png" alt="Client" class="img-fluid mx-auto"/>
                  </div>              
                  <h3 class="tm-about-name tm-uppercase">Philippe Moreau</h3>
                  <p class="tm-about-description">
                    "Une collaboration excellente. Ils ont su nous guider et nous conseiller tout au long de notre projet."
                  </p>
                </div>          
          </div>
        </section>

        <!-- Call to Action -->
        <section class="row tm-testimonials-cta" id="tmCallToAction">
          <div class="col-12 tm-call-to-action-col">
            <img src="img/call-to-action-2.jpg" alt="Image" class="img-fluid tm-call-to-action-image" />
            <div class="tm-bg-white tm-call-to-action-text">
              <h2 class="tm-call-to-action-title">Rejoignez nos clients satisfaits</h2>
              <p class="tm-call-to-action-description">
                Vous aussi, bénéficiez de notre expertise et de nos solutions innovantes pour votre entreprise.
              </p>
              <form action="#" method="get" class="tm-call-to-action-form">                
                <input name="email" type="email" class="tm-email-input" id="email" placeholder="Votre email" />
                <button type="submit" class="btn btn-secondary">Nous contacter</button>
              </form>
            </div>
          </div>
        </section>

        <!-- Page footer -->
        <footer class="row">
          <p class="col-12 text-white text-center tm-copyright-text">
            Copyright &copy; 2025 Notre Entreprise. 
            Designed by <a href="#" class="tm-copyright-link">Votre Entreprise</a>
          </p>
        </footer>
      </div>
      <!-- .container-fluid -->
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="js/parallax.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="slick/slick.min.js"></script>
    <script>
        $(function(){
            $('.tabgroup > div').hide();
            $('.tabgroup > div:first-of-type').show();  
            $('.tabs a').click(function(e){
              e.preventDefault();
              var $this = $(this),
                  tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
                  others = $this.closest('li').siblings().children('a'),
                  target = $this.attr('href');
              others.removeClass('active');
              $this.addClass('active');
              $(tabgroup).children('div').hide();
              $(target).show();

              if($(window).width() < 992) {
                  $('html, body').animate({
                      scrollTop: $("#first-tab-group").offset().top
                  }, 200);    
              }              
            })

            $('.tm-carousel').slick({
                dots: true,
                infinite: false,
                arrows: false,
                speed: 300,
                slidesToShow: 3,
                slidesToScroll: 2,
                responsive: [
                    {
                      breakpoint: 1024,
                      settings: {
                          arrows: false,
                          slidesToShow: 2,
                          slidesToScroll: 1,
                          infinite: true,
                          dots: true
                      }
                    },
                    {
                      breakpoint: 600,
                      settings: {
                          arrows: false,
                          slidesToShow: 1,
                          slidesToScroll: 1
                      }
                    },
                    {
                      breakpoint: 480,
                      settings: {
                          arrows: false,
                          slidesToShow: 1,
                          slidesToScroll: 1
                      }
                    }
                  ]
            });  
        });
    </script>
    
    <style>
        .dropdown-menu {
            background-color: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 0;
            margin-top: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .dropdown-item {
            padding: 10px 20px;
            font-size: 0.9rem;
            color: #333;
            transition: all 0.3s ease;
        }
        .dropdown-item:hover {
            background-color: #006666;
            color: white;
        }
        @media (max-width: 991px) {
            .dropdown-menu {
                background-color: rgba(255, 255, 255, 0.98);
                position: static !important;
                transform: none !important;
                width: 100%;
                margin-top: 0;
                padding-left: 20px;
            }
            .dropdown-item {
                padding: 8px 20px;
            }
        }
    </style>
  </body>
</html>