#zoneOffre {
	display: flex;
	flex-direction:row;
	gap: 25px;
	margin: 50px 0;
	flex-wrap: wrap;
}

#zoneOffre .card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--platform);
	border-radius: 5px;
	padding: 25px;
	width: calc((100% / 2) - 13px);
	position: relative;
}

#zoneOffre .card .titre, 
.popup .titre {
	color: var(--dark);
	font-weight: 800;
	font-size: 24px;
	margin-bottom: 5px;
}

#zoneOffre .card .labels ,
.popup .labels {
	display: flex;
	gap: 5px;
}

#zoneOffre .card .labels .label,
.popup .labels .label{
	display: flex;
	gap: 5px;
	background: #DAEEEB;
	padding: 10px 15px;
	border-radius: 100px;
	align-items: center;
	color: var(--primary);
}

#zoneOffre .card .labels .label i,
.popup .labels .label i{
	font-size: 16px;
}

#zoneOffre .card .buttons ,
.popup .buttons {
	width: 100%;
	display:flex;
	justify-content:end;
	gap: 10px;
}
#pnlBtnAdd {
	display: flex;
	width: 100%;
	justify-content: end;
}
#zoneOffre .editOffreBtn {
	all:unset;
	position:absolute;
	right: 25px;
	top: 20px;
	cursor: pointer;
	color: var(--primary);
}
.d-none {
	display:none!important;
}
.popup {
	position: fixed;
	left: 0;
	top: 0;	
	isolation:isolate;
	z-index: 1000;
	width: 100vw;
	height: 100vw;
}
.popup .content {
	position: absolute;
	left: 50%;
	top: 20px;
	transform: translateX(-50%);
	width: min(800px , calc(100% - 40px));
	background: #fff;
	padding: 30px;
	border-radius: var(--radius);
	max-height: calc(100dvh - 40px);
	overflow: auto;
}
.popup .content .buttons::after {
	content: "";
	width: 100%;
	height: 100px;
	background: linear-gradient(to top, #fff, transparent);
	position:absolute;
	bottom: -30px;
	left: 0;
	z-index: -1;
}
.popup::after {
	content: "";
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	background: #333333a1;
	width: 100vw;
	height: 100dvh;
}
.popup .buttons {
	position: sticky;
	right: 20px;
	bottom: 0px;
	z-index: 1;
}
.popup .titre {
	margin-bottom: 15px;
	font-size: 28px;
}
.popup .contenu {
	font-size: 16px;
	margin: 20px 0;
}
.popup .contenu h2 {
	font-size: 1.5em;
	font-weight: 600;
}
.popup .contenu h3 {
	font-size: 1.375em;
	font-weight: 600;
}
.popup .contenu h4 {
	font-size: 1.25em;
	font-weight: 600;
}
.popup .contenu p,
.popup .contenu ul,
.popup .contenu li {
 font-size: 1em;
}
.popup i.fa-close {
	position:absolute;
	right:20px;
	top: 20px;
	font-size: 18px;
	cursor:pointer;
}
.loader {
transform: rotateZ(45deg);
perspective: 1000px;
border-radius: 50%;
width: 48px;
height: 48px;
color: var(--dark);
display:block;
margin: auto;
}
.loader:before,
.loader:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  transform: rotateX(70deg);
  animation: 1s spin linear infinite;
}
.loader:after {
  color: var(--primary);
  transform: rotateY(70deg);
  animation-delay: .4s;
}
.hotbar {
	display: flex;
	align-items: center;
	padding-right: 20px;
	gap: 10px;
	margin-bottom: 20px;
}

.checkbox-wrapper-64 input[type="checkbox"] {
	visibility: hidden;
	display: none;
}
.checkbox-wrapper-64 {
	height: 32px;
}
.checkbox-wrapper-64 *,
.checkbox-wrapper-64 ::after,
.checkbox-wrapper-64 ::before {
	box-sizing: border-box;
}
fieldset label {
	position: absolute;
	left: 15px;
	font-size: 16px;
	transition: all 0.3s ease;
	pointer-events: none;
	font-weight: 600;
	top: -15px;
	font-size: 14px;
	color: #333;
}
fieldset {
	position: relative;
}
fieldset input,
fieldset textarea {
	font-size: 16px;
	width: 100%;
	border: none;
	border-bottom: 2px solid #ccc;
	padding: 10px 15px;
	outline: none;
	background: #fff;
	resize: none;
	box-shadow: rgba(149, 157, 165, 0.1) 0px 8px 24px;
}

