/*CSS utilisé pour la page d'accueil*/
/*Application du fond sur l'ensemble de la page*/

body{
	background-image: url(../media/image/home/General_BG.svg);
}

/*Pré-paramétrer les tailles et éléments réutilisablesd*/

main{
	font-family: var(--font-trueno);
}

.main__homepage{
	display: grid;
	align-items: center;
	justify-content: center;
	gap: 8em;
	
}

.container__homepage{
	display: grid;
	min-width: 100vw;
}

.main__font--highlightedcolor{
	color: rgb(var(--blue-color));
}

.main__h2--font{
	font-size: var(--large-font-size);
}

.main__h3--font{
	font-size: var(--semilarge-font-size);
}

.main__subtitle{
	color: rgba(var(--grey-color), .7);
	text-align: center;
}


.grid{
	display: grid;
}

.flex{
	display: flex;
}

/*définition des boutons*/

.button--generalsettings{
	padding: 1em 2em;
	border: none;
	font-size: var(--medium-font-size);
	width: 13em;
	color: rgb(var(--white-color));
	text-decoration: none;
	text-align: center;
}


.CTA--yellow{
	background-color: rgb(var(--yellow-color));
	border-radius: 30px;

}

.firstbutton--black{
	background-color: rgb(var(--black-color));
	border-radius: 10px;
}

.firstbutton--blue{
	background-color: rgb(var(--blue-color));
	border-radius: 10px;
	cursor: pointer;
}


.wrapper__hero, .wrapper__youandcustomers, .wrapper__timesaving, .wrapper__ourstory, .wrapper__news, .wrapper__qanda, .wrapper__submitting, .wrapper__step, .wrapper__404image{
	max-width: 71.25em;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	justify-self: center;
	margin: 0 3em;
}

.hero__leftside, .hero__rightside{
	align-content: space-between;
	gap: 1em;
}

.hero__rightside, .submitting__rightside{
	justify-content: flex-end;
}

.hero__h1--font{
	font-size: var(--verylarge-font-size);
	font-weight: bold;
	line-height: 1.2;
	margin: 0;
}

.hero__p--font{
	font-family: var(--font-proxima);
	font-weight: 400;
}

/*Pour la deuxième section You and your customers*/

.youandcustomers__rightside li{
	list-style-type: none;
	padding: .5em 0;

}

.youandcustomers__rightside li img{
	padding-right: 1em;
}


/*Troisième partie sur le gain de temps*/

.wrapper__timesaving, .wrapper__news{
	grid-template-columns: 1fr;
	margin: 0 1vw;
}

.timesaving__bottom{
	margin: 5em 2em;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1em;
}

.main--textaligncenter{
	text-align: center;
}

.main--textalignleft{
	text-align: left;
}

.timesaving__customizedstudy, .timesaving__appointment, .timesaving__training{
	/*width: 33%;*/
	border-radius: 30px;
	box-shadow: 0 0 8px rgba(var(--blue-color), .3);
	padding: 2em;
}

.timesaving__customizedstudy p, .timesaving__appointment p, .timesaving__training p {
	font-weight: 300;
}


/*Quatrième partie sur "notre histoire" */

.container__ourstory{
	background-color: rgba(var(--blue-color), .5);
	padding: 3em 0;
	
}


/*Cinquième partie sur le blog*/

.news__categoriearticle{
	font-size: var(--small-font-size);
	text-transform: uppercase;
	font-weight: bold;
}

.news__bottom{
	margin-top: 5em;
	gap: 1em;
	justify-self: center;
}


/*Sixième partie sur le FAQ*/



.wrapper__qanda{
	grid-template-columns: 1fr;
}

.qanda__top{
	margin: 1em;
}

.qanda__bottom{
	grid-template-columns: 1fr 1fr;
	width: 80vw;
}

.qanda__bottom details{
	border: .1em solid rgba(var(--black-color), .05);
	background-color: rgb(var(--white-color));
	border-radius: 1em;
	margin: 1em;
}

.qanda__summary span{
	align-self: center;
}

