@font-face {
  font-family: "NouvelR-regular";
  src: url('../fonts/NouvelR-Regular.woff2')format("woff2");
   font-weight:400;
}

@font-face {
  font-family: "NouvelR-regular";
  src:url('../fonts/NouvelR-Bold.woff2')format("woff2");
  font-weight:700;
}

@font-face {
  font-family: "NouvelR-regular";
  src: url('../fonts/NouvelR-Semibold.woff2')format("woff2");
  font-weight:600;
}

:root{
--orange:#ff7a1a;
--bg-dark:#0b0f12;
--muted:#9aa6b1;
--panel:#121820cc;
}
*{box-sizing:border-box;margin:0;padding:0}
 
 body, p, a, h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

 html,body {
    height:100%;
    margin:0;
    font-family: Arial, sans-serif;
    background: #9ec347;
   
    font-weight:700;
    color:#ffffff;
  }
  
.container{padding: 50px 50px;}
  h1{text-align: center;font-weight:700;}
  h2{font-size:48px;margin:6px 0 10px;font-weight:700;color:#ffffff;}
	ul{margin:0;padding-left:22px;color:#a0a9b1;font-weight:700}
	li{/*margin:6px 0;*/font-size:36px;}

   a{text-decoration:none;    color: inherit;}
	.subttl {
		text-align: left;
		font-weight:700;
		font-size: 28px;
	}
	
	.table{
		border: 1px #ffffff solid;
		width: 500px;
		margin-left:auto;
		margin-right: auto;
	}
	
	.table2{
		border: 1px #ffffff solid;
		width: 100%;
		margin-left:auto;
		margin-right: auto;
	}
	
	.trttl {
		background-color: #ffffff;
    color: #0f1720;
	}
	td {
		border: 1px #ffffff solid;
		padding: 20px;
	}
  .stage01_01 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_01_01.jpg') center/cover no-repeat;
  }
  .stage01_01::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage01_02 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_01_02.jpg') center/cover no-repeat;
  }
  .stage01_02::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage01_03 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_01_03.jpg') center/cover no-repeat;
    display:flex;
	align-items:center;
	justify-content:space-between;
  }
  .stage01_03::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage02_01 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_02_01.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage02_01::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage02_02 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_02_02.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage02_02::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage02_03 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_02_03.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage02_03::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
   .stage02_04 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_02_04.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage02_04::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
   .stage04_01 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_04_01.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage04_01::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage04_02 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_04_02.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage04_02::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage04_03 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_04_03.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage04_02::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }
  
  .stage04_04 {
    width:1920px;
    height:1080px;
    position:relative;
    overflow:hidden;
    background: url('../images/BG_menu_04_04.jpg') center/cover no-repeat;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	text-align: center;
    
  }
  .stage04_04::before{
    content:"";
    position:absolute;
    inset:0;
   /* background: linear-gradient(90deg, rgba(8,7,10,0.7) 0%, rgba(8,7,10,0.6) 30%, rgba(6,8,15,0.9) 100%);*/
  }


  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
  }
  @keyframes fadeInUp {
  to {
    opacity: 1;
    /*transform: translateY(0);*/
  }
}
  .visible {
    opacity: 1;
   /* transform: translateY(0);*/
  }

  .home {
    position:absolute; top:28px; left:70px;
    width:26px; height:26px;
    border-radius:6px;
    background: rgba(255,255,255,0.06);
    display:flex; align-items:center; justify-content:center;
    color: rgba(255,255,255,0.7);
    font-size:16px;
    z-index:10;
  }

  .lang {
    position:absolute; top:28px; right:70px;
    display:flex; gap:10px; align-items:center;
    z-index:10;
    color:#3e464e; font-weight:700;
    font-size: 26px;
  }
  .lang span { cursor:pointer; }
  .lang .active { color:#ff7b00; }

  .left-panel {
    position:absolute; left:70px; top:50%;
    width:380px; z-index:8; color:#fff;
        transform: translateY(-50%);
  }
  .stage04_04 .left-panel {
  	top:auto;
  }
  .brand {
    font-size:44px; font-weight:800;
    line-height:0.95; margin:0 0 10px 0;
  }
  .brand .accent { color:#ff7b00; font-weight:700; display:block; font-size:32px; margin-top:10px; }

  .carousel {
	  position:absolute; 
	  left:380px; 
	  top: 50%;
	  width:1412px; 
	  height:571px; /* hauteur réelle de tes images */
	  display:flex; 
	  align-items:center; 
	  justify-content:center;
	  gap:28px; 
	  z-index:7;
	  transform: translateY(-50%);
	}

	.card {
	  width:332px; 
	  height:571px;
	  background:#111; 
	  border-radius:8px;
	  box-shadow:0 18px 40px rgba(0,0,0,0.6);
	  position:relative;
	  overflow:hidden;
	  transition: transform 300ms cubic-bezier(.2,.9,.2,1), filter 300ms;
	  cursor:pointer;
	  border: 1px solid rgba(255,255,255,0.05);
	}

	.card img {
	  width:100%;
	  height:100%;
	  object-fit:cover; /* montre toute l’image sans la couper */
	  display:block;
	}

	.card.active {
	  transform:translateY(-18px) scale(1.03);
	  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.6));
	  z-index:9;
	}

	.card .label {
	  position:absolute; 
	  left:0; right:0; bottom:20px;
	  padding:0 14px; 
	  text-align:left;
	}

	.card .label h3 {
	  margin:0; 
	  color:#fff; 
	  font-size:24px;
	  font-weight:700; 
	  text-transform:lowercase;
	  text-shadow:0 6px 18px rgba(0,0,0,0.6);
	  text-align: center;
	}

  .nav-right {
    position:absolute; right:0px; top:50%;
    transform:translateY(-50%);
    width:46px; height:110px;
  /*  background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));*/
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.9);
    z-index:10;
    cursor:pointer; font-size:26px;
  }
  .nav-left {
    position:absolute; left:0px; top:50%;
    transform:translateY(-50%);
    width:46px; height:110px;
  /*  background:linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));*/
    border-radius:6px;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,0.9);
    z-index:10;
    cursor:pointer; font-size:26px;
  }
  
  .page-nav {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
 
}

