* {
    /* --coul-bord: #999999; */
    --coul-bord: color-mix(in srgb, var(--noti-fonc) 35%, #FFFFFF 65%);
}

.capi-true-sele {
    min-height: var(--default-field-height);
    height: var(--default-field-height);
    max-width: 100%;

    position: relative;

    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0;

    font-size: var(--default-field-font-size, 12px);
    background: var(--coul-back, #FFFFFF);
    border: var(--default-field-border-size) solid var(--coul-bord, var(--coul-modu));
    border-radius: var(--default-field-border-radius);
}

.capi-true-sele > select {
    width: 100%;
    padding-left: 6px;
    padding-right: 20px;
    outline: none;
    line-height: 20px;
}

/* ---------------- Style de l'option vide dans le select ---------------- */
.capi-true-sele > select option {
    background-color: #FFFFFF;
    color: initial;
    font-style: normal;
}

.capi-true-sele > select option:checked {
    background-color: color-mix(in srgb, var(--noti-fonc) 10%, #FFFFFF 90%);
}

.capi-true-sele > select option.empty-option, .capi-true-sele > select:has(option.empty-option:checked[value="0"]) {
    color: #AAAAAA;
    font-style: italic;
}
/* ----------------------------------------------------------------------- */

.capi-true-sele > div > .icon-acti-base { color: var(--coul-icon, #999999); margin-right: 8px; }

.capi-true-sele:has(select:open) {
    border-color: var(--noti-fonc);
    outline: 1px solid var(--noti-fonc);
}

.capi-true-sele:has(select:open) > div > .icon-acti-base {
    transform: rotate(180deg);
}

/* ============================================ FAKE SELECT ============================================ */

.capi-fake-sele {
    max-width: 100%;
    
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 4px;
}

.capi-fake-sele > .capi-fake-sele-cont {
    width: 100%;
    min-height: var(--default-field-height);
    height: var(--default-field-height);

    display: flex;
    align-items: center;
    flex-grow: 1;
    padding: 0;

    background: var(--coul-back, #FFFFFF);
    border: var(--default-field-border-size) solid var(--coul-bord, var(--coul-modu));
    border-radius: var(--default-field-border-radius);
}

.capi-fake-sele > .capi-fake-sele-cont > *:not(i) {
    font-family: 'Inter';
}

.capi-fake-sele > .capi-fake-sele-cont > span {
    display: block;
    margin: 0 6px;
    gap: 4px;

    font-size: var(--default-field-font-size);
    font-weight: 500;

    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capi-fake-sele > .capi-fake-sele-cont > div > .icon-acti-base { color: var(--coul-icon, #999999); margin-right: 8px; }

.capi-fake-sele > .filt-bout {
    margin: 0;
}

.capi-fake-sele > .capi-fake-sele-cont > .capi-sele-vale {
    flex-grow: 1;
}

.capi-fake-sele > .capi-fake-sele-cont > .capi-sele-vale > .fake-sele-mult-case {
    margin: 0;
    border-radius: 2px;
    padding: 0 2px;
}

.bout-cham + .capi-fake-sele {
    width: calc(100% - 2px - var(--default-field-height));
    max-width: calc(100% - 2px - var(--default-field-height));
}