@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');


:root {
	--col-cp5-bleu			: #3AC8E1;
	--col-cp5-bleu-fonce	: #41446C;
	
	--col-cp5-jaune			: #F4D721;
	--col-cp5-gris			: #E6E6E6;
	--col-cp5-gris-plus		: #8D8D8D;
	--col-cp5-gris-fonce	: #535353;
}




body {
	font-family: 'Lato', sans-serif;
	background : url('../imgs/PLONGEUR.jpg') no-repeat center center transparent;
	background-size : cover;
	
	min-height : 100vh;
}




/*
	Header
*/

.header {
	background : white;
	margin-top : 50px;
	margin-bottom : 50px;
	border-top : 3px solid var(--col-cp5-bleu);
	border-bottom : 3px solid var(--col-cp5-bleu);
}
	.header .brand {
		display : flex;
		justify-content : center;
		align-items : center;
		height : 60px;
	}
	.header .brand .logo {
		height : 125px;
		max-width : 100%;
	}

@media (max-width: 768px) {
	.header {
		background : white;
		margin-top : 12px;
		margin-bottom : 10px;
		border-top : 2px solid var(--col-cp5-bleu);
		border-bottom : 2px solid var(--col-cp5-bleu);
	}
		.header .brand {
			display : flex;
			justify-content : center;
			align-items : center;
			height : 25px;
		}
		.header .brand .logo {
			height : 50px;
			max-width : 100%;
		}
}




/*
titre
*/

.title-bloc {
	text-align : center;
	margin-bottom : 48px;
}
	.title-bloc h1, 
	.title-bloc h2 {
		color : white;
		text-transform : uppercase;
		font-size : 50px;
		font-weight : 600;
		text-shadow : 0px 0px 40px #000000;
		
		
	}
	.title-bloc h2 {
		font-size : 40px;
	}


@media (max-width: 991px) {
	
	.title-bloc {
		margin-bottom : 30px;
	}
		.title-bloc h1 {
			font-size : 40px;
		}
		.title-bloc h2 {
			font-size : 30px;
		}
	
	
}
@media (max-width: 768px) {
	
	.title-bloc {
		margin-bottom : 10px;
	}
		.title-bloc h1 {
			font-size : 22px;
		}
		.title-bloc h2 {
			font-size : 16px;
		}
}




/*
Recherche nom
*/
#search-box {
	position : absolute;
	z-index : 10000;
	/* width : 100%; */
}
#search-box ul.searchres {
	margin : 0;
	padding : 0;
	
	margin-top : 5px;
	list-style : none;
	
	
	border : 1px solid #999;
	border : 2px solid var(--col-cp5-bleu-fonce);
	border-radius : 5px;
	background : #fff;
	
	position : relative;
	top : 0;
	left : 0;
	/* right : 20px; */
}

#search-box ul.searchres li {
	
	padding : 5px 10px;
	padding : 8px 15px;
	color : #808080;
	color : var(--col-cp5-bleu-fonce);
}
#search-box ul.searchres li + li {
	
	border-top : 1px solid #cdcdcd;
}

#search-box ul.searchres li:hover {
	
	cursor : pointer;
	
	background : rgba(190, 190, 190, .3);
}

/*
	bouton bleu 
*/
.btn-cp5-bleu {
	display : inline-block;
	position : relative;
	color : white;
	text-transform : uppercase;
	font-size : 15px;
	line-height : 24px;
	font-weight : 900;
	padding : 0 15px 0 40px;
	z-index: 1;
	background : transparent;
	border : 0;
	text-decoration : none;
}
	.btn-cp5-bleu:before {
			content : '';
			position : absolute;
			top : 0;
			right : 0;
			bottom : 0;
			left : 20px;
			background : var(--col-cp5-bleu-fonce);
			-webkit-transform-origin: 100% 0;
			-ms-transform-origin: 100% 0;
			transform-origin: 100% 0;
			-webkit-transform: skew(-25deg);
			-ms-transform: skew(-25deg);
			transform: skew(-25deg);
			z-index: -1;
	}

	.btn-cp5-bleu:after {
		/* color : var(--col-cp5-jaune); */
		
			content : '';
			position : absolute;
			top : calc(50% - 4px);
			left : 0;
			width : 25px;
			height : 8px;
			background : var(--col-cp5-bleu);
			-webkit-transform-origin: 0 100%;
			-ms-transform-origin: 0 100%;
			transform-origin: 0 100%;
			-webkit-transform: skew(-25deg);
			-ms-transform: skew(-25deg);
			transform: skew(-25deg);
			z-index: 1;
	}

	.btn-cp5-bleu:hover {
		color : var(--col-cp5-jaune);
		
	}
	.btn-cp5-bleu:hover:before {
		
		
		background : #54588c;
		
		
	}


/*
	bouton jaune 
*/
.btn-cp5-jaune {
	display : inline-block;
	position : relative;
	color : var(--col-cp5-bleu-fonce);
	text-transform : uppercase;
	font-size : 15px;
	line-height : 24px;
	font-weight : 900;
	padding : 0 15px 0 40px;
	z-index: 1;
	background : transparent;
	border : 0;
	text-decoration : none;
}
	.btn-cp5-jaune:before {
			content : '';
			position : absolute;
			top : 0;
			right : 0;
			bottom : 0;
			left : 20px;
			background : var(--col-cp5-jaune);
			-webkit-transform-origin: 100% 0;
			-ms-transform-origin: 100% 0;
			transform-origin: 100% 0;
			-webkit-transform: skew(-25deg);
			-ms-transform: skew(-25deg);
			transform: skew(-25deg);
			z-index: -1;
	}
	.btn-cp5-jaune:after {
			content : '';
			position : absolute;
			top : calc(50% - 4px);
			left : 0;
			width : 25px;
			height : 8px;
			background : var(--col-cp5-bleu);
			-webkit-transform-origin: 0 100%;
			-ms-transform-origin: 0 100%;
			transform-origin: 0 100%;
			-webkit-transform: skew(-25deg);
			-ms-transform: skew(-25deg);
			transform: skew(-25deg);
			z-index: 1;
	}
	.btn-cp5-jaune:hover {
		color : #54588c;
	}
	.btn-cp5-jaune:hover:before {
		background : #f8e46a;
	}






.table-result {
	
}

.table-result ul {
	
	padding : 0 0 0 15px;
	margin : 0;
	
}