.qanda__summary, .qanda__answer{
	padding: 1em;
	justify-content: space-between;
}


summary::-webkit-details-marker, .qanda__summary::marker{
	display: none;
}



/*Septième section sur l'appel à l'action*/

.wrapper__submitting{
	background: linear-gradient(-46deg, rgba(60,147,255,0.06) 0%, rgba(60,147,255,0.2) 100%);
	background-blend-mode: normal;
	padding: 2em 4em;
	border-radius: 1.25em;
	max-height: 20em;
	align-content: center;
	gap: 8em;
}

.submitting__rightside img{
	overflow: visible;
}


/*Paramétrage des images du site*/

.home__img--resize img{
	width:30vw;
	min-width: 30vw;
	max-width: 35vw;
}


/*Classe permenant de passer en darkmode*/

/*.darkmode{
    background-color: rgb(var(--black-color));
}*/


/*CSS utilisé pour la page blog*/


.news__nav a{
	color: rgb(var(--black-color));
	text-decoration: none;
	font-family: var(--font-trueno);
}


.news__nav{
	align-items: center;
}

.news__nav ul > li:last-child{
        display: none;
}

.news__nav ul{
    display: inline-grid;
    grid-template-columns: repeat(6, 13.33vw);
	background-color: rgb(var(--black-color),0.05);
	align-items: center;
	height: 3em;
	border-radius:3em;
	width:80vw;
}

.news__nav li{
	text-align: center;
}

.news__nav a{
	color: rgb(var(--black-color), .5);
	padding: .5rem 1rem;
	font-size: var(--medium-font-size);

}

.news__nav a:hover{
	color: rgb(var(--white-color), 1);
	background-color: rgba(var(--black-color), 5);
	border-radius: 30px;

}

/*CSS de l'article mis en avant*/

.wrapper__hightlightednews{
    max-width: 71.25em;
	align-items: center;
	justify-self: center;
	margin: 0 3em;
}

.wrapper__hightlightednews a{
    text-decoration:none;
    color: rgb(var(--white-color));
}



.highlighted__texte{
    align-content:center;
    padding: 2em;
    background-color: rgb(var(--black-color));
    height: 22em;
    border-radius: 0 2em 2em 0;
    
}

.hightlightednews__bottom{
    grid-template-columns: 1fr 1fr;
    width: 80vw;
    border-radius:2em;
}

.hightlightednews__img{
    background-image: url("/media/image/home/Image__firstarticle.jpg");
    background-size: cover;
    height:22em;
    border-radius: 2em 0 0 2em;
}

.highlighted__texte h3{
    font-size: var(--large-font-size);
}



/*CSS pour l'étape 3 de l'outil*/

.wrapper__step{
    border-radius: 2em;
    padding: 2em;
    width: 80vw;
    color: rgb(var(--grey-color));
	background-color: rgb(var(--white-color));
	box-shadow: 0px 0px 1em rgba(var(--black-color), .08);
	grid-template-columns: 1fr 1fr;
}

.step__titre span{
    text-transform: uppercase;
    font-weight: 600;
}

.step__titre h1{
    font-size: var(--large-font-size);
    color: rgb(var(--blue-color));
    margin: .5em 0;
}


.step__suggestions ul {
    padding: 0;
    
}
    

.step__suggestions li{
    
  width: 20em;
  min-height: 2em;
  border-radius: 10px;
  border: 1.5px solid #3c93ff;
  padding: 1em 2em;
  list-style-type: none;
  margin: 1em;
  color: rgb(var(--blue-color));

    
}

.step3__rightside{
    display: inline-grid;
}

.step3__rightside input{
    width: 30vw;
    height: 4.5em;
    border-radius: 1em;
    border: none;
	padding: 0 1.5rem;
	color: rgb(var(--grey-color));
	text-decoration: none;
	background-color: rgb(var(--white-color));
	margin: 2em 1em;
	box-shadow: 0px 0px 1em rgba(var(--black-color), .08);
}

.step3__nextbutton{
    max-width: 71.25em;
	align-items: center;
	justify-self: end;
	margin: 2em 11vw 0 0;
}


