#form-mode-public {
	background:url('../statics/banners/skyline_2_1024.jpg');
	background-size:100%;
	position:relative;
	min-height:400px;
	top:-40px;
	background-repeat:repeat;
	border-bottom:2px solid lightgrey;
	box-shadow:2px 2px 2px 2px lightgrey;
}

#form-mode-public:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	background:white;
	opacity:0.5;
	width:100%;
	height:100%;
}

#form_filtre_main {
	position:relative;
	top:60px;
	padding-left:20px;
}

#search-form {
	width:200%;
}

#search-btn {
		position:absolute;
		min-width:200px;
		width:20%;
		top:68px;
		right:20px;
		font-size:1.5rem;
		padding:0px;
		vertical-align:middle;
		display:flex;
		justify-content:center;
		justify-self:right;
		margin-right:15px;
		text-transform:uppercase;
	}

#search-btn:before {
	content:url('../statics/icons/search.svg');
	position:relative;
	left:-12px;
	transform:scale(1.4);
	filter: invert(100%) brightness(100%) contrast(100%);
}

#filters {
	position:relative;
	height:0px;
	padding-left:15px;
	padding-right:15px;
	margin:0px;
	overflow:hidden;
}

#filters.visible {
	min-height:12.5rem;
	height:auto;
	margin-top:90px;
	overflow:initial;
	padding-bottom:3px;
	padding-top:15px;
	z-index:1;
}

#filters.visible:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:white;
	opacity:0.8;	
	border-radius:5px;
}

#filters-icons {
	position:relative;
  overflow-x: auto;      /* active la barre de scroll horizontale */
  overflow-y: hidden;    /* évite un scroll vertical inutile */
  white-space: nowrap;   /* force les icônes à rester en ligne */
  padding-bottom:20px;
  scroll-behavior: smooth;
}

#filters-icons::-webkit-scrollbar {
  height: 8px;
}

#filters-icons::-webkit-scrollbar-track {
  background: transparent; /* ou une couleur très claire */
}

#filters-icons::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #FFFFFF, #1D1867, #FFFFFF);
  border-radius: 10px;
  transition: background 0.3s ease;
}

#filters-icons::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #FFFFFF, #1D1867, #FFFFFF);
}

    .icon-container {
      display: flex;
      gap: 1.5rem;
      overflow-x:hidden;
      padding-bottom:10px;
      scroll-behavior:smooth;
      padding-left:0.3rem;
    }
    .icon-criterion {
      font-size: 1rem;
      cursor: pointer;
      transition: transform 0.3s ease;
      color: #1D1867;
      border-radius: 2%;
      padding: 10px;
      background-color: #f8f9fa;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      min-width:9rem;
      margin-top:0.2rem;
    }
	div.icon-criterion:last-child {
		margin-right:20px;
	}
	.icon-criterion.icon-criterion-selected {
	  background:#f0f8ff;	
	}
    .icon-criterion i {
      font-size:2.5rem;
      display:flex;
      justify-content: center;
    }
    .icon-criterion:hover {
      transform: scale(1.05);
      background-color: #f0f8ff;
    }
    .icon-criterion span {
      display:flex;
      justify-content: center;
      text-align:center;
      margin-top:5px;
    }



    div.div-btn-extra-collapse {
      display:flex;
      justify-content:center;
      margin-bottom:-30px;
    }
    div.div-btn-right-scroll {
      display:flex;
    }
    button.btn-extra-collapse,button.btn-right-scroll {
      border-radius:20%;
      background-color: white;
      box-shadow: 0 4px 6px rgb(6 0 0 / 10%);
      transition:0.2s;
    }
    button.btn-extra-collapse:hover,button.btn-right-scroll:hover {
      background:white;
      scale:1.1;
    }
    .button.btn-extra-collapse:before,button.btn-right-scroll:before {
      filter: invert(50%) brightness(50%) contrast(30%);
    }

#criteria-container {
  margin-top:20px;
}

.criteria-box {
	position:relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f0f8ff;
      padding: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
    }
    .criteria-box .close {
		font-size:1.8rem;
      margin-left: 10px;
      cursor: pointer;
      color: #dc3545;
    }
    .criteria-box label,
    .criteria-box input[type!=checkbox],
    .criteria-box select,
	.criteria-box div,
    .criteria-box textarea {
      flex: 1; /* Cela permet à chaque élément de prendre la même largeur */
      min-width: 120px;
    }
    .criteria-box label {
      font-weight: bold;
      margin-bottom: 5px;
      min-width: 200px; /* Fixe la largeur des labels pour l'alignement */
    }
    .criteria-box select,
    .criteria-box input[type!=checkbox],
    .criteria-box textarea {
      border: none;
      outline: none;
      background-color: transparent;
      margin-bottom: 0;
    }
    .criteria-box .close {
      flex-shrink: 0; /* Assure que la croix ne rétrécisse pas */
    }