<!DOCTYPE html>
<html>

<head>
	<!-- code mi desactiver clic droite sy raccourcis -->
	<style>
		#notification {
			display: none;
			z-index: 9999;
			position: fixed;
			bottom: 85%;
			left: 50%;
			transform: translateX(-50%);
			background-color: rgba(0, 0, 0, 0.7);
			color: rgb(255, 0, 0);
			padding: 10px;
			border-radius: 5px;
			font-size: 14px;
		}
	</style>
</head>

<!-- Div pour afficher la notification -->
<div id="notification">Les outils de développement sont désactivés sur cette page !</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		// Fonction pour afficher la notification
		function showNotification() {
			const notification = document.getElementById('notification');
			notification.style.display = 'block'; // Afficher la notification

			// Masquer la notification après 1 seconde
			setTimeout(function () {
				notification.style.display = 'none';
			}, 1000);
		}

		// Désactivation du clic droit
		document.addEventListener('contextmenu', function (event) {
			event.preventDefault();  // Désactiver le clic droit
			showNotification();  // Afficher la notification
		});

		// Désactivation des raccourcis (F12, F11, Ctrl+Shift+I, Ctrl+Shift+C, Ctrl+Shift+J, Ctrl+U)
		document.addEventListener('keydown', function (event) {
			const key = event.key.toLowerCase();

			if (key === 'f12' || // key === 'f11' ||
				(event.ctrlKey && event.shiftKey && (key === 'i' || key === 'c' || key === 'j')) ||
				(event.ctrlKey && key === 'u')) {
				event.preventDefault();
				showNotification();
			}
		});

		// Fonction pour détecter si l'inspecteur de développement est ouvert
		function detectDevTools() {
			const threshold = 160;  // Seuil de hauteur pour déterminer si les outils sont ouverts
			let devToolsOpened = false;

			// Surveiller les changements de la taille de la fenêtre
			window.addEventListener('resize', function () {
				if (window.innerHeight < threshold) {
					if (!devToolsOpened) {
						devToolsOpened = true;
						showNotification();
					}
				} else {
					devToolsOpened = false;
				}
			});
		}

		// Appeler la fonction de détection des outils
		detectDevTools();
	});
</script>

<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Site Metas -->
<link rel="icon" href="assets/sary/logo2rms.png" type="image/gif" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />

<title>Rms-Tech</title>

<!-- Option 1: Include in HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<!-- bootstrap core css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />

<!-- fonts style -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">

<!-- font awesome style -->
<link href="css/font-awesome.min.css" rel="stylesheet" />

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet" />
<!-- responsive style -->
<link href="css/responsive.css" rel="stylesheet" />
<!-- AOS CSS -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">

</head>

