@charset "utf-8";
* {
	box-sizing: border-box;
	list-style-type: none;
	
}
a{
	text-decoration:none;
}
button{
	background-color: transparent;
	border: 0;
}
body{
	font-family: "Roboto", sans-serif;
}
.sombre{
	background-color: #1B1842;
}
.clair{
	background-color: #BDD5D3;
}
img{
	width: 100%;
}
.galerie a{
	color: white;
}
a.blanc{
	color: white;
}
main{
	text-align: center;
	color:white;
	font-weight: 700;
  	font-style: normal;
  	font-size: 1.5rem
}	
model-viewer{
	width: 150px;
	height: 150px;
}
#form-contact .form-control::placeholder{
	color: #B9B8BA ;
}	
	/*classe-perso*/
.bg-blue {
	background-color: #90ACB3;
}
.grid-item {
	padding: .25rem;
	width: 24.5%;
}
.photos{

}
.galeries{
	background-color:#2D0101;
}
.galerie{
	color: white;
	gap: 5rem;
}

.bg-degrade-g{
	background: radial-gradient(circle, rgba(190,190,190,1) 0%, rgba(80,80,80,1) 100%);
}
.reseaux{
	margin-top:2rem;
	font-size:1rem;
}
.first{
	color: #B9B8BA ;
}	
	/*espaces*/
.mt-10{
	margin-top:5rem;
}
.mb-10{
	margin-bottom: 21rem
}
.mt-11{
	margin-top:13rem;
}
.mt-6{
	margin-top: 3rem
}
.my-xl{
	padding-left: 10em;
	padding-right: 10em;
	width: 80%;
}
/*	perso 2*/
.millieu{
	margin:auto;
}
.foot{
	width: 10%;
	margin:auto;
}
.menu{
	list-style-type:none;
	color: black;
	justify-content:space-evenly;
}
.nuit{
	font-size: 3rem;
	color: white;
}	
.icon{
	width: 26%;
	margin-top: 10px;
}
.codes{
	width: 26%;
	height: 7rem;
	margin-top: 10px;
	margin-bottom: 2rem;
	border-radius:25px;
}
.code{
	border-bottom-right-radius:25px;
	border-bottom-left-radius:25px;
}
.javaS{
	background-color:#E0890D;
}
.php{
	background-color: blue;
}
.ajax{
	background-color: #CC0AC1;
}

.absolute{
	position: absolute;
	top: 0rem;
	left: 3rem
}
.absolute2{
	position: absolute;
	top: 0;
	left:0;
}
.absolut-f{
	position: relative;
	top: -4rem;
	order: -1;
}
.btn{
	background-color:#1ADCD5;
	margin:auto;
}
.btn:hover{
	background-color: black;
	color: white;
}
.relatif{
	position: relative;
}

.ligne{
	border-bottom: 1px solid black;
}	
	/*tailles*/


#parametres{
	width: 1000%;
	position: relative;
	left: -2rem;
	top: -2rem;
}
.min{
	min-height: 30rem;
}
.w-5{
	width: 5%;
}
.w-10{
	width: 10%;
}
.w-18{
	width: 18%;
}
.w-20{
	width: 20%;
}
.w-30{
	width: 30%;
}
.w-100{
	width: 100%;
}
.w-50{
	width: 50%;
}
.w-80{
	width: 70%;
}
span{
	font-size:1rem;
}
footer h2,p{
	font-size:0.5rem;
}
#deja{
	font-size:1rem;
}	
	/*bordure*/



.bt-noir{
	border-top: 1px solid black;
}	
	/*couleurs*/
.c-blanc{
	color: white;
}
.c-noir{
	color: black;
	font-weight: 200;
	font-size: 1.5rem;
}
.noir{
	background-color: black;
	color: white;
}
.f-bleuc{
	background-color:#46A6A2;
}
.f-rouge{
	background-color: #9b1010 !important
}
.bg-blanc{
	background-color: white;
}
.bg-noir{
	background-color: black;
}
.bg-semi{
	background-color:rgba(0, 0, 0, 0.3);
}
.btn-red{
	background-color: #9b1010;
}
.btn-blue{
	background-color: #46A6A2;
}
	/*d-flex*/

.evenly{
	justify-content:space-evenly;
}
.flex-end{
	align-items: flex-end;
}
.wrap{
	flex-wrap: wrap;
}
.around{
	justify-content:space-around;
}
.center{
	align-items:center;
}
.baseline{
	align-self: baseline;
}
.desactiver{
	opacity: 0.5;
}
/* Extra Small devices est le css au dessus, pas besoin de min-width*/

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.mt-11{
	margin-top:15rem;
	}
	.mt-6{
	margin-top: 5rem
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.mt-11{
	margin-top:19rem;
	}
	.mt-6{
	margin-top: 6rem
	}		
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	main{
	  	font-size: 2rem
	}
	.mt-11{
	margin-top:16rem;
	}
	.mt-6{
	margin-top: 5rem
	}
	.bord-main{
	border: 1em solid black;
	border-bottom-style: none;
	border-top-style: none;
	}
	.bord-head{
		border: 2em solid black;
		border-bottom-style: none;
	}
	.bord-nav{
		border: 2em solid black;
		border-bottom-style: none;
		border-top-style: none;
	}
	.corner-h{
	border-top-right-radius: 125px;
	border-top-left-radius: 125px;
	}
	.corner-b{
		border-bottom-right-radius:125px;
		border-bottom-left-radius: 125px;
	}
	.reseaux{
	margin-top:2rem;
	font-size:2rem;
	}
	span{
	font-size:2rem;
	}
	footer h2,p{
		font-size:1rem;
	}
	#parametres{
	width: 300%;
	position: relative;
	left: -2rem;
	top: -2rem;
	}
	.absolute{
	position: absolute;
	top: 2rem;
	left: 8rem
	}
	.absolut-f{
	position: relative;
	top: 0;
	order: -1;
	}
	.codes{
	width: 26%;
	height: 15rem;
	margin-top: 10px;
	margin-bottom: 2rem;
	border-radius:25px;
	}
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.mt-11{
	margin-top:20.5rem;
	}
	.mt-6{
	margin-top: 6rem
	}		
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
	.mt-11{
	margin-top:30.5rem;
	}
	.mt-6{
	margin-top: 11rem
	}		
}