@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lobster|Fjalla+One|Hind+Vadodara|Roboto+Condensed&display=swap');
:root {
      --body-background-color: #f5f5f5;
   --main-background-color: white;
    --main-color: black; 
    --grey-color: #75757a; 
        --informatique-color: green; 
     --maintenance-color: #fb4f14; 
    --menu-color: #41546a;
    --dark-orange:#fb4f14;
    --voile-bleu-color: #1d2671;
    --cancel-background: #990000;
    --active-input-border: #03a9f5;
    	--valid-button-color: #4CAF50;
    
}

* {
	
	
	margin: 0;
	box-sizing: border-box;
	font-family: 'Hind Vadodara','Roboto Condensed',sans-serif;
	
}

body *:not(section)::-webkit-scrollbar-track {
	background: #f9f9F9;
	-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
	
}

body *:not(section)::-webkit-scrollbar {
	width: .5rem;
		height: .5rem;
	
}

body *:not(section)::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #eee;
	-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8);
	
}

a {
	text-decoration: none;
		transition: color 1s;
		
}


input:not([type='range']):focus,select:focus {
 border-color: var(--active-input-border);
}

input,select,textArea {
	display: block;
	
	background: white;
	box-sizing: content-box;
	width: 170px;
	outline: none;
	border: 1px solid #d8d8d8;
	border-radius: 3px;
	padding: 7px 5px;
}


body {
	background: var(--body-background-color);
	
	
	
}


.div-horizontal{
	
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	
	
	
}

.div-horizontal.growed,.div-vertical.growed {
	
	flex-grow: 1;
}

.div-horizontal.center,.div-vertical.center{
	
	align-items: center;
}

.div-vertical{
	
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.div-horizontal.center-justify,.div-vertical.center-justify {
	
	justify-content: center;
}

.div-horizontal.end-justify,.div-vertical.end-justify {
	
	justify-content: flex-end;
}

.div-horizontal.stretch-justify,.div-vertical.stretch-justify {
	
	justify-content: stretch;
}


.div-horizontal.start-justify,.div-vertical.start-justify {
	
	justify-content: flex-start;
}

button {
	transition: background 1s,color 1s;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: none;
	border: none;
	
	outline: none;
}


#main-content {
	
	
		display: flex;
	  	flex-direction: column;
	  	min-height: 100vh;
	
	
}

.ecran-div {
	
	display: flex;
	flex-direction: column;
	
	min-height: 600px;
    height: calc(100vh);
   	
}

.divider {
    position: relative;
    margin-top: 30px;
    height: 1px;
    width: 100%;
}
.div-transparent:before {
    content: "";
    position: absolute;
    top: 0;
    left: 5%;
    right: 5%;
    width: 90%;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--voile-bleu-color), transparent);
}

.menu-bar-entete {
	
	display: flex;
	flex-direction: row;
	align-items: center;
	z-index: 200;
	margin:0px 15px;
	width: calc(100% - 30px);
font-size: 0.8em;
overflow: hidden;
	padding: 5px 10px;
	font-weight: bold;
	
	
	border-radius: 10px;
	border: 0;
	padding: 0px;
	padding-right: 15px;
	background: white;
	border-radius: 0px 0px 10px 10px;
	position: fixed;
	
	
}


.contacter-footer-div{
	display: flex;
	flex-direction: row;
	justify-content: center;
			flex-wrap: wrap;
				text-align: center;
				color: white;	
					text-shadow:1px 1px 1px black;
					margin: 20px 10px;
				
}

.contacter-footer-div i {
	
	color: #FDFDDF;
}



.footer .menu-bar-entete {
	position: relative;
	margin:20px 15px 0px 15px;
	border-radius: 10px 10px 0px 0px;
	border: 0;
	padding: 0px;
	padding-right: 15px;
	background: #FDFDDF;
	
}

.menu-bar-entete-titre-div{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}


.menu-bar-entete-titre {
	
	color: var(--grey-color);
	text-decoration: none;
	transition: color 1s;
	font-weight: bold;
}




.menu-bar-entete-titre:hover{
	
	color: black;
	
}



.menu-bar-entete-langue-div{
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	justify-content: flex-end;
	align-items: center;
	
}
.section-icon{
	border-radius: 50%;
	width: 10px;
	height: 10px;
	margin: 0px 7px 0px 20px;
	
}

.menu-bar-entete-titre-div i {

	margin-left: 5px;
	
}

.presentation-div.informatique {
	
	background: #FDFDDF;
}

.presentation-div.center.informatique .presentation-text-div{
	max-width: 700px;
	
	}

.presentation-div.center {
	justify-content: center;
	align-items: center;
	
}



.div-sur-deux .presentation-div {
	width: 50%;
	
}

.div-sur-deux .presentation-div.plateform:first-child {
	
	background: #DFFFD9;
}



.div-sur-deux .presentation-div.plateform:last-child {
	
	background: #ffe05d;
}

.div-sur-deux {
	
	display: flex;
	flex-direction: row;
	
	
}


.section-icon.informatique{
	
	background: var(--informatique-color);
	

	
}

.section-icon.maintenance{
	
	background: var(--maintenance-color);
	
	
}

.menu-bar-entete-langue-div a {
	
	color: black;
	
	
	text-decoration: none;

	
}

.menu-bar-entete-langue-div a:hover{
	
	color: black;
	
}

.paddle {
	position: absolute;
	
	color: #000;
	
	
	background: none;
	opacity: 0.3;
	outline: none;
	border: none;
	
	
	font-weight: bold;
    text-shadow:0px 5px 10px rgba(0, 0, 0, 0.3);
    background: none;
    transition: 0.2s;

}

.paddle i {
	
	font-size: 3rem;
}



.paddle:hover{
	opacity: 1;
	color: var(--active-blue);
}
.left-paddle {
	left: 5px;
}
.right-paddle {
	right: 5px;
}
 
 
.flag-icon{
	border-radius: 50%;
	width: 15px;
	height: 15px;
	margin: 0px 5px 0px 5px;
} 
 
