body {background-color: #def6f3;z-index: 99999; }
a {text-decoration: none;}
a:hover,a:focus {text-decoration: none;}
.card {text-align: center;z-index: 99999; align-items: center;justify-content: center;background-color: #def6f3;padding: 5px;padding-top: 32px;}
.card-body {width: 98%;background-color: white;border-radius: 10px;padding: 5px;text-align: center;margin: 0 auto;z-index: 99999; align-items: center;justify-content: center;marging-top: 6px;box-shadow: 0 10px 25px rgba(0,0,0,.25);}


.form-outline{
  position:relative;
  margin-bottom:18px;
}

/* champs */
.form-outline .form-control,
.form-outline select,
.form-outline textarea{
  width:100%;
  padding:18px 10px 10px 10px;
  font-size:16px;
  border-radius:6px;
  border:1px solid #000;
  background:#fff;
  box-sizing:border-box;
}

/* focus */
.form-outline .form-control:focus,
.form-outline select:focus,
.form-outline textarea:focus{
  border:2px solid #0d6efd;
  outline:none;
}

/* label */
.form-outline label{
  position:absolute;
  top:50%;
  left:10px;
  transform:translateY(-50%);
  color:#777;
  font-size:14px;
  background:#fff;
  padding:0 4px;
  pointer-events:none;
  transition:.2s ease;
}

/* label flottant */
.form-outline:focus-within label,
.form-outline input:not(:placeholder-shown) + label,
.form-outline textarea:not(:placeholder-shown) + label,
.form-outline select:valid + label{
  top:-8px;
  font-size:12px;
  color:#0d6efd;
  font-weight:bold;
}

/* autofill navigateur */
.form-outline input:-webkit-autofill + label{
  top:-8px;
  font-size:12px;
  color:#0d6efd;
}

/* select */
.form-outline select{
  appearance:none;
  padding-right:30px;
}

/* flèche select */
.form-outline::after{
  content:"▼";
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  color:#777;
  pointer-events:none;
}

 
 #message {
  margin-bottom:15px;
 }
 #connexion {
padding: 8px;
font-size: 15px;
border-radius: 5px;
background-color: blue;
border-color: blue;
color: white;
width: 100%;
position: relative;
 }


@media (max-width: 992px) {
  .card-body {
    width: 90%;
}

}


#dropzone{
  border:2px dashed black;
  padding:30px;
  text-align:center;
  cursor:pointer;
  margin-bottom:20px;
}
#preview{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cardh{
  position:relative;
  width:140px;
  cursor:grab;
}
.cardh.dragging{opacity:0.5;}
.cardh img{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:8px;
  transition: filter 0.3s;
}
.cardh img.blur{filter: blur(10px);}
.progress{
  height:6px;
  background:#eee;
  margin-top:5px;
}
.bar{
  height:6px;
  width:0%;
  background:#4caf50;
}
.remove{
  position:absolute;
  top:4px;
  right:4px;
  background:red;
  color:#fff;
  border:none;
  cursor:pointer;
}