/* Les traits */
.nav-line {
  width: 140px;       /* longueur du trait */
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  transition: background 0.3s ease;
}

.nav-line.active {
  background: #ffffff;
}
/* Le halo lumineux qui glisse */
.halo {
  position: absolute;
  top: 50%;
  left: -20px;
  width: 119px;
  height: 93px;
  border-radius: 40%;
 /* background: radial-gradient(
    circle,
    rgba(255, 165, 0, 0.7) 0%,
    rgba(255, 165, 0, 0.1) 60%,
    rgba(255, 165, 0, 0) 80%
  );*/
  transform: translate(-50%, -18%);
  pointer-events: none;
  transition: all 0.9s cubic-bezier(0.45, 0, 0.25, 1);
  opacity: 0.9;
  /*filter: blur(6px);*/
}
	
	

  .dots {
    position:absolute; left:40%; transform:translateX(-50%);
    bottom:90px; display:flex; gap:18px; z-index:10;
  }
  .dot {
    width:120px; height:6px; border-radius:6px;
    background: rgba(255,255,255,0.08);
    overflow:hidden; position:relative;
  }
  .dot .fill {
    position:absolute; left:0; top:0; bottom:0;
    width:0%;
    background: linear-gradient(90deg,#ff7b00,#ffd08a);
    transition: width 400ms;
  }
  .dot.active .fill { width:100%; }

  .progress {
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:64px; width:360px; height:2px;
    background: rgba(255,255,255,0.06); z-index:9;
  }

  .card.c1 { background-image:url('../images/building_maintenance.jpg'); background-position:20% 40%; }
  .card.c2 { background-image:url('./App_Pro+_DEF.jpg'); background-position:34% 48%; }
  .card.c3 { background-image:url('./App_Pro+_DEF.jpg'); background-position:52% 48%; }
  .card.c4 { background-image:url('./App_Pro+_DEF.jpg'); background-position:74% 50%; }
  
  /****menu 01 02**********/
  
  .center{
	flex:1;
	padding-left:300px;
	/*padding-right:120px;*/
	display:flex;
	flex-direction:column;
	gap:50px;
	justify-content: center;
	margin-left: auto;
   
    height: 100vh;
    width:1500px;
	}
	
	.item{display:flex;gap:28px;align-items:flex-start}
	.icon-wrap{width:88px;height:88px;display:flex;align-items:center;justify-content:center}
	.icon{
	width:64px;height:64px;border-radius:12px;display:inline-block;filter:drop-shadow(0 6px 18px rgba(255,122,26,0.14));
	}
	
	/****menu 01 03**********/
	.stage01_03 .right{
		display:flex;
		flex-direction:column;
		gap:90px;
		width:500px;
		background: rgb(78 74 74 / 8%);
		backdrop-filter: blur(20px);
		border-radius: 80px;
		display: flex;
		align-items: initial;
		justify-content: space-between;
		padding: 60px 44px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
		cursor: pointer;
		position: absolute;
    	right: 100px;
	}
	.card03{
		background:rgb(255 255 255 / 5%);
		backdrop-filter:blur(20px);
		border-radius:20px;
		display:flex;
		align-items:center;
		justify-content:space-between;
		padding:18px 24px;
		transition:transform 0.3s ease, box-shadow 0.3s ease;
		box-shadow:0 10px 30px rgba(0,0,0,0.35);
		cursor:pointer;
	}


	.card03:hover{
		transform:translateY(-4px);
		box-shadow:0 16px 40px rgba(0,0,0,0.5);
	}

	.card03 h3{
		font-size:28px;
		font-weight:700;
		color:#fff;
	}
	
	
	/****menu 02 01**********/
	.contain {
	position: relative;
	background: linear-gradient(32deg, rgb(16 40 60 / 5%), rgb(3 8 20 / 18%));
	border-radius: 100px;
	padding: 0px 200px;
	backdrop-filter: blur(20px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	margin: 40px 0;
	animation: fadeIn 1s ease forwards;
	}
	
	.bubble {
	position: relative;
	/*background: linear-gradient(135deg, rgba(16,40,60,0.9), rgba(3,8,20,0.8));*/
	border-radius: 100px;
	padding: 40px 100px;
	/*backdrop-filter: blur(20px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);*/
	margin: 40px 0;
	animation: fadeIn 1s ease forwards;
	}


	.bubble h1 {
	font-size: 48px;
	font-weight: 700;
	color:#ffffff;
	}


	.stats {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 100px;
	max-width: 1000px;
	}

	.stage02_01 .top {
		    top: -80px;
		    left: 20px;
		    position:absolute;
	}
	.stat {
	  position: relative;
	  font-weight: 700;
	  font-size: 40px;
	  animation: fadeInUp 1s ease forwards;
	  opacity: 0;
	  color: #ffffff;
	}
	
	/* Le point sous le texte */
	.stat::before {
	  content: '';
	  position: absolute;
	  top: 100%; /* au-dessous du texte */
	  left: 50%;
	  transform: translateX(-50%);
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background: #fff;
	  margin-top: 10px; /* espace entre texte et point */
	}
	
	.stage02_01 .bottom {
		    bottom: -65px;
		    position:absolute;
		        right: 20px;
	}
	.stat2 { position: relative;
	  font-weight: 700;
	  font-size: 40px;
	  animation: fadeInUp 1s ease forwards;
	  opacity: 0;
	  color: #ffffff;} 
	.stat2::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; }
	
	/************menu 02 02 ************/
	.stage02-ttl{
	   font-weight: 700;
	  font-size: 44px;
	  text-align:center;
	}
	.stage02_02 .right{
		display:flex;
		flex-direction:column;
		gap:30px;
		width:530px;
		background: rgba(255, 255, 255, 0.08);
		backdrop-filter: blur(20px);
		border-radius: 80px;
		display: flex;
		align-items: initial;
		justify-content: space-between;
		padding: 50px 24px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
		cursor: pointer;
		position: absolute;
    	right: 100px;
	}
	.stage02_02 .plus{width:130px;}
	.card02_02 {
   /* background: rgb(255 255 255 / 5%);
    backdrop-filter: blur(20px);*/
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);*/
    cursor: pointer;
    color:#ffffff;
    font-weight: 700;
    font-size: 28px;
    gap: 20px;
    justify-content: start;
    text-align: left;
	}
	
	/************menu 02 04 ************/
	.bubblemap {
	position: relative;
	background: linear-gradient(135deg, rgb(230 186 239 / 21%), rgb(17 15 37 / 80%));
	border-radius: 100px;
	padding: 40px 100px;
	backdrop-filter: blur(20px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	margin: 40px 0;
	animation: fadeIn 1s ease forwards;
	}
	
	/************menu 04 02 ************/
	.bubblemap0402 {
	position: relative;
	background: linear-gradient(135deg, rgb(230 186 239 / 21%), rgb(17 15 37 / 80%));
	border-radius: 100px;
	padding: 5px 5px;
	backdrop-filter: blur(20px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	margin: 40px 0;
	animation: fadeIn 1s ease forwards;
	}
	
	/************menu 04 03 ************/
	.bubblemap0403 {
	position: relative;
	background: linear-gradient(135deg, rgb(230 186 239 / 21%), rgb(17 15 37 / 80%));
	border-radius: 100px;
	padding: 5px 50px;
	backdrop-filter: blur(20px);
	box-shadow: 0 10px 40px rgba(0,0,0,0.5);
	margin: 40px 0;
	animation: fadeIn 1s ease forwards;
	}
	
	/************menu 04 04 ************/
	.carousel04 {
	  position:absolute; 
	  left:480px; 
	  top:180px;
	  width:1276px; 
	  height:330px; /* hauteur réelle de tes images */
	  display:flex; 
	  align-items:center; 
	  justify-content:center;
	  gap:28px; 
	  z-index:7;
	}

	.card04 {
	  width:298px; 
	  height:330px;
	  background:#111; 
	  border-radius:8px;
	  box-shadow:0 18px 40px rgba(0,0,0,0.6);
	  position:relative;
	  overflow:hidden;
	  transition: transform 300ms cubic-bezier(.2,.9,.2,1), filter 300ms;
	  cursor:pointer;
	  border: 1px solid rgba(255,255,255,0.05);
	}

	.card04 img {
	  width:100%;
	  height:100%;
	  object-fit:cover; /* montre toute l’image sans la couper */
	  display:block;
	}
	
	.rectangle {
	position: absolute;
    left: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    z-index: 7;
    top: 550px;
    gap: 28px;
    width: 1276px;

	}
	
	.rectangle img {
	  width:100%;
	  height:100%;
	  object-fit:cover; /* montre toute l’image sans la couper */
	  display:block;
	}
	
	
	
	
@media only screen and (max-device-width : 767px) {
	.table{
		border: 1px #ffffff solid;
		width: 300px;
	}
}