.vertical-separator {
	width: 1px;
	
	height:15px;
	background: grey;
	margin: 0px 5px 0px 5px;
}

.menu-bar{
	
	
	border-radius: 5px;
	margin: 10px;
	padding: 5px;
	height: auto;
	

}



.menu-bar-child{
	display: flex;
	flex-direction: row;
	
	align-items: center;
	position: relative;
}

.logo-div{
	display: flex;
	flex-direction: row;
	align-items: center;
	

/*text-shadow:1px 1px 1px black;*/
}

.menu-bar-entete .logo-div{
	height: 30px;
	
	margin-right: 10px;
	padding: 5px 10px;
	cursor: pointer;
	}

.entete-contact {
	
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	right: 0px;
	display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
  color: white;
 
  background: white;
  padding: 2px 5px;
  
 
}

.entete-estimation h1{
	
	font-size: 1.5em;
	
}
.entete-estimation h2{
	
	font-size: 0.8em;
	
}

.logo-div img {
	
	max-width: 100%;
	height: 100%;
	margin-right: 10px;
}

.contact-entete {
	
	color: black;
	font-size: 0.8em;
	font-weight: bold;
}




.menu-bar-navigation {
		color: white;
	
	font-size: 1.1em;
	margin: 0px 10px;
	text-decoration: none;
	transition: color 1s;
	

}

.menu-bar-navigation.selected {
	
	color: #fdce4b;
	
}


.menu-bar-navigation:not(.selected):hover{
	
	color: #f1f1f1;
	
}

.posez-question{
	background: var(--voile-bleu-color);
	padding: 10px 20px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	color: white;
	justify-content: center;
	align-items: center;
	
}

.posez-question h1{
	font-size: 2.2em;
	margin: 0px 10px;
}
.posez-question h2{
		font-size: 1.5em;
	margin: 0px 10px;
}

  


.slider-divider {
	
    background: black;
	height: 100%; 
	width: 10px;
}

.slider-sur-deux {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
}
.slider-sur-deux .barniere{
	
width: calc(50% - 10px);
overflow: hidden;

}

.slider-sur-deux .barniere:hover .barniere-background{
	
	transform: scale(1.1);
	
}


.barniere {
	
	position: relative;
	width: 100%;
	height: 100%;
	flex-grow: 1;
	
	background: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: center;
}

.barniere-background {
	position: absolute;
	height: 100%;
	width: 100%;
		background: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: center;
  background-image: url('fond/barniere.jpg');
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.barniere.informatique {
	
	 background-image: url('fond/logiciel5.jpg');
}

.message-barniere-div {
	
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	align-items: center;
	width: 100%;
	padding: 10px;
			
	
}



.message-barniere-div.top-left {
	
	left: 15px;
	top: 50px;
	transform: none;
	
	align-items: flex-start;
	}
	
	
.message-barniere-div.top-center {
	
	left: 50%;
	
	top: 50px;
	transform: translateX(-50%);
	}
		
	
.message-barniere-div.bottom-center {
	
	left: 50%;
	
	top: auto;
	bottom: 0;
	transform: translateX(-50%);
	
	
	}
		
	
.partenaire-barniere {
	max-width: calc(100% - 40px);
		border-radius: 5px;
	background: rgb(255,255,255);
	padding: 5px 10px;
	
}

.partenaire-barniere img{
	height: 60px;
	margin: 2px 5px;
	
	}
	
.partenaire-barniere.petit img{
	height: 25px;
	margin: 5px 5px;
	
	}	

.message-barniere-div.bottom-left {
	align-items: flex-start;
	transform: none;
	left:20px;
	top: auto;
	bottom: 50px;
	
	
}


.screenshot {
	

		webkit-box-shadow: 0 0 6px 2px rgba(184,184,184,.4);
    -moz-box-shadow: 0 0 6px 2px rgba(184,184,184,.4);
    box-shadow: 0 0 6px 2px rgba(184,184,184,.6);
    border-radius: 5px;
    
	object-fit: cover;
}

.screenshot.sans-relief {
	webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
	
	
}

.screenshot.mobile {
	
	max-height: 450px;

}	

.screenshot.web {
	max-width: 100%;
	height: auto;
	width: auto;
	
}

.message-barniere-div * {
	font-family: 'Fjalla One',sans-serif;
	
}

.message-barniere-div h1 {
	font-size: 3.5em;
	color: white;
	font-weight: 700;
}

.barniere.blacked .message-barniere-div h1{
	color: black;
	
	}

.message-barniere-div h2 {
	font-size: 1.5em;
	

	color: #D0D8EA;
}

.barniere.blacked .message-barniere-div h2{
	color: var(--grey-color);
	
	}

 .barniere-voile-noir2 {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: #000;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9));
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9)); /* The least supported option. */
  }
  
   .barniere-voile-blanc2 {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: white;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
    background: linear-gradient(rgba(0, 0, 0, 0.5) 70%, rgba(255, 255, 255, 0.4)); /* The least supported option. */
  }


 .barniere-voile-noir {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(29, 38, 113, 0.8));
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(29, 38, 113, 0.8)); /* The least supported option. */
  }
  
   .barniere-voile-noir-light {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: #000;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(to right,rgba(29, 38, 113, 0.2), rgba(0, 0, 0, 0.4));
    background: linear-gradient(to bottom, rgba(29, 38, 113, 0.3) 20%,rgba(0, 0, 0, 0.8)); /* The least supported option. */
 
  }
  
     .barniere-voile-blanc-light {
	position: absolute;	
	width: 100%;
	height: calc(100%);	
	 background: #C33764;  /* fallback colour. Make sure this is just one solid colour. */
    background: -webkit-linear-gradient(rgba(29, 38, 113, 0.1), rgba(255, 255, 255, 0.6));
    background: linear-gradient( rgba(29, 38, 113, 0.1),rgba(255, 255, 255, 0.6)); /* The least supported option. */
 
  }
  
  
  
 .confirm-button {
 	
 background: #ffa500;
 color: white;	
	font-size: 1.1em;
	padding: 10px 20px;
	margin: 0px 10px;
	margin-top: 50px;
	text-decoration: none;
	transition: color 1s;
	border: none;
	outline: none;
		border-radius: 5px;
		font-family: 'Fjalla One','Hind Vadodara',sans-serif;
		font-weight: bold;
 	
 } 
  
   .confirm-button:hover {
 	color: #f1f1f1;
   }
   
   
   
   
   .click-button {
   	cursor: pointer;
      background: transparent; 
      outline: none;
      position: relative;
      border: 2px solid black;
      padding: 15px 50px;
      overflow: hidden;
      color: black;
      font-weight: bold;
      text-align: center;
      	border-radius: 3px;
      margin: 30px 10px;
     
     
    }
    
    .click-button.whited{
    
     border-color:  white;
     color: white;
    }
   
