/* fonts*/

/*reset*/
*,
::before,
::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	text-decoration:none;
	list-style: none;
	}

body {
	font-family: Montserrat, Helvetica, sans-serif;
	background: #f4f4f4;
	}
	
#deco
{
position: fixed;
width: 100%;
z-index: -1;
top: 0px;
}

#bando
{
position: fixed;
}

marquee
{
position: fixed;
background-color: ;/* couleur du bandeau en mot anglais - ne rien mettre pour la transparence */
font-size: 20px;
color: yellow; /* couleur text du bandeau en mot anglais */
border-bottom: 2px solid red; /* couleur encadrement du haut */
border-top: 2px solid red; /* couleur encadrement du bas */
border-radius: 15px;
width: 100%;
top: 8px;
}

 /* barre menu sur ordi*/
nav {
	position: fixed;
	width: 100%; /* de la fenêtre windows*/
	top : 42px;
	display: flex;
	align-items: center;
	padding: 15px 25px;
	background: rgb(0, 0, 0, .01); /*#fafafa */
		backdrop-filter: blur(15px);
	box-shadow: inset 0px -1px 0px #c5c5c6;
	z-index: 100;
	}

nav::after{
	content:"";
	position: absolute;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,transparent,#fafafa,transparent,#fafafa,transparent);
	transition: 0.5s;
	}

nav:hover::after{
	left: 100%;
	}
	
.nav-icon {
	display: flex;
	align-items: center;
	text-decoration: none;
	margin-right: 20px;
	}
	
.nav-icon span {
	font-family: Roboto Flex,sans-serif;
	font-size: 25px;
	margin-left: 10px;
	font-weight: 400;
	color: #333;
	}
	
.nav-icon img {
	width: 40px;
	transform: rotate(-17deg) translateX(5px);
	
	}

.hamburger {
	display: none;
	}

.navlinks-container a {
	margin: 0 10px;
	font-size: 16px;
	font-weight: 500px;
	text-decoration: none;
	color: #414141;
	display: inline-block;
	position: relative;
	transition: all 0.3s ease-in-out;
	}

.navlinks-container a::after {
	content: "";
	display: block;
	position: absolute;
	bottom: -3px;
	width: 100%;
	height: 1px;
	transform: scaleX(0); /*le trait qui apparait sous les mots du menu au passage de la souris*/
	transform-origin: center;
	background: #333;
	transition: transform 0.3s ease-in-out;
	}

.navlinks-container a:hover::after {
	transform: scaleX(1); /*le trait qui reste sous les mots du menu quand la souris reste*/
	}
	
.navlinks-container > a:hover {	
	letter-spacing: 3px;
	}
	
.navlinks-container a.page {
	font-weight: bold;
	}

/*barre de menu tablette*/
@media (max-width: 900px) {
	nav {
		padding: 15px 20px;
		position: fixed;
		}
	.nav-icon {
		order: 2;
		margin: 0 auto;
		}
	.nav-icon span {
		font-size: 22px;
		}
	.main-navlinks {
		order: 1;
		}
	.hamburger {
		width: 20px;
		height: 20px;
		cursor: pointer;
		border: none;
		display: flex;
		background: rgb(0, 0, 0, .01); /*#fafafa */
			backdrop-filter: blur(15px);
		align-items: center;
		position: relative;		
		}

	.hamburger span {
		display: block;
		width: 100%;
		height: 2px;
		background: #333;
		position: absolute;
		pointer-events: none;
		transition: opacity 0.3s 0.15s ease-out;
		}
	.hamburger span:nth-child(1),
	.hamburger span:nth-child(3) {
		transition: transform 0.3s ease-out;
		}
	.hamburger span:nth-child(1) {
		transform: translateY(7px);
		}
	.hamburger span:nth-child(3) {
		transform: translateY(-7px);
		}
	.hamburger.open span:nth-child(1) {
		transform: translate(0) rotate(135deg);
		}
	.hamburger.open span:nth-child(2) {
		opacity: 0;
		transition: opacity 0s ease-out;
		}
	.hamburger.open span:nth-child(3) {
		transform: translate(0) rotate(-135deg);
		}
	.navlinks-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		position: absolute;
		background: #fafafa;
		top: 100%;
		left: 0;
		height: 100vh;
		padding: 15px 50px 15px 20px;
		border-right: 1px solid #c5c5c6;
		transform: translate(-100%); /* faire disparaitre la barre du menu à gauche sur 100% de sa largeur*/
		transition: transform 0.3s ease-out; /* géré par le JAVA SCRIPT */
		}
	.open {
		transform: translate(0%); /* faire apparaitre le menu à gauche*/
		}	
	
	.navlinks-container a {
		font-size: 18px;
		margin: 10px 0;

		}
	.navlinks-container > a:hover {
		padding-left: 10px;
		}
		
	marquee {
		font-size: 18px;
		top: 9px;
		} 
