/* =========================
   SELECTIZEINPUT — style "pill gris"
   ========================= */

/* Le conteneur doit prendre toute la largeur */
.selectize-control {
  width: 100% !important;
  display: block !important;
}

.selectize-control,
.selectize-control *{
  text-shadow: none !important;
  text-rendering: geometricPrecision !important;
}

/* Champ au repos : gris, arrondi, pas de bordure visible */
.selectize-control .selectize-input {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;

  background: var(--background-light-grey) !important;
  border: 2px solid transparent !important;   /* invisible au repos */
  border-radius: 999px !important;

  padding: 10px 14px !important;
  min-height: 44px !important;

  box-shadow: none !important;                /* pas d’ombre */
  background-image: none !important;
}

/* Le champ de saisie interne */
.selectize-control .selectize-input input {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* Placeholder */
.selectize-control .selectize-input input::placeholder {
  color: var(--grey) !important;
  opacity: 1 !important;
}

/* Focus : bordure bleu primaire + fond blanc (comme ton exemple) */
.selectize-control.single .selectize-input.focus,
.selectize-control.multi .selectize-input.focus {
  border-color: var(--blue-primary) !important;
  background: var(--white) !important;
  box-shadow: none !important;
}

/* Multi : tags (chips sobres) */

/* MULTI : autorise les chips à passer à la ligne */
.selectize-control.multi .selectize-input {
  border-radius: 18px !important;
  flex-wrap: wrap !important;
  height: auto !important;
  white-space: normal !important;
  row-gap: 6px !important;          /* espace vertical entre lignes */
}

/* L'input interne doit pouvoir descendre sur une nouvelle ligne */
.selectize-control.multi .selectize-input input {
  flex: 1 1 140px !important;       /* prend la place restante, et passe à la ligne si besoin */
  min-width: 120px !important;
}

.selectize-control.multi .selectize-input > div {
  background: rgba(13, 35, 102, 0.08) !important;
  color: var(--blue-primary) !important;
  border: 0 !important;
  border-radius: 999px !important;

  padding: 4px 10px !important;
  margin: 2px 6px 2px 0 !important;
  font-weight: 500 !important;

  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Croix de suppression */
.selectize-control.multi .selectize-input > div .remove {
  border-left: 0 !important;
  margin-left: 8px !important;
  opacity: 0.6 !important;
}
.selectize-control.multi .selectize-input > div .remove:hover {
  opacity: 1 !important;
}

/* Dropdown : pas d’ombre, léger arrondi */
.selectize-dropdown {
  border-radius: 12px !important;
  border: 1px solid var(--light-grey) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: var(--blue-primary) !important;
}

.selectize-dropdown .option.active {
  background: rgba(2, 188, 255, 0.15) !important;
}
.selectize-dropdown .option.selected {
  background: rgba(13, 35, 102, 0.08) !important;
  color: var(--blue-primary) !important;
}

/* =========================
   SLIDERINPUT (ionRangeSlider)
   ========================= */

/* Espace au-dessus du slider */
.irs {
  margin-top: 8px !important;
}

/* Barre de fond (bleu très clair) */
.irs--shiny .irs-line,
.irs-line {
  height: 8px !important;
  border-radius: 999px !important;
  background: rgba(2, 188, 255, 0.22) !important; /* bleu clair */
  border: 0 !important;
}

/* Barre active (bleu bouton) */
.irs--shiny .irs-bar,
.irs-bar {
  height: 8px !important;
  border-radius: 999px !important;
  background: var(--blue) !important;
  border: 0 !important;
}

/* Poignée */
.irs--shiny .irs-handle,
.irs-handle {
  width: 22px !important;
  height: 22px !important;
  top: 18px !important;               /* ajuste verticalement */
  border-radius: 999px !important;

  background: var(--white) !important;
  border: 2px solid var(--blue-primary) !important;
  box-shadow: none !important;        /* pas d'ombre */
}

/* Les petites barres internes de la poignée : on les enlève */
.irs-handle > i,
.irs-handle i {
  display: none !important;
}

/* Bulles de valeurs (single / from-to) */
.irs--shiny .irs-single,
.irs--shiny .irs-from,
.irs--shiny .irs-to,
.irs-single,
.irs-from,
.irs-to {
  background: rgba(13, 35, 102, 0.10) !important;
  color: var(--blue-primary) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

/* Petite flèche sous la bulle : même teinte que la bulle */
.irs-single:before,
.irs-from:before,
.irs-to:before {
  border-top-color: rgba(13, 35, 102, 0.10) !important;
}

/* Min/Max */
.irs--shiny .irs-min,
.irs--shiny .irs-max,
.irs-min,
.irs-max {
  background: transparent !important;
  color: var(--grey) !important;
  font-weight: 500 !important;
}

/* Grid/ticks (si jamais tu l'actives plus tard) */
.irs-grid-text,
.irs-grid-pol {
  opacity: 0.35 !important;
}

/* Focus accessible sur le slider (quand on tab) */
.irs--shiny .irs-handle:focus,
.irs-handle:focus {
  outline: none !important;
}


/* =========================
   ACTIONBUTTON — bleu clair, pas d’ombre
   ========================= */

.btn,
.btn-default,
.btn.btn-default {
  border-radius: 999px !important;
  border: 0 !important;

  background: var(--blue-button) !important;
  color: var(--white) !important;

  font-weight: 800 !important;
  padding: 10px 18px !important;

  box-shadow: none !important;         /* <- aucune ombre */
  transition: background-color 0.15s ease !important;
}

.btn-default:hover,
.btn.btn-default:hover {
  background: var(--blue-primary) !important;
  box-shadow: none !important;
}

.btn-default:active,
.btn.btn-default:active,
.btn-default:focus,
.btn.btn-default:focus {
  background: var(--blue-primary) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* =========================
   Radio buttons
   ========================= */

.shiny-input-container .radio label {
  font-size: 14px !important;  /* Ajuste la taille de la police */
  font-weight: normal !important;  /* Ajuste la graisse de la police */
  margin-left: 10px !important;  /* Espace à gauche du texte */
}