<body>
	<style>
		/* Style du bouton */
		#backToTop {
			position: fixed;
			bottom: 20px;
			left: 90%;
			display: none;
			/* Caché par défaut */
			z-index: 1000;
			background-color: #007bff;
			color: white;
			border: none;
			border-radius: 50%;
			width: 50px;
			height: 50px;
			font-size: 18px;
			text-align: center;
			line-height: 50px;
			cursor: pointer;
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
			transition: background-color 0.3s ease, transform 0.3s ease;
		}

		#backToTop:hover {
			background-color: #0056b3;
			transform: scale(1.1);
		}
	</style>
	<!-- end header section -->
	<button id="backToTop" title="Retour en haut">&uarr;</button>

	<!-- Script -->
	<script>
		// Récupération du bouton
		const backToTopButton = document.getElementById("backToTop");

		// Afficher/Cacher le bouton selon le scroll
		window.addEventListener("scroll", () => {
			if (window.scrollY > window.innerHeight) {
				backToTopButton.style.display = "block";
			} else {
				backToTopButton.style.display = "none";
			}
		});

		// Retourner en haut de la page au clic
		backToTopButton.addEventListener("click", () => {
			window.scrollTo({ top: 0, behavior: "smooth" });
		});
	</script>
	<!-- slider section -->
	<div class="hero_area">
		<!-- header section strats -->
		<header class="header_section" style=" margin-top: -30px;">
			<div class="container-fluid">
				<nav class="navbar navbar-expand-lg custom_nav-container">
					<a class="navbar-brand" href="index.html">
						<img class="logo-custom" src="assets/sary/logo2rms-removebg-preview.png" alt="Rms Tech">
					</a>

					<button class="navbar-toggler" type="button" data-toggle="collapse"
						data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
						aria-expanded="false" aria-label="Toggle navigation">
						<span class=""> </span>
					</button>

					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav ml-auto">
							<li class="nav-item active">
								<a class="nav-link" href="#" id="acceuil">ACCEUIL<span
										class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" id="apropos">A propos</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" id="tarifs">Services</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" id="references">Nos références</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" id="blog">Blog</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#" id="conact">Contact</a>
							</li>
						</ul>
					</div>
				</nav>
			</div>
		</header>

		<section class="slider_section">
			<div id="customCarousel1" class="carousel slide" data-ride="carousel" data-interval="10000">
				<div class="carousel-inner">
					<!-- Slide 1: Développement Web -->
					<div class="carousel-item active">
						<div class="container">
							<div class="row">
								<div class="col-md-6">
									<div class="detail-box">
										<h1>
											Développement Web <br>

										</h1>
										<p>
											Nous créons des sites web performants, adaptés à vos besoins,
											avec des designs modernes et une expérience utilisateur optimale.
										</p>
										<div class="btn-box">
											<a href="#" class="btn-1">
												Plus d'info
											</a>

										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="row">
										<div class="col-lg-10 mx-auto">
											<div class="img-box">
												<img src="Startup life-pana.png" alt="Développement Web">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Slide 2: Développement Desktop -->
					<div class="carousel-item">
						<div class="container">
							<div class="row">
								<div class="col-md-6">
									<div class="detail-box">
										<h1>
											Développement Desktop <br>
											Solutions Innovantes
										</h1>
										<p>
											Nous offrons des applications desktop personnalisées, conçues
											pour améliorer votre productivité et automatiser vos processus.
										</p>
										<div class="btn-box">
											<a href="#" class="btn-1">
												Plus d'info
											</a>

										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="row">
										<div class="col-lg-10 mx-auto">
											<div class="img-box">
												<img src="Programming-pana.png" alt="Développement Desktop">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<!-- Slide 3: Services de Maintenance -->
					<div class="carousel-item">
						<div class="container">
							<div class="row">
								<div class="col-md-6">
									<div class="detail-box">
										<h1>
											Services de Maintenance <br>
											Assistance Continue
										</h1>
										<p>
											Nous assurons la maintenance et le support de vos systèmes pour
											garantir leur bon fonctionnement et leur sécurité.
										</p>
										<div class="btn-box">
											<a href="#" class="btn-1">
												Plus d'info
											</a>

										</div>
									</div>
								</div>
								<div class="col-md-6">
									<div class="row">
										<div class="col-lg-10 mx-auto">
											<div class="img-box">
												<img src="Programming-bro.png"
													alt="Services de Maintenance">
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
		</section>
	</div>
	<section class="homme" id="hommesection">

	</section>
	<section class="homme" id="blogsection">

	</section>
	<section class="homme" id="realisationsection">

	</section>
	<section class="homme" id="servicesection">

	</section>
	<section class="homme" id="apropossection">

	</section>
	<section class="homme" id="conactsection">

	</section>
	<section class="homme" id="tarifssection">

	</section>
	<section class="homme" id="referencessection">

	</section>

	<script>
		document.addEventListener("DOMContentLoaded", function () {
			// Sélection des sections
			const sections = document.querySelectorAll('section.homme');
			const navLinks = document.querySelectorAll('.navbar-nav .nav-link');

			// Fonction pour masquer toutes les sections
			function hideAllSections() {
				sections.forEach(section => {
					section.style.display = 'none';
				});
			}

			// Fonction pour afficher une section
			function showSection(sectionId) {
				hideAllSections();
				const section = document.getElementById(sectionId);
				if (section) {
					section.style.display = 'block';
					// Charger dynamiquement le contenu de la section
					fetch(`assets/pages/${sectionId.replace('section', '')}.html`)
						.then(response => {
							if (!response.ok) {
								throw new Error(`Erreur HTTP! statut: ${response.status}`);
							}
							return response.text();
						})
						.then(data => {
							section.innerHTML = data;
						})
						.catch(error => console.error(`Erreur lors du chargement de pages/${sectionId.replace('section', '')}.html:`, error));
				} else {
					console.error(`Section non trouvée: ${sectionId}`);
				}
			}

			// Afficher la section "homme" par défaut
			showSection('hommesection');

			// Ajouter des écouteurs d'événements aux liens de navigation
			navLinks.forEach(link => {
				link.addEventListener('click', function (event) {
					event.preventDefault();
					const targetId = this.id + 'section';
					if (targetId === 'acceuilsection') {
						showSection('hommesection');
					} else {
						showSection(targetId);
					}
					document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' });
				});
			});
		});
	</script>
	<footer class="text-center text-lg-start bg-body-tertiary text-muted">
		<!-- Section: Social media -->
		<section class="d-flex justify-content-center justify-content-lg-between p-4 border-bottom">

			<div class="me-5 d-none d-lg-block">
				<span> les réseaux sociaux :</span>
			</div>

			<div>
				<a href="" class="me-4 text-reset">
					<i class="bi bi-facebook"></i>
				</a>
				&emsp14;&emsp14;&emsp14;
				<a href="" class="me-4 text-reset">
					<i class="bi bi-envelope-fill"></i>
				</a>
			</div>
			<!-- Right -->
		</section>
		<!-- Section: Social media -->

		<!-- Section: Links  -->
		<section class="">
			<div class="container text-center text-md-start mt-5">
				<!-- Grid row -->
				<div class="row mt-3">
					<!-- Grid column -->
					<div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
						<!-- Content -->
						<h6 class="text-uppercase fw-bold mb-4">
							<i class="bi bi-gem me-3"></i> Rms Tech
						</h6>
						<p>
							Nous sommes une agence de développement web et de services numériques dédiée à
							fournir des solutions innovantes et personnalisées.
						</p>
					</div>
					<!-- Grid column -->

					<!-- Grid column -->
					<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
						<!-- Links -->
						<h6 class="text-uppercase fw-bold mb-4">
							Produits
						</h6>
						<p>
							<a href="#!" class="text-reset">Taxi-Be Antananarivo</a>
						</p>
						<p>
							<a href="#!" class="text-reset">Madagasikara</a>
						</p>
						<p>
							<a href="#!" class="text-reset">Harovy</a>
						</p>
						<p>
							<a href="#!" class="text-reset">Myary</a>
						</p>
					</div>

					<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
						<!-- Links -->
						<h6 class="text-uppercase fw-bold mb-4">Contact</h6>
						<p><i class="bi bi-house-door me-3"></i> Antananarivo, Madagascar</p>
						<p>
							<i class="bi bi-envelope me-3"></i>
							24rmstech24@gmail.com
						</p>
						<p><i class="bi bi-telephone me-3"></i> + 261 34 59 743 21</p>

					</div>
					<!-- Grid column -->
				</div>
				<!-- Grid row -->
			</div>
		</section>
		<!-- Section: Links  -->

		<!-- Copyright -->
		<div class="text-center p-4" style="background-color: rgb(0, 0, 0);">
			© 2025 :
			<a class="text-reset fw-bold" href="">RMS Tech</a>
		</div>
		<!-- Copyright -->
	</footer>
	<!-- Footer -->
	<!-- Footer -->
	<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"></script>
	<!-- jQery -->
	<script src="js/jquery-3.4.1.min.js"></script>
	<!-- bootstrap js -->
	<script src="js/bootstrap.js"></script>
	<!-- custom js -->
	<script src="js/custom.js"></script>
	<!-- AOS JS -->
	<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
	<script>
		AOS.init();
	</script>

</body>

</html>