/*footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, auto));
	gap: 2rem;
	}*/
	}

/*barre de menu portable*/
@media (max-width: 768px) {
	.nav-icon img {
		width: 30px;
		}
	.nav-icon span {
		font-size: 20px;
		}
/*	footer {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, auto));
	gap: 2.5rem;
	}*/
	}

#corp
{
position: relative;
display: block;
font-size: 1.0em;
width: calc(100%-5px);
height: 100%;
min-height: 100vh;
margin: 0px 5px;
top: 110px;
	background: url(image_rdc/fond_logo_rdc.png);
	background-repeat: no-repeat;
	background-size: 42%;
	background-position: center 155px;
	background-attachment: fixed;
z-index: -2;
margin-bottom: 70px;
padding-bottom: 50px;
}

#corp h1{
	text-shadow: -1px 1px 0px #919191,
		-2px 2px 0px #919191,/*plus il y aura de ligne, plus l'ombre sera grande effet 3d*/
		-3px 3px 0px #919191,
		-4px 4px 4px #000000;
	text-align: center;
	/*mix-blend-mode: overlay;*/
	text-transform: uppercase;
	box-shadow: 0 -1px 2px rgba(0,0,0,0.8);/*inset 0px -1px 3px #c5c5c6;*/
	background: rgb(0, 0, 0, 0.5); /*#fafafa */	
	}

.bxs-hand-right{
	margin-left: 30px;
	}
	
.bx-send{
	margin-left: 60px;
	}	

.road {
	position: absolute;
	width: 100%;
	height: 80px;
	top: -80px;
	background: #1a242f;
	transform-origin: bottom;
	transform-style: preserve-3d;
	transform: perspective(500px) rotateX(30deg);
	box-shadow: inset 0px -1px 0px #c5c5c6;
	}
.road:before {
	content:'';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	height: 7px;
	background: linear-gradient(90deg,#fff 0%,#fff 70%,#1a242f 70%,#1a242f 100%);/*pointillé route*/
	background-size: 120px;
	animation: animate 0.8s linear infinite;
	}
@keyframes animate{
	0% 	{background-position: 0px}
	100% 	{background-position: -120px}
	}

/*.road:after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 20px;
	background: #333;
	bottom: -20px;
	transform-origin: top;
	transform: perspective(500px) rotateX(-25deg);
	}*/
	
/*footer - bas page du site*/
#footer {
	position: absolute;
	background: #1a242f;
	box-shadow: inset 0px -1px 0px #c5c5c6;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, auto));
	gap: 3.5rem;
	left: 0;
	right: 0;
	bottom : auto;
	z-index: -2;
	margin: 0;
	text-align: center;
	margin-top: 80px;
	padding-bottom: 10px;
}
#footer img {
	width: 80px;
	padding-top: 10px;
	transition: all 0.3s ease-in-out;
	}
#footer img:hover{
	transform: rotate(-15deg) translateX(-5px);
	width: 105px;
	}
.footer-content h3{
	color: #fff;
	margin-bottom: 1.5rem;
	font-size: 20px;
	margin: 5px 0px;
	}
.footer-content li{
	margin-bottom: 12px;
	}
.footer-content li a{
	display: block;
	color: #d6d6d6;
	font-size: 16px;
	font-weight: 400;
	transition: all 0.3s ease-in-out;
	}
.footer-content li a:hover{
	transform: translateY(-3px) translateX(-5px);
	color: #fff;
	font-weight: bold;
	}
.footer p{
	text-align: center;
	color: #fff;
	width:100%;	
}

.copyright {
	position: absolute;
	bottom: 0PX;
	margin: -60px 0;
	padding: 6px;
	width: 100%;
	background: #1a242f;
		box-shadow: inset 0px 1px 0px #c5c5c6;
	}
.copyright p{
	text-align: center;
	color: #fff;
	}
.copyright a{
	color: #fff;
	transition: all 0.3s ease-in-out;
	}
.copyright a:hover{
	font-weight: bold;
	letter-spacing: 3px;
	}
	
/*
.pied {
	position: absolute;
	display: grid;
	width: 100%;
	left: 0;
	right: 0;
	bottom : auto;

	}
.pied p{
	text-align: center;
	color: #fff;
	width:100%;
	}	

/*	
@media (max-width:1690px){
	footer{padding:50px 5% 40px;}
	}
*/
	
p {
margin-top: 5px;
margin-bottom: 25px;
text-align: justify;
line-height: 20px;
}

h1 {
color: #fff;
font-size: 26px;
font-weight: bold;	
padding: 5px;
margin-top: 2px;
}

h2 {
margin-top: 10px;
color: blue;
font-size: 18px;
font-weight: bold;
}