/*--------------------------------------------------------------------------------------------
LE JEU DE CLASSES GENERALES QUE L'ON UTILISE TOUT LE TEMPS POUR DEMARRER NOTRE MISE EN PAGE
--------------------------------------------------------------------------------------------*/

:root {
	--vert: #7FC640;
}
:root {
	--bleu_clair: #E7F1F4;
}
:root {
	/* --bleu_moyen: #3093B8; */
	--bleu_moyen: #37B6E8;
}
:root {
	--bleu_fonce: #1B6087;
}
:root {
	--gris_txt: #363636;
}
.color-bleu-clair{
	color: var(--bleu_clair);
}
.color-bleu-moyen{
	color: var(--bleu_moyen);
}
.wrap {
	max-width: 1190px;
	min-width: 320px;
	margin: 0 auto;
	padding: 0 25px;
}
.sousMenu i{
	font-size: 70%;
}
.sousMenuDetail{
	max-height: 0;
	overflow: hidden;
	transition: 500ms;
}
.sousMenu:hover .sousMenuDetail{
	max-height: 100px;
}
.sousMenuDetail a{
	font-size: 90% !important;
	padding-left: 15px;
}

.fc {
	display: flex;
}
.flex-column{
	flex-direction: column;
}
.grid{
	display: grid;
}
.fw {
	flex-wrap: wrap;
}

.jc-sb {
	justify-content: space-between;
}

.jc-sa {
	justify-content: space-around;
}

.jc-c {
	justify-content: center;
}

.jc-fe {
	justify-content: flex-end;
}

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

.thin {
	font-weight: 200;
}

.light {
	font-weight: 300;
}

.bold {
	font-weight: bold;
}

.black {
	font-weight: 800;
}

.regular {
	font-weight: 400;
}

.italic {
	font-style: italic;
	font-weight: 400;
}

strong {
	font-weight: inherit;
}

em {
	font-style: inherit;
}

li {
	list-style-type: none;
}

.inline {
	display: inline !important;
}

a {
	transition: 400ms;
	text-decoration: none;
	color: inherit;
}

a:hover {
	transform: translateY(5px);
	transition: 100ms !important;
}

body h1,
body h2 {
	line-height: 1.3;
}

.uppercase {
	text-transform: uppercase;
}

p {
	margin: 0;
}

.marg-top-40 {
	margin-top: 40px !important;
}
.marg-top-30 {
	margin-top: 30px !important;
}
.marg-top-20 {
	margin-top: 20px !important;
}
.marg-bot-70 {
	margin-bottom: 70px;
}
.marg-bot-60 {
	margin-bottom: 60px;
}
.marg-bot-50 {
	margin-bottom: 50px;
}
.marg-bot-40 {
	margin-bottom: 40px;
}
.marg-bot-30 {
	margin-bottom: 30px;
}
.marg-bot-20 {
	margin-bottom: 20px;
}
.marg-bot-10 {
	margin-bottom: 10px;
}
.marg-bot-5 {
	margin-bottom: 5px;
}
.marg-top-30{
	margin-top: 30px;
}
.pad-top-110 {
	padding-top: 110px;
}
.pad-top-80 {
	padding-top: 80px;
}
.pad-top-70 {
	padding-top: 70px;
}
.pad-top-60 {
	padding-top: 60px;
}
.pad-top-50 {
	padding-top: 50px;
}
.pad-top-30 {
	padding-top: 30px;
}
.pad-top-20 {
	padding-top: 20px;
}
.pad-top-10 {
	padding-top: 10px;
}
.pad-bot-10 {
	padding-bottom: 10px;
}

.feedback {
	font-weight: bold;
}
.alerte-rouge {
	border: #ff0600 solid 2px;
	color: #ff0600;
}
.alert-danger {
	color: #ff0600;
}
.alerte-verte {
	border: green solid 2px;
	color: green;
}
.alerte{
	background-color: rgba(255, 255, 255, 0.7); 
	border-radius: 9px;
	padding: 10px 20px;
	font-weight: bold;
	position: absolute;
	left: 50%;
	top: 70px;
	transform: translate(-50%);
	text-align: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	font-size: 110%;
	z-index: 15;
}

.white-color {
	color: #fff;
}

.blue-color {
	color: #0084B5;
}

