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

:root {
	--or: #E5BC75;
	--bordeau-clair: #343726;
	--bordeau-tres-clair: #add882;
	--bordeau: #537714;
}

h1 {
	font-size: 30px;
}

p {
	margin: 0;
}

.color-or {
	color: var(--or);
}

.color-bordeau {
	color: var(--bordeau);
}

.color-bordeau-clair {
	color: var(--bordeau-clair);
}

.calligraffitti {
	font-family: "Calligraffitti", cursive;
	font-weight: 400;
	font-style: normal;
}

.wrap {
	width: 1140px;
	margin: 0 auto;
	padding: 20px;
}

.float-right {
	float: right;
}

.bordure {
	border: var(--or) solid 2px;
	border-radius: 14px;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
}

.bloc {

	border-radius: 14px;
	background-color: var(--bordeau);
	margin-bottom: 10px;
	padding: 10px;
}

.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 !important;
}

.flex-column {
	flex-direction: column;
}

.flexEnd {
	justify-content: flex-end;
}

.grid {
	display: grid !important;
}

.grid-container {
	grid-template-columns: repeat(24, 1fr);
	gap: 10px;
}

.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;
}

.italic {
	font-style: italic;
}

.black {
	font-weight: 800;
}

.regular {
	font-weight: 400;
}

.italic {
	font-style: italic;
}

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;
}

.marg-top-40 {
	margin-top: 40px !important;
}

.marg-top-30 {
	margin-top: 30px !important;
}

.marg-top-20 {
	margin-top: 20px !important;
}

.marg-top-10 {
	margin-top: 10px !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 !important;
}

.marg-bot-30 {
	margin-bottom: 30px !important;
}

.marg-bot-20 {
	margin-bottom: 20px !important;
}

.marg-bot-15 {
	margin-bottom: 15px;
}

.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: "bilo" !important;
}

.btn {
	border-radius: 70px;
	text-align: center;
	padding: 7px 15px;
	transition: 400ms;
	margin-top: 5px;
	margin-bottom: 5px;
	border: none;
}

.btn:hover {
	transform: translateY(4px);
	transition: 200ms;
}

.rounded-btn {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	position: relative;
	display: flex !important;
}

.rounded-btn i {
	margin: auto;
}

button {
	cursor: pointer;
	font-family: "bilo" !important;
	padding: 12px 18px !important;
	font-size: 19px;
}

/* .fc .btn{
	padding: 7px 15px;
} */
.white-btn {
	background-color: #fff;
	color: var(--bordeau);
}

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

.or-btn {
	background-color: var(--or);
	color: #fff;
}

.bordeau-btn {
	background-color: var(--bordeau);
	color: #fff;
}

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

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

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

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

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

.font-140 {
	font-size: 140%;
}
.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-220 {
	font-size: 220%;
}


.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(--or);
	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(--or);
	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;
}

.span1 {
	grid-column: 1 span;
}

.span2 {
	grid-column: 2 span;
}

.span3 {
	grid-column: 3 span;
}

.span4 {
	grid-column: 4 span;
}

.span5 {
	grid-column: 5 span;
}

.span6 {
	grid-column: 6 span;
}

.span7 {
	grid-column: 7 span;
}

.span8 {
	grid-column: 8 span;
}

.span9 {
	grid-column: 9 span;
}

.span10 {
	grid-column: 10 span;
}

.span11 {
	grid-column: 11 span;
}

.span12 {
	grid-column: 12 span;
}

.span13 {
	grid-column: 13 span;
}

.span14 {
	grid-column: 14 span;
}

.span15 {
	grid-column: 15 span;
}

.span16 {
	grid-column: 16 span;
}

.span17 {
	grid-column: 17 span;
}

.span18 {
	grid-column: 18 span;
}

.span19 {
	grid-column: 19 span;
}

.span20 {
	grid-column: 20 span;
}

@media(max-width: 1116px) {
	.admin_forums .span14 {
		grid-column: 9 span;
	}

	.admin_forums .span4 {
		grid-column: 6 span;
	}

	.admin_forums .span2 {
		grid-column: 3 span;
	}
}

