/* ==========================================================================
   OsmoTools : calculateur de marge TikTok Shop ([osmova_marge_tiktok])
   ========================================================================== */

.omt {
    --omt-noir: #0A0A0A;
    --omt-gris: #6B6B6B;
    --omt-gris-bg: #F3F4F6;
    --omt-border: #E5E7EB;
    --omt-blue: #0064FF;
    --omt-rouge: #B42318;
    --omt-vert: #067647;
    margin: 0 0 40px;
    padding: 28px;
    border: 1px solid var(--omt-border);
    border-radius: 16px;
    background: #fff;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--omt-noir);
}

.omt .omt__title {
    margin: 0 0 16px;
    font-size: 1.15rem;
}

.omt__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.omt__group {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.omt__group legend {
    margin: 0 0 10px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
}

.omt__field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 2px 14px;
    align-items: center;
    margin: 0 0 10px;
}

.omt__label {
    font-size: 14px;
}

.omt__input {
    display: flex;
    align-items: center;
    border: 1px solid var(--omt-border);
    border-radius: 10px;
    background: #fff;
}

.omt__input:focus-within,
.omt select:focus {
    border-color: var(--omt-blue);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--omt-blue) 15%, white);
}

.omt__input input {
    width: 100%;
    min-width: 0;
    padding: 9px 4px 9px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font: 600 16px/1.2 inherit;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--omt-noir);
}

.omt__input input:focus {
    outline: 0;
}

.omt__unit {
    padding: 0 12px 0 4px;
    font-size: 14px;
    color: var(--omt-gris);
}

.omt select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--omt-border);
    border-radius: 10px;
    background: #fff;
    font: 14px/1.3 inherit;
    font-family: inherit;
}

.omt__help {
    grid-column: 1 / -1;
    font-size: 12px;
    color: var(--omt-gris);
}

.omt__autre[hidden] {
    display: none;
}

/* Résultat */
.omt__out {
    position: sticky;
    top: 110px;
    padding: 22px;
    border-radius: 14px;
    background: var(--omt-gris-bg);
}

.omt__kicker {
    margin: 0;
    font-size: 14px;
    color: var(--omt-gris);
}

.omt__marge {
    margin: 2px 0 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--omt-vert);
}

.omt__marge.is-neg {
    color: var(--omt-rouge);
}

.omt__taux-marge {
    margin: 4px 0 16px;
    font-size: 14px;
}

.omt__table {
    width: 100%;
    margin: 0 0 16px;
    border-collapse: collapse;
    font-size: 14px;
}

.omt__table th,
.omt__table td {
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid var(--omt-border);
    text-align: left;
    font-weight: 500;
    vertical-align: top;
}

.omt__table td {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.omt__table td.is-neg {
    color: var(--omt-noir);
}

.omt__det {
    display: block;
    font-size: 12px;
    color: var(--omt-gris);
}

.omt__total th,
.omt__total td {
    border-bottom: 0;
    font-weight: 800;
}

.omt__price {
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin: 0 0 6px;
    font-size: 14px;
}

.omt__price strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.omt__warn {
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--omt-rouge);
}

.omt__warn[hidden] {
    display: none;
}

.omt__note {
    margin: 18px 0 0;
    font-size: 12px;
    color: var(--omt-gris);
}

@media (max-width: 860px) {
    .omt__grid {
        grid-template-columns: 1fr;
    }

    .omt__out {
        position: static;
    }
}

@media (max-width: 520px) {
    .omt {
        padding: 18px;
    }

    .omt__field {
        grid-template-columns: 1fr;
    }
}