.img-container img {
	width: 100%;
	display: block;
}
button{
	cursor: pointer;
	font-family: "Montserrat" !important;
}
.btn {
	border-radius: 70px;
	text-align: center;
	padding: 9px 18px;
	transition: 400ms;
	margin-top: 5px;
	margin-bottom: 5px;
	border: none;
}
.btn:hover{
	transform: translateY(4px);
	transition: 200ms;
}
button{
	cursor: pointer;
	font-family: "Montserrat" !important;
	padding: 12px 18px !important;
	font-size: 19px;
}
/* .fc .btn{
	padding: 7px 15px;
} */
.white-btn {
	background-color: #fff;
	color: #0d85a8;
}

.border-white-btn {
	border: 2px solid #fff;
	color: #fff;
}

.green-btn {
	background-color: var(--vert);
	color: #fff;
}
.orange-btn {
	background-color: #E87937;
	color: #fff;
}

.blue-btn {
	background-color: var(--bleu_moyen);
	color: #fff;
}
.blue-fonce-btn {
	background-color: var(--bleu_fonce);
	color: #fff !important;
}

.font-75 {
	font-size: 75%;
}
.font-90 {
	font-size: 90%;
}
.font-110 {
	font-size: 110%;
}

.font-130 {
	font-size: 130%;
}

.font-150 {
	font-size: 150%;
}
.font-164 {
	font-size: 164%;
}

.font-170 {
	font-size: 170%;
}
.font-175 {
	font-size: 175%;
}

.font-190 {
	font-size: 190%;
}
.font-200 {
	font-size: 200%;
}
.font-245 {
	font-size: 245%;
}

.font-275 {
	font-size: 275%;
}
@media(max-width:600px){
	.font-175 {
		font-size: 145%;
	}
}

.puce li:before {
	content: '';
	width: 7px;
	height: 7px;
	background-color: var(--bleu_moyen);
	display: inline-block;
	margin-right: 8px;
	border-radius: 10px;
	transform: translateY(-2px);
}


.select2 .select2-selection{
	border: none !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100% !important;
	position: absolute;
	top: 0px !important;
	right: 10px !important;
	width: 20px;
}
.titre-tiret-gauche::before {
	content: '';
	background: var(--bleu_moyen);
	width: 3px;
	height: 25px;
	border-radius: 5px;
	display: inline-block;
	margin-right: 7px;
	transform: translateY(3px);
}
.titre-tiret-centre:after {
    content: '';
    background: var(--bleu_moyen);
    width: 35px;
    height: 3px;
    border-radius: 5px;
    display: block;
    margin: 0px auto;
	transform: translateY(5px);
}

/* Formulaire */
.error{
	color: red;
	font-size: 85%;
}
.bloc-form-2-column .grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 20px;
}
.bloc-form-2-column .textArea{
    grid-column: span 2;
}
input[type=text], input[type=email], input[type=tel], input[type=date],  input[type=password], textarea{
    font-family: "Montserrat", sans-serif !important;
    color: var(--bleu_fonce);
}
input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=password], textarea::placeholder{
   color: #6D7A82;
   font-size: 15px; 
}
label{
	display: block;
	font-size: 93%;
}
input[type="checkbox"], input[type="radio"] {
	cursor: pointer;
}
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password]{
	border-radius: 50px;
	padding: 12px 17px;
	border: solid 1px var(--bleu_fonce);
	width: 100%;
	font-size: 15.5px;
}
.admin-form input[type=text], .admin-form input[type=email], .admin-form input[type=tel], .admin-form input[type=date], .admin-form input[type=password]{
	border: none;
	background-color: var(--bleu_clair);
}
.admin-form label{
	color: var(--bleu_fonce) !important;
}
/* input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="password"], textarea::placeholder {
	opacity: 1; 
} */
input[type="file"] {
	color: var(--bleu_fonce);
	padding: 8px 12px;
	border: 1px solid var(--bleu_fonce);
	border-radius: 7px;
	width: 100%;
}
  
input[type=file]::file-selector-button {
	margin-right: 8px;
	border: none;
	background: var(--bleu_fonce);
	padding: 8px 12px;
	color: #fff;
	cursor: pointer;
	border-radius: 30px;
  }
  
textarea{
	border-radius: 15px;
	border: solid 1px var(--bleu_fonce);
	padding: 15px;
	min-height: 200px;
	width: 100%;
}
.admin-form textarea{
	background-color: var(--bleu_clair);
	border: none;
}
 select, .select2{
	border-radius: 50px;
	border:none;
	background-color: #fff;
	padding: 10px 12px;
	width: 100% !important;
	color: var(--bleu_fonce);
} 
.multiple-select2 .select2{
	border-radius: 17px;
}
.select2-selection {
	/* min-height: 25px !important;
	max-height: 28px; */
	background-color: transparent !important;
}
.admin-form .select2{
	background-color: var(--bleu_clair);
}
.admin-form .select2-container--default .select2-selection--single {
	background-color: var(--bleu_clair) !important;
}
@media(max-width: 680px) {
	.grid .element{
		grid-column: span 2;
	}
}

