.control .select .selectize-control {
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    max-width: 100%;
    position: relative;
}

/* Cache la flèche native de Bulma car Selectize génère la sienne */
.select:not(.is-multiple):not(.is-loading)::after {
    display: none !important;
}
.select:not(.is-multiple){
    height: 100% !important;
}

.select select {
    padding-right: 0.625em !important;
}

/* --- 3. Style de l'Input (Champ de saisie) --- */
.control .select .selectize-control .selectize-input,
.selectize-control.single .selectize-input,
.selectize-control .selectize-input,
.selectize-control .selectize-input.has-items {
    box-shadow: none;
    background-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-background-l) + var(--bulma-input-background-l-delta)));
    border-color: hsl(var(--bulma-input-h), var(--bulma-input-s), calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta)));
    border-radius: var(--bulma-input-radius);
    font-size: 16px !important;
    padding: 0.35rem 2.5rem 0.35rem 0.75em !important;
    color: #363636 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    min-height: 2.5rem !important;
    height: auto !important;
    position: relative;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
}

/* Permet le contrôle de la taille du placeholder */
.selectize-dropdown, .selectize-input, .selectize-input input {
    font-size: 16px !important;
}

.control .select .selectize-control .selectize-input {  
    /* FIX RADICAL DU BLOC GRIS : Force le blanc partout, tout le temps */
    background-color: #fff !important; 
    background-image: none !important;
}

.selectize-input.full {
    background-color: transparent !important;
}

/* Masque le champ de saisie quand le menu est ouvert pour les select unique */
.selectize-control .selectize-input.full input {
    display: none !important;
}

.selectize-input.focus {
    border-color: hsl(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l)) !important;
    box-shadow: var(--bulma-input-focus-shadow-size) hsla(var(--bulma-input-focus-h), var(--bulma-input-focus-s), var(--bulma-input-focus-l), var(--bulma-input-focus-shadow-alpha)) !important;
}

/* Alignement et étalement parfait de l'item sélectionné - MODE UNIQUE UNIQUEMENT */
.selectize-control.single .selectize-input .item {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important; 
    height: 100% !important;
    vertical-align: middle !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.control .select .selectize-control .selectize-input input {
    height: 100% !important;
    line-height: 2.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.control .select .selectize-control .selectize-input input::placeholder {
    color: #7a7a7a !important;
    font-style: italic;
}

/* Gestion des icônes Bulma à gauche */
.control.has-icons-left .select .selectize-control .selectize-input {
    padding-left: 2.5rem !important;
}

.control.has-icons-left .icon {
    z-index: 5;
    pointer-events: none;
    height: 2.5rem !important;
    display: flex;
    align-items: center;
}

/* --- 4. Menu Déroulant (Dropdown) --- */
.selectize-dropdown {
    font-size: 16px !important;
    z-index: 1000 !important;
    background-color: #fff !important;
    border: 1px solid #dbdbdb !important;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1) !important;
}

.selectize-dropdown .option {
    padding: 0.5rem 0.75rem !important;
    color: #363636 !important;
}


.selectize-dropdown .option.active,
.selectize-dropdown .selectize-dropdown-content .active {
    background-color: var(--toolkit-select-active-bg, var(--secondary-color, #485fc7)) !important;
    color: var(--toolkit-select-active-color, #ffffff) !important;
}

/* État : Sélectionné
   Personnalisable via :root : --toolkit-select-selected-bg / --toolkit-select-selected-color */
.selectize-dropdown .option.selected,
.selectize-dropdown .selected {
    background-color: var(--toolkit-select-selected-bg, #f5f5f5) !important;
    color: var(--toolkit-select-selected-color, #363636) !important;
}

.selectize-dropdown .active i {
    color: var(--toolkit-select-active-color, #ffffff) !important;
}

/* --- 5. Éléments Spécifiques (Multi, Clear, Erreurs) --- */
.selectize-control.multi .selectize-input {
    height: auto !important; /* Laisse le champ s'étendre verticalement si plusieurs lignes */
    align-items: center !important;
}
/* Multi-select (Tags) */
.selectize-control.multi .selectize-input > div {
    padding: 2px 8px;
    margin: 3px;
    background: #f5f5f5;
    color: #363636;
    border-radius: 2px;
}
.selectize-control.multi .selectize-input input {
    line-height: normal !important;
    height: auto !important;
    margin: 0 !important;
    padding: 4px 0 !important;
}

/* Centrage parfait de la croix de suppression */
.selectize-control.plugin-clear_button .clear {
    display: none !important;
}

/* Afficher la croix uniquement si un élément est sélectionné (has-items) */
.selectize-control.plugin-clear_button .selectize-input.has-items + .clear {
    display: inline-block !important;
    right: 0.11rem !important;
    top: 0.4rem !important;

    font-size: 18px !important;
    color: #4a4a4a !important;
}

/* Alignement et centrage de la flèche Selectize native (Affichée SEULEMENT si aucun item n'est sélectionné) */
.selectize-control.single .selectize-input:after,
.selectize-control.multi .selectize-input:after {
    content: " " !important;
    display: block !important;
    border-color: #888 transparent transparent transparent !important;
    border-style: solid !important;
    border-width: 5px 5px 0 5px !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 15px !important;
    margin-top: 0 !important; /* Ajusté pour le centrage flex */
    pointer-events: none;
}

.selectize-control.single .selectize-input.has-items:after,
.selectize-control.multi .selectize-input.has-items:after {
    display: none !important;
}

/* Erreur de validation */
.control .select.is-danger .selectize-control.input-error {
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
}

/* --- 6. Layouts Spéciaux & Responsive --- */
.selectize-item-padded {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0.25rem 0.25rem 0.25rem 0 !important;
}

@media screen and (max-width: 768px) {
    .mobile-selectize-fullwidth {
        flex-direction: column !important;
        display: flex !important;
        gap: 0.5rem;
    }
    
    .mobile-selectize-fullwidth .control,
    .mobile-selectize-fullwidth .selectize-control {
        width: 100% !important;
    }
}

/* Gestion des icônes Bulma à gauche - Décale tout le bloc de tags */
.control.has-icons-left .selectize-control .selectize-input {
    padding-left: 2.5rem !important; /* Décale les tags pour qu'ils ne chevauchent pas l'icône */
}

/* Force l'icône Bulma à rester centrée verticalement à gauche, même si le champ grandit */
.control.has-icons-left .select .icon {
    z-index: 5;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    height: 2.5rem !important; /* Reste calé sur la hauteur de la première ligne */
    display: flex;
    align-items: center;
    justify-content: center;
}