fieldset .underline {
	position: absolute;
	bottom: 0px;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: var(--primary);
	transform: scaleX(0);
	transition: all 0.3s ease;
	z-index: 10;
}

fieldset input:focus ~ .underline,
fieldset input:valid ~ .underline,
fieldset textarea:focus ~ .underline,
fieldset textarea:valid ~ .underline {
	transform: scaleX(1);
}

fieldset textarea ~ .underline {
	bottom: 2px;
}


/* The switch - the box around the slider */
.checkbox-wrapper-64 .switch {
	font-size: 17px;
	position: relative;
	display: inline-block;
	width: 3.5em;
	height: 1.83em;
}

/* Hide default HTML checkbox */
.checkbox-wrapper-64 .switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.checkbox-wrapper-64 .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	border: 1px solid #adb5bd;
	transition: .4s;
	border-radius: 30px;
}

.checkbox-wrapper-64 .slider:before {
	position: absolute;
	content: "";
	height: 1.2em;
	width: 1.2em;
	border-radius: 20px;
	left: 0.27em;
	bottom: 0.25em;
	background-color: #adb5bd;
	transition: .4s;
}

.checkbox-wrapper-64 input:checked + .slider {
	background-color: var(--primary);
	border: 1px solid var(--primary);
}

.checkbox-wrapper-64 input:focus + .slider {
	box-shadow: 0 0 1px var(--primary);
}

.checkbox-wrapper-64 input:checked + .slider:before {
	transform: translateX(1.4em);
	background-color: #fff;
}
@keyframes rotate {
	0% {
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

@keyframes rotateccw {
0% {
  transform: translate(-50%, -50%) rotate(0deg);
}
100% {
  transform: translate(-50%, -50%) rotate(-360deg);
}
}

@keyframes spin {
0%,
100% {
  box-shadow: .2em 0px 0 0px currentcolor;
}
12% {
  box-shadow: .2em .2em 0 0 currentcolor;
}
25% {
  box-shadow: 0 .2em 0 0px currentcolor;
}
37% {
  box-shadow: -.2em .2em 0 0 currentcolor;
}
50% {
  box-shadow: -.2em 0 0 0 currentcolor;
}
62% {
  box-shadow: -.2em -.2em 0 0 currentcolor;
}
75% {
  box-shadow: 0px -.2em 0 0 currentcolor;
}
87% {
  box-shadow: .2em -.2em 0 0 currentcolor;
}
}

@media (max-width: 1200px) {
	#zoneOffre .card .titre, .popup .titre {
		font-size: 20px;
	}
}

@media (max-width:992px) {
	#zoneOffre .card .titre, .popup .titre {
		font-size: 22px;
		line-height: 1.3em;
		margin-bottom: 0px;
	}
	.popup .titre {
		margin-bottom: 10px;
		padding-right: 15px;
	}
}

@media (max-width: 768px) {
	#zoneOffre .card .labels .label, .popup .labels .label{
		font-size: 12px;
		padding: 7px 9px;
	}
	#zoneOffre .card .labels .label i, .popup .labels .label i{
		font-size: 12px;
	}
	#zoneOffre {
		gap: 10px;
	}
	#zoneOffre .card {
	padding: 15px;
	width: calc((100% / 2) - 5px);
	}
	#zoneOffre .card .labels, .popup .labels {
		flex-wrap: wrap;
	}
	#zoneOffre .card .buttons button {
	width: 50%;
	}
	.popup .contenu {
		font-size: 14px;
	}
	.popup .content {
		padding: 20px;
	}

}
@media (max-width: 576px) {
	.hotbar {
		gap: 15px;
		align-items: start;
		flex-wrap: wrap;
		padding: 0;
	}
	.hotbar .checkbox-wrapper-64 {
		width : 100%;
	}
	.hotbar fieldset {
		width: calc(50% - 7.5px);
	}
	#zoneOffre .card {
		width: 100%;
	}
}