/* Page de connexion */
.section-connect{
	height: 100vh;
	background-image: url(../images/vercors.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.connect-wrapper{
	width: 450px;
	margin: auto;
	background: linear-gradient(135deg, var(--bleu_moyen), var(--bleu_clair));
	border-radius: 15px;
	padding: 35px;
	color: var(--bleu_fonce);
	border: solid 3px var(--bleu_fonce);
}
.logo-connect{
	width: 180px;
	margin: 0px auto;
	display: block;
}
.section-connect h1{
	padding-top: 0 !important;
	margin-bottom: 5px;
}
.section-connect .btn {
	font-size: 16.6px;
	display: block;
	margin: 20px auto 15px;
	font-weight: bold;
}
.connect-wrapper a {
	margin: 0 auto;
	display: block;
	text-align: center;
	width: 100%;
}
.fermer{
	cursor:pointer;
}
@media(max-width: 490px) {
	.connect-wrapper{
		width: 90%;
	}
}

/* Page Admin Back Office */
.logout{
	color: #E87937;
}
.faux-header{
	background-color: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
	height: 58px;
	position: fixed;
	width: 100%;
	z-index: 16;
}
.faux-header .logo {
	position: absolute;
	top: 1px;
	left: 20px;
	width: 54px;
}
.faux-header .logo img{
	width: 100%;
	display: block;
}

.navbar{
	height: 100vh;
	width: 320px;
	position: fixed;
	top: 0;
	left: 0;
}
.navbar nav{
	height: 100%;
	width: 100%;
	background-color: var(--bleu_clair);
}
.navbar .navigation {
	margin: auto;
}
.navbar .navigation a{
	font-size: 23.5px;
}
.navbar .navigation .btn {
	padding: 11px 20px 10px 18px;
	font-size: 16.6px !important;
}
.admin-container{
	padding: 70px 0 50px 0;
	margin-left: 320px;
}
.btn-navigation {
	position: fixed;
	right: 30px;
	top: 17px;
	z-index: 50;
	cursor: pointer;
	width: 30px;
	height: 28px;
	display: none;
}
.btn-navigation .barre {
	width: 30px;
	height: 3px;
	background-color: var(--bleu_fonce);
	border-radius: 25px;
	margin-top: 4px;
	transition: 400ms;
}
.btn-navigation .barre.cross{
	transform: rotate(45deg);
	margin: 0;
	position: absolute;
	right: 0;
	top: 10px;
	transition: 500ms;
}
.btn-navigation .b1.cross1{
	transform: rotate(-45deg);
}
.b2stop{
	display: none;
}
.barreAdmin{
	background-color: black;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
}
.barreAdmin a{
	color: #fff;
	font-size:87%;
	margin: 0 0 0 auto;
	display: block;
	width: 235px;
	text-align: center;
	padding: 4px 0;
}
.barreAdmin a:hover{
	background-color: #E87937;
	transform: inherit !important;
}
.opacity{
    opacity: 0.5;
}


@media(max-width:990px){
	.admin-container{
		margin: 0;
	}
	.navbar{
		transform: translateX(-321px);
		transition: 500ms;
	}
	.btn-navigation{
		display: block;
	}
}
.navbar.isopen{
	transform: translateX(0);
	
}

/* -----------------
PAGINATION
-------------------- */
.pagination{
	display: flex;
	padding-top: 40px;
}

.pagination .page-item {
	border: solid var(--bleu_moyen) 2px;
	color: var(--bleu_moyen);
	border-radius: 25px;
	width: 37px;
	height: 37px;
	display: flex;
	position: relative;
	margin: 4px;
}
.pagination .page-item:first-child, .pagination .page-item:last-child {
	width: 110px !important;
}
.pagination .page-item .page-link {
	margin: auto;
}
.pagination .active{
	background-color: var(--bleu_moyen) !important;
	color: #fff !important;
}

/* -----------------------
Cookies Tarte au citron
------------------------ */
div#tarteaucitronAlertBig::before {
	display: none !important;
}

/*RESPONSIVE*/
@media(max-width: 700px) {
	.h2-principal {
		font-size: 220%;
	}
}

@media(max-width: 500px) {
	.wrap {
		padding: 0 17px;
	}
}

@media(max-width: 390px) {
	.h2-principal {
		font-size: 195%;
	}
}