/* ================================================================
   Filter Range — Double slider de plage de valeurs
   ================================================================ */

/* ── Propriété custom (overridable par inline style) ────────────── */
.frange {
    --frange-color: var(--main-color);
    --frange-thumb-size: 14px;
    --frange-track-h: 3px;
}

/* ── Conteneur principal ─────────────────────────────────────────── */
.frange {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* ── Label ────────────────────────────────────────────────────────── */
.frange__label {
    font-family: var(--font-rubik);
    font-size: 14px;
    font-weight: 700;
    color: var(--dark1);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Zone slider ─────────────────────────────────────────────────── */
.frange__slider {
    position: relative;
    flex: 1;
    padding-top: 28px; /* espace pour les bulles */
}

/* ── Conteneur piste + inputs (sous les bulles) ─────────────────── */
.frange__track-wrap {
    position: relative;
    height: var(--frange-track-h);
}

/* ── Piste ───────────────────────────────────────────────────────── */
.frange__track {
    position: relative;
    height: var(--frange-track-h);
    background: rgba(55, 36, 28, 0.12);
    border-radius: 2px;
}

.frange__fill {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--frange-color);
    border-radius: 2px;
}

/* ── Inputs range superposés ─────────────────────────────────────── */
.frange__input {
    position: absolute;
    width: 100%;
    height: var(--frange-track-h);
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none;
}

/* ── Poignée Webkit ───────────────────────────────────────────────── */
.frange__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--frange-thumb-size);
    height: var(--frange-thumb-size);
    background: var(--dark1);
    border-radius: 3px;
    cursor: pointer;
    pointer-events: all;
    position: relative;
    z-index: 2;
    margin-top: calc((var(--frange-track-h) - var(--frange-thumb-size)) / 2);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.frange__input::-webkit-slider-thumb:hover,
.frange__input::-webkit-slider-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(250, 171, 87, 0.25);
}

/* ── Poignée Firefox ─────────────────────────────────────────────── */
.frange__input::-moz-range-thumb {
    width: var(--frange-thumb-size);
    height: var(--frange-thumb-size);
    background: var(--dark1);
    border-radius: 3px;
    cursor: pointer;
    border: none;
    pointer-events: all;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.frange__input::-moz-range-thumb:hover,
.frange__input::-moz-range-thumb:active {
    transform: scale(1.15);
    box-shadow: 0 0 0 4px rgba(250, 171, 87, 0.25);
}

/* ── Track natif masqué ──────────────────────────────────────────── */
.frange__input::-webkit-slider-runnable-track {
    background: transparent;
    height: var(--frange-track-h);
}

.frange__input::-moz-range-track {
    background: transparent;
    height: var(--frange-track-h);
}

/* ── Bulles de valeur ────────────────────────────────────────────── */
.frange__bubble {
    position: absolute;
    top: 0;
    z-index: 2;
    background: var(--dark1);
    color: var(--white);
    font-family: var(--font-rubik);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 4px;
    white-space: nowrap;
    transform: translateX(-50%);
    pointer-events: none;
    user-select: none;
    transition: left 0.05s linear;
}