@media(max-width: 622px) {
	.admin_forums .span14 {
		grid-column: 20 span;
	}

	.admin_forums .span4 {
		grid-column: 12 span;
	}

	.admin_forums .span2 {
		grid-column: 4 span;
	}
}

@media(max-width: 450px) {
	.admin_forums .span14 {
		grid-column: 18 span;
	}

	.admin_forums .span2 {
		grid-column: 6 span;
	}
}

.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: "bilo", sans-serif !important;
	color: #2b2b2b;
}

input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=password],
textarea::placeholder {
	color: #6D7A82;
	font-size: 16px;
}

label {
	display: block;
	font-size: 93%;
	margin-bottom: 5px;
	padding-top: 15px;
}

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;
	width: 100%;
	font-size: 18px;

}

.section-connect input[type=text],
.section-connect input[type=password],
.section-connect input[type=email] {
	border: none;
}

.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],
.admin-form textarea,
.admin-form select {
	border: none;
	background-color: #F2F2F2;
}

.choiceType label {
	display: inline !important;
	margin: 0 25px 0 3px;
}

/* input[type="text"]::placeholder, input[type="email"]::placeholder, input[type="tel"]::placeholder, input[type="password"], textarea::placeholder {
	opacity: 1; 
} */
input[type="file"] {
	padding: 8px 12px;
	border: 1px solid var(--or);
	border-radius: 7px;
	width: 100%;
}

input[type=file]::file-selector-button {
	margin-right: 8px;
	border: none;
	background: var(--bordeau);
	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%;
}

select,
.select2 {
	border-radius: 50px;
	border: none;
	background-color: #fff;
	padding: 10px 12px;
	width: 100% !important;
	color: var(--bleu_fonce);
}

input[type=datetime-local] {
	border: solid 2px var(--bordeau);
	border-radius: 10px;
	padding: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 100%;
}

.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/parkettkaiser-skaben-fototapete-palmen-regenwald-gruen-gelb-597811_r.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	color: var(--or);
}

.connect-wrapper {
	width: 500px;
	margin: auto;
	background: rgba(0, 0, 0, 0.7);
	border-radius: 20px;
	padding: 35px;
	border: solid 2px var(--or);
}

.logo-connect {
	width: 100%;
	margin: 0px auto 25px auto;
	display: block;
}
}

.section-connect h1 {
	padding-top: 0 !important;
	margin-bottom: 5px;
}

.section-connect .btn {
	font-size: 20px;
	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;
	padding: 15px;
}

.faux-header .logo {
	position: absolute;
	top: 3px;
	left: 20px;
	width: 66px;
}

.faux-header .logo img {
	width: 100%;
	display: block;
}

.navbar {
	height: 100vh;
	width: 220px;
	position: fixed;
	top: 0;
	left: 0;
}

.navbar nav {
	height: 100%;
	width: 100%;
	background-color: var(--bordeau-tres-clair);
}

.navbar .navigation {
	margin: auto auto auto 18px;
}

.navbar .navigation a {
	font-size: 23px;
	color: #255100;
}

.navbar .navigation .btn {
	padding: 11px 20px 10px 18px;
	font-size: 20px !important;
}

.admin-container {
	padding: 70px 0 50px 0;
	margin-left: 220px;
}

.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(--bordeau);
	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;
	z-index: 10;
}

.adminAcces {
	width: 235px;
}

.logoutAccess {
	width: 70px;
}

.barreAdmin a {
	color: #fff;
	font-size: 87%;
	/* margin: 0 0 0 auto; */
	display: block;

	text-align: center;
	padding: 4px 0;
}

.barreAdmin a:hover {
	background-color: #E87937;
	transform: inherit !important;
}


@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: 1170px) {
	.wrap {
		width: 93%;
	}
}

@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%;
	}
}

/* ------------------
PAGE ERREUR
------------------ */
.errorSection {
	height: 100vh;
}

.errorSection .bloc-error {
	padding: 40px;
	border-radius: 14px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.3);
	border: solid var(--or) 2px;
}

.errorSection h1 {
	font-size: 60px;
}

@media(max-width: 490px) {
	.errorSection h1 {
		font-size: 50px;
	}
}