body{margin:0;padding:0;font-family: Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;}

/* #topper{background:#F00;height:100vh;background:url(../img/topper_background.jpg) no-repeat center center;background-size:cover;} */
#toppet{background:#212121;height:100vh;max-height:1080px;background:url(../img/topper_background.jpg) no-repeat center center;background-size:cover;}
/* #toppet{background:#212121;height:100vh;} */
 .pos_centre{max-width:1100px;margin:0 auto;}
	/* #topper::before { */
		/* content: ""; */
		/* position: absolute; */
		/* top: 0; */
		/* left: 0; */
		/* width: 100%; */
		/* height: 100%; */
		/* background: rgba(0, 0, 0, 0.6); /* Vous pouvez ajuster l'opacité selon vos besoins */ */
	/* } */
	/* #pos_centre{max-width:1500px;margin:auto;display:block;position:absolute;} */
	#superimage{padding:100px;display:block;float:left;}
	#toppet ul{color:#FFFFFF;float:right;padding:20px;margin:10px 0 0 0;}
		#toppet a{text-decoration:none;color:#FFF;padding:0 20px;}
		#toppet li{color:#FFFFFF;display:inline;padding:0px;margin:0px;font-size:1.1em;}
		#toppet li a:hover{color:#1498d5;border-bottom: 2px solid #1498d5;padding-bottom:20px;}
		
	.texte_acroche{max-width:590px;margin-top:20vh;margin-left:50px;color:#FFFFFF;line-height: 1.7;}
	.texte_acroche h1{color:#FFF;text-transform:uppercase;font-size:28px;letter-spacing:2.5px;margin-top:0px;line-height:1;}
	.texte_acroche h2{color:#1498d5;text-transform:uppercase;font-size:17px;line-height:1;}

.bandeau_contact {min-height:35px;background-color:#1498d5;color:#FFFFFF;padding:10px 0;}
	.bandeau_contact .centre{max-width:1100px;margin:auto;padding:10px;}
	.bandeau_contact h1{margin:0px;padding:0;font-size:18px;font-weight:600;}
	.bandeau_contact h2{margin:0px;padding:8px 0;font-size:16px;font-weight:lighter;}
	.bandeau_contact .btn_color{background:#d47822;margin-top:5px;}
	.bandeau_contact .btn_color:hover{background:#088cd8;}

	.btn_color{transition: all 0.3s;padding:10px 15px 10px 15px;margin:10px 15px;background:#1498d5;text-align:center;border-radius:20px;display:block;text-decoration:none;color:#FFF;}
	.btn_color:hover{color:#FFF;background:#088cd8;text-align:center;}
	/* #topper #texte_acroche h1{} */
		

.fond_blanc{background:#FFFFFF;width:100%;padding:10px 0;}
	.fond_blanc h1{text-align:center;color:#088cd8;text-transform:uppercase;}
	.fond_blanc h1 span{color:#1498d5;}
	.fond_blanc h2{color:#292929;text-align:center;font-size:16px;margin-top:-5px;}
	
	.vignetes{max-width:1100px;margin:auto;}
		.vignete{width:29%;padding:1%;margin:1%;background:#f7f7f7;float:left;color:#666666;line-height:1.8;}
		.vignete img{max-width:100%;max-height:150px;display:block;margin:10px auto;}
		.vignete h1{font-size:16px;color:#212529;letter-spacing:0.25px;margin-bottom:15px;}
		.vignete .text{min-height:160px;}
		.vignete .btn_color{margin:15px auto;display:block;max-width:200px;color:#FFFFFF;}

.fond_gris{background:#292929;width:100%;padding:10px 0;color:#FFFFFF;}
	.fond_gris h1{color:#088cd8;text-transform:uppercase;font-size:28px;letter-spacing:2.5px;margin-top:0px;line-height:1;}
	.fond_gris h2{color:#FFFFFF;text-transform:uppercase;font-size:16px;line-height:1;}
	.fond_gris .texte_acroche{margin:0px;max-width:500px;}
	 .cinquante{width:50%;float:left;padding:0;margin:0;}
	.fond_gris .cinquante_2{width:40%;float:left;height:200px;background:#3a3a3a;padding:2.5%;margin:2.5%;text-align:center;font-weight:bold;}
	.fond_gris .cinquante_2 .nombre_clee{color:#088cd8;font-weight:bold;font-size:60px;text-align:center;display:block;margin:50px 0 10px 0;}

.price{margin:15px;pading:10px;background:#FFF;}
.price h1{color:#1498d5;padding:10px 0 0 0;margin-bottom:0;font-size:50px;font-weight:lighter;}
.price h2{font-size:15px;margin:0;}
.price .price_ligne{border-bottom:1px solid #E4E4E4;padding:10px 15px;margin:0 15px;min-height:21px;}
.price .btn_color_neg{background:#088cd8;}
.price .btn_color_neg:hover{background:#1498d5;}


.form_design{width:700px;background:#FFF;border-radius:10px;margin:90px auto;}
	.form_design .block_g{width:50%;min-height:600px;float:left;background:#149AD7;background:url(../img/background_connexion_datacenter_backups.png) no-repeat center center;background-size:cover;border-radius:10px 0 0 10px;border:0;}
	.form_design .block_d{width:45%;margin:auto;padding:2.5%;float:right;}
	.form_design .mess_erreur{height:20px;}
	.form_design label{font-size:0.8em;}
	.form_design input[type='email'], .form_design input[type='text'], .form_design input[type='password'], .form_design textarea{width:90%;margin-top:10px;border:1px solid #e8e8e8;border-radius:4px;padding:12px 5%;}
	.form_design textarea{min-height:120px;}
	.form_design input[type='submit']{width:100%;background:#1498d5;border:none;padding:10px;color:#FFF;border-radius:4px;cursor:pointer;}
	.form_design a{color:#000 !important;font-size:0.8em;text-align:center;display:block;}
	.form_design a:hover{color:#1498d5 !important;}
	
	
		.alerte{padding:10px 10px 10px 50px;color:#FFFFFF;margin-bottom:10px;font-size:0.9em;}
			.alerte a{color:#FFF;font-weight:bold;}
			.alerte a:hover{color:#000;}
			.information{background:url(../img/icon_alerte_information.png) no-repeat 10px 50% #F2A737;border:1px solid #e38c00;}
			.information_gris{background:url(../img/icon_alerte_information_deux.png) no-repeat 10px 50% #e9eaee;border:1px solid #e1e2e6;color:#093A5A;}
			.information_gris a{color:#093A5A;}
			.erreur{background:url(../img/icon_alerte_erreur.png) no-repeat 10px 50% #D40101;border:1px solid #ab0202;}
			.success{background:url(../img/icon_alerte_success.png) no-repeat 10px 50% #4AB151;border:1px solid #3f9645;}

.container {
  display: flex;
  height: 100vh; /* Pour que le conteneur prenne toute la hauteur de la fenêtre */
  
}

.menu_left {
  width: 300px; /* Largeur fixe du menu */
  max-width: 100%; /* Pour s'assurer que le menu ne dépasse pas la largeur de l'écran sur les petits appareils */
  background-color: #f4f4f4;
  padding: 20px;
  box-sizing: border-box; /* Inclut le padding dans la largeur totale */
  background:#FFFFFF;
  border-top:3px solid #1498d5;
  font-family: Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* .menu_left{width:20%;top:0;z-index:0;max-width:300px;padding:0;box-shadow:0px 0px 2px 0px rgba(0,0,0,0.2);min-height:100vh;margin-top:-50px;background:#FFFFFF;float:left;font-family: Myriad, "Liberation Sans", "Nimbus Sans L", "Helvetica Neue", Helvetica, Arial, sans-serif;} */
.menu_left .menu_left_ul{text-align:left;float:left;color:#A2A2A2;width:100%;padding:20px;margin-top:10px;font-size:1em;}
.menu_left ul a{display:block;text-decoration:none;list-style-type:none;text-align:left;color:#A2A2A2;padding:20px 10px;width:80%;border-radius:10px;border:1px solid #FFF;margin-bottom:15px;}
.menu_left ul a i{padding:0 15px!important;}
.menu_left ul a:hover, .menu_left .li_active{box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.2);border:1px solid #FFF;color:#149AD7;}
.menu_left .hover_red:hover{box-shadow: 0px 0px 20px -3px rgba(0,0,0,0.2);border:1px solid #FFF;color:#F00}
.menu_left .hover_red{color:#ff8989}

.menu_dash_header{float:left;width:100%;height:60px;padding:10px 0;background:#FFF;box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.2);z-index:6;position:relative;}
.menu_dash_header .logo_link{text-align:left;padding:0px 10px;z-index:10;position:relative;}

.widget{width:23.4%;margin:0.5%;padding:0.3%;min-height:540px;background:#FFF;border-radius:5px;box-shadow:0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);float:left;overflow-y:auto;scrollbar-width: thin;}
	.widget header{border-radius:5px 5px 0 0;background:#F9FAFD;padding:10px;}
	.widget .bottom_red{border-bottom:#F00 2px solid;}
	.widget .bottom_green{border-bottom:#7CFC00 2px solid;}

	.conteneur_box{width:100%;}
	.separateur_text{width:98%;margin:5px 0.5%;padding:15px 0.5%;text-align:left;box-shadow:0 7px 14px 0 rgba(65, 69, 88, 0.1), 0 3px 6px 0 rgba(0, 0, 0, 0.07);border-radius:5px;background:#FFF;color:#344050;}
	/* .canvas_pourcentage{width:250px;margin:auto;margin-top:-170px;margin-bottom:120px;text-align:center;font-size:2.8em;color:#4f4f4f;user-select: none;} */
	.canvas_pourcentage{width:250px;margin:auto;margin-top:-55%;margin-bottom:45%;text-align:center;font-size:2.8em;color:#4f4f4f;user-select: none;}
	/* canvas{width:350px !important;height:350px !important;margin:auto;} */

	.mt5{margin-top:5px;}
	.capitalize{text-transform:capitalize;}
	.fs08em{font-size:0.8em;}
.clear{clear:both;}

/* .menu_dash_header .logo_link img{padding:0;width:80%;margin:10px auto;text-align:center;} */
footer {
    /* min-height:45px; */
    background-color:#1498d5;
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}

.clear{clear:both;}