/*
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⢀⣠⣴⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣤⠀⠀
⠀⠀⠀⣶⠿⢿⡿⠿⠿⢿⡿⠿⣶⠀⠀⠀⠀⠀⠀⣀⣠⣤⣶⣾⣿⣿⣿⣿⠀⠀
⠀⠀⠀⡇⠀⢸⡇⠀⠀⢸⡇⠀⣿⠀⣀⣤⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀
⠀⠀⠀⣧⣀⣸⣇⣀⣀⣸⣇⣀⣿⠀⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀
⠀⠀⠀⠛⠛⣛⣛⣛⣛⣛⣛⠛⠛⠀⠀⠀⠀⠉⠉⠛⠛⠻⠿⢿⣿⣿⣿⣿⠀⠀
⠀⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠉⠛⠀⠀
⠀⠀⠀⠀⣿⠛⣿⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢰⣿⡀⣿⣿⣿⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⣿⣿⣿⣿⣿⣿⣿⠉⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣠⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⡶⠟⠛⣧⣄⣀⡴⠛⠻⣦⣀⣴⠟⠀⠀
⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠀⠀⠀⠀⠉⠉⠀⠀⠀⠀⠉⠉⠀⠀⠀
(¯`·._.··¸.-~*´¨¯¨`*·~-.,-( farofaro.com )-,.-~*´¨¯¨`*·~-.¸··._.·´¯)

Projet : Roc Azur
Release : 2023-05-17


*/
:root {
	--accent: #FFFF00;
	--accent-reverse: #F5F500;
	--fond: #F1F1F1;
	--texte: #000000;
	--texte-footer: #808080;
}
.navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") ;
}
body{
	color:var(--texte);
}


@media only screen and (min-width: 1080px)  {
	.container{
		max-width:1080px;
	}
}

#top {
	margin-top: -10px;
}
header{
	box-shadow: 0px 0px 10px #00000012;
	padding-bottom:  1rem !important;
}
.logo{
	max-height:100px;
}

