<!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>Services - 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" 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 green-highlight active">
                      <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">
                      <div class="tm-nav-link-highlight"></div>
                      <a class="nav-link" href="contact.php">Contact</a>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </div>

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

                 <div class="tm-bg-black-transparent text-center tm-services-header">
                    <h2 class="text-uppercase tm-services-page-title">Nos Services</h2>
                    <p class="tm-services-description mb-0 small">
                        Découvrez l'ensemble de nos prestations conçues pour répondre à vos besoins.<br>
                        Nous vous accompagnons à chaque étape de votre projet pour garantir votre réussite.
                    </p>
                </div>
            </div>
          </div>  

          <div class="col-12">
            <div class="tm-bg-black-transparent tm-services-detail-box">
                <p>
                    Notre équipe d'experts met à votre disposition son savoir-faire et son expérience pour vous offrir des services de qualité. Que vous soyez une PME ou une grande entreprise, nous adaptons nos prestations à vos besoins spécifiques.
                </p>
                <p>
                    Nous croyons en une relation de confiance avec nos clients. C'est pourquoi nous privilégions une approche personnalisée et un suivi régulier pour garantir la réussite de vos projets.
                </p>
            </div>
          </div> 

          <div class="col-12 tm-tabs-container">
              <div class="tm-tab-links">
                    <ul class="tabs clearfix" data-tabgroup="first-tab-group">
                        <li><a href="#tab1" class="active">
                            <div class="icon-wrap"><i class="fas fa-2x fa-chart-line"></i></div>
                            Conseil & Stratégie                        
                        </a></li>
                        <li><a href="#tab2" class="">
                            <div class="icon-wrap"><i class="fas fa-2x fa-shield-alt"></i></div>
                            Audit & Conformité             
                        </a></li>
                        <li><a href="#tab3" class="">
                            <div class="icon-wrap"><i class="fas fa-2x fa-headset"></i></div>
                            Support & Maintenance             
                        </a></li>                    
                    </ul>
                </div>  
                <div class="tm-tab-contents">
                    <div id="first-tab-group" class="tabgroup">
                        <div id="tab1">                            
                            <div class="text-content">
                                <h3 class="tm-service-tab-title">Conseil en stratégie digitale</h3>
                                <p class="tm-service-tab-p">Nous vous aidons à définir une stratégie digitale adaptée à vos objectifs et à votre marché. Notre approche méthodologique vous garantit des résultats concrets et mesurables.
                                </p>                            
                                <p class="mb-0">
                                    Nous analysons votre environnement, identifions les opportunités et vous accompagnons dans la mise en œuvre de votre stratégie pour maximiser votre retour sur investissement.
                                </p>
                            </div>
                        </div>
                        <div id="tab2">
                            <div class="text-content">
                                <h3 class="tm-service-tab-title">Audit et conformité</h3>
                                <p class="tm-service-tab-p">Nous réalisons des audits complets de vos systèmes d'information pour identifier les axes d'amélioration et garantir votre conformité aux normes en vigueur.                             
                                </p>                            
                                <p class="mb-0">
                                    Notre expertise vous permet d'anticiper les risques et de mettre en place les mesures nécessaires pour sécuriser votre infrastructure.
                                </p>
                            </div>
                        </div>
                        <div id="tab3">
                            <div class="text-content">
                                <h3 class="tm-service-tab-title">Support technique et maintenance</h3>
                                <p class="tm-service-tab-p">Notre équipe technique est disponible pour vous assurer un support réactif et une maintenance préventive de vos applications et infrastructures.
                                </p>                            
                                <p class="mb-0">
                                    Nous garantissons la disponibilité et les performances de vos systèmes avec des interventions rapides et efficaces.
                                </p>
                            </div>
                        </div>

                    </div>
                </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>
        $(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();

              // Scroll to tab content (for mobile)
              if($(window).width() < 992) {
                  $('html, body').animate({
                      scrollTop: $("#first-tab-group").offset().top
                  }, 200);    
              }              
            })  
        });
    </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>