/*CSS pour la page 404*/

    .wrapper__404image{
        grid-template-columns: 1fr 1fr;
    }
	
	
	.404__rightside > img{
	  
	    max-width: 50vw;
        max-height: 50vh;
	}
	



/*Responsive du site*/

@media only screen and (max-width: 53.75rem) {

	/*Modifications des wrappers*/

	.wrapper__hero, .wrapper__youandcustomers, .wrapper__ourstory, .wrapper__submitting, .news__bottom, .timesaving__bottom, .qanda__bottom, .hightlightednews__bottom, .wrapper__step, .wrapper__404image{
		grid-template-columns: 1fr;

	}

	.wrapper__submitting{
		grid-template-columns: 1fr;
		max-width: 100vw;
		padding: 1em 2em;
	}

	.wrapper__youandcustomers > div.home__img--resize, .wrapper__ourstory > div.home__img--resize, .submitting__rightside{
		display: none;
	}

	.wrapper__timesaving, .wrapper__news{
		padding: 0 1em;
   }

   .wrapper__qanda{
		margin: 0 2em;
   }
   
   .wrapper__ourstory, .wrapper__submitting{
       margin: 0 1em;
   }
   
	.main__homepage{
		margin: 0;
		gap: 3em;
	}

	.hero__h1--font{
		font-size: var(--mobile-verylarge-font-size);
	}

	.home__img--resize img{

		width:70vw;
		min-width: 30vw;
		max-width: 100vw
	}

	.hero__rightside, .submitting__rightside, .ourstory__leftside {
		justify-content: center;
	}

    
    .container__submitting{
        margin-bottom: 2em;
    }

	.submitting__leftside > h2, .qanda__top{
		margin: 0;
	}

	.qanda__bottom details{
		margin: .5em 0;
	}

	.firstbutton--black, .CTA--yellow{
		width: 100%;
	}

	.youandcustomers__rightside > ul{
		padding-left: 0;
   }

   .main__h2--font{
	   margin: 0;
	   font-size: var(--mobile-large-font-size);
   }
   
   /*CSS pour la page blog*/
   
   .wrapper__hightlightednews{
       margin: 0;
       gap: 2em;
   }
   
   .hightlightednews__bottom{
       width: 90vw;
   }
   
   .hightlightednews__img, .highlighted__texte{
       height: 12em;
 
   }
   .hightlightednews__img{
      border-radius: 2em 2em 0 0;
   }

    .highlighted__texte{
        border-radius:0 0 2em 2em;
    }
    
    .highlighted__texte p{
        display: none;
    }
    
    .highlighted__texte h3{
        font-size: var(--semilarge-font-size);
    }
    
    .timesaving__bottom{
        margin: 3em 0;
    }
    
    .news__nav ul > li:not(:nth-child(6)){
        display: none;
    }
    
    .news__nav ul > li:last-child{
        display: contents;
    }
    
    .news__nav input{
        width: 50vw;
        height: 3em;
        border: none;
    	padding: 0 1.5rem;
    	color: rgb(var(--grey-color));
    	text-decoration: none;
    	background-color: rgb(var(--white-color));
        
    }
    
    
    /*CSS pour la page de l'outil*/
    
    .wrapper__step{
        width: 90%;
        margin: 0;
    }
    
    .firstbutton--blue{
        width: 80vw;
    }
    
    .step3__rightside input{
        width: 80%;
    }
    
    .step__suggestions li{
        width: 100%;
        margin: 1em 0;
    }
    
    /*CSS pour la page 404*/
    
    .wrapper__404image{
        gap: 4em;
    }
    .page404__leftside{
        gap: 2em;
    }
    
 
	
}

@media only screen and (min-width: 53.75rem) {

	.news__bottom, .timesaving__bottom{
		grid-template-columns: 1fr 1fr;
	}
	
	/*CSS pour la page blog*/
	
	.hightlightednews__bottom{
       height: 22em;
   }
   
}

@media only screen and (min-width: 71.25rem) {

	.news__bottom, .timesaving__bottom{
		grid-template-columns: repeat(3, 1fr);
	}

}