.ct-logo {
	margin-top: 15px !important;
}
.ct-logo img {
	position: absolute;
}
.deco-top {
	position:relative;
}
.deco-top:after{
	content:" ";
	position: absolute;
	top: -10px;
	left: -10px;
	z-index: -1;
	background: var(--accent);
	transform: skewX(-8deg);
	width: 2em;
	height: 94px;
}
.bg-light{
	background-color:#fff !important;
}
.nom{
	text-align: left;
	font: normal normal 600 40px/50px Outfit;
	letter-spacing: 0px;
	margin-left: 120px;
}
.date{
	font: normal normal 600 18px/23px Outfit;
	letter-spacing: 0px;
	color: #000000;
	position:relative;
	padding-left:24px;
	margin-left: 120px;
}
.date:before{
	content:' ';
	background:url('../medias/ico/calendrier.svg');
	background-repeat:no-repeat;
	position:absolute;
	top:-1px;
	left:0;
	width:20px;
	height:22px;
	background-size:contain;
}
.langues{
    border: 2px solid var(--fond);
    border-radius: 5px;
    max-width: 92px;
    max-height: 36px;
	padding-top:1px;
}
.langues .nav-link{
	margin:0px !important;
	padding-top:0px ;
}
.langues .flag{
	margin-bottom: 4px;
}
.langues .dropdown-menu.show{
	min-width: 92px;
    width: 92px;
    max-width: 92px;
    border-top: 1px solid #fff;
    top: 60%;
    left: -2px;
}
.langues .dropdown-item {
	padding-left:8px;
	font: normal normal 600 20px/25px Outfit;
    letter-spacing: 0px;
    color: var(--texte);
}
.nav-link{
	font: normal normal 600 20px/25px Outfit;
	letter-spacing: 0px;
	color:var(--texte);
	text-transform: uppercase;
	padding-right: 50px !important;
}
.dropdown-menu{
	border: 2px solid var(--fond);
	border-radius: 5px;
}
.bg-image{
	position:relative;
	background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../medias/img/banniere.png);
    height: 55vh;
    background-position: left bottom;
    margin-top: 90px;
}
.bg-image:after{
	content:' ';
	position:absolute;
	width:160px;
	height:70px;
	background:url('../medias/img/logo-banniere.png');
	background-size:cover;
	bottom:20px;
}
.titre{
	margin-top:-40px;
	z-index:4;
	position:relative;
}
h1{
	font: normal normal 600 40px/50px Outfit;
	letter-spacing: 0px;
	color: #000000;
	text-transform: uppercase;
	background:var(--accent);
	width:7.5em;
	position:relative;
	border-bottom: 10px solid #000;
}
h1:after {
	content: " ";
	position: absolute;
	top: 0;
	right: -10px;
	bottom: 0;
	z-index: -1;
	background: var(--accent);
	transform: skewX(-13deg);
	width: 1em;
	box-shadow:10px 10px 0px 0px #000;
}
h1:before {
	content:" ";
	position: absolute;
	top: 0;
	left: -10px;
	background:var(--accent);
	width: 10px;
	height: 100%;
}
p{
	font: normal normal normal 24px/30px Outfit;
	letter-spacing: 0px;
}
h2{
	font: normal normal 600 30px/38px Outfit;
	letter-spacing: 0px;
	text-transform: uppercase;
	position:relative;
	padding-bottom: 0.5em;
}
h2:after{
	content: " ";
	position: absolute;
	left: -8px;
	bottom: 0;
	z-index: -2;
	background: var(--accent);
	transform: skewX(-13deg);
	width: 3em;
	height: 0.3em;
}
h2:before{
	content: " ";
	position: absolute;
	left: -10px;
	bottom: -1px;
	z-index: -1;
	background: #fff;
	width: 10px;
	height: 0.35em;
}
.exposant{
	font-variant-position: super;
	font-size:12px;
}
.table thead{
	background:var(--accent);
}
.table thead th{
	text-align: right;
	font: normal normal 600 24px/30px Outfit;
	letter-spacing: 0px;
	color: #000000;
	padding:1em;
}
.table thead th.text-left{
	text-align: left;
}
.table tbody, .table tfoot{
	background:var(--fond);
}
.table tbody th{
	font: normal normal 600 20px/25px Outfit;
	letter-spacing: 0px;
	padding:1em;
}
.table tbody td{
	text-align: right;
	font: normal normal normal 20px/25px Outfit;
	letter-spacing: 0px;
	color: #000000;
	padding:1em;
}
.table tbody td.text-left{
	text-align:left;
}
.table tr{
	border-width:2px;
	border-color:#fff;
}
.table tfoot th{
	text-align: left;
	font: normal normal 600 24px/30px Outfit;
	padding:1em;
}
.table tfoot td{
	text-align: right;
	font: normal normal 600 24px/30px Outfit;
}
.btn-primary{
	background:var(--accent);
	text-align: center;
	font: normal normal 600 20px/25px Outfit;
	letter-spacing: 0px;
	color: #000000;
	border-radius:0px;
	border-color:var(--accent);
}
.btn-mr{
	margin-right:74px;
}
.btn-primary:hover{
	background:var(--accent-reverse);
	border-color:var(--accent-reverse);
	color: black;;
}
.btn-fixe{
	width:380px;
}
ul{
	text-align: left;
	font: normal normal normal 20px/25px Outfit;
	letter-spacing: 0px;
}
ul li{
	padding-bottom:10px;
}
a{
	color:#000;
}
a:hover{
	background-color: var(--accent);
	color:#000;
}
footer{
	background:var(--fond);
}
footer a{
	color: var(--texte-footer);
	font: normal normal normal 14px/14px Outfit;
	text-decoration:none;
}
footer p{
	text-align: center;
	font: normal normal normal 14px/14px Outfit;
	letter-spacing: 0px;
	color: var(--texte-footer);
	margin-top:10px;
}
.logo-footer{
	max-height:44px;
}
.fleche{
	background: var(--accent);
	max-width: 54px;
	float: right;
	margin-right: 0px;
	margin-left: auto;
	padding: 0;
	text-align:center;
	display:flex;
	position:relative;
}
.fleche a{
	margin-top: auto;
	margin-bottom: auto;
	margin-left: auto;
	margin-right: auto;
}
.fleche:after{
	content: " ";
	position: absolute;
	left: -15px;
	bottom: 0;
	z-index: 0;
	background: var(--accent);
	transform: skewX(-13deg);
	width: 2em;
	height: 100%;
}
hr{
    border-top: 2px solid;
    opacity: 1;
    color: var(--fond);
}
.petit{
	line-height:20px;
}
.hide-custom{
	display:block !important;
}
.show-custom{
	display:none !important;
}
@media only screen and (max-width: 1380px)  {
	header{
		padding:0px !important;
	}
	.ct-logo{
		width:100%;
	}

	.ct-logo img {
		position: relative;
	}
	.collapse:not(.show) {
		display: none !important;
	}
	.navbar-expand-lg .navbar-toggler {
		display: block;
	}
	.navbar-nav{
		flex-direction: column !important;
	}
	.hide-custom{ display:none !important; }
	.show-custom{ display:block !important; }
	.btn-mr{
		margin-right:0px;
	}
	.logo{
		max-height:50px;
		margin-left:40px;
	}

	.btn-fixe{
		width:100%;
		margin-bottom:10px;
	}
	button.navbar-toggler{
		position: fixed;
		right: 20px;
		top: 20px;
		border: none;
		background: var(--accent);
		border-radius: 0;
		padding-bottom: 8px;
		padding-top: 8px;
	}
	header.fixed-top{
		justify-content: flex-start !important;
	}
	header .flex-grow-1 {
		flex-grow: 0 !important;
	}
	.navbar{
		margin:auto;
		padding: 0;
	}
	.langues{
		margin:auto;
	}
	.nav-item{
		text-align:center;
	}
	.nav-link{
		padding-right: 0px !important;
		font: normal normal 600 18px/23px Outfit;
		text-align: center;
	}
	.navbar-toggler:focus{
		box-shadow:none;
	}
	.titre {
		margin-top: -25px;
	}
	h1{
		margin-left:10px;
	}
	.bg-image{
		margin-top:80px;
		height:27vh;
	}
	.ct-logo{
		margin-top: 8px;
		margin-bottom: 3px !important;
		padding-bottom: 6px;
	}
	.deco-top:after{
		height:86px;
	}
	h1{ font:normal normal 600 24px/30px Outfit; }
	h2 {font: normal normal 600 22px/28px Outfit;}
	footer{
		position:relative;
	}
	.fleche{
		position: absolute;
		right: 0;
		height: 100px;
		top: 0px;
	}
	p{
		font: normal normal normal 22px/24px Outfit;
	}
	.mentions{
		background:var(--accent);
	}
	.mentions a{ color:#000;}
	.table tbody td{
		font: normal normal 600 18px/23px Outfit;
		font-weight:500;
		white-space: nowrap;
	}
	.table thead th{
		font: normal normal 600 20px/25px Outfit;
	}
	.table tfoot th{
		font: normal normal 600 20px/25px Outfit;
	}
}