.click-button:hover{
	
	color: white;
	background: black;
	 -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

.click-button.whited:hover{
	
	color: black;
	background: white;
	
}

.barniere .click-me-button,.presentation-div .click-me-button {
	margin-top: 50px;
	
}

.click-me-button:hover{cursor: pointer}
    .click-me-button {
      background: transparent; 
      outline: none;
      position: relative;
      border: 2px solid white;
      padding: 15px 50px;
      overflow: hidden;
      color: white;
      text-align: center;
      
    }
    
  .barniere.blacked .message-barniere-div .click-me-button,.click-me-button.blacked{
  
        color: black;
        border-color: black;
  
  }  

    /*button:before (attr data-hover)*/
    .click-me-button:hover:before{opacity: 1; transform: translate(0,0);}
    .click-me-button:before{
      content: attr(data-hover);
      position: absolute;
      left: 0;
      width: 100%;
      text-transform: uppercase;
      letter-spacing: 3px;
    	
      font-size: .8em;
      opacity: 0;
      transform: translate(-100%,0);
      transition: all .3s ease-in-out;
    }
      /*button div (button text before hover)*/
      .click-me-button:hover div{opacity: 0; transform: translate(100%,0)}
      .click-me-button div{
      	
        text-transform: uppercase;
        letter-spacing: 3px;
       
        font-size: .8em;
        transition: all .3s ease-in-out;
      }
      
      
.presentation-div {
	
	
	display: flex;
	flex-direction: row;
	
	padding: 40px 10px;	
	position: relative;

	
	
}



  .presentation-div.erp-module {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		padding-left: 10px;
 		padding-right: 10px;
 		background: white;
 		text-align: center;
 		
 }
 
 
 .erp .presentation-div.erp-module:nth-child(even) {
 
 background: #DFFFD9;
 		
 }
 
 .erp .presentation-div.erp-module:not(:last-child):after {
    background: linear-gradient(-45deg, #DFFFD9 16px, transparent 0), linear-gradient(45deg, #DFFFD9 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}	

 .erp .presentation-div.erp-module:not(:last-child):nth-child(even):after {
    background: linear-gradient(-45deg, white 16px, transparent 0), linear-gradient(45deg, white 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

 
 


.presentation-div.restez-connecte {
	background-color: white;
	 background-image: url('images/developer2.png');	
 background-repeat: no-repeat;
  background-size: center;
    background-position:  center center;
  
	}

.presentation-div.maintenance {
	background: white;
	  background-image: url('fond/bg-trait.png');	
 background-repeat: no-repeat;
  background-size: cover;
}

.presentation-div.demo {
	border-top: 1px solid #ccc;
	background: white;
	
 	padding: 20px;
}

.presentation-div.modules {
	background: #FDFDDF;
	padding: 0px 0px;
	margin: 5px 30px;
	
	-webkit-background-clip: padding-box; 
  -moz-background-clip:    padding; 
  background-clip:         padding-box;
   background-image: url('fond/filet.svg');
    background-repeat: no-repeat;
   background-size: auto;
  border-radius: 10px 10px 0px 0px;
	border-bottom: 8px solid #000;
	
}

.all-modules {
	display: flex;
	flex-direction: column;
	background: white; padding: 20px 0px;
	    	     background-image: url('fond/bg-trait.png');	
}

.all-modules.erp {
	display: flex;
	flex-direction: column;
	background: white; 
	
	padding: 0px 0px;
	    	   
}





 
    .demo  .cercle{
   
   	overflow: visible ;
    height:140px;
    width:140px;
    border-radius: 50%;
    background:#f1f1f1; 
	
    } 
    
        .demo  .cercle h1{
        font-size: 3em;
        	position: relative;
        	top: 45px;
        	left: 50px;
        	width: 590px;
        	
        	
        }
        
           .demo  .cercle h2{
       		 font-size: 1.2em;
        	position: relative;
        	top: 45px;
        	left: calc(100% + 10px);
        	width: 300px;
        	color: red;
        	
        }  

.presentation-image-div{
	position: relative;
	min-height: 350px;
	min-width: 500px;
	margin: 10px 20px;
	
	
}
  
.presentation-image-div img {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;

	transform: translate(-50%,-50%) ;
	
}     

.presentation-div.erp-module .presentation-image-div{
	min-height: 150px;
	min-width: 150px;
	margin-bottom: 40px;
	
}

.presentation-div.erp-module .presentation-image-div img {
	
	border-radius: 10px;
	
}
 
.presentation-text-div{

	margin: 0px 20px;
	max-width: auto;
}

.presentation-div.erp-module .presentation-text-div{
		align-items: center;
	text-align: center;
	 background-image: url('fond/filet.svg');
    background-repeat: no-repeat;
   background-size: auto;
	
	}

.presentation-div.modules  .presentation-text-div {
	position: relative;
	display: flex;
	flex-direction: column; 
	align-items: flex-start;
	flex-grow: 1;
	padding: 0px 20px 20px 20px;
	margin: 0px 0px;
	
}


.presentation-div.modules > img {
	margin: 40px;
	width: 400px;
		object-fit: cover;
	
}


.presentation-text-div h1 {
	
	color: #242a56;
	font-family: 'Fjalla One','Hind Vadodara',sans-serif;
}

.presentation-div.modules  .presentation-text-div h1{
	position: relative;
	margin-bottom: 15px;
	text-align: center;
	border-radius: 0px 0px 10px 10px;
	background: black;
	color: #FDFDDF;
	padding: 3px 5px;
	max-width: calc(100%);
	width: 450px;
	
}





.presentation-text-div h2 {
	
	font-size: 1.4em;
	font-family: 'Fjalla One','Hind Vadodara',sans-serif;
}


.presentation-text-div > p {
	margin-top: 15px;
	color: black;
	text-align: justify;
    text-justify: inter-word;
}

.presentation-div.erp-module .presentation-text-div > p{
	max-width: 600px;
	margin: auto;
	text-align: center;
	}


.presentation-div.modules  .presentation-text-div > p {
	
		margin-right: 20px;
	
	}


.presentation-icon-div {
	
	display: flex;
	flex-direction: row;
	margin: 20px 0px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 600px;
	
}

.presentation-icon-div-child {
		display: flex;
	flex-direction: column;
	align-items: center;
	width: auto;
	width: 120px;
	text-align: center;
	margin: 5px 10px;
	cursor: pointer;
	
	
	
}

.presentation-icon-div-child img {
	border-radius: 3px;
	width: 100px;
	height: 100px;
	min-width: 100px;
	min-height: 100px;
	max-width: 100px;
	max-height: 100px;
	webkit-box-shadow: 0 0 17px 3px rgba(184,184,184,.5);
    -moz-box-shadow: 0 0 17px 3px rgba(184,184,184,.5);
    box-shadow: 0 0 17px 3px rgba(184,184,184,.5);
}


.presentation-icon-div-child a {
	margin: 5px;
	color: var(--grey-color);
		font-family: 'Hind Vadodara',sans-serif;
		font-size: 0.8em;
		font-weight: bold;
	
}

.presentation-icon-div-child:hover a{
	
	color: var(--dark-orange);
	
}   

.multi-plateform {
	display: flex;
	flex-direction: column;
	background: white;
	justify-content: stretch;
	align-items: center;
	padding: 30px;
	
}

.multi-plateform-child {
	display: flex;
	flex-direction: row;
	padding: 10px;
	justify-content: stretch;
	align-items: center;
	background: #f1f1f1;
	border-radius: 15px 15px 15px 15px;
}

.app-plateform {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	
	
	
	margin: 10px;
	
}


.app-plateform-child {
	position: relative;
	height: 280px;
	width: 150px;
		min-width: 100px;
	
	
	padding: 20px;
	margin: 5px;
	border-radius: 5px;
	background: white;
	 transition: background 0.6s;
}

.multi-plateform.reduit .app-plateform-child {
	height: 150px;
	width: 150px;
	}

.app-plateform-child:hover {
	
	background: #DFFFD9;
}

.app-plateform-child img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: calc(100% - 40px);
	max-height: calc(100% - 40px);
}

.app-plateform-child.selected {
	
	
	
}



.photo-app {
	
	margin: 15px;
	
	 
}


.photo-app img{
	max-width: 100%;
	max-height: 100%;
	border-radius: 15px;
}


.enumeration {
	
	margin-top: 15px;
	display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border-radius: 5px;

padding: 10px 10px 10px 10px;
flex-grow: 1;
margin-bottom: 10px;
 

 background-repeat: no-repeat;
  background-size: cover;
  background-position:  left center;
	
}

.maintenance .enumeration,.modules .enumeration{
	
	  background-color: #f1f1F1;
	
} 

.enumeration .click-button {
	color: black;
	border-color: black;
}
.enumeration .click-button:hover {
	background: yellow;
	border-color: yellow;
	color: black;
}

.enumeration a,.enumeration label{
	color: black;
	margin: 2px;
	
	
}

.enumeration p{
	color: white;
	margin: 10px 5px;
	
	border-radius: 5px;
	padding: 2px 10px ;
	background: var(--dark-orange);
	
}

.enumeration i{
	margin: 0px 10px 0px 0px;
	color: green;
	
	
}


.enumeration a:hover,.enumeration label:hover{
	color: #003938;
	
}


 
  .come-in {
 /*
  transform: translateX(-150px);

  animation: come-in 0.8s ease forwards;
  */
}
.come-in:nth-child(odd) {
  animation-duration: 1.6s;
}

.already-visible {
  transform: translateX(0);
   transform: translateY(0);
  animation: none;
}

@keyframes come-in {
  to { transform: translateX(0); }
}

.screenshot.come-in {
	
	/*
  transform: translateY(150px);
  animation: come-up 0.8s ease forwards;
  */
}

.presentation-div.modules  h1.come-in {
	/*
  transform: translateY(150px);
  animation: come-up 0.8s ease forwards;
  */
}


.partenaire-barniere.come-in {
	/*
  transform: translateY(150px);
  animation: come-up 0.8s ease forwards;
  */
}

.presentation-icon-div-child.come-in {
	/*
  transform: translateY(150px);
  animation: come-up 0.8s ease forwards;
  
  */
}
   
@keyframes come-up {
  to { transform: translateY(0); }
}   




.social-sidebar {
	
	position: fixed;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	z-index: 200;
	padding: 0;
}
.social-sidebar li:first-child a { border-top-right-radius: 5px; }
.social-sidebar li:last-child a { border-bottom-right-radius: 5px; }

.social-sidebar a {
	background: rgba(0, 0, 0, .4);
	color: #fff;
    text-decoration: none;
	display: block;
	height: 35px;
	width: 35px;  
	font-size: 15px;
	line-height: 35px;
	position: relative;
	text-align: center;
    cursor: pointer;
}


.social-sidebar a:hover span {
	left: 120%;
	opacity: 1;
}
.social-sidebar a span {
  
  text-transform: uppercase;
	border-radius: 3px;
	line-height: 24px;
	left: -100%;
	margin-top: -16px;
	opacity: 0;
	padding: 4px 8px;
	position: absolute;
	transition: opacity .3s, left .4s;
	top: 50%;
	z-index: -1;
}

.social-lien {
	display: block;
	color: var(--grey-color);
	font-weight: bold;
	margin: 30px 0px 0px 0px;
	font-size: 1.2em;
}

.social-lien:hover {
	color: #000;
	
}


.social-lien.youtube:hover {
	color: red;
	background: none;
}






li::marker {
 
  content: none;
}

.social-sidebar a span:before {
	content: "";
	display: block;
	height: 8px;
  width: 8px;
	left: -4px;
	margin-top: -4px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
}


.equipe-parent {

	display: flex;
	flex-direction: row;

		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	padding: 20px 35px 20px 30px;
	
}

.equipe-parent-child {
		display: flex;
	flex-direction: column;
	
	align-items: center;
	background:  #41546a;
	
	padding-top: 30px;
}

.equipe img {
	min-height: 90px;
	min-width: 90px;
	height: 90px;
	width: 90px;
	border-radius: 50%;
	margin-right: 15px;
	
	object-fit: cover;
	border: 5px solid #D0D8EA;
	webkit-box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
    -moz-box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
    box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
}



.equipe {
	width: 400px;
	max-width: calc(100% - 20px);
	
		margin: 10px;
		padding: 0px;
	
	display: flex;
	flex-direction: row;
			
	border-radius: 80px 15px 15px 80px;
		
	
}


.equipe .div-vertical {

	
	
	
}

.equipe.come-in {
  /*
  
  transform: translateY(150px);
 
  animation: come-up 0.8s ease forwards;
  */
}

.equipe h3 {
	margin: 0px;
	color: #f1f1f1;
	font-size: 1.4rem;
}

 .equipe label {
	
	
	color: #D0D8EA;
	font-weight: bold;
}   
.partenaire-parent {
	background: white;
	display: flex;
	flex-direction: column;
	
	text-align:center;
	
	
}


  
  

.partenaire-parent h1{
	
	
}

.partenaire-parent-child {
	position: relative;
	
	padding: 5px 0px;
	margin-top: 15px;	
	
	width: 100%;
}


.partenaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 15px;
  padding: 30px 80px;
}

.partenaire img {
  width: 100%; /* ✅ Prend toute la largeur de la cellule */
  height: 80px;
  object-fit: contain;
  border-radius: 5px;
  padding: 10px 10px 15px 10px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease-in-out;
}

@media (max-width: 768px) {
  .partenaire {
     padding: 30px;

  }
}




.avantage-entreprise-div-parent{
			position: relative;
		
	display: flex;
	flex-direction: row;
	align-items: stretch;
    justify-content: center;
    	padding: 35px 20px 35px 20px;
    	background: white;
    	  background-image: url('fond/bg-trait.png');	
 background-repeat: no-repeat;
  background-size: cover;
	text-align: center;
			position: relative;
			
	
	}
	
		.avantage-entreprise-div-parent-child {
		
		
			display: flex;
	flex-direction: row;
	align-items: stretch;
    justify-content: center;
    z-index: 2;
		
		}
.avantage-entreprise-div{
	
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 330px;
		min-width: 280px;		
	overflow: hidden;
	padding: 10px;
	margin: 20px 10px;
		       background-image: linear-gradient(to top, transparent, transparent, transparent);
	
	border-radius:0px 0px  10px 10px ;
	
		border-top: 10px solid orange ;
		webkit-box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
    -moz-box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
    box-shadow: 0 0 3px 1px rgba(184,184,184,.2);
		-webkit-transition: background-image 0.6s ease-in-out;
transition: background-image 0.6s ease-in-out;

	}
	
.avantage-entreprise-div.satisfait {
	
	border-top: 10px solid green ;
	
}	

.avantage-entreprise-div.appel {
	
	border-top: 10px solid #03a9f5 ;
	
}	
	

.avantage-titre-div{
	
	flex-direction: column;
		justify-content: center;
		align-items: center;	
	
}
	.avantage-entreprise-div:hover{
	
	       background-image: linear-gradient(to top, orange, transparent, transparent);

	
	}
	.avantage-entreprise-div.satisfait:hover{
	       background-image: linear-gradient(to top, green, transparent, transparent);
	
	}
	.avantage-entreprise-div.appel:hover{
	   
	    	       background-image: linear-gradient(to top, #03a9f5, transparent, transparent);
	    
	
	}
	



.avantage-entreprise-div p{
	display: block;
	flex-grow: 1;
	color: black;
	padding: 5px 5px 5px 5px;
  	animation: hautEffect .5s;
  	font-size: 1.1em; 
  	text-align: justify;
	text-justify: inter-word;
}

.avantage-entreprise-div h3{
	display: block;
	color: #2a4045;
	margin: 10px 0px 10px 0px;
  	animation: hautEffect .5s;
  	font-size: 1.5em;
  			text-align: center;
  			height: 58px;
  	
  	 /* Fading effect takes 1 second */ 
}


.avantage-entreprise-div-image{
	position: relative;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 180px;
	height: 160px;
	
	text-align: center; 
}

.avantage-entreprise-div-image img{
	
		position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
		transition: 1s ease-in-out;
	
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
		
	}	



.icon-titre {
	
	max-width: 120px;
	max-height: 120px;
}    

.scroll-hidden{
	overflow:auto;
	
	
	 -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
  	-webkit-overflow-scrolling: touch;
   		transition: all 300ms;
   		
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}


.footer {
	display: flex;
	flex-direction: column;
		position: relative;
	width: 100%;
	flex-grow: 1;
	
	background: #000;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
   background-position: center;
  background-image: url('fond/bg-marin.png');
 	
	color: white;
	
}


.rubrique-footer-parent {
	
	display: flex;
	flex-direction: row;
	margin: 0px 15px 15px 15px;
	justify-content: center;
	   background-image: url('fond/filet.svg');
    background-repeat: no-repeat;
   background-size: auto;
   background-position: center;
}

.floating-menu .rubrique-footer {
	
	color: black;
	}

.rubrique-footer {
	display: flex;
	margin: 0px 10px 10px 10px;
	flex-direction: column;
	
	
	max-width: 250px;

}



.rubrique-footer .lien-titre {
	position: relative;
	margin: 15px 0px 10px 0px;
	color: white;
	font-size: 1.3rem;
	
	}
	
	.floating-menu .rubrique-footer .lien-titre {
	
	color: #242a56;
	}
	
	
	.rubrique-footer .lien-titre:after {
    content: '';
    position: absolute;
    background-color: #fff;
    width: 35px;
    height: 1px;
    bottom: -5px;
    left: 0;
}

.floating-menu .rubrique-footer .lien-titre:after {
	    background-color: #242a56;
	
	}

.rubrique-footer .lien {
	
	color: #D0D8EA;
	margin: 5px 0px;
}

.floating-menu .rubrique-footer .lien {
	
	color: black;
}

.rubrique-footer .lien:hover {
	
	color: #FDFDDF;
	
	
}

.floating-menu .rubrique-footer .lien:hover {
	
	color: grey;
	
	
}

.footer .logo {
	margin-top: 30px;
	height: 70px;
	
	margin-bottom: 15px
	
	
}
.footer .div-vertical *{
	
	z-index: 2;
}
.copy-right {
	color: #D0D8EA;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
		text-align: center;
	margin-top: 20px;
	
	border-top: 1px dashed white;
		border-bottom: 1px dashed white;
	
	padding: 1px 10px;

}
.div-24h {
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 70px 15px;
	 background-image: url('fond/filet.svg');
    background-repeat: no-repeat;
    background-position: center;
   background-size: auto;
}

.error-message-div-parent {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	padding: 70px 15px;
	 background-image: url('fond/filet.svg');
    background-repeat: no-repeat;
    background-position: center;
   
   background-size: auto;
   position: relative;
	
   background-color: rgb(255,0,0,0.1);
	}



.error-message-div-parent img{
	
	height: 80px;
	margin-bottom: 20px;
}

.error-message-div {
	
	display: flex;
	flex-direction: column;	
	align-items: center;
	
	
}

.error-message-div h1 {
		font-family: 'Fjalla One',sans-serif;
	
	color: black;
}




.div-24h img {
	
	width: 250px;
	max-width: 100%;
	
	}

.three-shots-div {
	justify-content: center;
	position: relative;
	
}

.three-shots-div .screenshot.mobile {
	
	max-width: 30%;
	}

.three-shots-div .screenshot:not(:first-child,:last-child) {
	z-index: 2;
	webkit-box-shadow: 0 0 12px 2px rgba(184,184,184,.2);
    -moz-box-shadow: 0 0 12px 2px rgba(184,184,184,.2);
    box-shadow: 0 0 12px 2px rgba(184,184,184,.6);
}

.three-shots-div .screenshot:first-child {
	position: relative;
	right: -30px;
}
.three-shots-div .screenshot:last-child {
	position: relative;
	left: -30px;
}



 a[class*="twitter"]:hover,
a[class*="twitter"] span,
a[class*="twitter"] span:before {background: #00aced;}

a[class*="facebook"]:hover,
a[class*="facebook"] span,
a[class*="facebook"] span:before {background: #3B5998;}

a[class*="google"]:hover,
a[class*="google"] span,
a[class*="google"] span:before {background: #DB4437;}

a[class*="whatsapp"]:hover,
a[class*="whatsapp"] span,
a[class*="whatsapp"] span:before {background: #25d366;}

a[class*="linkedin"]:hover,
a[class*="linkedin"] span,
a[class*="linkedin"] span:before {background: #007bb5;}


a[class*="youtube"]:hover,
a[class*="youtube"] span,
a[class*="youtube"] span:before {background: #ff0000;}


  @media only screen and (max-width: 1200px) {
    .multi-plateform-child {
     
     
     flex-direction: column;
     
     }
     
     .app-plateform-child {
	height: 150px;
	width: 150px;
     }
     
      }

@media all and (min-width: 1100px)
{
.div-sur-deux .presentation-div.plateform:first-child:after {
   
       background: linear-gradient(-137deg, #ffe05d 16px, transparent 0) 0 16px, linear-gradient(320deg, #ffe05d 16px, transparent 0) 0 16px;
   
    background-position: right-top;
    background-repeat: repeat-y;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 32px;
}
}

	@media all and (max-width: 1100px)
{
	
.div-sur-deux {
	
	flex-direction: column;
	justify-content: stretch;
	align-items: center;	
}

.div-sur-deux .presentation-div.plateform:first-child:after {
    background: linear-gradient(-45deg, #ffe05d 16px, transparent 0), linear-gradient(45deg, #ffe05d 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}	

.div-sur-deux .presentation-div {
	
	width: auto;
}
	
.avantage-entreprise-div-parent-child{
	flex-direction: column;
	justify-content: stretch;
	align-items: center;	
}

.avantage-entreprise-div-parent {
	
		justify-content: stretch;
		
	
}
.avantage-entreprise-div {
	width: 100%;
}

	}

	@media all and (max-width: 700px)
{
.equipe{
	
	flex-direction: row;
	width: calc(100% - 20px);
	
}

.equipe .div-vertical {
	
	margin-top:  0px;
	margin-left: 10px;
	border:0;
	

}

.equipe h3 {

	font-size: 1.1rem;
}

 .equipe label {
	
	font-size: 0.8rem;
}  
.equipe img {
	min-height: 60px;
	min-width: 60px;
	height: 60px;
	width: 60px;
}



.equipe .div-vertical {
	
	justify-content: center;
}


.avantage-entreprise-div{
	width: calc(100% - 20px);
	flex-direction: column;
	margin: 5px 10px;
	
	}


	}









      @media only screen and (max-width: 600px) {
 
 
.presentation-icon-div-child {
	
	margin: 2px 3px;
	width: 90px;
	
	}
    
.presentation-icon-div-child img { 
	min-width: 80px;
	min-height: 80px;
	max-width: 80px;
	max-height: 80px;
	width: 80px;
	height: 80px;
	
	}
    
     
.presentation-text-div h1 {
 	
 		font-size: 1.5em;

 	
 }
 
  .presentation-div.modules {
 
 		margin-left: 10px;
 		margin-right: 10px;
 }
 
 .presentation-div.modules  .presentation-text-div h1{
 
 	width: 100%;
 }

 
 .rubrique-footer-parent {
 	flex-direction: column;
 	
 }
 
 .rubrique-footer {
 max-width: calc(100%);
 margin: 0;
 margin-left: 40px;
 }
 
 
 .floating-menu .rubrique-footer {
 	margin-left: 0px;
 
 }
 

 .app-plateform-child {
 	height: 100px;
 	width: 100px;
 }
 
.multi-plateform.reduit .app-plateform-child {
 	height: 100px;
 	width: 100px;
 } 
 
.presentation-text-div h2 {
 	
 		font-size: 1.2em;

 
 } 
      }   
    
 @media only screen and (max-width: 1110px) {
 .partenaire-barniere:not(.petit) img{
	height: 40px;
	margin: 2px 5px;
	
	}
	
	.slider-sur-deux {
	flex-direction: column;
	
}
.slider-sur-deux .barniere{
	width: 100%;
height: calc(50% - 10px);

}

.slider-divider {
	
	
	height: 10px; 
	width: 100%;
}
  
     
 .posez-question h1 {
 	
 		font-size: 1.2em;

 
 }
.posez-question h2 {
 	
 		font-size: 1.1em;

 
 }
 }    
    
     @media only screen and (max-width: 780px) {
     

 
 .message-barniere-div h1 {
 font-size: 2.4em;
 }
 
 .message-barniere-div h2 {
 font-size: 1.1em;
 }
 
}   
   

       @media only screen and (max-width: 770px) {
.menu-bar-entete-titre-div {
 	
 		display: none;
	
 
 }
       }
  @media only screen and (max-width: 720px) {

 
 .demo .cercle {
 	width: auto;
 	height: auto;
 	background: none;
 }
 
 .demo .cercle h1, .demo .cercle h2 {
 	position: relative;
 	width: auto;
 	left: auto;
 	top: auto;
 	font-size: 1.8em;
 }
 .demo .cercle h2 {
 font-size: 1.1em;
 }
 
 }
    
       @media only screen and (max-width: 1100px) {
.presentation-div:not(.plateform) {
 	
 		flex-direction: column;
		
 
 }
 


 .presentation-image-div{
 	
 	min-width: auto;
 	width: auto;
 }
 
 .presentation-div.informatique .presentation-image-div:not(.div-2) img {
 	 content:url('images/developer44.png');
 	
 }
 

 
 .presentation-div.modules > img {
 	display: none;
 }
 

 
 
 
} 
    
 
 
 
       @media only screen and (max-width: 920px) {
.presentation-div.plateform {
 		align-items: center;
 		flex-direction: column;

 
 }
 

} 
   
svg.principale {
	background: rgb(255,255,255,1);
	
    height: 50px;
 
  width: 50px;
	}
svg {
  height: 60px;
 
  width: 60px;

   position: fixed;
	  right: 10px;
  bottom: 10px;
 
	 border-radius: 50%;
	

	z-index: 200;
	
	
	
}


.plate {
	 position: fixed;
	    right: 10px;
  bottom: 10px;
 
  height: 50px;
  width: 50px;
  z-index: 201;
  
}
.burger {
  filter: url(#gooeyness);
  right: 5px;
  bottom: 5px;
}
.x {
  transform: scale(0);
  transition: transform 400ms;
   right: 5px;
  bottom: 5px;
}
.line {
  fill: none;
  stroke: #242a56;
  stroke-width: 6px;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50%;
  transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms;
}
.x .line {
  stroke-width: 5.5px;
}
/* First plate */
.plate1 .line2 {
  stroke-dasharray: 40 200;
  stroke-dashoffset: 0px;
}
.plate1 .line3 {
  stroke-dasharray: 40 179;
  stroke-dashoffset: 0px;
}
.active .line {
  transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms;
}
.active.plate1 .line1 {
  transform: scale(0, 1);
  transition: transform 500ms 100ms;
}
.active.plate1 .line2 {
  stroke-dasharray: 5px 200;
  stroke-dashoffset: -164px;
}
.active.plate1 .line3 {
  stroke-dasharray: 5px 179;
  stroke-dashoffset: -142px;
}
.active .x {
  transform: scale(1);
  transition: transform 400ms 350ms;
}

.floating-menu {
	
	display: flex;
	flex-direction: column;
	
	position: fixed;
	right: 5px;
	bottom: 65px;
	
	max-height: calc(100vh - 120px);
	z-index: 190;
	background: white;
	margin: 10px 10px 10px 80px;
	border-radius: 10px 10px 0px 10px;
	webkit-box-shadow: 0 0 12px 4px rgba(184,184,184,.4);
    -moz-box-shadow: 0 0 12px 4px rgba(184,184,184,.4);
    box-shadow: 0 0 12px 4px rgba(184,184,184,.4);
  
	
}

.floating-menu.hidden {
	
	display: none;
}

.floating-menu:after {
	
    content: '';
    height: 0;
    width: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-top: 10px solid white;
    right: 10px;
    bottom: -8px;
    position: absolute;
    display: block;
    z-index: 201;
   
 
}

.floating-menu h1{
	
	padding-left: 10px;
	color: #41546a;
	border-bottom: 1px solid #f1f1f1;
	}

	
	.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}



/* The Modal (background) */
.modal {
	visibility: hidden;
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top */
  left: 0;
  top: 0;
  width: 100vw; /* Full width */
  height: 100vh; /* Full height */
 background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.4);  
  
}


.form-popup {
	  background-color: white;
	  border-radius:10px;
	  border-collapse: separate; 
	   overflow: hidden;
	    box-sizing: border-box;
	 display: inline-flex;
  	flex-flow: column;
	position: relative;
	top: calc(50% + 15px);
	left: 50%;
	transform: translate(-50%, -50%);
  	
	height: auto;	
	width: auto;
	max-height: calc(100vh - 40px);
	max-width: calc(100vw - 40px);
}

.rubrique.publicite {
	
	border: 0;
}

.rubrique.publicite input,.rubrique.publicite select,.rubrique.publicite textarea{
	min-width: 250px;
	max-width: 250px;
	width: 250px;
	padding: 9px 5px;
}


.rubrique.publicite input,textarea,select{
	
	background: #F3F0F4	;
	border:0;
	border-radius: 15px;
}

.rubrique.publicite input:not([type='range']):focus,select:focus {
 background: 	#F9EAFB	;
}

.rubrique.publicite textarea{ 
	
	min-height: 70px;
	height: 70px;
	max-height: 70px;
	flex-grow: 1;
	
	}

.rubrique{
	display: flex;
	flex-direction: column;
		margin: 5px 5px;		
		background: white;
		border: 1px solid #ddd;
		position: relative;
		
		border-radius: 5px;
		
}
.rubrique h2 {
	color: var(--menu-color);
	font-size: 0.9rem;
	padding: 10px 5px 5px 15px;
	border-bottom: 1px solid #ddd;
}


.form-container {
		 display: flex;
		 flex-direction: column;
	flex-grow: 1;	
	overflow-y:auto;
	 justify-content: stretch;	 
	padding: 10px;
	 
	 
}

.boutons-div {
	padding: 10px 10px 10px 10px;
	background: white;
	border-top: 1px solid #f1f1f1;
}

.form-popup .titre {
	font-size: 1.4rem;
	color: var(--menu-color);
	border-bottom: 1px solid #ddd;
	padding: 5px 10px;
	
}

.btn {
	background-color: var(--dark-orange);
	color: white;
	padding: 6px 10px;
	width: auto;
	border-radius: 3px;
	font-weight: 600;
	
		-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2);
      -moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.2);
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      transition: background 1s;
}

.btn i{
	
	margin-left: 5px;
	margin-right: 5px;
}

.btn.valider{
	background: var(--valid-button-color);
}

.btn.cancel{
	background: var(--cancel-background);
}

.div-vertical.boutons-div .btn:not(:last-child){
	
	margin-bottom: 10px;
}

.div-horizontal.boutons-div .btn:not(:last-child){
	
		margin-right: 10px;
}

.div-horizontal.boutons-div{
	align-items: center;
	justify-content: flex-end;
}
.div-horizontal.boutons-div .btn:not(.petit) {
	width: 160px;
	
}

.btn.petit {

	width: 110px;
}

.rubrique > .div-vertical div:not(.div-vertical):not(.inputWithIcon):not(.div-label-icone):not(.div-horizontal),.modal .rubrique > .div-horizontal div:not(.div-horizontal):not(.inputWithIcon):not(.div-label-icone):not(.div-vertical) {
	
	margin: 2px 10px 2px 10px;
}

.rubrique > .div-vertical div:not(.div-vertical):not(.inputWithIcon):not(.div-horizontal):not(.div-label-icone):first-child{
	margin-top: 10px;
}

.rubrique > .div-vertical div:not(.div-vertical):not(.inputWithIcon):not(.div-horizontal):not(.div-label-icone):last-child{
	margin-bottom: 10px ;
}



.titre-label {
	font-size: 0.9rem;
	display: block;
	color: var(--menu-color);
	margin-bottom: 2px;
	font-weight: bold;
	font-style: italic;
	margin-left: 5px;

}

.div-publicite {
	
	
	display: flex;
	flex-direction: column;
	
	align-items: center;
	padding: 10px 15px;
	text-align: center;
	background-position: top center; 
	background-image: url('fond/filet.svg'); 
	background-repeat: no-repeat; 
	background-size: auto;
}

.form-popup .div-publicite .screenshot {
	
	border-radius: 5px;
	width: 130px; 
	max-height: auto;
	
}

.form-popup .div-publicite h1 {
		font-family: 'lobster';
		
		
		color: #242a56;
	
	
}


 

 @media only screen and (max-width: 800px) {
 
 
.div-publicite {
	
	display: none;
	
	}
	
	.rubrique.publicite textarea{ 
	
	height: 60px;
	max-height: 60px;
	
	}
	
 }
 
 .spinner-background{
		visibility: hidden;
		display: block;
	  position: fixed; 
	  top: 0;
	  left: 0;
	  width: 100%;
  height: 100%;
}

.lds-spinner {
  position: absolute; 
  width: 64px;
  height: 64px;
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%);
  z-index: 2;
}


.lds-spinner div {	
	position: relative;
  transform-origin: 32px 32px;
  animation: lds-spinner 1.2s linear infinite;

}
.lds-spinner div:after {
  content: " ";
  position: absolute;
  top: 3px;
  left: 29px;
  width: 5px;
  height: 14px;
  border-radius: 20%;
  background: black;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;  
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}